樣式

src/api/modules/web/rule.ts

@@ -0,0 +1,9 @@
+import { handle } from '../../index'
+
+const suffix = 'sww-api'
+
+// 获取模型规则树
+export const warnModelRuleTree = () => handle({
+  url: `/${suffix}/warn/model/ruletree`,
+  method: 'get',
+})

src/style/cus.scss

@@ -433,7 +433,7 @@ em {
           }
         }
         .el-date-editor {
-          padding: 0 4px;
+          //padding: 0 4px;
           &.el-date-editor--datetimerange {
             .el-range-input {
               font-size: 12px;
@@ -643,6 +643,7 @@ em {
   font-size: 16px;
 }
 .el-form-item__content {
+  align-items: unset !important;
   .unit {
     color: #ffffff !important;
     font-size: 16px !important;

src/views/web/config/index.vue

@@ -101,6 +101,7 @@ import * as layer from "ol/layer";
 import * as format from "ol/format";
 import * as source from "ol/source";
 import * as style from "ol/style";
+import {warnModelRuleTree} from "@/api/modules/web/rule";
 
 const {proxy} = getCurrentInstance()
 const emit = defineEmits(['update:show'])
@@ -146,25 +147,9 @@ watch(() => props.show, (n) => {
 const initData = () => {
   state.loading = true
   if (state.tab == 1) {
-    setTimeout(() => {
-      const arr = []
-      for (let i = 0; i <= 5; i++) {
-        const obj = {
-          id: i + '',
-          label: '模型' + i,
-          children: []
-        }
-        for (let k = 1; k <= i; k++) {
-          obj.children.push({
-            id: i + '-' + k,
-            label: '规则' + i + '-' + k
-          })
-        }
-        arr.push(obj)
-      }
-      state.rulesList = arr
-      state.loading = false
-    }, 1000)
+    warnModelRuleTree().then(res => {
+
+    })
   } else {
     warnAreaQueryAll().then(res => {
       state.areaList = res.data

src/views/web/warning/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DragWindow
+    ref="ref_warning"
     v-if="show"
     @onClose="$emit('update:show', false)"
     title="预警记录(0000条)"
@@ -14,22 +15,17 @@
         @handleEnter="onSearch()"
       >
         <CusFormColumn
-          :span="20"
-          labelWidth="0px"
-          v-model:param="state.text"
-        />
-        <el-col :span="4" style="display: flex;">
-          <div class="search-btn" @click="onSearch()" style="margin-left: auto">
-            <el-icon color="#FFFFFF">
-              <Search />
-            </el-icon>
-          </div>
-          <div class="search-btn" @click="onReset()">
-            <el-icon color="#FFFFFF">
-              <Refresh />
-            </el-icon>
-          </div>
-        </el-col>
+            :span="16"
+            labelWidth="0px"
+            v-model:param="state.text"
+            class="search"
+        >
+          <template #append>
+            <div class="search-btn __hover" @click="onSearch()">搜索</div>
+          </template>
+        </CusFormColumn>
+        <div class="reset-button __hover" @click="onReset">重置</div>
+        <div class="more-button __hover" @click="onMore">更多</div>
       </CusForm>
       <div class="new-msg">xx条新预警，点击<span class="__hover">刷新列表</span></div>
       <div class="list">
@@ -71,6 +67,71 @@
       </div>
     </div>
   </DragWindow>
+  <DragWindow
+      v-if="show && state.more.show"
+      @onClose="state.more.show = false"
+      title="船舶预警高级查询"
+      v-model:layout="state.more.layout"
+      close
+      expend
+  >
+    <div class="more" v-if="show && state.more.show">
+      <div class="form">
+        <CusForm
+            labelWidth="100px"
+            class="__cus-form_map"
+            @handleEnter="onSearch()"
+        >
+          <CusFormColumn
+              :span="24"
+              label="预警开始时间"
+              v-model:param="state.query.form.startTime"
+              link="datetime"
+          />
+          <CusFormColumn
+              :span="24"
+              label="预警结束时间"
+              v-model:param="state.query.form.endTime"
+              link="datetime"
+          />
+          <CusFormColumn
+              :span="24"
+              label="预警模型"
+              v-model:param="state.query.form.endTime"
+          />
+          <CusFormColumn
+              :span="24"
+              label="预警规则"
+              v-model:param="state.query.form.endTime"
+          />
+          <CusFormColumn
+              :span="24"
+              label="船名号"
+              v-model:param="state.query.form.endTime"
+          />
+          <CusFormColumn
+              :span="24"
+              label="融合批次号"
+              v-model:param="state.query.form.endTime"
+          />
+          <CusFormColumn
+              :span="24"
+              label="北斗终端号"
+              v-model:param="state.query.form.endTime"
+          />
+          <CusFormColumn
+              :span="24"
+              label="MMSI"
+              v-model:param="state.query.form.endTime"
+          />
+        </CusForm>
+      </div>
+      <div class="more-buttons">
+        <div class="cancel __hover">取消</div>
+        <div class="submit __hover">搜索</div>
+      </div>
+    </div>
+  </DragWindow>
 </template>
 
 <script setup lang="ts">
@@ -102,7 +163,16 @@ const state: any = reactive({
       data: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},]
     }
   },
+  more: {
+    show: false,
+    layout: {
+      width: 400,
+      left: 585,
+      top: 110
+    }
+  }
 })
+const ref_warning = ref()
 watch(() => props.show, (n) => {
   if (n) {
     initData()
@@ -148,6 +218,11 @@ const onReset = () => {
   state.query.form = {}
   onSearch()
 }
+const onMore = () => {
+  state.more.layout.top = state.layout.top
+  state.more.layout.left = state.layout.width + state.layout.left + 20
+  state.more.show = true
+}
 onMounted(() => {
   initData()
 })
@@ -157,20 +232,47 @@ onMounted(() => {
 $mapHeight: var(--easy-map-height);
 .warning {
   height: calc($mapHeight - 250px);
-  padding: 12px 10px;
+  padding: 20px 24px;
   display: flex;
   flex-direction: column;
   .__cus-form_map {
     margin-bottom: 10px;
-    .search-btn {
-      width: 28px;
-      height: 28px;
-      background: #0062e9;
-      border-radius: 4px 4px 4px 4px;
-      margin-left: 5px;
-      cursor: pointer;
-      text-align: center;
-      line-height: 33px;
+    :deep(.search) {
+      .el-input-group__append {
+        padding: 0;
+        .search-btn {
+          width: 80px;
+          height: 100%;
+          background: linear-gradient(150deg, #2FBCCD, #2467EB);
+          font-weight: 400;
+          font-size: 16px;
+          color: #FFFFFF;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 0px 4px 4px 0px;
+        }
+      }
+    }
+    .reset-button {
+      width: 64px;
+      height: 40px;
+      background: #6FA2EA;
+      border-radius: 4px;
+      font-weight: 400;
+      font-size: 16px;
+      color: #FFFFFF;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 8px;
+    }
+    .more-button {
+      font-weight: 400;
+      font-size: 16px;
+      color: #FFFFFF;
+      line-height: 40px;
+      margin: 0 auto;
     }
   }
   .new-msg {
@@ -240,4 +342,38 @@ $mapHeight: var(--easy-map-height);
     }
   }
 }
+.more {
+  padding: 26px 24px;
+  .form {
+    background: rgba(88, 148, 235, 0.2);
+    border-radius: 8px;
+    padding: 26px 54px 10px 0;
+    .cus-form-column {
+      margin-bottom: 16px;
+    }
+  }
+  .more-buttons {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    margin-top: 22px;
+    >div {
+      width: 65px;
+      height: 40px;
+      background: #6FA2EA;
+      border-radius: 4px;
+      font-weight: 400;
+      font-size: 16px;
+      color: #FFFFFF;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &.submit {
+        background-color: #4996FF;
+      }
+    }
+  }
+}
 </style>

yarn.lock

@@ -3765,7 +3765,7 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-ol@^9.2.2:
+ol@^9.2.4:
   version "9.2.4"
   resolved "https://registry.npmmirror.com/ol/-/ol-9.2.4.tgz#07dcefdceb66ddbde13089bca136f4d4852b772b"
   integrity sha512-bsbu4ObaAlbELMIZWnYEvX4Z9jO+OyCBshtODhDKmqYTPEfnKOX3RieCr97tpJkqWTZvyV4tS9UQDvHoCdxS+A==