<template>
<app-container>
<search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
<!--一般查询条件-->
<search-item>
<el-input v-model.trim="listQuery.keywords" size="small" placeholder="监测点名称/编号" clearable/>
</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-area>
<el-row style="height: 12px;background-color: #ebebeb"/>
<div style="padding: 10px 10px 0px 10px">
<el-tabs v-model="activeName" type="card" @tab-click="lineSearch">
<el-tab-pane
v-for="(item, index) in tabs"
:key="item.name"
:label="item.title"
:name="item.name"/>
<ve-line :data="chartData" :settings="chartSettings"/>
</el-tabs>
</div>
<normal-table :data="list" :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>
</app-container>
</template>
<script>
import { getToday } from '@/utils/dateutils'
export default {
name: 'EnvironmentData',
components: { getToday },
data() {
return {
chartData: {
columns: ['date', 'standard', 'value'],
rows: []
},
chartSettings: {
labelMap: {
'value': '指标值',
'standard': '标准值'
},
metrics: ['standard', 'value'],
dimension: ['date']
},
activeName: 'SO2',
tabs: [
{ title: 'SO2', name: 'SO2' },
{ title: 'NO2', name: 'NO2' },
{ title: 'CO', name: 'CO' },
{ title: 'O3', name: 'O3' },
{ title: 'PM10', name: 'PM10' },
{ title: 'PM2.5', name: 'PM25' },
{ title: '温度', name: 'temperature' },
{ title: '湿度', name: 'humidity' },
{ title: '风速', name: 'windSpeed' },
{ title: '风向', name: 'windDirection' }
],
listQuery: {
keywords: '',
startTime: '', // 开始时间
endTime: '', // 结束时间
offset: 1,
limit: 20
}, // 筛选条件
columns: [
{
text: '名称',
value: 'name',
align: 'center'
},
{
text: 'PM2.5',
value: 'PM25',
align: 'center',
width: 100
},
{
text: 'PM10',
value: 'PM10',
align: 'center',
width: 100
},
{
text: 'SO2',
value: 'SO2',
align: 'center',
width: 100
},
{
text: 'NO2',
value: 'NO2',
align: 'center',
width: 100
},
{
text: 'CO',
value: 'CO',
align: 'center',
width: 100
},
{
text: 'O3',
value: 'O3',
align: 'center',
width: 100
},
{
text: '温度',
value: 'temperature',
align: 'center',
width: 100
},
{
text: '湿度',
value: 'humidity',
align: 'center',
width: 100
},
{
text: '风速',
value: 'windSpeed',
align: 'center',
width: 100
},
{
text: '风向',
value: 'windDirection',
align: 'center',
width: 100
},
{
text: '时间',
value: 'time',
align: 'center'
}
], // 显示列
timeRange: [], // 时间范围
list: [], // 列表数据
total: 0, // 数据总数
listLoading: true, // 列表加载动画
tableOption: {
head: {
show: true, // 是否需要标题栏，
text: '数据列表' // 标题名称
},
options: {
needIndex: false // 是否需要序号列
},
toolsOption: {
selectColumns: false, // 是否需要筛选列
refresh: false // 是否需要刷新按钮
}
} // 表格属性
}
},
watch: {
timeRange(val) {
if (val && val.length > 0) {
this.listQuery.startTime = val[0]
this.listQuery.endTime = val[1]
this.fetchData()
} else {
this.listQuery.startTime = ''
this.listQuery.endTime = ''
}
}
},
activated() {
if (this.$route.query) {
this.listQuery.keywords = this.$route.query.name
}
},
created() {
if (this.$route.query) {
this.listQuery.keywords = this.$route.query.name
}
this.listQuery.startTime = getToday('yyyy-MM-dd 00:00:00')
this.listQuery.endTime = getToday('yyyy-MM-dd hh:mm:ss')
this.timeRange = [this.listQuery.startTime, this.listQuery.endTime]
this.fetchData()
},
methods: {
fetchData() {
this.lineSearch()
this.listLoading = true
const that = this
setTimeout(function() {
that.list = [
{ name: '宝水新城监控点', PM25: '23.40', PM10: '25.80', SO2: '0.00', NO2: '3.40', CO: '0.40', O3: '7.40', temperature: '22.50', humidity: '80.50', windSpeed: '2.50', windDirection: '122.50', time: '05-07 11:15' },
{ name: '宝水新城监控点', PM25: '23.40', PM10: '25.80', SO2: '0.00', NO2: '3.40', CO: '0.40', O3: '7.40', temperature: '22.50', humidity: '80.50', windSpeed: '2.50', windDirection: '122.50', time: '05-07 11:15' },
{ name: '宝水新城监控点', PM25: '23.40', PM10: '25.80', SO2: '0.00', NO2: '3.40', CO: '0.40', O3: '7.40', temperature: '22.50', humidity: '80.50', windSpeed: '2.50', windDirection: '122.50', time: '05-07 11:15' },
{ name: '宝水新城监控点', PM25: '23.40', PM10: '25.80', SO2: '0.00', NO2: '3.40', CO: '0.40', O3: '7.40', temperature: '22.50', humidity: '80.50', windSpeed: '2.50', windDirection: '122.50', time: '05-07 11:15' }
]
that.total = 200
that.listLoading = false
}, 500)
},
lineSearch() {
this.chartData.rows = [
{ date: '9月20日', value: 153, standard: 43 },
{ date: '9月21日', value: 150, standard: 30 },
{ date: '9月22日', value: 143, standard: 23 },
{ date: '9月23日', value: 173, standard: 23 },
{ date: '9月24日', value: 272, standard: 52 },
{ date: '9月25日', value: 253, standard: 53 }
]
},
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
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 scoped>
</style>
