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,278 +2211,277 @@ export default {
     }
   }
 </style>
-<style scoped>
-  @keyframes model-error-animation {
-    0% {
-      transform: scale(0.7);
-    }
-    50% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0.7);
-    }
-  }
-
-  @keyframes model-icon-animation {
-    0% {
-      transform: scale(1.2) translateX(1px);
-    }
-    50% {
-      transform: scale(0.9) translateX(0px);
-    }
-    100% {
-      transform: scale(1.2) translateX(1px);
-    }
-  }
-
-  .nz-icon-shuidi {
-    position: absolute;
-    font-size: 48px;
-    color: rgba(190, 233, 222, 0.45);
-    border-radius: 50%;
-    height: 48px;
-    width: 48px;
-    line-height: 48px;
-  }
-
-  .model-error.nz-icon-shuidi {
-    color: #FADED7;
-    animation: model-error-animation .6s infinite ease-in-out;
-    animation-direction: normal;
-  }
-
-  .model-error-active.nz-icon-shuidi {
-    color: #FADED7;
-  }
-
-  .nz-icon-model {
-    color: #23BF9A;
-    position: absolute;
-    top: -4px;
-    left: 15px;
-    font-size: 18px;
-    line-height: 48px;
-  }
-
-  .model-error .nz-icon-model {
-    color: #EC7F66;
-    animation: model-icon-animation .6s infinite ease-in-out;
-    animation-direction: normal;
-  }
-
-  .model-error-active .nz-icon-model {
-    color: #EC7F66;
-  }
-
-  .scaleTool-enter-active {
-    animation: scaleTool-in .15s;
-  }
-
-  .scaleTool-leave-active {
-    animation: scaleTool-in .15s reverse;
-  }
-
-  @keyframes scaleTool-in {
-    from {
-      top: 0px;
-      left: 0px;
-      transform: scale(0.5);
-    }
-  }
-
-  .moduleIdRect{
-    /*border: 4px dashed #FA901C;*/
-  }
-  .module-rect-top{
-    border-top: 4px dashed #ff8c0a;
-    position: absolute;
-  }
-  .module-rect-right{
-    border-right: 4px dashed #ff8c0a;
-    position: absolute;
-  }
-  .module-rect-bottom{
-    border-bottom: 4px dashed #ff8c0a;
-    position: absolute;
-  }
-  .module-rect-left{
-     border-left: 4px dashed #ff8c0a;
-     position: absolute;
-  }
-
-  .network-pop .nz-icon-hexagonBorder{
-    position: absolute;
-    font-size: 48px;
-    color: #84d5c2;
-    height: 48px;
-    width: 48px;
-    line-height: 48px;
-  }
-
-  .network-pop .nz-icon-hexagonBorder:hover {
-    transform: scale(1.1);
-    color: #4BB49B;
-  }
-
-  .network-pop .nz-icon-hexagonBorder.error-model-stat {
-    color: #F5BAAC;
-  }
-
-  .network-pop .nz-icon-hexagonBorder.error-model-stat:hover {
-    color: #EC7F66;
-  }
-
-  .network-pop .nz-icon-liubianxing {
-    color: #e2f3ef;
-    font-size: 44px;
-    position: absolute;
-    top: 1px;
-    left: 2px;
-    transform: scale(0.95);
-    z-index: 0;
-  }
-
-  .network-pop .error-model-stat .nz-icon-liubianxing {
-    color: #FADED7;
-  }
-
-  .network-pop .nz-icon.noMove {
-    position: absolute;
-    left: 14px;
-    font-size: 20px;
-    color: #27c09c;
-  }
-
-  .network-pop .error-model-stat .nz-icon.noMove {
-    color: #EC7F66;
-  }
-
-  .network-pop .no-selPop {
-    color: #999 !important;
-  }
-
-  .network-pop .no-selPop .nz-icon-liubianxing {
-    color: rgb(218, 218, 218);
-  }
-
-  .network-pop .no-selPop .nz-icon-chart {
-    color: #999;
-  }
-
-  .network-info {
-    position: absolute;
-    right: 0;
-    top: 50px;
-  }
-
-  .facade-top{
-    min-height: 138px;
-    display: flex;
-    margin: 4px 0;
-    height: calc(16% - 40px);
-    font-size: 12px;
-    z-index: 10;
-    padding-left: 15px;
-  }
-  .facade-top > div{
-    width: 18%;
-    min-width: 315px;
-    background: #FFFFFF;
-    margin-right: 9px;
-    padding: 20px;
-    border: 1px solid #FFFFFF;
-    box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .facade-top-title{
-    font-size: 16px;
-    color: #333333;
-    font-weight: bold;
-    padding: 5px 0;
-  }
-  .facade-top-left{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
-  .special.label{
-    margin-left: 30px;
-  }
-  .facade-top .facade-top-right{
-    width: auto;
-    min-width: 100px;
-  }
-  .facade-top-right-content{
-    display: flex;
-    justify-content: space-around;
-    justify-items: center;
-    flex-direction: column;
-    height: calc(100% - 30px);
-    align-items:flex-start;
-  }
-  .facade-top-right-content > div{
-    min-width: 84px;
-    height: 22px;
-    display: flex;
-    justify-content: space-between;
-    color: #fff;
-    text-align: center;
-    margin-bottom: 5px;
-    line-height: 22px;
-  }
-  .facade-top-right-content > div > div:last-child{
-    text-align: center;
-    border-radius: 0 4px 4px 0;
-    flex: 1;
-    height: calc(100% - 2px);
-    padding: 0 8px;
-    min-width: 40px;
-  }
-  .content-P1-title{
-    background: #F2866E;
-    border-radius: 4px 0 0 4px;
-    width: 40px;
-    height: 100%;
-  }
-  .content-P1-title + div{
-    border: 1px solid #F4907A;
-    font-size: 12px;
-    color: #F4907A;
-  }
-
-  .content-P2-title{
-    background: #F89984;
-    border-radius: 4px 0 0 4px;
-    width: 40px;
-    height: 100%;
-  }
-  .content-P2-title + div{
-    border: 1px solid #F9A28F;
-    font-size: 12px;
-    color: #F9A28F;
-  }
-
-  .content-P3-title{
-    background: #F7BA78;
-    border-radius: 4px 0 0 4px;
-    width: 40px;
-    height: 100%;
-  }
-  .content-P3-title + div{
-    border: 1px solid #F7BA78;
-    font-size: 12px;
-    color: #F7BA78;
-  }
-
-  .right-content-P1{
-    border: 1px solid ;
-  }
-  .align--center{
-    text-align: center;
-  }
-
-</style>
 <style lang="scss" scoped>
+  .project-box{
+    @keyframes model-error-animation {
+      0% {
+        transform: scale(0.7);
+      }
+      50% {
+        transform: scale(1);
+      }
+      100% {
+        transform: scale(0.7);
+      }
+    }
+
+    @keyframes model-icon-animation {
+      0% {
+        transform: scale(1.2) translateX(1px);
+      }
+      50% {
+        transform: scale(0.9) translateX(0px);
+      }
+      100% {
+        transform: scale(1.2) translateX(1px);
+      }
+    }
+
+    .nz-icon-shuidi {
+      position: absolute;
+      font-size: 48px;
+      color: rgba(190, 233, 222, 0.45);
+      border-radius: 50%;
+      height: 48px;
+      width: 48px;
+      line-height: 48px;
+    }
+
+    .model-error.nz-icon-shuidi {
+      color: #FADED7;
+      animation: model-error-animation .6s infinite ease-in-out;
+      animation-direction: normal;
+    }
+
+    .model-error-active.nz-icon-shuidi {
+      color: #FADED7;
+    }
+
+    .nz-icon-model {
+      color: #23BF9A;
+      position: absolute;
+      top: -4px;
+      left: 15px;
+      font-size: 18px;
+      line-height: 48px;
+    }
+
+    .model-error .nz-icon-model {
+      color: #EC7F66;
+      animation: model-icon-animation .6s infinite ease-in-out;
+      animation-direction: normal;
+    }
+
+    .model-error-active .nz-icon-model {
+      color: #EC7F66;
+    }
+
+    .scaleTool-enter-active {
+      animation: scaleTool-in .15s;
+    }
+
+    .scaleTool-leave-active {
+      animation: scaleTool-in .15s reverse;
+    }
+
+    @keyframes scaleTool-in {
+      from {
+        top: 0px;
+        left: 0px;
+        transform: scale(0.5);
+      }
+    }
+
+    .moduleIdRect{
+      /*border: 4px dashed #FA901C;*/
+    }
+    .module-rect-top{
+      border-top: 4px dashed #ff8c0a;
+      position: absolute;
+    }
+    .module-rect-right{
+      border-right: 4px dashed #ff8c0a;
+      position: absolute;
+    }
+    .module-rect-bottom{
+      border-bottom: 4px dashed #ff8c0a;
+      position: absolute;
+    }
+    .module-rect-left{
+      border-left: 4px dashed #ff8c0a;
+      position: absolute;
+    }
+
+    .network-pop .nz-icon-hexagonBorder{
+      position: absolute;
+      font-size: 48px;
+      color: #84d5c2;
+      height: 48px;
+      width: 48px;
+      line-height: 48px;
+    }
+
+    .network-pop .nz-icon-hexagonBorder:hover {
+      transform: scale(1.1);
+      color: #4BB49B;
+    }
+
+    .network-pop .nz-icon-hexagonBorder.error-model-stat {
+      color: #F5BAAC;
+    }
+
+    .network-pop .nz-icon-hexagonBorder.error-model-stat:hover {
+      color: #EC7F66;
+    }
+
+    .network-pop .nz-icon-liubianxing {
+      color: #e2f3ef;
+      font-size: 44px;
+      position: absolute;
+      top: 1px;
+      left: 2px;
+      transform: scale(0.95);
+      z-index: 0;
+    }
+
+    .network-pop .error-model-stat .nz-icon-liubianxing {
+      color: #FADED7;
+    }
+
+    .network-pop .nz-icon.noMove {
+      position: absolute;
+      left: 14px;
+      font-size: 20px;
+      color: #27c09c;
+    }
+
+    .network-pop .error-model-stat .nz-icon.noMove {
+      color: #EC7F66;
+    }
+
+    .network-pop .no-selPop {
+      color: #999 !important;
+    }
+
+    .network-pop .no-selPop .nz-icon-liubianxing {
+      color: rgb(218, 218, 218);
+    }
+
+    .network-pop .no-selPop .nz-icon-chart {
+      color: #999;
+    }
+
+    .network-info {
+      position: absolute;
+      right: 0;
+      top: 50px;
+    }
+
+    .facade-top{
+      min-height: 138px;
+      display: flex;
+      margin: 4px 0;
+      height: calc(16% - 40px);
+      font-size: 12px;
+      z-index: 10;
+      padding-left: 15px;
+    }
+    .facade-top > div{
+      width: 18%;
+      min-width: 315px;
+      background: #FFFFFF;
+      margin-right: 9px;
+      padding: 20px;
+      border: 1px solid #FFFFFF;
+      box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
+    }
+    .facade-top-title{
+      font-size: 16px;
+      color: #333333;
+      font-weight: bold;
+      padding: 5px 0;
+    }
+    .facade-top-left{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+    }
+    .special.label{
+      margin-left: 30px;
+    }
+    .facade-top .facade-top-right{
+      width: auto;
+      min-width: 100px;
+    }
+    .facade-top-right-content{
+      display: flex;
+      justify-content: space-around;
+      justify-items: center;
+      flex-direction: column;
+      height: calc(100% - 30px);
+      align-items:flex-start;
+    }
+    .facade-top-right-content > div{
+      min-width: 84px;
+      height: 22px;
+      display: flex;
+      justify-content: space-between;
+      color: #fff;
+      text-align: center;
+      margin-bottom: 5px;
+      line-height: 22px;
+    }
+    .facade-top-right-content > div > div:last-child{
+      text-align: center;
+      border-radius: 0 4px 4px 0;
+      flex: 1;
+      height: calc(100% - 2px);
+      padding: 0 8px;
+      min-width: 40px;
+    }
+    .content-P1-title{
+      background: #F2866E;
+      border-radius: 4px 0 0 4px;
+      width: 40px;
+      height: 100%;
+    }
+    .content-P1-title + div{
+      border: 1px solid #F4907A;
+      font-size: 12px;
+      color: #F4907A;
+    }
+
+    .content-P2-title{
+      background: #F89984;
+      border-radius: 4px 0 0 4px;
+      width: 40px;
+      height: 100%;
+    }
+    .content-P2-title + div{
+      border: 1px solid #F9A28F;
+      font-size: 12px;
+      color: #F9A28F;
+    }
+
+    .content-P3-title{
+      background: #F7BA78;
+      border-radius: 4px 0 0 4px;
+      width: 40px;
+      height: 100%;
+    }
+    .content-P3-title + div{
+      border: 1px solid #F7BA78;
+      font-size: 12px;
+      color: #F7BA78;
+    }
+
+    .right-content-P1{
+      border: 1px solid ;
+    }
+    .align--center{
+      text-align: center;
+    }
+  }
   .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 {