Merge branch 'release-sy-v1.0.0' into 'dev'

Release sy v1.0.0

See merge request project/water/shuili-vue!34

src/api/aiSupervision/layerConfigApi.js

@@ -0,0 +1,61 @@
+import request from '@/utils/request.js';
+
+export function addOrEditDirectoryApi(options) {
+  return request({
+    url: `/map/layerDir/saveDir`,
+    method: 'post',
+    params: {
+      id: options.id || '',
+      name: options.name,
+      orderNm: -1,
+      parentId: 'root'
+    }
+  });
+}
+
+export function getDirectoryApi(data) {
+  return request({
+    url: `/map/layerDir/getAllTreeDir`,
+    method: 'post',
+    data
+  });
+}
+
+export function deleteDirectoryApi(id) {
+  return request({
+    url: `/map/layerDir/deleteDir`,
+    method: 'delete',
+    params: {
+      dirId: id
+    }
+  });
+}
+
+// 增加或更改图层
+export function saveOrUpdateLayerApi(paramInfo) {
+  return request({
+    url: `/map/layer/saveOrUpdateLayer`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data: paramInfo
+  });
+}
+
+// 获取图层列表
+export function getLayerListApi(data) {
+  return request({
+    url: `/map/layer/getLayers`,
+    method: 'post',
+    data
+  });
+}
+
+// 删除图层
+export function deleteLayerApi(id) {
+  return request({
+    url: `/map/layer/deleteLayer/${id}`,
+    method: 'delete'
+  });
+}

src/utils/JSONData.js

@@ -1,7 +1,8 @@
 import * as d3 from 'd3';
 let colorNumber = 0;
-const colorScale = d3.scaleOrdinal(d3.schemePaired);// 颜色列表
-function isEqualJSON(a, b) { // 判断a，b是否完全一致
+const colorScale = d3.scaleOrdinal(d3.schemePaired); // 颜色列表
+function isEqualJSON(a, b) {
+  // 判断a，b是否完全一致
   // 局限性：
   // 如果对象里属性的位置发生变化，转换来的字符串就不相等
   // 但实际我们只需要看他们的内容是否一致，与顺序没有关系，所以这种方法有局限性。
@@ -12,7 +13,8 @@ function isEqualJSON(a, b) { // 判断a，b是否完全一致
   }
   return false;
 }
-function breadthTraverse(d, c) { // 广度遍历
+function breadthTraverse(d, c) {
+  // 广度遍历
   if (d.children) {
     for (let index = 0; index < d.children.length; index += 1) {
       const dChild = d.children[index];
@@ -29,7 +31,8 @@ function breadthTraverse(d, c) { // 广度遍历
     }
   }
 }
-function inheritColor(d, c) { // 赋予新颜色，并更新子节点的颜色
+function inheritColor(d, c) {
+  // 赋予新颜色，并更新子节点的颜色
   if (d.children) {
     for (let index = 0; index < d.children.length; index += 1) {
       const dChild = d.children[index];
@@ -39,14 +42,16 @@ function inheritColor(d, c) { // 赋予新颜色，并更新子节点的颜色
   }
 }
 class JSONData {
-  constructor(d) { // d为数组
-    this.data = JSON.parse(JSON.stringify(d));// 深拷贝对象
+  constructor(d) {
+    // d为数组
+    this.data = JSON.parse(JSON.stringify(d)); // 深拷贝对象
     breadthTraverse(this.data[0]);
     this._addId();
-    console.log(this.data[0])
+    console.log(this.data[0]);
   }
 
-  _addId(ides = '', d = this.data) { // 添加唯一标识
+  _addId(ides = '', d = this.data) {
+    // 添加唯一标识
     for (let index = 0; index < d.length; index += 1) {
       const dChild = d[index];
       dChild.ides = `${ides}${index}`;
@@ -77,7 +82,8 @@ class JSONData {
     return d;
   }
 
-  del(s) { // 删除s
+  del(s) {
+    // 删除s
     const parent = this.getParent(s);
     if (parent) {
       const children = parent.children;
@@ -96,7 +102,7 @@ class JSONData {
 
   getItself(d, data = this.data) {
     let dSelf = data;
-    const ides = d.ides.split('').map(s => parseInt(s, 10));
+    const ides = d.ides.split('').map((s) => parseInt(s, 10));
     if (ides.length > 0) {
       for (let index = 0; index < ides.length - 1; index++) {
         const number = ides[index];
@@ -108,9 +114,11 @@ class JSONData {
     return false;
   }
 
-  add(dParent, d) { // dParent添加子节点d
+  add(dParent, d) {
+    // dParent添加子节点d
     const parent = this.getItself(dParent);
-    if (parent.ides === '0') { // 根节点
+    if (parent.ides === '0') {
+      // 根节点
       if (!d.color) {
         d.color = colorScale(colorNumber);
         colorNumber += 1;
@@ -126,7 +134,7 @@ class JSONData {
 
   getParent(d, data = this.data) {
     let dParent = data;
-    const ides = d.ides.split('').map(s => parseInt(s, 10));
+    const ides = d.ides.split('').map((s) => parseInt(s, 10));
     ides.pop();
     if (ides.length > 0) {
       for (let index = 0; index < ides.length - 1; index++) {
@@ -139,8 +147,8 @@ class JSONData {
     return false;
   }
 
-  insert(dPosition, d, i = 0) { // 把d插入到dPosition的前面(i=0)或者后面(i=1)
-    debugger
+  insert(dPosition, d, i = 0) {
+    // 把d插入到dPosition的前面(i=0)或者后面(i=1)
     const parent = this.getParent(dPosition);
     if (parent) {
       const children = parent.children;
@@ -152,8 +160,10 @@ class JSONData {
           position = index;
         }
       }
-      if ((position+i) < children.length) { // 更新id
-        if (parent.ides === '0') { // 根节点
+      if (position + i < children.length) {
+        // 更新id
+        if (parent.ides === '0') {
+          // 根节点
           if (!d.color) {
             d.color = colorScale(colorNumber);
             colorNumber += 1;
@@ -162,52 +172,57 @@ class JSONData {
           d.color = parent.color; // 继承父节点的color
         }
         children.splice(position + i, 0, d);
-        this._addId(parent.ides, children)
+        this._addId(parent.ides, children);
       } else {
         this.add(parent, d);
       }
     }
   }
 
-  collapse(mid) { // 折叠
-    const arr = Array.isArray(mid) ? mid : [mid]
+  collapse(mid) {
+    // 折叠
+    const arr = Array.isArray(mid) ? mid : [mid];
     for (let i = 0; i < arr.length; i++) {
-      const idChild = arr[i]
-      const d = this.find(idChild)
+      const idChild = arr[i];
+      const d = this.find(idChild);
       if (d && (!d._children || d._children.length === 0) && !d.collapse) {
-        d.collapse = true
-        d._children = d.children
-        d.children = []
+        d.collapse = true;
+        d._children = d.children;
+        d.children = [];
       }
     }
   }
 
-  expand(mid) { // 展开
-    const arr = Array.isArray(mid) ? mid : [mid]
+  expand(mid) {
+    // 展开
+    const arr = Array.isArray(mid) ? mid : [mid];
     for (let i = 0; i < arr.length; i++) {
-      const idChild = arr[i]
-      const d = this.find(idChild)
+      const idChild = arr[i];
+      const d = this.find(idChild);
       if (d && (!d.children || d.children.length === 0) && d.collapse) {
         // console.log('展开', d)
-        d.collapse = false
-        d.children = d._children
-        d._children = []
+        d.collapse = false;
+        d.children = d._children;
+        d._children = [];
       }
     }
   }
-  find(mid) { // 根据id找到数据
-    const array = mid.split('-').map(n => ~~n)
-    let data = this.data
+  find(mid) {
+    // 根据id找到数据
+    const array = mid.split('-').map((n) => ~~n);
+    let data = this.data;
     for (let i = 1; i < array.length; i++) {
       if (data && data.children?.length) {
-        data = data.children[array[i]]
-      } else if (data && data._children?.length) { // No data matching mid
-        data = data._children[array[i]]
-      } else { // No data matching mid
-        return null
+        data = data.children[array[i]];
+      } else if (data && data._children?.length) {
+        // No data matching mid
+        data = data._children[array[i]];
+      } else {
+        // No data matching mid
+        return null;
       }
     }
-    return data
+    return data;
   }
 }
 

src/utils/request.js

@@ -1,12 +1,12 @@
-import axios from 'axios'
-import { Notification, MessageBox, Message } from 'element-ui'
-import store from '@/store'
-import { getToken } from '@/utils/auth'
-import errorCode from '@/utils/errorCode'
+import axios from 'axios';
+import { Notification, MessageBox, Message } from 'element-ui';
+import store from '@/store';
+import { getToken } from '@/utils/auth';
+import errorCode from '@/utils/errorCode';
 //  form 表单  头部信息 application/x-www-form-urlencoded
 //
-window._axiosPromiseArr = []
-axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+window._axiosPromiseArr = [];
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
@@ -14,86 +14,86 @@ const service = axios.create({
   withCredentials: true,
   // 超时
   timeout: 60000
-})
+});
 // request拦截器
-service.interceptors.request.use(config => {
-  // 是否需要设置 token
-  const isToken = (config.headers || {}).isToken === false
-  if (getToken() && !isToken) {
-    config.headers['shuili'] = 'water ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+service.interceptors.request.use(
+  (config) => {
+    // 是否需要设置 token
+    const isToken = (config.headers || {}).isToken === false;
+    if (getToken() && !isToken) {
+      config.headers['shuili'] = 'water ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    config.cancelToken = new axios.CancelToken((cancel) => {
+      window._axiosPromiseArr.push({ cancel });
+    });
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
   }
-  config.cancelToken = new axios.CancelToken(cancel => {
-    window._axiosPromiseArr.push({ cancel })
-  })
-  return config
-}, error => {
-  Promise.reject(error)
-})
+);
 
 // 响应拦截器
-service.interceptors.response.use(res => {
-  if (res && res.data) {
-    // 未设置状态码则默认成功状态
-    const code = res.data.code || 200
-    // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
-    if (code === 401) {
-      MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
-        confirmButtonText: '重新登录',
-        cancelButtonText: '取消',
-        type: 'warning'
+service.interceptors.response.use(
+  (res) => {
+    if (res && res.data) {
+      // 未设置状态码则默认成功状态
+      const code = res.data.code || 200;
+      // 获取错误信息
+      const msg = errorCode[code] || res.data.msg || errorCode['default'];
+      if (code === 401) {
+        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('LogOut').then(() => {
+            location.href = '/';
+          });
+        });
       }
-      ).then(() => {
-        store.dispatch('LogOut').then(() => {
-          location.href = '/'
-        })
-      })
-    }
-    if (code === 403) {
-      MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
-        confirmButtonText: '重新登录',
-        cancelButtonText: '取消',
-        type: 'warning'
+      if (code === 403) {
+        MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('LogOut').then(() => {
+            location.href = '/';
+          });
+        });
+      } else if (code !== 200) {
+        Notification.error({
+          title: msg
+        });
+        return Promise.reject('error');
+      } else if (code === 500) {
+        Message({
+          message: msg,
+          type: 'error'
+        });
+        return Promise.reject(new Error(msg));
+      } else {
+        return res.data;
       }
-      ).then(() => {
-        store.dispatch('LogOut').then(() => {
-          location.href = '/'
-        })
-      })
-
-    } else if (code !== 200) {
-      Notification.error({
-        title: msg
-      })
-      return Promise.reject('error')
-    } else if (code === 500) {
-      Message({
-        message: msg,
-        type: 'error'
-      })
-      return Promise.reject(new Error(msg))
-    } else {
-      return res.data
     }
-  }
-},
-  error => {
-    console.log('err' + error)
-    let { message } = error
+  },
+  (error) => {
+    console.log('err' + error);
+    let { message } = error;
     if (message == 'Network Error') {
-      message = '后端接口连接异常'
+      message = '后端接口连接异常';
     } else if (message.includes('timeout')) {
-      message = '系统接口请求超时'
+      message = '系统接口请求超时';
     } else if (message.includes('Request failed with status code')) {
-      message = '系统接口' + message.substr(message.length - 3) + '异常'
+      message = '系统接口' + message.substr(message.length - 3) + '异常';
     }
     // Message({
     //   message: message,
     //   type: 'error',
     //   duration: 5 * 1000
     // })
-    return Promise.reject(error)
+    return Promise.reject(error);
   }
-)
-
-export default service
+);
+export default service;

src/views/aiSupervision/layerManage/resource/LayerDetails.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="app-container">
+    <el-header>
+      <i class="el-icon-back" @click="goBack"></i>
+      资源目录管理
+      <span>/详情</span>
+    </el-header>
+    <el-container>
+      <div class="top">
+        <span class="title">图层资源目录详情</span>
+        <div class="directoryInfo">
+          <span> 图层资源目录名称：{{ directoryInfo.name }}</span>
+          <span> 图层资源目录编号： {{ directoryInfo.id }}</span>
+          <span> 图层数量： {{ pageOptions.total }}</span>
+          <span> 创建时间： {{ directoryInfo.pubDate }}</span>
+          <span> 创建人：{{ directoryInfo.createUser }} </span>
+        </div>
+      </div>
+      <div class="middle">
+        <el-button type="primary" plain @click="dialogFormVisible = true">添加图层</el-button>
+        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
+          <el-form :model="editDataInfoForm">
+            <el-form-item label="服务类型" style="font-size: 1rem" :label-width="'120px'">
+              <el-select style="width: 80%" v-model="editDataInfoForm.serviceType" placeholder="请选择">
+                <el-option
+                  v-for="item in serviceTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="服务名称" prop="serviceName" style="font-size: 1rem" :label-width="'120px'">
+              <el-input v-model.trim="editDataInfoForm.serviceName" style="width: 80%"></el-input>
+            </el-form-item>
+            <el-form-item label="服务别名" prop="serviceNameAlias" style="font-size: 1rem" :label-width="'120px'">
+              <el-input v-model.trim="editDataInfoForm.serviceNameAlias" style="width: 80%"></el-input>
+            </el-form-item>
+            <el-form-item label="服务地址" prop="serviceUrl" style="font-size: 1rem" :label-width="'120px'">
+              <el-input v-model.trim="editDataInfoForm.serviceUrl" style="width: 80%"></el-input>
+            </el-form-item>
+            <el-form-item
+              v-if="editDataInfoForm.serviceType === '030300'"
+              label="服务索引"
+              prop="serviceIndex"
+              style="font-size: 1rem"
+              :label-width="'120px'"
+            >
+              <el-input v-model="editDataInfoForm.serviceIndex" style="width: 80%"></el-input>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="dialogFormVisible = false">取 消</el-button>
+            <el-button type="primary" @click="saveOrUpdateLayer">确 定</el-button>
+          </div>
+        </el-dialog>
+        <div class="keyword-filter">
+          <el-input class="keyword-input" placeholder="请输入内容" v-model="keyword" clearable> </el-input>
+          <el-button class="search-btn">搜索</el-button>
+        </div>
+      </div>
+      <div class="content">
+        <el-table :data="tableData" stripe style="width: 100%">
+          <el-table-column
+            type="index"
+            :index="(index) => index + (pageOptions.pageNum - 1) * pageOptions.pageSize + 1"
+            label="序号"
+            width="50"
+            header-align="center"
+          ></el-table-column>
+          <el-table-column prop="id" label="图层资源目录编号" width="350"> </el-table-column>
+          <el-table-column prop="serviceName" label="图层资源目录名称"> </el-table-column>
+          <el-table-column prop="pubDate" label="创建时间"> </el-table-column>
+          <el-table-column prop="createUser" label="创建人"> </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :current-page.sync="pageOptions.pageNum"
+          :total="pageOptions.total"
+          :page-size="pageOptions.pageSize"
+          @current-change="getLayerList"
+        >
+        </el-pagination>
+      </div>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import debounce from 'lodash/debounce';
+import { saveOrUpdateLayerApi, getLayerListApi, deleteLayerApi } from '@/api/aiSupervision/layerConfigApi.js';
+export default {
+  props: ['directoryInfo'],
+  data() {
+    return {
+      tableData: [],
+      editDataInfoForm: {
+        serviceType: '', //服务类型,wms/wmts/wfs/3d tiles/terrain
+        serviceUrl: '', //服务地址
+        serviceName: '', //服务名称
+        serviceNameAlias: '', //服务别名
+        serviceIndex: '', //服务索引
+        dirId: '',
+        dirNames: '',
+        tileSize: '256'
+      },
+      dialogTitle: '添加图层',
+      serviceTypeOptions: [
+        {
+          value: '021102',
+          label: 'ArcGISRest图层'
+        },
+        {
+          value: '030300',
+          label: 'WFS200'
+        },
+        {
+          value: '113200',
+          label: 'S3M图层'
+        },
+        {
+          value: '',
+          label: 'XYZ底图'
+        }
+      ],
+      pageOptions: {
+        pageNum: 1,
+        pageSize: 8,
+        total: 0
+      },
+      dialogFormVisible: false, //是否显示对话框
+      keyword: ''
+    };
+  },
+  mounted() {
+    this.initData();
+    this.getLayerList();
+  },
+  methods: {
+    goBack() {
+      this.$emit('goback');
+    },
+    handleEdit(index, row) {
+      this.editDataInfoForm.id = row.id;
+      this.editDataInfoForm.serviceType = row.serviceType;
+      this.editDataInfoForm.serviceName = row.serviceName;
+      this.editDataInfoForm.serviceNameAlias = row.serviceNameAlias;
+      this.editDataInfoForm.serviceUrl = row.serviceUrl;
+      this.editDataInfoForm.serviceIndex = row.serviceIndex;
+      this.dialogTitle = '编辑图层';
+      this.dialogFormVisible = true;
+    },
+
+    handleDelete(row) {
+      this.$confirm('删除图层将同时删除该图层资源以及关联的图层数据，删除后将不可恢复，是否继续删除？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await deleteLayerApi(row.id);
+          if (res.success) {
+            this.getLayerList();
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+    },
+    // 获取图层列表
+    getLayerList() {
+      const params = {
+        pageNum: this.pageOptions.pageNum,
+        pageSize: this.pageOptions.pageSize,
+        data: {
+          serviceName: this.keyword,
+          dirId: this.directoryInfo.id
+        },
+        params: {
+          orderBy: 'pub_date',
+          sortBy: 'asc'
+        }
+      };
+      getLayerListApi(params).then((res) => {
+        this.pageOptions.total = res.total;
+        this.tableData = res.records;
+      });
+    },
+    async saveOrUpdateLayer() {
+      const reg = /^(\w|[\u4e00-\u9fa5]){3,30}$/g;
+      if (!reg.test(this.editDataInfoForm.serviceName)) {
+        this.$message({
+          type: 'info',
+          message: '格式有误，目录名称仅支持中文、数字、字母、下划线，最大长度不超过30'
+        });
+        return;
+      }
+      await saveOrUpdateLayerApi(this.editDataInfoForm);
+      this.getLayerList();
+      this.dialogFormVisible = false;
+    },
+    initData() {
+      this.editDataInfoForm.serviceUrl = '';
+      this.editDataInfoForm.serviceName = '';
+      this.editDataInfoForm.serviceNameAlias = '';
+      this.editDataInfoForm.serviceIndex = '';
+
+      this.editDataInfoForm.serviceType = this.serviceTypeOptions[0].value;
+      this.editDataInfoForm.dirId = this.directoryInfo.id;
+      this.editDataInfoForm.dirNames = this.directoryInfo.name;
+      this.editDataInfoForm.tileSize = '256';
+      this.dialogTitle = '添加图层';
+    }
+  },
+  created() {
+    // 使用 lodash 的 debounce 函数创建防抖版本
+    this.debouncedGetLayerList = debounce(this.getLayerList, 500);
+  },
+  watch: {
+    keyword() {
+      this.debouncedGetLayerList();
+    },
+    dialogFormVisible(val) {
+      if (val === false) {
+        this.initData();
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+header,
+.el-container,
+aside {
+  background-color: #fff;
+}
+header {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  gap: 10px;
+  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+  .el-icon-back {
+    cursor: pointer;
+    &:hover {
+      color: rgb(135, 231, 140);
+    }
+  }
+  span {
+    color: #999;
+    font-style: italic;
+    font-size: 14px;
+  }
+}
+.el-container {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px;
+  padding-top: 5px;
+  border-radius: 3px;
+  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+  .top {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    padding: 20px 40px;
+    width: 100%;
+    border-bottom: 2px solid #d9d9d9;
+    .title {
+      font-weight: bold;
+      font-size: 16px;
+    }
+    .directoryInfo {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-gap: 5px 10px;
+    }
+  }
+  .middle {
+    display: flex;
+    justify-content: space-between;
+    .keyword-filter {
+      display: flex;
+      border-radius: 4px;
+      border: 1px solid #d9d9d9;
+
+      ::v-deep .el-input__inner {
+        border: none;
+      }
+      .search-btn {
+        border: none;
+        border-radius: 0px;
+        border-left: 1px solid #d9d9d9;
+      }
+    }
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    justify-content: space-between;
+    flex: 1;
+    .el-pagination {
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/aiSupervision/layerManage/resource/index.vue

@@ -1,3 +1,270 @@
 <template>
-  <div class="app-container">资源目录</div>
+  <div class="app-container" v-if="!isShowLayerDetails">
+    <el-header>资源目录管理</el-header>
+    <el-container>
+      <el-main>
+        <div class="top">
+          <el-button type="primary" plain @click="dialogFormVisible = true">新增图层资源目录</el-button>
+          <el-dialog title="图层资源目录名称" :visible.sync="dialogFormVisible">
+            <el-form>
+              <el-form-item label="目录名称" :label-width="'120px'">
+                <el-input v-model="currentDirectory.name" autocomplete="off"></el-input>
+              </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button @click="closeDialog">取 消</el-button>
+              <el-button type="primary" @click="addOrEditDirectory">确 定</el-button>
+            </div>
+          </el-dialog>
+          <div class="keyword-filter">
+            <el-input class="keyword-input" placeholder="请输入内容" v-model="keyword" clearable> </el-input>
+            <el-button class="search-btn">搜索</el-button>
+          </div>
+        </div>
+        <div class="table">
+          <el-table :data="tableData" stripe style="width: 100%">
+            <el-table-column
+              type="index"
+              :index="(index) => index + (pageOptions.pageNum - 1) * pageOptions.pageSize + 1"
+              label="序号"
+              width="50"
+              header-align="center"
+            >
+            </el-table-column>
+            <el-table-column prop="id" label="图层资源目录编号" width="180"> </el-table-column>
+            <el-table-column prop="name" label="图层资源目录名称" width="180"> </el-table-column>
+            <el-table-column prop="relationSceneCount" label="关联场景" width="100"> </el-table-column>
+            <el-table-column prop="pubDate" label="创建时间"> </el-table-column>
+            <el-table-column prop="createUser" label="创建人"> </el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button size="mini" @click="showDetails(scope.$index, scope.row)">详情</el-button>
+                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :current-page.sync="pageOptions.pageNum"
+            :total="pageOptions.total"
+            :page-size="pageOptions.pageSize"
+            @current-change="getDirectory"
+          >
+          </el-pagination>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+  <LayerDetailsVue v-else @goback="isShowLayerDetails = false" :directoryInfo="directoryInfo"></LayerDetailsVue>
 </template>
+
+<script>
+import LayerDetailsVue from './LayerDetails.vue';
+import debounce from 'lodash/debounce';
+import { getDirectoryApi, addOrEditDirectoryApi, deleteDirectoryApi } from '@/api/aiSupervision/layerConfigApi.js';
+export default {
+  components: {
+    LayerDetailsVue
+  },
+  data() {
+    return {
+      tableData: [],
+      currentDirectory: {
+        name: '',
+        id: null
+      },
+      pageOptions: {
+        pageNum: 1,
+        pageSize: 12,
+        total: 0
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      keyword: '',
+      dialogFormVisible: false, //是否显示 新增目录 对话框
+      isShowLayerDetails: false, //是否跳转  图层详情界面
+      directoryInfo: null //当前 详情界面 展示的信息对象
+    };
+  },
+  // computed: {
+  //   dataAfterSearch() {
+  //     // 按关键字筛
+  //     return this.tableData.filter(
+  //       (data) => !this.keyword || data.name.toLowerCase().includes(this.keyword.toLowerCase())
+  //     );
+  //   },
+  //   filteredData() {
+  //     // 按页码筛
+  //     return this.dataAfterSearch.slice(
+  //       (this.pageOptions.pageNum - 1) * this.pageOptions.pageSize,
+  //       this.pageOptions.pageNum * this.pageOptions.pageSize
+  //     );
+  //   }
+  // },
+  methods: {
+    showDetails(index, row) {
+      this.isShowLayerDetails = true;
+      this.directoryInfo = row;
+    },
+    async getDirectory() {
+      const params = {
+        pageNum: this.pageOptions.pageNum,
+        pageSize: this.pageOptions.pageSize,
+        ids: null,
+        data: {
+          name: this.keyword
+        },
+        params: {
+          orderBy: 'pub_date',
+          sortBy: 'asc'
+        }
+      };
+      const res = await getDirectoryApi(params);
+      this.tableData = res.data.children;
+      this.pageOptions.total = res.data.total;
+    },
+
+    closeDialog() {
+      this.currentDirectory.name = '';
+      this.currentDirectory.id = '';
+      this.dialogFormVisible = false;
+    },
+    handleEdit(index, row) {
+      console.log(row);
+      this.currentDirectory.name = row.name;
+      this.currentDirectory.id = row.id;
+      this.dialogFormVisible = true;
+    },
+    // 新增目录
+    async addOrEditDirectory() {
+      const reg = /^(\w|[\u4e00-\u9fa5]){3,30}$/g;
+      if (!reg.test(this.currentDirectory.name)) {
+        this.$message({
+          type: 'info',
+          message: '格式有误，目录名称仅支持中文、数字、字母、下划线，最大长度不超过30'
+        });
+        return;
+      }
+      const res = await addOrEditDirectoryApi(this.currentDirectory);
+      if (res.success) {
+        this.$message({
+          type: 'success',
+          message: '新增目录成功!'
+        });
+        this.getDirectory();
+      } else {
+        this.$message({
+          type: 'info',
+          message: '新增目录失败'
+        });
+      }
+      this.closeDialog();
+    },
+    handleDelete(row) {
+      this.$confirm(
+        '删除目录将同时删除该图层资源目录数据以及关联的图层数据，删除后将不可恢复，是否继续删除？',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+        .then(async () => {
+          const res = await deleteDirectoryApi(row.id);
+          if (res.success) {
+            this.getDirectory();
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+    }
+  },
+  mounted() {
+    this.getDirectory();
+  },
+  created() {
+    // 使用 lodash 的 debounce 函数创建防抖版本
+    this.debouncedGetDirectory = debounce(this.getDirectory, 500);
+  },
+  watch: {
+    keyword() {
+      this.debouncedGetDirectory();
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+.el-container {
+  flex: 1;
+  overflow-y: auto;
+  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+  border-radius: 10px;
+  .el-main {
+    display: flex;
+    flex-direction: column;
+    .top {
+      display: flex;
+      justify-content: space-between;
+      ::v-deep .el-dialog__body {
+        .el-input__inner {
+          width: 500px;
+        }
+      }
+
+      .keyword-filter {
+        display: flex;
+        border-radius: 4px;
+        border: 1px solid #d9d9d9;
+
+        ::v-deep .el-input__inner {
+          border: none;
+        }
+        .search-btn {
+          border: none;
+          border-radius: 0px;
+          border-left: 1px solid #d9d9d9;
+        }
+      }
+    }
+    .table {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: space-evenly;
+      .el-pagination {
+        text-align: center;
+      }
+    }
+  }
+}
+header,
+.el-container,
+aside {
+  background-color: #fff;
+}
+header {
+  display: flex;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+}
+</style>

src/views/aiSupervision/waterSetting/runScene/detail/index.vue

@@ -1,10 +1,15 @@
 <script>
 import { MessageBox } from 'element-ui';
 import SceneConfig from './sceneConfig.vue';
+import layerResource from './resource.json';
+import { deepClone } from '@/utils';
+import LayerTree from './layerTree.vue';
+
 export default {
   name: 'RunSceneDetail',
   components: {
-    SceneConfig
+    SceneConfig,
+    LayerTree
   },
   data() {
     return {
@@ -20,31 +25,31 @@ export default {
       activeName: 'data',
       tableData: [
         {
-          num: 'BHA10000001',
+          id: 'BHA10000001',
           name: '飞来峡图层数据',
           addTime: '2024/03/07 12:05',
           description: '图层资源目录描述'
         },
         {
-          num: 'BHA10000002',
+          id: 'BHA10000002',
           name: '乐昌峡图层数据',
           addTime: '2024/03/07 11:05',
           description: '图层资源目录描述'
         },
         {
-          num: 'BHA10000003',
+          id: 'BHA10000003',
           name: '清远峡图层数据',
           addTime: '2024/03/07 09:05',
           description: '图层资源目录描述'
         },
         {
-          num: 'BHA10000004',
+          id: 'BHA10000004',
           name: '北江图层数据',
           addTime: '2024/03/06 09:05',
           description: '图层资源目录描述'
         },
         {
-          num: 'BHA10000005',
+          id: 'BHA10000005',
           name: '西枝江图层数据',
           addTime: '2024/03/05 09:05',
           description: '图层资源目录描述'
@@ -56,7 +61,24 @@ export default {
         pageSizes: [10, 20, 30, 40],
         total: 5
       },
-      keyword: ''
+      keyword: '',
+      dialogVisible: false,
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      layerResourceData: null,
+      layerData: [],
+      layerPageData: {
+        pageNum: 1,
+        pageSize: 10,
+        pageSizes: [10, 20, 30, 40],
+        total: 5
+      },
+      currentNodeId: '',
+      layerTableMap: null,
+      checkedKeys: []
     };
   },
   watch: {
@@ -66,29 +88,105 @@ export default {
           this.$refs.sceneConfig.initMap();
         });
       }
+    },
+    tableData: {
+      handler(val) {
+        this.checkedKeys = [];
+        val?.forEach((item) => {
+          this.checkedKeys.push(item.id);
+        });
+      },
+      immediate: true
     }
   },
+  mounted() {
+    this.dealResourceData();
+    this.layerTableMap = new Map();
+  },
   methods: {
     goBack() {
-      this.$emit('back');
+      this.$router.back();
     },
     viewDetail(item) {
       console.log(item);
     },
     deleteItem(item) {
-      console.log(item);
       MessageBox.confirm(`是否要删除图层“${item.name}”`, '删除提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then((res) => {});
+    },
+    dealResourceData() {
+      this.layerResourceData = [deepClone(layerResource)];
+      const data = [deepClone(layerResource)];
+      this.treeData = this.removeLeafNodes(data);
+    },
+    removeLeafNodes(tree) {
+      return tree.reduce((acc, node) => {
+        // 如果节点有子节点，则保留该节点并递归处理其子节点
+        if (node.children && node.children.length > 0) {
+          node.children = this.removeLeafNodes(node.children); // 递归处理子节点
+          acc.push(node); // 将非叶子节点添加到结果数组中
+        }
+        return acc;
+      }, []); // 初始值是一个空数组
+    },
+    // 添加数据
+    addData() {
+      this.dialogVisible = true;
+    },
+    closeDialog() {
+      this.dialogVisible = false;
+    },
+    handleNodeClick(node) {
+      this.currentNodeId = node.id;
+      const currentNode = this.findNodeById(this.layerResourceData, node.id);
+      if (currentNode?.children) {
+        this.layerData = currentNode.children.filter((item) => item.isLeaf);
+        this.$nextTick(() => {
+          this.tableData.forEach((element) => {
+            const row = this.layerData.find((row) => row.id === element.id);
+            if (row) {
+              this.$refs.layerTable.toggleRowSelection(row, true);
+            }
+          });
+        });
+      }
+    },
+    findNodeById(data, id) {
+      for (let i = 0; i < data.length; i++) {
+        const item = data[i];
+        if (item.id === id) {
+          return item;
+        }
+        if (item.children?.length > 0) {
+          const shotNode = this.findNodeById(item.children, id);
+          if (shotNode) {
+            return shotNode;
+          }
+        }
+      }
+      return null;
+    },
+    handleSelectionChange(val) {
+      this.layerTableMap.set(this.currentNodeId, val);
+    },
+    addLayerData() {
+      this.tableData = [];
+      this.layerTableMap.forEach((value, key) => {
+        this.tableData = this.tableData.concat(value);
+      });
+      this.pageData.pageNum = 1;
+      this.pageData.total = this.tableData.length;
+      this.closeDialog();
     }
   }
 };
 </script>
 
 <template>
-  <div class="content-wrapper">
+  <div class="slider-right content-wrapper">
     <div class="top-title">
       <span class="title" @click="goBack">水利工程运行场景配置</span>
       <span class="split-line">/</span>
@@ -130,17 +228,17 @@ export default {
         <el-tab-pane label="项目数据配置" name="data">
           <div class="table-box">
             <div class="top-search">
-              <el-button type="primary">添加数据</el-button>
+              <el-button type="primary" @click="addData">添加数据</el-button>
               <el-input class="search-input" placeholder="请输入图层目录名称或编号" v-model="keyword">
                 <el-button slot="append">搜索</el-button>
               </el-input>
             </div>
-            <el-table height="625" :data="tableData" border>
+            <el-table height="625" :data="tableData" row-key="id" border>
               <el-table-column type="index" align="left" label="序号" width="80"> </el-table-column>
-              <el-table-column prop="num" align="left" label="图层资源目录编号" width="180"> </el-table-column>
-              <el-table-column prop="name" align="left" label="图层资源目录名称" width="180"> </el-table-column>
+              <el-table-column prop="id" align="left" label="图层资源目录编号"> </el-table-column>
+              <el-table-column prop="name" align="left" label="图层资源目录名称"> </el-table-column>
               <el-table-column prop="addTime" align="left" label="添加时间"> </el-table-column>
-              <el-table-column prop="description" align="left" label="描述" width="180"> </el-table-column>
+              <el-table-column prop="description" align="left" label="描述"> </el-table-column>
               <el-table-column align="center" label="操作" width="180">
                 <template slot-scope="scope">
                   <el-button type="text" @click="viewDetail(scope.row)">目录详情</el-button>
@@ -162,10 +260,58 @@ export default {
           </div>
         </el-tab-pane>
         <el-tab-pane label="项目场景初始化配置" name="scene">
-          <scene-config ref="sceneConfig"></scene-config>
+          <scene-config
+            ref="sceneConfig"
+            :tree-data="layerResourceData"
+            :default-checked-keys="checkedKeys"
+          ></scene-config>
         </el-tab-pane>
       </el-tabs>
     </div>
+    <el-dialog class="sy-dialog" width="50%" title="添加数据" :visible.sync="dialogVisible" @close="closeDialog">
+      <div class="dialog-content">
+        <div class="left-panel">
+          <layer-tree class="filter-tree" :data="treeData" @node-click="handleNodeClick"></layer-tree>
+        </div>
+        <div class="right-panel">
+          <div class="table-box">
+            <div class="top-search">
+              <el-input class="search-input" placeholder="请输入图层名称或编号" v-model="keyword">
+                <el-button slot="append">搜索</el-button>
+              </el-input>
+            </div>
+            <el-table
+              ref="layerTable"
+              max-height="355"
+              :data="layerData"
+              border
+              @selection-change="handleSelectionChange"
+            >
+              <el-table-column type="selection" width="55"> </el-table-column>
+              <el-table-column type="index" align="left" label="序号" width="80"> </el-table-column>
+              <el-table-column prop="id" align="left" label="图层资源目录编号" width="180"> </el-table-column>
+              <el-table-column prop="name" align="left" label="图层资源目录名称" width="180"> </el-table-column>
+              <el-table-column prop="addTime" align="left" label="创建时间"> </el-table-column>
+            </el-table>
+            <div class="pagination-box">
+              <el-pagination
+                background
+                class="pagination"
+                :current-page="layerPageData.pageNum"
+                :page-sizes="layerPageData.pageSizes"
+                :total="layerPageData.total"
+                layout="total, prev, pager, next, sizes, jumper"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button type="primary" @click="addLayerData">添 加</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -223,40 +369,68 @@ export default {
           height: 100%;
         }
       }
-      .table-box {
-        .top-search {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin-bottom: 8px;
+    }
+  }
 
-          .search-input {
-            width: 300px;
-            .el-input-group__append .el-button {
-              border-top-left-radius: 0;
-              border-bottom-left-radius: 0;
-            }
-          }
+  .table-box {
+    .top-search {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+
+      .search-input {
+        width: 300px;
+        .el-input-group__append .el-button {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
         }
+      }
+    }
 
-        .search-btn {
-          margin-left: 10px;
-          background-color: #37b29e;
-          border: none;
+    .search-btn {
+      margin-left: 10px;
+      background-color: #37b29e;
+      border: none;
 
-          &:hover {
-            background-color: #5ac6b9;
-          }
+      &:hover {
+        background-color: #5ac6b9;
+      }
 
-          &:active {
-            background-color: #2b8070;
+      &:active {
+        background-color: #2b8070;
+      }
+    }
+
+    .pagination-box {
+      margin-top: 16px;
+      margin-right: 16px;
+      text-align: right;
+    }
+  }
+
+  /deep/.sy-dialog {
+    .el-dialog__body {
+      padding: 0 20px;
+      .dialog-content {
+        display: flex;
+        flex-direction: row;
+        height: 450px;
+        .left-panel {
+          width: 30%;
+          height: 100%;
+          border-right: 1px solid #e3e3e3;
+          .filter-tree {
+            width: 100%;
+            height: 100%;
+            overflow: auto;
           }
         }
-
-        .pagination-box {
-          margin-top: 16px;
-          margin-right: 16px;
-          text-align: right;
+        .right-panel {
+          flex: 1;
+          padding-left: 10px;
+          height: 100%;
+          overflow: hidden;
         }
       }
     }

src/views/aiSupervision/waterSetting/runScene/detail/layerTree.vue

@@ -0,0 +1,80 @@
+<script>
+export default {
+  name: 'LayerTree',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    defaultCheckedKeys: {
+      type: Array,
+      default: () => []
+    },
+    showSearch: {
+      type: Boolean,
+      default: false
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    nodeKey: {
+      type: String,
+      default: 'id'
+    },
+    defaultProps: {
+      type: Object,
+      default: () => ({
+        children: 'children',
+        label: 'name'
+      })
+    }
+  },
+  data() {
+    return {
+      keyword: ''
+    };
+  },
+  watch: {
+    keyword(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  methods: {
+    handleNodeClick(node, data) {
+      this.$emit('node-click', node, data);
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data[this.defaultProps.label].indexOf(value) !== -1;
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="layer-tree-wrapper">
+    <el-input v-show="showSearch" class="search-btn" v-model="keyword" placeholder="请输入搜索内容"></el-input>
+    <el-tree
+      ref="tree"
+      class="filter-tree"
+      :filter-node-method="filterNode"
+      :show-checkbox="showCheckbox"
+      :default-checked-keys="defaultCheckedKeys"
+      :node-key="nodeKey"
+      :data="data"
+      :props="defaultProps"
+      :expand-on-click-node="false"
+      default-expand-all
+      @node-click="handleNodeClick"
+    ></el-tree>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.layer-tree-wrapper {
+  .search-btn {
+    margin-bottom: 12px;
+  }
+}
+</style>

src/views/aiSupervision/waterSetting/runScene/detail/resource.json

@@ -0,0 +1,98 @@
+{
+  "id": 1,
+  "isLeaf": false,
+  "name": "全部",
+  "children": [
+    {
+      "id": 2,
+      "isLeaf": false,
+      "name": "一级目录1",
+      "children": [
+        {
+          "id": "BHA10000001",
+          "name": "飞来峡图层数据",
+          "addTime": "2024/03/07 12:05",
+          "description": "图层资源目录描述",
+          "isLeaf": true
+        },
+        {
+          "id": "BHA10000002",
+          "name": "乐昌峡图层数据",
+          "addTime": "2024/03/07 11:05",
+          "description": "图层资源目录描述",
+          "isLeaf": true
+        },
+        {
+          "id": "BHA10000003",
+          "name": "清远峡图层数据",
+          "addTime": "2024/03/07 09:05",
+          "description": "图层资源目录描述",
+          "isLeaf": true
+        },
+        {
+          "id": "BHA10000004",
+          "name": "北江图层数据",
+          "addTime": "2024/03/06 09:05",
+          "description": "图层资源目录描述",
+          "isLeaf": true
+        },
+        {
+          "id": "BHA10000005",
+          "name": "西枝江图层数据",
+          "addTime": "2024/03/05 09:05",
+          "description": "图层资源目录描述",
+          "isLeaf": true
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "isLeaf": false,
+      "name": "一级目录2",
+      "children": [
+        {
+          "id": 4,
+          "isLeaf": false,
+          "name": "二级目录1",
+          "children": [
+            {
+              "id": "BHA110000001",
+              "name": "飞来峡图层数据1",
+              "addTime": "2024/03/07 12:05",
+              "description": "图层资源目录描述",
+              "isLeaf": true
+            },
+            {
+              "id": "BHA110000002",
+              "name": "乐昌峡图层数据2",
+              "addTime": "2024/03/07 11:05",
+              "description": "图层资源目录描述",
+              "isLeaf": true
+            },
+            {
+              "id": "BHA110000003",
+              "name": "清远峡图层数据3",
+              "addTime": "2024/03/07 09:05",
+              "description": "图层资源目录描述",
+              "isLeaf": true
+            },
+            {
+              "id": "BHA110000004",
+              "name": "北江图层数据4",
+              "addTime": "2024/03/06 09:05",
+              "description": "图层资源目录描述",
+              "isLeaf": true
+            },
+            {
+              "id": "BHA110000005",
+              "name": "西枝江图层数据5",
+              "addTime": "2024/03/05 09:05",
+              "description": "图层资源目录描述",
+              "isLeaf": true
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

src/views/aiSupervision/waterSetting/runScene/detail/sceneConfig.vue

@@ -1,9 +1,23 @@
 <script>
 import { getCanvasImageAndViewPoint } from '@/utils';
+import LayerTree from './layerTree.vue';
 
 let viewer = undefined;
 export default {
   name: 'SceneConfig',
+  components: {
+    LayerTree
+  },
+  props: {
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    defaultCheckedKeys: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       activeNames: ['1', '2', '3'],
@@ -117,12 +131,47 @@ export default {
             </el-form-item>
           </el-form>
         </el-collapse-item>
+        <el-collapse-item title="初始化图层配置" name="3">
+          <layer-tree
+            :show-search="true"
+            :show-checkbox="true"
+            :default-checked-keys="defaultCheckedKeys"
+            :data="treeData"
+          ></layer-tree>
+        </el-collapse-item>
       </el-collapse>
     </div>
-    <div id="cesiumContainer"></div>
+    <div class="right-panel">
+      <div id="cesiumContainer"></div>
+      <el-popover class="layer-btn" placement="left-start" width="320" trigger="click">
+        <div class="layer-wrapper">
+          <div class="title-box">
+            <span class="title">项目图层资源目录</span>
+          </div>
+          <layer-tree
+            :show-checkbox="true"
+            :show-search="true"
+            :default-checked-keys="defaultCheckedKeys"
+            :data="treeData"
+          ></layer-tree>
+        </div>
+        <el-button slot="reference" icon="el-icon-menu"></el-button>
+      </el-popover>
+    </div>
   </div>
 </template>
 
+<style lang="less">
+.layer-wrapper {
+  .title-box {
+    margin-bottom: 12px;
+    .title {
+      font-size: 16px;
+    }
+  }
+}
+</style>
+
 <style lang="less" scoped>
 .box-wrapper {
   width: 100%;
@@ -137,6 +186,18 @@ export default {
       .el-form-item {
         &.mix {
           text-align: right;
+          .el-form-item__content {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            .el-button {
+              width: 100px;
+            }
+            .el-image {
+              width: 100%;
+              height: 300px;
+            }
+          }
         }
         .el-select {
           width: 100%;
@@ -144,9 +205,20 @@ export default {
       }
     }
   }
-  #cesiumContainer {
+  .right-panel {
     position: relative;
     width: 70%;
+    height: 100%;
+    #cesiumContainer {
+      width: 100%;
+      height: 100%;
+    }
+    .layer-btn {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      z-index: 1;
+    }
   }
 }
 </style>

src/views/aiSupervision/waterSetting/runScene/index.vue

@@ -1,11 +1,7 @@
 <script>
 import { MessageBox } from 'element-ui';
-import RunSceneDetail from './detail/index.vue';
 export default {
   name: 'RunSceneConfig',
-  components: {
-    RunSceneDetail
-  },
   data() {
     return {
       keyword: '',
@@ -59,8 +55,7 @@ export default {
           label: '分组2',
           id: 2
         }
-      ],
-      showDetail: false
+      ]
     };
   },
   methods: {
@@ -77,8 +72,11 @@ export default {
       });
     },
     viewDetail(item) {
-      this.showDetail = true;
       console.log(item);
+      this.$router.push({
+        path: 'runSceneDetail',
+        query: { name: item.name, editor: false, id: item.id }
+      });
     },
     editItem(item) {
       this.isEdit = true;
@@ -102,9 +100,6 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then((res) => {});
-    },
-    goBack() {
-      this.showDetail = false;
     }
   }
 };
@@ -112,7 +107,7 @@ export default {
 
 <template>
   <div class="slider-right">
-    <div class="content-wrapper" v-show="!showDetail">
+    <div class="content-wrapper">
       <div class="top-title">水利工程运行场景配置</div>
       <div class="table-box">
         <div class="top-search">
@@ -148,7 +143,6 @@ export default {
         </div>
       </div>
     </div>
-    <RunSceneDetail v-show="showDetail" @back="goBack"></RunSceneDetail>
     <el-dialog
       class="sy-dialog"
       width="50%"

src/views/dike/runManage/maintenance/maintenanceRecords/index.vue

@@ -297,7 +297,6 @@ export default {
           this.tableData = res.records;
           this.pageData.total = res.total;
         }
-        console.log("🚀表格数据🚀", res);
       });
     },
     // 重置搜索

src/views/dike/runManage/waterRainReport/monitoring/index.vue

@@ -27,20 +27,33 @@
       </div>
       <el-table class="mt-16" height="625" :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="80" />
-        <el-table-column prop="dikeName" align="center" label="堤防名称" />
-        <el-table-column prop="dikeGrad" align="center" label="堤防级别">
+        <el-table-column prop="createTime" align="center" label="巡查时间" />
+        <el-table-column
+          prop="weatherCondition"
+          align="center"
+          label="天气情况"
+        />
+        <el-table-column prop="dikePatt" align="center" label="堤防型式">
           <template #default="{ row }">{{
-            getDikeGrad(row.dikeGrad)
+            getDikePatt(row.dikePatt)
           }}</template>
         </el-table-column>
-        <el-table-column prop="dikeType" align="center" label="堤防类别" />
-        <el-table-column prop="dikeLen" align="center" label="堤防长度" />
-        <el-table-column prop="project" align="center" label="起/终点所在地" />
         <el-table-column
-          prop="engineeringManagementUnit"
+          prop="abnormalCondition"
           align="center"
-          label="工程管理单位"
+          label="异常情况"
         />
+        <el-table-column prop="waterLevel" align="center" label="水位高度">
+          <template #default="{ row }"
+            >{{ row.waterLevel || "-" }} <span>米</span></template
+          >
+        </el-table-column>
+        <el-table-column prop="rainFall" align="center" label="雨量监测">
+          <template #default="{ row }"
+            >{{ row.rainFall || "-" }}
+            <span>m<sup class="font-10">3</sup>/h</span></template
+          >
+        </el-table-column>
         <el-table-column prop="operate" align="center" label="操作">
           <template slot-scope="scope">
             <!-- <el-button type="text" size="small">处置</el-button> -->
@@ -62,10 +75,7 @@
   </div>
 </template>
 <script>
-import { getAreasData } from "@/api/areas/index";
-import { regionData, codeToText, TextToCode } from "element-china-area-data";
-
-import { getDikeWaterRainRecordsList, postProjectChecking } from "@/api/dike";
+import { getDikeWaterRainRecordsList } from "@/api/dike";
 
 export default {
   data() {
@@ -78,21 +88,20 @@ export default {
         total: 0,
       },
       dikeTypeList: [], // 堤防类型列表
-      dikeGradList: [], // 堤防级别列表
+      embankmentTyperOptions: [], // 堤防型式列表
       tableData: [],
     };
   },
   created() {
-    this.getDicts("embankment_level").then((response) => {
-      this.dikeGradList = response.data;
-    });
     this.getDicts("embankment_type").then((response) => {
       this.dikeTypeList = response.data;
     });
+    this.getDicts("embankment_form").then((response) => {
+      this.embankmentTyperOptions = response.data;
+    });
   },
   mounted() {
     this.getTableData();
-    this.getTreeData();
   },
   methods: {
     // 获取列表信息
@@ -119,38 +128,23 @@ export default {
     },
     // 重置搜索条件
     resetSearch() {
-      this.searchDikeName = "";
+      this.searchDateArr = [];
+      this.searchWaterLevel = null;
       this.getTableData();
     },
-
-    // 获取地区树数据
-    getTreeData() {
-      getAreasData().then((items) => {
-        if (items?.data) {
-          let res = [];
-          let getChildren = (res, pid) => {
-            for (const i of items.data) {
-              if (i.parentid === pid) {
-                const newItem = {
-                  label: i.name,
-                  value: i.id,
-                };
-                if (i.layer != 3) newItem.children = [];
-                res.push(newItem);
-                getChildren(newItem.children, newItem.value);
-              }
-            }
-          };
-          getChildren(res, items.data[0].parentid);
-          this.areasOptions = res;
+    // 获取堤防型式
+    getDikePatt(val) {
+      if (val) {
+        let patt = JSON.parse(val);
+        let str = "";
+        for (let i = 0; i < patt.length; i++) {
+          let res = this.embankmentTyperOptions.find(
+            (item) => item.dictValue === patt[i]
+          )?.dictLabel;
+          if (res) str += res + ",";
         }
-      });
-    },
-    getDikeGrad(key) {
-      return (
-        this.dikeGradList?.filter((v) => v.dictValue === key)?.[0]?.dictLabel ||
-        key
-      );
+        return str.slice(0, -1);
+      }
     },
   },
 };

src/views/dike/runManage/waterRainReport/smartAnalyse/index.vue

@@ -2,80 +2,68 @@
 <template>
   <div class="patrol-manage-page">
     <div class="top-title">水雨情智能分析</div>
-    <div class="table-box">
-      <div class="top-search">
-        <span>起/终点所在地：</span>
-        <el-cascader
-          :options="areasOptions"
-          v-model="paramsData.startArea"
-          :props="areasOptionProps"
-          placeholder="请选择"
-          clearable
-          size="small"
-        >
-        </el-cascader>
-        <span>-</span>
-        <el-cascader
-          :options="areasOptions"
-          v-model="paramsData.endArea"
-          :props="areasOptionProps"
-          placeholder="请选择"
-          clearable
-          size="small"
-        >
-        </el-cascader>
-
-        <span class="ml-12">堤防名称：</span>
-        <el-input
-          class="search-input"
-          v-model="searchDikeName"
-          placeholder="请输入"
-        ></el-input>
-        <el-button class="!ml-10" type="success" @click="getTableData()"
-          >搜索</el-button
-        >
-        <el-button @click="resetSearch()">重置</el-button>
-      </div>
-      <el-table class="mt-16" height="625" :data="tableData" border>
-        <el-table-column type="index" align="center" label="序号" width="80" />
-        <el-table-column prop="dikeName" align="center" label="堤防名称" />
-        <el-table-column prop="dikeGrad" align="center" label="堤防级别">
-          <template #default="{ row }">{{
-            getDikeGrad(row.dikeGrad)
-          }}</template>
-        </el-table-column>
-        <el-table-column prop="dikeType" align="center" label="堤防类别" />
-        <el-table-column prop="dikeLen" align="center" label="堤防长度" />
-        <el-table-column prop="project" align="center" label="起/终点所在地" />
-        <el-table-column
-          prop="engineeringManagementUnit"
-          align="center"
-          label="工程管理单位"
-        />
-        <el-table-column prop="operate" align="center" label="操作">
-          <template slot-scope="scope">
-            <!-- <el-button type="text" size="small">处置</el-button> -->
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination
-        background
-        class="pagination"
-        style="margin-top: 16px; margin-right: 16px; float: right"
-        :current-page="pageData.pageNum"
-        :page-sizes="pageData.pageSizes"
-        layout="total, prev, pager, next, sizes, jumper"
-        :total="pageData.total"
-        @size-change="getTableData()"
-      >
-      </el-pagination>
+    <div class="table-box font-14">
+      <el-row>
+        <el-col :span="10">
+          <div>
+            <span>所属流域: </span>
+            <el-select
+              class="w-180"
+              v-model="paramsData.basin"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in basinList"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              ></el-option>
+            </el-select>
+            <span class="ml-10">行政区划: </span>
+            <el-cascader
+              class="w-180"
+              :options="areasOptions"
+              v-model="paramsData.xzqh"
+              :props="areasOptionProps"
+              placeholder="请选择"
+              clearable
+              size="small"
+            >
+            </el-cascader>
+          </div>
+        </el-col>
+        <el-col :span="14">
+          <div class="flex justify-between">
+            <div class="statistic-item">
+              <div>10天内低于分洪水位次数（个）</div>
+              <div class="font-24 mt-10">3</div>
+            </div>
+            <div class="line"></div>
+            <div class="statistic-item">
+              <div>10天内低于分洪水位次数（个）</div>
+              <div class="font-24 mt-10">3</div>
+            </div>
+            <div class="line"></div>
+            <div class="statistic-item">
+              <div>10天内低于分洪水位次数（个）</div>
+              <div class="font-24 mt-10">3</div>
+            </div>
+            <div class="line"></div>
+            <div class="statistic-item">
+              <div>10天内低于分洪水位次数（个）</div>
+              <div class="font-24 mt-10">3</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 <script>
-import { getAreasData } from "@/api/areas/index";
 import { regionData, codeToText, TextToCode } from "element-china-area-data";
+import * as echarts from "echarts";
 
+import { getAreasData } from "@/api/areas/index";
 import { getDikeWaterRainProjectList } from "@/api/dike";
 
 export default {
@@ -92,16 +80,15 @@ export default {
         total: 0,
       },
       paramsData: {
-        startArea: "",
-        endArea: "",
-        dikeGrad: "",
-        dikeName: "",
+        basin: "",
+        xzqh: "",
       },
       areasOptions: [],
       searchDikeName: "",
       dikeTypeList: [], // 堤防类型列表
       dikeGradList: [], // 堤防级别列表
       tableData: [],
+      basinList: [], // 流域字典
     };
   },
   created() {
@@ -123,8 +110,8 @@ export default {
         pageNum: this.pageData.pageNum,
         pageSize: this.pageData.pageSize,
         data: {
-          dikeType: this.dikeType || "",
-          dikeName: this.searchDikeName || "",
+          basin: this.paramsData.basin || "",
+          xzqh: this.paramsData.xzqh,
         },
       }).then((res) => {
         if (res) {
@@ -133,6 +120,82 @@ export default {
         }
       });
     },
+    barInit() {
+      let chartDom = this.$refs.barEle;
+      let myChart = echarts.init(chartDom);
+      let option = {
+        title: {
+          // text: "World Population",
+        },
+        color: ["#38A0FF", "#4CCA73", "#FBD437"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        // legend: {
+        //   orient: "horizontal",
+        //   bottom: "2%",
+        //   icon: "circle",
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          top: "10%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            alignWithLabel: true,
+          },
+          data: this.barChartData.name,
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            //网格线
+            show: true, //是否显示
+            lineStyle: {
+              //网格线样式
+              // color: "#0735a2", //网格线颜色
+              // width: 1, //网格线的加粗程度
+              type: "dashed", //网格线类型
+            },
+          },
+          minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
+          max: function (value) {
+            return value.max + Math.ceil(0.2 * value.max);
+          },
+          // boundaryGap: [0, 1],
+        },
+
+        series: [
+          {
+            name: "完成率（%）",
+            type: "bar",
+            data: [],
+            barMaxWidth: "10%",
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
     // 重置搜索条件
     resetSearch() {
       this.searchDikeName = "";
@@ -210,19 +273,20 @@ export default {
     margin-top: 24px;
     padding: 16px;
     background-color: white;
+  }
 
-    .top-search {
-      margin-bottom: 8px;
-
-      .search-input {
-        width: 202px;
-        margin-right: 10px;
-      }
-    }
+  .statistic-item {
+    padding: 20px;
+    border-radius: 4px;
+    background: linear-gradient(to bottom, #ffe4d2 0%, #fff7f1 100%);
+  }
+  .line {
+    width: 2px;
+    background: #fff;
+  }
 
-    .table {
-      height: calc(680px - 34px);
-    }
+  .w-180 {
+    width: 180px !important;
   }
 }
 </style>

src/views/dike/runManage/waterRainReport/testReportManage/index.vue

@@ -7,7 +7,7 @@
         <span>起/终点所在地：</span>
         <el-cascader
           :options="areasOptions"
-          v-model="paramsData.startArea"
+          v-model="paramsData.startAdcd"
           :props="areasOptionProps"
           placeholder="请选择"
           clearable
@@ -17,7 +17,7 @@
         <span>-</span>
         <el-cascader
           :options="areasOptions"
-          v-model="paramsData.endArea"
+          v-model="paramsData.endAdcd"
           :props="areasOptionProps"
           placeholder="请选择"
           clearable
@@ -53,9 +53,17 @@
             getDikeGrad(row.dikeGrad)
           }}</template>
         </el-table-column>
-        <el-table-column prop="dikeType" align="center" label="堤防类别" />
+        <el-table-column prop="dikeType" align="center" label="堤防类别">
+          <template #default="{ row }">{{
+            getDikeType(row.dikeType)
+          }}</template>
+        </el-table-column>
         <el-table-column prop="dikeLen" align="center" label="堤防长度" />
-        <el-table-column prop="project" align="center" label="起/终点所在地" />
+        <el-table-column prop="project" align="center" label="起/终点所在地">
+          <template #default="{ row }">
+            {{ getAreas(row) }}
+          </template>
+        </el-table-column>
         <el-table-column
           prop="engineeringManagementUnit"
           align="center"
@@ -112,8 +120,8 @@ export default {
         total: 0,
       },
       paramsData: {
-        startArea: "",
-        endArea: "",
+        startAdcd: "",
+        endAdcd: "",
         dikeGrad: "",
         dikeName: "",
       },
@@ -142,8 +150,8 @@ export default {
         pageNum: this.pageData.pageNum,
         pageSize: this.pageData.pageSize,
         data: {
-          startArea: this.paramsData.startArea || "",
-          endArea: this.paramsData.endArea || "",
+          startAdcd: this.paramsData.startAdcd || "",
+          endAdcd: this.paramsData.endAdcd || "",
           dikeGrad: this.paramsData.dikeGrad || "",
           dikeName: this.paramsData.dikeName || "",
         },
@@ -158,8 +166,8 @@ export default {
     resetSearch() {
       this.paramsData.dikeGrad = "";
       this.paramsData.dikeName = "";
-      this.paramsData.startArea = "";
-      this.paramsData.endArea = "";
+      this.paramsData.startAdcd = "";
+      this.paramsData.endAdcd = "";
       this.getTableData();
     },
     // 水雨情监测
@@ -205,12 +213,24 @@ export default {
         }
       });
     },
+    // 获取堤防级别
     getDikeGrad(key) {
       return (
         this.dikeGradList?.filter((v) => v.dictValue === key)?.[0]?.dictLabel ||
         key
       );
     },
+    // 获取堤防类型
+    getDikeType(key) {
+      return (
+        this.dikeTypeList?.filter((v) => v.dictValue === key)?.[0]?.dictLabel ||
+        key
+      );
+    },
+    // 获取地区
+    getAreas(row) {
+      return codeToText[row.adcdStart] + "-" + codeToText[row.adcdEnd];
+    },
   },
 };
 </script>

src/views/sluice/runManage/waterRainReport/monitoring/index.vue

@@ -27,20 +27,33 @@
       </div>
       <el-table class="mt-16" height="625" :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="80" />
-        <el-table-column prop="wagaName" align="center" label="水闸名称" />
-        <el-table-column prop="wagaGrad" align="center" label="水闸级别">
+        <el-table-column prop="createTime" align="center" label="巡查时间" />
+        <el-table-column
+          prop="weatherCondition"
+          align="center"
+          label="天气情况"
+        />
+        <el-table-column prop="doorStatus" align="center" label="闸门情况">
           <template #default="{ row }">{{
-            getDikeGrad(row.wagaGrad)
+            row.doorStatus == "1" ? "打开" : "关闭"
           }}</template>
         </el-table-column>
-        <el-table-column prop="wagaType" align="center" label="水闸类别" />
-        <el-table-column prop="wagaLen" align="center" label="水闸长度" />
-        <el-table-column prop="project" align="center" label="起/终点所在地" />
         <el-table-column
-          prop="engineeringManagementUnit"
+          prop="abnormalCondition"
           align="center"
-          label="工程管理单位"
+          label="异常情况"
         />
+        <el-table-column prop="waterLevel" align="center" label="水位高度">
+          <template #default="{ row }"
+            >{{ row.waterLevel || "-" }} <span>米</span></template
+          >
+        </el-table-column>
+        <el-table-column prop="gateFlow" align="center" label="过闸流量">
+          <template #default="{ row }"
+            >{{ row.gateFlow || "-" }}
+            <span>m<sup class="font-10">3</sup>/h</span></template
+          >
+        </el-table-column>
         <el-table-column prop="operate" align="center" label="操作">
           <template slot-scope="scope">
             <!-- <el-button type="text" size="small">处置</el-button> -->
@@ -62,9 +75,6 @@
   </div>
 </template>
 <script>
-import { getAreasData } from "@/api/areas/index";
-import { regionData, codeToText, TextToCode } from "element-china-area-data";
-
 import { getSluiceWaterRainRecordsList } from "@/api/sluice";
 
 export default {
@@ -77,22 +87,12 @@ export default {
         pageSize: 10,
         total: 0,
       },
-      wagaTypeList: [], // 水闸类型列表
-      wagaGradList: [], // 水闸级别列表
       tableData: [],
     };
   },
-  created() {
-    this.getDicts("embankment_level").then((response) => {
-      this.wagaGradList = response.data;
-    });
-    this.getDicts("embankment_type").then((response) => {
-      this.wagaTypeList = response.data;
-    });
-  },
+  created() {},
   mounted() {
     this.getTableData();
-    this.getTreeData();
   },
   methods: {
     // 获取列表信息
@@ -119,39 +119,10 @@ export default {
     },
     // 重置搜索条件
     resetSearch() {
-      this.searchDikeName = "";
+      this.searchDateArr = [];
+      this.searchWaterLevel = null;
       this.getTableData();
     },
-
-    // 获取地区树数据
-    getTreeData() {
-      getAreasData().then((items) => {
-        if (items?.data) {
-          let res = [];
-          let getChildren = (res, pid) => {
-            for (const i of items.data) {
-              if (i.parentid === pid) {
-                const newItem = {
-                  label: i.name,
-                  value: i.id,
-                };
-                if (i.layer != 3) newItem.children = [];
-                res.push(newItem);
-                getChildren(newItem.children, newItem.value);
-              }
-            }
-          };
-          getChildren(res, items.data[0].parentid);
-          this.areasOptions = res;
-        }
-      });
-    },
-    getDikeGrad(key) {
-      return (
-        this.wagaGradList?.filter((v) => v.dictValue === key)?.[0]?.dictLabel ||
-        key
-      );
-    },
   },
 };
 </script>

src/views/system/testD3/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="position: relative">
     <!--width,height 画布的宽度，高度。 可以是百分比或像素，一般在dom元素上设置 -->
-    <div id="network_id" class="network" style="height:80vh"></div>
+    <div id="network_id" class="network" style="height: 80vh"></div>
     <!--    <div class="type-box" v-if="labelList && labelList.length">-->
     <!--      <el-radio-group v-model="type" @change="initRelation" style="width: 150px;">-->
     <!--        <el-radio label="" style="width: 120px;display: block;margin-right: 0px;margin: 5px 0px">-->
@@ -44,33 +44,33 @@
   </div>
 </template>
 <script>
-import Vis from "vis";
+import Vis from 'vis';
 
 export default {
-  name: "vis-graph",
+  name: 'vis-graph',
   props: {
     relationsView: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
     showTools: {
       type: Boolean,
       default() {
-        return true
+        return true;
       }
     },
     labelList: {
       type: Array,
       default() {
-        return []
+        return [];
       }
     },
     colorMap: {
       type: Map,
       default() {
-        return new Map()
+        return new Map();
       }
     }
   },
@@ -93,14 +93,14 @@ export default {
       edgesArray: [],
       options: {},
       data: {},
-      isInit: false,
+      isInit: false
     };
   },
   methods: {
     deleteRelation() {
       if (this.currentId) {
-        this.$emit("deleteRelation", this.currentId);
-        this.hideCircle()
+        this.$emit('deleteRelation', this.currentId);
+        this.hideCircle();
       }
     },
     deleteNode() {
@@ -111,34 +111,32 @@ export default {
       this.dataSet = new Set();
       this.linkSet = new Set();
       let _this = this;
-      links.forEach(d => {
+      links.forEach((d) => {
         if (!_this.linkSet.has(d.id)) {
           _this.edgesArray.push({
             to: d.to,
             from: d.from,
-            label: d.properties ? d.properties.name : "",
-            'arrows': 'to',
+            label: d.properties ? d.properties.name : '',
+            arrows: 'to',
             id: d.id
-          })
+          });
           _this.linkSet.add(d.id);
         }
-
-      })
-      datas.forEach(d => {
+      });
+      datas.forEach((d) => {
         if (!_this.dataSet.has(d.id)) {
           _this.nodesArray.push({
             id: d.id,
             labelId: d.labelId,
-            label: d.name, color: {background: _this.colorMap.get(d.labelId)}
+            label: d.name,
+            color: { background: _this.colorMap.get(d.labelId) }
           });
           _this.dataSet.add(d.id);
         }
-
-      })
+      });
       _this.init();
     },
     init() {
-      debugger
       if (this.network) {
         this.network.destroy();
       }
@@ -147,14 +145,14 @@ export default {
       _this.nodes = new Vis.DataSet(_this.nodesArray);
       //2.创建一个edges数组
       _this.edges = new Vis.DataSet(_this.edgesArray);
-      _this.container = document.getElementById("network_id");
+      _this.container = document.getElementById('network_id');
       _this.data = {
         nodes: _this.nodes,
         edges: _this.edges
       };
       _this.options = {
         autoResize: true, //网络将自动检测其容器的大小调整，并相应地重绘自身
-        locale: "cn", //语言设置：工具栏显示中文
+        locale: 'cn', //语言设置：工具栏显示中文
         // configure:{
         //   showButton: true
         // },
@@ -162,18 +160,18 @@ export default {
         locales: {
           cn: {
             //工具栏中文翻译
-            edit: "编辑",
-            del: "删除当前节点或关系",
-            back: "返回",
-            addNode: "添加节点",
-            addEdge: "添加连线",
-            editNode: "编辑节点",
-            editEdge: "编辑连线",
-            addDescription: "点击空白处可添加节点",
-            edgeDescription: "点击某个节点拖拽连线可连接另一个节点",
-            editEdgeDescription: "可拖拽连线改变关系",
-            createEdgeError: "无法将边连接到集群",
-            deleteClusterError: "无法删除集群.",
+            edit: '编辑',
+            del: '删除当前节点或关系',
+            back: '返回',
+            addNode: '添加节点',
+            addEdge: '添加连线',
+            editNode: '编辑节点',
+            editEdge: '编辑连线',
+            addDescription: '点击空白处可添加节点',
+            edgeDescription: '点击某个节点拖拽连线可连接另一个节点',
+            editEdgeDescription: '可拖拽连线改变关系',
+            createEdgeError: '无法将边连接到集群',
+            deleteClusterError: '无法删除集群.',
             editClusterError: "无法编辑群集'"
           }
         },
@@ -183,34 +181,34 @@ export default {
           myGroupId: {},
           ws: {
             //系统定义的形状 dot等  这些官网都可以找到
-            shape: "dot",
-            color: "white"
+            shape: 'dot',
+            color: 'white'
           }
         },
         // 设置节点样式
         nodes: {
           //节点的外观。为circle时label显示在节点内，为dot时label显示在节点下方
-          shape: "dot",
+          shape: 'dot',
           size: 50,
           fixed: false,
           font: {
             //字体配置
-            size: 24,
+            size: 24
             //文字向下移动的位置
             // vadjust:-75
           },
           color: {
-            border: "#2B7CE9", //节点边框颜色
-            background: "#97C2FC", //节点背景颜色
+            border: '#2B7CE9', //节点边框颜色
+            background: '#97C2FC', //节点背景颜色
             highlight: {
               //节点选中时状态颜色
-              border: "#2B7CE9",
-              background: "#D2E5FF"
+              border: '#2B7CE9',
+              background: '#D2E5FF'
             },
             hover: {
               //节点鼠标滑过时状态颜色
-              border: "#2B7CE9",
-              background: "#D2E5FF"
+              border: '#2B7CE9',
+              background: '#D2E5FF'
             }
           },
           mass: 5,
@@ -224,10 +222,10 @@ export default {
           width: 1,
           length: 260,
           color: {
-            color: "#848484",
-            highlight: "#848484",
-            hover: "#848484",
-            inherit: "from",
+            color: '#848484',
+            highlight: '#848484',
+            hover: '#848484',
+            inherit: 'from',
             opacity: 1.0
           },
           shadow: true,
@@ -235,7 +233,7 @@ export default {
             //设置两个节点之前的连线的状态
             enabled: true //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
           },
-          arrows: {to: true} //箭头指向to
+          arrows: { to: true } //箭头指向to
         },
         //计算节点之前斥力，进行自动排列的属性
         physics: {
@@ -272,11 +270,7 @@ export default {
         }
       };
 
-      _this.network = new Vis.Network(
-        _this.container,
-        _this.data,
-        _this.options
-      );
+      _this.network = new Vis.Network(_this.container, _this.data, _this.options);
     },
 
     resetAllNodes() {
@@ -290,11 +284,7 @@ export default {
         edges: _this.edges
       };
       //   network是一种用于将包含点和线的网络和网络之间的可视化展示
-      _this.network = new Vis.Network(
-        _this.container,
-        _this.data,
-        _this.options
-      );
+      _this.network = new Vis.Network(_this.container, _this.data, _this.options);
     },
     resetAllNodesStabilize() {
       let _this = this;
@@ -303,65 +293,61 @@ export default {
     },
     parentDeleteRelation(id) {
       console.log(id);
-      this.edgesArray = this.edgesArray.filter(row => row.id != id)
+      this.edgesArray = this.edgesArray.filter((row) => row.id != id);
       console.log(this.data.edges);
-      this.data.edges.remove(id)
+      this.data.edges.remove(id);
       console.log(this.data.edges);
-      this.linkSet.delete(id)
+      this.linkSet.delete(id);
     },
     addDatas(datas) {
       let _this = this;
       if (datas.nodes && datas.nodes.length > 0) {
-        datas.links.forEach(d => {
+        datas.links.forEach((d) => {
           if (!_this.linkSet.has(d.id)) {
             _this.linkSet.add(d.id);
             let link = {
               to: d.to,
               from: d.from,
-              label: d.properties ? d.properties.name : "",
-              'arrows': 'to',
+              label: d.properties ? d.properties.name : '',
+              arrows: 'to',
               id: d.id
             };
-            _this.edgesArray.push(link)
-            _this.data.edges.add(link)
-
+            _this.edgesArray.push(link);
+            _this.data.edges.add(link);
           }
-
-        })
-        datas.nodes.forEach(d => {
+        });
+        datas.nodes.forEach((d) => {
           if (!_this.dataSet.has(d.id)) {
             _this.dataSet.add(d.id);
             let node = {
               id: d.id,
               labelId: d.labelId,
-              label: d.name, color: {background: _this.colorMap.get(d.labelId)}
-            }
+              label: d.name,
+              color: { background: _this.colorMap.get(d.labelId) }
+            };
             _this.nodesArray.push(node);
 
             _this.data.nodes.add(node);
           }
-
-        })
+        });
       }
-
-
     },
     addOneNode() {
       if (this.currentId) {
-        this.$emit("nextNode", this.currentId);
+        this.$emit('nextNode', this.currentId);
       }
     },
     addRelation() {
       if (this.currentId) {
-        this.$emit("addNode", this.currentId);
+        this.$emit('addNode', this.currentId);
       }
     },
     editNode() {
-      this.$emit("updateNode", this.currentId)
-      this.hideCircle()
+      this.$emit('updateNode', this.currentId);
+      this.hideCircle();
     },
     toDetail() {
-      this.$emit("toDetail", this.currentId)
+      this.$emit('toDetail', this.currentId);
     },
     //  设置环形位置
     setCirclePosition() {
@@ -369,14 +355,16 @@ export default {
       // this.domPosi["y"] + 10,
       // this.scale + 0.4
 
-      let circle = document.getElementById("circle-option");
-      circle.style = `left: ${this.domPosi["x"] - 50}px; top: ${this.domPosi["y"] - 50}px;transform:scale(${this.scale * 2.5});display:block;`;
+      let circle = document.getElementById('circle-option');
+      circle.style = `left: ${this.domPosi['x'] - 50}px; top: ${this.domPosi['y'] - 50}px;transform:scale(${
+        this.scale * 2.5
+      });display:block;`;
     },
     // 隐藏圆环选项
     hideCircle() {
-      let circle = document.getElementById("circle-option");
+      let circle = document.getElementById('circle-option');
       circle.style = `display:none;`;
-    },
+    }
   },
   watch: {
     domPosi(newval) {
@@ -395,15 +383,15 @@ export default {
         }
       },
       deep: true,
-      immediate: true,
+      immediate: true
     },
     labelList: {
       handler(newVal) {
         this.labelList = newVal;
       },
       deep: true,
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   mounted() {
     //获取类别的颜色
@@ -411,38 +399,38 @@ export default {
 
     this.init();
 
-    this.network.on("stabilized", param => {
+    this.network.on('stabilized', (param) => {
       // console.log("图谱渲染完成", param)
-    })
-    this.network.on("zoom", param => {
+    });
+    this.network.on('zoom', (param) => {
       if (this.currentId) {
-        let circle = document.getElementById("circle-option");
-        if ("none" !== circle.style.display) {
+        let circle = document.getElementById('circle-option');
+        if ('none' !== circle.style.display) {
           this.scale = param.scale;
           let p = this.network.getPositions(this.currentId);
           // this.scale = _this.network.getScale();
           this.domPosi = this.network.canvasToDOM({
-            x: p[this.currentId]["x"],
-            y: p[this.currentId]["y"],
+            x: p[this.currentId]['x'],
+            y: p[this.currentId]['y']
           });
         }
       } else {
         this.hideCircle();
       }
-    })
-    this.network.on("dragStart", param => {
+    });
+    this.network.on('dragStart', (param) => {
       // this.currentId = param.nodes[0]
       this.isInit = false;
       this.hideCircle();
-    })
-    this.network.on("dragEnd", param => {
+    });
+    this.network.on('dragEnd', (param) => {
       if (param.nodes && param.nodes.length > 0) {
-        this.network.clustering.updateClusteredNode(param.nodes[0], {physics: false});
+        this.network.clustering.updateClusteredNode(param.nodes[0], { physics: false });
       }
       this.hideCircle();
-    })
+    });
     // 点击事件
-    this.network.on("click", params => {
+    this.network.on('click', (params) => {
       if (!this.showTools) {
         return;
       }
@@ -450,32 +438,32 @@ export default {
       let _this = this;
       if (params.nodes && params.nodes.length > 0) {
         _this.currentId = params.nodes[0];
-        _this.network.clustering.updateClusteredNode(_this.currentId, {physics: false});
-        if (_this.currentId) { //节点点击
+        _this.network.clustering.updateClusteredNode(_this.currentId, { physics: false });
+        if (_this.currentId) {
+          //节点点击
           // _this.network.
           let p = _this.network.getPositions(_this.currentId);
           _this.scale = _this.network.getScale();
           _this.domPosi = _this.network.canvasToDOM({
-            x: p[_this.currentId]["x"],
-            y: p[_this.currentId]["y"],
+            x: p[_this.currentId]['x'],
+            y: p[_this.currentId]['y']
           });
           // 设置环形位置;
           _this.setCirclePosition();
-          $(".custom-menu").hide();
+          $('.custom-menu').hide();
         } else {
           this.hideCircle();
         }
       } else if (params.edges && params.edges.length) {
       } else {
         this.hideCircle();
-        $(".custom-menu").hide();
+        $('.custom-menu').hide();
       }
     });
   }
 };
 </script>
 <style lang="scss">
-
 .circle-option {
   position: absolute;
   left: 0px;
@@ -560,12 +548,13 @@ export default {
 }
 
 .custom-menu div a {
-  font-family: "微软雅黑";
+  font-family: '微软雅黑';
   font-size: 14px;
   color: rgb(255, 255, 255);
 }
 
-.custom-menu div a:HOVER, .custom-menu div a:ACTIVE {
+.custom-menu div a:hover,
+.custom-menu div a:active {
   cursor: pointer;
   color: orange;
 }

vue.config.js

@@ -43,6 +43,15 @@ module.exports = {
       //     [process.env.VUE_APP_BASE_API +'/run/sz/superviseWay']: '/tianhui-admin-web/run/sz/superviseWay'
       //   }
       // },
+
+      // 曹琪本地接口
+      // [process.env.VUE_APP_BASE_API]: {
+      //   target: 'http://172.16.34.59:18083',
+      //   changeOrigin: true,
+      //   pathRewrite: {
+      //     ['^' + process.env.VUE_APP_BASE_API]: '/tianhui-admin-web'
+      //   }
+      // },
       [process.env.VUE_APP_BASE_API]: {
         target: 'http://shuili-admin.product.dev.com:30115',
         // target: "http://127.0.0.1:18082",
@@ -51,6 +60,13 @@ module.exports = {
           ['^' + process.env.VUE_APP_BASE_API]: '/tianhui-admin-web'
         }
       },
+      '/iserver': {
+        target: 'http://172.16.32.63:52111/iserver/services',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/iserver': ''
+        }
+      },
       '/mapserver': {
         target: 'http://172.16.32.63/tiles',
         changeOrigin: true,
@@ -68,7 +84,6 @@ module.exports = {
         '@': resolve('src')
       }
     },
-    devtool: 'source-map',
     plugins: [
       new webpack.ProvidePlugin({
         $: 'jquery',