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

NEZ-627 perf: 图表高度改为span

Browse Source
This commit is contained in:
chenjinsong
2021-05-17 22:31:14 +08:00
parent bb41a56007
commit 5052aeb853
9 changed files with 82 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
nezha-fronted/src/components/charts/chart-bar-statistics.vue
View File

@@ -186,7 +186,8 @@ export default {
},
extraCssText: 'z-index:1000;'
},
series: null
series: null,
stepWidth: null
}
}
},
@@ -309,7 +310,7 @@ export default {
},
axisLabel: {
margin: 8,
formatter: function (params) {
formatter (params) {
const dataLength = seriesItem.length || 1
const chartWidth = (document.getElementById('chart-' + chartItem.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余
const length = Math.ceil((chartWidth) / 16)
@@ -338,7 +339,7 @@ export default {
axisLabel: {
show: true,
fontSize: 10,
formatter: function (val, index) {
formatter (val, index) {
let value = val
if (val !== 0) {
value = parseFloat(Number(val).toFixed(2))
@@ -371,7 +372,7 @@ export default {
symbol: ['circle', 'circle'],
label: {
distance: this.computeDistance(chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(chartItem.param.threshold)),
formatter: function (params) {
formatter (params) {
return chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(params.value)
}
},
@@ -436,7 +437,7 @@ export default {
this.endLoading()
}
},
computeDistance: function (str) {
computeDistance (str) {
const span = document.querySelector('.temp-dom')
span.textContent = str
const txtWidth = parseFloat(window.getComputedStyle(span).width)
@@ -457,15 +458,16 @@ export default {
return name.slice(0, charNum) + '...'
}
},
initChart: function (type) {
initChart (type) {
this.option.series = this.pieData
this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
if (type == 'local') {
this.initLocal()
} else {
this.initScreen()
}
},
initLocal: function () {
initLocal () {
const self = this
const dom = document.getElementById('pie-chart-local-' + this.chartIndex)
if (!this.echart) {
@@ -487,12 +489,13 @@ export default {
}
this.$nextTick(() => {
const vm = this
setTimeout(function () {
const divHeight = self.$refs.legendArea.offsetHeight
if (!self.chartData.height) {
getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
} else {
getChart(self.chartIndex).resize({ height: (self.chartData.height - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
getChart(self.chartIndex).resize({ height: (self.chartData.height * vm.stepWidth - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
}
self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {
@@ -576,7 +579,7 @@ export default {
}, 100)
})
},
initScreen: function () {
initScreen () {
const self = this
const dom = document.getElementById('pie-chart-screen-' + this.chartIndex)
if (!this.echartScreen) {
@@ -628,7 +631,7 @@ export default {
}, 100)
})
},
dealLegendAlias: function (legend, expression) {
dealLegendAlias (legend, expression) {
if (/\{\{.+\}\}/.test(expression)) {
const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
@@ -741,7 +744,7 @@ export default {
this.bgColorList.push(randomcolor())
}
},
formatterFunc: function (params, ticket, callback) {
formatterFunc (params, ticket, callback) {
const chartInfo = this.chartData
return `
<div>

2
nezha-fronted/src/components/charts/chart-list-group.vue
View File

@@ -1396,7 +1396,7 @@ export default {
const chartBox = document.getElementById('chart-' + item.id)
if (chartBox) {
chartBox.style.width = `${(item.span / 12) * 100}%`
chartBox.style.height = `${item.height}px`
chartBox.style.height = `${document.getElementById('listContainer').offsetWidth / 12 * item.height}px`
}
})
},

16
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -224,6 +224,7 @@ import chartBarStatis from './chart-bar-statistics'
import chartGroup from './chart-group'
import { fromRoute } from '@/components/common/js/constants'
import chartTempData from '@/components/charts/chartTempData'
import { chartResizeTool } from '@/components/common/js/tools'
// import visNetwork from './visNetwork'
export default {
name: 'chartList',
@@ -254,6 +255,7 @@ export default {
},
data () {
return {
chartResizeTool: chartResizeTool,
filter: {},
dataList: [], // 看板中所有图表信息
dataListDragTmp: [],
@@ -272,7 +274,7 @@ export default {
pagePanelId: '', // 当前分页的panelId
dragging: null,
// chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
stepHeight: 50,
stepWidth: null,
tempDom: { height: '', width: '' }
// showShadow:false,
@@ -558,7 +560,7 @@ export default {
panelId: 0,
title: this.$t('alert.config.chart.affectEntity'),
span: 4,
height: 350,
height: 3,
type: 'alertRuleInfo',
prev: 0,
next: -9,
@@ -572,7 +574,7 @@ export default {
panelId: 0,
title: this.$t('alert.config.chart.alertNumTrend'),
span: 8,
height: 350,
height: 6,
type: 'line',
prev: -10,
next: -1,
@@ -622,7 +624,7 @@ export default {
dataId: this.additionalInfo.id,
title: this.$t('project.chart.endpointInfo'),
span: 6,
height: 350,
height: 4,
type: 'endpointInfo',
prev: 0,
next: -9,
@@ -639,7 +641,7 @@ export default {
panelId: 0,
title: this.$t('asset.assetInfo'),
span: 6,
height: 350,
height: 4,
type: 'assetInfo',
prev: -10,
next: -8,
@@ -1698,7 +1700,7 @@ export default {
const chartBox = document.getElementById('chart-' + item.id)
if (chartBox) {
chartBox.style.width = `${(item.span / 12) * 100}%`
chartBox.style.height = `${item.height}px`
chartBox.style.height = `${this.stepWidth * item.height}px`
if (item.type === 'group') {
chartBox.style.height = 'auto'
}
@@ -1832,6 +1834,8 @@ export default {
this.chartDataCacheGroup = new Map()
},
mounted () {
this.stepWidth = this.chartResizeTool.stepWidth(document.getElementById('listContainer').offsetWidth)
console.info(this.stepWidth)
this.tempDomInit()
}

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

@@ -183,7 +183,8 @@ export default {
},
extraCssText: 'z-index:1000;'
},
series: null
series: null,
stepWidth: null
}
}
},
@@ -354,6 +355,7 @@ export default {
},
initChart: function (type) {
this.option.series = this.pieData
this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
if (type == 'local') {
this.initLocal()
} else {
@@ -382,12 +384,13 @@ export default {
}
this.$nextTick(() => {
const vm = this
setTimeout(function () {
const divHeight = self.$refs.legendArea.offsetHeight
if (!self.chartData.height) {
getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
} else {
getChart(self.chartIndex).resize({ height: (self.chartData.height - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
getChart(self.chartIndex).resize({ height: (self.chartData.height * vm.stepWidth - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
}
self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {

2
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -285,7 +285,7 @@ export default {
resize (chartItem) {
const deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight
const container = document.querySelector('#chartTableDiv' + this.chartIndex + ' .table-container')
container.style.height = `calc(100% - ${deHeight * 2}px)`
container.style.height = `calc(100% - ${deHeight}px)`
this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`
},
showLoad (chartItem) {

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

@@ -198,7 +198,7 @@ import chartDataFormat from './chartDataFormat'
import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
import chartConfig from '../page/dashboard/overview/chartConfig'
import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
import { getMetricTypeValue } from '../common/js/tools'
import { getMetricTypeValue, chartResizeTool } from '../common/js/tools'
import moment from 'moment-timezone'
export default {
@@ -304,7 +304,9 @@ export default {
screenTitleHeight: 58,
hasLegendOptions: false,
/* legendOptions:[], */
screenLegendOptions: []
screenLegendOptions: [],
stepWidth: null
}
},
watch: {
@@ -595,7 +597,7 @@ export default {
// chartId='screenShowArea';
}
const chartWidth = ele.clientWidth
this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
const stackIconBorderColor = (chartInfo.type === 'stackArea' ? '#53a3cb' : '#7e7e7e')
const stackIconChooseBorderColor = (chartInfo.type === 'stackArea' ? '#7e7e7e' : '#53a3cb')
let maxValueCopies = this.getMaxValue(dataArg, chartInfo)
@@ -954,12 +956,13 @@ export default {
this.computeLegendData(this.legendListMore, dataArg, 'local')
}
this.$nextTick(() => {
const vm = this
setTimeout(function () {
const divHeight = self.$refs.legendArea.offsetHeight
if (!chartInfo.height) {
getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
getChart(self.chartIndex).resize({ height: (400 - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
} else {
getChart(self.chartIndex).resize({ height: (chartInfo.height - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
getChart(self.chartIndex).resize({ height: (chartInfo.height * vm.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
}
if (dataArg && dataArg.length > 0) {
getChart(self.chartIndex).clear()
@@ -1808,7 +1811,7 @@ export default {
if (!this.chartInfo.height) {
getChart(this.chartIndex).resize({ height: (400 - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
} else {
getChart(this.chartIndex).resize({ height: (this.chartInfo.height - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
getChart(this.chartIndex).resize({ height: (this.chartInfo.height * this.stepWidth - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
}
})
},

52
nezha-fronted/src/components/common/js/tools.js
View File

@@ -380,12 +380,12 @@ export function unixTimeParseToString (unixTime, fmt = 'yyyy-MM-dd hh:mm:ss') {
export const chartResizeTool = {
minHeight: 200, // 图表最小高度
chartPaddingTop: 2, // 图表padding-top
chartBlankHeight: 4, // 图表空白占位高度(padding-top + border)
chartBlankHeight: 10, // 图表空白占位高度(padding-top + border)
chartTableBlankHeight: 6, // 表格型图表额外空白占位高度
chartBlankWidth: 2, // 图表空白占位宽度
containerBlankWidth: 5, // 容器空白占位宽度（#listContainer的padding）
chartBlankWidth: 10, // 图表空白占位宽度
containerBlankWidth: 30, // 容器空白占位宽度（#listContainer的padding）
titleHeight: 40, // 标题dom高度
stepHeight: 50, // 单元高度
// stepHeight: 50, // 单元高度
timeouter: null,
stepWidth (containerWidth) { // 单元宽度，参数为容器总宽度
return (containerWidth - this.containerBlankWidth) / 12
@@ -412,18 +412,14 @@ export const chartResizeTool = {
const chartBlankWidth = this.chartBlankWidth
const chartBlankHeight = this.chartBlankHeight
const titleHeight = this.titleHeight
let stepWidth = document.getElementById('listContainer').offsetWidth
if (data.groupId) {
stepWidth = document.getElementById('listContainer' + data.groupId).offsetWidth - 20
}
stepWidth = this.stepWidth(stepWidth)
const stepHeight = this.stepHeight
const domWidth = data.groupId ? document.getElementById('listContainer' + data.groupId).offsetWidth - 20 : document.getElementById('listContainer').offsetWidth
const step = this.stepWidth(domWidth)
const mouseOriginalX = event.clientX // 鼠标初始坐标
const mouseOriginalY = event.clientY
const originalWidth = stepWidth * data.span // 图表、阴影初始宽高
const originalWidth = step * data.span // 图表、阴影初始宽高
let shadowNewWidth = originalWidth
const originalHeight = data.height
const originalHeight = step * data.height
let shadowNewHeight = originalHeight
// 1.激活背景阴影
@@ -440,16 +436,16 @@ export const chartResizeTool = {
box.style.width = `${originalWidth + (mouseX - mouseOriginalX) - chartBlankWidth}px`
box.style.height = `${originalHeight + (mouseY - mouseOriginalY) - chartBlankHeight}px`
// 监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
const remainderWidth = (box.offsetWidth + chartBlankWidth - shadowNewWidth) % stepWidth // 宽的余数
const remainderHeight = (box.offsetHeight + chartBlankHeight - shadowNewHeight) % stepHeight // 高的余数
const remainderWidth = (box.offsetWidth + chartBlankWidth - shadowNewWidth) % step // 宽的余数
const remainderHeight = (box.offsetHeight + chartBlankHeight - shadowNewHeight) % step // 高的余数
boxStepHandler(remainderWidth, remainderHeight)
}
function mouseupListener (e) {
// 将resize-box的宽高设为resize-shadow的宽高
box.style.width = `${shadow.offsetWidth}px`
box.style.height = `${Math.round((shadow.offsetHeight) / chartPaddingTop) * chartPaddingTop}px`
data.height = Math.round((box.offsetHeight + chartPaddingTop) / stepHeight) * stepHeight
data.span = Math.round((box.offsetWidth + chartBlankWidth) / stepWidth)
data.height = Math.round((box.offsetHeight + chartPaddingTop) / step)
data.span = Math.round((box.offsetWidth + chartBlankWidth) / step)
// 请求后台，保存变更
if (data.height != originalData.height || data.span != originalData.span) {
originalData.height = data.height
@@ -465,29 +461,29 @@ export const chartResizeTool = {
function boxStepHandler (width, height, chartIndex) { // param: 宽高变化量，大于0放大，小于0缩小
let widthChange = false
let heightChange = false
if (width > stepWidth / 2) { // 放大shadow宽
if (width > step / 2) { // 放大shadow宽
widthChange = true
// 判断是否因为百分数计算的宽度有小数的原因导致宽度超过当前行，使图表错误换行
const currentWidth = shadow.offsetWidth + stepWidth
const currentSpan = Math.round((currentWidth + chartBlankWidth) / stepWidth)
const calcWidth = currentSpan * stepWidth - chartBlankWidth // 不会换行的宽度
const currentWidth = shadow.offsetWidth + step
const currentSpan = Math.round((currentWidth + chartBlankWidth) / step)
const calcWidth = currentSpan * step - chartBlankWidth // 不会换行的宽度
shadow.style.width = `${calcWidth}px`
} else if (width <= 0 - (stepWidth / 2)) { // 缩小shadow宽
} else if (width <= 0 - (step / 2)) { // 缩小shadow宽
widthChange = true
const currentWidth = shadow.offsetWidth - stepWidth
const currentSpan = Math.round(currentWidth / stepWidth)
const calcWidth = currentSpan * stepWidth - chartBlankWidth // 不会换行的宽度
const currentWidth = shadow.offsetWidth - step
const currentSpan = Math.round(currentWidth / step)
const calcWidth = currentSpan * step - chartBlankWidth // 不会换行的宽度
shadow.style.width = `${calcWidth}px`
}
if (widthChange) {
shadowNewWidth = shadow.offsetWidth
}
if (height > stepHeight / 2) { // 放大shadow高
if (height > step / 2) { // 放大shadow高
heightChange = true
shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop + stepHeight}px`
} else if (height <= 0 - (stepHeight / 2)) { // 缩小shadow高
shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop + step}px`
} else if (height <= 0 - (step / 2)) { // 缩小shadow高
heightChange = true
shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop - stepHeight}px`
shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop - step}px`
}
if (heightChange) {
shadowNewHeight = shadow.offsetHeight + chartBlankHeight

8
nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
View File

@@ -85,9 +85,9 @@ export default {
chartlList: [], // chart 列表数据
ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
{ title: 'ID', data: 'id' },
{ title: this.$t("config.model.titleName"), data: 'name' },
{ title: this.$t("config.model.titleType"), data: 'type' },
{ title: this.$t("config.model.remark"), data: 'remark' }
{ title: this.$t('config.model.titleName'), data: 'name' },
{ title: this.$t('config.model.titleType'), data: 'type' },
{ title: this.$t('config.model.remark'), data: 'remark' }
],
url: 'asset/model',
brandUrl: 'asset/brand',
@@ -95,7 +95,7 @@ export default {
roles: [],
rules: {
name: [
{ required: true, message: '必填', trigger: 'blur' }
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
brandId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }

21
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -222,7 +222,7 @@
<!--height-->
<el-form-item :label="$t('dashboard.panel.chartForm.high')" class="form-item--half-width" prop="height">
<el-autocomplete
<!-- <el-autocomplete
id="chart-box-height"
v-model="editChart.height"
:disabled="editChart.type === 'group'"
@@ -235,7 +235,14 @@
<div class="name">{{ item }}</div>
</template>
<template slot="append">px</template>
</el-autocomplete>
</el-autocomplete>-->
<!-- 由px改为span -->
<el-select id="chart-box-height" v-model="editChart.height" :disabled="editChart.type === 'group'" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" value-key="chartSpan">
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
</el-select>
</el-form-item>
<!-- unit -->
@@ -1124,7 +1131,7 @@ export default {
// 获取metric列表
getSuggestMetric () {
// this.$get('/prom/api/v1/label/__name__/values').then(response => {
this.$get('/module?pageSize=-1').then(response => {
this.$get('monitor/module?pageSize=-1').then(response => {
if (response.code === 200) {
this.metricList = response.data.list
const cascaderMap = new Map()
@@ -1245,7 +1252,7 @@ export default {
this.editChart.id = data.id
this.editChart.name = data.name
this.editChart.span = data.span
this.editChart.height = data.height + ''
this.editChart.height = data.height
this.editChart.type = data.type
this.editChart.unit = data.unit
this.editChart.remark = data.remark
@@ -1312,7 +1319,7 @@ export default {
this.editChart.name = ''
this.editChart.type = 'line'
this.editChart.span = 12
this.editChart.height = 400 + ''
this.editChart.height = 4
this.editChart.unit = unit || 2
this.editChart.remark = ''
this.editChart.groupId = this.editChart.groupId || ''
@@ -1360,7 +1367,7 @@ export default {
chartTypeChange () {
const chartType = this.editChart.type
this.editChart.param.url = ''
this.editChart.height = 400
this.editChart.height = 4
if (chartType === 'url') {
this.setIsUrl()
/* if(this.$refs.chartTag){
@@ -1385,7 +1392,7 @@ export default {
this.showPicker = [{ bac: false, text: false }]
} else if (chartType === 'group') {
this.editChart.span = 12
this.editChart.height = 100
this.editChart.height = 6
this.setIsGroup()
} else {
this.setIsOtherChart()