模型

package.json

@@ -14,7 +14,7 @@
     "axios": "^1.7.2",
     "default-passive-events": "^2.0.0",
     "echarts": "^5.5.1",
-    "element-plus": "^2.3.7",
+    "element-plus": "^2.8.8",
     "fast-glob": "^3.3.2",
     "pinia": "^2.1.7",
     "rollup-plugin-visualizer": "^5.12.0",

src/components/easyMap/initMapInfo.ts

@@ -26,29 +26,11 @@ const initInternet = (obj) => {
 
 export const baseMapLayers = [
   {
-    key: 'sea',
-    name: 'base_haitu',
-    label: '海图',
-    maxZoom: 23,
-    minZoom: 0,
-    visible: false,
-    img: LutuImg
-  },
-  {
     key: 'tdtsl',
     name: 'base_tianditu',
     label: '陆图',
     maxZoom: 23,
     minZoom: 0,
-    visible: true,
-    img: LutuImg
-  },
-  {
-    key: 'hnimg',
-    name: 'base_weixingtu',
-    label: '卫星图',
-    maxZoom: 23,
-    minZoom: 0,
     visible: false,
     img: LutuImg
   },

src/components/easyMap/ol-map.vue

@@ -211,8 +211,10 @@
         })
       }
       const setLayerView = (_layer) => {
-        easyMapOl.value.getView().setMaxZoom(_layer.get('_maxZoom'))
-        easyMapOl.value.getView().setMinZoom(_layer.get('_minZoom'))
+        if (_layer) {
+          easyMapOl.value.getView().setMaxZoom(_layer.get('_maxZoom'))
+          easyMapOl.value.getView().setMinZoom(_layer.get('_minZoom'))
+        }
       }
       const refresh = () => {
         easyMapOl.value.updateSize();

src/views/web/index.vue

@@ -11,27 +11,31 @@
       </div>
       <div class="content-tools">
         <div class="content-tools-item">搜索</div>
-        <div class="content-tools-item">规则</div>
+        <div class="content-tools-item __hover" @click="state.tools.showConfig = true">规则</div>
         <div class="content-tools-item">预警</div>
         <div class="content-tools-item">船舶</div>
       </div>
+      <ConfigCom class="content-config" v-model:show="state.tools.showConfig" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {computed, getCurrentInstance, reactive} from "vue";
+import ConfigCom from './tools/config.vue'
 
 const {proxy} = getCurrentInstance()
 const state: any = reactive({
-  map: null
+  map: null,
+  tools: {
+    showConfig: true
+  }
 })
 const titleCpt = computed(() => {
   return import.meta.env.VITE_TITLE
 })
 const mapLoad = (map, mapFunc) => {
   state.map = map
-  console.log(map)
 };
 </script>
 
@@ -49,13 +53,14 @@ const mapLoad = (map, mapFunc) => {
   .layout-content {
     flex: 1;
     position: relative;
-    .content-map {
+    >* {
       position: absolute;
+    }
+    .content-map {
       width: 100%;
       height: 100%;
     }
     .content-tools {
-      position: absolute;
       top: 10px;
       left: 10px;
       padding: 10px;
@@ -64,6 +69,12 @@ const mapLoad = (map, mapFunc) => {
       flex-direction: column;
       gap: 10px;
     }
+    .content-config {
+      border: 1px solid;
+      top: 10px;
+      left: 100px;
+      height: calc(100% - 20px);
+    }
   }
 }
 </style>

src/views/web/tools/config.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="config" v-if="show" v-loading="state.loading">
+    <el-button @click="$emit('update:show', false)">关闭</el-button>
+    <div style="display: flex">
+      <div style="width: 60px">过滤</div><el-input v-model="state.text"/>
+    </div>
+    <div class="tabs" style="display: flex;gap: 20px;">
+      <el-button @click="state.tab = 1">规则</el-button>
+      <el-button @click="state.tab = 2">区域</el-button>
+    </div>
+    <template v-if="state.tab == 1">
+      <el-button @click="expendRules">{{rulesExpandAllCpt ? '收起' : '展开'}}全部</el-button>
+      <el-tree
+        ref="ref_rulesTree"
+        :data="state.rulesList"
+        :props="ruleProps"
+        node-key="id"
+      >
+        <template #default="{ node, data }">
+        <span class="custom-tree-node">
+          <span>{{ node.label }}</span>
+          <span v-if="node.level > 1">
+            <el-button @click.stop="$util._console(node)">编辑</el-button>
+            <el-button @click.stop="$util._console(node)">查看</el-button>
+          </span>
+          <span v-else>
+            <el-button @click.stop="onViewModel(data)">查看</el-button>
+          </span>
+        </span>
+        </template>
+      </el-tree>
+    </template>
+    <template v-else-if="state.tab == 2">
+
+    </template>
+    <ModelDialog v-model:show="state.model.show" :transfer="state.model.transfer"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
+import ModelDialog from "./model-dialog.vue";
+
+const {proxy} = getCurrentInstance()
+const props = defineProps({
+  show: {},
+})
+const state: any = reactive({
+  tab: 1,
+  loading: false,
+  text: '',
+  rulesList: [],
+  model: {
+    transfer: {},
+    show: false
+  }
+})
+const ruleProps = {
+  children: 'children'
+}
+const ref_rulesTree = ref()
+watch(() => props.show, (n) => {
+  if (n) {
+    initData()
+  }
+})
+const initData = () => {
+  state.loading = true
+  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)
+}
+const expendRules = () => {
+  const flag = JSON.parse(JSON.stringify(rulesExpandAllCpt.value))
+  ref_rulesTree.value.root.childNodes.forEach(v => v.expanded = !flag)
+}
+const rulesExpandAllCpt = computed(() => {
+  return ref_rulesTree.value?.root.childNodes.every(v => v.data.children?.length == 0 || v.expanded)
+})
+const onViewModel = (row) => {
+  console.log(row)
+  state.model.transfer = {
+    id: row.id + ''
+  }
+  state.model.show = true
+}
+onMounted(() => {
+  initData()
+})
+</script>
+
+<style lang="scss" scoped>
+.config {
+  width: 300px;
+}
+</style>

src/views/web/tools/model-dialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <CusDialog
+    :show="show"
+    :title="titleCpt"
+    @onClose="$emit('update:show', false)"
+    width="90%"
+    height="90%"
+    @onSubmit="onSubmit"
+    :loading="state.loading"
+  >
+    <div class="__cus-dialog-form">
+      <CusForm ref="ref_form" label-width="100px">
+        <CusFormColumn
+          :span="8"
+          required
+          label="数据服务名称"
+          label-width="120px"
+          v-model:param="state.form.serviceName"
+        />
+      </CusForm>
+    </div>
+  </CusDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
+import {useDictionaryStore} from "@/stores";
+import {ElMessage, ElMessageBox} from "element-plus";
+
+const emit = defineEmits(['update:show', 'refresh'])
+const {proxy} = getCurrentInstance()
+const DictionaryStore = useDictionaryStore()
+const props = defineProps({
+  show: {default: false},
+  transfer: {}
+ })
+const state: any = reactive({
+  form: {
+  },
+  loading: false,
+})
+const ref_form = ref()
+const titleCpt = computed(() => {
+  let t = '查看预警模型'
+  switch (props.transfer.mode) {
+    case 'add': t = '新增外部服务'
+      break
+  }
+  return t
+})
+const onSubmit = () => {
+  ref_form.value.submit().then(() => {
+    ElMessageBox.confirm("是否提交?", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    } as any).then(() => {
+      state.loading = true
+    }).catch(() => {})
+  }).catch((e) => {
+    ElMessage({
+      message: e[0].message,
+      grouping: true,
+      type: 'warning',
+    })
+  })
+}
+const initDetail = () => {
+  state.loading = false
+}
+watch(() => props.show, (n) => {
+  if (n) {
+    state.loading = false
+    initDictionary()
+    state.form = {
+      requestType: 'GET'
+    }
+    if (props.transfer.mode !== 'add') {
+      initDetail()
+    }
+    nextTick(() => {
+      ref_form.value.reset()
+    })
+  }
+})
+const initDictionary = () => {
+  // DictionaryStore.initDict('format_type')
+}
+</script>
+
+<style lang="scss" scoped>
+.__cus-dialog-form {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.params-content {
+  flex: 1;
+  margin-top: 20px;
+  overflow: hidden;
+  .request-params, .request-headers, .request-body, .response-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+.tips {
+  background-color: rgba(var(--cus-main-color-rgb), 0.1);
+  border-radius: 6px;
+  padding: 7px;
+  margin-bottom: 10px;
+  width: 100%;
+}
+</style>

yarn.lock

@@ -2702,7 +2702,7 @@ echarts@^5.5.1:
     tslib "2.3.0"
     zrender "5.6.0"
 
-element-plus@^2.3.7:
+element-plus@^2.8.8:
   version "2.8.8"
   resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.8.tgz#3f32377f40fa8878e81ae34aed035fdedbcbe128"
   integrity sha512-MLAH1x2PGTnOT7Iwqh9ASgfZhvgqQqrdbxuJH0w2fGjzE4ZjryyLQj24HXoQO7Zon66U3lrYxbdLI57M6OX0qw==