NEZ-1859 feat：chart header 新增显示/隐藏 状态

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -1,23 +1,32 @@
+.el-dropdown-menu.el-popper{
+  border: none;
+}
+
 .panel-chart {
   border: 1px solid $--chart-box-border-color;
   height: 100%;
   display: flex;
   position: relative;
   flex-direction: column;
-
+  &:hover .chart-header--float{
+    background-color: $--chart-title-hover-background-color;
+    height: 39px !important;
+    opacity: 1 !important;
+  }
   .chart-header {
     &.chart-header--float {
       position: absolute;
+      top: 0;
       width: 100%;
-      z-index: 100;
+      z-index: 500;
       box-sizing: border-box;
-      height: 10px;
+      height: 0px;
       opacity: 0;
-      transition: all linear .2s;
+      transition: all linear .3s;
-
+      .chart-header__tools {
-      &:hover {
+        .chart-header__tool .tool__icon {
-        height: 39px;
+          visibility: visible;
-        opacity: 1;
+        }
       }
     }
     display: flex;
@@ -25,15 +34,12 @@
     align-items:center;
     padding: 0 10px;
     height: 39px;
-
     font-size: 14px;
     line-height: 40px;
     color: $--color-text-primary;
     transition: all 0.2s;
-
     &:hover {
       background-color: $--chart-title-hover-background-color;
-
       .chart-header__tools {
         .chart-header__tool .tool__icon {
           visibility: visible;
@@ -105,20 +111,19 @@
     width: 100%;
     box-sizing: border-box;
     margin-top: 15px;
-    &.chart-header--float {
+    // &.chart-header--float {
-      position: absolute;
+    //   position: absolute;
-      width: 100%;
+    //   width: 100%;
-      z-index: 100;
+    //   z-index: 500;
-      box-sizing: border-box;
+    //   box-sizing: border-box;
-      height: 10px;
+    //   height: 10px;
-      opacity: 0;
+    //   opacity: 0;
-      transition: all linear .2s;
+    //   transition: all linear .3s;
-
+    //   &:hover {
-      &:hover {
+    //     height: 39px;
-        height: 39px;
+    //     opacity: 1;
-        opacity: 1;
+    //   }
-      }
+    // }
-    }
     .chart-header__title {
       max-width: calc(100% - 100px);
       text-overflow: ellipsis;

nezha-fronted/src/components/chart/ChartScreenHeader.vue

@@ -1,5 +1,6 @@
 <template>
-  <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header list-page">
+  <!-- <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header list-page"> -->
+  <div class="chart-screen-header list-page">
     <span v-if="isError" class="chart-header-error">
      <el-popover
        placement="top-start"

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

@@ -1,6 +1,7 @@
 
  <template>
-  <div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" >
+  <!-- <div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" > -->
+  <div class="nz-chart" :class="chartInfo.param.showHeader===0 ? '' : 'no-header'">
     <loading :loading="loading"></loading>
     <chart-no-data  v-if="isNoData || isError || chartChildrenData || (isExportHtml&&(isAutotopology(chartInfo.type) || isDiagram(chartInfo.type) || isMap(chartInfo.type)))"></chart-no-data>
     <template v-else>

nezha-fronted/src/components/chart/chart/chartTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nz-table2" style="height: 100%;padding: 0 10px 10px 10px;box-sizing: border-box">
+  <div class="nz-table2" style="height: 100%;padding: 10px;box-sizing: border-box">
     <el-table
       ref="dataTable"
       class="chart-table"

nezha-fronted/src/components/chart/chartHeader.vue

@@ -1,5 +1,6 @@
 <template>
-  <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header">
+  <!-- <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header"> -->
+  <div :class="{'chart-header--float': chartInfo.param.showHeader===0}" class="chart-header">
     <span v-if="isError" class="chart-header-error">
      <el-popover
        placement="top-start"

nezha-fronted/src/components/chart/chartList.vue

@@ -468,7 +468,7 @@ export default {
             //   console.info(e)
             // }
             height = (item.type === 'group' && item.param.collapse) ? this.headerH : item.height
-            param.showHeader = true
+            // param.showHeader = true
             if (param.valueMapping) {
               param.valueMapping.forEach(valueMapping => {
                 if (!valueMapping.show) {

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -209,7 +209,7 @@ export default {
 
     switchHeader (value) {
       // 1为显示 0为隐藏
-      this.editChart.param.showHeader = value
+      this.$set(this.editChart.param, 'showHeader', value)
     },
 
     clickOutside () {
@@ -373,7 +373,7 @@ export default {
               valueMapping: false
             },
             thresholds: [{ value: undefined, color: '#eeeeeeff' }],
-            showHeader: 1
+            showHeader: this.editChart.param.showHeader
           }
         }
       }
@@ -392,7 +392,7 @@ export default {
           elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
           param: {
             limit: 100,
-            showHeader: 1
+            showHeader: this.editChart.param.showHeader
           }
         }
       }
@@ -428,7 +428,7 @@ export default {
             }
             ],
             valueMapping: [],
-            showHeader: 1
+            showHeader: this.editChart.param.showHeader
           }
         }
         delete this.editChart.elements
@@ -446,7 +446,7 @@ export default {
           },
           param: {
             url: '',
-            showHeader: 1
+            showHeader: this.editChart.param.showHeader
           }
         }
         delete this.editChart.elements