From c72b11fd813d6122d400e370dd9cb8bb85eb6259 Mon Sep 17 00:00:00 2001
From: dong <58670809@qq.com>
Date: Wed, 20 Dec 2023 13:57:39 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E9=80=9A=E4=BF=A1=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E6=96=AD=E5=BC=80=E4=BD=8D=E7=BD=AE=E8=B0=83=E6=95=B4=EF=BC=9B?=
 =?UTF-8?q?=E7=BA=BF=E8=B7=AF=E5=88=9D=E5=A7=8B=E5=8C=96=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=88=97=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/AlertMock.ts       |  8 ++++++++
 src/css/app.scss           |  3 +++
 src/drawApp/lineApp.ts     |  3 ++-
 src/drawApp/lineNetApp.ts  |  3 ++-
 src/layouts/MainLayout.vue | 35 +++++++++++++++++++++++++++++++++++
 5 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/api/AlertMock.ts b/src/api/AlertMock.ts
index 8dca82a..9e31f90 100644
--- a/src/api/AlertMock.ts
+++ b/src/api/AlertMock.ts
@@ -130,3 +130,11 @@ export async function recordAlarmReport(
   const response = await api.post(`/api/alertRecord/report/${lineId}`, data);
   return response.data;
 }
+
+/**
+ * 初始化
+ * @param linId 线路的id
+ */
+export function resetApi(linId: number): Promise<string> {
+  return api.get(`${alertUriBase}/reset/${linId}`);
+}
diff --git a/src/css/app.scss b/src/css/app.scss
index ecac98f..2157cc3 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1 +1,4 @@
 // app global css in SCSS form
+.my-notif-class {
+  margin-top: 50px;
+}
diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts
index 90aa484..4202d02 100644
--- a/src/drawApp/lineApp.ts
+++ b/src/drawApp/lineApp.ts
@@ -143,7 +143,8 @@ export function initLineApp(): IGraphicApp {
         type: 'negative',
         timeout: 0,
         position: 'top-right',
-        message: '通信链接已断开！',
+        message: '与WebSocket服务连接断开！',
+        classes: 'my-notif-class',
       });
     } else if (msgNotify && connected) {
       msgNotify();
diff --git a/src/drawApp/lineNetApp.ts b/src/drawApp/lineNetApp.ts
index fb6f1ae..1f00a57 100644
--- a/src/drawApp/lineNetApp.ts
+++ b/src/drawApp/lineNetApp.ts
@@ -91,7 +91,8 @@ export function initLineNetApp(): IGraphicApp {
         type: 'negative',
         timeout: 0,
         position: 'top-right',
-        message: '通信链接已断开！',
+        message: '与WebSocket服务连接断开！',
+        classes: 'my-notif-class',
       });
     } else if (msgNotify && connected) {
       msgNotify();
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 3ef22a0..2dd13f7 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -30,6 +30,13 @@
           class="q-mr-sm"
           @click="openSetAlarmTextDialog"
         />
+        <q-btn
+          v-if="showSetAlarmTextButton && route.path.includes('line/monitor')"
+          color="warning"
+          label="初始化"
+          class="q-mr-sm"
+          @click="resetFn"
+        />
 
         <div class="q-gutter-sm row items-center no-wrap">
           <q-btn
@@ -98,10 +105,15 @@ import setAlarmMock from 'src/components/alarm/setAlarmMock.vue';
 import NCC from '/logo/NCC_bai.png';
 import { getShowSetAlarmTextButton } from 'src/configs/UrlManage';
 import { useLineNetStore } from 'src/stores/line-net-store';
+import { resetApi } from 'src/api/AlertMock';
+import { useLineStore } from 'src/stores/line-store';
+import { errorNotify } from 'src/utils/CommonNotify';
+import { Train } from 'src/graphics/train/Train';
 
 const leftDrawerOpen = ref(false);
 const router = useRouter();
 const route = useRoute();
+const lineStore = useLineStore();
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
   onResize();
@@ -169,4 +181,27 @@ function logOut() {
 function backConfirm() {
   router.replace('/monitor');
 }
+
+function resetFn() {
+  Dialog.create({
+    title: '初始化确认',
+    message: '确认是否初始化？',
+    cancel: true,
+    persistent: true,
+  }).onOk(() => {
+    console.log('初始化', lineStore.lineId);
+    lineStore.lineId &&
+      resetApi(lineStore.lineId)
+        .then(() => {
+          const app = lineStore.getLineApp();
+          const trainList = app.queryStore.queryByType<Train>(Train.Type);
+          trainList.forEach((g) => {
+            app.deleteGraphics(g);
+          });
+        })
+        .catch((err) => {
+          errorNotify('初始化删除!', err);
+        });
+  });
+}
 </script>

From 232536ae34b6dc1fef311b67cb08f02520bc26e8 Mon Sep 17 00:00:00 2001
From: dong <58670809@qq.com>
Date: Wed, 20 Dec 2023 15:51:08 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/MainLayout.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 2dd13f7..f3f72ba 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -189,7 +189,6 @@ function resetFn() {
     cancel: true,
     persistent: true,
   }).onOk(() => {
-    console.log('初始化', lineStore.lineId);
     lineStore.lineId &&
       resetApi(lineStore.lineId)
         .then(() => {
@@ -200,7 +199,7 @@ function resetFn() {
           });
         })
         .catch((err) => {
-          errorNotify('初始化删除!', err);
+          errorNotify('初始化失败!', err);
         });
   });
 }

From 9edc6971caabb8f5c48d2285a5aa906848d2037f Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Wed, 20 Dec 2023 16:23:17 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E4=B8=8E=E5=8D=A1=E6=96=AF=E6=9F=AF?=
 =?UTF-8?q?=E8=BF=9E=E6=8E=A5=E7=8A=B6=E6=80=81=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ConnectInfoDialog.vue |  80 ++++++++++++
 src/components/webSocketConnect.ts   |  34 +++++
 src/layouts/MainLayout.vue           |  44 ++++++-
 src/pages/AlarmInfoList.vue          |  31 +----
 src/protos/device_info.ts            |  62 ++++-----
 src/protos/system_warn_message.ts    | 188 +++++++++++++++++++++++++++
 src/stores/line-net-store.ts         |  22 ++++
 7 files changed, 402 insertions(+), 59 deletions(-)
 create mode 100644 src/components/ConnectInfoDialog.vue
 create mode 100644 src/components/webSocketConnect.ts
 create mode 100644 src/protos/system_warn_message.ts

diff --git a/src/components/ConnectInfoDialog.vue b/src/components/ConnectInfoDialog.vue
new file mode 100644
index 0000000..3733ff2
--- /dev/null
+++ b/src/components/ConnectInfoDialog.vue
@@ -0,0 +1,80 @@
+<template>
+  <draggable-dialog
+    ref="dialogRef"
+    @show="onDialogShow"
+    seamless
+    title="与卡斯柯连接状态信息"
+    :width="300"
+    :height="0"
+  >
+    <template v-slot:footer>
+      <q-table
+        ref="tableRef"
+        row-key="id"
+        v-model:pagination="pagination"
+        :rows="rows"
+        :columns="columns"
+        @request="onRequest"
+        :rows-per-page-options="[10, 20, 50, 100]"
+      >
+      </q-table>
+    </template>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import DraggableDialog from './common/DraggableDialog.vue';
+import { QTable } from 'quasar';
+import { useLineNetStore } from 'src/stores/line-net-store';
+import { state } from 'src/protos/system_warn_message';
+
+const lineNetStore = useLineNetStore();
+const dialogRef = ref<InstanceType<typeof DraggableDialog>>();
+const tableRef = ref<QTable>();
+const columns: QTable['columns'] = [
+  { name: 'lineId', label: '线路ID', field: 'lineId', align: 'center' },
+  {
+    name: 'areaName',
+    label: '实时连接',
+    field: (row) => (row.occRealConned ? '是' : '否'),
+    align: 'center',
+  },
+  {
+    name: 'deviceType',
+    label: '非实时连接',
+    field: (row) => (row.occUnrealConned ? '是' : '否'),
+    align: 'center',
+  },
+];
+const rows = ref<state.WarnMessage[]>([]);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+watch(
+  () => lineNetStore.connectInfo,
+  () => {
+    onDialogShow();
+  }
+);
+
+const onRequest: QTable['onRequest'] = async (props) => {
+  const { page, rowsPerPage } = props.pagination;
+  pagination.value.page = page;
+  pagination.value.rowsPerPage = rowsPerPage;
+  const datas = lineNetStore.connectInfo?.msgs;
+  if (datas) {
+    rows.value = datas;
+    pagination.value.rowsNumber = datas.length;
+  }
+};
+
+const onDialogShow = () => {
+  tableRef.value?.requestServerInteraction();
+};
+</script>
diff --git a/src/components/webSocketConnect.ts b/src/components/webSocketConnect.ts
new file mode 100644
index 0000000..c4881f6
--- /dev/null
+++ b/src/components/webSocketConnect.ts
@@ -0,0 +1,34 @@
+import { HandleMessage, StompMessagingClient } from 'jl-graphic';
+import { getJwtToken } from 'src/configs/TokenManage';
+import { getWebsocketUrl } from 'src/configs/UrlManage';
+
+export function webSocketConnect(
+  socket: StompMessagingClient | null,
+  destination: string,
+  handler: HandleMessage
+) {
+  socket = new StompMessagingClient({
+    wsUrl: `${getWebsocketUrl()}`,
+    token: getJwtToken() as string,
+    protocol: 'protobuf',
+    connectTimeout: 30 * 1000,
+    heartbeat: 60,
+    retryPeriod: 2 * 1000,
+    retryTimes: 100,
+  });
+  socket.on('connected', () => {
+    socket?.subscribe(destination, handler);
+  });
+  socket.on('disconnected', () => {
+    console.log(6666);
+  });
+}
+
+export function closeWebSocketConnect(
+  socket: StompMessagingClient | null,
+  destination: string
+) {
+  socket?.unsubscribe0(destination);
+  socket?.close();
+  socket = null;
+}
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index f3f72ba..058dea0 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -55,6 +55,14 @@
             v-if="$q.screen.gt.sm"
           >
           </q-btn>
+          <q-btn
+            flat
+            dense
+            round
+            icon="connected_tv"
+            :color="lineNetStore.connectButtonColor"
+            @click="openConnectInfoDialog"
+          />
           <q-btn-dropdown
             flat
             stretch
@@ -94,10 +102,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import SysMenu from 'src/components/SysMenu.vue';
 import { useRouter, useRoute } from 'vue-router';
-import { Dialog, useQuasar } from 'quasar';
+import { Dialog, DialogChainObject, useQuasar } from 'quasar';
 import { clearJwtToken } from 'src/configs/TokenManage';
 import commonAlarm from 'src/components/alarm/commonAlarm.vue';
 import setAlarmText from 'src/components/alarm/setAlarmText.vue';
@@ -109,11 +117,19 @@ import { resetApi } from 'src/api/AlertMock';
 import { useLineStore } from 'src/stores/line-store';
 import { errorNotify } from 'src/utils/CommonNotify';
 import { Train } from 'src/graphics/train/Train';
+import ConnectInfoDialog from 'src/components/ConnectInfoDialog.vue';
+import { StompMessagingClient } from 'jl-graphic';
+import { state } from 'src/protos/system_warn_message';
+import {
+  webSocketConnect,
+  closeWebSocketConnect,
+} from 'src/components/webSocketConnect';
 
 const leftDrawerOpen = ref(false);
 const router = useRouter();
 const route = useRoute();
 const lineStore = useLineStore();
+const lineNetStore = useLineNetStore();
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
   onResize();
@@ -138,7 +154,7 @@ function onLeftResize(size: { width: number; height: number }) {
 }
 
 const watchInteract = () => {
-  useLineNetStore().playAble = true;
+  lineNetStore.playAble = true;
   document.removeEventListener('click', watchInteract);
   document.removeEventListener('keydown', watchInteract);
 };
@@ -149,6 +165,7 @@ onMounted(() => {
   }
   document.addEventListener('click', watchInteract);
   document.addEventListener('keydown', watchInteract);
+  webSocketConnect(socket, destination, handler);
 });
 
 //模拟报警
@@ -166,6 +183,27 @@ function openSetAlarmTextDialog() {
   });
 }
 
+let connectInfoDialogInstance: DialogChainObject | null = null;
+function openConnectInfoDialog() {
+  if (connectInfoDialogInstance) return;
+  connectInfoDialogInstance = $q
+    .dialog({ component: ConnectInfoDialog })
+    .onCancel(() => {
+      connectInfoDialogInstance = null;
+    });
+}
+
+let socket: StompMessagingClient | null = null;
+const destination = '/queue/line/sysi';
+function handler(message: Uint8Array) {
+  const storage = state.WarnLineMessage.deserialize(message);
+  lineNetStore.setConnectInfo(storage);
+}
+
+onUnmounted(() => {
+  closeWebSocketConnect(socket, destination);
+});
+
 function logOut() {
   Dialog.create({
     title: '登出确认',
diff --git a/src/pages/AlarmInfoList.vue b/src/pages/AlarmInfoList.vue
index 2f6670e..0493f34 100644
--- a/src/pages/AlarmInfoList.vue
+++ b/src/pages/AlarmInfoList.vue
@@ -226,8 +226,6 @@ import {
   ShowAlertStateData,
   alertStatusOptions,
 } from 'src/components/alarm/alarmInfoEnum';
-import { getWebsocketUrl } from 'src/configs/UrlManage';
-import { getJwtToken } from 'src/configs/TokenManage';
 import { alert } from 'src/protos/alertInfo';
 import { useLineNetStore } from 'src/stores/line-net-store';
 import { StompMessagingClient } from 'jl-graphic';
@@ -235,6 +233,10 @@ import alarmStatistics from 'src/components/alarm/alarmStatistics.vue';
 import { errorNotify } from 'src/utils/CommonNotify';
 import { pageQuery } from 'src/api/LineInfoApi';
 import { ApiError } from 'src/boot/axios';
+import {
+  webSocketConnect,
+  closeWebSocketConnect,
+} from 'src/components/webSocketConnect';
 
 const $q = useQuasar();
 const lineNetStore = useLineNetStore();
@@ -370,7 +372,7 @@ onMounted(() => {
   setTimeout(() => {
     tableRef.value.requestServerInteraction();
     lineNetStore.alarmInfoListTable = tableRef.value;
-    socketConnect();
+    webSocketConnect(socket, destination, handler);
   });
 });
 
@@ -551,34 +553,13 @@ function openAlarmDialog(row: any) {
 
 let socket: StompMessagingClient | null = null;
 const destination = '/queue/xian/ncc/alert';
-function socketConnect() {
-  socket = new StompMessagingClient({
-    wsUrl: `${getWebsocketUrl()}`,
-    token: getJwtToken() as string,
-    protocol: 'protobuf',
-    connectTimeout: 30 * 1000,
-    heartbeat: 60,
-    retryPeriod: 2 * 1000,
-    retryTimes: 100,
-  });
-  socket.on('connected', () => {
-    socket?.subscribe(destination, handler);
-  });
-}
-
 function handler(message: Uint8Array) {
   const storage = alert.NccAlertInfoMessage.deserialize(message);
   lineNetStore.setAlarmInfo(storage.messages as []);
 }
 
-function closeSocket() {
-  socket?.unsubscribe0(destination);
-  socket?.close();
-  socket = null;
-}
-
 onUnmounted(() => {
-  closeSocket();
+  closeWebSocketConnect(socket, destination);
 });
 
 //报警统计
diff --git a/src/protos/device_info.ts b/src/protos/device_info.ts
index 2de0198..0de4fa0 100644
--- a/src/protos/device_info.ts
+++ b/src/protos/device_info.ts
@@ -9,10 +9,10 @@ export namespace state {
     export class Section extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
-            id?: string;
+            id?: number;
             code?: string;
-            childrenId?: string[];
-            physicalSectionId?: string;
+            childrenId?: number[];
+            physicalSectionId?: number;
             destinationCode?: string;
             kilometer?: DeviceKilometer;
         }) {
@@ -40,9 +40,9 @@ export namespace state {
             }
         }
         get id() {
-            return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
+            return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
         }
-        set id(value: string) {
+        set id(value: number) {
             pb_1.Message.setField(this, 1, value);
         }
         get code() {
@@ -52,15 +52,15 @@ export namespace state {
             pb_1.Message.setField(this, 2, value);
         }
         get childrenId() {
-            return pb_1.Message.getFieldWithDefault(this, 3, []) as string[];
+            return pb_1.Message.getFieldWithDefault(this, 3, []) as number[];
         }
-        set childrenId(value: string[]) {
+        set childrenId(value: number[]) {
             pb_1.Message.setField(this, 3, value);
         }
         get physicalSectionId() {
-            return pb_1.Message.getFieldWithDefault(this, 4, "") as string;
+            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
         }
-        set physicalSectionId(value: string) {
+        set physicalSectionId(value: number) {
             pb_1.Message.setField(this, 4, value);
         }
         get destinationCode() {
@@ -79,10 +79,10 @@ export namespace state {
             return pb_1.Message.getField(this, 6) != null;
         }
         static fromObject(data: {
-            id?: string;
+            id?: number;
             code?: string;
-            childrenId?: string[];
-            physicalSectionId?: string;
+            childrenId?: number[];
+            physicalSectionId?: number;
             destinationCode?: string;
             kilometer?: ReturnType<typeof DeviceKilometer.prototype.toObject>;
         }): Section {
@@ -109,10 +109,10 @@ export namespace state {
         }
         toObject() {
             const data: {
-                id?: string;
+                id?: number;
                 code?: string;
-                childrenId?: string[];
-                physicalSectionId?: string;
+                childrenId?: number[];
+                physicalSectionId?: number;
                 destinationCode?: string;
                 kilometer?: ReturnType<typeof DeviceKilometer.prototype.toObject>;
             } = {};
@@ -140,14 +140,14 @@ export namespace state {
         serialize(w: pb_1.BinaryWriter): void;
         serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
             const writer = w || new pb_1.BinaryWriter();
-            if (this.id.length)
-                writer.writeString(1, this.id);
+            if (this.id != 0)
+                writer.writeUint32(1, this.id);
             if (this.code.length)
                 writer.writeString(2, this.code);
             if (this.childrenId.length)
-                writer.writeRepeatedString(3, this.childrenId);
-            if (this.physicalSectionId.length)
-                writer.writeString(4, this.physicalSectionId);
+                writer.writePackedUint32(3, this.childrenId);
+            if (this.physicalSectionId != 0)
+                writer.writeUint32(4, this.physicalSectionId);
             if (this.destinationCode.length)
                 writer.writeString(5, this.destinationCode);
             if (this.has_kilometer)
@@ -162,16 +162,16 @@ export namespace state {
                     break;
                 switch (reader.getFieldNumber()) {
                     case 1:
-                        message.id = reader.readString();
+                        message.id = reader.readUint32();
                         break;
                     case 2:
                         message.code = reader.readString();
                         break;
                     case 3:
-                        pb_1.Message.addToRepeatedField(message, 3, reader.readString());
+                        message.childrenId = reader.readPackedUint32();
                         break;
                     case 4:
-                        message.physicalSectionId = reader.readString();
+                        message.physicalSectionId = reader.readUint32();
                         break;
                     case 5:
                         message.destinationCode = reader.readString();
@@ -194,7 +194,7 @@ export namespace state {
     export class Turnout extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
-            id?: string;
+            id?: number;
             code?: string;
             kilometer?: DeviceKilometer;
         }) {
@@ -213,9 +213,9 @@ export namespace state {
             }
         }
         get id() {
-            return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
+            return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
         }
-        set id(value: string) {
+        set id(value: number) {
             pb_1.Message.setField(this, 1, value);
         }
         get code() {
@@ -234,7 +234,7 @@ export namespace state {
             return pb_1.Message.getField(this, 3) != null;
         }
         static fromObject(data: {
-            id?: string;
+            id?: number;
             code?: string;
             kilometer?: ReturnType<typeof DeviceKilometer.prototype.toObject>;
         }): Turnout {
@@ -252,7 +252,7 @@ export namespace state {
         }
         toObject() {
             const data: {
-                id?: string;
+                id?: number;
                 code?: string;
                 kilometer?: ReturnType<typeof DeviceKilometer.prototype.toObject>;
             } = {};
@@ -271,8 +271,8 @@ export namespace state {
         serialize(w: pb_1.BinaryWriter): void;
         serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
             const writer = w || new pb_1.BinaryWriter();
-            if (this.id.length)
-                writer.writeString(1, this.id);
+            if (this.id != 0)
+                writer.writeUint32(1, this.id);
             if (this.code.length)
                 writer.writeString(2, this.code);
             if (this.has_kilometer)
@@ -287,7 +287,7 @@ export namespace state {
                     break;
                 switch (reader.getFieldNumber()) {
                     case 1:
-                        message.id = reader.readString();
+                        message.id = reader.readUint32();
                         break;
                     case 2:
                         message.code = reader.readString();
diff --git a/src/protos/system_warn_message.ts b/src/protos/system_warn_message.ts
new file mode 100644
index 0000000..42bb039
--- /dev/null
+++ b/src/protos/system_warn_message.ts
@@ -0,0 +1,188 @@
+/**
+ * Generated by the protoc-gen-ts.  DO NOT EDIT!
+ * compiler version: 4.23.1
+ * source: system_warn_message.proto
+ * git: https://github.com/thesayyn/protoc-gen-ts */
+import * as pb_1 from "google-protobuf";
+export namespace state {
+    export class WarnLineMessage extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            msgs?: WarnMessage[];
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [1], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("msgs" in data && data.msgs != undefined) {
+                    this.msgs = data.msgs;
+                }
+            }
+        }
+        get msgs() {
+            return pb_1.Message.getRepeatedWrapperField(this, WarnMessage, 1) as WarnMessage[];
+        }
+        set msgs(value: WarnMessage[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 1, value);
+        }
+        static fromObject(data: {
+            msgs?: ReturnType<typeof WarnMessage.prototype.toObject>[];
+        }): WarnLineMessage {
+            const message = new WarnLineMessage({});
+            if (data.msgs != null) {
+                message.msgs = data.msgs.map(item => WarnMessage.fromObject(item));
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                msgs?: ReturnType<typeof WarnMessage.prototype.toObject>[];
+            } = {};
+            if (this.msgs != null) {
+                data.msgs = this.msgs.map((item: WarnMessage) => item.toObject());
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.msgs.length)
+                writer.writeRepeatedMessage(1, this.msgs, (item: WarnMessage) => item.serialize(writer));
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): WarnLineMessage {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new WarnLineMessage();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.msgs, () => pb_1.Message.addToRepeatedWrapperField(message, 1, WarnMessage.deserialize(reader), WarnMessage));
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): WarnLineMessage {
+            return WarnLineMessage.deserialize(bytes);
+        }
+    }
+    export class WarnMessage extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            lineId?: number;
+            occRealConned?: boolean;
+            occUnrealConned?: boolean;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("lineId" in data && data.lineId != undefined) {
+                    this.lineId = data.lineId;
+                }
+                if ("occRealConned" in data && data.occRealConned != undefined) {
+                    this.occRealConned = data.occRealConned;
+                }
+                if ("occUnrealConned" in data && data.occUnrealConned != undefined) {
+                    this.occUnrealConned = data.occUnrealConned;
+                }
+            }
+        }
+        get lineId() {
+            return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
+        }
+        set lineId(value: number) {
+            pb_1.Message.setField(this, 1, value);
+        }
+        get occRealConned() {
+            return pb_1.Message.getFieldWithDefault(this, 2, false) as boolean;
+        }
+        set occRealConned(value: boolean) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get occUnrealConned() {
+            return pb_1.Message.getFieldWithDefault(this, 3, false) as boolean;
+        }
+        set occUnrealConned(value: boolean) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        static fromObject(data: {
+            lineId?: number;
+            occRealConned?: boolean;
+            occUnrealConned?: boolean;
+        }): WarnMessage {
+            const message = new WarnMessage({});
+            if (data.lineId != null) {
+                message.lineId = data.lineId;
+            }
+            if (data.occRealConned != null) {
+                message.occRealConned = data.occRealConned;
+            }
+            if (data.occUnrealConned != null) {
+                message.occUnrealConned = data.occUnrealConned;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                lineId?: number;
+                occRealConned?: boolean;
+                occUnrealConned?: boolean;
+            } = {};
+            if (this.lineId != null) {
+                data.lineId = this.lineId;
+            }
+            if (this.occRealConned != null) {
+                data.occRealConned = this.occRealConned;
+            }
+            if (this.occUnrealConned != null) {
+                data.occUnrealConned = this.occUnrealConned;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.lineId != 0)
+                writer.writeInt32(1, this.lineId);
+            if (this.occRealConned != false)
+                writer.writeBool(2, this.occRealConned);
+            if (this.occUnrealConned != false)
+                writer.writeBool(3, this.occUnrealConned);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): WarnMessage {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new WarnMessage();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        message.lineId = reader.readInt32();
+                        break;
+                    case 2:
+                        message.occRealConned = reader.readBool();
+                        break;
+                    case 3:
+                        message.occUnrealConned = reader.readBool();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): WarnMessage {
+            return WarnMessage.deserialize(bytes);
+        }
+    }
+}
diff --git a/src/stores/line-net-store.ts b/src/stores/line-net-store.ts
index 2836538..821ea40 100644
--- a/src/stores/line-net-store.ts
+++ b/src/stores/line-net-store.ts
@@ -7,6 +7,7 @@ import {
 } from 'src/drawApp/lineNetApp';
 import { markRaw } from 'vue';
 import { QTable } from 'quasar';
+import { state } from 'src/protos/system_warn_message';
 export interface AlarmInfo {
   id: string;
   level: string;
@@ -28,6 +29,8 @@ export const useLineNetStore = defineStore('lineNet', {
     alarmInfoListTable: undefined as QTable | undefined,
     playAble: false, //是否允许播放音乐
     closeAllAlarmInfoDialog: false,
+    connectButtonColor: 'green',
+    connectInfo: null as state.WarnLineMessage | null,
   }),
   getters: {
     untreatedNum: (state) => {
@@ -81,6 +84,25 @@ export const useLineNetStore = defineStore('lineNet', {
         this.untreatedMap.set(item.id, item);
       });
     },
+    setConnectInfo(data: state.WarnLineMessage) {
+      this.connectInfo = data;
+      const allConnectAmount = data.msgs.reduce((pre, cur) => {
+        let addValue = 0;
+        if (cur.occRealConned && cur.occUnrealConned) {
+          addValue = 2;
+        } else if (cur.occRealConned || cur.occUnrealConned) {
+          addValue = 1;
+        }
+        return pre + addValue;
+      }, 0);
+      if (allConnectAmount == data.msgs.length * 2) {
+        this.connectButtonColor = 'green';
+      } else if (allConnectAmount == 0) {
+        this.connectButtonColor = 'red';
+      } else {
+        this.connectButtonColor = 'yellow';
+      }
+    },
     treatedAlarm(data: AlarmInfo) {
       if (this.untreatedMap.has(data.id)) {
         this.untreatedMap.delete(data.id);

From 64569f9b3cb16fb35a3d0e1f75ae64336e55362e Mon Sep 17 00:00:00 2001
From: dong <58670809@qq.com>
Date: Wed, 20 Dec 2023 17:24:32 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9socket=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/drawApp/lineApp.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts
index 4202d02..94d8ab5 100644
--- a/src/drawApp/lineApp.ts
+++ b/src/drawApp/lineApp.ts
@@ -130,7 +130,7 @@ export function initLineApp(): IGraphicApp {
   sectionOperationPlugin.init(lineApp);
 
   lineApp.enableWsMassaging({
-    engine: ClientEngine.MQTT,
+    engine: ClientEngine.Stomp,
     wsUrl: getWebsocketUrl(),
     token: getJwtToken() as string,
   });

From 8d926b37cd0b1373f8d3eef91f8c2cb5073dddd9 Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Wed, 20 Dec 2023 17:36:32 +0800
Subject: [PATCH 5/6] =?UTF-8?q?socket=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/webSocketConnect.ts | 3 ++-
 src/layouts/MainLayout.vue         | 2 +-
 src/pages/AlarmInfoList.vue        | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/webSocketConnect.ts b/src/components/webSocketConnect.ts
index c4881f6..d0042a7 100644
--- a/src/components/webSocketConnect.ts
+++ b/src/components/webSocketConnect.ts
@@ -20,8 +20,9 @@ export function webSocketConnect(
     socket?.subscribe(destination, handler);
   });
   socket.on('disconnected', () => {
-    console.log(6666);
+    console.log('disconnected');
   });
+  return socket;
 }
 
 export function closeWebSocketConnect(
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 058dea0..18f9327 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -165,7 +165,7 @@ onMounted(() => {
   }
   document.addEventListener('click', watchInteract);
   document.addEventListener('keydown', watchInteract);
-  webSocketConnect(socket, destination, handler);
+  socket = webSocketConnect(socket, destination, handler);
 });
 
 //模拟报警
diff --git a/src/pages/AlarmInfoList.vue b/src/pages/AlarmInfoList.vue
index 0493f34..0037e41 100644
--- a/src/pages/AlarmInfoList.vue
+++ b/src/pages/AlarmInfoList.vue
@@ -372,7 +372,7 @@ onMounted(() => {
   setTimeout(() => {
     tableRef.value.requestServerInteraction();
     lineNetStore.alarmInfoListTable = tableRef.value;
-    webSocketConnect(socket, destination, handler);
+    socket = webSocketConnect(socket, destination, handler);
   });
 });
 

From 5d83a368e0aac6bfd2ee467c7423eb9b0273a5fe Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Wed, 20 Dec 2023 17:41:56 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/webSocketConnect.ts | 8 ++------
 src/layouts/MainLayout.vue         | 2 +-
 src/pages/AlarmInfoList.vue        | 2 +-
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/webSocketConnect.ts b/src/components/webSocketConnect.ts
index d0042a7..31157f9 100644
--- a/src/components/webSocketConnect.ts
+++ b/src/components/webSocketConnect.ts
@@ -2,12 +2,8 @@ import { HandleMessage, StompMessagingClient } from 'jl-graphic';
 import { getJwtToken } from 'src/configs/TokenManage';
 import { getWebsocketUrl } from 'src/configs/UrlManage';
 
-export function webSocketConnect(
-  socket: StompMessagingClient | null,
-  destination: string,
-  handler: HandleMessage
-) {
-  socket = new StompMessagingClient({
+export function webSocketConnect(destination: string, handler: HandleMessage) {
+  const socket = new StompMessagingClient({
     wsUrl: `${getWebsocketUrl()}`,
     token: getJwtToken() as string,
     protocol: 'protobuf',
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 18f9327..f35de31 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -165,7 +165,7 @@ onMounted(() => {
   }
   document.addEventListener('click', watchInteract);
   document.addEventListener('keydown', watchInteract);
-  socket = webSocketConnect(socket, destination, handler);
+  socket = webSocketConnect(destination, handler);
 });
 
 //模拟报警
diff --git a/src/pages/AlarmInfoList.vue b/src/pages/AlarmInfoList.vue
index 0037e41..c134790 100644
--- a/src/pages/AlarmInfoList.vue
+++ b/src/pages/AlarmInfoList.vue
@@ -372,7 +372,7 @@ onMounted(() => {
   setTimeout(() => {
     tableRef.value.requestServerInteraction();
     lineNetStore.alarmInfoListTable = tableRef.value;
-    socket = webSocketConnect(socket, destination, handler);
+    socket = webSocketConnect(destination, handler);
   });
 });