fix: add-module按钮增加tip；地图简版
This commit is contained in:
chenjinsong
@@ -50,6 +50,7 @@ const cn = {
|
||||
changePwd: "修改密码",
|
||||
createCabinet: "创建机柜",
|
||||
createModel: "创建模型",
|
||||
createModule: "创建模块",
|
||||
createMib: "创建MIB",
|
||||
exportExcel: "导出",
|
||||
importExcel: "导入",
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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: randomcolor()
|
||||
areaColor: "white"
|
||||
}
|
||||
}
|
||||
|
||||
}]
|
||||
}
|
||||
})
|
||||
});
|
||||
//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:{
|
||||
|
||||
@@ -140,35 +140,31 @@
|
||||
const mapOptions={
|
||||
geo:{
|
||||
map: '',
|
||||
|
||||
roam:'scale',//鼠标是否可以控制缩放
|
||||
scaleLimit:{
|
||||
min:0.7,
|
||||
max:1.5
|
||||
},
|
||||
// center:[],//当前视角的中心点，用经纬度表示
|
||||
roam: true,//鼠标是否可以控制缩放
|
||||
center: [67.45, 48],//当前视角的中心点，用经纬度表示
|
||||
//center: [-127.45, -48],//当前视角的中心点，用经纬度表示
|
||||
zoom: 6,
|
||||
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;
|
||||
},
|
||||
|
||||
@@ -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")}} : {{(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 VueCountUp from 'vue-countupjs'
|
||||
import timePicker from '../../../common/timePicker';
|
||||
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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user