feat:完善首页 景区功能

src/stores/scenic.js

@@ -3,13 +3,21 @@ import { defineStore } from 'pinia'
 
 export const useScenicStore = defineStore('scenic', () => {
   // 门票销售数据
-  let scenicSpotData = ref([
+  let scenicSpotData = ref({
-    { name: '今日购票数', value: 0 },
+    data: [
+      { name: '今日购票数', value: 0 },
 
-    { name: '未来三天购票数', value: 0 },
+      { name: '未来三天购票数', value: 0 },
 
-    { name: '三天后购票数', value: 0 }
+      { name: '三天后购票数', value: 0 }
-  ])
+    ],
+    infoList: [
+      { name: '游玩舒适度', type: 0, value: '空闲' },
+      { name: '景区安全', type: 0, value: '安全' },
+      { name: '通景交通', type: 0, value: '通畅' },
+      { name: '停车场负荷', type: 0, value: '空闲' }
+    ]
+  })
   // 景区排队信息
   let scenicQueueData = ref({ dataList: [], header: { jrcp: 0, jrjdrs: 0, pdcxsj: 0, pdrs: 0 } })
   // 景区负载信息

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

@@ -21,20 +21,10 @@
         </div>
         <div class="right">
           <div class="item" v-for="(item, index) in homeStore.visitorInfoList" :key="index">
-            <template v-if="index == 2">
+            <div class="label">{{ item.name }}</div>
-              <div class="label">接待情况</div>
+            <div :class="[item.type == 4 ? 'value--error' : 'value--primary']">{{
-              <div class="value--primary">平稳</div>
+              item.value
-            </template>
+            }}</div>
-            <template v-else-if="index == 4">
-              <div class="label">停车场负荷</div>
-              <div class="value--primary">空闲</div>
-            </template>
-            <template v-else>
-              <div class="label">{{ item.name }}</div>
-              <div :class="[item.type == 1 ? 'value--error' : 'value--primary']">{{
-                item.value
-              }}</div>
-            </template>
           </div>
         </div>
       </div>

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

@@ -5,7 +5,7 @@
         <img src="@/assets/images/ticket.png" />
         <div
           class="header__left-item"
-          v-for="(item, index) in scenicStore.scenicSpotData"
+          v-for="(item, index) in scenicStore.scenicSpotData.data"
           :key="index"
         >
           <div class="label">{{ item.name }}</div>
@@ -13,22 +13,9 @@
         </div>
       </div>
       <div>
-        <div>
+        <div v-for="(item, index) in scenicStore.scenicSpotData.infoList" :key="index">
-          <div class="label">游览舒适度</div>
+          <div class="label">{{ item.name }}</div>
-          <p class="value">舒适</p>
+          <p class="value" :class="{ error: item.type == 4 }">{{ item.value }}</p>
-        </div>
-        <div>
-          <div class="label">景区安全</div>
-          <p class="value">安全</p>
-        </div>
-
-        <div>
-          <div class="label">通景交通</div>
-          <p class="value">畅通</p>
-        </div>
-        <div>
-          <div class="label">停车场负荷度</div>
-          <p class="value">空闲</p>
         </div>
       </div>
     </div>

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

@@ -4,11 +4,6 @@
       <div class="box mr-8">
         <Title1 title="排队信息" />
         <div class="count-box flex justify-between">
-          <!--          <count-item-->
-          <!--            label="今日出票"-->
-          <!--            :count="scenicStore.scenicQueueData.header.jrcp"-->
-          <!--            suffix="张"-->
-          <!--          />-->
           <count-item
             label="今日接待人数"
             :count="scenicStore.scenicQueueData.header.jrjdrs"
@@ -134,7 +129,7 @@
           </div>
           <PieRow
             label="告警总数"
-            :dataList="list"
+            :dataList="scenicStore.secureData.dataList"
             :total="alarmTotal"
             :width="440"
             :height="300"
@@ -173,7 +168,7 @@
               :width="220"
               :height="300"
               sub-title="拥堵总时长"
-              :list="scenicStore.trafficData.data.countRate"
+              :list="scenicStore.trafficData.data.timeRate"
             />
           </div>
         </div>
@@ -335,44 +330,6 @@
   let carOverlays = ref([])
   let shipOverlays = ref([])
 
-  let list = ref([
-    {
-      name: '人群聚集识别',
-      count: 0,
-      value: 0
-    },
-    {
-      name: '人群计数识别',
-      count: 0,
-      value: 0
-    },
-    {
-      name: '游客跌倒',
-      count: 0,
-      value: 0
-    },
-    {
-      name: '游客攀爬',
-      count: 0,
-      value: 0
-    },
-    {
-      name: '违法吸烟',
-      count: 0,
-      value: 0
-    },
-    {
-      name: '烟火焚烧',
-      count: 0,
-      value: 0
-    },
-    {
-      name: '人员离岗',
-      count: 0,
-      value: 0
-    }
-  ])
-
   const garageList = computed(() => {
     return scenicStore.stopCarData.headList
   })

src/views/scenic/components/jam.vue

@@ -56,7 +56,7 @@
     return props.list.map((item) => {
       return {
         ...item,
-        value: parseFloat(item.value)
+        value: item.count
       }
     })
   }
@@ -71,68 +71,66 @@
     return () => `{value|${getTotal()}}` + '\n' + `{name|${props.subTitle}}`
   }
 
-  let defaultCofig = {
+  const init = () => {
-    color: ['#A665F1', '#0063FF', '#00D0FF', '#01FEFE', '#FC2638', '#FED958'],
+    if (!params) {
-    legend: {
+      params = {
-      x: 'left',
+        color: ['#A665F1', '#0063FF', '#00D0FF', '#01FEFE', '#FC2638', '#FED958'],
-      y: '74%',
+        legend: {
-      itemHeight: fitChartSize(12),
+          x: 'left',
-      itemWidth: fitChartSize(12),
+          y: '74%',
-      itemGap: fitChartSize(10),
+          itemHeight: fitChartSize(12),
-      formatter: function (name) {
+          itemWidth: fitChartSize(12),
-        return '{name|' + name + '}'
+          itemGap: fitChartSize(10),
-      },
+          formatter: function (name) {
-      textStyle: {
+            return '{name|' + name + '}'
-        rich: {
-          name: {
-            color: '#fff',
-            fontSize: fitChartSize(14)
           },
-          value: {
+          textStyle: {
-            color: '#00D5F6',
+            rich: {
-            fontSize: fitChartSize(14)
+              name: {
-          }
+                color: '#fff',
-        }
+                fontSize: fitChartSize(14)
-      }
+              },
-    },
+              value: {
-    series: [
+                color: '#00D5F6',
-      {
+                fontSize: fitChartSize(14)
-        type: 'pie',
+              }
-        center: ['50%', '40%'],
-        radius: ['55%', '70%'],
-        itemStyle: {
-          borderWidth: fitChartSize(4),
-          borderColor: '#093672'
-        },
-        label: {
-          show: true,
-          position: 'center',
-          fontWeight: 'bold',
-          formatter: formatLabel(),
-          rich: {
-            value: {
-              color: '#fff',
-              fontSize: fitChartSize(24),
-              fontWeight: 'bold',
-              padding: [0, 0, 5, 0]
-            },
-            name: {
-              color: '#fff',
-              fontSize: fitChartSize(12)
             }
           }
         },
-        labelLine: {
+        series: [
-          show: false
+          {
-        },
+            type: 'pie',
-        data: getSeriesData()
+            center: ['50%', '40%'],
+            radius: ['55%', '70%'],
+            itemStyle: {
+              borderWidth: fitChartSize(4),
+              borderColor: '#093672'
+            },
+            label: {
+              show: true,
+              position: 'center',
+              fontWeight: 'bold',
+              formatter: formatLabel(),
+              rich: {
+                value: {
+                  color: '#fff',
+                  fontSize: fitChartSize(24),
+                  fontWeight: 'bold',
+                  padding: [0, 0, 5, 0]
+                },
+                name: {
+                  color: '#fff',
+                  fontSize: fitChartSize(12)
+                }
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: getSeriesData()
+          }
+        ]
       }
-    ]
-  }
-
-  const init = () => {
-    if (!params) {
-      params = defaultCofig
     } else {
       params.series[0].label.formatter = formatLabel()
       params.series[0].data = getSeriesData()

src/views/scenic/index.vue

@@ -46,7 +46,7 @@
             scenicStore.setWordkOrderData(val)
             break
           case 'scenicSpotData':
-            scenicStore.setScenicSpotData(val.data)
+            scenicStore.setScenicSpotData(val)
             break
           case 'scenicSppotLineUp':
             scenicStore.setScenicQueueData(val)
@@ -70,7 +70,7 @@
             scenicStore.setCarShipData(val.data)
             break
         }
-        if (!timer) sendCarShip()
+        // if (!timer) sendCarShip()
       }
     }
   )