diff --git a/psdc-ui/src/assets/images/风机盘管(1).png b/psdc-ui/src/assets/images/风机盘管(1).png index e19bf2a..fc5743f 100644 Binary files a/psdc-ui/src/assets/images/风机盘管(1).png and b/psdc-ui/src/assets/images/风机盘管(1).png differ diff --git a/psdc-ui/src/views/bigview/index.vue b/psdc-ui/src/views/bigview/index.vue index a90b448..f049793 100644 --- a/psdc-ui/src/views/bigview/index.vue +++ b/psdc-ui/src/views/bigview/index.vue @@ -9,7 +9,7 @@
-
电磁锅炉
+
变频电磁采暖炉
@@ -18,7 +18,7 @@

当前状态：{{ dcglRunStatus }}

进水温度：{{ dcglThermometerValueIn }}℃

出水温度：{{ dcglThermometerValueOut }}℃

-

今日能耗：{{ dcglTodayUseEnergy }}kWh

+
@@ -26,7 +26,7 @@
-
蓄热锅炉
+
蓄热水箱
@@ -35,7 +35,7 @@

当前状态：{{ xrglRunStatus }}

进水温度：{{ xrglThermometerValueIn }}℃

出水温度：{{ xrglThermometerValueOut }}℃

-

今日能耗：{{ xrglTodayUseEnergy }}kWh

+
@@ -61,16 +61,15 @@
-
当前功率
+
电表总功率
+
-
-
{{ item.deviceName }}
-
-
{{ item.thermometerValue}}℃
-
+
+
+
@@ -84,7 +83,7 @@

当前状态：{{ kqyrbRunStatus }}

进水温度：{{ kqyrbThermometerValueIn }}℃

出水温度：{{ kqyrbThermometerValueOut }}℃

-

今日能耗：{{ kqyrbTodayUseEnergy }}kWh

+
@@ -99,12 +98,12 @@

当前状态：{{ frdlRunStatus }}

-

当前温度：{{ frdlThermometerValueNow }}℃

-

今日能耗：{{ frdlTodayUseEnergy }}kWh

+ +
-
+
@@ -117,7 +116,8 @@ import * as echarts from 'echarts' import {HomeFilled} from '@element-plus/icons-vue' import Screenfull from '@/components/Screenfull' import {ref, reactive, onMounted, onBeforeUnmount} from 'vue' -import {getTemperature,getDevicesInfo,getZdb} from '../../api/bigview/bigview' +import {getDevicesInfo,getZdb} from '../../api/bigview/bigview' +import {getWdcgq} from '../../api/emonitor/api' //强制刷新跳转到的页面 function linkPage(){ @@ -144,12 +144,14 @@ onMounted(()=>{ }, 1000); dcglChartFun(); kqyrbChartFun(); - frdlChartFun(); - getWenduFun(); + // frdlChartFun(); getDevicesInfoFun(); xrglChartFun(); getZdbFun(); - dqglChartFun() + dqglChartFun(); + getWdcgqFun(); + indoorChartFun(); + outdoorChartFun() }) function refresh(){ // window.location.reload(); @@ -193,20 +195,6 @@ function fontSize(px) { //传入字体大小 return px * fontSize; //转换为 rem的布局返回出去 } -/** 8个温度传感器数据*/ -const wdcgqArr = ref([]) -function getWenduFun(){ - getTemperature("温度传感器").then((res)=>{ - console.log('8个温度传感器',res) - for(let i = 0;i < res.data.length;i++){ - if(res.data[i].deviceTemp == null){ - res.data[i].deviceTemp = '--' - } - } - wdcgqArr.value = res.data - }) -} - /**运行设备工作信息*/ //蓄热锅炉运行数据 const xrglRunStatus = ref('--') @@ -305,7 +293,7 @@ function getDevicesInfoFun(){ frdlTodayUseEnergy.value = res.data[i].todayUseEnergy; frdlTimeList.value = res.data[i].timeList; frdlTempTodayList.value = res.data[i].tempTodayList; - frdlChartFun(); + // frdlChartFun(); } } }) @@ -314,7 +302,7 @@ function getDevicesInfoFun(){ let dcglChart; let xrglChart; let kqyrbChart; -let frdlChart; +// let frdlChart; function dcglChartFun(){ var chartDom = document.getElementById('dcglChart') dcglChart = echarts.init(chartDom); @@ -660,12 +648,137 @@ function kqyrbChartFun(){ kqyrbChart.resize(); }); }; -function frdlChartFun(){ - const chartDom = document.getElementById('frdlChart') - frdlChart = echarts.init(chartDom); +// function frdlChartFun(){ +// const chartDom = document.getElementById('frdlChart') +// frdlChart = echarts.init(chartDom); +// const option = { +// legend: { +// data: ["当前温度"], +// // selectedMode: 'single', +// textStyle: { +// color: "#b6bee7", +// fontSize:fontSize(14) +// } +// }, +// tooltip: { +// trigger: "axis", +// formatter: function(params) { +// var result = params[0].name + '
'; // 获取横轴数据项名称 +// for (var i = 0; i < params.length; i++) { +// var seriesName = params[i].seriesName; // 获取系列名称 +// var value = params[i].value; // 获取数据值 +// // result += seriesName + ': ' + ''+value+'' + '℃
'; // 拼接字符串 +// if (i === 0) { // 第一个系列名称设置为蓝色 +// result += '' + ''+seriesName+'' + '    ' + ''+value+'' + '℃
'; +// } else if (i === 1) { // 第二个系列名称设置为黄色 +// result += '' + ''+seriesName+'' + '    ' + ''+value+'' + '℃
'; +// } else { // 其他系列名称使用默认颜色 +// result += seriesName + ': ' + value + ' m/s
'; +// } +// } +// return result; +// }, +// // borderColor: '#00fcff', +// borderWidth: 1 +// }, +// grid:{ +// show: true, +// top: '20%', +// bottom:'15%', +// left:'10%', +// right:'3%', +// borderWidth: 0, +// borderColor: '#767da1', +// }, +// xAxis: { +// type: 'category', +// data: frdlTimeList.value, +// axisLabel: { +// textStyle: { +// color: "#b6bee7", +// fontSize:fontSize(12) +// } +// }, +// axisLine: { +// lineStyle: { +// color: '#767da1' // 设置x轴的线条颜色 +// } +// }, +// axisTick: { +// show: true // 去掉x轴刻度 +// }, +// splitArea: { +// show: false, +// interval:0, +// areaStyle: { +// color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组， +// //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组） +// } +// } +// }, +// yAxis: { +// type: 'value', +// name:'℃', +// nameTextStyle: { +// color: "#b6bee7", +// fontSize:fontSize(12), +// nameLocation: "start" +// }, +// axisLabel: { +// textStyle: { +// color: "#b6bee7", +// fontSize:fontSize(12) +// } +// }, +// splitLine: { +// show: true, +// lineStyle: {color: "#767da1", type: "dashed"} //dashed +// } //s是否显示为虚线的条纹背景 +// }, +// series: [ +// { +// name: "当前温度", +// data: frdlTempTodayList.value, +// type: 'line', +// smooth: true, +// symbol: "none", //去掉圆点 +// itemStyle: { //线条颜色 +// color: '#128dff', +// } +// } +// ] +// }; +// option && frdlChart.setOption(option); +// window.addEventListener("resize", function () { +// frdlChart.resize(); +// }); +// }; + +/**总电表信息*/ +const nowPower = ref('--') +const nowEle = ref('--') +const todayUsePowersArr = []; +function getZdbFun(){ + getZdb(13).then((res)=>{ + console.log(res.data) + nowPower.value = res.data.totp; + nowEle.value = res.data.totwh; + delete res.data.todayUsePowers.userId + delete res.data.todayUsePowers.deviceId + delete res.data.todayUsePowers.samDate + for(let i in res.data.todayUsePowers){ + todayUsePowersArr.push(res.data.todayUsePowers[i]) + } + dqglChartFun() + }) +} +let dqglChart; +function dqglChartFun(){ + const chartDom = document.getElementById('dqglChart') + dqglChart = echarts.init(chartDom); const option = { legend: { - data: ["当前温度"], + data: ["总功率"], // selectedMode: 'single', textStyle: { color: "#b6bee7", @@ -674,19 +787,13 @@ function frdlChartFun(){ }, tooltip: { trigger: "axis", + // formatter: "{b0}： {c0}kW", formatter: function(params) { var result = params[0].name + '
'; // 获取横轴数据项名称 for (var i = 0; i < params.length; i++) { var seriesName = params[i].seriesName; // 获取系列名称 var value = params[i].value; // 获取数据值 - // result += seriesName + ': ' + ''+value+'' + '℃
'; // 拼接字符串 - if (i === 0) { // 第一个系列名称设置为蓝色 - result += '' + ''+seriesName+'' + '    ' + ''+value+'' + '℃
'; - } else if (i === 1) { // 第二个系列名称设置为黄色 - result += '' + ''+seriesName+'' + '    ' + ''+value+'' + '℃
'; - } else { // 其他系列名称使用默认颜色 - result += seriesName + ': ' + value + ' m/s
'; - } + result += '' + ''+seriesName+'' + '    ' + ''+value+'' + 'kW
'; } return result; }, @@ -704,7 +811,31 @@ function frdlChartFun(){ }, xAxis: { type: 'category', - data: frdlTimeList.value, + data: ["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",], axisLabel: { textStyle: { color: "#b6bee7", @@ -730,7 +861,7 @@ function frdlChartFun(){ }, yAxis: { type: 'value', - name:'℃', + name:'kW', nameTextStyle: { color: "#b6bee7", fontSize:fontSize(12), @@ -745,67 +876,74 @@ function frdlChartFun(){ splitLine: { show: true, lineStyle: {color: "#767da1", type: "dashed"} //dashed - } //s是否显示为虚线的条纹背景 + } //是否显示为虚线的条纹 }, series: [ { - name: "当前温度", - data: frdlTempTodayList.value, + name: "总功率", + data: todayUsePowersArr, type: 'line', smooth: true, symbol: "none", //去掉圆点 itemStyle: { //线条颜色 color: '#128dff', - } + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + {offset: 0, color: "#128dff"}, + {offset: 0.5, color: "rgba(18,141,252,.2)"}, + {offset: 1, color: "rgba(18,141,252,.0)"} + ]) + } + }, //设置折线区域渐变颜色 } ] }; - option && frdlChart.setOption(option); + option && dqglChart.setOption(option); window.addEventListener("resize", function () { - frdlChart.resize(); + dqglChart.resize(); }); }; -/**总电表信息*/ -const nowPower = ref('--') -const nowEle = ref('--') -const todayUsePowersArr = []; -function getZdbFun(){ - getZdb(13).then((res)=>{ - console.log(res.data) - nowPower.value = res.data.totp; - nowEle.value = res.data.totwh; - delete res.data.todayUsePowers.userId - delete res.data.todayUsePowers.deviceId - delete res.data.todayUsePowers.samDate - for(let i in res.data.todayUsePowers){ - todayUsePowersArr.push(res.data.todayUsePowers[i]) +/**室内外温度曲线*/ +const timesLine = ref('') +const indoorLine = ref('') +const outdoorLine = ref('') +function getWdcgqFun(){ + getWdcgq("温度传感器").then((res)=>{ + console.log('室内外温度曲线数据',res) + for(let i = 0; i < res.data.length;i++){ + timesLine.value = res.data[i].times + indoorLine.value = res.data[i].listTempIn + outdoorLine.value = res.data[i].listTempOut } - dqglChartFun() + indoorChartFun(); + outdoorChartFun() }) } -let dqglChart; -function dqglChartFun(){ - const chartDom = document.getElementById('dqglChart') - dqglChart = echarts.init(chartDom); +//室内温度 +let indoorChart; +function indoorChartFun(){ + const chartDom = document.getElementById('indoorChart') + indoorChart = echarts.init(chartDom); const option = { legend: { - data: ["当前功率"], + data: ["室内温度"], // selectedMode: 'single', textStyle: { color: "#b6bee7", - fontSize:fontSize(14) + fontSize:fontSize(12) } }, tooltip: { trigger: "axis", - // formatter: "{b0}： {c0}kW", formatter: function(params) { var result = params[0].name + '
'; // 获取横轴数据项名称 for (var i = 0; i < params.length; i++) { var seriesName = params[i].seriesName; // 获取系列名称 var value = params[i].value; // 获取数据值 - result += '' + ''+seriesName+'' + '    ' + ''+value+'' + 'kW
'; + result += seriesName + ': ' + ''+value+'' + '℃
'; // 拼接字符串 } return result; }, @@ -816,47 +954,23 @@ function dqglChartFun(){ show: true, top: '20%', bottom:'15%', - left:'10%', - right:'3%', + left:'8%', + right:'4%', borderWidth: 0, borderColor: '#767da1', }, xAxis: { type: 'category', - data: ["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",], + data: timesLine.value, axisLabel: { textStyle: { color: "#b6bee7", - fontSize:fontSize(12) + fontSize:fontSize(10) } }, axisLine: { lineStyle: { - color: '#767da1' // 设置x轴的线条颜色 + color: '#767da180' // 设置x轴的线条颜色 } }, axisTick: { @@ -873,54 +987,143 @@ function dqglChartFun(){ }, yAxis: { type: 'value', - name:'kW', + // name:'℃', nameTextStyle: { color: "#b6bee7", - fontSize:fontSize(12), + fontSize:fontSize(10), nameLocation: "start" }, axisLabel: { textStyle: { color: "#b6bee7", - fontSize:fontSize(12) + fontSize:fontSize(10) } }, splitLine: { show: true, - lineStyle: {color: "#767da1", type: "dashed"} //dashed - } //是否显示为虚线的条纹 + lineStyle: {color: "#767da180", type: "dashed"} //dashed + } //s是否显示为虚线的条纹背景 }, series: [ { - name: "当前功率", - data: todayUsePowersArr, + name: "室内温度", + data: indoorLine.value, type: 'line', smooth: true, symbol: "none", //去掉圆点 itemStyle: { //线条颜色 - color: '#128dff', - }, + color: '#F5901A', + } + } + ] + }; + option && indoorChart.setOption(option); + window.addEventListener("resize", function () { + indoorChart.resize(); + }); +}; +//室外温度 +let outdoorChart; +function outdoorChartFun(){ + const chartDom = document.getElementById('outdoorChart') + outdoorChart = echarts.init(chartDom); + const option = { + legend: { + data: ["室外温度"], + // selectedMode: 'single', + textStyle: { + color: "#b6bee7", + fontSize:fontSize(12) + } + }, + tooltip: { + trigger: "axis", + formatter: function(params) { + var result = params[0].name + '
'; // 获取横轴数据项名称 + for (var i = 0; i < params.length; i++) { + var seriesName = params[i].seriesName; // 获取系列名称 + var value = params[i].value; // 获取数据值 + result += seriesName + ': ' + ''+value+'' + '℃
'; // 拼接字符串 + } + return result; + }, + // borderColor: '#00fcff', + borderWidth: 1 + }, + grid:{ + show: true, + top: '20%', + bottom:'15%', + left:'8%', + right:'4%', + borderWidth: 0, + borderColor: '#767da1', + }, + xAxis: { + type: 'category', + data: timesLine.value, + axisLabel: { + textStyle: { + color: "#b6bee7", + fontSize:fontSize(10) + } + }, + axisLine: { + lineStyle: { + color: '#767da180' // 设置x轴的线条颜色 + } + }, + axisTick: { + show: true // 去掉x轴刻度 + }, + splitArea: { + show: false, + interval:0, areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - {offset: 0, color: "#128dff"}, - {offset: 0.5, color: "rgba(18,141,252,.2)"}, - {offset: 1, color: "rgba(18,141,252,.0)"} - ]) - } - }, //设置折线区域渐变颜色 + color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组， + //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组） + } + } + }, + yAxis: { + type: 'value', + // name:'℃', + nameTextStyle: { + color: "#b6bee7", + fontSize:fontSize(10), + nameLocation: "start" + }, + axisLabel: { + textStyle: { + color: "#b6bee7", + fontSize:fontSize(10) + } + }, + splitLine: { + show: true, + lineStyle: {color: "#767da180", type: "dashed"} //dashed + } //s是否显示为虚线的条纹背景 + }, + series: [ + { + name: "室外温度", + data: outdoorLine.value, + type: 'line', + smooth: true, + symbol: "none", //去掉圆点 + itemStyle: { //线条颜色 + color: '#F5901A', + } } ] }; - option && dqglChart.setOption(option); + option && outdoorChart.setOption(option); window.addEventListener("resize", function () { - dqglChart.resize(); + outdoorChart.resize(); }); }; - - /** 页面销毁时*/ onBeforeUnmount(() => { if(dcglChart) { @@ -1117,34 +1320,40 @@ onBeforeUnmount(() => { flex-wrap: wrap; width: 49%; height: 100%; - .item{ - width: 24%; - height: 48.5%; - padding: 0 .1rem; - border: 1px solid #1085B6; - &:first-child{ - margin-bottom: 0.08rem; - } - .dev_name{ - color: #19C3F4; - font-size: .14rem; - text-align: center; - line-height: .4rem; - } - .line{ - width: 100%; - height: 1px; - background-image: url("../../assets/images/line.png"); - background-size: 100% 100%; - } - .data{ - color: #F5901A; - font-size: .26rem; - font-weight: bold; - line-height: .8rem; - text-align: center; - } + div{ + width: 100%; + height: 50%; + padding: 10px 0; + //border: 1px solid red; } + //.item{ + // width: 24%; + // height: 48.5%; + // padding: 0 .1rem; + // border: 1px solid #1085B6; + // &:first-child{ + // margin-bottom: 0.08rem; + // } + // .dev_name{ + // color: #19C3F4; + // font-size: .14rem; + // text-align: center; + // line-height: .4rem; + // } + // .line{ + // width: 100%; + // height: 1px; + // background-image: url("../../assets/images/line.png"); + // background-size: 100% 100%; + // } + // .data{ + // color: #F5901A; + // font-size: .26rem; + // font-weight: bold; + // line-height: .8rem; + // text-align: center; + // } + //} } } } diff --git a/psdc-ui/src/views/emonitor/wdcgq/index.vue b/psdc-ui/src/views/emonitor/wdcgq/index.vue index e112ad7..a31bc84 100644 --- a/psdc-ui/src/views/emonitor/wdcgq/index.vue +++ b/psdc-ui/src/views/emonitor/wdcgq/index.vue @@ -1,11 +1,18 @@