|
|
|
|
@ -7,7 +7,7 @@
|
|
|
|
|
<div class="header-sub">
|
|
|
|
|
<el-select v-model="client_id" placeholder="请选择柜体" @change="(val) => valueChange('id',val)">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in clientOptions"
|
|
|
|
|
v-for="item in $store.getters.clientOptions"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.client_name"
|
|
|
|
|
:value="item.client_id"
|
|
|
|
|
@ -41,7 +41,7 @@
|
|
|
|
|
<div class="header-sub">
|
|
|
|
|
<el-select v-model="daily_client_id" placeholder="请选择柜体">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in clientOptions"
|
|
|
|
|
v-for="item in $store.getters.clientOptions"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.client_name"
|
|
|
|
|
:value="item.client_id"
|
|
|
|
|
@ -72,9 +72,24 @@
|
|
|
|
|
<el-table-column align="center" property="client_name" label="柜体名称" />
|
|
|
|
|
<el-table-column align="center" property="place" label="所处位置" />
|
|
|
|
|
<el-table-column align="center" property="day_date" label="日期" />
|
|
|
|
|
<el-table-column align="center" property="avg_wd" label="温度（取平均值）" :formatter="(row, column) => row.avg_wd + ' °C'" />
|
|
|
|
|
<el-table-column align="center" property="avg_sd" label="湿度（取平均值）" :formatter="(row, column) => row.avg_sd + ' RH%'" />
|
|
|
|
|
<el-table-column align="center" property="avg_voc" label="VOC含量（取平均值）" :formatter="(row, column) => row.avg_voc + ' ppm'" />
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
property="avg_wd"
|
|
|
|
|
label="温度（取平均值）"
|
|
|
|
|
:formatter="(row, column) => row.avg_wd + ' °C'"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
property="avg_sd"
|
|
|
|
|
label="湿度（取平均值）"
|
|
|
|
|
:formatter="(row, column) => row.avg_sd + ' RH%'"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
property="avg_voc"
|
|
|
|
|
label="VOC含量（取平均值）"
|
|
|
|
|
:formatter="(row, column) => row.avg_voc + ' ppm'"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column align="center" property="client_id" label="操作">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button @click="handleOpt(scope.row)">详情</el-button>
|
|
|
|
|
@ -116,9 +131,24 @@
|
|
|
|
|
>
|
|
|
|
|
<el-table-column align="center" type="index" width="50" label="序号" />
|
|
|
|
|
<el-table-column align="center" property="day_date" label="时间" />
|
|
|
|
|
<el-table-column align="center" property="wd" label="温度（取平均值）" :formatter="(row, column) => row.wd + ' °C'" />
|
|
|
|
|
<el-table-column align="center" property="sd" label="湿度（取平均值）" :formatter="(row, column) => row.sd + ' RH%'" />
|
|
|
|
|
<el-table-column align="center" property="voc" label="VOC含量（取平均值）" :formatter="(row, column) => row.voc + ' ppm'" />
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
property="wd"
|
|
|
|
|
label="温度（取平均值）"
|
|
|
|
|
:formatter="(row, column) => row.wd + ' °C'"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
property="sd"
|
|
|
|
|
label="湿度（取平均值）"
|
|
|
|
|
:formatter="(row, column) => row.sd + ' RH%'"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
property="voc"
|
|
|
|
|
label="VOC含量（取平均值）"
|
|
|
|
|
:formatter="(row, column) => row.voc + ' ppm'"
|
|
|
|
|
/>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="my-pagination" style="text-align: center">
|
|
|
|
|
<el-pagination
|
|
|
|
|
@ -138,9 +168,9 @@
|
|
|
|
|
<script>
|
|
|
|
|
import { get_monitoring_info } from '@/api/reagent/overView'
|
|
|
|
|
import stringify from '@/utils/stringify'
|
|
|
|
|
import { client_list } from '@/api/common'
|
|
|
|
|
import { day_monitor, day_monitor_info } from '@/api/reagent/envrecord'
|
|
|
|
|
import { parseTime } from '@/utils'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'EnvRecord',
|
|
|
|
|
data() {
|
|
|
|
|
@ -153,7 +183,6 @@ export default {
|
|
|
|
|
client_date: 1,
|
|
|
|
|
options: ['近24小时', '近七天', '近一个月'],
|
|
|
|
|
myChart2: undefined,
|
|
|
|
|
clientOptions: [],
|
|
|
|
|
linechartData: [],
|
|
|
|
|
headerStyle: { 'background': '#E6E6E6' },
|
|
|
|
|
// 每日温度记录
|
|
|
|
|
@ -177,16 +206,11 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
client_list().then(
|
|
|
|
|
res => {
|
|
|
|
|
this.clientOptions = res.data.data_list
|
|
|
|
|
this.client_id = this.clientOptions[0].client_id
|
|
|
|
|
this.client_id = this.$store.getters.clientOptions[0].client_id
|
|
|
|
|
this.daily_client_id = this.client_id
|
|
|
|
|
this.getMonitoringData()
|
|
|
|
|
this.getDailyData()
|
|
|
|
|
this.initCharts()
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
window.removeEventListener('resize', () => {
|
|
|
|
|
@ -210,7 +234,9 @@ export default {
|
|
|
|
|
day_monitor(stringify(data)).then(res => {
|
|
|
|
|
this.tableData = res.data.data_list
|
|
|
|
|
this.total = res.data.total_count
|
|
|
|
|
}).finally(() => { this.loading = false })
|
|
|
|
|
}).finally(() => {
|
|
|
|
|
this.loading = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getMonitoringData() {
|
|
|
|
|
const data = {
|
|
|
|
|
@ -223,7 +249,9 @@ export default {
|
|
|
|
|
res => {
|
|
|
|
|
this.linechartData = res.data
|
|
|
|
|
}
|
|
|
|
|
).finally(() => { this.loadingLine = false })
|
|
|
|
|
).finally(() => {
|
|
|
|
|
this.loadingLine = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
initCharts() {
|
|
|
|
|
this.lineCharts()
|
|
|
|
|
@ -270,7 +298,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: this.clientOptions.find(item => item.client_id === this.client_id).client_name,
|
|
|
|
|
name: this.$store.getters.clientOptions.find(item => item.client_id === this.client_id).client_name,
|
|
|
|
|
type: 'line',
|
|
|
|
|
smooth: true,
|
|
|
|
|
data: this.linechartData.map(item => item.data_value),
|
|
|
|
|
@ -319,7 +347,9 @@ export default {
|
|
|
|
|
this.recordData = res.data.data_list
|
|
|
|
|
this.record_total = res.data.total_count
|
|
|
|
|
}
|
|
|
|
|
).finally(() => { this.recordLoading = false })
|
|
|
|
|
).finally(() => {
|
|
|
|
|
this.recordLoading = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
handleOpt(row) {
|
|
|
|
|
this.record_client_id = row.client_id
|
|
|
|
|
@ -356,35 +386,43 @@ export default {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line-charts {
|
|
|
|
|
margin: 1rem;
|
|
|
|
|
background: white;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.header-sub {
|
|
|
|
|
.el-select {
|
|
|
|
|
margin-right: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-date-editor {
|
|
|
|
|
margin-right: 1rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-title {
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #303133;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#line {
|
|
|
|
|
height: 30vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-table {
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.env-header {
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
duan
2 years ago
