feat：完善首页功能

2025-01-15 11:20:32 +08:00
parent ebac43f818
commit ef5cb642ca
14 changed files with 163 additions and 111 deletions
--- 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>
--- 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"
--- 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 }
  )
--- 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
--- 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 }
  )
--- 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 }
  )
--- 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
--- 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
--- 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 }
  )
--- 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 }
  )