From 649929c1c0ae6923e74f69176630710b8816bd36 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Fri, 24 Jun 2022 13:49:12 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E8=83=BD=E5=8A=9B=E7=94=B3=E8=AF=B7?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B-=E5=A4=84=E7=90=86=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2-=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../activiti/demo/abilitydemandapply-new.vue  | 417 ++++++++++++++++
 .../activiti/demo/abilitydemandapply.vue      | 448 ++++--------------
 .../demo/abilitydemandapply_before.vue        | 175 -------
 .../demo/correction-process2-before.vue       | 136 ++++++
 .../activiti/demo/correction-process2.vue     | 439 ++++++++++++++---
 5 files changed, 1016 insertions(+), 599 deletions(-)
 create mode 100644 back/src/views/modules/activiti/demo/abilitydemandapply-new.vue
 delete mode 100644 back/src/views/modules/activiti/demo/abilitydemandapply_before.vue
 create mode 100644 back/src/views/modules/activiti/demo/correction-process2-before.vue

diff --git a/back/src/views/modules/activiti/demo/abilitydemandapply-new.vue b/back/src/views/modules/activiti/demo/abilitydemandapply-new.vue
new file mode 100644
index 00000000..5b387ef7
--- /dev/null
+++ b/back/src/views/modules/activiti/demo/abilitydemandapply-new.vue
@@ -0,0 +1,417 @@
+<!--  流程业务表单   -->
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+
+  <!-- 申请人详情 -->
+  <div>
+     <h3>申请人信息</h3>
+    <div class="big-BOX">
+      <p>
+        <span>申请人：<span> {{dataForm.content.applyUserName || '--'}}</span></span>
+         <span>电话：<span>{{dataForm.content.applyUserPhone || '--'}}</span></span>
+         <span>单位：<span>{{dataForm.content.applyUserDeptName || '--'}}</span></span>
+      </p>
+       <p>
+         <span>应用领域：<span>{{dataForm.content.detailsField || '--'}}</span></span>
+       <span> 需求类型：<span> {{dataForm.content.detailsType || '--'}}</span></span>
+      <span> 需求标题： <span> {{dataForm.content.demandSubject || '--'}}</span></span>
+      </p>
+      <p>
+      <span> 需求描述：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
+      </p>
+      <p>
+      <span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button  @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
+
+      </p>
+    </div>
+  </div>
+
+  <!-- 申请能力 -->
+  <div class="AbilityApply">
+     <h3>申请能力</h3>
+    <ul  v-for="item in dataList" :key="item.id">
+      <li class="title">{{item.address}}</li>
+      <li class="clearfix">
+            <img
+              src="~@/assets/img/imgLeft.png"
+            />
+            <div>
+            <h2>{{item.name}}<span>{{item.type}}</span></h2>
+            <p>{{item.describe}}</p>
+            </div>
+      </li>
+    </ul>
+  </div>
+    <!--  流程综合组件   -->
+  <!--   <ren-process-multiple
+      v-if="processVisible"
+      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
+      saveFormUrl="/processForm/tabilityapplication"
+      dataFormName="dataForm"
+      ref="renProcessMultiple"
+    ></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>
+
+ <!--  流程详情   -->
+    <ren-process-detail-import></ren-process-detail-import>
+  </el-card>
+</template>
+
+<script>
+// 引入工作流公共方法
+import processModule from '@/mixins/process-module'
+import qs from 'qs'
+import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
+export default {
+  // 注入公共方法
+  mixins: [processModule],
+  data () {
+    return {
+      visible: true,
+      // 表单属性是否可编辑
+      // fieldDisabled: false,
+      // dataForm: {
+      //   id: '',
+      //   user: '',
+      //   phone: '',
+      //   unit: '',
+      //   area: '',
+      //   system: '',
+      //   scene: '',
+      //   basis: ''
+      // }
+      dataForm: {
+        id: '',
+        content: []
+      },
+      dataList: [
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        },
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        },
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        }
+      ],
+      inputAgree: '',
+      inputNo: '',
+      agreeOrList: '同意'
+    }
+  },
+  created () {
+    // 将业务KEY赋值给表单
+    this.dataForm.id = this.$route.params.businessKey
+    console.log(this.dataForm, 'ela')
+    this.init()
+    // 流程回调
+    var callbacks = {
+      startProcessSuccessCallback: this.closeCurrentTab,
+      startProcessErrorCallback: this.startProcessErrorCallback,
+      taskHandleSuccessCallback: this.closeCurrentTab,
+      taskHandleErrorCallback: this.taskHandleErrorCallback,
+      formSaveSuccessCallback: null,
+      formSaveErrorCallback: null
+    }
+    // 初始化综合组件
+    this.initProcessMultiple(callbacks)
+  },
+  computed: {
+    // dataRule () {
+    //   return {
+    //     inputAgree: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     inputNo: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ]
+    //   }
+    // }
+  },
+  components: {
+    RenProcessDetailImport
+  },
+  methods: {
+    init () {
+      // this.visible = true
+      this.$nextTick(() => {
+        // this.$refs.dataForm.resetFields()
+        if (this.dataForm.id) {
+          // 如业务KEY已存在，不允许编辑
+          // this.fieldDisabled = true
+          this.getInfo()
+          console.log(this.dataForm, 'init')
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http
+        .get(`/demanData/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res.data)
+            return this.$message.error(res.msg)
+          }
+          console.log(res.data, 'elas')
+          this.dataForm.content = res.data
+          console.log(this.dataForm, 'ela')
+        })
+        .catch(() => {})
+    },
+    // 申请能力
+    applyData () {
+      this.$http
+        .get(`/resource/select/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res.data, 'wh')
+            // return this.$message.error(res.msg)
+          }
+          // console.log(res.data, 'elas')
+          // this.dataForm.content = res.data
+          // console.log(this.dataForm, 'ela')
+        })
+        .catch(() => {})
+    },
+
+    // 同意与退回
+    agreeOrNot () {
+      if (this.agreeOrList === '同意') {
+        console.log('this.dataForm', this.dataForm)
+        const params = qs.stringify({
+          taskId: this.dataForm.content.instanceId,
+          comment: this.inputAgree
+        })
+        console.log(params)
+        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res)
+            this.$message.error(res.msg)
+          }
+        }).catch(() => {})
+      } else if (this.agreeOrList === '退回') {
+        const params = qs.stringify({
+          taskId: this.dataForm.content.instanceId,
+          comment: this.inputNo
+        })
+        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+    },
+    // 启动流程出错回调
+    startProcessErrorCallback (data) {
+      console.log(data)
+    },
+    // 任务处理出错回调
+    taskHandleErrorCallback (data) {}
+  },
+  mounted () {
+    this.applyData()
+  }
+}
+</script>
+<style scoped lang="scss">
+::v-deep .big-BOX{
+  background:rgba(244,245,248,0.8);
+  padding:24px;
+  h3{
+    font-size:16px;
+    color:#212121
+  }
+  p{
+    width:78%;
+    display:flex;
+    justify-content: space-between;
+    color:#212121;
+    font-size:14px;
+    span{
+      display:inline-block;
+      margin-left:8px;
+      line-height:32px;
+      span{
+        font-weight:bold;
+      }
+    }
+  }
+  p:last-of-type{
+    margin-top:16px;
+    width:100%;
+    span{
+      display:flex;
+      span{
+      padding-left:12px;
+      height:32px;
+      background:rgba(232,234,239,1);
+      border-radius:2px;
+      button{
+        background:unset;
+        border:0;
+        color:#0558e1;
+        font-size:14px;
+      }
+      }
+    }
+  }
+}
+::v-deep .AbilityApply{
+    margin-top:32px;
+
+  h3{
+     font-size:16px;
+    color:#212121;
+    border-bottom:1px solid #dddee1;
+    padding-bottom:10px;
+  }
+  ul{
+    padding-left: 0px;
+     li{
+      list-style:none;
+    padding: 30px 0;
+    border-bottom: 1px solid #dddee1;
+    display:flex;
+    img{
+      width:100px;
+      height:100px;
+    }
+    div{
+      margin-left:16px;
+          display: flex;
+    flex-direction: column;
+    justify-content: center;
+    h2{
+      margin-bottom:20px;
+      font-size:20px;
+      color:#000;
+      display:flex;
+      span{
+        display:block;
+        font-size:14px;
+        color:#ffffff;
+        margin-left:8px;
+        background:rgba(0,184,230,0.8);
+        display: flex;
+    align-items: center;
+    padding: 0 5px;
+    border-radius: 4px;
+      }
+    }
+     p{
+      margin-bottom:0;
+    }
+    }
+    }
+    .clearfix:after{
+      display:block;
+      content:"";
+      clear:both;
+    }
+    .title{
+      color:#0558e1;
+      font-size:18px;
+      padding-bottom:0;
+    border-bottom: 0;
+
+    }
+     .title:before {
+           content: "";
+           width: 6px;
+           height: 6px;
+           display: inline-block;
+           border-radius: 50%;
+           background: #0558e1;
+           vertical-align: middle;
+          margin-right: 10px;
+    margin-top: 6px;
+           }
+
+  }
+}
+::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:#0558e1;
+    color:#ffffff;
+    border:1px solid #0558e1;
+  }
+  }
+  .inputBule{
+     width:55px;
+    height:32px;
+    line-height:32px;
+    padding:0;
+    border-radius:2px;
+    background:#0558e1;
+    color:#ffffff;
+    border:1px solid #0558e1;
+  }
+   ::v-deep .is-active{
+   background:#ffffff;
+    color:#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__inner{
+      box-shadow: unset;
+    }
+  }
+  .blueInput{
+    width:55px;
+  }
+</style>
diff --git a/back/src/views/modules/activiti/demo/abilitydemandapply.vue b/back/src/views/modules/activiti/demo/abilitydemandapply.vue
index e17e29db..94acd632 100644
--- a/back/src/views/modules/activiti/demo/abilitydemandapply.vue
+++ b/back/src/views/modules/activiti/demo/abilitydemandapply.vue
@@ -1,134 +1,106 @@
 <!--  流程业务表单   -->
 <template>
   <el-card shadow="never" class="aui-card--fill">
-
-  <!-- 申请人详情 -->
-  <div>
-     <h3>申请人信息</h3>
-    <div class="big-BOX">
-      <p>
-        <span>申请人：<span> {{dataForm.content.applyUserName || '--'}}</span></span>
-         <span>电话：<span>{{dataForm.content.applyUserPhone || '--'}}</span></span>
-         <span>单位：<span>{{dataForm.content.applyUserDeptName || '--'}}</span></span>
-      </p>
-       <p>
-         <span>应用领域：<span>{{dataForm.content.detailsField || '--'}}</span></span>
-       <span> 需求类型：<span> {{dataForm.content.detailsType || '--'}}</span></span>
-      <span> 需求标题： <span> {{dataForm.content.demandSubject || '--'}}</span></span>
-      </p>
-      <p>
-      <span> 需求描述：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
-      </p>
-      <p>
-      <span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button  @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
-
-      </p>
-    </div>
-  </div>
-
-  <!-- 申请能力 -->
-  <div class="AbilityApply">
-     <h3>申请能力</h3>
-    <ul  v-for="item in dataList" :key="item.id">
-      <li class="title">{{item.address}}</li>
-      <li class="clearfix">
-            <img
-              src="~@/assets/img/imgLeft.png"
-            />
-            <div>
-            <h2>{{item.name}}<span>{{item.type}}</span></h2>
-            <p>{{item.describe}}</p>
-            </div>
-      </li>
-    </ul>
-  </div>
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
+    >
+      <el-form-item label="申请人" prop="user">
+        <el-input
+          v-model="dataForm.applyUserName"
+          :disabled="fieldDisabled"
+          placeholder="请输入申请人"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="申请电话" prop="phone">
+        <el-input
+          v-model="dataForm.applyUserPhone"
+          :disabled="fieldDisabled"
+          placeholder="请输入申请人电话"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="申请单位" prop="unit">
+        <el-input
+          v-model="dataForm.applyUserDeptName"
+          :disabled="fieldDisabled"
+          placeholder="请输入申请单位"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="需求标题" prop="area">
+        <el-input
+          v-model="dataForm.demandSubject"
+          :disabled="fieldDisabled"
+          placeholder="需求标题"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="需求类型" prop="system">
+        <el-input
+          v-model="dataForm.detailsType"
+          :disabled="fieldDisabled"
+          placeholder="需求类型"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="应用领域" prop="scene">
+        <el-input
+          v-model="dataForm.detailsField"
+          :disabled="fieldDisabled"
+          placeholder="应用领域"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="需求描述" prop="basis">
+         <el-tooltip class="item" effect="dark" popper-class="kuandukuandukuandu" :content="dataForm.demandDetails" placement="top">
+        <el-input
+          v-model="dataForm.demandDetails"
+          :disabled="fieldDisabled"
+          placeholder="需求描述"
+        ></el-input>
+         </el-tooltip>
+      </el-form-item>
+      <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
+          <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
+      </el-form-item>
+    </el-form>
     <!--  流程综合组件   -->
-  <!--   <ren-process-multiple
+    <ren-process-multiple
       v-if="processVisible"
       updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
       saveFormUrl="/processForm/tabilityapplication"
       dataFormName="dataForm"
       ref="renProcessMultiple"
-    ></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>
-
- <!--  流程详情   -->
-    <ren-process-detail-import></ren-process-detail-import>
+    ></ren-process-multiple>
   </el-card>
 </template>
 
 <script>
 // 引入工作流公共方法
 import processModule from '@/mixins/process-module'
-import qs from 'qs'
-import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
 export default {
   // 注入公共方法
   mixins: [processModule],
   data () {
     return {
-      visible: true,
+      visible: false,
       // 表单属性是否可编辑
-      // fieldDisabled: false,
-      // dataForm: {
-      //   id: '',
-      //   user: '',
-      //   phone: '',
-      //   unit: '',
-      //   area: '',
-      //   system: '',
-      //   scene: '',
-      //   basis: ''
-      // }
+      fieldDisabled: false,
       dataForm: {
         id: '',
-        content: []
-      },
-      dataList: [
-        {
-          // img: '~@/assets/img/imgLeft.png',
-          address: '青岛市应急管理局',
-          name: '组件名称',
-          type: '组件服务',
-          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
-        },
-        {
-          // img: '~@/assets/img/imgLeft.png',
-          address: '青岛市应急管理局',
-          name: '组件名称',
-          type: '组件服务',
-          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
-        },
-        {
-          // img: '~@/assets/img/imgLeft.png',
-          address: '青岛市应急管理局',
-          name: '组件名称',
-          type: '组件服务',
-          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
-        }
-      ],
-      inputAgree: '',
-      inputNo: '',
-      agreeOrList: '同意'
+        user: '',
+        phone: '',
+        unit: '',
+        area: '',
+        system: '',
+        scene: '',
+        basis: ''
+      }
     }
   },
   created () {
     // 将业务KEY赋值给表单
     this.dataForm.id = this.$route.params.businessKey
-    console.log(this.dataForm, 'ela')
+    console.log(this.$route.params)
     this.init()
     // 流程回调
     var callbacks = {
@@ -143,30 +115,37 @@ export default {
     this.initProcessMultiple(callbacks)
   },
   computed: {
-    // dataRule () {
-    //   return {
-    //     inputAgree: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     inputNo: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ]
-    //   }
-    // }
-  },
-  components: {
-    RenProcessDetailImport
+    dataRule () {
+      return {
+        user: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
+        phone: [
+          { required: true, message: '请输入申请人电话', trigger: 'blur' },
+          {
+            type: 'string',
+            pattern: /^1[3456789]\d{9}$/,
+            message: '请输入正确的电话号码',
+            trigger: 'blur'
+          }
+        ],
+        unit: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
+        area: [{ required: true, message: '请输入所在地区', trigger: 'blur' }],
+        system: [
+          { required: true, message: '请输入申请应用', trigger: 'blur' }
+        ],
+        scene: [{ required: true, message: '请输入应用场景', trigger: 'blur' }],
+        basis: [{ required: true, message: '请输入申请依据', trigger: 'blur' }]
+      }
+    }
   },
   methods: {
     init () {
-      // this.visible = true
+      this.visible = true
       this.$nextTick(() => {
-        // this.$refs.dataForm.resetFields()
+        this.$refs.dataForm.resetFields()
         if (this.dataForm.id) {
           // 如业务KEY已存在，不允许编辑
-          // this.fieldDisabled = true
+          this.fieldDisabled = true
           this.getInfo()
-          console.log(this.dataForm, 'init')
         }
       })
     },
@@ -176,242 +155,21 @@ export default {
         .get(`/demanData/${this.dataForm.id}`)
         .then(({ data: res }) => {
           if (res.code !== 0) {
-            console.log(res.data)
             return this.$message.error(res.msg)
           }
-          console.log(res.data, 'elas')
-          this.dataForm.content = res.data
-          console.log(this.dataForm, 'ela')
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data
+          }
         })
         .catch(() => {})
     },
-    // 申请能力
-    applyData () {
-      this.$http
-        .get(`/resource/select/${this.dataForm.id}`)
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            console.log(res.data, 'wh')
-            // return this.$message.error(res.msg)
-          }
-          // console.log(res.data, 'elas')
-          // this.dataForm.content = res.data
-          // console.log(this.dataForm, 'ela')
-        })
-        .catch(() => {})
-    },
-
-    // 同意与退回
-    agreeOrNot () {
-      if (this.agreeOrList === '同意') {
-        console.log('this.dataForm', this.dataForm)
-        const params = qs.stringify({
-          taskId: this.dataForm.content.instanceId,
-          comment: this.inputAgree
-        })
-        console.log(params)
-        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
-          if (res.code !== 0) {
-            console.log(res)
-            this.$message.error(res.msg)
-          }
-        }).catch(() => {})
-      } else if (this.agreeOrList === '退回') {
-        const params = qs.stringify({
-          taskId: this.dataForm.content.instanceId,
-          comment: this.inputNo
-        })
-        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
-          if (res.code !== 0) {
-            this.$message.error(res.msg)
-          }
-        })
-      }
-    },
     // 启动流程出错回调
     startProcessErrorCallback (data) {
       console.log(data)
     },
     // 任务处理出错回调
     taskHandleErrorCallback (data) {}
-  },
-  mounted () {
-    this.applyData()
   }
 }
 </script>
-<style scoped lang="scss">
-::v-deep .big-BOX{
-  background:rgba(244,245,248,0.8);
-  padding:24px;
-  h3{
-    font-size:16px;
-    color:#212121
-  }
-  p{
-    width:78%;
-    display:flex;
-    justify-content: space-between;
-    color:#212121;
-    font-size:14px;
-    span{
-      display:inline-block;
-      margin-left:8px;
-      line-height:32px;
-      span{
-        font-weight:bold;
-      }
-    }
-  }
-  p:last-of-type{
-    margin-top:16px;
-    width:100%;
-    span{
-      display:flex;
-      span{
-      padding-left:12px;
-      height:32px;
-      background:rgba(232,234,239,1);
-      border-radius:2px;
-      button{
-        background:unset;
-        border:0;
-        color:#0558e1;
-        font-size:14px;
-      }
-      }
-    }
-  }
-}
-::v-deep .AbilityApply{
-    margin-top:32px;
-
-  h3{
-     font-size:16px;
-    color:#212121;
-    border-bottom:1px solid #dddee1;
-    padding-bottom:10px;
-  }
-  ul{
-    padding-left: 0px;
-     li{
-      list-style:none;
-    padding: 30px 0;
-    border-bottom: 1px solid #dddee1;
-    display:flex;
-    img{
-      width:100px;
-      height:100px;
-    }
-    div{
-      margin-left:16px;
-          display: flex;
-    flex-direction: column;
-    justify-content: center;
-    h2{
-      margin-bottom:20px;
-      font-size:20px;
-      color:#000;
-      display:flex;
-      span{
-        display:block;
-        font-size:14px;
-        color:#ffffff;
-        margin-left:8px;
-        background:rgba(0,184,230,0.8);
-        display: flex;
-    align-items: center;
-    padding: 0 5px;
-    border-radius: 4px;
-      }
-    }
-     p{
-      margin-bottom:0;
-    }
-    }
-    }
-    .clearfix:after{
-      display:block;
-      content:"";
-      clear:both;
-    }
-    .title{
-      color:#0558e1;
-      font-size:18px;
-      padding-bottom:0;
-    border-bottom: 0;
-
-    }
-     .title:before {
-           content: "";
-           width: 6px;
-           height: 6px;
-           display: inline-block;
-           border-radius: 50%;
-           background: #0558e1;
-           vertical-align: middle;
-          margin-right: 10px;
-    margin-top: 6px;
-           }
-
-  }
-}
-::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:#0558e1;
-    color:#ffffff;
-    border:1px solid #0558e1;
-  }
-  }
-  .inputBule{
-     width:55px;
-    height:32px;
-    line-height:32px;
-    padding:0;
-    border-radius:2px;
-    background:#0558e1;
-    color:#ffffff;
-    border:1px solid #0558e1;
-  }
-   ::v-deep .is-active{
-   background:#ffffff;
-    color:#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__inner{
-      box-shadow: unset;
-    }
-  }
-  .blueInput{
-    width:55px;
-  }
-</style>
diff --git a/back/src/views/modules/activiti/demo/abilitydemandapply_before.vue b/back/src/views/modules/activiti/demo/abilitydemandapply_before.vue
deleted file mode 100644
index 17fec47b..00000000
--- a/back/src/views/modules/activiti/demo/abilitydemandapply_before.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<!--  流程业务表单   -->
-<template>
-  <el-card shadow="never" class="aui-card--fill">
-    <el-form
-      :model="dataForm"
-      :rules="dataRule"
-      ref="dataForm"
-      @keyup.enter.native="dataFormSubmitHandle()"
-      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
-    >
-      <el-form-item label="申请人" prop="user">
-        <el-input
-          v-model="dataForm.applyUserName"
-          :disabled="fieldDisabled"
-          placeholder="请输入申请人"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="申请电话" prop="phone">
-        <el-input
-          v-model="dataForm.applyUserPhone"
-          :disabled="fieldDisabled"
-          placeholder="请输入申请人电话"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="申请单位" prop="unit">
-        <el-input
-          v-model="dataForm.applyUserDeptName"
-          :disabled="fieldDisabled"
-          placeholder="请输入申请单位"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="需求标题" prop="area">
-        <el-input
-          v-model="dataForm.demandSubject"
-          :disabled="fieldDisabled"
-          placeholder="需求标题"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="需求类型" prop="system">
-        <el-input
-          v-model="dataForm.detailsType"
-          :disabled="fieldDisabled"
-          placeholder="需求类型"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="应用领域" prop="scene">
-        <el-input
-          v-model="dataForm.detailsField"
-          :disabled="fieldDisabled"
-          placeholder="应用领域"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="需求描述" prop="basis">
-         <el-tooltip class="item" effect="dark" popper-class="kuandukuandukuandu" :content="dataForm.demandDetails" placement="top">
-        <el-input
-          v-model="dataForm.demandDetails"
-          :disabled="fieldDisabled"
-          placeholder="需求描述"
-        ></el-input>
-         </el-tooltip>
-      </el-form-item>
-      <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
-          <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
-      </el-form-item>
-    </el-form>
-    <!--  流程综合组件   -->
-    <ren-process-multiple
-      v-if="processVisible"
-      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
-      saveFormUrl="/processForm/tabilityapplication"
-      dataFormName="dataForm"
-      ref="renProcessMultiple"
-    ></ren-process-multiple>
-  </el-card>
-</template>
-
-<script>
-// 引入工作流公共方法
-import processModule from '@/mixins/process-module'
-export default {
-  // 注入公共方法
-  mixins: [processModule],
-  data () {
-    return {
-      visible: false,
-      // 表单属性是否可编辑
-      fieldDisabled: false,
-      dataForm: {
-        id: '',
-        user: '',
-        phone: '',
-        unit: '',
-        area: '',
-        system: '',
-        scene: '',
-        basis: ''
-      }
-    }
-  },
-  created () {
-    // 将业务KEY赋值给表单
-    this.dataForm.id = this.$route.params.businessKey
-    console.log(this.$route.params)
-    this.init()
-    // 流程回调
-    var callbacks = {
-      startProcessSuccessCallback: this.closeCurrentTab,
-      startProcessErrorCallback: this.startProcessErrorCallback,
-      taskHandleSuccessCallback: this.closeCurrentTab,
-      taskHandleErrorCallback: this.taskHandleErrorCallback,
-      formSaveSuccessCallback: null,
-      formSaveErrorCallback: null
-    }
-    // 初始化综合组件
-    this.initProcessMultiple(callbacks)
-  },
-  computed: {
-    dataRule () {
-      return {
-        user: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
-        phone: [
-          { required: true, message: '请输入申请人电话', trigger: 'blur' },
-          {
-            type: 'string',
-            pattern: /^1[3456789]\d{9}$/,
-            message: '请输入正确的电话号码',
-            trigger: 'blur'
-          }
-        ],
-        unit: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
-        area: [{ required: true, message: '请输入所在地区', trigger: 'blur' }],
-        system: [
-          { required: true, message: '请输入申请应用', trigger: 'blur' }
-        ],
-        scene: [{ required: true, message: '请输入应用场景', trigger: 'blur' }],
-        basis: [{ required: true, message: '请输入申请依据', trigger: 'blur' }]
-      }
-    }
-  },
-  methods: {
-    init () {
-      this.visible = true
-      this.$nextTick(() => {
-        this.$refs.dataForm.resetFields()
-        if (this.dataForm.id) {
-          // 如业务KEY已存在，不允许编辑
-          this.fieldDisabled = true
-          this.getInfo()
-        }
-      })
-    },
-    // 获取信息
-    getInfo () {
-      this.$http
-        .get(`/demanData/${this.dataForm.id}`)
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
-          }
-          this.dataForm = {
-            ...this.dataForm,
-            ...res.data
-          }
-        })
-        .catch(() => {})
-    },
-    // 启动流程出错回调
-    startProcessErrorCallback (data) {
-      console.log(data)
-    },
-    // 任务处理出错回调
-    taskHandleErrorCallback (data) {}
-  }
-}
-</script>
diff --git a/back/src/views/modules/activiti/demo/correction-process2-before.vue b/back/src/views/modules/activiti/demo/correction-process2-before.vue
new file mode 100644
index 00000000..ccec2701
--- /dev/null
+++ b/back/src/views/modules/activiti/demo/correction-process2-before.vue
@@ -0,0 +1,136 @@
+<!--  流程业务表单   -->
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+          <el-form-item label="申请人" prop="user">
+              <el-input v-model="dataForm.user" :disabled="fieldDisabled" placeholder="请输入申请人"></el-input>
+          </el-form-item>
+          <el-form-item label="申请电话" prop="phone">
+              <el-input v-model="dataForm.phone" :disabled="fieldDisabled" placeholder="请输入申请人电话"></el-input>
+          </el-form-item>
+          <el-form-item label="申请单位" prop="unit">
+              <el-input v-model="dataForm.unit" :disabled="fieldDisabled" placeholder="请输入申请单位"></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="所在地区" prop="area">
+              <el-input v-model="dataForm.area" :disabled="fieldDisabled" placeholder="请输入所在地区"></el-input>
+          </el-form-item> -->
+          <el-form-item label="申请应用" prop="system">
+              <el-input v-model="dataForm.system" :disabled="fieldDisabled" placeholder="请输入申请应用"></el-input>
+          </el-form-item>
+          <el-form-item label="应用场景" prop="scene">
+              <el-input v-model="dataForm.scene" :disabled="fieldDisabled" placeholder="请输入应用场景"></el-input>
+          </el-form-item>
+          <el-form-item label="申请依据" prop="basis">
+              <el-input v-model="dataForm.basis" :disabled="fieldDisabled" placeholder="请输入申请依据"></el-input>
+          </el-form-item>
+          <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
+              <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
+          </el-form-item>
+      </el-form>
+      <!--  流程综合组件   -->
+      <ren-process-multiple v-if="processVisible" updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId" saveFormUrl="/processForm/tabilityapplication" dataFormName="dataForm" ref="renProcessMultiple" ></ren-process-multiple>
+  </el-card>
+</template>
+
+<script>
+// 引入工作流公共方法
+import processModule from '@/mixins/process-module'
+export default {
+  // 注入公共方法
+  mixins: [processModule],
+  data () {
+    return {
+      visible: false,
+      // 表单属性是否可编辑
+      fieldDisabled: false,
+      dataForm: {
+        id: '',
+        user: '',
+        phone: '',
+        unit: '',
+        area: '',
+        system: '',
+        scene: '',
+        basis: '',
+        enclosure: ''
+      }
+    }
+  },
+  created () {
+    // 将业务KEY赋值给表单
+    this.dataForm.id = this.$route.params.businessKey
+    this.init()
+    // 流程回调
+    var callbacks = {
+      startProcessSuccessCallback: this.closeCurrentTab,
+      startProcessErrorCallback: this.startProcessErrorCallback,
+      taskHandleSuccessCallback: this.closeCurrentTab,
+      taskHandleErrorCallback: this.taskHandleErrorCallback,
+      formSaveSuccessCallback: null,
+      formSaveErrorCallback: null
+    }
+    // 初始化综合组件
+    this.initProcessMultiple(callbacks)
+  },
+  computed: {
+    dataRule () {
+      return {
+        user: [
+          { required: true, message: '请输入申请人', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, message: '请输入申请人电话', trigger: 'blur' },
+          { type: 'string', pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
+        ],
+        unit: [
+          { required: true, message: '请输入申请单位', trigger: 'blur' }
+        ],
+        // area: [
+        //   { required: true, message: '请输入所在地区', trigger: 'blur' }
+        // ],
+        system: [
+          { required: true, message: '请输入申请应用', trigger: 'blur' }
+        ],
+        scene: [
+          { required: true, message: '请输入应用场景', trigger: 'blur' }
+        ],
+        basis: [
+          { required: true, message: '请输入申请依据', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.dataForm.resetFields()
+        if (this.dataForm.id) {
+          // 如业务KEY已存在，不允许编辑
+          this.fieldDisabled = true
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/processForm/tabilityapplication/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    },
+    // 启动流程出错回调
+    startProcessErrorCallback (data) {
+      console.log(data)
+    },
+    // 任务处理出错回调
+    taskHandleErrorCallback (data) {
+    }
+  }
+}
+</script>
diff --git a/back/src/views/modules/activiti/demo/correction-process2.vue b/back/src/views/modules/activiti/demo/correction-process2.vue
index ccec2701..1672be48 100644
--- a/back/src/views/modules/activiti/demo/correction-process2.vue
+++ b/back/src/views/modules/activiti/demo/correction-process2.vue
@@ -1,64 +1,134 @@
 <!--  流程业务表单   -->
 <template>
   <el-card shadow="never" class="aui-card--fill">
-      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-          <el-form-item label="申请人" prop="user">
-              <el-input v-model="dataForm.user" :disabled="fieldDisabled" placeholder="请输入申请人"></el-input>
-          </el-form-item>
-          <el-form-item label="申请电话" prop="phone">
-              <el-input v-model="dataForm.phone" :disabled="fieldDisabled" placeholder="请输入申请人电话"></el-input>
-          </el-form-item>
-          <el-form-item label="申请单位" prop="unit">
-              <el-input v-model="dataForm.unit" :disabled="fieldDisabled" placeholder="请输入申请单位"></el-input>
-          </el-form-item>
-          <!-- <el-form-item label="所在地区" prop="area">
-              <el-input v-model="dataForm.area" :disabled="fieldDisabled" placeholder="请输入所在地区"></el-input>
-          </el-form-item> -->
-          <el-form-item label="申请应用" prop="system">
-              <el-input v-model="dataForm.system" :disabled="fieldDisabled" placeholder="请输入申请应用"></el-input>
-          </el-form-item>
-          <el-form-item label="应用场景" prop="scene">
-              <el-input v-model="dataForm.scene" :disabled="fieldDisabled" placeholder="请输入应用场景"></el-input>
-          </el-form-item>
-          <el-form-item label="申请依据" prop="basis">
-              <el-input v-model="dataForm.basis" :disabled="fieldDisabled" placeholder="请输入申请依据"></el-input>
-          </el-form-item>
-          <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
-              <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
-          </el-form-item>
-      </el-form>
-      <!--  流程综合组件   -->
-      <ren-process-multiple v-if="processVisible" updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId" saveFormUrl="/processForm/tabilityapplication" dataFormName="dataForm" ref="renProcessMultiple" ></ren-process-multiple>
+
+  <!-- 申请人详情 -->
+  <div>
+     <h3>申请人信息</h3>
+    <div class="big-BOX">
+      <p>
+        <span>申请人：<span> {{dataForm.content.user || '--'}}</span></span>
+         <span>电话：<span>{{dataForm.content.phone || '--'}}</span></span>
+         <span>单位：<span>{{dataForm.content.unit || '--'}}</span></span>
+      </p>
+       <p>
+         <span>申请应用：<span>{{dataForm.content.system || '--'}}</span></span>
+       <span> 应用场景：<span> {{dataForm.content.scene || '--'}}</span></span>
+      <span> 申请依据： <span> {{dataForm.content.basis || '--'}}</span></span>
+      </p>
+      <p>
+      <span> 能力应用期望效果：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
+      </p>
+      <p v-if="dataForm.content.enclosure">
+      <span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button  @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
+
+      </p>
+    </div>
+  </div>
+
+  <!-- 申请能力 -->
+  <div class="AbilityApply">
+     <h3>申请能力</h3>
+    <ul  v-for="item in dataList" :key="item.id">
+      <li class="title">{{item.address}}</li>
+      <li class="clearfix">
+            <img
+              src="~@/assets/img/imgLeft.png"
+            />
+            <div>
+            <h2>{{item.name}}<span>{{item.type}}</span></h2>
+            <p>{{item.describe}}</p>
+            </div>
+      </li>
+    </ul>
+  </div>
+    <!--  流程综合组件   -->
+  <!--   <ren-process-multiple
+      v-if="processVisible"
+      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
+      saveFormUrl="/processForm/tabilityapplication"
+      dataFormName="dataForm"
+      ref="renProcessMultiple"
+    ></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>
+
+ <!--  流程详情   -->
+    <ren-process-detail-import></ren-process-detail-import>
   </el-card>
 </template>
 
 <script>
 // 引入工作流公共方法
 import processModule from '@/mixins/process-module'
+import qs from 'qs'
+import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
 export default {
   // 注入公共方法
   mixins: [processModule],
   data () {
     return {
-      visible: false,
+      visible: true,
       // 表单属性是否可编辑
-      fieldDisabled: false,
+      // fieldDisabled: false,
+      // dataForm: {
+      //   id: '',
+      //   user: '',
+      //   phone: '',
+      //   unit: '',
+      //   area: '',
+      //   system: '',
+      //   scene: '',
+      //   basis: ''
+      // }
       dataForm: {
         id: '',
-        user: '',
-        phone: '',
-        unit: '',
-        area: '',
-        system: '',
-        scene: '',
-        basis: '',
-        enclosure: ''
-      }
+        content: []
+      },
+      dataList: [
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        },
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        },
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        }
+      ],
+      inputAgree: '',
+      inputNo: '',
+      agreeOrList: '同意'
     }
   },
   created () {
     // 将业务KEY赋值给表单
     this.dataForm.id = this.$route.params.businessKey
+    console.log(this.dataForm, 'ela')
     this.init()
     // 流程回调
     var callbacks = {
@@ -73,64 +143,275 @@ export default {
     this.initProcessMultiple(callbacks)
   },
   computed: {
-    dataRule () {
-      return {
-        user: [
-          { required: true, message: '请输入申请人', trigger: 'blur' }
-        ],
-        phone: [
-          { required: true, message: '请输入申请人电话', trigger: 'blur' },
-          { type: 'string', pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
-        ],
-        unit: [
-          { required: true, message: '请输入申请单位', trigger: 'blur' }
-        ],
-        // area: [
-        //   { required: true, message: '请输入所在地区', trigger: 'blur' }
-        // ],
-        system: [
-          { required: true, message: '请输入申请应用', trigger: 'blur' }
-        ],
-        scene: [
-          { required: true, message: '请输入应用场景', trigger: 'blur' }
-        ],
-        basis: [
-          { required: true, message: '请输入申请依据', trigger: 'blur' }
-        ]
-      }
-    }
+    // dataRule () {
+    //   return {
+    //     inputAgree: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     inputNo: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ]
+    //   }
+    // }
+  },
+  components: {
+    RenProcessDetailImport
   },
   methods: {
     init () {
-      this.visible = true
+      // this.visible = true
       this.$nextTick(() => {
-        this.$refs.dataForm.resetFields()
+        // this.$refs.dataForm.resetFields()
         if (this.dataForm.id) {
           // 如业务KEY已存在，不允许编辑
-          this.fieldDisabled = true
+          // this.fieldDisabled = true
           this.getInfo()
+          console.log(this.dataForm, 'init')
         }
       })
     },
     // 获取信息
     getInfo () {
-      this.$http.get(`/processForm/tabilityapplication/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-      }).catch(() => {})
+      this.$http
+        .get(`/processForm/tabilityapplication/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res.data)
+            return this.$message.error(res.msg)
+          }
+          console.log(res.data, 'elas')
+          this.dataForm.content = res.data
+          console.log(this.dataForm, 'ela')
+        })
+        .catch(() => {})
+    },
+    // 申请能力
+    applyData () {
+      this.$http
+        .get(`/resource/select/${this.dataForm.instanceId}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res.data, 'hhhhh')
+            // return this.$message.error(res.msg)
+          }
+          // console.log(res.data, 'elas')
+          // this.dataForm.content = res.data
+          // console.log(this.dataForm, 'ela')
+        })
+        .catch(() => {})
+    },
+
+    // 同意与退回
+    agreeOrNot () {
+      if (this.agreeOrList === '同意') {
+        console.log('this.dataForm', this.dataForm)
+        const params = qs.stringify({
+          taskId: this.dataForm.content.instanceId,
+          comment: this.inputAgree
+        })
+        console.log(params)
+        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res)
+            this.$message.error(res.msg)
+          }
+        }).catch(() => {})
+      } else if (this.agreeOrList === '退回') {
+        const params = qs.stringify({
+          taskId: this.dataForm.content.instanceId,
+          comment: this.inputNo
+        })
+        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+          }
+        })
+      }
     },
     // 启动流程出错回调
     startProcessErrorCallback (data) {
       console.log(data)
     },
     // 任务处理出错回调
-    taskHandleErrorCallback (data) {
-    }
+    taskHandleErrorCallback (data) {}
+  },
+  mounted () {
+    this.applyData()
   }
 }
 </script>
+<style scoped lang="scss">
+::v-deep .big-BOX{
+  background:rgba(244,245,248,0.8);
+  padding:24px;
+  h3{
+    font-size:16px;
+    color:#212121
+  }
+  p{
+    width:78%;
+    display:flex;
+    justify-content: space-between;
+    color:#212121;
+    font-size:14px;
+    span{
+      display:inline-block;
+      margin-left:8px;
+      line-height:32px;
+      span{
+        font-weight:bold;
+      }
+    }
+  }
+  p:last-of-type{
+    margin-top:16px;
+    width:100%;
+    span{
+      display:flex;
+      span{
+      padding:0 12px;
+      height:32px;
+      background:rgba(232,234,239,1);
+      border-radius:2px;
+      button{
+        background:unset;
+        border:0;
+        color:#0558e1;
+        font-size:14px;
+      }
+      }
+    }
+  }
+}
+::v-deep .AbilityApply{
+    margin-top:32px;
+
+  h3{
+     font-size:16px;
+    color:#212121;
+    border-bottom:1px solid #dddee1;
+    padding-bottom:10px;
+  }
+  ul{
+    padding-left: 0px;
+     li{
+      list-style:none;
+    padding: 30px 0;
+    border-bottom: 1px solid #dddee1;
+    display:flex;
+    img{
+      width:100px;
+      height:100px;
+    }
+    div{
+      margin-left:16px;
+          display: flex;
+    flex-direction: column;
+    justify-content: center;
+    h2{
+      margin-bottom:20px;
+      font-size:20px;
+      color:#000;
+      display:flex;
+      span{
+        display:block;
+        font-size:14px;
+        color:#ffffff;
+        margin-left:8px;
+        background:rgba(0,184,230,0.8);
+        display: flex;
+    align-items: center;
+    padding: 0 5px;
+    border-radius: 4px;
+      }
+    }
+     p{
+      margin-bottom:0;
+    }
+    }
+    }
+    .clearfix:after{
+      display:block;
+      content:"";
+      clear:both;
+    }
+    .title{
+      color:#0558e1;
+      font-size:18px;
+      padding-bottom:0;
+    border-bottom: 0;
+
+    }
+     .title:before {
+           content: "";
+           width: 6px;
+           height: 6px;
+           display: inline-block;
+           border-radius: 50%;
+           background: #0558e1;
+           vertical-align: middle;
+          margin-right: 10px;
+    margin-top: 6px;
+           }
+
+  }
+}
+::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:#0558e1;
+    color:#ffffff;
+    border:1px solid #0558e1;
+  }
+  }
+  .inputBule{
+     width:55px;
+    height:32px;
+    line-height:32px;
+    padding:0;
+    border-radius:2px;
+    background:#0558e1;
+    color:#ffffff;
+    border:1px solid #0558e1;
+  }
+   ::v-deep .is-active{
+   background:#ffffff;
+    color:#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__inner{
+      box-shadow: unset;
+    }
+  }
+  .blueInput{
+    width:55px;
+  }
+</style>

From 154c2d24031d1be370974d39664f13b85ce32eda Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Fri, 24 Jun 2022 14:40:09 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E8=83=BD=E5=8A=9B=E7=94=B3=E8=AF=B7?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B-=E5=AE=A1=E6=89=B9=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../activiti/demo/correction-process2.vue     | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/back/src/views/modules/activiti/demo/correction-process2.vue b/back/src/views/modules/activiti/demo/correction-process2.vue
index 1672be48..04b1db78 100644
--- a/back/src/views/modules/activiti/demo/correction-process2.vue
+++ b/back/src/views/modules/activiti/demo/correction-process2.vue
@@ -375,9 +375,14 @@ export default {
     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;
-    border:1px solid #0558e1;
   }
   }
   .inputBule{
@@ -389,10 +394,6 @@ export default {
     background:#0558e1;
     color:#ffffff;
     border:1px solid #0558e1;
-  }
-   ::v-deep .is-active{
-   background:#ffffff;
-    color:#0558e1;
   }
   .redAll{
     margin-left:10px;
@@ -407,9 +408,11 @@ export default {
     color:#e83a48;
     margin-left:10px;
     }
-    :v-deep .el-radio-button__inner{
-      box-shadow: unset;
-    }
+    ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
+      box-shadow: unset !important;
+       color:#ffffff;
+      background: #e83a48;
+  }
   }
   .blueInput{
     width:55px;

From 2ad5476edb80fc37a92e435a6c08cf8c947cc51c Mon Sep 17 00:00:00 2001
From: gaoxiaolong <327091900@qq.com>
Date: Fri, 24 Jun 2022 16:31:42 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E8=83=BD=E5=8A=9B=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicationResources.vue                  | 728 +++++++++++++++++-
 .../abilityStatistics/componentServices.vue   | 107 ++-
 2 files changed, 800 insertions(+), 35 deletions(-)

diff --git a/back/src/views/modules/abilityStatistics/applicationResources.vue b/back/src/views/modules/abilityStatistics/applicationResources.vue
index a44f8bb8..49826e38 100644
--- a/back/src/views/modules/abilityStatistics/applicationResources.vue
+++ b/back/src/views/modules/abilityStatistics/applicationResources.vue
@@ -4,31 +4,697 @@
         <span class='page-introduction'>发布情况统计</span>
         <div class='container-body'>
             <div class='container-body1'>
-                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
+                <span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span>
+                 <div id="main1" style="width: 400px;height:230px;"></div>
             </div>
             <div class='container-body2'>
-                <span style='font-size:18px;color;#000000;'>发布量情况分布</span>
+                <span style='font-size:18px;color;#000000;'>应用贡献组件数量分布</span>
+                <div id="main2" style="width: 400px;height:200px;"></div>
             </div>
             <div class='container-body3'>
-                <span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
+                <span style='font-size:18px;color;#000000;'>贡献组件被应用使用数量分布</span>
+                 <div id="main3" style="width: 400px;height:230px;"></div>
             </div>
              <div class='container-body4'>
-                <span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
-                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                <span style='font-size:18px;color;#000000;'>应用贡献组件数量分布</span>
+                 <div id="main4" style="width: 650px;height:230px;"></div>
             </div>
              <div class='container-body5'>
-                <span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
-                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                 <div style='margin-bottom:30px'>
+                     <span style='font-size:18px;color;#000000;'>应用贡献组件被调用</span>
+                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                </div>
+                <div v-for="(item,index) in usedList" :key='index' >
+                    <div style='display:flex'>
+                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
+                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
+                        </div>
+                        <span class='num-style'>{{item.name}}</span>
+                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span>
+                    </div>
+                </div>
             </div>
              <div class='container-body6'>
-                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
+                <span style='font-size:18px;color;#000000;'>评分分布情况</span>
+                <div id="main6" style="width: 400px;height:200px;"></div>
             </div>
              <div class='container-body7'>
-                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
+                <span style='font-size:18px;color;#000000;'>发布端应用分布情况</span>
+                <div id="main7" style="width: 300px;height:200px;"></div>
+            </div>
+             <div class='container-body8'>
+                <span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
+                <div id="main8" style="width: 300px;height:200px;"></div>
+            </div>
+             <div class='container-body9'>
+                <span style='font-size:18px;color;#000000;'>应用状态分布情况</span>
+                <div id="main9" style="width: 250px;height:200px;"></div>
             </div>
         </div>
     </div>
 </template>
+<script>
+import * as echarts from 'echarts';
+
+export default {
+    data(){
+        return{
+            colorList:['linear-gradient(to right, rgba(82, 106, 255,0.8),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
+            widthList:['90px','80px','70px','60px','50px'],
+            numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
+            usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
+
+        }
+    },
+     mounted(){
+        this.myEcharts1()
+        this.myEcharts2()
+        this.myEcharts3()
+        this.myEcharts4()
+        this.myEcharts6()
+        this.myEcharts7()
+        this.myEcharts8()
+        this.myEcharts9()
+  },
+  methods:{
+    myEcharts1(){
+        var chartDom = document.getElementById('main1');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+            grid: {		       
+		        bottom: '23%',
+		    },
+        xAxis: {
+            type: 'category',
+            data: ['算法', '图层', '开发', '业务'],
+            color:['#f5f5f5'],
+            axisTick:{
+              show:false,//不显示坐标轴刻度线
+            },
+            splitLine: {
+              show: true,
+              color:['#f5f5f5']
+            },
+            axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//y轴文字的配置
+                textStyle: {
+                     color: "#999999",//Y轴内容文字颜色
+                },
+        },
+        },
+        yAxis: {
+            name:'次数',
+            splitLine: {
+              show: false
+            },
+            type: 'value',
+            interval:20,  //控制y轴的刻度
+            type: 'value',
+            axisTick:{ //控制y轴的刻度
+                show:false
+            },
+             nameTextStyle:{
+                color:"#999999"
+            },
+             axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//y轴文字的配置
+                textStyle: {
+                     color: "#999999",//Y轴内容文字颜色
+                },
+        },
+        },
+        series: [
+            {
+           data: [60, 90, 50, 80],
+            type: 'bar',
+            barWidth: 14,
+           
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0.8)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0.8)' }
+                ])
+            },
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts2(){
+        var chartDom = document.getElementById('main2');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: '',
+            top: '22%',
+            left: '50%',
+            width:"auto",
+            height:"auto",
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 14,
+            // 使用回调函数
+           formatter: function(name) {
+            var data = option.series[0].data;
+            var total = 0;
+            var tarValue;
+            for (var i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100));
+            return `${name}         ${p}%`;
+          },
+          itemStyle:{},
+          textStyle: {
+            color: "#666666",
+            padding:[0,8,0,18]
+          },
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+            {
+            // name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '60%'],
+            center:['22%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            label: {
+                show: false,
+                position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '算法' },
+                { value: 735, name: '图层' },
+                { value: 580, name: '开发' },
+                { value: 484, name: '业务' },
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts3(){
+        var chartDom = document.getElementById('main3');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+            grid: {		       
+		        bottom: '23%',
+		    },
+        xAxis: {
+            type: 'category',
+            data: ['算法', '图层', '开发', '业务'],
+            color:['#f5f5f5'],
+            axisTick:{
+              show:false,//不显示坐标轴刻度线
+            },
+            splitLine: {
+              show: true,
+              color:['#f5f5f5']
+            },
+            axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//x轴文字的配置
+                textStyle: {
+                     color: "#999999",//x轴内容文字颜色
+                },
+        },
+        },
+        yAxis: {
+            name:'应用数',
+             nameTextStyle:{
+                color:"#999999"
+            },
+            splitLine: {
+              show: false
+            },
+            type: 'value',
+            interval:20,  //控制y轴的刻度
+            type: 'value',
+            axisTick:{ //控制y轴的刻度
+                show:false
+            },
+             axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//y轴文字的配置
+                textStyle: {
+                     color: "#999999",//Y轴内容文字颜色
+                },
+        },
+        },
+        series: [
+            {
+           data: [60, 90, 50, 80],
+            type: 'bar',
+            barWidth: 14,
+           
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0.8)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0.8)' }
+                ])
+            },
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts4(){
+        var chartDom = document.getElementById('main4');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+            grid: {		
+                right:'15%',       
+		        bottom: '23%',
+		    },
+        xAxis: {
+            type: 'category',
+            data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
+            color:['#f5f5f5'],
+            axisTick:{
+              show:false,//不显示坐标轴刻度线
+            },
+            splitLine: {
+              show: true,
+              color:['#f5f5f5']
+            },
+            axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//y轴文字的配置
+                textStyle: {
+                     color: "#999999",//Y轴内容文字颜色
+                },
+        },
+        },
+        yAxis: {
+            name:'数量',
+             nameTextStyle:{
+                color:"#999999"
+            },
+            splitLine: {
+              show: false
+            },
+            type: 'value',
+            interval:20,  //控制y轴的刻度
+            type: 'value',
+            axisTick:{ //控制y轴的刻度
+                show:false
+            },
+             axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//y轴文字的配置
+                textStyle: {
+                     color: "#999999",//Y轴内容文字颜色
+                },
+        },
+        },
+        series: [
+            {
+           data: [60, 90, 50, 80, 50, 80],
+            type: 'bar',
+            barWidth: 14,
+           
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0.8)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0.8)' }
+                ])
+            },
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts6(){
+        var chartDom = document.getElementById('main6');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: '',
+            top: '14%',
+            left: '55%',
+            width:"auto",
+            height:"auto",
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 14,
+            // 使用回调函数
+           formatter: function(name) {
+            var data = option.series[0].data;
+            var total = 0;
+            var tarValue;
+            for (var i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100));
+            return `${name}            ${p}%`;
+          },
+          itemStyle:{},
+          textStyle: {
+            color: "#666666",
+            padding:[0,8,0,18]
+          },
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+            {
+            type: 'pie',
+            radius: ['40%', '60%'],
+            center:['22%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            label: {
+                show: false,
+                position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '1分' },
+                { value: 735, name: '2分' },
+                { value: 580, name: '3分' },
+                { value: 484, name: '4分' },
+                { value: 300, name: '5分' }
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts7(){
+        var chartDom = document.getElementById('main7');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: '',
+            top: '14%',
+            left: '40%',
+            width:"auto",
+            height:"auto",
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 14,
+            // 使用回调函数
+           formatter: function(name) {
+            var data = option.series[0].data;
+            var total = 0;
+            var tarValue;
+            for (var i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100));
+            return `${name}  ${p}%`;
+          },
+          itemStyle:{},
+          textStyle: {
+            color: "#666666",
+            fontSize:12,
+            padding:[0,0,0,10]
+          },
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+            {
+            type: 'pie',
+            radius: ['30%', '45%'],
+            center:['19%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            label: {
+                show: false,
+                position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '应用名称1' },
+                { value: 735, name: '应用名称2' },
+                { value: 580, name: '应用名称3' },
+                { value: 484, name: '应用名称4' },
+                { value: 300, name: '应用名称5' }
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts8(){
+        var chartDom = document.getElementById('main8');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: '',
+            top: '14%',
+            left: '40%',
+            width:"auto",
+            height:"auto",
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 14,
+            // 使用回调函数
+           formatter: function(name) {
+            var data = option.series[0].data;
+            var total = 0;
+            var tarValue;
+            for (var i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100));
+            return `${name}  ${p}%`;
+          },
+          itemStyle:{},
+          textStyle: {
+            color: "#666666",
+            fontSize:12,
+            padding:[0,8,0,10]
+          },
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+            {
+            type: 'pie',
+            radius: ['30%', '45%'],
+            center:['19%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            label: {
+                show: false,
+                position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '应用领域1' },
+                { value: 735, name: '应用领域2' },
+                { value: 580, name: '应用领域3' },
+                { value: 484, name: '应用领域4' },
+                { value: 300, name: '应用领域5' }
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts9(){
+        var chartDom = document.getElementById('main9');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: '',
+            top: '14%',
+            left: '47%',
+            width:"auto",
+            height:"auto",
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 14,
+            // 使用回调函数
+           formatter: function(name) {
+            var data = option.series[0].data;
+            var total = 0;
+            var tarValue;
+            for (var i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100));
+            return `${name}  ${p}%`;
+          },
+          itemStyle:{},
+          textStyle: {
+            color: "#666666",
+            fontSize:12,
+            padding:[0,8,0,10]
+          },
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+            {
+            type: 'pie',
+            radius: ['30%', '45%'],
+            center:['22%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            label: {
+                show: false,
+                position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '应用状态1' },
+                { value: 735, name: '应用状态2' },
+                { value: 580, name: '应用状态3' },
+                { value: 484, name: '应用状态4' },
+                { value: 300, name: '应用状态5' }
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    }
+}
+</script>
+
 <style scoped>
 .container{
     padding-top: 15px;
@@ -100,11 +766,53 @@
         margin-top: 20px;
     }
      .container-body7{
-        width:860px;
+        width:287px;
         height:250px;
         background-color: #ffffff;
         padding-top:20px;
         padding-left: 20px;
         margin-top: 20px;
     }
+    .container-body8{
+        width:287px;
+        height:250px;
+        background-color: #ffffff;
+        padding-top:20px;
+        padding-left: 20px;
+        margin-top: 20px;
+    }
+    .container-body9{
+        width:286px;
+        height:250px;
+        background-color: #ffffff;
+        padding-top:20px;
+        padding-left: 20px;
+        margin-top: 20px;
+    }
+    .ranking-img{
+        width:60px;
+        height:26px;
+        display: flex;
+        line-height: 26px;
+        margin-bottom:15px;
+        margin-right:10px;
+        padding-left: 15px;
+    }
+     .num-style{
+         position:absolute;
+         display: flex;
+         margin-left:90px;
+         margin-top:5px;
+         color:#333333;
+         font-size: 16px;        
+    }   
+    .count-style{
+         position:absolute;
+         display: flex;
+         margin-left:400px;
+         margin-top:5px;
+         color:#333333;
+         font-size: 18px;  
+         font-weight: bold;      
+    }
 </style>
\ No newline at end of file
diff --git a/back/src/views/modules/abilityStatistics/componentServices.vue b/back/src/views/modules/abilityStatistics/componentServices.vue
index 2ab65dfb..40117e32 100644
--- a/back/src/views/modules/abilityStatistics/componentServices.vue
+++ b/back/src/views/modules/abilityStatistics/componentServices.vue
@@ -16,12 +16,34 @@
                 <div id="main3" style="width: 400px;height:200px;"></div>
             </div>
              <div class='container-body4'>
-                <span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
-                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                <div style='margin-bottom:30px'>
+                     <span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
+                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                </div>
+                <div v-for="(item,index) in usedList" :key='index' >
+                    <div style='display:flex'>
+                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
+                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
+                        </div>
+                        <span class='num-style'>{{item.name}}</span>
+                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span>
+                    </div>
+                </div>
             </div>
              <div class='container-body5'>
-                <span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
-                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                <div style='margin-bottom:30px'>
+                     <span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
+                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                </div>
+                <div v-for="(item,index) in applicationList" :key='index' >
+                    <div style='display:flex'>
+                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
+                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
+                        </div>
+                        <span class='num-style'>{{item.name}}</span>
+                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span>
+                    </div>
+                </div>
             </div>
         </div>
         <div class='footer'>
@@ -35,6 +57,15 @@
 import * as echarts from 'echarts';
 
 export default {
+    data(){
+        return{
+            colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
+            widthList:['90px','80px','70px','60px','50px'],
+            numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
+            usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
+            applicationList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},]
+        }
+    },
     mounted(){
         this.myEcharts1()
         this.myEcharts2()
@@ -95,13 +126,13 @@ export default {
                 show: false,
                 position: 'center'
             },
-            emphasis: {
-                label: {
-                show: true,
-                fontSize: '40',
-                fontWeight: 'bold'
-                }
-            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
             labelLine: {
                 show: false
             },
@@ -173,13 +204,13 @@ export default {
                 show: false,
                 position: 'center'
             },
-            emphasis: {
-                label: {
-                show: true,
-                fontSize: '40',
-                fontWeight: 'bold'
-                }
-            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
             labelLine: {
                 show: false
             },
@@ -250,13 +281,13 @@ export default {
                 show: false,
                 position: 'center'
             },
-            emphasis: {
-                label: {
-                show: true,
-                fontSize: '40',
-                fontWeight: 'bold'
-                }
-            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
             labelLine: {
                 show: false
             },
@@ -355,4 +386,30 @@ export default {
         margin-left:10px;
         margin-top:8px
     }
+    .ranking-img{
+        width:60px;
+        height:26px;
+        display: flex;
+        line-height: 26px;
+        margin-bottom:15px;
+        margin-right:10px;
+        padding-left: 15px;
+    }
+    .num-style{
+         position:absolute;
+         display: flex;
+         margin-left:90px;
+         margin-top:5px;
+         color:#333333;
+         font-size: 16px;        
+    }   
+    .count-style{
+         position:absolute;
+         display: flex;
+         margin-left:400px;
+         margin-top:5px;
+         color:#333333;
+         font-size: 18px;  
+         font-weight: bold;      
+    }
 </style>
\ No newline at end of file

From f2671b729d0f58ea2d1f7d55cff8fc5316ce56a7 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Fri, 24 Jun 2022 17:04:47 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E8=AE=BE=E6=96=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/DetailsPageconetent.vue | 885 ++++++++++---------
 front/src/views/home/infrastructurePage.vue  |   5 +
 2 files changed, 460 insertions(+), 430 deletions(-)
 create mode 100644 front/src/views/home/infrastructurePage.vue

diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index 114bc67e..d1a15f06 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -6,7 +6,7 @@
     <div class="details-pageconetent-left">
       <detailsPageconetentTree />
     </div>
-    <div class="top" v-if="Cardsname != '知识库'">
+    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
       <div class="top-title">
         <div
           v-for="item in titleName"
@@ -144,6 +144,28 @@
         <a-empty />
       </div>
     </div>
+    <div class="top" v-else-if="Cardsname === '基础设施'">
+      <div class="top-title">
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
+          <span>{{ item.name }}</span>
+        </div>
+      </div>
+      <div class="">
+        <infrastructure-page></infrastructure-page>
+      </div>
+    </div>
     <div class="top" v-else>
       <div class="top-title">
         <div
@@ -657,6 +679,8 @@
   // import VideoSurveillance from '@/views/home/videoSurveillance'
   // 数据资源引用
   import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
+  // 基础设施引用
+  import InfrastructurePage from './infrastructurePage.vue'
   export default defineComponent({
     setup() {
       // const store = useStore()
@@ -1294,6 +1318,7 @@
       // VideoCameraOutlined,
       // VideoSurveillance,
       DetailsPageResource,
+      InfrastructurePage,
     },
     beforeUnmount() {
       mybus.off('selectCardsitem')
@@ -1306,474 +1331,474 @@
   })
 </script>
 <style lang="less" scoped>
-  .resultListSearchInput-father {
-    background: #f3f5f9;
-    padding-left: 0.2rem;
-    padding-top: 0.2rem;
-    .resultListSearchInput-son {
-      background: #fff;
-      padding: 0.2rem 0.2rem 0rem 0.3rem;
-      margin-right: 0.2rem;
-      .hengxian {
-        width: 100%;
-        height: 0.01rem;
-        background: rgba(150, 144, 144, 0.3);
-        margin-top: 0.2rem;
-      }
+.resultListSearchInput-father {
+  background: #f3f5f9;
+  padding-left: 0.2rem;
+  padding-top: 0.2rem;
+  .resultListSearchInput-son {
+    background: #fff;
+    padding: 0.2rem 0.2rem 0rem 0.3rem;
+    margin-right: 0.2rem;
+    .hengxian {
+      width: 100%;
+      height: 0.01rem;
+      background: rgba(150, 144, 144, 0.3);
+      margin-top: 0.2rem;
     }
   }
-  .resultListSearchInput {
-    margin-left: 0.1rem;
-    :deep(.ant-input) {
-      width: 4rem;
-      height: 0.36rem;
-      background: #fff;
-      border-radius: 0.04rem;
-    }
-    :deep(.ant-input-search-button) {
-      width: 0.8rem;
-      height: 0.36rem;
-      background: #0087ff;
-      border-radius: 0.04rem !important;
-      font-size: 0.14rem;
-      font-weight: 400;
-      color: #fff;
-      line-height: 0.34rem;
-      margin-left: 0.1rem;
-    }
-    :deep(.ant-input-group-addon) {
-      left: 0 !important;
-    }
+}
+.resultListSearchInput {
+  margin-left: 0.1rem;
+  :deep(.ant-input) {
+    width: 4rem;
+    height: 0.36rem;
+    background: #fff;
+    border-radius: 0.04rem;
   }
-  .button-reset {
-    border: 0;
-    outline: none;
+  :deep(.ant-input-search-button) {
     width: 0.8rem;
     height: 0.36rem;
-    background: #e1edfa;
-    border-radius: 0.04rem;
+    background: #0087ff;
+    border-radius: 0.04rem !important;
     font-size: 0.14rem;
     font-weight: 400;
-    color: #0087ff;
+    color: #fff;
     line-height: 0.34rem;
-    margin-left: 2.5rem;
-    cursor: pointer;
+    margin-left: 0.1rem;
   }
-  .details-pageconetent {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    // flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 0.67rem;
+  :deep(.ant-input-group-addon) {
+    left: 0 !important;
+  }
+}
+.button-reset {
+  border: 0;
+  outline: none;
+  width: 0.8rem;
+  height: 0.36rem;
+  background: #e1edfa;
+  border-radius: 0.04rem;
+  font-size: 0.14rem;
+  font-weight: 400;
+  color: #0087ff;
+  line-height: 0.34rem;
+  margin-left: 2.5rem;
+  cursor: pointer;
+}
+.details-pageconetent {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  // flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.67rem;
+  position: relative;
+  background: rgba(245, 243, 243, 0.3);
+  .details-pageconetent-left {
+    max-height: 6.9rem;
+    position: absolute;
+    width: 2.5rem;
+    top: 0.17rem;
+    left: 2.5rem;
+    margin-right: 0.17rem;
+    overflow: auto;
+  }
+  .top {
+    min-height: 7.2rem;
     position: relative;
-    background: rgba(245, 243, 243, 0.3);
-    .details-pageconetent-left {
-      max-height: 6.9rem;
-      position: absolute;
-      width: 2.5rem;
-      top: 0.17rem;
-      left: 2.5rem;
-      margin-right: 0.17rem;
-      overflow: auto;
+    width: 10.87rem;
+    display: flex;
+    padding-top: 0.2rem;
+    flex-direction: column;
+    // align-items: center;
+    font-size: 0.16rem;
+    justify-content: left;
+    margin-left: 2.5rem;
+    .pagination {
+      background: #f3f5f9;
+      padding-bottom: 0.6rem;
     }
-    .top {
-      min-height: 7.2rem;
-      position: relative;
-      width: 10.87rem;
-      display: flex;
-      padding-top: 0.2rem;
-      flex-direction: column;
-      // align-items: center;
-      font-size: 0.16rem;
-      justify-content: left;
-      margin-left: 2.5rem;
-      .pagination {
-        background: #f3f5f9;
-        padding-bottom: 0.6rem;
-      }
-      .jichusheshi {
-        // display: flex;
-        // flex-direction: column;
-        // justify-content: center;
-        // padding-top: .4rem;
-        height: 4.45rem;
-        // overflow: hidden;
-        .yunziyuan {
-          width: 100%;
-          position: relative;
-          .shuoming {
-            position: absolute;
-            right: 0.2rem;
-            top: 0.15rem;
-            font-size: 0.12rem;
-          }
-          .yunziyuan-title {
-            display: flex;
-            align-items: center;
-            .tupian {
-              // width: .89rem;
-              // height: .74rem;
-              // background: url('~@/assets/home/yunziyuan.png');
-            }
-            .title {
-              margin-left: 0.1rem;
-              font-weight: 600;
-              text-decoration: underline;
-              cursor: pointer;
-            }
-          }
-          .fenlei {
-            display: flex;
-            margin-left: 0.2rem;
-            margin-right: 0.3rem;
-            justify-content: space-between;
-          }
-          .keyongziyuan {
-            display: flex;
-            justify-content: space-between;
-            margin-left: 0.3rem;
-            margin-right: 0.3rem;
-            div {
-              display: flex;
-              div:last-child {
-                font-weight: 600;
-              }
-            }
-          }
+    .jichusheshi {
+      // display: flex;
+      // flex-direction: column;
+      // justify-content: center;
+      // padding-top: .4rem;
+      height: 4.45rem;
+      // overflow: hidden;
+      .yunziyuan {
+        width: 100%;
+        position: relative;
+        .shuoming {
+          position: absolute;
+          right: 0.2rem;
+          top: 0.15rem;
+          font-size: 0.12rem;
         }
-        .yunziyuan > div {
-          margin-bottom: 0.1rem;
-        }
-        .shipin {
-          width: 100%;
-          .shipin-title {
-            display: flex;
-            align-items: center;
-            .tupian {
-              // width: .56rem;
-              // height: .5rem;
-              // background: url('~@/assets/home/shipin.png');
-            }
-            .title {
-              margin-left: 0.1rem;
-              font-weight: 600;
-              text-decoration: underline;
-              cursor: pointer;
-            }
-          }
-          .fenlei {
-            display: flex;
-            margin-left: 0.2rem;
-            div {
-              margin-right: 0.6rem;
-            }
-            .shuzi {
-              font-weight: 600;
-            }
-          }
-        }
-        .shipin > div {
-          margin-bottom: 0.1rem;
-        }
-      }
-      .jichusheshi > div {
-        // background: #eaf4ff;
-        padding-top: 0.1rem;
-        border-radius: 0.04rem;
-        margin-bottom: 0.2rem;
-        padding-bottom: 0.4rem;
-      }
-      .shujuziyuan {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding-top: 0.4rem;
-        .yunziyuan {
-          width: 100%;
-          position: relative;
-          .shuoming {
-            position: absolute;
-            right: 0.2rem;
-            top: 0.15rem;
-            font-size: 0.12rem;
-          }
-          .yunziyuan-title {
-            display: flex;
-            align-items: center;
-            margin-left: 0.2rem;
-            .tupian {
-              // width: .51rem;
-              // height: .5rem;
-              // background: url('~@/assets/home/shujuziyuan.png');
-            }
-            .title {
-              margin-left: 0.1rem;
-              font-weight: 600;
-              text-decoration: underline;
-              cursor: pointer;
-            }
-          }
-          .fenlei {
-            display: flex;
-            margin-left: 0.2rem;
-            margin-right: 0.3rem;
-            justify-content: space-between;
-          }
-          .keyongziyuan {
-            display: flex;
-            justify-content: space-between;
-            margin-left: 0.3rem;
-            margin-right: 0.3rem;
-            div {
-              display: flex;
-              div:last-child {
-                font-weight: 600;
-              }
-            }
-          }
-        }
-        .yunziyuan > div {
-          margin-bottom: 0.1rem;
-        }
-      }
-      .shujuziyuan > div {
-        background: #eaf4ff;
-        padding-top: 0.1rem;
-        border-radius: 0.04rem;
-        margin-bottom: 0.2rem;
-        padding-bottom: 0.4rem;
-      }
-      .top-title {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 0.2rem;
-        font-family: 'Alibaba PuHuiTi';
-        color: #000000;
-        line-height: 0.34rem;
-        .photo {
-          display: inline-block;
-          height: 0.44rem;
-          width: 0.44rem;
-          margin-right: 0.1rem;
-        }
-        div {
-          margin: 0 0.2rem;
-          padding: 0 0.1rem;
-          cursor: pointer;
+        .yunziyuan-title {
           display: flex;
           align-items: center;
+          .tupian {
+            // width: .89rem;
+            // height: .74rem;
+            // background: url('~@/assets/home/yunziyuan.png');
+          }
+          .title {
+            margin-left: 0.1rem;
+            font-weight: 600;
+            text-decoration: underline;
+            cursor: pointer;
+          }
         }
-        div:hover {
-          color: #0087ff;
+        .fenlei {
+          display: flex;
+          margin-left: 0.2rem;
+          margin-right: 0.3rem;
+          justify-content: space-between;
         }
-        .sel {
-          font-weight: 600;
-          color: #0087ff;
-          border-bottom: 0.02rem solid #0087ff;
+        .keyongziyuan {
+          display: flex;
+          justify-content: space-between;
+          margin-left: 0.3rem;
+          margin-right: 0.3rem;
+          div {
+            display: flex;
+            div:last-child {
+              font-weight: 600;
+            }
+          }
         }
       }
-      .top-content-father {
-        width: 10.87rem;
-        padding-left: 0.2rem;
-        // margin-bottom: .2rem;
-        background: #f3f5f9;
-        .top-content-son {
-          background: #fff;
-          margin: 0rem 0.2rem 0.2rem 0rem;
-          padding-top: 0.2rem;
-          padding-bottom: 0.2rem;
-        }
-        .top-content {
+      .yunziyuan > div {
+        margin-bottom: 0.1rem;
+      }
+      .shipin {
+        width: 100%;
+        .shipin-title {
           display: flex;
-          margin-top: 0rem;
-          span:nth-child(1) {
-            display: inline-block;
-            position: relative;
-            // width: .7rem;
-            line-height: 0.3614rem;
-            white-space: normal;
-            text-align: center;
-            vertical-align: middle;
+          align-items: center;
+          .tupian {
+            // width: .56rem;
+            // height: .5rem;
+            // background: url('~@/assets/home/shipin.png');
           }
-          // .top-content-title {
-          //   top: -0.2rem;
-          // }
-          .leixingsumfather {
-            width: 8.1rem;
-            display: inline-block;
-            height: 0.3014rem;
-            overflow: hidden;
-            // width: 7.18rem;
-          }
-          .leixingsumfather2 {
-            width: 9.2rem;
-          }
-          .leixingsum {
-            display: inline-block;
+          .title {
+            margin-left: 0.1rem;
+            font-weight: 600;
+            text-decoration: underline;
             cursor: pointer;
-            text-align: center;
-            margin-top: 0.05rem;
-            // margin-bottom: .1rem;
-            .ant-tag-checkable {
-              width: 0.83rem;
-              height: 0.25rem;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              padding-left: 0.05rem;
-              padding-right: 0.05rem;
-              float: left;
-              margin: 0 0.15rem;
-              font-family: 'AlibabaPuHuiTiR';
-              font-size: 0.14rem;
-              color: #333333;
-              font-weight: 500;
-              text-align: center;
-              line-height: 0.14rem;
-            }
-            :deep(.ant-tag-checkable-checked) {
-              // width: .67rem;
-              margin-left: 0.15rem;
-              margin-right: 0.15rem;
-              text-align: center;
-            }
-            .ant-tag-checkable:active,
-            .ant-tag-checkable-checked {
-              width: 0.85rem;
-              font-family: 'Alibaba PuHuiTi';
-              font-weight: 500;
-              background-color: #0087ff;
-              color: #ffffff;
-              border-radius: 0.16rem;
+          }
+        }
+        .fenlei {
+          display: flex;
+          margin-left: 0.2rem;
+          div {
+            margin-right: 0.6rem;
+          }
+          .shuzi {
+            font-weight: 600;
+          }
+        }
+      }
+      .shipin > div {
+        margin-bottom: 0.1rem;
+      }
+    }
+    .jichusheshi > div {
+      // background: #eaf4ff;
+      padding-top: 0.1rem;
+      border-radius: 0.04rem;
+      margin-bottom: 0.2rem;
+      padding-bottom: 0.4rem;
+    }
+    .shujuziyuan {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding-top: 0.4rem;
+      .yunziyuan {
+        width: 100%;
+        position: relative;
+        .shuoming {
+          position: absolute;
+          right: 0.2rem;
+          top: 0.15rem;
+          font-size: 0.12rem;
+        }
+        .yunziyuan-title {
+          display: flex;
+          align-items: center;
+          margin-left: 0.2rem;
+          .tupian {
+            // width: .51rem;
+            // height: .5rem;
+            // background: url('~@/assets/home/shujuziyuan.png');
+          }
+          .title {
+            margin-left: 0.1rem;
+            font-weight: 600;
+            text-decoration: underline;
+            cursor: pointer;
+          }
+        }
+        .fenlei {
+          display: flex;
+          margin-left: 0.2rem;
+          margin-right: 0.3rem;
+          justify-content: space-between;
+        }
+        .keyongziyuan {
+          display: flex;
+          justify-content: space-between;
+          margin-left: 0.3rem;
+          margin-right: 0.3rem;
+          div {
+            display: flex;
+            div:last-child {
+              font-weight: 600;
             }
           }
-          .active {
-            font-family: Alibaba PuHuiTi;
+        }
+      }
+      .yunziyuan > div {
+        margin-bottom: 0.1rem;
+      }
+    }
+    .shujuziyuan > div {
+      background: #eaf4ff;
+      padding-top: 0.1rem;
+      border-radius: 0.04rem;
+      margin-bottom: 0.2rem;
+      padding-bottom: 0.4rem;
+    }
+    .top-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.2rem;
+      font-family: 'Alibaba PuHuiTi';
+      color: #000000;
+      line-height: 0.34rem;
+      .photo {
+        display: inline-block;
+        height: 0.44rem;
+        width: 0.44rem;
+        margin-right: 0.1rem;
+      }
+      div {
+        margin: 0 0.2rem;
+        padding: 0 0.1rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+      }
+      div:hover {
+        color: #0087ff;
+      }
+      .sel {
+        font-weight: 600;
+        color: #0087ff;
+        border-bottom: 0.02rem solid #0087ff;
+      }
+    }
+    .top-content-father {
+      width: 10.87rem;
+      padding-left: 0.2rem;
+      // margin-bottom: .2rem;
+      background: #f3f5f9;
+      .top-content-son {
+        background: #fff;
+        margin: 0rem 0.2rem 0.2rem 0rem;
+        padding-top: 0.2rem;
+        padding-bottom: 0.2rem;
+      }
+      .top-content {
+        display: flex;
+        margin-top: 0rem;
+        span:nth-child(1) {
+          display: inline-block;
+          position: relative;
+          // width: .7rem;
+          line-height: 0.3614rem;
+          white-space: normal;
+          text-align: center;
+          vertical-align: middle;
+        }
+        // .top-content-title {
+        //   top: -0.2rem;
+        // }
+        .leixingsumfather {
+          width: 8.1rem;
+          display: inline-block;
+          height: 0.3014rem;
+          overflow: hidden;
+          // width: 7.18rem;
+        }
+        .leixingsumfather2 {
+          width: 9.2rem;
+        }
+        .leixingsum {
+          display: inline-block;
+          cursor: pointer;
+          text-align: center;
+          margin-top: 0.05rem;
+          // margin-bottom: .1rem;
+          .ant-tag-checkable {
+            width: 0.83rem;
+            height: 0.25rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-left: 0.05rem;
+            padding-right: 0.05rem;
+            float: left;
+            margin: 0 0.15rem;
+            font-family: 'AlibabaPuHuiTiR';
+            font-size: 0.14rem;
+            color: #333333;
+            font-weight: 500;
+            text-align: center;
+            line-height: 0.14rem;
+          }
+          :deep(.ant-tag-checkable-checked) {
+            // width: .67rem;
+            margin-left: 0.15rem;
+            margin-right: 0.15rem;
+            text-align: center;
+          }
+          .ant-tag-checkable:active,
+          .ant-tag-checkable-checked {
+            width: 0.85rem;
+            font-family: 'Alibaba PuHuiTi';
             font-weight: 500;
             background-color: #0087ff;
             color: #ffffff;
+            border-radius: 0.16rem;
           }
         }
-        .top-content:nth-child(1) {
-          margin-top: 0rem !important;
-        }
-      }
-    }
-  }
-  .shrinkTag {
-    width: 0.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    margin-bottom: 0.05rem;
-    span {
-      cursor: pointer;
-    }
-  }
-  .shrink {
-    height: unset !important;
-    overflow: unset !important;
-  }
-  .talk-monitor {
-    position: fixed;
-    bottom: 0.5rem;
-    right: 0.1rem;
-    z-index: 9999;
-    cursor: pointer;
-    i {
-      width: 0.64rem;
-      height: 0.64rem;
-      display: inline-block;
-      background: url('~@/assets/home/icon-talk.png');
-      background-size: cover;
-    }
-  }
-  .top-content-father {
-    width: 10.87rem;
-    padding-left: 0.2rem;
-    // margin-bottom: .2rem;
-    .top-content {
-      display: flex;
-      margin-top: 0.23rem;
-      span:nth-child(1) {
-        display: inline-block;
-        position: relative;
-        width: 0.68rem;
-        font-weight: 600;
-        white-space: normal;
-        text-align: center;
-        vertical-align: middle;
-        font-size: 0.16rem;
-        margin-left: 0.3rem;
-      }
-      // .top-content-title {
-      //   top: -0.2rem;
-      // }
-      .leixingsumfather {
-        width: 7.7rem;
-        display: inline-block;
-        height: 0.3014rem;
-        overflow: hidden;
-        // width: 7.18rem;
-      }
-      .leixingsum {
-        width: 0.93rem;
-        display: inline-block;
-        cursor: pointer;
-        text-align: center;
-        margin-top: 0.05rem;
-        // margin-bottom: .1rem;
-        .ant-tag-checkable {
-          width: 0.85rem;
-          height: 0.25rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding-left: 0.05rem;
-          padding-right: 0.05rem;
-          float: left;
-          margin: 0 0.15rem;
-          font-family: 'AlibabaPuHuiTiR';
-          font-size: 0.14rem;
-          color: #333333;
-          font-weight: 500;
-          text-align: center;
-          line-height: 0.14rem;
-        }
-        :deep(.ant-tag-checkable-checked) {
-          // width: .67rem;
-          margin-left: 0.15rem;
-          margin-right: 0.15rem;
-          text-align: center;
-        }
-        .ant-tag-checkable:active,
-        .ant-tag-checkable-checked {
-          width: 0.85rem;
-          font-family: 'Alibaba PuHuiTi';
+        .active {
+          font-family: Alibaba PuHuiTi;
           font-weight: 500;
           background-color: #0087ff;
           color: #ffffff;
-          border-radius: 0.16rem;
         }
       }
-      .active {
-        font-family: Alibaba PuHuiTi;
+      .top-content:nth-child(1) {
+        margin-top: 0rem !important;
+      }
+    }
+  }
+}
+.shrinkTag {
+  width: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  margin-bottom: 0.05rem;
+  span {
+    cursor: pointer;
+  }
+}
+.shrink {
+  height: unset !important;
+  overflow: unset !important;
+}
+.talk-monitor {
+  position: fixed;
+  bottom: 0.5rem;
+  right: 0.1rem;
+  z-index: 9999;
+  cursor: pointer;
+  i {
+    width: 0.64rem;
+    height: 0.64rem;
+    display: inline-block;
+    background: url('~@/assets/home/icon-talk.png');
+    background-size: cover;
+  }
+}
+.top-content-father {
+  width: 10.87rem;
+  padding-left: 0.2rem;
+  // margin-bottom: .2rem;
+  .top-content {
+    display: flex;
+    margin-top: 0.23rem;
+    span:nth-child(1) {
+      display: inline-block;
+      position: relative;
+      width: 0.68rem;
+      font-weight: 600;
+      white-space: normal;
+      text-align: center;
+      vertical-align: middle;
+      font-size: 0.16rem;
+      margin-left: 0.3rem;
+    }
+    // .top-content-title {
+    //   top: -0.2rem;
+    // }
+    .leixingsumfather {
+      width: 7.7rem;
+      display: inline-block;
+      height: 0.3014rem;
+      overflow: hidden;
+      // width: 7.18rem;
+    }
+    .leixingsum {
+      width: 0.93rem;
+      display: inline-block;
+      cursor: pointer;
+      text-align: center;
+      margin-top: 0.05rem;
+      // margin-bottom: .1rem;
+      .ant-tag-checkable {
+        width: 0.85rem;
+        height: 0.25rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-left: 0.05rem;
+        padding-right: 0.05rem;
+        float: left;
+        margin: 0 0.15rem;
+        font-family: 'AlibabaPuHuiTiR';
+        font-size: 0.14rem;
+        color: #333333;
+        font-weight: 500;
+        text-align: center;
+        line-height: 0.14rem;
+      }
+      :deep(.ant-tag-checkable-checked) {
+        // width: .67rem;
+        margin-left: 0.15rem;
+        margin-right: 0.15rem;
+        text-align: center;
+      }
+      .ant-tag-checkable:active,
+      .ant-tag-checkable-checked {
+        width: 0.85rem;
+        font-family: 'Alibaba PuHuiTi';
         font-weight: 500;
         background-color: #0087ff;
         color: #ffffff;
+        border-radius: 0.16rem;
       }
     }
-    .top-content:nth-child(1) {
-      margin-top: 0.41rem !important;
+    .active {
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      background-color: #0087ff;
+      color: #ffffff;
     }
   }
-  :deep(.ant-card-grid) {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 1;
+  .top-content:nth-child(1) {
+    margin-top: 0.41rem !important;
   }
+}
+:deep(.ant-card-grid) {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 1;
+}
 </style>
diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
new file mode 100644
index 00000000..1249bb3e
--- /dev/null
+++ b/front/src/views/home/infrastructurePage.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>1234567890</div>
+</template>
+<script></script>
+<style lang="less" scoped></style>

From 4fba819602b0f041b352215e92a2d8dbaee1af90 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Fri, 24 Jun 2022 17:15:55 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E8=AE=BE=E6=96=BD-?=
 =?UTF-8?q?=E5=B7=A6=E4=BE=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/DetailsPageconetent.vue  |   7 +-
 .../home/detailsPageInfrastructureTree.vue    | 518 ++++++++++++++++++
 2 files changed, 524 insertions(+), 1 deletion(-)
 create mode 100644 front/src/views/home/detailsPageInfrastructureTree.vue

diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index d1a15f06..4afa53f2 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -3,9 +3,12 @@
 
   <div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
     <home-header></home-header>
-    <div class="details-pageconetent-left">
+    <div class="details-pageconetent-left" v-if="Cardsname != '基础设施'">
       <detailsPageconetentTree />
     </div>
+    <div class="details-pageconetent-left" v-else>
+      <detailsPageInfrastructureTree />
+    </div>
     <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
       <div class="top-title">
         <div
@@ -681,6 +684,7 @@
   import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
   // 基础设施引用
   import InfrastructurePage from './infrastructurePage.vue'
+  import detailsPageInfrastructureTree from './detailsPageInfrastructureTree.vue'
   export default defineComponent({
     setup() {
       // const store = useStore()
@@ -1319,6 +1323,7 @@
       // VideoSurveillance,
       DetailsPageResource,
       InfrastructurePage,
+      detailsPageInfrastructureTree,
     },
     beforeUnmount() {
       mybus.off('selectCardsitem')
diff --git a/front/src/views/home/detailsPageInfrastructureTree.vue b/front/src/views/home/detailsPageInfrastructureTree.vue
new file mode 100644
index 00000000..beb1ffd3
--- /dev/null
+++ b/front/src/views/home/detailsPageInfrastructureTree.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="wrapper">
+    <div class="wrapper-title-left-tree" :key="showKey">
+      <div v-for="item in treeData" :key="item.key" class="primaryNode">
+        <!-- <div v-if="!item.children || item.children.length == 0">
+          {{ item.title }}
+        </div> -->
+        <div
+          class="top"
+          @click="showBottom(item)"
+          :class="item.show ? 'topSelect' : ''"
+        >
+          {{ item.title }}
+          <DownOutlined v-show="!item.show" />
+          <UpOutlined v-show="item.show" />
+        </div>
+        <div class="bottom" v-show="item.show">
+          <div v-for="val in item.children" :key="val.key" class="item">
+            <div
+              class="up"
+              :class="selectId == val.key ? 'select' : ''"
+              @click="showDown(item, val), onSelect(item, val)"
+            >
+              <div>
+                <svg
+                  t="1654068878091"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2156"
+                  width="0.25rem"
+                  height="0.25rem"
+                  v-show="selectId == val.key"
+                >
+                  <path
+                    d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
+                    p-id="2157"
+                    fill="#0058e1"
+                  ></path>
+                </svg>
+                <span class="name">
+                  {{ val.title }}
+                </span>
+              </div>
+              <span v-if="item.title !== '区级'">{{ val.total }}</span>
+              <span v-else>
+                <down-outlined v-show="!val.show" />
+                <up-outlined v-show="val.show" />
+              </span>
+            </div>
+            <div class="down" v-show="val.show">
+              <div
+                v-for="child in val.children"
+                :key="child.key"
+                class="child"
+                :class="selectId == child.key ? 'select2' : ''"
+                @click="onSelect(item, val, child)"
+              >
+                <div>
+                  <svg
+                    t="1654068878091"
+                    class="icon"
+                    viewBox="0 0 1024 1024"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    p-id="2156"
+                    width="0.25rem"
+                    height="0.25rem"
+                    v-show="selectId == child.key"
+                  >
+                    <path
+                      d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
+                      p-id="2157"
+                      fill="#0058e1"
+                    ></path>
+                  </svg>
+                  <span class="name">
+                    {{ child.title }}
+                  </span>
+                </div>
+                <span>{{ child.total }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <a-directory-tree
+        class="draggable-tree"
+        block-node
+        :tree-data="treeData"
+        @select="onSelect"
+      ></a-directory-tree> -->
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent, ref, watch } from 'vue'
+  import { selectDeptList } from '@/api/home.js'
+  import mybus from '@/myplugins/mybus'
+  import { useRouter } from 'vue-router'
+  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+  export default defineComponent({
+    setup() {
+      const selectedKeys = ref([])
+      const checkedKeys = ref([])
+      const router = useRouter()
+      const fieldNames = {
+        children: 'children',
+        title: 'name',
+      }
+      const showKey = ref(0)
+      const treeData = ref([])
+      const init = () => {
+        treeData.value = []
+        console.log(
+          'router.currentRoute.value.query.select',
+          router.currentRoute.value.query.select
+        )
+        let select = router.currentRoute.value.query.select
+        if (select === '123') {
+          select = ''
+        }
+        // debugger
+        console.log(
+          '获取url中的select=====================>',
+          router.currentRoute.value.query.select
+        )
+        if (
+          // select !== '基础设施' &&
+          select !== '数据资源' &&
+          select !== '知识库'
+        ) {
+          selectDeptList({ type: select }).then((res) => {
+            // console.log('区划数据=========================>', res.data.data)
+            res.data.data.forEach((val) => {
+              if (val.type !== '全部能力目录') {
+                let obj = {
+                  title: val.type,
+                  total: val.total,
+                  show: val.type === '市级' ? true : false,
+                  select: false,
+                  key: val.type,
+                  children: [],
+                }
+                switch (val.type) {
+                  case '市级':
+                  case '其他':
+                    generateChildren(val, obj)
+                    break
+                  case '区级':
+                    generateChildren2(val, obj)
+                    break
+                }
+                treeData.value.push(obj)
+              }
+            })
+            // 排序
+            const sortArr = ['全部能力目录', '市级', '区级', '企业', '其他']
+            treeData.value.sort((a, b) => {
+              return sortArr.indexOf(a.key) - sortArr.indexOf(b.key)
+            })
+            console.log('左侧树结构数据======================>', treeData.value)
+            showKey.value++
+          })
+        }
+      }
+      mybus.on('getDeptList', () => {
+        init()
+      })
+      // 生成children
+      const generateChildren = (val, obj) => {
+        if (val.dataList.length > 0) {
+          val.dataList.forEach((child) => {
+            let children = {
+              title: child.deptName,
+              show: false,
+              select: false,
+              total: child.deptCount,
+              key: child.deptId,
+            }
+            obj.children.push(children)
+          })
+        }
+      }
+      // 区级特殊处理
+      const generateChildren2 = (val, obj) => {
+        if (val.dataList.length > 0) {
+          val.dataList.forEach((dis) => {
+            let children = {
+              title: dis.type,
+              total: dis.total,
+              show: false,
+              select: false,
+              key: dis.dataList[0].districtId,
+              children: [],
+            }
+            if (dis.dataList.length > 0) {
+              dis.dataList.forEach((child) => {
+                let children2 = {
+                  title: child.deptName,
+                  total: child.deptCount,
+                  show: false,
+                  select: false,
+                  key: child.deptId,
+                }
+                children.children.push(children2)
+              })
+            }
+            obj.children.push(children)
+          })
+        }
+      }
+      // const onSelect = (event, node, dragNode, dragNodesKeys) => {
+      //   console.log(event[0], node.node.children, dragNode, dragNodesKeys)
+      //   if (!node.node.children) {
+      //     mybus.emit('paramsGetResources', [event[0]])
+      //   } else {
+      //     let arr = []
+      //     switch (event[0]) {
+      //       case '全部能力目录':
+      //         mybus.emit('paramsGetResources', [])
+      //         break
+      //       case '区级':
+      //         node.node.children.forEach((dis) => {
+      //           dis.children.forEach((val) => {
+      //             arr.push(val.key)
+      //           })
+      //         })
+      //         mybus.emit('paramsGetResources', arr)
+      //         break
+      //       default:
+      //         node.node.children.forEach((val) => {
+      //           arr.push(val.key)
+      //         })
+      //         mybus.emit('paramsGetResources', arr)
+      //         break
+      //     }
+      //   }
+      // }
+      const selectId = ref('')
+      const onSelect = (item, val, child) => {
+        if (item.title === '区级') {
+          if (child) {
+            if (selectId.value !== child.key) {
+              mybus.emit('paramsGetResources', [child.key])
+              selectId.value = child.key
+            } else {
+              mybus.emit('paramsGetResources', [])
+              selectId.value = ''
+            }
+          }
+        } else {
+          if (selectId.value !== val.key) {
+            mybus.emit('paramsGetResources', [val.key])
+            selectId.value = val.key
+          } else {
+            mybus.emit('paramsGetResources', [])
+            selectId.value = ''
+          }
+        }
+      }
+      watch(selectedKeys, () => {
+        console.log('selectedKeys', selectedKeys)
+      })
+      watch(checkedKeys, (val) => {
+        if (val.checked.length > 1) {
+          val.checked.halfChecked = val.checked.shift()
+        }
+        console.log('onCheck', val)
+      })
+      const value = ref('')
+      const onSearch = (searchValue) => {
+        console.log('use value', searchValue)
+        console.log('or use this.value', value.value.child)
+      }
+      // checkedKeys, checkedNodes, node, event
+      function xuanzeshijian(checkedKeys) {
+        checkedKeys.value.checked = []
+        checkedKeys.value.checked[0] =
+          checkedKeys.checked[checkedKeys.checked.length - 1]
+        // console.log('checkedKeys1', checkedNodes)
+        console.log('checkedKeys', checkedKeys)
+      }
+      let quxiaoshijian = ''
+      function dianjisousuo(selectedKeys, selectedNodes, node, event) {
+        if (quxiaoshijian == selectedNodes.node.id) {
+          quxiaoshijian = ''
+          mybus.emit('paramsGetResources', quxiaoshijian)
+        } else {
+          quxiaoshijian = selectedNodes.node.id
+          mybus.emit('paramsGetResources', selectedNodes.node.id.trim())
+        }
+        console.log(
+          'dianjisousuo',
+          selectedKeys,
+          'dianjisousuo',
+          selectedNodes,
+          'dianjisousuo',
+          node,
+          'dianjisousuo',
+          event
+        )
+      }
+      const showBottom = (item) => {
+        item.show = !item.show
+      }
+      const showDown = (item, val) => {
+        console.log('showDown', val)
+        if (item.title === '区级') {
+          val.show = !val.show
+        }
+      }
+      return {
+        value,
+        onSearch,
+        selectedKeys,
+        checkedKeys,
+        fieldNames,
+        treeData,
+        dianjisousuo,
+        quxiaoshijian,
+        xuanzeshijian,
+        showKey,
+        onSelect,
+        showBottom,
+        showDown,
+        selectId,
+      }
+    },
+    beforeUnmount() {
+      mybus.off('getDeptList')
+      console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
+    },
+    components: {
+      UpOutlined,
+      DownOutlined,
+    },
+  })
+</script>
+<style lang="less" scoped>
+// .wrapper {
+//   height: 100%;
+//   width: 100%;
+//   padding: .2rem;
+//   .wrapper-title {
+//     height: .28rem;
+//     width: 100%;
+//     margin-bottom: .25rem;
+//     .wrapper-title-name {
+//       width: 100%;
+//       height: .17rem;
+//       font-size: .18rem;
+//       font-family: 'AlibabaPuHuiTiR';
+//       font-weight: 400;
+//       color: #0058e1;
+//       line-height: .34rem;
+//     }
+//     .wrapper-title-yangshi {
+//       width: .4rem;
+//       height: .03rem;
+//       background: #0058e1;
+//       border-radius: .02rem;
+//       margin-top: .2rem;
+//       margin-left: .15rem;
+//     }
+//   }
+//   .wrapper-title-left-tree {
+//     overflow-y: auto;
+//     height: 80%;
+//     width: 2.1rem;
+//   }
+//   .wrapper-title-left-tree::-webkit-scrollbar {
+//     width: .05rem;
+//     height: .05rem;
+//   }
+//   .wrapper-title-left-tree::-webkit-scrollbar-thumb {
+//     border-radius: .05rem;
+//     background-color: #0058e1;
+//   }
+//   .wrapper-title-left-tree::-webkit-scrollbar-track {
+//     background-color: transparent;
+//   }
+//   :deep(.ant-tree-treenode) {
+//     margin-top: .1rem;
+//     height: .23rem;
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//     display: -webkit-box;
+//     -webkit-line-clamp: 1;
+//     -webkit-box-orient: vertical;
+//   }
+// }
+.primaryNode {
+  .top {
+    width: 100%;
+    height: 0.4rem;
+    background: rgba(0, 135, 225, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.1rem;
+    margin-top: 0.08rem;
+  }
+  .top:hover {
+    cursor: pointer;
+    // 0058e1 透明度 0.5
+    background: rgba(0, 88, 225, 0.8);
+    color: white;
+    :deep(.anticon) {
+      color: white;
+    }
+  }
+  .topSelect {
+    background: #0058e1;
+    color: white;
+    :deep(.anticon) {
+      color: white;
+    }
+  }
+  .bottom {
+    width: 100%;
+    background: rgba(244, 245, 248, 0.8);
+    padding: 0 0.1rem;
+    // margin-bottom: .08rem;
+    .up {
+      cursor: pointer;
+      height: 0.4rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-top: 0.01rem solid #ccc;
+      padding: 0 0.1rem;
+      & > div {
+        display: flex;
+        justify-content: flex-start;
+      }
+      .name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+      }
+    }
+    .up:hover {
+      .name {
+        color: #0058e1;
+        font-weight: 600;
+      }
+      span {
+        color: #0058e1;
+        font-weight: 600;
+      }
+    }
+    .select {
+      padding: 0 0.1rem 0 0;
+      .name {
+        width: 1.7rem;
+        color: #0058e1;
+        font-weight: 600;
+      }
+      span {
+        color: #0058e1;
+        font-weight: 600;
+      }
+    }
+    .item:nth-of-type(1) .up {
+      border-top: none;
+    }
+    .down {
+      width: 100%;
+      .child {
+        cursor: pointer;
+        height: 0.4rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 0.1rem;
+        & > div {
+          display: flex;
+          justify-content: flex-start;
+        }
+        .name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .child:hover {
+        .name {
+          color: #0058e1;
+          font-weight: 600;
+        }
+        span {
+          color: #0058e1;
+          font-weight: 600;
+        }
+      }
+      .select2 {
+        .name {
+          width: 1.7rem;
+          color: #0058e1;
+          font-weight: 600;
+        }
+        span {
+          color: #0058e1;
+          font-weight: 600;
+        }
+        padding: 0 0.1rem 0 0;
+      }
+    }
+  }
+}
+</style>

From 2b38c0884694fa3d850ceccb16d4a1936ba0fa73 Mon Sep 17 00:00:00 2001
From: wangwei <707714829@qq.com>
Date: Fri, 24 Jun 2022 17:51:04 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 back/src/views/modules/project/contribute.vue |  3 ++-
 back/src/views/modules/project/list.vue       | 13 ++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/back/src/views/modules/project/contribute.vue b/back/src/views/modules/project/contribute.vue
index 6073ab6e..5afee272 100644
--- a/back/src/views/modules/project/contribute.vue
+++ b/back/src/views/modules/project/contribute.vue
@@ -21,8 +21,9 @@
         <el-table-column prop="abilityName" label="贡献能力名称" header-align="center" align="center"></el-table-column>
         <el-table-column prop="abilityType" label="能力类型" header-align="center" align="center"></el-table-column>
         <el-table-column prop="applyTime" label="上架时间" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="applyNum" label="申请次数" header-align="center" align="center"></el-table-column>
         <el-table-column prop="browseNum" label="浏览次数" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="applyNum" label="申请次数" header-align="center" align="center"></el-table-column>
+        
       </el-table>
       <el-pagination
         :current-page="page"
diff --git a/back/src/views/modules/project/list.vue b/back/src/views/modules/project/list.vue
index 4a2cc95b..ee292abe 100644
--- a/back/src/views/modules/project/list.vue
+++ b/back/src/views/modules/project/list.vue
@@ -67,12 +67,6 @@ export default {
         respDep: '',
         applyTime:'',
       },
-      noDataForm: {
-        projectName: '',
-        applyDep: '',
-        respDep: '',
-        applyTime:'',
-      }
     }
   },
   components: {
@@ -81,7 +75,12 @@ export default {
   methods: {
     //重置
      resetDataList(){
-        this.dataForm=this.noDataForm;
+        this.dataForm={
+          projectName: '',
+          applyDep: '',
+          respDep: '',
+          applyTime:'',
+        };
         this.page=1;                    // 当前页码
         this.query();