147 lines
6.4 KiB
Vue
147 lines
6.4 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header class="panel_title">
|
|
<div class="left-panel">
|
|
环境空气质量监测实时数据
|
|
</div>
|
|
<div class="right-panel">
|
|
<div class="backMap" @click="backtoMap">
|
|
切换地图
|
|
<el-icon>
|
|
<Switch />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nppadding">
|
|
<el-container>
|
|
<el-header class="searchWrap">
|
|
<div class="left-panel">
|
|
</div>
|
|
<div class="right-panel">
|
|
<el-select v-model="time_bucket" placeholder="周期" style="margin-left:4px"
|
|
>
|
|
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
|
|
:value="item.value" />
|
|
</el-select>
|
|
<el-select v-model="query.metric" placeholder="监测物" style="margin-left:4px"
|
|
>
|
|
<el-option v-for="item in metricOptions" :key="item.value" :label="item.label"
|
|
:value="item.value" />
|
|
</el-select>
|
|
<el-button @click="handleQuery">查询</el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-main>
|
|
<scTable :data="tableData" hideDo v-show="time_bucket=='minute'">
|
|
<el-table-column type="index" />
|
|
<el-table-column prop="equipment_name" label="站点名称" />
|
|
<el-table-column prop="metric_0" label="0" />
|
|
<el-table-column prop="metric_5" label="5" />
|
|
<el-table-column prop="metric_10" label="10" />
|
|
<el-table-column prop="metric_15" label="15" />
|
|
<el-table-column prop="metric_20" label="20" />
|
|
<el-table-column prop="metric_25" label="25" />
|
|
<el-table-column prop="metric_30" label="30" />
|
|
<el-table-column prop="metric_35" label="35" />
|
|
<el-table-column prop="metric_40" label="40" />
|
|
<el-table-column prop="metric_45" label="45" />
|
|
<el-table-column prop="metric_50" label="50" />
|
|
<el-table-column prop="metric_55" label="55" />
|
|
<el-table-column prop="metric_hour" label="小时均值" />
|
|
</scTable>
|
|
<scTable :data="tableData" hideDo v-show="time_bucket=='hour'">
|
|
<el-table-column type="index" />
|
|
<el-table-column prop="equipment_name" label="站点名称" />
|
|
<el-table-column prop="val_1" label="1" />
|
|
<el-table-column prop="val_2" label="2" />
|
|
<el-table-column prop="val_3" label="3" />
|
|
<el-table-column prop="val_4" label="4" />
|
|
<el-table-column prop="val_5" label="5" />
|
|
<el-table-column prop="val_6" label="6" />
|
|
<el-table-column prop="val_7" label="7" />
|
|
<el-table-column prop="val_8" label="8" />
|
|
<el-table-column prop="val_9" label="9" />
|
|
<el-table-column prop="val_10" label="10" />
|
|
<el-table-column prop="val_11" label="11" />
|
|
<el-table-column prop="val_12" label="12" />
|
|
<el-table-column prop="val_13" label="13" />
|
|
<el-table-column prop="val_14" label="14" />
|
|
<el-table-column prop="val_15" label="15" />
|
|
<el-table-column prop="val_16" label="16" />
|
|
<el-table-column prop="val_17" label="17" />
|
|
<el-table-column prop="val_18" label="18" />
|
|
<el-table-column prop="val_19" label="19" />
|
|
<el-table-column prop="val_20" label="20" />
|
|
<el-table-column prop="val_21" label="21" />
|
|
<el-table-column prop="val_22" label="22" />
|
|
<el-table-column prop="val_23" label="23" />
|
|
<el-table-column prop="val_24" label="24" />
|
|
<el-table-column prop="val_day" label="日均值" />
|
|
</scTable>
|
|
</el-main>
|
|
</el-container>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tableData:[],
|
|
metricOptions: [
|
|
{ label: 'PM2.5', value: 'pm25' },
|
|
{ label: 'PM10', value: 'pm10' },
|
|
],
|
|
timeOptions: [
|
|
{ label: '分钟上报值', value: 'minute' },
|
|
{ label: '小时均值', value: 'hour' },
|
|
],
|
|
time_bucket:'minute',
|
|
query: {
|
|
year: '',
|
|
month: '',
|
|
day: '',
|
|
hour: '',
|
|
metric: 'pm25',
|
|
ecate_code: "aqms",
|
|
},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getTime();
|
|
},
|
|
methods: {
|
|
getTime() {
|
|
var now = new Date();
|
|
this.query.year = now.getFullYear();
|
|
this.query.month = now.getMonth() + 1;
|
|
this.query.day = now.getDate();
|
|
this.query.hour = now.getHours();
|
|
this.handleQuery();
|
|
},
|
|
handleQuery() {
|
|
let that = this;
|
|
console.log(that.query);
|
|
that.getTableData();
|
|
},
|
|
getTableData() {
|
|
let that = this;
|
|
let exec_search = '';
|
|
if (that.time_bucket == 'minute') {
|
|
exec_search='enp_edata_metric_nodrain'
|
|
} else if (that.time_bucket == 'hour') {
|
|
exec_search = 'enp_edata_hour_nodrain';
|
|
}
|
|
that.$API.bi.dataset.exec.req(exec_search, {
|
|
query: that.query,
|
|
raise_exception: true
|
|
}).then(res => {
|
|
console.log(res.data2.ds0);
|
|
this.tableData = res.data2.ds0;
|
|
})
|
|
},
|
|
},
|
|
|
|
}
|
|
</script> |