feat：完善首页功能

src/api/home.js

@@ -13,7 +13,7 @@ export function getVideoListApi(data) {
   return request({
     url: '/api/largeScreen/video/list',
     method: 'post',
-    params: data
+    data
   })
 }
 

src/api/request.js

@@ -14,11 +14,11 @@ const router = useRouter()
  */
 const instance = axios.create({
   // baseURL: 'http://36.138.38.16:6180/fjtcc-api',
-  // baseURL: 'http://36.138.38.16:8001/fjtcc-api',
+  baseURL: 'http://36.138.38.16:8001/fjtcc-api',
-  baseURL: '  http://172.22.15.170/fjtcc-api',
+  // baseURL: 'http://172.22.15.170/fjtcc-api',
   timeout: 100000,
   headers: {
-    Authorization: proToken,
+    Authorization: devToken,
     'Content-Type': 'application/json;charset=UTF-8'
   }
 })

src/components/CoreVideo/index.vue

@@ -50,6 +50,7 @@
     let res = await getVideoListApi({
       businessVideoDisplayPosition: ''
     })
+    console.log(res, '============')
     list.value = res.data
     nextTick(() => {
       list.value.forEach(async (item, index) => {

src/components/Line/index.vue

@@ -62,7 +62,7 @@
       }
     }
   }
-  let defaultConfig = {
+  const defaultConfig = {
     colors: defaultColors,
     tooltip: {
       trigger: 'axis',
@@ -168,7 +168,7 @@
       if (val[0].length > 0 && val[1].length > 0) {
         setTimeout(() => {
           updateOption()
-        }, 500)
+        }, 1000)
       }
     },
     { immediate: true }

src/views/home/components/age.vue

@@ -5,20 +5,29 @@
 <script setup>
   import { fitChartSize } from '@/utils/dataUtil'
   import { useEchart } from '@/hooks/echart'
-  import { useHomeStore } from '@/stores/home'
 
-  const homeStore = useHomeStore()
+  let props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    }
+  })
+
   const { id, setOption } = useEchart()
-
   let params = null
 
   watch(
-    () => homeStore.userPortraitData?.ageRate,
+    () => props.list,
     (val) => {
-      if (val.length > 0) init()
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
     },
     { immediate: true }
   )
+
   const init = () => {
     if (!params) {
       params = {
@@ -31,7 +40,7 @@
           itemWidth: fitChartSize(8),
           itemGap: fitChartSize(10),
           formatter: function (name) {
-            let obj = homeStore.userPortraitData?.ageRate.find((item) => item.name == name)
+            let obj = props.list.find((item) => item.name == name)
             return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
           },
           textStyle: {
@@ -64,7 +73,7 @@
               color: '#D3F0FE',
               fontSize: fitChartSize(12)
             },
-            data: homeStore.userPortraitData?.ageRate || []
+            data: props.list || []
           },
           {
             type: 'pie',
@@ -82,7 +91,7 @@
               color: '#D3F0FE',
               fontSize: fitChartSize(12)
             },
-            data: homeStore.userPortraitData?.ageRate || []
+            data: props.list
           },
           {
             type: 'pie',
@@ -115,9 +124,13 @@
         ]
       }
     } else {
+      params.series[0].data = props.list
     }
     setOption(params)
   }
+  defineExpose({
+    init
+  })
 </script>
 
 <style lang="scss" scoped>

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

@@ -28,7 +28,6 @@
             <span class="statistic-title">{{ item.name }}</span>
             <span v-if="item.value > 0" class="statistic-value">
               <span class="prefix">排队</span>
-              <!-- <span class="value">{{ item.value }}</span> -->
               <countup class="value" :end-val="item.value" />
               <span class="suffix">人</span>
             </span>
@@ -78,7 +77,8 @@
       <div class="ticket-wrap">
         <img src="@/assets/images/ticket.png" />
         <div v-for="(item, index) in homeStore.scenicData.data" :key="index">
-          <span class="label">{{ item.name }}：</span><countup :end-val="item.value" />
+          <span class="label">{{ item.name }}：</span>
+          <countup :end-val="item.value" />
         </div>
       </div>
     </div>
@@ -87,7 +87,9 @@
     <div class="flex">
       <div class="age-box">
         <Title3 title="年龄/性别占比" />
-        <div class="mt-8"> <age /></div>
+        <div class="mt-8">
+          <age :list="homeStore.userPortraitData?.ageRate" />
+        </div>
         <div v-if="ageRateTotal > 0" class="count">总人数：<countup :end-val="ageRateTotal" /></div>
         <div
           class="cell pt-20"

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

@@ -170,7 +170,11 @@
   watch(
     () => homeStore?.baiduMapData,
     (val) => {
-      if (val) init(val)
+      if (val) {
+        setTimeout(() => {
+          init(val)
+        }, 1000)
+      }
     },
     { immediate: true }
   )

src/views/home/components/jam-count.vue

@@ -22,7 +22,11 @@
   watch(
     () => props.list,
     (val) => {
-      if (val.length > 0) init()
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
     },
     {
       immediate: true

src/views/home/components/jam-duration.vue

@@ -19,7 +19,11 @@
   watch(
     () => props.list,
     (val) => {
-      if (val.length > 0) init()
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
     },
     { immediate: true }
   )

src/views/home/components/occupancy.vue

@@ -19,7 +19,11 @@
   watch(
     () => props.list,
     (val) => {
-      if (val.length > 0) init()
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
     },
     { immediate: true }
   )

src/views/home/components/ticket.vue

@@ -20,7 +20,11 @@
   watch(
     () => homeStore.userPortraitData.channel,
     (val) => {
-      if (val.length > 0) init()
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
     },
     {
       immediate: true

src/views/home/components/top.vue

@@ -10,9 +10,11 @@
 
   const homeStore = useHomeStore()
   const { id, setOption } = useEchart()
+  let params = null
 
   const init = () => {
-    setOption({
+    if (!params) {
+      params = {
         backgroundColor: 'transparent',
         tooltip: {
           show: false
@@ -104,13 +106,19 @@
             })
           }
         ]
-    })
+      }
+    }
+    setOption(params)
   }
 
   watch(
     () => homeStore?.userPortraitData?.provinceRate,
     (val) => {
-      if (val.length > 0) init()
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
     },
     {
       immediate: true

src/views/home/components/vacancy.vue

@@ -19,7 +19,11 @@
   watch(
     () => props.list,
     (val) => {
-      if (val.length > 0) init()
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
     },
     { immediate: true }
   )

src/views/home/components/vehicle-source.vue

@@ -19,7 +19,11 @@
   watch(
     () => props.list,
     (val) => {
-      if (val.length > 0) init()
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
     },
     { immediate: true }
   )