预警记录

src/api/modules/web/record.ts

@@ -0,0 +1,10 @@
+import { handle } from '../../index'
+
+const suffix = 'sww-api'
+
+// 分页获取预警记录
+export const warnRecordList = (params: any) => handle({
+  url: `/${suffix}/warn/record/list`,
+  method: 'post',
+  params
+})

src/components/cus/cus-form-link/input.vue

@@ -8,7 +8,7 @@
       @keyup.enter.native="$emit('emitEnter')"
       :disabled="$util.isValue($attrs.disabled) ? $attrs.disabled : formView"
       :title="paramVal"
-      @blur="() => paramVal = String(paramVal).trim()"
+      @blur="() => paramVal = paramVal ? String(paramVal).trim() : ''"
   >
     <template v-if="$slots.prefix" #prefix>
       <slot name="prefix"/>

src/stores/dictionary-other-define.ts

@@ -1,6 +1,7 @@
 export const dictionaryOtherDefine = {
 	//非字典接口的数据项，针对各业务功能内频繁需要调用的，尽量避免多余参数来回传递
 	warningArea: ['warningAreaList', 'warningAreaMap', 'warningAreaObjMap'],	// 预警区域
+	warningModel: ['warningModelList', 'warningModelMap', 'warningModelObjMap'],	// 预警模型
 }
 
 const stateMap = {}

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

@@ -11,6 +11,7 @@ import {formatPosition, getShapeView} from "@/utils/easyMap";
 
 export const useShipMapStore = defineStore('shipMap', () => {
   const state: any = reactive({
+    warningOpen: true,
     map: null,
     mapFunc: null,
     zoom: 0,

src/style/cus.scss

@@ -421,7 +421,7 @@ em {
         }
         .el-select__wrapper {
           box-shadow: unset;
-          border: 1px solid #1A56D4;
+          //border: 1px solid #1A56D4;
           background-color: transparent;
           color: #FFFFFF;
           .el-select__selected-item {

src/views/web/config/index.vue

@@ -421,6 +421,8 @@ $mapHeight: var(--easy-map-height);
     :deep(.search) {
       .el-input-group__append {
         padding: 0;
+        background-color: transparent;
+        box-shadow: none;
         .search-btn {
           width: 80px;
           height: 100%;

src/views/web/config/rule-detail.vue

@@ -231,15 +231,6 @@ const initDetail = () => {
     }
   })
 }
-const initArea = () => {
-  warnAreaQueryAll().then(res => {
-    DictionaryStore.initOtherDict('warningArea', res.data.map(v => {
-      v.dictLabel = v.name
-      v.dictValue = v.id
-      return v
-    }))
-  })
-}
 watch(() => props.show, (n) => {
   if (n) {
     state.loading = true
@@ -286,10 +277,15 @@ const onAreaMap = (areas) => {
   state.areaMap.show = true
 }
 onMounted(() => {
-  initArea()
+  warnAreaQueryAll().then(res => {
+    DictionaryStore.initOtherDict('warningArea', res.data.map(v => {
+      v.dictLabel = v.name
+      v.dictValue = v.id
+      return v
+    }))
+  })
 })
 const initDictionary = () => {
-  // DictionaryStore.initDict('format_type')
 }
 </script>
 

src/views/web/warning/index.vue

@@ -8,6 +8,12 @@
     close
     expend
   >
+    <template #buttons>
+      <div class="warning-open __hover" :class="{active: ShipMapStore.warningOpen}" @click="ShipMapStore.$patch((state) => state.warningOpen = !state.warningOpen)">
+        预警助手
+        <div class="bg"/>
+      </div>
+    </template>
     <div class="warning" v-if="show" v-loading="state.loading">
       <CusForm
         labelWidth="60px"
@@ -17,11 +23,11 @@
         <CusFormColumn
             :span="16"
             labelWidth="0px"
-            v-model:param="state.text"
+            v-model:param="state.query.form.targetName"
             class="search"
         >
           <template #append>
-            <div class="search-btn __hover" @click="onSearch()">搜索</div>
+            <div class="search-btn __hover" @click="onSearch">搜索</div>
           </template>
         </CusFormColumn>
         <div class="reset-button __hover" @click="onReset">重置</div>
@@ -35,12 +41,12 @@
               <div class="target">
                 <SvgIcon name="warning" color="#FF0D0D"/>
                 船名号
-                <SvgIcon name="focus" color="#6899FA" class="__hover" style="margin-left: auto"/>
+                <SvgIcon name="focus" color="#ffffff" class="__hover" style="margin-left: auto"/>
               </div>
               <div class="target">
                 <SvgIcon name="warning" color="#FF0D0D"/>
                 批次号
-                <SvgIcon name="focus" color="#6899FA" class="__hover" style="margin-left: auto"/>
+                <SvgIcon name="focus" color="#ffffff" class="__hover" style="margin-left: auto"/>
               </div>
               <div class="info">
                 <div class="info-img">
@@ -97,38 +103,45 @@
           <CusFormColumn
               :span="24"
               label="预警模型"
-              v-model:param="state.query.form.endTime"
+              v-model:param="state.query.form.modelId"
+              link="select"
+              :options="DictionaryStore.warningModelList"
           />
           <CusFormColumn
               :span="24"
               label="预警规则"
-              v-model:param="state.query.form.endTime"
+              v-model:param="state.query.form.ruleName"
           />
           <CusFormColumn
               :span="24"
               label="船名号"
-              v-model:param="state.query.form.endTime"
+              v-model:param="state.query.form.targetName"
           />
           <CusFormColumn
               :span="24"
               label="融合批次号"
-              v-model:param="state.query.form.endTime"
+              v-model:param="state.query.form.mergeTarget"
           />
           <CusFormColumn
               :span="24"
               label="北斗终端号"
-              v-model:param="state.query.form.endTime"
+              v-model:param="state.query.form.beidouId"
           />
           <CusFormColumn
               :span="24"
               label="MMSI"
-              v-model:param="state.query.form.endTime"
+              v-model:param="state.query.form.mmsi"
+          />
+          <CusFormColumn
+              :span="24"
+              label="雷达批次号"
+              v-model:param="state.query.form.radarTargetId"
           />
         </CusForm>
       </div>
       <div class="more-buttons">
-        <div class="cancel __hover">取消</div>
-        <div class="submit __hover">搜索</div>
+        <div class="cancel __hover" @click="onReset">重置</div>
+        <div class="submit __hover" @click="onSearch">搜索</div>
       </div>
     </div>
   </DragWindow>
@@ -137,8 +150,13 @@
 <script setup lang="ts">
 import {computed, getCurrentInstance, markRaw, onMounted, reactive, ref, watch} from "vue";
 import DragWindow from '../components/drag-window.vue'
-import { Search, Refresh } from "@element-plus/icons-vue";
+import {warnModelRuleTree} from "@/api/modules/web/model";
+import {useDictionaryStore, useShipMapStore} from "@/stores";
+import {warnRecordList} from "@/api/modules/web/record";
+import {ElMessage} from "element-plus";
 
+const DictionaryStore = useDictionaryStore()
+const ShipMapStore = useShipMapStore()
 const {proxy} = getCurrentInstance()
 const props = defineProps({
   show: {},
@@ -156,11 +174,12 @@ const state: any = reactive({
       pageNum: 1,
       pageSize: 10
     },
-    form: {},
+    form: {
+    },
     formReal: {},
     result: {
       total: 0,
-      data: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},]
+      data: []
     }
   },
   more: {
@@ -175,23 +194,17 @@ const state: any = reactive({
 const ref_warning = ref()
 watch(() => props.show, (n) => {
   if (n) {
-    initData()
+    onSearch()
   }
 })
-const initData = () => {
-  state.loading = true
-  setTimeout(() => {
-    state.loading = false
-  }, 1000)
-}
 const onPage = (pageNum, pageSize) => {
   state.query.page = {
     pageNum: pageNum,
     pageSize: pageSize
   }
   const params = {
-    page: state.query.page.pageNum,
-    size: state.query.page.pageSize,
+    pageNum: state.query.page.pageNum,
+    pageSize: state.query.page.pageSize,
   }
   //  添加表单参数
   for (const [k, v] of Object.entries(state.query.formReal)) {
@@ -200,11 +213,15 @@ const onPage = (pageNum, pageSize) => {
     }
   }
   state.query.loading = true
-  // sysIndexFindIndexByPage(proxy.$util.formatGetParam(params)).then(res => {
-  //   state.query.result.total = res.data.totalElements
-  //   state.query.result.data = res.data.content
-  //   state.query.loading = false
-  // })
+  warnRecordList(params).then(res => {
+    if (res.code == 0) {
+      state.query.result.total = res.total
+      state.query.result.data = res.rows
+      state.query.loading = false
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
 }
 const onSearch = () => {
   state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
@@ -224,7 +241,13 @@ const onMore = () => {
   state.more.show = true
 }
 onMounted(() => {
-  initData()
+  warnModelRuleTree().then(res => {
+    DictionaryStore.initOtherDict('warningModel', res.data.map(v => {
+      v.dictLabel = v.name
+      v.dictValue = v.id
+      return v
+    }))
+  })
 })
 </script>
 
@@ -240,6 +263,8 @@ $mapHeight: var(--easy-map-height);
     :deep(.search) {
       .el-input-group__append {
         padding: 0;
+        background-color: transparent;
+        box-shadow: none;
         .search-btn {
           width: 80px;
           height: 100%;
@@ -276,6 +301,7 @@ $mapHeight: var(--easy-map-height);
     }
   }
   .new-msg {
+    margin-bottom: 10px;
     font-weight: 400;
     font-size: 14px;
     color: #FFFFFF;
@@ -295,33 +321,39 @@ $mapHeight: var(--easy-map-height);
       display: flex;
       flex-direction: column;
       .item {
-        background-color: rgba(67,123,250,0.01);
-        box-shadow: inset 0px 0px 10px 0px rgba(64,122,255,0.45);
-        border-radius: 2px;
-        border: 1px solid rgba(50,136,255,0.6);
-        padding: 10px;
         display: flex;
         flex-direction: column;
+        border-bottom: 3px solid rgba(255, 255, 255, 0.2);
+        padding: 24px 0;
+        &:first-child {
+          padding-top: 0;
+        }
         .target {
+          height: 48px;
           display: flex;
           align-items: center;
+          background: rgba(88,148,235,0.2);
+          border-radius: 8px;
+          padding: 0 12px;
           font-weight: 400;
-          font-size: 14px;
-          color: #6899FA;
-          background-color: rgba(23,40,75,0.5);
-          border-radius: 0px 35px 35px 0px;
-          padding: 4px 6px;
+          font-size: 20px;
+          color: #FFFFFF;
+          .svg-icon:first-child {
+            margin-right: 12px;
+          }
           &:not(&:first-child) {
             margin-top: 8px;
           }
         }
         .info {
           display: flex;
-          margin-top: 8px;
+          margin-top: 16px;
           .info-img {
-            width: 88px;
-            height: 58px;
-            margin-right: 10px;
+            width: 144px;
+            height: 100px;
+            margin-right: 15px;
+            border-radius: 4px;
+            border: 1px solid #AED0FF;
             >img {
               width: 100%;
               height: 100%;
@@ -329,9 +361,11 @@ $mapHeight: var(--easy-map-height);
           }
           .info-detail {
             font-weight: 400;
-            font-size: 12px;
+            font-size: 16px;
             color: #FFFFFF;
-            line-height: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
           }
         }
       }
@@ -376,4 +410,31 @@ $mapHeight: var(--easy-map-height);
     }
   }
 }
+.warning-open {
+  margin-left: auto;
+  width: 94px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 16px;
+  color: #FFFFFF;
+  margin-right: 8px;
+  position: relative;
+  .bg {
+    border-radius: 4px;
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: skew(-10deg);
+    background-image: linear-gradient(0deg, rgb(255, 255, 255, 0.3), rgb(255, 255, 255, 0.3));
+  }
+  &.active {
+    .bg {
+      background-image: linear-gradient(0deg, rgba(47, 188, 205, 1), rgba(148, 214, 180, 1));
+    }
+  }
+}
 </style>