diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss index 8615a73b1..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; @@ -224,6 +223,7 @@ } .chart-table, .chart-alert-info { width: 100%; + overflow-x: hidden; .table-container { padding: 0 6px; box-sizing: border-box; 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; } } 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(); }