feat：完善功能

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

@@ -4,16 +4,37 @@
       <div class="box mr-8">
         <Title1 title="排队信息" />
         <div class="count-box flex justify-between">
-          <count-item label="今日出票" :count="35600" suffix="张" />
-          <count-item label="今日接待人数" :count="35600" suffix="人" />
-          <count-item label="排队人数" :count="35600" suffix="人" />
-          <count-item label="排队持续时间" :count="35600" suffix="S" />
+          <count-item
+            label="今日出票"
+            :count="scenicStore.scenicQueueData.header.jrcp"
+            suffix="张"
+          />
+          <count-item
+            label="今日接待人数"
+            :count="scenicStore.scenicQueueData.header.jrjdrs"
+            suffix="人"
+          />
+          <count-item
+            label="排队人数"
+            :count="scenicStore.scenicQueueData.header.pdrs"
+            suffix="人"
+          />
+          <count-item
+            label="排队持续时间"
+            :count="scenicStore.scenicQueueData.header.pdcxsj"
+            suffix="分钟"
+          />
         </div>
         <div class="border">
           <div class="pt-10">
             <Title3 title="景区排队人数" />
           </div>
-          <Line :width="520" :height="300" />
+          <Line
+            :width="490"
+            :height="300"
+            :data="scenicQueueData"
+            :xAxisData="scenicQueueXAxisData"
+          />
         </div>
       </div>
       <div class="box mr-8">
@@ -21,15 +42,28 @@
         <div class="flex">
           <circle-progress :width="200" :height="70" />
           <div class="flex flex-1 justify-between">
-            <count-item label="景区当前人数" :count="35600" suffix="张" />
-            <count-item label="景区最大承载" :count="35600" suffix="人" />
+            <count-item
+              label="景区当前人数"
+              :count="scenicStore.scenicBearData.header.jrjdrs"
+              suffix="人"
+            />
+            <count-item
+              label="景区最大承载"
+              :count="scenicStore.scenicBearData.header.jqzdcz"
+              suffix="人"
+            />
           </div>
         </div>
         <div class="border">
           <div class="pt-10">
-            <Title3 title="景区排队人数" />
+            <Title3 title="今日景区承载量" />
           </div>
-          <Line :width="520" :height="300" />
+          <Line
+            :width="490"
+            :height="300"
+            :data="scenicBearData"
+            :xAxisData="scenicBearXAxisData"
+          />
         </div>
       </div>
       <div class="box-1 mr-8">
@@ -41,8 +75,8 @@
             <circle-progress :width="140" :height="70" />
           </div>
           <div class="ml-20 flex flex-1 justify-between">
-            <count-item label="总停车场数" :count="561" suffix="个" />
-            <count-item label="总停车位数" :count="15" suffix="个" />
+            <count-item label="总车位数" :count="561" suffix="个" />
+            <count-item label="剩余车位数" :count="15" suffix="个" />
           </div>
         </div>
         <div class="flex">
@@ -50,13 +84,19 @@
             <div class="pt-10">
               <Title3 title="今日景区承载量" />
             </div>
-            <Line :width="360" :height="300" />
+            <Line :width="360" :height="300" :data="carBearData" :xAxisData="carBearXAxisData" />
           </div>
           <div class="border flex-1">
             <div class="pt-10">
               <Title3 title="车辆归属地占比" />
             </div>
-            <PieRow :width="360" :height="300" />
+            <PieRow
+              label="停车总数"
+              :dataList="scenicStore.stopCarData.dataLists"
+              :total="carTotal"
+              :width="360"
+              :height="300"
+            />
           </div>
         </div>
       </div>
@@ -69,9 +109,15 @@
         </div>
         <div class="border flex-1">
           <div class="pt-10">
-            <Title3 title="今日景区承载量" />
+            <Title3 title="异常告警占比" />
           </div>
-          <PieRow :width="350" :height="300" />
+          <PieRow
+            label="安全告警占比"
+            :dataList="scenicStore.secureData.dataList"
+            :total="alarmTotal"
+            :width="350"
+            :height="300"
+          />
         </div>
       </div>
     </div>
@@ -79,39 +125,42 @@
       <div class="box-3 mr-8">
         <Title1 title="交通信息" />
         <div class="count-box flex">
-          <count-item label="总通景路段" :count="35600" suffix="张" />
-          <count-item label="通景路段拥堵数" :count="35600" suffix="人" />
-          <count-item label="拥堵开始时间" :count="35600" suffix="人" />
-          <count-item label="拥堵持续时间" :count="35600" suffix="S" />
+          <count-item
+            v-for="(item, index) in scenicStore.trafficData.infoList"
+            :key="index"
+            :label="item.name"
+            :count="item.value"
+            suffix="张"
+          />
         </div>
         <div class="flex">
           <div class="border mr-8">
             <Title3 title="今日交通负载" />
-            <traffic-flow />
+            <traffic-flow :list="scenicStore.trafficData.data.congestion" />
           </div>
           <div class="border mr-8">
             <Title3 title="拥堵次数占比" />
             <jam :width="220" :height="160" />
-            <div class="legend">
+            <!-- <div class="legend">
               <ul class="legend__wrapper">
                 <li class="legend-item" v-for="(item, index) in 6" :key="index">
                   <p class="legend-item-label">路段1</p>
                   <p class="legend-item-value">10%</p>
                 </li>
               </ul>
-            </div>
+            </div> -->
           </div>
           <div class="border">
-            <Title3 title="拥堵次数占比" />
+            <Title3 title="拥堵时长占比" />
             <jam :width="220" :height="160" />
-            <div class="legend">
+            <!-- <div class="legend">
               <ul class="legend__wrapper">
                 <li class="legend-item" v-for="(item, index) in 6" :key="index">
                   <p class="legend-item-label">路段1</p>
                   <p class="legend-item-value">10%</p>
                 </li>
               </ul>
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
@@ -121,34 +170,29 @@
         <div class="flex">
           <div class="border mr-8 flex-1">
             <Title3 title="年龄/性别占比" />
-            <age-ratio />
-            <div class="count">总人数：<countup endVal="124563" /></div>
-            <div class="cell pt-20">
-              <img class="icon" src="@/assets/images/man.png" />
+            <age :list="scenicStore.userPortraitData.data.ageRate" />
+            <div class="count">总人数：<countup :end-val="ageTotal" /></div>
+            <div
+              class="cell pt-20"
+              v-for="(item, index) in scenicStore.userPortraitData.data.genderRate"
+              :key="index"
+            >
+              <img v-if="item.name == '男'" class="icon" src="@/assets/images/man.png" />
+              <img v-if="item.name == '女'" class="icon" src="@/assets/images/woman.png" />
               <div class="bg">
-                <span class="text">男性</span>
+                <span class="text">{{ item.name }}</span>
                 <div class="progress">
                   <el-progress
-                    :percentage="50"
+                    :percentage="item.value"
                     :show-text="false"
-                    color="linear-gradient( to right, #074D90 0%, #55E0FF 100%)"
+                    :color="
+                      item.name == '女'
+                        ? 'linear-gradient( to right, #0A4482 0%, #FF7021 100%)'
+                        : 'linear-gradient( to right, #074D90 0%, #55E0FF 100%)'
+                    "
                   />
                 </div>
-                <span class="man">50%</span>
-              </div>
-            </div>
-            <div class="cell pt-20">
-              <img class="icon" src="@/assets/images/woman.png" />
-              <div class="bg">
-                <span class="text">女性</span>
-                <div class="progress">
-                  <el-progress
-                    :percentage="50"
-                    :show-text="false"
-                    color="linear-gradient( to right, #0A4482 0%, #FF7021 100%)"
-                  />
-                </div>
-                <span class="woman">50%</span>
+                <span :class="[item.name == '男' ? 'man' : 'woman']">{{ item.value }}%</span>
               </div>
             </div>
           </div>
@@ -168,7 +212,7 @@
         <Title1 title="车船信息" />
         <div class="flex mb-6">
           <div class="border mr-8 pt-10 pb-10">
-            <Title2 title="车车车车车车" />
+            <Title2 title="景区车辆" />
             <div class="car-box mt-10">
               <img class="icon" src="@/assets/images/icon-6.png" />
               <div class="car-item pr-20">
@@ -193,11 +237,11 @@
             </div>
           </div>
           <div class="border pt-10 pb-10">
-            <Title2 title="船船船船船船" />
+            <Title2 title="景区船只" />
             <div class="car-box mt-10">
               <img class="icon" src="@/assets/images/icon-6.png" />
               <div class="car-item pr-20">
-                <div class="label">车总数</div>
+                <div class="label">船总数</div>
                 <div class="value">130辆</div>
               </div>
               <div class="car-item">
@@ -229,17 +273,61 @@
 </template>
 
 <script setup>
-  import { useMap } from '@/hooks/map'
   import carIcon from '@/assets/images/car.png'
   import shipIcon from '@/assets/images/ship.png'
-  import BigCarShipMap from './big-car-ship-map.vue'
-  import AgeRatio from './age-ratio.vue'
-  import top from './top.vue'
-  import jam from './jam.vue'
-  import ticket from './ticket.vue'
-  import TrafficFlow from './traffic-flow.vue'
 
+  import age from './age'
+  import top from './top'
+  import jam from './jam'
+  import ticket from './ticket'
+  import TrafficFlow from './traffic-flow'
+  import BigCarShipMap from './big-car-ship-map'
+  import countup from 'vue-countup-v3'
+  import { useMap } from '@/hooks/map'
+  import { useScenicStore } from '@/stores/scenic'
+
+  const scenicStore = useScenicStore()
   const { initMap, addMarker } = useMap()
+
+  const ageTotal = computed(() => {
+    return scenicStore.userPortraitData.data.genderRate.reduce((pre, cur) => {
+      return pre + parseInt(cur.count)
+    }, 0)
+  })
+
+  const alarmTotal = computed(() => {
+    return scenicStore.secureData.dataList.reduce((pre, cur) => {
+      return pre + cur.count
+    }, 0)
+  })
+
+  const carTotal = computed(() => {
+    return scenicStore.stopCarData.dataLists.reduce((pre, cur) => {
+      return pre + cur.count
+    }, 0)
+  })
+
+  const carBearData = computed(() => {
+    return [{ data: scenicStore.stopCarData.dataList.map((item) => item.value) }]
+  })
+  const carBearXAxisData = computed(() => {
+    return scenicStore.stopCarData.dataList.map((item) => item.name)
+  })
+
+  const scenicBearData = computed(() => {
+    return [{ data: scenicStore.scenicBearData.dataList.map((item) => item.value) }]
+  })
+  const scenicBearXAxisData = computed(() => {
+    return scenicStore.scenicBearData.dataList.map((item) => item.name)
+  })
+
+  const scenicQueueData = computed(() => {
+    return [{ data: scenicStore.scenicQueueData.dataList.map((item) => item.value) }]
+  })
+  const scenicQueueXAxisData = computed(() => {
+    return scenicStore.scenicQueueData.dataList.map((item) => item.name)
+  })
+
   let show = ref(false)
   onMounted(() => {
     initMap('car-ship', 109.491961, 31.024285, 13)
@@ -341,7 +429,7 @@
       color: #ffffff;
     }
     .progress {
-      width: vw(100);
+      width: vw(70);
     }
     .value {
       margin-left: vw(10);
@@ -469,7 +557,7 @@
         color: rgba(255, 255, 255, 0.9);
       }
       .progress {
-        width: vw(120);
+        width: vw(110);
         margin-left: vw(4);
       }
       .man {