hwj_system
/
scmy
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11

Browse Source
master
jiminglei 2 years ago
parent a45416c4ce
commit 4132fb04e4
3 changed files with 464 additions and 289 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 260
      psdc-ui/src/views/emonitor/db/index.vue
  2. 114
      psdc-ui/src/views/emonitor/xrgl/index.vue
  3. 1
      psdc-ui/src/views/system/cl/index.vue

260
psdc-ui/src/views/emonitor/db/index.vue
Unescape View File

@ -5,28 +5,28 @@
<div>pic</div> <div>pic</div>
<div> <div>
<p>当前功率</p> <p>当前功率</p>
<h2>{{data.num}}kW</h2> <h2>{{data.totp}}kW</h2>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div>pic</div> <div>pic</div>
<div> <div>
<p>日用电量</p> <p>日用电量</p>
<h2>11kWh</h2> <h2>{{data.eday}}kWh</h2>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div>pic</div> <div>pic</div>
<div> <div>
<p>月用电量</p> <p>月用电量</p>
<h2>141kWh</h2> <h2>{{data.emonth}}kWh</h2>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div>pic</div> <div>pic</div>
<div> <div>
<p>累计用电量</p> <p>累计用电量</p>
<h2>1641kWh</h2> <h2>{{data.totwh}}kWh</h2>
</div> </div>
</div> </div>
</div> </div>
@ -63,7 +63,109 @@ export default {
name: "db", name: "db",
setup() { setup() {
let data = reactive({ let data = reactive({
num:666, totp:'',
totwh:'',
eday:'',
emonth:'',
glData:[],
glXz:[
"00:00",
"00:15",
"00:30",
"00:45",
"01:00",
"01:15",
"01:30",
"01:45",
"02:00",
"02:15",
"02:30",
"02:45",
"03:00",
"03:15",
"03:30",
"03:45",
"04:00",
"04:15",
"04:30",
"04:45",
"05:00",
"05:15",
"05:30",
"05:45",
"06:00",
"06:15",
"06:30",
"06:45",
"07:00",
"07:15",
"07:30",
"07:45",
"08:00",
"08:15",
"08:30",
"08:45",
"09:00",
"09:15",
"09:30",
"09:45",
"10:00",
"10:15",
"10:30",
"10:45",
"11:00",
"11:15",
"11:30",
"11:45",
"12:00",
"12:15",
"12:30",
"12:45",
"13:00",
"13:15",
"13:30",
"13:45",
"14:00",
"14:15",
"14:30",
"14:45",
"15:00",
"15:15",
"15:30",
"15:45",
"16:00",
"16:15",
"16:30",
"16:45",
"17:00",
"17:15",
"17:30",
"17:45",
"18:00",
"18:15",
"18:30",
"18:45",
"19:00",
"19:15",
"19:30",
"19:45",
"20:00",
"20:15",
"20:30",
"20:45",
"21:00",
"21:15",
"21:30",
"21:45",
"22:00",
"22:15",
"22:30",
"22:45",
"23:00",
"23:15",
"23:30",
"23:45"
],
fdlData:'', fdlData:'',
fdlXz:'', fdlXz:'',
}) })
@ -79,71 +181,15 @@ export default {
onMounted(() => {//需要获取到element,所以是onMounted的Hook onMounted(() => {//需要获取到element,所以是onMounted的Hook
getData(13).then((res)=>{ getData(13).then((res)=>{
console.log(res) console.log(res)
}) data.totp=res.data.totp
getZdb(13).then((res)=>{ data.totwh=res.data.totwh
console.log(res) data.eday=res.data.eday
let arr = [] data.emonth=res.data.emonth
let brr = [] delete res.data.todayUsePowers.deviceId
for (let i in res.data){ delete res.data.todayUsePowers.samDate
arr.push(res.data[i].hour) delete res.data.todayUsePowers.userId
brr.push(res.data[i].useElectric) let arr = Object.values(res.data.todayUsePowers)
} data.glData=arr
data.fdlData=brr
data.fdlXz=arr
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
if (myChart3){
myChart3.dispose()
}
myChart3 = echarts.init(document.getElementById("myEcharts3"));
myChart3.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
type:'category',
data:data.fdlXz,
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "今日用电量",
type: "bar",
data: [data.fdlData],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart3.resize();
};
})
@ -199,7 +245,7 @@ export default {
}, },
data: [ data: [
{ {
value: 70 value: data.totp
} }
] ]
} }
@ -210,6 +256,8 @@ export default {
}; };
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2")); let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){ if (myChart2){
myChart2.dispose() myChart2.dispose()
@ -222,7 +270,7 @@ export default {
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], data:data.glXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#BEC3DA',
@ -252,7 +300,7 @@ export default {
{ {
name: "当前功率", name: "当前功率",
type: "line", type: "line",
data: [5, 20, 36, 10, 10, 20], data: data.glData,
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
@ -263,7 +311,71 @@ export default {
myChart2.resize(); myChart2.resize();
}; };
})
getZdb(13).then((res)=>{
console.log(res)
let arr = []
let brr = []
for (let i in res.data){
arr.push(res.data[i].hour)
brr.push(res.data[i].useElectric)
}
data.fdlData=brr
data.fdlXz=arr
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
if (myChart3){
myChart3.dispose()
}
myChart3 = echarts.init(document.getElementById("myEcharts3"));
myChart3.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
type:'category',
data:data.fdlXz,
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "今日用电量",
type: "bar",
data: data.fdlData,
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart3.resize();
};
})
}) })
return { return {

114
psdc-ui/src/views/emonitor/xrgl/index.vue
Unescape View File

@ -179,6 +179,44 @@ export default {
"23:30", "23:30",
"23:45" "23:45"
], ],
dayData:[],
dayXz:[],
emonthData:[],
emonthXz:[
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31],
temIn:'',
temOut:'',
time:'',
}) })
@ -197,6 +235,7 @@ export default {
//gl //gl
delete res.data.todayUsePowers.deviceId delete res.data.todayUsePowers.deviceId
delete res.data.todayUsePowers.samDate delete res.data.todayUsePowers.samDate
delete res.data.todayUsePowers.userId
let arr = Object.values(res.data.todayUsePowers) let arr = Object.values(res.data.todayUsePowers)
data.glData=arr data.glData=arr
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3")); let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
@ -254,30 +293,20 @@ export default {
}) })
getXcgl(2).then((res)=>{ getXcgl(2).then((res)=>{
console.log(res) console.log(res)
}) //日用电量
let arr = []
let brr = []
for(let i in res.xrglqhour){
arr.push(res.xrglqhour[i].useElectric)
brr.push(res.xrglqhour[i].hour)
}
data.dayData=arr
data.dayXz=brr
let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts")); let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
if (myChart){ if (myChart){
myChart.dispose() myChart.dispose()
} }
myChart = echarts.init(document.getElementById("myEcharts")); myChart = echarts.init(document.getElementById("myEcharts"));
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
if (myChart4){
myChart4.dispose()
}
myChart4 = echarts.init(document.getElementById("myEcharts4"));
// 绘制图表
myChart.setOption({ myChart.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
@ -285,7 +314,7 @@ export default {
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], data: data.dayXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#BEC3DA',
@ -315,7 +344,7 @@ export default {
{ {
name: "日用电量", name: "日用电量",
type: "bar", type: "bar",
data: [5, 20, 36, 10, 10, 20], data: data.dayData,
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
@ -325,6 +354,19 @@ export default {
window.onresize = function () {//自适应大小 window.onresize = function () {//自适应大小
myChart.resize(); myChart.resize();
}; };
//月用电量
let crr = []
for(let i in res.xrglqday){
crr.push(res.xrglqday[i].useElectric)
}
data.emonthData=crr
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
myChart2.setOption({ myChart2.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
@ -332,7 +374,7 @@ export default {
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], data: data.emonthXz,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#BEC3DA',
@ -362,7 +404,7 @@ export default {
{ {
name: "月用电量", name: "月用电量",
type: "bar", type: "bar",
data: [5, 20, 36, 10, 10, 20], data: data.emonthData,
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
@ -373,6 +415,16 @@ export default {
myChart2.resize(); myChart2.resize();
}; };
//进出水温度
data.time=res.times
data.temIn=res.tempIn
data.temOut=res.tempOut
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
if (myChart4){
myChart4.dispose()
}
myChart4 = echarts.init(document.getElementById("myEcharts4"));
myChart4.setOption({ myChart4.setOption({
title: {}, title: {},
tooltip: {}, tooltip: {},
@ -386,7 +438,7 @@ export default {
color:'#BEC3DA' color:'#BEC3DA'
}, },
xAxis: { xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], data: data.time,
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:'#BEC3DA', color:'#BEC3DA',
@ -420,7 +472,7 @@ export default {
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
data: [120, 132, 101, 134, 90, 230, 210] data: data.temIn
}, },
{ {
name: '出水', name: '出水',
@ -429,13 +481,23 @@ export default {
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
data: [220, 182, 191, 234, 290, 330, 310] data: data.temOut
}, },
], ],
}); });
window.onresize = function () {//自适应大小 window.onresize = function () {//自适应大小
myChart4.resize(); myChart4.resize();
}; };
})
}); });
return{ return{
data data

1
psdc-ui/src/views/system/cl/index.vue
Unescape View File

@ -10,6 +10,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>

Write Preview
Loading…
Cancel
Save