update 数据对接

src/components/boxes/BottomTemp.vue

@@ -3,9 +3,21 @@
 	<Container usage="Charts">
 		<SubContainer title="窑底温度" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart key="1" id="line-chart-7" class="flex-1" :config="chartConfig" />
+				<LineChart
+					key="1"
+					id="line-chart-7"
+					class="flex-1"
+					:legend="Object.keys(kilnBtm1)"
+					:series="kilnBtm1"
+				/>
 				<div class="vertical-line"></div>
-				<LineChart key="2" id="line-chart-8" class="flex-1" :config="chartConfig" />
+				<LineChart
+					key="2"
+					id="line-chart-8"
+					class="flex-1"
+					:legend="Object.keys(kilnBtm2)"
+					:series="kilnBtm2"
+				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -15,6 +27,7 @@
 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: "BottomTemp",
@@ -25,6 +38,9 @@ export default {
 			chartConfig: {},
 		};
 	},
+	computed: {
+		...mapState(["kilnBtm1", "kilnBtm2"]),
+	},
 };
 </script>
 

src/components/boxes/GasFlow.vue

@@ -3,9 +3,21 @@
 	<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" :config="chartConfig" />
+				<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" :config="chartConfig" />
+				<LineChart
+					key="2"
+					id="line-chart-4"
+					class="flex-1"
+					:legend="Object.keys(gasTable2)"
+					:series="gasTable2"
+				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -15,6 +27,7 @@
 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",
@@ -25,6 +38,9 @@ export default {
 			chartConfig: {},
 		};
 	},
+	computed: {
+		...mapState(["gasTable1", "gasTable2"]),
+	},
 };
 </script>
 

src/components/boxes/OilFlow.vue

@@ -3,9 +3,21 @@
 	<Container usage="Charts">
 		<SubContainer title="油流量" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart key="1" id="line-chart-1" class="flex-1" :config="chartConfig" />
+				<LineChart
+					key="1"
+					id="line-chart-1"
+					class="flex-1"
+					:legend="Object.keys(oilTable1)"
+					:series="oilTable1"
+				/>
 				<div class="vertical-line"></div>
-				<LineChart key="2" id="line-chart-2" class="flex-1" :config="chartConfig" />
+				<LineChart
+					key="2"
+					id="line-chart-2"
+					class="flex-1"
+					:legend="Object.keys(oilTable2)"
+					:series="oilTable2"
+				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -15,6 +27,7 @@
 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: "OilFlow",
@@ -25,6 +38,9 @@ export default {
 			chartConfig: {},
 		};
 	},
+	computed: {
+		...mapState(["oilTable1", "oilTable2"]),
+	},
 };
 </script>
 

src/components/boxes/TopTemp.vue

@@ -3,9 +3,21 @@
 	<Container usage="Charts">
 		<SubContainer title="窑顶温度" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart key="1" id="line-chart-5" class="flex-1" :legend="Object.keys(chartOne)" :series="chartOne" />
+				<LineChart
+					key="1"
+					id="line-chart-5"
+					class="flex-1"
+					:legend="Object.keys(kilnTop1)"
+					:series="kilnTop1"
+				/>
 				<div class="vertical-line"></div>
-				<LineChart key="2" id="line-chart-6" class="flex-1" :legend="Object.keys(chartTwo)" :series="chartTwo" />
+				<LineChart
+					key="2"
+					id="line-chart-6"
+					class="flex-1"
+					:legend="Object.keys(kilnTop2)"
+					:series="kilnTop2"
+				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -15,25 +27,28 @@
 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: "TopTemp",
-	props: {
-		chartOne: {
-			type: Object,
-			default: () => ({})
-		},
-		chartTwo: {
-			type: Object,
-			default: () => ({})
-		}
-	},
 	components: { Container, SubContainer, LineChart },
+	props: {},
 	data() {
 		return {
 			chartConfig: {},
 		};
 	},
+	computed: {
+		...mapState(["kilnTop1", "kilnTop2"]),
+		legend_1() {
+			return Object.keys(this.kilnTop1)
+		}
+	},
+	watch: {
+		kilnTop1(val) {
+			console.log("update!", this.kilnTop1);
+		},
+	},
 };
 </script>
 

src/components/boxes/XicaoTemp.vue

@@ -3,9 +3,21 @@
 	<Container usage="Charts">
 		<SubContainer title="锡槽温度" icon="oil" padding="34px">
 			<div class="tables flex" style="height: 100%">
-				<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
+				<LineChart
+					key="1"
+					id="line-chart-9"
+					class="flex-1"
+					:legend="Object.keys(xiCao1)"
+					:series="xiCao1"
+				/>
 				<div class="vertical-line"></div>
-				<LineChart key="2" id="line-chart-10" class="flex-1" :config="chartConfig" />
+				<LineChart
+					key="2"
+					id="line-chart-10"
+					class="flex-1"
+					:legend="Object.keys(xiCao2)"
+					:series="xiCao2"
+				/>
 			</div>
 		</SubContainer>
 	</Container>
@@ -15,6 +27,7 @@
 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",
@@ -25,6 +38,9 @@ export default {
 			chartConfig: {},
 		};
 	},
+	computed: {
+		...mapState(["xiCao1", "xiCao2"]),
+	},
 };
 </script>
 

src/components/charts/LineChart.vue

@@ -1,6 +1,6 @@
 <template>
 	<!-- line chart  -->
-	<div class="line-chart__wrapper" style="overflow: hidden;">
+	<div class="line-chart__wrapper">
 		<div class="line-chart__custom-legend flex" v-if="legend.length">
 			<!-- <span>产线1 - 产线5</span> -->
 			<ul style="" class="flex">
@@ -101,6 +101,14 @@ export default {
 	mounted() {
 		this.init();
 	},
+	watch: {
+		series: {
+			deep: true,
+			handler: function () {
+				this.init();
+			},
+		},
+	},
 	methods: {
 		init() {
 			if (!this.chart)
@@ -136,7 +144,7 @@ export default {
 					name: "单位/m³",
 					nameTextStyle: {
 						color: "#fff9",
-						fontSize: adjust(6),
+						fontSize: adjust(7),
 						align: "right",
 					},
 					axisLine: {
@@ -186,27 +194,30 @@ export default {
 				// 				return v;
 				// 			}),
 				// 	})),
-				series: Array(this.legend)
+				series: Array(this.legend.length)
 					.fill(1)
-					.map((lgd, index) => ({
+					.map((_, index) => {
-						name: lgd,
+						let lgd = this.legend[index]
-						type: "line",
+						console.log("series: ", lgd, index, this.series[lgd]);
-						symbol: "circle",
+						return {
-						symbolSize: adjust(3),
+							name: lgd,
-						lineStyle: {
+							type: "line",
-							width: adjust(1),
+							symbol: "circle",
-						},
+							symbolSize: adjust(3),
-						areaStyle: {
+							lineStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								width: adjust(1),
-								{ offset: 0, color: this.colors[index] + "33" },
+							},
-								{ offset: 1, color: "transparent" },
+							areaStyle: {
-							]),
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						},
+									{ offset: 0, color: this.colors[index] + "33" },
-						data: this.series[this.legend],
+									{ offset: 1, color: "transparent" },
-					})),
+								]),
+							},
+							data: this.series[lgd],
+						};
+					}),
 			});
 		},
-		initData() {},
 	},
 };
 </script>

src/components/common/SmallBox2.vue

@@ -74,7 +74,7 @@ export default {
 	}
 
 	.info {
-		font-family: "微软雅黑", Helvicate, sans-serif;
+		font-family: "微软雅黑", sans-serif;
 
 		h2 {
 			font-size: adjust(16px);

src/components/layout/Main.vue

@@ -47,7 +47,7 @@
 			<GasFlow />
 		</div>
 		<div class="absolute left top-temp">
-			<TopTemp :chart-one="kilnTop1" :chart-two="kilnTop2" />
+			<TopTemp />
 		</div>
 		<div class="absolute left bottom-temp">
 			<BottomTemp />