工作台部门能力风险和能力云图

back/src/views/modules/workBench/components/risk-view.vue

@@ -1,32 +1,129 @@
 <template>
-    <div class="risk">
+  <div class="risk">
-        <contentTitle title="部门能力风险TOP5"></contentTitle>
+    <contentTitle title="部门能力风险TOP5"></contentTitle>
-        <div class="no-data">暂无数据</div>
+    <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;
+  width: 540px;
-    height: 335px;
+  height: 335px;
-    background: #fff;
+  background: #fff;
-    padding: 0 16px;
+  padding: 0 16px;
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .no-data {
-    width: 520px;
+  width: 520px;
-    height: 287px;
+  height: 287px;
-    background: #fff;
+  background: #fff;
-    line-height: 232px;
+  font-size: 16px;
-    font-size: 16px;
+  color: #212121;
-    color: #212121;
+  text-align: center;
-    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>
+</style>

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',
   })
 }

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) => {
-      totalCallsSnum(end).then((res) => {
+      debugger
-        snum.value[1].num = res.data.data.result[0].value[1]
+      snum.value[1].num = res.data.data.result[0].value[1]
-        totalCallsSnum2(end).then((resSon) => {
+      totalCallsSnum2(end).then((resSon) => {
-          snum.value[2].num =
+        snum.value[2].num =
-            ((snum.value[1].num - resSon.data.data.result[0].value[1]) /
+          (resSon.data.data.result[0].value[1] / snum.value[1].num) * 100 + '%'
-              snum.value[1].num) *
-              100 +
-            '%'
-        })
       })
-    }
+    })
   }
   const init = () => {
     timeSwitch(timeSwitchindex.value)