From b4ab263c6c1f2bd6c59a329d676c35b28858a43d Mon Sep 17 00:00:00 2001 From: wangwenrui Date: Fri, 28 Aug 2020 16:28:06 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E5=85=B3=E9=97=ADass?= =?UTF-8?q?etping=E5=90=8E=E4=BE=9D=E7=84=B6=E5=AD=98=E5=9C=A8ping?= =?UTF-8?q?=E7=AD=9B=E9=80=89=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/elementSet.vue | 2 +- .../src/components/common/leftMenu.vue | 11 +++++-- .../src/components/page/asset/asset.vue | 29 ++++++++++++++++++- 3 files changed, 38 insertions(+), 4 deletions(-) diff --git a/nezha-fronted/src/components/common/elementSet.vue b/nezha-fronted/src/components/common/elementSet.vue index 0f1d31900..ec02d5365 100644 --- a/nezha-fronted/src/components/common/elementSet.vue +++ b/nezha-fronted/src/components/common/elementSet.vue @@ -91,7 +91,7 @@ export default { //单选 handler(val, index) { if (!this.allowedAll&&!val.allowed && (index == 0 || index == 1 || val.NotSet)) { - this.custom[index].show = true; + // this.custom[index].show = true; } else { this.custom[index].show = !this.custom[index].show; } diff --git a/nezha-fronted/src/components/common/leftMenu.vue b/nezha-fronted/src/components/common/leftMenu.vue index efdb7e305..3bce9cf6f 100644 --- a/nezha-fronted/src/components/common/leftMenu.vue +++ b/nezha-fronted/src/components/common/leftMenu.vue @@ -88,7 +88,7 @@ - +
@@ -159,6 +159,7 @@ vendorCheckList: [], pingData: [], pingCheckList: [], + assetPingSwitch:true, } }, computed: { @@ -216,9 +217,11 @@ } } }, + created() { + this.initEvent(); //注册监听事件 + }, mounted() { Promise.all([this.getProjectList(), this.getModuleList(), this.getLeftMenuList()]).then(response => { - this.initEvent(); //注册监听事件 setTimeout(() => { this.ready = true; }, 300); @@ -385,6 +388,10 @@ bus.$on('asset-property-change',()=>{ this.getLeftMenuList(); }) + + bus.$on('asset-ping-switch-change',(isOpen)=>{ + this.assetPingSwitch = isOpen + }) }, // 获取asset左侧菜单数据 getLeftMenuList(){ diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue index 82e3b1f77..68f1414a2 100644 --- a/nezha-fronted/src/components/page/asset/asset.vue +++ b/nezha-fronted/src/components/page/asset/asset.vue @@ -376,6 +376,16 @@ } } }, + 'tools.customTableTitle':{ + deep:true, + immediate:true, + handler(n,o){ + let pingTitle=n.find(item=>{return item.prop=='pingStatus'}) + if(pingTitle){ + this.dispatchEvent('asset-ping-switch-change',pingTitle.show) + } + } + } }, methods: { fullScreen() { @@ -627,6 +637,11 @@ this.pageObj[column] = content; this.getTableData(); }); + }, + dispatchEvent(event,param){ + this.$nextTick(()=>{ + bus.$emit(event,param) + }) } }, @@ -635,11 +650,23 @@ let tableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path) ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)) : this.tableTitle; + if (this.assetPingSwitch == 'off') { + this.dispatchEvent('asset-ping-switch-change',false) for (let i in tableTitle) { let label = tableTitle[i]; if (label.prop == 'pingStatus') { - tableTitle.splice(i, 1); + label.show=false; + label.NotSet=true; + break; + } + } + }else{ + for (let i in tableTitle) { + let label = tableTitle[i]; + if (label.prop == 'pingStatus') { + label.show=true; + label.NotSet=false; break; } } From 36e2495938d9a03d3cc016f08d1d751719f5b8c0 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Fri, 28 Aug 2020 19:19:04 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20overview=EF=BC=88=E9=83=A8=E5=88=86?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../page/dashboard/overview/chart.vue | 3 +- .../page/dashboard/overview/chartConfig.vue | 93 ++++++++++++-- .../page/dashboard/overview/overview2.scss | 1 + .../page/dashboard/overview/overview2.vue | 113 ++++++++---------- 4 files changed, 133 insertions(+), 77 deletions(-) diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue index ac2e524c4..d1609d478 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue @@ -56,7 +56,7 @@ created() { this.option=chartConfig.getOption(this.chartType); if(this.showToolbox == false){ - this.option.grid.top=10; + //this.option.grid.top = 10; } }, methods:{ @@ -158,7 +158,6 @@ this.chart.setOption(option); } - //坐标轴label鼠标悬浮提示 if (this.axisTooltip) { let tooltipDom = document.querySelector(".axis-tooltip"); diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue index 5d58e1c52..bbb2e0924 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue @@ -194,22 +194,25 @@ series: [], tooltip : {} }; - const alertMessageBar = { + const alertMessageBarByRule = { title: { show: false, }, - color: overviewBgColor, legend: { show: false, }, grid: { - top: 30, - left: 0, + top: 60, + left: 80, right: 30, - bottom:8 + bottom: 60, }, series: [], - tooltip : {}, + tooltip : { + backgroundColor: "rgba(255, 255, 255, 0.66)", + extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);", + textStyle: {color: "#333"} + }, xAxis: { type: 'value', axisLine: { @@ -220,7 +223,7 @@ }, axisLabel: { show:true, - fontSize: 10 + fontSize: 14 } }, yAxis: { @@ -234,18 +237,82 @@ data: [], axisLabel: { show: true, + fontSize: 14, formatter: function(value) { - if (value.length > 33) { - return value.substring(0, 30) + "..."; + if (value.length > 10) { + return value.substring(0, 6) + "..."; } return value; }, - align: 'left', - margin: 200, }, triggerEvent: true }, }; + const alertMessageBarByAsset = { + title: { + show: false, + }, + color: function(params) { + //首先定义一个数组 + let colorList = [pieColor[0], pieColor[1]];; + if(params.dataIndex % 2 == 0){ + return colorList[0] + }else{ + return colorList[1] + } + }, + legend: { + show: false, + }, + grid: { + top: 60, + left: 80, + right: 30, + bottom: 60, + }, + series: [], + tooltip : { + backgroundColor: "rgba(255, 255, 255, 0.66)", + extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);", + textStyle: {color: "#333"} + }, + yAxis: { + type: 'value', + axisLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show:true, + fontSize: 14 + } + }, + xAxis: { + type: 'category', + axisLine: { + show: false + }, + axisTick: { + show: false + }, + data: [], + axisLabel: { + show: true, + fontSize: 12, + formatter: function(value) { + let r = value; + if (r.length > 4) { + r = value.substring(0, 3) + "..."; + } + return r.split("").join("\n"); + }, + }, + triggerEvent: true + }, + }; + const overviewLine = { title:{ show: false, @@ -399,7 +466,9 @@ overviewLine: {name: 'line', option: overviewLine}, map:{name:'map',option:mapOptions}, pie: {name: 'assetType', option: assetTypePie}, - bar: {name: 'alertMessage', option: alertMessageBar}, + bar: {name: 'alertMessage', option: alertMessageBarByAsset}, + ruleBar: {name: 'ruleMessage', option: alertMessageBarByRule}, + assetBar: {name: 'assetMessage', option: alertMessageBarByAsset}, noData:{name:'noData',option:noDataOption}, }; export default { diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss index 8290843de..c32a78845 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss +++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss @@ -338,6 +338,7 @@ position: fixed; transform: translate(-100%, -50%); min-width: unset; + background-color: rgba(255, 255, 255, 0.8) !important; } .axis-tooltip::after { content: ''; diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue index 465ab35e6..efe981b49 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue @@ -129,7 +129,30 @@
+ +
+
+ + {{$t("dashboard.overview.alert.assetTopN")}} + {{$t("dashboard.overview.alert.moduleTopN")}} + + +
+
+ + +
+
+
{{$t("dashboard.overview.alert.alertRuleTopN")}} @@ -141,47 +164,9 @@ -->
- - - -
-
- -
-
- - {{$t("dashboard.overview.alert.assetTopN")}} - {{$t("dashboard.overview.alert.moduleTopN")}} - - - -
    -
  • {{$t("dashboard.overview.asset.title")}}
    • -
  • {{$t("dashboard.overview.module.module")}}
    • -
- - - - -
-
- - - - - - + + +
@@ -779,16 +764,20 @@ name: 'alertStatByRule', data: seriesData, type: 'bar', - barMaxWidth: 30, + barMaxWidth: 20, + itemStyle: { + color: function(params) { + let colorList = ["#ECCD82", "#99CEB9"];; + if(params.dataIndex % 2 == 0){ + return colorList[0] + }else{ + return colorList[1] + } + }, + }, category: categoryData, //自定义，用来判断N/A是否显示 }; this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData); - this.$refs.ruleMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)"); - this.$refs.ruleMessage.modifyOption("tooltip", "textStyle", {color: "#000"}); - this.$refs.ruleMessage.modifyOption("grid", "top", 30); - this.$refs.ruleMessage.modifyOption("grid", "left", 200); - this.$refs.ruleMessage.modifyOption("grid", "right", 30); - this.$refs.ruleMessage.modifyOption("grid", "bottom", 8); this.$refs.ruleMessage.setSeries(this.messageByRuleSeries); this.$refs.ruleMessage.endLoading(); } @@ -809,15 +798,19 @@ data: seriesData, type: 'bar', barMaxWidth: 30, - category: categoryData + category: categoryData, + itemStyle: { + color: function(params) { + let colorList = ["#ECCD82", "#99CEB9"];; + if(params.dataIndex % 2 == 0){ + return colorList[0] + }else{ + return colorList[1] + } + }, + }, }; - this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData); - this.$refs.assetMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)"); - this.$refs.assetMessage.modifyOption("tooltip", "textStyle", {color: "#000"}); - this.$refs.assetMessage.modifyOption("grid", "top", 30); - this.$refs.assetMessage.modifyOption("grid", "left", 200); - this.$refs.assetMessage.modifyOption("grid", "right", 30); - this.$refs.assetMessage.modifyOption("grid", "bottom", 8); + this.$refs.assetMessage.modifyOption('xAxis', 'data', categoryData); this.$refs.assetMessage.setSeries(this.messageByAssetSeries); this.$refs.assetMessage.endLoading(); } @@ -840,13 +833,7 @@ barMaxWidth: 30, category: categoryData }; - this.$refs.moduleMessage.modifyOption('yAxis', 'data', categoryData); - this.$refs.moduleMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)"); - this.$refs.moduleMessage.modifyOption("tooltip", "textStyle", {color: "#000"}); - this.$refs.moduleMessage.modifyOption("grid", "top", 30); - this.$refs.moduleMessage.modifyOption("grid", "left", 200); - this.$refs.moduleMessage.modifyOption("grid", "right", 30); - this.$refs.moduleMessage.modifyOption("grid", "bottom", 8); + this.$refs.moduleMessage.modifyOption('xAxis', 'data', categoryData); this.$refs.moduleMessage.setSeries(this.messageByModuleSeries); this.$refs.moduleMessage.endLoading(); } From fb5c076521e3117c9c2da6e93a871f662068b52b Mon Sep 17 00:00:00 2001 From: wangwenrui Date: Mon, 31 Aug 2020 15:54:55 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8Dtable=20chart=20?= =?UTF-8?q?=EF=BC=8Calert=20chart=20=E5=88=86=E9=A1=B5=E8=B6=85=E5=87=BA?= =?UTF-8?q?=E6=A1=86=E5=A4=96=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/components/charts/chart.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss index 8615a73b1..067bbbd40 100644 --- a/nezha-fronted/src/components/charts/chart.scss +++ b/nezha-fronted/src/components/charts/chart.scss @@ -224,6 +224,7 @@ } .chart-table, .chart-alert-info { width: 100%; + overflow-x: hidden; .table-container { padding: 0 6px; box-sizing: border-box; From 36f4a769d04f45eb0f9aca30b0a642e00ad60fb4 Mon Sep 17 00:00:00 2001 From: wangwenrui Date: Mon, 31 Aug 2020 15:57:37 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat:=E9=81=97=E6=BC=8F=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/components/charts/chart.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss index 067bbbd40..1f6b555ab 100644 --- a/nezha-fronted/src/components/charts/chart.scss +++ b/nezha-fronted/src/components/charts/chart.scss @@ -208,7 +208,6 @@ .resize-box { .pagination { padding-top: 0; - overflow: hidden; } .success { background-color: #50d050;