feat：完善功能

2025-01-20 04:09:56 +08:00
parent 46c737fb93
commit 65244492b4
40 changed files with 2303 additions and 797 deletions
--- a/src/views/home/components/age.vue
+++ b/src/views/home/components/age.vue
@@ -41,7 +41,7 @@
          itemGap: fitChartSize(10),
          formatter: function (name) {
            let obj = props.list.find((item) => item.name == name)
-            return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
+            return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
          },
          textStyle: {
            rich: {
--- a/src/views/home/components/box-1.vue
+++ b/src/views/home/components/box-1.vue
@@ -1,10 +1,6 @@
 <template>
  <div class="box-2">
-    <Title1 title="景区信息">
-      <template #right>
-        <img class="more" src="@/assets/images/more.png" />
-      </template>
-    </Title1>
+    <Title1 title="景区信息" />
    <div class="list flex pt-20">
      <div class="item" v-for="(item, index) in homeStore.scenicData.scenicSpot" :key="index">
        <img v-if="index == 0" class="item-icon" src="@/assets/images/core.png" />
@@ -18,7 +14,7 @@
    </div>
    <div class="flex pt-20">
      <div class="box">
-        <Title2 title="景区排队人数" />
+        <Title2 title="景区排队" />
        <div class="statistic">
          <div
            class="statistic-item"
@@ -48,7 +44,7 @@
        </div>
      </div>
      <div class="box">
-        <Title2 title="景区承载量" />
+        <Title2 title="景区承载" />
        <div class="statistic">
          <div
            class="statistic-item"
@@ -73,7 +69,7 @@
    </div>

    <div class="ticket-box">
-      <Title2 title="景区购票数" />
+      <Title2 title="景区购票" />
      <div class="ticket-wrap">
        <img src="@/assets/images/ticket.png" />
        <div v-for="(item, index) in homeStore.scenicData.data" :key="index">
@@ -86,7 +82,7 @@
    <Title1 title="游客画像" />
    <div class="flex">
      <div class="age-box">
-        <Title3 title="年龄/性别占比" />
+        <Title3 title="年龄/性别" />
        <div class="mt-8">
          <age :list="homeStore.userPortraitData?.ageRate" />
        </div>
@@ -115,12 +111,12 @@
      </div>

      <div class="box-1">
-        <Title3 title="客源地分析TOP5" />
+        <Title3 title="客源地TOP5" />
        <top />
      </div>

      <div class="box-1">
-        <Title3 title="购票来源" />
+        <Title3 title="购票渠道" />
        <div v-if="channelTotal > 0" class="count">
          游客总数：<countup :end-val="channelTotal" />
        </div>
@@ -184,14 +180,6 @@
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-2.png');
    background-size: 100% 100%;
-    .more {
-      position: absolute;
-      top: vh(0);
-      right: vw(20);
-      cursor: pointer;
-      width: vw(60);
-      height: auto;
-    }
    .dropdown {
      position: absolute;
      right: vw(8);
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
@@ -125,7 +125,7 @@
  import countup from 'vue-countup-v3'
  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
  import ScrollNumber from '@/components/ScrollNumber/index.vue'
-  import { getSpotListApi, getBaiduMapCrowdedApi } from '@/api/home'
+  import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi } from '@/api/home'

  import icon8 from '@/assets/images/icon-8.png'
  import icon9 from '@/assets/images/icon-9.png'
@@ -139,7 +139,7 @@

  let emit = defineEmits(['switch-spot'])

-  const { map, initMap, addMarker } = useMap()
+  const { map, initMap } = useMap()

  let spotList = ref([])

@@ -161,6 +161,7 @@
      icon: icon11
    }
  ])
+  let current = ref(0)
  const handleMap = (e) => {
    emit('switch-spot', e)
    // map.value.centerAndZoom(new BMapGL.Point('108.704166', '30.94776'), 16)
@@ -168,26 +169,17 @@
  const getSpotList = async () => {
    let res = await getSpotListApi()
    spotList.value = res.data
-    let res1 = await getBaiduMapCrowdedApi({
-      nodeId: res.data[0].nodeid
-    })
-    console.log(res1, 'res1')
+    getBaiduMap()
  }
-
-  watch(
-    () => homeStore?.baiduMapData,
-    (val) => {
-      if (val) {
-        setTimeout(() => {
-          init(val)
-        }, 1000)
-      }
-    },
-    { immediate: true }
-  )
-  const init = (val) => {
-    initMap('map', val.index.lng, val.index.lat, 15, false)
-    val.list.map((item) => {
+  const getBaiduMap = async () => {
+    let res = await getBaiduMapApi({
+      nodeid: 7162
+    })
+    initMap('map', res.data.index.lng, res.data.index.lat, 15, false)
+    map.value.setMapStyleV2({
+      styleId: 'd1e61f575b3ef4e2df71ab6a5690ddab' // 23c9fb8e1c604995f97f0f1cebd7036fF
+    })
+    res.data.list.map((item) => {
      item.map((i) => {
        // 创建折线
        let arr = []
@@ -195,14 +187,94 @@
          arr.push(new BMapGL.Point(j[0], j[1]))
        })
        var polyline = new BMapGL.Polyline(arr, {
-          strokeColor: '#38DBFF',
-          strokeWeight: 4,
+          strokeColor: '#9AFF02',
+          strokeWeight: 8,
          strokeOpacity: 0.8
        })
        map.value.addOverlay(polyline)
      })
    })
+    getBaiduMapCrowded()
  }
+  const getBaiduMapCrowded = async () => {
+    let res = await getBaiduMapCrowdedApi({
+      nodeid: spotList.value[current.value].nodeid
+    })
+    let data = res.data
+    if (data) {
+      data.forEach((bmci) => {
+        let linkStates = JSON.parse(bmci.link_states)
+        for (let key in linkStates) {
+          let bmciArr = []
+          if (linkStates.hasOwnProperty(key)) {
+            let bm = []
+            if (key == 1) {
+              bm = linkStates[key].split(';')
+              bm.forEach((bmItem) => {
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
+                var bmciPolyline = new BMapGL.Polyline(bmciArr, {
+                  strokeColor: 'red',
+                  strokeWeight: 8,
+                  strokeOpacity: 0.8
+                })
+                map.value.addOverlay(bmciPolyline)
+              })
+            } else if (key == 2) {
+              bm = linkStates[key].split(';')
+              bm.forEach((bmItem) => {
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
+                var bmciPolyline = new BMapGL.Polyline(bmciArr, {
+                  strokeColor: 'red',
+                  strokeWeight: 8,
+                  strokeOpacity: 0.8
+                })
+                map.value.addOverlay(bmciPolyline)
+              })
+            } else if (key == 3) {
+              bm = linkStates[key].split(';')
+              bm.forEach((bmItem) => {
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
+                var bmciPolyline = new BMapGL.Polyline(bmciArr, {
+                  strokeColor: 'red',
+                  strokeWeight: 8,
+                  strokeOpacity: 0.8
+                })
+                map.value.addOverlay(bmciPolyline)
+              })
+            } else if (key == 4) {
+              bm = linkStates[key].split(';')
+              bm.forEach((bmItem) => {
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
+                var bmciPolyline = new BMapGL.Polyline(bmciArr, {
+                  strokeColor: 'red',
+                  strokeWeight: 8,
+                  strokeOpacity: 0.8
+                })
+                map.value.addOverlay(bmciPolyline)
+              })
+            } else {
+              bm = linkStates[key].split(';')
+              bm.forEach((bmItem) => {
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
+                var bmciPolyline = new BMapGL.Polyline(bmciArr, {
+                  strokeColor: 'red',
+                  strokeWeight: 8,
+                  strokeOpacity: 0.8
+                })
+                map.value.addOverlay(bmciPolyline)
+              })
+            }
+          }
+        }
+      })
+    }
+  }
+
  onMounted(() => {
    getSpotList()
  })
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -62,11 +62,11 @@
      <div>
        <img class="icon" src="@/assets/images/icon-5.png" alt="" />
        <div>
-          <div class="label">车库总数</div>
+          <div class="label">停车场总数</div>
          <countup class="value" :end-val="homeStore.carStopInfoData.countInfo.ckzs" />
        </div>
        <div>
-          <div class="label">总车位数</div>
+          <div class="label">车位总数</div>
          <countup class="value" :end-val="homeStore.carStopInfoData.countInfo.zcws" />
        </div>
        <div>
@@ -101,13 +101,13 @@
      </div>
      <div class="box-1">
        <div class="pt-10">
-          <Title3 title="车源地" />
+          <Title3 title="车源地TOP5" />
          <vehicle-source :list="homeStore.carStopInfoData.dataList1" />
        </div>
      </div>
      <div class="box-1">
        <div class="pt-10">
-          <Title3 title="景区停车场空位" />
+          <Title3 title="停车场空余" />
          <vacancy :list="homeStore.carStopInfoData.dataList2" />
        </div>
      </div>
@@ -212,14 +212,14 @@
            <countup class="value" :end-val="homeStore.hotelData?.info?.total_room_count || 0" />
          </div>
          <div class="item">
-            <div class="label">总入住</div>
+            <div class="label">当前入住总数</div>
            <countup
              class="value success"
              :end-val="homeStore.hotelData?.info?.total_guest_count || 0"
            />
          </div>
          <div class="item">
-            <div class="label">总入住率</div>
+            <div class="label">当前入住率</div>
            <div class="flex align-center">
              <countup
                class="value success"
@@ -241,11 +241,11 @@
 </template>

 <script setup>
-  import jamDuration from './jam-duration.vue'
-  import jamCount from './jam-count.vue'
-  import vacancy from './vacancy.vue'
-  import occupancy from './occupancy.vue'
-  import vehicleSource from './vehicle-source.vue'
+  import jamDuration from './jam-duration'
+  import jamCount from './jam-count'
+  import vacancy from './vacancy'
+  import occupancy from './occupancy'
+  import vehicleSource from './vehicle-source'
  import countup from 'vue-countup-v3'
  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
  import { useHomeStore } from '@/stores/home'
--- a/src/views/home/components/ticket.vue
+++ b/src/views/home/components/ticket.vue
@@ -47,13 +47,13 @@
          {
            value: parseFloat(item.value),
            name: item.name
-          },
-          {
-            value: 100,
-            itemStyle: {
-              color: '#07439C'
-            }
          }
+          // {
+          //   value: 100,
+          //   itemStyle: {
+          //     color: '#07439C'
+          //   }
+          // }
        ]
      }
    })
--- a/src/views/home/components/vacancy.vue
+++ b/src/views/home/components/vacancy.vue
@@ -122,10 +122,8 @@
            axisLine: 'none',
            show: true,
            axisLabel: {
-              textStyle: {
-                color: '#fff',
-                fontSize: fitChartSize(12)
-              },
+              color: '#fff',
+              fontSize: fitChartSize(12),
              verticalAlign: 'bottom',
              padding: [0, 0, 6, 0],
              inside: true,
--- a/src/views/home/components/vehicle-source.vue
+++ b/src/views/home/components/vehicle-source.vue
@@ -86,10 +86,8 @@
            label: {
              show: true,
              position: 'top',
-              textStyle: {
-                color: '#fff',
-                fontSize: fitChartSize(10)
-              }
+              color: '#fff',
+              fontSize: fitChartSize(10)
            },
            itemStyle: {
              borderRadius: [0, 0, 0, 0],