From 3ab89fcfecd540d450df664ed76151ce5e1eb6cd Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Tue, 28 Jun 2022 16:35:25 +0800
Subject: [PATCH] =?UTF-8?q?API=E8=AF=B7=E6=B1=82=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{蓝背景图.png => number-bule-bg.png}  |  Bin
 .../{蓝色标签.png => number-bule.png}     |  Bin
 .../{绿背景图.png => number-grenn-bg.png} |  Bin
 .../{绿色标签.png => number-grenn.png}    |  Bin
 .../{红背景图.png => number-red-bg.png}   |  Bin
 .../{红色标签.png => number-red.png}      |  Bin
 .../components/AnalysisOfTheRequest.vue       | 1069 ++++++++++++++++-
 7 files changed, 1058 insertions(+), 11 deletions(-)
 rename back/src/assets/img/CapabilityOperationMonitoring/{蓝背景图.png => number-bule-bg.png} (100%)
 rename back/src/assets/img/CapabilityOperationMonitoring/{蓝色标签.png => number-bule.png} (100%)
 rename back/src/assets/img/CapabilityOperationMonitoring/{绿背景图.png => number-grenn-bg.png} (100%)
 rename back/src/assets/img/CapabilityOperationMonitoring/{绿色标签.png => number-grenn.png} (100%)
 rename back/src/assets/img/CapabilityOperationMonitoring/{红背景图.png => number-red-bg.png} (100%)
 rename back/src/assets/img/CapabilityOperationMonitoring/{红色标签.png => number-red.png} (100%)

diff --git a/back/src/assets/img/CapabilityOperationMonitoring/蓝背景图.png b/back/src/assets/img/CapabilityOperationMonitoring/number-bule-bg.png
similarity index 100%
rename from back/src/assets/img/CapabilityOperationMonitoring/蓝背景图.png
rename to back/src/assets/img/CapabilityOperationMonitoring/number-bule-bg.png
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/蓝色标签.png b/back/src/assets/img/CapabilityOperationMonitoring/number-bule.png
similarity index 100%
rename from back/src/assets/img/CapabilityOperationMonitoring/蓝色标签.png
rename to back/src/assets/img/CapabilityOperationMonitoring/number-bule.png
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/绿背景图.png b/back/src/assets/img/CapabilityOperationMonitoring/number-grenn-bg.png
similarity index 100%
rename from back/src/assets/img/CapabilityOperationMonitoring/绿背景图.png
rename to back/src/assets/img/CapabilityOperationMonitoring/number-grenn-bg.png
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/绿色标签.png b/back/src/assets/img/CapabilityOperationMonitoring/number-grenn.png
similarity index 100%
rename from back/src/assets/img/CapabilityOperationMonitoring/绿色标签.png
rename to back/src/assets/img/CapabilityOperationMonitoring/number-grenn.png
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/红背景图.png b/back/src/assets/img/CapabilityOperationMonitoring/number-red-bg.png
similarity index 100%
rename from back/src/assets/img/CapabilityOperationMonitoring/红背景图.png
rename to back/src/assets/img/CapabilityOperationMonitoring/number-red-bg.png
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/红色标签.png b/back/src/assets/img/CapabilityOperationMonitoring/number-red.png
similarity index 100%
rename from back/src/assets/img/CapabilityOperationMonitoring/红色标签.png
rename to back/src/assets/img/CapabilityOperationMonitoring/number-red.png
diff --git a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
index a063072b..09559184 100644
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
@@ -6,20 +6,91 @@
       <!-- 请求概况 -->
       <div class="request-overview">
         <div class="analysis-of-the-request-content-title">请求概况</div>
-        <div class="request-overview-content"></div>
+        <div
+          class="request-overview-content"
+          v-for="(item, index) in requestOverviewData"
+          :key="'requestOverview' + index"
+          :style="`background:url('${requestOverviewBg[index].img}')`"
+        >
+          <div class="request-overview-content-card">
+            <div
+              class="card-label"
+              :style="`background:url('${requestOverviewLabel[index].img}')`"
+            ></div>
+            <div class="card-name-and-tatol">
+              <p>{{ item.name }}</p>
+              <p :style="`color:${requestOverviewLabel[index].labalColor}`">
+                {{ item.tatol }}
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
       <!-- 能力请求趋势 -->
-      <div>
-        <div></div>
-        <div></div>
+      <div class="capacity-request-trend">
+        <div class="analysis-of-the-request-content-title">能力请求趋势</div>
+        <div class="capacity-request-trend-echarts">
+          <div class="capacity-request-trend-echarts-left">
+            <div class="request-trend-chart-title">请求趋势图</div>
+            <div id="request-trend-chart" class="request-trend-chart"></div>
+            <div class="request-trend-chart-title">数据流量趋势图</div>
+            <div
+              id="data-traffic-trend-view"
+              class="data-traffic-trend-view"
+            ></div>
+          </div>
+          <div class="capacity-request-trend-echarts-right">
+            <div class="request-trend-chart-title">请求出错趋势图</div>
+            <div
+              id="request-error-trend-chart"
+              class="request-error-trend-chart"
+            ></div>
+            <div class="request-trend-chart-title">请求时延趋势图</div>
+            <div
+              id="request-latency-trend-diagram"
+              class="request-latency-trend-diagram"
+            ></div>
+          </div>
+        </div>
       </div>
       <!-- 能力排行榜 -->
-      <div></div>
+      <div class="Ability-list">
+        <div class="analysis-of-the-request-content-title">能力排行榜</div>
+        <div class="Ability-list-tab">
+          <div
+            v-for="(item, index) in abilityListTabData"
+            :key="`abilityListTabData${index}`"
+            :class="newTab == item ? 'down' : ''"
+            @click="abilityListTabSwitch(item)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="Ability-list-content">
+          <div
+            class="Ability-list-content-card"
+            v-for="(item, index) in abilityListData"
+            :key="`abilityListData${index}`"
+          >
+            <div>{{ index + 1 }}</div>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="item.name"
+              placement="top"
+            >
+              <div>{{ item.name }}</div>
+            </el-tooltip>
+            <div>{{ item.snum }}</div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
 export default {
   components: {},
   props: {},
@@ -30,14 +101,820 @@ export default {
         { name: '请求成功次数', tatol: '99999' },
         { name: '请求失败次数', tatol: '99999' },
         { name: '平均时延', tatol: '99999' }
-      ] // 请求概况初始化数据
+      ], // 请求概况初始化数据
+      requestOverviewBg: [
+        {
+          img: require('@/assets/img/CapabilityOperationMonitoring/number-bule-bg.png')
+        },
+        {
+          img: require('@/assets/img/CapabilityOperationMonitoring/number-grenn-bg.png')
+        },
+        {
+          img: require('@/assets/img/CapabilityOperationMonitoring/number-red-bg.png')
+        },
+        {
+          img: require('@/assets/img/CapabilityOperationMonitoring/number-bule-bg.png')
+        }
+      ],
+      requestOverviewLabel: [
+        {
+          img: require('@/assets/img/CapabilityOperationMonitoring/number-bule.png'),
+          labalColor: '#1182fb'
+        },
+        {
+          img: require('@/assets/img/CapabilityOperationMonitoring/number-grenn.png'),
+          labalColor: '#49c988'
+        },
+        {
+          img: require('@/assets/img/CapabilityOperationMonitoring/number-red.png'),
+          labalColor: '#fc784c'
+        },
+        {
+          img: require('@/assets/img/CapabilityOperationMonitoring/number-bule.png'),
+          labalColor: '#1182fb'
+        }
+      ],
+      abilityListTabData: ['请求次数', '请求失败次数', '平均延时'], // 能力排行榜tab切换
+      newTab: '请求次数',
+      abilityListData: [
+        {
+          name: '能里名称一',
+          snum: '239'
+        },
+        {
+          name: '能里名称一222222222222222222222222',
+          snum: '239'
+        },
+        {
+          name: '能里名称一',
+          snum: '239'
+        },
+        {
+          name: '能里名称一',
+          snum: '239'
+        },
+        {
+          name: '能里名称一',
+          snum: '239'
+        },
+        {
+          name: '能里名称一',
+          snum: '239'
+        },
+        {
+          name: '能里名称一',
+          snum: '239'
+        },
+        {
+          name: '能里名称一',
+          snum: '239'
+        },
+        {
+          name: '能里名称一',
+          snum: '239'
+        },
+        {
+          name: '能里名称一',
+          snum: '239'
+        }
+      ] // 能力排行数据初始化
     }
   },
   watch: {},
   computed: {},
-  methods: {},
+  methods: {
+    // echarts通用方法
+    // 请求趋势图
+    myCharts1 () {
+      var chartDom = document.getElementById('request-trend-chart')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['成功次数', '失败次数'],
+          bottom: '0%',
+          textStyle: {
+            fontSize: 11,
+            color: '#999999'
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '12%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            name: '时间',
+            nameTextStyle: {
+              // y轴上方单位的颜色
+              color: '#999999',
+              fontSize: 11
+            },
+            boundaryGap: false,
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 11,
+                color: '#999999'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ebebeb'
+              }
+            },
+            data: ['1', '2', '3', '4', '5', '6', '7', '8']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '次数',
+            nameTextStyle: {
+              // y轴上方单位的颜色
+              color: '#999999',
+              fontSize: 11
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ebebeb'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 11,
+                color: '#999999'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(0,0,0,0)'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '成功次数',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(17 , 130, 251, 0.15)'
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(17 , 130, 251, 0)'
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#1182fb',
+                borderColor: 'rgba(137,189,2,0.27)',
+                borderWidth: 12
+              }
+            },
+            data: [20, 82, 91, 34, 50, 20, 10, 25]
+          },
+          {
+            name: '失败次数',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(252 , 197, 73, 0.15)'
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(252 , 197, 73, 0)'
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(252 , 197, 73, 1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#FCC549',
+                borderColor: 'rgba(0,136,212,0.2)',
+                borderWidth: 12
+              }
+            },
+            data: [20, 10, 25, 45, 22, 65, 22, 20]
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    },
+    // 数据流量趋势图
+    myCharts2 () {
+      var chartDom = document.getElementById('data-traffic-trend-view')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['出口流量', '入口流量'],
+          bottom: '0%',
+          textStyle: {
+            fontSize: 11,
+            color: '#999999'
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '12%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            name: '时间',
+            nameTextStyle: {
+              // y轴上方单位的颜色
+              color: '#999999',
+              fontSize: 11
+            },
+            boundaryGap: false,
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 11,
+                color: '#999999'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ebebeb'
+              }
+            },
+            data: ['1', '2', '3', '4', '5', '6', '7', '8']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: 'kb',
+            nameTextStyle: {
+              // y轴上方单位的颜色
+              color: '#999999',
+              fontSize: 11
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ebebeb'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 11,
+                color: '#999999'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(0,0,0,0)'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '出口流量',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(17 , 130, 251, 0.15)'
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(17 , 130, 251, 0)'
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#1182fb',
+                borderColor: 'rgba(137,189,2,0.27)',
+                borderWidth: 12
+              }
+            },
+            data: [20, 82, 91, 34, 50, 20, 10, 25]
+          },
+          {
+            name: '入口流量',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(252 , 197, 73, 0.15)'
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(252 , 197, 73, 0)'
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(252 , 197, 73, 1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#FCC549',
+                borderColor: 'rgba(0,136,212,0.2)',
+                borderWidth: 12
+              }
+            },
+            data: [20, 10, 25, 45, 22, 65, 22, 20]
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    },
+    // 请求出错趋势图
+    myCharts3 () {
+      var chartDom = document.getElementById('request-error-trend-chart')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['失败次数'],
+          bottom: '0%',
+          textStyle: {
+            fontSize: 11,
+            color: '#999999'
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '12%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            name: '时间',
+            nameTextStyle: {
+              // y轴上方单位的颜色
+              color: '#999999',
+              fontSize: 11
+            },
+            boundaryGap: false,
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 11,
+                color: '#999999'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ebebeb'
+              }
+            },
+            data: ['1', '2', '3', '4', '5', '6', '7', '8']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '次数',
+            nameTextStyle: {
+              // y轴上方单位的颜色
+              color: '#999999',
+              fontSize: 11
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ebebeb'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 11,
+                color: '#999999'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(0,0,0,0)'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '失败次数',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(252 , 197, 73, 0.15)'
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(252 , 197, 73, 0)'
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(252 , 197, 73, 1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#FCC549',
+                borderColor: 'rgba(0,136,212,0.2)',
+                borderWidth: 12
+              }
+            },
+            data: [20, 10, 25, 45, 22, 65, 22, 20]
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    },
+    // 请求时延趋势图
+    myCharts4 () {
+      var chartDom = document.getElementById('request-latency-trend-diagram')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['请求总时延', '网关时延', '源服务时延'],
+          bottom: '0%',
+          textStyle: {
+            fontSize: 11,
+            color: '#999999'
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '12%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            name: '时间',
+            nameTextStyle: {
+              // y轴上方单位的颜色
+              color: '#999999',
+              fontSize: 11
+            },
+            boundaryGap: false,
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 11,
+                color: '#999999'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ebebeb'
+              }
+            },
+            data: ['1', '2', '3', '4', '5', '6', '7', '8']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '秒',
+            nameTextStyle: {
+              // y轴上方单位的颜色
+              color: '#999999',
+              fontSize: 11
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ebebeb'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 11,
+                color: '#999999'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(0,0,0,0)'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '请求总时延',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(17 , 130, 251, 0.15)'
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(17 , 130, 251, 0)'
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#1182fb',
+                borderColor: 'rgba(137,189,2,0.27)',
+                borderWidth: 12
+              }
+            },
+            data: [20, 82, 91, 34, 50, 20, 10, 25]
+          },
+          {
+            name: '网关时延',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(252 , 197, 73, 0.15)'
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(252 , 197, 73, 0)'
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(252 , 197, 73, 1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#FCC549',
+                borderColor: 'rgba(0,136,212,0.2)',
+                borderWidth: 12
+              }
+            },
+            data: [20, 10, 25, 45, 22, 65, 22, 20]
+          },
+          {
+            name: '源服务时延',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(73,201,136, 0.15)'
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(73,201,136, 0)'
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(73,201,136, 1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#49C988',
+                borderColor: 'rgba(0,136,212,0.2)',
+                borderWidth: 12
+              }
+            },
+            data: [10, 35, 25, 45, 12, 25, 32, 40]
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    },
+    // 能力排行榜tab切换方法
+    abilityListTabSwitch (name) {
+      this.newTab = name
+    },
+    init () {
+      this.myCharts1()
+      this.myCharts2()
+      this.myCharts3()
+      this.myCharts4()
+    }
+  },
   created () {},
-  mounted () {}
+  mounted () {
+    this.init()
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -59,9 +936,179 @@ export default {
     margin-bottom: 20px;
     font-weight: bold;
   } //共享二级title样式
-  .request-overview {
-    margin-right: 80px;
-    .request-overview-content {
+  .analysis-of-the-request-content {
+    display: flex;
+    //请求概况样式
+    .request-overview {
+      margin-right: 80px;
+      .request-overview-content {
+        width: 280px;
+        height: 90px;
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        padding: 0 20px;
+        .request-overview-content-card {
+          display: flex;
+          .card-label {
+            width: 21px;
+            height: 21px;
+            margin-right: 20px;
+          }
+          .card-name-and-tatol {
+            p:first-child {
+              font-size: 16px;
+              color: #5f6770;
+              margin-bottom: 20px;
+            }
+            p:last-child {
+              font-size: 24px;
+              font-weight: bold;
+              margin-bottom: 0;
+            }
+          }
+        }
+      }
+    }
+    //请求趋势样式
+    .capacity-request-trend {
+      width: 800px;
+      margin-right: 80px;
+      .capacity-request-trend-echarts {
+        display: flex;
+        .capacity-request-trend-echarts-left {
+          position: relative;
+          margin-right: 70px;
+          .request-trend-chart {
+            margin-bottom: 25px;
+          }
+        }
+        .request-trend-chart-title {
+          position: absolute;
+          color: #333333;
+          font-size: 16px;
+        }
+        .request-error-trend-chart {
+          margin-bottom: 25px;
+        }
+        .request-trend-chart,
+        .data-traffic-trend-view,
+        .request-error-trend-chart,
+        .request-latency-trend-diagram {
+          width: 350px;
+          height: 215px;
+        }
+      }
+    }
+    //能力排行榜样式
+    .Ability-list {
+      width: 380px;
+      height: 480px;
+      padding: 34px 20px 20px 20px;
+      .Ability-list-tab {
+        display: flex;
+        margin-bottom: 20px;
+        & > div {
+          width: 90px;
+          height: 22px;
+          margin-right: 10px;
+          font-size: 12px;
+          color: #666666;
+          line-height: 22px;
+          text-align: center;
+          border: 1px #cccccc solid;
+          border-radius: 11px;
+          cursor: pointer;
+        }
+        .down {
+          color: #1182fb;
+          border: 1px #1182fb solid;
+        }
+      }
+      .Ability-list-content {
+        .Ability-list-content-card {
+          margin-bottom: 6px;
+          display: flex;
+          div:first-child {
+            width: 54px;
+            height: 30px;
+            margin-right: 26px;
+            padding-left: 12px;
+            color: #999999;
+            font-size: 13px;
+            font-weight: bold;
+            line-height: 30px;
+            background: linear-gradient(
+              to right,
+              rgba(196, 196, 196, 0.6),
+              rgba(196, 196, 196, 0)
+            );
+          }
+          div:nth-child(2) {
+            width: 180px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            padding-right: 10px;
+            font-weight: bold;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            cursor: pointer;
+          }
+          div:last-child {
+            height: 30px;
+            line-height: 30px;
+            font-weight: bold;
+            font-size: 16px;
+          }
+        }
+        .Ability-list-content-card:first-child {
+          div:first-child {
+            width: 80px;
+            margin: 0;
+            color: #fc5656;
+            background: linear-gradient(
+              to right,
+              rgba(251, 59, 5, 0.6),
+              rgba(251, 59, 5, 0)
+            );
+          }
+          div:last-child {
+            color: #fc5656;
+          }
+        }
+        .Ability-list-content-card:nth-child(2) {
+          div:first-child {
+            width: 80px;
+            margin: 0;
+            color: #ff8a00;
+            background: linear-gradient(
+              to right,
+              rgba(251, 123, 5, 0.6),
+              rgba(251, 123, 5, 0)
+            );
+          }
+          div:last-child {
+            color: #ff8a00;
+          }
+        }
+        .Ability-list-content-card:nth-child(3) {
+          div:first-child {
+            width: 60px;
+            margin-right: 20px;
+            color: #f9af0a;
+            background: linear-gradient(
+              to right,
+              rgba(250, 243, 2, 0.6),
+              rgba(250, 243, 2, 0)
+            );
+          }
+          div:last-child {
+            color: #f9af0a;
+          }
+        }
+      }
     }
   }
 }