窑炉
This commit is contained in:
@@ -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
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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">32Km³</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.waterQty}}m³</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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/m³</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/m³</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.SO2_float}}mg/m³</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/m³</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>
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user