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

NEZ-421 perf: overview地图悬浮样式调整

Browse Source
This commit is contained in:
陈劲松
2020-10-21 16:29:44 +08:00
committed by chenjinsong
parent a13cfa8736
commit b78b29398a
3 changed files with 334 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -442,6 +442,43 @@
},
series: null,
};
const tooltipPieOption = {
color: ["#60C6B4", "#EEA694"],
title: {
show: true,
textStyle: {
color: "#333333",
fontSize: 14,
},
top: 8,
left: 8
},
legend: {
data: [],
show: true,
left: 70,
top: 44,
icon: "circle",
itemHeight: 4,
orient: "vertical",
itemGap: 6,
textStyle: {
fontSize: 12,
padding: [0, 0, 0, -10]
},
},
series: [
{
type: "pie",
center: [40, 63],
radius: [14, 22],
data: [],
label: {
show: false
}
}
]
};
function createTempTimes(){
let times=[];
for(let i=0;i<10;i++){
@@ -460,10 +497,11 @@
ruleBar: {name: 'ruleMessage', option: alertMessageBarByRule},
assetBar: {name: 'assetMessage', option: alertMessageBarByAsset},
noData:{name:'noData',option:noDataOption},
tooltipPie: {option: tooltipPieOption},
};
export default {
getOption:function(type){
return Object.assign({},chartTypes[type].option);
return JSON.parse(JSON.stringify(chartTypes[type].option));
},
setMap:function(map){
mapOptions.geo.map=map

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

@@ -366,3 +366,184 @@
top: -5px;
left: 0px;
}
.tooltip{
opacity: 0.99;
background: rgba(255,255,255,0.94);
border-radius: 2px;
padding: 10px 20px;
box-sizing: border-box;
width: 390px;
height: 285px;
}
.tooltip--title {
color: #333333;
font-size: 14px;
font-weight: 600;
padding-bottom: 10px;
}
.tooltip--row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
position: relative;
.legend-value {
font-size: 12px;
color: #333333;
position: absolute;
left: 132px;
top: 45px;
}
.legend-value + .legend-value {
left: 310px;
}
.tooltip-asset {
width: 240px;
height: 124px;
border: 1px solid #DEDEDE;
border-radius: 2px;
.tooltip-asset--title {
padding: 0 10px;
height: 24px;
line-height: 24px;
font-size: 14px;
color: #333333;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #DEDEDE;
box-sizing: border-box;
}
.tooltip-asset--title span:first-of-type {
font-weight: 600;
}
.tooltip-asset--row {
display: flex;
height: 50px;
box-sizing: border-box;
border-bottom: 1px solid #DEDEDE;
}
.tooltip-asset--row + .tooltip-asset--row {
border-bottom: none;
}
.tooltip-asset--row>div {
line-height: 25px;
}
.tooltip-asset--row>div:first-of-type {
width: 70px;
padding-left: 10px;
line-height: 50px;
font-size: 14px;
border-right: 1px solid #DEDEDE;
color: #333333;
box-sizing: border-box;
}
.tooltip-asset--sub-row {
padding-left: 10px;
font-size: 13px;
color: #333333;
line-height: 25px;
display: flex;
.sub-row--label {
width: 94px;
}
.sub-row--value {
position: relative;
.sign {
position: absolute;
height: 5px;
width: 5px;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.red-sign {
background-color: $danger-color;
}
.green-sign {
background-color: $success-color;
}
span {
position: absolute;
left: 11px;
}
}
}
}
.tooltip-alert {
width: 96px;
height: 125px;
box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 4px -1px rgba(205,205,205,0.47);
.tooltip-alert--title {
height: 36px;
line-height: 36px;
font-size: 14px;
padding: 0 10px;
}
.tooltip-alert--title span:first-of-type {
font-weight: 600;
}
.tooltip-alert--title span:last-of-type {
padding-left: 10px;
}
.tooltip-alert--row {
padding: 0 10px;
margin-bottom: 10px;
height: 20px;
font-size: 12px;
display: flex;
.row--label {
width: 36px;
border-radius: 4px 0 0 4px;
color: white;
text-align: center;
}
.row--label__p1 {
background-color: #F2866E;
border-color: #F2866E;
}
.row--label__p2 {
background-color: #F89984;
border-color: #F89984;
}
.row--label__p3 {
background-color: #F7BA78;
border-color: #F7BA78;
}
.row--value {
width: 40px;
border: 1px solid;
border-radius: 0 4px 4px 0;
text-align: center;
}
.row--value__p1 {
color: #F2866E;
border-color: #F2866E;
}
.row--value__p2 {
color: #F89984;
border-color: #F89984;
}
.row--value__p3 {
color: #F7BA78;
border-color: #F7BA78;
}
}
}
.tooltip-chart {
width: calc(50% - 7px);
height: 100px;
box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 4px -1px rgba(205,205,205,0.47);
}
}

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

@@ -115,6 +115,8 @@
<div class="content-col-content">
<!--<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>-->
<div id="map" style="height: 100%; width: 100%"></div>
<!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
<div class="my-pane"></div>
<!--<div class="right-bottom-zoom">
<div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
<div class="zoom-option" @click="zoomMap(-1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
@@ -199,8 +201,14 @@
import * as L from 'leaflet'
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
import echarts from "echarts";
import chartConfig from './chartConfig'
var timeout; //第三行第三个图的dropdown下拉菜单timeout
var tooltipEndpointChart;
var tooltipPrometheusChart;
export default {
name: "overview2",
components:{
@@ -312,7 +320,6 @@
this.queryAlertMessageData(),
this.queryAlertRuleData(),
this.queryAlertTrendData(),
// this.queryMapChartGeoJson();
this.initMap(),
this.queryAlertStatByRule(),
this.queryAlertStatByAsset(),
@@ -730,10 +737,37 @@
if(mapConfig&&this.map){
loadPromise=this.loadDataCenterMapData()
}
})
});
return loadPromise;
},
initTooltipChart(param) {
let data = param.tooltip.options.data;
//console.info(data);
tooltipEndpointChart = echarts.init(document.querySelector("#tooltip-chart--endpoint"));
tooltipPrometheusChart = echarts.init(document.querySelector("#tooltip-chart--prometheus"));
let endpointOption = chartConfig.getOption("tooltipPie"),
prometheusOption = chartConfig.getOption("tooltipPie");
endpointOption.series[0].data = [
{name: this.$t("dashboard.overview.asset.pingUp"), value: data.endpointUp ? data.endpointUp : 0},
{name: this.$t("dashboard.overview.asset.pingDown"), value: data.endpointDown ? data.endpointDown : 0}
];
endpointOption.title.text = this.$t("project.endpoint.endpoint");
endpointOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
prometheusOption.series[0].data = [
{name: this.$t("dashboard.overview.asset.pingUp"), value: data.promUp ? data.promUp : 0},
{name: this.$t("dashboard.overview.asset.pingDown"), value: data.promDown ? data.promDown : 0}
];
prometheusOption.title.text = "Prometheus";
prometheusOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
tooltipEndpointChart.setOption(endpointOption, true);
tooltipPrometheusChart.setOption(prometheusOption, true);
/*setTimeout(function() {
tooltipEndpointChart.setOption(endpointOption);
tooltipPrometheusChart.setOption(prometheusOption);
}, 100);*/
},
loadMapConfig:function(){
let vm = this;
return new Promise(resolve => {
let DefaultIcon = L.icon({
iconUrl: icon,
@@ -750,6 +784,10 @@
attributionControl:false,
zoomControl:false,
}).setView([mapConfig.longitude,mapConfig.latitude],mapConfig.zoom);
map.createPane("myPane", document.querySelector(".my-pane"));
map.on("tooltipopen", function(param) {
vm.initTooltipChart(param);
});
this.map = map;
L.tileLayer(
@@ -856,9 +894,8 @@
let hasAlert=dcStat.alertP1!=0||dcStat.alertP2!=0||dcStat.alertP3!=0||dcStat.assetPingDown!=0||dcStat.endpointDown!=0||dcStat.promDown!=0;
let marker=L.circleMarker([areaInfo.latitude,areaInfo.longitude], {color: hasAlert?'#DE5D3F':'#23BF9A',opacity:0.42,fillColor: hasAlert?'#DE5D3F':'#23BF9A',fillOpacity: 0.5, radius: symbolSize,className:hasAlert?'error-item':''})
marker.bindTooltip(this.mapTooltipFormatter(dcStat),{sticky:true})
marker.addTo(this.map)
marker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat});
marker.addTo(this.map);
}
}
}
@@ -1112,31 +1149,6 @@
this.queryAlertStatByRule();
}
},
/*selectDatacenter(dc) {
let index = this.trendSearchParam.dc.indexOf(parseInt(dc.id));
if (index == -1) {
this.trendSearchParam.dc.push(parseInt(dc.id));
} else {
this.trendSearchParam.dc.splice(index, 1);
}
this.queryAlertTrendData();
},
selectTag(tag) {
let index = -1;
this.trendSearchParam.tag.some((item, i) => {
if (item.name == tag.name && item.value == tag.value) {
index = i;
return true;
}
return false;
});
if (index == -1) {
this.trendSearchParam.tag.push(tag);
} else {
this.trendSearchParam.tag.splice(index, 1);
}
this.queryAlertTrendData();
},*/
alertMessageChange(type) {
this.bottom3DropdownShow = false;
this.alertMessageShow = type;
@@ -1150,79 +1162,66 @@
},
mapTooltipFormatter(dcStat){
let tooltip=`
<div class="tooltip">
<div style="margin-left: 12px; color: black">${dcStat.name}</div>
<div class="flex-box">
<div style="width: 60%;">
<table style="width: 100%;" class="tooltip-table">
<tr ><td colspan="3"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.asset')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.assetTotal}</div></div></td></tr>
<tr>
<td rowspan="2">${this.$t('dashboard.overview.mapTooltip.state')}</td>
<td >${this.$t('dashboard.overview.mapTooltip.inStock')}</td>
<td >${dcStat.assetInStock}</td>
</tr>
<tr>
<td >${this.$t('dashboard.overview.mapTooltip.outStock')}</td>
<td >${dcStat.assetOutStock}</td>
</tr>
<tr>
<td rowspan="2">${this.$t('dashboard.overview.mapTooltip.ping')}</td>
<td >${this.$t('dashboard.overview.mapTooltip.active')}</td>
<td >${dcStat.assetPingUp}</td>
</tr>
<tr>
<td >${this.$t('dashboard.overview.mapTooltip.inactive')}</td>
<td ><span class="${dcStat.assetPingDown!=0?'error-color':''}">${dcStat.assetPingDown}</span></td>
</tr>
<tr>
<td rowspan="3">${this.$t('dashboard.overview.mapTooltip.alert')}</td>
<td >${this.$t('dashboard.overview.mapTooltip.P1')}</td>
<td ><span class="${dcStat.alertP1!=0?'error-color':''}">${dcStat.alertP1}</span></td>
</tr>
<tr>
<td >${this.$t('dashboard.overview.mapTooltip.P2')}</td>
<td ><span class="${dcStat.alertP2!=0?'error-color':''}">${dcStat.alertP2}</span></td>
</tr>
<tr>
<td >${this.$t('dashboard.overview.mapTooltip.P3')}</td>
<td ><span class="${dcStat.alertP3!=0?'error-color':''}">${dcStat.alertP3}</span></td>
</tr>
</table>
</div>
<div style="width: 30%;" class="flex-box column-box">
<div >
<table style="width: 100%;" class="tooltip-table">
<tr><td colspan="2"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.endpoint')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.endpointTotal}</div></div></td></tr>
<tr>
<td>${this.$t('dashboard.overview.mapTooltip.up')}</td>
<td>${dcStat.endpointUp}</td>
</tr>
<tr>
<td>${this.$t('dashboard.overview.mapTooltip.down')}</td>
<td><span class="${dcStat.endpointDown!=0?'error-color':''}">${dcStat.endpointDown}</span></td>
</tr>
</table>
</div>
<div >
<table style="width: 100%;" class="tooltip-table">
<tr><td colspan="2"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.prometheus')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.promTotal}</div></div></td></tr>
<tr>
<td>${this.$t('dashboard.overview.mapTooltip.up')}</td>
<td>${dcStat.promUp}</td>
</tr>
<tr>
<td>${this.$t('dashboard.overview.mapTooltip.down')}</td>
<td><span class="${dcStat.promDown!=0?'error-color':''}">${dcStat.promDown}</span></td>
</tr>
</table>
</div>
</div>
return `<div class="tooltip">
<div class="tooltip--title">${dcStat.name}</div>
<div class="tooltip--row">
<div class="tooltip-asset">
<div class="tooltip-asset--title"><span>${this.$t('asset.asset')}</span><span>Total：${dcStat.assetTotal}</span></div>
<div class="tooltip-asset--row">
<div>${this.$t('asset.state')}</div>
<div class="tooltip-asset--sub-rows">
<div class="tooltip-asset--sub-row">
<div class="sub-row--label">${this.$t("asset.inStock")}</div>
<div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetInStock}</span></div>
</div>
<div class="tooltip-asset--sub-row">
<div class="sub-row--label">${this.$t("asset.notInStock")}</div>
<div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetOutStock}</span></div>
</div>
</div>
</div>
<div class="tooltip-asset--row">
<div>${this.$t('asset.left.ping')}</div>
<div class="tooltip-asset--sub-rows">
<div class="tooltip-asset--sub-row">
<div class="sub-row--label">${this.$t("dashboard.overview.asset.pingUp")}</div>
<div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetPingUp}</span></div>
</div>
<div class="tooltip-asset--sub-row">
<div class="sub-row--label">${this.$t("dashboard.overview.asset.pingDown")}</div>
<div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetPingDown}</span></div>
</div>
</div>
</div>
</div>
`;
<div class="tooltip-alert">
<div class="tooltip-alert--title"><span>${this.$t("dashboard.overview.asset.alert")}</span><span>${dcStat.alertTotal}</span></div>
<div class="tooltip-alert--row">
<div class="row--label row--label__p1">P1</div><div class="row--value row--value__p1">${dcStat.alertP1}</div>
</div>
<div class="tooltip-alert--row">
<div class="row--label row--label__p2">P2</div><div class="row--value row--value__p2">${dcStat.alertP2}</div>
</div>
<div class="tooltip-alert--row">
<div class="row--label row--label__p3">P3</div><div class="row--value row--value__p3">${dcStat.alertP3}</div>
</div>
</div>
</div>
<div class="tooltip--row">
<div class="legend-value">
<div>${dcStat.endpointUp}</div>
<div>${dcStat.endpointDown}</div>
</div>
<div class="legend-value">
<div>${dcStat.promUp}</div>
<div>${dcStat.promDown}</div>
</div>
<div class="tooltip-chart" id="tooltip-chart--endpoint"></div>
<div class="tooltip-chart" id="tooltip-chart--prometheus"></div>
</div>
</div>`;
return tooltip;
//return tooltip;
},
simpleFormatter(params) {
return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`;
@@ -1458,70 +1457,7 @@
},
watch: {
"trendSearchParam.select": function(n, o) {
/*console.info("n", n);
console.info("o", o);*/
this.queryAlertTrendData();
/*let tempN = JSON.parse(JSON.stringify(n));
if (n.length == o.length || !this.trendSearchParam.watch) {
this.trendSearchParam.watch = true;
return false;
}
let isAdd = tempN.length > o.length ? true : false; //true是新增，false是减少
let difference = isAdd ? this.trendTool('difference', o, tempN) : this.trendTool('difference', tempN, o);
console.info("difference", difference);
if (difference[0][0].length == 1) {
} else if (difference[0][0].length == 2) {
if (isAdd) { //二级选中，三级全取消则全选中
let level3 = this.trendTool('sameLevel', difference[0][0], this.trafficData, 3);
if (level3.length > 0) {
let level2Index = this.trendTool('containArray', difference[0][0], tempN, 2); //二级的index
if (level2Index[0] != -1) {
for (let i = level3.length-1; i >= 0; i--) {
tempN.splice(difference[0][1]+1, 0, level3[i]);
}
this.trendSearchParam.watch = false;
}
}
} else { //二级取消，三级有选中则全取消，无选中不变
let temp = JSON.parse(JSON.stringify(difference[0][0]));
temp.push("temp");
let indexes = this.trendTool('sameLevelActive', temp, tempN, 3);
//console.info("indexes", indexes);
if (indexes.length > 0) {
for (let i = indexes.length-1; i >= 0; i--) {
tempN.splice(indexes[i], 1);
}
this.trendSearchParam.watch = false;
}
}
} else if (difference[0][0].length == 3) {
if (isAdd) { //三级选中，二级取消则选中
let index = this.trendTool('containArray', [difference[0][0][0], difference[0][0][1]], tempN, 2); //二级的index
console.info("index", index);
if (index[0] == -1) {
tempN.splice(difference[0][1], 0, [difference[0][0][0], difference[0][0][1]]); //插入二级
//let afterIndex = this.trendTool('containArray', [difference[0][0][0], difference[0][0][1]], tempN, 2); //插入后的index
//console.info("afterIndex", afterIndex);
//this.trendTool('active', 2, index[1], true); //dom处理
this.trendSearchParam.watch = false;
}
} else { //三级取消，若同级全取消则二级取消
let indexes = this.trendTool('sameLevelActive', difference[0][0], tempN, 3);
//console.info("indexes", indexes);
if (indexes.length == 0) {
let level2Index = this.trendTool('containArray', [difference[0][0][0], difference[0][0][1]], tempN, 2);
//console.info("level2Index", level2Index);
if (level2Index[0] > -1) {
this.trendTool('active', 2, level2Index[1], false);
tempN.splice(level2Index[0], 1);
this.trendSearchParam.watch = false;
}
}
}
}
this.trendSearchParam.select = JSON.parse(JSON.stringify(tempN));
this.queryAlertTrendData();*/
}
},
mounted() {
@@ -1531,11 +1467,12 @@
this.setFreshDataTimer();
})
/*window.onresize = () => {
window.onresize = () => {
let vm = this;
setTimeout(() => {
this.$parent.$parent.update();
}, 100);
}*/
//vm.map.
}, 500);
}
},
destroyed() {
clearInterval(this.freshDataTimer)
@@ -1546,40 +1483,7 @@
<style lang="scss">
@import "./overview2.scss";
.tooltip{
padding: 5px;
min-width: 500px;
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);
}
.tooltip-table{
border-spacing: 0;
border-collapse: collapse;
}
.tooltip-table tr{
display: table-row;
vertical-align: inherit;
}
.tooltip-table td{
min-width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
text-align: left;
border: 1px solid #ccc;
display: table-cell;
padding: 0 5px ;
color: black;
}
.flex-box{
display: flex;
justify-content: space-around;
}
.column-box{
flex-direction: column;
justify-content: space-between !important;
}
.leaflet-control-zoom{
border: 1px solid #E7EAED !important;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77) !important;
@@ -1605,4 +1509,13 @@
.error-color{
}
.my-pane {
position: fixed;
width: 1px;
z-index: 9999;
height: 1px;
left: 0;
top: 9px;
background-color: transparent;
}
</style>