From ef5cb642cafe42476dfeb03b36f15aca80842107 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Wed, 15 Jan 2025 11:20:32 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home.js                              |   2 +-
 src/api/request.js                           |   6 +-
 src/components/CoreVideo/index.vue           |   1 +
 src/components/Line/index.vue                |   4 +-
 src/views/home/components/age.vue            |  29 ++-
 src/views/home/components/box-1.vue          |   8 +-
 src/views/home/components/box-2.vue          |   6 +-
 src/views/home/components/jam-count.vue      |   6 +-
 src/views/home/components/jam-duration.vue   |   6 +-
 src/views/home/components/occupancy.vue      |   6 +-
 src/views/home/components/ticket.vue         |   6 +-
 src/views/home/components/top.vue            | 182 ++++++++++---------
 src/views/home/components/vacancy.vue        |   6 +-
 src/views/home/components/vehicle-source.vue |   6 +-
 14 files changed, 163 insertions(+), 111 deletions(-)

diff --git a/src/api/home.js b/src/api/home.js
index d65e8b5..17b0560 100644
--- a/src/api/home.js
+++ b/src/api/home.js
@@ -13,7 +13,7 @@ export function getVideoListApi(data) {
   return request({
     url: '/api/largeScreen/video/list',
     method: 'post',
-    params: data
+    data
   })
 }
 
diff --git a/src/api/request.js b/src/api/request.js
index 51fa072..95661c3 100644
--- a/src/api/request.js
+++ b/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://172.22.15.170/fjtcc-api',
+  baseURL: 'http://36.138.38.16:8001/fjtcc-api',
+  // baseURL: 'http://172.22.15.170/fjtcc-api',
   timeout: 100000,
   headers: {
-    Authorization: proToken,
+    Authorization: devToken,
     'Content-Type': 'application/json;charset=UTF-8'
   }
 })
diff --git a/src/components/CoreVideo/index.vue b/src/components/CoreVideo/index.vue
index ee565d2..a2da096 100644
--- a/src/components/CoreVideo/index.vue
+++ b/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) => {
diff --git a/src/components/Line/index.vue b/src/components/Line/index.vue
index ad57f47..e320b8c 100644
--- a/src/components/Line/index.vue
+++ b/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 }
diff --git a/src/views/home/components/age.vue b/src/views/home/components/age.vue
index 572f0c7..d343f29 100644
--- a/src/views/home/components/age.vue
+++ b/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>
diff --git a/src/views/home/components/box-1.vue b/src/views/home/components/box-1.vue
index 4139573..90c7483 100644
--- a/src/views/home/components/box-1.vue
+++ b/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"
diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue
index e05b021..6c52c8b 100644
--- a/src/views/home/components/box-2.vue
+++ b/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 }
   )
diff --git a/src/views/home/components/jam-count.vue b/src/views/home/components/jam-count.vue
index 46d1940..c1a8a2f 100644
--- a/src/views/home/components/jam-count.vue
+++ b/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
diff --git a/src/views/home/components/jam-duration.vue b/src/views/home/components/jam-duration.vue
index e1f680e..3600592 100644
--- a/src/views/home/components/jam-duration.vue
+++ b/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 }
   )
diff --git a/src/views/home/components/occupancy.vue b/src/views/home/components/occupancy.vue
index e2df758..1838d81 100644
--- a/src/views/home/components/occupancy.vue
+++ b/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 }
   )
diff --git a/src/views/home/components/ticket.vue b/src/views/home/components/ticket.vue
index bc9d031..3297d06 100644
--- a/src/views/home/components/ticket.vue
+++ b/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
diff --git a/src/views/home/components/top.vue b/src/views/home/components/top.vue
index ff19733..e50c296 100644
--- a/src/views/home/components/top.vue
+++ b/src/views/home/components/top.vue
@@ -10,107 +10,115 @@
 
   const homeStore = useHomeStore()
   const { id, setOption } = useEchart()
+  let params = null
 
   const init = () => {
-    setOption({
-      backgroundColor: 'transparent',
-      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
-          }
+    if (!params) {
+      params = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          show: false
         },
-        {
-          type: 'category',
-          axisTick: 'none',
-          axisLine: 'none',
-          show: true,
-          axisLabel: {
-            textStyle: {
-              color: '#fff',
-              fontSize: fitChartSize(18)
+        legend: {
+          show: false
+        },
+        grid: {
+          left: '4%',
+          right: '4%',
+          top: '10%',
+          bottom: '-4%',
+          containLabel: true
+        },
+        xAxis: [{ max: 100, show: false }],
+        yAxis: [
+          {
+            splitLine: {
+              show: false
             },
-            verticalAlign: 'bottom',
-            padding: [0, -fitChartSize(10), fitChartSize(10), 0],
-            inside: true,
-            formatter: function (value) {
-              return `{value|${value}}%`
+            axisLine: {
+              show: false
             },
-            rich: {
-              value: {
-                align: 'center',
-                color: '#fff',
-                fontSize: fitChartSize(14)
-              }
+            type: 'category',
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
             }
           },
-          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: {
+          {
+            type: 'category',
+            axisTick: 'none',
+            axisLine: 'none',
             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'
+            axisLabel: {
+              textStyle: {
+                color: '#fff',
+                fontSize: fitChartSize(18)
+              },
+              verticalAlign: 'bottom',
+              padding: [0, -fitChartSize(10), fitChartSize(10), 0],
+              inside: true,
+              formatter: function (value) {
+                return `{value|${value}}%`
+              },
+              rich: {
+                value: {
+                  align: 'center',
+                  color: '#fff',
+                  fontSize: fitChartSize(14)
+                }
               }
-            }
-          })
-        }
-      ]
-    })
+            },
+            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
diff --git a/src/views/home/components/vacancy.vue b/src/views/home/components/vacancy.vue
index b50d7dc..e8b8013 100644
--- a/src/views/home/components/vacancy.vue
+++ b/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 }
   )
diff --git a/src/views/home/components/vehicle-source.vue b/src/views/home/components/vehicle-source.vue
index 40df229..c10270d 100644
--- a/src/views/home/components/vehicle-source.vue
+++ b/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 }
   )