From 4132fb04e4a81702e5e3a6ba13185b9264cc151a Mon Sep 17 00:00:00 2001
From: jiminglei <836545853@qq.com>
Date: Mon, 15 May 2023 15:04:05 +0800
Subject: [PATCH] 11
---
psdc-ui/src/views/emonitor/db/index.vue | 364 +++++++++++++-------
psdc-ui/src/views/emonitor/xrgl/index.vue | 388 +++++++++++++---------
psdc-ui/src/views/system/cl/index.vue | 1 +
3 files changed, 464 insertions(+), 289 deletions(-)
diff --git a/psdc-ui/src/views/emonitor/db/index.vue b/psdc-ui/src/views/emonitor/db/index.vue
index 6f725b6..2e4395f 100644
--- a/psdc-ui/src/views/emonitor/db/index.vue
+++ b/psdc-ui/src/views/emonitor/db/index.vue
@@ -5,28 +5,28 @@
pic
当前功率
-
{{data.num}}kW
+
{{data.totp}}kW
pic
日用电量
-
11kWh
+
{{data.eday}}kWh
pic
月用电量
-
141kWh
+
{{data.emonth}}kWh
pic
累计用电量
-
1641kWh
+
{{data.totwh}}kWh
@@ -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
diff --git a/psdc-ui/src/views/emonitor/xrgl/index.vue b/psdc-ui/src/views/emonitor/xrgl/index.vue
index 8d77249..5f73a26 100644
--- a/psdc-ui/src/views/emonitor/xrgl/index.vue
+++ b/psdc-ui/src/views/emonitor/xrgl/index.vue
@@ -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
diff --git a/psdc-ui/src/views/system/cl/index.vue b/psdc-ui/src/views/system/cl/index.vue
index cbd4503..793e744 100644
--- a/psdc-ui/src/views/system/cl/index.vue
+++ b/psdc-ui/src/views/system/cl/index.vue
@@ -10,6 +10,7 @@
+
搜索
重置