src/views/monitoring/equipmentProcessAmount/graph.vue

@@ -17,11 +17,12 @@ import * as echarts from 'echarts';
 export default {
 	name: 'LineChartInEquipmentProcessAmount',
 	components: {},
-	props: ['equipmentList'],
+	props: ['equipmentList', 'render'],
 	data() {
 		return {
 			chart: null,
 			option: {
+				color: ['#288AFF'],
 				grid: {
 					top: 64,
 					left: 56,
@@ -89,16 +90,19 @@ export default {
 			},
 		};
 	},
-	mounted() {
-		// console.log('this.eq list', this.equipmentList);
-		if (!this.chart) this.chart = echarts.init(this.$refs.chart);
-
-		this.$nextTick(() => {
-			this.chart.setOption(this.updateConfig(this.option));
-		});
+	watch: {
+		render: {
+			handler: function (newVal, oldVal) {
+				if (!this.chart) this.chart = echarts.init(this.$refs.chart);
+				this.$nextTick(() => {
+					if (this.chart) this.chart.setOption(this.updateConfig(this.option));
+				});
+			},
+			deep: true,
+		},
 	},
 	beforeDestroy() {
-		this.chart.dispose();
+		if (this.chart) this.chart.dispose();
 	},
 	methods: {
 		updateConfig(config) {
@@ -126,5 +130,6 @@ export default {
 .chart {
 	height: 100%;
 	width: 100%;
+	// background: lightcoral;
 }
 </style>

src/views/monitoring/equipmentProcessAmount/index.vue

@@ -89,9 +89,12 @@
 							<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
 								<div class="graph" style="height: 56vh">
 									<!-- graph  -->
-									<Graph v-if="list.length" :equipment-list="list" />
+									<Graph
+										v-if="list.length"
+										:equipment-list="list"
+										:render="renderKey" />
 									<div
-										v-else
+										v-if="list.length == 0"
 										style="
 											color: #c7c7c7;
 											text-align: center;
@@ -120,6 +123,7 @@ export default {
 	props: {},
 	data() {
 		return {
+			renderKey: Math.random(),
 			factoryListOpen: false,
 			currentFactory: null,
 			factoryList: [
@@ -327,13 +331,12 @@ export default {
 		},
 
 		handleTabClick(tab, event) {
-			console.log('handle tab click: ', tab, event);
+			if (tab.name == 'graph') this.renderKey = Math.random();
 		},
 
 		factoryChangeHandler(event) {
 			this.factoryListOpen = false;
 			const fcId = event.target.dataset.value;
-			console.log('fc id', fcId);
 			this.handleSidebarItemClick({ id: fcId, type: '工厂' });
 			this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
 		},
@@ -398,7 +401,7 @@ export default {
 	padding: 0;
 	color: #111;
 	/* background: #f2f4f7; */
-	background: #E3EFFF !important;
+	background: #e3efff !important;
 }
 
 .vvv-enter,
@@ -527,14 +530,17 @@ li {
 	padding: 8px 12px !important;
 }
 .custom-tree-class >>> .el-tree-node__content:hover {
-	background: #E3EFFF;
+	background: #e3efff;
 }
 
 .custom-tree-class >>> .el-tree-node__children .el-tree-node__content {
 	padding: 8px 18px !important;
 }
 
-.custom-tree-class >>> .el-tree-node__children .el-tree-node__children .el-tree-node__content {
+.custom-tree-class
+	>>> .el-tree-node__children
+	.el-tree-node__children
+	.el-tree-node__content {
 	padding: 8px 24px !important;
 }
 </style>