From 7e822f1c66f41e8d8ad6608e408c06ea7819f3e9 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Sun, 23 Feb 2025 12:52:09 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/scenic.js                       |  10 +++
 src/assets/images/unfollow.png          | Bin 0 -> 1814 bytes
 src/components/CoreVideo/index.vue      |  24 ++++-
 src/utils/config.js                     |   4 +-
 src/views/home/components/age.vue       |   6 +-
 src/views/home/components/box-2.vue     |  13 +--
 src/views/scenic/components/age.vue     | 115 +++---------------------
 src/views/scenic/components/big-map.vue |  26 +++++-
 src/views/scenic/components/box-2.vue   |  10 +--
 9 files changed, 82 insertions(+), 126 deletions(-)
 create mode 100644 src/api/scenic.js
 create mode 100644 src/assets/images/unfollow.png

diff --git a/src/api/scenic.js b/src/api/scenic.js
new file mode 100644
index 0000000..e322ecf
--- /dev/null
+++ b/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
+  })
+}
diff --git a/src/assets/images/unfollow.png b/src/assets/images/unfollow.png
new file mode 100644
index 0000000000000000000000000000000000000000..88ce79c82ff512ab80f2f119e6ac014e67f675dc
GIT binary patch
literal 1814
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
Ef-JyaC;$Ke

literal 0
HcmV?d00001

diff --git a/src/components/CoreVideo/index.vue b/src/components/CoreVideo/index.vue
index 037584f..ece08af 100644
--- a/src/components/CoreVideo/index.vue
+++ b/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;
diff --git a/src/utils/config.js b/src/utils/config.js
index 0e848af..f83304e 100644
--- a/src/utils/config.js
+++ b/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
diff --git a/src/views/home/components/age.vue b/src/views/home/components/age.vue
index a929d12..4d63869 100644
--- a/src/views/home/components/age.vue
+++ b/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>
diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue
index 026a234..fe6a617 100644
--- a/src/views/home/components/box-2.vue
+++ b/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);
-        height: vh(40);
+        padding: 0 vw(20);
+        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);
diff --git a/src/views/scenic/components/age.vue b/src/views/scenic/components/age.vue
index eeb7595..0a7ca0d 100644
--- a/src/views/scenic/components/age.vue
+++ b/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',
-          y: '76%',
+          x: 'center',
+          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)
-            // return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
-            return '{name|' + name + '}'
+            let obj = props.list.find((item) => item.name == name)
+            return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
           },
           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> -->
diff --git a/src/views/scenic/components/big-map.vue b/src/views/scenic/components/big-map.vue
index a669d2f..1f766db 100644
--- a/src/views/scenic/components/big-map.vue
+++ b/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
@@ -214,7 +222,7 @@
   const setHtml = (data) => {
     let html = `<div class='marker-box'>
                   <p class='marker-title'> ${data?.license_number} </p>
-                  <div class='marker-header'> 
+                  <div class='marker-header'>
                       <span class='marker-sim'> ${data?.imei} </span>
                       <div class='marker-tag'> <div></div> ${data.status}  （${data.status_time_desc}）</div>
                     </div>
@@ -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(() => {
diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue
index 11d1dad..2913c32 100644
--- a/src/views/scenic/components/box-2.vue
+++ b/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) => {