From 8e3bbce9a5a84321e2464c947804d2e55fc39145 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Tue, 18 May 2021 17:59:43 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-627=20feat:=20chart=E9=AB=98=E5=BA=A6?= =?UTF-8?q?=E6=94=B9=E4=B8=BAspan=E5=BD=A2=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/charts/chart-list.vue | 24 ++++-- .../src/components/common/js/tools.js | 73 ++++++++----------- .../common/table/alert/alertSilenceTable.vue | 2 +- 3 files changed, 49 insertions(+), 50 deletions(-) diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 81254452b..4aaec8440 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -225,7 +225,6 @@ 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', props: { @@ -1700,7 +1699,7 @@ export default { const chartBox = document.getElementById('chart-' + item.id) if (chartBox) { chartBox.style.width = `${(item.span / 12) * 100}%` - chartBox.style.height = `${this.stepWidth * item.height}px` + chartBox.style.height = `${Math.floor(this.stepWidth * item.height)}px` if (item.type === 'group') { chartBox.style.height = 'auto' } @@ -1797,9 +1796,9 @@ export default { setTimeout(function () { const itemHeight = item.height // 1.元素距离页面顶部的距离 - const mainOffsetTop = ele.offsetTop// offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。 + const mainOffsetTop = ele.offsetTop // offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。 // 2.元素的高度 - const mainHeight = itemHeight// ele.offsetHeight;//itemHeight; + const mainHeight = itemHeight // ele.offsetHeight;//itemHeight; // 3.页面滚动的距离 const windowScrollTop = scrollTop// document.documentElement.scrollTop || document.body.scrollTop; // 4.浏览器可见区域的高度 @@ -1828,17 +1827,26 @@ export default { } } }, 500) + }, + resize () { + this.init() + this.$parent.dateChange() + }, + init () { + this.stepWidth = this.chartResizeTool.stepWidth(document.getElementById('listContainer').offsetWidth - 14) + this.tempDomInit() } }, created () { this.chartDataCacheGroup = new Map() }, mounted () { - this.stepWidth = this.chartResizeTool.stepWidth(document.getElementById('listContainer').offsetWidth) - console.info(this.stepWidth) - this.tempDomInit() + this.init() + window.addEventListener('resize', () => this.resize(), false) + }, + beforeDestroy () { + window.removeEventListener('resize', this.resize(), false) } - } diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js index 73fa495a9..7bb95a4c3 100644 --- a/nezha-fronted/src/components/common/js/tools.js +++ b/nezha-fronted/src/components/common/js/tools.js @@ -379,42 +379,25 @@ export function unixTimeParseToString (unixTime, fmt = 'yyyy-MM-dd hh:mm:ss') { // chart-resize工具 export const chartResizeTool = { minHeight: 200, // 图表最小高度 - chartPaddingTop: 2, // 图表padding-top - chartBlankHeight: 10, // 图表空白占位高度(padding-top + border) + chartBlankHeight: 10, // 图表空白占位高度(padding-bottom + border) chartTableBlankHeight: 6, // 表格型图表额外空白占位高度 - chartBlankWidth: 10, // 图表空白占位宽度 + chartBlankWidth: 10, // 图表空白占位宽度(padding-right) containerBlankWidth: 30, // 容器空白占位宽度（#listContainer的padding） titleHeight: 40, // 标题dom高度 - // stepHeight: 50, // 单元高度 timeouter: null, stepWidth (containerWidth) { // 单元宽度，参数为容器总宽度 - return (containerWidth - this.containerBlankWidth) / 12 - }, - calculateHeight (original) { - let height = Math.floor(original / this.stepHeight) * this.stepHeight - if (height < this.minHeight) { - height = this.minHeight - } - return height - this.chartBlankHeight + return Math.floor((containerWidth - this.containerBlankWidth) / 12) }, start (vm, originalData, event, chartIndexs) { const $self = this const data = JSON.parse(JSON.stringify(originalData)) // 将初始对象复制，后续操作使用复制对象 - let shadow = vm.$refs.resizeShadow // 缩放时底部阴影dom - if (!shadow) { - shadow = vm.$refs[0].resizeShadow - } - let box = vm.$refs.resizeBox // 图表内容dom - if (!box) { - box = vm.$refs[0].resizeBox - } - const chartPaddingTop = this.chartPaddingTop + const shadow = vm.$refs.resizeShadow ? vm.$refs.resizeShadow : vm.$refs[0].resizeShadow // 缩放时底部阴影dom + const box = vm.$refs.resizeBox ? vm.$refs.resizeBox : vm.$refs[0].resizeBox // 图表内容dom const chartBlankWidth = this.chartBlankWidth const chartBlankHeight = this.chartBlankHeight const titleHeight = this.titleHeight - const domWidth = data.groupId ? document.getElementById('listContainer' + data.groupId).offsetWidth - 20 : document.getElementById('listContainer').offsetWidth - const step = this.stepWidth(domWidth) - + const containerWidth = data.groupId ? document.getElementById('listContainer' + data.groupId).offsetWidth - 20 : document.getElementById('listContainer').offsetWidth + const step = this.stepWidth(containerWidth) const mouseOriginalX = event.clientX // 鼠标初始坐标 const mouseOriginalY = event.clientY const originalWidth = step * data.span // 图表、阴影初始宽高 @@ -432,20 +415,23 @@ export const chartResizeTool = { function moveListener (e) { const mouseX = e.clientX const mouseY = e.clientY - // 调整resize-box的宽高 - box.style.width = `${originalWidth + (mouseX - mouseOriginalX) - chartBlankWidth}px` - box.style.height = `${originalHeight + (mouseY - mouseOriginalY) - chartBlankHeight}px` + const w = `${Math.floor(originalWidth + (mouseX - mouseOriginalX) - chartBlankWidth)}px` + const h = `${Math.floor(originalHeight + (mouseY - mouseOriginalY) - chartBlankHeight)}px` + box.style.width = w + box.style.height = h + // 调整resize-box的宽高。减去chartBlankWidth、chartBlankHeight是为了对齐 + // box.style.width = `${Math.floor(originalWidth + (mouseX - mouseOriginalX) - chartBlankWidth)}px` + // box.style.height = `${Math.floor(originalHeight + (mouseY - mouseOriginalY) - chartBlankHeight)}px` // 监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容 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) / step) - data.span = Math.round((box.offsetWidth + chartBlankWidth) / step) + data.span = Math.round((shadow.offsetWidth + chartBlankWidth) / step) + data.height = Math.round((shadow.offsetHeight + chartBlankHeight) / step) + box.style.width = `${Math.floor(data.span * step) - chartBlankWidth}px` + box.style.height = `${Math.floor(data.height * step) - chartBlankHeight}px` // 请求后台，保存变更 if (data.height != originalData.height || data.span != originalData.span) { originalData.height = data.height @@ -464,14 +450,14 @@ export const chartResizeTool = { if (width > step / 2) { // 放大shadow宽 widthChange = true // 判断是否因为百分数计算的宽度有小数的原因导致宽度超过当前行，使图表错误换行 - const currentWidth = shadow.offsetWidth + step - const currentSpan = Math.round((currentWidth + chartBlankWidth) / step) + const currentWidth = shadow.offsetWidth + step // 增大一阶后的宽度 + const currentSpan = Math.round((currentWidth + chartBlankWidth) / step) // 根据width计算span const calcWidth = currentSpan * step - chartBlankWidth // 不会换行的宽度 shadow.style.width = `${calcWidth}px` } else if (width <= 0 - (step / 2)) { // 缩小shadow宽 widthChange = true - const currentWidth = shadow.offsetWidth - step - const currentSpan = Math.round(currentWidth / step) + const currentWidth = shadow.offsetWidth - step // 减小一阶 + const currentSpan = Math.round((currentWidth + chartBlankWidth) / step) // 根据width计算span const calcWidth = currentSpan * step - chartBlankWidth // 不会换行的宽度 shadow.style.width = `${calcWidth}px` } @@ -480,13 +466,19 @@ export const chartResizeTool = { } if (height > step / 2) { // 放大shadow高 heightChange = true - shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop + step}px` + const currentHeight = shadow.offsetHeight + step // 增大一阶后的宽度 + const currentHeightSpan = Math.round((currentHeight + chartBlankHeight) / step) // 根据width计算span + const calcHeight = currentHeightSpan * step - chartBlankHeight // 不会换行的宽度 + shadow.style.height = `${calcHeight}px` } else if (height <= 0 - (step / 2)) { // 缩小shadow高 heightChange = true - shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop - step}px` + const currentHeight = shadow.offsetHeight - step // 增大一阶后的宽度 + const currentHeightSpan = Math.round((currentHeight + chartBlankHeight) / step) // 根据width计算span + const calcHeight = currentHeightSpan * step - chartBlankHeight // 不会换行的宽度 + shadow.style.height = `${calcHeight}px` } if (heightChange) { - shadowNewHeight = shadow.offsetHeight + chartBlankHeight + shadowNewHeight = shadow.offsetHeight } if (widthChange || heightChange) { @@ -499,7 +491,7 @@ export const chartResizeTool = { }, 500) // chart外层宽高调整 const outerBox = document.getElementById(`chart-${data.id}`) - outerBox.style.height = `${shadow.offsetHeight + chartPaddingTop}px` + outerBox.style.height = `${shadow.offsetHeight + chartBlankHeight}px` outerBox.style.width = `${parseFloat(shadow.style.width.split('px')[0]) + chartBlankWidth}px` } } @@ -810,7 +802,6 @@ export function clickLegend (echart, legendName, index) { } export function showTableTooltip (content, show = true, e) { - // console.info(content, e) if (show) { const dom = document.querySelector('.table-tooltip') dom.innerHTML = content diff --git a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue index a216f59a6..81ac6f08f 100644 --- a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue +++ b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue @@ -96,7 +96,7 @@ - {{$t('buttons.expire')}} + {{$t('buttons.expire')}}