397 lines
10 KiB
Vue
397 lines
10 KiB
Vue
<template>
|
||
<Card title="标养室管理">
|
||
<div class="box">
|
||
<div class="leftEcharts1" ref="leftEcharts1">111</div>
|
||
<div class="leftEcharts2" ref="leftEcharts2">111</div>
|
||
|
||
</div>
|
||
<div class="environment">
|
||
<div class="item">
|
||
<div class="icon temperature"></div>
|
||
<div class="info">
|
||
<div class="label">室内温度</div>
|
||
<div class="value">
|
||
<span>{{ currentData.temperature || 0 }}</span> ℃
|
||
</div>
|
||
</div>
|
||
<br />
|
||
</div>
|
||
<div class="item" style="margin-top:100px">
|
||
<div class="icon humidity"></div>
|
||
<div class="info">
|
||
<div class="label">室内湿度</div>
|
||
<div class="value">
|
||
<span>{{ currentData.humidity || 0 }}</span
|
||
>%RH
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getstandardDevListApi,
|
||
selectStandardDevStatisticsBySnApi,
|
||
selectDayCurrentDataListApi
|
||
} from "@/assets/js/api/markingRoom";
|
||
import Card from "../components/Card.vue";
|
||
import echarts from 'echarts4';
|
||
export default {
|
||
components: { Card },
|
||
data() {
|
||
return {
|
||
currentData: {
|
||
currentDayAlarmNum: 0,
|
||
humidity: 0,
|
||
sampleNum: 0,
|
||
temperature: 0,
|
||
},
|
||
searchSn: "",
|
||
devSn: "",
|
||
dustData_24: [],
|
||
humidityList:[],//湿度
|
||
temperatureList:[],//温度
|
||
xData:[],//x轴时间
|
||
};
|
||
},
|
||
mounted() {
|
||
this.createdEchart1()
|
||
this.createdEchart2()
|
||
if (this.$store.state.projectSn) {
|
||
this.searchSn = this.$store.state.projectSn;
|
||
this.$nextTick(() => {
|
||
this.getDevList();
|
||
this.getRealTimeData();
|
||
});
|
||
} else {
|
||
this.initData();
|
||
}
|
||
},
|
||
methods: {
|
||
//近24小时数据-图表渲染
|
||
selectDustNoiseData() {
|
||
let data = {
|
||
projectSn: this.searchSn,
|
||
devSn: this.devSn,
|
||
};
|
||
selectDayCurrentDataListApi(data).then((res) => {
|
||
console.log('近24小时数据',res)
|
||
this.dustData_24 = res.result;
|
||
this.dustData_24.forEach(item=>{
|
||
this.humidityList.push(item.humidity)
|
||
this.temperatureList.push(item.temperature)
|
||
this.xData.push(item.receiveTime.split(' ')[1])
|
||
})
|
||
this.createdEchart1();
|
||
this.createdEchart2();
|
||
});
|
||
},
|
||
//echarts图1红
|
||
createdEchart1() {
|
||
let chart1 = echarts.init(this.$refs["leftEcharts1"]);
|
||
this.option1 = {
|
||
// backgroundColor: "#05224d",
|
||
tooltip: {},
|
||
grid: {
|
||
top: "65%",
|
||
left: "0%",
|
||
right: "0%",
|
||
bottom: "0%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#233e64",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: "#6a9cd5",
|
||
margin: 20,
|
||
},
|
||
},
|
||
axisTick: { show: true },
|
||
data: this.xData,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
max: 150,
|
||
splitNumber: 3,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#233e64",
|
||
},
|
||
},
|
||
axisLine: { show: false },
|
||
axisLabel: {
|
||
margin: 10,
|
||
textStyle: {
|
||
color: "#6a9cd5",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "异常流量",
|
||
type: "line",
|
||
smooth: true, //是否平滑曲线显示
|
||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||
symbolSize: 0,
|
||
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#F56C35 ", // 线条颜色
|
||
},
|
||
},
|
||
areaStyle: {
|
||
//区域填充样式
|
||
normal: {
|
||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{ offset: 0, color: "rgba(61,234,255, 0.3)" },
|
||
{ offset: 0.7, color: "rgba(61,234,255, 0)" },
|
||
],
|
||
false
|
||
),
|
||
|
||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||
shadowBlur: 100, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
},
|
||
},
|
||
data: this.temperatureList,
|
||
},
|
||
],
|
||
};
|
||
chart1.setOption(this.option1);
|
||
|
||
},
|
||
//echarts图2蓝
|
||
createdEchart2() {
|
||
let chart2 = echarts.init(this.$refs["leftEcharts2"]);
|
||
this.option2 = {
|
||
// backgroundColor: "#05224d",
|
||
tooltip: {},
|
||
grid: {
|
||
top: "65%",
|
||
left: "0%",
|
||
right: "0%",
|
||
bottom: "0%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#233e64",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: "#6a9cd5",
|
||
margin: 20,
|
||
},
|
||
},
|
||
axisTick: { show: true },
|
||
data: this.xData,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
max: 150,
|
||
splitNumber: 3,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#233e64",
|
||
},
|
||
},
|
||
axisLine: { show: false },
|
||
axisLabel: {
|
||
margin: 10,
|
||
textStyle: {
|
||
color: "#6a9cd5",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "异常流量",
|
||
type: "line",
|
||
smooth: true, //是否平滑曲线显示
|
||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||
symbolSize: 0,
|
||
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#3deaff", // 线条颜色
|
||
},
|
||
},
|
||
areaStyle: {
|
||
//区域填充样式
|
||
normal: {
|
||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{ offset: 0, color: "rgba(61,234,255, 0.3)" },
|
||
{ offset: 0.7, color: "rgba(61,234,255, 0)" },
|
||
],
|
||
false
|
||
),
|
||
|
||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||
shadowBlur: 100, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
},
|
||
},
|
||
data: this.humidityList,
|
||
},
|
||
],
|
||
};
|
||
chart2.setOption(this.option2);
|
||
|
||
},
|
||
//标养室管理数据
|
||
getRealTimeData() {
|
||
selectStandardDevStatisticsBySnApi({
|
||
projectSn: this.searchSn,
|
||
devSn: this.devSn,
|
||
}).then((res) => {
|
||
console.log("标养室数据------", res);
|
||
this.currentData = res.result.currentData;
|
||
});
|
||
},
|
||
//获取设备列表--环境监测实时数据--下拉
|
||
getDevList() {
|
||
getstandardDevListApi({ projectSn: this.searchSn }).then((result) => {
|
||
console.log("列表", result);
|
||
this.devList = result.result;
|
||
if (result.result.length > 0) {
|
||
this.devSn = result.result[0].devSn;
|
||
this.getRealTimeData();
|
||
this.selectDustNoiseData()
|
||
|
||
}
|
||
});
|
||
},
|
||
//初始化数据
|
||
initData() {
|
||
this.searchSn = this.projectsn;
|
||
this.currentData = {
|
||
currentDayAlarmNum: 0,
|
||
humidity: 0,
|
||
sampleNum: 0,
|
||
temperature: 0,
|
||
};
|
||
this.devSn = "";
|
||
if (this.personnelTypeChart) {
|
||
this.personnelTypeChart.clear();
|
||
}
|
||
|
||
this.getDevList();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.box {
|
||
width: 100%;
|
||
height: 540px;
|
||
display: flex;
|
||
flex-flow: column;
|
||
.leftEcharts1{
|
||
width: 300px;
|
||
height: 300px;
|
||
margin: -160px 0 0 0px;
|
||
}
|
||
.leftEcharts2{
|
||
width: 300px;
|
||
height: 300px;
|
||
margin: -150px 0 0 0px; }
|
||
}
|
||
.environment {
|
||
color: #fff;
|
||
margin-left: 67%;
|
||
margin: -135% 0 0 74%;
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 80px;
|
||
|
||
.icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
&.temperature {
|
||
background: url(../assets/images/quality/i-temperature.png) no-repeat;
|
||
background-size: contain;
|
||
margin-left: 3px;
|
||
}
|
||
&.humidity {
|
||
background: url(../assets/images/quality/i-humidity.png) no-repeat;
|
||
background-size: contain;
|
||
margin-left: 3px;
|
||
}
|
||
// &.spray {
|
||
// background: url(../assets/images/quality/i-spray.png) no-repeat;
|
||
// background-size: contain;
|
||
// }
|
||
}
|
||
.info {
|
||
.value {
|
||
margin-top: 4px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
span {
|
||
color: #f7d502;
|
||
// margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.btn {
|
||
margin: 8px auto;
|
||
width: 408px;
|
||
height: 62px;
|
||
line-height: 62px;
|
||
text-align: center;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #02d5d2;
|
||
background: url(../assets/images/sourse/bg-car-count.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
</style>
|