报警界面和ATS界面分离+跳转逻辑修改

src/components/SysMenu.vue

@@ -91,5 +91,10 @@ const list = reactive([
     label: '监控',
     icon: 'computer',
   },
+  {
+    path: '/alarmList',
+    label: '报警列表',
+    icon: 'access_alarm',
+  },
 ]);
 </script>

src/components/alarm/alarmInfoDialog.vue

@@ -259,7 +259,6 @@ async function searchById() {
   justify-content: space-between;
   margin: 10px 0;
   .box-card {
-    max-height: 300px;
     overflow: auto;
     .head {
       padding: 5px 5px;

src/components/alarm/commonAlarm.vue

@@ -43,8 +43,7 @@ watch(
       playAlarmMusic(val[0].alert_type);
       alarm();
     }
-  },
-  { deep: true }
+  }
 );
 
 function playAlarmMusic(type: number) {

src/components/rangeConfigApp/RangeConfig.vue

@@ -122,8 +122,6 @@ const optionsAlertType = [
   '整侧站台门无法关闭',
   '道岔失表',
   '道岔均失表',
-  '道岔定位失表',
-  '道岔反位失表',
   '计轴红光带',
   '计轴大面积红光带',
   '计轴橙光带',

src/layouts/MainLayout.vue

@@ -15,17 +15,6 @@
           <img :src="NCC" style="width: 80px" />
         </div>
         <q-toolbar-title> 西安NCC调度辅助决策系统 </q-toolbar-title>
-        <q-btn
-          v-show="route.path.includes('monitor')"
-          color="info"
-          label="报警列表"
-          @click="alarmListQuery"
-          class="q-mr-sm"
-        >
-          <q-badge v-if="lineNetStore.untreatedNum" color="red" floating>{{
-            badgeNum
-          }}</q-badge>
-        </q-btn>
 
         <q-btn
           v-show="route.path.includes('monitor')"
@@ -126,11 +115,11 @@
       </q-form>
     </q-card>
   </q-dialog>
-  <commonAlarm v-if="route.path.includes('monitor')" />
+  <commonAlarm v-if="route.path.includes('alarmList')" />
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue';
+import { ref, reactive } from 'vue';
 import SysMenu from 'src/components/SysMenu.vue';
 import { useRouter, useRoute } from 'vue-router';
 import { Dialog, useQuasar } from 'quasar';
@@ -140,21 +129,10 @@ import {
   getDeviceByAlarmType,
   mockAlertSet,
 } from 'src/api/AlertMock';
-import alarmInfoList from 'src/components/alarm/alarmInfoList.vue';
 import commonAlarm from 'src/components/alarm/commonAlarm.vue';
-import { useLineNetStore } from 'src/stores/line-net-store';
 import { saveAlertTypeData } from 'src/components/alarm/alarmInfoEnum';
 import NCC from '/logo/NCC_白.png';
 
-const lineNetStore = useLineNetStore();
-const badgeNum = computed(() => {
-  let n = lineNetStore.untreatedNum + '';
-  if (lineNetStore.untreatedNum > 99) {
-    n = '99+';
-  }
-  return n;
-});
-
 const leftDrawerOpen = ref(false);
 const router = useRouter();
 const route = useRoute();
@@ -253,15 +231,4 @@ async function alarmMockSet() {
     });
   }
 }
-
-//报警列表
-const alarmListDialogInstance = ref();
-function alarmListQuery() {
-  if (alarmListDialogInstance.value) return;
-  alarmListDialogInstance.value = $q
-    .dialog({ component: alarmInfoList })
-    .onCancel(() => {
-      alarmListDialogInstance.value = null;
-    });
-}
 </script>

src/pages/AlarmInfoList.vue

@@ -1,14 +1,9 @@
 <template>
-  <draggable-dialog
-    seamless
-    title="报警列表"
-    :width="dialogWidth"
-    :height="dialogHeight"
-  >
+  <div class="q-pa-md">
     <q-table
       ref="tableRef"
       title="报警信息"
-      :style="{ height: dialogHeight + 'px' }"
+      :style="{ height: tableHeight + 'px' }"
       :rows="rows"
       :columns="columnDefs"
       row-key="id"
@@ -19,24 +14,8 @@
       binary-state-sort
       @request="onRequest"
     >
-      <template v-slot:top-left>
-        <q-input
-          dense
-          debounce="1000"
-          v-model.number="filter.lineId"
-          label="线路ID"
-          type="number"
-        />
-        <q-btn flat round color="primary" icon="search" />
-      </template>
       <template v-slot:top-right>
-        <q-input
-          dense
-          debounce="1000"
-          v-model="filter.alertType"
-          label="故障类型"
-        ></q-input>
-        <q-btn flat round color="primary" icon="search" />
+        <q-btn color="primary" label="查询" icon="search" />
       </template>
       <template v-slot:body-cell-operations="props">
         <q-td :props="props">
@@ -50,24 +29,35 @@
         </q-td>
       </template>
     </q-table>
-  </draggable-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
-import DraggableDialog from '../common/DraggableDialog.vue';
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, computed, onUnmounted } from 'vue';
 import { useQuasar, type QTableColumn } from 'quasar';
 import { alarmInfoListQuery } from 'src/api/AlertMock';
 import alarmInfoDialog from 'src/components/alarm/alarmInfoDialog.vue';
-import { showAlertTypeData, saveAlertTypeData } from './alarmInfoEnum';
+import {
+  showAlertTypeData,
+  saveAlertTypeData,
+} 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 'src/jl-graphic/message/WsMsgBroker';
 
 const $q = useQuasar();
-const dialogWidth = window.screen.width * 0.5;
-const dialogHeight = window.screen.height * 0.5;
-onMounted(() => {
-  setTimeout(() => {
-    tableRef.value.requestServerInteraction();
-  });
+const lineNetStore = useLineNetStore();
+const props = withDefaults(
+  defineProps<{
+    sizeHeight: number;
+  }>(),
+  { sizeHeight: 500 }
+);
+
+const tableHeight = computed(() => {
+  return props.sizeHeight - 32;
 });
 
 enum showAlertStateData {
@@ -178,6 +168,13 @@ async function onRequest(props: any) {
   }
 }
 
+onMounted(() => {
+  setTimeout(() => {
+    tableRef.value.requestServerInteraction();
+    socketConnect();
+  });
+});
+
 const dialogInstance = ref();
 function openAlarmDialog(row: any) {
   row.alert_time = row.alertTime;
@@ -193,4 +190,32 @@ 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',
+  });
+  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();
+});
 </script>

src/pages/LineMonitorPage.vue

@@ -1,8 +1,5 @@
 <template>
   <q-layout view="hHh LpR fFf" style="overflow-y: hidden">
-    <!--  <q-drawer side="right" v-model="drawerRight" show-if-above bordered>
-      <state-properties></state-properties>
-    </q-drawer> -->
     <q-resize-observer @resize="onResize" />
     <q-page-container>
       <div id="line-app-container"></div>
@@ -11,11 +8,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch, onUnmounted } from 'vue';
+import { onMounted, watch, onUnmounted } from 'vue';
 import { useLineStore } from 'src/stores/line-store';
 import { useRoute } from 'vue-router';
 import { useLineNetStore } from 'src/stores/line-net-store';
-import StateProperties from 'src/components/state-app/StateProperties.vue';
 
 const props = withDefaults(
   defineProps<{
@@ -27,7 +23,6 @@ const props = withDefaults(
 const route = useRoute();
 const lineStore = useLineStore();
 const lineNetStore = useLineNetStore();
-const drawerRight = ref(false);
 
 watch(
   () => props.sizeHeight,
@@ -43,24 +38,14 @@ watch(
 );
 
 watch(
-  () => lineStore.selectedGraphics,
+  () => lineNetStore.alarmInfo,
   (val) => {
-    if (val && val.length == 1) {
-      drawerRight.value = true;
-    } else {
-      drawerRight.value = false;
+    if (val.length) {
+      centerFaultDevice();
     }
   }
 );
 
-function onResize() {
-  const dom = document.getElementById('line-app-container');
-  if (dom) {
-    dom.style.width = props.sizeWidth + 'px';
-    dom.style.height = props.sizeHeight + 50 + 'px';
-  }
-}
-
 const lineId = Number(route.params.lineId);
 const lineApp = lineStore.initLineApp(lineId);
 
@@ -71,22 +56,31 @@ onMounted(() => {
     lineApp.bindDom(dom);
     onResize();
   }
-  drawerRight.value = false;
   setTimeout(() => {
-    if (lineNetStore.alarmInfo.length) {
     try {
       if (lineApp) {
-          const deviceId = lineNetStore.alarmInfo[0].locator_device_id;
-          const faultDevice = lineApp.queryStore.queryById(deviceId);
-          lineApp.makeGraphicCenterShow(faultDevice);
+        centerFaultDevice();
       }
     } catch (error) {
       console.warn('未找到具体故障设备');
     }
-    }
   }, 1000);
 });
 
+function onResize() {
+  const dom = document.getElementById('line-app-container');
+  if (dom) {
+    dom.style.width = props.sizeWidth + 'px';
+    dom.style.height = props.sizeHeight + 50 + 'px';
+  }
+}
+
+function centerFaultDevice() {
+  const deviceId = lineNetStore.alarmInfo[0].locator_device_id;
+  const faultDevice = lineApp.queryStore.queryById(deviceId);
+  lineApp.makeGraphicCenterShow(faultDevice);
+}
+
 onUnmounted(() => {
   lineStore.destroy();
 });

src/router/routes.ts

@@ -112,6 +112,17 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    path: '/alarmList',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      {
+        path: '',
+        name: 'alarmList',
+        component: () => import('src/pages/AlarmInfoList.vue'),
+      },
+    ],
+  },
 
   // Always leave this as last one,
   // but you can also remove it