|
|
|
@@ -14,16 +14,15 @@ |
|
|
|
left: -16px; |
|
|
|
width: calc(100% + 28px); |
|
|
|
height: calc(100% + 38px); |
|
|
|
background: #073f4a; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 16px; |
|
|
|
"> |
|
|
|
<!-- test area --> |
|
|
|
<DateBtnGroup /> |
|
|
|
<!-- <DateBtnGroup /> --> |
|
|
|
|
|
|
|
<!-- 风机频率 --> |
|
|
|
<div |
|
|
|
<!-- <div |
|
|
|
class="absolute" |
|
|
|
style=" |
|
|
|
position: absolute; |
|
|
|
@@ -53,9 +52,9 @@ |
|
|
|
{{ Math.floor(Math.random() * 100) }}Hz |
|
|
|
</span> |
|
|
|
</ShadowRect> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<!-- 窑炉信息 --> |
|
|
|
<div |
|
|
|
<!-- <div |
|
|
|
class="absolute" |
|
|
|
style=" |
|
|
|
position: absolute; |
|
|
|
@@ -69,50 +68,24 @@ |
|
|
|
grid-auto-rows: 56px; |
|
|
|
gap: 8px; |
|
|
|
"> |
|
|
|
<ShadowRect v-for="n in 8" :key="n"> |
|
|
|
<!-- without slot --> |
|
|
|
<ShadowRect v-for="n in 8" :key="n"> |
|
|
|
</ShadowRect> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<!-- 原料用量统计 --> |
|
|
|
<div |
|
|
|
class="absolute" |
|
|
|
<!-- <div |
|
|
|
style=" |
|
|
|
position: absolute; |
|
|
|
top: 120px; |
|
|
|
left: 60px; |
|
|
|
padding: 12px; |
|
|
|
background: #0003; |
|
|
|
border: 1px solid #ccc; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(3, 144px); |
|
|
|
grid-auto-rows: auto; |
|
|
|
gap: 8px; |
|
|
|
top: 10px; |
|
|
|
left: 10px; |
|
|
|
margin: 10px; |
|
|
|
width: 400px; |
|
|
|
"> |
|
|
|
<ShadowRect v-for="n in 9" :key="n" :rounded="true"> |
|
|
|
<div |
|
|
|
class="material" |
|
|
|
style=" |
|
|
|
flex: 1; |
|
|
|
padding: 6px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 4px; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
"> |
|
|
|
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px"> |
|
|
|
234 |
|
|
|
</span> |
|
|
|
<span style="color: #fff; font-size: 14px; letter-spacing: 1px"> |
|
|
|
- 原料1/吨 - |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</ShadowRect> |
|
|
|
</div> |
|
|
|
<MaterialCost /> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<!-- btn group --> |
|
|
|
<div |
|
|
|
<!-- <div |
|
|
|
class="absolute" |
|
|
|
style=" |
|
|
|
position: absolute; |
|
|
|
@@ -136,10 +109,10 @@ |
|
|
|
"> |
|
|
|
<SelectorBtnGroup |
|
|
|
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" /> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<!-- switcher --> |
|
|
|
<div |
|
|
|
<!-- <div |
|
|
|
class="absolute" |
|
|
|
style=" |
|
|
|
position: absolute; |
|
|
|
@@ -150,10 +123,10 @@ |
|
|
|
border: 1px solid #ccc; |
|
|
|
"> |
|
|
|
<Switcher /> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<!-- container --> |
|
|
|
<Container name="能耗" :width="300"> |
|
|
|
<!-- <Container name="能耗" :width="300"> |
|
|
|
<div |
|
|
|
class="v" |
|
|
|
style="height: 100px; background: #ccc; width: 300px"></div> |
|
|
|
@@ -161,10 +134,10 @@ |
|
|
|
<div |
|
|
|
class="v" |
|
|
|
style="height: 100px; background: #caf; width: 300px"></div> |
|
|
|
</Container> |
|
|
|
</Container> --> |
|
|
|
|
|
|
|
<!-- null --> |
|
|
|
<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section> |
|
|
|
<!-- <section class="header" style="height: 80px">窑炉生产运行驾驶舱</section> |
|
|
|
<section |
|
|
|
class="main-body" |
|
|
|
style=" |
|
|
|
@@ -176,7 +149,14 @@ |
|
|
|
<div class="main-left" style="background: #f001"></div> |
|
|
|
<div class="main-middle" style="background: #0f01"></div> |
|
|
|
<div class="main-right" style="background: #00f1"></div> |
|
|
|
</section> |
|
|
|
</section> --> |
|
|
|
<KHeader /> |
|
|
|
<div class="main-body" style="flex: 1; display: flex; gap: 16px"> |
|
|
|
<div class="left-side" style="flex: 2"> |
|
|
|
<LeftFour /> |
|
|
|
</div> |
|
|
|
<div class="right-side" style="flex: 1;"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@@ -187,18 +167,25 @@ import SelectorBtnGroup from '../components/SelectorBtnGroup.vue'; |
|
|
|
import Switcher from '../components/Switcher.vue'; |
|
|
|
import KilnLine from '../components/line'; |
|
|
|
import Container from '../components/Container.vue'; |
|
|
|
import KHeader from '../components/Header.vue'; |
|
|
|
|
|
|
|
import MaterialCost from './MaterialCost.vue'; |
|
|
|
import LeftFour from './LeftFour.vue'; |
|
|
|
|
|
|
|
console.log('Line', KilnLine) |
|
|
|
console.log('Line', KilnLine); |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'KilnDataBoard', |
|
|
|
components: { |
|
|
|
DateBtnGroup, |
|
|
|
KilnLine, |
|
|
|
KHeader, |
|
|
|
LeftFour, |
|
|
|
Container, |
|
|
|
ShadowRect, |
|
|
|
SelectorBtnGroup, |
|
|
|
Switcher, |
|
|
|
MaterialCost, |
|
|
|
}, |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
@@ -211,5 +198,8 @@ export default { |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.KilnDataBoard { |
|
|
|
background: url(../assets/bg.png) no-repeat; |
|
|
|
background-size: cover; |
|
|
|
background-position: 0 0; |
|
|
|
} |
|
|
|
</style> |
