feat：对接舆情监测相关接口

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

@@ -40,7 +40,17 @@
         </div>
       </div>
     </div>
-    <Map />
+    <div class="rela">
+      <div class="alarm-box">
+        <ul class="flex">
+          <li class="alarm-item" v-for="(item, index) in list" :key="index">
+            <img class="icon" :src="item.icon" />
+            <span>{{ item.label }}</span>
+          </li>
+        </ul>
+      </div>
+      <Map />
+    </div>
     <div class="footer">
       <div class="left">
         <div>
@@ -112,7 +122,30 @@
 <script setup>
   import countup from 'vue-countup-v3'
   import ScrollNumber from '@/components/ScrollNumber/index.vue'
+  import icon8 from '@/assets/images/icon-8.png'
+  import icon9 from '@/assets/images/icon-9.png'
+  import icon10 from '@/assets/images/icon-10.png'
+  import icon11 from '@/assets/images/icon-11.png'
+
   let count = ref('6945959')
+  let list = ref([
+    {
+      label: '安全异常',
+      icon: icon8
+    },
+    {
+      label: '排队异常',
+      icon: icon9
+    },
+    {
+      label: '停车异常',
+      icon: icon10
+    },
+    {
+      label: '舆论异常',
+      icon: icon11
+    }
+  ])
 </script>
 
 <style lang="scss" scoped>
@@ -141,7 +174,7 @@
       .item {
         flex: 1;
         .label {
-          margin-bottom: vh(10);
+          margin-bottom: vh(20);
           font-weight: 400;
           font-size: vw(16);
           color: rgba(255, 255, 255, 0.9);
@@ -168,6 +201,29 @@
         background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
       }
     }
+    .alarm-box {
+      position: absolute;
+      top: vw(20);
+      left: vw(20);
+      z-index: 99999;
+      .alarm-item {
+        width: vw(110);
+        height: vh(40);
+        margin-right: vw(4);
+        font-weight: 400;
+        font-size: vw(14);
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(to bottom, rgba(238, 44, 44, 0) 0%, #ee2c2c 100%);
+        .icon {
+          width: vw(20);
+          height: vw(20);
+          margin-right: vw(4);
+        }
+      }
+    }
     .footer {
       display: flex;
       width: 100%;

src/views/home/index.vue

@@ -22,5 +22,30 @@
     { name: '舆情', path: '/sentiment' },
     { name: '酒店' }
   ]
-  onMounted(() => {})
+  onMounted(() => {
+    let socket = new WebSocket('ws://36.138.38.16:81/ws/third-party', 'echo-protocol', {
+      headers: {
+        Authorization:
+          'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ'
+      }
+    })
+    socket.onopen = () => {
+      console.log('WebSocket connected')
+      socket.send(
+        JSON.stringify({
+          action: 'start',
+          type: 'index'
+        })
+      )
+    }
+    socket.onerror = (error) => {
+      console.error('WebSocket error:', error)
+    }
+    socket.onmessage = (message) => {
+      console.log('Received message:', message.data)
+      let data = JSON.parse(message.data)
+      console.log('Received message:', data)
+    }
+    socket.onclose = () => {}
+  })
 </script>