规则配置

src/api/modules/web/model.ts

@@ -8,3 +8,8 @@ export const warnModelDetail = (params: any) => handle({
   method: 'get',
   params
 })
+// 获取模型规则树
+export const warnModelRuleTree = () => handle({
+  url: `/${suffix}/warn/model/ruletree`,
+  method: 'get',
+})

src/api/modules/web/rule.ts

@@ -2,8 +2,33 @@ import { handle } from '../../index'
 
 const suffix = 'sww-api'
 
-// 获取模型规则树
-export const warnModelRuleTree = () => handle({
-  url: `/${suffix}/warn/model/ruletree`,
+// 新增预警规则
+export const warnRuleAdd = (params: any) => handle({
+  url: `/${suffix}/warn/rule/add`,
+  method: 'post',
+  params
+})
+// 编辑预警规则
+export const warnRuleEdit = (params: any) => handle({
+  url: `/${suffix}/warn/rule/edit`,
+  method: 'post',
+  params
+})
+// 详情预警规则
+export const warnRuleDetail = (params: any) => handle({
+  url: `/${suffix}/warn/rule/detail`,
   method: 'get',
+  params
+})
+// 启用/停用预警规则
+export const warnRuleStatus = (params: any) => handle({
+  url: `/${suffix}/warn/rule/status`,
+  method: 'post',
+  params
+})
+// 删除预警规则
+export const warnRuleDelete = (params: any) => handle({
+  url: `/${suffix}/warn/rule/delete`,
+  method: 'post',
+  params
 })

src/stores/dictionary-other-define.ts

@@ -1,9 +1,6 @@
 export const dictionaryOtherDefine = {
 	//非字典接口的数据项，针对各业务功能内频繁需要调用的，尽量避免多余参数来回传递
-	itemType: ['itemTypeList', 'itemTypeMap', 'itemTypeObjMap'],	// 事项类型
-	jgType: ['jgTypeList', 'jgTypeMap', 'jgTypeObjMap'],	// 结果类型
-	gsPlug: ['gsPlugList', 'gsPlugMap', 'gsPlugObjMap'],	// 归属插件
-	jxPlug: ['jxPlugList', 'jxPlugMap', 'jxPlugObjMap'],  // 解析插件
+	warningArea: ['warningAreaList', 'warningAreaMap', 'warningAreaObjMap'],	// 预警区域
 }
 
 const stateMap = {}

src/stores/dictionary.ts

@@ -20,29 +20,29 @@ export const useDictionaryStore = defineStore('dictionary', {
 			{dictLabel: '必选配置', dictValue: 2},
 		],
 		warningLevelList: [
-			{dictLabel: '高', dictValue: '1'},
-			{dictLabel: '中', dictValue: '2'},
-			{dictLabel: '低', dictValue: '3'},
+			{dictLabel: '高', dictValue: 1},
+			{dictLabel: '中', dictValue: 2},
+			{dictLabel: '低', dictValue: 3},
 		],
 		warningRuleList: [
-			{dictLabel: '预警区域', dictValue: '1'},
-			{dictLabel: '白名单区域', dictValue: '2'},
+			{dictLabel: '预警区域', dictValue: 1},
+			{dictLabel: '白名单区域', dictValue: 2},
 		],
 		shipTypeList: [
-			{dictLabel: '渔船', dictValue: '1'},
-			{dictLabel: '加油船舶', dictValue: '2'},
-			{dictLabel: '游艇', dictValue: '3'},
-			{dictLabel: '渔业捕捞船', dictValue: '4'},
-			{dictLabel: '渔业辅助船', dictValue: '5'},
-			{dictLabel: '货船', dictValue: '6'},
-			{dictLabel: '客船', dictValue: '7'},
-			{dictLabel: '文体船', dictValue: '8'},
-			{dictLabel: '加冰加水船', dictValue: '9'},
-			{dictLabel: '其他船舶', dictValue: '10'},
+			{dictLabel: '渔船', dictValue: 1},
+			{dictLabel: '加油船舶', dictValue: 2},
+			{dictLabel: '游艇', dictValue: 3},
+			{dictLabel: '渔业捕捞船', dictValue: 4},
+			{dictLabel: '渔业辅助船', dictValue: 5},
+			{dictLabel: '货船', dictValue: 6},
+			{dictLabel: '客船', dictValue: 7},
+			{dictLabel: '文体船', dictValue: 8},
+			{dictLabel: '加冰加水船', dictValue: 9},
+			{dictLabel: '其他船舶', dictValue: 10},
 		],
 		certTypeList: [
-			{dictLabel: '持证船舶', dictValue: '1'},
-			{dictLabel: '不持证船舶', dictValue: '2'},
+			{dictLabel: '持证船舶', dictValue: 1},
+			{dictLabel: '不持证船舶', dictValue: 2},
 		],
 		importantList: [
 			{dictLabel: '是', dictValue: true},

src/style/cus.scss

@@ -630,13 +630,13 @@ em {
 .el-form-item {
   min-height: 40px !important;
   .el-form-item__label {
-    height: 40px !important;
+    min-height: 40px !important;
   }
   .el-input__wrapper {
-    height: 40px !important;
+    min-height: 40px !important;
   }
   .el-select__wrapper {
-    height: 40px !important;
+    min-height: 40px !important;
   }
 }
 .el-form-item__label {
@@ -672,6 +672,7 @@ em {
     border: 1px solid rgba(174, 208, 255, 1) !important;
     font-size: 16px !important;
     background-color: transparent !important;
+    color: #ffffff !important;
   }
   &.is-disabled {
     .el-textarea__inner {
@@ -686,6 +687,9 @@ em {
   .el-select__selected-item:not(.is-transparent) {
     color: #ffffff !important;
     font-size: 16px !important;
+    .el-select__input {
+      color: #ffffff !important;
+    }
   }
 }
 .el-radio-group {

src/views/web/archive/detail.vue

@@ -137,19 +137,27 @@ const onSubmit = () => {
       const params = {...state.form}
       if (props.transfer.mode === 'add') {
         shipArchiveAdd(params).then(res => {
-          ElMessage.success('新增成功！')
-          emit('update:show', false)
-          emit('refresh')
-          state.loading = false
+          if (res.code == 0) {
+            ElMessage.success('新增成功！')
+            emit('update:show', false)
+            emit('refresh')
+            state.loading = false
+          } else {
+            ElMessage.error(res.msg)
+          }
         }).catch(() => {
           state.loading = false
         })
       } else {
         shipArchiveEdit(params).then(res => {
-          ElMessage.success('编辑成功！')
-          emit('update:show', false)
-          emit('refresh')
-          state.loading = false
+          if (res.code == 0) {
+            ElMessage.success('编辑成功！')
+            emit('update:show', false)
+            emit('refresh')
+            state.loading = false
+          } else {
+            ElMessage.error(res.msg)
+          }
         }).catch(() => {
           state.loading = false
         })
@@ -166,8 +174,12 @@ const onSubmit = () => {
 const initDetail = () => {
   state.loading = true
   shipArchiveDetail(proxy.$util.formatGetParam({id: props.transfer.id})).then(res => {
-    state.form = Object.assign(res.data, {indexUrl: []})
-    state.loading = false
+    if (res.code == 0) {
+      state.form = Object.assign(res.data, {indexUrl: []})
+      state.loading = false
+    } else {
+      ElMessage.error(res.msg)
+    }
   })
 }
 watch(() => props.show, (n) => {

src/views/web/archive/index.vue

@@ -59,10 +59,10 @@
           @handlePage="onPage"
         >
           <template #type-column-value="{scope}">
-            {{DictionaryStore.shipTypeMap.get(String(scope.row.type))}}
+            {{DictionaryStore.shipTypeMap.get(scope.row.type)}}
           </template>
           <template #certType-column-value="{scope}">
-            {{DictionaryStore.certTypeMap.get(String(scope.row.certType))}}
+            {{DictionaryStore.certTypeMap.get(scope.row.certType)}}
           </template>
           <template #important-column-value="{scope}">
             {{DictionaryStore.importantMap.get(scope.row.important)}}
@@ -152,9 +152,13 @@ const onPage = (pageNum, pageSize) => {
   }
   state.query.loading = true
   shipArchiveList(params).then(res => {
-    state.query.result.total = 100
-    state.query.result.data = res.rows
-    state.query.loading = false
+    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 = () => {
@@ -190,9 +194,13 @@ const onDel = (row) => {
   } as any).then(() => {
     state.loading = true
     shipArchiveDelete({id: row.id}).then(res => {
-      ElMessage.success('删除成功！')
-      state.loading = false
-      onSearch()
+      if (res.code == 0) {
+        ElMessage.success('删除成功！')
+        state.loading = false
+        onSearch()
+      } else {
+        ElMessage.error(res.msg)
+      }
     })
   }).catch(() => {})
 }
@@ -208,9 +216,13 @@ const onDelMore = () => {
   } as any).then(() => {
     state.loading = true
     shipArchiveDelete({id: state.query.selected.map(v => v.id).join(',')}).then(res => {
-      ElMessage.success('删除成功！')
-      state.loading = false
-      onSearch()
+      if (res.code == 0) {
+        ElMessage.success('删除成功！')
+        state.loading = false
+        onSearch()
+      } else {
+        ElMessage.error(res.msg)
+      }
     })
   }).catch(() => {})
 }

src/views/web/config/area-form.vue

@@ -100,16 +100,24 @@ export default defineComponent({
           console.log(props.transfer)
           if (props.transfer.mode == 'add') {
             warnAreaAdd(params).then(res => {
-              ElMessage.success('保存成功')
-              emit('pass')
-              emit('update:loading', false)
+              if (res.code == 0) {
+                ElMessage.success('保存成功')
+                emit('pass')
+                emit('update:loading', false)
+              } else {
+                ElMessage.error(res.msg)
+              }
             })
           } else {
             params.id = state.form.id
             warnAreaEdit(params).then(res => {
-              ElMessage.success('保存成功')
-              emit('pass')
-              emit('update:loading', false)
+              if (res.code == 0) {
+                ElMessage.success('保存成功')
+                emit('pass')
+                emit('update:loading', false)
+              } else {
+                ElMessage.error(res.msg)
+              }
             })
           }
 

src/views/web/config/area-map.vue

@@ -25,7 +25,9 @@ import * as style from 'ol/style'
 import * as layer from 'ol/layer'
 import * as source from 'ol/source'
 import * as format from "ol/format";
+import {useDictionaryStore} from "@/stores";
 
+const DictionaryStore = useDictionaryStore()
 const emit = defineEmits(['update:show'])
 const {proxy} = getCurrentInstance()
 const props = defineProps({
@@ -48,28 +50,32 @@ const initArea = () => {
       })
     }
     const feats = []
-    feats.push(new format.WKT().readFeature('POLYGON((108.67917953258203 19.334644670763034,109.31382856610153 19.334644670763034,109.31382856610153 19.716490227095417,108.67917953258203 19.716490227095417,108.67917953258203 19.334644670763034))'))
+    props.transfer.areas.forEach(v => {
+      try {
+        const obj = DictionaryStore.warningAreaObjMap.get(v)
+        const f = new format.WKT().readFeature(obj.location)
+        f.set('__data', obj)
+        feats.push(f)
+      } catch (e) {
+        console.error('异常的预警区域', v)
+      }
+    })
     const _vector = new layer.Vector({
       zIndex: 9999,
       source: new source.Vector({
         features: feats
       }),
-      style: new style.Style({ //图层样式
-        fill: new style.Fill({
-          color: 'rgba(46,129,255,0.15)' //填充颜色
-        }),
-        stroke: new style.Stroke({
-          color: '#2E81FF',  //边框颜色
-          width: 2,   // 边框宽度
-          lineDash: [10, 10]
-        }),
-        image: new style.Circle({
-          radius: 7,
+      style: (f) => {
+        return new style.Style({
+          stroke: new style.Stroke({
+            color: f.get("__data")?.lineColor,
+            width: f.get("__data")?.lineWidth,
+          }),
           fill: new style.Fill({
-            color: '#ffcc33'
-          })
+            color: f.get("__data")?.fillColor,
+          }),
         })
-      })
+      }
     })
     _vector.set('__layerName', 'areaMap')
     state.map.addLayer(_vector)
@@ -84,4 +90,9 @@ watch(() => props.show, (n) => {
 </script>
 
 <style lang="scss" scoped>
+.__cus-dialog-form {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
 </style>

src/views/web/config/index.vue

@@ -46,9 +46,13 @@
           <span>{{ node.label }}</span>
           <span class="tree-buttons">
             <template v-if="node.level > 1">
-              <SvgIcon name="edit" size="12" class="__hover" @click.stop="onAddRule(data)"/>
-              <SvgIcon name="detail_1" size="12" class="__hover" @click.stop="onAddRule(data)"/>
-              <el-switch v-model="data.active" size="small"/>
+              <div class="tree-button __hover" v-if="!data.enabled" @click.stop="onEditRule(data)">
+                  <img src="@/assets/images/web/tree-edit.png"/>
+              </div>
+              <div class="tree-button __hover" v-if="!data.enabled" @click.stop="onDelRule(data)">
+                <img src="@/assets/images/web/tree-del.png"/>
+              </div>
+              <el-switch v-model="data.enabled" @change="onChangeEnabled(data)"/>
             </template>
             <template v-else>
               <div class="img-button __hover" @click.stop="onAddRule(data)"><img src="@/assets/images/web/tree-add.png"/></div>
@@ -88,7 +92,7 @@
           </template>
         </el-tree>
       </template>
-      <ruleDetail v-model:show="state.ruleDetail.show" :transfer="state.ruleDetail.transfer"/>
+      <ruleDetail v-model:show="state.ruleDetail.show" :transfer="state.ruleDetail.transfer" @refresh="onSearch"/>
       <modelDetail v-model:show="state.modelDetail.show" :transfer="state.modelDetail.transfer"/>
     </div>
   </DragWindow>
@@ -105,8 +109,9 @@ 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";
+import {warnModelRuleTree} from "@/api/modules/web/model";
 import modelDetail from './model-detail.vue'
+import {warnRuleDelete, warnRuleStatus} from "@/api/modules/web/rule";
 
 const {proxy} = getCurrentInstance()
 const emit = defineEmits(['update:show'])
@@ -158,23 +163,31 @@ const initData = () => {
   state.loading = true
   if (state.tab == 1) {
     warnModelRuleTree().then(res => {
-      state.rulesList = res.data
-      setTimeout(() => {
-        ref_rulesTree.value?.filter(state.textReal)
-        state.loading = false
-      }, 100)
+      if (res.code == 0) {
+        state.rulesList = res.data
+        setTimeout(() => {
+          ref_rulesTree.value?.filter(state.textReal)
+          state.loading = false
+        }, 100)
+      } else {
+        ElMessage.error(res.msg)
+      }
     })
   } else {
     warnAreaQueryAll().then(res => {
-      state.areaList = res.data
-      state.areaList.forEach(v => {
-        v.show = true
-      })
-      setTimeout(() => {
-        ref_areaTree.value?.filter(state.textReal)
-        state.loading = false
-      }, 100)
-      drawArea()
+      if (res.code == 0) {
+        state.areaList = res.data
+        state.areaList.forEach(v => {
+          v.show = true
+        })
+        setTimeout(() => {
+          ref_areaTree.value?.filter(state.textReal)
+          state.loading = false
+        }, 100)
+        drawArea()
+      } else {
+        ElMessage.error(res.msg)
+      }
     })
   }
 }
@@ -221,13 +234,6 @@ const expendRules = () => {
 const rulesExpandAllCpt = computed(() => {
   return ref_rulesTree.value?.root.childNodes.every(v => v.data.children?.length == 0 || v.expanded)
 })
-const onAddRule = (row) => {
-  console.log(row)
-  state.ruleDetail.transfer = {
-    id: row.id + ''
-  }
-  state.ruleDetail.show = true
-}
 const onAddArea = (row) => {
   const config = {
     mode: 'add',
@@ -273,11 +279,67 @@ const onDelArea = (row) => {
   } as any).then(() => {
     state.loading = true
     warnAreaDelete({id: row.id}).then(res => {
-      ElMessage.success('删除成功！')
-      initData()
+      if (res.code == 0) {
+        ElMessage.success('删除成功！')
+        initData()
+      } else {
+        ElMessage.error(res.msg)
+      }
     })
   }).catch(() => {})
 }
+const onAddRule = (row) => {
+  state.ruleDetail.transfer = {
+    mode: 'add',
+    modelId: row.id,
+  }
+  state.ruleDetail.show = true
+}
+const onEditRule = (row) => {
+  state.ruleDetail.transfer = {
+    mode: 'edit',
+    id: row.id,
+  }
+  state.ruleDetail.show = true
+}
+const onDelRule = (row) => {
+  ElMessageBox.confirm(`请确认是否删除${row.name}?`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  } as any).then(() => {
+    state.loading = true
+    warnRuleDelete({id: row.id}).then(res => {
+      if (res.code == 0) {
+        ElMessage.success(`删除成功！`)
+        onSearch()
+      } else {
+        ElMessage.error(res.msg)
+      }
+    })
+  }).catch(() => {})
+}
+const onChangeEnabled = (row) => {
+  setTimeout(() => {
+    ElMessageBox.confirm(`请确认是否${row.enabled ? '停用' : '启用'}${row.name}?`, "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    } as any).then(() => {
+      state.loading = true
+      warnRuleStatus({id: row.id, enabled: row.enabled}).then(res => {
+        if (res.code == 0) {
+          ElMessage.success(`${row.enabled ? '停用' : '启用'}成功！`)
+          state.loading = false
+        } else {
+          ElMessage.error(res.msg)
+        }
+      })
+    }).catch(() => {
+      row.enabled = !row.enabled
+    })
+  }, 100)
+}
 const onSearch = () => {
   state.textReal = JSON.parse(JSON.stringify(state.text))
   initData()

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

@@ -4,14 +4,14 @@
     :title="titleCpt"
     @onClose="$emit('update:show', false)"
     width="800px"
-    max-height="880px"
+    max-height="80%"
     :show-submit="false"
     :show-close="false"
     :loading="state.loading"
   >
     <div class="__cus-dialog-form">
       <CusForm ref="ref_form" label-width="100px" :formView="true">
-        <div class="__cus-title_1" style="margin-bottom: 20px">模型信息</div>
+        <div class="__cus-title_1">模型信息</div>
         <CusFormColumn
           :span="12"
           required
@@ -56,7 +56,7 @@
           layout="card"
           type="img"
         />
-        <div class="__cus-title_1" style="margin-bottom: 20px">模型参数</div>
+        <div class="__cus-title_1">模型参数</div>
         <div class="params-table" style="width: 100%">
           <CusTable
             :data="state.form.paramDictList"
@@ -114,8 +114,12 @@ const titleCpt = computed(() => {
 const initDetail = () => {
   state.loading = true
   warnModelDetail(proxy.$util.formatGetParam({id: props.transfer.id})).then(res => {
-    state.form = res.data
-    state.loading = false
+    if (res.code == 0) {
+      state.form = res.data
+      state.loading = false
+    } else {
+      ElMessage.error(res.msg)
+    }
   })
 }
 watch(() => props.show, (n) => {
@@ -143,4 +147,7 @@ const initDictionary = () => {
 .__button-1 {
   margin-left: auto;
 }
+.__cus-title_1 {
+  margin-bottom: 20px;
+}
 </style>

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

@@ -3,45 +3,52 @@
     :show="show"
     :title="titleCpt"
     @onClose="$emit('update:show', false)"
-    width="90%"
-    height="90%"
+    width="800px"
+    max-height="80%"
     @onSubmit="onSubmit"
     :loading="state.loading"
   >
     <div class="__cus-dialog-form">
       <CusForm ref="ref_form" label-width="100px">
         <div class="__cus-title_1">场景设定</div>
-        <CusFormColumn
-          :span="8"
-          required
-          label="预警名称"
-          v-model:param="state.form.serviceName"
-        />
-        <CusFormColumn
-          :span="8"
-          required
-          label="预警级别"
-          v-model:param="state.form.serviceName"
-        />
-        <CusFormColumn
-          :span="8"
-          required
-          label="预警模型"
-          v-model:param="state.form.serviceName"
-        />
-        <CusFormColumn
-          :span="24"
-          label="场景描述"
-          v-model:param="state.form.serviceName"
-          type="textarea"
-          :rows="5"
-        />
+        <el-col :span="12">
+          <CusFormColumn
+            :span="24"
+            required
+            label="预警名称"
+            v-model:param="state.form.name"
+          />
+          <CusFormColumn
+            :span="24"
+            required
+            label="预警级别"
+            v-model:param="state.form.level"
+            link="select"
+            :options="DictionaryStore.warningLevelList"
+          />
+          <CusFormColumn
+            :span="24"
+            required
+            label="预警模型"
+            v-model:param="state.modelDetail.name"
+            :disabled="true"
+          />
+        </el-col>
+        <el-col :span="12">
+          <CusFormColumn
+            :span="24"
+            label="场景描述"
+            v-model:param="state.form.description"
+            type="textarea"
+            :rows="6"
+          />
+        </el-col>
         <div class="__cus-title_1">参数配置</div>
         <div class="params-table" style="width: 100%">
           <CusTable
-            :data="state.form.paramsTable"
+            :data="state.paramList"
             :table-head="[
-              {value: 'key', label: '参数'},
+              {value: 'name', label: '参数'},
               {value: 'value', label: '值'},
               {value: 'unit', label: '单位'},
             ]"
@@ -49,44 +56,55 @@
           >
             <template #value-column-value="{scope}">
               <CusFormColumn
-                required
+                :required="scope.row.required"
                 class="__cus-table-form-column"
                 :span="24"
                 v-model:param="scope.row.value"
+                :default-error-msg="'请输入' + scope.row.name"
                 link="number"
-                :placeholder="'推荐值：' + scope.row.default"
+                :placeholder="'推荐值：' + scope.row.recommendValue"
               />
             </template>
           </CusTable>
         </div>
-        <div class="__cus-title_1">区域配置</div>
-        <el-col :span="12">
-          <CusFormColumn
-            required
-            :span="24"
-            label="预警区域"
-            v-model:param="state.areaIds.warning"
-            link="select"
-            multiple
-            :options="state.areaList.filter(v => !state.areaIds.white.includes(v.id))"
-            label-key="name"
-            value-key="id"
-          />
-          <el-button @click="onAreaMap">查看区域</el-button>
+        <div class="__cus-title_1" v-if="state.modelDetail.areaConfig != 0 || state.modelDetail.allowAreaConfig != 0">区域配置</div>
+        <el-col :span="24" v-if="state.modelDetail.areaConfig != 0">
+          <el-row>
+            <CusFormColumn
+              label-width="140px"
+              :required="state.modelDetail.areaConfig == 2"
+              :span="20"
+              label="预警区域选择"
+              v-model:param="state.areaIds.warning"
+              link="select"
+              multiple
+              :options="DictionaryStore.warningAreaList.filter(v => !state.areaIds.white.includes(v.id))"
+              label-key="name"
+              value-key="id"
+            />
+            <el-col :span="4" v-if="state.areaIds.warning.length > 0">
+              <div class="view-area __hover" @click="onAreaMap(state.areaIds.warning)">查看区域</div>
+            </el-col>
+          </el-row>
         </el-col>
-        <el-col :span="12">
-          <CusFormColumn
-            required
-            :span="24"
-            label="白名单"
-            v-model:param="state.areaIds.white"
-            link="select"
-            multiple
-            :options="state.areaList.filter(v => !state.areaIds.warning.includes(v.id))"
-            label-key="name"
-            value-key="id"
-          />
-          <el-button @click="onAreaMap">查看区域</el-button>
+        <el-col :span="24" v-if="state.modelDetail.allowAreaConfig != 0">
+          <el-row>
+            <CusFormColumn
+              label-width="140px"
+              :required="state.modelDetail.allowAreaConfig == 2"
+              :span="20"
+              label="白名单区域选择"
+              v-model:param="state.areaIds.white"
+              link="select"
+              multiple
+              :options="DictionaryStore.warningAreaList.filter(v => !state.areaIds.warning.includes(v.id))"
+              label-key="name"
+              value-key="id"
+            />
+            <el-col :span="4" v-if="state.areaIds.white.length > 0">
+              <div class="view-area __hover" @click="onAreaMap(state.areaIds.white)">查看区域</div>
+            </el-col>
+          </el-row>
         </el-col>
       </CusForm>
       <areaMap v-model:show="state.areaMap.show" :transfer="state.areaMap.transfer"/>
@@ -99,6 +117,9 @@ import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch}
 import {useDictionaryStore} from "@/stores";
 import {ElMessage, ElMessageBox} from "element-plus";
 import areaMap from './area-map.vue'
+import {warnModelDetail} from "@/api/modules/web/model";
+import {warnAreaQueryAll} from "@/api/modules/web/area";
+import {warnRuleAdd, warnRuleDetail, warnRuleEdit} from "@/api/modules/web/rule";
 
 const emit = defineEmits(['update:show', 'refresh'])
 const {proxy} = getCurrentInstance()
@@ -110,7 +131,6 @@ const props = defineProps({
 const state: any = reactive({
   form: {},
   loading: false,
-  areaList: [],
   areaIds: {
     warning: [],
     white: [],
@@ -118,11 +138,13 @@ const state: any = reactive({
   areaMap: {
     show: false,
     transfer: {}
-  }
+  },
+  modelDetail: {},
+  paramList: [],
 })
 const ref_form = ref()
 const titleCpt = computed(() => {
-  let t = '查看预警模型'
+  let t = '查看预警规则'
   switch (props.transfer.mode) {
     case 'add': t = '新增预警规则'
       break
@@ -139,6 +161,50 @@ const onSubmit = () => {
       type: "warning",
     } as any).then(() => {
       state.loading = true
+      const params = {
+        enabled: false,
+        ...state.form,
+        modelId: props.transfer.modelId,
+        paramList: state.paramList.map(v => ({id: v.id, value: v.value})),
+        areaTypeList: []
+      }
+      if (state.modelDetail.areaConfig != 0) {
+        state.areaIds.warning.forEach(v => {
+          params.areaTypeList.push({id: v, type: 1})
+        })
+      }
+      if (state.modelDetail.allowAreaConfig != 0) {
+        state.areaIds.white.forEach(v => {
+          params.areaTypeList.push({id: v, type: 2})
+        })
+      }
+      if (props.transfer.mode == 'add') {
+        warnRuleAdd(params).then(res => {
+          if (res.code == 0) {
+            ElMessage.success('新增成功！')
+            emit('update:show', false)
+            emit('refresh')
+            state.loading = false
+          } else {
+            ElMessage.error(res.msg)
+          }
+        }).catch(() => {
+          state.loading = false
+        })
+      } else {
+        warnRuleEdit(params).then(res => {
+          if (res.code == 0) {
+            ElMessage.success('编辑成功！')
+            emit('update:show', false)
+            emit('refresh')
+            state.loading = false
+          } else {
+            ElMessage.error(res.msg)
+          }
+        }).catch(() => {
+          state.loading = false
+        })
+      }
     }).catch(() => {})
   }).catch((e) => {
     ElMessage({
@@ -149,46 +215,77 @@ const onSubmit = () => {
   })
 }
 const initDetail = () => {
-  state.loading = false
+  warnRuleDetail(proxy.$util.formatGetParam({id: props.transfer.id})).then(res => {
+    if (res.code == 0) {
+      state.form = res.data
+      state.form.areaTypeList.forEach(v => {
+        if (v.type == 1) {
+          state.areaIds.warning.push(v.id)
+        } else {
+          state.areaIds.white.push(v.id)
+        }
+      })
+      initModel(state.form.modelId)
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
 }
 const initArea = () => {
-  setTimeout(() => {
-    const arr = []
-    for (let i = 0; i < 10; i++) {
-      arr.push({id: i, name: '区域_' + i})
-    }
-    state.areaList = arr
-  }, 1000)
+  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 = false
+    state.loading = true
     initDictionary()
-    state.form = {
-      paramsTable: [
-        {key: '统计时长', value: '', unit: '秒', default: '200'}
-      ]
-    }
+    state.form = {}
+    state.modelDetail = {}
+    state.paramList = []
+    state.areaIds.white = []
+    state.areaIds.warning = []
     if (props.transfer.mode !== 'add') {
       initDetail()
+    } else {
+      initModel(props.transfer.modelId)
     }
     nextTick(() => {
       ref_form.value.reset()
     })
   }
 })
-const onAreaMap = () => {
+const initModel = (id) => {
+  warnModelDetail(proxy.$util.formatGetParam({id: id})).then(res => {
+    if (res.code == 0) {
+      state.modelDetail = res.data
+      state.paramList = state.modelDetail.paramDictList
+      if (props.transfer.mode != 'add') {
+        state.paramList.forEach(v => {
+          state.form.paramList.forEach(v2 => {
+            if (v.id == v2.id) {
+              v.value = v2.value
+            }
+          })
+        })
+      }
+      state.loading = false
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
+const onAreaMap = (areas) => {
   state.areaMap.transfer = {
-
+    areas: areas
   }
   state.areaMap.show = true
 }
 onMounted(() => {
-  state.form = {
-    paramsTable: [
-      {key: '统计时长', value: '', unit: '秒', default: '200'}
-    ]
-  }
   initArea()
 })
 const initDictionary = () => {
@@ -197,4 +294,17 @@ const initDictionary = () => {
 </script>
 
 <style lang="scss" scoped>
+.__cus-title_1 {
+  margin-bottom: 20px;
+}
+.params-table {
+  margin-bottom: 20px;
+}
+.view-area {
+  line-height: 40px;
+  margin-left: 20px;
+  font-weight: 400;
+  font-size: 16px;
+  color: #81AFFF;
+}
 </style>