diff --git a/back/src/views/modules/abilityStatistics/components/abilityDetails.vue b/back/src/views/modules/abilityStatistics/components/abilityDetails.vue
new file mode 100644
index 00000000..0783f165
--- /dev/null
+++ b/back/src/views/modules/abilityStatistics/components/abilityDetails.vue
@@ -0,0 +1,426 @@
+<template>
+  <el-dialog
+    :destroy-on-close="true"
+    :close-on-click-modal="false"
+    @close="closeModal"
+    title="申请详情"
+    :visible.sync="detailsVisibleCopy"
+  >
+    <!--非后台-->
+
+    <div class="topss" v-if="detailType == '能力使用'">
+      <div class="title">基本信息</div>
+      <div class="main">
+        <div>
+          <p class="item">
+            <span>申请标题：{{ detailParams.title }}</span>
+            <span>申请单号：{{ detailParams.applyNumber || "--" }}</span>
+            <span v-if="detailParams.applicationSystem">
+              应用系统：{{ detailParams.applicationSystem }}
+            </span>
+            <span v-else></span>
+          </p>
+          <p class="item">
+            <span>申请人信息：{{ detailParams.user }}</span>
+            <span>电话：{{ detailParams.phone }}</span>
+            <span>单位：{{ detailParams.unit }}</span>
+          </p>
+          <p v-if="detailParams.applicationScene.length > 0">
+            <span
+              >应用场景：{{ detailParams.applicationScene.join("；") }}</span
+            >
+          </p>
+          <p>
+            <span>应用背景：{{ detailParams.applicationBackground }}</span>
+          </p>
+          <p>
+            <span>期望效果：{{ detailParams.effectWish }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- 申请能力-->
+    <div class="bottoms" v-if="detailType == '能力使用'">
+      <div class="title">申请能力</div>
+      <div class="main">
+        <div
+          class="item"
+          v-for="(item, index) in this.showArr"
+          :key="item + index"
+        >
+          <div class="deptName">
+            <span class="img"></span>
+            <span>{{ item.name }}</span>
+          </div>
+          <div
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            "
+          ></div>
+          <div class="ability" v-for="val in item.list" :key="val.id">
+            <div class="box" v-if="item.list.length > 0">
+              <div class="right">
+                <div class="ability-top">
+                  <div class="name">
+                    <div class="name">
+                      <span class="channelName">{{ val.name }}</span>
+                    </div>
+                  </div>
+                  <div></div>
+                </div>
+                <div class="ability-bottom">
+                  <div class="dec">资源描述：{{ val.description }}</div>
+                  <div class="result">
+                    申请结果：{{
+                      item.ended ? item.approveStatus || "审核完成" : "审核中"
+                    }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!--审批详情-->
+    <div>
+      <div class="title">审批详情</div>
+      <div v-for="item in this.dataSource.data" :key="item">
+        <a-table :dataSource="item[1]" :columns="columns">
+          <template #bodyCell="{ column, text }">
+            <template v-if="column.dataIndex === 'name'">
+              <a>{{ text }}</a>
+            </template>
+          </template>
+        </a-table>
+      </div>
+    </div>
+    <!-- <div else>
+       gai
+     </div> -->
+  </el-dialog>
+</template>
+  
+<script>
+export default {
+  props: {
+    detailType: {
+      type: String,
+      default: "",
+    },
+    detailsVisible: {
+      type: Boolean,
+      default: false,
+    },
+    detailParamss: {
+      type: Object,
+      default: {},
+    },
+  },
+  watch: {
+    detailsVisible: {
+      handler(newVal) {
+        this.detailsVisibleCopy = newVal;
+      },
+      immediate: true,
+    },
+    detailParamss: {
+      handler(newVal) {
+        this.detailParams = newVal;
+        this.getDetail(newVal);
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      detailsVisibleCopy: false,
+      columns: [
+        {
+          title: "任务名称",
+          dataIndex: "activityName",
+          key: "activityName",
+        },
+        {
+          title: "处理人",
+          dataIndex: "assigneeName",
+          key: "assigneeName",
+        },
+        {
+          title: "任务开始时间",
+          dataIndex: "startTime",
+          key: "startTime",
+        },
+        {
+          title: "任务结束时间",
+          dataIndex: "endTime",
+          key: "endTime",
+        },
+        {
+          title: "审核意见",
+          dataIndex: "comment",
+          key: "comment",
+        },
+        {
+          title: "任务时长/秒",
+          dataIndex: "durationInSeconds",
+          key: "durationInSeconds",
+        },
+      ],
+      dataSource: [{ data: [] }],
+      showArr: [],
+    };
+  },
+  computed: {},
+  components: {},
+  methods: {
+    getDetail(newVal) {
+
+      if (newVal.resourceApplication) {
+        this.dataSource.data = [];
+        if (this.detailType == "能力上架") {
+          let arr = [];
+          newVal.resourceApplication.forEach((item) => {
+            arr.push(item);
+          });
+          this.dataSource.data.push([
+            newVal.resourceApplication.processInstanceId,
+            arr,
+          ]);
+        } else {
+          for (const key in newVal.resourceApplication) {
+            if (newVal.resourceApplication[key].length > 0) {
+              newVal.resourceApplication[key].map((item) => {
+                this.dataSource.data.push([
+                  item.instanceId,
+                  item.taskHandleDetailInfo,
+                ]);
+              });
+            }
+          }
+        }
+
+        this.showArr.value = [];
+        for (const key in newVal.resourceApplication) {
+          if (newVal.resourceApplication[key].length > 0) {
+            let obj = { name: "", instanceId: "", list: [], list2: [] };
+            obj.name = key;
+            newVal.resourceApplication[key].map((item) => {
+              obj.instanceId = item.instanceId;
+              obj.backToFirst = item.backToFirst;
+              obj.ended = item.ended;
+              obj.approveStatus = item.approveStatus;
+              if (item.resources.length > 0) {
+                item.resources.map((val) => {
+                  obj.list.push(val);
+                });
+              } else {
+                item.camera.map((val) => {
+                  obj.list2.push(val);
+                });
+              }
+            });
+
+            this.showArr.push(obj);
+          }
+        }
+      }
+    },
+    //   init () {
+    //     this.visible = true
+    //     this.$nextTick(() => {
+    //       this.$refs['dataForm'].resetFields()
+    //     })
+    //   },
+    closeModal() {
+      this.$emit("closeModal");
+    },
+  },
+};
+</script>
+<style scoped>
+.title {
+  font-size: 22px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 20px;
+  padding-left: 10px;
+  border-left: 6px #0058e1 solid;
+}
+
+.topss {
+  margin-bottom: 28px;
+
+  .main {
+    background: #eee;
+    padding: 28px 28px 28px;
+
+    p {
+      display: flex;
+      justify-content: space-between;
+
+      & > span {
+        width: 100%;
+      }
+
+      .enclosure {
+        width: 95%;
+        padding: 28px 28px 28px;
+        background: #ddd;
+        display: flex;
+        justify-content: space-between;
+        margin-top: 28px;
+      }
+
+      .btn:hover {
+        color: #0058e1;
+        cursor: pointer;
+      }
+    }
+
+    .item {
+      font-size: 16px;
+
+      span {
+        width: 50px;
+      }
+    }
+  }
+}
+
+.bottoms {
+  .main {
+    .item {
+      border-top: 1px #eee solid;
+
+      .deptName {
+        color: #0058e1;
+        font-size: 16px;
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+
+        .img {
+          width: 5px;
+          height: 5px;
+          border-radius: 5px;
+          background: #0058e1;
+          margin-right: 10px;
+        }
+      }
+
+      .oddNumbers {
+        margin: 10px 0 0 15px;
+      }
+
+      .box {
+        margin-left: 10px;
+
+        .ability {
+          height: 13px;
+          display: flex;
+          border-bottom: 1px #eee solid;
+          padding: 0.1rem 0;
+
+          .btn {
+            cursor: pointer;
+            color: #0087ff;
+            align-self: flex-end;
+            padding: 5px 10px;
+            border: 1px #0087ff solid;
+            border-radius: 2px;
+          }
+
+          .right {
+            flex: 1;
+            margin-left: 15px;
+
+            .ability-top {
+              width: 100%;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .name {
+                width: 6rem;
+                height: 0.2rem;
+                display: flex;
+
+                .channelName {
+                  max-width: 5rem;
+                  height: 20px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 1;
+                  -webkit-box-orient: vertical;
+                  word-break: break-all;
+                }
+
+                .type {
+                  background: #0087ff;
+                  color: #fff;
+                  line-height: 14px;
+                  padding: 2px 10px;
+                  border-radius: 10px;
+                  margin-left: 10px;
+                }
+              }
+            }
+
+            .ability-bottom {
+              margin-top: 15pxrem;
+
+              .dec {
+                width: 70px;
+                height: 44px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+              }
+
+              .dec2 {
+                width: 70px;
+                height: 22px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+              }
+
+              .result {
+                position: relative;
+              }
+            }
+          }
+
+          .DownloadAttachment {
+            position: absolute;
+            right: 10px;
+            top: -150px;
+          }
+
+          .DownloadAttachment2 {
+            position: absolute;
+            right: 10px;
+            top: -110px;
+          }
+        }
+
+        .clickCursor {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>
+  
\ No newline at end of file