能力运行监控上半部分
This commit is contained in:
gaoyuanwei
parent
3ab89fcfec
commit
d4e47eafe6
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
|
@ -1,22 +1,508 @@
|
|||
<template>
|
||||
<div class="wrapper">概况和异常</div>
|
||||
<div class="contentBox">
|
||||
<div class="generalizeBox">
|
||||
<h3>API概括</h3>
|
||||
<div class="ApiBox">
|
||||
<img src="~@/assets/img/CapabilityOperationMonitoring/API-allNum.png" />
|
||||
<div>
|
||||
<h4>API总数</h4>
|
||||
<p>99999</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ApiBox">
|
||||
<img src="~@/assets/img/CapabilityOperationMonitoring/API-badNum.png" />
|
||||
<div>
|
||||
<h4>异常API总数</h4>
|
||||
<p>99999</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="abnormalBox">
|
||||
<h3>API异常分析</h3>
|
||||
<div class="abnormalBoxBottom">
|
||||
<!-- API异常次数排行TOP10 -->
|
||||
<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">
|
||||
<h6>{{ item.name }}</h6>
|
||||
</el-tooltip>
|
||||
<span>{{ item.num }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- API异常分布 -->
|
||||
<div class="AbnormalDistribution">
|
||||
<h4 class="title">API异常分布</h4>
|
||||
<div class='container-body1'>
|
||||
<div id="main" style="width: 100px;height:200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- API异常次数统计 -->
|
||||
<div class="AnomalyStatistics">
|
||||
<h4 class="title">API异常次数统计</h4>
|
||||
<div class="AnomalyStatisticsTable">
|
||||
<el-table :data="AnomalyStatisticsTable" border style="width:100%">
|
||||
<el-table-column prop="name" label="接口名称" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="接口地址" width="200">
|
||||
</el-table-column>
|
||||
<el-table-column prop="method" label="调用方法">
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="组件类型">
|
||||
</el-table-column>
|
||||
<el-table-column prop="provider" label="提供商">
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="监控状态">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {},
|
||||
// components: {},
|
||||
// props: {},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
// 排行榜
|
||||
RankingData: [
|
||||
{
|
||||
name: '能力名称一能力名称一能力名称一能力名称一能力名称一',
|
||||
num: '239'
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
methods: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
};
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
// 表格
|
||||
AnomalyStatisticsTable: [{
|
||||
name: '接口名称',
|
||||
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||
method: '调用方法',
|
||||
type: '组件类型',
|
||||
provider: '提供商名称',
|
||||
state: '监控状态'
|
||||
},
|
||||
{
|
||||
name: '接口名称',
|
||||
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||
method: '调用方法',
|
||||
type: '组件类型',
|
||||
provider: '提供商名称',
|
||||
state: '监控状态'
|
||||
},
|
||||
{
|
||||
name: '接口名称',
|
||||
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||
method: '调用方法',
|
||||
type: '组件类型',
|
||||
provider: '提供商名称',
|
||||
state: '监控状态'
|
||||
},
|
||||
{
|
||||
name: '接口名称',
|
||||
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||
method: '调用方法',
|
||||
type: '组件类型',
|
||||
provider: '提供商名称',
|
||||
state: '监控状态'
|
||||
},
|
||||
{
|
||||
name: '接口名称',
|
||||
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||
method: '调用方法',
|
||||
type: '组件类型',
|
||||
provider: '提供商名称',
|
||||
state: '监控状态'
|
||||
}],
|
||||
// 分页
|
||||
currentPage4: 1,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.myEchars()
|
||||
// 分页
|
||||
this.total = this.AnomalyStatisticsTable.length
|
||||
},
|
||||
methods: {
|
||||
// 分页
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`)
|
||||
},
|
||||
myEchars() {
|
||||
var chartDom = document.getElementById('main')
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
bottom: '0%'
|
||||
},
|
||||
color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'],
|
||||
series: [
|
||||
{
|
||||
name: 'GA 数据统计',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '12%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: '智能算法' },
|
||||
{ value: 100, name: '图层服务' },
|
||||
{ value: 100, name: '开发组件' },
|
||||
{ value: 100, name: '业务组件' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
.contentBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 1.25rem 0;
|
||||
|
||||
.generalizeBox {
|
||||
height: 21.875rem;
|
||||
margin-right: 1.25rem;
|
||||
padding: 1.25rem;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
|
||||
background: #ffffff;
|
||||
|
||||
h3 {
|
||||
font-size: 1.125rem;
|
||||
color: #333333;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 1.875rem;
|
||||
}
|
||||
|
||||
.ApiBox {
|
||||
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-blue.png") no-repeat;
|
||||
background-size: 100%;
|
||||
width: 22.5rem;
|
||||
height: 6.875rem;
|
||||
display: flex;
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
img {
|
||||
width: 1.25rem;
|
||||
height: 1.375rem;
|
||||
margin: 1.5rem 1.25rem 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
h4 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1rem;
|
||||
color: #5f6770;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #1182fb;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ApiBox:last-of-type {
|
||||
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png") no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
div {
|
||||
h4 {
|
||||
color: #726b5b;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fcc549;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.abnormalBox {
|
||||
height: 21.875rem;
|
||||
padding: 1.25rem;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
|
||||
background: #ffffff;
|
||||
|
||||
h3 {
|
||||
font-size: 1.125rem;
|
||||
color: #333333;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 1.25rem 0 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
color: #5a83ae;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.abnormalBoxBottom {
|
||||
display: flex;
|
||||
|
||||
.RankingList {
|
||||
margin-right: 5.625rem;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.RankingListData {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
display: block;
|
||||
width: 3.75rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: 0.8125rem;
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
|
||||
b {
|
||||
padding-left: 0.75rem;
|
||||
display: block;
|
||||
height: 1.25rem;
|
||||
width: 2.25rem;
|
||||
background: linear-gradient(to right, rgba(204, 204, 204, 0.6), rgba(0, 0, 0, 0));
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
width: 11.25rem;
|
||||
height: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: 0.8125rem;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.9375rem;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(1) i b {
|
||||
width: 3.75rem;
|
||||
background: linear-gradient(to right, rgba(251, 59, 5, 0.6), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(1) span {
|
||||
color: #fc5656;
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(2) i b {
|
||||
width: 3.125rem;
|
||||
background: linear-gradient(to right, rgba(251, 123, 5, 0.6), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(2) span {
|
||||
color: #ff8a00;
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(3) i b {
|
||||
width: 2.75rem;
|
||||
background: linear-gradient(to right, rgba(250, 179, 2, 0.6), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(3) span {
|
||||
color: #f9af0a;
|
||||
}
|
||||
}
|
||||
|
||||
.AbnormalDistribution {
|
||||
margin-right: 3.75rem;
|
||||
|
||||
.container-body1 {}
|
||||
}
|
||||
|
||||
.AnomalyStatistics {
|
||||
h4 {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.AnomalyStatisticsTable {
|
||||
width: 41rem;
|
||||
|
||||
::v-deep .el-table th {
|
||||
padding: 0;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
::v-deep .el-table td {
|
||||
padding: 0;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
::v-deep .el-table .cell {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.tablePagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
::v-deep .el-pager li {
|
||||
min-width: 1.75rem;
|
||||
padding: 0;
|
||||
border: 0.0625rem solid #b2b2b2;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: #b2b2b2;
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .btn-prev {
|
||||
padding: 0;
|
||||
min-width: 1.75rem;
|
||||
margin-right: 0.375rem;
|
||||
border: 0.0625rem solid #1182fb;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 12px;
|
||||
color: #1182fb;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .btn-next {
|
||||
padding: 0;
|
||||
min-width: 1.75rem;
|
||||
margin-left: 0.375rem;
|
||||
border: 0.0625rem solid #1182fb;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: #1182fb;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li.active {
|
||||
border: 0.0625rem solid #1182fb;
|
||||
background: #1182fb;
|
||||
color: #ffffff;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,23 @@
|
|||
<template>
|
||||
<div class="wrapper">上边时间</div>
|
||||
<div class="topBox">
|
||||
<h1 class="topTitle">能力运行平台</h1>
|
||||
<div class="topNav">
|
||||
<div class="topTab">
|
||||
<div @click="timeSwitch('日')" :class="timeSwitchindex == '日' ? 'timeDown' : ''">当天</div>
|
||||
<div @click="timeSwitch('周')" :class="timeSwitchindex == '周' ? 'timeDown' : ''">最近一周</div>
|
||||
<div @click="timeSwitch('月')" :class="timeSwitchindex == '月' ? 'timeDown' : ''">最近一月</div>
|
||||
</div>
|
||||
<div class="topTimme">
|
||||
<span>选择时间段</span>
|
||||
<el-date-picker v-model="timeStart" type="datetime" placeholder="请选择起始时间">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="timeEnd" type="datetime" placeholder="请选择结束时间">
|
||||
</el-date-picker>
|
||||
<el-button type="primary" round>确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -7,16 +25,75 @@ export default {
|
|||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
timeSwitchindex: '日',
|
||||
timeStart: '',
|
||||
timeEnd: ''
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
methods: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
};
|
||||
methods: {
|
||||
timeSwitch(name) {
|
||||
this.timeSwitchindex = name
|
||||
}
|
||||
},
|
||||
created() { },
|
||||
mounted() { }
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
.topBox {
|
||||
.topTitle {
|
||||
font-size: 1.5rem;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
padding: 0.3125rem 0 1.25rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topNav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.topTab {
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
width: 6.875rem;
|
||||
height: 1.75rem;
|
||||
line-height: 1.75rem;
|
||||
text-align: center;
|
||||
border-radius: 0.875rem;
|
||||
font-size: 1rem;
|
||||
color: #666666;
|
||||
margin-right: 0.9375rem;
|
||||
border: 0.0625rem solid #cccccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.timeDown {
|
||||
color: #1182fb;
|
||||
border: 0.0625rem solid #1182fb;
|
||||
}
|
||||
}
|
||||
|
||||
.topTimme {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #666666;
|
||||
font-size: 1rem;
|
||||
display: block;
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor.el-input {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue