fix:overview 样式调整
This commit is contained in:
wangwenrui
@@ -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);
|
||||
chartConfig.setTooltipFormatter(this.tooltipFormatter);
|
||||
chartConfig.setTooltipPostion(this.tooltipPosition);
|
||||
chartConfig.setYAxisLabelFormatter(this.yAxisFormatter);
|
||||
this.option=chartConfig.getCommonOption();
|
||||
this.option=chartConfig.getOption(this.chartType);
|
||||
this.$set(this.option,'series',this.series);
|
||||
if(this.chartType == 'line'){
|
||||
this.$set(this.option.tooltip,'formatter',this.tooltipFormatter);
|
||||
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:{
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import chartDataFormat from "../../../charts/chartDataFormat";
|
||||
|
||||
const commonOption={
|
||||
title:{
|
||||
show:false,
|
||||
@@ -64,22 +65,31 @@
|
||||
useUTC: false,//使用本地时间
|
||||
series: [],
|
||||
}
|
||||
|
||||
export default {
|
||||
getCommonOption:function(){
|
||||
return commonOption;
|
||||
const mapOptions={
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user