mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 2 Releases Wiki Activity

驾驶舱

Browse Source
This commit is contained in:
朱菊兰
2024-04-24 13:30:06 +08:00
parent 0fffed9b0e
commit 1d9e272f99
11 changed files with 674 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/views/databoard/kiln/GasHandle.vue
View File

@@ -1,7 +1,11 @@
<template>
<div class="gas-handle" style="flex: 2">
<Container name="烟气处理" size="large" style="">
<TimePrompt class="timeShow" :timestr="timestr" />
<div
class="gas-handle"
style="flex: 2">
<Container
name="烟气处理"
size="large"
style="">
<div
class=""
style="
@@ -24,7 +28,13 @@
">
氧气含量
</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (Number(exhaustGasInfo.O2_float)).toFixed(2) : ''}}%</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">
{{
exhaustGasInfo?.O2_float
? Number(exhaustGasInfo.O2_float).toFixed(2)
: ''
}}%
</span>
</ShadowRect>
<ShadowRect>
<div
@@ -33,13 +43,19 @@
line-height: 1.24;
flex: 1;
text-align: right;
padding:5px 8px 5px 0;
padding: 5px 8px 5px 0;
letter-spacing: 3px;
">
<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.2">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1.2">
{{
exhaustGasInfo?.NOX_float
? Number(exhaustGasInfo.NOX_float).toFixed(2)
: ''
}}mg/m³
</span>
</ShadowRect>
<ShadowRect>
@@ -49,13 +65,19 @@
line-height: 1.24;
flex: 1;
text-align: right;
padding:5px 8px 5px 0;
padding: 5px 8px 5px 0;
letter-spacing: 3px;
">
<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">{{exhaustGasInfo?.SO2_float ? (Number(exhaustGasInfo.SO2_float)).toFixed(2) : ''}}mg/m³</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">
{{
exhaustGasInfo?.SO2_float
? Number(exhaustGasInfo.SO2_float).toFixed(2)
: ''
}}mg/m³
</span>
</ShadowRect>
<ShadowRect>
@@ -70,17 +92,30 @@
">
颗粒物浓度
</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1.2">
{{
exhaustGasInfo?.dust_float
? Number(exhaustGasInfo.dust_float).toFixed(2)
: ''
}}mg/m³
</span>
</ShadowRect>
</div>
<KilnLine :horizontal="true" />
<div class="" style="flex: 2; padding: 8px">
<div
class=""
style="flex: 2; padding: 8px">
<div
class="header-line"
style="margin-bottom: 10px; display: flex; align-items: center">
<h2 class="" style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
<h2
class=""
style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
烟气趋势图
</h2>
<TimePrompt
class="timeShow"
:timestr="timestr" />
<!-- <Switcher /> -->
<div>
<!-- <span class="lgd lgd-total">总量</span> -->
@@ -96,11 +131,21 @@
justify-content: space-between;
">
<SelectorBtnGroup
:options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
:options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']"
@emitFun="toggleType"
:active="chartType" />
<SelectorBtnGroup
:options="['日', '周', '月', '年']"
@emitFun="toggleDate"
:active="chartTime" />
</div>
<div class="chart" style="height: 250px;margin-top: 10px;">
<FlueGasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
<div
class="chart"
style="height: 250px; margin-top: 10px">
<FlueGasChart
:chartType="chartType"
:chartTime="chartTime"
@emitFun="dateUpdate" />
</div>
</div>
</Container>
@@ -115,7 +160,7 @@ import KilnLine from '../components/line';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
import FlueGasChart from '../components/FlueGasChart';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
import { switchShowTime } from '../utils';
export default {
name: 'GasHandle',
@@ -125,49 +170,44 @@ export default {
KilnLine,
SelectorBtnGroup,
FlueGasChart,
TimePrompt
TimePrompt,
},
props: {},
data() {
return {
chartType:'氧气含量',
chartTime:'日',
timestr: ''
chartType: '氧气含量',
chartTime: '日',
timestr: '',
};
},
computed: {
exhaustGasInfo() {
return this.$store.state.websocket.exhaustGasInfo
}
return this.$store.state.websocket.exhaustGasInfo;
},
},
mounted() {
this.timestr = switchShowTime(this.chartTime)
},
this.timestr = switchShowTime(this.chartTime);
},
methods: {
// 烟气
toggleType(val) {
console.log('烟气' + val)
this.chartType = val
console.log('烟气' + val);
this.chartType = val;
},
// 切换时间
toggleDate(val) {
this.chartTime = val
this.timestr = switchShowTime(val)
this.chartTime = val;
this.timestr = switchShowTime(val);
},
// 数据更新
dateUpdate() {
this.timestr = switchShowTime(this.chartTime)
}
dateUpdate() {
this.timestr = switchShowTime(this.chartTime);
},
},
};
</script>
<style scoped lang="scss">
.timeShow {
position: absolute;
top: 20px;
left: 170px;
}
.gas-handle {
}