feat: endpoint-query 增加save chart功能

1.endpoint-query 增加save chart功能

nezha-fronted/src/assets/stylus/main.scss

@@ -730,6 +730,9 @@ li{
   position: absolute;
   right: 0;
 }
+.config-dropdown, .chart-box-dropdown {
+  z-index: 2950 !important;
+}
 .config-dropdown-btn i {
   font-size: 12px;
 }

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

@@ -375,7 +375,6 @@ export default {
     editData(chartId) {
       // 获取该id下chart的相关信息
       const chart = this.dataList.find(item => item.id === chartId);
-      console.info("aaa",chart)
       if (chart) {
         this.$emit('on-edit-chart', chart);
       }

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

@@ -48,7 +48,7 @@
   }
 
   .z-top {
-    z-index: 49;
+    z-index: 2900;
   }
 </style>
 <template key="chartBox">
@@ -105,7 +105,7 @@
             <el-col :span="5">
               <div class="grid-content ">
                   <el-form-item prop="type">
-                    <el-select class="right-box-row-with-btn" value-key="chartType" popper-class="" v-model="chart.type" placeholder="" size="mini">
+                    <el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown" v-model="chart.type" placeholder="" size="mini">
                       <el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
                         <span class="panel-dropdown-label-txt" >{{item.name}}</span>
                       </el-option>
@@ -119,7 +119,7 @@
             <el-col :span="5">
               <div class="grid-content ">
                 <el-form-item prop="span">
-                  <el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="" v-model="chart.span" placeholder="" size="mini">
+                  <el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="chart-box-dropdown" v-model="chart.span" placeholder="" size="mini">
                     <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>
@@ -555,16 +555,35 @@
       },
       // 创建打开
       createData(panelId, elementInfo) {
+        //console.info('bbb', elementInfo)
         if (panelId == -1) {
           this.panelId = this.panelData[0].id;
         } else {
           this.panelId = panelId;
         }
         if (elementInfo) {
+          if (elementInfo.elements.length > 1) {
+
+            this.$nextTick(() => {
+              this.elements = [];
+              elementInfo.elements.forEach((item, index) => {
+                this.elements.push(index);
+              });
+              let dSet = this.$refs.chartTag;
+              this.$nextTick(() => {
+                dSet.forEach((item, index) => {
+                  console.info('bbb', elementInfo.elements[index])
+                  item.setMdata(elementInfo.elements[index]);
+                });
+              });
+            });
+
+          } else {
             this.$nextTick(() => {
               this.$refs.chartTag[0].setMdata(elementInfo.elements[0]);
             });
           }
+        }
         this.isedit = false;
         this.initInfo(); // 初始化图表信息
         //this.chartModal = true;//????控制弹出框显示和隐藏的，不需要了

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

@@ -347,7 +347,7 @@ export default {
 
     // 编辑已有图表状态时，先填充数据
     setMdata(data) {
-      //console.info('metricSetData', JSON.stringify(data));
+      console.info('metricSetData', JSON.stringify(data));
       this.setDataFlag = true;
       this.target = Object.assign({}, data);
       //this.pointer =

nezha-fronted/src/components/page/project/project.vue

@@ -7,7 +7,11 @@
   .project .nz-table .el-table__row td:first-of-type {
     padding-left: 0;
   }
-
+</style>
+<style scope>
+  .chart-bottom {
+    text-align: center;
+  }
 </style>
 <template>
   <div class="project">
@@ -202,11 +206,6 @@
       </el-table>
     </div>
 
-
-    <module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
-    <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
-    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
-    <asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
     <element-set
       v-clickoutside="elementsetHide"
       :table-title="endpointTableTitle"
@@ -239,14 +238,28 @@
         </div>
       </div>
       <div class="line-area " ref="viewGraphChart"  id="viewGraphChart"></div>
+      <div class="line-100 margin-t-20 margin-b-30"></div>
+      <div class="chart-bottom">
+        <button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
+      </div>
     </el-dialog>
+
+    <module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
+    <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
+    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
+    <asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
+    <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess"></chart-box>
   </div>
 </template>
 
 <script>
   import echarts from 'echarts';
+  import chartBox from "../dashboard/chartBox";
   export default {
     name: "project2",
+    components: {
+      'chart-box': chartBox
+    },
     data() {
       let temp=this;
       return {
@@ -578,10 +591,45 @@
           },
           useUTC: false,//使用本地时间
           series: []
-        }
+        },
+        panelData: [], //chart-box的panel下拉框数据
       }
     },
     methods: {
+      saveChart() { //新增chart
+        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
+        this.$refs.addChartModal.show(true);
+        let metricInfo = {};
+        metricInfo.elements = [];
+        console.info("aaa", this.selectedEndpoints)
+        for(let i = 0; i < this.selectedEndpoints.length; i++) {
+          let type = '';
+          if (this.selectedEndpoints[i].type == '1') {
+            type = 'expert';
+          } else if (this.selectedEndpoints[i].type == '2') {
+            type = 'normal';
+          }
+          metricInfo.elements.push({expression: this.selectedEndpoints[i].element, type: type});
+        }
+        this.$refs.addChartModal.createData(-1, metricInfo);
+      },
+      createSuccess(type, response, param, panel) {
+        this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'success'
+        }).then(() => {
+          //this.$store.state.assetData.moduleData = 'panel';
+          this.$store.state.showPanel.id = panel.id;
+          this.$store.state.showPanel.name = panel.name;
+          this.$router.push({
+            path: "/panel",
+            query: {
+              t: +new Date()
+            }
+          });
+        });
+      },
       elementsetShow(s, e) {
         var eventfixed = {
           shezhi: 0,
@@ -857,7 +905,7 @@
                 }
                 temp=temp.charAt(temp.length-1) == ","?temp.substr(0,temp.length-1):temp;
                 temp+="}";
-                let edpQueryData={element:temp,value:result.value[1]}
+                let edpQueryData={element:temp,value:result.value[1],type:(result.metric.type?result.metric.type:'2')};
                 this.endpointQueryTabData.push(edpQueryData);
               }
               this.tableShow=3;
@@ -1015,6 +1063,13 @@
           return 'disabledCheck'
         }
       },
+      getPanelData() { //获取panel数据
+        this.$get('panel?pageNo=1&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.panelData = response.data.list;
+          }
+        });
+      },
     },
     created() {
       this.currentProject = this.$store.state.currentProject;
@@ -1022,6 +1077,7 @@
       this.getMetricsTableData();
     },
     mounted() {
+      this.getPanelData();
       setTimeout(()=>{
         this.getEndpointTableData();
       }, 200);