API异常分析

back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue

@@ -24,9 +24,20 @@
         <div class="RankingList">
           <h4 class="title">API异常次数排行TOP10</h4>
           <ul>
-            <li class="RankingListData" v-for="(item, index) in RankingData" :key="index">
+            <li
-              <i><b>{{ index + 1 }}</b></i>
+              class="RankingListData"
-              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
+              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>
@@ -36,33 +47,37 @@
         <!-- API异常分布 -->
         <div class="AbnormalDistribution">
           <h4 class="title">API异常分布</h4>
-          <div class='container-body1'>
+          <div class="container-body1">
-            <div id="main" style="width: 100px;height:260px;"></div>
+            <div id="main" style="width: 100px; 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 :data="AnomalyStatisticsTable" border style="width: 100%">
               <el-table-column prop="name" label="接口名称" width="80">
               </el-table-column>
               <el-table-column prop="address" label="接口地址" width="200">
               </el-table-column>
               <el-table-column prop="method" label="调用方法">
               </el-table-column>
-              <el-table-column prop="type" label="组件类型">
+              <el-table-column prop="type" label="组件类型"> </el-table-column>
-              </el-table-column>
               <el-table-column prop="provider" label="提供商">
               </el-table-column>
-              <el-table-column prop="state" label="监控状态">
+              <el-table-column prop="state" label="监控状态"> </el-table-column>
-              </el-table-column>
             </el-table>
           </div>
           <!-- 分页 -->
           <div class="tablePagination">
-            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            <el-pagination
-              :current-page="currentPage4" :page-size="5" layout="total, prev, pager, next, jumper" :total="total">
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage4"
+              :page-size="5"
+              layout="total, prev, pager, next, jumper"
+              :total="total"
+            >
             </el-pagination>
           </div>
         </div>
@@ -76,7 +91,7 @@ import * as echarts from 'echarts'
 export default {
   // components: {},
   // props: {},
-  data() {
+  data () {
     return {
       // 排行榜
       RankingData: [
@@ -122,7 +137,8 @@ export default {
         }
       ],
       // 表格
-      AnomalyStatisticsTable: [{
+      AnomalyStatisticsTable: [
+        {
           name: '接口名称',
           address: 'http://hhhhhhhhhhhhhhhhhhhh',
           method: '调用方法',
@@ -161,26 +177,27 @@ export default {
           type: '组件类型',
           provider: '提供商名称',
           state: '监控状态'
-      }],
+        }
+      ],
       // 分页
       currentPage4: 1,
       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
@@ -190,15 +207,16 @@ export default {
           trigger: 'item'
         },
         legend: {
+          itemHeight: 10,
+          itemWidth: 10,
+          itemGap: 15,
+          textStyle: {
+            fontSize: 12, // 图例文字字体大小
+            color: '#666666' // 图例文字颜色
+          },
           bottom: '22%'
         },
         color: ['#0087ff', '#ff8a00', '#fcc549', '#49c988'],
-        grid: {
-          left: '0%',
-          right: '0%',
-          bottom: '10%',
-          containLabel: true
-        },
         series: [
           {
             center: ['50%', '20%'],
@@ -263,7 +281,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;
@@ -300,7 +319,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 {
@@ -370,7 +390,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)
+              );
             }
           }
 
@@ -397,7 +421,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 {
@@ -406,7 +434,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 {
@@ -415,7 +447,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 {
@@ -426,7 +462,8 @@ export default {
       .AbnormalDistribution {
         margin-right: 3.75rem;
 
-        .container-body1 {}
+        .container-body1 {
+        }
       }
 
       .AnomalyStatistics {
@@ -501,9 +538,7 @@ export default {
           }
         }
       }
-
     }
-
   }
 }
 </style>