From d8cbe92fb63a8cebc835cb9533b58dcfbb671307 Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Fri, 29 Jul 2022 14:14:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8F=B0=E9=83=A8=E9=97=A8?=
 =?UTF-8?q?=E8=83=BD=E5=8A=9B=E9=A3=8E=E9=99=A9=E5=92=8C=E8=83=BD=E5=8A=9B?=
 =?UTF-8?q?=E4=BA=91=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workBench/components/risk-view.vue        | 133 +++++++++++++++---
 front/src/api/capabilityCloud.js              |   4 +-
 .../components/ComponentServices.vue          |  18 +--
 3 files changed, 124 insertions(+), 31 deletions(-)

diff --git a/back/src/views/modules/workBench/components/risk-view.vue b/back/src/views/modules/workBench/components/risk-view.vue
index 33fb27ad..f7f884d3 100644
--- a/back/src/views/modules/workBench/components/risk-view.vue
+++ b/back/src/views/modules/workBench/components/risk-view.vue
@@ -1,32 +1,129 @@
 <template>
-    <div class="risk">
-        <contentTitle title="部门能力风险TOP5"></contentTitle>
-        <div class="no-data">暂无数据</div>
-
+  <div class="risk">
+    <contentTitle title="部门能力风险TOP5"></contentTitle>
+    <div class="no-data" v-if="topData.length > 0">
+      <div
+        class="data-card"
+        v-for="(item, index) in topData"
+        :key="`data${index}`"
+      >
+        <div class="data-index">{{ index + 1 }}</div>
+        <div class="data-name-And-progress">
+          <div class="data-title">{{ item.name }}</div>
+          <div class="data-progress-And-value">
+            <div class="data-progress">
+              <div :style="widthFunction(item.count)"></div>
+            </div>
+            <div class="data-count">
+              {{ item.count }}
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+    <div
+      class="no-data"
+      v-else
+      style="display: flex; align-items: center; justify-content: center"
+    >
+      暂无数据
+    </div>
+  </div>
 </template>
 <script>
 import contentTitle from './content-title.vue'
 export default {
-    components: { contentTitle }
+  components: { contentTitle },
+  data () {
+    return {
+      oneData: 100,
+      topData: []
+    }
+  },
+  methods: {
+    // 判断值域范围
+    widthFunction (value) {
+      value = (value / this.oneData) * 100
+      if (value >= 80) {
+        return `height:10px;width: ${value}%;background: linear-gradient(to right,#ee8a08,#ffcb64)`
+      } else if (value >= 60 && value < 80) {
+        return `height:10px;width: ${value}%;background: linear-gradient(to right,#788da5,#d4dbe4)`
+      } else if (value >= 40 && value < 60) {
+        return `height:10px;width: ${value}%;background: linear-gradient(to right,#d29c62,#e8c5a2)`
+      } else if (value < 40) {
+        return `height:10px;width: ${value}%;background: linear-gradient(to right,#6fa1ef,#9bbef8)`
+      }
+    },
+    queryGroupByDepartment () {
+      this.$http
+        .get(
+          '/gateway-monitor/queryGroupByDepartment?query=topk(5, sum(label_replace(apigateway_http_status{code!="200"}, "deptInfo", "$1", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (deptInfo))&time=1659058871'
+        )
+        .then((res) => {
+          console.log(res.data.data)
+          if (res.data.data) {
+            this.topData = res.data.data
+            this.oneData = this.topData[0].count
+          } else {
+            this.topData = []
+          }
+        })
+    }
+  },
+  mounted () {
+    this.queryGroupByDepartment()
+  }
 }
 </script>
 <style lang="scss" scoped>
 .risk {
-    width: 540px;
-    height: 335px;
-    background: #fff;
-    padding: 0 16px;
-    box-sizing: border-box;
+  width: 540px;
+  height: 335px;
+  background: #fff;
+  padding: 0 16px;
+  box-sizing: border-box;
 }
 
 .no-data {
-    width: 520px;
-    height: 287px;
-    background: #fff;
-    line-height: 232px;
-    font-size: 16px;
-    color: #212121;
-    text-align: center;
+  width: 520px;
+  height: 287px;
+  background: #fff;
+  font-size: 16px;
+  color: #212121;
+  text-align: center;
+  .data-card {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    .data-index {
+      font-size: 16px;
+      line-height: 16px;
+      color: #515151;
+      margin-right: 13px;
+    }
+    .data-name-And-progress {
+      .data-title {
+        font-size: 16px;
+        line-height: 16px;
+        color: #515151;
+        margin-bottom: 8px;
+        text-align: left;
+      }
+      .data-progress-And-value {
+        display: flex;
+        .data-progress {
+          width: 422px;
+          height: 10px;
+          background: #eeeeee;
+        }
+        .data-count {
+          margin-left: 20px;
+          font-size: 14px;
+          line-height: 14px;
+          color: #2b2b2b;
+        }
+      }
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/api/capabilityCloud.js b/front/src/api/capabilityCloud.js
index d6e2e151..011517fe 100644
--- a/front/src/api/capabilityCloud.js
+++ b/front/src/api/capabilityCloud.js
@@ -97,7 +97,7 @@ export function callTheTrendPort(start, end, params) {
 export function totalCallsSnum(params) {
   return request({
     url:
-      `metrics/api/v1/query?query=sum(increase(apigateway_http_status))&time=${params}`,
+      `/metrics/api/v1/query?time=${params}&query=sum(apigateway_http_status)`,
     method: 'get',
   })
 }
@@ -105,7 +105,7 @@ export function totalCallsSnum(params) {
 export function totalCallsSnum2(params) {
   return request({
     url:
-      `metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}))&time=${params}`,
+      `metrics/api/v1/query?query=sum(apigateway_http_status{code=~"^2.."})&time=${params}`,
     method: 'get',
   })
 }
diff --git a/front/src/views/capabilityCloud/components/ComponentServices.vue b/front/src/views/capabilityCloud/components/ComponentServices.vue
index b3359fd0..fc2dbd45 100644
--- a/front/src/views/capabilityCloud/components/ComponentServices.vue
+++ b/front/src/views/capabilityCloud/components/ComponentServices.vue
@@ -408,18 +408,14 @@
   //总调用次数接口
   const TotalCallsAPI = () => {
     const end = Date.parse(new Date()) / 1000
-    if (!xinhaianIsShow) {
-      totalCallsSnum(end).then((res) => {
-        snum.value[1].num = res.data.data.result[0].value[1]
-        totalCallsSnum2(end).then((resSon) => {
-          snum.value[2].num =
-            ((snum.value[1].num - resSon.data.data.result[0].value[1]) /
-              snum.value[1].num) *
-              100 +
-            '%'
-        })
+    totalCallsSnum(end).then((res) => {
+      debugger
+      snum.value[1].num = res.data.data.result[0].value[1]
+      totalCallsSnum2(end).then((resSon) => {
+        snum.value[2].num =
+          (resSon.data.data.result[0].value[1] / snum.value[1].num) * 100 + '%'
       })
-    }
+    })
   }
   const init = () => {
     timeSwitch(timeSwitchindex.value)