You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
353 lines
7.9 KiB
353 lines
7.9 KiB
<template>
|
|
<div class="app-container home">
|
|
<div class="top">
|
|
<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>
|
|
|
|
<div class="bottom">
|
|
<div class="bottom1">
|
|
<div class="bottom1-1">
|
|
实时温度总览
|
|
</div>
|
|
<div id="myEcharts" style="width: 100%; height: 91%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script name="Index">
|
|
import {getWdcgq} from '../../../api/emonitor/api'
|
|
import {onMounted, reactive} from "vue";
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: "wdcgq",
|
|
setup() {
|
|
let data = reactive({
|
|
wdcgqList:[
|
|
{
|
|
name:'室内温度传感器1',
|
|
temp:'25.64',
|
|
},
|
|
{
|
|
name:'室内温度传感器2',
|
|
temp:'25.51',
|
|
},
|
|
{
|
|
name:'室内温度传感器3',
|
|
temp:'25.36',
|
|
},
|
|
{
|
|
name:'室内温度传感器4',
|
|
temp:'25.11',
|
|
},
|
|
{
|
|
name:'室内平均温度',
|
|
temp:'25.38',
|
|
},
|
|
{
|
|
name:'室外温度传感器1',
|
|
temp:'25.64',
|
|
},
|
|
{
|
|
name:'室外温度传感器2',
|
|
temp:'25.51',
|
|
},
|
|
{
|
|
name:'室外温度传感器3',
|
|
temp:'25.36',
|
|
},
|
|
{
|
|
name:'室外温度传感器4',
|
|
temp:'25.11',
|
|
},
|
|
{
|
|
name:'室外平均温度',
|
|
temp:'25.38',
|
|
}
|
|
],
|
|
info:[],
|
|
xinfo:[],
|
|
infos: [
|
|
{
|
|
name: "温度传感器1",
|
|
type: "line",
|
|
data: [5, 20, 36, 10, 10, 20],
|
|
itemStyle:{
|
|
color:'#2F8EE0'
|
|
},
|
|
},
|
|
{
|
|
name: "温度传感器2",
|
|
type: "line",
|
|
data: [25, 40, 66, 80, 120, 50],
|
|
itemStyle:{
|
|
color:'#2F8EE0'
|
|
},
|
|
},
|
|
],
|
|
})
|
|
onMounted(() => {//需要获取到element,所以是onMounted的Hook
|
|
//温度传感器1-8 id 5-12
|
|
getWdcgq("温度传感器").then((res)=>{
|
|
console.log(res)
|
|
if(res.data!=null) {
|
|
var brr = []
|
|
data.wdcgqList=[
|
|
{
|
|
name:'室内温度',
|
|
temp:res.data[0].houseInTemp,
|
|
},
|
|
{
|
|
name:'室外温度',
|
|
temp:res.data[0].houseOutTemp,
|
|
}
|
|
]
|
|
brr.push(
|
|
{
|
|
name: '室内温度',
|
|
type: "line",
|
|
data: res.data[0].listTempIn,
|
|
itemStyle: { //线条颜色
|
|
color: '#F5901A',
|
|
}
|
|
},
|
|
{
|
|
name: '室外温度',
|
|
type: "line",
|
|
data: res.data[0].listTempOut,
|
|
itemStyle: { //线条颜色
|
|
color: '#F5901A',
|
|
}
|
|
}
|
|
)
|
|
}
|
|
data.infos = brr
|
|
let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
|
|
if (myChart){
|
|
myChart.dispose()
|
|
}
|
|
myChart = echarts.init(document.getElementById("myEcharts"));
|
|
// 绘制图表
|
|
myChart.setOption({
|
|
title: {},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
show: true
|
|
},
|
|
grid:{
|
|
show: true,
|
|
top: '20%',
|
|
bottom:'15%',
|
|
left:'5%',
|
|
right:'3%',
|
|
borderWidth: 1,
|
|
borderColor: '#767da1',
|
|
},
|
|
legend: {
|
|
top: 10,
|
|
selectedMode: 'single',
|
|
textStyle:{
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
textStyle:{
|
|
color:'#BEC3DA'
|
|
},
|
|
xAxis: {
|
|
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"
|
|
],
|
|
axisLine:{
|
|
lineStyle:{
|
|
color:'#767da1',
|
|
// type:'dashed'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false // 去掉x轴刻度
|
|
},
|
|
splitArea: {
|
|
show: true,
|
|
interval:0,
|
|
areaStyle: {
|
|
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
|
|
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: "℃",
|
|
splitLine:{
|
|
show:true,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
},
|
|
series:data.infos,
|
|
});
|
|
window.onresize = function () {//自适应大小
|
|
myChart.resize();
|
|
};
|
|
})
|
|
|
|
});
|
|
return{
|
|
data
|
|
}
|
|
},
|
|
components: {},
|
|
mounted() {},
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
p{
|
|
margin-bottom: 10px;
|
|
}
|
|
.top{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
.card{
|
|
width: 19.45%;
|
|
height: 110px;
|
|
background-color: #2F3D8A;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.bottom{
|
|
width: 100%;
|
|
height: 350px;
|
|
}
|
|
.bottom1{
|
|
width: 100%;
|
|
height: 350px;
|
|
background-color: #2F3D8A;
|
|
}
|
|
.bottom1-1{
|
|
width: 100%;
|
|
height: 40px;
|
|
background-color: #374590;
|
|
padding-top: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
</style>
|
|
|
|
|