<template>
|
<div class="contenet">
|
<div class="searchBox">
|
<el-form
|
:inline="true"
|
:model="formInline"
|
class="demo-form-inline"
|
>
|
<div>
|
<el-form-item label="选择设备:">
|
<el-select
|
v-model="formInline.mac"
|
size="medium"
|
placeholder="选择设备"
|
clearable
|
>
|
<el-option
|
v-for="item in handList"
|
:key="item.id"
|
:label="item.mac"
|
:value="item.mac"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="监测点位:">
|
<el-input
|
v-model="formInline.name"
|
size="medium"
|
placeholder="监测点位"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<radioGroupComponent
|
:radio-data="radioGrouplist"
|
:radio-select="radio"
|
@changeRadio="changeRadio"
|
/>
|
</el-form-item>
|
<el-form-item label="其他时间:">
|
<el-date-picker
|
v-model="value"
|
size="medium"
|
type="datetimerange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:default-time="['00:00:00']"
|
@change="sendPicker"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
size="medium"
|
@click="onSubmit"
|
>
|
查询
|
</el-button>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
<div>
|
<el-table
|
:data="tableData"
|
border
|
size="mini"
|
style="width: 100%"
|
:header-cell-style="{
|
color: '#101111', fontSize: '16px'
|
}"
|
:cell-style="{ color: '#101111', fontSize: '16px'}"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="60px"
|
align="center"
|
/>
|
<el-table-column
|
prop="mac"
|
align="center"
|
label="设备号"
|
width="180"
|
/>
|
<el-table-column
|
prop="name"
|
align="center"
|
width="200px"
|
label="监测点位"
|
/>
|
<el-table-column
|
prop="address"
|
align="center"
|
label="详细地址"
|
/>
|
<el-table-column
|
prop="startTime"
|
align="center"
|
width="200px"
|
label="开始时间"
|
/>
|
<el-table-column
|
prop="endTime"
|
align="center"
|
label="结束时间"
|
width="200px"
|
/>
|
<el-table-column
|
prop="createName"
|
align="center"
|
label="创建人"
|
width="200px"
|
/>
|
<el-table-column
|
width="100px"
|
align="center"
|
label="操作"
|
>
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
size="medium"
|
@click="showDetail(scope.row)"
|
>
|
详情
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagina">
|
<el-pagination
|
background
|
:current-page="pagination.currentPage"
|
:page-sizes="pagination.pageSizes"
|
:page-size="pagination.pageSize"
|
:total="pagination.totalCount"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
<div>
|
<diaLog
|
v-if="isVisible"
|
:dialog-visible.sync="isVisible"
|
:title="`设备详情`"
|
:width="`90%`"
|
:is-show-sumbit-but="false"
|
>
|
<template #body>
|
<div>
|
<div class="devaiceDetailTitle">
|
<el-descriptions :column="4">
|
<el-descriptions-item label="开始时间">
|
{{ selectRow.startTime }}
|
</el-descriptions-item>
|
<el-descriptions-item label="结束时间">
|
{{ selectRow.endTime }}
|
</el-descriptions-item>
|
<el-descriptions-item label="监测点位">
|
{{ selectRow.name }}
|
</el-descriptions-item>
|
<el-descriptions-item label="设备经纬度">
|
{{ selectRow.longitude }},{{ selectRow.latitude }}
|
</el-descriptions-item>
|
<el-descriptions-item label="详细地址">
|
{{ selectRow.address }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<div class="typeBox">
|
<div class="tapChart">
|
<p
|
:class="{pClick: tapName === 'hour'}"
|
@click="changeTap('hour')"
|
>
|
小时
|
</p>
|
<p
|
:class="{pClick: tapName === 'minute'}"
|
@click="changeTap('minute')"
|
>
|
1分钟
|
</p>
|
<p
|
:class="{pClick: tapName === 'minutely'}"
|
@click="changeTap('minutely')"
|
>
|
5分钟
|
</p>
|
</div>
|
<div>
|
<el-button
|
size="mini"
|
type="primary"
|
@click="handleExport"
|
>
|
导出
|
</el-button>
|
</div>
|
</div>
|
<div>
|
<el-table
|
:data="rowDetailDate"
|
border
|
size="mini"
|
max-height="480"
|
style="width: 100%"
|
:header-cell-style="{
|
color: '#101111', fontSize: '16px'
|
}"
|
:cell-style="{ color: '#101111', fontSize: '16px',padding: '10px 0'}"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="60px"
|
align="center"
|
/>
|
<el-table-column
|
prop="time"
|
align="center"
|
label="时间"
|
width="180"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.time | timeFormat }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-for="(item,index) in tableColumnData"
|
:key="index"
|
:prop="item.prop"
|
align="center"
|
:label="item.label + item.unit"
|
/>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
</diaLog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import dayjs from 'dayjs'
|
import radioGroupComponent from '@/components/formTypeComponets/radioGroupCompones/index.vue'
|
import diaLog from '@/components/formTypeComponets/dialog/index.vue'
|
export default {
|
components: {
|
radioGroupComponent,
|
diaLog
|
},
|
filters: {
|
timeFormat (time) {
|
return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
|
}
|
},
|
data () {
|
return {
|
formInline: {
|
mac: '',
|
name: '',
|
startTime: '',
|
endTime: ''
|
},
|
tableColumnData: [
|
{ prop: 'a34004', label: 'PM2.5', unit: 'ug/m³' },
|
{ prop: 'a34002', label: 'PM10', unit: 'ug/m³' },
|
{ prop: 'a21004', label: '氮氧化合物', unit: 'ug/m³' },
|
{ prop: 'a21026', label: '二氧化硫', unit: 'ug/m³' },
|
{ prop: 'a21005', label: '一氧化碳', unit: 'mg/m³' },
|
{ prop: 'a01006', label: '气压', unit: 'hpa' },
|
{ prop: 'a01001', label: '温度', unit: '℃' },
|
{ prop: 'a01002', label: '湿度', unit: '%' },
|
{ prop: 'a99054', label: 'TVOC', unit: 'ug/m³' },
|
{ prop: 'a31001', label: '甲醛', unit: 'mg/m³' },
|
{ prop: 'a21028', label: '硫化氢', unit: 'ppm' },
|
{ prop: 'a21001', label: '氨气', unit: 'ug/m³' },
|
],
|
handList: [],
|
radio: '今天',
|
tapName: 'hour',
|
value: [],
|
radioGrouplist: [
|
{ label: '今天', value: 'today', type: 'day', num: '0' },
|
{ label: '昨天', value: 'yesterday', type: 'day', num: '1', },
|
{ label: '近3天', value: 'week', type: 'day', num: '3', },
|
{ label: '近7天', value: 'month', type: 'day', num: '7', },
|
{ label: '近1个月', value: 'threeMonth', type: 'month', num: '1', },
|
],
|
tableData: [],
|
rowDetailDate: [],
|
pagination: {
|
currentPage: 1,
|
// 总条数，根据接口获取数据长度(注意：这里不能为空)
|
totalCount: 0,
|
// 个数选择器（可修改）
|
pageSizes: [10, 50, 100, 200],
|
// 默认每页显示的条数（可修改）
|
pageSize: 10
|
},
|
isVisible: false,
|
selectRow: {}
|
}
|
},
|
created () {
|
this.$request({
|
url: '/hand/check',
|
method: 'get'
|
}).then(res => {
|
if (res.code === 0) {
|
this.handList = res.data
|
this.onSubmit()
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
methods: {
|
handleExport () {
|
this.$request({
|
url: 'hand/unitExel',
|
method: 'get',
|
responseType: 'blob',
|
params: {
|
mac: this.selectRow.mac,
|
startTime: this.selectRow.startTime,
|
endTime: this.selectRow.endTime,
|
type: this.tapName
|
}
|
}).then(res => {
|
this.getOutExcel('列表数据导出.xlsx', res)
|
})
|
},
|
getOutExcel (fileName, res) {
|
const blob = new Blob([res], { type: 'application/x-xls' })
|
if (window.navigator.msSaveOrOpenBlob) {
|
// 兼容 IE & EDGE
|
navigator.msSaveBlob(blob, fileName)
|
} else {
|
var link = document.createElement('a')
|
// 兼容不同浏览器的URL对象
|
const url = window.URL || window.webkitURL || window.moxURL
|
// 创建下载链接
|
link.href = url.createObjectURL(blob)
|
// 命名下载名称
|
link.download = fileName
|
// 点击触发下载
|
link.click()
|
// 下载完成进行释放
|
url.revokeObjectURL(link.href)
|
}
|
},
|
changeRadio (e) {
|
console.log('e', e)
|
this.radio = e.label
|
if (e.value === 'yesterday' || e.value === 'today') {
|
// const today = dayjs()
|
// const starTime = today.subtract(1, 'day').startOf('day')
|
// const endTime = today.subtract(1, 'day').endOf('day')
|
this.value = [ ]
|
this.formInline.endTime = ''
|
this.formInline.startTime = e.startTime.format('YYYY-MM-DD')
|
} else {
|
this.value = [e.startTime, e.endTime]
|
this.formInline.startTime = e.startTime.format('YYYY-MM-DD HH:mm:ss')
|
this.formInline.endTime = e.endTime.format('YYYY-MM-DD HH:mm:ss')
|
}
|
},
|
sendPicker (e) {
|
this.radio = ''
|
console.log(' this.radio', this.radio)
|
this.formInline.startTime = dayjs(e[0]).format('YYYY-MM-DD HH:mm:ss')
|
this.formInline.endTime = dayjs(e[1]).format('YYYY-MM-DD HH:mm:ss')
|
},
|
showDetail (row) {
|
this.selectRow = row
|
this.tapName = 'hour'
|
console.log('row', row)
|
this.changeTimeType()
|
},
|
changeTimeType () {
|
this.$request({
|
url: '/hand/details',
|
method: 'get',
|
params: {
|
mac: this.selectRow.mac,
|
startTime: this.selectRow.startTime,
|
endTime: this.selectRow.endTime,
|
type: this.tapName
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
console.log('res', res)
|
this.isVisible = true
|
this.rowDetailDate = res.data
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
onSubmit () {
|
this.$request({
|
url: '/hand/page',
|
method: 'post',
|
data: {
|
...this.formInline,
|
page: this.pagination
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
this.tableData = res.data.list
|
this.pagination.totalCount = res.data.page.totalNum
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
changeTap (val) {
|
this.tapName = val
|
this.changeTimeType()
|
},
|
// 分页
|
handleSizeChange (val) {
|
this.pagination.pageSize = val
|
this.pagination.currentPage = 1
|
this.onSubmit()
|
},
|
handleCurrentChange (val) {
|
this.pagination.currentPage = val
|
this.onSubmit()
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.contenet{
|
padding: 10px;
|
}
|
.searchBox{
|
/deep/.el-form-item{
|
margin-bottom: 10px;
|
}
|
}
|
.pagina{
|
margin-top: 10px;
|
}
|
.devaiceDetailTitle{
|
p{
|
display: inline-block;
|
margin-right: 15px;
|
font-size: 18px;
|
}
|
}
|
.tapChart{
|
p{
|
display: inline-block;
|
margin-right: 10px;
|
cursor: pointer;
|
padding-bottom: 5px;
|
}
|
.pClick{
|
color: #409EFF;
|
border-bottom: #409EFF 3px solid;
|
}
|
}
|
.typeBox{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
</style>
|
