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

<!-- 
    filename: RightTwo.vue
    author: liubin
    date: 2023-12-06 10:19:00
    description: 
-->

<template>
	<div
		class="right-two"
		style="display: flex; gap: 16px; flex-direction: column">
		<div class="kiln-info" style="flex: 1">
			<Container name="窑炉信息" size="small" style="">
				<div
					class="absolute"
					style="
						padding: 12px;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						grid-auto-rows: auto;
						gap: 8px;
					">
					<ShadowRect v-for="n in 8" :key="n" :rounded="false">
						<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>
			</Container>
		</div>
		<div class="gas-handle" style="flex: 2">
			<Container name="烟气处理" size="large" style="">
				<div
					class=""
					style="
						flex: 1;
						display: grid;
						grid-template-columns: 1fr 1fr;
						grid-template-rows: auto;
						gap: 8px;
						padding: 8px;
					">
					<ShadowRect>
						<span
							style="
								font-size: 16px;
								line-height: 1.24;
								flex: 1.2;
								text-align: right;
								padding-right: 8px;
								letter-spacing: 1px;
							">
							氧气含量
						</span>
						<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
					</ShadowRect>
					<ShadowRect>
						<div
							style="
								font-size: 16px;
								line-height: 1.5;
								flex: 1.2;
								text-align: right;
								padding-right: 8px;
								letter-spacing: 3px;
							">
							<p style="margin: 0; line-height: inherit">一氧化氮</p>
							<p style="margin: 0; line-height: inherit">排放浓度</p>
						</div>
						<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
					</ShadowRect>

					<ShadowRect>
						<div
							style="
								font-size: 16px;
								line-height: 1.5;
								flex: 1.2;
								text-align: right;
								padding-right: 8px;
								letter-spacing: 3px;
							">
							<p style="margin: 0; line-height: inherit">二氧化硫</p>
							<p style="margin: 0; line-height: inherit">排放浓度</p>
						</div>
						<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
					</ShadowRect>

					<ShadowRect>
						<div
							style="
								font-size: 16px;
								line-height: 1.5;
								flex: 1.2;
								text-align: right;
								padding-right: 8px;
								letter-spacing: 3px;
							">
							<p style="margin: 0; line-height: inherit">二氧化氮</p>
							<p style="margin: 0; line-height: inherit">排放浓度</p>
						</div>
						<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
					</ShadowRect>
				</div>
				<KilnLine :horizontal="true" />
				<div class="" style="flex: 2; padding: 8px">
					<div class="header-line" style="margin-bottom: 8px; display: flex; align-items: center">
						<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px;">烟气趋势图</h2>
						<Switcher />
					</div>
					<div
						class="select-line"
						style="
							display: flex;
							align-items: center;
							justify-content: space-between;
						">
						<SelectorBtnGroup
							:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
						<SelectorBtnGroup :options="['日', '周', '月', '年']" />
					</div>
					<div class="chart" style="height: 220px"></div>
				</div>
			</Container>
		</div>
	</div>
</template>

<script>
import Container from '../components/Container.vue';
import ShadowRect from '../components/ShadowRect.vue';
import KilnLine from '../components/line';
import Switcher from '../components/Switcher.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
export default {
	name: 'RightTwo',
	components: { Container, Switcher, SelectorBtnGroup, KilnLine, ShadowRect },
	props: {},
	data() {
		return {};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss"></style>