修改实时地图

src/views/board/allBoard/index.vue

@@ -41,7 +41,7 @@
               <el-col :span="4">
                 <div class="top-item" style="border: none; color: #c60606">
                   <div class="top-item-title"> 异常 </div>
-                  <div class="top-item-num"> {{ data.taskStatusVO.abnormalNum || 0 }} </div>
+                  <div class="top-item-num" style="color: #c60606"> {{ data.taskStatusVO.abnormalNum || 0 }} </div>
                 </div>
               </el-col>
             </el-row>
@@ -87,7 +87,7 @@
               <el-col :span="4">
                 <div class="top-item" style="border: none; color: #c60606">
                   <div class="top-item-title"> 故障 </div>
-                  <div class="top-item-num"> {{ data.statistics.fault || 0 }} </div>
+                  <div class="top-item-num" style="color: #c60606"> {{ data.statistics.fault || 0 }} </div>
                 </div>
               </el-col>
             </el-row>

src/views/mapPage/realTimeMap/components/indexPage.vue

@@ -448,6 +448,7 @@ const carPointListFun = () => {
   // let data2 = JSON.parse(data['d0:65:78:c4:af:cc'])
   // console.log(data2)
 }
+
 //是否可以拖拽
 const isDrag = ref(false)
 const changeIsDrag = () => {
@@ -781,9 +782,19 @@ const linkWebSocket = (url) => {
   if (socketClient.value) {
     // 监听消息
     socketClient.value.onMessage((message) => {
-      console.log('收到消息:', message)
-      if (message.type == 'map_push') {
-        let data = JSON.parse(testJson.content)
+      console.log('收到消息:', message, window)
+      //     ElMessage({
+      //     message: () => h('div', {
+      //     onClick: () => lookError(),
+      //     style: { cursor: 'pointer' }
+      //   }, '这是一个可点击的消息'),
+      //   showClose: true,
+      //   duration: 0, // 让消息持续显示，直到用户关闭
+      // });
+      if (message == 'ping' || message == 'pong') return
+      let jsonMsg = JSON.parse(message)
+      if (jsonMsg.type == 'map_push') {
+        let data = JSON.parse(jsonMsg.content)
         // console.log("============",data)
         let dataList = []
         for (let key in data) {
@@ -795,9 +806,33 @@ const linkWebSocket = (url) => {
         // console.log('=====', dataList)
         testCarList.value = dataList
       }
+      if (jsonMsg.type == 'agv_warn') {
+        //       ElMessage({
+        //           dangerouslyUseHTMLString: true,
+        //            message: `<span>${JSON.parse(jsonMsg.content)}</span> <el-button id="custom-button" @click="lookError">查看更多</el-button>`,
+        // })
+        ElMessage({
+          message: () =>
+            h(
+              'div',
+              {
+                onClick: () => lookError(),
+                style: { cursor: 'pointer' }
+              },
+              `${JSON.parse(jsonMsg.content)}`
+            ),
+          showClose: false,
+          duration: 2000, // 让消息持续显示，直到用户关闭
+          type: 'error'
+        })
+      }
     })
   }
 }
+
+const lookError = () => {
+  console.log('点击了')
+}
 // 发送websocket消息
 const sendMessage = () => {
   socketClient.value.send('Hello, WebSocket!')
@@ -989,7 +1024,8 @@ const observeWidthChange = (id, callback) => {
 let stopObserving
 defineExpose({ getMapData }) // 提供 open 方法，用于打开弹窗
 onMounted(() => {
-  carPointListFun()
+  window.lookError = lookError
+  // carPointListFun()
   // getList()
   window.addEventListener('resize', computedRatio)
   stopObserving = observeWidthChange('indexpage-container', (newWidth) => {