perf:explore unit选择功能补充

nezha-fronted/src/components/common/chartUnit.vue

@@ -1,13 +1,17 @@
 <template>
-    <el-cascader filterable placeholder="" popper-class="no-style-class unit-pop-class" size="mini"
+    <div style="display: flex;justify-content: flex-start">
-                 :options="chartUnits"
+      <button class="input-prepend nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="openSeletor">{{$t('dashboard.panel.chartForm.unit')}}</button>
-                 class="chart-unit"
+      <el-cascader filterable placeholder="" popper-class="no-style-class unit-pop-class" size="mini"
-                 :props="{ expandTrigger: 'click' ,emitPath:false}"
+                   :options="chartUnits"
-                 :show-all-levels="false"
+                   class="chart-unit"
-                 v-model="unit"
+                   :props="{ expandTrigger: 'click' ,emitPath:false}"
-                 @change="unitSelected"
+                   :show-all-levels="false"
-    >
+                   v-model="unit"
-    </el-cascader>
+                   @change="unitSelected"
+                   ref="unitSelector"
+      >
+      </el-cascader>
+    </div>
 </template>
 
 <script>
@@ -36,6 +40,9 @@
         this.unit=value;
         this.$emit('change',this.unit);
       },
+      openSeletor:function(){
+        this.$refs.unitSelector.toggleDropDownVisible(!this.$refs.unitSelector.dropDownVisible);
+      }
     }
   }
 </script>
@@ -49,4 +56,11 @@
     height: 200px;
     background-color: #FFF;
   }
+  .input-prepend{
+    height: 26px;
+    margin-top: 1px;
+    padding:0 5px !important;
+    border-bottom-right-radius: 0px !important;
+    border-top-right-radius: 0px !important;
+  }
 </style>

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

@@ -134,7 +134,7 @@
               <el-col v-show="!isUrl" :span="10">
                 <el-cascader filterable placeholder="" popper-class="dc-dropdown" size="mini"
                              :options="unitOptions"
-                             :props="{ expandTrigger: 'hover' }"
+                             :props="{ expandTrigger: 'hover',emitPath:false }"
                              :show-all-levels="false"
                              v-model="chart.unit"
                              @change="unitSelected"
@@ -378,6 +378,9 @@
       setTitle(title) {
         this.rightBox.title = title;
       },
+      setUnit:function(unit){
+        this.$set(this.chart,'unit',Number.parseInt(unit))
+      },
       save() {
         this.$refs['chartForm'].validate((valid) => {
           if (valid) {

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

@@ -200,6 +200,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
   import axios from 'axios';
   import chartBox from "../../../page/dashboard/chartBox";
   import {getUUID} from "../../../common/js/common";
+  import chartDataFormat from "../../../charts/chartDataFormat";
 
   export default {
     name: "explore",
@@ -256,7 +257,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
       chartUnitChange:function(unit){
         this.chartUnit=unit;
         this.$nextTick(()=>{
-          this.queryChartData();
+          this.expressionChange()
         })
       },
       queryChartData: function () {
@@ -296,7 +297,6 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                       seriesItem.data = result.values.map((item) => {
                         return [item[0] * 1000, item[1]];
                       })
-                      console.log(result)
                       if(result.metric&&Object.keys(result.metric).length>0){
                         let metric = Object.assign({}, result.metric);
                         seriesItem.name += metric.__name__ + '{';
@@ -358,7 +358,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                       if (data) {
                         data.forEach((result, i) => {
                           let metrics = Object.assign({}, result.metric);
-                          this.$set(metrics, 'value#' + index, result.value[1]);
+                          this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnit).compute(result.value[1],null,2));
                           for (let key in metrics) {
                             let label = {
                               label: key == '__name__' ? 'metric' : key,
@@ -380,7 +380,6 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                       return a.prop.charCodeAt(0) - b.prop.charCodeAt(0);
                     })
                   })
-                  console.log(tData.length)
                   if(tData.length>0){
                     this.storedTableData = Object.assign([], tData);
                     this.pageObj.total = this.storedTableData.length;
@@ -410,9 +409,6 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         this.promqlCount++;
       },
       removeExpression: function (index) {
-        console.log(this.expressions)
-        console.log(this.promqlKeys)
-        console.log(this.promqlCount)
         if (this.promqlCount > 1) {
           this.expressions.splice(index, 1);
           this.promqlKeys.splice(index, 1);
@@ -439,6 +435,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
           }
         }
         this.$refs.addChartModal.createData(-1, metricInfo);
+        this.$refs.addChartModal.setUnit(this.chartUnit)
       },
       createSuccess(type, response, param, panel) { //添加chart成功
         this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {