add pics

src/components/boxes/BottomTemp.vue

@@ -0,0 +1,50 @@
+<template>
+	<!-- 窑底温度 -->
+	<Container usage="Charts">
+		<SubContainer title="窑底温度" icon="oil" padding="17px">
+			<div class="tables flex" style="height: 100%">
+				<LineChart key="1" id="line-chart-7" class="flex-1" :config="chartConfig" />
+				<div class="vertical-line"></div>
+				<LineChart key="2" id="line-chart-8" class="flex-1" :config="chartConfig" />
+			</div>
+		</SubContainer>
+	</Container>
+</template>
+
+<script>
+import LineChart from "../charts/LineChart.vue";
+import Container from "../layout/Container.vue";
+import SubContainer from "../layout/SubContainer.vue";
+
+export default {
+	name: "BottomTemp",
+	props: {},
+	components: { Container, SubContainer, LineChart },
+	data() {
+		return {
+			chartConfig: {},
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+.flex-1 {
+	flex: 1;
+	// background: #eee;
+}
+
+.vertical-line {
+	margin: 0 3px;
+	width: 3px;
+	background: radial-gradient(
+		ellipse at center,
+		#6fe2ff,
+		#52cbef80,
+		transparent,
+		transparent
+	);
+}
+</style>

src/components/boxes/GasFlow.vue

@@ -0,0 +1,50 @@
+<template>
+	<!-- 天然气流量 -->
+	<Container usage="Charts">
+		<SubContainer title="天然气流量" icon="oil" padding="17px">
+			<div class="tables flex" style="height: 100%">
+				<LineChart key="1" id="line-chart-3" class="flex-1" :config="chartConfig" />
+				<div class="vertical-line"></div>
+				<LineChart key="2" id="line-chart-4" class="flex-1" :config="chartConfig" />
+			</div>
+		</SubContainer>
+	</Container>
+</template>
+
+<script>
+import LineChart from "../charts/LineChart.vue";
+import Container from "../layout/Container.vue";
+import SubContainer from "../layout/SubContainer.vue";
+
+export default {
+	name: "GasFlow",
+	props: {},
+	components: { Container, SubContainer, LineChart },
+	data() {
+		return {
+			chartConfig: {},
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+.flex-1 {
+	flex: 1;
+	// background: #eee;
+}
+
+.vertical-line {
+	margin: 0 3px;
+	width: 3px;
+	background: radial-gradient(
+		ellipse at center,
+		#6fe2ff,
+		#52cbef80,
+		transparent,
+		transparent
+	);
+}
+</style>

src/components/boxes/InWater.vue

@@ -0,0 +1,50 @@
+<template>
+	<!-- 窑炉进口水温 -->
+	<Container usage="Charts">
+		<SubContainer title="窑炉进口水温" icon="oil" padding="17px">
+			<div class="tables flex" style="height: 100%">
+				<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
+				<div class="vertical-line"></div>
+				<LineChart key="2" id="line-chart-10" class="flex-1" :config="chartConfig" />
+			</div>
+		</SubContainer>
+	</Container>
+</template>
+
+<script>
+import LineChart from "../charts/LineChart.vue";
+import Container from "../layout/Container.vue";
+import SubContainer from "../layout/SubContainer.vue";
+
+export default {
+	name: "XicaoTemp",
+	props: {},
+	components: { Container, SubContainer, LineChart },
+	data() {
+		return {
+			chartConfig: {},
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+.flex-1 {
+	flex: 1;
+	// background: #eee;
+}
+
+.vertical-line {
+	margin: 0 3px;
+	width: 3px;
+	background: radial-gradient(
+		ellipse at center,
+		#6fe2ff,
+		#52cbef80,
+		transparent,
+		transparent
+	);
+}
+</style>

src/components/boxes/TopTemp.vue

@@ -0,0 +1,50 @@
+<template>
+	<!-- 窑顶温度 -->
+	<Container usage="Charts">
+		<SubContainer title="窑顶温度" icon="oil" padding="17px">
+			<div class="tables flex" style="height: 100%">
+				<LineChart key="1" id="line-chart-5" class="flex-1" :config="chartConfig" />
+				<div class="vertical-line"></div>
+				<LineChart key="2" id="line-chart-6" class="flex-1" :config="chartConfig" />
+			</div>
+		</SubContainer>
+	</Container>
+</template>
+
+<script>
+import LineChart from "../charts/LineChart.vue";
+import Container from "../layout/Container.vue";
+import SubContainer from "../layout/SubContainer.vue";
+
+export default {
+	name: "TopTemp",
+	props: {},
+	components: { Container, SubContainer, LineChart },
+	data() {
+		return {
+			chartConfig: {},
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+.flex-1 {
+	flex: 1;
+	// background: #eee;
+}
+
+.vertical-line {
+	margin: 0 3px;
+	width: 3px;
+	background: radial-gradient(
+		ellipse at center,
+		#6fe2ff,
+		#52cbef80,
+		transparent,
+		transparent
+	);
+}
+</style>

src/components/boxes/XicaoTemp.vue

@@ -0,0 +1,50 @@
+<template>
+	<!-- 锡槽温度 -->
+	<Container usage="Charts">
+		<SubContainer title="锡槽温度" icon="oil" padding="17px">
+			<div class="tables flex" style="height: 100%">
+				<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
+				<div class="vertical-line"></div>
+				<LineChart key="2" id="line-chart-10" class="flex-1" :config="chartConfig" />
+			</div>
+		</SubContainer>
+	</Container>
+</template>
+
+<script>
+import LineChart from "../charts/LineChart.vue";
+import Container from "../layout/Container.vue";
+import SubContainer from "../layout/SubContainer.vue";
+
+export default {
+	name: "XicaoTemp",
+	props: {},
+	components: { Container, SubContainer, LineChart },
+	data() {
+		return {
+			chartConfig: {},
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+.flex-1 {
+	flex: 1;
+	// background: #eee;
+}
+
+.vertical-line {
+	margin: 0 3px;
+	width: 3px;
+	background: radial-gradient(
+		ellipse at center,
+		#6fe2ff,
+		#52cbef80,
+		transparent,
+		transparent
+	);
+}
+</style>

src/components/layout/Main.vue

@@ -14,6 +14,18 @@
 		<div class="absolute left oil-flow">
 			<OilFlow />
 		</div>
+		<div class="absolute left gas-flow">
+			<GasFlow />
+		</div>
+		<div class="absolute left top-temp">
+			<TopTemp />
+		</div>
+		<div class="absolute left bottom-temp">
+			<BottomTemp />
+		</div>
+		<div class="absolute left ou-temp">
+			<XicaoTemp />
+		</div>
 		<div class="right absolute"></div>
 	</main>
 </template>
@@ -22,13 +34,27 @@
 import KilnRuntime from "../boxes/KilnRuntime.vue";
 import KilnPressure from "../boxes/KilnPressure.vue";
 import OilFlow from "../boxes/OilFlow.vue";
+import GasFlow from "../boxes/GasFlow.vue";
+import TopTemp from "../boxes/TopTemp.vue";
+import BottomTemp from "../boxes/BottomTemp.vue";
+import XicaoTemp from "../boxes/XicaoTemp.vue";
 import FanRuntime from "../boxes/FanRuntime.vue";
 import AreaOne from "../isolate-area-1/Area.vue";
 // import Container from './Container.vue'
 
 export default {
 	name: "Main",
-	components: { AreaOne, KilnRuntime, KilnPressure, FanRuntime, OilFlow },
+	components: {
+		AreaOne,
+		KilnRuntime,
+		KilnPressure,
+		FanRuntime,
+		OilFlow,
+		GasFlow,
+		TopTemp,
+		BottomTemp,
+		XicaoTemp,
+	},
 	props: {},
 	data() {
 		return {};
@@ -64,4 +90,21 @@ main {
 	top: h(1588px);
 	left: w(60px);
 }
+
+.gas-flow {
+	top: h(1588px);
+	left: w(1660px);
+}
+.top-temp {
+	top: h(1588px);
+	left: w(3260px);
+}
+.bottom-temp {
+	top: h(1588px);
+	left: w(4860px);
+}
+.ou-temp {
+	top: h(1588px);
+	left: w(6460px);
+}
 </style>