mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 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

75
src/views/databoard/kiln/EnergeCost.vue
View File

@@ -1,22 +1,24 @@
<!--
filename: MaterialCost.vue
author: liubin
date: 2023-12-06 09:09:27
description:
-->
<template>
<Container name="能耗" size="middle" style="">
<TimePrompt class="timeShow" :timestr="timestr" />
<Container
name="能耗"
size="middle"
style="">
<EnergeTop />
<SplitLine :horizontal="true" />
<div class="" style="flex: 2; padding: 8px">
<div
class=""
style="flex: 2; padding: 8px">
<div
class="header-line"
style="margin: 8px 0 16px; display: flex; align-items: center">
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
<h2
class=""
style="margin: 0; color: #0ee8fe; margin-right: 12px">
能耗趋势图
</h2>
<TimePrompt
class="timeShow"
:timestr="timestr" />
<!-- <Switcher /> -->
<div>
<!-- <span class="lgd lgd-total">总量</span> -->
@@ -32,11 +34,21 @@
justify-content: space-between;
">
<SelectorBtnGroup
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
:options="['电耗能', '天然气I', '天然气II']"
@emitFun="toggleType"
:active="chartType" />
<SelectorBtnGroup
:options="['周', '月', '年']"
@emitFun="toggleDate"
:active="chartTime" />
</div>
<div class="chart" style="height: 200px; margin-top: 8px;">
<GasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
<div
class="chart"
style="height: 200px; margin-top: 8px">
<GasChart
:chartType="chartType"
:chartTime="chartTime"
@emitFun="dateUpdate" />
</div>
</div>
</Container>
@@ -51,7 +63,7 @@ import EnergeTop from './EnergeTop';
import GasChart from '../components/GasChart.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
import { switchShowTime } from '../utils';
export default {
name: 'EnergeCost',
components: {
@@ -61,48 +73,43 @@ export default {
EnergeTop,
GasChart,
SelectorBtnGroup,
TimePrompt
TimePrompt,
},
props: {},
data() {
return {
chartType:'电耗能',
chartTime:'周',
timestr: ''
chartType: '电耗能',
chartTime: '周',
timestr: '',
};
},
mounted() {
this.timestr = switchShowTime(this.chartTime)
},
this.timestr = switchShowTime(this.chartTime);
},
computed: {
gasInfoMsg() {
return this.$store.state.websocket.gasInfo
return this.$store.state.websocket.gasInfo;
},
},
methods: {
// 切换能源
toggleType(val) {
this.chartType = 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: 120px;
}
.lgd {
color: #fff;

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 {
}

29
src/views/databoard/kiln/MaterialCost.vue
View File

@@ -3,6 +3,9 @@
name="原料用量统计"
size="middle"
style="">
<TimePrompt
class="timeShow"
:timestr="timestr" />
<div style="flex: 1; display: flex; gap: 8px; flex-direction: column">
<div
class="absolute"
@@ -10,8 +13,8 @@
flex: 2;
padding: 12px 12px 0 12px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: repeat(3, 1fr);
gap: 8px;
">
<ShadowRect
@@ -22,7 +25,8 @@
class="material"
style="
flex: 1;
padding-bottom: 3px;
padding-bottom: 18px;
padding-top: 18px;
display: flex;
flex-direction: column;
gap: 4px;
@@ -53,20 +57,33 @@
<script>
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils';
export default {
name: 'MaterialCost',
components: { Container, ShadowRect },
components: { Container, ShadowRect, TimePrompt },
props: {},
data() {
return {};
return {
timestr: '',
};
},
computed: {
materialMsg() {
return this.$store.state.websocket.material;
},
},
mounted() {
this.timestr = switchShowTime('日');
},
methods: {},
};
</script>
<style scoped lang="scss"></style>
<style lang="scss" scoped>
.timeShow {
position: absolute;
top: 20px;
left: 210px;
}
</style>