yudao-dev/src/views/databoard/kiln/index.vue

<!-- 
    filename: KilnDataBoard.vue
    author: liubin
    date: 2023-12-04 16:51:00
    description: 
-->

<template>
	<div
		class="KilnDataBoard"
		style="
			position: absolute;
			top: -8px;
			left: -16px;
			width: calc(100% + 28px);
			height: calc(100% + 38px);
			background: #073f4a;
			display: flex;
			flex-direction: column;
			gap: 16px;
		">
		<!-- 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: 56px;
				gap: 8px;
			">
			<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  -->
		<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
		<section
			class="main-body"
			style="
				display: grid;
				gap: 16px;
				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>
</template>

<script>
import DateBtnGroup from '../components/DateBtnGroup.vue';
import ShadowRect from '../components/ShadowRect.vue';
export default {
	name: 'KilnDataBoard',
	components: { DateBtnGroup, ShadowRect },
	props: {},
	data() {
		return {};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss">
.KilnDataBoard {
}
</style>