This commit is contained in:
2024-01-03 14:08:49 +08:00
parent 75aa253a29
commit 53f2b242a4
26 changed files with 1357 additions and 271 deletions

View File

@@ -1,10 +1,3 @@
<!--
filename: GasHandle.vue
author: liubin
date: 2023-12-11 09:02:40
description:
-->
<template>
<div class="gas-handle" style="flex: 2">
<Container name="烟气处理" size="large" style="">
@@ -26,11 +19,11 @@
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 1px;
letter-spacing: 3px;
">
氧气含量
</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.O2_float}}%</span>
</ShadowRect>
<ShadowRect>
<div
@@ -45,7 +38,7 @@
<p style="margin: 0; line-height: inherit">一氧化氮</p>
<p style="margin: 0; line-height: inherit">排放浓度</p>
</div>
<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.NOX_float}}mg/</span>
</ShadowRect>
<ShadowRect>
@@ -61,23 +54,22 @@
<p style="margin: 0; line-height: inherit">二氧化硫</p>
<p style="margin: 0; line-height: inherit">排放浓度</p>
</div>
<span style="font-size: 20px; line-height: 1.24; flex: 1">59mg/</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.SO2_float}}mg/</span>
</ShadowRect>
<ShadowRect>
<div
<span
style="
font-size: 20px;
line-height: 1.5;
line-height: 1.24;
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
letter-spacing: 1px;
">
<p style="margin: 0; line-height: inherit">二氧化氮</p>
<p style="margin: 0; line-height: inherit">排放浓度</p>
</div>
<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
颗粒物浓度
</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.dust_float}}mg/</span>
</ShadowRect>
</div>
<KilnLine :horizontal="true" />
@@ -103,11 +95,11 @@
justify-content: space-between;
">
<SelectorBtnGroup
:options="['氧气含量', '二氧化硫', '一氧化氮', '二氧化氮']" />
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
:options="['氧气含量', '二氧化硫', '一氧化氮', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
</div>
<div class="chart" style="height: 250px;margin-top: 10px;">
<GasChart />
<FlueGas :chartType='chartType' :chartTime='chartTime'/>
</div>
</div>
</Container>
@@ -115,12 +107,12 @@
</template>
<script>
import Container from '../components/Container.vue';
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
import KilnLine from '../components/line';
import Switcher from '../components/Switcher';
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
import GasChart from '../components/GasChart.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
import FlueGas from '../components/FlueGas';
export default {
name: 'GasHandle',
@@ -130,14 +122,32 @@ export default {
KilnLine,
Switcher,
SelectorBtnGroup,
GasChart,
FlueGas,
},
props: {},
data() {
return {};
return {
chartType:'氧气含量',
chartTime:'日'
};
},
computed: {
exhaustGasInfo() {
return this.$store.state.websocket.exhaustGasInfo
}
},
methods: {
// 烟气
toggleType(val) {
console.log('烟气' + val)
this.chartType = val
},
// 切换时间
toggleDate(val) {
console.log('时间' + val)
this.chartTime = val
}
},
computed: {},
methods: {},
};
</script>