Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev

2022-06-29 15:50:41 +08:00 · 2022-06-29 15:50:41 +08:00 · b4dc1b3d83
parent 24e8607277 53e03ef413
commit b4dc1b3d83
51 changed files with 3255 additions and 1155 deletions
--- a/back/package.json
+++ b/back/package.json
@ -22,6 +22,7 @@
    "carddragger": "^0.3.6",
    "clipboard": "^2.0.6",
    "core-js": "^3.6.5",
+    "crypto-js": "^4.1.1",
    "echarts": "^4.7.0",
    "element-ui": "^2.13.2",
    "file-saver": "^2.0.5",
--- a/back/src/assets/img/CapabilityOperationMonitoring/API-allNum.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/API-allNum.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/API-badNum.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/API-badNum.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/bg-blue.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/bg-blue.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/bg-yellow.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/bg-yellow.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/calendar.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/calendar.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-bule-bg.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-bule-bg.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-bule.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-bule.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-grenn-bg.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-grenn-bg.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-grenn.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-grenn.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-red-bg.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-red-bg.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-red.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-red.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/上一页.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/上一页.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/下一页.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/下一页.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/下拉.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/下拉.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/更多.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/更多.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/消息.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/消息.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/消息中心.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/消息中心.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/账号下拉.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/账号下拉.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/选择.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/选择.png
--- a/back/src/assets/img/一级图标.png
+++ b/back/src/assets/img/一级图标.png
--- a/back/src/assets/img/搜索.png
+++ b/back/src/assets/img/搜索.png
--- a/back/src/views/modules/ability/bsinfrastructure.vue
+++ b/back/src/views/modules/ability/bsinfrastructure.vue
@ -46,8 +46,8 @@
 <script>
 import mixinViewModule from '@/mixins/view-module'
 // import AddOrUpdate from './order-add-or-update'
-import {addDynamicRoute} from "@/router";
-import RelateApplication from "./bsabilityai-relate-application.vue"
+import { addDynamicRoute } from '@/router'
+import RelateApplication from './bsabilityai-relate-application.vue'
 export default {
  mixins: [mixinViewModule],
  data () {
@ -62,7 +62,7 @@ export default {
        orderId: '',
        status: '',
        userId: '',
-        type: "基础设施",
+        type: '基础设施'
      },
      // 关联应用弹窗
      relateApplicationVisible: false,
@ -75,31 +75,31 @@ export default {
  },
  components: {
    // AddOrUpdate,
-    RelateApplication,
+    RelateApplication
  },
  methods: {
-     //重置
-     resetDataList(){
-        this.dataForm=this.noDataForm;
-        this.page=1;                    // 当前页码
-        this.query();
-     },
-      // 点击关联应用按钮
-    showRelateApplication(row){
+    // 重置
+    resetDataList () {
+      this.dataForm.orderId = ''
+      this.page = 1 // 当前页码
+      this.query()
+    },
+    // 点击关联应用按钮
+    showRelateApplication (row) {
      this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
-        if( res && res.data ) {
-          this.relateApplicationVisible = true;
+        if (res && res.data) {
+          this.relateApplicationVisible = true
          this.relateInfo = {
            id: row.id,
            responseData: res.data,
            linkType: '2'
-          };
+          }
        }
      }).catch(() => { })
    },
-      // 是否展示关联应用弹窗
-    handleIsShowRelatePopup(type) {
-      this.relateApplicationVisible = type;
+    // 是否展示关联应用弹窗
+    handleIsShowRelatePopup (type) {
+      this.relateApplicationVisible = type
    }

  }
--- a/back/src/views/modules/abilityStatistics/index.vue
+++ b/back/src/views/modules/abilityStatistics/index.vue
@ -1,5 +1,26 @@
 <template>
-<div>
+<div class='container'>
+    <div class='container-left'>
+        <div class='left-search'>
+            <div>
+                <input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
+                <div class='input-search'  @click='searchBtn'>
+                    <img src="@/assets/img/搜索.png" style='margin-top:7px;margin-left:16px' >
+                </div>
+            </div>
+        </div>
+        <el-tree
+            class='tree-style'
+            :data="treeData"
+            :props="defaultProps"
+            accordion
+            @node-click="handleNodeClick">
+           <span slot-scope="{ node }" class='tree-text-style'>
+                <img  src="@/assets/img/一级图标.png" style="width: 16px; height: 16px" />
+                {{ node.label }}
+           </span>
+        </el-tree>
+    </div>
     <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>        
    <div class="mod-demand__bsdemand">
        <div class='top-box'>
@ -79,21 +100,18 @@
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
+      @current-change="getALLTree"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, prev, pager, next, jumper"
-      :total="40">
+      :total="50">
    </el-pagination>
  </div>
    </div>   
  </el-card>
   <component-services v-if='servicesIsShow' ></component-services>
   <application-resources  v-if='resourcesIsShow'></application-resources>
-
 </div>  
- 
-  
 </template>
 <script>
 import componentServices from './componentServices.vue'
@ -102,6 +120,46 @@ export default {
    components:{componentServices,applicationResources},
    data(){
        return{
+            inputTxt:'',
+            treeData: [{
+                label: '一级 1',
+                children: [{
+                    label: '二级 1-1',
+                    children: [{
+                    label: '三级 1-1-1'
+                    }]
+                }]
+                }, {
+                label: '一级 2',
+                    children: [{
+                        label: '二级 2-1',
+                        children: [{
+                        label: '三级 2-1-1'
+                        }]
+                    }, {
+                        label: '二级 2-2',
+                        children: [{
+                        label: '三级 2-2-1'
+                        }]
+                    }]
+                }, {
+                label: '一级 3',
+                children: [{
+                    label: '二级 3-1',
+                    children: [{
+                    label: '三级 3-1-1'
+                    }]
+                }, {
+                    label: '二级 3-2',
+                    children: [{
+                    label: '三级 3-2-1'
+                    }]
+                }]
+                }],
+            defaultProps: {
+            children: 'children',
+            label: 'name'
+            },
            choseId:null,
            departmentId:1,
            currentPage4: 4,
@ -154,8 +212,77 @@ export default {
                },
            ]
        }
+    },
+    created(){
+        this.getALLTree()
    },
     methods: {
+        //搜索框
+        searchBtn(){
+            this.getALLTree()
+        },
+         //树
+            handleNodeClick(data) {
+                console.log(data.name);
+                this.getTreeName(data)
+            },
+            handleCurrentChange(val){
+                this.getALLTree(val)
+
+            },
+             getTreeName (data) {               
+                this.$http.get('/census/center/v3/treeList/' ,{
+                  params : {
+                    keywords:data.name,
+                    deptId:'1067246875800000066',
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                this.tableData =res.data.data
+            })
+            },
+         // 获取部门列表
+            getALLTree () {               
+            this.$http.get('/census/center/v3/treeList/' ,{
+                  params : {
+                    keywords:this.inputTxt,
+                    deptId:'1067246875800000066',
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                this.treeData =res.data.data
+                this.tableData =res.data.data
+            })
+            },
+          // 获取部门发布情况列表
+            getFirstTree () {               
+            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
+                  params : {
+                    limit:100,
+                    page:1,
+                    id:null,
+                    resourceType:'资源类型'
+                    }                    
+            }).then(res => {
+                this.tableData =res.data.data
+            
+            })
+            },
+            // 获取部门使用情况列表
+            getSecondTree () {               
+            this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
+                  params : {
+                    keywords:'',
+                    deptId:'1067246875800000066',
+                    }                    
+            }).then(res => {
+                this.tableData =res.data.data
+                console.log('2222',this.tableData)
+            
+            })
+            },
      handleClick(row) {
        console.log(row);
      },
@ -174,6 +301,12 @@ export default {
      //选择发布or使用表格
      handleChose(index){
        this.departmentId=index
+        if(index===1){
+            this.getFirstTree()
+        }
+        else{
+            this.getSecondTree()
+        }
      },
      //翻页
      handleSizeChange(val) {
@ -187,6 +320,55 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.container{
+    display: flex;
+}
+.container-left{
+    width:250px;
+    height:1000px;
+    // background-color: #ffffff;
+    margin-right:10px
+}
+.left-search{
+    width:250px;
+    height:76px;
+    background-color: #ffffff;
+}
+.input-style{
+    width:210px;
+    height:36px;
+    margin:20px 20px;
+    padding-left: 20px;
+    border-radius: 18px;
+    border:1px solid transparent;
+    background-color: #f2f4fa;
+}
+input::placeholder {
+   font-weight: 400;
+   font-size: 14px;
+   color: #b0b3ca;
+}
+.input-search{
+    width:44px;
+    height:30px;
+    background-color: #ffffff;
+    position: absolute;
+    border-radius: 15px;
+    top:38px;
+    left:196px;
+}
+::v-deep.tree-style  {
+  .el-tree-node__label{
+        font-size:16px;        
+    }
+    .el-tree-node__content{
+            width:240px;
+        overflow: hidden;        
+        text-overflow: ellipsis;
+        white-space: nowrap;    
+    }
+}
+
 .top-box{
    height:80px;
    background-color: #fafafc;
@ -247,4 +429,9 @@ export default {
    .departmentStyle{
        color:#526aff
    }
+   ::v-deep .tree-text-styleJ{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 </style>
--- a/back/src/views/modules/activiti/my-work-dynamics.vue
+++ b/back/src/views/modules/activiti/my-work-dynamics.vue
@ -132,7 +132,7 @@
            show-word-limit
          ></el-input>
        </el-form-item>
-        <el-form-item prop="title" label="摘要">
+        <el-form-item prop="note1" label="摘要">
          <el-input
            v-model="addDataFrom.note1"
            autocomplete="off"
@ -224,7 +224,7 @@
            show-word-limit
          ></el-input>
        </el-form-item>
-        <el-form-item prop="title" label="摘要">
+        <el-form-item prop="note1" label="摘要">
          <el-input
            v-model="eidtDataForm.note1"
            autocomplete="off"
@ -340,15 +340,15 @@
 <script>
 // @ is an alias to /src
 export default {
-  data() {
+  data () {
    return {
-      fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
+      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
      // 表格筛选条件对象
      queryData: {
-        keyworld: "",
+        keyworld: '',
        pageIndex: 1,
        pageSize: 10,
-        total: 0,
+        total: 0
      },
      // 表格数据数组对象
      tableData: [],
@ -359,307 +359,307 @@ export default {
      // imageUrl: '',
      // 新增数据表单对象
      addDataFrom: {
-        title: "",
-        note1: "",
-        content: "",
-        imageUrl: "",
-        delFlag: 0,
+        title: '',
+        note1: '',
+        content: '',
+        imageUrl: '',
+        delFlag: 0
      },
      // 新增数据表单验证对象
      addDataFromRules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
-        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
+        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        note1: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
+        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        imageUrl: [
-          { required: true, message: "请输入图片地址", trigger: "blur" },
-        ],
+          { required: true, message: '请输入图片地址', trigger: 'blur' }
+        ]
      },
      editDataDialogVisabled: false,
      eidtDataForm: {
-        title: "",
-        note1: "",
-        content: "",
-        imageUrl: "",
+        title: '',
+        note1: '',
+        content: '',
+        imageUrl: ''
      },
      eidtDataFromRules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
-        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
+        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        note1: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
+        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        imageUrl: [
-          { required: true, message: "请输入图片地址", trigger: "blur" },
-        ],
+          { required: true, message: '请输入图片地址', trigger: 'blur' }
+        ]
      },
      perviewDataDialogVisabled: false,
      previewData: {
-        title: "",
-        note1: "",
-        content: "",
-        imageUrl: "",
-        delFlag: 0,
+        title: '',
+        note1: '',
+        content: '',
+        imageUrl: '',
+        delFlag: 0
      },
-      previewImg: "", // 预览图片
+      previewImg: '', // 预览图片
      deleteDataArr: [],
-      dialogVisibleImg: false,
-    };
+      dialogVisibleImg: false
+    }
  },
-  created() {
-    this.getTableData();
+  created () {
+    this.getTableData()
  },
  methods: {
-    tableChange(val) {
-      this.deleteDataArr = val.map((item) => item.id);
-      console.log(this.deleteDataArr);
+    tableChange (val) {
+      this.deleteDataArr = val.map((item) => item.id)
+      console.log(this.deleteDataArr)
    },
-    restTableData() {
-      this.queryData.keyworld = "";
-      this.getTableData();
+    restTableData () {
+      this.queryData.keyworld = ''
+      this.getTableData()
    },
-    showView(file) {
-      this.previewImg = file.url;
-      this.dialogVisibleImg = true;
+    showView (file) {
+      this.previewImg = file.url
+      this.dialogVisibleImg = true
    },
-    getTableData() {
+    getTableData () {
      this.$http
-        .get("/workdynamics/page", {
+        .get('/workdynamics/page', {
          params: {
            limit: this.queryData.pageSize,
            page: this.queryData.pageIndex,
-            name: this.queryData.keyworld,
-          },
+            name: this.queryData.keyworld
+          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
-            return this.$message.error(res.msg);
+            return this.$message.error(res.msg)
          }
-          this.tableData = res.data.list;
-          this.queryData.total = res.data.total;
+          this.tableData = res.data.list
+          this.queryData.total = res.data.total
        })
-        .catch(() => {});
+        .catch(() => {})
    },
-    flashTableData() {
-      this.queryData.pageIndex = 1;
-      this.getTableData();
+    flashTableData () {
+      this.queryData.pageIndex = 1
+      this.getTableData()
    },
    // 分页大小更改
-    handleSizeChange(value) {
-      this.queryData.pageSize = value;
-      this.getTableData();
+    handleSizeChange (value) {
+      this.queryData.pageSize = value
+      this.getTableData()
    },
    // 当前索引更改
-    handleCurrentChange(val) {
-      this.queryData.pageIndex = val;
-      this.getTableData();
+    handleCurrentChange (val) {
+      this.queryData.pageIndex = val
+      this.getTableData()
    },
    // 新增数据窗口关闭事件
-    addDataDialogClose() {
-      this.$refs.addDataFormRef.resetFields();
-      this.addDataFrom.imageUrl = "";
-      this.$refs.addUpload.clearFiles();
+    addDataDialogClose () {
+      this.$refs.addDataFormRef.resetFields()
+      this.addDataFrom.imageUrl = ''
+      this.$refs.addUpload.clearFiles()
      // this.addDataFrom.imagesFiles = []
      // this.$refs.addDataFromUploadRef.clearFiles()
    },
-    editDataDialogClose() {
-      this.$refs.editDataFormRef.resetFields();
-      this.eidtDataForm.imageUrl = "";
-      this.$refs.editUpload.clearFiles();
+    editDataDialogClose () {
+      this.$refs.editDataFormRef.resetFields()
+      this.eidtDataForm.imageUrl = ''
+      this.$refs.editUpload.clearFiles()
    },
    // 追加数据
-    addDataDialogConfirm() {
+    addDataDialogConfirm () {
      this.$refs.addDataFormRef.validate(async (valid) => {
        if (valid) {
-          //console.log("新增新增", this.addDataFrom);
+          // console.log("新增新增", this.addDataFrom);
          this.$http
-            .post("/workdynamics/insert", this.addDataFrom)
+            .post('/workdynamics/insert', this.addDataFrom)
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg);
+                return this.$message.error(res.msg)
              }
-              this.$message.success("新增成功");
-              this.addDataDialogVisabled = false;
-              this.getTableData();
+              this.$message.success('新增成功')
+              this.addDataDialogVisabled = false
+              this.getTableData()
            })
-            .catch(() => {});
+            .catch(() => {})
        } else {
-          this.$message.success("表单数据填写不完整");
+          this.$message.success('表单数据填写不完整')
        }
-      });
+      })
    },
    // 限定图片
-    handleExceed() {
-      this.$message({ type: "error", message: "最多支持一张图片上传" });
+    handleExceed () {
+      this.$message({ type: 'error', message: '最多支持一张图片上传' })
    },
    // 限制标题
-    titleExceed(str) {
+    titleExceed (str) {
      if (str.length >= 200) {
-        this.$message.error("标题文字不能超过200字");
+        this.$message.error('标题文字不能超过200字')
      }
    },
    // 限制内容
-    contentExceed(str) {
+    contentExceed (str) {
      if (str.length >= 2000) {
-        this.$message.error("内容文字不能超过2000字");
+        this.$message.error('内容文字不能超过2000字')
      }
    },
-    //限制摘要
-    noteExceed(str) {
+    // 限制摘要
+    noteExceed (str) {
      if (str.length >= 1000) {
-        this.$message.error("摘要文字不能超过1000字");
+        this.$message.error('摘要文字不能超过1000字')
      }
    },
    // 删除数据
-    deleteData(row) {
-      console.log(row);
-      this.$confirm("此操作将删除当前数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+    deleteData (row) {
+      console.log(row)
+      this.$confirm('此操作将删除当前数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
      })
        .then(async () => {
-          let ids = [];
+          let ids = []
          if (this.deleteDataArr.length > 1) {
-            ids = this.deleteDataArr;
+            ids = this.deleteDataArr
          } else {
-            ids = [row.id];
+            ids = [row.id]
          }
-          console.log(ids);
+          console.log(ids)
          this.$http
-            .delete("/workdynamics/delete", {
-              data: ids,
+            .delete('/workdynamics/delete', {
+              data: ids
            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg);
+                return this.$message.error(res.msg)
              }
              this.$message({
-                type: "success",
-                message: "删除成功!",
-              });
-              this.getTableData();
-            });
+                type: 'success',
+                message: '删除成功!'
+              })
+              this.getTableData()
+            })
        })
        .catch(() => {
          this.$message({
-            type: "info",
-            message: "已取消删除",
-          });
-        });
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
    },
-    //预览工作动态信息
-    async openPreviewData(row) {
-      console.log("预览预览", row);
+    // 预览工作动态信息
+    async openPreviewData (row) {
+      console.log('预览预览', row)
      const { data: res } = await this.$http.get(
        `workdynamics/select/${row.id}`
-      );
+      )

      if (res.code !== 0) {
-        return this.$message.error(res.msg);
+        return this.$message.error(res.msg)
      }

-      this.previewData = res.data;
+      this.previewData = res.data

-      this.perviewDataDialogVisabled = true;
+      this.perviewDataDialogVisabled = true
    },
-    perviewDataDialogClose() {
-      this.perviewDataDialogVisabled = false;
+    perviewDataDialogClose () {
+      this.perviewDataDialogVisabled = false
    },
-    handleAvatarSuccess(res, file) {
+    handleAvatarSuccess (res, file) {
      if (res.code !== 0) {
-        return this.$message.error(res.msg);
+        return this.$message.error(res.msg)
      }

-      this.addDataFrom.imageUrl = res.data;
+      this.addDataFrom.imageUrl = res.data
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
-    beforeAvatarUpload(file) {
+    beforeAvatarUpload (file) {
      const isImage =
-        file.type === "image/jpeg" ||
-        file.type === "image/jpg" ||
-        file.type === "image/png";
-      const isLt2M = file.size / 1024 / 1024 < 2;
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
-        this.$message.error("上传头像图片只能是 JPG 格式!");
+        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
-        this.$message.error("上传头像图片大小不能超过 2MB!");
+        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
-      return isImage && isLt2M;
+      return isImage && isLt2M
    },
-    eidtHandleAvatarSuccess(res, file) {
+    eidtHandleAvatarSuccess (res, file) {
      if (res.code !== 0) {
-        return this.$message.error(res.msg);
+        return this.$message.error(res.msg)
      }

-      this.eidtDataForm.imageUrl = res.data;
+      this.eidtDataForm.imageUrl = res.data
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
-    editBeforeAvatarUpload(file) {
+    editBeforeAvatarUpload (file) {
      const isImage =
-        file.type === "image/jpeg" ||
-        file.type === "image/jpg" ||
-        file.type === "image/png";
-      const isLt2M = file.size / 1024 / 1024 < 2;
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
-        this.$message.error("上传头像图片只能是 JPG 格式!");
+        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
-        this.$message.error("上传头像图片大小不能超过 2MB!");
+        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
-      return isImage && isLt2M;
+      return isImage && isLt2M
    },
-    async openEditDialog(row) {
+    async openEditDialog (row) {
      const { data: res } = await this.$http.get(
        `workdynamics/select/${row.id}`
-      );
+      )

      if (res.code !== 0) {
-        return this.$message.error(res.msg);
+        return this.$message.error(res.msg)
      }

-      this.eidtDataForm = res.data;
+      this.eidtDataForm = res.data

-      this.editDataDialogVisabled = true;
+      this.editDataDialogVisabled = true
    },
-    eidtDataDialogConfirm() {
+    eidtDataDialogConfirm () {
      this.$refs.editDataFormRef.validate(async (valid) => {
        if (valid) {
-          console.log(this.eidtDataForm);
+          console.log(this.eidtDataForm)
          this.$http
-            .put("/workdynamics/update", this.eidtDataForm)
+            .put('/workdynamics/update', this.eidtDataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg);
+                return this.$message.error(res.msg)
              }
-              this.$message.success("编辑成功");
-              this.editDataDialogVisabled = false;
-              this.getTableData();
+              this.$message.success('编辑成功')
+              this.editDataDialogVisabled = false
+              this.getTableData()
            })
-            .catch(() => {});
+            .catch(() => {})
        } else {
-          this.$message.success("表单数据填写不完整");
+          this.$message.success('表单数据填写不完整')
        }
-      });
+      })
    },
-    addUploadRemoveFile(file, fileList) {
-      this.$refs.addUpload.clearFiles();
-      this.addDataFrom.imageUrl = "";
-    },
-    editUploadRemoveFile(file, fileList) {
-      this.$refs.editUpload.clearFiles();
-      this.eidtDataForm.imageUrl = "";
+    addUploadRemoveFile (file, fileList) {
+      this.$refs.addUpload.clearFiles()
+      this.addDataFrom.imageUrl = ''
    },
+    editUploadRemoveFile (file, fileList) {
+      this.$refs.editUpload.clearFiles()
+      this.eidtDataForm.imageUrl = ''
+    }
  },
  computed: {
-    editDialogShowFileList() {
+    editDialogShowFileList () {
      if (this.eidtDataForm.imageUrl) {
        return [
-          { name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl },
-        ];
+          { name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl }
+        ]
      }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
 ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
@ -728,7 +728,7 @@ export default {

  .preview-title {
    width: 100%;
-    height: 90px;
+    min-height: 90px;
    //margin-top: -40px;
    border-bottom: solid #c6c6c6 1px;
    .title-text {
@ -752,7 +752,7 @@ export default {
  }
  .preview-note {
    width: 100%;
-    height: 100px;
+    min-height: 100px;
    text-align: left;
    margin-top: 24px;
    text-indent: 2em;
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
@ -1,22 +1,533 @@
 <template>
-  <div class="wrapper">概况和异常</div>
+  <div class="contentBox">
+    <div class="generalizeBox">
+      <h3>API概括</h3>
+      <div class="ApiBox">
+        <img src="~@/assets/img/CapabilityOperationMonitoring/API-allNum.png" />
+        <div>
+          <h4>API总数</h4>
+          <p>99999</p>
+        </div>
+      </div>
+      <div class="ApiBox">
+        <img src="~@/assets/img/CapabilityOperationMonitoring/API-badNum.png" />
+        <div>
+          <h4>异常API总数</h4>
+          <p>99999</p>
+        </div>
+      </div>
+    </div>
+    <div class="abnormalBox">
+      <h3>API异常分析</h3>
+      <div class="abnormalBoxBottom">
+        <!-- API异常次数排行TOP10 -->
+        <div class="RankingList">
+          <h4 class="title">API异常次数排行TOP10</h4>
+          <ul>
+            <li class="RankingListData" v-for="(item, index) in RankingData" :key="index">
+              <i><b>{{ index + 1 }}</b></i>
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
+                <h6>{{ item.name }}</h6>
+              </el-tooltip>
+              <span>{{ item.num }}</span>
+            </li>
+          </ul>
+        </div>
+        <!-- API异常分布 -->
+        <div class="AbnormalDistribution">
+          <h4 class="title">API异常分布</h4>
+          <div class="container-body1">
+            <div id="main" style="width: 120px; height: 260px"></div>
+          </div>
+        </div>
+        <!-- API异常次数统计 -->
+        <div class="AnomalyStatistics">
+          <h4 class="title">API异常次数统计</h4>
+          <div class="AnomalyStatisticsTable">
+            <el-table :data="AnomalyStatisticsTable" border style="width: 100%">
+              <el-table-column prop="name" label="接口名称" width="80" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+              <el-table-column prop="address" label="接口地址" width="200" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+              <el-table-column prop="method" label="调用方法" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+              <el-table-column prop="type" label="组件类型" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+              <el-table-column prop="provider" label="提供商" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+              <el-table-column prop="state" label="监控状态" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+            </el-table>
+          </div>
+          <!-- 分页 -->
+          <div class="tablePagination">
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+              :current-page="currentPage4" :page-size="5" layout="total, prev, pager, next, jumper" :total="total">
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-
 <script>
+import * as echarts from 'echarts'
+
 export default {
-  components: {},
-  props: {},
+  // components: {},
+  // props: {},
  data() {
-    return {};
+    return {
+      // 排行榜
+      RankingData: [
+        {
+          name: '能力名称一能力名称一能力名称一能力名称一能力名称一',
+          num: '239'
+        },
+        {
+          name: '能力名称二',
+          num: '222'
+        },
+        {
+          name: '能力名称三',
+          num: '123'
+        },
+        {
+          name: '能力名称四',
+          num: '88'
+        },
+        {
+          name: '能力名称五',
+          num: '88'
+        },
+        {
+          name: '能力名称六',
+          num: '88'
+        },
+        {
+          name: '能力名称七',
+          num: '88'
+        },
+        {
+          name: '能力名称八',
+          num: '88'
+        },
+        {
+          name: '能力名称九',
+          num: '88'
+        },
+        {
+          name: '能力名称十',
+          num: '88'
+        }
+      ],
+      // 表格
+      AnomalyStatisticsTable: [
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        }
+      ],
+      // 分页
+      currentPage4: 1,
+      total: 0
+    }
  },
-  watch: {},
-  computed: {},
-  methods: {},
-  created() {},
-  mounted() {},
-};
+  mounted() {
+    this.myEchars()
+    // 分页
+    this.total = this.AnomalyStatisticsTable.length
+  },
+  methods: {
+    // 分页
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+    },
+    myEchars() {
+      var chartDom = document.getElementById('main')
+      var myChart = echarts.init(chartDom)
+      var option
+
+      option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          itemHeight: 10,
+          itemWidth: 10,
+          itemGap: 15,
+          textStyle: {
+            fontSize: 12, // 图例文字字体大小
+            color: '#666666' // 图例文字颜色
+          },
+          bottom: '13%',
+          formatter: function (name) {
+            var index = 0
+            var clientlabels = ['智能算法', '图层服务', '开发组件', '业务组件']
+            var clientcounts = ['25%', '25%', '25%', '25%']
+            clientlabels.forEach(function (value, i) {
+              if (value == name) {
+                index = i
+              }
+            })
+            return name + '      ' + clientcounts[index]
+          }
+        },
+        color: ['#0087ff', '#ff8a00', '#fcc549', '#49c988'],
+        series: [
+          {
+            center: ['50%', '23%'],
+            name: 'api异常分布',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            // emphasis: {
+            //   label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //   }
+            // },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 100, name: '智能算法' },
+              { value: 100, name: '图层服务' },
+              { value: 100, name: '开发组件' },
+              { value: 100, name: '业务组件' }
+            ]
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
-.wrapper {
+.contentBox {
+  display: flex;
+  margin: 1.25rem 0;
+
+  .generalizeBox {
+    height: 21.875rem;
+    margin-right: 1.25rem;
+    padding: 1.25rem;
+    border-radius: 0.375rem;
+    box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
+    background: #ffffff;
+
+    h3 {
+      font-size: 1.125rem;
+      color: #333333;
+      padding: 0;
+      margin: 0;
+      margin-bottom: 1.875rem;
+    }
+
+    .ApiBox {
+      background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png') no-repeat;
+      background-size: 100%;
+      width: 22.5rem;
+      height: 6.875rem;
+      display: flex;
+      margin-bottom: 1.25rem;
+
+      img {
+        width: 1.25rem;
+        height: 1.375rem;
+        margin: 1.5rem 1.25rem 0;
+      }
+
+      div {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        h4 {
+          padding: 0;
+          margin: 0;
+          margin-bottom: 1.25rem;
+          font-size: 1rem;
+          color: #5f6770;
+        }
+
+        p {
+          padding: 0;
+          margin: 0;
+          font-size: 1.5rem;
+          color: #1182fb;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .ApiBox:last-of-type {
+      background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png') no-repeat;
+      background-size: 100%;
+
+      div {
+        h4 {
+          color: #726b5b;
+        }
+
+        p {
+          color: #fcc549;
+        }
+      }
+    }
+  }
+
+  .abnormalBox {
+    height: 21.875rem;
+    padding: 1.25rem;
+    border-radius: 0.375rem;
+    box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
+    background: #ffffff;
+
+    h3 {
+      font-size: 1.125rem;
+      color: #333333;
+      padding: 0;
+      margin: 0;
+    }
+
+    .title {
+      padding: 1.25rem 0 0.625rem;
+      font-size: 0.875rem;
+      color: #5a83ae;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    .abnormalBoxBottom {
+      display: flex;
+
+      .RankingList {
+        margin-right: 5.625rem;
+
+        ul {
+          padding: 0;
+          margin: 0;
+        }
+
+        .RankingListData {
+          list-style: none;
+          display: flex;
+          margin: 0;
+          padding: 0;
+          margin-bottom: 0.25rem;
+          align-items: center;
+
+          i {
+            font-style: normal;
+            display: block;
+            width: 3.75rem;
+            line-height: 1.25rem;
+            font-size: 0.8125rem;
+            color: #999999;
+            font-weight: bold;
+
+            b {
+              padding-left: 0.75rem;
+              display: block;
+              height: 1.25rem;
+              width: 2.25rem;
+              background: linear-gradient(to right,
+                  rgba(204, 204, 204, 0.6),
+                  rgba(0, 0, 0, 0));
+            }
+          }
+
+          h6 {
+            width: 11.25rem;
+            height: 1.25rem;
+            line-height: 1.25rem;
+            font-size: 0.8125rem;
+            color: #333333;
+            margin: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            cursor: pointer;
+            font-weight: bold;
+          }
+
+          span {
+            font-size: 0.9375rem;
+            color: #000000;
+            font-weight: bold;
+          }
+        }
+
+        .RankingListData:nth-of-type(1) i b {
+          width: 3.75rem;
+          background: linear-gradient(to right,
+              rgba(251, 59, 5, 0.6),
+              rgba(0, 0, 0, 0));
+        }
+
+        .RankingListData:nth-of-type(1) span {
+          color: #fc5656;
+        }
+
+        .RankingListData:nth-of-type(2) i b {
+          width: 3.125rem;
+          background: linear-gradient(to right,
+              rgba(251, 123, 5, 0.6),
+              rgba(0, 0, 0, 0));
+        }
+
+        .RankingListData:nth-of-type(2) span {
+          color: #ff8a00;
+        }
+
+        .RankingListData:nth-of-type(3) i b {
+          width: 2.75rem;
+          background: linear-gradient(to right,
+              rgba(250, 179, 2, 0.6),
+              rgba(0, 0, 0, 0));
+        }
+
+        .RankingListData:nth-of-type(3) span {
+          color: #f9af0a;
+        }
+      }
+
+      .AbnormalDistribution {
+        margin-right: 3.75rem;
+
+        .container-body1 {}
+      }
+
+      .AnomalyStatistics {
+        h4 {
+          padding-bottom: 12px;
+        }
+
+        .AnomalyStatisticsTable {
+          width: 38.2rem;
+
+          ::v-deep .el-table th {
+            padding: 0;
+            height: 34px;
+          }
+
+          ::v-deep .el-table td {
+            padding: 0;
+            height: 34px;
+          }
+
+          ::v-deep .el-table .cell {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          ::v-deep .el-table tbody tr:hover>td {
+            background-color: transparent;
+          }
+
+        }
+
+        .tablePagination {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          ::v-deep .el-pager li {
+            min-width: 1.75rem;
+            padding: 0;
+            border: 0.0625rem solid #b2b2b2;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            color: #b2b2b2;
+            margin-right: 0.375rem;
+          }
+
+          ::v-deep .el-pager li:last-of-type {
+            margin-right: 0;
+          }
+
+          ::v-deep .el-pagination .btn-prev {
+            padding: 0;
+            min-width: 1.75rem;
+            margin-right: 0.375rem;
+            border: 0.0625rem solid #1182fb;
+            border-radius: 0.25rem;
+            font-size: 12px;
+            color: #1182fb;
+          }
+
+          ::v-deep .el-pagination .btn-next {
+            padding: 0;
+            min-width: 1.75rem;
+            margin-left: 0.375rem;
+            border: 0.0625rem solid #1182fb;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            color: #1182fb;
+          }
+
+          ::v-deep .el-pager li.active {
+            border: 0.0625rem solid #1182fb;
+            background: #1182fb;
+            color: #ffffff;
+            font-size: 0.75rem;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/CapabilityOperationMonitoringTime.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/CapabilityOperationMonitoringTime.vue
@ -1,22 +0,0 @@
-<template>
-  <div class="wrapper">上边时间</div>
-</template>
-
-<script>
-export default {
-  components: {},
-  props: {},
-  data() {
-    return {};
-  },
-  watch: {},
-  computed: {},
-  methods: {},
-  created() {},
-  mounted() {},
-};
-</script>
-<style lang="scss" scoped>
-.wrapper {
-}
-</style>
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue
@ -1,8 +1,23 @@
 <!-- 权限管理-能力运行监控 -->
 <template>
  <div class="wrapper">
-    <div class="capability-operation-monitoring-top">
-      <capability-operation-monitoring-time></capability-operation-monitoring-time>
+    <div class="topBox">
+      <h1 class="topTitle">能力运行平台</h1>
+      <div class="topNav">
+        <div class="topTab">
+          <div @click="timeSwitch('日')" :class="timeSwitchindex == '日' ? 'timeDown' : ''">当天</div>
+          <div @click="timeSwitch('周')" :class="timeSwitchindex == '周' ? 'timeDown' : ''">最近一周</div>
+          <div @click="timeSwitch('月')" :class="timeSwitchindex == '月' ? 'timeDown' : ''">最近一月</div>
+        </div>
+        <div class="topTimme">
+          <span>选择时间段</span>
+          <el-date-picker v-model="timeStart" type="date" placeholder="请选择起始时间" :picker-options="pickerOptions0">
+          </el-date-picker>
+          <el-date-picker v-model="timeEnd" type="date" placeholder="请选择结束时间" :picker-options="pickerOptions1">
+          </el-date-picker>
+          <el-button type="primary" round>确定</el-button>
+        </div>
+      </div>
    </div>
    <div class="capability-operation-monitoring-center">
      <abnormal-situation></abnormal-situation>
@ -14,27 +29,141 @@
 </template>

 <script>
-import AbnormalSituation from "./components/AbnormalSituation.vue";
-import AnalysisOfTheRequest from "./components/AnalysisOfTheRequest.vue";
-import CapabilityOperationMonitoringTime from "./components/CapabilityOperationMonitoringTime.vue";
+import AbnormalSituation from './components/AbnormalSituation.vue'
+import AnalysisOfTheRequest from './components/AnalysisOfTheRequest.vue'
+import * as moment from 'moment'
 export default {
  components: {
    AbnormalSituation,
-    AnalysisOfTheRequest,
-    CapabilityOperationMonitoringTime,
+    AnalysisOfTheRequest
  },
  props: {},
-  data() {
-    return {};
+  data () {
+    return {
+      timeSwitchindex: '日',
+      timeStart: '',
+      timeEnd: '',
+      pickerOptions0: {
+        disabledDate: (time) => {
+          if (this.timeEnd != '') {
+            return time.getTime() > this.timeEnd
+          }
+        }
+      },
+      pickerOptions1: {
+        disabledDate: (time) => {
+          return time.getTime() < this.timeStart
+        }
+      },
+      callTheTrendData: []
+    }
  },
  watch: {},
  computed: {},
-  methods: {},
-  created() {},
-  mounted() {},
-};
+  methods: {
+    timeSwitch (name) {
+      this.timeSwitchindex = name
+      this.callTheTrendData = []
+      if (name == '周') {
+        for (let i = 0; i < 7; i++) {
+          const time = moment()
+            .subtract('days', 6 - i)
+            .format('MM-DD')
+          this.callTheTrendData.push(time)
+        } console.log('time', this.callTheTrendData, name)
+      // callTheTrend(callTheTrendData.value)
+      } else if (name == '月') {
+        for (let i = 0; i < 31; i++) {
+          const time = moment()
+            .subtract('days', 30 - i)
+            .format('MM-DD')
+          this.callTheTrendData.push(time)
+        } console.log('time', this.callTheTrendData, name)
+      // callTheTrend(callTheTrendData.value)
+      } else {
+        const time = moment().startOf('day').format('YYYY-MM-DD 23:59:59')
+        this.callTheTrendData.push(time)
+        console.log(time, this.callTheTrendData)
+      }
+    }
+  },
+  created () { },
+  mounted () {
+    this.timeSwitch('日')
+  }
+}
 </script>
 <style lang="scss" scoped>
 .wrapper {
+  .topBox {
+    .topTitle {
+      font-size: 1.5rem;
+      color: #000000;
+      font-weight: bold;
+      padding: 0.3125rem 0 1.25rem;
+      margin: 0;
+    }
+
+    .topNav {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .topTab {
+        display: flex;
+
+        div {
+          width: 6.875rem;
+          height: 1.75rem;
+          line-height: 1.75rem;
+          text-align: center;
+          border-radius: 0.875rem;
+          font-size: 1rem;
+          color: #666666;
+          margin-right: 0.9375rem;
+          border: 0.0625rem solid #cccccc;
+          cursor: pointer;
+        }
+
+        .timeDown {
+          color: #1182fb;
+          border: 0.0625rem solid #1182fb;
+        }
+      }
+
+      .topTimme {
+        display: flex;
+        align-items: center;
+
+        span {
+          color: #666666;
+          font-size: 1rem;
+          display: block;
+          margin-right: 1.25rem;
+        }
+
+        ::v-deep .el-date-editor.el-input {
+          margin-right: 0.625rem;
+          width: 9.375rem;
+
+          .el-input__inner {
+            border-radius: 17px;
+            padding: 0;
+            padding-left: 10px;
+            padding-right: 0;
+            background-image: url(~@/assets/img/CapabilityOperationMonitoring/calendar.png);
+            background-repeat: no-repeat;
+            background-size: 18px 18px;
+            background-position: 118px center;
+          }
+
+          .el-input__prefix {
+            display: none;
+          }
+        }
+
+      }
+    }
+  }
 }
 </style>
--- a/front/public/index.html
+++ b/front/public/index.html
@ -1,8 +1,8 @@
 <!--
 * @Author: hisense.wuhongjian
 * @Date: 2022-03-29 16:45:25
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-24 19:49:15
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-06-28 16:52:46
 * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@ -47,7 +47,8 @@
    window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
    window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796';
    window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
-    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
+    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.239:8888/renren-admin';
+    window.SITE_CONFIG['POI_URL'] = 'http://15.2.21.238:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
    // 穿透版本
    // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
    // window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@ -189,3 +189,19 @@ export function getCategoryTreePage(params) {
    params,
  })
 }
+// 申购车根据部门分类
+export function selectResourceCarGroupByDept(params) {
+  return request({
+    url: '/resourcecar/selectResourceCarGroupByDept',
+    method: 'get',
+    params,
+  })
+}
+// 申购车根据部门查询
+export function selectResourceListByDept(params) {
+  return request({
+    url: '/resourcecar/selectResourceListByDept',
+    method: 'get',
+    params,
+  })
+}
--- a/front/src/supermap/advance-init.js
+++ b/front/src/supermap/advance-init.js
@ -1681,6 +1681,7 @@ export function MapFun(mapObj) {
    //   })

    // }
+    _removeLayerByLayerName(layerName)
    let layers = null
    // 判断是否是聚合图层
    layers = createMarkerClusterLayer()
@ -1691,12 +1692,7 @@ export function MapFun(mapObj) {
    features.map((feature) => {
      var bounds = map.getBounds()
      // console.log("看看有没有坐标",feature.latLng);
-      if (
-        layerName == '全部'
-          ? feature.hasOwnProperty('latLng') &&
-            bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))
-          : feature.hasOwnProperty('latLng')
-      ) {
+      if ( feature.hasOwnProperty('latLng')) {
        const marker = L.marker(feature.latLng, { icon })
        if (createPopupFun !== null) {
          marker.uuid = feature.uuid || ''
@ -1735,38 +1731,6 @@ export function MapFun(mapObj) {
    })
    featureGroup.addLayer(layers)
    layerGroup.set(layerName, layers)
-    // map.on('zoom', () => {
-    //   _removeLayerByLayerName(layerName)
-    //   let layers = null
-    //   // 判断是否是聚合图层
-    //   layers = createMarkerClusterLayer()
-    //   features.map(feature => {
-    //     var bounds = map.getBounds()
-    //     // console.log("看看有没有坐标",feature.latLng);
-    //     if (feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))) {
-    //       const marker = L.marker(feature.latLng, { icon })
-    //       if (createPopupFun !== null) {
-    //         marker.uuid = feature.uuid || ''
-    //         marker.resId = feature.resId || ''
-    //         marker.on('click', async e => {
-    //           if (feature.resourceName === 'video') {
-    //             const params = [feature.indexCode]
-    //             DS.openVideo(params)
-    //           } else {
-    //             const elementHtml = createPopupFun(feature)
-    //             if (elementHtml) {
-    //               console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map)
-    //               L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
-    //             }
-    //           }
-    //         })
-    //       }
-    //       layers.addLayer(marker)
-    //     }
-    //   })
-    //   featureGroup.addLayer(layers)
-    //   layerGroup.set(layerName, layers)
-    // })
  }
  /**
   * 点击展示弹窗
--- a/front/src/utils/request.js
+++ b/front/src/utils/request.js
@ -87,9 +87,9 @@ instance.interceptors.request.use(
 */
 instance.interceptors.response.use(
  (response) => {
-    console.log('接口返回', response)
-    console.log('接口返回headers', response.headers)
-    console.log('接口返回REDIRECT', response.headers.redirect)
+    // console.log('接口返回', response)
+    // console.log('接口返回headers', response.headers)
+    // console.log('接口返回REDIRECT', response.headers.redirect)

    if (response.headers.redirect === '/#/login') {
      var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
@ -109,7 +109,7 @@ instance.interceptors.response.use(
            new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com
        }
      }
-      console.log('已清除')
+      // console.log('已清除')
      setTimeout(() => {
        location.reload()
      }, 1000)
@ -147,13 +147,13 @@ instance.interceptors.response.use(
    // }
  },
  (error) => {
-    console.log('接口error', error)
+    // console.log('接口error', error)
    if (loadingInstance) loadingInstance.close()
    const { response, message } = error
    if (error.response && error.response.data) {
-      console.log('接口返回', response)
-      console.log('接口返回headers', response.headers)
-      console.log('接口返回REDIRECT1111', response.headers.redirect)
+      // console.log('接口返回', response)
+      // console.log('接口返回headers', response.headers)
+      // console.log('接口返回REDIRECT1111', response.headers.redirect)
      if (response.headers.redirect === '/#/login') {
        var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
        if (keys) {
@ -172,7 +172,7 @@ instance.interceptors.response.use(
              new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com
          }
        }
-        console.log('已清除')
+        // console.log('已清除')
        setTimeout(() => {
          location.reload()
        }, 1000)
--- a/front/src/vab/plugins/permissions.js
+++ b/front/src/vab/plugins/permissions.js
@ -1,8 +1,8 @@
 /*
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-01 17:23:11
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-04 16:32:38
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-29 09:54:19
 * @Description: 告诉大家这是什么
 */
 /**
@ -26,11 +26,11 @@ router.beforeEach(async (to, from, next) => {
  //   setAccessToken(SSOTOKEN)
  // }
  const token = getAccessToken()
-  console.log('token', token)
+  // console.log('token', token)
  let hasToken = token || store.getters['user/accessToken']
  // debugger
  if (!loginInterception) hasToken = true
-  console.log('hasToken存在巨大问题', hasToken)
+  // console.log('hasToken存在巨大问题', hasToken)
  if (hasToken) {
    setAccessToken(hasToken)
    await store.dispatch('user/getUserInfo')
--- a/front/src/views/capabilityCloud/components/ComponentServices.vue
+++ b/front/src/views/capabilityCloud/components/ComponentServices.vue
@ -93,7 +93,8 @@
              <div>
                <span>TOP</span>
                <span>名称</span>
-                <span>应用数</span>
+                <span v-if="dataclick != 'score'">应用数</span>
+                <span v-else>分数</span>
              </div>
              <div v-for="(item, index) in dataList" :key="index">
                <span>{{ index + 1 }}</span>
@ -126,7 +127,12 @@
  let dataclick = ref('total')
  let dataList = ref([])
  let timeSwitchindex = ref('周')
-  let servicesSnum = ref([])
+  let servicesSnum = ref([
+    { amount: '', type: '智能算法' },
+    { amount: '', type: '图层服务' },
+    { amount: '', type: '开发组件' },
+    { amount: '', type: '业务组件' },
+  ])
  let callTheTrendData = ref({ time: [], snum: [] })
  //年月切换
  const timeSwitch = (name) => {
@ -162,6 +168,19 @@
    let myChart = echarts.init(chartDom)
    let option
    option = {
+      tooltip: {
+        backgroundColor: 'rgba(17,61,116,0.8)',
+        borderWidth: 0,
+        trigger: 'axis',
+        formatter: function (val) {
+          console.log(val)
+          let res = `<div style="background:rgba(17,61,116,0.8);border:1px soild rgba(28,119,205,0.8);color:#fff;padding:0">
+                      <span>日期 : ${val[0].name}</span>
+                      <div style="margin-left: 18px">调用次数 : ${val[0].value}</div>
+                  </div>`
+          return res
+        },
+      },
      grid: {
        top: '10%',
        left: '0%',
@ -288,7 +307,11 @@
      snum.value[0].num = res.data.data[0].amount
      res.data.data.map((item, index) => {
        if (index != 0) {
-          servicesSnum.value.push(item)
+          servicesSnum.value.map((servicesSnumitem, servicesSnumindex) => {
+            if (servicesSnumitem.type == item.type) {
+              servicesSnum.value[servicesSnumindex].amount = item.amount
+            }
+          })
        }
      })
    })
--- a/front/src/views/demandCenter/demandDetails.vue
+++ b/front/src/views/demandCenter/demandDetails.vue
@ -231,6 +231,7 @@
            size="small"
            pageSize="8"
            :total="total"
+            v-model:current="page"
            @change="handleCurrentChange"
          />
        </a-list>
@ -248,7 +249,7 @@
  import {
    demandComment,
    demandCommentPage,
-    demandCommentDelete,
+    // demandCommentDelete,
    demandCommentApply,
  } from '@/api/demandCenter'
  import { getUser, getUserInfo } from '@/api/home'
@ -264,15 +265,15 @@
    })
  })
  //删除提示框
-  const confirm = (item) => {
-    console.log(item)
-    evaluateDelete(item)
-  }
+  // const confirm = (item) => {
+  //   console.log(item)
+  //   evaluateDelete(item)
+  // }

-  const cancel = (e) => {
-    console.log(e)
-    message.error('已取消删除')
-  }
+  // const cancel = (e) => {
+  //   console.log(e)
+  //   message.error('已取消删除')
+  // }
  // const store = useStore()
  const router = useRouter()

@ -322,14 +323,14 @@
  //   })
  // }

-  const evaluateDelete = (item) => {
-    demandCommentDelete([item.id]).then((res) => {
-      if (res.data.code == 0) {
-        message.success('删除评论成功！')
-      }
-      evaluateList()
-    })
-  }
+  // const evaluateDelete = (item) => {
+  //   demandCommentDelete([item.id]).then((res) => {
+  //     if (res.data.code == 0) {
+  //       message.success('删除评论成功！')
+  //     }
+  //     evaluateList()
+  //   })
+  // }
  const evaluateList = () => {
    const params = {
      page: page.value,
@ -339,6 +340,7 @@
    demandCommentPage(params).then((res) => {
      evaluateData.value = res.data.data.list
      total.value = res.data.data.total
+      console.log(evaluateData, 'evaluateData')
    })
  }

@ -382,6 +384,7 @@
    // formName.value = formData.value
    const id = router.currentRoute.value.query.id
    getDemandForm(id).then((res) => {
+      console.log(res, 'res')
      const { data } = res.data
      formName.value.applyUserName = data.applyUserName
      formName.value.applyUserPhone = data.applyUserPhone
--- a/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
@ -11,7 +11,9 @@
    <div class="main">
      <div class="main-left">
        <p>{{ dataFrom.linkName }}</p>
-        <p>{{ dataFrom.link }}</p>
+        <p style="cursor: pointer" @click="clickLink(dataFrom.link)">
+          {{ dataFrom.link }}
+        </p>
      </div>
      <div class="main-center">
        <p>{{ dataFrom.numberName }}</p>
@ -63,6 +65,10 @@
      })
    }
  }
+  const clickLink = (link) => {
+    debugger
+    window.open(link)
+  }
  //复制方法
  const copyFunction = (data, name) => {
    let url = data
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
@ -93,7 +93,16 @@
  const flag = ref(true)
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '技术文档'
+      (item) =>
+        item.attrType === '服务类型' ||
+        item.attrType === '覆盖区域' ||
+        item.attrType === '切片策略' ||
+        item.attrType === '坐标系' ||
+        item.attrType === '切片尺寸' ||
+        item.attrType === '最小级别' ||
+        item.attrType === '数据范围' ||
+        item.attrType === '图层类型' ||
+        item.attrType === '最大级别'
    )[0]
    if (!obj) {
      flag.value = false
@ -128,7 +137,18 @@
    () => props.dataList,
    (val) => {
      if (val) {
-        let obj = val.infoList.filter((item) => item.attrType === '技术文档')[0]
+        let obj = val.infoList.filter(
+          (item) =>
+            item.attrType === '服务类型' ||
+            item.attrType === '覆盖区域' ||
+            item.attrType === '切片策略' ||
+            item.attrType === '坐标系' ||
+            item.attrType === '切片尺寸' ||
+            item.attrType === '最小级别' ||
+            item.attrType === '数据范围' ||
+            item.attrType === '图层类型' ||
+            item.attrType === '最大级别'
+        )[0]
        if (!obj) {
          flag.value = false
        } else {
@ -211,7 +231,7 @@
            font-size: 0.2rem;
            color: #666666;
            display: block;
-            margin-right: 0.8rem;
+            margin-right: 0.5rem;
            width: 120px;
          }
          p {
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
@ -89,15 +89,35 @@
        list.value.push(item.attrType)
      } else if (item.attrType === '图层缩略图') {
        list.value.push('图层展示')
-      } else if (item.attrType === '坐标系') {
-        list.value.push('图层信息')
      } else if (item.attrType === '是否可预览') {
        if (item.attrValue === '是') {
          list.value.push('图层预览')
        }
+      } else if (
+        item.attrType === '服务类型' ||
+        item.attrType === '覆盖区域' ||
+        item.attrType === '切片策略' ||
+        item.attrType === '坐标系' ||
+        item.attrType === '切片尺寸' ||
+        item.attrType === '最小级别' ||
+        item.attrType === '数据范围' ||
+        item.attrType === '图层类型' ||
+        item.attrType === '最大级别'
+      ) {
+        list.value.push('图层信息')
+      } else if (
+        item.attrType === '技术文档' ||
+        item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '使用手册' ||
+        item.attrType === '服务地址' ||
+        item.attrType === '样式服务地址' ||
+        item.attrType === '服务商联系电话'
+      ) {
+        list.value.push('使用方式')
      }
    })
-    list.value.push('使用方式')
+
    navList.value.forEach((item) => {
      console.log(item)
      if (list.value.indexOf(item.name) > -1) {
@ -144,14 +164,35 @@
            list.value.push(item.attrType)
          } else if (item.attrType === '图层缩略图') {
            list.value.push('图层展示')
-          } else if (item.attrType === '坐标系') {
-            list.value.push('图层信息')
          } else if (item.attrType === '是否可预览') {
            if (item.attrValue === '是') {
              list.value.push('图层预览')
            }
+          } else if (
+            item.attrType === '服务类型' ||
+            item.attrType === '覆盖区域' ||
+            item.attrType === '切片策略' ||
+            item.attrType === '坐标系' ||
+            item.attrType === '切片尺寸' ||
+            item.attrType === '最小级别' ||
+            item.attrType === '数据范围' ||
+            item.attrType === '图层类型' ||
+            item.attrType === '最大级别'
+          ) {
+            list.value.push('图层信息')
+          } else if (
+            item.attrType === '技术文档' ||
+            item.attrType === '服务商' ||
+            item.attrType === '服务商联系人' ||
+            item.attrType === '使用手册' ||
+            item.attrType === '服务地址' ||
+            item.attrType === '样式服务地址' ||
+            item.attrType === '服务商联系电话'
+          ) {
+            list.value.push('使用方式')
          }
        })
+        list.value.push('图层信息')
        list.value.push('使用方式')
        navList.value.forEach((item) => {
          console.log(item)
--- a/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
@ -8,7 +8,7 @@
 <template>
  <div class="application-presentation" v-if="flag">
    <detals-title title="图层预览" type="PREVIEW"></detals-title>
-    <div class="main" :style="`${img}background-position:center;`">
+    <div class="main">
      <iframe
        :src="img"
        width="100%"
@ -35,7 +35,11 @@
    if (!imgindex) {
      flag.value = false
    } else {
-      img.value = imgindex.attrValue
+      props.dataList.infoList.map((item) => {
+        if (item.attrType === '预览服务地址') {
+          img.value = imgindex.attrValue || '--'
+        }
+      })
    }
  }
  watch(
@ -48,7 +52,11 @@
        if (!imgindex) {
          flag.value = false
        } else {
-          img.value = imgindex.attrValue
+          val.infoList.map((item) => {
+            if (item.attrType === '预览服务地址') {
+              img.value = imgindex.attrValue || '--'
+            }
+          })
        }
      }
    }
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
@ -17,7 +17,7 @@
            </p>
            <p>
              <span>样式服务地址：</span>
-              <span>{{ item.linkValue }}</span>
+              <span>{{ item.csslnkValue }}</span>
            </p>
          </div>
        </div>
@ -27,7 +27,9 @@
        </div>
      </div>
      <div class="content-right">
-        <div class="content-right-title">{{ item.contact }}</div>
+        <div class="content-right-title">
+          {{ item.contact }}：{{ item.facilitator.values }}
+        </div>
        <div class="content-right-content">
          <p>
            <span>{{ item.people.name }}</span>
@ -54,6 +56,7 @@
  import { pinyin } from 'pinyin-pro'
  import { ref, defineProps, watch } from 'vue'
  let dataFrom = ref({
+    link: '',
    title: '使用方式',
    englishTitle: 'USAGE',
    content: [
@ -81,25 +84,35 @@
  const flag = ref(true)
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '技术文档'
+      (item) =>
+        item.attrType === '技术文档' ||
+        item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '使用手册' ||
+        item.attrType === '服务地址' ||
+        item.attrType === '样式服务地址' ||
+        item.attrType === '服务商联系电话'
    )[0]
    if (!obj) {
      flag.value = false
    } else {
      // eslint-disable-next-line vue/no-setup-props-destructure
-      dataFrom.value.content[0].link.value = props.dataList.apiUrl
-      dataFrom.value.content[0].facilitator.values = props.dataList.deptContacts
+      // dataFrom.value.content[0].link.value = props.dataList.apiUrl
+      dataFrom.value.content[0].facilitator.values = props.dataList.deptName
+      dataFrom.value.content[0].people.value = props.dataList.deptContacts
+      dataFrom.value.content[0].phone.value = props.dataList.deptPhone
      console.log('dataList', props.dataList)
      props.dataList.infoList.map((item) => {
-        if (item.attrType === '组件地址') {
+        if (item.attrType === '使用手册') {
+          dataFrom.value.link = item.attrValue || '--'
+        } else if (item.attrType === '服务地址') {
          dataFrom.value.content[0].linkValue = item.attrValue || '--'
-        } else if (item.attrType === '服务商') {
-          dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
-        } else if (item.attrType === '服务商联系人') {
-          dataFrom.value.content[0].people.value = item.attrValue || '--'
-        } else if (item.attrType === '服务商联系电话') {
-          dataFrom.value.content[0].phone.value = item.attrValue || '--'
+        } else if (item.attrType === '样式服务地址') {
+          dataFrom.value.content[0].csslnkValue = item.attrValue || '--'
        }
+        //  else if (item.attrType === '服务商联系电话') {
+        //   dataFrom.value.content[0].phone.value = item.deptPhone || '--'
+        // }
      })
    }
  }
@ -107,24 +120,40 @@
    () => props.dataList,
    (val) => {
      if (val) {
-        let obj = val.infoList.filter((item) => item.attrType === '技术文档')[0]
+        let obj = val.infoList.filter(
+          (item) =>
+            item.attrType === '技术文档' ||
+            item.attrType === '服务商' ||
+            item.attrType === '服务商联系人' ||
+            item.attrType === '使用手册' ||
+            item.attrType === '服务地址' ||
+            item.attrType === '样式服务地址' ||
+            item.attrType === '服务商联系电话'
+        )[0]
        if (!obj) {
          flag.value = false
        } else {
-          dataFrom.value.content[0].link.value = val.apiUrl
-          dataFrom.value.content[0].facilitator.value = val.deptContacts
+          // dataFrom.value.content[0].link.value = val.apiUrl
+          dataFrom.value.content[0].facilitator.values = val.deptName
+          dataFrom.value.content[0].people.value = val.deptContacts
+          dataFrom.value.content[0].phone.value = val.deptPhone
          console.log('dataList', val)
          val.infoList.map((item) => {
-            if (item.attrType === '组件地址') {
+            if (item.attrType === '使用手册') {
+              dataFrom.value.link = item.attrValue || '--'
+            } else if (item.attrType === '服务地址') {
              dataFrom.value.content[0].linkValue = item.attrValue || '--'
-            } else if (item.attrType === '服务商') {
-              dataFrom.value.content[0].facilitator.value =
-                item.attrValue || '--'
-            } else if (item.attrType === '服务商联系人') {
-              dataFrom.value.content[0].people.value = item.attrValue || '--'
-            } else if (item.attrType === '服务商联系电话') {
-              dataFrom.value.content[0].phone.value = item.attrValue || '--'
+            } else if (item.attrType === '样式服务地址') {
+              dataFrom.value.content[0].csslnkValue = item.attrValue || '--'
            }
+            // else if (item.attrType === '服务商') {
+            //   dataFrom.value.content[0].facilitator.value =
+            //     item.attrValue || '--'
+            // } else if (item.attrType === '服务商联系人') {
+            //   dataFrom.value.content[0].people.value = item.attrValue || '--'
+            // } else if (item.attrType === '服务商联系电话') {
+            //   dataFrom.value.content[0].phone.value = item.attrValue || '--'
+            // }
          })
        }
      }
--- a/front/src/views/home/AbilityToApplyFor.vue
+++ b/front/src/views/home/AbilityToApplyFor.vue
@ -10,12 +10,16 @@
        <span></span>
        {{ item.deptName }}
      </div>
-      <div class="name">
-        <span>{{ item.name }}</span>
-        <span>{{ item.type }}</span>
-      </div>
-      <div class="description">{{ item.description }}</div>
-      <div class="remove" @click="removeFunction(item)"></div>
+      <template v-for="val in item.children" :key="val.resourceId">
+        <div class="item">
+          <div class="name">
+            <span>{{ val.resourceName }}</span>
+            <span>{{ val.type }}</span>
+          </div>
+          <div class="description">{{ val.description || '--' }}</div>
+          <div class="remove" @click="removeFunction(val)"></div>
+        </div>
+      </template>
    </div>
  </div>
 </template>
@ -28,6 +32,7 @@
    dataList: { type: Array, default: null },
  })
  let dataForm = ref([])
+  // eslint-disable-next-line vue/no-setup-props-destructure
  dataForm.value = props.dataList
  const router = useRouter()
  const arr =
@ -42,17 +47,12 @@
  })
  //移除方法
  const removeFunction = (data) => {
-    props.dataList.map((item, index) => {
-      if (item.name == data.name) {
-        arr.splice(arr.indexOf(data.name), 1)
-        dataResourceId.splice(dataResourceId.indexOf(data.id), 1)
-        depList.value.depID = dataResourceId
-        depList.value.Name = arr
-        dataForm.value.splice(index, 1)
-        mybus.emit('reomveOldData', depList.value)
-        console.log('depList.value', depList.value)
-      }
+    dataForm.value.map((val) => {
+      val.children = val.children.filter(
+        (item) => item.resourceId !== data.resourceId
+      )
    })
+    dataForm.value = dataForm.value.filter((val) => val.children.length !== 0)
  }
 </script>

@ -66,9 +66,9 @@
      margin-bottom: 0.2rem;
    }
    .ability-to-apply-for-content {
-      margin-bottom: 0.3rem;
-      border-bottom: 0.01rem #dddee1 solid;
-      padding-bottom: 0.3rem;
+      // margin-bottom: 0.3rem;
+      // border-bottom: 0.01rem #dddee1 solid;
+      // padding-bottom: 0.3rem;
      padding-right: 0.5rem;
      position: relative;
      .dep-name {
@ -87,6 +87,12 @@
          margin-right: 0.05rem;
        }
      }
+      .item {
+        padding-bottom: 0.1rem;
+        margin-bottom: 0.1rem;
+        border-bottom: 1px solid #dddee1;
+        position: relative;
+      }
      .name {
        margin-bottom: 0.2rem;
        span:first-child {
@ -103,6 +109,7 @@
        }
      }
      .description {
+        width: 10rem;
        color: rgba(0, 0, 0, 0.45);
      }
      .remove {
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@ -1038,7 +1038,8 @@
      const resourceList = reactive({ data: [] })
      const videoList = reactive({ data: [] })
      const resourceTotal = ref('')
-      const getAppResources = () => {
+      const getAppResources = (switchIndex) => {
+        //switchIndex这个参数是下面的分页传过来的参数
        paramsGetResources.name = searchValue.value
        paramsGetResources.type = Cardsname.value
        console.log(
@ -1049,7 +1050,10 @@
          !whoShow1.value.itShowBaoTou &&
          paramsGetResources.type === '数据资源'
        ) {
-          getDataResource({
+          if (switchIndex != '分页查询') {
+            paramsGetResources.pageNum = 1
+          }
+          let dataResourceParams = {
            serviceName: paramsGetResources.name, //资源名称
            orderField: whoShow1.value.itShowQingDao
              ? paramsGetResources.orderField == 'applyCount'
@ -1061,7 +1065,8 @@
            orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
            pageNum: paramsGetResources.pageNum, //页码
            pageSize: paramsGetResources.pageSize, //分页大小
-          }).then((res) => {
+          }
+          getDataResource(dataResourceParams).then((res) => {
            console.log('数据资源==================>', res.data.data)
            if (whoShow1.value.itShowQingDao) {
              res.data.data.data.forEach((val) => {
@ -1091,6 +1096,10 @@
            }
          })
        } else if (paramsGetResources.type !== '数据资源') {
+          if (switchIndex != '分页查询') {
+            paramsGetResources.pageNum = 1
+          }
+          debugger
          pageWithAttrs(paramsGetResources).then((res) => {
            console.log('查询列表============>', resourceList, res.data.data)
            resourceList.data = []
@ -1182,7 +1191,9 @@
        loading.value = true
        currentPage.value = val
        paramsGetResources.pageNum = val
-        getAppResources()
+        let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
+        getAppResources(params)
+        debugger
      }
      // const findZywMessage = () => {
      //   zywMessage().then((res) => {
--- a/front/src/views/home/apply.vue
+++ b/front/src/views/home/apply.vue
@ -7,7 +7,7 @@
      </aside> -->
      <article>
        <div class="from-card" v-if="applySuccess">
-          <AbilityToApplyFor :dataList="dataList"></AbilityToApplyFor>
+          <AbilityToApplyFor :dataList="list"></AbilityToApplyFor>
        </div>
        <div class="form-container">
          <div v-if="applySuccess">
@ -280,23 +280,8 @@
          formName.unit = res.data.data.deptName
        })
      })
-      console.log(
-        'router传参==================>',
-        router.currentRoute.value.query.name
-      )
-      let arr =
-        router.currentRoute.value.query.name instanceof Array
-          ? router.currentRoute.value.query.name
-          : [router.currentRoute.value.query.name]
-      console.log(router.currentRoute.value.query.ids)
-      const ids = router.currentRoute.value.query.ids
-      let dataResourceId = router.currentRoute.value.query.resourceId
-      dataResourceId.map((item) => {
-        selectOne(item).then((res) => {
-          dataList.value.push(res.data.data)
-          console.log('dataResourceId', dataList.value)
-        })
-      })
+      const list = ref(JSON.parse(localStorage.getItem('applyList')))
+      // console.log('本地存储====================》', list.value)
      const businessKey = ref(router.currentRoute.value.query.id)
      const taskId = ref(router.currentRoute.value.query.taskId)
      if (businessKey.value) {
@ -306,11 +291,11 @@
          formName.scene = res.data.data.scene
          formName.basis = res.data.data.basis
          formName.enclosure = res.data.data.enclosure
-          console.log('回填数据================>', res, formName.phone)
+          // console.log('回填数据================>', res, formName.phone)
        })
      }

-      console.log(formName.system)
+      // console.log(formName.system)
      const formRef = ref()
      const applySuccess = ref(true)
      // const rootObj = null
@ -342,7 +327,7 @@
            if (upres.data.code == 0) {
              relaunch({ data: obj.value, taskId: taskId.value }).then(
                (res) => {
-                  console.log('驳回================>', res)
+                  // console.log('驳回================>', res)
                  if (res.data.code == 0) {
                    message.success('重新发起流程成功！')
                    window.setTimeout(() => {
@ -365,65 +350,65 @@
            if (!formName) {
              return message.error('请设置表单名称')
            }
-            if (arr && arr.length !== 0) {
-              console.log('提交')
-              const obj = ref({})
-              for (const key in formName) {
-                if (key !== 'formNameSystem') {
-                  obj.value[key] = formName[key]
-                }
-              }
-              submitApply(obj.value).then((res) => {
-                applySuccess.value = false
-                message.success('操作成功！')
-                console.log('能力申请================>', res)
-                if (ids) {
-                  sgcDel({ ids: ids }).then((res) => {
-                    if (res.data.msg === 'success') {
-                      mybus.emit('getSgcNum')
-                    }
-                  })
-                }
-              })
-            } else {
-              lastestPage({
-                key: dataForm.processDefinitionKey,
-              })
-                .then(({ data: res }) => {
-                  if (res.code !== 0) {
-                    return message.error(res.msg)
-                  }
-                  if (!res.data.list || res.data.list.length <= 0) {
-                    return message.error('没有查询到流程，请先设计流程')
-                  }
-                  // proxy.$http['post'](formUrl, rootObj[formName])
-                  tabilityapplication(formName)
-                    .then(({ data: res }) => {
-                      if (res.code !== 0) {
-                        message.error(res.msg)
-                        if (callbacks.formSaveErrorCallback) {
-                          callbacks.formSaveErrorCallback(res)
-                        }
-                      }
-                      if (callbacks.formSaveSuccessCallback) {
-                        callbacks.formSaveSuccessCallback(res)
-                      }
-                      if (!res.data.businessKey) {
-                        return message.error('业务KEY为空，无法启动流程')
-                        // startProcess(dataForm.processDefinitionKey, null, rootObj[formName])
-                      } else {
-                        startProcess(
-                          dataForm.processDefinitionKey,
-                          res.data.businessKey
-                          // rootObj[formName]
-                        )
-                      }
-                    })
-                    .catch(() => {})
-                })
-                .catch(() => {})
-              // })
-            }
+            // if (arr && arr.length !== 0) {
+            //   console.log('提交')
+            //   const obj = ref({})
+            //   for (const key in formName) {
+            //     if (key !== 'formNameSystem') {
+            //       obj.value[key] = formName[key]
+            //     }
+            //   }
+            //   submitApply(obj.value).then((res) => {
+            //     applySuccess.value = false
+            //     message.success('操作成功！')
+            //     console.log('能力申请================>', res)
+            //     if (ids) {
+            //       sgcDel({ ids: ids }).then((res) => {
+            //         if (res.data.msg === 'success') {
+            //           mybus.emit('getSgcNum')
+            //         }
+            //       })
+            //     }
+            //   })
+            // } else {
+            //   lastestPage({
+            //     key: dataForm.processDefinitionKey,
+            //   })
+            //     .then(({ data: res }) => {
+            //       if (res.code !== 0) {
+            //         return message.error(res.msg)
+            //       }
+            //       if (!res.data.list || res.data.list.length <= 0) {
+            //         return message.error('没有查询到流程，请先设计流程')
+            //       }
+            //       // proxy.$http['post'](formUrl, rootObj[formName])
+            //       tabilityapplication(formName)
+            //         .then(({ data: res }) => {
+            //           if (res.code !== 0) {
+            //             message.error(res.msg)
+            //             if (callbacks.formSaveErrorCallback) {
+            //               callbacks.formSaveErrorCallback(res)
+            //             }
+            //           }
+            //           if (callbacks.formSaveSuccessCallback) {
+            //             callbacks.formSaveSuccessCallback(res)
+            //           }
+            //           if (!res.data.businessKey) {
+            //             return message.error('业务KEY为空，无法启动流程')
+            //             // startProcess(dataForm.processDefinitionKey, null, rootObj[formName])
+            //           } else {
+            //             startProcess(
+            //               dataForm.processDefinitionKey,
+            //               res.data.businessKey
+            //               // rootObj[formName]
+            //             )
+            //           }
+            //         })
+            //         .catch(() => {})
+            //     })
+            //     .catch(() => {})
+            //   // })
+            // }
          })
        }
      }
@ -498,7 +483,7 @@

      const handleChange = (info) => {
        if (info.file.status !== 'uploading') {
-          console.log(info.file, info.fileList)
+          // console.log(info.file, info.fileList)
        }

        if (info.file.status === 'done') {
@ -528,31 +513,31 @@
      }
      const fileList = ref([])
      //删除改变arr
-      mybus.on('reomveOldData', (item) => {
-        debugger
-        arr = []
-        formName.system = []
-        record.value = record.value + '1'
-        arr = item.Name
-        dataResourceId = item.depID
-        if (arr && arr.length !== 0) {
-          disabled.value = true
-          let str = ''
-          arr.forEach((val, index) => {
-            str += val
-            if (index < arr.length - 1) {
-              str += '、'
-            }
-          })
-          formName.formNameSystem = str
-        }
-        arr.forEach((val, index) => {
-          formName.system.push({
-            resourceName: val,
-            resourceId: dataResourceId[index],
-          })
-        })
-      })
+      // mybus.on('reomveOldData', (item) => {
+      //   debugger
+      //   arr = []
+      //   formName.system = []
+      //   record.value = record.value + '1'
+      //   arr = item.Name
+      //   // dataResourceId = item.depID
+      //   if (arr && arr.length !== 0) {
+      //     disabled.value = true
+      //     let str = ''
+      //     arr.forEach((val, index) => {
+      //       str += val
+      //       if (index < arr.length - 1) {
+      //         str += '、'
+      //       }
+      //     })
+      //     formName.formNameSystem = str
+      //   }
+      //   arr.forEach((val, index) => {
+      //     formName.system.push({
+      //       resourceName: val,
+      //       // resourceId: dataResourceId[index],
+      //     })
+      //   })
+      // })
      onBeforeUnmount(() => {
        mybus.off('reomveOldData')
      })
@ -566,6 +551,7 @@
        startProcess,
        options,
        fileList,
+        list,
        headers: {
          authorization: 'authorization-text',
        },
@ -585,7 +571,7 @@
    // background-color: #f5f8fc;
    height: 100%;
    width: 100%;
-    margin: 130px auto 0;
+    margin: 0.8rem auto 0;
    display: flex;
    justify-content: space-between;
    aside {
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@ -139,7 +139,7 @@
  // 获取用户信息
  getUser().then((res) => {
    user.value = res.data.data
-    console.log('user===============>', user.value)
+    // console.log('user===============>', user.value)
  })
  // 退出登录
  const logout = async () => {
@ -154,7 +154,7 @@
  }
  // 跳转页面
  const jumpPage = (item) => {
-    console.log(item)
+    // console.log(item)
    select.value = item.key
    switch (item.name) {
      case '个人中心':
@ -221,7 +221,7 @@
  mybus.on('getSgcNum', () => {
    getSgcTotal().then((res) => {
      sgcNum.value = res.data.data.count
-      console.log('申购车总数========================>', res.data.data.count)
+      // console.log('申购车总数========================>', res.data.data.count)
    })
  })

@ -234,7 +234,7 @@
  // 我的消息
  const getMynotice = () => {
    mynotice({ page: 1, limit: 3, readStatus: 0 }).then((res) => {
-      console.log('我的消息', res.data.data)
+      // console.log('我的消息', res.data.data)
      mynoticeNum.value = res.data.data.total
      mynoticeData.value = res.data.data.list
    })
@ -252,7 +252,7 @@
  // }
  onMounted(() => {
    getSgcTotal().then((res) => {
-      console.log('初始化========================>', res.data.data.count)
+      // console.log('初始化========================>', res.data.data.count)
      sgcNum.value = res.data.data.count
    })
    getMynotice()
@ -281,7 +281,7 @@
    mybus.on('getSgcNum', () => {
      getSgcTotal().then((res) => {
        sgcNum.value = res.data.data.count
-        console.log('申购车总数========================>', res.data.data.count)
+        // console.log('申购车总数========================>', res.data.data.count)
      })
    })
    mybus.on('getMynotice', () => {
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@ -46,7 +46,7 @@
        <div class="left jcss" v-else></div>
        <div class="right">
          <div class="header">
-            <span style="display: flex; align-items: center">
+            <span style="display: block; width: 680px">
              {{ item.name }}
              <svg
                t="1652322568870"
--- a/front/src/views/home/detailsPageInfrastructureTree.vue
+++ b/front/src/views/home/detailsPageInfrastructureTree.vue
@ -243,6 +243,8 @@
      const selectId = ref('')
      const onSelect = (item, val, child) => {
        console.log('item, val, child', child)
+        mybus.emit('getCameraByParentId', val.id)
+        mybus.emit('getListByParentId', val.id)
        getCameraAllOrgan({ parentId: val.id }).then((res) => {
          treeData.value.map((treeDataItem, index) => {
            if (item.id == treeDataItem.id) {
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@ -19,7 +19,7 @@
      </div>
    </div>
    <!-- 地图 -->
-    <div class="map-contain">
+    <div class="map-contain" v-if="showMap">
      <video-surveillance></video-surveillance>
    </div>
    <!-- 功能行 -->
@ -28,7 +28,7 @@
      <div class="contentNum">
        <p>
          备选
-          <span>{{ dataSource.length }}</span>
+          <span>{{ pagination.total }}</span>
          个
        </p>
        <i class="boundary"></i>
@ -59,7 +59,7 @@
        </div>
        <i class="boundary"></i>
        <!-- 添加至购物车 -->
-        <a-button type="primary" @click="addShopCar" class="buttonAdd">
+        <a-button type="primary" @click="addShoppingCart" class="buttonAdd">
          添加至购物车
        </a-button>
        <!-- 一键申请 -->
@ -75,6 +75,7 @@
        :dataSource="dataSource"
        :columns="columns"
        :scroll="{ y: tableHeight }"
+        rowKey="channelId"
        :rowClassName="
          (record, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
@ -93,9 +94,46 @@
  import { getCategoryTreePage } from '@/api/personalCenter'
  import { dataType } from 'element-plus/es/components/table-v2/src/common'
  import { ref, onMounted } from 'vue'
+  import { getCameraByParentId } from '@/api/videoSurveillance'
+  import { sgcInsert } from '@/api/home'
+  import { message } from 'ant-design-vue'
+  import mybus from '@/myplugins/mybus'
+
+  const pagination = ref({
+    total: 0,
+    current: 1,
+    pageSize: 10, //每页中显示10条数据
+    showSizeChanger: true,
+    pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
+  })
+  const mapSearchParam = ref({
+    // 地图搜索初始化数据
+    parentId: '',
+    checkStatus: '1',
+    pageNum: pagination.value.current,
+    pageSize: pagination.value.pageSize,
+    gpsX: '',
+    gpsY: '',
+    radius: '',
+  })
+  const showMap = ref(true)
  onMounted(() => {
    tabClick(0, '视频资源')
+    getCamera()
+    mybus.off('getListByParentId')
+    mybus.on('getListByParentId', (parentId) => {
+      mapSearchParam.value.parentId = parentId
+      getCamera()
+    })
+    mybus.off('getListByMap')
+    mybus.on('getListByMap', (param) => {
+      mapSearchParam.value.gpsX = param.gpsX
+      mapSearchParam.value.gpsY = param.gpsY
+      mapSearchParam.value.radius = param.radius
+      getCamera()
+    })
  })
+  const selectedList = ref([])
  const tabList = ref([
    {
      title: '设施类型',
@ -124,6 +162,10 @@
      }
      clickList.value.push(params)
    })
+    mybus.off('tranferToList')
+    mybus.on('tranferToList', (data) => {
+      console.log('获取到的列表数据')
+    })
  }
  let clickList = ref([]) //存储点击的tab
  init()
@ -134,10 +176,13 @@
    if (clickList.value[indexFather].content.indexOf(name) != -1) {
      if (name == '视频资源') {
        tableHeight.value = 330
+        showMap.value = true
      } else if (name == '云资源') {
        tableHeight.value = 600
+        showMap.value = false
      } else if (name == '感知资源') {
        tableHeight.value = 330
+        showMap.value = true
      }
      clickList.value[indexFather].content.splice(
        clickList.value[indexFather].content.indexOf(name),
@ -146,6 +191,7 @@
    } else {
      if (name == '视频资源') {
        tableHeight.value = 330
+        showMap.value = true
        tabList.value[1].content = []
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
@ -161,6 +207,7 @@
        })
      } else if (name == '云资源') {
        tableHeight.value = 600
+        showMap.value = false
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
        tabList.value[1].content = [
@ -175,6 +222,7 @@
        ]
      } else if (name == '感知资源') {
        tableHeight.value = 330
+        showMap.value = true
        clickList.value[1].content = []
        clickList.value[indexFather].content[0] = name
        tabList.value[1].content = ['333333', '213124']
@ -207,138 +255,53 @@
  const addShopCar = () => {
    console.log('添加至购物车')
  }
+  const getCamera = () => {
+    console.log('初始化调用')
+    getCameraByParentId(mapSearchParam.value).then((res) => {
+      console.log('RRRRRRRRRR', res.data.data)
+      dataSource.value = res.data.data
+      pagination.value.total = res.data.count
+    })
+  }
+  //加入申购车
+  const addShoppingCart = () => {
+    sgcInsert({
+      delFlag: '0',
+      resourceId: '8888888880000000001',
+      note1: selectedList.value,
+      // userId: userId.value,
+    }).then((res) => {
+      console.log(res)
+      message.success('添加申购车成功！')
+      mybus.emit('getSgcNum')
+    })
+  }
  // 表格
-  const dataSource = ref([
-    {
-      key: '1',
-      name: '沈腾',
-      age: 32,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '2',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '3',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '4',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '5',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '6',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '7',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '8',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '9',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '10',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '11',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '12',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '13',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '14',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '15',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '16',
-      name: '沈腾',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-  ])
+  const dataSource = ref([])
  const columns = ref([
    {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
+      title: '名称',
+      dataIndex: 'channelName',
+      key: 'channelName',
    },
    {
-      title: '年龄',
-      dataIndex: 'age',
-      key: 'age',
-    },
-    {
-      title: '住址',
-      dataIndex: 'address',
-      key: 'address',
+      title: '归属',
+      dataIndex: 'nodeName',
+      key: 'nodeName',
    },
  ])
  const allClick = ref([])
-  const onSelectChange = (selectedRowKeys) => {
-    console.log('hahhahah', selectedRowKeys)
-    allClick.value = selectedRowKeys
+  const onSelectChange = (selectedRowKeys, selectedRows) => {
+    console.log('hahhahah', selectedRowKeys, selectedRows)
+    selectedList.value = selectedRows
+    // allClick.value = selectedRowKeys
  }
-  const pagination = ref({
-    total: 0,
-    pageSize: 10, //每页中显示10条数据
-    showSizeChanger: true,
-    pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
-  })
  const handleTableChange = (val) => {
    pagination.value.current = val.current
    pagination.value.pageSize = val.pageSize
-    this.queryParam.page = val.current
-    this.queryParam.size = val.pageSize
+    mapSearchParam.value.pageNum = val.current
+    mapSearchParam.value.pageSize = val.pageSize
+    getCamera()
    // this.getTableList()
  }
 </script>
--- a/front/src/views/home/videoSurveillance/index.vue
+++ b/front/src/views/home/videoSurveillance/index.vue
@ -8,31 +8,16 @@
      </div>

      <div class="searchPoint">
-        <a-auto-complete
-          v-model:value="value"
-          class="certain-category-search"
-          dropdown-class-name="certain-category-search-dropdown"
-          :dropdown-match-select-width="500"
-          style="width: 250px"
-          :options="dataSource"
-        >
-          <template #option="item">
-            <template>
-              <span>
-                {{ item.value }}
-                <a
-                  style="float: right"
-                  href="https://www.google.com/search?q=antd"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  more
-                </a>
-              </span>
-            </template>
-          </template>
-          <a-input-search placeholder="搜索地点" size="large"></a-input-search>
-        </a-auto-complete>
+       <el-autocomplete
+                  v-model="address"
+                  placeholder="请输入地址"
+                  clearable
+                  :fetch-suggestions="((queryString,cb) =>{searchAddressByKeyWord(queryString,cb,i)})"
+                  :trigger-on-focus="false"
+                  :popper-append-to-body="false"
+                  class="address-auto-complete-input"
+                  @select="((addressItem) =>{selectedAddress(addressItem,i)})"
+                />
        <!-- <el-autocomplete
          class="inline-input"
          prefix-icon="Search"
@ -83,6 +68,7 @@
 </template>

 <script>
+  import { message } from 'ant-design-vue';
  import { HieimpMap } from '@/supermap/map-init'
  import TiledMap from './components/tiledMap'
  import { createCameraDetailsPop } from '@/supermap/createMarkerPopup'
@ -118,6 +104,18 @@
        openVideo: false,
        channelCode: [],
        circleModeFlag: false,
+        addressMatchUrl: '',
+        address: '',
+        mapSearchParam: {
+          // 地图搜索初始化数据
+          parentId: '',
+          checkStatus: '1',
+          pageNum: '1',
+          pageSize: '20000',
+          gpsX: '',
+          gpsY: '',
+          radius: ''
+        }
      }
    },
    components: {
@ -138,59 +136,135 @@
        this.hiMapFun
      )
      this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16)
-      getCameraAllLabel().then((res) => {
-        this.tabList = res.data.data
-      })
-      getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then((res) => {
-        this.camreaTree = res.data.data
-        res.data.data.forEach((item) => {
-          this.camreaTreeSingle.push({
-            channelName: item.name,
-            children: [],
-          })
-        })
-      })
-      getCameraAll().then((res) => {
-        let t1 = new Date().getTime()
-        this.cameraAllData = res.data
-        this.addResourceTomap('全部', res.data)
-        let t2 = new Date().getTime()
-        console.log('时间#############' + (t2 - t1))
-      })
-
+      this.addressMatchUrl = window.SITE_CONFIG.POI_URL;
+      // 初始化地址检索服务
+      this.initAddressMatchService()
      // this.getMapPoint()
-      // mybus.$off('openCurrentVideoSurveillance')
-      // mybus.$on('openCurrentVideoSurveillance', (channelCode) => {
-      //   this.openVideo = true
-      //   this.channelCode.unshift(channelCode)
-      // })
+      // 根据parentId查询摄像头列表
+      mybus.off('getCameraByParentId')
+      mybus.on('getCameraByParentId', (parentId) => {
+          this.mapSearchParam.parentId = parentId
+          this.getCameraByParentId()
+      })
    },
    methods: {
+      selectedAddress(item,index) {
+        // 跳转到相应经纬度
+        console.log('跳转', item)
+        const latLng = {
+          lat: item.location.y,
+          lng: item.location.x
+        }
+        this.hiMapFun.mapFlyTo(latLng)
+      },
+      // 圈选方法
+    circleSelectResource() {
+      L.drawLocal.draw.handlers.circle.tooltip.start = '请圈选区域';
+      L.drawLocal.draw.handlers.circle.radius = '半径';
+      L.drawLocal.draw.handlers.circle.tooltip.end = '松开绘制完成';
+
+      this.hiMap.mapObj.map.off('draw:created');
+      this.hiMap.mapObj.drawCircle.enable();
+      this.hiMap.mapObj.map.once('draw:created', (e) => {
+        const type = e.layerType;
+        const circleLayer = e.layer;
+        if (type === 'circle') {
+          const radius = (e.layer._mRadius).toFixed(2)
+          if (radius > 5000) {
+            message.info('最大支持5km范围的圈选')
+          } else {
+            const circlePloygonLayer = this.multiScreenFun.createCircleLayer(circleLayer);
+            this.hiMap.mapObj.featureGroup.addLayer(circlePloygonLayer);
+            this.hiMap.mapObj.layerGroup.set('circlePloygonLayer', circlePloygonLayer);
+            console.log('查询图层为何发生了改变', e.layer);
+            this.mapSearchParam.gpsX = e.layer._latlng.lng.toFixed(2)
+            this.mapSearchParam.gpsY = e.layer._latlng.lat.toFixed(2)
+            this.mapSearchParam.radius = radius
+            const params = {
+              gpsX: this.mapSearchParam.gpsX,
+              gpsY: this.mapSearchParam.gpsY,
+              radius: radius
+            }
+            mybus.emit('getListByMap', params)
+            this.getCameraByParentId()
+          }
+        }
+      });
+    },
+    getCameraByParentId() {
+          getCameraByParentId(this.mapSearchParam).then((res) => {
+            console.log('根据parent查询摄像头', res.data.data)
+            this.addResourceTomap('videoMap', res.data.data)
+      })
+      },
+    // 初始化地址匹配服务
+      initAddressMatchService() {
+        this.L = window.L || {};
+        this.addressMatchService = L.supermap.addressMatchService(this.addressMatchUrl);
+      },
      circleMode() {
        // 转换圈选模式
        this.circleModeFlag = !this.circleModeFlag
        if(this.circleModeFlag){
          // 打开圈选模式
-
+          this.circleSelectResource()
        }else {
          // 关闭圈选模式，清空圈选内容，重新上图
-
+          this.hiMapFun.removeLayerByLayerName('circlePloygonLayer')
+          // 重置内容
+          this.mapSearchParam.gpsX = ''
+          this.mapSearchParam.gpsY = ''
+          this.mapSearchParam.radius = ''
+          this.getCameraByParentId()
+          const params = {
+              gpsX: this.mapSearchParam.gpsX,
+              gpsY: this.mapSearchParam.gpsY,
+              radius: this.mapSearchParam.radius
+            }
+            mybus.emit('getListByMap', params)
        }

      },
-      getCameraAllPage(page) {
-        let params = {
-          page: page,
-          pageSize: 20000,
+      //查询地址建议匹配
+      async searchAddressByKeyWord(queryString, cb, indexX) {
+        this.disasterPointIndex = indexX;
+       /* const res = await bdPlaceSearch({ searchKey: queryString });
+        if (res.data) {
+          for(var i=0;i<res.data.length;i++){
+            res.data[i].value = res.data[i].name;
+          }
+          cb(res.data);
+        }*/
+        const match = function(obj) {
+          //console.log('ooooo',obj);
+          obj.result.map(item => {
+            item.value = item.address;
+          });
+          cb(obj.result);
+        };
+        if (!queryString) {
+          cb([]);
+        } else {
+          var geoCodeParam = new SuperMap.GeoCodingParameter({
+            'address': queryString,
+          });
+          this.addressMatchService.code(geoCodeParam, match);
        }
-        getCameraAll(params).then((res) => {
-          // let t1 = new Date().getTime();
-          this.cameraAllData = res.data.data
-          this.addResourceTomap('全部', res.data.data)
-          // let t2 = new Date().getTime();
-          // console.log("时间#############" + (t2 - t1));
-        })
      },
+      // getCameraAllPage(page) {
+      //   let params = {
+      //     name: '',
+      //     page: page,
+      //     pageSize: 20000,
+      //   }
+      //   selectByChannelName(params).then((res) => {
+      //     // let t1 = new Date().getTime();
+      //     this.cameraAllData = res.data.data
+      //     this.addResourceTomap('全部', res.data.data)
+      //     // let t2 = new Date().getTime();
+      //     // console.log("时间#############" + (t2 - t1));
+      //   })
+      // },
      tabChange(item) {
        if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
          if (item.labelName == '全部') {
@ -234,6 +308,7 @@
            })
          }
        })
+        console.log('上图数据', dataEvent)
        this.getMapPoint(dataEvent, 'videoSurveillance.png', type)
      },
      getMapPoint(data, img, type) {
@ -286,39 +361,7 @@
          console.log(this.camreaTree)
        })
      },
-      loadNode(node, resolve) {
-        // if (node.level === 0) {
-        //   return resolve([{ name: 'region' }]);
-        // }
-        if (node.level > 0) {
-          let subData = []
-          getCameraAllOrgan({ parentId: node.data.id }).then((res) => {
-            if (res.data.data.length == 0) {
-              const params = {
-                parentId: node.data.id,
-                checkStatus: '1',
-                // this.checkStatus == '2' ? ['0', '1'] : this.checkStatus,
-              }
-              getCameraByParentId(params).then((res) => {
-                res.data.data.forEach((item) => {
-                  subData.push({
-                    name: item.channelName,
-                    gpsX: item.gpsX,
-                    gpsY: item.gpsY,
-                    channelCode: item.channelCode,
-                    checkStatus: item.checkStatus,
-                    leaf: true,
-                  })
-                })
-                return resolve(subData)
-              })
-            } else {
-              subData = res.data.data
-              return resolve(subData)
-            }
-          })
-        }
-      },
+
      treeCameraClick(data) {
        console.log(data)
        if (data.channelCode) {
@ -429,185 +472,12 @@
      top: 0.1rem;
      right: 0.1rem;
      border-radius: 4px;
-      // margin-top: 20px;
-      :deep(.el-input__wrapper) {
-        background: #629ab8;
-        border-radius: 20px;
-      }
-      :deep(.el-input__inner) {
-        color: #fff;
-        background: #629ab8;
-        width: 255px;
-        height: 44px;
-        border-radius: 20px;
-        &::placeholder {
-          color: #fff;
-        }
-      }
-      :deep(.el-input__prefix) {
-        top: 2px;
-      }
-      :deep(.el-input-group__append) {
-        width: 54px;
-        min-height: unset;
-        height: 30px;
-        position: absolute;
-        right: 6px;
-        top: 6px;
-        border-radius: 20px;
-        line-height: 30px;
-        text-indent: -4px;
-        color: #5e9bbd;
-        font-size: 14px;
-        cursor: pointer;
-      }
-      :deep(.my-autocomplete) {
-        top: 20px !important;
-        z-index: -1 !important;
-        width: 250px !important;
-        left: 2px !important;
-        background: #3c657c;
-        border-radius: 0 0 20px 20px;
-        li {
-          color: #fff;
-          &:hover {
-            background: #41738f;
-          }
-        }
-      }
-      :deep(.el-popper) {
-        width: 300px !important;
-      }
-    }
-
-    .tag-box {
-      position: absolute;
-      right: 30px;
-      // top: 138px;
-      margin-top: 20px;
-      z-index: 1000;
-      width: 350px;
-      height: 500px;
-      border-radius: 5px;
-      background-color: #25536d;
-      .refresh {
-        position: absolute;
-        right: 15px;
-        top: 10px;
-        color: #fff;
-        cursor: pointer;
-        z-index: 1008;
-      }
-
-      :deep(.el-tabs) {
-        background: transparent;
-        // width: 300px;
-        height: 500px;
-        border: none;
-        .el-tabs__header {
-          background: transparent;
-
-          .el-tabs__item {
-            width: 150px;
-            text-align: center;
-          }
-          .el-tabs__item.is-active {
-            background: rgba(27, 255, 255, 0.2);
-            color: #fff;
-            background-image: url('~@/assets/img/picture_left.png'),
-              url('~@/assets/img/picture_right.png');
-            background-repeat: no-repeat;
-            background-position: 6% 55%, 94% 55%;
-            background-size: 20% 20%;
-          }
-        }
-        .el-input__inner {
-          background-color: #51758a;
-          border-radius: 5px;
-          border: none;
-        }
-        .el-input__wrapper {
-          background-color: #51758a;
-        }
-        .el-input__suffix {
-          .el-input__icon {
-            color: #72c7f5;
-          }
-        }
-        .el-tree {
-          margin-top: 15px;
-          height: 320px;
-          overflow-y: auto;
-          &::-webkit-scrollbar {
-            width: 4px;
-            background-color: #456d83;
-          }
-          &::-webkit-scrollbar-thumb {
-            border-radius: 10px;
-            background-color: #708fa3 !important;
-          }
-        }
-      }
-      :deep(.el-checkbox-group) {
-        height: 360px;
-        overflow-y: auto;
-        margin-top: 22px;
-        &::-webkit-scrollbar {
-          width: 4px;
-          background-color: #456d83;
-        }
-        &::-webkit-scrollbar-thumb {
-          border-radius: 10px;
-          background-color: #708fa3 !important;
-        }
-      }
-      :deep(.el-checkbox-button) {
-        border-radius: 20px;
-        margin: 10px;
-        .el-checkbox-button__inner {
-          height: 30px;
-        }
-        .el-checkbox-button__inner {
-          border-radius: 20px;
-          background-color: rgba(116, 204, 252, 0.4);
-          color: #fff;
-          border: none;
-        }
-        .el-checkbox-button__inner:hover {
-          background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
-        }
-      }
-      :deep(.el-checkbox-button.is-checked) {
-        background: linear-gradient(90deg, #31abee 0%, #17d3d3 100%);
-      }
-      :deep(.el-tabs__item) {
-        color: #d1ced5;
-      }
-      .el-tree {
-        background: transparent;
-        color: #fff;
-      }
-      :deep(.el-tree-node__content:hover) {
-        background: rgba(27, 255, 255, 0.2);
-      }
-      :deep(.el-tree-node:focus) > .el-tree-node__content {
-        background-color: rgba(27, 255, 255, 0.2);
-        color: #fff;
-      }
      .reset-button {
        margin-left: 20px;
        color: #fff;
        cursor: pointer;
        z-index: 1008;
      }
-      .checkStatus {
-        .el-checkbox {
-          color: #fff;
-        }
-      }
-      .el-radio {
-        color: #fff;
-      }
    }
  }
 </style>
@ -626,5 +496,12 @@
    z-index: 1001;
    cursor: pointer;
  }
+  .address-auto-complete-input {
+    width: 2.4rem;
+  }
+  ::v-deep.el-autocomplete .el-popper{
+    width: auto !important;
+    max-width: 2.4rem;
+}
 }
 </style>
--- a/front/src/views/personalCenter/components/MyApply.vue
+++ b/front/src/views/personalCenter/components/MyApply.vue
@ -45,10 +45,13 @@
          v-for="item in contentList.data"
          :key="item.index"
        >
-          <div class="content-body-title">
-            名称：{{ item.name }}
-            <div></div>
-          </div>
+          <a-tooltip>
+            <template #title>{{ item.name }}</template>
+            <div class="content-body-title">
+              名称：{{ item.name }}
+              <div></div>
+            </div>
+          </a-tooltip>
          <div class="content-body-content">
            <p class="content-body-content-son">
              流程类型：{{ item.processDefinitionName }}
@ -545,10 +548,16 @@
        border-bottom: #cccccc 1px solid;
        position: relative;
        .content-body-title {
+          min-width: 100px;
+          max-width: 900px;
+          width: fit-content;
          font-size: 14px;
          color: #333333;
          font-family: 'Alibaba PuHuiTi';
          font-weight: 500;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
        }
        .content-body-content {
          margin-top: 10px;
--- a/front/src/views/personalCenter/components/PurchaseVehicle.vue
+++ b/front/src/views/personalCenter/components/PurchaseVehicle.vue
@ -1,18 +1,13 @@
 <template>
-  <div class="bottom">
+  <div class="top">
    <div class="left">
      <a-checkbox v-model:checked="checkAll" @change="onCheckAllChange">
        全选
      </a-checkbox>
-      <a-checkbox
-        v-model:checked="reverseSelectionFalg"
-        @change="reverseSelection"
-      >
-        反选
-      </a-checkbox>
+      <div @click="reverseSelection" class="reverseSelection">反选</div>
      <p>
        已选：
-        <span class="num">{{ checkedList.length }}</span>
+        <span class="num">{{ checkedListAbility.length || 0 }}</span>
      </p>
    </div>
    <div class="right">
@ -22,8 +17,7 @@
          placeholder="请输入关键词"
          enter-button="搜索"
          size="large"
-          @change="onSearch"
-          @search="getList"
+          @search="getList('init')"
        />
      </div>
      <a-popconfirm
@ -74,153 +68,170 @@
      </a-button>
    </div>
  </div>
-  <!-- <div class="tab">
-    <span>筛选</span>
-    <div
-      :class="tabIndex == index ? 'tabclass' : ' '"
-      @click="changeTab(index)"
-      v-for="(item, index) in tabList"
-      :key="index"
-    >
-      {{ item }}
+  <div class="items">
+    <div class="item" v-for="val in list" :key="val.id">
+      <div class="item-top" @click="showBottom(val)">
+        <div>
+          <a-checkbox
+            :checked="val.checked"
+            @click.stop="checkedDept(val)"
+          ></a-checkbox>
+          <span style="margin-left: 0.2rem">
+            {{ val.deptName + '(' + val.count + ')' }}
+          </span>
+        </div>
+        <DownOutlined v-show="!val.show" />
+        <UpOutlined v-show="val.show" />
+      </div>
+      <div class="item-bottom" v-show="val.show">
+        <a-list
+          class="demo-loadmore-list"
+          :loading="val.initLoading"
+          item-layout="horizontal"
+          :data-source="val.children"
+          :key="showKey"
+        >
+          <template #renderItem="{ item }">
+            <a-list-item>
+              <a-skeleton avatar :title="false" :loading="item.loading" active>
+                <a-list-item-meta
+                  :description="item.description || '--'"
+                  style="position: relative"
+                >
+                  <template #title>
+                    <span
+                      @click="
+                        showItem(item.resourceId, item.type, item.delFlag)
+                      "
+                      style="cursor: pointer"
+                      class="name"
+                    >
+                      {{ item.resourceName }}
+                    </span>
+                    <span class="type">{{ item.type }}</span>
+                    <svg
+                      t="1652233950228"
+                      class="icon"
+                      viewBox="0 0 1024 1024"
+                      version="1.1"
+                      xmlns="http://www.w3.org/2000/svg"
+                      p-id="5970"
+                      data-spm-anchor-id="a313x.7781069.0.i8"
+                      width="50"
+                      height="50"
+                      v-if="item.delFlag == 4 || item.delFlag == 5"
+                      style="position: absolute; top: 0; left: 1rem"
+                    >
+                      <path
+                        d="M955.22053 256C813.82053 11.2 500.72053-72.6 255.92053 68.8S-72.67947 523.2 68.72053 768 523.22053 1096.6 768.02053 955.2c244.7-141.2 328.6-454.1 187.4-698.8 0-0.1-0.1-0.3-0.2-0.4zM762.02053 944.7c-239 138.1-544.8 56.2-682.9-182.8S22.92053 217.1 261.92053 79.1s544.8-56.2 682.9 182.8c137.9 239 56.1 544.6-182.8 682.8z"
+                        fill="#515151"
+                        opacity=".5"
+                        p-id="5971"
+                      ></path>
+                      <path
+                        d="M898.12053 289.2C775.02053 76 502.42053 2.9 289.22053 126 76.02053 249.1 3.02053 521.6 126.02053 734.8 249.12053 948 521.62053 1021.1 734.82053 898 947.92053 774.9 1021.02053 502.4 898.12053 289.2zM731.62053 892.8C521.32053 1014.3 252.42053 942.2 131.02053 731.9 9.52053 521.6 81.62053 252.7 291.92053 131.3 502.12053 9.9 771.02053 81.8 892.42053 292c121.5 210.3 49.5 479.3-160.8 600.8z"
+                        fill="#515151"
+                        opacity=".5"
+                        p-id="5972"
+                      ></path>
+                      <path
+                        d="M323.62053 176.8c3.6-2 6 0.8 8.8 2.8 6 4.4 12.4 8.8 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.4 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.6 0.6-2zM200.72053 289.2c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 14.8 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.4-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.4-1.2 0-1.6 0.8-2.4l0.2 0.4z m276.6-159.6c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.8-1.2-0.4-1.6 0.4-2.4l0.2 0.4z m141.9 29.6c3.6-2 6 0.8 8.8 2.8l18.8 12.8c7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4-7.7 0.4-15.2 0.8-22.4 0.8-4.4 6.8-8.4 13.2-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.5-1.2 0.2-1.6 0.6-2zM150.02053 430c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-4 14-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.5 0.6-2z m558.9 414.4c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.1 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-1.1 0.8-1.1 1.6-1.1h0.1z m-158.8 50c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.1-3.7-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2-1 4.2-1.7 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.4-0.8 0.8-0.8 1.7-0.7z m276.5-159.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8s-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.2 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0-0.8 0.8-1.2 1.6-1.2l0.1 0.1z m45.6-137.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.2-0.7 0.6-0.7 1.4-0.7h0.3zM402.72053 868c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-0.8 1-1.1 1.7-1.1z"
+                        fill="#515151"
+                        opacity=".5"
+                        p-id="5973"
+                      ></path>
+                      <path
+                        d="M386.42053 590.4l-43.8-75.9L207.02053 592.7l10.2 17.7L334.02053 543l23.4 40.4-90.5 52.2-13.5-23.4-18.7 10.8 53.1 92c9.1 15.8 21.2 19.5 36.4 10.7l98.8-57c6.2-3.6 11-9.3 13.4-16.1-1.4-15.9-6.2-31.2-14.2-45l-21.4 4.8c6.7 10.3 11 21.9 12.8 34-1 3.3-3.2 6-6.1 7.8l-88.3 51c-6.2 3.6-11.1 2.1-14.8-4.3l-27.3-47.4 109.3-63.1z m2.9-103.2l10.4 18.1 65.6-37.9 79.9 138.4 18.6-10.8-55.9-96.9c18.8-0.9 43.2-0.6 73 0.7l1.5-23.1c-29.8-0.3-58.4 0.4-86 2.6l-12.5-21.6 74.9-43.2-10.4-18.1-159.1 91.8zM669.52053 329l38.2 66.2 61.4-35.4-38.1-66.1-61.5 35.3z m72.4 24.2l-26.3 15.2-19-33 26.3-15.2 19 33zM599.02053 356.7l7.9 13.7-23.3 13.5 9.8 17 21.8-12.6c7.5 18.7 6.6 39.6-2.5 57.6l20.7 4.4c10.3-23.1 10.3-49.4 0-72.5l18.8-10.9c6 9.2 10.7 19.2 14.2 29.7 0.3 5-2.6 9.7-7.2 11.7-2.9 1.2-6.4 2.8-10.9 4.9l14.1 14.1c3.7-1.3 7.3-2.9 10.7-4.8 8.6-3.9 14.4-12.2 15.2-21.6-5.4-22.1-14.6-43-27.4-61.8l-36.1 20.8-7.9-13.7-17.9 10.5z m29.9 108.1l10 17.4 53.2-30.7c-7.8 23.7-20.6 45.4-37.5 63.6l20.6 11.1c18.6-24.2 30-53.1 33-83.4l29.8 51.5 18.4-10.7-29.8-51.5c27.4 11.5 57.2 16.3 86.9 14.1l3.5-23.5c-24.7 5.1-50.1 5-74.8-0.1l53.5-30.9-10-17.3-69.3 40-7.3-12.6-18.4 10.7L698.02053 425l-69.1 39.8z"
+                        fill="#515151"
+                        opacity=".5"
+                        p-id="5974"
+                      ></path>
+                    </svg>
+                  </template>
+                  <template #avatar>
+                    <a-checkbox
+                      :checked="item.checked"
+                      @click.stop="checkedItem(val, item)"
+                    ></a-checkbox>
+                  </template>
+                </a-list-item-meta>
+              </a-skeleton>
+            </a-list-item>
+          </template>
+        </a-list>
+        <!-- <a-pagination
+          v-model:current="val.pageNum"
+          v-model:page-size="val.pageSize"
+          :total="val.count"
+          @change="pageChange2(val)"
+          :key="showKey"
+          :hideOnSinglePage="true"
+        ></a-pagination> -->
+      </div>
    </div>
-  </div> -->
-  <a-list
-    class="demo-loadmore-list"
-    :loading="initLoading"
-    item-layout="horizontal"
-    :data-source="list"
-    :key="showKey"
-  >
-    <template #renderItem="{ item }">
-      <a-list-item>
-        <a-skeleton avatar :title="false" :loading="!!item.loading" active>
-          <a-list-item-meta
-            :description="item.description || '--'"
-            style="position: relative"
-          >
-            <template #title>
-              <span
-                @click="showItem(item.resourceId, item.type, item.delFlag)"
-                style="cursor: pointer"
-                class="name"
-              >
-                {{ item.name }}
-              </span>
-              <!-- <span class="time">加购时间：{{ item.updateDate }}</span> -->
-              <span class="type">{{ item.type }}</span>
-              <svg
-                t="1652233950228"
-                class="icon"
-                viewBox="0 0 1024 1024"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                p-id="5970"
-                data-spm-anchor-id="a313x.7781069.0.i8"
-                width="50"
-                height="50"
-                v-if="item.delFlag == 4 || item.delFlag == 5"
-                style="position: absolute; top: 0; left: 1rem"
-              >
-                <path
-                  d="M955.22053 256C813.82053 11.2 500.72053-72.6 255.92053 68.8S-72.67947 523.2 68.72053 768 523.22053 1096.6 768.02053 955.2c244.7-141.2 328.6-454.1 187.4-698.8 0-0.1-0.1-0.3-0.2-0.4zM762.02053 944.7c-239 138.1-544.8 56.2-682.9-182.8S22.92053 217.1 261.92053 79.1s544.8-56.2 682.9 182.8c137.9 239 56.1 544.6-182.8 682.8z"
-                  fill="#515151"
-                  opacity=".5"
-                  p-id="5971"
-                ></path>
-                <path
-                  d="M898.12053 289.2C775.02053 76 502.42053 2.9 289.22053 126 76.02053 249.1 3.02053 521.6 126.02053 734.8 249.12053 948 521.62053 1021.1 734.82053 898 947.92053 774.9 1021.02053 502.4 898.12053 289.2zM731.62053 892.8C521.32053 1014.3 252.42053 942.2 131.02053 731.9 9.52053 521.6 81.62053 252.7 291.92053 131.3 502.12053 9.9 771.02053 81.8 892.42053 292c121.5 210.3 49.5 479.3-160.8 600.8z"
-                  fill="#515151"
-                  opacity=".5"
-                  p-id="5972"
-                ></path>
-                <path
-                  d="M323.62053 176.8c3.6-2 6 0.8 8.8 2.8 6 4.4 12.4 8.8 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.4 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.6 0.6-2zM200.72053 289.2c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 14.8 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.4-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.4-1.2 0-1.6 0.8-2.4l0.2 0.4z m276.6-159.6c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.8-1.2-0.4-1.6 0.4-2.4l0.2 0.4z m141.9 29.6c3.6-2 6 0.8 8.8 2.8l18.8 12.8c7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4-7.7 0.4-15.2 0.8-22.4 0.8-4.4 6.8-8.4 13.2-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.5-1.2 0.2-1.6 0.6-2zM150.02053 430c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-4 14-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.5 0.6-2z m558.9 414.4c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.1 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-1.1 0.8-1.1 1.6-1.1h0.1z m-158.8 50c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.1-3.7-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2-1 4.2-1.7 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.4-0.8 0.8-0.8 1.7-0.7z m276.5-159.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8s-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.2 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0-0.8 0.8-1.2 1.6-1.2l0.1 0.1z m45.6-137.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.2-0.7 0.6-0.7 1.4-0.7h0.3zM402.72053 868c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-0.8 1-1.1 1.7-1.1z"
-                  fill="#515151"
-                  opacity=".5"
-                  p-id="5973"
-                ></path>
-                <path
-                  d="M386.42053 590.4l-43.8-75.9L207.02053 592.7l10.2 17.7L334.02053 543l23.4 40.4-90.5 52.2-13.5-23.4-18.7 10.8 53.1 92c9.1 15.8 21.2 19.5 36.4 10.7l98.8-57c6.2-3.6 11-9.3 13.4-16.1-1.4-15.9-6.2-31.2-14.2-45l-21.4 4.8c6.7 10.3 11 21.9 12.8 34-1 3.3-3.2 6-6.1 7.8l-88.3 51c-6.2 3.6-11.1 2.1-14.8-4.3l-27.3-47.4 109.3-63.1z m2.9-103.2l10.4 18.1 65.6-37.9 79.9 138.4 18.6-10.8-55.9-96.9c18.8-0.9 43.2-0.6 73 0.7l1.5-23.1c-29.8-0.3-58.4 0.4-86 2.6l-12.5-21.6 74.9-43.2-10.4-18.1-159.1 91.8zM669.52053 329l38.2 66.2 61.4-35.4-38.1-66.1-61.5 35.3z m72.4 24.2l-26.3 15.2-19-33 26.3-15.2 19 33zM599.02053 356.7l7.9 13.7-23.3 13.5 9.8 17 21.8-12.6c7.5 18.7 6.6 39.6-2.5 57.6l20.7 4.4c10.3-23.1 10.3-49.4 0-72.5l18.8-10.9c6 9.2 10.7 19.2 14.2 29.7 0.3 5-2.6 9.7-7.2 11.7-2.9 1.2-6.4 2.8-10.9 4.9l14.1 14.1c3.7-1.3 7.3-2.9 10.7-4.8 8.6-3.9 14.4-12.2 15.2-21.6-5.4-22.1-14.6-43-27.4-61.8l-36.1 20.8-7.9-13.7-17.9 10.5z m29.9 108.1l10 17.4 53.2-30.7c-7.8 23.7-20.6 45.4-37.5 63.6l20.6 11.1c18.6-24.2 30-53.1 33-83.4l29.8 51.5 18.4-10.7-29.8-51.5c27.4 11.5 57.2 16.3 86.9 14.1l3.5-23.5c-24.7 5.1-50.1 5-74.8-0.1l53.5-30.9-10-17.3-69.3 40-7.3-12.6-18.4 10.7L698.02053 425l-69.1 39.8z"
-                  fill="#515151"
-                  opacity=".5"
-                  p-id="5974"
-                ></path>
-              </svg>
-            </template>
-            <template #avatar>
-              <a-checkbox
-                :checked="item.checked"
-                @click.stop="checkedItem(item)"
-                @change="checkedItem(item)"
-              ></a-checkbox>
-            </template>
-          </a-list-item-meta>
-        </a-skeleton>
-      </a-list-item>
-    </template>
-  </a-list>
-  <a-pagination
+  </div>
+  <!-- <a-pagination
    v-model:current="pageNum"
    v-model:page-size="pageSize"
    :page-size-options="pageSizeOptions"
    :total="total"
    show-size-changer
-    @showSizeChange="onShowSizeChange"
    @change="pageChange"
    :key="showKey"
  >
    <template #buildOptionText="props">
      <span>{{ props.value }}条/页</span>
    </template>
-  </a-pagination>
+  </a-pagination> -->
 </template>
 <script setup>
  import { onMounted, ref } from 'vue'
+  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
  import { useRouter } from 'vue-router'
  import { message } from 'ant-design-vue'
  import mybus from '@/myplugins/mybus'
  import {
-    getSgcList,
    sgcDel,
-    getTopCategory,
    scInsert,
+    selectResourceCarGroupByDept,
+    selectResourceListByDept,
  } from '@/api/personalCenter'
  const router = useRouter()
  // 分页
  const pageNum = ref('1')
-  const pageSize = ref('5')
-  const pageSizeOptions = ref(['5', '10', '20'])
+  const pageSize = ref('99999')
+  // const pageSizeOptions = ref(['5', '10', '20'])
  const total = ref(0)
+  const load = ref(0)
  // 多选框
  const checkedList = ref([])
+  const checkedListAll = ref([])
+  const checkedListAbility = ref([])
  const checkAll = ref(false)
-  const initLoading = ref(true)
+  const checkNum = ref(0)
  const showKey = ref(0)
  // 筛选条件
  const name = ref('')
  const type = ref('')
  const list = ref([])
-  const tabList = ref([])
  // 初始化
  onMounted(() => {
-    getList()
-    getCategory()
+    getList('init')
  })
  // 收藏
  const collection = () => {
-    console.log(
-      '收藏=================》',
-      checkedList.value,
-      list.value,
-      scInsert
-    )
+    // console.log(
+    //   '收藏=================》',
+    //   checkedList.value,
+    //   list.value,
+    //   scInsert
+    // )
    let scArr = []
    if (checkedList.value.length === 0) {
      message.error('请选择需要收藏的数据')
    } else {
      list.value.forEach((val) => {
-        if (checkedList.value.indexOf(val.id) !== -1) {
+        if (checkedList.value.indexOf(val.deptId) !== -1) {
          if (val.delFlag == 0) {
            scArr.push({ resourceId: val.resourceId })
          }
@ -238,74 +249,110 @@
      }
    }
  }
-  // 获取一级编目
-  const getCategory = () => {
-    getTopCategory().then((res) => {
-      console.log('编目一级=============>', res.data)
-      res.data.data.forEach((val) => {
-        if (val.name == '应用资源' || val.name == '组件服务') {
-          tabList.value.push(val.name)
-        }
-      })
-    })
-  }
  // 全选按钮
  const onCheckAllChange = () => {
-    // console.log(checkedList)
    if (checkAll.value) {
-      // checkedList.value = []
      list.value.forEach((val) => {
-        console.log(val)
-        if (checkedList.value.indexOf(val.id) != -1) {
-          checkedList.value.splice(checkedList.value.indexOf(val.id), 1)
+        if (checkedList.value.indexOf(val.deptId) == -1) {
+          checkedList.value.push(val.deptId)
+          checkedListAll.value.push(val.deptId)
+        }
+        if (val.children.length > 0) {
+          val.children.map((item) => {
+            if (checkedListAbility.value.indexOf(item.resourceId) == -1) {
+              checkedListAbility.value.push(item.resourceId)
+              val.checkedList.push(item.resourceId)
+              checkNum.value++
+            }
+            item.checked = true
+          })
+        } else {
+          getListByDeptId(val)
        }
        val.checked = true
-        checkedList.value.push(val.id)
-        dataResourceId.value.push(val.resourceId)
-        arr.value.push(val.name)
      })
-      // console.log(checkAll.value)
+      console.log(checkAll.value, checkedList.value)
    } else {
      list.value.forEach((val) => {
        val.checked = false
-        if (checkedList.value.indexOf(val.id) != -1) {
-          checkedList.value.splice(checkedList.value.indexOf(val.id), 1)
+        checkNum.value -= Number(val.count)
+        if (checkedList.value.indexOf(val.deptId) != -1) {
+          checkedList.value.splice(checkedList.value.indexOf(val.deptId), 1)
+          checkedListAll.value.splice(
+            checkedListAll.value.indexOf(val.deptId),
+            1
+          )
+          handleChild(val)
+        }
+      })
+      // console.log(checkAll.value, checkedList.value)
+    }
+  }
+  // 处理child
+  const handleChild = (val) => {
+    if (val.children.length > 0) {
+      val.children.map((item) => {
+        // console.log('child=============>', checkedListAbility.value, item)
+        if (checkedListAbility.value.indexOf(item.resourceId) > -1) {
+          item.checked = false
+          checkedListAbility.value.splice(
+            checkedListAbility.value.indexOf(item.resourceId),
+            1
+          )
+          val.checkedList.splice(val.checkedList.indexOf(item.resourceId), 1)
        }
      })
-      // checkedList.value = []
-      dataResourceId.value = []
-      arr.value = []
-      console.log(checkAll.value)
    }
  }
  // 反选
  const reverseSelectionFalg = ref(false)
  const reverseSelection = () => {
-    console.log(
-      '点击反选==============>',
-      checkedList.value,
-      checkAll.value,
-      list.value
-    )
+    // console.log(
+    //   '点击反选==============>',
+    //   checkedList.value,
+    //   checkAll.value,
+    //   list.value
+    // )
    reverseSelectionFalg.value = !reverseSelectionFalg.value
    if (checkAll.value) {
      checkAll.value = false
      list.value.map((val) => {
-        if (checkedList.value.indexOf(val.id) > -1) {
+        checkNum.value -= Number(val.count)
+        if (checkedList.value.indexOf(val.deptId) > -1) {
          val.checked = false
-          checkedList.value.splice(checkedList.value.indexOf(val.id), 1)
+          checkedList.value.splice(checkedList.value.indexOf(val.deptId), 1)
+          checkedListAll.value.splice(
+            checkedListAll.value.indexOf(val.deptId),
+            1
+          )
+          handleChild(val)
        }
      })
    } else {
      const arr = []
      list.value.map((val) => {
-        if (val.checked) {
-          checkedList.value.splice(checkedList.value.indexOf(val.id), 1)
-        } else {
-          checkedList.value.push(val.id)
-          arr.push(val.id)
-        }
        val.checked = !val.checked
+        if (val.checked) {
+          checkNum.value += Number(val.count)
+          checkedList.value.push(val.deptId)
+          checkedListAll.value.push(val.deptId)
+          if (val.children.length > 0) {
+            val.children.map((item) => {
+              item.checked = true
+              checkedListAbility.value.push(item.resourceId)
+              val.checkedList.push(item.resourceId)
+            })
+          }
+          arr.push(val.deptId)
+        } else {
+          checkNum.value -= Number(val.count)
+          checkedList.value.splice(checkedList.value.indexOf(val.deptId), 1)
+          checkedListAll.value.splice(
+            checkedListAll.value.indexOf(val.deptId),
+            1
+          )
+          handleChild(val)
+        }
        if (arr.length == list.value.length) {
          checkAll.value = true
        }
@ -318,109 +365,262 @@
    name.value = ''
    type.value = ''
    pageNum.value = '1'
-    pageSize.value = '5'
+    pageSize.value = '99999'
    checkedList.value = []
+    checkedListAll.value = []
    checkAll.value = false
    showKey.value++
    getList()
  }
  // 获取信息
-  const getList = () => {
-    getSgcList({
+  const getList = (type) => {
+    if (type == 'init') {
+      pageNum.value = 1
+      pageSize.value = 99999
+    }
+    selectResourceCarGroupByDept({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      name: name.value,
-      type: type.value,
    }).then((res) => {
-      console.log('申购车列表================>', res.data.data.records)
-      checkAll.value = true
-      initLoading.value = false
-      list.value = []
-      total.value = res.data.data.total
-      res.data.data.records.forEach((val) => {
-        const obj = {
-          loading: false,
-          name: val.resourceDTO.name,
-          id: val.id,
-          checked: false,
-          type: val.resourceDTO.type,
-          resourceId: val.resourceId,
-          updateDate: val.updateDate,
-          description: val.resourceDTO.description,
-          delFlag: val.resourceDTO.delFlag,
-        }
-        if (checkedList.value.indexOf(val.id) == -1) {
-          checkAll.value = false
+      let statistics = 0
+      res.data.data.list.map((val) => {
+        val.initLoading = true
+        val.show = false
+        if (checkedList.value.indexOf(val.deptId) > -1) {
+          val.checked = true
+          statistics++
        } else {
-          obj.checked = true
+          val.checked = false
        }
-        list.value.push(obj)
+        val.checkedList = []
+        val.children = []
+        val.pageNum = '1'
+        val.pageSize = '99999'
      })
+      if (statistics == res.data.data.list.length) {
+        checkAll.value = true
+      }
+      if (list.value.length == 0) {
+        load.value = 1
+      }
+      if (load.value < Number(pageNum.value)) {
+        load.value = Number(pageNum.value)
+      }
+      // console.log('整体页面加载次数===============>', load.value)
+      list.value = res.data.data.list
+      total.value = res.data.data.deptCount
+      showKey.value++
+      if (type == 'init' || type == 'changePage') {
+        getListByDeptId(list.value[0])
+      }
    })
  }
-  const onShowSizeChange = (current, pageSize) => {
-    console.log(current, pageSize)
-    // pageNum.value = current
-    // pageSize.value = pageSize
-    // getList()
+  // 通过deptid查询列表
+  const getListByDeptId = (item) => {
+    if (item.children.length == 0) {
+      selectResourceListByDept({
+        pageNum: item.pageNum,
+        pageSize: item.pageSize,
+        deptId: item.deptId,
+      }).then((res) => {
+        // console.log(
+        //   '根据部门查询=============>',
+        //   item,
+        //   checkedListAbility.value
+        // )
+        res.data.data.map((val) => {
+          if (
+            (!item.load || item.load < Number(item.pageNum)) &&
+            load.value <= Number(pageNum.value)
+          ) {
+            if (
+              item.checkAll == true ||
+              checkedList.value.indexOf(item.deptId) > -1
+            ) {
+              if (checkedListAbility.value.indexOf(val.resourceId) == -1) {
+                checkedListAbility.value.push(val.resourceId)
+                item.checkedList.push(val.resourceId)
+              }
+              val.checked = true
+              checkNum.value++
+            } else if (checkedListAbility.value.indexOf(val.resourceId) == -1) {
+              val.checked = false
+            }
+          } else {
+            // console.log(
+            //   '第二次加载++++++++++++++',
+            //   checkedListAbility.value,
+            //   val.resourceId
+            // )
+            if (
+              checkedListAbility.value.indexOf(val.resourceId) > -1 ||
+              (item.load < Number(item.pageNum) &&
+                checkedListAll.value.indexOf(item.deptId) > -1)
+            ) {
+              val.checked = true
+            } else {
+              val.checked = false
+            }
+          }
+          val.loading = false
+        })
+        if (item.children.length == 0) {
+          item.load = 1
+        }
+        if (item.load < Number(item.pageNum)) {
+          item.load = Number(item.pageNum)
+        }
+        // console.log('加载次数==============>>', item.load)
+        item.children = res.data.data
+        item.show = true
+        item.initLoading = false
+      })
+    }
+  }
+  // 显示资源信息
+  const showBottom = (item) => {
+    item.show = !item.show
+    if (item.show) {
+      getListByDeptId(item)
+    }
  }
  // 切换页数
  const pageChange = (val) => {
+    checkAll.value = false
    pageNum.value = val
-    pageNum.value = val
-    // checkedList.value = []
-    getList()
+    getList('changePage')
  }
-  // 搜索框
-  // const onSearch = (name) => {
-  //   name.value = name
-  //   console.log(name.value)
-  // }
-
-  //申请id
-  const dataResourceId = ref([])
-
-  const arr = ref([])
-  // 点击多选框
-  const checkedItem = (item) => {
-    checkAll.value = true
-    list.value.forEach((val) => {
-      if (val.id === item.id) {
-        console.log(val)
-        val.checked = !val.checked
-        if (val.checked) {
-          checkedList.value.push(val.id)
-          dataResourceId.value.push(val.resourceId)
-          arr.value.push(val.name)
-        } else {
-          checkedList.value.splice(checkedList.value.indexOf(val.id), 1)
-          dataResourceId.value.splice(
-            checkedList.value.indexOf(val.resourceId),
-            1
-          )
-          arr.value.splice(arr.value.indexOf(val.name), 1)
-        }
+  // 能力内分页
+  const pageChange2 = (item) => {
+    getListByDeptId(item)
+  }
+  // 点击部门多选框
+  const checkedDept = (item) => {
+    // console.log(
+    //   '点击部门多选框==================>',
+    //   item,
+    //   checkedList.value,
+    //   checkAll.value
+    // )
+    item.checked = !item.checked
+    if (item.checked) {
+      if (item.children.length > 0) {
+        item.children.map((val) => {
+          if (checkedListAbility.value.indexOf(val.resourceId) == -1) {
+            checkedListAbility.value.push(val.resourceId)
+            item.checkedList.push(val.resourceId)
+          }
+          val.checked = true
+        })
      }
-      if (checkedList.value.indexOf(val.id) == -1) {
+      item.checkAll = true
+      checkedList.value.push(item.deptId)
+      checkedListAll.value.push(item.deptId)
+      judgeAll(item)
+      checkNum.value += Number(item.count)
+      if (checkedList.value.length == list.value.length) {
+        checkAll.value = true
+      }
+    } else {
+      if (item.children.length > 0) {
+        item.children.map((val) => {
+          if (checkedListAbility.value.indexOf(val.resourceId) > -1) {
+            checkedListAbility.value.splice(
+              checkedListAbility.value.indexOf(val.resourceId),
+              1
+            )
+            item.checkedList.splice(item.checkedList.indexOf(val.resourceId), 1)
+            val.checked = false
+          }
+        })
+      }
+      item.checkAll = false
+      checkedList.value.splice(checkedList.value.indexOf(item.deptId), 1)
+      checkedListAll.value.splice(checkedListAll.value.indexOf(item.deptId), 1)
+      judgeAll(item)
+      if (checkedList.value.length !== list.value.length) {
        checkAll.value = false
      }
-    })
-    console.log(checkedList.value)
-    showKey.value++
+      checkNum.value -= Number(item.count)
+    }
+  }
+  // 判断是否全选
+  const judgeAll = (item, val) => {
+    // console.log(
+    //   '判断是否全选============>',
+    //   item,
+    //   val,
+    //   list.value,
+    //   checkedList.value
+    // )
+    if (!val) {
+      let all = true
+      list.value.map((val) => {
+        if (val.checkedList.length !== val.children.length) {
+          all = false
+        }
+      })
+      if (all) {
+        checkAll.value = true
+      } else {
+        checkAll.value = false
+      }
+    } else {
+      let all = true
+      item.children.map((child) => {
+        if (checkedListAbility.value.indexOf(child.resourceId) == -1) {
+          all = false
+        }
+      })
+      if (all) {
+        item.checked = true
+      } else {
+        item.checked = false
+      }
+    }
+  }
+  // 点击能力
+  const checkedItem = (val, item) => {
+    // console.log('点击能力===========>', val, item, checkedListAbility.value)
+    item.checked = !item.checked
+    if (item.checked) {
+      checkNum.value++
+      if (checkedListAbility.value.indexOf(item.resourceId) == -1) {
+        checkedListAbility.value.push(item.resourceId)
+        val.checkedList.push(item.resourceId)
+      }
+    } else {
+      checkNum.value--
+      checkedListAbility.value.splice(
+        checkedListAbility.value.indexOf(item.resourceId),
+        1
+      )
+      val.checkedList.splice(val.checkedList.indexOf(item.resourceId), 1)
+    }
+    // console.log('判断是否全选===============>', val, checkedListAll.value)
+    if (val.checkedList.length == val.count) {
+      val.checked = true
+      checkedList.value.push(val.deptId)
+      checkedListAll.value.push(val.deptId)
+      // console.log(
+      //   '全选===========================>',
+      //   checkedList.value,
+      //   list.value
+      // )
+      if (checkedList.value.length == list.value.length) {
+        checkAll.value = true
+      }
+    } else {
+      val.checked = false
+      if (checkedList.value.indexOf(val.deptId) > -1) {
+        checkedList.value.splice(checkedList.value.indexOf(val.deptId), 1)
+      }
+      if (checkedList.value.length !== list.value.length) {
+        checkAll.value = false
+      }
+    }
  }
-  // 切换筛选条件
-  // const tabIndex = ref(-1)
-  // const changeTab = (index) => {
-  //   console.log('tabIndex', tabIndex.value, index, tabList)
-  //   if (tabIndex.value == index) {
-  //     tabIndex.value = -1
-  //     type.value = ''
-  //   } else {
-  //     tabIndex.value = index
-  //     type.value = tabList.value[index]
-  //   }
-  //   getList()
-  // }
  // 删除按钮
  const delList = () => {
    if (checkedList.value.length == 0) {
@ -431,7 +631,7 @@
      }).then((res) => {
        if (res.data.msg === 'success') {
          message.success('删除成功')
-          console.log('删除申购车列表================>', res)
+          // console.log('删除申购车列表================>', res)
          mybus.emit('getSgcNum')
          clean()
        }
@ -439,7 +639,7 @@
    }
  }
  const cancel = (e) => {
-    console.log(e)
+    // console.log(e)
  }
  // 详情
  const showItem = (id, type, delFlag) => {
@ -456,39 +656,32 @@
  }
  // 一键申请
  const apply = () => {
-    list.value.forEach((val) => {
-      if (checkedList.value.indexOf(val.id) !== -1) {
-        if (val.delFlag != 0) {
-          checkedList.value.splice(checkedList.value.indexOf(val.id), 1)
-          console.log('已下架======================>', arr)
-          arr.value.splice(arr.value.indexOf(val.name), 1)
-          val.checked = false
-          message.error('已下架的能力无法申请！')
-        }
-      }
-    })
+    // list.value.forEach((val) => {
+    //   if (checkedList.value.indexOf(val.deptId) !== -1) {
+    //     if (val.delFlag != 0) {
+    //       checkedList.value.splice(checkedList.value.indexOf(val.deptId), 1)
+    //       val.checked = false
+    //       message.error('已下架的能力无法申请！')
+    //     }
+    //   }
+    // })
    if (checkedList.value.length == 0) {
      message.error('请先选择需要申请的数据！')
    } else {
-      console.log('一键申请===================>', arr)
+      // console.log('一键申请===================>', list.value)
+      localStorage.setItem('applyList', JSON.stringify(list.value))
      router.push({
        path: '/apply',
-        query: {
-          name: arr.value,
-          ids: checkedList.value,
-          resourceId: dataResourceId.value,
-        },
      })
    }
  }
 </script>
 <style lang="less" scoped>
  .ant-list {
-    height: 7.23rem;
-    overflow-y: scroll;
+    // max-height: 5.3rem;
    .ant-list-item {
-      width: 10.5rem;
-      padding: 0.24rem 0;
+      width: 100%;
+      padding: 0.24rem 0.2rem;
      .ant-list-item-meta {
        align-items: center;
        :deep(.ant-list-item-meta-avatar) {
@ -508,7 +701,7 @@
        }
        :deep(.ant-list-item-meta-description) {
          margin-top: 0.1rem;
-          max-height: 0.44rem;
+          max-height: 0.22rem;
          margin-right: 0.1rem;
          overflow: hidden;
          text-overflow: ellipsis;
@ -522,7 +715,7 @@
  .ant-list::-webkit-scrollbar {
    width: 0 !important;
  }
-  .bottom {
+  .top {
    margin: 0.1rem;
    display: flex;
    justify-content: space-between;
@ -538,6 +731,13 @@
        margin-bottom: 0;
        border-left: 1px solid #212121;
      }
+      .reverseSelection {
+        margin-right: 0.1rem;
+        cursor: pointer;
+      }
+      .reverseSelection:hover {
+        color: #0058e1;
+      }
      span {
        margin-left: 0.1rem;
      }
@ -555,7 +755,7 @@
        margin-bottom: 0.1rem;
      }
      .sousuokuang {
-        width: 3.2rem;
+        width: 3.25rem;
        margin: 0.1rem 0rem 0.21rem 0.2rem;
        .ant-input-search {
          max-width: 3rem;
@ -571,7 +771,7 @@
          display: inline-block;
          margin-left: 0.1rem;
          .ant-input-search-button {
-            width: 0.6rem;
+            width: 0.65rem;
            height: 0.36rem;
            border-radius: 2px;
            font-size: 0.14rem;
@ -613,4 +813,39 @@
  .name:hover {
    color: #0087ff;
  }
+  .items {
+    height: 7.25rem;
+    padding: 0 0.3rem;
+    overflow-y: scroll;
+    .item {
+      .item-top {
+        width: 100%;
+        height: 0.6rem;
+        font-size: 20px;
+        font-weight: 600;
+        background: rgba(0, 135, 225, 0.1);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 0.1rem;
+        margin-top: 0.08rem;
+      }
+      .item-top:hover {
+        cursor: pointer;
+        // 0058e1 透明度 0.5
+        background: rgba(0, 88, 225, 0.8);
+        color: white;
+        :deep(.anticon) {
+          color: white;
+        }
+      }
+      .item-bottom {
+        padding: 0 0.2rem;
+        border: 1px solid rgba(0, 135, 225, 0.1);
+      }
+    }
+  }
+  .ant-pagination {
+    margin-bottom: 0.2rem;
+  }
 </style>