NEZ-627 feat: chart高度改为span形式

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)
+    this.init()
-    console.info(this.stepWidth)
+    window.addEventListener('resize', () => this.resize(), false)
-    this.tempDomInit()
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.resize(), false)
   }
-
 }
 
 </script>

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-bottom + border)
-  chartBlankHeight: 10, // 图表空白占位高度(padding-top + 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
+    return Math.floor((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
   },
   start (vm, originalData, event, chartIndexs) {
     const $self = this
     const data = JSON.parse(JSON.stringify(originalData)) // 将初始对象复制，后续操作使用复制对象
-    let shadow = vm.$refs.resizeShadow // 缩放时底部阴影dom
+    const shadow = vm.$refs.resizeShadow ? vm.$refs.resizeShadow : vm.$refs[0].resizeShadow // 缩放时底部阴影dom
-    if (!shadow) {
+    const box = vm.$refs.resizeBox ? vm.$refs.resizeBox : vm.$refs[0].resizeBox // 图表内容dom
-      shadow = vm.$refs[0].resizeShadow
-    }
-    let box = vm.$refs.resizeBox // 图表内容dom
-    if (!box) {
-      box = vm.$refs[0].resizeBox
-    }
-    const chartPaddingTop = this.chartPaddingTop
     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 containerWidth = data.groupId ? document.getElementById('listContainer' + data.groupId).offsetWidth - 20 : document.getElementById('listContainer').offsetWidth
-    const step = this.stepWidth(domWidth)
+    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的宽高
+      const w = `${Math.floor(originalWidth + (mouseX - mouseOriginalX) - chartBlankWidth)}px`
-      box.style.width = `${originalWidth + (mouseX - mouseOriginalX) - chartBlankWidth}px`
+      const h = `${Math.floor(originalHeight + (mouseY - mouseOriginalY) - chartBlankHeight)}px`
-      box.style.height = `${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的宽高
+      data.span = Math.round((shadow.offsetWidth + chartBlankWidth) / step)
-      box.style.width = `${shadow.offsetWidth}px`
+      data.height = Math.round((shadow.offsetHeight + chartBlankHeight) / step)
-      box.style.height = `${Math.round((shadow.offsetHeight) / chartPaddingTop) * chartPaddingTop}px`
+      box.style.width = `${Math.floor(data.span * step) - chartBlankWidth}px`
-      data.height = Math.round((box.offsetHeight + chartPaddingTop) / step)
+      box.style.height = `${Math.floor(data.height * step) - chartBlankHeight}px`
-      data.span = Math.round((box.offsetWidth + chartBlankWidth) / step)
       // 请求后台，保存变更
       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 currentWidth = shadow.offsetWidth + step // 增大一阶后的宽度
-        const currentSpan = Math.round((currentWidth + chartBlankWidth) / 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 currentWidth = shadow.offsetWidth - step // 减小一阶
-        const currentSpan = Math.round(currentWidth / 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

nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue

@@ -96,7 +96,7 @@
           </div>
           <el-dropdown-menu slot="dropdown">
 <!--            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
-            <el-dropdown-item :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('buttons.expire')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'alertSilence_expire'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('buttons.expire')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>