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

API异常分析

This commit is contained in:
851673013@qq.com 2022-06-28 17:28:47 +08:00
parent 58d9b209b7
commit 961a8076fd
1 changed files with 107 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,9 +24,20 @@
<div class="RankingList"> <div class="RankingList">
<h4 class="title">API异常次数排行TOP10</h4> <h4 class="title">API异常次数排行TOP10</h4>
<ul> <ul>
<li class="RankingListData" v-for="(item, index) in RankingData" :key="index"> <li
<i><b>{{ index + 1 }}</b></i> class="RankingListData"
<el-tooltip class="item" effect="dark" :content="item.name" placement="top"> 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> <h6>{{ item.name }}</h6>
</el-tooltip> </el-tooltip>
<span>{{ item.num }}</span> <span>{{ item.num }}</span>
@ -36,33 +47,37 @@
<!-- API异常分布 --> <!-- API异常分布 -->
<div class="AbnormalDistribution"> <div class="AbnormalDistribution">
<h4 class="title">API异常分布</h4> <h4 class="title">API异常分布</h4>
<div class='container-body1'> <div class="container-body1">
<div id="main" style="width: 100px;height:260px;"></div> <div id="main" style="width: 100px; height: 260px"></div>
</div> </div>
</div> </div>
<!-- API异常次数统计 --> <!-- API异常次数统计 -->
<div class="AnomalyStatistics"> <div class="AnomalyStatistics">
<h4 class="title">API异常次数统计</h4> <h4 class="title">API异常次数统计</h4>
<div class="AnomalyStatisticsTable"> <div class="AnomalyStatisticsTable">
<el-table :data="AnomalyStatisticsTable" border style="width:100%"> <el-table :data="AnomalyStatisticsTable" border style="width: 100%">
<el-table-column prop="name" label="接口名称" width="80"> <el-table-column prop="name" label="接口名称" width="80">
</el-table-column> </el-table-column>
<el-table-column prop="address" label="接口地址" width="200"> <el-table-column prop="address" label="接口地址" width="200">
</el-table-column> </el-table-column>
<el-table-column prop="method" label="调用方法"> <el-table-column prop="method" label="调用方法">
</el-table-column> </el-table-column>
<el-table-column prop="type" label="组件类型"> <el-table-column prop="type" label="组件类型"> </el-table-column>
</el-table-column>
<el-table-column prop="provider" label="提供商"> <el-table-column prop="provider" label="提供商">
</el-table-column> </el-table-column>
<el-table-column prop="state" label="监控状态"> <el-table-column prop="state" label="监控状态"> </el-table-column>
</el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 分页 --> <!-- 分页 -->
<div class="tablePagination"> <div class="tablePagination">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" <el-pagination
:current-page="currentPage4" :page-size="5" layout="total, prev, pager, next, jumper" :total="total"> @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-size="5"
layout="total, prev, pager, next, jumper"
:total="total"
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
@ -76,7 +91,7 @@ import * as echarts from 'echarts'
export default { export default {
// components: {}, // components: {},
// props: {}, // props: {},
data() { data () {
return { return {
// 排行榜 // 排行榜
RankingData: [ RankingData: [
@ -122,65 +137,67 @@ export default {
} }
], ],
// 表格 // 表格
AnomalyStatisticsTable: [{ AnomalyStatisticsTable: [
name: '接口名称', {
address: 'http://hhhhhhhhhhhhhhhhhhhh', name: '接口名称',
method: '调用方法', address: 'http://hhhhhhhhhhhhhhhhhhhh',
type: '组件类型', method: '调用方法',
provider: '提供商名称', type: '组件类型',
state: '监控状态' provider: '提供商名称',
}, state: '监控状态'
{ },
name: '接口名称', {
address: 'http://hhhhhhhhhhhhhhhhhhhh', name: '接口名称',
method: '调用方法', address: 'http://hhhhhhhhhhhhhhhhhhhh',
type: '组件类型', method: '调用方法',
provider: '提供商名称', type: '组件类型',
state: '监控状态' provider: '提供商名称',
}, state: '监控状态'
{ },
name: '接口名称', {
address: 'http://hhhhhhhhhhhhhhhhhhhh', name: '接口名称',
method: '调用方法', address: 'http://hhhhhhhhhhhhhhhhhhhh',
type: '组件类型', method: '调用方法',
provider: '提供商名称', type: '组件类型',
state: '监控状态' provider: '提供商名称',
}, state: '监控状态'
{ },
name: '接口名称', {
address: 'http://hhhhhhhhhhhhhhhhhhhh', name: '接口名称',
method: '调用方法', address: 'http://hhhhhhhhhhhhhhhhhhhh',
type: '组件类型', method: '调用方法',
provider: '提供商名称', type: '组件类型',
state: '监控状态' provider: '提供商名称',
}, state: '监控状态'
{ },
name: '接口名称', {
address: 'http://hhhhhhhhhhhhhhhhhhhh', name: '接口名称',
method: '调用方法', address: 'http://hhhhhhhhhhhhhhhhhhhh',
type: '组件类型', method: '调用方法',
provider: '提供商名称', type: '组件类型',
state: '监控状态' provider: '提供商名称',
}], state: '监控状态'
}
],
// 分页 // 分页
currentPage4: 1, currentPage4: 1,
total: 0 total: 0
} }
}, },
mounted() { mounted () {
this.myEchars() this.myEchars()
// 分页 // 分页
this.total = this.AnomalyStatisticsTable.length this.total = this.AnomalyStatisticsTable.length
}, },
methods: { methods: {
// 分页 // 分页
handleSizeChange(val) { handleSizeChange (val) {
console.log(`每页 ${val} 条`) console.log(`每页 ${val} 条`)
}, },
handleCurrentChange(val) { handleCurrentChange (val) {
console.log(`当前页: ${val}`) console.log(`当前页: ${val}`)
}, },
myEchars() { myEchars () {
var chartDom = document.getElementById('main') var chartDom = document.getElementById('main')
var myChart = echarts.init(chartDom) var myChart = echarts.init(chartDom)
var option var option
@ -190,15 +207,16 @@ export default {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
itemHeight: 10,
itemWidth: 10,
itemGap: 15,
textStyle: {
fontSize: 12, // 图例文字字体大小
color: '#666666' // 图例文字颜色
},
bottom: '22%' bottom: '22%'
}, },
color: ['#0087ff', '#ff8a00', '#fcc549', '#49c988'], color: ['#0087ff', '#ff8a00', '#fcc549', '#49c988'],
grid: {
left: '0%',
right: '0%',
bottom: '10%',
containLabel: true
},
series: [ series: [
{ {
center: ['50%', '20%'], center: ['50%', '20%'],
@ -263,7 +281,8 @@ export default {
} }
.ApiBox { .ApiBox {
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-blue.png") no-repeat; background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png')
no-repeat;
background-size: 100%; background-size: 100%;
width: 22.5rem; width: 22.5rem;
height: 6.875rem; height: 6.875rem;
@ -300,7 +319,8 @@ export default {
} }
.ApiBox:last-of-type { .ApiBox:last-of-type {
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png") no-repeat; background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png')
no-repeat;
background-size: 100%; background-size: 100%;
div { div {
@ -370,7 +390,11 @@ export default {
display: block; display: block;
height: 1.25rem; height: 1.25rem;
width: 2.25rem; width: 2.25rem;
background: linear-gradient(to right, rgba(204, 204, 204, 0.6), rgba(0, 0, 0, 0)); background: linear-gradient(
to right,
rgba(204, 204, 204, 0.6),
rgba(0, 0, 0, 0)
);
} }
} }
@ -397,7 +421,11 @@ export default {
.RankingListData:nth-of-type(1) i b { .RankingListData:nth-of-type(1) i b {
width: 3.75rem; width: 3.75rem;
background: linear-gradient(to right, rgba(251, 59, 5, 0.6), rgba(0, 0, 0, 0)); background: linear-gradient(
to right,
rgba(251, 59, 5, 0.6),
rgba(0, 0, 0, 0)
);
} }
.RankingListData:nth-of-type(1) span { .RankingListData:nth-of-type(1) span {
@ -406,7 +434,11 @@ export default {
.RankingListData:nth-of-type(2) i b { .RankingListData:nth-of-type(2) i b {
width: 3.125rem; width: 3.125rem;
background: linear-gradient(to right, rgba(251, 123, 5, 0.6), rgba(0, 0, 0, 0)); background: linear-gradient(
to right,
rgba(251, 123, 5, 0.6),
rgba(0, 0, 0, 0)
);
} }
.RankingListData:nth-of-type(2) span { .RankingListData:nth-of-type(2) span {
@ -415,7 +447,11 @@ export default {
.RankingListData:nth-of-type(3) i b { .RankingListData:nth-of-type(3) i b {
width: 2.75rem; width: 2.75rem;
background: linear-gradient(to right, rgba(250, 179, 2, 0.6), rgba(0, 0, 0, 0)); background: linear-gradient(
to right,
rgba(250, 179, 2, 0.6),
rgba(0, 0, 0, 0)
);
} }
.RankingListData:nth-of-type(3) span { .RankingListData:nth-of-type(3) span {
@ -426,7 +462,8 @@ export default {
.AbnormalDistribution { .AbnormalDistribution {
margin-right: 3.75rem; margin-right: 3.75rem;
.container-body1 {} .container-body1 {
}
} }
.AnomalyStatistics { .AnomalyStatistics {
@ -501,9 +538,7 @@ export default {
} }
} }
} }
} }
} }
} }
</style> </style>