webSocket连接消息更改

src/types/auto-imports.d.ts

@@ -2,6 +2,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElForm: typeof import('element-plus/es')['ElForm']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const ElNotification: typeof import('element-plus/es')['ElNotification']
@@ -272,6 +273,7 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
     readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>

src/utils/socket.ts

@@ -69,6 +69,8 @@ class WebSocketService {
       } else if (response.code === 'alertDev') {
         console.log('waring');
         mitt.emit('waringMessage', response);
+      } else if (response.code === 'respMsg') {
+        console.log(response.msg);
       }
     }
   }
@@ -87,6 +89,20 @@ class WebSocketService {
 
   onError(error: Event): void {
     console.error('WebSocket error:', error);
+    ElMessageBox.confirm('WebSocket连接错误，是否重连？', '提示', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(() => {
+        this.initialize(this.url);
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '您已取消！'
+        });
+      });
     // 错误处理的逻辑
   }
 
@@ -94,7 +110,16 @@ class WebSocketService {
     // 发送心跳
     this.heartbeatInterval = setInterval(() => {
       if (this.websocket?.readyState === WebSocket.OPEN) {
-        this.websocket.send('ping'); //心跳消息
+        const userStorageInfo = sessionStorage.getItem('userInfo');
+        const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
+        const hearData = {
+          code: 'heart',
+          data: {
+            username: userInfo.userName
+          }
+        };
+        console.log(hearData)
+        this.websocket.send(JSON.stringify(hearData)); //心跳消息
       }
     }, this.heartbeatInterval);
   }

src/views/monitoring/screen/components/main.vue

@@ -15,7 +15,7 @@
     <n-spin :show="loadingShow">
       <vxe-grid ref="tableRef" class="tableGrid" align="center" auto-resize keep-source :height="sidebarHeight - 4"
         header-row-class-name="headerRowClass" header-cell-class-name="headerCellClass" row-class-name="tableRowClass"
-        cell-class-name="tableCellClass" :sort-config="{ multiple: true, trigger: 'cell' }" :stripe="true" :border="false"
+        cell-class-name="tableCellClass" :sort-config="{ multiple: true, trigger: 'cell' }" :stripe="!tableBorder" :border="tableBorder"
         :column-config="{ resizable: true, useKey: true }" :row-config="{ useKey: true }" :span-method="mergeRowMethod"
         :columns="tableColumn" :data="tableData" @cell-dblclick="cellDBLClickEvent">
         <template #deviceuuid_default="{ row }">
@@ -24,7 +24,7 @@
               v-if="row.deviceuuid.deviceStatus === 0" />
             <svg-icon icon-class="warning_lights" style="fill:currentColor;width: 15px;height: 15px;color: red;"
               v-if="row.deviceuuid.deviceStatus === 2" />
-            <span class="name" @click.native="nameClick(row.deviceuuid)">{{ row.deviceuuid.title }}</span>
+            <span class="name" @click.native="nameClick(row.deviceuuid)">{{ row.gTitle }}</span>
           </div>
         </template>
       </vxe-grid>
@@ -85,7 +85,8 @@ const tableData = ref<TableVo[]>([]);
 const tableRef = ref<VxeGridInstance<TableVo>>();
 const cellRow = ref({})
 const cellColumn = ref()
-const cellField = ref();
+const cellField = ref()
+const tableBorder=ref(true)
 // const fields = ref(['deviceuuid']) //需要合并的列数据字段
 // const waringArrow = ref([])
 
@@ -347,7 +348,7 @@ const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
 
 // 通用行合并函数（将相同多列数据合并为一行）
 const mergeRowMethod: VxeTablePropTypes.SpanMethod<TableVo> = ({ row, _rowIndex, column, visibleData }) => {
-  const fields = ['title']
+  const fields = ['gTitle']
   const cellValue = row[column.field]
   if (cellValue && fields.includes(column.field)) {
     const prevRow = visibleData[_rowIndex - 1]

src/views/monitoring/screen/index.scss

@@ -318,7 +318,7 @@
           --vxe-table-header-background-color: none;
           --vxe-table-body-background-color: none;
           --vxe-table-footer-background-color: none;
-          --vxe-table-border-color: rgba(12, 80, 166, 0.3);
+          --vxe-table-border-color: rgba(12, 80, 166, 0.2);
           // --vxe-table-border-color: none;
           --vxe-font-color: #5beff9;
           --vxe-table-header-font-color: #ffffffb3;
@@ -450,7 +450,7 @@
             }
 
             .vxe-table--fixed-left-wrapper.scrolling--middle {
-              background: -webkit-linear-gradient(top, #000825 0%, #000c2b 100%);
+              background: -webkit-linear-gradient(top, #02072b 0%, #02082b 100%);
               box-shadow: inset 0px 0px 10px rgb(36, 90, 124) !important;
             }
           }