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

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

				<!-- <ShadowRect>
					<span
						style="
							font-size: 20px;
							line-height: 1.24;
							flex: 1;
							text-align: right;
							padding-right: 8px;
							letter-spacing: 1px;
						">
						颗粒物浓度
					</span>
					<span style="font-size: 20px; line-height: 1.24; flex: 1.2">
						{{
							exhaustGasInfo?.dust_float
								? Number(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>
					<TimePrompt
						class="timeShow"
						:timestr="timestr" />
					<!-- <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;
					">
					<!-- :options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']" -->
					<SelectorBtnGroup
						:options="['氧气含量', '二氧化硫', '氮氧化物']"
						@emitFun="toggleType"
						:active="chartType" />
					<SelectorBtnGroup
						:options="['日', '周', '月', '年']"
						@emitFun="toggleDate"
						:active="chartTime" />
				</div>
				<div
					class="chart"
					style="height: 250px; margin-top: 10px">
					<FlueGasChart
						:chartType="chartType"
						:chartTime="chartTime"
						@emitFun="dateUpdate" />
				</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 FlueGasChart from '../components/FlueGasChart';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils';

export default {
	name: 'GasHandle',
	components: {
		Container,
		ShadowRect,
		KilnLine,
		SelectorBtnGroup,
		FlueGasChart,
		TimePrompt,
	},
	props: {},
	data() {
		return {
			chartType: '氧气含量',
			chartTime: '日',
			timestr: '',
		};
	},
	computed: {
		exhaustGasInfo() {
			return this.$store.state.websocket.exhaustGasInfo;
		},
	},
	mounted() {
		this.timestr = switchShowTime(this.chartTime);
	},
	methods: {
		// 烟气
		toggleType(val) {
			console.log('烟气' + val);
			this.chartType = val;
		},
		// 切换时间
		toggleDate(val) {
			this.chartTime = val;
			this.timestr = switchShowTime(val);
		},
		// 数据更新
		dateUpdate() {
			this.timestr = switchShowTime(this.chartTime);
		},
	},
};
</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>