363 lines
17 KiB
Vue
363 lines
17 KiB
Vue
<template>
|
||
<el-container v-if="!pollutantDetail">
|
||
<el-main class="nopadding">
|
||
<el-container>
|
||
<el-header>
|
||
<div class="left-panel">污染源清单</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<el-container>
|
||
<el-header>
|
||
<div class="searchWrap">
|
||
<el-select v-model="query.cate" placeholder="污染源分类" @change="handleQuery" clearable>
|
||
<el-option v-for="item in cateOptions" :key="item.id" :label="item.name"
|
||
:value="item.id"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<scTable ref="table" :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj"
|
||
row-key="id" :params="params" :query="query" hidePagination @row-click="rowClick">
|
||
<el-table-column type="index" width="50" />
|
||
<el-table-column prop="number" label="污染源编号" width="180" />
|
||
<el-table-column prop="name" label="污染源名称" />
|
||
<el-table-column prop="name" label="污染源类型" />
|
||
<el-table-column prop="mgroup_name" label="所属工段" />
|
||
</scTable>
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
</el-container>
|
||
<el-container v-else>
|
||
<el-header>
|
||
<div class="panel_title">污染源及关联设备信息
|
||
<span class="backBtn" @click="handleClick"> 返回 </span>
|
||
</div>
|
||
</el-header>
|
||
<el-main>
|
||
<el-container>
|
||
<el-aside style="width: 35%">
|
||
<div class="aside_one">
|
||
<div class="pageTitle">污染源及关联设备静态信息</div>
|
||
<div class="linesWrap">
|
||
<div class="typeLine">
|
||
<div class="greenBlock">
|
||
<div class="greenBlockInner"></div>
|
||
</div>
|
||
<span>生产设备</span>
|
||
</div>
|
||
<div class="infoLine">
|
||
<span class="circles"></span>
|
||
<span>{{ eqs.name }}</span>
|
||
</div>
|
||
<el-row class="infoLine">
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">设备类型：</span>主要生产设备</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div>
|
||
<span class="infotitle">电机功率：</span>
|
||
<span v-if="eqs.power_kw">{{ eqs.power_kw }}kw</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div>
|
||
<span class="infotitle">生产能力：</span>
|
||
<span v-if="eqs.parameter_json && eqs.parameter_json.生产能力">{{
|
||
eqs.parameter_json.生产能力
|
||
}}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="typeLine">
|
||
<div class="greenBlock">
|
||
<div class="greenBlockInner"></div>
|
||
</div>
|
||
<span>治理设备</span>
|
||
</div>
|
||
<div class="infoLine">
|
||
<span class="circles"></span>
|
||
<span>{{ eqz.name }}</span>
|
||
</div>
|
||
<el-row class="infoLine">
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">风量：</span>
|
||
<span v-if="eqz.parameter_json && eqz.parameter_json.风量">{{ eqz.parameter_json.风量
|
||
}}m³/h</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">过滤面积：</span>
|
||
<span v-if="eqz.parameter_json && eqz.parameter_json.过滤面积">{{
|
||
eqz.parameter_json.过滤面积
|
||
}} m²</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">布袋材质：</span>
|
||
<span v-if="eqz.parameter_json && eqz.parameter_json.布袋材质">{{
|
||
eqz.parameter_json.布袋材质
|
||
}} </span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">过滤风速：</span>
|
||
<span v-if="eqz.parameter_json && eqz.parameter_json.过滤风速">{{
|
||
eqz.parameter_json.过滤风速
|
||
}} </span>m/min
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">额定功率：</span>
|
||
<span v-if="eqz.parameter_json && eqz.parameter_json.额定功率">{{
|
||
eqz.parameter_json.额定功率
|
||
}} </span> Kw
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="typeLine">
|
||
<div class="greenBlock">
|
||
<div class="greenBlockInner"></div>
|
||
</div>
|
||
|
||
<span>污染源</span>
|
||
</div>
|
||
<div class="infoLine">
|
||
<span class="circles"></span>
|
||
<span>{{ detailItem.name }}</span>
|
||
</div>
|
||
<el-row class="infoLine">
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">排气筒高度：</span>{{ detailItem.height }} m</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">废气处理量：</span> {{ detailItem.treatment_capacity }} m³/h
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">PM超低排放限值： </span> {{ detailItem.pm_limit }} mg/Nm³</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">排污许可状况： </span>已许可</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">治理措施： </span>{{ detailItem.measure }}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="typeLine">
|
||
<div class="greenBlock">
|
||
<div class="greenBlockInner"></div>
|
||
</div>
|
||
<span>监测设备</span>
|
||
</div>
|
||
<div class="infoLine">
|
||
<span class="circles"></span>
|
||
<span>{{ eqc.name }}</span>
|
||
</div>
|
||
<el-row class="infoLine">
|
||
<el-col :span="24">
|
||
<div>
|
||
<span class="infotitle">颗粒物：（实测值）</span>0.218 mg/m³
|
||
<span class="infotitle">（折算值）</span>0.218 mg/m³
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<div>
|
||
<span class="infotitle">SO2：（实测值）</span>0.218 mg/m³
|
||
<span class="infotitle">（折算值）</span>0.218 mg/m³
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<div>
|
||
<span class="infotitle">NOX：（实测值）</span>0.218 mg/m³
|
||
<span class="infotitle">（折算值）</span>0.218 mg/m³
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">流量：</span> 0.000 m³/h</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">温度：</span> 0.000 ℃</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">湿度：</span> 0.000 %</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">压力：</span> 0.000 MPa</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">含氧量：</span> 0.000 %</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-aside>
|
||
<el-main>
|
||
<div class="aside_side">
|
||
<div class="pageTitle">污染源及关联设备动态信息</div>
|
||
<div id="dataChart" style="width: 100%; height:200px;margin-top:1vh"></div>
|
||
<div id="dataChart2" style="width: 100%; height:200px;margin-top:1vh"></div>
|
||
<div id="dataChart3" style="width: 100%; height:200px;margin-top:1vh"></div>
|
||
<div id="dataChart4" style="width: 100%; height:200px;margin-top:1vh"></div>
|
||
</div>
|
||
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
data() {
|
||
return {
|
||
eqs: {},
|
||
eqc: {},
|
||
eqz: {},
|
||
pollutantDetail: false,
|
||
query: {},
|
||
|
||
cateOptions: [{ id: 'mtrans', name: '生产工艺' }, { id: 'product', name: '物料输送' }, { id: 'mstore', name: '物料储存' }],
|
||
apiObj: this.$API.enp.drain.list,
|
||
params: { type: 20 },
|
||
detailItem: {},
|
||
detailForm: {
|
||
day: 18,
|
||
year: 2024,
|
||
month: 1
|
||
},
|
||
biquery: {
|
||
end_time: '2024-02-01',
|
||
start_time: '2024-01-29',
|
||
time_bucket: "1 minute",
|
||
equipment_id: "3491356310052896768",
|
||
},
|
||
basicOption: {
|
||
title: {
|
||
text: '设备名称',
|
||
left: 'center',
|
||
top: 'top',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
legend: {
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 20
|
||
},
|
||
{
|
||
start: 0,
|
||
end: 20
|
||
}
|
||
],
|
||
dataset: {
|
||
source: []
|
||
},
|
||
xAxis: { type: 'category' },
|
||
yAxis: {},
|
||
series: [{ type: 'line' }]
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
initTimeNow() {
|
||
var now = new Date();
|
||
let year = now.getFullYear(); // 年份
|
||
let month = now.getMonth() + 1; // 月份
|
||
let day = now.getDate(); // 日期
|
||
this.detailForm.year = year;
|
||
this.detailForm.month = month;
|
||
this.detailForm.day = day;
|
||
},
|
||
handleQuery() {
|
||
this.$refs.table.queryData(this.query);
|
||
},
|
||
rowClick(row) {
|
||
this.pollutantDetail = true;
|
||
this.detailItem = row;
|
||
this.$nextTick(() => {
|
||
this.getEquipments(row.equipments);
|
||
this.getDetailData();
|
||
})
|
||
},
|
||
getEquipments(ids) {
|
||
let that = this;
|
||
console.log(ids);
|
||
ids.forEach(id => {
|
||
that.$API.em.equipment.item.req(id).then(res => {
|
||
if (res.type == 10) {
|
||
that.eqs = res;
|
||
that.getDetailData(1, id);
|
||
} else if (res.type == 20) {
|
||
that.eqc = res;
|
||
that.getDetailData(2, id);
|
||
} else if (res.type == 30) {
|
||
that.eqz = res;
|
||
that.getDetailData(3, id);
|
||
}
|
||
})
|
||
});
|
||
},
|
||
getDetailData(type, id) {
|
||
var that = this;
|
||
if (type == 1) {
|
||
var chartDom = document.getElementById('dataChart');
|
||
var myChart = echarts.init(chartDom);
|
||
} else if (type == 2) {
|
||
var chartDom2 = document.getElementById('dataChart2');
|
||
var myChart2 = echarts.init(chartDom2);
|
||
} else if (type == 3) {
|
||
var chartDom3 = document.getElementById('dataChart3');
|
||
var myChart3 = echarts.init(chartDom3);
|
||
} else {
|
||
var chartDom4 = document.getElementById('dataChart4');
|
||
var myChart4 = echarts.init(chartDom4);
|
||
}
|
||
let obj = that.biquery;
|
||
obj.equipment_id = id;
|
||
let params = { query: obj };
|
||
that.$API.bi.dataset.exec.req('eq_status', params).then(res => {
|
||
let newOption = Object.assign({}, this.basicOption);
|
||
newOption.dataset.source = res.data.ds0;
|
||
newOption.dataZoom.startValue = that.biquery.start_time;
|
||
if (type == 1) {
|
||
newOption.title.text = that.eqs.name;
|
||
myChart.setOption(newOption);
|
||
} else if (type == 2) {
|
||
newOption.title.text = that.eqc.name;
|
||
myChart2.setOption(newOption);
|
||
echarts.connect([myChart, myChart2])
|
||
} else if (type == 3) {
|
||
newOption.title.text = that.eqz.name;
|
||
myChart3.setOption(newOption);
|
||
echarts.connect([myChart2, myChart3])
|
||
} else {
|
||
newOption.title.text = that.eqc.name;
|
||
myChart4.setOption(newOption);
|
||
echarts.connect([myChart3, myChart4])
|
||
}
|
||
}).then(() => { myChart.hideLoading() })
|
||
myChart.hideLoading()
|
||
},
|
||
handleClick() {
|
||
this.pollutantDetail = false;
|
||
this.detailItem = {};
|
||
},
|
||
}
|
||
}
|
||
</script> |