255 lines
7.2 KiB
Vue
255 lines
7.2 KiB
Vue
<template>
|
|
<!-- 有毒气体监测-监测数据 -->
|
|
<div class="fullHeight">
|
|
<div class="searchBox whiteBlock">
|
|
<el-form :inline="true" size="medium" class="demo-form-inline">
|
|
<el-form-item label="上报时间">
|
|
<el-date-picker
|
|
v-model="time"
|
|
type="daterange"
|
|
value-format="yyyy-MM-dd"
|
|
:range-separator="$t('message.lifter.to')"
|
|
:start-placeholder="$t('message.lifter.startDate')"
|
|
:end-placeholder="$t('message.lifter.deadline')"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="设备名称">
|
|
<el-select v-model="devName" placeholder="请选择">
|
|
<el-option
|
|
:label="item.devName"
|
|
:value="item.devSn"
|
|
v-for="(item, index) in towerList"
|
|
:key="item.devSn"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit" plain>查询</el-button>
|
|
<el-button type="warning" plain @click="refreshBtn">刷新</el-button>
|
|
<el-button type="primary" @click="exportBtn">导出</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="table_wrap whiteBlock">
|
|
<el-table
|
|
:data="tableData"
|
|
class="tables"
|
|
style="width: 100%"
|
|
height="600px"
|
|
>
|
|
<el-table-column prop="devName" align="center" label="设备名称">
|
|
</el-table-column>
|
|
<el-table-column prop="location" align="center" label="安装位置">
|
|
</el-table-column>
|
|
<el-table-column prop="uploadTime" align="center" label="上报时间">
|
|
</el-table-column>
|
|
<el-table-column prop="gasType" align="center" label="气体类型">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.gasType">
|
|
{{gasTypeOption[scope.row.gasType - 1].label}}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="gasVal" align="center" label="监测值">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.gasVal }}{{ getUnit(scope.row.unit) }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
class="pagerBox"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="pageNo"
|
|
:page-sizes="$store.state.PAGESIZRS"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next"
|
|
:total="Number(total)"
|
|
background
|
|
></el-pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getPoisonousGasPageApi,//分页
|
|
getPoisonousGasDevListApi,//设备名称下拉
|
|
} from "@/assets/js/api/edgeProtection";
|
|
export default {
|
|
data() {
|
|
return {
|
|
projectSn: "",
|
|
towerList: [],
|
|
devName: "",
|
|
time: ['', ''],
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
tableData: [],
|
|
gasTypeOption: [
|
|
{
|
|
value: 1,
|
|
label: '氧气'
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '甲烷'
|
|
},
|
|
{
|
|
value: 3,
|
|
label: '一氧化碳'
|
|
},
|
|
{
|
|
value: 4,
|
|
label: '硫化氢'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
created() {
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.selectNowDate()
|
|
this.getTowerList();
|
|
this.getListData();
|
|
},
|
|
methods: {
|
|
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
|
|
selectNowDate() {
|
|
var date = new Date(),
|
|
year = date.getFullYear(),
|
|
month = date.getMonth() + 1,
|
|
day = date.getDate(),
|
|
hours = date.getHours(), //获取当前小时数(0-23)
|
|
minutes = date.getMinutes(), //获取当前分钟数(0-59)
|
|
seconds = date.getSeconds()
|
|
month >= 1 && month <= 9 ? (month = '0' + month) : ''
|
|
day >= 0 && day <= 9 ? (day = '0' + day) : ''
|
|
hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
|
|
minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
|
|
seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
|
|
// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
|
|
var timer = year + '-' + month + '-' + day
|
|
this.time = [timer, timer]
|
|
console.log(timer)
|
|
// return timer;
|
|
},
|
|
getUnit(unit) {
|
|
switch (unit) {
|
|
case 0:
|
|
return '(ppm)';
|
|
case 1:
|
|
return '(%LEL)';
|
|
case 2:
|
|
return '(%VOL)';
|
|
case 3:
|
|
return '(mg/m3)';
|
|
case 4:
|
|
return '(pphm)';
|
|
case 5:
|
|
return '(g/m3)';
|
|
case 6:
|
|
return '无单位';
|
|
case 7:
|
|
return '(ppb)';
|
|
default:
|
|
return '';
|
|
}
|
|
},
|
|
//获取设备下拉
|
|
getTowerList() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
getPoisonousGasDevListApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.towerList = res.result;
|
|
}
|
|
});
|
|
},
|
|
//查询数据
|
|
getListData() {
|
|
let data = {
|
|
queryStartTime: this.time ? this.time[0] : '',
|
|
queryEndTime: this.time ? this.time[1] : '',
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
projectSn: this.projectSn,
|
|
devSn: this.devName,
|
|
};
|
|
getPoisonousGasPageApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.tableData = res.result.records;
|
|
this.total = res.result.total;
|
|
}
|
|
});
|
|
},
|
|
|
|
//导出
|
|
exportBtn() {
|
|
fetch(this.$http.defaults.baseURL + 'xmgl/poisonousGasDevCurrentData/exportXls?&projectSn=' + this.projectSn + '&queryEndTime=' + this.time[1] + '&queryStartTime=' + this.time[0] + '&devName=' + this.devName, {
|
|
headers: {
|
|
'Authorization': this.$store.state.userInfo.token
|
|
}
|
|
})
|
|
.then(response => {
|
|
// 处理响应
|
|
if (!response.ok) {
|
|
throw new Error('导出失败');
|
|
}
|
|
return response.blob();
|
|
})
|
|
.then(blob => {
|
|
console.log('导出成功');
|
|
// 创建一个下载链接
|
|
const url = window.URL.createObjectURL(blob);
|
|
// 创建一个<a>元素
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = '导出文件.xlsx'; // 指定下载文件的文件名
|
|
// 模拟点击下载链接
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
// 释放URL对象
|
|
window.URL.revokeObjectURL(url);
|
|
// 处理导出的文件
|
|
// 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
|
|
})
|
|
.catch(error => {
|
|
// 处理错误
|
|
console.error(error);
|
|
});
|
|
|
|
},
|
|
//查询数据
|
|
onSubmit() {
|
|
this.getListData();
|
|
},
|
|
|
|
//刷新
|
|
refreshBtn() {
|
|
this.time = [];
|
|
this.pageNo = 1;
|
|
this.pageSize = 10;
|
|
this.devName = "";
|
|
this.selectNowDate()
|
|
this.getListData();
|
|
},
|
|
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.getListData();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.pageNo = val;
|
|
this.getListData();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
</style> |