fix:overview 样式调整

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

@@ -16,13 +16,15 @@
   import loading from "../../../common/loading";
   import uuidv1 from "uuid/v1";
   import chartConfig from './chartConfig'
+  import json from "./geoJson";
   export default {
     name: "chart",
     components:{
       'loading':loading,
     },
     props:{
-      chartTitle:{type:String}
+      chartTitle:{type:String},
+      chartType:{type:String,default:'line'},
     },
     data(){
       return {
@@ -32,11 +34,13 @@
       }
     },
     created() {
-      chartConfig.setSeries(this.series);
+      this.option=chartConfig.getOption(this.chartType);
-      chartConfig.setTooltipFormatter(this.tooltipFormatter);
+      this.$set(this.option,'series',this.series);
-      chartConfig.setTooltipPostion(this.tooltipPosition);
+      if(this.chartType == 'line'){
-      chartConfig.setYAxisLabelFormatter(this.yAxisFormatter);
+        this.$set(this.option.tooltip,'formatter',this.tooltipFormatter);
-      this.option=chartConfig.getCommonOption();
+        this.$set(this.option.tooltip,'position',this.tooltipPosition);
+        this.$set(this.option.yAxis,'formatter',this.yAxisFormatter);
+      }
     },
     methods:{
       tooltipPosition:function(point,params,dom,rect,size){
@@ -108,6 +112,11 @@
         if(!this.chart){
           this.chart=echarts.init(document.getElementById(this.chartId));
         }
+        if(this.chartType == 'map'){
+          console.log(json)
+          console.log(this.option)
+          echarts.registerMap('map',json);
+        }
         this.chart.clear();
         this.chart.setOption(this.option)
       },
@@ -120,7 +129,6 @@
     },
     mounted() {
       this.chart=echarts.init(document.getElementById(this.chartId));
-      this.chart.setOption(this.option);
     },
     watch:{
 

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

@@ -1,5 +1,6 @@
 <script>
     import chartDataFormat from "../../../charts/chartDataFormat";
+
     const commonOption={
       title:{
         show:false,
@@ -64,22 +65,31 @@
       useUTC: false,//使用本地时间
       series: [],
     }
-
+    const mapOptions={
-    export default {
+      tooltip : {
-      getCommonOption:function(){
+        trigger: 'item',
-        return commonOption;
+        type:'cross',
+        backgroundColor:"#ff7f50",//提示标签背景颜色
+        textStyle:{color:"#fff"}, //提示标签字体颜色
+        alwaysShowContent: false,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: 'rgba(0,0,0,0.2)',
+        backgroundColor: 'rgba(255,255,255,0.9)',
+        padding: 0,
+        textStyle: {
+          fontSize: 12,
+          color: '#333'
         },
-      setTooltipPostion:function(positionFunc){
-        commonOption.tooltip.position=positionFunc;
       },
-      setTooltipFormatter:function(formatFunc){
-        commonOption.tooltip.formatter=formatFunc;
-      },
-      setYAxisLabelFormatter:function(formatFunc){
-        commonOption.yAxis.axisLabel.formatter=formatFunc;
-      },
-      setSeries:function(series){
-        commonOption.series=series;
     }
+    const chartTypes={
+      line:{name:'line',option:commonOption},
+      map:{name:'map',option:mapOptions},
+    }
+    export default {
+      getOption:function(type){
+        return Object.assign({},chartTypes[type].option);
+      },
     }
 </script>

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

@@ -63,7 +63,7 @@
   width: 100%;
 }
 .overview-content .content-row-box{
-  width: 99%;
+  width: 100%;
   display: flex;
   justify-content: space-between;
   align-content: flex-start;
@@ -118,7 +118,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 5px;
 }
 .sub-title{
   display: inline-block;

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

@@ -46,7 +46,9 @@
                   <div style="flex: 2;">
                     <table-box :pop-data="dataCenterStatData" ref="dataCenterTab" ></table-box>
                   </div>
-                  <div style="flex: 3;"></div>
+                  <div style="flex: 3;">
+                    <chart-box chart-title="DataCenter" chart-type="map" ref="dataCenterMap"></chart-box>
+                  </div>
                 </div>
               </div>
             </div>
@@ -60,13 +62,13 @@
                     <el-option v-for="(item,index) in topNFilter.tops" :label="item.label" :value="item.value" :key="item.value+index"></el-option>
                   </el-select>-->
                   <el-dropdown trigger="click">
-                    <span>{{topNFilter.options.find((item)=>{return item.value==topNFilter.default})['label']}}<i class="el-icon-arrow-down el-icon--right"></i></span>
+                    <span class="clickable">{{topNFilter.options.find((item)=>{return item.value==topNFilter.default})['label']}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                     <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item v-for="(item,index) in topNFilter.options" :key="item.value+index" @click.native="()=>{topNFilter.default=item.value;topNChange();}">{{item.label}}</el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
                   <el-dropdown trigger="click">
-                    <span>{{topNFilter.tops.find((item)=>{return item.value==topNFilter.defaultTop})['label']}}<i class="el-icon-arrow-down el-icon--right"></i></span>
+                    <span class="clickable">{{topNFilter.tops.find((item)=>{return item.value==topNFilter.defaultTop})['label']}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                     <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item v-for="(item,index) in topNFilter.tops" :key="item.value+index" @click.native="()=>{topNFilter.defaultTop=item.value;topNChange();}">{{item.label}}</el-dropdown-item>
                     </el-dropdown-menu>
@@ -91,6 +93,7 @@
   import tableBox from "./tableBox";
   import chart from "./chart";
   import axios from 'axios';
+  import json from './geoJson'
   export default {
     name: "overview",
     components:{
@@ -121,6 +124,7 @@
         },
         chartSeries:[],
         alertRuleStatData:{},
+        dataCenterMapSeries:[],
         isGodView:false,
         sysTime:'',
         sysDate:'',
@@ -139,6 +143,7 @@
         this.topNChange();
         this.queryAlertRuleStatData();
         this.queryAlertTrendData();
+        this.queryDataCenterMapData();
       },
       queryAssetData:function(){
         this.$refs.assetTab.startLoading();
@@ -166,11 +171,15 @@
               total:{ //左侧上方大图标及total信息
                 show:true,
                 direction:'row',
-                num:`<span style="font-size:1.875rem;"><span style="color: #1166bb">${totalData.total}</span>/<span style="color:#90EE90;">${totalData.inStock}</span></span>`,
+                num:totalData.inStock,
                 title:this.$t('dashboard.overview.asset.title'),
                 showPopover:true,
                 icon:'nz-icon nz-icon-asset',
                 popover:[
+                  {
+                    label:this.$t('dashboard.overview.asset.alertTotal'),
+                    value:totalData.total
+                  },
                   {
                     label:this.$t('dashboard.overview.asset.inStock'),
                     value:totalData.inStock
@@ -731,6 +740,41 @@
           }
         })
       },
+      queryDataCenterMapData:function(){
+        this.dataCenterMapSeries=[{
+          name: 'DataCenter',
+          type: 'map',
+          map:'map',
+          roam:true,
+          label: {
+            normal: {
+              show: true
+            },
+            emphasis: {
+              show: true
+            }
+          },
+          layoutCenter: ['50%', '50%'],   //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小
+          layoutSize:500,
+          itemStyle:{
+            normal:{label:{show:true}},
+            emphasis:{label:{show:true}}
+          },
+          data:[
+            {name:'Alabama', value: 40000.34,},
+            {name:'Alaska', value: 38000},
+            {name:'Arizona', value: 18000},
+            {name:'Arkansas', value: 15092},
+            {name:'California', value: 28000},
+            {name:'Colorado', value: 12000},
+            {name:'Connecticut', value: 32000},
+            {name:'Delaware', value: 5100},
+            {name:'District of Columbia', value: 2200},
+            {name:'Florida', value: 4918}
+          ]
+        }]
+        this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
+      },
       /*加载数据 end*/
       getAssetTabTitle:function(){
         switch (this.typeFilter) {