update code
parent
54c4869233
commit
0f4c38e89f
102
power.html
102
power.html
|
|
@ -130,7 +130,7 @@
|
|||
style="margin-top: 20px;">
|
||||
暂无数据
|
||||
</div>
|
||||
<power-chart v-else id="eleLoadChart" className="ele-load-chart" width="100%"
|
||||
<power-chart ref="chart2" v-else id="eleLoadChart" className="ele-load-chart" width="100%"
|
||||
height="240px" :render="renderEleLoad" />
|
||||
|
||||
</div>
|
||||
|
|
@ -157,7 +157,7 @@
|
|||
style="margin-top: 20px;">
|
||||
暂无数据
|
||||
</div>
|
||||
<power-chart v-else :key="block3.elKey" id="ele-trendChart"
|
||||
<power-chart ref="chart3" v-else :key="block3.elKey" id="ele-trendChart"
|
||||
className="ele-trend-chart" width="100%" height="240px"
|
||||
:render="renderEleTrendSel" />
|
||||
</div>
|
||||
|
|
@ -340,7 +340,7 @@
|
|||
style="margin-top: 20px;">
|
||||
暂无数据
|
||||
</div>
|
||||
<power-chart v-else :key="block4.elKey" id="current-trendChart"
|
||||
<power-chart ref="chart4" v-else :key="block4.elKey" id="current-trendChart"
|
||||
className="current-trend-chart" width="100%" height="240px"
|
||||
:render="renderCurrentTrendSel" />
|
||||
</div>
|
||||
|
|
@ -349,7 +349,11 @@
|
|||
</el-col>
|
||||
<el-col :span="16">
|
||||
<module-one-1-2 label="区域用电趋势">
|
||||
<power-chart id="area-ele-trendChart" className="area-ele-trend-chart" width="100%"
|
||||
<div v-if="!block5.datas || block5.datas.length==0" class="pw-no-data"
|
||||
style="margin-top: 20px;">
|
||||
暂无数据
|
||||
</div>
|
||||
<power-chart ref="chart5" v-else :key="block5.elKey" id="area-ele-trendChart" className="area-ele-trend-chart" width="100%"
|
||||
height="300px" :render="renderAreaEleTrendSel" />
|
||||
</module-one-1-2>
|
||||
</el-col>
|
||||
|
|
@ -388,7 +392,7 @@
|
|||
<script>
|
||||
var mapDatas = [
|
||||
{
|
||||
projectId: 3,
|
||||
projectId: 1912,
|
||||
url: './power/prj3.png',
|
||||
regions: [
|
||||
{
|
||||
|
|
@ -415,7 +419,7 @@
|
|||
</script>
|
||||
<script>
|
||||
let baseUrl = 'https://aqzg-t.makalu.cc';
|
||||
let projectId = 3;
|
||||
let projectId = 1912;
|
||||
let regionId = 1;
|
||||
var vm = new Vue({
|
||||
el: "#app",
|
||||
|
|
@ -597,7 +601,12 @@
|
|||
this.block2.titles = [];
|
||||
this.block2.datas = [];
|
||||
}
|
||||
this.block2.elKey++;
|
||||
|
||||
if(this.$refs.chart2 && this.block2.datas.length>0){
|
||||
this.$refs.chart2.reLoad();
|
||||
}else{
|
||||
this.block2.elKey++;
|
||||
}
|
||||
});
|
||||
},
|
||||
loadEleTrend() {
|
||||
|
|
@ -641,7 +650,11 @@
|
|||
this.block3.titles = [];
|
||||
this.block3.datas = [];
|
||||
}
|
||||
this.block3.elKey++;
|
||||
if(this.$refs.chart3 && this.block3.datas.length>0){
|
||||
this.$refs.chart3.reLoad();
|
||||
}else{
|
||||
this.block3.elKey++;
|
||||
}
|
||||
});
|
||||
},
|
||||
loadCurrentTrend() {
|
||||
|
|
@ -707,7 +720,11 @@
|
|||
this.block4.datas = [];
|
||||
}
|
||||
this.block4.rotate = this.currentTrendSel == 0 ? 0 : 45;
|
||||
this.block4.elKey++;
|
||||
if(this.$refs.chart4 && this.block4.datas.length>0){
|
||||
this.$refs.chart4.reLoad();
|
||||
}else{
|
||||
this.block4.elKey++;
|
||||
}
|
||||
});
|
||||
},
|
||||
loadAreaEleTrendSel() {
|
||||
|
|
@ -720,9 +737,28 @@
|
|||
postData.endTime = dts.dtEnd;
|
||||
let url = '/api/device/smart_meter/electricity_consumption_trend'
|
||||
this.post(url, postData).then(d => {
|
||||
//debugger
|
||||
let data = d.data?.data || [];
|
||||
if (data.length > 0) { }
|
||||
if (data.length > 0 && data[0].list && data[0].list.length>0) {
|
||||
this.block5.areas=data.map(it=>it.regionName);
|
||||
this.block5.titles=data[0].list.map(it=>it.time);
|
||||
this.block5.datas=data.map(it=>{
|
||||
return {
|
||||
name:it.regionName,
|
||||
type:"line",
|
||||
smooth:true,
|
||||
data:it.list.map(item=>item.statistics)
|
||||
}
|
||||
});
|
||||
}else{
|
||||
this.block5.areas=[];
|
||||
this.block5.titles=[];
|
||||
this.block5.datas=[];
|
||||
}
|
||||
if(this.$refs.chart5 && this.block5.datas.length>0){
|
||||
this.$refs.chart5.reLoad();
|
||||
}else{
|
||||
this.block5.elKey++;
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取智能电表警告计数【预警概况】
|
||||
|
|
@ -1010,7 +1046,7 @@
|
|||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['区域A', '区域B', '区域C', '区域D'],
|
||||
data:this.block5.areas,
|
||||
textStyle: { color: "#a2c8f9" },
|
||||
|
||||
},
|
||||
|
|
@ -1020,20 +1056,7 @@
|
|||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
data: this.block5.titles,
|
||||
axisLabel: { color: "#a2c8f9" },
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
|
|
@ -1053,32 +1076,7 @@
|
|||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '区域A',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: '区域B',
|
||||
type: 'line',
|
||||
data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310],
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: '区域C',
|
||||
type: 'line',
|
||||
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: '区域D',
|
||||
type: 'line',
|
||||
data: [320, 332, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320],
|
||||
smooth: true,
|
||||
}
|
||||
]
|
||||
series: this.block5.datas
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,13 @@ Vue.component("power-chart", {
|
|||
});
|
||||
},
|
||||
methods: {
|
||||
reLoad(){
|
||||
let opt={};
|
||||
if (this.render) {
|
||||
opt = this.render(opt);
|
||||
}
|
||||
this.chart.setOption(opt,true);
|
||||
},
|
||||
setOption(opt) {
|
||||
if (this.render) {
|
||||
opt = this.render(opt);
|
||||
|
|
|
|||
Loading…
Reference in New Issue