diff --git a/back/src/assets/img/workBench/banner-gg.png b/back/src/assets/img/workBench/banner-gg.png
new file mode 100644
index 00000000..66076b4d
Binary files /dev/null and b/back/src/assets/img/workBench/banner-gg.png differ
diff --git a/back/src/assets/img/workBench/banner-jc.png b/back/src/assets/img/workBench/banner-jc.png
new file mode 100644
index 00000000..89d47a32
Binary files /dev/null and b/back/src/assets/img/workBench/banner-jc.png differ
diff --git a/back/src/assets/img/workBench/banner-sj.png b/back/src/assets/img/workBench/banner-sj.png
new file mode 100644
index 00000000..10f9f7f2
Binary files /dev/null and b/back/src/assets/img/workBench/banner-sj.png differ
diff --git a/back/src/assets/img/workBench/banner-yy.png b/back/src/assets/img/workBench/banner-yy.png
new file mode 100644
index 00000000..edf898e4
Binary files /dev/null and b/back/src/assets/img/workBench/banner-yy.png differ
diff --git a/back/src/assets/img/workBench/banner-zj.png b/back/src/assets/img/workBench/banner-zj.png
new file mode 100644
index 00000000..5b9cae95
Binary files /dev/null and b/back/src/assets/img/workBench/banner-zj.png differ
diff --git a/back/src/views/modules/ability/IntegratedServices-add.vue b/back/src/views/modules/ability/IntegratedServices-add.vue
index 612dcf7e..15d9c049 100644
--- a/back/src/views/modules/ability/IntegratedServices-add.vue
+++ b/back/src/views/modules/ability/IntegratedServices-add.vue
@@ -88,9 +88,8 @@
         </el-form>
       </div>
       <template slot="footer">
-        <el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
         <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
-
+        <el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
       </template>
     </el-dialog>
   </div>
diff --git a/back/src/views/modules/ability/assignedScene/area-add.vue b/back/src/views/modules/ability/assignedScene/area-add.vue
index bec30639..3f429dc3 100644
--- a/back/src/views/modules/ability/assignedScene/area-add.vue
+++ b/back/src/views/modules/ability/assignedScene/area-add.vue
@@ -2,7 +2,6 @@
   <div>
     <el-dialog custom-class="customClass" :visible.sync="areaVisibleCopy" :title="modalTypeText[modalType]"
       @close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
-     
 
       <!-- 挂载和修改   -->
       <div class="right">
@@ -10,7 +9,7 @@
           :label-width="$i18n.locale === 'en-US' ? '120px' : '100px'">
           <!-- 基本信息 -->
           <div class="scrollBox" id="anchor1">
-            
+
             <div class="baseInner">
               <el-form-item label="所属区市:" prop="unit">
                 <el-select v-model="dataForm.area" placeholder="请选择">
@@ -52,18 +51,17 @@
             </div>
           </div>
 
- 
         </el-form>
       </div>
       <template slot="footer">
-        <el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
         <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
+        <el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
 
       </template>
     </el-dialog>
   </div>
 </template>
-  
+
 <script>
 import debounce from 'lodash/debounce'
 import qs from 'qs'
@@ -78,19 +76,19 @@ export const modalTypeText = {
 
 export default {
   components: {
-    upload 
+    upload
   },
   watch: {
-  
+
     dataForm: {
-      handler(newVal) {
+      handler (newVal) {
         this.dataForm = newVal
       },
       deep: true,
       immediate: true
     },
     areaVisible: {
-      handler(newVal) {
+      handler (newVal) {
         this.getSceneArea()
         this.getArea()
         this.areaVisibleCopy = newVal
@@ -112,25 +110,25 @@ export default {
     }
   },
 
-  data() {
+  data () {
     return {
-      areas:[],//所属区市
-      sceneAreas:[],
+      areas: [], // 所属区市
+      sceneAreas: [],
       fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
       dataForm: {
-        district: 1,//0市级，1基层
-        area: '',//所属区市
+        district: 1, // 0市级，1基层
+        area: '', // 所属区市
         infrastructureCount: null,
         dataSourceCount: null,
         componentCount: null,
         name: '',
-        applicationArea: '',//赋能领域
+        applicationArea: '', // 赋能领域
         description: '',
         sceneUrl: '',
         fuseAttrList: [
           {
             attrType: '构建步骤',
-            attrValue: [{ question: '', answer: [{ 'answer': '' }, { 'answer': '' }] }]
+            attrValue: [{ question: '', answer: [{ answer: '' }, { answer: '' }] }]
           },
           {
             attrType: '基础设施',
@@ -156,7 +154,7 @@ export default {
             attrType: '服务图片',
             attrValue: ''
           }
-        ],
+        ]
 
       },
       rules: {
@@ -175,18 +173,18 @@ export default {
           }
         ]
       },
-     
+
       areaVisibleCopy: this.areaVisible,
       displayInfo: {
         name: '名称',
         description: '描述'
       },
       modalTypeText: modalTypeText,
-    
+
       abilityListObj: {},
       imgData: [],
       // 限定图片
-      handleExceed() {
+      handleExceed () {
         this.$message({ type: 'error', message: '最多支持一张图片上传' })
       },
       imageUrl: ''
@@ -194,8 +192,8 @@ export default {
   },
 
   methods: {
-   //获取所属区市
-    getArea(){
+    // 获取所属区市
+    getArea () {
       const params = {
         pid: '250000'
       }
@@ -207,8 +205,8 @@ export default {
           this.areas = res.data.data
         })
     },
-    //获取赋能场景
-    getSceneArea() {
+    // 获取赋能场景
+    getSceneArea () {
       const params = {
         topCategoryName: '应用资源'
       }
@@ -221,18 +219,16 @@ export default {
         })
     },
 
-    clearForm() {
+    clearForm () {
       this.$refs.dataForm && this.$refs.dataForm.resetFields()
     },
-    closeModal() {
+    closeModal () {
       this.$emit('closeModal')
     },
 
-
     // 表单提交
     dataFormSubmitHandle: debounce(
       function () {
-
         this.$refs.dataForm.validate((valid) => {
           if (!valid) {
             this.$message.error('请检查表单是否填写完整')
@@ -251,15 +247,14 @@ export default {
           const _obj = Object.assign({}, this.dataForm, {
             type: '赋能场景'
           })
-         
-          this.dataForm.fuseAttrList.forEach(item => {
-            if(item.attrType!=='服务图片'){
-            item.attrValue = JSON.stringify(item.attrValue);
-            }
 
+          this.dataForm.fuseAttrList.forEach(item => {
+            if (item.attrType !== '服务图片') {
+              item.attrValue = JSON.stringify(item.attrValue)
+            }
           })
           this.$http
-          [methodsObj[this.modalType]]('/fuse', _obj)
+            [methodsObj[this.modalType]]('/fuse', _obj)
             .then(({ data: res }) => {
               if (res.code !== 0) {
                 return this.$message.error(res.msg)
@@ -284,16 +279,16 @@ export default {
       { leading: true, trailing: false }
     ),
     // 详情
-    getDetail(data) {
-      this.dataForm = data  
+    getDetail (data) {
+      this.dataForm = data
     },
-    handleAvatarSuccess(res, file) {
+    handleAvatarSuccess (res, file) {
       if (res.code !== 0) {
         return this.$message.error(res.msg)
       }
       this.imageUrl = res.data
     },
-    beforeAvatarUpload(file) {
+    beforeAvatarUpload (file) {
       const isImage =
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
@@ -303,11 +298,11 @@ export default {
       }
       return isImage
     },
-    addUploadRemoveFile(file, fileList) {
+    addUploadRemoveFile (file, fileList) {
       this.$refs.addUpload.clearFiles()
       this.imageUrl = ''
     },
-    editBeforeAvatarUpload(file) {
+    editBeforeAvatarUpload (file) {
       const isImage =
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
@@ -318,26 +313,25 @@ export default {
       }
       return isImage
     },
-    editUploadRemoveFile(file, fileList) {
+    editUploadRemoveFile (file, fileList) {
       this.$refs.editUpload.clearFiles()
       this.imageUrl = ''
     },
-    eidtHandleAvatarSuccess(res, file) {
+    eidtHandleAvatarSuccess (res, file) {
       if (res.code !== 0) {
         return this.$message.error(res.msg)
       }
       this.imageUrl = res.data
     }
   },
-  mounted() { 
+  mounted () {
   },
-  beforeDestroy() {
+  beforeDestroy () {
     this.clearForm()
-
   }
 }
 </script>
-  
+
 <style lang="scss" scoped>
 .fixed {
   position: sticky;
@@ -368,14 +362,11 @@ export default {
   background-position-y: 22px;
 }
 
-
-
 .right {
   width: 770px;
   margin-left: 100px;
   margin-top: 24px;
 
-
   .info-inner {
 
     margin-left: 10px;
@@ -392,7 +383,6 @@ export default {
 
     border-radius: 2px;
 
-
   }
 
   .baseTitle {
@@ -404,7 +394,6 @@ export default {
     background: url("~@/assets/img/biaoti.png") no-repeat;
     background-position-y: 2px;
 
-
   }
 
   .baseInner {
@@ -438,7 +427,6 @@ export default {
   height: 580px;
   overflow: auto;
 
-
 }
 
 .icon-input ::v-deep .el-input__inner {
@@ -468,7 +456,7 @@ export default {
   border: 1px solid #dcdfe6 !important;
 }
 </style>
-  
+
 <style lang="scss" scoped>
 .mod-sys__menu {
 
@@ -558,4 +546,3 @@ export default {
   display: block;
 }
 </style>
-  
\ No newline at end of file
diff --git a/back/src/views/modules/ability/assignedScene/city-add.vue b/back/src/views/modules/ability/assignedScene/city-add.vue
index e77d109a..4cd278a1 100644
--- a/back/src/views/modules/ability/assignedScene/city-add.vue
+++ b/back/src/views/modules/ability/assignedScene/city-add.vue
@@ -22,7 +22,6 @@
         </div>
       </div>
 
-
       <!-- 挂载和修改   -->
       <div class="right">
         <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
@@ -140,14 +139,14 @@
         </el-form>
       </div>
       <template slot="footer">
-        <el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
         <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
+        <el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
 
       </template>
     </el-dialog>
   </div>
 </template>
-  
+
 <script>
 import debounce from 'lodash/debounce'
 import qs from 'qs'
@@ -160,7 +159,6 @@ import InfrastructureModal from './components/infrastructure-modal.vue'
 import Cookies from 'js-cookie'
 import upload from '@/views/modules/components/upload'
 
-
 export const getDescJson = (text) => {
   return {
     descObj: {
@@ -187,20 +185,20 @@ export default {
     AbilityAdd
   },
   watch: {
-  
+
     dataForm: {
-      handler(newVal) {
+      handler (newVal) {
         this.dataForm = newVal
       },
       deep: true,
       immediate: true
     },
     cityVisible: {
-      handler(newVal) {
+      handler (newVal) {
         this.getSceneArea()
         this.cityVisibleCopy = newVal
         if (this.modalType == 'add' && newVal) {
-         // localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
+          // localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
           this.getDetail(this.dataForm)
         }
       },
@@ -218,42 +216,42 @@ export default {
     }
   },
 
-  data() {
+  data () {
     return {
       domArr: [],
       scrollTop: 0,
       selectNow: '',
-      activeStepIndex: 0,//选择的步骤
+      activeStepIndex: 0, // 选择的步骤
       activeStepIndexs: 0,
       baseTypeList: [{ value: '视频资源', label: '视频资源' }, { value: '云资源', label: '云资源' }, { value: '其他', label: '其他' }],
       componetTypeList: [{ value: '智能算法', label: '智能算法' }, { value: ' 图层服务', label: ' 图层服务' },
-      { value: '开发组件', label: '开发组件' }, { value: '业务组件', label: '业务组件' }],
+        { value: '开发组件', label: '开发组件' }, { value: '业务组件', label: '业务组件' }],
       dataTypeList: [{ value: '数据', label: '数据' }],
-      sceneAreas: [],//赋能领域
+      sceneAreas: [], // 赋能领域
 
-      steps: [{ 'name': '基本信息', 'id': "anchor1" },
-      { 'name': '场景痛点', 'id': "anchor2" },
-      { 'name': '解决方案', 'id': "anchor3" },
-      { 'name': '使用能力', 'id': "anchor4" },
-      { 'name': '构建步骤', 'id': "anchor5" }],
+      steps: [{ name: '基本信息', id: 'anchor1' },
+        { name: '场景痛点', id: 'anchor2' },
+        { name: '解决方案', id: 'anchor3' },
+        { name: '使用能力', id: 'anchor4' },
+        { name: '构建步骤', id: 'anchor5' }],
       fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
 
       painKeyTextObj: getDescJson('痛点'),
       solutionKeyTextObj: getDescJson('方案'),
       dataForm: {
-        district: 0,//市级
-        area: '',//所属区市
+        district: 0, // 市级
+        area: '', // 所属区市
         infrastructureCount: null,
         dataSourceCount: null,
         componentCount: null,
         name: '',
-        applicationArea: '',//赋能领域
+        applicationArea: '', // 赋能领域
         description: '',
         sceneUrl: '',
         fuseAttrList: [
           {
             attrType: '构建步骤',
-            attrValue: [{ question: '', answer: [{ 'answer': '' }, { 'answer': '' }] }]
+            attrValue: [{ question: '', answer: [{ answer: '' }, { answer: '' }] }]
           },
           {
             attrType: '基础设施',
@@ -279,7 +277,7 @@ export default {
             attrType: '服务图片',
             attrValue: ''
           }
-        ],
+        ]
 
       },
       rules: {
@@ -318,7 +316,7 @@ export default {
       abilityListObj: {},
       imgData: [],
       // 限定图片
-      handleExceed() {
+      handleExceed () {
         this.$message({ type: 'error', message: '最多支持一张图片上传' })
       },
       imageUrl: ''
@@ -327,16 +325,14 @@ export default {
 
   methods: {
 
-
-    handleStep(item, index) {
+    handleStep (item, index) {
       this.activeStepIndex = index
       this.selectNow = item.id // 设置选中的锚点为当前点击的
-      let top = document.querySelector('#' + item.id).offsetTop - 100
-      document.querySelectorAll(".customClass .el-dialog__body")[0].scrollTop = top
-
+      const top = document.querySelector('#' + item.id).offsetTop - 100
+      document.querySelectorAll('.customClass .el-dialog__body')[0].scrollTop = top
     },
-    //获取赋能场景
-    getSceneArea() {
+    // 获取赋能场景
+    getSceneArea () {
       const params = {
         topCategoryName: '应用资源'
       }
@@ -349,23 +345,22 @@ export default {
         })
     },
 
-    clearForm() {
+    clearForm () {
       this.$refs.dataForm && this.$refs.dataForm.resetFields()
     },
-    closeModal() {
+    closeModal () {
       this.$emit('closeModal')
     },
     // 更新表单
-    updateDataForm(data) {
+    updateDataForm (data) {
       this.dataForm.fuseAttrList.map(v => {
         if (v.attrType === data.title) {
           v.attrValue = data.list
         }
       })
-
     },
-    //更新数量
-    updateCount(data) {
+    // 更新数量
+    updateCount (data) {
       if (data.title === '基础设施') {
         this.dataForm.infrastructureCount = data.count
       }
@@ -375,13 +370,11 @@ export default {
       if (data.title === '数据资源') {
         this.dataForm.dataSourceCount = data.count
       }
-
     },
 
     // 表单提交
     dataFormSubmitHandle: debounce(
       function () {
-
         this.$refs.dataForm.validate((valid) => {
           if (!valid) {
             this.$message.error('请检查表单是否填写完整')
@@ -401,13 +394,12 @@ export default {
             type: '赋能场景'
           })
           this.dataForm.fuseAttrList.forEach(item => {
-            if(item.attrType!=='服务图片'){
-            item.attrValue = JSON.stringify(item.attrValue);
+            if (item.attrType !== '服务图片') {
+              item.attrValue = JSON.stringify(item.attrValue)
             }
-
           })
           this.$http
-          [methodsObj[this.modalType]]('/fuse', _obj)
+            [methodsObj[this.modalType]]('/fuse', _obj)
             .then(({ data: res }) => {
               if (res.code !== 0) {
                 return this.$message.error(res.msg)
@@ -432,7 +424,7 @@ export default {
       { leading: true, trailing: false }
     ),
     // 详情
-    getDetail(data) {
+    getDetail (data) {
       this.dataForm = data
       this.$nextTick(() => {
         for (const key in this.refsParseArray) {
@@ -440,19 +432,15 @@ export default {
         }
         const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
         this.imageUrl = _imgObj.attrValue
-       
-
-
       })
-
     },
-    handleAvatarSuccess(res, file) {
+    handleAvatarSuccess (res, file) {
       if (res.code !== 0) {
         return this.$message.error(res.msg)
       }
       this.imageUrl = res.data
     },
-    beforeAvatarUpload(file) {
+    beforeAvatarUpload (file) {
       const isImage =
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
@@ -462,11 +450,11 @@ export default {
       }
       return isImage
     },
-    addUploadRemoveFile(file, fileList) {
+    addUploadRemoveFile (file, fileList) {
       this.$refs.addUpload.clearFiles()
       this.imageUrl = ''
     },
-    editBeforeAvatarUpload(file) {
+    editBeforeAvatarUpload (file) {
       const isImage =
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
@@ -477,58 +465,49 @@ export default {
       }
       return isImage
     },
-    editUploadRemoveFile(file, fileList) {
+    editUploadRemoveFile (file, fileList) {
       this.$refs.editUpload.clearFiles()
       this.imageUrl = ''
     },
-    eidtHandleAvatarSuccess(res, file) {
+    eidtHandleAvatarSuccess (res, file) {
       if (res.code !== 0) {
         return this.$message.error(res.msg)
       }
       this.imageUrl = res.data
     }
   },
-  mounted() {
-    const that = this;
+  mounted () {
+    const that = this
     this.$nextTick(() => {
-      document.querySelector(".el-dialog__body").onscroll = function () {
-
-        let top = document.querySelectorAll(".customClass .el-dialog__body")[0].scrollTop - 100
+      document.querySelector('.el-dialog__body').onscroll = function () {
+        const top = document.querySelectorAll('.customClass .el-dialog__body')[0].scrollTop - 100
 
         if (top < document.querySelector('#anchor1').offsetTop - 100) {
           that.activeStepIndexs = 0
-        }
-        else if (top < document.querySelector('#anchor2').offsetTop - 100) {
+        } else if (top < document.querySelector('#anchor2').offsetTop - 100) {
           that.activeStepIndexs = 1
-        }
-        else if (top < document.querySelector('#anchor3').offsetTop - 100) {
+        } else if (top < document.querySelector('#anchor3').offsetTop - 100) {
           that.activeStepIndexs = 2
-        }
-        else if (top < document.querySelector('#anchor4').offsetTop - 100) {
+        } else if (top < document.querySelector('#anchor4').offsetTop - 100) {
           that.activeStepIndexs = 3
-        }
-        else if (top < document.querySelector('#anchor5').offsetTop - 100) {
+        } else if (top < document.querySelector('#anchor5').offsetTop - 100) {
           that.activeStepIndexs = 4
         } else {
           that.activeStepIndexs = 0
         }
         if (that.activeStepIndex !== that.activeStepIndexs) {
-          that.activeStepIndex = that.activeStepIndexs;
-          that.$forceUpdate();
+          that.activeStepIndex = that.activeStepIndexs
+          that.$forceUpdate()
         }
       }
-
     })
-
-
   },
-  beforeDestroy() {
+  beforeDestroy () {
     this.clearForm()
-
   }
 }
 </script>
-  
+
 <style lang="scss" scoped>
 .fixed {
   position: sticky;
@@ -632,9 +611,6 @@ export default {
       border: 4px solid #1160e2;
     }
 
-
-
-
     .advice {
       font-size: 10px;
       color: #1160e2;
@@ -653,7 +629,6 @@ export default {
   margin-left: 157px;
   margin-top: -5px;
 
-
   .info-inner {
 
     margin-left: 10px;
@@ -670,7 +645,6 @@ export default {
 
     border-radius: 2px;
 
-
   }
 
   .baseTitle {
@@ -682,7 +656,6 @@ export default {
     background: url("~@/assets/img/biaoti.png") no-repeat;
     background-position-y: 2px;
 
-
   }
 
   .baseInner {
@@ -716,7 +689,6 @@ export default {
   height: 580px;
   overflow: auto;
 
-
 }
 
 .icon-input ::v-deep .el-input__inner {
@@ -746,7 +718,7 @@ export default {
   border: 1px solid #dcdfe6 !important;
 }
 </style>
-  
+
 <style lang="scss" scoped>
 .mod-sys__menu {
 
@@ -836,4 +808,3 @@ export default {
   display: block;
 }
 </style>
-  
\ No newline at end of file
diff --git a/back/src/views/modules/ability/assignedScene/components/ability-add.vue b/back/src/views/modules/ability/assignedScene/components/ability-add.vue
index 199dd0a9..3a4ff5e8 100644
--- a/back/src/views/modules/ability/assignedScene/components/ability-add.vue
+++ b/back/src/views/modules/ability/assignedScene/components/ability-add.vue
@@ -63,7 +63,7 @@
           <template slot-scope="scope">
             <el-popconfirm
                         confirm-button-text="确认"
-                        cancel-button-text="不用了"
+                        cancel-button-text="取消"
                         icon="el-icon-info"
                         icon-color="red"
                         title="确定删除该实例数据吗？"
@@ -86,117 +86,117 @@ export default {
   props: {
     dataForm: {
       type: Object,
-      default: () => {},
+      default: () => {}
     },
     title: {
       type: String,
-      default: "",
+      default: ''
     },
     typeList: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
   watch: {
     dataInfo: {
-      handler(newVal) {
-        this.dataInfo = newVal;
-        this.$emit("update", {
+      handler (newVal) {
+        this.dataInfo = newVal
+        this.$emit('update', {
           title: this.title,
-          list: newVal,
-        });
+          list: newVal
+        })
       },
       deep: true,
-      immediate: true,
+      immediate: true
     },
     count: {
-      handler(newVal) {
-        this.count = newVal;
-        this.$emit("updateCount", {
+      handler (newVal) {
+        this.count = newVal
+        this.$emit('updateCount', {
           title: this.title,
-          count: newVal,
-        });
+          count: newVal
+        })
       },
       deep: true,
-      immediate: true,
-    },
+      immediate: true
+    }
   },
-  data() {
+  data () {
     return {
-      count: "",
-      dataInfo: [],
-    };
+      count: '',
+      dataInfo: []
+    }
   },
 
   methods: {
-    addBaseInfo() {
-      let data = {
-        name: "",
-        type: "",
-        dept: "",
-      };
-      this.dataInfo.push(data);
+    addBaseInfo () {
+      const data = {
+        name: '',
+        type: '',
+        dept: ''
+      }
+      this.dataInfo.push(data)
     },
-    handleDelete(row) {
-      this.dataInfo.splice(row, 1);
+    handleDelete (row) {
+      this.dataInfo.splice(row, 1)
     },
-    getDataInfo(dataForm) {
-      let arr = [];
+    getDataInfo (dataForm) {
+      let arr = []
       if (dataForm && (dataForm.id || dataForm.id === 0)) {
-        if (this.title === "基础设施") {
-          this.count = dataForm.infrastructureCount;
+        if (this.title === '基础设施') {
+          this.count = dataForm.infrastructureCount
         }
-        if (this.title === "组件服务") {
-          this.count = dataForm.componentCount;
+        if (this.title === '组件服务') {
+          this.count = dataForm.componentCount
         }
-        if (this.title === "数据资源") {
-          this.count = dataForm.dataSourceCount;
+        if (this.title === '数据资源') {
+          this.count = dataForm.dataSourceCount
         }
 
-        let fuseAttrList = dataForm.fuseAttrList || [];
-        let obj = fuseAttrList.find((v) => v.attrType === this.title) || {};
-        let attrValue = JSON.parse(obj.attrValue || "[]");
+        const fuseAttrList = dataForm.fuseAttrList || []
+        const obj = fuseAttrList.find((v) => v.attrType === this.title) || {}
+        const attrValue = JSON.parse(obj.attrValue || '[]')
         if (attrValue.length > 0) {
           attrValue.map((v) => {
-            arr.push(v);
-          });
+            arr.push(v)
+          })
         } else {
-          arr = [];
+          arr = []
         }
       } else {
-        arr = [];
+        arr = []
       }
 
-      this.dataInfo = arr;
+      this.dataInfo = arr
     },
     // 新增
-    addItem() {
-      let index = this.dataInfo.length - 1;
-      if (this.dataInfo[index][this.keyTextObj.descObj.key] === "") {
-        return this.$message.warning("请填写完整信息！");
+    addItem () {
+      const index = this.dataInfo.length - 1
+      if (this.dataInfo[index][this.keyTextObj.descObj.key] === '') {
+        return this.$message.warning('请填写完整信息！')
       }
       this.dataInfo.push({
-        [this.keyTextObj.descObj.key]: "",
-      });
+        [this.keyTextObj.descObj.key]: ''
+      })
     },
     // 删除
-    deleteItem(index) {
-      this.$confirm("确认是否删除?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+    deleteItem (index) {
+      this.$confirm('确认是否删除?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       })
         .then(() => {
           this.$message({
-            type: "success",
-            message: "删除成功!",
-          });
-          this.dataInfo.splice(index, 1);
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.dataInfo.splice(index, 1)
         })
-        .catch(() => {});
-    },
-  },
-};
+        .catch(() => {})
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-table thead {
@@ -245,4 +245,4 @@ export default {
 .add-btn {
   margin-left: 10px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/back/src/views/modules/ability/assignedScene/index.vue b/back/src/views/modules/ability/assignedScene/index.vue
index d1165cc4..287ebc29 100644
--- a/back/src/views/modules/ability/assignedScene/index.vue
+++ b/back/src/views/modules/ability/assignedScene/index.vue
@@ -3,7 +3,7 @@
     <div class="mod-ability__bsabilityai">
       <div class="second-title">
       <div
-   
+
         :class="[choose === 0 ? 'departmentStyle' : 'departmentStyle1']"
         @click="handleChose(0)"
       >
@@ -71,56 +71,56 @@
 </template>
 
 <script>
-import mixinViewModule from "@/mixins/view-module";
+import mixinViewModule from '@/mixins/view-module'
 
-import cityAdd from "./city-add";
-import areaAdd from "./area-add";
+import cityAdd from './city-add'
+import areaAdd from './area-add'
 export default {
   mixins: [mixinViewModule],
-  data() {
+  data () {
     return {
-      //市级挂接
-      cityVisible:false,
-      //基层挂接
-      areaVisible:false,
-      //tab切换
+      // 市级挂接
+      cityVisible: false,
+      // 基层挂接
+      areaVisible: false,
+      // tab切换
       choose: 0,
       tableData: [],
       childName: '',
       mixinViewModuleOptions: {
-        getDataListURL: "/fuse/page",
-        exportURL: "/ability/bsabilityai/export",
-        deleteURL: "/fuse",
+        getDataListURL: '/fuse/page',
+        exportURL: '/ability/bsabilityai/export',
+        deleteURL: '/fuse',
         getDataListIsPage: true,
-        deleteIsBatch: false,
+        deleteIsBatch: false
       },
       disabled: false,
       dataForm: {
-        name: "",
+        name: '',
         order: 'desc',
         orderField: 'create_date',
         type: '赋能场景',
-        district: 0//0市级 1基层
+        district: 0// 0市级 1基层
 
       },
       qp: false,
-      modalType: 'add',
-    };
+      modalType: 'add'
+    }
   },
   components: {
     areaAdd,
     cityAdd
   },
-  mounted() {
-    window.addEventListener("resize", this.a);
-    this.fullScreen();
+  mounted () {
+    window.addEventListener('resize', this.a)
+    this.fullScreen()
   },
   methods: {
-    handleChose(index) {
-      this.choose = index;
+    handleChose (index) {
+      this.choose = index
       this.searchData()
     },
-    deleteRow(id) {
+    deleteRow (id) {
       this.$confirm('确认是否删除?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -131,91 +131,94 @@ export default {
         }).then(res => {
           console.log('删除成功', res)
           if (res.data.code !== 0) {
-            return this.$message.error(res.msg);
+            return this.$message.error(res.msg)
           }
           this.$message({
             message: '删除成功',
-            type: "success",
+            type: 'success',
             duration: 500,
             onClose: () => {
               this.query()
-            },
-          });
+            }
+          })
         }).catch(err => {
-          this.$message.error(err);
+          this.$message.error(err)
         })
       }).catch(() => {
-      });
+      })
     },
     // 查询
-    searchData() {
-      this.dataForm.district=this.choose
+    searchData () {
+      this.dataForm.district = this.choose
       this.query()
     },
     // 重置
-    reset() {
-      this.dataForm.name = "";
+    reset () {
+      this.dataForm.name = ''
       this.query()
     },
     // 修改
-    handleUpdate(val) {
-      if(this.choose==0){
-        this.cityVisible=true
-      }else{
-        this.areaVisible=true
+    handleUpdate (val) {
+      if (this.choose == 0) {
+        this.cityVisible = true
+      } else {
+        this.areaVisible = true
       }
 
-      this.modalType = 'update';
+      this.modalType = 'update'
       const cloneVal = JSON.parse(JSON.stringify(val))
       this.$nextTick(() => {
-        if(this.choose==0){
+        if (this.choose == 0) {
           this.$refs.cityAdd.getDetail(cloneVal)
-      }else{
-        this.$refs.areaAdd.getDetail(cloneVal)
-      }
-     
+        } else {
+          this.$refs.areaAdd.getDetail(cloneVal)
+        }
       })
     },
     // 挂接
-    addServe() {
-      //this.addOrUpdateVisible = true
-      this.modalType = 'add';
-      if(this.choose===0){
-        this.cityVisible=true
-      }else{
-        this.areaVisible=true
+    addServe () {
+      // this.addOrUpdateVisible = true
+      this.modalType = 'add'
+      if (this.choose === 0) {
+        this.cityVisible = true
+      } else {
+        this.areaVisible = true
       }
     },
-    closeModal() {
-      this.cityVisible = false;
-      this.areaVisible=false;
+    closeModal () {
+      this.cityVisible = false
+      this.areaVisible = false
     },
     // 详情
-    showDetail(val) {
-      window.open(window.SITE_CONFIG.previewUrl + '#/integrationServicesDetails?id=' + val.id)
+    showDetail (val) {
+      if (val.district == 0) {
+        window.open(window.SITE_CONFIG.previewUrl + '#/integrationServicesDetails?id=' + val.id + '&districtType=0&type=典型赋能场景')
+      } else {
+        window.open(window.SITE_CONFIG.previewUrl + '#/integrationServicesDetails?id=' + val.id + '&districtType=1&type=典型赋能场景')
+      }
     },
-    fullScreen() {
+    fullScreen () {
       if (window.outerHeight === screen.availHeight) {
         if (window.outerWidth === screen.availWidth) {
           console.log(
-            "全屏1",
-          );
-          this.qp = false;
+            '全屏1'
+          )
+          this.qp = false
         } else {
           console.log(
-            "不是全屏2",
-          );
-          this.qp = true;
+            '不是全屏2'
+          )
+          this.qp = true
         }
       } else {
         console.log(
-          "不是全屏3",
-        );
-        this.qp = true;
+          '不是全屏3'
+        )
+        this.qp = true
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .second-title {
diff --git a/back/src/views/modules/workBench/components/DataStatistics.vue b/back/src/views/modules/workBench/components/DataStatistics.vue
new file mode 100644
index 00000000..7197a09f
--- /dev/null
+++ b/back/src/views/modules/workBench/components/DataStatistics.vue
@@ -0,0 +1,292 @@
+<!--
+ * @Author: Light
+ * @Date: 2023-01-04 16:29:33
+ * @LastEditors: Light
+ * @LastEditTime: 2023-01-06 10:50:23
+ * @Description: 数据统计
+-->
+<template>
+    <div class="data-statistics-box">
+      <div class="top">
+        <div class="item" v-for="item in topData" :key="item.type">
+          <div class="left">
+            <div>{{ item.type }}</div>
+            <div><span>{{ item.count }}</span>项</div>
+          </div>
+          <div class="right">
+            <div>
+              较上周<span>{{ item.weekly_change }}</span>
+              <svg v-if="item.weekly_change>0" t="1672972210380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28931" width="15" height="15"><path d="M470.016 976.896q-44.032 0-59.392-20.48t-15.36-65.536q0-20.48-0.512-64.512t-1.024-93.696-1.536-96.768-1.024-74.752q0-39.936-7.68-62.464t-35.328-21.504q-20.48 0-48.64-1.024t-49.664 0q-35.84 0-45.568-19.456t13.824-50.176q24.576-30.72 57.344-72.704t67.584-86.016 68.096-87.04 58.88-75.776q23.552-29.696 45.568-30.72t46.592 26.624q24.576 29.696 56.832 69.632t67.072 82.432 68.608 83.968 60.416 73.216q29.696 35.84 23.04 58.88t-43.52 23.04q-11.264 0-25.088 0.512t-29.184 1.024-30.208 1.024-27.136 0.512q-25.6 1.024-32.256 16.384t-5.632 41.984q0 29.696 0.512 77.824t1.024 100.352 1.536 101.376 1.024 79.872q0 13.312-2.048 27.648t-9.728 26.112-21.504 19.968-36.352 8.192q-27.648 0-52.736 0.512t-56.832 1.536z" p-id="28932" fill="#67c23a"></path></svg>
+              <svg v-else-if="item.weekly_change==0" t="1672902733121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5742" width="15" height="15"><path d="M152 560 152 464 472 464 472 560 152 560ZM552 560 552 464 872 464 872 560 552 560Z" fill="#409eff" p-id="5743"></path></svg>
+              <svg v-else t="1672972414152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29200" width="15" height="15"><path d="M564.224 44.032q43.008 0 58.368 20.48t15.36 65.536q0 20.48 0.512 64.512t0.512 93.696 0.512 96.768 0.512 74.752q0 38.912 7.68 61.952t35.328 22.016q19.456 0 48.128 1.024t49.152 1.024q35.84 0 45.568 18.944t-13.824 49.664q-24.576 30.72-57.344 72.704t-68.096 86.016-69.12 86.528-59.392 75.264q-23.552 29.696-45.568 30.72t-45.568-27.648q-24.576-29.696-57.344-69.632t-67.072-82.432-67.584-83.968-59.904-74.24q-29.696-35.84-22.528-58.88t44.032-23.04l24.576 0q14.336 0 29.696-0.512t30.208-1.536 26.112-1.024q26.624 0 32.768-15.36t6.144-41.984q0-29.696-0.512-77.824t-0.512-100.352-0.512-101.376-0.512-79.872q0-13.312 2.048-27.648t9.728-26.112 20.992-19.456 36.864-7.68q27.648 0 53.248-0.512t57.344-0.512z" p-id="29201" fill="#f56c6c"></path></svg>
+            </div>
+            <div>
+              较上月<span>{{ item.month_change }}</span>
+              <svg v-if="item.month_change>0" t="1672972210380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28931" width="15" height="15"><path d="M470.016 976.896q-44.032 0-59.392-20.48t-15.36-65.536q0-20.48-0.512-64.512t-1.024-93.696-1.536-96.768-1.024-74.752q0-39.936-7.68-62.464t-35.328-21.504q-20.48 0-48.64-1.024t-49.664 0q-35.84 0-45.568-19.456t13.824-50.176q24.576-30.72 57.344-72.704t67.584-86.016 68.096-87.04 58.88-75.776q23.552-29.696 45.568-30.72t46.592 26.624q24.576 29.696 56.832 69.632t67.072 82.432 68.608 83.968 60.416 73.216q29.696 35.84 23.04 58.88t-43.52 23.04q-11.264 0-25.088 0.512t-29.184 1.024-30.208 1.024-27.136 0.512q-25.6 1.024-32.256 16.384t-5.632 41.984q0 29.696 0.512 77.824t1.024 100.352 1.536 101.376 1.024 79.872q0 13.312-2.048 27.648t-9.728 26.112-21.504 19.968-36.352 8.192q-27.648 0-52.736 0.512t-56.832 1.536z" p-id="28932" fill="#67c23a"></path></svg>
+              <svg v-else-if="item.month_change==0" t="1672902733121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5742" width="15" height="15"><path d="M152 560 152 464 472 464 472 560 152 560ZM552 560 552 464 872 464 872 560 552 560Z" fill="#409eff" p-id="5743"></path></svg>
+              <svg v-else t="1672972414152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29200" width="15" height="15"><path d="M564.224 44.032q43.008 0 58.368 20.48t15.36 65.536q0 20.48 0.512 64.512t0.512 93.696 0.512 96.768 0.512 74.752q0 38.912 7.68 61.952t35.328 22.016q19.456 0 48.128 1.024t49.152 1.024q35.84 0 45.568 18.944t-13.824 49.664q-24.576 30.72-57.344 72.704t-68.096 86.016-69.12 86.528-59.392 75.264q-23.552 29.696-45.568 30.72t-45.568-27.648q-24.576-29.696-57.344-69.632t-67.072-82.432-67.584-83.968-59.904-74.24q-29.696-35.84-22.528-58.88t44.032-23.04l24.576 0q14.336 0 29.696-0.512t30.208-1.536 26.112-1.024q26.624 0 32.768-15.36t6.144-41.984q0-29.696-0.512-77.824t-0.512-100.352-0.512-101.376-0.512-79.872q0-13.312 2.048-27.648t9.728-26.112 20.992-19.456 36.864-7.68q27.648 0 53.248-0.512t57.344-0.512z" p-id="29201" fill="#f56c6c"></path></svg>
+            </div>
+          </div>
+          <el-image
+            :style="'width: ' + imgConfig[item.type].size + ' height: ' + imgConfig[item.type].size + ' position: absolute; bottom:' + imgConfig[item.type].bottom + ' right: '+imgConfig[item.type].right"
+            :src="imgConfig[item.type].url"
+            :fit="cover"></el-image>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="item-box" v-for="item in bottomData" :key="item.tip">
+          <div class="name">
+            <div>{{ item.tip }}<span>{{ item.dept_count }}</span>个</div>
+          </div>
+          <div class="item">
+            <div class="left">
+              <div>能力上架</div>
+              <div><span>{{ item.resource_sum }}</span>个</div>
+            </div>
+            <div class="right">
+              <div>
+                较上周<span>{{ item.resource_weekly_change }}</span>
+                <svg v-if="item.resource_weekly_change>0" t="1672972210380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28931" width="15" height="15"><path d="M470.016 976.896q-44.032 0-59.392-20.48t-15.36-65.536q0-20.48-0.512-64.512t-1.024-93.696-1.536-96.768-1.024-74.752q0-39.936-7.68-62.464t-35.328-21.504q-20.48 0-48.64-1.024t-49.664 0q-35.84 0-45.568-19.456t13.824-50.176q24.576-30.72 57.344-72.704t67.584-86.016 68.096-87.04 58.88-75.776q23.552-29.696 45.568-30.72t46.592 26.624q24.576 29.696 56.832 69.632t67.072 82.432 68.608 83.968 60.416 73.216q29.696 35.84 23.04 58.88t-43.52 23.04q-11.264 0-25.088 0.512t-29.184 1.024-30.208 1.024-27.136 0.512q-25.6 1.024-32.256 16.384t-5.632 41.984q0 29.696 0.512 77.824t1.024 100.352 1.536 101.376 1.024 79.872q0 13.312-2.048 27.648t-9.728 26.112-21.504 19.968-36.352 8.192q-27.648 0-52.736 0.512t-56.832 1.536z" p-id="28932" fill="#67c23a"></path></svg>
+                <svg v-else-if="item.resource_weekly_change==0" t="1672902733121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5742" width="15" height="15"><path d="M152 560 152 464 472 464 472 560 152 560ZM552 560 552 464 872 464 872 560 552 560Z" fill="#409eff" p-id="5743"></path></svg>
+                <svg v-else t="1672972414152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29200" width="15" height="15"><path d="M564.224 44.032q43.008 0 58.368 20.48t15.36 65.536q0 20.48 0.512 64.512t0.512 93.696 0.512 96.768 0.512 74.752q0 38.912 7.68 61.952t35.328 22.016q19.456 0 48.128 1.024t49.152 1.024q35.84 0 45.568 18.944t-13.824 49.664q-24.576 30.72-57.344 72.704t-68.096 86.016-69.12 86.528-59.392 75.264q-23.552 29.696-45.568 30.72t-45.568-27.648q-24.576-29.696-57.344-69.632t-67.072-82.432-67.584-83.968-59.904-74.24q-29.696-35.84-22.528-58.88t44.032-23.04l24.576 0q14.336 0 29.696-0.512t30.208-1.536 26.112-1.024q26.624 0 32.768-15.36t6.144-41.984q0-29.696-0.512-77.824t-0.512-100.352-0.512-101.376-0.512-79.872q0-13.312 2.048-27.648t9.728-26.112 20.992-19.456 36.864-7.68q27.648 0 53.248-0.512t57.344-0.512z" p-id="29201" fill="#f56c6c"></path></svg>
+              </div>
+              <div>
+                较上月<span>{{ item.resource_month_change }}</span>
+                <svg v-if="item.resource_month_change>0" t="1672972210380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28931" width="15" height="15"><path d="M470.016 976.896q-44.032 0-59.392-20.48t-15.36-65.536q0-20.48-0.512-64.512t-1.024-93.696-1.536-96.768-1.024-74.752q0-39.936-7.68-62.464t-35.328-21.504q-20.48 0-48.64-1.024t-49.664 0q-35.84 0-45.568-19.456t13.824-50.176q24.576-30.72 57.344-72.704t67.584-86.016 68.096-87.04 58.88-75.776q23.552-29.696 45.568-30.72t46.592 26.624q24.576 29.696 56.832 69.632t67.072 82.432 68.608 83.968 60.416 73.216q29.696 35.84 23.04 58.88t-43.52 23.04q-11.264 0-25.088 0.512t-29.184 1.024-30.208 1.024-27.136 0.512q-25.6 1.024-32.256 16.384t-5.632 41.984q0 29.696 0.512 77.824t1.024 100.352 1.536 101.376 1.024 79.872q0 13.312-2.048 27.648t-9.728 26.112-21.504 19.968-36.352 8.192q-27.648 0-52.736 0.512t-56.832 1.536z" p-id="28932" fill="#67c23a"></path></svg>
+                <svg v-else-if="item.resource_month_change==0" t="1672902733121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5742" width="15" height="15"><path d="M152 560 152 464 472 464 472 560 152 560ZM552 560 552 464 872 464 872 560 552 560Z" fill="#409eff" p-id="5743"></path></svg>
+                <svg v-else t="1672972414152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29200" width="15" height="15"><path d="M564.224 44.032q43.008 0 58.368 20.48t15.36 65.536q0 20.48 0.512 64.512t0.512 93.696 0.512 96.768 0.512 74.752q0 38.912 7.68 61.952t35.328 22.016q19.456 0 48.128 1.024t49.152 1.024q35.84 0 45.568 18.944t-13.824 49.664q-24.576 30.72-57.344 72.704t-68.096 86.016-69.12 86.528-59.392 75.264q-23.552 29.696-45.568 30.72t-45.568-27.648q-24.576-29.696-57.344-69.632t-67.072-82.432-67.584-83.968-59.904-74.24q-29.696-35.84-22.528-58.88t44.032-23.04l24.576 0q14.336 0 29.696-0.512t30.208-1.536 26.112-1.024q26.624 0 32.768-15.36t6.144-41.984q0-29.696-0.512-77.824t-0.512-100.352-0.512-101.376-0.512-79.872q0-13.312 2.048-27.648t9.728-26.112 20.992-19.456 36.864-7.68q27.648 0 53.248-0.512t57.344-0.512z" p-id="29201" fill="#f56c6c"></path></svg>
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="left">
+              <div>能力申请</div>
+              <div><span>{{ item.apply_sum }}</span>个</div>
+            </div>
+            <div class="right">
+              <div>
+                较上周<span>{{ item.apply_weekly_change }}</span>
+                <svg v-if="item.apply_weekly_change>0" t="1672972210380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28931" width="15" height="15"><path d="M470.016 976.896q-44.032 0-59.392-20.48t-15.36-65.536q0-20.48-0.512-64.512t-1.024-93.696-1.536-96.768-1.024-74.752q0-39.936-7.68-62.464t-35.328-21.504q-20.48 0-48.64-1.024t-49.664 0q-35.84 0-45.568-19.456t13.824-50.176q24.576-30.72 57.344-72.704t67.584-86.016 68.096-87.04 58.88-75.776q23.552-29.696 45.568-30.72t46.592 26.624q24.576 29.696 56.832 69.632t67.072 82.432 68.608 83.968 60.416 73.216q29.696 35.84 23.04 58.88t-43.52 23.04q-11.264 0-25.088 0.512t-29.184 1.024-30.208 1.024-27.136 0.512q-25.6 1.024-32.256 16.384t-5.632 41.984q0 29.696 0.512 77.824t1.024 100.352 1.536 101.376 1.024 79.872q0 13.312-2.048 27.648t-9.728 26.112-21.504 19.968-36.352 8.192q-27.648 0-52.736 0.512t-56.832 1.536z" p-id="28932" fill="#67c23a"></path></svg>
+                <svg v-else-if="item.apply_weekly_change==0" t="1672902733121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5742" width="15" height="15"><path d="M152 560 152 464 472 464 472 560 152 560ZM552 560 552 464 872 464 872 560 552 560Z" fill="#409eff" p-id="5743"></path></svg>
+                <svg v-else t="1672972414152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29200" width="15" height="15"><path d="M564.224 44.032q43.008 0 58.368 20.48t15.36 65.536q0 20.48 0.512 64.512t0.512 93.696 0.512 96.768 0.512 74.752q0 38.912 7.68 61.952t35.328 22.016q19.456 0 48.128 1.024t49.152 1.024q35.84 0 45.568 18.944t-13.824 49.664q-24.576 30.72-57.344 72.704t-68.096 86.016-69.12 86.528-59.392 75.264q-23.552 29.696-45.568 30.72t-45.568-27.648q-24.576-29.696-57.344-69.632t-67.072-82.432-67.584-83.968-59.904-74.24q-29.696-35.84-22.528-58.88t44.032-23.04l24.576 0q14.336 0 29.696-0.512t30.208-1.536 26.112-1.024q26.624 0 32.768-15.36t6.144-41.984q0-29.696-0.512-77.824t-0.512-100.352-0.512-101.376-0.512-79.872q0-13.312 2.048-27.648t9.728-26.112 20.992-19.456 36.864-7.68q27.648 0 53.248-0.512t57.344-0.512z" p-id="29201" fill="#f56c6c"></path></svg>
+              </div>
+              <div>
+                较上月<span>{{ item.apply_month_change }}</span>
+                <svg v-if="item.apply_month_change>0" t="1672972210380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28931" width="15" height="15"><path d="M470.016 976.896q-44.032 0-59.392-20.48t-15.36-65.536q0-20.48-0.512-64.512t-1.024-93.696-1.536-96.768-1.024-74.752q0-39.936-7.68-62.464t-35.328-21.504q-20.48 0-48.64-1.024t-49.664 0q-35.84 0-45.568-19.456t13.824-50.176q24.576-30.72 57.344-72.704t67.584-86.016 68.096-87.04 58.88-75.776q23.552-29.696 45.568-30.72t46.592 26.624q24.576 29.696 56.832 69.632t67.072 82.432 68.608 83.968 60.416 73.216q29.696 35.84 23.04 58.88t-43.52 23.04q-11.264 0-25.088 0.512t-29.184 1.024-30.208 1.024-27.136 0.512q-25.6 1.024-32.256 16.384t-5.632 41.984q0 29.696 0.512 77.824t1.024 100.352 1.536 101.376 1.024 79.872q0 13.312-2.048 27.648t-9.728 26.112-21.504 19.968-36.352 8.192q-27.648 0-52.736 0.512t-56.832 1.536z" p-id="28932" fill="#67c23a"></path></svg>
+                <svg v-else-if="item.apply_month_change==0" t="1672902733121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5742" width="15" height="15"><path d="M152 560 152 464 472 464 472 560 152 560ZM552 560 552 464 872 464 872 560 552 560Z" fill="#409eff" p-id="5743"></path></svg>
+                <svg v-else t="1672972414152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29200" width="15" height="15"><path d="M564.224 44.032q43.008 0 58.368 20.48t15.36 65.536q0 20.48 0.512 64.512t0.512 93.696 0.512 96.768 0.512 74.752q0 38.912 7.68 61.952t35.328 22.016q19.456 0 48.128 1.024t49.152 1.024q35.84 0 45.568 18.944t-13.824 49.664q-24.576 30.72-57.344 72.704t-68.096 86.016-69.12 86.528-59.392 75.264q-23.552 29.696-45.568 30.72t-45.568-27.648q-24.576-29.696-57.344-69.632t-67.072-82.432-67.584-83.968-59.904-74.24q-29.696-35.84-22.528-58.88t44.032-23.04l24.576 0q14.336 0 29.696-0.512t30.208-1.536 26.112-1.024q26.624 0 32.768-15.36t6.144-41.984q0-29.696-0.512-77.824t-0.512-100.352-0.512-101.376-0.512-79.872q0-13.312 2.048-27.648t9.728-26.112 20.992-19.456 36.864-7.68q27.648 0 53.248-0.512t57.344-0.512z" p-id="29201" fill="#f56c6c"></path></svg>
+              </div>
+            </div>
+          </div>
+          <div class="bx"></div>
+          <div class="bx"></div>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+export default {
+  name: '',
+  components: {
+
+  },
+  props: {
+
+  },
+  data () {
+    return {
+      sortList: ['四大类资源', '组件服务', '应用资源', '基础设施', '数据资源'],
+      imgConfig: {
+        四大类资源: {
+          url: require('@/assets/img/workBench/banner-gg.png'),
+          size: '80px;',
+          right: '20px;',
+          bottom: '40px;'
+        },
+        组件服务: {
+          url: require('@/assets/img/workBench/banner-zj.png'),
+          size: '60px;',
+          right: '20px;',
+          bottom: '48px;'
+        },
+        应用资源: {
+          url: require('@/assets/img/workBench/banner-yy.png'),
+          size: '60px;',
+          right: '20px;',
+          bottom: '43px;'
+        },
+        基础设施: {
+          url: require('@/assets/img/workBench/banner-jc.png'),
+          size: '60px;',
+          right: '20px;',
+          bottom: '46px;'
+        },
+        数据资源: {
+          url: require('@/assets/img/workBench/banner-sj.png'),
+          size: '60px;',
+          right: '20px;',
+          bottom: '50px;'
+        }
+      },
+      topData: [],
+      bottomData: []
+    }
+  },
+  methods: {
+  },
+  created () {
+    this.$http.get('/census/center/similitude').then(res => {
+      res.data.data = res.data.data.sort((a, b) => this.sortList.indexOf(a.type) - this.sortList.indexOf(b.type))
+      this.topData = res.data.data
+      console.log('获取数据', res.data.data)
+    })
+    this.$http.get('/census/center/similitude_dept').then(res => {
+      this.bottomData = res.data.data
+      console.log('获取数据', res.data.data)
+    })
+  },
+  mounted () {
+  }
+}
+</script>
+<style lang='scss' scoped>
+ .data-statistics-box{
+  padding:10px;
+  .top{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .item{
+      width: 290px;
+      height: 120px;
+      padding: 15px;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      background: #fff;
+      box-shadow: 2px 2px 5px #ccc;
+      border-radius: 10px;
+      position: relative;
+      .left{
+        width: 100px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        font-size: 16px;
+        div{
+          margin-bottom: 1px;
+        }
+        span{
+          font-size: 24px;
+          font-weight: 600;
+        }
+      }
+      .right{
+        width: 180px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        margin-top: 10px;
+        div{
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-bottom: 5px;
+          font-size: 14px;
+          color: #666;
+          span{
+            width: 30px;
+            margin-left: 30px;
+          }
+          svg{
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+  .bottom{
+    margin-top: 10px;
+    .item-box{
+      display: flex;
+      margin-top: 10px;
+      justify-content: space-between;
+      align-items: center;
+      .name{
+        width: 290px;
+        height: 80px;
+        padding: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #fff;
+        border-radius: 10px;
+        box-shadow: 2px 2px 5px #ccc;
+        div{
+          width: 200px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 20px;
+          span{
+            margin-left: 10px;
+            font-size: 28px;
+            font-weight: 600;
+          }
+        }
+      }
+      .item{
+        width: 290px;
+        height: 80px;
+        padding: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #fff;
+        border-radius: 10px;
+        box-shadow: 2px 2px 5px #ccc;
+        .left{
+          width: 100px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          font-size: 16px;
+          span{
+            font-size: 24px;
+            font-weight: 600;
+          }
+        }
+        .right{
+          width: 120px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+          margin-top: 10px;
+          div{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 5px;
+            font-size: 14px;
+            color: #666;
+            span{
+              width: 30px;
+              margin-left: 10px;
+            }
+            svg{
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+      .bx{
+        width: 290px;
+        height: 80px;
+      }
+    }
+  }
+ }
+</style>
diff --git a/back/src/views/modules/workBench/components/bottom-view.vue b/back/src/views/modules/workBench/components/bottom-view.vue
index 206a7e11..d0e95683 100644
--- a/back/src/views/modules/workBench/components/bottom-view.vue
+++ b/back/src/views/modules/workBench/components/bottom-view.vue
@@ -16,13 +16,14 @@
         </div>
         <div class="more" @click="jumpTo">查看更多 ></div>
       </div>
-      <div
+      <!-- <div
       class="no-data"
       v-else
       style="display: flex; align-items: center; justify-content: center"
     >
       暂无数据
-    </div>
+    </div> -->
+    <el-empty v-else style="display: flex;flex-direction: column;justify-content: center; align-items: center;" description="暂无数据" :image-size="150"></el-empty>
 
     </div>
     <!-- 部门推荐能力 -->
diff --git a/back/src/views/modules/workBench/components/dept-chart-view.vue b/back/src/views/modules/workBench/components/dept-chart-view.vue
index 844c5dcc..6b89a287 100644
--- a/back/src/views/modules/workBench/components/dept-chart-view.vue
+++ b/back/src/views/modules/workBench/components/dept-chart-view.vue
@@ -3,7 +3,8 @@
         <div class="title">{{ title }}</div>
         <div v-if="dataListCopy.length > 0" style="width:260px; height:232px" class="dept-chart-view" :id="id">
         </div>
-        <div class="no-data" v-else>暂无数据</div>
+        <!-- <div class="no-data" v-else>暂无数据</div> -->
+        <el-empty v-else style="display: flex;flex-direction: column;justify-content: center; align-items: center;" description="暂无数据" :image-size="150"></el-empty>
     </div>
 
 </template>
diff --git a/back/src/views/modules/workBench/components/frequency-top5-view.vue b/back/src/views/modules/workBench/components/frequency-top5-view.vue
index 246708b7..6ee1a0bf 100644
--- a/back/src/views/modules/workBench/components/frequency-top5-view.vue
+++ b/back/src/views/modules/workBench/components/frequency-top5-view.vue
@@ -33,7 +33,8 @@
                 <div class="count-text">{{ formatCount(data.count) }}</div>
             </div>
         </div>
-        <div class="no-data" v-else>暂无数据</div>
+        <!-- <div class="no-data" v-else>暂无数据</div> -->
+        <el-empty v-else style="display: flex;flex-direction: column;justify-content: center; align-items: center;" description="暂无数据" :image-size="150"></el-empty>
 
     </div>
 </template>
diff --git a/back/src/views/modules/workBench/components/risk-view.vue b/back/src/views/modules/workBench/components/risk-view.vue
index e65320da..59fa41c3 100644
--- a/back/src/views/modules/workBench/components/risk-view.vue
+++ b/back/src/views/modules/workBench/components/risk-view.vue
@@ -21,13 +21,14 @@
         </div>
       </div>
     </div>
-    <div
+    <!-- <div
       class="no-data"
       v-else
       style="display: flex; align-items: center; justify-content: center"
     >
       暂无数据
-    </div>
+    </div> -->
+    <el-empty v-else style="display: flex;flex-direction: column;justify-content: center; align-items: center;" description="暂无数据" :image-size="150"></el-empty>
   </div>
 </template>
 <script>
diff --git a/back/src/views/modules/workBench/workBench.vue b/back/src/views/modules/workBench/workBench.vue
index d3e6b140..13214218 100644
--- a/back/src/views/modules/workBench/workBench.vue
+++ b/back/src/views/modules/workBench/workBench.vue
@@ -1,5 +1,9 @@
 <template>
     <div class="work-brnch-box">
+        <!-- 数据统计 -->
+      <div class="data-statistics" v-if="($store.state.user.roleIdList.indexOf('运维管理员') !== -1)">
+        <DataStatistics></DataStatistics>
+      </div>
         <!-- 上 -->
         <div class="flex-row-start top">
             <div class="flex-row-start dept-left">
@@ -33,6 +37,7 @@
 import BottomView from '../workBench/components/bottom-view.vue'
 import CenterView from '../workBench/components/center-view.vue'
 import DeptChartView from '../workBench/components/dept-chart-view.vue'
+import DataStatistics from './components/DataStatistics'
 import deptTodoView from '../workBench/components/dept-todo-view.vue'
 import * as Apis from './api.js'
 import bus from '@/views/bus.js'
@@ -41,7 +46,8 @@ export default {
     deptTodoView,
     BottomView,
     CenterView,
-    DeptChartView
+    DeptChartView,
+    DataStatistics
   },
   data () {
     return {
@@ -241,7 +247,12 @@ export default {
 }
 
 .work-brnch-box {
-
+  .data-statistics{
+    background: #fff;
+    height: 324px;
+    margin-bottom: 16px;
+    box-shadow: 2px 2px 5px #ccc;
+  }
     .top {
         height: 284px;
         margin-bottom: 16px;
diff --git a/front/src/assets/menu/down.png b/front/src/assets/menu/down.png
index f9bb3c31..da86b8f9 100644
Binary files a/front/src/assets/menu/down.png and b/front/src/assets/menu/down.png differ
diff --git a/front/src/assets/menu/line-flow.png b/front/src/assets/menu/line-flow.png
new file mode 100644
index 00000000..76079145
Binary files /dev/null and b/front/src/assets/menu/line-flow.png differ
diff --git a/front/src/views/home/integrationServicesDetails.vue b/front/src/views/home/integrationServicesDetails.vue
index a4f77466..3c8cf180 100644
--- a/front/src/views/home/integrationServicesDetails.vue
+++ b/front/src/views/home/integrationServicesDetails.vue
@@ -2,16 +2,27 @@
 <template>
   <div class="IntegrationServicesDetails" :class="{ fixed2: scrollTop >= 600 }">
     <home-header></home-header>
-    <detail-back v-show="!hiddenBackFlag" :returnType="returnType" :districtType="districtType"></detail-back>
+    <detail-back
+      v-show="!hiddenBackFlag"
+      :returnType="returnType"
+      :districtType="districtType"
+    ></detail-back>
 
     <template v-if="districtType == 0 || returnType == '打包模式'">
       <!-- 头部基本信息 -->
-      <application-top-details :dataList="detailInfoObj" :navList="navList"></application-top-details>
+      <application-top-details
+        :dataList="detailInfoObj"
+        :navList="navList"
+      ></application-top-details>
       <!-- 导航 -->
       <div :class="{ fixed: scrollTop >= 600 }" style="z-index: 10012">
         <div class="application-navigation">
           <template v-for="nav in navList" :key="nav.key">
-            <div class="nav" :class="{ selectNow: nav.key == selectNow }" @click="selectNav(nav.key)">
+            <div
+              class="nav"
+              :class="{ selectNow: nav.key == selectNow }"
+              @click="selectNav(nav.key)"
+            >
               {{ nav.name }}
               <span class="line"></span>
             </div>
@@ -30,11 +41,16 @@
           </div>
 
           <div class="content" style="margin-left: 0.5rem">
-            <div class="content-item" v-for="(item, i) in painPoint" :key="i" style="
-              margin-bottom: 0.2rem;
-              font-size: 0.18rem;
-              line-height: 0.3rem;
-            ">
+            <div
+              class="content-item"
+              v-for="(item, i) in painPoint"
+              :key="i"
+              style="
+                margin-bottom: 0.2rem;
+                font-size: 0.18rem;
+                line-height: 0.3rem;
+              "
+            >
               {{ i + 1 + '、' + item.description }}
             </div>
           </div>
@@ -42,17 +58,26 @@
       </div>
 
       <!-- 解决方案 -->
-      <div id="integration-solution" class="solution scrollBox" style="background: #eee">
+      <div
+        id="integration-solution"
+        class="solution scrollBox"
+        style="background: #eee"
+      >
         <div class="title-1">
           <DetalsTitle title="解决方案" type="SOLUTION"></DetalsTitle>
         </div>
         <div class="flex-row-center">
           <div class="content" style="background: #fff; margin-top: 0.2rem">
-            <div class="content-item" v-for="(item, i) in solution" :key="i" style="
-              margin-bottom: 0.2rem;
-              font-size: 0.18rem;
-              line-height: 0.3rem;
-            ">
+            <div
+              class="content-item"
+              v-for="(item, i) in solution"
+              :key="i"
+              style="
+                margin-bottom: 0.2rem;
+                font-size: 0.18rem;
+                line-height: 0.3rem;
+              "
+            >
               {{ i + 1 + '、' + item.description }}
             </div>
           </div>
@@ -64,42 +89,97 @@
         <div class="title-1">
           <DetalsTitle title="使用能力" type="ABILITY"></DetalsTitle>
         </div>
-        <div class="flex-row-center combine-content" v-for="(item, i) in combineList" :key="i" style="display: block">
-          <div class="top" style="font-size: 0.24rem; text-align: center; margin-bottom: 0.3rem">
+        <div
+          class="flex-row-center combine-content"
+          v-for="(item, i) in combineList"
+          :key="i"
+          style="display: block"
+        >
+          <div
+            class="top"
+            style="
+              font-size: 0.24rem;
+              text-align: center;
+              margin-bottom: 0.3rem;
+            "
+          >
             {{ i == 0 ? '基础设施' : i == 1 ? '组件服务' : '数据资源' }}
           </div>
-          <div class="data-count" style="font-size: 0.14rem; text-align: right; margin-bottom: 0.2rem">
+          <div
+            class="data-count"
+            style="font-size: 0.14rem; text-align: right; margin-bottom: 0.2rem"
+          >
             <span style="color: #909399">
               共
               {{
-  i == 0
-  ? infrastructureCount
-  : i == 1
-    ? componentCount
-    : dataSourceCount
+                i == 0
+                  ? infrastructureCount
+                  : i == 1
+                  ? componentCount
+                  : dataSourceCount
               }}项，示例如下：
             </span>
           </div>
           <div class="bottom" style="display: flex; align-items: flex-start">
             <div class="title" :class="'title' + i"></div>
             <div class="table-box" v-if="returnType == '典型赋能场景'">
-              <el-table class="table" :data="item.list" stripe :header-cell-style="{ 'text-align': 'center' }">
-                <el-table-column prop="name" label="资源名称" align="center" width="200"
-                  show-overflow-tooltip="true"></el-table-column>
-                <el-table-column prop="type" label="资源类型" align="center" width="100"
-                  show-overflow-tooltip="true"></el-table-column>
-                <el-table-column prop="dept" label="来源部门" align="center" width="300"
-                  show-overflow-tooltip="true"></el-table-column>
+              <el-table
+                class="table"
+                :data="item.list"
+                stripe
+                :header-cell-style="{ 'text-align': 'center' }"
+              >
+                <el-table-column
+                  prop="name"
+                  label="资源名称"
+                  align="center"
+                  width="200"
+                  show-overflow-tooltip="true"
+                ></el-table-column>
+                <el-table-column
+                  prop="type"
+                  label="资源类型"
+                  align="center"
+                  width="100"
+                  show-overflow-tooltip="true"
+                ></el-table-column>
+                <el-table-column
+                  prop="dept"
+                  label="来源部门"
+                  align="center"
+                  width="300"
+                  show-overflow-tooltip="true"
+                ></el-table-column>
               </el-table>
             </div>
             <div class="table-box" v-else>
-              <el-table class="table" :data="item.list" stripe :header-cell-style="{ 'text-align': 'center' }">
-                <el-table-column prop="name" label="资源名称" align="center" width="200"
-                  show-overflow-tooltip="true"></el-table-column>
-                <el-table-column prop="platform" label="资源类型" align="center" width="100"
-                  show-overflow-tooltip="true"></el-table-column>
-                <el-table-column prop="dept" label="能力来源" align="center" width="300"
-                  show-overflow-tooltip="true"></el-table-column>
+              <el-table
+                class="table"
+                :data="item.list"
+                stripe
+                :header-cell-style="{ 'text-align': 'center' }"
+              >
+                <el-table-column
+                  prop="name"
+                  label="资源名称"
+                  align="center"
+                  width="200"
+                  show-overflow-tooltip="true"
+                ></el-table-column>
+                <el-table-column
+                  prop="platform"
+                  label="资源类型"
+                  align="center"
+                  width="100"
+                  show-overflow-tooltip="true"
+                ></el-table-column>
+                <el-table-column
+                  prop="dept"
+                  label="能力来源"
+                  align="center"
+                  width="300"
+                  show-overflow-tooltip="true"
+                ></el-table-column>
               </el-table>
             </div>
           </div>
@@ -107,7 +187,11 @@
       </div>
 
       <!-- 构建步骤 -->
-      <div id="integration-step" class="step scrollBox" style="background: #eee">
+      <div
+        id="integration-step"
+        class="step scrollBox"
+        style="background: #eee"
+      >
         <div class="title-1">
           <DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
         </div>
@@ -132,31 +216,43 @@
             <div class="li1" v-for="(item, i) in step" :key="i">
               <div>
                 <div class="node">
-
-                  <div class="step-span">{{ i+ 1}}</div>
+                  <div class="step-span">{{ i + 1 }}</div>
                   <div>
-                    <div class="step-question">第{{ i+ 1}}步:{{ item.question }}</div>
-                    <div class="question-son" v-for="(itemson, i) in item.answer" :key="i">
-                      <img src="~@/assets/home/arrow.png" style="margin-right:8px" />{{ i+ 1}}>{{ itemson.answer }}
+                    <div class="step-question">
+                      第{{ i + 1 }}步:{{ item.question }}
+                    </div>
+                    <div
+                      class="question-son"
+                      v-for="(itemson, i) in item.answer"
+                      :key="i"
+                    >
+                      <img
+                        src="~@/assets/home/arrow.png"
+                        style="margin-right: 8px"
+                      />
+                      {{ i + 1 }}>{{ itemson.answer }}
                     </div>
                   </div>
-
                 </div>
 
                 <div class="borderLeft"></div>
               </div>
               <div class="advice"></div>
             </div>
-
           </div>
         </div>
-
       </div>
     </template>
     <template v-else>
       <div class="area">
-        <a-image style="width:615px;height:345px" :preview="false" :src="bgImg || imgSrcYyzy" />
-        <div class="label-name">{{ detailInfoObj.name }} <span class="label">
+        <a-image
+          style="width: 615px; height: 345px"
+          :preview="false"
+          :src="bgImg || imgSrcYyzy"
+        />
+        <div class="label-name">
+          {{ detailInfoObj.name }}
+          <span class="label">
             {{ detailInfoObj.type }}
           </span>
           <span class="label1">
@@ -176,697 +272,688 @@
 </template>
 
 <script setup>
-import ApplicationTopDetails from './components/ApplicationTopDetails.vue'
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
-import HomeFooter from '@/views/newHome/components/Footer'
-import HomeHeader from '@/views/home/components/header'
-import detailBack from '@/views/home/detailBack.vue'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useRouter } from 'vue-router'
-import { getIntegrationDetail } from '@/api/home'
-import mybus from '@/myplugins/mybus'
-import { message } from 'ant-design-vue'
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const painPoint = ref([])
-const solution = ref([])
-const step = ref([])
-const bgImg = ref('')
-const dataSourceCount = ref(0)
-const infrastructureCount = ref(0)
-const componentCount = ref(0)
-const id = router.currentRoute.value.query.id
-const returnType = router.currentRoute.value.query.type
-const districtType = router.currentRoute.value.query.districtType
-const hiddenBackFlag = router.currentRoute.value.query.hiddenBackFlag
-const imgSrcYyzy = ref(require('@/assets/newHome/empty.png'))
-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) &&
-    document.querySelector('#' + id).offsetTop - 50
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-
-const navList = ref([
-  {
-    name: '场景痛点',
-    key: 'integration-pain-point',
-  },
-  {
-    name: '解决方案',
-    key: 'integration-solution',
-  },
-  {
-    name: '使用能力',
-    key: 'integration-ability',
-  },
-  {
-    name: '构建步骤',
-    key: 'integration-step',
-  },
-])
-
-const selectNow = ref('integration-pain-point')
-
-const useWayShowList = ref([
-  {
-    title: '归属部门',
-    info: {
-      deptUser: '部门联系人',
-      mobile: '联系人电话',
-    },
-  },
-  {
-    title: '服务商',
-    info: {
-      providerUser: '服务商联系人',
-      providerMobile: '联系人电话',
-    },
-  },
-])
-
-const combineList = ref([
-  {
-    title: '基础设施',
-    list: [],
-  },
-  {
-    title: '组件服务',
-    list: [],
-  },
-  {
-    title: '数据资源',
-    list: [],
-  },
-])
-const detailInfoObj = ref({})
-
-onMounted(() => {
-  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 ApplicationTopDetails from './components/ApplicationTopDetails.vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
+  import HomeFooter from '@/views/newHome/components/Footer'
+  import HomeHeader from '@/views/home/components/header'
+  import detailBack from '@/views/home/detailBack.vue'
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { getIntegrationDetail } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const painPoint = ref([])
+  const solution = ref([])
+  const step = ref([])
+  const bgImg = ref('')
+  const dataSourceCount = ref(0)
+  const infrastructureCount = ref(0)
+  const componentCount = ref(0)
+  const id = router.currentRoute.value.query.id
+  const returnType = router.currentRoute.value.query.type
+  const districtType = router.currentRoute.value.query.districtType
+  const hiddenBackFlag = router.currentRoute.value.query.hiddenBackFlag
+  const imgSrcYyzy = ref(require('@/assets/newHome/empty.png'))
+  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) &&
+      document.querySelector('#' + id).offsetTop - 50
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
   })
-})
 
-const selectNav = (key) => {
-  selectNow.value = key
-  mybus.emit('flyToView', selectNow.value)
-}
-
-const getAttrValue = (fuseAttrList, text) => {
-  let _obj = fuseAttrList.find((v) => v.attrType === text) || {}
-  let data = JSON.parse(_obj.attrValue || '[]') || []
-  return data
-}
-
-// 融合服务--详情
-const getIntegrationServicesDeatil = (id) => {
-  getIntegrationDetail(id).then(
-    (res) => {
-      if (res.data.code !== 0) {
-        return message.error(res.data.msg)
-      }
-      detailInfoObj.value = res.data.data || {}
-      dataSourceCount.value = res.data.data.dataSourceCount || 0
-      infrastructureCount.value = res.data.data.infrastructureCount || 0
-      componentCount.value = res.data.data.componentCount || 0
-      // 资源属性
-      let fuseAttrList = res.data.data.fuseAttrList || []
-
-      let questionValue =
-        fuseAttrList.find((v) => v.attrType === '常见问题') || {}
-      let questionObj = {
-        attrType: '常见问题',
-        attrValue: questionValue.attrValue || '[]',
-      }
-      painPoint.value = getAttrValue(fuseAttrList, '场景痛点')
-      solution.value = getAttrValue(fuseAttrList, '解决方案')
-
-      step.value = getAttrValue(fuseAttrList, '构建步骤')
-
-      bgImg.value =
-        fuseAttrList.find((v) => v.attrType === '服务图片').attrValue || ''
-      let areaObj = {
-        attrType: '应用领域',
-        attrValue: '',
-      }
-      if (returnType === '典型赋能场景') {
-        let fuseResourceList = res.data.data.fuseAttrList || []
-
-        combineList.value.forEach((item) => {
-
-          let arr = []
-          let resource = fuseResourceList.filter(
-            (v) => v.attrType == item.title
-          )
-
-          //   let a=resource[0].attrValue
-          let resourceArrList = JSON.parse(resource[0].attrValue)
-          if (resourceArrList.length > 0) {
-
-            arr = resourceArrList.map((res) => ({
-              name: res.name,
-              dept: res.dept,
-              type: res.type,
-
-            }))
-            item.list = arr
-          }
-
-        })
-      } else {
-        // 融合关系
-        let fuseResourceList = res.data.data.fuseResourceList || []
-        combineList.value.forEach((item) => {
-          let arr = []
-          let resource = fuseResourceList.filter(
-            (v) => v.resource && v.type == item.title
-          )
-          if (resource.length > 0) {
-            if (item.title === '基础设施') {
-              arr = resource.map((res) => ({
-                id: res.resource.idtCameraChannel,
-                name: res.resource.channelName,
-                dept: res.resource.nodeName
-                  .split('-')
-                  .splice(1)
-                  .join('-')
-                  .slice(1),
-                platform: '视频资源',
-              }))
-            } else if (item.title === '组件服务') {
-              arr = resource.map((res) => ({
-                id: res.resource.id,
-                name: res.resource.name,
-                dept: res.resource.deptName,
-                platform:
-                  res.resource.infoList.find(
-                    (item) => item.attrType === '组件类型'
-                  )?.attrValue || '组件服务',
-              }))
-            } else if (item.title === '数据资源') {
-              arr = resource.map((res) => ({
-                id: res.resource.resourceId,
-                name: res.resource.resourceName,
-                dept: res.resource.deptName,
-                platform: '数据资源',
-              }))
-            }
-          }
-
-          item.list = arr
-        })
-      }
-
-
-      detailInfoObj.value.infoList = []
-      detailInfoObj.value.infoList.push(questionObj)
-      detailInfoObj.value.infoList.push(areaObj)
+  const navList = ref([
+    {
+      name: '场景痛点',
+      key: 'integration-pain-point',
     },
-    (err) => {
-      message.error(err)
-    }
-  )
-}
-getIntegrationServicesDeatil(id)
+    {
+      name: '解决方案',
+      key: 'integration-solution',
+    },
+    {
+      name: '使用能力',
+      key: 'integration-ability',
+    },
+    {
+      name: '构建步骤',
+      key: 'integration-step',
+    },
+  ])
 
-function handleOpenUrl(type) {
-  let obj =
-    (detailInfoObj.value.fuseAttrList || []).find(
-      (v) => v.attrType == type
-    ) || {}
-  let url = obj.attrValue || ''
-  if (!obj.attrValue) {
-    return message.error('错误的文档链接地址！')
+  const selectNow = ref('integration-pain-point')
+
+  const useWayShowList = ref([
+    {
+      title: '归属部门',
+      info: {
+        deptUser: '部门联系人',
+        mobile: '联系人电话',
+      },
+    },
+    {
+      title: '服务商',
+      info: {
+        providerUser: '服务商联系人',
+        providerMobile: '联系人电话',
+      },
+    },
+  ])
+
+  const combineList = ref([
+    {
+      title: '基础设施',
+      list: [],
+    },
+    {
+      title: '组件服务',
+      list: [],
+    },
+    {
+      title: '数据资源',
+      list: [],
+    },
+  ])
+  const detailInfoObj = ref({})
+
+  onMounted(() => {
+    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 openScene = (val) => {
+    window.open(val, '_blank')
+  }
+  const selectNav = (key) => {
+    selectNow.value = key
+    mybus.emit('flyToView', selectNow.value)
   }
-  window.open(
-    window.SITE_CONFIG.previewUrl +
-    'hisense_office/onlinePreview?url=' +
-    btoa(encodeURI(url))
-  )
-}
 
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  const getAttrValue = (fuseAttrList, text) => {
+    let _obj = fuseAttrList.find((v) => v.attrType === text) || {}
+    let data = JSON.parse(_obj.attrValue || '[]') || []
+    return data
+  }
+
+  // 融合服务--详情
+  const getIntegrationServicesDeatil = (id) => {
+    getIntegrationDetail(id).then(
+      (res) => {
+        if (res.data.code !== 0) {
+          return message.error(res.data.msg)
+        }
+        detailInfoObj.value = res.data.data || {}
+        dataSourceCount.value = res.data.data.dataSourceCount || 0
+        infrastructureCount.value = res.data.data.infrastructureCount || 0
+        componentCount.value = res.data.data.componentCount || 0
+        // 资源属性
+        let fuseAttrList = res.data.data.fuseAttrList || []
+
+        let questionValue =
+          fuseAttrList.find((v) => v.attrType === '常见问题') || {}
+        let questionObj = {
+          attrType: '常见问题',
+          attrValue: questionValue.attrValue || '[]',
+        }
+        painPoint.value = getAttrValue(fuseAttrList, '场景痛点')
+        solution.value = getAttrValue(fuseAttrList, '解决方案')
+
+        step.value = getAttrValue(fuseAttrList, '构建步骤')
+
+        bgImg.value =
+          fuseAttrList.find((v) => v.attrType === '服务图片').attrValue || ''
+        let areaObj = {
+          attrType: '应用领域',
+          attrValue: '',
+        }
+        if (returnType === '典型赋能场景') {
+          let fuseResourceList = res.data.data.fuseAttrList || []
+
+          combineList.value.forEach((item) => {
+            let arr = []
+            let resource = fuseResourceList.filter(
+              (v) => v.attrType == item.title
+            )
+
+            //   let a=resource[0].attrValue
+            let resourceArrList = JSON.parse(resource[0].attrValue)
+            if (resourceArrList.length > 0) {
+              arr = resourceArrList.map((res) => ({
+                name: res.name,
+                dept: res.dept,
+                type: res.type,
+              }))
+              item.list = arr
+            }
+          })
+        } else {
+          // 融合关系
+          let fuseResourceList = res.data.data.fuseResourceList || []
+          combineList.value.forEach((item) => {
+            let arr = []
+            let resource = fuseResourceList.filter(
+              (v) => v.resource && v.type == item.title
+            )
+            if (resource.length > 0) {
+              if (item.title === '基础设施') {
+                arr = resource.map((res) => ({
+                  id: res.resource.idtCameraChannel,
+                  name: res.resource.channelName,
+                  dept: res.resource.nodeName
+                    .split('-')
+                    .splice(1)
+                    .join('-')
+                    .slice(1),
+                  platform: '视频资源',
+                }))
+              } else if (item.title === '组件服务') {
+                arr = resource.map((res) => ({
+                  id: res.resource.id,
+                  name: res.resource.name,
+                  dept: res.resource.deptName,
+                  platform:
+                    res.resource.infoList.find(
+                      (item) => item.attrType === '组件类型'
+                    )?.attrValue || '组件服务',
+                }))
+              } else if (item.title === '数据资源') {
+                arr = resource.map((res) => ({
+                  id: res.resource.resourceId,
+                  name: res.resource.resourceName,
+                  dept: res.resource.deptName,
+                  platform: '数据资源',
+                }))
+              }
+            }
+
+            item.list = arr
+          })
+        }
+
+        detailInfoObj.value.infoList = []
+        detailInfoObj.value.infoList.push(questionObj)
+        detailInfoObj.value.infoList.push(areaObj)
+      },
+      (err) => {
+        message.error(err)
+      }
+    )
+  }
+  getIntegrationServicesDeatil(id)
+
+  function handleOpenUrl(type) {
+    let obj =
+      (detailInfoObj.value.fuseAttrList || []).find(
+        (v) => v.attrType == type
+      ) || {}
+    let url = obj.attrValue || ''
+    if (!obj.attrValue) {
+      return message.error('错误的文档链接地址！')
+    }
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(url))
+    )
+  }
+
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 
 <style lang="less" scoped>
-.area {
-  padding-top: 93px;
-  text-align: center;
-  margin-bottom: 32px;
+  .area {
+    padding-top: 93px;
+    text-align: center;
+    margin-bottom: 32px;
 
-  .label-name {
-    font-size: 26px;
-    color: #212121;
-    font-weight: bold;
-    margin-top: 32px;
+    .label-name {
+      font-size: 26px;
+      color: #212121;
+      font-weight: bold;
+      margin-top: 32px;
+    }
+
+    .label {
+      padding: 0.01rem 0.1rem;
+      margin-right: 0.1rem;
+      border-radius: 0.13rem;
+      font-size: 14px;
+      color: #fff;
+      background: #7294c8;
+    }
+
+    .label1 {
+      padding: 0.01rem 0.1rem;
+      margin-right: 0.1rem;
+      border-radius: 0.13rem;
+      font-size: 14px;
+      color: #fff;
+      background: #c66132;
+    }
+
+    .rukou {
+      margin-top: 24px;
+      background: #0058e1;
+      color: #ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+    }
   }
 
-
-  .label {
-    padding: 0.01rem 0.1rem;
-    margin-right: 0.1rem;
-    border-radius: 0.13rem;
-    font-size: 14px;
-    color: #fff;
-    background: #7294c8;
+  .area-desc {
+    background: #f6f7f9;
+    padding: 24px;
+    width: 1300px;
+    margin-left: 343px;
+    margin-bottom: 24px;
   }
 
-  .label1 {
-    padding: 0.01rem 0.1rem;
-    margin-right: 0.1rem;
-    border-radius: 0.13rem;
-    font-size: 14px;
-    color: #fff;
-    background: #c66132;
-  }
-
-  .rukou {
-    margin-top: 24px;
-    background: #0058e1;
-    color: #ffffff;
-    width: 90px;
-    height: 32px;
-    border-radius: 2px;
-    border: 1px #0058e1 solid;
-
-  }
-
-}
-
-.area-desc {
-  background: #f6f7f9;
-  padding: 24px;
-  width: 1300px;
-  margin-left: 343px;
-  margin-bottom: 24px;
-}
-
-.flex-row-between {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.flex-row-start {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.flex-row-center {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.IntegrationServicesDetails {
-  .fixed {
-    position: fixed !important;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-  }
-
-  .fixed2>div:nth-of-type(3) {
-    margin-top: 0.84rem;
-  }
-
-  .application-navigation {
-    width: 19.12rem;
-    height: 0.84rem;
-    line-height: 0.8rem;
+  .flex-row-between {
     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;
-      }
-    }
-
-    .selectNow {
-      color: #526aff;
-
-      .line {
-        background: #526aff;
-      }
-    }
-  }
-}
-
-.use-way {
-  padding: 0.8rem 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .title-1 {
-    margin-bottom: 0.3rem;
-  }
-
-  .left {
-    .btn {
-      padding: 10px 20px;
-      color: #526aff;
-      background: #fff;
-      border-radius: 50px;
-      margin: 10px;
-      font-size: 0.2rem;
-      width: 150px;
-      text-align: center;
-      cursor: pointer;
-    }
-
-    .btn-box {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-    }
-  }
-
-  .content {
-    display: flex;
-    width: 13rem;
+    flex-direction: row;
+    align-items: center;
     justify-content: space-between;
-
-    .word-bg {
-      background: linear-gradient(90deg, #7184fc, #94a3fc) !important;
-    }
-
-    .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;
-      justify-content: center;
-
-      .card-title {
-        font-size: 0.26rem;
-        color: #212956;
-        margin-bottom: 0.2rem;
-        line-height: 0.26rem;
-      }
-
-      .content-card-item {
-        width: 50%;
-
-        .card-text {
-          margin-right: 0.2rem;
-          color: rgba(33, 41, 86, 0.8);
-          font-size: 0.2rem;
-          max-width: 2.8rem;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-        }
-
-        div:first-child {
-          display: block;
-        }
-      }
-    }
-  }
-}
-
-.pain-point {
-  padding: 0.8rem 0;
-  background: rgb(247, 248, 250);
-
-  .bg {
-    height: 3rem;
-    width: 3rem;
-    // background: url('~@/assets/home/rhfw_square.png') no-repeat;
-    // background-size: 100%;
-    margin-top: 0.3rem;
   }
 
-  .cjtd {
-    width: 5.75rem;
-    height: 3.4rem;
-    background: url('~@/assets/home/fn/cjtd.png') no-repeat;
-    background-size: 100%;
-  }
-
-  .cjtd img {
-    width: 100%;
-    height: 100%;
-  }
-
-  .content {
-    overflow: auto;
-    height: 3rem;
-    width: 7rem;
-    margin-top: 0.3rem;
-
-    .content-item {
-      font-size: 16px;
-      margin: 0rem 0rem 0.1rem 0.1rem;
-    }
-  }
-}
-
-.solution {
-  padding: 0.8rem 0;
-  background: rgb(247, 248, 250);
-
-  .content {
-    width: 11rem;
-
-    .content-item {
-      font-size: 16px;
-      margin: 0.3rem;
-    }
-  }
-}
-
-.step {
-  padding: 0.8rem 0;
-  background: rgb(247, 248, 250);
-
-  .step-content {
-    margin: 0.3rem 4.5rem;
-    padding: 0.3rem;
-    background: #fff;
-
-    .left-process {
-
-      padding-left: 18px;
-      padding-top: 24px;
-
-      .li1 {
-        list-style: none;
-        box-sizing: border-box;
-        padding-left: 20px;
-        position: relative;
-      }
-
-      .borderLeft {
-        width: 1px;
-        height: 100%;
-        background-color: #e8f0fc;
-        position: absolute;
-        top: 11.225px;
-        bottom: 0;
-        left: -1px;
-      }
-
-
-      .step-question {
-        color: #0058e1;
-        font-weight: bold;
-        font-size: 20px;
-        padding-top: 8px;
-        margin-left: 12px;
-        margin-bottom: 15px;
-      }
-
-      .question-son {
-        background: #f6f7f9;
-        font-size: 16px;
-        color: #414040;
-        margin-left: 12px;
-        line-height: 24px;
-        padding: 12px 0px 12px 16px;
-      }
-
-      .node {
-
-        cursor: pointer;
-        font-size: 16px;
-        line-height: 22.5px;
-        font-weight: 500;
-        color: #212121;
-      }
-
-      .step-span {
-        z-index: 1;
-        color: #0058e1;
-        width: 50px;
-        height: 41px;
-        position: relative;
-        font-size: 30px;
-        font-weight: bold;
-        margin-left: -42px;
-        padding-left: 14px;
-        padding-top: 6px;
-        float: left;
-        background: url('~@/assets/home/step.png') no-repeat;
-        background-color: #fff;
-      }
-
-
-
-      .advice {
-        font-size: 10px;
-        color: #0058e1;
-        opacity: 0.1;
-        padding-bottom: 40px;
-      }
-
-      .li1:last-child .borderLeft {
-        display: none;
-      }
-
-    }
-
-
-  }
-}
-
-.ability {
-  padding: 0.8rem 0;
-  background: rgb(247, 248, 250);
-
-  .title-1 {
-    margin-bottom: 0.3rem;
-  }
-
-  .combine-content {
-    margin-top: 0.3rem;
-    align-items: flex-start;
-    border-bottom: 1px solid #ccc;
-    margin: 0.2rem 3.5rem 0;
-    padding: 0.2rem 0;
-
-    .title {
-      height: 3rem;
-      width: 3rem;
-      margin-right: 0.4rem;
-      background: url('~@/assets/home/rhfw_square.png') no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .title0 {
-      width: 5.6rem;
-      height: 3.45rem;
-      background: url('~@/assets/home/fn/jcss.png') no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .title1 {
-      width: 5.6rem;
-      height: 3.45rem;
-      background: url('~@/assets/home/fn/zjfw.png') no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .title2 {
-      width: 5.6rem;
-      height: 3.45rem;
-      background: url('~@/assets/home/fn/sjzy.png') no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .table-box {
-      height: 3.45rem;
-      flex: 1;
-      overflow-y: auto;
-    }
-
-    .table {
-      // width: 100%;
-      font-size: 16px;
-    }
-
-    .data-count {}
-  }
-
-  .name-box {
+  .flex-row-start {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
+    align-items: center;
     justify-content: flex-start;
-    width: 100%;
   }
 
-  .no-data {
+  .flex-row-center {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
-    font-size: 0.16rem;
-    color: #666;
-    text-align: center;
   }
 
-  .name-text {
-    font-size: 0.16rem;
-    color: #212121;
-    line-height: 0.3rem;
-    height: 0.3rem;
-    text-align: center;
-    width: 50%;
-    box-sizing: border-box;
+  .IntegrationServicesDetails {
+    .fixed {
+      position: fixed !important;
+      z-index: 2000;
+      top: 0;
+      left: 0;
+    }
+
+    .fixed2 > div:nth-of-type(3) {
+      margin-top: 0.84rem;
+    }
+
+    .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;
+        }
+      }
+
+      .selectNow {
+        color: #526aff;
+
+        .line {
+          background: #526aff;
+        }
+      }
+    }
+  }
+
+  .use-way {
+    padding: 0.8rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .title-1 {
+      margin-bottom: 0.3rem;
+    }
+
+    .left {
+      .btn {
+        padding: 10px 20px;
+        color: #526aff;
+        background: #fff;
+        border-radius: 50px;
+        margin: 10px;
+        font-size: 0.2rem;
+        width: 150px;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      .btn-box {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+    }
+
+    .content {
+      display: flex;
+      width: 13rem;
+      justify-content: space-between;
+
+      .word-bg {
+        background: linear-gradient(90deg, #7184fc, #94a3fc) !important;
+      }
+
+      .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;
+        justify-content: center;
+
+        .card-title {
+          font-size: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.2rem;
+          line-height: 0.26rem;
+        }
+
+        .content-card-item {
+          width: 50%;
+
+          .card-text {
+            margin-right: 0.2rem;
+            color: rgba(33, 41, 86, 0.8);
+            font-size: 0.2rem;
+            max-width: 2.8rem;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+
+          div:first-child {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+  .pain-point {
+    padding: 0.8rem 0;
+    background: rgb(247, 248, 250);
+
+    .bg {
+      height: 3rem;
+      width: 3rem;
+      // background: url('~@/assets/home/rhfw_square.png') no-repeat;
+      // background-size: 100%;
+      margin-top: 0.3rem;
+    }
+
+    .cjtd {
+      width: 5.75rem;
+      height: 3.4rem;
+      background: url('~@/assets/home/fn/cjtd.png') no-repeat;
+      background-size: 100%;
+    }
+
+    .cjtd img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .content {
+      overflow: auto;
+      height: 3rem;
+      width: 7rem;
+      margin-top: 0.3rem;
+
+      .content-item {
+        font-size: 16px;
+        margin: 0rem 0rem 0.1rem 0.1rem;
+      }
+    }
+  }
+
+  .solution {
+    padding: 0.8rem 0;
+    background: rgb(247, 248, 250);
+
+    .content {
+      width: 11rem;
+
+      .content-item {
+        font-size: 16px;
+        margin: 0.3rem;
+      }
+    }
+  }
+
+  .step {
+    padding: 0.8rem 0;
+    background: rgb(247, 248, 250);
+
+    .step-content {
+      margin: 0.3rem 4.5rem;
+      padding: 0.3rem;
+      background: #fff;
+
+      .left-process {
+        padding-left: 18px;
+        padding-top: 24px;
+
+        .li1 {
+          list-style: none;
+          box-sizing: border-box;
+          padding-left: 20px;
+          position: relative;
+        }
+
+        .borderLeft {
+          width: 1px;
+          height: 100%;
+          background-color: #e8f0fc;
+          position: absolute;
+          top: 11.225px;
+          bottom: 0;
+          left: -1px;
+        }
+
+        .step-question {
+          color: #0058e1;
+          font-weight: bold;
+          font-size: 20px;
+          padding-top: 8px;
+          margin-left: 12px;
+          margin-bottom: 15px;
+        }
+
+        .question-son {
+          background: #f6f7f9;
+          font-size: 16px;
+          color: #414040;
+          margin-left: 12px;
+          line-height: 24px;
+          padding: 12px 0px 12px 16px;
+        }
+
+        .node {
+          cursor: pointer;
+          font-size: 16px;
+          line-height: 22.5px;
+          font-weight: 500;
+          color: #212121;
+        }
+
+        .step-span {
+          z-index: 1;
+          color: #0058e1;
+          width: 50px;
+          height: 41px;
+          position: relative;
+          font-size: 30px;
+          font-weight: bold;
+          margin-left: -42px;
+          padding-left: 14px;
+          padding-top: 6px;
+          float: left;
+          background: url('~@/assets/home/step.png') no-repeat;
+          background-color: #fff;
+        }
+
+        .advice {
+          font-size: 10px;
+          color: #0058e1;
+          opacity: 0.1;
+          padding-bottom: 40px;
+        }
+
+        .li1:last-child .borderLeft {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .ability {
+    padding: 0.8rem 0;
+    background: rgb(247, 248, 250);
+
+    .title-1 {
+      margin-bottom: 0.3rem;
+    }
+
+    .combine-content {
+      margin-top: 0.3rem;
+      align-items: flex-start;
+      border-bottom: 1px solid #ccc;
+      margin: 0.2rem 3.5rem 0;
+      padding: 0.2rem 0;
+
+      .title {
+        height: 3rem;
+        width: 3rem;
+        margin-right: 0.4rem;
+        background: url('~@/assets/home/rhfw_square.png') no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .title0 {
+        width: 5.6rem;
+        height: 3.45rem;
+        background: url('~@/assets/home/fn/jcss.png') no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .title1 {
+        width: 5.6rem;
+        height: 3.45rem;
+        background: url('~@/assets/home/fn/zjfw.png') no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .title2 {
+        width: 5.6rem;
+        height: 3.45rem;
+        background: url('~@/assets/home/fn/sjzy.png') no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .table-box {
+        height: 3.45rem;
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      .table {
+        // width: 100%;
+        font-size: 16px;
+      }
+
+      .data-count {
+      }
+    }
+
+    .name-box {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      width: 100%;
+    }
+
+    .no-data {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.16rem;
+      color: #666;
+      text-align: center;
+    }
+
+    .name-text {
+      font-size: 0.16rem;
+      color: #212121;
+      line-height: 0.3rem;
+      height: 0.3rem;
+      text-align: center;
+      width: 50%;
+      box-sizing: border-box;
+    }
   }
-}
 </style>
diff --git a/front/src/views/instructionManual/components/TheOverallProcess.vue b/front/src/views/instructionManual/components/TheOverallProcess.vue
index a09fb3e8..a207e4b7 100644
--- a/front/src/views/instructionManual/components/TheOverallProcess.vue
+++ b/front/src/views/instructionManual/components/TheOverallProcess.vue
@@ -21,6 +21,15 @@
       <span class="xv-qui-zhong-xin">需求中心</span>
       <span class="neng-li-shen-qing-liu-cheng">能力申请流程</span>
       <span class="neng-li-xv-qiu-liu-cheng">能力需求流程</span>
+      <i class="data-property-library-flow absolute flow-1"></i>
+      <i class="data-property-library-flow absolute flow-2"></i>
+      <i class="data-property-library-flow absolute flow-3"></i>
+      <i class="data-property-library-flow absolute flow-4"></i>
+      <i class="data-property-library-flow absolute flow-5"></i>
+      <i class="data-property-library-flow absolute flow-6"></i>
+      <i class="data-property-library-flow absolute flow-7"></i>
+      <i class="data-property-library-flow absolute flow-8"></i>
+      <i class="data-property-library-flow absolute flow-9"></i>
     </div>
   </div>
 </template>
@@ -47,6 +56,7 @@
       }
     }
     .TheOverallProcess-content {
+      width:1920px;
       height: 855px;
       background: url('~@/assets/menu/TheOverallProcess-bg.png');
       position: relative;
@@ -166,6 +176,75 @@
         left: 125px;
         top: 102px;
       }
+      .data-property-library-flow {
+        width: 50px;
+        height: 38px;
+        background-image: url("~@/assets/menu/line-flow.png");
+      }
+      .absolute {
+          position: absolute;
+      }
+      .flow-1 {
+          offset-path: path("m982,198c0,0 0,68 0,68");
+          animation: move 2s linear infinite;
+          -webkit-animation: move 2s linear infinite;
+      }
+      .flow-2 {
+          offset-path: path("m928,281c0,0 0,-71 0,-71");
+          animation: move 2s linear infinite;
+          -webkit-animation: move 2s linear infinite;
+      }
+      .flow-3 {
+          offset-path: path("m539,359c0,0 318,-1 318,-1");
+          animation: move 2s linear infinite;
+          -webkit-animation: move 2s linear infinite;
+          animation-delay: 1s;
+          -webkit-animation-delay: 1s;
+      }
+      .flow-4 {
+          offset-path: path("m856,412c0,0 -308,0 -308,0");
+          animation: move 3s linear infinite;
+          -webkit-animation: move 3s linear infinite;
+          animation-delay: 2s;
+          -webkit-animation-delay: 2s;
+      }
+      .flow-5 {
+          offset-path: path("m454,480c0,0 0,160 0,160c0,0 401,0 401,0");
+          animation: move 4s linear infinite;
+          -webkit-animation: move 4s linear infinite;
+      }
+      .flow-6 {
+          offset-path: path("m402,478c0,0 0,295 0,295c0,0 1067,0 1067,0c0,0 -1,-273 -1,-273");
+          animation: move 6s linear infinite;
+          -webkit-animation: move 6s linear infinite;
+      }
+      .flow-7 {
+          offset-path: path("m1392,383c0,0 -332,0 -332,0");
+          animation: move 2s linear infinite;
+          -webkit-animation: move 2s linear infinite;
+      }
+      .flow-8 {
+          offset-path: path("m1457,295c0,0 0,-181 0,-181c0,0 -397,0 -397,0");
+          animation: move 3s linear infinite;
+          -webkit-animation: move 3s linear infinite;
+          animation-delay: 1s;
+          -webkit-animation-delay: 1s;
+      }
+      .flow-9 {
+          offset-path: path("m955,483c0,0 0,74 0,74");
+          animation: move 2s linear infinite;
+          -webkit-animation: move 2s linear infinite;  
+          animation-delay: 1s;
+          -webkit-animation-delay: 1s;
+      }
+      @keyframes move {
+          0% {
+              offset-distance: 0%;
+          }
+          100% {
+              offset-distance: 100%;
+          }
+      }
     }
   }
 </style>
diff --git a/front/src/views/instructionManual/components/menuBook.vue b/front/src/views/instructionManual/components/menuBook.vue
index c4fe8828..3e723872 100644
--- a/front/src/views/instructionManual/components/menuBook.vue
+++ b/front/src/views/instructionManual/components/menuBook.vue
@@ -55,6 +55,22 @@
         >
           {{ item.btnText }} >>
         </div>
+        <template v-if="item.name=='资源下架'">
+          <div class="resources-cont">
+            <p>能力归属方资源发生变更或停用，可对改能力进行下架申请</p>
+            <p>能力归属方下架前需要先检查能力使用情况，如果能力处于被使用状态，需要提前协调使用方后再进行能力下架</p>
+          </div>
+          <div class="resources-step">
+            <p>开始</p>
+            <p>能力使用状态检查</p>
+            <p>通知使用方</p>
+            <p>能力下架申请</p>
+            <p>市大数据局审核</p>
+            <p>完成下架</p>
+          </div>
+
+        </template>
+
       </div>
       <!-- 联系我们 -->
       <!--<div class="img-bg callus-box">
@@ -460,6 +476,7 @@
   }
   .img-box-new {
     margin-bottom: -60px;
+    position: relative;
   }
 
   .service-box {
@@ -535,6 +552,48 @@
     height: 544px;
     background-image: url('../../../assets/menu/down.png');
   }
+  .resources-cont{
+    position: absolute;
+    top:298px;
+    left:315px;
+    width:1294px;
+    height: 100px;
+    // border:1px solid red;
+    display: flex;
+    justify-content: space-between;
+    p{
+      width: 636px;
+      padding: 0 35px;
+      line-height: 30px;
+      font-size: 16px;
+      font-family: microsoft Yahei;
+      // border:1px solid blue;
+    }
+    p:first-child{
+      text-align: center;
+    }
+
+
+  }
+  .resources-step{
+    top: 440px;
+    position: absolute;
+    left: 333px;
+    width: 1326px;
+    height: 107px;
+    display: flex;
+    p{
+      width: 183px;
+      line-height: 106px;
+      font-weight: 500;
+      text-align: center;
+      font-size: 18px;
+      margin-right: 36px;
+      font-family: microsoft Yahei;
+    }
+
+
+  }
 
   .list-box {
     display: flex;