update

src/components/boxes/HistoryTemp.vue

@@ -1,17 +1,22 @@
 <template>
-	<div class="history-temp flex flex-col" style="height: 100%;">
+	<div class="history-temp flex flex-col" style="height: 100%">
 		<h3>窑炉历史温度趋势</h3>
 		<BarChart class="flex-1" />
 	</div>
 </template>
 
 <script>
-import BarChart from '../charts/BarChart.vue'
+import BarChart from "../charts/BarChart.vue";
 
 export default {
 	name: "HistoryTemp",
 	components: { BarChart },
-	props: {},
+	props: {
+		series: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
 	data() {
 		return {};
 	},
@@ -24,7 +29,6 @@ export default {
 <style scoped lang="scss">
 @import "../../assets/styles/functions";
 
-
 .flex-1 {
 	flex: 1;
 	// background: #eee;

src/components/boxes/InWater.vue

@@ -18,7 +18,7 @@
 				</div>
 				<div class="wave"></div>
 				<div class="graph flex-1">
-          <HistoryTrend />
+					<HistoryTrend key="water-in" :series="kilnWaterIn" />
 				</div>
 			</div>
 		</SubContainer>
@@ -31,9 +31,10 @@ import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
 import DigitalBox from "../common/DigitalBox.vue";
 import HistoryTrend from "./HistoryTemp.vue";
+import { mapState } from "vuex";
 
 export default {
-  name: "XicaoTemp",
+	name: "InWater",
 	props: {},
 	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
 	data() {
@@ -41,6 +42,9 @@ export default {
 			chartConfig: {},
 		};
 	},
+	computed: {
+		...mapState(["kilnWaterIn"]),
+	},
 };
 </script>
 

src/components/boxes/OutWater.vue

@@ -18,7 +18,7 @@
 				</div>
 				<div class="wave"></div>
 				<div class="graph flex-1">
-          <HistoryTrend />
+					<HistoryTrend key="water-out" :series="kilnWaterOut" />
 				</div>
 			</div>
 		</SubContainer>
@@ -31,9 +31,10 @@ import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
 import DigitalBox from "../common/DigitalBox.vue";
 import HistoryTrend from "./HistoryTemp.vue";
+import { mapState } from "vuex";
 
 export default {
-  name: "XicaoTemp",
+	name: "OutWater",
 	props: {},
 	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
 	data() {
@@ -41,6 +42,9 @@ export default {
 			chartConfig: {},
 		};
 	},
+	computed: {
+		...mapState(["kilnWaterOut"]),
+	},
 };
 </script>
 

src/components/charts/BarChart.vue

@@ -28,7 +28,7 @@ echarts.use([
 ]);
 
 function adjust(v) {
-	return v * 2
+	return v * 2;
 }
 
 export default {
@@ -42,12 +42,21 @@ export default {
 	data() {
 		return {
 			id: Math.random().toString(),
-      chart: null
+			chart: null,
 		};
 	},
 	mounted() {
 		this.init();
 	},
+	watch: {
+		series: {
+			deep: true,
+			handler: function () {
+				console.log("BarChart: series changed!");
+				this.init();
+			},
+		},
+	},
 	methods: {
 		init() {
 			if (!this.chart)
@@ -76,7 +85,7 @@ export default {
 						color: "#ffffff",
 						fontSize: adjust(7),
 						lineHeight: adjust(1),
-            margin: adjust(8)
+						margin: adjust(8),
 					},
 				},
 				yAxis: {
@@ -111,7 +120,9 @@ export default {
 				},
 				series: [
 					{
-            data: Array(31)
+						data:
+							// this.series
+							Array(31)
 								.fill(1)
 								.map(() => {
 									let v = Math.ceil(Math.random() * 100);

src/components/charts/LineChart.vue

@@ -105,6 +105,7 @@ export default {
 		series: {
 			deep: true,
 			handler: function () {
+				console.log('LineChart: series changed!')
 				this.init();
 			},
 		},