360 lines
11 KiB
Vue
360 lines
11 KiB
Vue
|
<template>
|
||
|
|
<div class="fullHeight">
|
||
|
|
<div class="searchBox whiteBlock">
|
||
|
|
<!-- 智能张拉——设备管理 -->
|
||
|
|
<el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
|
||
|
|
<el-form-item label="设备名称">
|
||
|
|
<el-select v-model="searchForm.devSn" clearable placeholder="请选择">
|
||
|
|
<el-option v-for="(item, index) in devList" :key="index" :label="item.devName" :value="item.devSn">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" plain @click="getList">{{
|
||
|
|
$t("message.energyManage.waybill.query")
|
||
|
|
}}</el-button>
|
||
|
|
<el-button type="warning" plain @click="refresh">{{
|
||
|
|
$t("message.deviceManage.refresh")
|
||
|
|
}}</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<div class="table_wrap">
|
||
|
|
<vue-scroll style="height: calc(100% - 83px);">
|
||
|
|
<div class="list-content">
|
||
|
|
<div class="list-content-item" v-for="(item, index) in List" :key="index">
|
||
|
|
<div class="item-top">
|
||
|
|
<div class="line"></div>
|
||
|
|
<span>{{ item.devName }}</span>
|
||
|
|
<div @click="showDetail(item)">查看详情</div>
|
||
|
|
</div>
|
||
|
|
<div class="item-subtop">
|
||
|
|
{{ item.updateDate }}
|
||
|
|
</div>
|
||
|
|
<div class="item-bottom">
|
||
|
|
<div>
|
||
|
|
<span>PH值</span>
|
||
|
|
<span>{{ item.phValue }}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>电导率(μS/cm)</span>
|
||
|
|
<span>{{ item.conductivity }}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>水温(℃)</span>
|
||
|
|
<span>{{ item.waterTemperature }}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>溶解氧(mg/L)</span>
|
||
|
|
<span>{{ item.dissolvedOxygen }}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>浊度值(NTU)</span>
|
||
|
|
<span>{{ item.turbidityValue }}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>流速(m/s)</span>
|
||
|
|
<span>{{ item.flowVelocity }}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>水位(m)</span>
|
||
|
|
<span>{{ item.waterLevel }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</vue-scroll>
|
||
|
|
<el-pagination class="pagerBox" @size-change="SizeChange" @current-change="CurrentChange"
|
||
|
|
:current-page="pagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize"
|
||
|
|
layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background></el-pagination>
|
||
|
|
</div>
|
||
|
|
<el-dialog :modal-append-to-body="false" @close="close" :title="title" :visible.sync="dialogShow" width="800px">
|
||
|
|
<div class="dialog_content">
|
||
|
|
<div class="search-form">
|
||
|
|
<el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
|
||
|
|
<el-form-item label="时间">
|
||
|
|
<el-date-picker v-model="searchForm.time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
|
||
|
|
end-placeholder="结束日期">
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" plain @click="getMonitorList">{{
|
||
|
|
$t("message.energyManage.waybill.query")
|
||
|
|
}}</el-button>
|
||
|
|
<el-button type="primary" plain @click="exportData">导出</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<div class="dialog-table">
|
||
|
|
<el-table class="tables" :data="historyList">
|
||
|
|
<el-table-column prop="createDate" align="center" width="200" label="上报时间"></el-table-column>
|
||
|
|
<el-table-column prop="phValue" align="center" label="PH值"></el-table-column>
|
||
|
|
<el-table-column prop="turbidityValue" align="center" label="浊度值"></el-table-column>
|
||
|
|
<el-table-column prop="conductivity" align="center" label="电导率"></el-table-column>
|
||
|
|
<el-table-column prop="dissolvedOxygen" align="center" label="溶解氧"></el-table-column>
|
||
|
|
<el-table-column prop="waterTemperature" align="center" label="水温"></el-table-column>
|
||
|
|
<el-table-column prop="flowVelocity" align="center" label="流速"></el-table-column>
|
||
|
|
<el-table-column prop="waterLevel" align="center" label="水位"></el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
<div class="dialog-pagination">
|
||
|
|
<el-pagination class="pagerBox" @size-change="monitorSizeChange" @current-change="monitorCurrentChange"
|
||
|
|
:current-page="pagMonitorInfo.pageNo" :page-sizes="$store.state.PAGESIZRS"
|
||
|
|
:page-size="pagMonitorInfo.pageSize" layout="total, sizes, prev, pager, next"
|
||
|
|
:total="Number(pagMonitorInfo.total)" background></el-pagination>
|
||
|
|
</div>
|
||
|
|
<div class="dialog-footer">
|
||
|
|
<el-button type="primary" @click="dialogShow = false" size="medium">关闭</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
sewageDataPage,
|
||
|
|
sewageDevList,
|
||
|
|
sewageMonitorDataPage,
|
||
|
|
sewageMonitorDataExport
|
||
|
|
} from "@/assets/js/api/sewageMonitor.js";
|
||
|
|
export default {
|
||
|
|
mounted() { },
|
||
|
|
created() {
|
||
|
|
this.getList();
|
||
|
|
this.getDevList();
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: "",
|
||
|
|
dialogShow: false,
|
||
|
|
pagInfo: {
|
||
|
|
pageNo: 1, //页数
|
||
|
|
pageSize: 10, //条数
|
||
|
|
total: 0, //总条数
|
||
|
|
},
|
||
|
|
pagMonitorInfo: {
|
||
|
|
pageNo: 1, //页数
|
||
|
|
pageSize: 10, //条数
|
||
|
|
total: 0, //总条数
|
||
|
|
},
|
||
|
|
devList: [],
|
||
|
|
List: [],
|
||
|
|
historyList: [],
|
||
|
|
searchForm: {
|
||
|
|
devSn: "",
|
||
|
|
time: "",
|
||
|
|
},
|
||
|
|
devSn: ""
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 导出数据
|
||
|
|
async exportData(){
|
||
|
|
let requestData = {
|
||
|
|
devSn: this.devSn
|
||
|
|
}
|
||
|
|
if(this.searchForm.time && this.searchForm.time.length > 0){
|
||
|
|
requestData.createDate_begin = this.searchForm.time[0]
|
||
|
|
requestData.createDate_end = this.searchForm.time[1]
|
||
|
|
}
|
||
|
|
fetch(this.$http.defaults.baseURL + 'xmgl/sewageData/exportXls', {
|
||
|
|
method: 'post',
|
||
|
|
headers: {
|
||
|
|
'Authorization': this.$store.state.userInfo.token,
|
||
|
|
'Content-Type': 'application/json' // 设置请求头的内容类型为JSON
|
||
|
|
},
|
||
|
|
body: JSON.stringify(requestData) // 将data对象转换为JSON字符串并作为请求体发送
|
||
|
|
})
|
||
|
|
.then(response => {
|
||
|
|
// 处理响应
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error('下载失败');
|
||
|
|
}
|
||
|
|
return response.blob();
|
||
|
|
})
|
||
|
|
.then(blob => {
|
||
|
|
// 创建一个下载链接
|
||
|
|
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对象来获取导出的文件内容或者将其保存到本地
|
||
|
|
console.log("下载",link,url)
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
// 处理错误
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 查看详情
|
||
|
|
async showDetail(obj) {
|
||
|
|
console.log(obj)
|
||
|
|
this.title = "监测记录";
|
||
|
|
this.searchForm.time = null;
|
||
|
|
this.devSn = obj.devSn
|
||
|
|
this.getMonitorList();
|
||
|
|
this.dialogShow = true;
|
||
|
|
},
|
||
|
|
// 查询监测记录
|
||
|
|
async getMonitorList(devSn) {
|
||
|
|
let requestData = {
|
||
|
|
devSn:this.devSn,
|
||
|
|
pageNo: this.pagMonitorInfo.pageNo,
|
||
|
|
pageSize: this.pagMonitorInfo.pageSize
|
||
|
|
}
|
||
|
|
if(this.searchForm.time && this.searchForm.time.length > 0){
|
||
|
|
requestData.createDate_begin = this.searchForm.time[0]
|
||
|
|
requestData.createDate_end = this.searchForm.time[1]
|
||
|
|
}
|
||
|
|
const res = await sewageMonitorDataPage(requestData);
|
||
|
|
if (res.success) {
|
||
|
|
this.historyList = res.result.records;
|
||
|
|
this.pagMonitorInfo.total = res.result.total;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 查询设备列表
|
||
|
|
getDevList() {
|
||
|
|
sewageDevList().then((result) => {
|
||
|
|
if (result.success) {
|
||
|
|
this.devList = result.result;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//查询列表
|
||
|
|
getList() {
|
||
|
|
sewageDataPage({
|
||
|
|
pageNo: this.pagInfo.pageNo,
|
||
|
|
pageSize: this.pagInfo.pageSize,
|
||
|
|
projectSn: this.$store.state.projectSn,
|
||
|
|
devSn: this.searchForm.devSn,
|
||
|
|
}).then((result) => {
|
||
|
|
if (result.success) {
|
||
|
|
this.List = result.result.records;
|
||
|
|
this.pagInfo.total = result.result.total;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
this.dialogShow = false;
|
||
|
|
},
|
||
|
|
monitorSizeChange(val) {
|
||
|
|
this.pagMonitorInfo.pageSize = val;
|
||
|
|
this.getMonitorList();
|
||
|
|
},
|
||
|
|
monitorCurrentChange(val) {
|
||
|
|
this.pagMonitorInfo.pageNo = val;
|
||
|
|
this.getMonitorList();
|
||
|
|
},
|
||
|
|
SizeChange(val) {
|
||
|
|
this.pagInfo.pageSize = val;
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
CurrentChange(val) {
|
||
|
|
this.pagInfo.pageNo = val;
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
refresh() {
|
||
|
|
this.searchForm = {};
|
||
|
|
this.pagInfo.pageNo = 1; //页数
|
||
|
|
this.pagInfo.pageSize = 10; //条数
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.flex {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(5, 1fr);
|
||
|
|
grid-gap: 20px;
|
||
|
|
|
||
|
|
&-item {
|
||
|
|
width: 330px;
|
||
|
|
height: 350px;
|
||
|
|
padding: 20px 15px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background-color: #fff;
|
||
|
|
|
||
|
|
.item-top {
|
||
|
|
.flex();
|
||
|
|
|
||
|
|
.line {
|
||
|
|
width: 3px;
|
||
|
|
height: 15px;
|
||
|
|
background-color: #5181f6;
|
||
|
|
border-radius: 10px;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
>span {
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
>div:last-child {
|
||
|
|
width: 90px;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #5181f6;
|
||
|
|
border-radius: 3px;
|
||
|
|
color: white;
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-subtop {
|
||
|
|
margin-top: 10px;
|
||
|
|
color: #a2a4af;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-bottom {
|
||
|
|
>div {
|
||
|
|
margin-top: 20px;
|
||
|
|
.flex();
|
||
|
|
|
||
|
|
span:nth-child(1) {
|
||
|
|
color: #7c829e;
|
||
|
|
font-size: 18px;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
span:nth-child(2) {
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog_content {
|
||
|
|
padding: 0px;
|
||
|
|
|
||
|
|
.search-form {
|
||
|
|
margin: 0 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/.el-dialog__body {
|
||
|
|
padding-left: 0px;
|
||
|
|
padding-right: 0px;
|
||
|
|
}
|
||
|
|
</style>
|