<template>
	<!-- 锡槽温度 -->
	<Container usage="Charts">
		<SubContainer title="锡槽温度" icon="xicao" padding="34px">
			<div class="tables flex" style="height: 100%">
				<LineChart
					key="1"
					id="line-chart-9"
					class="flex-1"
					unit="单位/℃"
					:legend="Object.keys(xiCao1)"
					:series="xiCao1"
				/>
				<div class="vertical-line"></div>
				<LineChart
					key="2"
					id="line-chart-10"
					class="flex-1"
					unit="单位/℃"
					:legend="Object.keys(xiCao2)"
					:series="xiCao2"
				/>
			</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: "XicaoTemp",
	props: {},
	components: { Container, SubContainer, LineChart },
	data() {
		return {
			chartConfig: {},
		};
	},
	computed: {
		...mapState(["xiCao1", "xiCao2"]),
	},
};
</script>

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

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

.vertical-line {
	margin: 0 6px;
	width: 6px;
	background: radial-gradient(
		ellipse at center,
		#3565ff,
		#3565ff51,
		transparent,
		transparent
	);
}
</style>
