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

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

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

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

@@ -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`
         }
       })
     },

nezha-fronted/src/components/charts/chart-list.vue

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

nezha-fronted/src/components/charts/chart-pie.vue

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

nezha-fronted/src/components/charts/chart-table.vue

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

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

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

nezha-fronted/src/components/common/js/tools.js

@@ -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, // 图表空白占位宽度
+  chartBlankWidth: 10, // 图表空白占位宽度
-  containerBlankWidth: 5, // 容器空白占位宽度（#listContainer的padding）
+  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
+    const domWidth = data.groupId ? document.getElementById('listContainer' + data.groupId).offsetWidth - 20 : document.getElementById('listContainer').offsetWidth
-    if (data.groupId) {
+    const step = this.stepWidth(domWidth)
-      stepWidth = document.getElementById('listContainer' + data.groupId).offsetWidth - 20
-    }
-    stepWidth = this.stepWidth(stepWidth)
-    const stepHeight = this.stepHeight
 
     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 remainderWidth = (box.offsetWidth + chartBlankWidth - shadowNewWidth) % step // 宽的余数
-      const remainderHeight = (box.offsetHeight + chartBlankHeight - shadowNewHeight) % stepHeight // 高的余数
+      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.height = Math.round((box.offsetHeight + chartPaddingTop) / step)
-      data.span = Math.round((box.offsetWidth + chartBlankWidth) / stepWidth)
+      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 currentWidth = shadow.offsetWidth + step
-        const currentSpan = Math.round((currentWidth + chartBlankWidth) / stepWidth)
+        const currentSpan = Math.round((currentWidth + chartBlankWidth) / step)
-        const calcWidth = currentSpan * stepWidth - chartBlankWidth // 不会换行的宽度
+        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 currentWidth = shadow.offsetWidth - step
-        const currentSpan = Math.round(currentWidth / stepWidth)
+        const currentSpan = Math.round(currentWidth / step)
-        const calcWidth = currentSpan * stepWidth - chartBlankWidth // 不会换行的宽度
+        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`
+        shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop + step}px`
-      } else if (height <= 0 - (stepHeight / 2)) { // 缩小shadow高
+      } 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

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

@@ -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.titleName'), data: 'name' },
-        { title: this.$t("config.model.titleType"), data: 'type' },
+        { title: this.$t('config.model.titleType'), data: 'type' },
-        { title: this.$t("config.model.remark"), data: 'remark' }
+        { 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' }

nezha-fronted/src/components/page/dashboard/chartBox.vue

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