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

@@ -31,24 +31,24 @@
justify-content: space-between;
">
<SelectorBtnGroup
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType'/>
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate'/>
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
</div>
<div class="chart" style="height: 200px; margin-top: 8px;">
<GasChart />
<GasChart :chartType='chartType' :chartTime='chartTime'/>
</div>
</div>
</Container>
</template>
<script>
import Container from '../components/Container.vue';
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
import SplitLine from '../components/line';
import Switcher from '../components/Switcher';
import EnergeTop from './EnergeTop';
import GasChart from '../components/GasChart.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
export default {
name: 'EnergeCost',
components: {
@@ -62,17 +62,42 @@ export default {
},
props: {},
data() {
return {};
return {
chartType:'电耗能',
chartTime:'周'
};
},
computed: {
gasInfoMsg() {
return this.$store.state.websocket.gasInfo
},
},
computed: {},
methods: {
// 切换能源
toggleType() {
toggleType(val) {
console.log('能源' + val)
if (val === '天然气I' || val === '天然气II') {
if (this.chartTime === '周') {
this.chartType = val
} else {
this.$message.warning('暂无数据')
}
}else {
this.chartType = val
}
},
// 切换时间
toggleDate() {
toggleDate(val) {
console.log('时间' + val)
if (val === '月' || val === '年') {
if (this.chartType === '电耗能') {
this.chartTime = val
} else {
this.$message.warning('暂无数据')
}
}else{
this.chartTime = val
}
}
},
};

View File

@@ -23,8 +23,7 @@
style="
font-size: 16px;
line-height: 1.55;
text-align: right;
padding-right: 8px;
text-align: center;
letter-spacing: 1px;
">
余热发电
@@ -33,11 +32,10 @@
style="
font-size: 16px;
line-height: 1.55;
text-align: right;
padding-right: 8px;
text-align: center;
letter-spacing: 1px;
">
1023kWh
{{energyInfo.elecQty1}}kwh
</span>
</ShadowRect>
@@ -46,14 +44,14 @@
style="
font-size: 16px;
line-height: 1.25;
flex: 1.2;
flex: 1;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">水耗量</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">32K</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.waterQty}}</span>
</ShadowRect>
<ShadowRect>
@@ -61,14 +59,14 @@
style="
font-size: 16px;
line-height: 1.25;
flex: 1.2;
flex: 1;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">天然气I</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">322Km³</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas1Now}}</span>
</ShadowRect>
<ShadowRect>
@@ -76,14 +74,14 @@
style="
font-size: 16px;
line-height: 1.25;
flex: 1.2;
flex: 1;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">电耗量</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">132kWh</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.elecQty2}}kwh</span>
</ShadowRect>
<ShadowRect>
@@ -91,14 +89,14 @@
style="
font-size: 16px;
line-height: 1.25;
flex: 1.2;
flex: 1;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">天然气II</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">992Km³</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas2Now}}</span>
</ShadowRect>
</div>
</template>
@@ -113,7 +111,14 @@ export default {
data() {
return {};
},
computed: {},
computed: {
sumGasInfo(){
return this.$store.state.websocket.sumGasInfo
},
energyInfo() {
return this.$store.state.websocket.energyInfo
}
},
methods: {},
};
</script>

View File

@@ -7,13 +7,13 @@
<template>
<Container name="风机运行频率" size="middle" style="">
<div class="" style="position: absolute; top: 26px; left: 220px">
<!-- <div class="" style="position: absolute; top: 26px; left: 220px">
<Switcher />
</div>
</div> -->
<div
class="absolute"
style="
padding: 12px;
padding: 5px 12px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
@@ -23,7 +23,7 @@
<span
style="
font-size: 18px;
line-height: 1.1;
line-height: 1.15;
flex: 3.5;
text-align: right;
padding-right: 8px;
@@ -31,7 +31,7 @@
">
{{ key }}:
</span>
<span style="font-size: 20px; line-height: 1; flex: 1">
<span style="font-size: 20px; line-height: 1.15; flex: 1">
{{ value }}Hz
</span>
</ShadowRect>

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>

View File

@@ -33,7 +33,7 @@
</template>
<script>
import Container from '../components/Container.vue';
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
import ISRAChart from '../components/ISRAChart.vue';

View File

@@ -34,7 +34,7 @@
{{item.materialUsed}}
</span>
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
- {{item.materialName}} -
- {{item.materialName}}/kg-
</span>
</div>
</ShadowRect>
@@ -60,7 +60,7 @@
{{item.materialUsed}}
</span>
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
- {{item.materialName}} -
- {{item.materialName}}/kg-
</span>
</div>
</ShadowRect>
@@ -71,7 +71,7 @@
</template>
<script>
import Container from '../components/Container.vue';
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
export default {
name: 'MaterialCost',

View File

@@ -19,11 +19,11 @@
</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 SelectorBtnGroup from '../components/SelectorBtnGroup';
import KilnInfo from './KilnInfo.vue';
import GasHandle from './GasHandle.vue';
export default {

View File

@@ -1,10 +1,3 @@
<!--
filename: KilnDataBoard.vue
author: liubin
date: 2023-12-04 16:51:00
description:
-->
<template>
<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
<div
@@ -13,10 +6,10 @@
class="KilnDataBoard"
style="
position: absolute;
transform-origin: 16px 8px;
transform-origin: left top;
font-size: 16px;
top: -8px;
left: -16px;
top: 0px;
left: 0px;
width: 1920px;
height: 1080px;
display: flex;
@@ -45,15 +38,19 @@ import LeftFour from './LeftFour';
import RightTwo from './RightTwo.vue';
import screenfull from 'screenfull'
import { debounce } from '@/utils/debounce'
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
export default {
name: 'KilnDataBoard',
name: 'Kiln',
components: {
KHeader,
LeftFour,
RightTwo,
},
computed:{
sidebarStatus() {
return this.$store.state.app.sidebar.opened;
}
},
// provide() {
// return {
// resizeChart: null,
@@ -65,6 +62,11 @@ export default {
scaleNum: 0.8
};
},
watch: {
sidebarStatus() {
this.boxReset()
},
},
created() {
this.init()
},
@@ -79,14 +81,6 @@ export default {
window.addEventListener('resize', () => {
this.boxReset()
})
// this.getMes()
// closeWebsocket()
getDcsMsg()
// getMesMsg()
console.log('mounted...........')
},
destroyed() {
console.log('destroyed...........')
},
methods: {
change() {