diff --git a/.gitignore b/.gitignore
index 3521ee6e..6c82c9ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,6 @@ back/dist-西海岸-后台管理-带配置文件.zip
 back/dist-市局-后台管理-带配置文件.zip
 back/dist-包头-后台管理.zip
 back/dist-市局-后台管理.zip
+back/dist-市局-后台管理-v0.8.2.1.zip
+front/public/index.html
+back/dist-西海岸-后台管理-v0.8.2.1.zip
diff --git a/back/src/assets/img/sj-jx.png b/back/src/assets/img/sj-jx.png
new file mode 100644
index 00000000..a5106273
Binary files /dev/null and b/back/src/assets/img/sj-jx.png differ
diff --git a/back/src/views/modules/ability/assignedScene/add-update-scene.vue b/back/src/views/modules/ability/assignedScene/add-update-scene.vue
new file mode 100644
index 00000000..29aae680
--- /dev/null
+++ b/back/src/views/modules/ability/assignedScene/add-update-scene.vue
@@ -0,0 +1,427 @@
+<template>
+  <div>
+    <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalType === 'display' ? '能力展示' : '挂接'"
+      @close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
+      <div v-if="modalType !== 'display'" style="
+            text-align: center;
+            font-weight: 600;
+            font-size: 18px;
+            margin-bottom: 10px;
+          ">
+        填写字段
+      </div>
+      <el-checkbox-group v-if="modalType !== 'display'" v-model="checkList" @change="changeBtn"
+        style="margin-bottom: 20px">
+        <el-checkbox-button v-for="(item, i) in btnList" :label="item.name" :key="i">{{ item.name }}
+        </el-checkbox-button>
+      </el-checkbox-group>
+
+      <!-- 挂载和修改-->
+      <div key="1" v-if="modalType !== 'display'">
+        <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
+          :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
+          <!-- 基本信息 -->
+          <div style="margin-bottom:20px" v-if="checkList.includes('基本信息')">
+            <div style="
+                text-align: center;
+                font-weight: 600;
+                font-size: 18px;
+                margin-bottom: 10px;
+              ">
+              基本信息
+            </div>
+            <el-form-item label="融合服务名称" prop="name">
+              <el-input v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
+            </el-form-item>
+            <el-form-item label="融合服务描述" prop="description">
+              <el-input v-model="dataForm.description" placeholder="请输入融合服务描述"></el-input>
+            </el-form-item>
+            <el-form-item label="应用领域" prop="applicationArea">
+              <el-select v-model="dataForm.applicationArea" placeholder="请选择应用领域" filterable>
+                <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="部门联系人" prop="deptUser">
+              <el-input v-model="dataForm.deptUser" placeholder="请输入部门联系人"></el-input>
+            </el-form-item>
+            <el-form-item label="部门联系人电话" prop="mobile">
+              <el-input v-model="dataForm.mobile" placeholder="请输入部门联系人电话"></el-input>
+            </el-form-item>
+            <el-form-item label="服务商" prop="provider">
+              <el-input v-model="dataForm.provider" placeholder="请输入服务商"></el-input>
+            </el-form-item>
+            <el-form-item label="服务商联系人" prop="providerUser">
+              <el-input v-model="dataForm.providerUser" placeholder="请输入服务商联系人"></el-input>
+            </el-form-item>
+            <el-form-item label="服务商联系人电话" prop="providerMobile">
+              <el-input v-model="dataForm.providerMobile" placeholder="请输入服务商联系人电话"></el-input>
+            </el-form-item>
+          </div>
+
+          <!-- 关联能力 -->
+          <div class="" v-if="checkList.includes('关联能力')">
+            <integrated-combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm">
+            </integrated-combine-ability>
+          </div>
+
+          <!-- 使用步骤 -->
+          <div v-if="checkList.includes('使用步骤')">
+            <common-question :dataForm="dataForm" @update="updateDataForm"></common-question>
+          </div>
+        </el-form>
+      </div>
+
+      <!-- 展示 -->
+      <el-form key="2" class="detial-form" v-else :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
+        <el-form-item :label="displayInfo[data]" v-for="(data, i) in Object.keys(displayInfo)" :key="i" :prop="data">
+          {{ dataForm[data] || "--" }}
+        </el-form-item>
+        <div v-for="(data, i) in displayListInfo['使用步骤']" :key="`${i}${JSON.stringify(data)}`">
+          <el-form-item :label="`使用步骤${i + 1}`">
+            {{ `${data['question']}` }}
+          </el-form-item>
+          <el-form-item :label="`问题描述${i + 1}`">
+            {{ `${data['answer']} ` }}
+          </el-form-item>
+        </div>
+        <div v-for="(data, i) in displayListInfo['关联能力']" :key="`${i}${JSON.stringify(data)}`">
+          <el-form-item :label="`能力类别${i + 1}`">
+            {{ `${data['type']}` }}
+          </el-form-item>
+          <el-form-item :label="`能力名称${i + 1}`">
+            {{ `${data['name']} ` }}
+          </el-form-item>
+        </div>
+      </el-form>
+
+      <template slot="footer">
+        <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
+        <el-button v-if="modalType !== 'display'" type="primary" @click="dataFormSubmitHandle()">{{
+            $t("confirm")
+        }}</el-button>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import debounce from "lodash/debounce";
+import qs from "qs";
+import CommonQuestion from '../components/common-question.vue';
+import IntegratedCombineAbility from '../components/integrated-combine-ability.vue';
+import Cookies from 'js-cookie'
+
+export default {
+  components: {
+    CommonQuestion,
+    IntegratedCombineAbility,
+  },
+  data() {
+    return {
+      fileList: [],
+      fileUploadUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('ucsToken')}`,
+      dataForm: {
+        "applicationArea": "",
+        "description": "",
+        "fuseAttrList": [
+          // {
+          //   "attrType": "技术文档",
+          //   "attrValue": "",
+          // },
+          {
+            "attrType": "使用步骤",
+            "attrValue": [{ question: "", answer: "" }],
+          }
+        ],
+        "fuseResourceList": [
+          {
+            "resourceId": 0,
+            "sequence": ""
+          }
+        ],
+        "mobile": "",
+        "name": "",
+        "provider": "",
+        "providerMobile": "",
+        "providerUser": "",
+        "deptUser": "",
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入名称",
+            trigger: "change",
+          },
+        ],
+        description: [
+          {
+            required: true,
+            message: "请输入描述",
+            trigger: "change",
+          },
+        ],
+      },
+      btnList: [
+        {
+          name: '基本信息',
+          key: 'basic',
+          show: true,
+        },
+        {
+          name: '关联能力',
+          key: 'combine',
+          show: true,
+        },
+        {
+          name: '使用步骤',
+          key: 'basic',
+          show: true,
+        },
+      ],
+      checkList: ['基本信息', '关联能力', '使用步骤'],
+      areaList: [],
+      fileNameList: [],
+      addOrUpdateVisibleCopy: this.addOrUpdateVisible,
+      displayInfo: {
+        'name': '名称',
+        'description': '描述',
+      },
+      displayListInfo: {
+        '使用步骤': [],
+        '关联能力': []
+      },
+    };
+  },
+  props: {
+    modalType: {
+      type: String,
+      default: 'add'
+    },
+    addOrUpdateVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    dataForm: {
+      handler(newVal) {
+        this.dataForm = newVal
+      },
+      deep: true,
+      immediate: true,
+    },
+    addOrUpdateVisible: {
+      handler(newVal) {
+        this.addOrUpdateVisibleCopy = newVal;
+      },
+      immediate: true,
+    }
+  },
+  methods: {
+    clearForm() {
+      this.$refs.dataForm && this.$refs.dataForm.resetFields();
+    },
+    closeModal() {
+      this.$emit('closeModal')
+    },
+    // 更新表单
+    updateDataForm(data) {
+      if (data.title == '使用步骤') {
+        this.dataForm.fuseAttrList.map(v => {
+          if (v.attrType === '使用步骤') {
+            v.attrValue = JSON.stringify(data.list)
+          }
+        })
+      }
+      if (data.title == '关联能力') {
+        this.dataForm.fuseResourceList = data.list
+      }
+    },
+    // 改变按钮状态
+    changeBtn(data) {
+      this.checkList = data;
+    },
+
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs.dataForm.validate((valid) => {
+          if (!valid) {
+            this.$message.error("请检查表单是否填写完整");
+            return false;
+          }
+          let methodsObj = {
+            'add': 'post',
+            'update': 'put'
+          }
+          let arr = this.dataForm.fuseResourceList.filter(v => v.resourceId !== '') || []
+          if (arr.length == 0) {
+            this.dataForm.fuseResourceList = []
+          }
+          let _obj = Object.assign({}, this.dataForm, {
+            type: '赋能场景'
+          })
+          this.$http
+          [methodsObj[this.modalType]]("/fuse", _obj)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.$refs.dataForm && this.$refs.dataForm.resetFields();
+                  this.$emit("refreshDataList");
+                  this.$emit("closeModal");
+                },
+              });
+            })
+            .catch((err) => {
+              this.$message.error(err)
+            });
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+    // 详情
+    getDetail(data) {
+      this.dataForm = data;
+      this.$nextTick(() => {
+        console.log('this.dataForm----详情-------->', this.dataForm);
+      })
+    },
+    // 重组数据
+    getDisPlayData() {
+      this.$nextTick(() => {
+        console.log('this.dataForm----重组数据-------->', this.dataForm);
+        const questionObj = this.dataForm.fuseAttrList.find(v => v.attrType == '使用步骤') || {};
+        let fuseResourceList = this.dataForm.fuseResourceList || [];
+        let arr = []
+        fuseResourceList.map(v => {
+          arr.push({
+            name: v.resource.name,
+            type: v.resource.type,
+          })
+        })
+        this.displayListInfo['使用步骤'] = JSON.parse(questionObj.attrValue || '[]')
+        this.displayListInfo['关联能力'] = arr
+      })
+
+    },
+  },
+  beforeDestroy() {
+    this.clearForm()
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  height: 580px;
+  overflow: auto;
+}
+
+.icon-input ::v-deep .el-input__inner {
+  cursor: pointer;
+}
+
+.detial-form ::v-deep {
+  .el-form-item {
+    margin-bottom: 0px;
+    line-height: 32px;
+  }
+
+  .el-form-item__label {
+    line-height: 32px;
+  }
+
+  .el-form-item__content {
+    line-height: 32px;
+  }
+}
+
+::v-deep .el-checkbox-button__inner {
+  width: 130px;
+  margin: 0 10px 5px;
+  border-left: unset !important;
+  border-radius: unset !important;
+  border: 1px solid #dcdfe6 !important;
+}
+</style>
+
+<style lang="scss">
+.mod-sys__menu {
+
+  .menu-list,
+  .icon-list {
+
+    .el-input__inner,
+    .el-input__suffix {
+      cursor: pointer;
+    }
+  }
+
+  &-icon-popover {
+    width: 458px;
+    overflow: hidden;
+  }
+
+  &-icon-inner {
+    width: 478px;
+    max-height: 258px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &-icon-list {
+    width: 458px;
+    padding: 0;
+    margin: -8px 0 0 -8px;
+
+    >.el-button {
+      padding: 8px;
+      margin: 8px 0 0 8px;
+
+      >span {
+        display: inline-block;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+.previewImg {
+  position: fixed;
+  z-index: 9999;
+}
+
+.name {
+  text-align: right;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #606266;
+  line-height: 40px;
+  padding: 0 12px 0 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 32px;
+  background: pink;
+  width: 120px;
+}
+
+.text {
+  margin-left: 132px;
+  font-size: 14px;
+  color: #606266;
+  line-height: 32px;
+}
+</style>
diff --git a/back/src/views/modules/ability/assignedScene/index.vue b/back/src/views/modules/ability/assignedScene/index.vue
new file mode 100644
index 00000000..1dd65749
--- /dev/null
+++ b/back/src/views/modules/ability/assignedScene/index.vue
@@ -0,0 +1,201 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-ability__bsabilityai">
+      <el-form :inline="true" :model="dataForm">
+        <el-form-item>
+          <el-input v-model="dataForm.name" placeholder="名称" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="searchData">{{
+              $t("query")
+          }}</el-button>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button v-if="$hasPermission('ability:bsabilityai:save')" type="primary" @click="addServe()">挂接</el-button>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%" :height="qp ? '810px' : '650px'">
+
+        <el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
+
+        <el-table-column prop="description" label="描述" header-align="center" align="center"></el-table-column>
+
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="94" right="0">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('ability:bsabilityai:update')" type="text" size="small"
+              @click="handleUpdate(scope.row)">{{ $t("update") }}</el-button>
+            <el-button v-if="$hasPermission('ability:bsabilityai:delete')" type="text" size="small"
+              @click="deleteRow(scope.row.id)">{{ $t("delete") }}</el-button>
+            <el-button type="text" size="small" @click="showDetail(scope.row)">能力展示</el-button>
+            <el-button type="text" size="small" @click="showDocument(scope.row)">技术文档</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="Number(total)"
+        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-update-scene v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
+        :addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
+      </add-update-scene>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from "@/mixins/view-module";
+import AddUpdateScene from "./add-update-scene";
+// import dictionaries from "@/utils/dictionaries";
+
+export default {
+  mixins: [mixinViewModule],
+  data() {
+    return {
+      tableData: [],
+      childName: '',
+      mixinViewModuleOptions: {
+        getDataListURL: "/fuse/page",
+        exportURL: "/ability/bsabilityai/export",
+        deleteURL: "/fuse",
+        getDataListIsPage: true,
+        deleteIsBatch: false,
+      },
+      disabled: false,
+      // sceneArr: dictionaries.sceneArr,
+      // fieldArr: dictionaries.fieldArr,
+      // shareFormArr: dictionaries.shareFormArr,
+      dataForm: {
+        name: "",
+        order: 'desc',
+        orderField: 'create_date',
+        type: '赋能场景'
+      },
+      qp: false,
+      // relateApplicationResourceVisible: false,
+      // relationData: {}, //打开穿梭框时传递的参数
+      // topNameArray: [], //
+      modalType: 'add',
+    };
+  },
+  watch: {},
+  components: {
+    AddUpdateScene,
+  },
+  mounted() {
+    window.addEventListener("resize", this.a);
+    this.fullScreen();
+  },
+  methods: {
+    deleteRow(id) {
+      this.$http.delete('/fuse/delete', {
+         data: [id]
+      }).then(res => {
+        console.log('删除成功', res)
+        if (res.data.code !== 0) {
+          return this.$message.error(res.msg);
+        }
+        this.$message({
+          message: '删除成功',
+          type: "success",
+          duration: 500,
+          onClose: () => {
+            this.query()
+          },
+        });
+      }).catch(err => {
+        this.$message.error(err);
+      })
+    },
+    // 查询
+    searchData() {
+      this.query()
+    },
+    // 重置
+    reset() {
+      this.dataForm.name = "";
+      this.query()
+    },
+    // 修改
+    handleUpdate(val) {
+      this.addOrUpdateVisible = true;
+      this.modalType = 'update';
+      const cloneVal = JSON.parse(JSON.stringify(val))
+      this.$nextTick(() => {
+        // this.$refs.addOrUpdate.dataForm = cloneVal;
+        this.$refs.addOrUpdate.getDetail(cloneVal)
+      })
+    },
+    // 挂接
+    addServe() {
+      this.addOrUpdateVisible = true
+      this.modalType = 'add';
+    },
+    closeModal() {
+      this.addOrUpdateVisible = false;
+    },
+    // 展示
+    showDetail(val) {
+      this.addOrUpdateVisible = true;
+      this.modalType = 'display';
+      const cloneVal = JSON.parse(JSON.stringify(val))
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.dataForm = cloneVal;
+        this.$refs.addOrUpdate.getDisPlayData()
+      })
+    },
+    showDocument(val) {
+      console.log(val);
+      window.open(
+        window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
+        "_blank"
+      );
+    },
+    fullScreen() {
+      if (window.outerHeight === screen.availHeight) {
+        if (window.outerWidth === screen.availWidth) {
+          console.log(
+            "全屏1",
+            window.outerHeight,
+            screen.availHeight,
+            window.outerWidth,
+            screen.availWidth
+          );
+          this.qp = false;
+        } else {
+          console.log(
+            "不是全屏2",
+            window.outerHeight,
+            screen.availHeight,
+            window.outerWidth,
+            screen.availWidth
+          );
+          this.qp = true;
+        }
+      } else {
+        console.log(
+          "不是全屏3",
+          window.outerHeight,
+          screen.availHeight,
+          window.outerWidth,
+          screen.availWidth
+        );
+        this.qp = true;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.el-tooltip__popper {
+  max-width: 50%;
+}
+</style>
diff --git a/back/src/views/modules/ability/bsabilityai.vue b/back/src/views/modules/ability/bsabilityai.vue
index eaf671ba..e5900aae 100644
--- a/back/src/views/modules/ability/bsabilityai.vue
+++ b/back/src/views/modules/ability/bsabilityai.vue
@@ -518,6 +518,13 @@ export default {
           }
         })
         console.log('编辑===============>', this.submitFrom)
+        console.log(this.submitFrom.infoList, '===============abc')
+        // 去重
+        const newArr = this.submitFrom.infoList.filter((element, index, self) => {
+          return self.findIndex(x => x.attrType === element.attrType) === index
+        })
+        this.submitFrom.infoList = newArr
+        console.log(this.submitFrom.infoList, '====================================wpwpwp')
         this.$http
           .put('/resource/update', this.submitFrom)
           .then(({ data: res }) => {
@@ -636,7 +643,10 @@ export default {
 .el-tooltip__popper {
   max-width: 50%;
 }
-::v-deep .el-table .cell {
-  width: 200px;
+// ::v-deep .el-table .cell {
+//   width: 200px;
+// }
+::v-deep .el-upload-list__item-name {
+  width: 400px;
 }
 </style>
diff --git a/back/src/views/modules/ability/bsabilityservice.vue b/back/src/views/modules/ability/bsabilityservice.vue
index 29cf2c4e..3a23cc9b 100644
--- a/back/src/views/modules/ability/bsabilityservice.vue
+++ b/back/src/views/modules/ability/bsabilityservice.vue
@@ -729,4 +729,7 @@ export default {
 .el-tooltip__popper {
   max-width: 50%;
 }
+::v-deep .el-upload-list__item-name {
+  width: 400px;
+}
 </style>
diff --git a/back/src/views/modules/ability/components/scene-use-step.vue b/back/src/views/modules/ability/components/scene-use-step.vue
new file mode 100644
index 00000000..5af00854
--- /dev/null
+++ b/back/src/views/modules/ability/components/scene-use-step.vue
@@ -0,0 +1,107 @@
+<template>
+    <div class="question-box">
+        <div class="title">
+            常见问题
+        </div>
+        <div v-for="(item, index) in dataInfo" :key="index">
+            <el-form-item label="问题名称" prop="question">
+                <el-input v-model="item.question" placeholder="请输入问题名称" style="width:90%"></el-input>
+            </el-form-item>
+            <el-form-item label="问题描述" prop="question">
+                <el-input v-model="item.answer" placeholder="请输入问题描述" style="width:90%"></el-input>
+                <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small">删除
+                </el-button>
+            </el-form-item>
+            <el-button style="margin-left:120px" size="small" v-if="index == dataInfo.length - 1" @click="addItem"
+                type="primary">添加
+            </el-button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        dataForm: {
+            type: Object,
+            default: () => { }
+        }
+    },
+    data() {
+        return {
+            dataInfo: []
+        }
+    },
+    watch: {
+        dataInfo: {
+            handler(newVal) {
+                this.dataInfo = newVal;
+                this.$emit('update', {
+                    title: '常见问题',
+                    list: newVal
+                })
+            },
+            deep: true,
+            immediate: true,
+        },
+        dataForm: {
+            handler(newVal, oldVal) {
+                // 防止无限循环，简单比较一下
+                if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
+                    this.dataForm = newVal;
+                    this.getDataInfo();
+                }
+            },
+            deep: true,
+            immediate: true,
+        }
+    },
+    methods: {
+        getDataInfo() {
+            let arr = []
+            let fuseAttrList = this.dataForm.fuseAttrList || [];
+            let obj = fuseAttrList.find(v => v.attrType === '常见问题') || {}
+            console.log('obj-------常见问题----->', obj);
+            let attrValue = JSON.parse(obj.attrValue)
+
+            if (attrValue.length > 0) {
+                attrValue.map(v => {
+                    arr.push({
+                        question: v.question,
+                        answer: v.answer,
+                    })
+                })
+            } else {
+                arr = []
+                arr.push({
+                    question: "",
+                    answer: "",
+                })
+            }
+            this.dataInfo = arr;
+        },
+        // 新增
+        addItem() {
+            this.dataInfo.push({
+                question: "",
+                answer: "",
+            })
+        },
+        // 删除
+        deleteItem(list, index) {
+            this.dataInfo.splice(index, 1)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.question-box {
+    margin-bottom: 20px;
+
+    .title {
+        text-align: center;
+        font-weight: 600;
+        font-size: 18px;
+        margin-bottom: 10px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue b/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
new file mode 100644
index 00000000..2b46e2d3
--- /dev/null
+++ b/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
@@ -0,0 +1,487 @@
+<template>
+  <div class="wrapper">
+    <el-form :model="dataView">
+      <div v-for="(item, index) in dataView.children" :key="item">
+        <div class="dataTitle">{{ item.name }}</div>
+        <div v-for="itemson in item.children" :key="itemson.name">
+          <div class="dataTitleSon">
+            {{ itemson.name }}
+          </div>
+          <div
+            class="dataContent"
+            v-if="
+              itemson.name !== '算法优势' &&
+              itemson.name !== '应用场景' &&
+              itemson.name !== '功能介绍'
+            "
+          >
+            <el-form-item
+              v-for="itemsonson in itemson.children"
+              :key="itemsonson.name"
+              :label="
+                itemsonson.type != ' multipleAdditions' ? itemsonson.name : ''
+              "
+            >
+              <div
+                class="videoAndImgCss"
+                v-if="
+                  itemsonson.type === 'video' || itemsonson.type === 'image'
+                "
+                @click="videoAndImg(itemsonson.note1)"
+              >
+                浏览
+              </div>
+              <div
+                v-else-if="itemsonson.type === ' multipleAdditions'"
+                class="multipleAdditionsClass"
+              >
+                <div
+                  v-for="multipleAdditionsItem in itemsonson.note1"
+                  :key="multipleAdditionsItem"
+                >
+                  <div>
+                    {{
+                      multipleAdditionsItem.question ||
+                      multipleAdditionsItem.type ||
+                      multipleAdditionsItem.name
+                    }}
+                  </div>
+                  <div>
+                    {{
+                      multipleAdditionsItem.answer ||
+                      multipleAdditionsItem.price ||
+                      multipleAdditionsItem.img
+                    }}
+                  </div>
+                  <div>{{ multipleAdditionsItem.desc }}</div>
+                  <!-- <div>{{ multipleAdditionsItem }}</div> -->
+                </div>
+              </div>
+              <el-input
+                v-else
+                v-model="itemsonson.note1"
+                disabled="disabled"
+              ></el-input>
+            </el-form-item>
+          </div>
+          <div v-else-if="itemson.name === '算法优势'">
+            <div
+              v-for="itemDataForm in dataForm.infoList"
+              :key="itemDataForm.attrType"
+            >
+              <div
+                v-if="itemDataForm.attrType === '算法优势'"
+                class="textAndImg"
+              >
+                <div
+                  v-for="itemDataFormValue in itemDataForm.attrValue"
+                  :key="itemDataFormValue.name + 'value'"
+                  class="textAndImgSon"
+                  style="border: 1px solid #3c9bcd;margin"
+                >
+                  <div>{{ itemDataFormValue.name }}</div>
+                  <div>{{ itemDataFormValue.desc }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="itemson.name === '应用场景'">
+            <div
+              v-for="itemDataForm in dataForm.infoList"
+              :key="itemDataForm.attrType"
+            >
+              <div
+                v-if="itemDataForm.attrType === '应用场景'"
+                class="textAndImg"
+              >
+                <div
+                  v-for="itemDataFormValue in itemDataForm.attrValue"
+                  :key="itemDataFormValue.name + 'value'"
+                  class="textAndImgSon"
+                  style="border: 1px solid #3c9bcd;margin"
+                >
+                  <div>{{ itemDataFormValue.name }}</div>
+                  <div>{{ itemDataFormValue.desc }}</div>
+                  <div @click="videoAndImg(itemDataFormValue.img)">浏览</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="itemson.name === '功能介绍'">
+            <div
+              v-for="itemDataForm in dataForm.infoList"
+              :key="itemDataForm.attrType"
+            >
+              <div
+                v-if="itemDataForm.attrType === '功能介绍'"
+                class="textAndImg"
+              >
+                <div
+                  v-for="itemDataFormValue in itemDataForm.attrValue"
+                  :key="itemDataFormValue.name + 'value'"
+                  class="textAndImgSon"
+                  style="border: 1px solid #3c9bcd;margin"
+                >
+                  <div>{{ itemDataFormValue.name }}</div>
+                  <div>{{ itemDataFormValue.desc }}</div>
+                  <div @click="videoAndImg(itemDataFormValue.img)">浏览</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import qs from 'qs'
+
+export default {
+  components: {},
+  props: {
+    dataForm: {
+      type: Object
+    },
+    insertList: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      dataList: [],
+      dataView: [],
+      // 归属部门
+      unit: ''
+    }
+  },
+  watch: {
+    dataList (item) {
+      if (item) {
+        this.dataList = item
+      }
+    },
+    insertList (val) {
+      if (val) {
+        if (this.dataForm.type === '应用资源') {
+          this.dataView = val.filter(
+            (item) => item.name === this.dataForm.type + '一'
+          )[0]
+          console.log(this.dataView)
+          console.log(this.dataForm)
+          // 应用描述
+          // this.dataView.children[0].children[0].children[4].note1 =
+          //   this.dataForm.description
+          // 应用名称
+          // this.dataView.children[0].children[0].children[0].note1 =
+          //   this.dataForm.name
+          // 共享条件
+          this.dataView.children[2].children[1].children[0].note1 =
+            this.dataForm.shareCondition
+          // 共享类型
+          this.dataView.children[2].children[1].children[1].note1 =
+            this.dataForm.shareType
+          this.dataForm.infoList.map((item, index) => {
+            this.dataView.children.map((itemView, indexView) => {
+              // console.log('itemView', itemView)
+              itemView.children.map((itemViewSon, indexViewSon) => {
+                // console.log('itemViewSon', itemViewSon)
+                itemViewSon.children.map((itemSon, indexSon) => {
+                  // console.log('itemSon', itemSon)
+                  if (itemSon.name.indexOf('描述') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.description
+                  } else if (itemSon.name.indexOf('名称') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.name
+                  } else if (itemSon.name.indexOf('能力类型') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.type
+                  } else if (itemSon.name.indexOf('属部门') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.unit
+                  } else if (itemSon.name.indexOf('共享条件') != -1) {
+                    this.dataView.children[indexView].children[
+                      indexViewSon
+                    ].children[indexSon].note1 = this.dataForm.shareCondition
+                  } else if (itemSon.name.indexOf('共享类型') != -1) {
+                    this.dataView.children[indexView].children[
+                      indexViewSon
+                    ].children[indexSon].note1 = this.dataForm.shareType
+                  } else if (
+                    itemSon.name === '关联组件信息' &&
+                    item.attrType === '关联组件信息'
+                  ) {
+                    this.queryPartAppByKeyIdFunction(
+                      indexView,
+                      indexViewSon,
+                      indexSon
+                    )
+                  } else if (itemSon.name === item.attrType) {
+                    if (itemSon.type !== ' multipleAdditions') {
+                      this.dataView.children[indexView].children[
+                        indexViewSon
+                      ].children[indexSon].note1 = item.attrValue
+                    } else {
+                      this.dataView.children[indexView].children[
+                        indexViewSon
+                      ].children[indexSon].note1 = JSON.parse(item.attrValue)
+                    }
+                  }
+                })
+              })
+            })
+            if (item.attrType === '功能介绍') {
+              this.dataForm.infoList[index].attrValue = JSON.parse(
+                item.attrValue
+              )
+            }
+          })
+        } else {
+          const componentType = this.dataForm.infoList.filter(
+            (item) => item.attrType === '组件类型'
+          )
+          this.dataView = val.filter(
+            (item) => item.name === this.dataForm.type + '一'
+          )[0]
+          this.dataView = this.dataView.children.filter(
+            (item) => item.name === componentType[0].attrValue
+          )[0]
+          this.dataForm.infoList.map((item, index) => {
+            this.dataView.children.map((itemView, indexView) => {
+              console.log('itemView', itemView)
+              itemView.children.map((itemViewSon, indexViewSon) => {
+                console.log('itemViewSon', itemViewSon)
+                itemViewSon.children.map((itemSon, indexSon) => {
+                  console.log('itemSon', itemSon)
+                  if (itemSon.name.indexOf('描述') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.description
+                  } else if (itemSon.name.indexOf('名称') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.name
+                  } else if (itemSon.name.indexOf('共享条件') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.shareCondition
+                  } else if (itemSon.name.indexOf('共享方式') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.shareMode
+                  } else if (itemSon.name.indexOf('共享类型') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.shareType
+                  } else if (itemSon.name.indexOf('部门联系人') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.deptContacts
+                  } else if (itemSon.name.indexOf('属部门') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.unit
+                  } else if (itemSon.name.indexOf('部门联系人电话') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.deptPhone
+                  } else if (itemSon.name.indexOf('接口请求方式') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.apiMethodType
+                  } else if (
+                    itemSon.name === '来源应用' &&
+                    item.attrType === '来源应用'
+                  ) {
+                    this.queryPartAppByKeyIdFunction(
+                      indexView,
+                      indexViewSon,
+                      indexSon
+                    )
+                  } else if (itemSon.name === item.attrType) {
+                    if (itemSon.type !== ' multipleAdditions') {
+                      this.dataView.children[indexView].children[
+                        indexViewSon
+                      ].children[indexSon].note1 = item.attrValue
+                    } else if (itemSon.type === ' multipleAdditions') {
+                      this.dataView.children[indexView].children[
+                        indexViewSon
+                      ].children[indexSon].note1 = JSON.parse(item.attrValue)
+                    }
+                  }
+                })
+              })
+            })
+            if (item.attrType === '算法优势' || item.attrType === '应用场景') {
+              this.dataForm.infoList[index].attrValue = JSON.parse(
+                item.attrValue
+              )
+            }
+          })
+          console.log(
+            'valvalvalvalvalvalvalvalvalvalval',
+            this.dataForm,
+            this.dataView
+          )
+        }
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    videoAndImg (link) {
+      if (link) {
+        window.open(link)
+      } else {
+        this.$message({
+          message: '未上传',
+          type: 'warning'
+        })
+      }
+    },
+    deptName () {
+      console.log(this.dataForm.deptId)
+      this.$http
+        .get(`/sys/dept/${this.dataForm.deptId}`)
+        .then(({ data: res }) => {
+          console.log(res.data.name, 'res')
+          this.unit = res.data.name
+        })
+    },
+    queryPartAppByKeyIdFunction (index, indexSon, indexSonSon) {
+      if (this.dataForm.type === '组件服务') {
+        this.$http
+          .get(
+            '/dataResourceRel/queryApp4PartByKeyId' +
+              '?keyId=' +
+              this.dataForm.id
+          )
+          .then(({ data: res }) => {
+            this.dataView.children[index].children[indexSon].children[
+              indexSonSon
+            ].note1 = ''
+            res.data.map((item) => {
+              this.dataView.children[index].children[indexSon].children[
+                indexSonSon
+              ].note1 += item.name + ';'
+            })
+          })
+      } else {
+        this.$http
+          .get(
+            '/dataResourceRel/queryPart4AppByKeyId?keyId=' +
+              this.dataForm.id +
+              '&type=' +
+              '组件服务'
+          )
+          .then(({ data: res }) => {
+            this.dataView.children[index].children[indexSon].children[
+              indexSonSon
+            ].note1 = ''
+            res.data.map((item) => {
+              this.dataView.children[index].children[indexSon].children[
+                indexSonSon
+              ].note1 += item.name + ';'
+            })
+          })
+      }
+    }
+  },
+  created () {},
+  mounted () {
+    this.deptName()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.wrapper {
+  .dataTitle {
+    text-align: center;
+    color: #333333;
+    font-size: 22px;
+    margin-bottom: 25px;
+  }
+  .dataTitleSon {
+    padding-left: 30px;
+    color: #333333;
+    font-size: 22px;
+    margin-bottom: 20px;
+    background: url('~@/assets/img/sj-jx.png') no-repeat;
+    background-position-x: 15px;
+  }
+  .multipleAdditionsClass {
+    display: flex;
+    & > div {
+      margin-right: 30px;
+      border: 1px solid #3c9bcd;
+      width: 212px;
+      height: 182px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 10px;
+      & > div:first-child {
+        margin-bottom: 10px;
+        font-weight: bold;
+        line-height: 14px;
+      }
+    }
+  }
+  .videoAndImgCss {
+    cursor: pointer;
+    font-size: 12px;
+    border: 1px solid #3c9bcd;
+    line-height: 12px;
+    padding: 5px;
+    margin-top: 10px;
+    background: rgba(60, 155, 205, 0.1);
+  }
+  .textAndImg {
+    display: flex;
+    padding-left: 30px;
+    .textAndImgSon {
+      width: 212px;
+      height: 182px;
+      margin-right: 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 10px;
+      position: relative;
+      & > div:first-child {
+        margin-bottom: 10px;
+        font-weight: bold;
+      }
+      & > div:nth-child(3) {
+        margin-top: 10px;
+        position: absolute;
+        bottom: 30px;
+        cursor: pointer;
+        font-size: 12px;
+        border: 1px solid #3c9bcd;
+        line-height: 12px;
+        padding: 5px;
+        margin-top: 10px;
+        background: rgba(60, 155, 205, 0.1);
+      }
+    }
+  }
+  .dataContent {
+    display: grid;
+    grid-template-columns: repeat(3, 33%);
+    padding-left: 30px;
+  }
+  ::v-deep .el-form-item__content {
+    display: inline-block;
+    input {
+      width: 400px;
+    }
+  }
+}
+</style>
diff --git a/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue b/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue
index 9581bda4..a6e1e698 100644
--- a/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue
+++ b/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue
@@ -10,7 +10,12 @@
         <div v-if="shifoushizujian">
           <Applicationresources></Applicationresources>
         </div>
-        <div v-if="!shifoushizujian">22222</div>
+        <div v-if="flagShow">
+          <ResourcesAndServices
+            :dataForm="dataForm"
+            :insertList="insertList"
+          ></ResourcesAndServices>
+        </div>
         <el-form-item
           v-if="dataForm.enclosure"
           label="申请附件"
@@ -23,24 +28,42 @@
       </el-form>
     </div>
     <!--  流程综合组件   -->
-    <ren-process-multiple
+    <!-- <ren-process-multiple
       v-if="processVisible"
       updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
       saveFormUrl="/processForm/tabilityapplication"
       dataFormName="dataForm"
       ref="renProcessMultiple"
-    ></ren-process-multiple>
+    ></ren-process-multiple> -->
+    <!-- 审批 -->
+    <div class="agreeOr">
+      <h3>审批</h3>
+      <div>
+        <el-radio-group v-model="agreeOrList" style="width:230px;">
+          <el-radio-button label="同意" class="blueAll">同意</el-radio-button>
+          <el-radio-button label="退回" class="redAll">退回</el-radio-button>
+        </el-radio-group>
+        <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
+        <el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
+         <el-button class="inputBule" @click="agreeOrNot">提交</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import processModule from '@/mixins/process-module'
 import Applicationresources from './Application-resources.vue'
+import ResourcesAndServices from './ResourcesAndServices.vue'
+import debounce from 'lodash/debounce'
+import qs from 'qs'
+
 export default {
   // 注入公共方法
-  mixins: [processModule],
+  // mixins: [processModule],
   components: {
-    Applicationresources
+    Applicationresources,
+    ResourcesAndServices
   },
   props: {
     // fromList: {
@@ -52,63 +75,29 @@ export default {
   },
   data () {
     return {
+      flagShow: false,
       // processVisible: true,
       visible: false,
       // 表单属性是否可编辑
       fieldDisabled: false,
-      dataForm: [],
+      dataForm: {},
       id: '',
       shifoushizujian: true,
       coverageNotShow: true,
       nameNotShow: false,
-      algorithmShow: true
+      algorithmShow: true,
+      insertList: [],
+      inputAgree: '',
+      inputNo: '',
+      agreeOrList: '同意',
+      taskId: ''
     }
   },
   watch: {},
-  computed: {},
-  methods: {
-    init () {
-      this.visible = true
-      // this.getInfo(this.$router.currentRoute.params.params.params.resourceDTO.id)
-      // this.dataForm = this.$router.currentRoute.params.params.params.resourceDTO
-      // this.id=this.$router.currentRoute
-      this.$nextTick(() => {
-        this.$refs.dataForm.resetFields()
-        // if (this.dataForm.id) {
-        // 如业务KEY已存在，不允许编辑
-        this.fieldDisabled = true
-        // this.id = this.$router.currentRoute.businessKey
-        this.getInfo(this.$router.currentRoute.params.businessKey)
-        console.log('id', this.$router.currentRoute.params.businessKey)
-        // }
-      })
-    },
-    getInfo (id) {
-      this.$http.get('/resourceMountApply/' + id).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = res.data.resourceDTO
-        if (this.dataForm.type != '应用资源') {
-          this.shifoushizujian = false
-          this.dataForm.infoList.forEach((val) => {
-            if (val.attrValue === '图层服务') {
-              this.coverageNotShow = false
-            } else if (val.attrValue === '智能算法') {
-              this.nameNotShow = true
-              this.algorithmShow = false
-              console.log(this.nameNotShow, 'wowowo')
-            }
-          })
-        } else {
-          this.shifoushizujian = true
-        }
-        console.log('this.dataForm', this.dataForm)
-      })
-    }
-  },
   created () {
-    // this.dataForm = this.$router.currentRoute.params.id
+    // 将业务KEY赋值给表单
+    console.log('params=================>', this.$route, this.$route.params)
+    this.taskId = this.$route.params.taskId
     this.init()
     console.log('fromList', this.$router.currentRoute.params.businessKey)
     // this.dataForm = this.$router.currentRoute.params.params.params.resourceDTO
@@ -123,13 +112,164 @@ export default {
     // 初始化综合组件
     this.initProcessMultiple(callbacks)
   },
-  mounted () {}
+  mounted () {
+    const businessKey = this.$router.currentRoute.params.businessKey
+    this.getInfo(businessKey)
+    this.methodsThree()
+    console.log(this.taskId, 'this.dataForm.taskId')
+  },
+  computed: {},
+  methods: {
+    getInfo (id) {
+      this.$http.get('/resourceMountApply/' + id).then(({ data: res }) => {
+        this.dataForm = res.data.resourceDTO
+        if (this.dataForm) {
+          console.log('this.dataForm', this.dataForm)
+          this.flagShow = true
+        }
+      })
+    },
+    methodsThree () {
+      this.$http.get('/category/getCategoryTree').then((res) => {
+        this.insertList = res.data.data
+      })
+    },
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.dataForm.resetFields()
+        // if (this.dataForm.id) {
+        // 如业务KEY已存在，不允许编辑
+        this.fieldDisabled = true
+        // this.id = this.$router.currentRoute.businessKey
+        console.log('id', this.$router.currentRoute.params.businessKey)
+        // }
+      })
+    },
+    agreeOrNot: debounce(function () {
+      if (this.agreeOrList === '同意') {
+        console.log('this.dataForm.taskId', this.taskId)
+        const params = qs.stringify({
+          taskId: this.taskId,
+          comment: this.inputAgree
+        })
+        console.log(params)
+        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+            if (this.callbacks.taskHandleErrorCallback) {
+              this.callbacks.taskHandleErrorCallback(res)
+            }
+            return
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              if (this.callbacks.taskHandleSuccessCallback) {
+                this.callbacks.taskHandleSuccessCallback(res)
+              }
+            }
+          })
+        }).catch(() => {})
+      } else if (this.agreeOrList === '退回') {
+        console.log('this.dataForm.taskId', this.taskId)
+        const params = qs.stringify({
+          taskId: this.taskId,
+          comment: this.inputNo
+        })
+        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+            if (this.callbacks.taskHandleErrorCallback) {
+              this.callbacks.taskHandleErrorCallback(res)
+            }
+            return
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              if (this.callbacks.taskHandleSuccessCallback) {
+                this.callbacks.taskHandleSuccessCallback(res)
+              }
+            }
+          })
+        })
+      }
+    }, 1000, { leading: true, trailing: false })
+  }
+
 }
 </script>
-<style lang="scss">
+<style scoped lang="scss">
 .kuandukuandukuandu {
   max-width: 1500px;
 }
 .wrapper {
 }
+::v-deep .agreeOr > div {
+  display: flex;
+  align-items: center;
+  .el-input {
+    margin-right: 10px;
+    margin-left: 32px;
+  }
+}
+::v-deep .agreeOr > div:last-of-type {
+  margin-top: 15px;
+}
+.blueAll {
+  ::v-deep .el-radio-button__inner {
+    width: 80px;
+    height: 32px;
+    line-height: 32px;
+    padding: 0;
+    border-radius: 2px;
+    background: #ffffff;
+    color: #0558e1;
+    border: 1px solid #0558e1;
+  }
+  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    box-shadow: unset !important;
+    background: #0558e1;
+    color: #ffffff;
+  }
+}
+.inputBule {
+  width: 55px;
+  height: 32px;
+  line-height: 32px;
+  padding: 0;
+  border-radius: 2px;
+  background: #0558e1;
+  color: #ffffff;
+  border: 1px solid #0558e1;
+}
+.redAll {
+  margin-left: 10px;
+  ::v-deep .el-radio-button__inner {
+    width: 80px;
+    height: 32px;
+    line-height: 32px;
+    padding: 0;
+    border-radius: 2px;
+    border: 1px solid #e83a48;
+    background: #ffffff;
+    color: #e83a48;
+    margin-left: 10px;
+  }
+  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    box-shadow: unset !important;
+    color: #ffffff;
+    background: #e83a48;
+  }
+}
+.blueInput {
+  width: 55px;
+}
 </style>
diff --git a/back/src/views/modules/sys/log-data-modification-log.vue b/back/src/views/modules/sys/log-data-modification-log.vue
index 8f5f7c0c..37079a4d 100644
--- a/back/src/views/modules/sys/log-data-modification-log.vue
+++ b/back/src/views/modules/sys/log-data-modification-log.vue
@@ -322,7 +322,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.blue-font-color:hover {
+.blue-font-color {
   color: #0058e1;
   cursor: pointer;
 }
diff --git a/back/src/views/modules/sys/log-operation.vue b/back/src/views/modules/sys/log-operation.vue
index 3a6cafa8..d1bf9fab 100644
--- a/back/src/views/modules/sys/log-operation.vue
+++ b/back/src/views/modules/sys/log-operation.vue
@@ -232,7 +232,7 @@ export default {
         startDate: '',
         endDate: '',
         operation: '',
-        operationType: 'all'
+        operationType: ''
       }
       this.value1 = '' // 格式化日期
       this.operationType = '' // 操作类型转化
@@ -281,7 +281,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.blue-font-color:hover {
+.blue-font-color {
   color: #0058e1;
   cursor: pointer;
 }
diff --git a/front/public/index.html b/front/public/index.html
index 5466d569..ad83f4e3 100644
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-03-29 16:45:25
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-07-12 14:55:36
+ * @LastEditTime: 2022-07-15 09:17:23
  * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@@ -33,7 +33,7 @@
     // window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
     // window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
     // window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
-    // window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
+    window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
     // 包头
     // window.SITE_CONFIG['backUrl'] = 'http://10.110.205.1:8001';
     // window.SITE_CONFIG['previewUrl'] = 'http://10.110.205.1:8002/';
diff --git a/front/public/static/config/location.js b/front/public/static/config/location.js
index 763b690a..66106bcf 100644
--- a/front/public/static/config/location.js
+++ b/front/public/static/config/location.js
@@ -1,8 +1,8 @@
 /*
  * @Author: hisense.wuhongjian
  * @Date: 2020-07-07 16:03:23
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-08 08:53:41
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-07-14 10:01:08
  * @Description: 数据资源参数配置
  */
 const newLocation = 'qingdao'
@@ -31,7 +31,8 @@ if (newLocation === 'qingdao') {
     { name: '能力云图', key: 'capabilityCloud' },
     { name: '能力统计', key: 'abilityStatistics' },
     // { name: '开发指南', key: 'developmentGuide' },
-    { name: '需求中心', key: 'demandCenter' },
+    { name: '指导手册', key: 'instructionManual' },
+    // { name: '需求中心', key: 'demandCenter' },
     // { name: '个人中心', key: 'personalCenter' },
     { name: '区市站点', key: 'mapTest' },
     // { name: '后台管理', key: 'houtaiguanli' },
diff --git a/front/src/api/home.js b/front/src/api/home.js
index 198f1f38..de19b712 100644
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@@ -337,7 +337,6 @@ export function getApplyCameraList(id) {
   })
 }
 
-// 融合服务--start
 // 融合服务--列表
 export function getIntegrationServicesList(params) {
   return request({
@@ -355,4 +354,11 @@ export function getIntegrationDetail(id) {
   })
 }
 
-// 融合服务--end
+// 指导手册--左侧文档树
+export function getDevelopDocTree(params) {
+  return request({
+    url: '/resource/selectDevelopDoc',
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file
diff --git a/front/src/api/personalCenter.js b/front/src/api/personalCenter.js
index d9eb8e9b..86d0f684 100644
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@@ -14,6 +14,13 @@ export function getTabilityapplication(params) {
     params,
   })
 }
+export function getByApplyFlag(params) {
+  return request({
+    url: '/processForm/tabilityapplication/getByApplyFlag/' + params,
+    method: 'get',
+    // params,
+  })
+}
 
 // 查询申购车列表
 export function getSgcList(params) {
@@ -190,6 +197,13 @@ export function getMyComment(params) {
     params,
   })
 }
+export function demandComment(params) {
+  return request({
+    url: '/demandComment/'+ params,
+    method: 'get',
+    params,
+  })
+}
 // 能力上架属性名查询
 export function getCategoryTree(params) {
   return request({
diff --git a/front/src/api/videoSurveillance.js b/front/src/api/videoSurveillance.js
index 53b714d7..94198d54 100644
--- a/front/src/api/videoSurveillance.js
+++ b/front/src/api/videoSurveillance.js
@@ -33,14 +33,14 @@ export function searchCamera(params) {
 }
 export function getCameraAllOrgan(params) {
   return request({
-    url: `/api/project/selectSubOrgan`,
+    url: `/api/project/selectSubOrganNew`,
     method: 'get',
     params,
   })
 }
 export function getCameraByParentId(params) {
   return request({
-    url: `/api/project/selectByParentId`,
+    url: `/api/project/selectByParentIdNew`,
     method: 'get',
     params,
   })
diff --git a/front/src/assets/capabilityCloud/doc.png b/front/src/assets/capabilityCloud/doc.png
new file mode 100644
index 00000000..cf49ca67
Binary files /dev/null and b/front/src/assets/capabilityCloud/doc.png differ
diff --git a/front/src/assets/capabilityCloud/newGuide.png b/front/src/assets/capabilityCloud/newGuide.png
new file mode 100644
index 00000000..1853f840
Binary files /dev/null and b/front/src/assets/capabilityCloud/newGuide.png differ
diff --git a/front/src/router/index.js b/front/src/router/index.js
index 1810bdec..b8702453 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -462,6 +462,15 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+  {
+    path: '/instructionManual',
+    name: 'instructionManual',
+    component: () => import('@/views/instructionManual/index'),
+    meta: {
+      title: '指导手册',
+      icon: 'error-warning-line',
+    },
+  },
 ]
 export const asyncRoutes = [
   {
diff --git a/front/src/store/modules/user.js b/front/src/store/modules/user.js
index e37acb80..f3b183ff 100644
--- a/front/src/store/modules/user.js
+++ b/front/src/store/modules/user.js
@@ -120,7 +120,7 @@
        return false
      }
      // debugger
-     commit('setUsername', data.data.username)
+     commit('setUsername', data.data.realName)
      commit('setRole', data.data.roleIdList.length)
      commit('setUserId', data.data.id)
      // TODO 获取用户信息，后续执行部分操作
diff --git a/front/src/supermap/config/coordinateConfig.js b/front/src/supermap/config/coordinateConfig.js
index 0538b55b..dcde84a1 100644
--- a/front/src/supermap/config/coordinateConfig.js
+++ b/front/src/supermap/config/coordinateConfig.js
@@ -2,14 +2,14 @@
  * @Author: hisense.wuhongjian
  * @Date: 2021-10-13 09:30:54
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2021-10-13 15:04:58
+ * @LastEditTime: 2022-07-14 16:28:27
  * @Description: 点位-位置匹配
  */
 const DIVISION = {
   qingdao: [
     {
       districtName: '城阳区',
-      name: '城阳区',
+      name: '城阳区(约1.5万)',
       districtCOde: '',
       latLng: {
         lat: 36.31,
@@ -18,7 +18,7 @@ const DIVISION = {
     },
     {
       districtName: '李沧区',
-      name: '李沧区',
+      name: '李沧区(约0.6万)',
       districtCOde: '',
       latLng: {
         lat: 36.17,
@@ -27,7 +27,7 @@ const DIVISION = {
     },
     {
       districtName: '市北区',
-      name: '市北区',
+      name: '市北区(约0.7万)',
       districtCOde: '',
       latLng: {
         lat: 36.1,
@@ -36,7 +36,7 @@ const DIVISION = {
     },
     {
       districtName: '市南区',
-      name: '市南区',
+      name: '市南区(约0.4万)',
       districtCOde: '',
       latLng: {
         lat: 36.06,
@@ -45,7 +45,7 @@ const DIVISION = {
     },
     {
       districtName: '崂山区',
-      name: '崂山区',
+      name: '崂山区(约2.0万)',
       districtCOde: '',
       latLng: {
         lat: 36.11,
@@ -54,7 +54,7 @@ const DIVISION = {
     },
     {
       districtName: '即墨区',
-      name: '即墨区',
+      name: '即墨区(约1.4万)',
       districtCOde: '',
       latLng: {
         lat: 36.39,
@@ -63,7 +63,7 @@ const DIVISION = {
     },
     {
       districtName: '胶州市',
-      name: '胶州市',
+      name: '胶州市(约1.5万)',
       districtCOde: '',
       latLng: {
         lat: 36.27,
@@ -72,7 +72,7 @@ const DIVISION = {
     },
     {
       districtName: '平度市',
-      name: '平度市',
+      name: '平度市(约1.6万)',
       districtCOde: '',
       latLng: {
         lat: 36.78,
@@ -81,7 +81,7 @@ const DIVISION = {
     },
     {
       districtName: '莱西市',
-      name: '莱西市',
+      name: '莱西市(约1.0万)',
       districtCOde: '',
       latLng: {
         lat: 36.89,
@@ -90,7 +90,7 @@ const DIVISION = {
     },
     {
       districtName: '西海岸新区',
-      name: '西海岸新区',
+      name: '西海岸新区(约4.1万)',
       districtCOde: '',
       latLng: {
         lat: 35.99,
diff --git a/front/src/views/capacityOnTheShelf/Algorithm.vue b/front/src/views/capacityOnTheShelf/Algorithm.vue
index 7bfd8929..ee58275e 100644
--- a/front/src/views/capacityOnTheShelf/Algorithm.vue
+++ b/front/src/views/capacityOnTheShelf/Algorithm.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-13 10:22:27
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-20 09:59:01
+ * @LastEditTime: 2022-07-14 09:44:38
  * @Description: 算法上架
 -->
 <template>
@@ -280,9 +280,9 @@
               console.log('res3', res3)
               if (res3.data.code == 0) {
                 message.success('上架成功！')
-                submitFlag.value = true
                 window.setTimeout(() => {
                   window.close()
+                  submitFlag.value = true
                 }, 1000)
               }
             })
diff --git a/front/src/views/capacityOnTheShelf/Application.vue b/front/src/views/capacityOnTheShelf/Application.vue
index 4ec9bbfc..df8e24d3 100644
--- a/front/src/views/capacityOnTheShelf/Application.vue
+++ b/front/src/views/capacityOnTheShelf/Application.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-13 10:22:27
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-17 19:31:27
+ * @LastEditTime: 2022-07-14 09:44:49
  * @Description: 应用上架
 -->
 <template>
@@ -238,9 +238,9 @@
               console.log('res3', res3)
               if (res3.data.code == 0) {
                 message.success('上架成功！')
-                submitFlag.value = true
                 window.setTimeout(() => {
                   window.close()
+                  submitFlag.value = true
                 }, 1000)
               }
             })
diff --git a/front/src/views/capacityOnTheShelf/BusinessComponent.vue b/front/src/views/capacityOnTheShelf/BusinessComponent.vue
index 558d590d..6d2f0892 100644
--- a/front/src/views/capacityOnTheShelf/BusinessComponent.vue
+++ b/front/src/views/capacityOnTheShelf/BusinessComponent.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-20 09:35:51
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-21 10:37:49
+ * @LastEditTime: 2022-07-14 09:44:58
  * @Description: 业务组件
 -->
 <template>
@@ -262,9 +262,9 @@
               console.log('res3', res3)
               if (res3.data.code == 0) {
                 message.success('上架成功！')
-                submitFlag.value = true
                 window.setTimeout(() => {
                   window.close()
+                  submitFlag.value = true
                 }, 1000)
               }
             })
diff --git a/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue b/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
index d66cb874..8e5a6b18 100644
--- a/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
+++ b/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-20 09:35:17
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-21 10:37:45
+ * @LastEditTime: 2022-07-14 09:45:07
  * @Description: 开发组件
 -->
 <template>
@@ -262,9 +262,9 @@
               console.log('res3', res3)
               if (res3.data.code == 0) {
                 message.success('上架成功！')
-                submitFlag.value = true
                 window.setTimeout(() => {
                   window.close()
+                  submitFlag.value = true
                 }, 1000)
               }
             })
diff --git a/front/src/views/capacityOnTheShelf/LayerServices.vue b/front/src/views/capacityOnTheShelf/LayerServices.vue
index 37da99ce..90da45de 100644
--- a/front/src/views/capacityOnTheShelf/LayerServices.vue
+++ b/front/src/views/capacityOnTheShelf/LayerServices.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-20 09:35:17
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-22 17:23:30
+ * @LastEditTime: 2022-07-14 09:45:18
  * @Description: 图层服务
 -->
 <template>
@@ -210,9 +210,9 @@
               console.log('res3', res3)
               if (res3.data.code == 0) {
                 message.success('上架成功！')
-                submitFlag.value = true
                 window.setTimeout(() => {
                   window.close()
+                  submitFlag.value = true
                 }, 1000)
               }
             })
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index 06f1be99..cc5b9b78 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-17 14:11:08
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-01 20:34:36
+ * @LastEditTime: 2022-07-13 18:14:42
  * @Description: 上架
 -->
 <template>
@@ -162,6 +162,13 @@
               @click="showTextFunction()"
             >
               编辑富文本
+              <div
+                v-if="showText"
+                class="fuwenbenbianjiqi"
+                style="position: absolute; z-index: 10000"
+              >
+                <VueTemplateDemo :dataFrom="props.dataFrom"></VueTemplateDemo>
+              </div>
             </div>
             <upload
               v-else-if="item.type == 'video'"
@@ -240,13 +247,6 @@
         </div>
       </template>
     </div>
-    <div
-      v-show="showText"
-      class="fuwenbenbianjiqi"
-      style="width: 100px; height: 100px; z-index: 10000"
-    >
-      <VueTemplateDemo></VueTemplateDemo>
-    </div>
   </div>
 </template>
 <script setup>
@@ -260,7 +260,7 @@
     queryResourceRelByKeyId,
     filesUpload,
   } from '@/api/personalCenter'
-  import VueTemplateDemo from '@/views/capacityOnTheShelf/FilesUpload.vue'
+  import VueTemplateDemo from '@/views/personalCenter/VueTemplateDemo.vue'
   import { useRouter } from 'vue-router'
   const router = useRouter()
   const abilityToType = router.currentRoute.value.query.abilityToType
@@ -417,6 +417,7 @@
   }
   mybus.on('showTextFunctionEmit', (show) => {
     console.log('ssdcsd')
+    debugger
     showText.value = show
   })
   mybus.off('func')
@@ -461,6 +462,7 @@
     })
   }
   const ApplicationArea = (item, itemson) => {
+    console.log('点击=========》', item, itemson)
     // console.log(item, itemson)
     if (item.note2.indexOf(itemson.dictLabel) === -1) {
       item.note2.push(itemson.dictLabel)
@@ -568,7 +570,7 @@
           delFlag: 0,
         })
       } else {
-        if (val.name !== '应用领域') {
+        if (val.name !== '应用领域' && val.name !== '发布端') {
           mybus.emit('chageDataFrom', {
             attrType: val.name,
             attrValue: val.note1,
@@ -579,6 +581,7 @@
     })
   })
 </script>
+<style></style>
 <style lang="less" scoped>
   .put-on-the-shelf {
     height: 680px;
diff --git a/front/src/views/demandCenter/index.vue b/front/src/views/demandCenter/index.vue
index 291e3558..2416925c 100644
--- a/front/src/views/demandCenter/index.vue
+++ b/front/src/views/demandCenter/index.vue
@@ -35,7 +35,7 @@
               >
                 <a-tooltip
                   placement="topLeft"
-                  :title="item.demandSubject || '--'"
+                  :title="item.demandDetails || '--'"
                   arrow-point-at-center
                   mouseEnterDelay="1"
                 >
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
index 016bb3ee..436aec93 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
@@ -35,7 +35,7 @@
       </div>
       <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
         <div class="content" v-if="tabindex == itemSonTitle.name">
-          <div class="content-right">
+          <div class="content-left">
             <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
             <a-image
               :width="635"
@@ -121,13 +121,13 @@
     log(index, title)
     if (index == 0) {
       if (title == '应用场景') {
-        return 'content-right'
+        return 'content-left'
       } else {
         return 'content-left'
       }
     } else {
       if (title == '应用场景') {
-        return 'content-left'
+        return 'content-right'
       } else {
         return 'content-right'
       }
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
index 55c37218..e114c8fa 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-09 09:29:29
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-07-05 20:25:49
+ * @LastEditTime: 2022-07-13 16:34:26
  * @Description: 算法详情 算法试用
 -->
 <template>
@@ -30,7 +30,8 @@
     if (!obj) {
       flag.value = false
     } else {
-      onTrial.value = obj.attrValue
+      // 修正数据传输导致的转义字符问题
+      onTrial.value = obj.attrValue.replace(/amp;/g, '')
     }
   }
   watch(
@@ -41,7 +42,8 @@
         if (!obj) {
           flag.value = false
         } else {
-          onTrial.value = obj.attrValue
+          // 修正数据传输导致的转义字符问题
+          onTrial.value = obj.attrValue.replace(/amp;/g, '')
         }
       }
     }
diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
index 40ec5db8..bbde3d6a 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
@@ -187,11 +187,7 @@
     )[0]
     // console.log('dataFrom.value.link', obj.attrValue)
     if (obj) {
-      window.open(
-        window.SITE_CONFIG.previewUrl +
-          'hisense_office/onlinePreview?url=' +
-          btoa(encodeURI(obj.attrValue))
-      )
+      window.open(window.SITE_CONFIG.frontUrl + obj.attrValue)
     } else {
       message.config({
         top: '100px', // 距离顶部的位置
diff --git a/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue b/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
index 43b73927..ee1d8057 100644
--- a/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
+++ b/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
@@ -14,7 +14,7 @@
               :headers="headers"
               :showUploadList="false"
               @change="handleChange"
-              maxCount="1"
+              maxCount="100"
             >
               <a-button>
                 <upload-outlined></upload-outlined>
@@ -73,8 +73,10 @@
 </template>
 <script setup>
   import { ref, onMounted } from 'vue'
-  import { paddleocr } from '@/api/file'
+  import { paddleocr,algo } from '@/api/file'
   import { message } from 'ant-design-vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
   const uploadUrl = window.SITE_CONFIG.apiURL + '/upload'
   let fileList = ref([])
   // const responseUrl = ref('')
@@ -82,31 +84,41 @@
   const imageResult0 = ref('')
   const imageResult1 = ref('')
   const menuOpenKeys2 = ref(['全文还原'])
-  let responseUrl = ref('static/image/test.jpg')
+  // 图片初始化
+  let responseUrl = ref('static/image/' + router.currentRoute.value.query.exampleImg)
+  const imgType = router.currentRoute.value.query.exampleImg.split('.')[1]
   const handleChange = (info) => {
+    debugger;
     if (info.file.status !== 'uploading') {
       console.log(info.file, info.fileList)
     }
     if (info.file.status === 'done') {
       message.success(`${info.file.name} file uploaded successfully`)
+      debugger
       responseUrl.value = info.file.response.data
-      checkImage()
+      // imgType.value = info.file.response.data.split('.')[1]
+      if (responseUrl.value) {
+        checkImage()
+      }
     } else if (info.file.status === 'error') {
       message.error(`${info.file.name} file upload failed.`)
     }
   }
   const checkImage = () => {
-    getUrlBase64(responseUrl.value, 'jpg', (base64) => {
+    getUrlBase64(responseUrl.value, imgType.value, (base64) => {
       console.log('1111111', base64)
       const param = {
-        img: base64.split('base64,')[1],
+        company: router.currentRoute.value.query.company,
+        algorithmName: router.currentRoute.value.query.algorithmName,
+        data: base64.split('base64,')[1],
+        type: router.currentRoute.value.query.type
       }
-      paddleocr(param).then((res) => {
+      algo(param).then((res) => {
         // wordValue.value = res.data
         console.log('1111', res.data)
-        imageResult.value = res.data.output
-        imageResult0.value = res.data.output
-        imageResult1.value = res.data.output
+        imageResult.value = res.data.data.text_data
+        imageResult0.value = res.data.data.text_data
+        imageResult1.value = res.data.data.text_data
       })
     })
   }
diff --git a/front/src/views/detailsAll/components/Algorithm/TestOfWords.vue b/front/src/views/detailsAll/components/Algorithm/TestOfWords.vue
index 4541c9a5..aaab686f 100644
--- a/front/src/views/detailsAll/components/Algorithm/TestOfWords.vue
+++ b/front/src/views/detailsAll/components/Algorithm/TestOfWords.vue
@@ -73,7 +73,7 @@
     //   })
     // })
     algo(param).then(res=>{
-      errorWord.value = res.data.text_data
+      errorWord.value = res.data.data.text_data
     })
   }
 </script>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
index 6a5816ae..94557648 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
@@ -52,6 +52,13 @@
           <template #icon><shopping-cart-outlined /></template>
           加入购物车
         </a-button> -->
+        <!-- 融合服务 存在fuseResourceList -->
+        <a-button type="primary" @click="handleAKeyApplication()" v-if="dataList.fuseResourceList">
+          <template #icon>
+            <form-outlined />
+          </template>
+          申请使用
+        </a-button>
         <a-button type="primary" @click="goTOCollection()">收藏</a-button>
       </div>
     </div>
@@ -59,168 +66,223 @@
   </div>
 </template>
 <script setup>
-  // import { ShoppingCartOutlined } from '@ant-design/icons-vue'
-  import { defineProps, ref, watch } from 'vue'
-  import { scInsert } from '@/api/personalCenter'
-  // import { sgcInsert } from '@/api/home'
-  // import { useRouter } from 'vue-router'
-  // import mybus from '@/myplugins/mybus'
-  import { message } from 'ant-design-vue'
-  const props = defineProps({
-    dataList: { type: Object, default: null },
-  })
-  // const router = useRouter()
-  const applicationArea = ref('')
-  // // 加入申购车
-  // const addShoppingCart = () => {
-  //   console.log('加入申购车==================>', props.dataList)
-  //   sgcInsert({
-  //     delFlag: '0',
-  //     resourceId: props.dataList.id,
-  //     // userId: userId.value,
-  //   }).then((res) => {
-  //     console.log(res)
-  //     message.success('添加申购车成功！')
-  //     mybus.emit('getSgcNum')
-  //   })
-  // }
-  // // 立即申请
-  // function toView() {
-  //   // window.open(newpage.href, '_blank')
-  //   router.push({
-  //     path: '/apply',
-  //     query: {
-  //       name: props.dataList.name,
-  //       resourceId: [props.dataList.id],
-  //     },
-  //   })
-  // }
-  // 收藏
-  const goTOCollection = () => {
-    console.log('收藏===================》', props.dataList)
-    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
-      console.log(res)
-      message.success('收藏成功')
-    })
-  }
-  if (props.dataList.infoList) {
-    applicationArea.value = props.dataList.infoList.filter(
-      (val) => val.attrType === '应用领域'
-    )[0].attrValue
-  }
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        applicationArea.value = props.dataList.infoList.filter(
-          (val) => val.attrType === '应用领域'
-        )[0].attrValue
-      }
+// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+import { defineProps, ref, watch } from 'vue'
+import { scInsert } from '@/api/personalCenter'
+// import { sgcInsert } from '@/api/home'
+// import { useRouter } from 'vue-router'
+// import mybus from '@/myplugins/mybus'
+import { message } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
+// 获取当前路由地址
+const router = useRouter()
+
+const props = defineProps({
+  dataList: { type: Object, default: null },
+})
+
+console.log('dataList------------>', props.dataList);
+
+// const router = useRouter()
+const applicationArea = ref('')
+// // 加入申购车
+// const addShoppingCart = () => {
+//   console.log('加入申购车==================>', props.dataList)
+//   sgcInsert({
+//     delFlag: '0',
+//     resourceId: props.dataList.id,
+//     // userId: userId.value,
+//   }).then((res) => {
+//     console.log(res)
+//     message.success('添加申购车成功！')
+//     mybus.emit('getSgcNum')
+//   })
+// }
+// // 立即申请
+// function toView() {
+//   // window.open(newpage.href, '_blank')
+//   router.push({
+//     path: '/apply',
+//     query: {
+//       name: props.dataList.name,
+//       resourceId: [props.dataList.id],
+//     },
+//   })
+// }
+// 融合服务--一键申请
+const handleAKeyApplication = () => {
+  let _applyList = [];
+  (props.dataList.fuseResourceList || []).map(v => {
+    let resource = v.resource || {}
+    let obj = {
+      arr: [
+        {
+          delFlag: resource.delFlag,
+          description: resource.description,
+          resourceId: resource.id,
+          resourceName: resource.name,
+          time: resource.createDate,
+          type: resource.type,
+        },
+      ],
+      deptId: resource.deptId,
+      deptName: resource.deptName,
     }
+    _applyList.push(obj)
+  })
+
+  localStorage.setItem(
+    'applyList',
+    JSON.stringify(_applyList)
   )
+  router.push({
+    path: '/apply',
+  })
+}
+
+// 收藏
+const goTOCollection = () => {
+  console.log('收藏===================》', props.dataList)
+  scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+    console.log(res)
+    message.success('收藏成功')
+  })
+}
+if (props.dataList.infoList) {
+  applicationArea.value = props.dataList.infoList.filter(
+    (val) => val.attrType === '应用领域'
+  )[0].attrValue
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      console.log('props.dataList-----watch------->', val);
+
+      applicationArea.value = props.dataList.infoList.filter(
+        (val) => val.attrType === '应用领域'
+      )[0].attrValue
+    }
+  }
+)
 </script>
 <style lang="less" scoped>
-  .algorithm-top-details {
-    height: 6rem;
-    padding: 1.8rem 0 0;
-    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
-    background-size: 100%;
-    display: flex;
-    justify-content: center;
-    .left {
-      max-width: 7.2rem;
-      color: #fff;
-      margin-right: 0.8rem;
+.algorithm-top-details {
+  height: 6rem;
+  padding: 1.8rem 0 0;
+  background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
+  background-size: 100%;
+  display: flex;
+  justify-content: center;
 
-      .top {
-        display: flex;
-        align-items: center;
-        span {
-          font-size: 0.14rem;
-        }
-        .name {
-          // max-width: 3.3rem;
-          // overflow: hidden;
-          // text-overflow: ellipsis;
-          // white-space: nowrap;
-          font-size: 0.4rem;
-          margin-right: 0.2rem;
-          font-size: 0.4rem;
-          margin-right: 0.2rem;
-          max-width: 7rem;
-          text-overflow: -o-ellipsis-lastline;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-        }
-        .label-content {
-          position: relative;
-        }
-        .lable-father {
-          position: absolute;
-          min-width: 3.5rem;
-          right: -3.5rem;
-          top: 0;
-        }
-        .label {
-          padding: 0.01rem 0.1rem;
-          margin-right: 0.1rem;
-          border-radius: 0.13rem;
-          background: rgba(255, 255, 255, 0.4);
-        }
+  .left {
+    max-width: 7.2rem;
+    color: #fff;
+    margin-right: 0.8rem;
+
+    .top {
+      display: flex;
+      align-items: center;
+
+      span {
+        font-size: 0.14rem;
       }
-      .main {
-        margin-top: 0.2rem;
-        font-size: 0.18rem;
-        line-height: 0.34rem;
-        & > div:nth-of-type(1) {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        & > div:nth-of-type(2) {
-          max-height: 1rem;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 3;
-          -webkit-box-orient: vertical;
-        }
+
+      .name {
+        // max-width: 3.3rem;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+        // white-space: nowrap;
+        font-size: 0.4rem;
+        margin-right: 0.2rem;
+        font-size: 0.4rem;
+        margin-right: 0.2rem;
+        max-width: 7rem;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
       }
-      .bottom {
-        margin-top: 0.4rem;
-        display: flex;
-        .ant-btn {
-          height: 0.5rem;
-          margin-right: 0.2rem;
-          background: #ff8b55;
-          border-radius: 0.06rem;
-          font-size: 0.2rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .ant-btn:nth-of-type(1) {
-          width: 1.8rem;
-        }
-        .ant-btn:nth-of-type(2) {
-          width: 2.2rem;
-        }
-        .ant-btn:nth-of-type(3) {
-          width: 1.45rem;
-          background: #fff;
-          color: #526aff;
-        }
+
+      .label-content {
+        position: relative;
+      }
+
+      .lable-father {
+        position: absolute;
+        min-width: 3.5rem;
+        right: -3.5rem;
+        top: 0;
+      }
+
+      .label {
+        padding: 0.01rem 0.1rem;
+        margin-right: 0.1rem;
+        border-radius: 0.13rem;
+        background: rgba(255, 255, 255, 0.4);
       }
     }
-    .right {
-      width: 5.8rem;
-      height: 4rem;
-      background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
-      background-size: 100%;
-      margin-top: -0.4rem;
+
+    .main {
+      margin-top: 0.2rem;
+      font-size: 0.18rem;
+      line-height: 0.34rem;
+
+      &>div:nth-of-type(1) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &>div:nth-of-type(2) {
+        max-height: 1rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .bottom {
+      margin-top: 0.4rem;
+      display: flex;
+
+      .ant-btn {
+        height: 0.5rem;
+        margin-right: 0.2rem;
+        background: #ff8b55;
+        border-radius: 0.06rem;
+        font-size: 0.2rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .ant-btn:nth-of-type(1) {
+        width: 1.8rem;
+      }
+
+      .ant-btn:nth-of-type(2) {
+        width: 2.2rem;
+      }
+
+      .ant-btn:nth-of-type(3) {
+        width: 1.45rem;
+        background: #fff;
+        color: #526aff;
+      }
     }
   }
+
+  .right {
+    width: 5.8rem;
+    height: 4rem;
+    background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
+    background-size: 100%;
+    margin-top: -0.4rem;
+  }
+}
 </style>
diff --git a/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue b/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
index 4ba703cb..436aec93 100644
--- a/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
@@ -1,10 +1,10 @@
 <!-- 应用场景-->
 <template>
-  <div class="function-intorduction" v-if="flag">
+  <div class="application-scenarios-and-case" v-if="flag">
     <div class="application-scenarios-and-case-son">
       <!-- {{ dataFrom.attrType }} -->
       <div class="title">
-        <DetalsTitle :title="dataFrom.attrType" type="SCENE"></DetalsTitle>
+        <DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
       </div>
       <div class="tab">
         <div
@@ -44,9 +44,9 @@
               v-if="itemSonTitle.img"
             ></a-image>
           </div>
-          <div class="content-right">
-            <div class="content-right-scene">
-              <!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
+          <div :class="contentLocation(1, dataFrom.attrType)">
+            <div class="content-right-scene" :class="'content-right-case'">
+              <div class="content-top">{{ itemSonTitle.name }}</div>
               <a-tooltip>
                 <template #title>{{ itemSonTitle.desc }}</template>
                 <div class="content-bottom">{{ itemSonTitle.desc }}</div>
@@ -97,11 +97,15 @@
       }
     }
   )
+  const { log } = console
   //滚动条样式
   function tabIndexClass(index, title, content) {
     if (title == '应用场景' && index == 0 && content.length > 6) {
       return 'tab-son-class'
     }
+    if (title == '应用案例' && index == 0 && content.length > 6) {
+      return 'tab-son-class-two'
+    }
   }
   //初始化tab切换（判断标题不同，点击事件的判断变量不同）
   function tabInitialize() {
@@ -112,10 +116,27 @@
     tabindex.value = name
     return tabindex.value
   }
+  //内容位置初始化
+  function contentLocation(index, title) {
+    log(index, title)
+    if (index == 0) {
+      if (title == '应用场景') {
+        return 'content-left'
+      } else {
+        return 'content-left'
+      }
+    } else {
+      if (title == '应用场景') {
+        return 'content-right'
+      } else {
+        return 'content-right'
+      }
+    }
+  }
 </script>
 
 <style lang="less" scoped>
-  .function-intorduction {
+  .application-scenarios-and-case {
     width: 100%;
     background: #f7f8fa;
     display: flex;
@@ -123,63 +144,62 @@
     align-items: center;
     overflow-x: unset;
     .application-scenarios-and-case-son {
-      padding-top: 0.8rem;
-      padding-bottom: 0.8rem;
+      padding-top: 80px;
+      padding-bottom: 80px;
       display: flex;
       flex-direction: column;
       align-items: center;
       overflow: unset;
       .tab {
-        max-width: 13rem;
+        max-width: 1300px;
         overflow-x: auto;
         display: flex;
         justify-content: center;
         color: #808080;
-        border-bottom: 0.01rem #e4e6f5 solid;
-        margin-top: 0.45rem;
-        margin-bottom: 0.4rem;
+        border-bottom: 1px #e4e6f5 solid;
+        margin-top: 45px;
+        margin-bottom: 40px;
         cursor: pointer;
-        padding-left: 0.4rem;
-        padding-right: 0.4rem;
+        padding-left: 40px;
+        padding-right: 40px;
         .tab-son {
           display: flex;
           flex-direction: column;
           align-items: center;
-          text-align: center;
-          margin-right: 1rem;
+          margin-right: 100px;
           .tab-top {
-            min-width: 1.2rem;
-            font-size: 0.24rem;
-            line-height: 0.24rem;
-            margin-bottom: 0.2rem;
-            max-width: 2rem;
-            height: 0.24rem;
+            min-width: 120px;
+            font-size: 24px;
+            line-height: 24px;
+            margin-bottom: 20px;
+            max-width: 200px;
+            height: 24px;
             display: -webkit-box;
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
           }
           .tab-top-down {
-            min-width: 1.2rem;
+            min-width: 120px;
             color: #526aff;
-            margin-bottom: 0.16rem;
+            margin-bottom: 16px;
           }
           .tab-bottom {
-            height: 0.04rem;
-            width: 0.6rem;
+            height: 4px;
+            width: 60px;
             background: #526aff;
           }
         }
         .tab-son-class {
-          margin-left: 4.3rem;
-          margin-bottom: 0.02rem;
+          margin-left: 430px;
+          margin-bottom: 2px;
         }
         .tab-son-class-two {
-          margin-left: 2.3rem;
-          margin-bottom: 0.02rem;
+          margin-left: 230px;
+          margin-bottom: 2px;
         }
         .tab-son:last-child {
-          margin-right: 0rem;
+          margin-right: 0px;
         }
       }
       .tab::-webkit-scrollbar-thumb {
@@ -189,57 +209,57 @@
         display: flex;
         position: relative;
         width: 100%;
-        min-width: 13rem;
-        height: 3.4rem;
+        min-width: 1300px;
+        height: 340px;
         .content-left {
           position: absolute;
           left: 0;
-          min-width: 6.2rem;
-          :deep(.ant-image-img) {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-          }
+          min-width: 620px;
           // text-align: center;
           .content-top {
             text-align: left;
           }
         }
         .content-right {
-          width: 6.2rem;
-          height: 3.4rem;
+          width: 620px;
+          height: 340px;
           position: absolute;
           right: 0;
           display: flex;
           justify-content: center;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
         }
         .content-right-scene,
         .content-right-case {
-          width: 6.2rem;
-          height: 3.4rem;
+          width: 620px;
+          height: 340px;
           display: flex;
           flex-direction: column;
           justify-content: center;
         }
         .content-left-scene,
         .content-left-case {
-          height: 3.4rem;
-          width: 6.35rem;
-          border-radius: 0.1rem;
+          height: 340px;
+          width: 635px;
+          border-radius: 10px;
           background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
           background-position: center;
-          background-size: 6.35rem 3.4rem;
+          background-size: 635px 340px;
         }
         .content-top {
-          font-size: 0.22rem;
-          line-height: 0.22rem;
+          font-size: 22px;
+          line-height: 22px;
           color: #000000;
-          margin-bottom: 0.35rem;
+          margin-bottom: 35px;
         }
         .content-bottom {
-          font-size: 0.18rem;
+          font-size: 18px;
           color: #999999;
-          line-height: 0.26rem;
+          line-height: 26px;
           display: -webkit-box;
           overflow: hidden;
           -webkit-line-clamp: 6;
@@ -248,7 +268,7 @@
       }
     }
     .application-scenarios-and-case-son:first-child {
-      padding-top: 1rem;
+      padding-top: 100px;
     }
   }
 </style>
diff --git a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
index ca179210..bd29eef3 100644
--- a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
@@ -232,34 +232,26 @@
       }
 
       .bottom {
-        margin-top: 0.4rem;
+        margin-top: 40px;
         display: flex;
-
         .ant-btn {
-          height: 0.5rem;
-          margin-right: 0.2rem;
-          background: #ffffff;
-          border-radius: 0.06rem;
-          font-size: 0.2rem;
+          height: 50px;
+          margin-right: 20px;
+          background: #ff8b55;
+          border-radius: 6px;
+          font-size: 20px;
           display: flex;
           justify-content: center;
           align-items: center;
         }
-
-        .ant-btn-primary {
-          color: #1890ff;
-        }
-
         .ant-btn:nth-of-type(1) {
-          width: 1.8rem;
+          width: 180px;
         }
-
         .ant-btn:nth-of-type(2) {
-          width: 2.2rem;
+          width: 220px;
         }
-
         .ant-btn:nth-of-type(3) {
-          width: 1.45rem;
+          width: 145px;
           background: #fff;
           color: #526aff;
         }
diff --git a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
index 06a2f533..698980e5 100644
--- a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
@@ -207,11 +207,7 @@
       (item) => item.attrType === '技术文档'
     )[0]
     if (obj) {
-      window.open(
-        window.SITE_CONFIG.previewUrl +
-          'hisense_office/onlinePreview?url=' +
-          btoa(encodeURI(obj.attrValue))
-      )
+      window.open(window.SITE_CONFIG.frontUrl + obj.attrValue)
     } else {
       message.config({
         top: '100px', // 距离顶部的位置
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue b/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
index 016bb3ee..436aec93 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
@@ -35,7 +35,7 @@
       </div>
       <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
         <div class="content" v-if="tabindex == itemSonTitle.name">
-          <div class="content-right">
+          <div class="content-left">
             <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
             <a-image
               :width="635"
@@ -121,13 +121,13 @@
     log(index, title)
     if (index == 0) {
       if (title == '应用场景') {
-        return 'content-right'
+        return 'content-left'
       } else {
         return 'content-left'
       }
     } else {
       if (title == '应用场景') {
-        return 'content-left'
+        return 'content-right'
       } else {
         return 'content-right'
       }
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue b/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
index ec1d4bd8..04aae90b 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
@@ -138,10 +138,9 @@
     let obj = props.dataList.infoList.filter(
       (item) => item.attrType === '技术文档'
     )[0]
-    debugger
     console.log('dataFrom.value.link', obj.attrValue)
     window.open(
-      window.SITE_CONFIG.previewUrl +
+      window.SITE_CONFIG.frontUrl +
         'hisense_office/onlinePreview?url=' +
         btoa(encodeURI(obj.attrValue))
     )
@@ -150,7 +149,6 @@
     let obj = props.dataList.infoList.filter(
       (item) => item.attrType === '使用手册'
     )[0]
-    debugger
     console.log('dataFrom.value.link', obj.attrValue)
     window.open(
       window.SITE_CONFIG.previewUrl +
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue
index 4ba703cb..436aec93 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue
@@ -1,10 +1,10 @@
 <!-- 应用场景-->
 <template>
-  <div class="function-intorduction" v-if="flag">
+  <div class="application-scenarios-and-case" v-if="flag">
     <div class="application-scenarios-and-case-son">
       <!-- {{ dataFrom.attrType }} -->
       <div class="title">
-        <DetalsTitle :title="dataFrom.attrType" type="SCENE"></DetalsTitle>
+        <DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
       </div>
       <div class="tab">
         <div
@@ -44,9 +44,9 @@
               v-if="itemSonTitle.img"
             ></a-image>
           </div>
-          <div class="content-right">
-            <div class="content-right-scene">
-              <!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
+          <div :class="contentLocation(1, dataFrom.attrType)">
+            <div class="content-right-scene" :class="'content-right-case'">
+              <div class="content-top">{{ itemSonTitle.name }}</div>
               <a-tooltip>
                 <template #title>{{ itemSonTitle.desc }}</template>
                 <div class="content-bottom">{{ itemSonTitle.desc }}</div>
@@ -97,11 +97,15 @@
       }
     }
   )
+  const { log } = console
   //滚动条样式
   function tabIndexClass(index, title, content) {
     if (title == '应用场景' && index == 0 && content.length > 6) {
       return 'tab-son-class'
     }
+    if (title == '应用案例' && index == 0 && content.length > 6) {
+      return 'tab-son-class-two'
+    }
   }
   //初始化tab切换（判断标题不同，点击事件的判断变量不同）
   function tabInitialize() {
@@ -112,10 +116,27 @@
     tabindex.value = name
     return tabindex.value
   }
+  //内容位置初始化
+  function contentLocation(index, title) {
+    log(index, title)
+    if (index == 0) {
+      if (title == '应用场景') {
+        return 'content-left'
+      } else {
+        return 'content-left'
+      }
+    } else {
+      if (title == '应用场景') {
+        return 'content-right'
+      } else {
+        return 'content-right'
+      }
+    }
+  }
 </script>
 
 <style lang="less" scoped>
-  .function-intorduction {
+  .application-scenarios-and-case {
     width: 100%;
     background: #f7f8fa;
     display: flex;
@@ -123,63 +144,62 @@
     align-items: center;
     overflow-x: unset;
     .application-scenarios-and-case-son {
-      padding-top: 0.8rem;
-      padding-bottom: 0.8rem;
+      padding-top: 80px;
+      padding-bottom: 80px;
       display: flex;
       flex-direction: column;
       align-items: center;
       overflow: unset;
       .tab {
-        max-width: 13rem;
+        max-width: 1300px;
         overflow-x: auto;
         display: flex;
         justify-content: center;
         color: #808080;
-        border-bottom: 0.01rem #e4e6f5 solid;
-        margin-top: 0.45rem;
-        margin-bottom: 0.4rem;
+        border-bottom: 1px #e4e6f5 solid;
+        margin-top: 45px;
+        margin-bottom: 40px;
         cursor: pointer;
-        padding-left: 0.4rem;
-        padding-right: 0.4rem;
+        padding-left: 40px;
+        padding-right: 40px;
         .tab-son {
           display: flex;
           flex-direction: column;
           align-items: center;
-          text-align: center;
-          margin-right: 1rem;
+          margin-right: 100px;
           .tab-top {
-            min-width: 1.2rem;
-            font-size: 0.24rem;
-            line-height: 0.24rem;
-            margin-bottom: 0.2rem;
-            max-width: 2rem;
-            height: 0.24rem;
+            min-width: 120px;
+            font-size: 24px;
+            line-height: 24px;
+            margin-bottom: 20px;
+            max-width: 200px;
+            height: 24px;
             display: -webkit-box;
             overflow: hidden;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
           }
           .tab-top-down {
-            min-width: 1.2rem;
+            min-width: 120px;
             color: #526aff;
-            margin-bottom: 0.16rem;
+            margin-bottom: 16px;
           }
           .tab-bottom {
-            height: 0.04rem;
-            width: 0.6rem;
+            height: 4px;
+            width: 60px;
             background: #526aff;
           }
         }
         .tab-son-class {
-          margin-left: 4.3rem;
-          margin-bottom: 0.02rem;
+          margin-left: 430px;
+          margin-bottom: 2px;
         }
         .tab-son-class-two {
-          margin-left: 2.3rem;
-          margin-bottom: 0.02rem;
+          margin-left: 230px;
+          margin-bottom: 2px;
         }
         .tab-son:last-child {
-          margin-right: 0rem;
+          margin-right: 0px;
         }
       }
       .tab::-webkit-scrollbar-thumb {
@@ -189,57 +209,57 @@
         display: flex;
         position: relative;
         width: 100%;
-        min-width: 13rem;
-        height: 3.4rem;
+        min-width: 1300px;
+        height: 340px;
         .content-left {
           position: absolute;
           left: 0;
-          min-width: 6.2rem;
-          :deep(.ant-image-img) {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-          }
+          min-width: 620px;
           // text-align: center;
           .content-top {
             text-align: left;
           }
         }
         .content-right {
-          width: 6.2rem;
-          height: 3.4rem;
+          width: 620px;
+          height: 340px;
           position: absolute;
           right: 0;
           display: flex;
           justify-content: center;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
         }
         .content-right-scene,
         .content-right-case {
-          width: 6.2rem;
-          height: 3.4rem;
+          width: 620px;
+          height: 340px;
           display: flex;
           flex-direction: column;
           justify-content: center;
         }
         .content-left-scene,
         .content-left-case {
-          height: 3.4rem;
-          width: 6.35rem;
-          border-radius: 0.1rem;
+          height: 340px;
+          width: 635px;
+          border-radius: 10px;
           background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
           background-position: center;
-          background-size: 6.35rem 3.4rem;
+          background-size: 635px 340px;
         }
         .content-top {
-          font-size: 0.22rem;
-          line-height: 0.22rem;
+          font-size: 22px;
+          line-height: 22px;
           color: #000000;
-          margin-bottom: 0.35rem;
+          margin-bottom: 35px;
         }
         .content-bottom {
-          font-size: 0.18rem;
+          font-size: 18px;
           color: #999999;
-          line-height: 0.26rem;
+          line-height: 26px;
           display: -webkit-box;
           overflow: hidden;
           -webkit-line-clamp: 6;
@@ -248,7 +268,7 @@
       }
     }
     .application-scenarios-and-case-son:first-child {
-      padding-top: 1rem;
+      padding-top: 100px;
     }
   }
 </style>
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue b/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
index 8611e43d..df9022ea 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
@@ -9,12 +9,15 @@
   <div class="application-presentation" v-if="flag">
     <detals-title title="图层预览" type="PREVIEW"></detals-title>
     <div class="main">
-      <iframe
+      <!-- <iframe
         :src="img"
         width="100%"
         height="100%"
         border-radius="0.1rem"
-      ></iframe>
+      ></iframe> -->
+      <div class="iframe-box">
+        <iframe :src="img" width="100%" height="440"></iframe>
+      </div>
     </div>
   </div>
 </template>
@@ -37,7 +40,7 @@
     } else {
       props.dataList.infoList.map((item) => {
         if (item.attrType === '预览服务地址') {
-          img.value = imgindex.attrValue || '--'
+          img.value = item.attrValue.replace(/amp;/g, '') || '--'
         }
       })
     }
@@ -54,7 +57,7 @@
         } else {
           val.infoList.map((item) => {
             if (item.attrType === '预览服务地址') {
-              img.value = imgindex.attrValue || '--'
+              img.value = item.attrValue.replace(/amp;/g, '') || '--'
             }
           })
         }
@@ -64,14 +67,23 @@
 </script>
 <style lang="less" scoped>
   .application-presentation {
-    padding: 0.8rem 3rem 0;
+    padding: 0.8rem 3rem 0.6rem;
     .main {
-      height: 5rem;
-      border-radius: 0.1rem;
+      // border-radius: 0.1rem;
       margin-top: 0.4rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      // display: flex;
+      // justify-content: center;
+      // align-items: center;
+      iframe {
+        border: none;
+      }
+      .iframe-box {
+        width: 100%;
+        height: 440px;
+        margin-top: 10px;
+        display: flex;
+        justify-content: center;
+      }
     }
   }
 </style>
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
index f6f7b1c8..a0702fc7 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
@@ -215,11 +215,7 @@
       (item) => item.attrType === '技术文档'
     )[0]
     if (obj) {
-      window.open(
-        window.SITE_CONFIG.previewUrl +
-          'hisense_office/onlinePreview?url=' +
-          btoa(encodeURI(obj.attrValue))
-      )
+      window.open(window.SITE_CONFIG.frontUrl + obj.attrValue)
     } else {
       message.config({
         top: '100px', // 距离顶部的位置
diff --git a/front/src/views/home/AbilityToApplyFor.vue b/front/src/views/home/AbilityToApplyFor.vue
index 57d4eabf..cc0393e2 100644
--- a/front/src/views/home/AbilityToApplyFor.vue
+++ b/front/src/views/home/AbilityToApplyFor.vue
@@ -5,44 +5,54 @@
       <span class="btn" @click="falg = !falg" v-show="!falg">展开</span>
       <span class="btn" @click="falg = !falg" v-show="falg">收起</span>
     </div>
-    <div v-for="(item, index) in dataForm" :key="index" class="ability-to-apply-for-content">
+    <div
+      v-for="(item, index) in dataForm"
+      :key="index"
+      class="ability-to-apply-for-content"
+    >
       <div class="dep-name">
         <span></span>
         {{ item.deptName }}
       </div>
       <template v-for="val in item.arr" :key="val.resourceId">
         <div class="item">
-          <div class="tx" :class="
-            val.type == '基础设施'
-              ? 'sxt'
-              : val.componentType == '智能算法'
+          <div
+            class="tx"
+            :class="
+              val.type == '基础设施'
+                ? 'sxt'
+                : val.componentType == '智能算法'
                 ? 'znsf'
                 : val.componentType == '图层服务'
-                  ? 'tcfw'
-                  : val.componentType == '开发组件'
-                    ? 'kfzj'
-                    : val.componentType == '业务组件'
-                      ? 'ywzj'
-                      : ''
-          "></div>
+                ? 'tcfw'
+                : val.componentType == '开发组件'
+                ? 'kfzj'
+                : val.componentType == '业务组件'
+                ? 'ywzj'
+                : ''
+            "
+          ></div>
           <div class="text">
             <div class="name">
-              <span @click="
-                showItem(val.resourceId, val.type, val.delFlag, val.note1)
-              " style="cursor: pointer">
+              <span
+                @click="
+                  showItem(val.resourceId, val.type, val.delFlag, val.note1)
+                "
+                style="cursor: pointer"
+              >
                 {{ val.resourceName }}
               </span>
               <span>{{ val.type }}</span>
             </div>
             <div class="description">
               {{
-                  val.description ||
-                  (val.note1 &&
-                    JSON.parse(val.note1)[0].channelName +
+                val.description ||
+                (val.note1 &&
+                  JSON.parse(val.note1)[0].channelName +
                     '等' +
                     JSON.parse(val.note1).length +
                     '个摄像头') ||
-                  '--'
+                '--'
               }}
             </div>
           </div>
@@ -51,8 +61,17 @@
       </template>
     </div>
   </div>
-  <a-modal v-model:visible="videoVisible" title="已申请摄像头列表" @ok="videoVisible = false">
-    <a-table :columns="columns" :data-source="xVideoList" bordered :pagination="{ defaultPageSize: 6 }">
+  <a-modal
+    v-model:visible="videoVisible"
+    title="已申请摄像头列表"
+    @ok="videoVisible = false"
+  >
+    <a-table
+      :columns="columns"
+      :data-source="xVideoList"
+      bordered
+      :pagination="{ defaultPageSize: 6 }"
+    >
       <template #bodyCell="{ column, text }">
         <!-- <template>
         <a>{{ text }}</a>
@@ -63,201 +82,201 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
-import { message } from 'ant-design-vue'
-import { ref, defineProps } from 'vue'
-import mybus from '@/myplugins/mybus'
-const router = useRouter()
-const props = defineProps({
-  dataList: { type: Array, default: null },
-})
-const falg = ref(false)
-let dataForm = ref([])
-const videoVisible = ref(false)
-const xVideoList = ref([])
-
-const columns = ref([
-  {
-    title: '摄像头名称',
-    dataIndex: 'name',
-  },
-])
-// eslint-disable-next-line vue/no-setup-props-destructure
-dataForm.value = props.dataList
-console.log(dataForm.value)
-// const router = useRouter()
-// const arr =
-//   router.currentRoute.value.query.name instanceof Array
-//     ? router.currentRoute.value.query.name
-//     : [router.currentRoute.value.query.name]
-// const dataResourceId = router.currentRoute.value.query.resourceId
-
-// const depList = ref({
-//   Name: [],
-//   depID: [],
-// })
-//移除方法
-const removeFunction = (data) => {
-  dataForm.value.map((val) => {
-    if (val.arr.length > 1) {
-      val.arr = val.arr.filter((item) => item.id !== data.id)
-    } else {
-      message.error('至少需要提交一条能力申请！')
-    }
+  import { useRouter } from 'vue-router'
+  import { message } from 'ant-design-vue'
+  import { ref, defineProps } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const props = defineProps({
+    dataList: { type: Array, default: null },
   })
-  dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
-}
-// 详情
-const showItem = (id, type, delFlag, note1) => {
-  if (type == '基础设施') {
-    let arr = JSON.parse(note1)
-    xVideoList.value = []
-    arr.map((val) => {
-      xVideoList.value.push({ name: val.channelName, key: val.channelId })
+  const falg = ref(false)
+  let dataForm = ref([])
+  const videoVisible = ref(false)
+  const xVideoList = ref([])
+
+  const columns = ref([
+    {
+      title: '摄像头名称',
+      dataIndex: 'name',
+    },
+  ])
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  dataForm.value = props.dataList
+  console.log(dataForm.value)
+  // const router = useRouter()
+  // const arr =
+  //   router.currentRoute.value.query.name instanceof Array
+  //     ? router.currentRoute.value.query.name
+  //     : [router.currentRoute.value.query.name]
+  // const dataResourceId = router.currentRoute.value.query.resourceId
+
+  // const depList = ref({
+  //   Name: [],
+  //   depID: [],
+  // })
+  //移除方法
+  const removeFunction = (data) => {
+    dataForm.value.map((val) => {
+      if (val.arr.length > 1) {
+        val.arr = val.arr.filter((item) => item.id !== data.id)
+      } else {
+        message.error('至少需要提交一条能力申请！')
+      }
     })
-    videoVisible.value = true
-  } else {
-    if (delFlag == 0) {
-      window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
-      mybus.emit('tabsChange', { flag: id })
-      router.push({
-        path: '/details',
-        query: {
-          id: id,
-        },
+    dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
+  }
+  // 详情
+  const showItem = (id, type, delFlag, note1) => {
+    if (type == '基础设施') {
+      let arr = JSON.parse(note1)
+      xVideoList.value = []
+      arr.map((val) => {
+        xVideoList.value.push({ name: val.channelName, key: val.channelId })
       })
+      videoVisible.value = true
+    } else {
+      if (delFlag == 0) {
+        window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
+        mybus.emit('tabsChange', { flag: id })
+        router.push({
+          path: '/details',
+          query: {
+            id: id,
+          },
+        })
+      }
     }
   }
-}
 </script>
 
 <style scoped lang="less">
-.ability-to-apply-for {
-  height: 2.9rem;
-  overflow: hidden;
+  .ability-to-apply-for {
+    height: 2.9rem;
+    overflow: hidden;
 
-  .title {
-    font-size: 0.16rem;
-    color: #212121;
-    border-bottom: 0.01rem #dddee1 solid;
-    padding-bottom: 0.1rem;
-    margin-bottom: 0.2rem;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .ability-to-apply-for-content {
-    padding-right: 0.5rem;
-    position: relative;
-
-    .dep-name {
-      color: #0558e1;
-      font-size: 0.22rem;
-      display: flex;
-      align-items: center;
-      line-height: 0.22rem;
-      margin-bottom: 0.2rem;
-
-      span {
-        display: inline-block;
-        width: 0.05rem;
-        height: 0.05rem;
-        background: #0558e1;
-        border-radius: 0.05rem;
-        margin-right: 0.05rem;
-      }
-    }
-
-    .item {
+    .title {
+      font-size: 0.16rem;
+      color: #212121;
+      border-bottom: 0.01rem #dddee1 solid;
       padding-bottom: 0.1rem;
-      margin-bottom: 0.1rem;
-      border-bottom: 1px solid #dddee1;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 0.2rem;
-        width: 8.8rem;
-      }
-    }
-
-    .name {
       margin-bottom: 0.2rem;
+      display: flex;
+      justify-content: space-between;
+    }
 
-      span:first-child {
-        display: inline-block;
-        margin-right: 0.08rem;
-        font-size: 0.18rem;
-        color: #000000;
+    .ability-to-apply-for-content {
+      padding-right: 0.5rem;
+      position: relative;
+
+      .dep-name {
+        color: #0558e1;
+        font-size: 0.22rem;
+        display: flex;
+        align-items: center;
+        line-height: 0.22rem;
+        margin-bottom: 0.2rem;
+
+        span {
+          display: inline-block;
+          width: 0.05rem;
+          height: 0.05rem;
+          background: #0558e1;
+          border-radius: 0.05rem;
+          margin-right: 0.05rem;
+        }
       }
 
-      span:last-child {
-        display: inline-block;
-        padding: 0 0.05rem;
-        background: #00b8e6;
-        color: #fff;
+      .item {
+        padding-bottom: 0.1rem;
+        margin-bottom: 0.1rem;
+        border-bottom: 1px solid #dddee1;
+        display: flex;
+        align-items: center;
+
+        .text {
+          margin-left: 0.2rem;
+          width: 8.8rem;
+        }
       }
-    }
 
-    .description {
-      width: 8.8rem;
-      color: rgba(0, 0, 0, 0.45);
-    }
+      .name {
+        margin-bottom: 0.2rem;
 
-    .remove {
-      margin-left: 0.1rem;
-      width: 0.32rem;
-      height: 0.32rem;
-      background: url('~@/assets/home/remove.png') no-repeat;
-      background-size: cover;
-      cursor: pointer;
-    }
+        span:first-child {
+          display: inline-block;
+          margin-right: 0.08rem;
+          font-size: 0.18rem;
+          color: #000000;
+        }
 
-    .remove:hover {
-      background: url('~@/assets/home/remove-hover.png') no-repeat;
-      background-size: cover;
+        span:last-child {
+          display: inline-block;
+          padding: 0 0.05rem;
+          background: #00b8e6;
+          color: #fff;
+        }
+      }
+
+      .description {
+        width: 8.8rem;
+        color: rgba(0, 0, 0, 0.45);
+      }
+
+      .remove {
+        margin-left: 0.1rem;
+        width: 0.32rem;
+        height: 0.32rem;
+        background: url('~@/assets/home/remove.png') no-repeat;
+        background-size: cover;
+        cursor: pointer;
+      }
+
+      .remove:hover {
+        background: url('~@/assets/home/remove-hover.png') no-repeat;
+        background-size: cover;
+      }
     }
   }
-}
 
-.all {
-  height: unset;
-  min-height: 2.9rem;
-}
+  .all {
+    height: unset;
+    min-height: 2.9rem;
+  }
 
-.btn {
-  cursor: pointer;
-}
+  .btn {
+    cursor: pointer;
+  }
 
-.tx {
-  display: inline-block;
-  width: 0.8rem;
-  height: 0.8rem;
-  margin-left: 0.1rem;
-}
+  .tx {
+    display: inline-block;
+    width: 0.8rem;
+    height: 0.8rem;
+    margin-left: 0.1rem;
+  }
 
-.sxt {
-  background: url('~@/assets/home/sxt_square.png') no-repeat;
-  background-size: 100%;
-}
+  .sxt {
+    background: url('~@/assets/home/sxt_square.png') no-repeat;
+    background-size: 100%;
+  }
 
-.znsf {
-  background: url('~@/assets/home/znsf_square.png') no-repeat;
-  background-size: 100%;
-}
+  .znsf {
+    background: url('~@/assets/home/znsf_square.png') no-repeat;
+    background-size: 100%;
+  }
 
-.tcfw {
-  background: url('~@/assets/home/tcfw_square.png') no-repeat;
-  background-size: 100%;
-}
+  .tcfw {
+    background: url('~@/assets/home/tcfw_square.png') no-repeat;
+    background-size: 100%;
+  }
 
-.kfzj {
-  background: url('~@/assets/home/kfzj_square.png') no-repeat;
-  background-size: 100%;
-}
+  .kfzj {
+    background: url('~@/assets/home/kfzj_square.png') no-repeat;
+    background-size: 100%;
+  }
 
-.ywzj {
-  background: url('~@/assets/home/ywzj_square.png') no-repeat;
-  background-size: 100%;
-}
+  .ywzj {
+    background: url('~@/assets/home/ywzj_square.png') no-repeat;
+    background-size: 100%;
+  }
 </style>
diff --git a/front/src/views/home/apply.vue b/front/src/views/home/apply.vue
index 44123dad..36221256 100644
--- a/front/src/views/home/apply.vue
+++ b/front/src/views/home/apply.vue
@@ -305,6 +305,7 @@
         unit: '',
         system: [],
         enclosure: '', //附件
+        enclosureName: '', //附件
       })
       const dataList = ref([])
       getUser().then((res) => {
@@ -422,7 +423,7 @@
                   item.note1 = JSON.parse(item.note1)
                   item.note1.map((sxt) => {
                     obj.system.push({
-                      resourceId: sxt.idtCameraChannel,
+                      resourceId: sxt.idtCameraChannel + '',
                       resourceName: sxt.channelName,
                       cameraId: sxt.channelId,
                     })
@@ -538,6 +539,7 @@
         if (info.file.status === 'done') {
           message.success(`${info.file.name} 上传成功`)
           formName.enclosure = info.file.response.data
+          formName.enclosureName = info.file.name
         } else if (info.file.status === 'error') {
           message.error(`${info.file.name} 上传失败`)
         }
diff --git a/front/src/views/home/components/header.vue b/front/src/views/home/components/header.vue
index 84655e1b..2f67446f 100644
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@@ -113,7 +113,7 @@
   import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
   import { recordRoute } from '@/config'
   import { useRoute, useRouter } from 'vue-router'
-  import { getUser, mynotice } from '@/api/home'
+  import { mynotice } from '@/api/home'
   import { useStore } from 'vuex'
   import { getSgcTotal } from '@/api/home'
   import mybus from '@/myplugins/mybus'
@@ -132,20 +132,25 @@
   //   // { name: '后台管理', key: 'houtaiguanli' },
   //   { name: '赋能案例', key: 'assignCase' },
   // ])
-  const user = ref({})
+  const user = ref({
+    username: store.getters['user/username'],
+  })
+  // user.username.value = store.getters(['user/username'])
   const select = ref(router.currentRoute.value.name)
   const mynoticeFlag = ref(false)
   const mynoticeData = ref([])
+  console.log('navListManagement------------>', navListManagement)
+
   // eslint-disable-next-line no-undef
   const navList = ref(navListManagement.navList)
   const props = defineProps({
     showView: { type: String, default: '' },
   })
-  // 获取用户信息
-  getUser().then((res) => {
-    user.value = res.data.data
-    // console.log('user===============>', user.value)
-  })
+  // // 获取用户信息
+  // getUser().then((res) => {
+  //   user.value = res.data.data
+  //   // console.log('user===============>', user.value)
+  // })
   // 退出登录
   const logout = async () => {
     await store.dispatch('user/logout')
@@ -191,6 +196,11 @@
           path: '/developmentGuide',
         })
         break
+      case '指导手册':
+        router.push({
+          path: '/instructionManual',
+        })
+        break
       case '需求中心':
         router.push({
           path: '/demandCenter',
@@ -202,8 +212,8 @@
         })
         break
       case '后台管理':
-        window.open(window.SITE_CONFIG.backUrl + '/#/login')
-        window.reload('http://15.2.21.238:9797')
+        window.open(window.SITE_CONFIG.backUrl + '/#/workBench-workBench')
+        // window.reload('http://15.2.21.238:9797')
         break
       case '赋能案例':
         router.push({
@@ -214,9 +224,9 @@
         router.push({
           path: '/integrationServices',
           //  path: '/DetailsPageconetent',
-            query: {
-              select: '融合服务',
-            },
+          query: {
+            select: '融合服务',
+          },
         })
         break
       default:
@@ -316,7 +326,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0 1rem;
+    // padding: 0 1rem;
     background-color: rgba(0, 0, 25, 0.7);
     position: fixed;
     z-index: 1000;
@@ -355,7 +365,7 @@
       color: #fff !important;
     }
     .info {
-      width: 2rem;
+      // width: 2rem;
       margin-left: 0.2rem;
       display: flex;
       justify-content: center;
@@ -374,7 +384,11 @@
         font-size: 0.16rem;
       }
       .name {
-        max-width: 0.75rem;
+        max-width: 3.3rem;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
         overflow: hidden;
       }
       .out {
diff --git a/front/src/views/home/components/searchResultList.vue b/front/src/views/home/components/searchResultList.vue
index 5d0ab90e..03d81ba4 100644
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@@ -10,10 +10,17 @@
         }}
       </div>
       <div class="condition" :key="showKey">
-       <ul v-if="selectCardsname === '融合服务'">
-          <li v-for="(item, i) in orderList" :key="item.value" @click="changeOrder(i, item.value, item.orderType)">
+        <ul v-if="selectCardsname === '融合服务'">
+          <li
+            v-for="(item, i) in orderList"
+            :key="item.value"
+            @click="changeOrder(i, item.value, item.orderType)"
+          >
             {{ item.name }}
-            <span class="arrow" :class="item.orderType == 'ASC' ? 'down' : ''"></span>
+            <span
+              class="arrow"
+              :class="item.orderType == 'ASC' ? 'down' : ''"
+            ></span>
           </li>
         </ul>
         <ul v-else>
@@ -21,7 +28,12 @@
             v-for="item in selList"
             :key="item.value"
             @click="changeCondition(item.value)"
-            v-show="item.show"
+            v-show="
+              item.show &&
+              !(item.name === '申请量' && selectCardsname == '应用资源') &&
+              item.name !== '评分' &&
+              selectCardsname !== '数据资源'
+            "
           >
             {{ item.name }}
             <span
@@ -30,7 +42,6 @@
             ></span>
           </li>
         </ul>
-       
       </div>
     </div>
     <div
@@ -67,7 +78,9 @@
               ? 'ywzj'
               : ''
           "
-          v-if="selectCardsname !== '基础设施' && selectCardsname !== '融合服务'"
+          v-if="
+            selectCardsname !== '基础设施' && selectCardsname !== '融合服务'
+          "
         ></div>
         <div class="left jcss" v-else-if="selectCardsname === '基础设施'"></div>
         <div class="left rhfw" v-else-if="selectCardsname === '融合服务'"></div>
@@ -84,7 +97,7 @@
                 p-id="3062"
                 width="40"
                 height="40"
-                v-if="item.applyState == '通过'"
+                v-if="item.applyState == '通过' && item.type !== '应用资源'"
                 style="margin-left: 10px"
               >
                 <path
@@ -125,7 +138,9 @@
           <div class="dec">
             <div
               v-if="
-                selectCardsname !== '基础设施' && selectCardsname !== '数据资源' && selectCardsname !== '融合服务'
+                selectCardsname !== '基础设施' &&
+                selectCardsname !== '数据资源' &&
+                selectCardsname !== '融合服务'
               "
             >
               <span>{{ item.shareType || '--' }}</span>
@@ -142,13 +157,28 @@
           </div>
           <div class="bottom" v-if="selectCardsname !== '基础设施'">
             <div>
-              <div v-if="selectCardsname !== '数据资源' && selectCardsname !== '融合服务'">
+              <div
+                v-if="
+                  selectCardsname !== '数据资源' &&
+                  selectCardsname !== '融合服务'
+                "
+              >
                 浏览量：{{ item.visits || 0 }}次
               </div>
-              <div v-if="selectCardsname !== '应用资源' && selectCardsname !== '融合服务'">
+              <div
+                v-if="
+                  selectCardsname !== '应用资源' &&
+                  selectCardsname !== '融合服务'
+                "
+              >
                 申请量：{{ item.applyCount || 0 }}次
               </div>
-              <div v-if="selectCardsname === '数据资源' && selectCardsname !== '融合服务'">
+              <div
+                v-if="
+                  selectCardsname === '数据资源' &&
+                  selectCardsname !== '融合服务'
+                "
+              >
                 数据量：{{ item.sjlCount || 0 }}
               </div>
               <div v-if="selectCardsname !== '数据资源'">
@@ -208,8 +238,11 @@
               >
                 查看详情
               </a-button>
-               <a-button style="margin-left: 10px" v-show="selectCardsname === '融合服务'"
-                @click="handleAKeyApplication(item)">
+              <a-button
+                style="margin-left: 10px"
+                v-show="selectCardsname === '融合服务'"
+                @click="handleAKeyApplication(item)"
+              >
                 一键申请
               </a-button>
               <!-- <a-button
@@ -367,23 +400,23 @@
       // eslint-disable-next-line no-undef
       const whoShow1 = whoShow
       const showKey = ref(0)
-      let shoppingKey = ref(1)    
+      let shoppingKey = ref(1)
       // 融合服务排序
       const orderList = ref([
         {
           value: 'collectCount',
           name: '收藏量',
-          orderType: 'DESC'
+          orderType: 'DESC',
         },
         {
           value: 'create_date',
           name: '发布时间',
-          orderType: 'DESC'
+          orderType: 'DESC',
         },
         {
           value: 'update_date',
           name: '更新时间',
-          orderType: 'DESC'
+          orderType: 'DESC',
         },
       ])
       // 购物车id列表
@@ -461,16 +494,14 @@
           } else {
             window.open('http://10.134.135.24:30090/#/home')
           }
-        } 
-        else if (props.selectCardsname === '融合服务') {
+        } else if (props.selectCardsname === '融合服务') {
           router.push({
             path: '/integrationServicesDetails',
             query: {
               id: item.id,
             },
           })
-        }
-        else {
+        } else {
           if (type === 'apply') {
             console.log('一键申请===================>', item)
             localStorage.setItem(
@@ -577,72 +608,67 @@
       }
 
       // 融合服务--排序
-    const changeOrder = (i, val, type) => {
-      let newType = type === 'DESC' ? 'ASC' : 'DESC'
-      orderList.value[i].orderType = newType
-      mybus.emit('changeCondition', {
-        orderField: val,
-        orderType: newType,
-      })
-    }
+      const changeOrder = (i, val, type) => {
+        let newType = type === 'DESC' ? 'ASC' : 'DESC'
+        orderList.value[i].orderType = newType
+        mybus.emit('changeCondition', {
+          orderField: val,
+          orderType: newType,
+        })
+      }
 
-    // 融合服务--一键申请
-    const handleAKeyApplication = (item) => {
-      let _applyList = [];
-      (item.fuseResourceList || []).map(v => {
-        let resource = v.resource || {}
-        let obj = {
-          arr: [
-            {
-              delFlag: resource.delFlag,
-              description: resource.description,
-              resourceId: resource.id,
-              resourceName: resource.name,
-              time: resource.createDate,
-              type: resource.type,
-            },
-          ],
-          deptId: resource.deptId,
-          deptName: resource.deptName,
-        }
-        _applyList.push(obj)
-      })
+      // 融合服务--一键申请
+      const handleAKeyApplication = (item) => {
+        let _applyList = []
+        ;(item.fuseResourceList || []).map((v) => {
+          let resource = v.resource || {}
+          let obj = {
+            arr: [
+              {
+                delFlag: resource.delFlag,
+                description: resource.description,
+                resourceId: resource.id,
+                resourceName: resource.name,
+                time: resource.createDate,
+                type: resource.type,
+              },
+            ],
+            deptId: resource.deptId,
+            deptName: resource.deptName,
+          }
+          _applyList.push(obj)
+        })
 
-      localStorage.setItem(
-        'applyList',
-        JSON.stringify(_applyList)
-      )
-      router.push({
-        path: '/apply',
-      })
-    }
+        localStorage.setItem('applyList', JSON.stringify(_applyList))
+        router.push({
+          path: '/apply',
+        })
+      }
 
       mybus.on('chongzhi', (typeObj) => {
-        console.log('typeObj------------>', typeObj);
-        if(!typeObj) {
+        console.log('typeObj------------>', typeObj)
+        if (!typeObj) {
           selData.value = 'total'
         }
-        if(typeObj.type === '融合服务') {
+        if (typeObj && typeObj.type === '融合服务') {
           orderList.value = [
             {
               value: 'collectCount',
               name: '收藏量',
-              orderType: 'DESC'
+              orderType: 'DESC',
             },
             {
               value: 'create_date',
               name: '发布时间',
-              orderType: 'DESC'
+              orderType: 'DESC',
             },
             {
               value: 'update_date',
               name: '更新时间',
-              orderType: 'DESC'
+              orderType: 'DESC',
             },
           ]
         }
-        
-        
       })
       let videoUrl = ref('')
       const options = reactive({
diff --git a/front/src/views/home/detailsPageInfrastructureTree.vue b/front/src/views/home/detailsPageInfrastructureTree.vue
index 086313a2..8fd0def1 100644
--- a/front/src/views/home/detailsPageInfrastructureTree.vue
+++ b/front/src/views/home/detailsPageInfrastructureTree.vue
@@ -11,6 +11,7 @@
           :class="item.show ? 'topSelect' : ''"
         >
           {{ item.name }}
+          ({{ item.channelCount }})
           <DownOutlined v-show="!item.show" />
           <UpOutlined v-show="item.show" />
         </div>
@@ -39,9 +40,7 @@
                     fill="#0058e1"
                   ></path>
                 </svg>
-                <span class="name">
-                  {{ val.name }}
-                </span>
+                <span class="name">{{ val.name }}({{ val.channelCount }})</span>
               </div>
               <span v-if="item.children.length < 0">{{ val.total }}</span>
               <span v-else>
@@ -55,7 +54,7 @@
                 :key="child.id"
                 class="child"
                 :class="selectId == child.id ? 'select2' : ''"
-                @click="onSelect(item, val, child)"
+                @click="onSelect(item, child, child)"
               >
                 <div>
                   <svg
@@ -79,7 +78,7 @@
                     {{ child.name }}
                   </span>
                 </div>
-                <span>{{ child.total }}</span>
+                <span>{{ child.channelCount }}</span>
               </div>
             </div>
           </div>
@@ -122,7 +121,6 @@
         if (select === '123') {
           select = ''
         }
-        // debugger
         console.log(
           '获取url中的select=====================>',
           router.currentRoute.value.query.select
@@ -242,6 +240,7 @@
       // }
       const selectId = ref('')
       const onSelect = (item, val, child) => {
+        debugger
         console.log('item, val, child', child)
         mybus.emit('getCameraByParentId', val.id)
         mybus.emit('getListByParentId', val.id)
diff --git a/front/src/views/home/integrationServicesDetails.vue b/front/src/views/home/integrationServicesDetails.vue
index e4faf4a4..b42ce15f 100644
--- a/front/src/views/home/integrationServicesDetails.vue
+++ b/front/src/views/home/integrationServicesDetails.vue
@@ -187,14 +187,12 @@ const getIntegrationServicesDeatil = (id) => {
     let questionValue = fuseAttrList.find(v => v.attrType === '常见问题') || {}
     let questionObj = {
       attrType: '常见问题',
-      attrValue: JSON.stringify(questionValue.attrValue || [])
+      attrValue: questionValue.attrValue || "[]"
     }
     let areaObj = {
       attrType: '应用领域',
       attrValue: detailInfoObj.value.applicationArea
     }
-    console.log('areaObj------------>', areaObj);
-    
     combineList.value.map(item => {
       let arr = (fuseResourceList.filter(v => v.resource && v.resource.type == item.title) || []).map(d => d.resource.name)
       item.list = arr;
diff --git a/front/src/views/instructionManual/components/abilityDocTree.vue b/front/src/views/instructionManual/components/abilityDocTree.vue
new file mode 100644
index 00000000..b1874596
--- /dev/null
+++ b/front/src/views/instructionManual/components/abilityDocTree.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="list-box">
+    <div
+      class="list-item"
+      v-for="(item, i) in newDataList"
+      :key="i"
+      @click.stop="showChildren(item)"
+    >
+      <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
+        <div
+          :class="[
+            newClickData.title === item.title ? 'select' : '',
+            level === 1 ? 'parent' : '',
+            judgeLeaf(item) ? 'leaf' : '',
+          ]"
+          class="list-text"
+        >
+          {{ item.title }}
+          <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
+          <UpOutlined v-show="item.show && !judgeLeaf(item)" />
+        </div>
+      </a-tooltip>
+      <div style="margin-left: 10px" v-if="!judgeLeaf(item) && item.show">
+        <abilityDocTree
+          :dataList="item.children"
+          @tree-click="handleTreeItem"
+          :clickData="newClickData"
+          :level="newLevel + 1"
+        ></abilityDocTree>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import {
+    defineComponent,
+    onMounted,
+    ref,
+    watch,
+    defineProps,
+    nextTick,
+  } from 'vue'
+  import { getDevelopDocTree } from '@/api/home'
+  import { message } from 'ant-design-vue'
+  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+
+  const props = defineProps({
+    dataList: {
+      type: Array,
+      default: () => [],
+    },
+    level: {
+      type: Number,
+      default: 1,
+    },
+    clickData: {
+      type: Object,
+      default: () => {
+        title: ''
+      },
+    },
+  })
+
+  // 数组
+  const newDataList = ref(props.dataList)
+  // 级别
+  const newLevel = ref(props.level)
+
+  const newClickData = ref(props.clickData)
+
+  // 判断是不是叶子节点
+  const judgeLeaf = (item) => {
+    if (item.children && item.children.length > 0) {
+      return false
+    } else {
+      return true
+    }
+  }
+
+  const showChildren = (item) => {
+    if (!(item.children && item.children.length > 0)) {
+      if (newClickData.value.title !== '') {
+        handleTreeItem(item)
+      } else {
+        handleTreeItem({ title: '' })
+      }
+    }
+    if (item.children && item.children.length > 0) {
+      item.show = !item.show
+    }
+  }
+
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        newDataList.value = val
+      }
+    }
+  )
+
+  watch(
+    () => props.clickData,
+    (val) => {
+      if (val) {
+        newClickData.value = val
+      }
+    }
+  )
+
+  const emit = defineEmits(['treeClick'])
+  const handleTreeItem = (item) => {
+    emit('tree-click', item)
+  }
+</script>
+<style lang="less" scoped>
+  .list-text {
+    font-size: 16px;
+    color: #333;
+    padding: 10px 0;
+    cursor: pointer;
+    padding-left: 10px;
+    border-bottom: 1px solid #ccc;
+    overflow: hidden;
+    /*文本不会换行*/
+    white-space: nowrap;
+    /*当文本溢出包含元素时，以省略号表示超出的文本*/
+    text-overflow: ellipsis;
+
+    &:hover {
+      color: #0058e1;
+      cursor: pointer;
+    }
+  }
+
+  .parent {
+    margin-bottom: 10px;
+    background: rgba(0, 135, 225, 0.1);
+    color: #333;
+
+    &:hover {
+      color: #fff;
+      background: #0058e1;
+      cursor: pointer;
+    }
+  }
+
+  .leaf {
+    font-size: 14px;
+    color: #555;
+    cursor: pointer;
+  }
+
+  .select {
+    color: #0058e1;
+    font-weight: 600;
+    cursor: pointer;
+  }
+</style>
diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue
new file mode 100644
index 00000000..10350124
--- /dev/null
+++ b/front/src/views/instructionManual/index.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="menu-box">
+    <home-header></home-header>
+    <div id="container" class="content-menu">
+      <div class="rela">
+        <div class="left">
+          <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
+            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
+            <div class="img" :class="data.className"></div>
+            {{ data.name }}
+          </div>
+          <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
+        </div>
+        <div class="right">
+          <div class="new-menu-box" style="height: 100%" v-if="titleData.name === '新手指引'">
+            <!-- 新手指引 -->
+            <a-empty description="新手指引" />
+          </div>
+          <div v-else style="height:100%">
+            <iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
+              :src="doc_base_url + clickData.doc"></iframe>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import HomeHeader from '@/views/home/components/header'
+import abilityDocTree from './components/abilityDocTree'
+import { ref, reactive, onMounted, nextTick, watch } from 'vue'
+import { Empty, message } from 'ant-design-vue'
+import { getDevelopDocTree } from '@/api/home'
+import flatten from '@turf/flatten'
+
+const titleList = ref([
+  {
+    name: '新手指引',
+    className: 'newGuide',
+  },
+  {
+    name: '技术文档',
+    className: 'doc',
+  },
+])
+const titleData = ref(titleList.value[0])
+const clickData = ref({})
+const treeArray = ref([])
+const treeArrayCopy = ref([])
+let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
+let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
+
+const treeClick = (item) => {
+  clickData.value = item
+  console.log('clickData------------>', item)
+  titleData.value = titleList.value[1]
+}
+
+const getTreeData = () => {
+  getDevelopDocTree({})
+    .then((res) => {
+      console.log('res------文档树------>', res)
+      if (res.data.code !== 0) {
+        return message.error(res.data.msg)
+      }
+      treeArray.value = res.data.data || []
+      treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
+    })
+    .catch((err) => {
+      message.error(err)
+    })
+}
+
+const changeName = (item) => {
+  titleData.value = item
+  if (item.name == '新手指引') {
+    clickData.value = {}
+  }
+  if (item.name == '技术文档') {
+    if (!clickData.value.title) {
+      clickData.value = {}
+      treeArray.value = []
+      treeArrayCopy.value.map((val, i) => {
+        let obj = Object.assign({}, val, {
+          title: val.title,
+          show:
+            (i === 0 && val.children && val.children.length > 0) ||
+              typeList.includes(val.title)
+              ? true
+              : false,
+          children: [],
+        })
+        formData(val.children, obj)
+        treeArray.value.push(obj)
+      })
+      getFirstData(treeArrayCopy.value[0] || {})
+    }
+  }
+}
+
+const formData = (children = [], dataItem) => {
+  children.map((item, index) => {
+    let _obj = Object.assign({}, item, {
+      title: item.title,
+      show:
+        (index === 0 && item.children && item.children.length > 0) ||
+          typeList.includes(item.title)
+          ? true
+          : false,
+      children: [],
+    })
+    if (item.children && item.children.length > 0) {
+      formData(item.children, _obj)
+    }
+    dataItem.children.push(_obj)
+  })
+}
+
+const getFirstData = (firstObj = {}) => {
+  if (firstObj && firstObj.children && firstObj.children.length > 0) {
+    getFirstData(firstObj.children[0])
+  } else {
+    clickData.value = firstObj
+  }
+}
+
+onMounted(() => {
+  getTreeData()
+})
+</script>
+
+<style scoped lang="less">
+.menu-box {
+  // overflow: hidden;
+  height: 100%;
+}
+
+.first-title-text {
+  cursor: pointer;
+  font-size: 18px;
+  color: #333;
+  padding-bottom: 10px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: #0058e1;
+  }
+}
+
+.content-menu {
+  width: 1240px;
+  display: flex;
+  justify-content: flex-start;
+  margin: 0 auto;
+  margin-top: 74px;
+  box-sizing: border-box;
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  top: 0.6rem;
+  top: 0;
+}
+
+.left {
+  width: 240px;
+  padding: 20px;
+  height: 600px;
+  margin-right: 20px;
+  background: rgba(244, 245, 248, 0.8);
+  overflow-y: scroll;
+  position: absolute;
+  top: 10px;
+  left: 0;
+}
+
+.right {
+  width: 870px;
+  height: calc(100% - 20px);
+
+  position: absolute;
+  top: 10px;
+  left: 260px;
+}
+
+.sidebar {
+  right: 0 !important;
+}
+
+.content {
+  right: 16rem !important;
+  left: 0 !important;
+}
+
+.img {
+  height: 20px;
+  width: 20px;
+  margin-right: 8px;
+}
+
+.doc {
+  background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
+  background-size: 100%;
+}
+
+.newGuide {
+  background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
+  background-size: 100%;
+}
+
+.new-menu-box {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rela {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>
diff --git a/front/src/views/personalCenter/VueTemplateDemo.vue b/front/src/views/personalCenter/VueTemplateDemo.vue
index 6808a71d..10f12b37 100644
--- a/front/src/views/personalCenter/VueTemplateDemo.vue
+++ b/front/src/views/personalCenter/VueTemplateDemo.vue
@@ -16,6 +16,7 @@
 
 <script>
   import { defineComponent } from 'vue'
+  import mybus from '@/myplugins/mybus'
   import { message } from 'ant-design-vue'
   import { useRouter } from 'vue-router'
   import { getDevelopmentFile, updateDevelopmentFile } from '@/api/file'
@@ -27,34 +28,88 @@
   export default defineComponent({
     name: 'VueTemplateDemo',
     components: { Editor },
+    props: {
+      dataFrom: {
+        type: Object,
+      },
+    },
     data() {
       return {
         text: '',
         route: useRouter(),
         iconfontJs: fontJs,
+        uuidOne: '',
+        uuidTwo: '',
+        uuidSnum: '',
       }
     },
     created() {
+      this.uuidSplice()
       this.getDevelopmentFile()
     },
     methods: {
+      uuid(len, radix) {
+        var chars =
+          '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+        var uuid = [],
+          i
+        radix = radix || chars.length
+
+        if (len) {
+          // Compact form
+          for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)]
+        } else {
+          // rfc4122, version 4 form
+          var r
+
+          // rfc4122 requires these characters
+          uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
+          uuid[14] = '4'
+
+          // Fill in random data.  At i==19 set the high bits of clock sequence as
+          // per rfc4122, sec. 4.1.5
+          for (i = 0; i < 36; i++) {
+            if (!uuid[i]) {
+              r = 0 | (Math.random() * 16)
+              uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r]
+            }
+          }
+        }
+
+        return uuid.join('')
+      },
+
+      uuidSplice() {
+        this.uuidOne = this.uuid(13, 16)
+        this.uuidTwo = this.uuid(13, 16)
+        this.uuidSnum = this.uuidOne + this.uuidTwo
+        this.uuidSnum = this.uuidSnum.replace(/\s+/g, '')
+        console.log('this.uuidOne', this.uuidSnum)
+      },
       async saveText(file) {
         // console.log('保存成功', e)
         // const jsonStr = JSON.stringify(e)
         const blob = new Blob([file], {
           type: 'md',
         })
-        let myfile = new File([blob], this.route.currentRoute.query.id + '.md')
+        let myfile = new File([blob], this.uuidSnum + '.md')
         var formData = new FormData()
-        const type = pinyin(this.route.currentRoute.query.type, {
+        const type = pinyin(this.dataFrom.type, {
           pattern: 'initial',
         }).replace(/\s*/g, '')
-        formData.append('fileName', this.route.currentRoute.query.id + '.md')
+        formData.append('fileName', this.uuidSnum + '.md')
         formData.append('type', type)
         formData.append('file', myfile) // 'file' 为HTTP Post里的字段名, file 对浏览器里的File对象
         // formData.append('name', this.route.currentRoute.query.id + '.md')
         // FileSaver.saveAs(blob, '开发指南.md')
         const res = await updateDevelopmentFile(formData)
+        let infoList = {
+          attrType: '技术文档',
+          attrValue: res.data.data,
+          delFlag: 0,
+        }
+        mybus.emit('chageDataFrom', infoList)
+        mybus.emit('showTextFunctionEmit', false)
         console.log('res', res)
         if (res.data.code === 0) {
           message.success('保存成功')
@@ -63,20 +118,22 @@
         }
       },
       async getDevelopmentFile() {
-        console.log(
-          this.route.currentRoute.query.id,
-          this.route.currentRoute.query.type
-        )
-        const type = pinyin(this.route.currentRoute.query.type, {
+        const type = pinyin(this.dataFrom.type, {
           pattern: 'initial',
         }).replace(/\s*/g, '')
         console.log(type)
         const param = {
           type: type,
-          resourceId: this.route.currentRoute.query.id,
+          resourceId: this.uuidSnum,
         }
         const res = await getDevelopmentFile(param)
         this.text = res.data
+        let infoList = {
+          attrType: '技术文档',
+          attrValue: this.text.data,
+          delFlag: 0,
+        }
+        mybus.emit('chageDataFrom', infoList)
         console.log('res', res)
       },
     },
diff --git a/front/src/views/personalCenter/components/AbilityApplication.vue b/front/src/views/personalCenter/components/AbilityApplication.vue
new file mode 100644
index 00000000..2afbf921
--- /dev/null
+++ b/front/src/views/personalCenter/components/AbilityApplication.vue
@@ -0,0 +1,322 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-13 15:56:51
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请标题：{{ props.refObj.title }}</span>
+          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
+          <span>应用系统：{{ props.refObj.applicationSystem }}</span>
+        </p>
+        <p class="item">
+          <span>申请人信息：{{ props.refObj.user }}</span>
+          <span>电话：{{ props.refObj.phone }}</span>
+          <span>单位：{{ props.refObj.unit }}</span>
+        </p>
+        <p>
+          <span>应用场景：{{ props.refObj.applicationScene.join('；') }}</span>
+        </p>
+        <p>
+          <span>应用背景：{{ props.refObj.applicationBackground }}</span>
+        </p>
+        <p>
+          <span>期望效果：{{ props.refObj.effectWish }}</span>
+        </p>
+        <p v-if="props.refObj.enclosure">
+          <span>
+            申请单附件：
+            <span class="enclosure">
+              {{ props.refObj.enclosureName || '--' }}
+              <span class="btn">预览</span>
+            </span>
+          </span>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="bottom">
+    <div class="title">申请能力</div>
+    <div class="main">
+      <div class="item" v-for="(item, index) in showArr" :key="item + index">
+        <div class="deptName">
+          <span class="img"></span>
+          <span>{{ item.name }}</span>
+        </div>
+        <div class="oddNumbers">子单号：{{ item.instanceId }}</div>
+        <div class="box" v-if="item.list.length > 0">
+          <div class="ability" v-for="val in item.list" :key="val.id">
+            <div
+              class="left"
+              :class="
+                val.type == '应用资源'
+                  ? 'yyzy'
+                  : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                    )[0].attrValue == '智能算法'
+                  ? 'znsf'
+                  : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                    )[0].attrValue == '图层服务'
+                  ? 'tcfw'
+                  : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                    )[0].attrValue == '开发组件'
+                  ? 'kfzj'
+                  : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                    )[0].attrValue == '业务组件'
+                  ? 'ywzj'
+                  : 'yyzy'
+              "
+            ></div>
+            <div class="right">
+              <div class="ability-top">
+                <div class="name">
+                  {{ val.name }}
+                  <span class="type">
+                    {{
+                      val.type == '应用资源'
+                        ? '应用资源'
+                        : val.infoList.filter(
+                            (val2) => val2.attrType == '组件类型'
+                          )[0].attrValue == '智能算法'
+                        ? '智能算法'
+                        : val.infoList.filter(
+                            (val2) => val2.attrType == '组件类型'
+                          )[0].attrValue == '图层服务'
+                        ? '图层服务'
+                        : val.infoList.filter(
+                            (val2) => val2.attrType == '组件类型'
+                          )[0].attrValue == '开发组件'
+                        ? '开发组件'
+                        : val.infoList.filter(
+                            (val2) => val2.attrType == '组件类型'
+                          )[0].attrValue == '业务组件'
+                        ? '业务组件'
+                        : '--'
+                    }}
+                  </span>
+                </div>
+                <div class="btn">技术文档</div>
+              </div>
+              <div class="ability-bottom">
+                <div class="dec">资源描述：{{ val.description }}</div>
+                <div class="result">申请结果：{{ val.content || '--' }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="box" v-if="item.list2.length > 0">
+          <div class="ability" v-for="val in item.list2" :key="val.channelId">
+            <div class="left sxt"></div>
+            <div class="right">
+              <div class="ability-top">
+                <div class="name">
+                  {{ val.channelName }}
+                  <span class="type">基础设施</span>
+                </div>
+              </div>
+              <div class="ability-bottom">
+                <div class="dec">位置：{{ val.nodeName }}</div>
+                <!-- <div class="result">申请结果：{{ val.content || '--' }}</div> -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  const showArr = ref([])
+  console.log(props.refObj, '=====================================')
+  if (props.refObj.resourceApplication) {
+    showArr.value = []
+    for (const key in props.refObj.resourceApplication) {
+      if (props.refObj.resourceApplication[key].length > 0) {
+        let obj = { name: '', instanceId: '', list: [], list2: [] }
+        obj.name = key
+        props.refObj.resourceApplication[key].map((item) => {
+          obj.instanceId = item.instanceId
+          if (item.resources.length > 0) {
+            item.resources.map((val) => {
+              obj.list.push(val)
+            })
+          } else {
+            item.camera.map((val) => {
+              obj.list2.push(val)
+            })
+          }
+        })
+        showArr.value.push(obj)
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/personalCenter/components/ApplyDetails.vue b/front/src/views/personalCenter/components/ApplyDetails.vue
index cdbe8189..9a60c7b0 100644
--- a/front/src/views/personalCenter/components/ApplyDetails.vue
+++ b/front/src/views/personalCenter/components/ApplyDetails.vue
@@ -1,506 +1,40 @@
 <template>
   <div class="form-container">
-    <!-- <div class="title">基础信息</div> -->
-    <!-- <a-form
-      v-if="props.processDefinitionName == '能力申请流程'"
-      ref="formRef"
-      :model="formName"
-      name="basic"
-      :label-col="{ style: { width: '106px' } }"
-      :wrapper-col="{ style: { width: '230px' } }"
-      labelAlign="left"
-      autocomplete="off"
-    >
-      <div class="base-info">
-        <a-form-item
-          label="申请人"
-          name="user"
-          :rules="[{ required: true, message: '请输入申请人' }]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请人"
-            v-model:value="formName.user"
-          />
-        </a-form-item>
-
-        <a-form-item
-          style="margin: 0 22px"
-          label="申请人电话"
-          name="phone"
-          :rules="[
-            {
-              required: true,
-              pattern: /^1[3456789]\d{9}$/,
-              message: '请输入正确的电话号码',
-            },
-          ]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请人电话"
-            v-model:value="formName.phone"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="申请单位"
-          name="unit"
-          :rules="[{ required: true, message: '请输入申请单位' }]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请单位"
-            v-model:value="formName.unit"
-          />
-        </a-form-item>
-      </div>
-
-      <div class="title">更多申请信息</div>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="申请应用"
-        name="system"
-        :rules="[{ required: true, message: '请输入申请应用' }]"
-      >
-        <a-input
-          disabled="true"
-          style="width: 350px; background-color: #f5f5f5"
-          v-model:value="formName.system"
-        />
-      </a-form-item>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="应用场景"
-        name="scene"
-        :rules="[{ required: true, message: '请输入应用场景' }]"
-      >
-        <a-textarea
-          style="
-            width: 500px;
-            height: 150px;
-            font-size: 16px;
-            line-height: 24px;
-            color: #333;
-            border: 1px solid #e0e0e0;
-            resize: none;
-            border-radius: 6px;
-            padding: 10px;
-          "
-          disabled="true"
-          v-model:value="formName.scene"
-        />
-      </a-form-item>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="申请依据"
-        name="basis"
-        :rules="[{ required: true, message: '请输入申请依据' }]"
-      >
-        <a-textarea
-          style="
-            width: 500px;
-            height: 150px;
-            font-size: 16px;
-            line-height: 24px;
-            color: #333;
-            border: 1px solid #e0e0e0;
-            border-radius: 6px;
-            padding: 10px;
-            resize: none;
-          "
-          disabled="true"
-          v-model:value="formName.basis"
-        />
-      </a-form-item>
-
-      <a-form-item
-        v-if="formName.enclosure"
-        style="color: #666; font-size: 16px"
-        label="附件下载"
-      >
-        <button
-          style="
-            width: 100px;
-            height: 30px;
-            margin-right: 10px;
-            background: rgb(237, 244, 252);
-            color: rgb(0, 135, 255);
-            font-size: 14px;
-            border-radius: 6px;
-            border: 1px solid rgb(187, 211, 239);
-            padding: 0px;
-            text-align: center;
-            cursor: pointer;
-          "
-          @click="downloadFile(formName.enclosure, '申请附件')"
-        >
-          下载
-        </button>
-      </a-form-item>
-    </a-form>
-    <a-form
-      v-if="props.processDefinitionName == '能力需求申请'"
-      ref="formRef"
-      :model="formName"
-      name="basic"
-      :label-col="{ style: { width: '106px' } }"
-      :wrapper-col="{ style: { width: '230px' } }"
-      labelAlign="left"
-      autocomplete="off"
-    >
-      <div class="base-info">
-        <a-form-item
-          label="申请人"
-          name="applyUserName"
-          :rules="[{ required: true, message: '请输入申请人' }]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请人"
-            v-model:value="formName.applyUserName"
-          />
-        </a-form-item>
-
-        <a-form-item
-          style="margin: 0 22px"
-          label="申请人电话"
-          name="applyUserPhone"
-          :rules="[
-            {
-              required: true,
-              pattern: /^1[3456789]\d{9}$/,
-              message: '请输入正确的电话号码',
-            },
-          ]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请人电话"
-            v-model:value="formName.applyUserPhone"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="申请单位"
-          name="applyUserDeptName"
-          :rules="[{ required: true, message: '请输入申请单位' }]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请单位"
-            v-model:value="formName.applyUserDeptName"
-          />
-        </a-form-item>
-      </div>
-
-      <div class="title">需求信息</div>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="需求标题"
-        name="demandSubject"
-        :rules="[{ required: true, message: '请输入需求标题' }]"
-      >
-        <a-input
-          disabled="true"
-          style="width: 350px"
-          v-model:value="formName.demandSubject"
-        />
-      </a-form-item>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="需求类型"
-        name="请选择需求类型"
-      >
-        <a-select
-          disabled="true"
-          ref="select"
-          v-model:value="formName.detailsType"
-          @focus="focus"
-          style="width: 200px"
-        >
-          <a-select-option value="基础设施">基础设施</a-select-option>
-          <a-select-option value="数据资源">数据资源</a-select-option>
-          <a-select-option value="组件服务">组件服务</a-select-option>
-          <a-select-option value="应用资源">应用资源</a-select-option>
-          <a-select-option value="知识库">知识库</a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <a-form-item
-        label="应用领域"
-        name="detailsField"
-        style="width: 350px"
-        :rules="[{ required: true, message: '请输入应用领域' }]"
-      >
-        <a-input
-          disabled="true"
-          placeholder="请输入应用领域"
-          v-model:value="formName.detailsField"
-        />
-      </a-form-item>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="需求描述"
-        name="demandDetails"
-        :rules="[{ required: true, message: '请输入需求描述' }]"
-      >
-        <a-textarea
-          disabled="true"
-          style="
-            width: 500px;
-            height: 150px;
-            font-size: 16px;
-            line-height: 24px;
-            color: #333;
-            border: 1px solid #e0e0e0;
-            border-radius: 6px;
-            padding: 10px;
-            resize: none;
-          "
-          v-model:value="formName.demandDetails"
-        />
-      </a-form-item>
-      <a-form-item
-        v-if="formName.enclosure"
-        style="color: #666; font-size: 16px"
-        label="附件下载"
-      >
-        <button
-          style="
-            width: 100px;
-            height: 30px;
-            margin-right: 10px;
-            background: rgb(237, 244, 252);
-            color: rgb(0, 135, 255);
-            font-size: 14px;
-            border-radius: 6px;
-            border: 1px solid rgb(187, 211, 239);
-            padding: 0px;
-            text-align: center;
-            cursor: pointer;
-          "
-          @click="downloadFile(formName.enclosure, '申请附件')"
-        >
-          下载
-        </button>
-      </a-form-item>
-    </a-form>
-    <a-form
-      v-if="props.processDefinitionName == '能力资源上架'"
-      ref="formRef"
-      :model="dataForm.data"
-      name="basic"
-      :label-col="{ style: { width: '106px', height: '50px' } }"
-      :wrapper-col="{ style: { width: '230px' } }"
-      labelAlign="left"
-      autocomplete="off"
-    >
-      <div v-if="shifoushizujian">
-        <a-form-item label="应用名称">
-          <a-input
-            v-model:value="dataForm.data.name"
-            disabled="true"
-            placeholder="应用名称"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="应用描述">
-          <a-input
-            v-model:value="dataForm.data.description"
-            disabled="true"
-            placeholder="应用描述"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="部门联系人">
-          <a-input
-            v-model:value="dataForm.data.deptContacts"
-            disabled="true"
-            placeholder="部门联系人"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享类型">
-          <a-input
-            v-model:value="dataForm.data.shareType"
-            disabled="true"
-            placeholder="共享类型"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享方式">
-          <a-input
-            v-model:value="dataForm.data.shareMode"
-            disabled="true"
-            placeholder="共享方式"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享条件">
-          <a-input
-            v-model:value="dataForm.data.shareCondition"
-            disabled="true"
-            placeholder="共享方条件"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="访问地址">
-          <a-input
-            v-model:value="dataForm.data.link"
-            disabled="true"
-            placeholder="访问地址"
-          ></a-input>
-        </a-form-item>
-      </div>
-      <div v-if="!shifoushizujian">
-        <a-form-item label="组件名称" v-if="algorithmShow">
-          <a-input
-            v-model:value="dataForm.data.name"
-            disabled="true"
-            placeholder="组件名称"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="算法名称" v-if="nameNotShow">
-          <a-input
-            v-model:value="dataForm.data.name"
-            disabled="true"
-            placeholder="算法名称"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="应用描述" v-if="algorithmShow">
-          <a-input
-            v-model:value="dataForm.data.description"
-            disabled="true"
-            placeholder="应用描述"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="算法描述" v-if="nameNotShow">
-          <a-input
-            v-model:value="dataForm.data.description"
-            disabled="true"
-            placeholder="算法描述"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="部门联系人">
-          <a-input
-            v-model:value="dataForm.data.deptContacts"
-            disabled="true"
-            placeholder="部门联系人"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享类型">
-          <a-input
-            v-model:value="dataForm.data.shareType"
-            disabled="true"
-            placeholder="共享类型"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享方式">
-          <a-input
-            v-model="dataForm.data.shareMode"
-            disabled="true"
-            placeholder="共享方式"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享条件">
-          <a-input
-            v-model:value="dataForm.data.shareCondition"
-            disabled="true"
-            placeholder="共享方条件"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="服务接口">
-          <a-input
-            v-model:value="dataForm.data.apiUrl"
-            disabled="true"
-            placeholder="服务接口"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="接口请求方式">
-          <a-input
-            v-model:value="dataForm.data.apiMethodType"
-            disabled="true"
-            placeholder="接口请求方式"
-          ></a-input>
-        </a-form-item>
-      </div>
-      <div class="yingyongzujian">
-        <a-form-item
-          v-for="item in dataForm.data.infoList"
-          :key="item.index"
-          :label="item.attrType"
-          disabled="true"
-        >
-          <a-input
-            v-model:value="item.attrValue"
-            :placeholder="item.attrType"
-            disabled="true"
-          ></a-input>
-        </a-form-item>
-        <a-form-item
-          v-if="dataForm.data.enclosure"
-          style="color: #666; font-size: 16px"
-          label="附件下载"
-        >
-          <button
-            style="
-              width: 100px;
-              height: 30px;
-              margin-right: 10px;
-              background: rgb(237, 244, 252);
-              color: rgb(0, 135, 255);
-              font-size: 14px;
-              border-radius: 6px;
-              border: 1px solid rgb(187, 211, 239);
-              padding: 0px;
-              text-align: center;
-              cursor: pointer;
-            "
-            @click="downloadFile(dataForm.data.enclosure, '申请附件')"
-          >
-            下载
-          </button>
-        </a-form-item>
-      </div>
-    </a-form>
-    <a-form
-      v-if="props.processDefinitionName == '能力资源下架'"
-      ref="formRef"
-      :model="dataForm.data"
-      name="basic"
-      :label-col="{ style: { width: '106px', height: '50px' } }"
-      :wrapper-col="{ style: { width: '230px' } }"
-      labelAlign="left"
-      autocomplete="off"
-    >
-      <div>
-        <a-form-item label="申请人">
-          <a-input
-            v-model:value="dataForm.data.undercarriageUserName"
-            disabled="true"
-            placeholder="申请人"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="下架原因">
-          <a-input
-            v-model:value="dataForm.data.undercarriageReason"
-            disabled="true"
-            placeholder="下架原因"
-          ></a-input>
-        </a-form-item>
-      </div>
-    </a-form> -->
-    <div class="title">流程图</div>
+    <AbilityApplication
+      :refObj="refObj"
+      v-if="showType === '能力申请'"
+    ></AbilityApplication>
+    <PutOnTheShelf
+      :refObj="refObj"
+      v-else-if="showType === '能力上架'"
+    ></PutOnTheShelf>
+    <OffTheShelf
+      :refObj="refObj"
+      v-else-if="showType === '能力下架'"
+    ></OffTheShelf>
+    <Demand :refObj="refObj" v-else-if="showType === '能力需求'"></Demand>
+    <Comment :refObj="refObj" v-else-if="showType === '需求评论'"></Comment>
+    <OtherApplications :refObj="refObj" v-else></OtherApplications>
+    <!-- <div class="title">流程图</div>
     <div>
       <img :src="getResourceURL()" alt="" />
+    </div> -->
+    <div>
+      <div class="title">审批详情</div>
+      <template v-for="item in dataSource.data" :key="item">
+        <div class="oddNumbers">子单号:{{ item[0] }}</div>
+        <a-table :dataSource="item[1]" :columns="columns" />
+      </template>
     </div>
-    <div class="title">流转详情</div>
-    <a-table :dataSource="dataSource.data" :columns="columns" />
   </div>
 </template>
-
 <script setup>
+  import AbilityApplication from './AbilityApplication.vue'
+  import PutOnTheShelf from './PutOnTheShelf .vue'
+  import OffTheShelf from './OffTheShelf.vue'
+  import Demand from './Demand.vue'
+  import Comment from './Comment.vue'
+  import OtherApplications from '@/views/personalCenter/components/OtherApplications '
   import { onMounted, reactive, defineProps, ref } from 'vue'
   import Cookies from 'js-cookie'
   // import { baseURL } from '@/config'
@@ -513,6 +47,24 @@
     getTaskVariables,
   } from '@/api/personalCenter'
   import { selectOneDel } from '@/api/home'
+  const props = defineProps({
+    processDefinitionName: { type: String, default: null },
+    businessKey: { type: String, default: null },
+    processInstanceId: { type: String, default: null },
+    resourceId: { type: String, default: null },
+    refObj: { type: Object, default: null },
+    showType: { type: String, default: null },
+  })
+  const refObj = ref({})
+  const showType = ref('')
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  refObj.value = props.refObj
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  showType.value = props.showType
+  //流转详情
+  const dataSource = reactive({ data: [] })
+  // console.log(props.refObj, '---------------------------------------')
+
   const downloadFile = (path, name) => {
     const xhr = new XMLHttpRequest()
     xhr.open('get', path)
@@ -539,7 +91,6 @@
       }
     }
   }
-
   //表单信息
   const formName = reactive({
     user: '',
@@ -555,8 +106,6 @@
   let nameNotShow = ref('')
   let algorithmShow = ref('')
   const dataForm = reactive({ data: {} })
-  //流转详情
-  const dataSource = reactive({ data: [] })
   const columns = [
     {
       title: '任务名称',
@@ -589,13 +138,6 @@
       key: 'durationInSeconds',
     },
   ]
-
-  const props = defineProps({
-    processDefinitionName: { type: String, default: null },
-    businessKey: { type: String, default: null },
-    processInstanceId: { type: String, default: null },
-    resourceId: { type: String, default: null },
-  })
   const getInfo = () => {
     console.log(props.processInstanceId, '============================')
     if (props.processDefinitionName == '能力申请') {
@@ -666,20 +208,31 @@
 
   const getLiuZhuanInfo = () => {
     const params = qs.stringify({
-      page: 1,
-      limit: 4,
       processInstanceId: props.processInstanceId,
     })
     getTaskHandleDetailInfo(params).then((res) => {
+      let arr = []
       res.data.data.forEach((item) => {
-        dataSource.data.push(item)
+        arr.push(item)
       })
+      dataSource.data.push([props.processInstanceId, arr])
     })
   }
 
   onMounted(() => {
-    getInfo()
-    getLiuZhuanInfo()
+    // getInfo()
+    if (props.refObj.resourceApplication) {
+      dataSource.data = []
+      for (const key in props.refObj.resourceApplication) {
+        if (props.refObj.resourceApplication[key].length > 0) {
+          props.refObj.resourceApplication[key].map((item) => {
+            dataSource.data.push([item.instanceId, item.taskHandleDetailInfo])
+          })
+        }
+      }
+    } else {
+      getLiuZhuanInfo()
+    }
   })
 
   const getResourceURL = () => {
@@ -695,38 +248,27 @@
 
 <style scoped lang="less">
   .form-container {
+    height: 6rem;
+    overflow-y: scroll;
     padding: 20px 20px 30px 20px;
     .title {
-      font-size: 20px;
+      font-size: 18px;
       color: #000;
       font-weight: bold;
       margin-bottom: 20px;
+      padding-left: 10px;
+      margin-top: 10px;
+      border-left: 6px #0058e1 solid;
     }
   }
-  .base-info {
-    display: flex;
+  :deep(.ant-table-thead) > tr > .ant-table-cell {
+    background: #0087ff;
+    color: #fff;
+    border: none;
+    text-align: center;
+    font-size: 16px;
   }
-  .yingyongzujian :deep(.ant-form-item-label > label) {
-    white-space: normal;
-  }
-  :deep(.ant-form-item-label) {
-    label {
-      color: #666;
-      font-size: 16px;
-      &::after {
-        content: '';
-      }
-    }
-  }
-  :deep(.ant-form-item-required) {
-    &::before {
-      font-size: 8px;
-      margin-right: 10px;
-    }
-  }
-
-  :deep(.ant-input) {
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
+  .oddNumbers {
+    margin-bottom: 0.05rem;
   }
 </style>
diff --git a/front/src/views/personalCenter/components/Comment.vue b/front/src/views/personalCenter/components/Comment.vue
new file mode 100644
index 00000000..b37806f3
--- /dev/null
+++ b/front/src/views/personalCenter/components/Comment.vue
@@ -0,0 +1,207 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-14 16:33:00
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
+        </p>
+        <p class="item">
+          <span>评论内容：{{ props.refObj.dto.comment }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  console.log(props.refObj, '=====================================')
+  // if (props.refObj.resourceApplication) {
+  //   showArr.value = []
+  //   for (const key in props.refObj.resourceApplication) {
+  //     if (props.refObj.resourceApplication[key].length > 0) {
+  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
+  //       obj.name = key
+  //       props.refObj.resourceApplication[key].map((item) => {
+  //         obj.instanceId = item.instanceId
+  //         if (item.resources.length > 0) {
+  //           item.resources.map((val) => {
+  //             obj.list.push(val)
+  //           })
+  //         } else {
+  //           item.camera.map((val) => {
+  //             obj.list2.push(val)
+  //           })
+  //         }
+  //       })
+  //       showArr.value.push(obj)
+  //     }
+  //   }
+  // }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/personalCenter/components/Demand.vue b/front/src/views/personalCenter/components/Demand.vue
new file mode 100644
index 00000000..c81f92ef
--- /dev/null
+++ b/front/src/views/personalCenter/components/Demand.vue
@@ -0,0 +1,216 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-14 16:29:01
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
+        </p>
+        <p class="item">
+          <span>需求标题：{{ props.refObj.dto.demandSubject }}</span>
+        </p>
+        <p class="item">
+          <span>需求类型：{{ props.refObj.dto.detailsType }}</span>
+        </p>
+        <p class="item">
+          <span>需求描述：{{ props.refObj.dto.demandDetails }}</span>
+        </p>
+        <p class="item">
+          <span>需求领域：{{ props.refObj.dto.detailsField }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  console.log(props.refObj, '=====================================')
+  // if (props.refObj.resourceApplication) {
+  //   showArr.value = []
+  //   for (const key in props.refObj.resourceApplication) {
+  //     if (props.refObj.resourceApplication[key].length > 0) {
+  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
+  //       obj.name = key
+  //       props.refObj.resourceApplication[key].map((item) => {
+  //         obj.instanceId = item.instanceId
+  //         if (item.resources.length > 0) {
+  //           item.resources.map((val) => {
+  //             obj.list.push(val)
+  //           })
+  //         } else {
+  //           item.camera.map((val) => {
+  //             obj.list2.push(val)
+  //           })
+  //         }
+  //       })
+  //       showArr.value.push(obj)
+  //     }
+  //   }
+  // }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/personalCenter/components/MyApply.vue b/front/src/views/personalCenter/components/MyApply.vue
index 3b50a675..73ed4267 100644
--- a/front/src/views/personalCenter/components/MyApply.vue
+++ b/front/src/views/personalCenter/components/MyApply.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="on-the-right-side-of-the-list">
-    <div class="title">我的申请</div>
-    <div class="sousuokuang">
+    <div class="title" style="margin-bottom: 0.2rem">我的申请</div>
+    <!-- <div class="sousuokuang">
       <a-input-search
         v-model:value="name"
         placeholder="请输入关键词"
@@ -17,10 +17,20 @@
       >
         重置
       </a-button>
+    </div> -->
+    <div class="tab" style="margin-bottom: 0.1rem">
+      <span>类型</span>
+      <div
+        :class="typeIndex == index ? 'tabclass' : ' '"
+        @click="changeType(item, index)"
+        v-for="(item, index) in typeList"
+        :key="index"
+      >
+        {{ item }}
+      </div>
     </div>
     <div class="tab">
-      <span>排序</span>
-
+      <span>申请状态</span>
       <div
         :class="tabIndex == index ? 'tabclass' : ' '"
         @click="tabqiehuan(item, index)"
@@ -45,37 +55,46 @@
           v-for="item in contentList.data"
           :key="item.index"
         >
+          <div class="content-body-title">
+            <span>申请单号：{{ item.applyNumber || '--' }}</span>
+            <div></div>
+          </div>
           <a-tooltip>
-            <template #title>{{ item.name }}</template>
+            <template #title>
+              {{ item.cameraList ? item.system : item.title }}
+            </template>
             <div class="content-body-title">
               <span
-                v-if="item.name === '申请摄像头列表' && item.ended"
+                v-if="item.cameraList && item.ended"
                 @click="showVideoList(item)"
               >
-                名称：{{ item.name }}
+                名称：{{ item.cameraList ? item.system : item.title }}
+              </span>
+              <span v-else>
+                名称：{{ item.cameraList ? item.system : item.title }}
               </span>
-              <span v-else>名称：{{ item.name }}</span>
               <div></div>
             </div>
           </a-tooltip>
-          <div class="content-body-content">
+          <!-- <div class="content-body-content">
             <p class="content-body-content-son">
               流程类型：{{ item.processDefinitionName }}
             </p>
-          </div>
+          </div> -->
           <div class="content-body-content">
             <p class="content-body-content-son">
               审核结果：{{
-                item.ended ? '审核完成' : item.backToFirst ? '被终止' : '审核中'
+                // item.ended ? '审核完成' : item.backToFirst ? '被终止' : '审核中'
+                item.approveStatus || item.resourceStatusTip || '--'
               }}
             </p>
           </div>
-          <div class="content-body-content" v-if="item.currentTaskList">
+          <!-- <div class="content-body-content" v-if="item.currentTaskList">
             <p class="content-body-content-son" v-if="!item.backToFirst">
               当前节点：{{ item.currentTaskList[0].taskName }}
             </p>
-          </div>
-          <div v-else>
+          </div> -->
+          <!-- <div>
             <p
               class="content-body-content-son"
               v-if="item.name === '申请摄像头列表'"
@@ -111,36 +130,42 @@
                 复制
               </a-button>
             </p>
-            <p class="content-body-content-son" v-else>
-              <span>申请结果：{{ item.comment || '暂无' }}</span>
-              <a-button
-                type="primary"
-                size="small"
-                @click="copyComment(item.comment)"
+            <template v-else>
+              <p
+                class="content-body-content-son"
+                v-if="item.approveStatus == '通过'"
               >
-                复制
-              </a-button>
-            </p>
-          </div>
+                <span>申请结果：{{ item.comment || '暂无' }}</span>
+                <a-button
+                  v-if="item.comment"
+                  type="primary"
+                  size="small"
+                  @click="copyComment(item.comment)"
+                >
+                  复制
+                </a-button>
+              </p>
+            </template>
+          </div> -->
           <!-- <div class="content-body-title"></div>
           <div class="content-body-content">
             <p class="content-body-content-son"></p>
             <div></div>
           </div> -->
-          <div class="content-body-bottom" v-if="item.currentTaskList">
+          <!-- <div class="content-body-bottom" v-if="item.currentTaskList">
             <div>申请日期：{{ item.currentTaskList[0].createTime }}</div>
             <div>审批人：{{ item.currentTaskList[0].assigneeName }}</div>
-          </div>
-          <div class="content-body-bottom" v-else>
-            <div>申请日期：{{ item.startTime }}</div>
+          </div> -->
+          <div class="content-body-bottom">
+            <div>申请日期：{{ item.createDate || item.startTime }}</div>
             <div></div>
           </div>
           <div class="button-box">
-            <div class="button" @click="showDetail(item)">查看流程</div>
+            <div class="button" @click="showDetail(item)">查看详情</div>
             <!-- <div class="button" @click="showAdd(item)" v-if="item.backToFirst">
               修改
             </div> -->
-            <div
+            <!-- <div
               v-if="
                 !(
                   (item.processDefinitionName == '能力需求申请' ||
@@ -164,7 +189,7 @@
               "
             >
               查看详情
-            </div>
+            </div> -->
             <!-- <div
               class="button button-state"
               :class="{
@@ -225,6 +250,7 @@
           size="small"
           pageSize="4"
           :total="total"
+          :current="page"
           @change="handleCurrentChange"
           @showSizeChange="handlePageSizeChange"
           :showSizeChanger="false"
@@ -233,8 +259,9 @@
     </div>
     <a-empty v-else />
     <a-modal
+      bodyStyle="padding:0.1rem 0"
       v-model:visible="detailsVisible"
-      title="申请流程"
+      title="申请详情"
       style="width: 900px"
       :footer="null"
       destroyOnClose="true"
@@ -245,6 +272,8 @@
         :businessKey="businessKey"
         :processInstanceId="processInstanceId"
         :resourceId="resourceId"
+        :refObj="refObj"
+        :showType="showType"
       ></apply-details>
     </a-modal>
     <a-modal
@@ -277,11 +306,16 @@
 </template>
 
 <script setup>
-  import qs from 'qs'
+  // import qs from 'qs'
   import { onMounted, reactive, ref } from 'vue'
   import {
     getMyProcessInstancePage,
-    getTaskHandleDetailInfo,
+    // getTaskHandleDetailInfo,
+    getTabilityapplication,
+    getByApplyFlag,
+    nengliziyuanshangjiaapply,
+    getDemandForm,
+    demandComment,
     // getProcDefBizRoute,
   } from '@/api/personalCenter'
   import {
@@ -289,16 +323,26 @@
     relaunch,
     selectOne,
     getApplyCameraList,
+    selectOneDel,
   } from '@/api/home'
   import { useRouter } from 'vue-router'
   import { message } from 'ant-design-vue'
   import ApplyDetails from '@/views/personalCenter/components/ApplyDetails'
   const router = useRouter()
+  let typeList = ref([
+    '能力申请',
+    '能力评价',
+    '能力上架',
+    '能力下架',
+    '能力需求',
+    '需求评论',
+  ])
   let tabList = ref(['全部', '审核中', '审核完成'])
   const contentList = reactive({ data: [] })
   // const contentListClone = reactive({ data: [] })
   // let contentListLength = contentList.length
   let tabIndex = ref(0)
+  let typeIndex = ref(0)
   const videoVisible = ref(false)
   const columns = ref([
     {
@@ -328,8 +372,20 @@
         break
     }
   }
+  // 选择类型
+  const changeType = (item, index) => {
+    num.value = []
+    showType.value = ''
+    console.log(item, index)
+    tabIndex.value = 0
+    ended.value = ''
+    page.value = 1
+    typeIndex.value = index
+    getApplyList()
+  }
   let name = ref('')
   const detailsVisible = ref(false)
+  const detailsVisible2 = ref(false)
   const businessKey = ref('')
   const processInstanceId = ref('')
   const processDefinitionName = ref('')
@@ -339,14 +395,33 @@
   const delObj = ref({})
   const taskId = ref('')
   const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
+  const refObj = ref({})
   const showDetail = (item) => {
     console.log('showDetail', item)
     // getProcDefBizRoute(item.processDefinitionId)
-    detailsVisible.value = true
-    processDefinitionName.value = item.processDefinitionName
-    businessKey.value = item.businessKey
-    processInstanceId.value = item.processInstanceId
-    resourceId.value = item.resourceId
+    if (typeIndex.value == 0 && item.applyFlag) {
+      getByApplyFlag(item.applyFlag).then((res) => {
+        if (res.data.code == 0) {
+          refObj.value = res.data.data
+          detailsVisible.value = true
+          processDefinitionName.value = item.processDefinitionName
+          businessKey.value = item.businessKey
+          processInstanceId.value = item.instanceId
+          resourceId.value = item.resourceId
+        } else {
+          message.error('数据请求失败！')
+        }
+      })
+    } else if (typeIndex.value !== 1) {
+      refObj.value = item
+      detailsVisible.value = true
+      processDefinitionName.value = item.processDefinitionName
+      businessKey.value = item.businessKey
+      processInstanceId.value = item.processInstanceId
+      resourceId.value = item.resourceId
+    } else {
+      message.error('数据请求失败！')
+    }
   }
   const showVideoList = (item) => {
     console.log('显示列表', item)
@@ -423,13 +498,13 @@
     finished: 0,
     unfinished: 0,
   })
-  const initNum = (name) => {
+  const initNum = () => {
     num.value = []
     getMyProcessInstancePage({
       page: 1,
       limit: 4,
       ended: 'false',
-      name: name,
+      processDefinitionKey: processDefinitionKey.value,
     }).then((res) => {
       if (res.data.code == 0) {
         num.value.unfinished = res.data.data.total
@@ -437,7 +512,7 @@
           page: 1,
           limit: 4,
           ended: 'true',
-          name: name,
+          processDefinitionKey: processDefinitionKey.value,
         }).then((res) => {
           if (res.data.code == 0) {
             num.value.finished = res.data.data.total
@@ -446,10 +521,33 @@
       }
     })
   }
-  initNum()
+  const initNum2 = () => {
+    num.value = []
+    getTabilityapplication({
+      page: 1,
+      limit: 4,
+      ended: 'false',
+    }).then((res) => {
+      if (res.data.code == 0) {
+        num.value.unfinished = res.data.data.total
+        getTabilityapplication({
+          page: 1,
+          limit: 4,
+          ended: 'true',
+        }).then((res) => {
+          if (res.data.code == 0) {
+            num.value.finished = res.data.data.total
+          }
+        })
+      }
+    })
+  }
+  // initNum()
   const total = ref('')
+  const showType = ref('')
   const page = ref('1')
   const ended = ref('')
+  const processDefinitionKey = ref('')
   // 搜索框
   const onSearch = (name) => {
     console.log(name.value)
@@ -464,37 +562,118 @@
       page: page.value,
       limit: 4,
       ended: ended.value,
-      name: name.value,
+      // name: name.value,
     }
-    console.log('==============>', ended.value)
-    getMyProcessInstancePage(params).then((res) => {
-      initNum(name.value)
-      console.log(res.data.data.list)
-      contentList.data = res.data.data.list
-      total.value = res.data.data.total
-      if (contentList.data && contentList.data.length > 0) {
-        contentList.data.map((item) => {
-          const param = {
-            page: 1,
-            limit: 4,
-            processInstanceId: item.processInstanceId,
-          }
-          getTaskHandleDetailInfo(qs.stringify(param)).then((res) => {
-            console.log('申请结果', res.data.data, res.data.data[0].comment)
-            const result = res.data.data
-            if (result && result.length > 2) {
-              item.comment =
-                result[0].comment.length > result[1].comment.length
-                  ? result[0].comment
-                  : result[1].comment
-            } else {
-              item.comment = result[0].comment
-            }
-          })
-          return item
-        })
+    if (typeIndex.value == 0) {
+      getTabilityapplication(params).then((res) => {
+        contentList.data = []
+        console.log('获取我的申请===============>', res.data.data)
+        contentList.data = res.data.data.list
+        total.value = res.data.data.total
+        showType.value = '能力申请'
+        initNum2()
+      })
+    } else if (typeIndex.value !== 1) {
+      switch (typeIndex.value) {
+        case 2:
+          params.processDefinitionKey = 'resourcemountapply'
+          processDefinitionKey.value = 'resourcemountapply'
+          break
+        case 3:
+          params.processDefinitionKey = 'resourcundercarriageapply'
+          processDefinitionKey.value = 'resourcundercarriageapply'
+          break
+        case 4:
+          params.processDefinitionKey = 'abilitydemandapply'
+          processDefinitionKey.value = 'abilitydemandapply'
+          break
+        case 5:
+          params.processDefinitionKey = 'comment_review'
+          processDefinitionKey.value = 'comment_review'
+          break
       }
-    })
+      getMyProcessInstancePage(params).then((res) => {
+        contentList.data = []
+        // initNum(name.value)
+        console.log(res.data.data.list)
+        contentList.data = res.data.data.list
+        total.value = res.data.data.total
+        initNum()
+        switch (typeIndex.value) {
+          case 2:
+            contentList.data.map((val) => {
+              nengliziyuanshangjiaapply(val.businessKey).then((res1) => {
+                console.log('上架===========>', res1.data.data)
+                val.title = res1.data.data.resourceDTO.name
+                val.dto = res1.data.data.resourceDTO
+                showType.value = '能力上架'
+              })
+            })
+            break
+          case 3:
+            contentList.data.map((val) => {
+              selectOneDel(val.businessKey).then((res1) => {
+                console.log('下架===========>', res1.data.data)
+                val.title = res1.data.data.name
+                val.dto = res1.data.data
+                showType.value = '能力下架'
+              })
+            })
+            // params.processDefinitionKey = 'resourcundercarriageapply'
+            break
+          case 4:
+            contentList.data.map((val) => {
+              getDemandForm(val.businessKey).then((res1) => {
+                console.log('需求===========>', res1.data.data)
+                val.title = res1.data.data.demandSubject
+                val.resourceStatusTip = res1.data.data.flagTip
+                val.dto = res1.data.data
+                showType.value = '能力需求'
+              })
+            })
+            // params.processDefinitionKey = 'abilitydemandapply'
+            break
+          case 5:
+            contentList.data.map((val) => {
+              demandComment(val.businessKey).then((res1) => {
+                console.log('评论===========>', res1.data.data)
+                val.title = res1.data.data.comment
+                val.resourceStatusTip = res1.data.data.delFlagTip
+                val.dto = res1.data.data
+                showType.value = '需求评论'
+              })
+            })
+            // params.processDefinitionKey = 'comment_review'
+            break
+        }
+        // if (contentList.data && contentList.data.length > 0) {
+        //   contentList.data.map((item) => {
+        //     const param = {
+        //       page: 1,
+        //       limit: 4,
+        //       processInstanceId: item.processInstanceId,
+        //     }
+        //     getTaskHandleDetailInfo(qs.stringify(param)).then((res) => {
+        //       console.log('申请结果', res.data.data, res.data.data[0].comment)
+        //       const result = res.data.data
+        //       if (result && result.length > 2) {
+        //         item.comment =
+        //           result[0].comment.length > result[1].comment.length
+        //             ? result[0].comment
+        //             : result[1].comment
+        //       } else {
+        //         item.comment = result[0].comment
+        //       }
+        //     })
+        //     return item
+        //   })
+        // }
+      })
+    } else {
+      contentList.data = []
+      num.value = []
+      showType.value = ''
+    }
   }
   const handleCurrentChange = (val) => {
     page.value = val
@@ -611,8 +790,10 @@
       font-size: 14px;
       color: #999999;
       div {
-        width: 70px;
+        // width: 70px;
+        padding: 5px 10px;
         height: 24px;
+        line-height: 14px;
         border: 1px solid #cccccc;
         border-radius: 12px;
         margin-left: 10px;
diff --git a/front/src/views/personalCenter/components/OffTheShelf.vue b/front/src/views/personalCenter/components/OffTheShelf.vue
new file mode 100644
index 00000000..b7bf4d45
--- /dev/null
+++ b/front/src/views/personalCenter/components/OffTheShelf.vue
@@ -0,0 +1,210 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-14 16:24:54
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
+        </p>
+        <p class="item">
+          <span>下架原因：{{ props.refObj.dto.undercarriageReason }}</span>
+        </p>
+        <p class="item">
+          <span>下架发起人：{{ props.refObj.dto.undercarriageUserName }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  console.log(props.refObj, '=====================================')
+  // if (props.refObj.resourceApplication) {
+  //   showArr.value = []
+  //   for (const key in props.refObj.resourceApplication) {
+  //     if (props.refObj.resourceApplication[key].length > 0) {
+  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
+  //       obj.name = key
+  //       props.refObj.resourceApplication[key].map((item) => {
+  //         obj.instanceId = item.instanceId
+  //         if (item.resources.length > 0) {
+  //           item.resources.map((val) => {
+  //             obj.list.push(val)
+  //           })
+  //         } else {
+  //           item.camera.map((val) => {
+  //             obj.list2.push(val)
+  //           })
+  //         }
+  //       })
+  //       showArr.value.push(obj)
+  //     }
+  //   }
+  // }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/personalCenter/components/OtherApplications .vue b/front/src/views/personalCenter/components/OtherApplications .vue
new file mode 100644
index 00000000..695a741b
--- /dev/null
+++ b/front/src/views/personalCenter/components/OtherApplications .vue	
@@ -0,0 +1,229 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-14 14:50:30
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <!-- <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请标题：{{ title }}</span>
+          <span>申请单号：{{ applyNumber || '--' }}</span>
+          <span>应用系统：{{ applicationSystem }}</span>
+        </p>
+        <p class="item">
+          <span>申请人信息：{{ user }}</span>
+          <span>电话：{{ phone }}</span>
+          <span>单位：{{ unit }}</span>
+        </p>
+        <p>
+          <span>应用场景：{{}}</span>
+        </p>
+        <p>
+          <span>应用背景：{{ applicationBackground }}</span>
+        </p>
+        <p>
+          <span>期望效果：{{ effectWish }}</span>
+        </p>
+        <p v-if="props.refObj.enclosure">
+          <span>
+            申请单附件：
+            <span class="enclosure">
+              {{ enclosureName || '--' }}
+              <span class="btn">预览</span>
+            </span>
+          </span>
+        </p>
+      </div>
+    </div> -->
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  console.log(props.refObj, '=====================================')
+  // if (props.refObj.resourceApplication) {
+  //   showArr.value = []
+  //   for (const key in props.refObj.resourceApplication) {
+  //     if (props.refObj.resourceApplication[key].length > 0) {
+  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
+  //       obj.name = key
+  //       props.refObj.resourceApplication[key].map((item) => {
+  //         obj.instanceId = item.instanceId
+  //         if (item.resources.length > 0) {
+  //           item.resources.map((val) => {
+  //             obj.list.push(val)
+  //           })
+  //         } else {
+  //           item.camera.map((val) => {
+  //             obj.list2.push(val)
+  //           })
+  //         }
+  //       })
+  //       showArr.value.push(obj)
+  //     }
+  //   }
+  // }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/personalCenter/components/PutOnTheShelf .vue b/front/src/views/personalCenter/components/PutOnTheShelf .vue
new file mode 100644
index 00000000..74365751
--- /dev/null
+++ b/front/src/views/personalCenter/components/PutOnTheShelf .vue	
@@ -0,0 +1,214 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-14 16:25:57
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
+          <span>能力名称：{{ props.refObj.dto.name }}</span>
+          <span>能力类型：{{ props.refObj.dto.type }}</span>
+        </p>
+        <p class="item">
+          <span>共享条件：{{ props.refObj.dto.shareCondition }}</span>
+          <span>能力描述：{{ props.refObj.dto.description }}</span>
+          <span>归属部门：{{ props.refObj.dto.deptName }}</span>
+        </p>
+        <p v-for="item in props.refObj.dto.infoList" :key="item.attrType">
+          <span>{{ item.attrType + '：' + item.attrValue }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  console.log(props.refObj, '=====================================')
+  // if (props.refObj.resourceApplication) {
+  //   showArr.value = []
+  //   for (const key in props.refObj.resourceApplication) {
+  //     if (props.refObj.resourceApplication[key].length > 0) {
+  //       let obj = { name: '', instanceId: '', list: [], list2: [] }
+  //       obj.name = key
+  //       props.refObj.resourceApplication[key].map((item) => {
+  //         obj.instanceId = item.instanceId
+  //         if (item.resources.length > 0) {
+  //           item.resources.map((val) => {
+  //             obj.list.push(val)
+  //           })
+  //         } else {
+  //           item.camera.map((val) => {
+  //             obj.list2.push(val)
+  //           })
+  //         }
+  //       })
+  //       showArr.value.push(obj)
+  //     }
+  //   }
+  // }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>