gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: overview增加时间选择、top选择

Browse Source
This commit is contained in:
陈劲松
2020-04-27 17:54:24 +08:00
parent 82b2a9d8e0
commit 867f281135
5 changed files with 100 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -33,6 +33,7 @@
width:0px;
padding:0px !important;
visibility: hidden;
border: none;
}
.time-picker-button{
padding: 0 1px !important;

8
nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
View File

@@ -11,8 +11,14 @@
];
let overviewBgColor = ['#d64f40', '#ffdb28', '#7bfc95', '#77baf4',
'#ac958f', '', '', '', '', '', '', '', '', '', '', ];
let pieColor = ['#d64f40', '#e65f50', '#f66f60', '#f69f90',
/* let pieColor = ["#0c69ff","#59f747","#2eeab8","#b5ed8e",
"#205299","#ffd6c6","#a0ffdf","#9be524",
"#8abafc","#d181e8","#d88d50","#cce8ff",
"#161ef9"];*/
let pieColor = ['#d64f40', '#e66f60', '#f68f80', '#f6afa0',
'#ffdb28', '#ffeb38', '#fffb48', '#ffffbb'];
const commonOption={
title:{
show:false,

18
nezha-fronted/src/components/page/dashboard/overview/overview2.scss
View File

@@ -91,9 +91,22 @@
line-height: 1.6rem;
color: #777;
font-size: 1rem;
padding-left: 8px;
padding: 0 8px;
background-color: #efefef;
border-radius: 5px 5px 0 0;
display: flex;
justify-content: space-between;
}
.content-col-box .content-col-title .nz-dashboard-picker {
height: 100%;
}
.content-col-box .content-col-title .nz-dashboard-picker .el-icon-arrow-down {
width: unset !important;
}
.content-col-box .content-col-title .calendar-dropdown-title {
height: 100%;
line-height: unset;
border: none;
}
.dropdown-btn {
position: relative;
@@ -138,7 +151,8 @@
position: absolute;
bottom: 5%;
right: 5%;
font-size: 0.9rem;
font-size: 0.7rem;
font-style: italic;
}
.content-col-content-num {
font-size: 3.2rem;

72
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -58,14 +58,17 @@
<div class="content-col-title">{{$t("dashboard.overview.alert.alertMessage")}}</div>
<div class="content-col-content" v-loading="alertMessageLoading">
<div class="content-col-content-num">{{(alertMessageData ? alertMessageData.alertMessageTotal : "") | numberFormat}}</div>
<span>{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</span>
<span>{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</span>
</div>
</div>
</div>
<!--第二行-->
<div class="content-row-box">
<div class="content-col-box">
<div class="content-col-title">{{$t("dashboard.overview.alert.chart.chartTitle")}}</div>
<div class="content-col-title">
<span>{{$t("dashboard.overview.alert.chart.chartTitle")}}</span>
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
</div>
<div class="content-col-content">
<chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend"></chart-box>
</div>
@@ -80,19 +83,30 @@
<!--第三行-->
<div class="content-row-box">
<div class="content-col-box">
<div class="content-col-title">{{$t("dashboard.overview.asset.assetType")}}</div>
<div class="content-col-title">
<span>{{$t("dashboard.overview.asset.assetType")}}</span>
</div>
<div class="content-col-content">
<chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" ></chart-box>
</div>
</div>
<div class="content-col-box">
<div class="content-col-title">{{$t("dashboard.overview.alert.alertRuleTopN")}}</div>
<div class="content-col-title">
<span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
<el-dropdown trigger="hover" :show-timeout="0">
<span>Top&nbsp;{{topFilter.rule}}<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('rule', item)">{{item}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="content-col-content">
<chart-box axis-tooltip="y" chart-type="bar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage"></chart-box>
</div>
</div>
<div class="content-col-box">
<div class="content-col-title">
<span>
<span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
<span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
<span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
@@ -104,6 +118,19 @@
</ul>
</transition>
</span>
</span>
<el-dropdown trigger="hover" v-if="alertMessageShow == 'asset'" :show-timeout="0">
<span>Top&nbsp;{{topFilter.asset}}<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('asset', item)">{{item}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="hover" v-if="alertMessageShow == 'module'" :show-timeout="0">
<span>Top&nbsp;{{topFilter.module}}<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('module', item)">{{item}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="content-col-content">
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false"></chart-box>
@@ -125,11 +152,14 @@
import chart from "./chart";
import chartDataFormat from "../../../charts/chartDataFormat";
import axios from 'axios';
import timePicker from '../../../common/timePicker'
var timeout;
export default {
name: "overview2",
components:{
'chart-box': chart,
'time-picker': timePicker
},
data() {
return {
@@ -163,6 +193,13 @@
alertMessageShow: 'asset', //asset/module
bottom3DropdownShow: false, //最底部行第三列的下拉选择框
topFilter:{
optionals: [10, 20, 50],
rule: 10,
asset: 10,
module: 10
},
}
},
filters: {
@@ -215,6 +252,10 @@
legendData.push(item.name);
typeSeriesData.push({name: item.name, value: item.total, up: item.pingUp, down: item.pingDown});
});
/*for (let i = 0; i < 4; i++) {
legendData.push("type" + i);
typeSeriesData.push({name: "type" + i, value: (i+1)*10, up: (i+1)*5, down: (i+1)*5});
}*/
/*this.assetData.modelStat.forEach(item => {
legendData.push(item.name);
modelSeriesData.push({name: item.name, value: item.total});
@@ -503,7 +544,7 @@
})
},
queryAlertStatByRule() {
this.$get('overview/alertStatByRule').then(response => {
this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => {
if (response.code === 200) {
this.$refs.ruleMessage.startLoading();
let seriesData = [];
@@ -524,7 +565,7 @@
});
},
queryAlertStatByAsset() {
this.$get('overview/alertStatByAsset').then(response => {
this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => {
if (response.code === 200) {
this.$refs.assetMessage.startLoading();
let seriesData = [];
@@ -545,7 +586,7 @@
});
},
queryAlertStatByModule() {
this.$get('overview/alertStatByModule').then(response => {
this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => {
if (response.code === 200) {
this.$refs.moduleMessage.startLoading();
let seriesData = [];
@@ -566,6 +607,23 @@
});
},
/*初始化数据 end*/
dateChange(val) {
/*this.searchTime = [...val];
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);*/
},
topNChange(type, top) {
this.topFilter[type] = top;
if (type == 'asset') {
this.queryAlertStatByAsset();
} else if (type == 'module') {
this.queryAlertStatByModule();
} else if (type == 'rule') {
this.queryAlertStatByRule();
}
},
alertMessageChange(type) {
this.bottom3DropdownShow = false;
this.alertMessageShow = type;

3
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -883,8 +883,7 @@
line-height: 17px;
}
.panel-calendar .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
width: 310px;
.panel-calendar .el-date-editor--datetimerange.el-input, .panel-calendar .el-date-editor--datetimerange.el-input__inner {
padding-right: 0;
vertical-align: top;
}