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,107 +10,115 @@
 
   const homeStore = useHomeStore()
   const { id, setOption } = useEchart()
+  let params = null
 
   const init = () => {
-    setOption({
+    if (!params) {
-      backgroundColor: 'transparent',
+      params = {
-      tooltip: {
+        backgroundColor: 'transparent',
-        show: false
+        tooltip: {
-      },
+          show: false
-      legend: {
-        show: false
-      },
-      grid: {
-        left: '4%',
-        right: '4%',
-        top: '10%',
-        bottom: '-4%',
-        containLabel: true
-      },
-      xAxis: [{ max: 100, show: false }],
-      yAxis: [
-        {
-          splitLine: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          type: 'category',
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          }
         },
-        {
+        legend: {
-          type: 'category',
+          show: false
-          axisTick: 'none',
+        },
-          axisLine: 'none',
+        grid: {
-          show: true,
+          left: '4%',
-          axisLabel: {
+          right: '4%',
-            textStyle: {
+          top: '10%',
-              color: '#fff',
+          bottom: '-4%',
-              fontSize: fitChartSize(18)
+          containLabel: true
+        },
+        xAxis: [{ max: 100, show: false }],
+        yAxis: [
+          {
+            splitLine: {
+              show: false
             },
-            verticalAlign: 'bottom',
+            axisLine: {
-            padding: [0, -fitChartSize(10), fitChartSize(10), 0],
+              show: false
-            inside: true,
-            formatter: function (value) {
-              return `{value|${value}}%`
             },
-            rich: {
+            type: 'category',
-              value: {
+            axisTick: {
-                align: 'center',
+              show: false
-                color: '#fff',
+            },
-                fontSize: fitChartSize(14)
+            axisLabel: {
-              }
+              show: false
             }
           },
-          data: homeStore?.userPortraitData?.provinceRate.map((item) => Number(item.value))
+          {
-        }
+            type: 'category',
-      ],
+            axisTick: 'none',
-      series: [
+            axisLine: 'none',
-        {
-          type: 'bar',
-          barWidth: fitChartSize(12),
-          showBackground: true,
-          barBorderRadius: [0, 0, 0, 0],
-          backgroundStyle: {
-            color: 'rgba(0, 150, 255, 0.15)'
-          },
-          label: {
             show: true,
-            offset: [fitChartSize(12), -fitChartSize(20)],
+            axisLabel: {
-            color: '#D3E5FF',
+              textStyle: {
-            fontWeight: 500,
+                color: '#fff',
-            position: 'left',
+                fontSize: fitChartSize(18)
-            align: 'left',
+              },
-            fontSize: fitChartSize(14),
+              verticalAlign: 'bottom',
-            formatter: function (params) {
+              padding: [0, -fitChartSize(10), fitChartSize(10), 0],
-              return params.data.name ?? '其他'
+              inside: true,
-            }
+              formatter: function (value) {
-          },
+                return `{value|${value}}%`
-          data: homeStore?.userPortraitData?.provinceRate.map((item) => {
+              },
-            return {
+              rich: {
-              name: item.name,
+                value: {
-              value: Number(item.value),
+                  align: 'center',
-              itemStyle: {
+                  color: '#fff',
-                barBorderRadius: [0, 0, 0, 0],
+                  fontSize: fitChartSize(14)
-                color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
+                }
               }
-            }
+            },
-          })
+            data: homeStore?.userPortraitData?.provinceRate.map((item) => Number(item.value))
-        }
+          }
-      ]
+        ],
-    })
+        series: [
+          {
+            type: 'bar',
+            barWidth: fitChartSize(12),
+            showBackground: true,
+            barBorderRadius: [0, 0, 0, 0],
+            backgroundStyle: {
+              color: 'rgba(0, 150, 255, 0.15)'
+            },
+            label: {
+              show: true,
+              offset: [fitChartSize(12), -fitChartSize(20)],
+              color: '#D3E5FF',
+              fontWeight: 500,
+              position: 'left',
+              align: 'left',
+              fontSize: fitChartSize(14),
+              formatter: function (params) {
+                return params.data.name ?? '其他'
+              }
+            },
+            data: homeStore?.userPortraitData?.provinceRate.map((item) => {
+              return {
+                name: item.name,
+                value: Number(item.value),
+                itemStyle: {
+                  barBorderRadius: [0, 0, 0, 0],
+                  color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
+                }
+              }
+            })
+          }
+        ]
+      }
+    }
+    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 }
   )