From 352d15cf8028175170402a0ba28cd85b1bbc5557 Mon Sep 17 00:00:00 2001
From: yantingyu <1904823781@qq.com>
Date: Sat, 9 Mar 2024 11:57:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E5=B1=82=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/aiSupervision/layerConfigApi.js       |  31 ++
 src/utils/request.js                          |   1 -
 src/views/aiSupervision/layerManage/index.vue |   2 +-
 .../layerManage/resource/LayerDetails.vue     | 283 ++++++++++++++++++
 .../layerManage/resource/index.vue            | 249 ++++++++++++++-
 vue.config.js                                 |   7 +
 6 files changed, 570 insertions(+), 3 deletions(-)
 create mode 100644 src/api/aiSupervision/layerConfigApi.js
 create mode 100644 src/views/aiSupervision/layerManage/resource/LayerDetails.vue

diff --git a/src/api/aiSupervision/layerConfigApi.js b/src/api/aiSupervision/layerConfigApi.js
new file mode 100644
index 0000000..a81676d
--- /dev/null
+++ b/src/api/aiSupervision/layerConfigApi.js
@@ -0,0 +1,31 @@
+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() {
+  return request({
+    url: `/map/layerDir/getAllTreeDir`,
+    method: 'get'
+  });
+}
+
+export function deleteDirectoryApi(id) {
+  return request({
+    url: `/map/layerDir/deleteDir`,
+    method: 'delete',
+    params: {
+      dirId: id
+    }
+  });
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 5397e07..17977e2 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -95,5 +95,4 @@ service.interceptors.response.use(res => {
     return Promise.reject(error)
   }
 )
-
 export default service
diff --git a/src/views/aiSupervision/layerManage/index.vue b/src/views/aiSupervision/layerManage/index.vue
index dca0b09..5a0a85c 100644
--- a/src/views/aiSupervision/layerManage/index.vue
+++ b/src/views/aiSupervision/layerManage/index.vue
@@ -1,6 +1,6 @@
 <template>
   <Layout>
-    <router-view />
+    <!-- <router-view /> -->
   </Layout>
 </template>
 
diff --git a/src/views/aiSupervision/layerManage/resource/LayerDetails.vue b/src/views/aiSupervision/layerManage/resource/LayerDetails.vue
new file mode 100644
index 0000000..71af44d
--- /dev/null
+++ b/src/views/aiSupervision/layerManage/resource/LayerDetails.vue
@@ -0,0 +1,283 @@
+<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> 图层数量： {{ (directoryInfo.children && directoryInfo.children.length) || 0 }}</span>
+          <span> 创建时间： {{ directoryInfo.pubDate }}</span>
+          <span> 创建人：{{ directoryInfo.createUser }} </span>
+        </div>
+      </div>
+      <div class="middle">
+        <el-button type="primary" plain>添加图层</el-button>
+        <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" label="序号" width="50" header-align="center"> </el-table-column>
+          <el-table-column prop="date" label="图层资源目录编号" width="180"> </el-table-column>
+          <el-table-column prop="name" label="图层资源目录名称" width="180"> </el-table-column>
+          <el-table-column prop="address" label="创建时间"> </el-table-column>
+          <el-table-column prop="address" label="创建人"> </el-table-column>
+          <el-table-column prop="address" 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.$index, scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>
+      </div>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import { getDirectoryApi } from '@/api/aiSupervision/layerConfigApi.js';
+export default {
+  props: ['directoryInfo'],
+  data() {
+    return {
+      tableData: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      keyword: ''
+    };
+  },
+  mounted() {
+    console.log(this.directoryInfo);
+  },
+  methods: {
+    goBack() {
+      this.$emit('goback');
+    }
+  }
+};
+</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;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/aiSupervision/layerManage/resource/index.vue b/src/views/aiSupervision/layerManage/resource/index.vue
index 0767efa..a030613 100644
--- a/src/views/aiSupervision/layerManage/resource/index.vue
+++ b/src/views/aiSupervision/layerManage/resource/index.vue
@@ -1,3 +1,250 @@
 <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="filteredData" stripe style="width: 100%">
+            <el-table-column
+              type="index"
+              :index="(index) => index + (pageOptions.currentPage - 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.currentPage"
+            :total="dataAfterSearch.length"
+            :page-size="pageOptions.pageSize"
+            @current-change="pageChange"
+          >
+          </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 { getDirectoryApi, addOrEditDirectoryApi, deleteDirectoryApi } from '@/api/aiSupervision/layerConfigApi.js';
+export default {
+  components: {
+    LayerDetailsVue
+  },
+  data() {
+    return {
+      tableData: [],
+      currentDirectory: {
+        name: '',
+        id: null
+      },
+      pageOptions: {
+        currentPage: 1,
+        pageSize: 12
+      },
+      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.currentPage - 1) * this.pageOptions.pageSize,
+        this.pageOptions.currentPage * this.pageOptions.pageSize
+      );
+    }
+  },
+  methods: {
+    showDetails(index, row) {
+      this.isShowLayerDetails = true;
+      this.directoryInfo = row;
+    },
+    pageChange(currentPage) {
+      this.pageOptions.currentPage = currentPage;
+    },
+    async getDirectory() {
+      const res = await getDirectoryApi();
+      this.tableData = res.data[0].children;
+      this.pageOptions.currentPage = 1;
+    },
+
+    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();
+  }
+};
+</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>
diff --git a/vue.config.js b/vue.config.js
index a651dec..7751175 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -51,6 +51,13 @@ module.exports = {
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: '/tianhui-admin-web'
         }
+      },
+      "iserver":{
+        target:"http://172.16.32.63:52111/iserver/services",
+        changeOrigin: true,
+        pathRewrite: {
+          'iserver': ''
+        }
       }
     },
     disableHostCheck: true