<template>
|
<div>
|
<MyHeader @getList="getRealTimeList" @exportTable="exportInTime"></MyHeader>
|
<!-- 数据展示 -->
|
<div style="width: 100%; overflow-x: scroll">
|
<el-table
|
border
|
stripe
|
ref="multipleTable"
|
:header-cell-style="{
|
background: '#F5F5F5',
|
'font-weight': '650',
|
'line-height': '45px',
|
}"
|
:data="tableData"
|
:row-class-name="tableRowClassName"
|
>
|
<el-table-column label="序号" type="index" width="60px">
|
</el-table-column>
|
<el-table-column prop="Locale" label="监测点" min-width="120px">
|
</el-table-column>
|
<el-table-column prop="Addr" label="安装地址" min-width="180px">
|
</el-table-column>
|
<el-table-column prop="AcquitAtStr" label="采集时间" min-width="100px">
|
</el-table-column>
|
<el-table-column prop="FanStatusStr" label="风机状态" width="80px">
|
</el-table-column>
|
<el-table-column prop="FilterStatusStr" label="净化器状态" width="95px">
|
</el-table-column>
|
<el-table-column
|
prop="EmissionsConc"
|
label="油烟实时浓度（mg/m3）"
|
width="110px"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="CEmissions"
|
label="油烟折算浓度（mg/m3）"
|
width="110px"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="GranuleConc"
|
label="颗粒物实时浓度（mg/m3）"
|
width="120px"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="CGranule"
|
label="颗粒物折算浓度（mg/m3）"
|
width="120px"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="HydrocarbonConc"
|
label="非甲烷总烃实时浓度（mg/m3）"
|
width="160px"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="CHydrocarbon"
|
label="非甲烷总烃折算浓度（mg/m3）"
|
width="160px"
|
>
|
</el-table-column>
|
<el-table-column prop="StatusStr" label="排放状态" width="80px">
|
</el-table-column>
|
<el-table-column prop="OnlineStatusStr" label="整体状态" width="80px">
|
</el-table-column>
|
<el-table-column prop="operation" label="操作" width="180px" fixed="right">
|
<template slot-scope="scope">
|
<div class="operation">
|
<i class="el-icon-document" @click="handleDetectorDailySumDays(scope.row)" title="一点一档"></i>
|
<span class="line">|</span>
|
<i class="el-icon-notebook-1" @click="handleIntimeData(scope.row)" title="查看每分钟数据"></i>
|
<span class="line">|</span>
|
<i class="el-icon-s-data" @click="handleTenMinData(scope.row)" title="查看10min浓度"></i>
|
<span class="line">|</span>
|
<i class="el-icon-data-analysis" @click="handleTenHourData(scope.row)" title="查看小时折算浓度"></i>
|
<span class="line">|</span>
|
<i class="el-icon-monitor" @click="handleDevices(scope.row)" title="监测点设备管理"></i>
|
<!-- <span @click="handleDetectorDailySumDays(scope.row)"
|
></span
|
>
|
<span class="line">|</span>
|
<span @click="handleIntimeData(scope.row)">查看每分钟数据</span>
|
<span class="line">|</span>
|
<span @click="handleTenMinData(scope.row)">查看10min浓度</span>
|
<span class="line">|</span>
|
<span @click="handleTenHourData(scope.row)"
|
>查看小时折算浓度</span
|
>
|
<span class="line">|</span>
|
<span @click="handleDevices(scope.row)">监测点设备管理</span> -->
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="tools">
|
<div class="pagination">
|
<el-pagination
|
background
|
@prev-click="handlePrev"
|
@next-click="handleNext"
|
:current-page="currentPage"
|
layout="prev, pager, next"
|
:total="totalNum"
|
:page-size="pageSize"
|
@current-change="changeCurrentPage"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
<el-dialog
|
:destroy-on-close="true"
|
:visible.sync="dialogDetectorDailySumDays"
|
width="80%"
|
>
|
<DetectorDailySumDays
|
title="一点一档"
|
v-if="dialogDetectorDailySumDays"
|
@closeDialog="closeDialog"
|
:inTimeData="inTimeData"
|
></DetectorDailySumDays>
|
</el-dialog>
|
|
|
<el-dialog
|
:destroy-on-close="true"
|
:visible.sync="dialogIntimeData"
|
width="80%"
|
>
|
<IntimeData
|
v-if="dialogIntimeData"
|
title="分钟采集数据"
|
@closeDialog="closeDialog"
|
:inTimeData="inTimeData"
|
></IntimeData>
|
</el-dialog>
|
|
|
<el-dialog
|
:destroy-on-close="true"
|
:visible.sync="dialogTenMinData"
|
width="80%"
|
>
|
<TenMinData
|
v-if="dialogTenMinData"
|
title="10min浓度曲线"
|
@closeDialog="closeDialog"
|
:inTimeData="inTimeData"
|
></TenMinData>
|
</el-dialog>
|
|
<el-dialog
|
:destroy-on-close="true"
|
title="小时折算浓度"
|
:visible.sync="dialogTenHourData"
|
width="80%"
|
>
|
<TenHourData
|
v-if="dialogTenHourData"
|
@closeDialog="closeDialog"
|
:inTimeData="inTimeData"
|
></TenHourData>
|
</el-dialog>
|
|
|
<el-dialog
|
:destroy-on-close="true"
|
title="监测点设备管理"
|
:visible.sync="dialogDevices"
|
width="80%"
|
>
|
<Devices
|
v-if="dialogDevices"
|
@closeDialog="closeDialog"
|
:inTimeData="inTimeData"
|
></Devices>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import MyHeader from "./components/header";
|
|
import DetectorDailySumDays from "./components/detectorDailySumDays.vue";
|
import Devices from "./components/devices.vue";
|
import IntimeData from "./components/intimeData.vue";
|
import TenHourData from "./components/tenHourData.vue";
|
import TenMinData from "./components/tenMinData.vue";
|
|
import realTimeApi from "@/api/smoke/realTime";
|
export default {
|
data() {
|
return {
|
tableData: [],
|
totalNum: 0,
|
pageSize: 10,
|
currentPage: 1,
|
dialogDetectorDailySumDays: false,
|
dialogDevices: false,
|
dialogIntimeData: false,
|
dialogTenHourData: false,
|
dialogTenMinData: false,
|
inTimeData:{}
|
};
|
},
|
components: {
|
MyHeader,
|
DetectorDailySumDays,
|
TenHourData,
|
Devices,
|
IntimeData,
|
TenMinData,
|
},
|
created() {
|
this.getRealTimeList();
|
},
|
methods: {
|
getRealTimeList(seachData) {
|
let params;
|
if (seachData) {
|
params = this.getParam(seachData);
|
} else {
|
params = {
|
pageNum: this.currentPage,
|
pageSize: this.pageSize,
|
};
|
}
|
|
realTimeApi
|
.findInTimeList(params)
|
.then(({ list, total }) => {
|
list.forEach((e) => {
|
e.AcquitAtStr = this.dateFormat(
|
"YYYY-mm-dd HH:MM",
|
new Date(e.AcquitAt * 1000)
|
);
|
e.FanStatusStr = this.FanStatusStr(e.FanStatus);
|
e.FilterStatusStr = this.FanStatusStr(e.FilterStatus);
|
e.OnlineStatusStr = this.OnlineStatusStr(e.OnlineStatus);
|
e.StatusStr = this.StatusStr(e.Status);
|
});
|
this.tableData = list;
|
this.totalNum = total;
|
})
|
.catch((err) => this.$message.error(err));
|
},
|
exportInTime(seachData) {
|
let params;
|
if (seachData) {
|
params = this.getParam(seachData);
|
}
|
realTimeApi
|
.exportInTime(params)
|
.then((res) => {
|
let time = new Date();
|
let deathdate = time.toLocaleDateString();
|
const blob = new Blob([res.data], {
|
type: "application/vnd.ms-excel;charset=utf-8",
|
});
|
if (window.navigator.msSaveBlob) {
|
window.navigator.msSaveBlob(blob, deathdate + "实时数据" + ".xls");
|
} else {
|
const url = window.URL.createObjectURL(blob);
|
const link = document.createElement("a");
|
link.style.display = "none";
|
link.href = url;
|
link.download = deathdate + "实时数据" + ".xls";
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
}
|
this.$message.success("操作成功");
|
})
|
.catch((err) => this.$message.error(err));
|
},
|
getParam(seachData) {
|
let params;
|
if (seachData) {
|
const seachParams = seachData.seachData;
|
params = {
|
owner: seachParams.owner == undefined ? null : seachParams.owner,
|
onlineStatus:
|
seachParams.onlineStatus == undefined
|
? null
|
: seachParams.onlineStatus,
|
status: seachParams.status == undefined ? null : seachParams.status,
|
type: seachParams.type == undefined ? null : seachParams.type,
|
startTime:
|
seachParams.alarmTime == undefined
|
? null
|
: this.dateFormat(
|
"YYYY-mm-dd HH:MM:SS",
|
seachParams.alarmTime[0]
|
),
|
endTime:
|
seachParams.alarmTime == undefined
|
? null
|
: this.dateFormat(
|
"YYYY-mm-dd HH:MM:SS",
|
seachParams.alarmTime[1]
|
),
|
};
|
}
|
return params;
|
},
|
|
FanStatusStr(FanStatus) {
|
switch (FanStatus) {
|
case 1:
|
return "开";
|
case 2:
|
return "关";
|
default:
|
return "异常";
|
}
|
},
|
OnlineStatusStr(Status) {
|
switch (Status) {
|
case 1:
|
return "在线";
|
case 2:
|
return "离线";
|
default:
|
return "异常离线";
|
}
|
},
|
StatusStr(Status) {
|
switch (Status) {
|
case "NORMAL":
|
return "正常";
|
case "ALARM":
|
return "预警";
|
case "EXCESS":
|
return "超标";
|
case "DOWN":
|
return "离线";
|
default:
|
return "异常离线";
|
}
|
},
|
// 设置表格斑马纹
|
tableRowClassName({ row, rowIndex }) {
|
if ((rowIndex + 1) % 2 === 0) {
|
return "warning-row";
|
} else {
|
return "success-row";
|
}
|
},
|
// 当前页改变触发事件
|
changeCurrentPage(page) {
|
this.currentPage = page;
|
this.getRealTimeList();
|
},
|
// 上一页点击事件
|
handlePrev(page) {
|
this.currentPage = page;
|
this.getRealTimeList();
|
},
|
// 下一页点击事件
|
handleNext(page) {
|
this.currentPage = page;
|
this.getRealTimeList();
|
},
|
dateFormat(fmt, date) {
|
let ret;
|
const opt = {
|
"Y+": date.getFullYear().toString(), // 年
|
"m+": (date.getMonth() + 1).toString(), // 月
|
"d+": date.getDate().toString(), // 日
|
"H+": date.getHours().toString(), // 时
|
"M+": date.getMinutes().toString(), // 分
|
"S+": date.getSeconds().toString(), // 秒
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
};
|
for (let k in opt) {
|
ret = new RegExp("(" + k + ")").exec(fmt);
|
if (ret) {
|
fmt = fmt.replace(
|
ret[1],
|
ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
|
);
|
}
|
}
|
return fmt;
|
},
|
handleDetectorDailySumDays(row) {
|
this.dialogDetectorDailySumDays = true;
|
this.inTimeData = row
|
},
|
handleIntimeData(row) {
|
this.dialogIntimeData = true;
|
this.inTimeData = row
|
},
|
handleTenMinData(row) {
|
this.dialogTenMinData = true;
|
this.inTimeData = row
|
},
|
handleTenHourData(row) {
|
this.dialogTenHourData = true;
|
this.inTimeData = row
|
},
|
handleDevices(row) {
|
this.dialogDevices = true;
|
this.inTimeData = row
|
},
|
closeDialog() {
|
this.dialogDetectorDailySumDays = false;
|
this.dialogDevices = false;
|
this.dialogIntimeData = false;
|
this.dialogTenHourData = false;
|
this.dialogTenMinData = false;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.el-table {
|
.operation {
|
display: flex;
|
// color: var(--operation-color);
|
.line {
|
padding: 0 5px;
|
}
|
|
font-size: 20px;
|
cursor: pointer;
|
color: #666;
|
span:hover {
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
