This commit is contained in:
2023-12-29 09:26:07 +08:00
parent 9690ab4f70
commit 35bcb23920
23 changed files with 809 additions and 282 deletions

View File

@@ -7,36 +7,66 @@
<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: 12px 6px 20px;
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: 16px; letter-spacing: 1px">
- 原料1/ -
</span>
</div>
</ShadowRect>
<div style="flex: 1; display: flex; gap: 8px;flex-direction: column;">
<div
class="absolute"
style="
flex:3;
padding: 12px 12px 0 12px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: repeat(4, 1fr);
gap: 8px;
">
<ShadowRect v-for="(item, index) in materialMsg1" :key="index" :rounded="false">
<div
class="material"
style="
flex: 1;
padding-bottom: 3px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
">
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
{{item.materialUsed}}
</span>
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
- {{item.materialName}} -
</span>
</div>
</ShadowRect>
</div>
<div style="flex:1;
padding: 0 12px 12px 12px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;">
<ShadowRect v-for="(item, index) in materialMsg2" :key="index" :rounded="false">
<div
class="material"
style="
flex: 1;
padding-bottom: 3px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
">
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
{{item.materialUsed}}
</span>
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
- {{item.materialName}} -
</span>
</div>
</ShadowRect>
</div>
</div>
</Container>
</template>
@@ -50,7 +80,14 @@ export default {
data() {
return {};
},
computed: {},
computed: {
materialMsg1() {
return this.$store.state.websocket.material.slice(0,9)
},
materialMsg2() {
return this.$store.state.websocket.material.slice(9)
}
},
methods: {},
};
</script>