环境质量
This commit is contained in:
parent
7b5c19ee83
commit
4ad85cab13
|
|
@ -68,7 +68,7 @@
|
|||
<el-container>
|
||||
<el-main class="nopadding">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-header class="panel_title">
|
||||
<div class="left-panel">
|
||||
CEMS监测详情
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,19 +30,43 @@
|
|||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<scTable :apiObj="apiObj" size="large" :params="params" :query="query">
|
||||
<scTable :apiObj="apiObj" size="large" :params="params" :query="query" @row-click="rowClick">
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column prop="number" label="设备编号"></el-table-column>
|
||||
<el-table-column prop="level" label="设备名称"></el-table-column>
|
||||
<el-table-column prop="type" label="设备类型"></el-table-column>
|
||||
<el-table-column prop="name" label="设备名称"></el-table-column>
|
||||
<el-table-column prop="cate_name" label="设备类型"></el-table-column>
|
||||
<el-table-column prop="mgroup_name" label="所属工序"></el-table-column>
|
||||
<el-table-column prop="running_state" label="运行状态"></el-table-column>
|
||||
<el-table-column prop="PM25" label="PM2.5实测值"></el-table-column>
|
||||
<el-table-column prop="PM10" label="PM10实测值"></el-table-column>
|
||||
<el-table-column prop="level" label="湿度"></el-table-column>
|
||||
<el-table-column prop="mgroup" label="温度"></el-table-column>
|
||||
<el-table-column prop="eqpment" label="大气压"></el-table-column>
|
||||
<el-table-column prop="mgroup" label="风向"></el-table-column>
|
||||
<el-table-column label="PM2.5实测值">
|
||||
<template #default="scope">
|
||||
{{ scope.row.envdata.pm25 ? scope.row.envdata.pm25 : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="PM10实测值">
|
||||
<template #default="scope">
|
||||
{{ scope.row.envdata.pm10 ? scope.row.envdata.pm10 : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="湿度">
|
||||
<template #default="scope">
|
||||
{{ scope.row.envdata.humidity ? scope.row.envdata.humidity : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="温度">
|
||||
<template #default="scope">
|
||||
{{ scope.row.envdata.temperature ? scope.row.envdata.temperature : '-'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="大气压">
|
||||
<template #default="scope">
|
||||
{{ scope.row.envdata.pressure ? scope.row.envdata.pressure : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="风向">
|
||||
<template #default="scope">
|
||||
{{ scope.row.envdata.wind_direction ? scope.row.envdata.wind_direction : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
|
@ -56,10 +80,18 @@
|
|||
空气质量微站实时监测详情
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery"
|
||||
style="width: 100%" />
|
||||
<el-select v-model="query.time_bucket" placeholder="周期" style="margin-left:4px"
|
||||
@change="handleQuery">
|
||||
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<div v-show="currentEquipmentId != ''" id="lineChart" style="width: 100%; height:100%;"></div>
|
||||
<div v-show="currentEquipmentId != ''" id="cChart" style="width: 100%; height:100%;"></div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-main>
|
||||
|
|
@ -67,25 +99,84 @@
|
|||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
params: {},
|
||||
query: {},
|
||||
apiObj: null,
|
||||
params: { type: 20, cate__code: 'aqms', has_envdata: 'yes' },
|
||||
query: {
|
||||
"end_time": "",
|
||||
"start_time": "",
|
||||
"time_bucket": "1 hour",
|
||||
"equipment_id": ''
|
||||
},
|
||||
timeOptions: [
|
||||
{ label: '分钟', value: '1 minute' },
|
||||
{ label: '小时', value: '1 hour' },
|
||||
{ label: '天', value: '1 day' },
|
||||
],
|
||||
timeRange: [],
|
||||
apiObj: this.$API.em.equipment.list,
|
||||
processOptions: [],
|
||||
currentEquipmentId: '',
|
||||
currentEquipmentName: '',
|
||||
basicOption: {
|
||||
title: {
|
||||
text: '设备名称'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
confine: true,
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
|
||||
// itemStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
dataset: {
|
||||
source: []
|
||||
},
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: {},
|
||||
series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }]
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initTimeRange()
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.$refs.table.queryData(this.query);
|
||||
handleQuery() { },
|
||||
initTimeRange() {
|
||||
var now = new Date();
|
||||
var start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
|
||||
this.timeRange = [start, now]
|
||||
},
|
||||
rowClick(row) {
|
||||
this.currentEquipmentId = row.id;
|
||||
this.currentEquipmentName = row.name;
|
||||
this.query.equipment_id = row.id;
|
||||
this.$nextTick(() => { this.handleQuery1() })
|
||||
|
||||
},
|
||||
initChart() {
|
||||
var that = this;
|
||||
var myChart = echarts.getInstanceByDom(document.getElementById('lineChart'));
|
||||
var myChart = echarts.getInstanceByDom(document.getElementById('cChart'));
|
||||
if (myChart == undefined) {
|
||||
myChart = echarts.init(document.getElementById('lineChart'), 'dark');
|
||||
myChart = echarts.init(document.getElementById('cChart'), 'dark');
|
||||
}
|
||||
myChart.showLoading();
|
||||
this.$API.bi.dataset.exec.req('enp_edata2', {
|
||||
|
|
@ -109,6 +200,28 @@ export default {
|
|||
}).then(() => { myChart.hideLoading() })
|
||||
|
||||
},
|
||||
handleQuery1() {
|
||||
let that = this;
|
||||
let timeRange = Object.assign([], that.timeRange);;
|
||||
let time1 = timeRange[0]
|
||||
let time2 = timeRange[1];
|
||||
let formatstr = 'yyyy-MM-dd hh:mm:ss'
|
||||
if (this.query.time_bucket == '1 minute') {
|
||||
time2 = new Date(time2.getTime() + 1000 * 60);
|
||||
formatstr = 'yyyy-MM-dd hh:mm:00'
|
||||
}
|
||||
else if (this.query.time_bucket == '1 hour') {
|
||||
time2 = new Date(time2.getTime() + 1000 * 60 * 60);
|
||||
formatstr = 'yyyy-MM-dd hh:00:00'
|
||||
}
|
||||
else if (this.query.time_bucket == '1 day') {
|
||||
time2 = new Date(time2.getTime() + 1000 * 60 * 60 * 24);
|
||||
formatstr = 'yyyy-MM-dd'
|
||||
}
|
||||
this.query.start_time = this.$TOOL.dateFormat(time1, formatstr)
|
||||
this.query.end_time = this.$TOOL.dateFormat(time2, formatstr)
|
||||
this.initChart()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header style="height: 40%;padding: 0;">
|
||||
<el-container>
|
||||
<el-header class="panel_title">
|
||||
<div class="left-panel">
|
||||
环境质量监测
|
||||
环境空气质量监测实时数据
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="backMap" @click="backtoMap">
|
||||
|
|
@ -15,222 +13,134 @@
|
|||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id"
|
||||
:params="params" hidePagination hideDo @row-click="rowClick">
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column prop="equipment_number" label="设备编号" width="120" />
|
||||
<el-table-column prop="equipment_name" label="设备名称" width="180" />
|
||||
<el-table-column prop="name" label="监测状态" />
|
||||
<el-table-column label="颗粒物实测(mg/m3)" width="180">
|
||||
<template #default="scope">
|
||||
{{ scope.row.equipment_envdata.dust_rtd ? scope.row.equipment_envdata.dust_rtd : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="颗粒物折算(mg/m3)" width="180">
|
||||
<template #default="scope">
|
||||
{{ scope.row.equipment_envdata.dust_zs ? scope.row.equipment_envdata.dust_zs : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="温度(℃)">
|
||||
<template #default="scope">
|
||||
{{ scope.row.equipment_envdata.temperature ? scope.row.equipment_envdata.temperature : '-'
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="压力(KPa)">
|
||||
<template #default="scope">
|
||||
{{ scope.row.equipment_envdata.pressure ? scope.row.equipment_envdata.pressure : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流速(m/s)">
|
||||
<template #default="scope">
|
||||
{{ scope.row.equipment_envdata.speed ? scope.row.equipment_envdata.speed : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="湿度(%)">
|
||||
<template #default="scope">
|
||||
{{ scope.row.equipment_envdata.humidity ? scope.row.equipment_envdata.humidity : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流量(m3/h)">
|
||||
<template #default="scope">
|
||||
{{ scope.row.equipment_envdata.flux ? scope.row.equipment_envdata.flux : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="监测达标率" />
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-main class="nppadding">
|
||||
<el-container>
|
||||
<el-main class="nopadding">
|
||||
<el-container>
|
||||
<el-header class="panel_title">
|
||||
<el-header class="searchWrap">
|
||||
<div class="left-panel">
|
||||
环境空气质量监测实时数据
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-select v-model="query.time_bucket" placeholder="周期" style="margin-left:4px"
|
||||
@change="handleQuery">
|
||||
<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.type" placeholder="污染源" style="margin-left:4px"
|
||||
@change="handleQuery">
|
||||
<el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
|
||||
<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 class="nppadding">
|
||||
<scTable :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id"
|
||||
:params="params" hideDo @row-click="rowClick">
|
||||
<el-main>
|
||||
<scTable :data="tableData" hideDo v-show="time_bucket=='minute'">
|
||||
<el-table-column type="index" />
|
||||
<el-table-column label="站点名称" />
|
||||
<el-table-column label="0" />
|
||||
<el-table-column label="5" />
|
||||
<el-table-column label="10" />
|
||||
<el-table-column label="15" />
|
||||
<el-table-column label="20" />
|
||||
<el-table-column label="25" />
|
||||
<el-table-column label="30" />
|
||||
<el-table-column label="35" />
|
||||
<el-table-column label="40" />
|
||||
<el-table-column label="45" />
|
||||
<el-table-column label="50" />
|
||||
<el-table-column label="55" />
|
||||
<el-table-column label="小时均值" />
|
||||
<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>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
apiObj: this.$API.enp.drain_equip.list,
|
||||
params: { drain__type: 10, equipment__type: 20, has_envdata: 'yes' },
|
||||
currentEquipmentId: '',
|
||||
currentEquipmentName: '',
|
||||
typeOptions: ['PM2.5', 'PM10'],
|
||||
timeOptions: [
|
||||
{ label: '分钟上报值', value: '1 minute' },
|
||||
{ label: '小时均值', value: '1 hour' },
|
||||
{ label: '日均值', value: '1 day' },
|
||||
tableData:[],
|
||||
metricOptions: [
|
||||
{ label: 'PM2.5', value: 'pm25' },
|
||||
{ label: 'PM10', value: 'pm10' },
|
||||
],
|
||||
basicOption: {
|
||||
title: {
|
||||
text: '设备名称'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
|
||||
// itemStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
dataset: {
|
||||
source: []
|
||||
},
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: {},
|
||||
series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }]
|
||||
},
|
||||
timeOptions: [
|
||||
{ label: '分钟上报值', value: 'minute' },
|
||||
{ label: '小时均值', value: 'hour' },
|
||||
],
|
||||
time_bucket:'minute',
|
||||
query: {
|
||||
"end_time": "",
|
||||
"start_time": "",
|
||||
"time_bucket": "1 hour",
|
||||
"equipment_id": ''
|
||||
}
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
hour: '',
|
||||
metric: 'pm25',
|
||||
ecate_code: "aqms",
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initTimeRange()
|
||||
this.getTime();
|
||||
},
|
||||
methods: {
|
||||
initTimeRange() {
|
||||
getTime() {
|
||||
var now = new Date();
|
||||
var start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
|
||||
this.timeRange = [start, now]
|
||||
},
|
||||
rowClick(row) {
|
||||
this.currentEquipmentId = row.equipment;
|
||||
this.currentEquipmentName = row.equipment_name;
|
||||
this.query.equipment_id = row.equipment;
|
||||
this.$nextTick(() => { this.handleQuery() })
|
||||
|
||||
},
|
||||
initChart() {
|
||||
var that = this;
|
||||
var myChart = echarts.getInstanceByDom(document.getElementById('cChart'));
|
||||
if (myChart == undefined) {
|
||||
myChart = echarts.init(document.getElementById('cChart'), 'dark');
|
||||
}
|
||||
myChart.showLoading();
|
||||
this.$API.bi.dataset.exec.req('enp_edata2', {
|
||||
query: this.query,
|
||||
raise_exception: true
|
||||
}).then(res => {
|
||||
let newOption = Object.assign({}, this.basicOption);
|
||||
let ds0 = res.data.ds0
|
||||
ds0.pop()
|
||||
let series = []
|
||||
if (ds0) {
|
||||
let ds00 = ds0[0]
|
||||
for (var x = 1, y = ds00.length; x < y; x++) {
|
||||
series.push({ type: 'line' })
|
||||
}
|
||||
}
|
||||
newOption.dataset.source = res.data.ds0;
|
||||
newOption.series = series;
|
||||
newOption.title.text = this.currentEquipmentName;
|
||||
myChart.setOption(newOption);
|
||||
}).then(() => { myChart.hideLoading() })
|
||||
|
||||
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;
|
||||
let timeRange = Object.assign([], that.timeRange);;
|
||||
let time1 = timeRange[0]
|
||||
let time2 = timeRange[1];
|
||||
let formatstr = 'yyyy-MM-dd hh:mm:ss'
|
||||
if (this.query.time_bucket == '1 minute') {
|
||||
time2 = new Date(time2.getTime() + 1000 * 60);
|
||||
formatstr = 'yyyy-MM-dd hh:mm:00'
|
||||
}
|
||||
else if (this.query.time_bucket == '1 hour') {
|
||||
time2 = new Date(time2.getTime() + 1000 * 60 * 60);
|
||||
formatstr = 'yyyy-MM-dd hh:00:00'
|
||||
}
|
||||
else if (this.query.time_bucket == '1 day') {
|
||||
time2 = new Date(time2.getTime() + 1000 * 60 * 60 * 24);
|
||||
formatstr = 'yyyy-MM-dd'
|
||||
}
|
||||
this.query.start_time = this.$TOOL.dateFormat(time1, formatstr)
|
||||
this.query.end_time = this.$TOOL.dateFormat(time2, formatstr)
|
||||
// this.initChart()
|
||||
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;
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue