feat：重新对接首页接口

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

@@ -6,13 +6,13 @@
       </template>
     </Title1>
     <div class="list flex pt-20">
-      <div class="item" v-for="(item, index) in scenicSpot" :key="index">
+      <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" />
         <img v-if="index == 1" class="item-icon" src="@/assets/images/queue.png" />
         <img v-if="index == 2" class="item-icon" src="@/assets/images/congestion.png" />
         <span class="item-label">{{ item.name }}</span>
         <div class="item-value flex align-end rela">
-          <countup :end-val="item.value || 0" /><span class="unit">个</span>
+          <countup :end-val="item.value" /><span class="unit">个</span>
         </div>
       </div>
     </div>
@@ -20,90 +20,44 @@
       <div class="box">
         <Title2 title="景区排队人数" />
         <div class="statistic">
-          <div class="statistic-item">
-            <span class="statistic-title">三峡之巅</span>
-            <span class="statistic-value">
+          <div
+            class="statistic-item"
+            v-for="(item, index) in homeStore.scenicQueueData.info"
+            :key="index"
+          >
+            <span class="statistic-title">{{ item.name }}</span>
+            <span v-if="item.value > 0" class="statistic-value">
               <span class="prefix">排队</span>
-              <span class="value">100</span>
+              <!-- <span class="value">{{ item.value }}</span> -->
+              <countup class="value" :end-val="item.value" />
               <span class="suffix">人</span>
             </span>
-          </div>
-          <div class="statistic-item">
-            <span class="statistic-title">白帝城</span>
-            <span class="statistic-value">通畅</span>
-          </div>
-          <div class="statistic-item">
-            <span class="statistic-title">天坑地缝</span>
-            <span class="statistic-value">通畅</span>
-          </div>
-          <div class="statistic-item">
-            <span class="statistic-title">永安宫</span>
-            <span class="statistic-value">通畅</span>
+            <span v-else class="statistic-value">{{ item.value }}</span>
           </div>
         </div>
         <div class="flex rela">
           <Title3 title="景区排队人数" />
-          <div class="dropdown">
-            <Dropdown
-              label="选择排队景区"
-              :options="[
-                { label: '山峡之巅', value: 100 },
-                { label: '白帝城', value: 100 },
-                { label: '龙桥河', value: 100 }
-              ]"
-            />
-          </div>
         </div>
         <div class="pt-20">
           <Line
             :width="370"
             :height="140"
             :config="{ legend: false }"
-            :data="[
-              {
-                name: '企业数',
-                data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
-              }
-            ]"
-            :xAxisData="[
-              '12-16 10:00',
-              '12-16 14:00',
-              '12-16 16:00',
-              '12-16 22:00',
-              '12-17 02:00',
-              '12-17 06:00',
-              '12-17 10:00',
-              '12-17 14:00',
-              '12-17 16:00',
-              '12-16 22:00',
-              '12-18 02:00',
-              '12-18 06:00',
-              '12-8 10:00',
-              '12-18 14:00',
-              '12-18 16:00',
-              '12-18 20:00'
-            ]"
+            :data="scenicQueueList"
+            :xAxisData="scenicQueueXAxisData"
           />
         </div>
       </div>
       <div class="box">
         <Title2 title="景区承载量" />
         <div class="statistic">
-          <div class="statistic-item">
-            <gauge :value="80" />
-            <span class="statistic-title">三峡之巅</span>
-          </div>
-          <div class="statistic-item">
-            <gauge :value="50" />
-            <span class="statistic-title">三峡之巅</span>
-          </div>
-          <div class="statistic-item">
-            <gauge :value="50" />
-            <span class="statistic-title">三峡之巅</span>
-          </div>
-          <div class="statistic-item">
-            <gauge :value="50" />
-            <span class="statistic-title">三峡之巅</span>
+          <div
+            class="statistic-item"
+            v-for="(item, index) in homeStore.scenicBearData.info"
+            :key="index"
+          >
+            <gauge :value="item.value" />
+            <span class="statistic-title">{{ item.name }}</span>
           </div>
         </div>
         <Title3 title="今日景区承载量" />
@@ -112,30 +66,8 @@
             :width="370"
             :height="140"
             :config="{ legend: false }"
-            :data="[
-              {
-                name: '企业数',
-                data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
-              }
-            ]"
-            :xAxisData="[
-              '12-16 10:00',
-              '12-16 14:00',
-              '12-16 16:00',
-              '12-16 22:00',
-              '12-17 02:00',
-              '12-17 06:00',
-              '12-17 10:00',
-              '12-17 14:00',
-              '12-17 16:00',
-              '12-16 22:00',
-              '12-18 02:00',
-              '12-18 06:00',
-              '12-8 10:00',
-              '12-18 14:00',
-              '12-18 16:00',
-              '12-18 20:00'
-            ]"
+            :data="scenicBearList"
+            :xAxisData="scenicBearXAxisData"
           />
         </div>
       </div>
@@ -145,7 +77,7 @@
       <Title2 title="景区购票数" />
       <div class="ticket-wrap">
         <img src="@/assets/images/ticket.png" />
-        <div v-for="(item, index) in admission" :key="index">
+        <div v-for="(item, index) in homeStore.scenicData.data" :key="index">
           <span class="label">{{ item.name }}：</span><countup :end-val="item.value" />
         </div>
       </div>
@@ -156,10 +88,10 @@
       <div class="age-box">
         <Title3 title="年龄/性别占比" />
         <div class="mt-8"> <age /></div>
-        <div class="count">总人数：<countup :end-val="ageRateTotal" /></div>
+        <div v-if="ageRateTotal > 0" class="count">总人数：<countup :end-val="ageRateTotal" /></div>
         <div
           class="cell pt-20"
-          v-for="(item, index) in homeData?.userPortrait.genderRate"
+          v-for="(item, index) in homeStore?.userPortraitData.genderRate"
           :key="index"
         >
           <img v-if="item.name == '男'" class="icon" src="@/assets/images/man.png" />
@@ -179,14 +111,18 @@
           </div>
         </div>
       </div>
+
       <div class="box-1">
         <Title3 title="客源地分析TOP5" />
         <top />
       </div>
+
       <div class="box-1">
         <Title3 title="购票来源" />
-        <div class="count">游客总数：<countup :end-val="channelTotal" /></div>
-        <ticket :list="channelData" />
+        <div v-if="channelTotal > 0" class="count">
+          游客总数：<countup :end-val="channelTotal" />
+        </div>
+        <ticket />
       </div>
     </div>
   </div>
@@ -198,41 +134,39 @@
   import gauge from './gauge.vue'
   import ticket from './ticket.vue'
   import countup from 'vue-countup-v3'
+  import { useHomeStore } from '@/stores/home'
 
-  const homeData = inject('homeData')
+  const homeStore = useHomeStore()
 
-  // 景区信息
-  const scenicSpot = computed(() => {
-    if (homeData.value) return homeData.value?.scenicSpot
-    return [
-      { value: 0, name: '全县景区数量' },
-      { value: 0, name: '核心景区数' },
-      { value: 0, name: '低感景区总数' }
-    ]
+  // 今日景区承载量
+  const scenicBearList = computed(() => {
+    return [{ data: homeStore.scenicBearData.dataList.map((item) => item.value) }]
   })
-  // 景区购票数
-  const admission = computed(() => {
-    if (homeData.value) return homeData.value?.admission
-    return [
-      { name: '当日购票量：', value: 0 },
-      { name: '未来3天购票量：', value: 0 },
-      { name: '3天后购票量：', value: 0 }
-    ]
+
+  const scenicBearXAxisData = computed(() => {
+    return homeStore.scenicBearData.dataList.map((item) => item.name)
   })
-  // 年龄占比
+
+  // 今日景区排队量
+  const scenicQueueList = computed(() => {
+    return [{ data: homeStore.scenicQueueData.dataList.map((item) => item.value) }]
+  })
+
+  const scenicQueueXAxisData = computed(() => {
+    return homeStore.scenicQueueData.dataList.map((item) => item.name)
+  })
+
+  // 年龄占比 - 游客总数
   const ageRateTotal = computed(() => {
-    return homeData.value?.userPortrait.genderRate.reduce(
+    return homeStore?.userPortraitData?.genderRate.reduce(
       (total, current) => Number(current.count) + total,
       0
     )
   })
-  // 年龄占比
-  const channelData = computed(() => {
-    if (homeData.value) return homeData.value?.userPortrait.channel
-    return []
-  })
+
+  // 购票来源 - 游客总数
   const channelTotal = computed(() => {
-    return homeData.value?.userPortrait?.channel.reduce(
+    return homeStore.userPortraitData?.channel.reduce(
       (total, current) => Number(current.count) + total,
       0
     )
@@ -326,14 +260,16 @@
           justify-content: center;
         }
         &-title {
-          font-size: vw(18);
-          color: rgba(255, 255, 255, 0.9);
+          font-size: vw(16);
+          color: #fff;
         }
         &-value {
           margin-top: vh(10);
           font-weight: bold;
-          font-size: vw(24);
+          font-size: vw(20);
           color: #02f9fa;
+          display: flex;
+          align-items: flex-end;
         }
         .value {
           font-weight: bold;
@@ -344,6 +280,7 @@
         .suffix {
           color: #ff4400;
           font-size: vw(12);
+          margin-bottom: vh(4);
         }
       }
     }
@@ -366,7 +303,7 @@
       }
     }
     .count {
-      margin: vw(20) vw(20) 0 vw(20);
+      margin: vh(10) vw(20) 0 vw(20);
       height: vh(24);
       font-weight: bold;
       font-size: vw(14);