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

首页、温度传感器页

Browse Source
master
wj 2 years ago
parent 17f5af88e9
commit 5535d61dd6
3 changed files with 397 additions and 160 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. BIN
      psdc-ui/src/assets/images/风机盘管(1).png
  2. 513
      psdc-ui/src/views/bigview/index.vue
  3. 40
      psdc-ui/src/views/emonitor/wdcgq/index.vue

BIN
psdc-ui/src/assets/images/风机盘管(1).png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 35 KiB

513
psdc-ui/src/views/bigview/index.vue
Unescape View File

@ -9,7 +9,7 @@
<div class="main"> <div class="main">
<div class="left"> <div class="left">
<div class="left_top bgimg"> <div class="left_top bgimg">
<div class="title">电磁锅炉</div> <div class="title">变频电磁采暖炉</div>
<div class="info_box"> <div class="info_box">
<div class="dev_img"> <div class="dev_img">
<img src="../../assets/images/dcgl.png" alt=""> <img src="../../assets/images/dcgl.png" alt="">
@ -18,7 +18,7 @@
<p>当前状态：<span :class="{'green':dcglRunStatus === '开启','red':dcglRunStatus === '关闭'}">{{ dcglRunStatus }}</span></p> <p>当前状态：<span :class="{'green':dcglRunStatus === '开启','red':dcglRunStatus === '关闭'}">{{ dcglRunStatus }}</span></p>
<p>进水温度：<span class="enter_t"><span>{{ dcglThermometerValueIn }}</span>℃</span></p> <p>进水温度：<span class="enter_t"><span>{{ dcglThermometerValueIn }}</span>℃</span></p>
<p>出水温度：<span class="leave_t"><span>{{ dcglThermometerValueOut }}</span>℃</span></p> <p>出水温度：<span class="leave_t"><span>{{ dcglThermometerValueOut }}</span>℃</span></p>
<p>今日能耗：<span class="today_tce"><span>{{ dcglTodayUseEnergy }}</span>kWh</span></p> <!-- <p>今日能耗：<span class="today_tce"><span>{{ dcglTodayUseEnergy }}</span>kWh</span></p>-->
</div> </div>
</div> </div>
<div class="chart_box"> <div class="chart_box">
@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="left_bottom bgimg"> <div class="left_bottom bgimg">
<div class="title">蓄热锅炉</div> <div class="title">蓄热水箱</div>
<div class="info_box"> <div class="info_box">
<div class="dev_img"> <div class="dev_img">
<img src="../../assets/images/蓄热锅炉.png" alt=""> <img src="../../assets/images/蓄热锅炉.png" alt="">
@ -35,7 +35,7 @@
<p>当前状态：<span :class="{'green':xrglRunStatus === '开启','red':xrglRunStatus === '关闭'}">{{ xrglRunStatus }}</span></p> <p>当前状态：<span :class="{'green':xrglRunStatus === '开启','red':xrglRunStatus === '关闭'}">{{ xrglRunStatus }}</span></p>
<p>进水温度：<span class="enter_t"><span>{{ xrglThermometerValueIn }}</span>℃</span></p> <p>进水温度：<span class="enter_t"><span>{{ xrglThermometerValueIn }}</span>℃</span></p>
<p>出水温度：<span class="leave_t"><span>{{ xrglThermometerValueOut }}</span>℃</span></p> <p>出水温度：<span class="leave_t"><span>{{ xrglThermometerValueOut }}</span>℃</span></p>
<p>今日能耗：<span class="today_tce"><span>{{ xrglTodayUseEnergy }}</span>kWh</span></p> <!-- <p>今日能耗：<span class="today_tce"><span>{{ xrglTodayUseEnergy }}</span>kWh</span></p>-->
</div> </div>
</div> </div>
<div class="chart_box"> <div class="chart_box">
@ -61,16 +61,15 @@
</div> </div>
<div class="middle_bottom"> <div class="middle_bottom">
<div class="chart_box2 bgimg"> <div class="chart_box2 bgimg">
<div class="title">当前功率</div> <div class="title">电表总功率</div>
<div class="nowPower_chart" id="dqglChart"></div> <div class="nowPower_chart" id="dqglChart"></div>
</div> </div>
<div class="wendu_box"> <div class="wendu_box">
<div class="item" v-for="item in wdcgqArr" :key="item.deviceId"> <div class="indoor bgimg" id="indoorChart"></div>
<div class="dev_name">{{ item.deviceName }}</div> <div class="outdoor bgimg" id="outdoorChart"></div>
<div class="line"></div>
<div class="data"><span class="screenNumber">{{ item.thermometerValue}}</span>℃</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
@ -84,7 +83,7 @@
<p>当前状态：<span :class="{'green':kqyrbRunStatus === '开启','red':kqyrbRunStatus === '关闭'}">{{ kqyrbRunStatus }}</span></p> <p>当前状态：<span :class="{'green':kqyrbRunStatus === '开启','red':kqyrbRunStatus === '关闭'}">{{ kqyrbRunStatus }}</span></p>
<p>进水温度：<span class="enter_t"><span>{{ kqyrbThermometerValueIn }}</span>℃</span></p> <p>进水温度：<span class="enter_t"><span>{{ kqyrbThermometerValueIn }}</span>℃</span></p>
<p>出水温度：<span class="leave_t"><span>{{ kqyrbThermometerValueOut }}</span>℃</span></p> <p>出水温度：<span class="leave_t"><span>{{ kqyrbThermometerValueOut }}</span>℃</span></p>
<p>今日能耗：<span class="today_tce"><span>{{ kqyrbTodayUseEnergy }}</span>kWh</span></p> <!-- <p>今日能耗：<span class="today_tce"><span>{{ kqyrbTodayUseEnergy }}</span>kWh</span></p>-->
</div> </div>
</div> </div>
<div class="chart_box"> <div class="chart_box">
@ -99,12 +98,12 @@
</div> </div>
<div class="dev_data"> <div class="dev_data">
<p>当前状态：<span :class="{'green':frdlRunStatus === '开启','red':frdlRunStatus === '关闭'}">{{ frdlRunStatus }}</span></p> <p>当前状态：<span :class="{'green':frdlRunStatus === '开启','red':frdlRunStatus === '关闭'}">{{ frdlRunStatus }}</span></p>
<p>当前温度：<span class="now_t"><span>{{ frdlThermometerValueNow }}</span>℃</span></p> <!-- <p>当前温度：<span class="now_t"><span>{{ frdlThermometerValueNow }}</span>℃</span></p>-->
<p>今日能耗：<span class="today_tce"><span>{{ frdlTodayUseEnergy }}</span>kWh</span></p> <!-- <p>今日能耗：<span class="today_tce"><span>{{ frdlTodayUseEnergy }}</span>kWh</span></p>-->
</div> </div>
</div> </div>
<div class="chart_box"> <div class="chart_box">
<div class="dev_chart" id="frdlChart"></div> <!-- <div class="dev_chart" id="frdlChart"></div>-->
</div> </div>
</div> </div>
</div> </div>
@ -117,7 +116,8 @@ import * as echarts from 'echarts'
import {HomeFilled} from '@element-plus/icons-vue' import {HomeFilled} from '@element-plus/icons-vue'
import Screenfull from '@/components/Screenfull' import Screenfull from '@/components/Screenfull'
import {ref, reactive, onMounted, onBeforeUnmount} from 'vue' 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(){ function linkPage(){
@ -144,12 +144,14 @@ onMounted(()=>{
}, 1000); }, 1000);
dcglChartFun(); dcglChartFun();
kqyrbChartFun(); kqyrbChartFun();
frdlChartFun(); // frdlChartFun();
getWenduFun();
getDevicesInfoFun(); getDevicesInfoFun();
xrglChartFun(); xrglChartFun();
getZdbFun(); getZdbFun();
dqglChartFun() dqglChartFun();
getWdcgqFun();
indoorChartFun();
outdoorChartFun()
}) })
function refresh(){ function refresh(){
// window.location.reload(); // window.location.reload();
@ -193,20 +195,6 @@ function fontSize(px) { //传入字体大小
return px * fontSize; //转换为 rem的布局返回出去 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('--') const xrglRunStatus = ref('--')
@ -305,7 +293,7 @@ function getDevicesInfoFun(){
frdlTodayUseEnergy.value = res.data[i].todayUseEnergy; frdlTodayUseEnergy.value = res.data[i].todayUseEnergy;
frdlTimeList.value = res.data[i].timeList; frdlTimeList.value = res.data[i].timeList;
frdlTempTodayList.value = res.data[i].tempTodayList; frdlTempTodayList.value = res.data[i].tempTodayList;
frdlChartFun(); // frdlChartFun();
} }
} }
}) })
@ -314,7 +302,7 @@ function getDevicesInfoFun(){
let dcglChart; let dcglChart;
let xrglChart; let xrglChart;
let kqyrbChart; let kqyrbChart;
let frdlChart; // let frdlChart;
function dcglChartFun(){ function dcglChartFun(){
var chartDom = document.getElementById('dcglChart') var chartDom = document.getElementById('dcglChart')
dcglChart = echarts.init(chartDom); dcglChart = echarts.init(chartDom);
@ -660,12 +648,137 @@ function kqyrbChartFun(){
kqyrbChart.resize(); kqyrbChart.resize();
}); });
}; };
function frdlChartFun(){ // function frdlChartFun(){
const chartDom = document.getElementById('frdlChart') // const chartDom = document.getElementById('frdlChart')
frdlChart = echarts.init(chartDom); // 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 + '<br>'; // 获取横轴数据项名称
// for (var i = 0; i < params.length; i++) {
// var seriesName = params[i].seriesName; // 获取系列名称
// var value = params[i].value; // 获取数据值
// // result += seriesName + ': ' + '<strong>'+value+'</strong>' + '℃<br>'; // 拼接字符串
// if (i === 0) { // 第一个系列名称设置为蓝色
// result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
// } else if (i === 1) { // 第二个系列名称设置为黄色
// result += '<span>' + '<span style="color: #F5901A">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
// } else { // 其他系列名称使用默认颜色
// result += seriesName + ': ' + value + ' m/s<br>';
// }
// }
// 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 = { const option = {
legend: { legend: {
data: ["当前温度"], data: ["总功率"],
// selectedMode: 'single', // selectedMode: 'single',
textStyle: { textStyle: {
color: "#b6bee7", color: "#b6bee7",
@ -674,19 +787,13 @@ function frdlChartFun(){
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
// formatter: "{b0}： {c0}kW",
formatter: function(params) { formatter: function(params) {
var result = params[0].name + '<br>'; // 获取横轴数据项名称 var result = params[0].name + '<br>'; // 获取横轴数据项名称
for (var i = 0; i < params.length; i++) { for (var i = 0; i < params.length; i++) {
var seriesName = params[i].seriesName; // 获取系列名称 var seriesName = params[i].seriesName; // 获取系列名称
var value = params[i].value; // 获取数据值 var value = params[i].value; // 获取数据值
// result += seriesName + ': ' + '<strong>'+value+'</strong>' + '℃<br>'; // 拼接字符串 result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>kW<br>';
if (i === 0) { // 第一个系列名称设置为蓝色
result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
} else if (i === 1) { // 第二个系列名称设置为黄色
result += '<span>' + '<span style="color: #F5901A">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
} else { // 其他系列名称使用默认颜色
result += seriesName + ': ' + value + ' m/s<br>';
}
} }
return result; return result;
}, },
@ -704,7 +811,31 @@ function frdlChartFun(){
}, },
xAxis: { xAxis: {
type: 'category', 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: { axisLabel: {
textStyle: { textStyle: {
color: "#b6bee7", color: "#b6bee7",
@ -730,7 +861,7 @@ function frdlChartFun(){
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name:'℃', name:'kW',
nameTextStyle: { nameTextStyle: {
color: "#b6bee7", color: "#b6bee7",
fontSize:fontSize(12), fontSize:fontSize(12),
@ -745,67 +876,74 @@ function frdlChartFun(){
splitLine: { splitLine: {
show: true, show: true,
lineStyle: {color: "#767da1", type: "dashed"} //dashed lineStyle: {color: "#767da1", type: "dashed"} //dashed
} //s是否显示为虚线的条纹背景 } //是否显示为虚线的条纹
}, },
series: [ series: [
{ {
name: "当前温度", name: "总功率",
data: frdlTempTodayList.value, data: todayUsePowersArr,
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: "none", //去掉圆点 symbol: "none", //去掉圆点
itemStyle: { //线条颜色 itemStyle: { //线条颜色
color: '#128dff', 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 () { window.addEventListener("resize", function () {
frdlChart.resize(); dqglChart.resize();
}); });
}; };
/**总电表信息*/ /**室内外温度曲线*/
const nowPower = ref('--') const timesLine = ref('')
const nowEle = ref('--') const indoorLine = ref('')
const todayUsePowersArr = []; const outdoorLine = ref('')
function getZdbFun(){ function getWdcgqFun(){
getZdb(13).then((res)=>{ getWdcgq("温度传感器").then((res)=>{
console.log(res.data) console.log('室内外温度曲线数据',res)
nowPower.value = res.data.totp; for(let i = 0; i < res.data.length;i++){
nowEle.value = res.data.totwh; timesLine.value = res.data[i].times
delete res.data.todayUsePowers.userId indoorLine.value = res.data[i].listTempIn
delete res.data.todayUsePowers.deviceId outdoorLine.value = res.data[i].listTempOut
delete res.data.todayUsePowers.samDate }
for(let i in res.data.todayUsePowers){ indoorChartFun();
todayUsePowersArr.push(res.data.todayUsePowers[i]) outdoorChartFun()
}
dqglChartFun()
}) })
} }
let dqglChart; //室内温度
function dqglChartFun(){ let indoorChart;
const chartDom = document.getElementById('dqglChart') function indoorChartFun(){
dqglChart = echarts.init(chartDom); const chartDom = document.getElementById('indoorChart')
indoorChart = echarts.init(chartDom);
const option = { const option = {
legend: { legend: {
data: ["当前功率"], data: ["室内温度"],
// selectedMode: 'single', // selectedMode: 'single',
textStyle: { textStyle: {
color: "#b6bee7", color: "#b6bee7",
fontSize:fontSize(14) fontSize:fontSize(12)
} }
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
// formatter: "{b0}： {c0}kW",
formatter: function(params) { formatter: function(params) {
var result = params[0].name + '<br>'; // 获取横轴数据项名称 var result = params[0].name + '<br>'; // 获取横轴数据项名称
for (var i = 0; i < params.length; i++) { for (var i = 0; i < params.length; i++) {
var seriesName = params[i].seriesName; // 获取系列名称 var seriesName = params[i].seriesName; // 获取系列名称
var value = params[i].value; // 获取数据值 var value = params[i].value; // 获取数据值
result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>kW<br>'; result += seriesName + ': ' + '<strong style="color: #F5901A">'+value+'</strong>' + '℃<br>'; // 拼接字符串
} }
return result; return result;
}, },
@ -816,47 +954,23 @@ function dqglChartFun(){
show: true, show: true,
top: '20%', top: '20%',
bottom:'15%', bottom:'15%',
left:'10%', left:'8%',
right:'3%', right:'4%',
borderWidth: 0, borderWidth: 0,
borderColor: '#767da1', borderColor: '#767da1',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ["00:00", data: timesLine.value,
"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: { axisLabel: {
textStyle: { textStyle: {
color: "#b6bee7", color: "#b6bee7",
fontSize:fontSize(12) fontSize:fontSize(10)
} }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#767da1' // 设置x轴的线条颜色 color: '#767da180' // 设置x轴的线条颜色
} }
}, },
axisTick: { axisTick: {
@ -873,54 +987,143 @@ function dqglChartFun(){
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name:'kW', // name:'℃',
nameTextStyle: { nameTextStyle: {
color: "#b6bee7", color: "#b6bee7",
fontSize:fontSize(12), fontSize:fontSize(10),
nameLocation: "start" nameLocation: "start"
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#b6bee7", color: "#b6bee7",
fontSize:fontSize(12) fontSize:fontSize(10)
} }
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: {color: "#767da1", type: "dashed"} //dashed lineStyle: {color: "#767da180", type: "dashed"} //dashed
} //是否显示为虚线的条纹 } //s是否显示为虚线的条纹背景
}, },
series: [ series: [
{ {
name: "当前功率", name: "室内温度",
data: todayUsePowersArr, data: indoorLine.value,
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: "none", //去掉圆点 symbol: "none", //去掉圆点
itemStyle: { //线条颜色 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 + '<br>'; // 获取横轴数据项名称
for (var i = 0; i < params.length; i++) {
var seriesName = params[i].seriesName; // 获取系列名称
var value = params[i].value; // 获取数据值
result += seriesName + ': ' + '<strong style="color: #F5901A">'+value+'</strong>' + '℃<br>'; // 拼接字符串
}
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: { areaStyle: {
normal: { color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
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)"} },
]) 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 () { window.addEventListener("resize", function () {
dqglChart.resize(); outdoorChart.resize();
}); });
}; };
/** 页面销毁时*/ /** 页面销毁时*/
onBeforeUnmount(() => { onBeforeUnmount(() => {
if(dcglChart) { if(dcglChart) {
@ -1117,34 +1320,40 @@ onBeforeUnmount(() => {
flex-wrap: wrap; flex-wrap: wrap;
width: 49%; width: 49%;
height: 100%; height: 100%;
.item{ div{
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%; width: 100%;
height: 1px; height: 50%;
background-image: url("../../assets/images/line.png"); padding: 10px 0;
background-size: 100% 100%; //border: 1px solid red;
} }
.data{ //.item{
color: #F5901A; // width: 24%;
font-size: .26rem; // height: 48.5%;
font-weight: bold; // padding: 0 .1rem;
line-height: .8rem; // border: 1px solid #1085B6;
text-align: center; // &: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;
// }
//}
} }
} }
} }

40
psdc-ui/src/views/emonitor/wdcgq/index.vue
Unescape View File

@ -1,11 +1,18 @@
<template> <template>
<div class="app-container home"> <div class="app-container home">
<div class="top"> <div class="top">
<div class="card" v-for="item in data.wdcgqList "> <!-- <div class="card" v-for="item in data.wdcgqList ">-->
<!-- <div><img src="../../../assets/images/温度.png"></div>-->
<!-- <div>-->
<!-- <p style="color: #cccccc">{{item.name}}</p>-->
<!-- <h1>{{item.temp}}℃</h1>-->
<!-- </div>-->
<!-- </div>-->
<div class="card" v-for="item in wdcgqArr" :key="item.deviceId">
<div><img src="../../../assets/images/温度.png"></div> <div><img src="../../../assets/images/温度.png"></div>
<div> <div>
<p style="color: #cccccc">{{item.name}}</p> <p style="color: #cccccc">{{item.deviceName}}</p>
<h1>{{item.temp}}℃</h1> <h1>{{item.thermometerValue}}℃</h1>
</div> </div>
</div> </div>
</div> </div>
@ -23,8 +30,9 @@
<script name="Index"> <script name="Index">
import {getWdcgq} from '../../../api/emonitor/api' import {getWdcgq} from '../../../api/emonitor/api'
import {onMounted, reactive} from "vue"; import {onMounted, reactive, ref} from "vue";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import {getTemperature} from "@/api/bigview/bigview";
export default { export default {
name: "wdcgq", name: "wdcgq",
setup() { setup() {
@ -301,9 +309,29 @@ export default {
}; };
}) })
getWenduFun()
}); });
/** 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
})
}
return{ return{
data data,wdcgqArr
} }
}, },
components: {}, components: {},
@ -324,7 +352,7 @@ p{
justify-content: flex-start; justify-content: flex-start;
} }
.card{ .card{
width: 19.45%; width: 24%;
height: 110px; height: 110px;
background-color: #2F3D8A; background-color: #2F3D8A;
margin-bottom: 12px; margin-bottom: 12px;

Write Preview
Loading…
Cancel
Save