合并版本

Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev
bug修复
2022-07-04 11:57:44 +08:00 · 2022-07-04 11:27:24 +08:00 · 2022-07-04 11:27:21 +08:00 · 2022-07-04 11:24:29 +08:00 · 2022-07-04 10:38:50 +08:00 · 2022-07-04 09:37:21 +08:00
146 changed files with 31685 additions and 4273 deletions
--- a/back/package-lock.json
+++ b/back/package-lock.json
--- a/back/package.json
+++ b/back/package.json
@ -22,6 +22,7 @@
    "carddragger": "^0.3.6",
    "clipboard": "^2.0.6",
    "core-js": "^3.6.5",
+    "crypto-js": "^4.1.1",
    "echarts": "^4.7.0",
    "element-ui": "^2.13.2",
    "file-saver": "^2.0.5",
--- a/back/public/index.html
+++ b/back/public/index.html
@ -1,8 +1,8 @@
 <!--
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-11 10:11:40
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-23 18:30:45
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-06-29 19:38:17
 * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@ -42,8 +42,9 @@
  <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
    <script>
      // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.166:8888/renren-admin';
-    window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
-    // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
+    // window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
+    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
+    window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
    // window.SITE_CONFIG['apiURL'] = 'http://15.2.23.141:8000/renren-admin';
    // WebSocket地址
    window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
--- a/back/src/assets/img/CapabilityOperationMonitoring/API-allNum.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/API-allNum.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/API-badNum.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/API-badNum.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/bg-blue.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/bg-blue.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/bg-yellow.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/bg-yellow.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/calendar.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/calendar.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-bule-bg.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-bule-bg.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-bule.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-bule.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-grenn-bg.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-grenn-bg.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-grenn.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-grenn.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-red-bg.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-red-bg.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/number-red.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/number-red.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/上一页.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/上一页.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/下一页.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/下一页.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/下拉.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/下拉.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/更多.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/更多.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/消息.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/消息.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/消息中心.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/消息中心.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/账号下拉.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/账号下拉.png
--- a/back/src/assets/img/CapabilityOperationMonitoring/选择.png
+++ b/back/src/assets/img/CapabilityOperationMonitoring/选择.png
--- a/back/src/assets/img/workBench/NO1.png
+++ b/back/src/assets/img/workBench/NO1.png
--- a/back/src/assets/img/workBench/NO2.png
+++ b/back/src/assets/img/workBench/NO2.png
--- a/back/src/assets/img/workBench/NO3.png
+++ b/back/src/assets/img/workBench/NO3.png
--- a/back/src/assets/img/workBench/hasToDo.png
+++ b/back/src/assets/img/workBench/hasToDo.png
--- a/back/src/assets/img/workBench/one.png
+++ b/back/src/assets/img/workBench/one.png
--- a/back/src/assets/img/workBench/publish.png
+++ b/back/src/assets/img/workBench/publish.png
--- a/back/src/assets/img/workBench/todo.png
+++ b/back/src/assets/img/workBench/todo.png
--- a/back/src/assets/img/workBench/two.png
+++ b/back/src/assets/img/workBench/two.png
--- a/back/src/assets/img/一级图标.png
+++ b/back/src/assets/img/一级图标.png
--- a/back/src/assets/img/排行榜背景图.png
+++ b/back/src/assets/img/排行榜背景图.png
--- a/back/src/assets/img/搜索.png
+++ b/back/src/assets/img/搜索.png
--- a/back/src/mixins/view-module.js
+++ b/back/src/mixins/view-module.js
@ -102,7 +102,7 @@ export default {
                return item
              }
            })
-            this.total = this.mixinViewModuleOptions.getDataListIsPage ? this.dataList.length : 0
+            this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
          })
        } else {
          this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
--- a/back/src/views/modules/ability/IntegratedServices.vue
+++ b/back/src/views/modules/ability/IntegratedServices.vue
@ -0,0 +1,450 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-ability__bsabilityai">
+      <el-form :inline="true" :model="dataForm">
+        <el-form-item>
+          <el-input
+            v-model="dataForm.name"
+            placeholder="名称"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList2(dataForm.name)">{{
+            $t("query")
+          }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="exportHandle()">{{
+            $t("export")
+          }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-if="$hasPermission('ability:bsabilityai:save')"
+            type="primary"
+            @click="addOrUpdateHandleServe()"
+            >挂接</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-if="$hasPermission('ability:bsabilityai:delete')"
+            type="danger"
+            @click="deleteHandle2()"
+            >{{ $t("deleteBatch") }}</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%"
+        :height="qp ? '810px' : '650px'"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="应用名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+
+        <el-table-column
+          v-for="(item, index) in dataList[0].infoList"
+          :key="index"
+          :label="item.attrType"
+          header-align="center"
+          align="center"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            {{ findValue(scope.row.infoList, item.attrType) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="94"
+          right="0"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-if="$hasPermission('ability:bsabilityai:update')"
+              type="text"
+              size="small"
+              @click="UpdateHandle(scope.row)"
+              >{{ $t("update") }}</el-button
+            >
+            <el-button
+              v-if="$hasPermission('ability:bsabilityai:delete')"
+              type="text"
+              size="small"
+              @click="deleteHandle2(scope.row.id)"
+              >{{ $t("delete") }}</el-button
+            >
+            <el-button type="text" size="small" @click="showDetail(scope.row)"
+              >展示</el-button
+            >
+            <el-button type="text" size="small" @click="showDocument(scope.row)"
+              >开发文档</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="applyAndAssembly(scope.row)"
+              >应用与组件</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="applyAndDataResource(scope.row)"
+              >应用与数据资源</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="applyAndProject(scope.row)"
+              >应用与项目</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="applyAndInfrastructure(scope.row)"
+              >应用与基础设施</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="Number(total)"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle"
+      >
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update
+        :disabled="disabled"
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
+      <relate-application
+        v-if="relateApplicationResourceVisible"
+        ref="relateApplication"
+        :relateInfo="relationData"
+        :nameArray="topNameArray"
+        @isShowRelatePopup="handleIsShowRelatePopupApply"
+      ></relate-application>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./bsabilityservice-add-or-update";
+import dictionaries from "@/utils/dictionaries";
+import RelateApplication from "./bsabilityai-relate-application.vue";
+import qs from "qs";
+import { type } from "os";
+export default {
+  mixins: [mixinViewModule],
+  data() {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: "/resource/page",
+        getDataListIsPage: true,
+        exportURL: "/ability/bsabilityai/export",
+        deleteURL: "/resource/delete",
+        deleteIsBatch: true,
+      },
+      disabled: false,
+      sceneArr: dictionaries.sceneArr,
+      fieldArr: dictionaries.fieldArr,
+      shareFormArr: dictionaries.shareFormArr,
+      dataForm: {
+        name: "",
+        creator: "",
+        selectType: 0,
+        delFlag: 0,
+        type: "应用资源",
+      },
+      qp: false,
+      relateApplicationResourceVisible: false,
+      relationData: {}, //打开穿梭框时传递的参数
+      topNameArray: [], //
+    };
+  },
+  watch: {},
+  components: {
+    AddOrUpdate,
+    RelateApplication,
+  },
+  created() {
+    this.dataForm.name = "";
+    this.dataForm.type = "应用资源";
+  },
+  mounted() {
+    window.addEventListener("resize", this.a);
+    this.fullScreen();
+  },
+  methods: {
+    reset() {
+      this.$http
+        .get(
+          this.mixinViewModuleOptions.getDataListURL +
+            "?" +
+            qs.stringify({
+              // order: this.order,
+              // orderField: this.orderField,
+              // type: '组件服务',
+              page: 1,
+              selectType: 0,
+              limit: 10,
+              delFlag: 0,
+              creator: "",
+              type: "应用资源",
+              name: "",
+            })
+        )
+        .then(({ data: res }) => {
+          this.dataForm.name = "";
+          if (res.code !== 0) {
+            this.dataList = [];
+            this.total = 0;
+            return this.$message.error(res.msg);
+          }
+          this.dataList = this.mixinViewModuleOptions.getDataListIsPage
+            ? res.data.list
+            : res.data;
+          this.total = this.mixinViewModuleOptions.getDataListIsPage
+            ? res.data.total
+            : 0;
+          if (this.mixinViewModuleOptions.requestCallback) {
+            this.mixinViewModuleOptions.requestCallback(res.data);
+          }
+          this.dataListLoading = false;
+        })
+        .catch(() => {
+          this.dataListLoading = false;
+        });
+    },
+    showDetail(val) {
+      this.addOrUpdateVisible = true;
+      this.disabled = false;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.UpdateState = false;
+        this.$refs.addOrUpdate.dataFormShowDetails = val;
+        this.$refs.addOrUpdate.init();
+      });
+      this.disabled = true;
+    },
+    showDocument(val) {
+      console.log(val);
+      window.open(
+        window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
+        "_blank"
+      );
+    },
+    findValue(list, type) {
+      const found = list.find((item) => item.attrType === type);
+      if (found) {
+        return found.attrValue;
+      } else {
+        return "暂无数据";
+      }
+    },
+    getDataList2(names) {
+      if (names != null) {
+        this.$http
+          .get(
+            this.mixinViewModuleOptions.getDataListURL +
+              "?" +
+              qs.stringify({
+                // order: this.order,
+                // orderField: this.orderField,
+                // type: '组件服务',
+                pageNum: 1,
+                pageSize: this.limit,
+                type: "应用资源",
+                creator: "",
+                selectType: 0,
+                delFlag: 0,
+                name: names,
+              })
+          )
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              this.dataList = [];
+              this.total = 0;
+              return this.$message.error(res.msg);
+            }
+            if (res.data.list.length !== 0) {
+              this.dataList = res.data.list;
+              this.total = this.mixinViewModuleOptions.getDataListIsPage
+                ? res.data.total
+                : 0;
+              if (this.mixinViewModuleOptions.requestCallback) {
+                this.mixinViewModuleOptions.requestCallback(res.data);
+              }
+              this.dataListLoading = false;
+            } else {
+              this.$message.error("未查询到相关信息");
+              this.reset();
+            }
+          })
+          .catch(() => {
+            this.dataListLoading = false;
+          });
+      } else {
+        this.$message.error("查询不能输入为空");
+      }
+    },
+    fullScreen() {
+      if (window.outerHeight === screen.availHeight) {
+        if (window.outerWidth === screen.availWidth) {
+          console.log(
+            "全屏1",
+            window.outerHeight,
+            screen.availHeight,
+            window.outerWidth,
+            screen.availWidth
+          );
+          this.qp = false;
+        } else {
+          console.log(
+            "不是全屏2",
+            window.outerHeight,
+            screen.availHeight,
+            window.outerWidth,
+            screen.availWidth
+          );
+          this.qp = true;
+        }
+      } else {
+        console.log(
+          "不是全屏3",
+          window.outerHeight,
+          screen.availHeight,
+          window.outerWidth,
+          screen.availWidth
+        );
+        this.qp = true;
+      }
+    },
+    //应用与组件
+    applyAndAssembly(val) {
+      console.log("vvvv", val);
+      //根据id和类型查询已关联的组件，将id,type和查出来的数据传递给组件
+      let type = "组件服务";
+      let id = val.id;
+      this.$http
+        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
+          params: {
+            keyId: id,
+            type: type,
+            referenceName: "",
+          },
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          console.log("rrrrressssz", res.data);
+          this.relateApplicationResourceVisible = true;
+          this.relationData = {
+            id: id,
+            linkType: "1",
+            responseData: res.data,
+          };
+          this.topNameArray = ["未关联组件名称", "已关联组件名称"];
+          console.log(" this.relationData", this.relationData);
+          //将数据传递给引入的组件
+        });
+    },
+    //应用与数据资源
+    applyAndDataResource(val) {
+      console.log("数据资源");
+    },
+    //应用与项目
+    applyAndProject(val) {
+      let type = "项目";
+      let id = val.id;
+      this.$http
+        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
+          params: {
+            keyId: id,
+            type: type,
+            referenceName: "",
+          },
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          console.log("rrrrressssx", res.data);
+          this.relateApplicationResourceVisible = true;
+          this.relationData = {
+            id: id,
+            linkType: "1",
+            responseData: res.data,
+          };
+          this.topNameArray = ["未关联项目名称", "已关联项目名称"];
+          //将数据传递给引入的组件
+        });
+    },
+    //应用与基础设施
+    applyAndInfrastructure(val) {
+      let type = "基础设施";
+      let id = val.id;
+      this.$http
+        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
+          params: {
+            keyId: id,
+            type: type,
+            referenceName: "",
+          },
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          console.log("rrrrressssj", res.data);
+          this.relateApplicationResourceVisible = true;
+          this.relationData = {
+            id: id,
+            linkType: "1",
+            responseData: res.data,
+          };
+          this.topNameArray = ["未关联基础设施名称", "已关联基础设施名称"];
+          //将数据传递给引入的组件
+        });
+    },
+    // 是否展示关联应用弹窗
+    handleIsShowRelatePopupApply(type) {
+      this.relateApplicationResourceVisible = type;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.el-tooltip__popper {
+  max-width: 50%;
+}
+</style>
--- a/back/src/views/modules/ability/bsdataresources.vue
+++ b/back/src/views/modules/ability/bsdataresources.vue
@ -20,8 +20,8 @@
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-        <el-table-column prop="orderId" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="productName" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="productName" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="orderId" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="payAmount" :label="$t('dataresources.resourcesProvide')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="status" :label="$t('dataresources.resourcesAbstract')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="payAt" :label="$t('dataresources.putOnDate')" header-align="center" align="center"></el-table-column>
@ -50,8 +50,8 @@
 <script>
 import mixinViewModule from '@/mixins/view-module'
 // import AddOrUpdate from './order-add-or-update'
-import {addDynamicRoute} from "@/router";
-import RelateApplication from "./bsabilityai-relate-application.vue"
+import { addDynamicRoute } from '@/router'
+import RelateApplication from './bsabilityai-relate-application.vue'

 export default {
  mixins: [mixinViewModule],
@ -79,31 +79,31 @@ export default {
  },
  components: {
    // AddOrUpdate,
-    RelateApplication,
+    RelateApplication
  },
  methods: {
    // 重置
    resetDataList () {
-        this.dataForm=this.noDataForm;
-        this.page=1;                    // 当前页码
-        this.query();
+      this.dataForm = this.noDataForm
+      this.page = 1 // 当前页码
+      this.query()
    },
    // 点击关联应用按钮
    showRelateApplication (row) {
      this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
        if (res && res.data) {
-          this.relateApplicationVisible = true;
+          this.relateApplicationVisible = true
          this.relateInfo = {
            id: row.id,
            responseData: res.data,
            linkType: '2'
-          };
+          }
        }
      }).catch(() => { })
    },
    // 是否展示关联应用弹窗
    handleIsShowRelatePopup (type) {
-      this.relateApplicationVisible = type;
+      this.relateApplicationVisible = type
    }
  }
 }
--- a/back/src/views/modules/ability/bsinfrastructure.vue
+++ b/back/src/views/modules/ability/bsinfrastructure.vue
@ -46,8 +46,8 @@
 <script>
 import mixinViewModule from '@/mixins/view-module'
 // import AddOrUpdate from './order-add-or-update'
-import {addDynamicRoute} from "@/router";
-import RelateApplication from "./bsabilityai-relate-application.vue"
+import { addDynamicRoute } from '@/router'
+import RelateApplication from './bsabilityai-relate-application.vue'
 export default {
  mixins: [mixinViewModule],
  data () {
@ -62,7 +62,7 @@ export default {
        orderId: '',
        status: '',
        userId: '',
-        type: "基础设施",
+        type: '基础设施'
      },
      // 关联应用弹窗
      relateApplicationVisible: false,
@ -75,31 +75,31 @@ export default {
  },
  components: {
    // AddOrUpdate,
-    RelateApplication,
+    RelateApplication
  },
  methods: {
    // 重置
    resetDataList () {
-        this.dataForm=this.noDataForm;
-        this.page=1;                    // 当前页码
-        this.query();
+      this.dataForm.orderId = ''
+      this.page = 1 // 当前页码
+      this.query()
    },
    // 点击关联应用按钮
    showRelateApplication (row) {
      this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
        if (res && res.data) {
-          this.relateApplicationVisible = true;
+          this.relateApplicationVisible = true
          this.relateInfo = {
            id: row.id,
            responseData: res.data,
            linkType: '2'
-          };
+          }
        }
      }).catch(() => { })
    },
    // 是否展示关联应用弹窗
    handleIsShowRelatePopup (type) {
-      this.relateApplicationVisible = type;
+      this.relateApplicationVisible = type
    }

  }
--- a/back/src/views/modules/abilityStatistics/applicationResources.vue
+++ b/back/src/views/modules/abilityStatistics/applicationResources.vue
@ -1,7 +1,11 @@
 <template>
    <div class='container'>
+        <div>
            <span class='title-style'>应用资源</span>
            <span class='page-introduction'>发布情况统计</span>
+            <button class='back-btn' @click="backBtn">返回</button>
+        </div>
+        
        <div class='container-body'>
            <div class='container-body1'>
                <span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span>
@ -57,31 +61,215 @@
 import * as echarts from 'echarts';

 export default {
+      props:{
+        tableId:{
+            type:String,
+            default:''
+        },
+        fatherId:{
+            type:Number,
+            default:null,
+        }
+    },
    data(){
        return{
+            data2:[],
+            data3:[],
+            data4:[],
+            data5:[],
+            data6:[],
+            data7:[],
+            data8:[],
+            data9:[],
+            data10:[],
+            data11:[],
            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},],

        }
+    },
+    created(){
+        this.getDistributedList()
+        this.getUsedList()
+        this.getTopList()
+        this.getApplicationDistribution()
+        this.getFieldDistribution()
+        this.getStatuesDistribution()
    },
     mounted(){
+        
        this.myEcharts1()
-        this.myEcharts2()
-        this.myEcharts3()
-        this.myEcharts4()
-        this.myEcharts6()
-        this.myEcharts7()
-        this.myEcharts8()
-        this.myEcharts9()
+        // this.myEcharts2()
+        // this.myEcharts3()
+        // this.myEcharts4()
+        // this.myEcharts6()
+        // this.myEcharts7()
+        // this.myEcharts8()
+        // this.myEcharts9()
  },
  methods:{
+      // 应用贡献组件数量分布（算法、图层、开发、业务）
+            getDistributedList () {               
+            this.$http.get('/census/center/v3/assemblerUseProjectInfo/' ,{
+                  params : {
+                    keyId:'1522550195034857476'
+                    // this.tableId
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.num,
+                        name:item.attr_value
+                    }
+                   this.data2.push(single)
+                   this.data5.push(single.value)
+                   this.data6.push(single.name)
+                   this.myEcharts2()
+                   this.myEcharts4()
+               })             
+            
+            })
+            },
+      // 应用贡献组件分别被多少应用使用
+            getUsedList () {               
+            this.$http.get('/census/center/v3/applicationUsedCapabilityNum/' ,{
+                  params : {
+                    id:
+                    // '1522550195034857476'
+                    this.tableId
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.useNum,
+                        name:item.name
+                    }
+                   this.data3.push(single.name)
+                   this.data4.push(single.value)
+                   console.log("2222", this.data3);
+                   this.myEcharts3()
+               })             
+            
+            })
+            },
+            //评分分布12345
+            getTopList () {               
+            this.$http.get('/census/center/v3/assemblerScoreInfo/' ,{
+                  params : {
+                    id:this.tableId,
+                    // '1067246875800000066',
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.scoreNum,
+                        name:item.score
+                    }
+                   this.data8.push(single)
+                   this.myEcharts6()
+               })             
+            
+            })
+            },
+             //发布端应用分布情况
+            getApplicationDistribution() {               
+            this.$http.get('/census/center/v3/applicationReleaseCapabilitySet/' ,{
+                  params : {
+                    id:
+                    // '1067246875800000066',
+                    this.tableId,
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.num,
+                        name:item.publisher
+                    }
+                   this.data7.push(single)
+                   this.myEcharts7()
+               })             
+            
+            })
+            },
+             //应用领域分布情况
+            getFieldDistribution() {               
+            this.$http.get('/census/center/v3/applicationAreaCapabilityList/' ,{
+                  params : {
+                    id:
+                    // '1067246875800000066',
+                    this.tableId,
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.total,
+                        name:item.type
+                    }
+                   this.data9.push(single)
+                   this.myEcharts8()
+               })             
+            
+            })
+            },
+             //应用状态分布情况
+            getStatuesDistribution() {               
+            this.$http.get('/census/center/v3/applicationStateCapabilitySet/' ,{
+                  params : {
+                    id:
+                    // '1067246875800000066',
+                    this.tableId,
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.num,
+                        name:item.state
+                    }
+                   this.data10.push(single)
+                   this.myEcharts9()
+               })             
+            
+            })
+            },
    myEcharts1(){
        var chartDom = document.getElementById('main1');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
+            tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
+                trigger: 'axis',
+                backgroundColor: 'rgba(32, 33, 36,.7)',
+                borderColor: 'rgba(32, 33, 36,0.20)',
+                borderWidth: 1,
+                textStyle: { // 文字提示样式
+                color: '#fff',
+                fontSize: '12'
+                },
+                axisPointer: { // 坐标轴虚线
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+                },
+            },
            grid: {		       
 		        bottom: '23%',
 		    },
@ -98,7 +286,7 @@ export default {
            },
            axisLine:{
                lineStyle:{
-                    color:"#ebebeb"
+                    color:"#f5f5f5"
                }
            },
            axisLabel: {//y轴文字的配置
@ -134,10 +322,24 @@ export default {
        },
        series: [
             {
+           data: [5, 5, 5, 5, 5, 5],
+            type: 'bar',
+            barWidth: 14,
+            stack: '1',
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0)' }
+                ])
+            },
+            },
+            {
           data: [60, 90, 50, 80],
            type: 'bar',
            barWidth: 14,
-           
+            stack: '1',
            itemStyle: {
                barBorderRadius: [20,20,20,20],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -217,12 +419,7 @@ export default {
            labelLine: {
                show: false
            },
-            data: [
-                { value: 1048, name: '算法' },
-                { value: 735, name: '图层' },
-                { value: 580, name: '开发' },
-                { value: 484, name: '业务' },
-            ]
+            data:this.data2
            }
        ]
        };
@ -234,12 +431,29 @@ export default {
        var myChart = echarts.init(chartDom);
        var option;
        option = {
+            tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
+                trigger: 'axis',
+                backgroundColor: 'rgba(32, 33, 36,.7)',
+                borderColor: 'rgba(32, 33, 36,0.20)',
+                borderWidth: 1,
+                textStyle: { // 文字提示样式
+                color: '#fff',
+                fontSize: '12'
+                },
+                axisPointer: { // 坐标轴虚线
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+                },
+            },
            grid: {		       
 		        bottom: '23%',
 		    },
        xAxis: {
            type: 'category',
-            data: ['算法', '图层', '开发', '业务'],
+            data:this.data3,
+            fontSize:12,
            color:['#f5f5f5'],
            axisTick:{
              show:false,//不显示坐标轴刻度线
@ -254,8 +468,17 @@ export default {
                }
            },
            axisLabel: {//x轴文字的配置
+            formatter: val => {
+          let txt = val
+          if (val.length > 3) {
+            txt = val.substr(0, 3) + '...'
+          }
+          return txt
+            },
                textStyle: {
                     color: "#999999",//x轴内容文字颜色
+                     
+
                },
        },
        },
@ -286,10 +509,24 @@ export default {
        },
        series: [
             {
-           data: [60, 90, 50, 80],
+            data: [1, 1, 1, 1, 1, 1],
            type: 'bar',
            barWidth: 14,
-           
+            stack: '1',
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0)' }
+                ])
+            },
+            },
+            {
+           data: this.data4,
+            type: 'bar',
+            barWidth: 14,
+            stack: '1',
            itemStyle: {
                barBorderRadius: [20,20,20,20],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -315,10 +552,10 @@ export default {
 		    },
        xAxis: {
            type: 'category',
-            data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
+            data:this.data6,
            color:['#f5f5f5'],
-            axisTick:{
-              show:false,//不显示坐标轴刻度线
+            axisTick: {    // 坐标轴 刻度
+                show: false,  // 是否显示
                },
            splitLine: {
              show: true,
@ -362,10 +599,24 @@ export default {
        },
        series: [
            {
-           data: [60, 90, 50, 80, 50, 80],
+           data: [5, 5, 5, 5, 5, 5],
            type: 'bar',
            barWidth: 14,
-           
+            stack: '1',
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0)' }
+                ])
+            },
+            },
+             {
+           data:this.data5,
+            type: 'bar',
+            barWidth: 14,
+            stack: '1',
            itemStyle: {
                barBorderRadius: [20,20,20,20],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -374,7 +625,7 @@ export default {
                { offset: 1, color: 'rgba(82, 106, 255,0.8)' }
                ])
            },
-            }
+            },
        ]
        };

@ -444,13 +695,7 @@ export default {
            labelLine: {
                show: false
            },
-            data: [
-                { value: 1048, name: '1分' },
-                { value: 735, name: '2分' },
-                { value: 580, name: '3分' },
-                { value: 484, name: '4分' },
-                { value: 300, name: '5分' }
-            ]
+            data:this.data8
            }
        ]
        };
@ -522,13 +767,14 @@ export default {
            labelLine: {
                show: false
            },
-            data: [
-                { value: 1048, name: '应用名称1' },
-                { value: 735, name: '应用名称2' },
-                { value: 580, name: '应用名称3' },
-                { value: 484, name: '应用名称4' },
-                { value: 300, name: '应用名称5' }
-            ]
+            data:this.data7
+            //  [
+            //     { value: 1048, name: '应用名称1' },
+            //     { value: 735, name: '应用名称2' },
+            //     { value: 580, name: '应用名称3' },
+            //     { value: 484, name: '应用名称4' },
+            //     { value: 300, name: '应用名称5' }
+            // ]
            }
        ]
        };
@ -544,7 +790,7 @@ export default {
                    trigger: 'item'
                },
                legend: {
-            orient: '',
+                   orient: "vertical",   type: 'scroll',
                    top: '14%',
                    left: '40%',
                    width:"auto",
@ -565,12 +811,28 @@ export default {
                    }
                    var v = tarValue;
                    var p = Math.round(((tarValue / total) * 100));
-            return `${name}  ${p}%`;
+                    return `{a|${name}}  {b|${p}%}`;
                },
                itemStyle:{},
                textStyle: {
                    color: "#666666",
                    fontSize:12,
+                      rich: {
+              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
+                    a: {
+                        // 设置文字、数学、英语这一列的样式
+                        width: 80,
+                        color: "#000000",
+                        fontSize: 12,
+                        fontWeight: "bolder",
+                    },
+                    b: {
+                        // 设置10分、20分、30分这一列的样式
+                        width: 35,
+                        color: "#333",
+                        fontSize: 12,
+                    },
+                },
                    padding:[0,8,0,10]
                },
                },
@ -600,13 +862,14 @@ export default {
                    labelLine: {
                        show: false
                    },
-            data: [
-                { value: 1048, name: '应用领域1' },
-                { value: 735, name: '应用领域2' },
-                { value: 580, name: '应用领域3' },
-                { value: 484, name: '应用领域4' },
-                { value: 300, name: '应用领域5' }
-            ]
+                    data:this.data9
+                    //  [
+                    //     { value: 1048, name: '应用领域1' },
+                    //     { value: 735, name: '应用领域2' },
+                    //     { value: 580, name: '应用领域3' },
+                    //     { value: 484, name: '应用领域4' },
+                    //     { value: 300, name: '应用领域5' }
+                    // ]
                    }
                ]
                };
@ -678,19 +941,23 @@ export default {
                    labelLine: {
                        show: false
                    },
-            data: [
-                { value: 1048, name: '应用状态1' },
-                { value: 735, name: '应用状态2' },
-                { value: 580, name: '应用状态3' },
-                { value: 484, name: '应用状态4' },
-                { value: 300, name: '应用状态5' }
-            ]
+                    data:this.data10
+                    //  [
+                    //     { value: 1048, name: '应用状态1' },
+                    //     { value: 735, name: '应用状态2' },
+                    //     { value: 580, name: '应用状态3' },
+                    //     { value: 484, name: '应用状态4' },
+                    //     { value: 300, name: '应用状态5' }
+                    // ]
                    }
                ]
                };

                option && myChart.setOption(option);
                    },
+             backBtn(){
+            this.$emit('closeApplication')
+        }
    }
 }
 </script>
@ -698,6 +965,8 @@ export default {
 <style scoped>
 .container{
    padding-top: 15px;
+    display: flex;
+    flex-direction: column;
 }
    .title-style{
        font-size: 24px;
@ -708,6 +977,13 @@ export default {
        font-size: 18px;
        color:#666666;
        margin-left: 20px;
+    }
+     .back-btn{
+        background: #3e8ef7;
+        border-color: rgba(101, 165, 249,0);
+        color: #FFF;
+        margin-left:1030px;
+        padding-bottom: 3px;
    }
    .container-body{
        width:1300px;
--- a/back/src/views/modules/abilityStatistics/componentServices.vue
+++ b/back/src/views/modules/abilityStatistics/componentServices.vue
@ -1,7 +1,11 @@
 <template>
    <div class='container'>
+        <div>
            <span class='title-style'>组件服务</span>
            <span class='page-introduction'>发布情况统计</span>
+            <button class='back-btn' @click="backBtn">返回</button>
+        </div>
+        
        <div class='container-body'>
            <div class='container-body1'>
                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
@ -26,7 +30,7 @@
                            <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>
+                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
                    </div>
                </div>
            </div>
@ -41,7 +45,7 @@
                            <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>
+                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
                    </div>
                </div>
            </div>
@ -57,21 +61,153 @@
 import * as echarts from 'echarts';

 export default {
+    props:{
+        tableId:{
+            type:String,
+            default:''
+        },
+        fatherId:{
+            type:Number,
+            default:null,
+        }
+    },
    data(){
        return{
+            data1:[],
+             data2: [
+                // { value: 1048,name: '算法' },
+                // { value: 735, name: '图层' },
+                // { nums: 580, attr_value: '开发' },
+                // { nums: 484, attr_value: '业务' },
+            ],
+              data3: [
+                // { value: 1048,name: '算法' },
+            ],
            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},]
+            usedList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},],
+            applicationList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},]
        }
    },
+    created(){
+        if(this.fatherId===1){
+            this.getBeCalled()
+            this.getBeApplied()
+            this.getAlgorithm()
+            this.getDistributed()
+            this.getScoreList()
+        }else{
+
+        }
+       
+    },
    mounted(){
-        this.myEcharts1()
-        this.myEcharts2()
-        this.myEcharts3()
+        
+       
    },
   methods:{
+      // 评分发布情况
+        getScoreList () {               
+            this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
+                  params : {
+                   id:this.tableId,
+                   resourceType:"应用资源"
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{
+                    
+                    const single={
+                        value:item.scoreNum,
+                        name:item.score
+                    }
+                    // const newList=[]
+                   this.data1.push(single)
+                    // this.data2=newList
+                    this.myEcharts1()
+               })             
+            })            
+            
+            },
+      // 算法图层开发业务
+        getAlgorithm () {               
+            this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
+                  params : {
+                   id:this.tableId,
+                   resourceType:"组件服务"
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{
+                    
+                    const single={
+                        value:item.nums,
+                        name:item.attr_value
+                    }
+                    // const newList=[]
+                   this.data2.push(single)
+                    // this.data2=newList
+                    this.myEcharts2()
+               })             
+            })            
+            
+            },
+             // 应用领域分布
+        getDistributed () {               
+            this.$http.get('/census/center/v3/applicationAreaCapabilityList' ,{
+                  params : {
+                  id:this.tableId,
+                   resourceType:"应用资源"
+                    }                    
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.total,
+                        name:item.type
+                    }
+                    const newList=[]
+                    this.data3.push(single)
+                    // this.data2=newList
+                    this.myEcharts3()
+               })             
+            })            
+            
+            },
+     // 被调用组件及数量
+        getBeCalled () {               
+            this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
+                  params : {
+                  id:this.tableId,
+                   resourceType:"应用资源"
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                this.applicationList =res.data.data
+            })
+            },
+        // 被申请组件及数量
+        getBeApplied () {               
+            this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
+                  params : {
+                   id:this.tableId,
+                   resourceType:"应用资源"
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                this.applicationList =res.data.data
+            })
+            },
        myEcharts1(){
            var chartDom = document.getElementById('main1');
            var myChart = echarts.init(chartDom);
@ -101,7 +237,7 @@ export default {
                }
                }
                var v = tarValue;
-            var p = Math.round(((tarValue / total) * 100));
+                var p = Math.round(((v / total) * 100));
                return `${name}            ${p}%`;
            },
            itemStyle:{},
@ -126,23 +262,10 @@ export default {
                    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分' }
-            ]
+                data: this.data1
                }
            ]
            };
@ -204,22 +327,10 @@ export default {
                    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: '业务' },
-            ]
+                data: this.data2
                }
            ]
            };
@ -235,7 +346,7 @@ export default {
                trigger: 'item'
            },
            legend: {
-            orient: '',
+               orient: "vertical",   type: 'scroll',
                top: '22%',
                left: '50%',
                width:"auto",
@ -243,6 +354,7 @@ export default {
                orient: "vertical",
                itemGap: 15,
                itemWidth: 14,
+                
                    // 使用回调函数
                formatter: function(name) {
                    var data = option.series[0].data;
@ -256,11 +368,28 @@ export default {
                    }
                    var v = tarValue;
                    var p = Math.round(((tarValue / total) * 100));
-            return `${name}         ${p}%`;
+                    return `{a|${name}}  {b|${p}%}`;
                },
                itemStyle:{},
                textStyle: {
+                      rich: {
+              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
+                    a: {
+                        // 设置文字、数学、英语这一列的样式
+                        width: 100,
+                        color: "#000000",
+                        fontSize: 12,
+                        fontWeight: "bolder",
+                    },
+                    b: {
+                        // 设置10分、20分、30分这一列的样式
+                        width: 35,
+                        color: "#333",
+                        fontSize: 12,
+                    },
+                },
                    color: "#666666",
+                    backgroundColor: "transparent", 
                    padding:[0,8,0,18]
                },
            },
@ -291,17 +420,15 @@ export default {
                labelLine: {
                    show: false
                },
-            data: [
-                { value: 1048, name: '应用领域' },
-                { value: 735, name: '应用领域2' },
-                { value: 580, name: '应用领域3' },
-                { value: 484, name: '应用领域4' },
-            ]
+                data:this.data3
                }
            ]
            };

            option && myChart.setOption(option);
+                },
+        backBtn(){
+            this.$emit('closeChild')
        }
   }
 }
@ -309,6 +436,8 @@ export default {
 <style scoped>
 .container{
    padding-top: 15px;
+    display: flex;
+    flex-direction: column;
 }
    .title-style{
        font-size: 24px;
@ -320,6 +449,13 @@ export default {
        color:#666666;
        margin-left: 20px;
    }
+    .back-btn{
+        background: #3e8ef7;
+        border-color: rgba(101, 165, 249,0);
+        color: #FFF;
+        margin-left:1030px;
+        padding-bottom: 3px;
+    }
    .container-body{
        width:1300px;
        margin-top:30px;
@ -358,6 +494,9 @@ export default {
        padding-left: 20px;
        margin-top: 20px;
        margin-right: 20px;
+        background-image:url("../../../assets/img/排行榜背景图.png"); 
+        background-repeat:no-repeat;
+        background-size: 100% 100%;
    }
    .container-body5{
        width:640px;
@ -366,6 +505,9 @@ export default {
        padding-top:20px;
        padding-left: 20px;
        margin-top: 20px;
+        background-image:url("../../../assets/img/排行榜背景图.png"); 
+        background-repeat:no-repeat;
+        background-size: 100% 100%;
    }
    .footer{
        display: flex;
--- a/back/src/views/modules/abilityStatistics/componentUsed.vue
+++ b/back/src/views/modules/abilityStatistics/componentUsed.vue
@ -0,0 +1,557 @@
+<template>
+    <div class='container'>
+        <div>
+            <span class='title-style'>组件服务</span>
+            <span class='page-introduction'>使用情况统计</span>
+            <button class='back-btn' @click="backBtn">返回</button>
+        </div>
+        
+        <div class='container-body'>
+            <!-- <div class='container-body1'>
+                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
+                <div id="main1" style="width: 400px;height:200px;"></div>
+            </div> -->
+            <div class='container-body2'>
+                <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>
+                <div id="main8" style="width: 400px;height:200px;"></div>
+            </div>
+             <div class='container-body4'>
+                <div style='margin-bottom:30px'>
+                     <span style='font-size:18px;color;#000000;'>Top5使用组件</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.useNum}}</span>
+                    </div>
+                </div>
+            </div>
+             <div class='container-body5'>
+                <div style='margin-bottom:30px'>
+                     <span style='font-size:18px;color;#000000;'>使用组件评分Top5</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.score}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class='footer'>
+            <div class='footer-left' ></div>
+            <span style='color:#b7c2d1;font-size:16px'>到底啦</span>
+            <div class='footer-right'></div>
+            </div>
+    </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+
+export default {
+    props:{
+        tableId:{
+            type:String,
+            default:''
+        },
+        fatherId:{
+            type:Number,
+            default:null,
+        }
+    },
+    data(){
+        return{
+            data1:[],
+             data2: [
+                // { value: 1048,name: '算法' },
+                // { value: 735, name: '图层' },
+                // { nums: 580, attr_value: '开发' },
+                // { nums: 484, attr_value: '业务' },
+            ],
+              data3: [
+                // { value: 1048,name: '算法' },
+            ],
+            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:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称四',useNum:111},{name:'组件名称五',useNum:111},],
+            applicationList:[{name:'组件名称一',score:111},{name:'组件名称一',score:111},{name:'组件名称一',score:111},{name:'组件名称四',score:111},{name:'组件名称五',score:111},]
+        }
+    },
+    created(){
+        if(this.fatherId===1){
+            this.getBeCalled()
+            this.getBeApplied()
+            this.getAlgorithm()
+            this.getDistributed()
+            this.getScoreList()
+        }else{
+
+        }
+       
+    },
+    mounted(){
+        
+       
+    },
+   methods:{
+      // 评分发布情况
+        getScoreList () {               
+            this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
+                  params : {
+                   id:this.tableId,
+                   resourceType:"应用资源"
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{
+                    
+                    const single={
+                        value:item.scoreNum,
+                        name:item.score
+                    }
+                    // const newList=[]
+                   this.data1.push(single)
+                    // this.data2=newList
+                    this.myEcharts1()
+               })             
+            })            
+            
+            },
+      // 算法图层开发业务
+        getAlgorithm () {               
+            this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
+                  params : {
+                   id:this.tableId,
+                   resourceType:"组件服务"
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{
+                    
+                    const single={
+                        value:item.nums,
+                        name:item.attr_value
+                    }
+                    // const newList=[]
+                   this.data2.push(single)
+                    // this.data2=newList
+                    this.myEcharts2()
+               })             
+            })            
+            
+            },
+             // 应用领域分布
+        getDistributed () {               
+            this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList' ,{
+                  params : {
+                  id:this.tableId,
+                   resourceType:"组件服务"
+                    }                    
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.total,
+                        name:item.type
+                    }
+                    const newList=[]
+                    this.data3.push(single)
+                    // this.data2=newList
+                    this.myEcharts3()
+               })             
+            })            
+            
+            },
+     // top5使用组件
+        getBeCalled () {               
+            this.$http.get('/census/center/v3/assemblerUseTopInfo' ,{
+                  params : {
+                  id:this.tableId,
+                   resourceType:"组件服务"
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                this.usedList =res.data.data
+            })
+            },
+        // 使用组件评分5
+        getBeApplied () {               
+            this.$http.get('/census/center/v3/assemblerUseScoreTopInfo' ,{
+                  params : {
+                   id:this.tableId,
+                   resourceType:"应用资源"
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                this.applicationList =res.data.data
+            })
+            },
+        myEcharts1(){
+            var chartDom = document.getElementById('main1');
+            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(((v / 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'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: this.data1
+                }
+            ]
+            };
+
+            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'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: this.data2
+                }
+            ]
+            };
+
+            option && myChart.setOption(option);
+                },
+        myEcharts3(){
+            var chartDom = document.getElementById('main3');
+            var myChart = echarts.init(chartDom);
+            var option;
+            option = {
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+               orient: "vertical",   type: 'scroll',
+                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 `{a|${name}}  {b|${p}%}`;
+                },
+                itemStyle:{},
+                textStyle: {
+                      rich: {
+              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
+                    a: {
+                        // 设置文字、数学、英语这一列的样式
+                        width: 100,
+                        color: "#000000",
+                        fontSize: 12,
+                        fontWeight: "bolder",
+                    },
+                    b: {
+                        // 设置10分、20分、30分这一列的样式
+                        width: 35,
+                        color: "#333",
+                        fontSize: 12,
+                    },
+                },
+                    color: "#666666",
+                    backgroundColor: "transparent", 
+                    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:this.data3
+                }
+            ]
+            };
+
+            option && myChart.setOption(option);
+                },
+        backBtn(){
+            this.$emit('closeChild')
+        }
+   }
+}
+</script>
+<style scoped>
+.container{
+    padding-top: 15px;
+    display: flex;
+    flex-direction: column;
+}
+    .title-style{
+        font-size: 24px;
+        color:#000000;
+        font-weight: bold;
+    }
+    .page-introduction{
+        font-size: 18px;
+        color:#666666;
+        margin-left: 20px;
+    }
+    .back-btn{
+        background: #3e8ef7;
+        border-color: rgba(101, 165, 249,0);
+        color: #FFF;
+        margin-left:1030px;
+        padding-bottom: 3px;
+    }
+    .container-body{
+        width:1300px;
+        margin-top:30px;
+        display: flex;
+        flex-wrap:wrap
+    }
+    .container-body1{
+        width:420px;
+        height:250px;
+        background-color: #ffffff;
+        margin-right:20px;
+        padding-top:20px;
+        padding-left: 20px;
+        
+    }
+    .container-body2{
+        width:640px;
+        height:250px;
+        background-color: #ffffff;
+        margin-right:20px;
+        padding-top:20px;
+        padding-left: 20px;
+    }
+    .container-body3{
+        width:640px;
+        height:250px;
+        background-color: #ffffff;
+        padding-top:20px;
+        padding-left: 20px;
+    }
+    .container-body4{
+        width:640px;
+        height:300px;
+        background-color: #ffffff;
+        padding-top:20px;
+        padding-left: 20px;
+        margin-top: 20px;
+        margin-right: 20px;
+        background-image:url("../../../assets/img/排行榜背景图.png"); 
+        background-repeat:no-repeat;
+        background-size: 100% 100%;
+    }
+    .container-body5{
+        width:640px;
+        height:300px;
+        background-color: #ffffff;
+        padding-top:20px;
+        padding-left: 20px;
+        margin-top: 20px;
+        background-image:url("../../../assets/img/排行榜背景图.png"); 
+        background-repeat:no-repeat;
+        background-size: 100% 100%;
+    }
+    .footer{
+        display: flex;
+        margin-top:50px;
+        margin-left:365px;
+    }
+    .footer-left{
+        width:250px;
+        height:1px;
+        background-color:#e0eaf8;
+        margin-right:10px;
+        margin-top:8px
+    }
+    .footer-right{
+        width:250px;
+        height:1px;
+        background-color:#e0eaf8;
+        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>
--- a/back/src/views/modules/abilityStatistics/index.vue
+++ b/back/src/views/modules/abilityStatistics/index.vue
@ -1,5 +1,27 @@
 <template>
 <div >
+    <div class='container'>
+         <!-- <div class='container-left'  v-if='homeIsShow'>
+        <div class='left-search'>
+            <div>
+                <input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
+                <div class='input-search'  @click='searchBtn'>
+                    <img src="@/assets/img/搜索.png" style='margin-top:7px;margin-left:16px' >
+                </div>
+            </div>
+        </div>
+        <el-tree
+            class='tree-style'
+            :data="treeData"
+            :props="defaultProps"
+            accordion
+            @node-click="handleNodeClick">
+           <span slot-scope="{ node }" class='tree-text-style'>
+                <img  src="@/assets/img/一级图标.png" style="width: 16px; height: 16px" />
+                {{ node.label }}
+           </span>
+        </el-tree>
+         </div> -->
     <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>        
    <div class="mod-demand__bsdemand">
        <div class='top-box'>
@ -14,7 +36,7 @@
            <span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
                部门发布情况
            </span>
-            <span :class="[departmentId===2?'departmentStyle':'']"  @click="handleChose(2)">
+            <span v-if='this.choseId===0' :class="[departmentId===2?'departmentStyle':'']"  @click="handleChose(2)">
                部门使用情况
            </span>           
         </div>
@ -24,50 +46,60 @@
            border
            style="width: 100%">
        <el-table-column
-            prop="name"
+            prop="deptName"
            label="部门名称"
            min-width="100%">
        </el-table-column>
-        <el-table-column
-            prop="releaseNum"
+        <el-table-column v-if='this.departmentId===1'
+            prop="resourceNum"
            label="发布总数"
            min-width="100%">
        </el-table-column>
-        <el-table-column
-            prop="applyNum"
+        <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
+            prop="resourceCarNum"
            label="被申请总数"
            min-width="100%">
        </el-table-column>
-        <el-table-column
-            prop="browseNmu"
+        <el-table-column v-if="this.departmentId===1"
+            prop="resourceBrowseNum"
            label="浏览总量"
            min-width="100%">
        </el-table-column>
-        <el-table-column
-            prop="collectNum"
+        <el-table-column v-if="this.departmentId===1"
+            prop="resourceCollectionNum"
            label="收藏量"
            min-width="100%">
        </el-table-column>
-        <el-table-column
-            prop="transferNum"
+        <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
+            prop="resourceVisits"
            label="被调用总数"
            min-width="100%">
        </el-table-column>
-        <el-table-column
-            prop="applicationNum"
+        <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
+            prop="resourceRelNum"
            label="被应用总数"
            min-width="100%">
        </el-table-column>
-        <el-table-column
-            prop="needApplicationNum"
+        <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
+            prop="resourceShareNum" 
            label="需申请数量"
            min-width="100%">
        </el-table-column>
-        <el-table-column
-            prop="reductionNum"
+        <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
+            prop="resourceShareNonNum"
            label="免批数量"
            min-width="100%">
        </el-table-column>
+        <el-table-column v-if="this.departmentId===2"
+            prop="resourceUseNum"
+            label="使用总数"
+            min-width="100%">
+        </el-table-column>
+        <el-table-column v-if="this.departmentId===2"
+            prop="resourceCarNum"
+            label="申请总数"
+            min-width="100%">
+        </el-table-column>
        <el-table-column
            label="操作"
            min-width="92%">
@ -78,118 +110,324 @@
    </el-table>
    <div class="block">
    <el-pagination
-      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
-      :current-page="currentPage4"
-      :page-sizes="[10, 20, 30, 40]"
      layout="total, prev, pager, next, jumper"
-      :total="40">
+      :total="total"
+      :page-size="5"
+      :current-page="currentPage"
+      >
    </el-pagination>
  </div>
    </div>   
  </el-card>
-   <component-services v-if='servicesIsShow' ></component-services>
-   <application-resources  v-if='resourcesIsShow'></application-resources>
-
    </div>
- 
-  
+   <component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-used>
+   <component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
+   <application-resources  v-if='resourcesIsShow'  :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
+</div>  
 </template>
 <script>
 import componentServices from './componentServices.vue'
 import applicationResources from './applicationResources.vue'
+import ComponentUsed from './componentUsed.vue'
 export default {
-    components:{componentServices,applicationResources},
+    components:{componentServices,applicationResources, ComponentUsed},
    data(){
        return{
-            choseId:null,
+            inputTxt:'',
+            tableId:'',
+            fatherId:'',
+            treeData: [{
+                label: '一级 1',
+                children: [{
+                    label: '二级 1-1',
+                    children: [{
+                    label: '三级 1-1-1'
+                    }]
+                }]
+                }, {
+                label: '一级 2',
+                    children: [{
+                        label: '二级 2-1',
+                        children: [{
+                        label: '三级 2-1-1'
+                        }]
+                    }, {
+                        label: '二级 2-2',
+                        children: [{
+                        label: '三级 2-2-1'
+                        }]
+                    }]
+                }, {
+                label: '一级 3',
+                children: [{
+                    label: '二级 3-1',
+                    children: [{
+                    label: '三级 3-1-1'
+                    }]
+                }, {
+                    label: '二级 3-2',
+                    children: [{
+                    label: '三级 3-2-1'
+                    }]
+                }]
+                }],
+            total:null,
+            defaultProps: {
+            children: 'children',
+            label: 'name'
+            },
+            choseId:0,
            departmentId:1,
-            currentPage4: 4,
+            currentPage: 1,
            homeIsShow:true,
            servicesIsShow:false,
            resourcesIsShow:false,
+            UsedIsShow:false,
            titleList:[
                {name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
            ],
-            tableData: [{
-                name: '部门名称一',
-                releaseNum: 111,
-                applyNum: 222,
-                browseNmu: 333,
-                collectNum:444,
-                transferNum:555,
-                applicationNum:666,
-                needApplicationNum:777,
-                reductionNum:888,
-                },{
-                name: '部门名称一',
-                releaseNum: 111,
-                applyNum: 222,
-                browseNmu: 333,
-                collectNum:444,
-                transferNum:555,
-                applicationNum:666,
-                needApplicationNum:777,
-                reductionNum:888,
-                },{
-                name: '部门名称一',
-                releaseNum: 111,
-                applyNum: 222,
-                browseNmu: 333,
-                collectNum:444,
-                transferNum:555,
-                applicationNum:666,
-                needApplicationNum:777,
-                reductionNum:888,
-                },{
-                name: '部门名称一',
-                releaseNum: 111,
-                applyNum: 222,
-                browseNmu: 333,
-                collectNum:444,
-                transferNum:555,
-                applicationNum:666,
-                needApplicationNum:777,
-                reductionNum:888,
-                },
-            ]
+            tableData: [{deptName:'部门',resourceNum:222}]
        }
+    },
+    created(){
+      
+        
+    },
+    mounted(){
+         this.getFirstTree()
    },
     methods: {
+        //搜索框
+        // searchBtn(){
+        //     this.getALLTree()
+        // },
+        //  //树
+        //     handleNodeClick(data) {
+        //         console.log(data.name);
+        //         this.getTreeName(data)
+        //     },
+            //翻页
+            handleCurrentChange(val){
+                if(this.choseId===0){
+                     this.getFirstTree(val)
+                }
+               else if(this.choseId===1){
+                this.getReleaseTree(val)
+               }               
+            },
+             getTreeName (data) {               
+                this.$http.get('/census/center/v3/treeList/' ,{
+                  params : {
+                    keywords:data.name,
+                    deptId:'1067246875800000066',
+                    // pageNo: pageNo || 1,
+                    // pageSize: 20
+                    }                    
+            }).then(res => {
+                this.tableData =res.data.data
+            })
+            },
+        //  // 获取部门列表
+        //     getALLTree () {               
+        //     this.$http.get('/census/center/v3/treeList/' ,{
+        //           params : {
+        //             keywords:this.inputTxt,
+        //             deptId:'1067246875800000066',
+        //             // pageNo: pageNo || 1,
+        //             // pageSize: 20
+        //             }                    
+        //     }).then(res => {
+        //         this.treeData =res.data.data
+        //         // this.tableData =res.data.data
+        //     })
+        //     },
+
+          // 组件服务部门发布情况
+            getFirstTree (page) {               
+            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
+                  params : {
+                    page:page||1,
+                    limit:5,                  
+                    // id:'1067246875800000066',
+                    resourceType:'组件服务'
+                    }                    
+            }).then(res => {
+                this.tableData =res.data.data.list
+                this.total = res.data.data.total            
+            })
+            },
+            // 组件服务部门使用情况列表
+            getSecondTree () {               
+            this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
+                  params : {
+                    limit:5,
+                    page:1,
+                    // id:'1067246875800000064',
+                    resourceType:'组件服务'
+                    }                     
+            }).then(res => {
+                this.tableData =res.data.data.list
+            
+            })
+            },
+             // 应用资源部门发布情况列表
+            getReleaseTree (page) {               
+            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
+                  params : {
+                    limit:5,
+                    page:page||1,
+                    // id:'1067246875800000066',
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                this.tableData =res.data.data.list
+                this.total = res.data.data.total
+            
+            })
+            },
+            // 应用资源部门使用情况列表
+            getUsedTree () {               
+            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
+                  params : {
+                    limit:5,
+                    page:1,
+                    // id:'1067246875800000066',
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                this.tableData =res.data.data.list
+            
+            })
+            },
      handleClick(row) {
-        console.log(row);
+        if(this.choseId===0){
+            if(this.departmentId===1){
+                    this.homeIsShow=false
+                    this.servicesIsShow=true
+                    this.tableId=row.deptId
+                    this.fatherId=1
+                }else if(this.departmentId===2){
+                    this.homeIsShow=false
+                    this.UsedIsShow=true
+                    this.tableId=row.deptId
+                    this.fatherId=1
+                }
+            } else if(this.choseId===1){
+                    this.homeIsShow=false
+                    this.resourcesIsShow=true
+                    this.tableId=row.deptId
+                    this.fatherId=2
+                }
+           
+       
      },
      //选择组件
      choseBtn(index){
        this.choseId=index
-        if (index===0){
-            this.homeIsShow=false
-            this.servicesIsShow=true
-        } else if(index===1){
-            this.homeIsShow=false
-            this.servicesIsShow=false
-            this.resourcesIsShow=true
-        }
+        this.handleChose(1)
      },
+    //   choseBtn(index){
+    //     this.choseId=index
+    //     if (index===0){
+    //         this.homeIsShow=false
+    //         this.servicesIsShow=true
+    //     } else if(index===1){
+    //         this.homeIsShow=false
+    //         this.servicesIsShow=false
+    //         this.resourcesIsShow=true
+    //     }
+    //   },
      //选择发布or使用表格
      handleChose(index){
        this.departmentId=index
+        if(index===1){
+            if(this.choseId===0){
+                this.getFirstTree()
+            }else if(this.choseId===1){
+                this.getReleaseTree()
+            }            
+        }else if(index===2){
+             if(this.choseId===0){
+                this.getSecondTree()
+            }else{
+                this.getUsedTree()
+            }  
+        }
      },
      //翻页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
-      handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
+      closeChild(){
+        this.homeIsShow=true
+        this.servicesIsShow=false
+      },
+       closeApplication(){
+        this.homeIsShow=true
+        this.resourcesIsShow=false
      }
    },

 }
 </script>
 <style lang="scss" scoped>
+.container{
+    display: flex;
+
+}
+.container-left{
+    width:250px;
+    height:1000px;
+    display: inline-block;
+    // background-color: #ffffff;
+    margin-right:10px
+}
+.left-search{
+    width:250px;
+    height:76px;
+    background-color: #ffffff;
+}
+.input-style{
+    width:210px;
+    height:36px;
+    margin:20px 20px;
+    padding-left: 20px;
+    border-radius: 18px;
+    border:1px solid transparent;
+    background-color: #f2f4fa;
+}
+input::placeholder {
+   font-weight: 400;
+   font-size: 14px;
+   color: #b0b3ca;
+}
+.input-search{
+    width:44px;
+    height:30px;
+    background-color: #ffffff;
+    position: absolute;
+    border-radius: 15px;
+    top:38px;
+    left:196px;
+}
+::v-deep.tree-style  {
+  .el-tree-node__label{
+        font-size:16px;        
+    }
+    .el-tree-node__content{
+            width:240px;
+        overflow: hidden;        
+        text-overflow: ellipsis;
+        white-space: nowrap;    
+    }
+}
+
 .top-box{
    height:80px;
+    width:100%;
    background-color: #fafafc;
+    display: inline-block;
 }
    .title{
        display: flex;
@ -247,4 +485,9 @@ export default {
    .departmentStyle{
        color:#526aff
    }
+   ::v-deep .tree-text-styleJ{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 </style>
--- a/back/src/views/modules/activiti/demo/correction-process2.vue
+++ b/back/src/views/modules/activiti/demo/correction-process2.vue
@ -246,7 +246,7 @@ export default {
  padding: 24px;
  h3 {
    font-size: 16px;
-    color:#212121
+    color: #212121;
  }
  p {
    width: 78%;
@ -340,7 +340,6 @@ export default {
      font-size: 18px;
      padding-bottom: 0;
      border-bottom: 0;
-
    }
    .title:before {
      content: "";
@ -353,7 +352,6 @@ export default {
      margin-right: 10px;
      margin-top: 6px;
    }
-
  }
 }
 ::v-deep .agreeOr > div {
@ -363,7 +361,6 @@ export default {
    margin-right: 10px;
    margin-left: 32px;
  }
-
 }
 ::v-deep .agreeOr > div:last-of-type {
  margin-top: 15px;
--- a/back/src/views/modules/activiti/demo/putaway-process.vue
+++ b/back/src/views/modules/activiti/demo/putaway-process.vue
@ -66,21 +66,35 @@
          </el-form-item>
        </div>
        <div v-if="!shifoushizujian">
-          <el-form-item label="组件名称">
+          <el-form-item label="组件名称" v-if="algorithmShow">
            <el-input
              v-model="dataForm.name"
              :disabled="fieldDisabled"
              placeholder="组件名称"
            ></el-input>
          </el-form-item>
-          <el-form-item label="应用描述">
+          <el-form-item label="算法名称" v-if="nameNotShow">
+            <el-input
+              v-model="dataForm.name"
+              :disabled="fieldDisabled"
+              placeholder="算法名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="应用描述" v-if="algorithmShow">
            <el-input
              v-model="dataForm.description"
              :disabled="fieldDisabled"
              placeholder="应用描述"
            ></el-input>
          </el-form-item>
-          <el-form-item label="部门联系人">
+          <el-form-item label="算法描述" v-if="nameNotShow">
+            <el-input
+              v-model="dataForm.description"
+              :disabled="fieldDisabled"
+              placeholder="算法描述"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="部门联系人" v-if="algorithmShow">
            <el-input
              v-model="dataForm.deptContacts"
              :disabled="fieldDisabled"
@ -94,7 +108,7 @@
              placeholder="共享类型"
            ></el-input>
          </el-form-item>
-          <el-form-item label="共享方式">
+          <el-form-item label="共享方式"  v-if="coverageNotShow && algorithmShow">
            <el-input
              v-model="dataForm.shareMode"
              :disabled="fieldDisabled"
@ -108,16 +122,16 @@
              placeholder="共享方条件"
            ></el-input>
          </el-form-item>
-          <el-form-item label="服务接口">
+          <el-form-item label="服务接口" v-if="coverageNotShow">
            <el-input
              v-model="dataForm.apiUrl"
              :disabled="fieldDisabled"
              placeholder="服务接口"
            ></el-input>
          </el-form-item>
-          <el-form-item label="接口请求方式">
+          <el-form-item label="接口请求方式"  v-if="coverageNotShow">
            <el-input
-              v-model="dataForm.applyCount"
+              v-model="dataForm.apiMethodType"
              :disabled="fieldDisabled"
              placeholder="接口请求方式"
            ></el-input>
@ -179,7 +193,10 @@ export default {
      fieldDisabled: false,
      dataForm: [],
      id: '',
-      shifoushizujian: true
+      shifoushizujian: true,
+      coverageNotShow: true,
+      nameNotShow: false,
+      algorithmShow: true
    }
  },
  watch: {},
@ -209,6 +226,15 @@ export default {
        this.dataForm = res.data.resourceDTO
        if (this.dataForm.type != '应用资源') {
          this.shifoushizujian = false
+          this.dataForm.infoList.forEach((val) => {
+            if (val.attrValue === '图层服务') {
+              this.coverageNotShow = false
+            } else if (val.attrValue === '智能算法') {
+              this.nameNotShow = true
+              this.algorithmShow = false
+              console.log(this.nameNotShow, 'wowowo')
+            }
+          })
        } else {
          this.shifoushizujian = true
        }
--- a/back/src/views/modules/activiti/my-work-dynamics.vue
+++ b/back/src/views/modules/activiti/my-work-dynamics.vue
@ -132,7 +132,7 @@
            show-word-limit
          ></el-input>
        </el-form-item>
-        <el-form-item prop="title" label="摘要">
+        <el-form-item prop="note1" label="摘要">
          <el-input
            v-model="addDataFrom.note1"
            autocomplete="off"
@ -224,7 +224,7 @@
            show-word-limit
          ></el-input>
        </el-form-item>
-        <el-form-item prop="title" label="摘要">
+        <el-form-item prop="note1" label="摘要">
          <el-input
            v-model="eidtDataForm.note1"
            autocomplete="off"
@ -342,13 +342,13 @@
 export default {
  data () {
    return {
-      fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
+      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
      // 表格筛选条件对象
      queryData: {
-        keyworld: "",
+        keyworld: '',
        pageIndex: 1,
        pageSize: 10,
-        total: 0,
+        total: 0
      },
      // 表格数据数组对象
      tableData: [],
@ -359,109 +359,109 @@ export default {
      // imageUrl: '',
      // 新增数据表单对象
      addDataFrom: {
-        title: "",
-        note1: "",
-        content: "",
-        imageUrl: "",
-        delFlag: 0,
+        title: '',
+        note1: '',
+        content: '',
+        imageUrl: '',
+        delFlag: 0
      },
      // 新增数据表单验证对象
      addDataFromRules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
-        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
+        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        note1: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
+        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        imageUrl: [
-          { required: true, message: "请输入图片地址", trigger: "blur" },
-        ],
+          { required: true, message: '请输入图片地址', trigger: 'blur' }
+        ]
      },
      editDataDialogVisabled: false,
      eidtDataForm: {
-        title: "",
-        note1: "",
-        content: "",
-        imageUrl: "",
+        title: '',
+        note1: '',
+        content: '',
+        imageUrl: ''
      },
      eidtDataFromRules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
-        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
+        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        note1: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
+        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        imageUrl: [
-          { required: true, message: "请输入图片地址", trigger: "blur" },
-        ],
+          { required: true, message: '请输入图片地址', trigger: 'blur' }
+        ]
      },
      perviewDataDialogVisabled: false,
      previewData: {
-        title: "",
-        note1: "",
-        content: "",
-        imageUrl: "",
-        delFlag: 0,
+        title: '',
+        note1: '',
+        content: '',
+        imageUrl: '',
+        delFlag: 0
      },
-      previewImg: "", // 预览图片
+      previewImg: '', // 预览图片
      deleteDataArr: [],
-      dialogVisibleImg: false,
-    };
+      dialogVisibleImg: false
+    }
  },
  created () {
-    this.getTableData();
+    this.getTableData()
  },
  methods: {
    tableChange (val) {
-      this.deleteDataArr = val.map((item) => item.id);
-      console.log(this.deleteDataArr);
+      this.deleteDataArr = val.map((item) => item.id)
+      console.log(this.deleteDataArr)
    },
    restTableData () {
-      this.queryData.keyworld = "";
-      this.getTableData();
+      this.queryData.keyworld = ''
+      this.getTableData()
    },
    showView (file) {
-      this.previewImg = file.url;
-      this.dialogVisibleImg = true;
+      this.previewImg = file.url
+      this.dialogVisibleImg = true
    },
    getTableData () {
      this.$http
-        .get("/workdynamics/page", {
+        .get('/workdynamics/page', {
          params: {
            limit: this.queryData.pageSize,
            page: this.queryData.pageIndex,
-            name: this.queryData.keyworld,
-          },
+            name: this.queryData.keyworld
+          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
-            return this.$message.error(res.msg);
+            return this.$message.error(res.msg)
          }
-          this.tableData = res.data.list;
-          this.queryData.total = res.data.total;
+          this.tableData = res.data.list
+          this.queryData.total = res.data.total
        })
-        .catch(() => {});
+        .catch(() => {})
    },
    flashTableData () {
-      this.queryData.pageIndex = 1;
-      this.getTableData();
+      this.queryData.pageIndex = 1
+      this.getTableData()
    },
    // 分页大小更改
    handleSizeChange (value) {
-      this.queryData.pageSize = value;
-      this.getTableData();
+      this.queryData.pageSize = value
+      this.getTableData()
    },
    // 当前索引更改
    handleCurrentChange (val) {
-      this.queryData.pageIndex = val;
-      this.getTableData();
+      this.queryData.pageIndex = val
+      this.getTableData()
    },
    // 新增数据窗口关闭事件
    addDataDialogClose () {
-      this.$refs.addDataFormRef.resetFields();
-      this.addDataFrom.imageUrl = "";
-      this.$refs.addUpload.clearFiles();
+      this.$refs.addDataFormRef.resetFields()
+      this.addDataFrom.imageUrl = ''
+      this.$refs.addUpload.clearFiles()
      // this.addDataFrom.imagesFiles = []
      // this.$refs.addDataFromUploadRef.clearFiles()
    },
    editDataDialogClose () {
-      this.$refs.editDataFormRef.resetFields();
-      this.eidtDataForm.imageUrl = "";
-      this.$refs.editUpload.clearFiles();
+      this.$refs.editDataFormRef.resetFields()
+      this.eidtDataForm.imageUrl = ''
+      this.$refs.editUpload.clearFiles()
    },
    // 追加数据
    addDataDialogConfirm () {
@ -469,197 +469,197 @@ export default {
        if (valid) {
          // console.log("新增新增", this.addDataFrom);
          this.$http
-            .post("/workdynamics/insert", this.addDataFrom)
+            .post('/workdynamics/insert', this.addDataFrom)
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg);
+                return this.$message.error(res.msg)
              }
-              this.$message.success("新增成功");
-              this.addDataDialogVisabled = false;
-              this.getTableData();
+              this.$message.success('新增成功')
+              this.addDataDialogVisabled = false
+              this.getTableData()
            })
-            .catch(() => {});
+            .catch(() => {})
        } else {
-          this.$message.success("表单数据填写不完整");
+          this.$message.success('表单数据填写不完整')
        }
-      });
+      })
    },
    // 限定图片
    handleExceed () {
-      this.$message({ type: "error", message: "最多支持一张图片上传" });
+      this.$message({ type: 'error', message: '最多支持一张图片上传' })
    },
    // 限制标题
    titleExceed (str) {
      if (str.length >= 200) {
-        this.$message.error("标题文字不能超过200字");
+        this.$message.error('标题文字不能超过200字')
      }
    },
    // 限制内容
    contentExceed (str) {
      if (str.length >= 2000) {
-        this.$message.error("内容文字不能超过2000字");
+        this.$message.error('内容文字不能超过2000字')
      }
    },
    // 限制摘要
    noteExceed (str) {
      if (str.length >= 1000) {
-        this.$message.error("摘要文字不能超过1000字");
+        this.$message.error('摘要文字不能超过1000字')
      }
    },
    // 删除数据
    deleteData (row) {
-      console.log(row);
-      this.$confirm("此操作将删除当前数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      console.log(row)
+      this.$confirm('此操作将删除当前数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
      })
        .then(async () => {
-          let ids = [];
+          let ids = []
          if (this.deleteDataArr.length > 1) {
-            ids = this.deleteDataArr;
+            ids = this.deleteDataArr
          } else {
-            ids = [row.id];
+            ids = [row.id]
          }
-          console.log(ids);
+          console.log(ids)
          this.$http
-            .delete("/workdynamics/delete", {
-              data: ids,
+            .delete('/workdynamics/delete', {
+              data: ids
            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
-                return this.$message.error(res.msg);
+                return this.$message.error(res.msg)
              }
              this.$message({
-                type: "success",
-                message: "删除成功!",
-              });
-              this.getTableData();
-            });
+                type: 'success',
+                message: '删除成功!'
+              })
+              this.getTableData()
+            })
        })
        .catch(() => {
          this.$message({
-            type: "info",
-            message: "已取消删除",
-          });
-        });
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
    },
    // 预览工作动态信息
    async openPreviewData (row) {
-      console.log("预览预览", row);
+      console.log('预览预览', row)
      const { data: res } = await this.$http.get(
        `workdynamics/select/${row.id}`
-      );
+      )

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

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

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

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

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

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

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

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

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

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

  .preview-title {
    width: 100%;
-    height: 90px;
+    min-height: 90px;
    //margin-top: -40px;
    border-bottom: solid #c6c6c6 1px;
    .title-text {
@ -752,7 +752,7 @@ export default {
  }
  .preview-note {
    width: 100%;
-    height: 100px;
+    min-height: 100px;
    text-align: left;
    margin-top: 24px;
    text-indent: 2em;
--- a/back/src/views/modules/myAgent/CompetencyApplication.vue
+++ b/back/src/views/modules/myAgent/CompetencyApplication.vue
@ -0,0 +1,160 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-27 11:27:22
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-29 16:31:26
+ * @Description: 能力申请
+-->
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-activiti__process">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
+        <el-form-item>
+          <el-input
+            v-model="dataForm.taskName"
+            :placeholder="$t('process.name')"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getDataList()">{{
+            $t("query")
+          }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <el-table-column label="申请人" header-align="center" align="center">
+          <template slot-scope="scope">
+            <span>{{
+              (scope.row.params && scope.row.params.tAbilityApplicationDTOList[0].user)
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('process.system')"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span>{{
+              (scope.row.params && scope.row.params.tAbilityApplicationDTOList[0].title)
+            }}</span>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
+        <el-table-column
+          prop="processDefinitionName"
+          :label="$t('process.processDefinitionName')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="taskName"
+          :label="$t('process.taskName')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
+        <el-table-column
+          prop="createTime"
+          :label="$t('process.createTime')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              :processInstanceId="processInstanceId"
+              @click="taskHandle(scope.row)"
+              >{{ $t("manage") }}</el-button
+            >
+            <!-- <el-button
+              type="text"
+              size="small"
+              @click="taskDetail(scope.row)"
+              >{{ $t("process.viewFlowImage") }}</el-button
+            > -->
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle"
+      >
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import processModule from '@/mixins/process-module'
+export default {
+  mixins: [mixinViewModule, processModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/act/task/myToDoTaskPage',
+        getDataListIsPage: true,
+        activatedIsNeed: true,
+        deleteIsBatch: true,
+        deleteIsBatchKey: 'deploymentId'
+      },
+      dataForm: {
+        taskName: '',
+        taskId: '',
+        processDefinitionKey: 'abilityprocess_v2'
+      },
+      processInstanceId: ''
+    }
+  },
+  components: {},
+  methods: {
+    // 处理
+    taskHandle (row) {
+      console.log('row======================>', row, this.forwardHandleUrl)
+      if (!row.businessKey) {
+        return this.$message.error(this.$t('task.businessKeyError'))
+      }
+      this.getProcDefRouteSet(row, this.forwardHandleUrl)
+    },
+    taskDetail (row) {
+      if (!row.businessKey) {
+        return this.$message.error(this.$t('task.detailError'))
+      }
+      this.getProcDefRouteSet(row, this.forwardTaskDetail)
+    }
+  }
+}
+</script>
--- a/back/src/views/modules/myAgent/demo/competency-application.vue
+++ b/back/src/views/modules/myAgent/demo/competency-application.vue
@ -0,0 +1,473 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-29 15:59:51
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-01 09:29:57
+ * @Description: 告诉大家这是什么
+-->
+<!--  流程业务表单   -->
+<template>
+  <el-card shadow="never" class="aui-card--fill" :key='showKey'>
+  <!-- 申请人详情 -->
+  <div>
+     <h3>申请人信息</h3>
+    <div class="big-BOX">
+      <p>
+        <span class="text">申请人：<span> {{dataForm.content.user || '--'}}</span></span>
+        <span class="text">电话：<span>{{dataForm.content.phone || '--'}}</span></span>
+        <span class="text">单位：<span>{{dataForm.content.unit || '--'}}</span></span>
+      </p>
+      <p>
+        <span class="text"> 能力申请标题：<span> {{dataForm.content.title|| '--'}}</span></span>
+        <span class="text">应用系统：<span>{{dataForm.content.applicationSystem || '--'}}</span></span>
+        <span class="text">应用场景：<span> {{dataForm.content.applicationSceneStr || '--'}}</span></span>
+      </p>
+      <p>
+        <span> 能力应用期望效果：<span> {{dataForm.content.effectWish|| '--'}}</span></span>
+      </p>
+      <p v-if="dataForm.content.enclosure">
+      <span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button  @click="downloadFile2(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></ren-process-detail>
+  </el-card>
+</template>
+
+<script>
+// 引入工作流公共方法
+import processModule from '@/mixins/process-module'
+import debounce from 'lodash/debounce'
+import qs from 'qs'
+import RenProcessDetail from '@/components/ren-process-detail/src/ren-process-detail'
+export default {
+  // 注入公共方法
+  mixins: [processModule],
+  data () {
+    return {
+      visible: true,
+      showKey: 0,
+      // 表单属性是否可编辑
+      // fieldDisabled: false,
+      // dataForm: {
+      //   id: '',
+      //   user: '',
+      //   phone: '',
+      //   unit: '',
+      //   area: '',
+      //   system: '',
+      //   scene: '',
+      //   basis: ''
+      // }
+      dataForm: {
+        id: '',
+        content: {}
+      },
+      dataList: [],
+      inputAgree: '',
+      inputNo: '',
+      agreeOrList: '同意'
+    }
+  },
+  created () {
+    // 将业务KEY赋值给表单
+    console.log('params=================>', this.$route, this.$route.params)
+    this.dataForm.taskId = this.$route.params.taskId
+    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: {
+    RenProcessDetail
+  },
+  methods: {
+    init () {
+      // this.visible = true
+      this.$nextTick(() => {
+        // this.$refs.dataForm.resetFields()
+        if (this.dataForm.taskId) {
+          // 如业务KEY已存在，不允许编辑
+          // this.fieldDisabled = true
+          this.getInfo()
+          console.log(this.dataForm, 'init')
+        }
+      })
+    },
+    downloadFile2 (url) {
+      window.open(
+        window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(url))
+      )
+    },
+    // 获取信息
+    getInfo () {
+      this.$http
+        .get(`/act/task/getTaskVariables?taskId=${this.dataForm.taskId}&variableName=tAbilityApplicationDTOList`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res.data)
+            return this.$message.error(res.msg)
+          }
+          console.log(res.data, this.dataForm, 'elas============================')
+          if (res.data.tAbilityApplicationDTOList[0].applicationScene) {
+            res.data.tAbilityApplicationDTOList[0].applicationSceneStr = ''
+            res.data.tAbilityApplicationDTOList[0].applicationScene.map((val, index) => {
+              res.data.tAbilityApplicationDTOList[0].applicationSceneStr += val
+              if (index < res.data.tAbilityApplicationDTOList[0].applicationScene.length - 1) {
+                res.data.tAbilityApplicationDTOList[0].applicationSceneStr += '、'
+              }
+            })
+          }
+          this.dataForm.content = res.data.tAbilityApplicationDTOList[0]
+          const obj = {
+            name: '申请摄像头列表',
+            type: '基础设施',
+            describe: ''
+          }
+          let flag = false
+          res.data.tAbilityApplicationDTOList.map(val => {
+            if (val.cameraList) {
+              flag = true
+              obj.describe += val.system
+            } else {
+              this.$http.get('/resource/' + val.resourceId).then(res1 => {
+                // console.log(res1.data.data, '1111111111111111111111111111111111')
+                this.dataList.push({
+                  name: res1.data.data.name,
+                  type: res1.data.data.type,
+                  describe: res1.data.data.description
+                })
+              })
+            }
+          })
+          if (flag) {
+            this.dataList.push(obj)
+          }
+        })
+        .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: debounce(function () {
+      if (this.agreeOrList === '同意') {
+        console.log('this.dataForm', this.dataForm)
+        const params = qs.stringify({
+          taskId: this.dataForm.taskId,
+          comment: this.inputAgree
+        })
+        console.log(params)
+        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+            if (this.callbacks.taskHandleErrorCallback) {
+              this.callbacks.taskHandleErrorCallback(res)
+            }
+            return
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              if (this.callbacks.taskHandleSuccessCallback) {
+                this.callbacks.taskHandleSuccessCallback(res)
+              }
+            }
+          })
+        }).catch(() => {})
+      } else if (this.agreeOrList === '退回') {
+        const params = qs.stringify({
+          taskId: this.dataForm.taskId,
+          comment: this.inputNo
+        })
+        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+            if (this.callbacks.taskHandleErrorCallback) {
+              this.callbacks.taskHandleErrorCallback(res)
+            }
+            return
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              if (this.callbacks.taskHandleSuccessCallback) {
+                this.callbacks.taskHandleSuccessCallback(res)
+              }
+            }
+          })
+        })
+      }
+    }, 1000, { leading: true, trailing: false }),
+    // 启动流程出错回调
+    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: 100%;
+    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;
+      }
+    }
+    .text {
+      width: 500px;
+    }
+  }
+  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: #ffffff;
+    color: #0558e1;
+    border: 1px solid #0558e1;
+  }
+  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    box-shadow: unset !important;
+    background: #0558e1;
+    color: #ffffff;
+  }
+}
+.inputBule {
+  width: 55px;
+  height: 32px;
+  line-height: 32px;
+  padding: 0;
+  border-radius: 2px;
+  background: #0558e1;
+  color: #ffffff;
+  border: 1px solid #0558e1;
+}
+.redAll {
+  margin-left: 10px;
+  ::v-deep .el-radio-button__inner {
+    width: 80px;
+    height: 32px;
+    line-height: 32px;
+    padding: 0;
+    border-radius: 2px;
+    border: 1px solid #e83a48;
+    background: #ffffff;
+    color: #e83a48;
+    margin-left: 10px;
+  }
+  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    box-shadow: unset !important;
+    color: #ffffff;
+    background: #e83a48;
+  }
+}
+.blueInput {
+  width: 55px;
+}
+</style>
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
@ -0,0 +1,533 @@
+<template>
+  <div class="contentBox">
+    <div class="generalizeBox">
+      <h3>API概括</h3>
+      <div class="ApiBox">
+        <img src="~@/assets/img/CapabilityOperationMonitoring/API-allNum.png" />
+        <div>
+          <h4>API总数</h4>
+          <p>99999</p>
+        </div>
+      </div>
+      <div class="ApiBox">
+        <img src="~@/assets/img/CapabilityOperationMonitoring/API-badNum.png" />
+        <div>
+          <h4>异常API总数</h4>
+          <p>99999</p>
+        </div>
+      </div>
+    </div>
+    <div class="abnormalBox">
+      <h3>API异常分析</h3>
+      <div class="abnormalBoxBottom">
+        <!-- API异常次数排行TOP10 -->
+        <div class="RankingList">
+          <h4 class="title">API异常次数排行TOP10</h4>
+          <ul>
+            <li class="RankingListData" v-for="(item, index) in RankingData" :key="index">
+              <i><b>{{ index + 1 }}</b></i>
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
+                <h6>{{ item.name }}</h6>
+              </el-tooltip>
+              <span>{{ item.num }}</span>
+            </li>
+          </ul>
+        </div>
+        <!-- API异常分布 -->
+        <div class="AbnormalDistribution">
+          <h4 class="title">API异常分布</h4>
+          <div class="container-body1">
+            <div id="main" style="width: 120px; height: 260px"></div>
+          </div>
+        </div>
+        <!-- API异常次数统计 -->
+        <div class="AnomalyStatistics">
+          <h4 class="title">API异常次数统计</h4>
+          <div class="AnomalyStatisticsTable">
+            <el-table :data="AnomalyStatisticsTable" border style="width: 100%">
+              <el-table-column prop="name" label="接口名称" width="80" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+              <el-table-column prop="address" label="接口地址" width="200" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+              <el-table-column prop="method" label="调用方法" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+              <el-table-column prop="type" label="组件类型" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+              <el-table-column prop="provider" label="提供商" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+              <el-table-column prop="state" label="监控状态" :resizable="false" :show-overflow-tooltip="true">
+              </el-table-column>
+            </el-table>
+          </div>
+          <!-- 分页 -->
+          <div class="tablePagination">
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+              :current-page="currentPage4" :page-size="5" layout="total, prev, pager, next, jumper" :total="total">
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  // components: {},
+  // props: {},
+  data() {
+    return {
+      // 排行榜
+      RankingData: [
+        {
+          name: '能力名称一能力名称一能力名称一能力名称一能力名称一',
+          num: '239'
+        },
+        {
+          name: '能力名称二',
+          num: '222'
+        },
+        {
+          name: '能力名称三',
+          num: '123'
+        },
+        {
+          name: '能力名称四',
+          num: '88'
+        },
+        {
+          name: '能力名称五',
+          num: '88'
+        },
+        {
+          name: '能力名称六',
+          num: '88'
+        },
+        {
+          name: '能力名称七',
+          num: '88'
+        },
+        {
+          name: '能力名称八',
+          num: '88'
+        },
+        {
+          name: '能力名称九',
+          num: '88'
+        },
+        {
+          name: '能力名称十',
+          num: '88'
+        }
+      ],
+      // 表格
+      AnomalyStatisticsTable: [
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        }
+      ],
+      // 分页
+      currentPage4: 1,
+      total: 0
+    }
+  },
+  mounted() {
+    this.myEchars()
+    // 分页
+    this.total = this.AnomalyStatisticsTable.length
+  },
+  methods: {
+    // 分页
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+    },
+    myEchars() {
+      var chartDom = document.getElementById('main')
+      var myChart = echarts.init(chartDom)
+      var option
+
+      option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          itemHeight: 10,
+          itemWidth: 10,
+          itemGap: 15,
+          textStyle: {
+            fontSize: 12, // 图例文字字体大小
+            color: '#666666' // 图例文字颜色
+          },
+          bottom: '13%',
+          formatter: function (name) {
+            var index = 0
+            var clientlabels = ['智能算法', '图层服务', '开发组件', '业务组件']
+            var clientcounts = ['25%', '25%', '25%', '25%']
+            clientlabels.forEach(function (value, i) {
+              if (value == name) {
+                index = i
+              }
+            })
+            return name + '      ' + clientcounts[index]
+          }
+        },
+        color: ['#0087ff', '#ff8a00', '#fcc549', '#49c988'],
+        series: [
+          {
+            center: ['50%', '23%'],
+            name: 'api异常分布',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            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: 100, name: '智能算法' },
+              { value: 100, name: '图层服务' },
+              { value: 100, name: '开发组件' },
+              { value: 100, name: '业务组件' }
+            ]
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.contentBox {
+  display: flex;
+  margin: 1.25rem 0;
+
+  .generalizeBox {
+    height: 21.875rem;
+    margin-right: 1.25rem;
+    padding: 1.25rem;
+    border-radius: 0.375rem;
+    box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
+    background: #ffffff;
+
+    h3 {
+      font-size: 1.125rem;
+      color: #333333;
+      padding: 0;
+      margin: 0;
+      margin-bottom: 1.875rem;
+    }
+
+    .ApiBox {
+      background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png') no-repeat;
+      background-size: 100%;
+      width: 22.5rem;
+      height: 6.875rem;
+      display: flex;
+      margin-bottom: 1.25rem;
+
+      img {
+        width: 1.25rem;
+        height: 1.375rem;
+        margin: 1.5rem 1.25rem 0;
+      }
+
+      div {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        h4 {
+          padding: 0;
+          margin: 0;
+          margin-bottom: 1.25rem;
+          font-size: 1rem;
+          color: #5f6770;
+        }
+
+        p {
+          padding: 0;
+          margin: 0;
+          font-size: 1.5rem;
+          color: #1182fb;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .ApiBox:last-of-type {
+      background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png') no-repeat;
+      background-size: 100%;
+
+      div {
+        h4 {
+          color: #726b5b;
+        }
+
+        p {
+          color: #fcc549;
+        }
+      }
+    }
+  }
+
+  .abnormalBox {
+    height: 21.875rem;
+    padding: 1.25rem;
+    border-radius: 0.375rem;
+    box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
+    background: #ffffff;
+
+    h3 {
+      font-size: 1.125rem;
+      color: #333333;
+      padding: 0;
+      margin: 0;
+    }
+
+    .title {
+      padding: 1.25rem 0 0.625rem;
+      font-size: 0.875rem;
+      color: #5a83ae;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    .abnormalBoxBottom {
+      display: flex;
+
+      .RankingList {
+        margin-right: 5.625rem;
+
+        ul {
+          padding: 0;
+          margin: 0;
+        }
+
+        .RankingListData {
+          list-style: none;
+          display: flex;
+          margin: 0;
+          padding: 0;
+          margin-bottom: 0.25rem;
+          align-items: center;
+
+          i {
+            font-style: normal;
+            display: block;
+            width: 3.75rem;
+            line-height: 1.25rem;
+            font-size: 0.8125rem;
+            color: #999999;
+            font-weight: bold;
+
+            b {
+              padding-left: 0.75rem;
+              display: block;
+              height: 1.25rem;
+              width: 2.25rem;
+              background: linear-gradient(to right,
+                  rgba(204, 204, 204, 0.6),
+                  rgba(0, 0, 0, 0));
+            }
+          }
+
+          h6 {
+            width: 11.25rem;
+            height: 1.25rem;
+            line-height: 1.25rem;
+            font-size: 0.8125rem;
+            color: #333333;
+            margin: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            cursor: pointer;
+            font-weight: bold;
+          }
+
+          span {
+            font-size: 0.9375rem;
+            color: #000000;
+            font-weight: bold;
+          }
+        }
+
+        .RankingListData:nth-of-type(1) i b {
+          width: 3.75rem;
+          background: linear-gradient(to right,
+              rgba(251, 59, 5, 0.6),
+              rgba(0, 0, 0, 0));
+        }
+
+        .RankingListData:nth-of-type(1) span {
+          color: #fc5656;
+        }
+
+        .RankingListData:nth-of-type(2) i b {
+          width: 3.125rem;
+          background: linear-gradient(to right,
+              rgba(251, 123, 5, 0.6),
+              rgba(0, 0, 0, 0));
+        }
+
+        .RankingListData:nth-of-type(2) span {
+          color: #ff8a00;
+        }
+
+        .RankingListData:nth-of-type(3) i b {
+          width: 2.75rem;
+          background: linear-gradient(to right,
+              rgba(250, 179, 2, 0.6),
+              rgba(0, 0, 0, 0));
+        }
+
+        .RankingListData:nth-of-type(3) span {
+          color: #f9af0a;
+        }
+      }
+
+      .AbnormalDistribution {
+        margin-right: 3.75rem;
+
+        .container-body1 {}
+      }
+
+      .AnomalyStatistics {
+        h4 {
+          padding-bottom: 12px;
+        }
+
+        .AnomalyStatisticsTable {
+          width: 38.2rem;
+
+          ::v-deep .el-table th {
+            padding: 0;
+            height: 34px;
+          }
+
+          ::v-deep .el-table td {
+            padding: 0;
+            height: 34px;
+          }
+
+          ::v-deep .el-table .cell {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          ::v-deep .el-table tbody tr:hover>td {
+            background-color: transparent;
+          }
+
+        }
+
+        .tablePagination {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          ::v-deep .el-pager li {
+            min-width: 1.75rem;
+            padding: 0;
+            border: 0.0625rem solid #b2b2b2;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            color: #b2b2b2;
+            margin-right: 0.375rem;
+          }
+
+          ::v-deep .el-pager li:last-of-type {
+            margin-right: 0;
+          }
+
+          ::v-deep .el-pagination .btn-prev {
+            padding: 0;
+            min-width: 1.75rem;
+            margin-right: 0.375rem;
+            border: 0.0625rem solid #1182fb;
+            border-radius: 0.25rem;
+            font-size: 12px;
+            color: #1182fb;
+          }
+
+          ::v-deep .el-pagination .btn-next {
+            padding: 0;
+            min-width: 1.75rem;
+            margin-left: 0.375rem;
+            border: 0.0625rem solid #1182fb;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            color: #1182fb;
+          }
+
+          ::v-deep .el-pager li.active {
+            border: 0.0625rem solid #1182fb;
+            background: #1182fb;
+            color: #ffffff;
+            font-size: 0.75rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue
@ -0,0 +1,197 @@
+<!-- 权限管理-能力运行监控 -->
+<template>
+  <div class="wrapper">
+    <div class="topBox">
+      <h1 class="topTitle">能力运行平台</h1>
+      <div class="topNav">
+        <div class="topTab">
+          <div
+            @click="timeSwitch('日')"
+            :class="timeSwitchindex == '日' ? 'timeDown' : ''"
+          >
+            当天
+          </div>
+          <div
+            @click="timeSwitch('周')"
+            :class="timeSwitchindex == '周' ? 'timeDown' : ''"
+          >
+            最近一周
+          </div>
+          <div
+            @click="timeSwitch('月')"
+            :class="timeSwitchindex == '月' ? 'timeDown' : ''"
+          >
+            最近一月
+          </div>
+        </div>
+        <div class="topTimme">
+          <span>选择时间段</span>
+          <el-date-picker
+            v-model="timeStart"
+            type="date"
+            placeholder="请选择起始时间"
+            :picker-options="pickerOptions0"
+          >
+          </el-date-picker>
+          <el-date-picker
+            v-model="timeEnd"
+            type="date"
+            placeholder="请选择结束时间"
+            :picker-options="pickerOptions1"
+          >
+          </el-date-picker>
+          <el-button type="primary" round>确定</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="capability-operation-monitoring-center">
+      <abnormal-situation></abnormal-situation>
+    </div>
+    <div class="capability-operation-monitoring-bottom">
+      <analysis-of-the-request
+        :callTheTrendData="callTheTrendData"
+      ></analysis-of-the-request>
+    </div>
+  </div>
+</template>
+
+<script>
+import AbnormalSituation from './components/AbnormalSituation.vue'
+import AnalysisOfTheRequest from './components/AnalysisOfTheRequest.vue'
+export default {
+  components: {
+    AbnormalSituation,
+    AnalysisOfTheRequest
+  },
+  props: {},
+  data () {
+    return {
+      timeSwitchindex: '日',
+      timeStart: '',
+      timeEnd: '',
+      pickerOptions0: {
+        disabledDate: (time) => {
+          if (this.timeEnd != '') {
+            return time.getTime() > this.timeEnd
+          }
+        }
+      },
+      pickerOptions1: {
+        disabledDate: (time) => {
+          return time.getTime() < this.timeStart
+        }
+      },
+      callTheTrendData: {
+        start: '',
+        end: ''
+      }
+    }
+  },
+  watch: {},
+  computed: {},
+  methods: {
+    timeSwitch (name) {
+      this.timeSwitchindex = name
+      if (name == '周') {
+        const start = parseInt(
+          (Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
+        )
+        this.callTheTrendData.start = start
+        console.log(
+          'this.callTheTrendData',
+          parseInt((Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000)
+        )
+      } else if (name == '月') {
+        const start = parseInt(
+          (Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
+        )
+        this.callTheTrendData.start = start
+        console.log(
+          'this.callTheTrendData',
+          parseInt((Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000)
+        )
+      } else {
+        this.callTheTrendData.start = Date.parse(new Date()) / 1000
+        this.callTheTrendData.end = Date.parse(new Date()) / 1000
+      }
+    }
+  },
+  created () {},
+  mounted () {
+    this.timeSwitch('日')
+  }
+}
+</script>
+<style lang="scss" scoped>
+.wrapper {
+  .topBox {
+    .topTitle {
+      font-size: 1.5rem;
+      color: #000000;
+      font-weight: bold;
+      padding: 0.3125rem 0 1.25rem;
+      margin: 0;
+    }
+
+    .topNav {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .topTab {
+        display: flex;
+
+        div {
+          width: 6.875rem;
+          height: 1.75rem;
+          line-height: 1.75rem;
+          text-align: center;
+          border-radius: 0.875rem;
+          font-size: 1rem;
+          color: #666666;
+          margin-right: 0.9375rem;
+          border: 0.0625rem solid #cccccc;
+          cursor: pointer;
+        }
+
+        .timeDown {
+          color: #1182fb;
+          border: 0.0625rem solid #1182fb;
+        }
+      }
+
+      .topTimme {
+        display: flex;
+        align-items: center;
+
+        span {
+          color: #666666;
+          font-size: 1rem;
+          display: block;
+          margin-right: 1.25rem;
+        }
+
+        ::v-deep .el-date-editor.el-input {
+          margin-right: 0.625rem;
+          width: 9.375rem;
+
+          .el-input__inner {
+            border-radius: 17px;
+            padding: 0;
+            padding-left: 10px;
+            padding-right: 0;
+            background-image: url(~@/assets/img/CapabilityOperationMonitoring/calendar.png);
+            background-repeat: no-repeat;
+            background-size: 18px 18px;
+            background-position: 118px center;
+          }
+
+          .el-input__prefix {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
--- a/back/src/views/modules/workBench/api.js
+++ b/back/src/views/modules/workBench/api.js
@ -0,0 +1,152 @@
+// /resource/getByDept
+import http from '@/utils/request';
+
+function Request({
+    methods, url, data, success, fali
+}) {
+    let _key = methods == 'get' ? 'params' : 'data';
+    return new Promise((resolve, reject) => {
+        http[methods](url, {
+            [_key]: data
+        }).then(res => {
+            resolve(res)
+        }, err => {
+            reject(err)
+        })
+    })
+
+}
+function RequestPost({
+    methods, url, data, success, fali
+}) {
+    return new Promise((resolve, reject) => {
+        http[methods](url, 
+            data
+        ).then(res => {
+            resolve(res)
+        }, err => {
+            reject(err)
+        })
+    })
+
+}
+
+// /resource/getByDept:获取当前登录用户所在部门发布的资源
+
+// 部门待办列表
+export const getToDoTask = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/act/task/deptToDoTaskPage',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+// 部门已办列表
+export const getHasToDoTask = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/act/his/getDeptHandledInstancePage',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+// 上架统计《====》饼图
+export const getTotalByDept = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/resource/selectTotalByDept',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+
+// 部门申请
+export const getApply = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/resource/selectTotalApplyByDept',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+// 部门需求
+export const getRequire = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/demanData/selectFlagCountByDepts',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+// 频率top5
+export const getFrequence = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/resource/selectDeptResourceByApplyNum', 
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+// 部门发布动态
+export const getResourceByDept = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        // url: '/resource/getByDept',
+        url: '/workdynamics/getDeptWork',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+// 部门能力推荐
+export const getApplyByDept = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/resource/getApplyByDept',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+// 部门发布能力被调用趋势
+export const getByDept = (data, success, fail) => {
+    RequestPost({
+        methods: 'post',
+        url: '/resource/trafficDeptResource',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
--- a/back/src/views/modules/workBench/components/bottom-view.vue
+++ b/back/src/views/modules/workBench/components/bottom-view.vue
@ -0,0 +1,223 @@
+<template>
+  <div class="bottom-view">
+    <!-- 部门发布动态 -->
+    <div class="left container">
+      <content-title :title="title.dynamic"></content-title>
+      <div class="dynamic-box" v-loading="loadingDynamic">
+        <div class="dynamicView" v-for="(item, index) in list" :key="index" :number="index + 1" :item="item">
+          <div class="wrapper">
+            <div class="content">
+              <div class="left">{{ item.createDate }}</div>
+              <el-tooltip effect="dark" :content="item.title" placement="top">
+                <div class="right ellipsis">{{ item.title || '--' }}</div>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <!-- 部门推荐能力 -->
+    <div class="right container">
+      <content-title :title="title.recommend"></content-title>
+      <div class="recommendView">
+        <a-table :dataSource="tableData" :columns="columns" bordered :pagination="false" :scroll="maxSize"
+          :loading="loadingTable" size="small" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import contentTitle from "./content-title";
+import * as Apis from '../api';
+export default {
+  components: {
+    contentTitle
+  },
+  data() {
+    return {
+      title: { dynamic: "部门发布动态", recommend: "部门推荐能力" },
+      list: [],
+      columns: [
+        {
+          title: "名称",
+          key: "name",
+          dataIndex: "name",
+          width: 250
+        },
+        {
+          title: "类型",
+          key: "type",
+          dataIndex: "type",
+          width: 76
+        },
+        {
+          title: "单位",
+          key: "deptContacts",
+          dataIndex: "deptContacts",
+          width: 144
+        },
+        {
+          title: "时间",
+          key: "createDate",
+          dataIndex: "createDate",
+          width: 153
+        },
+        {
+          title: "当前申请数",
+          key: "applyCount",
+          dataIndex: "applyCount",
+          width: 145
+        },
+      ],
+      tableData: [],
+      maxSize: { y: 195 },
+      loadingDynamic: false,
+      loadingTable: false,
+    };
+  },
+  mounted() {
+    this.getResourceByDept();
+    this.getApplyByDept()
+  },
+  methods: {
+    // 发布动态 
+    getResourceByDept() {
+      let data = {
+        limit: 5,
+        page: 1
+      };
+      this.loadingDynamic = true;
+      Apis.getResourceByDept(
+        data,
+        res => {
+          this.loadingDynamic = false;
+          if (res.data.code !== 0) {
+            return this.$message.error(res.data.msg)
+          }
+          console.log('res.data----发布动态-------->', res.data);
+          this.list = res.data.data.list || []
+          this.list.push(this.list[0])
+          this.list.push(this.list[0])
+        },
+        err => {
+          this.loadingDynamic = false;
+          this.$message.error(err)
+          console.log('err-----发布动态------->', err);
+        }
+      );
+    },
+    // 部门推荐能力
+    getApplyByDept() {
+      let data = {
+        limit: 5,
+        page: 1
+      };
+      this.loadingTable = true;
+      Apis.getApplyByDept(
+        data,
+        res => {
+          this.loadingTable = false;
+          if (res.data.code !== 0) {
+            return this.$message.error(res.data.msg)
+          }
+          console.log('res.data------部门推荐能力------>', res.data);
+          this.tableData = res.data.data.list || [];
+        },
+        err => {
+          this.loadingTable = false;
+          this.$message.error(err)
+          console.log("err", err);
+        }
+      );
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ellipsis {
+  //超出一行省略号
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
+.bottom-view {
+  width: 100%;
+  height: 335px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+
+  .container {
+    background: #fff;
+    width: 800px;
+    height: 335px;
+    padding: 0px 0 20px 10px;
+  }
+}
+
+.dynamic-box {
+  width: 770px;
+  height: 335px;
+}
+
+.dynamicView {
+  cursor: pointer;
+  width: 770px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 7px;
+
+  .wrapper {
+    height: 50px;
+    width: 770px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background-image: url("../images/bgIndex.png");
+    background-repeat: no-repeat;
+    background-color: #f4f5f8;
+    border-radius: 1px;
+
+    .content {
+      width: 760px;
+      padding-right: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-left: 12px;
+      font-size: 16px;
+
+      .left {
+        width: 159px;
+        color: #2b2b2b;
+        font-size: 14px;
+      }
+
+      .right {
+        font-size: 18px;
+        color: #464645;
+        width: 600px;
+      }
+    }
+  }
+}
+
+.recommendView {
+  cursor: pointer;
+  width: 770px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 7px;
+}
+
+::v-deep .ant-table-thead {
+  background-color: #f4f5f8;
+}
+</style>
--- a/back/src/views/modules/workBench/components/center-view.vue
+++ b/back/src/views/modules/workBench/components/center-view.vue
@ -0,0 +1,32 @@
+<template>
+    <div class="center-view">
+        <!-- 频率 -->
+        <frequency-top-5-view></frequency-top-5-view>
+        <!-- 趋势 -->
+        <trend-view></trend-view>
+        <!-- 风险 -->
+        <risk-view></risk-view>
+    </div>
+</template>
+<script>
+import frequencyTop5View from './frequency-top5-view.vue'
+import RiskView from './risk-view.vue'
+import TrendView from './trend-view.vue'
+
+export default {
+    components: { frequencyTop5View, TrendView, RiskView },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.center-view {
+    width: 100%;
+    height: 335px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>
--- a/back/src/views/modules/workBench/components/content-title.vue
+++ b/back/src/views/modules/workBench/components/content-title.vue
@ -0,0 +1,28 @@
+<template>
+  <div class="content-title">
+    <div>{{ title }}</div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import contentTitle from "./content-title";
+export default {
+  name: "contentTitle",
+  props: {
+    title: String
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-title {
+  height: 48px;
+  line-height: 48px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;;
+  // color: #fff;
+}
+</style>
--- a/back/src/views/modules/workBench/components/dept-chart-view.vue
+++ b/back/src/views/modules/workBench/components/dept-chart-view.vue
@ -0,0 +1,230 @@
+<template>
+    <div class="chart-box">
+        <div class="title">{{ title }}</div>
+        <div v-if="dataListCopy.length > 0" style="width:260px; height:232px" class="dept-chart-view" :id="id">
+        </div>
+        <div class="no-data" v-else>暂无数据</div>
+    </div>
+
+</template>
+<script>
+import * as echarts from 'echarts';
+
+export default {
+    data() {
+        return {
+            dataListCopy: [],
+            myChart: null,
+        }
+    },
+    props: {
+        id: {
+            type: String,
+            default: ''
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        dataList: {
+            type: Array,
+            default: () => []
+        },
+        colorArray: {
+            type: Array,
+            default: () => [
+                '#fe845e', '#ff3e55', '#d5c438', '#ff9999', '#9c78ed', '#48c760', '#48c6c7', '#0058e1',
+            ]
+        },
+    },
+    watch: {
+        dataList: {
+            handler(newVal, oldVal) {
+                if (newVal) {
+                    this.dataListCopy = newVal;
+                    if (document.getElementById(this.id)) {
+                        // 解决数据初始渲染不出来的问题
+                        setTimeout(() => {
+                            this.initChart()
+                        }, 2000)
+                    }
+                }
+            },
+            deep: true,
+            immediate: true
+        },
+    },
+    mounted() {
+        setTimeout(() => {
+            this.initChart()
+        }, 2000)
+    },
+    methods: {
+        initChart() {
+            var chartDom = document.getElementById(this.id);
+            if (this.myChart) {
+                this.myChart.dispose()
+            }
+            this.myChart = chartDom && echarts.init(chartDom);
+
+            let lengendArr = this.dataListCopy.filter(v => v.name);
+
+            let total = 0;
+            this.dataListCopy.map(v => {
+                if (v.value || v.value === 0) {
+                    total = total + Number(v.value || 0)
+                }
+            })
+            let option = {
+                "animation": true,
+                title: [
+                    {
+                        text: '{val|' + total + '} {unit|' + '个' + '}',
+                        top: 'top',
+                        left: 'center',
+                        textStyle: {
+                            rich: {
+                                val: {
+                                    fontSize: 20,
+                                    fontWeight: 'bold',
+                                    color: '#212121',
+                                    padding: [80, 0]
+                                },
+                                unit: {
+                                    fontSize: 16,
+                                    fontWeight: 'normal',
+                                    color: '#212121',
+                                    padding: [80, 0],
+                                }
+                            },
+                        },
+                    },
+                ],
+                tooltip: {
+                    triagger: 'item',
+                    formatter: (params) => {
+                        let str = ''
+                        if (params.name == '线') {
+                            str = ''
+                        } else {
+                            str = `<span style="display:inline-block;margin-right:5px;
+                            border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${params.name}: ${params.value}`
+                        }
+                        return str;
+                    }
+                },
+                "legend": {
+                    type: 'scroll',
+                    "width": "90%",
+                    "left": "center",
+                    "textStyle": {
+                        "color": "#212121",
+                        "fontSize": 12
+                    },
+                    "icon": "circle",
+                    "right": "0",
+                    "bottom": "30",
+                    // "padding": [10, 60],
+                    "itemGap": 10,
+                    "data": lengendArr
+                },
+                "series": [{
+                    "type": "pie",
+                    "center": ["50%", "40%"],
+                    "radius": ["50%", "63%"],
+                    "color": this.colorArray,
+                    "startAngle": 135,
+                    label: {
+                        show: false
+                    },
+                    "emphasis": {
+                        "label": {
+                            "show": false,
+                            "formatter": "{b|{b}:}  {per|{d}%}  ",
+                            "backgroundColor": "rgba(255, 147, 38, 0)",
+                            "borderColor": "transparent",
+                            "borderRadius": 4,
+                            "rich": {
+                                "a": {
+                                    "color": "#999",
+                                    "lineHeight": 22,
+                                    "align": "center"
+                                },
+                                "hr": {
+                                    "borderColor": "#aaa",
+                                    "width": "100%",
+                                    "borderWidth": 1,
+                                    "height": 0
+                                },
+                                "b": {
+                                    "color": "#fff",
+                                    "fontSize": 18,
+                                    "lineHeight": 33
+                                },
+                                "c": {
+                                    "fontSize": 14,
+                                    "color": "#eee"
+                                },
+                                "per": {
+                                    "color": "#FDF44E",
+                                    "fontSize": 25,
+                                    "padding": [5, 6],
+                                    "borderRadius": 2
+                                }
+                            }
+                        }
+                    },
+                    data: this.dataListCopy,
+                },
+                {
+                    "type": "pie",
+                    "center": ["50%", "40%"],
+                    "radius": ["38%", "39%"],
+                    "label": {
+                        "show": false
+                    },
+                    hoverAnimation: false,
+                    showTooltip: false,
+                    color: ['#d8dde8'],
+                    "data": [{
+                        "value": 0,
+                        "name": "线",
+                    }]
+                }
+                ]
+            }
+            this.myChart && option && this.myChart.setOption(option, true);
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.chart-box {
+    width: 250px;
+    height: 232px;
+    margin: 1px;
+}
+
+.dept-chart-view {
+    width: 250px;
+    height: 232px;
+    margin: 1px;
+}
+
+.title {
+    width: 250px;
+    font-size: 18px;
+    color: #212121;
+    text-align: center;
+    line-height: 30px;
+}
+
+.no-data {
+    width: 250px;
+    height: 232px;
+    line-height: 232px;
+    font-size: 16px;
+    color: #212121;
+    text-align: center;
+}
+</style>
--- a/back/src/views/modules/workBench/components/dept-todo-view.vue
+++ b/back/src/views/modules/workBench/components/dept-todo-view.vue
@ -0,0 +1,163 @@
+<template>
+    <div class="dept-box" :class="dataInfo.noMarginleft ? 'no-margin-left' : ''">
+        <div class="left-box"
+            :style="{ 'background': dataInfo.bgColor, 'border-right': `1px solid ${dataInfo.borderColor}` }">
+            <div class="content">
+                <img class="img" :src="dataInfo.imgSrc" />
+                <div class="title">{{ title }}</div>
+                <div class="flex-row-bottom">
+                    <span class="num" :style="{ 'color': dataInfo.textColor }">{{ formatNum(dataInfo.num) }}</span>
+                    <span class="unit" :style="{ 'color': dataInfo.textColor }">{{ dataInfo.unit || '个' }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="list-box" v-if="dataInfo.list.length > 0">
+
+            <div v-for="(item, i) in dataInfo.list" :key="i">
+
+                <el-tooltip effect="dark" :content="item[dataInfo.nameStr]" placement="top">
+                    <div class="list-item ellipsis">
+                        {{ item[dataInfo.nameStr] || '--' }}
+                    </div>
+                </el-tooltip>
+            </div>
+
+            <div class="more" @click="goPage(dataInfo.url)">
+                查看更多 >
+            </div>
+        </div>
+        <div class="list-box flex-row-center no-data" v-else>
+            暂无数据
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    },
+    props: {
+        dataInfo: {
+            type: Object,
+            default: () => { }
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+    },
+    methods: {
+        formatNum(num) {
+            return num || num === 0 ? num : '--'
+        },
+        goPage(url) {
+            this.$router.push({
+                path: url
+            });
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.ellipsis {
+    //超出一行省略号
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.no-margin-left {
+    margin-left: 0;
+}
+
+.flex-row-bottom {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+}
+
+.flex-row-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.dept-box {
+    display: flex;
+    align-items: center;
+    width: 394px;
+    height: 252px;
+    margin: 16px;
+    background: rgba($color: #f1f3f6, $alpha: 0.8);
+}
+
+.left-box {
+    display: flex;
+    justify-content: center;
+    // width: 80px;
+    width: 100px;
+    border-radius: 2px;
+    height: 100%;
+}
+
+.img {
+    height: 50px;
+    width: 50px;
+    margin: 0 auto;
+}
+
+.content {
+    // margin-top: 57px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.title {
+    font-size: 18px;
+    color: #000;
+    margin-top: 25px;
+    margin-bottom: 18px;
+    text-align: center;
+}
+
+.num {
+    font-size: 30px;
+}
+
+.unit {
+    font-size: 16px;
+    margin-left: 2px;
+}
+
+.list-box {
+    width: 314px;
+    height: 252px;
+    padding: 0 16px;
+}
+
+.list-item {
+    height: 44px;
+    line-height: 44px;
+    box-sizing: border-box;
+    border-bottom: 1px dashed #c6c6c6;
+    font-size: 16px;
+    color: #212121;
+}
+
+.more {
+    color: #212121;
+    font-size: 14px;
+    height: 32px;
+    line-height: 32px;
+    text-align: right;
+    cursor: pointer;
+}
+
+.no-data {
+    font-size: 16px;
+    color: #212121;
+}
+</style>
--- a/back/src/views/modules/workBench/components/frequency-top5-view.vue
+++ b/back/src/views/modules/workBench/components/frequency-top5-view.vue
@ -0,0 +1,225 @@
+<template>
+    <div class="frequency">
+        <contentTitle title="部门能力使用频率TOP5"></contentTitle>
+        <div v-if="!noData" v-loading="loading">
+            <div class="no-box">
+                <div class="no no2">
+                    <el-tooltip effect="dark" :content="no2Obj.name" placement="top">
+                        <div class="name ellipsis" :style="{ color: colorObj[2] }">{{ no2Obj.name || '--' }}</div>
+                    </el-tooltip>
+                    <div class="count">{{ formatCount(no2Obj.count) }}</div>
+                </div>
+                <div class="no no1">
+                    <el-tooltip effect="dark" :content="no1Obj.name" placement="top">
+                        <div class="name ellipsis" :style="{ color: colorObj[1] }">{{ no1Obj.name || '--' }}</div>
+                    </el-tooltip>
+                    <div class="count">{{ formatCount(no1Obj.count) }}</div>
+                </div>
+                <div class="no no3">
+                    <el-tooltip effect="dark" :content="no3Obj.name" placement="top">
+                        <div class="name ellipsis" :style="{ color: colorObj[3] }">{{ no3Obj.name || '--' }}</div>
+                    </el-tooltip>
+
+                    <div class="count">{{ formatCount(no3Obj.count) }}</div>
+                </div>
+            </div>
+            <div class="flex-row-between row-name" v-for="(data, i) in listInfo" :key="i">
+                <div class="left">
+                    <div class="row-index">{{ i + 3 }}</div>
+                    <el-tooltip effect="dark" :content="data.name" placement="top">
+                        <div class="name-text ellipsis">{{ data.name || '--' }}</div>
+                    </el-tooltip>
+                </div>
+                <div class="count-text">{{ formatCount(data.count) }}</div>
+            </div>
+        </div>
+        <div class="no-data" v-else>暂无数据</div>
+
+    </div>
+</template>
+<script>
+import * as Apis from '../api.js'
+import contentTitle from './content-title.vue'
+export default {
+    data() {
+        return {
+            listInfo: [],
+            colorObj: {
+                1: '#4658710',
+                2: '#734204',
+                3: '#805932',
+            },
+            no1Obj: {
+                name: '',
+                count: '',
+            },
+            no2Obj: {
+                name: '',
+                count: '',
+            },
+            no3Obj: {
+                name: '',
+                count: '',
+            },
+            noData: false,
+            loading: true,
+        };
+    },
+    mounted() {
+        this.getData();
+    },
+    methods: {
+        // 频率
+        getData() {
+            let data = {
+                limit: 5,
+                page: 1,
+            };
+            this.loading = true
+            Apis.getFrequence(data, res => {
+                this.loading = false;
+                if (res.data.code !== 0) {
+                    return this.$message.error(res.data.msg);
+                }
+                console.log("res----频率-------->", res.data);
+                let _arr = res.data.data.records || [];
+                if (_arr.length == 0) {
+                    this.noData = true
+                    return;
+                }
+                for (let i = 0; i < 3; i++) {
+                    let k = i + 1;
+                    this[`no${k}Obj`].name = _arr[i].name
+                    this[`no${k}Obj`].count = _arr[i].count
+                }
+                this.listInfo = []
+                this.listInfo.push(_arr[3] || {})
+                this.listInfo.push(_arr[4] || {})
+
+            }, err => {
+                this.loading = false;
+                this.$message.error(err);
+            });
+        },
+        formatCount(count) {
+            return count || count === 0 ? count : '--'
+        }
+    },
+    components: { contentTitle }
+}
+</script>
+<style lang="scss" scoped>
+.ellipsis {
+    //超出一行省略号
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.flex-row-between {
+    display: flex;
+    width: 100%;
+    margin-bottom: 8px;
+    height: 52px;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 10px;
+    padding-right: 16px;
+    box-sizing: border-box;
+}
+
+.left {
+    display: flex;
+}
+
+.frequency {
+    width: 540px;
+    height: 335px;
+    background: #fff;
+    padding: 0 16px;
+    box-sizing: border-box;
+}
+
+.no-box {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 24px;
+}
+
+.no1 {
+    width: 170px;
+    height: 120px;
+    margin-top: -20px;
+    background-image: url("~@/assets/img/workBench/NO1.png");
+}
+
+.no {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.no2 {
+    width: 170px;
+    height: 120px;
+    margin-top: 10px;
+    background-image: url("~@/assets/img/workBench/NO2.png");
+}
+
+
+.no3 {
+    width: 170px;
+    height: 120px;
+    margin-top: 10px;
+    background-image: url("~@/assets/img/workBench/NO3.png");
+}
+
+.name {
+    font-size: 16px;
+    margin-bottom: 10px;
+    margin-top: 70px;
+    width: 150px;
+    text-align: center;
+}
+
+.count {
+    font-size: 18px;
+    color: #2b2b2b;
+}
+
+.row-name {
+    background: #f4f5f8;
+    border-radius: 1px;
+}
+
+.row-index {
+    font-size: 16px;
+    color: #414d60;
+}
+
+.name-text {
+    font-size: 16px;
+    color: #464545;
+    margin-left: 10px;
+    width: 430px;
+}
+
+
+.num-text {
+    font-size: 14px;
+    color: #2b2b2b;
+
+}
+
+.no-data {
+    width: 540px;
+    height: 300px;
+    background: #fff;
+    line-height: 232px;
+    font-size: 16px;
+    color: #212121;
+    text-align: center;
+}
+</style>
--- a/back/src/views/modules/workBench/components/lineOption.js
+++ b/back/src/views/modules/workBench/components/lineOption.js
@ -0,0 +1,129 @@
+import * as echarts from 'echarts'
+//折线图
+export const trendLineChart = (id, chartData, _option) => {
+
+    let { xaxis = [], ydata = [], } = chartData;
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+            top: '16%',
+            left: '7%',
+            right: '7%',
+            bottom: '10%',
+        },
+        xAxis: [{
+            type: 'category',
+            boundaryGap: true,
+            axisLine: { //坐标轴轴线相关设置。数学上的x轴
+                show: true,
+                lineStyle: {
+                    color: 'rgba(138,178,241)'
+                },
+            },
+            axisLabel: { //坐标轴刻度标签的相关设置
+                textStyle: {
+                    color: '#2b2b2b',
+                    margin: 15,
+                    fontSize: '14'
+                },
+            },
+            axisTick: {
+                show: false,
+            },
+            data: xaxis,
+        }],
+        yAxis: [{
+            name: '使用量(万次)',
+            nameTextStyle:{color:"#2b2b2b"},
+            type: 'value',
+            min: 0,
+            max: 100,
+            splitNumber: 5,
+            splitLine: {
+                show: false,
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.1)'
+                }
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(138,178,241)'
+                },
+            },
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: '#2b2b2b',
+                    margin: 15,
+                    fontSize: '14'
+                },
+
+            },
+            axisTick: {
+                show: false,
+            },
+        }],
+        series: [{
+            name: '使用量',
+            type: 'line',
+            showAllSymbol: true,
+            symbolSize: 0,
+            symbol: 'circle', 
+            symbolSize: 5,   //设定实心点的大小
+            lineStyle: {
+                normal: {
+
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                        offset: 0,
+                        color: '#0058e1'
+                    }, {
+                        offset: 1,
+                        color: '#0058e1'
+                    }])
+                },
+                borderColor: '#f0f'
+            },
+            label: {
+                show: false,
+            },
+            itemStyle: {
+                normal: {
+                    color: "#0058ee",
+                }
+            },
+            // 区域填充样式
+            areaStyle: {
+                normal: {
+                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                        offset: 0,
+                        color: 'rgba(0,88,225,0.16)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(0,88,225,0)'
+                    }
+                    ], false),
+                    shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
+                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+                }
+            },
+            data: ydata
+        }]
+    };
+
+    if (_option !== undefined) {
+        option = Object.assign({}, option, _option)
+    }
+
+    const client = document.getElementById(id);
+    let myChart = echarts.init(client);
+    const clientWidth = client.clientWidth;
+    const clientHeight = client.clientHeight;
+    myChart.clear();
+    myChart.resize({ width: clientWidth, height: clientHeight });
+    myChart.setOption(option);
+}
--- a/back/src/views/modules/workBench/components/risk-view.vue
+++ b/back/src/views/modules/workBench/components/risk-view.vue
@ -0,0 +1,32 @@
+<template>
+    <div class="risk">
+        <contentTitle title="部门能力风险TOP5"></contentTitle>
+        <div class="no-data">暂无数据</div>
+
+    </div>
+</template>
+<script>
+import contentTitle from './content-title.vue'
+export default {
+    components: { contentTitle }
+}
+</script>
+<style lang="scss" scoped>
+.risk {
+    width: 540px;
+    height: 335px;
+    background: #fff;
+    padding: 0 16px;
+    box-sizing: border-box;
+}
+
+.no-data {
+    width: 520px;
+    height: 287px;
+    background: #fff;
+    line-height: 232px;
+    font-size: 16px;
+    color: #212121;
+    text-align: center;
+}
+</style>
--- a/back/src/views/modules/workBench/components/trend-view.vue
+++ b/back/src/views/modules/workBench/components/trend-view.vue
@ -0,0 +1,144 @@
+<template>
+  <div class="trend">
+    <content-title title="部门发布能力被调用趋势">
+      <div class="button">
+        <div
+          v-for="(item, idx) in titles"
+          :key="item"
+          @click="handleTitleSwitch(idx)"
+          class="top-title"
+          :class="{ active: idx == selectedTitle }"
+        >{{ item }}</div>
+      </div>
+    </content-title>
+    <div id="trendId" class="trend-echart"></div>
+  </div>
+</template>
+<script>
+import { trendLineChart } from "./lineOption";
+import contentTitle from "./content-title";
+import * as Apis from "../api";
+export default {
+  data() {
+    return {
+      titles: ["近七日", "月度"],
+      selectedTitle: 0,
+      trendChartData: {},
+      startDate: "",
+      endDate:
+        new Date().getFullYear() +
+        "-" +
+        (new Date().getMonth() + 1) +
+        "-" +
+        new Date().getDate()
+    };
+  },
+  components: {
+    contentTitle
+  },
+  mounted() {
+    this.initChart();
+  },
+  watch: {
+    selectedTitle: {
+      handler: function(newVal, oldVal) {
+        this.startDate = this.getData(newVal == 0 ? 7 : 30);
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    //发布动态
+    initChart() {
+      Apis.getByDept(
+        {
+          startDate: this.startDate,
+          endDate: this.endDate
+        },
+        res => {
+          if (res.data.code !== 0) {
+            return;
+          }
+          this.data = res.data.data.browseDayList || [];
+          let xaxis = [],
+            ydata = [];
+          this.data.forEach(v => {
+            Object.keys(v).map((key, value) => {
+              xaxis.push(key);
+              ydata.push(value);
+            });
+          });
+          console.log(xaxis)
+            console.log(ydata)
+          this.trendChartData = {
+            xaxis: xaxis,
+            ydata: ydata
+          };
+          this.$nextTick(() => {
+            trendLineChart("trendId", this.trendChartData);
+          });
+        },
+        err => {
+          console.log("err", err);
+        }
+      );
+    },
+    handleTitleSwitch(idx) {
+      this.selectedTitle = idx;
+      this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30);
+      console.log(this.startDate);
+      this.initChart();
+    },
+    getData(aa) {
+      let date1 = new Date(),
+        time1 =
+          date1.getFullYear() +
+          "-" +
+          (date1.getMonth() + 1) +
+          "-" +
+          date1.getDate(); //time1表示当前时间
+      let date2 = new Date(date1);
+      date2.setDate(date1.getDate() - aa);
+      let time2 =
+        date2.getFullYear() +
+        "-" +
+        (date2.getMonth() + 1) +
+        "-" +
+        date2.getDate();
+      return time2;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.trend {
+  width: 516px;
+  height: 335px;
+  background: #fff;
+  margin-right: 4px;
+  padding: 0 20px 0 20px;
+  .trend-echart {
+    height: 280px;
+    width: 500px;
+    margin: 0 auto;
+  }
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 110px;
+
+    .top-title {
+      font-size: 16px;
+      height: 30px;
+      line-height: 30px;
+      &.active {
+        color: #0058e1;
+        font-weight: bold;
+        border-bottom: 2px solid #0058e1;
+      }
+    }
+  }
+}
+</style>
--- a/back/src/views/modules/workBench/images/bgIndex.png
+++ b/back/src/views/modules/workBench/images/bgIndex.png
--- a/back/src/views/modules/workBench/workBench.vue
+++ b/back/src/views/modules/workBench/workBench.vue
@ -0,0 +1,236 @@
+<template>
+    <div class="work-brnch-box">
+        <!-- 上 -->
+        <div class="flex-row-start top">
+            <div class="flex-row-start dept-left">
+                <dept-todo-view title="部门待办" v-loading="loadingToDo" :dataInfo="toToData"></dept-todo-view>
+                <dept-todo-view title="部门已办" v-loading="loadingHasToDo" :dataInfo="hasToDodoData"
+                    style="margin-left: 0"></dept-todo-view>
+            </div>
+            <div class="flex-row-start dept-chart-box">
+                <dept-chart-view id="shelves" title="部门上架" v-loading="loadingResource" :dataList="resourceData"
+                    :colorArray="resourceColor">
+                </dept-chart-view>
+                <dept-chart-view id="apply" title="部门申请" v-loading="loadingApply" :dataList="applyData"
+                    :colorArray="applyColor">
+                </dept-chart-view>
+                <dept-chart-view id="demand" title="部门需求" v-loading="loadingRequire" :dataList="requireData"
+                    :colorArray="requireColor">
+                </dept-chart-view>
+            </div>
+        </div>
+        <!-- 中 -->
+        <div class="center">
+            <center-view></center-view>
+        </div>
+        <!-- 下 -->
+        <div class="bottom">
+            <bottom-view></bottom-view>
+        </div>
+    </div>
+</template>
+<script>
+import BottomView from '../workBench/components/bottom-view.vue'
+import CenterView from '../workBench/components/center-view.vue'
+import DeptChartView from '../workBench/components/dept-chart-view.vue'
+import deptTodoView from '../workBench/components/dept-todo-view.vue'
+import * as Apis from './api.js'
+
+export default {
+    components: {
+        deptTodoView,
+        BottomView,
+        CenterView,
+        DeptChartView,
+    },
+    data() {
+        return {
+            // 部门待办
+            toToData: {
+                color: '#f86f01',
+                imgSrc: require('@/assets/img/workBench/todo.png'),
+                bgColor: 'rgba(228,138,1,0.12)',
+                borderColor: 'rgba(250,123,12,0.54)',
+                textColor: '#f86f01',
+                num: 0,
+                list: [],
+                nameStr: 'taskName',
+                url: 'activiti-my-todo-task'
+            },
+            // 部门已办
+            hasToDodoData: {
+                noMarginleft: true,
+                color: '#21b107',
+                imgSrc: require('@/assets/img/workBench/hasToDo.png'),
+                bgColor: 'rgba(37,165,13,0.12)',
+                borderColor: 'rgba(49,194,20,0.54)',
+                textColor: '#21b107',
+                num: 0,
+                list: [],
+                nameStr: 'processDefinitionName',
+                url: 'activiti-my-join-task'
+            },
+            // 部门申请
+            resourceData: [],
+            resourceColor: ['#7b2cff', '#fd5151', , '#2ca1ff', '#0adbfa', '#febe13', '#65e5dd', '#f071ff', '#85f67a'],
+            // 部门申请
+            applyData: [],
+            applyColor: ["#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"],
+            // 部门需求
+            requireData: [],
+            requireColor: ['#FD866A', '#9E87FF', '#58D5FF', '#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A',],
+            loadingToDo: false,
+            loadingHasToDo: false,
+            loadingResource: false,
+            loadingApply: false,
+            loadingRequire: false,
+        }
+    },
+    mounted() {
+        // 部门待办
+        this.getToDo()
+        // 部门已办
+        this.getHasToDo()
+        // 上架
+        this.getShelvesTotal()
+        // 申请
+        this.getApplyTotal()
+        // 需求
+        this.getRequireTotal()
+    },
+    methods: {
+        // 待办
+        getToDo() {
+            this.loadingToDo = true;
+            let data = {
+                limit: 5,
+                page: 1,
+            }
+            Apis.getToDoTask(data, res => {
+                this.loadingToDo = false;
+                if (res.data.code !== 0) {
+                    return this.$message.error(res.data.msg)
+                }
+                console.log('res----待办-------->', res.data);
+                this.toToData.list = res.data.data.records || []
+                this.toToData.num = res.data.data.total || 0
+            }, err => {
+                this.$message.error(err);
+                this.loadingToDo = false;
+            })
+        },
+        // 已办
+        getHasToDo() {
+            let data = {
+                limit: 5,
+                page: 1,
+            }
+            this.loadingHasToDo = true;
+            Apis.getHasToDoTask(data, res => {
+                this.loadingHasToDo = false;
+                if (res.data.code !== 0) {
+                    return this.$message.error(res.data.msg)
+                }
+                console.log('res----已办-------->', res.data);
+                this.hasToDodoData.list = res.data.data.records || []
+                this.hasToDodoData.num = res.data.data.total || 0
+            }, err => {
+                this.$message.error(err)
+                this.loadingHasToDo = false;
+                console.log('err-----已办------->', err);
+            })
+        },
+        // 部门上架
+        getShelvesTotal() {
+            this.loadingResource = true;
+            Apis.getTotalByDept({}, res => {
+                this.loadingResource = false;
+                if (res.data.code !== 0) {
+                    return this.$message.error(res.data.msg)
+                }
+                console.log('res----部门上架-------->', res.data);
+                this.resourceData = this.formatList(res.data.data.total || [])
+            }, err => {
+                this.$message.error(err)
+                this.loadingResource = false;
+            })
+        },
+        // 部门申请
+        getApplyTotal() {
+            this.loadingApply = true;
+            Apis.getApply({}, res => {
+                this.loadingApply = false;
+                if (res.data.code !== 0) {
+                    return this.$message.error(res.data.msg)
+                }
+                console.log('res----部门申请-------->', res.data);
+                this.applyData = this.formatList(res.data.data.total || [])
+            }, err => {
+                this.$message.error(err)
+                this.loadingApply = false;
+            })
+        },
+        formatList(list = [], nameStr = 'type') {
+            let arr = []
+            list.map(v => {
+                let obj = {}
+                obj.name = v[nameStr];
+                obj.value = v.count;
+                arr.push(obj)
+            })
+            return arr;
+        },
+        // 部门需求
+        getRequireTotal() {
+            this.loadingRequire = true;
+            Apis.getRequire({}, res => {
+                this.loadingRequire = false;
+                if (res.data.code !== 0) {
+                    return this.$message.error(res.data.msg)
+                }
+                console.log('res----部门需求-------->', res.data);
+                this.requireData = this.formatList(res.data.data.total || [], 'flag')
+
+            }, err => {
+                this.$message.error(err)
+                this.loadingRequire = false;
+            })
+        },
+
+    },
+}
+</script>
+
+
+<style lang="scss" scoped>
+.margin-h-16 {
+    margin: 0 16px;
+}
+
+.flex-row-start {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.work-brnch-box {
+
+    .top {
+        height: 284px;
+        margin-bottom: 16px;
+
+    }
+
+    .dept-left {
+        width: 836px;
+        background: #fff;
+        margin-right: 16px;
+    }
+
+    .dept-chart-box {
+        width: 780px;
+        height: 100%;
+        background: #fff;
+    }
+}
+</style>
--- a/front/public/index.html
+++ b/front/public/index.html
@ -2,7 +2,7 @@
 * @Author: hisense.wuhongjian
 * @Date: 2022-03-29 16:45:25
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-25 15:55:02
+ * @LastEditTime: 2022-07-04 11:57:44
 * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@ -45,9 +45,10 @@
    // window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
    // 开发
    // window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
-    // window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796';
+    // window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
    // window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
    // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
+    window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
    // 穿透版本
    // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
    // window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';
--- a/front/public/static/config/location.js
+++ b/front/public/static/config/location.js
@ -2,18 +2,20 @@
 * @Author: hisense.wuhongjian
 * @Date: 2020-07-07 16:03:23
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-25 16:47:35
+ * @LastEditTime: 2022-07-04 11:56:58
 * @Description: 数据资源参数配置
 */
-// const newLocation = 'qingdao'
-// const newLocation = 'baotou'
 const newLocation = 'qingdao'
+// const newLocation = 'baotou'
+// const newLocation = 'xihaian'

 // 数据资源数据
 const whoShow = {}
 const launchedDataNumObject = {}
 // 导航数据
 const navListManagement = {}
+// 基础设施
+const infrastructure = {}
 // 区市站点数据
 const mapTestNum = {}
 // 底部数据
@ -21,12 +23,14 @@ const footerDataList = {}
 // qingdao
 if (newLocation === 'qingdao') {
  whoShow.itShowQingDao = true
+  infrastructure.deptName = '青岛市大数据发展管理局'
+  infrastructure.deptId = '1067246875800000066'
  navListManagement.navList = [
    { name: '共享门户', key: 'home' },
    { name: '能力集市', key: 'DetailsPageconetent' },
    { name: '能力云图', key: 'capabilityCloud' },
    { name: '能力统计', key: 'abilityStatistics' },
-    { name: '开发指南', key: 'developmentGuide' },
+    // { name: '开发指南', key: 'developmentGuide' },
    { name: '需求中心', key: 'demandCenter' },
    // { name: '个人中心', key: 'personalCenter' },
    { name: '区市站点', key: 'mapTest' },
@ -112,7 +116,7 @@ else if (newLocation === 'baotou') {
    { name: '能力集市', key: 'DetailsPageconetent' },
    { name: '能力云图', key: 'capabilityCloud' },
    { name: '能力统计', key: 'abilityStatistics' },
-    { name: '开发指南', key: 'developmentGuide' },
+    // { name: '开发指南', key: 'developmentGuide' },
    { name: '需求中心', key: 'demandCenter' },
    // { name: '个人中心', key: 'personalCenter' },
    // { name: '区市站点', key: 'mapTest' },
@ -148,7 +152,7 @@ else if (newLocation === 'xihaian') {
    { name: '能力集市', key: 'DetailsPageconetent' },
    { name: '能力云图', key: 'capabilityCloud' },
    { name: '能力统计', key: 'abilityStatistics' },
-    { name: '开发指南', key: 'developmentGuide' },
+    // { name: '开发指南', key: 'developmentGuide' },
    { name: '需求中心', key: 'demandCenter' },
    // { name: '个人中心', key: 'personalCenter' },
    // { name: '区市站点', key: 'mapTest' },
--- a/front/src/api/capabilityCloud.js
+++ b/front/src/api/capabilityCloud.js
@ -80,3 +80,17 @@ export function dataResourceInfo(params) {
    params,
  })
 }
+//能力云图-调用趋势
+export function callTheTrendPort(start, end, params) {
+  return request({
+    url: '/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' + start + '&end=' + end + '&step=' + params,
+    method: 'get',
+  })
+}
+//能力云图-调用次数
+export function totalCallsSnum(params) {
+  return request({
+    url: '/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' + params,
+    method: 'get',
+  })
+}
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@ -2,7 +2,7 @@
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-01 19:19:40
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-22 18:59:03
+ * @LastEditTime: 2022-06-30 19:36:48
 * @Description: 告诉大家这是什么
 */
 import request from '@/utils/request'
@ -114,7 +114,7 @@ export function lastestPage(params) {
 // 提交申请
 export function submitApply(data) {
  return request({
-    url: '/ability/center/apply',
+    url: '/ability/center/v2/apply',
    method: 'post',
    data,
  })
@ -297,3 +297,35 @@ export function getDataResource(data) {
    data,
  })
 }
+//应用详情列表
+export function queryPartAppByKeyId(params) {
+  return request({
+    url: 'dataResourceRel/queryPart4AppByKeyId',
+    method: 'get',
+    params,
+  })
+}
+//组件详情列表
+export function queryPartAppByKeyId2(params) {
+  return request({
+    url: 'dataResourceRel/queryApp4PartByKeyId',
+    method: 'get',
+    params,
+  })
+}
+
+//首页 基础设施
+export function selectInfrastructureList(params) {
+  return request({
+    url: 'resource/selectInfrastructureList',
+    method: 'get',
+    params,
+  })
+}
+// 根据instanceId获取摄像头列表
+export function getApplyCameraList(id) {
+  return request({
+    url: '/resource/getApplyCameraList/' + id,
+    method: 'get',
+  })
+}
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@ -150,6 +150,16 @@ export function nengliziyuanshangjiaapply(params) {
    params,
  })
 }
+export function getTaskVariables(params) {
+  return request({
+    url:
+      '/act/task/getTaskVariables?taskId=' +
+      params.taskId +
+      '&variableName=tAbilityApplicationDTOList',
+    method: 'get',
+    params,
+  })
+}
 // 能力下架申请
 export function undercarriage(data) {
  return request({
@ -189,3 +199,19 @@ export function getCategoryTreePage(params) {
    params,
  })
 }
+// 申购车根据部门分类
+export function selectResourceCarGroupByDept(params) {
+  return request({
+    url: '/resourcecar/selectResourceCarGroupByDept',
+    method: 'get',
+    params,
+  })
+}
+// 申购车根据部门查询
+export function selectResourceListByDept(params) {
+  return request({
+    url: '/resourcecar/selectResourceListByDept',
+    method: 'get',
+    params,
+  })
+}
--- a/front/src/assets/home/kfzj_square.png
+++ b/front/src/assets/home/kfzj_square.png
--- a/front/src/assets/home/sjzy_square.png
+++ b/front/src/assets/home/sjzy_square.png
--- a/front/src/assets/home/sxt_square.png
+++ b/front/src/assets/home/sxt_square.png
--- a/front/src/assets/home/tcfw_square.png
+++ b/front/src/assets/home/tcfw_square.png
--- a/front/src/assets/home/ywzj_square.png
+++ b/front/src/assets/home/ywzj_square.png
--- a/front/src/assets/home/yyzy_square.png
+++ b/front/src/assets/home/yyzy_square.png
--- a/front/src/assets/home/znsf_square.png
+++ b/front/src/assets/home/znsf_square.png
--- a/front/src/assets/newHome/add-on.png
+++ b/front/src/assets/newHome/add-on.png
--- a/front/src/assets/newHome/add.png
+++ b/front/src/assets/newHome/add.png
--- a/front/src/assets/newHome/delete-on.png
+++ b/front/src/assets/newHome/delete-on.png
--- a/front/src/assets/newHome/pk-down.png
+++ b/front/src/assets/newHome/pk-down.png
--- a/front/src/assets/newHome/pk-on.png
+++ b/front/src/assets/newHome/pk-on.png
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@ -118,6 +118,16 @@ export const constantRoutes = [
      icon: 'error-warning-line',
    },
  },
+  {
+    path: '/algorithmCompare',
+    name: 'algorithmCompare',
+    hidden: true,
+    component: () => import('@/views/home/algorithmCompare'),
+    meta: {
+      title: '算法对比',
+      icon: 'error-warning-line',
+    },
+  },
  {
    path: '/addApplication',
    name: 'addApplication',
--- a/front/src/supermap/advance-init.js
+++ b/front/src/supermap/advance-init.js
@ -1681,6 +1681,7 @@ export function MapFun(mapObj) {
    //   })

    // }
+    _removeLayerByLayerName(layerName)
    let layers = null
    // 判断是否是聚合图层
    layers = createMarkerClusterLayer()
@ -1691,12 +1692,7 @@ export function MapFun(mapObj) {
    features.map((feature) => {
      var bounds = map.getBounds()
      // console.log("看看有没有坐标",feature.latLng);
-      if (
-        layerName == '全部'
-          ? feature.hasOwnProperty('latLng') &&
-            bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))
-          : feature.hasOwnProperty('latLng')
-      ) {
+      if ( feature.hasOwnProperty('latLng')) {
        const marker = L.marker(feature.latLng, { icon })
        if (createPopupFun !== null) {
          marker.uuid = feature.uuid || ''
@ -1730,43 +1726,14 @@ export function MapFun(mapObj) {
            }
          })
        }
+        marker.on('click', e=>{
+          console.log('点位数据', e)
+        })
        layers.addLayer(marker)
      }
    })
    featureGroup.addLayer(layers)
    layerGroup.set(layerName, layers)
-    // map.on('zoom', () => {
-    //   _removeLayerByLayerName(layerName)
-    //   let layers = null
-    //   // 判断是否是聚合图层
-    //   layers = createMarkerClusterLayer()
-    //   features.map(feature => {
-    //     var bounds = map.getBounds()
-    //     // console.log("看看有没有坐标",feature.latLng);
-    //     if (feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))) {
-    //       const marker = L.marker(feature.latLng, { icon })
-    //       if (createPopupFun !== null) {
-    //         marker.uuid = feature.uuid || ''
-    //         marker.resId = feature.resId || ''
-    //         marker.on('click', async e => {
-    //           if (feature.resourceName === 'video') {
-    //             const params = [feature.indexCode]
-    //             DS.openVideo(params)
-    //           } else {
-    //             const elementHtml = createPopupFun(feature)
-    //             if (elementHtml) {
-    //               console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map)
-    //               L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
-    //             }
-    //           }
-    //         })
-    //       }
-    //       layers.addLayer(marker)
-    //     }
-    //   })
-    //   featureGroup.addLayer(layers)
-    //   layerGroup.set(layerName, layers)
-    // })
  }
  /**
   * 点击展示弹窗
--- a/front/src/utils/request.js
+++ b/front/src/utils/request.js
@ -87,9 +87,9 @@ instance.interceptors.request.use(
 */
 instance.interceptors.response.use(
  (response) => {
-    console.log('接口返回', response)
-    console.log('接口返回headers', response.headers)
-    console.log('接口返回REDIRECT', response.headers.redirect)
+    // console.log('接口返回', response)
+    // console.log('接口返回headers', response.headers)
+    // console.log('接口返回REDIRECT', response.headers.redirect)

    if (response.headers.redirect === '/#/login') {
      var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
@ -109,7 +109,7 @@ instance.interceptors.response.use(
            new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com
        }
      }
-      console.log('已清除')
+      // console.log('已清除')
      setTimeout(() => {
        location.reload()
      }, 1000)
@ -147,13 +147,13 @@ instance.interceptors.response.use(
    // }
  },
  (error) => {
-    console.log('接口error', error)
+    // console.log('接口error', error)
    if (loadingInstance) loadingInstance.close()
    const { response, message } = error
    if (error.response && error.response.data) {
-      console.log('接口返回', response)
-      console.log('接口返回headers', response.headers)
-      console.log('接口返回REDIRECT1111', response.headers.redirect)
+      // console.log('接口返回', response)
+      // console.log('接口返回headers', response.headers)
+      // console.log('接口返回REDIRECT1111', response.headers.redirect)
      if (response.headers.redirect === '/#/login') {
        var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
        if (keys) {
@ -172,7 +172,7 @@ instance.interceptors.response.use(
              new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com
          }
        }
-        console.log('已清除')
+        // console.log('已清除')
        setTimeout(() => {
          location.reload()
        }, 1000)
--- a/front/src/vab/plugins/permissions.js
+++ b/front/src/vab/plugins/permissions.js
@ -1,8 +1,8 @@
 /*
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-01 17:23:11
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-04 16:32:38
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-29 09:54:19
 * @Description: 告诉大家这是什么
 */
 /**
@ -26,11 +26,11 @@ router.beforeEach(async (to, from, next) => {
  //   setAccessToken(SSOTOKEN)
  // }
  const token = getAccessToken()
-  console.log('token', token)
+  // console.log('token', token)
  let hasToken = token || store.getters['user/accessToken']
  // debugger
  if (!loginInterception) hasToken = true
-  console.log('hasToken存在巨大问题', hasToken)
+  // console.log('hasToken存在巨大问题', hasToken)
  if (hasToken) {
    setAccessToken(hasToken)
    await store.dispatch('user/getUserInfo')
--- a/front/src/views/abilityStatistics/components/AtlasResources.vue
+++ b/front/src/views/abilityStatistics/components/AtlasResources.vue
@ -121,6 +121,7 @@
 <script setup>
  import { nextTick, ref } from 'vue'
  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+  import { getCategoryTreePage } from '@/api/personalCenter'
  import {
    capabilityShareCapabilitySet,
    selectResourceListByDept,
@ -317,23 +318,20 @@
  // 右侧列表
  const dataList = ref([])
  // 所有领域类型
-  const allType = ref([
-    '社会治安',
-    '城市管理',
-    '疫情防控',
-    '危化品管理',
-    '交通运输',
-    '森林防火',
-    '防汛抗旱',
-    '文化旅游',
-    '非煤矿山',
-    '医疗卫生',
-    '安全生产',
-    '生态环境',
-    '农业农村',
-    '市场监管',
-    '政务服务',
-  ])
+  const allType = ref([])
+  getCategoryTreePage({
+    page: 1,
+    limit: 99,
+    dictTypeId: '1513712507692818433',
+  }).then((res) => {
+    // console.log('kasdjflkajsdlkf ', res.data.data)
+    allType.value = []
+    res.data.data.list.map((val) => {
+      if (val.dictLabel !== '其他') {
+        allType.value.push(val.dictLabel)
+      }
+    })
+  })
  const flag = ref('')
  const nowShow = ref(false)
  const showDetails = (item) => {
--- a/front/src/views/abilityStatistics/components/ResourceAggregation.vue
+++ b/front/src/views/abilityStatistics/components/ResourceAggregation.vue
@ -46,7 +46,7 @@
        <div class="left" id="left"></div>
        <div class="center"></div>
        <div class="right" id="right"></div>
-        <div class="right-son1">汇聚量</div>
+        <!-- <div class="right-son1">汇聚量</div> -->
        <div class="right-son2">部门数</div>
      </div>
    </div>
@ -287,6 +287,12 @@
  }
  //来源部门漏斗图
  const funnelPlot = (dataList) => {
+    // let arr = ['0-5', '5-10', '10-15', '15-20', '20以上']
+    // dataList.sort((a, b) => {
+    //   console.log(arr.indexOf(a.fanwei), arr.indexOf(b.fanwei))
+    //   return arr.indexOf(b.fanwei) - arr.indexOf(a.fanwei)
+    // })
+    console.log('============》', dataList)
    echarts.init(document.getElementById('right')).dispose()
    let chartDom = document.getElementById('right')
    let myChart = echarts.init(chartDom)
@ -318,6 +324,7 @@
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
+        show: false,
        type: 'value',
        min: 0,
        max: 20,
--- a/front/src/views/abilityStatistics/components/SharingSituation.vue
+++ b/front/src/views/abilityStatistics/components/SharingSituation.vue
@ -104,6 +104,11 @@
      yAxis: {
        type: 'value',
      },
+      tooltip: {
+        show: true,
+        trigger: 'item',
+        formatter: '{b}的浏览量：</br> {c} 次',
+      },
      series: [
        {
          data: datas.value,
--- a/front/src/views/assignCase/components/queryPage.vue
+++ b/front/src/views/assignCase/components/queryPage.vue
@ -30,10 +30,10 @@
                <span
                  v-for="(item, index) in tabClickData"
                  :key="index"
-                  :class="listBg == item.name ? 'down' : ''"
-                  @click="switchList(item.name)"
+                  :class="listBg == item.dictLabel ? 'down' : ''"
+                  @click="switchList(item.dictLabel)"
                >
-                  {{ item.name }}
+                  {{ item.dictLabel }}
                </span>
              </div>
              <a class="more" @click="lookmore(hidetext)">
@ -82,6 +82,7 @@
  import { ref, onMounted } from 'vue'
  // import { useStore } from 'vuex'
  import { pageWithAttrs } from '@/api/home.js'
+  import { getCategoryTreePage } from '@/api/personalCenter.js'
  import { useRouter } from 'vue-router'
  // import { pinyin } from 'pinyin-pro'
  // import { Empty } from 'ant-design-vue'
@ -159,6 +160,17 @@
      name: '其他',
    },
  ])
+  //赋能案例tab页接口
+  const tabChaXun = () => {
+    const params = {
+      page: 1,
+      limit: 99,
+      dictTypeId: '1513712507692818433',
+    }
+    getCategoryTreePage(params).then(({ data: res }) => {
+      tabClickData.value = res.data.list
+    })
+  }
  const tabClickShow = ref(false)
  const number = ref(0)
  const changeCards = (val) => {
@ -195,6 +207,7 @@
  }
  //查询分页接口
  const init = (list) => {
+    tabChaXun()
    let params = {
      deptIds: [],
      districtId: '',
--- a/front/src/views/capabilityCloud/components/ComponentServices.vue
+++ b/front/src/views/capabilityCloud/components/ComponentServices.vue
@ -93,7 +93,8 @@
              <div>
                <span>TOP</span>
                <span>名称</span>
-                <span>应用数</span>
+                <span v-if="dataclick != 'score'">应用数</span>
+                <span v-else>分数</span>
              </div>
              <div v-for="(item, index) in dataList" :key="index">
                <span>{{ index + 1 }}</span>
@ -116,8 +117,11 @@
  import {
    assemblerBaseStatic,
    componentServiceRank,
+    callTheTrendPort,
+    totalCallsSnum,
  } from '@/api/capabilityCloud'
  import * as moment from 'moment'
+  let xinhaianIsShow = whoShow.itShowXiHaiAn //判断是否是西海岸版本
  let snum = ref([
    { title: '上架总量', num: '0000' },
    { title: '总调用次数(API)', num: '0' },
@ -126,7 +130,12 @@
  let dataclick = ref('total')
  let dataList = ref([])
  let timeSwitchindex = ref('周')
-  let servicesSnum = ref([])
+  let servicesSnum = ref([
+    { amount: '', type: '智能算法' },
+    { amount: '', type: '图层服务' },
+    { amount: '', type: '开发组件' },
+    { amount: '', type: '业务组件' },
+  ])
  let callTheTrendData = ref({ time: [], snum: [] })
  //年月切换
  const timeSwitch = (name) => {
@ -139,20 +148,62 @@
          .subtract('days', 6 - i)
          .format('MM-DD')
        callTheTrendData.value.time.push(time)
-        callTheTrendData.value.snum.push('0')
        console.log('time', callTheTrendData.value, name)
      }
+      const start = parseInt(
+        (Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
+      )
+      const end = Date.parse(new Date()) / 1000
+      if (!xinhaianIsShow) {
+        callTheTrendPort(start, end, 86400).then((res) => {
+          if (res.data.data.result) {
+            res.data.data.result[0].values.splice(0, 1)
+            res.data.data.result[0].values.map((item) => {
+              callTheTrendData.value.snum.push(parseInt(item[1]))
+            })
            callTheTrend(callTheTrendData.value)
+          } else {
+            callTheTrendData.value.snum = ['0', '0', '0', '0', '0', '0', '0']
+            callTheTrend(callTheTrendData.value)
+          }
+        })
+      } else {
+        callTheTrend(callTheTrendData.value)
+      }
    } else {
      for (let i = 0; i < 31; i++) {
        let time = moment()
          .subtract('days', 30 - i)
          .format('MM-DD')
        callTheTrendData.value.time.push(time)
-        callTheTrendData.value.snum.push('0')
        console.log('time', callTheTrendData.value, name)
      }
+      const start = parseInt(
+        (Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
+      )
+      const end = Date.parse(new Date()) / 1000
+      if (!xinhaianIsShow) {
+        callTheTrendPort(start, end, 86400).then((res) => {
+          if (res.data.data.result) {
+            // res.data.data.result.splice(0, 1)
+            callTheTrendData.value.snum = []
+            res.data.data.result[0].values.map((item) => {
+              callTheTrendData.value.snum.push(
+                moment(item[0] * 1000).format('MM-DD')
+              )
+              callTheTrendData.value.snum.push(parseInt(item[1]))
+            })
            callTheTrend(callTheTrendData.value)
+          } else {
+            for (let i = 0; i < 30; i++) {
+              callTheTrendData.value.snum.push('0')
+            }
+            callTheTrend(callTheTrendData.value)
+          }
+        })
+      } else {
+        callTheTrend(callTheTrendData.value)
+      }
    }
  }
  //调用趋势echarts图
@ -162,6 +213,19 @@
    let myChart = echarts.init(chartDom)
    let option
    option = {
+      tooltip: {
+        backgroundColor: 'rgba(17,61,116,0.8)',
+        borderWidth: 0,
+        trigger: 'axis',
+        formatter: function (val) {
+          console.log(val)
+          let res = `<div style="background:rgba(17,61,116,0.8);border:1px soild rgba(28,119,205,0.8);color:#fff;padding:0">
+                      <span>日期 : ${val[0].name}</span>
+                      <div style="margin-left: 18px">调用次数 : ${val[0].value}</div>
+                  </div>`
+          return res
+        },
+      },
      grid: {
        top: '10%',
        left: '0%',
@ -288,15 +352,29 @@
      snum.value[0].num = res.data.data[0].amount
      res.data.data.map((item, index) => {
        if (index != 0) {
-          servicesSnum.value.push(item)
+          servicesSnum.value.map((servicesSnumitem, servicesSnumindex) => {
+            if (servicesSnumitem.type == item.type) {
+              servicesSnum.value[servicesSnumindex].amount = item.amount
+            }
+          })
        }
      })
    })
  }
+  //总调用次数接口
+  const TotalCallsAPI = () => {
+    const end = Date.parse(new Date()) / 1000
+    if (!xinhaianIsShow) {
+      totalCallsSnum(end).then((res) => {
+        snum.value[1].num = res.data.data.result[0].value[1]
+      })
+    }
+  }
  const init = () => {
    timeSwitch(timeSwitchindex.value)
    NumberOfComponentServices()
    ranking(dataclick.value)
+    TotalCallsAPI()
  }
  onMounted(() => {
    init()
--- a/front/src/views/capabilityCloud/components/DataResources.vue
+++ b/front/src/views/capabilityCloud/components/DataResources.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-19 10:15:33
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-24 15:04:52
+ * @LastEditTime: 2022-06-27 12:52:18
 * @Description: 告诉大家这是什么
 -->
 <template>
@ -144,8 +144,12 @@
      const object = res.data.data.filter((item) => item.type === val.name)[0]
      console.log('object', object)
      if (object) {
+        if (object.type == '满足率') {
+          val.num = object.amount * 100 + '%'
+        } else {
          val.num = object.amount
        }
+      }
    })
    const arr = res.data.data.filter((item) => item.resourceTop5)[0]
    console.log('数据资源数据===================>', arr)
@ -156,7 +160,8 @@
      })
      arr.resourceTop5.forEach((val, index) => {
        assignRankings.value[index].name = val['服务名称'] || ''
-        assignRankings.value[index].operation = val['申请次数'] || ''
+        assignRankings.value[index].operation =
+          val['申请次数'] >= 0 ? val['申请次数'] : ''
      })
    }
  })
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-17 14:11:08
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-20 16:40:33
+ * @LastEditTime: 2022-07-01 20:34:36
 * @Description: 上架
 -->
 <template>
@ -109,6 +109,18 @@
              v-model:value="item.note1"
              :options="item.options"
            />
+            <a-input
+              v-else-if="item.type == 'text'"
+              v-model:value="item.note1"
+              :placeholder="'请输入' + item.name"
+              :disabled="true"
+            />
+            <a-input
+              v-else-if="item.type == 'text2'"
+              v-model:value="item.note1"
+              :placeholder="'请输入' + item.name"
+              :disabled="true"
+            />
            <a-textarea
              v-else-if="item.type == 'textArea'"
              v-model:value="item.note1"
@ -153,6 +165,9 @@
              :list="props.videoList"
              tip="支持视频类型，大小不超过100M"
            ></upload>
+            <a-button v-else-if="item.type == 'dialog'" @click="sourceClick">
+              请选择来源应用
+            </a-button>
            <a-select
              v-else-if="item.type == 'select'"
              style="width: 240px"
@ -194,11 +209,15 @@
  </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+  import { ref, defineProps, watch, onMounted } from 'vue'
  import mybus from '@/myplugins/mybus'
  import upload from '@/views/components/upload'
  import { message } from 'ant-design-vue'
  import { getCategoryTreePage } from '@/api/personalCenter'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const abilityToType = router.currentRoute.value.query.abilityToType
+  const componentTypeValue = router.currentRoute.value.query.componentTypeValue
  const props = defineProps({
    // 展示数据
    refData: { type: Object, default: null },
@ -258,19 +277,28 @@
    //   ]
    // }]
  })
-  console.log('props==========>', props)
+  // console.log('props==========>', props)
  const data = ref({
    list: [],
  })
  const showKey = ref(0)
  props.refData.children.map((item) => {
+    if (item.name == '基本信息') {
+      item.children.map((val) => {
+        if (val.name == '能力类型') {
+          val.note1 = abilityToType
+        }
+        if (val.name == '组件类型') {
+          val.note1 = componentTypeValue
+        }
+      })
+    }
    if (
      props.configure &&
      props.configure.filter((val) => val.name === item.name).length > 0
    ) {
      item.isConfigure = true
      data.value[item.name] = []
-      console.log('item==========>', item, data.value)
    } else {
      item.isConfigure = false
    }
@ -313,7 +341,7 @@
    })
  })
  if (props.dataFrom) {
-    console.log(props.dataFrom, data.value.list)
+    // console.log(props.dataFrom, data.value.list)
    props.dataFrom.infoList.forEach((item) => {
      if (
        props.configure &&
@ -327,7 +355,7 @@
              // 通过;分割成数组
              child.note2 = item.attrValue.split(';')
              showKey.value++
-              console.log('应用领域', item, item.attrValue.split(';'), child)
+              // console.log('应用领域', item, item.attrValue.split(';'), child)
            }
          })
        })
@ -339,7 +367,7 @@
    let list = props.configure.filter((item) => item.name === title)[0].list
    let flag = true
    list.forEach((item) => {
-      console.log(item)
+      // console.log(item)
      if (item.type !== 'number' && !item.note1.length > 0) {
        flag = false
      } else if (item.type === 'number' && !item.note1 > 0) {
@ -352,7 +380,7 @@
        obj[item.field] = item.note1
      })
      data.value[title].push(obj)
-      console.log(data.value[title])
+      // console.log(data.value[title])
      mybus.emit('chageDataFrom', {
        attrType: title,
        attrValue: JSON.stringify(data.value[title]),
@ -375,7 +403,7 @@
    })
  }
  const ApplicationArea = (item, itemson) => {
-    console.log(item, itemson)
+    // console.log(item, itemson)
    if (item.note2.indexOf(itemson.dictLabel) === -1) {
      item.note2.push(itemson.dictLabel)
    } else {
@ -387,10 +415,11 @@
      delFlag: 0,
    })
  }
+  const sourceClick = () => {}
  watch(data.value.list, (newProps, oldProps) => {
-    console.log(newProps, oldProps)
+    // console.log(newProps, oldProps)
    newProps.forEach((val) => {
-      console.log('数据发生改变==========>', val)
+      // console.log('数据发生改变==========>', val)
      if (
        props.configure &&
        props.configure.filter((item) => item.name === val.name).length > 0
@ -512,12 +541,12 @@
            width: 570px;
          }
          .ant-btn {
-            width: 100px;
+            width: 160px;
            height: 32px;
            text-align: center;
-            background: #d9ebff;
+            background: #edf4fc;
            color: #0087ff;
-            border: 1px solid #0087ff;
+            border: 1px solid #bbd3ef;
            border-radius: 6px;
          }
        }
--- a/front/src/views/demandCenter/demandDetails.vue
+++ b/front/src/views/demandCenter/demandDetails.vue
@ -231,6 +231,7 @@
            size="small"
            pageSize="8"
            :total="total"
+            v-model:current="page"
            @change="handleCurrentChange"
          />
        </a-list>
@ -248,7 +249,7 @@
  import {
    demandComment,
    demandCommentPage,
-    demandCommentDelete,
+    // demandCommentDelete,
    demandCommentApply,
  } from '@/api/demandCenter'
  import { getUser, getUserInfo } from '@/api/home'
@ -264,15 +265,15 @@
    })
  })
  //删除提示框
-  const confirm = (item) => {
-    console.log(item)
-    evaluateDelete(item)
-  }
+  // const confirm = (item) => {
+  //   console.log(item)
+  //   evaluateDelete(item)
+  // }

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

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

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

@ -382,6 +384,7 @@
    // formName.value = formData.value
    const id = router.currentRoute.value.query.id
    getDemandForm(id).then((res) => {
+      console.log(res, 'res')
      const { data } = res.data
      formName.value.applyUserName = data.applyUserName
      formName.value.applyUserPhone = data.applyUserPhone
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@ -1,8 +1,8 @@
 <!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:32:22
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-20 18:58:46
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-06-30 17:06:56
 * @Description: 算法详情页
 -->
 <template>
@ -21,6 +21,13 @@
      id="algorithm-display"
      class="scrollBox"
    ></algorithm-display>
+    <!-- 关联能力 -->
+    <algorithm-associated-ability
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
+      id="algorithm-associated-ability"
+      class="scrollBox"
+    ></algorithm-associated-ability>
    <!-- 算法优势 -->
    <algorithm-advantage
      :dataList="dataList.data"
@ -70,6 +77,7 @@
 </template>
 <script setup>
  import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
+  import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
  import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
  import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
  import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
@ -81,15 +89,17 @@
  import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const scrollTop = ref(0)
  const domArr = ref([])
+  const loading = ref(true)
  const selectNow = ref('')
  const dataList = reactive({ data: {} })
  const id = router.currentRoute.value.query.id
  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
  document.body.style.transition = 'all 0.3s ease'
@ -128,6 +138,7 @@
  })

  const init = (id) => {
+    console.log(id, '-------------------------------------------------')
    if (id) {
      selectOne(id).then((res) => {
        // console.clear()
@ -148,6 +159,15 @@
          })
        }
      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+          loading.value = false
+        })
+      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:32:22
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-20 18:59:18
+ * @LastEditTime: 2022-06-30 10:22:31
 * @Description: 应用详情页
 -->
 <template>
@ -14,6 +14,7 @@
    <!-- 导航 -->
    <application-navigation
      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
      :class="{ fixed: scrollTop >= 600 }"
      :selectNow="selectNow"
    ></application-navigation>
@ -28,7 +29,14 @@
      :dataList="dataList.data"
      id="application-associated-components"
      class="scrollBox"
+      v-if="false"
    ></application-associated-components>
+    <!-- 关联能力 -->
+    <application-associated-ability
+      :associatedComponents="associatedComponentsFunction()"
+      id="application-associated-ability"
+      class="scrollBox"
+    ></application-associated-ability>
    <!-- 功能介绍-->
    <application-function-intorduction
      :dataList="dataList.data"
@ -64,6 +72,7 @@
 <script setup>
  import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
  import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
+  import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
  import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
  import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
  import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
@ -73,8 +82,13 @@
  import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
  import mybus from '@/myplugins/mybus'
+  const associatedComponents = ref([
+    { type: '组件服务', dataList: [] },
+    { type: '数据资源', dataList: [] },
+    { type: '基础设施', dataList: [] },
+  ])
  const router = useRouter()
  const scrollTop = ref(0)
  const domArr = ref([])
@ -124,9 +138,13 @@
      selectOne(id).then((res) => {
        // console.clear()
        dataList.data = res.data.data
-        console.log('初始化详情页=========================>', dataList.data)
        const arrList = ref([])
        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        console.log(
+          '初始化详情页=========================>',
+          dataList.data,
+          arrList.value
+        )
        if (arrList.value && arrList.value.indexOf(id) === -1) {
          arrList.value.push(id)
          updateVisits({
@ -140,11 +158,29 @@
          })
        }
      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
    }
  }
+  const associatedComponentsFunction = () => {
+    if (
+      associatedComponents.value[0].dataList.length > 0 ||
+      associatedComponents.value[1].dataList.length > 0 ||
+      associatedComponents.value[2].dataList.length > 0
+    ) {
+      return associatedComponents.value
+    }
+  }
  init(id)
  onBeforeUnmount(() => {
    mybus.off('flyToView')
--- a/front/src/views/detailsAll/BusinessDetails.vue
+++ b/front/src/views/detailsAll/BusinessDetails.vue
@ -12,9 +12,16 @@
    <!-- 导航 -->
    <business-navigation
      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
      :class="{ fixed: scrollTop >= 600 }"
      :selectNow="selectNow"
    ></business-navigation>
+    <!-- 关联能力 -->
+    <business-associated-ability
+      :associatedComponents="associatedComponents"
+      id="business-associated-ability"
+      class="scrollBox"
+    ></business-associated-ability>
    <!-- 组件展示 -->
    <business-presentation
      :dataList="dataList.data"
@ -55,6 +62,7 @@
 </template>
 <script setup>
  import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
+  import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
  import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
  import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
  import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
@ -64,7 +72,7 @@
  import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const scrollTop = ref(0)
@ -73,6 +81,7 @@
  const dataList = reactive({ data: {} })
  const id = router.currentRoute.value.query.id
  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
  document.body.style.transition = 'all 0.3s ease'
@ -131,6 +140,14 @@
          })
        }
      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@ -12,6 +12,7 @@
    <!-- 导航 -->
    <developer-navigation
      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
      :class="{ fixed: scrollTop >= 600 }"
      :selectNow="selectNow"
    ></developer-navigation>
@ -21,6 +22,12 @@
      id="eveloper-presentation"
      class="scrollBox"
    ></Developer-presentation>
+    <!-- 关联能力 -->
+    <developer-associated-ability
+      :associatedComponents="associatedComponents"
+      id="developer-associated-ability"
+      class="scrollBox"
+    ></developer-associated-ability>
    <!-- 功能介绍-->
    <developer-function-intorduction
      :dataList="dataList.data"
@ -61,6 +68,7 @@
 </template>
 <script setup>
  import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
+  import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
  import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
  import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
  import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
@ -71,7 +79,7 @@
  import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const scrollTop = ref(0)
@ -80,6 +88,7 @@
  const dataList = reactive({ data: {} })
  const id = router.currentRoute.value.query.id
  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
  document.body.style.transition = 'all 0.3s ease'
@ -138,6 +147,14 @@
          })
        }
      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
--- a/front/src/views/detailsAll/LayerService.vue
+++ b/front/src/views/detailsAll/LayerService.vue
@ -14,9 +14,16 @@
    <!-- 导航 -->
    <layer-service-navigation
      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
      :class="{ fixed: scrollTop >= 600 }"
      :selectNow="selectNow"
    ></layer-service-navigation>
+    <!-- 关联能力 -->
+    <layer-service-associated-ability
+      :associatedComponents="associatedComponents"
+      id="layer-service-associated-ability"
+      class="scrollBox"
+    ></layer-service-associated-ability>
    <!-- 图层展示  视频 -->
    <layer-service-presentation
      :dataList="dataList.data"
@ -63,6 +70,7 @@
 </template>
 <script setup>
  import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
+  import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
  import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
  import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
  import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
@ -73,7 +81,7 @@
  import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
-  import { updateVisits, selectOne } from '@/api/home'
+  import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const scrollTop = ref(0)
@ -82,6 +90,7 @@
  const dataList = reactive({ data: {} })
  const id = router.currentRoute.value.query.id
  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
  document.body.style.transition = 'all 0.3s ease'
@ -140,6 +149,14 @@
          })
        }
      })
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+        }
+        queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[index].dataList = res.data.data
+        })
+      })
    } else if (obj) {
      dataList.data = obj
      console.log('预览==============', obj)
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
@ -0,0 +1,124 @@
+<template>
+  <div class="application-associated-ability" v-if="flag">
+    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
+    <div class="application-associated-ability-main">
+      <div
+        class="associated-ability-card"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+        :key="dataListitem.id"
+        @click="switchFunction(dataListitem.id)"
+      >
+        <div class="associated-ability-card-title">
+          {{ dataListitem.name }}
+        </div>
+        <div class="associated-ability-card-content">
+          <div class="associated-ability-card-content-font">
+            {{ dataListitem.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const props = defineProps({
+    associatedComponents: { type: Array, default: null },
+  })
+  const dataFrom = ref([])
+  const flag = ref(true)
+  const oldid = router.currentRoute.value.query.id
+  //点击查看详情
+  const switchFunction = (id) => {
+    // router.push({
+    //   path: '/details',
+    //   query: {
+    //     id: id,
+    //   },
+    // })
+    window.open(window.SITE_CONFIG.previewUrl+ '#/details?id=' + id)
+    // alert(id)
+  }
+  console.log('这个是空值', props.associatedComponents[0])
+  if (props.associatedComponents[0].dataList.length > 0) {
+    console.log('这个是空值', props.associatedComponents)
+    flag.value = true
+    dataFrom.value = props.associatedComponents
+    console.log('dataFrom.value', dataFrom.value)
+  } else {
+    flag.value = false
+  }
+  watch(
+    () => props.associatedComponents,
+    (val) => {
+      if (val) {
+        flag.value = true
+        dataFrom.value = props.associatedComponents
+        console.log('dataFrom.value', dataFrom.value)
+      } else {
+        flag.value = false
+      }
+    }
+  )
+  watch(
+    () => router.currentRoute.value.query.id,
+    (newValue, oldValue) => {
+      if (oldid != router.currentRoute.value.query.id) {
+        window.location.reload()
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-associated-ability {
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .application-associated-ability-main {
+      margin-top: 0.4rem;
+      width: 13.3rem;
+      display: flex;
+      justify-content: space-around;
+      .associated-ability-card {
+        width: 3.2rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #e4e6f5;
+        border-radius: 0.1rem;
+        padding-bottom: 0.3rem;
+        cursor: pointer;
+        .associated-ability-card-title {
+          padding-top: 0.3rem;
+          font-size: 0.22rem;
+          text-align: center;
+        }
+        .associated-ability-card-content {
+          width: 100%;
+          margin-top: 0.25rem;
+          padding-left: 0.3rem;
+          .associated-ability-card-content-font {
+            font-size: 0.18rem;
+            color: #999;
+            margin-right: 0.15rem;
+            margin-top: 0.15rem;
+            text-align: center;
+          }
+        }
+      }
+      .associated-ability-card:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmChargingStandard.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmChargingStandard.vue
@ -7,7 +7,10 @@
    <div class="content">
      <div v-for="(item, index) in dataFrom" :key="index" class="content-card">
        <div class="content-title">{{ item.title }}</div>
+        <a-tooltip>
+          <template #title>{{ item.content }}</template>
          <div class="content-content">{{ item.content }}</div>
+        </a-tooltip>
        <div class="content-footer">
          <span>{{ item.unit }}</span>
          <span>{{ item.value }}</span>
@ -36,13 +39,46 @@
      obj.attrValue = JSON.parse(obj.attrValue)
      // dataFrom.value = obj
      obj.attrValue.map((item) => {
-        let params = {
+        let params = {}
+        switch (item.type) {
+          case '一次性买断':
+            params = {
              title: item.type,
              content: item.desc,
              value: item.price,
-          time: '/年起',
+              time: '元',
              unit: '￥',
            }
+            break
+          case '按调用次数':
+            params = {
+              title: item.type,
+              content: item.desc,
+              value: item.price,
+              time: '/次',
+              unit: '￥',
+            }
+            break
+
+          case '按并发路数':
+            params = {
+              title: item.type,
+              content: item.desc,
+              value: item.price,
+              time: '/路',
+              unit: '￥',
+            }
+            break
+          case '按年计费':
+            params = {
+              title: item.type,
+              content: item.desc,
+              value: item.price,
+              time: '/年',
+              unit: '￥',
+            }
+            break
+        }
        dataFrom.value.push(params)
      })
    }
@ -67,7 +103,7 @@
                  title: item.type,
                  content: item.desc,
                  value: item.price,
-                  time: '/元',
+                  time: '元',
                  unit: '￥',
                }
                break
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
@ -1,8 +1,8 @@
 <!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 14:54:01
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-15 18:32:23
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-06-30 17:09:40
 * @Description: 算法详情页导航
 -->
 <template>
@ -21,8 +21,14 @@
  </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+  import { useRouter } from 'vue-router'
  import mybus from '@/myplugins/mybus'
+  import { queryPartAppByKeyId2 } from '@/api/home'
+  // 获取当前路由地址
+  const router = useRouter()
+  const keyId = router.currentRoute.value.query.id
+  console.log('123', keyId)
  const navList = ref([
    {
      name: '算法展示',
@ -57,12 +63,28 @@
      key: 'common-problem',
    },
  ])
+  const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+    console.log('ressssssss', res)
+    if (res.data.data.length > 0) {
+      // 存在关联应用时在导航栏加入关联应用
+      navList.value.unshift({
+        name: '关联应用',
+        key: 'algorithm-associated-ability',
+        show: true,
+      })
+      // list.value.push('关联应用')
+      console.log('navList', navList)
+    }
+  })
  const props = defineProps({
    selectNow: { type: String, default: '' },
    dataList: { type: Object, default: null },
  })
+
  const select = ref('algorithm-display')
-  const list = ref([])
+
  const selectNav = (key) => {
    select.value = key
    mybus.emit('flyToView', select.value)
@ -83,7 +105,12 @@
        list.value.push('算法试用')
      } else if (item.attrType === '计费标准信息') {
        list.value.push('计费标准')
-      } else if (item.attrType === '技术文档') {
+      } else if (
+        item.attrType === '技术文档' ||
+        item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '服务商联系电话'
+      ) {
        list.value.push('使用方式')
      }
    })
@ -97,9 +124,11 @@
      'props.dataList.infoList==============>',
      navList.value.filter((item) => item.name === list.value[0])
    )
+    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
      select.value = navList.value.filter(
        (item) => item.name === list.value[0]
      )[0].key
+    }
    console.log('11111111111111111111111111', list.value, navList.value)
  }
  watch(
@ -127,10 +156,16 @@
            list.value.push('算法试用')
          } else if (item.attrType === '计费标准信息') {
            list.value.push('计费标准')
-          } else if (item.attrType === '技术文档') {
+          } else if (
+            item.attrType === '技术文档' ||
+            item.attrType === '服务商' ||
+            item.attrType === '服务商联系人' ||
+            item.attrType === '服务商联系电话'
+          ) {
            list.value.push('使用方式')
          }
        })
+        list.value.push('关联应用')
        navList.value.forEach((item) => {
          console.log(item)
          if (list.value.indexOf(item.name) > -1) {
@ -138,10 +173,12 @@
          }
        })
        if (list.value.length > 0) {
+          if (navList.value.filter((item) => item.name === list.value[0])[0]) {
            select.value = navList.value.filter(
              (item) => item.name === list.value[0]
            )[0].key
          }
+        }
        console.log('11111111111111111111111111', list.value, navList.value)
      }
    }
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
@ -2,14 +2,20 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:56:28
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-13 15:29:27
+ * @LastEditTime: 2022-07-01 14:16:18
 * @Description: 算法详情页头部
 -->
 <template>
  <div class="algorithm-top-details">
    <div class="left">
      <div class="top">
-        <span class="name">{{ props.dataList.name }}</span>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.name }}</template>
+          <span class="name">
+            {{ props.dataList.name }}
+          </span>
+        </a-tooltip>
+        <!-- <span class="name">{{ props.dataList.name }}</span> -->
        <div class="label-content">
          <p class="lable-father">
            <span class="label">
@ -22,10 +28,16 @@
        <!-- <span class="label">免费</span> -->
      </div>
      <div class="main">
+        <a-tooltip placement="top">
+          <template #title>应用领域：{{ applicationArea }}</template>
          <div>应用领域：{{ applicationArea }}</div>
+        </a-tooltip>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.description }}</template>
          <div>
            {{ props.dataList.description }}
          </div>
+        </a-tooltip>
      </div>
      <div class="bottom" v-if="props.dataList.id">
        <a-button type="primary" @click="toView()">
@ -34,7 +46,7 @@
        </a-button>
        <a-button type="primary" @click="addShoppingCart()">
          <template #icon><shopping-cart-outlined /></template>
-          加入购物车
+          加入申购车
        </a-button>
        <a-button type="primary" @click="goTOCollection()">收藏</a-button>
      </div>
@ -71,12 +83,28 @@
  //立即申请
  function toView() {
    // window.open(newpage.href, '_blank')
+    console.log('一键申请===================>', props.dataList)
+    localStorage.setItem(
+      'applyList',
+      JSON.stringify([
+        {
+          arr: [
+            {
+              delFlag: props.dataList.delFlag,
+              description: props.dataList.description,
+              resourceId: props.dataList.id,
+              resourceName: props.dataList.name,
+              time: props.dataList.createDate,
+              type: props.dataList.type,
+            },
+          ],
+          deptId: props.dataList.deptId,
+          deptName: props.dataList.deptName,
+        },
+      ])
+    )
    router.push({
      path: '/apply',
-      query: {
-        name: props.dataList.name,
-        resourceId: [props.dataList.id],
-      },
    })
  }
  const componentType = ref('')
@ -137,20 +165,27 @@
        }
        .name {
          display: inline-block;
-          width: 10.2rem;
+          // width: 10.2rem;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
          font-size: 40px;
          margin-right: 20px;
+          max-width: 7rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
        }
        .label-content {
          position: relative;
        }
        .lable-father {
          position: absolute;
-          min-width: 2.5rem;
-          right: -2.5rem;
+          min-width: 3.5rem;
+          right: -3.5rem;
          top: 0;
        }
        .label {
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
@ -27,7 +27,7 @@
        </div>
        <div class="right">
          <div @click="technical()">技术文档</div>
-          <div>新手指引</div>
+          <!-- <div>新手指引</div> -->
        </div>
      </div>
      <div class="content-right">
@ -73,13 +73,13 @@
        titleSon: '调用接口',
        link: {
          name: '接口地址：',
-          value: 'http://localhost:9999/#/details?id=1532278256619307010',
+          value: '',
        },
        postMethod: {
          name: '请求方式：',
-          value: 'POST',
+          value: '',
        },
-        contact: '联系厂商：',
+        contact: '联系厂商',
        facilitator: { name: '服务商：', value: '科大讯飞' },
        people: { name: '联系人：', value: '李四' },
        phone: {
@ -97,7 +97,11 @@
  const flag = ref(true)
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
-      (item) => item.attrType === '技术文档'
+      (item) =>
+        item.attrType === '技术文档' ||
+        item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '服务商联系电话'
    )[0]
    if (!obj) {
      flag.value = false
@ -116,8 +120,12 @@
          dataFrom.value.content[0].people.value = item.attrValue || '--'
        } else if (item.attrType === '服务商联系电话') {
          dataFrom.value.content[0].phone.value = item.attrValue || '--'
-        } else if (item.attrType === '技术文档') {
-          dataFrom.value.link = item.attrValue || '--'
+        }
+        // } else if (item.attrType === '技术文档') {
+        //   dataFrom.value.link = item.attrValue || '--'
+        // }
+        else if (item.attrType === '服务接口') {
+          dataFrom.value.content[0].link.value = item.attrValue || '--'
        }
      })
    }
@ -126,7 +134,13 @@
    () => props.dataList,
    (val) => {
      if (val) {
-        let obj = val.infoList.filter((item) => item.attrType === '技术文档')[0]
+        let obj = val.infoList.filter(
+          (item) =>
+            item.attrType === '技术文档' ||
+            item.attrType === '服务商' ||
+            item.attrType === '服务商联系人' ||
+            item.attrType === '服务商联系电话'
+        )[0]
        if (!obj) {
          flag.value = false
        } else {
@ -143,8 +157,12 @@
              dataFrom.value.content[0].people.value = item.attrValue || '--'
            } else if (item.attrType === '服务商联系电话') {
              dataFrom.value.content[0].phone.value = item.attrValue || '--'
-            } else if (item.attrType === '技术文档') {
-              dataFrom.value.link = item.attrValue || '--'
+            }
+            // else if (item.attrType === '技术文档') {
+            //   dataFrom.value.link = item.attrValue || '--'
+            // }
+            else if (item.attrType === '服务接口') {
+              dataFrom.value.content[0].link.value = item.attrValue || '--'
            }
          })
        }
@ -152,20 +170,23 @@
    }
  )
  function technical() {
-
    // 拼接路径
-    const type = pinyin(props.dataList.type, {
-      pattern: 'initial',
-    }).replace(/\s*/g, '')
-    // 打开文档
-    const id = props.dataList.id
-    window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    // const type = pinyin(props.dataList.type, {
+    //   pattern: 'initial',
+    // }).replace(/\s*/g, '')
+    // // 打开文档
+    // const id = props.dataList.id
+    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
    // console.log('dataFrom.value.link', dataFrom.value.link)
-    // window.open(
-    //   window.SITE_CONFIG.previewUrl +
-    //     'hisense_office/onlinePreview?url=' +
-    //     btoa(encodeURI(dataFrom.value.link))
-    // )
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '技术文档'
+    )[0]
+    console.log('dataFrom.value.link', obj.attrValue)
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(obj.attrValue))
+    )
  }
 </script>

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
wuhongjian	f8588795c4	合并版本	2022-07-04 11:57:44 +08:00
wuhongjian	7303904f68	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-04 11:27:24 +08:00
wuhongjian	d87bf2ded9	bug修复	2022-07-04 11:27:21 +08:00
851673013@qq.com	d4ecfc74a4	关联组件问题	2022-07-04 11:24:29 +08:00
851673013@qq.com	e849f37f1e	应用资源详情bug	2022-07-04 10:38:50 +08:00
gaoxiaolong	5f0aec483b	使用组件统计	2022-07-04 09:37:21 +08:00
a0049873	1846356272	判断修改	2022-07-04 09:27:52 +08:00
a0049873	82b72fd5f6	BUG修改	2022-07-01 20:22:51 +08:00
gaoyuanwei	d13fe453ce	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-01 20:14:38 +08:00
gaoyuanwei	f2431d18e5	bug	2022-07-01 20:14:28 +08:00
a0049873	b7939e4636	BUG修改	2022-07-01 20:13:39 +08:00
gaoyuanwei	0cf0c4b4b8	算法详情页	2022-07-01 19:48:49 +08:00
gaoyuanwei	c4a2acd8a7	bug修改	2022-07-01 19:32:48 +08:00
a0049873	3f77db2ff8	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-01 19:02:56 +08:00
a0049873	d50b0a0dca	BUG修改	2022-07-01 19:02:49 +08:00
851673013@qq.com	40804a7b9d	西海岸版本不调用能力云图中的组件服务的调用趋势和总调用次数接口	2022-07-01 18:59:46 +08:00
a0049873	6550188e13	BUG修改	2022-07-01 18:54:03 +08:00
gaoyuanwei	076ea19f88	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-01 18:33:26 +08:00
gaoyuanwei	d75d7e1eab	BUG修改	2022-07-01 18:33:11 +08:00
a0049873	ae80f57dcc	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev # Conflicts: # front/src/views/home/infrastructurePage.vue	2022-07-01 18:24:43 +08:00
a0049873	2fdfa22266	BUG修改	2022-07-01 18:23:43 +08:00
851673013@qq.com	0d110a5af6	基础设施-bug414	2022-07-01 18:20:43 +08:00
gaoyuanwei	46e5c6dbb6	能力上架详情页修改	2022-07-01 17:58:25 +08:00
851673013@qq.com	17fc21cf1e	智能算法bug-修改	2022-07-01 17:57:08 +08:00
851673013@qq.com	935c80ee87	智能算法回退版本	2022-07-01 17:36:41 +08:00
851673013@qq.com	8789176e4a	详情页关联组件	2022-07-01 17:27:01 +08:00
guoyue	5e01fbe880	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-01 17:25:58 +08:00
guoyue	260302e1df	增加融合服务页面	2022-07-01 17:25:21 +08:00
851673013@qq.com	fe1c1931f0	图层服务-开发组件-业务组件bug406更改	2022-07-01 17:22:37 +08:00
851673013@qq.com	d0bbe8d909	能力云图	2022-07-01 17:05:15 +08:00
wuhongjian	418b5f1de7	bug修复	2022-07-01 17:03:15 +08:00
gaoyuanwei	5d8416a0a4	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-01 15:59:12 +08:00
gaoyuanwei	e5ea56b29f	bug 元--单位	2022-07-01 15:58:59 +08:00
851673013@qq.com	d347e274c5	开发组件bug	2022-07-01 15:53:16 +08:00
guoyue	cacb9ec52e	工作台:待办已办路由跳转	2022-07-01 15:43:13 +08:00
guoyue	5c5a3b497f	样式微调	2022-07-01 14:54:57 +08:00
guoyue	8809317979	样式微调	2022-07-01 14:53:40 +08:00
guoyue	76b9b27a8d	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-01 14:50:46 +08:00
guoyue	bcaddcd4fa	工作台优化	2022-07-01 14:50:29 +08:00
851673013@qq.com	75a56eec3a	能力云图bug	2022-07-01 14:40:38 +08:00
a0049873	9e609538f1	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev # Conflicts: # front/src/views/personalCenter/components/MyApply.vue	2022-07-01 14:32:40 +08:00
a0049873	4f11e078b8	新增能力集市和详情页申请功能摄像头申请功能完善	2022-07-01 14:31:46 +08:00
851673013@qq.com	b9ed594f1c	能力汇聚查看更多	2022-07-01 14:24:41 +08:00
guoyue	2b01c0efa4	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-01 14:03:42 +08:00
guoyue	e7bc4e8f0c	更改色度值，去掉调用数量	2022-07-01 14:03:31 +08:00
851673013@qq.com	2e3db9a60d	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-01 13:47:54 +08:00
851673013@qq.com	96502e05c6	能力云图	2022-07-01 13:47:32 +08:00
gaoyuanwei	f30d67b7d4	bug 接口请求方式	2022-07-01 13:46:49 +08:00
guoyue	02639e6696	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-01 13:30:24 +08:00
guoyue	930eae441d	工作台:待办已办数量更改	2022-07-01 13:29:38 +08:00
gaoyuanwei	11a2eb5602	bug	2022-07-01 11:24:19 +08:00
a0049873	91c7e6c904	添加删除校验	2022-07-01 11:10:58 +08:00
wuhongjian	e9031d0a45	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-07-01 11:10:25 +08:00
wuhongjian	c8e1881fae	bug修复	2022-07-01 11:10:23 +08:00
a0049873	97a24aa4c1	BUG修改	2022-07-01 10:50:29 +08:00
851673013@qq.com	cf0bb02b43	赋能案例	2022-07-01 10:33:34 +08:00
a0049873	aff2ebda88	BUG修改	2022-07-01 10:33:11 +08:00
gaoxiaolong	146d80cd78	组件使用UI	2022-07-01 10:29:01 +08:00
gaoxiaolong	f47d964105	使用组件	2022-07-01 09:16:41 +08:00
851673013@qq.com	e093ab7aab	运行监控	2022-06-30 21:24:49 +08:00
gaoyuanwei	ecdc04930d	免批申请、免费试用按钮取消 && 详情页标签折行问题 && 基础设施感知为空 &&新建工作流程提示错误	2022-06-30 21:19:57 +08:00
gaoyuanwei	d898bbec7e	详情页、审批bug修改	2022-06-30 19:44:50 +08:00
wuhongjian	2663665321	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-30 19:06:55 +08:00
wuhongjian	8fcdff051b	bug修复	2022-06-30 19:04:35 +08:00
gaoyuanwei	0f67147f8c	.ant-message	2022-06-30 18:52:54 +08:00
a0049873	9bf47e3223	BUG修改	2022-06-30 18:48:59 +08:00
a0049873	cb19d42c9e	BUG修改	2022-06-30 18:26:39 +08:00
a0049873	ecd5c76998	BUG修改	2022-06-30 18:18:10 +08:00
gaoxiaolong	814ed5ff92	能力统计	2022-06-30 17:53:47 +08:00
hucongqian	702c685372	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-30 16:50:06 +08:00
hucongqian	5ead4f085b	趋势接口修改	2022-06-30 16:50:01 +08:00
gaoyuanwei	e6001c4db1	图层服务	2022-06-30 16:19:57 +08:00
a0049873	ea4736c0b7	BUG修改	2022-06-30 15:53:45 +08:00
a0049873	9f9ab46f28	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-30 15:40:09 +08:00
a0049873	120f753db2	摄像头最多选10个	2022-06-30 15:40:03 +08:00
gaoyuanwei	c6c820c827	331-开发组件	2022-06-30 15:35:49 +08:00
a0049873	0f6b37e52e	摄像头申请流程	2022-06-30 15:27:16 +08:00
hucongqian	c4b6faaa6d	尺寸调整	2022-06-30 14:37:45 +08:00
hucongqian	5d1c2d51ee	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-30 14:25:39 +08:00
hucongqian	2339b13ec8	部门发布能力被调用趋势	2022-06-30 14:25:27 +08:00
guoyue	10c21d5eac	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-30 13:52:06 +08:00
guoyue	fdce918f4a	样式微调	2022-06-30 13:51:53 +08:00
hucongqian	ea6d5376da	title组件修复	2022-06-30 13:47:21 +08:00
hucongqian	05736161fb	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-30 13:46:28 +08:00
hucongqian	71372ec21e	部门推荐返参字段调整	2022-06-30 13:38:13 +08:00
guoyue	54dcf5073e	fix	2022-06-30 13:29:05 +08:00
guoyue	e9cd3ce4ff	工作台：echart调整	2022-06-30 13:26:47 +08:00
guoyue	b4d28c2418	工作台：添加loading	2022-06-30 13:15:27 +08:00
guoyue	6c88eb6da3	更改标题	2022-06-30 13:03:17 +08:00
guoyue	2fa8bdc869	工作台：top5	2022-06-30 13:01:54 +08:00
guoyue	f0bd3218a9	合并	2022-06-30 12:04:31 +08:00
guoyue	0295f0b967	工作台：频率	2022-06-30 12:03:21 +08:00
hucongqian	7b3a32fb77	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-30 12:01:38 +08:00
guoyue	eb2ec69927	工作台：echart调整	2022-06-30 11:45:07 +08:00
gaoyuanwei	1aa48bd4e6	318-详情页标题tip（5个）	2022-06-30 11:42:01 +08:00
hucongqian	fb1b9327ce	部门发布动态，推荐能力	2022-06-30 11:04:32 +08:00
guoyue	dd6d8018d8	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-30 10:51:34 +08:00
guoyue	729681a785	工作台：中间	2022-06-30 10:51:16 +08:00
a0049873	3468a95a7c	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-30 10:42:20 +08:00
a0049873	bf0b25eace	BUG修改	2022-06-30 10:42:09 +08:00
guoyue	6125962265	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-30 10:39:16 +08:00
guoyue	42fcb9e7cc	fix：数据初始渲染不出来的问题	2022-06-30 10:39:02 +08:00
guoyue	9e045b0503	联调饼图api	2022-06-30 10:33:23 +08:00
gaoyuanwei	802a940dc0	303-知识库浏览量	2022-06-30 10:30:53 +08:00
a0049873	a4c46b8edf	BUG修改	2022-06-30 10:28:02 +08:00
a0049873	f2921a0227	算法PK隐藏全选	2022-06-30 10:12:28 +08:00
851673013@qq.com	08b971c411	bug修改	2022-06-30 10:09:05 +08:00
wuhongjian	976e588372	购物车	2022-06-30 09:34:16 +08:00
851673013@qq.com	ff1aea83f7	组件服务详情	2022-06-29 19:12:12 +08:00
851673013@qq.com	80f61d0698	组件详情	2022-06-29 18:53:53 +08:00
wuhongjian	ab7e377dea	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-29 18:37:29 +08:00
wuhongjian	ffaabe340a	视频资源	2022-06-29 18:36:50 +08:00
a0049873	50d0576a70	能力申请	2022-06-29 18:23:08 +08:00
a0049873	ca69c86577	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev # Conflicts: # front/src/views/home/apply.vue	2022-06-29 17:30:59 +08:00
a0049873	ccbcab8dfa	新能力申请	2022-06-29 17:28:49 +08:00
guoyue	a7bedfaf59	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-29 17:23:40 +08:00
guoyue	819806a367	工作台：联调待办已办api	2022-06-29 17:23:32 +08:00
851673013@qq.com	2a6ba26594	关联能力	2022-06-29 16:56:51 +08:00
gaoyuanwei	8287422d9a	333-输入框上面的黑框提示取消	2022-06-29 15:54:22 +08:00
guoyue	b4dc1b3d83	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-29 15:50:41 +08:00
guoyue	24e8607277	add: 工作台	2022-06-29 15:50:26 +08:00
gaoyuanwei	53e03ef413	339-摘要提示错误	2022-06-29 15:09:02 +08:00
gaoyuanwei	592c506c23	341个人办公-工作动态-预览格式问题	2022-06-29 14:34:42 +08:00
gaoyuanwei	738ebda646	349能力挂载-基础设施-搜索框清空问题	2022-06-29 11:40:45 +08:00
851673013@qq.com	cf1f75fd83	能力集市分页bug	2022-06-29 11:37:47 +08:00
gaoyuanwei	3fb7474426	图层服务bug	2022-06-29 11:31:25 +08:00
851673013@qq.com	d4a8ebf34f	能力集市添加pagenum	2022-06-29 10:47:03 +08:00
gaoyuanwei	eb02d71771	317能力集市日期折行	2022-06-29 10:24:12 +08:00
gaoyuanwei	dc57556a6c	319图层服务详情页	2022-06-29 10:18:26 +08:00
851673013@qq.com	111aa16692	bug269	2022-06-29 10:06:00 +08:00
a0049873	7cfebcfef8	能力申请页面 console注释	2022-06-29 09:56:01 +08:00
851673013@qq.com	4540430fa6	bug268	2022-06-29 09:50:28 +08:00
851673013@qq.com	cc36886687	bug271	2022-06-29 09:46:02 +08:00
851673013@qq.com	17749b6df6	bug334	2022-06-29 09:32:51 +08:00
wuhongjian	4c77a55ae7	基础设施联调	2022-06-28 22:24:05 +08:00
a0049873	c53e96d0c3	新申购车	2022-06-28 21:49:50 +08:00
851673013@qq.com	107be0c3f4	bug329	2022-06-28 20:04:46 +08:00
gaoyuanwei	194f6fcb3c	能力运行监控	2022-06-28 19:25:05 +08:00
851673013@qq.com	961a8076fd	API异常分析	2022-06-28 17:28:47 +08:00
gaoyuanwei	58d9b209b7	能力运行监控饼图	2022-06-28 17:18:50 +08:00
gaoyuanwei	d4e47eafe6	能力运行监控上半部分	2022-06-28 16:55:41 +08:00
851673013@qq.com	3ab89fcfec	API请求分析静态页面	2022-06-28 16:35:25 +08:00
851673013@qq.com	be36fc8631	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-28 10:40:56 +08:00
gaoxiaolong	1e4db8a594	树接口	2022-06-28 10:40:43 +08:00
851673013@qq.com	3b4de725cd	能力运行监控img	2022-06-28 10:40:38 +08:00
guoyue	3672d8fbf8	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-28 10:32:58 +08:00
guoyue	dff7bc51e7	fix: 算法对比-锚点	2022-06-28 10:32:28 +08:00
wuhongjian	5cf50fe7f7	bug修复	2022-06-28 10:31:46 +08:00
851673013@qq.com	aba4021537	能力运行监控	2022-06-28 10:04:58 +08:00
wuhongjian	019da30ff5	Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-27 18:54:20 +08:00
wuhongjian	9d9a3a2278	地图添加	2022-06-27 18:53:51 +08:00
gaoyuanwei	c160e5e08e	基础建设--选项卡修改	2022-06-27 18:13:13 +08:00
851673013@qq.com	aea65eb40c	选中样式修改	2022-06-27 17:08:49 +08:00
851673013@qq.com	5ebcd9630b	基础设施左侧列表	2022-06-27 17:03:19 +08:00
gaoyuanwei	93071ea26c	热门能力bug修改	2022-06-27 16:49:14 +08:00
851673013@qq.com	8d28f41b20	bug 294	2022-06-27 15:03:59 +08:00
guoyue	d2423b751d	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-27 14:47:49 +08:00
guoyue	5005bf2f06	算法对比：左册导航跟右侧滚动联动	2022-06-27 14:47:23 +08:00
a0049873	3738985ade	后台能力申请页面开发前台申购车重构新增市局数据资源跳转	2022-06-27 14:27:50 +08:00
851673013@qq.com	8737b2e89b	bug288	2022-06-27 14:16:21 +08:00
851673013@qq.com	0adb286827	详情页bug279	2022-06-27 14:09:55 +08:00
guoyue	1410884d61	算法对比，暂存	2022-06-27 13:52:16 +08:00
851673013@qq.com	e0ed9d7f60	详情页bug	2022-06-27 11:49:47 +08:00
a0049873	01f05b1963	eslint	2022-06-27 09:43:37 +08:00
gaoyuanwei	03c4325919	基础设施-选中数量绑定	2022-06-25 15:26:42 +08:00
851673013@qq.com	e309dbbb90	基础设施	2022-06-25 15:08:19 +08:00
gaoxiaolong	a357f1a1b0	npm install	2022-06-25 15:05:37 +08:00
guoyue	ff14614874	去掉footer	2022-06-25 14:46:04 +08:00
guoyue	c6c9d06b85	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev	2022-06-25 14:01:30 +08:00
guoyue	b379c87cd4	优化对比算法	2022-06-25 14:00:45 +08:00
gaoyuanwei	598f60ca17	基础设施外部引用	2022-06-25 13:45:26 +08:00
gaoyuanwei	d4d9f068c3	基础设施-初始页面	2022-06-25 13:34:24 +08:00
gaoxiaolong	9accfa4f29	样式修改	2022-06-25 11:36:39 +08:00
guoyue	8f8387c80d	add: 算法对比--路由跳转	2022-06-25 11:12:54 +08:00
guoyue	7339d16220	Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev # Conflicts: # front/src/views/home/components/searchResultList.vue	2022-06-25 10:40:03 +08:00
guoyue	b335bee61c	算法对比(暂存)	2022-06-23 19:58:44 +08:00
guoyue	3ceb5b59de	算法对比	2022-06-23 13:19:52 +08:00
guoyue	96f2b8b1f3	add: 算法对比	2022-06-23 12:43:02 +08:00