From 52ece255f3fac5126d9e195520e63c4b06e50c9a Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Tue, 19 Jul 2022 09:45:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../newHome/components/PopularAbility.vue     | 329 +++++++++---------
 1 file changed, 163 insertions(+), 166 deletions(-)

diff --git a/front/src/views/newHome/components/PopularAbility.vue b/front/src/views/newHome/components/PopularAbility.vue
index 72f7144f..0ec931e8 100644
--- a/front/src/views/newHome/components/PopularAbility.vue
+++ b/front/src/views/newHome/components/PopularAbility.vue
@@ -153,200 +153,197 @@
   }
 </script>
 <style lang="less" scoped>
-    .popular-ability {
-      height: 6.8rem;
-      background: url('~@/assets/newHome/popular-bg.png') no-repeat;
-      background-size: 100%;
+  .popular-ability {
+    height: 6.8rem;
+    background: url('~@/assets/newHome/popular-bg.png') no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    .main {
+      width: 13rem;
+      margin-top: 0.78rem;
       display: flex;
-      justify-content: center;
-      .main {
-        width: 13rem;
-        margin-top: 0.78rem;
+      flex-direction: column;
+      flex-wrap: wrap;
+      .top {
+        font-size: 0.3rem;
+        color: #fff;
+        text-align: center;
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
-        .top {
-          font-size: 0.3rem;
-          color: #fff;
-          text-align: center;
+        justify-content: center;
+        align-items: center;
+        .line {
+          width: 0.34rem;
+          height: 0.03rem;
+          background-color: #fff;
+          margin-top: 0.08rem;
+        }
+      }
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 0.52rem;
+        .left {
           display: flex;
           flex-direction: column;
           flex-wrap: wrap;
-          justify-content: center;
-          align-items: center;
-          .line {
-            width: 0.34rem;
-            height: 0.03rem;
-            background-color: #fff;
-            margin-top: 0.08rem;
-          }
-        }
-        .bottom {
-          display: flex;
-          justify-content: space-between;
-          margin-top: 0.52rem;
-          .left {
+          .select {
+            cursor: pointer;
             display: flex;
             flex-direction: column;
             flex-wrap: wrap;
-            .select {
-              cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            width: 1.05rem;
+            height: 1.39rem;
+            background: rgba(255, 255, 255, 0.08);
+            margin-bottom: 0.01rem;
+            border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
+            .img {
+              width: 0.36rem;
+              height: 0.36rem;
+              background-size: 100%;
+            }
+            .fwl {
+              background: url('~@/assets/newHome/fwl-no.png') no-repeat;
+              background-size: contain;
+            }
+            .sgl {
+              background: url('~@/assets/newHome/sgl-no.png') no-repeat;
+              background-size: contain;
+            }
+            .scl {
+              background: url('~@/assets/newHome/scl-no.png') no-repeat;
+              background-size: contain;
+            }
+            .text {
+              color: rgba(255, 255, 255, 0.6);
+              font-size: 0.14rem;
+              margin-top: 0.08rem;
+            }
+          }
+          .select:hover {
+            background: rgba(255, 255, 255, 0.12);
+          }
+          .checked {
+            background: rgba(255, 255, 255, 0.18) !important;
+            border-right: 0.02rem solid #fff;
+          }
+        }
+        .right {
+          cursor: pointer;
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          margin-left: 0.2rem;
+          .item {
+            width: 3.78rem;
+            height: 2rem;
+            display: flex;
+            .item-left {
+              width: 0.83rem;
+              height: 100%;
               display: flex;
-              flex-direction: column;
-              flex-wrap: wrap;
-              align-items: center;
               justify-content: center;
-              width: 1.05rem;
-              height: 1.39rem;
-              background: rgba(255, 255, 255, 0.08);
-              margin-bottom: 0.01rem;
-              border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
+              align-items: center;
+              background: #eef1f8;
               .img {
-                width: 0.36rem;
-                height: 0.36rem;
+                width: 0.56rem;
+                height: 0.56rem;
                 background-size: 100%;
               }
-              .fwl {
-                background: url('~@/assets/newHome/fwl-no.png') no-repeat;
+              .zj {
+                background: url('~@/assets/newHome/popular-zj.png') no-repeat;
                 background-size: contain;
               }
-              .sgl {
-                background: url('~@/assets/newHome/sgl-no.png') no-repeat;
+              .yy {
+                background: url('~@/assets/newHome/popular-yy.png') no-repeat;
                 background-size: contain;
               }
-              .scl {
-                background: url('~@/assets/newHome/scl-no.png') no-repeat;
+              .jc {
+                background: url('~@/assets/newHome/popular-jc.png') no-repeat;
                 background-size: contain;
               }
+              .sj {
+                background: url('~@/assets/newHome/popular-sj.png') no-repeat;
+                background-size: contain;
+              }
+              .zs {
+                background: url('~@/assets/newHome/popular-zs.png') no-repeat;
+                background-size: contain;
+              }
+            }
+            .item-right {
+              width: 100%;
+              height: 100%;
+              background: #fff;
+              .fw {
+                width: 100%;
+                padding-right: 0.1rem;
+                padding-top: 0.03rem;
+                text-align: right;
+                color: 666;
+                font-size: 0.14rem;
+                color: #666;
+              }
+              .name {
+                font-size: 0.18rem;
+                color: #212121;
+                text-align: center;
+                margin-top: 0.05rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+              }
               .text {
-                color: rgba(255, 255, 255, 0.6);
-                font-size: 0.14rem;
-                margin-top: 0.08rem;
-              }
-            }
-            .select:hover {
-              background: rgba(255, 255, 255, 0.12);
-            }
-            .checked {
-              background: rgba(255, 255, 255, 0.18) !important;
-              border-right: 0.02rem solid #fff;
-            }
-          }
-          .right {
-            cursor: pointer;
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            margin-left: 0.2rem;
-            .item {
-              width: 3.78rem;
-              height: 2rem;
-              display: flex;
-              .item-left {
-                width: 0.83rem;
-                height: 100%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                background: #eef1f8;
-                .img {
-                  width: 0.56rem;
-                  height: 0.56rem;
-                  background-size: 100%;
-                }
-                .zj {
-                  background: url('~@/assets/newHome/popular-zj.png') no-repeat;
-                  background-size: contain;
-                }
-                .yy {
-                  background: url('~@/assets/newHome/popular-yy.png') no-repeat;
-                  background-size: contain;
-                }
-                .jc {
-                  background: url('~@/assets/newHome/popular-jc.png') no-repeat;
-                  background-size: contain;
-                }
-                .sj {
-                  background: url('~@/assets/newHome/popular-sj.png') no-repeat;
-                  background-size: contain;
-                }
-                .zs {
-                  background: url('~@/assets/newHome/popular-zs.png') no-repeat;
-                  background-size: contain;
-                }
-              }
-              .item-right {
                 width: 100%;
-                height: 100%;
-                background: #fff;
-                .fw {
-                  width: 100%;
-                  padding-right: 0.1rem;
-                  padding-top: 0.03rem;
-                  text-align: right;
-                  color: 666;
-                  font-size: 0.14rem;
-                  color: #666;
-                }
-                .name {
-                  font-size: 0.18rem;
-                  color: #212121;
-                  text-align: center;
-                  margin-top: 0.05rem;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  display: -webkit-box;
-                  -webkit-line-clamp: 1;
-                  -webkit-box-orient: vertical;
-                  word-break: break-all;
-                }
-                .text {
-                  width: 100%;
-                  padding: 0.24rem 0.3rem;
-                  font-size: 0.14rem;
-                  color: #212121;
-                  line-height: 0.24rem;
-                  height: 1rem;
-  <<<<<<< HEAD
-  =======
-                  word-break: break-all;
-  >>>>>>> caf80caeffc467a237900c464204e8f426e3e6e6
-                  overflow: hidden;
-                }
+                padding: 0.24rem 0.3rem;
+                font-size: 0.14rem;
+                color: #212121;
+                line-height: 0.24rem;
+                height: 1rem;
+                word-break: break-all;
+                overflow: hidden;
               }
             }
-            .item:nth-of-type(4),
-            .item:nth-of-type(5),
-            .item:nth-of-type(6) {
-              margin-top: 0.2rem;
-            }
-            .item:hover {
-              border-radius: 0.02rem;
-              border: 0.01rem solid #0058e1;
-              box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
-            }
           }
-        }
-        .bottom-btn {
-          cursor: pointer;
-          text-align: center;
-          margin-top: 0.24rem;
-          color: #fff;
-          width: 1rem;
-          height: 0.24rem;
-          line-height: 0.24rem;
-          margin-left: 6rem;
-          span {
-            display: inline-block;
-            width: 0.1rem;
-            height: 0.1rem;
-            background: url('~@/assets/newHome/gd.png') no-repeat;
-            background-size: contain;
+          .item:nth-of-type(4),
+          .item:nth-of-type(5),
+          .item:nth-of-type(6) {
+            margin-top: 0.2rem;
+          }
+          .item:hover {
+            border-radius: 0.02rem;
+            border: 0.01rem solid #0058e1;
+            box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
           }
-        }
-        .bottom-btn:hover {
-          background: rgba(0, 88, 225, 0.1);
         }
       }
+      .bottom-btn {
+        cursor: pointer;
+        text-align: center;
+        margin-top: 0.24rem;
+        color: #fff;
+        width: 1rem;
+        height: 0.24rem;
+        line-height: 0.24rem;
+        margin-left: 6rem;
+        span {
+          display: inline-block;
+          width: 0.1rem;
+          height: 0.1rem;
+          background: url('~@/assets/newHome/gd.png') no-repeat;
+          background-size: contain;
+        }
+      }
+      .bottom-btn:hover {
+        background: rgba(0, 88, 225, 0.1);
+      }
     }
+  }
 </style>

From cc633449edd833d30bf38933118a27ccb64ca36b Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Tue, 19 Jul 2022 09:55:05 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E5=8A=A0overflow:=20hidd?=
 =?UTF-8?q?en;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../abilityStatistics/componentUsed.vue       | 968 +++++++++---------
 .../views/modules/abilityStatistics/index.vue | 677 ++++++------
 .../modules/activiti/my-work-dynamics.vue     |   2 +
 .../views/modules/bscatalogue/bscatalogue.vue |  38 +-
 .../components/AbnormalSituation.vue          |  56 +-
 .../components/AnalysisOfTheRequest.vue       |   1 +
 .../workBench/components/bottom-view.vue      |  15 +-
 .../workBench/components/dept-todo-view.vue   | 159 +--
 .../components/frequency-top5-view.vue        |   1 +
 9 files changed, 961 insertions(+), 956 deletions(-)

diff --git a/back/src/views/modules/abilityStatistics/componentUsed.vue b/back/src/views/modules/abilityStatistics/componentUsed.vue
index de68a125..7c86ca97 100644
--- a/back/src/views/modules/abilityStatistics/componentUsed.vue
+++ b/back/src/views/modules/abilityStatistics/componentUsed.vue
@@ -5,7 +5,7 @@
             <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>
@@ -58,503 +58,497 @@
     </div>
 </template>
 <script>
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 
 export default {
-    props:{
-        tableId:{
-            type:String,
-            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
+          }
+          this.data3.push(single)
+          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'
         },
-        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{
+        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 += Number(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)
     },
-    mounted(){
-        
-       
+    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 += Number(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)
     },
-   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
-                    }
-                    this.data3.push(single)
-                    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 += Number(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
-                }
-            ]
-            };
+    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,
 
-            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 += Number(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 += Number(data[i].value);
-                    if (data[i].name == name) {
-                        tarValue = data[i].value;
-                    }
-                    }
-                    // var v = tarValue;
-                    var p = Math.round(((tarValue / total) * 100));
-                    console.log('@@@@', tarValue, total)
-                    return `{a|${name}}  {b|${p}%}`;
-                },
-                itemStyle:{},
-                textStyle: {
-                      rich: {
+          // 使用回调函数
+          formatter: function (name) {
+            var data = option.series[0].data
+            var total = 0
+            var tarValue
+            for (var i = 0; i < data.length; i++) {
+              total += Number(data[i].value)
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            // var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100))
+            console.log('@@@@', tarValue, total)
+            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]
-                },
+              a: {
+                // 设置文字、数学、英语这一列的样式
+                width: 100,
+                color: '#000000',
+                fontSize: 12,
+                fontWeight: 'bolder'
+              },
+              b: {
+                // 设置10分、20分、30分这一列的样式
+                width: 35,
+                color: '#333',
+                fontSize: 12
+              }
             },
-            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
-                }
-            ]
-            };
+            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('closeChild2')
-        }
-   }
+      option && myChart.setOption(option)
+    },
+    backBtn () {
+      this.$emit('closeChild2')
+    }
+  }
 }
 </script>
 <style scoped>
-.container{
-    padding-top: 15px;
-    display: flex;
-    flex-direction: column;
+.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;
-         width:200px;
-         margin-top:5px;
-         color:#333333;
-         font-size: 16px;
-         overflow: hidden;
-         white-space: nowrap;
-         text-overflow: ellipsis;        
-    }   
-    .count-style{
-         position:absolute;
-         display: flex;
-         margin-left:400px;
-         margin-top:5px;
-         color:#333333;
-         font-size: 18px;  
-         font-weight: bold;      
-    }
-</style>
\ No newline at end of file
+.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;
+  width: 200px;
+  margin-top: 5px;
+  color: #333333;
+  font-size: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+.count-style {
+  position: absolute;
+  display: flex;
+  margin-left: 400px;
+  margin-top: 5px;
+  color: #333333;
+  font-size: 18px;
+  font-weight: bold;
+}
+</style>
diff --git a/back/src/views/modules/abilityStatistics/index.vue b/back/src/views/modules/abilityStatistics/index.vue
index 2ff30249..f29ac522 100644
--- a/back/src/views/modules/abilityStatistics/index.vue
+++ b/back/src/views/modules/abilityStatistics/index.vue
@@ -22,7 +22,7 @@
            </span>
         </el-tree>
          </div> -->
-     <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>        
+     <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>
     <div class="mod-demand__bsdemand">
         <div class='top-box'>
             <span class='title'>能力统计</span>
@@ -38,7 +38,7 @@
             </span>
             <span v-if='this.choseId===0' :class="[departmentId===2?'departmentStyle':'']"  @click="handleChose(2)">
                 部门使用情况
-            </span>           
+            </span>
          </div>
          <div class='line-style'></div>
           <el-table
@@ -81,7 +81,7 @@
             min-width="100%">
         </el-table-column>
         <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
-            prop="resourceShareNum" 
+            prop="resourceShareNum"
             label="需申请数量"
             min-width="100%">
         </el-table-column>
@@ -118,215 +118,208 @@
       >
     </el-pagination>
   </div>
-    </div>   
+    </div>
   </el-card>
     </div>
    <component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild2='closeChild2'></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>  
+</div>
 </template>
 <script>
 import componentServices from './componentServices.vue'
 import applicationResources from './applicationResources.vue'
 import ComponentUsed from './componentUsed.vue'
 export default {
-    components:{componentServices,applicationResources, ComponentUsed},
-    data(){
-        return{
-            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,
-            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: [{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
-        //     })
-        //     },
+  components: { componentServices, applicationResources, ComponentUsed },
+  data () {
+    return {
+      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,
+      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: [{ deptName: '部门', resourceNum: 222 }]
+    }
+  },
+  created () {
 
-          // 组件服务部门发布情况
-            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) {
-        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
-        this.handleChose(1)
-      },
+  },
+  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) {
+      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
+      this.handleChose(1)
+    },
     //   choseBtn(index){
     //     this.choseId=index
     //     if (index===0){
@@ -338,164 +331,162 @@ export default {
     //         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()
-            }  
+    // 选择发布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} 条`);
-      },
-      closeChild(){
-        this.homeIsShow=true
-        this.servicesIsShow=false
-        this. handleCurrentChange(1)
-        
-      },
-       closeChild2(){
-        this.homeIsShow=true
-        this.UsedIsShow=false
-        this. handleCurrentChange(1)
-      },
-       closeApplication(){
-        this.homeIsShow=true
-        this.resourcesIsShow=false
-        this. handleCurrentChange(1)
       }
     },
+    // 翻页
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+    },
+    closeChild () {
+      this.homeIsShow = true
+      this.servicesIsShow = false
+      this.handleCurrentChange(1)
+    },
+    closeChild2 () {
+      this.homeIsShow = true
+      this.UsedIsShow = false
+      this.handleCurrentChange(1)
+    },
+    closeApplication () {
+      this.homeIsShow = true
+      this.resourcesIsShow = false
+      this.handleCurrentChange(1)
+    }
+  }
 
 }
 </script>
 <style lang="scss" scoped>
-.container{
-    display: flex;
-
+.container {
+  display: flex;
 }
-.container-left{
-    width:250px;
-    height:1000px;
-    display: inline-block;
-    // background-color: #ffffff;
-    margin-right:10px
+.container-left {
+  width: 250px;
+  height: 1000px;
+  display: inline-block;
+  // background-color: #ffffff;
+  margin-right: 10px;
 }
-.left-search{
-    width:250px;
-    height:76px;
-    background-color: #ffffff;
+.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-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;
+  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;
+.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;    
-    }
+::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;
+    word-break: break-all;
+  }
 }
 
-.top-box{
-    height:80px;
-    width:100%;
-    background-color: #fafafc;
-    display: inline-block;
+.top-box {
+  height: 80px;
+  width: 100%;
+  background-color: #fafafc;
+  display: inline-block;
+}
+.title {
+  display: flex;
+  font-size: 20px;
+  color: #000000;
+  font-weight: bold;
+  padding-left: 15px;
+  padding-top: 10px;
+}
+.title-list-style {
+  display: flex;
+  margin-top: 10px;
+}
+.title-single {
+  font-size: 14px;
+  width: 90px;
+  color: #666666;
+  height: 24px;
+  margin-left: 10px;
+  border: 1px solid #cccccc;
+  border-radius: 12px;
+  cursor: pointer;
+}
+.box-style {
+  width: 90px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 2px;
+}
+.second-title {
+  margin-top: 20px;
+  font-size: 14px;
+  color: #979eb9;
+  cursor: pointer;
+}
+.line-style {
+  width: 100%;
+  height: 1px;
+  background-color: #f5f6fa;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+.aui-card--fill {
+  width: 100% !important;
+  padding: 0px !important;
+}
+.choseStyle {
+  color: #526aff;
+  border: 1px solid #526aff;
+}
+.departmentStyle {
+  color: #526aff;
+}
+::v-deep .tree-text-styleJ {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
 }
-    .title{
-        display: flex;
-        font-size:20px; 
-        color:#000000;
-        font-weight: bold;
-        padding-left:15px;
-        padding-top:10px;
-    }
-    .title-list-style{
-        display: flex;
-        margin-top:10px;
-        
-    }
-    .title-single{
-        font-size:14px;
-        width:90px;
-        color:#666666;
-        height:24px;
-        margin-left:10px;
-        border:1px solid #cccccc;
-        border-radius: 12px;
-        cursor:pointer
-       
-    }
-    .box-style{
-        width:90px;
-        height:24px;
-        display:flex;
-        justify-content: center;
-        align-items: center;
-        padding-bottom: 2px;
-    }
-    .second-title{
-        margin-top:20px;
-        font-size: 14px;
-        color:#979eb9;
-        cursor:pointer
-    }
-    .line-style{
-         width:100%;
-         height:1px;
-         background-color:#f5f6fa;
-         margin-top:15px;
-         margin-bottom:15px;
-    }
-   .aui-card--fill{
-        width:100% !important;
-        padding: 0px !important;
-    }
-    .choseStyle{
-        color:#526aff;
-        border:1px solid #526aff
-    }
-    .departmentStyle{
-        color:#526aff
-    }
-   ::v-deep .tree-text-styleJ{
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
 </style>
diff --git a/back/src/views/modules/activiti/my-work-dynamics.vue b/back/src/views/modules/activiti/my-work-dynamics.vue
index db462c81..83c0809c 100644
--- a/back/src/views/modules/activiti/my-work-dynamics.vue
+++ b/back/src/views/modules/activiti/my-work-dynamics.vue
@@ -698,6 +698,7 @@ export default {
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  word-break: break-all;
 }
 .boxcontent {
   width: 100%;
@@ -707,6 +708,7 @@ export default {
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  word-break: break-all;
 }
 .preview-dialog {
   width: 100%;
diff --git a/back/src/views/modules/bscatalogue/bscatalogue.vue b/back/src/views/modules/bscatalogue/bscatalogue.vue
index a3d8593d..a26999b1 100644
--- a/back/src/views/modules/bscatalogue/bscatalogue.vue
+++ b/back/src/views/modules/bscatalogue/bscatalogue.vue
@@ -570,7 +570,7 @@ export default {
         height: 28px;
         margin-left: 14px;
         margin-top: 9px;
-        background-image: url('~@/assets/img/capabilityCatalogingManagement/edit-card.png');
+        background-image: url("~@/assets/img/capabilityCatalogingManagement/edit-card.png");
       }
     }
     div:nth-child(2) {
@@ -609,7 +609,7 @@ export default {
         left: 50%;
         margin-left: -45.5px;
         margin-top: -45.5px;
-        background-image: url('~@/assets/img/capabilityCatalogingManagement/add.png');
+        background-image: url("~@/assets/img/capabilityCatalogingManagement/add.png");
         cursor: pointer;
       }
       > span {
@@ -618,7 +618,7 @@ export default {
         padding-top: 5px;
         padding-left: 20px;
         font-size: 26px;
-        font-family: 'Microsoft YaHei';
+        font-family: "Microsoft YaHei";
       }
       .add-enterprise-input-wrap {
         // height: 50px;
@@ -656,7 +656,7 @@ export default {
           background: #0fa7f6;
           span {
             color: #ffffff;
-            font-family: 'Microsoft YaHei';
+            font-family: "Microsoft YaHei";
             font-size: 16px;
           }
         }
@@ -704,7 +704,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
     }
     span:nth-child(2) {
       display: inline-block;
@@ -713,7 +713,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
       border: 1px solid rgba(255, 255, 255, 0.5);
       padding-top: 4px;
       margin-top: 15px;
@@ -724,7 +724,7 @@ export default {
   .enterprise-card-tip-first:before,
   .enterprise-card-tip-first:after {
     position: absolute;
-    content: ' ';
+    content: " ";
     top: 32px;
     left: -16px;
     display: block;
@@ -752,7 +752,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
     }
     span:nth-child(2) {
       display: inline-block;
@@ -761,7 +761,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
       border: 1px solid rgba(255, 255, 255, 0.5);
       padding-top: 4px;
       margin-top: 15px;
@@ -772,7 +772,7 @@ export default {
   .enterprise-card-tip-third:before,
   .enterprise-card-tip-third:after {
     position: absolute;
-    content: ' ';
+    content: " ";
     top: 32px;
     left: 180px;
     display: block;
@@ -801,7 +801,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
     }
     span:nth-child(2) {
       display: inline-block;
@@ -810,7 +810,7 @@ export default {
       text-align: center;
       color: #ffffff;
       font-size: 14px;
-      font-family: 'Microsoft YaHei';
+      font-family: "Microsoft YaHei";
       border: 1px solid rgba(255, 255, 255, 0.5);
       padding-top: 4px;
       margin-top: 15px;
@@ -821,7 +821,7 @@ export default {
   .enterprise-card-tip-second:before,
   .enterprise-card-tip-second:after {
     position: absolute;
-    content: ' ';
+    content: " ";
     top: -15px;
     left: 78px;
     display: block;
@@ -836,7 +836,7 @@ export default {
     width: 100%;
     // height: 373px;
     height: 176px;
-    background-image: url('~@/assets/img/capabilityCatalogingManagement/small-card-orange.png');
+    background-image: url("~@/assets/img/capabilityCatalogingManagement/small-card-orange.png");
     .resource-detail-title {
       width: 100%;
       height: 40px;
@@ -845,15 +845,17 @@ export default {
       padding-top: 10px;
       text-align: center;
       text-overflow: ellipsis;
+      word-break: break-all;
       span {
         width: 100%;
         height: 100%;
-        font-family: 'Microsoft YaHei';
+        font-family: "Microsoft YaHei";
         font-size: 20px;
         display: inline-block;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        word-break: break-all;
         color: #ffffff;
       }
     }
@@ -867,7 +869,7 @@ export default {
         width: 100%;
         height: 30px;
         padding-left: 19px;
-        font-family: 'Microsoft YaHei';
+        font-family: "Microsoft YaHei";
         font-size: 20px;
         color: white;
         vertical-align: middle;
@@ -899,7 +901,7 @@ export default {
       position: absolute;
       width: 28px;
       height: 28px;
-      background-image: url('~@/assets/img/capabilityCatalogingManagement/remove.png');
+      background-image: url("~@/assets/img/capabilityCatalogingManagement/remove.png");
       top: 0;
       right: 0;
       cursor: pointer;
@@ -908,7 +910,7 @@ export default {
 }
 input::-webkit-input-placeholder {
   font-size: 14px;
-  font-family: 'Microsoft YaHei';
+  font-family: "Microsoft YaHei";
   color: #999999;
 }
 </style>
diff --git a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
index d0406ad0..3094693b 100644
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
@@ -76,7 +76,7 @@ import * as echarts from 'echarts'
 export default {
   // components: {},
   // props: {},
-  data() {
+  data () {
     return {
       // 排行榜
       RankingData: [
@@ -169,20 +169,20 @@ export default {
       total: 0
     }
   },
-  mounted() {
+  mounted () {
     this.myEchars()
     // 分页
     this.total = this.AnomalyStatisticsTable.length
   },
   methods: {
     // 分页
-    handleSizeChange(val) {
+    handleSizeChange (val) {
       console.log(`每页 ${val} 条`)
     },
-    handleCurrentChange(val) {
+    handleCurrentChange (val) {
       console.log(`当前页: ${val}`)
     },
-    myEchars() {
+    myEchars () {
       var chartDom = document.getElementById('main')
       var myChart = echarts.init(chartDom)
       var option
@@ -276,7 +276,8 @@ export default {
     }
 
     .ApiBox {
-      background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png') no-repeat;
+      background: url("~@/assets/img/CapabilityOperationMonitoring/bg-blue.png")
+        no-repeat;
       background-size: 100%;
       width: 22.5rem;
       height: 6.875rem;
@@ -313,7 +314,8 @@ export default {
     }
 
     .ApiBox:last-of-type {
-      background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png') no-repeat;
+      background: url("~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png")
+        no-repeat;
       background-size: 100%;
 
       div {
@@ -383,9 +385,11 @@ export default {
               display: block;
               height: 1.25rem;
               width: 2.25rem;
-              background: linear-gradient(to right,
-                  rgba(204, 204, 204, 0.6),
-                  rgba(0, 0, 0, 0));
+              background: linear-gradient(
+                to right,
+                rgba(204, 204, 204, 0.6),
+                rgba(0, 0, 0, 0)
+              );
             }
           }
 
@@ -401,6 +405,7 @@ export default {
             white-space: nowrap;
             cursor: pointer;
             font-weight: bold;
+            word-break: break-all;
           }
 
           span {
@@ -412,9 +417,11 @@ export default {
 
         .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));
+          background: linear-gradient(
+            to right,
+            rgba(251, 59, 5, 0.6),
+            rgba(0, 0, 0, 0)
+          );
         }
 
         .RankingListData:nth-of-type(1) span {
@@ -423,9 +430,11 @@ export default {
 
         .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));
+          background: linear-gradient(
+            to right,
+            rgba(251, 123, 5, 0.6),
+            rgba(0, 0, 0, 0)
+          );
         }
 
         .RankingListData:nth-of-type(2) span {
@@ -434,9 +443,11 @@ export default {
 
         .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));
+          background: linear-gradient(
+            to right,
+            rgba(250, 179, 2, 0.6),
+            rgba(0, 0, 0, 0)
+          );
         }
 
         .RankingListData:nth-of-type(3) span {
@@ -447,7 +458,8 @@ export default {
       .AbnormalDistribution {
         margin-right: 3.75rem;
 
-        .container-body1 {}
+        .container-body1 {
+        }
       }
 
       .AnomalyStatistics {
@@ -472,12 +484,12 @@ export default {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            word-break: break-all;
           }
 
-          ::v-deep .el-table tbody tr:hover>td {
+          ::v-deep .el-table tbody tr:hover > td {
             background-color: transparent;
           }
-
         }
 
         .tablePagination {
diff --git a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
index 3aed371e..2148c9a4 100644
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
@@ -1298,6 +1298,7 @@ export default {
             text-overflow: ellipsis;
             white-space: nowrap;
             cursor: pointer;
+            word-break: break-all;
           }
           div:last-child {
             height: 30px;
diff --git a/back/src/views/modules/workBench/components/bottom-view.vue b/back/src/views/modules/workBench/components/bottom-view.vue
index 359c7e9d..4dae6e13 100644
--- a/back/src/views/modules/workBench/components/bottom-view.vue
+++ b/back/src/views/modules/workBench/components/bottom-view.vue
@@ -35,7 +35,7 @@ export default {
   components: {
     contentTitle
   },
-  data() {
+  data () {
     return {
       title: { dynamic: '部门发布动态', recommend: '部门推荐能力' },
       list: [],
@@ -77,13 +77,13 @@ export default {
       loadingTable: false
     }
   },
-  mounted() {
+  mounted () {
     this.getResourceByDept()
     this.getApplyByDept()
   },
   methods: {
     // 发布动态
-    getResourceByDept() {
+    getResourceByDept () {
       const data = {
         limit: 5,
         page: 1
@@ -109,7 +109,7 @@ export default {
       )
     },
     // 部门推荐能力
-    getApplyByDept() {
+    getApplyByDept () {
       const data = {
         limit: 5,
         page: 1
@@ -132,11 +132,11 @@ export default {
         }
       )
     },
-    jumpTo() {
+    jumpTo () {
       this.$router.push({
         path: 'activiti-my-work-dynamics'
-      });
-    },
+      })
+    }
   }
 }
 </script>
@@ -146,6 +146,7 @@ export default {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  word-break: break-all;
 }
 
 .bottom-view {
diff --git a/back/src/views/modules/workBench/components/dept-todo-view.vue b/back/src/views/modules/workBench/components/dept-todo-view.vue
index c7d872e0..da27db7e 100644
--- a/back/src/views/modules/workBench/components/dept-todo-view.vue
+++ b/back/src/views/modules/workBench/components/dept-todo-view.vue
@@ -43,131 +43,132 @@
 </template>
 <script>
 export default {
-    data() {
-        return {
+  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
-            });
-        },
     }
+  },
+  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;
+  //超出一行省略号
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
 }
 
 .no-margin-left {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .flex-row-bottom {
-    display: flex;
-    justify-content: center;
-    align-items: baseline;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
 }
 
 .flex-row-center {
-    display: flex;
-    justify-content: center;
-    align-items: 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);
+  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%;
+  display: flex;
+  justify-content: center;
+  // width: 80px;
+  width: 100px;
+  border-radius: 2px;
+  height: 100%;
 }
 
 .img {
-    height: 50px;
-    width: 50px;
-    margin: 0 auto;
+  height: 50px;
+  width: 50px;
+  margin: 0 auto;
 }
 
 .content {
-    // margin-top: 57px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+  // 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;
+  font-size: 18px;
+  color: #000;
+  margin-top: 25px;
+  margin-bottom: 18px;
+  text-align: center;
 }
 
 .num {
-    font-size: 30px;
+  font-size: 30px;
 }
 
 .unit {
-    font-size: 16px;
-    margin-left: 2px;
+  font-size: 16px;
+  margin-left: 2px;
 }
 
 .list-box {
-    width: 314px;
-    height: 252px;
-    padding: 0 16px;
+  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;
+  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;
+  color: #212121;
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+  text-align: right;
+  cursor: pointer;
 }
 
 .no-data {
-    font-size: 16px;
-    color: #212121;
+  font-size: 16px;
+  color: #212121;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/back/src/views/modules/workBench/components/frequency-top5-view.vue b/back/src/views/modules/workBench/components/frequency-top5-view.vue
index 61f3133c..199bcbb8 100644
--- a/back/src/views/modules/workBench/components/frequency-top5-view.vue
+++ b/back/src/views/modules/workBench/components/frequency-top5-view.vue
@@ -113,6 +113,7 @@ export default {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  word-break: break-all;
 }
 
 .flex-row-between {