From 3324e0b5f409d38fdf382424453cfea56718ebb0 Mon Sep 17 00:00:00 2001 From: zyh Date: Tue, 21 May 2024 16:34:37 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-3477=20feat:=20=E5=9B=BE=E8=A1=A8=E5=A4=A7?= =?UTF-8?q?=E5=8C=96=E9=A1=B5=E9=9D=A2=E6=94=AF=E6=8C=81=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E5=92=8Clegend=E7=9A=84=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E6=AF=94=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/css/components/chart/chart.scss | 80 +++++-- .../common/alert/alertMessageInfo.scss | 3 - .../src/components/chart/chart/legend.vue | 203 ++++++++++++------ 3 files changed, 201 insertions(+), 85 deletions(-) diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index de62f08b7..29da8d1ad 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -230,11 +230,6 @@ border: none; .nz-chart__component { position: relative; - &.nz-chart__component--bottom { - .legend-container { - max-height: 135px; - } - } } } .chart__canvas { @@ -272,11 +267,6 @@ } &.nz-chart__component--bottom { flex-direction: column; - .legend-container { - width: 100%; - max-height: 80px; - min-height: 25px; - } } &.nz-chart__component--right { flex-direction: row; @@ -287,11 +277,6 @@ &.nz-chart__component--right, &.nz-chart__component--left { .legend-container { flex-direction: column; - padding-top: 25px; - width: unset; - max-width: 50%; - max-height: unset; - min-height: unset; } } .legend-box{ @@ -403,7 +388,6 @@ font-size: 12px; text-align: left; line-height: 18px; - padding: 0 10px 3px 10px; box-sizing: border-box; .legend-item { @@ -1152,3 +1136,67 @@ .panel-chart:hover .uplot-toolbox { display: block; } + +.legend-wrap{ + padding: 5px 10px 5px 10px; + box-sizing: border-box; + .legend-resize{ + flex-shrink: 0; + background-color: $--border-color-light; + &:hover{ + background: $--color-primary; + } + } +} + +.nz-chart__component--bottom{ + .legend-wrap{ + min-height: 38px; + max-height: 72px; + display: flex; + flex-direction: column; + .legend-resize{ + margin-bottom: 5px; + cursor: ns-resize; + width: 100%; + height: 2px; + } + } +} +.panel-chart--fullscreen{ + .nz-chart__component--bottom{ + .legend-wrap{ + max-height: 80px; + } + } +} + +.nz-chart__component--left{ + .legend-wrap{ + padding-top: 20px; + max-width: 50%; + display: flex; + flex-direction: row-reverse; + .legend-resize{ + margin-left: 5px; + cursor: ew-resize; + width: 2px; + height: 100%; + } + } +} + +.nz-chart__component--right{ + .legend-wrap{ + padding-top: 15px; + max-width: 50%; + display: flex; + .legend-resize{ + margin-right: 5px; + cursor: ew-resize; + width: 2px; + height: 100%; + } + } +} + diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss index e0600561e..c225ffc87 100644 --- a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss +++ b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss @@ -432,9 +432,6 @@ .integration-dashboard{ box-sizing: border-box; height: 100%; - .nz-chart__component.nz-chart__component--bottom .legend-container { - max-height: 60px; - } .dashboard-container{ height: 100%; .table-list{ diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue index fcbaba4ae..2a112e263 100644 --- a/nezha-fronted/src/components/chart/chart/legend.vue +++ b/nezha-fronted/src/components/chart/chart/legend.vue @@ -1,92 +1,95 @@ @@ -129,6 +132,74 @@ export default { } }, methods: { + legendResize (e) { + const placement = this.$lodash.get(this.chartInfo, 'param.legend.placement', 'bottom') + if (placement === 'bottom') { + this.verticalResize(e) + } else { + this.horizontalResize(e, placement) + } + }, + verticalResize (e) { + const legendDom = this.$refs.legendDom + // 得到点击时dom的初始高度 + const chartTotalHeight = this.$parent.$el.offsetHeight + const legendInitialHeight = legendDom.offsetHeight + // 点击时鼠标的Y轴位置 + const mouseInitialY = e.clientY + + document.onmousemove = (e) => { + e.preventDefault() + // 得到鼠标拖动的距离 + const mouseMoveY = e.clientY - mouseInitialY + + legendDom.style.maxHeight = 'unset' + legendDom.style.height = legendInitialHeight - mouseMoveY + 'px' + + // 最大 最小高度限制 + if (parseInt(legendDom.style.height) >= chartTotalHeight - 100) { + legendDom.style.height = chartTotalHeight - 100 + 'px' + } + if (parseInt(legendDom.style.height) <= 38) { + legendDom.style.height = 38 + 'px' + } + + this.$parent.resize() + } + document.onmouseup = () => { + document.onmousemove = null + } + }, + horizontalResize (e, placement) { + const legendDom = this.$refs.legendDom + // 得到点击时dom的初始宽度 + const chartTotalWidth = this.$parent.$el.offsetWidth + const legendInitialWidth = legendDom.offsetWidth + // 点击时鼠标的X轴位置 + const mouseInitialX = e.clientX + + document.onmousemove = (e) => { + e.preventDefault() + // 得到鼠标拖动的距离 + const mouseMoveX = e.clientX - mouseInitialX + + legendDom.style.maxWidth = 'unset' + legendDom.style.width = placement === 'right' ? (legendInitialWidth - mouseMoveX + 'px') : (legendInitialWidth + mouseMoveX + 'px') + + // 最大 最小宽度限制 + if (parseInt(legendDom.style.width) >= chartTotalWidth - 100) { + legendDom.style.width = chartTotalWidth - 100 + 'px' + } + if (parseInt(legendDom.style.width) <= 50) { + legendDom.style.width = 50 + 'px' + } + + this.$parent.resize() + } + document.onmouseup = () => { + document.onmousemove = null + } + }, clickLegend (legendName, index) { /* 点击legend * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮