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>
<p>当前功率</p>
<h2>{{data.num}}kW</h2>
<h2>{{data.totp}}kW</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>日用电量</p>
<h2>11kWh</h2>
<h2>{{data.eday}}kWh</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>月用电量</p>
<h2>141kWh</h2>
<h2>{{data.emonth}}kWh</h2>
</div>
</div>
<div class="card">
<div>pic</div>
<div>
<p>累计用电量</p>
<h2>1641kWh</h2>
<h2>{{data.totwh}}kWh</h2>
</div>
</div>
</div>
@ -63,7 +63,109 @@ export default {
name: "db",
setup() {
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:'',
fdlXz:'',
})
@ -79,6 +181,136 @@ export default {
onMounted(() => {//需要获取到element,所以是onMounted的Hook
getData(13).then((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)=>{
console.log(res)
@ -133,7 +365,7 @@ export default {
{
name: "今日用电量",
type: "bar",
data: [data.fdlData],
data: data.fdlData,
itemStyle:{
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 {
data

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

@ -179,6 +179,44 @@ export default {
"23:30",
"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
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 myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
@ -254,188 +293,211 @@ export default {
})
getXcgl(2).then((res)=>{
console.log(res)
})
let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
if (myChart){
myChart.dispose()
}
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({
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'
}
//日用电量
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"));
if (myChart){
myChart.dispose()
}
myChart = echarts.init(document.getElementById("myEcharts"));
myChart.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
xAxis: {
data: data.dayXz,
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
},
series: [
{
name: "日用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
],
});
window.onresize = function () {//自适应大小
myChart.resize();
};
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: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
series: [
{
name: "日用电量",
type: "bar",
data: data.dayData,
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
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({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
xAxis: {
data: data.emonthXz,
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
},
series: [
{
name: "月用电量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
],
});
window.onresize = function () {//自适应大小
myChart2.resize();
};
series: [
{
name: "月用电量",
type: "bar",
data: data.emonthData,
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//自适应大小
myChart2.resize();
};
myChart4.setOption({
title: {},
tooltip: {},
legend: {
data: ['进水', '出水'],
textStyle:{
color:'#BEC3DA'
}
},
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: "℃",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
//进出水温度
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({
title: {},
tooltip: {},
legend: {
data: ['进水', '出水'],
textStyle:{
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: data.time,
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
},
series: [
{
name: '进水',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
yAxis: {
type: 'value',
name: "℃",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '出水',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
],
});
window.onresize = function () {//自适应大小
myChart4.resize();
};
series: [
{
name: '进水',
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{
data

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

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

Write Preview
Loading…
Cancel
Save