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

NEZ-2245 fix：dashboard explore snapshot 移动端适配

Browse Source
This commit is contained in:
zhangyu
2022-10-14 10:43:50 +08:00
parent 2b0a6b446a
commit 2a3e2907e6
14 changed files with 89 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
nezha-fronted/src/assets/css/common.scss
View File

@@ -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;

6
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -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 {

7
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -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)

7
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -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)

7
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -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)

7
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -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)

7
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -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)

2
nezha-fronted/src/components/chart/chart/line-chart-block.vue
View File

@@ -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)'

2
nezha-fronted/src/components/chart/chart/options/chartBar.js
View File

@@ -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,

4
nezha-fronted/src/components/chart/chart/options/chartGauge.js
View File

@@ -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

2
nezha-fronted/src/components/chart/chart/options/chartPie.js
View File

@@ -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,

2
nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
View File

@@ -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,

2
nezha-fronted/src/components/chart/chart/options/chartTreemap.js
View File

@@ -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,

28
nezha-fronted/src/components/chart/chartList.vue
View File

@@ -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 {