add Energy&Header

This commit is contained in:
lb 2023-12-06 10:18:12 +08:00
parent 7cb88fab88
commit f5233001e7
6 changed files with 213 additions and 19 deletions

View File

@ -47,6 +47,10 @@ export default {
return require('../assets/move.png');
case '风机运行频率':
return require('../assets/flow.png');
case 'ISRA缺陷检测':
return require('../assets/gas.png');
case '能耗':
return require('../assets/gas.png');
}
},
},

View File

@ -54,11 +54,11 @@ button {
padding: 6px 8px;
}
.date-btn-group {
position: absolute;
top: 40px;
right: 100px;
border: 1px solid #ccc;
padding: 12px;
// position: absolute;
// top: 40px;
// right: 100px;
// border: 1px solid #ccc;
// padding: 12px;
display: flex;
align-items: center;
gap: 12px;

View File

@ -5,21 +5,71 @@
description: 顶部标题
-->
<template></template>
<template>
<header class="kiln-header">
<h1
style="
font-size: 32px;
margin-bottom: 36px;
color: #0ee8e4;
letter-spacing: 5px;
">
窑炉生产运行驾驶舱
</h1>
<!-- left: 312px; -->
<div
class="firm"
style="
position: absolute;
bottom: 24px;
left: 16.5vw;
color: #fff;
font-size: 16px;
letter-spacing: 1px;
">
单位: 河南汇融科技服务有限公司
</div>
<div
class="datetime"
style="
position: absolute;
bottom: 18px;
right: 15.5vw;
color: #fff;
font-size: 16px;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 16px;
">
<DateBtnGroup />
{{ new Date().toLocaleString() }}
</div>
</header>
</template>
<script>
import DateBtnGroup from './DateBtnGroup.vue';
export default {
name: "KilnHeader",
components: {},
props: {},
data() {
return {}
},
computed: {},
methods: {},
}
name: 'KilnHeader',
components: { DateBtnGroup },
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.kiln-header {
background: url('../assets/head.png') no-repeat;
height: 88px;
background-size: 100%;
background-position: 0 0;
display: grid;
place-content: center;
position: relative;
}
</style>

View File

@ -0,0 +1,58 @@
<!--
filename: MaterialCost.vue
author: liubin
date: 2023-12-06 09:09:27
description:
-->
<template>
<Container name="能耗" size="middle" style="">
<div
class="absolute"
style="
padding: 12px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
gap: 8px;
">
<ShadowRect v-for="n in 9" :key="n" :rounded="false">
<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>
</Container>
</template>
<script>
import Container from '../components/Container.vue';
import ShadowRect from '../components/ShadowRect.vue';
export default {
name: 'MaterialCost',
components: { Container, ShadowRect },
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss"></style>

View File

@ -0,0 +1,80 @@
<!--
filename: IsraCheck.vue
author: liubin
date: 2023-12-06 09:50:13
description:
-->
<template>
<Container name="ISRA缺陷检测" size="middle" style="">
<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px">
<div class="f" style="flex: 9"></div>
<ul
class="legend"
style="
flex: 1;
padding: 8px;
display: flex;
justify-content: center;
gap: 20px;
color: #fff;
font-size: 14px;
">
<li class="fault-1">缺陷1</li>
<li class="fault-2">缺陷2</li>
<li class="fault-3">缺陷3</li>
<li class="fault-4">缺陷4</li>
</ul>
</div>
</Container>
</template>
<script>
import Container from '../components/Container.vue';
import ShadowRect from '../components/ShadowRect.vue';
export default {
name: 'IsraCheck',
components: { Container, ShadowRect },
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
ul,
li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
li::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
position: absolute;
top: 30%;
left: -12px;
}
li.fault-1::before {
background: #2760ff;
}
li.fault-2::before {
background: #518eec;
}
li.fault-3::before {
background: #0ee8e4;
}
li.fault-4::before {
background: #ddb523;
}
</style>

View File

@ -15,8 +15,8 @@
grid-template-rows: 1fr 1fr;
">
<MaterialCost />
<MaterialCost />
<MaterialCost />
<IsraCheck />
<EnergeCost />
<FanSequence />
</div>
</template>
@ -24,9 +24,11 @@
<script>
import MaterialCost from './MaterialCost.vue';
import FanSequence from './FanSequence.vue';
import IsraCheck from './IsraCheck.vue';
import EnergeCost from './EnergeCost.vue';
export default {
name: 'LeftFour',
components: { MaterialCost, FanSequence },
components: { MaterialCost, EnergeCost, IsraCheck, FanSequence },
props: {},
data() {
return {};