feat: 添加cems监测清单页及相应的接口
This commit is contained in:
parent
e2015236e7
commit
60e6e154f7
|
|
@ -43,6 +43,12 @@ export default {
|
|||
<style lang="scss">
|
||||
@import '@/style/style.scss';
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headerSearch {
|
||||
width: 120px !important;
|
||||
margin-right: 5px;
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export default {
|
|||
name: "排口/设备关系",
|
||||
req: async function(data){
|
||||
return await http.get(
|
||||
`${config.API_URL}/enp/drain_equips/`,
|
||||
`${config.API_URL}/enp/drain_equip/`,
|
||||
data
|
||||
);
|
||||
}
|
||||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
name: "创建",
|
||||
req: async function(data){
|
||||
return await http.post(
|
||||
`${config.API_URL}/enp/drain_equips/`,
|
||||
`${config.API_URL}/enp/drain_equip/`,
|
||||
data);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>CEMS监测清单</span>
|
||||
</div>
|
||||
</template>
|
||||
<scTable :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id" :params="params"
|
||||
hidePagination @row-click="rowClick">
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column prop="equipment_number" label="设备编号" width="180" />
|
||||
<el-table-column prop="equipment_name" label="设备名称" />
|
||||
<el-table-column prop="name" label="监测状态" />
|
||||
<el-table-column label="颗粒物实测(mg/m3)">
|
||||
<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)">
|
||||
<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-card>
|
||||
<div style="height: 8px;"></div>
|
||||
<el-card style="width: 100%; " v-show="currentEquipmentId != ''">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>CEMS监测详情</span>
|
||||
<el-button @click="handleQuery">刷新</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div style="display:flex">
|
||||
<el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" @change="handleQuery" style="width: 200px" />
|
||||
|
||||
<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 id="cChart" style="width: 100%; height:400px"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
apiObj: this.$API.enp.drain_equip.list,
|
||||
params: { drain__type: 10, equipment_type: 30, has_envdata: 'yes' },
|
||||
currentEquipmentId: '',
|
||||
currentEquipmentName: '',
|
||||
timeRange: [],
|
||||
timeOptions: [
|
||||
{ label: '分钟', value: '1 minute' },
|
||||
{ label: '小时', value: '1 hour' },
|
||||
{ label: '天', value: '1 day' },
|
||||
],
|
||||
basicOption: {
|
||||
title: {
|
||||
text: '设备名称'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
dataset: {
|
||||
source: []
|
||||
},
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: {},
|
||||
series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }]
|
||||
},
|
||||
query: {
|
||||
"end_time": "",
|
||||
"start_time": "",
|
||||
"time_bucket": "1 hour",
|
||||
"equipment_id": ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initTimeRange()
|
||||
},
|
||||
methods: {
|
||||
initTimeRange() {
|
||||
var now = new Date();
|
||||
var start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
|
||||
let start_ = this.$TOOL.dateFormat(start)
|
||||
let now_ = this.$TOOL.dateFormat(now)
|
||||
this.timeRange = [start_, now_]
|
||||
},
|
||||
rowClick(row) {
|
||||
this.currentEquipmentId = row.equipment;
|
||||
this.currentEquipmentName = row.equipment_name;
|
||||
this.query.equipment_id = row.equipment;
|
||||
this.query.start_time = this.timeRange[0];
|
||||
this.query.end_time = this.timeRange[1];
|
||||
this.$nextTick(() => { this.initChart() })
|
||||
|
||||
},
|
||||
initChart() {
|
||||
var that = this;
|
||||
var myChart = echarts.getInstanceByDom(document.getElementById('cChart'));
|
||||
if (myChart == undefined) {
|
||||
myChart = echarts.init(document.getElementById('cChart'));
|
||||
}
|
||||
myChart.showLoading();
|
||||
this.$API.bi.dataset.exec.req('enp_edata', {
|
||||
query: this.query,
|
||||
raise_exception: true
|
||||
}).then(res => {
|
||||
let newOption = Object.assign({}, this.basicOption);
|
||||
let ds0 = res.data.ds0
|
||||
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() {
|
||||
this.query.start_time = this.timeRange[0]
|
||||
this.query.end_time = this.timeRange[1]
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="paikou">排放口清单</el-dropdown-item>
|
||||
<el-dropdown-item command="CEMS">CEMS监测清单</el-dropdown-item>
|
||||
<el-dropdown-item command="cems">CEMS监测清单</el-dropdown-item>
|
||||
<el-dropdown-item>CEMS监测预警</el-dropdown-item>
|
||||
<el-dropdown-item>CEMS报表导出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
|
|
@ -281,7 +281,8 @@
|
|||
<el-drawer v-model="elDrawer" :modal="false" :close-on-click-modal="false" size="95%" :with-header="false"
|
||||
direction="ltr" :show-close="false" id="enpElDrawer">
|
||||
<!-- <div class="sysName">智能环保一体化管控平台</div> -->
|
||||
<org-dialog @close="closeDialog"></org-dialog>
|
||||
<org-dialog v-if="activeDrawerName == 'paikou'" @close="closeDialog"></org-dialog>
|
||||
<cems-drawer v-else-if="activeDrawerName == 'cems'" @close="closeDialog"></cems-drawer>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-main>
|
||||
|
|
@ -294,11 +295,13 @@ import * as BABYLON_GUI from "babylonjs-gui"
|
|||
import * as BABYLON_GRID from "@/utils/gridMaterial"
|
||||
import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"
|
||||
import orgDialog from "./enpComponents/orgwryList"
|
||||
import cemsDrawer from './enpComponents/cems.vue'
|
||||
import 'babylonjs-loaders';
|
||||
import 'animate.css';
|
||||
export default {
|
||||
components: {
|
||||
orgDialog
|
||||
orgDialog,
|
||||
cemsDrawer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -327,7 +330,7 @@ export default {
|
|||
showKgcet: true,
|
||||
currentLightMesh: null,
|
||||
activeBtns: 0,
|
||||
activePage: 0,
|
||||
activeDrawerName: '',
|
||||
activeIndex: 0,
|
||||
activeSection: 2,
|
||||
activeSectionName: '回转窑',
|
||||
|
|
@ -528,28 +531,17 @@ export default {
|
|||
handleClick(command) {
|
||||
this.activeIndex = 1;
|
||||
this.elDrawer = true;
|
||||
if (command == "paikou") {
|
||||
this.activePage = 1;
|
||||
} else if (command == "CEMS") {
|
||||
this.activePage = 2;
|
||||
}
|
||||
this.activeDrawerName = command;
|
||||
},
|
||||
handleClick2(command) {
|
||||
this.activeIndex = 2;
|
||||
if (command == "wuran") {
|
||||
this.activePage = 3;
|
||||
}
|
||||
this.elDrawer = true;
|
||||
this.activeDrawerName = command;
|
||||
},
|
||||
handleClick3(command) {
|
||||
this.activeIndex = 3;
|
||||
if (command == "changwai") {
|
||||
this.activePage = 5;
|
||||
} else if (command == 'inner') {
|
||||
this.activePage = 4;
|
||||
}
|
||||
},
|
||||
pageClick(page) {
|
||||
this.activePage = page;
|
||||
this.elDrawer = true;
|
||||
this.activeDrawerName = command;
|
||||
},
|
||||
getMessage(msg) {
|
||||
console.log(msg);
|
||||
|
|
|
|||
Loading…
Reference in New Issue