From d4e47eafe65610772f3934b7e148c02ff6ab2ec8 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Tue, 28 Jun 2022 16:55:41 +0800
Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E5=8A=9B=E8=BF=90=E8=A1=8C=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E4=B8=8A=E5=8D=8A=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{API总数.png => API-allNum.png}         | Bin
 .../{异常API数量.png => API-badNum.png}   | Bin
 .../{大蓝背景图.png => bg-blue.png}      | Bin
 .../{大黄背景图.png => bg-yellow.png}    | Bin
 .../components/AbnormalSituation.vue          | 510 +++++++++++++++++-
 .../CapabilityOperationMonitoringTime.vue     |  91 +++-
 6 files changed, 582 insertions(+), 19 deletions(-)
 rename back/src/assets/img/CapabilityOperationMonitoring/{API总数.png => API-allNum.png} (100%)
 rename back/src/assets/img/CapabilityOperationMonitoring/{异常API数量.png => API-badNum.png} (100%)
 rename back/src/assets/img/CapabilityOperationMonitoring/{大蓝背景图.png => bg-blue.png} (100%)
 rename back/src/assets/img/CapabilityOperationMonitoring/{大黄背景图.png => bg-yellow.png} (100%)

diff --git a/back/src/assets/img/CapabilityOperationMonitoring/API总数.png b/back/src/assets/img/CapabilityOperationMonitoring/API-allNum.png
similarity index 100%
rename from back/src/assets/img/CapabilityOperationMonitoring/API总数.png
rename to back/src/assets/img/CapabilityOperationMonitoring/API-allNum.png
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/异常API数量.png b/back/src/assets/img/CapabilityOperationMonitoring/API-badNum.png
similarity index 100%
rename from back/src/assets/img/CapabilityOperationMonitoring/异常API数量.png
rename to back/src/assets/img/CapabilityOperationMonitoring/API-badNum.png
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/大蓝背景图.png b/back/src/assets/img/CapabilityOperationMonitoring/bg-blue.png
similarity index 100%
rename from back/src/assets/img/CapabilityOperationMonitoring/大蓝背景图.png
rename to back/src/assets/img/CapabilityOperationMonitoring/bg-blue.png
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/大黄背景图.png b/back/src/assets/img/CapabilityOperationMonitoring/bg-yellow.png
similarity index 100%
rename from back/src/assets/img/CapabilityOperationMonitoring/大黄背景图.png
rename to back/src/assets/img/CapabilityOperationMonitoring/bg-yellow.png
diff --git a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
index 2f21db8d..c478e0e9 100644
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
@@ -1,22 +1,508 @@
 <template>
-  <div class="wrapper">概况和异常</div>
+  <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: 100px;height:200px;"></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">
+              </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>
+              <el-table-column prop="provider" label="提供商">
+              </el-table-column>
+              <el-table-column prop="state" label="监控状态">
+              </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: {},
+  // components: {},
+  // props: {},
   data() {
-    return {};
+    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
+    }
   },
-  watch: {},
-  computed: {},
-  methods: {},
-  created() {},
-  mounted() {},
-};
+  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: {
+          bottom: '0%'
+        },
+        color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'],
+        series: [
+          {
+            name: 'GA 数据统计',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            grid: {
+              left: '0%',
+              right: '12%',
+              bottom: '10%',
+              containLabel: true
+            },
+            // 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>
-.wrapper {
+.contentBox {
+  display: flex;
+  justify-content: space-between;
+  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: 41rem;
+
+          ::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;
+          }
+        }
+
+        .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>
diff --git a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/CapabilityOperationMonitoringTime.vue b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/CapabilityOperationMonitoringTime.vue
index b7fd48d8..ac56aea0 100644
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/CapabilityOperationMonitoringTime.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/CapabilityOperationMonitoringTime.vue
@@ -1,5 +1,23 @@
 <template>
-  <div class="wrapper">上边时间</div>
+  <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="datetime" placeholder="请选择起始时间">
+        </el-date-picker>
+        <el-date-picker v-model="timeEnd" type="datetime" placeholder="请选择结束时间">
+        </el-date-picker>
+        <el-button type="primary" round>确定</el-button>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
@@ -7,16 +25,75 @@ export default {
   components: {},
   props: {},
   data() {
-    return {};
+    return {
+      timeSwitchindex: '日',
+      timeStart: '',
+      timeEnd: ''
+    }
   },
   watch: {},
   computed: {},
-  methods: {},
-  created() {},
-  mounted() {},
-};
+  methods: {
+    timeSwitch(name) {
+      this.timeSwitchindex = name
+    }
+  },
+  created() { },
+  mounted() { }
+}
 </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;
+      }
+    }
+  }
 }
 </style>