菜单变动
This commit is contained in:
parent
e60973b274
commit
68416ae7a9
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-main class="nopadding">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="panel_title">报警记录</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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
cateOptions: [{ id: 'mtrans', name: '生产工艺' }, { id: 'product', name: '物料输送' }, { id: 'mstore', name: '物料储存' }],
|
||||
apiObj: this.$API.enp.drain.list,
|
||||
params: { type: 20 },
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.$refs.table.queryData(this.query);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="panel_title">
|
||||
环境监测清单
|
||||
<div class="backMap" @click="backtoMap">
|
||||
切换地图
|
||||
<el-icon>
|
||||
<Switch />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="searchWrap">
|
||||
<div style="font-size: 1vh;">
|
||||
车辆总数：<span class="totalNumber">0</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-select v-model="query.timetype" placeholder="时间类型" @change="timeHandleQuery" clearable>
|
||||
<el-option v-for="item in timeOptions" :key="item" :label="item" :value="item"></el-option>
|
||||
</el-select>
|
||||
<!-- 时间 -->
|
||||
<el-date-picker v-model="query.time" v-if="query.timetype == '日'" type="date" placeholder="选择时间"
|
||||
format="YYYY-MM-DD" value-format="YYYY-MM-DD" :picker-options="pickerOptions" />
|
||||
<el-date-picker v-model="query.time" v-else-if="query.timetype == '月'" type="month"
|
||||
placeholder="选择月" format="YYYY-MM" value-format="YYYY-MM" :picker-options="pickerOptions" />
|
||||
<el-date-picker v-model="query.time" v-else-if="query.timetype == '年'" type="year"
|
||||
placeholder="选择年" format="YYYY" value-format="YYYY" :picker-options="pickerOptions" />
|
||||
<el-select v-model="query.cate" placeholder="车辆分类" @change="carHandleQuery" clearable>
|
||||
<el-option v-for="item in cateOptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="query.type" placeholder="出入类型" style="width:7vw">
|
||||
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="query.status" placeholder="行驶证状态" style="width:7vw">
|
||||
<el-option v-for="item in statusOptions" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input :input-style="searchInputStyle" style="width:7vw;margin:0 5px" v-model="query.search"
|
||||
placeholder=""></el-input>
|
||||
<el-button @click="handleQuery">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<scTable :data="tableData" :apiObj="apiObj" size="large" style="" @row-click="rowClick">
|
||||
<el-table-column prop="index" 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="mgroup" label="进出厂类型"></el-table-column>
|
||||
<el-table-column prop="eqpment" label="门禁名称"></el-table-column>
|
||||
<el-table-column prop="mgroup" label="车辆识别代号（VIN）"></el-table-column>
|
||||
<el-table-column prop="mgroup" label="行驶证状态"></el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
cateOptions: [
|
||||
{ id: 1, name: '货车' },
|
||||
{ id: 2, name: '罐车' },
|
||||
],
|
||||
typeOptions: [
|
||||
{ id: '', name: '全部' },
|
||||
{ id: 1, name: '进厂' },
|
||||
{ id: 2, name: '出厂' }
|
||||
],
|
||||
statusOptions: [
|
||||
{ id: '', name: '全部' },
|
||||
{ id: 10, name: '已录入' },
|
||||
{ id: 20, name: '未录入' }
|
||||
],
|
||||
timeOptions: ['日', '月', '年'],
|
||||
apiObj: this.$API.enp.vehicle_access,
|
||||
params: { type: 2 },
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.$refs.table.queryData(this.query);
|
||||
},
|
||||
timeHandleQuery() { },
|
||||
carHandleQuery() { },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header style="height: 40%;padding: 0;">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="panel_title">环境质量监测
|
||||
<div class="backMap" @click="backtoMap">
|
||||
切换地图
|
||||
<el-icon>
|
||||
<Switch />
|
||||
</el-icon>
|
||||
</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-container>
|
||||
<el-main class="nopadding">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="panel_title">
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<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>
|
||||
</div>
|
||||
</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-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' },
|
||||
],
|
||||
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' }]
|
||||
},
|
||||
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);
|
||||
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() })
|
||||
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="panel_title">
|
||||
环境管理台账
|
||||
<div class="backMap" @click="backtoMap">
|
||||
切换地图
|
||||
<el-icon>
|
||||
<Switch />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="searchWrap">
|
||||
<div style="font-size: 1vh;">
|
||||
车辆总数：<span class="totalNumber">0</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-select v-model="query.timetype" placeholder="时间类型" @change="timeHandleQuery" clearable>
|
||||
<el-option v-for="item in timeOptions" :key="item" :label="item" :value="item"></el-option>
|
||||
</el-select>
|
||||
<!-- 时间 -->
|
||||
<el-date-picker v-model="query.time" v-if="query.timetype == '日'" type="date" placeholder="选择时间"
|
||||
format="YYYY-MM-DD" value-format="YYYY-MM-DD" :picker-options="pickerOptions" />
|
||||
<el-date-picker v-model="query.time" v-else-if="query.timetype == '月'" type="month"
|
||||
placeholder="选择月" format="YYYY-MM" value-format="YYYY-MM" :picker-options="pickerOptions" />
|
||||
<el-date-picker v-model="query.time" v-else-if="query.timetype == '年'" type="year"
|
||||
placeholder="选择年" format="YYYY" value-format="YYYY" :picker-options="pickerOptions" />
|
||||
<el-select v-model="query.cate" placeholder="车辆分类" @change="carHandleQuery" clearable>
|
||||
<el-option v-for="item in cateOptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="query.type" placeholder="出入类型" style="width:7vw">
|
||||
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="query.status" placeholder="行驶证状态" style="width:7vw">
|
||||
<el-option v-for="item in statusOptions" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input :input-style="searchInputStyle" style="width:7vw;margin:0 5px" v-model="query.search"
|
||||
placeholder=""></el-input>
|
||||
<el-button @click="handleQuery">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<scTable :data="tableData" :apiObj="apiObj" size="large" style="" @row-click="rowClick">
|
||||
<el-table-column prop="index" 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="mgroup" label="进出厂类型"></el-table-column>
|
||||
<el-table-column prop="eqpment" label="门禁名称"></el-table-column>
|
||||
<el-table-column prop="mgroup" label="车辆识别代号（VIN）"></el-table-column>
|
||||
<el-table-column prop="mgroup" label="行驶证状态"></el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
cateOptions: [
|
||||
{ id: 1, name: '货车' },
|
||||
{ id: 2, name: '罐车' },
|
||||
],
|
||||
typeOptions: [
|
||||
{ id: '', name: '全部' },
|
||||
{ id: 1, name: '进厂' },
|
||||
{ id: 2, name: '出厂' }
|
||||
],
|
||||
statusOptions: [
|
||||
{ id: '', name: '全部' },
|
||||
{ id: 10, name: '已录入' },
|
||||
{ id: 20, name: '未录入' }
|
||||
],
|
||||
timeOptions: ['日', '月', '年'],
|
||||
apiObj: this.$API.enp.vehicle_access,
|
||||
params: { type: 2 },
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.$refs.table.queryData(this.query);
|
||||
},
|
||||
timeHandleQuery() { },
|
||||
carHandleQuery() { },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-container v-if="!pollutantDetail">
|
||||
<el-main class="nopadding">
|
||||
<el-container>
|
||||
<el-header>
|
||||
|
|
@ -29,23 +29,335 @@
|
|||
</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>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-main class="nopadding">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="panel_title">污染日历</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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
cateOptions: [{ id: 'mtrans', name: '生产工艺' }, { id: 'product', name: '物料输送' }, { id: 'mstore', name: '物料储存' }],
|
||||
apiObj: this.$API.enp.drain.list,
|
||||
params: { type: 20 },
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.$refs.table.queryData(this.query);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -71,11 +71,39 @@
|
|||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="bindClass(4)">
|
||||
<div class="menuItem">环保管理</div>
|
||||
<div :class="bindClass(4)" @click="menuClick(4)">
|
||||
<!-- <div class="menuItem">环保管理</div> -->
|
||||
<div class="menuItem">
|
||||
<el-dropdown class="dropdown" trigger="click" @command="handleClick4">
|
||||
<span class="el-dropdown-link">
|
||||
环保管理
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="enpMenu">
|
||||
<el-dropdown-item command="envirqualmonitor">环境质量监测</el-dropdown-item>
|
||||
<el-dropdown-item command="envirmonitor">环境监测清单</el-dropdown-item>
|
||||
<el-dropdown-item command="pollutecalendar">污染日历</el-dropdown-item>
|
||||
<el-dropdown-item command="">决策分析</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="bindClass(5)">
|
||||
<div class="menuItem">台账管理</div>
|
||||
<div :class="bindClass(5)" @click="menuClick(5)">
|
||||
<!-- <div class="menuItem">台账管理</div> -->
|
||||
<div class="menuItem">
|
||||
<el-dropdown class="dropdown" trigger="click" @command="handleClick4">
|
||||
<span class="el-dropdown-link">
|
||||
台账管理
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="enpMenu">
|
||||
<el-dropdown-item command="ledger">环境管理台账</el-dropdown-item>
|
||||
<el-dropdown-item command="alarmrecord">报警记录 </el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wraning_icon"></div>
|
||||
<div class="user_icon" @click="backSystem"></div>
|
||||
|
|
@ -293,8 +321,16 @@
|
|||
<cems2-drawer v-else-if="activeDrawerName == 'cems2'" @close="closeDialog"></cems2-drawer>
|
||||
<cems-export v-else-if="activeDrawerName == 'cemsExport'" @close="closeDialog"></cems-export>
|
||||
<pollutant v-else-if="activeDrawerName == 'pollutant'" @close="closeDialog"></pollutant>
|
||||
<!-- 运输清洁 -->
|
||||
<transport v-else-if="activeDrawerName == 'transport'" @close="closeDialog"></transport>
|
||||
<innerclean v-else-if="activeDrawerName == 'innerClean'" @close="closeDialog"></innerclean>
|
||||
<!-- 环保管理 -->
|
||||
<envirqualmonitor v-else-if="activeDrawerName == 'envirqualmonitor'" @close="closeDialog"></envirqualmonitor>
|
||||
<envirmonitor v-else-if="activeDrawerName == 'envirmonitor'" @close="closeDialog"></envirmonitor>
|
||||
<pollutecalendar v-else-if="activeDrawerName == 'pollutecalendar'" @close="closeDialog"></pollutecalendar>
|
||||
<!-- 台账管理 -->
|
||||
<ledger v-else-if="activeDrawerName == 'ledger'" @close="closeDialog"></ledger>
|
||||
<alarmrecord v-else-if="activeDrawerName == 'alarmrecord'" @close="closeDialog"></alarmrecord>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-main>
|
||||
|
|
@ -312,7 +348,12 @@ import cems2Drawer from './enpComponents/cems2.vue'
|
|||
import cemsExport from './enpComponents/cemsExport.vue'
|
||||
import pollutant from "./enpComponents/pollutant.vue"
|
||||
import innerclean from "./enpComponents/innerclean.vue"
|
||||
import transport from "./enpComponents/transport.vue"
|
||||
import transport from "./enpComponents/transport.vue";
|
||||
import envirqualmonitor from "./enpComponents/envirqualmonitor.vue";
|
||||
import envirmonitor from "./enpComponents/envirmonitor.vue";
|
||||
import pollutecalendar from "./enpComponents/pollutecalendar.vue";
|
||||
import ledger from "./enpComponents/ledger.vue";//台账
|
||||
import alarmrecord from "./enpComponents/alarmrecord.vue";
|
||||
import 'babylonjs-loaders';
|
||||
import 'animate.css';
|
||||
export default {
|
||||
|
|
@ -323,7 +364,12 @@ export default {
|
|||
cemsExport,
|
||||
pollutant,
|
||||
innerclean,
|
||||
transport
|
||||
transport,
|
||||
envirqualmonitor,
|
||||
envirmonitor,
|
||||
pollutecalendar,
|
||||
ledger,
|
||||
alarmrecord
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -568,8 +614,8 @@ export default {
|
|||
}
|
||||
return classInfo
|
||||
},
|
||||
menuClick() {
|
||||
this.activeIndex = 0;
|
||||
menuClick(index) {
|
||||
this.activeIndex = index;
|
||||
},
|
||||
handleClick(command) {
|
||||
this.activeIndex = 1;
|
||||
|
|
@ -586,6 +632,16 @@ export default {
|
|||
this.elDrawer = true;
|
||||
this.activeDrawerName = command;
|
||||
},
|
||||
handleClick4(command) {
|
||||
this.activeIndex = 4;
|
||||
this.elDrawer = true;
|
||||
this.activeDrawerName = command;
|
||||
},
|
||||
handleClick5(command) {
|
||||
this.activeIndex = 5;
|
||||
this.elDrawer = true;
|
||||
this.activeDrawerName = command;
|
||||
},
|
||||
getMessage(msg) {
|
||||
console.log(msg);
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue