139 lines
4.4 KiB
Vue
139 lines
4.4 KiB
Vue
<template>
|
|
<new-bg>
|
|
<flex-col>
|
|
<system-title @click="changeTab" show-back custom-title="有组织排放" :btns="btns"/>
|
|
|
|
<ModuleContent padding="0px 20px 20px">
|
|
<div style="height: 144px;width: 100%;">
|
|
<ModuleContent2 bg bg-str :border="false">
|
|
<butgroup2 style="height: 100%;">
|
|
<ModuleContent2 bg bg-color border>
|
|
<miaoshu title="全厂有组织排放源" :value="count.comeCount" color="rgba(42, 207, 255, 1)"></miaoshu>
|
|
</ModuleContent2>
|
|
|
|
<ModuleContent2 bg bg-color border style="margin-left: 16px;">
|
|
<miaoshu title="全厂重要排放源" :value="count.outCount" color="rgba(255, 171, 87, 1)"></miaoshu>
|
|
</ModuleContent2>
|
|
|
|
<ModuleContent2 bg bg-color border style="margin-left: 16px;">
|
|
<miaoshu title="当前区域排放源" :value="count.inCount" color="rgba(122, 175, 255, 1)"></miaoshu>
|
|
</ModuleContent2>
|
|
|
|
<ModuleContent2 bg bg-color border style="margin-left: 16px;">
|
|
<miaoshu title="当前区域其中重要排放源" :value="count.addCount" color="rgba(76, 243, 129, 1)"></miaoshu>
|
|
</ModuleContent2>
|
|
</butgroup2>
|
|
</ModuleContent2>
|
|
</div>
|
|
|
|
<div class="paifang" style="height: calc(100% - 144px);overflow: hidden">
|
|
<a-row style="height: 100%;margin-top: 16px;" :gutter="16">
|
|
<a-col :span="3" style="height: 100%;">
|
|
<web3-title>工序步骤</web3-title>
|
|
<div class="gongxu-box">
|
|
<div class="gongxu-item" v-for="item in gongxu" :key="item.id">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
<a-col :span="17" style="height: 100%;">
|
|
<div style="height: 100%;position: relative">
|
|
<div class="map-cv" style="height: calc(100% - 80px);position: relative">
|
|
<Map></Map>
|
|
</div>
|
|
<butgroup>
|
|
<cus-button>
|
|
<nuxt-link to="/youzuzhi/paifangtongji">环保排放统计</nuxt-link>
|
|
</cus-button>
|
|
</butgroup>
|
|
</div>
|
|
</a-col>
|
|
<a-col :span="4" style="height: 100%;">
|
|
<web3-title>排放源清单</web3-title>
|
|
<a-table :columns="columns" :data-source="data"/>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</ModuleContent>
|
|
</flex-col>
|
|
</new-bg>
|
|
</template>
|
|
|
|
<script>
|
|
import Map from "../../components/Map.vue";
|
|
import NewBg from "../../components/NewBg.vue";
|
|
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
|
|
import FlexCol from "../../components/FlexCol.vue";
|
|
import ModuleContent from "../../components/ModuleContent.vue";
|
|
import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
|
|
import Miaoshu from "../../components/smallCommon/miaoshu.vue";
|
|
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
|
|
import Web3Title from "../../components/smallCommon/Web3Title.vue";
|
|
import CusButton from "../../components/smallCommon/CusButton.vue";
|
|
import Butgroup from "../../components/smallCommon/butgroup.vue";
|
|
|
|
export default {
|
|
name: "paifang",
|
|
components: {
|
|
Butgroup, CusButton,
|
|
Web3Title,
|
|
ModuleContent2, Miaoshu, Butgroup2,
|
|
ModuleContent,
|
|
FlexCol,
|
|
SystemTitle,
|
|
NewBg,
|
|
Map
|
|
},
|
|
data() {
|
|
return {
|
|
btns: [
|
|
{ title: 'VOC', key: '1' },
|
|
{ title: 'CEMS', key: '2' },
|
|
],
|
|
count: {},
|
|
data: [],
|
|
gongxu: [],
|
|
columns: [
|
|
{title: '名词', key: 'name'},
|
|
{title: 'NO', key: 'NO'},
|
|
{title: 'SO2', key: 'SO2'},
|
|
{title: 'TSP', key: 'TSP'},
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData(1)
|
|
},
|
|
methods: {
|
|
changeTab ({ key }) {
|
|
this.getData(key)
|
|
},
|
|
getData (deviceType) {
|
|
this.$get('/api/Organized/listanddevice', {
|
|
organizedType: 1,
|
|
deviceType: deviceType
|
|
}).then(({data}) => {
|
|
this.gongxu = data || []
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.mt16 {
|
|
margin-top: 16px;
|
|
}
|
|
.gongxu-box {
|
|
height: calc(100% - 48px);
|
|
overflow-y: auto;
|
|
.gongxu-item {
|
|
cursor: pointer;
|
|
padding: 16px 0;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
border-bottom: 1px solid rgba(238, 238, 238, 0.54);
|
|
}
|
|
}
|
|
</style>
|