feat:新功能

1.dashboard模块：图表新增编辑界面增加预览功能（基本功能完成，有待详细测试）

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

@@ -1188,7 +1188,7 @@ li{
   border-top: 1px solid #ccc;
   text-align: center;
 }
-.right-box-bottom-btns :nth-child(2) {
+.right-box-bottom-btns :not(:first-child){
   margin-left: 40px;
 }
 /* end--右侧弹框--底部按钮*/

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

@@ -12,38 +12,34 @@
     width: calc(100% - 14px);
     overflow-x:hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
   }
-  .dragChartClass{
+  .drag-chart-class{
-    cursor:move;/*
+    cursor:move !important;
+    /*
     border:solid 2px yellow;
     color:yellow;
-    background-color:yellow;
+    background-color:yellow !important;
-    opacity:1;*/
+    */
     /*background-color:red;
     opacity:1*/
   }
-  .chooseClass{
+  .choose-class{
-    cursor:move;/*
+    cursor:move;
-    border:solid 2px purple;
+   /* border:solid 2px purple;
     color:purple;
     background-color:purple;*/
   }
-  .chosenClass .chartTitle{/*
+  .chosen-class .chartTitle{
-    color:orange;
-    border:solid 2px orange;*/
   }
   .fallback-class{
     cursor:move;
     /*background-color:green;
     cursor:pointer;*/
   }
-  .chart-ghost-class{
+  .chart-ghost {
-    /*opacity:1*/
+    /*
-  }
-  .ghost {/*
     opacity: 1;
     border:solid 2px green;
-    color:green;
+    */
-    background-color:green;*/
   }
 
 </style>
@@ -55,22 +51,41 @@
          @dragstart="handleDragStart($event, item)"
          @dragover.prevent="handleDragOver($event, item)"
          @dragenter="handleDragEnter($event, item)"
-         @dragend="handleDragEnd($event, item)"    ,ghostClass:''  {scroll:true,forceFallback:true,animation:600,handle:'.drag-icon'
+         @dragend="handleDragEnd($event, item)"
--->
+ @mousedown="dragPosition($event,item)"
-    <draggable v-model="dataList" @chang="change" @start="start" @end="end" :move="move"
+    <draggable v-model="dataList" @chang="change" @start="start" @end="end" :move="move" @choose="choose"
+               @add="add" @clone="clone" @update="update" @remove="remove" @sort="sort"
                :scroll-sensitivity="150"
                :options="{
-                 dragClass:'dragChartClass',
+                 group:{name:'chartGroup',pull:'false'},
+                 dragClass:'drag-chart-class',
                  fallbackClass:'fallback-class',
                  forceFallback:true,
-                 ghostClass:'ghost',
+                 ghostClass:'chart-ghost',
-                 chosenClass:'chooseClass',
+                 chosenClass:'choose-class',
+                 scroll:true,
+                 scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
+                 animation:150,
+                 handle:'.chartTitle',
+               }"  >@clone="clone"
+     -->
+    <draggable v-model="dataList" @chang="change" @start="start" @end="end" :move="move" @choose="choose"
+               @add="add"  @update="update" @remove="remove" @sort="sort"
+               :scroll-sensitivity="150"
+               :options="{
+                 group:{name:'chartGroup',pull:'false'},
+                 dragClass:'drag-chart-class',
+                 fallbackClass:'fallback-class',
+                 forceFallback:true,
+                 ghostClass:'chart-ghost',
+                 chosenClass:'choose-class',
                  scroll:true,
                  scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
                  animation:150,
                  handle:'.chartTitle',
                }"  >
-      <div class="chartBox" v-for="(item, index) in dataList"    :key="item.id" :id="item.title+'_'+item.id"   style="border:solid 0px red;" @dragstart="">
+      <div class="chartBox" v-for="(item, index) in dataList"    :key="item.id" :id="item.title+'_'+item.id"
+          >
         <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
         ref="editChart"
         @on-refresh-data="refreshChart"
@@ -91,7 +106,7 @@
         :chart-index="index"
         :editChartId="'editChartId' + item.id"></chart-table>
       </div>
-    </draggable>
+   </draggable>
     <el-row v-if="dataList.length === 0"  class="noData"></el-row>
   </div>
 </template>
@@ -143,11 +158,36 @@ export default {
       chartTitle.style.background = '#d8dce1';
       console.log('start-title',chartTitle);
       //this.dataListDragTmp = [...this.dataList];
+      let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
+      console.log('start---class', dragClass);
+      //dragClass.style.opacity = 1;
+      //dragClass.style.pointerEvents = 'auto';
+/*
+      let canvas = item.querySelector('canvas');
+      console.log('start-canvas',canvas);
+      let canvasclone = event.clone.querySelector('canvas');
+      console.log('start-canvas-style',canvasclone.style);
+      canvasclone.style.border='solid 2px green !importmant';
+      console.log('start-canvas-style2',canvasclone.style);
+      if(canvas&&canvasclone) {
+        let ctx = canvas.getContext("2d");
+        let image = new Image();
+        image.src = canvas.toDataURL();
+        //var a = document.createElement("a");
+        //a.href=canvas.toDataURL();
+        //a.download="drcQrcode";
+        //a.click();
+        console.log('clone-image', image)
+        let ctxClone = canvasclone.getContext("2d");
+        image.onload = function () {
+          console.log('clone-image-load', image)
+          //ctxClone.drawImage(image, 0, 0);
+        }
+      }
+      */
     },
     end (event) {
       let item = event.item;
-      let chartTitle = item.querySelector('.chartTitle');
-      chartTitle.style.background = '';
       console.log('end', event, this.dataList);
       /*
       let len = this.dataListDragTmp.length;
@@ -187,8 +227,10 @@ export default {
 */
       let newIndex = event.newIndex;
       let newItem = this.dataList[newIndex];
-
+      if(this.dataList.length===1){
-      if(newIndex===0){//挪动之后为第一个元素
+        newItem.prev = 0;
+        newItem.next = -1;
+      }else if(newIndex===0){//挪动之后为第一个元素
         let newNextItem = this.dataList[newIndex+1];
         newItem.prev = 0;
         newItem.next = newNextItem.id;
@@ -223,11 +265,112 @@ export default {
           }
         }
       });
+
+      let chartTitle = item.querySelector('.chartTitle');
+      chartTitle.style.background = '';
     },
     move (event, orgin) {
-      console.log('move', event, orgin)
+      console.log('move', event, orgin);
+      let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
+      console.log('move---class', dragClass);
+      //dragClass.style.opacity = 1;
+      //dragClass.style.pointerEvents = 'auto';//设置此属性，end事件里newIndex为 列表长度
+
+      let chartTitle = dragClass.querySelector('.chartTitle');
+      console.log('move-title',chartTitle);
+      chartTitle.style.background = '#d8dce1';
+
+    },
+    choose(event ){
+      console.log('choose', event);
+      let chartTitle = event.item.querySelector('.chartTitle');
+      console.log('choose-title',chartTitle);
+      chartTitle.style.background = '#d8dce1';
+    },
+    clone(event){
+      console.log('clone',event );
+      let canvas = event.item.querySelector('canvas');
+      console.log('clone-canvas',canvas);
+      let canvasclone = event.clone.querySelector('canvas');
+      canvasclone.style.border='solid 1px yellow';
+      console.log('clone-canvasclone',canvasclone);
+      if(canvas&&canvasclone){
+        let ctx = canvas.getContext("2d");
+        let image = new Image();
+        image.src= canvas.toDataURL();
+        /*var a = document.createElement("a");
+        a.href=canvas.toDataURL();
+        a.download="drcQrcode";
+        a.click();*/
+        console.log('clone-image',image)
+        let ctxClone = canvasclone.getContext("2d");
+        //ctxClone.drawImage(image,0,0);
+        image.onload = function(){
+          console.log('clone-image-load',image)
+          ctxClone.drawImage(image,0,0);
+        }
+
+      }
+    },
+    add(event){
+      console.log('add',event );
+    },
+    update(event){
+      console.log('update',event );
+    },
+    remove(event){
+      console.log('remove',event );
+    },
+    sort(event){
+      console.log('sort',event );
+    },
+    dragPosition:function(e){
+      console.log('===',e.clientY,e.clientX);
+      let odiv=e;//目标元素e.target
+      console.log('odiv====',odiv);
+      //var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
+      //得到点击时该容器的：
+      var startY=e.clientY;
+      var startX=e.clientX;
+      var _this=this;
+//鼠标相对元素的位置
+      var distY=e.clientY-odiv.offsetLeft;
+      var distX=e.clientX-odiv.offsetTop;
+      document.onmousemove=function(e){
+        e.preventDefault();
+        console.log('===onmousemove',e.clientY,e.clientX);
+        //e.preventDefault();
+
+       // var distY=Math.abs(e.clientY-startY);
+       // var distX=Math.abs(e.clientX-startX);
+        let left=e.clientX-distX;
+        let top=e.clientY-distY;
+        odiv.style.top=top+'px';
+        odiv.style.left=left+'px';
+        console.log('odiv====',odiv);
+        /*
+        //往上方拖动：
+        if( e.clientY < startY){
+          targetDiv.style.top=(startY-distY)+'px';
+        }
+        if( e.clientX < startX){
+          targetDiv.style.left=(startX-distX)+'px';
+        }
+        //往下方拖动：
+        if (e.clientY > startY) {
+          targetDiv.style.top=(startY+distY)+'px';
+        }
+        if (e.clientX > startX) {
+          targetDiv.style.left=(startX+distX)+'px';
+        }
+        */
+      }
+
+      document.onmouseup=function(){
+        document.onmousemove=null;
+        document.onmouseup = null;
+      }
     },
-    /*
     handleDragStart(e,item){
       this.dragging = item;
     },
@@ -252,7 +395,6 @@ export default {
 
       this.dataList = newItems
     },
-    */
     initCurrentRecordNum(){
       this.currentRecordNum = 0;
     },

nezha-fronted/src/components/charts/chartPreview.vue

@@ -0,0 +1,995 @@
+<style scoped>
+    .chart-preview-dialog{
+    }
+    .nz-preview-picker{
+    }
+    .v-modal{
+    }
+    .hidden{
+      visibility: hidden;
+    }
+    .visible{
+      visibility: visible;
+    }
+</style>
+<template>
+    <el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog"
+               :visible.sync="screenModal"
+               :width="dailogWidth"
+               :modal-append-to-body='false'
+               @close="handleClose"
+               @opened="initDialog">
+      <div slot="title">
+        <span class="nz-dialog-title">{{chart.title}}</span>
+        <div class="float-right panel-calendar dialog-tool">
+          <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
+                          format="yyyy/MM/dd HH:mm"
+                          @change="dateChange"
+                          v-model="searchTime"
+                          type="datetimerange"
+                          :picker-options="pickerOptions"
+                          :range-separator="$t('dashboard.panel.to')"
+                          :start-placeholder="$t('dashboard.panel.startTime')"
+                          :end-placeholder="$t('dashboard.panel.endTime')"
+                          align="right">
+          </el-date-picker>
+        </div>
+      </div>
+
+      <template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea'">
+        <div id="chartEchartPreview">
+          <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:10px;"></div>
+          <div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend" v-scrollBar:legend>
+            <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
+              <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
+              <br/>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template  v-if="chart.type==='table'">
+        <div id="chartTablePreview" :class="{'visible':tableShow,'hidden':!tableShow}" >
+        <el-table id="tableContainer" style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border  tooltip-effect="light" v-scrollBar:el-table >
+          <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
+          <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
+          <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
+          <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" >
+            <template slot-scope="scope">
+              {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
+            </template>
+          </el-table-column>
+          <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
+            <template slot-scope="scope">
+              {{ unit.compute(scope.row.value,null,2)}}
+            </template>
+          </el-table-column>
+        </el-table>
+        <Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
+        </div>
+      </template>
+
+      <loading  ref="loadingPreview"></loading>
+    </el-dialog>
+</template>
+<script>
+  import axios from 'axios';
+  import echarts from 'echarts';
+  import bus from '../../libs/bus';
+  import loading from "../common/loading";
+  import chartDataFormat from './chartDataFormat'
+
+  export default {
+    name: 'chartPreview',
+    components: {
+      'loading': loading,
+    },
+    props: {
+      panelId:Number,
+    },
+    data() {
+      return {
+        chart:{},
+        //data: {}, // 该图表信息,chartItem
+        dailogWidth:'80%',
+        //seriesItem: [], // 保存信息
+        seriesItemScreen:[],
+        pageSizes:[50,100,200],
+        screenPageObj:{
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        unit:{},
+        //images: '',
+        //toolbox: false,
+        items: {
+          metric_name: [], // 每条数据列名称
+          xAxis: [],
+          theData: [], // series数据组
+        },
+        //panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+        //chartName: '',
+        //firstLoad: false, // 是否第一次加载
+        //divFirstShow:false,
+        //highchartStore: null, // 保存图表数据
+        //echartStore:null,// 保存图表数据
+        echartModalStore: null, // 全屏查看时数据
+        chartType: 'line', // 图表类型
+        screenModal: false,
+        // 查询数据使用
+        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
+        legend:[],
+        legendList:[],
+        screenLegendList:[],
+        isGrey:[],
+        isGreyScreen:[],
+        bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
+          '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
+          '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
+          '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
+          '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
+          '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
+          '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
+        ],
+        //firstShow: false, // 默认不显示操作按钮,
+        //dropdownMenuShow:false,
+        showLegend:true,
+        tableShow:true,
+        searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
+        //oldSearchTime:[],
+        minHeight:200,
+        chartSpaceHeight:0,//top-border: 1,bottom-border: 1,padding-bottome:3
+        titleHeight:50,
+        legendHeight:80,
+        //oldChartBoxCss:'',
+        pickerOptions: {
+          shortcuts: [
+            {
+              text:  this.$t("dashboard.panel.recOne"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setHours(start.getHours() - 1);
+                picker.$emit('pick', [start, end]);
+              }
+            },{
+              text: this.$t("dashboard.panel.recFour"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setHours(start.getHours() - 4);
+                picker.$emit('pick', [start, end]);
+              }
+            }, {
+              text: this.$t("dashboard.panel.recOneDay"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setDate(start.getDate() - 1);
+                picker.$emit('pick', [start, end]);
+              }
+            },  {
+              text: this.$t("dashboard.panel.yesterday"),
+              onClick(picker) {
+                const start = new Date();
+                const end = new Date();
+                start.setDate(start.getDate() - 1);
+                start.setHours(0);
+                start.setMinutes(0);
+                start.setSeconds(0);
+                end.setDate(end.getDate() - 1);
+                end.setHours(23);
+                end.setMinutes(59);
+                end.setSeconds(59);
+                picker.$emit('pick', [start, end]);
+              }
+            },{
+              text: this.$t("dashboard.panel.recSevenDay"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setDate(start.getDate() - 7);
+                picker.$emit('pick', [start, end]);
+              }
+            }, {
+              text: this.$t("dashboard.panel.recOneMonth"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setDate(start.getDate() - 30);
+                picker.$emit('pick', [start, end]);
+              }
+            }, {
+              text: this.$t("dashboard.panel.curMonth"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setDate(1);
+                start.setHours(0);
+                start.setMinutes(0);
+                picker.$emit('pick', [start, end]);
+              }
+            },{
+              text: this.$t("dashboard.panel.lastMonth"),
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setDate(1);
+                start.setMonth(start.getMonth() - 1);
+                end.setDate(0);
+                start.setStart();
+                end.setEnd();
+                picker.$emit('pick', [start, end]);
+              }
+            }]
+        },
+      };
+    },
+    computed: {
+    },
+    watch: {},
+    methods: {
+      // 全屏查看
+      show(chartInfo) {
+        this.searchTime[0] = new Date().setHours(new Date().getHours()-1);
+        this.searchTime[1] =new Date();
+        this.chart=chartInfo;
+        let chartType= chartInfo.type;
+        let chartContainerId = 'chartEchartPreview'
+        if(chartType==='table'){
+          /*
+          for(let i=0;i<8;i++){
+            this.seriesItemScreen.push({//表格数据
+              // label: '',//label
+              // metric: '',//metric列
+              element:'',
+              time: '',//采集时间
+              value: '',//数值
+            });
+          }*/
+          this.tableShow = false;
+          chartContainerId = 'chartTablePreview';
+        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
+          this.isGreyScreen=[];
+          this.showLegend = false;
+          chartContainerId = 'chartEchartPreview';
+        }
+
+        //设置高度 chart-table
+        this.$nextTick(() => {
+          //const chartBox = document.getElementById('chartPreviewDailog');
+          let height = this.chart.height;
+          if(height<this.minHeight){
+            height = this.minHeight;
+          }
+          const chartDiv = document.getElementById(chartContainerId);
+          chartDiv.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;
+          const addChartBox = document.querySelector('.right-box-add-chart');
+          //this.oldChartBoxCss = addChartBox.style.cssText;
+          addChartBox.style.cssText =  'z-index:2003 !important';
+          if(chartType==='table'){
+            const tableBox = document.getElementById('tableContainer');
+            tableBox.style.height = `${height-this.titleHeight-this.pageHeight}px`;//-75-32+25
+          }
+        });
+        this.setSize(chartInfo.span); // 设置该图表宽度
+
+        this.screenModal = true;
+      },
+      filterShowData(source,pageObj){
+        return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
+      },
+      initDialog(){
+        //此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
+        let chartType= this.chart.type;
+        if(chartType==='table'){
+
+        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
+          if(this.echartModalStore){
+            this.echartModalStore.clear();
+          }
+        }
+        //后台获得数据
+        this.$refs.loadingPreview.startLoading();
+        this.getChartData();
+      },
+      // 设置图表的宽度
+      setSize(size) {
+        this.$nextTick(() => {
+          const listContainer = document.getElementById('listContainer');
+          //chartBox.style.width = `${(size / 12) * 100}%`;
+          let containerWidth= listContainer.clientWidth;
+          this.dailogWidth = `${containerWidth*(size / 12)}px`;
+        });
+      },
+      // 获取一个图表具体数据
+      getChartData() {
+        const chartItem = this.chart;
+        const len = chartItem.elements.length;
+        // 没有数据的设置提示信息暂无数据-针对每一个图
+        if (len === 0) {
+          this.$nextTick(() => {
+            if (chartItem.type === 'table') {//表格
+              this.setTableData([]);
+            } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+              this.setData(chartItem, []);
+            }
+          });
+        } else {
+          let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+          if(!startTime || !endTime){//如果时间为空，则默认取最近1小时
+            let now = new Date();
+            startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+            endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
+            this.searchTime[0] = startTime;
+            this.searchTime[1] = endTime;
+          }
+          let step = bus.getStep(startTime,endTime);
+          this.$nextTick(() => {
+            const axiosArr = chartItem.elements.map((ele) => {
+              const filterItem = ele;
+              return  this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step='+step);
+            });
+            // 一个图表的所有element单独获取数据
+            axios.all(axiosArr).then((res) => {
+              if (res.length > 0) {
+                const series = [];
+                const legend = [];
+                const tableData = [];
+                const sumData = {
+                  name: 'sum',
+                  data: [],
+                  visible: true,
+                  threshold: null,
+                };
+                res.forEach((response, innerPos) => {
+                  if (response.status === 'success') {
+                    if (response.data.result) {
+                      // console.log(response.data.result)
+                      // 循环处理每个elements下获取的数据列
+                      response.data.result.forEach((queryItem) => {
+                        const seriesItem = {
+                          theData: {
+                            name: '',
+                            symbol:'none',  //去掉点
+                            smooth:true,  //曲线变平滑
+                            data: [],
+                            type:chartItem.type,
+                          },
+                          metric_name: '',
+                        };
+                        if(chartItem.type === 'stackArea'){
+                          seriesItem.theData.type='line';
+                          seriesItem.theData.stack=chartItem.title
+                          seriesItem.theData.areaStyle={};
+                        }
+                        // 图表中每条线的名字,后半部分
+                        let host = '';//up,
+                        if(queryItem.metric.__name__){
+                          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) => {
+                            if (tag !== '__name__') {
+                              host += `${tag}="${queryItem.metric[tag]}",`;
+                            }
+                          });
+                          if(host.endsWith(',')){host = host.substr(0,host.length-1);}
+                          host +="}";
+                          //处理legend别名
+                          let alias=this.dealLegendAlias(host,chartItem.elements[innerPos].legend);
+                          legend.push({name:host,alias:alias});
+                          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                          seriesItem.theData.name = host;
+                          seriesItem.metric_name = seriesItem.theData.name;
+                          // 将秒改为毫秒
+                          //alert('table=='+JSON.stringify(queryItem))
+                          seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                            let t_date = new Date(dpsItem[0] * 1000);
+                            let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+                            tableData.push({//表格数据
+                              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                              element:{element:host,alias:alias},
+                              time: timeTmp,//采集时间
+                              value: dpsItem[1],//数值
+                            });
+                            return [dpsItem[0] * 1000, dpsItem[1]];
+                          });
+                          series.push(seriesItem.theData);
+
+                        } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                          // 无数据提示
+                          /*
+                          const currentInfo = chartItem.elements[innerPos];
+                          const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                          this.$message.warning({
+                            duration: 15,
+                            content: errorMsg,
+                            closable: true,
+                          });
+                          */
+                        }
+                      });
+                    }
+                  }else{
+                    if(response.msg){
+                      this.$message.error(response.msg);
+                    }else if(response.error){
+                      this.$message.error(response.error);
+                    }else {
+                      this.$message.error(response);
+                    }
+                  }
+                });
+                //if(this.$refs.editChart&&this.$refs.editChart[index]) {
+                  if (chartItem.type === 'table') {//表格
+                      this.setTableData(tableData);
+                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+                    if (series.length && chartItem.type === 4) {//曲线汇总
+                    }
+                    this.setData(chartItem, series, legend);
+                  }
+                //}
+              } else {
+                const type = chartItem.type;
+                //if(this.$refs.editChart[index]) {
+                  if (type === 'table') {
+                      this.setTableData([]);
+                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4) {
+                      this.setData(chartItem, []);
+                  }
+                //}
+              }
+            }).catch((error) => {
+              if (error) {
+                this.$message.error(error.toString());
+                console.error(error)
+              }
+            });
+          });
+        }
+      },
+      clickScreenLegend(legendName,index){
+        //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
+        let curIsGrey=this.isGreyScreen[index];
+        if(this.echartModalStore){
+          this.screenLegendList.forEach((item,i)=>{
+            let isGrey = this.isGreyScreen[i];
+            if(index != i){
+              if(!curIsGrey && !isGrey){
+                this.echartModalStore.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+              }else if(!curIsGrey && isGrey){
+                this.echartModalStore.dispatchAction({
+                  type: 'legendSelect',
+                  name: item.name
+                });
+              }else{
+                this.echartModalStore.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+              }
+            }else {
+              this.echartModalStore.dispatchAction({
+                type: 'legendSelect',
+                name: item.name
+              });
+            }
+          })
+          this.isGreyScreen.forEach((item,i)=>{
+            if(index != i){
+              if(!curIsGrey && !item){
+                this.$set(this.isGreyScreen, i, true);
+              }else if(!curIsGrey && item){
+                this.$set(this.isGreyScreen, i, false);
+              }else{
+                this.$set(this.isGreyScreen, i, true);
+              }
+            }else{
+              if(item === true){
+                this.$set(this.isGreyScreen, i, false);
+              }
+            }
+          })
+        }
+      },
+      formatLegend(chartWidth,name){
+        if(!name){
+          return '';
+        }
+        //计算宽度
+        var span = document.createElement("span");
+        var result = {};
+        result.width = span.offsetWidth;
+        result.height = span.offsetHeight;
+        span.style.visibility = "hidden";
+        span.style.fontSize = 14;
+        span.style.fontFamily = "Arial";
+        span.style.display = "inline-block";
+        document.body.appendChild(span);
+        if(typeof span.textContent != "undefined"){
+          span.textContent = name;
+        }else{
+          span.innerText = name;
+        }
+        var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
+        document.body.removeChild(span);
+
+        if(txtWidth < chartWidth){
+          return name;
+        }else {
+          var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
+          return name.slice(0,charNum)+'...';
+        }
+      },
+      // chartSite用于区分是全屏显示还是局部显示
+      initChart(chartInfo, dataArg, ele,legend) {
+        const self = this;
+        this.chartType = ''; // 图表类型
+        if ( chartInfo.type === 4) {//line,bar
+          this.chartType = 'line';
+        }
+        this.echartModalStore = echarts.init(ele);
+
+        var chartWidth = ele.clientWidth;
+        var title = {
+          show:false,
+          text: chartInfo.title || null,
+          textAlign: 'left',
+          useHTML: true,
+          textStyle: {
+            width: '60%',
+            fontStyle:'normal',
+            fontWeight:'bold',
+            color: "#333",
+
+          }
+        };
+        var option = {
+          title:{
+            show:false,
+          },
+          color: this.bgColorList,
+          tooltip: {
+            trigger: 'axis',
+            confine:false,
+            extraCssText:'z-index:1000;',
+            /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
+            position:function(point,params,dom,rect,size){
+              dom.style.transform = "translateZ(0)";
+              //提示框位置
+              var x=0;
+              var y=0;
+              //当前鼠标位置
+              var pointX = point[0];
+              var pointY = point[1];
+              //外层div大小
+              var viewWidth = size.viewSize[0];
+              var viewHeight = size.viewSize[1];
+              //提示框大小
+              var boxWidth = size.contentSize[0];
+              var boxHeight = size.contentSize[1];
+              if (chartSite === 'local') { // 本地显示
+                let chartDom = document.getElementById(chartInfo.title+"_"+chartInfo.id);
+                if(chartDom){
+                  let parTop = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetTop;
+                  let parleft = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetLeft;
+
+                  let parent = document.getElementById('tableList');
+                  let parClientHeight = parent.clientHeight;//可视高度
+                  let parClientWidth = parent.clientWidth;//可视宽度
+                  let parScrollTop = parent.scrollTop;
+                  if((parClientWidth-pointX-parleft-20)>=boxWidth){//说明鼠标在左边放不下提示框
+                    x=pointX+10;
+                  }else{
+                    x = pointX - boxWidth;
+                  }
+                  if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
+                    y = pointY+10;
+                  }else {
+                    y = pointY-boxHeight;
+                  }
+                  return [x,y];
+                }else {//preview page
+                  x = pointX - boxWidth;
+                  y = pointY+10;
+                  return [x,y];
+                }
+              }else {
+                if(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
+                  x=pointX+10;
+                }else{
+                  x = pointX - boxWidth;
+                }
+                if(pointY<(viewHeight/2)){//说明鼠标上面放不下提示框
+                  y = pointY+10;
+                }else {
+                  y = pointY-boxHeight;
+                }
+                return [x,y];
+              }
+            },
+            formatter:function(params){
+              //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
+              let str = `<div>`;
+
+              //let str = `<div  style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
+              params.forEach((item, i) => {
+                let tip=legend.find((element)=>{
+                  return element.name == item.seriesName;
+                })
+                if(i===0){
+                  let t_date = new Date(item.data[0]);
+                  str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+                    + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
+                  str +=`<br/>`;
+                }
+                let val = parseFloat(Number(item.data[1]).toFixed(2));
+                if(val===0){
+                  val = Number(item.data[1]);
+                }
+                str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
+                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}:  </div>`;
+                str += `<div style="padding-left: 10px;">`;
+                str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
+                str += `</div>`;
+                str += `</div>`;
+
+              });
+              str +=`</div>`;
+              return str;
+              },
+          },
+          legend: {
+            type:'scroll',
+            height:80,
+            show:false,
+            icon:"roundRect",
+            itemHeight:5,
+            itemWidth:15,
+            formatter:function(name){
+              //console.log('==========='+name);
+              if(!name){
+                return '';
+              }
+              //计算宽度
+              var span = document.createElement("span");
+              var result = {};
+              result.width = span.offsetWidth;
+              result.height = span.offsetHeight;
+              span.style.visibility = "hidden";
+              span.style.fontSize = 14;
+              span.style.fontFamily = "Arial";
+              span.style.display = "inline-block";
+              document.body.appendChild(span);
+              if(typeof span.textContent != "undefined"){
+                span.textContent = name;
+              }else{
+                span.innerText = name;
+              }
+              var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
+              document.body.removeChild(span);
+
+              if(txtWidth < chartWidth){
+                return name;
+              }else {
+                var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
+                return name.slice(0,charNum)+'...';
+              }
+            },
+            tooltip:{
+              show:true,
+              formatter:function(params){
+                //alert(params.length);
+                //alert(JSON.stringify(params));
+
+                return `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'> ${params.name}</div>`;
+              },
+            },
+            data: legend,
+            orient:'vertical',
+            x:'center',
+            y:'bottom',
+            //top:'5%',
+            //bottom:0
+          },
+          grid: {
+            top: 13,
+            left: 0,
+            right: 30,
+            containLabel: true,
+            bottom:35,//156
+          },
+          dataZoom: [{
+            type: 'slider',
+            show:true,
+            xAxisIndex: [0],
+            start: 0,
+            end: 100,
+            height:25,
+            bottom:10,//96
+            left:40,
+            right:48,
+          }
+           ],
+
+          xAxis: {
+            type: 'time',
+            // boundaryGap: false,//line-false; bar-true;
+            //data: ['20190101', '20190102', '周三', '周四', '周五', '周六', '周日']
+            axisLabel: {
+              intervale: 0,
+              rotate: 0,
+              formatter: function (value) {
+                var t_date = new Date(value);
+                return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
+                  + [t_date.getHours(), t_date.getMinutes()].join(':');
+              }
+            },
+            axisPointer: {//y轴上显示指针对应的值
+              show: true,
+            },
+            splitLine:{
+              show:false
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine:{
+              show:true
+            },
+            axisLabel: {
+              formatter: function(value,index){
+                let chartUnit=chartInfo.unit;
+                chartUnit=chartUnit?chartUnit:2;
+                let unit=chartDataFormat.getUnit(chartUnit);
+                return unit.compute(value,index);
+              },
+            },
+            //boundaryGap:[0,0.2]
+          },
+          useUTC: false,//使用本地时间
+          series: dataArg
+        };
+
+        if(this.echartModalStore){
+          this.echartModalStore.clear();
+        }
+        option.title = {};
+        //this.echartModalStore.setOption(option);//显示全屏界面
+        this.showLegend = true;
+        if(legend){
+          this.screenLegendList = [];
+          legend.forEach((item, i) => {
+            const legend = {
+              name:item.name,
+              alias:item.alias,
+              showText:this.formatLegend(chartWidth,item.alias?item.alias:item.name)
+            };
+            this.screenLegendList.push(legend);
+            this.isGreyScreen.push(false);
+          });
+        }
+        this.$nextTick(() => {
+          let divHeight = this.$refs.screenLegendArea.offsetHeight;
+          this.echartModalStore.resize({height:(chartInfo.height-this.chartSpaceHeight-divHeight-this.titleHeight)});
+          this.echartModalStore.clear();
+          this.echartModalStore.setOption(option);//创建图表
+          this.$refs.loadingPreview.endLoading();
+        });
+      },
+      // 设置数据
+      setData(chartItem, seriesItem,legend) {
+          this.legend = legend;
+          //this.data = chartItem;
+          //this.seriesItem = seriesItem;
+          this.seriesItemScreen = seriesItem;
+
+          this.initChart(chartItem, seriesItem, this.$refs.screenShowArea,legend);
+      },
+      // 设置数据
+      setTableData(seriesItem) {
+        this.unit = chartDataFormat.getUnit(this.chart.unit);
+
+        this.storedScreanTableData=seriesItem;
+        this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
+        this.screenPageObj.total=this.storedScreanTableData.length;
+        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
+
+        this.tableShow = true;
+        this.$refs.loadingPreview.endLoading();
+      },
+      clearChart(){
+        if(this.echartModalStore){
+          this.echartModalStore.clear();
+        }
+        this.chart = {};
+        //this.seriesItem = [];
+        this.seriesItemScreen = [];
+        this.searchTime[0] = new Date().setHours(new Date().getHours()-1);
+        this.searchTime[1] =new Date();
+      },
+      // 重新请求数据 刷新操作
+      /*
+      refreshChart() {
+        //this.dropdownMenuShow=false;
+        this.clearChart();
+        this.$refs['localLoading'+this.chartIndex].startLoading();
+        //this.firstShow = false;
+        this.$emit('on-refresh-data', this.data.id);
+      },
+      */
+      dateChange(time) {
+        let chartType = this.chart.type;
+        if (chartType === 'table') {
+          this.seriesItemScreen = [];
+          for(let i=0;i<8;i++){
+            this.seriesItemScreen.push({//表格数据
+              // label: '',//label
+              // metric: '',//metric列
+              element:'',
+              time: '',//采集时间
+              value: '',//数值
+            });
+          }
+          this.tableShow = false;
+          this.$refs.loadingPreview.startLoading();
+          this.getChartData();
+        } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
+          this.echartModalStore.clear();
+          this.showLegend = false;
+          this.$refs.loadingPreview.startLoading();
+          this.getQueryChart();
+        }
+      },
+      // 查询数据,修改日期查询全屏数据
+      getQueryChart(type) {
+        let axiosArr = [];
+        this.$nextTick(() => {
+          let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+          if(!startTime || !endTime){//如果时间为空，则默认取最近1小时
+            let now = new Date();
+            startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+            endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
+            this.searchTime[0] = startTime;
+            this.searchTime[1] = endTime;
+          }
+          let step = bus.getStep(startTime,endTime);
+          axiosArr = this.chart.elements.map((ele) => {
+            const filterItem = ele;
+            return  this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step='+step);
+          });
+          // 一个图表
+          axios.all(axiosArr).then((res) => {
+            if (res.length > 0) {
+              const series = [];
+              const legend = [];
+              const sumData = {
+                name: 'sum',
+                data: [],
+                visible: true,
+                threshold: null,
+              };
+              if(!this.chart.type){
+                this.chart.type='line';
+              }
+              res.forEach((response,pos) => {
+                if (response.status === 'success') {
+                  if (response.data.result) {
+                    // 循环处理每个elements下获取的数据列
+                    response.data.result.forEach((queryItem,innerPos) => {
+                      const seriesItem = {
+                        theData: {
+                          name: '',
+                          symbol:'none',  //去掉点
+                          smooth:true,  //曲线变平滑
+                          data: [],
+                          type:this.chart.type,
+                          //visible: true,
+                          //threshold: null,
+                        },
+                        metric_name: '',
+                      };
+                      if(this.chart.type === 'stackArea'){
+                        seriesItem.theData.type='line';
+                        seriesItem.theData.stack=this.chart.title
+                        seriesItem.theData.areaStyle={};
+                      }
+                      // 图表中每条线的名字,后半部分
+                      // let host = `${queryItem.metric.__name__}{`;//up,
+                      let host = '';//up,
+                      if(queryItem.metric.__name__){
+                        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) => {
+                          if (tag !== '__name__') {
+                            host += `${tag}="${queryItem.metric[tag]}",`;
+                          }
+                        });
+                        if(host.endsWith(',')){host = host.substr(0,host.length-1);}
+                        host +="}";
+                        let alias=this.dealLegendAlias(host,this.chart.elements[pos].legend);
+                        legend.push({name:host,alias:alias});
+                        // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                        seriesItem.theData.name = host;
+                        seriesItem.metric_name = seriesItem.theData.name;
+                        // 将秒改为毫秒
+                        //alert('table=='+JSON.stringify(queryItem))
+                        seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                          return [dpsItem[0] * 1000, dpsItem[1]];
+                        });
+                        series.push(seriesItem.theData);
+
+                      } else if (this.chart.elements && this.chart.elements[innerPos]) {
+                        // 无数据提示
+                      }
+                    });
+                  }
+                }
+              });
+              this.initChart(this.chart,series, this.$refs.screenShowArea,legend);
+            }
+          }).catch((error) => {
+            if (error) {
+              this.$message.error(error.toString());
+            }
+          });
+        });
+      },
+      dealLegendAlias:function(legend,expression){
+        if(/\{\{.+\}\}/.test(expression)){
+          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
+            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
+            let reg=new RegExp(label+'=".+?"')
+            let value=null;
+            if(reg.test(legend)){
+              let find=legend.match(reg)[0];
+              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+            }
+            return value?value:label;
+          })
+          return labelValue
+        }else{
+          return expression;
+        }
+
+      },
+      screenPageNo(val) {
+        this.screenPageObj.pageNo = val;
+        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj)
+      },
+      screenPageSize(val) {
+        this.screenPageObj.pageSize = val;
+        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj)
+      },
+      handleClose(){
+        this.screenModal = false;
+        this.clearChart();
+      },
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+      this.clearChart();
+      //const addChartBox = document.querySelector('.right-box-add-chart');
+      //addChartBox.style.cssText =   this.oldChartBoxCss;
+    },
+  };
+
+</script>

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

@@ -64,7 +64,7 @@
    -->
     </div>
 
-    <div class="line-area"  ref="lineChartArea"  id="lineChartArea" v-show="firstShow"></div>
+    <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow"></div>
 
     <div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
       <div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
@@ -590,14 +590,14 @@
         if ( chartInfo.type === 4) {//line,bar
           this.chartType = 'line';
         }
-        let chartId = '';
+        //let chartId = '';
 
         if (chartSite === 'local') {
           this.echartStore = echarts.init(ele);
-          chartId='lineChartArea';
+          //chartId='lineChartArea';
         }else if (chartSite === 'screen') {
           this.echartModalStore = echarts.init(ele);
-          chartId='screenShowArea';
+          //chartId='screenShowArea';
         }
         var chartWidth = ele.clientWidth;
         var title = {

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

@@ -13,6 +13,7 @@ const cn = {
     esc: '取消',
     cancel: '取消',
     save: '保存',
+    preivew:'预览',
     search: '搜索',
     add: "新增",
     option: "操作",

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

@@ -20,6 +20,7 @@ const en = {
     esc: 'Cancel', //'取消'
     cancel: 'Cancel', //'取消'
     save: 'Save', //'保存'
+    preview:'Preview',//预览
     search: 'Search', //'搜索'
     add: 'Create', //"新增"
     option: 'Operation', //"操作"

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

@@ -211,13 +211,17 @@
           <button @click="esc" id="chart-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
             <span>{{$t('overall.cancel')}}</span>
           </button>
+          <button @click="preview" id="chart-box-preview" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+            <span>{{$t('overall.preview')}}</span>
+          </button>
           <button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
             <span>{{$t('overall.save')}}</span>
           </button>
         </div>
       </div>
     </transition>
-
+    <!--preview -->
+    <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
   </div>
 </template>
 
@@ -225,6 +229,7 @@
   import bus from '../../../libs/bus';
   import ChartMetric from "./chartMetric";
   import chartDataFormat from '../../charts/chartDataFormat';
+  import chartPreview from '../../charts/chartPreview';
   export default {
     name: "chartBox",
     props: {
@@ -299,6 +304,7 @@
     },
     components:{
       'chart-metric':ChartMetric,
+      'chart-preview':chartPreview,
     },
     methods: {
       show(show) {
@@ -559,7 +565,7 @@
         });
       },
       // 获取每个tag组件内部校验后数据,点击生成图表时触发
-      getTarget(target) {
+      getTarget(target,pointer,optType) {
         this.elementTarget.push(target);
         if (this.elementTarget.length === this.elements.length) {
           this.$refs.chartForm.validate((valid) => {
@@ -597,17 +603,23 @@
             });
             params.elements = elements;
             if (valid) {
-              if (this.isedit) {
+              if(optType==='preview') {
-                params.id = this.chart.id;
+                if (this.isedit) {
-                this.updateCharts(params);
+                  params.id = this.chart.id;
-              } else {
+                }
-                this.addCharts(params);
+                this.$refs.chartsPreview.show(params);
+              }else{
+                if (this.isedit) {
+                  params.id = this.chart.id;
+                  this.updateCharts(params);
+                } else {
+                  this.addCharts(params);
+                }
               }
             }
           });
         }
       },
-      // 生成图表
       confirmAdd() {
         this.elementTarget = []; // 初始化清空参数
         this.$refs.chartTag.forEach((item, index) => {//循环指标列表
@@ -616,7 +628,6 @@
         });
         this.$refs.chartForm.validate();
       },
-
       // 获取metric列表
       getSuggestMetric() {
         //this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
@@ -787,6 +798,19 @@
         callback(data);
       },
 
+      //preview -start
+      //预览图表
+      preview(){
+        //验证图表数据是否合法？？，合法了再显示预览窗口
+        this.elementTarget = []; // 初始化清空参数
+        this.$refs.chartTag.forEach((item, index) => {//循环指标列表
+          // 触发每个tag组件内部进行校验
+          item.saveTarget(index,'preview');
+        });
+        this.$refs.chartForm.validate();
+      },
+      //preview--end
+
     },
     created() {
 

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

@@ -296,14 +296,14 @@ export default {
 
 
     // (最后整体保存添加的图标的时候执行)保存, chartdata点击确认后保存本身数据并返回给chartdata
-    saveTarget(pointer) {
+    saveTarget(pointer,optType) {
       if (this.pointer === pointer) {
         this.$refs.elementInfo.validate((valid) => {
           if (valid) {//根据设置的rules进行验证，验证通过，则返回，继续进行保存（每个el-form-item都需要验证）
             if(this.elementInfo.expression){
               this.elementInfo.expression = this.elementInfo.expression.replace(/\s+| /ig,'');
             }
-            this.$emit('on-add-target-success', this.elementInfo, pointer);
+            this.$emit('on-add-target-success', this.elementInfo, pointer,optType);
           }
         });
       }