feat：对接监控大屏

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');

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
             },

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>

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
             },

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({