From 2a3e2907e68887571524d1623d4ecb02fae6a30c Mon Sep 17 00:00:00 2001 From: zhangyu Date: Fri, 14 Oct 2022 10:43:50 +0800 Subject: [PATCH] =?UTF-8?q?=20NEZ-2245=20=20fix=EF=BC=9Adashboard=20explor?= =?UTF-8?q?e=20snapshot=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/assets/css/common.scss | 21 +++++++++++--- .../assets/css/components/chart/chart.scss | 6 ++-- .../src/components/chart/chart/chartBar.vue | 7 +++++ .../src/components/chart/chart/chartGauge.vue | 7 +++++ .../src/components/chart/chart/chartPie.vue | 7 +++++ .../chart/chart/chartTimeSeries.vue | 7 +++++ .../components/chart/chart/chartTreemap.vue | 7 +++++ .../chart/chart/line-chart-block.vue | 2 +- .../chart/chart/options/chartBar.js | 2 +- .../chart/chart/options/chartGauge.js | 4 +-- .../chart/chart/options/chartPie.js | 2 +- .../chart/chart/options/chartTimeSeries.js | 2 +- .../chart/chart/options/chartTreemap.js | 2 +- .../src/components/chart/chartList.vue | 28 ++++++++++++++++++- 14 files changed, 89 insertions(+), 15 deletions(-) diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index c1ff0394a..d90e13334 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -402,10 +402,10 @@ td .nz-icon-gear:before { .chart-body, .chart__canvas, .line-area { - div:nth-of-type(2) { - background-color: $--chart-background-color !important; - border-color: $--chart-border-color !important; - div { + > div:nth-of-type(2) { + background-color: $--chart-background-color; + border-color: $--chart-border-color; + > div { color: $--color-text-regular; } } @@ -450,6 +450,14 @@ td .nz-icon-gear:before { color: $--color-text-regular !important; box-shadow: none !important; } +.chart-time-series, +.chart-pie, +.chart-bar, +.chart-treemap, +.chart-gauge{ + visibility: hidden; + position: absolute; +} .loading-hide { display: none; } @@ -586,6 +594,11 @@ textarea { .el-icon-arrow-left::before{ content: '\e6ae'; } + //.chart__canvas { + // .chart-time-series { + // width:; + // } + //} } .el-select__tags .el-tag.el-tag--info { background-color: $--background-color-base; diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index 28a774fa8..07652fe1a 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -229,9 +229,9 @@ } } .chart__canvas { - div{ - width: 100% !important; - height: 100% !important; + > div:nth-of-type(1){ + width: 100%; + height: 100%; } .nz-chart__tooltip { .row__label,.row__value { diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue index 90c59c5aa..6fafd90d8 100644 --- a/nezha-fronted/src/components/chart/chart/chartBar.vue +++ b/nezha-fronted/src/components/chart/chart/chartBar.vue @@ -117,6 +117,13 @@ export default { } chartOption.tooltip.formatter = this.formatterFunc chartOption.tooltip.position = this.tooltipPosition + if (navigator.userAgent.match(/Mobi/i) || + navigator.userAgent.match(/Android/i) || + navigator.userAgent.match(/iPhone/i)) { + chartOption.tooltip.confine = true + chartOption.tooltip.appendToBody = false + delete chartOption.tooltip.position + } /* 使用setTimeout延迟渲染图表，避免样式错乱 */ setTimeout(() => { const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue index 41b1c5f8f..160c7cc1c 100644 --- a/nezha-fronted/src/components/chart/chart/chartGauge.vue +++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue @@ -200,6 +200,13 @@ export default { } } option.tooltip.formatter = this.formatterFunc + if (navigator.userAgent.match(/Mobi/i) || + navigator.userAgent.match(/Android/i) || + navigator.userAgent.match(/iPhone/i)) { + option.tooltip.confine = true + option.tooltip.appendToBody = false + delete option.tooltip.position + } // option.tooltip.position = this.formatterFunc option.series[0].min = item.max == item.min ? 0 : item.min myChart.setOption(option) diff --git a/nezha-fronted/src/components/chart/chart/chartPie.vue b/nezha-fronted/src/components/chart/chart/chartPie.vue index b45251b24..a5b2a5b80 100644 --- a/nezha-fronted/src/components/chart/chart/chartPie.vue +++ b/nezha-fronted/src/components/chart/chart/chartPie.vue @@ -86,6 +86,13 @@ export default { // chartOption.series.label.formatter = this.pieFormatterLabel chartOption.tooltip.formatter = this.formatterFunc chartOption.tooltip.position = this.tooltipPosition + if (navigator.userAgent.match(/Mobi/i) || + navigator.userAgent.match(/Android/i) || + navigator.userAgent.match(/iPhone/i)) { + chartOption.tooltip.confine = true + chartOption.tooltip.appendToBody = false + delete chartOption.tooltip.position + } /* 使用setTimeout延迟渲染图表，避免样式错乱 */ setTimeout(() => { const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index dea7f04d2..618230677 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -129,6 +129,13 @@ export default { chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime, maxTime)// 需转为毫秒 chartOption.tooltip.formatter = this.tooltipFormatter(this.chartInfo.param.stack) chartOption.tooltip.position = this.tooltipPosition + if (navigator.userAgent.match(/Mobi/i) || + navigator.userAgent.match(/Android/i) || + navigator.userAgent.match(/iPhone/i)) { + chartOption.tooltip.confine = true + chartOption.tooltip.appendToBody = false + delete chartOption.tooltip.position + } chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue, copies, unit, decimals) chartOption.yAxis.minInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'min') chartOption.yAxis.maxInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(chartOption.series.length / 5) diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue index a01fd33e2..a627849c2 100644 --- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue +++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue @@ -83,6 +83,13 @@ export default { this.series = chartOption.series = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends chartOption.tooltip.formatter = this.formatterFunc chartOption.tooltip.position = this.tooltipPosition + if (navigator.userAgent.match(/Mobi/i) || + navigator.userAgent.match(/Android/i) || + navigator.userAgent.match(/iPhone/i)) { + chartOption.tooltip.confine = true + chartOption.tooltip.appendToBody = false + delete chartOption.tooltip.position + } /* 使用setTimeout延迟渲染图表，避免样式错乱 */ setTimeout(() => { const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) diff --git a/nezha-fronted/src/components/chart/chart/line-chart-block.vue b/nezha-fronted/src/components/chart/chart/line-chart-block.vue index d0cb81169..83d6dfa59 100644 --- a/nezha-fronted/src/components/chart/chart/line-chart-block.vue +++ b/nezha-fronted/src/components/chart/chart/line-chart-block.vue @@ -740,7 +740,7 @@ export default { animation: false, appendToBody: true, className: 'line-chart-block-Zindex', - extraCssText: 'z-index:1000;', + extraCssText: 'z-index:99999999;visibility:visible;', /* enterable:true, 导致tooltip不消失，显示多个tooltip */ position: function (point, params, dom, rect, size) { dom.style.transform = 'translateZ(0)' diff --git a/nezha-fronted/src/components/chart/chart/options/chartBar.js b/nezha-fronted/src/components/chart/chart/options/chartBar.js index 7936bca8a..67e7d4837 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartBar.js +++ b/nezha-fronted/src/components/chart/chart/options/chartBar.js @@ -3,7 +3,7 @@ const chartBarOption = { show: true, trigger: 'item', confine: false, - extraCssText: 'z-index:1000;', + extraCssText: 'z-index:99999999;visibility:visible;', z: 9, animation: false, appendToBody: true, diff --git a/nezha-fronted/src/components/chart/chart/options/chartGauge.js b/nezha-fronted/src/components/chart/chart/options/chartGauge.js index 0ef90776e..18b7ec6e6 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartGauge.js +++ b/nezha-fronted/src/components/chart/chart/options/chartGauge.js @@ -3,7 +3,7 @@ const chartGaugeOption = { show: true, trigger: 'item', confine: false, - extraCssText: 'z-index:1000;', + extraCssText: 'z-index:99999999;visibility:visible;', z: 9, animation: false, appendToBody: true, @@ -24,7 +24,7 @@ const chartGaugeOption = { // tooltip: { // trigger: 'axis', // confine: false, - // extraCssText: 'z-index:1000;', + // extraCssText: 'z-index:99999999;visibility:visible;', // z: 9, // animation: false, // appendToBody: true diff --git a/nezha-fronted/src/components/chart/chart/options/chartPie.js b/nezha-fronted/src/components/chart/chart/options/chartPie.js index 1bed5d272..ed6050ff0 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartPie.js +++ b/nezha-fronted/src/components/chart/chart/options/chartPie.js @@ -3,7 +3,7 @@ const chartPieOption = { show: true, trigger: 'item', confine: false, - extraCssText: 'z-index:1000;', + extraCssText: 'z-index:99999999;visibility:visible;', z: 9, animation: false, appendToBody: true, diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js index 3fcf01ce5..23dfe484d 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js @@ -35,7 +35,7 @@ export const chartTimeSeriesLineOption = { show: true, trigger: 'axis', confine: false, - extraCssText: 'z-index:99999999;', + extraCssText: 'z-index:99999999;visibility:visible;', z: 9, animation: false, appendToBody: true, diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js index 900e5533f..dbde1d154 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js @@ -4,7 +4,7 @@ const chartTreemapOption = { tooltip: { trigger: 'item', confine: false, - extraCssText: 'z-index:1000;', + extraCssText: 'z-index:99999999;visibility:visible;', z: 9, animation: false, appendToBody: true, diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue index d4cdaafb5..87404c9f2 100644 --- a/nezha-fronted/src/components/chart/chartList.vue +++ b/nezha-fronted/src/components/chart/chartList.vue @@ -177,7 +177,8 @@ export default { scrollTopTimer: null, // 变量比较结果 图表是否显示/隐藏 showHidden: {}, - tempList: [] + tempList: [], + isPhone: false } }, methods: { @@ -198,6 +199,12 @@ export default { const span = document.querySelector('.temp-dom') this.tempDom.width = span.offsetWidth } + if (this.isPhone) { + this.stepWidth = 150 + const headerH = 50 / this.stepWidth + const headerHPadding = 50 / this.stepWidth + this.$store.commit('setHeaderH', { headerH, headerHPadding, rowHeight: this.stepWidth }) + } }, resizeEvent (i, newH, newW, newHPx, newWPx) { // TODO 分段重新渲染图表，或者暂时隐藏图表 @@ -323,6 +330,11 @@ export default { } this.scrollTopTimer = setTimeout(() => { this.copyDataList.forEach(item => { + if (this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id]) { + if (this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip.show) { + this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip.show = false + } + } if (!this.$refs['grid-item' + item.id] || !this.$refs['grid-item' + item.id][0]) { return } @@ -584,6 +596,14 @@ export default { immediate: true, deep: true, handler (n) { + if (window.dataJson && ( + navigator.userAgent.match(/Mobi/i) || + navigator.userAgent.match(/Android/i) || + navigator.userAgent.match(/iPhone/i) + )) { // 判断当前设备是否是 移动端设备 + // 当前设备是移动设备 + this.isPhone = true + } this.gridLayoutShow = false this.firstInit = true this.gridLayoutLoading = true @@ -595,6 +615,12 @@ export default { let tempList = n.map(item => { let param = '' let height = '' + if (this.isPhone && item.type !== 'group') { + item.x = 0 + item.y = 0 + item.span = 12 + item.height = 2 + } if (item.param) { param = JSON.parse(JSON.stringify(item.param)) // try {