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

update

Browse Source
This commit is contained in:
lb 2023-12-05 15:24:20 +08:00
parent 4069e71477
commit 86bdabf358
2 changed files with 85 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/databoard/components/ShadowRect.vue
View File

@ -6,9 +6,11 @@
-->
<template>
<div class="shadow-rect">
<div class="shadow-rect" :style="{ borderRadius: rounded ? '8px' : '2px' }">
<slot>
<div class="test-data" style="flex: 1; display: flex; align-items: center">
<div
class="test-data"
style="flex: 1; display: flex; align-items: center">
<span
style="
flex: 7;
@ -41,10 +43,17 @@
export default {
name: '',
components: {},
props: {},
props: ['rounded'],
data() {
return {};
},
watch: {
rounded(val) {
if (val) {
console.log('val', val);
}
},
},
computed: {},
methods: {},
};
@ -56,7 +65,7 @@ export default {
border-radius: 2px;
box-shadow: inset 0 0 10px 2px #ccc9;
color: white;
display: flex;
align-items: center;
display: flex;
align-items: center;
}
</style>

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

@ -21,6 +21,8 @@
">
<!-- test area -->
<DateBtnGroup />
<!-- 风机频率 -->
<div
class="absolute"
style="
@ -32,10 +34,77 @@
border: 1px solid #ccc;
display: grid;
grid-template-columns: repeat(2, 320px);
grid-auto-rows: 60px;
grid-auto-rows: 56px;
gap: 8px;
">
<ShadowRect v-for="n in 8" :key="n"></ShadowRect>
<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">
<!-- without slot -->
</ShadowRect>
</div>
<!-- 原料用量统计 -->
<div
class="absolute"
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;
">
<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>
<!-- null -->