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. 364
      psdc-ui/src/views/emonitor/db/index.vue
  2. 388
      psdc-ui/src/views/emonitor/xrgl/index.vue
  3. 1
      psdc-ui/src/views/system/cl/index.vue

364
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,6 +181,136 @@ 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
data.totwh=res.data.totwh
data.eday=res.data.eday
data.emonth=res.data.emonth
delete res.data.todayUsePowers.deviceId
delete res.data.todayUsePowers.samDate
delete res.data.todayUsePowers.userId
let arr = Object.values(res.data.todayUsePowers)
data.glData=arr
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
if (myChart1){
myChart1.dispose()
}
myChart1 = echarts.init(document.getElementById("myEcharts1"));
myChart1.setOption({
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 10,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
// axisTick: {
// distance: -30,
// length: 8,
// lineStyle: {
// color: '#fff',
// width: 2
// }
// },
// splitLine: {
// distance: -30,
// length: 30,
// lineStyle: {
// color: '#fff',
// width: 4
// }
// },
axisLabel: {
color: 'inherit',
distance: 10,
fontSize: 10
},
detail: {
valueAnimation: true,
formatter: '{value} kW',
color: 'inherit'
},
data: [
{
value: data.totp
}
]
}
]
});
window.onresize = function () {//自适应大小
myChart1.resize();
};
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
myChart2.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data:data.glXz,
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kW",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "当前功率",
type: "line",
data: data.glData,
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart2.resize();
};
}) })
getZdb(13).then((res)=>{ getZdb(13).then((res)=>{
console.log(res) console.log(res)
@ -133,7 +365,7 @@ export default {
{ {
name: "今日用电量", name: "今日用电量",
type: "bar", type: "bar",
data: [data.fdlData], data: data.fdlData,
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
@ -145,126 +377,6 @@ export default {
}; };
}) })
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
if (myChart1){
myChart1.dispose()
}
myChart1 = echarts.init(document.getElementById("myEcharts1"));
myChart1.setOption({
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 10,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
// axisTick: {
// distance: -30,
// length: 8,
// lineStyle: {
// color: '#fff',
// width: 2
// }
// },
// splitLine: {
// distance: -30,
// length: 30,
// lineStyle: {
// color: '#fff',
// width: 4
// }
// },
axisLabel: {
color: 'inherit',
distance: 10,
fontSize: 10
},
detail: {
valueAnimation: true,
formatter: '{value} kW',
color: 'inherit'
},
data: [
{
value: 70
}
]
}
]
});
window.onresize = function () {//自适应大小
myChart1.resize();
};
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
myChart2.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kW",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "当前功率",
type: "line",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart2.resize();
};
}) })
return { return {
data data

388
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,188 +293,211 @@ 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){
let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts")); arr.push(res.xrglqhour[i].useElectric)
if (myChart){ brr.push(res.xrglqhour[i].hour)
myChart.dispose() }
} data.dayData=arr
myChart = echarts.init(document.getElementById("myEcharts")); data.dayXz=brr
let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2")); if (myChart){
if (myChart2){ myChart.dispose()
myChart2.dispose() }
} myChart = echarts.init(document.getElementById("myEcharts"));
myChart2 = echarts.init(document.getElementById("myEcharts2")); myChart.setOption({
title: {},
tooltip: {},
textStyle:{
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4")); color:'#BEC3DA'
if (myChart4){
myChart4.dispose()
}
myChart4 = echarts.init(document.getElementById("myEcharts4"));
// 绘制图表
myChart.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
}, },
axisLine: { xAxis: {
show: true, data: data.dayXz,
lineStyle:{ axisLine:{
type:'dashed', lineStyle:{
color:'#BEC3DA' color:'#BEC3DA',
type:'dashed'
}
} }
}, },
}, yAxis: {
series: [ type: 'value',
{ name: "kWh",
name: "日用电量", splitLine:{
type: "bar", show:true,
data: [5, 20, 36, 10, 10, 20], lineStyle:{
itemStyle:{ type:'dashed',
color:'#2F8EE0' color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
}, },
}, },
], series: [
}); {
window.onresize = function () {//自适应大小 name: "日用电量",
myChart.resize(); type: "bar",
}; data: data.dayData,
myChart2.setOption({ itemStyle:{
title: {}, color:'#2F8EE0'
tooltip: {}, },
textStyle:{ },
color:'#BEC3DA' ],
}, });
xAxis: { window.onresize = function () {//自适应大小
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], myChart.resize();
axisLine:{ };
lineStyle:{
color:'#BEC3DA', //月用电量
type:'dashed' let crr = []
} for(let i in res.xrglqday){
} crr.push(res.xrglqday[i].useElectric)
}, }
yAxis: { data.emonthData=crr
type: 'value', let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
name: "kWh", if (myChart2){
splitLine:{ myChart2.dispose()
show:true, }
lineStyle:{ myChart2 = echarts.init(document.getElementById("myEcharts2"));
type:'dashed',
color:'#BEC3DA' myChart2.setOption({
} title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
}, },
axisLine: { xAxis: {
show: true, data: data.emonthXz,
lineStyle:{ axisLine:{
type:'dashed', lineStyle:{
color:'#BEC3DA' color:'#BEC3DA',
type:'dashed'
}
} }
}, },
}, yAxis: {
series: [ type: 'value',
{ name: "kWh",
name: "月用电量", splitLine:{
type: "bar", show:true,
data: [5, 20, 36, 10, 10, 20], lineStyle:{
itemStyle:{ type:'dashed',
color:'#2F8EE0' color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
}, },
}, },
], series: [
}); {
window.onresize = function () {//自适应大小 name: "月用电量",
myChart2.resize(); type: "bar",
}; data: data.emonthData,
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart2.resize();
};
myChart4.setOption({ //进出水温度
title: {}, data.time=res.times
tooltip: {}, data.temIn=res.tempIn
legend: { data.temOut=res.tempOut
data: ['进水', '出水'],
textStyle:{ let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
color:'#BEC3DA' if (myChart4){
} myChart4.dispose()
}, }
textStyle:{ myChart4 = echarts.init(document.getElementById("myEcharts4"));
color:'#BEC3DA' myChart4.setOption({
}, title: {},
xAxis: { tooltip: {},
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], legend: {
axisLine:{ data: ['进水', '出水'],
lineStyle:{ textStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "℃",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
} }
}, },
axisLine: { textStyle:{
show: true, color:'#BEC3DA'
lineStyle:{ },
type:'dashed', xAxis: {
color:'#BEC3DA' data: data.time,
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
} }
}, },
}, yAxis: {
series: [ type: 'value',
{ name: "℃",
name: '进水', splitLine:{
type: 'line', show:true,
stack: 'Total', lineStyle:{
itemStyle:{ type:'dashed',
color:'#2F8EE0' color:'#BEC3DA'
}
}, },
data: [120, 132, 101, 134, 90, 230, 210] axisLine: {
}, show: true,
{ lineStyle:{
name: '出水', type:'dashed',
type: 'line', color:'#BEC3DA'
stack: 'Total', }
itemStyle:{
color:'#2F8EE0'
}, },
data: [220, 182, 191, 234, 290, 330, 310]
}, },
], series: [
}); {
window.onresize = function () {//自适应大小 name: '进水',
myChart4.resize(); type: 'line',
}; stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: data.temIn
},
{
name: '出水',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: data.temOut
},
],
});
window.onresize = function () {//自适应大小
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