add 烟气处理

This commit is contained in:
lb 2023-12-06 10:38:56 +08:00
parent f5233001e7
commit cc0d3d8b75
3 changed files with 168 additions and 68 deletions

View File

@ -51,6 +51,10 @@ export default {
return require('../assets/gas.png');
case '能耗':
return require('../assets/gas.png');
case '窑炉信息':
return require('../assets/gas.png');
case '烟气处理':
return require('../assets/gas.png');
}
},
},

View File

@ -0,0 +1,158 @@
<!--
filename: RightTwo.vue
author: liubin
date: 2023-12-06 10:19:00
description:
-->
<template>
<div
class="right-two"
style="display: flex; gap: 16px; flex-direction: column">
<div class="kiln-info" style="flex: 1">
<Container name="窑炉信息" size="small" style="">
<div
class="absolute"
style="
padding: 12px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
gap: 8px;
">
<ShadowRect v-for="n in 8" :key="n" :rounded="false">
<span
style="
font-size: 16px;
line-height: 1.24;
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 1px;
">
{{ n }}#风机
</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">
{{ Math.floor(Math.random() * 100) }}Hz
</span>
</ShadowRect>
</div>
</Container>
</div>
<div class="gas-handle" style="flex: 2">
<Container name="烟气处理" size="large" style="">
<div
class=""
style="
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 8px;
padding: 8px;
">
<ShadowRect>
<span
style="
font-size: 16px;
line-height: 1.24;
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 1px;
">
氧气含量
</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
</ShadowRect>
<ShadowRect>
<div
style="
font-size: 16px;
line-height: 1.5;
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">一氧化氮</p>
<p style="margin: 0; line-height: inherit">排放浓度</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
</ShadowRect>
<ShadowRect>
<div
style="
font-size: 16px;
line-height: 1.5;
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">二氧化硫</p>
<p style="margin: 0; line-height: inherit">排放浓度</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
</ShadowRect>
<ShadowRect>
<div
style="
font-size: 16px;
line-height: 1.5;
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">二氧化氮</p>
<p style="margin: 0; line-height: inherit">排放浓度</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
</ShadowRect>
</div>
<KilnLine :horizontal="true" />
<div class="" style="flex: 2; padding: 8px">
<div class="header-line" style="margin-bottom: 8px; display: flex; align-items: center">
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px;">烟气趋势图</h2>
<Switcher />
</div>
<div
class="select-line"
style="
display: flex;
align-items: center;
justify-content: space-between;
">
<SelectorBtnGroup
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
</div>
<div class="chart" style="height: 220px"></div>
</div>
</Container>
</div>
</div>
</template>
<script>
import Container from '../components/Container.vue';
import ShadowRect from '../components/ShadowRect.vue';
import KilnLine from '../components/line';
import Switcher from '../components/Switcher.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
export default {
name: 'RightTwo',
components: { Container, Switcher, SelectorBtnGroup, KilnLine, ShadowRect },
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss"></style>

View File

@ -18,72 +18,6 @@
flex-direction: column;
gap: 16px;
">
<!-- test area -->
<!-- <DateBtnGroup /> -->
<!-- 风机频率 -->
<!-- <div
class="absolute"
style="
position: absolute;
top: 120px;
right: 100px;
padding: 12px;
background: #0003;
border: 1px solid #ccc;
display: grid;
grid-template-columns: repeat(2, 320px);
grid-auto-rows: 56px;
gap: 8px;
">
<ShadowRect v-for="n in 8" :key="n">
<span
style="
font-size: 16px;
line-height: 1.24;
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 1px;
">
{{ n }}#风机
</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">
{{ Math.floor(Math.random() * 100) }}Hz
</span>
</ShadowRect>
</div> -->
<!-- 窑炉信息 -->
<!-- <div
class="absolute"
style="
position: absolute;
top: 450px;
right: 100px;
padding: 12px;
background: #0003;
border: 1px solid #ccc;
display: grid;
grid-template-columns: repeat(2, 320px);
grid-auto-rows: 56px;
gap: 8px;
">
<ShadowRect v-for="n in 8" :key="n">
</ShadowRect>
</div> -->
<!-- 原料用量统计 -->
<!-- <div
style="
position: absolute;
top: 10px;
left: 10px;
margin: 10px;
width: 400px;
">
<MaterialCost />
</div> -->
<!-- btn group -->
<!-- <div
class="absolute"
@ -151,11 +85,13 @@
<div class="main-right" style="background: #00f1"></div>
</section> -->
<KHeader />
<div class="main-body" style="flex: 1; display: flex; gap: 16px">
<div class="main-body" style="flex: 1; display: flex; gap: 16px; padding: 8px 16px;">
<div class="left-side" style="flex: 2">
<LeftFour />
</div>
<div class="right-side" style="flex: 1;"></div>
<div class="right-side" style="flex: 1">
<RightTwo />
</div>
</div>
</div>
</template>
@ -171,6 +107,7 @@ import KHeader from '../components/Header.vue';
import MaterialCost from './MaterialCost.vue';
import LeftFour from './LeftFour.vue';
import RightTwo from './RightTwo.vue';
console.log('Line', KilnLine);
@ -181,6 +118,7 @@ export default {
KilnLine,
KHeader,
LeftFour,
RightTwo,
Container,
ShadowRect,
SelectorBtnGroup,