feat：新增组件

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

@@ -172,6 +172,11 @@
       draggable,
       // visNetwork,
     },
+    watch:{
+      dataList(n){
+        console.log(n);
+      }
+    },
     data() {
       return {
         filter: {},

nezha-fronted/src/components/common/project/popData/totalChart.vue

@@ -0,0 +1,600 @@
+<template>
+  <div>
+    <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
+  </div>
+</template>
+
+<script>
+	export default {
+		name:"totalChart",
+    props:{
+
+    },
+    watch:{},
+    data(){
+		  return{
+
+      }
+    },
+    mounted(){
+
+    },
+    methods:{
+		  //加载chart
+      initChart(chartInfo, dataArg, ele, chartSite,legend) {
+        this.chartInfo=chartInfo;
+        const self = this;
+        this.chartType = ''; // 图表类型
+        if ( chartInfo.type === 4) {//line,bar
+          this.chartType = 'line';
+        }
+        let minTime = null;
+        let maxTime = null;
+        if(dataArg.length>0 && dataArg[0].data
+          && dataArg[0].data.length>0 && dataArg[0].data[0].length>0){
+          let len = dataArg[0].data.length-1;
+          minTime = dataArg[0].data[0][0];
+          maxTime = dataArg[0].data[len][0];
+        }
+        if (chartSite === 'local') {
+          this.echartStore = echarts.init(ele);
+          //chartId='lineChartArea';
+        }else if (chartSite === 'screen') {
+          this.echartModalStore = echarts.init(ele);
+          //chartId='screenShowArea';
+        }
+        var chartWidth = ele.clientWidth;
+        var title = {
+          show:false,
+          text: chartInfo.title || null,
+          textAlign: 'left',
+          useHTML: true,
+          textStyle: {
+            //display: 'inline-block',//无此属性
+            width: '60%',
+            fontStyle:'normal',
+            fontWeight:'bold',
+            color: "#333",
+
+          }
+        };
+        let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
+        let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
+        var option = {
+          title:{
+            show:false,
+          },
+          color: this.bgColorList,
+          toolbox:{
+            show:false,
+            top:'0',
+            showTitle:true,
+            feature:{
+              dataZoom:{
+                yAxisIndex:false,
+                title:{
+                  zoom:self.$t('overall.toolBox.zoom'),
+                  back:self.$t('overall.toolBox.back'),
+                }
+              },
+              magicType:{
+                type:['stack'],
+                title:{
+                  stack:self.$t('overall.toolBox.stack')
+                },
+                iconStyle:{
+                  borderColor:stackIconBorderColor,
+                },
+                emphasis:{
+                  borderColor:stackIconChooseBorderColor,
+                }
+              },
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            confine:false,
+            backgroundColor:'rgba(221,228,237,1)',
+            textStyle:{
+              color:'#000'
+            },
+            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;'>`;
+              let sum = 0;
+              params.forEach((item, i) => {
+                let tip=legend[item.seriesIndex];
+                let color = self.bgColorList[item.seriesIndex];
+                if(i===0){
+                  let value=bus.computeTimezone(item.data[0]);
+                  let t_date = new Date(value);
+                  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]);
+                }
+                sum +=val;
+                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: ${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>`;
+              });
+              if(self.data.type==='stackArea' || self.isStackArea){
+                if(!self.stackTotalColor||self.stackTotalColor==''){
+                  self.stackTotalColor=randomcolor();
+                }
+                sum = parseFloat(Number(sum).toFixed(2));
+                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="line-height: 18px; font-size: 12px;padding-left:0px;">`
+                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${self.stackTotalColor};}'></span>`;
+                str +=self.$t("dashboard.panel.chartTotal");
+                str +=`</div>`;
+                str +=`<div style="padding-left: 10px;">`;
+                str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,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){
+              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){
+                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',
+          },
+          grid: {
+            top: 30,
+            left: 0,
+            right: 30,
+            containLabel: true,
+            bottom:8,//156
+          },
+          xAxis: {
+            type: 'time',
+            axisLabel: {
+              interval: '0',
+              showMaxLabel:false,
+              rotate: 0,
+              show:true,
+              fontSize: 10,
+              formatter: function (value) {
+                value = bus.computeTimezone(value);
+                let t_date = new Date(value);
+                let hour = t_date.getHours();
+                hour=hour>9?hour:"0"+hour; //加0补充为两位数字
+                let minute = t_date.getMinutes();
+                minute=minute>9?minute:"0"+minute; //如果分钟小于10,则在前面加0补充为两位数字
+                if(minTime!==null && maxTime!==null){
+                  let diffSec = (maxTime-minTime)/1000;
+                  let secOneDay = 24*60*60;//1天的秒数
+                  let secOneMonth = secOneDay*30;//30天的秒数
+                  if(diffSec<=secOneDay) {//同一天
+                    return [hour,minute ].join(':');
+                  }else if(diffSec<secOneMonth){//大于1天，小于30天
+                    return [t_date.getMonth() + 1, t_date.getDate()].join('/') +" "+  [hour, minute].join(':');
+                  }else {//大于等于30天
+                    return [t_date.getMonth() + 1, t_date.getDate()].join('/');
+                  }
+                }else {
+                  return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + "\n"
+                    + [hour, minute].join(':');
+                }
+
+              }
+            },
+            axisPointer: {//y轴上显示指针对应的值
+              show: true,
+            },
+            splitLine:{
+              show:true,
+              lineStyle: {
+                color: "#d9d9d9",
+                opacity: 0.8,
+                width: 1
+              }
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            //boundaryGap:['20%', '0'],
+          },
+          yAxis: {
+            type: 'value',
+            splitLine:{
+              show:true,
+              lineStyle: {
+                color: "#d9d9d9",
+                opacity: 0.8,
+                width: 1
+              }
+            },
+            //去掉y轴--start
+            axisLine:{
+              show:false
+            },
+            minInterval: 1,
+            axisTick: {
+              show: false,
+            },
+            //去掉y轴--end
+            axisLabel: {
+              show:true,
+              fontSize: 10,
+              formatter: function(value,index){
+                let chartUnit=chartInfo.unit;
+                chartUnit=chartUnit?chartUnit:2;
+                let unit=chartDataFormat.getUnit(chartUnit);
+                //console.info(value, chartUnit, unit.compute(value,index))
+                return unit.compute(value,index);
+              },
+            },
+            //boundaryGap:[0,0.2]
+          },
+          useUTC: false,//使用本地时间
+          series: dataArg
+        };
+        // params.series = dataArg;
+        if (chartSite === 'local') { // 本地显示
+          if(legend){
+            this.legendList = [];
+            legend.forEach((item, i) => {
+              const legend = {
+                name:item.name,
+                alias:item.alias,
+                showText:this.formatLegend(chartWidth,item.name)
+              };
+              this.legendList.push(legend);
+              this.isGrey.push(false);
+            });
+          }
+          this.legendListMore=this.legendList.filter((item,index)=>index<this.seriesLength);
+          this.$nextTick(() => {
+            setTimeout(function () {
+              let divHeight = self.$refs.legendArea.offsetHeight;
+              if(!chartInfo.height){
+                self.echartStore.resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
+              }else {
+                self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
+              }
+              if(dataArg&&dataArg.length>0){
+                self.echartStore.clear();
+                self.echartStore.setOption(option);//创建图表
+                self.noData=false;
+              }else{
+                self.noData=true;
+                option=chartConfig.getOption('noData')
+                self.echartStore.clear();
+                self.echartStore.setOption(option);//创建图表
+              }
+
+              self.$refs['localLoading'+self.chartIndex].endLoading();
+              self.firstShow = true; // 展示操作按键
+            }, 100);
+
+            window.addEventListener('resize', function () {
+              self.echartStore.resize();
+            });
+            this.echartStore.on('magictypechanged', function (params) {
+              self.isStackArea = !self.isStackArea;
+              if(self.isStackArea){
+                this.setOption({
+                  toolbox:{
+                    feature:{
+                      dataZoom:{
+                        yAxisIndex:false,
+                        title:{
+                          zoom:self.$t('overall.toolBox.zoom'),
+                          back:self.$t('overall.toolBox.back'),
+                        }
+                      },
+                      magicType:{
+                        type:['stack'],
+                        title:{
+                          stack:self.$t('overall.toolBox.stack')
+                        },
+                        iconStyle:{
+                          borderColor:'#7e7e7e',
+                        },
+                        emphasis:{
+                          borderColor:stackIconChooseBorderColor,
+                        }
+                      },
+                    }
+                  },
+                  tooltip: {
+                    formatter:function(params){
+                      let str = `<div>`;
+                      let sum = 0;
+                      params.forEach((item, i) => {let tip=legend[item.seriesIndex];
+                        let color = self.bgColorList[item.seriesIndex];
+                        if(i===0){
+                          let value=bus.computeTimezone(item.data[0]);
+                          let t_date = new Date(value);
+                          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]);
+                        }
+                        sum +=val;
+                        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: ${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>`;
+                      });
+                      if(self.data.type==='stackArea' || self.isStackArea){
+                        sum = parseFloat(Number(sum).toFixed(2));
+                        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="line-height: 18px; font-size: 12px;padding-left:20px;">`
+                        str +=self.$t("dashboard.panel.chartTotal");
+                        str +=`</div>`;
+                        str +=`<div style="padding-left: 10px;">`;
+                        str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
+                        str +=`</div>`;
+                        str += `</div>`;
+                      }
+
+                      str +=`</div>`;
+                      return str;
+                    },
+                  }
+                });
+              }
+            });
+          });
+        } else if (chartSite === 'screen') { // 全屏显示
+          // eslint-disable-next-line
+          if(legend){
+            this.screenLegendList = [];
+            legend.forEach((item, i) => {
+              const legend = {
+                name:item.name,
+                alias:item.alias,
+                showText:this.formatLegend(chartWidth,item.name)
+              };
+              this.screenLegendList.push(legend);
+              this.isGreyScreen.push(false);
+            });
+          }
+          if(this.screenLegendListMore.length!==this.screenLegendList.length){
+            this.screenLegendListMore=this.screenLegendList.filter((item,index)=>index<this.seriesLength);
+          }
+          if(self.echartModalStore){
+            self.echartModalStore.clear();
+            option.title = {};
+            self.showLegend = true;
+            self.$refs['localLoadingScreen'+self.chartIndex].endLoading();
+          }
+          this.$nextTick(() => {
+            let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
+            let divHeight = legendDiv.offsetHeight;
+            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
+            let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
+            //console.log("11____00",sumHeight,divHeight,legendDiv)
+            self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
+            self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
+            setTimeout(function () {
+              if(self.screenLegendListMore.length!==self.screenLegendList.length){
+                self.seriesItemArrScreen=self.seriesItemScreen.filter((item,index)=>index<self.seriesLength);
+
+              }else{
+                self.seriesItemArrScreen=self.seriesItemScreen
+              }
+              option.series=self.seriesItemArrScreen;
+              if(dataArg&&dataArg.length>0){
+                self.echartModalStore.setOption(option);//显示全屏界面
+                self.noData=false;
+              }else{
+                self.noData=true;
+                option=chartConfig.getOption('noData')
+                self.echartModalStore.setOption(option);//显示全屏界面
+              }
+              self.echartModalStore.on('finished', function () {
+                let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
+                let divHeight = legendDiv.offsetHeight;
+                let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
+                let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
+                //console.log("11____00",sumHeight,divHeight,legendDiv)
+                self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
+                self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
+                console.log(self.seriesItemScreen,self.seriesItemArrScreen);
+                self.echartModalStore.off('finished');
+              })
+            }, 100);
+
+            this.echartModalStore.on('magictypechanged', function (params) {
+              self.isStackArea = !self.isStackArea;
+              if(self.isStackArea){
+                this.setOption({
+                  toolbox:{
+                    feature:{
+                      dataZoom:{
+                        yAxisIndex:false,
+                        title:{
+                          zoom:self.$t('overall.toolBox.zoom'),
+                          back:self.$t('overall.toolBox.back'),
+                        }
+                      },
+                      magicType:{
+                        type:['stack'],
+                        title:{
+                          stack:self.$t('overall.toolBox.stack')
+                        },
+                        iconStyle:{
+                          borderColor:'#7e7e7e',
+                        },
+                        emphasis:{
+                          borderColor:stackIconChooseBorderColor,
+                        }
+                      },
+                    }
+
+                  },
+                  tooltip: {
+                    formatter:function(params){
+                      let str = `<div>`;
+                      let sum = 0;
+                      params.forEach((item, i) => {let tip=legend[item.seriesIndex];
+                        let color = self.bgColorList[item.seriesIndex];
+                        if(i===0){
+                          let value=bus.computeTimezone(item.data[0]);
+                          let t_date = new Date(value);
+                          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]);
+                        }
+                        sum +=val;
+                        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: ${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>`;
+                      });
+                      if(self.data.type==='stackArea' || self.isStackArea){
+                        sum = parseFloat(Number(sum).toFixed(2));
+                        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="line-height: 18px; font-size: 12px;padding-left:20px;">`
+                        str +=self.$t("dashboard.panel.chartTotal");
+                        str +=`</div>`;
+                        str +=`<div style="padding-left: 10px;">`;
+                        str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
+                        str +=`</div>`;
+                        str += `</div>`;
+                      }
+
+                      str +=`</div>`;
+                      return str;
+                    },
+                  }
+                });
+              }
+            });
+          });
+        }
+      },
+    },
+	}
+</script>
+
+<style scoped>
+
+</style>

nezha-fronted/src/components/common/project/topology.vue

@@ -120,8 +120,8 @@
   import Vis from 'vis'
   import addNode from './addNode'
   import addLine from './addLine'
-  import popDataMain from './popData/popDataMain'
-  import popDataInfo from './popData/popDataInfo'
+  import popDataMain from './popData/Main'
+  import popDataInfo from './popData/Info'
 	export default {
 		name:"topology",
     components: {