<!--历史数据-->
<template>
<app-container>
<div class="choose-device">
<el-button type="primary" size="small" @click="chooseDevice">选择设备</el-button>
<span class="detail"><span class="title">设备编号：</span>{{currentDevice.deviceNo}}</span>
<span class="detail"><span class="title">安装点位：</span>{{currentDevice.deviceName}}</span>
<span class="detail"><span class="title">地址：</span>{{currentDevice.position}}</span>
</div>
<search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default"
@search="fetchData" @clear="clearInput">
<!--一般查询条件-->
<search-item>
<el-radio-group v-model="listQuery.searchType" size="small">
<el-radio-button v-for="item of searchTypes" :label="item.value">{{item.name}}</el-radio-button>
</el-radio-group>
</search-item>
<search-item>
<el-date-picker
v-model="timeRange"
size="small"
type="datetimerange"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"/>
</search-item>
<search-item>
<el-select v-model="listQuery.params" placeholder="参数选择" size="small" multiple collapse-tags clearable>
<el-option
v-for="item in paramsList"
:key="item.value"
:label="item.name"
:value="item.value"/>
</el-select>
</search-item>
</search-area>
<div class="data-container">
<div class="title-header">
<i class="el-icon-menu"/>
历史数据
</div>
<div class="edit_btns">
<el-button type="primary" size="small" @click="exportData">导出数据</el-button>
</div>
</div>
<!--图表-->
<div style="padding:12px;">
<ve-line :data="chartData" :settings="chartSettings"/>
</div>
<!--列表-->
<normal-table :data="listPage" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns"
:list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption"
size="small" @change="changePage">
<template slot="btns"/>
</normal-table>
<!--选择设备弹窗-->
<choose-device ref="chooseDevice" @click="changeDevice"/>
</app-container>
</template>
<script>
import {getToday} from '@/utils/dateutils'
import ChooseDevice from "./chooseDevice";
import { getDeviceList } from '@/api/environment/device'
import { exportFile } from '@/utils/exportutils'
import { getHistoryData, batchExportData } from '@/api/environment/data'
export default {
name: 'PointData',
components: {ChooseDevice, getToday},
data() {
return {
deviceList: [], //所有设备列表
currentDevice: {},// 当前设备
searchTypes:[
{name:'分钟平均值', value:'minute'},
{name:'小时平均值', value:'hour'},
{name:'日平均值', value:'day'}
], // 查询类别
paramsList:[
{name: 'PM2.5', unit:'ug/m³', value:'pm25'},
{name: 'PM10', unit:'ug/m³', value:'pm10'},
{name: 'TSP', unit:'ug/m³', value:'tsp'},
// {name: '噪声', unit:'db', value:'noise'},
{name: '风速', unit:'m/s', value:'windSpeed'},
{name: '风力', unit:'级', value:'windPower'},
{name: '风向', unit:'°', value:'windDirection'},
{name: '温度', unit:'℃', value:'temperature'},
{name: '湿度', unit:'%RH', value:'humidity'},
{name: '气压', unit:'kpa', value:'pressure'},
], // 数据类型列表
chartData: {
columns: ['date', 'standard', 'value'],
rows: []
},
chartSettings: {
labelMap: {
'': '指标值',
'standard': '标准值'
},
metrics: ['standard', 'value'],
dimension: ['date']
},
listQuery: {
deviceNo:'', // 设备编号
searchType:'minute', // 查询类型,
params:[], //参数
startDate: '', // 开始时间
endDate: '', // 结束时间
offset: 1, // 分页参数
limit: 10 // 分页参数
}, // 筛选条件
columns: [], // 显示列
timeRange: [], // 时间范围
list: [], // 列表数据
total: 0, // 数据总数
listLoading: true, // 列表加载动画
tableOption: {
head: {
show: true, // 是否需要标题栏，
text: '历史数据列表' // 标题名称
},
options: {
needIndex: false // 是否需要序号列
},
toolsOption: {
selectColumns: false, // 是否需要筛选列
refresh: false // 是否需要刷新按钮
}
} // 表格属性
}
},
computed:{
listPage(){
const pageBegin = (this.listQuery.offset-1)*this.listQuery.limit
const pageEnd = pageBegin+this.listQuery.limit
return this.list.slice(pageBegin,pageEnd)
}
},
created() {
this.timeRange = [getToday('yyyy-MM-dd 00:00:00'), getToday('yyyy-MM-dd hh:mm:ss')]
this.fetchDeviceList()
},
methods: {
// 查询所有设备列表,设置默认设备
fetchDeviceList(){
getDeviceList().then(res=>{
this.deviceList = res.data
// const deviceList= [
// {id:"1", deviceNo:"2021030803100001", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// {id:"2", deviceNo:"2021030803100002", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// {id:"3", deviceNo:"2021030803100003", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// {id:"4", deviceNo:"2021030803100004", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// {id:"5", deviceNo:"2021030803100005", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// {id:"6", deviceNo:"2021030803100006", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// ]
this.currentDevice = this.deviceList[0]
this.listQuery.deviceNo = this.currentDevice.deviceNo
this.fetchData()
})
},
// 查询设备历史数据
fetchData() {
if(this.currentDevice){
// 查询条件时间赋值
if (this.timeRange && this.timeRange.length > 0) {
this.listQuery.startDate = this.timeRange[0]
this.listQuery.endDate = this.timeRange[1]
} else {
this.listQuery.startDate = ''
this.listQuery.endDate = ''
}
// 根据选择的参数列表过滤参数
const labelMap = {}
const metrics = []
const columns = [{text: '时间', value: 'ts', align: 'center', width:140}]
for(const item of this.paramsList){
if(this.listQuery.params.length==0){
labelMap[item.value] = item.name+'('+item.unit+')'
metrics.push(item.value)
columns.push({text:item.name+'('+item.unit+')', value:item.value})
}else{
if(this.listQuery.params.indexOf(item.value)>-1){
labelMap[item.value] = item.name+'('+item.unit+')'
metrics.push(item.value)
columns.push({text:item.name+'('+item.unit+')', value:item.value})
}
}
}
this.columns = columns
this.chartSettings = {
labelMap: labelMap,
metrics: metrics,
dimension: ['ts']
}
getHistoryData(this.listQuery).then(res=>{
this.chartData.rows = res.data
this.list = res.data
this.total = this.list.length
this.listLoading = false
})
// this.chartData.rows = this.list = [
// {ts: '9月20日', pm25: 153, pm10: 43, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 },
// {ts: '9月21日', pm25: 150, pm10: 30, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 },
// {ts: '9月22日', pm25: 143, pm10: 23, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 },
// {ts: '9月23日', pm25: 173, pm10: 23, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 },
// {ts: '9月24日', pm25: 272, pm10: 52, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 },
// {ts: '9月25日', pm25: 253, pm10: 53, tsp: 0.00, noise: 3.40, windPower: 0.40, windDirection: 7.40, temperature: 22.50, humidity: 80.50, windSpeed: 2.50, pressure: 122.50 }
// ]
}
},
// 打开选择设备弹窗
chooseDevice(){
this.$refs.chooseDevice.initDialog(this.currentDevice)
},
// 更换设备
changeDevice(currentDevice){
this.currentDevice = currentDevice
this.listQuery.deviceNo = this.currentDevice.deviceNo
this.fetchData()
},
exportData(){
// 全屏加载动画
const loading = this.$loading({
lock: true,
text: '数据处理中,请稍后...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
batchExportData(this.listQuery).then(res => {
loading.close() // 关闭加载动画
const blob = new Blob([res.data])
const fileName = `${this.listQuery.deviceNo}设备数据.xlsx`
exportFile(blob, fileName)
}).catch((res) => {
loading.close()
})
},
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
changePage(val) {
if (val && val.size) {
this.listQuery.limit = val.size
}
if (val && val.page) {
this.listQuery.offset = val.page
}
this.fetchData()
},
// 重置后的操作， 若不需要显示重置按钮则不需要写
clearInput() {
this.$message.success('clearInput')
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.choose-device {
padding: 12px 12px 0px 12px;
.detail {
padding: 0px 10px;
font-size: 14px;
.title {
color: #8c939d;
}
}
}
.data-container{
border-top:12px solid #ebebeb ;
padding: 12px;
display: flex;
align-items: center;
justify-content: space-between;
.title-header{
font-size:15px;
color: #606266;
}
}
</style>
