feat:overview 新增chart & overview其他细节调整

1.把overview作为登录后首页
2.asset total 及表格alert列显示调整
3.新增alert trend图表
4.topN头部下拉选调整
5.其他样式调整

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -1,16 +1,12 @@
 <template>
   <div class="chart-room">
-    <loading  :ref="localLoading"></loading>
+    <loading  ref="loading"></loading>
 
-    <div class="chart-header"></div>
+    <div class="chart-header">{{chartTitle}}</div>
+
+    <div class="chart-body" ref="chartBody" :id="chartId" style="height: 95%"></div>
 
-    <div class="chart-body" ref="chartBody" id="chartBody"></div>
 
-    <div class="chart-foot">
-      <el-scrollbar>
-        <div class="chart-legend"></div>
-      </el-scrollbar>
-    </div>
   </div>
 </template>
 
@@ -18,26 +14,129 @@
   import echarts from 'echarts';
   import chartDataFormat from "../../../charts/chartDataFormat";
   import loading from "../../../common/loading";
+  import uuidv1 from "uuid/v1";
   import chartConfig from './chartConfig'
   export default {
     name: "chart",
-    props:[],
+    components:{
+      'loading':loading,
+    },
+    props:{
+      chartTitle:{type:String}
+    },
     data(){
       return {
-        option:chartConfig.getCommonOption
+        chart:null,
+        option:{},
+        chartId:new uuidv1()+'-'+new Date().getTime(),
       }
     },
     created() {
+      chartConfig.setSeries(this.series);
+      chartConfig.setTooltipFormatter(this.tooltipFormatter);
+      chartConfig.setTooltipPostion(this.tooltipPosition);
+      chartConfig.setYAxisLabelFormatter(this.yAxisFormatter);
+      this.option=chartConfig.getCommonOption();
     },
     methods:{
+      tooltipPosition: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];
+        let chartDom = document.getElementById(this.chartId);
+        if(chartDom){
+          let parTop = chartDom.offsetTop;
+          let parLeft = chartDom.offsetLeft;
 
+          let parent = chartDom.parentElement;
+          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 {
+          x = pointX - boxWidth;
+          y = pointY+10;
+          return [x,y];
+        }
+      },
+      tooltipFormatter:function(params){
+        let str = `<div>`;
+        params.forEach((item, i) => {
+          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 = 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>${item.seriesName}:  </div>`;
+          str += `<div style="padding-left: 10px;">`;
+          str += chartDataFormat.getUnit(5).compute(val,null,2);
+          str += `</div>`;
+          str += `</div>`;
+        });
+        str +=`</div>`;
+        return str;
+      },
+      yAxisFormatter:function(value,index){
+        let unit=chartDataFormat.getUnit(5);
+        return unit.compute(value,index);
+      },
+      setSeries:function(series){
+        this.option.series=series;
+        if(!this.chart){
+          this.chart=echarts.init(document.getElementById(this.chartId));
+        }
+        this.chart.clear();
+        this.chart.setOption(this.option)
+      },
+      startLoading:function(){
+        this.$refs.loading.startLoading();
+      },
+      endLoading:function(){
+        this.$refs.loading.endLoading();
+      }
+    },
+    mounted() {
+      this.chart=echarts.init(document.getElementById(this.chartId));
+      this.chart.setOption(this.option);
     },
     watch:{
 
+    },
+    destroyed() {
+      if(this.chart){
+        this.chart.clear();
+      }
     }
   }
 </script>
 
 <style scoped>
-
+.chart-room{
+  width: 95%;
+  height: 100%;
+  position: relative;
+}
 </style>