feat: overview(部分)

nezha-fronted/src/assets/css/main.css

@@ -11,9 +11,10 @@
 .el-loading-mask .el-loading-spinner{
   background: url(../img/loading.gif) no-repeat;
   background-size: 48px 48px;
-  width: 200px;
+  width: 48px;
-  height: 200px;
+  height: 48px;
   position: relative;
   top: 50%;
-  left: 48.5%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }

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

@@ -1,6 +1,6 @@
 $global-text-color-active: #ee9d3f; // 全局文字active字色
 
-$content-right-background-color: #fcfcfc; //右侧背景色
+$content-right-background-color: #f9f9f9; //右侧背景色
 
 $header-text-color: #e5e5e5; // header默认字色
 $header-text-color-active: #fff; // header高亮字色

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

@@ -587,7 +587,7 @@ li{
   border-top: 1px solid #DCDFE6;
   border-bottom: 1px solid #E4E7ED;
   margin: 0 -6px;
-  background-color: #fcfcfc;
+  background-color: $content-right-background-color;
 }
 .sub-top-tools>div {
   margin-top: 2px;
@@ -1652,7 +1652,7 @@ li{
 }
 .el-table__fixed-right-patch {
   width: 0px !important;
-  background-color: #fcfcfc;
+  background-color: $content-right-background-color;
 }
 .nz-table .el-table__fixed, .nz-table .el-table__fixed-right {
   height: 100% !important;

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

@@ -239,18 +239,26 @@ const en = {
         module:'Module',
         endpoint:'Endpoint',
       },
+      module: {
+        module: "Module",
+      },
+      endpoint: {
+        endpoint: "Endpoint",
+      },
       dataCenter:{
         dataCenter:'Data center',
         cabinet:'Cabinet',
         promServer:'Prom server',
       },
       alert:{
+        alertMessage: 'Alert message',
         level:'Level',
         alertRule:'Alert rule',
         ruleNum:'Rule num',
         alertNum:'Alert num',
-        alertRuleTopN:'According to Alert Rule',
+        alertRuleTopN: 'Top alert message',
-        assetTopN:'According to Asset',
+        assetTopN: 'Top alert message by Asset',
+        moduleTopN: 'Top alert message by Module',
         top:'Top',
         chart:{
           chartTitle:'Alert Trend'

nezha-fronted/src/components/page/dashboard/overview/overview2.scss

@@ -0,0 +1,100 @@
+.overview{
+  height: 100%;
+}
+.overview-right {
+  background-color: $content-right-background-color;
+}
+.overview-content-header{
+  display: flex;
+  padding-top: 10px;
+}
+.overview-content-header .header-title{
+  flex:13;
+  height: 35px;
+  line-height: 35px;
+  font-size: 1.5rem !important;
+  font-weight: 700;
+  margin-left: 15px;
+}
+.overview-content-header .header-tool{
+  flex: 2;
+  height: 35px;
+}
+.header-tool .tool-container{
+  display: flex;
+  text-align: center;
+}
+.tool-container .time{
+  flex: 4;
+  font-size: 1.5rem !important;
+  font-weight: 700;
+  display: inline-block;
+  height: 35px;
+  line-height: 35px;
+  vertical-align: middle;
+}
+.tool-container .date{
+  flex: 4;
+  height: 35px;
+}
+.date .week{
+  font-size: 1.125rem;
+  font-weight: bold;
+}
+.date .sys-date{
+  margin-top: -6px;
+  font-size: .75rem;
+}
+.tool-container .operation{
+  flex: 2;
+  display: inline-block;
+  line-height: 35px;
+}
+.operation .screen-icon{
+  font-size: 1.875rem !important;
+}
+.overview-content{
+  height: calc(100% - 45px);
+  width: 100%;
+}
+.overview-content .content-row-box {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-content: flex-start;
+}
+.overview-content .content-row-box:first-of-type {
+  height: 16%;
+}
+.overview-content .content-row-box:nth-of-type(2) {
+  height: 45%;
+}
+.overview-content .content-row-box:nth-of-type(3) {
+  height: 39%;
+}
+.content-row-box .content-col-box{
+  margin: 5px;
+  display: inline-block;
+  background-color: white;
+  flex: 1;
+}
+.content-col-title {
+  height: 25px;
+  line-height: 25px;
+  border-bottom: 1px solid #f2f2f2;
+  color: #333;
+  font-size: 16px;
+  padding-left: 8px;
+}
+.content-col-content {
+  display: flex;
+  align-items: center;
+  height: calc(100% - 26px);
+  justify-content: center;
+}
+.content-col-content-num {
+  font-size: 40px;
+  color: #333;
+}
+
+

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

@@ -0,0 +1,526 @@
+<template>
+  <div class="overview">
+    <!--左侧菜单栏-->
+    <left-menu>
+      <div slot="content-left" class="overview-left slot-content">
+        <div class="sidebar-title">{{$t('dashboard.title')}}</div>
+        <div class="sidebar-info">
+          <div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
+          <div class="sidebar-info-item sidebar-info-top " @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
+          <div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
+          <div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
+        </div>
+      </div>
+      <!--右侧内容-->
+      <div class="overview-right slot-content" id="mainDisplay" slot="content-right">
+        <!--标题-->
+        <div class="overview-content-header">
+          <div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
+          <div class="header-tool">
+            <div class="tool-container">
+              <div class="time">{{sysTime}}</div>
+              <div class="date">
+                <div class="week">{{sysWeek}}</div>
+                <div class="sys-date">{{sysDate}}</div>
+              </div>
+              <div class="operation" @click="switchFullScreen" ><span ><i class="nz-icon screen-icon" :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}"></i></span></div>
+            </div>
+          </div>
+        </div>
+        <!--内容-->
+        <div class="overview-content">
+          <div class="content-row-box">
+            <div class="content-col-box">
+              <div class="content-col-title">{{$t("dashboard.overview.asset.title")}}</div>
+              <div class="content-col-content content-col-content-num" v-loading="assetLoading">
+                <span>{{(assetData ? assetData.totalStat.total  : "") | numberFormat}}</span>
+              </div>
+            </div>
+            <div class="content-col-box">
+              <div class="content-col-title">{{$t("dashboard.overview.project.project")}}</div>
+              <div class="content-col-content content-col-content-num" v-loading="projectLoading">
+                <span>{{(projectData ? projectData.projectStat.length : "") | numberFormat}}</span>
+              </div>
+            </div>
+            <div class="content-col-box">
+              <div class="content-col-title">{{$t("dashboard.overview.module.module")}}</div>
+              <div class="content-col-content content-col-content-num" v-loading="moduleLoading">
+                <span>{{(moduleData ? moduleData.moduleStat.length  : "") | numberFormat}}</span>
+              </div>
+            </div>
+            <div class="content-col-box">
+              <div class="content-col-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
+              <div class="content-col-content content-col-content-num" v-loading="endpointLoading">
+                <span>{{(endpointData ? endpointData.total : "") | numberFormat}}</span>
+              </div>
+            </div>
+            <div class="content-col-box">
+              <div class="content-col-title">{{$t("dashboard.overview.alert.alertMessage")}}</div>
+              <div class="content-col-content content-col-content-num" v-loading="alertMessageLoading">
+                <span>{{(alertMessageData ? alertMessageData.alertMessageTotal : "") | numberFormat}}</span>
+              </div>
+            </div>
+          </div>
+          <div class="content-row-box">
+            <div class="content-col-box">
+              <div class="content-col-title">{{$t("dashboard.overview.alert.chart.chartTitle")}}</div>
+            </div>
+            <div class="content-col-box">
+              <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
+              <div class="content-col-content">
+                <chart-box chart-title="" chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap"></chart-box>
+              </div>
+            </div>
+          </div>
+          <div class="content-row-box">
+            <div class="content-col-box">
+              <div class="content-col-title">{{$t("dashboard.overview.asset.assetType")}}</div>
+            </div>
+            <div class="content-col-box">
+              <div class="content-col-title">{{$t("dashboard.overview.alert.alertRuleTopN")}}</div>
+            </div>
+            <div class="content-col-box">
+              <div class="content-col-title">{{$t("dashboard.overview.alert.assetTopN")}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </left-menu>
+  </div>
+</template>
+
+<script>
+  import chart from "./chart";
+  import chartDataFormat from "../../../charts/chartDataFormat";
+  import axios from 'axios';
+
+  export default {
+    name: "overview2",
+    components:{
+      'chart-box': chart,
+    },
+    data() {
+      return {
+        //top tool
+        isFullScreen: false,
+        sysTime: '',
+        sysDate: '',
+        sysWeek: '',
+        systemName: localStorage.getItem('nz-sys-name'),
+
+        //data
+        assetLoading: false,
+        assetData: '',
+        projectLoading: false,
+        projectData: '',
+        moduleLoading: false,
+        moduleData: '',
+        endpointLoading: false,
+        endpointData: '',
+        alertMessageLoading: false,
+        alertMessageData: '',
+        map: null,
+        chartSeries:[],
+        alertRuleStatData:{},
+        dataCenterMapSeries:[],
+      }
+    },
+    filters: {
+      numberFormat(num) {
+        let fixed = 1;
+        if (num) {
+          try {
+            num = parseFloat(num);
+            if (num < 1000) {
+              return num;
+            } else if (num < 1000000) {
+              return (num/1000).toFixed(fixed);
+            } else if (num < 1000000000) {
+              return (num/1000000).toFixed(fixed);
+            }
+          } catch (err) {
+            return 0;
+          }
+        }
+        return 0;
+      }
+    },
+    methods: {
+      /*初始化数据 start*/
+      initData() {
+        this.queryAssetData();
+        this.queryProjectData();
+        this.queryModuleData();
+        this.queryEndpointData();
+        this.queryAlertMessageData();
+        this.queryDatacenterData();
+        this.queryMapChartGeoJson();
+      },
+      queryAssetData() {
+        this.assetLoading = true;
+        this.$get('overview/assetStat').then(response => {
+          this.assetLoading = false;
+          if (response.code === 200) {
+            this.assetData = response.data;
+          }
+        })
+      },
+      queryProjectData() {
+        this.projectLoading = true;
+        this.$get('overview/projectStat').then(response => {
+          this.projectLoading = false;
+          if (response.code === 200) {
+            this.projectData = response.data;
+          }
+        })
+      },
+      queryModuleData() {
+        this.moduleLoading = true;
+        this.$get('overview/moduleStat').then(response => {
+          this.moduleLoading = false;
+          if (response.code === 200) {
+            this.moduleData = response.data;
+          }
+        })
+      },
+      queryEndpointData() {
+        this.endpointLoading = true;
+        this.$get('overview/endpointStat').then(response => {
+          this.endpointLoading = false;
+          if (response.code === 200) {
+            this.endpointData = response.data;
+          }
+        })
+      },
+      queryAlertMessageData() {
+        this.alertMessageLoading = true;
+        this.$get('overview/alertMessageStat').then(response => {
+          this.alertMessageLoading = false;
+          if (response.code === 200) {
+            this.alertMessageData = response.data;
+          }
+        })
+      },
+      queryDatacenterData() {
+        this.$get('overview/datacenterStat').then(response => {
+          if (response.code === 200) {
+            this.alertMessageData = response.data;
+          }
+        })
+      },
+      queryMapChartGeoJson:function(){
+        this.$get('/sysConfig?paramKey=geoJson').then(response=>{
+          if(response.code == 200){
+            this.map={
+              name:'Kazakhstan',
+              geoJson:response.data.paramKey
+            }
+            setTimeout(()=>{this.queryDataCenterMapData();},200)
+          }else{
+            console.error('loading map info faild')
+          }
+        })
+      },
+      queryDataCenterMapData:function(){
+        let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
+        let requests=[axios.get('/idc?pageSize=-1'),axios.get('/overview/datacenterStat')];
+        axios.all(requests).then((result)=>{
+          if(result){
+            let seriesDatas=[];
+            this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
+            let idcInfos=null;
+            let dcStats=null;
+            if(result[0].data && result[0].data.code == 200){
+              idcInfos=result[0].data.data.list;
+            }
+            if(result[1].data && result[1].data.code == 200){
+              dcStats=result[1].data.data.dcStat;
+            }
+            if(idcInfos && dcStats){
+              let dcStatsCopy=Object.assign([],dcStats);
+              dcStatsCopy.sort((a,b)=>{
+                return a.assetTotal - b.assetTotal;
+              });
+              let bigScatter=25;
+              let mediumScatter=20;
+              let smallScatter=15;
+              let maxAssetTotal=dcStatsCopy[dcStatsCopy.length-1].assetTotal;
+
+              let bigBoundary=Number.parseInt(maxAssetTotal/3*2);
+              let mediumBoundary=Number.parseInt(maxAssetTotal/3);
+              for(let dcStat of dcStats){
+                let dcId=dcStat.id;
+                let dcInfo=idcInfos.find((item)=>{
+                  return item.id == dcId ;
+                })
+                let areaInfo=dcInfo.area;
+                if(areaInfo){
+                  let areaName='';
+                  if(areaInfo.i18n){
+                    areaName=JSON.parse(areaInfo.i18n)[language];
+                  }else{
+                    areaName=areaInfo.name;
+                  }
+                  let symbolSize=mediumScatter;
+                  if(dcStat.assetTotal>=bigBoundary){
+                    symbolSize=bigScatter;
+                  }else if(dcStat.assetTotal<bigBoundary && dcStat.assetTotal>= mediumBoundary){
+                    symbolSize=mediumScatter;
+                  }else{
+                    symbolSize=smallScatter;
+                  }
+
+                  console.log(dcStat.name+'-->'+ symbolSize)
+                  seriesDatas.push({
+                    name:areaName,
+                    value:[areaInfo.longitude,areaInfo.latitude,dcStat],
+                    symbolSize:symbolSize,
+                  })
+                }
+              }
+            }
+            this.$refs.dataCenterMap.modifyOption('tooltip','formatter',this.mapTooltipFormatter)
+            this.dataCenterMapSeries=[{
+              name: 'DataCenter',
+              type: 'scatter',
+              coordinateSystem: 'geo',
+              label: {
+                formatter: '{b}',
+                position: 'right',
+                show: false
+              },
+              itemStyle: {
+                color: 'orange'
+              },
+              emphasis: {
+                label: {
+                  show: true
+                }
+              },
+              data:seriesDatas
+            }]
+            this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
+          }
+        })
+      },
+
+      /*初始化数据 end*/
+
+      mapTooltipFormatter(params){
+        let dcStat = params.data.value[2];
+        let tooltip=`
+            <div class="tooltip">
+                <div style="margin-left: 12px">${dcStat.name}</div>
+                <div class="flex-box">
+                   <div style="width: 60%;">
+                        <table  style="width: 100%;" class="tooltip-table">
+                            <tr ><td colspan="3"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.asset')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.assetTotal}</div></div></td></tr>
+                            <tr>
+                                <td rowspan="2">${this.$t('dashboard.overview.mapTooltip.state')}</td>
+                                <td >${this.$t('dashboard.overview.mapTooltip.inStock')}</td>
+                                <td >${dcStat.assetInStock}</td>
+                            </tr>
+                            <tr>
+                                <td >${this.$t('dashboard.overview.mapTooltip.outStock')}</td>
+                                <td >${dcStat.assetOutStock}</td>
+                            </tr>
+                            <tr>
+                                <td rowspan="2">${this.$t('dashboard.overview.mapTooltip.ping')}</td>
+                                <td >${this.$t('dashboard.overview.mapTooltip.active')}</td>
+                                <td >${dcStat.assetPingUp}</td>
+                            </tr>
+                            <tr>
+                                <td >${this.$t('dashboard.overview.mapTooltip.inactive')}</td>
+                                <td >${dcStat.assetPingDown}</td>
+                            </tr>
+                            <tr>
+                                <td rowspan="3">${this.$t('dashboard.overview.mapTooltip.alert')}</td>
+                                <td >${this.$t('dashboard.overview.mapTooltip.high')}</td>
+                                <td >${dcStat.alertHigh}</td>
+                            </tr>
+                            <tr>
+                                <td >${this.$t('dashboard.overview.mapTooltip.medium')}</td>
+                                <td >${dcStat.alertMedium}</td>
+                            </tr>
+                            <tr>
+                                <td >${this.$t('dashboard.overview.mapTooltip.low')}</td>
+                                <td >${dcStat.alertLow}</td>
+                            </tr>
+                        </table>
+                   </div>
+                   <div style="width: 30%;" class="flex-box column-box">
+                      <div  >
+                        <table style="width: 100%;" class="tooltip-table">
+                            <tr><td colspan="2"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.endpoint')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.endpointTotal}</div></div></td></tr>
+                            <tr>
+                                <td>${this.$t('dashboard.overview.mapTooltip.up')}</td>
+                                <td>${dcStat.endpointUp}</td>
+                            </tr>
+                            <tr>
+                                <td>${this.$t('dashboard.overview.mapTooltip.down')}</td>
+                                <td>${dcStat.endpointDown}</td>
+                            </tr>
+                        </table>
+                      </div>
+                       <div >
+                           <table style="width: 100%;" class="tooltip-table">
+                            <tr><td colspan="2"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.prometheus')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.promTotal}</div></div></td></tr>
+                            <tr>
+                                <td>${this.$t('dashboard.overview.mapTooltip.up')}</td>
+                                <td>${dcStat.promUp}</td>
+                            </tr>
+                            <tr>
+                                <td>${this.$t('dashboard.overview.mapTooltip.down')}</td>
+                                <td>${dcStat.promDown}</td>
+                            </tr>
+                           </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        return tooltip;
+      },
+
+      switchFullScreen:function(){
+        this.isFullScreen=this.judgeFullScreen();
+        if(this.isFullScreen){
+          this.exitFullScreen();
+        }else{
+          this.fullScreen();
+        }
+      },
+      judgeFullScreen:function(){
+        return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
+      },
+      fullScreen:function(){
+        let container=document.getElementById('mainDisplay');
+        let fullScreenFunc=container.requestFullscreen||container.mozRequestFullScreen||container.webkitRequestFullscreen||container.msRequestFullscreen;
+        fullScreenFunc.call(container)
+      },
+      exitFullScreen:function(){
+        if(this.judgeFullScreen()){
+          if(document.exitFullscreen) {
+            document.exitFullscreen();
+          } else if(document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+          } else if(document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+          }
+        }
+      },
+      /*header 时间处理 start*/
+      initDate:function(){
+        this.sysTime=this.getTime();
+        this.sysDate=this.getDate();
+        this.sysWeek=this.getWeek();
+        this.freshTime();
+      },
+      freshTime:function(){
+        let $temp=this;
+        setInterval(function(){
+          $temp.sysTime=$temp.getTime()
+          $temp.sysDate=$temp.getDate();
+          $temp.sysWeek=$temp.getWeek();
+        },1000)
+      },
+      getTime:function(){
+        let date=new Date();
+        let hours=date.getHours()>9?date.getHours():'0'+date.getHours();
+        let minutes=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
+        let seconds=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
+        return hours+':'+minutes+':'+seconds;
+      },
+      getDate:function(){
+        let date=new Date();
+        let years=date.getFullYear();
+        let months=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1);
+        let days=date.getDate()>9?date.getDate():'0'+date.getDate();
+        return years+'-'+months+'-'+days;
+      },
+      getWeek:function(){
+        let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
+        let enWeeks=['SUN','MON','TUE','WED','THU','FRI','SAT'];
+        let cnWeeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
+        let date=new Date();
+        let day=date.getDay();
+        if(language == 'en'){
+          return enWeeks[day];
+        }else if(language == 'cn'){
+          return cnWeeks[day];
+        }else{
+          return enWeeks[day];
+        }
+      },
+      dateFormat:function(fmt, date) {
+        let ret;
+        const opt = {
+          "y+": date.getFullYear().toString(),        // 年
+          "m+": (date.getMonth() + 1).toString(),     // 月
+          "d+": date.getDate().toString(),            // 日
+          "H+": date.getHours().toString(),           // 时
+          "M+": date.getMinutes().toString(),         // 分
+          "S+": date.getSeconds().toString()          // 秒
+          // 有其他格式化字符需求可以继续添加，必须转化成字符串
+        };
+        for (let k in opt) {
+          ret = new RegExp("(" + k + ")").exec(fmt);
+          if (ret) {
+            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+          };
+        };
+        return fmt;
+      },
+      /*header 时间处理end*/
+      jumpTo(data, id) {
+        this.$router.push({
+          path: "/" + data,
+          query: {
+            t: +new Date()
+          }
+        });
+      },
+    },
+    mounted() {
+      this.initDate();
+      this.initData();
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import "./overview2.scss";
+  .tooltip{
+    padding:5px;
+    min-width: 500px;
+  }
+  .tooltip-table{
+    border-spacing: 0px;
+    border-collapse:collapse;
+  }
+  .tooltip-table tr{
+    display: table-row;
+    vertical-align: inherit;
+    border-color: inherit;
+  }
+  .tooltip-table td{
+    min-width: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    text-align: left;
+    border: 1px solid #EBEEF5;
+    display: table-cell;
+    padding:0px 5px ;
+  }
+  .flex-box{
+    display: flex;
+    justify-content: space-around;
+  }
+  .column-box{
+    flex-direction: column;
+    justify-content: space-between !important;
+  }
+</style>

nezha-fronted/src/components/page/project/project.vue

@@ -1120,21 +1120,6 @@
   .control-icon-checked{
     color:#666;
   }
-  .endpoint-query-table .el-loading-spinner .circular{
-    width: 42px;
-    height: 42px;
-    animation: loading-rotate 2s linear infinite;
-    display: none;
-  }
-  .endpoint-query-table .el-loading-spinner{
-    background: url(../../../assets/img/loading.gif) no-repeat;
-    background-size: 48px 48px;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    top: 50%;
-    left: 48.5%;
-  }
   .project .sidebar-info-item{
     margin:0px !important;
   }

nezha-fronted/src/router/index.js

@@ -46,7 +46,7 @@ export default new Router({
         },
         {
           path: 'overview',
-          component: resolve => require(['../components/page/dashboard/overview/overview.vue'],resolve)
+          component: resolve => require(['../components/page/dashboard/overview/overview2.vue'],resolve)
         },
         {
           path: '/project',