feat：对接监控大屏

2025-01-16 16:02:01 +08:00
parent 2a11f91d36
commit 70495d3c95
20 changed files with 336 additions and 237 deletions
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="box-4">
+  <div class="box-3">
    <Title1 title="交通信息" />
    <div class="traffic-info flex justify-evenly pt-10 pb-20">
      <!-- <div class="cell">
@@ -275,10 +275,10 @@
 </script>

 <style lang="scss" scoped>
-  .box-4 {
+  .box-3 {
    margin-top: vh(120);
    width: vw(774);
-    height: vh(950);
+    height: vh(956);
    padding-left: vw(8);
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-5.png');
--- a/src/views/home/components/jam-duration.vue
+++ b/src/views/home/components/jam-duration.vue
@@ -86,12 +86,11 @@
          left: '4%',
          right: '4%',
          top: '16%',
-          bottom: '-10%',
-          containLabel: true
+          bottom: '4%',
+          containLabel: false
        },
        xAxis: [
          {
-            // max: 10000,
            splitLine: {
              show: false
            },
@@ -101,13 +100,13 @@
        ],
        yAxis: [
          {
+            type: 'category',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
-            type: 'category',
            axisTick: {
              show: false
            },
--- a/src/views/home/components/occupancy.vue
+++ b/src/views/home/components/occupancy.vue
@@ -85,9 +85,9 @@
        grid: {
          left: '4%',
          right: '4%',
-          top: '16%',
-          bottom: '-10%',
-          containLabel: true
+          top: '14%',
+          bottom: '4%',
+          containLabel: false
        },
        xAxis: [
          {
@@ -101,17 +101,16 @@
        ],
        yAxis: [
          {
+            type: 'category',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
-            type: 'category',
            axisTick: {
              show: false
            },
-            data: [],
            axisLabel: {
              show: false
            }
@@ -195,6 +194,6 @@
 <style scoped lang="scss">
  .occupancy {
    width: vw(360);
-    height: vh(120);
+    height: vh(130);
  }
 </style>
--- a/src/views/home/components/top.vue
+++ b/src/views/home/components/top.vue
@@ -27,18 +27,18 @@
          right: '4%',
          top: '10%',
          bottom: '-4%',
-          containLabel: true
+          containLabel: false
        },
        xAxis: [{ max: 100, show: false }],
        yAxis: [
          {
+            type: 'category',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
-            type: 'category',
            axisTick: {
              show: false
            },
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -8,9 +8,15 @@
  import box1 from './components/box-1.vue'
  import box2 from './components/box-2.vue'
  import box3 from './components/box-3.vue'
-  import { useWebSocket } from '@/hooks/socket'

-  const { isConnected, sendMessage } = useWebSocket('ws://36.138.38.16:81/ws/third-party')
+  import { useWebSocket } from '@/hooks/socket'
+  import { useHomeStore } from '@/stores/home'
+  import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
+
+  const homeStore = useHomeStore()
+  const { isConnected, dataRes, sendMessage } = useWebSocket(
+    `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/third-party`
+  )

  watch(
    () => isConnected.value,
@@ -26,7 +32,52 @@
      }
    }
  )
-
+  watch(
+    () => dataRes.value,
+    (val) => {
+      if (val) {
+        console.log(val, '首页接受消息')
+        switch (val.type) {
+          case 'userPortrait':
+            homeStore.setUserPortraitData(val.data)
+            break
+          case 'admission':
+            homeStore.setScenicData(val)
+            break
+          case 'queuingInScenicSpots':
+            homeStore.setScenicQueueData(val)
+            break
+          case 'queuingScenicSpots':
+            homeStore.setScenicBearData(val)
+            break
+          case 'visitorInfo':
+            homeStore.setVisitorInfoData(val.data)
+            break
+          case 'visitorDataInfo':
+            homeStore.setVisitorInfoList(val.data)
+            break
+          case 'baiduMap':
+            homeStore.setBaiduMapData(val.data)
+            break
+          case 'wordkOrderlist':
+            homeStore.setWordkOrderList(val.data)
+            break
+          case 'trafficInformation':
+            homeStore.setTrafficInfoData(val)
+            break
+          case 'carStopInfo':
+            homeStore.setCarStopInfoData(val)
+            break
+          case 'carShipData':
+            homeStore.setCarShipData(val.data)
+            break
+          case 'hotelData':
+            homeStore.setHotelData(val.data)
+            break
+        }
+      }
+    }
+  )
  const switchSpot = (e) => {
    sendMessage(
      JSON.stringify({
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -3,20 +3,21 @@
  <div class="box-2">
    <Nav />
    <!-- 视频 -->
-    <Monitor />
+    <Monitor :list="videoList" />
  </div>
 </template>

 <script setup>
  import Nav from '@/components/Nav/index.vue'
  import Monitor from '@/components/Monitor/index.vue'
-  import { getVideoListApi, postRefreshApi } from '@/api/home'
+  import { getVideoListApi } from '@/api/home'

+  let videoList = ref([])
  const getVideoList = async () => {
    let res = await getVideoListApi({
      businessVideoDisplayPosition: ''
    })
-    console.log(res, 'res')
+    videoList.value = res.data
  }

  onMounted(() => {
@@ -25,9 +26,9 @@
 </script>
 <style lang="scss" scoped>
  .box-2 {
+    margin-top: vh(120);
    width: vw(2356);
    height: vh(965);
-    margin-top: vh(120);
    display: flex;
  }
 </style>
--- a/src/views/scenic/index.vue
+++ b/src/views/scenic/index.vue
@@ -8,9 +8,13 @@
  import box2 from './components/box-2.vue'
  import { useWebSocket } from '@/hooks/socket'
  import { useScenicStore } from '@/stores/scenic'
+  import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'

  const scenicStore = useScenicStore()
-  const { isConnected, sendMessage, dataRes } = useWebSocket('ws://36.138.38.16:81/ws/scenic-spot')
+
+  const { isConnected, sendMessage, dataRes } = useWebSocket(
+    `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/scenic-spot`
+  )

  watch(
    () => isConnected.value,
--- a/src/views/traffic/components/box-1.vue
+++ b/src/views/traffic/components/box-1.vue
@@ -28,7 +28,10 @@
    </div>
    <div class="chart">
      <div class="chart-item" v-for="item in 4" :key="item">
-        <Title3 title="拥堵频次占比" />
+        <Title3 v-if="item == 1" title="拥堵频次占比" />
+        <Title3 v-if="item == 2" title="拥堵时长占比" />
+        <Title3 v-if="item == 3" title="拥堵类型频次占比" />
+        <Title3 v-if="item == 4" title="拥堵类型时长占比" />
        <div class="chart__inner">
          <spotRate :dataList="spotRateData" :total="8888" />
          <ul class="chart__legend">
--- a/src/views/workOrder/components/box-2.vue
+++ b/src/views/workOrder/components/box-2.vue
@@ -77,7 +77,7 @@
        <div class="chart__wrapper">
          <Title3 title="景区工单占比" />
          <div class="chart__inner">
-            <spotRate :dataList="spotRateData" :total="8888" />
+            <spotRate :dataList="spotRateData" :total="spotRateTotal" />
            <ul class="chart__legend">
              <li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index">
                <p class="dot" :style="{ background: colors[index] }" />
@@ -90,7 +90,7 @@
        <div class="chart__wrapper">
          <Title3 title="景区工单类型占比" />
          <div class="chart__inner">
-            <spotRate :dataList="typeRateData" :total="8888" />
+            <spotRate :dataList="typeRateData" :total="typeRateTotal" />
            <ul class="chart__legend">
              <li class="chart__legend-item" v-for="(item, index) in typeRateData" :key="index">
                <p class="dot" :style="{ background: colors[index] }" />
@@ -150,6 +150,8 @@
  let typeRateData = ref([])
  let spotRateData = ref([])
  let pointRankData = ref([])
+  let spotRateTotal = ref(0)
+  let typeRateTotal = ref(0)

  const getNewsPointRank = async () => {
    let res = await getNewsPointRankApi()
@@ -158,10 +160,12 @@
  const getTypeRate = async () => {
    let res = await getTypeRateApi()
    typeRateData.value = res.data.data
+    typeRateTotal.value = res.data.total
  }
  const getSpotRate = async () => {
    let res = await getSpotRateApi()
    spotRateData.value = res.data.data
+    spotRateTotal.value = res.data.total
  }
  const getCompleteRate = async () => {
    let res = await getCompleteRateApi()
@@ -391,10 +395,11 @@
      }

      .alarm {
+        width: vw(200);
        background: #0a4190;

        &__wrapper {
-          flex: 1;
+          width: vw(200);
          height: vh(270);
          background: #054581; /* 滚动条整体样式 */
          &::-webkit-scrollbar {