diff --git a/back/src/views/modules/ability/bsabilityai.vue b/back/src/views/modules/ability/bsabilityai.vue
index 7d38f206..4e4d4ee8 100644
--- a/back/src/views/modules/ability/bsabilityai.vue
+++ b/back/src/views/modules/ability/bsabilityai.vue
@@ -55,12 +55,16 @@
           width="50"
         ></el-table-column>
         <af-table-column
+          :show-overflow-tooltip="true"
+          width="280"
           prop="name"
           label="组件名称"
           header-align="center"
           align="center"
         ></af-table-column>
         <af-table-column
+        :show-overflow-tooltip="true"
+          width="300"
           v-for="(item, index) in dataList[0].infoList"
           :key="index"
           :label="item.attrType"
@@ -126,32 +130,32 @@
 </template>
 
 <script>
-import mixinViewModule from "@/mixins/view-module";
-import AddOrUpdate from "./bsabilityai-add-or-update";
-import dictionaries from "@/utils/dictionaries";
-import qs from "qs";
-import RelateApplication from "./bsabilityai-relate-application.vue"
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './bsabilityai-add-or-update'
+import dictionaries from '@/utils/dictionaries'
+import qs from 'qs'
+import RelateApplication from './bsabilityai-relate-application.vue'
 export default {
   mixins: [mixinViewModule],
-  data() {
+  data () {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: "/resource/page",
+        getDataListURL: '/resource/page',
         getDataListIsPage: true,
-        exportURL: "/ability/bsabilityai/export",
-        deleteURL: "/resource/delete",
-        deleteIsBatch: true,
+        exportURL: '/ability/bsabilityai/export',
+        deleteURL: '/resource/delete',
+        deleteIsBatch: true
       },
       disabled: false,
       sceneArr: dictionaries.sceneArr,
       fieldArr: dictionaries.fieldArr,
       shareFormArr: dictionaries.shareFormArr,
       dataForm: {
-        name: "",
-        creator: "",
+        name: '',
+        creator: '',
         delFlag: 0,
         selectType: 0,
-        type: "组件服务",
+        type: '组件服务'
       },
       qp: false,
       // 关联应用弹窗
@@ -161,190 +165,193 @@ export default {
         responseData: {},
         linkType: ''
       }
-    };
+    }
   },
   watch: {},
   components: {
     AddOrUpdate,
     RelateApplication
   },
-  created() {
-    this.dataForm.name = "";
-    this.dataForm.type = "组件服务";
+  created () {
+    this.dataForm.name = ''
+    this.dataForm.type = '组件服务'
   },
-  mounted() {
-    window.addEventListener("resize", this.a);
-    this.fullScreen();
+  mounted () {
+    window.addEventListener('resize', this.a)
+    this.fullScreen()
   },
   methods: {
-    reset() {
+    reset () {
       this.$http
         .get(
           this.mixinViewModuleOptions.getDataListURL +
-            "?" +
+            '?' +
             qs.stringify({
               // order: this.order,
               // orderField: this.orderField,
               // type: '组件服务',
               page: 1,
               limit: 10,
-              creator: "",
+              creator: '',
               selectType: 0,
               delFlag: 0,
-              type: "组件服务",
-              name: "",
+              type: '组件服务',
+              name: ''
             })
         )
         .then(({ data: res }) => {
-          this.dataForm.name = "";
+          this.dataForm.name = ''
           if (res.code !== 0) {
-            this.dataList = [];
-            this.total = 0;
-            return this.$message.error(res.msg);
+            this.dataList = []
+            this.total = 0
+            return this.$message.error(res.msg)
           }
           this.dataList = this.mixinViewModuleOptions.getDataListIsPage
             ? res.data.list
-            : res.data;
+            : res.data
           this.total = this.mixinViewModuleOptions.getDataListIsPage
             ? res.data.total
-            : 0;
+            : 0
           if (this.mixinViewModuleOptions.requestCallback) {
-            this.mixinViewModuleOptions.requestCallback(res.data);
+            this.mixinViewModuleOptions.requestCallback(res.data)
           }
-          this.dataListLoading = false;
+          this.dataListLoading = false
         })
         .catch(() => {
-          this.dataListLoading = false;
-        });
+          this.dataListLoading = false
+        })
     },
-    findValue(list, type) {
-      const found = list.find((item) => item.attrType === type);
+    findValue (list, type) {
+      const found = list.find((item) => item.attrType === type)
       if (found) {
-        return found.attrValue;
+        return found.attrValue
       } else {
-        return "暂无数据";
+        return '暂无数据'
       }
     },
-    showDetail(val) {
+    showDetail (val) {
       // this.addOrUpdateHandle(id)
-      this.addOrUpdateVisible = true;
-      this.disabled = false;
-      console.log("显示数据=============》", val);
+      this.addOrUpdateVisible = true
+      this.disabled = false
+      console.log('显示数据=============》', val)
       this.$nextTick(() => {
-        this.$refs.addOrUpdate.UpdateState = false;
-        this.$refs.addOrUpdate.dataFormShowDetails = val;
-        this.$refs.addOrUpdate.init();
-      });
-      this.disabled = true;
+        this.$refs.addOrUpdate.UpdateState = false
+        this.$refs.addOrUpdate.dataFormShowDetails = val
+        this.$refs.addOrUpdate.init()
+      })
+      this.disabled = true
     },
-    showDocument(val) {
-      console.log(val);
+    showDocument (val) {
+      console.log(val)
       window.open(
-        window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
-        "_blank"
-      );
+        window.SITE_CONFIG.frontUrl + '?id=' + val.id + '&&type=' + val.type,
+        '_blank'
+      )
     },
-    getDataList2(names) {
+    getDataList2 (names) {
       if (names != null) {
         this.$http
           .get(
             this.mixinViewModuleOptions.getDataListURL +
-              "?" +
+              '?' +
               qs.stringify({
                 // order: this.order,
                 // orderField: this.orderField,
                 // type: '组件服务',
                 pageNum: 1,
                 pageSize: this.limit,
-                type: "组件服务",
-                creator: "",
+                type: '组件服务',
+                creator: '',
                 selectType: 0,
                 delFlag: 0,
-                name: names,
+                name: names
               })
           )
           .then(({ data: res }) => {
-            console.log("res", res);
+            console.log('res', res)
             if (res.code !== 0) {
-              this.dataList = [];
-              this.total = 0;
-              return this.$message.error(res.msg);
+              this.dataList = []
+              this.total = 0
+              return this.$message.error(res.msg)
             }
             if (res.data.list.length !== 0) {
-              this.dataList = res.data.list;
+              this.dataList = res.data.list
               this.total = this.mixinViewModuleOptions.getDataListIsPage
                 ? res.data.total
-                : 0;
+                : 0
               if (this.mixinViewModuleOptions.requestCallback) {
-                this.mixinViewModuleOptions.requestCallback(res.data);
+                this.mixinViewModuleOptions.requestCallback(res.data)
               }
-              this.dataListLoading = false;
+              this.dataListLoading = false
             } else {
-              this.$message.error("未查询到相关信息");
-              this.reset();
+              this.$message.error('未查询到相关信息')
+              this.reset()
             }
           })
           .catch(() => {
-            this.dataListLoading = false;
-          });
+            this.dataListLoading = false
+          })
       } else {
-        this.$message.error("查询信息不能为空");
+        this.$message.error('查询信息不能为空')
       }
     },
-    fullScreen() {
+    fullScreen () {
       if (window.outerHeight === screen.availHeight) {
         if (window.outerWidth === screen.availWidth) {
           console.log(
-            "全屏1",
+            '全屏1',
             window.outerHeight,
             screen.availHeight,
             window.outerWidth,
             screen.availWidth
-          );
-          this.qp = false;
+          )
+          this.qp = false
         } else {
           console.log(
-            "不是全屏2",
+            '不是全屏2',
             window.outerHeight,
             screen.availHeight,
             window.outerWidth,
             screen.availWidth
-          );
-          this.qp = true;
+          )
+          this.qp = true
         }
       } else {
         console.log(
-          "不是全屏3",
+          '不是全屏3',
           window.outerHeight,
           screen.availHeight,
           window.outerWidth,
           screen.availWidth
-        );
-        this.qp = true;
+        )
+        this.qp = true
       }
     },
     // 点击关联应用按钮
-    showRelateApplication(row){
+    showRelateApplication (row) {
       this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
-        if( res && res.data ) {
-          this.relateApplicationVisible = true;
+        if (res && res.data) {
+          this.relateApplicationVisible = true
           this.relateInfo = {
             id: row.id,
             responseData: res.data,
             linkType: '2'
-          };
+          }
         }
       }).catch(() => { })
     },
     // 是否展示关联应用弹窗
-    handleIsShowRelatePopup(type) {
-      this.relateApplicationVisible = type;
+    handleIsShowRelatePopup (type) {
+      this.relateApplicationVisible = type
     }
-  },
-};
+  }
+}
 </script>
 <style lang="scss" scoped>
 .el-tooltip__popper {
   max-width: 50%;
 }
+::v-deep .el-table .cell{
+  width: 200px;
+}
 </style>
diff --git a/back/src/views/modules/ability/bsdataresources.vue b/back/src/views/modules/ability/bsdataresources.vue
index dcb29158..77d9b1b0 100644
--- a/back/src/views/modules/ability/bsdataresources.vue
+++ b/back/src/views/modules/ability/bsdataresources.vue
@@ -84,7 +84,11 @@ export default {
   methods: {
     // 重置
     resetDataList () {
-      this.dataForm = this.noDataForm
+      this.dataForm = {
+        orderId: '',
+        status: '',
+        userId: ''
+      },
       this.page = 1 // 当前页码
       this.query()
     },
diff --git a/back/src/views/modules/abilityStatistics/applicationResources.vue b/back/src/views/modules/abilityStatistics/applicationResources.vue
index aea5855f..cc2acede 100644
--- a/back/src/views/modules/abilityStatistics/applicationResources.vue
+++ b/back/src/views/modules/abilityStatistics/applicationResources.vue
@@ -48,7 +48,7 @@
             </div>
              <div class='container-body8'>
                 <span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
-                <div id="main8" style="width: 300px;height:200px;"></div>
+                <div id="main8" style="width: 300px;height:200px;margin-left:-20px;"></div>
             </div>
              <div class='container-body9'>
                 <span style='font-size:18px;color;#000000;'>应用状态分布情况</span>
@@ -114,8 +114,9 @@ export default {
             getDistributedList () {               
             this.$http.get('/census/center/v3/assemblerUseProjectInfo/' ,{
                   params : {
-                    keyId:'1522550195034857476'
-                    // this.tableId
+                    id:
+                    // '1522550195034857476'
+                    this.tableId
                     }                     
             }).then(res => {
                 let arry=[]
@@ -147,8 +148,8 @@ export default {
                 arry=res.data.data
                 arry.forEach((item)=>{                   
                     const single={
-                        value:item.useNum,
-                        name:item.name
+                        value:item.appNum,
+                        name:item.attr_value
                     }
                    this.data3.push(single.name)
                    this.data4.push(single.value)
@@ -377,7 +378,7 @@ export default {
             var total = 0;
             var tarValue;
             for (var i = 0; i < data.length; i++) {
-              total += data[i].value;
+              total += Number(data[i].value);
               if (data[i].name == name) {
                 tarValue = data[i].value;
               }
@@ -599,7 +600,7 @@ export default {
         },
         series: [
             {
-           data: [5, 5, 5, 5, 5, 5],
+           data: [1, 1, 1, 1, 1, 1],
             type: 'bar',
             barWidth: 14,
             stack: '1',
@@ -654,7 +655,7 @@ export default {
             var total = 0;
             var tarValue;
             for (var i = 0; i < data.length; i++) {
-              total += data[i].value;
+              total += Number(data[i].value);
               if (data[i].name == name) {
                 tarValue = data[i].value;
               }
@@ -725,7 +726,7 @@ export default {
             var total = 0;
             var tarValue;
             for (var i = 0; i < data.length; i++) {
-              total += data[i].value;
+             total += Number(data[i].value);
               if (data[i].name == name) {
                 tarValue = data[i].value;
               }
@@ -804,7 +805,7 @@ export default {
                     var total = 0;
                     var tarValue;
                     for (var i = 0; i < data.length; i++) {
-                    total += data[i].value;
+                    total += Number(data[i].value);
                     if (data[i].name == name) {
                         tarValue = data[i].value;
                     }
@@ -822,9 +823,9 @@ export default {
                     a: {
                         // 设置文字、数学、英语这一列的样式
                         width: 80,
-                        color: "#000000",
+                        color: "#666666",
                         fontSize: 12,
-                        fontWeight: "bolder",
+                        // fontWeight: "bolder",
                     },
                     b: {
                         // 设置10分、20分、30分这一列的样式
@@ -899,7 +900,7 @@ export default {
                     var total = 0;
                     var tarValue;
                     for (var i = 0; i < data.length; i++) {
-                    total += data[i].value;
+                    total += Number(data[i].value);
                     if (data[i].name == name) {
                         tarValue = data[i].value;
                     }
diff --git a/back/src/views/modules/abilityStatistics/componentServices.vue b/back/src/views/modules/abilityStatistics/componentServices.vue
index 01c866bb..e39f577c 100644
--- a/back/src/views/modules/abilityStatistics/componentServices.vue
+++ b/back/src/views/modules/abilityStatistics/componentServices.vue
@@ -200,7 +200,7 @@ export default {
             this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
                   params : {
                    id:this.tableId,
-                   resourceType:"应用资源"
+                   resourceType:"组件服务"
                     // pageNo: pageNo || 1,
                     // pageSize: 20
                     }                    
@@ -231,7 +231,7 @@ export default {
                 var total = 0;
                 var tarValue;
                 for (var i = 0; i < data.length; i++) {
-                total += data[i].value;
+                total += Number(data[i].value);
                 if (data[i].name == name) {
                     tarValue = data[i].value;
                 }
@@ -295,7 +295,7 @@ export default {
                 var total = 0;
                 var tarValue;
                 for (var i = 0; i < data.length; i++) {
-                total += data[i].value;
+                total += Number(data[i].value);
                 if (data[i].name == name) {
                     tarValue = data[i].value;
                 }
@@ -361,7 +361,7 @@ export default {
                     var total = 0;
                     var tarValue;
                     for (var i = 0; i < data.length; i++) {
-                    total += data[i].value;
+                    total += Number(data[i].value);
                     if (data[i].name == name) {
                         tarValue = data[i].value;
                     }
@@ -377,9 +377,9 @@ export default {
                     a: {
                         // 设置文字、数学、英语这一列的样式
                         width: 100,
-                        color: "#000000",
+                        color: "#666666",
                         fontSize: 12,
-                        fontWeight: "bolder",
+                        // fontWeight: "bolder",
                     },
                     b: {
                         // 设置10分、20分、30分这一列的样式
diff --git a/back/src/views/modules/abilityStatistics/componentUsed.vue b/back/src/views/modules/abilityStatistics/componentUsed.vue
index 4beff5d9..de68a125 100644
--- a/back/src/views/modules/abilityStatistics/componentUsed.vue
+++ b/back/src/views/modules/abilityStatistics/componentUsed.vue
@@ -17,7 +17,7 @@
             </div>
             <div class='container-body3'>
                 <span style='font-size:18px;color;#000000;'>使用组件应用领域分布情况</span>
-                <div id="main8" style="width: 400px;height:200px;"></div>
+                <div id="main3" style="width: 400px;height:200px;"></div>
             </div>
              <div class='container-body4'>
                 <div style='margin-bottom:30px'>
@@ -36,7 +36,7 @@
             </div>
              <div class='container-body5'>
                 <div style='margin-bottom:30px'>
-                     <span style='font-size:18px;color;#000000;'>使用组件评分Top5</span>
+                     <span style='font-size:18px;color;#000000;'>使用组件评分</span>
                       <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
                 </div>
                 <div v-for="(item,index) in applicationList" :key='index' >
@@ -174,9 +174,7 @@ export default {
                         value:item.total,
                         name:item.type
                     }
-                    const newList=[]
                     this.data3.push(single)
-                    // this.data2=newList
                     this.myEcharts3()
                })             
             })            
@@ -231,7 +229,7 @@ export default {
                 var total = 0;
                 var tarValue;
                 for (var i = 0; i < data.length; i++) {
-                total += data[i].value;
+                total += Number(data[i].value);
                 if (data[i].name == name) {
                     tarValue = data[i].value;
                 }
@@ -295,7 +293,7 @@ export default {
                 var total = 0;
                 var tarValue;
                 for (var i = 0; i < data.length; i++) {
-                total += data[i].value;
+               total += Number(data[i].value);
                 if (data[i].name == name) {
                     tarValue = data[i].value;
                 }
@@ -361,13 +359,14 @@ export default {
                     var total = 0;
                     var tarValue;
                     for (var i = 0; i < data.length; i++) {
-                    total += data[i].value;
+                    total += Number(data[i].value);
                     if (data[i].name == name) {
                         tarValue = data[i].value;
                     }
                     }
-                    var v = tarValue;
+                    // var v = tarValue;
                     var p = Math.round(((tarValue / total) * 100));
+                    console.log('@@@@', tarValue, total)
                     return `{a|${name}}  {b|${p}%}`;
                 },
                 itemStyle:{},
@@ -428,7 +427,7 @@ export default {
             option && myChart.setOption(option);
                 },
         backBtn(){
-            this.$emit('closeChild')
+            this.$emit('closeChild2')
         }
    }
 }
@@ -541,9 +540,13 @@ export default {
          position:absolute;
          display: flex;
          margin-left:90px;
+         width:200px;
          margin-top:5px;
          color:#333333;
-         font-size: 16px;        
+         font-size: 16px;
+         overflow: hidden;
+         white-space: nowrap;
+         text-overflow: ellipsis;        
     }   
     .count-style{
          position:absolute;
diff --git a/back/src/views/modules/abilityStatistics/index.vue b/back/src/views/modules/abilityStatistics/index.vue
index df327370..2ff30249 100644
--- a/back/src/views/modules/abilityStatistics/index.vue
+++ b/back/src/views/modules/abilityStatistics/index.vue
@@ -96,7 +96,7 @@
             min-width="100%">
         </el-table-column>
         <el-table-column v-if="this.departmentId===2"
-            prop="resourceCarNum"
+            prop="resourceCallNum"
             label="申请总数"
             min-width="100%">
         </el-table-column>
@@ -121,7 +121,7 @@
     </div>   
   </el-card>
     </div>
-   <component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-used>
+   <component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild2='closeChild2'></component-used>
    <component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
    <application-resources  v-if='resourcesIsShow'  :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
 </div>  
@@ -362,10 +362,18 @@ export default {
       closeChild(){
         this.homeIsShow=true
         this.servicesIsShow=false
+        this. handleCurrentChange(1)
+        
+      },
+       closeChild2(){
+        this.homeIsShow=true
+        this.UsedIsShow=false
+        this. handleCurrentChange(1)
       },
        closeApplication(){
         this.homeIsShow=true
         this.resourcesIsShow=false
+        this. handleCurrentChange(1)
       }
     },
 
diff --git a/back/src/views/modules/myAgent/demo/competency-application.vue b/back/src/views/modules/myAgent/demo/competency-application.vue
index 709f0fcc..0c29bfbd 100644
--- a/back/src/views/modules/myAgent/demo/competency-application.vue
+++ b/back/src/views/modules/myAgent/demo/competency-application.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-29 15:59:51
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-01 09:29:57
+ * @LastEditTime: 2022-07-04 16:17:22
  * @Description: 告诉大家这是什么
 -->
 <!--  流程业务表单   -->
@@ -157,6 +157,7 @@ export default {
       })
     },
     downloadFile2 (url) {
+      console.log(window.SITE_CONFIG.previewUrl)
       window.open(
         window.SITE_CONFIG.previewUrl +
         'hisense_office/onlinePreview?url=' +
diff --git a/front/package.json b/front/package.json
index 60073475..a3efb530 100644
--- a/front/package.json
+++ b/front/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "HiIRS",
+  "name": "HiUCS",
   "version": "0.8.0",
   "private": true,
   "scripts": {
@@ -38,6 +38,7 @@
     "pinyin-pro": "^3.8.3",
     "postprocessing": "^5.3.2",
     "remixicon": "^2.5.0",
+    "swiper": "^8.2.6",
     "three": "^0.98.0",
     "three.meshline": "^1.1.0",
     "vue": "^3.1.4",
@@ -70,6 +71,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "svg-sprite-loader": "^6.0.9",
+    "swiper": "^8.0.0",
     "vab-config": "0.0.8",
     "webpackbar": "^5.0.0-3"
   },
diff --git a/front/public/index.html b/front/public/index.html
index 78ced308..8ad43c42 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.wuhongjian
- * @LastEditTime: 2022-07-04 11:57:44
+ * @LastEditTime: 2022-07-06 18:44:35
  * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@@ -28,10 +28,11 @@
      <!-- 站点配置 -->
   <script>
     window.SITE_CONFIG = {};
-    window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
-    window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
-    window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
-    window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
+    // window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
+    // window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
+    // window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
+    // window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
+    window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
     // 包头
     // window.SITE_CONFIG['backUrl'] = 'http://10.110.205.1:8001';
     // window.SITE_CONFIG['previewUrl'] = 'http://10.110.205.1:8002/';
@@ -44,11 +45,11 @@
     // 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['previewUrl'] = 'http://15.2.21.238:9796/';
-    // window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
-    // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
-    window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
+    window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
+    window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
+    window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
+    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
+    // window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
     // 穿透版本
     // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
     // window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';
diff --git a/front/public/leaflet/ersi-leaflet.js b/front/public/leaflet/ersi-leaflet.js
index d14a630c..72de2324 100644
--- a/front/public/leaflet/ersi-leaflet.js
+++ b/front/public/leaflet/ersi-leaflet.js
@@ -1,3 +1,10 @@
+/*
+ * @Author: hisense.wuhongjian
+ * @Date: 2022-07-02 00:05:55
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-02 00:38:19
+ * @Description: 告诉大家这是什么
+ */
 /* esri-leaflet - v3.0.4 - Mon Dec 06 2021 15:19:56 GMT-0600 (Central Standard Time)
  * Copyright (c) 2021 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
@@ -8,5 +15,5 @@
   * Mon May 18 2020 14:30:35 GMT-0700 (Pacific Daylight Time)
   */
 /* Copyright (c) 2012-2019 Environmental Systems Research Institute, Inc.
-   * Apache-2.0 */function T(t,e){return A(t,e)}function C(t,e){return L(t,e)}function w(t){if("NaN"===t.xmin||"NaN"===t.ymin||"NaN"===t.xmax||"NaN"===t.ymax)return null;var e=g.latLng(t.ymin,t.xmin),i=g.latLng(t.ymax,t.xmax);return g.latLngBounds(e,i)}function R(t){return{xmin:(t=g.latLngBounds(t)).getSouthWest().lng,ymin:t.getSouthWest().lat,xmax:t.getNorthEast().lng,ymax:t.getNorthEast().lat,spatialReference:{wkid:4326}}}var P=/^(OBJECTID|FID|OID|ID)$/i;function F(t){var e;if(t.objectIdFieldName)e=t.objectIdFieldName;else if(t.fields){for(var i=0;i<=t.fields.length-1;i++)if("esriFieldTypeOID"===t.fields[i].type){e=t.fields[i].name;break}if(!e)for(i=0;i<=t.fields.length-1;i++)if(t.fields[i].name.match(P)){e=t.fields[i].name;break}}return e}function O(t){for(var e in t.attributes)if(e.match(P))return e}function k(t,e){var i=t.features||t.results,s=i&&i.length,r=e||F(t),o={type:"FeatureCollection",features:[]};if(s)for(var n=i.length-1;0<=n;n--){var a=C(i[n],r||O(i[n]));o.features.push(a)}return o}function M(t){return"/"!==(t=g.Util.trim(t))[t.length-1]&&(t+="/"),t}function U(t){var e;return-1!==t.url.indexOf("?")&&(t.requestParams=t.requestParams||{},e=t.url.substring(t.url.indexOf("?")+1),t.url=t.url.split("?")[0],t.requestParams=JSON.parse('{"'+decodeURI(e).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"')+'"}')),t.url=M(t.url.split("?")[0]),t}function G(t){return/^(?!.*utility\.arcgis\.com).*\.arcgis\.com.*FeatureServer/i.test(t)}function D(t){var e;switch(t){case"Point":e="esriGeometryPoint";break;case"MultiPoint":e="esriGeometryMultipoint";break;case"LineString":case"MultiLineString":e="esriGeometryPolyline";break;case"Polygon":case"MultiPolygon":e="esriGeometryPolygon"}return e}function q(t){return t.getSize().x-r.attributionWidthOffset+"px"}function E(e){var t,i;e.attributionControl&&(e.attributionControl._esriAttributionLayerCount||(e.attributionControl._esriAttributionLayerCount=0),0===e.attributionControl._esriAttributionLayerCount&&(e.attributionControl._esriAttributionAddedOnce||((t=document.createElement("style")).type="text/css",t.innerHTML=".esri-truncated-attribution:hover {white-space: normal;}",document.getElementsByTagName("head")[0].appendChild(t),(i=document.createElement("style")).type="text/css",i.innerHTML=".esri-truncated-attribution {vertical-align: -3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;transition: 0s white-space;transition-delay: 1s;max-width: "+q(e)+";}",document.getElementsByTagName("head")[0].appendChild(i),e.on("resize",function(t){e.attributionControl&&(e.attributionControl._container.style.maxWidth=q(t.target))}),e.attributionControl._esriAttributionAddedOnce=!0),e.attributionControl.setPrefix(I+' | Powered by <a href="https://www.esri.com">Esri</a>'),g.DomUtil.addClass(e.attributionControl._container,"esri-truncated-attribution:hover"),g.DomUtil.addClass(e.attributionControl._container,"esri-truncated-attribution")),e.attributionControl._esriAttributionLayerCount=e.attributionControl._esriAttributionLayerCount+1)}function B(t){t.attributionControl&&(t.attributionControl._esriAttributionLayerCount&&1===t.attributionControl._esriAttributionLayerCount&&(t.attributionControl.setPrefix(I),g.DomUtil.removeClass(t.attributionControl._container,"esri-truncated-attribution:hover"),g.DomUtil.removeClass(t.attributionControl._container,"esri-truncated-attribution")),t.attributionControl._esriAttributionLayerCount=t.attributionControl._esriAttributionLayerCount-1)}function z(t){var e={geometry:null,geometryType:null};return t instanceof g.LatLngBounds?(e.geometry=R(t),e.geometryType="esriGeometryEnvelope",e):(t.getLatLng&&(t=t.getLatLng()),t instanceof g.LatLng&&(t={type:"Point",coordinates:[t.lng,t.lat]}),t instanceof g.GeoJSON&&(t=t.getLayers()[0].feature.geometry,e.geometry=T(t),e.geometryType=D(t.type)),t.toGeoJSON&&(t=t.toGeoJSON()),"Feature"===t.type&&(t=t.geometry),"Point"===t.type||"LineString"===t.type||"Polygon"===t.type||"MultiPolygon"===t.type?(e.geometry=T(t),e.geometryType=D(t.type),e):void m("invalid geometry passed to spatial query. Should be L.LatLng, L.LatLngBounds, L.Marker or a GeoJSON Point, Line, Polygon or MultiPolygon object"))}function Z(t,l){a.cors&&c(t,{},g.Util.bind(function(t,e){if(!t){l._esriAttributions=[];for(var i=0;i<e.contributors.length;i++)for(var s=e.contributors[i],r=0;r<s.coverageAreas.length;r++){var o=s.coverageAreas[r],n=g.latLng(o.bbox[0],o.bbox[1]),a=g.latLng(o.bbox[2],o.bbox[3]);l._esriAttributions.push({attribution:s.attribution,score:o.score,bounds:g.latLngBounds(n,a),minZoom:o.zoomMin,maxZoom:o.zoomMax})}l._esriAttributions.sort(function(t,e){return e.score-t.score}),N({target:l})}},this))}function N(t){var e=t.target,i=e._esriAttributions;if(e&&e.attributionControl){var s=e.attributionControl._container.querySelector(".esri-dynamic-attribution");if(s&&i){for(var r="",o=e.getBounds(),n=g.latLngBounds(o.getSouthWest().wrap(),o.getNorthEast().wrap()),a=e.getZoom(),l=0;l<i.length;l++){var u=i[l],h=u.attribution;!r.match(h)&&u.bounds.intersects(n)&&a>=u.minZoom&&a<=u.maxZoom&&(r+=", "+h)}r=r.substr(2),s.innerHTML=r,s.style.maxWidth=q(e),e.fire("attributionupdated",{attribution:r})}}}var j={warn:m,cleanUrl:M,getUrlParams:U,isArcgisOnline:G,geojsonTypeToArcGIS:D,responseToFeatureCollection:k,geojsonToArcGIS:T,arcgisToGeoJSON:C,boundsToExtent:R,extentToBounds:w,calcAttributionWidth:q,setEsriAttribution:E,_setGeometry:z,_getAttributionData:Z,_updateMapAttribution:N,_findIdAttributeFromFeature:O,_findIdAttributeFromResponse:F},W=g.Class.extend({options:{proxy:!1,useCors:i},generateSetter:function(e,t){return g.Util.bind(function(t){return this.params[e]=t,this},t)},initialize:function(t){if(t.request&&t.options?(this._service=t,g.Util.setOptions(this,t.options)):(g.Util.setOptions(this,t),this.options.url=M(t.url)),this.params=g.Util.extend({},this.params||{}),this.setters)for(var e in this.setters){var i=this.setters[e];this[e]=this.generateSetter(i,this)}},token:function(t){return this._service?this._service.authenticate(t):this.params.token=t,this},apikey:function(t){return this.token(t)},format:function(t){return this.params.returnUnformattedValues=!t,this},request:function(t,e){return this.options.requestParams&&g.Util.extend(this.params,this.options.requestParams),this._service?this._service.request(this.path,this.params,t,e):this._request("request",this.path,this.params,t,e)},_request:function(t,e,i,s,r){var o=this.options.proxy?this.options.proxy+"?"+this.options.url+e:this.options.url+e;return"get"!==t&&"request"!==t||this.options.useCors?S[t](o,i,s,r):S.get.JSONP(o,i,s,r)}});var J=W.extend({setters:{offset:"resultOffset",limit:"resultRecordCount",fields:"outFields",precision:"geometryPrecision",featureIds:"objectIds",returnGeometry:"returnGeometry",returnM:"returnM",transform:"datumTransformation",token:"token"},path:"query",params:{returnGeometry:!0,where:"1=1",outSR:4326,outFields:"*"},within:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelContains",this},intersects:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelIntersects",this},contains:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelWithin",this},crosses:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelCrosses",this},touches:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelTouches",this},overlaps:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelOverlaps",this},bboxIntersects:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelEnvelopeIntersects",this},indexIntersects:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelIndexIntersects",this},nearby:function(t,e){return t=g.latLng(t),this.params.geometry=[t.lng,t.lat],this.params.geometryType="esriGeometryPoint",this.params.spatialRel="esriSpatialRelIntersects",this.params.units="esriSRUnit_Meter",this.params.distance=e,this.params.inSR=4326,this},where:function(t){return this.params.where=t,this},between:function(t,e){return this.params.time=[t.valueOf(),e.valueOf()],this},simplify:function(t,e){var i=Math.abs(t.getBounds().getWest()-t.getBounds().getEast());return this.params.maxAllowableOffset=i/t.getSize().y*e,this},orderBy:function(t,e){return e=e||"ASC",this.params.orderByFields=this.params.orderByFields?this.params.orderByFields+",":"",this.params.orderByFields+=[t,e].join(" "),this},run:function(i,s){return this._cleanParams(),this.options.isModern||G(this.options.url)&&void 0===this.options.isModern?(this.params.f="geojson",this.request(function(t,e){this._trapSQLerrors(t),i.call(s,t,e,e)},this)):this.request(function(t,e){this._trapSQLerrors(t),i.call(s,t,e&&k(e),e)},this)},count:function(i,t){return this._cleanParams(),this.params.returnCountOnly=!0,this.request(function(t,e){i.call(this,t,e&&e.count,e)},t)},ids:function(i,t){return this._cleanParams(),this.params.returnIdsOnly=!0,this.request(function(t,e){i.call(this,t,e&&e.objectIds,e)},t)},bounds:function(i,s){return this._cleanParams(),this.params.returnExtentOnly=!0,this.request(function(t,e){e&&e.extent&&w(e.extent)?i.call(s,t,w(e.extent),e):(t={message:"Invalid Bounds"},i.call(s,t,null,e))},s)},distinct:function(){return this.params.returnGeometry=!1,this.params.returnDistinctValues=!0,this},pixelSize:function(t){var e=g.point(t);return this.params.pixelSize=[e.x,e.y],this},layer:function(t){return this.path=t+"/query",this},_trapSQLerrors:function(t){t&&"400"===t.code&&m("one common syntax error in query requests is encasing string values in double quotes instead of single quotes")},_cleanParams:function(){delete this.params.returnIdsOnly,delete this.params.returnExtentOnly,delete this.params.returnCountOnly},_setGeometryParams:function(t){this.params.inSR=4326;var e=z(t);this.params.geometry=e.geometry,this.params.geometryType=e.geometryType}});function V(t){return new J(t)}var Q=W.extend({setters:{contains:"contains",text:"searchText",fields:"searchFields",spatialReference:"sr",sr:"sr",layers:"layers",returnGeometry:"returnGeometry",maxAllowableOffset:"maxAllowableOffset",precision:"geometryPrecision",dynamicLayers:"dynamicLayers",returnZ:"returnZ",returnM:"returnM",gdbVersion:"gdbVersion",token:"token"},path:"find",params:{sr:4326,contains:!0,returnGeometry:!0,returnZ:!0,returnM:!1},layerDefs:function(t,e){return this.params.layerDefs=this.params.layerDefs?this.params.layerDefs+";":"",this.params.layerDefs+=[t,e].join(":"),this},simplify:function(t,e){var i=Math.abs(t.getBounds().getWest()-t.getBounds().getEast());return this.params.maxAllowableOffset=i/t.getSize().y*e,this},run:function(i,s){return this.request(function(t,e){i.call(s,t,e&&k(e),e)},s)}});function K(t){return new Q(t)}var H=W.extend({path:"identify",between:function(t,e){return this.params.time=[t.valueOf(),e.valueOf()],this}});var X=H.extend({setters:{layers:"layers",precision:"geometryPrecision",tolerance:"tolerance",returnGeometry:"returnGeometry"},params:{sr:4326,layers:"all",tolerance:3,returnGeometry:!0},on:function(t){var e=R(t.getBounds()),i=t.getSize();return this.params.imageDisplay=[i.x,i.y,96],this.params.mapExtent=[e.xmin,e.ymin,e.xmax,e.ymax],this},at:function(t){return 2===t.length&&(t=g.latLng(t)),this._setGeometryParams(t),this},layerDef:function(t,e){return this.params.layerDefs=this.params.layerDefs?this.params.layerDefs+";":"",this.params.layerDefs+=[t,e].join(":"),this},simplify:function(t,e){var i=Math.abs(t.getBounds().getWest()-t.getBounds().getEast());return this.params.maxAllowableOffset=i/t.getSize().y*e,this},run:function(r,o){return this.request(function(t,e){if(t)r.call(o,t,void 0,e);else{var i=k(e);e.results=e.results.reverse();for(var s=0;s<i.features.length;s++){i.features[s].layerId=e.results[s].layerId}r.call(o,void 0,i,e)}})},_setGeometryParams:function(t){var e=z(t);this.params.geometry=e.geometry,this.params.geometryType=e.geometryType}});function Y(t){return new X(t)}var $=H.extend({setters:{setMosaicRule:"mosaicRule",setRenderingRule:"renderingRule",setPixelSize:"pixelSize",returnCatalogItems:"returnCatalogItems",returnGeometry:"returnGeometry"},params:{returnGeometry:!1},at:function(t){return t=g.latLng(t),this.params.geometry=JSON.stringify({x:t.lng,y:t.lat,spatialReference:{wkid:4326}}),this.params.geometryType="esriGeometryPoint",this},getMosaicRule:function(){return this.params.mosaicRule},getRenderingRule:function(){return this.params.renderingRule},getPixelSize:function(){return this.params.pixelSize},run:function(i,s){return this.request(function(t,e){i.call(s,t,e&&this._responseToGeoJSON(e),e)},this)},_responseToGeoJSON:function(t){var e=t.location,i=t.catalogItems,s=t.catalogItemVisibilities,r={pixel:{type:"Feature",geometry:{type:"Point",coordinates:[e.x,e.y]},crs:{type:"EPSG",properties:{code:e.spatialReference.wkid}},properties:{OBJECTID:t.objectId,name:t.name,value:t.value},id:t.objectId}};if(t.properties&&t.properties.Values&&(r.pixel.properties.values=t.properties.Values),i&&i.features&&(r.catalogItems=k(i),s&&s.length===r.catalogItems.features.length))for(var o=s.length-1;0<=o;o--)r.catalogItems.features[o].properties.catalogItemVisibility=s[o];return r}});function tt(t){return new $(t)}var et=g.Evented.extend({options:{proxy:!1,useCors:i,timeout:0},initialize:function(t){t=t||{},this._requestQueue=[],this._authenticating=!1,g.Util.setOptions(this,t),this.options.url=M(this.options.url)},get:function(t,e,i,s){return this._request("get",t,e,i,s)},post:function(t,e,i,s){return this._request("post",t,e,i,s)},request:function(t,e,i,s){return this._request("request",t,e,i,s)},metadata:function(t,e){return this._request("get","",{},t,e)},authenticate:function(t){return this._authenticating=!1,this.options.token=t,this._runQueue(),this},getTimeout:function(){return this.options.timeout},setTimeout:function(t){this.options.timeout=t},_request:function(t,e,i,s,r){this.fire("requeststart",{url:this.options.url+e,params:i,method:t},!0);var o=this._createServiceCallback(t,e,i,s,r);if(this.options.token&&(i.token=this.options.token),this.options.requestParams&&g.Util.extend(i,this.options.requestParams),!this._authenticating){var n=this.options.proxy?this.options.proxy+"?"+this.options.url+e:this.options.url+e;return"get"!==t&&"request"!==t||this.options.useCors?S[t](n,i,o,r):S.get.JSONP(n,i,o,r)}this._requestQueue.push([t,e,i,s,r])},_createServiceCallback:function(i,s,r,o,n){return g.Util.bind(function(t,e){!t||499!==t.code&&498!==t.code||(this._authenticating=!0,this._requestQueue.push([i,s,r,o,n]),this.fire("authenticationrequired",{authenticate:g.Util.bind(this.authenticate,this)},!0),t.authenticate=g.Util.bind(this.authenticate,this)),o.call(n,t,e),t?this.fire("requesterror",{url:this.options.url+s,params:r,message:t.message,code:t.code,method:i},!0):this.fire("requestsuccess",{url:this.options.url+s,params:r,response:e,method:i},!0),this.fire("requestend",{url:this.options.url+s,params:r,method:i},!0)},this)},_runQueue:function(){for(var t=this._requestQueue.length-1;0<=t;t--){var e=this._requestQueue[t];this[e.shift()].apply(this,e)}this._requestQueue=[]}});var it=et.extend({identify:function(){return Y(this)},find:function(){return K(this)},query:function(){return V(this)}});function st(t){return new it(t)}var rt=et.extend({query:function(){return V(this)},identify:function(){return tt(this)}});function ot(t){return new rt(t)}var nt=et.extend({options:{idAttribute:"OBJECTID"},query:function(){return V(this)},addFeature:function(t,e,i){this.addFeatures(t,e,i)},addFeatures:function(t,s,r){for(var e=t.features?t.features:[t],i=e.length-1;0<=i;i--)delete e[i].id;return t=T(t),t=1<e.length?t:[t],this.post("addFeatures",{features:t},function(t,e){var i=e&&e.addResults?1<e.addResults.length?e.addResults:e.addResults[0]:void 0;s&&s.call(r,t||e.addResults[0].error,i)},r)},updateFeature:function(t,e,i){this.updateFeatures(t,e,i)},updateFeatures:function(t,s,r){var e=t.features?t.features:[t];return t=T(t,this.options.idAttribute),t=1<e.length?t:[t],this.post("updateFeatures",{features:t},function(t,e){var i=e&&e.updateResults?1<e.updateResults.length?e.updateResults:e.updateResults[0]:void 0;s&&s.call(r,t||e.updateResults[0].error,i)},r)},deleteFeature:function(t,e,i){this.deleteFeatures(t,e,i)},deleteFeatures:function(t,s,r){return this.post("deleteFeatures",{objectIds:t},function(t,e){var i=e&&e.deleteResults?1<e.deleteResults.length?e.deleteResults:e.deleteResults[0]:void 0;s&&s.call(r,t||e.deleteResults[0].error,i)},r)}});function at(t){return new nt(t)}var lt="https:"!==window.location.protocol?"http:":"https:",ut=g.TileLayer.extend({statics:{TILES:{Streets:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,subdomains:["server","services"],attribution:"USGS, NOAA",attributionUrl:"https://static.arcgis.com/attribution/World_Street_Map"}},Topographic:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,subdomains:["server","services"],attribution:"USGS, NOAA",attributionUrl:"https://static.arcgis.com/attribution/World_Topo_Map"}},Oceans:{urlTemplate:lt+"//{s}.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],attribution:"USGS, NOAA",attributionUrl:"https://static.arcgis.com/attribution/Ocean_Basemap"}},OceansLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},NationalGeographic:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],attribution:"National Geographic, DeLorme, HERE, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, increment P Corp."}},DarkGray:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],attribution:"HERE, DeLorme, MapmyIndia, &copy; OpenStreetMap contributors"}},DarkGrayLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Reference/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},Gray:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],attribution:"HERE, DeLorme, MapmyIndia, &copy; OpenStreetMap contributors"}},GrayLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},Imagery:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,subdomains:["server","services"],attribution:"DigitalGlobe, GeoEye, i-cubed, USDA, USGS, AEX, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community",attributionUrl:"https://static.arcgis.com/attribution/World_Imagery"}},ImageryLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},ImageryTransportation:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},ShadedRelief:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:13,subdomains:["server","services"],attribution:"USGS"}},ShadedReliefLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:12,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},Terrain:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:13,subdomains:["server","services"],attribution:"USGS, NOAA"}},TerrainLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:13,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},USATopo:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:15,subdomains:["server","services"],attribution:"USGS, National Geographic Society, i-cubed"}},ImageryClarity:{urlTemplate:lt+"//clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,attribution:"Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community"}},Physical:{urlTemplate:lt+"//{s}.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:8,subdomains:["server","services"],attribution:"U.S. National Park Service"}},ImageryFirefly:{urlTemplate:lt+"//fly.maptiles.arcgis.com/arcgis/rest/services/World_Imagery_Firefly/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,attribution:"Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community",attributionUrl:"https://static.arcgis.com/attribution/World_Imagery"}}}},initialize:function(t,e){var i;if("object"==typeof t&&t.urlTemplate&&t.options)i=t;else{if("string"!=typeof t||!ut.TILES[t])throw new Error('L.esri.BasemapLayer: Invalid parameter. Use one of "Streets", "Topographic", "Oceans", "OceansLabels", "NationalGeographic", "Physical", "Gray", "GrayLabels", "DarkGray", "DarkGrayLabels", "Imagery", "ImageryLabels", "ImageryTransportation", "ImageryClarity", "ImageryFirefly", ShadedRelief", "ShadedReliefLabels", "Terrain", "TerrainLabels" or "USATopo"');i=ut.TILES[t]}var s=g.Util.extend(i.options,e);g.Util.setOptions(this,s),this.options.ignoreDeprecationWarning||console.warn("WARNING: L.esri.BasemapLayer uses data services that are in mature support and are not being updated. Please use L.esri.Vector.vectorBasemapLayer instead. More info: https://esriurl.com/esri-leaflet-basemap"),this.options.token&&-1===i.urlTemplate.indexOf("token=")&&(i.urlTemplate+="?token="+this.options.token),this.options.proxy&&(i.urlTemplate=this.options.proxy+"?"+i.urlTemplate),g.TileLayer.prototype.initialize.call(this,i.urlTemplate,s)},onAdd:function(t){E(t),"esri-labels"===this.options.pane&&this._initPane(),this.options.attributionUrl&&Z((this.options.proxy?this.options.proxy+"?":"")+this.options.attributionUrl,t),t.on("moveend",N),g.TileLayer.prototype.onAdd.call(this,t)},onRemove:function(t){B(t),t.off("moveend",N),g.TileLayer.prototype.onRemove.call(this,t)},_initPane:function(){var t;this._map.getPane(this.options.pane)||((t=this._map.createPane(this.options.pane)).style.pointerEvents="none",t.style.zIndex=500)},getAttribution:function(){var t;return this.options.attribution&&(t='<span class="esri-dynamic-attribution">'+this.options.attribution+"</span>"),t}});var ht=g.TileLayer.extend({options:{zoomOffsetAllowance:.1,errorTileUrl:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEABAMAAACuXLVVAAAAA1BMVEUzNDVszlHHAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAAAAAAAAAB6mUWpAAAADZJREFUeJztwQEBAAAAgiD/r25IQAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7waBAAABw08RwAAAAABJRU5ErkJggg=="},statics:{MercatorZoomLevels:{0:156543.033928,1:78271.5169639999,2:39135.7584820001,3:19567.8792409999,4:9783.93962049996,5:4891.96981024998,6:2445.98490512499,7:1222.99245256249,8:611.49622628138,9:305.748113140558,10:152.874056570411,11:76.4370282850732,12:38.2185141425366,13:19.1092570712683,14:9.55462853563415,15:4.77731426794937,16:2.38865713397468,17:1.19432856685505,18:.597164283559817,19:.298582141647617,20:.14929107082381,21:.07464553541191,22:.0373227677059525,23:.0186613838529763}},initialize:function(t){t=U(t=g.Util.setOptions(this,t)),this.tileUrl=(t.proxy?t.proxy+"?":"")+t.url+"tile/{z}/{y}/{x}"+(t.requestParams&&0<Object.keys(t.requestParams).length?g.Util.getParamString(t.requestParams):""),-1!==t.url.indexOf("{s}")&&t.subdomains&&(t.url=t.url.replace("{s}",t.subdomains[0])),this.service=st(t),this.service.addEventParent(this),new RegExp(/tiles.arcgis(online)?\.com/g).test(t.url)&&(this.tileUrl=this.tileUrl.replace("://tiles","://tiles{s}"),t.subdomains=["1","2","3","4"]),this.options.token&&(this.tileUrl+="?token="+this.options.token),g.TileLayer.prototype.initialize.call(this,this.tileUrl,t)},getTileUrl:function(t){var e=this._getZoomForUrl();return g.Util.template(this.tileUrl,g.Util.extend({s:this._getSubdomain(t),x:t.x,y:t.y,z:this._lodMap&&this._lodMap[e]?this._lodMap[e]:e},this.options))},createTile:function(t,e){var i=document.createElement("img");return g.DomEvent.on(i,"load",g.Util.bind(this._tileOnLoad,this,e,i)),g.DomEvent.on(i,"error",g.Util.bind(this._tileOnError,this,e,i)),this.options.crossOrigin&&(i.crossOrigin=""),i.alt="",!this._lodMap||this._lodMap&&this._lodMap[this._getZoomForUrl()]?i.src=this.getTileUrl(t):this.once("lodmap",function(){i.src=this.getTileUrl(t)},this),i},onAdd:function(u){E(u),this._lodMap||this.metadata(function(t,e){if(!t&&e.spatialReference){var i=e.spatialReference.latestWkid||e.spatialReference.wkid;if(!this.options.attribution&&u.attributionControl&&e.copyrightText&&(this.options.attribution=e.copyrightText,u.attributionControl.addAttribution(this.getAttribution())),u.options.crs!==g.CRS.EPSG3857||102100!==i&&3857!==i)u.options.crs&&u.options.crs.code&&-1<u.options.crs.code.indexOf(i)||m("L.esri.TiledMapLayer is using a non-mercator spatial reference. Support may be available through Proj4Leaflet http://esri.github.io/esri-leaflet/examples/non-mercator-projection.html");else{this._lodMap={};for(var s=e.tileInfo.lods,r=ht.MercatorZoomLevels,o=0;o<s.length;o++){var n=s[o];for(var a in r){var l=r[a];if(this._withinPercentage(n.resolution,l,this.options.zoomOffsetAllowance)){this._lodMap[a]=n.level;break}}}this.fire("lodmap")}}},this),g.TileLayer.prototype.onAdd.call(this,u)},onRemove:function(t){B(t),g.TileLayer.prototype.onRemove.call(this,t)},metadata:function(t,e){return this.service.metadata(t,e),this},identify:function(){return this.service.identify()},find:function(){return this.service.find()},query:function(){return this.service.query()},authenticate:function(t){var e="?token="+t;return this.tileUrl=this.options.token?this.tileUrl.replace(/\?token=(.+)/g,e):this.tileUrl+e,this.options.token=t,this.service.authenticate(t),this},_withinPercentage:function(t,e,i){return Math.abs(t/e-1)<i}});var ct=g.ImageOverlay.extend({onAdd:function(t){this._topLeft=t.getPixelBounds().min,g.ImageOverlay.prototype.onAdd.call(this,t)},_reset:function(){this._map.options.crs===g.CRS.EPSG3857?g.ImageOverlay.prototype._reset.call(this):g.DomUtil.setPosition(this._image,this._topLeft.subtract(this._map.getPixelOrigin()))}}),pt=g.Layer.extend({options:{opacity:1,position:"front",f:"image",useCors:i,attribution:null,interactive:!1,alt:""},onAdd:function(i){E(i),this.options.zIndex&&(this.options.position=null),this._update=g.Util.throttle(this._update,this.options.updateInterval,this),i.on("moveend",this._update,this),this._currentImage&&this._currentImage._bounds.equals(this._map.getBounds())?i.addLayer(this._currentImage):this._currentImage&&(this._map.removeLayer(this._currentImage),this._currentImage=null),this._update(),this._popup&&(this._map.on("click",this._getPopupData,this),this._map.on("dblclick",this._resetPopupState,this)),this.metadata(function(t,e){!t&&!this.options.attribution&&i.attributionControl&&e.copyrightText&&(this.options.attribution=e.copyrightText,i.attributionControl.addAttribution(this.getAttribution()))},this)},onRemove:function(t){B(t),this._currentImage&&this._map.removeLayer(this._currentImage),this._popup&&(this._map.off("click",this._getPopupData,this),this._map.off("dblclick",this._resetPopupState,this)),this._map.off("moveend",this._update,this)},bindPopup:function(t,e){return this._shouldRenderPopup=!1,this._lastClick=!1,this._popup=g.popup(e),this._popupFunction=t,this._map&&(this._map.on("click",this._getPopupData,this),this._map.on("dblclick",this._resetPopupState,this)),this},unbindPopup:function(){return this._map&&(this._map.closePopup(this._popup),this._map.off("click",this._getPopupData,this),this._map.off("dblclick",this._resetPopupState,this)),this._popup=!1,this},bringToFront:function(){return this.options.position="front",this._currentImage&&(this._currentImage.bringToFront(),this._setAutoZIndex(Math.max)),this},bringToBack:function(){return this.options.position="back",this._currentImage&&(this._currentImage.bringToBack(),this._setAutoZIndex(Math.min)),this},setZIndex:function(t){return this.options.zIndex=t,this._currentImage&&this._currentImage.setZIndex(t),this},_setAutoZIndex:function(t){if(this._currentImage){for(var e,i=this._currentImage.getPane().children,s=-t(-1/0,1/0),r=0,o=i.length;r<o;r++)e=i[r].style.zIndex,i[r]!==this._currentImage._image&&e&&(s=t(s,+e));isFinite(s)&&(this.options.zIndex=s+t(-1,1),this.setZIndex(this.options.zIndex))}},getAttribution:function(){return this.options.attribution},getOpacity:function(){return this.options.opacity},setOpacity:function(t){return this.options.opacity=t,this._currentImage&&this._currentImage.setOpacity(t),this},getTimeRange:function(){return[this.options.from,this.options.to]},setTimeRange:function(t,e){return this.options.from=t,this.options.to=e,this._update(),this},metadata:function(t,e){return this.service.metadata(t,e),this},authenticate:function(t){return this.service.authenticate(t),this},redraw:function(){this._update()},_renderImage:function(t,s,e){if(this._map){if(e&&(t="data:"+e+";base64,"+t),!t)return;var r=new ct(t,s,{opacity:0,crossOrigin:this.options.withCredentials?"use-credentials":this.options.useCors,alt:this.options.alt,pane:this.options.pane||this.getPane(),interactive:this.options.interactive}).addTo(this._map),o=function(t){var e,i;r.off("error",o,this),this._map&&(e=t.target,i=this._currentImage,e._bounds.equals(s)&&e._bounds.equals(this._map.getBounds())?(this._currentImage=e,"front"===this.options.position?this.bringToFront():"back"===this.options.position&&this.bringToBack(),this.options.zIndex&&this.setZIndex(this.options.zIndex),this._map&&this._currentImage._map?this._currentImage.setOpacity(this.options.opacity):this._currentImage._map.removeLayer(this._currentImage),i&&this._map&&this._map.removeLayer(i),i&&i._map&&i._map.removeLayer(i)):this._map.removeLayer(e)),this.fire("load",{bounds:s})};r.once("error",function(){this._map.removeLayer(r),this.fire("error"),r.off("load",o,this)},this),r.once("load",o,this)}},_update:function(){var t,e,i;this._map&&(t=this._map.getZoom(),e=this._map.getBounds(),this._animatingZoom||this._map._panTransition&&this._map._panTransition._inProgress||(t>this.options.maxZoom||t<this.options.minZoom?this._currentImage&&(this._currentImage._map.removeLayer(this._currentImage),this._currentImage=null):(i=this._buildExportParams(),g.Util.extend(i,this.options.requestParams),i?(this._requestExport(i,e),this.fire("loading",{bounds:e})):this._currentImage&&(this._currentImage._map.removeLayer(this._currentImage),this._currentImage=null))))},_renderPopup:function(t,e,i,s){var r;t=g.latLng(t),this._shouldRenderPopup&&this._lastClick.equals(t)&&((r=this._popupFunction(e,i,s))&&this._popup.setLatLng(t).setContent(r).openOn(this._map))},_resetPopupState:function(t){this._shouldRenderPopup=!1,this._lastClick=t.latlng},_calculateBbox:function(){var t=this._map.getPixelBounds(),e=this._map.unproject(t.getBottomLeft()),i=this._map.unproject(t.getTopRight()),s=this._map.options.crs.project(i),r=this._map.options.crs.project(e),o=g.bounds(s,r);return[o.getBottomLeft().x,o.getBottomLeft().y,o.getTopRight().x,o.getTopRight().y].join(",")},_calculateImageSize:function(){var t=this._map.getPixelBounds(),e=this._map.getSize(),i=this._map.unproject(t.getBottomLeft()),s=this._map.unproject(t.getTopRight()),r=this._map.latLngToLayerPoint(s).y,o=this._map.latLngToLayerPoint(i).y;return(0<r||o<e.y)&&(e.y=o-r),e.x+","+e.y}}),dt=pt.extend({options:{updateInterval:150,format:"jpgpng",transparent:!0,f:"image"},query:function(){return this.service.query()},identify:function(){return this.service.identify()},initialize:function(t){t=U(t),this.service=ot(t),this.service.addEventParent(this),g.Util.setOptions(this,t)},setPixelType:function(t){return this.options.pixelType=t,this._update(),this},getPixelType:function(){return this.options.pixelType},setBandIds:function(t){return g.Util.isArray(t)?this.options.bandIds=t.join(","):this.options.bandIds=t.toString(),this._update(),this},getBandIds:function(){return this.options.bandIds},setNoData:function(t,e){return g.Util.isArray(t)?this.options.noData=t.join(","):this.options.noData=t.toString(),e&&(this.options.noDataInterpretation=e),this._update(),this},getNoData:function(){return this.options.noData},getNoDataInterpretation:function(){return this.options.noDataInterpretation},setRenderingRule:function(t){this.options.renderingRule=t,this._update()},getRenderingRule:function(){return this.options.renderingRule},setMosaicRule:function(t){this.options.mosaicRule=t,this._update()},getMosaicRule:function(){return this.options.mosaicRule},_getPopupData:function(s){var t=g.Util.bind(function(t,e,i){t||setTimeout(g.Util.bind(function(){this._renderPopup(s.latlng,t,e,i)},this),300)},this),e=this.identify().at(s.latlng);this.options.mosaicRule&&e.setMosaicRule(this.options.mosaicRule),e.run(t),this._shouldRenderPopup=!0,this._lastClick=s.latlng},_buildExportParams:function(){var t=parseInt(this._map.options.crs.code.split(":")[1],10),e={bbox:this._calculateBbox(),size:this._calculateImageSize(),format:this.options.format,transparent:this.options.transparent,bboxSR:t,imageSR:t};return this.options.from&&this.options.to&&(e.time=this.options.from.valueOf()+","+this.options.to.valueOf()),this.options.pixelType&&(e.pixelType=this.options.pixelType),this.options.interpolation&&(e.interpolation=this.options.interpolation),this.options.compressionQuality&&(e.compressionQuality=this.options.compressionQuality),this.options.bandIds&&(e.bandIds=this.options.bandIds),0!==this.options.noData&&!this.options.noData||(e.noData=this.options.noData),this.options.noDataInterpretation&&(e.noDataInterpretation=this.options.noDataInterpretation),this.service.options.token&&(e.token=this.service.options.token),this.options.renderingRule&&(e.renderingRule=JSON.stringify(this.options.renderingRule)),this.options.mosaicRule&&(e.mosaicRule=JSON.stringify(this.options.mosaicRule)),e},_requestExport:function(t,i){var e;"json"===this.options.f?this.service.request("exportImage",t,function(t,e){t||(this.options.token&&(e.href+="?token="+this.options.token),this.options.proxy&&(e.href=this.options.proxy+"?"+e.href),this._renderImage(e.href,i))},this):(t.f="image",e=this.options.url+"exportImage"+g.Util.getParamString(t),this.options.proxy&&(e=this.options.proxy+"?"+e),this._renderImage(e,i))}});var mt=pt.extend({options:{updateInterval:150,layers:!1,layerDefs:!1,timeOptions:!1,format:"png32",transparent:!0,f:"json"},initialize:function(t){t=U(t),this.service=st(t),this.service.addEventParent(this),g.Util.setOptions(this,t)},getDynamicLayers:function(){return this.options.dynamicLayers},setDynamicLayers:function(t){return this.options.dynamicLayers=t,this._update(),this},getLayers:function(){return this.options.layers},setLayers:function(t){return this.options.layers=t,this._update(),this},getLayerDefs:function(){return this.options.layerDefs},setLayerDefs:function(t){return this.options.layerDefs=t,this._update(),this},getTimeOptions:function(){return this.options.timeOptions},setTimeOptions:function(t){return this.options.timeOptions=t,this._update(),this},query:function(){return this.service.query()},identify:function(){return this.service.identify()},find:function(){return this.service.find()},_getPopupData:function(s){var t=g.Util.bind(function(t,e,i){t||setTimeout(g.Util.bind(function(){this._renderPopup(s.latlng,t,e,i)},this),300)},this),e=this.options.popup?this.options.popup.on(this._map).at(s.latlng):this.identify().on(this._map).at(s.latlng);if(e.params.maxAllowableOffset||e.simplify(this._map,.5),this.options.popup&&this.options.popup.params&&this.options.popup.params.layers||(this.options.layers?e.layers("visible:"+this.options.layers.join(",")):e.layers("visible")),this.options.layerDefs&&"string"!=typeof this.options.layerDefs&&!e.params.layerDefs)for(var i in this.options.layerDefs)this.options.layerDefs.hasOwnProperty(i)&&e.layerDef(i,this.options.layerDefs[i]);e.run(t),this._shouldRenderPopup=!0,this._lastClick=s.latlng},_buildExportParams:function(){var t=parseInt(this._map.options.crs.code.split(":")[1],10),e={bbox:this._calculateBbox(),size:this._calculateImageSize(),dpi:96,format:this.options.format,transparent:this.options.transparent,bboxSR:t,imageSR:t};if(this.options.dynamicLayers&&(e.dynamicLayers=this.options.dynamicLayers),this.options.layers){if(0===this.options.layers.length)return;e.layers="show:"+this.options.layers.join(",")}return this.options.layerDefs&&(e.layerDefs="string"==typeof this.options.layerDefs?this.options.layerDefs:JSON.stringify(this.options.layerDefs)),this.options.timeOptions&&(e.timeOptions=JSON.stringify(this.options.timeOptions)),this.options.from&&this.options.to&&(e.time=this.options.from.valueOf()+","+this.options.to.valueOf()),this.service.options.token&&(e.token=this.service.options.token),this.options.proxy&&(e.proxy=this.options.proxy),this.options.disableCache&&(e._ts=Date.now()),e},_requestExport:function(t,i){var e;"json"===this.options.f?this.service.request("export",t,function(t,e){t||(this.options.token&&e.href&&(e.href+="?token="+this.options.token),this.options.proxy&&e.href&&(e.href=this.options.proxy+"?"+e.href),e.href?this._renderImage(e.href,i):this._renderImage(e.imageData,i,e.contentType))},this):(t.f="image",e=this.options.url+"export"+g.Util.getParamString(t),this.options.proxy&&(e=this.options.proxy+"?"+e),this._renderImage(e,i))}});var ft=g.Layer.extend({options:{cellSize:512,updateWhenIdle:g.Browser.mobile,updateInterval:150,noWrap:!1,keepBuffer:1.5},initialize:function(t){g.Util.setOptions(this,t)},onAdd:function(t){this._cells={},this._activeCells={},this._resetView(),this._update()},onRemove:function(t){this._removeAllCells(),this._cellZoom=void 0},isLoading:function(){return this._loading},redraw:function(){return this._map&&(this._removeAllCells(),this._update()),this},getEvents:function(){var t={viewprereset:this._invalidateAll,viewreset:this._resetView,zoom:this._resetView,moveend:this._onMoveEnd};return this.options.updateWhenIdle||(this._onMove||(this._onMove=g.Util.throttle(this._onMoveEnd,this.options.updateInterval,this)),t.move=this._onMove),t},createCell:function(){return document.createElement("div")},removeCell:function(){},reuseCell:function(){},cellLeave:function(){},cellEnter:function(){},getCellSize:function(){var t=this.options.cellSize;return t instanceof g.Point?t:new g.Point(t,t)},_pruneCells:function(){if(this._map){var t,e,i;for(t in this._cells)(i=this._cells[t]).retain=i.current;for(t in this._cells){(i=this._cells[t]).current&&!i.active&&(e=i.coords,this._retainParent(e.x,e.y,e.z,e.z-5)||this._retainChildren(e.x,e.y,e.z,e.z+2))}for(t in this._cells)this._cells[t].retain||this._removeCell(t)}},_removeAllCells:function(){for(var t in this._cells)this._removeCell(t)},_invalidateAll:function(){this._removeAllCells(),this._cellZoom=void 0},_retainParent:function(t,e,i,s){var r=Math.floor(t/2),o=Math.floor(e/2),n=i-1,a=new g.Point(+r,+o);a.z=+n;var l=this._cellCoordsToKey(a),u=this._cells[l];return u&&u.active?u.retain=!0:(u&&u.loaded&&(u.retain=!0),s<n&&this._retainParent(r,o,n,s))},_retainChildren:function(t,e,i,s){for(var r=2*t;r<2*t+2;r++)for(var o=2*e;o<2*e+2;o++){var n=new g.Point(r,o);n.z=i+1;var a=this._cellCoordsToKey(n),l=this._cells[a];l&&l.active?l.retain=!0:(l&&l.loaded&&(l.retain=!0),i+1<s&&this._retainChildren(r,o,i+1,s))}},_resetView:function(t){var e=t&&(t.pinch||t.flyTo);e||this._setView(this._map.getCenter(),this._map.getZoom(),e,e)},_setView:function(t,e,i,s){var r=Math.round(e);s||(this._cellZoom=r,this._abortLoading&&this._abortLoading(),this._resetGrid(),void 0!==r&&this._update(t),i||this._pruneCells(),this._noPrune=!!i)},_resetGrid:function(){var t=this._map,e=t.options.crs,i=this._cellSize=this.getCellSize(),s=this._cellZoom,r=this._map.getPixelWorldBounds(this._cellZoom);r&&(this._globalCellRange=this._pxBoundsToCellRange(r)),this._wrapX=e.wrapLng&&!this.options.noWrap&&[Math.floor(t.project([0,e.wrapLng[0]],s).x/i.x),Math.ceil(t.project([0,e.wrapLng[1]],s).x/i.y)],this._wrapY=e.wrapLat&&!this.options.noWrap&&[Math.floor(t.project([e.wrapLat[0],0],s).y/i.x),Math.ceil(t.project([e.wrapLat[1],0],s).y/i.y)]},_onMoveEnd:function(t){t&&(t.pinch||t.flyTo)||!this._map||this._map._animatingZoom||this._update()},_getCelldPixelBounds:function(t){var e=this._map,i=e._animatingZoom?Math.max(e._animateToZoom,e.getZoom()):e.getZoom(),s=e.getZoomScale(i,this._cellZoom),r=e.project(t,this._cellZoom).floor(),o=e.getSize().divideBy(2*s);return new g.Bounds(r.subtract(o),r.add(o))},_update:function(t){var e=this._map;if(e){var i=Math.round(e.getZoom());void 0===t&&(t=e.getCenter());var s=this._getCelldPixelBounds(t),r=this._pxBoundsToCellRange(s),o=r.getCenter(),n=[],a=this.options.keepBuffer,l=new g.Bounds(r.getBottomLeft().subtract([a,-a]),r.getTopRight().add([a,-a]));if(!(isFinite(r.min.x)&&isFinite(r.min.y)&&isFinite(r.max.x)&&isFinite(r.max.y)))throw new Error("Attempted to load an infinite number of cells");for(var u in this._cells){var h=this._cells[u].coords;h.z===this._cellZoom&&l.contains(new g.Point(h.x,h.y))||(this._cells[u].current=!1)}if(1<Math.abs(i-this._cellZoom))this._setView(t,i);else{for(var c=r.min.y;c<=r.max.y;c++)for(var p=r.min.x;p<=r.max.x;p++){var d,m=new g.Point(p,c);m.z=this._cellZoom,this._isValidCell(m)&&((d=this._cells[this._cellCoordsToKey(m)])?d.current=!0:n.push(m))}if(n.sort(function(t,e){return t.distanceTo(o)-e.distanceTo(o)}),0!==n.length)for(this._loading||(this._loading=!0),p=0;p<n.length;p++){var f=this._cellCoordsToKey(n[p]),y=this._keyToCellCoords(f);this._activeCells[y]?this._reuseCell(n[p]):this._createCell(n[p])}}}},_isValidCell:function(t){var e=this._map.options.crs;if(!e.infinite){var i=this._globalCellRange;if(!e.wrapLng&&(t.x<i.min.x||t.x>i.max.x)||!e.wrapLat&&(t.y<i.min.y||t.y>i.max.y))return!1}if(!this.options.bounds)return!0;var s=this._cellCoordsToBounds(t);return g.toLatLngBounds(this.options.bounds).overlaps(s)},_keyToBounds:function(t){return this._cellCoordsToBounds(this._keyToCellCoords(t))},_cellCoordsToNwSe:function(t){var e=this._map,i=this.getCellSize(),s=t.scaleBy(i),r=s.add(i);return[e.unproject(s,t.z),e.unproject(r,t.z)]},_cellCoordsToBounds:function(t){var e=this._cellCoordsToNwSe(t),i=new g.LatLngBounds(e[0],e[1]);return this.options.noWrap||(i=this._map.wrapLatLngBounds(i)),i},_cellCoordsToKey:function(t){return t.x+":"+t.y+":"+t.z},_keyToCellCoords:function(t){var e=t.split(":"),i=new g.Point(+e[0],+e[1]);return i.z=+e[2],i},_removeCell:function(t){var e,i,s,r=this._cells[t];r&&(e=this._keyToCellCoords(t),i=this._wrapCoords(e),s=this._cellCoordsToBounds(this._wrapCoords(e)),r.current=!1,delete this._cells[t],this._activeCells[t]=r,this.cellLeave(s,i,t),this.fire("cellleave",{key:t,coords:i,bounds:s}))},_reuseCell:function(t){var e=this._cellCoordsToKey(t);this._cells[e]=this._activeCells[e],this._cells[e].current=!0;var i=this._wrapCoords(t),s=this._cellCoordsToBounds(this._wrapCoords(t));this.cellEnter(s,i,e),this.fire("cellenter",{key:e,coords:i,bounds:s})},_createCell:function(t){var e=this._cellCoordsToKey(t),i=this._wrapCoords(t),s=this._cellCoordsToBounds(this._wrapCoords(t));this.createCell(s,i,e),this.fire("cellcreate",{key:e,coords:i,bounds:s}),this._cells[e]={coords:t,current:!0},g.Util.requestAnimFrame(this._pruneCells,this)},_cellReady:function(t,e,i){var s=this._cellCoordsToKey(t);(i=this._cells[s])&&(i.loaded=+new Date,i.active=!0)},_getCellPos:function(t){return t.scaleBy(this.getCellSize())},_wrapCoords:function(t){var e=new g.Point(this._wrapX?g.Util.wrapNum(t.x,this._wrapX):t.x,this._wrapY?g.Util.wrapNum(t.y,this._wrapY):t.y);return e.z=t.z,e},_pxBoundsToCellRange:function(t){var e=this.getCellSize();return new g.Bounds(t.min.unscaleBy(e).floor(),t.max.unscaleBy(e).ceil().subtract([1,1]))}});function yt(t){this.values=[].concat(t||[])}yt.prototype.query=function(t){var e=this.getIndex(t);return this.values[e]},yt.prototype.getIndex=function(t){this.dirty&&this.sort();for(var e,i,s=0,r=this.values.length-1;s<=r;)if(e=(s+r)/2|0,+(i=this.values[Math.round(e)]).value<+t)s=1+e;else{if(!(+i.value>+t))return e;r=e-1}return Math.abs(~r)},yt.prototype.between=function(t,e){var i=this.getIndex(t),s=this.getIndex(e);if(0===i&&0===s)return[];for(;this.values[i-1]&&this.values[i-1].value===t;)i--;for(;this.values[s+1]&&this.values[s+1].value===e;)s++;return this.values[s]&&this.values[s].value===e&&this.values[s+1]&&s++,this.values.slice(i,s)},yt.prototype.insert=function(t){return this.values.splice(this.getIndex(t.value),0,t),this},yt.prototype.bulkAdd=function(t,e){return this.values=this.values.concat([].concat(t||[])),e?this.sort():this.dirty=!0,this},yt.prototype.sort=function(){return this.values.sort(function(t,e){return e.value-t.value}).reverse(),this.dirty=!1,this};var gt=ft.extend({options:{attribution:null,where:"1=1",fields:["*"],from:!1,to:!1,timeField:!1,timeFilterMode:"server",simplifyFactor:0,precision:6,fetchAllFeatures:!1},initialize:function(t){if(ft.prototype.initialize.call(this,t),t=U(t),t=g.Util.setOptions(this,t),this.service=at(t),this.service.addEventParent(this),"*"!==this.options.fields[0]){for(var e=!1,i=0;i<this.options.fields.length;i++)this.options.fields[i].match(/^(OBJECTID|FID|OID|ID)$/i)&&(e=!0);!1===e&&m("no known esriFieldTypeOID field detected in fields Array.  Please add an attribute field containing unique IDs to ensure the layer can be drawn correctly.")}this.options.timeField.start&&this.options.timeField.end?(this._startTimeIndex=new yt,this._endTimeIndex=new yt):this.options.timeField&&(this._timeIndex=new yt),this._cache={},this._currentSnapshot=[],this._activeRequests=0},onAdd:function(r){return E(r),this.service.metadata(function(t,e){var i,s;t||(i=e.supportedQueryFormats,(s=!1)!==this.service.options.isModern&&!this.options.fetchAllFeatures||(s=!0),!s&&i&&-1!==i.indexOf("geoJSON")&&(this.service.options.isModern=!0),e.objectIdField&&(this.service.options.idAttribute=e.objectIdField),!this.options.attribution&&r.attributionControl&&e.copyrightText&&(this.options.attribution=e.copyrightText,r.attributionControl.addAttribution(this.getAttribution())))},this),r.on("zoomend",this._handleZoomChange,this),ft.prototype.onAdd.call(this,r)},onRemove:function(t){return B(t),t.off("zoomend",this._handleZoomChange,this),ft.prototype.onRemove.call(this,t)},getAttribution:function(){return this.options.attribution},createCell:function(t,e){this._visibleZoom()&&this._requestFeatures(t,e)},_requestFeatures:function(s,r,o,n){this._activeRequests++,n=n||0;var a=this.options.where;return 1===this._activeRequests&&this.fire("loading",{bounds:s},!0),this._buildQuery(s,n).run(function(t,e,i){i&&i.exceededTransferLimit&&this.fire("drawlimitexceeded"),this.options.where===a&&(!t&&e&&e.features.length&&g.Util.requestAnimFrame(g.Util.bind(function(){this._addFeatures(e.features,r),this._postProcessFeatures(s)},this)),t||!e||e.features.length||this._postProcessFeatures(s),t&&this._postProcessFeatures(s),o&&o.call(this,t,e),i&&(i.exceededTransferLimit||i.properties&&i.properties.exceededTransferLimit)&&this.options.fetchAllFeatures&&this._requestFeatures(s,r,o,n+e.features.length))},this)},_postProcessFeatures:function(t){this._activeRequests--,this._activeRequests<=0&&this.fire("load",{bounds:t})},_cacheKey:function(t){return t.z+":"+t.x+":"+t.y},_addFeatures:function(t,e){var i;e&&(i=this._cacheKey(e),this._cache[i]=this._cache[i]||[]);for(var s=t.length-1;0<=s;s--){var r=t[s].id;-1===this._currentSnapshot.indexOf(r)&&this._currentSnapshot.push(r),void 0!==i&&-1===this._cache[i].indexOf(r)&&this._cache[i].push(r)}this.options.timeField&&this._buildTimeIndexes(t),this.createLayers(t)},_buildQuery:function(t,e){var i=this.service.query().intersects(t).where(this.options.where).fields(this.options.fields).precision(this.options.precision);return this.options.fetchAllFeatures&&!isNaN(parseInt(e))&&(i=i.offset(e)),i.params.resultType="tile",this.options.requestParams&&g.Util.extend(i.params,this.options.requestParams),this.options.simplifyFactor&&i.simplify(this._map,this.options.simplifyFactor),"server"===this.options.timeFilterMode&&this.options.from&&this.options.to&&i.between(this.options.from,this.options.to),i},setWhere:function(s,r,o){this.options.where=s&&s.length?s:"1=1";for(var n=[],a=[],l=0,u=null,t=g.Util.bind(function(t,e){if(t&&(u=t),e)for(var i=e.features.length-1;0<=i;i--)a.push(e.features[i].id);--l<=0&&this._visibleZoom()&&s===this.options.where&&(this._currentSnapshot=a,g.Util.requestAnimFrame(g.Util.bind(function(){this.removeLayers(n),this.addLayers(a),r&&r.call(o,u)},this)))},this),e=this._currentSnapshot.length-1;0<=e;e--)n.push(this._currentSnapshot[e]);for(var i in this._cache={},this._cells){l++;var h=this._keyToCellCoords(i),c=this._cellCoordsToBounds(h);this._requestFeatures(c,h,t)}return this},getWhere:function(){return this.options.where},getTimeRange:function(){return[this.options.from,this.options.to]},setTimeRange:function(e,i,s,r){var o=this.options.from,n=this.options.to,a=0,l=null,t=g.Util.bind(function(t){t&&(l=t),this._filterExistingFeatures(o,n,e,i),a--,s&&a<=0&&s.call(r,l)},this);if(this.options.from=e,this.options.to=i,this._filterExistingFeatures(o,n,e,i),"server"===this.options.timeFilterMode)for(var u in this._cells){a++;var h=this._keyToCellCoords(u),c=this._cellCoordsToBounds(h);this._requestFeatures(c,h,t)}return this},refresh:function(){this.setWhere(this.options.where)},_filterExistingFeatures:function(t,e,i,s){var r=t&&e?this._getFeaturesInTimeRange(t,e):this._currentSnapshot,o=this._getFeaturesInTimeRange(i,s);if(o.indexOf)for(var n=0;n<o.length;n++){var a=r.indexOf(o[n]);0<=a&&r.splice(a,1)}g.Util.requestAnimFrame(g.Util.bind(function(){this.removeLayers(r),this.addLayers(o)},this))},_getFeaturesInTimeRange:function(t,e){var i=[];if(this.options.timeField.start&&this.options.timeField.end)var s=this._startTimeIndex.between(t,e),r=this._endTimeIndex.between(t,e),o=s.concat(r);else{if(!this._timeIndex)return m("You must set timeField in the layer constructor in order to manipulate the start and end time filter."),[];o=this._timeIndex.between(t,e)}for(var n=o.length-1;0<=n;n--)i.push(o[n].id);return i},_buildTimeIndexes:function(t){var e;if(this.options.timeField.start&&this.options.timeField.end){for(var i=[],s=[],r=t.length-1;0<=r;r--)e=t[r],i.push({id:e.id,value:new Date(e.properties[this.options.timeField.start])}),s.push({id:e.id,value:new Date(e.properties[this.options.timeField.end])});this._startTimeIndex.bulkAdd(i),this._endTimeIndex.bulkAdd(s)}else{var o=[];for(r=t.length-1;0<=r;r--)e=t[r],o.push({id:e.id,value:new Date(e.properties[this.options.timeField])});this._timeIndex.bulkAdd(o)}},_featureWithinTimeRange:function(t){if(!this.options.from||!this.options.to)return!0;var e=+this.options.from.valueOf(),i=+this.options.to.valueOf();if("string"==typeof this.options.timeField){var s=+t.properties[this.options.timeField];return e<=s&&s<=i}if(this.options.timeField.start&&this.options.timeField.end){var r=+t.properties[this.options.timeField.start],o=+t.properties[this.options.timeField.end];return e<=r&&r<=i||e<=o&&o<=i||r<=e&&i<=o}},_visibleZoom:function(){if(!this._map)return!1;var t=this._map.getZoom();return!(t>this.options.maxZoom||t<this.options.minZoom)},_handleZoomChange:function(){if(this._visibleZoom())for(var t in this._cells){var e=this._cells[t].coords,i=this._cacheKey(e);this._cache[i]&&this.addLayers(this._cache[i])}else this.removeLayers(this._currentSnapshot),this._currentSnapshot=[]},authenticate:function(t){return this.service.authenticate(t),this},metadata:function(t,e){return this.service.metadata(t,e),this},query:function(){return this.service.query()},_getMetadata:function(i){this._metadata?i(void 0,this._metadata):this.metadata(g.Util.bind(function(t,e){this._metadata=e,i(t,this._metadata)},this))},addFeature:function(t,e,i){this.addFeatures(t,e,i)},addFeatures:function(e,o,n){this._getMetadata(g.Util.bind(function(t,s){var r;t?o&&o.call(this,t,null):(r=e.features?e.features:[e],this.service.addFeatures(e,g.Util.bind(function(t,e){if(!t){for(var i=r.length-1;0<=i;i--)r[i].properties[s.objectIdField]=1<r.length?e[i].objectId:e.objectId,r[i].id=1<r.length?e[i].objectId:e.objectId;this._addFeatures(r)}o&&o.call(n,t,e)},this)))},this))},updateFeature:function(t,e,i){this.updateFeatures(t,e,i)},updateFeatures:function(t,s,r){var o=t.features?t.features:[t];this.service.updateFeatures(t,function(t,e){if(!t){for(var i=o.length-1;0<=i;i--)this.removeLayers([o[i].id],!0);this._addFeatures(o)}s&&s.call(r,t,e)},this)},deleteFeature:function(t,e,i){this.deleteFeatures(t,e,i)},deleteFeatures:function(t,r,o){return this.service.deleteFeatures(t,function(t,e){var i=e.length?e:[e];if(!t&&0<i.length)for(var s=i.length-1;0<=s;s--)this.removeLayers([i[s].objectId],!0);r&&r.call(o,t,e)},this)}}),_t=gt.extend({options:{cacheLayers:!0},initialize:function(t){t.apikey&&(t.token=t.apikey),gt.prototype.initialize.call(this,t),this._originalStyle=this.options.style,this._layers={}},onRemove:function(t){for(var e in this._layers)t.removeLayer(this._layers[e]),this.fire("removefeature",{feature:this._layers[e].feature,permanent:!1},!0);return gt.prototype.onRemove.call(this,t)},createNewLayer:function(t){var e=g.GeoJSON.geometryToLayer(t,this.options);return e&&(e.defaultOptions=e.options),e},_updateLayer:function(t,e){var i=[],s=this.options.coordsToLatLng||g.GeoJSON.coordsToLatLng;switch(e.properties&&(t.feature.properties=e.properties),e.geometry.type){case"Point":i=g.GeoJSON.coordsToLatLng(e.geometry.coordinates),t.setLatLng(i);break;case"LineString":i=g.GeoJSON.coordsToLatLngs(e.geometry.coordinates,0,s),t.setLatLngs(i);break;case"MultiLineString":case"Polygon":i=g.GeoJSON.coordsToLatLngs(e.geometry.coordinates,1,s),t.setLatLngs(i);break;case"MultiPolygon":i=g.GeoJSON.coordsToLatLngs(e.geometry.coordinates,2,s),t.setLatLngs(i)}},createLayers:function(t){for(var e=t.length-1;0<=e;e--){var i,s=t[e],r=this._layers[s.id];!this._visibleZoom()||!r||this._map.hasLayer(r)||this.options.timeField&&!this._featureWithinTimeRange(s)||(this._map.addLayer(r),this.fire("addfeature",{feature:r.feature},!0)),r&&0<this.options.simplifyFactor&&(r.setLatLngs||r.setLatLng)&&this._updateLayer(r,s),r||((i=this.createNewLayer(s))?(i.feature=s,i.addEventParent(this),this.options.onEachFeature&&this.options.onEachFeature(i.feature,i),this._layers[i.feature.id]=i,this.setFeatureStyle(i.feature.id,this.options.style),this.fire("createfeature",{feature:i.feature},!0),this._visibleZoom()&&(!this.options.timeField||this.options.timeField&&this._featureWithinTimeRange(s))&&this._map.addLayer(i)):m("invalid GeoJSON encountered"))}},addLayers:function(t){for(var e=t.length-1;0<=e;e--){var i=this._layers[t[e]];!i||this.options.timeField&&!this._featureWithinTimeRange(i.feature)||(this._map.addLayer(i),this.fire("addfeature",{feature:i.feature},!0))}},removeLayers:function(t,e){for(var i=t.length-1;0<=i;i--){var s=t[i],r=this._layers[s];r&&(this.fire("removefeature",{feature:r.feature,permanent:e},!0),this._map.removeLayer(r)),r&&e&&delete this._layers[s]}},cellEnter:function(t,s){this._visibleZoom()&&!this._zooming&&this._map&&g.Util.requestAnimFrame(g.Util.bind(function(){var t=this._cacheKey(s),e=this._cellCoordsToKey(s),i=this._cache[t];this._activeCells[e]&&i&&this.addLayers(i)},this))},cellLeave:function(t,a){this._zooming||g.Util.requestAnimFrame(g.Util.bind(function(){if(this._map){var t=this._cacheKey(a),e=this._cellCoordsToKey(a),i=this._cache[t],s=this._map.getBounds();if(!this._activeCells[e]&&i){for(var r=!0,o=0;o<i.length;o++){var n=this._layers[i[o]];n&&n.getBounds&&s.intersects(n.getBounds())&&(r=!1)}r&&this.removeLayers(i,!this.options.cacheLayers),!this.options.cacheLayers&&r&&(delete this._cache[t],delete this._cells[e],delete this._activeCells[e])}}},this))},resetStyle:function(){return this.options.style=this._originalStyle,this.eachFeature(function(t){this.resetFeatureStyle(t.feature.id)},this),this},setStyle:function(e){return this.options.style=e,this.eachFeature(function(t){this.setFeatureStyle(t.feature.id,e)},this),this},resetFeatureStyle:function(t){var e=this._layers[t],i=this._originalStyle||g.Path.prototype.options;return e&&(g.Util.extend(e.options,e.defaultOptions),this.setFeatureStyle(t,i)),this},setFeatureStyle:function(t,e){var i=this._layers[t];return"function"==typeof e&&(e=e(i.feature)),i.setStyle&&i.setStyle(e),this},eachActiveFeature:function(t,e){if(this._map){var i=this._map.getBounds();for(var s in this._layers)-1!==this._currentSnapshot.indexOf(this._layers[s].feature.id)&&("function"==typeof this._layers[s].getLatLng&&i.contains(this._layers[s].getLatLng())||"function"==typeof this._layers[s].getBounds&&i.intersects(this._layers[s].getBounds()))&&t.call(e,this._layers[s])}return this},eachFeature:function(t,e){for(var i in this._layers)t.call(e,this._layers[i]);return this},getFeature:function(t){return this._layers[t]},bringToBack:function(){this.eachFeature(function(t){t.bringToBack&&t.bringToBack()})},bringToFront:function(){this.eachFeature(function(t){t.bringToFront&&t.bringToFront()})},redraw:function(t){return t&&this._redraw(t),this},_redraw:function(t){var e,i,s=this._layers[t],r=s.feature;s&&s.setIcon&&this.options.pointToLayer&&this.options.pointToLayer&&(e=this.options.pointToLayer(r,g.latLng(r.geometry.coordinates[1],r.geometry.coordinates[0])).options.icon,s.setIcon(e)),s&&s.setStyle&&this.options.pointToLayer&&(i=this.options.pointToLayer(r,g.latLng(r.geometry.coordinates[1],r.geometry.coordinates[0])).options,this.setFeatureStyle(r.id,i)),s&&s.setStyle&&this.options.style&&this.resetStyle(r.id)}});var vt=e;t.BasemapLayer=ut,t.DynamicMapLayer=mt,t.FeatureLayer=_t,t.FeatureLayerService=nt,t.FeatureManager=gt,t.Find=Q,t.Identify=H,t.IdentifyFeatures=X,t.IdentifyImage=$,t.ImageMapLayer=dt,t.ImageService=rt,t.MapService=it,t.Query=J,t.RasterLayer=pt,t.Service=et,t.Support=a,t.Task=W,t.TiledMapLayer=ht,t.Util=j,t.VERSION=vt,t.basemapLayer=function(t,e){return new ut(t,e)},t.dynamicMapLayer=function(t,e){return new mt(t,e)},t.featureLayer=function(t){return new _t(t)},t.featureLayerService=at,t.find=K,t.get=d,t.identify=function(t){return new H(t)},t.identifyFeatures=Y,t.identifyImage=tt,t.imageMapLayer=function(t,e){return new dt(t,e)},t.imageService=ot,t.mapService=st,t.options=r,t.post=o,t.query=V,t.request=c,t.service=function(t){return t=U(t),new et(t)},t.task=function(t){return t=U(t),new W(t)},t.tiledMapLayer=function(t,e){return new ht(t,e)},Object.defineProperty(t,"__esModule",{value:!0})});
-//# sourceMappingURL=esri-leaflet.js.map
\ No newline at end of file
+   * Apache-2.0 */function T(t,e){return A(t,e)}function C(t,e){return L(t,e)}function w(t){if("NaN"===t.xmin||"NaN"===t.ymin||"NaN"===t.xmax||"NaN"===t.ymax)return null;var e=g.latLng(t.ymin,t.xmin),i=g.latLng(t.ymax,t.xmax);return g.latLngBounds(e,i)}function R(t){return{xmin:(t=g.latLngBounds(t)).getSouthWest().lng,ymin:t.getSouthWest().lat,xmax:t.getNorthEast().lng,ymax:t.getNorthEast().lat,spatialReference:{wkid:4326}}}var P=/^(OBJECTID|FID|OID|ID)$/i;function F(t){var e;if(t.objectIdFieldName)e=t.objectIdFieldName;else if(t.fields){for(var i=0;i<=t.fields.length-1;i++)if("esriFieldTypeOID"===t.fields[i].type){e=t.fields[i].name;break}if(!e)for(i=0;i<=t.fields.length-1;i++)if(t.fields[i].name.match(P)){e=t.fields[i].name;break}}return e}function O(t){for(var e in t.attributes)if(e.match(P))return e}function k(t,e){var i=t.features||t.results,s=i&&i.length,r=e||F(t),o={type:"FeatureCollection",features:[]};if(s)for(var n=i.length-1;0<=n;n--){var a=C(i[n],r||O(i[n]));o.features.push(a)}return o}function M(t){return"/"!==(t=g.Util.trim(t))[t.length-1]&&(t+="/"),t}function U(t){var e;return-1!==t.url.indexOf("?")&&(t.requestParams=t.requestParams||{},e=t.url.substring(t.url.indexOf("?")+1),t.url=t.url.split("?")[0],t.requestParams=JSON.parse('{"'+decodeURI(e).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"')+'"}')),t.url=M(t.url.split("?")[0]),t}function G(t){return/^(?!.*utility\.arcgis\.com).*\.arcgis\.com.*FeatureServer/i.test(t)}function D(t){var e;switch(t){case"Point":e="esriGeometryPoint";break;case"MultiPoint":e="esriGeometryMultipoint";break;case"LineString":case"MultiLineString":e="esriGeometryPolyline";break;case"Polygon":case"MultiPolygon":e="esriGeometryPolygon"}return e}function q(t){return t.getSize().x-r.attributionWidthOffset+"px"}function E(e){var t,i;e.attributionControl&&(e.attributionControl._esriAttributionLayerCount||(e.attributionControl._esriAttributionLayerCount=0),0===e.attributionControl._esriAttributionLayerCount&&(e.attributionControl._esriAttributionAddedOnce||((t=document.createElement("style")).type="text/css",t.innerHTML=".esri-truncated-attribution:hover {white-space: normal;}",document.getElementsByTagName("head")[0].appendChild(t),(i=document.createElement("style")).type="text/css",i.innerHTML=".esri-truncated-attribution {vertical-align: -3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;transition: 0s white-space;transition-delay: 1s;max-width: "+q(e)+";}",document.getElementsByTagName("head")[0].appendChild(i),e.on("resize",function(t){e.attributionControl&&(e.attributionControl._container.style.maxWidth=q(t.target))}),e.attributionControl._esriAttributionAddedOnce=!0),e.attributionControl.setPrefix(I+' | Powered by <a href="https://www.esri.com">Esri</a>'),g.DomUtil.addClass(e.attributionControl._container,"esri-truncated-attribution:hover"),g.DomUtil.addClass(e.attributionControl._container,"esri-truncated-attribution")),e.attributionControl._esriAttributionLayerCount=e.attributionControl._esriAttributionLayerCount+1)}function B(t){t.attributionControl&&(t.attributionControl._esriAttributionLayerCount&&1===t.attributionControl._esriAttributionLayerCount&&(t.attributionControl.setPrefix(I),g.DomUtil.removeClass(t.attributionControl._container,"esri-truncated-attribution:hover"),g.DomUtil.removeClass(t.attributionControl._container,"esri-truncated-attribution")),t.attributionControl._esriAttributionLayerCount=t.attributionControl._esriAttributionLayerCount-1)}function z(t){var e={geometry:null,geometryType:null};return t instanceof g.LatLngBounds?(e.geometry=R(t),e.geometryType="esriGeometryEnvelope",e):(t.getLatLng&&(t=t.getLatLng()),t instanceof g.LatLng&&(t={type:"Point",coordinates:[t.lng,t.lat]}),t instanceof g.GeoJSON&&(t=t.getLayers()[0].feature.geometry,e.geometry=T(t),e.geometryType=D(t.type)),t.toGeoJSON&&(t=t.toGeoJSON()),"Feature"===t.type&&(t=t.geometry),"Point"===t.type||"LineString"===t.type||"Polygon"===t.type||"MultiPolygon"===t.type?(e.geometry=T(t),e.geometryType=D(t.type),e):void m("invalid geometry passed to spatial query. Should be L.LatLng, L.LatLngBounds, L.Marker or a GeoJSON Point, Line, Polygon or MultiPolygon object"))}function Z(t,l){a.cors&&c(t,{},g.Util.bind(function(t,e){if(!t){l._esriAttributions=[];for(var i=0;i<e.contributors.length;i++)for(var s=e.contributors[i],r=0;r<s.coverageAreas.length;r++){var o=s.coverageAreas[r],n=g.latLng(o.bbox[0],o.bbox[1]),a=g.latLng(o.bbox[2],o.bbox[3]);l._esriAttributions.push({attribution:s.attribution,score:o.score,bounds:g.latLngBounds(n,a),minZoom:o.zoomMin,maxZoom:o.zoomMax})}l._esriAttributions.sort(function(t,e){return e.score-t.score}),N({target:l})}},this))}function N(t){var e=t.target,i=e._esriAttributions;if(e&&e.attributionControl){var s=e.attributionControl._container.querySelector(".esri-dynamic-attribution");if(s&&i){for(var r="",o=e.getBounds(),n=g.latLngBounds(o.getSouthWest().wrap(),o.getNorthEast().wrap()),a=e.getZoom(),l=0;l<i.length;l++){var u=i[l],h=u.attribution;!r.match(h)&&u.bounds.intersects(n)&&a>=u.minZoom&&a<=u.maxZoom&&(r+=", "+h)}r=r.substr(2),s.innerHTML=r,s.style.maxWidth=q(e),e.fire("attributionupdated",{attribution:r})}}}var j={warn:m,cleanUrl:M,getUrlParams:U,isArcgisOnline:G,geojsonTypeToArcGIS:D,responseToFeatureCollection:k,geojsonToArcGIS:T,arcgisToGeoJSON:C,boundsToExtent:R,extentToBounds:w,calcAttributionWidth:q,setEsriAttribution:E,_setGeometry:z,_getAttributionData:Z,_updateMapAttribution:N,_findIdAttributeFromFeature:O,_findIdAttributeFromResponse:F},W=g.Class.extend({options:{proxy:!1,useCors:i},generateSetter:function(e,t){return g.Util.bind(function(t){return this.params[e]=t,this},t)},initialize:function(t){if(t.request&&t.options?(this._service=t,g.Util.setOptions(this,t.options)):(g.Util.setOptions(this,t),this.options.url=M(t.url)),this.params=g.Util.extend({},this.params||{}),this.setters)for(var e in this.setters){var i=this.setters[e];this[e]=this.generateSetter(i,this)}},token:function(t){return this._service?this._service.authenticate(t):this.params.token=t,this},apikey:function(t){return this.token(t)},format:function(t){return this.params.returnUnformattedValues=!t,this},request:function(t,e){return this.options.requestParams&&g.Util.extend(this.params,this.options.requestParams),this._service?this._service.request(this.path,this.params,t,e):this._request("request",this.path,this.params,t,e)},_request:function(t,e,i,s,r){var o=this.options.proxy?this.options.proxy+"?"+this.options.url+e:this.options.url+e;return"get"!==t&&"request"!==t||this.options.useCors?S[t](o,i,s,r):S.get.JSONP(o,i,s,r)}});var J=W.extend({setters:{offset:"resultOffset",limit:"resultRecordCount",fields:"outFields",precision:"geometryPrecision",featureIds:"objectIds",returnGeometry:"returnGeometry",returnM:"returnM",transform:"datumTransformation",token:"token"},path:"query",params:{returnGeometry:!0,where:"1=1",outSR:4326,outFields:"*"},within:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelContains",this},intersects:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelIntersects",this},contains:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelWithin",this},crosses:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelCrosses",this},touches:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelTouches",this},overlaps:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelOverlaps",this},bboxIntersects:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelEnvelopeIntersects",this},indexIntersects:function(t){return this._setGeometryParams(t),this.params.spatialRel="esriSpatialRelIndexIntersects",this},nearby:function(t,e){return t=g.latLng(t),this.params.geometry=[t.lng,t.lat],this.params.geometryType="esriGeometryPoint",this.params.spatialRel="esriSpatialRelIntersects",this.params.units="esriSRUnit_Meter",this.params.distance=e,this.params.inSR=4326,this},where:function(t){return this.params.where=t,this},between:function(t,e){return this.params.time=[t.valueOf(),e.valueOf()],this},simplify:function(t,e){var i=Math.abs(t.getBounds().getWest()-t.getBounds().getEast());return this.params.maxAllowableOffset=i/t.getSize().y*e,this},orderBy:function(t,e){return e=e||"ASC",this.params.orderByFields=this.params.orderByFields?this.params.orderByFields+",":"",this.params.orderByFields+=[t,e].join(" "),this},run:function(i,s){return this._cleanParams(),this.options.isModern||G(this.options.url)&&void 0===this.options.isModern?(this.params.f="geojson",this.request(function(t,e){this._trapSQLerrors(t),i.call(s,t,e,e)},this)):this.request(function(t,e){this._trapSQLerrors(t),i.call(s,t,e&&k(e),e)},this)},count:function(i,t){return this._cleanParams(),this.params.returnCountOnly=!0,this.request(function(t,e){i.call(this,t,e&&e.count,e)},t)},ids:function(i,t){return this._cleanParams(),this.params.returnIdsOnly=!0,this.request(function(t,e){i.call(this,t,e&&e.objectIds,e)},t)},bounds:function(i,s){return this._cleanParams(),this.params.returnExtentOnly=!0,this.request(function(t,e){e&&e.extent&&w(e.extent)?i.call(s,t,w(e.extent),e):(t={message:"Invalid Bounds"},i.call(s,t,null,e))},s)},distinct:function(){return this.params.returnGeometry=!1,this.params.returnDistinctValues=!0,this},pixelSize:function(t){var e=g.point(t);return this.params.pixelSize=[e.x,e.y],this},layer:function(t){return this.path=t+"/query",this},_trapSQLerrors:function(t){t&&"400"===t.code&&m("one common syntax error in query requests is encasing string values in double quotes instead of single quotes")},_cleanParams:function(){delete this.params.returnIdsOnly,delete this.params.returnExtentOnly,delete this.params.returnCountOnly},_setGeometryParams:function(t){this.params.inSR=4326;var e=z(t);this.params.geometry=e.geometry,this.params.geometryType=e.geometryType}});function V(t){return new J(t)}var Q=W.extend({setters:{contains:"contains",text:"searchText",fields:"searchFields",spatialReference:"sr",sr:"sr",layers:"layers",returnGeometry:"returnGeometry",maxAllowableOffset:"maxAllowableOffset",precision:"geometryPrecision",dynamicLayers:"dynamicLayers",returnZ:"returnZ",returnM:"returnM",gdbVersion:"gdbVersion",token:"token"},path:"find",params:{sr:4326,contains:!0,returnGeometry:!0,returnZ:!0,returnM:!1},layerDefs:function(t,e){return this.params.layerDefs=this.params.layerDefs?this.params.layerDefs+";":"",this.params.layerDefs+=[t,e].join(":"),this},simplify:function(t,e){var i=Math.abs(t.getBounds().getWest()-t.getBounds().getEast());return this.params.maxAllowableOffset=i/t.getSize().y*e,this},run:function(i,s){return this.request(function(t,e){i.call(s,t,e&&k(e),e)},s)}});function K(t){return new Q(t)}var H=W.extend({path:"identify",between:function(t,e){return this.params.time=[t.valueOf(),e.valueOf()],this}});var X=H.extend({setters:{layers:"layers",precision:"geometryPrecision",tolerance:"tolerance",returnGeometry:"returnGeometry"},params:{sr:4326,layers:"all",tolerance:3,returnGeometry:!0},on:function(t){var e=R(t.getBounds()),i=t.getSize();return this.params.imageDisplay=[i.x,i.y,96],this.params.mapExtent=[e.xmin,e.ymin,e.xmax,e.ymax],this},at:function(t){return 2===t.length&&(t=g.latLng(t)),this._setGeometryParams(t),this},layerDef:function(t,e){return this.params.layerDefs=this.params.layerDefs?this.params.layerDefs+";":"",this.params.layerDefs+=[t,e].join(":"),this},simplify:function(t,e){var i=Math.abs(t.getBounds().getWest()-t.getBounds().getEast());return this.params.maxAllowableOffset=i/t.getSize().y*e,this},run:function(r,o){return this.request(function(t,e){if(t)r.call(o,t,void 0,e);else{var i=k(e);e.results=e.results.reverse();for(var s=0;s<i.features.length;s++){i.features[s].layerId=e.results[s].layerId}r.call(o,void 0,i,e)}})},_setGeometryParams:function(t){var e=z(t);this.params.geometry=e.geometry,this.params.geometryType=e.geometryType}});function Y(t){return new X(t)}var $=H.extend({setters:{setMosaicRule:"mosaicRule",setRenderingRule:"renderingRule",setPixelSize:"pixelSize",returnCatalogItems:"returnCatalogItems",returnGeometry:"returnGeometry"},params:{returnGeometry:!1},at:function(t){return t=g.latLng(t),this.params.geometry=JSON.stringify({x:t.lng,y:t.lat,spatialReference:{wkid:4326}}),this.params.geometryType="esriGeometryPoint",this},getMosaicRule:function(){return this.params.mosaicRule},getRenderingRule:function(){return this.params.renderingRule},getPixelSize:function(){return this.params.pixelSize},run:function(i,s){return this.request(function(t,e){i.call(s,t,e&&this._responseToGeoJSON(e),e)},this)},_responseToGeoJSON:function(t){var e=t.location,i=t.catalogItems,s=t.catalogItemVisibilities,r={pixel:{type:"Feature",geometry:{type:"Point",coordinates:[e.x,e.y]},crs:{type:"EPSG",properties:{code:e.spatialReference.wkid}},properties:{OBJECTID:t.objectId,name:t.name,value:t.value},id:t.objectId}};if(t.properties&&t.properties.Values&&(r.pixel.properties.values=t.properties.Values),i&&i.features&&(r.catalogItems=k(i),s&&s.length===r.catalogItems.features.length))for(var o=s.length-1;0<=o;o--)r.catalogItems.features[o].properties.catalogItemVisibility=s[o];return r}});function tt(t){return new $(t)}var et=g.Evented.extend({options:{proxy:!1,useCors:i,timeout:0},initialize:function(t){t=t||{},this._requestQueue=[],this._authenticating=!1,g.Util.setOptions(this,t),this.options.url=M(this.options.url)},get:function(t,e,i,s){return this._request("get",t,e,i,s)},post:function(t,e,i,s){return this._request("post",t,e,i,s)},request:function(t,e,i,s){return this._request("request",t,e,i,s)},metadata:function(t,e){return this._request("get","",{},t,e)},authenticate:function(t){return this._authenticating=!1,this.options.token=t,this._runQueue(),this},getTimeout:function(){return this.options.timeout},setTimeout:function(t){this.options.timeout=t},_request:function(t,e,i,s,r){this.fire("requeststart",{url:this.options.url+e,params:i,method:t},!0);var o=this._createServiceCallback(t,e,i,s,r);if(this.options.token&&(i.token=this.options.token),this.options.requestParams&&g.Util.extend(i,this.options.requestParams),!this._authenticating){var n=this.options.proxy?this.options.proxy+"?"+this.options.url+e:this.options.url+e;return"get"!==t&&"request"!==t||this.options.useCors?S[t](n,i,o,r):S.get.JSONP(n,i,o,r)}this._requestQueue.push([t,e,i,s,r])},_createServiceCallback:function(i,s,r,o,n){return g.Util.bind(function(t,e){!t||499!==t.code&&498!==t.code||(this._authenticating=!0,this._requestQueue.push([i,s,r,o,n]),this.fire("authenticationrequired",{authenticate:g.Util.bind(this.authenticate,this)},!0),t.authenticate=g.Util.bind(this.authenticate,this)),o.call(n,t,e),t?this.fire("requesterror",{url:this.options.url+s,params:r,message:t.message,code:t.code,method:i},!0):this.fire("requestsuccess",{url:this.options.url+s,params:r,response:e,method:i},!0),this.fire("requestend",{url:this.options.url+s,params:r,method:i},!0)},this)},_runQueue:function(){for(var t=this._requestQueue.length-1;0<=t;t--){var e=this._requestQueue[t];this[e.shift()].apply(this,e)}this._requestQueue=[]}});var it=et.extend({identify:function(){return Y(this)},find:function(){return K(this)},query:function(){return V(this)}});function st(t){return new it(t)}var rt=et.extend({query:function(){return V(this)},identify:function(){return tt(this)}});function ot(t){return new rt(t)}var nt=et.extend({options:{idAttribute:"OBJECTID"},query:function(){return V(this)},addFeature:function(t,e,i){this.addFeatures(t,e,i)},addFeatures:function(t,s,r){for(var e=t.features?t.features:[t],i=e.length-1;0<=i;i--)delete e[i].id;return t=T(t),t=1<e.length?t:[t],this.post("addFeatures",{features:t},function(t,e){var i=e&&e.addResults?1<e.addResults.length?e.addResults:e.addResults[0]:void 0;s&&s.call(r,t||e.addResults[0].error,i)},r)},updateFeature:function(t,e,i){this.updateFeatures(t,e,i)},updateFeatures:function(t,s,r){var e=t.features?t.features:[t];return t=T(t,this.options.idAttribute),t=1<e.length?t:[t],this.post("updateFeatures",{features:t},function(t,e){var i=e&&e.updateResults?1<e.updateResults.length?e.updateResults:e.updateResults[0]:void 0;s&&s.call(r,t||e.updateResults[0].error,i)},r)},deleteFeature:function(t,e,i){this.deleteFeatures(t,e,i)},deleteFeatures:function(t,s,r){return this.post("deleteFeatures",{objectIds:t},function(t,e){var i=e&&e.deleteResults?1<e.deleteResults.length?e.deleteResults:e.deleteResults[0]:void 0;s&&s.call(r,t||e.deleteResults[0].error,i)},r)}});function at(t){return new nt(t)}var lt="https:"!==window.location.protocol?"http:":"https:",ut=g.TileLayer.extend({statics:{TILES:{Streets:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,subdomains:["server","services"],attribution:"USGS, NOAA",attributionUrl:""}},Topographic:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,subdomains:["server","services"],attribution:"USGS, NOAA",attributionUrl:""}},Oceans:{urlTemplate:lt+"//{s}.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],attribution:"USGS, NOAA",attributionUrl:""}},OceansLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},NationalGeographic:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],attribution:"National Geographic, DeLorme, HERE, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, increment P Corp."}},DarkGray:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],attribution:"HERE, DeLorme, MapmyIndia, &copy; OpenStreetMap contributors"}},DarkGrayLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Reference/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},Gray:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],attribution:"HERE, DeLorme, MapmyIndia, &copy; OpenStreetMap contributors"}},GrayLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:16,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},Imagery:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,subdomains:["server","services"],attribution:"DigitalGlobe, GeoEye, i-cubed, USDA, USGS, AEX, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community",attributionUrl:""}},ImageryLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},ImageryTransportation:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},ShadedRelief:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:13,subdomains:["server","services"],attribution:"USGS"}},ShadedReliefLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:12,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},Terrain:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:13,subdomains:["server","services"],attribution:"USGS, NOAA"}},TerrainLabels:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:13,subdomains:["server","services"],pane:s?"esri-labels":"tilePane",attribution:""}},USATopo:{urlTemplate:lt+"//{s}.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:15,subdomains:["server","services"],attribution:"USGS, National Geographic Society, i-cubed"}},ImageryClarity:{urlTemplate:lt+"//clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,attribution:"Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community"}},Physical:{urlTemplate:lt+"//{s}.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:8,subdomains:["server","services"],attribution:"U.S. National Park Service"}},ImageryFirefly:{urlTemplate:lt+"//fly.maptiles.arcgis.com/arcgis/rest/services/World_Imagery_Firefly/MapServer/tile/{z}/{y}/{x}",options:{minZoom:1,maxZoom:19,attribution:"Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community",attributionUrl:""}}}},initialize:function(t,e){var i;if("object"==typeof t&&t.urlTemplate&&t.options)i=t;else{if("string"!=typeof t||!ut.TILES[t])throw new Error('L.esri.BasemapLayer: Invalid parameter. Use one of "Streets", "Topographic", "Oceans", "OceansLabels", "NationalGeographic", "Physical", "Gray", "GrayLabels", "DarkGray", "DarkGrayLabels", "Imagery", "ImageryLabels", "ImageryTransportation", "ImageryClarity", "ImageryFirefly", ShadedRelief", "ShadedReliefLabels", "Terrain", "TerrainLabels" or "USATopo"');i=ut.TILES[t]}var s=g.Util.extend(i.options,e);g.Util.setOptions(this,s),this.options.ignoreDeprecationWarning||console.warn("WARNING: L.esri.BasemapLayer uses data services that are in mature support and are not being updated. Please use L.esri.Vector.vectorBasemapLayer instead. More info: https://esriurl.com/esri-leaflet-basemap"),this.options.token&&-1===i.urlTemplate.indexOf("token=")&&(i.urlTemplate+="?token="+this.options.token),this.options.proxy&&(i.urlTemplate=this.options.proxy+"?"+i.urlTemplate),g.TileLayer.prototype.initialize.call(this,i.urlTemplate,s)},onAdd:function(t){E(t),"esri-labels"===this.options.pane&&this._initPane(),this.options.attributionUrl&&Z((this.options.proxy?this.options.proxy+"?":"")+this.options.attributionUrl,t),t.on("moveend",N),g.TileLayer.prototype.onAdd.call(this,t)},onRemove:function(t){B(t),t.off("moveend",N),g.TileLayer.prototype.onRemove.call(this,t)},_initPane:function(){var t;this._map.getPane(this.options.pane)||((t=this._map.createPane(this.options.pane)).style.pointerEvents="none",t.style.zIndex=500)},getAttribution:function(){var t;return this.options.attribution&&(t='<span class="esri-dynamic-attribution">'+this.options.attribution+"</span>"),t}});var ht=g.TileLayer.extend({options:{zoomOffsetAllowance:.1,errorTileUrl:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEABAMAAACuXLVVAAAAA1BMVEUzNDVszlHHAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAAAAAAAAAB6mUWpAAAADZJREFUeJztwQEBAAAAgiD/r25IQAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7waBAAABw08RwAAAAABJRU5ErkJggg=="},statics:{MercatorZoomLevels:{0:156543.033928,1:78271.5169639999,2:39135.7584820001,3:19567.8792409999,4:9783.93962049996,5:4891.96981024998,6:2445.98490512499,7:1222.99245256249,8:611.49622628138,9:305.748113140558,10:152.874056570411,11:76.4370282850732,12:38.2185141425366,13:19.1092570712683,14:9.55462853563415,15:4.77731426794937,16:2.38865713397468,17:1.19432856685505,18:.597164283559817,19:.298582141647617,20:.14929107082381,21:.07464553541191,22:.0373227677059525,23:.0186613838529763}},initialize:function(t){t=U(t=g.Util.setOptions(this,t)),this.tileUrl=(t.proxy?t.proxy+"?":"")+t.url+"tile/{z}/{y}/{x}"+(t.requestParams&&0<Object.keys(t.requestParams).length?g.Util.getParamString(t.requestParams):""),-1!==t.url.indexOf("{s}")&&t.subdomains&&(t.url=t.url.replace("{s}",t.subdomains[0])),this.service=st(t),this.service.addEventParent(this),new RegExp(/tiles.arcgis(online)?\.com/g).test(t.url)&&(this.tileUrl=this.tileUrl.replace("://tiles","://tiles{s}"),t.subdomains=["1","2","3","4"]),this.options.token&&(this.tileUrl+="?token="+this.options.token),g.TileLayer.prototype.initialize.call(this,this.tileUrl,t)},getTileUrl:function(t){var e=this._getZoomForUrl();return g.Util.template(this.tileUrl,g.Util.extend({s:this._getSubdomain(t),x:t.x,y:t.y,z:this._lodMap&&this._lodMap[e]?this._lodMap[e]:e},this.options))},createTile:function(t,e){var i=document.createElement("img");return g.DomEvent.on(i,"load",g.Util.bind(this._tileOnLoad,this,e,i)),g.DomEvent.on(i,"error",g.Util.bind(this._tileOnError,this,e,i)),this.options.crossOrigin&&(i.crossOrigin=""),i.alt="",!this._lodMap||this._lodMap&&this._lodMap[this._getZoomForUrl()]?i.src=this.getTileUrl(t):this.once("lodmap",function(){i.src=this.getTileUrl(t)},this),i},onAdd:function(u){E(u),this._lodMap||this.metadata(function(t,e){if(!t&&e.spatialReference){var i=e.spatialReference.latestWkid||e.spatialReference.wkid;if(!this.options.attribution&&u.attributionControl&&e.copyrightText&&(this.options.attribution=e.copyrightText,u.attributionControl.addAttribution(this.getAttribution())),u.options.crs!==g.CRS.EPSG3857||102100!==i&&3857!==i)u.options.crs&&u.options.crs.code&&-1<u.options.crs.code.indexOf(i)||m("L.esri.TiledMapLayer is using a non-mercator spatial reference. Support may be available through Proj4Leaflet http://esri.github.io/esri-leaflet/examples/non-mercator-projection.html");else{this._lodMap={};for(var s=e.tileInfo.lods,r=ht.MercatorZoomLevels,o=0;o<s.length;o++){var n=s[o];for(var a in r){var l=r[a];if(this._withinPercentage(n.resolution,l,this.options.zoomOffsetAllowance)){this._lodMap[a]=n.level;break}}}this.fire("lodmap")}}},this),g.TileLayer.prototype.onAdd.call(this,u)},onRemove:function(t){B(t),g.TileLayer.prototype.onRemove.call(this,t)},metadata:function(t,e){return this.service.metadata(t,e),this},identify:function(){return this.service.identify()},find:function(){return this.service.find()},query:function(){return this.service.query()},authenticate:function(t){var e="?token="+t;return this.tileUrl=this.options.token?this.tileUrl.replace(/\?token=(.+)/g,e):this.tileUrl+e,this.options.token=t,this.service.authenticate(t),this},_withinPercentage:function(t,e,i){return Math.abs(t/e-1)<i}});var ct=g.ImageOverlay.extend({onAdd:function(t){this._topLeft=t.getPixelBounds().min,g.ImageOverlay.prototype.onAdd.call(this,t)},_reset:function(){this._map.options.crs===g.CRS.EPSG3857?g.ImageOverlay.prototype._reset.call(this):g.DomUtil.setPosition(this._image,this._topLeft.subtract(this._map.getPixelOrigin()))}}),pt=g.Layer.extend({options:{opacity:1,position:"front",f:"image",useCors:i,attribution:null,interactive:!1,alt:""},onAdd:function(i){E(i),this.options.zIndex&&(this.options.position=null),this._update=g.Util.throttle(this._update,this.options.updateInterval,this),i.on("moveend",this._update,this),this._currentImage&&this._currentImage._bounds.equals(this._map.getBounds())?i.addLayer(this._currentImage):this._currentImage&&(this._map.removeLayer(this._currentImage),this._currentImage=null),this._update(),this._popup&&(this._map.on("click",this._getPopupData,this),this._map.on("dblclick",this._resetPopupState,this)),this.metadata(function(t,e){!t&&!this.options.attribution&&i.attributionControl&&e.copyrightText&&(this.options.attribution=e.copyrightText,i.attributionControl.addAttribution(this.getAttribution()))},this)},onRemove:function(t){B(t),this._currentImage&&this._map.removeLayer(this._currentImage),this._popup&&(this._map.off("click",this._getPopupData,this),this._map.off("dblclick",this._resetPopupState,this)),this._map.off("moveend",this._update,this)},bindPopup:function(t,e){return this._shouldRenderPopup=!1,this._lastClick=!1,this._popup=g.popup(e),this._popupFunction=t,this._map&&(this._map.on("click",this._getPopupData,this),this._map.on("dblclick",this._resetPopupState,this)),this},unbindPopup:function(){return this._map&&(this._map.closePopup(this._popup),this._map.off("click",this._getPopupData,this),this._map.off("dblclick",this._resetPopupState,this)),this._popup=!1,this},bringToFront:function(){return this.options.position="front",this._currentImage&&(this._currentImage.bringToFront(),this._setAutoZIndex(Math.max)),this},bringToBack:function(){return this.options.position="back",this._currentImage&&(this._currentImage.bringToBack(),this._setAutoZIndex(Math.min)),this},setZIndex:function(t){return this.options.zIndex=t,this._currentImage&&this._currentImage.setZIndex(t),this},_setAutoZIndex:function(t){if(this._currentImage){for(var e,i=this._currentImage.getPane().children,s=-t(-1/0,1/0),r=0,o=i.length;r<o;r++)e=i[r].style.zIndex,i[r]!==this._currentImage._image&&e&&(s=t(s,+e));isFinite(s)&&(this.options.zIndex=s+t(-1,1),this.setZIndex(this.options.zIndex))}},getAttribution:function(){return this.options.attribution},getOpacity:function(){return this.options.opacity},setOpacity:function(t){return this.options.opacity=t,this._currentImage&&this._currentImage.setOpacity(t),this},getTimeRange:function(){return[this.options.from,this.options.to]},setTimeRange:function(t,e){return this.options.from=t,this.options.to=e,this._update(),this},metadata:function(t,e){return this.service.metadata(t,e),this},authenticate:function(t){return this.service.authenticate(t),this},redraw:function(){this._update()},_renderImage:function(t,s,e){if(this._map){if(e&&(t="data:"+e+";base64,"+t),!t)return;var r=new ct(t,s,{opacity:0,crossOrigin:this.options.withCredentials?"use-credentials":this.options.useCors,alt:this.options.alt,pane:this.options.pane||this.getPane(),interactive:this.options.interactive}).addTo(this._map),o=function(t){var e,i;r.off("error",o,this),this._map&&(e=t.target,i=this._currentImage,e._bounds.equals(s)&&e._bounds.equals(this._map.getBounds())?(this._currentImage=e,"front"===this.options.position?this.bringToFront():"back"===this.options.position&&this.bringToBack(),this.options.zIndex&&this.setZIndex(this.options.zIndex),this._map&&this._currentImage._map?this._currentImage.setOpacity(this.options.opacity):this._currentImage._map.removeLayer(this._currentImage),i&&this._map&&this._map.removeLayer(i),i&&i._map&&i._map.removeLayer(i)):this._map.removeLayer(e)),this.fire("load",{bounds:s})};r.once("error",function(){this._map.removeLayer(r),this.fire("error"),r.off("load",o,this)},this),r.once("load",o,this)}},_update:function(){var t,e,i;this._map&&(t=this._map.getZoom(),e=this._map.getBounds(),this._animatingZoom||this._map._panTransition&&this._map._panTransition._inProgress||(t>this.options.maxZoom||t<this.options.minZoom?this._currentImage&&(this._currentImage._map.removeLayer(this._currentImage),this._currentImage=null):(i=this._buildExportParams(),g.Util.extend(i,this.options.requestParams),i?(this._requestExport(i,e),this.fire("loading",{bounds:e})):this._currentImage&&(this._currentImage._map.removeLayer(this._currentImage),this._currentImage=null))))},_renderPopup:function(t,e,i,s){var r;t=g.latLng(t),this._shouldRenderPopup&&this._lastClick.equals(t)&&((r=this._popupFunction(e,i,s))&&this._popup.setLatLng(t).setContent(r).openOn(this._map))},_resetPopupState:function(t){this._shouldRenderPopup=!1,this._lastClick=t.latlng},_calculateBbox:function(){var t=this._map.getPixelBounds(),e=this._map.unproject(t.getBottomLeft()),i=this._map.unproject(t.getTopRight()),s=this._map.options.crs.project(i),r=this._map.options.crs.project(e),o=g.bounds(s,r);return[o.getBottomLeft().x,o.getBottomLeft().y,o.getTopRight().x,o.getTopRight().y].join(",")},_calculateImageSize:function(){var t=this._map.getPixelBounds(),e=this._map.getSize(),i=this._map.unproject(t.getBottomLeft()),s=this._map.unproject(t.getTopRight()),r=this._map.latLngToLayerPoint(s).y,o=this._map.latLngToLayerPoint(i).y;return(0<r||o<e.y)&&(e.y=o-r),e.x+","+e.y}}),dt=pt.extend({options:{updateInterval:150,format:"jpgpng",transparent:!0,f:"image"},query:function(){return this.service.query()},identify:function(){return this.service.identify()},initialize:function(t){t=U(t),this.service=ot(t),this.service.addEventParent(this),g.Util.setOptions(this,t)},setPixelType:function(t){return this.options.pixelType=t,this._update(),this},getPixelType:function(){return this.options.pixelType},setBandIds:function(t){return g.Util.isArray(t)?this.options.bandIds=t.join(","):this.options.bandIds=t.toString(),this._update(),this},getBandIds:function(){return this.options.bandIds},setNoData:function(t,e){return g.Util.isArray(t)?this.options.noData=t.join(","):this.options.noData=t.toString(),e&&(this.options.noDataInterpretation=e),this._update(),this},getNoData:function(){return this.options.noData},getNoDataInterpretation:function(){return this.options.noDataInterpretation},setRenderingRule:function(t){this.options.renderingRule=t,this._update()},getRenderingRule:function(){return this.options.renderingRule},setMosaicRule:function(t){this.options.mosaicRule=t,this._update()},getMosaicRule:function(){return this.options.mosaicRule},_getPopupData:function(s){var t=g.Util.bind(function(t,e,i){t||setTimeout(g.Util.bind(function(){this._renderPopup(s.latlng,t,e,i)},this),300)},this),e=this.identify().at(s.latlng);this.options.mosaicRule&&e.setMosaicRule(this.options.mosaicRule),e.run(t),this._shouldRenderPopup=!0,this._lastClick=s.latlng},_buildExportParams:function(){var t=parseInt(this._map.options.crs.code.split(":")[1],10),e={bbox:this._calculateBbox(),size:this._calculateImageSize(),format:this.options.format,transparent:this.options.transparent,bboxSR:t,imageSR:t};return this.options.from&&this.options.to&&(e.time=this.options.from.valueOf()+","+this.options.to.valueOf()),this.options.pixelType&&(e.pixelType=this.options.pixelType),this.options.interpolation&&(e.interpolation=this.options.interpolation),this.options.compressionQuality&&(e.compressionQuality=this.options.compressionQuality),this.options.bandIds&&(e.bandIds=this.options.bandIds),0!==this.options.noData&&!this.options.noData||(e.noData=this.options.noData),this.options.noDataInterpretation&&(e.noDataInterpretation=this.options.noDataInterpretation),this.service.options.token&&(e.token=this.service.options.token),this.options.renderingRule&&(e.renderingRule=JSON.stringify(this.options.renderingRule)),this.options.mosaicRule&&(e.mosaicRule=JSON.stringify(this.options.mosaicRule)),e},_requestExport:function(t,i){var e;"json"===this.options.f?this.service.request("exportImage",t,function(t,e){t||(this.options.token&&(e.href+="?token="+this.options.token),this.options.proxy&&(e.href=this.options.proxy+"?"+e.href),this._renderImage(e.href,i))},this):(t.f="image",e=this.options.url+"exportImage"+g.Util.getParamString(t),this.options.proxy&&(e=this.options.proxy+"?"+e),this._renderImage(e,i))}});var mt=pt.extend({options:{updateInterval:150,layers:!1,layerDefs:!1,timeOptions:!1,format:"png32",transparent:!0,f:"json"},initialize:function(t){t=U(t),this.service=st(t),this.service.addEventParent(this),g.Util.setOptions(this,t)},getDynamicLayers:function(){return this.options.dynamicLayers},setDynamicLayers:function(t){return this.options.dynamicLayers=t,this._update(),this},getLayers:function(){return this.options.layers},setLayers:function(t){return this.options.layers=t,this._update(),this},getLayerDefs:function(){return this.options.layerDefs},setLayerDefs:function(t){return this.options.layerDefs=t,this._update(),this},getTimeOptions:function(){return this.options.timeOptions},setTimeOptions:function(t){return this.options.timeOptions=t,this._update(),this},query:function(){return this.service.query()},identify:function(){return this.service.identify()},find:function(){return this.service.find()},_getPopupData:function(s){var t=g.Util.bind(function(t,e,i){t||setTimeout(g.Util.bind(function(){this._renderPopup(s.latlng,t,e,i)},this),300)},this),e=this.options.popup?this.options.popup.on(this._map).at(s.latlng):this.identify().on(this._map).at(s.latlng);if(e.params.maxAllowableOffset||e.simplify(this._map,.5),this.options.popup&&this.options.popup.params&&this.options.popup.params.layers||(this.options.layers?e.layers("visible:"+this.options.layers.join(",")):e.layers("visible")),this.options.layerDefs&&"string"!=typeof this.options.layerDefs&&!e.params.layerDefs)for(var i in this.options.layerDefs)this.options.layerDefs.hasOwnProperty(i)&&e.layerDef(i,this.options.layerDefs[i]);e.run(t),this._shouldRenderPopup=!0,this._lastClick=s.latlng},_buildExportParams:function(){var t=parseInt(this._map.options.crs.code.split(":")[1],10),e={bbox:this._calculateBbox(),size:this._calculateImageSize(),dpi:96,format:this.options.format,transparent:this.options.transparent,bboxSR:t,imageSR:t};if(this.options.dynamicLayers&&(e.dynamicLayers=this.options.dynamicLayers),this.options.layers){if(0===this.options.layers.length)return;e.layers="show:"+this.options.layers.join(",")}return this.options.layerDefs&&(e.layerDefs="string"==typeof this.options.layerDefs?this.options.layerDefs:JSON.stringify(this.options.layerDefs)),this.options.timeOptions&&(e.timeOptions=JSON.stringify(this.options.timeOptions)),this.options.from&&this.options.to&&(e.time=this.options.from.valueOf()+","+this.options.to.valueOf()),this.service.options.token&&(e.token=this.service.options.token),this.options.proxy&&(e.proxy=this.options.proxy),this.options.disableCache&&(e._ts=Date.now()),e},_requestExport:function(t,i){var e;"json"===this.options.f?this.service.request("export",t,function(t,e){t||(this.options.token&&e.href&&(e.href+="?token="+this.options.token),this.options.proxy&&e.href&&(e.href=this.options.proxy+"?"+e.href),e.href?this._renderImage(e.href,i):this._renderImage(e.imageData,i,e.contentType))},this):(t.f="image",e=this.options.url+"export"+g.Util.getParamString(t),this.options.proxy&&(e=this.options.proxy+"?"+e),this._renderImage(e,i))}});var ft=g.Layer.extend({options:{cellSize:512,updateWhenIdle:g.Browser.mobile,updateInterval:150,noWrap:!1,keepBuffer:1.5},initialize:function(t){g.Util.setOptions(this,t)},onAdd:function(t){this._cells={},this._activeCells={},this._resetView(),this._update()},onRemove:function(t){this._removeAllCells(),this._cellZoom=void 0},isLoading:function(){return this._loading},redraw:function(){return this._map&&(this._removeAllCells(),this._update()),this},getEvents:function(){var t={viewprereset:this._invalidateAll,viewreset:this._resetView,zoom:this._resetView,moveend:this._onMoveEnd};return this.options.updateWhenIdle||(this._onMove||(this._onMove=g.Util.throttle(this._onMoveEnd,this.options.updateInterval,this)),t.move=this._onMove),t},createCell:function(){return document.createElement("div")},removeCell:function(){},reuseCell:function(){},cellLeave:function(){},cellEnter:function(){},getCellSize:function(){var t=this.options.cellSize;return t instanceof g.Point?t:new g.Point(t,t)},_pruneCells:function(){if(this._map){var t,e,i;for(t in this._cells)(i=this._cells[t]).retain=i.current;for(t in this._cells){(i=this._cells[t]).current&&!i.active&&(e=i.coords,this._retainParent(e.x,e.y,e.z,e.z-5)||this._retainChildren(e.x,e.y,e.z,e.z+2))}for(t in this._cells)this._cells[t].retain||this._removeCell(t)}},_removeAllCells:function(){for(var t in this._cells)this._removeCell(t)},_invalidateAll:function(){this._removeAllCells(),this._cellZoom=void 0},_retainParent:function(t,e,i,s){var r=Math.floor(t/2),o=Math.floor(e/2),n=i-1,a=new g.Point(+r,+o);a.z=+n;var l=this._cellCoordsToKey(a),u=this._cells[l];return u&&u.active?u.retain=!0:(u&&u.loaded&&(u.retain=!0),s<n&&this._retainParent(r,o,n,s))},_retainChildren:function(t,e,i,s){for(var r=2*t;r<2*t+2;r++)for(var o=2*e;o<2*e+2;o++){var n=new g.Point(r,o);n.z=i+1;var a=this._cellCoordsToKey(n),l=this._cells[a];l&&l.active?l.retain=!0:(l&&l.loaded&&(l.retain=!0),i+1<s&&this._retainChildren(r,o,i+1,s))}},_resetView:function(t){var e=t&&(t.pinch||t.flyTo);e||this._setView(this._map.getCenter(),this._map.getZoom(),e,e)},_setView:function(t,e,i,s){var r=Math.round(e);s||(this._cellZoom=r,this._abortLoading&&this._abortLoading(),this._resetGrid(),void 0!==r&&this._update(t),i||this._pruneCells(),this._noPrune=!!i)},_resetGrid:function(){var t=this._map,e=t.options.crs,i=this._cellSize=this.getCellSize(),s=this._cellZoom,r=this._map.getPixelWorldBounds(this._cellZoom);r&&(this._globalCellRange=this._pxBoundsToCellRange(r)),this._wrapX=e.wrapLng&&!this.options.noWrap&&[Math.floor(t.project([0,e.wrapLng[0]],s).x/i.x),Math.ceil(t.project([0,e.wrapLng[1]],s).x/i.y)],this._wrapY=e.wrapLat&&!this.options.noWrap&&[Math.floor(t.project([e.wrapLat[0],0],s).y/i.x),Math.ceil(t.project([e.wrapLat[1],0],s).y/i.y)]},_onMoveEnd:function(t){t&&(t.pinch||t.flyTo)||!this._map||this._map._animatingZoom||this._update()},_getCelldPixelBounds:function(t){var e=this._map,i=e._animatingZoom?Math.max(e._animateToZoom,e.getZoom()):e.getZoom(),s=e.getZoomScale(i,this._cellZoom),r=e.project(t,this._cellZoom).floor(),o=e.getSize().divideBy(2*s);return new g.Bounds(r.subtract(o),r.add(o))},_update:function(t){var e=this._map;if(e){var i=Math.round(e.getZoom());void 0===t&&(t=e.getCenter());var s=this._getCelldPixelBounds(t),r=this._pxBoundsToCellRange(s),o=r.getCenter(),n=[],a=this.options.keepBuffer,l=new g.Bounds(r.getBottomLeft().subtract([a,-a]),r.getTopRight().add([a,-a]));if(!(isFinite(r.min.x)&&isFinite(r.min.y)&&isFinite(r.max.x)&&isFinite(r.max.y)))throw new Error("Attempted to load an infinite number of cells");for(var u in this._cells){var h=this._cells[u].coords;h.z===this._cellZoom&&l.contains(new g.Point(h.x,h.y))||(this._cells[u].current=!1)}if(1<Math.abs(i-this._cellZoom))this._setView(t,i);else{for(var c=r.min.y;c<=r.max.y;c++)for(var p=r.min.x;p<=r.max.x;p++){var d,m=new g.Point(p,c);m.z=this._cellZoom,this._isValidCell(m)&&((d=this._cells[this._cellCoordsToKey(m)])?d.current=!0:n.push(m))}if(n.sort(function(t,e){return t.distanceTo(o)-e.distanceTo(o)}),0!==n.length)for(this._loading||(this._loading=!0),p=0;p<n.length;p++){var f=this._cellCoordsToKey(n[p]),y=this._keyToCellCoords(f);this._activeCells[y]?this._reuseCell(n[p]):this._createCell(n[p])}}}},_isValidCell:function(t){var e=this._map.options.crs;if(!e.infinite){var i=this._globalCellRange;if(!e.wrapLng&&(t.x<i.min.x||t.x>i.max.x)||!e.wrapLat&&(t.y<i.min.y||t.y>i.max.y))return!1}if(!this.options.bounds)return!0;var s=this._cellCoordsToBounds(t);return g.toLatLngBounds(this.options.bounds).overlaps(s)},_keyToBounds:function(t){return this._cellCoordsToBounds(this._keyToCellCoords(t))},_cellCoordsToNwSe:function(t){var e=this._map,i=this.getCellSize(),s=t.scaleBy(i),r=s.add(i);return[e.unproject(s,t.z),e.unproject(r,t.z)]},_cellCoordsToBounds:function(t){var e=this._cellCoordsToNwSe(t),i=new g.LatLngBounds(e[0],e[1]);return this.options.noWrap||(i=this._map.wrapLatLngBounds(i)),i},_cellCoordsToKey:function(t){return t.x+":"+t.y+":"+t.z},_keyToCellCoords:function(t){var e=t.split(":"),i=new g.Point(+e[0],+e[1]);return i.z=+e[2],i},_removeCell:function(t){var e,i,s,r=this._cells[t];r&&(e=this._keyToCellCoords(t),i=this._wrapCoords(e),s=this._cellCoordsToBounds(this._wrapCoords(e)),r.current=!1,delete this._cells[t],this._activeCells[t]=r,this.cellLeave(s,i,t),this.fire("cellleave",{key:t,coords:i,bounds:s}))},_reuseCell:function(t){var e=this._cellCoordsToKey(t);this._cells[e]=this._activeCells[e],this._cells[e].current=!0;var i=this._wrapCoords(t),s=this._cellCoordsToBounds(this._wrapCoords(t));this.cellEnter(s,i,e),this.fire("cellenter",{key:e,coords:i,bounds:s})},_createCell:function(t){var e=this._cellCoordsToKey(t),i=this._wrapCoords(t),s=this._cellCoordsToBounds(this._wrapCoords(t));this.createCell(s,i,e),this.fire("cellcreate",{key:e,coords:i,bounds:s}),this._cells[e]={coords:t,current:!0},g.Util.requestAnimFrame(this._pruneCells,this)},_cellReady:function(t,e,i){var s=this._cellCoordsToKey(t);(i=this._cells[s])&&(i.loaded=+new Date,i.active=!0)},_getCellPos:function(t){return t.scaleBy(this.getCellSize())},_wrapCoords:function(t){var e=new g.Point(this._wrapX?g.Util.wrapNum(t.x,this._wrapX):t.x,this._wrapY?g.Util.wrapNum(t.y,this._wrapY):t.y);return e.z=t.z,e},_pxBoundsToCellRange:function(t){var e=this.getCellSize();return new g.Bounds(t.min.unscaleBy(e).floor(),t.max.unscaleBy(e).ceil().subtract([1,1]))}});function yt(t){this.values=[].concat(t||[])}yt.prototype.query=function(t){var e=this.getIndex(t);return this.values[e]},yt.prototype.getIndex=function(t){this.dirty&&this.sort();for(var e,i,s=0,r=this.values.length-1;s<=r;)if(e=(s+r)/2|0,+(i=this.values[Math.round(e)]).value<+t)s=1+e;else{if(!(+i.value>+t))return e;r=e-1}return Math.abs(~r)},yt.prototype.between=function(t,e){var i=this.getIndex(t),s=this.getIndex(e);if(0===i&&0===s)return[];for(;this.values[i-1]&&this.values[i-1].value===t;)i--;for(;this.values[s+1]&&this.values[s+1].value===e;)s++;return this.values[s]&&this.values[s].value===e&&this.values[s+1]&&s++,this.values.slice(i,s)},yt.prototype.insert=function(t){return this.values.splice(this.getIndex(t.value),0,t),this},yt.prototype.bulkAdd=function(t,e){return this.values=this.values.concat([].concat(t||[])),e?this.sort():this.dirty=!0,this},yt.prototype.sort=function(){return this.values.sort(function(t,e){return e.value-t.value}).reverse(),this.dirty=!1,this};var gt=ft.extend({options:{attribution:null,where:"1=1",fields:["*"],from:!1,to:!1,timeField:!1,timeFilterMode:"server",simplifyFactor:0,precision:6,fetchAllFeatures:!1},initialize:function(t){if(ft.prototype.initialize.call(this,t),t=U(t),t=g.Util.setOptions(this,t),this.service=at(t),this.service.addEventParent(this),"*"!==this.options.fields[0]){for(var e=!1,i=0;i<this.options.fields.length;i++)this.options.fields[i].match(/^(OBJECTID|FID|OID|ID)$/i)&&(e=!0);!1===e&&m("no known esriFieldTypeOID field detected in fields Array.  Please add an attribute field containing unique IDs to ensure the layer can be drawn correctly.")}this.options.timeField.start&&this.options.timeField.end?(this._startTimeIndex=new yt,this._endTimeIndex=new yt):this.options.timeField&&(this._timeIndex=new yt),this._cache={},this._currentSnapshot=[],this._activeRequests=0},onAdd:function(r){return E(r),this.service.metadata(function(t,e){var i,s;t||(i=e.supportedQueryFormats,(s=!1)!==this.service.options.isModern&&!this.options.fetchAllFeatures||(s=!0),!s&&i&&-1!==i.indexOf("geoJSON")&&(this.service.options.isModern=!0),e.objectIdField&&(this.service.options.idAttribute=e.objectIdField),!this.options.attribution&&r.attributionControl&&e.copyrightText&&(this.options.attribution=e.copyrightText,r.attributionControl.addAttribution(this.getAttribution())))},this),r.on("zoomend",this._handleZoomChange,this),ft.prototype.onAdd.call(this,r)},onRemove:function(t){return B(t),t.off("zoomend",this._handleZoomChange,this),ft.prototype.onRemove.call(this,t)},getAttribution:function(){return this.options.attribution},createCell:function(t,e){this._visibleZoom()&&this._requestFeatures(t,e)},_requestFeatures:function(s,r,o,n){this._activeRequests++,n=n||0;var a=this.options.where;return 1===this._activeRequests&&this.fire("loading",{bounds:s},!0),this._buildQuery(s,n).run(function(t,e,i){i&&i.exceededTransferLimit&&this.fire("drawlimitexceeded"),this.options.where===a&&(!t&&e&&e.features.length&&g.Util.requestAnimFrame(g.Util.bind(function(){this._addFeatures(e.features,r),this._postProcessFeatures(s)},this)),t||!e||e.features.length||this._postProcessFeatures(s),t&&this._postProcessFeatures(s),o&&o.call(this,t,e),i&&(i.exceededTransferLimit||i.properties&&i.properties.exceededTransferLimit)&&this.options.fetchAllFeatures&&this._requestFeatures(s,r,o,n+e.features.length))},this)},_postProcessFeatures:function(t){this._activeRequests--,this._activeRequests<=0&&this.fire("load",{bounds:t})},_cacheKey:function(t){return t.z+":"+t.x+":"+t.y},_addFeatures:function(t,e){var i;e&&(i=this._cacheKey(e),this._cache[i]=this._cache[i]||[]);for(var s=t.length-1;0<=s;s--){var r=t[s].id;-1===this._currentSnapshot.indexOf(r)&&this._currentSnapshot.push(r),void 0!==i&&-1===this._cache[i].indexOf(r)&&this._cache[i].push(r)}this.options.timeField&&this._buildTimeIndexes(t),this.createLayers(t)},_buildQuery:function(t,e){var i=this.service.query().intersects(t).where(this.options.where).fields(this.options.fields).precision(this.options.precision);return this.options.fetchAllFeatures&&!isNaN(parseInt(e))&&(i=i.offset(e)),i.params.resultType="tile",this.options.requestParams&&g.Util.extend(i.params,this.options.requestParams),this.options.simplifyFactor&&i.simplify(this._map,this.options.simplifyFactor),"server"===this.options.timeFilterMode&&this.options.from&&this.options.to&&i.between(this.options.from,this.options.to),i},setWhere:function(s,r,o){this.options.where=s&&s.length?s:"1=1";for(var n=[],a=[],l=0,u=null,t=g.Util.bind(function(t,e){if(t&&(u=t),e)for(var i=e.features.length-1;0<=i;i--)a.push(e.features[i].id);--l<=0&&this._visibleZoom()&&s===this.options.where&&(this._currentSnapshot=a,g.Util.requestAnimFrame(g.Util.bind(function(){this.removeLayers(n),this.addLayers(a),r&&r.call(o,u)},this)))},this),e=this._currentSnapshot.length-1;0<=e;e--)n.push(this._currentSnapshot[e]);for(var i in this._cache={},this._cells){l++;var h=this._keyToCellCoords(i),c=this._cellCoordsToBounds(h);this._requestFeatures(c,h,t)}return this},getWhere:function(){return this.options.where},getTimeRange:function(){return[this.options.from,this.options.to]},setTimeRange:function(e,i,s,r){var o=this.options.from,n=this.options.to,a=0,l=null,t=g.Util.bind(function(t){t&&(l=t),this._filterExistingFeatures(o,n,e,i),a--,s&&a<=0&&s.call(r,l)},this);if(this.options.from=e,this.options.to=i,this._filterExistingFeatures(o,n,e,i),"server"===this.options.timeFilterMode)for(var u in this._cells){a++;var h=this._keyToCellCoords(u),c=this._cellCoordsToBounds(h);this._requestFeatures(c,h,t)}return this},refresh:function(){this.setWhere(this.options.where)},_filterExistingFeatures:function(t,e,i,s){var r=t&&e?this._getFeaturesInTimeRange(t,e):this._currentSnapshot,o=this._getFeaturesInTimeRange(i,s);if(o.indexOf)for(var n=0;n<o.length;n++){var a=r.indexOf(o[n]);0<=a&&r.splice(a,1)}g.Util.requestAnimFrame(g.Util.bind(function(){this.removeLayers(r),this.addLayers(o)},this))},_getFeaturesInTimeRange:function(t,e){var i=[];if(this.options.timeField.start&&this.options.timeField.end)var s=this._startTimeIndex.between(t,e),r=this._endTimeIndex.between(t,e),o=s.concat(r);else{if(!this._timeIndex)return m("You must set timeField in the layer constructor in order to manipulate the start and end time filter."),[];o=this._timeIndex.between(t,e)}for(var n=o.length-1;0<=n;n--)i.push(o[n].id);return i},_buildTimeIndexes:function(t){var e;if(this.options.timeField.start&&this.options.timeField.end){for(var i=[],s=[],r=t.length-1;0<=r;r--)e=t[r],i.push({id:e.id,value:new Date(e.properties[this.options.timeField.start])}),s.push({id:e.id,value:new Date(e.properties[this.options.timeField.end])});this._startTimeIndex.bulkAdd(i),this._endTimeIndex.bulkAdd(s)}else{var o=[];for(r=t.length-1;0<=r;r--)e=t[r],o.push({id:e.id,value:new Date(e.properties[this.options.timeField])});this._timeIndex.bulkAdd(o)}},_featureWithinTimeRange:function(t){if(!this.options.from||!this.options.to)return!0;var e=+this.options.from.valueOf(),i=+this.options.to.valueOf();if("string"==typeof this.options.timeField){var s=+t.properties[this.options.timeField];return e<=s&&s<=i}if(this.options.timeField.start&&this.options.timeField.end){var r=+t.properties[this.options.timeField.start],o=+t.properties[this.options.timeField.end];return e<=r&&r<=i||e<=o&&o<=i||r<=e&&i<=o}},_visibleZoom:function(){if(!this._map)return!1;var t=this._map.getZoom();return!(t>this.options.maxZoom||t<this.options.minZoom)},_handleZoomChange:function(){if(this._visibleZoom())for(var t in this._cells){var e=this._cells[t].coords,i=this._cacheKey(e);this._cache[i]&&this.addLayers(this._cache[i])}else this.removeLayers(this._currentSnapshot),this._currentSnapshot=[]},authenticate:function(t){return this.service.authenticate(t),this},metadata:function(t,e){return this.service.metadata(t,e),this},query:function(){return this.service.query()},_getMetadata:function(i){this._metadata?i(void 0,this._metadata):this.metadata(g.Util.bind(function(t,e){this._metadata=e,i(t,this._metadata)},this))},addFeature:function(t,e,i){this.addFeatures(t,e,i)},addFeatures:function(e,o,n){this._getMetadata(g.Util.bind(function(t,s){var r;t?o&&o.call(this,t,null):(r=e.features?e.features:[e],this.service.addFeatures(e,g.Util.bind(function(t,e){if(!t){for(var i=r.length-1;0<=i;i--)r[i].properties[s.objectIdField]=1<r.length?e[i].objectId:e.objectId,r[i].id=1<r.length?e[i].objectId:e.objectId;this._addFeatures(r)}o&&o.call(n,t,e)},this)))},this))},updateFeature:function(t,e,i){this.updateFeatures(t,e,i)},updateFeatures:function(t,s,r){var o=t.features?t.features:[t];this.service.updateFeatures(t,function(t,e){if(!t){for(var i=o.length-1;0<=i;i--)this.removeLayers([o[i].id],!0);this._addFeatures(o)}s&&s.call(r,t,e)},this)},deleteFeature:function(t,e,i){this.deleteFeatures(t,e,i)},deleteFeatures:function(t,r,o){return this.service.deleteFeatures(t,function(t,e){var i=e.length?e:[e];if(!t&&0<i.length)for(var s=i.length-1;0<=s;s--)this.removeLayers([i[s].objectId],!0);r&&r.call(o,t,e)},this)}}),_t=gt.extend({options:{cacheLayers:!0},initialize:function(t){t.apikey&&(t.token=t.apikey),gt.prototype.initialize.call(this,t),this._originalStyle=this.options.style,this._layers={}},onRemove:function(t){for(var e in this._layers)t.removeLayer(this._layers[e]),this.fire("removefeature",{feature:this._layers[e].feature,permanent:!1},!0);return gt.prototype.onRemove.call(this,t)},createNewLayer:function(t){var e=g.GeoJSON.geometryToLayer(t,this.options);return e&&(e.defaultOptions=e.options),e},_updateLayer:function(t,e){var i=[],s=this.options.coordsToLatLng||g.GeoJSON.coordsToLatLng;switch(e.properties&&(t.feature.properties=e.properties),e.geometry.type){case"Point":i=g.GeoJSON.coordsToLatLng(e.geometry.coordinates),t.setLatLng(i);break;case"LineString":i=g.GeoJSON.coordsToLatLngs(e.geometry.coordinates,0,s),t.setLatLngs(i);break;case"MultiLineString":case"Polygon":i=g.GeoJSON.coordsToLatLngs(e.geometry.coordinates,1,s),t.setLatLngs(i);break;case"MultiPolygon":i=g.GeoJSON.coordsToLatLngs(e.geometry.coordinates,2,s),t.setLatLngs(i)}},createLayers:function(t){for(var e=t.length-1;0<=e;e--){var i,s=t[e],r=this._layers[s.id];!this._visibleZoom()||!r||this._map.hasLayer(r)||this.options.timeField&&!this._featureWithinTimeRange(s)||(this._map.addLayer(r),this.fire("addfeature",{feature:r.feature},!0)),r&&0<this.options.simplifyFactor&&(r.setLatLngs||r.setLatLng)&&this._updateLayer(r,s),r||((i=this.createNewLayer(s))?(i.feature=s,i.addEventParent(this),this.options.onEachFeature&&this.options.onEachFeature(i.feature,i),this._layers[i.feature.id]=i,this.setFeatureStyle(i.feature.id,this.options.style),this.fire("createfeature",{feature:i.feature},!0),this._visibleZoom()&&(!this.options.timeField||this.options.timeField&&this._featureWithinTimeRange(s))&&this._map.addLayer(i)):m("invalid GeoJSON encountered"))}},addLayers:function(t){for(var e=t.length-1;0<=e;e--){var i=this._layers[t[e]];!i||this.options.timeField&&!this._featureWithinTimeRange(i.feature)||(this._map.addLayer(i),this.fire("addfeature",{feature:i.feature},!0))}},removeLayers:function(t,e){for(var i=t.length-1;0<=i;i--){var s=t[i],r=this._layers[s];r&&(this.fire("removefeature",{feature:r.feature,permanent:e},!0),this._map.removeLayer(r)),r&&e&&delete this._layers[s]}},cellEnter:function(t,s){this._visibleZoom()&&!this._zooming&&this._map&&g.Util.requestAnimFrame(g.Util.bind(function(){var t=this._cacheKey(s),e=this._cellCoordsToKey(s),i=this._cache[t];this._activeCells[e]&&i&&this.addLayers(i)},this))},cellLeave:function(t,a){this._zooming||g.Util.requestAnimFrame(g.Util.bind(function(){if(this._map){var t=this._cacheKey(a),e=this._cellCoordsToKey(a),i=this._cache[t],s=this._map.getBounds();if(!this._activeCells[e]&&i){for(var r=!0,o=0;o<i.length;o++){var n=this._layers[i[o]];n&&n.getBounds&&s.intersects(n.getBounds())&&(r=!1)}r&&this.removeLayers(i,!this.options.cacheLayers),!this.options.cacheLayers&&r&&(delete this._cache[t],delete this._cells[e],delete this._activeCells[e])}}},this))},resetStyle:function(){return this.options.style=this._originalStyle,this.eachFeature(function(t){this.resetFeatureStyle(t.feature.id)},this),this},setStyle:function(e){return this.options.style=e,this.eachFeature(function(t){this.setFeatureStyle(t.feature.id,e)},this),this},resetFeatureStyle:function(t){var e=this._layers[t],i=this._originalStyle||g.Path.prototype.options;return e&&(g.Util.extend(e.options,e.defaultOptions),this.setFeatureStyle(t,i)),this},setFeatureStyle:function(t,e){var i=this._layers[t];return"function"==typeof e&&(e=e(i.feature)),i.setStyle&&i.setStyle(e),this},eachActiveFeature:function(t,e){if(this._map){var i=this._map.getBounds();for(var s in this._layers)-1!==this._currentSnapshot.indexOf(this._layers[s].feature.id)&&("function"==typeof this._layers[s].getLatLng&&i.contains(this._layers[s].getLatLng())||"function"==typeof this._layers[s].getBounds&&i.intersects(this._layers[s].getBounds()))&&t.call(e,this._layers[s])}return this},eachFeature:function(t,e){for(var i in this._layers)t.call(e,this._layers[i]);return this},getFeature:function(t){return this._layers[t]},bringToBack:function(){this.eachFeature(function(t){t.bringToBack&&t.bringToBack()})},bringToFront:function(){this.eachFeature(function(t){t.bringToFront&&t.bringToFront()})},redraw:function(t){return t&&this._redraw(t),this},_redraw:function(t){var e,i,s=this._layers[t],r=s.feature;s&&s.setIcon&&this.options.pointToLayer&&this.options.pointToLayer&&(e=this.options.pointToLayer(r,g.latLng(r.geometry.coordinates[1],r.geometry.coordinates[0])).options.icon,s.setIcon(e)),s&&s.setStyle&&this.options.pointToLayer&&(i=this.options.pointToLayer(r,g.latLng(r.geometry.coordinates[1],r.geometry.coordinates[0])).options,this.setFeatureStyle(r.id,i)),s&&s.setStyle&&this.options.style&&this.resetStyle(r.id)}});var vt=e;t.BasemapLayer=ut,t.DynamicMapLayer=mt,t.FeatureLayer=_t,t.FeatureLayerService=nt,t.FeatureManager=gt,t.Find=Q,t.Identify=H,t.IdentifyFeatures=X,t.IdentifyImage=$,t.ImageMapLayer=dt,t.ImageService=rt,t.MapService=it,t.Query=J,t.RasterLayer=pt,t.Service=et,t.Support=a,t.Task=W,t.TiledMapLayer=ht,t.Util=j,t.VERSION=vt,t.basemapLayer=function(t,e){return new ut(t,e)},t.dynamicMapLayer=function(t,e){return new mt(t,e)},t.featureLayer=function(t){return new _t(t)},t.featureLayerService=at,t.find=K,t.get=d,t.identify=function(t){return new H(t)},t.identifyFeatures=Y,t.identifyImage=tt,t.imageMapLayer=function(t,e){return new dt(t,e)},t.imageService=ot,t.mapService=st,t.options=r,t.post=o,t.query=V,t.request=c,t.service=function(t){return t=U(t),new et(t)},t.task=function(t){return t=U(t),new W(t)},t.tiledMapLayer=function(t,e){return new ht(t,e)},Object.defineProperty(t,"__esModule",{value:!0})});
+//# sourceMappingURL=esri-leaflet.js.map
diff --git a/front/public/static/config/location.js b/front/public/static/config/location.js
index aa2121d5..b421dde0 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-04 11:56:58
+ * @LastEditTime: 2022-07-06 18:44:54
  * @Description: 数据资源参数配置
  */
-const newLocation = 'qingdao'
+//const newLocation = 'qingdao'
 // const newLocation = 'baotou'
-// const newLocation = 'xihaian'
+ const newLocation = 'xihaian'
 
 // 数据资源数据
 const whoShow = {}
@@ -61,12 +61,12 @@ if (newLocation === 'qingdao') {
     {
       name: '基础设施',
       key: 'lsjcss',
-      num: '20135路',
+      num: '20135个',
     },
     {
       name: '数据资源',
       key: 'lsjcss',
-      num: '857条',
+      num: '857项',
     },
     {
       name: '应用资源',
@@ -78,12 +78,12 @@ if (newLocation === 'qingdao') {
     {
       name: '基础设施',
       key: 'xhajcss',
-      num: '35282路',
+      num: '35282个',
     },
     {
       name: '数据资源',
       key: 'xhajcss',
-      num: '11类',
+      num: '11项',
     },
     {
       name: '应用资源',
@@ -162,7 +162,7 @@ else if (newLocation === 'xihaian') {
   footerDataList.footerList = {
     company: {
       left: '青岛西海岸新区大数据发展促进局建设',
-      right: 'v0.81',
+      right: 'v0.8.1.5',
     },
     address: [
       {
diff --git a/front/public/static/js/rem.js b/front/public/static/js/rem.js
index 7be96650..8f834260 100644
--- a/front/public/static/js/rem.js
+++ b/front/public/static/js/rem.js
@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2021-06-15 18:50:17
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-10 15:45:52
+ * @LastEditTime: 2022-07-06 10:54:11
  * @Description: 告诉大家这是什么
  */
 ;(function (doc, win) {
@@ -19,6 +19,7 @@
     } */
     clientWidth > 1920 ? (clientWidth = 1920) : clientWidth
     docEl.style.fontSize = clientWidth / 19.2 + 'px'
+    docEl.style.overflowY = 'auto'
   }
   if (!doc.addEventListener) return
   recalc()
diff --git a/front/src/App.vue b/front/src/App.vue
index ee08e473..aeb2000e 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -28,7 +28,7 @@
   @import '~@/vab/styles/vab.less';
   #vue-admin-beautiful{
     max-width: 1920px;
-    max-height: 1080px;
+    // max-height: 1080px;
     margin: auto;
     height: 100%;
     position: relative;
diff --git a/front/src/api/home.js b/front/src/api/home.js
index 2f536134..8a0d6787 100644
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@@ -199,7 +199,14 @@ export function updateVisits(params) {
     params,
   })
 }
-
+// 保存浏览记录
+export function browsingInsert(data) {
+  return request({
+    url: '/resourceBrowse/insert',
+    method: 'post',
+    data,
+  })
+}
 // 最新能力
 export function selectNewest(data) {
   return request({
diff --git a/front/src/api/personalCenter.js b/front/src/api/personalCenter.js
index faed5074..67079961 100644
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@@ -215,3 +215,19 @@ export function selectResourceListByDept(params) {
     params,
   })
 }
+// 获取来源应用列表
+export function queryApplicationRelByResourceId(params) {
+  return request({
+    url: '/dataResourceRel/queryApplicationRelByResourceId',
+    method: 'get',
+    params,
+  })
+}
+// 获取关联组件列表
+export function queryResourceRelByKeyId(params) {
+  return request({
+    url: '/dataResourceRel/queryResourceRelByKeyId',
+    method: 'get',
+    params,
+  })
+}
diff --git a/front/src/assets/newHome/newHome-title-bg.png b/front/src/assets/newHome/newHome-title-bg.png
new file mode 100644
index 00000000..0fcd7839
Binary files /dev/null and b/front/src/assets/newHome/newHome-title-bg.png differ
diff --git a/front/src/main.js b/front/src/main.js
index 5ceb3773..8cd80605 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -1,8 +1,8 @@
 /*
  * @Author: hisense.wuhongjian
  * @Date: 2022-03-29 17:48:03
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-10 15:45:34
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-05 15:04:47
  * @Description: 告诉大家这是什么
  */
 import { createApp } from 'vue'
@@ -45,3 +45,9 @@ app
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
+router.beforeEach((to, from, next) => {
+  // console.log('跳转路由=========>', to, from, next)
+  document.documentElement.scrollTop = 0
+  document.body.scrollTop = 0
+  next()
+})
diff --git a/front/src/views/assignCase/components/AssignCaseDetailPage.vue b/front/src/views/assignCase/components/AssignCaseDetailPage.vue
index 795b597c..fdde065e 100644
--- a/front/src/views/assignCase/components/AssignCaseDetailPage.vue
+++ b/front/src/views/assignCase/components/AssignCaseDetailPage.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.zhangfeihu
  * @Date: 2022-06-13 10:22:27
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-20 18:58:40
+ * @LastEditTime: 2022-07-05 11:25:25
  * @Description: 赋能案例-详情页
 -->
 <template>
@@ -131,19 +131,16 @@
     tabName.value = '案例背景'
     selectOne(val).then((res) => {
       res.data.data.infoList.map((item, index) => {
-        console.log('res.data.data.infoList', res.data.data.infoList)
         if (item.attrType == '图片') {
           res.data.data.infoList.splice(index, 1)
         }
       })
       res.data.data.infoList.map((item, index) => {
-        console.log('res.data.data.infoList', res.data.data.infoList)
         if (item.attrType == '应用领域') {
           res.data.data.infoList.splice(index, 1)
         }
       })
       dataFrom.value = res.data.data
-      console.log('dataFrom.value', dataFrom.value)
     })
   }
   //其他案例
@@ -165,84 +162,113 @@
         }
       })
       dataList.value = res.data.data.records
-      console.log('dataList.value', dataList.value)
     })
   }
   //监听路由发生变化
   watch(
     () => router.currentRoute.value.query.id,
     () => {
-      init()
+      if (router.currentRoute.value.name == 'AssignCaseDetailPage') {
+        init()
+      }
     },
     { immediate: true }
   )
   //tab点击事件
   const tabSwitch = (item, index) => {
     tabName.value = item.attrType
-    if (index != 0 && index != 3) {
-      let top =
-        document.querySelector(
-          '#assign-case-detail-page-content-center-card' + index
-        ).offsetTop -
-        document.querySelector(
-          '#assign-case-detail-page-content-center-card' + (index - 1)
-        ).offsetHeight
-      let view = document.getElementById(
-        'assign-case-detail-page-content-left-border-id'
-      )
-      view.style.top =
-        document.querySelector(
-          '#assign-case-detail-page-content-center-card' + (index - 1)
-        ).offsetHeight + 'px'
-      console.log('view.style.top', view.style.top)
-      document.documentElement.scrollTop = top
-      document.body.scrollTop = top
-    } else if (index == 0) {
-      let top = 0
-      let view = document.getElementById(
-        'assign-case-detail-page-content-left-border-id'
-      )
-      document.documentElement.scrollTop = top
-      document.body.scrollTop = top
-      view.style.top = '490px'
-    } else if (index == 3) {
-      let top = document.querySelector(
+    let top =
+      document.querySelector(
         '#assign-case-detail-page-content-center-card' + index
-      ).offsetTop
-      let view = document.getElementById(
-        'assign-case-detail-page-content-left-border-id'
-      )
-      document.documentElement.scrollTop = top
-      document.body.scrollTop = top
-      view.style.top = '220px'
-    }
+      ).offsetTop -
+      330 -
+      60 * index
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
   }
   onMounted(() => {
-    init()
+    // init()
     // console.clear()
     window.addEventListener('scroll', () => {
-      domArr.value = document.querySelectorAll(
-        '.assign-case-detail-page-content-center-card'
-      )
-      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
-          }
-        }
+      let top = document.documentElement.scrollTop
+      if (
+        top <
+        100 +
+          document.querySelector(
+            '#assign-case-detail-page-content-center-card0'
+          ).offsetHeight -
+          1
+      ) {
+        tabName.value = '案例背景'
+      } else if (
+        top >=
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight &&
+        top <
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight -
+            1
+      ) {
+        tabName.value = '业务挑战'
+      } else if (
+        top >=
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight &&
+        top <
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card2'
+            ).offsetHeight -
+            1
+      ) {
+        tabName.value = '解决方案'
+      } else if (
+        top >=
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card2'
+            ).offsetHeight &&
+        top <
+          100 +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card0'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card1'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card2'
+            ).offsetHeight +
+            document.querySelector(
+              '#assign-case-detail-page-content-center-card3'
+            ).offsetHeight -
+            1
+      ) {
+        tabName.value = '案例成效'
       }
     })
   })
@@ -325,7 +351,7 @@
           padding-top: 5px;
           padding-bottom: 5px;
           position: fixed;
-          top: 4.9rem;
+          top: 3.9rem;
           div {
             height: 0.3rem;
             padding-right: 0.7rem;
diff --git a/front/src/views/assignCase/components/queryPage.vue b/front/src/views/assignCase/components/queryPage.vue
index 50aef2b0..97f3dfa6 100644
--- a/front/src/views/assignCase/components/queryPage.vue
+++ b/front/src/views/assignCase/components/queryPage.vue
@@ -53,7 +53,10 @@
               v-for="(item, index) in contenBox"
               :key="index"
             >
-              <img :src="item.note1 || ''" alt="" />
+              <img
+                :src="item.note1"
+                alt=""
+              />
               <h3>{{ item.name }}</h3>
               <p>
                 发布时间
@@ -315,7 +318,6 @@
             height: 20px;
             background: url(../../../assets/assignCase/left.png) no-repeat
               center;
-
             margin-top: 30px;
             transform: rotate(-90deg);
           }
@@ -343,6 +345,10 @@
             color: #333333;
             margin-right: 30px;
             cursor: pointer;
+            display: inline-block;
+            line-height: 30px;
+            padding: 5px 10px;
+            border-radius: 0.16rem;
           }
           span:nth-of-type(8n) {
             margin-right: 50px;
@@ -376,9 +382,11 @@
           border-radius: 6px;
           box-shadow: 5px 5px 20px 0 #f2f3fb;
           img {
-            // width: 370px;
+            width: 355px;
             height: 200px;
             border-radius: 6px;
+            object-fit: cover;
+            object-position: 50% 20%;
           }
           h3 {
             margin: 30px 0 20px;
diff --git a/front/src/views/capabilityCloud/components/ApplicationResources.vue b/front/src/views/capabilityCloud/components/ApplicationResources.vue
index f14025de..9e1ece3f 100644
--- a/front/src/views/capabilityCloud/components/ApplicationResources.vue
+++ b/front/src/views/capabilityCloud/components/ApplicationResources.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-19 10:16:10
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 17:52:19
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-05 21:26:40
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -44,6 +44,7 @@
           <div
             :class="{ select: select == '区市应用资源排名' }"
             @click="selectNav('区市应用资源排名')"
+            v-if="!whoShow1.itShowXiHaiAn"
           >
             区市应用资源排名
             <i v-show="select == '区市应用资源排名'"></i>
@@ -67,6 +68,8 @@
   const num3 = ref(0)
   const select = ref('区市应用资源排名')
   let myChart = null
+  // eslint-disable-next-line no-undef
+  const whoShow1 = whoShow
   const selectNav = (val) => {
     select.value = val
     switch (val) {
@@ -259,6 +262,7 @@
   }
 
   onMounted(() => {
+    echarts.init(document.getElementById('echarts-box2')).dispose()
     const chart = document.getElementById('echarts-box2')
     if (chart) {
       myChart = echarts.init(chart)
@@ -365,11 +369,12 @@
         position: relative;
         .nav {
           position: absolute;
+          width: 7.5rem;
           z-index: 10;
           top: 0.3rem;
           left: 0;
           display: flex;
-          justify-content: space-between;
+          justify-content: space-around;
           padding: 0 1.5rem;
           & > div {
             cursor: pointer;
diff --git a/front/src/views/capabilityCloud/components/ComponentServices.vue b/front/src/views/capabilityCloud/components/ComponentServices.vue
index 8f0751ba..2c6dc034 100644
--- a/front/src/views/capabilityCloud/components/ComponentServices.vue
+++ b/front/src/views/capabilityCloud/components/ComponentServices.vue
@@ -168,6 +168,7 @@
           }
         })
       } else {
+        callTheTrendData.value.snum = ['0', '0', '0', '0', '0', '0', '0']
         callTheTrend(callTheTrendData.value)
       }
     } else {
@@ -202,6 +203,39 @@
           }
         })
       } else {
+        callTheTrendData.value.snum = [
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+          '0',
+        ]
         callTheTrend(callTheTrendData.value)
       }
     }
@@ -253,6 +287,7 @@
       ],
       yAxis: [
         {
+          minInterval: 1,
           name: '个',
           type: 'value',
           axisTick: {
diff --git a/front/src/views/capabilityCloud/components/PlatformOverview.vue b/front/src/views/capabilityCloud/components/PlatformOverview.vue
index 10f569e2..c7800e38 100644
--- a/front/src/views/capabilityCloud/components/PlatformOverview.vue
+++ b/front/src/views/capabilityCloud/components/PlatformOverview.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-19 10:15:33
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 17:52:04
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-05 21:25:47
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -134,7 +134,7 @@
     },
     grid: {
       top: '14%',
-      left: '4%',
+      left: '6%',
       right: '5%',
       bottom: '12%',
       containLabel: true,
@@ -172,6 +172,7 @@
     series: lineY,
   }
   onMounted(() => {
+    echarts.init(document.getElementById('echarts-box')).dispose()
     trafficStatistics({
       startDate: dateList[0],
       endDate: dateList[dateList.length - 1],
diff --git a/front/src/views/capabilityCloud/index.vue b/front/src/views/capabilityCloud/index.vue
index e08f5b11..b1c7d442 100644
--- a/front/src/views/capabilityCloud/index.vue
+++ b/front/src/views/capabilityCloud/index.vue
@@ -1,13 +1,15 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-19 10:11:03
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-19 17:57:14
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-05 19:47:07
  * @Description: 告诉大家这是什么
 -->
 <template>
   <div class="capability-cloud">
-    <div class="header"><span class="title">数字资源驾驶舱</span></div>
+    <div class="header">
+      <span class="title" @click="goHome">数字能力超市</span>
+    </div>
     <div class="main">
       <platform-overview></platform-overview>
       <application-resources></application-resources>
@@ -27,6 +29,11 @@
   import Infrastructure from '@/views/capabilityCloud/components/Infrastructure.vue'
   import DataResources from '@/views/capabilityCloud/components/DataResources.vue'
   import KnowledgeBase from '@/views/capabilityCloud/components/KnowledgeBase.vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const goHome = () => {
+    router.push('/home')
+  }
 </script>
 <style lang="less">
   @font-face {
diff --git a/front/src/views/capacityOnTheShelf/Application.vue b/front/src/views/capacityOnTheShelf/Application.vue
index c01126a7..d2483801 100644
--- a/front/src/views/capacityOnTheShelf/Application.vue
+++ b/front/src/views/capacityOnTheShelf/Application.vue
@@ -391,7 +391,7 @@
         }
         .line {
           margin-left: 10px;
-          width: 140px;
+          width: 280px;
           height: 1px;
           background: #999;
         }
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index c6c19bdc..96eae8fe 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -16,21 +16,14 @@
       <template v-if="title.isConfigure">
         <div class="bottom">
           <div class="items" v-if="data[title.name].length > 0">
-            <div
-              class="item"
-              v-for="(val, index) in data[title.name]"
-              :key="'key1' + val.name + index"
-            >
+            <div class="item" v-for="(val, index) in data[title.name]" :key="'key1' + val.name + index">
               <p>
                 <span>{{ title.name }}-{{ index + 1 }}</span>
                 <span></span>
               </p>
-              <p
-                v-for="attr in props.configure.filter(
-                  (item, index2) => item.name === title.name
-                )[0].list"
-                :key="'key2' + attr.name + index2"
-              >
+              <p v-for="attr in props.configure.filter(
+                (item, index2) => item.name === title.name
+              )[0].list" :key="'key2' + attr.name + index2">
                 <span>{{ attr.name }}</span>
                 <span v-if="attr.type === 'image'">
                   <a-image :width="85" :height="60" :src="val.img" />
@@ -44,51 +37,19 @@
             </div>
           </div>
           <div class="add">添加更多{{ title.name }}</div>
-          <div
-            class="form"
-            v-for="(val, index) in props.configure.filter(
-              (item) => item.name === title.name
-            )[0].list"
-            :key="'key3' + val.name + index"
-          >
+          <div class="form" v-for="(val, index) in props.configure.filter(
+            (item) => item.name === title.name
+          )[0].list" :key="'key3' + val.name + index">
             <span>{{ val.name }}</span>
-            <a-input
-              v-model:value="val.note1"
-              :maxlength="24"
-              :placeholder="'请填写' + val.name + ',不超过24个字符'"
-              v-if="val.type == 'input'"
-            />
-            <a-textarea
-              v-model:value="val.note1"
-              :showCount="true"
-              :maxlength="200"
-              :placeholder="'请填写' + val.name"
-              v-else-if="val.type == 'textArea'"
-            />
-            <a-input-number
-              v-model:value="val.note1"
-              :min="0"
-              :max="9999"
-              :step="0.01"
-              string-mode
-              :placeholder="'请填写' + val.name"
-              v-else-if="val.type == 'number'"
-            />
-            <a-radio-group
-              v-model:value="val.note1"
-              :options="val.options"
-              v-else-if="val.type == 'radio'"
-            />
-            <upload
-              :key="showKey"
-              type="图片"
-              btnName="上传图片"
-              :maxCount="1"
-              :data="val"
-              :list="[]"
-              tip="支持图片类型，大小不超过100M"
-              v-else-if="val.type == 'image'"
-            ></upload>
+            <a-input v-model:value="val.note1" :maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
+              v-if="val.type == 'input'" />
+            <a-textarea v-model:value="val.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + val.name"
+              v-else-if="val.type == 'textArea'" />
+            <a-input-number v-model:value="val.note1" :min="0" :max="9999" :step="0.01" string-mode
+              :placeholder="'请填写' + val.name" v-else-if="val.type == 'number'" />
+            <a-radio-group v-model:value="val.note1" :options="val.options" v-else-if="val.type == 'radio'" />
+            <upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型，大小不超过100M"
+              v-else-if="val.type == 'image'"></upload>
           </div>
           <div class="submit">
             <a-button type="primary" @click="add(title.name)">提交</a-button>
@@ -99,505 +60,613 @@
         <div class="bottom">
           <div class="form" v-for="item in title.children" :key="item.id">
             <span>{{ item.name }}</span>
-            <a-input
-              v-if="item.type == 'input'"
-              v-model:value="item.note1"
-              :placeholder="'请输入' + item.name"
-            />
-            <a-radio-group
-              v-else-if="item.type == 'radio'"
-              v-model:value="item.note1"
-              :options="item.options"
-            />
-            <a-input
-              v-else-if="item.type == 'text'"
-              v-model:value="item.note1"
-              :placeholder="'请输入' + item.name"
-              :disabled="true"
-            />
-            <a-input
-              v-else-if="item.type == 'text2'"
-              v-model:value="item.note1"
-              :placeholder="'请输入' + item.name"
-              :disabled="true"
-            />
-            <a-textarea
-              v-else-if="item.type == 'textArea'"
-              v-model:value="item.note1"
-              :showCount="true"
-              :maxlength="200"
-              :placeholder="'请输入' + item.name"
-            />
-            <upload
-              v-else-if="item.type == 'image'"
-              type="图片"
-              btnName="上传图片"
-              :maxCount="1"
-              :data="item"
-              :list="props.imgList"
-              tip="支持图片类型，大小不超过100M"
-            ></upload>
-            <upload
-              v-else-if="item.type == 'file' && item.name !== '使用手册'"
-              type="文件"
-              btnName="上传附件"
-              :maxCount="1"
-              :data="item"
-              :list="props.fileList"
-              tip="支持文件类型，大小不超过100M"
-            ></upload>
-            <upload
-              v-else-if="item.name == '使用手册'"
-              type="文件"
-              btnName="上传附件"
-              :maxCount="1"
-              :data="item"
-              :busType="2"
-              :list="props.fileList2"
-              tip="支持文件类型，大小不超过100M"
-            ></upload>
-            <upload
-              v-else-if="item.type == 'video'"
-              type="视频"
-              btnName="上传视频"
-              :maxCount="1"
-              :data="item"
-              :list="props.videoList"
-              tip="支持视频类型，大小不超过100M"
-            ></upload>
+            <a-input v-if="item.type == 'input'" v-model:value="item.note1" :placeholder="'请输入' + item.name" />
+            <a-radio-group v-else-if="item.type == 'radio'" v-model:value="item.note1" :options="item.options" />
+            <a-input v-else-if="item.type == 'text'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
+              :disabled="true" />
+            <a-input v-else-if="item.type == 'text2'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
+              :disabled="true" />
+            <a-textarea v-else-if="item.type == 'textArea'" v-model:value="item.note1" :showCount="true"
+              :maxlength="200" :placeholder="'请输入' + item.name" />
+            <upload v-else-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
+              :list="props.imgList" tip="支持图片类型，大小不超过100M"></upload>
+            <upload v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
+              :data="item" :list="props.fileList" tip="支持文件类型，大小不超过100M"></upload>
+            <upload v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :data="item" :busType="2"
+              :list="props.fileList2" tip="支持文件类型，大小不超过100M"></upload>
+            <upload v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :data="item"
+              :list="props.videoList" tip="支持视频类型，大小不超过100M"></upload>
             <a-button v-else-if="item.type == 'dialog'" @click="sourceClick">
               请选择来源应用
             </a-button>
-            <a-select
-              v-else-if="item.type == 'select'"
-              style="width: 240px"
-              v-model:value="item.note1"
-              :placeholder="'请选择' + item.name"
-            >
-              <a-select-option
-                v-for="(itemSelect, indexSelect) in item.options"
-                :key="indexSelect"
-                :value="itemSelect.dictLabel"
-              >
+            <a-button v-else-if="item.type == 'dialog2'" @click="componentsClick">
+              请选择关联组件
+            </a-button>
+            <a-select v-else-if="item.type == 'select'" style="width: 240px" v-model:value="item.note1"
+              :placeholder="'请选择' + item.name">
+              <a-select-option v-for="(itemSelect, indexSelect) in item.options" :key="indexSelect"
+                :value="itemSelect.dictLabel">
                 {{ itemSelect.dictLabel }}
               </a-select-option>
             </a-select>
-            <div
-              v-else-if="item.type == 'checkBox'"
-              class="application-Area"
-              id="application-Area"
-              :key="showKey"
-            >
-              <div
-                v-for="(itemson, indexson) in item.options"
-                :key="indexson"
-                class="application-Area-son"
-                @click="ApplicationArea(item, itemson)"
-                :class="
+            <div v-else-if="item.type == 'checkBox'" class="application-Area" id="application-Area" :key="showKey">
+              <div v-for="(itemson, indexson) in item.options" :key="indexson" class="application-Area-son"
+                @click="ApplicationArea(item, itemson)" :class="
                   item.note2.indexOf(itemson.dictLabel) != -1
                     ? 'application-Area-down'
                     : ''
-                "
-              >
+                ">
                 {{ itemson.dictLabel }}
               </div>
             </div>
           </div>
+          <div class="AssociatedApplication">
+            <a-modal v-model:visible="visibleAssociatedApplication" :title="titleName" @ok="handleOk"
+              @cancel="handleCancel" style="width: 960px">
+              <div>
+                <a-transfer v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys"
+                  :data-source="mockData" :titles="titles" :render="(item) => item.title" @change="handleChange"
+                  @selectChange="handleSelectChange" />
+              </div>
+            </a-modal>
+          </div>
         </div>
       </template>
     </div>
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch, onMounted } from 'vue'
-  import mybus from '@/myplugins/mybus'
-  import upload from '@/views/components/upload'
-  import { message } from 'ant-design-vue'
-  import { getCategoryTreePage } from '@/api/personalCenter'
-  import { useRouter } from 'vue-router'
-  const router = useRouter()
-  const abilityToType = router.currentRoute.value.query.abilityToType
-  const componentTypeValue = router.currentRoute.value.query.componentTypeValue
-  const props = defineProps({
-    // 展示数据
-    refData: { type: Object, default: null },
-    // 表单数据
-    dataFrom: { type: Array, default: null },
-    // 文件回显
-    fileList: { type: Array, default: null },
-    fileList2: { type: Array, default: null },
-    // 图片回显
-    imgList: { type: Array, default: null },
-    // 视频回显
-    videoList: { type: Array, default: null },
-    // 外部字段
-    externalField: { type: Array, default: null },
-    // 多条的配置
-    configure: { type: Array, default: null },
-    // [{
-    //   name:'计费标准信息',
-    //   list:[
-    //     {
-    //       name:'计费方式',
-    //       type:'radio',
-    //       field:'type',
-    //       options:
-    //         {
-    //           name:'一次性买断',
-    //           value:'1'
-    //         },
-    //         {
-    //           name:'按调用次数',
-    //           value:'2'
-    //         },
-    //         {
-    //           name:'按并发路数',
-    //           value:'3'
-    //         },
-    //         {
-    //           name:'按年计费',
-    //           value:'4'
-    //         }
-    //       ],
-    //       note1:''
-    //     },
-    //     {
-    //       name:'计费标准',
-    //       field:'price',
-    //       type:'number',
-    //       company:'元',
-    //       note1: ''
-    //     },
-    //     {
-    //       name:'计费标准描述',
-    //       field:'desc',
-    //       type:'textArea',
-    //       note1:''
-    //     }
-    //   ]
-    // }]
-  })
-  // console.log('props==========>', props)
-  const data = ref({
-    list: [],
-  })
-  const showKey = ref(0)
-  props.refData.children.map((item) => {
-    if (item.name == '基本信息') {
-      item.children.map((val) => {
-        if (val.name == '能力类型') {
-          val.note1 = abilityToType
-        }
-        if (val.name == '组件类型') {
-          val.note1 = componentTypeValue
-        }
-      })
-    }
-    if (
-      props.configure &&
-      props.configure.filter((val) => val.name === item.name).length > 0
-    ) {
-      item.isConfigure = true
-      data.value[item.name] = []
-    } else {
-      item.isConfigure = false
-    }
-  })
-  let arr = props.refData.children.filter((item) => {
-    if (props.configure) {
-      if (!item.isConfigure) {
-        return item
+import { ref, defineProps, watch, onMounted } from 'vue'
+import mybus from '@/myplugins/mybus'
+import upload from '@/views/components/upload'
+import { message } from 'ant-design-vue'
+import {
+  getCategoryTreePage,
+  queryApplicationRelByResourceId,
+  queryResourceRelByKeyId,
+} from '@/api/personalCenter'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const abilityToType = router.currentRoute.value.query.abilityToType
+const componentTypeValue = router.currentRoute.value.query.componentTypeValue
+const props = defineProps({
+  // 展示数据
+  refData: { type: Object, default: null },
+  // 表单数据
+  dataFrom: { type: Array, default: null },
+  // 文件回显
+  fileList: { type: Array, default: null },
+  fileList2: { type: Array, default: null },
+  // 图片回显
+  imgList: { type: Array, default: null },
+  // 视频回显
+  videoList: { type: Array, default: null },
+  // 外部字段
+  externalField: { type: Array, default: null },
+  // 多条的配置
+  configure: { type: Array, default: null },
+  // [{
+  //   name:'计费标准信息',
+  //   list:[
+  //     {
+  //       name:'计费方式',
+  //       type:'radio',
+  //       field:'type',
+  //       options:
+  //         {
+  //           name:'一次性买断',
+  //           value:'1'
+  //         },
+  //         {
+  //           name:'按调用次数',
+  //           value:'2'
+  //         },
+  //         {
+  //           name:'按并发路数',
+  //           value:'3'
+  //         },
+  //         {
+  //           name:'按年计费',
+  //           value:'4'
+  //         }
+  //       ],
+  //       note1:''
+  //     },
+  //     {
+  //       name:'计费标准',
+  //       field:'price',
+  //       type:'number',
+  //       company:'元',
+  //       note1: ''
+  //     },
+  //     {
+  //       name:'计费标准描述',
+  //       field:'desc',
+  //       type:'textArea',
+  //       note1:''
+  //     }
+  //   ]
+  // }]
+})
+// console.log('props==========>', props)
+const data = ref({
+  list: [],
+})
+const showKey = ref(0)
+props.refData.children.map((item) => {
+  if (item.name == '基本信息') {
+    item.children.map((val) => {
+      if (val.name == '能力类型') {
+        val.note1 = abilityToType
       }
-    } else {
+      if (val.name == '组件类型') {
+        val.note1 = componentTypeValue
+      }
+    })
+  }
+  if (
+    props.configure &&
+    props.configure.filter((val) => val.name === item.name).length > 0
+  ) {
+    item.isConfigure = true
+    data.value[item.name] = []
+  } else {
+    item.isConfigure = false
+  }
+})
+let arr = props.refData.children.filter((item) => {
+  if (props.configure) {
+    if (!item.isConfigure) {
       return item
     }
-  })
-  data.value.list = []
-  // 获取字典数据
-  arr.forEach((val) => {
-    val.children.forEach((item) => {
-      if (item.isLinkToDic === 'true' && item.linkValue) {
-        getCategoryTreePage({
-          page: 1,
-          limit: 20,
-          dictTypeId: item.linkValue,
-          deFlage: 0,
-        }).then((res) => {
-          if (item.type === 'radio') {
-            item.options = res.data.data.list.map((radio) => radio.dictLabel)
-          } else if (item.type === 'select' || item.type === 'checkBox') {
-            if (item.type === 'checkBox') {
-              if (!item.note2) {
-                item.note2 = []
-              }
-            }
-            item.options = res.data.data.list
-          }
-          data.value.list.push(item)
-        })
-      } else {
-        data.value.list.push(item)
-      }
-    })
-  })
-  if (props.dataFrom) {
-    // console.log(props.dataFrom, data.value.list)
-    props.dataFrom.infoList.forEach((item) => {
-      if (
-        props.configure &&
-        props.configure.filter((val) => val.name === item.attrType).length > 0
-      ) {
-        data.value[item.attrType] = JSON.parse(item.attrValue)
-      } else if (item.attrType === '应用领域') {
-        props.refData.children.forEach((val) => {
-          val.children.forEach((child) => {
-            if (child.name === item.attrType) {
-              // 通过;分割成数组
-              child.note2 = item.attrValue.split(';')
-              showKey.value++
-              // console.log('应用领域', item, item.attrValue.split(';'), child)
-            }
-          })
-        })
-        //  item.note1 = item.attrValue.split(';')
-      }
-    })
+  } else {
+    return item
   }
-  const add = (title) => {
-    let list = props.configure.filter((item) => item.name === title)[0].list
-    let flag = true
-    list.forEach((item) => {
-      // console.log(item)
-      if (item.type !== 'number' && !item.note1.length > 0) {
-        flag = false
-      } else if (item.type === 'number' && !item.note1 > 0) {
-        flag = false
-      }
-    })
-    if (flag) {
-      let obj = {}
-      list.forEach((item) => {
-        obj[item.field] = item.note1
-      })
-      data.value[title].push(obj)
-      // console.log(data.value[title])
-      mybus.emit('chageDataFrom', {
-        attrType: title,
-        attrValue: JSON.stringify(data.value[title]),
-        delFlag: 0,
-      })
-      list.forEach((item) => {
-        item.note1 = ''
-        showKey.value++
+})
+data.value.list = []
+// 获取字典数据
+arr.forEach((val) => {
+  val.children.forEach((item) => {
+    if (item.isLinkToDic === 'true' && item.linkValue) {
+      getCategoryTreePage({
+        page: 1,
+        limit: 20,
+        dictTypeId: item.linkValue,
+        deFlage: 0,
+      }).then((res) => {
+        if (item.type === 'radio') {
+          item.options = res.data.data.list.map((radio) => radio.dictLabel)
+        } else if (item.type === 'select' || item.type === 'checkBox') {
+          if (item.type === 'checkBox') {
+            if (!item.note2) {
+              item.note2 = []
+            }
+          }
+          item.options = res.data.data.list
+        }
+        data.value.list.push(item)
       })
     } else {
-      message.warning('请填写完整')
+      data.value.list.push(item)
     }
-  }
-  const del = (title, index) => {
-    data.value[title].splice(index, 1)
+  })
+})
+if (props.dataFrom) {
+  // console.log(props.dataFrom, data.value.list)
+  props.dataFrom.infoList.forEach((item) => {
+    if (
+      props.configure &&
+      props.configure.filter((val) => val.name === item.attrType).length > 0
+    ) {
+      data.value[item.attrType] = JSON.parse(item.attrValue)
+    } else if (item.attrType === '应用领域') {
+      props.refData.children.forEach((val) => {
+        val.children.forEach((child) => {
+          if (child.name === item.attrType) {
+            // 通过;分割成数组
+            child.note2 = item.attrValue.split(';')
+            showKey.value++
+            // console.log('应用领域', item, item.attrValue.split(';'), child)
+          }
+        })
+      })
+      //  item.note1 = item.attrValue.split(';')
+    }
+  })
+}
+const add = (title) => {
+  console.log(title, 'title')
+  let list = props.configure.filter((item) => item.name === title)[0].list
+  let flag = true
+  list.forEach((item) => {
+    // console.log(item)
+    if (item.type !== 'number' && !item.note1.length > 0) {
+      flag = false
+    } else if (item.type === 'number' && !item.note1 > 0) {
+      flag = false
+    }
+  })
+  if (flag) {
+    let obj = {}
+    list.forEach((item) => {
+      obj[item.field] = item.note1
+    })
+    data.value[title].push(obj)
+    // console.log(data.value[title])
     mybus.emit('chageDataFrom', {
       attrType: title,
       attrValue: JSON.stringify(data.value[title]),
       delFlag: 0,
     })
-  }
-  const ApplicationArea = (item, itemson) => {
-    // console.log(item, itemson)
-    if (item.note2.indexOf(itemson.dictLabel) === -1) {
-      item.note2.push(itemson.dictLabel)
-    } else {
-      item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
-    }
-    mybus.emit('chageDataFrom', {
-      attrType: item.name,
-      attrValue: item.note2.join(';'),
-      delFlag: 0,
+    list.forEach((item) => {
+      item.note1 = ''
+      showKey.value++
     })
+  } else {
+    message.warning('请填写完整')
   }
-  const sourceClick = () => {}
-  watch(data.value.list, (newProps, oldProps) => {
-    // console.log(newProps, oldProps)
-    newProps.forEach((val) => {
-      // console.log('数据发生改变==========>', val)
-      if (
-        props.configure &&
-        props.configure.filter((item) => item.name === val.name).length > 0
-      ) {
+}
+const del = (title, index) => {
+  data.value[title].splice(index, 1)
+  mybus.emit('chageDataFrom', {
+    attrType: title,
+    attrValue: JSON.stringify(data.value[title]),
+    delFlag: 0,
+  })
+}
+const ApplicationArea = (item, itemson) => {
+  // console.log(item, itemson)
+  if (item.note2.indexOf(itemson.dictLabel) === -1) {
+    item.note2.push(itemson.dictLabel)
+  } else {
+    item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
+  }
+  mybus.emit('chageDataFrom', {
+    attrType: item.name,
+    attrValue: item.note2.join(';'),
+    delFlag: 0,
+  })
+}
+// 来源应用
+const visibleAssociatedApplication = ref(false)
+const mockData = ref([])
+const titles = ref(['未关联的应用名称', '已关联的应用名称'])
+const titleName = ref('关联应用')
+
+const sourceClick = () => {
+  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,
+      })
+    })
+  })
+}
+// 关联组件
+const componentsClick = () => {
+  titles.value = ['未关联的组件名称', '已关联的组件名称']
+  titleName.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,
+      })
+    })
+  })
+}
+const targetKeys = ref([])
+const selectedKeys = ref([])
+
+const handleChange = (nextTargetKeys, direction, moveKeys) => {
+  console.log('targetKeys: ', nextTargetKeys)
+  console.log('direction: ', direction)
+  console.log('moveKeys: ', moveKeys)
+}
+
+const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+  console.log('targetSelectedKeys: ', targetSelectedKeys)
+}
+
+const handleOk = (e) => {
+  console.log(e)
+  visibleAssociatedApplication.value = false
+  // console.log('2222222222222', props.refData)
+  data.value.list.map((item) => {
+    if (item.name === '来源应用' || item.name === '关联组件信息') {
+      item.note1 = targetKeys.value + ''
+    }
+  })
+}
+const handleCancel = (e) => {
+  console.log(e)
+  visibleAssociatedApplication.value = false
+}
+
+watch(data.value.list, (newProps, oldProps) => {
+  // console.log(newProps, oldProps)
+  newProps.forEach((val) => {
+    // console.log('数据发生改变==========>', val)
+    if (
+      props.configure &&
+      props.configure.filter((item) => item.name === val.name).length > 0
+    ) {
+      mybus.emit('chageDataFrom', {
+        attrType: val.name,
+        attrValue: val.note1,
+        delFlag: 0,
+      })
+    } else if (
+      props.externalField &&
+      props.externalField.indexOf(val.name) > -1
+    ) {
+      mybus.emit('chageDataFromDwon', {
+        attrType: val.name,
+        attrValue: val.note1,
+        delFlag: 0,
+      })
+    } else {
+      if (val.name !== '应用领域') {
         mybus.emit('chageDataFrom', {
           attrType: val.name,
           attrValue: val.note1,
           delFlag: 0,
         })
-      } else if (
-        props.externalField &&
-        props.externalField.indexOf(val.name) > -1
-      ) {
-        mybus.emit('chageDataFromDwon', {
-          attrType: val.name,
-          attrValue: val.note1,
-          delFlag: 0,
-        })
-      } else {
-        if (val.name !== '应用领域') {
-          mybus.emit('chageDataFrom', {
-            attrType: val.name,
-            attrValue: val.note1,
-            delFlag: 0,
-          })
-        }
       }
-    })
+    }
   })
+})
 </script>
 <style lang="less" scoped>
-  .put-on-the-shelf {
-    height: 680px;
-    overflow: scroll;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 50px 100px 25px;
-    & > 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;
-        }
-      }
-      .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: flex-start;
-          span:first-child {
-            width: 120px;
-          }
-          :deep(.ant-input-textarea) {
-            width: 570px;
-          }
-          :deep(.ant-radio-group) {
-            width: 570px;
-          }
-          :deep(.ant-input-number) {
-            width: 200px;
-          }
-          :deep(.ant-input) {
-            resize: none;
-            width: 570px;
-          }
-          .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;
-    }
-  }
-  .application-Area {
-    width: 570px;
-    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;
+.put-on-the-shelf {
+  height: 680px;
+  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px 100px 25px;
+
+  &>div {
+    width: 100%;
+    margin-top: 60px;
+
+    .top {
       color: #333333;
-      background: #f5f5f5;
-      border: 1px #cccccc solid;
+      font-size: 22px;
       display: flex;
       justify-content: center;
       align-items: center;
-      margin-top: 10px;
-      font-weight: 500;
+      margin-bottom: 25px;
+
+      div:first-child,
+      div:last-child {
+        width: 245px;
+        height: 1px;
+        background: #f0f0f0;
+      }
+
+      div:nth-child(2) {
+        margin: 0 30px;
+      }
     }
-    .application-Area-down {
-      background: #0087ff;
-      color: #fff;
+
+    .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: flex-start;
+
+        span:first-child {
+          width: 120px;
+        }
+
+        :deep(.ant-input-textarea) {
+          width: 570px;
+        }
+
+        :deep(.ant-radio-group) {
+          width: 570px;
+        }
+
+        :deep(.ant-input-number) {
+          width: 200px;
+        }
+
+        :deep(.ant-input) {
+          resize: none;
+          width: 570px;
+        }
+
+        .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;
+        }
+      }
     }
   }
-  :deep(.ant-image-img) {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+
+  &>div:nth-of-type(1) {
+    margin-top: 0;
   }
+}
+
+.application-Area {
+  width: 570px;
+  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;
+  }
+}
+
+: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/detailsAll/AlgorithmDetails.vue b/front/src/views/detailsAll/AlgorithmDetails.vue
index f215bd10..bb7a9b71 100644
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@@ -10,182 +10,159 @@
     <!-- 头部基本信息 -->
     <algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
     <!-- 导航 -->
-    <algorithm-navigation
-      :dataList="dataList.data"
-      :class="{ fixed: scrollTop >= 600 }"
-      :selectNow="selectNow"
-    ></algorithm-navigation>
-    <!-- 算法展示  视频 -->
-    <algorithm-display
-      :dataList="dataList.data"
-      id="algorithm-display"
-      class="scrollBox"
-    ></algorithm-display>
+    <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-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 } 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',
-          }).then(() => {
-            window.sessionStorage.setItem(
-              'visits',
-              JSON.stringify(arrList.value)
-            )
-          })
-        }
-      })
-      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)
     }
-  }
-  init(id)
-  onBeforeUnmount(() => {
-    mybus.off('flyToView')
   })
+})
+
+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(() => {
+        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
+      })
+    })
+  } else if (obj) {
+    dataList.data = obj
+    console.log('预览==============', obj)
+  }
+}
+init(id)
+onBeforeUnmount(() => {
+  mybus.off('flyToView')
+})
 </script>
 <style lang="less" scoped>
-  .fixed {
-    position: fixed;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-  }
-  .fixed2 > div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
+.fixed {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+}
+
+.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 5589ab37..7eee09d3 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -8,192 +8,172 @@
 <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-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-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
+      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></application-navigation>
     <!-- 关联能力 -->
-    <application-associated-ability
-      :associatedComponents="associatedComponentsFunction()"
-      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-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-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 } from '@/api/home'
-  import mybus from '@/myplugins/mybus'
-  const associatedComponents = ref([
-    { type: '组件服务', dataList: [] },
-    { type: '数据资源', dataList: [] },
-    { type: '基础设施', dataList: [] },
-  ])
-  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 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',
-          }).then(() => {
-            window.sessionStorage.setItem(
-              'visits',
-              JSON.stringify(arrList.value)
-            )
-          })
-        }
-      })
-      associatedComponents.value.map((item, index) => {
-        let queryPartAppByKeyIdParams = {
-          keyId: id,
-          type: item.type,
-        }
-        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
-          associatedComponents.value[index].dataList = res.data.data
+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(() => {
+        console.log('浏览记录+1')
       })
-    } else if (obj) {
-      dataList.data = obj
-      console.log('预览==============', obj)
-    }
+    })
+    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)
   }
-  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;
-  }
-  .fixed2 > div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
+.fixed {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+}
+
+.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 00a0434f..cb14bfd2 100644
--- a/front/src/views/detailsAll/BusinessDetails.vue
+++ b/front/src/views/detailsAll/BusinessDetails.vue
@@ -10,162 +10,149 @@
     <!-- 头部基本信息 -->
     <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
-      :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 } 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: [] }])
-  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',
-          }).then(() => {
-            window.sessionStorage.setItem(
-              'visits',
-              JSON.stringify(arrList.value)
-            )
-          })
-        }
-      })
-      associatedComponents.value.map((item, index) => {
-        let queryPartAppByKeyIdParams = {
-          keyId: id,
-        }
-        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-          associatedComponents.value[index].dataList = res.data.data
-        })
-      })
-    } else if (obj) {
-      dataList.data = obj
-      console.log('预览==============', obj)
     }
-  }
-  init(id)
-  onBeforeUnmount(() => {
-    mybus.off('flyToView')
   })
+})
+
+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(() => {
+        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
+      })
+    })
+  } else if (obj) {
+    dataList.data = obj
+    console.log('预览==============', obj)
+  }
+}
+init(id)
+onBeforeUnmount(() => {
+  mybus.off('flyToView')
+})
 </script>
 <style lang="less" scoped>
-  .fixed {
-    position: fixed;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-  }
-  .fixed2 > div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
+.fixed {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+}
+
+.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 2047bcbd..be9c7f40 100644
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@@ -10,169 +10,157 @@
     <!-- 头部基本信息 -->
     <developer-top-details :dataList="dataList.data"></developer-top-details>
     <!-- 导航 -->
-    <developer-navigation
-      :dataList="dataList.data"
-      :associatedComponents="associatedComponents"
-      :class="{ fixed: scrollTop >= 600 }"
-      :selectNow="selectNow"
-    ></developer-navigation>
-    <!-- 组件展示  视频 -->
-    <Developer-presentation
-      :dataList="dataList.data"
-      id="eveloper-presentation"
-      class="scrollBox"
-    ></Developer-presentation>
+    <developer-navigation :dataList="dataList.data" :associatedComponents="associatedComponentsFunction()"
+      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></developer-navigation>
     <!-- 关联能力 -->
-    <developer-associated-ability
-      :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-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 } 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: [] }])
-  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
+})
+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',
-          }).then(() => {
-            window.sessionStorage.setItem(
-              'visits',
-              JSON.stringify(arrList.value)
-            )
-          })
-        }
-      })
-      associatedComponents.value.map((item, index) => {
-        let queryPartAppByKeyIdParams = {
-          keyId: id,
-        }
-        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-          associatedComponents.value[index].dataList = res.data.data
-        })
-      })
-    } else if (obj) {
-      dataList.data = obj
-      console.log('预览==============', obj)
     }
-  }
-  init(id)
-  onBeforeUnmount(() => {
-    mybus.off('flyToView')
   })
+})
+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
+  }
+}
+onBeforeUnmount(() => {
+  mybus.off('flyToView')
+})
 </script>
 <style lang="less" scoped>
-  .fixed {
-    position: fixed;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-  }
-  .fixed2 > div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
+.fixed {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+}
+
+.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 2411a090..6228798c 100644
--- a/front/src/views/detailsAll/LayerService.vue
+++ b/front/src/views/detailsAll/LayerService.vue
@@ -8,173 +8,156 @@
 <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"
-    ></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 } 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: [] }])
-  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',
-          }).then(() => {
-            window.sessionStorage.setItem(
-              'visits',
-              JSON.stringify(arrList.value)
-            )
-          })
-        }
-      })
-      associatedComponents.value.map((item, index) => {
-        let queryPartAppByKeyIdParams = {
-          keyId: id,
-        }
-        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
-          associatedComponents.value[index].dataList = res.data.data
-        })
-      })
-    } else if (obj) {
-      dataList.data = obj
-      console.log('预览==============', obj)
     }
-  }
-  init(id)
-  onBeforeUnmount(() => {
-    mybus.off('flyToView')
   })
+})
+
+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(() => {
+        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
+      })
+    })
+  } else if (obj) {
+    dataList.data = obj
+    console.log('预览==============', obj)
+  }
+}
+init(id)
+onBeforeUnmount(() => {
+  mybus.off('flyToView')
+})
 </script>
 <style lang="less" scoped>
-  .fixed {
-    position: fixed;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-  }
-  .fixed2 > div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
+.fixed {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+}
+
+.fixed2>div:nth-of-type(3) {
+  margin-top: 0.84rem;
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
index 023501d8..d7f93986 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
@@ -1,30 +1,79 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
     <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
-    <div class="application-associated-ability-main">
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
       <div
         class="associated-ability-card"
         v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
         :key="dataListitem.id"
         @click="switchFunction(dataListitem.id)"
       >
-        <div class="associated-ability-card-title">
-          {{ dataListitem.name }}
-        </div>
-        <div class="associated-ability-card-content">
-          <div class="associated-ability-card-content-font">
-            {{ dataListitem.description }}
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
+          <div class="associated-ability-card-title">
+            {{ dataListitem.name }}
           </div>
+        </a-tooltip>
+        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description }}</template>
+            <div class="associated-ability-card-content-font">
+              {{ dataListitem.description }}
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>
 
 <script setup>
   import { ref, defineProps, watch } from 'vue'
   import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
   const router = useRouter()
+  const modules = ref([Pagination])
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
   const props = defineProps({
     associatedComponents: { type: Array, default: null },
@@ -40,7 +89,7 @@
     //     id: id,
     //   },
     // })
-    window.open(window.SITE_CONFIG.previewUrl+ '#/details?id=' + id)
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
     // alert(id)
   }
   console.log('这个是空值', props.associatedComponents[0])
@@ -78,7 +127,7 @@
 <style lang="less" scoped>
   .application-associated-ability {
     padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -86,20 +135,31 @@
       margin-top: 0.4rem;
       width: 13.3rem;
       display: flex;
-      justify-content: space-around;
+      justify-content: space-around !important;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
       .associated-ability-card {
         width: 3.2rem;
+        height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #e4e6f5;
         border-radius: 0.1rem;
         padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
         cursor: pointer;
         .associated-ability-card-title {
+          width: 2.2rem;
           padding-top: 0.3rem;
           font-size: 0.22rem;
           text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -111,6 +171,10 @@
             margin-right: 0.15rem;
             margin-top: 0.15rem;
             text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
index f613518f..fea7e325 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 14:54:01
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-30 17:09:40
+ * @LastEditTime: 2022-07-05 19:38:06
  * @Description: 算法详情页导航
 -->
 <template>
@@ -65,25 +65,27 @@
   ])
   const list = ref([])
   // 根据能力id查询是否存在关联应用
-  queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
-    console.log('ressssssss', res)
-    if (res.data.data.length > 0) {
-      // 存在关联应用时在导航栏加入关联应用
-      navList.value.unshift({
-        name: '关联应用',
-        key: 'algorithm-associated-ability',
-        show: true,
-      })
-      // list.value.push('关联应用')
-      console.log('navList', navList)
-    }
-  })
+  if (keyId) {
+    queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length > 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联应用',
+          key: 'algorithm-associated-ability',
+          show: true,
+        })
+        // list.value.push('关联应用')
+        console.log('navList', navList)
+      }
+    })
+  }
   const props = defineProps({
     selectNow: { type: String, default: '' },
     dataList: { type: Object, default: null },
   })
 
-  const select = ref('algorithm-display')
+  const select = ref('algorithm-associated-ability')
 
   const selectNav = (key) => {
     select.value = key
@@ -101,7 +103,7 @@
         list.value.push(item.attrType)
       } else if (item.attrType === '算法介绍视频') {
         list.value.push('算法展示')
-      } else if (item.attrType === '试用地址') {
+      } else if (item.attrType === '试用地址' && item.attrValue) {
         list.value.push('算法试用')
       } else if (item.attrType === '计费标准信息') {
         list.value.push('计费标准')
@@ -126,7 +128,7 @@
     )
     if (navList.value.filter((item) => item.name === list.value[0])[0]) {
       select.value = navList.value.filter(
-        (item) => item.name === list.value[0]
+        (item) => (item.name === '关联应用') | (item.name === list.value[0])
       )[0].key
     }
     console.log('11111111111111111111111111', list.value, navList.value)
@@ -152,7 +154,7 @@
             list.value.push(item.attrType)
           } else if (item.attrType === '算法介绍视频') {
             list.value.push('算法展示')
-          } else if (item.attrType === '试用地址') {
+          } else if (item.attrType === '试用地址' && item.attrValue) {
             list.value.push('算法试用')
           } else if (item.attrType === '计费标准信息') {
             list.value.push('计费标准')
@@ -165,7 +167,7 @@
             list.value.push('使用方式')
           }
         })
-        list.value.push('关联应用')
+        list.value.unshift('关联应用')
         navList.value.forEach((item) => {
           console.log(item)
           if (list.value.indexOf(item.name) > -1) {
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
index aba778da..55c37218 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-09 09:29:29
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-13 15:21:26
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-05 20:25:49
  * @Description: 算法详情 算法试用
 -->
 <template>
@@ -25,7 +25,7 @@
   const onTrial = ref('')
   if (props.dataList.infoList) {
     let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '试用地址'
+      (item) => item.attrType === '试用地址' && item.attrValue
     )[0]
     if (!obj) {
       flag.value = false
@@ -37,7 +37,7 @@
     () => 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/Algorithm/AlgorithmTopDetails.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
index d07af6cc..06303258 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:56:28
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-01 14:16:18
+ * @LastEditTime: 2022-07-05 11:41:52
  * @Description: 算法详情页头部
 -->
 <template>
@@ -96,6 +96,7 @@
               resourceName: props.dataList.name,
               time: props.dataList.createDate,
               type: props.dataList.type,
+              componentType: '智能算法',
             },
           ],
           deptId: props.dataList.deptId,
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
index b1726bed..9f43f6cb 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
@@ -17,7 +17,10 @@
           <div class="content-left-content">
             <p>
               <span>{{ item.link.name }}</span>
-              <span>{{ item.link.value }}</span>
+              <a-tooltip>
+                <template #title>{{ item.link.value }}</template>
+                <span>{{ item.link.value }}</span>
+              </a-tooltip>
             </p>
             <p>
               <span>{{ item.postMethod.name }}</span>
@@ -72,7 +75,7 @@
         title: '技术对接',
         titleSon: '调用接口',
         link: {
-          name: '接口地址：',
+          name: '服务接口：',
           value: '',
         },
         postMethod: {
@@ -225,10 +228,9 @@
             color: rgba(33, 41, 86, 0.8);
             line-height: 20px;
             p {
-              display: -webkit-box;
               overflow: hidden;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
+              text-overflow: ellipsis;
+              white-space: nowrap;
               margin-bottom: 10px;
             }
           }
@@ -283,13 +285,16 @@
           p {
             // width: 160px;
             height: 20px;
-            display: -webkit-box;
-            // overflow: hidden;
+            overflow: hidden;
+            text-overflow: ellipsis;
             white-space: nowrap;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
             margin-right: 15px;
             span {
+              display: inline-block;
+              max-width: 1.2rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
               cursor: pointer;
             }
           }
diff --git a/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue b/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
index 35db3991..43b73927 100644
--- a/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
+++ b/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
@@ -6,11 +6,7 @@
         <div>
           <div class="title">图片识别</div>
           <div class="box">
-            <a-image
-              :width="510"
-              :height="340"
-              :src="responseUrl"
-            />
+            <a-image :width="510" :height="340" :src="responseUrl" />
             <a-upload
               v-model:file-list="fileList"
               name="file"
@@ -88,18 +84,17 @@
   const menuOpenKeys2 = ref(['全文还原'])
   let responseUrl = ref('static/image/test.jpg')
   const handleChange = (info) => {
-    debugger;
-        if (info.file.status !== 'uploading') {
-          console.log(info.file, info.fileList)
-        }
-        if (info.file.status === 'done') {
-          message.success(`${info.file.name} file uploaded successfully`)
-          responseUrl.value = info.file.response.data
-          checkImage()
-        } else if (info.file.status === 'error') {
-          message.error(`${info.file.name} file upload failed.`)
-        }
-      }
+    if (info.file.status !== 'uploading') {
+      console.log(info.file, info.fileList)
+    }
+    if (info.file.status === 'done') {
+      message.success(`${info.file.name} file uploaded successfully`)
+      responseUrl.value = info.file.response.data
+      checkImage()
+    } else if (info.file.status === 'error') {
+      message.error(`${info.file.name} file upload failed.`)
+    }
+  }
   const checkImage = () => {
     getUrlBase64(responseUrl.value, 'jpg', (base64) => {
       console.log('1111111', base64)
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
index e73ed586..2e2c8054 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
@@ -1,82 +1,121 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
-    <detals-title title="关联组件" type="RELEVANCE"></detals-title>
-    <div class="application-associated-ability-main">
+    <detals-title title="关联组件" type="ASSOCIATED"></detals-title>
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
       <div
         class="associated-ability-card"
-        v-for="(item, index) in dataFrom"
-        :key="item.type"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+        :key="dataListitem.id"
+        @click="switchFunction(dataListitem.id)"
+        :class="cardFunction(dataFrom[0].dataList)"
       >
-        <div class="associated-ability-card-title">
-          {{ item.type }}
-        </div>
-        <div class="associated-ability-card-content">
-          <div
-            class="associated-ability-card-content-font"
-            v-for="(dataListitem, dataListindex) in item.dataList"
-            :key="dataListitem.id"
-            @click="switchFunction(dataListitem.id)"
-          >
-            <span>{{ dataListindex + 1 }}、</span>
+        <div class="icon"></div>
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
+          <div class="associated-ability-card-title">
             {{ dataListitem.name }}
           </div>
+        </a-tooltip>
+        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description || '' }}</template>
+            <div class="associated-ability-card-content-font">
+              {{ dataListitem.description || '' }}
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+            :class="cardFunction(dataFrom[0].dataList)"
+          >
+            <div class="icon"></div>
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description || '' }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description || '' }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>
-
 <script setup>
   import { ref, defineProps, watch } from 'vue'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
   import { useRouter } from 'vue-router'
   const router = useRouter()
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
   const props = defineProps({
     associatedComponents: { type: Array, default: null },
   })
+  const modules = ref([Pagination])
   const dataFrom = ref([])
   const flag = ref(true)
   const oldid = router.currentRoute.value.query.id
   //点击查看详情
   const switchFunction = (id) => {
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
+    // router.push({
+    //   path: '/details',
+    //   query: {
+    //     id: id,
+    //   },
+    // })
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
+    // alert(id)
   }
-  if (props.associatedComponents) {
-    if (
-      props.associatedComponents[0].dataList.length > 0 ||
-      props.associatedComponents[1].dataList.length > 0 ||
-      props.associatedComponents[2].dataList.length > 0
-    ) {
-      flag.value = true
-      dataFrom.value = props.associatedComponents
-      console.log('dataFrom.value', dataFrom.value)
-    } else {
-      flag.value = false
-    }
+  if (props.associatedComponents[0].dataList.length != 0) {
+    console.log('这个是空值', props.associatedComponents)
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
   } else {
     flag.value = false
   }
-
+  //根据数据多少决定对齐方式
+  const cardFunction = (item) => {
+    if (item.length < 5) {
+      return 'card-function-class'
+    }
+  }
   watch(
     () => props.associatedComponents,
     (val) => {
-      if (props.associatedComponents) {
-        if (
-          val[0].dataList.length > 0 ||
-          val[1].dataList.length > 0 ||
-          val[2].dataList.length > 0
-        ) {
-          flag.value = true
-          dataFrom.value = props.associatedComponents
-          // console.log('dataFrom.value', dataFrom.value)
-        } else {
-          flag.value = false
-        }
+      if (val[0].length != 0) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
       } else {
         flag.value = false
       }
@@ -96,28 +135,47 @@
 <style lang="less" scoped>
   .application-associated-ability {
     padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
-      width: 13.14rem;
+      width: 13.3rem;
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
+      position: relative;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
       .associated-ability-card {
-        width: 4.28rem;
+        width: 3.2rem;
+        height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #e4e6f5;
         border-radius: 0.1rem;
         padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
+        padding-top: 0.3rem;
         cursor: pointer;
+        .icon {
+          width: 82px;
+          height: 82px;
+          background: url('~@/assets/detailsAll/sf_icon1.png') no-repeat;
+          background-size: 100%;
+        }
         .associated-ability-card-title {
+          width: 2.2rem;
           padding-top: 0.3rem;
           font-size: 0.22rem;
           text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -128,12 +186,18 @@
             color: #999;
             margin-right: 0.15rem;
             margin-top: 0.15rem;
-          }
-          .associated-ability-card-content-font:hover {
-            color: #0058e1;
+            text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
           }
         }
       }
+      .card-function-class {
+        display: flex;
+        justify-content: center;
+      }
       .associated-ability-card:hover {
         border-radius: 0.02rem;
         border: 0.01rem solid #0058e1;
diff --git a/front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue b/front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue
index 967a2296..80f0e179 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue
@@ -20,104 +20,112 @@
 </template>
 
 <script setup>
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-  import { ref, defineProps, watch } from 'vue'
-  const flag = ref(true)
-  let dataFrom = ref([])
-  const props = defineProps({
-    dataList: { type: Object, default: null },
-  })
-  if (props.dataList.infoList) {
-    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '常见问题'
-    )[0]
-    if (!obj) {
-      flag.value = false
-    } else {
-      obj.attrValue = JSON.parse(obj.attrValue)
-      obj.attrValue.map((item) => {
-        let params = {
-          title: item.question,
-          answer: item.answer,
-        }
-        dataFrom.value.push(params)
-      })
-    }
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+import { ref, defineProps, watch } from 'vue'
+const flag = ref(true)
+let dataFrom = ref([])
+const props = defineProps({
+  dataList: { type: Object, default: null },
+})
+if (props.dataList.infoList) {
+  let obj = props.dataList.infoList.filter(
+    (item) => item.attrType === '常见问题'
+  )[0]
+  if (!obj) {
+    flag.value = false
+  } else {
+    obj.attrValue = JSON.parse(obj.attrValue)
+    obj.attrValue.map((item) => {
+      let params = {
+        title: item.question,
+        answer: item.answer,
+      }
+      dataFrom.value.push(params)
+    })
   }
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
-        if (!obj) {
-          flag.value = false
-        } else {
-          obj.attrValue = JSON.parse(obj.attrValue)
-          obj.attrValue.map((item) => {
-            let params = {
-              title: item.question,
-              answer: item.answer,
-            }
-            dataFrom.value.push(params)
-          })
-        }
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
+      if (!obj) {
+        flag.value = false
+      } else {
+        obj.attrValue = JSON.parse(obj.attrValue)
+        obj.attrValue.map((item) => {
+          let params = {
+            title: item.question,
+            answer: item.answer,
+          }
+          dataFrom.value.push(params)
+        })
       }
     }
-  )
+  }
+)
 </script>
 
 <style lang="less" scoped>
-  .cpmmon-problem {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 80px;
-    background: #f7f8fa;
-    .content {
-      width: 1300px;
-      margin: 20px 0px;
-      background: #ffffff;
-      padding: 40px;
-      .content-son {
-        font-size: 20px;
-        margin-bottom: 60px;
-        .content-top {
-          display: flex;
-          align-items: center;
-          margin-bottom: 20px;
-          line-height: 20px;
-        }
-        .content-bottom {
-          display: flex;
-          line-height: 34px;
-          color: #666666;
-        }
-        .content-top,
-        .content-bottom {
-          div:last-child {
-            width: calc(100% - 54px);
-          }
-        }
-        .top-img {
-          width: 34px;
-          height: 30px;
-          background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
-          background-position: center;
-          background-size: cover;
-          margin-right: 20px;
-        }
-        .bottom-img {
-          width: 34px;
-          height: 30px;
-          background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
-          ackground-size: cover;
-          background-position: center;
-          margin-right: 20px;
+.cpmmon-problem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 160px;
+  background: #f7f8fa;
+
+  .content {
+    width: 1300px;
+    margin: 20px 0px;
+    background: #ffffff;
+    padding: 40px;
+
+    .content-son {
+      font-size: 20px;
+      margin-bottom: 60px;
+
+      .content-top {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        line-height: 20px;
+      }
+
+      .content-bottom {
+        display: flex;
+        line-height: 34px;
+        color: #666666;
+      }
+
+      .content-top,
+      .content-bottom {
+        div:last-child {
+          width: calc(100% - 54px);
         }
       }
-      .content-son:last-child {
-        margin-bottom: 0px;
+
+      .top-img {
+        width: 34px;
+        height: 30px;
+        background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
+        background-position: center;
+        background-size: cover;
+        margin-right: 20px;
+      }
+
+      .bottom-img {
+        width: 34px;
+        height: 30px;
+        background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
+        ackground-size: cover;
+        background-position: center;
+        margin-right: 20px;
       }
     }
+
+    .content-son:last-child {
+      margin-bottom: 0px;
+    }
   }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
index f5d5c2a8..135cff66 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
@@ -2,17 +2,10 @@
 <template>
   <div class="application-deployment-and-security">
     <div class="title">
-      <DetalsTitle
-        :title="dataFrom.title"
-        :type="dataFrom.englishTitle"
-      ></DetalsTitle>
+      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
     </div>
     <div class="content">
-      <div
-        v-for="(item, index) in dataFrom.content"
-        :key="index"
-        class="content-card"
-      >
+      <div v-for="(item, index) in dataFrom.content" :key="index" class="content-card">
         <div class="card-title">{{ item.childrenTitle }}</div>
         <div class="card-content">
           <div v-for="carditem in item.childrenContent" :key="carditem">
@@ -29,162 +22,176 @@
 </template>
 
 <script setup>
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-  import { ref, defineProps, watch } from 'vue'
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+import { ref, defineProps, watch } from 'vue'
 
-  let dataFrom = ref({
-    title: '部署与安全',
-    englishTitle: 'DEPLOY&SAFE',
-    content: [
-      {
-        childrenTitle: '部署',
-        childrenContent: [],
-      },
-      {
-        childrenTitle: '安全',
-        childrenContent: [],
-      },
-    ],
-  })
-  //数据初始化
-  const props = defineProps({
-    dataList: { type: Object, default: null },
-  })
-  if (props.dataList.infoList) {
-    props.dataList.infoList.map((item) => {
-      if (
-        item.attrType === '部署区域' ||
-        item.attrType === '是否统一登录' ||
-        item.attrType === '部署位置'
-      ) {
-        dataFrom.value.content[0].childrenContent.push(item)
-      } else if (
-        item.attrType === '是否等保备案' ||
-        item.attrType === '等保定级'
-      ) {
-        dataFrom.value.content[1].childrenContent.push(item)
+let dataFrom = ref({
+  title: '部署与安全',
+  englishTitle: 'DEPLOY&SAFE',
+  content: [
+    {
+      childrenTitle: '部署',
+      childrenContent: [],
+    },
+    {
+      childrenTitle: '安全',
+      childrenContent: [],
+    },
+  ],
+})
+//数据初始化
+const props = defineProps({
+  dataList: { type: Object, default: null },
+})
+if (props.dataList.infoList) {
+  props.dataList.infoList.map((item) => {
+    if (
+      item.attrType === '部署区域' ||
+      item.attrType === '是否统一登录' ||
+      item.attrType === '部署位置'
+    ) {
+      dataFrom.value.content[0].childrenContent.push(item)
+    } else if (
+      item.attrType === '是否等保备案' ||
+      item.attrType === '等保定级'
+    ) {
+      dataFrom.value.content[1].childrenContent.push(item)
+    } 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 = [
+      {
+        attrType: '是否等保备案',
+        attrValue: '------',
+      },
+      {
+        attrType: '等保定级',
+        attrValue: '------',
+      },
+    ]
+    data.map((itemContent) => {
+      dataFrom.value.content[1].childrenContent.push(itemContent)
     })
-    if (dataFrom.value.content[1].childrenContent.length <= 0) {
-      let data = [
-        {
-          attrType: '是否等保备案',
-          attrValue: '------',
-        },
-        {
-          attrType: '等保定级',
-          attrValue: '------',
-        },
-      ]
-      data.map((itemContent) => {
-        dataFrom.value.content[1].childrenContent.push(itemContent)
-      })
-    }
-
-    let obj = {
-      attrType: '访问地址',
-      attrValue: props.dataList.link || '------',
-    }
-    dataFrom.value.content[0].childrenContent.push(obj)
   }
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        dataFrom.value.content[0].childrenContent = []
-        dataFrom.value.content[1].childrenContent = []
-        props.dataList.infoList.map((item) => {
-          if (
-            item.attrType === '部署区域' ||
-            item.attrType === '是否统一登录' ||
-            item.attrType === '部署位置'
-          ) {
-            dataFrom.value.content[0].childrenContent.push(item)
-          } else if (
-            item.attrType === '是否等保备案' ||
-            item.attrType === '等保定级'
-          ) {
-            dataFrom.value.content[1].childrenContent.push(item)
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      dataFrom.value.content[0].childrenContent = []
+      dataFrom.value.content[1].childrenContent = []
+      props.dataList.infoList.map((item) => {
+        if (
+          item.attrType === '部署区域' ||
+          item.attrType === '是否统一登录' ||
+          item.attrType === '部署位置'
+        ) {
+          dataFrom.value.content[0].childrenContent.push(item)
+        } else if (
+          item.attrType === '是否等保备案' ||
+          item.attrType === '等保定级'
+        ) {
+          dataFrom.value.content[1].childrenContent.push(item)
+        } 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 = [
+          {
+            attrType: '是否等保备案',
+            attrValue: '------',
+          },
+          {
+            attrType: '等保定级',
+            attrValue: '------',
+          },
+        ]
+        data.map((itemContent) => {
+          dataFrom.value.content[1].childrenContent.push(itemContent)
         })
-        if (dataFrom.value.content[1].childrenContent.length <= 0) {
-          let data = [
-            {
-              attrType: '是否等保备案',
-              attrValue: '------',
-            },
-            {
-              attrType: '等保定级',
-              attrValue: '------',
-            },
-          ]
-          data.map((itemContent) => {
-            dataFrom.value.content[1].childrenContent.push(itemContent)
-          })
-        }
-        let obj = {
-          attrType: '访问地址',
-          attrValue: props.dataList.link || '------',
-        }
-        dataFrom.value.content[0].childrenContent.push(obj)
       }
+      // let obj = {
+      //   attrType: '访问地址',
+      //   attrValue: props.dataList.link || '------',
+      // }
+      // dataFrom.value.content[0].childrenContent.push(obj)
     }
-  )
+  }
+)
 </script>
 
 <style lang="less" scoped>
-  .application-deployment-and-security {
-    padding: 0.8rem 0;
+.application-deployment-and-security {
+  padding: 0.8rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .title {
+    margin-bottom: 0.3rem;
+  }
+
+  .content {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    .title {
-      margin-bottom: 0.3rem;
-    }
-    .content {
-      display: flex;
-      width: 13rem;
-      justify-content: space-between;
-      .content-card {
-        height: 1.5rem;
-        width: 6.2rem;
-        border-radius: 0.2rem;
-        background: linear-gradient(
-          to right,
+    width: 13rem;
+    justify-content: space-between;
+
+    .content-card {
+      height: 1.5rem;
+      width: 6.2rem;
+      border-radius: 0.2rem;
+      background: linear-gradient(to right,
           rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 252, 0.4)
-        );
-        padding: 0 0.3rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        .card-title {
-          font-size: 0.26rem;
-          line-height: 0.26rem;
-          color: #212956;
-          margin-bottom: 0.2rem;
-        }
-        .card-content {
-          div {
+          rgba(148, 163, 252, 0.4));
+      padding: 0 0.3rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .card-title {
+        font-size: 0.26rem;
+        line-height: 0.26rem;
+        color: #212956;
+        margin-bottom: 0.2rem;
+      }
+
+      .card-content {
+        div {
+          display: inline-block;
+          margin-right: 0.7rem;
+          color: rgba(33, 41, 86, 0.8);
+          font-size: 0.2rem;
+          line-height: 0.2rem;
+          max-width: 5.84rem;
+          overflow: hidden;
+          /*超出的隐藏*/
+          white-space: nowrap;
+          text-overflow: ellipsis;
+
+          /*超出的设置为省略号*/
+          span {
             display: inline-block;
-            margin-right: 0.7rem;
-            color: rgba(33, 41, 86, 0.8);
-            font-size: 0.2rem;
-            line-height: 0.2rem;
-            max-width: 5.84rem;
-            overflow: hidden; /*超出的隐藏*/
+            max-width: 4rem;
+            overflow: hidden;
+            /*超出的隐藏*/
             white-space: nowrap;
-            text-overflow: ellipsis; /*超出的设置为省略号*/
-            span {
-              display: inline-block;
-              max-width: 4rem;
-              overflow: hidden; /*超出的隐藏*/
-              white-space: nowrap;
-              text-overflow: ellipsis; /*超出的设置为省略号*/
-            }
+            text-overflow: ellipsis;
+            /*超出的设置为省略号*/
           }
         }
       }
     }
   }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue b/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
index 03d712d7..eec26ec0 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
@@ -7,42 +7,26 @@
         <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
       </div>
       <div class="tab">
-        <div
-          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
-          :key="itemSonTitle.name"
-          @click="tabSwitch(itemSonTitle.name)"
-          class="tab-son"
-          :class="
+        <div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name"
+          @click="tabSwitch(itemSonTitle.name)" class="tab-son" :class="
             tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
-          "
-        >
+          ">
           <a-tooltip>
             <template #title>{{ itemSonTitle.name }}</template>
-            <div
-              class="tab-top"
-              :class="
-                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
-              "
-            >
+            <div class="tab-top" :class="
+              tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+            ">
               {{ itemSonTitle.name }}
             </div>
           </a-tooltip>
-          <div
-            class="tab-bottom"
-            v-if="tabInitialize() == itemSonTitle.name"
-          ></div>
+          <div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></div>
         </div>
       </div>
       <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
         <div class="content" v-if="tabindex == itemSonTitle.name">
           <div class="content-left">
             <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
-            <a-image
-              :width="635"
-              :height="340"
-              :src="itemSonTitle.img"
-              v-if="itemSonTitle.img"
-            ></a-image>
+            <a-image :width="635" :height="340" :src="itemSonTitle.img" v-if="itemSonTitle.img"></a-image>
           </div>
           <div class="content-right">
             <div class="content-right-scene">
@@ -60,194 +44,215 @@
 </template>
 
 <script setup>
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-  import { ref, defineProps, watch } from 'vue'
-  const flag = ref(true)
-  let dataFrom = ref([])
-  // tab切换方法
-  let tabindex = ref('场景说明一')
-  //数据初始化
-  const props = defineProps({
-    dataList: { type: Object, default: null },
-  })
-  if (props.dataList.infoList) {
-    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '功能介绍'
-    )[0]
-    if (!obj) {
-      flag.value = false
-    } else {
-      obj.attrValue = JSON.parse(obj.attrValue)
-      dataFrom.value = obj
-      tabindex.value = dataFrom.value.attrValue[0].name
-    }
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+import { ref, defineProps, watch } from 'vue'
+const flag = ref(true)
+let dataFrom = ref([])
+// tab切换方法
+let tabindex = ref('场景说明一')
+//数据初始化
+const props = defineProps({
+  dataList: { type: Object, default: null },
+})
+if (props.dataList.infoList) {
+  let obj = props.dataList.infoList.filter(
+    (item) => item.attrType === '功能介绍'
+  )[0]
+  if (!obj) {
+    flag.value = false
+  } else {
+    obj.attrValue = JSON.parse(obj.attrValue)
+    dataFrom.value = obj
+    tabindex.value = dataFrom.value.attrValue[0].name
   }
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
-        if (!obj) {
-          flag.value = false
-        } else {
-          obj.attrValue = JSON.parse(obj.attrValue)
-          dataFrom.value = obj
-          tabindex.value = dataFrom.value.attrValue[0].name
-        }
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
+      if (!obj) {
+        flag.value = false
+      } else {
+        obj.attrValue = JSON.parse(obj.attrValue)
+        dataFrom.value = obj
+        tabindex.value = dataFrom.value.attrValue[0].name
       }
     }
-  )
-  //滚动条样式
-  function tabIndexClass(index, title, content) {
-    if (title == '功能介绍' && index == 0 && content.length > 6) {
-      return 'tab-son-class'
-    }
   }
-  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
-  function tabInitialize() {
-    return tabindex.value
-  }
-  //tab切换点击事件
-  function tabSwitch(name) {
-    tabindex.value = name
-    return tabindex.value
+)
+//滚动条样式
+function tabIndexClass(index, title, content) {
+  if (title == '功能介绍' && index == 0 && content.length > 6) {
+    return 'tab-son-class'
   }
+}
+//初始化tab切换（判断标题不同，点击事件的判断变量不同）
+function tabInitialize() {
+  return tabindex.value
+}
+//tab切换点击事件
+function tabSwitch(name) {
+  tabindex.value = name
+  return tabindex.value
+}
 </script>
 
 <style lang="less" scoped>
-  .function-intorduction {
-    width: 100%;
-    background: #f7f8fa;
+.function-intorduction {
+  width: 100%;
+  background: #f7f8fa;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-x: unset;
+
+  .application-scenarios-and-case-son {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
     display: flex;
     flex-direction: column;
     align-items: center;
-    overflow-x: unset;
-    .application-scenarios-and-case-son {
-      padding-top: 0.8rem;
-      padding-bottom: 0.8rem;
+    overflow: unset;
+
+    .tab {
+      max-width: 13rem;
+      overflow-x: auto;
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      overflow: unset;
-      .tab {
-        max-width: 13rem;
-        overflow-x: auto;
+      justify-content: center;
+      color: #808080;
+      border-bottom: 0.01rem #e4e6f5 solid;
+      margin-top: 0.45rem;
+      margin-bottom: 0.4rem;
+      cursor: pointer;
+      padding-left: 0.4rem;
+      padding-right: 0.4rem;
+
+      .tab-son {
         display: flex;
-        justify-content: center;
-        color: #808080;
-        border-bottom: 0.01rem #e4e6f5 solid;
-        margin-top: 0.45rem;
-        margin-bottom: 0.4rem;
-        cursor: pointer;
-        padding-left: 0.4rem;
-        padding-right: 0.4rem;
-        .tab-son {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin-right: 1rem;
-          .tab-top {
-            min-width: 1.2rem;
-            font-size: 0.24rem;
-            line-height: 0.24rem;
-            margin-bottom: 0.2rem;
-            max-width: 2rem;
-            height: 0.24rem;
-            display: -webkit-box;
-            overflow: hidden;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-          }
-          .tab-top-down {
-            min-width: 1.2rem;
-            color: #526aff;
-            margin-bottom: 0.16rem;
-          }
-          .tab-bottom {
-            height: 0.04rem;
-            width: 0.6rem;
-            background: #526aff;
-          }
-        }
-        .tab-son-class {
-          margin-left: 4.3rem;
-          margin-bottom: 0.02rem;
-        }
-        .tab-son-class-two {
-          margin-left: 2.3rem;
-          margin-bottom: 0.02rem;
-        }
-        .tab-son:last-child {
-          margin-right: 0rem;
-        }
-      }
-      .tab::-webkit-scrollbar-thumb {
-        background: rgba(82, 106, 255, 0.4);
-      }
-      .content {
-        display: flex;
-        position: relative;
-        width: 100%;
-        min-width: 13rem;
-        height: 3.4rem;
-        .content-left {
-          position: absolute;
-          left: 0;
-          min-width: 6.2rem;
-          :deep(.ant-image-img) {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-          }
-          // text-align: center;
-          .content-top {
-            text-align: left;
-          }
-        }
-        .content-right {
-          width: 6.2rem;
-          height: 3.4rem;
-          position: absolute;
-          right: 0;
-          display: flex;
-          justify-content: center;
-        }
-        .content-right-scene,
-        .content-right-case {
-          width: 6.2rem;
-          height: 3.4rem;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
-        .content-left-scene,
-        .content-left-case {
-          height: 3.4rem;
-          width: 6.35rem;
-          border-radius: 0.1rem;
-          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
-          background-position: center;
-          background-size: 6.35rem 3.4rem;
-        }
-        .content-top {
-          font-size: 0.22rem;
-          line-height: 0.22rem;
-          color: #000000;
-          margin-bottom: 0.35rem;
-        }
-        .content-bottom {
-          font-size: 0.18rem;
-          color: #999999;
-          line-height: 0.26rem;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 1rem;
+
+        .tab-top {
+          min-width: 1.2rem;
+          font-size: 0.24rem;
+          line-height: 0.24rem;
+          margin-bottom: 0.2rem;
+          max-width: 2rem;
+          height: 0.24rem;
           display: -webkit-box;
           overflow: hidden;
-          -webkit-line-clamp: 6;
+          -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
+          text-align: center;
+        }
+
+        .tab-top-down {
+          min-width: 1.2rem;
+          color: #526aff;
+          margin-bottom: 0.16rem;
+        }
+
+        .tab-bottom {
+          height: 0.04rem;
+          width: 0.6rem;
+          background: #526aff;
         }
       }
+
+      .tab-son-class {
+        margin-left: 4.3rem;
+        margin-bottom: 0.02rem;
+      }
+
+      .tab-son-class-two {
+        margin-left: 2.3rem;
+        margin-bottom: 0.02rem;
+      }
+
+      .tab-son:last-child {
+        margin-right: 0rem;
+      }
     }
-    .application-scenarios-and-case-son:first-child {
-      padding-top: 1rem;
+
+    .tab::-webkit-scrollbar-thumb {
+      background: rgba(82, 106, 255, 0.4);
+    }
+
+    .content {
+      display: flex;
+      position: relative;
+      width: 100%;
+      min-width: 13rem;
+      height: 3.4rem;
+
+      .content-left {
+        position: absolute;
+        left: 0;
+        min-width: 6.2rem;
+
+        :deep(.ant-image-img) {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+
+        // text-align: center;
+        .content-top {
+          text-align: left;
+        }
+      }
+
+      .content-right {
+        width: 6.2rem;
+        height: 3.4rem;
+        position: absolute;
+        right: 0;
+        display: flex;
+        justify-content: center;
+      }
+
+      .content-right-scene,
+      .content-right-case {
+        width: 6.2rem;
+        height: 3.4rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      .content-left-scene,
+      .content-left-case {
+        height: 3.4rem;
+        width: 6.35rem;
+        border-radius: 0.1rem;
+        background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+        background-position: center;
+        background-size: 6.35rem 3.4rem;
+      }
+
+      .content-top {
+        font-size: 0.22rem;
+        line-height: 0.22rem;
+        color: #000000;
+        margin-bottom: 0.35rem;
+      }
+
+      .content-bottom {
+        font-size: 0.18rem;
+        color: #999999;
+        line-height: 0.26rem;
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-line-clamp: 6;
+        -webkit-box-orient: vertical;
+      }
     }
   }
+
+  .application-scenarios-and-case-son:first-child {
+    padding-top: 1rem;
+  }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
index bb92e834..4ddf5f70 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@@ -8,12 +8,7 @@
 <template>
   <div class="application-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>
@@ -21,170 +16,179 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
-  import mybus from '@/myplugins/mybus'
-  const navList = ref([
-    {
-      name: '应用展示',
-      key: 'application-presentation',
-    },
-    {
-      name: '功能介绍',
-      key: 'function-introduction',
-    },
-    // {
-    //   name: '关联组件',
-    //   key: 'application-associated-components',
-    // },
-    {
-      name: '关联组件',
-      key: 'application-associated-ability',
-    },
-    {
-      name: '使用能力',
-      key: 'ability-to-use',
-    },
-    {
-      name: '部署与安全',
-      key: 'deployment-and-security',
-    },
-    {
-      name: '归属部门与服务商',
-      key: 'department-and-service-provider',
-    },
-    {
-      name: '常见问题',
-      key: 'common-problem',
-    },
-  ])
-  const props = defineProps({
-    selectNow: { type: String, default: '' },
-    dataList: { type: Object, default: null },
-    associatedComponents: { type: Array, default: null },
-  })
-  const select = ref('algorithm-display')
-  const list = ref([])
-  const selectNav = (key) => {
-    select.value = key
-    mybus.emit('flyToView', select.value)
+import { ref, defineProps, watch } from 'vue'
+import mybus from '@/myplugins/mybus'
+import { useRouter } from 'vue-router'
+import { queryPartAppByKeyId } from '@/api/home'
+// 获取当前路由地址
+const router = useRouter()
+const keyId = router.currentRoute.value.query.id
+const navList = ref([
+  {
+    name: '应用展示',
+    key: 'application-presentation',
+  },
+  {
+    name: '功能介绍',
+    key: 'function-introduction',
+  },
+  {
+    name: '使用能力',
+    key: 'ability-to-use',
+  },
+  {
+    name: '部署与安全',
+    key: 'deployment-and-security',
+  },
+  {
+    name: '归属部门与服务商',
+    key: 'department-and-service-provider',
+  },
+  {
+    name: '常见问题',
+    key: 'common-problem',
+  },
+])
+const props = defineProps({
+  selectNow: { type: String, default: '' },
+  dataList: { type: Object, default: null },
+  associatedComponents: { type: Array, default: null },
+})
+const select = ref('application-associated-ability')
+const list = ref([])
+// 根据能力id查询是否存在关联应用
+if (keyId) {
+  let params = {
+    keyId: keyId,
+    type: '组件服务',
   }
-  if (props.dataList.infoList) {
-    list.value = []
-    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.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 ||
-            props.associatedComponents[1].dataList.length != 0 ||
-            props.associatedComponents[2].dataList.length != 0
-          ) {
-            item.show = true
-          }
-        } else {
+  queryPartAppByKeyId(params).then((res) => {
+    console.log('ressssssss', res)
+    if (res.data.data.length != 0) {
+      // 存在关联应用时在导航栏加入关联应用
+      navList.value.unshift({
+        name: '关联组件',
+        key: 'application-associated-ability',
+        show: true,
+      })
+      list.value.unshift('关联组件')
+    }
+  })
+}
+const selectNav = (key) => {
+  select.value = key
+  mybus.emit('flyToView', select.value)
+}
+if (props.dataList.infoList) {
+  list.value = []
+  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('部署与安全')
+  list.value.push('归属部门与服务商')
+  navList.value.forEach((item) => {
+    console.log(item)
+    if (list.value.indexOf(item.name) > -1) {
+      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)
+}
+watch(
+  () => props.selectNow,
+  (newValue) => {
+    select.value = newValue
+  }
+)
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      list.value = []
+      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('部署与安全')
+      list.value.push('归属部门与服务商')
+      navList.value.forEach((item) => {
+        console.log(item)
+        if (list.value.indexOf(item.name) > -1) {
           item.show = true
         }
-      }
-    })
-    select.value = navList.value.filter(
-      (item) => 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 = []
-        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.push('关联组件')
-        list.value.push('部署与安全')
-        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 ||
-                props.associatedComponents[1].dataList.length != 0 ||
-                props.associatedComponents[2].dataList.length != 0
-              ) {
-                item.show = true
-              }
-            } else {
-              item.show = true
-            }
-          }
-        })
-        if (list.value.length > 0) {
+      })
+      if (list.value.length > 0) {
+        if (navList.value.filter((item) => item.name === list.value[0])[0]) {
           select.value = navList.value.filter(
-            (item) => item.name === list.value[0]
+            (item) =>
+              (item.name === '关联组件') | (item.name === list.value[0])
           )[0].key
         }
-        console.log('11111111111111111111111111', list.value, navList.value)
-      }
-    }
-  )
-</script>
-<style lang="less" scoped>
-  .application-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;
-      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;
       }
+      console.log('11111111111111111111111111', list.value, navList.value)
     }
   }
+)
+</script>
+<style lang="less" scoped>
+.application-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;
+    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;
+    }
+  }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue b/front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue
index 2a6f75bc..c878f35e 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue
@@ -2,17 +2,10 @@
 <template>
   <div class="application-deployment-and-security">
     <div class="title">
-      <DetalsTitle
-        :title="dataFrom.title"
-        :type="dataFrom.englishTitle"
-      ></DetalsTitle>
+      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
     </div>
     <div class="content">
-      <div
-        v-for="(item, index) in dataFrom.content"
-        :key="index"
-        class="content-card"
-      >
+      <div v-for="(item, index) in dataFrom.content" :key="index" class="content-card">
         <div class="card-title">{{ item.childrenTitle }}</div>
         <div class="card-content">
           <div v-for="carditem in item.childrenContent" :key="carditem">
@@ -31,191 +24,206 @@
 </template>
 
 <script setup>
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-  import { ref, defineProps, watch } from 'vue'
-  let dataFrom = ref({
-    title: '归属部门与服务商',
-    englishTitle: 'DEPARTMENT&ERVICE',
-    content: [
-      {
-        childrenTitle: '归属部门信息',
-        childrenContent: [],
-      },
-      {
-        childrenTitle: '服务商信息',
-        childrenContent: [],
-      },
-    ],
-  })
-  console.log(dataFrom.value)
-  //数据初始化
-  const props = defineProps({
-    dataList: { type: Object, default: null },
-  })
-  if (props.dataList.infoList) {
-    let obj = {
-      attrType: '部门名称',
-      attrValue: props.dataList.deptName || '------',
-    }
-    dataFrom.value.content[0].childrenContent[0] = obj
-    let deptContacts = {
-      attrType: '部门联系人',
-      attrValue: props.dataList.deptContacts || '------',
-    }
-    dataFrom.value.content[0].childrenContent[1] = deptContacts
-    let deptPhone = {
-      attrType: '部门联系人',
-      attrValue: props.dataList.deptPhone || '------',
-    }
-    dataFrom.value.content[0].childrenContent[2] = deptPhone
-    props.dataList.infoList.map((item) => {
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+import { ref, defineProps, watch } from 'vue'
+let dataFrom = ref({
+  title: '归属部门与服务商',
+  englishTitle: 'DEPARTMENT&ERVICE',
+  content: [
+    {
+      childrenTitle: '归属部门信息',
+      childrenContent: [],
+    },
+    {
+      childrenTitle: '服务商信息',
+      childrenContent: [],
+    },
+  ],
+})
+console.log(dataFrom.value)
+//数据初始化
+const props = defineProps({
+  dataList: { type: Object, default: null },
+})
+if (props.dataList.infoList) {
+  let obj = {
+    attrType: '部门名称',
+    attrValue: props.dataList.deptName || '------',
+  }
+  dataFrom.value.content[0].childrenContent[0] = obj
+  let deptContacts = {
+    attrType: '部门联系人',
+    attrValue: '',
+  }
+  dataFrom.value.content[0].childrenContent[1] = deptContacts
+  let deptPhone = {
+    attrType: '部门联系电话',
+    attrValue: '',
+  }
+  dataFrom.value.content[0].childrenContent[2] = deptPhone
+  props.dataList.infoList.map((item) => {
+    if (
+      item.attrType === '服务商' ||
+      item.attrType === '服务商联系人' ||
+      item.attrType === '服务商联系电话' ||
+      item.attrType.indexOf('服务商名') != -1
+    ) {
       if (
         item.attrType === '服务商' ||
-        item.attrType === '服务商联系人' ||
-        item.attrType === '服务商联系电话' ||
         item.attrType.indexOf('服务商名') != -1
       ) {
+        dataFrom.value.content[1].childrenContent[0] = item
+        if (dataFrom.value.content[1].childrenContent[0].attrValue == '') {
+          dataFrom.value.content[1].childrenContent[0].attrValue = '------'
+        }
+      } else if (item.attrType === '服务商联系人') {
+        dataFrom.value.content[1].childrenContent[1] = item
+        if (dataFrom.value.content[1].childrenContent[1].attrValue == '') {
+          dataFrom.value.content[1].childrenContent[1].attrValue = '------'
+        }
+      } else if (item.attrType === '服务商联系电话') {
+        dataFrom.value.content[1].childrenContent[2] = item
+        if (dataFrom.value.content[1].childrenContent[2].attrValue == '') {
+          dataFrom.value.content[1].childrenContent[2].attrValue = '------'
+        }
+      }
+    } else if (item.attrType === '部门联系人') {
+      deptContacts.attrValue = item.attrValue || '------'
+    } else if (item.attrType === '部门联系人电话') {
+      deptPhone.attrValue = item.attrValue || '------'
+    }
+  })
+
+  console.log('obj', dataFrom.value)
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      // dataFrom.value.content[0].childrenContent = []
+      // dataFrom.value.content[1].childrenContent = []
+      let obj = {
+        attrType: '部门名称',
+        attrValue: props.dataList.deptName || '------',
+      }
+      dataFrom.value.content[0].childrenContent[0] = obj
+      let deptContacts = {
+        attrType: '部门联系人',
+        attrValue: props.dataList.deptContacts || '------',
+      }
+      dataFrom.value.content[0].childrenContent[1] = deptContacts
+      let deptPhone = {
+        attrType: '部门联系电话',
+        attrValue: props.dataList.deptPhone || '------',
+      }
+      dataFrom.value.content[0].childrenContent[2] = deptPhone
+      props.dataList.infoList.map((item) => {
         if (
           item.attrType === '服务商' ||
+          item.attrType === '服务商联系人' ||
+          item.attrType === '服务商联系电话' ||
           item.attrType.indexOf('服务商名') != -1
         ) {
-          dataFrom.value.content[1].childrenContent[0] = item
-          if (dataFrom.value.content[1].childrenContent[0].attrValue == '') {
-            dataFrom.value.content[1].childrenContent[0].attrValue = '------'
-          }
-        } else if (item.attrType === '服务商联系人') {
-          dataFrom.value.content[1].childrenContent[1] = item
-          if (dataFrom.value.content[1].childrenContent[1].attrValue == '') {
-            dataFrom.value.content[1].childrenContent[1].attrValue = '------'
-          }
-        } else if (item.attrType === '服务商联系电话') {
-          dataFrom.value.content[1].childrenContent[2] = item
-          if (dataFrom.value.content[1].childrenContent[2].attrValue == '') {
-            dataFrom.value.content[1].childrenContent[2].attrValue = '------'
-          }
-        }
-      }
-    })
-    console.log('obj', dataFrom.value)
-  }
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        // dataFrom.value.content[0].childrenContent = []
-        // dataFrom.value.content[1].childrenContent = []
-        let obj = {
-          attrType: '部门名称',
-          attrValue: props.dataList.deptName || '------',
-        }
-        dataFrom.value.content[0].childrenContent[0] = obj
-        let deptContacts = {
-          attrType: '部门联系人',
-          attrValue: props.dataList.deptContacts || '------',
-        }
-        dataFrom.value.content[0].childrenContent[1] = deptContacts
-        let deptPhone = {
-          attrType: '部门联系人',
-          attrValue: props.dataList.deptPhone || '------',
-        }
-        dataFrom.value.content[0].childrenContent[2] = deptPhone
-        props.dataList.infoList.map((item) => {
           if (
             item.attrType === '服务商' ||
-            item.attrType === '服务商联系人' ||
-            item.attrType === '服务商联系电话' ||
             item.attrType.indexOf('服务商名') != -1
           ) {
+            dataFrom.value.content[1].childrenContent.push(item)
             if (
-              item.attrType === '服务商' ||
-              item.attrType.indexOf('服务商名') != -1
+              dataFrom.value.content[1].childrenContent[0].attrValue == ''
             ) {
-              dataFrom.value.content[1].childrenContent.push(item)
-              if (
-                dataFrom.value.content[1].childrenContent[0].attrValue == ''
-              ) {
-                dataFrom.value.content[1].childrenContent[0].attrValue =
-                  '------'
-              }
-            } else if (item.attrType === '服务商联系人') {
-              dataFrom.value.content[1].childrenContent[1] = item
-              if (
-                dataFrom.value.content[1].childrenContent[1].attrValue == ''
-              ) {
-                dataFrom.value.content[1].childrenContent[1].attrValue =
-                  '------'
-              }
-            } else if (item.attrType === '服务商联系电话') {
-              dataFrom.value.content[1].childrenContent[2] = item
-              if (
-                dataFrom.value.content[1].childrenContent[2].attrValue == ''
-              ) {
-                dataFrom.value.content[1].childrenContent[2].attrValue =
-                  '------'
-              }
+              dataFrom.value.content[1].childrenContent[0].attrValue =
+                '------'
+            }
+          } else if (item.attrType === '服务商联系人') {
+            dataFrom.value.content[1].childrenContent[1] = item
+            if (
+              dataFrom.value.content[1].childrenContent[1].attrValue == ''
+            ) {
+              dataFrom.value.content[1].childrenContent[1].attrValue =
+                '------'
+            }
+          } else if (item.attrType === '服务商联系电话') {
+            dataFrom.value.content[1].childrenContent[2] = item
+            if (
+              dataFrom.value.content[1].childrenContent[2].attrValue == ''
+            ) {
+              dataFrom.value.content[1].childrenContent[2].attrValue =
+                '------'
             }
           }
-        })
-        console.log('obj', dataFrom.value)
-      }
+        } else if (item.attrType === '部门联系人') {
+          deptContacts.attrValue = item.attrValue || '------'
+        } else if (item.attrType === '部门联系人电话') {
+          deptPhone.attrValue = item.attrValue || '------'
+        }
+      })
+      console.log('obj', dataFrom.value)
     }
-  )
+  }
+)
 </script>
 
 <style lang="less" scoped>
-  .application-deployment-and-security {
-    padding: 0.8rem 0;
+.application-deployment-and-security {
+  padding: 0.8rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .title {
+    margin-bottom: 0.3rem;
+  }
+
+  .content {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    .title {
-      margin-bottom: 0.3rem;
-    }
-    .content {
-      display: flex;
-      width: 13rem;
-      justify-content: space-between;
-      .content-card {
-        height: 1.5rem;
-        width: 6.2rem;
-        border-radius: 0.2rem;
-        background: linear-gradient(
-          to right,
+    width: 13rem;
+    justify-content: space-between;
+
+    .content-card {
+      height: 1.5rem;
+      width: 6.2rem;
+      border-radius: 0.2rem;
+      background: linear-gradient(to right,
           rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 252, 0.4)
-        );
-        padding: 0 0.3rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        .card-title {
-          font-size: 0.26rem;
-          color: #212956;
-          margin-bottom: 0.2rem;
-          line-height: 0.26rem;
-        }
-        .card-content {
-          white-space: nowrap;
+          rgba(148, 163, 252, 0.4));
+      padding: 0 0.3rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .card-title {
+        font-size: 0.26rem;
+        color: #212956;
+        margin-bottom: 0.2rem;
+        line-height: 0.26rem;
+      }
+
+      .card-content {
+        white-space: nowrap;
+
+        div {
+          display: inline-block;
+          margin-right: 0.2rem;
+          color: rgba(33, 41, 86, 0.8);
+          font-size: 0.2rem;
+          max-width: 2.8rem;
+
           div {
-            display: inline-block;
-            margin-right: 0.2rem;
-            color: rgba(33, 41, 86, 0.8);
-            font-size: 0.2rem;
             max-width: 2.8rem;
-            div {
-              max-width: 2.8rem;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 1;
-            }
-          }
-          div:first-child {
-            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
           }
         }
+
+        div:first-child {
+          display: block;
+        }
       }
     }
   }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue b/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
index 9b26d182..52aaac54 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
@@ -8,15 +8,10 @@
 <template>
   <div class="application-presentation" v-if="flag">
     <detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title>
-    <div class="main">
+    <div class="main" :style="`${img}background-position:center;background-size:cover;`">
       <div class="play" @click="showModal"></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%">
@@ -27,90 +22,106 @@
   </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)
-  console.log('111111111111111111111,', props.dataList)
-  if (props.dataList.infoList) {
-    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '应用展示视频'
+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]
-    console.log('视频==============>', obj)
-    if (!obj) {
-      flag.value = false
-    } else {
-      options.src = obj.attrValue
+    options.src = obj.attrValue
+    if (imgindex) {
+      img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
     }
   }
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        let obj = val.infoList.filter(
-          (item) => item.attrType === '应用展示视频'
+}
+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]
-        console.log('视频==============>', obj)
-        if (!obj) {
-          flag.value = false
-        } else {
-          options.src = obj.attrValue
+        options.src = obj.attrValue
+        if (imgindex) {
+          img.value =
+            'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
         }
       }
     }
-  )
+  }
+)
 </script>
 <style lang="less" scoped>
-  .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;
+.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;
       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;
-        background-size: 100%;
-        cursor: pointer;
-      }
+      cursor: pointer;
     }
   }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Application/style.css b/front/src/views/detailsAll/components/Application/style.css
new file mode 100644
index 00000000..de6bea17
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/style.css
@@ -0,0 +1,31 @@
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #fff;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
diff --git a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
index 0173725e..0913adce 100644
--- a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
@@ -1,30 +1,79 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
-    <detals-title title="关联应用" type="RELEVANCE"></detals-title>
-    <div class="application-associated-ability-main">
+    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
       <div
         class="associated-ability-card"
         v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
         :key="dataListitem.id"
         @click="switchFunction(dataListitem.id)"
       >
-        <div class="associated-ability-card-title">
-          {{ dataListitem.name }}
-        </div>
-        <div class="associated-ability-card-content">
-          <div class="associated-ability-card-content-font">
-            {{ dataListitem.description }}
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
+          <div class="associated-ability-card-title">
+            {{ dataListitem.name }}
           </div>
+        </a-tooltip>
+        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description }}</template>
+            <div class="associated-ability-card-content-font">
+              {{ dataListitem.description }}
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>
 
 <script setup>
   import { ref, defineProps, watch } from 'vue'
   import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
   const router = useRouter()
+  const modules = ref([Pagination])
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
   const props = defineProps({
     associatedComponents: { type: Array, default: null },
@@ -34,17 +83,20 @@
   const oldid = router.currentRoute.value.query.id
   //点击查看详情
   const switchFunction = (id) => {
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
+    // router.push({
+    //   path: '/details',
+    //   query: {
+    //     id: id,
+    //   },
+    // })
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
+    // alert(id)
   }
-  if (props.associatedComponents[0].dataList.length != 0) {
+  console.log('这个是空值', props.associatedComponents[0])
+  if (props.associatedComponents[0].dataList.length > 0) {
+    console.log('这个是空值', props.associatedComponents)
     flag.value = true
     dataFrom.value = props.associatedComponents
-    debugger
     console.log('dataFrom.value', dataFrom.value)
   } else {
     flag.value = false
@@ -75,7 +127,7 @@
 <style lang="less" scoped>
   .application-associated-ability {
     padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -83,20 +135,31 @@
       margin-top: 0.4rem;
       width: 13.3rem;
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
       .associated-ability-card {
         width: 3.2rem;
+        height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #e4e6f5;
         border-radius: 0.1rem;
         padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
         cursor: pointer;
         .associated-ability-card-title {
+          width: 2.2rem;
           padding-top: 0.3rem;
           font-size: 0.22rem;
           text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -107,6 +170,11 @@
             color: #999;
             margin-right: 0.15rem;
             margin-top: 0.15rem;
+            text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
index 69eba071..b35ba162 100644
--- a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
@@ -8,12 +8,7 @@
 <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>
@@ -21,189 +16,217 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
-  import mybus from '@/myplugins/mybus'
-  const navList = ref([
-    {
-      name: '组件展示',
-      key: 'business-presentation',
-    },
-    {
-      name: '关联应用',
-      key: 'business-associated-ability',
-    },
-    {
-      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 },
+  {
+    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)
+    }
   })
-  const select = ref('business-presentation')
-  const list = ref([])
-  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.push('关联应用')
-    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 {
+}
+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
       }
-    })
-    select.value = navList.value.filter(
-      (item) => 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.push('关联应用')
-        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 (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 (list.value.length > 0) {
+        if (navList.value.filter((item) => item.name === list.value[0])[0]) {
           select.value = navList.value.filter(
-            (item) => item.name === list.value[0]
+            (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;
-      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;
       }
+      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;
+    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;
+    }
+  }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
index 8f5f245c..6a919c09 100644
--- a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:56:28
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-01 14:20:52
+ * @LastEditTime: 2022-07-05 11:42:27
  * @Description: 算法详情页头部
 -->
 <template>
@@ -29,8 +29,8 @@
       </div>
       <div class="main">
         <a-tooltip placement="top">
-          <template #title>应用领域：{{ applicationArea }}</template>
-          <div>应用领域：{{ applicationArea }}</div>
+          <template #title>应用领域：{{ businessArea }}</template>
+          <div>应用领域：{{ businessArea }}</div>
         </a-tooltip>
         <a-tooltip placement="top">
           <template #title>{{ props.dataList.description }}</template>
@@ -41,11 +41,15 @@
       </div>
       <div class="bottom" v-if="props.dataList.id">
         <a-button type="primary" @click="toView()">
-          <template #icon><form-outlined /></template>
+          <template #icon>
+            <form-outlined />
+          </template>
           申请使用
         </a-button>
         <a-button type="primary" @click="addShoppingCart()">
-          <template #icon><shopping-cart-outlined /></template>
+          <template #icon>
+            <shopping-cart-outlined />
+          </template>
           加入申购车
         </a-button>
         <a-button type="primary" @click="goTOCollection()">收藏</a-button>
@@ -55,199 +59,215 @@
   </div>
 </template>
 <script setup>
-  import { ShoppingCartOutlined } from '@ant-design/icons-vue'
-  import { defineProps, ref, watch } from 'vue'
-  import { scInsert } from '@/api/personalCenter'
-  import { sgcInsert } from '@/api/home'
-  import { useRouter } from 'vue-router'
-  import mybus from '@/myplugins/mybus'
-  import { message } from 'ant-design-vue'
-  const props = defineProps({
-    dataList: { type: Object, default: null },
+import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+import { defineProps, ref, watch } from 'vue'
+import { scInsert } from '@/api/personalCenter'
+import { sgcInsert } from '@/api/home'
+import { useRouter } from 'vue-router'
+import mybus from '@/myplugins/mybus'
+import { message } from 'ant-design-vue'
+const props = defineProps({
+  dataList: { type: Object, default: null },
+})
+const router = useRouter()
+const businessArea = ref('')
+// // 加入申购车
+const addShoppingCart = () => {
+  console.log('加入申购车==================>', props.dataList)
+  sgcInsert({
+    delFlag: '0',
+    resourceId: props.dataList.id,
+    // userId: userId.value,
+  }).then((res) => {
+    console.log(res)
+    message.success('添加申购车成功！')
+    mybus.emit('getSgcNum')
   })
-  const router = useRouter()
-  const businessArea = ref('')
-  // // 加入申购车
-  const addShoppingCart = () => {
-    console.log('加入申购车==================>', props.dataList)
-    sgcInsert({
-      delFlag: '0',
-      resourceId: props.dataList.id,
-      // userId: userId.value,
-    }).then((res) => {
-      console.log(res)
-      message.success('添加申购车成功！')
-      mybus.emit('getSgcNum')
-    })
+}
+// // 立即申请
+function toView() {
+  // window.open(newpage.href, '_blank')
+  console.log('一键申请===================>', props.dataList)
+  localStorage.setItem(
+    'applyList',
+    JSON.stringify([
+      {
+        arr: [
+          {
+            delFlag: props.dataList.delFlag,
+            description: props.dataList.description,
+            resourceId: props.dataList.id,
+            resourceName: props.dataList.name,
+            time: props.dataList.createDate,
+            type: props.dataList.type,
+            componentType: '业务组件',
+          },
+        ],
+        deptId: props.dataList.deptId,
+        deptName: props.dataList.deptName,
+      },
+    ])
+  )
+  router.push({
+    path: '/apply',
+  })
+}
+// 收藏
+const goTOCollection = () => {
+  console.log('收藏===================》', props.dataList)
+  scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+    console.log(res)
+    message.success('收藏成功')
+  })
+}
+const componentType = ref('')
+if (props.dataList.infoList) {
+  businessArea.value = props.dataList.infoList.filter(
+    (val) => val.attrType === '应用领域'
+  )[0].attrValue
+  let obj = props.dataList.infoList.filter(
+    (val) => val.attrType === '组件类型'
+  )[0]
+  if (obj) {
+    componentType.value = obj.attrValue
   }
-  // // 立即申请
-  function toView() {
-    // window.open(newpage.href, '_blank')
-    console.log('一键申请===================>', props.dataList)
-    localStorage.setItem(
-      'applyList',
-      JSON.stringify([
-        {
-          arr: [
-            {
-              delFlag: props.dataList.delFlag,
-              description: props.dataList.description,
-              resourceId: props.dataList.id,
-              resourceName: props.dataList.name,
-              time: props.dataList.createDate,
-              type: props.dataList.type,
-            },
-          ],
-          deptId: props.dataList.deptId,
-          deptName: props.dataList.deptName,
-        },
-      ])
-    )
-    router.push({
-      path: '/apply',
-    })
-  }
-  // 收藏
-  const goTOCollection = () => {
-    console.log('收藏===================》', props.dataList)
-    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
-      console.log(res)
-      message.success('收藏成功')
-    })
-  }
-  const componentType = ref('')
-  if (props.dataList.infoList) {
-    businessArea.value = props.dataList.infoList.filter(
-      (val) => val.attrType === '应用领域'
-    )[0].attrValue
-    let obj = props.dataList.infoList.filter(
-      (val) => val.attrType === '组件类型'
-    )[0]
-    if (obj) {
-      componentType.value = obj.attrValue
-    }
-  }
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        businessArea.value = props.dataList.infoList.filter(
-          (val) => val.attrType === '应用领域'
-        )[0].attrValue
-        let obj = props.dataList.infoList.filter(
-          (val) => val.attrType === '组件类型'
-        )[0]
-        if (obj) {
-          componentType.value = obj.attrValue
-        }
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      businessArea.value = props.dataList.infoList.filter(
+        (val) => val.attrType === '应用领域'
+      )[0].attrValue
+      let obj = props.dataList.infoList.filter(
+        (val) => val.attrType === '组件类型'
+      )[0]
+      if (obj) {
+        componentType.value = obj.attrValue
       }
     }
-  )
+  }
+)
 </script>
 <style lang="less" scoped>
-  .algorithm-top-details {
-    height: 6rem;
-    padding: 1.8rem 0 0;
-    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
-    background-size: 100%;
-    display: flex;
-    justify-content: center;
-    .left {
-      max-width: 7.2rem;
-      color: #fff;
-      margin-right: 0.8rem;
+.algorithm-top-details {
+  height: 6rem;
+  padding: 1.8rem 0 0;
+  background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
+  background-size: 100%;
+  display: flex;
+  justify-content: center;
 
-      .top {
-        display: flex;
-        align-items: center;
-        span {
-          font-size: 0.14rem;
-        }
-        .name {
-          // max-width: 3.3rem;
-          // overflow: hidden;
-          // text-overflow: ellipsis;
-          // white-space: nowrap;
-          font-size: 0.4rem;
-          margin-right: 0.2rem;
-          max-width: 7rem;
-          text-overflow: -o-ellipsis-lastline;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-        }
-        .label-content {
-          position: relative;
-        }
-        .lable-father {
-          position: absolute;
-          min-width: 3.5rem;
-          right: -3.5rem;
-          top: 0;
-        }
-        .label {
-          padding: 0.01rem 0.1rem;
-          margin-right: 0.1rem;
-          border-radius: 0.13rem;
-          background: rgba(255, 255, 255, 0.4);
-        }
+  .left {
+    max-width: 7.2rem;
+    color: #fff;
+    margin-right: 0.8rem;
+
+    .top {
+      display: flex;
+      align-items: center;
+
+      span {
+        font-size: 0.14rem;
       }
-      .main {
-        margin-top: 0.2rem;
-        font-size: 0.18rem;
-        line-height: 0.34rem;
-        & > div:nth-of-type(1) {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        & > div:nth-of-type(2) {
-          max-height: 1rem;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 3;
-          -webkit-box-orient: vertical;
-        }
+
+      .name {
+        // max-width: 3.3rem;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+        // white-space: nowrap;
+        font-size: 0.4rem;
+        margin-right: 0.2rem;
+        max-width: 7rem;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
       }
-      .bottom {
-        margin-top: 0.4rem;
-        display: flex;
-        .ant-btn {
-          height: 0.5rem;
-          margin-right: 0.2rem;
-          background: #ffffff;
-          border-radius: 0.06rem;
-          font-size: 0.2rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .ant-btn-primary {
-          color: #1890ff;
-        }
-        .ant-btn:nth-of-type(1) {
-          width: 1.8rem;
-        }
-        .ant-btn:nth-of-type(2) {
-          width: 2.2rem;
-        }
-        .ant-btn:nth-of-type(3) {
-          width: 1.45rem;
-          background: #fff;
-          color: #526aff;
-        }
+
+      .label-content {
+        position: relative;
+      }
+
+      .lable-father {
+        position: absolute;
+        min-width: 3.5rem;
+        right: -3.5rem;
+        top: 0;
+      }
+
+      .label {
+        padding: 0.01rem 0.1rem;
+        margin-right: 0.1rem;
+        border-radius: 0.13rem;
+        background: rgba(255, 255, 255, 0.4);
       }
     }
-    .right {
-      width: 5.8rem;
-      height: 4rem;
-      background: url('~@/assets/detailsAll/business/business_right_bg.png')
-        no-repeat;
-      background-size: 100%;
-      margin-top: -0.4rem;
+
+    .main {
+      margin-top: 0.2rem;
+      font-size: 0.18rem;
+      line-height: 0.34rem;
+
+      &>div:nth-of-type(1) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &>div:nth-of-type(2) {
+        max-height: 1rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .bottom {
+      margin-top: 0.4rem;
+      display: flex;
+
+      .ant-btn {
+        height: 0.5rem;
+        margin-right: 0.2rem;
+        background: #ffffff;
+        border-radius: 0.06rem;
+        font-size: 0.2rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .ant-btn-primary {
+        color: #1890ff;
+      }
+
+      .ant-btn:nth-of-type(1) {
+        width: 1.8rem;
+      }
+
+      .ant-btn:nth-of-type(2) {
+        width: 2.2rem;
+      }
+
+      .ant-btn:nth-of-type(3) {
+        width: 1.45rem;
+        background: #fff;
+        color: #526aff;
+      }
     }
   }
+
+  .right {
+    width: 5.8rem;
+    height: 4rem;
+    background: url('~@/assets/detailsAll/business/business_right_bg.png') no-repeat;
+    background-size: 100%;
+    margin-top: -0.4rem;
+  }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
index 6ddc28fe..053d6e75 100644
--- a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
@@ -2,10 +2,7 @@
   <!-- 使用方式 -->
   <div class="usage-mode" v-if="flag">
     <div class="tltle">
-      <DetalsTitle
-        :title="dataFrom.title"
-        :type="dataFrom.englishTitle"
-      ></DetalsTitle>
+      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
     </div>
     <div class="content" v-for="item in dataFrom.content" :key="item.title">
       <div class="content-left">
@@ -16,7 +13,10 @@
           <div class="content-left-content">
             <p>
               <span>{{ item.link.name }}</span>
-              <span>{{ item.linkValue }}</span>
+              <a-tooltip>
+                <template #title>{{ item.linkValue }}</template>
+                <span>{{ item.linkValue }}</span>
+              </a-tooltip>
             </p>
           </div>
         </div>
@@ -30,7 +30,7 @@
           <div class="content-right-title">{{ item.contact }}</div>
           <div class="content-right-content">
             <p>
-              <span>{{ item.contact }}</span>
+              <span>{{ item.facilitator.name }}</span>
               <a-tooltip>
                 <template #title>{{ item.facilitator.value }}</template>
                 <span>{{ item.facilitator.value }}</span>
@@ -56,7 +56,7 @@
           <div class="content-right-title">{{ item.contact2 }}</div>
           <div class="content-right-content">
             <p>
-              <span>{{ item.contact2 }}</span>
+              <span>{{ item.facilitator2.name }}</span>
               <a-tooltip>
                 <template #title>{{ item.facilitator2.value }}</template>
                 <span>{{ item.facilitator2.value }}</span>
@@ -84,264 +84,281 @@
 </template>
 
 <script setup>
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-  import { pinyin } from 'pinyin-pro'
-  import { ref, defineProps, watch } from 'vue'
-  let dataFrom = ref({
-    title: '使用方式',
-    englishTitle: 'USAGE',
-    content: [
-      {
-        title: '组件地址',
-        link: {
-          name: '接口地址：',
-        },
-        linkValue: '',
-        contact: '归属部门',
-        facilitator: { name: '归属部门：', value: '' },
-        people: { name: '部门联系人：', value: '' },
-        phone: {
-          name: '联系人电话：',
-          value: '',
-        },
-        contact2: '服务商',
-        facilitator2: { name: '服务商：', value: '' },
-        people2: { name: '服务商联系人：', value: '' },
-        phone2: {
-          name: '联系人电话：',
-          value: '',
-        },
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+import { pinyin } from 'pinyin-pro'
+import { ref, defineProps, watch } from 'vue'
+let dataFrom = ref({
+  title: '使用方式',
+  englishTitle: 'USAGE',
+  content: [
+    {
+      title: '组件地址',
+      link: {
+        name: '接口地址：',
       },
-    ],
-  })
-  //数据初始化
-  const props = defineProps({
-    dataList: { type: Object, default: null },
-  })
-  const flag = ref(true)
-  if (props.dataList.infoList) {
-    let obj = props.dataList.infoList.filter(
-      (item) =>
-        item.attrType === '技术文档' ||
-        item.attrType === '服务商' ||
-        item.attrType === '服务商联系人' ||
-        item.attrType === '使用手册' ||
-        item.attrType === '服务地址' ||
-        item.attrType === '样式服务地址' ||
-        item.attrType === '服务商联系电话'
-    )[0]
-    if (!obj) {
-      flag.value = false
-    } else {
-      // eslint-disable-next-line vue/no-setup-props-destructure
-      dataFrom.value.content[0].link.value = props.dataList.apiUrl
-      dataFrom.value.content[0].facilitator.value = props.dataList.deptName
-      dataFrom.value.content[0].people.value = props.dataList.deptContacts
-      dataFrom.value.content[0].phone.value = props.dataList.deptPhone
-      console.log('dataList', props.dataList)
-      props.dataList.infoList.map((item) => {
-        if (item.attrType === '组件地址') {
-          dataFrom.value.content[0].linkValue = item.attrValue || '--'
-        } else if (item.attrType === '服务商') {
-          dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
-        } else if (item.attrType === '服务商联系人') {
-          dataFrom.value.content[0].people2.value = item.attrValue || '--'
-        } else if (item.attrType === '服务商联系电话') {
-          dataFrom.value.content[0].phone2.value = item.attrValue || '--'
-        }
-      })
-    }
+      linkValue: '',
+      contact: '归属部门',
+      facilitator: { name: '归属部门：', value: '' },
+      people: { name: '部门联系人：', value: '' },
+      phone: {
+        name: '联系人电话：',
+        value: '',
+      },
+      contact2: '服务商',
+      facilitator2: { name: '服务商：', value: '' },
+      people2: { name: '服务商联系人：', value: '' },
+      phone2: {
+        name: '联系人电话：',
+        value: '',
+      },
+    },
+  ],
+})
+//数据初始化
+const props = defineProps({
+  dataList: { type: Object, default: null },
+})
+const flag = ref(true)
+if (props.dataList.infoList) {
+  let obj = props.dataList.infoList.filter(
+    (item) =>
+      item.attrType === '技术文档' ||
+      item.attrType === '服务商' ||
+      item.attrType === '服务商联系人' ||
+      item.attrType === '使用手册' ||
+      item.attrType === '服务地址' ||
+      item.attrType === '样式服务地址' ||
+      item.attrType === '服务商联系电话'
+  )[0]
+  if (!obj) {
+    flag.value = false
+  } else {
+    // eslint-disable-next-line vue/no-setup-props-destructure
+    dataFrom.value.content[0].link.value = props.dataList.apiUrl
+    dataFrom.value.content[0].facilitator.value = props.dataList.deptName
+    dataFrom.value.content[0].people.value = props.dataList.deptContacts
+    dataFrom.value.content[0].phone.value = props.dataList.deptPhone
+    console.log('dataList', props.dataList)
+    props.dataList.infoList.map((item) => {
+      if (item.attrType === '组件地址') {
+        dataFrom.value.content[0].linkValue = item.attrValue || '--'
+      } else if (item.attrType === '服务商') {
+        dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
+      } else if (item.attrType === '服务商联系人') {
+        dataFrom.value.content[0].people2.value = item.attrValue || '--'
+      } else if (item.attrType === '服务商联系电话') {
+        dataFrom.value.content[0].phone2.value = item.attrValue || '--'
+      }
+    })
   }
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        let obj = val.infoList.filter(
-          (item) =>
-            item.attrType === '技术文档' ||
-            item.attrType === '服务商' ||
-            item.attrType === '服务商联系人' ||
-            item.attrType === '使用手册' ||
-            item.attrType === '服务地址' ||
-            item.attrType === '样式服务地址' ||
-            item.attrType === '服务商联系电话'
-        )[0]
-        if (!obj) {
-          flag.value = false
-        } else {
-          dataFrom.value.content[0].link.value = val.apiUrl
-          dataFrom.value.content[0].facilitator.value = val.deptName
-          dataFrom.value.content[0].people.value = val.deptContacts
-          dataFrom.value.content[0].phone.value = val.deptPhone
-          console.log('dataList', val)
-          val.infoList.map((item) => {
-            if (item.attrType === '组件地址') {
-              dataFrom.value.content[0].linkValue = item.attrValue || '--'
-            } else if (item.attrType === '服务商') {
-              dataFrom.value.content[0].facilitator2.value =
-                item.attrValue || '--'
-            } else if (item.attrType === '服务商联系人') {
-              dataFrom.value.content[0].people2.value = item.attrValue || '--'
-            } else if (item.attrType === '服务商联系电话') {
-              dataFrom.value.content[0].phone2.value = item.attrValue || '--'
-            }
-          })
-        }
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      let obj = val.infoList.filter(
+        (item) =>
+          item.attrType === '技术文档' ||
+          item.attrType === '服务商' ||
+          item.attrType === '服务商联系人' ||
+          item.attrType === '使用手册' ||
+          item.attrType === '服务地址' ||
+          item.attrType === '样式服务地址' ||
+          item.attrType === '服务商联系电话'
+      )[0]
+      if (!obj) {
+        flag.value = false
+      } else {
+        dataFrom.value.content[0].link.value = val.apiUrl
+        dataFrom.value.content[0].facilitator.value = val.deptName
+        dataFrom.value.content[0].people.value = val.deptContacts
+        dataFrom.value.content[0].phone.value = val.deptPhone
+        console.log('dataList', val)
+        val.infoList.map((item) => {
+          if (item.attrType === '组件地址') {
+            dataFrom.value.content[0].linkValue = item.attrValue || '--'
+          } else if (item.attrType === '服务商') {
+            dataFrom.value.content[0].facilitator2.value =
+              item.attrValue || '--'
+          } else if (item.attrType === '服务商联系人') {
+            dataFrom.value.content[0].people2.value = item.attrValue || '--'
+          } else if (item.attrType === '服务商联系电话') {
+            dataFrom.value.content[0].phone2.value = item.attrValue || '--'
+          }
+        })
       }
     }
+  }
+)
+function technical() {
+  // 拼接路径
+  // const type = pinyin(props.dataList.type, {
+  //   pattern: 'initial',
+  // }).replace(/\s*/g, '')
+  // // 打开文档
+  // const id = props.dataList.id
+  // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+  // console.log('dataFrom.value.link', dataFrom.value.link)
+  let obj = props.dataList.infoList.filter(
+    (item) => item.attrType === '技术文档'
+  )[0]
+  console.log('dataFrom.value.link', obj.attrValue)
+  window.open(
+    window.SITE_CONFIG.previewUrl +
+    'hisense_office/onlinePreview?url=' +
+    btoa(encodeURI(obj.attrValue))
   )
-  function technical() {
-    // 拼接路径
-    // const type = pinyin(props.dataList.type, {
-    //   pattern: 'initial',
-    // }).replace(/\s*/g, '')
-    // // 打开文档
-    // const id = props.dataList.id
-    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
-    // console.log('dataFrom.value.link', dataFrom.value.link)
-    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '技术文档'
-    )[0]
-    console.log('dataFrom.value.link', obj.attrValue)
-    window.open(
-      window.SITE_CONFIG.previewUrl +
-        'hisense_office/onlinePreview?url=' +
-        btoa(encodeURI(obj.attrValue))
-    )
-  }
-  function technicalNew() {
-    // 拼接路径
-    // const type = pinyin(props.dataList.type, {
-    //   pattern: 'initial',
-    // }).replace(/\s*/g, '')
-    // // 打开文档
-    // const id = props.dataList.id
-    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
-    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '使用手册'
-    )[0]
-    console.log('dataFrom.value.link', obj.attrValue)
-    window.open(
-      window.SITE_CONFIG.previewUrl +
-        'hisense_office/onlinePreview?url=' +
-        btoa(encodeURI(obj.attrValue))
-    )
-  }
+}
+function technicalNew() {
+  // 拼接路径
+  // const type = pinyin(props.dataList.type, {
+  //   pattern: 'initial',
+  // }).replace(/\s*/g, '')
+  // // 打开文档
+  // const id = props.dataList.id
+  // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+  let obj = props.dataList.infoList.filter(
+    (item) => item.attrType === '使用手册'
+  )[0]
+  console.log('dataFrom.value.link', obj.attrValue)
+  window.open(
+    window.SITE_CONFIG.previewUrl +
+    'hisense_office/onlinePreview?url=' +
+    btoa(encodeURI(obj.attrValue))
+  )
+}
 </script>
 
 <style lang="less" scoped>
-  .usage-mode {
+.usage-mode {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.8rem 0;
+
+  .content {
+    margin-top: 0.3rem;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0.8rem 0;
-    .content {
-      margin-top: 0.3rem;
+
+    .content-left {
+      height: 1.5rem;
+      width: 6.2rem;
+      background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
+      background-position: center;
+      background-size: 100% 100%;
+      border-radius: 0.1rem;
+      margin-right: 0.6rem;
+      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
       display: flex;
-      .content-left {
-        height: 1.5rem;
-        width: 6.2rem;
-        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
-          no-repeat;
-        background-position: center;
-        background-size: 100% 100%;
-        border-radius: 0.1rem;
-        margin-right: 0.6rem;
-        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
-        display: flex;
-        align-items: center;
-        padding: 0 0.35rem;
-        .left {
-          .content-left-title {
-            font-size: 0.26rem;
-            line-height: 0.26rem;
-            color: #212956;
-            margin-bottom: 0.2rem;
-            span:first-child {
-              margin-right: 0.1rem;
-            }
+      align-items: center;
+      padding: 0 0.35rem;
+
+      .left {
+        .content-left-title {
+          font-size: 0.26rem;
+          line-height: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.2rem;
+
+          span:first-child {
+            margin-right: 0.1rem;
           }
-          .content-left-content {
-            width: 4.2rem;
-            font-size: 0.2rem;
-            color: rgba(33, 41, 86, 0.8);
-            line-height: 0.2rem;
-            p {
+        }
+
+        .content-left-content {
+          width: 4.2rem;
+          font-size: 0.2rem;
+          color: rgba(33, 41, 86, 0.8);
+          line-height: 0.2rem;
+
+          p {
+            display: -webkit-box;
+            margin-bottom: 0.1rem;
+
+            span:last-of-type {
+              width: 298px;
               display: -webkit-box;
               overflow: hidden;
               -webkit-line-clamp: 1;
               -webkit-box-orient: vertical;
-              margin-bottom: 0.1rem;
             }
           }
         }
-        .right {
-          div {
-            height: 0.4rem;
-            width: 1.3rem;
-            background: #ffffff;
-            border-radius: 0.2rem;
-            color: #526aff;
-            font-size: 0.2rem;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-          }
-          div:first-child {
-            margin-bottom: 0.2rem;
-          }
-        }
       }
-      .content-right {
-        height: 1.5rem;
-        width: 6.2rem;
-        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
-          no-repeat;
-        background-position: center;
-        background-size: 100% 100%;
-        border-radius: 0.1rem;
-        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        padding: 0 0.3rem;
-        .content-right-left {
-          border-right: 0.01rem solid #707fe0;
-          padding-right: 0.1rem;
-          margin-right: 0.1rem;
-        }
-        .content-right-title {
-          font-size: 0.26rem;
-          line-height: 0.26rem;
-          color: #212956;
-          margin-bottom: 0.15rem;
-        }
-        .content-right-content {
+
+      .right {
+        div {
+          height: 0.4rem;
+          width: 1.3rem;
+          background: #ffffff;
+          border-radius: 0.2rem;
+          color: #526aff;
+          font-size: 0.2rem;
           display: flex;
-          font-size: 0.16rem;
-          color: rgba(33, 41, 86, 0.8);
-          line-height: 0.2rem;
-          overflow: hidden;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+
+        div:first-child {
+          margin-bottom: 0.2rem;
+        }
+      }
+    }
+
+    .content-right {
+      height: 1.5rem;
+      width: 6.2rem;
+      background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
+      background-position: center;
+      background-size: 100% 100%;
+      border-radius: 0.1rem;
+      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      padding: 0 0.3rem;
+
+      .content-right-left {
+        border-right: 0.01rem solid #707fe0;
+        padding-right: 0.1rem;
+        margin-right: 0.1rem;
+      }
+
+      .content-right-title {
+        font-size: 0.26rem;
+        line-height: 0.26rem;
+        color: #212956;
+        margin-bottom: 0.15rem;
+      }
+
+      .content-right-content {
+        display: flex;
+        font-size: 0.16rem;
+        color: rgba(33, 41, 86, 0.8);
+        line-height: 0.2rem;
+        overflow: hidden;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        flex-direction: column;
+
+        p {
+          // width: 1.60rem;
+          height: 0.2rem;
+          display: -webkit-box;
+          // overflow: hidden;
+          margin-bottom: 0.08rem;
+          white-space: nowrap;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
-          flex-direction: column;
-          p {
-            // width: 1.60rem;
-            height: 0.2rem;
-            display: -webkit-box;
-            // overflow: hidden;
-            margin-bottom: 0.08rem;
-            white-space: nowrap;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            margin-right: 0.15rem;
-            span {
-              cursor: pointer;
-            }
+          margin-right: 0.15rem;
+
+          span {
+            cursor: pointer;
           }
         }
       }
     }
   }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue b/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
index d53f8073..016bb3ee 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
@@ -71,7 +71,6 @@
     dataList: { type: Object, default: null },
   })
   if (props.dataList.infoList) {
-    debugger
     let obj = props.dataList.infoList.filter(
       (item) => item.attrType === '应用场景'
     )[0]
@@ -79,7 +78,6 @@
       flag.value = false
     } else {
       obj.attrValue = JSON.parse(obj.attrValue)
-      debugger
       dataFrom.value = obj
       tabindex.value = dataFrom.value.attrValue[0].name
     }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
index e03abb90..0913adce 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
@@ -1,30 +1,79 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
-    <detals-title title="关联应用" type="RELEVANCE"></detals-title>
-    <div class="application-associated-ability-main">
+    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
       <div
         class="associated-ability-card"
-        v-for="dataListitem in dataFrom[0].dataList"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
         :key="dataListitem.id"
         @click="switchFunction(dataListitem.id)"
       >
-        <div class="associated-ability-card-title">
-          {{ dataListitem.name }}
-        </div>
-        <div class="associated-ability-card-content">
-          <div class="associated-ability-card-content-font">
-            {{ dataListitem.description }}
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
+          <div class="associated-ability-card-title">
+            {{ dataListitem.name }}
           </div>
+        </a-tooltip>
+        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description }}</template>
+            <div class="associated-ability-card-content-font">
+              {{ dataListitem.description }}
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>
 
 <script setup>
   import { ref, defineProps, watch } from 'vue'
   import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
   const router = useRouter()
+  const modules = ref([Pagination])
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
   const props = defineProps({
     associatedComponents: { type: Array, default: null },
@@ -34,17 +83,20 @@
   const oldid = router.currentRoute.value.query.id
   //点击查看详情
   const switchFunction = (id) => {
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
+    // router.push({
+    //   path: '/details',
+    //   query: {
+    //     id: id,
+    //   },
+    // })
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
+    // alert(id)
   }
-  if (props.associatedComponents[0].dataList.length != 0) {
+  console.log('这个是空值', props.associatedComponents[0])
+  if (props.associatedComponents[0].dataList.length > 0) {
+    console.log('这个是空值', props.associatedComponents)
     flag.value = true
     dataFrom.value = props.associatedComponents
-    debugger
     console.log('dataFrom.value', dataFrom.value)
   } else {
     flag.value = false
@@ -63,7 +115,7 @@
   )
   watch(
     () => router.currentRoute.value.query.id,
-    () => {
+    (newValue, oldValue) => {
       if (oldid != router.currentRoute.value.query.id) {
         window.location.reload()
       }
@@ -75,7 +127,7 @@
 <style lang="less" scoped>
   .application-associated-ability {
     padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -83,20 +135,31 @@
       margin-top: 0.4rem;
       width: 13.3rem;
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
       .associated-ability-card {
         width: 3.2rem;
+        height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #e4e6f5;
         border-radius: 0.1rem;
         padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
         cursor: pointer;
         .associated-ability-card-title {
+          width: 2.2rem;
           padding-top: 0.3rem;
           font-size: 0.22rem;
           text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -107,6 +170,11 @@
             color: #999;
             margin-right: 0.15rem;
             margin-top: 0.15rem;
+            text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
index dcc3f48c..8717495d 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
@@ -21,17 +21,18 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+  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: 'eveloper-presentation',
     },
-    {
-      name: '关联应用',
-      key: 'developer-associated-ability',
-    },
     {
       name: '功能介绍',
       key: 'function-introduction',
@@ -60,10 +61,26 @@
   const props = defineProps({
     selectNow: { type: String, default: '' },
     dataList: { type: Object, default: null },
-    associatedComponents: { type: Array, default: null },
+    associatedComponents: { type: Object, default: null },
   })
-  const select = ref('algorithm-display')
+  const select = ref('developer-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: 'developer-associated-ability',
+          show: true,
+        })
+        // list.value.push('关联应用')
+        console.log('navList', navList)
+      }
+    })
+  }
   const selectNav = (key) => {
     select.value = key
     mybus.emit('flyToView', select.value)
@@ -81,17 +98,17 @@
         list.value.push('组件展示')
       }
     })
-    list.value.push('关联应用')
+    list.value.unshift('关联应用')
     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 (item.name == '关联应用') {
+        //   if (props.associatedComponents[0].dataList.length != 0) {
+        //     item.show = true
+        //   }
+        // } else {
+        item.show = true
+        // }
       }
     })
     select.value = navList.value.filter(
@@ -122,25 +139,28 @@
             list.value.push('组件展示')
           }
         })
-        list.value.push('关联应用')
+        list.value.unshift('关联应用')
         list.value.push('组件试用')
         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 (item.name == '关联应用') {
+            //   if (props.associatedComponents[0].dataList.length != 0) {
+            //     item.show = true
+            //   }
+            // } else {
+            item.show = true
+            // }
           }
         })
         if (list.value.length > 0) {
-          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])
+            )[0].key
+          }
         }
         console.log('11111111111111111111111111', list.value, navList.value)
       }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue b/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
index 004c0eee..81931869 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
@@ -57,6 +57,10 @@
       {
         childrenTitle: '归属部门',
         childrenContent: [
+          {
+            attrType: '归属部门名称',
+            attrValue: '------',
+          },
           {
             attrType: '部门联系人',
             attrValue: '------',
@@ -65,15 +69,15 @@
             attrType: '联系人电话',
             attrValue: '------',
           },
-          {
-            attrType: '归属部门名称',
-            attrValue: '------',
-          },
         ],
       },
       {
         childrenTitle: '服务商信息',
         childrenContent: [
+          {
+            attrType: '服务商名称',
+            attrValue: '------',
+          },
           {
             attrType: '服务商联系人',
             attrValue: '------',
@@ -82,10 +86,6 @@
             attrType: '联系人电话',
             attrValue: '------',
           },
-          {
-            attrType: '服务商名称',
-            attrValue: '------',
-          },
         ],
       },
     ],
@@ -117,6 +117,9 @@
         } else if (item.attrType == '服务商联系电话') {
           dataFrom.value.content[1].childrenContent[1].attrValue =
             item.attrValue
+        } else if (item.attrType == '服务商' || item.attrType == '服务商名') {
+          dataFrom.value.content[1].childrenContent[2].attrValue =
+            item.attrValue
         }
       })
     }
@@ -176,6 +179,12 @@
             } else if (item.attrType == '服务商联系电话') {
               dataFrom.value.content[1].childrenContent[1].attrValue =
                 item.attrValue
+            } else if (
+              item.attrType == '服务商' ||
+              item.attrType == '服务商名'
+            ) {
+              dataFrom.value.content[1].childrenContent[2].attrValue =
+                item.attrValue
             }
           })
         }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
index 30fd34a2..0655035e 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:56:28
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-01 14:21:04
+ * @LastEditTime: 2022-07-05 11:42:59
  * @Description: 开发组件详情页头部
 -->
 <template>
@@ -96,6 +96,7 @@
               resourceName: props.dataList.name,
               time: props.dataList.createDate,
               type: props.dataList.type,
+              componentType: '开发组件',
             },
           ],
           deptId: props.dataList.deptId,
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue b/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
index aa3918f2..78281255 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
@@ -130,6 +130,13 @@
         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;
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
index 0173725e..0913adce 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
@@ -1,30 +1,79 @@
 <template>
   <div class="application-associated-ability" v-if="flag">
-    <detals-title title="关联应用" type="RELEVANCE"></detals-title>
-    <div class="application-associated-ability-main">
+    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
       <div
         class="associated-ability-card"
         v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
         :key="dataListitem.id"
         @click="switchFunction(dataListitem.id)"
       >
-        <div class="associated-ability-card-title">
-          {{ dataListitem.name }}
-        </div>
-        <div class="associated-ability-card-content">
-          <div class="associated-ability-card-content-font">
-            {{ dataListitem.description }}
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
+          <div class="associated-ability-card-title">
+            {{ dataListitem.name }}
           </div>
+        </a-tooltip>
+        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description }}</template>
+            <div class="associated-ability-card-content-font">
+              {{ dataListitem.description }}
+            </div>
+          </a-tooltip>
         </div>
       </div>
     </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>
 
 <script setup>
   import { ref, defineProps, watch } from 'vue'
   import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
   const router = useRouter()
+  const modules = ref([Pagination])
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
   const props = defineProps({
     associatedComponents: { type: Array, default: null },
@@ -34,17 +83,20 @@
   const oldid = router.currentRoute.value.query.id
   //点击查看详情
   const switchFunction = (id) => {
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
+    // router.push({
+    //   path: '/details',
+    //   query: {
+    //     id: id,
+    //   },
+    // })
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
+    // alert(id)
   }
-  if (props.associatedComponents[0].dataList.length != 0) {
+  console.log('这个是空值', props.associatedComponents[0])
+  if (props.associatedComponents[0].dataList.length > 0) {
+    console.log('这个是空值', props.associatedComponents)
     flag.value = true
     dataFrom.value = props.associatedComponents
-    debugger
     console.log('dataFrom.value', dataFrom.value)
   } else {
     flag.value = false
@@ -75,7 +127,7 @@
 <style lang="less" scoped>
   .application-associated-ability {
     padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -83,20 +135,31 @@
       margin-top: 0.4rem;
       width: 13.3rem;
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
       .associated-ability-card {
         width: 3.2rem;
+        height: 2.78rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #e4e6f5;
         border-radius: 0.1rem;
         padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
         cursor: pointer;
         .associated-ability-card-title {
+          width: 2.2rem;
           padding-top: 0.3rem;
           font-size: 0.22rem;
           text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
         }
         .associated-ability-card-content {
           width: 100%;
@@ -107,6 +170,11 @@
             color: #999;
             margin-right: 0.15rem;
             margin-top: 0.15rem;
+            text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
           }
         }
       }
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
index c5ebd542..b0e395c3 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
@@ -8,12 +8,7 @@
 <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>
@@ -21,240 +16,248 @@
   </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
-  import mybus from '@/myplugins/mybus'
-  const navList = ref([
-    {
-      name: '关联应用',
-      key: 'layer-service-associated-ability',
-    },
-    {
-      name: '图层展示',
-      key: 'service-presentation',
-    },
-    {
-      name: '图层信息',
-      key: 'service-information',
-    },
-    {
-      name: '应用场景',
-      key: 'service-application-scenarios',
-    },
-    {
-      name: '应用案例',
-      key: 'service-application-case',
-    },
-    {
-      name: '图层预览',
-      key: 'service-preview',
-    },
-    {
-      name: '使用方式',
-      key: 'service-usage-mode',
-    },
-    {
-      name: '常见问题',
-      key: 'service-common-problem',
-    },
-  ])
-  const props = defineProps({
-    selectNow: { type: String, default: '' },
-    dataList: { type: Object, default: null },
-    associatedComponents: { type: Array, default: null },
+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: 'service-presentation',
+  },
+  {
+    name: '图层信息',
+    key: 'service-information',
+  },
+  {
+    name: '应用场景',
+    key: 'service-application-scenarios',
+  },
+  {
+    name: '应用案例',
+    key: 'service-application-case',
+  },
+  {
+    name: '图层预览',
+    key: 'service-preview',
+  },
+  {
+    name: '使用方式',
+    key: 'service-usage-mode',
+  },
+  {
+    name: '常见问题',
+    key: 'service-common-problem',
+  },
+])
+const props = defineProps({
+  selectNow: { type: String, default: '' },
+  dataList: { type: Object, default: null },
+  associatedComponents: { type: Array, default: null },
+})
+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: 'layer-service-associated-ability',
+        show: true,
+      })
+      list.value.unshift('关联应用')
+    }
   })
-  const select = ref('service-presentation')
-  const list = ref([])
-  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 === '应用案例'
-      ) {
-        list.value.push(item.attrType)
-      } else if (item.attrType === '图层缩略图') {
-        list.value.push('图层展示')
-      } else if (item.attrType === '是否可预览') {
-        if (item.attrValue === '是') {
-          list.value.push('图层预览')
-        }
-      } else if (
-        item.attrType === '服务类型' ||
-        item.attrType === '覆盖区域' ||
-        item.attrType === '切片策略' ||
-        item.attrType === '坐标系' ||
-        item.attrType === '切片尺寸' ||
-        item.attrType === '最小级别' ||
-        item.attrType === '数据范围' ||
-        item.attrType === '图层类型' ||
-        item.attrType === '最大级别'
-      ) {
-        list.value.push('图层信息')
-      } else if (
-        item.attrType === '技术文档' ||
-        item.attrType === '服务商' ||
-        item.attrType === '服务商联系人' ||
-        item.attrType === '使用手册' ||
-        item.attrType === '服务地址' ||
-        item.attrType === '样式服务地址' ||
-        item.attrType === '服务商联系电话'
-      ) {
-        list.value.push('使用方式')
+}
+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) {
+  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 === '应用案例'
+    ) {
+      list.value.push(item.attrType)
+    } else if (item.attrType === '图层缩略图') {
+      list.value.push('图层展示')
+    } else if (item.attrType === '是否可预览') {
+      if (item.attrValue === '是') {
+        list.value.push('图层预览')
       }
-    })
-    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 (
+      item.attrType === '服务类型' ||
+      item.attrType === '覆盖区域' ||
+      item.attrType === '切片策略' ||
+      item.attrType === '坐标系' ||
+      item.attrType === '切片尺寸' ||
+      item.attrType === '最小级别' ||
+      item.attrType === '数据范围' ||
+      item.attrType === '图层类型' ||
+      item.attrType === '最大级别'
+    ) {
+      list.value.push('图层信息')
+    } else if (
+      item.attrType === '技术文档' ||
+      item.attrType === '服务商' ||
+      item.attrType === '服务商联系人' ||
+      item.attrType === '使用手册' ||
+      item.attrType === '服务地址' ||
+      item.attrType === '样式服务地址' ||
+      item.attrType === '服务商联系电话'
+    ) {
+      list.value.push('使用方式')
+    }
+  })
+  list.value.unshift('关联应用')
+  navList.value.forEach((item) => {
+    console.log(item)
+    if (list.value.indexOf(item.name) > -1) {
+      item.show = true
+    }
+  })
+  select.value = navList.value.filter(
+    (item) => 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 === '应用案例'
+        ) {
+          list.value.push(item.attrType)
+        } else if (item.attrType === '图层缩略图') {
+          list.value.push('图层展示')
+        } else if (item.attrType === '是否可预览') {
+          if (item.attrValue === '是') {
+            list.value.push('图层预览')
           }
-        } else {
+        } else if (
+          item.attrType === '服务类型' ||
+          item.attrType === '覆盖区域' ||
+          item.attrType === '切片策略' ||
+          item.attrType === '坐标系' ||
+          item.attrType === '切片尺寸' ||
+          item.attrType === '最小级别' ||
+          item.attrType === '数据范围' ||
+          item.attrType === '图层类型' ||
+          item.attrType === '最大级别'
+        ) {
+          list.value.push('图层信息')
+        } else if (
+          item.attrType === '技术文档' ||
+          item.attrType === '服务商' ||
+          item.attrType === '服务商联系人' ||
+          item.attrType === '使用手册' ||
+          item.attrType === '服务地址' ||
+          item.attrType === '样式服务地址' ||
+          item.attrType === '服务商联系电话'
+        ) {
+          list.value.push('使用方式')
+        }
+      })
+      list.value.unshift('关联应用')
+      navList.value.forEach((item) => {
+        console.log(item)
+        if (list.value.indexOf(item.name) > -1) {
           item.show = true
         }
+      })
+      if (list.value.length > 0) {
+        select.value = navList.value.filter(
+          (item) => item.name === list.value[0]
+        )[0].key
       }
-    })
-    select.value = navList.value.filter(
-      (item) => item.name === '图层展示'
-    )[0].key
-    console.log('11111111111111111111111111', list.value, navList.value)
+      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 === '应用案例'
-          ) {
-            list.value.push(item.attrType)
-          } else if (item.attrType === '图层缩略图') {
-            list.value.push('图层展示')
-          } else if (item.attrType === '是否可预览') {
-            if (item.attrValue === '是') {
-              list.value.push('图层预览')
-            }
-          } else if (
-            item.attrType === '服务类型' ||
-            item.attrType === '覆盖区域' ||
-            item.attrType === '切片策略' ||
-            item.attrType === '坐标系' ||
-            item.attrType === '切片尺寸' ||
-            item.attrType === '最小级别' ||
-            item.attrType === '数据范围' ||
-            item.attrType === '图层类型' ||
-            item.attrType === '最大级别'
-          ) {
-            list.value.push('图层信息')
-          } else if (
-            item.attrType === '技术文档' ||
-            item.attrType === '服务商' ||
-            item.attrType === '服务商联系人' ||
-            item.attrType === '使用手册' ||
-            item.attrType === '服务地址' ||
-            item.attrType === '样式服务地址' ||
-            item.attrType === '服务商联系电话'
-          ) {
-            list.value.push('使用方式')
-          }
-        })
-        list.value.push('关联应用')
-        navList.value.forEach((item) => {
-          console.log(item)
-          if (list.value.indexOf(item.name) > -1) {
-            if (item.name == '关联应用') {
-              if (props.associatedComponents[0].dataList.length != 0) {
-                item.show = true
-              }
-            } else {
-              item.show = true
-            }
-          }
-        })
-        if (list.value.length > 0) {
-          select.value = navList.value.filter(
-            (item) => item.name === '图层展示'
-          )[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;
+.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;
     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;
-      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;
-      }
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    .line {
+      width: 0.4rem;
+      height: 0.04rem;
     }
   }
+
+  .select {
+    color: #526aff;
+
+    .line {
+      background: #526aff;
+    }
+  }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
index 954e2ae4..04c67bc2 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:56:28
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-01 18:52:34
+ * @LastEditTime: 2022-07-05 11:43:18
  * @Description: 算法详情页头部
 -->
 <template>
@@ -96,6 +96,7 @@
               resourceName: props.dataList.name,
               time: props.dataList.createDate,
               type: props.dataList.type,
+              componentType: '图层服务',
             },
           ],
           deptId: props.dataList.deptId,
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
index 89c9a973..089ff5c7 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
@@ -10,16 +10,20 @@
     <div class="content" v-for="item in dataFrom.content" :key="item.title">
       <div class="content-left">
         <div class="left">
-          <div class="content-left-content">
+          <a-tooltip>
+            <template #title>{{ item.linkValue }}</template>
             <p>
-              <span>服务地址：</span>
-              <span>{{ item.linkValue }}</span>
+              服务地址：
+              {{ item.linkValue }}
             </p>
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ item.csslinkValue }}</template>
             <p>
-              <span>样式服务地址：</span>
-              <span>{{ item.csslnkValue }}</span>
+              样式服务地址：
+              {{ item.csslinkValue }}
             </p>
-          </div>
+          </a-tooltip>
         </div>
         <div class="right">
           <div @click="technical()">接口文档</div>
@@ -31,7 +35,7 @@
           <div class="content-right-title">{{ item.contact }}</div>
           <div class="content-right-content">
             <p>
-              <span>{{ item.contact }}</span>
+              <span>{{ item.facilitator.name }}</span>
               <a-tooltip>
                 <template #title>{{ item.facilitator.value }}</template>
                 <span>{{ item.facilitator.value }}</span>
@@ -57,7 +61,7 @@
           <div class="content-right-title">{{ item.contact2 }}</div>
           <div class="content-right-content">
             <p>
-              <span>{{ item.contact2 }}</span>
+              <span>{{ item.facilitator2.name }}</span>
               <a-tooltip>
                 <template #title>{{ item.facilitator2.value }}</template>
                 <span>{{ item.facilitator2.value }}</span>
@@ -99,6 +103,7 @@
           name: '接口地址：',
         },
         linkValue: '',
+        csslinkValue: '',
         contact: '归属部门',
         facilitator: { name: '归属部门：', value: '' },
         people: { name: '部门联系人：', value: '' },
@@ -142,7 +147,7 @@
       dataFrom.value.content[0].phone.value = props.dataList.deptPhone
       console.log('dataList', props.dataList)
       props.dataList.infoList.map((item) => {
-        if (item.attrType === '组件地址') {
+        if (item.attrType === '服务地址') {
           dataFrom.value.content[0].linkValue = item.attrValue || '--'
         } else if (item.attrType === '服务商') {
           dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
@@ -150,6 +155,8 @@
           dataFrom.value.content[0].people2.value = item.attrValue || '--'
         } else if (item.attrType === '服务商联系电话') {
           dataFrom.value.content[0].phone2.value = item.attrValue || '--'
+        } else if (item.attrType === '样式服务地址') {
+          dataFrom.value.content[0].csslinkValue = item.attrValue || '--'
         }
       })
     }
@@ -177,7 +184,7 @@
           dataFrom.value.content[0].phone.value = val.deptPhone
           console.log('dataList', val)
           val.infoList.map((item) => {
-            if (item.attrType === '组件地址') {
+            if (item.attrType === '服务地址') {
               dataFrom.value.content[0].linkValue = item.attrValue || '--'
             } else if (item.attrType === '服务商') {
               dataFrom.value.content[0].facilitator2.value =
@@ -186,6 +193,8 @@
               dataFrom.value.content[0].people2.value = item.attrValue || '--'
             } else if (item.attrType === '服务商联系电话') {
               dataFrom.value.content[0].phone2.value = item.attrValue || '--'
+            } else if (item.attrType === '样式服务地址') {
+              dataFrom.value.content[0].csslinkValue = item.attrValue || '--'
             }
           })
         }
@@ -237,9 +246,11 @@
     flex-direction: column;
     align-items: center;
     padding: 0.8rem 0;
+
     .content {
       margin-top: 0.3rem;
       display: flex;
+
       .content-left {
         height: 1.8rem;
         width: 6.2rem;
@@ -254,36 +265,35 @@
         display: flex;
         align-items: center;
         padding: 0 0.35rem;
+
         .left {
           .content-left-title {
             font-size: 0.26rem;
             line-height: 0.26rem;
             color: #212956;
             margin-bottom: 0.2rem;
+
             span:first-child {
               margin-right: 0.1rem;
             }
           }
-          .content-left-content {
-            width: 4.2rem;
-            font-size: 0.2rem;
+          p {
+            display: block;
             color: rgba(33, 41, 86, 0.8);
-            line-height: 0.2rem;
-            p {
-              display: -webkit-box;
-              overflow: hidden;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
-              // margin-bottom: 0.1rem;
-              font-size: 20px;
-              color: #212956;
-              line-height: 26px;
-            }
-            p:last-of-type {
-              margin-top: 20px;
-            }
+            width: 4.2rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 20px;
+            color: #212956;
+            line-height: 26px;
+            margin-top: 0.3rem;
+          }
+          p:first-child {
+            margin-top: 0.2rem;
           }
         }
+
         .right {
           div {
             height: 0.4rem;
@@ -297,11 +307,13 @@
             align-items: center;
             cursor: pointer;
           }
+
           div:first-child {
             margin-bottom: 0.2rem;
           }
         }
       }
+
       .content-right {
         height: 1.8rem;
         width: 6.2rem;
@@ -316,17 +328,20 @@
         justify-content: space-around;
         align-items: center;
         padding: 0 0.3rem;
+
         .content-right-left {
-          border-right: 0.01rem solid #b0b9f1;
+          // border-right: 0.01rem solid #b0b9f1;
           padding-right: 0.1rem;
           margin-right: 0.1rem;
         }
+
         .content-right-title {
           font-size: 0.26rem;
           line-height: 0.26rem;
           color: #212956;
           margin-bottom: 0.15rem;
         }
+
         .content-right-content {
           display: flex;
           font-size: 0.16rem;
@@ -336,6 +351,7 @@
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
           flex-direction: column;
+
           p {
             // width: 1.60rem;
             height: 0.2rem;
@@ -345,6 +361,7 @@
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
             margin-right: 0.15rem;
+
             span {
               cursor: pointer;
               font-size: 20px;
diff --git a/front/src/views/home/AbilityToApplyFor.vue b/front/src/views/home/AbilityToApplyFor.vue
index 7fd3236b..84b73888 100644
--- a/front/src/views/home/AbilityToApplyFor.vue
+++ b/front/src/views/home/AbilityToApplyFor.vue
@@ -1,6 +1,10 @@
 <template>
-  <div class="ability-to-apply-for">
-    <div class="title">申请能力</div>
+  <div class="ability-to-apply-for" :class="{ all: falg }">
+    <div class="title">
+      <span>申请能力</span>
+      <span class="btn" @click="falg = !falg" v-show="!falg">展开</span>
+      <span class="btn" @click="falg = !falg" v-show="falg">收起</span>
+    </div>
     <div
       v-for="(item, index) in dataForm"
       :key="index"
@@ -12,20 +16,38 @@
       </div>
       <template v-for="val in item.arr" :key="val.resourceId">
         <div class="item">
-          <div class="name">
-            <span>{{ val.resourceName }}</span>
-            <span>{{ val.type }}</span>
-          </div>
-          <div class="description">
-            {{
-              val.description ||
-              (val.note1 &&
-                JSON.parse(val.note1)[0].channelName +
-                  '等' +
-                  JSON.parse(val.note1).length +
-                  '个摄像头') ||
-              '--'
-            }}
+          <div
+            class="tx"
+            :class="
+              val.type == '基础设施'
+                ? 'sxt'
+                : val.componentType == '智能算法'
+                ? 'znsf'
+                : val.componentType == '图层服务'
+                ? 'tcfw'
+                : val.componentType == '开发组件'
+                ? 'kfzj'
+                : val.componentType == '业务组件'
+                ? 'ywzj'
+                : ''
+            "
+          ></div>
+          <div class="text">
+            <div class="name">
+              <span>{{ val.resourceName }}</span>
+              <span>{{ val.type }}</span>
+            </div>
+            <div class="description">
+              {{
+                val.description ||
+                (val.note1 &&
+                  JSON.parse(val.note1)[0].channelName +
+                    '等' +
+                    JSON.parse(val.note1).length +
+                    '个摄像头') ||
+                '--'
+              }}
+            </div>
           </div>
           <div class="remove" @click="removeFunction(val)"></div>
         </div>
@@ -35,27 +57,29 @@
 </template>
 
 <script setup>
-  import { useRouter } from 'vue-router'
+  // import { useRouter } from 'vue-router'
   import { message } from 'ant-design-vue'
   import { ref, defineProps } from 'vue'
-  import mybus from '@/myplugins/mybus'
+  // import mybus from '@/myplugins/mybus'
   const props = defineProps({
     dataList: { type: Array, default: null },
   })
+  const falg = ref(false)
   let dataForm = ref([])
   // eslint-disable-next-line vue/no-setup-props-destructure
   dataForm.value = props.dataList
-  const router = useRouter()
-  const arr =
-    router.currentRoute.value.query.name instanceof Array
-      ? router.currentRoute.value.query.name
-      : [router.currentRoute.value.query.name]
-  const dataResourceId = router.currentRoute.value.query.resourceId
+  console.log(dataForm.value)
+  // const router = useRouter()
+  // const arr =
+  //   router.currentRoute.value.query.name instanceof Array
+  //     ? router.currentRoute.value.query.name
+  //     : [router.currentRoute.value.query.name]
+  // const dataResourceId = router.currentRoute.value.query.resourceId
 
-  const depList = ref({
-    Name: [],
-    depID: [],
-  })
+  // const depList = ref({
+  //   Name: [],
+  //   depID: [],
+  // })
   //移除方法
   const removeFunction = (data) => {
     dataForm.value.map((val) => {
@@ -71,25 +95,26 @@
 
 <style scoped lang="less">
   .ability-to-apply-for {
+    height: 2.9rem;
+    overflow: hidden;
     .title {
       font-size: 0.16rem;
       color: #212121;
       border-bottom: 0.01rem #dddee1 solid;
       padding-bottom: 0.1rem;
       margin-bottom: 0.2rem;
+      display: flex;
+      justify-content: space-between;
     }
     .ability-to-apply-for-content {
-      // margin-bottom: 0.3rem;
-      // border-bottom: 0.01rem #dddee1 solid;
-      // padding-bottom: 0.3rem;
       padding-right: 0.5rem;
       position: relative;
       .dep-name {
         color: #0558e1;
-        font-size: 0.18rem;
+        font-size: 0.22rem;
         display: flex;
         align-items: center;
-        line-height: 0.18rem;
+        line-height: 0.22rem;
         margin-bottom: 0.2rem;
         span {
           display: inline-block;
@@ -104,14 +129,19 @@
         padding-bottom: 0.1rem;
         margin-bottom: 0.1rem;
         border-bottom: 1px solid #dddee1;
-        position: relative;
+        display: flex;
+        align-items: center;
+        .text {
+          margin-left: 0.2rem;
+          width: 8.8rem;
+        }
       }
       .name {
         margin-bottom: 0.2rem;
         span:first-child {
           display: inline-block;
           margin-right: 0.08rem;
-          font-size: 0.2rem;
+          font-size: 0.18rem;
           color: #000000;
         }
         span:last-child {
@@ -122,16 +152,13 @@
         }
       }
       .description {
-        width: 10rem;
+        width: 8.8rem;
         color: rgba(0, 0, 0, 0.45);
       }
       .remove {
+        margin-left: 0.1rem;
         width: 0.32rem;
         height: 0.32rem;
-        position: absolute;
-        right: 0;
-        top: 50%;
-        margin-top: -0.16rem;
         background: url('~@/assets/home/remove.png') no-repeat;
         background-size: cover;
         cursor: pointer;
@@ -142,4 +169,37 @@
       }
     }
   }
+  .all {
+    height: unset;
+    min-height: 2.9rem;
+  }
+  .btn {
+    cursor: pointer;
+  }
+  .tx {
+    display: inline-block;
+    width: 0.8rem;
+    height: 0.8rem;
+    margin-left: 0.1rem;
+  }
+  .sxt {
+    background: url('~@/assets/home/sxt_square.png') no-repeat;
+    background-size: 100%;
+  }
+  .znsf {
+    background: url('~@/assets/home/znsf_square.png') no-repeat;
+    background-size: 100%;
+  }
+  .tcfw {
+    background: url('~@/assets/home/tcfw_square.png') no-repeat;
+    background-size: 100%;
+  }
+  .kfzj {
+    background: url('~@/assets/home/kfzj_square.png') no-repeat;
+    background-size: 100%;
+  }
+  .ywzj {
+    background: url('~@/assets/home/ywzj_square.png') no-repeat;
+    background-size: 100%;
+  }
 </style>
diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index b2645069..71e324d8 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -1053,7 +1053,7 @@
             paramsGetResources.pageNum = 1
           }
           let dataResourceParams = {
-            serviceName: paramsGetResources.name, //资源名称
+            serviceName: paramsGetResources.name || '', //资源名称
             orderField: whoShow1.value.itShowQingDao
               ? paramsGetResources.orderField == 'applyCount'
                 ? 'syqk'
diff --git a/front/src/views/home/apply.vue b/front/src/views/home/apply.vue
index ba4e45b2..44123dad 100644
--- a/front/src/views/home/apply.vue
+++ b/front/src/views/home/apply.vue
@@ -118,9 +118,10 @@
                   name="applicationBackground"
                   :rules="[{ required: true, message: '请输入应用背景' }]"
                 >
-                  <a-input
+                  <a-textarea
                     placeholder="请输入应用背景"
                     v-model:value="formName.applicationBackground"
+                    :rows="4"
                   />
                 </a-form-item>
               </div>
@@ -130,9 +131,10 @@
                   name="effectWish"
                   :rules="[{ required: true, message: '请输入期望效果' }]"
                 >
-                  <a-input
+                  <a-textarea
                     placeholder="请输入期望效果"
                     v-model:value="formName.effectWish"
+                    :rows="4"
                   />
                 </a-form-item>
               </div>
@@ -173,7 +175,7 @@
                 </a-upload>
               </a-form-item>
 
-              <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+              <div class="bottom-btn">
                 <a-button
                   style="
                     width: 80px;
@@ -211,7 +213,7 @@
                 >
                   提交申请
                 </a-button>
-              </a-form-item>
+              </div>
             </a-form>
           </div>
           <div class="success" v-else>
@@ -265,11 +267,34 @@
     setup() {
       const router = useRouter()
       const disabled = ref(false)
+      const list = ref(JSON.parse(localStorage.getItem('applyList')))
+      const num = ref(0)
+      list.value.map((item) => {
+        if (item.checkedList) {
+          console.log(item)
+          num.value += Number(item.checkedList.length)
+        }
+      })
+      console.log(
+        'list',
+        list.value
+        // list.value[0].children.filter(
+        //   (val) => val.id == list.value[0].checkedList[0]
+        // )[0].resourceName
+      )
       const baseURL = window.SITE_CONFIG.apiURL
       let record = ref('1')
       const text = ref('')
       const formName = reactive({
-        title: '', // 标题
+        title: list.value[0].children
+          ? list.value[0].children
+              .filter((val) => val.id == list.value[0].checkedList[0])[0]
+              .resourceName.concat(
+                list.value[0].checkedList.length > 0
+                  ? '等能力申请' + num.value + '个'
+                  : '能力申请'
+              )
+          : list.value[0].arr[0].resourceName.concat('能力申请'), // 标题
         applicationSystem: [], // 应用系统
         applicationScene: [], // 应用场景
         applicationBackground: '', // 应用背景
@@ -292,7 +317,6 @@
           formName.unit = res.data.data.deptName
         })
       })
-      const list = ref(JSON.parse(localStorage.getItem('applyList')))
       // console.log('本地存储====================》', list.value)
       const businessKey = ref(router.currentRoute.value.query.id)
       const taskId = ref(router.currentRoute.value.query.taskId)
@@ -423,7 +447,7 @@
                 applySuccess.value = false
                 message.success('操作成功！')
                 console.log('能力申请================>', res)
-                if (ids && ids.length>0) {
+                if (ids && ids.length > 0) {
                   sgcDel({ ids: ids }).then((res) => {
                     if (res.data.msg === 'success') {
                       mybus.emit('getSgcNum')
@@ -504,6 +528,7 @@
         },
       ])
       const systemOptions = ref([])
+      const systemOptions2 = ref([])
 
       const handleChange = (info) => {
         if (info.file.status !== 'uploading') {
@@ -536,83 +561,50 @@
         return isPNG || Upload.LIST_IGNORE
       }
       const fileList = ref([])
-      //删除改变arr
-      // mybus.on('reomveOldData', (item) => {
-      //   debugger
-      //   arr = []
-      //   formName.system = []
-      //   record.value = record.value + '1'
-      //   arr = item.Name
-      //   // dataResourceId = item.depID
-      //   if (arr && arr.length !== 0) {
-      //     disabled.value = true
-      //     let str = ''
-      //     arr.forEach((val, index) => {
-      //       str += val
-      //       if (index < arr.length - 1) {
-      //         str += '、'
-      //       }
-      //     })
-      //     formName.formNameSystem = str
-      //   }
-      //   arr.forEach((val, index) => {
-      //     formName.system.push({
-      //       resourceName: val,
-      //       // resourceId: dataResourceId[index],
-      //     })
-      //   })
-      // })
       // 应用系统下拉
-      const flag = ref(true)
       const systemHandleChange = (value) => {
         console.log(`selected ${value}`)
       }
       const systemHandleSearch = (value) => {
         console.log(`search ${value}`)
         text.value = value
-        systemOptions.value = []
-        window.setTimeout(() => {
-          if (flag.value && text.value == value && text.value !== '') {
-            console.log('1秒未输入~~~~~~~~~~~~~~~~~~~~~~~~~~')
-            pageWithAttrs({
-              pageNum: 99999,
-              pageSize: 5,
-              type: '应用资源',
-              name: text.value,
-              infoList: [],
-            }).then((res) => {
-              if (res.data.code == 0) {
-                if (res.data.data.records.length == 0) {
-                  message.warning('该关键词，暂无应用资源！')
-                } else {
-                  res.data.data.records.map((val) => {
-                    systemOptions.value.push({
-                      value: val.name,
-                      label: val.name,
-                    })
-                  })
-                  console.log(
-                    '第一次获取===================>',
-                    systemOptions.value
-                  )
-                }
-              } else {
-                message.error('获取数据失败!')
-              }
-            })
-          }
-        }, 2000)
+        systemOptions.value = systemOptions2.value.filter(
+          (item) => item.label.search(text.value) > -1
+        )
       }
-
+      pageWithAttrs({
+        pageNum: 1,
+        pageSize: 99999,
+        type: '应用资源',
+        name: '',
+        infoList: [],
+      }).then((res) => {
+        if (res.data.code == 0) {
+          if (res.data.data.records.length == 0) {
+            message.warning('该关键词，暂无应用资源！')
+          } else {
+            res.data.data.records.map((val) => {
+              systemOptions2.value.push({
+                value: val.name,
+                label: val.name,
+              })
+            })
+            // console.log('第一次获取===================>', systemOptions2.value)
+          }
+        } else {
+          message.error('应用系统获取数据失败!')
+        }
+      })
       const handleBlur = () => {
         console.log('blur')
-        flag.value = false
       }
 
       const handleFocus = () => {
         console.log('focus')
-        flag.value = true
-        systemOptions.value = []
+        // console.log(formName.applicationSystem)
+        // formName.applicationSystem = []
+        systemOptions.value = systemOptions2.value
+        // systemOptions.value = []
       }
 
       // const filterOption = (input, option) => {
@@ -727,4 +719,13 @@
       flex-wrap: nowrap;
     }
   }
+  textarea {
+    resize: none;
+    font-size: 14px;
+  }
+  .bottom-btn {
+    display: flex;
+    justify-content: center;
+    // position: fixed;
+  }
 </style>
diff --git a/front/src/views/home/components/header.vue b/front/src/views/home/components/header.vue
index 19bc6095..2d232f3f 100644
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@@ -6,7 +6,10 @@
       props.showView === 'algorithm-details' ? 'blue' : '',
     ]"
   >
-    <div class="name">城市云脑能力管理中心</div>
+    <div class="name">
+      <div class="name-bg"></div>
+      城市云脑通用能力服务平台
+    </div>
     <div
       v-for="item in navList"
       :key="item.key"
@@ -17,6 +20,7 @@
       {{ item.name }}
     </div>
     <a-badge :count="sgcNum">
+    <!-- 购物车 -->
       <svg
         t="1650455446850"
         class="icon"
@@ -37,6 +41,7 @@
       <!-- <a-avatar shape="square" size="large" /> -->
     </a-badge>
     <a-badge :count="mynoticeNum" style="margin-left: 0.2rem">
+    <!-- 消息提醒 -->
       <svg
         t="1654051054113"
         class="icon2"
@@ -256,12 +261,13 @@
       sgcNum.value = res.data.data.count
     })
     getMynotice()
+    // 解决
     const mynoticeDom = document.querySelector('.icon2')
     const mynotice = document.querySelector('.mynotice')
     if (mynoticeDom) {
       mynoticeDom.addEventListener('mouseover', () => {
         mynoticeFlag.value = true
-        document.documentElement.style.overflowY = 'hidden'
+        // document.documentElement.style.overflowY = 'hidden'
       })
       mynoticeDom.addEventListener('mouseout', () => {
         mynoticeFlag.value = false
@@ -271,7 +277,7 @@
     if (mynotice) {
       mynotice.addEventListener('mouseover', () => {
         mynoticeFlag.value = true
-        document.documentElement.style.overflowY = 'hidden'
+        // document.documentElement.style.overflowY = 'hidden'
       })
       mynotice.addEventListener('mouseout', () => {
         mynoticeFlag.value = false
@@ -318,6 +324,15 @@
       font-size: 0.22rem;
       font-family: header-typeface;
       margin-right: 0.2rem;
+      display: flex;
+      align-items: center;
+      .name-bg {
+        height: 0.6rem;
+        width: 0.6rem;
+        background: url('~@/assets/newHome/newHome-title-bg.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 a17ce205..724084a0 100644
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@@ -37,8 +37,11 @@
           :class="
             item.type == '应用资源'
               ? 'yyzy'
-              : item.type == '数据资源'
+              : !item.type
               ? 'sjzy'
+              : !item.infoList ||
+                !item.infoList.filter((val) => val.attrType == '组件类型')[0]
+              ? 'znsf'
               : item.infoList &&
                 item.infoList.filter((val) => val.attrType == '组件类型')[0]
                   .attrValue == '智能算法'
@@ -123,7 +126,10 @@
               <span>{{ item.deptName || '--' }}</span>
             </div>
             <div v-if="selectCardsname !== '基础设施'">
-              {{ item.description || '--' }}
+              <a-tooltip>
+                <template #title>{{ item.description }}</template>
+                {{ item.description || '--' }}
+              </a-tooltip>
             </div>
           </div>
           <div class="bottom" v-if="selectCardsname !== '基础设施'">
@@ -131,7 +137,7 @@
               <div v-if="selectCardsname !== '数据资源'">
                 浏览量：{{ item.visits || 0 }}次
               </div>
-              <div>申请量：{{ item.applyCount || 0 }}次</div>
+              <div>申购量：{{ item.applyCount || 0 }}次</div>
               <div v-if="selectCardsname === '数据资源'">
                 数据量：{{ item.sjlCount || 0 }}
               </div>
@@ -191,7 +197,7 @@
               <a-button
                 type="primary"
                 @click="toView('details', item)"
-                v-if="whoShow1.itShowQingDao"
+                v-if="!whoShow1.itShowBaoTou"
               >
                 查看详情
               </a-button>
@@ -418,10 +424,15 @@
       }
       function toView(type, item) {
         if (props.selectCardsname == '数据资源') {
-          window.open(
-            'http://15.72.158.81/web/ZWXXSQ/bm/MuluDetail.aspx?zyguid=' +
-              item.guid
-          )
+          if (whoShow1.itShowQingDao) {
+            window.open(
+              'http://15.72.158.81/web/ZWXXSQ/bm/MuluDetail.aspx?zyguid=' +
+                item.guid
+            )
+          } else {
+             window.open(
+            'http://10.134.135.24:30090/#/home')
+          }
         } else {
           if (type === 'apply') {
             console.log('一键申请===================>', item)
@@ -437,6 +448,9 @@
                       resourceName: item.name,
                       time: item.createDate,
                       type: item.type,
+                      componentType: item.infoList.filter(
+                        (val) => val.attrType == '组件类型'
+                      )[0].attrValue,
                     },
                   ],
                   deptId: item.deptId,
@@ -606,340 +620,340 @@
   }
 </script>
 <style scoped lang="less">
-  #search-result-list-container {
-    width: 1088px;
-    padding: 0 20px;
-    background: #f3f5f9;
+#search-result-list-container {
+  width: 1088px;
+  padding: 0 20px;
+  background: #f3f5f9;
 
-    .detail-content {
-      // 超出
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 130px;
-      display: inline-block;
+  .detail-content {
+    // 超出
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 130px;
+    display: inline-block;
+  }
+
+  .shai-xuan {
+    width: 1047px;
+    height: 36px;
+    // margin: 11px 0 20px;
+    // background: #e5f2ff;
+    // padding-left: 20px;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .circle {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background-color: #0087ff;
+      text-align: center;
+      color: #fff;
+      line-height: 16px;
+      margin-right: 21px;
     }
 
-    .shai-xuan {
-      width: 1047px;
-      height: 36px;
-      // margin: 11px 0 20px;
-      // background: #e5f2ff;
-      // padding-left: 20px;
-      display: flex;
-      align-items: center;
-      position: relative;
+    .result {
+      font-size: 14px;
+      font-weight: 500;
+      color: #212121;
 
-      .circle {
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background-color: #0087ff;
-        text-align: center;
-        color: #fff;
-        line-height: 16px;
-        margin-right: 21px;
-      }
-
-      .result {
-        font-size: 14px;
-        font-weight: 500;
-        color: #212121;
-
-        span {
-          font-size: 18px;
-          color: #0087ff;
-        }
-      }
-
-      .condition {
-        position: absolute;
-        right: 20px;
-        top: 10px;
-
-        ul li {
-          list-style-type: none;
-        }
-
-        ul {
-          display: flex;
-
-          li {
-            width: 90px;
-            height: 12px;
-            text-align: center;
-            cursor: pointer;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            .arrow {
-              display: inline-block;
-              width: 12px;
-              height: 12px;
-              background: url('~@/assets/newHome/arrow.png');
-              margin-left: 10px;
-            }
-
-            .down {
-              background: url('~@/assets/newHome/down.png');
-              margin-top: 6px;
-            }
-          }
-        }
+      span {
+        font-size: 18px;
+        color: #0087ff;
       }
     }
 
-    .result-list {
-      width: 1048px;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      border-bottom: 1px rgba(150, 144, 144, 0.3) solid;
-      border-top: 1px rgba(150, 144, 144, 0.3) solid;
-      padding: 10px 0;
+    .condition {
+      position: absolute;
+      right: 20px;
+      top: 10px;
 
-      .item {
-        width: 100%;
-        margin-top: 10px;
+      ul li {
+        list-style-type: none;
+      }
+
+      ul {
         display: flex;
-        align-items: center;
 
-        .left {
-          display: inline-block;
-          width: 120px;
-          height: 110px;
-          margin-right: 16px;
-        }
-
-        .right {
-          width: 100%;
-        }
-
-        .yyzy {
-          background: url('~@/assets/home/yyzy_square.png') no-repeat;
-          background-size: 100%;
-        }
-
-        .sjzy {
-          background: url('~@/assets/home/sjzy_square.png') no-repeat;
-          background-size: 100%;
-        }
-        .znsf {
-          background: url('~@/assets/home/znsf_square.png') no-repeat;
-          background-size: 100%;
-        }
-        .tcfw {
-          background: url('~@/assets/home/tcfw_square.png') no-repeat;
-          background-size: 100%;
-        }
-        .kfzj {
-          background: url('~@/assets/home/kfzj_square.png') no-repeat;
-          background-size: 100%;
-        }
-        .ywzj {
-          background: url('~@/assets/home/ywzj_square.png') no-repeat;
-          background-size: 100%;
-        }
-
-        .header {
+        li {
+          width: 90px;
+          height: 12px;
+          text-align: center;
+          cursor: pointer;
           display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin: 0 10px 0 0;
-
-          .header-right {
-            display: flex;
-            font-size: 14px;
-            color: #212121;
-
-            span {
-              font-size: 14px;
-              color: #212121;
-            }
-
-            div {
-              margin-right: 24px;
-            }
-          }
-
-          .header-right:last-child {
-            div {
-              margin-right: 16px;
-            }
-          }
-
-          span {
-            font-size: 20px;
-            font-weight: 600;
-            // color: #0087ff;
-          }
-        }
-
-        .dec {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          // white-space: nowrap;
-          color: #0058e1;
-          display: flex;
-          margin-top: 10px;
-
-          div {
-            margin-right: 10px;
-            background: rgba(0, 88, 225, 0.1);
-            padding-left: 10px;
-            padding-right: 10px;
-          }
-
-          div:nth-child(3) {
-            max-width: 200px;
-            display: -webkit-box;
-            /*设置为弹性盒子*/
-            -webkit-line-clamp: 1;
-            /*最多显示3行*/
-            overflow: hidden;
-            /*超出隐藏*/
-            text-overflow: ellipsis;
-            /*超出显示为省略号*/
-            -webkit-box-orient: vertical;
-          }
-        }
-
-        .btn {
-          display: flex;
-          justify-content: space-between;
-          font-size: 14px;
-          margin: 5px 0;
-
-          // .left {
-          //   width: 600px;
-          //   display: flex;
-          //   justify-content: space-between;
-          //   flex-wrap: wrap;
-          //   & > div {
-          //     width: 300px;
-          //     & > span {
-          //       color: #0087ff;
-          //       font-weight: 600;
-          //     }
-          //   }
-          // }
-          .right {
-            flex: 1;
-            display: flex;
-            justify-content: flex-end;
-            margin: 0 10px;
-            align-items: center;
-
-            .shopping {
-              span {
-                display: inline-block;
-                height: 32px;
-                width: 32px;
-                margin-right: 10px;
-                margin-top: 5px;
-              }
-
-              .shopping-on {
-                background: url('~@/assets/newHome/shopping-on.png');
-                cursor: pointer;
-              }
-
-              .shopping-down {
-                background: url('~@/assets/newHome/shopping-down.png');
-              }
-            }
-
-            .pk-on {
-              display: inline-block;
-              height: 32px;
-              width: 32px;
-              margin-left: 10px;
-              margin-right: 10px;
-              margin-top: 5px;
-              background: url('~@/assets/newHome/pk-on.png');
-              cursor: pointer;
-            }
-
-            .sc {
-              // margin-top: 4px;
-              cursor: pointer;
-              display: flex;
-              align-items: center;
-
-              .sc-down {
-                display: inline-block;
-                height: 32px;
-                width: 32px;
-                background: url('~@/assets/newHome/sc-down.png');
-              }
-
-              .sc-on {
-                display: inline-block;
-                height: 32px;
-                width: 32px;
-                background: url('~@/assets/newHome/sc-on.png');
-              }
-            }
-
-            .ant-btn {
-              background: transparent;
-              background: #0058e1;
-              color: white;
-              width: 80px;
-              height: 32px;
-              font-weight: 600;
-              border-radius: 2px;
-              text-align: center;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              margin-left: 10px;
-            }
-
-            .ant-btn:last-child {
-              background: #0058e1;
-              color: white;
-            }
-          }
-        }
-
-        .bottom {
-          display: flex;
-          justify-content: space-between;
-          margin-top: 10px;
+          justify-content: center;
           align-items: center;
 
-          & > div {
-            display: flex;
-            align-items: center;
-
-            & > div {
-              margin: 0 10px;
-            }
+          .arrow {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            background: url('~@/assets/newHome/arrow.png');
+            margin-left: 10px;
           }
 
-          .pingfen {
-            :deep(span) {
-              display: flex;
-              align-items: center;
-
-              :deep(ul) {
-                display: flex;
-                align-items: center;
-
-                :deep(.ant-rate-star:not(:last-child)) {
-                  margin-right: 4px;
-                }
-              }
-            }
+          .down {
+            background: url('~@/assets/newHome/down.png');
+            margin-top: 6px;
           }
         }
       }
-
-      .item:nth-of-type(1) {
-        margin-top: 0;
-      }
     }
   }
+
+  .result-list {
+    width: 1048px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    border-bottom: 1px rgba(150, 144, 144, 0.3) solid;
+    border-top: 1px rgba(150, 144, 144, 0.3) solid;
+    padding: 10px 0;
+
+    .item {
+      width: 100%;
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+
+      .left {
+        display: inline-block;
+        width: 120px;
+        height: 110px;
+        margin-right: 16px;
+      }
+
+      .right {
+        width: 100%;
+      }
+
+      .yyzy {
+        background: url('~@/assets/home/yyzy_square.png') no-repeat;
+        background-size: 100%;
+      }
+
+      .sjzy {
+        background: url('~@/assets/home/sjzy_square.png') no-repeat;
+        background-size: 100%;
+      }
+      .znsf {
+        background: url('~@/assets/home/znsf_square.png') no-repeat;
+        background-size: 100%;
+      }
+      .tcfw {
+        background: url('~@/assets/home/tcfw_square.png') no-repeat;
+        background-size: 100%;
+      }
+      .kfzj {
+        background: url('~@/assets/home/kfzj_square.png') no-repeat;
+        background-size: 100%;
+      }
+      .ywzj {
+        background: url('~@/assets/home/ywzj_square.png') no-repeat;
+        background-size: 100%;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 10px 0 0;
+
+        .header-right {
+          display: flex;
+          font-size: 14px;
+          color: #212121;
+
+          span {
+            font-size: 14px;
+            color: #212121;
+          }
+
+          div {
+            margin-right: 24px;
+          }
+        }
+
+        .header-right:last-child {
+          div {
+            margin-right: 16px;
+          }
+        }
+
+        span {
+          font-size: 20px;
+          font-weight: 600;
+          // color: #0087ff;
+        }
+      }
+
+      .dec {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        // white-space: nowrap;
+        color: #0058e1;
+        display: flex;
+        margin-top: 10px;
+
+        div {
+          margin-right: 10px;
+          background: rgba(0, 88, 225, 0.1);
+          padding-left: 10px;
+          padding-right: 10px;
+        }
+
+        div:nth-child(3) {
+          max-width: 200px;
+          display: -webkit-box;
+          /*设置为弹性盒子*/
+          -webkit-line-clamp: 1;
+          /*最多显示3行*/
+          overflow: hidden;
+          /*超出隐藏*/
+          text-overflow: ellipsis;
+          /*超出显示为省略号*/
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      .btn {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+        margin: 5px 0;
+
+        // .left {
+        //   width: 600px;
+        //   display: flex;
+        //   justify-content: space-between;
+        //   flex-wrap: wrap;
+        //   & > div {
+        //     width: 300px;
+        //     & > span {
+        //       color: #0087ff;
+        //       font-weight: 600;
+        //     }
+        //   }
+        // }
+        .right {
+          flex: 1;
+          display: flex;
+          justify-content: flex-end;
+          margin: 0 10px;
+          align-items: center;
+
+          .shopping {
+            span {
+              display: inline-block;
+              height: 32px;
+              width: 32px;
+              margin-right: 10px;
+              margin-top: 5px;
+            }
+
+            .shopping-on {
+              background: url('~@/assets/newHome/shopping-on.png');
+              cursor: pointer;
+            }
+
+            .shopping-down {
+              background: url('~@/assets/newHome/shopping-down.png');
+            }
+          }
+
+          .pk-on {
+            display: inline-block;
+            height: 32px;
+            width: 32px;
+            margin-left: 10px;
+            margin-right: 10px;
+            margin-top: 5px;
+            background: url('~@/assets/newHome/pk-on.png');
+            cursor: pointer;
+          }
+
+          .sc {
+            // margin-top: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+
+            .sc-down {
+              display: inline-block;
+              height: 32px;
+              width: 32px;
+              background: url('~@/assets/newHome/sc-down.png');
+            }
+
+            .sc-on {
+              display: inline-block;
+              height: 32px;
+              width: 32px;
+              background: url('~@/assets/newHome/sc-on.png');
+            }
+          }
+
+          .ant-btn {
+            background: transparent;
+            background: #0058e1;
+            color: white;
+            width: 80px;
+            height: 32px;
+            font-weight: 600;
+            border-radius: 2px;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 10px;
+          }
+
+          .ant-btn:last-child {
+            background: #0058e1;
+            color: white;
+          }
+        }
+      }
+
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+        align-items: center;
+
+        & > div {
+          display: flex;
+          align-items: center;
+
+          & > div {
+            margin: 0 10px;
+          }
+        }
+
+        .pingfen {
+          :deep(span) {
+            display: flex;
+            align-items: center;
+
+            :deep(ul) {
+              display: flex;
+              align-items: center;
+
+              :deep(.ant-rate-star:not(:last-child)) {
+                margin-right: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .item:nth-of-type(1) {
+      margin-top: 0;
+    }
+  }
+}
 </style>
diff --git a/front/src/views/home/details.vue b/front/src/views/home/details.vue
index ff5c7ec5..0b4a51e6 100644
--- a/front/src/views/home/details.vue
+++ b/front/src/views/home/details.vue
@@ -91,7 +91,7 @@
       const router = useRouter()
       const id = router.currentRoute.value.query.id
       const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-      let showView = ref('details-view')
+      let showView = ref('')
       const init = () => {
         if (id) {
           selectOne(id).then((res) => {
diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
index 342cc39d..7060d2e3 100644
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@@ -61,9 +61,9 @@
           </a-button>
         </div>
         <i class="boundary"></i>
-        <!-- 添加至购物车 -->
+        <!-- 添加至申购车 -->
         <a-button type="primary" @click="addShoppingCart" class="buttonAdd">
-          添加至购物车
+          添加至申购车
         </a-button>
         <!-- 一键申请 -->
         <a-button type="primary" @click="apply" class="buttonAdd">
@@ -253,6 +253,8 @@
   let tableHeight = ref('600')
   //tab切换点击事件
   const tabClick = (indexFather, name) => {
+    selectedRowKeys.value = []
+    selectedList.value = []
     if (clickList.value[indexFather].content.indexOf(name) != -1) {
       if (name == '视频资源') {
         tableHeight.value = 330
@@ -404,16 +406,20 @@
   }
   //加入申购车
   const addShoppingCart = () => {
-    sgcInsert({
-      delFlag: '0',
-      resourceId: '8888888880000000001',
-      note1: selectedList.value,
-      // userId: userId.value,
-    }).then((res) => {
-      console.log(res)
-      message.success('添加申购车成功！')
-      mybus.emit('getSgcNum')
-    })
+    if (selectedList.value.length > 0) {
+      sgcInsert({
+        delFlag: '0',
+        resourceId: '8888888880000000001',
+        note1: selectedList.value,
+        // userId: userId.value,
+      }).then((res) => {
+        console.log(res)
+        message.success('添加申购车成功！')
+        mybus.emit('getSgcNum')
+      })
+    } else {
+      message.error('请选择需要添加申购车的数据')
+    }
   }
   // 表格
   const dataSource = ref([])
diff --git a/front/src/views/newHome/components/CapabilityConvergence.vue b/front/src/views/newHome/components/CapabilityConvergence.vue
index 4c35dc3b..9b195a16 100644
--- a/front/src/views/newHome/components/CapabilityConvergence.vue
+++ b/front/src/views/newHome/components/CapabilityConvergence.vue
@@ -119,7 +119,7 @@
     paramsGetResources.type = type
     if (type === '数据资源' && !whoShow1.value.itShowBaoTou) {
       getDataResource({
-        serviceName: paramsGetResources.name, //资源名称
+        serviceName: paramsGetResources.name || '', //资源名称
         orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', //排序字段
         orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
         pageNum: paramsGetResources.pageNum, //页码
diff --git a/front/src/views/newHome/components/Header.vue b/front/src/views/newHome/components/Header.vue
index 350f6599..10826d5b 100644
--- a/front/src/views/newHome/components/Header.vue
+++ b/front/src/views/newHome/components/Header.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="home-header" :class="scrollTop > 500 ? 'white' : ''">
-    <div class="name">城市云脑能力管理中心</div>
+    <div class="name">
+      <div class="name-bg"></div>
+      城市云脑通用能力服务平台
+    </div>
     <div
       v-for="item in navList"
       :key="item.key"
@@ -133,6 +136,15 @@
       font-size: 0.22rem;
       font-family: header-typeface;
       margin-right: 0.2rem;
+      display: flex;
+      align-items: center;
+      .name-bg {
+        height: 0.6rem;
+        width: 0.6rem;
+        background: url('~@/assets/newHome/newHome-title-bg.png') no-repeat;
+        background-size: 100%;
+        margin-right: 0.15rem;
+      }
     }
     .nav {
       width: 1.44rem;
diff --git a/front/src/views/newHome/components/Navigation.vue b/front/src/views/newHome/components/Navigation.vue
index 8457eb4e..71f12971 100644
--- a/front/src/views/newHome/components/Navigation.vue
+++ b/front/src/views/newHome/components/Navigation.vue
@@ -80,26 +80,32 @@
             <a-select
               ref="select"
               style="width: 1.4rem; height: 0.4rem"
-              v-for="item in fabubumen"
-              :key="item"
-              v-model="item.value"
               placeholder="请选择省份"
               @change="qushijiedao"
+              :key="fabubumen"
             >
-              <a-select-option :value="item.name">
+              <a-select-option
+                :value="item.name"
+                v-model="item.value"
+                v-for="item in fabubumen"
+                :key="item"
+              >
                 {{ item.name }}
               </a-select-option>
             </a-select>
             <a-select
               ref="select"
               style="width: 1.4rem; height: 0.4rem"
-              v-for="item in shi"
-              :key="item"
-              v-model:value="item.value"
               @change="qushijiedao"
               placeholder="请选择市"
+              :key="shi"
             >
-              <a-select-option :value="item.name">
+              <a-select-option
+                :value="item.name"
+                v-model:value="item.value"
+                v-for="item in shi"
+                :key="item"
+              >
                 {{ item.name }}
               </a-select-option>
             </a-select>
@@ -167,9 +173,9 @@
       id: '100001',
     },
   ])
-  let shi = ref(['请先选择省份'])
-  let qu = ref(['请先选择市'])
-  let jiedao = ref(['请先选择区'])
+  let shi = ref([])
+  let qu = ref([])
+  let jiedao = ref([])
   function qushijiedao(value) {
     let danwei = value.substr(-1)
     // name.substr(-1)
diff --git a/front/src/views/newHome/components/Navigation2.vue b/front/src/views/newHome/components/Navigation2.vue
index 37f4c50f..6fe56aab 100644
--- a/front/src/views/newHome/components/Navigation2.vue
+++ b/front/src/views/newHome/components/Navigation2.vue
@@ -99,6 +99,8 @@
       path: '/DetailsPageconetent',
       query: {
         select: type,
+        tecHnosphere: '',
+        appLiCation: ''
       },
     })
   }
diff --git a/front/src/views/newHome/index.vue b/front/src/views/newHome/index.vue
index 75fcc0ee..3b524c7e 100644
--- a/front/src/views/newHome/index.vue
+++ b/front/src/views/newHome/index.vue
@@ -1,3 +1,10 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-23 16:41:49
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-04 17:53:27
+ * @Description: 告诉大家这是什么
+-->
 <template>
   <div class="newHome">
     <new-home-header></new-home-header>
@@ -6,6 +13,7 @@
     <capability-convergence></capability-convergence>
     <popular-ability></popular-ability>
     <latest-capabilities></latest-capabilities>
+    <resource-aggregation></resource-aggregation>
     <recommendation-ability></recommendation-ability>
     <work-dynamics></work-dynamics>
     <home-footer></home-footer>
@@ -18,6 +26,7 @@
   import CapabilityConvergence from '@/views/newHome/components/CapabilityConvergence'
   import PopularAbility from '@/views/newHome/components/PopularAbility'
   import LatestCapabilities from '@/views/newHome/components/LatestCapabilities'
+  import ResourceAggregation from '@/views/abilityStatistics/components/ResourceAggregation.vue'
   import RecommendationAbility from '@/views/newHome/components/RecommendationAbility'
   import WorkDynamics from '@/views/newHome/components/WorkDynamics'
   import HomeFooter from '@/views/newHome/components/Footer'
@@ -37,4 +46,7 @@
       font-family: num-typeface;
     }
   }
+  .resource-aggregation {
+    background: #fff;
+  }
 </style>
diff --git a/front/src/views/personalCenter/components/Collection.vue b/front/src/views/personalCenter/components/Collection.vue
index e7041a24..0490c147 100644
--- a/front/src/views/personalCenter/components/Collection.vue
+++ b/front/src/views/personalCenter/components/Collection.vue
@@ -50,7 +50,7 @@
               >
                 {{ item.name }}
               </span>
-              <span class="time">收藏时间：{{ item.createDate }}</span>
+              <span class="time">收藏时间：{{ item.updateDate }}</span>
               <svg
                 t="1652233950228"
                 class="icon"
@@ -238,6 +238,7 @@
           type: val.resourceDTO.type,
           resourceId: val.resourceId,
           createDate: val.createDate,
+          updateDate: val.updateDate,
           description: val.resourceDTO.description,
           delFlag: val.resourceDTO.delFlag,
         }
diff --git a/front/src/views/personalCenter/components/MyApply.vue b/front/src/views/personalCenter/components/MyApply.vue
index 08f0d019..3b50a675 100644
--- a/front/src/views/personalCenter/components/MyApply.vue
+++ b/front/src/views/personalCenter/components/MyApply.vue
@@ -49,7 +49,7 @@
             <template #title>{{ item.name }}</template>
             <div class="content-body-title">
               <span
-                v-if="item.name === '申请摄像头列表'"
+                v-if="item.name === '申请摄像头列表' && item.ended"
                 @click="showVideoList(item)"
               >
                 名称：{{ item.name }}
diff --git a/front/src/views/personalCenter/components/PurchaseVehicle.vue b/front/src/views/personalCenter/components/PurchaseVehicle.vue
index 63d78168..2ce412ad 100644
--- a/front/src/views/personalCenter/components/PurchaseVehicle.vue
+++ b/front/src/views/personalCenter/components/PurchaseVehicle.vue
@@ -97,7 +97,8 @@
                 <a-list-item-meta
                   :description="
                     item.description ||
-                    (item.note1 &&
+                    (JSON.parse(item.note1) &&
+                      JSON.parse(item.note1)[0] &&
                       JSON.parse(item.note1)[0].channelName +
                         '等' +
                         JSON.parse(item.note1).length +
@@ -107,14 +108,48 @@
                   style="position: relative"
                 >
                   <template #title>
-                    <span
-                      @click="showItem(item.id, item.type, item.delFlag)"
-                      style="cursor: pointer"
-                      class="name"
-                    >
-                      {{ item.resourceName }}
+                    <div>
+                      <span
+                        @click="
+                          showItem(
+                            item.resourceId,
+                            item.type,
+                            item.delFlag,
+                            item.note1
+                          )
+                        "
+                        style="cursor: pointer"
+                        class="name"
+                      >
+                        {{ item.resourceName }}
+                      </span>
+                      <span class="type">{{ item.type }}</span>
+                    </div>
+                    <span class="time">
+                      加购时间:{{ item.time }}
+                      <a-popconfirm
+                        title="是否删除该记录?"
+                        ok-text="是"
+                        cancel-text="否"
+                        @confirm="delOne(item)"
+                        @cancel="cancel"
+                      >
+                        <a-button
+                          type="primary"
+                          style="
+                            width: 0.7rem;
+                            height: 0.3rem;
+                            margin-left: 0.12rem;
+                            border-radius: 2px;
+                            background: #fff;
+                            color: #0558e1;
+                          "
+                          @click="del"
+                        >
+                          删除
+                        </a-button>
+                      </a-popconfirm>
                     </span>
-                    <span class="type">{{ item.type }}</span>
                     <svg
                       t="1652233950228"
                       class="icon"
@@ -192,6 +227,24 @@
       </div>
     </div>
   </div>
+  <a-modal
+    v-model:visible="videoVisible"
+    title="已申请摄像头列表"
+    @ok="videoVisible = false"
+  >
+    <a-table
+      :columns="columns"
+      :data-source="xVideoList"
+      bordered
+      :pagination="{ defaultPageSize: 6 }"
+    >
+      <template #bodyCell="{ column, text }">
+        <!-- <template>
+        <a>{{ text }}</a>
+      </template> -->
+      </template>
+    </a-table>
+  </a-modal>
   <!-- <a-pagination
     v-model:current="pageNum"
     v-model:page-size="pageSize"
@@ -223,6 +276,8 @@
   const pageNum = ref('1')
   const pageSize = ref('99999')
   // const pageSizeOptions = ref(['5', '10', '20'])
+  const videoVisible = ref(false)
+  const xVideoList = ref([])
   const total = ref(0)
   const load = ref(0)
   // 多选框
@@ -232,6 +287,12 @@
   const checkAll = ref(false)
   const checkNum = ref(0)
   const showKey = ref(0)
+  const columns = ref([
+    {
+      title: '摄像头名称',
+      dataIndex: 'name',
+    },
+  ])
   // 筛选条件
   const name = ref('')
   const type = ref('')
@@ -672,20 +733,44 @@
       })
     }
   }
+
+  const delOne = (item) => {
+    // console.log(item)
+    sgcDel({
+      ids: [item.id],
+    }).then((res) => {
+      if (res.data.msg === 'success') {
+        message.success('删除成功')
+        // console.log('删除申购车列表================>', res)
+        mybus.emit('getSgcNum')
+        clean()
+      }
+    })
+  }
   const cancel = (e) => {
     // console.log(e)
   }
   // 详情
-  const showItem = (id, type, delFlag) => {
-    if (delFlag == 0) {
-      window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
-      mybus.emit('tabsChange', { flag: id })
-      router.push({
-        path: '/details',
-        query: {
-          id: id,
-        },
+  const showItem = (id, type, delFlag, note1) => {
+    if (type == '基础设施') {
+      // console.log()
+      let arr = JSON.parse(note1)
+      xVideoList.value = []
+      arr.map((val) => {
+        xVideoList.value.push({ name: val.channelName, key: val.channelId })
       })
+      videoVisible.value = true
+    } else {
+      if (delFlag == 0) {
+        window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
+        mybus.emit('tabsChange', { flag: id })
+        router.push({
+          path: '/details',
+          query: {
+            id: id,
+          },
+        })
+      }
     }
   }
   // 一键申请
@@ -919,4 +1004,8 @@
     background: url('~@/assets/home/ywzj_square.png') no-repeat;
     background-size: 100%;
   }
+  :deep(.ant-list-item-meta-title) {
+    display: flex;
+    justify-content: space-between;
+  }
 </style>
diff --git a/front/src/views/personalCenter/components/addApplication.vue b/front/src/views/personalCenter/components/addApplication.vue
index f6a5df1f..581d5c5b 100644
--- a/front/src/views/personalCenter/components/addApplication.vue
+++ b/front/src/views/personalCenter/components/addApplication.vue
@@ -9,83 +9,38 @@
         <div class="form-container">
           <div v-if="applySuccess">
             <div class="title">申请人信息</div>
-            <a-form
-              ref="formRef"
-              :model="formName"
-              name="basic"
-              :label-col="{ style: { width: '106px' } }"
-              :wrapper-col="{ style: { width: '230px' } }"
-              labelAlign="left"
-              autocomplete="off"
-            >
+            <a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }"
+              :wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off">
               <div class="base-info">
-                <a-form-item
-                  label="申请人"
-                  name="applyUserName"
-                  :rules="[{ required: true, message: '请输入申请人' }]"
-                >
-                  <a-input
-                    placeholder="请输入申请人"
-                    v-model:value="formName.applyUserName"
-                  />
+                <a-form-item label="申请人" name="applyUserName" :rules="[{ required: true, message: '请输入申请人' }]">
+                  <a-input placeholder="请输入申请人" v-model:value="formName.applyUserName" />
                 </a-form-item>
 
-                <a-form-item
-                  style="margin: 0 22px"
-                  label="申请人电话"
-                  name="applyUserPhone"
-                  :rules="[
-                    {
-                      required: true,
-                      pattern: /^1[3456789]\d{9}$/,
-                      message: '请输入正确的电话号码',
-                    },
-                  ]"
-                >
-                  <a-input
-                    placeholder="请输入申请人电话"
-                    v-model:value="formName.applyUserPhone"
-                  />
+                <a-form-item style="margin: 0 22px" label="申请人电话" name="applyUserPhone" :rules="[
+                  {
+                    required: true,
+                    pattern: /^1[3456789]\d{9}$/,
+                    message: '请输入正确的电话号码',
+                  },
+                ]">
+                  <a-input placeholder="请输入申请人电话" v-model:value="formName.applyUserPhone" />
                 </a-form-item>
 
-                <a-form-item
-                  label="申请单位"
-                  name="applyUserDeptName"
-                  :rules="[{ required: true, message: '请输入申请单位' }]"
-                >
-                  <a-input
-                    placeholder="请输入申请单位"
-                    v-model:value="formName.applyUserDeptName"
-                  />
+                <a-form-item label="申请单位" name="applyUserDeptName" :rules="[{ required: true, message: '请输入申请单位' }]">
+                  <a-input placeholder="请输入申请单位" v-model:value="formName.applyUserDeptName" />
                 </a-form-item>
               </div>
 
               <div class="title">需求信息</div>
 
-              <a-form-item
-                style="margin-bottom: 10px"
-                label="需求标题"
-                name="demandSubject"
-                :rules="[{ required: true, message: '请输入需求标题' }]"
-              >
-                <a-input
-                  style="width: 350px"
-                  v-model:value="formName.demandSubject"
-                />
+              <a-form-item style="margin-bottom: 10px" label="需求标题" name="demandSubject"
+                :rules="[{ required: true, message: '请输入需求标题' }]">
+                <a-input style="width: 350px" v-model:value="formName.demandSubject" />
               </a-form-item>
 
-              <a-form-item
-                style="margin-bottom: 10px"
-                label="需求类型"
-                name="detailsType"
-                :rules="[{ required: true, message: '请选择需求类型' }]"
-              >
-                <a-select
-                  ref="select"
-                  v-model:value="formName.detailsType"
-                  @focus="focus"
-                  style="width: 200px"
-                >
+              <a-form-item style="margin-bottom: 10px" label="需求类型" name="detailsType"
+                :rules="[{ required: true, message: '请选择需求类型' }]">
+                <a-select ref="select" v-model:value="formName.detailsType" @focus="focus" style="width: 200px">
                   <a-select-option value="基础设施">基础设施</a-select-option>
                   <a-select-option value="数据资源">数据资源</a-select-option>
                   <a-select-option value="组件服务">组件服务</a-select-option>
@@ -94,26 +49,14 @@
                 </a-select>
               </a-form-item>
 
-              <a-form-item
-                label="应用领域"
-                name="detailsField"
-                style="width: 350px"
-                :rules="[{ required: true, message: '请输入应用领域' }]"
-              >
-                <a-input
-                  placeholder="请输入应用领域"
-                  v-model:value="formName.detailsField"
-                />
+              <a-form-item label="应用领域" name="detailsField" style="width: 350px"
+                :rules="[{ required: true, message: '请输入应用领域' }]">
+                <a-input placeholder="请输入应用领域" v-model:value="formName.detailsField" />
               </a-form-item>
 
-              <a-form-item
-                style="margin-bottom: 10px"
-                label="需求描述"
-                name="demandDetails"
-                :rules="[{ required: true, message: '请输入需求描述' }]"
-              >
-                <a-textarea
-                  style="
+              <a-form-item style="margin-bottom: 10px" label="需求描述" name="demandDetails"
+                :rules="[{ required: true, message: '请输入需求描述' }]">
+                <a-textarea style="
                     width: 500px;
                     height: 150px;
                     font-size: 16px;
@@ -123,24 +66,12 @@
                     border-radius: 6px;
                     padding: 10px;
                     resize: none;
-                  "
-                  v-model:value="formName.demandDetails"
-                />
+                  " v-model:value="formName.demandDetails" />
               </a-form-item>
-              <a-form-item
-                style="color: #666; font-size: 16px"
-                label="附件上传"
-                name="applyDoc"
-              >
-                <a-upload
-                  v-model:file-list="fileList"
-                  name="file"
-                  :action="upLoadUrl"
-                  :headers="headers"
-                  @change="handleChange"
-                >
-                  <a-button
-                    style="
+              <a-form-item style="color: #666; font-size: 16px" label="附件上传" name="applyDoc">
+                <a-upload v-model:file-list="fileList" name="file" :action="upLoadUrl" :headers="headers"
+                  @change="handleChange">
+                  <a-button style="
                       width: 100px;
                       height: 30px;
                       margin-right: 10px;
@@ -151,8 +82,7 @@
                       border: 1px solid #bbd3ef;
                       padding: 0;
                       text-align: center;
-                    "
-                  >
+                    ">
                     <upload-outlined></upload-outlined>
                     文件上传
                   </a-button>
@@ -163,8 +93,7 @@
               </a-form-item>
 
               <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-                <a-button
-                  style="
+                <a-button style="
                     width: 80px;
                     height: 38px;
                     margin-right: 20px;
@@ -175,15 +104,10 @@
                     border: none;
                     padding: 0;
                     text-align: center;
-                  "
-                  type="primary"
-                  html-type="cancle"
-                  @click="signOut"
-                >
+                  " type="primary" html-type="cancle" @click="signOut">
                   退出申请
                 </a-button>
-                <a-button
-                  style="
+                <a-button style="
                     width: 80px;
                     height: 38px;
                     background: #0087ff;
@@ -193,11 +117,7 @@
                     border: none;
                     padding: 0;
                     text-align: center;
-                  "
-                  type="primary"
-                  html-type="submit"
-                  @click="processStartHandle()"
-                >
+                  " type="primary" html-type="submit" @click="processStartHandle()">
                   提交申请
                 </a-button>
               </a-form-item>
@@ -209,7 +129,7 @@
             </div>
             <p>
               您已成功申请{{
-                formName.demandSubject || ''
+                  formName.demandSubject || ''
               }},请耐心等待审批结果，结果会第一时间通知您！
             </p>
           </div>
@@ -220,209 +140,219 @@
 </template>
 
 <script>
-  import HomeHeader from '@/views/home/components/header'
-  import { reactive, ref } from 'vue'
-  import { message } from 'ant-design-vue'
-  // import { UploadOutlined } from '@ant-design/icons-vue'
-  import { getUser, getUserInfo, relaunch } from '@/api/home'
-  import {
-    demandApply,
-    getDemandForm,
-    updateDemandForm,
-  } from '@/api/personalCenter'
-  // import { baseURL } from '@/config'
-  import { useRouter } from 'vue-router'
+import HomeHeader from '@/views/home/components/header'
+import { reactive, ref } from 'vue'
+import { message } from 'ant-design-vue'
+// import { UploadOutlined } from '@ant-design/icons-vue'
+import { getUser, getUserInfo, relaunch } from '@/api/home'
+import {
+  demandApply,
+  getDemandForm,
+  updateDemandForm,
+} from '@/api/personalCenter'
+// import { baseURL } from '@/config'
+import { useRouter } from 'vue-router'
 
-  export default {
-    name: '',
-    props: {},
-    components: {
-      HomeHeader,
-      // UploadOutlined,
-    },
-    setup() {
-      const disabled = ref(false)
-      const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload')
-      const formName = reactive({
-        applyUserDeptId: '',
-        applyUserDeptName: '',
-        applyUserId: '',
-        applyUserName: '',
-        applyUserPhone: '',
-        demandDetails: '',
-        demandSubject: '',
-        detailsField: '',
-        detailsType: '',
-        enclosure: '',
+export default {
+  name: '',
+  props: {},
+  components: {
+    HomeHeader,
+    // UploadOutlined,
+  },
+  setup() {
+    const disabled = ref(false)
+    const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload')
+    const formName = reactive({
+      applyUserDeptId: '',
+      applyUserDeptName: '',
+      applyUserId: '',
+      applyUserName: '',
+      applyUserPhone: '',
+      demandDetails: '',
+      demandSubject: '',
+      detailsField: '',
+      detailsType: '',
+      enclosure: '',
+    })
+    // console.log(formName.demandSubject)
+
+    const router = useRouter()
+    const id = ref(router.currentRoute.value.query.id)
+    const taskId = ref(router.currentRoute.value.query.taskId)
+    if (id.value) {
+      getDemandForm(id.value).then((res) => {
+        console.log('回填数据===============>', res)
+        formName.applyUserPhone = res.data.data.applyUserPhone
+        formName.demandSubject = res.data.data.demandSubject
+        formName.detailsType = res.data.data.detailsType
+        formName.detailsField = res.data.data.detailsField
+        formName.demandDetails = res.data.data.demandDetails
+        formName.enclosure = res.data.data.enclosure
       })
-      // console.log(formName.demandSubject)
+    }
+    getUser().then((res) => {
+      formName.applyUserName = res.data.data.realName
+      formName.applyUserId = res.data.data.id
+      getUserInfo(formName.applyUserId).then((res) => {
+        if (res.data.data.mobile) {
+          formName.applyUserPhone = res.data.data.mobile
+        }
+        formName.applyUserDeptName = res.data.data.deptName
+        formName.applyUserDeptId = res.data.data.deptId
+      })
+    })
 
-      const router = useRouter()
-      const id = ref(router.currentRoute.value.query.id)
-      const taskId = ref(router.currentRoute.value.query.taskId)
+    const formRef = ref()
+    const applySuccess = ref(true)
+
+    // 退出
+    const signOut = () => {
+      window.close()
+    }
+    const handleChange = (info) => {
+      if (info.file.status !== 'uploading') {
+        console.log(info.file, info.fileList)
+      }
+
+      if (info.file.status === 'done') {
+        message.success(`${info.file.name} 文件上传成功`)
+        formName.enclosure = info.file.response.data
+      } else if (info.file.status === 'error') {
+        message.error(`${info.file.name} 文件上传失败`)
+      }
+    }
+
+    const fileList = ref([])
+
+    const processStartHandle = () => {
       if (id.value) {
-        getDemandForm(id.value).then((res) => {
-          console.log('回填数据===============>', res)
-          formName.applyUserPhone = res.data.data.applyUserPhone
-          formName.demandSubject = res.data.data.demandSubject
-          formName.detailsType = res.data.data.detailsType
-          formName.detailsField = res.data.data.detailsField
-          formName.demandDetails = res.data.data.demandDetails
-          formName.enclosure = res.data.data.enclosure
-        })
-      }
-      getUser().then((res) => {
-        formName.applyUserName = res.data.data.realName
-        formName.applyUserId = res.data.data.id
-        getUserInfo(formName.applyUserId).then((res) => {
-          if (res.data.data.mobile) {
-            formName.applyUserPhone = res.data.data.mobile
-          }
-          formName.applyUserDeptName = res.data.data.deptName
-          formName.applyUserDeptId = res.data.data.deptId
-        })
-      })
-
-      const formRef = ref()
-      const applySuccess = ref(true)
-
-      // 退出
-      const signOut = () => {
-        window.close()
-      }
-      const handleChange = (info) => {
-        if (info.file.status !== 'uploading') {
-          console.log(info.file, info.fileList)
-        }
-
-        if (info.file.status === 'done') {
-          message.success(`${info.file.name} file uploaded successfully`)
-          formName.enclosure = info.file.response.data
-        } else if (info.file.status === 'error') {
-          message.error(`${info.file.name} file upload failed.`)
-        }
-      }
-
-      const fileList = ref([])
-
-      const processStartHandle = () => {
-        if (id.value) {
-          updateDemandForm(formName).then((upres) => {
-            if (upres.data.code == 0) {
-              relaunch({ data: formName, taskId: taskId.value }).then((res) => {
-                console.log('驳回================>', res)
-                if (res.data.code == 0) {
-                  message.success('重新发起流程成功！')
-                  window.setTimeout(() => {
-                    window.close()
-                  }, 1000)
-                } else {
-                  message.error('重新发起流程失败！')
-                }
-              })
-            } else {
-              message.error('数据更新失败！')
-            }
-          })
-        } else {
-          formRef.value.validate().then(() => {
-            demandApply(formName).then((res) => {
-              applySuccess.value = false
-              message.success('操作成功！')
-              console.log('能力申请================>', res)
+        updateDemandForm(formName).then((upres) => {
+          if (upres.data.code == 0) {
+            relaunch({ data: formName, taskId: taskId.value }).then((res) => {
+              console.log('驳回================>', res)
+              if (res.data.code == 0) {
+                message.success('重新发起流程成功！')
+                window.setTimeout(() => {
+                  window.close()
+                }, 1000)
+              } else {
+                message.error('重新发起流程失败！')
+              }
             })
+          } else {
+            message.error('数据更新失败！')
+          }
+        })
+      } else {
+        formRef.value.validate().then(() => {
+          demandApply(formName).then((res) => {
+            applySuccess.value = false
+            message.success('操作成功！')
+            console.log('能力申请================>', res)
           })
-        }
+        })
       }
+    }
 
-      return {
-        formRef,
-        formName,
-        fileList,
-        headers: {
-          authorization: 'authorization-text',
-        },
-        handleChange,
-        applySuccess,
-        disabled,
-        signOut,
-        processStartHandle,
-        upLoadUrl,
-        // baseURL,
-      }
-    },
-  }
+    return {
+      formRef,
+      formName,
+      fileList,
+      headers: {
+        authorization: 'authorization-text',
+      },
+      handleChange,
+      applySuccess,
+      disabled,
+      signOut,
+      processStartHandle,
+      upLoadUrl,
+      // baseURL,
+    }
+  },
+}
 </script>
 
 <style scoped lang="less">
-  #apply-container {
-    background-color: #f5f8fc;
-    height: 100%;
-    width: 100%;
-    margin: 90px auto 0;
+#apply-container {
+  background-color: #f5f8fc;
+  height: 100%;
+  width: 100%;
+  margin: 90px auto 0;
+  display: flex;
+  justify-content: space-between;
+
+  aside {
+    width: 282px;
+    height: 96%;
+    overflow-y: auto;
+    background-color: #fff;
+    margin: 1% 0 3%;
+  }
+
+  article {
+    width: 1090px;
+    height: 99%;
+    overflow-y: auto;
+    background-color: #fff;
+    margin: 5% auto;
+  }
+
+  .form-container {
+    padding: 20px 20px 30px 20px;
+
+    .title {
+      font-size: 20px;
+      color: #000;
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+  }
+
+  .base-info {
     display: flex;
-    justify-content: space-between;
-    aside {
-      width: 282px;
-      height: 96%;
-      overflow-y: auto;
-      background-color: #fff;
-      margin: 1% 0 3%;
-    }
-    article {
-      width: 1090px;
-      height: 99%;
-      overflow-y: auto;
-      background-color: #fff;
-      margin: 5% auto;
-    }
-    .form-container {
-      padding: 20px 20px 30px 20px;
-      .title {
-        font-size: 20px;
-        color: #000;
-        font-weight: bold;
-        margin-bottom: 20px;
+  }
+
+  :deep(.ant-form-item-label) {
+    label {
+      color: #666;
+      font-size: 16px;
+
+      &::after {
+        content: '';
       }
     }
-    .base-info {
-      display: flex;
+  }
+
+  :deep(.ant-form-item-required) {
+    &::before {
+      font-size: 8px;
+      margin-right: 10px;
     }
-    :deep(.ant-form-item-label) {
-      label {
-        color: #666;
-        font-size: 16px;
-        &::after {
-          content: '';
-        }
-      }
-    }
-    :deep(.ant-form-item-required) {
-      &::before {
-        font-size: 8px;
-        margin-right: 10px;
-      }
+  }
+
+  :deep(.ant-input) {
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+  }
+
+  .success {
+    div {
+      width: 100px;
+      margin: 80px auto 40px;
     }
 
-    :deep(.ant-input) {
-      border: 1px solid #e0e0e0;
-      border-radius: 6px;
-    }
-    .success {
-      div {
-        width: 100px;
-        margin: 80px auto 40px;
-      }
-      text-align: center;
-      font-size: 20px;
-      font-weight: bold;
-      color: #000;
-    }
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: #000;
   }
+}
 </style>
 <style>
-  body,
-  html {
-    height: unset;
-  }
+body,
+html {
+  height: unset;
+}
 </style>
diff --git a/node_modules/.package_versions.json b/node_modules/.package_versions.json
new file mode 100644
index 00000000..9e26dfee
--- /dev/null
+++ b/node_modules/.package_versions.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file