feat：完善功能

src/api/scenic.js

@@ -0,0 +1,10 @@
+import request from './request'
+
+// GPS列表
+export function getGpsListApi(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/spot/gpsList',
+    method: 'get',
+    params: data
+  })
+}

src/components/CoreVideo/index.vue

@@ -14,13 +14,14 @@
           <p class="item-title--primary">
             {{ item.cameraName || item.cameraIndexCode }}
           </p>
+          <div class="item-unfollow">取消关注</div>
           <video
             class="item-img"
             :id="'video' + index"
             muted
             autoplay
             :controls="false"
-            style="object-fit: cover"
+            controlsList="nodownload"
           >
             <source src="" type="application/x-mpegURL" />
           </video>
@@ -145,9 +146,30 @@
       margin-bottom: vh(10);
       padding: vw(10);
       background-size: 100% 100%;
+      &-unfollow {
+        display: none;
+        position: absolute;
+        right: vw(8);
+        top: vw(8);
+        width: vw(64);
+        height: vh(24);
+        text-align: center;
+        line-height: vh(24);
+        font-weight: 400;
+        font-size: vw(12);
+        color: #ffffff;
+        background-image: url('@/assets/images/unfollow.png');
+        background-size: 100% 100%;
+      }
+      &:hover {
+        .item-unfollow {
+          display: block;
+        }
+      }
       & > div {
         position: relative;
       }
+
       &-title {
         position: absolute;
         bottom: 0;

src/utils/config.js

@@ -1,7 +1,7 @@
-export const baseUrl = 'http://36.138.38.16:8001' // http://36.138.38.16:8001
+export const baseUrl = 'http://36.138.38.16:8001'
 export const proBaseUrl = 'http://192.168.77.200'
 
-export const socketBaseUrl = 'ws://36.138.38.16:81' // ws://36.138.38.16:81
+export const socketBaseUrl = 'ws://36.138.38.16:81'
 export const proSocketBaseUrl = 'ws://192.168.77.200:8060'
 
 export const mode = 'pro' // 测试 dev  正式 pro

src/views/home/components/age.vue

@@ -62,7 +62,7 @@
             clockwise: false,
             silent: true,
             center: ['30%', '50%'],
-            radius: ['60%', '70%'],
+            radius: ['50%', '60%'],
             itemStyle: {
               borderColor: 'transparent',
               borderRadius: fitChartSize(2),
@@ -80,7 +80,7 @@
             clockwise: false,
             silent: true,
             center: ['30%', '50%'],
-            radius: ['54%', '58%'],
+            radius: ['44%', '48%'],
             itemStyle: {
               borderColor: 'transparent',
               borderRadius: fitChartSize(2),
@@ -136,6 +136,6 @@
 <style lang="scss" scoped>
   .age {
     width: vw(300);
-    height: vh(120);
+    height: vh(150);
   }
 </style>

src/views/home/components/box-2.vue

@@ -33,7 +33,7 @@
       <div class="alarm-box">
         <ul class="flex">
           <li class="alarm-item" v-for="(item, index) in list" :key="index">
-            <img class="icon" :src="item.icon" />
+            <img class="alarm-item__icon" :src="item.icon" />
             <span>{{ item.label }}</span>
           </li>
         </ul>
@@ -124,6 +124,7 @@
 <script setup>
   import countup from 'vue-countup-v3'
   import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+
   import ScrollNumber from '@/components/ScrollNumber/index.vue'
   import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi } from '@/api/home'
 
@@ -170,7 +171,7 @@
   watch(
     () => [map.value, homeStore.carShipData],
     () => {
-      return;
+      return
       if (map.value && homeStore.carShipData) {
         // clearOverlays()
         markers.forEach((item) => {
@@ -352,7 +353,7 @@
         margin-top: vh(20);
       }
       .item {
-        margin-right:vh(20);
+        margin-right: vh(20);
         flex: 1;
         .label {
           margin-bottom: vh(20);
@@ -395,8 +396,8 @@
       left: vw(20);
       z-index: 99;
       .alarm-item {
-        width: vw(110);
+        padding: 0 vw(20);
-        height: vh(40);
+        height: vw(40);
         margin-right: vw(4);
         font-weight: 400;
         font-size: vw(14);
@@ -405,7 +406,7 @@
         align-items: center;
         justify-content: center;
         background: linear-gradient(to bottom, rgba(238, 44, 44, 0) 0%, #ee2c2c 100%);
-        .icon {
+        &__icon {
           width: vw(20);
           height: vw(20);
           margin-right: vw(4);

src/views/scenic/components/age.vue

@@ -33,18 +33,17 @@
   }
   const init = () => {
     if (!params) {
-      const center = ['50%', '40%']
+      const center = ['50%', '34%']
       params = {
         legend: {
-          x: 'left',
+          x: 'center',
-          y: '76%',
+          y: '70%',
           itemHeight: fitChartSize(8),
           itemWidth: fitChartSize(8),
           itemGap: fitChartSize(14),
           formatter: function (name) {
-            // let obj = homeData.value?.userPortrait?.ageRate.find((item) => item.name == name)
+            let obj = props.list.find((item) => item.name == name)
-            // return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
+            return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
-            return '{name|' + name + '}'
           },
           textStyle: {
             rich: {
@@ -64,7 +63,7 @@
             type: 'pie',
             silent: true,
             center: center,
-            radius: ['60%', '70%'],
+            radius: ['40%', '50%'],
             itemStyle: {
               borderColor: 'transparent',
               borderRadius: fitChartSize(2),
@@ -81,7 +80,7 @@
             type: 'pie',
             silent: true,
             center: center,
-            radius: ['54%', '58%'],
+            radius: ['34%', '38%'],
             itemStyle: {
               borderColor: 'transparent',
               borderRadius: fitChartSize(2),
@@ -98,7 +97,7 @@
             type: 'pie',
             silent: true,
             center: center,
-            radius: ['0', '40%'],
+            radius: ['0', '20%'],
             itemStyle: {
               color: '#065EAD'
             },
@@ -111,7 +110,7 @@
             type: 'pie',
             silent: true,
             center: center,
-            radius: ['0', '26%'],
+            radius: ['0', '16%'],
             itemStyle: {
               color: '#0477D1'
             },
@@ -133,100 +132,6 @@
 <style lang="scss" scoped>
   .age {
     width: vw(240);
-    height: vh(240);
+    height: vh(260);
   }
 </style>
-
-<!-- <template>
-  <div class="age-ratio" :id="id" />
-</template>
-
-<script setup>
-  import * as echarts from 'echarts'
-  import { fitChartSize } from '@/utils/dataUtil'
-  import { guid } from '@/utils/util'
-
-  let ageChart = null
-  let id = ref(guid())
-
-  const init = () => {
-    // 基于准备好的dom，初始化echarts实例
-    ageChart = echarts.init(document.getElementById(id.value))
-    ageChart.setOption({
-      legend: {
-        orient: 'horizontal',
-        x: 'left',
-        y: 'bottom',
-        data: ['19岁以下', '18-30岁', '30-40岁', '40-60岁', '60岁以上'],
-        itemHeight: fitChartSize(8),
-        itemWidth: fitChartSize(8),
-        itemGap: fitChartSize(10),
-        formatter: function (name) {
-          return '{title|' + name + '}'
-        },
-        textStyle: {
-          rich: {
-            title: {
-              color: '#fff',
-              fontSize: fitChartSize(14)
-            },
-            value: {
-              color: '#00D5F6',
-              fontSize: fitChartSize(14)
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          center: ['50%', '40%'],
-          radius: ['65%', '75%'],
-          itemStyle: {
-            borderColor: 'transparent',
-            borderRadius: fitChartSize(2),
-            borderWidth: fitChartSize(2)
-          },
-          label: {
-            show: false,
-            color: '#D3F0FE',
-            fontSize: fitChartSize(12)
-          },
-          labelLine: {
-            normal: {
-              lineStyle: {
-                type: 'dashed'
-              }
-            }
-          },
-          data: [
-            { value: 484, name: '19岁以下' },
-            { value: 300, name: '18-30岁' },
-            { value: 1048, name: '30-40岁' },
-            { value: 580, name: '40-60岁' },
-            { value: 735, name: '60岁以上' }
-          ]
-        }
-      ]
-    })
-    window.addEventListener('resize', resize)
-  }
-  const resize = () => {
-    if (ageChart) {
-      ageChart.dispose()
-      ageChart = null
-      init()
-    }
-  }
-
-  onMounted(() => {
-    init()
-  })
-</script>
-
-<style lang="scss" scoped>
-  .age-ratio {
-    width: vw(280);
-    height: vh(240);
-  }
-</style> -->

src/views/scenic/components/big-map.vue

@@ -5,7 +5,7 @@
       <div class="flex">
         <div class="list-box">
           <title2 title="车船" />
-          <el-input v-model="value" clearable placeholder="设备号/设备名称SIM卡号">
+          <el-input v-model="keyword" clearable placeholder="设备号/设备名称SIM卡号">
             <template #suffix>
               <img src="@/assets/images/search-icon-1.png" alt="" />
             </template>
@@ -41,6 +41,8 @@
 </template>
 
 <script setup>
+  import { getGpsListApi } from '@/api/scenic'
+
   import closeIcon from '@/assets/images/close.png'
   import carIcon from '@/assets/images/car.png'
   import shipIcon from '@/assets/images/ship.png'
@@ -55,10 +57,13 @@
 
   import { useMap } from '@/hooks/map'
 
-  let modelValue = defineModel()
   const { map, marker, initMap, addMarker } = useMap()
 
   let props = defineProps({
+    scenicSpotId: {
+      type: String,
+      default: ''
+    },
     carList: {
       type: Array,
       default: () => []
@@ -68,10 +73,13 @@
       default: () => []
     }
   })
+  let modelValue = defineModel()
 
   let lat = ref('')
   let lng = ref('')
-  let value = ref('')
+  let scenicSpotId = ref('')
+  let keyword = ref('')
+  let status = ref('')
   let active = ref(0)
   let current = ref('')
   let scenicChange = null
@@ -270,10 +278,20 @@
     active.value = index
   }
 
+  const getGpsList = async () => {
+    let res = await getGpsListApi({
+      scenicSpotId: scenicSpotId.value,
+      keyword: keyword.value,
+      status: status.value
+    })
+  }
+
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+      scenicSpotId.value = data.scenicSpotId
       lat.value = data.lat
       lng.value = data.lng
+      getGpsList()
     })
   })
   onUnmounted(() => {

src/views/scenic/components/box-2.vue

@@ -325,6 +325,11 @@
   const scenicStore = useScenicStore()
   const { initMap, addMarker, marker } = useMap()
 
+  let show = ref(false)
+  let scenicChange = null
+  let carOverlays = ref([])
+  let shipOverlays = ref([])
+
   const garageList = computed(() => {
     return scenicStore.stopCarData.headList
   })
@@ -362,11 +367,6 @@
     return scenicStore.scenicQueueData.dataList.map((item) => item.name)
   })
 
-  let show = ref(false)
-  let scenicChange = null
-  let carOverlays = ref([])
-  let shipOverlays = ref([])
-
   watch(
     () => scenicStore.carShipData,
     (val) => {