feat：完善功能

2025-02-23 12:52:09 +08:00
parent 2d881eae08
commit 7e822f1c66
9 changed files with 82 additions and 126 deletions
--- 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>
--- 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);
--- 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> -->
--- 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(() => {
--- 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) => {