zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

环境质量

This commit is contained in:
shijing 2024-03-08 13:19:00 +08:00
parent 7b5c19ee83
commit 4ad85cab13
3 changed files with 244 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/bigScreen/enpComponents/cems.vue
View File

@ -68,7 +68,7 @@
<el-container> <el-container>
<el-main class="nopadding"> <el-main class="nopadding">
<el-container> <el-container>
<el-header> <el-header class="panel_title">
<div class="left-panel"> <div class="left-panel">
CEMS监测详情 CEMS监测详情
</div> </div>

147
src/views/bigScreen/enpComponents/envirmonitor.vue
View File

@ -30,19 +30,43 @@
</div> </div>
</el-header> </el-header>
<el-main> <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 type="index" width="50" />
<el-table-column prop="number" label="设备编号"></el-table-column> <el-table-column prop="number" label="设备编号"></el-table-column>
<el-table-column prop="level" label="设备名称"></el-table-column> <el-table-column prop="name" label="设备名称"></el-table-column>
<el-table-column prop="type" 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="mgroup_name" label="所属工序"></el-table-column>
<el-table-column prop="running_state" 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 label="PM2.5实测值">
<el-table-column prop="PM10" label="PM10实测值"></el-table-column> <template #default="scope">
<el-table-column prop="level" label="湿度"></el-table-column> {{ scope.row.envdata.pm25 ? scope.row.envdata.pm25 : '-' }}
<el-table-column prop="mgroup" label="温度"></el-table-column> </template>
<el-table-column prop="eqpment" label="大气压"></el-table-column> </el-table-column>
<el-table-column prop="mgroup" label="风向"></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> </scTable>
</el-main> </el-main>
</el-container> </el-container>
@ -56,10 +80,18 @@
空气质量微站实时监测详情 空气质量微站实时监测详情
</div> </div>
<div class="right-panel"> <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> </div>
</el-header> </el-header>
<el-main class="nopadding"> <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-main>
</el-container> </el-container>
</el-main> </el-main>
@ -67,25 +99,84 @@
</el-container> </el-container>
</template> </template>
<script> <script>
import * as echarts from "echarts";
export default { export default {
data() { data() {
return { return {
params: {}, params: { type: 20, cate__code: 'aqms', has_envdata: 'yes' },
query: {}, query: {
apiObj: null, "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: [], processOptions: [],
currentEquipmentId: '', 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: { methods: {
handleQuery() { handleQuery() { },
this.$refs.table.queryData(this.query); 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() { initChart() {
var that = this; var that = this;
var myChart = echarts.getInstanceByDom(document.getElementById('lineChart')); var myChart = echarts.getInstanceByDom(document.getElementById('cChart'));
if (myChart == undefined) { if (myChart == undefined) {
myChart = echarts.init(document.getElementById('lineChart'), 'dark'); myChart = echarts.init(document.getElementById('cChart'), 'dark');
} }
myChart.showLoading(); myChart.showLoading();
this.$API.bi.dataset.exec.req('enp_edata2', { this.$API.bi.dataset.exec.req('enp_edata2', {
@ -109,6 +200,28 @@ export default {
}).then(() => { myChart.hideLoading() }) }).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> </script>

316
src/views/bigScreen/enpComponents/envirqualmonitor.vue
View File

@ -1,236 +1,146 @@
<template> <template>
<el-container> <el-container>
<el-header style="height: 40%;padding: 0;"> <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-container>
<el-header class="panel_title"> <el-header class="searchWrap">
<div class="left-panel"> <div class="left-panel">
环境质量监测
</div> </div>
<div class="right-panel"> <div class="right-panel">
<div class="backMap" @click="backtoMap"> <el-select v-model="time_bucket" placeholder="周期" style="margin-left:4px"
切换地图 >
<el-icon> <el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
<Switch /> :value="item.value" />
</el-icon> </el-select>
</div> <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> </div>
</el-header> </el-header>
<el-main class="nopadding"> <el-main>
<scTable :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id" <scTable :data="tableData" hideDo v-show="time_bucket=='minute'">
:params="params" hidePagination hideDo @row-click="rowClick"> <el-table-column type="index" />
<el-table-column type="index" width="50" /> <el-table-column prop="equipment_name" label="站点名称" />
<el-table-column prop="equipment_number" label="设备编号" width="120" /> <el-table-column prop="metric_0" label="0" />
<el-table-column prop="equipment_name" label="设备名称" width="180" /> <el-table-column prop="metric_5" label="5" />
<el-table-column prop="name" label="监测状态" /> <el-table-column prop="metric_10" label="10" />
<el-table-column label="颗粒物实测(mg/m3)" width="180"> <el-table-column prop="metric_15" label="15" />
<template #default="scope"> <el-table-column prop="metric_20" label="20" />
{{ scope.row.equipment_envdata.dust_rtd ? scope.row.equipment_envdata.dust_rtd : '-' }} <el-table-column prop="metric_25" label="25" />
</template> <el-table-column prop="metric_30" label="30" />
</el-table-column> <el-table-column prop="metric_35" label="35" />
<el-table-column label="颗粒物折算(mg/m3)" width="180"> <el-table-column prop="metric_40" label="40" />
<template #default="scope"> <el-table-column prop="metric_45" label="45" />
{{ scope.row.equipment_envdata.dust_zs ? scope.row.equipment_envdata.dust_zs : '-' }} <el-table-column prop="metric_50" label="50" />
</template> <el-table-column prop="metric_55" label="55" />
</el-table-column> <el-table-column prop="metric_hour" label="小时均值" />
<el-table-column label="温度(℃)"> </scTable>
<template #default="scope"> <scTable :data="tableData" hideDo v-show="time_bucket=='hour'">
{{ scope.row.equipment_envdata.temperature ? scope.row.equipment_envdata.temperature : '-' <el-table-column type="index" />
}} <el-table-column prop="equipment_name" label="站点名称" />
</template> <el-table-column prop="val_1" label="1" />
</el-table-column> <el-table-column prop="val_2" label="2" />
<el-table-column label="压力(KPa)"> <el-table-column prop="val_3" label="3" />
<template #default="scope"> <el-table-column prop="val_4" label="4" />
{{ scope.row.equipment_envdata.pressure ? scope.row.equipment_envdata.pressure : '-' }} <el-table-column prop="val_5" label="5" />
</template> <el-table-column prop="val_6" label="6" />
</el-table-column> <el-table-column prop="val_7" label="7" />
<el-table-column label="流速(m/s)"> <el-table-column prop="val_8" label="8" />
<template #default="scope"> <el-table-column prop="val_9" label="9" />
{{ scope.row.equipment_envdata.speed ? scope.row.equipment_envdata.speed : '-' }} <el-table-column prop="val_10" label="10" />
</template> <el-table-column prop="val_11" label="11" />
</el-table-column> <el-table-column prop="val_12" label="12" />
<el-table-column label="湿度(%)"> <el-table-column prop="val_13" label="13" />
<template #default="scope"> <el-table-column prop="val_14" label="14" />
{{ scope.row.equipment_envdata.humidity ? scope.row.equipment_envdata.humidity : '-' }} <el-table-column prop="val_15" label="15" />
</template> <el-table-column prop="val_16" label="16" />
</el-table-column> <el-table-column prop="val_17" label="17" />
<el-table-column label="流量(m3/h)"> <el-table-column prop="val_18" label="18" />
<template #default="scope"> <el-table-column prop="val_19" label="19" />
{{ scope.row.equipment_envdata.flux ? scope.row.equipment_envdata.flux : '-' }} <el-table-column prop="val_20" label="20" />
</template> <el-table-column prop="val_21" label="21" />
</el-table-column> <el-table-column prop="val_22" label="22" />
<el-table-column label="监测达标率" /> <el-table-column prop="val_23" label="23" />
<el-table-column prop="val_24" label="24" />
<el-table-column prop="val_day" label="日均值" />
</scTable> </scTable>
</el-main>
</el-container>
</el-header>
<el-main class="nopadding">
<el-container>
<el-main class="nopadding">
<el-container>
<el-header class="panel_title">
<div class="left-panel">
环境空气质量监测实时数据
</div>
<div class="right-panel">
<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>
<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>
</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-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="小时均值" />
</scTable>
</el-main>
</el-container>
</el-main> </el-main>
</el-container> </el-container>
</el-main> </el-main>
</el-container> </el-container>
</template> </template>
<script> <script>
import * as echarts from "echarts";
export default { export default {
data() { data() {
return { return {
apiObj: this.$API.enp.drain_equip.list, tableData:[],
params: { drain__type: 10, equipment__type: 20, has_envdata: 'yes' }, metricOptions: [
currentEquipmentId: '', { label: 'PM2.5', value: 'pm25' },
currentEquipmentName: '', { label: 'PM10', value: 'pm10' },
typeOptions: ['PM2.5', 'PM10'],
timeOptions: [
{ label: '分钟上报值', value: '1 minute' },
{ label: '小时均值', value: '1 hour' },
{ label: '日均值', value: '1 day' },
], ],
basicOption: { timeOptions: [
title: { { label: '分钟上报值', value: 'minute' },
text: '设备名称' { label: '小时均值', value: 'hour' },
}, ],
tooltip: { time_bucket:'minute',
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' }]
},
query: { query: {
"end_time": "", year: '',
"start_time": "", month: '',
"time_bucket": "1 hour", day: '',
"equipment_id": '' hour: '',
} metric: 'pm25',
ecate_code: "aqms",
},
} }
}, },
mounted() { mounted() {
this.initTimeRange() this.getTime();
}, },
methods: { methods: {
initTimeRange() { getTime() {
var now = new Date(); var now = new Date();
var start = new Date(); this.query.year = now.getFullYear();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3); this.query.month = now.getMonth() + 1;
this.timeRange = [start, now] this.query.day = now.getDate();
}, this.query.hour = now.getHours();
rowClick(row) { this.handleQuery();
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() })
}, },
handleQuery() { handleQuery() {
let that = this; let that = this;
let timeRange = Object.assign([], that.timeRange);; console.log(that.query);
let time1 = timeRange[0] that.getTableData();
let time2 = timeRange[1]; },
let formatstr = 'yyyy-MM-dd hh:mm:ss' getTableData() {
if (this.query.time_bucket == '1 minute') { let that = this;
time2 = new Date(time2.getTime() + 1000 * 60); let exec_search = '';
formatstr = 'yyyy-MM-dd hh:mm:00' if (that.time_bucket == 'minute') {
exec_search='enp_edata_metric_nodrain'
} else if (that.time_bucket == 'hour') {
exec_search = 'enp_edata_hour_nodrain';
} }
else if (this.query.time_bucket == '1 hour') { that.$API.bi.dataset.exec.req(exec_search, {
time2 = new Date(time2.getTime() + 1000 * 60 * 60); query: that.query,
formatstr = 'yyyy-MM-dd hh:00:00' raise_exception: true
} }).then(res => {
else if (this.query.time_bucket == '1 day') { console.log(res.data2.ds0);
time2 = new Date(time2.getTime() + 1000 * 60 * 60 * 24); this.tableData = res.data2.ds0;
formatstr = 'yyyy-MM-dd' })
} },
this.query.start_time = this.$TOOL.dateFormat(time1, formatstr)
this.query.end_time = this.$TOOL.dateFormat(time2, formatstr)
// this.initChart()
}
}, },
} }