diff --git a/back/src/assets/img/Capabilitydiagram.png b/back/src/assets/img/Capabilitydiagram.png
new file mode 100644
index 00000000..26506b21
Binary files /dev/null and b/back/src/assets/img/Capabilitydiagram.png differ
diff --git a/back/src/views/modules/activiti/demo/putaway-process3.vue b/back/src/views/modules/activiti/demo/putaway-process3.vue
new file mode 100644
index 00000000..90f2e3cc
--- /dev/null
+++ b/back/src/views/modules/activiti/demo/putaway-process3.vue
@@ -0,0 +1,529 @@
+<!-- 能力下架审批 -->
+<template>
+  <div class="Ability-to-take-off-the-shelf-approval">
+    <div class="Ability-to-take-off-the-shelf-approval-title">能力下架审批</div>
+    <div class="basic-information">
+      <div class="basic-information-title">
+        <span></span><span>基本信息</span>
+      </div>
+      <div class="basic-information-content">
+        <p>
+          <span class="text">
+            能力申请标题：<span> {{ dataForm.name || '--' }}</span></span
+          >
+          <span class="text"
+            >下架单号：<span>{{ dataForm.applyNumber || '--' }}</span></span
+          >
+        </p>
+        <p>
+          <span class="text"
+            >申请人：<span>
+              {{ dataForm.undercarriageUserName || '--' }}</span
+            ></span
+          >
+          <span class="text"
+            >电话：<span>{{ dataForm.deptPhone || '--' }}</span></span
+          >
+          <span class="text"
+            >单位：<span>{{ dataForm.deptName || deptName }}</span></span
+          >
+        </p>
+        <p v-if="dataForm.enclosure" class="accessory">
+          <span>
+            申请附件：<span>
+              {{ dataForm.enclosure || '--'
+              }}<button @click="downloadFile2(dataForm.enclosure)">
+                预览
+              </button></span
+            ></span
+          >
+        </p>
+      </div>
+    </div>
+    <div class="Ability-to-apply-for">
+      <div class="Ability-to-apply-for-title">
+        <span></span><span>申请能力</span>
+      </div>
+      <div class="Ability-to-apply-for-content">
+        <div class="data-list">
+          <div class="data-list-left"></div>
+          <div class="data-list-right">
+            <div class="data-list-right-titleAndDescription">
+              <div class="data-list-right-title">
+                <div class="title-left">
+                  <span>{{ dataForm.name }}</span>
+                  <span>{{ dataForm.type }}</span>
+                </div>
+                <div class="title-right">
+                  <span>能力使用状态：</span>
+                  <span v-if="dataList.total > 0">正在被使用</span>
+                  <span v-else>未使用</span>
+                </div>
+              </div>
+              <div class="data-list-right-description">
+                {{ dataForm.name }}：{{ dataForm.description }}
+              </div>
+            </div>
+            <div class="data-list-right-table">
+              <div class="data-list-right-table-title">
+                正在使用应用数：{{ dataList.total }}
+              </div>
+              <div class="data-list-right-table-list">
+                <div class="data-list-right-table-list-tab">
+                  <span
+                    v-for="(item, index) in datalistrighttablelist"
+                    :key="`data-list-right-table-list-tab-${index}`"
+                  >
+                    {{ item }}
+                  </span>
+                </div>
+                <div
+                  class="data-list-right-table-list-content"
+                  v-if="dataList.total > 0"
+                >
+                  <div
+                    v-for="(item, index) in dataList.list"
+                    :key="`data-list-right-table-list-content-${index}`"
+                  >
+                    <span>{{ item.applicationSystem }}</span>
+                    <span>{{ item.unit }}</span>
+                    <span>{{ item.user }}</span>
+                    <span>{{ item.phone }}</span>
+                  </div>
+                </div>
+                <div v-else class="zanwu">暂无数据</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="agreeOr">
+      <div>
+        <!-- <el-radio-group v-model="agreeOrList" style="width:230px;">
+          <el-radio-button label="同意" class="blueAll" @click="showDialog('同意')">同意</el-radio-button>
+          <el-radio-button label="退回" class="redAll" @click="showDialog('退回')">退回</el-radio-button>
+        </el-radio-group> -->
+        <el-button type="primary" @click="showDialog('同意')">同意</el-button>
+        <el-button type="danger" plain @click="showDialog('拒绝')"
+          >拒绝</el-button
+        >
+        <!-- <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></ren-process-detail>
+    <el-dialog
+      title="审批意见"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-input v-model="input" placeholder="请输入审批意见"></el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose2">取 消</el-button>
+        <el-button
+          type="primary"
+          @click.native="agreeOrNot($store.state.contentTabsActiveName)"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// 引入工作流公共方法
+import processModule from '@/mixins/process-module'
+import RenProcessDetail from '@/components/ren-process-detail/src/ren-process-detail'
+import debounce from 'lodash/debounce'
+import qs from 'qs'
+export default {
+  components: { RenProcessDetail },
+  props: {},
+  mixins: [processModule],
+  data () {
+    return {
+      dialogVisible: false,
+      dialogType: '',
+      input: '',
+      visible: true,
+      showKey: 0,
+      dataForm: [],
+      deptName: '',
+      dataList: {},
+      datalistrighttablelist: [
+        '赋能应用名称',
+        '应用归属部门',
+        '部门联系人',
+        '联系人电话'
+      ]
+    }
+  },
+  watch: {},
+  computed: {},
+  methods: {
+    init () {
+      this.getInfo(this.$router.currentRoute.params.businessKey)
+    },
+    getInfo (id) {
+      this.$http.get('/resource/' + id).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        console.log('this.dataForm', res.data)
+        this.dataForm = res.data
+        this.deptIdQuery()
+        this.AbilityToPullDownPages()
+      })
+    },
+    deptIdQuery () {
+      this.$http
+        .get(`/sys/dept/${this.dataForm.deptId}`)
+        .then(({ data: res }) => {
+          this.deptName = res.data.name
+          console.log('dataFrom', this.deptName)
+        })
+    },
+    AbilityToPullDownPages () {
+      this.$http
+        .get(
+          '/processForm/tabilityapplication/in_use_page?resourceId=' +
+            this.dataForm.id
+        )
+        .then((res) => {
+          this.dataList = res.data.data
+        })
+    },
+    showDialog (title) {
+      this.dialogVisible = true
+      this.dialogType = title
+    },
+    downloadFile2 (url) {
+      console.log(window.SITE_CONFIG.previewUrl)
+      window.open(
+        window.SITE_CONFIG.previewUrl +
+          'hisense_office/onlinePreview?url=' +
+          btoa(encodeURI(url))
+      )
+    },
+    handleClose (done) {
+      this.$confirm('确认关闭？')
+        .then((_) => {
+          this.input = ''
+          done()
+        })
+        .catch((_) => {})
+    },
+    handleClose2 () {
+      this.dialogVisible = false
+      this.input = ''
+    },
+    // 同意与退回
+    agreeOrNot: debounce(
+      function (data) {
+        this.dataForm.taskId = this.$route.params.taskId
+        if (this.dialogType === '同意') {
+          console.log('this.dataForm', this.dataForm)
+          const params = qs.stringify({
+            taskId: this.dataForm.taskId,
+            comment: this.input
+          })
+          console.log(params)
+          this.$http
+            .post('/act/task/complete?' + params)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                this.$message.error(res.msg)
+                if (this.callbacks.taskHandleErrorCallback) {
+                  this.callbacks.taskHandleErrorCallback(res)
+                }
+                return
+              }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.visible = false
+                  this.dialogVisible = false
+                  if (this.callbacks.taskHandleSuccessCallback) {
+                    this.callbacks.taskHandleSuccessCallback(res)
+                  }
+                }
+              })
+            })
+            .catch(() => {})
+        } else if (this.dialogType === '拒绝') {
+          const params = qs.stringify({
+            taskId: this.dataForm.taskId,
+            comment: this.input
+          })
+          this.$http
+            .post('/act/task/backToFirst?', params)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                this.$message.error(res.msg)
+                if (this.callbacks.taskHandleErrorCallback) {
+                  this.callbacks.taskHandleErrorCallback(res)
+                }
+                return
+              }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.visible = false
+                  if (this.callbacks.taskHandleSuccessCallback) {
+                    this.callbacks.taskHandleSuccessCallback(res)
+                  }
+                }
+              })
+            })
+        }
+        this.tabRemoveHandle(data)
+        // this.getDataList(data)
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+    tabRemoveHandle (tabName) {
+      console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
+      if (tabName === 'home') {
+        return false
+      }
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
+        (item) => item.name !== tabName
+      )
+      if (this.$store.state.contentTabs.length <= 0) {
+        this.$store.state.sidebarMenuActiveName =
+          this.$store.state.contentTabsActiveName = 'home'
+        return false
+      }
+      // 当前选中tab被删除
+      if (tabName === this.$store.state.contentTabsActiveName) {
+        const tab =
+          this.$store.state.contentTabs[
+            this.$store.state.contentTabs.length - 1
+          ]
+        this.$router.push({
+          name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
+          params: { ...tab.params },
+          query: { ...tab.query }
+        })
+      }
+    },
+    // 启动流程出错回调
+    startProcessErrorCallback (data) {
+      console.log(data)
+    },
+    // 任务处理出错回调
+    taskHandleErrorCallback (data) {}
+  },
+  created () {
+    this.init()
+  },
+  mounted () {}
+}
+</script>
+<style lang="scss" scoped>
+.Ability-to-take-off-the-shelf-approval {
+  background: #fff;
+  padding: 20px;
+  .Ability-to-take-off-the-shelf-approval-title {
+    font-weight: 600;
+    margin-bottom: 20px;
+    font-size: 18px;
+  }
+  .basic-information {
+    margin-left: 40px;
+    margin-bottom: 40px;
+    .basic-information-title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      margin-bottom: 10px;
+      span:first-child {
+        display: inline-block;
+        height: 20px;
+        width: 5px;
+        background: #0087ff;
+        margin-right: 5px;
+      }
+    }
+    .basic-information-content {
+      background: rgba(244, 245, 248, 0.8);
+      padding: 24px;
+      margin-left: 10px;
+      p {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(3, 33%);
+        color: #212121;
+        font-size: 14px;
+        span {
+          display: inline-block;
+          margin-left: 8px;
+          line-height: 32px;
+          span {
+            font-weight: bold;
+          }
+        }
+        .text {
+          width: 500px;
+        }
+      }
+      .accessory {
+        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;
+            }
+          }
+        }
+      }
+    }
+  }
+  .Ability-to-apply-for {
+    margin-left: 40px;
+    .Ability-to-apply-for-title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      margin-bottom: 10px;
+      border-bottom: 1px #dddee1 solid;
+      padding-bottom: 10px;
+      span:first-child {
+        display: inline-block;
+        height: 20px;
+        width: 5px;
+        background: #0087ff;
+        margin-right: 5px;
+      }
+    }
+    .Ability-to-apply-for-content {
+      .data-list {
+        display: flex;
+        border-bottom: 1px solid #dddee1;
+        margin-bottom: 10px;
+        .data-list-left {
+          width: 80px;
+          height: 110px;
+          background: url('~@/assets/img/Capabilitydiagram.png') no-repeat;
+          background-size: 80px 80px;
+          background-position: center;
+          margin-left: 10px;
+          padding-bottom: 30px;
+        }
+        .data-list-right {
+          width: calc(100% - 83px);
+          margin-left: 10px;
+          padding-bottom: 20px;
+          border-left: 1px solid #dddee1;
+          font-size: 18px;
+          color: #000000;
+          .data-list-right-titleAndDescription {
+            padding-left: 10px;
+            padding-right: 20px;
+            border-bottom: 1px solid #dddee1;
+            padding-bottom: 10px;
+            .data-list-right-title {
+              display: flex;
+              justify-content: space-between;
+              margin-bottom: 0.2rem;
+              .title-left {
+                span:first-child {
+                  font-weight: 600;
+                }
+                span:last-child {
+                  font-size: 14px;
+                  display: inline-block;
+                  margin-left: 8px;
+                  padding: 0 5px;
+                  border-radius: 30px;
+                  background: #00b8e6;
+                  color: #fff;
+                }
+              }
+            }
+          }
+          .data-list-right-description {
+            margin: 10px 0;
+            font-size: 16px;
+          }
+          .data-list-right-table {
+            .data-list-right-table-title {
+              margin-left: 10px;
+              margin-top: 20px;
+              margin-bottom: 20px;
+              font-size: 14px;
+              display: inline-block;
+              margin-left: 8px;
+              padding: 0 5px;
+              border-radius: 30px;
+              background: #00b8e6;
+              color: #fff;
+            }
+            .data-list-right-table-list {
+              padding: 0 5px;
+              .data-list-right-table-list-tab {
+                display: grid;
+                grid-template-columns: repeat(4, 25%);
+                background: rgba(191, 191, 191, 0.1);
+                span {
+                  display: inline-block;
+                  text-align: center;
+                  padding: 5px 0;
+                }
+              }
+              .data-list-right-table-list-content {
+                & > div {
+                  display: grid;
+                  grid-template-columns: repeat(4, 25%);
+                  span {
+                    display: inline-block;
+                    text-align: center;
+                    padding: 5px 0;
+                  }
+                }
+                div:nth-child(even) {
+                  background: rgba(191, 191, 191, 0.1);
+                }
+                div:nth-child(odd) {
+                  span {
+                    padding: 20px 0;
+                  }
+                }
+              }
+              .zanwu {
+                margin-top: 20px;
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .agreeOr {
+    & > div {
+      text-align: right;
+      padding-right: 40px;
+      margin: 20px 0;
+    }
+  }
+}
+</style>