<!-- 
    filename: MaterialCost.vue
    author: liubin
    date: 2023-12-06 09:09:27
    description: 
-->

<template>
	<Container name="能耗" size="middle" style="">
		<EnergeTop />
		<SplitLine :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>
					<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="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
				<SelectorBtnGroup :options="['日', '周', '月', '年']" />
			</div>
			<div class="chart" style="height: 150px; margin-top: 8px;">
				<GasChart />
			</div>
		</div>
	</Container>
</template>

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

<style scoped lang="scss">
.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>
