feat：完善功能

src/views/scenic/components/age.vue

@@ -6,14 +6,31 @@
   import { fitChartSize } from '@/utils/dataUtil'
   import { useEchart } from '@/hooks/echart'
 
-  const { id, setOption } = useEchart()
-
-  let params = null
-
-  onMounted(() => {
-    init()
+  let props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    }
   })
 
+  const { id, setOption } = useEchart()
+  let params = null
+
+  watch(
+    () => props.list,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    { immediate: true }
+  )
+
+  const getSeriesData = () => {
+    return props.list
+  }
   const init = () => {
     if (!params) {
       const center = ['50%', '40%']
@@ -58,13 +75,7 @@
               color: '#D3F0FE',
               fontSize: fitChartSize(12)
             },
-            data: [
-              { value: 484, name: '19岁以下' },
-              { value: 300, name: '18-30岁' },
-              { value: 1048, name: '30-40岁' },
-              { value: 580, name: '40-60岁' },
-              { value: 735, name: '60岁以上' }
-            ]
+            data: getSeriesData()
           },
           {
             type: 'pie',
@@ -81,13 +92,7 @@
               color: '#D3F0FE',
               fontSize: fitChartSize(12)
             },
-            data: [
-              { value: 484, name: '19岁以下' },
-              { value: 300, name: '18-30岁' },
-              { value: 1048, name: '30-40岁' },
-              { value: 580, name: '40-60岁' },
-              { value: 735, name: '60岁以上' }
-            ]
+            data: getSeriesData()
           },
           {
             type: 'pie',
@@ -118,7 +123,10 @@
         ]
       }
     } else {
+      params.series[0].data = getSeriesData()
+      params.series[1].data = getSeriesData()
     }
+    console.log(params, 'params')
     setOption(params)
   }
 </script>

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

@@ -3,17 +3,13 @@
     <div class="header">
       <div class="header__left">
         <img src="@/assets/images/ticket.png" />
-        <div class="header__left-item">
-          <div class="label">当日购票量：</div>
-          <countup :endVal="1234" />
-        </div>
-        <div class="header__left-item">
-          <div class="label">未来3天购票量：</div>
-          <countup :endVal="1234" />
-        </div>
-        <div class="header__left-item">
-          <div class="label">3天后购票量：</div>
-          <countup :endVal="1234" />
+        <div
+          class="header__left-item"
+          v-for="(item, index) in scenicStore.scenicSpotData"
+          :key="index"
+        >
+          <div class="label">{{ item.name }}</div>
+          <countup :end-val="item.value" />
         </div>
       </div>
       <div>
@@ -101,6 +97,9 @@
 
 <script setup>
   import countup from 'vue-countup-v3'
+  import { useScenicStore } from '@/stores/scenic'
+
+  const scenicStore = useScenicStore()
 </script>
 
 <style scoped lang="scss">

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 {

src/views/scenic/components/traffic-flow.vue

@@ -8,76 +8,109 @@
 
   const { id, setOption } = useEchart()
 
-  let option = {
-    grid: {
-      left: '4%',
-      right: '4%',
-      top: '10%',
-      bottom: '10%',
-      containLabel: true
-    },
-    xAxis: {
-      boundaryGap: true,
-      type: 'category',
-      data: ['10:00', '10:05', '10:10', '10:15', '10:20'],
-      axisTick: {
-        show: false
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(5, 72, 134, 1)'
-        }
-      },
-      axisLabel: {
-        fontSize: fitChartSize(12),
-        color: 'rgba(255,255,255,0.9)'
+  let props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  watch(
+    () => props.list,
+    (val) => {
+      if (val.length) {
+        setTimeout(() => {
+          init()
+        }, 1000)
       }
     },
-    yAxis: {
-      type: 'value',
-      axisLabel: {
-        fontSize: fitChartSize(12),
-        color: 'rgba(255,255,255,0.9)'
-      },
-      splitLine: {
-        show: false,
-        lineStyle: {
-          color: 'rgba(0, 150, 255,0.4)',
-          type: 'dashed'
-        }
-      }
-    },
-    series: [
-      {
-        data: [45, 53, 23, 45, 12],
-        type: 'bar',
-        showBackground: true,
-        barWidth: fitChartSize(16),
-        itemStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: 'rgba(0, 99, 255, 1)'
-              },
-              {
-                offset: 1,
-                color: 'rgba(2, 249, 250, 1)'
-              }
-            ]
-          }
-        },
-        backgroundStyle: {
-          color: 'rgba(0, 150, 255, 0.15)'
-        }
-      }
-    ]
+    {
+      immediate: true
+    }
+  )
+  let params = null
+
+  const getXAxisData = () => {
+    return props.list.map((item) => item.name)
+  }
+  const getSeriesData = () => {
+    return props.list.map((item) => item.value)
   }
   const init = () => {
-    setOption(option)
+    if (!params) {
+      params = {
+        grid: {
+          left: '4%',
+          right: '4%',
+          top: '10%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          boundaryGap: true,
+          type: 'category',
+          data: getXAxisData(),
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(5, 72, 134, 1)'
+            }
+          },
+          axisLabel: {
+            fontSize: fitChartSize(12),
+            color: 'rgba(255,255,255,0.9)'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            fontSize: fitChartSize(12),
+            color: 'rgba(255,255,255,0.9)'
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(0, 150, 255,0.4)',
+              type: 'dashed'
+            }
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            showBackground: true,
+            barWidth: fitChartSize(16),
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 99, 255, 1)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(2, 249, 250, 1)'
+                  }
+                ]
+              }
+            },
+            backgroundStyle: {
+              color: 'rgba(0, 150, 255, 0.15)'
+            },
+            data: getSeriesData()
+          }
+        ]
+      }
+    } else {
+      params.xAxis.data = getXAxisData()
+      params.series[0].data = getSeriesData()
+    }
+    setOption(params)
   }
 
   onMounted(() => {

src/views/scenic/index.vue

@@ -6,6 +6,51 @@
 <script setup>
   import box1 from './components/box-1.vue'
   import box2 from './components/box-2.vue'
+  import { useWebSocket } from '@/hooks/socket'
+  import { useScenicStore } from '@/stores/scenic'
+
+  const scenicStore = useScenicStore()
+  const { isConnected, sendMessage, dataRes } = useWebSocket('ws://36.138.38.16:81/ws/scenic-spot')
+
+  watch(
+    () => isConnected.value,
+    (val) => {
+      if (val) {
+        sendMessage(JSON.stringify({ action: 'start', type: '', scenicSpotId: '1' }))
+      }
+    }
+  )
+  watch(
+    () => dataRes.value,
+    (val) => {
+      if (val) {
+        console.log(val, '接受消息')
+        switch (val.type) {
+          case 'scenicSpotData':
+            scenicStore.setScenicSpotData(val.data)
+            break
+          case 'scenicSppotLineUp':
+            scenicStore.setScenicQueueData(val)
+            break
+          case 'scenicSppotLoad':
+            scenicStore.setScenicBearData(val)
+            break
+          case 'stopCarData':
+            scenicStore.setStopCarData(val)
+            break
+          case 'secureData':
+            scenicStore.setSecureData(val)
+            break
+          case 'trafficInformation':
+            scenicStore.setTrafficData(val)
+            break
+          case 'userPortrait':
+            scenicStore.setUserPortraitData(val)
+            break
+        }
+      }
+    }
+  )
 </script>
 
 <style scoped lang="scss"></style>