diff --git a/back/public/index.html b/back/public/index.html
index 1d32cc9d..d96dc6a3 100644
--- a/back/public/index.html
+++ b/back/public/index.html
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-11 10:11:40
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-07-11 18:56:36
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-15 18:41:00
  * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@@ -44,7 +44,7 @@
       // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.166:8888/renren-admin';
     // window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
     // window.SITE_CONFIG['apiURL'] = 'http://10.16.5.35:8888/renren-admin';
-    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.239:8888/renren-admin';
+    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
     window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
     // window.SITE_CONFIG['apiURL'] = 'http://15.2.23.141:8000/renren-admin';
     // WebSocket地址
diff --git a/back/src/components/ren-process-detail/src/ren-process-detail.vue b/back/src/components/ren-process-detail/src/ren-process-detail.vue
index a415516a..89bc0d45 100644
--- 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
- * @LastEditTime: 2022-06-06 13:14:02
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-16 15:07:44
  * @Description: 告诉大家这是什么
 -->
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <!-- 流程图 -->
-    <h4>{{ $t('process.flowImage') }}</h4>
-    <img :src="getResourceURL()" class="image">
+    <!-- <h4>{{ $t('process.flowImage') }}</h4>
+    <img :src="getResourceURL()" class="image"> -->
     <!-- 流转详情 -->
     <h4>{{ $t('process.circulation') }}</h4>
     <div class="mod-sys__dict">
diff --git a/back/src/mixins/view-module.js b/back/src/mixins/view-module.js
index ae81da9b..b7b8b33e 100644
--- a/back/src/mixins/view-module.js
+++ b/back/src/mixins/view-module.js
@@ -109,6 +109,11 @@ export default {
         }
 
         console.log('数据列表', this.dataList, this.mixinViewModuleOptions.getDataListURL)
+        if (this.dataList[0].type === '组件服务') {
+          this.dataList.map(val => {
+            val.infoList = val.infoList.filter(item => item.attrType === '部署位置' || item.attrType === '组件类型' || item.attrType === '应用领域')
+          })
+        }
         if (this.mixinViewModuleOptions.requestCallback) {
           this.mixinViewModuleOptions.requestCallback(res.data)
         }
diff --git a/back/src/views/modules/ability/bsabilityai.vue b/back/src/views/modules/ability/bsabilityai.vue
index 930685e1..c7a467c4 100644
--- a/back/src/views/modules/ability/bsabilityai.vue
+++ b/back/src/views/modules/ability/bsabilityai.vue
@@ -69,6 +69,14 @@
           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>
         <af-table-column
         :show-overflow-tooltip="true"
           width="300"
@@ -273,6 +281,7 @@ export default {
           this.dataList = this.mixinViewModuleOptions.getDataListIsPage
             ? res.data.list
             : res.data
+          console.log('this.dataList', this.dataList)
           this.total = this.mixinViewModuleOptions.getDataListIsPage
             ? res.data.total
             : 0
diff --git a/back/src/views/modules/activiti/demo/comments.vue b/back/src/views/modules/activiti/demo/comments.vue
index dc18fb61..fe6f3ddd 100644
--- a/back/src/views/modules/activiti/demo/comments.vue
+++ b/back/src/views/modules/activiti/demo/comments.vue
@@ -72,16 +72,17 @@ export default {
       })
     },
     getInfo (id) {
-      this.$http.get('/resourceMountApply/' + id).then(({ data: res }) => {
+      this.$http.get('/demandComment/' + id).then(({ data: res }) => {
         if (res.code !== 0) {
           return this.$message.error(res.msg)
         }
-        this.dataForm = res.data.resourceDTO
-        if (this.dataForm.type != '应用资源') {
-          this.shifoushizujian = false
-        } else {
-          this.shifoushizujian = true
-        }
+        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)
       })
     }
diff --git a/back/src/views/modules/activiti/my-todo-task.vue b/back/src/views/modules/activiti/my-todo-task.vue
index d9c0482b..ebe89cce 100644
--- a/back/src/views/modules/activiti/my-todo-task.vue
+++ b/back/src/views/modules/activiti/my-todo-task.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-27 19:34:30
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-23 21:08:01
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-16 11:40:26
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -40,6 +40,17 @@
           align="center"
           width="50"
         ></el-table-column>
+        <!-- <el-table-column label="申请标题" header-align="center" align="center">
+          <template slot-scope="scope">
+            <span>{{
+              (scope.row.params && scope.row.params.tAbilityApplicationDTOList && scope.row.params.tAbilityApplicationDTOList[0].title) ||
+              (scope.row.params && scope.row.params.comment) ||
+              (scope.row.params && scope.row.params.userName) ||
+              (scope.row.params && scope.row.params.undercarriageUserName)||
+              (scope.row.params && scope.row.params.name)
+            }}</span>
+          </template>
+        </el-table-column> -->
         <el-table-column label="申请人" header-align="center" align="center">
           <template slot-scope="scope">
             <span>{{
diff --git a/back/src/views/modules/myAgent/demo/Application-resources.vue b/back/src/views/modules/myAgent/demo/Application-resources.vue
deleted file mode 100644
index bf310a87..00000000
--- a/back/src/views/modules/myAgent/demo/Application-resources.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="wrapper"></div>
-</template>
-
-<script>
-export default {
-  components: {},
-  props: {},
-  data () {
-    return {}
-  },
-  watch: {},
-  computed: {},
-  methods: {},
-  created () {},
-  mounted () {}
-}
-</script>
-<style lang="scss" scoped>
-.wrapper {
-}
-</style>
diff --git a/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue b/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
index 2b46e2d3..426d31e5 100644
--- a/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
+++ b/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
@@ -168,20 +168,6 @@ export default {
           this.dataView = val.filter(
             (item) => item.name === this.dataForm.type + '一'
           )[0]
-          console.log(this.dataView)
-          console.log(this.dataForm)
-          // 应用描述
-          // this.dataView.children[0].children[0].children[4].note1 =
-          //   this.dataForm.description
-          // 应用名称
-          // this.dataView.children[0].children[0].children[0].note1 =
-          //   this.dataForm.name
-          // 共享条件
-          this.dataView.children[2].children[1].children[0].note1 =
-            this.dataForm.shareCondition
-          // 共享类型
-          this.dataView.children[2].children[1].children[1].note1 =
-            this.dataForm.shareType
           this.dataForm.infoList.map((item, index) => {
             this.dataView.children.map((itemView, indexView) => {
               // console.log('itemView', itemView)
@@ -236,6 +222,7 @@ export default {
                 })
               })
             })
+
             if (item.attrType === '功能介绍') {
               this.dataForm.infoList[index].attrValue = JSON.parse(
                 item.attrValue
@@ -318,7 +305,11 @@ export default {
                 })
               })
             })
-            if (item.attrType === '算法优势' || item.attrType === '应用场景') {
+            if (
+              item.attrType === '算法优势' ||
+              item.attrType === '应用场景' ||
+              item.attrType === '功能介绍'
+            ) {
               this.dataForm.infoList[index].attrValue = JSON.parse(
                 item.attrValue
               )
diff --git a/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue b/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue
index a6e1e698..2919c269 100644
--- a/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue
+++ b/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue
@@ -7,9 +7,6 @@
         @keyup.enter.native="dataFormSubmitHandle()"
         :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
       >
-        <div v-if="shifoushizujian">
-          <Applicationresources></Applicationresources>
-        </div>
         <div v-if="flagShow">
           <ResourcesAndServices
             :dataForm="dataForm"
@@ -39,21 +36,31 @@
     <div class="agreeOr">
       <h3>审批</h3>
       <div>
-        <el-radio-group v-model="agreeOrList" style="width:230px;">
+        <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>
+        <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.native="agreeOrNot($store.state.contentTabsActiveName)"
+          >提交</el-button
+        >
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import processModule from '@/mixins/process-module'
-import Applicationresources from './Application-resources.vue'
 import ResourcesAndServices from './ResourcesAndServices.vue'
 import debounce from 'lodash/debounce'
 import qs from 'qs'
@@ -62,7 +69,6 @@ export default {
   // 注入公共方法
   // mixins: [processModule],
   components: {
-    Applicationresources,
     ResourcesAndServices
   },
   props: {
@@ -146,64 +152,100 @@ export default {
         // }
       })
     },
-    agreeOrNot: debounce(function () {
-      if (this.agreeOrList === '同意') {
-        console.log('this.dataForm.taskId', this.taskId)
-        const params = qs.stringify({
-          taskId: this.taskId,
-          comment: this.inputAgree
-        })
-        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
-          }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              if (this.callbacks.taskHandleSuccessCallback) {
-                this.callbacks.taskHandleSuccessCallback(res)
-              }
-            }
+    agreeOrNot: debounce(
+      function (data) {
+        console.log(data)
+        if (this.agreeOrList === '同意') {
+          console.log('this.dataForm.taskId', this.taskId)
+          const params = qs.stringify({
+            taskId: this.taskId,
+            comment: this.inputAgree
           })
-        }).catch(() => {})
-      } else if (this.agreeOrList === '退回') {
-        console.log('this.dataForm.taskId', this.taskId)
-        const params = qs.stringify({
-          taskId: this.taskId,
-          comment: this.inputNo
-        })
-        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
-          }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              if (this.callbacks.taskHandleSuccessCallback) {
-                this.callbacks.taskHandleSuccessCallback(res)
+          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
               }
-            }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.visible = false
+                  if (this.callbacks.taskHandleSuccessCallback) {
+                    this.callbacks.taskHandleSuccessCallback(res)
+                  }
+                }
+              })
+            })
+            .catch(() => {})
+        } else if (this.agreeOrList === '退回') {
+          console.log('this.dataForm.taskId', this.taskId)
+          const params = qs.stringify({
+            taskId: this.taskId,
+            comment: this.inputNo
           })
+          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
+              }
+              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)
+      },
+      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 }
         })
       }
-    }, 1000, { leading: true, trailing: false })
+    }
   }
-
 }
 </script>
 <style scoped lang="scss">
diff --git a/back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue b/back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue
index 88ac92a0..1fd6ae7a 100644
--- a/back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue
+++ b/back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue
@@ -19,7 +19,7 @@ js:
       <a-input v-if="type == 'input'" v-model:value="data.note1" :placeholder="'请输入' + name" />
       <!-- 下拉框 -->
        <el-select
-        v-else-if="(type === 'select' && name !== '归属部门') || type == 'radio'"
+        v-else-if="(type === 'select' && name !== '归属部门' && name !== '使用方式') || type == 'radio'"
         style="width: 240px"
          v-model:value="data.note1"
         :placeholder="'请选择' + name">
@@ -45,6 +45,20 @@ js:
         {{ itemSelect.name }}
         </el-option>
       </el-select>
+      <el-select
+        v-else-if="(type === 'select' && name === '使用方式')"
+       style="width: 240px"
+         v-model:value="data.note1"
+        :placeholder="'请选择' + name"
+        @change="showTypeClick"
+        >
+        <el-option
+          :value="itemSelect.dictLabel"
+          v-for="(itemSelect, indexSelect) in options"
+          :key="indexSelect">
+        {{ itemSelect.dictLabel }}
+        </el-option>
+      </el-select>
       <!-- 多选 -->
       <div
         v-else-if="type === 'checkBox'"
@@ -89,7 +103,8 @@ export default {
       valueCheckBox: [],
       // 单选数据
       regionSelect: '',
-      showKey: 0
+      showKey: 0,
+      showType: ''
     }
   },
   methods: {
@@ -157,6 +172,11 @@ export default {
         }
       })
       this.data.note1 = str
+    },
+    showTypeClick (e) {
+      this.showType = e
+      console.log(e)
+      this.$emit('show-type', this.showType)
     }
   },
   created () {
@@ -172,6 +192,7 @@ export default {
   },
   mounted () {
     this.selectOptions()
+    this.showTypeClick('调用接口')
   }
 }
 </script>
diff --git a/back/src/views/modules/putOnTheShelf/index.vue b/back/src/views/modules/putOnTheShelf/index.vue
index 85763ee6..daeda7c2 100644
--- a/back/src/views/modules/putOnTheShelf/index.vue
+++ b/back/src/views/modules/putOnTheShelf/index.vue
@@ -11,7 +11,16 @@
         <div v-for='child in parent.children' :key='child.id'>
           <template v-if='judgmentType.filter(item => item.name==child.name).length === 0'>
             <div class="top">{{child.name}}</div>
-            <div v-for="item in child.children" :key="item.id" class='item' v-show="item.name != '来源应用' && item.name != '关联组件信息' && item.name != '技术文档'">
+            <div v-for="item in child.children" :key="item.id" class='item' v-show="(item.name != '来源应用' && item.name != '关联组件信息' && item.name != '技术文档') && !(
+              (showTypeName == '调用接口' && item.name == '平台地址') ||
+                (showTypeName == '调用接口' && item.name == 'SDK安装包') ||
+                (showTypeName == '平台对接' && item.name == 'SDK安装包') ||
+                (showTypeName == '平台对接' && item.name == '接口请求方式') ||
+                (showTypeName == '平台对接' && item.name == '服务接口') ||
+                (showTypeName == 'SDK' && item.name == '平台地址') ||
+                (showTypeName == 'SDK' && item.name == '接口请求方式') ||
+                (showTypeName == 'SDK' && item.name == '服务接口')
+            )">
               <span >{{ item.name }}</span>
               <!-- <upload :list="[]" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
                 tip="支持图片类型，大小不超过100M"></upload> -->
@@ -23,10 +32,12 @@
                 tip="支持文件类型，大小不超过100M"></upload>
               <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.mp4' :list="item" v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :dataList="item"
                 tip="支持视频类型，大小不超过100M"></upload>
+              <upload  @changeInfoList='changeInfoList' :title='item.name' accept='.zip' :list="item" v-else-if="item.type == 'package'" type="安装包" btnName="上传安装包" :maxCount="1" :dataList="item"
+                tip="支持.zip类型，大小不超过100M"></upload>
               <input-select-checkbox :list="[]" v-else-if="item.type == 'AbilityType'" type="disabled" :data="item" :name="item.name" :value="typeInput"></input-select-checkbox>
               <input-select-checkbox :list="[]" v-else-if="item.type == 'ComponentType'" type="disabled" :data="item" :name="item.name" :value="type"></input-select-checkbox>
               <input-select-checkbox :list="[]" v-else-if="item.type == 'input'" type="input" :data="item" :name="item.name"></input-select-checkbox>
-              <input-select-checkbox :list="[]" v-else-if="item.type == 'select'" type="select" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
+              <input-select-checkbox :list="[]" v-else-if="item.type == 'select'" type="select" :data="item" :name="item.name" :options="item.options" @show-type="showType"></input-select-checkbox>
               <input-select-checkbox :list="[]" v-else-if="item.type == 'checkBox'" type="checkBox" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
               <input-select-checkbox :list="[]" v-else-if="item.type == 'radio'" type="radio" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
               <input-select-checkbox :list="[]" v-else-if="item.type == 'textArea'" type="textArea" :data="item" :name="item.name"></input-select-checkbox>
@@ -163,15 +174,39 @@ export default {
             }
           ]
         }
-      ]
+      ],
+      showTypeName: ''
     }
   },
+  mounted () {
+    this.defaultContent()
+  },
   methods: {
     changeInfoList (obj) {
       this.$emit('changeInfoList', obj)
     },
     goToRichText () {
 
+    },
+    // 默认显示--调用接口
+    defaultContent () {
+      this.putOnTheShelfList.forEach((item) => {
+        if (item.name === '部署与使用') {
+          item.children.forEach((itemChild) => {
+            if (itemChild.name === '使用方式') {
+              itemChild.children.forEach((itemChilds) => {
+                if (itemChilds.name === '使用方式') {
+                  itemChilds.note1 = '调用接口'
+                }
+              })
+            }
+          })
+        }
+      })
+    },
+    showType (data) {
+      this.showTypeName = data
+      console.log(data, this.showTypeName, '传过来的showType')
     }
   }
 }
diff --git a/front/public/index.html b/front/public/index.html
index 040ff813..d2dc40f3 100644
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-03-29 16:45:25
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-14 10:58:46
+ * @LastEditTime: 2022-07-16 16:01:48
  * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@@ -46,7 +46,7 @@
     // window.SITE_CONFIG['frontUrl'] = 'http://10.134.135.9:9796/document/#/devModelFile/';
     // window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
     // 开发
-    window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
+    window.SITE_CONFIG['backUrl'] = 'http://localhost:8001';
     window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
     window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
     window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
diff --git a/front/public/static/config/location.js b/front/public/static/config/location.js
index 685e6098..acba5bf8 100644
--- a/front/public/static/config/location.js
+++ b/front/public/static/config/location.js
@@ -2,12 +2,12 @@
  * @Author: hisense.wuhongjian
  * @Date: 2020-07-07 16:03:23
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-07-14 10:01:08
+ * @LastEditTime: 2022-07-18 11:34:38
  * @Description: 数据资源参数配置
  */
-const newLocation = 'qingdao'
+//const newLocation = 'qingdao'
 // const newLocation = 'baotou'
-//  const newLocation = 'xihaian'
+const newLocation = 'xihaian'
 
 // 数据资源数据
 const whoShow = {}
diff --git a/front/src/api/user.js b/front/src/api/user.js
index a39992be..a8e05e59 100644
--- a/front/src/api/user.js
+++ b/front/src/api/user.js
@@ -23,11 +23,15 @@ export async function socialLogin(data) {
   })
 }
 
-export function getUserInfo() {
+export function getUserInfo(redict) {
   //此处为了兼容mock.js使用data传递accessToken，如果使用mock可以走headers
+  // debugger
   return request({
     url: '/sys/user/info',
     method: 'get',
+    headers: {
+      REQUESTURI:redict
+    }
   })
 }
 export function getDeptAll() {
diff --git a/front/src/assets/newHome/newHome-title-bg-xihaian.png b/front/src/assets/newHome/newHome-title-bg-xihaian.png
new file mode 100644
index 00000000..cfe3b105
Binary files /dev/null and b/front/src/assets/newHome/newHome-title-bg-xihaian.png differ
diff --git a/front/src/utils/request.js b/front/src/utils/request.js
index 0f02346e..533020c2 100644
--- a/front/src/utils/request.js
+++ b/front/src/utils/request.js
@@ -23,24 +23,10 @@ let loadingInstance
  * @param {*} msg
  */
 const handleCode = (code, msg, res) => {
-  debugger
+  // debugger
   switch (code) {
     case 401:
-      // message.error(msg || '登录失效')
-
       store.dispatch('user/resetAll').catch(() => {})
-      debugger
-      // if (res.token) {
-      //   console.log('存在token信息', res.token)
-      // setAccessToken(res.token)
-      // const token = getAccessToken()
-      // console.log('验证token信息', token)
-      // }
-
-      // // location.reload()
-      // if (redirect) {
-      //   window.location.href = res.redirect
-      // }
       break
     case 403:
       router.push({ path: '/401' }).catch(() => {})
@@ -72,10 +58,9 @@ const instance = axios.create({
  */
 instance.interceptors.request.use(
   (config) => {
-    debugger
+    // debugger
     const token = getAccessToken()
-    if (token)
-      config.headers[tokenName] = token
+    if (token) config.headers[tokenName] = token
     if (
       config.data &&
       config.headers['Content-Type'] ===
@@ -85,7 +70,10 @@ instance.interceptors.request.use(
     if (debounce.some((item) => config.url.includes(item))) {
       //这里写加载动画
     }
-    config.headers.REQUESTURI = window.location.href
+    if (!config.headers.REQUESTURI){
+      config.headers.REQUESTURI = window.location.href
+    }
+
     return config
   },
   (error) => {
@@ -104,17 +92,13 @@ instance.interceptors.response.use(
     console.log('接口返回REDIRECT', response.headers.redirect)
     response['Access-Control-Expose-Headers'] = 'redirect'
     const { code, message } = response.data
-    debugger
-    if (code=='0' && response.headers.token) {
+    
+    if (response.headers.token) {
       setAccessToken(response.headers.token)
-    } else {
-      const token = getAccessToken()
-      if (response.headers.redirect && !token) {
-        // window.location.href = response.headers.redirect
-        window.location.replace(response.headers.redirect)
+    } 
+    if (response.headers.redirect) {
+      window.location.replace(response.headers.redirect)
         return
-        // location.reload()
-      }
     }
     if (response.headers.redirect === '/#/login') {
       var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
@@ -159,7 +143,7 @@ instance.interceptors.response.use(
     // }
   },
   (error) => {
-    debugger
+    // debugger
     console.log('接口error', error)
     if (loadingInstance) loadingInstance.close()
 
@@ -168,12 +152,12 @@ instance.interceptors.response.use(
       console.log('接口返回', response)
       console.log('接口返回headers', response.headers)
       console.log('接口返回REDIRECT', response.headers.redirect)
-      // if (response.headers.token) {
-      //   setAccessToken(response.headers.token)
-      // }
+      if (response.headers.token) {
+        setAccessToken(response.headers.token)
+      }
       if (response.headers.redirect) {
         window.location.replace(response.headers.redirect)
-        // return Promise.resolve()
+        return Promise.resolve()
       }
       const { status, data } = response
 
diff --git a/front/src/vab/plugins/permissions.js b/front/src/vab/plugins/permissions.js
index 6139bd4b..38f98cdf 100644
--- a/front/src/vab/plugins/permissions.js
+++ b/front/src/vab/plugins/permissions.js
@@ -2,65 +2,59 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-01 17:23:11
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-07-11 16:39:36
+ * @LastEditTime: 2022-07-18 11:25:28
  * @Description: 告诉大家这是什么
  */
 /**
  * @author chuzhixin 1204505056@qq.com
  * @description 路由守卫，目前两种模式：all模式与intelligence模式
  */
- import router from '@/router'
- import store from '@/store'
- import getPageTitle from '@/utils/pageTitle'
- import { getUserInfo } from '@/api/user'
- import {
-   // authentication,
-   loginInterception,
-   // recordRoute,
-   routesWhiteList,
- } from '@/config'
- import { setAccessToken, getAccessToken } from '@/utils/accessToken'
- router.beforeEach(async (to, from, next) => {
-   // debugger
-   // const SSOTOKEN = to.query.SSOToken
-   // if (SSOTOKEN) {
-   //   setAccessToken(SSOTOKEN)
-   // }
-   const token = getAccessToken()
-   console.log('token', token)
-   let hasToken = token || store.getters['user/accessToken']
-   // debugger
-   if (!loginInterception) hasToken = true
-   console.log('hasToken存在巨大问题', hasToken)
-   if (hasToken) {
+import router from '@/router'
+import store from '@/store'
+import getPageTitle from '@/utils/pageTitle'
+import { getUserInfo } from '@/api/user'
+import {
+  // authentication,
+  loginInterception,
+  // recordRoute,
+  routesWhiteList,
+} from '@/config'
+import { setAccessToken, getAccessToken } from '@/utils/accessToken'
+router.beforeEach(async (to, from, next) => {
+  // debugger
+  // const SSOTOKEN = to.query.SSOToken
+  // if (SSOTOKEN) {
+  //   setAccessToken(SSOTOKEN)
+  // }
+
+  const token = getAccessToken()
+  console.log('token', token)
+  let hasToken = token
+  // debugger
+  if (!loginInterception) hasToken = true
+  console.log('hasToken存在巨大问题', hasToken)
+  if (hasToken) {
     //  setAccessToken(hasToken)
-     await store.dispatch('user/getUserInfo')
-     debugger
-     next()
-   } else {
-     let accessRoutes = []
-     accessRoutes = await store.dispatch('routes/setRoutes')
-     accessRoutes.forEach((item) => {
-       router.addRoute(item)
-     })
-     if (routesWhiteList.indexOf(to.path) !== -1) {
-       next()
-     } else {
+    await store.dispatch('user/getUserInfo')
+    // debugger
+    next()
+  } else {
+    let accessRoutes = []
+    accessRoutes = await store.dispatch('routes/setRoutes')
+    accessRoutes.forEach((item) => {
+      router.addRoute(item)
+    })
+    if (routesWhiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
       // 这里是一个单点登录的入口
-      getUserInfo().then(res=>{
-        console.log(res)
-        router.replace('/home')
-      })
-      //  await store.dispatch('user/getUserInfo')
-      //   next()
-       // if (recordRoute)
-       //   next({ path: '/login', query: { redirect: to.path }, replace: true })
-       // else next({ path: '/login', replace: true })
-      //  next()
-       // window.open('http://www.baidu.com', '_self')
-     }
-   }
- })
- router.afterEach((to) => {
-   document.title = getPageTitle(to.meta.title)
- })
+      if (to.query.redict) getUserInfo(to.query.redict)
+      else {
+        getUserInfo()
+      }
+    }
+  }
+})
+router.afterEach((to) => {
+  document.title = getPageTitle(to.meta.title)
+})
diff --git a/front/src/views/abilityStatistics/components/AtlasResources.vue b/front/src/views/abilityStatistics/components/AtlasResources.vue
index 9d9afe04..29aa1ade 100644
--- a/front/src/views/abilityStatistics/components/AtlasResources.vue
+++ b/front/src/views/abilityStatistics/components/AtlasResources.vue
@@ -110,9 +110,24 @@
             :pagination="false"
           >
             <template #bodyCell="{ column, text }">
-              <template v-if="column.dataIndex !== 'name'">
+              <template
+                v-if="
+                  column.dataIndex !== 'name' &&
+                  (column.title === '组件服务' || column.title === '应用资源')
+                "
+              >
                 {{ text || 0 }}
               </template>
+              <template
+                v-else-if="
+                  column.dataIndex !== 'name' &&
+                  (column.title === '知识库' ||
+                    column.title === '基础设施' ||
+                    column.title === '数据资源')
+                "
+              >
+                --
+              </template>
             </template>
           </a-table>
         </div>
diff --git a/front/src/views/abilityStatistics/components/SharingSituation.vue b/front/src/views/abilityStatistics/components/SharingSituation.vue
index 9fdf2b43..88b0eddc 100644
--- a/front/src/views/abilityStatistics/components/SharingSituation.vue
+++ b/front/src/views/abilityStatistics/components/SharingSituation.vue
@@ -182,15 +182,15 @@
     })
   }
   let photoBg = ref([
-    require('../../../assets/abilityStatistics/zhishiku-bg.png'),
     require('../../../assets/abilityStatistics/yingyongziyuan-bg.png'),
+    require('../../../assets/abilityStatistics/zhishiku-bg.png'),
     require('../../../assets/abilityStatistics/zujianfuwu-bg.png'),
     require('../../../assets/abilityStatistics/shujuziyuan-bg.png'),
     require('../../../assets/abilityStatistics/jichujianshe-bg.png'),
   ])
   let photo = ref([
-    require('../../../assets/abilityStatistics/zhishiku.png'),
     require('../../../assets/abilityStatistics/yingyongziyuan.png'),
+    require('../../../assets/abilityStatistics/zhishiku.png'),
     require('../../../assets/abilityStatistics/zujianfuwu.png'),
     require('../../../assets/abilityStatistics/shujuziyuan.png'),
     require('../../../assets/abilityStatistics/jichujianshe.png'),
@@ -202,19 +202,19 @@
       // dataLists.value = res.data.data
       res.data.data.map((item) => {
         switch (item.type) {
-          case '知识库':
-            dataLists.value[0] = item
-            break
           case '应用资源':
             dataLists.value[1] = item
             break
-          case '组件服务':
+          case '业务组件':
+            dataLists.value[0] = item
+            break
+          case '图层服务':
             dataLists.value[2] = item
             break
-          case '数据资源':
+          case '开发组件':
             dataLists.value[3] = item
             break
-          case '基础设施':
+          case '智能算法':
             dataLists.value[4] = item
             break
           default:
diff --git a/front/src/views/assignCase/components/AssignCaseDetailPage.vue b/front/src/views/assignCase/components/AssignCaseDetailPage.vue
index fdde065e..2124c217 100644
--- a/front/src/views/assignCase/components/AssignCaseDetailPage.vue
+++ b/front/src/views/assignCase/components/AssignCaseDetailPage.vue
@@ -13,7 +13,7 @@
       <div class="assign-case-detail-page-header-son">
         <div
           class="assign-case-detail-page-header-son-left"
-          :style="`background:url(${dataFrom.note1})`"
+          :style="`background-image:url(${dataFrom.note1})`"
         ></div>
         <div class="assign-case-detail-page-header-son-right">
           <div class="assign-case-detail-page-header-son-right-title">
diff --git a/front/src/views/capabilityCloud/index.vue b/front/src/views/capabilityCloud/index.vue
index b1c7d442..04dd8dc9 100644
--- a/front/src/views/capabilityCloud/index.vue
+++ b/front/src/views/capabilityCloud/index.vue
@@ -32,7 +32,7 @@
   import { useRouter } from 'vue-router'
   const router = useRouter()
   const goHome = () => {
-    router.push('/home')
+    router.push({path: '/home', query:{redict: window.location.origin + '/#/home'}})
   }
 </script>
 <style lang="less">
diff --git a/front/src/views/capacityOnTheShelf/Algorithm.vue b/front/src/views/capacityOnTheShelf/Algorithm.vue
index f27c0538..b0340a92 100644
--- a/front/src/views/capacityOnTheShelf/Algorithm.vue
+++ b/front/src/views/capacityOnTheShelf/Algorithm.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-13 10:22:27
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-15 16:28:56
+ * @LastEditTime: 2022-07-16 14:27:31
  * @Description: 算法上架
 -->
 <template>
@@ -397,61 +397,107 @@
   })
 </script>
 <style lang="less" scoped>
-.box {
-  position: relative;
-  top: 64px;
-  margin: 15px 400px;
-  padding: 10px;
-  background: #fff;
-  .header {
-    font-size: 28px;
-    font-weight: 600;
-  }
-  .vue-box {
-    padding: 0 100px;
-  }
-  .top {
-    margin: 10px 20px 0;
-    padding: 15px 30px;
-    background: #edf4fc;
-    display: flex;
-    justify-content: space-between;
-    div {
-      font-size: 18px;
-      color: #999;
+  .box {
+    position: relative;
+    top: 64px;
+    margin: 15px 400px;
+    padding: 10px;
+    background: #fff;
+    .header {
+      font-size: 28px;
+      font-weight: 600;
+    }
+    .vue-box {
+      padding: 0 100px;
+    }
+    .top {
+      margin: 10px 20px 0;
+      padding: 15px 30px;
+      background: #edf4fc;
       display: flex;
-      justify-content: center;
-      align-items: center;
-      .bg-box {
+      justify-content: space-between;
+      div {
+        font-size: 18px;
+        color: #999;
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 45px;
-        height: 45px;
-        border-radius: 50%;
-        border: 1px solid rgb(214, 214, 214);
-        margin-right: 10px;
-        transition: all 0.3s ease;
-        span {
+        .bg-box {
           display: flex;
           justify-content: center;
           align-items: center;
-          width: 30px;
-          height: 30px;
+          width: 45px;
+          height: 45px;
           border-radius: 50%;
-          border: 1px solid #999;
+          border: 1px solid rgb(214, 214, 214);
+          margin-right: 10px;
+          transition: all 0.3s ease;
+          span {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            border: 1px solid #999;
+          }
+        }
+        .line {
+          margin-left: 10px;
+          width: 130px;
+          height: 1px;
+          background: #999;
         }
       }
-      .line {
-        margin-left: 10px;
-        width: 130px;
-        height: 1px;
-        background: #999;
+      .finish {
+        color: #0087ff;
+        .bg-box {
+          background: #9ccefa;
+          color: #fff;
+          border: 1px solid #9ccefa;
+          span {
+            background: #0087ff;
+            border: 1px solid #0087ff;
+          }
+        }
+        .line {
+          background: #0087ff;
+        }
+      }
+      .btn {
+        display: flex;
+        justify-content: space-around;
+        padding: 10px 350px 0;
+        button {
+          cursor: pointer;
+          width: 80px;
+          height: 35px;
+          text-align: center;
+          color: #fff;
+          border: 1px solid #9ccefa;
+          span {
+            background: #0087ff;
+            border: 1px solid #0087ff;
+          }
+        }
+        .line {
+          background: #0087ff;
+        }
+        button:nth-of-type(1) {
+          color: #0087ff;
+          background: #e1edfa;
+        }
+        button:nth-of-type(2) {
+          background: #01c5dc;
+        }
+      }
+      .first {
+        justify-content: space-around;
       }
     }
     .btn {
       display: flex;
-      justify-content: space-around;
+      justify-content: space-between;
       padding: 10px 350px 0;
       button {
         cursor: pointer;
@@ -459,13 +505,8 @@
         height: 35px;
         text-align: center;
         color: #fff;
-        border: 1px solid #9ccefa;
-        span {
-          background: #0087ff;
-          border: 1px solid #0087ff;
-        }
-      }
-      .line {
+        border: none;
+        border-radius: 6px;
         background: #0087ff;
       }
       button:nth-of-type(1) {
@@ -480,30 +521,4 @@
       justify-content: space-around;
     }
   }
-  .btn {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px 400px 0;
-    button {
-      cursor: pointer;
-      width: 80px;
-      height: 35px;
-      text-align: center;
-      color: #fff;
-      border: none;
-      border-radius: 6px;
-      background: #0087ff;
-    }
-    button:nth-of-type(1) {
-      color: #0087ff;
-      background: #e1edfa;
-    }
-    button:nth-of-type(2) {
-      background: #01c5dc;
-    }
-  }
-  .first {
-    justify-content: center;
-  }
-}
 </style>
diff --git a/front/src/views/capacityOnTheShelf/Application.vue b/front/src/views/capacityOnTheShelf/Application.vue
index dc0882d2..9e66206a 100644
--- a/front/src/views/capacityOnTheShelf/Application.vue
+++ b/front/src/views/capacityOnTheShelf/Application.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-13 10:22:27
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-14 09:44:49
+ * @LastEditTime: 2022-07-15 17:39:25
  * @Description: 应用上架
 -->
 <template>
@@ -75,6 +75,7 @@
       ></application-deployment-use> -->
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
+      <button @click="close()">取消</button>
       <button v-show="showView !== '基本信息'" @click="back()">上一步</button>
       <button v-show="showView === '部署与应用'" @click="preview()">
         预览
@@ -347,6 +348,10 @@
     }
     // console.log('dataFrom.value', dataFrom.value)
   })
+
+  const close = () => {
+    window.close()
+  }
   onBeforeUnmount(() => {
     mybus.off('chageDataFrom')
     mybus.off('chageFileList')
@@ -426,7 +431,7 @@
     .btn {
       display: flex;
       justify-content: space-between;
-      padding: 10px 400px 0;
+      padding: 10px 350px 0;
       button {
         cursor: pointer;
         width: 80px;
@@ -446,7 +451,7 @@
       }
     }
     .first {
-      justify-content: center;
+      justify-content: space-around;
     }
   }
 </style>
diff --git a/front/src/views/capacityOnTheShelf/BusinessComponent.vue b/front/src/views/capacityOnTheShelf/BusinessComponent.vue
index 015338ff..9d8a9617 100644
--- a/front/src/views/capacityOnTheShelf/BusinessComponent.vue
+++ b/front/src/views/capacityOnTheShelf/BusinessComponent.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-20 09:35:51
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-14 09:44:58
+ * @LastEditTime: 2022-07-15 17:39:35
  * @Description: 业务组件
 -->
 <template>
@@ -59,6 +59,7 @@
       ></put-on-the-shelf>
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
+      <button @click="close()">取消</button>
       <button v-show="showView !== '基本信息'" @click="back()">上一步</button>
       <button v-show="showView === '部署与使用'" @click="preview()">
         预览
@@ -195,6 +196,10 @@
     type: '组件服务',
     deptId: '',
   })
+
+  const close = () => {
+    window.close()
+  }
   getUser().then((res) => {
     dataFrom.value.deptId = res.data.data.deptId
   })
@@ -439,7 +444,7 @@
     .btn {
       display: flex;
       justify-content: space-between;
-      padding: 10px 400px 0;
+      padding: 10px 350px 0;
       button {
         cursor: pointer;
         width: 80px;
@@ -459,7 +464,7 @@
       }
     }
     .first {
-      justify-content: center;
+      justify-content: space-around;
     }
   }
 </style>
diff --git a/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue b/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
index 94bd7ee7..9203d616 100644
--- a/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
+++ b/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-20 09:35:17
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-14 09:45:07
+ * @LastEditTime: 2022-07-15 17:39:42
  * @Description: 开发组件
 -->
 <template>
@@ -27,6 +27,7 @@
         :refData="refData"
         :dataFrom="dataFrom"
         :videoList="videoList"
+        :imgList="imgList"
         :externalField="[
           '组件名称',
           '组件描述',
@@ -54,11 +55,11 @@
         :dataFrom="dataFrom"
         :fileList="fileList"
         :fileList2="fileList2"
-        :imgList="imgList"
         :configure="bs"
       ></put-on-the-shelf>
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
+      <button @click="close()">取消</button>
       <button v-show="showView !== '基本信息'" @click="back()">上一步</button>
       <button v-show="showView === '部署与使用'" @click="preview()">
         预览
@@ -195,6 +196,10 @@
     type: '组件服务',
     deptId: '',
   })
+
+  const close = () => {
+    window.close()
+  }
   getUser().then((res) => {
     dataFrom.value.deptId = res.data.data.deptId
   })
@@ -439,7 +444,7 @@
     .btn {
       display: flex;
       justify-content: space-between;
-      padding: 10px 400px 0;
+      padding: 10px 350px 0;
       button {
         cursor: pointer;
         width: 80px;
@@ -459,7 +464,7 @@
       }
     }
     .first {
-      justify-content: center;
+      justify-content: space-around;
     }
   }
 </style>
diff --git a/front/src/views/capacityOnTheShelf/LayerServices.vue b/front/src/views/capacityOnTheShelf/LayerServices.vue
index 03ffe283..0c58e0e2 100644
--- a/front/src/views/capacityOnTheShelf/LayerServices.vue
+++ b/front/src/views/capacityOnTheShelf/LayerServices.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-20 09:35:17
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-14 09:45:18
+ * @LastEditTime: 2022-07-15 17:39:47
  * @Description: 图层服务
 -->
 <template>
@@ -57,6 +57,7 @@
       ></put-on-the-shelf>
     </div>
     <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
+      <button @click="close()">取消</button>
       <button v-show="showView !== '基本信息'" @click="back()">上一步</button>
       <button v-show="showView === '部署与使用'" @click="preview()">
         预览
@@ -157,6 +158,10 @@
       }
     })
   }
+
+  const close = () => {
+    window.close()
+  }
   const next = () => {
     let i = -1
     navList.value.forEach((val, index) => {
@@ -387,7 +392,7 @@
     .btn {
       display: flex;
       justify-content: space-between;
-      padding: 10px 400px 0;
+      padding: 10px 350px 0;
       button {
         cursor: pointer;
         width: 80px;
@@ -407,7 +412,7 @@
       }
     }
     .first {
-      justify-content: center;
+      justify-content: space-around;
     }
   }
 </style>
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index ad83b8d1..99066335 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-17 14:11:08
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-15 16:56:49
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-18 11:23:39
  * @Description: 上架
 -->
 <template>
@@ -111,7 +111,9 @@
             ></upload>
           </div>
           <div class="submit">
-            <a-button type="primary" @click="add(title.name)">添加</a-button>
+            <a-button type="primary" @click="add(title.name)">
+              添加更多
+            </a-button>
           </div>
         </div>
       </template>
@@ -252,7 +254,7 @@
               </a-select-option>
             </a-select>
             <a-select
-              v-else-if="item.type == 'select'"
+              v-else-if="item.type == 'select' && item.name !== '归属部门'"
               style="width: 240px"
               v-model:value="item.note1"
               :placeholder="'请选择' + item.name"
@@ -598,56 +600,106 @@
   const mockData = ref([])
   const titles = ref(['未关联的应用名称', '已关联的应用名称'])
   const titleName = ref('关联应用')
+  const targetKeys = ref([])
+  // 上一步关联数据
+  const targetKeysBack = ref([])
 
   const sourceClick = () => {
+    mockData.value = []
     visibleAssociatedApplication.value = true
-    queryApplicationRelByResourceId({
-      referenceId: 0,
-    }).then((res) => {
-      // console.log(res.data.data.notLinked)
-      res.data.data.notLinked.forEach((val, index) => {
-        // console.log(val, index)
-        mockData.value.push({
-          key: val.id,
-          title: val.name,
-          description: val.id,
+    props.dataFrom.infoList.forEach((val) => {
+      if (val.attrType === '来源应用' && val.attrValue != '') {
+        queryApplicationRelByResourceId({
+          referenceId: 0,
+        }).then((res) => {
+          // console.log(res.data.data.notLinked)
+          res.data.data.notLinked.forEach((val, index) => {
+            mockData.value.push({
+              key: val.id,
+              title: val.name,
+              description: val.id,
+            })
+          })
         })
-      })
+        targetKeys.value = []
+        val.attrValue.split(',').forEach((item) => {
+          targetKeys.value.push(item)
+        })
+        console.log(targetKeys.value)
+        // console.log('wowowo')
+      } else if (val.attrType === '来源应用' && val.attrValue == '') {
+        queryApplicationRelByResourceId({
+          referenceId: 0,
+        }).then((res) => {
+          // console.log(res.data.data.notLinked)
+          res.data.data.notLinked.forEach((val, index) => {
+            mockData.value.push({
+              key: val.id,
+              title: val.name,
+              description: val.id,
+            })
+          })
+        })
+      }
     })
   }
   // 关联组件
   const componentsClick = () => {
     titles.value = ['未关联的组件名称', '已关联的组件名称']
     titleName.value = '关联组件'
-
+    mockData.value = []
     visibleAssociatedApplication.value = true
-    queryResourceRelByKeyId({
-      keyId: 0,
-      type: '组件服务',
-      referenceName: '',
-    }).then((res) => {
-      // console.log(res.data.data.notLinked)
-      res.data.data.notLinked.forEach((val, index) => {
-        // console.log(val, index)
-        mockData.value.push({
-          key: val.id,
-          title: val.name,
-          description: val.id,
+    props.dataFrom.infoList.forEach((val) => {
+      if (val.attrType === '关联组件信息' && val.attrValue != '') {
+        queryResourceRelByKeyId({
+          keyId: 0,
+          type: '组件服务',
+          referenceName: '',
+        }).then((res) => {
+          // console.log(res.data.data.notLinked)
+          res.data.data.notLinked.forEach((val, index) => {
+            mockData.value.push({
+              key: val.id,
+              title: val.name,
+              description: val.id,
+            })
+          })
         })
-      })
+        targetKeys.value = []
+        val.attrValue.split(',').forEach((item) => {
+          targetKeys.value.push(item)
+        })
+        console.log(targetKeys.value)
+        // console.log('wowowo')
+      } else if (val.attrType === '关联组件信息' && val.attrValue == '') {
+        queryResourceRelByKeyId({
+          keyId: 0,
+          type: '组件服务',
+          referenceName: '',
+        }).then((res) => {
+          // console.log(res.data.data.notLinked)
+          res.data.data.notLinked.forEach((val, index) => {
+            mockData.value.push({
+              key: val.id,
+              title: val.name,
+              description: val.id,
+            })
+          })
+        })
+      }
     })
   }
-  const targetKeys = ref([])
   const selectedKeys = ref([])
 
   const handleChange = (nextTargetKeys, direction, moveKeys) => {
     console.log('targetKeys: ', nextTargetKeys)
     console.log('direction: ', direction)
     console.log('moveKeys: ', moveKeys)
+    targetKeys.value = moveKeys.filter((item, index) => index === 0)
   }
 
   const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
-    console.log('targetSelectedKeys: ', targetSelectedKeys)
+    console.log('targetSelectedKeys: ', targetSelectedKeys, sourceSelectedKeys)
   }
 
   const handleOk = (e) => {
@@ -723,253 +775,259 @@
 </script>
 <style></style>
 <style lang="less" scoped>
-.put-on-the-shelf {
-  height: 680px;
-  overflow: scroll;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 50px 100px 25px;
-  .Technical-text {
-    height: 30px;
-    width: 100px;
-    border: 1px solid #bbd3ef;
-    border-radius: 6px;
-    background: #edf4fc;
-    color: #0087ff;
-    font-size: 14px;
-    text-align: center;
-    line-height: 30px;
-  }
-  .Technical-text:hover {
-    cursor: pointer;
-  }
-
-  & > div {
-    width: 100%;
-    margin-top: 60px;
-
-    .top {
-      color: #333333;
-      font-size: 22px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-bottom: 25px;
-
-      div:first-child,
-      div:last-child {
-        width: 245px;
-        height: 1px;
-        background: #f0f0f0;
-      }
-
-      div:nth-child(2) {
-        margin: 0 30px;
-      }
+  .put-on-the-shelf {
+    height: 680px;
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 50px 100px 25px;
+    .Technical-text {
+      height: 30px;
+      width: 100px;
+      border: 1px solid #bbd3ef;
+      border-radius: 6px;
+      background: #edf4fc;
+      color: #0087ff;
+      font-size: 14px;
+      text-align: center;
+      line-height: 30px;
+    }
+    .Technical-text:hover {
+      cursor: pointer;
     }
 
-    .bottom {
-      margin-top: 25px;
+    & > div {
+      width: 100%;
+      margin-top: 60px;
 
-      .items {
-        background: #fafafa;
-        padding: 10px;
+      .top {
+        color: #333333;
+        font-size: 22px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 25px;
 
-        p {
+        div:first-child,
+        div:last-child {
+          width: 245px;
+          height: 1px;
+          background: #f0f0f0;
+        }
+
+        div:nth-child(2) {
+          margin: 0 30px;
+        }
+      }
+
+      .bottom {
+        margin-top: 25px;
+
+        .items {
+          background: #fafafa;
+          padding: 10px;
+
+          p {
+            display: flex;
+            justify-content: space-between;
+
+            span:nth-of-type(1) {
+              width: 200px;
+            }
+
+            span:nth-of-type(2) {
+              width: 100%;
+              font-weight: 600;
+            }
+          }
+
+          p:nth-of-type(1) > span:nth-of-type(1) {
+            font-size: 18px;
+            font-weight: 600;
+          }
+
+          .del {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+
+            .delImg {
+              cursor: pointer;
+              display: inline-block;
+              width: 16px;
+              height: 18px;
+              background: url(~@/assets/home/sf_del.png) no-repeat;
+              margin-right: 5px;
+            }
+
+            div {
+              cursor: pointer;
+            }
+          }
+        }
+
+        .add {
+          margin-top: 10px;
+          font-size: 16px;
+          color: #007efb;
+        }
+
+        .form {
+          margin-top: 20px;
           display: flex;
-          justify-content: space-between;
+          justify-content: flex-start;
+          align-items: center;
 
-          span:nth-of-type(1) {
+          span:first-child {
+            width: 120px;
+          }
+
+          :deep(.ant-input-textarea) {
+            width: 520px;
+          }
+
+          :deep(.ant-radio-group) {
+            width: 520px;
+          }
+
+          :deep(.ant-input-number) {
             width: 200px;
           }
 
-          span:nth-of-type(2) {
-            width: 100%;
-            font-weight: 600;
+          :deep(.ant-input) {
+            resize: none;
+            width: 520px;
+          }
+
+          .ant-btn {
+            width: 160px;
+            height: 32px;
+            text-align: center;
+            background: #edf4fc;
+            color: #0087ff;
+            border: 1px solid #bbd3ef;
+            border-radius: 6px;
           }
         }
 
-        p:nth-of-type(1) > span:nth-of-type(1) {
-          font-size: 18px;
-          font-weight: 600;
-        }
-
-        .del {
+        .submit {
+          margin-top: 40px;
           display: flex;
           justify-content: flex-end;
-          align-items: center;
 
-          .delImg {
-            cursor: pointer;
-            display: inline-block;
-            width: 16px;
-            height: 18px;
-            background: url(~@/assets/home/sf_del.png) no-repeat;
-            margin-right: 5px;
+          .ant-btn {
+            width: 80px;
+            height: 28px;
+            text-align: center;
+            background: #d9ebff;
+            color: #0087ff;
+            border: 1px solid #0087ff;
+            border-radius: 6px;
           }
-
-          div {
-            cursor: pointer;
-          }
-        }
-      }
-
-      .add {
-        margin-top: 10px;
-        font-size: 16px;
-        color: #007efb;
-      }
-
-      .form {
-        margin-top: 20px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-
-        span:first-child {
-          width: 120px;
-        }
-
-        :deep(.ant-input-textarea) {
-          width: 520px;
-        }
-
-        :deep(.ant-radio-group) {
-          width: 520px;
-        }
-
-        :deep(.ant-input-number) {
-          width: 200px;
-        }
-
-        :deep(.ant-input) {
-          resize: none;
-          width: 520px;
-        }
-
-        .ant-btn {
-          width: 160px;
-          height: 32px;
-          text-align: center;
-          background: #edf4fc;
-          color: #0087ff;
-          border: 1px solid #bbd3ef;
-          border-radius: 6px;
-        }
-      }
-
-      .submit {
-        margin-top: 40px;
-        display: flex;
-        justify-content: flex-end;
-
-        .ant-btn {
-          width: 80px;
-          height: 28px;
-          text-align: center;
-          background: #d9ebff;
-          color: #0087ff;
-          border: 1px solid #0087ff;
-          border-radius: 6px;
         }
       }
     }
+
+    & > div:nth-of-type(1) {
+      margin-top: 0;
+    }
   }
 
-  & > div:nth-of-type(1) {
-    margin-top: 0;
+  .application-Area {
+    width: 520px;
+    display: grid;
+    margin-top: -5px;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+
+    .application-Area-son {
+      cursor: pointer;
+      font-size: 14px;
+      width: 90px;
+      height: 26px;
+      border-radius: 13px;
+      color: #333333;
+      background: #f5f5f5;
+      border: 1px #cccccc solid;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 10px;
+      font-weight: 500;
+    }
+
+    .application-Area-down {
+      background: #0087ff;
+      color: #fff;
+    }
   }
-}
 
-.application-Area {
-  width: 520px;
-  display: grid;
-  margin-top: -5px;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  :deep(.ant-image-img) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
 
-  .application-Area-son {
-    cursor: pointer;
-    font-size: 14px;
-    width: 90px;
-    height: 26px;
-    border-radius: 13px;
-    color: #333333;
-    background: #f5f5f5;
-    border: 1px #cccccc solid;
+  :deep(.ant-modal) {
+    width: 960px;
+  }
+
+  :deep(.ant-transfer-list) {
+    width: 39.5%;
+    height: 520px;
+  }
+
+  :deep(.ant-transfer-operation) {
+    flex-direction: row-reverse;
+    margin: 0 30px;
+  }
+
+  :deep(.ant-btn) {
+    width: 56px;
+    height: 40px;
+    border-radius: 4px;
+  }
+
+  :deep(.ant-btn:first-child) {
+    margin-left: 4px;
+  }
+
+  :deep(.ant-modal-footer) {
+    border: 0;
+  }
+
+  :deep(.ant-modal-header) {
+    border: 0;
+  }
+
+  :deep(.ant-modal-title) {
+    line-height: 24px;
+    font-size: 18px;
+    color: #303133;
+  }
+
+  :deep(.ant-transfer-list-header) {
+    background: #f5f7fa;
+  }
+
+  :deep(.ant-transfer-list-header-selected) {
     display: flex;
-    justify-content: center;
+    width: 90%;
+    flex-direction: row-reverse;
+    justify-content: space-between;
     align-items: center;
-    margin-top: 10px;
-    font-weight: 500;
   }
 
-  .application-Area-down {
-    background: #0087ff;
-    color: #fff;
+  :deep(.ant-transfer-list-header-title) {
+    font-size: 16px;
+    color: #303133;
+    font-weight: 400;
+    text-align: left;
+  }
+  :deep(.ant-transfer-list-header .ant-checkbox-wrapper) {
+    display: none !important;
+  }
+  :deep(.ant-upload-list-item-name) {
+    width: 100px;
   }
-}
-
-:deep(.ant-image-img) {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-:deep(.ant-modal) {
-  width: 960px;
-}
-
-:deep(.ant-transfer-list) {
-  width: 39.5%;
-  height: 520px;
-}
-
-:deep(.ant-transfer-operation) {
-  flex-direction: row-reverse;
-  margin: 0 30px;
-}
-
-:deep(.ant-btn) {
-  width: 56px;
-  height: 40px;
-  border-radius: 4px;
-}
-
-:deep(.ant-btn:first-child) {
-  margin-left: 4px;
-}
-
-:deep(.ant-modal-footer) {
-  border: 0;
-}
-
-:deep(.ant-modal-header) {
-  border: 0;
-}
-
-:deep(.ant-modal-title) {
-  line-height: 24px;
-  font-size: 18px;
-  color: #303133;
-}
-
-:deep(.ant-transfer-list-header) {
-  background: #f5f7fa;
-}
-
-:deep(.ant-transfer-list-header-selected) {
-  display: flex;
-  width: 90%;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  align-items: center;
-}
-
-:deep(.ant-transfer-list-header-title) {
-  font-size: 16px;
-  color: #303133;
-  font-weight: 400;
-  text-align: left;
-}
 </style>
diff --git a/front/src/views/demandCenter/index.vue b/front/src/views/demandCenter/index.vue
index 2416925c..3b519187 100644
--- a/front/src/views/demandCenter/index.vue
+++ b/front/src/views/demandCenter/index.vue
@@ -17,7 +17,7 @@
         </a-layout-sider>
       </div>
       <div class="right">
-        <div class="title">数据需求</div>
+        <!-- <div class="title">数据需求</div> -->
         <a-list
           class="demo-loadmore-list"
           :loading="initLoading"
@@ -87,6 +87,7 @@
   const pageSize = ref(8)
   const total = ref()
   const showKey = ref(0)
+  const whoShow1 = ref(whoShow)
   const menuList = [
     {
       key: '1',
diff --git a/front/src/views/detailsAll/AlgorithmDetails.vue b/front/src/views/detailsAll/AlgorithmDetails.vue
index bb7a9b71..8d803656 100644
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@@ -10,159 +10,195 @@
     <!-- 头部基本信息 -->
     <algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
     <!-- 导航 -->
-    <algorithm-navigation :dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow">
-    </algorithm-navigation>
+    <algorithm-navigation
+      :dataList="dataList.data"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></algorithm-navigation>
     <!-- 关联能力 -->
-    <algorithm-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
-      id="algorithm-associated-ability" class="scrollBox"></algorithm-associated-ability>
+    <algorithm-associated-ability
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
+      id="algorithm-associated-ability"
+      class="scrollBox"
+    ></algorithm-associated-ability>
     <!-- 算法展示  视频 -->
-    <algorithm-display :dataList="dataList.data" id="algorithm-display" class="scrollBox"></algorithm-display>
+    <algorithm-display
+      :dataList="dataList.data"
+      id="algorithm-display"
+      class="scrollBox"
+    ></algorithm-display>
     <!-- 算法优势 -->
-    <algorithm-advantage :dataList="dataList.data" id="algorithm-advantage" class="scrollBox"></algorithm-advantage>
+    <algorithm-advantage
+      :dataList="dataList.data"
+      id="algorithm-advantage"
+      class="scrollBox"
+    ></algorithm-advantage>
     <!-- 应用场景和应用案例 -->
     <!-- <application-scenarios-and-case
       id="application-scenarios-and-case"
       class="scrollBox"
     ></application-scenarios-and-case> -->
-    <algorithm-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
-    </algorithm-application-scenarios>
-    <algorithm-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
-    </algorithm-application-case>
+    <algorithm-application-scenarios
+      :dataList="dataList.data"
+      id="application-scenarios"
+      class="scrollBox"
+    ></algorithm-application-scenarios>
+    <algorithm-application-case
+      :dataList="dataList.data"
+      id="application-case"
+      class="scrollBox"
+    ></algorithm-application-case>
     <!-- 算法试用 -->
-    <algorithm-on-trial :dataList="dataList.data" id="algorithm-on-trial" class="scrollBox"></algorithm-on-trial>
+    <algorithm-on-trial
+      :dataList="dataList.data"
+      id="algorithm-on-trial"
+      class="scrollBox"
+    ></algorithm-on-trial>
     <!-- 计费标准 -->
-    <algorithm-charging-standard :dataList="dataList.data" id="charging-standard" class="scrollBox">
-    </algorithm-charging-standard>
+    <algorithm-charging-standard
+      :dataList="dataList.data"
+      id="charging-standard"
+      class="scrollBox"
+    ></algorithm-charging-standard>
     <!-- 使用方式 -->
-    <algorithm-usage-mode :dataList="dataList.data" id="usage-mode" class="scrollBox"></algorithm-usage-mode>
+    <algorithm-usage-mode
+      :dataList="dataList.data"
+      id="usage-mode"
+      class="scrollBox"
+    ></algorithm-usage-mode>
     <!-- 常见问题-->
-    <algorithm-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
-    </algorithm-common-problem>
+    <algorithm-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></algorithm-common-problem>
   </div>
 </template>
 <script setup>
-import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
-import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
-import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
-import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
-import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
-import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
-import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
-import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
-import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
-import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
-import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId2,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const loading = ref(true)
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
+  import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
+  import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
+  import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
+  import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
+  import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
+  import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
+  import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
+  import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
+  import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
+  import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId2,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const loading = ref(true)
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
   })
-})
 
-const init = (id) => {
-  console.log(id, '-------------------------------------------------')
-  if (id) {
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      console.log('初始化详情页=========================>', dataList.data)
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      if (arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
+  const init = (id) => {
+    console.log(id, '-------------------------------------------------')
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
         }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
+          console.log('浏览记录+1')
         })
-      }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
       })
-    })
-    associatedComponents.value.map((item, index) => {
-      let queryPartAppByKeyIdParams = {
-        keyId: id,
-      }
-      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-        associatedComponents.value[index].dataList = res.data.data
-        loading.value = false
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+          loading.value = false
+        })
       })
-    })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-init(id)
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 50%;
+    margin-left: -9.56rem;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
index 7eee09d3..e7b95446 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -1,179 +1,219 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:32:22
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-30 10:22:31
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-18 13:55:03
  * @Description: 应用详情页
 -->
 <template>
   <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
     <!-- 头部基本信息 -->
-    <application-top-details :dataList="dataList.data"></application-top-details>
+    <application-top-details
+      :dataList="dataList.data"
+    ></application-top-details>
     <!-- 导航 -->
-    <application-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
-      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></application-navigation>
+    <application-navigation
+      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></application-navigation>
     <!-- 关联能力 -->
-    <application-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
-      id="application-associated-ability" class="scrollBox"></application-associated-ability>
+    <application-associated-ability
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
+      id="application-associated-ability"
+      class="scrollBox"
+    ></application-associated-ability>
     <!-- 应用展示  视频 -->
-    <application-presentation :dataList="dataList.data" id="application-presentation" class="scrollBox">
-    </application-presentation>
+    <application-presentation
+      :dataList="dataList.data"
+      id="application-presentation"
+      class="scrollBox"
+    ></application-presentation>
     <!-- 关联组件 -->
-    <application-associated-components :dataList="dataList.data" id="application-associated-components"
-      class="scrollBox" v-if="false"></application-associated-components>
+    <application-associated-components
+      :dataList="dataList.data"
+      id="application-associated-components"
+      class="scrollBox"
+      v-if="false"
+    ></application-associated-components>
 
     <!-- 功能介绍-->
-    <application-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
-    </application-function-intorduction>
+    <application-function-intorduction
+      :dataList="dataList.data"
+      id="function-introduction"
+      class="scrollBox"
+    ></application-function-intorduction>
+    <!--应用详情-->
+    <application-ability-trial
+      :dataList="dataList.data"
+      id="application-ability-trial"
+      class="scrollBox"
+    ></application-ability-trial>
     <!-- 使用能力 -->
-    <application-ability-toise :dataList="dataList.data" id="ability-to-use" class="scrollBox">
-    </application-ability-toise>
+    <application-ability-toise
+      :dataList="dataList.data"
+      id="ability-to-use"
+      class="scrollBox"
+    ></application-ability-toise>
     <!-- 部署与安全-->
-    <application-deployment-and-security :dataList="dataList.data" id="deployment-and-security" class="scrollBox">
-    </application-deployment-and-security>
+    <application-deployment-and-security
+      :dataList="dataList.data"
+      id="deployment-and-security"
+      class="scrollBox"
+    ></application-deployment-and-security>
     <!-- 归属部门与服务商-->
-    <application-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
-      class="scrollBox"></application-owning-department-and-service-provider>
+    <application-owning-department-and-service-provider
+      :dataList="dataList.data"
+      id="department-and-service-provider"
+      class="scrollBox"
+    ></application-owning-department-and-service-provider>
     <!-- 常见问题-->
-    <application-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
-    </application-common-problem>
+    <application-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></application-common-problem>
   </div>
 </template>
 <script setup>
-import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
-import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
-import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
-import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
-import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
-import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
-import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
-import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
-import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
-import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
-let loading = ref(true)
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop-50)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
+  import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
+  import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
+  import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
+  import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
+  import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
+  import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
+  import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
+  import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
+  import ApplicationAbilityTrial from '@/views/detailsAll/components/Application/ApplicationAbilityTrial.vue'
+  import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
+  let loading = ref(true)
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop-50)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
   })
-})
 
-const init = (id) => {
-  if (id) {
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      console.log(
-        '初始化详情页=========================>',
-        dataList.data,
-        arrList.value
-      )
-      if (arrList.value && arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
+  const init = (id) => {
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        console.log(
+          '初始化详情页=========================>',
+          dataList.data,
+          arrList.value
+        )
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
         }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
+          console.log('浏览记录+1')
         })
-      }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
       })
-    })
-    associatedComponents.value.map((item, index) => {
-      let queryPartAppByKeyIdParams = {
-        keyId: id,
-        type: item.type,
-      }
-      queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
-        associatedComponents.value[0].dataList = res.data.data
-        loading.value = false
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[0].dataList = res.data.data
+          loading.value = false
+        })
       })
-    })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-const associatedComponentsFunction = () => {
-  if (
-    associatedComponents.value[0].dataList.length > 0 ||
-    associatedComponents.value[1].dataList.length > 0 ||
-    associatedComponents.value[2].dataList.length > 0
-  ) {
-    return associatedComponents.value
+  const associatedComponentsFunction = () => {
+    if (
+      associatedComponents.value[0].dataList.length > 0 ||
+      associatedComponents.value[1].dataList.length > 0 ||
+      associatedComponents.value[2].dataList.length > 0
+    ) {
+      return associatedComponents.value
+    }
   }
-}
-init(id)
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: sticky;
+    z-index: 2000;
+    top: 0;
+    left: 50%;
+    margin-left: -9.56rem;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/BusinessDetails.vue b/front/src/views/detailsAll/BusinessDetails.vue
index cb14bfd2..51e60e98 100644
--- a/front/src/views/detailsAll/BusinessDetails.vue
+++ b/front/src/views/detailsAll/BusinessDetails.vue
@@ -10,149 +10,178 @@
     <!-- 头部基本信息 -->
     <business-top-details :dataList="dataList.data"></business-top-details>
     <!-- 导航 -->
-    <business-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
-      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></business-navigation>
+    <business-navigation
+      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></business-navigation>
     <!-- 关联能力 -->
-    <business-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
-      id="business-associated-ability" class="scrollBox"></business-associated-ability>
+    <business-associated-ability
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
+      id="business-associated-ability"
+      class="scrollBox"
+    ></business-associated-ability>
     <!-- 组件展示 -->
-    <business-presentation :dataList="dataList.data" id="business-presentation" class="scrollBox">
-    </business-presentation>
+    <business-presentation
+      :dataList="dataList.data"
+      id="business-presentation"
+      class="scrollBox"
+    ></business-presentation>
     <!-- 功能介绍-->
-    <business-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
-    </business-function-intorduction>
+    <business-function-intorduction
+      :dataList="dataList.data"
+      id="function-introduction"
+      class="scrollBox"
+    ></business-function-intorduction>
     <!-- 应用场景 -->
-    <business-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
-    </business-application-scenarios>
+    <business-application-scenarios
+      :dataList="dataList.data"
+      id="application-scenarios"
+      class="scrollBox"
+    ></business-application-scenarios>
     <!-- 应用案例 -->
-    <business-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
-    </business-application-case>
+    <business-application-case
+      :dataList="dataList.data"
+      id="application-case"
+      class="scrollBox"
+    ></business-application-case>
     <!-- 使用方式 -->
-    <business-usage-mode :dataList="dataList.data" id="business-usage-mode" class="scrollBox"></business-usage-mode>
+    <business-usage-mode
+      :dataList="dataList.data"
+      id="business-usage-mode"
+      class="scrollBox"
+    ></business-usage-mode>
     <!-- 常见问题-->
-    <business-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox"></business-common-problem>
+    <business-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></business-common-problem>
   </div>
 </template>
 <script setup>
-import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
-import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
-import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
-import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
-import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
-import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
-import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
-import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
-import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId2,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-let loading = ref(true)
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
+  import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
+  import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
+  import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
+  import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
+  import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
+  import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
+  import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
+  import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId2,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  let loading = ref(true)
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
   })
-})
 
-const init = (id) => {
-  if (id) {
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      console.log('初始化详情页=========================>', dataList.data)
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      if (arrList.value && arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
+  const init = (id) => {
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
         }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
+          console.log('浏览记录+1')
         })
-      }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
       })
-    })
-    associatedComponents.value.map((item, index) => {
-      let queryPartAppByKeyIdParams = {
-        keyId: id,
-      }
-      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-        associatedComponents.value[index].dataList = res.data.data
-        loading.value = false
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+          loading.value = false
+        })
       })
-    })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-init(id)
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 50%;
+    margin-left: -9.56rem;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/DeveloperComponents.vue b/front/src/views/detailsAll/DeveloperComponents.vue
index be9c7f40..6b0fef8e 100644
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@@ -10,157 +10,188 @@
     <!-- 头部基本信息 -->
     <developer-top-details :dataList="dataList.data"></developer-top-details>
     <!-- 导航 -->
-    <developer-navigation :dataList="dataList.data" :associatedComponents="associatedComponentsFunction()"
-      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></developer-navigation>
+    <developer-navigation
+      :dataList="dataList.data"
+      :associatedComponents="associatedComponentsFunction()"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></developer-navigation>
     <!-- 关联能力 -->
-    <developer-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
-      id="developer-associated-ability" class="scrollBox"></developer-associated-ability>
+    <developer-associated-ability
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
+      id="developer-associated-ability"
+      class="scrollBox"
+    ></developer-associated-ability>
     <!-- 组件展示  视频 -->
-    <Developer-presentation :dataList="dataList.data" id="eveloper-presentation" class="scrollBox">
-    </Developer-presentation>
+    <Developer-presentation
+      :dataList="dataList.data"
+      id="eveloper-presentation"
+      class="scrollBox"
+    ></Developer-presentation>
     <!-- 功能介绍-->
-    <developer-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
-    </developer-function-intorduction>
+    <developer-function-intorduction
+      :dataList="dataList.data"
+      id="function-introduction"
+      class="scrollBox"
+    ></developer-function-intorduction>
     <!-- 应用场景 -->
-    <developer-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
-    </developer-application-scenarios>
+    <developer-application-scenarios
+      :dataList="dataList.data"
+      id="application-scenarios"
+      class="scrollBox"
+    ></developer-application-scenarios>
     <!-- 应用案例 -->
-    <developer-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
-    </developer-application-case>
+    <developer-application-case
+      :dataList="dataList.data"
+      id="application-case"
+      class="scrollBox"
+    ></developer-application-case>
     <!-- 组件试用 -->
-    <developer-trial :dataList="dataList.data" id="developer-trial" class="scrollBox"></developer-trial>
+    <developer-trial
+      :dataList="dataList.data"
+      id="developer-trial"
+      class="scrollBox"
+    ></developer-trial>
     <!-- 归属部门与服务商-->
-    <developer-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
-      class="scrollBox"></developer-owning-department-and-service-provider>
+    <developer-owning-department-and-service-provider
+      :dataList="dataList.data"
+      id="department-and-service-provider"
+      class="scrollBox"
+    ></developer-owning-department-and-service-provider>
     <!-- 常见问题-->
-    <developer-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
-    </developer-common-problem>
+    <developer-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></developer-common-problem>
   </div>
 </template>
 <script setup>
-import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
-import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
-import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
-import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
-import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
-import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
-import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
-import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
-import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
-import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId2,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-let loading = ref(true)
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
+  import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
+  import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
+  import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
+  import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
+  import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
+  import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
+  import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
+  import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
+  import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId2,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  let loading = ref(true)
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
   })
-})
-const init = (id) => {
-  if (id) {
-    let queryPartAppByKeyIdParams = {
-      keyId: id,
-    }
-    queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-      associatedComponents.value[0].dataList = res.data.data
-      loading.value = false
-    })
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      console.log('初始化详情页=========================>', dataList.data)
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      if (arrList.value && arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
-        }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
-        })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
       }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
-      })
     })
-    associatedComponents.value.map((item, index) => { })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+  })
+  const init = (id) => {
+    if (id) {
+      let queryPartAppByKeyIdParams = {
+        keyId: id,
+      }
+      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+        associatedComponents.value[0].dataList = res.data.data
+        loading.value = false
+      })
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
+        }).then(() => {
+          console.log('浏览记录+1')
+        })
+      })
+      associatedComponents.value.map((item, index) => {})
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-init(id)
-const associatedComponentsFunction = () => {
-  if (associatedComponents.value[0].dataList.length > 0) {
-    return associatedComponents.value
+  init(id)
+  const associatedComponentsFunction = () => {
+    if (associatedComponents.value[0].dataList.length > 0) {
+      return associatedComponents.value
+    }
   }
-}
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 50%;
+    margin-left: -9.56rem;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/LayerService.vue b/front/src/views/detailsAll/LayerService.vue
index 6228798c..2a0f6708 100644
--- a/front/src/views/detailsAll/LayerService.vue
+++ b/front/src/views/detailsAll/LayerService.vue
@@ -8,156 +8,189 @@
 <template>
   <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
     <!-- 头部基本信息 -->
-    <layer-service-top-details :dataList="dataList.data"></layer-service-top-details>
+    <layer-service-top-details
+      :dataList="dataList.data"
+    ></layer-service-top-details>
     <!-- 导航 -->
-    <layer-service-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
-      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></layer-service-navigation>
+    <layer-service-navigation
+      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></layer-service-navigation>
     <!-- 关联能力 -->
-    <layer-service-associated-ability :associatedComponents="associatedComponents" id="layer-service-associated-ability"
-      class="scrollBox" v-if="!loading"></layer-service-associated-ability>
+    <layer-service-associated-ability
+      :associatedComponents="associatedComponents"
+      id="layer-service-associated-ability"
+      class="scrollBox"
+      v-if="!loading"
+    ></layer-service-associated-ability>
     <!-- 图层展示  视频 -->
-    <layer-service-presentation :dataList="dataList.data" id="service-presentation" class="scrollBox">
-    </layer-service-presentation>
+    <layer-service-presentation
+      :dataList="dataList.data"
+      id="service-presentation"
+      class="scrollBox"
+    ></layer-service-presentation>
     <!-- 图层信息-->
-    <layer-service-information :dataList="dataList.data" id="service-information" class="scrollBox">
-    </layer-service-information>
+    <layer-service-information
+      :dataList="dataList.data"
+      id="service-information"
+      class="scrollBox"
+    ></layer-service-information>
     <!-- 应用场景 -->
-    <layer-service-application-scenarios :dataList="dataList.data" id="service-application-scenarios" class="scrollBox">
-    </layer-service-application-scenarios>
+    <layer-service-application-scenarios
+      :dataList="dataList.data"
+      id="service-application-scenarios"
+      class="scrollBox"
+    ></layer-service-application-scenarios>
     <!-- 应用案例 -->
-    <layer-service-application-case :dataList="dataList.data" id="service-application-case" class="scrollBox">
-    </layer-service-application-case>
+    <layer-service-application-case
+      :dataList="dataList.data"
+      id="service-application-case"
+      class="scrollBox"
+    ></layer-service-application-case>
     <!-- 图层预览 -->
-    <layer-service-preview :dataList="dataList.data" id="service-preview" class="scrollBox"></layer-service-preview>
+    <layer-service-preview
+      :dataList="dataList.data"
+      id="service-preview"
+      class="scrollBox"
+    ></layer-service-preview>
     <!-- 使用方式-->
-    <layer-service-usage-mode :dataList="dataList.data" id="service-usage-mode" class="scrollBox">
-    </layer-service-usage-mode>
+    <layer-service-usage-mode
+      :dataList="dataList.data"
+      id="service-usage-mode"
+      class="scrollBox"
+    ></layer-service-usage-mode>
     <!-- 常见问题-->
-    <layer-service-common-problem :dataList="dataList.data" id="service-common-problem" class="scrollBox">
-    </layer-service-common-problem>
+    <layer-service-common-problem
+      :dataList="dataList.data"
+      id="service-common-problem"
+      class="scrollBox"
+    ></layer-service-common-problem>
   </div>
 </template>
 <script setup>
-import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
-import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
-import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
-import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
-import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
-import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
-import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
-import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
-import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
-import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId2,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
-let loading = ref(true)
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
+  import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
+  import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
+  import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
+  import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
+  import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
+  import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
+  import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
+  import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
+  import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId2,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
+  let loading = ref(true)
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
   })
-})
 
-const init = (id) => {
-  if (id) {
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      console.log('初始化详情页=========================>', dataList.data)
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      if (arrList.value && arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
+  const init = (id) => {
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        console.log('初始化详情页=========================>', dataList.data)
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
         }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
+          console.log('浏览记录+1')
         })
-      }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
       })
-    })
-    associatedComponents.value.map((item, index) => {
-      let queryPartAppByKeyIdParams = {
-        keyId: id,
-      }
-      queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-        associatedComponents.value[index].dataList = res.data.data
-        loading.value = false
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+          loading.value = false
+        })
       })
-    })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-init(id)
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 50%;
+    margin-left: -9.56rem;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
index fea7e325..7c1de008 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
@@ -126,10 +126,12 @@
       'props.dataList.infoList==============>',
       navList.value.filter((item) => item.name === list.value[0])
     )
-    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
-      select.value = navList.value.filter(
-        (item) => (item.name === '关联应用') | (item.name === list.value[0])
-      )[0].key
+    if (list.value.length > 0) {
+      if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+        select.value = navList.value.filter(
+          (item) => (item.name === '关联应用') | (item.name === list.value[0])
+        )[0].key
+      }
     }
     console.log('11111111111111111111111111', list.value, navList.value)
   }
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue b/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue
new file mode 100644
index 00000000..808695b8
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue
@@ -0,0 +1,179 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-09 09:29:29
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-13 15:21:26
+ * @Description: 应用详情
+-->
+<template>
+  <div class="algorithm-on-trial" v-if="flag">
+    <detals-title title="应用详情" type="PROBATION"></detals-title>
+    <div class="main">
+      <div class="main-left">
+        <p>{{ dataFrom.linkName }}</p>
+        <p style="cursor: pointer" @click="clickLink(dataFrom.link)">
+          {{ dataFrom.link }}
+        </p>
+      </div>
+      <div class="main-center">
+        <p>{{ dataFrom.numberName }}</p>
+        <p>{{ dataFrom.number }}</p>
+        <div @click="copyFunction(dataFrom.number, '复制账号')">复制账号</div>
+      </div>
+      <div class="main-right">
+        <p>{{ dataFrom.passwordName }}</p>
+        <p>{{ dataFrom.password }}</p>
+        <div @click="copyFunction(dataFrom.password2, '复制密码')">
+          复制密码
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  import { ref, defineProps, watch } from 'vue'
+  import { message } from 'ant-design-vue'
+  let flag = ref(true)
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const dataFrom = ref({
+    linkName: '访问地址',
+    link: 'http://localhost:8080/#/detailsfdddffffffffffffffdfgdfgdfdgdfgdfg',
+    numberName: '试用账号',
+    number: 'zhangfeihu',
+    passwordName: '试用密码',
+    password: '**************************',
+    password2: '',
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.applyState
+    if (obj !== '已申请') {
+      flag.value = false
+    } else {
+      props.dataList.infoList.map((item) => {
+        if (item.attrType == '访问地址') {
+          dataFrom.value.link = item.attrValue
+        } else if (item.attrType == '试用用户名') {
+          dataFrom.value.number = item.attrValue
+        } else if (item.attrType == '试用密码') {
+          dataFrom.value.password2 = item.attrValue
+        }
+      })
+    }
+  }
+  const clickLink = (link) => {
+    window.open(link)
+  }
+  //复制方法
+  const copyFunction = (data, name) => {
+    let url = data
+    let oInput = document.createElement('input')
+    oInput.value = url
+    document.body.appendChild(oInput)
+    oInput.select() // 选择对象;
+    console.log(oInput.value)
+    document.execCommand('Copy') // 执行浏览器复制命令
+    oInput.remove() // 执行浏览器复制命令
+    message.success(name + '成功')
+  }
+  message.config({
+    top: '100px', // 距离顶部的位置
+  })
+  // const success = () => {
+  //   message.success({
+  //     // content: 'This is a prompt message with custom className and style',
+  //     className: 'custom-class',
+  //     style: {},
+  //   })
+  // }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = props.dataList.applyState
+        if (obj !== '已申请') {
+          flag.value = false
+        } else {
+          props.dataList.infoList.map((item) => {
+            if (item.attrType == '访问地址') {
+              dataFrom.value.link = item.attrValue
+            } else if (item.attrType == '试用用户名') {
+              dataFrom.value.number = item.attrValue
+            } else if (item.attrType == '试用密码') {
+              dataFrom.value.password2 = item.attrValue
+            }
+          })
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .algorithm-on-trial {
+    padding: 0.8rem 0px 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .main {
+      margin-top: 0.3rem;
+      width: 13rem;
+      height: 2.5rem;
+      background: url('~@/assets/detailsAll/kfzj_sybg.png') no-repeat;
+      display: grid;
+      grid-template-columns: 33.33% 33.33% 33.33%;
+      align-items: center;
+      .main-left {
+        border-right: 0.01rem #ffffff solid;
+        padding-left: 0.7rem;
+        padding-right: 1rem;
+        & > p {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .main-center {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      .main-right {
+        padding-right: 0.7rem;
+      }
+      & > div > p:first-child {
+        font-size: 0.26rem;
+        color: #ffffff;
+        font-weight: bold;
+      }
+      & > div > p:nth-child(2) {
+        font-size: 0.22rem;
+        color: #ffffff;
+        line-height: 0.34rem;
+      }
+      & > div:first-child > p:last-child {
+        text-decoration: underline;
+        word-wrap: break-word;
+        word-break: normal;
+      }
+      & > div > div:last-child {
+        height: 0.34rem;
+        width: 1.1rem;
+        border: 0.01rem solid #ffffff;
+        border-radius: 0.06rem;
+        font-size: 0.18rem;
+        color: #ffffff;
+        cursor: pointer;
+        text-align: center;
+        line-height: 0.34rem;
+      }
+    }
+  }
+</style>
+<style>
+  .custom-class {
+    /* top: 100px; */
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
index 156f9d16..51dee4f2 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
@@ -75,13 +75,14 @@
           attrValue: '是',
         }
         dataFrom.value.content[1].childrenContent.push(isAndNo)
-      } else if (item.attrType === '访问地址') {
-        let obj = {
-          attrType: '访问地址',
-          attrValue: item.attrValue || '------',
-        }
-        dataFrom.value.content[0].childrenContent.push(obj)
       }
+      // } else if (item.attrType === '访问地址') {
+      //   let obj = {
+      //     attrType: '访问地址',
+      //     attrValue: item.attrValue || '------',
+      //   }
+      //   dataFrom.value.content[0].childrenContent.push(obj)
+      // }
     })
     if (dataFrom.value.content[1].childrenContent.length <= 0) {
       let data = [
@@ -99,12 +100,12 @@
       })
     }
   }
-  //访问地址跳转方法
-  const addressFunction = (name, itemValue) => {
-    if (name == '访问地址') {
-      window.open(itemValue)
-    }
-  }
+  // //访问地址跳转方法
+  // const addressFunction = (name, itemValue) => {
+  //   if (name == '访问地址') {
+  //     window.open(itemValue)
+  //   }
+  // }
   watch(
     () => props.dataList,
     (val) => {
@@ -125,13 +126,14 @@
               attrValue: '是',
             }
             dataFrom.value.content[1].childrenContent.push(isAndNo)
-          } else if (item.attrType === '访问地址') {
-            let obj = {
-              attrType: '访问地址',
-              attrValue: item.attrValue || '------',
-            }
-            dataFrom.value.content[0].childrenContent.push(obj)
           }
+          // } else if (item.attrType === '访问地址') {
+          //   let obj = {
+          //     attrType: '访问地址',
+          //     attrValue: item.attrValue || '------',
+          //   }
+          //   dataFrom.value.content[0].childrenContent.push(obj)
+          // }
         })
         if (dataFrom.value.content[1].childrenContent.length <= 0) {
           debugger
@@ -149,11 +151,6 @@
             dataFrom.value.content[1].childrenContent.push(itemContent)
           })
         }
-        let obj = {
-          attrType: '访问地址',
-          attrValue: props.dataList.link || '------',
-        }
-        dataFrom.value.content[0].childrenContent.push(obj)
       }
     }
   )
diff --git a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
index feff2a35..612773a1 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@@ -41,6 +41,10 @@
       name: '使用能力',
       key: 'ability-to-use',
     },
+    {
+      name: '应用详情',
+      key: 'application-ability-trial',
+    },
     {
       name: '部署与安全',
       key: 'deployment-and-security',
@@ -96,6 +100,11 @@
         list.value.push(item.attrType)
       } else if (item.attrType === '应用展示视频') {
         list.value.push('应用展示')
+      } else if (
+        item.attrType === '访问地址' &&
+        props.dataList.applyState === '已申请'
+      ) {
+        list.value.push('应用详情')
       }
     })
     list.value.unshift('关联组件')
@@ -137,6 +146,11 @@
             list.value.push(item.attrType)
           } else if (item.attrType === '应用展示视频') {
             list.value.push('应用展示')
+          } else if (
+            item.attrType === '访问地址' &&
+            props.dataList.applyState === '已申请'
+          ) {
+            list.value.push('应用详情')
           }
         })
         list.value.unshift('关联组件')
diff --git a/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue b/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
index 52aaac54..d5a97180 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
@@ -2,16 +2,41 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 15:25:33
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 11:30:52
+ * @LastEditTime: 2022-07-16 16:58:16
  * @Description: 应用展示  视频播放
 -->
 <template>
   <div class="application-presentation" v-if="flag">
     <detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title>
-    <div class="main" :style="`${img}background-position:center;background-size:cover;`">
-      <div class="play" @click="showModal"></div>
+    <div class="box">
+      <div class="left" @click="chagneShow()"></div>
+      <div
+        class="main"
+        :style="`${img}background-position:center;background-size:cover;`"
+        v-if="
+          showArr.length > 0 && showArr[showFlag].attrType == '应用展示视频'
+        "
+      >
+        <div class="play" @click="showModal"></div>
+      </div>
+      <div
+        class="main2"
+        v-if="showArr.length > 0 && showArr[showFlag].attrType == '应用图片'"
+      >
+        <a-image
+          :width="700"
+          :height="340"
+          :src="showArr[showFlag].attrValue"
+        />
+      </div>
+      <div class="right" @click="chagneShow()"></div>
     </div>
-    <a-modal v-model:visible="visible" title="视频预览" :width="750" destroyOnClose>
+    <a-modal
+      v-model:visible="visible"
+      title="视频预览"
+      :width="750"
+      destroyOnClose
+    >
       <template #footer></template>
       <div style="width: 100%; display: flex; justify-content: center">
         <div style="width: 100%; height: 100%">
@@ -22,106 +47,154 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, defineProps, watch } from 'vue'
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
-const visible = ref(false)
-const options = reactive({
-  width: '7.00rem', //播放器宽度
-  height: '4.00rem', //播放器高度
-  color: '#409eff', //主题色
-  title: '', //视频名称
-  src: '', //视频源
-  muted: false, //静音
-  webFullScreen: false,
-  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-  autoPlay: true, //自动播放
-  loop: false, //循环播放
-  mirror: false, //镜像画面
-  ligthOff: false, //关灯模式
-  volume: 0.3, //默认音量大小
-  control: true, //是否显示控制
-  controlBtns: [
-    'audioTrack',
-    'quality',
-    'speedRate',
-    'volume',
-    'setting',
-    'pip',
-    'pageFullScreen',
-    'fullScreen',
-  ], //显示所有按钮,
-})
-const showModal = () => {
-  visible.value = true
-}
-const props = defineProps({
-  dataList: { type: Object, default: null },
-})
-const flag = ref(true)
-const img = ref({})
-console.log('111111111111111111111,', props.dataList)
-if (props.dataList.infoList) {
-  let obj = props.dataList.infoList.filter(
-    (item) => item.attrType === '应用展示视频'
-  )[0]
-  console.log('视频==============>', obj)
-  if (!obj) {
-    flag.value = false
-  } else {
-    let imgindex = props.dataList.infoList.filter(
-      (item) => item.attrType === '应用图片'
-    )[0]
-    options.src = obj.attrValue
-    if (imgindex) {
-      img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+  import { ref, reactive, defineProps, watch } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const visible = ref(false)
+  const options = reactive({
+    width: '7.00rem', //播放器宽度
+    height: '4.00rem', //播放器高度
+    color: '#409eff', //主题色
+    title: '', //视频名称
+    src: '', //视频源
+    muted: false, //静音
+    webFullScreen: false,
+    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+    autoPlay: true, //自动播放
+    loop: false, //循环播放
+    mirror: false, //镜像画面
+    ligthOff: false, //关灯模式
+    volume: 0.3, //默认音量大小
+    control: true, //是否显示控制
+    controlBtns: [
+      'audioTrack',
+      'quality',
+      'speedRate',
+      'volume',
+      'setting',
+      'pip',
+      'pageFullScreen',
+      'fullScreen',
+    ], //显示所有按钮,
+  })
+  const showFlag = ref(0)
+  const showArr = ref([])
+  const chagneShow = () => {
+    if (showArr.value.length > 1) {
+      showFlag.value = showFlag.value == 0 ? 1 : 0
     }
   }
-}
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      let obj = val.infoList.filter(
-        (item) => item.attrType === '应用展示视频'
-      )[0]
-      console.log('视频==============>', obj)
-      if (!obj) {
-        flag.value = false
-      } else {
-        let imgindex = props.dataList.infoList.filter(
-          (item) => item.attrType === '应用图片'
-        )[0]
+  const showModal = () => {
+    visible.value = true
+  }
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  const img = ref({})
+  console.log('111111111111111111111,', props.dataList)
+  if (props.dataList.infoList) {
+    showArr.value = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用展示视频' || item.attrType === '应用图片'
+    )
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '应用展示视频'
+    )[0]
+    console.log('视频==============>', showArr.value)
+    if (showArr.value.length == 0) {
+      flag.value = false
+    } else {
+      if (obj) {
         options.src = obj.attrValue
-        if (imgindex) {
-          img.value =
-            'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
-        }
       }
     }
   }
-)
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        showArr.value = props.dataList.infoList.filter(
+          (item) =>
+            item.attrType === '应用展示视频' || item.attrType === '应用图片'
+        )
+        let obj = props.dataList.infoList.filter(
+          (item) => item.attrType === '应用展示视频'
+        )[0]
+        console.log('视频==============>', showArr.value)
+        if (showArr.value.length == 0) {
+          flag.value = false
+        } else {
+          if (obj) {
+            options.src = obj.attrValue
+          }
+        }
+      }
+    }
+  )
 </script>
 <style lang="less" scoped>
-.application-presentation {
-  padding: 0.8rem 3rem 0;
+  .application-presentation {
+    padding: 0.8rem 3rem 0;
 
-  .main {
-    height: 3.4rem;
-    border-radius: 0.1rem;
-    background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
-    background-size: 100%;
-    margin-top: 0.4rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .play {
-      width: 0.96rem;
-      height: 0.96rem;
-      background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
+    .main {
+      width: 13.14rem;
+      height: 3.4rem;
+      border-radius: 0.1rem;
+      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
       background-size: 100%;
-      cursor: pointer;
+      margin-top: 0.4rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .play {
+        width: 0.96rem;
+        height: 0.96rem;
+        background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
+        background-size: 100%;
+        cursor: pointer;
+      }
+    }
+    .main2 {
+      width: 13.14rem;
+      height: 3.4rem;
+      border-radius: 0.1rem;
+      background-size: 100%;
+      margin-top: 0.4rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
-}
+  .box {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-bottom: 0.8rem;
+    .left {
+      width: 0.37rem;
+      height: 0.6rem;
+      cursor: pointer;
+      margin-right: 0.2rem;
+      background: url('~@/assets/detailsAll/business/business_previous.png')
+        no-repeat;
+      background-size: 100%;
+      background-position: center;
+    }
+    .right {
+      width: 0.37rem;
+      height: 0.6rem;
+      cursor: pointer;
+      margin-left: 0.2rem;
+      background: url('~@/assets/detailsAll/business/business_next.png')
+        no-repeat;
+      background-size: 100%;
+      background-position: center;
+    }
+  }
+
+  :deep(.ant-image-img) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
 </style>
diff --git a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
index b35ba162..46a57003 100644
--- a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
@@ -8,7 +8,12 @@
 <template>
   <div class="business-navigation" v-if="navList.length > 0">
     <template v-for="nav in navList" :key="nav.key">
-      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
+      <div
+        class="nav"
+        :class="{ select: nav.key == select }"
+        v-if="nav.show"
+        @click="selectNav(nav.key)"
+      >
         {{ nav.name }}
         <span class="line"></span>
       </div>
@@ -16,217 +21,216 @@
   </div>
 </template>
 <script setup>
-import { ref, defineProps, watch, getCurrentInstance } from 'vue'
-import { useRouter } from 'vue-router'
-import mybus from '@/myplugins/mybus'
-import { queryPartAppByKeyId2 } from '@/api/home'
-// 获取当前路由地址
-const router = useRouter()
-const keyId = router.currentRoute.value.query.id
-const navList = ref([
-  {
-    name: '组件展示',
-    key: 'business-presentation',
-  },
-  {
-    name: '功能介绍',
-    key: 'function-introduction',
-  },
+  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+  import { useRouter } from 'vue-router'
+  import mybus from '@/myplugins/mybus'
+  import { queryPartAppByKeyId2 } from '@/api/home'
+  // 获取当前路由地址
+  const router = useRouter()
+  const keyId = router.currentRoute.value.query.id
+  const navList = ref([
+    {
+      name: '组件展示',
+      key: 'business-presentation',
+    },
+    {
+      name: '功能介绍',
+      key: 'function-introduction',
+    },
 
-  {
-    name: '应用场景',
-    key: 'application-scenarios',
-  },
-  {
-    name: '应用案例',
-    key: 'application-case',
-  },
-  {
-    name: '使用方式',
-    key: 'business-usage-mode',
-  },
-  {
-    name: '常见问题',
-    key: 'common-problem',
-  },
-])
-const props = defineProps({
-  associatedComponents: { type: Array, default: null },
-  selectNow: { type: String, default: '' },
-  dataList: { type: Object, default: null },
-})
-const select = ref('business-associated-ability')
-const list = ref([])
-// 根据能力id查询是否存在关联应用
-if (keyId) {
-  queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
-    console.log('ressssssss', res)
-    if (res.data.data.length > 0) {
-      // 存在关联应用时在导航栏加入关联应用
-      navList.value.unshift({
-        name: '关联应用',
-        key: 'business-associated-ability',
-        show: true,
-      })
-      // list.value.push('关联应用')
-      console.log('navList', navList)
-    }
+    {
+      name: '应用场景',
+      key: 'application-scenarios',
+    },
+    {
+      name: '应用案例',
+      key: 'application-case',
+    },
+    {
+      name: '使用方式',
+      key: 'business-usage-mode',
+    },
+    {
+      name: '常见问题',
+      key: 'common-problem',
+    },
+  ])
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+    selectNow: { type: String, default: '' },
+    dataList: { type: Object, default: null },
   })
-}
-const selectNav = (key) => {
-  select.value = key
-  console.log(key, select.value)
-  mybus.emit('flyToView', select.value)
-}
-if (props.dataList.infoList) {
-  list.value = []
-  let arr = [
-    '关联应用',
-    '组件视频介绍',
-    '功能介绍',
-    '应用场景',
-    '应用案例',
-    '使用方式',
-    '常见问题',
-  ]
-  // 排序
-  // eslint-disable-next-line vue/no-mutating-props
-  props.dataList.infoList.sort((a, b) => {
-    return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
-  })
-  props.dataList.infoList.map((item) => {
-    if (
-      item.attrType === '常见问题' ||
-      item.attrType === '功能介绍' ||
-      item.attrType === '应用场景' ||
-      item.attrType === '应用案例'
-    ) {
-      list.value.push(item.attrType)
-    } else if (item.attrType === '组件视频介绍') {
-      list.value.push('组件展示')
-    }
-  })
-  list.value.unshift('关联应用')
-  list.value.push('使用方式')
-  navList.value.forEach((item) => {
-    console.log(item)
-    if (list.value.indexOf(item.name) > -1) {
-      if (item.name == '关联应用') {
-        if (props.associatedComponents[0].dataList.length != 0) {
-          item.show = true
-        }
-      } else {
-        item.show = true
+  const select = ref('business-associated-ability')
+  const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  if (keyId) {
+    queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length > 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联应用',
+          key: 'business-associated-ability',
+          show: true,
+        })
+        // list.value.push('关联应用')
+        console.log('navList', navList)
       }
-    }
-  })
-  if (list.value.length > 0) {
-    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
-      select.value = navList.value.filter(
-        (item) => (item.name === '关联应用') | (item.name === list.value[0])
-      )[0].key
-    }
+    })
   }
-  console.log('11111111111111111111111111', list.value, navList.value)
-}
-watch(
-  () => props.selectNow,
-  (newValue) => {
-    select.value = newValue
+  const selectNav = (key) => {
+    select.value = key
+    mybus.emit('flyToView', select.value)
   }
-)
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      list.value = []
-      let arr = [
-        '关联应用',
-        '组件视频介绍',
-        '功能介绍',
-        '应用场景',
-        '应用案例',
-        '使用方式',
-        '常见问题',
-      ]
-      // 排序
-      // eslint-disable-next-line vue/no-mutating-props
-      props.dataList.infoList.sort((a, b) => {
-        // console.log('排序==============>', a, b)
-        return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
-      })
-      val.infoList.map((item) => {
-        if (
-          item.attrType === '常见问题' ||
-          item.attrType === '功能介绍' ||
-          item.attrType === '应用场景' ||
-          item.attrType === '应用案例'
-        ) {
-          list.value.push(item.attrType)
-        } else if (item.attrType === '组件视频介绍') {
-          list.value.push('组件展示')
-        }
-      })
-      list.value.unshift('关联应用')
-      list.value.push('使用方式')
-      navList.value.forEach((item) => {
-        console.log(item)
-        if (list.value.indexOf(item.name) > -1) {
-          if (item.name == '关联应用') {
-            if (props.associatedComponents[0].dataList.length != 0) {
-              item.show = true
-            }
-          } else {
+  if (props.dataList.infoList) {
+    list.value = []
+    let arr = [
+      '关联应用',
+      '组件视频介绍',
+      '功能介绍',
+      '应用场景',
+      '应用案例',
+      '使用方式',
+      '常见问题',
+    ]
+    // 排序
+    // eslint-disable-next-line vue/no-mutating-props
+    props.dataList.infoList.sort((a, b) => {
+      return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
+    })
+    props.dataList.infoList.map((item) => {
+      if (
+        item.attrType === '常见问题' ||
+        item.attrType === '功能介绍' ||
+        item.attrType === '应用场景' ||
+        item.attrType === '应用案例'
+      ) {
+        list.value.push(item.attrType)
+      } else if (item.attrType === '组件视频介绍') {
+        list.value.push('组件展示')
+      }
+    })
+    list.value.unshift('关联应用')
+    list.value.push('使用方式')
+    navList.value.forEach((item) => {
+      console.log(item)
+      if (list.value.indexOf(item.name) > -1) {
+        if (item.name == '关联应用') {
+          if (props.associatedComponents[0].dataList.length != 0) {
             item.show = true
           }
-        }
-      })
-      if (list.value.length > 0) {
-        if (navList.value.filter((item) => item.name === list.value[0])[0]) {
-          select.value = navList.value.filter(
-            (item) =>
-              (item.name === '关联应用') | (item.name === list.value[0])
-          )[0].key
+        } else {
+          item.show = true
         }
       }
-      console.log('11111111111111111111111111', list.value, navList.value)
+    })
+    if (list.value.length > 0) {
+      if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+        select.value = navList.value.filter(
+          (item) => (item.name === '关联应用') | (item.name === list.value[0])
+        )[0].key
+      }
     }
+    console.log('11111111111111111111111111', list.value, navList.value)
   }
-)
+  watch(
+    () => props.selectNow,
+    (newValue) => {
+      select.value = newValue
+    }
+  )
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        list.value = []
+        let arr = [
+          '关联应用',
+          '组件视频介绍',
+          '功能介绍',
+          '应用场景',
+          '应用案例',
+          '使用方式',
+          '常见问题',
+        ]
+        // 排序
+        // eslint-disable-next-line vue/no-mutating-props
+        props.dataList.infoList.sort((a, b) => {
+          // console.log('排序==============>', a, b)
+          return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
+        })
+        val.infoList.map((item) => {
+          if (
+            item.attrType === '常见问题' ||
+            item.attrType === '功能介绍' ||
+            item.attrType === '应用场景' ||
+            item.attrType === '应用案例'
+          ) {
+            list.value.push(item.attrType)
+          } else if (item.attrType === '组件视频介绍') {
+            list.value.push('组件展示')
+          }
+        })
+        list.value.unshift('关联应用')
+        list.value.push('使用方式')
+        navList.value.forEach((item) => {
+          console.log(item)
+          if (list.value.indexOf(item.name) > -1) {
+            if (item.name == '关联应用') {
+              if (props.associatedComponents[0].dataList.length != 0) {
+                item.show = true
+              }
+            } else {
+              item.show = true
+            }
+          }
+        })
+        if (list.value.length > 0) {
+          if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+            select.value = navList.value.filter(
+              (item) =>
+                (item.name === '关联应用') | (item.name === list.value[0])
+            )[0].key
+          }
+        }
+        console.log('11111111111111111111111111', list.value, navList.value)
+      }
+    }
+  )
 </script>
 <style lang="less" scoped>
-.business-navigation {
-  width: 19.12rem;
-  height: 0.84rem;
-  line-height: 0.8rem;
-  display: flex;
-  justify-content: space-around;
-  font-size: 0.24rem;
-  color: #666;
-  background: #fff;
-  padding: 0 3rem;
-  box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
-  position: relative;
-
-  .nav {
-    cursor: pointer;
+  .business-navigation {
+    width: 19.12rem;
+    height: 0.84rem;
+    line-height: 0.8rem;
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
+    justify-content: space-around;
+    font-size: 0.24rem;
+    color: #666;
+    background: #fff;
+    padding: 0 3rem;
+    box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
+    position: relative;
 
-    .line {
-      width: 0.4rem;
-      height: 0.04rem;
+    .nav {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+
+      .line {
+        width: 0.4rem;
+        height: 0.04rem;
+      }
+    }
+
+    .select {
+      color: #526aff;
+
+      .line {
+        background: #526aff;
+      }
     }
   }
-
-  .select {
-    color: #526aff;
-
-    .line {
-      background: #526aff;
-    }
-  }
-}
 </style>
diff --git a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
index f3fe90f6..76974000 100644
--- a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
@@ -164,6 +164,9 @@
     businessArea.value = props.dataList.infoList.filter(
       (val) => val.attrType === '应用领域'
     )[0].attrValue
+    let obj = props.dataList.infoList.filter(
+      (val) => val.attrType === '组件类型'
+    )[0]
     if (
       props.dataList.infoList.filter((val) => val.attrType === '部署位置')[0]
     ) {
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
index 8717495d..cfa20a0b 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
@@ -89,6 +89,7 @@
     list.value = []
     props.dataList.infoList.map((item) => {
       if (
+        item.attrType === '功能介绍' ||
         item.attrType === '常见问题' ||
         item.attrType === '应用案例' ||
         item.attrType === '应用场景'
@@ -96,9 +97,12 @@
         list.value.push(item.attrType)
       } else if (item.attrType === '组件视频介绍') {
         list.value.push('组件展示')
+      } else if (item.attrType === '是否支持试用' && item.attrValue === '是') {
+        list.value.push('组件试用')
       }
     })
     list.value.unshift('关联应用')
+    list.value.push('使用方式')
     navList.value.forEach((item) => {
       console.log(item)
       if (list.value.indexOf(item.name) > -1) {
@@ -111,9 +115,12 @@
         // }
       }
     })
-    select.value = navList.value.filter(
-      (item) => item.name === list.value[0]
-    )[0].key
+    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+      select.value = navList.value.filter(
+        (item) => (item.name === '关联应用') | (item.name === list.value[0])
+        // (item) => item.name === list.value[0]
+      )[0].key
+    }
     console.log('11111111111111111111111111', list.value, navList.value)
   }
   watch(
@@ -137,10 +144,15 @@
             list.value.push(item.attrType)
           } else if (item.attrType === '组件视频介绍') {
             list.value.push('组件展示')
+          } else if (
+            item.attrType === '是否支持试用' &&
+            item.attrValue === '是'
+          ) {
+            list.value.push('组件试用')
           }
         })
         list.value.unshift('关联应用')
-        list.value.push('组件试用')
+        // list.value.push('组件试用')
         list.value.push('使用方式')
         navList.value.forEach((item) => {
           console.log(item)
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue b/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
index 78281255..50ebfd2c 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
@@ -49,7 +49,7 @@
   })
   if (props.dataList.infoList) {
     let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '试用地址'
+      (item) => item.attrType === '是否支持试用' && item.attrValue === '是'
     )[0]
     if (!obj) {
       flag.value = false
@@ -94,7 +94,9 @@
     () => props.dataList,
     (val) => {
       if (val) {
-        let obj = val.infoList.filter((item) => item.attrType === '试用地址')[0]
+        let obj = val.infoList.filter(
+          (item) => item.attrType === '是否支持试用' && item.attrValue === '是'
+        )[0]
         if (!obj) {
           flag.value = false
         } else {
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
index 05dbb176..484b2503 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
@@ -90,7 +90,7 @@
         values: '',
       },
       {
-        type: '最大级别',
+        type: '最大级别名称',
         values: '',
       },
     ],
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
index b0585b8f..cc206f14 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
@@ -82,7 +82,6 @@
   const select = ref('layer-service-associated-ability')
   const selectNav = (key) => {
     select.value = key
-    console.log(key, select.value)
     mybus.emit('flyToView', select.value)
   }
   if (props.dataList.infoList) {
@@ -145,9 +144,12 @@
         item.show = true
       }
     })
-    select.value = navList.value.filter(
-      (item) => item.name === list.value[0]
-    )[0].key
+    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+      select.value = navList.value.filter(
+        (item) => (item.name === '关联应用') | (item.name === list.value[0])
+        // (item) => item.name === list.value[0]
+      )[0].key
+    }
     console.log('11111111111111111111111111', list.value, navList.value)
   }
   watch(
diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index a45cd6ea..a6fbd0ea 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -10,57 +10,100 @@
     </div>
     <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
       <div class="resultListSearchInput-father">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
           <div class="hengxian"></div>
         </div>
       </div>
       <div class="top-content-father" :key="listKey">
-        <template v-if="
-          Cardsname == '组件服务' ||
-          Cardsname == '应用资源' ||
-          Cardsname == ''
-        ">
+        <template
+          v-if="
+            Cardsname == '组件服务' ||
+            Cardsname == '应用资源' ||
+            Cardsname == ''
+          "
+        >
           <div class="top-content-son">
-            <div v-for="(item, index) in ListContent.records" :key="index" class="top-content">
+            <div
+              v-for="(item, index) in ListContent.records"
+              :key="index"
+              class="top-content"
+            >
               <span class="top-content-title">
                 {{ item.name }}
               </span>
-              <div class="leixingsumfather" :class="!item.shrinkFlag ? 'shrink' : ''">
-                <div v-for="(item2, index2) in item.typeList" :key="index2" class="leixingsum">
-                  <a-checkable-tag :checked="
-                    item.selectedTags &&
-                    item.selectedTags.indexOf(item2.dict_label) !== -1
-                  " @change="
-  (checked) => handleChange(item2, checked, item.name)
-">
+              <div
+                class="leixingsumfather"
+                :class="!item.shrinkFlag ? 'shrink' : ''"
+              >
+                <div
+                  v-for="(item2, index2) in item.typeList"
+                  :key="index2"
+                  class="leixingsum"
+                >
+                  <a-checkable-tag
+                    :checked="
+                      item.selectedTags &&
+                      item.selectedTags.indexOf(item2.dict_label) !== -1
+                    "
+                    @change="
+                      (checked) => handleChange(item2, checked, item.name)
+                    "
+                  >
                     {{ item2.dict_label }}
                   </a-checkable-tag>
                 </div>
               </div>
-              <div class="shrinkTag" v-if="item.showShrink" :key="item.shrinkFlag">
-                <up-outlined v-show="!item.shrinkFlag" @click="changeShrink(item.name)" />
-                <down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" />
+              <div
+                class="shrinkTag"
+                v-if="item.showShrink"
+                :key="item.shrinkFlag"
+              >
+                <up-outlined
+                  v-show="!item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
+                <down-outlined
+                  v-show="item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
               </div>
             </div>
             <div class="top-content" v-if="Cardsname == '组件服务'">
               <span class="top-content-title">共享条件</span>
               <div class="leixingsumfather">
                 <div class="leixingsum">
-                  <a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')">
+                  <a-checkable-tag
+                    :checked="tagFlag == '申请'"
+                    @change="() => chagneTag('申请')"
+                  >
                     申请
                   </a-checkable-tag>
                 </div>
@@ -69,7 +112,7 @@
                     :checked="tagFlag == '免批申请'"
                     @change="() => chagneTag('免批申请')"
                   >
-                    免批申请
+                    免批
                   </a-checkable-tag>
                 </div>
               </div>
@@ -77,25 +120,49 @@
           </div>
         </template>
       </div>
-      <searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
-        :resourceList="resourceList" :resourceTotal="resourceTotal" :select-cardsname="Cardsname" />
+      <searchResultList
+        v-show="resourceList.data && resourceList.data.length > 0"
+        :key="listKey2"
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+        :select-cardsname="Cardsname"
+      />
       <div class="pagination">
-        <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-          v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper :total="resourceTotal"
-          :page-size-options="pageSizeOptions" @change="pageChange" @showSizeChange="onShowSizeChange" />
+        <a-pagination
+          v-if="resourceList.data && resourceList.data.length > 0"
+          v-model:current="currentPage"
+          v-model:pageSize="currentPageSize"
+          show-size-changer
+          show-less-items
+          show-quick-jumper
+          :total="resourceTotal"
+          :page-size-options="pageSizeOptions"
+          @change="pageChange"
+          @showSizeChange="onShowSizeChange"
+        />
       </div>
-      <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
+      <div
+        v-if="resourceList.data && resourceList.data.length <= 0"
+        style="margin-top: 2rem"
+      >
         <a-empty />
       </div>
     </div>
     <div class="top" v-else-if="Cardsname === '基础设施'">
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
@@ -105,24 +172,41 @@
     </div>
     <div class="top" v-else>
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
       <div class="resultListSearchInput-father" style="background: unset">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
         </div>
       </div>
-      <KnowledgeBase :resourceList="resourceList" :resourceTotal="resourceTotal"></KnowledgeBase>
+      <KnowledgeBase
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+      ></KnowledgeBase>
     </div>
     <div class="talk-monitor" @click="openMonitor">
       <a-tooltip>
@@ -132,18 +216,28 @@
     </div>
   </div>
   <!-- 西海岸 -->
-  <div class="details-pageconetent" v-else-if="whoShow1 && whoShow1.itShowXiHaiAn">
+  <div
+    class="details-pageconetent"
+    v-else-if="whoShow1 && whoShow1.itShowXiHaiAn"
+  >
     <home-header></home-header>
     <div class="details-pageconetent-left">
       <detailsPageconetentTree />
     </div>
     <div class="top" v-if="Cardsname != '知识库'">
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
@@ -151,46 +245,82 @@
       <div class="resultListSearchInput-father">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
           <div class="hengxian"></div>
         </div>
       </div>
       <!-- 分类 -->
       <div class="top-content-father" :key="listKey">
-        <template v-if="
-          Cardsname == '组件服务' ||
-          Cardsname == '应用资源' ||
-          Cardsname == ''
-        ">
+        <template
+          v-if="
+            Cardsname == '组件服务' ||
+            Cardsname == '应用资源' ||
+            Cardsname == ''
+          "
+        >
           <div class="top-content-son">
-            <div v-for="(item, index) in ListContent.records" :key="index" class="top-content">
+            <div
+              v-for="(item, index) in ListContent.records"
+              :key="index"
+              class="top-content"
+            >
               <span class="top-content-title">
                 {{ item.name }}
               </span>
-              <div class="leixingsumfather" :class="!item.shrinkFlag ? 'shrink' : ''">
-                <div v-for="(item2, index2) in item.typeList" :key="index2" class="leixingsum">
-                  <a-checkable-tag :checked="
-                    item.selectedTags &&
-                    item.selectedTags.indexOf(item2.dict_label) !== -1
-                  " @change="
-  (checked) => handleChange(item2, checked, item.name)
-">
+              <div
+                class="leixingsumfather"
+                :class="!item.shrinkFlag ? 'shrink' : ''"
+              >
+                <div
+                  v-for="(item2, index2) in item.typeList"
+                  :key="index2"
+                  class="leixingsum"
+                >
+                  <a-checkable-tag
+                    :checked="
+                      item.selectedTags &&
+                      item.selectedTags.indexOf(item2.dict_label) !== -1
+                    "
+                    @change="
+                      (checked) => handleChange(item2, checked, item.name)
+                    "
+                  >
                     {{ item2.dict_label }}
                   </a-checkable-tag>
                 </div>
               </div>
-              <div class="shrinkTag" v-if="item.showShrink" :key="item.shrinkFlag">
-                <up-outlined v-show="!item.shrinkFlag" @click="changeShrink(item.name)" />
-                <down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" />
+              <div
+                class="shrinkTag"
+                v-if="item.showShrink"
+                :key="item.shrinkFlag"
+              >
+                <up-outlined
+                  v-show="!item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
+                <down-outlined
+                  v-show="item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
               </div>
             </div>
             <div class="top-content" v-if="Cardsname == '组件服务'">
               <span class="top-content-title">共享条件</span>
               <div class="leixingsumfather">
                 <div class="leixingsum">
-                  <a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')">
+                  <a-checkable-tag
+                    :checked="tagFlag == '申请'"
+                    @change="() => chagneTag('申请')"
+                  >
                     申请
                   </a-checkable-tag>
                 </div>
@@ -208,37 +338,71 @@
         </template>
       </div>
       <!-- 中心内容 -->
-      <searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
-        :resourceList="resourceList" :resourceTotal="resourceTotal" :select-cardsname="Cardsname" />
+      <searchResultList
+        v-show="resourceList.data && resourceList.data.length > 0"
+        :key="listKey2"
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+        :select-cardsname="Cardsname"
+      />
       <!-- 分页 -->
       <div class="pagination">
-        <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-          v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper :total="resourceTotal"
-          :page-size-options="pageSizeOptions" @change="pageChange" @showSizeChange="onShowSizeChange" />
+        <a-pagination
+          v-if="resourceList.data && resourceList.data.length > 0"
+          v-model:current="currentPage"
+          v-model:pageSize="currentPageSize"
+          show-size-changer
+          show-less-items
+          show-quick-jumper
+          :total="resourceTotal"
+          :page-size-options="pageSizeOptions"
+          @change="pageChange"
+          @showSizeChange="onShowSizeChange"
+        />
       </div>
-      <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 200px">
+      <div
+        v-if="resourceList.data && resourceList.data.length <= 0"
+        style="margin-top: 200px"
+      >
         <a-empty />
       </div>
     </div>
     <div class="top" v-else>
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
       <div class="resultListSearchInput-father" style="background: unset">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
         </div>
       </div>
-      <KnowledgeBase :resourceList="resourceList" :resourceTotal="resourceTotal"></KnowledgeBase>
+      <KnowledgeBase
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+      ></KnowledgeBase>
     </div>
     <div class="talk-monitor" @click="openMonitor">
       <a-tooltip>
@@ -248,64 +412,113 @@
     </div>
   </div>
   <!-- 包头 -->
-  <div class="details-pageconetent" v-else-if="whoShow1 && whoShow1.itShowBaoTou">
+  <div
+    class="details-pageconetent"
+    v-else-if="whoShow1 && whoShow1.itShowBaoTou"
+  >
     <home-header></home-header>
     <div class="details-pageconetent-left">
       <detailsPageconetentTree />
     </div>
     <div class="top" v-if="Cardsname != '知识库' && Cardsname != '数据资源'">
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
-      <div v-show="Cardsname !== '数据资源'" class="resultListSearchInput-father">
+      <div
+        v-show="Cardsname !== '数据资源'"
+        class="resultListSearchInput-father"
+      >
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
           <div class="hengxian"></div>
         </div>
       </div>
       <div class="top-content-father" :key="listKey">
-        <template v-if="
-          Cardsname == '组件服务' ||
-          Cardsname == '应用资源' ||
-          Cardsname == ''
-        ">
+        <template
+          v-if="
+            Cardsname == '组件服务' ||
+            Cardsname == '应用资源' ||
+            Cardsname == ''
+          "
+        >
           <div class="top-content-son">
-            <div v-for="(item, index) in ListContent.records" :key="index" class="top-content">
+            <div
+              v-for="(item, index) in ListContent.records"
+              :key="index"
+              class="top-content"
+            >
               <span class="top-content-title">
                 {{ item.name }}
               </span>
-              <div class="leixingsumfather" :class="!item.shrinkFlag ? 'shrink' : ''">
-                <div v-for="(item2, index2) in item.typeList" :key="index2" class="leixingsum">
-                  <a-checkable-tag :checked="
-                    item.selectedTags &&
-                    item.selectedTags.indexOf(item2.dict_label) !== -1
-                  " @change="
-  (checked) => handleChange(item2, checked, item.name)
-">
+              <div
+                class="leixingsumfather"
+                :class="!item.shrinkFlag ? 'shrink' : ''"
+              >
+                <div
+                  v-for="(item2, index2) in item.typeList"
+                  :key="index2"
+                  class="leixingsum"
+                >
+                  <a-checkable-tag
+                    :checked="
+                      item.selectedTags &&
+                      item.selectedTags.indexOf(item2.dict_label) !== -1
+                    "
+                    @change="
+                      (checked) => handleChange(item2, checked, item.name)
+                    "
+                  >
                     {{ item2.dict_label }}
                   </a-checkable-tag>
                 </div>
               </div>
-              <div class="shrinkTag" v-if="item.showShrink" :key="item.shrinkFlag">
-                <up-outlined v-show="!item.shrinkFlag" @click="changeShrink(item.name)" />
-                <down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" />
+              <div
+                class="shrinkTag"
+                v-if="item.showShrink"
+                :key="item.shrinkFlag"
+              >
+                <up-outlined
+                  v-show="!item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
+                <down-outlined
+                  v-show="item.shrinkFlag"
+                  @click="changeShrink(item.name)"
+                />
               </div>
             </div>
             <div class="top-content" v-if="Cardsname == '组件服务'">
               <span class="top-content-title">共享条件</span>
               <div class="leixingsumfather">
                 <div class="leixingsum">
-                  <a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')">
+                  <a-checkable-tag
+                    :checked="tagFlag == '申请'"
+                    @change="() => chagneTag('申请')"
+                  >
                     申请
                   </a-checkable-tag>
                 </div>
@@ -322,18 +535,35 @@
           </div>
         </template>
       </div>
-      <searchResultList v-show="resourceList.data && resourceList.data.length" :key="listKey2"
-        :resourceList="resourceList" :resourceTotal="resourceTotal" :select-cardsname="Cardsname" />
+      <searchResultList
+        v-show="resourceList.data && resourceList.data.length"
+        :key="listKey2"
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+        :select-cardsname="Cardsname"
+      />
       <div class="pagination">
-        <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-          v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper :total="resourceTotal"
-          :page-size-options="pageSizeOptions" @change="pageChange" @showSizeChange="onShowSizeChange" />
+        <a-pagination
+          v-if="resourceList.data && resourceList.data.length > 0"
+          v-model:current="currentPage"
+          v-model:pageSize="currentPageSize"
+          show-size-changer
+          show-less-items
+          show-quick-jumper
+          :total="resourceTotal"
+          :page-size-options="pageSizeOptions"
+          @change="pageChange"
+          @showSizeChange="onShowSizeChange"
+        />
       </div>
       <div class="shujuziyuan" v-if="Cardsname == '数据资源'">
         <div class="yunziyuan">
           <div class="yunziyuan-title">
             <div class="tupian"></div>
-            <div class="title" @click="dianjitiaozhaun('青岛市政务资源管理平台')">
+            <div
+              class="title"
+              @click="dianjitiaozhaun('青岛市政务资源管理平台')"
+            >
               青岛市政务资源管理平台{{ dataShowdev }}
             </div>
           </div>
@@ -349,18 +579,28 @@
           </div>
         </div>
       </div>
-      <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
+      <div
+        v-if="resourceList.data && resourceList.data.length <= 0"
+        style="margin-top: 2rem"
+      >
         <a-empty v-if="!(Cardsname == '数据资源')" />
       </div>
     </div>
     <div class="top" v-else-if="Cardsname == '数据资源'">
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
@@ -368,24 +608,41 @@
     </div>
     <div class="top" v-else>
       <div class="top-title">
-        <div v-for="item in titleName" :key="item.name" :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)">
-          <span class="photo" :style="{
-            backgroundImage: `url(${item.photo}) `,
-            backgroundSize: 'cover',
-          }"></span>
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
           <span>{{ item.name }}</span>
         </div>
       </div>
       <div class="resultListSearchInput-father" style="background: unset">
         <div class="resultListSearchInput-son">
           模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getAppResources" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
           <button class="button-reset" @click="chongzhi()">重置</button>
         </div>
       </div>
-      <KnowledgeBase :resourceList="resourceList" :resourceTotal="resourceTotal"></KnowledgeBase>
+      <KnowledgeBase
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+      ></KnowledgeBase>
     </div>
     <!--<div class="talk-monitor" @click="openMonitor">
       <a-tooltip>
@@ -397,222 +654,216 @@
   <home-footer></home-footer>
 </template>
 <script>
-import HomeFooter from '@/views/newHome/components/Footer'
-import mybus from '@/myplugins/mybus'
-import {
-  defineComponent,
-  reactive,
-  ref,
-  toRefs,
-  onMounted,
-  watch,
-} from 'vue'
-import {
-  UpOutlined,
-  DownOutlined,
-} from '@ant-design/icons-vue'
-import {
-  selectDicStoreAll,
-  pageWithAttrs,
-  getDataResource,
-  getIntegrationServicesList,
-} from '@/api/home.js'
-import { getSgcList } from '@/api/personalCenter'
-import { useRouter } from 'vue-router'
-import HomeHeader from '@/views/home/components/header'
-import detailsPageconetentTree from '@/views/home/detailsPageconetentTree.vue'
-import searchResultList from '@/views/home/components/searchResultList.vue'
-import KnowledgeBase from '@/views/home/components/KnowledgeBase.vue'
-// 数据资源引用
-import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
-// 基础设施引用
-import infrastructurePage from '@/views/home/infrastructurePage.vue'
-import detailsPageInfrastructureTree from '@/views/home/detailsPageInfrastructureTree.vue'
-import { message } from 'ant-design-vue'
-import { titleNameArray, keyongziyuanqingkaungArray, shujuziyuanqingkuangArray } from './constantData/showData.js'
+  import HomeFooter from '@/views/newHome/components/Footer'
+  import mybus from '@/myplugins/mybus'
+  import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
+  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+  import {
+    selectDicStoreAll,
+    pageWithAttrs,
+    getDataResource,
+    getIntegrationServicesList,
+  } from '@/api/home.js'
+  import { getSgcList } from '@/api/personalCenter'
+  import { useRouter } from 'vue-router'
+  import HomeHeader from '@/views/home/components/header'
+  import detailsPageconetentTree from '@/views/home/detailsPageconetentTree.vue'
+  import searchResultList from '@/views/home/components/searchResultList.vue'
+  import KnowledgeBase from '@/views/home/components/KnowledgeBase.vue'
+  // 数据资源引用
+  import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
+  // 基础设施引用
+  import infrastructurePage from '@/views/home/infrastructurePage.vue'
+  import detailsPageInfrastructureTree from '@/views/home/detailsPageInfrastructureTree.vue'
+  import { message } from 'ant-design-vue'
+  import {
+    titleNameArray,
+    keyongziyuanqingkaungArray,
+    shujuziyuanqingkuangArray,
+  } from './constantData/showData.js'
 
-export default defineComponent({
-  setup() {
-    const titleName = ref(titleNameArray)
+  export default defineComponent({
+    setup() {
+      const titleName = ref(titleNameArray)
 
-    const openMonitor = () => {
-      window.open('http://www.qingdao.gov.cn:8083/ghwd/znwdqd/index.html')
-    }
-    // 模糊查询
-    const keyongziyuanqingkaung = ref(keyongziyuanqingkaungArray)
-    const shujuziyuanqingkuang = ref(shujuziyuanqingkuangArray)
-
-    // 西海岸数据资源页
-    // const dataShowbt = ref(whoShow.itshow)
-    // 青岛数据资源页
-    const whoShow1 = ref(whoShow)
-    // 分页
-    const loading = ref(true)
-    const currentPage = ref(1)
-    const currentPageSize = ref(5)
-    const pageSizeOptions = ref(['5', '10', '20', '50'])
-    const router = useRouter()
-    const select = router.currentRoute.value.query.select
-    const str = router.currentRoute.value.query.str
-    const searchValue = ref(str)
-    let tecHnosphere = router.currentRoute.value.query.tecHnosphere
-    let appLiCation = router.currentRoute.value.query.appLiCation
-    const Cardsname = ref(select)
-    // 刷新筛选条件组件
-    let listKey = ref(0)
-    // 刷新筛选列表信息组件
-    const listKey2 = ref(0)
-    // 储存筛选条件状态
-    const state = reactive({
-      selectedTags: [],
-      diyici: [],
-    })
-    // 查询参数
-    const paramsGetResources = {
-      districtId: '',
-      deptIds: [],
-      pageNum: 1,
-      pageSize: currentPageSize.value,
-      type: Cardsname.value,
-      name: '',
-      infoList: [],
-      orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
-      orderType: 'DESC', // ASC 升序  DESC 降序
-    }
-    
-    // 查询
-    const onSearch = () => {
-      loading.value = true
-      paramsGetResources.name = searchValue.value
-      currentPage.value = 1
-    }
-    // 免批
-    const tagFlag = ref('')
-    // 视频资源
-    const stateTags = ref(['在线', '离线'])
-    const selStateTags = ref([])
-    const handleChangeStateTag = (tag, checked) => {
-      loading.value = true
-      paramsGetResources.pageNum = 1
-      currentPage.value = 1
-      paramsGetResources.infoList = paramsGetResources.infoList.filter(
-        (item) => item.attrType !== 'status'
-      )
-      if (checked) {
-        selStateTags.value = [tag]
-        paramsGetResources.infoList.push({
-          attrType: 'status',
-          attrValue: tag == '在线' ? 1 : 0,
-        })
-      } else {
-        selStateTags.value = selStateTags.value.filter((t) => t !== tag)
+      const openMonitor = () => {
+        window.open('http://www.qingdao.gov.cn:8083/ghwd/znwdqd/index.html')
       }
-      getAppResources()
-      console.log(tag, checked)
-    }
-    const selBqTags = ref([])
-    const handleChangeBqTags = (tag, checked) => {
-      loading.value = true
-      paramsGetResources.pageNum = 1
-      currentPage.value = 1
-      paramsGetResources.infoList = paramsGetResources.infoList.filter(
-        (item) => item.attrType !== 'labelName'
-      )
-      if (checked) {
-        selBqTags.value = [tag]
-        paramsGetResources.infoList.push({
-          attrType: 'labelName',
-          attrValue: tag,
-        })
-      } else {
-        selBqTags.value = selBqTags.value.filter((t) => t !== tag)
-      }
-      getAppResources()
-    }
-    const current = ref(5)
-    const chagneTag = (name) => {
-      paramsGetResources.pageNum = 1
-      currentPage.value = 1
-      if (tagFlag.value == name) {
-        tagFlag.value = ''
-        paramsGetResources.shareCondition = ''
-      } else {
-        tagFlag.value = name
-        paramsGetResources.shareCondition = name
-      }
-      listKey.value++
-      getAppResources()
-    }
+      // 模糊查询
+      const keyongziyuanqingkaung = ref(keyongziyuanqingkaungArray)
+      const shujuziyuanqingkuang = ref(shujuziyuanqingkuangArray)
 
-    // 重置数据
-    const chongzhi = () => {
-      loading.value = true
-      // 重置模糊查字段
-      searchValue.value = ''
-      paramsGetResources.name = searchValue.value
-      // 重置筛选条件
-      ListContent.records.forEach((val) => {
-        val.selectedTags = []
-      })
+      // 西海岸数据资源页
+      // const dataShowbt = ref(whoShow.itshow)
+      // 青岛数据资源页
+      const whoShow1 = ref(whoShow)
       // 分页
-      currentPage.value = 1
-      currentPageSize.value = 5
-      // 重置查询条件
-      paramsGetResources.districtId = ''
-      paramsGetResources.deptIds = []
-      paramsGetResources.pageNum = 1
-      paramsGetResources.pageSize = 5
-      paramsGetResources.name = ''
-      paramsGetResources.shareCondition = ''
-      paramsGetResources.infoList = []
-      paramsGetResources.orderField = 'total'
-      paramsGetResources.orderType = 'DESC'
-      mybus.emit('chongzhi')
-      getAppResources()
-    }
-
-    //跳转链接
-    function dianjitiaozhaun(name) {
-      switch (name) {
-        case '青岛市政务资源管理平台':
-          window.open('http://15.72.158.81/web/root/homepage.aspx')
-          console.log('name', name)
-          break
-        case '青岛市视频资源管理平台':
-          window.open('http://15.72.183.88:8760/yzy/main')
-          console.log('name', name)
-          break
-      }
-    }
-
-    // 点击筛选条件回调
-    const handleChange = (tag, checked, name) => {
-      loading.value = true
-      paramsGetResources.pageNum = 1
-      currentPage.value = 1
-      console.log('点击筛选条件=================>', tag, checked, name)
-      ListContent.records.forEach((val) => {
-        if (val.name === name) {
-          paramsGetResources.infoList = paramsGetResources.infoList.filter(
-            (item) => item.attrType !== name
-          )
-          if (val.selectedTags.indexOf(tag.dict_label) == -1) {
-            val.selectedTags = [tag.dict_label]
-            paramsGetResources.infoList.push({
-              attrType: name,
-              attrValue: tag.dict_label,
-            })
-          } else {
-            val.selectedTags.splice(
-              val.selectedTags.indexOf(tag.dict_label),
-              1
-            )
-          }
-        }
+      const loading = ref(true)
+      const currentPage = ref(1)
+      const currentPageSize = ref(5)
+      const pageSizeOptions = ref(['5', '10', '20', '50'])
+      const router = useRouter()
+      const select = router.currentRoute.value.query.select
+      const str = router.currentRoute.value.query.str
+      const searchValue = ref(str)
+      let tecHnosphere = router.currentRoute.value.query.tecHnosphere
+      let appLiCation = router.currentRoute.value.query.appLiCation
+      const Cardsname = ref(select)
+      // 刷新筛选条件组件
+      let listKey = ref(0)
+      // 刷新筛选列表信息组件
+      const listKey2 = ref(0)
+      // 储存筛选条件状态
+      const state = reactive({
+        selectedTags: [],
+        diyici: [],
       })
-      listKey.value++
-      getAppResources()
-    }
+      // 查询参数
+      const paramsGetResources = {
+        districtId: '',
+        deptIds: [],
+        pageNum: 1,
+        pageSize: currentPageSize.value,
+        type: Cardsname.value,
+        name: '',
+        infoList: [],
+        orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
+        orderType: 'DESC', // ASC 升序  DESC 降序
+      }
+
+      // 查询
+      const onSearch = () => {
+        loading.value = true
+        paramsGetResources.name = searchValue.value
+        currentPage.value = 1
+      }
+      // 免批
+      const tagFlag = ref('')
+      // 视频资源
+      const stateTags = ref(['在线', '离线'])
+      const selStateTags = ref([])
+      const handleChangeStateTag = (tag, checked) => {
+        loading.value = true
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        paramsGetResources.infoList = paramsGetResources.infoList.filter(
+          (item) => item.attrType !== 'status'
+        )
+        if (checked) {
+          selStateTags.value = [tag]
+          paramsGetResources.infoList.push({
+            attrType: 'status',
+            attrValue: tag == '在线' ? 1 : 0,
+          })
+        } else {
+          selStateTags.value = selStateTags.value.filter((t) => t !== tag)
+        }
+        getAppResources()
+        console.log(tag, checked)
+      }
+      const selBqTags = ref([])
+      const handleChangeBqTags = (tag, checked) => {
+        loading.value = true
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        paramsGetResources.infoList = paramsGetResources.infoList.filter(
+          (item) => item.attrType !== 'labelName'
+        )
+        if (checked) {
+          selBqTags.value = [tag]
+          paramsGetResources.infoList.push({
+            attrType: 'labelName',
+            attrValue: tag,
+          })
+        } else {
+          selBqTags.value = selBqTags.value.filter((t) => t !== tag)
+        }
+        getAppResources()
+      }
+      const current = ref(5)
+      const chagneTag = (name) => {
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        if (tagFlag.value == name) {
+          tagFlag.value = ''
+          paramsGetResources.shareCondition = ''
+        } else {
+          tagFlag.value = name
+          paramsGetResources.shareCondition = name
+        }
+        listKey.value++
+        getAppResources()
+      }
+
+      // 重置数据
+      const chongzhi = () => {
+        loading.value = true
+        // 重置模糊查字段
+        searchValue.value = ''
+        paramsGetResources.name = searchValue.value
+        // 重置筛选条件
+        ListContent.records.forEach((val) => {
+          val.selectedTags = []
+        })
+        // 分页
+        currentPage.value = 1
+        currentPageSize.value = 5
+        // 重置查询条件
+        paramsGetResources.districtId = ''
+        paramsGetResources.deptIds = []
+        paramsGetResources.pageNum = 1
+        paramsGetResources.pageSize = 5
+        paramsGetResources.name = ''
+        paramsGetResources.shareCondition = ''
+        paramsGetResources.infoList = []
+        paramsGetResources.orderField = 'total'
+        paramsGetResources.orderType = 'DESC'
+        mybus.emit('chongzhi')
+        getAppResources()
+      }
+
+      //跳转链接
+      function dianjitiaozhaun(name) {
+        switch (name) {
+          case '青岛市政务资源管理平台':
+            window.open('http://15.72.158.81/web/root/homepage.aspx')
+            console.log('name', name)
+            break
+          case '青岛市视频资源管理平台':
+            window.open('http://15.72.183.88:8760/yzy/main')
+            console.log('name', name)
+            break
+        }
+      }
+
+      // 点击筛选条件回调
+      const handleChange = (tag, checked, name) => {
+        loading.value = true
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        console.log('点击筛选条件=================>', tag, checked, name)
+        ListContent.records.forEach((val) => {
+          if (val.name === name) {
+            paramsGetResources.infoList = paramsGetResources.infoList.filter(
+              (item) => item.attrType !== name
+            )
+            if (val.selectedTags.indexOf(tag.dict_label) == -1) {
+              val.selectedTags = [tag.dict_label]
+              paramsGetResources.infoList.push({
+                attrType: name,
+                attrValue: tag.dict_label,
+              })
+            } else {
+              val.selectedTags.splice(
+                val.selectedTags.indexOf(tag.dict_label),
+                1
+              )
+            }
+          }
+        })
+        listKey.value++
+        getAppResources()
+      }
       const getNewList = () => {
         tecHnosphere = router.currentRoute.value.query.tecHnosphere
         appLiCation = router.currentRoute.value.query.appLiCation
@@ -706,783 +957,785 @@ export default defineComponent({
               : paramsGetResources.orderField == 'applyCount'
               ? 'requestCount'
               : 'createTime', //排序字段
-          orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
-          pageNum: paramsGetResources.pageNum, //页码
-          pageSize: paramsGetResources.pageSize, //分页大小
-        }
-        getDataResource(dataResourceParams).then((res) => {
-          if (whoShow1.value.itShowQingDao) {
-            res.data.data.data.forEach((val) => {
-              val.id = val.guid // id
-              val.name = val.zyname // 名字
-              val.sjlCount = val.sjcczl // 数据量
-              val.applyCount = val.syqk // 申请量
-              val.deptName = val.TGBM // 部门
-              val.createDate = val.fbrq // 发布时间
-            })
-            resourceList.data = res.data.data.data || []
-            resourceTotal.value = res.data.data.rows || ''
-            loading.value = false
-          } else if (whoShow1.value.itShowXiHaiAn) {
-            res.data.data.list.forEach((val) => {
-              val.id = val.serviceId // id
-              val.name = val.serviceName // 名字
-              val.sjlCount = val.requestQuantity // 数据量
-              val.applyCount = val.requestCount // 申请量
-              val.deptName = val.departmentName // 部门
-              val.createTime = val.createTime.split('.')[0]
-              val.createDate = val.createTime // 发布时间
-            })
-            resourceList.data = res.data.data.list || []
-            resourceTotal.value = res.data.data.total || ''
-            loading.value = false
+            orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
+            pageNum: paramsGetResources.pageNum, //页码
+            pageSize: paramsGetResources.pageSize, //分页大小
           }
-        })
-      }
-      else if (paramsGetResources.type !== '数据资源') {
-        if (switchIndex != '分页查询') {
-          paramsGetResources.pageNum = 1
-        }
-        pageWithAttrs(paramsGetResources).then((res) => {
-          console.log('查询列表============>', resourceList, res.data.data)
-          resourceList.data = []
-          videoList.data = []
-          if (Cardsname.value === '基础设施') {
-            resourceList.data = res.data.data.records || []
-            resourceTotal.value = res.data.data.total || ''
-            loading.value = false
-          } else {
-            resourceTotal.value = res.data.data.total || ''
-            getShoppingCartList(res.data.data.records)
-          }
-        })
-      }
-    }
-
-    let shoppingCartList = ref([])
-    // 获取申购车列表
-    const getShoppingCartList = (list) => {
-      getSgcList({
-        pageNum: 1,
-        pageSize: 500,
-        name: '',
-        type: '',
-      }).then((res) => {
-        console.log('申购车列表================>', res.data.data.records)
-        shoppingCartList.value = res.data.data.records
-        list.map((item) => {
-          item.isInShoppingCart = false
-          item.isInShoppingCart = shoppingCartList.value.some((item2) => {
-            return item.id === item2.resourceId
+          getDataResource(dataResourceParams).then((res) => {
+            if (whoShow1.value.itShowQingDao) {
+              res.data.data.data.forEach((val) => {
+                val.id = val.guid // id
+                val.name = val.zyname // 名字
+                val.sjlCount = val.sjcczl // 数据量
+                val.applyCount = val.syqk // 申请量
+                val.deptName = val.TGBM // 部门
+                val.createDate = val.fbrq // 发布时间
+              })
+              resourceList.data = res.data.data.data || []
+              resourceTotal.value = res.data.data.rows || ''
+              loading.value = false
+            } else if (whoShow1.value.itShowXiHaiAn) {
+              res.data.data.list.forEach((val) => {
+                val.id = val.serviceId // id
+                val.name = val.serviceName // 名字
+                val.sjlCount = val.requestQuantity // 数据量
+                val.applyCount = val.requestCount // 申请量
+                val.deptName = val.departmentName // 部门
+                val.createTime = val.createTime.split('.')[0]
+                val.createDate = val.createTime // 发布时间
+              })
+              resourceList.data = res.data.data.list || []
+              resourceTotal.value = res.data.data.total || ''
+              loading.value = false
+            }
           })
+        } else if (paramsGetResources.type !== '数据资源') {
+          if (switchIndex != '分页查询') {
+            paramsGetResources.pageNum = 1
+          }
+          pageWithAttrs(paramsGetResources).then((res) => {
+            console.log('查询列表============>', resourceList, res.data.data)
+            resourceList.data = []
+            videoList.data = []
+            if (Cardsname.value === '基础设施') {
+              resourceList.data = res.data.data.records || []
+              resourceTotal.value = res.data.data.total || ''
+              loading.value = false
+            } else {
+              resourceTotal.value = res.data.data.total || ''
+              getShoppingCartList(res.data.data.records)
+            }
+          })
+        }
+      }
+
+      let shoppingCartList = ref([])
+      // 获取申购车列表
+      const getShoppingCartList = (list) => {
+        getSgcList({
+          pageNum: 1,
+          pageSize: 500,
+          name: '',
+          type: '',
+        }).then((res) => {
+          console.log('申购车列表================>', res.data.data.records)
+          shoppingCartList.value = res.data.data.records
+          list.map((item) => {
+            item.isInShoppingCart = false
+            item.isInShoppingCart = shoppingCartList.value.some((item2) => {
+              return item.id === item2.resourceId
+            })
+          })
+          console.log('经过过滤后的列表信息', list)
+          resourceList.data = list
         })
-        console.log('经过过滤后的列表信息', list)
-        resourceList.data = list
+      }
+      mybus.on('paramsGetResources', (ids) => {
+        if (ids && ids.length > 0) {
+          paramsGetResources.deptIds = ids
+        } else {
+          delete paramsGetResources.deptIds
+        }
+        getAppResources()
+        console.log('paramsGetResources', paramsGetResources)
       })
-    }
-    mybus.on('paramsGetResources', (ids) => {
-      if (ids && ids.length > 0) {
-        paramsGetResources.deptIds = ids
-      } else {
-        delete paramsGetResources.deptIds
+      mybus.on('changePage', (page) => {
+        paramsGetResources.pageNum = page
+        console.log('changePage', paramsGetResources.pageNum)
+        getAppResources('分页查询')
+        console.log('paramsGetResources', paramsGetResources)
+      })
+      mybus.on('changeSelcted', () => {
+        getAppResources()
+      })
+      mybus.on('changeInfo', (info) => {
+        paramsGetResources.pageNum = 1
+        console.log('paramsGetResources.infoList', paramsGetResources.infoList)
+        paramsGetResources.infoList = paramsGetResources.infoList.filter(
+          (item) => item.attrType !== '文件类型'
+        )
+        if (info) {
+          paramsGetResources.infoList.push(info)
+        }
+        getAppResources()
+        console.log('paramsGetResources', paramsGetResources)
+      })
+      mybus.on('refresh', () => {
+        paramsGetResources.pageNum = 1
+        currentPage.value = 1
+        getAppResources()
+      })
+      mybus.on('changeCondition', (condition) => {
+        //  orderField: 'total' total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
+        // orderType: 'ASC'  ASC 升序  DESC 降序
+        paramsGetResources.orderField = condition.orderField
+        paramsGetResources.orderType = condition.orderType
+        getAppResources()
+        console.log('paramsGetResources', paramsGetResources)
+      })
+      const pageChange = (val) => {
+        console.log(val)
+        loading.value = true
+        currentPage.value = val
+        paramsGetResources.pageNum = val
+        let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
+        getAppResources(params)
       }
-      getAppResources()
-      console.log('paramsGetResources', paramsGetResources)
-    })
-    mybus.on('changePage', (page) => {
-      paramsGetResources.pageNum = page
-      console.log('changePage', paramsGetResources.pageNum)
-      getAppResources('分页查询')
-      console.log('paramsGetResources', paramsGetResources)
-    })
-    mybus.on('changeSelcted', () => {
-      getAppResources()
-    })
-    mybus.on('changeInfo', (info) => {
-      paramsGetResources.pageNum = 1
-      console.log('paramsGetResources.infoList', paramsGetResources.infoList)
-      paramsGetResources.infoList = paramsGetResources.infoList.filter(
-        (item) => item.attrType !== '文件类型'
-      )
-      if (info) {
-        paramsGetResources.infoList.push(info)
-      }
-      getAppResources()
-      console.log('paramsGetResources', paramsGetResources)
-    })
-    mybus.on('refresh', () => {
-      paramsGetResources.pageNum = 1
-      currentPage.value = 1
-      getAppResources()
-    })
-    mybus.on('changeCondition', (condition) => {
-      //  orderField: 'total' total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
-      // orderType: 'ASC'  ASC 升序  DESC 降序
-      paramsGetResources.orderField = condition.orderField
-      paramsGetResources.orderType = condition.orderType
-      getAppResources()
-      console.log('paramsGetResources', paramsGetResources)
-    })
-    const pageChange = (val) => {
-      console.log(val)
-      loading.value = true
-      currentPage.value = val
-      paramsGetResources.pageNum = val
-      let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
-      getAppResources(params)
-    }
 
-    onMounted(() => {
-      listKey2.value++;
+      onMounted(() => {
+        listKey2.value++
 
-      // 获取筛选条件
-      getNewList()
+        // 获取筛选条件
+        getNewList()
 
-      if (!tecHnosphere && !appLiCation) {
+        if (!tecHnosphere && !appLiCation) {
+          getAppResources()
+        }
+      })
+
+      // 分页
+      const onShowSizeChange = (current, pageSize) => {
+        currentPage.value = current
+        currentPageSize.value = pageSize
+        paramsGetResources.pageNum = current
+        paramsGetResources.pageSize = pageSize
+        console.log('执行onShowSizeChange', paramsGetResources)
         getAppResources()
       }
-    })
-
-    // 分页
-    const onShowSizeChange = (current, pageSize) => {
-      currentPage.value = current
-      currentPageSize.value = pageSize
-      paramsGetResources.pageNum = current
-      paramsGetResources.pageSize = pageSize
-      console.log('执行onShowSizeChange', paramsGetResources)
-      getAppResources()
-    }
-    watch(currentPageSize, () => {
-      console.log('pageSize', currentPageSize.value)
-    })
-
-    const changeShrink = (name) => {
-      ListContent.records.forEach((val) => {
-        if (val.name === name) {
-          console.log(val)
-          val.shrinkFlag = !val.shrinkFlag
-        }
+      watch(currentPageSize, () => {
+        console.log('pageSize', currentPageSize.value)
       })
-    }
-    const changeCards = (name) => {
-      resourceList.data = []
-      videoList.data = []
-      resourceTotal.value = ''
-      router.currentRoute.value.query.tecHnosphere = ''
-      router.currentRoute.value.query.appLiCation = ''
-      tecHnosphere = router.currentRoute.value.query.tecHnosphere
-      appLiCation = router.currentRoute.value.query.appLiCation
-      let newQuery = JSON.parse(
-        JSON.stringify(router.currentRoute.value.query)
-      )
-      Cardsname.value = name
-      console.log(
-        '更改前url中的select=====================>',
-        router.currentRoute.value.query.select
-      )
-      newQuery.select = Cardsname.value
-      router
-        .replace({
-          query: newQuery,
+
+      const changeShrink = (name) => {
+        ListContent.records.forEach((val) => {
+          if (val.name === name) {
+            console.log(val)
+            val.shrinkFlag = !val.shrinkFlag
+          }
         })
-        .then(() => {
-          console.log(
-            '更改后url中的select=====================>',
-            router.currentRoute.value.query.select
-          )
-          // router.currentRoute.value.query.select
-          tagFlag.value = false
-          chongzhi()
-          getNewList()
-        })
-    }
-    // 监听地址栏变化
-    window.addEventListener('hashchange', () => {
-      location.reload()
-      console.log('URL发生变化了')
-    })
-    return {
-      listKey,
-      ListContent,
-      searchValue,
-      currentPage,
-      ...toRefs(state),
-      changeCards,
-      handleChange,
-      resourceList,
-      videoList,
-      resourceTotal,
-      pageChange,
-      listKey2,
-      Cardsname,
-      getNewList,
-      getAppResources,
-      chongzhi,
-      onSearch,
-      onShowSizeChange,
-      currentPageSize,
-      pageSizeOptions,
-      changeShrink,
-      titleName,
-      keyongziyuanqingkaung,
-      shujuziyuanqingkuang,
-      dianjitiaozhaun,
-      chagneTag,
-      tagFlag,
-      current,
-      openMonitor,
-      stateTags,
-      selStateTags,
-      handleChangeStateTag,
-      // bqTags,
-      selBqTags,
-      handleChangeBqTags,
-      loading,
-      getShoppingCartList,
-      whoShow1,
-    }
-  },
-  components: {
-    HomeHeader,
-    HomeFooter,
-    detailsPageconetentTree,
-    searchResultList,
-    UpOutlined,
-    DownOutlined,
-    KnowledgeBase,
-    // VideoCameraOutlined,
-    // VideoSurveillance,
-    DetailsPageResource,
-    infrastructurePage,
-    detailsPageInfrastructureTree,
-  },
-  beforeUnmount() {
-    mybus.off('selectCardsitem')
-    mybus.off('paramsGetResources')
-    mybus.off('changeCondition')
-    mybus.off('refresh')
-    mybus.off('changePage')
-    mybus.off('changeInfo')
-  },
-})
+      }
+      const changeCards = (name) => {
+        resourceList.data = []
+        videoList.data = []
+        resourceTotal.value = ''
+        router.currentRoute.value.query.tecHnosphere = ''
+        router.currentRoute.value.query.appLiCation = ''
+        tecHnosphere = router.currentRoute.value.query.tecHnosphere
+        appLiCation = router.currentRoute.value.query.appLiCation
+        let newQuery = JSON.parse(
+          JSON.stringify(router.currentRoute.value.query)
+        )
+        Cardsname.value = name
+        console.log(
+          '更改前url中的select=====================>',
+          router.currentRoute.value.query.select
+        )
+        newQuery.select = Cardsname.value
+        router
+          .replace({
+            query: newQuery,
+          })
+          .then(() => {
+            console.log(
+              '更改后url中的select=====================>',
+              router.currentRoute.value.query.select
+            )
+            // router.currentRoute.value.query.select
+            tagFlag.value = false
+            chongzhi()
+            getNewList()
+          })
+      }
+      // 监听地址栏变化
+      window.addEventListener('hashchange', () => {
+        location.reload()
+        console.log('URL发生变化了')
+      })
+      return {
+        listKey,
+        ListContent,
+        searchValue,
+        currentPage,
+        ...toRefs(state),
+        changeCards,
+        handleChange,
+        resourceList,
+        videoList,
+        resourceTotal,
+        pageChange,
+        listKey2,
+        Cardsname,
+        getNewList,
+        getAppResources,
+        chongzhi,
+        onSearch,
+        onShowSizeChange,
+        currentPageSize,
+        pageSizeOptions,
+        changeShrink,
+        titleName,
+        keyongziyuanqingkaung,
+        shujuziyuanqingkuang,
+        dianjitiaozhaun,
+        chagneTag,
+        tagFlag,
+        current,
+        openMonitor,
+        stateTags,
+        selStateTags,
+        handleChangeStateTag,
+        // bqTags,
+        selBqTags,
+        handleChangeBqTags,
+        loading,
+        getShoppingCartList,
+        whoShow1,
+      }
+    },
+    components: {
+      HomeHeader,
+      HomeFooter,
+      detailsPageconetentTree,
+      searchResultList,
+      UpOutlined,
+      DownOutlined,
+      KnowledgeBase,
+      // VideoCameraOutlined,
+      // VideoSurveillance,
+      DetailsPageResource,
+      infrastructurePage,
+      detailsPageInfrastructureTree,
+    },
+    beforeUnmount() {
+      mybus.off('selectCardsitem')
+      mybus.off('paramsGetResources')
+      mybus.off('changeCondition')
+      mybus.off('refresh')
+      mybus.off('changePage')
+      mybus.off('changeInfo')
+    },
+  })
 </script>
 <style lang="less" scoped>
-.resultListSearchInput-father {
-  background: #f3f5f9;
-  padding: 0.2rem;
+  .resultListSearchInput-father {
+    background: #f3f5f9;
+    padding: 0.2rem;
 
-  // padding-left: 0.2rem;
-  // padding-top: 0.2rem;
-  .resultListSearchInput-son {
-    background: #fff;
-    padding: 0.2rem 0.2rem 0rem 0.3rem;
+    // padding-left: 0.2rem;
+    // padding-top: 0.2rem;
+    .resultListSearchInput-son {
+      background: #fff;
+      padding: 0.2rem 0.2rem 0rem 0.3rem;
 
-    .hengxian {
-      width: 100%;
-      height: 0.01rem;
-      background: rgba(150, 144, 144, 0.3);
-      margin-top: 0.2rem;
+      .hengxian {
+        width: 100%;
+        height: 0.01rem;
+        background: rgba(150, 144, 144, 0.3);
+        margin-top: 0.2rem;
+      }
     }
   }
-}
 
-.resultListSearchInput {
-  margin-left: 0.1rem;
+  .resultListSearchInput {
+    margin-left: 0.1rem;
 
-  :deep(.ant-input) {
-    width: 4rem;
-    height: 0.36rem;
-    background: #fff;
-    border-radius: 0.04rem;
+    :deep(.ant-input) {
+      width: 4rem;
+      height: 0.36rem;
+      background: #fff;
+      border-radius: 0.04rem;
+    }
+
+    :deep(.ant-input-search-button) {
+      width: 0.8rem;
+      height: 0.36rem;
+      background: #0087ff;
+      border-radius: 0.04rem !important;
+      font-size: 0.14rem;
+      font-weight: 400;
+      color: #fff;
+      line-height: 0.34rem;
+      margin-left: 0.1rem;
+    }
+
+    :deep(.ant-input-group-addon) {
+      left: 0 !important;
+    }
   }
 
-  :deep(.ant-input-search-button) {
+  .button-reset {
+    border: 0;
+    outline: none;
     width: 0.8rem;
     height: 0.36rem;
-    background: #0087ff;
-    border-radius: 0.04rem !important;
+    background: #e1edfa;
+    border-radius: 0.04rem;
     font-size: 0.14rem;
     font-weight: 400;
-    color: #fff;
+    color: #0087ff;
     line-height: 0.34rem;
-    margin-left: 0.1rem;
-  }
-
-  :deep(.ant-input-group-addon) {
-    left: 0 !important;
-  }
-}
-
-.button-reset {
-  border: 0;
-  outline: none;
-  width: 0.8rem;
-  height: 0.36rem;
-  background: #e1edfa;
-  border-radius: 0.04rem;
-  font-size: 0.14rem;
-  font-weight: 400;
-  color: #0087ff;
-  line-height: 0.34rem;
-  margin-left: 2.5rem;
-  cursor: pointer;
-}
-
-.details-pageconetent {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 0.67rem;
-  position: relative;
-  background: rgba(245, 243, 243, 0.3);
-
-  .details-pageconetent-left {
-    max-height: 6.9rem;
-    position: absolute;
-    width: 2.5rem;
-    top: 0.17rem;
-    left: 2.5rem;
-    margin-right: 0.17rem;
-    overflow: auto;
-  }
-
-  .top {
-    min-height: 7.2rem;
-    position: relative;
-    width: 11.5rem;
-    display: flex;
-    padding-top: 0.2rem;
-    flex-direction: column;
-    font-size: 0.16rem;
-    justify-content: left;
     margin-left: 2.5rem;
-    background: #f3f5f9;
+    cursor: pointer;
+  }
 
-    .pagination {
-      background: #f3f5f9;
-      padding-bottom: 0.6rem;
+  .details-pageconetent {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0.67rem;
+    position: relative;
+    background: rgba(245, 243, 243, 0.3);
+
+    .details-pageconetent-left {
+      max-height: 6.9rem;
+      position: absolute;
+      width: 2.5rem;
+      top: 0.17rem;
+      left: 2.5rem;
+      margin-right: 0.17rem;
+      overflow: auto;
     }
 
-    .jichusheshi {
-      height: 4.45rem;
-
-      .yunziyuan {
-        width: 100%;
-        position: relative;
-
-        .shuoming {
-          position: absolute;
-          right: 0.2rem;
-          top: 0.15rem;
-          font-size: 0.12rem;
-        }
-
-        .yunziyuan-title {
-          display: flex;
-          align-items: center;
-
-          .tupian {}
-
-          .title {
-            margin-left: 0.1rem;
-            font-weight: 600;
-            text-decoration: underline;
-            cursor: pointer;
-          }
-        }
-
-        .fenlei {
-          display: flex;
-          margin-left: 0.2rem;
-          margin-right: 0.3rem;
-          justify-content: space-between;
-        }
-
-        .keyongziyuan {
-          display: flex;
-          justify-content: space-between;
-          margin-left: 0.3rem;
-          margin-right: 0.3rem;
-
-          div {
-            display: flex;
-
-            div:last-child {
-              font-weight: 600;
-            }
-          }
-        }
-      }
-
-      .yunziyuan>div {
-        margin-bottom: 0.1rem;
-      }
-
-      .shipin {
-        width: 100%;
-
-        .shipin-title {
-          display: flex;
-          align-items: center;
-
-          .tupian {}
-
-          .title {
-            margin-left: 0.1rem;
-            font-weight: 600;
-            text-decoration: underline;
-            cursor: pointer;
-          }
-        }
-
-        .fenlei {
-          display: flex;
-          margin-left: 0.2rem;
-
-          div {
-            margin-right: 0.6rem;
-          }
-
-          .shuzi {
-            font-weight: 600;
-          }
-        }
-      }
-
-      .shipin>div {
-        margin-bottom: 0.1rem;
-      }
-    }
-
-    .jichusheshi>div {
-      padding-top: 0.1rem;
-      border-radius: 0.04rem;
-      margin-bottom: 0.2rem;
-      padding-bottom: 0.4rem;
-    }
-
-    .shujuziyuan {
+    .top {
+      min-height: 7.2rem;
+      position: relative;
+      width: 11.5rem;
       display: flex;
+      padding-top: 0.2rem;
       flex-direction: column;
-      justify-content: center;
-      padding-top: 0.4rem;
+      font-size: 0.16rem;
+      justify-content: left;
+      margin-left: 2.5rem;
+      background: #f3f5f9;
 
-      .yunziyuan {
-        width: 100%;
-        position: relative;
+      .pagination {
+        background: #f3f5f9;
+        padding-bottom: 0.6rem;
+      }
 
-        .shuoming {
-          position: absolute;
-          right: 0.2rem;
-          top: 0.15rem;
-          font-size: 0.12rem;
-        }
+      .jichusheshi {
+        height: 4.45rem;
 
-        .yunziyuan-title {
-          display: flex;
-          align-items: center;
-          margin-left: 0.2rem;
+        .yunziyuan {
+          width: 100%;
+          position: relative;
 
-          .tupian {}
+          .shuoming {
+            position: absolute;
+            right: 0.2rem;
+            top: 0.15rem;
+            font-size: 0.12rem;
+          }
 
-          .title {
-            margin-left: 0.1rem;
-            font-weight: 600;
-            text-decoration: underline;
-            cursor: pointer;
+          .yunziyuan-title {
+            display: flex;
+            align-items: center;
+
+            .tupian {
+            }
+
+            .title {
+              margin-left: 0.1rem;
+              font-weight: 600;
+              text-decoration: underline;
+              cursor: pointer;
+            }
+          }
+
+          .fenlei {
+            display: flex;
+            margin-left: 0.2rem;
+            margin-right: 0.3rem;
+            justify-content: space-between;
+          }
+
+          .keyongziyuan {
+            display: flex;
+            justify-content: space-between;
+            margin-left: 0.3rem;
+            margin-right: 0.3rem;
+
+            div {
+              display: flex;
+
+              div:last-child {
+                font-weight: 600;
+              }
+            }
           }
         }
 
-        .fenlei {
-          display: flex;
-          margin-left: 0.2rem;
-          margin-right: 0.3rem;
-          justify-content: space-between;
+        .yunziyuan > div {
+          margin-bottom: 0.1rem;
         }
 
-        .keyongziyuan {
-          display: flex;
-          justify-content: space-between;
-          margin-left: 0.3rem;
-          margin-right: 0.3rem;
+        .shipin {
+          width: 100%;
 
-          div {
+          .shipin-title {
             display: flex;
+            align-items: center;
 
-            div:last-child {
+            .tupian {
+            }
+
+            .title {
+              margin-left: 0.1rem;
+              font-weight: 600;
+              text-decoration: underline;
+              cursor: pointer;
+            }
+          }
+
+          .fenlei {
+            display: flex;
+            margin-left: 0.2rem;
+
+            div {
+              margin-right: 0.6rem;
+            }
+
+            .shuzi {
               font-weight: 600;
             }
           }
         }
+
+        .shipin > div {
+          margin-bottom: 0.1rem;
+        }
       }
 
-      .yunziyuan>div {
-        margin-bottom: 0.1rem;
-      }
-    }
-
-    .shujuziyuan>div {
-      background: #eaf4ff;
-      padding-top: 0.1rem;
-      border-radius: 0.04rem;
-      margin-bottom: 0.2rem;
-      padding-bottom: 0.4rem;
-    }
-
-    .top-title {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 0.2rem;
-      font-family: 'Alibaba PuHuiTi';
-      color: #000000;
-      line-height: 0.34rem;
-
-      .photo {
-        display: inline-block;
-        height: 0.44rem;
-        width: 0.44rem;
-        margin-right: 0.1rem;
+      .jichusheshi > div {
+        padding-top: 0.1rem;
+        border-radius: 0.04rem;
+        margin-bottom: 0.2rem;
+        padding-bottom: 0.4rem;
       }
 
-      div {
-        margin: 0 0.2rem;
-        padding: 0 0.1rem;
-        cursor: pointer;
+      .shujuziyuan {
         display: flex;
-        align-items: center;
-      }
+        flex-direction: column;
+        justify-content: center;
+        padding-top: 0.4rem;
 
-      div:hover {
-        color: #0087ff;
-      }
-
-      .sel {
-        font-weight: 600;
-        color: #0087ff;
-        border-bottom: 0.02rem solid #0087ff;
-      }
-    }
-
-    .top-content-father {
-      width: 100%;
-      padding: 0 0.2rem 0.2rem 0.2rem;
-      background: #f3f5f9;
-      margin-bottom: 0.2rem;
-
-      .top-content-son {
-        background: #fff;
-        padding: 0.2rem 0;
-      }
-
-      .top-content {
-        display: flex;
-        margin-top: 0rem;
-
-        span:nth-child(1) {
-          display: inline-block;
+        .yunziyuan {
+          width: 100%;
           position: relative;
-          line-height: 0.3614rem;
-          white-space: normal;
-          text-align: center;
-          vertical-align: middle;
-        }
 
-        .leixingsumfather {
-          width: 8.1rem;
-          display: inline-block;
-          height: 0.3014rem;
-          overflow: hidden;
-        }
+          .shuoming {
+            position: absolute;
+            right: 0.2rem;
+            top: 0.15rem;
+            font-size: 0.12rem;
+          }
 
-        .leixingsumfather2 {
-          width: 9.2rem;
-        }
-
-        .leixingsum {
-          display: inline-block;
-          cursor: pointer;
-          text-align: center;
-          margin-top: 0.05rem;
-
-          .ant-tag-checkable {
-            width: 0.83rem;
-            height: 0.25rem;
+          .yunziyuan-title {
             display: flex;
-            justify-content: center;
             align-items: center;
-            padding-left: 0.05rem;
-            padding-right: 0.05rem;
-            float: left;
-            margin: 0 0.15rem;
-            font-family: 'AlibabaPuHuiTiR';
-            font-size: 0.14rem;
-            color: #333333;
-            font-weight: 500;
-            text-align: center;
-            line-height: 0.14rem;
+            margin-left: 0.2rem;
+
+            .tupian {
+            }
+
+            .title {
+              margin-left: 0.1rem;
+              font-weight: 600;
+              text-decoration: underline;
+              cursor: pointer;
+            }
           }
 
-          :deep(.ant-tag-checkable-checked) {
-            margin-left: 0.15rem;
-            margin-right: 0.15rem;
-            text-align: center;
+          .fenlei {
+            display: flex;
+            margin-left: 0.2rem;
+            margin-right: 0.3rem;
+            justify-content: space-between;
           }
 
-          .ant-tag-checkable:active,
-          .ant-tag-checkable-checked {
-            width: 0.85rem;
-            font-family: 'Alibaba PuHuiTi';
+          .keyongziyuan {
+            display: flex;
+            justify-content: space-between;
+            margin-left: 0.3rem;
+            margin-right: 0.3rem;
+
+            div {
+              display: flex;
+
+              div:last-child {
+                font-weight: 600;
+              }
+            }
+          }
+        }
+
+        .yunziyuan > div {
+          margin-bottom: 0.1rem;
+        }
+      }
+
+      .shujuziyuan > div {
+        background: #eaf4ff;
+        padding-top: 0.1rem;
+        border-radius: 0.04rem;
+        margin-bottom: 0.2rem;
+        padding-bottom: 0.4rem;
+      }
+
+      .top-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 0.2rem;
+        font-family: 'Alibaba PuHuiTi';
+        color: #000000;
+        line-height: 0.34rem;
+
+        .photo {
+          display: inline-block;
+          height: 0.44rem;
+          width: 0.44rem;
+          margin-right: 0.1rem;
+        }
+
+        div {
+          margin: 0 0.2rem;
+          padding: 0 0.1rem;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+        }
+
+        div:hover {
+          color: #0087ff;
+        }
+
+        .sel {
+          font-weight: 600;
+          color: #0087ff;
+          border-bottom: 0.02rem solid #0087ff;
+        }
+      }
+
+      .top-content-father {
+        width: 100%;
+        padding: 0 0.2rem 0.2rem 0.2rem;
+        background: #f3f5f9;
+        margin-bottom: 0.2rem;
+
+        .top-content-son {
+          background: #fff;
+          padding: 0.2rem 0;
+        }
+
+        .top-content {
+          display: flex;
+          margin-top: 0rem;
+
+          span:nth-child(1) {
+            display: inline-block;
+            position: relative;
+            line-height: 0.3614rem;
+            white-space: normal;
+            text-align: center;
+            vertical-align: middle;
+          }
+
+          .leixingsumfather {
+            width: 8.1rem;
+            display: inline-block;
+            height: 0.3014rem;
+            overflow: hidden;
+          }
+
+          .leixingsumfather2 {
+            width: 9.2rem;
+          }
+
+          .leixingsum {
+            display: inline-block;
+            cursor: pointer;
+            text-align: center;
+            margin-top: 0.05rem;
+
+            .ant-tag-checkable {
+              width: 0.83rem;
+              height: 0.25rem;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding-left: 0.05rem;
+              padding-right: 0.05rem;
+              float: left;
+              margin: 0 0.15rem;
+              font-family: 'AlibabaPuHuiTiR';
+              font-size: 0.14rem;
+              color: #333333;
+              font-weight: 500;
+              text-align: center;
+              line-height: 0.14rem;
+            }
+
+            :deep(.ant-tag-checkable-checked) {
+              margin-left: 0.15rem;
+              margin-right: 0.15rem;
+              text-align: center;
+            }
+
+            .ant-tag-checkable:active,
+            .ant-tag-checkable-checked {
+              width: 0.85rem;
+              font-family: 'Alibaba PuHuiTi';
+              font-weight: 500;
+              background-color: #0087ff;
+              color: #ffffff;
+              border-radius: 0.16rem;
+            }
+          }
+
+          .active {
+            font-family: Alibaba PuHuiTi;
             font-weight: 500;
             background-color: #0087ff;
             color: #ffffff;
-            border-radius: 0.16rem;
           }
         }
 
-        .active {
-          font-family: Alibaba PuHuiTi;
+        .top-content:nth-child(1) {
+          margin-top: 0rem !important;
+        }
+      }
+    }
+  }
+
+  .shrinkTag {
+    width: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    margin-bottom: 0.05rem;
+
+    span {
+      cursor: pointer;
+    }
+  }
+
+  .shrink {
+    height: unset !important;
+    overflow: unset !important;
+  }
+
+  .talk-monitor {
+    position: fixed;
+    bottom: 0.5rem;
+    right: 0.1rem;
+    z-index: 9999;
+    cursor: pointer;
+
+    i {
+      width: 0.64rem;
+      height: 0.64rem;
+      display: inline-block;
+      background: url('~@/assets/home/icon-talk.png');
+      background-size: cover;
+    }
+  }
+
+  .top-content-father {
+    width: 10.87rem;
+    padding-left: 0.2rem;
+
+    // margin-bottom: .2rem;
+    .top-content {
+      display: flex;
+      margin-top: 0.23rem;
+
+      span:nth-child(1) {
+        display: inline-block;
+        position: relative;
+        width: 0.68rem;
+        font-weight: 600;
+        white-space: normal;
+        text-align: center;
+        vertical-align: middle;
+        font-size: 0.16rem;
+        margin-left: 0.3rem;
+      }
+
+      // .top-content-title {
+      //   top: -0.2rem;
+      // }
+      .leixingsumfather {
+        width: 7.7rem;
+        display: inline-block;
+        height: 0.3014rem;
+        overflow: hidden;
+        // width: 7.18rem;
+      }
+
+      .leixingsum {
+        width: 0.93rem;
+        display: inline-block;
+        cursor: pointer;
+        text-align: center;
+        margin-top: 0.05rem;
+
+        // margin-bottom: .1rem;
+        .ant-tag-checkable {
+          width: 0.85rem;
+          height: 0.25rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding-left: 0.05rem;
+          padding-right: 0.05rem;
+          float: left;
+          margin: 0 0.15rem;
+          font-family: 'AlibabaPuHuiTiR';
+          font-size: 0.14rem;
+          color: #333333;
+          font-weight: 500;
+          text-align: center;
+          line-height: 0.14rem;
+        }
+
+        :deep(.ant-tag-checkable-checked) {
+          // width: .67rem;
+          margin-left: 0.15rem;
+          margin-right: 0.15rem;
+          text-align: center;
+        }
+
+        .ant-tag-checkable:active,
+        .ant-tag-checkable-checked {
+          width: 0.85rem;
+          font-family: 'Alibaba PuHuiTi';
           font-weight: 500;
           background-color: #0087ff;
           color: #ffffff;
+          border-radius: 0.16rem;
         }
       }
 
-      .top-content:nth-child(1) {
-        margin-top: 0rem !important;
-      }
-    }
-  }
-}
-
-.shrinkTag {
-  width: 0.5rem;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  margin-bottom: 0.05rem;
-
-  span {
-    cursor: pointer;
-  }
-}
-
-.shrink {
-  height: unset !important;
-  overflow: unset !important;
-}
-
-.talk-monitor {
-  position: fixed;
-  bottom: 0.5rem;
-  right: 0.1rem;
-  z-index: 9999;
-  cursor: pointer;
-
-  i {
-    width: 0.64rem;
-    height: 0.64rem;
-    display: inline-block;
-    background: url('~@/assets/home/icon-talk.png');
-    background-size: cover;
-  }
-}
-
-.top-content-father {
-  width: 10.87rem;
-  padding-left: 0.2rem;
-
-  // margin-bottom: .2rem;
-  .top-content {
-    display: flex;
-    margin-top: 0.23rem;
-
-    span:nth-child(1) {
-      display: inline-block;
-      position: relative;
-      width: 0.68rem;
-      font-weight: 600;
-      white-space: normal;
-      text-align: center;
-      vertical-align: middle;
-      font-size: 0.16rem;
-      margin-left: 0.3rem;
-    }
-
-    // .top-content-title {
-    //   top: -0.2rem;
-    // }
-    .leixingsumfather {
-      width: 7.7rem;
-      display: inline-block;
-      height: 0.3014rem;
-      overflow: hidden;
-      // width: 7.18rem;
-    }
-
-    .leixingsum {
-      width: 0.93rem;
-      display: inline-block;
-      cursor: pointer;
-      text-align: center;
-      margin-top: 0.05rem;
-
-      // margin-bottom: .1rem;
-      .ant-tag-checkable {
-        width: 0.85rem;
-        height: 0.25rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-left: 0.05rem;
-        padding-right: 0.05rem;
-        float: left;
-        margin: 0 0.15rem;
-        font-family: 'AlibabaPuHuiTiR';
-        font-size: 0.14rem;
-        color: #333333;
-        font-weight: 500;
-        text-align: center;
-        line-height: 0.14rem;
-      }
-
-      :deep(.ant-tag-checkable-checked) {
-        // width: .67rem;
-        margin-left: 0.15rem;
-        margin-right: 0.15rem;
-        text-align: center;
-      }
-
-      .ant-tag-checkable:active,
-      .ant-tag-checkable-checked {
-        width: 0.85rem;
-        font-family: 'Alibaba PuHuiTi';
+      .active {
+        font-family: Alibaba PuHuiTi;
         font-weight: 500;
         background-color: #0087ff;
         color: #ffffff;
-        border-radius: 0.16rem;
       }
     }
 
-    .active {
-      font-family: Alibaba PuHuiTi;
-      font-weight: 500;
-      background-color: #0087ff;
-      color: #ffffff;
+    .top-content:nth-child(1) {
+      margin-top: 0.41rem !important;
     }
   }
 
-  .top-content:nth-child(1) {
-    margin-top: 0.41rem !important;
+  :deep(.ant-card-grid) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
   }
-}
-
-:deep(.ant-card-grid) {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 1;
-}
 </style>
diff --git a/front/src/views/home/apply.vue b/front/src/views/home/apply.vue
index 36221256..8683e7da 100644
--- a/front/src/views/home/apply.vue
+++ b/front/src/views/home/apply.vue
@@ -220,7 +220,7 @@
             <div>
               <img src="../../assets/home/success.png" alt="" />
             </div>
-            <p>您已成功申请能力,请耐心等待审批结果，结果会第一时间通知您！</p>
+            <p>您已成功申请能力，请耐心等待审批结果，结果会第一时间通知您！</p>
           </div>
         </div>
       </article>
@@ -290,7 +290,7 @@
           ? list.value[0].children
               .filter((val) => val.id == list.value[0].checkedList[0])[0]
               .resourceName.concat(
-                list.value[0].checkedList.length > 0
+                list.value[0].checkedList.length > 1
                   ? '等能力申请' + num.value + '个'
                   : '能力申请'
               )
@@ -452,8 +452,22 @@
                   sgcDel({ ids: ids }).then((res) => {
                     if (res.data.msg === 'success') {
                       mybus.emit('getSgcNum')
+
+                      router.push({
+                        path: '/DetailsPageconetent',
+                        query: {
+                          select: '组件服务',
+                        },
+                      })
                     }
                   })
+                } else {
+                  router.push({
+                    path: '/DetailsPageconetent',
+                    query: {
+                      select: '组件服务',
+                    },
+                  })
                 }
               })
             }
diff --git a/front/src/views/home/components/KnowledgeBase.vue b/front/src/views/home/components/KnowledgeBase.vue
index d3724da5..74842d04 100644
--- a/front/src/views/home/components/KnowledgeBase.vue
+++ b/front/src/views/home/components/KnowledgeBase.vue
@@ -51,7 +51,7 @@
 <script setup>
   import { ref, reactive, defineProps } from 'vue'
   import mybus from '@/myplugins/mybus'
-  import { updateVisits } from '@/api/home'
+  import { updateVisits, browsingInsert } from '@/api/home'
   const props = defineProps({
     resourceList: { type: Array, default: null },
     resourceTotal: { type: String, default: '' },
@@ -66,6 +66,9 @@
   const openHref = (item) => {
     console.log(item.id, 'wowowo')
     console.log(item.visits, 'wowowo')
+    browsingInsert({ resourceId: item.id }).then((res) => {
+      // console.log(res)
+    })
     const arrList = ref([])
     arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
     if (arrList.value.indexOf(item.id) === -1) {
diff --git a/front/src/views/home/components/header.vue b/front/src/views/home/components/header.vue
index 98d01d4a..2747ebff 100644
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@@ -7,7 +7,8 @@
     ]"
   >
     <div class="name">
-      <div class="name-bg"></div>
+      <div class="name-bg" v-if="!whoShow1.itShowXiHaiAn"></div>
+      <div class="name-bg-xihaian" v-else></div>
       城市云脑通用能力服务平台
     </div>
     <div
@@ -137,6 +138,7 @@
   //   // { name: '后台管理', key: 'houtaiguanli' },
   //   { name: '赋能案例', key: 'assignCase' },
   // ])
+  const whoShow1 = whoShow
   const user = ref({
     username: store.getters['user/username'],
   })
@@ -353,6 +355,14 @@
         background-size: 100%;
         margin-right: 0.15rem;
       }
+      .name-bg-xihaian {
+        height: 0.6rem;
+        width: 0.6rem;
+        background: url('~@/assets/newHome/newHome-title-bg-xihaian.png')
+          no-repeat;
+        background-size: 100%;
+        margin-right: 0.15rem;
+      }
     }
     .nav {
       width: 1.2rem;
diff --git a/front/src/views/home/components/searchResultList.vue b/front/src/views/home/components/searchResultList.vue
index 14844329..8444e1a0 100644
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@@ -50,6 +50,24 @@
       :key="item.index"
     >
       <div class="item" :key="showKey">
+        <div
+          class="left"
+          style="display: flex; align-items: center"
+          v-if="
+            item.type === '应用资源' &&
+            item.infoList &&
+            item.infoList.filter((val) => val.attrType == '应用图片')[0]
+          "
+        >
+          <a-image
+            :width="106"
+            :preview="false"
+            :src="
+              item.infoList.filter((val) => val.attrType == '应用图片')[0]
+                .attrValue
+            "
+          />
+        </div>
         <div
           class="left"
           :class="
@@ -78,7 +96,7 @@
               ? 'ywzj'
               : ''
           "
-          v-if="
+          v-else-if="
             selectCardsname !== '基础设施' && selectCardsname !== '融合服务'
           "
         ></div>
diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
index 52a511b2..cb792e31 100644
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@@ -415,13 +415,13 @@
   const getCamera = () => {
     console.log('初始化调用')
     console.log('不选左侧树的时候不调用接口', mapSearchParam.value)
-    if (mapSearchParam.value.parentId) {
-      getCameraByParentId(mapSearchParam.value).then((res) => {
-        console.log('RRRRRRRRRR', res.data.data)
-        dataSource.value = res.data.data
-        pagination.value.total = res.data.count
-      })
-    }
+    // if (mapSearchParam.value.parentId) {
+    getCameraByParentId(mapSearchParam.value).then((res) => {
+      console.log('RRRRRRRRRR', res.data.data)
+      dataSource.value = res.data.data
+      pagination.value.total = res.data.count
+    })
+    // }
   }
   //加入申购车
   const addShoppingCart = () => {
diff --git a/front/src/views/personalCenter/VueTemplateDemo.vue b/front/src/views/personalCenter/VueTemplateDemo.vue
index 10f12b37..88753664 100644
--- a/front/src/views/personalCenter/VueTemplateDemo.vue
+++ b/front/src/views/personalCenter/VueTemplateDemo.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-19 17:18:48
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-05-06 19:11:32
+ * @LastEditTime: 2022-07-16 15:01:48
  * @Description: markdown编辑器
 -->
 <template>
@@ -44,7 +44,7 @@
       }
     },
     created() {
-      this.uuidSplice()
+      // this.uuidSplice()
       this.getDevelopmentFile()
     },
     methods: {
@@ -92,12 +92,15 @@
         const blob = new Blob([file], {
           type: 'md',
         })
-        let myfile = new File([blob], this.uuidSnum + '.md')
+        if (this.uuidSnum === '') {
+          this.uuidSplice()
+        }
+        let myfile = new File([blob], this.uuidSnum)
         var formData = new FormData()
         const type = pinyin(this.dataFrom.type, {
           pattern: 'initial',
         }).replace(/\s*/g, '')
-        formData.append('fileName', this.uuidSnum + '.md')
+        formData.append('fileName', this.uuidSnum)
         formData.append('type', type)
         formData.append('file', myfile) // 'file' 为HTTP Post里的字段名, file 对浏览器里的File对象
         // formData.append('name', this.route.currentRoute.query.id + '.md')
@@ -118,22 +121,33 @@
         }
       },
       async getDevelopmentFile() {
+        debugger
+        const uuidParam = this.dataFrom.infoList.filter((item) => {
+          if (item.attrType === '技术文档') {
+            return item
+          }
+        })
+        let uuid = ''
+        if (uuidParam[0].attrValue) {
+          uuid = uuidParam[0].attrValue.split('/')[1].split('.')[0]
+        }
+        this.uuidSnum = uuid
         const type = pinyin(this.dataFrom.type, {
           pattern: 'initial',
         }).replace(/\s*/g, '')
         console.log(type)
         const param = {
           type: type,
-          resourceId: this.uuidSnum,
+          resourceId: uuid,
         }
         const res = await getDevelopmentFile(param)
         this.text = res.data
-        let infoList = {
-          attrType: '技术文档',
-          attrValue: this.text.data,
-          delFlag: 0,
-        }
-        mybus.emit('chageDataFrom', infoList)
+        // let infoList = {
+        //   attrType: '技术文档',
+        //   attrValue: this.text.data,
+        //   delFlag: 0,
+        // }
+        // mybus.emit('chageDataFrom', infoList)
         console.log('res', res)
       },
     },
diff --git a/front/src/views/personalCenter/components/ApplyDetails.vue b/front/src/views/personalCenter/components/ApplyDetails.vue
index 9a60c7b0..5f16d41f 100644
--- a/front/src/views/personalCenter/components/ApplyDetails.vue
+++ b/front/src/views/personalCenter/components/ApplyDetails.vue
@@ -23,7 +23,13 @@
       <div class="title">审批详情</div>
       <template v-for="item in dataSource.data" :key="item">
         <div class="oddNumbers">子单号:{{ item[0] }}</div>
-        <a-table :dataSource="item[1]" :columns="columns" />
+        <a-table :dataSource="item[1]" :columns="columns">
+          <template #bodyCell="{ column, text }">
+            <template v-if="column.dataIndex === 'name'">
+              <a>{{ text }}</a>
+            </template>
+          </template>
+        </a-table>
       </template>
     </div>
   </div>
@@ -183,14 +189,12 @@
         } else {
           shifoushizujian.value = false
           console.log(res.data.data.resourceDTO)
-          debugger
           res.data.data.resourceDTO.infoList.forEach((val) => {
             console.log(val, '111111111111111111111111')
             if (val.attrValue === '智能算法') {
               nameNotShow.value = true
               algorithmShow.value = false
               console.log(nameNotShow.value, algorithmShow.value, 'wowowo')
-              debugger
             }
           })
         }
@@ -268,6 +272,13 @@
     text-align: center;
     font-size: 16px;
   }
+  :deep(.ant-table-tbody) > tr > .ant-table-cell:nth-child(5) {
+    width: 110px;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .oddNumbers {
     margin-bottom: 0.05rem;
   }
diff --git a/front/src/views/personalCenter/components/MyBrowse.vue b/front/src/views/personalCenter/components/MyBrowse.vue
index 7cc980a6..eb3bab46 100644
--- a/front/src/views/personalCenter/components/MyBrowse.vue
+++ b/front/src/views/personalCenter/components/MyBrowse.vue
@@ -44,7 +44,9 @@
           >
             <template #title>
               <span
-                @click="showItem(item.resourceId, item.type, item.delFlag)"
+                @click="
+                  showItem(item.resourceId, item.type, item.delFlag, item)
+                "
                 style="cursor: pointer"
                 class="name"
               >
@@ -142,6 +144,7 @@
   import { onMounted, ref } from 'vue'
   import { useRouter } from 'vue-router'
   import { message } from 'ant-design-vue'
+  import { updateVisits, browsingInsert } from '@/api/home'
   import mybus from '@/myplugins/mybus'
   import { getBsList, BsDel, getTopCategory } from '@/api/personalCenter'
   const router = useRouter()
@@ -171,7 +174,11 @@
       console.log('编目一级=============>', res.data)
       res.data.data.forEach((val) => {
         // tabList.value.push(val.name)
-        if (val.name == '应用资源' || val.name == '组件服务') {
+        if (
+          val.name == '应用资源' ||
+          val.name == '组件服务' ||
+          val.name == '知识库'
+        ) {
           tabList.value.push(val.name)
         }
       })
@@ -234,7 +241,9 @@
           name: val.resourceDTO.name,
           id: val.id,
           checked: false,
+          visits: val.resourceDTO.visits,
           type: val.resourceDTO.type,
+          link: val.resourceDTO.link,
           resourceId: val.resourceId,
           createDate: val.createDate,
           description: val.resourceDTO.description,
@@ -267,6 +276,28 @@
     console.log('search======================>', name.value)
   }
 
+  const openHref = (item) => {
+    browsingInsert({ resourceId: item.resourceId }).then((res) => {
+      // console.log(res)
+    })
+    const arrList = ref([])
+    arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+    if (arrList.value.indexOf(item.resourceId) === -1) {
+      arrList.value.push(item.resourceId)
+      updateVisits({
+        id: item.resourceId,
+        visits: item.visits || '0',
+      }).then(() => {
+        window.sessionStorage.setItem('visits', JSON.stringify(arrList.value))
+      })
+    }
+    window.open(item.link)
+    // window.open(
+    //   window.SITE_CONFIG.previewUrl +
+    //     'hisense_office/onlinePreview?url=' +
+    //     btoa(encodeURI(item.fileHref))
+    // )
+  }
   //申请id
   const dataResourceId = ref([])
 
@@ -334,16 +365,20 @@
     console.log(e)
   }
   // 详情
-  const showItem = (id, type, delFlag) => {
+  const showItem = (id, type, delFlag, item) => {
     if (delFlag == 0) {
-      console.log('进入详情')
-      mybus.emit('tabsChange', { flag: id })
-      router.push({
-        path: '/details',
-        query: {
-          id: id,
-        },
-      })
+      console.log('进入详情', item)
+      if (item.type === '知识库') {
+        openHref(item)
+      } else {
+        mybus.emit('tabsChange', { flag: id })
+        router.push({
+          path: '/details',
+          query: {
+            id: id,
+          },
+        })
+      }
     }
   }
 </script>
@@ -374,6 +409,13 @@
       span {
         margin-right: 0.3rem;
       }
+      .name {
+        max-width: 11rem;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
   .ant-list::-webkit-scrollbar {
diff --git a/front/src/views/personalCenter/components/PurchaseVehicle.vue b/front/src/views/personalCenter/components/PurchaseVehicle.vue
index 2ce412ad..44ccfa72 100644
--- a/front/src/views/personalCenter/components/PurchaseVehicle.vue
+++ b/front/src/views/personalCenter/components/PurchaseVehicle.vue
@@ -68,8 +68,8 @@
       </a-button>
     </div>
   </div>
-  <div class="items">
-    <div class="item" v-for="val in list" :key="val.id">
+  <div class="items" :key="showKey">
+    <div class="item" v-for="(val, valIndex) in list" :key="val.id">
       <div class="item-top" @click="showBottom(val)">
         <div>
           <a-checkbox
@@ -89,7 +89,6 @@
           :loading="val.initLoading"
           item-layout="horizontal"
           :data-source="val.children"
-          :key="showKey"
         >
           <template #renderItem="{ item }">
             <a-list-item>
@@ -131,7 +130,7 @@
                         title="是否删除该记录?"
                         ok-text="是"
                         cancel-text="否"
-                        @confirm="delOne(item)"
+                        @confirm="delOne(item, valIndex)"
                         @cancel="cancel"
                       >
                         <a-button
@@ -453,7 +452,7 @@
     reverseSelectionFalg.value = !reverseSelectionFalg.value
   }
   // 重置
-  const clean = () => {
+  const clean = (index) => {
     name.value = ''
     type.value = ''
     pageNum.value = '1'
@@ -463,10 +462,10 @@
     checkedListAll.value = []
     checkAll.value = false
     showKey.value++
-    getList()
+    getList('', index)
   }
   // 获取信息
-  const getList = (type) => {
+  const getList = (type, index) => {
     if (type == 'init') {
       pageNum.value = 1
       pageSize.value = 99999
@@ -491,7 +490,7 @@
         val.pageNum = '1'
         val.pageSize = '99999'
       })
-      if (statistics == res.data.data.list.length) {
+      if (statistics != 0 && statistics == res.data.data.list.length) {
         checkAll.value = true
       }
       if (list.value.length == 0) {
@@ -501,8 +500,31 @@
         load.value = Number(pageNum.value)
       }
       // console.log('整体页面加载次数===============>', load.value)
+      // 判断是否有已打开项，如果有重新载入之后自动打开
+      debugger
       list.value = res.data.data.list
+      if (index || index === 0) {
+        debugger
+        list.value[index].show = true
+        // console.log('1111', list.value[index])
+        showNew(list.value[index])
+        // showBottom()
+      }
+      // list.value = res.data.data.list
+      console.log(
+        '重新请求值',
+        index,
+        // res.data.data.list[index].show,
+        list.value
+      )
+
       total.value = res.data.data.deptCount
+      console.log(
+        '重新请求值2',
+        index,
+        // res.data.data.list[index].show,
+        list.value
+      )
       showKey.value++
       if (type == 'init' || type == 'changePage') {
         getListByDeptId(list.value[0])
@@ -573,11 +595,15 @@
   }
   // 显示资源信息
   const showBottom = (item) => {
+    debugger
     item.show = !item.show
     if (item.show) {
       getListByDeptId(item)
     }
   }
+  const showNew = (item) => {
+    getListByDeptId(item)
+  }
   // 切换页数
   const pageChange = (val) => {
     checkAll.value = false
@@ -642,13 +668,13 @@
   }
   // 判断是否全选
   const judgeAll = (item, val) => {
-    // console.log(
-    //   '判断是否全选============>',
-    //   item,
-    //   val,
-    //   list.value,
-    //   checkedList.value
-    // )
+    console.log(
+      '判断是否全选============>',
+      item,
+      val,
+      list.value,
+      checkedList.value
+    )
     if (!val) {
       let all = true
       list.value.map((val) => {
@@ -734,7 +760,7 @@
     }
   }
 
-  const delOne = (item) => {
+  const delOne = (item, index) => {
     // console.log(item)
     sgcDel({
       ids: [item.id],
@@ -743,7 +769,8 @@
         message.success('删除成功')
         // console.log('删除申购车列表================>', res)
         mybus.emit('getSgcNum')
-        clean()
+        clean(index)
+        // val.show = true
       }
     })
   }
