Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev

# Conflicts: # front/src/views/home/apply.vue
2022-06-29 17:30:59 +08:00 · 2022-06-29 17:30:59 +08:00 · ca69c86577
parent ccbcab8dfa a7bedfaf59
commit ca69c86577
39 changed files with 1524 additions and 256 deletions
--- a/back/src/assets/img/workBench/NO1.png
+++ b/back/src/assets/img/workBench/NO1.png
--- a/back/src/assets/img/workBench/NO2.png
+++ b/back/src/assets/img/workBench/NO2.png
--- a/back/src/assets/img/workBench/NO3.png
+++ b/back/src/assets/img/workBench/NO3.png
--- a/back/src/assets/img/workBench/hasToDo.png
+++ b/back/src/assets/img/workBench/hasToDo.png
--- a/back/src/assets/img/workBench/one.png
+++ b/back/src/assets/img/workBench/one.png
--- a/back/src/assets/img/workBench/publish.png
+++ b/back/src/assets/img/workBench/publish.png
--- a/back/src/assets/img/workBench/todo.png
+++ b/back/src/assets/img/workBench/todo.png
--- a/back/src/assets/img/workBench/two.png
+++ b/back/src/assets/img/workBench/two.png
--- a/back/src/views/modules/ability/bsinfrastructure.vue
+++ b/back/src/views/modules/ability/bsinfrastructure.vue
@ -46,8 +46,8 @@
 <script>
 import mixinViewModule from '@/mixins/view-module'
 // import AddOrUpdate from './order-add-or-update'
-import {addDynamicRoute} from "@/router";
-import RelateApplication from "./bsabilityai-relate-application.vue"
+import { addDynamicRoute } from '@/router'
+import RelateApplication from './bsabilityai-relate-application.vue'
 export default {
  mixins: [mixinViewModule],
  data () {
@ -62,7 +62,7 @@ export default {
        orderId: '',
        status: '',
        userId: '',
-        type: "基础设施",
+        type: '基础设施'
      },
      // 关联应用弹窗
      relateApplicationVisible: false,
@ -75,31 +75,31 @@ export default {
  },
  components: {
    // AddOrUpdate,
-    RelateApplication,
+    RelateApplication
  },
  methods: {
-     //重置
-     resetDataList(){
-        this.dataForm=this.noDataForm;
-        this.page=1;                    // 当前页码
-        this.query();
+    // 重置
+    resetDataList () {
+      this.dataForm.orderId = ''
+      this.page = 1 // 当前页码
+      this.query()
    },
    // 点击关联应用按钮
-    showRelateApplication(row){
+    showRelateApplication (row) {
      this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
-        if( res && res.data ) {
-          this.relateApplicationVisible = true;
+        if (res && res.data) {
+          this.relateApplicationVisible = true
          this.relateInfo = {
            id: row.id,
            responseData: res.data,
            linkType: '2'
-          };
+          }
        }
      }).catch(() => { })
    },
    // 是否展示关联应用弹窗
-    handleIsShowRelatePopup(type) {
-      this.relateApplicationVisible = type;
+    handleIsShowRelatePopup (type) {
+      this.relateApplicationVisible = type
    }

  }
--- a/back/src/views/modules/activiti/my-work-dynamics.vue
+++ b/back/src/views/modules/activiti/my-work-dynamics.vue
@ -132,7 +132,7 @@
            show-word-limit
          ></el-input>
        </el-form-item>
-        <el-form-item prop="title" label="摘要">
+        <el-form-item prop="note1" label="摘要">
          <el-input
            v-model="addDataFrom.note1"
            autocomplete="off"
@ -224,7 +224,7 @@
            show-word-limit
          ></el-input>
        </el-form-item>
-        <el-form-item prop="title" label="摘要">
+        <el-form-item prop="note1" label="摘要">
          <el-input
            v-model="eidtDataForm.note1"
            autocomplete="off"
@ -340,15 +340,15 @@
 <script>
 // @ is an alias to /src
 export default {
-  data() {
+  data () {
    return {
-      fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
+      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
      // 表格筛选条件对象
      queryData: {
-        keyworld: "",
+        keyworld: '',
        pageIndex: 1,
        pageSize: 10,
-        total: 0,
+        total: 0
      },
      // 表格数据数组对象
      tableData: [],
@ -359,307 +359,307 @@ export default {
      // imageUrl: '',
      // 新增数据表单对象
      addDataFrom: {
-        title: "",
-        note1: "",
-        content: "",
-        imageUrl: "",
-        delFlag: 0,
+        title: '',
+        note1: '',
+        content: '',
+        imageUrl: '',
+        delFlag: 0
      },
      // 新增数据表单验证对象
      addDataFromRules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
-        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
+        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        note1: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
+        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        imageUrl: [
-          { required: true, message: "请输入图片地址", trigger: "blur" },
-        ],
+          { required: true, message: '请输入图片地址', trigger: 'blur' }
+        ]
      },
      editDataDialogVisabled: false,
      eidtDataForm: {
-        title: "",
-        note1: "",
-        content: "",
-        imageUrl: "",
+        title: '',
+        note1: '',
+        content: '',
+        imageUrl: ''
      },
      eidtDataFromRules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
-        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
+        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        note1: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
+        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        imageUrl: [
-          { required: true, message: "请输入图片地址", trigger: "blur" },
-        ],
+          { required: true, message: '请输入图片地址', trigger: 'blur' }
+        ]
      },
      perviewDataDialogVisabled: false,
      previewData: {
-        title: "",
-        note1: "",
-        content: "",
-        imageUrl: "",
-        delFlag: 0,
+        title: '',
+        note1: '',
+        content: '',
+        imageUrl: '',
+        delFlag: 0
      },
-      previewImg: "", // 预览图片
+      previewImg: '', // 预览图片
      deleteDataArr: [],
-      dialogVisibleImg: false,
-    };
+      dialogVisibleImg: false
+    }
  },
-  created() {
-    this.getTableData();
+  created () {
+    this.getTableData()
  },
  methods: {
-    tableChange(val) {
-      this.deleteDataArr = val.map((item) => item.id);
-      console.log(this.deleteDataArr);
+    tableChange (val) {
+      this.deleteDataArr = val.map((item) => item.id)
+      console.log(this.deleteDataArr)
    },
-    restTableData() {
-      this.queryData.keyworld = "";
-      this.getTableData();
+    restTableData () {
+      this.queryData.keyworld = ''
+      this.getTableData()
    },
-    showView(file) {
-      this.previewImg = file.url;
-      this.dialogVisibleImg = true;
+    showView (file) {
+      this.previewImg = file.url
+      this.dialogVisibleImg = true
    },
-    getTableData() {
+    getTableData () {
      this.$http
-        .get("/workdynamics/page", {
+        .get('/workdynamics/page', {
          params: {
            limit: this.queryData.pageSize,
            page: this.queryData.pageIndex,
-            name: this.queryData.keyworld,
-          },
+            name: this.queryData.keyworld
+          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
-            return this.$message.error(res.msg);
+            return this.$message.error(res.msg)
          }
-          this.tableData = res.data.list;
-          this.queryData.total = res.data.total;
+          this.tableData = res.data.list
+          this.queryData.total = res.data.total
        })
-        .catch(() => {});
+        .catch(() => {})
    },
-    flashTableData() {
-      this.queryData.pageIndex = 1;
-      this.getTableData();
+    flashTableData () {
+      this.queryData.pageIndex = 1
+      this.getTableData()
    },
    // 分页大小更改
-    handleSizeChange(value) {
-      this.queryData.pageSize = value;
-      this.getTableData();
+    handleSizeChange (value) {
+      this.queryData.pageSize = value
+      this.getTableData()
    },
    // 当前索引更改
-    handleCurrentChange(val) {
-      this.queryData.pageIndex = val;
-      this.getTableData();
+    handleCurrentChange (val) {
+      this.queryData.pageIndex = val
+      this.getTableData()
    },
    // 新增数据窗口关闭事件
-    addDataDialogClose() {
-      this.$refs.addDataFormRef.resetFields();
-      this.addDataFrom.imageUrl = "";
-      this.$refs.addUpload.clearFiles();
+    addDataDialogClose () {
+      this.$refs.addDataFormRef.resetFields()
+      this.addDataFrom.imageUrl = ''
+      this.$refs.addUpload.clearFiles()
      // this.addDataFrom.imagesFiles = []
      // this.$refs.addDataFromUploadRef.clearFiles()
    },
-    editDataDialogClose() {
-      this.$refs.editDataFormRef.resetFields();
-      this.eidtDataForm.imageUrl = "";
-      this.$refs.editUpload.clearFiles();
+    editDataDialogClose () {
+      this.$refs.editDataFormRef.resetFields()
+      this.eidtDataForm.imageUrl = ''
+      this.$refs.editUpload.clearFiles()
    },
    // 追加数据
-    addDataDialogConfirm() {
+    addDataDialogConfirm () {
      this.$refs.addDataFormRef.validate(async (valid) => {
        if (valid) {
-          //console.log("新增新增", this.addDataFrom);
+          // console.log("新增新增", this.addDataFrom);
          this.$http
-            .post("/workdynamics/insert", this.addDataFrom)
+            .post('/workdynamics/insert', this.addDataFrom)
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg);
+                return this.$message.error(res.msg)
              }
-              this.$message.success("新增成功");
-              this.addDataDialogVisabled = false;
-              this.getTableData();
+              this.$message.success('新增成功')
+              this.addDataDialogVisabled = false
+              this.getTableData()
            })
-            .catch(() => {});
+            .catch(() => {})
        } else {
-          this.$message.success("表单数据填写不完整");
+          this.$message.success('表单数据填写不完整')
        }
-      });
+      })
    },
    // 限定图片
-    handleExceed() {
-      this.$message({ type: "error", message: "最多支持一张图片上传" });
+    handleExceed () {
+      this.$message({ type: 'error', message: '最多支持一张图片上传' })
    },
    // 限制标题
-    titleExceed(str) {
+    titleExceed (str) {
      if (str.length >= 200) {
-        this.$message.error("标题文字不能超过200字");
+        this.$message.error('标题文字不能超过200字')
      }
    },
    // 限制内容
-    contentExceed(str) {
+    contentExceed (str) {
      if (str.length >= 2000) {
-        this.$message.error("内容文字不能超过2000字");
+        this.$message.error('内容文字不能超过2000字')
      }
    },
-    //限制摘要
-    noteExceed(str) {
+    // 限制摘要
+    noteExceed (str) {
      if (str.length >= 1000) {
-        this.$message.error("摘要文字不能超过1000字");
+        this.$message.error('摘要文字不能超过1000字')
      }
    },
    // 删除数据
-    deleteData(row) {
-      console.log(row);
-      this.$confirm("此操作将删除当前数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+    deleteData (row) {
+      console.log(row)
+      this.$confirm('此操作将删除当前数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
      })
        .then(async () => {
-          let ids = [];
+          let ids = []
          if (this.deleteDataArr.length > 1) {
-            ids = this.deleteDataArr;
+            ids = this.deleteDataArr
          } else {
-            ids = [row.id];
+            ids = [row.id]
          }
-          console.log(ids);
+          console.log(ids)
          this.$http
-            .delete("/workdynamics/delete", {
-              data: ids,
+            .delete('/workdynamics/delete', {
+              data: ids
            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg);
+                return this.$message.error(res.msg)
              }
              this.$message({
-                type: "success",
-                message: "删除成功!",
-              });
-              this.getTableData();
-            });
+                type: 'success',
+                message: '删除成功!'
+              })
+              this.getTableData()
+            })
        })
        .catch(() => {
          this.$message({
-            type: "info",
-            message: "已取消删除",
-          });
-        });
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
    },
-    //预览工作动态信息
-    async openPreviewData(row) {
-      console.log("预览预览", row);
+    // 预览工作动态信息
+    async openPreviewData (row) {
+      console.log('预览预览', row)
      const { data: res } = await this.$http.get(
        `workdynamics/select/${row.id}`
-      );
+      )

      if (res.code !== 0) {
-        return this.$message.error(res.msg);
+        return this.$message.error(res.msg)
      }

-      this.previewData = res.data;
+      this.previewData = res.data

-      this.perviewDataDialogVisabled = true;
+      this.perviewDataDialogVisabled = true
    },
-    perviewDataDialogClose() {
-      this.perviewDataDialogVisabled = false;
+    perviewDataDialogClose () {
+      this.perviewDataDialogVisabled = false
    },
-    handleAvatarSuccess(res, file) {
+    handleAvatarSuccess (res, file) {
      if (res.code !== 0) {
-        return this.$message.error(res.msg);
+        return this.$message.error(res.msg)
      }

-      this.addDataFrom.imageUrl = res.data;
+      this.addDataFrom.imageUrl = res.data
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
-    beforeAvatarUpload(file) {
+    beforeAvatarUpload (file) {
      const isImage =
-        file.type === "image/jpeg" ||
-        file.type === "image/jpg" ||
-        file.type === "image/png";
-      const isLt2M = file.size / 1024 / 1024 < 2;
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
-        this.$message.error("上传头像图片只能是 JPG 格式!");
+        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
-        this.$message.error("上传头像图片大小不能超过 2MB!");
+        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
-      return isImage && isLt2M;
+      return isImage && isLt2M
    },
-    eidtHandleAvatarSuccess(res, file) {
+    eidtHandleAvatarSuccess (res, file) {
      if (res.code !== 0) {
-        return this.$message.error(res.msg);
+        return this.$message.error(res.msg)
      }

-      this.eidtDataForm.imageUrl = res.data;
+      this.eidtDataForm.imageUrl = res.data
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
-    editBeforeAvatarUpload(file) {
+    editBeforeAvatarUpload (file) {
      const isImage =
-        file.type === "image/jpeg" ||
-        file.type === "image/jpg" ||
-        file.type === "image/png";
-      const isLt2M = file.size / 1024 / 1024 < 2;
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
-        this.$message.error("上传头像图片只能是 JPG 格式!");
+        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
-        this.$message.error("上传头像图片大小不能超过 2MB!");
+        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
-      return isImage && isLt2M;
+      return isImage && isLt2M
    },
-    async openEditDialog(row) {
+    async openEditDialog (row) {
      const { data: res } = await this.$http.get(
        `workdynamics/select/${row.id}`
-      );
+      )

      if (res.code !== 0) {
-        return this.$message.error(res.msg);
+        return this.$message.error(res.msg)
      }

-      this.eidtDataForm = res.data;
+      this.eidtDataForm = res.data

-      this.editDataDialogVisabled = true;
+      this.editDataDialogVisabled = true
    },
-    eidtDataDialogConfirm() {
+    eidtDataDialogConfirm () {
      this.$refs.editDataFormRef.validate(async (valid) => {
        if (valid) {
-          console.log(this.eidtDataForm);
+          console.log(this.eidtDataForm)
          this.$http
-            .put("/workdynamics/update", this.eidtDataForm)
+            .put('/workdynamics/update', this.eidtDataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg);
+                return this.$message.error(res.msg)
              }
-              this.$message.success("编辑成功");
-              this.editDataDialogVisabled = false;
-              this.getTableData();
+              this.$message.success('编辑成功')
+              this.editDataDialogVisabled = false
+              this.getTableData()
            })
-            .catch(() => {});
+            .catch(() => {})
        } else {
-          this.$message.success("表单数据填写不完整");
+          this.$message.success('表单数据填写不完整')
        }
-      });
+      })
    },
-    addUploadRemoveFile(file, fileList) {
-      this.$refs.addUpload.clearFiles();
-      this.addDataFrom.imageUrl = "";
-    },
-    editUploadRemoveFile(file, fileList) {
-      this.$refs.editUpload.clearFiles();
-      this.eidtDataForm.imageUrl = "";
+    addUploadRemoveFile (file, fileList) {
+      this.$refs.addUpload.clearFiles()
+      this.addDataFrom.imageUrl = ''
    },
+    editUploadRemoveFile (file, fileList) {
+      this.$refs.editUpload.clearFiles()
+      this.eidtDataForm.imageUrl = ''
+    }
  },
  computed: {
-    editDialogShowFileList() {
+    editDialogShowFileList () {
      if (this.eidtDataForm.imageUrl) {
        return [
-          { name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl },
-        ];
+          { name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl }
+        ]
      }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
 ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
@ -728,7 +728,7 @@ export default {

  .preview-title {
    width: 100%;
-    height: 90px;
+    min-height: 90px;
    //margin-top: -40px;
    border-bottom: solid #c6c6c6 1px;
    .title-text {
@ -752,7 +752,7 @@ export default {
  }
  .preview-note {
    width: 100%;
-    height: 100px;
+    min-height: 100px;
    text-align: left;
    margin-top: 24px;
    text-indent: 2em;
--- a/back/src/views/modules/workBench/api.js
+++ b/back/src/views/modules/workBench/api.js
@ -0,0 +1,46 @@
+// /resource/getByDept
+import http from '@/utils/request';
+
+function Request({
+    methods, url, data, success, fali
+}) {
+    let _key = methods == 'get' ? 'params' : 'data';
+    return new Promise((resolve, reject) => {
+        http[methods](url, {
+            [_key]: data
+        }).then(res => {
+            resolve(res)
+        }, err => {
+            reject(err)
+        })
+    })
+
+}
+
+// /resource/getByDept:获取当前登录用户所在部门发布的资源
+
+// 部门待办列表
+export const getToDoTask = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/act/task/deptToDoTaskPage',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+// 部门已办列表
+export const getHasToDoTask = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/act/his/getDeptHandledInstancePage',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
--- a/back/src/views/modules/workBench/components/bottom-view.vue
+++ b/back/src/views/modules/workBench/components/bottom-view.vue
@ -0,0 +1,18 @@
+<template>
+    <div class="bottom-view">
+
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.bottom-view {
+    width: 100%;
+    height: 335px;
+    background: green;
+    box-sizing: border-box;
+}
+</style>
--- a/back/src/views/modules/workBench/components/center-view.vue
+++ b/back/src/views/modules/workBench/components/center-view.vue
@ -0,0 +1,19 @@
+<template>
+    <div class="center-view">
+
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.center-view {
+    width: 100%;
+    height: 335px;
+    margin-bottom: 16px;
+    background: blue;
+    box-sizing: border-box;
+}
+</style>
--- a/back/src/views/modules/workBench/components/dept-chart-view.vue
+++ b/back/src/views/modules/workBench/components/dept-chart-view.vue
@ -0,0 +1,22 @@
+<template>
+    <div class="dept-box">
+       
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.dept-box {
+    width: 394px;
+    height: 252px;
+    margin: 16px;
+    background: pink;
+}
+</style>
--- a/back/src/views/modules/workBench/components/dept-todo-view.vue
+++ b/back/src/views/modules/workBench/components/dept-todo-view.vue
@ -0,0 +1,140 @@
+<template>
+    <div class="dept-box" :class="dataInfo.noMarginleft ? 'no-margin-left' : ''">
+        <div class="left-box"
+            :style="{ 'background': dataInfo.bgColor, 'border-right': `1px solid ${dataInfo.borderColor}` }">
+            <div class="content">
+                <img class="img" :src="dataInfo.imgSrc" />
+                <div class="title">{{ title }}</div>
+                <div class="flex-row-bottom">
+                    <span class="num" :style="{ 'color': dataInfo.textColor }">{{ formatNum(dataInfo.num) }}</span>
+                    <span class="unit" :style="{ 'color': dataInfo.textColor }">{{ dataInfo.unit || '个' }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="list-box" v-if="dataInfo.list.length > 0">
+            <div class="list-item" v-for="(item, i) in dataInfo.list" :key="i">
+                {{ item[dataInfo.nameStr] || '--' }}
+            </div>
+            <div class="more">
+                查看更多 >
+            </div>
+        </div>
+        <div class="list-box flex-row-center no-data" v-else>
+            暂无数据
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    },
+    props: {
+        dataInfo: {
+            type: Object,
+            default: () => { }
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+    },
+    methods: {
+        formatNum(num) {
+            return num || num === 0 ? num : '--'
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.no-margin-left {
+    margin-left: 0;
+}
+
+.flex-row-bottom {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+}
+
+.flex-row-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.dept-box {
+    display: flex;
+    align-items: center;
+    width: 394px;
+    height: 252px;
+    margin: 16px;
+    background: rgba($color: #f1f3f6, $alpha: 0.8);
+}
+
+.left-box {
+    display: flex;
+    justify-content: center;
+    width: 80px;
+    border-radius: 2px;
+    height: 100%;
+}
+
+.img {
+    height: 50px;
+    width: 50px;
+    margin: 0 auto;
+}
+
+.content {
+    // margin-top: 57px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.title {
+    font-size: 18px;
+    color: #000;
+    margin-top: 25px;
+    margin-bottom: 18px;
+}
+
+.num {
+    font-size: 30px;
+}
+
+.unit {
+    font-size: 16px;
+    margin-left: 2px;
+}
+
+.list-box {
+    width: 314px;
+    height: 252px;
+}
+
+.list-item {
+    height: 44px;
+    line-height: 44px;
+    box-sizing: border-box;
+    border-bottom: 1px dashed #c6c6c6;
+    font-size: 16px;
+    color: #212121;
+}
+
+.more {
+    color: #212121;
+    font-size: 14px;
+    height: 32px;
+    line-height: 32px;
+    text-align: right;
+}
+
+.no-data {
+    font-size: 16px;
+    color: #212121;
+}
+</style>
--- a/back/src/views/modules/workBench/workBench.vue
+++ b/back/src/views/modules/workBench/workBench.vue
@ -0,0 +1,130 @@
+<template>
+    <div class="work-brnch-box">
+        <!-- 上 -->
+        <div class="flex-row-start top">
+            <div class="flex-row-start dept-left">
+                <dept-todo-view title="部门待办" :dataInfo="toToData"></dept-todo-view>
+                <dept-todo-view title="部门已办" :dataInfo="hasToDodoData"></dept-todo-view>
+            </div>
+            <div class="dept-chart-box"></div>
+        </div>
+        <!-- 中 -->
+        <div class="center">
+            <center-view></center-view>
+        </div>
+        <!-- 下 -->
+        <div class="bottom">
+            <bottom-view></bottom-view>
+        </div>
+    </div>
+</template>
+<script>
+import BottomView from '../workBench/components/bottom-view.vue'
+import CenterView from '../workBench/components/center-view.vue'
+import deptTodoView from '../workBench/components/dept-todo-view.vue'
+import * as Apis from './api'
+
+export default {
+    components: {
+        deptTodoView,
+        BottomView,
+        CenterView,
+    },
+    data() {
+        return {
+            // 部门待办
+            toToData: {
+                color: '#f86f01',
+                imgSrc: require('@/assets/img/workBench/todo.png'),
+                bgColor: 'rgba(228,138,1,0.12)',
+                borderColor: 'rgba(250,123,12,0.54)',
+                textColor: '#f86f01',
+                num: 34,
+                list: [],
+                nameStr: 'taskName'
+            },
+            // 部门已办
+            hasToDodoData: {
+                noMarginleft: true,
+                color: '#21b107',
+                imgSrc: require('@/assets/img/workBench/hasToDo.png'),
+                bgColor: 'rgba(37,165,13,0.12)',
+                borderColor: 'rgba(49,194,20,0.54)',
+                textColor: '#21b107',
+                num: 34,
+                list: [],
+                nameStr: 'processDefinitionName'
+            }
+        }
+    },
+    mounted() {
+        this.getToDo()
+        this.getHasToDo()
+    },
+    methods: {
+        // 待办
+        getToDo() {
+            let data = {
+                limit: 5,
+                page: 1,
+            }
+            Apis.getToDoTask(data, res => {
+                if (res.data.code !== 0) {
+                    return;
+                }
+                console.log('res----待办-------->', res.data);
+                this.toToData.list = res.data.data.records || []
+            }, err => {
+                console.log('err-----待办------->', err);
+            })
+        },
+        // 已办
+        getHasToDo() {
+            let data = {
+                limit: 5,
+                page: 1,
+            }
+            Apis.getHasToDoTask(data, res => {
+                if (res.data.code !== 0) {
+                    return;
+                }
+                console.log('res----已办-------->', res.data);
+                this.hasToDodoData.list = res.data.data.records || []
+            }, err => {
+                console.log('err-----已办------->', err);
+            })
+        },
+    },
+}
+</script>
+
+
+<style lang="scss" scoped>
+.margin-h-16 {
+    margin: 0 16px;
+}
+
+.flex-row-start {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.work-brnch-box {
+    .top {
+        height: 284px;
+        margin-bottom: 16px;
+        background: #fff;
+    }
+
+    .dept-left {
+        width: 836px;
+    }
+
+    .dept-chart-box {
+        width: 780px;
+        height: 100%;
+        background: orange;
+    }
+}
+</style>
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@ -297,3 +297,11 @@ export function getDataResource(data) {
    data,
  })
 }
+//应用详情列表
+export function queryPartAppByKeyId(params) {
+  return request({
+    url: 'dataResourceRel/queryPart4AppByKeyId',
+    method: 'get',
+    params,
+  })
+}
--- a/front/src/views/capabilityCloud/components/ComponentServices.vue
+++ b/front/src/views/capabilityCloud/components/ComponentServices.vue
@ -127,7 +127,12 @@
  let dataclick = ref('total')
  let dataList = ref([])
  let timeSwitchindex = ref('周')
-  let servicesSnum = ref([])
+  let servicesSnum = ref([
+    { amount: '', type: '智能算法' },
+    { amount: '', type: '图层服务' },
+    { amount: '', type: '开发组件' },
+    { amount: '', type: '业务组件' },
+  ])
  let callTheTrendData = ref({ time: [], snum: [] })
  //年月切换
  const timeSwitch = (name) => {
@ -302,7 +307,11 @@
      snum.value[0].num = res.data.data[0].amount
      res.data.data.map((item, index) => {
        if (index != 0) {
-          servicesSnum.value.push(item)
+          servicesSnum.value.map((servicesSnumitem, servicesSnumindex) => {
+            if (servicesSnumitem.type == item.type) {
+              servicesSnum.value[servicesSnumindex].amount = item.amount
+            }
+          })
        }
      })
    })
--- a/front/src/views/demandCenter/demandDetails.vue
+++ b/front/src/views/demandCenter/demandDetails.vue
@ -231,6 +231,7 @@
            size="small"
            pageSize="8"
            :total="total"
+            v-model:current="page"
            @change="handleCurrentChange"
          />
        </a-list>
@ -248,7 +249,7 @@
  import {
    demandComment,
    demandCommentPage,
-    demandCommentDelete,
+    // demandCommentDelete,
    demandCommentApply,
  } from '@/api/demandCenter'
  import { getUser, getUserInfo } from '@/api/home'
@ -264,15 +265,15 @@
    })
  })
  //删除提示框
-  const confirm = (item) => {
-    console.log(item)
-    evaluateDelete(item)
-  }
+  // const confirm = (item) => {
+  //   console.log(item)
+  //   evaluateDelete(item)
+  // }

-  const cancel = (e) => {
-    console.log(e)
-    message.error('已取消删除')
-  }
+  // const cancel = (e) => {
+  //   console.log(e)
+  //   message.error('已取消删除')
+  // }
  // const store = useStore()
  const router = useRouter()

@ -322,14 +323,14 @@
  //   })
  // }

-  const evaluateDelete = (item) => {
-    demandCommentDelete([item.id]).then((res) => {
-      if (res.data.code == 0) {
-        message.success('删除评论成功！')
-      }
-      evaluateList()
-    })
-  }
+  // const evaluateDelete = (item) => {
+  //   demandCommentDelete([item.id]).then((res) => {
+  //     if (res.data.code == 0) {
+  //       message.success('删除评论成功！')
+  //     }
+  //     evaluateList()
+  //   })
+  // }
  const evaluateList = () => {
    const params = {
      page: page.value,
@ -339,6 +340,7 @@
    demandCommentPage(params).then((res) => {
      evaluateData.value = res.data.data.list
      total.value = res.data.data.total
+      console.log(evaluateData, 'evaluateData')
    })
  }

@ -382,6 +384,7 @@
    // formName.value = formData.value
    const id = router.currentRoute.value.query.id
    getDemandForm(id).then((res) => {
+      console.log(res, 'res')
      const { data } = res.data
      formName.value.applyUserName = data.applyUserName
      formName.value.applyUserPhone = data.applyUserPhone
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@ -21,6 +21,12 @@
      id="algorithm-display"
      class="scrollBox"
    ></algorithm-display>
+    <!-- 关联能力 -->
+    <algorithm-associated-ability
+      :associatedComponents="associatedComponents"
+      id="algorithm-associated-ability"
+      class="scrollBox"
+    ></algorithm-associated-ability>
    <!-- 算法优势 -->
    <algorithm-advantage
      :dataList="dataList.data"
@ -70,6 +76,7 @@
 </template>
 <script setup>
  import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
+  import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
  import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
  import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
  import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
@ -81,7 +88,7 @@
  import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const scrollTop = ref(0)
@ -90,6 +97,11 @@
  const dataList = reactive({ data: {} })
  const id = router.currentRoute.value.query.id
  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([
+    { type: '应用资源', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
  document.body.style.transition = 'all 0.3s ease'
@ -148,6 +160,15 @@
          })
        }
      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@ -29,6 +29,12 @@
      id="application-associated-components"
      class="scrollBox"
    ></application-associated-components>
+    <!-- 关联能力 -->
+    <application-associated-ability
+      :associatedComponents="associatedComponents"
+      id="application-associated-ability"
+      class="scrollBox"
+    ></application-associated-ability>
    <!-- 功能介绍-->
    <application-function-intorduction
      :dataList="dataList.data"
@ -64,6 +70,7 @@
 <script setup>
  import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
  import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
+  import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
  import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
  import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
  import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
@ -73,8 +80,13 @@
  import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
  import mybus from '@/myplugins/mybus'
+  const associatedComponents = ref([
+    { type: '组件服务', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
  const router = useRouter()
  const scrollTop = ref(0)
  const domArr = ref([])
@ -140,6 +152,15 @@
          })
        }
      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
--- a/front/src/views/detailsAll/BusinessDetails.vue
+++ b/front/src/views/detailsAll/BusinessDetails.vue
@ -21,6 +21,12 @@
      id="business-presentation"
      class="scrollBox"
    ></business-presentation>
+    <!-- 关联能力 -->
+    <business-associated-ability
+      :associatedComponents="associatedComponents"
+      id="business-associated-ability"
+      class="scrollBox"
+    ></business-associated-ability>
    <!-- 功能介绍-->
    <business-function-intorduction
      :dataList="dataList.data"
@ -55,6 +61,7 @@
 </template>
 <script setup>
  import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
+  import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
  import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
  import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
  import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
@ -64,7 +71,7 @@
  import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const scrollTop = ref(0)
@ -73,6 +80,11 @@
  const dataList = reactive({ data: {} })
  const id = router.currentRoute.value.query.id
  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([
+    { type: '应用资源', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
  document.body.style.transition = 'all 0.3s ease'
@ -131,6 +143,15 @@
          })
        }
      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@ -21,6 +21,12 @@
      id="eveloper-presentation"
      class="scrollBox"
    ></Developer-presentation>
+    <!-- 关联能力 -->
+    <developer-associated-ability
+      :associatedComponents="associatedComponents"
+      id="developer-associated-ability"
+      class="scrollBox"
+    ></developer-associated-ability>
    <!-- 功能介绍-->
    <developer-function-intorduction
      :dataList="dataList.data"
@ -61,6 +67,7 @@
 </template>
 <script setup>
  import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
+  import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
  import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
  import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
  import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
@ -71,7 +78,7 @@
  import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const scrollTop = ref(0)
@ -80,6 +87,11 @@
  const dataList = reactive({ data: {} })
  const id = router.currentRoute.value.query.id
  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([
+    { type: '应用资源', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
  document.body.style.transition = 'all 0.3s ease'
@ -138,6 +150,15 @@
          })
        }
      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
--- a/front/src/views/detailsAll/LayerService.vue
+++ b/front/src/views/detailsAll/LayerService.vue
@ -29,6 +29,12 @@
      id="service-information"
      class="scrollBox"
    ></layer-service-information>
+    <!-- 关联能力 -->
+    <layer-service-associated-ability
+      :associatedComponents="associatedComponents"
+      id="layer-service-associated-ability"
+      class="scrollBox"
+    ></layer-service-associated-ability>
    <!-- 应用场景 -->
    <layer-service-application-scenarios
      :dataList="dataList.data"
@ -63,6 +69,7 @@
 </template>
 <script setup>
  import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
+  import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
  import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
  import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
  import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
@ -73,7 +80,7 @@
  import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const scrollTop = ref(0)
@ -82,6 +89,11 @@
  const dataList = reactive({ data: {} })
  const id = router.currentRoute.value.query.id
  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([
+    { type: '应用资源', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
  document.body.style.transition = 'all 0.3s ease'
@ -140,6 +152,15 @@
          })
        }
      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
@ -0,0 +1,127 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联能力" type="RELEVANCE"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(item, index) in dataFrom"
+        :key="item.type"
+      >
+        <div class="associated-ability-card-title">
+          {{ item.type }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div
+            class="associated-ability-card-content-font"
+            v-for="(dataListitem, dataListindex) in item.dataList"
+            :key="dataListitem.id"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <span>{{ dataListindex + 1 }}、</span>
+            {{ dataListitem.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  if (props.associatedComponents) {
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.14rem;
+      display: flex;
+      justify-content: space-between;
+      .associated-ability-card {
+        width: 4.28rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+          }
+          .associated-ability-card-content-font:hover {
+            color: #0058e1;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
@ -32,6 +32,10 @@
      name: '算法优势',
      key: 'algorithm-advantage',
    },
+    {
+      name: '关联能力',
+      key: 'algorithm-associated-ability',
+    },
    {
      name: '应用场景',
      key: 'application-scenarios',
@ -87,6 +91,7 @@
        list.value.push('使用方式')
      }
    })
+    list.value.push('关联能力')
    navList.value.forEach((item) => {
      console.log(item)
      if (list.value.indexOf(item.name) > -1) {
@ -131,6 +136,7 @@
            list.value.push('使用方式')
          }
        })
+        list.value.push('关联能力')
        navList.value.forEach((item) => {
          console.log(item)
          if (list.value.indexOf(item.name) > -1) {
--- a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
@ -0,0 +1,127 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联能力" type="RELEVANCE"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(item, index) in dataFrom"
+        :key="item.type"
+      >
+        <div class="associated-ability-card-title">
+          {{ item.type }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div
+            class="associated-ability-card-content-font"
+            v-for="(dataListitem, dataListindex) in item.dataList"
+            :key="dataListitem.id"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <span>{{ dataListindex + 1 }}、</span>
+            {{ dataListitem.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  if (props.associatedComponents) {
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.14rem;
+      display: flex;
+      justify-content: space-between;
+      .associated-ability-card {
+        width: 4.28rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+          }
+          .associated-ability-card-content-font:hover {
+            color: #0058e1;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@ -36,6 +36,10 @@
      name: '关联组件',
      key: 'application-associated-components',
    },
+    {
+      name: '关联能力',
+      key: 'application-associated-ability',
+    },
    {
      name: '使用能力',
      key: 'ability-to-use',
@ -77,6 +81,7 @@
        list.value.push('应用展示')
      }
    })
+    list.value.push('关联能力')
    navList.value.forEach((item) => {
      console.log(item)
      if (list.value.indexOf(item.name) > -1) {
@ -111,6 +116,7 @@
            list.value.push('应用展示')
          }
        })
+        list.value.push('关联能力')
        list.value.push('部署与安全')
        list.value.push('归属部门与服务商')
        navList.value.forEach((item) => {
--- a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
@ -0,0 +1,127 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联能力" type="RELEVANCE"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(item, index) in dataFrom"
+        :key="item.type"
+      >
+        <div class="associated-ability-card-title">
+          {{ item.type }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div
+            class="associated-ability-card-content-font"
+            v-for="(dataListitem, dataListindex) in item.dataList"
+            :key="dataListitem.id"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <span>{{ dataListindex + 1 }}、</span>
+            {{ dataListitem.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  if (props.associatedComponents) {
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.14rem;
+      display: flex;
+      justify-content: space-between;
+      .associated-ability-card {
+        width: 4.28rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+          }
+          .associated-ability-card-content-font:hover {
+            color: #0058e1;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
@ -36,6 +36,10 @@
      name: '应用场景',
      key: 'application-scenarios',
    },
+    {
+      name: '关联能力',
+      key: 'business-associated-ability',
+    },
    {
      name: '应用案例',
      key: 'application-case',
@ -87,6 +91,7 @@
        list.value.push('组件展示')
      }
    })
+    list.value.push('关联能力')
    list.value.push('使用方式')
    navList.value.forEach((item) => {
      console.log(item)
@ -136,6 +141,7 @@
            list.value.push('组件展示')
          }
        })
+        list.value.push('关联能力')
        list.value.push('使用方式')
        navList.value.forEach((item) => {
          console.log(item)
--- a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
@ -0,0 +1,127 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联能力" type="RELEVANCE"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(item, index) in dataFrom"
+        :key="item.type"
+      >
+        <div class="associated-ability-card-title">
+          {{ item.type }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div
+            class="associated-ability-card-content-font"
+            v-for="(dataListitem, dataListindex) in item.dataList"
+            :key="dataListitem.id"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <span>{{ dataListindex + 1 }}、</span>
+            {{ dataListitem.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  if (props.associatedComponents) {
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.14rem;
+      display: flex;
+      justify-content: space-between;
+      .associated-ability-card {
+        width: 4.28rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+          }
+          .associated-ability-card-content-font:hover {
+            color: #0058e1;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
@ -28,6 +28,10 @@
      name: '组件展示',
      key: 'eveloper-presentation',
    },
+    {
+      name: '关联能力',
+      key: 'developer-associated-ability',
+    },
    {
      name: '功能介绍',
      key: 'function-introduction',
@ -66,7 +70,6 @@
  if (props.dataList.infoList) {
    list.value = []
    props.dataList.infoList.map((item) => {
-      debugger
      if (
        item.attrType === '常见问题' ||
        item.attrType === '应用案例' ||
@ -77,6 +80,7 @@
        list.value.push('组件展示')
      }
    })
+    list.value.push('关联能力')
    navList.value.forEach((item) => {
      console.log(item)
      if (list.value.indexOf(item.name) > -1) {
@ -111,6 +115,7 @@
            list.value.push('组件展示')
          }
        })
+        list.value.push('关联能力')
        list.value.push('组件试用')
        list.value.push('使用方式')
        navList.value.forEach((item) => {
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
@ -0,0 +1,127 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联能力" type="RELEVANCE"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(item, index) in dataFrom"
+        :key="item.type"
+      >
+        <div class="associated-ability-card-title">
+          {{ item.type }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div
+            class="associated-ability-card-content-font"
+            v-for="(dataListitem, dataListindex) in item.dataList"
+            :key="dataListitem.id"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <span>{{ dataListindex + 1 }}、</span>
+            {{ dataListitem.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  if (props.associatedComponents) {
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.14rem;
+      display: flex;
+      justify-content: space-between;
+      .associated-ability-card {
+        width: 4.28rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+          }
+          .associated-ability-card-content-font:hover {
+            color: #0058e1;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
@ -93,7 +93,16 @@
  const flag = ref(true)
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '技术文档'
+      (item) =>
+        item.attrType === '服务类型' ||
+        item.attrType === '覆盖区域' ||
+        item.attrType === '切片策略' ||
+        item.attrType === '坐标系' ||
+        item.attrType === '切片尺寸' ||
+        item.attrType === '最小级别' ||
+        item.attrType === '数据范围' ||
+        item.attrType === '图层类型' ||
+        item.attrType === '最大级别'
    )[0]
    if (!obj) {
      flag.value = false
@ -128,7 +137,18 @@
    () => props.dataList,
    (val) => {
      if (val) {
-        let obj = val.infoList.filter((item) => item.attrType === '技术文档')[0]
+        let obj = val.infoList.filter(
+          (item) =>
+            item.attrType === '服务类型' ||
+            item.attrType === '覆盖区域' ||
+            item.attrType === '切片策略' ||
+            item.attrType === '坐标系' ||
+            item.attrType === '切片尺寸' ||
+            item.attrType === '最小级别' ||
+            item.attrType === '数据范围' ||
+            item.attrType === '图层类型' ||
+            item.attrType === '最大级别'
+        )[0]
        if (!obj) {
          flag.value = false
        } else {
@ -211,7 +231,7 @@
            font-size: 0.2rem;
            color: #666666;
            display: block;
-            margin-right: 0.8rem;
+            margin-right: 0.5rem;
            width: 120px;
          }
          p {
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
@ -32,6 +32,10 @@
      name: '图层信息',
      key: 'service-information',
    },
+    {
+      name: '关联能力',
+      key: 'layer-service-associated-ability',
+    },
    {
      name: '应用场景',
      key: 'service-application-scenarios',
@ -89,15 +93,35 @@
        list.value.push(item.attrType)
      } else if (item.attrType === '图层缩略图') {
        list.value.push('图层展示')
-      } else if (item.attrType === '坐标系') {
-        list.value.push('图层信息')
      } else if (item.attrType === '是否可预览') {
        if (item.attrValue === '是') {
          list.value.push('图层预览')
        }
+      } else if (
+        item.attrType === '服务类型' ||
+        item.attrType === '覆盖区域' ||
+        item.attrType === '切片策略' ||
+        item.attrType === '坐标系' ||
+        item.attrType === '切片尺寸' ||
+        item.attrType === '最小级别' ||
+        item.attrType === '数据范围' ||
+        item.attrType === '图层类型' ||
+        item.attrType === '最大级别'
+      ) {
+        list.value.push('图层信息')
+      } else if (
+        item.attrType === '技术文档' ||
+        item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '使用手册' ||
+        item.attrType === '服务地址' ||
+        item.attrType === '样式服务地址' ||
+        item.attrType === '服务商联系电话'
+      ) {
+        list.value.push('使用方式')
      }
    })
-    list.value.push('使用方式')
+    list.value.push('关联能力')
    navList.value.forEach((item) => {
      console.log(item)
      if (list.value.indexOf(item.name) > -1) {
@ -144,14 +168,36 @@
            list.value.push(item.attrType)
          } else if (item.attrType === '图层缩略图') {
            list.value.push('图层展示')
-          } else if (item.attrType === '坐标系') {
-            list.value.push('图层信息')
          } else if (item.attrType === '是否可预览') {
            if (item.attrValue === '是') {
              list.value.push('图层预览')
            }
+          } else if (
+            item.attrType === '服务类型' ||
+            item.attrType === '覆盖区域' ||
+            item.attrType === '切片策略' ||
+            item.attrType === '坐标系' ||
+            item.attrType === '切片尺寸' ||
+            item.attrType === '最小级别' ||
+            item.attrType === '数据范围' ||
+            item.attrType === '图层类型' ||
+            item.attrType === '最大级别'
+          ) {
+            list.value.push('图层信息')
+          } else if (
+            item.attrType === '技术文档' ||
+            item.attrType === '服务商' ||
+            item.attrType === '服务商联系人' ||
+            item.attrType === '使用手册' ||
+            item.attrType === '服务地址' ||
+            item.attrType === '样式服务地址' ||
+            item.attrType === '服务商联系电话'
+          ) {
+            list.value.push('使用方式')
          }
        })
+        list.value.push('关联能力')
+        list.value.push('图层信息')
        list.value.push('使用方式')
        navList.value.forEach((item) => {
          console.log(item)
--- a/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
@ -8,7 +8,7 @@
 <template>
  <div class="application-presentation" v-if="flag">
    <detals-title title="图层预览" type="PREVIEW"></detals-title>
-    <div class="main" :style="`${img}background-position:center;`">
+    <div class="main">
      <iframe
        :src="img"
        width="100%"
@ -35,7 +35,11 @@
    if (!imgindex) {
      flag.value = false
    } else {
-      img.value = imgindex.attrValue
+      props.dataList.infoList.map((item) => {
+        if (item.attrType === '预览服务地址') {
+          img.value = imgindex.attrValue || '--'
+        }
+      })
    }
  }
  watch(
@ -48,7 +52,11 @@
        if (!imgindex) {
          flag.value = false
        } else {
-          img.value = imgindex.attrValue
+          val.infoList.map((item) => {
+            if (item.attrType === '预览服务地址') {
+              img.value = imgindex.attrValue || '--'
+            }
+          })
        }
      }
    }
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
@ -17,7 +17,7 @@
            </p>
            <p>
              <span>样式服务地址：</span>
-              <span>{{ item.linkValue }}</span>
+              <span>{{ item.csslnkValue }}</span>
            </p>
          </div>
        </div>
@ -27,7 +27,9 @@
        </div>
      </div>
      <div class="content-right">
-        <div class="content-right-title">{{ item.contact }}</div>
+        <div class="content-right-title">
+          {{ item.contact }}：{{ item.facilitator.values }}
+        </div>
        <div class="content-right-content">
          <p>
            <span>{{ item.people.name }}</span>
@ -54,6 +56,7 @@
  import { pinyin } from 'pinyin-pro'
  import { ref, defineProps, watch } from 'vue'
  let dataFrom = ref({
+    link: '',
    title: '使用方式',
    englishTitle: 'USAGE',
    content: [
@ -81,25 +84,35 @@
  const flag = ref(true)
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '技术文档'
+      (item) =>
+        item.attrType === '技术文档' ||
+        item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '使用手册' ||
+        item.attrType === '服务地址' ||
+        item.attrType === '样式服务地址' ||
+        item.attrType === '服务商联系电话'
    )[0]
    if (!obj) {
      flag.value = false
    } else {
      // eslint-disable-next-line vue/no-setup-props-destructure
-      dataFrom.value.content[0].link.value = props.dataList.apiUrl
-      dataFrom.value.content[0].facilitator.values = props.dataList.deptContacts
+      // dataFrom.value.content[0].link.value = props.dataList.apiUrl
+      dataFrom.value.content[0].facilitator.values = props.dataList.deptName
+      dataFrom.value.content[0].people.value = props.dataList.deptContacts
+      dataFrom.value.content[0].phone.value = props.dataList.deptPhone
      console.log('dataList', props.dataList)
      props.dataList.infoList.map((item) => {
-        if (item.attrType === '组件地址') {
+        if (item.attrType === '使用手册') {
+          dataFrom.value.link = item.attrValue || '--'
+        } else if (item.attrType === '服务地址') {
          dataFrom.value.content[0].linkValue = item.attrValue || '--'
-        } else if (item.attrType === '服务商') {
-          dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
-        } else if (item.attrType === '服务商联系人') {
-          dataFrom.value.content[0].people.value = item.attrValue || '--'
-        } else if (item.attrType === '服务商联系电话') {
-          dataFrom.value.content[0].phone.value = item.attrValue || '--'
+        } else if (item.attrType === '样式服务地址') {
+          dataFrom.value.content[0].csslnkValue = item.attrValue || '--'
        }
+        //  else if (item.attrType === '服务商联系电话') {
+        //   dataFrom.value.content[0].phone.value = item.deptPhone || '--'
+        // }
      })
    }
  }
@ -107,24 +120,40 @@
    () => props.dataList,
    (val) => {
      if (val) {
-        let obj = val.infoList.filter((item) => item.attrType === '技术文档')[0]
+        let obj = val.infoList.filter(
+          (item) =>
+            item.attrType === '技术文档' ||
+            item.attrType === '服务商' ||
+            item.attrType === '服务商联系人' ||
+            item.attrType === '使用手册' ||
+            item.attrType === '服务地址' ||
+            item.attrType === '样式服务地址' ||
+            item.attrType === '服务商联系电话'
+        )[0]
        if (!obj) {
          flag.value = false
        } else {
-          dataFrom.value.content[0].link.value = val.apiUrl
-          dataFrom.value.content[0].facilitator.value = val.deptContacts
+          // dataFrom.value.content[0].link.value = val.apiUrl
+          dataFrom.value.content[0].facilitator.values = val.deptName
+          dataFrom.value.content[0].people.value = val.deptContacts
+          dataFrom.value.content[0].phone.value = val.deptPhone
          console.log('dataList', val)
          val.infoList.map((item) => {
-            if (item.attrType === '组件地址') {
+            if (item.attrType === '使用手册') {
+              dataFrom.value.link = item.attrValue || '--'
+            } else if (item.attrType === '服务地址') {
              dataFrom.value.content[0].linkValue = item.attrValue || '--'
-            } else if (item.attrType === '服务商') {
-              dataFrom.value.content[0].facilitator.value =
-                item.attrValue || '--'
-            } else if (item.attrType === '服务商联系人') {
-              dataFrom.value.content[0].people.value = item.attrValue || '--'
-            } else if (item.attrType === '服务商联系电话') {
-              dataFrom.value.content[0].phone.value = item.attrValue || '--'
+            } else if (item.attrType === '样式服务地址') {
+              dataFrom.value.content[0].csslnkValue = item.attrValue || '--'
            }
+            // else if (item.attrType === '服务商') {
+            //   dataFrom.value.content[0].facilitator.value =
+            //     item.attrValue || '--'
+            // } else if (item.attrType === '服务商联系人') {
+            //   dataFrom.value.content[0].people.value = item.attrValue || '--'
+            // } else if (item.attrType === '服务商联系电话') {
+            //   dataFrom.value.content[0].phone.value = item.attrValue || '--'
+            // }
          })
        }
      }
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@ -1018,7 +1018,6 @@
              })
              console.log('paramsGetResources', paramsGetResources)
            }
-            // debugger
            tecHnosphere = router.currentRoute.value.query.tecHnosphere
            appLiCation = router.currentRoute.value.query.appLiCation
            if (val.typeList && val.typeList.length > 6) {
@ -1038,7 +1037,8 @@
      const resourceList = reactive({ data: [] })
      const videoList = reactive({ data: [] })
      const resourceTotal = ref('')
-      const getAppResources = () => {
+      const getAppResources = (switchIndex) => {
+        //switchIndex这个参数是下面的分页传过来的参数
        paramsGetResources.name = searchValue.value
        paramsGetResources.type = Cardsname.value
        console.log(
@ -1049,7 +1049,10 @@
          !whoShow1.value.itShowBaoTou &&
          paramsGetResources.type === '数据资源'
        ) {
-          getDataResource({
+          if (switchIndex != '分页查询') {
+            paramsGetResources.pageNum = 1
+          }
+          let dataResourceParams = {
            serviceName: paramsGetResources.name, //资源名称
            orderField: whoShow1.value.itShowQingDao
              ? paramsGetResources.orderField == 'applyCount'
@ -1061,7 +1064,8 @@
            orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
            pageNum: paramsGetResources.pageNum, //页码
            pageSize: paramsGetResources.pageSize, //分页大小
-          }).then((res) => {
+          }
+          getDataResource(dataResourceParams).then((res) => {
            console.log('数据资源==================>', res.data.data)
            if (whoShow1.value.itShowQingDao) {
              res.data.data.data.forEach((val) => {
@ -1091,6 +1095,9 @@
            }
          })
        } else if (paramsGetResources.type !== '数据资源') {
+          if (switchIndex != '分页查询') {
+            paramsGetResources.pageNum = 1
+          }
          pageWithAttrs(paramsGetResources).then((res) => {
            console.log('查询列表============>', resourceList, res.data.data)
            resourceList.data = []
@ -1182,7 +1189,8 @@
        loading.value = true
        currentPage.value = val
        paramsGetResources.pageNum = val
-        getAppResources()
+        let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
+        getAppResources(params)
      }
      // const findZywMessage = () => {
      //   zywMessage().then((res) => {
@ -1235,7 +1243,6 @@
        router.currentRoute.value.query.appLiCation = ''
        tecHnosphere = router.currentRoute.value.query.tecHnosphere
        appLiCation = router.currentRoute.value.query.appLiCation
-        // debugger
        let newQuery = JSON.parse(
          JSON.stringify(router.currentRoute.value.query)
        )
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@ -46,7 +46,7 @@
        <div class="left jcss" v-else></div>
        <div class="right">
          <div class="header">
-            <span style="display: flex; align-items: center">
+            <span style="display: block; width: 680px">
              {{ item.name }}
              <svg
                t="1652322568870"