二级路由登录

展厅问题修改
新增说明文档和下载图标
2022-11-22 10:45:32 +08:00 · 2022-11-21 20:38:14 +08:00 · 2022-09-27 09:20:48 +08:00 · 2022-09-27 09:20:09 +08:00 · 2022-09-26 09:26:47 +08:00 · 2022-09-24 13:20:18 +08:00
708 changed files with 94241 additions and 10403 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,12 @@
-back/dist-西海岸-后台管理.zip
+back/*.zip
-back/dist-市局-后台管理-带配置文件.zip
+back/public/index.html
 back/dist-西海岸-后台管理-带配置文件.zip
-back/dist.zip
+back/dist-市局-后台管理-带配置文件.zip
 back/dist-包头-后台管理.zip
 back/dist-市局-后台管理.zip
 back/dist-市局-后台管理-v0.8.2.1.zip
 front/public/index.html
 back/dist-西海岸-后台管理-v0.8.2.1.zip
 back/dist-市局-后台管理-v0.8.2.3.zip
 back/dist-西海岸-后台管理-v0.8.2.4.d.zip
 *.zip
--- a/back/package-lock.json
+++ b/back/package-lock.json
--- 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",
@ -33,6 +34,7 @@
    "lodash": "^4.17.19",
    "monaco-editor": "^0.20.0",
    "monaco-editor-webpack-plugin": "^1.9.0",
    "pinyin-pro": "^3.11.0",
    "qs": "^6.9.4",
    "quill": "^1.3.7",
    "sass": "^1.51.0",
@ -56,6 +58,7 @@
    "@vue/cli-service": "^4.4.6",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "crypto-js": "^4.1.1",
    "element-theme-chalk": "^2.13.2",
    "eslint": "^7.5.0",
    "eslint-plugin-import": "^2.22.0",
--- a/back/public/config/basicConfig.js
+++ b/back/public/config/basicConfig.js
@ -0,0 +1,48 @@
 /*
 * @Author: hisense.wuhongjian
 * @Date: 2022-08-25 14:37:49
 * @LastEditors: hisense.wuhongjian
 * @LastEditTime: 2022-08-29 09:57:52
 * @Description: 告诉大家这是什么
 */
 var _global = {}
 var CONFIGITEM = {
  // version: 'qingdao', // 青岛
  // version: 'xihaian', // 西海岸
  version: 'test', // 测试
  // version: 'frp', // 内网穿透
  // version: 'dev', // 开发
  vNum: 'v0.8.7.2',
  configData: {
    // 青岛市大数据局
    qingdao: {
      previewUrl: 'http://15.72.183.90:7008/',
      apiURL: 'http://15.72.183.90:8000/renren-admin',
      websocketURL: 'ws://15.72.183.90:8000/renren-admin/websocket'
    },
    // 西海岸大数据局
    xihaian: {
      previewUrl: 'http://10.134.135.9:9796/',
      apiURL: 'http://10.134.135.9:8888/renren-admin',
      websocketURL: 'ws://10.134.135.9:8888/renren-admin/websocket'
    },
    // 测试
    test: {
      previewUrl: 'http://192.168.124.243:9796/',
      apiURL: 'http://192.168.124.243:8888/renren-admin',
      websocketURL: 'ws://192.168.124.243:8888/renren-admin/websocket'
    },
    // 内网穿透
    frp: {
      previewUrl: 'http://124.222.94.39:9796/',
      apiURL: 'http://124.222.94.39:8888/renren-admin',
      websocketURL: 'ws://124.222.94.39:8888/renren-admin/websocket'
    },
    dev: {
      previewUrl: 'http://localhost:8080/',
      apiURL: 'http://192.168.124.236:8888/renren-admin',
      websocketURL: 'ws://192.168.124.236:8888/renren-admin/websocket'
    }
  }
 }
 _global.config = CONFIGITEM.configData[CONFIGITEM.version]
--- a/back/public/element-theme/blue/index.css
+++ b/back/public/element-theme/blue/index.css
--- a/back/public/element-theme/turquoise/aui.css
+++ b/back/public/element-theme/turquoise/aui.css
--- a/back/public/index.html
+++ b/back/public/index.html
@ -2,7 +2,7 @@
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-11 10:11:40
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-16 15:52:33
+ * @LastEditTime: 2022-08-29 09:54:59
 * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@ -11,10 +11,11 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
  <script type="text/javascript" src="./config/basicConfig.js"></script>
  <!-- 站点配置 -->
  <script>
    window.SITE_CONFIG = {};
-    window.SITE_CONFIG['version'] = 'v2.9.0';
+    window.SITE_CONFIG['version'] = CONFIGITEM.vNum;
    window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>';
    window.SITE_CONFIG['apiURL'] = '';                      // api请求地址
    window.SITE_CONFIG['storeState'] = {};                  // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态）
@ -27,54 +28,19 @@
      'isTab': true,     // 是否通过tab展示内容?
      'iframeURL': ''    // 是否通过iframe嵌套展示内容? (以http[s]://开头, 自动匹配)
    };
    // window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/#/vueTemplateDemo';  
    window.SITE_CONFIG['frontUrl'] = 'http://124.222.94.39:9796/#/vueTemplateDemo';
    // window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/#/vueTemplateDemo';  
    window.SITE_CONFIG['menuList'] = [];                     // 左侧菜单列表（后台返回，未做处理）
    window.SITE_CONFIG['permissions'] = [];                  // 页面按钮操作权限（后台返回，未做处理）
    window.SITE_CONFIG['dynamicRoutes'] = [];                // 动态路由列表
    window.SITE_CONFIG['dynamicMenuRoutes'] = [];            // 动态(菜单)路由列表
    window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = false; // 动态(菜单)路由是否已经添加的状态标示（用于判断是否需要重新拉取数据并进行动态添加操作）
  </script>
  <!-- 开发环境 -->
  <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
    <script>
-      // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.166:8888/renren-admin';
+      window.SITE_CONFIG['frontUrl'] = _global.config.previewUrl + '#/vueTemplateDemo';
-    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
+      window.SITE_CONFIG['previewUrl'] = _global.config.previewUrl;
-    // window.SITE_CONFIG['apiURL'] = 'http://15.2.23.141:8000/renren-admin';
+      window.SITE_CONFIG['apiURL'] = _global.config.apiURL;
    // WebSocket地址
    window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
    </script>
  <% } %>
  <!-- 集成测试环境 -->
  <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
    <script>
      window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/renren-admin';
      // WebSocket地址
-      window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
+      window.SITE_CONFIG['socketURL'] =_global.config.socketURL;
    </script>
  <% } %>
  <!-- 验收测试环境 -->
  <% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %>
    <script>
      window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/renren-admin';
      // WebSocket地址
      window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
    </script>
  <% } %>
  <!-- 生产环境 -->
  <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
    <script>
      window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
            // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
      // window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
      // WebSocket地址
      window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
    </script>
  <% } %>
 </head>
 <body>
  <div id="app"></div>
--- a/back/src/assets/font/convergence-typeface.ttf
+++ b/back/src/assets/font/convergence-typeface.ttf
--- a/back/src/assets/font/header-typeface.ttf
+++ b/back/src/assets/font/header-typeface.ttf
--- a/back/src/assets/font/num-typeface.otf
+++ b/back/src/assets/font/num-typeface.otf
--- a/back/src/assets/font/text-typeface.otf
+++ b/back/src/assets/font/text-typeface.otf
--- 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/Capabilitydiagram.png
+++ b/back/src/assets/img/Capabilitydiagram.png
--- a/back/src/assets/img/TOP5.png
+++ b/back/src/assets/img/TOP5.png
--- a/back/src/assets/img/activitiMyWorkDynamics/header-bak.png
+++ b/back/src/assets/img/activitiMyWorkDynamics/header-bak.png
--- a/back/src/assets/img/activitiMyWorkDynamics/no-img.png
+++ b/back/src/assets/img/activitiMyWorkDynamics/no-img.png
--- a/back/src/assets/img/imgLeft.png
+++ b/back/src/assets/img/imgLeft.png
--- a/back/src/assets/img/putOnTheShelf/del.png
+++ b/back/src/assets/img/putOnTheShelf/del.png
--- a/back/src/assets/img/sj-jx.png
+++ b/back/src/assets/img/sj-jx.png
--- a/back/src/assets/img/workBench/NO1.png
+++ b/back/src/assets/img/workBench/NO1.png
--- a/back/src/assets/img/workBench/NO2.png
+++ b/back/src/assets/img/workBench/NO2.png
--- a/back/src/assets/img/workBench/NO3.png
+++ b/back/src/assets/img/workBench/NO3.png
--- a/back/src/assets/img/workBench/hasToDo.png
+++ b/back/src/assets/img/workBench/hasToDo.png
--- a/back/src/assets/img/workBench/one.png
+++ b/back/src/assets/img/workBench/one.png
--- a/back/src/assets/img/workBench/publish.png
+++ b/back/src/assets/img/workBench/publish.png
--- a/back/src/assets/img/workBench/todo.png
+++ b/back/src/assets/img/workBench/todo.png
--- a/back/src/assets/img/workBench/two.png
+++ b/back/src/assets/img/workBench/two.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/assets/img/搜索.png
+++ b/back/src/assets/img/搜索.png
--- a/back/src/components/ren-process-detail/src/ren-process-detail-import.vue
+++ b/back/src/components/ren-process-detail/src/ren-process-detail-import.vue
@ -0,0 +1,97 @@
 <!--
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-11 16:30:04
 * @LastEditors: hisense.wuhongjian
 * @LastEditTime: 2022-06-06 13:14:02
 * @Description: 告诉大家这是什么
 -->
 <template>
  <div shadow="never" class="aui-card--fill">
    <!-- 流转详情 -->
    <h3 class="titleH3">{{ $t('process.circulation') }}</h3>
    <div class="mod-sys__dict">
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%;">
        <!-- 任务名称 -->
        <el-table-column prop="activityName"  :label="$t('process.taskName')" header-align="center" align="center"></el-table-column>
        <!-- 处理人 -->
        <el-table-column prop="assigneeName" :label="$t('process.assignee')" header-align="center" align="center"></el-table-column>
        <!-- 流程开始时间 -->
        <el-table-column prop="startTime" :label="$t('task.startTime')" header-align="center" align="center"></el-table-column>
        <!-- 流程结束时间 -->
        <el-table-column prop="endTime" :label="$t('task.endTime')"  header-align="center" align="center"></el-table-column>
        <!-- 审核意见 -->
        <el-table-column prop="comment" :label="$t('process.comment')" header-align="center" align="center"></el-table-column>
        <!-- 任务时长（秒） -->
        <el-table-column prop="durationInSeconds" :label="$t('task.durationInSeconds')" header-align="center" align="center" width="180"></el-table-column>
      </el-table>
      <el-pagination
        v-if="dataForm.pid === '0'"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
  </div>
 </template>
 <style scoped>
  .image {
    width: 60%;
    display: block;
    margin: 0 auto 30px auto;
  }
  .titleH3{
    font-size: 16px;
    color: #212121;
    padding:20px 0;
    margin-bottom:0;
  }
 </style>
 <script>
 import Cookies from 'js-cookie'
 import qs from 'qs'
 import mixinViewModule from '@/mixins/view-module'
 export default {
  mixins: [mixinViewModule],
  name: 'RenProcessDetail',
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/act/his/getTaskHandleDetailInfo',
        getDataListIsPage: false,
        createdIsNeed: false,
        deleteIsBatch: true,
        deleteIsBatchKey: 'deploymentId'
      },
      dataForm: {
        processInstanceId: ''
      }
    }
  },
  created () {
    this.dataForm.processInstanceId = this.$route.params.processInstanceId
    this.getResourceURL()
    this.getDataList()
  },
  methods: {
    // 获取流程(xml/image)url地址
    getResourceURL () {
      const params = qs.stringify({
        token: Cookies.get('ucsToken'),
        processInstanceId: this.dataForm.processInstanceId
      })
      return `${window.SITE_CONFIG.apiURL}/act/his/getInstImage?${params}`
    }
  }
 }
 </script>
--- a/back/src/components/ren-process-detail/src/ren-process-detail.vue
+++ b/back/src/components/ren-process-detail/src/ren-process-detail.vue
@ -1,15 +1,15 @@
 <!--
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-11 16:30:04
- * @LastEditors: hisense.wuhongjian
+ * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-06 13:14:02
+ * @LastEditTime: 2022-07-16 15:07:44
 * @Description: 告诉大家这是什么
 -->
 <template>
  <el-card shadow="never" class="aui-card--fill">
    <!-- 流程图 -->
-    <h4>{{ $t('process.flowImage') }}</h4>
+    <!-- <h4>{{ $t('process.flowImage') }}</h4>
-    <img :src="getResourceURL()" class="image">
+    <img :src="getResourceURL()" class="image"> -->
    <!-- 流转详情 -->
    <h4>{{ $t('process.circulation') }}</h4>
    <div class="mod-sys__dict">
--- a/back/src/element-ui/theme-variables.scss
+++ b/back/src/element-ui/theme-variables.scss
@ -486,7 +486,7 @@ $--cascader-tag-background: #f0f2f5;
 /* Group
 -------------------------- */
-$--group-option-flex: 0 0 (1/5) * 100% !default;
+$--group-option-flex: 0 0 20% !default;
 $--group-option-offset-bottom: 12px !default;
 $--group-option-fill-hover: rgba($--color-black, 0.06) !default;
 $--group-title-color: $--color-black !default;
--- a/back/src/element-ui/theme/cascader.css
+++ b/back/src/element-ui/theme/cascader.css
--- a/back/src/element-ui/theme/checkbox.css
+++ b/back/src/element-ui/theme/checkbox.css
--- a/back/src/i18n/en-US.js
+++ b/back/src/i18n/en-US.js
@ -25,6 +25,7 @@ t.choose = 'Please Choose'
 t.fileName = 'File Name'
 t.design = 'Online Design'
 t.preview = 'Preview'
 t.reset='Reset'
 t.prompt = {}
 t.prompt.title = 'Prompt'
--- a/back/src/i18n/zh-CN.js
+++ b/back/src/i18n/zh-CN.js
@ -25,6 +25,7 @@ t.choose = '请选择'
 t.fileName = '文件名'
 t.design = '在线设计'
 t.preview = '预览'
 t.reset = '重置'
 t.prompt = {}
 t.prompt.title = '提示'
@ -35,6 +36,7 @@ t.prompt.deleteBatch = '请选择删除项'
 t.validate = {}
 t.validate.required = '必填项不能为空'
 t.validate.pwdStrength = '密码需包含字母、数字、标点符号,并超过8位'
 t.validate.format = '{attr}格式错误'
 t.upload = {}
@ -545,4 +547,33 @@ t.notice.new = '有新通知'
 t.notice.disconnect = '连接断开'
 t.notice.disconnectMessage = 'WebSocket连接已断开，请检查网络'
 t.projectList = {}
 t.projectList.projectName = '项目名称'
 t.projectList.projectUnit = '申请单位'
 t.projectList.department = '责任处室'
 t.projectList.applydate = '申请日期'
 t.projectList.district = '所属区市'
 t.projectList.contacts = '业务联系人'
 t.projectList.contactstel = '业务联系人电话'
 t.projectList.technology = '技术联系人电话'
 t.projectList.technologytel = '技术联系人电话'
 t.dataresources = {}
 t.dataresources.componentType = '组件类型'
 t.dataresources.componentName = '组件名称'
 t.dataresources.putOnDate = '上架时间'
 t.dataresources.resourcesName = '数据资源名称'
 t.dataresources.resourcesCode = '数据资源代码'
 t.dataresources.resourcesProvide = '数据资源提供方'
 t.dataresources.resourcesAbstract = '数据资源摘要'
 t.dataresources.associatedApplication = '关联应用'
 t.infrastructure = {}
 t.infrastructure.resourceCategory = '资源类别'
 t.infrastructure.resourceName = '摄像头名称'
 t.infrastructure.district = '所在区市'
 t.infrastructure.street = '所在街道'
 t.infrastructure.department = '所属部门'
 t.infrastructure.associatedApplication = '关联应用'
 export default t
--- a/back/src/i18n/zh-TW.js
+++ b/back/src/i18n/zh-TW.js
@ -25,6 +25,7 @@ t.choose = '請選擇'
 t.fileName = '文件名'
 t.design = '在線設計'
 t.preview = '預覽'
 t.reset='重置'
 t.prompt = {}
 t.prompt.title = '提示'
--- a/back/src/mixins/view-module.js
+++ b/back/src/mixins/view-module.js
@ -17,8 +17,8 @@ export default {
        exportURL: '',            // 导出接口，API地址
        requestCallback: null      // 获取列表以后执行的回调
      },
-      flag:false,
+      flag: false,
-      time:null,
+      time: null,
      // 默认属性
      dataForm: {
      },               // 查询条件
@ -102,13 +102,22 @@ export default {
                return item
              }
            })
-            this.total = this.mixinViewModuleOptions.getDataListIsPage ? this.dataList.length : 0
+            this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
          })
        } else {
          this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
        }
        console.log('数据列表', this.dataList, this.mixinViewModuleOptions.getDataListURL)
        if (this.dataList[0].type === '组件服务') {
          this.dataList.map(val => {
            val.infoList2 = val.infoList.filter(item => item.attrType === '应用领域' || item.attrType === '组件类型')
          })
        } else if (this.dataList[0].type === '应用资源') {
          this.dataList.map(val => {
            val.infoList2 = val.infoList.filter(item => item.attrType === '应用领域')
          })
        }
        if (this.mixinViewModuleOptions.requestCallback) {
          this.mixinViewModuleOptions.requestCallback(res.data)
        }
--- a/back/src/router/index.js
+++ b/back/src/router/index.js
@ -5,6 +5,12 @@ import { isURL } from '@/utils/validate'
 import store from '@/store'
 import Cookies from 'js-cookie'
 // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
 const originalPush = Router.prototype.push
 Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
 }
 Vue.use(Router)
 // 页面路由(独立页面)
@ -35,7 +41,8 @@ export const moduleRoutes = {
  meta: { title: '主入口布局' },
  children: [
    // todos 临时调整，后期去掉
-    { path: '/home', redirect: '/bscatalogue-bscatalogue', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } },
+    // { path: '/home', redirect: '/bscatalogue-bscatalogue', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } },
    { path: '/home', redirect: '/workBench-workBench', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } },
    { path: '/iframe', component: null, name: 'iframe', meta: { title: 'iframe', isTab: true } }
  ]
 }
@ -155,7 +162,7 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
      route.meta.iframeURL = URL
    } else {
      const urlArr = URL.split('?')
-      debugger
+      // debugger
      URL = urlArr[0].replace(/^\//, '').replace(/_/g, '-')
      route.path = route.name = URL.replace(/\//g, '-')
      route.component = () => import(`@/views/modules/${URL}`)
--- a/back/src/store/index.js
+++ b/back/src/store/index.js
@ -1,3 +1,10 @@
 /*
 * @Author: hisense.wuhongjian
 * @Date: 2022-07-05 12:53:03
 * @LastEditors: hisense.wuhongjian
 * @LastEditTime: 2022-08-23 16:37:05
 * @Description: 告诉大家这是什么
 */
 import Vue from 'vue'
 import Vuex from 'vuex'
 import cloneDeep from 'lodash/cloneDeep'
@ -12,7 +19,7 @@ export default new Vuex.Store({
    // 导航条, 布局风格, default(白色) / colorful(鲜艳)
    navbarLayoutType: 'colorful',
    // 侧边栏, 布局皮肤, default(白色) / dark(黑色)
-    sidebarLayoutSkin: 'dark',
+    sidebarLayoutSkin: 'default',
    // 侧边栏, 折叠状态
    sidebarFold: false,
    // 侧边栏, 菜单
@ -62,12 +69,12 @@ export default new Vuex.Store({
      // dispatch('getDepartmentSelects')
    },
    getCatalogueTree ({ commit }) {
-      http.get('bscatalogue/bscatalogue/page').then(res => {
+      // http.get('bscatalogue/bscatalogue/page').then(res => {
-        if (res.data.code === 0) {
+      //   if (res.data.code === 0) {
-          console.log(22222, res.data)
+      //     console.log(22222, res.data)
-          commit('setCatalogueTree', res.data.data)
+      //     commit('setCatalogueTree', res.data.data)
-        }
+      //   }
-      })
+      // })
    },
    getDepartmentSelects ({ commit }) {
      http.get('applyRecord/bsAbilityApplyRecord/page').then(({ data: res }) => {
--- a/back/src/utils/crypto.js
+++ b/back/src/utils/crypto.js
@ -0,0 +1,58 @@
 /*
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-24 16:00:58
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-24 16:44:28
 * @Description: 告诉大家这是什么
 */
 import CryptoJS from 'crypto-js/crypto-js'
 // 默认的 KEY 与 iv 与后端保持一致 ，不采用后端传值密钥 上上下下左右左右BABA 一往无前虎山行拨开云雾见光明梦里花开牡丹亭幻想成真歌舞升平
 const KEY = CryptoJS.enc.Utf8.parse('YwwqhsxBkywjgm01') // 密钥
 const IV = CryptoJS.enc.Utf8.parse('SSXXZYZYBABA30TM') // 偏移量
 /**
 * AES加密 ：字符串 key iv  返回base64
 */
 export function Encrypt(word, keyStr, ivStr) {
  let key = KEY
  let iv = IV
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr)
    iv = CryptoJS.enc.Utf8.parse(ivStr)
  }
  const srcs = CryptoJS.enc.Utf8.parse(word)
  var encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding,
  })
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
 }
 /**
 * AES 解密 ：字符串 key iv  返回base64
 *
 */
 export function Decrypt(word, keyStr, ivStr) {
  let key = KEY
  let iv = IV
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr)
    iv = CryptoJS.enc.Utf8.parse(ivStr)
  }
  const base64 = CryptoJS.enc.Base64.parse(word)
  const src = CryptoJS.enc.Base64.stringify(base64)
  var decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding,
  })
  var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  return decryptedStr.toString()
 }
--- a/back/src/utils/location.js
+++ b/back/src/utils/location.js
@ -0,0 +1,12 @@
 /*
 * @Author: hisense.liangjunhua
 * @Date: 2022-08-23 10:30:11
 * @LastEditors: hisense.wuhongjian
 * @LastEditTime: 2022-08-25 21:05:18
 * @Description: 告诉大家这是什么
 */
 const returnLocationStr = () => {
  return 'qingdao1'
 }
 export default returnLocationStr
--- a/back/src/views/main-content.vue
+++ b/back/src/views/main-content.vue
@ -5,25 +5,52 @@
      <el-dropdown class="aui-content--tabs-tools">
        <i class="el-icon-arrow-down"></i>
        <el-dropdown-menu slot="dropdown" :show-timeout="0">
-          <el-dropdown-item @click.native="tabRemoveHandle($store.state.contentTabsActiveName)">{{ $t('contentTabs.closeCurrent') }}</el-dropdown-item>
+          <el-dropdown-item
-          <el-dropdown-item @click.native="tabsCloseOtherHandle()">{{ $t('contentTabs.closeOther') }}</el-dropdown-item>
+            @click.native="tabRemoveHandle($store.state.contentTabsActiveName)"
-          <el-dropdown-item @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</el-dropdown-item>
+            >{{ $t("contentTabs.closeCurrent") }}</el-dropdown-item
          >
          <el-dropdown-item @click.native="tabsCloseOtherHandle()">{{
            $t("contentTabs.closeOther")
          }}</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseAllHandle()">{{
            $t("contentTabs.closeAll")
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
-      <el-tabs v-model="$store.state.contentTabsActiveName" @tab-click="tabSelectedHandle" @tab-remove="tabRemoveHandle">
+      <el-tabs
        v-model="$store.state.contentTabsActiveName"
        @tab-click="tabSelectedHandle"
        @tab-remove="tabRemoveHandle"
      >
        <el-tab-pane
          v-for="item in $store.state.contentTabs"
          :key="item.name"
          :name="item.name"
          :label="item.title"
          :closable="item.name !== 'home'"
-          :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }">
+          :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }"
        >
          <template v-if="item.name === 'home'">
-            <svg slot="label" class="icon-svg aui-content--tabs-icon-nav" aria-hidden="true"><use xlink:href="#icon-home"></use></svg>
+            <svg
              slot="label"
              class="icon-svg aui-content--tabs-icon-nav"
              aria-hidden="true"
            >
              <use xlink:href="#icon-home"></use>
            </svg>
          </template>
-          <iframe v-if="tabIsIframe(item.iframeURL)" :src="item.iframeURL" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
+          <iframe
            v-if="tabIsIframe(item.iframeURL)"
            :src="item.iframeURL"
            width="100%"
            height="100%"
            frameborder="0"
            scrolling="yes"
          ></iframe>
          <keep-alive v-else>
-            <router-view v-if="item.name === $store.state.contentTabsActiveName" />
+            <router-view
              v-if="item.name === $store.state.contentTabsActiveName"
            />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
@ -38,59 +65,91 @@
 </template>
 <script>
-import { isURL } from '@/utils/validate'
+import { isURL } from "@/utils/validate";
 export default {
-  data () {
+  data() {
-    return {
+    return {};
    }
  },
  methods: {
    // tabs, 是否通过iframe展示
-    tabIsIframe (url) {
+    tabIsIframe(url) {
-      return isURL(url)
+      return isURL(url);
    },
    // tabs, 选中tab
-    tabSelectedHandle (tab) {
+    tabSelectedHandle(tab) {
-      tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0]
+      tab = this.$store.state.contentTabs.filter(
        (item) => item.name === tab.name
      )[0];
      if (tab) {
        this.$router.push({
-          'name': /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
+          name: /^iframe_.+/.test(tab.name) ? "iframe" : tab.name,
-          'params': { ...tab.params },
+          params: { ...tab.params },
-          'query': { ...tab.query }
+          query: { ...tab.query },
-        })
+        });
      }
    },
    // tabs, 删除tab
-    tabRemoveHandle (tabName) {
+    tabRemoveHandle(tabName) {
-      if (tabName === 'home') {
+      if (tabName === "home") {
-        return false
+        return false;
      }
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => item.name !== tabName
      );
      if (this.$store.state.contentTabs.length <= 0) {
-        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
+        this.$store.state.sidebarMenuActiveName =
-        return false
+          this.$store.state.contentTabsActiveName = "home";
        return false;
      }
      // 当前选中tab被删除
      if (tabName === this.$store.state.contentTabsActiveName) {
-        let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
+        let tab =
          this.$store.state.contentTabs[
            this.$store.state.contentTabs.length - 1
          ];
        this.$router.push({
-          name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
+          name: /^iframe_.+/.test(tab.name) ? "iframe" : tab.name,
          params: { ...tab.params },
-          query: { ...tab.query }
+          query: { ...tab.query },
-        })
+        });
      }
    },
    // tabs, 关闭其它
-    tabsCloseOtherHandle () {
+    tabsCloseOtherHandle() {
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => {
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-        return item.name === 'home' || item.name === this.$store.state.contentTabsActiveName
+        (item) => {
-      })
+          return (
            item.name === "home" ||
            item.name === this.$store.state.contentTabsActiveName
          );
        }
      );
    },
    // tabs, 关闭全部
-    tabsCloseAllHandle () {
+    tabsCloseAllHandle() {
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-      this.$router.push({ name: 'home' })
+        (item) => item.name === "home"
      );
      this.$router.push({ name: "home" });
    },
  },
 };
 </script>
 <style scoped lang="scss">
 .aui-content {
  .el-tabs {
    ::v-deep .el-tabs__header {
      left: 266px;
      .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            .el-tabs__item ::after {
              background-color: #0058e1;
            }
          }
        }
      }
    }
  }
 }
-</script>
+</style>
--- a/back/src/views/main-navbar-update-password.vue
+++ b/back/src/views/main-navbar-update-password.vue
@ -1,3 +1,10 @@
 <!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-23 16:41:46
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-24 17:51:42
 * @Description: 告诉大家这是什么
 -->
 <template>
  <el-dialog
    :visible.sync="visible"
@ -13,7 +20,7 @@
        <el-input v-model="dataForm.password" type="password" :placeholder="$t('updatePassword.password')"></el-input>
      </el-form-item>
      <el-form-item prop="newPassword" :label="$t('updatePassword.newPassword')">
-        <el-input v-model="dataForm.newPassword" type="password" :placeholder="$t('updatePassword.newPassword')"></el-input>
+        <el-input v-model="dataForm.newPassword" type="password" :placeholder="$t('updatePassword.newPassword')" @input="changeInput"></el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword" :label="$t('updatePassword.confirmPassword')">
        <el-input v-model="dataForm.confirmPassword" type="password" :placeholder="$t('updatePassword.confirmPassword')"></el-input>
@ -28,6 +35,7 @@
 <script>
 import debounce from 'lodash/debounce'
 import { Encrypt } from '@/utils/crypto'
 import { clearLoginInfo } from '@/utils'
 export default {
  data () {
@ -42,6 +50,28 @@ export default {
  },
  computed: {
    dataRule () {
      var validatePassword = (rule, value, callback) => {
        if (!value) {
          this.showLevel = false
          return callback(new Error(this.$t('validate.pwdStrength')))
        }
        if (value.length < 8) {
          this.showLevel = false
          return callback(new Error(this.$t('validate.pwdStrength')))
        }
        const num = /^.*[0-9]+.*/
        const low = /^.*[a-z]+.*/
        const up = /^.*[A-Z]+.*/
        const spe = /^.*[^a-zA-Z0-9]+.*/
        console.log('包含数字', num.test(value), '包含字母', low.test(value), up.test(value), '包含特殊符号', spe.test(value))
        if (!(num.test(value) && (low.test(value) || up.test(value)) && spe.test(value))) {
          return callback(new Error(this.$t('validate.pwdStrength')))
        }
        // if (!this.dataForm.id && !/\S/.test(value)) {
        //   return callback(new Error(this.$t('validate.required')))
        // }
        callback()
      }
      var validateConfirmPassword = (rule, value, callback) => {
        if (this.dataForm.newPassword !== value) {
          return callback(new Error(this.$t('updatePassword.validate.confirmPassword')))
@ -53,7 +83,8 @@ export default {
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        newPassword: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
@ -63,19 +94,33 @@ export default {
    }
  },
  methods: {
    changeInput (value) {
      if (value !== value.replace(/ /g, '')) {
        this.$message({
          message: '密码中不允许存在空格！',
          type: 'warning'
        })
        this.dataForm.newPassword = value.replace(/ /g, '')
        // console.log('密码发生变化=============>', value)
      }
    },
    init () {
      this.visible = true
      this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs.dataForm.resetFields()
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs.dataForm.validate((valid) => {
        if (!valid) {
          return false
        }
-        this.$http.put('/sys/user/password', this.dataForm).then(({ data: res }) => {
+        this.$http.put('/sys/user/password', {
          confirmPassword: Encrypt(this.dataForm.confirmPassword),
          newPassword: Encrypt(this.dataForm.newPassword),
          password: Encrypt(this.dataForm.password)
        }).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
@ -91,7 +136,7 @@ export default {
          })
        }).catch(() => {})
      })
-    }, 1000, { 'leading': true, 'trailing': false })
+    }, 1000, { leading: true, trailing: false })
  }
 }
 </script>
--- a/back/src/views/main-navbar.vue
+++ b/back/src/views/main-navbar.vue
@ -1,59 +1,102 @@
 <template>
-  <nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
+  <nav
    class="aui-navbar"
    :class="`aui-navbar--${$store.state.navbarLayoutType}`"
  >
    <div class="aui-navbar__header">
      <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
-        <a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
+        <a class="aui-navbar__brand-mini" href="javascript:;">{{
-        <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
+          $t("brand.mini")
        }}</a>
        <a class="aui-navbar__brand-lg" href="javascript:;">{{
          $t("brand.lg")
        }}</a>
        <span>——</span>
        <span class="back-title-text">后台管理系统</span>
      </h1>
    </div>
    <div class="aui-navbar__body">
      <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
-        <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
+        <!--    <el-menu-item
-          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
+          index="1"
          @click="$store.state.sidebarFold = !$store.state.sidebarFold"
        >
          <svg
            class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
            aria-hidden="true"
          >
            <use xlink:href="#icon-outdent"></use>
          </svg>
        </el-menu-item>
        <el-menu-item index="2" @click="refresh()">
-          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
+          <svg
-        </el-menu-item>
+            class="
              icon-svg
              aui-navbar__icon-menu aui-navbar__icon-menu--refresh
            "
            aria-hidden="true"
          >
            <use xlink:href="#icon-sync"></use>
          </svg>
        </el-menu-item> -->
      </el-menu>
      <el-menu class="aui-navbar__menu" mode="horizontal">
        <el-menu-item index="1">
          <el-dropdown placement="bottom" :show-timeout="0">
-            <el-button size="mini">{{ $t('_lang') }}</el-button>
+            <el-button size="mini">{{ $t("_lang") }}</el-button>
            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="(val, key) in i18nMessages" :key="key" @click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
+              <el-dropdown-item
                v-for="(val, key) in i18nMessages"
                :key="key"
                @click.native="$i18n.locale = key"
                >{{ val._lang }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
        <el-menu-item index="2">
          <a href="//115.28.200.119:9091" target="_blank">
-            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
+            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
              <use xlink:href="#icon-earth"></use>
            </svg>
          </a>
        </el-menu-item>
        <el-menu-item index="3" v-if="$hasPermission('sys:notice:all')">
          <el-badge :is-dot="messageTip">
-            <a href="#"  @click="myNoticeRouter()"><i class="el-icon-bell"></i></a>
+            <a href="#" @click="myNoticeRouter()"
              ><i class="el-icon-bell"></i
            ></a>
          </el-badge>
        </el-menu-item>
        <el-menu-item index="4" @click="fullscreenHandle()">
-          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
+          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
            <use xlink:href="#icon-fullscreen"></use>
          </svg>
        </el-menu-item>
        <el-menu-item index="5" class="aui-navbar__avatar">
          <el-dropdown placement="bottom" :show-timeout="0">
            <span class="el-dropdown-link">
-              <img src="~@/assets/img/avatar.png">
+              <img src="~@/assets/img/avatar.png" />
              <span>{{ $store.state.user.name }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
+              <el-dropdown-item @click.native="updatePasswordHandle()">{{
-              <el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
+                $t("updatePassword.title")
              }}</el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">{{
                $t("logout")
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
-    <update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
+    <update-password
      v-if="updatePasswordVisible"
      ref="updatePassword"
    ></update-password>
  </nav>
 </template>
 <script>
@ -108,14 +151,17 @@ export default {
      this.$router.replace('notice-notice-user')
    },
    getUnReadCount () {
-      this.$http.get('/sys/notice/mynotice/unread').then(({ data: res }) => {
+      this.$http
-        if (res.code !== 0) {
+        .get('/sys/notice/mynotice/unread')
-          return this.$message.error(res.msg)
+        .then(({ data: res }) => {
-        }
+          if (res.code !== 0) {
-        if (res.data > 0) {
+            return this.$message.error(res.msg)
-          this.messageTip = true
+          }
-        }
+          if (res.data > 0) {
-      }).catch(() => {})
+            this.messageTip = true
          }
        })
        .catch(() => {})
    },
    // 全屏
    fullscreenHandle () {
@ -137,20 +183,57 @@ export default {
    },
    // 退出
    logoutHandle () {
-      this.$confirm(this.$t('prompt.info', { handle: this.$t('logout') }), this.$t('prompt.title'), {
+      this.$confirm(
-        confirmButtonText: this.$t('confirm'),
+        this.$t('prompt.info', { handle: this.$t('logout') }),
-        cancelButtonText: this.$t('cancel'),
+        this.$t('prompt.title'),
-        type: 'warning'
+        {
-      }).then(() => {
+          confirmButtonText: this.$t('confirm'),
-        this.$http.post('/logout').then(({ data: res }) => {
+          cancelButtonText: this.$t('cancel'),
-          if (res.code !== 0) {
+          type: 'warning'
-            return this.$message.error(res.msg)
+        }
-          }
+      )
-          clearLoginInfo()
+        .then(() => {
-          this.$router.push({ name: 'login' })
+          this.$http
-        }).catch(() => {})
+            .post('/logout')
-      }).catch(() => {})
+            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg)
              }
              clearLoginInfo()
              this.$router.push({ name: 'login' })
            })
            .catch(() => {})
        })
        .catch(() => {})
    }
  }
 }
 </script>
 <style scoped lang="scss">
@font-face {
  font-family: "header-typeface";
  src: url("~@/assets/font/header-typeface.ttf");
 }
 .aui-navbar {
  width: 100%;
  height: 50px;
  background-image: url("~@/assets/img/activitiMyWorkDynamics/header-bak.png");
  .aui-navbar__header {
    width: 25%;
    .aui-navbar__brand {
      margin-left: 20px;
      a {
        font-size: 22px;
        color: #ffffff;
      }
      .aui-navbar__brand-mini {
        display: block;
      }
      .back-title-text {
        margin-top: 5px;
        font-family: header-typeface;
      }
    }
  }
 }
 </style>
--- a/back/src/views/main-sidebar-sub-menu.vue
+++ b/back/src/views/main-sidebar-sub-menu.vue
@ -1,89 +1,135 @@
 <template>
-  <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
+  <el-submenu
    v-if="menu.children && menu.children.length >= 1"
    :index="menu.id"
    :popper-append-to-body="false"
  >
    <template slot="title">
-      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
+      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
-      <span>{{ menu.name }}</span>
+        <use :xlink:href="`#${menu.icon}`"></use>
      </svg>
      <span class="first-level-text">{{ menu.name }}</span>
    </template>
-    <sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
+    <sub-menu
      v-for="item in menu.children"
      :key="item.id"
      :menu="item"
    ></sub-menu>
  </el-submenu>
  <el-menu-item v-else :index="menu.id" ref="li">
    <a
-      :href="isBrowserTabOpen(menu.id) ? getBrowserTabOpenURL(menu.id) : 'javascript:;'"
+      :href="
        isBrowserTabOpen(menu.id)
          ? getBrowserTabOpenURL(menu.id)
          : 'javascript:;'
      "
      :target="isBrowserTabOpen(menu.id) ? '_blank' : '_self'"
-      @click="isBrowserTabOpen(menu.id) ? 'return false;' : gotoRouteHandle(menu.id)">
+      @click="
-      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
+        isBrowserTabOpen(menu.id) ? 'return false;' : gotoRouteHandle(menu.id)
      "
    >
      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
        <use :xlink:href="`#${menu.icon}`"></use>
      </svg>
      <span>{{ menu.name }}</span>
    </a>
  </el-menu-item>
 </template>
 <script>
-import SubMenu from './main-sidebar-sub-menu'
+import SubMenu from "./main-sidebar-sub-menu";
 export default {
-  name: 'sub-menu',
+  name: "sub-menu",
-  data () {
+  data() {
    return {
-      browserTabOpenList: [
+      browserTabOpenList: ["1156748733921165314"],
-        '1156748733921165314',
+    };
      ]
    }
  },
  props: {
    menu: {
      type: Object,
-      required: true
+      required: true,
-    }
+    },
  },
  components: {
-    SubMenu
+    SubMenu,
  },
-  created () {
+  created() {
    this.$nextTick(() => {
      if (this.$refs.li) {
-        let $li = this.$refs.li.$el
+        let $li = this.$refs.li.$el;
-        let $a = $li.firstElementChild
+        let $a = $li.firstElementChild;
        if ($a) {
-          let pl = '0', pr = '0'
+          let pl = "0",
            pr = "0";
          if ($li.currentStyle) {
-            pl = $li.currentStyle['paddingLeft']
+            pl = $li.currentStyle["paddingLeft"];
-            pr = $li.currentStyle['paddingRight']
+            pr = $li.currentStyle["paddingRight"];
          } else {
-            pl = window.document.defaultView.getComputedStyle($li, null)['paddingLeft']
+            pl = window.document.defaultView.getComputedStyle($li, null)[
-            pr = window.document.defaultView.getComputedStyle($li, null)['paddingRight']
+              "paddingLeft"
            ];
            pr = window.document.defaultView.getComputedStyle($li, null)[
              "paddingRight"
            ];
          }
-          $li.setAttribute('style', `padding-left: 0; padding-right: 0;`)
+          $li.setAttribute("style", `padding-left: 0; padding-right: 0;`);
-          $a.setAttribute('style', `padding-left: ${pl}; padding-right: ${pr};`)
+          $a.setAttribute(
            "style",
            `padding-left: ${pl}; padding-right: ${pr};`
          );
        }
      }
-    })
+    });
  },
  methods: {
    // 是否通过浏览器Tab打开菜单
-    isBrowserTabOpen (menuId) {
+    isBrowserTabOpen(menuId) {
-      return this.browserTabOpenList.filter(item => item === menuId).length >= 1;
+      return (
        this.browserTabOpenList.filter((item) => item === menuId).length >= 1
      );
    },
    // 获取浏览器Tab打开菜单URL
-    getBrowserTabOpenURL (menuId) {
+    getBrowserTabOpenURL(menuId) {
-      var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
+      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
-      return route ? route.meta.iframeURL : '';
+        (item) => item.meta.menuId === menuId
      )[0];
      return route ? route.meta.iframeURL : "";
    },
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
-    gotoRouteHandle (menuId) {
+    gotoRouteHandle(menuId) {
-      var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
+      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
        (item) => item.meta.menuId === menuId
      )[0];
      if (route) {
-        this.$router.push({ name: route.name })
+        this.$router.push({ name: route.name });
      }
-    }
+    },
-  }
+  },
-}
+};
 </script>
 <style lang="scss">
 .aui-sidebar__menu {
-  .el-menu-item > a {
+  .first-level-text {
-    display: block;
+    font-size: 16px;
-    color: inherit;
+    color: #212121;
-    text-decoration: none;
+    font-weight: bold;
  }
  .el-menu-item {
    &.is-active {
      color: #ffffff;
      background-color: #0058e1;
      border: none;
    }
    a {
      display: block;
      color: inherit;
      text-decoration: none;
    }
    span {
      font-size: 16px;
    }
  }
 }
 </style>
--- a/back/src/views/main-sidebar.vue
+++ b/back/src/views/main-sidebar.vue
@ -1,30 +1,68 @@
 <!--
 * @Author: kongjun qdkongjun@gmail.com
 * @Date: 2022-06-20 09:29:59
 * @LastEditors: kongjun qdkongjun@gmail.com
 * @LastEditTime: 2022-06-22 10:04:56
 * @FilePath: \back\src\views\main-sidebar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-  <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
+  <aside
    :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]"
  >
    <div class="aui-sidebar__inner">
      <el-menu
        :default-active="$store.state.sidebarMenuActiveName"
        :collapse="$store.state.sidebarFold"
        :unique-opened="true"
        :collapseTransition="false"
-        class="aui-sidebar__menu">
+        class="aui-sidebar__menu"
-        <sub-menu v-for="menu in $store.state.sidebarMenuList" :key="menu.id" :menu="menu" />
+      >
        <sub-menu
          v-for="menu in $store.state.sidebarMenuList"
          :key="menu.id"
          :menu="menu"
        />
      </el-menu>
    </div>
  </aside>
 </template>
 <script>
-import SubMenu from './main-sidebar-sub-menu'
+import SubMenu from "./main-sidebar-sub-menu";
 export default {
-  data () {
+  data() {
-    return {
+    return {};
    }
  },
  components: {
-    SubMenu
+    SubMenu,
  },
-  created () {
+  created() {
-    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
+    this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
  },
 };
 </script>
 <style scoped lang="scss">
 .aui-sidebar {
  width: 266px;
  .aui-sidebar__inner {
    width: 260px;
    //overflow-y: hidden;
    /*滚动条样式*/
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5;
      background: rgba(0, 0, 0, 0.25);
    }
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background: #f2f2f2;
    }
    .aui-sidebar__menu {
      width: 266px;
    }
  }
 }
-</script>
+</style>
--- a/back/src/views/main-theme-tools.vue
+++ b/back/src/views/main-theme-tools.vue
@ -1,21 +1,42 @@
 <!--
 * @Author: kongjun qdkongjun@gmail.com
 * @Date: 2022-06-20 09:29:59
 * @LastEditors: kongjun qdkongjun@gmail.com
 * @LastEditTime: 2022-06-21 11:36:51
 * @FilePath: \back\src\views\main-theme-tools.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
  <div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
    <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
-      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg>
+      <svg class="icon-svg" aria-hidden="true">
        <use xlink:href="#icon-setting"></use>
      </svg>
    </div>
    <div class="aui-theme-tools__content">
      <div class="aui-theme-tools__item">
        <h3>Navbar</h3>
-        <el-checkbox v-model="$store.state.navbarLayoutType" true-label="colorful">colorful 鲜艳</el-checkbox>
+        <el-checkbox
          v-model="$store.state.navbarLayoutType"
          true-label="colorful"
          >colorful 鲜艳</el-checkbox
        >
      </div>
      <div class="aui-theme-tools__item">
        <h3>Sidebar</h3>
-        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark">dark 黑色</el-checkbox>
+        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark"
          >dark 黑色</el-checkbox
        >
      </div>
      <div class="aui-theme-tools__item">
        <h3>Theme</h3>
        <el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
-          <el-radio v-for="item in themeList" :key="item.name" :label="item.name">{{ `${item.name} ${item.desc}` }}</el-radio>
+          <el-radio
            v-for="item in themeList"
            :key="item.name"
            :label="item.name"
            >{{ `${item.name} ${item.desc}` }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
@ -24,38 +45,50 @@
 <script>
 export default {
-  data () {
+  data() {
    return {
      isOpen: false,
-      themeList: require('@/element-ui/config.js'),
+      themeList: require("@/element-ui/config.js"),
-      themeColor: 'turquoise'
+      themeColor: "blue",
-    }
+    };
  },
  mounted() {
    this.themeColorChangeHandle("blue");
  },
  methods: {
-    themeColorChangeHandle (val) {
+    themeColorChangeHandle(val) {
      var styleList = [
        {
-          id: 'J_elementTheme',
+          id: "J_elementTheme",
-          url: `${process.env.BASE_URL}element-theme/${val}/index.css?t=${new Date().getTime()}`
+          url: `${
            process.env.BASE_URL
          }element-theme/${val}/index.css?t=${new Date().getTime()}`,
        },
        {
-          id: 'J_auiTheme',
+          id: "J_auiTheme",
-          url: `${process.env.BASE_URL}element-theme/${val}/aui.css?t=${new Date().getTime()}`
+          url: `${
-        }
+            process.env.BASE_URL
-      ]
+          }element-theme/${val}/aui.css?t=${new Date().getTime()}`,
        },
      ];
      for (var i = 0; i < styleList.length; i++) {
-        var el = document.querySelector(`#${styleList[i].id}`)
+        var el = document.querySelector(`#${styleList[i].id}`);
        if (el) {
-          el.href = styleList[i].url
+          el.href = styleList[i].url;
-          continue
+          continue;
        }
-        el = document.createElement('link')
+        el = document.createElement("link");
-        el.id = styleList[i].id
+        el.id = styleList[i].id;
-        el.href = styleList[i].url
+        el.href = styleList[i].url;
-        el.rel = 'stylesheet'
+        el.rel = "stylesheet";
-        document.querySelector('head').appendChild(el)
+        document.querySelector("head").appendChild(el);
      }
-    }
+    },
-  }
+  },
-}
+};
 </script>
 <style scoped lang="scss">
 .aui-theme-tools__toggle {
  background-color: #0058e1;
 }
 </style>
--- a/back/src/views/main.vue
+++ b/back/src/views/main.vue
@ -1,5 +1,9 @@
 <template>
-  <div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
+  <div
    v-loading.fullscreen.lock="loading"
    :element-loading-text="$t('loading')"
    :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]"
  >
    <template v-if="!loading">
      <main-navbar />
      <main-sidebar />
@ -47,20 +51,22 @@ export default {
  created () {
    this.windowResizeHandle()
    this.routeHandle(this.$route)
-    Promise.all([
+    Promise.all([this.getUserInfo(), this.getPermissions()]).then(() => {
      this.getUserInfo(),
      this.getPermissions()
    ]).then(() => {
      this.loading = false
    })
  },
  methods: {
    // 窗口改变大小
    windowResizeHandle () {
-      this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
+      this.$store.state.sidebarFold =
-      window.addEventListener('resize', debounce(() => {
+        document.documentElement.clientWidth <= 992 || false
-        this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
+      window.addEventListener(
-      }, 150))
+        'resize',
        debounce(() => {
          this.$store.state.sidebarFold =
            document.documentElement.clientWidth <= 992 || false
        }, 150)
      )
    },
    // 路由, 监听
    routeHandle (route) {
@ -69,52 +75,66 @@ export default {
      }
      let tab = {}
      let routeName = route.name
-      let routeMeta = route.meta
+      const routeMeta = route.meta
      if (route.name === 'iframe') {
-        let url = route.query.url || ''
+        const url = route.query.url || ''
        if (!isURL(url)) {
          return false
        }
-        let key = route.query.key || new Date().getTime()
+        const key = route.query.key || new Date().getTime()
        routeName = `${routeName}_${key}`
        routeMeta.title = key.toString()
        routeMeta.menuId = route.query.menuId || ''
        routeMeta.iframeURL = url
      }
-      tab = this.$store.state.contentTabs.filter(item => item.name === routeName)[0]
+      tab = this.$store.state.contentTabs.filter(
        (item) => item.name === routeName
      )[0]
      if (!tab) {
        tab = {
-          ...window.SITE_CONFIG['contentTabDefault'],
+          ...window.SITE_CONFIG.contentTabDefault,
          ...routeMeta,
-          'name': routeName,
+          name: routeName,
-          'params': { ...route.params },
+          params: { ...route.params },
-          'query': { ...route.query }
+          query: { ...route.query }
        }
-        this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
+        this.$store.state.contentTabs =
          this.$store.state.contentTabs.concat(tab)
      }
      this.$store.state.sidebarMenuActiveName = tab.menuId
      this.$store.state.contentTabsActiveName = tab.name
    },
    // 获取当前管理员信息
    getUserInfo () {
-      return this.$http.get('/sys/user/info').then(({ data: res }) => {
+      return this.$http
-        if (res.code !== 0) {
+        .get('/sys/user/info')
-          return this.$message.error(res.msg)
+        .then(({ data: res }) => {
-        }
+          if (res.code !== 0) {
-        this.$store.state.user.id = res.data.id
+            return this.$message.error(res.msg)
-        this.$store.state.user.name = res.data.username
+          }
-        this.$store.state.user.superAdmin = res.data.superAdmin
+          this.$store.state.user.id = res.data.id
-      }).catch(() => {})
+          this.$store.state.user.name = res.data.realName
          this.$store.state.user.superAdmin = res.data.superAdmin
        })
        .catch(() => {})
    },
    // 获取权限
    getPermissions () {
-      return this.$http.get('/sys/menu/permissions').then(({ data: res }) => {
+      return this.$http
-        if (res.code !== 0) {
+        .get('/sys/menu/permissions')
-          return this.$message.error(res.msg)
+        .then(({ data: res }) => {
-        }
+          if (res.code !== 0) {
-        window.SITE_CONFIG['permissions'] = res.data
+            return this.$message.error(res.msg)
-      }).catch(() => {})
+          }
          window.SITE_CONFIG.permissions = res.data
        })
        .catch(() => {})
    }
  }
 }
 </script>
 <style scoped lang="scss">
 .aui-content__wrapper {
  margin-left: 266px;
 }
 </style>
--- a/back/src/views/modules/ability/IntegratedServices-add.vue
+++ b/back/src/views/modules/ability/IntegratedServices-add.vue
@ -0,0 +1,463 @@
 <template>
  <div>
    <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="first-title">
        填写字段
      </div>
      <el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
        <el-checkbox-button v-for="(item) in btnList" :label="item" :key="item">{{ item }}
        </el-checkbox-button>
      </el-checkbox-group>
      <!-- 挂载和修改-->
      <div key="1">
        <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
          :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
          <!-- 基本信息 -->
          <div style="margin-bottom:20px" v-show="checkList.includes('基本信息')">
            <div style="
                text-align: center;
                font-weight: 600;
                font-size: 18px;
                margin-bottom: 10px;
              ">
              基本信息
            </div>
            <el-form-item label="融合服务名称" prop="name">
              <el-input class="input-box" v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
            </el-form-item>
            <el-form-item label="融合服务描述" prop="description">
              <el-input type="textarea" :rows="3" class="input-box" v-model="dataForm.description"
                placeholder="请输入融合服务描述"></el-input>
            </el-form-item>
            <el-form-item label="应用领域" prop="applicationArea">
              <el-select v-model="dataForm.applicationArea" placeholder="请选择应用领域" filterable>
                <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="图片">
              <el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
                :on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1" :file-list="[]"
                :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
                <el-button size="small" type="primary" class="button-new">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              </el-upload>
            </el-form-item>
          </div>
          <!-- 组合能力 -->
          <div class="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
            <div class="title">
              组合能力
            </div>
            <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
              :modalType="modalType" ref="jcssDom"></InfrastructureModal>
            <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
              :getDataParams="getListParams['数据资源']"></combine-ability>
            <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
              :getDataParams="getListParams['组件服务']"></combine-ability>
          </div>
        </el-form>
      </div>
      <template slot="footer">
        <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
            $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
  </div>
 </template>
 <script>
 import debounce from "lodash/debounce";
 import qs from "qs";
 import CommonQuestion from './components/common-question.vue';
 import IntegratedCombineAbility from './components/integrated-combine-ability.vue';
 import CombineAbility from './components/combine-ability.vue';
 import Cookies from 'js-cookie'
 import { tableColumns } from './IntegratedServices.vue';
 import { getFuseResourceList, getListParams, modalTypeText } from "./assignedScene/add-update-scene.vue";
 import InfrastructureModal from './assignedScene/components/infrastructure-modal.vue'
 export default {
  components: {
    CommonQuestion,
    IntegratedCombineAbility,
    CombineAbility,
    InfrastructureModal,
  },
  data() {
    return {
      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
      dataForm: {
        "name": "",
        "applicationArea": "",
        "description": "",
        "fuseAttrList": [
          {
            "attrType": "服务图片",
            "attrValue": "",
          },
        ],
        // 选择的能力
        "fuseResourceList": [
          {
            "resourceId": 0,
            "sequence": ""
          }
        ],
        type: '打包模式'
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入融合服务名称",
            trigger: "change",
          },
        ],
        description: [
          {
            required: true,
            message: "请输入融合服务描述",
            trigger: "change",
          },
        ],
      },
      btnList: ['基本信息', '组合能力'],
      checkList: ['基本信息', '组合能力'],
      areaList: [],
      addOrUpdateVisibleCopy: this.addOrUpdateVisible,
      displayInfo: tableColumns,
      getListParams: getListParams,
      refsParseArray: {
        'zjfwDom': '组件服务',
        'sjzyDom': '数据资源',
        'jcssDom': '基础设施',
      },
      modalTypeText: modalTypeText,
      abilityListObj: {},
      // 限定图片
      handleExceed() {
        this.$message({ type: 'error', message: '最多支持一张图片上传' })
      },
      imageUrl: ''
    };
  },
  props: {
    modalType: {
      type: String,
      default: 'add'
    },
    addOrUpdateVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    dataForm: {
      handler(newVal) {
        this.dataForm = newVal
      },
      deep: true,
      immediate: true,
    },
    addOrUpdateVisible: {
      handler(newVal) {
        this.addOrUpdateVisibleCopy = newVal;
        if (this.modalType == 'add' && newVal) {
          this.getDetail(this.dataForm)
        }
      },
      immediate: true,
    },
  },
  mounted() {
    // 获取应用领域
    this.getAreaInfo()
  },
  methods: {
    clearForm() {
      this.$refs.dataForm && this.$refs.dataForm.resetFields();
    },
    closeModal() {
      this.$emit('closeModal')
    },
    // 获取应用领域
    getAreaInfo() {
      const params = {
        page: 1,
        limit: 99,
        dictTypeId: "1513712507692818433",
      };
      this.$http
        .get("/sys/dict/data/page" + "?" + qs.stringify(params))
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          res.data.list.map((item) => {
            this.areaList.push({
              label: item.dictLabel,
              value: item.dictLabel
            });
          });
        }).catch(err => {
          this.$message.error(err);
        })
    },
    // 更新表单
    updateDataForm(data) {
      if (Object.keys(this.getListParams).includes(data.title)) {
        this.abilityListObj[data.title] = data.list;
      }
    },
    getFuseResourceList() {
      return getFuseResourceList(this.abilityListObj)
    },
    // 改变按钮状态
    changeBtn(data) {
      this.checkList = data;
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate((valid) => {
          if (!valid) {
            this.$message.error("请检查表单是否填写完整");
            return false;
          }
          let methodsObj = {
            'add': 'post',
            'update': 'put'
          }
          this.dataForm.fuseResourceList = this.getFuseResourceList()
          if (this.imageUrl == '') {
            this.$message.error("请上传图片！");
            return;
          }
          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || '';
          this.$http
          [methodsObj[this.modalType]]("/fuse", this.dataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.$refs.dataForm && this.$refs.dataForm.resetFields();
                  this.$emit("refreshDataList");
                  this.$emit("closeModal");
                },
              });
            })
            .catch((err) => {
              this.$message.error(err)
            });
        });
      },
      1000,
      { leading: true, trailing: false }
    ),
    // 详情
    getDetail(data) {
      this.dataForm = data;
      this.$nextTick(() => {
        for (const key in this.refsParseArray) {
          this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
        }
        let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {};
        this.imageUrl = _imgObj.attrValue;
        // 组合能力
        Object.keys(this.getListParams).map(k => {
          let arr = data.fuseResourceList.filter(v => v.type == k);
          let arr2 = [];
          arr.map(v => {
            arr2.push(v.resourceId)
          })
          this.abilityListObj[k] = arr2
        })
        console.log('this.dataForm----详情-------->', this.dataForm);
      })
    },
    beforeAvatarUpload(file) {
      const isImage =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'
      if (!isImage) {
        this.$message.error('上传头像图片只能是 jpg/png 格式!')
      }
      return isImage
    },
    addUploadRemoveFile(file, fileList) {
      this.$refs.addUpload.clearFiles()
      this.imageUrl = ''
    },
    editBeforeAvatarUpload(file) {
      const isImage =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'
      if (!isImage) {
        this.$message.error('上传头像图片只能是 jpg/png 格式!')
      }
      return isImage
    },
    editUploadRemoveFile(file, fileList) {
      this.$refs.editUpload.clearFiles()
      this.imageUrl = ''
    },
    eidtHandleAvatarSuccess(res, file) {
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.imageUrl = res.data
    },
  },
  beforeDestroy() {
    this.clearForm()
  },
 };
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-dialog__body {
  height: 580px;
  overflow: auto;
 }
 .icon-input ::v-deep .el-input__inner {
  cursor: pointer;
 }
 .detial-form ::v-deep {
  .el-form-item {
    margin-bottom: 0px;
    line-height: 32px;
  }
  .el-form-item__label {
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 32px;
  }
 }
 ::v-deep .el-checkbox-button__inner {
  width: 130px;
  margin: 0 10px 5px;
  border-left: unset !important;
  border-radius: unset !important;
  border: 1px solid #dcdfe6 !important;
 }
 </style>
 <style lang="scss">
 .mod-sys__menu {
  .menu-list,
  .icon-list {
    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }
  &-icon-popover {
    width: 458px;
    overflow: hidden;
  }
  &-icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &-icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
    >.el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      >span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
 }
 .previewImg {
  position: fixed;
  z-index: 9999;
 }
 .name {
  text-align: right;
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 32px;
  width: 120px;
 }
 .text {
  margin-left: 132px;
  font-size: 14px;
  color: #606266;
  line-height: 32px;
 }
 .input-box {
  width: 90%;
 }
 .first-title {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
 }
 .title {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
 }
 .avatar {
  height: 100px;
  width: 100px;
  display: block;
 }
 </style>
--- a/back/src/views/modules/ability/IntegratedServices.vue
+++ b/back/src/views/modules/ability/IntegratedServices.vue
@ -0,0 +1,179 @@
 <template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-ability__bsabilityai">
      <el-form :inline="true" :model="dataForm">
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="searchData">{{
              $t("query")
          }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('ability:bsabilityai:save')" type="primary" @click="addServe()">挂接</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
        style="width: 100%" :height="qp ? '810px' : '650px'">
        <el-table-column v-for="(item) in Object.keys(tableColumns)" :key="item" :prop="item"
          :label="tableColumns[item]" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="240" right="0">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('ability:bsabilityai:update')" type="text" size="small"
              @click="handleUpdate(scope.row)">{{ $t("update") }}</el-button>
            <el-button v-if="$hasPermission('ability:bsabilityai:delete')" type="text" size="small"
              @click="deleteRow(scope.row.id)">{{ $t("delete") }}</el-button>
            <el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="Number(total)"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
        :addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
      </add-or-update>
    </div>
  </el-card>
 </template>
 <script>
 import mixinViewModule from "@/mixins/view-module";
 import AddOrUpdate from "./IntegratedServices-add";
 import qs from "qs";
 import { type } from "os";
 export const tableColumns = {
  'name': '名称',
  'description': '描述',
  'applicationArea': '应用领域',
 }
 export default {
  mixins: [mixinViewModule],
  data() {
    return {
      // 表格--列
      tableColumns: tableColumns,
      tableData: [],
      mixinViewModuleOptions: {
        getDataListURL: "/fuse/page",
        exportURL: "/ability/bsabilityai/export",
        deleteURL: "/fuse",
        getDataListIsPage: true,
        deleteIsBatch: false,
      },
      dataForm: {
        name: "",
        order: 'desc',
        orderField: 'create_date',
        type: '打包模式'
      },
      qp: false,
      modalType: 'add',
    };
  },
  components: {
    AddOrUpdate,
  },
  mounted() {
    window.addEventListener("resize", this.a);
    this.fullScreen();
  },
  methods: {
    deleteRow(id) {
      this.$http.delete('/fuse/delete', {
        data: [id]
      }).then(res => {
        console.log('删除成功', res)
        if (res.data.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.$message({
          message: '删除成功',
          type: "success",
          duration: 500,
          onClose: () => {
            this.query()
          },
        });
      }).catch(err => {
        this.$message.error(err);
      })
    },
    // 查询
    searchData() {
      this.query()
    },
    // 重置
    reset() {
      this.dataForm.name = "";
      this.query()
    },
    // 修改
    handleUpdate(val) {
      this.addOrUpdateVisible = true;
      this.modalType = 'update';
      const cloneVal = JSON.parse(JSON.stringify(val))
      this.$nextTick(() => {
        this.$refs.addOrUpdate.getDetail(cloneVal)
      })
    },
    // 挂接
    addServe() {
      this.addOrUpdateVisible = true
      this.modalType = 'add';
    },
    closeModal() {
      this.addOrUpdateVisible = false;
    },
    // 详情
    showDetail(val) {
      window.open(window.SITE_CONFIG.previewUrl + '#/packagingDetails?id=' + val.id)
    },
    // showDocument(val) {
    //   console.log(val);
    //   window.open(
    //     window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
    //     "_blank"
    //   );
    // },
    fullScreen() {
      if (window.outerHeight === screen.availHeight) {
        if (window.outerWidth === screen.availWidth) {
          console.log(
            "全屏1",
          );
          this.qp = false;
        } else {
          console.log(
            "不是全屏2",
          );
          this.qp = true;
        }
      } else {
        console.log(
          "不是全屏3",
        );
        this.qp = true;
      }
    },
  },
 };
 </script>
 <style lang="scss" scoped>
 .el-tooltip__popper {
  max-width: 50%;
 }
 </style>
--- a/back/src/views/modules/ability/assignedScene/add-update-scene.vue
+++ b/back/src/views/modules/ability/assignedScene/add-update-scene.vue
@ -0,0 +1,567 @@
 <template>
  <div>
    <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="first-title">
        填写字段
      </div>
      <el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
        <el-checkbox-button v-for="(item) in btnList" :label="item" :key="item">{{ item }}
        </el-checkbox-button>
      </el-checkbox-group>
      <!-- 挂载和修改   -->
      <div key="1">
        <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
          :label-width="$i18n.locale === 'en-US' ? '120px' : '100px'">
          <!-- 基本信息 -->
          <div style="margin-bottom:40px" v-show="checkList.includes('基本信息')">
            <div style="
                text-align: center;
                font-weight: 600;
                font-size: 18px;
                margin-bottom: 10px;
              ">
              基本信息
            </div>
            <el-form-item label="名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="请输入名称" style="width:90%"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述" style="width:90%">
              </el-input>
            </el-form-item>
            <el-form-item label="图片">
              <el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
                :on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1" :file-list="[]"
                :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
                <el-button size="small" type="primary" class="button-new">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              </el-upload>
            </el-form-item>
          </div>
          <!-- 场景痛点 -->
          <div class="" style="padding-bottom:40px" v-show="checkList.includes('场景痛点')">
            <scene-one-input :dataForm="dataForm" @update="updateDataForm" ref="scenePainDom" title="场景痛点"
              :keyTextObj="painKeyTextObj"></scene-one-input>
          </div>
          <!-- 解决方案 -->
          <div class="" style="padding-bottom:40px" v-show="checkList.includes('解决方案')">
            <scene-one-input :dataForm="dataForm" @update="updateDataForm" ref="solutionDom" title="解决方案"
              :keyTextObj="solutionKeyTextObj"></scene-one-input>
          </div>
          <!-- 组合能力 -->
          <div class="" style="padding-bottom:40px" v-show="checkList.includes('组合能力')">
            <div class="title">
              组合能力
            </div>
            <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
              :modalType="modalType" ref="jcssDom"></InfrastructureModal>
            <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
              :getDataParams="getListParams['数据资源']"></combine-ability>
            <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
              :getDataParams="getListParams['组件服务']"></combine-ability>
          </div>
          <!-- 更多能力 -->
          <div class="" style="marigin-bottom:40px" v-show="checkList.includes('更多能力')">
            <common-question :dataForm="dataForm" @update="updateDataForm" ref="moreAbilityDom" title="更多能力"
              :keyTextObj="moreKeyTextObj">
            </common-question>
          </div>
          <!-- 使用步骤 -->
          <div style="marigin-bottom:20px" v-show="checkList.includes('使用步骤')">
            <scene-use-step :dataForm="dataForm" @update="updateDataForm" ref="sceneUseUpDom">
            </scene-use-step>
          </div>
        </el-form>
      </div>
      <template slot="footer">
        <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
            $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
  </div>
 </template>
 <script>
 import debounce from 'lodash/debounce'
 import qs from 'qs'
 import SceneUseStep from './components/scene-use-step.vue'
 import SceneOneInput from './components/scene-one-input.vue'
 import CombineAbility from '../components/combine-ability.vue'
 import CommonQuestion from '../components/common-question.vue'
 import InfrastructureModal from './components/infrastructure-modal.vue'
 import Cookies from 'js-cookie'
 import upload from '@/views/modules/components/upload'
 const btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
 // 数据资源\组件服务
 export const getJson = (type) => {
  if (type === '组件服务') {
    return {
      methods: 'get',
      url: '/census/center/selectResourceListByType',
      postData: {
        type
      }
    }
  } else {
    return {
      methods: 'post',
      url: '/resource/getDataResource',
      postData: {
        serviceName: '', // 资源名称
        orderField: 'fbrq', // 排序字段
        orderType: 'desc',
        pageNum: 1, // 页码
        pageSize: 15 // 分页大小
      }
    }
  }
 }
 export const getDescJson = (text) => {
  return {
    descObj: {
      text: `${text}描述`,
      key: 'description'
    }
  }
 }
 // 弹框的方法
 export const getListParams = {
  数据资源: getJson('数据资源'),
  组件服务: getJson('组件服务'),
  基础设施: ''
 }
 // 模态框标题
 export const modalTypeText = {
  add: '挂接',
  update: '修改'
 }
 export const getFuseResourceList = (abilityListObj) => {
  const arr = []
  let length = 0
  for (const key in abilityListObj) {
    if (Object.hasOwnProperty.call(abilityListObj, key)) {
      const itemArray = abilityListObj[key]
      itemArray.map((v, i) => {
        const index = (i + 1) + length
        arr.push({
          resourceId: v,
          type: key,
          sequence: index
        })
      })
      length = itemArray.length
    }
  }
  return arr
 }
 export default {
  components: {
    SceneUseStep,
    CombineAbility,
    SceneOneInput,
    upload,
    CommonQuestion,
    InfrastructureModal
  },
  data () {
    return {
      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
      moreKeyTextObj: {
        nameObj: {
          text: '能力名称',
          key: 'name'
        },
        ...getDescJson('能力')
      },
      painKeyTextObj: getDescJson('痛点'),
      solutionKeyTextObj: getDescJson('方案'),
      dataForm: {
        name: '',
        applicationArea: '',
        description: '',
        fuseAttrList: [
          {
            attrType: '使用步骤',
            attrValue: [{ question: '', answer: '' }]
          },
          {
            attrType: '更多能力',
            attrValue: [{ name: '', description: '' }]
          },
          {
            attrType: '场景痛点',
            attrValue: [{ description: '' }]
          },
          {
            attrType: '解决方案',
            attrValue: [{ description: '' }]
          },
          {
            attrType: '服务图片',
            attrValue: ''
          }
        ],
        fuseResourceList: []
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'change'
          }
        ],
        description: [
          {
            required: true,
            message: '请输入描述',
            trigger: 'change'
          }
        ]
      },
      checkList: JSON.parse(JSON.stringify(btnArray)),
      btnList: JSON.parse(JSON.stringify(btnArray)),
      addOrUpdateVisibleCopy: this.addOrUpdateVisible,
      displayInfo: {
        name: '名称',
        description: '描述'
      },
      modalTypeText: modalTypeText,
      refsParseArray: {
        sceneUseUpDom: '使用步骤',
        moreAbilityDom: '更多能力',
        scenePainDom: '场景痛点',
        solutionDom: '解决方案',
        zjfwDom: '组件服务',
        sjzyDom: '数据资源',
        jcssDom: '基础设施'
      },
      getListParams: getListParams,
      abilityListObj: {},
      imgData: [],
      // 限定图片
      handleExceed () {
        this.$message({ type: 'error', message: '最多支持一张图片上传' })
      },
      imageUrl: ''
    }
  },
  props: {
    modalType: {
      type: String,
      default: 'add'
    },
    addOrUpdateVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    dataForm: {
      handler (newVal) {
        this.dataForm = newVal
      },
      deep: true,
      immediate: true
    },
    addOrUpdateVisible: {
      handler (newVal) {
        this.addOrUpdateVisibleCopy = newVal
        if (this.modalType == 'add' && newVal) {
          localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
          this.getDetail(this.dataForm)
        }
      },
      immediate: true
    }
  },
  methods: {
    clearForm () {
      this.$refs.dataForm && this.$refs.dataForm.resetFields()
    },
    closeModal () {
      this.$emit('closeModal')
    },
    // 更新表单
    updateDataForm (data) {
      if (Object.keys(this.getListParams).includes(data.title)) {
        this.abilityListObj[data.title] = data.list
      } else {
        // 更多能力、使用步骤
        this.operateFuseAttrList(data.title, data)
      }
    },
    getFuseResourceList () {
      return getFuseResourceList(this.abilityListObj)
    },
    operateFuseAttrList (title, data) {
      if (this.dataForm.fuseAttrList.every(v => v.attrType !== title)) {
        this.dataForm.fuseAttrList.push({
          attrType: title,
          attrValue: JSON.stringify(data.list)
        })
      } else {
        this.dataForm.fuseAttrList.map(v => {
          if (v.attrType === title) {
            v.attrValue = JSON.stringify(data.list)
          }
        })
      }
    },
    // 改变按钮状态
    changeBtn (data) {
      this.checkList = data
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate((valid) => {
          if (!valid) {
            this.$message.error('请检查表单是否填写完整')
            return false
          }
          const methodsObj = {
            add: 'post',
            update: 'put'
          }
          this.dataForm.fuseResourceList = this.getFuseResourceList()
          if (this.imageUrl == '') {
            this.$message.error('请上传图片！')
            return
          }
          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
          const _obj = Object.assign({}, this.dataForm, {
            type: '赋能场景'
          })
          console.log('this.dataForm------表单提交------>', this.dataForm)
          this.$http
            [methodsObj[this.modalType]]('/fuse', _obj)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg)
              }
              this.$message({
                message: this.$t('prompt.success'),
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.$refs.dataForm && this.$refs.dataForm.resetFields()
                  this.$emit('refreshDataList')
                  this.$emit('closeModal')
                }
              })
            })
            .catch((err) => {
              this.$message.error(err)
            })
        })
      },
      1000,
      { leading: true, trailing: false }
    ),
    // 详情
    getDetail (data) {
      console.log('data---详情--------->', data)
      this.dataForm = data
      this.$nextTick(() => {
        for (const key in this.refsParseArray) {
          this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
        }
        const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
        this.imageUrl = _imgObj.attrValue
        // 组合能力--特殊处理
        Object.keys(this.getListParams).map(k => {
          const arr = data.fuseResourceList.filter(v => v.type == k)
          const arr2 = []
          arr.map(v => {
            arr2.push(v.resourceId)
          })
          this.abilityListObj[k] = arr2
        })
      })
    },
    handleAvatarSuccess (res, file) {
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.imageUrl = res.data
    },
    beforeAvatarUpload (file) {
      const isImage =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'
      if (!isImage) {
        this.$message.error('上传头像图片只能是 jpg/png 格式!')
      }
      return isImage
    },
    addUploadRemoveFile (file, fileList) {
      this.$refs.addUpload.clearFiles()
      this.imageUrl = ''
    },
    editBeforeAvatarUpload (file) {
      const isImage =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'
      if (!isImage) {
        this.$message.error('上传头像图片只能是 jpg/png 格式!')
      }
      return isImage
    },
    editUploadRemoveFile (file, fileList) {
      this.$refs.editUpload.clearFiles()
      this.imageUrl = ''
    },
    eidtHandleAvatarSuccess (res, file) {
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.imageUrl = res.data
    }
  },
  beforeDestroy () {
    this.clearForm()
  }
 }
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-dialog__body {
  height: 580px;
  overflow: auto;
 }
 .icon-input ::v-deep .el-input__inner {
  cursor: pointer;
 }
 .detial-form ::v-deep {
  .el-form-item {
    margin-bottom: 0px;
    line-height: 32px;
  }
  .el-form-item__label {
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 32px;
  }
 }
 ::v-deep .el-checkbox-button__inner {
  width: 130px;
  margin: 0 10px 5px;
  border-left: unset !important;
  border-radius: unset !important;
  border: 1px solid #dcdfe6 !important;
 }
 </style>
 <style lang="scss" scoped>
 .mod-sys__menu {
  .menu-list,
  .icon-list {
    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }
  &-icon-popover {
    width: 458px;
    overflow: hidden;
  }
  &-icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &-icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
 }
 .previewImg {
  position: fixed;
  z-index: 9999;
 }
 .name {
  text-align: right;
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 32px;
  width: 120px;
 }
 .text {
  margin-left: 132px;
  font-size: 14px;
  color: #606266;
  line-height: 32px;
 }
 .title {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
 }
 .first-title {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
 }
 .avatar {
  height: 100px;
  width: 100px;
  display: block;
 }
 </style>
--- a/back/src/views/modules/ability/assignedScene/components/display-list.vue
+++ b/back/src/views/modules/ability/assignedScene/components/display-list.vue
@ -0,0 +1,79 @@
 <template>
    <div class="show-box" v-if="displayList.length > 0">
        <div class="list-box">
            <div v-for="(item, i) in displayList" :key="i">
                <div class="list-item">
                    {{ item[showKey] || '--' }}
                </div>
            </div>
        </div>
    </div>
 </template>
 <script>
 export default {
    props: {
        displayList: {
            type: Array,
            default: () => []
        },
        showKey: {
            type: String,
            default: 'name'
        },
    },
    watch: {
        displayList: {
            handler(newVal) {
                this.displayList = newVal;
            },
            deep: true,
            immediate: true,
        }
    }
 }
 </script>
 <style lang="scss" scoped>
 .show-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
 }
 .top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
 }
 .type {
    padding-right: 12px;
    font-size: 14px;
    color: #606266;
    width: 100px;
    box-sizing: border-box;
    text-align: right;
    line-height: 40px;
    height: 40px;
 }
 .list-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 100px;
 }
 .list-item {
    font-size: 14px;
    color: #606266;
    width: 380px;
    text-align: left;
    margin-right: 10px;
    line-height: 40px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
 </style>
--- a/back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue
+++ b/back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue
@ -0,0 +1,535 @@
 <template>
    <div>
        <div class="top flex-row-start">
            <div class="type">{{ type }}</div>
            <el-button type="primary" size="small" @click="showModal = true">{{ modalType == 'add' ? '添加' : '编辑' }}
            </el-button>
        </div>
        <el-dialog class="modal-box" :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
            :close-on-press-escape="false" :key="showKey" append-to-body>
            <div class="infrastructure-box">
                <div class="search-box">
                    <div class="flex-row-start" style="margin-bottom:10px">
                        <div class="left-text">设施类型</div>
                        <div class="flex-row-start btn-list">
                            <div class="btn-text" v-for="(item) in btnList" :key="item"
                                :class="{ 'active-btn': item === activeBtn }" @click="changeBtn(item)">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                    <div class="flex-row-start" style="margin-bottom:10px;align-items: flex-start;">
                        <div class="left-text" style="margin-top: 8px;">{{ showText[activeBtn] }}</div>
                        <div style="flex:1;">
                            <el-button v-if="activeBtn == '视频资源'" type="primary"
                                style="margin-left:10px;margin-bottom:10px" size="small" @click="clearVideo">清空
                            </el-button>
                            <div class="flex-row-start btn-list video-btn-list">
                                <div class="btn-text" v-for="(item) in currentList" :key="item.labelCode"
                                    :class="{ 'active-btn': checkList.includes(item.labelCode) }"
                                    @click="changeVideoBtn(item)">
                                    {{ item.labelName }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-row-start" style="margin-bottom:10px;align-items: flex-start;">
                        <div class="left-text" style="margin-top: 10px;">关键词</div>
                        <el-input style="margin-left:10px;width: 200px;" v-model="searchData.cameraName"
                            placeholder="名称" clearable>
                        </el-input>
                        <el-button type="primary" style="margin-left:10px;margin-top:4px" size="small" @click="getData">
                            搜索
                        </el-button>
                        <el-button type="primary" style="margin-left:10px;margin-top:4px" size="small" @click="clear">
                            重置
                        </el-button>
                        <el-button type="primary" style="margin-left:10px;margin-top:4px" size="small"
                            @click="clearSelectArray">
                            清空已选择
                        </el-button>
                    </div>
                </div>
                <div class="tree-table-box">
                    <InfrastructureTree @changeParentId="changeParentId"></InfrastructureTree>
                    <div class="table-box">
                        <el-table v-loading="dataListLoading" :data="dataList" border ref="dataTable"
                            @selection-change="dataListSelectionChangeHandle"
                            style="width: 95%;margin: 0 auto 10px auto" size="mini">
                            <el-table-column type="selection" header-align="center" align="center" width="50">
                            </el-table-column>
                            <el-table-column prop="channelName" label="名称" header-align="center" align="center">
                            </el-table-column>
                            <el-table-column prop="nodeName" label="归属" header-align="center" align="center">
                            </el-table-column>
                        </el-table>
                        <el-pagination style="justify-content: center;display: flex;" :current-page="searchData.pageNum"
                            :page-sizes="[10, 20, 50, 100]" :page-size="searchData.pageSize" :total="pageData.total"
                            layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                            @current-change="pageCurrentChangeHandle">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <template slot="footer">
                <el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
                <el-button type="primary" @click="confirmSubmitHandle()">{{
                        $t("confirm")
                }}</el-button>
            </template>
        </el-dialog>
        <DisplayList :displayList="displayList" showKey="channelName"></DisplayList>
    </div>
 </template>
 <script>
 import InfrastructureTree from './infrastructure-tree.vue'
 import DisplayList from './display-list.vue';
 export default {
    components: {
        InfrastructureTree,
        DisplayList
    },
    props: {
        // 最多选择的数据个数
        maxNum: {
            type: Number,
            default: 10
        },
        type: {
            type: String,
            default: "基础设施"
        },
        modalType: {
            type: String,
            default: 'add'
        }
    },
    data() {
        const getYunList = () => {
            let yunList = ['云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP'];
            let arr = []
            yunList.map(v => arr.push({ labelCode: v, labelName: v }))
            return arr
        }
        return {
            showKey: 0,
            showModal: false,
            selectedArray: [], // 已选择的数据id
            selectedArrayCopy: [],
            displayList: [], // 用于展示的list
            btnList: ['视频资源', '云资源', '感知资源'],
            showText: {
                '视频资源': '视频标签',
                '云资源': '云资源分类',
                '感知资源': '感知资源分类',
            },
            tabData: [
                {
                    tabName: '视频资源',
                    list: []
                },
                {
                    tabName: '云资源',
                    list: getYunList()
                },
                {
                    tabName: '感知资源',
                    list: []
                },
            ],
            currentList: [],
            dataListLoading: false,
            dataList: [],
            pageData: {
                total: 0,
            },
            cameraName: '',
            postData: {},
            activeBtn: '视频资源',
            checkList: [],
            searchData: {
                cameraName: '',
                pageSize: 10,
                pageNum: 1,
                parentId: ''
            },
            dataFormCopy: {}
        }
    },
    watch: {
        async showModal(newVal) {
            if (newVal) {
                // 默认选中复选框
                this.$nextTick(() => {
                    this.selectCheckbox()
                })
                if (this.modalType == 'add') {
                    this.clear()
                }
            }
        }
    },
    mounted() {
        // 获取视频资源
        this.getVideoBtn()
    },
    methods: {
        selectCheckbox() {
            if (this.selectedArray.length > 0) {
                let list = []
                this.dataList.forEach((item) => {
                    this.selectedArray.forEach(val => {
                        if (val === item.idtCameraChannel) {
                            list.push(item)
                        }
                    })
                })
                if (list.length) {
                    list.forEach((row) => {
                        this.$refs.dataTable && this.$refs.dataTable.toggleRowSelection(row, true)
                    })
                }
            }
        },
        showAction() {
            this.showModal = true;
        },
        // 详情
        async getDataInfo(dataForm) {
            this.modalType == 'edit'
            this.dataFormCopy = dataForm;
            await this.getVideoBtn();
            let arr = [];
            let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
            if (attrValue.length > 0) {
                attrValue.map(val => {
                    let _obj = Object.assign({}, val, val.resource)
                    arr.push(_obj);
                });
            }
            // 展示
            this.displayList = JSON.parse(JSON.stringify(arr));
            // 已选中
            this.selectedArray = arr.map(v => v.idtCameraChannel);
            this.selectedArrayCopy = JSON.parse(JSON.stringify(arr));
            this.dataList = JSON.parse(JSON.stringify(arr));
            this.pageData.total = arr.length;
            // 默认选中复选框
            this.$nextTick(() => {
                this.selectCheckbox()
            })
        },
        // 点击复选框
        dataListSelectionChangeHandle(data) {
            this.selectedArray = data;
        },
        pageCurrentChangeHandle(pageNum) {
            this.searchData.pageNum = pageNum;
            this.getData()
        },
        pageSizeChangeHandle(pageSize) {
            this.searchData.pageSize = pageSize;
            this.getData()
        },
        changeBtn(btn) {
            this.activeBtn = btn;
            this.currentList = this.tabData.find(v => v.tabName == btn).list || [];
            this.checkList = [];
            this.searchData.cameraName = '';
            this.getData()
        },
        // 获取视频标签列表
        getVideoBtn() {
            return new Promise((resolve, reject) => {
                this.$http.get('/api/project/selectAllLabel', {}).then(res => {
                    resolve(res)
                    if (res.data.code !== 1) {
                        return this.$message.error(res.msg);
                    }
                    this.tabData[0].list = res.data.data || [];
                    this.$nextTick(() => {
                        this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || [];
                        if (this.modalType == 'add') {
                            this.clear()
                        }
                    })
                }).catch(err => {
                    reject(err)
                    this.$message.error(err);
                })
            })
        },
        // 视频-清空标签
        clearVideo() {
            this.checkList = []
            this.getData()
        },
        // 切换视频
        changeVideoBtn(item) {
            let _index = this.checkList.findIndex(v => item.labelCode == v)
            if (_index > -1) {
                this.checkList.splice(_index, 1)
            } else {
                this.checkList.push(item.labelCode)
            }
            this.$nextTick(() => {
                this.getData()
            })
        },
        // 获取列表
        getData() {
            let postData = Object.assign({}, {
                checkStatus: 1,
                gpsX: '',
                gpsY: '',
                radius: '',
                labelCodes: this.checkList.join(),
            }, this.searchData);
            return new Promise((resolve, reject) => {
                this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
                    resolve(res)
                    if (res.data.code !== 1) {
                        return this.$message.error(res.msg);
                    }
                    this.dataList = res.data.data || []
                    this.pageData.total = res.data.count || 0;
                }).catch(err => {
                    reject(err)
                    this.$message.error(err);
                })
            })
        },
        changeParentId(parentId) {
            this.searchData.parentId = parentId;
            this.getData(parentId)
        },
        clearSelectArray() {
            this.selectedArrayCopy = []
            this.selectedArray = []
            this.getData()
        },
        confirmSubmitHandle() {
            // 新选择的
            let idtCameraChannelArray = this.selectedArray.map(v => v.idtCameraChannel)
            // 选过的
            let newIdArray = this.selectedArrayCopy.map(v => v.idtCameraChannel)
            let idArray = [...new Set(newIdArray.concat(idtCameraChannelArray))]
            if (idArray.length > this.maxNum) {
                return this.$message.error('最多选择十条数据！');
            }
            let listArray = [].concat(this.selectedArrayCopy, this.dataList);
            this.displayList = [];
            idArray.map(v => {
                let obj = listArray.find(k => k.idtCameraChannel === v)
                if (obj) {
                    this.displayList.push({
                        channelName: obj.channelName
                    })
                }
            })
            this.$emit('update', {
                title: this.type,
                list: idArray,
            })
            this.showModal = false;
        },
        close() {
            this.showModal = false;
            this.searchData.cameraName = ''
            // this.selectedArray = [];
            this.$emit('closeModal');
        },
        clear() {
            this.changeBtn('视频资源')
        },
    }
 }
 </script>
 <style lang="scss" scoped>
 .ability-box {
    margin-bottom: 10px;
    .show-box {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .type {
        padding-right: 12px;
        font-size: 14px;
        color: #606266;
        width: 100px;
        box-sizing: border-box;
        text-align: right;
        line-height: 40px;
        height: 40px;
    }
    .list-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-left: 100px;
    }
    .list-item {
        font-size: 14px;
        color: #606266;
        width: 380px;
        text-align: left;
        margin-right: 10px;
        line-height: 40px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
 }
 .flex-row-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
 }
 ::v-deep .el-dialog {
    width: 70%;
 }
 .modal-box {
    .btn-list {
        margin-left: 10px;
        flex: 1;
    }
    .left-text {
        width: 90px;
        text-align: right;
    }
    .btn-text {
        height: 30px;
        line-height: 30px;
        // width: 80px;
        padding: 0 10px;
        text-align: center;
        border-radius: 15px;
        border: 1px solid #ccc;
        margin-right: 15px;
        cursor: pointer;
        box-sizing: border-box;
        margin-bottom: 10px;
        font-size: 12px;
        &:hover {
            color: #0058e1;
        }
    }
    .active-btn {
        background: #0058e1;
        color: #fff;
        border: none;
        border: 1px solid #0058e1;
        &:hover {
            color: #FFF;
        }
    }
    .video-btn-list {
        flex-wrap: wrap;
    }
 }
 .top {
    margin-bottom: 10px;
    .type {
        padding-right: 12px;
        font-size: 14px;
        color: #606266;
        width: 100px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: right;
        line-height: 40px;
        height: 40px;
    }
 }
 .tree-table-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
 }
 .table-box {
    width: calc(100% - 400px);
 }
 </style>
 <style lang="scss" scoped>
 ::v-deep .el-input {
    width: 200px;
 }
 .icon-input ::v-deep .el-input__inner {
    cursor: pointer;
 }
 ::v-deep .el-dialog__body {
    height: 580px;
    overflow: auto;
 }
 ::v-deep .el-checkbox-button__inner {
    width: 130px;
    margin: 0 10px 5px;
    border-left: unset !important;
    border-radius: unset !important;
    border: 1px solid #dcdfe6 !important;
 }
 .relate-application-content {
    height: 100%;
    ::v-deep .el-transfer {
        height: 100%;
    }
    ::v-deep .el-transfer-panel {
        width: 39.5%;
        height: 100%;
    }
    ::v-deep .el-transfer-panel__body {
        height: 100%;
    }
    ::v-deep .el-transfer-panel__list.is-filterable {
        height: calc(100% - 102px);
    }
 }
 </style>
--- a/back/src/views/modules/ability/assignedScene/components/infrastructure-tree.vue
+++ b/back/src/views/modules/ability/assignedScene/components/infrastructure-tree.vue
@ -0,0 +1,314 @@
 <template>
    <div class="wrapper">
        <div class="wrapper-title-left-tree" :key="showKey">
            <div v-for="item in treeData" :key="item.id" class="primaryNode">
                <div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
                    {{ item.name }}
                    ({{ item.channelCount }})
                    <i class="el-icon-arrow-down" v-show="!item.show"></i>
                    <i class="el-icon-arrow-top" v-show="item.show"></i>
                </div>
                <div class="bottom" v-show="item.show">
                    <div v-for="val in item.children" :key="val.id" class="item">
                        <div class="up" :class="selectId == val.id ? 'select' : ''"
                            @click="showDown(item, val), onSelect(item, val)">
                            <div>
                                <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2156" width="25px" height="25px"
                                    v-show="selectId == val.id">
                                    <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157"
                                        fill="#0058e1"></path>
                                </svg>
                                <span class="name">{{ val.name }}({{ val.channelCount }})</span>
                            </div>
                            <span v-if="item.children.length < 0">{{ val.total }}</span>
                            <span v-else>
                                <i class="el-icon-arrow-down" v-show="!val.show"></i>
                                <i class="el-icon-arrow-top" v-show="val.show"></i>
                            </span>
                        </div>
                        <div class="down" v-show="val.show">
                            <div v-for="child in val.children" :key="child.id" class="child"
                                :class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
                                <div>
                                    <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2156" width="25px" height="25px"
                                        v-show="selectId == child.id">
                                        <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157"
                                            fill="#0058e1"></path>
                                    </svg>
                                    <span class="name">
                                        {{ child.name }}
                                    </span>
                                </div>
                                <span>{{ child.channelCount }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </template>
 <script>
 export default {
    data() {
        return {
            selectedKeys: [],
            checkedKeys: [],
            showKey: 0,
            treeData: [],
            selectId: '',
            value: '',
        }
    },
    watch: {
        checkedKeys(val) {
            if (val.checked.length > 1) {
                val.checked.halfChecked = val.checked.shift()
            }
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        getCameraAllOrgan(params) {
            return new Promise((resolve, reject) => {
                this.$http.get('/api/project/selectSubOrganNew', { params }).then(res => {
                    resolve(res)
                }).catch(err => {
                    reject(err)
                })
            })
        },
        init() {
            this.treeData = []
            this.getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
                (res) => {
                    if (res.data.code !== 1) {
                        return this.$message.error(res.msg);
                    }
                    this.treeData = res.data.data
                }).catch(err => {
                    this.$message.error(err);
                })
        },
        onSelect(item, val, child) {
            this.$emit('changeParentId', val.id)
            this.getCameraAllOrgan({ parentId: val.id }).then((res) => {
                if (res.data.code !== 1) {
                    return this.$message.error(res.msg);
                }
                this.treeData.map((treeDataItem, index) => {
                    if (item.id == treeDataItem.id) {
                        this.treeData[index].children.map((childItem, childIndex) => {
                            if (childItem.id == val.id) {
                                this.treeData[index].children[childIndex].children =
                                    res.data.data;
                                this.$nextTick(() => {
                                    this.treeData = this.treeData.splice(0)
                                })
                            }
                        })
                    }
                })
            }).catch(err => {
                this.$message.error(err);
            })
            if (child) {
                this.selectId = child.id
            }
        },
        showBottom(item) {
            item.show = !item.show;
            this.getCameraAllOrgan({ parentId: item.id }).then((res) => {
                if (res.data.code !== 1) {
                    return this.$message.error(res.msg);
                }
                this.treeData.map((treeDataItem, index) => {
                    if (item.id == treeDataItem.id) {
                        this.treeData[index].children = res.data.data || []
                        this.$nextTick(() => {
                            this.treeData = this.treeData.splice(0)
                            console.log('this.treeData.[index]', this.treeData[index])
                        })
                    }
                })
            }).catch(err => {
                this.$message.error(err);
            })
        },
        showDown(item, val) {
            console.log('showDown', val)
            if (item.children) {
                val.show = !val.show
            }
        }
    },
 }
 </script>
 <style lang="scss" scoped>
 .wrapper {
    height: 500px;
    overflow-y: scroll;
    margin-right: 20px;
    width: 300px;
    .primaryNode {
        .top {
            width: 100%;
            height: 40px;
            background: rgba(0, 135, 225, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            margin-top: 8px;
        }
        .top:hover {
            cursor: pointer;
            // 0058e1 透明度 0.5
            background: rgba(0, 88, 225, 0.8);
            color: white;
            :deep(.anticon) {
                color: white;
            }
        }
        .topSelect {
            background: #0058e1;
            color: white;
            :deep(.anticon) {
                color: white;
            }
        }
        .bottom {
            width: 100%;
            background: rgba(244, 245, 248, 0.8);
            padding: 0 10px;
            .up {
                width: 100%;
                cursor: pointer;
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-top: 1px solid #ccc;
                padding: 0 10px;
                &>div {
                    display: flex;
                    justify-content: flex-start;
                }
                .name {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    word-break: break-all;
                }
            }
            .up:hover {
                .name {
                    color: #0058e1;
                    font-weight: 600;
                }
                span {
                    color: #0058e1;
                    font-weight: 600;
                }
            }
            .select {
                padding: 0 0.1rem 0 0;
                .name {
                    width: 190px;
                    color: #0058e1;
                    font-weight: 600;
                    text-align: left;
                }
                span {
                    color: #0058e1;
                    font-weight: 600;
                }
            }
            .item:nth-of-type(1) .up {
                border-top: none;
            }
            .down {
                width: 100%;
                .child {
                    cursor: pointer;
                    height: 40px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 10px;
                    &>div {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                    }
                    .name {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        word-break: break-all;
                    }
                }
                .child:hover {
                    .name {
                        color: #0058e1;
                        font-weight: 600;
                    }
                    span {
                        color: #0058e1;
                        font-weight: 600;
                    }
                }
                .select2 {
                    .name {
                        width: 190px;
                        color: #0058e1;
                        font-weight: 600;
                        text-align: left;
                    }
                    span {
                        color: #0058e1;
                        font-weight: 600;
                    }
                    padding: 0 10px 0 0;
                }
            }
        }
    }
 }
 </style>
--- a/back/src/views/modules/ability/assignedScene/components/scene-one-input.vue
+++ b/back/src/views/modules/ability/assignedScene/components/scene-one-input.vue
@ -0,0 +1,120 @@
 <template>
    <div class="question-box">
        <div class="title">
            {{ title }}
        </div>
        <div v-for="(item, index) in dataInfo" :key="index">
            <el-form-item :label="keyTextObj.descObj.text">
                <el-input type="textarea" :rows="2" v-model="item[keyTextObj.descObj.key]"
                    :placeholder="`请输入${keyTextObj.descObj.text}`" style="width:90%">
                </el-input>
                <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
                    v-if="dataInfo.length > 1">删除
                </el-button>
            </el-form-item>
            <el-button class="add-btn" size="small" v-if="index == dataInfo.length - 1" @click="addItem"
                type="primary">添加
            </el-button>
        </div>
    </div>
 </template>
 <script>
 export default {
    props: {
        dataForm: {
            type: Object,
            default: () => { }
        },
        title: {
            type: String,
            default: ''
        },
        keyTextObj: {
            type: Object,
            default: () => {
                return {
                    descObj: {
                        text: '描述',
                        key: 'description'
                    },
                }
            }
        }
    },
    data() {
        return {
            dataInfo: []
        }
    },
    watch: {
        dataInfo: {
            handler(newVal) {
                this.dataInfo = newVal;
                this.$emit('update', {
                    title: this.title,
                    list: newVal
                })
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        getDataInfo(dataForm) {
            let arr = []
            if (dataForm && (dataForm.id || dataForm.id === 0)) {
                let fuseAttrList = dataForm.fuseAttrList || [];
                let obj = fuseAttrList.find(v => v.attrType === this.title) || {}
                let attrValue = JSON.parse(obj.attrValue || "[]")
                if (attrValue.length > 0) {
                    attrValue.map(v => {
                        arr.push({
                            [this.keyTextObj.descObj.key]: v[this.keyTextObj.descObj.key],
                        })
                    })
                } else {
                    arr = []
                    arr.push({
                        [this.keyTextObj.descObj.key]: '',
                    })
                }
            } else {
                arr = []
                arr.push({
                    [this.keyTextObj.descObj.key]: '',
                })
            }
            this.dataInfo = arr;
        },
        // 新增
        addItem() {
            let index = this.dataInfo.length - 1;
            if (this.dataInfo[index][this.keyTextObj.descObj.key] === '') {
                return this.$message.warning('请填写完整信息！')
            }
            this.dataInfo.push({
                [this.keyTextObj.descObj.key]: '',
            })
        },
        // 删除
        deleteItem(list, index) {
            this.dataInfo.splice(index, 1)
        }
    }
 }
 </script>
 <style lang="scss" scoped>
 .question-box {
    .title {
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 10px;
    }
 }
 .add-btn {
    margin-top: -12px;
    margin-left: 100px;
 }
 </style>
--- a/back/src/views/modules/ability/assignedScene/components/scene-use-step.vue
+++ b/back/src/views/modules/ability/assignedScene/components/scene-use-step.vue
@ -0,0 +1,130 @@
 <template>
    <div class="question-box">
        <div class="title">
            能力使用步骤
        </div>
        <div v-for="(item, index) in dataInfo" :key="index">
            <el-form-item label="标题" prop="question">
                <el-input v-model="item.question" placeholder="请输入标题" style="width:90%" :disabled="disabledType">
                </el-input>
            </el-form-item>
            <el-form-item label="解释说明" prop="question">
                <el-input type="textarea" :rows="3" v-model="item.answer" placeholder="请输入解释说明" style="width:90%"
                    :disabled="disabledType">
                </el-input>
                <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
                    v-if="!disabledType && dataInfo.length > 1">删除
                </el-button>
            </el-form-item>
            <el-button class="add-btn" size="small"
                v-if="!disabledType && index == dataInfo.length - 1" @click="addItem" type="primary">添加
            </el-button>
        </div>
        <div class="step-box">
            <el-steps :active="2">
                <el-step status="finish" :title="item.question || `标题${index + 1}`" v-for="(item, index) in dataInfo"
                    :key="index">
                </el-step>
            </el-steps>
        </div>
    </div>
 </template>
 <script>
 export default {
    props: {
        dataForm: {
            type: Object,
            default: () => { }
        },
        // 是否可编辑
        disabledType: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            dataInfo: []
        }
    },
    watch: {
        dataInfo: {
            handler(newVal) {
                this.dataInfo = newVal;
                this.$emit('update', {
                    title: '使用步骤',
                    list: newVal
                })
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        getDataInfo(dataForm) {
            let arr = []
            let fuseAttrList = dataForm.fuseAttrList || [];
            let obj = fuseAttrList.find(v => v.attrType === '使用步骤') || {}
            let attrValue = JSON.parse(obj.attrValue || "[]")
            if (attrValue.length > 0) {
                attrValue.map(v => {
                    arr.push({
                        question: v.question,
                        answer: v.answer,
                    })
                })
            } else {
                arr = []
                arr.push({
                    question: "",
                    answer: "",
                })
            }
            this.dataInfo = arr;
        },
        // 新增
        addItem() {
            let index = this.dataInfo.length - 1;
            if (this.dataInfo[index].question === '' || this.dataInfo[index].answer === '') {
                return this.$message.warning('请填写完整信息！')
            }
            if (this.dataInfo.length >= 6) {
                return this.$message.warning('最多添加6个使用步骤！')
            }
            this.dataInfo.push({
                question: "",
                answer: "",
            })
        },
        // 删除
        deleteItem(list, index) {
            this.dataInfo.splice(index, 1)
        }
    }
 }
 </script>
 <style lang="scss" scoped>
 .question-box {
    margin-bottom: 20px;
    margin-top: 40px;
    .title {
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 10px;
    }
 }
 .step-box {
    padding: 20px 10px 10px 10px;
 }
 .add-btn {
    margin-top: -12px;
    margin-left: 100px;
 }
 </style>
--- a/back/src/views/modules/ability/assignedScene/index.vue
+++ b/back/src/views/modules/ability/assignedScene/index.vue
@ -0,0 +1,162 @@
 <template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-ability__bsabilityai">
      <el-form :inline="true" :model="dataForm">
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="searchData">{{
              $t("query")
          }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('ability:bsabilityai:save')" type="primary" @click="addServe()">挂接</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
        style="width: 100%" :height="qp ? '810px' : '650px'">
        <el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="description" label="描述" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="240" right="0">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('ability:bsabilityai:update')" type="text" size="small"
              @click="handleUpdate(scope.row)">{{ $t("update") }}</el-button>
            <el-button v-if="$hasPermission('ability:bsabilityai:delete')" type="text" size="small"
              @click="deleteRow(scope.row.id)">{{ $t("delete") }}</el-button>
            <el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="Number(total)"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-update-scene v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
        :addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
      </add-update-scene>
    </div>
  </el-card>
 </template>
 <script>
 import mixinViewModule from "@/mixins/view-module";
 import AddUpdateScene from "./add-update-scene";
 export default {
  mixins: [mixinViewModule],
  data() {
    return {
      tableData: [],
      childName: '',
      mixinViewModuleOptions: {
        getDataListURL: "/fuse/page",
        exportURL: "/ability/bsabilityai/export",
        deleteURL: "/fuse",
        getDataListIsPage: true,
        deleteIsBatch: false,
      },
      disabled: false,
      dataForm: {
        name: "",
        order: 'desc',
        orderField: 'create_date',
        type: '赋能场景'
      },
      qp: false,
      modalType: 'add',
    };
  },
  components: {
    AddUpdateScene,
  },
  mounted() {
    window.addEventListener("resize", this.a);
    this.fullScreen();
  },
  methods: {
    deleteRow(id) {
      this.$http.delete('/fuse/delete', {
        data: [id]
      }).then(res => {
        console.log('删除成功', res)
        if (res.data.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.$message({
          message: '删除成功',
          type: "success",
          duration: 500,
          onClose: () => {
            this.query()
          },
        });
      }).catch(err => {
        this.$message.error(err);
      })
    },
    // 查询
    searchData() {
      this.query()
    },
    // 重置
    reset() {
      this.dataForm.name = "";
      this.query()
    },
    // 修改
    handleUpdate(val) {
      this.addOrUpdateVisible = true;
      this.modalType = 'update';
      const cloneVal = JSON.parse(JSON.stringify(val))
      this.$nextTick(() => {
        this.$refs.addOrUpdate.getDetail(cloneVal)
      })
    },
    // 挂接
    addServe() {
      this.addOrUpdateVisible = true
      this.modalType = 'add';
    },
    closeModal() {
      this.addOrUpdateVisible = false;
    },
    // 详情
    showDetail(val) {
      window.open(window.SITE_CONFIG.previewUrl + '#/integrationServicesDetails?id=' + val.id)
    },
    fullScreen() {
      if (window.outerHeight === screen.availHeight) {
        if (window.outerWidth === screen.availWidth) {
          console.log(
            "全屏1",
          );
          this.qp = false;
        } else {
          console.log(
            "不是全屏2",
          );
          this.qp = true;
        }
      } else {
        console.log(
          "不是全屏3",
        );
        this.qp = true;
      }
    },
  },
 };
 </script>
 <style lang="scss" scoped>
 .el-tooltip__popper {
  max-width: 50%;
 }
 </style>
--- a/back/src/views/modules/ability/bsabilityai-relate-application.vue
+++ b/back/src/views/modules/ability/bsabilityai-relate-application.vue
@ -0,0 +1,134 @@
 <template>
  <div>
    <el-dialog
      :visible.sync="visible"
      title="关联应用"
      @close="close"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :key="showKey"
    >
      <div class="relate-application-content">
        <el-transfer
          v-model="transferValue"
          filterable
          :filter-method="filterMethod"
          filter-placeholder="请输入应用名称"
          :titles="nameArray"
          :props="{
            key: 'id',
            label: 'name',
          }"
          :data="transferData"
        ></el-transfer>
      </div>
      <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="confirmSubmitHandle()">{{
          $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
  </div>
 </template>
 <script>
 import debounce from "lodash/debounce";
 export default {
  components: {},
  data() {
    return {
      showKey: 0,
      visible: true,
      transferData: [], //穿梭框所有数据
      transferValue: [], //已关联的数据id
    };
  },
  props: {
    relateInfo: {
      type: Object,
      default: {},
    },
    nameArray: {
      type: Array,
      default: ["未关联应用名称", "已关联应用名称"],
    },
  },
  computed: {},
  methods: {
    close() {
      this.$emit("isShowRelatePopup", false);
    },
    // 表单提交
    confirmSubmitHandle: debounce(
      function () {
        this.$http
          .post("/dataResourceRel/saveDataResourceRel", {
            linkType: this.relateInfo.linkType || 2,
            id: this.relateInfo.id,
            referenceIds: this.transferValue,
          })
          .then(({ data: res }) => {
            if (res.code == 0) {
              this.$message.success("关联成功！");
            } else {
              this.$message.error("关联失败，请联系管理员！");
            }
            this.$emit("isShowRelatePopup", false);
          })
          .catch(() => {});
      },
      1000,
      { leading: true, trailing: false }
    ),
    filterMethod(query, item) {
      return item.name && item.name.indexOf(query) > -1;
    },
  },
  mounted() {
    if (this.relateInfo && this.relateInfo.responseData) {
      const alreadLinkedArr = this.relateInfo.responseData.alreadLinked || [];
      this.transferData = alreadLinkedArr.concat(
        this.relateInfo.responseData.notLinked || []
      );
      alreadLinkedArr.length &&
        alreadLinkedArr.forEach((item) => {
          this.transferValue.push(item.id);
        });
    }
  },
 };
 </script>
 <style lang="scss" scoped>
 .icon-input ::v-deep .el-input__inner {
  cursor: pointer;
 }
 ::v-deep .el-dialog__body {
  height: 580px;
  overflow: auto;
 }
 ::v-deep .el-checkbox-button__inner {
  width: 130px;
  margin: 0 10px 5px;
  border-left: unset !important;
  border-radius: unset !important;
  border: 1px solid #dcdfe6 !important;
 }
 .relate-application-content {
  height: 100%;
  ::v-deep .el-transfer {
    height: 100%;
  }
  ::v-deep .el-transfer-panel {
    width: 39.5%;
    height: 100%;
  }
  ::v-deep .el-transfer-panel__body {
    height: 100%;
  }
  ::v-deep .el-transfer-panel__list.is-filterable {
    height: calc(100% - 102px);
  }
 }
 </style>
--- a/back/src/views/modules/ability/bsabilityai.vue
+++ b/back/src/views/modules/ability/bsabilityai.vue
--- a/back/src/views/modules/ability/bsabilityimport.vue
+++ b/back/src/views/modules/ability/bsabilityimport.vue
@ -0,0 +1,128 @@
 <!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-20 10:38:17
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-20 11:33:13
 * @Description: 告诉大家这是什么
 -->
 <template>
    <div class="bsabilityimport">
      <div class="item" @click="downloadTemplate()">
        <svg t="1655692930310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1593" width="200" height="200"><path d="M599.13 0.476L33.55 109.306a20.778 20.778 0 0 0-16.492 20.42v764.308a20.778 20.778 0 0 0 16.372 20.48l565.58 108.83a20.837 20.837 0 0 0 3.81 0.654 19.29 19.29 0 0 0 12.622-4.465 21.313 21.313 0 0 0 7.56-16.015V20.361a21.313 21.313 0 0 0-7.56-16.074 19.23 19.23 0 0 0-16.313-3.81z m-206.11 696.08l-46.14-83.348c-10.597-18.575-20.241-37.864-32.148-59.951h-2.203c-10.538 21.67-20.004 40.305-29.767 58.344l-43.937 76.323-87.278-5 115.557-175.985L158.454 342.8l91.147-5.953 41.317 70.608c9.466 16.55 18.337 33.697 30.541 55.784h2.798c9.824-22.683 18.159-40.543 27.03-58.404l38.935-77.395 86.683-5.953-108.592 188.249L483.93 701.915zM966.519 122.76H663.487v143.36h40.364v40.96h-40.364v102.4h40.364v40.96h-40.364V552.9h40.364v40.96h-40.364v122.939h40.364v40.96h-40.364v143.419h302.972a40.781 40.781 0 0 0 40.424-40.96V163.72a40.781 40.781 0 0 0-40.364-40.96zM905.912 757.7H744.275v-40.96h161.637z m0-163.9H744.275v-40.9h161.637z m0-143.418H744.275v-40.9h161.637z m0-143.42H744.275v-40.84h161.637z" fill="#1296db" p-id="1594"></path></svg>
        <span>下载模板</span>
        </div>
            <el-upload
            ref="addUpload"
              class="item"
            :action="fileUploadUrl"
            :on-success="onSuccess"
            :on-remove="onRemove"
            :show-file-list='false'
            :on-error="onErrorFile"
            :on-exceed='onExceed'
            :limit='1'
            :on-preview="onPreview"
            list-type="text"
          >
          <svg t="1655692986683" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2083" width="200" height="200"><path d="M192 256v29h9.9c-6.5-9.3-9.9-19-9.9-29z m384 128c-41.9 0-82.3-2.2-120-6.4L590.2 512 467.5 634.8c34.4 3.4 70.8 5.2 108.5 5.2 212.1 0 384-57.3 384-128V256c0 70.7-171.9 128-384 128z m-263.9-99h51.3l17.2 17.2c57.2 11.3 124 17.8 195.4 17.8 212.1 0 384-57.3 384-128S788.1 64 576 64s-384 57.3-384 128c0 36.6 46.2 69.7 120.1 93zM576 704c-59.1 0-115.2-4.5-165.2-12.4L363.4 739H192v93c0 70.7 171.9 128 384 128s384-57.3 384-128V576c0 70.7-171.9 128-384 128z" fill="#E6C27C" p-id="2084"></path><path d="M336.9 349H198.6l98.9 98.9H64v128.2h233.5L198.6 675h138.3l162.9-163z" fill="#497CAD" p-id="2085"></path></svg>
          <div>导入数据</div>
        </el-upload>
    </div>
 </template>
 <script>
 import Cookies from 'js-cookie'
 export default {
  name: '',
  components: {
  },
  props: {
  },
  data () {
    return {
      fileUploadUrl: window.SITE_CONFIG.apiURL + '/resource//importResource?token=' + Cookies.get('ucsToken')
    }
  },
  methods: {
    downloadTemplate () {
      window.open(window.SITE_CONFIG.apiURL + '/%E8%83%BD%E5%8A%9B%E8%B5%84%E6%BA%90%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx?token=' + Cookies.get('ucsToken'))
    },
    onSuccess (res, file) {
      this.$message({
        message: '导入成功',
        type: 'success'
      })
      this.$refs.addUpload.clearFiles()
    },
    onErrorFile () {
      this.$message('导入失败！')
      this.$refs.addUpload.clearFiles() // 去掉文件列表
    },
    onRemove (file, fileList) {
      console.log(file, fileList)
    },
    onPreview (file) {
      console.log('点击预览===============>', file)
      window.open(file.response.data)
    },
    onExceed (files, fileList) {
      this.$message.warning('当前附件数量已达上限，请先删除部分附件！')
    }
  }
 }
 </script>
 <style lang='scss' scoped>
 .bsabilityimport {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 250px 300px;
  .item {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0);
    span {
      font-size: 20px;
      font-weight: 600;
      margin-top: 20px;
    }
    div {
      font-size: 20px;
      font-weight: 600;
      margin-top: 20px;
    }
  }
  .item:hover {
    cursor: pointer;
    border: 1px solid #1296db;
    border-radius: 10px;
    svg {
      animation: turn 2s linear infinite;
      animation-iteration-count: 1;
    }
  }
 }
@keyframes turn {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  25% {
    -webkit-transform: rotateY(90deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
  }
  75% {
    -webkit-transform: rotateY(270deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
  }
 }
 </style>
--- a/back/src/views/modules/ability/bsabilityservice-add-or-update.vue
+++ b/back/src/views/modules/ability/bsabilityservice-add-or-update.vue
@ -10,9 +10,27 @@
      <!-- 挂载和修改-->
      <div key="1" v-if="!disabled">
        <!-- 挂载-->
-        <div style="text-align:center;font-weight: 600;font-size: 18px;margin-bottom: 10px;">填写字段</div>
+        <div
-        <el-checkbox-group v-model="checkList" @change="showListChagne" style="margin-bottom:20px;">
+          style="
-          <el-checkbox-button v-for="item in dataForm.showListAll" :label="item.name" :key="item.id">{{item.name}}</el-checkbox-button>
+            text-align: center;
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 10px;
          "
        >
          填写字段
        </div>
        <el-checkbox-group
          v-model="checkList"
          @change="showListChagne"
          style="margin-bottom: 20px"
        >
          <el-checkbox-button
            v-for="item in dataForm.showListAll"
            :label="item.name"
            :key="item.id"
            >{{ item.name }}</el-checkbox-button
          >
        </el-checkbox-group>
        <el-form
          v-if="!UpdateState"
@ -22,19 +40,40 @@
          @keyup.enter.native="dataFormSubmitHandle()"
          :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
        >
-          <div v-show="checkList.indexOf('必填信息')>-1">
+          <div v-show="checkList.indexOf('必填信息') > -1">
-            <div style="text-align:center;font-weight: 600;font-size: 18px;margin-bottom: 10px;">必填信息</div>
+            <div
              style="
                text-align: center;
                font-weight: 600;
                font-size: 18px;
                margin-bottom: 10px;
              "
            >
              必填信息
            </div>
            <el-form-item label="应用名称" prop="name">
-              <el-input v-model="dataForm.name" placeholder="请输入组件名称" ></el-input>
+              <el-input
                v-model="dataForm.name"
                placeholder="请输入组件名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="应用描述" prop="description">
-              <el-input v-model="dataForm.description" placeholder="请输入组件描述" ></el-input>
+              <el-input
                v-model="dataForm.description"
                placeholder="请输入组件描述"
              ></el-input>
            </el-form-item>
            <el-form-item label="部门联系人" prop="deptContacts">
-              <el-input v-model="dataForm.deptContacts" placeholder="请输入部门联系人" ></el-input>
+              <el-input
                v-model="dataForm.deptContacts"
                placeholder="请输入部门联系人"
              ></el-input>
            </el-form-item>
            <el-form-item label="部门联系人电话" prop="deptPhone">
-              <el-input v-model="dataForm.deptPhone" placeholder="请输入部门联系人电话" ></el-input>
+              <el-input
                v-model="dataForm.deptPhone"
                placeholder="请输入部门联系人电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="共享条件" prop="shareCondition">
              <el-select
@ -50,7 +89,8 @@
                </el-option>
              </el-select>
            </el-form-item>
-            <el-form-item label="共享类型" prop="shareType"><el-select
+            <el-form-item label="共享类型" prop="shareType"
              ><el-select
                v-model="dataForm.shareType"
                placeholder="请选择共享类型"
              >
@ -64,16 +104,47 @@
              </el-select>
            </el-form-item>
            <el-form-item label="共享方式" prop="shareMode">
-              <el-input v-model="dataForm.shareMode" placeholder="请输入共享方式" ></el-input>
+              <el-input
                v-model="dataForm.shareMode"
                placeholder="请输入共享方式"
              ></el-input>
            </el-form-item>
          </div>
-          <div v-for="item in dataForm.showList" :key="item.id" v-show="item.name !== '必填信息'">
+          <div
-            <div style="text-align:center;font-weight: 600;font-size: 18px;margin-bottom: 10px;">{{item.name}}</div>
+            v-for="item in dataForm.showList"
-            <el-form-item :label="child.name" v-for="child in item.children" :key="child.id" v-show="item.children">
+            :key="item.id"
-              <el-input v-model="child.note1" :placeholder="'请输入'+child.name" v-if="child.type=='input'"></el-input>
+            v-show="item.name !== '必填信息'"
-              <el-input v-model="child.note1" :placeholder="'请输入'+child.name" type="textarea" :rows="2" v-if="child.type=='textArea'"></el-input>
+          >
            <div
              style="
                text-align: center;
                font-weight: 600;
                font-size: 18px;
                margin-bottom: 10px;
              "
            >
              {{ item.name }}
            </div>
            <el-form-item
              :label="child.name"
              v-for="child in item.children"
              :key="child.id"
              v-show="item.children"
            >
              <el-input
                v-model="child.note1"
                :placeholder="'请输入' + child.name"
                v-if="child.type == 'input'"
              ></el-input>
              <el-input
                v-model="child.note1"
                :placeholder="'请输入' + child.name"
                type="textarea"
                :rows="2"
                v-if="child.type == 'textArea'"
              ></el-input>
              <el-select
-                v-else-if="child.type=='select'"
+                v-else-if="child.type == 'select'"
                v-model="child.note1"
                :placeholder="'请选择' + child.name"
              >
@ -85,9 +156,24 @@
                >
                </el-option>
              </el-select>
-              <upload v-else-if="child.type=='images'" :child='child' limit='5' accept='.jpg,.png'></upload>
+              <upload
-              <upload v-else-if="child.type=='image'" :child='child' limit='1' accept='.jpg,.png'></upload>
+                v-else-if="child.type == 'images'"
-              <upload v-else-if="child.type=='video'" :child='child' limit='1' accept='.mp4'></upload>
+                :child="child"
                limit="5"
                accept=".jpg,.png"
              ></upload>
              <upload
                v-else-if="child.type == 'image'"
                :child="child"
                limit="1"
                accept=".jpg,.png"
              ></upload>
              <upload
                v-else-if="child.type == 'video'"
                :child="child"
                limit="1"
                accept=".mp4"
              ></upload>
            </el-form-item>
          </div>
        </el-form>
@ -184,9 +270,8 @@
              :placeholder="item.attrType"
              v-if="
                item.attrType != '应用领域' &&
-                  item.attrType != '应用类型' &&
+                item.attrType != '应用类型' &&
-                  item.attrType != '发布端' &&
+                item.attrType != '发布端'
                  item.attrType != '应用状态'
              "
            ></el-input>
            <el-select
@ -828,10 +913,10 @@ export default {
          console.log('表单数据=======================》', this.dataForm)
          if (!this.UpdateState) {
            this.dataForm.infoList = []
-            this.dataForm.showListAll.forEach(val => {
+            this.dataForm.showListAll.forEach((val) => {
              if (val.name !== '必填信息') {
                if (val.name === '服务接口信息') {
-                  val.children.forEach(item => {
+                  val.children.forEach((item) => {
                    if (item.name === '服务接口') {
                      this.dataForm.apiUrl = item.note1
                    }
@ -843,7 +928,7 @@ export default {
                    }
                  })
                } else {
-                  val.children.forEach(item => {
+                  val.children.forEach((item) => {
                    this.dataForm.infoList.push({
                      attrType: item.name,
                      attrValue: item.note1,
@ -895,8 +980,15 @@ export default {
      { leading: true, trailing: false }
    ),
    showListChagne () {
-      this.dataForm.showList = this.dataForm.showListAll.filter(item => this.checkList.indexOf(item.name) > -1)
+      this.dataForm.showList = this.dataForm.showListAll.filter(
-      console.log('属性变更===================>', this.checkList, this.dataForm.showList, this.dataForm.showListAll)
+        (item) => this.checkList.indexOf(item.name) > -1
      )
      console.log(
        '属性变更===================>',
        this.checkList,
        this.dataForm.showList,
        this.dataForm.showListAll
      )
    }
  },
  mounted () {
--- a/back/src/views/modules/ability/bsabilityservice.vue
+++ b/back/src/views/modules/ability/bsabilityservice.vue
@ -1,10 +1,7 @@
 <template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-ability__bsabilityai">
-      <el-form
+      <el-form :inline="true" :model="dataForm">
        :inline="true"
        :model="dataForm"
      >
        <el-form-item>
          <el-input
            v-model="dataForm.name"
@ -13,20 +10,29 @@
          ></el-input>
        </el-form-item>
        <el-form-item>
-          <el-button @click="getDataList2(dataForm.name)">{{ $t("query") }}</el-button>
+          <el-button @click="getDataList2(dataForm.name)">{{
            $t("query")
          }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{
            $t("export")
          }}</el-button>
        </el-form-item>
-        <el-form-item>
+        <!-- <el-form-item>
          <el-button
            v-if="$hasPermission('ability:bsabilityai:save')"
            type="primary"
            @click="addOrUpdateHandleServe()"
            >挂接</el-button
          >
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            @click="showPutOnTheShelf()"
            >上架</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
@ -36,7 +42,7 @@
            >{{ $t("deleteBatch") }}</el-button
          >
        </el-form-item>
-                <el-form-item>
+        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
@ -45,8 +51,8 @@
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
-        style="width: 100%;"
+        style="width: 100%"
-        :height="qp ? '810px' : '650px'"
+        height="650px"
      >
        <el-table-column
          type="selection"
@ -55,40 +61,81 @@
          width="50"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          width="280"
          prop="name"
          label="应用名称"
          header-align="center"
          align="center"
        ></el-table-column>
-
+        <af-table-column
-        <el-table-column
+          :show-overflow-tooltip="true"
-          v-for="(item, index) in dataList[0].infoList"
+          width="280"
-          :key="index"
+          prop="description"
-          :label="item.attrType"
+          label="应用描述"
          header-align="center"
          align="center"
-          show-overflow-tooltip="true"
+        ></af-table-column>
-        >
+        <af-table-column
-          <template slot-scope="scope">
+          :show-overflow-tooltip="true"
-            {{
+          width="280"
-               findValue(scope.row.infoList, item.attrType)
+          prop="deptName"
-            }}
+          label="归属部门"
-          </template>
+          header-align="center"
-        </el-table-column>
+          align="center"
        ></af-table-column>
        <af-table-column
          :show-overflow-tooltip="true"
          width="280"
          prop="deptContacts"
          label="部门联系人"
          header-align="center"
          align="center"
        ></af-table-column>
        <af-table-column
          :show-overflow-tooltip="true"
          width="280"
          prop="deptPhone"
          label="部门联系人电话"
          header-align="center"
          align="center"
        ></af-table-column>
        <af-table-column
          :show-overflow-tooltip="true"
          width="280"
          prop="shareCondition"
          label="共享条件"
          header-align="center"
          align="center"
        ></af-table-column>
        <template v-if="dataList[0] && dataList[0].infoList2">
          <el-table-column
            v-for="(item, index) in dataList[0].infoList2"
            :key="index"
            :label="item.attrType"
            header-align="center"
            align="center"
            :show-overflow-tooltip="true"
            width="280"
          >
            <template slot-scope="scope">
              {{ findValue(scope.row.infoList2, item.attrType) }}
            </template>
          </el-table-column>
        </template>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
-          width="94"
+          width="300"
          right="0"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPermission('ability:bsabilityai:update')"
              type="text"
              size="small"
-              @click="UpdateHandle(scope.row)"
+              @click="UpdateData(scope.row)"
              >{{ $t("update") }}</el-button
            >
            <el-button
@ -99,9 +146,35 @@
              >{{ $t("delete") }}</el-button
            >
            <el-button type="text" size="small" @click="showDetail(scope.row)"
-              >展示</el-button
+              >详情</el-button
            >
            <el-button type="text" size="small" @click="showDocument(scope.row)"
              >技术文档</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="applyAndAssembly(scope.row)"
              >应用与组件</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="applyAndDataResource(scope.row)"
              >应用与数据资源</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="applyAndProject(scope.row)"
              >应用与项目</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="applyAndInfrastructure(scope.row)"
              >应用与基础设施</el-button
            >
            <el-button type="text" size="small" @click="showDocument(scope.row)">开发文档</el-button>
          </template>
        </el-table-column>
      </el-table>
@ -122,7 +195,28 @@
        ref="addOrUpdate"
        @refreshDataList="getDataList"
      ></add-or-update>
      <relate-application
        v-if="relateApplicationResourceVisible"
        ref="relateApplication"
        :relateInfo="relationData"
        :nameArray="topNameArray"
        @isShowRelatePopup="handleIsShowRelatePopupApply"
      ></relate-application>
    </div>
     <el-dialog
      :title="submitFrom.id?'修改'+radio:'上架'+radio"
      :visible.sync="showPutOnTheShelfFlag2"
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :destroy-on-close='true'
      :before-close='clear'
      width="50%">
      <putOnTheShelf :required="required" :notFilled="notFilled":putOnTheShelfList='putOnTheShelfList' @changeInfoList='changeInfoList' :type='radio' :typeInput='typeInput'></putOnTheShelf>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clear">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
 </template>
@ -130,12 +224,17 @@
 import mixinViewModule from '@/mixins/view-module'
 import AddOrUpdate from './bsabilityservice-add-or-update'
 import dictionaries from '@/utils/dictionaries'
 import RelateApplication from './bsabilityai-relate-application.vue'
 import qs from 'qs'
 import { type } from 'os'
 import putOnTheShelf from '@/views/modules/putOnTheShelf'
 export default {
  mixins: [mixinViewModule],
  data () {
    return {
      required: ['归属部门', '部门联系人', '部门联系人电话', '应用领域', '共享条件', '应用名称', '应用描述', '应用类型'],
      notFilled: [],
      mixinViewModuleOptions: {
        getDataListURL: '/resource/page',
        getDataListIsPage: true,
@ -154,70 +253,115 @@ export default {
        delFlag: 0,
        type: '应用资源'
      },
-      qp: false
+      qp: false,
      relateApplicationResourceVisible: false,
      relationData: {}, // 打开穿梭框时传递的参数
      topNameArray: [], //
      radio: '应用资源',
      insertList: [],
      putOnTheShelfList: [],
      showPutOnTheShelfFlag2: false,
      submitFrom: {
        type: '应用资源',
        deptId: '',
        delFlag: 0,
        infoList: [
          // {
          //   attrType: '组件类型',
          //   attrValue: '',
          //   delFlag: 0
          // }
        ]
      },
      typeInput: '应用资源'
    }
  },
  watch: {},
  components: {
-    AddOrUpdate
+    AddOrUpdate,
    RelateApplication,
    putOnTheShelf
  },
  created () {
    this.dataForm.name = ''
    this.dataForm.type = '应用资源'
  },
  mounted () {
-    window.addEventListener('resize', this.a)
+    // window.addEventListener('resize', this.a)
-    this.fullScreen()
+    // this.fullScreen()
  },
  methods: {
    reset () {
-      this.$http.get(
+      this.$http
-        this.mixinViewModuleOptions.getDataListURL + '?' + qs.stringify({
+        .get(
-          // order: this.order,
+          this.mixinViewModuleOptions.getDataListURL +
-          // orderField: this.orderField,
+            '?' +
-          // type: '组件服务',
+            qs.stringify({
-          page: 1,
+              // order: this.order,
-          selectType: 0,
+              // orderField: this.orderField,
-          limit: 10,
+              // type: '组件服务',
-          delFlag: 0,
+              page: 1,
-          creator: '',
+              selectType: 0,
-          type: '应用资源',
+              limit: 10,
-          name: ''
+              delFlag: 0,
              creator: '',
              type: '应用资源',
              name: ''
            })
        )
        .then(({ data: res }) => {
          this.dataForm.name = ''
          if (res.code !== 0) {
            this.dataList = []
            this.total = 0
            return this.$message.error(res.msg)
          }
          this.dataList = this.mixinViewModuleOptions.getDataListIsPage
            ? res.data.list
            : res.data
          this.total = this.mixinViewModuleOptions.getDataListIsPage
            ? res.data.total
            : 0
          if (this.mixinViewModuleOptions.requestCallback) {
            this.mixinViewModuleOptions.requestCallback(res.data)
          }
          this.dataListLoading = false
          this.dataList.map((item, index) => {
            const dataListSinforList = []
            item.infoList.map((itemson, indexson) => {
              if (
                itemson.attrType === '应用领域'
              ) {
                dataListSinforList.push(itemson)
              }
            })
            this.dataList[index].infoList2 = dataListSinforList
          })
        })
        .catch(() => {
          this.dataListLoading = false
        })
      ).then(({ data: res }) => {
        this.dataForm.name = ''
        if (res.code !== 0) {
          this.dataList = []
          this.total = 0
          return this.$message.error(res.msg)
        }
        this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
        this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
        if (this.mixinViewModuleOptions.requestCallback) {
          this.mixinViewModuleOptions.requestCallback(res.data)
        }
        this.dataListLoading = false
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    showDetail (val) {
-      this.addOrUpdateVisible = true
+      window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + val.id)
-      this.disabled = false
+      // this.addOrUpdateVisible = true
-      this.$nextTick(() => {
+      // this.disabled = false
-        this.$refs.addOrUpdate.UpdateState = false
+      // this.$nextTick(() => {
-        this.$refs.addOrUpdate.dataFormShowDetails = val
+      //   this.$refs.addOrUpdate.UpdateState = false
-        this.$refs.addOrUpdate.init()
+      //   this.$refs.addOrUpdate.dataFormShowDetails = val
-      })
+      //   this.$refs.addOrUpdate.init()
-      this.disabled = true
+      // })
      // this.disabled = true
    },
    showDocument (val) {
      console.log(val)
-      window.open(window.SITE_CONFIG.frontUrl + '?id=' + val.id + '&&type=' + val.type, '_blank')
+      window.open(
        window.SITE_CONFIG.frontUrl + '?id=' + val.id + '&&type=' + val.type,
        '_blank'
      )
    },
    findValue (list, type) {
-      const found = list.find(item => item.attrType === type)
+      const found = list.find((item) => item.attrType === type)
      if (found) {
        return found.attrValue
      } else {
@ -226,20 +370,23 @@ export default {
    },
    getDataList2 (names) {
      if (names != null) {
-        this.$http.get(
+        this.$http
-          this.mixinViewModuleOptions.getDataListURL + '?' + qs.stringify({
+          .get(
-          // order: this.order,
+            this.mixinViewModuleOptions.getDataListURL +
-          // orderField: this.orderField,
+              '?' +
-          // type: '组件服务',
+              qs.stringify({
-            pageNum: 1,
+                // order: this.order,
-            pageSize: this.limit,
+                // orderField: this.orderField,
-            type: '应用资源',
+                // type: '组件服务',
-            creator: '',
+                pageNum: 1,
-            selectType: 0,
+                pageSize: this.limit,
-            delFlag: 0,
+                type: '应用资源',
-            name: names
+                creator: '',
-          })
+                selectType: 0,
-        )
+                delFlag: 0,
                name: names
              })
          )
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.dataList = []
@ -248,53 +395,442 @@ export default {
            }
            if (res.data.list.length !== 0) {
              this.dataList = res.data.list
-              this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
+              this.total = this.mixinViewModuleOptions.getDataListIsPage
                ? res.data.total
                : 0
              if (this.mixinViewModuleOptions.requestCallback) {
                this.mixinViewModuleOptions.requestCallback(res.data)
              }
              this.dataListLoading = false
              this.dataList.map((item, index) => {
                const dataListSinforList = []
                item.infoList.map((itemson, indexson) => {
                  if (
                    itemson.attrType === '应用领域'
                  ) {
                    dataListSinforList.push(itemson)
                  }
                })
                this.dataList[index].infoList2 = dataListSinforList
              })
            } else {
              this.$message.error('未查询到相关信息')
              this.reset()
            }
-          }).catch(() => {
+          })
          .catch(() => {
            this.dataListLoading = false
          })
      } else {
        this.$message.error('查询不能输入为空')
      }
    },
-    fullScreen () {
+    // fullScreen () {
-      if (window.outerHeight === screen.availHeight) {
+    //   if (window.outerHeight === screen.availHeight) {
-        if (window.outerWidth === screen.availWidth) {
+    //     if (window.outerWidth === screen.availWidth) {
-          console.log(
+    //       console.log(
-            '全屏1',
+    //         '全屏1',
-            window.outerHeight,
+    //         window.outerHeight,
-            screen.availHeight,
+    //         screen.availHeight,
-            window.outerWidth,
+    //         window.outerWidth,
-            screen.availWidth
+    //         screen.availWidth
-          )
+    //       )
-          this.qp = false
+    //       this.qp = false
-        } else {
+    //     } else {
-          console.log(
+    //       console.log(
-            '不是全屏2',
+    //         '不是全屏2',
-            window.outerHeight,
+    //         window.outerHeight,
-            screen.availHeight,
+    //         screen.availHeight,
-            window.outerWidth,
+    //         window.outerWidth,
-            screen.availWidth
+    //         screen.availWidth
-          )
+    //       )
-          this.qp = true
+    //       this.qp = true
-        }
+    //     }
-      } else {
+    //   } else {
-        console.log(
+    //     console.log(
-          '不是全屏3',
+    //       '不是全屏3',
-          window.outerHeight,
+    //       window.outerHeight,
-          screen.availHeight,
+    //       screen.availHeight,
-          window.outerWidth,
+    //       window.outerWidth,
-          screen.availWidth
+    //       screen.availWidth
-        )
+    //     )
-        this.qp = true
+    //     this.qp = true
    //   }
    // },
    // 应用与组件
    applyAndAssembly (val) {
      console.log('vvvv', val)
      // 根据id和类型查询已关联的组件，将id,type和查出来的数据传递给组件
      const type = '组件服务'
      const id = val.id
      this.$http
        .get('/dataResourceRel/queryResourceRelByKeyId', {
          params: {
            keyId: id,
            type: type,
            referenceName: ''
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          console.log('rrrrressssz', res.data)
          this.relateApplicationResourceVisible = true
          this.relationData = {
            id: id,
            linkType: '1',
            responseData: res.data
          }
          this.topNameArray = ['未关联组件名称', '已关联组件名称']
          console.log(' this.relationData', this.relationData)
          // 将数据传递给引入的组件
        })
    },
    // 应用与数据资源
    applyAndDataResource (val) {
      console.log('数据资源')
    },
    // 应用与项目
    applyAndProject (val) {
      const type = '项目'
      const id = val.id
      this.$http
        .get('/dataResourceRel/queryResourceRelByKeyId', {
          params: {
            keyId: id,
            type: type,
            referenceName: ''
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          console.log('rrrrressssx', res.data)
          this.relateApplicationResourceVisible = true
          this.relationData = {
            id: id,
            linkType: '1',
            responseData: res.data
          }
          this.topNameArray = ['未关联项目名称', '已关联项目名称']
          // 将数据传递给引入的组件
        })
    },
    // 应用与基础设施
    applyAndInfrastructure (val) {
      const type = '基础设施'
      const id = val.id
      this.$http
        .get('/dataResourceRel/queryResourceRelByKeyId', {
          params: {
            keyId: id,
            type: type,
            referenceName: ''
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          console.log('rrrrressssj', res.data)
          this.relateApplicationResourceVisible = true
          this.relationData = {
            id: id,
            linkType: '1',
            responseData: res.data
          }
          this.topNameArray = ['未关联基础设施名称', '已关联基础设施名称']
          // 将数据传递给引入的组件
        })
    },
    // 是否展示关联应用弹窗
    handleIsShowRelatePopupApply (type) {
      this.relateApplicationResourceVisible = type
    },
    // 新上架
    clear () {
      this.notFilled = []
      this.showPutOnTheShelfFlag2 = false
      this.insertList = []
      this.putOnTheShelfList = []
      this.radio = '应用资源'
      this.submitFrom = {
        type: '应用资源',
        deptId: '',
        delFlag: 0,
        infoList: [
          // {
          //   attrType: '组件类型',
          //   attrValue: '',
          //   delFlag: 0
          // }
        ]
      }
      this.reset()
    },
    // 上架
    showPutOnTheShelf () {
      this.showPutOnTheShelfFlag2 = true
      this.$http.get('/category/getCategoryTree').then(res => {
        this.insertList = res.data.data.filter(item => item.name === '应用资源一')[0]
        console.log(this.insertList, this, this.radio, 'hhhhhhhhhhh')
        this.putOnTheShelfList = this.insertList.children
      })
    },
    changeInfoList (obj) {
      this.submitFrom.infoList = this.submitFrom.infoList.filter((item) => item.attrType !== obj.attrType)
      this.submitFrom.infoList.push(obj)
    },
    submitData () {
      const arr = []
      this.putOnTheShelfList.map(item => {
        item.children.map(child => {
          if (child.children) {
            if (child.name === '算法优势' || child.name === '应用场景' || child.name === '功能介绍') {
              arr.push(child.name)
              if (this.submitFrom.infoList.filter(value => value.attrType === child.name).length === 0) {
                this.submitFrom.infoList.push({
                  attrType: child.name,
                  attrValue: child.note1,
                  delFlag: 0
                })
              }
            }
            child.children.map(val => {
              arr.push(val.name)
              if (val.type === 'input' || val.type === 'textArea' || val.type === 'select' || val.type === 'checkBox' || val.type === 'radio') {
                this.submitFrom.infoList = this.submitFrom.infoList.filter((item) => item.attrType !== val.name)
              }
              if (val.note1 || val.note1) {
                switch (val.name) {
                  case '算法名称':
                  case '应用名称':
                  case '组件名称':
                  case '图层名称':
                    this.submitFrom.name = val.note1
                    break
                  case '算法描述':
                  case '应用描述':
                  case '组件描述':
                  case '图层描述':
                    this.submitFrom.description = val.note1
                    break
                  case '共享条件':
                    this.submitFrom.shareCondition = val.note1
                    break
                  case '共享类型':
                    this.submitFrom.shareType = val.note1
                    break
                  case '服务接口':
                    this.submitFrom.apiUrl = val.note1
                    break
                  case '接口请求方式':
                    this.submitFrom.apiMethodType = val.note1
                    break
                  case '访问地址':
                    this.submitFrom.link = val.note1
                    break
                  case '部门联系人':
                    this.submitFrom.deptContacts = val.note1
                    break
                  case '部门联系人电话':
                    this.submitFrom.deptPhone = val.note1
                    break
                  case '归属部门':
                    this.submitFrom.deptId = val.note1
                    break
                  case '能力类型':
                    this.submitFrom.type = val.note1
                    break
                  default:
                    if (val.type !== 'image' && val.type !== 'file' && val.type !== 'video') {
                      this.submitFrom.infoList.push({
                        attrType: val.name,
                        attrValue: val.note1,
                        delFlag: 0
                      })
                    } else {
                      if (this.submitFrom.infoList.filter(value => value.attrType === val.name).length === 0) {
                        this.submitFrom.infoList.push({
                          attrType: val.name,
                          attrValue: val.note1,
                          delFlag: 0,
                          note2: val.note2 || null
                        })
                      }
                    }
                    break
                }
              }
            })
          }
        })
      })
      this.submitFrom.infoList = this.submitFrom.infoList.sort((a, b) => arr.indexOf(a.attrType) - arr.indexOf(b.attrType))
      this.notFilled = []
      console.log(this.submitFrom, '表单验证')
      if (!this.submitFrom.name) {
        this.notFilled.push('应用名称')
      }
      if (!this.submitFrom.description) {
        this.notFilled.push('应用描述')
      }
      if (!this.submitFrom.shareCondition) {
        this.notFilled.push('共享条件')
      }
      if (!this.submitFrom.deptId) {
        this.notFilled.push('归属部门')
      }
      if (!this.submitFrom.deptContacts) {
        this.notFilled.push('部门联系人')
      }
      if (!this.submitFrom.deptPhone) {
        this.notFilled.push('部门联系人电话')
      }
      if (!this.submitFrom.infoList.filter(val => val.attrType == '应用领域')[0] || !this.submitFrom.infoList.filter(val => val.attrType == '应用领域')[0].attrValue) {
        this.notFilled.push('应用领域')
      }
      // if (!this.submitFrom.infoList.filter(val => val.attrType == '应用状态')[0] || !this.submitFrom.infoList.filter(val => val.attrType == '应用状态')[0].attrValue) {
      //   this.notFilled.push('应用状态')
      // }
      if (!this.submitFrom.infoList.filter(val => val.attrType == '应用类型')[0] || !this.submitFrom.infoList.filter(val => val.attrType == '应用类型')[0].attrValue) {
        this.notFilled.push('应用类型')
      }
      if (this.notFilled.length > 0) {
        this.$message({
          message: '请填写必填字段！',
          type: 'warning'
        })
      } else {
        if (this.submitFrom.id) {
        // 解决编辑无组件类型
          this.submitFrom.infoList.map(val => {
            if (val.attrType === '组件类型') {
              val.attrValue = this.radio
            }
          })
          console.log('编辑===============>', this.submitFrom)
          // 检验是否有空值
          this.submitFrom.infoList = this.submitFrom.infoList.filter(item => item.attrValue)
          this.$http
            .put('/resource/update', this.submitFrom)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                this.$message.error('修改失败!')
                this.showPutOnTheShelfFlag2 = false
              } else {
                this.$message.success('修改成功！')
                this.showPutOnTheShelfFlag2 = false
                this.clear()
              }
            })
            .catch(() => {})
        } else {
          this.$http
            .post('/resource/insert?source= b', this.submitFrom)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                this.$message.error('上架失败!')
                this.showPutOnTheShelfFlag2 = false
              } else {
                this.$message.success('上架成功！')
                this.showPutOnTheShelfFlag2 = false
                this.clear()
              }
            })
            .catch(() => {})
        }
      }
    },
    // 新修改
    UpdateData (item) {
      this.$http.get('/category/getCategoryTree').then(res => {
        this.insertList = res.data.data.filter(item => item.name === '应用资源一')[0]
        this.radio = '应用资源'
        // this.radio = item.infoList.filter(val => val.attrType === '应用资源')[0].attrValue
        this.putOnTheShelfList = this.insertList.children
        // this.putOnTheShelfList = this.insertList.children.filter(item => item.name === this.radio)[0].children
        this.putOnTheShelfList.map(parent => {
          parent.children.map(child => {
            if (child.name === '算法优势' || child.name === '应用场景' || child.name === '功能介绍') {
              const obj = item.infoList.filter(val => val.attrType === child.name)[0]
              if (obj) {
                child.note1 = obj.attrValue
              }
            } else {
              if (child.children) {
                child.children.map(data => {
                  if (data.name === '计费标准信息' || data.name === '常见问题') {
                    const obj = item.infoList.filter(val => val.attrType === child.name)[0]
                    if (obj) {
                      data.note1 = obj.attrValue
                    }
                  } else {
                    switch (data.name) {
                      case '算法名称':
                      case '应用名称':
                      case '组件名称':
                      case '图层名称':
                        data.note1 = item.name
                        break
                      case '算法描述':
                      case '应用描述':
                      case '组件描述':
                      case '图层描述':
                        data.note1 = item.description
                        break
                      case '共享条件':
                        data.note1 = item.shareCondition
                        break
                      case '共享类型':
                        data.note1 = item.shareType
                        break
                      case '服务接口':
                        data.note1 = item.apiUrl
                        break
                      case '接口请求方式':
                        data.note1 = item.apiMethodType
                        break
                      case '访问地址':
                        data.note1 = item.link
                        break
                      case '部门联系人':
                        data.note1 = item.deptContacts
                        break
                      case '部门联系人电话':
                        data.note1 = item.deptPhone
                        break
                      case '归属部门':
                        data.note1 = item.deptId
                        break
                      case '能力类型':
                        data.note1 = item.type
                        break
                      default:
                        // eslint-disable-next-line no-case-declarations
                        const obj1 = item.infoList.filter(val => val.attrType === data.name)[0]
                        if (obj1) {
                          data.note1 = obj1.attrValue
                        }
                        break
                    }
                    if (data.type === 'image' || data.type === 'file' || data.type === 'video') {
                      const obj1 = item.infoList.filter(val => val.attrType === data.name)[0]
                      if (obj1) {
                        data.note2 = obj1.note2
                      }
                    }
                  }
                })
              }
            }
          })
        })
        this.submitFrom.id = item.id
        this.showPutOnTheShelfFlag2 = true
      })
    }
  }
 }
@ -303,4 +839,7 @@ export default {
 .el-tooltip__popper {
  max-width: 50%;
 }
 ::v-deep .el-upload-list__item-name {
  width: 400px;
 }
 </style>
--- a/back/src/views/modules/ability/bsabilityvideo.vue
+++ b/back/src/views/modules/ability/bsabilityvideo.vue
@ -1,6 +1,5 @@
 <template>
  <el-card shadow="never" class="aui-card--fill">
    {{ this.$route.meta.type }}
    <div class="mod-ability__bsabilityvideo">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
--- a/back/src/views/modules/ability/bsdataresources.vue
+++ b/back/src/views/modules/ability/bsdataresources.vue
@ -0,0 +1,114 @@
 <!-- 数据资源目录编制      /bscatalogue/dataResources -->
 <template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-pay__order">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <ren-select v-model="dataForm.status" dict-type="category" :placeholder="$t('dataresources.componentType')"></ren-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.orderId" :placeholder="$t('dataresources.componentName')" clearable></el-input>
        </el-form-item>
        <el-form-item>
           <el-date-picker v-model="dataForm.applydate" value-format="yyyy-MM-dd" type="date" :placeholder="$t('dataresources.putOnDate')" clearable></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetDataList()">{{ $t('reset') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <el-table-column prop="productName" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="orderId" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="payAmount" :label="$t('dataresources.resourcesProvide')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="status" :label="$t('dataresources.resourcesAbstract')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="payAt" :label="$t('dataresources.putOnDate')" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="primary" @click="showRelateApplication(scope.row)">{{ $t('dataresources.associatedApplication') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
       <relate-application v-if="relateApplicationVisible" ref="relateApplication" :relateInfo="relateInfo" @isShowRelatePopup="handleIsShowRelatePopup"></relate-application>
    </div>
  </el-card>
 </template>
 <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'
 export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/pay/order/page',
        getDataListIsPage: true,
        deleteURL: '/pay/order',
        deleteIsBatch: true
      },
      dataForm: {
        orderId: '',
        status: '',
        userId: ''
      },
      // 关联应用弹窗
      relateApplicationVisible: false,
      relateInfo: {
        id: '',
        responseData: {},
        linkType: ''
      }
    }
  },
  components: {
    // AddOrUpdate,
    RelateApplication
  },
  methods: {
    // 重置
    resetDataList () {
      this.dataForm = {
        orderId: '',
        status: '',
        userId: ''
      },
      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
          this.relateInfo = {
            id: row.id,
            responseData: res.data,
            linkType: '2'
          }
        }
      }).catch(() => { })
    },
    // 是否展示关联应用弹窗
    handleIsShowRelatePopup (type) {
      this.relateApplicationVisible = type
    }
  }
 }
 </script>
--- a/back/src/views/modules/ability/bsinfrastructure.vue
+++ b/back/src/views/modules/ability/bsinfrastructure.vue
@ -0,0 +1,107 @@
 <!-- 基础设施目录编制     /bscatalogue/infrastructure -->
 <template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-pay__order">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <ren-select v-model="dataForm.status" dict-type="resourceType" :placeholder="$t('infrastructure.resourceCategory')"></ren-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.orderId" :placeholder="$t('infrastructure.resourceName')" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetDataList()">{{ $t('reset') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <el-table-column prop="orderId" :label="$t('infrastructure.resourceName')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="productName" :label="$t('infrastructure.district')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="payAmount" :label="$t('infrastructure.street')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="status" :label="$t('infrastructure.department')" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
             <el-button type="primary" @click="showRelateApplication(scope.row)">{{ $t('infrastructure.associatedApplication') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
       <relate-application v-if="relateApplicationVisible" ref="relateApplication" :relateInfo="relateInfo" @isShowRelatePopup="handleIsShowRelatePopup"></relate-application>
    </div>
  </el-card>
 </template>
 <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'
 export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/resource/page',
        getDataListIsPage: true,
        deleteURL: '',
        deleteIsBatch: true
      },
      dataForm: {
        orderId: '',
        status: '',
        userId: '',
        type: '基础设施'
      },
      // 关联应用弹窗
      relateApplicationVisible: false,
      relateInfo: {
        id: '',
        responseData: {},
        linkType: ''
      }
    }
  },
  components: {
    // AddOrUpdate,
    RelateApplication
  },
  methods: {
    // 重置
    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
          this.relateInfo = {
            id: row.id,
            responseData: res.data,
            linkType: '2'
          }
        }
      }).catch(() => { })
    },
    // 是否展示关联应用弹窗
    handleIsShowRelatePopup (type) {
      this.relateApplicationVisible = type
    }
  }
 }
 </script>
--- a/back/src/views/modules/ability/components/combine-ability.vue
+++ b/back/src/views/modules/ability/components/combine-ability.vue
@ -0,0 +1,475 @@
 <template>
    <div class="ability-box">
        <div class="top">
            <div class="type">{{ type }}</div>
            <el-button type="primary" size="small" @click="clickOpen">添加</el-button>
        </div>
        <el-dialog :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
            :close-on-press-escape="false" :key="showKey" append-to-body>
            <div class="relate-application-content" v-if="type==='组件服务'">
              <el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
                  :titles="nameArray" :props="{
                      key: 'id',
                      label: 'name',
                  }" :data="transferData">
              </el-transfer>
            </div>
            <div v-else-if="type==='数据资源'"  class="dataTransfer">
              <el-transfer v-model="selectedArray" filter-placeholder="请输入名称"
                    :titles="nameArray" :props="{
                        key: 'id',
                        label: 'name',
                    }" :data="transferData">
                </el-transfer>
                <el-input
                  v-model="searchValue"
                  placeholder="请输入名称"
                ></el-input>
                <el-button @click="rest" class="restClick">重置</el-button>
            </div>
            <el-pagination
              v-if="type==='数据资源'"
              :current-page="currentPage"
              :page-size="15"
              layout="total, prev, pager, next"
              :total="total"
              @current-change="pageCurrentChangeHandle"
            >
            </el-pagination>
            <template slot="footer">
                <el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
                <el-button type="primary" @click="confirmSubmitHandle()">{{
                        $t("confirm")
                }}</el-button>
            </template>
        </el-dialog>
        <DisplayList :displayList="displayList" showKey="name"></DisplayList>
    </div>
 </template>
 <script>
 import InfrastructureModal from '../assignedScene/components/infrastructure-modal.vue'
 import DisplayList from '../assignedScene/components/display-list.vue'
 const sjzyArray = [
  {
    zyname: '城阳区图书馆总分馆、社区图书室明细信息',
    sjcczl: 0.02,
    zycode: '307013110716000007',
    ygxjghjls: 0,
    jghxxjlzs: 0,
    neibukeshi: '',
    xgxt: '城阳区图书馆及总分馆、社区图书室明细信息',
    ygxdsjccl: 0,
    zygszl: 'et',
    ykfjghjls: 0,
    syqk: 0,
    zyformat: '电子表格',
    guid: '277c51e0-066b-441d-9262-6e53ce6fc99a',
    TGBM: '城阳区文化和旅游局',
    ykfdsjccl: 0
  },
  {
    zyname: '2021年度西海岸新区科技型中小企业名单信息',
    sjcczl: 0,
    zycode: '307013109000000010',
    ygxjghjls: 0,
    jghxxjlzs: 0,
    neibukeshi: '高新技术科',
    xgxt: '2021年度西海岸新区科技型中小企业名单信息，企业名称，入库编号。',
    ygxdsjccl: 0,
    zygszl: 'access',
    ykfjghjls: 0,
    syqk: 0,
    zyformat: '数据库',
    guid: '6ed1a478-443a-48ee-8af0-4c7ac2681a94',
    TGBM: '青岛西海岸新区工业和信息化局（区科技局、区大数据局）',
    ykfdsjccl: 0
  },
  {
    zyname: '西海岸新区高新技术企业名单信息',
    sjcczl: 0,
    zycode: '307013109000000012',
    ygxjghjls: 0,
    jghxxjlzs: 0,
    neibukeshi: '高新技术科',
    xgxt: '西海岸新区高新技术企业名单信息',
    ygxdsjccl: 0,
    zygszl: 'access',
    ykfjghjls: 0,
    syqk: 0,
    zyformat: '数据库',
    guid: '770a9127-e7fd-4a6b-ba17-c80cf06ab670',
    TGBM: '青岛西海岸新区工业和信息化局（区科技局、区大数据局）',
    ykfdsjccl: 0
  },
  {
    zyname: '西海岸新区高新技术企业认定补助名单信息',
    sjcczl: 0,
    zycode: '307013109000000011',
    ygxjghjls: 0,
    jghxxjlzs: 0,
    neibukeshi: '高新技术科',
    xgxt: '西海岸新区高新技术企业认定补助名单信息，企业名称、扶持项目。',
    ygxdsjccl: 0,
    zygszl: 'access',
    ykfjghjls: 0,
    syqk: 0,
    zyformat: '数据库',
    guid: 'ae52c5f8-ef6e-4ae9-a657-79dcb6f65643',
    TGBM: '青岛西海岸新区工业和信息化局（区科技局、区大数据局）',
    ykfdsjccl: 0
  },
  {
    zyname: '青岛西海岸新区第六批区级非物质文化遗产代表性项目名录',
    sjcczl: 0,
    zycode: '307013109026000037',
    ygxjghjls: 0,
    jghxxjlzs: 0,
    neibukeshi: '艺术科',
    xgxt: '青岛西海岸新区第六批区级非物质文化遗产代表性项目名录，如项目类别、序号、项目名称、申报单位',
    ygxdsjccl: 0,
    zygszl: 'et',
    ykfjghjls: 0,
    syqk: 0,
    zyformat: '电子表格',
    guid: '6d80a3b1-744e-4292-a904-0168d640b1fc',
    TGBM: '青岛西海岸新区文化和旅游局（区新闻出版广电局、区文物局）',
    ykfdsjccl: 0
  }
 ]
 const res = {
  code: 0,
  msg: 'success',
  data: {
    PageCount: '2115',
    data: sjzyArray,
    rows: '10573'
  }
 }
 const keyObj = {
  "数据资源": {
    idKey: 'id',
    nameKey: 'name'
  },
  "组件服务": {
    idKey: 'id',
    nameKey: 'name'
  }
 }
 export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    nameArray: {
      type: Array,
      default: () => ['未选择名称', '已选择名称']
    },
    // 最多选择的数据个数
    maxNum: {
      type: Number,
      default: 10
    },
    getDataParams: {
      type: Object,
      default: () => {
        return {
          methods: 'get',
          url: '',
          postData: {}
        }
      }
    }
  },
  data () {
    return {
      showKey: 0,
      showModal: false,
      transferData: [],
      selectedArray: [],
      allData: [],
      displayList: [], // 用于展示的list
      total: 0,
      currentPage: 1,
      newNum: 1,
      searchValue: ''
    }
  },
  watch: {
    showModal (newVal) {
      if (newVal) {
        this.getData()
      }
    },
    newNum (newVal) {
      if (newVal) {
        this.getDataParams.postData.pageNum = newVal
        this.getData()
      }
    },
    searchValue (newVal) {
      if (newVal) {
        this.getDataParams.postData.serviceName = newVal
        this.getData()
      }
    }
  },
  methods: {
    async getDataInfo (dataForm) {
      await this.getData()
      const arr = []
      const attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type)
      if (attrValue.length > 0) {
        attrValue.map(val => {
          const _obj = {
            type: val.type,
            id: val.resourceId,
            name: val.resource && val.resource.name
          }
          arr.push(_obj)
        })
      }
      // 展示
      this.displayList = JSON.parse(JSON.stringify(arr))
      // 已选中
      this.selectedArray = arr.map(v => v.id)
      this.$nextTick(() => {
        console.log(999, this.displayList)
      })
    },
    // 获取列表
    getData () {
      if (this.getDataParams.url === '') {
        return
      }
      if (this.type === '组件服务') {
        this.$http[this.getDataParams.methods](this.getDataParams.url, {
          params: this.getDataParams.postData
        }).then(res => {
          console.log('res.data----获取列表-------->', res.data)
          if (res.data.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.transferData = []
          this.allData = [];
          (res.data.data || []).map(v => {
            this.transferData.push({
              type: this.type,
              id: v[keyObj[this.type].idKey],
              name: v[keyObj[this.type].nameKey] || '--'
            })
          })
          this.allData = JSON.parse(JSON.stringify(this.transferData))
          console.log(this.allData, 'this.transferData')
        }).catch(err => {
          this.$message.error(err)
        })
      } else if (this.type === '数据资源') {
        this.getDataParams.postData.pageNum = this.newNum
        this.$http[this.getDataParams.methods](this.getDataParams.url,
          this.getDataParams.postData
        ).then(res => {
          console.log('res.data----获取列表-------->', res.data)
          this.total = Number(res.data.data.rows)
          if (res.data.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.transferData = []
          this.allData = [];
          (res.data.data.data || []).map(v => {
            this.transferData.push({
              type: this.type,
              id: v.guid,
              name: v.zyname || '--'
            })
          })
          this.allData = JSON.parse(JSON.stringify(this.transferData))
        }).catch(err => {
          this.$message.error(err)
        })
      }
    },
    filterMethod (query, item) {
      console.log('1111111111111111111111111')
      return item.name && item.name.indexOf(query) > -1
    },
    confirmSubmitHandle () {
      if (this.selectedArray.length > this.maxNum) {
        return this.$message.error('最多选择十条数据！')
      }
      this.showModal = false
      this.displayList = []
      this.allData.map(v => {
        if (this.selectedArray.includes(v.id)) {
          this.displayList.push(v)
        }
      })
      this.$emit('update', {
        title: this.type,
        list: this.selectedArray
      })
    },
    getDisplay (displayList) {
      this.displayList = []
      this.displayList = displayList
    },
    close () {
      this.showModal = false
      // this.selectedArray = []
      this.allData = []
      this.transferData = []
    },
    pageCurrentChangeHandle (val) {
      console.log(this.newNum, val, 'wowowo')
      this.newNum = val
    },
    clickOpen () {
      this.searchValue = ''
      this.getDataParams.postData.serviceName = ''
      this.currentPage = 1
      this.showModal = true
      this.getData()
    },
    rest () {
      this.currentPage = 1
      this.searchValue = ''
      this.getDataParams.postData.serviceName = ''
      this.getData()
    }
  },
  components: { InfrastructureModal, DisplayList },
  mounted () {
    console.log(this.type, 'this.type')
  }
 }
 </script>
 <style lang="scss" scoped>
 .ability-box {
  margin-bottom: 10px;
  .show-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .type {
    padding-right: 12px;
    font-size: 14px;
    color: #606266;
    width: 100px;
    box-sizing: border-box;
    text-align: right;
    line-height: 40px;
    height: 40px;
  }
  .list-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 100px;
  }
  .list-item {
    font-size: 14px;
    color: #606266;
    width: 380px;
    text-align: left;
    margin-right: 10px;
    line-height: 40px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
 }
 </style>
 <style lang="scss" scoped>
 .icon-input ::v-deep .el-input__inner {
  cursor: pointer;
 }
 ::v-deep .el-dialog__body {
  height: 580px;
  overflow: auto;
 }
 ::v-deep .el-checkbox-button__inner {
  width: 130px;
  margin: 0 10px 5px;
  border-left: unset !important;
  border-radius: unset !important;
  border: 1px solid #dcdfe6 !important;
 }
 .relate-application-content {
  height: 100%;
  ::v-deep .el-transfer {
    height: 100%;
  }
  ::v-deep .el-transfer-panel {
    width: 39.5%;
    height: 100%;
  }
  ::v-deep .el-transfer-panel__body {
    height: 100%;
  }
  ::v-deep .el-transfer-panel__list.is-filterable {
    height: calc(100% - 102px);
  }
 }
 .dataTransfer {
  position: relative;
  height: 100%;
  ::v-deep .el-transfer {
    height: 100%;
  }
  ::v-deep .el-transfer-panel {
    width: 39.5%;
    height: 100%;
  }
  ::v-deep .el-transfer-panel__body {
    height: 100%;
  }
  ::v-deep .el-transfer-panel__list {
    height: calc(100% - 102px);
    margin-top: 4rem;
  }
  ::v-deep .el-input {
    position: absolute;
    font-size: 14px;
    display: inline-block;
    width: 30%;
    top: 52px;
    left: 12px;
  }
  .restClick {
    position: absolute;
    top: 52px;
    left: 284px;
  }
 }
 </style>
--- a/back/src/views/modules/ability/components/common-question.vue
+++ b/back/src/views/modules/ability/components/common-question.vue
@ -0,0 +1,133 @@
 <template>
    <div class="question-box">
        <div class="title">
            {{ title }}
        </div>
        <div v-for="(item, index) in dataInfo" :key="index">
            <el-form-item :label="keyTextObj.nameObj.text">
                <el-input v-model="item[keyTextObj.nameObj.key]" :placeholder="`请输入${keyTextObj.nameObj.text}`"
                    style="width:90%">
                </el-input>
            </el-form-item>
            <el-form-item :label="keyTextObj.descObj.text">
                <el-input type="textarea" :rows="2" v-model="item[keyTextObj.descObj.key]"
                    :placeholder="`请输入${keyTextObj.descObj.text}`" style="width:90%">
                </el-input>
                <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
                    v-if="dataInfo.length > 1">删除
                </el-button>
            </el-form-item>
            <el-button class="add-btn" size="small" v-if="index == dataInfo.length - 1" @click="addItem" type="primary">
                添加
            </el-button>
        </div>
    </div>
 </template>
 <script>
 export default {
    props: {
        dataForm: {
            type: Object,
            default: () => { }
        },
        title: {
            type: String,
            default: '常见问题'
        },
        keyTextObj: {
            type: Object,
            default: () => {
                return {
                    nameObj: {
                        text: '问题名称',
                        key: 'question'
                    },
                    descObj: {
                        text: '问题描述',
                        key: 'answer'
                    },
                }
            }
        }
    },
    data() {
        return {
            dataInfo: []
        }
    },
    watch: {
        dataInfo: {
            handler(newVal) {
                this.dataInfo = newVal;
                this.$emit('update', {
                    title: this.title,
                    list: newVal
                })
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        getDataInfo(dataForm) {
            let arr = []
            if (dataForm && (dataForm.id || dataForm.id === 0)) {
                let fuseAttrList = dataForm.fuseAttrList || [];
                let obj = fuseAttrList.find(v => v.attrType === this.title) || {}
                let attrValue = JSON.parse(obj.attrValue || "[]")
                if (attrValue.length > 0) {
                    attrValue.map(v => {
                        arr.push({
                            [this.keyTextObj.nameObj.key]: v[this.keyTextObj.nameObj.key],
                            [this.keyTextObj.descObj.key]: v[this.keyTextObj.descObj.key],
                        })
                    })
                } else {
                    arr = []
                    arr.push({
                        [this.keyTextObj.nameObj.key]: '',
                        [this.keyTextObj.descObj.key]: '',
                    })
                }
            } else {
                arr = []
                arr.push({
                    [this.keyTextObj.nameObj.key]: '',
                    [this.keyTextObj.descObj.key]: '',
                })
            }
            this.dataInfo = arr;
        },
        // 新增
        addItem() {
            let index = this.dataInfo.length - 1;
            if (this.dataInfo[index][this.keyTextObj.nameObj.key] === '' || this.dataInfo[index][this.keyTextObj.descObj.key] === '') {
                return this.$message.warning('请填写完整信息！')
            }
            this.dataInfo.push({
                [this.keyTextObj.nameObj.key]: '',
                [this.keyTextObj.descObj.key]: '',
            })
        },
        // 删除
        deleteItem(list, index) {
            this.dataInfo.splice(index, 1)
        }
    }
 }
 </script>
 <style lang="scss" scoped>
 .question-box {
    .title {
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 10px;
    }
 }
 .add-btn {
    margin-top: -12px;
    margin-left: 100px;
 }
 </style>
--- a/back/src/views/modules/ability/components/integrated-combine-ability.vue
+++ b/back/src/views/modules/ability/components/integrated-combine-ability.vue
@ -0,0 +1,178 @@
 <!-- 融合服务--组合能力 -->
 <template>
    <div class="content-box">
        <div class="title">
            {{ title }}
        </div>
        <div class="no-data loading-box" v-loading="loading" v-if="loading">
        </div>
        <div v-if="!loading">
            <div v-for="(item, index) in dataInfo" :key="index">
                <el-form-item label="能力类别" prop="">
                    <el-select v-model="item.type" placeholder="请选择能力类别" @change="(data) => filterSelect(data, item)"
                        :disabled="disabledType">
                        <el-option v-for="val in typeOptions" :key="val.value" :label="val.value" :value="val.value">
                        </el-option>
                    </el-select>
                    <el-select class="ability-input" style="margin-left: 20px;max-width:530px" v-model="item.resourceId"
                        placeholder="请选择能力" filterable :disabled="disabledType">
                        <el-option style="max-width:530px" v-for="val in item.abilityOptions" :key="val.id"
                            :label="val.name || '--'" :value="val.id">
                        </el-option>
                    </el-select>
                    <el-button style="margin-left:10px" @click="deleteItem(dataInfo, index)" type="danger" size="small"
                        v-if="!disabledType && dataInfo.length > 1">删除
                    </el-button>
                </el-form-item>
                <el-button style="margin-left:100px" size="small" v-if="!disabledType && index == dataInfo.length - 1"
                    @click="addItem(dataInfo, 0)" type="primary">添加
                </el-button>
            </div>
        </div>
    </div>
 </template>
 <script>
 export default {
    props: {
        dataForm: {
            type: Object,
            default: () => { }
        },
        title: {
            type: String,
            default: '组合能力'
        },
        // 是否可编辑
        disabledType: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            typeOptions: [
                {
                    value: '数据资源',
                },
                {
                    value: '组件服务',
                },
                {
                    value: '基础设施',
                },
            ],
            dataInfo: [],
            abilityArrayCopy: [],
            loading: false,
        }
    },
    watch: {
        dataInfo: {
            handler(newVal) {
                this.dataInfo = newVal;
                let arr = newVal.map((v, index) => {
                    return {
                        sequence: index,
                        resourceId: v.resourceId,
                    }
                })
                this.$emit('update', {
                    title: this.title,
                    list: arr
                })
            },
            deep: true,
            immediate: true,
        },
    },
    mounted() {
    },
    methods: {
        async getDataInfo(dataForm) {
            await this.getAbility()
            let arr = []
            let attrValue = dataForm.fuseResourceList || []
            if (attrValue.length > 0) {
                attrValue.map(v => {
                    let _obj = {
                        type: v.resource && v.resource.type,
                        resourceId: v.resourceId,
                    }
                    this.filterSelect(v.resource && v.resource.type, _obj)
                    arr.push(_obj)
                })
            } else {
                arr = []
                arr.push({
                    type: "",
                    resourceId: "",
                    abilityOptions: []
                })
            }
            this.dataInfo = arr;
            this.$nextTick(() => {
                console.log(999, this.dataInfo)
            })
        },
        // 新增
        addItem(list) {
            list.push({
                type: "",
                resourceId: "",
                abilityOptions: []
            })
        },
        // 删除
        deleteItem(list, index) {
            list.splice(index, 1)
        },
        // 获取能力
        getAbility() {
            return new Promise((resolve, reject) => {
                this.abilityArrayCopy = []
                this.loading = true;
                this.$http.get(`/resource/list`, {}).then(({ data: res }) => {
                    this.loading = false;
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.abilityArrayCopy = res.data || []
                    resolve(res)
                }).catch((err) => {
                    this.loading = false;
                    this.$message.error(err)
                    reject(err)
                })
            })
        },
        filterSelect(type, item) {
            let arr = this.abilityArrayCopy.filter(v => v.type == type)
            let selectArray = this.dataInfo.map(v => v.resourceId) || [];
            // 过滤掉已选的
            item.abilityOptions = arr.filter(v => !selectArray.includes(v.id))
            console.log('abilityOptions------------>', item.abilityOptions);
        },
    }
 }
 </script>
 <style lang="scss" scoped>
 .content-box {
    margin-bottom: 20px;
    .title {
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 10px;
    }
 }
 .loading-box {
    width: 100%;
    height: 100px;
 }
 .ability-input {
    width: calc(100% - 300px);
 }
 </style>
--- a/back/src/views/modules/ability/showChild.vue
+++ b/back/src/views/modules/ability/showChild.vue
@ -0,0 +1,154 @@
 <template>
  <el-dialog :visible.sync="isShow" :title="childName" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-table
      border
      :data="tableData"
    >
        <el-table-column
            prop="id"
            label="主键id"
            header-align="center"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="fuseId"
            label="融合服务id"
            header-align="center"
            align="center"
        ></el-table-column>
        <el-table-column
            v-if="childName==='融合资源属性'"
            prop="attrType"
            label="属性类型"
            header-align="center"
            align="center"
        ></el-table-column>
        <el-table-column
            v-if="childName==='融合资源属性'"
            prop="attrValue"
            label="属性值"
            header-align="center"
            align="center"
        ></el-table-column>
        <el-table-column
            v-if="childName==='资源融合关系'"
            prop="resourceId"
            label="资源id"
            header-align="center"
            align="center"
        ></el-table-column>
        <el-table-column
            v-if="childName==='资源融合关系'"
            prop="sequence"
            label="资源挂载顺序"
            header-align="center"
            align="center"
        ></el-table-column>
    </el-table>
  </el-dialog>
 </template>
 <script>
 import 'quill/dist/quill.snow.css'
 export default {
  props: {
    childName: {
      type: String,
      default: ''
    },
    // columns: {
    //   type: Array,
    //   default: function () {
    //     return []
    //   }
    // },
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false,
    }
  },
  computed: {
  },
  methods: {
    show () {
      this.visible = true
    },
  }
 }
 </script>
 <style lang="scss" scoped>
 .icon-input ::v-deep .el-input__inner {
  cursor: pointer;
 }
 .detial-form ::v-deep {
  .el-form-item {
    margin-bottom: 0px;
    line-height: 32px;
  }
  .el-form-item__label {
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 32px;
  }
 }
 </style>
 <style lang="scss">
 .mod-sys__menu {
  .menu-list,
  .icon-list {
    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }
  &-icon-popover {
    width: 458px;
    overflow: hidden;
  }
  &-icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &-icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;
      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
 }
 </style>
--- a/back/src/views/modules/ability/upload.vue
+++ b/back/src/views/modules/ability/upload.vue
@ -48,8 +48,6 @@ export default {
  },
  methods: {
    onSuccess (res, file) {
      console.log('limit', this.limit)
      console.log(res, file, this.child)
      if (res.code !== 0) {
        return this.$message.error('上传图片失败')
      }
@ -88,10 +86,8 @@ export default {
      } else {
        this.child.note1 = arr.join(';')
      }
      console.log(this.child.note1)
    },
    onPreview (file) {
      console.log('点击预览===============>', file)
      window.open(file.response.data)
    },
    onExceed (files, fileList) {
--- a/back/src/views/modules/abilityStatistics/applicationResources.vue
+++ b/back/src/views/modules/abilityStatistics/applicationResources.vue
--- a/back/src/views/modules/abilityStatistics/componentServices.vue
+++ b/back/src/views/modules/abilityStatistics/componentServices.vue
@ -0,0 +1,557 @@
 <template>
    <div class='container'>
        <div>
            <span class='title-style'>组件服务</span>
            <span class='page-introduction'>发布情况统计</span>
            <button class='back-btn' @click="backBtn">返回</button>
        </div>
        <div class='container-body'>
            <div class='container-body1'>
                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
                <div id="main1" style="width: 400px;height:200px;"></div>
            </div>
            <div class='container-body2'>
                <span style='font-size:18px;color;#000000;'>发布量情况分布</span>
                <div id="main2" style="width: 400px;height:200px;"></div>
            </div>
            <div class='container-body3'>
                <span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
                <div id="main3" style="width: 400px;height:200px;"></div>
            </div>
             <div class='container-body4'>
                <div style='margin-bottom:30px'>
                     <span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
                </div>
                <div v-for="(item,index) in usedList" :key='index' >
                    <div style='display:flex'>
                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
                        </div>
                        <span class='num-style'>{{item.name}}</span>
                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
                    </div>
                </div>
            </div>
             <div class='container-body5'>
                <div style='margin-bottom:30px'>
                     <span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
                </div>
                <div v-for="(item,index) in applicationList" :key='index' >
                    <div style='display:flex'>
                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
                        </div>
                        <span class='num-style'>{{item.name}}</span>
                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class='footer'>
            <div class='footer-left' ></div>
            <span style='color:#b7c2d1;font-size:16px'>到底啦</span>
            <div class='footer-right'></div>
            </div>
    </div>
 </template>
 <script>
 import * as echarts from 'echarts';
 export default {
    props:{
        tableId:{
            type:String,
            default:''
        },
        fatherId:{
            type:Number,
            default:null,
        }
    },
    data(){
        return{
            data1:[],
             data2: [
                // { value: 1048,name: '算法' },
                // { value: 735, name: '图层' },
                // { nums: 580, attr_value: '开发' },
                // { nums: 484, attr_value: '业务' },
            ],
              data3: [
                // { value: 1048,name: '算法' },
            ],
            colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
            widthList:['90px','80px','70px','60px','50px'],
            numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
            usedList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},],
            applicationList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},]
        }
    },
    created(){
        if(this.fatherId===1){
            this.getBeCalled()
            this.getBeApplied()
            this.getAlgorithm()
            this.getDistributed()
            this.getScoreList()
        }else{
        }
    },
    mounted(){
    },
   methods:{
      // 评分发布情况
        getScoreList () {               
            this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
                  params : {
                   id:this.tableId,
                   resourceType:"应用资源"
                    // pageNo: pageNo || 1,
                    // pageSize: 20
                    }                    
            }).then(res => {
                let arry=[]
                arry=res.data.data
                arry.forEach((item)=>{
                    const single={
                        value:item.scoreNum,
                        name:item.score
                    }
                    // const newList=[]
                   this.data1.push(single)
                    // this.data2=newList
                    this.myEcharts1()
               })             
            })            
            },
      // 算法图层开发业务
        getAlgorithm () {               
            this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
                  params : {
                   id:this.tableId,
                   resourceType:"组件服务"
                    // pageNo: pageNo || 1,
                    // pageSize: 20
                    }                    
            }).then(res => {
                let arry=[]
                arry=res.data.data
                arry.forEach((item)=>{
                    const single={
                        value:item.nums,
                        name:item.attr_value
                    }
                    // const newList=[]
                   this.data2.push(single)
                    // this.data2=newList
                    this.myEcharts2()
               })             
            })            
            },
             // 应用领域分布
        getDistributed () {               
            this.$http.get('/census/center/v3/applicationAreaCapabilityList' ,{
                  params : {
                  id:this.tableId,
                   resourceType:"应用资源"
                    }                    
            }).then(res => {
                let arry=[]
                arry=res.data.data
                arry.forEach((item)=>{                   
                    const single={
                        value:item.total,
                        name:item.type
                    }
                    const newList=[]
                    this.data3.push(single)
                    // this.data2=newList
                    this.myEcharts3()
               })             
            })            
            },
     // 被调用组件及数量
        getBeCalled () {               
            this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
                  params : {
                  id:this.tableId,
                   resourceType:"应用资源"
                    // pageNo: pageNo || 1,
                    // pageSize: 20
                    }                    
            }).then(res => {
                this.applicationList =res.data.data
            })
            },
        // 被申请组件及数量
        getBeApplied () {               
            this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
                  params : {
                   id:this.tableId,
                   resourceType:"组件服务"
                    // pageNo: pageNo || 1,
                    // pageSize: 20
                    }                    
            }).then(res => {
                this.applicationList =res.data.data
            })
            },
        myEcharts1(){
            var chartDom = document.getElementById('main1');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: '',
                top: '14%',
                left: '55%',
                width:"auto",
                height:"auto",
                orient: "vertical",
                itemGap: 15,
                itemWidth: 14,
                // 使用回调函数
            formatter: function(name) {
                var data = option.series[0].data;
                var total = 0;
                var tarValue;
                for (var i = 0; i < data.length; i++) {
                total += Number(data[i].value);
                if (data[i].name == name) {
                    tarValue = data[i].value;
                }
                }
                var v = tarValue;
                var p = Math.round(((v / total) * 100));
                return `${name}            ${p}%`;
            },
            itemStyle:{},
            textStyle: {
                color: "#666666",
                padding:[0,8,0,18]
            },
            },
            color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
            series: [
                {
                type: 'pie',
                radius: ['40%', '60%'],
                center:['22%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: this.data1
                }
            ]
            };
            option && myChart.setOption(option);
                },
        myEcharts2(){
            var chartDom = document.getElementById('main2');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: '',
                top: '22%',
                left: '50%',
                width:"auto",
                height:"auto",
                orient: "vertical",
                itemGap: 15,
                itemWidth: 14,
                // 使用回调函数
            formatter: function(name) {
                var data = option.series[0].data;
                var total = 0;
                var tarValue;
                for (var i = 0; i < data.length; i++) {
                total += Number(data[i].value);
                if (data[i].name == name) {
                    tarValue = data[i].value;
                }
                }
                var v = tarValue;
                var p = Math.round(((tarValue / total) * 100));
                return `${name}         ${p}%`;
            },
            itemStyle:{},
            textStyle: {
                color: "#666666",
                padding:[0,8,0,18]
            },
            },
            color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
            series: [
                {
                // name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'],
                center:['22%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: this.data2
                }
            ]
            };
            option && myChart.setOption(option);
                },
        myEcharts3(){
            var chartDom = document.getElementById('main3');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
               orient: "vertical",   type: 'scroll',
                top: '22%',
                left: '50%',
                width:"auto",
                height:"auto",
                orient: "vertical",
                itemGap: 15,
                itemWidth: 14,
                    // 使用回调函数
                formatter: function(name) {
                    var data = option.series[0].data;
                    var total = 0;
                    var tarValue;
                    for (var i = 0; i < data.length; i++) {
                    total += Number(data[i].value);
                    if (data[i].name == name) {
                        tarValue = data[i].value;
                    }
                    }
                    var v = tarValue;
                    var p = Math.round(((tarValue / total) * 100));
                    return `{a|${name}}  {b|${p}%}`;
                },
                itemStyle:{},
                textStyle: {
                      rich: {
              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
                    a: {
                        // 设置文字、数学、英语这一列的样式
                        width: 100,
                        color: "#666666",
                        fontSize: 12,
                        // fontWeight: "bolder",
                    },
                    b: {
                        // 设置10分、20分、30分这一列的样式
                        width: 35,
                        color: "#333",
                        fontSize: 12,
                    },
                },
                    color: "#666666",
                    backgroundColor: "transparent", 
                    padding:[0,8,0,18]
                },
            },
            color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
            series: [
                {
                // name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'],
                center:['22%', '50%'],
                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:this.data3
                }
            ]
            };
            option && myChart.setOption(option);
                },
        backBtn(){
            this.$emit('closeChild')
        }
   }
 }
 </script>
 <style scoped>
 .container{
    padding-top: 15px;
    display: flex;
    flex-direction: column;
 }
    .title-style{
        font-size: 24px;
        color:#000000;
        font-weight: bold;
    }
    .page-introduction{
        font-size: 18px;
        color:#666666;
        margin-left: 20px;
    }
    .back-btn{
        background: #3e8ef7;
        border-color: rgba(101, 165, 249,0);
        color: #FFF;
        margin-left:1030px;
        padding-bottom: 3px;
    }
    .container-body{
        width:1300px;
        margin-top:30px;
        display: flex;
        flex-wrap:wrap
    }
    .container-body1{
        width:420px;
        height:250px;
        background-color: #ffffff;
        margin-right:20px;
        padding-top:20px;
        padding-left: 20px;
    }
    .container-body2{
        width:420px;
        height:250px;
        background-color: #ffffff;
        margin-right:20px;
        padding-top:20px;
        padding-left: 20px;
    }
    .container-body3{
        width:420px;
        height:250px;
        background-color: #ffffff;
        padding-top:20px;
        padding-left: 20px;
    }
    .container-body4{
        width:640px;
        height:300px;
        background-color: #ffffff;
        padding-top:20px;
        padding-left: 20px;
        margin-top: 20px;
        margin-right: 20px;
        background-image:url("../../../assets/img/排行榜背景图.png"); 
        background-repeat:no-repeat;
        background-size: 100% 100%;
    }
    .container-body5{
        width:640px;
        height:300px;
        background-color: #ffffff;
        padding-top:20px;
        padding-left: 20px;
        margin-top: 20px;
        background-image:url("../../../assets/img/排行榜背景图.png"); 
        background-repeat:no-repeat;
        background-size: 100% 100%;
    }
    .footer{
        display: flex;
        margin-top:50px;
        margin-left:365px;
    }
    .footer-left{
        width:250px;
        height:1px;
        background-color:#e0eaf8;
        margin-right:10px;
        margin-top:8px
    }
    .footer-right{
        width:250px;
        height:1px;
        background-color:#e0eaf8;
        margin-left:10px;
        margin-top:8px
    }
    .ranking-img{
        width:60px;
        height:26px;
        display: flex;
        line-height: 26px;
        margin-bottom:15px;
        margin-right:10px;
        padding-left: 15px;
    }
    .num-style{
         position:absolute;
         display: flex;
         margin-left:90px;
         margin-top:5px;
         color:#333333;
         font-size: 16px;        
    }   
    .count-style{
         position:absolute;
         display: flex;
         margin-left:400px;
         margin-top:5px;
         color:#333333;
         font-size: 18px;  
         font-weight: bold;      
    }
 </style>
--- a/back/src/views/modules/abilityStatistics/componentUsed.vue
+++ b/back/src/views/modules/abilityStatistics/componentUsed.vue
@ -0,0 +1,554 @@
 <template>
    <div class='container'>
        <div>
            <span class='title-style'>组件服务</span>
            <span class='page-introduction'>使用情况统计</span>
            <button class='back-btn' @click="backBtn">返回</button>
        </div>
        <div class='container-body'>
            <!-- <div class='container-body1'>
                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
                <div id="main1" style="width: 400px;height:200px;"></div>
            </div> -->
            <div class='container-body2'>
                <span style='font-size:18px;color;#000000;'>使用组件数量分布</span>
                <div id="main2" style="width: 400px;height:200px;"></div>
            </div>
            <div class='container-body3'>
                <span style='font-size:18px;color;#000000;'>使用组件应用领域分布情况</span>
                <div id="main3" style="width: 400px;height:200px;"></div>
            </div>
             <div class='container-body4'>
                <div style='margin-bottom:30px'>
                     <span style='font-size:18px;color;#000000;'>Top5使用组件</span>
                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
                </div>
                <div v-for="(item,index) in usedList" :key='index' >
                    <div style='display:flex'>
                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
                        </div>
                        <span class='num-style'>{{item.name}}</span>
                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.useNum}}</span>
                    </div>
                </div>
            </div>
             <div class='container-body5'>
                <div style='margin-bottom:30px'>
                     <span style='font-size:18px;color;#000000;'>使用组件评分</span>
                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
                </div>
                <div v-for="(item,index) in applicationList" :key='index' >
                    <div style='display:flex'>
                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
                        </div>
                        <span class='num-style'>{{item.name}}</span>
                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.score}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class='footer'>
            <div class='footer-left' ></div>
            <span style='color:#b7c2d1;font-size:16px'>到底啦</span>
            <div class='footer-right'></div>
            </div>
    </div>
 </template>
 <script>
 import * as echarts from 'echarts'
 export default {
  props: {
    tableId: {
      type: String,
      default: ''
    },
    fatherId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      data1: [],
      data2: [
        // { value: 1048,name: '算法' },
        // { value: 735, name: '图层' },
        // { nums: 580, attr_value: '开发' },
        // { nums: 484, attr_value: '业务' },
      ],
      data3: [
        // { value: 1048,name: '算法' },
      ],
      colorList: ['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)', 'linear-gradient(to right,rgba(250, 179, 2,.6),transparent)', 'linear-gradient(to right,rgba(82, 106, 255,.6),transparent', 'linear-gradient(to right,rgba(82, 106, 255,.6),transparent)'],
      widthList: ['90px', '80px', '70px', '60px', '50px'],
      numColorList: ['#fc5656', '#ff8a00', '#f9af0a', '#808fff', '#808fff'],
      usedList: [{ name: '组件名称一', useNum: 111 }, { name: '组件名称一', useNum: 111 }, { name: '组件名称一', useNum: 111 }, { name: '组件名称四', useNum: 111 }, { name: '组件名称五', useNum: 111 }],
      applicationList: [{ name: '组件名称一', score: 111 }, { name: '组件名称一', score: 111 }, { name: '组件名称一', score: 111 }, { name: '组件名称四', score: 111 }, { name: '组件名称五', score: 111 }]
    }
  },
  created () {
    if (this.fatherId === 1) {
      this.getBeCalled()
      this.getBeApplied()
      this.getAlgorithm()
      this.getDistributed()
      this.getScoreList()
    } else {
    }
  },
  mounted () {
  },
  methods: {
    // 评分发布情况
    getScoreList () {
      this.$http.get('/census/center/v3/assemblerScoreInfo', {
        params: {
          id: this.tableId,
          resourceType: '应用资源'
          // pageNo: pageNo || 1,
          // pageSize: 20
        }
      }).then(res => {
        let arry = []
        arry = res.data.data
        arry.forEach((item) => {
          const single = {
            value: item.scoreNum,
            name: item.score
          }
          // const newList=[]
          this.data1.push(single)
          // this.data2=newList
          this.myEcharts1()
        })
      })
    },
    // 算法图层开发业务
    getAlgorithm () {
      this.$http.get('/census/center/v3/assemblerUsedInfo', {
        params: {
          id: this.tableId,
          resourceType: '组件服务'
          // pageNo: pageNo || 1,
          // pageSize: 20
        }
      }).then(res => {
        let arry = []
        arry = res.data.data
        arry.forEach((item) => {
          const single = {
            value: item.nums,
            name: item.attr_value
          }
          // const newList=[]
          this.data2.push(single)
          // this.data2=newList
          this.myEcharts2()
        })
      })
    },
    // 应用领域分布
    getDistributed () {
      this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList', {
        params: {
          id: this.tableId,
          resourceType: '组件服务'
        }
      }).then(res => {
        let arry = []
        arry = res.data.data
        arry.forEach((item) => {
          const single = {
            value: item.total,
            name: item.type
          }
          this.data3.push(single)
          this.myEcharts3()
        })
      })
    },
    // top5使用组件
    getBeCalled () {
      this.$http.get('/census/center/v3/assemblerUseTopInfo', {
        params: {
          id: this.tableId,
          resourceType: '组件服务'
          // pageNo: pageNo || 1,
          // pageSize: 20
        }
      }).then(res => {
        this.usedList = res.data.data
      })
    },
    // 使用组件评分5
    getBeApplied () {
      this.$http.get('/census/center/v3/assemblerUseScoreTopInfo', {
        params: {
          id: this.tableId,
          resourceType: '应用资源'
          // pageNo: pageNo || 1,
          // pageSize: 20
        }
      }).then(res => {
        this.applicationList = res.data.data
      })
    },
    myEcharts1 () {
      var chartDom = document.getElementById('main1')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: '',
          top: '14%',
          left: '55%',
          width: 'auto',
          height: 'auto',
          orient: 'vertical',
          itemGap: 15,
          itemWidth: 14,
          // 使用回调函数
          formatter: function (name) {
            var data = option.series[0].data
            var total = 0
            var tarValue
            for (var i = 0; i < data.length; i++) {
              total += Number(data[i].value)
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            var v = tarValue
            var p = Math.round(((v / total) * 100))
            return `${name}            ${p}%`
          },
          itemStyle: {},
          textStyle: {
            color: '#666666',
            padding: [0, 8, 0, 18]
          }
        },
        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['22%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.data1
          }
        ]
      }
      option && myChart.setOption(option)
    },
    myEcharts2 () {
      var chartDom = document.getElementById('main2')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: '',
          top: '22%',
          left: '50%',
          width: 'auto',
          height: 'auto',
          orient: 'vertical',
          itemGap: 15,
          itemWidth: 14,
          // 使用回调函数
          formatter: function (name) {
            var data = option.series[0].data
            var total = 0
            var tarValue
            for (var i = 0; i < data.length; i++) {
              total += Number(data[i].value)
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            var v = tarValue
            var p = Math.round(((tarValue / total) * 100))
            return `${name}         ${p}%`
          },
          itemStyle: {},
          textStyle: {
            color: '#666666',
            padding: [0, 8, 0, 18]
          }
        },
        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['22%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.data2
          }
        ]
      }
      option && myChart.setOption(option)
    },
    myEcharts3 () {
      var chartDom = document.getElementById('main3')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          type: 'scroll',
          top: '22%',
          left: '50%',
          width: 'auto',
          height: 'auto',
          orient: 'vertical',
          itemGap: 15,
          itemWidth: 14,
          // 使用回调函数
          formatter: function (name) {
            var data = option.series[0].data
            var total = 0
            var tarValue
            for (var i = 0; i < data.length; i++) {
              total += Number(data[i].value)
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            // var v = tarValue;
            var p = Math.round(((tarValue / total) * 100))
            console.log('@@@@', tarValue, total)
            return `{a|${name}}  {b|${p}%}`
          },
          itemStyle: {},
          textStyle: {
            rich: {
              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
              a: {
                // 设置文字、数学、英语这一列的样式
                width: 100,
                color: '#000000',
                fontSize: 12,
                fontWeight: 'bolder'
              },
              b: {
                // 设置10分、20分、30分这一列的样式
                width: 35,
                color: '#333',
                fontSize: 12
              }
            },
            color: '#666666',
            backgroundColor: 'transparent',
            padding: [0, 8, 0, 18]
          }
        },
        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['22%', '50%'],
            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: this.data3
          }
        ]
      }
      option && myChart.setOption(option)
    },
    backBtn () {
      this.$emit('closeChild2')
    }
  }
 }
 </script>
 <style scoped>
 .container {
  padding-top: 15px;
  display: flex;
  flex-direction: column;
 }
 .title-style {
  font-size: 24px;
  color: #000000;
  font-weight: bold;
 }
 .page-introduction {
  font-size: 18px;
  color: #666666;
  margin-left: 20px;
 }
 .back-btn {
  background: #3e8ef7;
  border-color: rgba(101, 165, 249, 0);
  color: #fff;
  margin-left: 1030px;
  padding-bottom: 3px;
 }
 .container-body {
  width: 1300px;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
 }
 .container-body1 {
  width: 420px;
  height: 250px;
  background-color: #ffffff;
  margin-right: 20px;
  padding-top: 20px;
  padding-left: 20px;
 }
 .container-body2 {
  width: 640px;
  height: 250px;
  background-color: #ffffff;
  margin-right: 20px;
  padding-top: 20px;
  padding-left: 20px;
 }
 .container-body3 {
  width: 640px;
  height: 250px;
  background-color: #ffffff;
  padding-top: 20px;
  padding-left: 20px;
 }
 .container-body4 {
  width: 640px;
  height: 300px;
  background-color: #ffffff;
  padding-top: 20px;
  padding-left: 20px;
  margin-top: 20px;
  margin-right: 20px;
  background-image: url("../../../assets/img/排行榜背景图.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
 }
 .container-body5 {
  width: 640px;
  height: 300px;
  background-color: #ffffff;
  padding-top: 20px;
  padding-left: 20px;
  margin-top: 20px;
  background-image: url("../../../assets/img/排行榜背景图.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
 }
 .footer {
  display: flex;
  margin-top: 50px;
  margin-left: 365px;
 }
 .footer-left {
  width: 250px;
  height: 1px;
  background-color: #e0eaf8;
  margin-right: 10px;
  margin-top: 8px;
 }
 .footer-right {
  width: 250px;
  height: 1px;
  background-color: #e0eaf8;
  margin-left: 10px;
  margin-top: 8px;
 }
 .ranking-img {
  width: 60px;
  height: 26px;
  display: flex;
  line-height: 26px;
  margin-bottom: 15px;
  margin-right: 10px;
  padding-left: 15px;
 }
 .num-style {
  position: absolute;
  display: flex;
  margin-left: 90px;
  width: 200px;
  margin-top: 5px;
  color: #333333;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
 }
 .count-style {
  position: absolute;
  display: flex;
  margin-left: 400px;
  margin-top: 5px;
  color: #333333;
  font-size: 18px;
  font-weight: bold;
 }
 </style>
--- a/back/src/views/modules/abilityStatistics/index.vue
+++ b/back/src/views/modules/abilityStatistics/index.vue
@ -0,0 +1,748 @@
 <template>
 <div >
    <div class='container'>
         <!-- <div class='container-left'  v-if='homeIsShow'>
        <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-form :inline="true">
           <!--起始日期 @keyup.enter.native="getDataList()"-->
         <el-form-item>
         <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
           format='yyyy-MM-dd HH:mm:ss'
            value-format='yyyy-MM-dd HH:mm:ss'
          >
          </el-date-picker>
         </el-form-item>
          <!--审核状态-->
        <el-form-item>
          <el-select
            v-model="examineStatus"
            placeholder="请选审核状态"
            clearable
          >
            <el-option
              label="审核完成"
              value="1"
            ></el-option>
            <el-option
              label="审核中"
              value="0"
            ></el-option>
          </el-select>
        </el-form-item>
          <!--部门-->
         <el-form-item>
          <el-select
            v-model="abilityDepartment"
            placeholder="请选择部门"
            clearable
          >
             <el-option label="全部" value=""></el-option>
            <el-option v-for="item in departmentSelects" :key="item.label" v-bind="item"></el-option>
          </el-select>
        </el-form-item>
         <!--类型-->
         <el-form-item>
          <el-select
            v-model="abilityType"
            placeholder="请选择类型"
            clearable
          >
             <el-option label="全部" value=""></el-option>
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.name" v-bind="item"></el-option>
          </el-select>
        </el-form-item>
        <!--操作按钮查询-->
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <!--操作按钮重置-->
        <el-form-item>
          <el-button type="primary" @click="resetDataList()">{{ $t('reset') }}</el-button>
        </el-form-item>
        </el-form>
     <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>
    <div class="mod-demand__bsdemand">
       <!--  <div class='top-box'>
            <span class='title'>能力统计</span>
            <div class='title-list-style'>
            <div v-for="(item,index) in titleList" :key='index' class='title-single' :class="{'choseStyle':choseId=== index}" @click="choseBtn(index)">
             <span class='box-style'>{{item.name}}</span>
            </div>
           </div>
        </div> -->
         <div class='second-title'>
            <span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
                能力上架统计
            </span>
            <span  :class="[departmentId===2?'departmentStyle':'']"  @click="handleChose(2)">
               能力使用统计
            </span>
         <!--   <span v-if='this.choseId===0' :class="[departmentId===3?'departmentStyle':'']"  @click="handleChose(3)">
                能力上架明细
            </span>
           <span v-if='this.choseId===0' :class="[departmentId===4?'departmentStyle':'']"  @click="handleChose(4)">
                能力使用明细
            </span> -->
            <span  v-if="detailFlag" class="detail-button" @click="goToDetail()">
               明细
            </span>
            <span  v-else class="detail-button" @click="goToBack()">
               返回
            </span>
         </div>
         <div class='line-style'></div>
         <!--统计表-->
          <el-table
            :data="tableData"
            :header-cell-style="{textAlign:'center'}"
            :cell-style="{textAlign:'center'}"
            border
            style="width: 100%" v-if='this.departmentId===1 ||this.departmentId===2'>
        <el-table-column
            prop="name"
            label="部门名称"
            min-width="100%">
        </el-table-column>
            <el-table-column label="组件">
              <el-table-column
                  prop="znsf"
                  label="智能算法"
                  min-width="100%">
              </el-table-column>
              <el-table-column
                  prop="tcfw"
                  label="图层服务"
                  min-width="100%">
              </el-table-column>
              <el-table-column
                    prop="kfzj"
                    label="通用开发组件"
                    min-width="100%">
                </el-table-column>
              <el-table-column
                      prop="ywzj"
                      label="业务能力组件"
                      min-width="100%">
            </el-table-column>
            </el-table-column>
            <el-table-column
                prop="yyzy"
                label="应用资源"
                min-width="100%">
            </el-table-column>
            <el-table-column
                prop="zj"
                label="总计"
                min-width="100%">
            </el-table-column>
         </el-table>
        <!--明细表-->
      <el-table
          :data="tableData"
          :header-cell-style="{textAlign:'center'}"
          :cell-style="{textAlign:'center'}"
          border
          style="width: 100%" v-if='this.departmentId===3 ||this.departmentId===4'>
        <el-table-column
            prop="deptName"
            label="部门"
            min-width="100%">
        </el-table-column>
        <el-table-column
            prop="resourceName"
            label="资源名称"
            min-width="100%">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          min-width="100%">
       </el-table-column>
        <el-table-column
            prop="createDate"
            label="日期"
            min-width="100%">
        </el-table-column>
        <el-table-column
            prop="approveStatus"
            label="状态"
            min-width="100%">
        </el-table-column>
      </el-table>
    <div class="block">
    <el-pagination
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next, jumper"
      :total="total"
      :page-size="5"
      :current-page="currentPage"
      >
    </el-pagination>
  </div>
    </div>
  </el-card>
    </div>
   <component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild2='closeChild2'></component-used>
   <component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
   <application-resources  v-if='resourcesIsShow'  :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
 </div>
 </template>
 <script>
 import componentServices from './componentServices.vue'
 import applicationResources from './applicationResources.vue'
 import ComponentUsed from './componentUsed.vue'
 import { mapState } from 'vuex'
 export default {
  components: { componentServices, applicationResources, ComponentUsed },
  data () {
    return {
      inputTxt: '',
      tableId: '',
      fatherId: '',
      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'
          }]
        }]
      }],
      total: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      choseId: 0,
      departmentId: 1,
      currentPage: 1,
      homeIsShow: true,
      servicesIsShow: false,
      resourcesIsShow: false,
      UsedIsShow: false,
      titleList: [
        { name: '组件服务', key: 1 }, { name: '应用资源', key: 2 }, { name: '基础设施', key: 3 }, { name: '数据资源', key: 3 }, { name: '知识库', key: 3 }
      ],
      tableData: [{ deptName: '部门', resourceNum: 222 }],
        examineStatus: '0',//审核状态
       value1:[],//起始时间
       abilityDepartment:"",//部门
       abilityType:"",//能力
       beginTime: '',//开始时间
       endTime: '',//结束时间
       typeOptions:[
        { name: '智能算法', value: 1 },
        { name: '图层服务', value: 2 }, 
        { name: '通用开发组件', value: 3 }, 
        { name: '页面开发组件', value: 4 }, 
        { name: '应用资源', value: 5 }],//类型备选列表
        detailFlag:true,//明细返回按钮显示标志位
    }
  },
  created () {
 //当前设定的日期时间
      let d = new Date
      let year1,month1,day1;
      [year1,month1,day1] = [d.getFullYear(),d.getMonth(),d.getDate()]
      let date1 = new Date(year1, month1, day1,7)
      this.value1.push(date1)
      //前一天设定的日期时间
      let year2,month2,day2
      d.setTime(d.getTime()-24*60*60*1000);
      [year2,month2,day2] = [d.getFullYear(),d.getMonth(),d.getDate()]
      let date2 = new Date(year2,month2,day2,7)
      this.value1.unshift(date2)
  },
  mounted () {
    this.getFirstTree()
  },
     computed: {
    ...mapState(['departmentSelects'])
  },
  methods: {
    // 搜索框
    // searchBtn(){
    //     this.getALLTree()
    // },
    //  //树
    //     handleNodeClick(data) {
    //         console.log(data.name);
    //         this.getTreeName(data)
    //     },
    // 翻页
    handleCurrentChange (val) {
      if (this.choseId === 0) {
        this.getFirstTree(val)
      } else if (this.choseId === 1) {
        this.getReleaseTree(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 (page) {
      this.$http.get('/census/center/selectDeptDetailTypeCountList/', {
        params: {
          page: page || 1,
          limit: 5,
          approveStatus: '',
          deptId: '',
          params: '',
          startDate: ''
        }
      }).then(res => {
        let result= res.data.data
        for(let i=0;i<result.length;i++){
               if(!result[i].hasOwnProperty('yyzy') ){
                 result[i].yyzy= 0
               }
          if(!result[i].hasOwnProperty('kfzj') ){
            result[i].kfzj= 0
          }
          if(!result[i].hasOwnProperty('znsf') ){
            result[i].znsf= 0
          }
          if(!result[i].hasOwnProperty('tcfw') ){
            result[i].tcfw= 0
          }
          if(!result[i].hasOwnProperty('ywzj') ){
            result[i].ywzj= 0
          }
          result[i].zj=parseInt(result[i].yyzy)+ parseInt(result[i].kfzj)+parseInt(result[i].znsf)+parseInt(result[i].ywzj)+parseInt(result[i].tcfw)
        }
        this.tableData = res.data.data
        this.total = res.data.data.total
      })
    },
    // 组件服务部门使用情况列表-改为能力使用统计
    getSecondTree () {
      this.$http.get('/census/center/selectApplyDeptDetailTypeCountList/', {
        params: {
         // page: page || 1,
          limit: 5,
          approveStatus: '',
          deptId: '',
          params: '',
          startDate: ''
        }
      }).then(res => {
        let result= res.data.data
        for(let i=0;i<result.length;i++){
          if(!result[i].hasOwnProperty('yyzy') ){
            result[i].yyzy= 0
          }
          if(!result[i].hasOwnProperty('kfzj') ){
            result[i].kfzj= 0
          }
          if(!result[i].hasOwnProperty('znsf') ){
            result[i].znsf= 0
          }
          if(!result[i].hasOwnProperty('tcfw') ){
            result[i].tcfw= 0
          }
          if(!result[i].hasOwnProperty('ywzj') ){
            result[i].ywzj= 0
          }
          result[i].zj=parseInt(result[i].yyzy)+ parseInt(result[i].kfzj)+parseInt(result[i].znsf)+parseInt(result[i].ywzj)+parseInt(result[i].tcfw)
        }
        this.tableData = res.data.data
        this.total = res.data.data.total
      })
    },
    // 能力上架明细
    getOneDetail (page) {
      this.$http.get('/census/center/selectCensusResourceTable/', {
        params: {
          limit: 5,
         // page: page || 1,
          approveStatus: '',
          deptId: '',
          params: '',
          startDate: ''
        }
      }).then(res => {
        this.tableData = res.data.data
        this.total = res.data.data.total
      })
    },
    // 能力使用明细
    getTwoDetail (page) {
      this.$http.get('/census/center/selectCensusApplyTable/', {
        params: {
          limit: 5,
          // page: page || 1,
          approveStatus: '',
          deptId: '',
          params: '',
          startDate: ''
        }
      }).then(res => {
        this.tableData = res.data.data
        this.total = res.data.data.total
      })
    },
    getReleaseTree (page) {
      this.$http.get('/census/center/selectApplyDeptDetailTypeCountList/', {
        params: {
          limit: 5,
          // page: page || 1,
          approveStatus: '',
          deptId: '',
          params: '',
          startDate: ''
        }
      }).then(res => {
        let result= res.data.data
        for(let i=0;i<result.length;i++){
          if(!result[i].hasOwnProperty('yyzy') ){
            result[i].yyzy= 0
          }
          if(!result[i].hasOwnProperty('kfzj') ){
            result[i].kfzj= 0
          }
          if(!result[i].hasOwnProperty('znsf') ){
            result[i].znsf= 0
          }
          if(!result[i].hasOwnProperty('tcfw') ){
            result[i].tcfw= 0
          }
          if(!result[i].hasOwnProperty('ywzj') ){
            result[i].ywzj= 0
          }
          result[i].zj=parseInt(result[i].yyzy)+ parseInt(result[i].kfzj)+parseInt(result[i].znsf)+parseInt(result[i].ywzj)+parseInt(result[i].tcfw)
        }
        this.tableData = res.data.data
        this.total = res.data.data.total
      })
    },
    // 应用资源部门使用情况列表
    getUsedTree () {
      this.$http.get('/census/center/v3/resourceReleaseDetails/', {
        params: {
          limit: 5,
          page: 1,
          // id:'1067246875800000066',
          resourceType: '应用资源'
        }
      }).then(res => {
        this.tableData = res.data.data.list
      })
    },
    handleClick (row) {
      if (this.choseId === 0) {
        if (this.departmentId === 1) {
          this.homeIsShow = false
          this.servicesIsShow = true
          this.tableId = row.deptId
          this.fatherId = 1
        } else if (this.departmentId === 2) {
          this.homeIsShow = false
          this.UsedIsShow = true
          this.tableId = row.deptId
          this.fatherId = 1
        }
      } else if (this.choseId === 1) {
        this.homeIsShow = false
        this.resourcesIsShow = true
        this.tableId = row.deptId
        this.fatherId = 2
      }
    },
    // 选择组件
    choseBtn (index) {
      this.choseId = index
      this.handleChose(1)
    },
    //   choseBtn(index){
    //     this.choseId=index
    //     if (index===0){
    //         this.homeIsShow=false
    //         this.servicesIsShow=true
    //     } else if(index===1){
    //         this.homeIsShow=false
    //         this.servicesIsShow=false
    //         this.resourcesIsShow=true
    //     }
    //   },
    // 选择发布or使用表格
    handleChose (index) {
      this.departmentId = index
      if (index === 1) {
        if (this.choseId === 0) {
          this.getFirstTree()
        } else if (this.choseId === 1) {
          //this.getReleaseTree()
        }
      } else if (index === 2) {
        if (this.choseId === 0) {
          this.getSecondTree()
        } else {
          //this.getUsedTree()
        }
      }
      else if (index === 3) {
        if (this.choseId === 0) {
          this.getOneDetail()
        } else {
          //this.getUsedTree()
        }
      }  else if (index === 4) {
        if (this.choseId === 0) {
          this.getTwoDetail()
        } else {
         // this.getUsedTree()
        }
      }
    },
    // 翻页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    closeChild () {
      this.homeIsShow = true
      this.servicesIsShow = false
      this.handleCurrentChange(1)
    },
    closeChild2 () {
      this.homeIsShow = true
      this.UsedIsShow = false
      this.handleCurrentChange(1)
    },
    closeApplication () {
      this.homeIsShow = true
      this.resourcesIsShow = false
      this.handleCurrentChange(1)
    },
    //明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数
    goToDetail(){
      this.detailFlag = !this.detailFlag;
      if(this.departmentId===1){
       this.handleChose(3);
       //this.departmentId = 1;
      }else if(this.departmentId===2){
       this.handleChose(4);
       //this.departmentId = 2;
      }else{
      }
    },
    //返回按钮
    goToBack(){
      //departmentId 1，3  2，4 两个值共同判断
      this.detailFlag = !this.detailFlag;
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .container {
  display: flex;
  flex-direction: column;
 }
 .container-left {
  width: 250px;
  height: 1000px;
  display: inline-block;
  // 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;
    word-break: break-all;
  }
 }
 .top-box {
  height: 80px;
  width: 100%;
  background-color: #fafafc;
  display: inline-block;
 }
 .title {
  display: flex;
  font-size: 20px;
  color: #000000;
  font-weight: bold;
  padding-left: 15px;
  padding-top: 10px;
 }
 .title-list-style {
  display: flex;
  margin-top: 10px;
 }
 .title-single {
  font-size: 14px;
  width: 90px;
  color: #666666;
  height: 24px;
  margin-left: 10px;
  border: 1px solid #cccccc;
  border-radius: 12px;
  cursor: pointer;
 }
 .box-style {
  width: 90px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 2px;
 }
 .second-title {
  margin-top: 20px;
  font-size: 14px;
  color: #979eb9;
  cursor: pointer;
  .detail-button{
   width: 60px;
    height: 30px;
    right: 60px;
    background-color: #0058e1;
    position: absolute;
    text-align: center;
    line-height: 30px;
    margin-top: -20px;
    border-radius: 2px;
    color: #fff;
  }
 }
 .line-style {
  width: 100%;
  height: 1px;
  background-color: #f5f6fa;
  margin-top: 15px;
  margin-bottom: 15px;
 }
 .aui-card--fill {
  width: 100% !important;
  padding: 0px !important;
 }
 .choseStyle {
  color: #526aff;
  border: 1px solid #526aff;
 }
 .departmentStyle {
  color: #526aff;
 }
 ::v-deep .tree-text-styleJ {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
 }
 </style>
--- a/back/src/views/modules/activiti/RoomExamineAdmin.vue
+++ b/back/src/views/modules/activiti/RoomExamineAdmin.vue
@ -0,0 +1,330 @@
 <template>
  <el-card shadow="never" class="roomBox">
    <div class="roomExamineSearch">
      <el-input
        v-model="roomName"
        style="width: 160px"
        placeholder="请输入会议室名称"
      ></el-input>
      <el-select
        v-model="value"
        style="width: 160px"
        clearable
        placeholder="请选择审核状态"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="searchData">查询</el-button>
    </div>
    <div>
      <el-table border style="width: 100%" :data="tableData">
        <el-table-column
          label="申请人"
          prop="name"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="申请部门"
          prop="dept"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="申请会议室"
          prop="roomName"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          label="申请时段"
          prop="bookDate"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          label="申请状态"
          prop="state"
          header-align="center"
          align="center"
          :formatter="formatter"
        ></el-table-column>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="taskDetails(scope.row, scope.row.state)"
              >{{ scope.row.state == '1' ? '处理' : '详情' }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="lookData.roomName"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div class="modalResult" style="margin-bottom: 20px">处理结果</div>
      <div
        style="
          width: 100%;
          height: 0.01rem;
          border-top: 1px solid #ccc;
          transform: scaleY(0.5);
        "
      ></div>
      <div
        class="modalExamine"
        style="display: flex; flex-direction: column; margin-top: 20px"
      >
        <span style="margin-bottom: 20px">
          审核结果：{{ lookData.state === '2' ? '通过' : '不通过' }}
        </span>
        <span style="width: 90%; margin-bottom: 20px">
          审核意见：{{ lookData.auditViem }}
        </span>
      </div>
      <div class="modalYuyue" style="margin-bottom: 20px">预约信息</div>
      <div
        style="
          width: 100%;
          height: 0.01rem;
          border-top: 1px solid #ccc;
          transform: scaleY(0.5);
        "
      ></div>
      <div class="modalTime" style="margin-bottom: 20px">
        <div style="margin: 20px 0 20px 0">
          预约日期：{{ lookData.bookDate }}
        </div>
        <div>预约时段：{{ lookData.startTime }}-{{ lookData.endTime }}</div>
        <div
          class="modalContent"
          style="
            width: 85%;
            display: flex;
            justify-content: space-between;
            margin: 15px 0 15px 0;
          "
        >
          <span>预约人：{{ lookData.name }}</span>
          <span>联系方式：{{ lookData.phone }}</span>
          <span>预约部门：{{ lookData.dept }}</span>
        </div>
        <div style="width: 800px; margin-bottom: 30px">
          使用事项：{{ lookData.matter }}
        </div>
      </div>
      <div>
        <div style="display: flex; align-items: center">
          <span>附件：</span>
          <el-button
            v-show="file != ''"
            size="mini"
            @click="downloadTemplate(file)"
            >下载</el-button
          >
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="lookData.roomName"
      :visible.sync="dialogVisibleChuli"
      width="50%"
    >
      <div class="modalResult" style="margin-bottom: 10px">预约信息</div>
      <div
        style="
          width: 100%;
          height: 0.01rem;
          border-top: 1px solid #ccc;
          transform: scaleY(0.5);
        "
      ></div>
      <el-row style="display: flex; margin-top: 20px">
        <el-col :span="8">预约日期：{{ lookData.bookDate }}</el-col>
        <el-col :span="8"
          >预约时段：{{ lookData.startTime }}-{{ lookData.endTime }}</el-col
        >
      </el-row>
      <div class="modalTime">
        <el-row class="modalContent" style="margin: 15px 0 15px 0">
          <el-col :span="8">申请人：{{ lookData.name }}</el-col>
          <el-col :span="8">联系方式：{{ lookData.phone }}</el-col>
          <el-col :span="8">申请部门：{{ lookData.dept }}</el-col>
        </el-row>
        <el-row style="margin-bottom: 30px">
          <el-col :span="24"> 使用事项：{{ lookData.matter }} </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">审核结果：</el-col>
          <el-col :span="8" style="display: flex">
            <el-radio v-model="radio" label="2">通过</el-radio>
            <el-radio v-model="radio" label="3">不通过</el-radio>
          </el-col>
        </el-row>
        <el-row style="display: flex; margin-top: 20px">
          <el-col :span="2">审核意见：</el-col>
          <el-col :span="16">
            <el-input type="textarea" v-model="desc"></el-input>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="No">取 消</el-button>
          <el-button type="primary" @click="ok">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </el-card>
 </template>
 <script>
 import Cookies from 'js-cookie'
 export default {
  data() {
    return {
      options: [
        {
          value: '1',
          label: '待审核',
        },
        {
          value: '0',
          label: '审核完成',
        },
      ],
      value: '',
      limit: 10,
      page: 1,
      total: 0,
      roomName: '',
      tableData: [],
      dialogVisible: false,
      dialogVisibleChuli: false,
      lookData: {},
      radio: '2',
      desc: '',
      id: '',
      num: '',
      file: '',
    }
  },
  mounted() {
    this.getSerach()
  },
  methods: {
    getSerach() {
      this.$http
        .get(
          `/bookMeeting/auditPage?page=${this.page}&limit=${this.limit}&roomName=${this.roomName}&state=${this.value}`
        )
        .then(({ data: res }) => {
          console.log(res, 7777777)
          this.tableData = res.data.list
          this.total = res.data.total
        })
    },
    downloadTemplate(file) {
      // window.SITE_CONFIG.apiURL +
      window.open(`${file}?token=` + Cookies.get('ucsToken'))
    },
    handleSizeChange(val) {
      this.limit = val
      this.getSerach()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getSerach()
    },
    searchData() {
      this.getSerach()
    },
    taskDetails(item, num) {
      if (num == '1') {
        this.dialogVisibleChuli = true
        this.id = item.id
      } else {
        this.dialogVisible = true
        this.$http.get(`bookMeeting/${item.id}`).then(({ data: res }) => {
          console.log(55555555)
          this.file = res.data.file
        })
      }
      this.lookData = item
    },
    ok() {
      let query = {
        auditViem: this.desc,
        state: this.radio,
        id: this.id,
      }
      this.$http.put('/bookMeeting', query).then(({ data: res }) => {
        this.dialogVisibleChuli = false
        this.radio = '2'
        this.desc = ''
        this.getSerach()
      })
    },
    No() {
      this.radio = '2'
      this.desc = ''
      this.dialogVisibleChuli = false
    },
    formatter(row, column) {
      return row.state == '1' ? '待审核' : '审核完成'
    },
  },
 }
 </script>
 <style scoped lang="scss">
 .roomBox {
  min-height: calc(calc(100vh - 50px - 38px - 30px));
  .roomHeadSpan {
    font-weight: 600;
  }
  .roomExamineSearch {
    display: flex;
    width: 410px;
    margin-bottom: 20px;
    justify-content: space-between;
  }
 }
 .dialog-footer {
  text-align: center;
  margin-top: 40px;
 }
 // ::v-deep .el-input {
 //   margin-right: 15px;
 //   display: inline-block;
 // }
 // ::v-deep .el-select {
 //   margin-right: 20px;
 //   display: inline-block;
 // }
 </style>
--- a/back/src/views/modules/activiti/demo/abilitydemandapply-new.vue
+++ b/back/src/views/modules/activiti/demo/abilitydemandapply-new.vue
@ -0,0 +1,417 @@
 <!--  流程业务表单   -->
 <template>
  <el-card shadow="never" class="aui-card--fill">
  <!-- 申请人详情 -->
  <div>
     <h3>申请人信息</h3>
    <div class="big-BOX">
      <p>
        <span>申请人：<span> {{dataForm.content.applyUserName || '--'}}</span></span>
         <span>电话：<span>{{dataForm.content.applyUserPhone || '--'}}</span></span>
         <span>单位：<span>{{dataForm.content.applyUserDeptName || '--'}}</span></span>
      </p>
       <p>
         <span>应用领域：<span>{{dataForm.content.detailsField || '--'}}</span></span>
       <span> 需求类型：<span> {{dataForm.content.detailsType || '--'}}</span></span>
      <span> 需求标题： <span> {{dataForm.content.demandSubject || '--'}}</span></span>
      </p>
      <p>
      <span> 需求描述：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
      </p>
      <p>
      <span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button  @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
      </p>
    </div>
  </div>
  <!-- 申请能力 -->
  <div class="AbilityApply">
     <h3>申请能力</h3>
    <ul  v-for="item in dataList" :key="item.id">
      <li class="title">{{item.address}}</li>
      <li class="clearfix">
            <img
              src="~@/assets/img/imgLeft.png"
            />
            <div>
            <h2>{{item.name}}<span>{{item.type}}</span></h2>
            <p>{{item.describe}}</p>
            </div>
      </li>
    </ul>
  </div>
    <!--  流程综合组件   -->
  <!--   <ren-process-multiple
      v-if="processVisible"
      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
      saveFormUrl="/processForm/tabilityapplication"
      dataFormName="dataForm"
      ref="renProcessMultiple"
    ></ren-process-multiple> -->
    <!-- 审批 -->
    <div class="agreeOr">
      <h3>审批</h3>
      <div>
        <el-radio-group v-model="agreeOrList" style="width:230px;">
          <el-radio-button label="同意" class="blueAll">同意</el-radio-button>
          <el-radio-button label="退回" class="redAll">退回</el-radio-button>
        </el-radio-group>
        <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意内容"></el-input>
        <el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回内容"></el-input>
         <el-button class="inputBule" @click="agreeOrNot">提交</el-button>
      </div>
    </div>
 <!--  流程详情   -->
    <ren-process-detail-import></ren-process-detail-import>
  </el-card>
 </template>
 <script>
 // 引入工作流公共方法
 import processModule from '@/mixins/process-module'
 import qs from 'qs'
 import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
 export default {
  // 注入公共方法
  mixins: [processModule],
  data () {
    return {
      visible: true,
      // 表单属性是否可编辑
      // fieldDisabled: false,
      // dataForm: {
      //   id: '',
      //   user: '',
      //   phone: '',
      //   unit: '',
      //   area: '',
      //   system: '',
      //   scene: '',
      //   basis: ''
      // }
      dataForm: {
        id: '',
        content: []
      },
      dataList: [
        {
          // img: '~@/assets/img/imgLeft.png',
          address: '青岛市应急管理局',
          name: '组件名称',
          type: '组件服务',
          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
        },
        {
          // img: '~@/assets/img/imgLeft.png',
          address: '青岛市应急管理局',
          name: '组件名称',
          type: '组件服务',
          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
        },
        {
          // img: '~@/assets/img/imgLeft.png',
          address: '青岛市应急管理局',
          name: '组件名称',
          type: '组件服务',
          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
        }
      ],
      inputAgree: '',
      inputNo: '',
      agreeOrList: '同意'
    }
  },
  created () {
    // 将业务KEY赋值给表单
    this.dataForm.id = this.$route.params.businessKey
    console.log(this.dataForm, 'ela')
    this.init()
    // 流程回调
    var callbacks = {
      startProcessSuccessCallback: this.closeCurrentTab,
      startProcessErrorCallback: this.startProcessErrorCallback,
      taskHandleSuccessCallback: this.closeCurrentTab,
      taskHandleErrorCallback: this.taskHandleErrorCallback,
      formSaveSuccessCallback: null,
      formSaveErrorCallback: null
    }
    // 初始化综合组件
    this.initProcessMultiple(callbacks)
  },
  computed: {
    // dataRule () {
    //   return {
    //     inputAgree: [
    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
    //     ],
    //     inputNo: [
    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
    //     ]
    //   }
    // }
  },
  components: {
    RenProcessDetailImport
  },
  methods: {
    init () {
      // this.visible = true
      this.$nextTick(() => {
        // this.$refs.dataForm.resetFields()
        if (this.dataForm.id) {
          // 如业务KEY已存在，不允许编辑
          // this.fieldDisabled = true
          this.getInfo()
          console.log(this.dataForm, 'init')
        }
      })
    },
    // 获取信息
    getInfo () {
      this.$http
        .get(`/demanData/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            console.log(res.data)
            return this.$message.error(res.msg)
          }
          console.log(res.data, 'elas')
          this.dataForm.content = res.data
          console.log(this.dataForm, 'ela')
        })
        .catch(() => {})
    },
    // 申请能力
    applyData () {
      this.$http
        .get(`/resource/select/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            console.log(res.data, 'wh')
            // return this.$message.error(res.msg)
          }
          // console.log(res.data, 'elas')
          // this.dataForm.content = res.data
          // console.log(this.dataForm, 'ela')
        })
        .catch(() => {})
    },
    // 同意与退回
    agreeOrNot () {
      if (this.agreeOrList === '同意') {
        console.log('this.dataForm', this.dataForm)
        const params = qs.stringify({
          taskId: this.dataForm.content.instanceId,
          comment: this.inputAgree
        })
        console.log(params)
        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
          if (res.code !== 0) {
            console.log(res)
            this.$message.error(res.msg)
          }
        }).catch(() => {})
      } else if (this.agreeOrList === '退回') {
        const params = qs.stringify({
          taskId: this.dataForm.content.instanceId,
          comment: this.inputNo
        })
        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 启动流程出错回调
    startProcessErrorCallback (data) {
      console.log(data)
    },
    // 任务处理出错回调
    taskHandleErrorCallback (data) {}
  },
  mounted () {
    this.applyData()
  }
 }
 </script>
 <style scoped lang="scss">
 ::v-deep .big-BOX{
  background:rgba(244,245,248,0.8);
  padding:24px;
  h3{
    font-size:16px;
    color:#212121
  }
  p{
    width:78%;
    display:flex;
    justify-content: space-between;
    color:#212121;
    font-size:14px;
    span{
      display:inline-block;
      margin-left:8px;
      line-height:32px;
      span{
        font-weight:bold;
      }
    }
  }
  p:last-of-type{
    margin-top:16px;
    width:100%;
    span{
      display:flex;
      span{
      padding-left:12px;
      height:32px;
      background:rgba(232,234,239,1);
      border-radius:2px;
      button{
        background:unset;
        border:0;
        color:#0558e1;
        font-size:14px;
      }
      }
    }
  }
 }
 ::v-deep .AbilityApply{
    margin-top:32px;
  h3{
     font-size:16px;
    color:#212121;
    border-bottom:1px solid #dddee1;
    padding-bottom:10px;
  }
  ul{
    padding-left: 0px;
     li{
      list-style:none;
    padding: 30px 0;
    border-bottom: 1px solid #dddee1;
    display:flex;
    img{
      width:100px;
      height:100px;
    }
    div{
      margin-left:16px;
          display: flex;
    flex-direction: column;
    justify-content: center;
    h2{
      margin-bottom:20px;
      font-size:20px;
      color:#000;
      display:flex;
      span{
        display:block;
        font-size:14px;
        color:#ffffff;
        margin-left:8px;
        background:rgba(0,184,230,0.8);
        display: flex;
    align-items: center;
    padding: 0 5px;
    border-radius: 4px;
      }
    }
     p{
      margin-bottom:0;
    }
    }
    }
    .clearfix:after{
      display:block;
      content:"";
      clear:both;
    }
    .title{
      color:#0558e1;
      font-size:18px;
      padding-bottom:0;
    border-bottom: 0;
    }
     .title:before {
           content: "";
           width: 6px;
           height: 6px;
           display: inline-block;
           border-radius: 50%;
           background: #0558e1;
           vertical-align: middle;
          margin-right: 10px;
    margin-top: 6px;
           }
  }
 }
 ::v-deep .agreeOr>div{
  display:flex;
      align-items: center;
  .el-input{
    margin-right: 10px;
    margin-left: 32px;
  }
 }
 ::v-deep   .agreeOr>div:last-of-type{
    margin-top:15px;
  }
  .blueAll{
    ::v-deep .el-radio-button__inner{
    width:80px;
    height:32px;
    line-height:32px;
    padding:0;
    border-radius:2px;
    background:#0558e1;
    color:#ffffff;
    border:1px solid #0558e1;
  }
  }
  .inputBule{
     width:55px;
    height:32px;
    line-height:32px;
    padding:0;
    border-radius:2px;
    background:#0558e1;
    color:#ffffff;
    border:1px solid #0558e1;
  }
   ::v-deep .is-active{
   background:#ffffff;
    color:#0558e1;
  }
  .redAll{
    margin-left:10px;
    ::v-deep .el-radio-button__inner{
    width:80px;
    height:32px;
    line-height:32px;
    padding:0;
    border-radius:2px;
   border:1px solid #e83a48;
    background:#ffffff;
    color:#e83a48;
    margin-left:10px;
    }
    :v-deep .el-radio-button__inner{
      box-shadow: unset;
    }
  }
  .blueInput{
    width:55px;
  }
 </style>
--- a/back/src/views/modules/activiti/demo/abilitydemandapply.vue
+++ b/back/src/views/modules/activiti/demo/abilitydemandapply.vue
@ -64,25 +64,55 @@
      </el-form-item>
    </el-form>
    <!--  流程综合组件   -->
-    <ren-process-multiple
+    <!-- <ren-process-multiple
      v-if="processVisible"
      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
      saveFormUrl="/processForm/tabilityapplication"
      dataFormName="dataForm"
      ref="renProcessMultiple"
-    ></ren-process-multiple>
+    ></ren-process-multiple> -->
     <!-- 审批 -->
    <div class="agreeOr" v-if="taskId">
      <div>
        <el-button type="primary" @click="showDialog('同意')">同意</el-button>
        <el-button type="danger" plain @click="showDialog('拒绝')"
          >驳回</el-button
        >
      </div>
    </div>
    <!-- 审批弹窗 -->
     <el-dialog
      title="审批意见"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-input v-model="input" placeholder="请输入审批意见"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose2">取 消</el-button>
        <el-button
          type="primary"
          @click.native="agreeOrNot($store.state.contentTabsActiveName)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-card>
 </template>
 <script>
 // 引入工作流公共方法
 import processModule from '@/mixins/process-module'
 import qs from 'qs'
 import debounce from 'lodash/debounce'
 import bus from '@/views/bus.js'
 export default {
  // 注入公共方法
  mixins: [processModule],
  data () {
    return {
-      visible: false,
+      // visible: false,
      // 表单属性是否可编辑
      fieldDisabled: false,
      dataForm: {
@ -94,7 +124,13 @@ export default {
        system: '',
        scene: '',
        basis: ''
-      }
+      },
      // 审批
      dialogVisible: false,
      dialogType: '',
      input: '',
      visible: true,
      taskId: ''
    }
  },
  created () {
@ -113,6 +149,8 @@ export default {
    }
    // 初始化综合组件
    this.initProcessMultiple(callbacks)
    this.taskId = this.$route.params.taskId
    this.dataForm.taskId = this.$route.params.taskId
  },
  computed: {
    dataRule () {
@ -164,6 +202,128 @@ export default {
        })
        .catch(() => {})
    },
    // 审批
    showDialog (title) {
      this.dialogVisible = true
      this.dialogType = title
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.input = ''
          done()
        })
        .catch((_) => {})
    },
    handleClose2 () {
      this.dialogVisible = false
      this.input = ''
    },
    // 同意与退回
    agreeOrNot: debounce(
      function (data) {
        this.dataForm.taskId = this.$route.params.taskId
        if (this.dialogType === '同意') {
          if (this.input !== '') {
            console.log('this.dataForm', this.dataForm)
            const params = qs.stringify({
              taskId: this.dataForm.taskId,
              comment: this.input
            })
            console.log(params)
            this.$http
              .post('/act/task/complete?' + params)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  this.$message.error(res.msg)
                  if (this.callbacks.taskHandleErrorCallback) {
                    this.callbacks.taskHandleErrorCallback(res)
                  }
                  return
                }
                bus.$emit('AbilityResourcesRemovedInit')
                this.$message({
                  message: this.$t('prompt.success'),
                  type: 'success',
                  duration: 500,
                  onClose: () => {
                    this.visible = false
                    this.dialogVisible = false
                    if (this.callbacks.taskHandleSuccessCallback) {
                      this.callbacks.taskHandleSuccessCallback(res)
                    }
                  }
                })
              })
              .catch(() => {})
            this.tabRemoveHandle(data)
          } else {
            this.$message.error('请输入审批意见！')
          }
        } else if (this.dialogType === '拒绝') {
          if (this.input !== '') {
            const params = qs.stringify({
              taskId: this.dataForm.taskId,
              comment: this.input
            })
            this.$http
              .post('/act/task/backToFirst?', params)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  this.$message.error(res.msg)
                  if (this.callbacks.taskHandleErrorCallback) {
                    this.callbacks.taskHandleErrorCallback(res)
                  }
                  return
                }
                bus.$emit('AbilityResourcesRemovedInit')
                this.$message({
                  message: this.$t('prompt.success'),
                  type: 'success',
                  duration: 500,
                  onClose: () => {
                    this.visible = false
                    if (this.callbacks.taskHandleSuccessCallback) {
                      this.callbacks.taskHandleSuccessCallback(res)
                    }
                  }
                })
              })
            this.tabRemoveHandle(data)
          } else {
            this.$message.error('请输入审批意见！')
          }
        }
      },
      1000,
      { leading: true, trailing: false }
    ),
    tabRemoveHandle (tabName) {
      console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
      if (tabName === 'home') {
        return false
      }
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => item.name !== tabName
      )
      if (this.$store.state.contentTabs.length <= 0) {
        this.$store.state.sidebarMenuActiveName =
          this.$store.state.contentTabsActiveName = 'home'
        return false
      }
      // 当前选中tab被删除
      if (tabName === this.$store.state.contentTabsActiveName) {
        const tab =
          this.$store.state.contentTabs[
            this.$store.state.contentTabs.length - 1
          ]
        this.$router.push({
          name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
          params: { ...tab.params },
          query: { ...tab.query }
        })
      }
    },
    // 启动流程出错回调
    startProcessErrorCallback (data) {
      console.log(data)
@ -173,3 +333,12 @@ export default {
  }
 }
 </script>
 <style lang="scss">
 .agreeOr {
  & > div {
    // text-align: right;
    padding-right: 40px;
    margin: 20px 0;
  }
 }
 </style>
--- a/back/src/views/modules/activiti/demo/comments.vue
+++ b/back/src/views/modules/activiti/demo/comments.vue
@ -0,0 +1,294 @@
 <template>
  <div class="wrapper">
    <div>
      <el-form
        :model="dataForm"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmitHandle()"
        :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
      >
        <el-tooltip placement="bottom" :content="dataForm.comment">
          <template #title>
            <span>{{ dataForm.comment }}</span>
          </template>
          <el-form-item label="评论内容">
            <el-input
              type="textarea"
              v-model="dataForm.comment"
              :disabled="fieldDisabled"
              placeholder="评论内容"
            ></el-input>
          </el-form-item>
        </el-tooltip>
      </el-form>
    </div>
    <!--  流程综合组件   -->
    <!-- <ren-process-multiple
      v-if="processVisible"
      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
      saveFormUrl="/processForm/tabilityapplication"
      dataFormName="dataForm"
      ref="renProcessMultiple"
    ></ren-process-multiple> -->
    <!-- 审批 -->
    <div class="agreeOr" v-if="taskId">
      <div>
        <el-button type="primary" @click="showDialog('同意')">同意</el-button>
        <el-button type="danger" plain @click="showDialog('拒绝')"
          >驳回</el-button
        >
      </div>
    </div>
    <!-- 审批弹窗 -->
     <el-dialog
      title="审批意见"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-input v-model="input" placeholder="请输入审批意见"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose2">取 消</el-button>
        <el-button
          type="primary"
          @click.native="agreeOrNot($store.state.contentTabsActiveName)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
 </template>
 <script>
 import processModule from '@/mixins/process-module'
 import qs from 'qs'
 import debounce from 'lodash/debounce'
 import bus from '@/views/bus.js'
 export default {
  // 注入公共方法
  mixins: [processModule],
  components: {},
  props: {
    // fromList: {
    //   // type: Array,
    //   // default: () => {
    //   //   return []
    //   // }
    // }
  },
  data () {
    return {
      // processVisible: true,
      // visible: false,
      // 表单属性是否可编辑
      fieldDisabled: false,
      dataForm: [],
      id: '',
      shifoushizujian: true,
      // 审批
      dialogVisible: false,
      dialogType: '',
      input: '',
      visible: true,
      taskId: ''
    }
  },
  watch: {},
  computed: {},
  methods: {
    init () {
      this.visible = true
      // this.getInfo(this.$router.currentRoute.params.params.params.resourceDTO.id)
      // this.dataForm = this.$router.currentRoute.params.params.params.resourceDTO
      // this.id=this.$router.currentRoute
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()
        // if (this.dataForm.id) {
        // 如业务KEY已存在，不允许编辑
        this.fieldDisabled = true
        // this.id = this.$router.currentRoute.businessKey
        this.getInfo(this.$router.currentRoute.params.businessKey)
        console.log('id', this.$router.currentRoute.params.businessKey)
        // }
      })
    },
    getInfo (id) {
      this.$http.get('/demandComment/' + id).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = res.data
        // this.dataForm = res.data.resourceDTO
        // if (this.dataForm.type != '应用资源') {
        //   this.shifoushizujian = false
        // } else {
        //   this.shifoushizujian = true
        // }
        console.log('this.dataForm', this.dataForm)
      })
    },
    // 审批
    showDialog (title) {
      this.dialogVisible = true
      this.dialogType = title
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.input = ''
          done()
        })
        .catch((_) => {})
    },
    handleClose2 () {
      this.dialogVisible = false
      this.input = ''
    },
    // 同意与退回
    agreeOrNot: debounce(
      function (data) {
        this.dataForm.taskId = this.$route.params.taskId
        if (this.dialogType === '同意') {
          if (this.input !== '') {
            console.log('this.dataForm', this.dataForm)
            const params = qs.stringify({
              taskId: this.dataForm.taskId,
              comment: this.input
            })
            console.log(params)
            this.$http
              .post('/act/task/complete?' + params)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  this.$message.error(res.msg)
                  if (this.callbacks.taskHandleErrorCallback) {
                    this.callbacks.taskHandleErrorCallback(res)
                  }
                  return
                }
                bus.$emit('AbilityResourcesRemovedInit')
                this.$message({
                  message: this.$t('prompt.success'),
                  type: 'success',
                  duration: 500,
                  onClose: () => {
                    this.visible = false
                    this.dialogVisible = false
                    if (this.callbacks.taskHandleSuccessCallback) {
                      this.callbacks.taskHandleSuccessCallback(res)
                    }
                  }
                })
              })
              .catch(() => {})
            this.tabRemoveHandle(data)
          } else {
            this.$message.error('请输入审批意见！')
          }
        } else if (this.dialogType === '拒绝') {
          if (this.input !== '') {
            const params = qs.stringify({
              taskId: this.dataForm.taskId,
              comment: this.input
            })
            this.$http
              .post('/act/task/backToFirst?', params)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  this.$message.error(res.msg)
                  if (this.callbacks.taskHandleErrorCallback) {
                    this.callbacks.taskHandleErrorCallback(res)
                  }
                  return
                }
                bus.$emit('AbilityResourcesRemovedInit')
                this.$message({
                  message: this.$t('prompt.success'),
                  type: 'success',
                  duration: 500,
                  onClose: () => {
                    this.visible = false
                    if (this.callbacks.taskHandleSuccessCallback) {
                      this.callbacks.taskHandleSuccessCallback(res)
                    }
                  }
                })
              })
            this.tabRemoveHandle(data)
          } else {
            this.$message.error('请输入审批意见！')
          }
        }
      },
      1000,
      { leading: true, trailing: false }
    ),
    tabRemoveHandle (tabName) {
      console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
      if (tabName === 'home') {
        return false
      }
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => item.name !== tabName
      )
      if (this.$store.state.contentTabs.length <= 0) {
        this.$store.state.sidebarMenuActiveName =
          this.$store.state.contentTabsActiveName = 'home'
        return false
      }
      // 当前选中tab被删除
      if (tabName === this.$store.state.contentTabsActiveName) {
        const tab =
          this.$store.state.contentTabs[
            this.$store.state.contentTabs.length - 1
          ]
        this.$router.push({
          name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
          params: { ...tab.params },
          query: { ...tab.query }
        })
      }
    }
  },
  created () {
    // this.dataForm = this.$router.currentRoute.params.id
    this.init()
    console.log('fromList', this.$router.currentRoute.params.businessKey)
    // this.dataForm = this.$router.currentRoute.params.params.params.resourceDTO
    var callbacks = {
      startProcessSuccessCallback: this.closeCurrentTab,
      startProcessErrorCallback: this.startProcessErrorCallback,
      taskHandleSuccessCallback: this.closeCurrentTab,
      taskHandleErrorCallback: this.taskHandleErrorCallback,
      formSaveSuccessCallback: null,
      formSaveErrorCallback: null
    }
    // 初始化综合组件
    this.initProcessMultiple(callbacks)
    this.taskId = this.$route.params.taskId
    this.dataForm.taskId = this.$route.params.taskId
  },
  mounted () {}
 }
 </script>
 <style lang="scss" >
 .kuandukuandukuandu {
  max-width: 1500px;
 }
 .agreeOr {
  & > div {
    // text-align: right;
    padding-right: 40px;
    margin: 20px 0;
  }
 }
 </style>
 <style lang="scss" scoped>
 ::v-deep .el-textarea__inner {
  height: 100px;
  resize: none;
 }
 </style>
--- a/back/src/views/modules/activiti/demo/correction-process2-before.vue
+++ b/back/src/views/modules/activiti/demo/correction-process2-before.vue
@ -0,0 +1,136 @@
 <!--  流程业务表单   -->
 <template>
  <el-card shadow="never" class="aui-card--fill">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
          <el-form-item label="申请人" prop="user">
              <el-input v-model="dataForm.user" :disabled="fieldDisabled" placeholder="请输入申请人"></el-input>
          </el-form-item>
          <el-form-item label="申请电话" prop="phone">
              <el-input v-model="dataForm.phone" :disabled="fieldDisabled" placeholder="请输入申请人电话"></el-input>
          </el-form-item>
          <el-form-item label="申请单位" prop="unit">
              <el-input v-model="dataForm.unit" :disabled="fieldDisabled" placeholder="请输入申请单位"></el-input>
          </el-form-item>
          <!-- <el-form-item label="所在地区" prop="area">
              <el-input v-model="dataForm.area" :disabled="fieldDisabled" placeholder="请输入所在地区"></el-input>
          </el-form-item> -->
          <el-form-item label="申请应用" prop="system">
              <el-input v-model="dataForm.system" :disabled="fieldDisabled" placeholder="请输入申请应用"></el-input>
          </el-form-item>
          <el-form-item label="应用场景" prop="scene">
              <el-input v-model="dataForm.scene" :disabled="fieldDisabled" placeholder="请输入应用场景"></el-input>
          </el-form-item>
          <el-form-item label="申请依据" prop="basis">
              <el-input v-model="dataForm.basis" :disabled="fieldDisabled" placeholder="请输入申请依据"></el-input>
          </el-form-item>
          <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
              <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
          </el-form-item>
      </el-form>
      <!--  流程综合组件   -->
      <ren-process-multiple v-if="processVisible" updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId" saveFormUrl="/processForm/tabilityapplication" dataFormName="dataForm" ref="renProcessMultiple" ></ren-process-multiple>
  </el-card>
 </template>
 <script>
 // 引入工作流公共方法
 import processModule from '@/mixins/process-module'
 export default {
  // 注入公共方法
  mixins: [processModule],
  data () {
    return {
      visible: false,
      // 表单属性是否可编辑
      fieldDisabled: false,
      dataForm: {
        id: '',
        user: '',
        phone: '',
        unit: '',
        area: '',
        system: '',
        scene: '',
        basis: '',
        enclosure: ''
      }
    }
  },
  created () {
    // 将业务KEY赋值给表单
    this.dataForm.id = this.$route.params.businessKey
    this.init()
    // 流程回调
    var callbacks = {
      startProcessSuccessCallback: this.closeCurrentTab,
      startProcessErrorCallback: this.startProcessErrorCallback,
      taskHandleSuccessCallback: this.closeCurrentTab,
      taskHandleErrorCallback: this.taskHandleErrorCallback,
      formSaveSuccessCallback: null,
      formSaveErrorCallback: null
    }
    // 初始化综合组件
    this.initProcessMultiple(callbacks)
  },
  computed: {
    dataRule () {
      return {
        user: [
          { required: true, message: '请输入申请人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入申请人电话', trigger: 'blur' },
          { type: 'string', pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请输入申请单位', trigger: 'blur' }
        ],
        // area: [
        //   { required: true, message: '请输入所在地区', trigger: 'blur' }
        // ],
        system: [
          { required: true, message: '请输入申请应用', trigger: 'blur' }
        ],
        scene: [
          { required: true, message: '请输入应用场景', trigger: 'blur' }
        ],
        basis: [
          { required: true, message: '请输入申请依据', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()
        if (this.dataForm.id) {
          // 如业务KEY已存在，不允许编辑
          this.fieldDisabled = true
          this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/processForm/tabilityapplication/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {})
    },
    // 启动流程出错回调
    startProcessErrorCallback (data) {
      console.log(data)
    },
    // 任务处理出错回调
    taskHandleErrorCallback (data) {
    }
  }
 }
 </script>
--- a/back/src/views/modules/activiti/demo/correction-process2.vue
+++ b/back/src/views/modules/activiti/demo/correction-process2.vue
@ -1,64 +1,134 @@
 <!--  流程业务表单   -->
 <template>
  <el-card shadow="never" class="aui-card--fill">
-      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+
-          <el-form-item label="申请人" prop="user">
+  <!-- 申请人详情 -->
-              <el-input v-model="dataForm.user" :disabled="fieldDisabled" placeholder="请输入申请人"></el-input>
+  <div>
-          </el-form-item>
+     <h3>申请人信息</h3>
-          <el-form-item label="申请电话" prop="phone">
+    <div class="big-BOX">
-              <el-input v-model="dataForm.phone" :disabled="fieldDisabled" placeholder="请输入申请人电话"></el-input>
+      <p>
-          </el-form-item>
+        <span>申请人：<span> {{dataForm.content.user || '--'}}</span></span>
-          <el-form-item label="申请单位" prop="unit">
+         <span>电话：<span>{{dataForm.content.phone || '--'}}</span></span>
-              <el-input v-model="dataForm.unit" :disabled="fieldDisabled" placeholder="请输入申请单位"></el-input>
+         <span>单位：<span>{{dataForm.content.unit || '--'}}</span></span>
-          </el-form-item>
+      </p>
-          <!-- <el-form-item label="所在地区" prop="area">
+       <p>
-              <el-input v-model="dataForm.area" :disabled="fieldDisabled" placeholder="请输入所在地区"></el-input>
+         <span>申请应用：<span>{{dataForm.content.system || '--'}}</span></span>
-          </el-form-item> -->
+       <span> 应用场景：<span> {{dataForm.content.scene || '--'}}</span></span>
-          <el-form-item label="申请应用" prop="system">
+      <span> 申请依据： <span> {{dataForm.content.basis || '--'}}</span></span>
-              <el-input v-model="dataForm.system" :disabled="fieldDisabled" placeholder="请输入申请应用"></el-input>
+      </p>
-          </el-form-item>
+      <p>
-          <el-form-item label="应用场景" prop="scene">
+      <span> 能力应用期望效果：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
-              <el-input v-model="dataForm.scene" :disabled="fieldDisabled" placeholder="请输入应用场景"></el-input>
+      </p>
-          </el-form-item>
+      <p v-if="dataForm.content.enclosure">
-          <el-form-item label="申请依据" prop="basis">
+      <span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button  @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
-              <el-input v-model="dataForm.basis" :disabled="fieldDisabled" placeholder="请输入申请依据"></el-input>
+
-          </el-form-item>
+      </p>
-          <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
+    </div>
-              <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
+  </div>
-          </el-form-item>
+
-      </el-form>
+  <!-- 申请能力 -->
-      <!--  流程综合组件   -->
+  <div class="AbilityApply">
-      <ren-process-multiple v-if="processVisible" updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId" saveFormUrl="/processForm/tabilityapplication" dataFormName="dataForm" ref="renProcessMultiple" ></ren-process-multiple>
+     <h3>申请能力</h3>
    <ul  v-for="item in dataList" :key="item.id">
      <li class="title">{{item.address}}</li>
      <li class="clearfix">
            <img
              src="~@/assets/img/imgLeft.png"
            />
            <div>
            <h2>{{item.name}}<span>{{item.type}}</span></h2>
            <p>{{item.describe}}</p>
            </div>
      </li>
    </ul>
  </div>
    <!--  流程综合组件   -->
  <!--   <ren-process-multiple
      v-if="processVisible"
      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
      saveFormUrl="/processForm/tabilityapplication"
      dataFormName="dataForm"
      ref="renProcessMultiple"
    ></ren-process-multiple> -->
    <!-- 审批 -->
    <div class="agreeOr">
      <h3>审批</h3>
      <div>
        <el-radio-group v-model="agreeOrList" style="width:230px;">
          <el-radio-button label="同意" class="blueAll">同意</el-radio-button>
          <el-radio-button label="退回" class="redAll">退回</el-radio-button>
        </el-radio-group>
        <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
        <el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
         <el-button class="inputBule" @click="agreeOrNot">提交</el-button>
      </div>
    </div>
 <!--  流程详情   -->
    <ren-process-detail-import></ren-process-detail-import>
  </el-card>
 </template>
 <script>
 // 引入工作流公共方法
 import processModule from '@/mixins/process-module'
 import qs from 'qs'
 import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
 export default {
  // 注入公共方法
  mixins: [processModule],
  data () {
    return {
-      visible: false,
+      visible: true,
      // 表单属性是否可编辑
-      fieldDisabled: false,
+      // fieldDisabled: false,
      // dataForm: {
      //   id: '',
      //   user: '',
      //   phone: '',
      //   unit: '',
      //   area: '',
      //   system: '',
      //   scene: '',
      //   basis: ''
      // }
      dataForm: {
        id: '',
-        user: '',
+        content: []
-        phone: '',
+      },
-        unit: '',
+      dataList: [
-        area: '',
+        {
-        system: '',
+          // img: '~@/assets/img/imgLeft.png',
-        scene: '',
+          address: '青岛市应急管理局',
-        basis: '',
+          name: '组件名称',
-        enclosure: ''
+          type: '组件服务',
-      }
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
        },
        {
          // img: '~@/assets/img/imgLeft.png',
          address: '青岛市应急管理局',
          name: '组件名称',
          type: '组件服务',
          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
        },
        {
          // img: '~@/assets/img/imgLeft.png',
          address: '青岛市应急管理局',
          name: '组件名称',
          type: '组件服务',
          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
        }
      ],
      inputAgree: '',
      inputNo: '',
      agreeOrList: '同意'
    }
  },
  created () {
    // 将业务KEY赋值给表单
    this.dataForm.id = this.$route.params.businessKey
    console.log(this.dataForm, 'ela')
    this.init()
    // 流程回调
    var callbacks = {
@ -73,64 +143,275 @@ export default {
    this.initProcessMultiple(callbacks)
  },
  computed: {
-    dataRule () {
+    // dataRule () {
-      return {
+    //   return {
-        user: [
+    //     inputAgree: [
-          { required: true, message: '请输入申请人', trigger: 'blur' }
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
+    //     ],
-        phone: [
+    //     inputNo: [
-          { required: true, message: '请输入申请人电话', trigger: 'blur' },
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          { type: 'string', pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
+    //     ]
-        ],
+    //   }
-        unit: [
+    // }
-          { required: true, message: '请输入申请单位', trigger: 'blur' }
+  },
-        ],
+  components: {
-        // area: [
+    RenProcessDetailImport
        //   { required: true, message: '请输入所在地区', trigger: 'blur' }
        // ],
        system: [
          { required: true, message: '请输入申请应用', trigger: 'blur' }
        ],
        scene: [
          { required: true, message: '请输入应用场景', trigger: 'blur' }
        ],
        basis: [
          { required: true, message: '请输入申请依据', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init () {
-      this.visible = true
+      // this.visible = true
      this.$nextTick(() => {
-        this.$refs.dataForm.resetFields()
+        // this.$refs.dataForm.resetFields()
        if (this.dataForm.id) {
          // 如业务KEY已存在，不允许编辑
-          this.fieldDisabled = true
+          // this.fieldDisabled = true
          this.getInfo()
          console.log(this.dataForm, 'init')
        }
      })
    },
    // 获取信息
    getInfo () {
-      this.$http.get(`/processForm/tabilityapplication/${this.dataForm.id}`).then(({ data: res }) => {
+      this.$http
-        if (res.code !== 0) {
+        .get(`/processForm/tabilityapplication/${this.dataForm.id}`)
-          return this.$message.error(res.msg)
+        .then(({ data: res }) => {
-        }
+          if (res.code !== 0) {
-        this.dataForm = {
+            console.log(res.data)
-          ...this.dataForm,
+            return this.$message.error(res.msg)
-          ...res.data
+          }
-        }
+          console.log(res.data, 'elas')
-      }).catch(() => {})
+          this.dataForm.content = res.data
          console.log(this.dataForm, 'ela')
        })
        .catch(() => {})
    },
    // 申请能力
    applyData () {
      this.$http
        .get(`/resource/select/${this.dataForm.instanceId}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            console.log(res.data, 'hhhhh')
            // return this.$message.error(res.msg)
          }
          // console.log(res.data, 'elas')
          // this.dataForm.content = res.data
          // console.log(this.dataForm, 'ela')
        })
        .catch(() => {})
    },
    // 同意与退回
    agreeOrNot () {
      if (this.agreeOrList === '同意') {
        console.log('this.dataForm', this.dataForm)
        const params = qs.stringify({
          taskId: this.dataForm.content.instanceId,
          comment: this.inputAgree
        })
        console.log(params)
        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
          if (res.code !== 0) {
            console.log(res)
            this.$message.error(res.msg)
          }
        }).catch(() => {})
      } else if (this.agreeOrList === '退回') {
        const params = qs.stringify({
          taskId: this.dataForm.content.instanceId,
          comment: this.inputNo
        })
        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 启动流程出错回调
    startProcessErrorCallback (data) {
      console.log(data)
    },
    // 任务处理出错回调
-    taskHandleErrorCallback (data) {
+    taskHandleErrorCallback (data) {}
-    }
+  },
  mounted () {
    this.applyData()
  }
 }
 </script>
 <style scoped lang="scss">
 ::v-deep .big-BOX {
  background: rgba(244, 245, 248, 0.8);
  padding: 24px;
  h3 {
    font-size: 16px;
    color: #212121;
  }
  p {
    width: 78%;
    display: flex;
    justify-content: space-between;
    color: #212121;
    font-size: 14px;
    span {
      display: inline-block;
      margin-left: 8px;
      line-height: 32px;
      span {
        font-weight: bold;
      }
    }
  }
  p:last-of-type {
    margin-top: 16px;
    width: 100%;
    span {
      display: flex;
      span {
        padding: 0 12px;
        height: 32px;
        background: rgba(232, 234, 239, 1);
        border-radius: 2px;
        button {
          background: unset;
          border: 0;
          color: #0558e1;
          font-size: 14px;
        }
      }
    }
  }
 }
 ::v-deep .AbilityApply {
  margin-top: 32px;
  h3 {
    font-size: 16px;
    color: #212121;
    border-bottom: 1px solid #dddee1;
    padding-bottom: 10px;
  }
  ul {
    padding-left: 0px;
    li {
      list-style: none;
      padding: 30px 0;
      border-bottom: 1px solid #dddee1;
      display: flex;
      img {
        width: 100px;
        height: 100px;
      }
      div {
        margin-left: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        h2 {
          margin-bottom: 20px;
          font-size: 20px;
          color: #000;
          display: flex;
          span {
            display: block;
            font-size: 14px;
            color: #ffffff;
            margin-left: 8px;
            background: rgba(0, 184, 230, 0.8);
            display: flex;
            align-items: center;
            padding: 0 5px;
            border-radius: 4px;
          }
        }
        p {
          margin-bottom: 0;
        }
      }
    }
    .clearfix:after {
      display: block;
      content: "";
      clear: both;
    }
    .title {
      color: #0558e1;
      font-size: 18px;
      padding-bottom: 0;
      border-bottom: 0;
    }
    .title:before {
      content: "";
      width: 6px;
      height: 6px;
      display: inline-block;
      border-radius: 50%;
      background: #0558e1;
      vertical-align: middle;
      margin-right: 10px;
      margin-top: 6px;
    }
  }
 }
 ::v-deep .agreeOr > div {
  display: flex;
  align-items: center;
  .el-input {
    margin-right: 10px;
    margin-left: 32px;
  }
 }
 ::v-deep .agreeOr > div:last-of-type {
  margin-top: 15px;
 }
 .blueAll {
  ::v-deep .el-radio-button__inner {
    width: 80px;
    height: 32px;
    line-height: 32px;
    padding: 0;
    border-radius: 2px;
    background: #ffffff;
    color: #0558e1;
    border: 1px solid #0558e1;
  }
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    box-shadow: unset !important;
    background: #0558e1;
    color: #ffffff;
  }
 }
 .inputBule {
  width: 55px;
  height: 32px;
  line-height: 32px;
  padding: 0;
  border-radius: 2px;
  background: #0558e1;
  color: #ffffff;
  border: 1px solid #0558e1;
 }
 .redAll {
  margin-left: 10px;
  ::v-deep .el-radio-button__inner {
    width: 80px;
    height: 32px;
    line-height: 32px;
    padding: 0;
    border-radius: 2px;
    border: 1px solid #e83a48;
    background: #ffffff;
    color: #e83a48;
    margin-left: 10px;
  }
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    box-shadow: unset !important;
    color: #ffffff;
    background: #e83a48;
  }
 }
 .blueInput {
  width: 55px;
 }
 </style>
--- a/Show More
+++ b/Show More