预警助手

src/stores/ship-map/ship-map.ts

@@ -91,7 +91,7 @@ export const useShipMapStore = defineStore('shipMap', () => {
     })
     state.map.addOverlay(state.ws.overlayTrack)
     // 预警助手
-    // initWarningWS()
+    initWarningWS()
   }
   const mapPointerMove = (ev) => {
     let pixel = ev.pixel
@@ -400,22 +400,61 @@ export const useShipMapStore = defineStore('shipMap', () => {
     });
     state.ws.layerShip.setSource(vectorSource)
   }
-  const mockWarningWS = () => {
-    state.warningInfo = {
-      name: v4(),
-      time: new Date().getTime(),
-    }
-  }
   const initWarningWS = () => {
-    setInterval(() => {
+    // const js = {
+    //   "createBy" : "admin",
+    //   "createTime" : "2025-01-14 11:19:26",
+    //   "updateBy" : "admin",
+    //   "updateTime" : "2025-01-14 11:19:26",
+    //   "id" : "0b3bae57-c422-4b5e-a700-860e346755b1",
+    //   "modelCode" : "TJ_CB_00_01",
+    //   "modelId" : "1",
+    //   "ruleId" : "d4dde331749847618f163e6a0c25472d",
+    //   "ruleName" : "北斗终端异常-10分钟",
+    //   "modelName" : "北斗终端异常",
+    //   "warnTime" : "2025-01-14 11:10:18.464",
+    //   "dynamicShipList" : [ {
+    //     "mergeId" : "814640307768528896",
+    //     "mergeTarget" : "100000000015005642",
+    //     "mergeTime" : "2025-01-14 11:00:18.176",
+    //     "mergeType" : "BEIDOU",
+    //     "targetName" : "万0308014",
+    //     "targetShipType" : "30",
+    //     "targetNationality" : "412",
+    //     "targetSpeed" : 0.0,
+    //     "targetCourse" : 0.0,
+    //     "targetLongitude" : 110.390722,
+    //     "targetLatitude" : 18.704444,
+    //     "targetLength" : 13.7,
+    //     "targetSource" : [ {
+    //       "id" : "1724073477",
+    //       "time" : "2025-01-14 11:00:14",
+    //       "type" : "BEIDOU",
+    //       "signalLoss" : false,
+    //       "trackDeviceNo" : "15005642",
+    //       "trackId" : "15005642"
+    //     } ]
+    //   } ]
+    // }
+    // setTimeout(() => {
+    //   state.warningInfo = js
+    // }, 1000)
+    const ws = new WebSocket(`ws://${location.host}/ws-api/shipwarnrecord`)
+    ws.onopen = (e) => {
+    }
+    ws.onmessage = (e) => {
       if (state.warningOpen) {
-        mockWarningWS()
+        try {
+          const json = JSON.parse(e.data)
+          console.log(json)
+          state.warningInfo = json
+        } catch (e) {
+        }
       }
-    }, 1000)
+    }
   }
   return {
     ...toRefs(state),
     initMap,
-    mockWarningWS,
   }
 })

src/views/web/components/drag-window.vue

@@ -41,7 +41,7 @@ import VueDragResize from '@/components/vue-drag-resize/index.vue'
 import {useAppStore} from "@/stores";
 
 const {proxy} = getCurrentInstance()
-const emit = defineEmits(['update:layout'])
+const emit = defineEmits(['update:layout', 'onClose'])
 const appStore = useAppStore()
 const props = defineProps({
   title: {default: ''},

src/views/web/warning/assistant.vue

@@ -9,19 +9,24 @@
   >
     <div class="assistant" v-if="state.show" v-loading="state.loading">
       <div class="title">
-        {{ infoCpt.name }}
+        {{ infoCpt.ruleName }}
         <div class="__hover" @click="onWarningInfo">查看详情</div>
       </div>
-      <div class="target">琼海123456</div>
+      <template v-for="item in infoCpt.dynamicShipList">
+        <div class="target" v-if="item.targetName">{{item.targetName}}（{{item.mergeTarget}}）</div>
+        <div class="target" v-else>{{item.mergeTarget}}</div>
+      </template>
       <div class="content">
         <div class="img">
           <img src="@/assets/images/web/ship.png">
         </div>
         <div class="infos">
           <div>预警时间</div>
-          <div>{{ infoCpt.time }}</div>
+          <div>{{ infoCpt.warnTime }}</div>
-          <div>预警区域</div>
+          <template v-if="infoCpt.areaName">
-          <div>海口海域</div>
+            <div>预警区域</div>
+            <div>{{ infoCpt.areaName }}</div>
+          </template>
         </div>
       </div>
     </div>
@@ -59,7 +64,9 @@ watch(() => infoCpt.value, (n) => {
 const onWarningInfo = () => {
   ShipMapStore.$patch((state) => {
     state.warningParams = {
-      text: infoCpt.value.name,
+      ruleName: infoCpt.value.ruleName,
+      mergeTarget: infoCpt.value.dynamicShipList[0]?.mergeTarget,
+      warnTime: infoCpt.value.warnTime,
     }
   })
 }

src/views/web/warning/index.vue

@@ -34,7 +34,7 @@
         <div class="more-button __hover" @click="onMore">更多</div>
       </CusForm>
 <!--      <div class="new-msg">xx条新预警，点击<span class="__hover">刷新列表</span></div>-->
-      <div class="list">
+      <div class="list" v-loading="state.query.loading">
         <div class="list-content">
           <template v-for="item in state.query.result.data">
             <div class="item">
@@ -52,7 +52,7 @@
                 <div class="info-detail">
                   <div class="info-item">预警名称：<div>{{item.ruleName}}</div></div>
                   <div class="info-item">预警时间：<div>{{$util.YMDHms(item.warnTime)}}</div></div>
-                  <div class="info-item">预警区域：<div>{{item.areaName}}</div><span class="__hover" style="color: #1CFEFF; margin-left: 10px"><SvgIcon name="eye" color="#ffffff"/></span></div>
+                  <div class="info-item">预警区域：<div>{{item.areaName}}</div><span class="__hover" style="color: #1CFEFF; margin-left: 10px;margin-right: 10px;"><SvgIcon name="eye" color="#ffffff"/></span></div>
                 </div>
               </div>
             </div>
@@ -151,6 +151,7 @@ import {warnModelRuleTree} from "@/api/modules/web/model";
 import {useDictionaryStore, useShipMapStore} from "@/stores";
 import {warnRecordList} from "@/api/modules/web/record";
 import {ElMessage} from "element-plus";
+import {YMDHms} from "@/utils/util";
 
 const emit = defineEmits(['update:show'])
 
@@ -242,7 +243,10 @@ const onMore = () => {
 watch(() => ShipMapStore.warningParams, (n) => {
   if (n) {
     onReset()
-    state.query.form.ruleName = n.text
+    state.query.form.ruleName = n.ruleName
+    state.query.form.mergeTarget = n.mergeTarget
+    state.query.form.startTime = YMDHms(n.warnTime)
+    state.query.form.endTime = YMDHms(n.warnTime)
     emit('update:show', true)
     onMore()
     onSearch()
@@ -397,6 +401,7 @@ $mapHeight: var(--easy-map-height);
       }
     }
     .list-page {
+      margin-top: 10px;
       display: flex;
       justify-content: flex-end;
     }