预警助手交互

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

@@ -14,6 +14,7 @@ export const useShipMapStore = defineStore('shipMap', () => {
   const state: any = reactive({
     warningOpen: true,
     warningInfo: {},
+    warningParams: {},
     map: null,
     mapFunc: null,
     zoom: 0,
@@ -24,56 +25,57 @@ export const useShipMapStore = defineStore('shipMap', () => {
       overlayTrack: null,
     },
     trackHoverData: null,
-    trackMap: new Map([['123', {
-      data: {
-        targetSourceJson: '[]'
-      },
-      color: randomColor(1),
-      history: [],
-      real: [{}],
-      trackId: '123',
-      moveToTrack: () => {},
-      // 直接用图层的话declutter: true会报错,Uncaught TypeError: Failed to execute 'clip' on 'CanvasRenderingContext2D': parameter 1 is not of type 'Path2D'.
-      lineLayer: 'lineLayer_' + 123,
-      pointsLayer: 'pointsLayer_' + 123,
-      del: () => {},
-      visibleTrack: (visible) => {},
-      refreshTrackStyle: () => {},
-      showTrack: true,
-      showArchive: true,
-      archiveLayout: {
-        width: 480,
-        top: 10,
-        left: 200
-      },
-      archiveParams: {
-        tab: 1,
-      }
-    }]])
+    trackMap: new Map()
+    //   [['123', {
+    //   data: {
+    //     targetSourceJson: '[]'
+    //   },
+    //   color: randomColor(1),
+    //   history: [],
+    //   real: [{}],
+    //   trackId: '123',
+    //   moveToTrack: () => {},
+    //   // 直接用图层的话declutter: true会报错,Uncaught TypeError: Failed to execute 'clip' on 'CanvasRenderingContext2D': parameter 1 is not of type 'Path2D'.
+    //   lineLayer: 'lineLayer_' + 123,
+    //   pointsLayer: 'pointsLayer_' + 123,
+    //   del: () => {},
+    //   visibleTrack: (visible) => {},
+    //   refreshTrackStyle: () => {},
+    //   showTrack: true,
+    //   showArchive: true,
+    //   archiveLayout: {
+    //     width: 480,
+    //     top: 10,
+    //     left: 200
+    //   },
+    //   archiveParams: {
+    //     tab: 1,
+    //   }
+    // }]]
   })
   const initMap = (map, mapFunc, {trackPointDom}) => {
     state.map = map
     state.mapFunc = mapFunc
     state.zoom = state.map.getView().getZoom()
-    state.map.on('movestart', e => {
-      map.un('pointermove', mapPointerMove)
-      map.un('singleclick', mapSingleClick)
-    })
-    state.map.on('moveend', e => {
-      state.trackHover = new Date().getTime()
-      state.zoom = e.map.getView().getZoom()
-      switchZoom()
-      map.on('singleclick', mapSingleClick)
-      map.on('pointermove', mapPointerMove)
-    })
-    state.ws.overlayTrack = new ol.Overlay({
-      element: trackPointDom,
-      autoPan: false,
-      offset: [0, -22],
-      positioning: 'bottom-center',
-      stopEvent: true,
-    })
-    state.map.addOverlay(state.ws.overlayTrack)
+    // state.map.on('movestart', e => {
+    //   map.un('pointermove', mapPointerMove)
+    //   map.un('singleclick', mapSingleClick)
+    // })
+    // state.map.on('moveend', e => {
+    //   state.trackHover = new Date().getTime()
+    //   state.zoom = e.map.getView().getZoom()
+    //   switchZoom()
+    //   map.on('singleclick', mapSingleClick)
+    //   map.on('pointermove', mapPointerMove)
+    // })
+    // state.ws.overlayTrack = new ol.Overlay({
+    //   element: trackPointDom,
+    //   autoPan: false,
+    //   offset: [0, -22],
+    //   positioning: 'bottom-center',
+    //   stopEvent: true,
+    // })
+    // state.map.addOverlay(state.ws.overlayTrack)
     // 预警助手
     initWarningWS()
   }
@@ -383,7 +385,6 @@ export const useShipMapStore = defineStore('shipMap', () => {
     });
     state.ws.layerShip.setSource(vectorSource)
   }
-
   const mockWarningWS = () => {
     state.warningInfo = {
       name: v4(),
@@ -391,6 +392,11 @@ export const useShipMapStore = defineStore('shipMap', () => {
     }
   }
   const initWarningWS = () => {
+    setInterval(() => {
+      if (state.warningOpen) {
+        mockWarningWS()
+      }
+    }, 1000)
   }
   return {
     ...toRefs(state),

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

@@ -68,6 +68,9 @@ const resize = (layout) => {
 const setZ = () => {
   state.zIndex = appStore.getZIndex()
 }
+defineExpose({
+  setZ,
+})
 </script>
 <style scoped lang="scss">
 .drag-window {

src/views/web/index.vue

@@ -82,7 +82,7 @@
       <trackPointCom ref="ref_trackPoint"/>
       <trackArchiveCom/>
     </div>
-    <assistantCom v-if="state.map" v-model:show="state.showAssistant" :mapHeight="state.mapFunc?.mapHeight"/>
+    <assistantCom v-if="state.map" :mapHeight="state.mapFunc?.mapHeight"/>
     <div class="layout-foot"></div>
   </div>
 </template>
@@ -110,7 +110,6 @@ const state: any = reactive({
     showWarning: false,
     showExample: false,
   },
-  showAssistant: false
 })
 const ref_web = ref()
 const ref_trackPoint = ref()
@@ -122,9 +121,6 @@ const mapLoad = (map, mapFunc) => {
   state.map = map
   state.mapFunc = mapFunc
   // ShipMapStore.initMap(state.map, state.mapFunc, {trackPointDom: ref_trackPoint.value.$el})
-  nextTick(() => {
-    state.showAssistant = true
-  })
 }
 const mapParamsListener = (p) => {
   ref_web.value?.style.setProperty('--easy-map-height',  p.resizeMapHeight + 'px')

src/views/web/warning/assistant.vue

@@ -1,16 +1,16 @@
 <template>
   <DragWindow
     ref="ref_assistant"
-    v-if="show"
-    @onClose="$emit('update:show', false)"
+    v-if="state.show"
+    @onClose="state.show = false"
     title="预警详情"
     v-model:layout="state.layout"
     close
   >
-    <div class="assistant" v-if="show" v-loading="state.loading">
+    <div class="assistant" v-if="state.show" v-loading="state.loading">
       <div class="title">
-        北斗终端异常古
-        <div class="__hover">查看详情</div>
+        {{ infoCpt.name }}
+        <div class="__hover" @click="onWarningInfo">查看详情</div>
       </div>
       <div class="target">琼海123456</div>
       <div class="content">
@@ -19,7 +19,7 @@
         </div>
         <div class="infos">
           <div>预警时间</div>
-          <div>2024-02-22 12:33:44</div>
+          <div>{{ infoCpt.time }}</div>
           <div>预警区域</div>
           <div>海口海域</div>
         </div>
@@ -38,11 +38,10 @@ const DictionaryStore = useDictionaryStore()
 const ShipMapStore = useShipMapStore()
 const {proxy} = getCurrentInstance()
 const props = defineProps({
-  show: {},
-  mapFunc: {},
   mapHeight: {},
 })
 const state: any = reactive({
+  show: false,
   layout: {
     width: 506,
     left: 85,
@@ -50,10 +49,20 @@ const state: any = reactive({
   },
 })
 const ref_assistant = ref()
-watch(() => props.show, (n) => {
+const infoCpt = computed(() => ShipMapStore.warningInfo)
+watch(() => infoCpt.value, (n) => {
   if (n) {
+    state.show = true
+    ref_assistant.value?.setZ()
   }
 })
+const onWarningInfo = () => {
+  ShipMapStore.$patch((state) => {
+    state.warningParams = {
+      text: infoCpt.value.name,
+    }
+  })
+}
 onMounted(() => {
 })
 </script>

src/views/web/warning/index.vue

@@ -152,6 +152,8 @@ import {useDictionaryStore, useShipMapStore} from "@/stores";
 import {warnRecordList} from "@/api/modules/web/record";
 import {ElMessage} from "element-plus";
 
+const emit = defineEmits(['update:show'])
+
 const DictionaryStore = useDictionaryStore()
 const ShipMapStore = useShipMapStore()
 const {proxy} = getCurrentInstance()
@@ -237,6 +239,15 @@ const onMore = () => {
   state.more.layout.left = state.layout.width + state.layout.left + 20
   state.more.show = true
 }
+watch(() => ShipMapStore.warningParams, (n) => {
+  if (n) {
+    onReset()
+    state.query.form.ruleName = n.text
+    emit('update:show', true)
+    onMore()
+    onSearch()
+  }
+})
 onMounted(() => {
   warnModelRuleTree().then(res => {
     DictionaryStore.initOtherDict('warningModel', res.data.map(v => {