feat:完善首页景区功能

2025-03-14 15:56:54 +08:00
parent 15b119a994
commit 641753aee8
6 changed files with 81 additions and 141 deletions
--- a/src/stores/scenic.js
+++ b/src/stores/scenic.js
@@ -3,13 +3,21 @@ import { defineStore } from 'pinia'

 export const useScenicStore = defineStore('scenic', () => {
  // 门票销售数据
-  let scenicSpotData = ref([
-    { name: '今日购票数', value: 0 },
+  let scenicSpotData = ref({
+    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 } })
  // 景区负载信息
--- a/src/views/home/components/box-2.vue
+++ b/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">接待情况</div>
-              <div class="value--primary">平稳</div>
-            </template>
-            <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 class="label">{{ item.name }}</div>
+            <div :class="[item.type == 4 ? 'value--error' : 'value--primary']">{{
+              item.value
+            }}</div>
          </div>
        </div>
      </div>
--- a/src/views/scenic/components/box-1.vue
+++ b/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 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 class="label">停车场负荷度</div>
-          <p class="value">空闲</p>
+        <div v-for="(item, index) in scenicStore.scenicSpotData.infoList" :key="index">
+          <div class="label">{{ item.name }}</div>
+          <p class="value" :class="{ error: item.type == 4 }">{{ item.value }}</p>
        </div>
      </div>
    </div>
--- a/src/views/scenic/components/box-2.vue
+++ b/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
  })
--- a/src/views/scenic/components/jam.vue
+++ b/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 = {
-    color: ['#A665F1', '#0063FF', '#00D0FF', '#01FEFE', '#FC2638', '#FED958'],
-    legend: {
-      x: 'left',
-      y: '74%',
-      itemHeight: fitChartSize(12),
-      itemWidth: fitChartSize(12),
-      itemGap: fitChartSize(10),
-      formatter: function (name) {
-        return '{name|' + name + '}'
-      },
-      textStyle: {
-        rich: {
-          name: {
-            color: '#fff',
-            fontSize: fitChartSize(14)
+  const init = () => {
+    if (!params) {
+      params = {
+        color: ['#A665F1', '#0063FF', '#00D0FF', '#01FEFE', '#FC2638', '#FED958'],
+        legend: {
+          x: 'left',
+          y: '74%',
+          itemHeight: fitChartSize(12),
+          itemWidth: fitChartSize(12),
+          itemGap: fitChartSize(10),
+          formatter: function (name) {
+            return '{name|' + name + '}'
          },
-          value: {
-            color: '#00D5F6',
-            fontSize: fitChartSize(14)
-          }
-        }
-      }
-    },
-    series: [
-      {
-        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)
+          textStyle: {
+            rich: {
+              name: {
+                color: '#fff',
+                fontSize: fitChartSize(14)
+              },
+              value: {
+                color: '#00D5F6',
+                fontSize: fitChartSize(14)
+              }
            }
          }
        },
-        labelLine: {
-          show: false
-        },
-        data: getSeriesData()
+        series: [
+          {
+            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: {
+              show: false
+            },
+            data: getSeriesData()
+          }
+        ]
      }
-    ]
-  }
-
-  const init = () => {
-    if (!params) {
-      params = defaultCofig
    } else {
      params.series[0].label.formatter = formatLabel()
      params.series[0].data = getSeriesData()
--- a/src/views/scenic/index.vue
+++ b/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()
      }
    }
  )