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

<template>
	<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: 20px;
							line-height: 1.24;
							flex: 1.2;
							text-align: right;
							padding-right: 8px;
							letter-spacing: 3px;
						">
						氧气含量
					</span>
					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (exhaustGasInfo?.O2_float).toFixed(2): ''}}%</span>
				</ShadowRect>
				<ShadowRect>
					<div
						style="
							font-size: 20px;
							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: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (exhaustGasInfo?.NOX_float).toFixed(2):''}}mg/m³</span>
				</ShadowRect>

				<ShadowRect>
					<div
						style="
							font-size: 20px;
							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: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (exhaustGasInfo?.SO2_float).toFixed(2): ''}}mg/m³</span>
				</ShadowRect>

				<ShadowRect>
					<span
						style="
							font-size: 20px;
							line-height: 1.24;
							flex: 1.2;
							text-align: right;
							padding-right: 8px;
							letter-spacing: 1px;
						">
						颗粒物浓度
					</span>
					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (exhaustGasInfo?.dust_float).toFixed(2) : ''}}mg/m³</span>
				</ShadowRect>
			</div>
			<KilnLine :horizontal="true" />
			<div class="" style="flex: 2; padding: 8px">
				<div
					class="header-line"
					style="margin-bottom: 10px; display: flex; align-items: center">
					<h2 class="" style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
						烟气趋势图
					</h2>
					<!-- <Switcher /> -->
					<div>
						<!-- <span class="lgd lgd-total">总量</span> -->
						<!-- <span class="lgd lgd-day">白班</span>
						<span class="lgd lgd-night">夜班</span> -->
					</div>
				</div>
				<div
					class="select-line"
					style="
						display: flex;
						align-items: center;
						justify-content: space-between;
					">
					<SelectorBtnGroup
						:options="['氧气含量', '二氧化硫', '一氧化氮', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
					<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
				</div>
				<div class="chart" style="height: 250px;margin-top: 10px;">
					<FlueGas :chartType='chartType' :chartTime='chartTime'/>
				</div>
			</div>
		</Container>
	</div>
</template>

<script>
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
import KilnLine from '../components/line';
import Switcher from '../components/Switcher';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
import FlueGas from '../components/FlueGas';

export default {
	name: 'GasHandle',
	components: {
		Container,
		ShadowRect,
		KilnLine,
		Switcher,
		SelectorBtnGroup,
		FlueGas,
	},
	props: {},
	data() {
		return {
			chartType:'氧气含量',
			chartTime:'日'
		};
	},
	computed: {
		exhaustGasInfo() {
			return this.$store.state.websocket.exhaustGasInfo
		}
	},
	methods: {
		// 烟气
		toggleType(val) {
			console.log('烟气' + val)
			this.chartType = val
		},
		// 切换时间
		toggleDate(val) {
			console.log('时间' + val)
			this.chartTime = val
		}
	},
};
</script>

<style scoped lang="scss">
.gas-handle {
}

.lgd {
	color: #fff;

	&:not(:last-child) {
		margin-right: 12px;
	}
}

.lgd::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-radius: 2px;
}

.lgd.lgd-total::before {
	background-color: #ff9e00;
}

.lgd.lgd-day::before {
	background-color: #08d8cd;
}

.lgd.lgd-night::before {
	background-color: #0b58ff;
}
</style>