查看模型

src/api/modules/web/model.ts

@@ -0,0 +1,10 @@
+import { handle } from '../../index'
+
+const suffix = 'sww-api'
+
+// 获取预警模型详情
+export const warnModelDetail = (params: any) => handle({
+  url: `/${suffix}/warn/model/detail`,
+  method: 'get',
+  params
+})

src/stores/dictionary.ts

@@ -15,9 +15,9 @@ export const useDictionaryStore = defineStore('dictionary', {
 		...dictionary,
 		...dictionaryOther,
 		areaConfigList: [
-			{dictLabel: '不可配置', dictValue: '0'},
-			{dictLabel: '可选配置', dictValue: '1'},
-			{dictLabel: '必选配置', dictValue: '2'},
+			{dictLabel: '不可配置', dictValue: 0},
+			{dictLabel: '可选配置', dictValue: 1},
+			{dictLabel: '必选配置', dictValue: 2},
 		],
 		warningLevelList: [
 			{dictLabel: '高', dictValue: '1'},
@@ -48,6 +48,10 @@ export const useDictionaryStore = defineStore('dictionary', {
 			{dictLabel: '是', dictValue: true},
 			{dictLabel: '否', dictValue: false},
 		],
+		requiredList: [
+			{dictLabel: '是', dictValue: true},
+			{dictLabel: '否', dictValue: false},
+		],
 	}),
 	getters: {
 		shipTypeMap() {
@@ -59,6 +63,9 @@ export const useDictionaryStore = defineStore('dictionary', {
 		importantMap() {
 			return listToMap(this.importantList)
 		},
+		requiredMap() {
+			return listToMap(this.requiredList)
+		},
 	},
 	actions: {
 		initDict(type) {

src/style/cus.scss

@@ -150,7 +150,7 @@
         display: flex;
         overflow-y: hidden;
         flex: 1;
-        background-color: rgba(0, 52, 159, 0.7);
+        background-color: rgba(0, 52, 159, 1);
         border-radius: 0 0 $borderRadius $borderRadius;
         .__cus-dialog-main {
           width: 100%;
@@ -296,23 +296,25 @@
 }
 .__cus-title_1 {
   width: 100%;
-  height: 32px;
-  font-size: 14px;
-  font-family: PingFang SC-Regular, PingFang SC;
+  height: 40px;
   font-weight: 400;
-  color: #2E81FF;
+  font-size: 20px;
+  color: #FFFFFF;
   display: flex;
   align-items: center;
   position: relative;
-  padding-left: 10px;
+  padding-left: 16px;
   box-sizing: border-box;
+  border-radius: 4px;
+  background-color: rgba(88,148,235,0.2);;
   &:before {
     content: '';
     position: absolute;
     left: 0;
-    width: 2px;
-    height: 14px;
-    background-color: #2E81FF;
+    width: 6px;
+    height: 100%;
+    background: linear-gradient(0deg, rgba(255,255,255,0.11), rgba(255,255,255,0.75));
+    border-radius: 4px 0px 0px 4px;
   }
 }
 .__cus-title_2 {
@@ -649,19 +651,33 @@ em {
     font-size: 16px !important;
   }
 }
-.el-input__wrapper {
-  background-color: transparent !important;
-  box-shadow: none !important;
-  border: 1px solid rgba(174, 208, 255, 1) !important;
-  .el-input__inner {
-    color: #ffffff !important;
+.el-input {
+  .el-input__wrapper {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    border: 1px solid rgba(174, 208, 255, 1) !important;
+    .el-input__inner {
+      color: #ffffff !important;
+    }
+  }
+  &.is-disabled {
+    .el-input__inner {
+      -webkit-text-fill-color: #ffffff !important;
+    }
   }
 }
-.el-textarea__inner {
-  box-shadow: none !important;
-  border: 1px solid rgba(174, 208, 255, 1) !important;
-  font-size: 16px !important;
-
+.el-textarea {
+  .el-textarea__inner {
+    box-shadow: none !important;
+    border: 1px solid rgba(174, 208, 255, 1) !important;
+    font-size: 16px !important;
+    background-color: transparent !important;
+  }
+  &.is-disabled {
+    .el-textarea__inner {
+      -webkit-text-fill-color: #ffffff !important;
+    }
+  }
 }
 .el-select__wrapper {
   background-color: transparent !important;
@@ -676,6 +692,11 @@ em {
   .el-radio__label {
     color: #ffffff !important;
   }
+  .is-disabled {
+    .el-radio__label {
+      -webkit-text-fill-color: #ffffff !important;
+    }
+  }
 }
 .el-upload {
   background-color: transparent !important;
@@ -772,4 +793,17 @@ em {
       font-size: 16px !important;
     }
   }
+}
+
+.__button-1 {
+  width: 65px;
+  height: 40px;
+  background: #37B4D3;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
 }

src/views/web/config/index.vue

@@ -30,7 +30,7 @@
       </CusForm>
       <template v-if="state.tab == 1">
         <div class="tree-title">
-          全部规则(0)
+          全部规则({{ ruleTotalCpt }})
           <div class="expend-tree __hover" @click="expendRules">{{rulesExpandAllCpt ? '收起' : '展开'}}全部</div>
         </div>
         <el-tree
@@ -39,17 +39,21 @@
           :data="state.rulesList"
           :props="ruleProps"
           node-key="id"
+          :filter-node-method="ruleFilterNode"
         >
           <template #default="{ node, data }">
         <span class="custom-tree-node">
           <span>{{ node.label }}</span>
-          <span 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"/>
-          </span>
-          <span v-else>
-            <SvgIcon name="add" size="12" class="__hover" @click.stop="onAddRule(data)"/>
+          <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"/>
+            </template>
+            <template v-else>
+              <div class="img-button __hover" @click.stop="onAddRule(data)"><img src="@/assets/images/web/tree-add.png"/></div>
+              <div class="img-button __hover" @click.stop="onViewModel(data)"><img src="@/assets/images/web/tree-view.png"/></div>
+            </template>
           </span>
         </span>
           </template>
@@ -57,8 +61,8 @@
       </template>
       <template v-else-if="state.tab == 2">
         <div class="tree-title">
-          全部区域(0)
-          <div class="expend-tree __hover" @click="onAddArea"><img src="@/assets/images/web/tree-add.png"/></div>
+          全部区域({{ state.areaList.length }})
+          <div class="expend-tree img-button __hover" @click="onAddArea"><img src="@/assets/images/web/tree-add.png"/></div>
         </div>
         <el-tree
           ref="ref_areaTree"
@@ -85,6 +89,7 @@
         </el-tree>
       </template>
       <ruleDetail v-model:show="state.ruleDetail.show" :transfer="state.ruleDetail.transfer"/>
+      <modelDetail v-model:show="state.modelDetail.show" :transfer="state.modelDetail.transfer"/>
     </div>
   </DragWindow>
 </template>
@@ -94,7 +99,6 @@ import {computed, getCurrentInstance, markRaw, onMounted, reactive, ref, watch}
 import ruleDetail from "./rule-detail.vue";
 import areaForm from "./area-form.vue";
 import DragWindow from '../components/drag-window.vue'
-import { Search, Refresh } from "@element-plus/icons-vue";
 import {warnAreaDelete, warnAreaQueryAll} from "@/api/modules/web/area";
 import {ElMessage, ElMessageBox} from "element-plus";
 import * as layer from "ol/layer";
@@ -102,6 +106,7 @@ 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 modelDetail from './model-detail.vue'
 
 const {proxy} = getCurrentInstance()
 const emit = defineEmits(['update:show'])
@@ -117,7 +122,7 @@ const state: any = reactive({
     left: 85,
     top: 110
   },
-  tab: 2,
+  tab: 1,
   loading: false,
   text: '',
   textReal: '',
@@ -126,11 +131,16 @@ const state: any = reactive({
     transfer: {},
     show: false
   },
+  modelDetail: {
+    transfer: {},
+    show: false
+  },
   areaList: [],
   areaLayer: null
 })
 const ruleProps = {
-  children: 'children'
+  children: 'ruleList',
+  label: 'name'
 }
 const areaProps = {
   children: 'children',
@@ -148,7 +158,11 @@ 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)
     })
   } else {
     warnAreaQueryAll().then(res => {
@@ -277,6 +291,23 @@ const areaFilterNode = (value, data) => {
   if (!value) return true
   return data.name?.includes(value)
 }
+const ruleFilterNode = (value, data) => {
+  if (!value) return true
+  return data.name?.includes(value)
+}
+const onViewModel = (row) => {
+  state.modelDetail.transfer = {
+    id: row.id
+  }
+  state.modelDetail.show = true
+}
+const ruleTotalCpt = computed(() => {
+  let total = 0
+  state.rulesList.forEach(v => {
+    total += v[ruleProps.children]?.length || 0
+  })
+  return total
+})
 watch(() => state.textReal, (n) => {
   if (state.tab == 1) {
     ref_rulesTree.value?.filter(n)
@@ -414,4 +445,14 @@ $mapHeight: var(--easy-map-height);
     }
   }
 }
+.img-button {
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  >img {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>

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

@@ -0,0 +1,146 @@
+<template>
+  <CusDialog
+    :show="show"
+    :title="titleCpt"
+    @onClose="$emit('update:show', false)"
+    width="800px"
+    max-height="880px"
+    :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>
+        <CusFormColumn
+          :span="12"
+          required
+          label="模型名称"
+          v-model:param="state.form.name"
+        />
+        <CusFormColumn
+          :span="12"
+          required
+          label="模型编码"
+          v-model:param="state.form.code"
+        />
+        <CusFormColumn
+          :span="12"
+          required
+          label="预警区域"
+          v-model:param="state.form.areaConfig"
+          link="radio"
+          :options="DictionaryStore.areaConfigList"
+        />
+        <CusFormColumn
+          :span="12"
+          required
+          label="白名单区域"
+          v-model:param="state.form.allowAreaConfig"
+          link="radio"
+          :options="DictionaryStore.areaConfigList"
+        />
+        <CusFormColumn
+          :span="12"
+          required
+          label="模型说明"
+          v-model:param="state.form.allowAreaConfig"
+          type="textarea"
+          :rows="5"
+        />
+        <CusFormColumn
+          :span="12"
+          label="附件"
+          v-model:param="state.files"
+          link="upload"
+          layout="card"
+          type="img"
+        />
+        <div class="__cus-title_1" style="margin-bottom: 20px">模型参数</div>
+        <div class="params-table" style="width: 100%">
+          <CusTable
+            :data="state.form.paramDictList"
+            :table-head="[
+              {value: 'name', label: '名称'},
+              {value: 'code', label: '编码'},
+              {value: 'type', label: '类型'},
+              {value: 'unit', label: '单位'},
+              {value: 'required', label: '必填'},
+              {value: 'recommendValue', label: '推荐值'},
+            ]"
+            :no-page="true"
+          >
+            <template #required-column-value="{scope}">
+              {{DictionaryStore.requiredMap.get(scope.row.required)}}
+            </template>
+          </CusTable>
+        </div>
+      </CusForm>
+    </div>
+  </CusDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch} from "vue";
+import {useDictionaryStore} from "@/stores";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {warnModelDetail} from "@/api/modules/web/model";
+
+const emit = defineEmits(['update:show', 'refresh'])
+const {proxy} = getCurrentInstance()
+const DictionaryStore = useDictionaryStore()
+const props = defineProps({
+  show: {default: false},
+  transfer: {}
+ })
+const state: any = reactive({
+  form: {
+    paramDictList: []
+  },
+  loading: false,
+  files: []
+})
+const ref_form = ref()
+const titleCpt = computed(() => {
+  let t = '查看模型'
+  switch (props.transfer.mode) {
+    case 'add': t = '新增模型'
+      break
+    case 'edit': t = '编辑模型'
+      break
+  }
+  return t
+})
+const initDetail = () => {
+  state.loading = true
+  warnModelDetail(proxy.$util.formatGetParam({id: props.transfer.id})).then(res => {
+    state.form = res.data
+    state.loading = false
+  })
+}
+watch(() => props.show, (n) => {
+  if (n) {
+    state.loading = false
+    initDictionary()
+    state.form = {
+      paramDictList: []
+    }
+    if (props.transfer.mode !== 'add') {
+      initDetail()
+    }
+    nextTick(() => {
+      ref_form.value.reset()
+    })
+  }
+})
+onMounted(() => {
+})
+const initDictionary = () => {
+}
+</script>
+
+<style lang="scss" scoped>
+.__button-1 {
+  margin-left: auto;
+}
+</style>