mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update kiln databoard

Browse Source
This commit is contained in:
lb 2023-12-05 15:08:07 +08:00
parent 6c661bedd3
commit 4069e71477
7 changed files with 287 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/databoard/components/Container.vue Normal file
View File

@ -0,0 +1,29 @@
<!--
filename: Container.vue
author: liubin
date: 2023-12-05 14:29:53
description: 窑炉容器
-->
<template>
<div class="kiln-container">
box
</div>
</template>
<script>
export default {
name: "KilnContainer",
components: {},
props: {},
data() {
return {}
},
computed: {},
methods: {},
}
</script>
<style scoped lang="scss">
.kiln-container {}
</style>

84
src/views/databoard/components/DateBtnGroup.vue Normal file
View File

@ -0,0 +1,84 @@
<!--
filename: DateBtnGroup.vue
author: liubin
date: 2023-12-05 14:35:14
description: 日期按钮组
-->
<template>
<div class="date-btn-group">
<button
class="btn"
:class="{ 'btn-active': active == '日' }"
@click="handleClick('日')">
日
</button>
<button
class="btn"
:class="{ 'btn-active': active == '周' }"
@click="handleClick('周')">
周
</button>
<button
class="btn"
:class="{ 'btn-active': active == '月' }"
@click="handleClick('月')">
月
</button>
</div>
</template>
<script>
export default {
name: 'DateBtnGroup',
data() {
return {
active: '日',
};
},
methods: {
handleClick(v) {
this.active = v;
this.$emit('change', v);
},
},
};
</script>
<style scoped lang="scss">
button {
appearance: none;
border: none;
outline: none;
background: none;
padding: 6px 8px;
}
.date-btn-group {
position: absolute;
top: 40px;
right: 100px;
border: 1px solid #ccc;
padding: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.btn {
cursor: pointer;
border: 1px solid #11e8e4;
border-radius: 4px;
color: #11e8e4;
transition: all 0.3s ease-in-out;
&:hover {
background: #11e8e4;
color: #013433;
}
}
.btn-active {
background: #11e8e4;
color: #013433;
}
</style>

25
src/views/databoard/components/Header.vue Normal file
View File

@ -0,0 +1,25 @@
<!--
filename: Header.vue
author: liubin
date: 2023-12-05 14:30:46
description: 顶部标题
-->
<template></template>
<script>
export default {
name: "KilnHeader",
components: {},
props: {},
data() {
return {}
},
computed: {},
methods: {},
}
</script>
<style scoped lang="scss">
</style>

28
src/views/databoard/components/SelectorBtnGroup.vue Normal file
View File

@ -0,0 +1,28 @@
<!--
filename: SelectorBtnGroup.vue
author: liubin
date: 2023-12-05 14:28:24
description: 选项按钮组
-->
<template>
<div class="selectorBtnGroup"></div>
</template>
<script>
export default {
name: 'SelectorBtnGroup',
components: {},
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.selectorBtnGroup {
}
</style>

62
src/views/databoard/components/ShadowRect.vue Normal file
View File

@ -0,0 +1,62 @@
<!--
filename: ShadowRect.vue
author: liubin
date: 2023-12-05 14:28:57
description: 阴影矩形
-->
<template>
<div class="shadow-rect">
<slot>
<div class="test-data" style="flex: 1; display: flex; align-items: center">
<span
style="
flex: 7;
color: #fff;
text-align: right;
font-size: 18px;
line-height: 1.12;
letter-spacing: 1px;
padding-right: 12px;
">
窑炉压力碹顶加权
</span>
<span
style="
flex: 3;
color: #fff;
text-align: left;
font-size: 18px;
line-height: 1.12;
padding-right: 8px;
">
92Kpa
</span>
</div>
</slot>
</div>
</template>
<script>
export default {
name: '',
components: {},
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.shadow-rect {
padding: 8px;
border-radius: 2px;
box-shadow: inset 0 0 10px 2px #ccc9;
color: white;
display: flex;
align-items: center;
}
</style>

29
src/views/databoard/components/Switcher.vue Normal file
View File

@ -0,0 +1,29 @@
<!--
filename: Switcher.vue
author: liubin
date: 2023-12-05 14:29:29
description: 开关
-->
<template>
<div class="switcher">
1/2
</div>
</template>
<script>
export default {
name: "Switcher",
components: {},
props: {},
data() {
return {}
},
computed: {},
methods: {},
}
</script>
<style scoped lang="scss">
.switcher {}
</style>

39
src/views/databoard/kiln/index.vue
View File

@ -14,31 +14,53 @@
left: -16px;
width: calc(100% + 28px);
height: calc(100% + 38px);
background: #ccc;
background: #073f4a;
display: flex;
flex-direction: column;
gap: 16px;
">
<section class="header" style="height: 80px;">窑炉生产运行驾驶舱</section>
<!-- 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: 60px;
gap: 8px;
">
<ShadowRect v-for="n in 8" :key="n"></ShadowRect>
</div>
<!-- null -->
<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
<section
class="main-body"
style="
display: grid;
gap: 16px;
flex: 1;
flex: 1;
grid-template-columns: repeat(3, minmax(100px, 1fr));
">
<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>
<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>
</div>
</template>
<script>
import DateBtnGroup from '../components/DateBtnGroup.vue';
import ShadowRect from '../components/ShadowRect.vue';
export default {
name: 'KilnDataBoard',
components: {},
components: { DateBtnGroup, ShadowRect },
props: {},
data() {
return {};
@ -50,6 +72,5 @@ export default {
<style scoped lang="scss">
.KilnDataBoard {
color: red;
}
</style>