fix: add-module按钮增加tip；地图简版

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

@@ -50,6 +50,7 @@ const cn = {
     changePwd: "修改密码",
     createCabinet: "创建机柜",
     createModel: "创建模型",
+    createModule: "创建模块",
     createMib: "创建MIB",
     exportExcel: "导出",
     importExcel: "导入",

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

@@ -52,6 +52,7 @@ const en = {
     createDatacenter:'Create Data Center',
     createCabinet:'Create cabinet',
     createModel:'Create model',
+    createModule: 'Create module',
     createMib:'Create MIB',
     exportExcel:'Export',
     importExcel:'Import',

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

@@ -24,7 +24,7 @@
                   </div>
                 </template>
                 <div class="sidebar-info sub-sidebar-info" >
-                  <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule">
+                  <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule" :title="$t('overall.createModule')">
                     <i class="nz-icon nz-icon-create-square"></i>
                   </div>
                   <template v-else>

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

@@ -24,6 +24,8 @@
   import bus from "../../../../libs/bus";
   import EleResize from "../../../common/js/divResize";
   import {randomcolor} from "../../../common/js/radomcolor/randomcolor";
+  //import * as mapGeoJson from "../../../common/js/world";
+
   export default {
     name: "chart",
     components:{
@@ -73,7 +75,7 @@
       },
       setSeries:function(series, legend, legendData){
         if(!this.chart){
-          this.chart = echarts.init(document.getElementById(this.chartId));
+          this.chartInit();
         }
         this.series = series;
         if(this.chartType == 'map'){
@@ -99,31 +101,55 @@
         }
 
         if(this.chartType == 'map'){
-          let geoObj=JSON.parse(this.map.geoJson.geoJson)
+          let geoObj = this.map.geoJson.geoJson;
           geoObj.features.forEach(item=>{
             if(this.option.geo.regions){
               this.option.geo.regions.push({
                 name:item.properties.name,
                 itemStyle: {
                   normal: {
-                    areaColor: randomcolor()
+                    areaColor: "white"
                   }
                 }
-
               })
             }else{
               this.option.geo.regions=[{
                 name:item.properties.name,
                 itemStyle: {
                   normal: {
-                    // areaColor: item.properties.stroke
+                    areaColor: "white"
-                    areaColor: randomcolor()
                   }
                 }
-
               }]
             }
-          })
+          });
+          //let timer = setTimeout(()=>{}, 0);
+          //地图拖动、缩放时动态读取地图数据
+          /*this.chart.on("georoam", params => {
+            //console.info(this.map.geoJson.geoJson.features[0]);
+            clearTimeout(timer);
+            timer = setTimeout(() => {  //延时触发，0.6秒无操作再更新地图数据
+              let dx = params.dx; //拖动x位移
+              let dy = params.dy; //拖动y位移
+              if (dx || dy) {
+                let option = this.chart.getOption();
+                let center = option.geo[0].center; //拖动后的中心点
+                let newJson = mapGeoJson.getProvinceJson(center);
+                this.map.geoJson.geoJson = newJson;
+                //console.info(this.map.geoJson.geoJson.features.length);
+                //this.clearChart();
+                //this.chartInit();
+                //echarts.registerMap(this.map.name, this.map.geoJson);
+              }
+
+              //this.chart.setOption(option, true);
+              //console.info(this.map.geoJson.geoJson.features.length);
+            }, 600);
+          });*/
+          /*this.chart.on("click", params => {
+            let option = this.chart.getOption();
+            console.info(option.geo[0].center);
+          });*/
         }
 
         this.modifyOption('tooltip','position',this.defaultTooltipPosition)
@@ -376,9 +402,12 @@
         this.chart.setOption(option);
         this.chart.resize()
       },
+      chartInit() {
+        this.chart=echarts.init(document.getElementById(this.chartId));
+      }
     },
     mounted() {
-      this.chart=echarts.init(document.getElementById(this.chartId));
+      this.chartInit();
       EleResize.on(this.$el,this.resize);
     },
     watch:{

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

@@ -140,35 +140,31 @@
     const mapOptions={
       geo:{
         map: '',
-
+        roam: true,//鼠标是否可以控制缩放
-        roam:'scale',//鼠标是否可以控制缩放
+        center: [67.45, 48],//当前视角的中心点，用经纬度表示
-        scaleLimit:{
+        //center: [-127.45, -48],//当前视角的中心点，用经纬度表示
-          min:0.7,
+        zoom: 6,
-          max:1.5
-        },
-        // center:[],//当前视角的中心点，用经纬度表示
         label: { //控制显示地图名称
           normal: {
-            show: true
+            show: false
           },
           emphasis: {
-            show: true
+            show: false
           },
         },
-        // itemStyle:{
-        //   areaColor:'#ff0000', //设置默认状态下地图颜色
-        //   color:'#ffff00'
-        //
-        // },
         emphasis:{
           itemStyle: {
-            areaColor:'white'
+            areaColor:'lightgray'
           }
         },
         left:0,
         top:0,
         right:0,
         bottom:0,
+        scaleLimit: {
+          min: 3,
+          max: 15
+        }
       },
       tooltip : {
         trigger: 'item',
@@ -180,6 +176,7 @@
         borderWidth: 1,
         padding: 0,
       },
+      backgroundColor: "#BDE3FD"
     };
     const assetTypePie = {
       title: {
@@ -237,10 +234,10 @@
         data: [],
         axisLabel: {
           show: true,
-          fontSize: 14,
+          fontSize: 12,
           formatter: function(value) {
             if (value.length > 10) {
-              return value.substring(0, 6) + "...";
+              return value.substring(0, 8) + "...";
             }
             return value;
           },

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

@@ -74,7 +74,7 @@
                 <vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup>
                 <span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
               </div>
-              <div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
+              <div class="content-col-content-title">{{$t("overall.alert")}}</div>
             </div>
             <div class="content-alert-num">{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</div>
           </div>
@@ -148,7 +148,7 @@
             </span>
           </div>
           <div class="content-col-content">
-            <chart-box axis-tooltip="x" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="assetBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
+            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="ruleBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
             <chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
           </div>
         </div>
@@ -183,8 +183,9 @@
   import chartDataFormat from "../../../charts/chartDataFormat";
   import axios from 'axios';
   import bus from '../../../../libs/bus';
-  import timePicker from '../../../common/timePicker'
+  import timePicker from '../../../common/timePicker';
-  import VueCountUp from 'vue-countupjs'
+  import VueCountUp from 'vue-countupjs';
+  import * as world from "../../../common/js/world";
 
   var timeout; //第三行第三个图的dropdown下拉菜单timeout
   export default {
@@ -654,19 +655,33 @@
       },
       queryMapChartGeoJson() {
         this.$refs.dataCenterMap.startLoading();
-        this.$get('/sysConfig?paramKey=geoJson').then(response=>{
+        /*this.$get('/sysConfig?paramKey=geoJson').then(response=>{
           this.$refs.dataCenterMap.endLoading();
           if(response.code == 200){
             this.map={
               name:'Kazakhstan',
               geoJson:response.data.paramKey
             }
+            console.info(this.map)
             setTimeout(()=>{this.queryDataCenterMapData();},200)
           }else{
             this.$refs.dataCenterMap.endLoading();
             console.error('loading map info faild')
           }
-        })
+        })*/
+        //let m = {
+        /*this.map = {
+          name: "Kazakhstan",
+          geoJson: {geoJson: JSON.stringify({"type":"FeatureCollection","features":[
+              {"type":"Feature","id":"KAZ","properties":{"name":"Kazakhstan"},"geometry":{"type":"Polygon","coordinates":[[[70.962315,42.266154],[70.388965,42.081308],[69.070027,41.384244],[68.632483,40.668681],[68.259896,40.662325],[67.985856,41.135991],[66.714047,41.168444],[66.510649,41.987644],[66.023392,41.994646],[66.098012,42.99766],[64.900824,43.728081],[63.185787,43.650075],[62.0133,43.504477],[61.05832,44.405817],[60.239972,44.784037],[58.689989,45.500014],[58.503127,45.586804],[55.928917,44.995858],[55.968191,41.308642],[55.455251,41.259859],[54.755345,42.043971],[54.079418,42.324109],[52.944293,42.116034],[52.50246,41.783316],[52.446339,42.027151],[52.692112,42.443895],[52.501426,42.792298],[51.342427,43.132975],[50.891292,44.031034],[50.339129,44.284016],[50.305643,44.609836],[51.278503,44.514854],[51.316899,45.245998],[52.16739,45.408391],[53.040876,45.259047],[53.220866,46.234646],[53.042737,46.853006],[52.042023,46.804637],[51.191945,47.048705],[50.034083,46.60899],[49.10116,46.39933],[48.593241,46.561034],[48.694734,47.075628],[48.057253,47.743753],[47.315231,47.715847],[46.466446,48.394152],[47.043672,49.152039],[46.751596,49.356006],[47.54948,50.454698],[48.577841,49.87476],[48.702382,50.605128],[50.766648,51.692762],[52.328724,51.718652],[54.532878,51.02624],[55.716941,50.621717],[56.777961,51.043551],[58.363291,51.063653],[59.642282,50.545442],[59.932807,50.842194],[61.337424,50.79907],[61.588003,51.272659],[59.967534,51.96042],[60.927269,52.447548],[60.739993,52.719986],[61.699986,52.979996],[60.978066,53.664993],[61.436591,54.006265],[65.178534,54.354228],[65.666876,54.601267],[68.1691,54.970392],[69.068167,55.38525],[70.865267,55.169734],[71.180131,54.133285],[72.22415,54.376655],[73.508516,54.035617],[73.425679,53.48981],[74.384845,53.546861],[76.8911,54.490524],[76.525179,54.177003],[77.800916,53.404415],[80.03556,50.864751],[80.568447,51.388336],[81.945986,50.812196],[83.383004,51.069183],[83.935115,50.889246],[84.416377,50.3114],[85.11556,50.117303],[85.54127,49.692859],[86.829357,49.826675],[87.35997,49.214981],[86.598776,48.549182],[85.768233,48.455751],[85.720484,47.452969],[85.16429,47.000956],[83.180484,47.330031],[82.458926,45.53965],[81.947071,45.317027],[79.966106,44.917517],[80.866206,43.180362],[80.18015,42.920068],[80.25999,42.349999],[79.643645,42.496683],[79.142177,42.856092],[77.658392,42.960686],[76.000354,42.988022],[75.636965,42.8779],[74.212866,43.298339],[73.645304,43.091272],[73.489758,42.500894],[71.844638,42.845395],[71.186281,42.704293],[70.962315,42.266154]]]}}
+            ]})}
+        };*/
+        this.map = {
+          name: "world",
+          geoJson: {geoJson: world.worldData}
+        };
+
+        setTimeout(()=>{this.queryDataCenterMapData();this.$refs.dataCenterMap.endLoading();},200)
       },
       queryDataCenterMapData() {
         let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
@@ -764,7 +779,7 @@
               name: 'alertStatByRule',
               data: seriesData,
               type: 'bar',
-              barMaxWidth: 20,
+              barMaxWidth: 15,
               itemStyle: {
                 color: function(params) {
                   let colorList = ["#ECCD82", "#99CEB9"];;
@@ -797,7 +812,7 @@
               name: 'alertStatByAsset',
               data: seriesData,
               type: 'bar',
-              barMaxWidth: 30,
+              barMaxWidth: 15,
               category: categoryData,
               itemStyle: {
                 color: function(params) {
@@ -810,7 +825,7 @@
                 },
               },
             };
-            this.$refs.assetMessage.modifyOption('xAxis', 'data', categoryData);
+            this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData);
             this.$refs.assetMessage.setSeries(this.messageByAssetSeries);
             this.$refs.assetMessage.endLoading();
           }