<template>
	<!-- 天然气流量 -->
	<Container usage="Charts">
		<SubContainer title="天然气流量" icon="oil" padding="34px">
			<div class="tables flex" style="height: 100%">
				<LineChart
					key="1"
					id="line-chart-3"
					class="flex-1"
					:legend="Object.keys(gasTable1)"
					:series="gasTable1"
				/>
				<div class="vertical-line"></div>
				<LineChart
					key="2"
					id="line-chart-4"
					class="flex-1"
					:legend="Object.keys(gasTable2)"
					:series="gasTable2"
				/>
			</div>
		</SubContainer>
	</Container>
</template>

<script>
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import { mapState } from "vuex";

export default {
	name: "GasFlow",
	props: {},
	components: { Container, SubContainer, LineChart },
	data() {
		return {
			chartConfig: {},
		};
	},
	computed: {
		...mapState(["gasTable1", "gasTable2"]),
	},
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/functions";

.flex-1 {
	flex: 1;
	// background: #eee;
}

.vertical-line {
	margin: 0 adjust(3px);
	width: adjust(3px);
	background: radial-gradient(
		ellipse at center,
		#6fe2ff,
		#52cbef80,
		transparent,
		transparent
	);
}
</style>
