工作台部门能力风险和能力云图
This commit is contained in:
851673013@qq.com
parent
16a624b136
commit
d8cbe92fb6
|
|
@ -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>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue