feat:新增功能

1.图表预览国际化
2.图表预览多图展示的创建面板和选择已有面板
3.图表预览创建或者选择面板保存成功后跳转到panel界面
（说明：曲线图tip信息显示还未调整及legend滚动条显示还未实现）

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

@@ -90,7 +90,7 @@ export default {
           }else {
             this.dataList = response.data;
           }
-          if (this.dataList.length > 0) {
+          if (this.dataList.length > 0 && this.$refs.editChart) {
             this.$refs.editChart.forEach((item) => {
               item.showLoad();//之后要实现
             });

nezha-fronted/src/components/charts/line-chart-block.scss

@@ -93,4 +93,7 @@
     border-bottom: 1px solid #dfe7f2;
     margin-bottom:-20px;
   }
+  .pt10{
+    padding-top:10px;
+  }
 }

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -31,7 +31,7 @@
       :before-close="handleClose"
        @opened="initDialog">
      <el-row class="element-top-border" >
-        <div class="float-right" style="padding-top:10px;">
+        <div class="float-right pt10" >
             <el-date-picker size="small" ref="calendar"
                             format="yyyy/MM/dd HH:mm"
                             @change="dateChange"
@@ -242,7 +242,8 @@ export default {
         ],
         tooltip: {
           trigger: 'axis',
-          confine:true
+          confine:true,
+          //formatter:"{a}<br/>"+"<div style='display:block;word-break:break-all;word-wrap:break-word;white-space:pre-wrap'>"+"{b}"+"</div>"+"<br/>{c}",
         },
         legend: {
           type:'scroll',
@@ -371,9 +372,6 @@ export default {
                 return `${parseFloat(kbNum.toFixed(2))}K`;
               }
               return parseFloat(num.toFixed(2));
-              //alert(1);
-              //return value;
-              //return this.getNumStr(value);
             },
           },
           //boundaryGap:[0,0.2]

nezha-fronted/src/components/common/language/cn.js

@@ -89,7 +89,14 @@ const cn = {
       expert:"Expert",
       label:"指标标签",
       addMetric:"添加指标",
-      expertTip:"请输入表达式"
+      expertTip:"请输入表达式",
+      goPanelTip:"是否前去看板,查看创建的图表？",
+      previewChart:"预览图表",
+      singleChartShow:"单图展示",
+      multiChartsShow:"多图展示",
+      createPanel:"创建面板",
+      selectPanel:"选择已有面板",
+      saveChartToPanel:"保存图表到看板"
     },
     metricPreview:{
       title:'指标预览',

nezha-fronted/src/components/common/language/en.js

@@ -98,11 +98,17 @@ const en = {
       expert:"Expert",
       label:"MetricLabel",
       addMetric:"Create Metric",
-      expertTip:"Please enter an expression"
+      expertTip:"Please enter an expression",
-
+      goPanelTip:"Go to the panel to view the created chart ?",
+      previewChart:"Preview Chart",
+      singleChartShow:"Single Graph Display",
+      multiChartsShow:"Multi Graph Display",
+      createPanel:"Create Panel",
+      selectPanel:"Select Panel",
+      saveChartToPanel:"Save Chart To Panel"
     },
     metricPreview:{
-      title:'MetricPreview',
+      title:'Metric Preview',
     },
     refresh:'refresh',
     edit:'edit',

nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue

@@ -54,13 +54,16 @@
 </template>
 <script>
   import bus from '../../../libs/bus';
+  import axios from 'axios';
+
   export default {
     name: "metricPrePanelBox",
     props: {
       chartInfo: Object,
       elementTarget:Object,
       seriesData:Object,
-      chartCount:Object
+      chartCount:Object,
+      series:Object
     },
     data() {
       return {
@@ -116,37 +119,30 @@
           // 多图模式
           if (this.chartCount === 'multiple') {
             this.createChartList = [];
-            //alert(JSON.stringify(this.seriesData));
             this.seriesData.forEach((queryItem) => {
               const soleParam = Object.assign({}, params);
               const elements = [];
-
+              // 图表中每条线的名字,后半部分
-              let tagStr = ''; // tag字符串
+              let host = `${queryItem.metric.__name__}`;//up,
-              let host = `${queryItem.metric}, `; // 名称
+              const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-              const tagsArr = Object.keys(queryItem.tags);
+              // 判断是否有数据
-              // 根据图表展示时获取的tag进行组装名称以及tag字符串
+              if (queryItem.values.length > 0 && tagsArr.length > 0) {
-              tagsArr.forEach((tag) => {
+                host +="{";
-                if (tag !== 'uuid') {
+                tagsArr.forEach((tag, i) => {
-                  host += `${tag}=${queryItem.tags[tag]}, `;
+                  if (tag !== '__name__') {
-                  if (tagStr) {
+                    host += `${tag}="${queryItem.metric[tag]}",`;
-                    tagStr += `,${tag}=${queryItem.tags[tag]}`;
-                  } else {
-                    tagStr += `${tag}=${queryItem.tags[tag]}`;
                   }
-                }
+                });
-              });
+                if(host.endsWith(',')){host = host.substr(0,host.length-1);}
-              // 图表中每条线的名字,去掉最后的逗号与空格
+                host +="}";
-              host = host.substring(0, host.length - 2);
+              }
               soleParam.title = host;
-
               elements.push({
-                expression: this.elementTarget.metric,
+                expression: host,
                 type: this.elementTarget.type,
               });
               soleParam.elements = elements;
-              //if (valid) {
+              this.addMultipleChart(soleParam);
-                this.addMultipleChart(soleParam);
-              //}
             });
           } else if (this.chartCount === 'single') {
             params.title = this.chartSaveInfo.title;
@@ -174,44 +170,96 @@
       addCharts(params) {
         this.$post('panel/'+this.panelId+'/charts', params).then(response => {
           if (response.code === 200) {
-            this.elementTarget = {};
+            let panelId= this.panelId;
-            //this.saveDisabled = true; // 创建成功后,不能再次创建??
-            this.$emit('reload');
             this.esc();
             this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-            /*
+            this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
-            this.$confirm(this.$t("tip.confirmDelete"), {
               confirmButtonText: this.$t("tip.yes"),
               cancelButtonText: this.$t("tip.no"),
-              type: 'warning'
+              type: 'success'
             }).then(() => {
-
+              //this.$store.state.assetData.moduleData = 'panel';
+              this.$store.state.showPanel.id = panelId;
+              this.$store.state.showPanel.name = this.panelItem.name;
+              this.$router.push({
+                path: "/panel",
+                query: {
+                  t: +new Date()
+                }
+              });
             });
-            */
+            this.$emit('reload');
-            /*
-            this.$Modal.confirm({
-              title: '创建成功',
-              content: `是否前去看板：${this.panelItem.name}，查看创建的图表`,
-              onOk: () => {
-                this.$router.push({
-                  path: `/console/panel/detail/${this.panelId}/${this.productId}`,
-                  query: {
-                    product: this.$route.query.product,
-                    panel: this.panelItem.name,
-                  },
-                });
-              },
-              onCancel: () => {
-                this.cancel();
-              },
-            });
-            */
           } else {
             this.$message.error(response.msg);
           }
         });
       },
 
+      // 创建多个图表
+      addMultipleChart(params) {
+        this.createChartList.push(params);
+        if (this.seriesData.length === this.createChartList.length) {
+          this.$nextTick(() => {
+            const api = [];
+            this.createChartList.forEach((item) => {
+              api.push(this.$post('panel/'+this.panelId+'/charts', item));
+            });
+            axios.all(api).then((res) => {
+              let successFlag = true;
+              res.forEach((item) => {
+                if (item.code !== 200) {
+                  successFlag = false;
+                }
+              });
+              if (successFlag) {
+                //this.saveDisabled = true; // 创建成功后,不能再次创建
+                let panelId=this.panelId;
+                this.createChartList = [];
+                this.esc();
+
+                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                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 = panelId;
+                  this.$store.state.showPanel.name = this.panelItem.name;
+                  this.$router.push({
+                    path: "/panel",
+                    query: {
+                      t: +new Date()
+                    }
+                  });
+                });
+                //this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                //this.elementTarget = {};
+               /*
+                this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {
+                  confirmButtonText: this.$t("tip.yes"),
+                  cancelButtonText: this.$t("tip.no"),
+                  type: 'info'
+                }).then(() => {
+                  alert('multi-ok');
+                  /*
+                  this.$router.push({
+                      path: `/console/panel/detail/${this.panelId}/${this.productId}`,
+                      query: {
+                        panel: this.panelItem.name,
+                      },
+                  });
+    */
+                //});
+                this.$emit('reload');
+              } else {
+                this.$message.error(response.msg);
+              }
+            });
+        });
+        }
+      },
+
       save: function() {
         this.$refs.chartSaveInfo.validate((flag) => {
           if (flag) { // 再判断弹出窗口内内容是否正确
@@ -222,9 +270,6 @@
                   this.panelId = response.data.panel.id;
                   this.panelItem = response.data.panel;
                   this.getOptions();
-                  //this.esc();
-                  //this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  //this.$emit("reload");----询问是否去查看
                 } else {
                   this.$message.error(response.msg);
                 }
@@ -246,7 +291,9 @@
           this.$refs.chartSaveInfo.resetFields();
         }
         if (this.$refs.panelSelect) {
-          this.$refs.panelSelect.reset();
+          this.chartSaveInfo.panelId='';
+          this.panelId=0;
+         // this.$refs.panelSelect..reset();
         }
       },
       getTableData: function() {

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

@@ -14,7 +14,7 @@
 
 
           <div class="top-tools" >
-              <div class="float-left metric-title"  >指标预览
+              <div class="float-left metric-title"  >{{$t('dashboard.metricPreview.title')}}
               </div>
               <div class="float-right mr-10">
                 <el-date-picker size="small" ref="calendar"
@@ -179,8 +179,10 @@ export default {
   },
   methods: {
     jumpTo(data,id) {
-      this.$store.state.assetData.moduleData = data;
+      //this.$store.state.assetData.moduleData = data;
-      this.$store.state.assetData.selectedData = id;
+      //this.$store.state.assetData.selectedData = id;
+      this.$store.state.showPanel.id = 0;
+      this.$store.state.showPanel.name = '';
       this.$router.push({
         path: "/" + data,
         query: {
@@ -280,13 +282,14 @@ export default {
           metric_name: '',
         };
         // 图表中每条线的名字,后半部分
-        let host = `${queryItem.metric.__name__}{`;//up,
+        let host = `${queryItem.metric.__name__}`;//up,
         const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
         // 设置时间-数据格式对
         const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
         // 判断是否有数据
         if (dpsArr.length > 0 && tagsArr.length > 0) {
-          tagsArr.forEach((tag, i) => {
+            host +="{";
+            tagsArr.forEach((tag, i) => {
             if (tag !== '__name__') {
               host += `${tag}="${queryItem.metric[tag]}",`;
             }
@@ -312,7 +315,7 @@ export default {
         }
       });
       // 将获取的数据运用于创建多个图表备用
-      this.$refs.metricSet.setSeries(response.data.result.values);//???
+      this.$refs.metricSet.setSeries(response.data.result,series);
       if (this.chartCount === 'single') {
         this.setSize(chartItem.span, 0);
         const filterParams = Object.assign({}, this.filter);

nezha-fronted/src/components/page/dashboard/metricSet.scss

@@ -51,6 +51,9 @@
   .nx-btn-disabled{
     cursor:not-allowed;
   }
+  .w-select{
+    width:130px;
+  }
 }
 
 // .setdata {

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

@@ -12,20 +12,20 @@
           ></chart-metric>
       </el-row>
       <el-row class="pt-5 pb-5">
-        <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal ">预览图表</button>
+        <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal ">{{$t('dashboard.metric.previewChart')}}</button>
         <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')"
                 :class="{'nz-btn nx-btn-disabled' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !(saveDisabled || loading)}"
         >{{chartSwitchWord}}</button>
         <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
       </el-row>
       <el-row class="operate-area">
-        <div class="operate-area-title">保存图表到看板:</div>
+        <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div>
         <button :disabled="saveDisabled" type="primary" @click="createNew"
                 :class="{'nz-btn nx-btn-disabled' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
-        >创建看板</button>
+        >{{$t('dashboard.metric.createPanel')}}</button>
         <button :disabled="saveDisabled" type="primary" @click="selectPanel"
                 :class="{'nz-btn nx-btn-disabled' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
-        >选择已有看板</button>
+        >{{$t('dashboard.metric.selectPanel')}}</button>
       </el-row>
       <el-row class="mt-10">
         <el-checkbox :disabled="saveDisabled" v-model="isSave">options</el-checkbox>
@@ -33,9 +33,9 @@
       <el-form :model="chartInfo" ref="chartInfo" v-show="isSave">
         <el-row>
           <div class="common-float-left">
-            <el-form-item :label-width="80" label="图宽" prop="span"
+            <el-form-item :label-width="80" :label="$t('dashboard.panel.chartForm.width')" prop="span"
-            :rules="{ required: true, type: 'number', message: '请选择图表宽度', trigger: 'change' }">
+            :rules="{ required: true, type: 'number', trigger: 'change' }">
-              <el-select style="width:130px;" size="small" v-model="chartInfo.span" transfer>
+              <el-select class="w-select" size="small" v-model="chartInfo.span" transfer>
                 <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
                   span-{{item}}
                 </el-option>
@@ -43,17 +43,17 @@
             </el-form-item>
           </div>
           <div class="common-float-left">
-            <el-form-item :label-width="80" label="图高" prop="height"
+            <el-form-item :label-width="80" :label="$t('dashboard.panel.chartForm.high')" prop="height"
-            :rules="{ required: true, type: 'number', message: '请输入图表高度', trigger: 'change' }">
+            :rules="{ required: true, type: 'number', trigger: 'change' }">
-              <el-input-number :min="400" size="small" v-model="chartInfo.height" style="width: 130px" placeholder="请输入图表高度"></el-input-number>px
+              <el-input-number :min="400" size="small" v-model="chartInfo.height" class="w-select" placeholder=""></el-input-number>px
             </el-form-item>
           </div>
         </el-row>
         <el-row>
           <div class="common-float-left">
-            <el-form-item :label-width="80" label="类型" prop="type"
+            <el-form-item :label-width="80" :label="$t('dashboard.panel.chartForm.type')" prop="type"
-              :rules="{ required: true,  message: '请选择图表类型', trigger: 'change' }">
+              :rules="{ required: true,   trigger: 'change' }">
-              <el-select transfer style="width:130px;" v-model="chartInfo.type" size="small">
+              <el-select transfer class="w-select" v-model="chartInfo.type" size="small">
                 <el-option v-for="item in typeList"
                   :key="item.id" 
                   :label="item.name" 
@@ -66,7 +66,7 @@
         </el-row>
       </el-form>
     </div>
-    <metric-pre-panel-box :chartInfo="chartInfo"  :elementTarget="elementTarget" :seriesData="seriesData" :chartCount="chartCount" @reload="reload"  ref="panelBox"></metric-pre-panel-box>
+    <metric-pre-panel-box :chartInfo="chartInfo"  :elementTarget="elementTarget" :seriesData="seriesData" :series="series" :chartCount="chartCount" @reload="reload"  ref="panelBox"></metric-pre-panel-box>
 
   </div>
 </template>
@@ -130,20 +130,22 @@ export default {
       metricInfo: {}, // 保存从chartTag中获取的seriesData
       createChartList: [], // 创建多个图表的图表信息
       seriesData: [], // 查询图表后生成的series信息,用于生成多个图表时提供图表title
+      series:[],//组织好的数据
       panelItem: {}, // 保存看板信息
     };
   },
   computed: {
     chartSwitchWord() {
-      const word = this.chartCount === 'single' ? '多图展示' : '单图展示';
+      const word = this.chartCount === 'single' ? this.$t('dashboard.metric.multiChartsShow'): this.$t('dashboard.metric.singleChartShow');
       return word;
     },
   },
   watch: {},
   methods: {
     // 父级调用保存series,作为多个图表生成title
-    setSeries(data) {
+    setSeries(data,series) {
       this.seriesData = data;
+      this.series = series;
     },
     // 默认打开
     initOpen() {
@@ -156,6 +158,8 @@ export default {
     reload(){
       this.saveDisabled = true;
       this.elementTarget = {};
+
+
     },
     // 创建看板
     createNew() {

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

@@ -451,8 +451,8 @@
       /*时间条件查询--end*/
       //公用操作
       jumpTo(data,id) {
-        this.$store.state.assetData.moduleData = data
+        //this.$store.state.assetData.moduleData = data
-        this.$store.state.assetData.selectedData = id
+        //this.$store.state.assetData.selectedData = id
         this.$router.push({
           path: "/" + data,
           query: {
@@ -465,6 +465,10 @@
           if (response.code === 200) {
             this.panelData = response.data.list;
             if( response.data.list.length>0 ){
+              if(this.$store.state.showPanel.id!==0&&this.$store.state.showPanel.name!==''){
+                this.showPanel.name = this.$store.state.showPanel.name;
+                this.showPanel.id = this.$store.state.showPanel.id;
+              }
               if(this.showPanel.id===''){
                 this.showPanel.id = response.data.list[0].id;
                 this.filter.panelId = this.showPanel.id;
@@ -475,10 +479,12 @@
               this.showPanel.id ='';
               this.filter.panelId='';
             }
-            this.pageObj.total = response.data.total
+            this.pageObj.total = response.data.total;
             if(this.panel.id===''||this.panel.id===this.showPanel.id){
               this.getData(this.filter);
             }
+            this.$store.state.showPanel.id = 0;
+            this.$store.state.showPanel.name = '';
           }
         })
       },

nezha-fronted/src/store/index.js

@@ -30,6 +30,10 @@ const store = new Vuex.Store({
       event_positiony: 0,
       event_positionx: -200
     },
+    showPanel:{
+      id:0,
+      name:''
+    }
   },
   getters: {
   },