|
@@ -32,11 +32,83 @@ export default {
|
|
|
},
|
|
|
sjChartType:{
|
|
|
type:String
|
|
|
+ },
|
|
|
+ envType:{
|
|
|
+ type:String,
|
|
|
+ default:'Tdb'
|
|
|
+ },
|
|
|
+ tempColor:{
|
|
|
+ default:false
|
|
|
}
|
|
|
},
|
|
|
data(){
|
|
|
return {
|
|
|
- chartInit:null
|
|
|
+ chartInit:null,
|
|
|
+ envMap:{
|
|
|
+ 'Tdb':{
|
|
|
+ name:'温度',
|
|
|
+ unit:"°C",
|
|
|
+ color:"#0091FF",
|
|
|
+ avg:"avgTemp",
|
|
|
+ param:[
|
|
|
+ {name:"偏冷占比",numName:"偏冷",color:"#0091FF",key:"coldProprotion"},
|
|
|
+ {name:"达标占比",numName:"达标",color:"#ffffff",key:"normalProprotion",centerShow:true},
|
|
|
+ {name:"偏热占比",numName:"偏热",color:"#F9908B",key:"hotProprotion"},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ 'CO2':{
|
|
|
+ name:'CO₂',
|
|
|
+ unit:"ppm",
|
|
|
+ color:"#2EA121",
|
|
|
+ avg:"avgCo2",
|
|
|
+ param:[
|
|
|
+ {name:"正常",color:"#ffffff",key:"co2NormalProprotion",centerShow:true},
|
|
|
+ {name:"超标",color:"#DCAA04",key:"co2AbNormalProprotion"},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ 'HCHO':{
|
|
|
+ name:'甲醛',
|
|
|
+ unit:"mg/m³",
|
|
|
+ color:"#2EA121",
|
|
|
+ avg:"avgHcho",
|
|
|
+ param:[
|
|
|
+ {name:"正常",color:"#ffffff",key:"hchoNormalProprotion",centerShow:true},
|
|
|
+ {name:"超标",color:"#C6322B",key:"hchoAbNormalProprotion"},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ 'RH':{
|
|
|
+ name:'相对湿度',
|
|
|
+ unit:"%",
|
|
|
+ color:"#2EA121",
|
|
|
+ avg:"avgRh",
|
|
|
+ param:[
|
|
|
+ {name:"偏湿",color:"#0091FF",key:"rhPartialHumidityProprotion"},
|
|
|
+ {name:"正常",color:"#ffffff",key:"rhNormalProprotion",centerShow:true},
|
|
|
+ {name:"偏干",color:"#F58300",key:"rhPartialDryProprotion"},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ 'PM2d5':{
|
|
|
+ name:'PM2.5',
|
|
|
+ unit:"μg/m³",
|
|
|
+ color:"#2EA121",
|
|
|
+ avg:"avgPm2d5",
|
|
|
+ param:[
|
|
|
+ {name:"正常",color:"#ffffff",key:"pm2d5NormalProprotion",centerShow:true},
|
|
|
+ {name:"超标",color:"#dcaa04",key:"pm2d5AbNormalProprotion"},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ 'Num':{
|
|
|
+ name:'温度',
|
|
|
+ unit:"°C",
|
|
|
+ color:"#0091FF",
|
|
|
+ avg:"avgTemp",
|
|
|
+ param:[
|
|
|
+ {name:"偏冷数量",color:"#0091FF",key:"coldSpaceNum"},
|
|
|
+ {name:"达标数量",color:"#ffffff",key:"normalSpaceNum",centerShow:true},
|
|
|
+ {name:"偏热数量",color:"#F9908B",key:"hotSpaceNum"},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
@@ -113,7 +185,7 @@ export default {
|
|
|
//名称
|
|
|
var text = params[i].marker +params[i].seriesName;
|
|
|
//值
|
|
|
- var value = (params[i].value || '--');
|
|
|
+ var value = (params[i].value||params[i].value==0)?params[i].value:'--';
|
|
|
value = this.yType=="rate"?(value!=='--'?((value*100).toFixed(1)+'%'):'--'):value;
|
|
|
showHtm+= text+ ':' + value +'<br>'
|
|
|
}
|
|
@@ -196,26 +268,22 @@ export default {
|
|
|
show: false
|
|
|
},
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: this.yType=="rate"?'偏冷占比':'偏冷数量',
|
|
|
- type: 'bar',
|
|
|
- stack: '达标率',
|
|
|
- data: this.yType=="rate"?data.coldProprotion:data.coldSpaceNum,
|
|
|
- barWidth: '50%',
|
|
|
- barMaxWidth:'50'
|
|
|
- },
|
|
|
- {
|
|
|
- name: this.yType=="rate"?'达标占比':'达标数量',
|
|
|
- data: this.yType=="rate"?data.normalProprotion:data.normalSpaceNum,
|
|
|
- stack: '达标率',
|
|
|
- type: 'bar',
|
|
|
- itemStyle: {
|
|
|
- barBorderColor: '#D6DADF',
|
|
|
- },
|
|
|
- barWidth: '50%',
|
|
|
- barMaxWidth:'50',
|
|
|
- label: {
|
|
|
+ series: []
|
|
|
+ };
|
|
|
+ let envType = this.yType!=="rate"?"Num":this.envType;
|
|
|
+ this.envMap[envType].param.forEach(item=>{
|
|
|
+ let obj= {
|
|
|
+ name: item.name,
|
|
|
+ type: 'bar',
|
|
|
+ stack: '达标率',
|
|
|
+ data: data[item.key],
|
|
|
+ barWidth: '50%',
|
|
|
+ barMaxWidth:'50',
|
|
|
+ color:item.color
|
|
|
+ };
|
|
|
+ if(item.centerShow){
|
|
|
+ obj.itemStyle={barBorderColor: '#D6DADF'};
|
|
|
+ obj.label={
|
|
|
normal: {
|
|
|
show: (this.yType=="rate"&&this.xType=='day'||(this.sjChartType))?true:false,
|
|
|
position: 'inside',
|
|
@@ -224,21 +292,16 @@ export default {
|
|
|
return !params.value?'':`${parseInt(params.value*100)}%`;
|
|
|
}
|
|
|
},
|
|
|
+ }
|
|
|
+ }
|
|
|
+ option.series.push(obj)
|
|
|
+ })
|
|
|
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: this.yType=="rate"?'偏热占比':'偏热数量',
|
|
|
- stack: '达标率',
|
|
|
- data: this.yType=="rate"?data.hotProprotion:data.hotSpaceNum,
|
|
|
- type: 'bar',
|
|
|
- barMaxWidth:'50',
|
|
|
- barWidth: '50%',
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
+ // 各房间日均温度分布
|
|
|
if(this.normalChart){
|
|
|
- let normalDatex=["<=23","23~24","24~25","25~26","26~27",">27"]
|
|
|
+ // ["<=23","23~24","24~25","25~26","26~27",">27"]
|
|
|
+ // let normalDatex=["≤18","18<X≤20","20<X≤22","22<X≤24","24<X≤26","26<X≤28","X>28"];
|
|
|
+ let normalDatex=["≤18","18~20","20~22","22~24","24~26","26~28","X>28"];
|
|
|
option.xAxis.data=normalDatex;
|
|
|
option.grid.top="45"
|
|
|
option.title={
|
|
@@ -251,12 +314,39 @@ export default {
|
|
|
stack: '达标率',
|
|
|
color:"#82c7fc",
|
|
|
barWidth: '30%',
|
|
|
- data: data[0]?[data[0].oneSpaceNum,data[0].twoSpaceNum,data[0].threeSpaceNum,data[0].fourSpaceNum,data[0].fiveSpaceNum,data[0].sixSpaceNum]:[]
|
|
|
+ data: []
|
|
|
}
|
|
|
]
|
|
|
+ if(this.tempColor){
|
|
|
+ option.series[0].itemStyle= {
|
|
|
+ normal:{
|
|
|
+ color: function (params){
|
|
|
+ let colorList =["#4a88c0","#adcce9","#ffffff","#ffffff","#ffffff","#f5b588","#ff0000"];
|
|
|
+ return colorList[params.dataIndex];
|
|
|
+ },
|
|
|
+ barBorderColor: '#eaeaea',
|
|
|
+ borderType : 'solid',
|
|
|
+ borderWidth:1,
|
|
|
+ },
|
|
|
+ //鼠标悬停时:
|
|
|
+ emphasis: {
|
|
|
+ barBorderColor: '#eaeaea',
|
|
|
+ borderType : 'solid',
|
|
|
+ borderWidth:1,
|
|
|
+ // shadowBlur: 10,
|
|
|
+ // shadowOffsetX: 0,
|
|
|
+ // shadowColor: 'rgba(0, 145, 255, 0.5)'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ };
|
|
|
+ if(data[0]){
|
|
|
+ option.series[0].data=[data[0].oneSpaceNum,data[0].twoSpaceNum,data[0].threeSpaceNum,data[0].fourSpaceNum,data[0].fiveSpaceNum,data[0].sixSpaceNum,data[0].sevenSpaceNum];
|
|
|
+ }
|
|
|
}
|
|
|
+ // 各达标区间空间数量分布
|
|
|
if(this.weekNormalChart){
|
|
|
- let normalDatex=["≥90%","80%~90%","70%~80%","<70%"];
|
|
|
+ // ["≥90%","80%~90%","70%~80%","<70%"]
|
|
|
+ let normalDatex=["90%~100%","80%~90%","70%~80%","60%~70%","50%~60%","40%~50%","30%~40%","20%~30%","10%~20%","0%~10%"];
|
|
|
option.xAxis.data=normalDatex;
|
|
|
option.xAxis.name="达标区间";
|
|
|
option.yAxis.show=false;
|
|
@@ -275,22 +365,30 @@ export default {
|
|
|
{name: '空间数量',
|
|
|
type: 'bar',
|
|
|
stack: '数量',
|
|
|
- color:"#82c7fc",
|
|
|
+ // color:"#82c7fc",
|
|
|
barWidth: '30%',
|
|
|
itemStyle: {
|
|
|
- //通常情况下:
|
|
|
- normal:{
|
|
|
+
|
|
|
+ //通常情况下:
|
|
|
+ normal:{
|
|
|
//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
|
|
|
color: function (params){
|
|
|
- var colorList = ['#0091FF','#0091FF','#0091FF','#0091FF'];
|
|
|
+ // var colorList = ['#0091FF','#0091FF','#0091FF','#0091FF'];
|
|
|
+ let colorList =["#ffffff","#f2f2f2","#d9d9d9","#bfbfbf","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000"];
|
|
|
return colorList[params.dataIndex];
|
|
|
- }
|
|
|
+ },
|
|
|
+ barBorderColor: '#eaeaea',
|
|
|
+ borderType : 'solid',
|
|
|
+ borderWidth:1,
|
|
|
},
|
|
|
//鼠标悬停时:
|
|
|
emphasis: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ barBorderColor: '#eaeaea',
|
|
|
+ borderType : 'solid',
|
|
|
+ borderWidth:1,
|
|
|
+ // shadowBlur: 10,
|
|
|
+ // shadowOffsetX: 0,
|
|
|
+ // shadowColor: 'rgba(0, 145, 255, 0.5)'
|
|
|
}
|
|
|
},
|
|
|
label: {
|
|
@@ -304,9 +402,15 @@ export default {
|
|
|
},
|
|
|
|
|
|
},
|
|
|
- data: data?[data.oneSpaceNum,data.twoSpaceNum,data.threeSpaceNum,data.foureSpaceNum]:[]
|
|
|
+ data: []
|
|
|
}
|
|
|
]
|
|
|
+ if(data){
|
|
|
+ option.series[0].data=[
|
|
|
+ data.oneSpaceNum,data.twoSpaceNum,data.threeSpaceNum,data.fourSpaceNum,data.fiveSpaceNum,
|
|
|
+ data.sixSpaceNum,data.sevenSpaceNum,data.eightSpaceNum,data.nineSpaceNum,data.tenSpaceNum
|
|
|
+ ];
|
|
|
+ }
|
|
|
}
|
|
|
if(this.numberChart){
|
|
|
option.grid.top="22"
|
|
@@ -377,6 +481,14 @@ export default {
|
|
|
},
|
|
|
deep:true,
|
|
|
immediate: true,
|
|
|
+ },
|
|
|
+ envType(n){
|
|
|
+ this.envType=n;
|
|
|
+ console.log(this.envType,"this.envType")
|
|
|
+ if (this.chartInit) {
|
|
|
+ this.chartInit.clear();
|
|
|
+ }
|
|
|
+ this.drawChart(this.chartId,this.chartDate)
|
|
|
}
|
|
|
}
|
|
|
}
|