mkl
/
mkl_power_box
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update code

main
lijun 2024-11-23 18:07:27 +08:00
parent 54c4869233
commit 0f4c38e89f
2 changed files with 57 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
power.html
View File

@ -130,7 +130,7 @@
style="margin-top: 20px;"> style="margin-top: 20px;">
暂无数据 暂无数据
</div> </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" /> height="240px" :render="renderEleLoad" />
</div> </div>
@ -157,7 +157,7 @@
style="margin-top: 20px;"> style="margin-top: 20px;">
暂无数据 暂无数据
</div> </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" className="ele-trend-chart" width="100%" height="240px"
:render="renderEleTrendSel" /> :render="renderEleTrendSel" />
</div> </div>
@ -340,7 +340,7 @@
style="margin-top: 20px;"> style="margin-top: 20px;">
暂无数据 暂无数据
</div> </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" className="current-trend-chart" width="100%" height="240px"
:render="renderCurrentTrendSel" /> :render="renderCurrentTrendSel" />
</div> </div>
@ -349,7 +349,11 @@
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<module-one-1-2 label="区域用电趋势"> <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" /> height="300px" :render="renderAreaEleTrendSel" />
</module-one-1-2> </module-one-1-2>
</el-col> </el-col>
@ -388,7 +392,7 @@
<script> <script>
var mapDatas = [ var mapDatas = [
{ {
projectId: 3, projectId: 1912,
url: './power/prj3.png', url: './power/prj3.png',
regions: [ regions: [
{ {
@ -415,7 +419,7 @@
</script> </script>
<script> <script>
let baseUrl = 'https://aqzg-t.makalu.cc'; let baseUrl = 'https://aqzg-t.makalu.cc';
let projectId = 3; let projectId = 1912;
let regionId = 1; let regionId = 1;
var vm = new Vue({ var vm = new Vue({
el: "#app", el: "#app",
@ -597,7 +601,12 @@
this.block2.titles = []; this.block2.titles = [];
this.block2.datas = []; this.block2.datas = [];
} }
this.block2.elKey++;
if(this.$refs.chart2 && this.block2.datas.length>0){
this.$refs.chart2.reLoad();
}else{
this.block2.elKey++;
}
}); });
}, },
loadEleTrend() { loadEleTrend() {
@ -641,7 +650,11 @@
this.block3.titles = []; this.block3.titles = [];
this.block3.datas = []; this.block3.datas = [];
} }
this.block3.elKey++; if(this.$refs.chart3 && this.block3.datas.length>0){
this.$refs.chart3.reLoad();
}else{
this.block3.elKey++;
}
}); });
}, },
loadCurrentTrend() { loadCurrentTrend() {
@ -707,7 +720,11 @@
this.block4.datas = []; this.block4.datas = [];
} }
this.block4.rotate = this.currentTrendSel == 0 ? 0 : 45; 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() { loadAreaEleTrendSel() {
@ -720,9 +737,28 @@
postData.endTime = dts.dtEnd; postData.endTime = dts.dtEnd;
let url = '/api/device/smart_meter/electricity_consumption_trend' let url = '/api/device/smart_meter/electricity_consumption_trend'
this.post(url, postData).then(d => { this.post(url, postData).then(d => {
//debugger
let data = d.data?.data || []; 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' trigger: 'axis'
}, },
legend: { legend: {
data: ['区域A', '区域B', '区域C', '区域D'], data:this.block5.areas,
textStyle: { color: "#a2c8f9" }, textStyle: { color: "#a2c8f9" },
}, },
@ -1020,20 +1056,7 @@
{ {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: [ data: this.block5.titles,
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
axisLabel: { color: "#a2c8f9" }, axisLabel: { color: "#a2c8f9" },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
@ -1053,32 +1076,7 @@
} }
} }
], ],
series: [ series: this.block5.datas
{
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,
}
]
}; };

7
power/powerChart.js
View File

@ -41,6 +41,13 @@ Vue.component("power-chart", {
}); });
}, },
methods: { methods: {
reLoad(){
let opt={};
if (this.render) {
opt = this.render(opt);
}
this.chart.setOption(opt,true);
},
setOption(opt) { setOption(opt) {
if (this.render) { if (this.render) {
opt = this.render(opt); opt = this.render(opt);