712 lines
19 KiB
Vue
712 lines
19 KiB
Vue
<template>
|
||
<div class="fullHeight greenPage">
|
||
<div class="headerBox">
|
||
<h1 class="title">
|
||
{{ $store.state.currentProDetail.projectName }} -
|
||
{{ $t('message.markRoomOverview.title') }}
|
||
</h1>
|
||
<closePage v-if="closeShow"></closePage>
|
||
</div>
|
||
<div class="leftLine"></div>
|
||
<div class="rightLine"></div>
|
||
<div class="bottomLine"></div>
|
||
<div class="devBox">
|
||
<span
|
||
class="greenBtn"
|
||
:class="{ active: item.devSn == currentDevDetail.devSn }"
|
||
v-for="(item, index) in devList"
|
||
:key="index"
|
||
@click="realTimeMonitor(item)"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ item.laboratoryName }}
|
||
</span>
|
||
</div>
|
||
<div class="greenContent">
|
||
<div class="top">
|
||
<div class="smallDiv smallDiv1 fullHeight">
|
||
<div class="blockBox">
|
||
<div class="title">
|
||
<p class="e1">{{ $t('message.markRoomOverview.e1') }}</p>
|
||
</div>
|
||
<div class="blockContent">
|
||
<el-row class="fullHeight">
|
||
<el-col :span="12" class="fullHeight">
|
||
<div class="tempChartBox">
|
||
<div class="fullHeight" ref="monitor"></div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12" class="fullHeight">
|
||
<div class="tempBox">
|
||
<div class="numBox">{{ realTimeData.temperature }}℃</div>
|
||
<p class="text">
|
||
<!-- 温度 -->
|
||
{{ $t('message.projectInfo.temperature') }}
|
||
</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="centerDiv fullHeight">
|
||
<div class="realTimeDataBox">
|
||
<p>
|
||
<i :class="realTimeData.auxiliaryHeat == 1 ? 'on' : ''"></i>
|
||
<!-- 辅热 -->
|
||
{{ $t('message.projectInfo.auxiliaryHeating') }}
|
||
</p>
|
||
<p>
|
||
<i :class="realTimeData.temperatureControl == 1 ? 'on' : ''"></i>
|
||
<!-- 控温 -->
|
||
{{ $t('message.projectInfo.temperatureControl') }}
|
||
</p>
|
||
<p>
|
||
<i :class="realTimeData.humidification == 1 ? 'on' : ''"></i>
|
||
<!-- 加湿 -->
|
||
{{ $t('message.projectInfo.humidification') }}
|
||
</p>
|
||
<p>
|
||
<i :class="realTimeData.fan == 1 ? 'on' : ''"></i>
|
||
<!-- 风机 -->
|
||
{{ $t('message.projectInfo.draughtFan') }}
|
||
</p>
|
||
<p>
|
||
<i :class="realTimeData.arefaction == 1 ? 'on' : ''"></i>
|
||
<!-- 除湿 -->
|
||
{{ $t('message.projectInfo.dehumidification') }}
|
||
</p>
|
||
</div>
|
||
<div class="centerDataBox">
|
||
<p class="num">{{ currentDayAlarmNum }}</p>
|
||
<p class="text">
|
||
<!-- 今日报警次数 -->
|
||
{{ $t('message.projectInfo.todayAlarmNum') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="smallDiv fullHeight">
|
||
<div class="blockBox">
|
||
<div class="title">
|
||
<p class="e3">{{ $t('message.markRoomOverview.e3') }}</p>
|
||
</div>
|
||
<div class="blockContent">
|
||
<el-row class="fullHeight">
|
||
<el-col :span="12" class="fullHeight">
|
||
<div class="tempChartBox">
|
||
<div class="fullHeight" ref="monitor2"></div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12" class="fullHeight">
|
||
<div class="tempBox">
|
||
<div class="numBox">{{ realTimeData.humidity }}%RH</div>
|
||
<p class="text">
|
||
<!-- 湿度 -->
|
||
{{ $t('message.projectInfo.wetValue') }}
|
||
</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="blockBox fullHeight">
|
||
<div class="title">
|
||
<p class="e6">{{ $t('message.markRoomOverview.e6') }}</p>
|
||
</div>
|
||
<div class="blockContent">
|
||
<vue-scroll>
|
||
<table class="greenTable">
|
||
<thead>
|
||
<tr>
|
||
<th>
|
||
{{ $t('message.markRoomOverview.table2.th1') }}
|
||
</th>
|
||
<th>
|
||
{{ $t('message.markRoomOverview.table2.th2') }}
|
||
</th>
|
||
<th>
|
||
{{ $t('message.markRoomOverview.table2.th3') }}
|
||
</th>
|
||
<!-- <th>
|
||
{{ $t("message.markRoomOverview.table2.th4") }}
|
||
</th>
|
||
<th>
|
||
{{ $t("message.markRoomOverview.table2.th5") }}
|
||
</th> -->
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in alarmList" :key="index">
|
||
<td>
|
||
{{ item.laboratoryName }}
|
||
</td>
|
||
<td>{{ item.alarmTime }}</td>
|
||
<td>{{ item.alarmType }}</td>
|
||
<!-- <td>{{ item.alarmValue }}</td> -->
|
||
<!-- <td>{{ item.thresholdValue }}</td> -->
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="alarmList.length == 0"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{ $t('message.projectInfo.noData') }}
|
||
</p>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox fullHeight">
|
||
<div class="title">
|
||
<p class="e7">{{ $t('message.markRoomOverview.e7') }}</p>
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="operateBar">
|
||
<span
|
||
class="greenBtn"
|
||
@click="switchingData(1)"
|
||
:class="checked == 1 ? 'active' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t('message.markRoomOverview.e6SelectArr')[0].title }}
|
||
</span>
|
||
<span
|
||
class="greenBtn"
|
||
@click="switchingData(2)"
|
||
:class="checked == 2 ? 'active' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t('message.markRoomOverview.e6SelectArr')[1].title }}
|
||
</span>
|
||
</div>
|
||
<div class="near24hChart" ref="near24hChart"></div>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="dustData_24.length == 0"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{ $t('message.projectInfo.noData') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import {
|
||
getstandardDevListApi,
|
||
selectNewCurrentDataApi,
|
||
getStandardAlarmStatisticsApi,
|
||
selectDayCurrentDataListApi,
|
||
} from "@/assets/js/api/markingRoom";
|
||
import closePage from "@/components/closePage"
|
||
export default {
|
||
components: { closePage },
|
||
data() {
|
||
return {
|
||
devList: [],
|
||
currentDevDetail: {},
|
||
projectSn: "",
|
||
alarmList: [],
|
||
checked: 1,
|
||
airType: 1,
|
||
airAnalysis: [],
|
||
currentDayAlarmNum: 0,
|
||
dustData_24: [],
|
||
realTimeData: {
|
||
arefaction: 0,
|
||
auxiliaryHeat: 0,
|
||
devSn: "",
|
||
fan: 0,
|
||
humidification: 0,
|
||
humidity: "",
|
||
id: 0,
|
||
projectSn: "",
|
||
receiveTime: "",
|
||
runState: 0,
|
||
temperature: "",
|
||
temperatureControl: 0,
|
||
closeShow: true,
|
||
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
},
|
||
mounted() {
|
||
if (window.history.length != 1) {
|
||
this.closeShow = true
|
||
} else {
|
||
this.closeShow = false
|
||
}
|
||
this.$nextTick(() => {
|
||
this.getDevList();
|
||
});
|
||
},
|
||
methods: {
|
||
//获取设备列表--环境监测实时数据--下拉
|
||
getDevList() {
|
||
getstandardDevListApi({ projectSn: this.$store.state.projectSn }).then(
|
||
(result) => {
|
||
// console.log('列表', result)
|
||
this.devList = result.result;
|
||
if (result.result.length > 0) {
|
||
this.currentDevDetail = result.result[0];
|
||
this.selectDustNoiseData();
|
||
this.getAlarmList();
|
||
this.getRealTimeData();
|
||
}
|
||
}
|
||
);
|
||
},
|
||
|
||
//切换环境单位
|
||
realTimeMonitor(value) {
|
||
this.currentDevDetail = value;
|
||
this.selectDustNoiseData();
|
||
this.getAlarmList();
|
||
this.getRealTimeData();
|
||
},
|
||
//获取实时数据
|
||
getRealTimeData() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
devSn: this.currentDevDetail.devSn,
|
||
};
|
||
selectNewCurrentDataApi(data).then((res) => {
|
||
if (res.result) {
|
||
this.realTimeData = res.result;
|
||
}
|
||
// ▪ 温度测量范围精度： -40℃~80℃ ±0.5℃
|
||
// ▪ 湿度测量范围精度： 0~99%RH ±1%RH
|
||
this.createdEcharts3(this.$refs.monitor, this.realTimeData.temperature, -40, 80);
|
||
this.createdEcharts3(this.$refs.monitor2, this.realTimeData.humidity, 0, 99);
|
||
});
|
||
},
|
||
|
||
//获取报警列表
|
||
getAlarmList() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
devSn: this.currentDevDetail.devSn,
|
||
};
|
||
getStandardAlarmStatisticsApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.currentDayAlarmNum = res.result.currentDayAlarmNum;
|
||
this.alarmList = res.result.alarmList;
|
||
}
|
||
});
|
||
},
|
||
//近24小时数据
|
||
selectDustNoiseData() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
devSn: this.currentDevDetail.devSn,
|
||
};
|
||
selectDayCurrentDataListApi(data).then((res) => {
|
||
// console.log(res)
|
||
this.dustData_24 = res.result;
|
||
this.createdEcharts2();
|
||
});
|
||
},
|
||
|
||
//切换 24小时数据
|
||
switchingData(value) {
|
||
this.checked = value;
|
||
this.createdEcharts2();
|
||
},
|
||
//创建图表 --- 环境监测
|
||
createdEcharts3(obj, TP_value, min, max) {
|
||
let that = this;
|
||
//项目进度
|
||
let monitor = echarts.init(obj);
|
||
monitor.clear();
|
||
// var TP_value = this.realTimeData.temperature;
|
||
var kd = [];
|
||
var Gradient = [];
|
||
var leftColor = "";
|
||
var showValue = 0;
|
||
var boxPosition = [65, 0];
|
||
var TP_txt = "";
|
||
// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
|
||
for (var i = 0, len = 135; i <= len; i++) {
|
||
if (i < 10 || i > 130) {
|
||
kd.push("");
|
||
} else {
|
||
if ((i - 10) % 20 === 0) {
|
||
kd.push("-3");
|
||
} else if ((i - 10) % 4 === 0) {
|
||
kd.push("-1");
|
||
} else {
|
||
kd.push("");
|
||
}
|
||
}
|
||
}
|
||
//中间线的渐变色和文本内容
|
||
if (TP_value > 20) {
|
||
TP_txt = "温度偏高";
|
||
Gradient.push(
|
||
{
|
||
offset: 0,
|
||
color: "#93FE94",
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#E4D225",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#E01F28",
|
||
}
|
||
);
|
||
} else if (TP_value > -20) {
|
||
TP_txt = "温度正常";
|
||
Gradient.push(
|
||
{
|
||
offset: 0,
|
||
color: "#93FE94",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#E4D225",
|
||
}
|
||
);
|
||
} else {
|
||
TP_txt = "温度偏低";
|
||
Gradient.push({
|
||
offset: 1,
|
||
color: "#93FE94",
|
||
});
|
||
}
|
||
if (TP_value > max) {
|
||
showValue = max;
|
||
} else {
|
||
if (TP_value < min) {
|
||
showValue = min;
|
||
} else {
|
||
showValue = parseInt(TP_value);
|
||
}
|
||
}
|
||
// if (TP_value < -10) {
|
||
// boxPosition = [65, -120];
|
||
// }
|
||
leftColor = Gradient[Gradient.length - 1].color;
|
||
// 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
|
||
var option = {
|
||
// backgroundColor: '#0C2F6F',
|
||
grid: {
|
||
right: -450,
|
||
bottom: 35,
|
||
top: 35,
|
||
left: 20,
|
||
},
|
||
title: {
|
||
text: "温度计",
|
||
show: false,
|
||
},
|
||
yAxis: [
|
||
{
|
||
show: false,
|
||
data: [],
|
||
min: 0,
|
||
max: 135,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
show: false,
|
||
min: 0,
|
||
max: 50,
|
||
},
|
||
],
|
||
xAxis: [
|
||
{
|
||
show: false,
|
||
min: -10,
|
||
max: 150,
|
||
data: [],
|
||
},
|
||
{
|
||
show: false,
|
||
min: -10,
|
||
max: 150,
|
||
data: [],
|
||
},
|
||
{
|
||
show: false,
|
||
min: -10,
|
||
max: 150,
|
||
data: [],
|
||
},
|
||
{
|
||
show: false,
|
||
min: -5,
|
||
max: 150,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "条",
|
||
type: "bar",
|
||
// 对应上面XAxis的第一个对)象配置
|
||
xAxisIndex: 0,
|
||
data: [
|
||
{
|
||
value: showValue + Math.abs(min) + 10,
|
||
},
|
||
],
|
||
|
||
barWidth: 12,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient),
|
||
},
|
||
},
|
||
z: 2,
|
||
},
|
||
{
|
||
name: "白框",
|
||
type: "bar",
|
||
xAxisIndex: 1,
|
||
barGap: "-100%",
|
||
data: [134],
|
||
barWidth: 20,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#0C2E6D",
|
||
barBorderRadius: 50,
|
||
},
|
||
},
|
||
z: 1,
|
||
},
|
||
{
|
||
name: "外框",
|
||
type: "bar",
|
||
xAxisIndex: 2,
|
||
barGap: "-100%",
|
||
data: [135],
|
||
barWidth: 25,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#4577BA",
|
||
barBorderRadius: 50,
|
||
},
|
||
},
|
||
z: 0,
|
||
},
|
||
{
|
||
name: "圆",
|
||
type: "scatter",
|
||
hoverAnimation: false,
|
||
data: [0],
|
||
xAxisIndex: 0,
|
||
symbolSize: 25,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#93FE94",
|
||
opacity: 1,
|
||
},
|
||
},
|
||
z: 2,
|
||
},
|
||
{
|
||
name: "白圆",
|
||
type: "scatter",
|
||
hoverAnimation: false,
|
||
data: [0],
|
||
xAxisIndex: 1,
|
||
symbolSize: 36,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#0C2E6D",
|
||
opacity: 1,
|
||
},
|
||
},
|
||
z: 1,
|
||
},
|
||
{
|
||
name: "外圆",
|
||
type: "scatter",
|
||
hoverAnimation: false,
|
||
data: [0],
|
||
xAxisIndex: 2,
|
||
symbolSize: 40,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#4577BA",
|
||
opacity: 1,
|
||
},
|
||
},
|
||
z: 0,
|
||
},
|
||
{
|
||
name: "刻度",
|
||
type: "bar",
|
||
yAxisIndex: 0,
|
||
xAxisIndex: 3,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "left",
|
||
distance: 3,
|
||
color: "white",
|
||
fontSize: 11,
|
||
formatter: function (params) {
|
||
if (params.dataIndex > 130 || params.dataIndex < 10) {
|
||
return "";
|
||
} else {
|
||
if ((params.dataIndex - 10) % 20 === 0) {
|
||
return params.dataIndex - Math.abs(min) - 10;
|
||
} else {
|
||
return "";
|
||
}
|
||
}
|
||
},
|
||
},
|
||
},
|
||
barGap: "-100%",
|
||
data: kd,
|
||
barWidth: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "white",
|
||
barBorderRadius: 120,
|
||
},
|
||
},
|
||
z: 0,
|
||
},
|
||
],
|
||
};
|
||
monitor.setOption(option);
|
||
},
|
||
//创建图表 --- 近24小时数据
|
||
createdEcharts2() {
|
||
var xdata = [],
|
||
ydata = [];
|
||
let monitor = echarts.init(this.$refs.near24hChart);
|
||
monitor.clear();
|
||
this.dustData_24.forEach((element) => {
|
||
//
|
||
xdata.push(element.receiveTime.split(" ")[1]);
|
||
switch (this.checked) {
|
||
case 1:
|
||
ydata.push(element.temperature);
|
||
break;
|
||
case 2:
|
||
ydata.push(element.humidity);
|
||
break;
|
||
}
|
||
});
|
||
|
||
var option = {
|
||
grid: {
|
||
top: 20,
|
||
left: 50,
|
||
bottom: 20,
|
||
right: 20,
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.1)",
|
||
},
|
||
},
|
||
},
|
||
color: ["rgba(211, 172, 59, 1)"],
|
||
xAxis: {
|
||
type: "category",
|
||
data: xdata,
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.3)",
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(255,255,255,0.1)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.3)",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: ydata,
|
||
type: "line",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
},
|
||
symbol: "none",
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(211, 172, 59, 0.5)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#13151C",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
monitor.setOption(option);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import url('./style.less');
|
||
</style> |