wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

后台能力运行监控

This commit is contained in:
851673013@qq.com 2022-07-28 20:40:48 +08:00
parent bab0c94093
commit 8376fb23d5
8 changed files with 771 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

315
back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
View File

@ -6,14 +6,14 @@
<img src="~@/assets/img/CapabilityOperationMonitoring/API-allNum.png" />
<div>
<h4>API总数</h4>
<p>99999</p>
<p>{{ Apisnum }}</p>
</div>
</div>
<div class="ApiBox">
<img src="~@/assets/img/CapabilityOperationMonitoring/API-badNum.png" />
<div>
<h4>异常API总数</h4>
<p>99999</p>
<p>{{ ApisnumShiBai }}</p>
</div>
</div>
</div>
@ -24,12 +24,23 @@
<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">
<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>
<span>{{ item.count }}</span>
</li>
</ul>
</div>
@ -45,24 +56,62 @@
<h4 class="title">API异常次数统计</h4>
<div class="AnomalyStatisticsTable">
<el-table :data="AnomalyStatisticsTable" border style="width: 100%">
<el-table-column prop="name" label="接口名称" width="80" :resizable="false" :show-overflow-tooltip="true">
<el-table-column
prop="name"
label="接口名称"
width="80"
:resizable="false"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column prop="address" label="接口地址" width="200" :resizable="false" :show-overflow-tooltip="true">
<el-table-column
prop="address"
label="接口地址"
width="200"
:resizable="false"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column prop="method" label="调用方法" :resizable="false" :show-overflow-tooltip="true">
<el-table-column
prop="method"
label="调用方法"
:resizable="false"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column prop="type" label="组件类型" :resizable="false" :show-overflow-tooltip="true">
<el-table-column
prop="type"
label="组件类型"
:resizable="false"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column prop="provider" label="提供商" :resizable="false" :show-overflow-tooltip="true">
<el-table-column
prop="provider"
label="提供商"
:resizable="false"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column prop="state" label="监控状态" :resizable="false" :show-overflow-tooltip="true">
<el-table-column
prop="state"
label="监控状态"
:resizable="false"
:show-overflow-tooltip="true"
>
</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
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-size="5"
layout="total, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
@ -72,55 +121,26 @@
</template>
<script>
import * as echarts from 'echarts'
import * as moment from 'moment'
export default {
// components: {},
// props: {},
props: {
callTheTrendData: {
type: Object,
default: () => {}
},
timeSwitchindex: {
type: String,
default: () => {}
}
},
data () {
return {
endAndstartTime: {},
ApisnumShiBai: '',
Apisnum: '',
// 排行榜
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'
}
],
RankingData: [],
// 表格
AnomalyStatisticsTable: [
{
@ -174,6 +194,181 @@ export default {
// 分页
this.total = this.AnomalyStatisticsTable.length
},
watch: {
callTheTrendData: {
deep: true,
handler () {
this.endAndstartTime = this.callTheTrendData
if (this.endAndstartTime.end !== this.endAndstartTime.start) {
if (this.timeSwitchindex === '周') {
// API总数（周）
this.$http
.get(
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[7d]))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.Apisnum = parseInt(res.data.data.result[0].value[1])
// API异常总数(周)
this.$http
.get(
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[7d]))&time=${this.callTheTrendData.end}`
)
.then((resSon) => {
this.ApisnumShiBai = parseInt(
this.Apisnum - resSon.data.data.result[0].value[1]
)
})
})
// API异常分析(周)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[7d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.RankingData = res.data.data
})
// // API异常次数统计(周)
// this.$http
// .get(
// `/metrics/api/v1/query?query=topk(10, sum(increase(apigateway_http_status{code != "200"}[7d])) by (matched_uri))&time=${this.callTheTrendData.end}`
// )
// .then((res) => {
// debugger
// })
} else if (this.timeSwitchindex === '月') {
// API总数（月）
this.$http
.get(
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[30d]))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.Apisnum = parseInt(res.data.data.result[0].value[1])
// API异常总数(月)
this.$http
.get(
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[30d]))&time=${this.callTheTrendData.end}`
)
.then((resSon) => {
this.ApisnumShiBai = parseInt(
this.Apisnum - resSon.data.data.result[0].value[1]
)
})
})
// API异常分析(月)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[30d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.RankingData = res.data.data
})
} else if (this.timeSwitchindex === '时间段') {
// API总数（时间段）
this.$http
.get(
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[${
this.callTheTrendData.end - this.callTheTrendData.start
}s:1s]))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.Apisnum = parseInt(res.data.data.result[0].value[1])
// API异常总数(时间段)
this.$http
.get(
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[${
this.callTheTrendData.end - this.callTheTrendData.start
}s:1s]))&time=${this.callTheTrendData.end}`
)
.then((resSon) => {
this.ApisnumShiBai = parseInt(
this.Apisnum - resSon.data.data.result[0].value[1]
)
})
})
// API异常分析(时间段)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[${
this.callTheTrendData.end - this.callTheTrendData.start
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
this.callTheTrendData.end
}`
)
.then((res) => {
this.RankingData = res.data.data
})
}
} else {
// API总数（日）
this.$http
.get(
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[1d]))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.Apisnum = parseInt(res.data.data.result[0].value[1])
// API异常总数(日)
this.$http
.get(
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[1d]))&time=${this.callTheTrendData.end}`
)
.then((resSon) => {
this.ApisnumShiBai = parseInt(
this.Apisnum - resSon.data.data.result[0].value[1]
)
})
})
// API异常分析(日)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[1d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.RankingData = res.data.data
})
}
}
},
timeSwitchindex: {
handler () {
if (this.timeSwitchindex === '时间段') {
// API总数（时间段）
this.$http
.get(
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[${
this.callTheTrendData.end - this.callTheTrendData.start
}s:1s]))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.Apisnum = parseInt(res.data.data.result[0].value[1])
// API异常总数(时间段)
this.$http
.get(
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[${
this.callTheTrendData.end - this.callTheTrendData.start
}s:1s]))&time=${this.callTheTrendData.end}`
)
.then((resSon) => {
this.ApisnumShiBai = parseInt(
this.Apisnum - resSon.data.data.result[0].value[1]
)
})
})
// API异常分析(时间段)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[${
this.callTheTrendData.end - this.callTheTrendData.start
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
this.callTheTrendData.end
}`
)
.then((res) => {
this.RankingData = res.data.data
})
}
}
}
},
methods: {
// 分页
handleSizeChange (val) {
@ -276,7 +471,7 @@ export default {
}
.ApiBox {
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-blue.png")
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png')
no-repeat;
background-size: 100%;
width: 22.5rem;
@ -314,7 +509,7 @@ export default {
}
.ApiBox:last-of-type {
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png")
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png')
no-repeat;
background-size: 100%;

186
back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
View File

@ -81,7 +81,7 @@
>
<div>{{ item.name }}</div>
</el-tooltip>
<div>{{ item.snum }}</div>
<div>{{ item.count }}</div>
</div>
</div>
</div>
@ -98,6 +98,10 @@ export default {
callTheTrendData: {
type: Object,
default: () => {}
},
timeSwitchindex: {
type: String,
default: () => {}
}
},
data () {
@ -151,56 +155,93 @@ export default {
},
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'
}
] // 能力排行数据初始化
abilityListData: [] // 能力排行数据初始化
}
},
watch: {
callTheTrendData: {
dataRange: {
deep: true,
handler () {
this.endAndstartTime = this.callTheTrendData
if (this.endAndstartTime.end != this.endAndstartTime.start) {
if (this.timeSwitchindex === '周') {
if (this.newTab === '请求次数') {
// 能力排行榜请求次数(周)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status[7d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.abilityListData = res.data.data
this.abilityListData.forEach((item) => {
item.count = parseInt(item.count)
})
})
} else if (this.newTab === '请求失败次数') {
// 能力排行榜请求失败次数(周)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[7d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.abilityListData = res.data.data
})
}
} else if (this.timeSwitchindex === '月') {
if (this.newTab === '请求次数') {
// 能力排行榜请求次数(月)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status[30d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.abilityListData = res.data.data
this.abilityListData.forEach((item) => {
item.count = parseInt(item.count)
})
})
} else if (this.newTab === '请求失败次数') {
// 能力排行榜请求失败次数(周)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[30d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.abilityListData = res.data.data
})
}
} else if (this.timeSwitchindex === '时间段') {
if (this.newTab === '请求次数') {
// 能力排行榜请求次数(时间段)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status[${
this.callTheTrendData.end - this.callTheTrendData.start
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
this.callTheTrendData.end
}`
)
.then((res) => {
this.abilityListData = res.data.data
this.abilityListData.forEach((item) => {
item.count = parseInt(item.count)
})
})
} else if (this.newTab === '请求失败次数') {
// 能力排行榜请求失败次数(周)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[${
this.callTheTrendData.end - this.callTheTrendData.start
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
this.callTheTrendData.end
}`
)
.then((res) => {
this.abilityListData = res.data.data
})
}
}
this.$http
.get(
'/metrics/api/v1/query?' +
@ -240,6 +281,29 @@ export default {
}
})
} else {
if (this.newTab === '请求次数') {
// 能力排行榜请求次数(日)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status[1d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.abilityListData = res.data.data
this.abilityListData.forEach((item) => {
item.count = parseInt(item.count)
})
})
} else if (this.newTab === '请求失败次数') {
// 能力排行榜请求失败次数(周)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[1d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
)
.then((res) => {
this.abilityListData = res.data.data
})
}
this.$http
.get(
'/metrics/api/v1/query?query=sum(apigateway_http_status)&time=' +
@ -282,7 +346,6 @@ export default {
)
.then((res) => {
if (res.data.data.result[0]) {
debugger
this.requestOverviewData[3].tatol = parseInt(
res.data.data.result[0].value[1]
)
@ -406,7 +469,6 @@ export default {
86400
)
.then((res) => {
debugger
if (res.data.data.result[0]) {
res.data.data.result[0].values.map((item, index) => {
this.shuJuLiuLiang.ruvalue.push(
@ -422,9 +484,39 @@ export default {
}
console.log('this.endAndstartTime', this.endAndstartTime)
}
},
timeSwitchindex: {
handler () {
if (this.timeSwitchindex === '时间段' && this.newTab === '请求次数') {
// 能力排行榜请求次数(时间段)
this.$http
.get(
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status[${
this.callTheTrendData.end - this.callTheTrendData.start
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
this.callTheTrendData.end
}`
)
.then((res) => {
this.abilityListData = res.data.data
this.abilityListData.forEach((item) => {
item.count = parseInt(item.count)
})
})
}
}
}
},
computed: {
dataRange () {
const { timeSwitchindex, callTheTrendData, newTab } = this
return {
timeSwitchindex,
callTheTrendData,
newTab
}
}
},
computed: {},
methods: {
// echarts通用方法
// 请求趋势图

61
back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue
View File

@ -40,16 +40,22 @@
:picker-options="pickerOptions1"
>
</el-date-picker>
<el-button type="primary" round>确定</el-button>
<el-button type="primary" round @click="switchTimeFunction()"
>确定</el-button
>
</div>
</div>
</div>
<div class="capability-operation-monitoring-center">
<abnormal-situation></abnormal-situation>
<abnormal-situation
:callTheTrendData="callTheTrendData"
:timeSwitchindex="timeSwitchindex"
></abnormal-situation>
</div>
<div class="capability-operation-monitoring-bottom">
<analysis-of-the-request
:callTheTrendData="callTheTrendData"
:timeSwitchindex="timeSwitchindex"
></analysis-of-the-request>
</div>
</div>
@ -67,8 +73,9 @@ export default {
data () {
return {
timeSwitchindex: '日',
timeStart: '',
timeEnd: '',
timeStart: new Date(),
leftAndrightTime: 0,
timeEnd: new Date(),
pickerOptions0: {
disabledDate: (time) => {
if (this.timeEnd != '') {
@ -87,29 +94,53 @@ export default {
}
}
},
watch: {},
watch: {
timeSwitchindex: {
handler () {
var time = new Date()
switch (this.timeSwitchindex) {
case '日':
this.timeStart = time
this.timeEnd = time
break
case '周':
this.timeStart = new Date(time.getTime() - 168 * 60 * 60 * 1000)
this.timeEnd = time
break
case '月':
this.timeStart = new Date(time.getTime() - 720 * 60 * 60 * 1000)
this.timeEnd = time
}
}
},
timeStart: {
handler () {
this.callTheTrendData.start = parseInt(this.timeStart / 1000)
}
},
timeEnd: {
handler () {
this.callTheTrendData.end = parseInt(this.timeEnd / 1000)
}
}
},
computed: {},
methods: {
switchTimeFunction () {
this.timeSwitchindex = '时间段'
},
timeSwitch (name) {
this.timeSwitchindex = name
if (name == '周') {
if (name === '周') {
const start = parseInt(
(Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
)
this.callTheTrendData.start = start
console.log(
'this.callTheTrendData',
parseInt((Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000)
)
} else if (name == '月') {
} else if (name === '月') {
const start = parseInt(
(Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
)
this.callTheTrendData.start = start
console.log(
'this.callTheTrendData',
parseInt((Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000)
)
} else {
this.callTheTrendData.start = Date.parse(new Date()) / 1000
this.callTheTrendData.end = Date.parse(new Date()) / 1000

12
back/src/views/modules/workBench/api.js
View File

@ -1,10 +1,10 @@
// /resource/getByDept
import http from '@/utils/request';
import http from '@/utils/request'
function Request({
methods, url, data, success, fali
}) {
let _key = methods == 'get' ? 'params' : 'data';
const _key = methods == 'get' ? 'params' : 'data'
return new Promise((resolve, reject) => {
http[methods](url, {
[_key]: data
@ -14,7 +14,6 @@ function Request({
reject(err)
})
})
}
function RequestPost({
methods, url, data, success, fali
@ -28,7 +27,6 @@ function RequestPost({
reject(err)
})
})
}
// /resource/getByDept:获取当前登录用户所在部门发布的资源
@ -72,7 +70,6 @@ export const getTotalByDept = (data, success, fail) => {
})
}
// 部门申请
export const getApply = (data, success, fail) => {
Request({
@ -141,9 +138,8 @@ export const getApplyByDept = (data, success, fail) => {
// 部门发布能力被调用趋势
export const getByDept = (data, success, fail) => {
RequestPost({
methods: 'post',
url: '/resource/trafficDeptResource',
data
methods: 'get',
url: `/gateway-monitor/queryGroupByDeptInRange?query=sum(label_replace(increase(apigateway_http_status[1d]), "deptInfo", "$1", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (deptInfo)&start=${data.startDate}&end=${data.endDate}&step=86400`
}).then(res => {
success && success(res)
}).catch(err => {

45
back/src/views/modules/workBench/components/lineOption.js
View File

@ -1,17 +1,16 @@
import * as echarts from 'echarts'
// 折线图
export const trendLineChart = (id, chartData, _option) => {
let { xaxis = [], ydata = [], } = chartData;
const { xaxis = [], ydata = [] } = chartData
let option = {
tooltip: {
trigger: 'axis',
trigger: 'axis'
},
grid: {
top: '16%',
left: '7%',
right: '7%',
bottom: '10%',
bottom: '10%'
},
xAxis: [{
type: 'category',
@ -20,23 +19,23 @@ export const trendLineChart = (id, chartData, _option) => {
show: true,
lineStyle: {
color: 'rgba(138,178,241)'
},
}
},
axisLabel: { // 坐标轴刻度标签的相关设置
textStyle: {
color: '#2b2b2b',
margin: 15,
fontSize: '14'
},
}
},
axisTick: {
show: false,
show: false
},
data: xaxis,
data: xaxis
}],
yAxis: [{
name: '使用量(万次)',
nameTextStyle:{color:"#2b2b2b"},
nameTextStyle: { color: '#2b2b2b' },
type: 'value',
min: 0,
max: 100,
@ -51,7 +50,7 @@ export const trendLineChart = (id, chartData, _option) => {
show: true,
lineStyle: {
color: 'rgba(138,178,241)'
},
}
},
axisLabel: {
show: true,
@ -59,12 +58,12 @@ export const trendLineChart = (id, chartData, _option) => {
color: '#2b2b2b',
margin: 15,
fontSize: '14'
},
}
},
axisTick: {
show: false,
},
show: false
}
}],
series: [{
name: '使用量',
@ -87,11 +86,11 @@ export const trendLineChart = (id, chartData, _option) => {
borderColor: '#f0f'
},
label: {
show: false,
show: false
},
itemStyle: {
normal: {
color: "#0058ee",
color: '#0058ee'
}
},
// 区域填充样式
@ -113,17 +112,17 @@ export const trendLineChart = (id, chartData, _option) => {
},
data: ydata
}]
};
}
if (_option !== undefined) {
option = Object.assign({}, option, _option)
}
const client = document.getElementById(id);
let myChart = echarts.init(client);
const clientWidth = client.clientWidth;
const clientHeight = client.clientHeight;
myChart.clear();
myChart.resize({ width: clientWidth, height: clientHeight });
myChart.setOption(option);
const client = document.getElementById(id)
const myChart = echarts.init(client)
const clientWidth = client.clientWidth
const clientHeight = client.clientHeight
myChart.clear()
myChart.resize({ width: clientWidth, height: clientHeight })
myChart.setOption(option)
}

140
back/src/views/modules/workBench/components/trend-view.vue
View File

@ -8,47 +8,78 @@
@click="handleTitleSwitch(idx)"
class="top-title"
:class="{ active: idx == selectedTitle }"
>{{ item }}</div>
>
{{ item }}
</div>
</div>
</content-title>
<div id="trendId" class="trend-echart"></div>
</div>
</template>
<script>
import { trendLineChart } from "./lineOption";
import contentTitle from "./content-title";
import * as Apis from "../api";
import { trendLineChart } from './lineOption'
import contentTitle from './content-title'
import * as Apis from '../api'
import moment from 'moment'
export default {
data () {
return {
titles: ["近七日", "月度"],
titles: ['近七日', '月度'],
selectedTitle: 0,
trendChartData: {},
startDate: "",
endDate:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate()
};
startDate: '',
endDate: Math.round(new Date() / 1000),
ydata: [],
xaxis: []
}
},
components: {
contentTitle
},
mounted () {
this.initChart();
this.initChart()
},
watch: {
selectedTitle: {
handler: function (newVal, oldVal) {
this.startDate = this.getData(newVal == 0 ? 7 : 30);
this.startDate = this.getData(newVal == 0 ? 7 : 30)
this.ydata = this.getday2(this.selectedTitle === 0 ? 7 : 30)
this.ydata.map((item) => {
this.xaxis.push(0)
})
},
deep: true,
immediate: true
}
},
methods: {
// 返回最近七天的日期
getday2 (index) {
const days = []
var Dates = new Date()
for (let i = 0; i <= 24 * (index - 1); i += 24) {
// 今天加上前6天
const dateItem = new Date(Dates.getTime() - i * 60 * 60 * 1000) // 使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
const y = dateItem.getFullYear() // 获取年份
let m = dateItem.getMonth() + 1 // 获取月份js月份从0开始，需要+1
let d = dateItem.getDate() // 获取日期
m = this.addDate0(m) // 给为单数的月份补零
d = this.addDate0(d) // 给为单数的日期补零
const valueItem = y + '-' + m + '-' + d // 组合
days.unshift(valueItem) // 添加至数组
}
console.log('最近七天日期：', days)
return days
},
// 给日期加0
addDate0 (time) {
if (time.toString().length == 1) {
time = '0' + time.toString()
}
return time
},
// 发布动态
initChart () {
Apis.getByDept(
@ -56,60 +87,53 @@ export default {
startDate: this.startDate,
endDate: this.endDate
},
res => {
if (res.data.code !== 0) {
return;
(res) => {
// if (res.data.code !== 0) {
// return
// }
this.data = res.data.data[0].values
this.data.map((item) => {
const time = moment(item[0] * 1000).format('YYYY-MM-DD')
this.ydata.map((itemSon, indexSon) => {
if (itemSon === time) {
this.xaxis[indexSon] = parseInt(item[1])
}
this.data = res.data.data.browseDayList || [];
let xaxis = [],
ydata = [];
this.data.forEach(v => {
Object.keys(v).map((key, value) => {
xaxis.push(key);
ydata.push(value);
});
});
console.log(xaxis)
console.log(ydata)
})
})
this.trendChartData = {
xaxis: xaxis,
ydata: ydata
};
this.$nextTick(() => {
trendLineChart("trendId", this.trendChartData);
});
},
err => {
console.log("err", err);
xaxis: this.ydata,
ydata: this.xaxis
}
);
this.$nextTick(() => {
trendLineChart('trendId', this.trendChartData)
})
},
(err) => {
console.log('err', err)
}
)
},
handleTitleSwitch (idx) {
this.selectedTitle = idx;
this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30);
console.log(this.startDate);
this.initChart();
this.selectedTitle = idx
this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30)
console.log(this.startDate)
this.initChart()
},
getData (aa) {
let date1 = new Date(),
time1 =
const date1 = new Date()
const time1 =
date1.getFullYear() +
"-" +
'-' +
(date1.getMonth() + 1) +
"-" +
date1.getDate(); //time1表示当前时间
let date2 = new Date(date1);
date2.setDate(date1.getDate() - aa);
let time2 =
date2.getFullYear() +
"-" +
(date2.getMonth() + 1) +
"-" +
date2.getDate();
return time2;
'-' +
date1.getDate() // time1表示当前时间
const date2 = new Date(date1)
date2.setDate(date1.getDate() - aa)
const time2 = Math.round(date2 / 1000)
return time2
}
}
}
};
</script>
<style lang="scss" scoped>
.trend {

11
front/src/api/capabilityCloud.js
View File

@ -97,8 +97,15 @@ export function callTheTrendPort(start, end, params) {
export function totalCallsSnum(params) {
return request({
url:
'/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' +
params,
`metrics/api/v1/query?query=sum(increase(apigateway_http_status))&time=${params}`,
method: 'get',
})
}
//能力云图-调用成功次数
export function totalCallsSnum2(params) {
return request({
url:
`metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}))&time=${params}`,
method: 'get',
})
}

8
front/src/views/capabilityCloud/components/ComponentServices.vue
View File

@ -119,6 +119,7 @@
componentServiceRank,
callTheTrendPort,
totalCallsSnum,
totalCallsSnum2,
} from '@/api/capabilityCloud'
import * as moment from 'moment'
let xinhaianIsShow = whoShow.itShowXiHaiAn //判断是否是西海岸版本
@ -410,6 +411,13 @@
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 +
'%'
})
})
}
}