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>

		<!-- btn group  -->
		<div
			class="absolute"
			style="
				position: absolute;
				top: 10px;
				left: 60px;
				padding: 12px;
				background: #0003;
				border: 1px solid #ccc;
			">
			<SelectorBtnGroup :options="['日', '周', '月', '年']" />
		</div>
		<div
			class="absolute"
			style="
				position: absolute;
				top: 90px;
				left: 60px;
				padding: 12px;
				background: #0003;
				border: 1px solid #ccc;
			">
			<SelectorBtnGroup
				:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
		</div>

		<!-- switcher  -->
		<div
			class="absolute"
			style="
				position: absolute;
				top: 10px;
				right: 10px;
				padding: 12px;
				background: #0003;
				border: 1px solid #ccc;
			">
			<Switcher />
		</div>

		<!-- container  -->
		<Container name="能耗" :width="300">
			<div
				class="v"
				style="height: 100px; background: #ccc; width: 300px"></div>
			<KilnLine :horizontal="true" />
			<div
				class="v"
				style="height: 100px; background: #caf; width: 300px"></div>
		</Container>

		<!-- 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';
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
import Switcher from '../components/Switcher.vue';
import KilnLine from '../components/line';
import Container from '../components/Container.vue';

console.log('Line', KilnLine)

export default {
	name: 'KilnDataBoard',
	components: {
		DateBtnGroup,
		KilnLine,
		Container,
		ShadowRect,
		SelectorBtnGroup,
		Switcher,
	},
	props: {},
	data() {
		return {};
	},
	computed: {},
	methods: {},
};
</script>

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