diff --git a/nezha-fronted/src/assets/img/down.png b/nezha-fronted/src/assets/img/down.png
new file mode 100644
index 000000000..d331a43d6
Binary files /dev/null and b/nezha-fronted/src/assets/img/down.png differ
diff --git a/nezha-fronted/src/assets/img/up.png b/nezha-fronted/src/assets/img/up.png
new file mode 100644
index 000000000..ee6e0e08f
Binary files /dev/null and b/nezha-fronted/src/assets/img/up.png differ
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 4ba7bdf44..d784e6bc4 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -723,13 +723,13 @@ li{
background-color: $content-right-background-color;
}
.nz-table td.danger .cell>span {
- background-color: #ff6666;
+ background-color: #d64f40;
color: white;
padding:2px 5px;
border-radius: 4px;
}
.nz-table td.success .cell>span {
- background-color: #1bd383;
+ background-color: #50d050;
color: white;
padding:2px 5px;
border-radius: 4px;
@@ -1510,10 +1510,10 @@ li{
margin-right: 5px;
}
.red {
- background-color: #ff6666 !important;
+ background-color: #d64f40 !important;
}
.green {
- background-color:#1bd383 !important;
+ background-color:#50d050 !important;
}
.grey {
background-color:lightGrey;
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index 75e339a3d..9b856d46b 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -8,7 +8,11 @@
'#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
'#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
'#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
- ]
+ ];
+ let overviewBgColor = ['#d64f40', '#ffdb28', '#7bfc95', '#77baf4',
+ '#ac958f', '', '', '', '', '', '', '', '', '', '', ];
+ let pieColor = ['#d64f40', '#e65f50', '#f66f60', '#f69f90',
+ '#ffdb28', '#ffeb38', '#fffb48', '#ffffbb'];
const commonOption={
title:{
show:false,
@@ -138,7 +142,7 @@
title: {
show: false,
},
- color: bgColorList,
+ color: pieColor,
legend: {
show: false,
},
@@ -150,7 +154,7 @@
title: {
show: false,
},
- color: bgColorList,
+ color: overviewBgColor,
legend: {
show: false,
},
@@ -196,11 +200,11 @@
triggerEvent: true
},
};
- const overViewLine = {
+ const overviewLine = {
title:{
show: false,
},
- color: bgColorList,
+ color: overviewBgColor,
legend:{
show:false,
},
@@ -227,9 +231,9 @@
},
grid: {
left: 6,
- right: 30,
+ right: 20,
containLabel: true,
- bottom:8,
+ bottom: 0,
},
xAxis: {
type: 'time',
@@ -285,7 +289,7 @@
};
const chartTypes={
line:{name:'line',option:commonOption},
- overviewLine: {name: 'line', option: overViewLine},
+ overviewLine: {name: 'line', option: overviewLine},
map:{name:'map',option:mapOptions},
pie: {name: 'assetType', option: assetTypePie},
bar: {name: 'alertMessage', option: alertMessageBar}
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index ba85f3b31..3a13f399d 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -124,11 +124,12 @@
align-items: center;
height: calc(100% - 1.6rem);
justify-content: center;
- padding: 0 8px;
+ padding: 0 0.5rem;
border-radius: 0 0 6px 6px;
}
-.content-row-box:nth-of-type(2) .content-col-box:last-of-type .content-col-content {
- padding: 0;
+.content-row-box:nth-of-type(2) .content-col-box .content-col-content {
+ padding: 0.7rem;
+ height: calc(100% - 3rem);
}
.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content {
position: relative;
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index b2cf0f915..f8a13ba83 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -115,6 +115,9 @@
+
+ 
+ 
@@ -207,34 +210,96 @@
this.$refs.assetTypePie.startLoading();
let legendData = [];
let typeSeriesData = [];
- let modelSeriesData = [];
+ //let modelSeriesData = [];
this.assetData.typeStat.forEach(item => {
legendData.push(item.name);
- typeSeriesData.push({name: item.name, value: item.total});
+ typeSeriesData.push({name: item.name, value: item.total, up: item.pingUp, down: item.pingDown});
});
- this.assetData.modelStat.forEach(item => {
+ /*this.assetData.modelStat.forEach(item => {
legendData.push(item.name);
modelSeriesData.push({name: item.name, value: item.total});
- });
+ });*/
let series = [{
name: 'Type',
- data: typeSeriesData,
+ data: typeSeriesData.sort((a, b) => {return a.value > b.value ? -1 : 1}),
type: 'pie',
- radius: [0, '50%'],
+ minAngle: 15,
+ itemStyle: {
+ borderColor: "#fff",
+ borderWidth: 1,
+ },
label: {
- position: 'inner',
- formatter: function(params) {
- if (params.name.length > 12) {
- return params.name.substring(0, 9) + "...";
+ borderWidth: 1,
+ borderColor: "#cfcfcf",
+ borderRadius: 4,
+ formatter: function(param) {
+ return ['{title|' + param.name + ' (' + param.percent + '%)}',
+ '{hr|}',
+ '{block5|}{upPic|}{block3|}{upNum|' + param.data.up + '}{block15|}{downPic|}{block3|}{downNum|' + param.data.down + '}{block15|}']
+ .join("\n");
+ },
+ rich: {
+ title: {
+ align: 'center',
+ color: "#333",
+ height: 20*window.devicePixelRatio,
+ padding: [0, 8, 0, 8]
+ },
+ hr: {
+ width: '100%',
+ borderWidth: 0.5,
+ height: 0,
+ borderColor: "#cfcfcf"
+ },
+ block3: {
+ width: 3*window.devicePixelRatio,
+ align: 'left'
+ },
+ block5: {
+ width: 5*window.devicePixelRatio,
+ align: 'left'
+ },
+ block15: {
+ width: 15*window.devicePixelRatio,
+ align: 'left'
+ },
+ upPic: {
+ backgroundColor: {
+ image: document.getElementById("upPic")
+ },
+ height: 15*window.devicePixelRatio,
+ align: 'left',
+ width: 15*window.devicePixelRatio,
+ },
+ upNum: {
+ color: "#333",
+ height: 20*window.devicePixelRatio,
+ align: 'left',
+ //width: 35*window.devicePixelRatio,
+ lineHeight: 18*window.devicePixelRatio,
+ },
+ downPic: {
+ backgroundColor: {
+ image: document.getElementById("downPic")
+ },
+ height: 15*window.devicePixelRatio,
+ align: 'left',
+ width: 15*window.devicePixelRatio
+ },
+ downNum: {
+ color: "#333",
+ height: 20*window.devicePixelRatio,
+ align: 'left',
+ //width: 43*window.devicePixelRatio,
+ lineHeight: 18*window.devicePixelRatio,
}
- return params.name;
}
},
labelLine: {
- show: false
+ show: true
},
- left: '25%'
- }, {
+ //left: '25%'
+ }, /*{
name: 'Model',
radius: ['65%', '80%'],
data: modelSeriesData,
@@ -248,18 +313,18 @@
return params.name;
}
}
- }];
- this.$refs.assetTypePie.modifyOption('legend','show', true);
+ }*/];
+ /*this.$refs.assetTypePie.modifyOption('legend','show', true);
this.$refs.assetTypePie.modifyOption('legend','orient', "vertical");
this.$refs.assetTypePie.modifyOption('legend','data', legendData);
- this.$refs.assetTypePie.modifyOption('legend','left', 0);
- this.$refs.assetTypePie.modifyOption('legend','top', 5);
+ this.$refs.assetTypePie.modifyOption('legend','left', 40);
+ this.$refs.assetTypePie.modifyOption('legend','top', 40);
this.$refs.assetTypePie.modifyOption('legend','formatter', function(name) {
if (name.length > 12) {
return name.substring(0, 9) + "...";
}
return name;
- });
+ });*/
this.$refs.assetTypePie.setSeries(series);
this.$refs.assetTypePie.endLoading();
}
@@ -593,7 +658,7 @@
return `${params.name}: ${params.value}
`;
},
assetTypeFormatter(params) {
- return `${params.seriesName}
${params.name}: ${params.value}
`;
+ return `${params.name}: ${params.value}
`;
},
switchFullScreen:function(){
this.isFullScreen = this.judgeFullScreen();