fix:修复无法配置alertList singleStat类型图表的bug，short类型单位格式化扩展

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

@@ -2,7 +2,7 @@
   @import './chart.scss';
 </style>
 <template>
-  <div class="nz-chart-resize">
+  <div class="nz-chart-resize" :id="id">
     <div class="resize-shadow" ref="resizeShadow"></div>
     <div class="resize-box resize-box-alert" ref="resizeBox">
       <div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
@@ -146,7 +146,8 @@ export default {
       type: Number,
       default: 0,
     },
-    chartInfo:{}
+    chartInfo:{},
+    id:''
   },
   data() {
     return {

nezha-fronted/src/components/charts/chartDataFormat.js

@@ -8,11 +8,13 @@ import {parse} from "echarts/extension-src/dataTool/gexf";
 function none(value, index){
   return value;
 }
-function short(value,index,type=1){
+function short(value,index,type=1,dot){
   if(type == 1){
-    return asciiCompute(value,1000,['','K','Mil','Bil'],0)
+    return asciiCompute(value,1000,['','K','Mil','Bil','Til','Quadrillion','Quintillion'],0)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['','K','Mil','Bil','Til','Quadrillion','Quintillion'],dot)
   }else{
-    return asciiCompute(value,1000,['','K','Mil','Bil'],2)
+    return asciiCompute(value,1000,['','K','Mil','Bil','Til','Quadrillion','Quintillion'],2)
   }
 
 }
@@ -32,217 +34,273 @@ function localFormat(value,index){
   if (num) { result = num + result; }
   return result;
 }
-function bits(value,index,type=1){
+function bits(value,index,type=1,dot=0){
   if(type == 1){
     return asciiCompute(value,1024,['b','B','KB','MB','GB','TB','PB','EB','ZB','YB'],0)
+  }else if(type == -1){
+    return asciiCompute(value,1024,['b','B','KB','MB','GB','TB','PB','EB','ZB','YB'],dot)
   }else{
     return asciiCompute(value,1024,['b','B','KB','MB','GB','TB','PB','EB','ZB','YB'],2)
   }
 }
-function bytes(value,index,type=1){
+function bytes(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1024,['B','KB','MB','GB','TB','PB','EB','ZB','YB'],0)
+  }else if(type == -1){
+    return asciiCompute(value,1024,['B','KB','MB','GB','TB','PB','EB','ZB','YB'],dot)
   }else{
     return asciiCompute(value,1024,['B','KB','MB','GB','TB','PB','EB','ZB','YB'],2)
   }
 
 }
-function kilobytes(value,index,type=1){
+function kilobytes(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1024,['KB','MB','GB','TB','PB','EB','ZB','YB'],0)
+  }else if(type == -1){
+    return asciiCompute(value,1024,['KB','MB','GB','TB','PB','EB','ZB','YB'],dot)
   }else{
     return asciiCompute(value,1024,['KB','MB','GB','TB','PB','EB','ZB','YB'],2)
   }
 
 }
-function megabytes(value,index,type=1){
+function megabytes(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1024,['MB','GB','TB','PB','EB','ZB','YB'],0)
+  }else if(type == -1){
+    return asciiCompute(value,1024,['MB','GB','TB','PB','EB','ZB','YB'],dot)
   }else{
     return asciiCompute(value,1024,['MB','GB','TB','PB','EB','ZB','YB'],2)
   }
 
 }
-function gigabytes(value,index,type=1){
+function gigabytes(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1024,['GB','TB','PB','EB','ZB','YB'],0)
+  }else if(type == -1){
+    return asciiCompute(value,1024,['GB','TB','PB','EB','ZB','YB'],dot)
   }else{
     return asciiCompute(value,1024,['GB','TB','PB','EB','ZB','YB'],2)
   }
 }
-function terabytes(value,index,type=1){
+function terabytes(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1024,['TB','PB','EB','ZB','YB'],0)
+  }else if(type == -1){
+    return asciiCompute(value,1024,['TB','PB','EB','ZB','YB'],dot)
   }else{
     return asciiCompute(value,1024,['TB','PB','EB','ZB','YB'],2)
   }
 }
-function petabytes(value,index,type=1){
+function petabytes(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1024,['PB','EB','ZB','YB'],0)
+  }else if(type == -1){
+    return asciiCompute(value,1024,['PB','EB','ZB','YB'],dot)
   }else{
     return asciiCompute(value,1024,['PB','EB','ZB','YB'],2)
   }
 }
-function packetsSec(value,index,type=1){
+function packetsSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['pps','Kpps','Mpps','Gpps','Tpps','Ppps','Epps','Zpps','Ypps'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['pps','Kpps','Mpps','Gpps','Tpps','Ppps','Epps','Zpps','Ypps'],dot)
   }else{
     return asciiCompute(value,1000,['pps','Kpps','Mpps','Gpps','Tpps','Ppps','Epps','Zpps','Ypps'],2)
   }
 }
-function bitsSec(value,index,type=1){
+function bitsSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['bps','Kbps','Mbps','Gbps','Tbps','Pbps','Epps','Zpps','Ypps'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['bps','Kbps','Mbps','Gbps','Tbps','Pbps','Epps','Zpps','Ypps'],dot)
   }else{
     return asciiCompute(value,1000,['bps','Kbps','Mbps','Gbps','Tbps','Pbps','Epps','Zpps','Ypps'],2)
   }
 }
-function bytesSec(value,index,type=1){
+function bytesSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['Bs','KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['Bs','KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],dot)
   }else{
     return asciiCompute(value,1000,['Bs','KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],2)
   }
 }
-function kilobytesSec(value,index,type=1){
+function kilobytesSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],dot)
   }else{
     return asciiCompute(value,1000,['KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
   }
 }
-function kilobitsSec(value,index,type=1){
+function kilobitsSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['Kbps','Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['Kbps','Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],dot)
   }else{
     return asciiCompute(value,1000,['Kbps','Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],2)
   }
 
 }
-function megabytesSec(value,index,type=1){
+function megabytesSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],dot)
   }else{
     return asciiCompute(value,1000,['MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],2)
   }
 
 }
-function megabitsSec(value,index,type=1){
+function megabitsSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],dot)
   }else{
     return asciiCompute(value,1000,['Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],2)
   }
 
 }
-function gigabytesSec(value,index,type=1){
+function gigabytesSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['GBs','TBs','PBs','EBs','ZBs','YBs'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['GBs','TBs','PBs','EBs','ZBs','YBs'],dot)
   }else{
     return asciiCompute(value,1000,['GBs','TBs','PBs','EBs','ZBs','YBs'],2)
   }
 
 }
-function gigabitsSec(value,index,type=1){
+function gigabitsSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],dot)
   }else{
     return asciiCompute(value,1000,['Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],2)
   }
 
 }
-function terabytesSec(value,index,type=1){
+function terabytesSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['TBs','PBs','EBs','ZBs','YBs'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['TBs','PBs','EBs','ZBs','YBs'],dot)
   }else{
     return asciiCompute(value,1000,['TBs','PBs','EBs','ZBs','YBs'],2)
   }
 
 }
-function terabitsSec(value,index,type=1){
+function terabitsSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['Tbps','Pbps','Ebps','Zbps','Ybps'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['Tbps','Pbps','Ebps','Zbps','Ybps'],dot)
   }else{
     return asciiCompute(value,1000,['Tbps','Pbps','Ebps','Zbps','Ybps'],2)
   }
 
 }
-function petabytesSec(value,index,type=1){
+function petabytesSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['PBs','EBs','ZBs','YBs'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['PBs','EBs','ZBs','YBs'],dot)
   }else{
     return asciiCompute(value,1000,['PBs','EBs','ZBs','YBs'],2)
   }
 
 }
-function petabitsSec(value,index,type=1){
+function petabitsSec(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['Pbps','Ebps','Zbps','Ybps'],1)
+  }else if(type == -1){
+    return asciiCompute(value,1000,['Pbps','Ebps','Zbps','Ybps'],dot)
   }else{
     return asciiCompute(value,1000,['Pbps','Ebps','Zbps','Ybps'],2)
   }
 
 }
-function Hertz(value,index,type=1){
+function Hertz(value,index,type=1,dot){
   if(type == 1){
     return asciiCompute(value,1000,['Hz','KHz','MHz','GHz','THz','PHz','EHz','ZHz','YHz'],1);
+  }else if(type == -1){
+    return asciiCompute(value,1000,['Hz','KHz','MHz','GHz','THz','PHz','EHz','ZHz','YHz'],dot);
   }else{
     return asciiCompute(value,1000,['Hz','KHz','MHz','GHz','THz','PHz','EHz','ZHz','YHz'],2);
   }
 
 }
-function nanoseconds(value,index,type=1){
+function nanoseconds(value,index,type=1,dot){
   if(type == 1){
     return timeCompute(value,'ns');
+  }else if(type == -1){
+    return timeCompute(value,'ns',dot);
   }else{
     return timeCompute(value,'ns',2);
   }
 
 }
-function microseconds(value,index,type=1){
+function microseconds(value,index,type=1,dot){
   if(type == 1){
     return timeCompute(value,'us')
+  }else if(type == -1){
+    return timeCompute(value,'us',dot)
   }else{
     return timeCompute(value,'us',2)
   }
 
 }
-function milliseconds(value,index,type=1){
+function milliseconds(value,index,type=1,dot){
   if(type == 1){
     return timeCompute(value,'ms')
+  }else if(type == -1){
+    return timeCompute(value,'ms',dot)
   }else{
     return timeCompute(value,'ms',2)
   }
 
 }
-function seconds(value,index,type=1){
+function seconds(value,index,type=1,dot){
   if(type == 1){
     return timeCompute(value,'s');
+  }else if(type == -1){
+    return timeCompute(value,'s',dot);
   }else{
     return timeCompute(value,'s',2);
   }
 
 }
-function minutes(value,index,type=1){
+function minutes(value,index,type=1,dot){
   if(type == 1){
     return timeCompute(value,'m');
+  }else if(type == -1){
+    return timeCompute(value,'m',dot);
   }else{
     return timeCompute(value,'m',2);
   }
 
 }
-function hours(value,index,type=1){
+function hours(value,index,type=1,dot){
   if(type == 1){
     return timeCompute(value,'h');
+  }else if(type == -1){
+    return timeCompute(value,'h',dot);
   }else{
     return timeCompute(value,'h',2);
   }
 
 }
-function days(value,index,type=1){
+function days(value,index,type=1,dot){
   if(type == 1){
     return timeCompute(value,'day');
+  }else if(type == -1){
+    return timeCompute(value,'day',dot);
   }else{
     return timeCompute(value,'day',3);
   }
@@ -254,9 +312,8 @@ function days(value,index,type=1){
 * ascii:进制，比如数据为1024
 * units：单位列表
 * dot：保留的小数位，
-* unitIndex：不需要传递，用于递归获取units中的单位
 * */
-function asciiCompute(num,ascii,units,dot=2,unitIndex=0){
+function asciiCompute(num,ascii,units,dot=2){
   num=Number(num)
   let carry=0;
   if(num > 0){
@@ -264,8 +321,12 @@ function asciiCompute(num,ascii,units,dot=2,unitIndex=0){
     carry = parseInt(log)
     num = num / Math.pow(ascii,carry)
   }
+  if(Number.isInteger(num)){
+    return num +' '+units[carry];
+  }else{
     return num.toFixed(dot) +' '+units[carry];
   }
+}
 function asciiCompute2(num,ascii,units,dot=2,unitIndex=0){
   num=Number(num)
   let quotient=num / ascii;

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

@@ -130,7 +130,7 @@
         </div>
       </template>
 
-      <chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview"></chart-alert-list>
+      <chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart"></chart-alert-list>
 
       <loading  ref="loadingPreview"></loading>
     </el-dialog>
@@ -242,6 +242,7 @@
           chartContainerId = 'chartAlertListPreview';
         }
 
+        console.log('previewChart',this.chart,chartContainerId)
         //设置高度 chart-table
         this.$nextTick(() => {
           //const chartBox = document.getElementById('chartPreviewDailog');
@@ -263,6 +264,7 @@
             tableBox.style.height = `${height-this.titleHeight-this.pageHeight-25}px`;//-75-32+25
           }else{
             const chartDiv = document.getElementById(chartContainerId);
+            console.log('container div',chartDiv)
             chartDiv.style.height = `${height-this.chartSpaceHeight-this.titleHeight-15}px`;
           }
         });

nezha-fronted/src/components/charts/d3-line-chart2.vue

@@ -1,130 +0,0 @@
-<template>
-  <div style="position: relative;">
-    <div id="chart"></div>
-    <div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legends.length>0" v-scrollBar:legend >
-      <div v-for="(item, index) in legends" :title="item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
-        <span class="legend-shape" :style="{background:(item.isGray?'#D3D3D3':getBgColor(index))}"></span>{{item.name}}
-      </div>
-    </div>
-  </div>
-
-</template>
-
-<script>
-  import {D3LineChart} from "./d3-line";
-
-  export default {
-    name: "d3-line-chart2",
-    data:function(){
-      return{
-        option:{
-          width:1000,
-          height:400,
-          datas:[],
-          timeFormat:'%H:%M:%S',
-          legends: [],
-          title:'',
-          subTitle:'',
-          colors:["red", "blue", "green", 'black'],
-        },
-        chart:null,
-        legends:[],
-      }
-    },
-    methods:{
-      init:function(){
-        let chartData=this.getData();
-        this.option.datas=chartData.data;
-        this.option.legends=chartData.legends;
-        this.chart=D3LineChart('#chart',this.option)
-        this.chart.init()
-        console.log(this.chart)
-
-      },
-      clickLegend:function(legendName,index){
-        let curIsGrey=this.legends[index].isGray;
-        if(this.chart){
-          this.legends.forEach((item,i)=>{
-            let isGrey = item.isGray;
-            if(index != i){ //不是当前点击的
-              if(!curIsGrey && !isGrey){
-                this.chart.dispatchAction('line-single-show',legendName)
-                item.isGray=true;
-              }else if(!curIsGrey && isGrey){
-                item.isGray=false;
-                this.chart.dispatchAction('line-all-show',legendName)
-              }else{
-                item.isGray=true
-                this.chart.dispatchAction('line-single-show',legendName)
-              }
-
-            }else {//当前点击的
-              if(item.isGray === true){
-                item.isGray = false;
-              }
-              this.chart.dispatchAction('line-single-show',legendName)
-            }
-          });
-        }
-      },
-      getData() {
-        let legends=[];
-        let datas=[];
-        let startTime=new Date()
-        startTime.setHours(new Date().getHours() - 1);
-        let start=Math.round(startTime.getTime()/1000);
-        let end=Math.round(new Date().getTime()/1000)
-        this.$get('/prom/api/v1/query_range?query=node_cpu_frequency_hertz{asset="192.168.40.126"}&start='+start+'&end='+end+'&step=15s').then(response=>{
-          if(response.status == 'success'){
-            let result=response.data.result;
-            result.forEach(item=>{
-              let metric=item.metric;
-              let metricName=metric.__name__;
-              delete metric.__name__;
-              let legend=metricName+"{"
-              for(let key in metric){
-                legend+=key + '="'+metric[key]+'",';
-              }
-              legend.substring(0,legend.length-1);
-              legend+='}'
-
-              legends.push(legend)
-
-              let values=item.values.map(item=>{
-                return [item[0]*1000,Number(item[1])]
-              })
-
-              datas.push(values);
-            })
-
-            this.option.datas=datas;
-
-            this.legends=legends.map(item=>{
-              return{name:item,isGray:false}
-            });
-            this.option.legends=JSON.parse(JSON.stringify(this.legends))
-
-            this.chart=D3LineChart('#chart',this.option)
-            this.chart.init()
-          }
-        })
-      },
-      getBgColor:function(index){
-        let color=this.chart.colors[index];
-        return color;
-      },
-    },
-    mounted() {
-      this.getData();
-      // this.init()
-    }
-  }
-</script>
-
-<style scoped>
-@import "chart.scss";
-  .legend-container{
-    bottom: unset !important;
-
-  }
-</style>

nezha-fronted/src/components/charts/d3-line.js

@@ -1,638 +0,0 @@
-import * as d3 from "d3";
-import './d3-line.scss'
-import {randomcolor} from "../common/js/radomcolor/randomcolor";
-
-export function D3LineChart(selector,option){
-  return {
-    selector:selector, //选择器
-    width:option.width,
-    height:option.height,
-    timeFormat:option.timeFormat?option.timeFormat:'%Y-%m-%d',
-    _timeFormat:null,
-    datas:option.datas,
-    legends:option.legends,
-    title:option.title?option.title:'',
-    subTitle:option.subTitle?option.subTitle:'',
-    colors:option.colors,
-    padding:option.padding?option.padding:{top:40,left:40,bottom:40,right:20},
-    duration:option.duration?option.duration:800,
-    _head_height:0,
-    _foot_height:0,
-    currentLineNum:0,
-    showXAxisTick:option.showXAxisTick?option.showXAxisTick:false,
-    showYAxisTick:option.showYAxisTick?option.showYAxisTick:false,
-    tooltipFormatter:option.tooltipFormatter,
-
-    init:function(){
-      let $self=this;
-      //定义画布
-      this.svg=d3.select(this.selector)
-        .append('svg')
-        .attr('width',this.width)
-        .attr('height',this.height)
-        .on('mouseover',function(){
-          if ($self.tooltip) $self.tooltip.style('display', null);
-          if ($self.tooltipLine) $self.tooltipLine.attr('stroke', 'orange');
-          $self.svg.style('cursor','crosshair')
-        })
-        .on('mousemove', drawTooltip)
-        .on('mouseout', removeTooltip);
-
-      this.initOption();
-      this.constomAction();
-
-      this.drawTitle();
-      this.creatScale();
-      this.createDefs();
-      this.createXInnerBar();
-      this.createYInnderBar();
-      this.createXAxis();
-      this.createYAxis();
-
-      // this.createLegends();
-      this.drawLines();
-
-      this.createZoom()
-
-      let oldToolVal=null;
-      function removeTooltip() {
-        if ($self.tooltip) $self.tooltip.style('display', 'none');
-        if ($self.tooltipLine) $self.tooltipLine.attr('stroke', 'none');
-      }
-      function drawTipLine(time){
-        if ($self.currentTransform)
-          $self.tooltipLine
-            .style('stroke-width','1')
-            .attr("clip-path", "url(#clip)")
-            .attr('x1', $self.currentTransform.applyX($self.xScale(time)))
-            .attr('x2', $self.currentTransform.applyX($self.xScale(time)))
-            .attr('y1', $self._head_height)
-            .attr('y2', $self.height - $self._foot_height);
-        else
-          $self.tooltipLine
-            .style('stroke-width','1')
-            .attr("clip-path", "url(#clip)")
-            .attr('x1', $self.xScale(time))
-            .attr('x2', $self.xScale(time))
-            .attr('y1', $self._head_height)
-            .attr('y2', $self.height - $self._foot_height);
-      }
-      function drawLineDot(){
-
-      }
-      function drawTooltip(){
-        var x=d3.mouse($self.svg.node())[0];
-        if(x<$self.padding.left||x>$self.width-$self.padding.right){
-          return false;
-        }
-        if ($self.currentTransform)
-          var time = $self.currentTransform.rescaleX($self.xScale).invert(d3.mouse($self.svg.node())[0]);
-        else
-          var time = $self.xScale.invert(d3.mouse($self.svg.node())[0]);
-
-        drawTipLine(time)
-
-        $self.tooltip.html(d3.timeFormat('%Y-%m-%d %H:%M:%S')(time))
-          .style('left', d3.event.pageX + 20 + 'px')
-          .style('top', d3.event.pageY - 20 + 'px')
-          .selectAll()
-          .data($self.datas).enter()
-          .append('div')
-          .html(function(d, i,g) {
-            let toolVal=d[0];
-            let min=Math.abs(+toolVal[0] - +time )
-            d.forEach(item=>{
-              let temp=Math.abs(+item[0] - +time)
-              if(temp - min < 0){
-                min=temp;
-                toolVal=item;
-              }
-            })
-            if(toolVal){
-              oldToolVal=toolVal;
-              let legend=$self.legends[i];
-              if(!legend.isGray){
-                return `<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;">
-                            <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: ${$self.colors[i]};}'></span>${legend.alias?legend.alias:legend.name}:  </div>
-                            <div style="padding-left: 10px;">${toolVal[1]}</div>
-                         </div>`
-              }
-            }
-          });
-      }
-    },
-    initOption:function(){
-      this._timeFormat=d3.timeFormat(this.timeFormat)
-      this._head_height=this.padding.top
-      this._foot_height=this.padding.bottom
-      this.currentLineNum=this.datas.length;
-      this.tooltip = d3.select('body')
-                        .append('div')
-                        .attr('style',"position: absolute; background-color: rgba(221,228,237,1);border-color:rgba(221,228,237,1); padding: 5px; display: none; left: 983px; top: 89px;")
-      this.tooltipLine = this.svg.append('line');
-
-      this.dotBox = this.svg.append('g')
-
-      this.minMax=getMinMax(this.datas);
-
-      if(this.padding.left < computeDistance(this.minMax.max+'')){
-        this.padding.left = computeDistance(this.minMax.max+'')
-      }
-
-      if(!this.colors || this.colors.length<this.currentLineNum){
-        this.colors=[];
-        for(let i=0;i<this.currentLineNum;i++){
-          this.colors.push(randomcolor())
-        }
-      }
-    },
-    constomAction:function(){
-      // this.dispatch=d3.dispatch('line-show','line-hide','line-toggle')
-    },
-    drawTitle:function(){
-      //添加标题
-      if (this.title != "") {
-        this.svg.append("g")
-          .append("text")
-          .text(this.title)
-          .attr("class", "title")
-          .attr("x", this.width / 2)
-          .attr("y", this._head_height);
-        this._head_height += 30;
-      }
-      //添加副标题
-      if (this.subTitle != "") {
-        this.svg.append("g")
-          .append("text")
-          .text(this.subTitle)
-          .attr("class", "subTitle")
-          .attr("x", this.width / 2)
-          .attr("y", this._head_height);
-
-        this._head_height += 20;
-      }
-    },
-    creatScale:function(){
-      let minMax=this.minMax
-      let t_max_min = d3.extent(this.datas[0], function(d) {
-        return d[0];
-      });
-      this.xTicks = Math.min(this.datas[0].length,10)
-
-      //横坐标轴比例尺
-      this.xScale = d3.scaleTime()
-        .domain(t_max_min)
-        .range([this.padding.left, this.width - this.padding.right]);
-
-      //纵坐标轴比例尺
-      this.yScale = d3.scaleLinear()
-        .domain([minMax.min, Math.round(minMax.max*1.05)])
-        .range([this.height - this._foot_height, this._head_height]);
-
-    },
-    createZoom:function(){
-      let $self=this;
-      this.zoom = d3.zoom()
-        .scaleExtent([1, 20])
-        .translateExtent([
-          [this.padding.top, 0],
-          [this.width - this.padding.right, this.height]
-        ])
-        .extent([
-          [this.padding.top, 0],
-          [this.width - this.padding.right, this.height]
-        ])
-        .on("zoom", zoomed);
-      this.svg.call(this.zoom);
-
-      function zoomed() {
-        let t = d3.event.transform;
-        $self.currentTransform=t;
-        let xt = t.rescaleX($self.xScale);
-        $self.svg.select('.bottom_axis').call($self.xAxis.scale(xt)).selectAll("text")
-          .attr("transform", "translate(-10,20) rotate(-20)");
-
-        $self.svg.select('.inner_line_x').call($self.xInner.scale(xt));
-
-        for (var i = 0; i < $self.lines.length; i++) {
-          var lineObject = $self.lines[i];
-
-          lineObject.scale(i, 0, t);
-        }
-      }
-    },
-    createDefs:function(){ //创建遮罩
-      this.svg.append("defs").append("clipPath")
-        .attr("id", "clip")
-        .append("rect")
-
-        .attr('x', this.padding.left)
-        .attr('y', 0)
-        .attr("width", this.width - this.padding.left - this.padding.right)
-        .attr("height", this.height);
-    },
-    createXInnerBar:function(){
-      var xInner = d3.axisBottom()
-        .scale(this.xScale)
-        .tickSize(-(this.height - this._head_height - this._foot_height), 0, 0)
-        .tickFormat("")
-        .ticks(this.xTicks);
-      this.xInner=xInner;
-      //添加横轴网格线
-      var xInnerBar = this.svg.append("g")
-        .attr("class", "inner_line inner_line_x")
-        .attr("transform", "translate(0," + (this.height - this._foot_height) + ")")
-        .call(xInner);
-    },
-    createYInnderBar:function(){
-      //定义纵轴网格线
-      var yInner = d3.axisLeft()
-        .scale(this.yScale)
-        .tickSize(-(this.width - this.padding.left - this.padding.right), 0, 0)
-        .tickFormat("")
-        .ticks(10);
-      this.yInner=yInner
-      //添加纵轴网格线
-      var yInnerBar = this.svg.append("g")
-        .attr("class", "inner_line inner_line_y")
-        .attr("transform", "translate(" + this.padding.left + ",0)")
-        .call(yInner);
-    },
-    createXAxis:function(){
-      let $self=this;
-      //定义横轴
-      var xAxis = d3.axisBottom()
-        .scale(this.xScale)
-        .ticks(this.xTicks)
-        .tickFormat($self._timeFormat)
-      this.xAxis=xAxis
-      //添加横坐标轴
-      var xBar = this.svg.append("g")
-        .attr("class", "bottom_axis")
-        .attr("transform", "translate(0," + (this.height - this._foot_height) + ")")
-        .call(xAxis).selectAll("text")
-        .attr("transform", "translate(-10,8) rotate(-20)")
-
-      if(!this.showXAxisTick){
-        let xAxis=this.svg.select('.bottom_axis')
-        xAxis.select('.domain').remove();
-        xAxis.selectAll('.tick').select('line').remove()
-      }
-    },
-    createYAxis:function(){
-      //定义纵轴
-      var yAxis = d3.axisLeft()
-        .scale(this.yScale)
-      this.yAxis=yAxis;
-      //添加纵轴
-      var yBar = this.svg.append("g")
-        .attr("class", "left_axis")
-        .attr("transform", "translate(" + this.padding.left + ",0)")
-        .call(yAxis);
-      if(!this.showYAxisTick){
-        let yAxis=this.svg.select('.left_axis')
-        yAxis.select('.domain').remove();
-        yAxis.selectAll('.tick').select('line').remove()
-      }
-    },
-    createLegends:function(){
-      let $self=this;
-      let legend = d3.select('#legendArea').attr('class','legend')
-      var textGroup = legend.selectAll("div")
-        .data(this.legends);
-
-      textGroup.exit().remove();
-
-      let legendItem=legend.selectAll("div")
-        .data(this.legends)
-        .enter()
-        .append("div")
-        .attr("class", "legend-item")
-
-      legendItem.append('span')
-        .attr('class','legend-shape')
-        .style('background',function(d,i){
-          return $self.colors[i]
-        })
-
-      legendItem.append('span')
-        .text(function(d,i){
-          return d.name
-        })
-
-
-      /*var rectGroup = legend.selectAll("rect")
-        .data(this.legends);
-
-      rectGroup.exit().remove();
-
-      legend.selectAll("rect")
-        .data(this.legends)
-        .enter()
-        .append("rect")
-        .attr("x", function(d, i) {
-          return i * 100 - 20;
-        })
-        .attr("y", -10)
-        .attr("width", 12)
-        .attr("height", 12)
-        .attr("fill", function(d, i) {
-          return $self.colors[i];
-        });*/
-
-      // legend.attr("transform", "translate(" + ((this.width - this.legends.length * 100) / 2) + "," + (this.height - 10) + ")");
-    },
-    drawLines:function(){
-      this.lines=[];
-
-      for (var i = 0; i < this.currentLineNum; i++) {
-        var newLine = new CrystalLineObject(this);
-        newLine.init(i);
-        this.lines.push(newLine);
-      }
-    },
-    dispatchAction(type,param){
-      d3.selectAll('path[class="chart-line"]').dispatch(type,{detail:{name:param}})
-    },
-    drawChart() {
-      var _duration = 1000;
-
-      // this.svg.transition().duration(_duration).call(this.zoom.transform, d3.zoomIdentity);
-
-      var t_max_min = d3.extent(this.datas[0], function(d) {
-        return d[0];
-      });
-
-      var xTicks = Math.min(this.datas[0].length, 10)
-
-      //设置线条动画起始位置
-      var lineObject ;
-
-      for (var i = 0; i < this.datas.length; i++) {
-        if (i < this.currentLineNum) {
-          //对已有的线条做动画
-          lineObject = this.lines[i];
-          lineObject.movieBegin(i);
-        } else {
-          //如果现有线条不够，就加上一些
-          var newLine = new CrystalLineObject(this);
-          newLine.init(i);
-          this.lines.push(newLine);
-        }
-      }
-
-      //删除多余的线条，如果有的话
-      if (this.datas.length < this.currentLineNum) {
-        for (var i = this.datas.length; i < this.currentLineNum; i++) {
-          lineObject = this.lines[i];
-          lineObject.remove();
-        }
-        this.lines.splice(this.datas.length, this.currentLineNum - this.datas.length);
-      }
-
-      var maxdata = getMaxdata(this.datas);
-      var newLength = this.datas[0].length;
-
-      this.zoom.scaleExtent([1, 20]);
-      this.svg.call(this.zoom);
-
-      //横轴数据动画
-      this.xScale.domain(d3.extent(this.datas[0], function(d) {
-        return d[0];
-      }));
-      this.xAxis.scale(this.xScale).ticks(xTicks).tickFormat(this.timeFormat);
-      this.svg.select('.bottom_axis').transition().duration(_duration).call(this.xAxis).selectAll("text")
-        .attr("transform", "translate(-10,20) rotate(-20)");
-
-      this.xBar.selectAll("text").text(function(d) {
-        return this.xMarks[d];
-      });
-      this.xInner.scale(this.xScale).ticks(newLength);
-      this.xInnerBar.transition().duration(_duration).call(this.xInner);
-
-      //纵轴数据动画
-      this.yScale.domain([0, maxdata]);
-      this.yBar.transition().duration(_duration).call(this.yAxis);
-      this.yInnerBar.transition().duration(_duration).call(this.yInner);
-
-      //开始线条动画
-      for (var i = 0; i < lines.length; i++) {
-        lineObject = this.lines[i];
-        lineObject.reDraw(i, _duration);
-      }
-
-      this.currentLineNum = this.datas.length;
-      this.dataLength = newLength;
-    }
-  }
-}
-//取得多维数组最大值
-function getMaxdata(arr) {
-  var maxdata = 0;
-  for (var i = 0; i < arr.length; i++) {
-    maxdata = d3.max([maxdata, d3.max(arr[i], function(d) {
-      return d[1];
-    })]);
-  }
-  return maxdata;
-}
-
-function getMinMax(arr){
-  let min=0,max=0;
-  for(let i =0;i<arr.length;i++){
-    max=d3.max([max,d3.max(arr[i],d=>{return d[1]})])
-    min=d3.min([min,d3.min(arr[i],d=>{return d[1]})])
-  }
-  return{min:min,max:max}
-}
-function computeDistance(str){
-  var width = 0;
-  var html = document.createElement('span');
-  html.innerText = str;
-  html.className = 'getTextWidth';
-  document.querySelector('body').appendChild(html);
-  width = document.querySelector('.getTextWidth').offsetWidth;
-  document.querySelector('.getTextWidth').remove();
-  return Number((width+5));
-}
-
-function CrystalLineObject(chart) {
-  this.group = null;
-  this.path = null;
-  this.oldData = [];
-  let dataset=chart.datas;
-  let svg=chart.svg;
-  let xScale=chart.xScale;
-  let yScale=chart.yScale;
-  let lineColor=chart.colors;
-  const dispatch=chart.dispatch;
-
-  this.init = function(id) {
-    var arr = dataset[id];
-    let legend=chart.legends[id];
-    this.group = svg.append("g");
-    let $self=this;
-    var line = d3.line()
-      .x(function(d, i) {
-        return xScale(d[0]);
-      })
-      .y(function(d) {
-        return yScale(d[1]);
-      })
-      .curve(d3.curveCatmullRom.alpha(0.3)); //折线曲度
-
-    //添加折线
-    this.path = this.group.append("path")
-      .attr("d", line(arr))
-      .attr('class','chart-line')
-      .style("fill", "none")
-      .style("stroke-width", 1)
-      .attr("clip-path", "url(#clip)")
-      .style("stroke", lineColor[id])
-      .style("stroke-opacity", 0.9)
-      .on('line-single-show',function(d,i,group){
-        let event=d3.event;
-        let name=event.detail?event.detail.name:""
-        if(legend.name != name){
-          $self.group
-            .transition()
-            .duration(chart.duration)
-            .style('opacity','0')
-          legend.isGray=true;
-        }else{
-          $self.group.transition()
-            .duration(chart.duration).style('opacity','1')
-          legend.isGray=false;
-        }
-      })
-      .on('line-all-show',function(){
-        $self.group.transition()
-          .duration(chart.duration).style('opacity','1')
-        chart.legends.forEach(item=>{
-          item.isGray=false;
-        })
-      })
-
-    //添加系列的小圆点
-    /*this.group.selectAll("circle")
-      .data(arr)
-      .enter()
-      .append("circle")
-      .attr("clip-path", "url(#clip)")
-      .attr("cx", function(d, i) {
-        return xScale(d[0]);
-      })
-      .attr("cy", function(d) {
-        return yScale(d[1]);
-      })
-      .attr("r", 2)
-      .attr("fill", lineColor[id]);*/
-    this.oldData = arr;
-  };
-
-  this.scale = function(id, _duration, transform) {
-    var arr = dataset[id];
-
-    var line = d3.line()
-      .x(function(d, i) {
-
-        return transform.applyX(xScale(d[0]))
-      })
-      .y(function(d) {
-        return yScale(d[1]);
-      })
-
-    //添加折线
-    this.group.select("path")
-      .attr("d", line(arr))
-      .style("fill", "none")
-      .style("stroke-width", 1)
-      .style("stroke", lineColor[id])
-      .style("stroke-opacity", 0.9);
-
-    this.group.selectAll("circle")
-      .attr("cx", function(d, i) {
-        return transform.applyX(xScale(d[0]));
-      })
-      .attr("cy", function(d) {
-        return yScale(d[1]);
-      })
-
-  }
-
-  //动画初始化方法
-  this.movieBegin = function(id) {
-    var arr = dataset[id];
-    //补足/删除路径
-    var olddata = this.oldData;
-    var line = d3.line()
-      .x(function(d, i) {
-        if (i >= olddata.length) return chart.width - chart.padding.left;
-        else return xScale(d[0]);
-      })
-      .y(function(d, i) {
-        if (i >= olddata.length) return chart.height - chart._foot_height;
-        else return yScale(olddata[i].value);
-      });
-
-    //路径初始化
-    this.path.attr("d", line(arr));
-
-    //截断旧数据
-    var tempData = olddata.slice(0, arr.length);
-    /*var circle = this.group.selectAll("circle").data(tempData);
-
-    //删除多余的圆点
-    circle.exit().remove();*/
-
-    //圆点初始化，添加圆点,多出来的到右侧底部
-    /*this.group.selectAll("circle")
-      .data(arr)
-      .enter()
-      .append("circle")
-      .attr("cx", function(d, i) {
-        if (i >= olddata.length) return chart.width - chart.padding;
-        else return xScale(d[0]);
-      })
-      .attr("cy", function(d, i) {
-        if (i >= olddata.length) return chart.height - chart._foot_height;
-        else return yScale(d[1]);
-      })
-      .attr("r", 5)
-      .attr("fill", lineColor[id]);*/
-
-    this.oldData = arr;
-  };
-
-  //重绘加动画效果
-  this.reDraw = function(id, _duration) {
-    var arr = dataset[id];
-    var line = d3.line()
-      .x(function(d, i) {
-        return xScale(d[0]);
-      })
-      .y(function(d) {
-        return yScale(d[1]);
-      });
-
-    //路径动画
-    this.path.transition().duration(_duration).attr("d", line(arr));
-
-    //圆点动画
-   /* this.group.selectAll("circle")
-      .transition()
-      .duration(_duration)
-      .attr("cx", function(d, i) {
-        return xScale(d[0]);
-      })
-      .attr("cy", function(d) {
-        return yScale(d[1]);
-      })*/
-  };
-
-  //从画布删除折线
-  this.remove = function() {
-    this.group.remove();
-  };
-
-}

nezha-fronted/src/components/charts/d3-line.scss

@@ -1,72 +0,0 @@
-.chart{
-  position: relative;
-}
-.title {
-  font-family: Arial, 微软雅黑;
-  font-size: 18px;
-  text-anchor: middle;
-}
-
-.subTitle {
-  font-family: Arial, 宋体;
-  font-size: 12px;
-  text-anchor: middle;
-  fill: #666
-}
-
-.axis path,
-.axis line {
-  fill: none;
-  stroke: black;
-  shape-rendering: crispEdges;
-}
-
-.axis text {
-  font-family: sans-serif;
-  font-size: 11px;
-  fill: #999;
-}
-
-.inner_line path,
-.inner_line line {
-  fill: none;
-  stroke: #ccc;
-  shape-rendering: crispEdges;
-  opacity: .5;
-}
-
-.legend {
-  font-size: 12px;
-  font-family: Arial, Helvetica, sans-serif;
-  text-align:left;
-  max-height:80px;
-  min-height:25px;
-  left: 10px;
-  line-height: 18px;
-  position: absolute;
-  padding-bottom:3px;
-}
-
-.legend-shape{
-  display:inline-block;
-  margin-right:5px;
-  border-radius:10px;
-  width:15px;
-  height:5px;
-  vertical-align: middle;
-}
-.ft-gr{
-  color:lightgray;
-}
-
-.legend-item{
-  text-overflow:ellipsis;
-  white-space:nowrap;
-  /*width:100%;*/
-  margin-right:10px;
-  overflow-x:hidden;
-  cursor:pointer;
-  display:inline-block;
-  float:left;
-  line-height: 20px;
-}

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

@@ -431,7 +431,6 @@
             bus.$emit("asset-filter-change", "typeIds", assetTypeIds);
           }else{
             bus.$emit("asset-filter-change", "typeIds", "");
-            this.pageObj.typeIds='';
           }
         },
         changeVendorCheckBox() {

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

@@ -117,7 +117,7 @@
         <!--type unit end-->
 
         <el-form-item :label="$t('dashboard.panel.chartForm.width')" prop="span" class="half-form-item">
-          <el-select class="right-box-row-with-btn"  value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini">
+          <el-select class="right-box-row-with-btn"  value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="editChart.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>
@@ -141,7 +141,7 @@
 
 
         <el-form-item :label="$t('dashboard.panel.chartForm.sync')" v-if="showPanel.type && showPanel.type == 'model'">
-          <el-switch class="exporter-switch" v-model="chart.sync" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>
+          <el-switch class="exporter-switch" v-model="editChart.sync" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>
         </el-form-item>
 
         <el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }">
@@ -193,8 +193,8 @@
               </el-col>
               <el-col style="width: calc(100% - 120px);">
                 <el-select popper-class="chart-box-dropdown-mini" v-model="statistics" placeholder="" size="small">
-                  <el-option v-for="item in statisticsList" :key="item.id" :label="item.name" :value="item.id">
+                  <el-option v-for="item in statisticsList" :key="item.value" :label="item.label" :value="item.value">
-                    <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+                    <span class="panel-dropdown-label-txt" >{{item.label}}</span>
                   </el-option>
                 </el-select>
               </el-col>
@@ -577,7 +577,7 @@
             });
           }
         }
-
+        console.log('save chart',params)
 
         let intervalTime = 1; //设置3秒超时
         let interval = setInterval(() => {
@@ -695,6 +695,7 @@
       },
       getAlertParam:function(param,opType){
         this.$refs.chartForm.validate((valid) => {
+          console.log('valid',valid,param,opType)
           const params = {
             title: this.editChart.title,//this.editChart
             span: this.editChart.span,
@@ -702,7 +703,7 @@
             type: this.editChart.type,
             unit:this.editChart.unit,
             param:param,
-            sync: this.editChart.sync
+            sync: this.editChart.sync,
           };
           if (valid) {
             if(opType==='preview') {
@@ -732,6 +733,10 @@
               item.saveTarget(index);
             });
           }*/
+          if(this.editChart.type == 'alertList'){
+            this.$refs.alertParamBox.saveParam();
+            return ;
+          }
           if(this.editChart.type == 'singleStat'){
             this.$set(this.editChart.param, "statistics", this.statistics);
           } else {
@@ -1112,6 +1117,7 @@
       },
       //preview--end
       initElements() {
+        console.log('statisticsList',this.statisticsList)
         if (!this.editChart.elements || this.editChart.elements.length == 0) {
           this.editChart.elements = [{expression: "", legend: "", type: "expert", id: ""}];
         }