update 数据分析-设备效率分析的echarts

src/views/modules/monitoring/equipmentEfficiency.vue

@@ -167,7 +167,8 @@ export default {
 		}
 	},
 	components: {
-		BaseTable, EquipmentEfficiencyGraph
+		BaseTable,
+		EquipmentEfficiencyGraph
 	},
 
 	created() {
@@ -298,6 +299,9 @@ export default {
 
 			this.showGraph = true
 
+			console.clear()
+			console.log('inject data: ', injectData)
+			
 			setTimeout(() => {
 				// console.log('befoer graph: ', this.$refs.eegraph)
 				this.$refs.eegraph.init(injectData) // 注入初始数据，这些数据在组件内部用作条件，有可能会被更改
@@ -336,24 +340,23 @@ export default {
 </script>
 
 <style scoped>
-	.slide-to-left-enter-active,
+.slide-to-left-enter-active,
-	.slide-to-left-leave-active {
+.slide-to-left-leave-active {
-		transition: all 0.5s;
+	transition: all 0.5s;
-	}
+}
 
-	.slide-to-left-enter {
+.slide-to-left-enter {
-		transform: translateX(10px);
+	transform: translateX(10px);
-		opacity: 0;
+	opacity: 0;
-	}
+}
 
-	.slide-to-left-leave-to {
+.slide-to-left-leave-to {
-		transform: translateX(-10px);
+	transform: translateX(-10px);
-		opacity: 0;
+	opacity: 0;
-	}
+}
-	
-	.slide-to-left-leave,
-	.slide-to-left-enter-to {
-		transform: translateX(0);
-	}
-	</style>
 
+.slide-to-left-leave,
+.slide-to-left-enter-to {
+	transform: translateX(0);
+}
+</style>

src/views/modules/monitoring/equipmentEfficiencyGraph.vue

@@ -15,7 +15,7 @@
 			</svg>
 		</span>
 
-		<div class="close-row" style="padding-left: 8px;">
+		<div class="close-row">
 			<el-radio-group v-model="dataType" class="head-radio-group" size="small" @change="setLegend">
 				<el-radio-button label="百分比" />
 				<el-radio-button label="时间" />
@@ -100,7 +100,7 @@ class EchartConfigs {
 
 	setSeries(val) {
 		this.series.splice(0)
-		if (Array.isArray(val)) {
+		if (Array.isArray(val) && this.series.length === 0) {
 			this.series = val
 		} else {
 			console.error('setSeries() 只接受数组参数')
@@ -127,7 +127,7 @@ export default {
 	},
 	methods: {
 		async initChart() {
-			this.config.setTitle(this.injectData.equipmentName + ' 时间区间走势')
+			this.config.setTitle(this.injectData.equipmentName + '时间区间走势')
 			await this.getList()
 			this.setLegend()
 		},
@@ -149,15 +149,11 @@ export default {
 				无间隔: 1,
 				按月: 2,
 				按周: 3,
-				按天: 4
+				按天: 4,
+				按小时: 5
 			}
 
 			return {
-				// current: 1,
-				// size: 999,
-				// ftId:  this.injectData.factoryId , // 工厂id
-				// wsId:  this.injectData.workSequenceId , // 工段id
-				// productlines: ['1409788336610934786'], // 产线ids， 这几项都暂时不需要
 				type: searchTypeMap[this.searchType],
 				eqId: this.injectData.equipmentId,
 				startTime: this.injectData.startTime, // '2022-06-14T00:00:00'
@@ -166,18 +162,32 @@ export default {
 		},
 
 		// getOEE
-		getOEE(params) {},
+		getOEE(params) {
+			return this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
+				method: 'post',
+				data: params
+			}).then(({ data: res }) => {
+				if (!res.data || res.code === 500) {
+					this.dataList.splice(0)
+					this.$message.error(res.msg)
+					return { data: null }
+				}
+				return res.data
+			})
+		},
 
 		getList() {
 			const params = this.makeQuerys()
 			// 发起请求
-			return this.getOEE(params).then(res => {
+			return this.getOEE(params).then(datalist => {
+				console.log('getOEE res:', datalist)
 				this.timeList.splice(0)
 				this.rateList.splice(0)
 				this.xAxis.splice(0)
-				if (res.data) {
+				if (datalist.length) {
 					// 分流
-					res.data.map(item => {
+					datalist.map(item => {
 						const time = moment(item.time)
 						if (this.searchType === '按月') {
 							this.xAxis.push(`${time.year()}年${time.month() + 1}月`)
@@ -264,8 +274,13 @@ export default {
 
 		// 重新绘制图形
 		renderGraph() {
-			// console.log('latest config: ', this.config)
+			console.log('latest config: ', JSON.stringify(this.config))
-			this.chart.setOption(this.config)
+			this.$nextTick(() => {
+				// this.chart.setOption(this.config)
+				this.chart.setOption(this.config, {
+          notMerge: true
+        })
+			})
 		}
 	}
 }
@@ -273,8 +288,6 @@ export default {
 
 <style scoped>
 .graph-area {
-	margin-top: 18px;
-	/* background: #f0f0f0; */
 	width: 100%;
 	min-height: 200px;
 	position: relative;
@@ -298,11 +311,11 @@ export default {
 }
 
 .close-btn:hover {
-	color: #0b58ff;
+	color: #409eff;
 }
 
 .head-radio-group >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-	background-color: #0b58ff;
+	background-color: #409eff;
-	border-color: #0b58ff;
+	border-color: #409eff;
 }
 </style>