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);
			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"> 
			</ShadowRect>
		</div> -->

		<!-- 原料用量统计 -->
		<!-- <div
			style="
				position: absolute;
				top: 10px;
				left: 10px;
				margin: 10px;
				width: 400px;
			">
			<MaterialCost />
		</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> -->
		<KHeader />
		<div class="main-body" style="flex: 1; display: flex; gap: 16px">
			<div class="left-side" style="flex: 2">
				<LeftFour />
			</div>
			<div class="right-side" style="flex: 1;"></div>
		</div>
	</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';
import KHeader from '../components/Header.vue';

import MaterialCost from './MaterialCost.vue';
import LeftFour from './LeftFour.vue';

console.log('Line', KilnLine);

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

<style scoped lang="scss">
.KilnDataBoard {
	background: url(../assets/bg.png) no-repeat;
	background-size: cover;
	background-position: 0 0;
}
</style>