diff --git a/back/src/views/modules/ability/bsabilityai.vue b/back/src/views/modules/ability/bsabilityai.vue
index 41bbff3c..5c408fe9 100644
--- a/back/src/views/modules/ability/bsabilityai.vue
+++ b/back/src/views/modules/ability/bsabilityai.vue
@@ -5,7 +5,7 @@
         <el-form-item>
           <el-input
             v-model="dataForm.name"
-            placeholder="名称"
+            placeholder="图层名称"
             clearable
           ></el-input>
         </el-form-item>
@@ -14,12 +14,12 @@
             $t('query')
           }}</el-button>
         </el-form-item>
-        <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"
@@ -48,9 +48,9 @@
         v-loading="dataListLoading"
         :data="dataList"
         border
-        @selection-change="dataListSelectionChangeHandle"
         style="width: 100%"
         height="650px"
+        @selection-change="handleSelectionChange"
       >
         <el-table-column
           type="selection"
@@ -58,71 +58,56 @@
           align="center"
           width="50"
         ></el-table-column>
-        <af-table-column
+        <el-table-column
           :show-overflow-tooltip="true"
           width="280"
           prop="name"
-          label="组件名称"
+          label="图层名称"
           header-align="center"
           align="center"
-        ></af-table-column>
-        <af-table-column
+        ></el-table-column>
+        <el-table-column
           :show-overflow-tooltip="true"
           width="280"
           prop="description"
-          label="组件描述"
+          label="描述"
           header-align="center"
           align="center"
-        ></af-table-column>
-        <af-table-column
+        ></el-table-column>
+        <el-table-column
           :show-overflow-tooltip="true"
           width="280"
           prop="deptName"
-          label="归属部门"
+          label="上架部门"
           header-align="center"
           align="center"
-        ></af-table-column>
-        <af-table-column
+        ></el-table-column>
+        <el-table-column
           :show-overflow-tooltip="true"
           width="280"
           prop="deptContacts"
-          label="部门联系人"
+          label="联系人"
           header-align="center"
           align="center"
-        ></af-table-column>
-        <af-table-column
+        ></el-table-column>
+        <el-table-column
           :show-overflow-tooltip="true"
           width="280"
           prop="deptPhone"
-          label="部门联系人电话"
+          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">
-        <af-table-column
-          :show-overflow-tooltip="true"
-          width="280"
-          v-for="(item, index) in dataList[0].infoList2"
-          :key="index"
-          :label="item.attrType"
-          header-align="center"
-          align="center"
-        >
-          <template slot-scope="scope">
-            {{ findValue(scope.row.infoList2, item.attrType) }}
-          </template>
-        </af-table-column>
-        </template>
+        ></el-table-column>
         <el-table-column
-          :label="$t('handle')"
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="updateDate"
+          label="上架时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="操作"
           fixed="right"
           header-align="center"
           align="center"
@@ -130,21 +115,12 @@
         >
           <template slot-scope="scope">
             <el-button
-              v-if="scope.row.infoList.filter(val=>val.attrType=='组件类型')[0].attrValue == '智能算法'"
-              type="text"
-              size="small"
-              @click="toppingCapacity(scope.row)"
-              >置顶</el-button
-            >
-            <el-button
-              v-if="$hasPermission('ability:bsabilityai:update')"
               type="text"
               size="small"
               @click="UpdateData(scope.row)"
               >{{ $t('update') }}</el-button
             >
             <el-button
-              v-if="$hasPermission('ability:bsabilityai:delete')"
               type="text"
               size="small"
               @click="deleteHandle2(scope.row.id)"
@@ -154,27 +130,14 @@
               >详情</el-button
             >
             <el-button type="text" size="small" @click="showDocument(scope.row)"
-              >技术文档</el-button
-            >
-            <el-button
-              type="text"
-              size="small"
-              @click="showRelateApplication(scope.row)"
-              >关联应用</el-button
+              >设置</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>
+      <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper"
+              :total="total" :page-size="pageSize" :current-page="currentPage">
+            </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
       <add-or-update
         :disabled="disabled"
@@ -237,7 +200,7 @@
 </template>
 
 <script>
-import mixinViewModule from '@/mixins/view-module'
+//import mixinViewModule from '@/mixins/view-module'
 import AddOrUpdate from './bsabilityai-add-or-update'
 import dictionaries from '@/utils/dictionaries'
 import qs from 'qs'
@@ -245,7 +208,7 @@ import { pinyin } from 'pinyin-pro'
 import RelateApplication from './bsabilityai-relate-application.vue'
 import putOnTheShelf from '@/views/modules/putOnTheShelf'
 export default {
-  mixins: [mixinViewModule],
+  // mixins: [mixinViewModule], @selection-change="dataListSelectionChangeHandle"
   data () {
     return {
       required: ['归属部门', '部门联系人', '部门联系人电话', '应用领域', '共享条件', '算法名称', '算法描述', '图层名称', '图层描述', '组件名称', '组件描述', '组件地址', '服务地址', '服务接口', '接口请求方式', '算法类别'],
@@ -262,8 +225,8 @@ export default {
         infoList: [
           {
             attrType: '组件类型',
-            attrValue: '',
-            delFlag: 0
+            attrValue: '图层服务',
+            delFlag: 0,  
           }
         ]
       },
@@ -296,7 +259,14 @@ export default {
       typeInput: '组件服务',
       uuidOne: '',
       uuidTwo: '',
-      uuidSnum: ''
+      uuidSnum: '',
+      addOrUpdateVisible:false,
+      dataList:[],
+      dataListLoading:false,
+       currentPage: 1,
+      pageSize: 10,
+      total: null,
+      dataListSelections:[]
     }
   },
   watch: {},
@@ -310,10 +280,55 @@ export default {
     this.dataForm.type = '组件服务'
   },
   mounted () {
-    // window.addEventListener('resize', this.a)
-    // this.fullScreen()
+    this.getDataList();
   },
   methods: {
+    //获取图层服务列表数据
+    getDataList(){
+      //console.log('开始获取列表数据');
+      let params =  {
+            deptIds: [],
+            districtId: '',
+            infoList: [{ attrType: '组件类型', attrValue: '图层服务' }],
+            name: '',
+            orderField: 'total',
+            orderType: 'DESC',
+            pageNum: this.currentPage,
+            pageSize: 15,
+            type: '组件服务',
+          };
+       this.$http.post(`/resource/pageWithAttrs`, params).then((res) => {
+          this.dataList = res.data.data.records;
+          this.total = parseInt(res.data.data.total);
+        }) 
+    },
+      handleCurrentChange (val) {
+      console.log('val------------>', val)
+      this.currentPage = val;
+      this.getDataList();
+    },
+     //删除，可以批量删除
+    deleteHandle2 (id) {
+      console.log('删除========================》', id, this.dataListSelections)
+      const ids = []
+      if (id) {
+        ids.push(id)
+      } else {
+        if (this.dataListSelections.length > 0) {
+          this.dataListSelections.forEach(item => {
+            ids.push(item.id)
+          })
+        }
+      }
+      this.$http.post('/resource/delete', { ids: ids }).then(res => {
+        console.log('删除成功', res)
+        this.getDataList()
+      })
+    },
+    //多选多选
+    handleSelectionChange(val){
+      this.dataListSelections = val;
+    },
     // 置顶
     toppingCapacity (item) {
       this.$http.put('/resource/pin_top/' + item.id).then(res => {
@@ -332,57 +347,7 @@ export default {
       })
     },
     reset () {
-      this.$http
-        .get(
-          this.mixinViewModuleOptions.getDataListURL +
-            '?' +
-            qs.stringify({
-              // order: this.order,
-              // orderField: this.orderField,
-              // type: '组件服务',
-              page: 1,
-              limit: 10,
-              creator: '',
-              selectType: 0,
-              delFlag: 0,
-              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.dataList.map((item, index) => {
-            const dataListSinforList = []
-            item.infoList.map((itemson, indexson) => {
-              if (
-                itemson.attrType === '应用领域' ||
-                itemson.attrType === '组件类型'
-              ) {
-                dataListSinforList.push(itemson)
-              }
-            })
-            this.dataList[index].infoList2 = dataListSinforList
-          })
-          console.log('this.dataList', this.dataList)
-          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
-        })
+      this.getDataList();
     },
     findValue (list, type) {
       const found = list.find((item) => item.attrType === type)
@@ -505,7 +470,7 @@ export default {
                 creator: '',
                 selectType: 0,
                 delFlag: 0,
-                name: names
+                name: names,
               })
           )
           .then(({ data: res }) => {
@@ -596,7 +561,7 @@ export default {
         infoList: [
           {
             attrType: '组件类型',
-            attrValue: '',
+            attrValue: '图层服务',
             delFlag: 0
           }
         ]
diff --git a/back/src/views/modules/ability/bsabilityservice.vue b/back/src/views/modules/ability/bsabilityservice.vue
index cf592690..dc2ec6a9 100644
--- a/back/src/views/modules/ability/bsabilityservice.vue
+++ b/back/src/views/modules/ability/bsabilityservice.vue
@@ -148,20 +148,17 @@
             <el-button type="text" size="small" @click="showDetail(scope.row)"
               >详情</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
+              >应用与GIS图层</el-button
             >
             <el-button
               type="text"
               size="small"
               @click="applyAndDataResource(scope.row)"
-              >应用与数据资源</el-button
+              >应用与数据</el-button
             >
             <el-button
               type="text"
@@ -173,7 +170,12 @@
               type="text"
               size="small"
               @click="applyAndInfrastructure(scope.row)"
-              >应用与基础设施</el-button
+              >应用与视频资源</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              >设置</el-button
             >
           </template>
         </el-table-column>
diff --git a/back/src/views/modules/ability/businessComponents.vue b/back/src/views/modules/ability/businessComponents.vue
new file mode 100644
index 00000000..690ff7d5
--- /dev/null
+++ b/back/src/views/modules/ability/businessComponents.vue
@@ -0,0 +1,946 @@
+<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 type="primary" @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-button
+            v-if="$hasPermission('ability:bsabilityai:save')"
+            type="primary"
+            @click="addOrUpdateHandleAI()"
+            >挂接</el-button
+          >
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" @click="showPutOnTheShelf()"
+            >上架</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-if="$hasPermission('ability:bsabilityai:delete')"
+            type="danger"
+            @click="deleteHandle2()"
+            >{{ $t('deleteBatch') }}</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
+        style="width: 100%"
+        height="650px"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          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>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="description"
+          label="描述"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="deptName"
+          label="上架部门"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="deptContacts"
+          label="联系人"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="deptPhone"
+          label="联系人电话"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="updateDate"
+          label="上架时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="操作"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="UpdateData(scope.row)"
+              >{{ $t('update') }}</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="deleteHandle2(scope.row.id)"
+              >{{ $t('delete') }}</el-button
+            >
+            <el-button type="text" size="small" @click="showDetail(scope.row)"
+              >详情</el-button
+            >
+            <el-button type="text" size="small" @click="showDocument(scope.row)"
+              >设置</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper"
+              :total="total" :page-size="pageSize" :current-page="currentPage">
+            </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update
+        :disabled="disabled"
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
+      <relate-application
+        v-if="relateApplicationVisible"
+        ref="relateApplication"
+        :nameArray="['未关联应用名称', '已关联应用名称']"
+        :relateInfo="relateInfo"
+        @isShowRelatePopup="handleIsShowRelatePopup"
+      ></relate-application>
+    </div>
+    <el-dialog
+      title="选择组件类型"
+      :visible.sync="showPutOnTheShelfFlag"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :before-close="clear"
+      width="30%"
+    >
+      <el-radio v-model="radio" label="智能算法">智能算法</el-radio>
+      <el-radio v-model="radio" label="图层服务">图层服务</el-radio>
+      <el-radio v-model="radio" label="开发组件">开发组件</el-radio>
+      <el-radio v-model="radio" label="业务组件">业务组件</el-radio>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="clear">取 消</el-button>
+        <el-button type="primary" @click="showPutOnTheShelfVue"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+    <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
+        ref="putOnTheShelf"
+        :putOnTheShelfList="putOnTheShelfList"
+        @changeInfoList="changeInfoList"
+        :type="radio"
+        :typeInput="typeInput"
+        :required="required"
+        :notFilled="notFilled"
+        @submitData="submitData"
+      ></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>
+
+<script>
+//import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './bsabilityai-add-or-update'
+import dictionaries from '@/utils/dictionaries'
+import qs from 'qs'
+import { pinyin } from 'pinyin-pro'
+import RelateApplication from './bsabilityai-relate-application.vue'
+import putOnTheShelf from '@/views/modules/putOnTheShelf'
+export default {
+  // mixins: [mixinViewModule], @selection-change="dataListSelectionChangeHandle"
+  data () {
+    return {
+      required: ['归属部门', '部门联系人', '部门联系人电话', '应用领域', '共享条件', '算法名称', '算法描述', '图层名称', '图层描述', '组件名称', '组件描述', '组件地址', '服务地址', '服务接口', '接口请求方式', '算法类别'],
+      notFilled: [],
+      insertList: [],
+      putOnTheShelfList: [],
+      radio: '',
+      showPutOnTheShelfFlag: false,
+      showPutOnTheShelfFlag2: false,
+      submitFrom: {
+        type: '组件服务',
+        deptId: '',
+        delFlag: 0,
+        infoList: [
+          {
+            attrType: '组件类型',
+            attrValue: '图层服务',
+            delFlag: 0,  
+          }
+        ]
+      },
+      mixinViewModuleOptions: {
+        getDataListURL: '/resource/page',
+        getDataListIsPage: true,
+        exportURL: '/ability/bsabilityai/export',
+        deleteURL: '/resource/delete',
+        deleteIsBatch: true
+      },
+      disabled: false,
+      sceneArr: dictionaries.sceneArr,
+      fieldArr: dictionaries.fieldArr,
+      shareFormArr: dictionaries.shareFormArr,
+      dataForm: {
+        name: '',
+        creator: '',
+        delFlag: 0,
+        selectType: 0,
+        type: '组件服务'
+      },
+      // qp: false,
+      // 关联应用弹窗
+      relateApplicationVisible: false,
+      relateInfo: {
+        id: '',
+        responseData: {},
+        linkType: ''
+      },
+      typeInput: '组件服务',
+      uuidOne: '',
+      uuidTwo: '',
+      uuidSnum: '',
+      addOrUpdateVisible:false,
+      dataList:[],
+      dataListLoading:false,
+       currentPage: 1,
+      pageSize: 10,
+      total: null,
+      dataListSelections:[]
+    }
+  },
+  watch: {},
+  components: {
+    AddOrUpdate,
+    RelateApplication,
+    putOnTheShelf
+  },
+  created () {
+    this.dataForm.name = ''
+    this.dataForm.type = '组件服务'
+  },
+  mounted () {
+    this.getDataList();
+  },
+  methods: {
+    //获取图层服务列表数据
+    getDataList(){
+      //console.log('开始获取列表数据');
+      let params =  {
+            deptIds: [],
+            districtId: '',
+            infoList: [{ attrType: '组件类型', attrValue: '业务组件' }],
+            name: '',
+            orderField: 'total',
+            orderType: 'DESC',
+            pageNum: this.currentPage,
+            pageSize: 15,
+            type: '组件服务',
+          };
+       this.$http.post(`/resource/pageWithAttrs`, params).then((res) => {
+          this.dataList = res.data.data.records;
+          this.total = parseInt(res.data.data.total);
+        }) 
+    },
+    //翻页
+      handleCurrentChange (val) {
+      console.log('val------------>', val)
+      this.currentPage = val;
+      this.getDataList();
+    },
+      //删除，可以批量删除
+    deleteHandle2 (id) {
+      console.log('删除========================》', id, this.dataListSelections)
+      const ids = []
+      if (id) {
+        ids.push(id)
+      } else {
+        if (this.dataListSelections.length > 0) {
+          this.dataListSelections.forEach(item => {
+            ids.push(item.id)
+          })
+        }
+      }
+      this.$http.post('/resource/delete', { ids: ids }).then(res => {
+        console.log('删除成功', res)
+        this.getDataList()
+      })
+    },
+      //多选多选
+    handleSelectionChange(val){
+      this.dataListSelections = val;
+    },
+    // 置顶
+    toppingCapacity (item) {
+      this.$http.put('/resource/pin_top/' + item.id).then(res => {
+        console.log('置顶', res.data.code)
+        if (res.data.code == 0) {
+          this.$message({
+            message: '置顶成功',
+            type: 'success'
+          })
+        } else {
+          this.$message({
+            message: '置顶失败',
+            type: 'warning'
+          })
+        }
+      })
+    },
+    reset () {
+       this.getDataList();
+    },
+    findValue (list, type) {
+      const found = list.find((item) => item.attrType === type)
+      if (found) {
+        return found.attrValue
+      } else {
+        return '暂无数据'
+      }
+    },
+    showDetail (val) {
+      console.log(val)
+      window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + val.id)
+      // this.addOrUpdateHandle(id)
+      // this.addOrUpdateVisible = true
+      // this.disabled = false
+      // this.$nextTick(() => {
+      //   this.$refs.addOrUpdate.UpdateState = false
+      //   this.$refs.addOrUpdate.dataFormShowDetails = val
+      //   this.$refs.addOrUpdate.init()
+      // })
+      // this.disabled = true
+    },
+    // 创建uuid
+    uuid (len, radix) {
+      var chars =
+          '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+      var uuid = []
+      var i
+      radix = radix || chars.length
+
+      if (len) {
+        // Compact form
+        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)]
+      } else {
+        // rfc4122, version 4 form
+        var r
+
+        // rfc4122 requires these characters
+        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
+        uuid[14] = '4'
+
+        // Fill in random data.  At i==19 set the high bits of clock sequence as
+        // per rfc4122, sec. 4.1.5
+        for (i = 0; i < 36; i++) {
+          if (!uuid[i]) {
+            r = 0 | (Math.random() * 16)
+            uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r]
+          }
+        }
+      }
+
+      return uuid.join('')
+    },
+    uuidSplice () {
+      this.uuidOne = this.uuid(13, 16)
+      this.uuidTwo = this.uuid(13, 16)
+      this.uuidSnum = this.uuidOne + this.uuidTwo
+      this.uuidSnum = this.uuidSnum.replace(/\s+/g, '')
+      console.log('this.uuidOne', this.uuidSnum)
+    },
+    showDocument (val) {
+      // 第一步：创建文档
+      // 不存在文档时创建空文档
+      this.uuidSplice()
+      const uuidParam = val.infoList.filter((item) => {
+        if (item.attrType === '技术文档') {
+          return item
+        }
+      })
+      if (uuidParam.length > 0) {
+        this.uuidSnum = uuidParam[0].attrValue.split('/')[1].split('.')[0]
+      } else {
+        const type = pinyin(val.type, {
+          pattern: 'initial'
+        }).replace(/\s*/g, '')
+        const obj = {
+          attrType: '技术文档',
+          attrValue: type + '/' + this.uuidSnum + '.md',
+          delFlag: 0
+        }
+        val.infoList.push(obj)
+      }
+
+      // 存在时加入文档
+      this.$http
+        .put('/resource/update', val)
+        .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: () => {
+              // 打开这个空的开发文档
+              window.open(
+                window.SITE_CONFIG.frontUrl + '?id=' + this.uuidSnum + '&&type=' + val.type,
+                '_blank'
+              )
+            }
+          })
+        })
+        .catch(() => {})
+      // 第二部，update列数据，成功后打开文档编辑
+    },
+    getDataList2 (names) {
+      if (names != null) {
+        this.$http
+          .get(
+            this.mixinViewModuleOptions.getDataListURL +
+              '?' +
+              qs.stringify({
+                // order: this.order,
+                // orderField: this.orderField,
+                // type: '组件服务',
+                pageNum: 1,
+                pageSize: this.limit,
+                type: '组件服务',
+                creator: '',
+                selectType: 0,
+                delFlag: 0,
+                name: names,
+              })
+          )
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              this.dataList = []
+              this.total = 0
+              return this.$message.error(res.msg)
+            }
+            if (res.data.list.length !== 0) {
+              this.dataList = res.data.list
+              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 === '应用领域' ||
+                    itemson.attrType === '组件类型'
+                  ) {
+                    dataListSinforList.push(itemson)
+                  }
+                })
+                this.dataList[index].infoList2 = dataListSinforList
+              })
+            } else {
+              this.$message.error('未查询到相关信息')
+              this.reset()
+            }
+          })
+          .catch(() => {
+            this.dataListLoading = false
+          })
+      } else {
+        this.$message.error('查询信息不能为空')
+      }
+    },
+    //   if (window.outerHeight === screen.availHeight) {
+    //     if (window.outerWidth === screen.availWidth) {
+    //       this.qp = false
+    //     } else {
+    //       this.qp = true
+    //     }
+    //   } else {
+    //     this.qp = true
+    //   }
+    // },
+    // 点击关联应用按钮
+    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
+    },
+    // 新上架
+    clear () {
+      console.log('清空----------------------------------------')
+      this.notFilled = []
+      this.showPutOnTheShelfFlag = false
+      this.showPutOnTheShelfFlag2 = false
+      this.insertList = []
+      this.putOnTheShelfList = []
+      this.radio = ''
+      this.submitFrom = {
+        type: '组件服务',
+        deptId: '',
+        delFlag: 0,
+        infoList: [
+          {
+            attrType: '组件类型',
+            attrValue: '图层服务',
+            delFlag: 0
+          }
+        ]
+      }
+      this.reset()
+    },
+    showPutOnTheShelf () {
+      this.showPutOnTheShelfFlag = true
+      this.$http.get('/category/getCategoryTree').then((res) => {
+        this.insertList = res.data.data.filter(
+          (item) => item.name === '组件服务一'
+        )[0]
+      })
+    },
+    showPutOnTheShelfVue () {
+      this.showPutOnTheShelfFlag = false
+      this.showPutOnTheShelfFlag2 = true
+      this.submitFrom.infoList[0].attrValue = this.radio
+      this.putOnTheShelfList = this.insertList.children.filter(
+        (item) => item.name === this.radio
+      )[0].children
+    },
+    changeInfoList (obj) {
+      console.log(obj, this.submitFrom)
+      this.submitFrom.infoList = this.submitFrom.infoList.filter(
+        (item) => item.attrType !== obj.attrType
+      )
+      this.submitFrom.infoList.push(obj)
+    },
+    changeAdd () {
+      const arr = []
+      switch (this.radio) {
+        case '智能算法':
+          arr.push('算法优势')
+          arr.push('计费标准信息')
+          break
+        case '开发组件':
+        case '业务组件':
+          arr.push('功能介绍')
+          break
+      }
+      arr.push('应用场景')
+      arr.push('常见问题')
+      this.$refs.putOnTheShelf.submit(arr)
+    },
+    submitData () {
+      console.log('提交11111111111===============>', this.putOnTheShelfList, this.submitFrom)
+      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 = []
+      if (!this.submitFrom.name) {
+        this.notFilled.push('算法名称')
+        this.notFilled.push('图层名称')
+        this.notFilled.push('组件名称')
+      }
+      if (!this.submitFrom.description) {
+        this.notFilled.push('算法描述')
+        this.notFilled.push('图层描述')
+        this.notFilled.push('组件描述')
+      }
+      if (!this.submitFrom.shareCondition) {
+        this.notFilled.push('共享条件')
+      }
+      if (!this.submitFrom.deptContacts) {
+        this.notFilled.push('部门联系人')
+      }
+      if (!this.submitFrom.deptId) {
+        this.notFilled.push('归属部门')
+      }
+      if (!this.submitFrom.deptPhone) {
+        this.notFilled.push('部门联系人电话')
+      }
+      if (this.radio === '智能算法' && !this.submitFrom.apiUrl) {
+        if ((this.submitFrom.infoList.filter(val => val.attrType === '使用方式')[0].attrValue === '调用接口')) {
+          this.notFilled.push('服务接口')
+        }
+      }
+      if (this.radio === '智能算法' && !this.submitFrom.apiMethodType) {
+        if ((this.submitFrom.infoList.filter(val => val.attrType === '使用方式')[0].attrValue === '调用接口')) {
+          this.notFilled.push('接口请求方式')
+        }
+      }
+      if (this.radio === '智能算法' && (!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.radio === '图层服务' && (!this.submitFrom.infoList.filter(val => val.attrType === '服务地址')[0] || !this.submitFrom.infoList.filter(val => val.attrType === '服务地址')[0].attrValue)) {
+        this.notFilled.push('服务地址')
+      }
+      if ((this.radio === '业务组件' || this.radio === '开发组件') && (!this.submitFrom.infoList.filter(val => val.attrType === '组件地址')[0] || !this.submitFrom.infoList.filter(val => val.attrType === '组件地址')[0].attrValue)) {
+        this.notFilled.push('组件地址')
+      }
+      console.log(this.submitFrom, this.notFilled, '表单验证')
+      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)
+          console.log(this.submitFrom.infoList, '===============abc')
+          // 去重
+          const newArr = this.submitFrom.infoList.filter(
+            (element, index, self) => {
+              return (
+                self.findIndex((x) => x.attrType === element.attrType) === index
+              )
+            }
+          )
+          this.submitFrom.infoList = newArr
+          // 检验是否有空值
+          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('修改失败!')
+              } else {
+                this.$message.success('修改成功！')
+                this.clear()
+              }
+            })
+            .catch(() => {})
+        } else {
+          console.log('提交11111111111===============>', this.putOnTheShelfList, this.submitFrom)
+          this.$http
+            .post('/resource/insert?source= b', this.submitFrom)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                this.$message.error('上架失败!')
+              } else {
+                this.$message.success('上架成功！')
+                this.clear()
+              }
+            })
+            .catch(() => {})
+        }
+      }
+    },
+    // 新修改
+    UpdateData (item) {
+      this.$http.get('/category/getCategoryTree').then((res) => {
+        this.insertList = res.data.data.filter(
+          (item) => item.name === '组件服务一'
+        )[0]
+        this.radio = item.infoList.filter(
+          (val) => val.attrType === '组件类型'
+        )[0].attrValue
+        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
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-tooltip__popper {
+  max-width: 50%;
+}
+// ::v-deep .el-table .cell {
+//   width: 200px;
+// }
+::v-deep .el-upload-list__item-name {
+  width: 400px;
+}
+</style>
diff --git a/back/src/views/modules/ability/commonCapabilities.vue b/back/src/views/modules/ability/commonCapabilities.vue
new file mode 100644
index 00000000..7b11f9e0
--- /dev/null
+++ b/back/src/views/modules/ability/commonCapabilities.vue
@@ -0,0 +1,945 @@
+<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 type="primary" @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-button
+            v-if="$hasPermission('ability:bsabilityai:save')"
+            type="primary"
+            @click="addOrUpdateHandleAI()"
+            >挂接</el-button
+          >
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" @click="showPutOnTheShelf()"
+            >上架</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-if="$hasPermission('ability:bsabilityai:delete')"
+            type="danger"
+            @click="deleteHandle2()"
+            >{{ $t('deleteBatch') }}</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
+        style="width: 100%"
+        height="650px"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          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>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="description"
+          label="描述"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="deptName"
+          label="上架部门"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="deptContacts"
+          label="联系人"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="deptPhone"
+          label="联系人电话"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          width="280"
+          prop="updateDate"
+          label="上架时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="操作"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="UpdateData(scope.row)"
+              >{{ $t('update') }}</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="deleteHandle2(scope.row.id)"
+              >{{ $t('delete') }}</el-button
+            >
+            <el-button type="text" size="small" @click="showDetail(scope.row)"
+              >详情</el-button
+            >
+            <el-button type="text" size="small" @click="showDocument(scope.row)"
+              >设置</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper"
+              :total="total" :page-size="pageSize" :current-page="currentPage">
+            </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update
+        :disabled="disabled"
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
+      <relate-application
+        v-if="relateApplicationVisible"
+        ref="relateApplication"
+        :nameArray="['未关联应用名称', '已关联应用名称']"
+        :relateInfo="relateInfo"
+        @isShowRelatePopup="handleIsShowRelatePopup"
+      ></relate-application>
+    </div>
+    <el-dialog
+      title="选择组件类型"
+      :visible.sync="showPutOnTheShelfFlag"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :before-close="clear"
+      width="30%"
+    >
+      <el-radio v-model="radio" label="智能算法">智能算法</el-radio>
+      <el-radio v-model="radio" label="图层服务">图层服务</el-radio>
+      <el-radio v-model="radio" label="开发组件">开发组件</el-radio>
+      <el-radio v-model="radio" label="业务组件">业务组件</el-radio>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="clear">取 消</el-button>
+        <el-button type="primary" @click="showPutOnTheShelfVue"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+    <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
+        ref="putOnTheShelf"
+        :putOnTheShelfList="putOnTheShelfList"
+        @changeInfoList="changeInfoList"
+        :type="radio"
+        :typeInput="typeInput"
+        :required="required"
+        :notFilled="notFilled"
+        @submitData="submitData"
+      ></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>
+
+<script>
+//import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './bsabilityai-add-or-update'
+import dictionaries from '@/utils/dictionaries'
+import qs from 'qs'
+import { pinyin } from 'pinyin-pro'
+import RelateApplication from './bsabilityai-relate-application.vue'
+import putOnTheShelf from '@/views/modules/putOnTheShelf'
+export default {
+  // mixins: [mixinViewModule], @selection-change="dataListSelectionChangeHandle"
+  data () {
+    return {
+      required: ['归属部门', '部门联系人', '部门联系人电话', '应用领域', '共享条件', '算法名称', '算法描述', '图层名称', '图层描述', '组件名称', '组件描述', '组件地址', '服务地址', '服务接口', '接口请求方式', '算法类别'],
+      notFilled: [],
+      insertList: [],
+      putOnTheShelfList: [],
+      radio: '',
+      showPutOnTheShelfFlag: false,
+      showPutOnTheShelfFlag2: false,
+      submitFrom: {
+        type: '组件服务',
+        deptId: '',
+        delFlag: 0,
+        infoList: [
+          {
+            attrType: '组件类型',
+            attrValue: '图层服务',
+            delFlag: 0,  
+          }
+        ]
+      },
+      mixinViewModuleOptions: {
+        getDataListURL: '/resource/page',
+        getDataListIsPage: true,
+        exportURL: '/ability/bsabilityai/export',
+        deleteURL: '/resource/delete',
+        deleteIsBatch: true
+      },
+      disabled: false,
+      sceneArr: dictionaries.sceneArr,
+      fieldArr: dictionaries.fieldArr,
+      shareFormArr: dictionaries.shareFormArr,
+      dataForm: {
+        name: '',
+        creator: '',
+        delFlag: 0,
+        selectType: 0,
+        type: '组件服务'
+      },
+      // qp: false,
+      // 关联应用弹窗
+      relateApplicationVisible: false,
+      relateInfo: {
+        id: '',
+        responseData: {},
+        linkType: ''
+      },
+      typeInput: '组件服务',
+      uuidOne: '',
+      uuidTwo: '',
+      uuidSnum: '',
+      addOrUpdateVisible:false,
+      dataList:[],
+      dataListLoading:false,
+       currentPage: 1,
+      pageSize: 10,
+      total: null,
+      dataListSelections:[]
+    }
+  },
+  watch: {},
+  components: {
+    AddOrUpdate,
+    RelateApplication,
+    putOnTheShelf
+  },
+  created () {
+    this.dataForm.name = ''
+    this.dataForm.type = '组件服务'
+  },
+  mounted () {
+    this.getDataList();
+  },
+  methods: {
+    //获取图层服务列表数据
+    getDataList(){
+      //console.log('开始获取列表数据');
+      let params =  {
+            deptIds: [],
+            districtId: '',
+            infoList: [{ attrType: '组件类型', attrValue: '开发组件' }],
+            name: '',
+            orderField: 'total',
+            orderType: 'DESC',
+            pageNum: this.currentPage,
+            pageSize: 15,
+            type: '组件服务',
+          };
+       this.$http.post(`/resource/pageWithAttrs`, params).then((res) => {
+          this.dataList = res.data.data.records;
+          this.total = parseInt(res.data.data.total);
+        }) 
+    },
+      handleCurrentChange (val) {
+      console.log('val------------>', val)
+      this.currentPage = val;
+      this.getDataList();
+    },
+         //删除，可以批量删除
+    deleteHandle2 (id) {
+      console.log('删除========================》', id, this.dataListSelections)
+      const ids = []
+      if (id) {
+        ids.push(id)
+      } else {
+        if (this.dataListSelections.length > 0) {
+          this.dataListSelections.forEach(item => {
+            ids.push(item.id)
+          })
+        }
+      }
+      this.$http.post('/resource/delete', { ids: ids }).then(res => {
+        console.log('删除成功', res)
+        this.getDataList()
+      })
+    },
+      //多选多选
+    handleSelectionChange(val){
+      this.dataListSelections = val;
+    },
+    // 置顶
+    toppingCapacity (item) {
+      this.$http.put('/resource/pin_top/' + item.id).then(res => {
+        console.log('置顶', res.data.code)
+        if (res.data.code == 0) {
+          this.$message({
+            message: '置顶成功',
+            type: 'success'
+          })
+        } else {
+          this.$message({
+            message: '置顶失败',
+            type: 'warning'
+          })
+        }
+      })
+    },
+    reset () {
+       this.getDataList();
+    },
+    findValue (list, type) {
+      const found = list.find((item) => item.attrType === type)
+      if (found) {
+        return found.attrValue
+      } else {
+        return '暂无数据'
+      }
+    },
+    showDetail (val) {
+      console.log(val)
+      window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + val.id)
+      // this.addOrUpdateHandle(id)
+      // this.addOrUpdateVisible = true
+      // this.disabled = false
+      // this.$nextTick(() => {
+      //   this.$refs.addOrUpdate.UpdateState = false
+      //   this.$refs.addOrUpdate.dataFormShowDetails = val
+      //   this.$refs.addOrUpdate.init()
+      // })
+      // this.disabled = true
+    },
+    // 创建uuid
+    uuid (len, radix) {
+      var chars =
+          '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+      var uuid = []
+      var i
+      radix = radix || chars.length
+
+      if (len) {
+        // Compact form
+        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)]
+      } else {
+        // rfc4122, version 4 form
+        var r
+
+        // rfc4122 requires these characters
+        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
+        uuid[14] = '4'
+
+        // Fill in random data.  At i==19 set the high bits of clock sequence as
+        // per rfc4122, sec. 4.1.5
+        for (i = 0; i < 36; i++) {
+          if (!uuid[i]) {
+            r = 0 | (Math.random() * 16)
+            uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r]
+          }
+        }
+      }
+
+      return uuid.join('')
+    },
+    uuidSplice () {
+      this.uuidOne = this.uuid(13, 16)
+      this.uuidTwo = this.uuid(13, 16)
+      this.uuidSnum = this.uuidOne + this.uuidTwo
+      this.uuidSnum = this.uuidSnum.replace(/\s+/g, '')
+      console.log('this.uuidOne', this.uuidSnum)
+    },
+    showDocument (val) {
+      // 第一步：创建文档
+      // 不存在文档时创建空文档
+      this.uuidSplice()
+      const uuidParam = val.infoList.filter((item) => {
+        if (item.attrType === '技术文档') {
+          return item
+        }
+      })
+      if (uuidParam.length > 0) {
+        this.uuidSnum = uuidParam[0].attrValue.split('/')[1].split('.')[0]
+      } else {
+        const type = pinyin(val.type, {
+          pattern: 'initial'
+        }).replace(/\s*/g, '')
+        const obj = {
+          attrType: '技术文档',
+          attrValue: type + '/' + this.uuidSnum + '.md',
+          delFlag: 0
+        }
+        val.infoList.push(obj)
+      }
+
+      // 存在时加入文档
+      this.$http
+        .put('/resource/update', val)
+        .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: () => {
+              // 打开这个空的开发文档
+              window.open(
+                window.SITE_CONFIG.frontUrl + '?id=' + this.uuidSnum + '&&type=' + val.type,
+                '_blank'
+              )
+            }
+          })
+        })
+        .catch(() => {})
+      // 第二部，update列数据，成功后打开文档编辑
+    },
+    getDataList2 (names) {
+      if (names != null) {
+        this.$http
+          .get(
+            this.mixinViewModuleOptions.getDataListURL +
+              '?' +
+              qs.stringify({
+                // order: this.order,
+                // orderField: this.orderField,
+                // type: '组件服务',
+                pageNum: 1,
+                pageSize: this.limit,
+                type: '组件服务',
+                creator: '',
+                selectType: 0,
+                delFlag: 0,
+                name: names,
+              })
+          )
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              this.dataList = []
+              this.total = 0
+              return this.$message.error(res.msg)
+            }
+            if (res.data.list.length !== 0) {
+              this.dataList = res.data.list
+              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 === '应用领域' ||
+                    itemson.attrType === '组件类型'
+                  ) {
+                    dataListSinforList.push(itemson)
+                  }
+                })
+                this.dataList[index].infoList2 = dataListSinforList
+              })
+            } else {
+              this.$message.error('未查询到相关信息')
+              this.reset()
+            }
+          })
+          .catch(() => {
+            this.dataListLoading = false
+          })
+      } else {
+        this.$message.error('查询信息不能为空')
+      }
+    },
+    //   if (window.outerHeight === screen.availHeight) {
+    //     if (window.outerWidth === screen.availWidth) {
+    //       this.qp = false
+    //     } else {
+    //       this.qp = true
+    //     }
+    //   } else {
+    //     this.qp = true
+    //   }
+    // },
+    // 点击关联应用按钮
+    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
+    },
+    // 新上架
+    clear () {
+      console.log('清空----------------------------------------')
+      this.notFilled = []
+      this.showPutOnTheShelfFlag = false
+      this.showPutOnTheShelfFlag2 = false
+      this.insertList = []
+      this.putOnTheShelfList = []
+      this.radio = ''
+      this.submitFrom = {
+        type: '组件服务',
+        deptId: '',
+        delFlag: 0,
+        infoList: [
+          {
+            attrType: '组件类型',
+            attrValue: '图层服务',
+            delFlag: 0
+          }
+        ]
+      }
+      this.reset()
+    },
+    showPutOnTheShelf () {
+      this.showPutOnTheShelfFlag = true
+      this.$http.get('/category/getCategoryTree').then((res) => {
+        this.insertList = res.data.data.filter(
+          (item) => item.name === '组件服务一'
+        )[0]
+      })
+    },
+    showPutOnTheShelfVue () {
+      this.showPutOnTheShelfFlag = false
+      this.showPutOnTheShelfFlag2 = true
+      this.submitFrom.infoList[0].attrValue = this.radio
+      this.putOnTheShelfList = this.insertList.children.filter(
+        (item) => item.name === this.radio
+      )[0].children
+    },
+    changeInfoList (obj) {
+      console.log(obj, this.submitFrom)
+      this.submitFrom.infoList = this.submitFrom.infoList.filter(
+        (item) => item.attrType !== obj.attrType
+      )
+      this.submitFrom.infoList.push(obj)
+    },
+    changeAdd () {
+      const arr = []
+      switch (this.radio) {
+        case '智能算法':
+          arr.push('算法优势')
+          arr.push('计费标准信息')
+          break
+        case '开发组件':
+        case '业务组件':
+          arr.push('功能介绍')
+          break
+      }
+      arr.push('应用场景')
+      arr.push('常见问题')
+      this.$refs.putOnTheShelf.submit(arr)
+    },
+    submitData () {
+      console.log('提交11111111111===============>', this.putOnTheShelfList, this.submitFrom)
+      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 = []
+      if (!this.submitFrom.name) {
+        this.notFilled.push('算法名称')
+        this.notFilled.push('图层名称')
+        this.notFilled.push('组件名称')
+      }
+      if (!this.submitFrom.description) {
+        this.notFilled.push('算法描述')
+        this.notFilled.push('图层描述')
+        this.notFilled.push('组件描述')
+      }
+      if (!this.submitFrom.shareCondition) {
+        this.notFilled.push('共享条件')
+      }
+      if (!this.submitFrom.deptContacts) {
+        this.notFilled.push('部门联系人')
+      }
+      if (!this.submitFrom.deptId) {
+        this.notFilled.push('归属部门')
+      }
+      if (!this.submitFrom.deptPhone) {
+        this.notFilled.push('部门联系人电话')
+      }
+      if (this.radio === '智能算法' && !this.submitFrom.apiUrl) {
+        if ((this.submitFrom.infoList.filter(val => val.attrType === '使用方式')[0].attrValue === '调用接口')) {
+          this.notFilled.push('服务接口')
+        }
+      }
+      if (this.radio === '智能算法' && !this.submitFrom.apiMethodType) {
+        if ((this.submitFrom.infoList.filter(val => val.attrType === '使用方式')[0].attrValue === '调用接口')) {
+          this.notFilled.push('接口请求方式')
+        }
+      }
+      if (this.radio === '智能算法' && (!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.radio === '图层服务' && (!this.submitFrom.infoList.filter(val => val.attrType === '服务地址')[0] || !this.submitFrom.infoList.filter(val => val.attrType === '服务地址')[0].attrValue)) {
+        this.notFilled.push('服务地址')
+      }
+      if ((this.radio === '业务组件' || this.radio === '开发组件') && (!this.submitFrom.infoList.filter(val => val.attrType === '组件地址')[0] || !this.submitFrom.infoList.filter(val => val.attrType === '组件地址')[0].attrValue)) {
+        this.notFilled.push('组件地址')
+      }
+      console.log(this.submitFrom, this.notFilled, '表单验证')
+      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)
+          console.log(this.submitFrom.infoList, '===============abc')
+          // 去重
+          const newArr = this.submitFrom.infoList.filter(
+            (element, index, self) => {
+              return (
+                self.findIndex((x) => x.attrType === element.attrType) === index
+              )
+            }
+          )
+          this.submitFrom.infoList = newArr
+          // 检验是否有空值
+          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('修改失败!')
+              } else {
+                this.$message.success('修改成功！')
+                this.clear()
+              }
+            })
+            .catch(() => {})
+        } else {
+          console.log('提交11111111111===============>', this.putOnTheShelfList, this.submitFrom)
+          this.$http
+            .post('/resource/insert?source= b', this.submitFrom)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                this.$message.error('上架失败!')
+              } else {
+                this.$message.success('上架成功！')
+                this.clear()
+              }
+            })
+            .catch(() => {})
+        }
+      }
+    },
+    // 新修改
+    UpdateData (item) {
+      this.$http.get('/category/getCategoryTree').then((res) => {
+        this.insertList = res.data.data.filter(
+          (item) => item.name === '组件服务一'
+        )[0]
+        this.radio = item.infoList.filter(
+          (val) => val.attrType === '组件类型'
+        )[0].attrValue
+        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
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-tooltip__popper {
+  max-width: 50%;
+}
+// ::v-deep .el-table .cell {
+//   width: 200px;
+// }
+::v-deep .el-upload-list__item-name {
+  width: 400px;
+}
+</style>