驾驶舱

src/views/databoard/kiln/MaterialCost.vue

@@ -3,6 +3,9 @@
 		name="原料用量统计"
 		size="middle"
 		style="">
+		<TimePrompt
+			class="timeShow"
+			:timestr="timestr" />
 		<div style="flex: 1; display: flex; gap: 8px; flex-direction: column">
 			<div
 				class="absolute"
@@ -10,8 +13,8 @@
 					flex: 2;
 					padding: 12px 12px 0 12px;
 					display: grid;
-					grid-template-columns: repeat(2, 1fr);
-					grid-auto-rows: repeat(4, 1fr);
+					grid-template-columns: repeat(3, 1fr);
+					grid-auto-rows: repeat(3, 1fr);
 					gap: 8px;
 				">
 				<ShadowRect
@@ -22,7 +25,8 @@
 						class="material"
 						style="
 							flex: 1;
-							padding-bottom: 3px;
+							padding-bottom: 18px;
+							padding-top: 18px;
 							display: flex;
 							flex-direction: column;
 							gap: 4px;
@@ -53,20 +57,33 @@
 <script>
 import Container from '../components/Container';
 import ShadowRect from '../components/ShadowRect.vue';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils';
 export default {
 	name: 'MaterialCost',
-	components: { Container, ShadowRect },
+	components: { Container, ShadowRect, TimePrompt },
 	props: {},
 	data() {
-		return {};
+		return {
+			timestr: '',
+		};
 	},
 	computed: {
 		materialMsg() {
 			return this.$store.state.websocket.material;
 		},
 	},
+	mounted() {
+		this.timestr = switchShowTime('日');
+	},
 	methods: {},
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped>
+.timeShow {
+	position: absolute;
+	top: 20px;
+	left: 210px;
+}
+</style>