fix：修改chart group切换时分组显示的不对的问题

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

@@ -294,7 +294,6 @@ export default {
     // 设置数据, filter区分
     setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
       this.data = chartItem
-      const self = this
       if (chartItem.type === 'bar') {
         this.option.xAxis = {
           type: 'category',
@@ -366,6 +365,24 @@ export default {
           obj.name = legend[index].name
           obj.data = [[legendShow, item.value]]
           obj.stack = true
+          obj.markLine = {
+            silent: true,
+            symbol: ['circle', 'circle'],
+            label: {
+              distance: this.computeDistance(chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(chartItem.param.threshold)),
+              formatter: function (params) {
+                return chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(params.value)
+              }
+            },
+            lineStyle: {
+              color: '#d64f40',
+              width: 2,
+              type: 'dotted',
+            },
+            data: [{
+              yAxis: Number(chartItem.param.threshold)
+            }]
+          }
           nweSeriesItem.push(obj)
         })
         seriesItem = nweSeriesItem
@@ -417,6 +434,12 @@ export default {
         this.endLoading()
       }
     },
+    computeDistance: function (str) {
+      const span = document.querySelector('.temp-dom')
+      span.textContent = str
+      const txtWidth = parseFloat(window.getComputedStyle(span).width)
+      return Number('-' + (txtWidth + 5))
+    },
     formatLegend (chartWidth, name) {
       if (!name) {
         return ''

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -2211,7 +2211,8 @@ export default {
     }
   }
 </style>
-<style scoped>
+<style lang="scss" scoped>
+  .project-box{
     @keyframes model-error-animation {
       0% {
         transform: scale(0.7);
@@ -2480,9 +2481,7 @@ export default {
     .align--center{
       text-align: center;
     }
-
+  }
-</style>
-<style lang="scss" scoped>
   .project-topology-tool {
     display: inline-flex;
     height: 30px;

nezha-fronted/src/components/common/project/topologyPrev.vue

@@ -381,8 +381,8 @@
 </template>
 
 <script>
-import { Topology, registerNode } from '@topology/core'
+  import { Topology, registerNode } from '@topology/core'
-import {
+  import {
     Tools,
     canvasRegister,
     imageTemp,
@@ -394,31 +394,31 @@ import {
     onChangeAnimateLine,
     myCubec,
     myCubeAnchors
-} from './L5/services/canvas.js'
+  } from './L5/services/canvas.js'
-import { getTopology, setTopology } from '../js/common'
+  import { getTopology, setTopology } from '../js/common'
-import CanvasProps from './L5/CanvasProps'
+  import CanvasProps from './L5/CanvasProps'
-import topologyTopTool from './L5//topologyTopTool'
+  import topologyTopTool from './L5//topologyTopTool'
-import popDataMain from './popData/Main'
+  import popDataMain from './popData/Main'
-import popDataInfo from './popData/Info'
+  import popDataInfo from './popData/Info'
-import alertTable from './popData/alertTable'
+  import alertTable from './popData/alertTable'
-import assetTable from './popData/assetTable'
+  import assetTable from './popData/assetTable'
-import endpointTable from './popData/endpointTable'
+  import endpointTable from './popData/endpointTable'
-import topoTooltip from './L5/topoTooltip'
+  import topoTooltip from './L5/topoTooltip'
-import { getMetricTypeValue } from '../js/tools'
+  import { getMetricTypeValue } from '../js/tools'
-import bus from '../../../libs/bus'
+  import bus from '../../../libs/bus'
-import topologyPrev from './topologyPrev'
+  import topologyPrev from './topologyPrev'
-// 注册到画布
+  // 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+  registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
-registerNode('myCube', myCubec, myCubeAnchors, null, null)
+  registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
-const canvasOptions = {
+  const canvasOptions = {
     rotateCursor: '/img/rotate.cur',
     translateKey: 'None',
     disableEmptyLine: true,
     autoExpandDistance: 0,
     minScale: 0.01
-}
+  }
-export default {
+  export default {
     name: 'topologyL5',
     data () {
       return {
@@ -1164,7 +1164,7 @@ export default {
       },
 
       onMessage (event, data, e) {
-      console.log('onMessage', event, data)
+        // console.log('onMessage', event, data)
         // console.log(getTopology(this.topologyIndex))
         // this.notModuleIDArr=[];
         this.toolShow.attr = false
@@ -2064,7 +2064,7 @@ export default {
       }
       window.removeEventListener('resize', this.winResize)
     }
-}
+  }
 </script>
 <style lang="scss">
   .el-dropdown-menu {
@@ -2211,7 +2211,8 @@ export default {
     }
   }
 </style>
-<style scoped>
+<style lang="scss" scoped>
+  .project-box{
     @keyframes model-error-animation {
       0% {
         transform: scale(0.7);
@@ -2480,9 +2481,7 @@ export default {
     .align--center{
       text-align: center;
     }
-
+  }
-</style>
-<style lang="scss" scoped>
   .project-topology-tool {
     display: inline-flex;
     height: 30px;

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

@@ -627,6 +627,17 @@ export default {
     selectPanel (panel) {
       this.panelName = panel.name
       this.panelId = panel.id
+      this.editChart.groupId = ''
+      this.$get('visual/panel/chart?panelId=' + this.panelId).then(response => {
+        if (response.code === 200) {
+          this.groupArr = []
+          response.data.list.forEach((item, index) => {
+            if (item.type === 'group') {
+              this.groupArr.push({ id: item.id, name: item.name })
+            }
+          })
+        }
+      })
     },
     toAddPanel () {
       this.$refs.panelBox2.show(true)
@@ -1261,6 +1272,7 @@ export default {
           this.editChart.param.threshold = data.param.threshold
           this.editChart.param.statistics = this.statistics = data.param.statistics
           if (this.editChart.type === 'bar') {
+            this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
             this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
           }
         } else {

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

@@ -790,6 +790,8 @@ export default {
 <style scoped lang="scss">
   .panel {
     height: 100%;
+    display: flex;
+    flex-direction:column;
   }
 
   .panel .el-table {
@@ -855,6 +857,7 @@ export default {
     margin-top: 0px;
     overflow-y: auto;
     height: calc(100% - 50px);
+    flex: 1;
   }
 
   .box-content {