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

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

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