update 基本完成设备状态时序图的展示

src/views/modules/monitoring/equipmentTimesequence.vue

@@ -32,8 +32,8 @@
 				id="time-chart__inner"
 				ref="time-chart__inner"
 				class="time-chart__inner"
-				style="width: 100%; min-height: 50vh;"
-				:style="{ height: autoHeight + 'px' }"
+				style="min-height: 50vh;"
+				:style="{ height: autoHeight + 'px', width: '100%' }"
 			/>
 			<div v-show="equipmentCount === 0">请先查询数据</div>
 			<!-- <div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div> -->
@@ -112,6 +112,9 @@ class ChartOption {
 				show: true,
 				alignWithLabel: true
 			},
+			splitLine: {
+				show: true
+			},
 			axisLine: {
 				show: true
 			},
@@ -188,7 +191,7 @@ export default {
 			rawTime: new Date(),
 			dataForm: {
 				wsId: null,
-				productlines: [],
+				productlines: null,
 				startTime: null,
 				entTime: null
 			},
@@ -215,6 +218,14 @@ export default {
 			this.getWorksetionList()
 		})
 	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+		})
+	},
+	updated() {
+		if (this.chart) this.chart.resize()
+	},
 	watch: {
 		timeType() {
 			// 防止切换日期类型时报错
@@ -279,7 +290,7 @@ export default {
 			dataList.map(item => {
 				if (equipments[item.eqId]) {
 					// 如果设备已存在
-					equipments[item.eqId].name = item.eqName
+					// equipments[item.eqId].name = item.eqName
 					equipments[item.eqId].status.push({
 						startTime: +new Date(item.startTime),
 						endTime: +new Date(item.endTime),
@@ -298,7 +309,7 @@ export default {
 					}
 				}
 			})
-			// console.log('items --- ', equipments)
+			console.log('created equipments --- ', equipments)
 			return equipments
 		},
 		// 把分组好的设备数据转换为echarts需要的series数据
@@ -324,16 +335,26 @@ export default {
 		getDataList() {
 			let startTime = this.rawTime
 				? moment(this.rawTime)
-						.set({ date: 1, hour: 0, minute: 0, second: 0, millisecond: 0 })
+						.set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
 						.format('YYYY-MM-DDTHH:mm:ss')
 				: ''
 			let endTime = startTime
 				? moment(startTime)
-						.add(1, 'M')
+						.add(1, 'd')
 						.format('YYYY-MM-DDTHH:mm:ss')
 				: ''
+			const productlines = this.dataForm.productlines ? [this.dataForm.productlines] : []
+			const wsId = this.dataForm.wsId || ''
+
+			/** keep a copy of query conditions */
+			this.$set(this.queryBuffer, 'productlines', productlines)
+			this.$set(this.queryBuffer, 'wsId', wsId)
+			this.$set(this.queryBuffer, 'startTime', startTime)
+			this.$set(this.queryBuffer, 'endTime', endTime)
 
 			this.dataListLoading = true
+
+			/** fetch data */
 			this.$http({
 				url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'),
 				method: 'post',
@@ -346,15 +367,64 @@ export default {
 			}).then(({ data: res }) => {
 				if (res.code === 500) {
 					this.dataList.splice(0)
+					this.equipments = {} // 关闭 echarts 的显示
 					this.$message.error(res.msg)
 				} else {
-					this.dataList = res.data
+					/** handle actual data */
+					this.dataList = res.data 
+					
+					/** test data */
+					// this.dataList = [
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T00:30:34',
+					// 		endTime: '2022-05-04T08:30:34',
+					// 		status: 0
+					// 	},
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T08:30:34',
+					// 		endTime: '2022-05-04T09:30:34',
+					// 		status: 1
+					// 	},
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T09:30:34',
+					// 		endTime: '2022-05-04T11:30:34',
+					// 		status: 2
+					// 	},
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T11:30:34',
+					// 		endTime: '2022-05-04T13:30:34',
+					// 		status: 1
+					// 	}
+					// ]
+
+					this.equipments = this.transformDataToEquipments(this.dataList)
+					this.chartOption.setYAxis(Object.keys(this.equipments).map(eId => this.equipments[eId].name))
+					console.log('(((set x axis))): ', this.dataList[0].startTime)
+					this.chartOption.setXAxis(this.dataList[0].startTime)
+					this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments))
+
+					this.$nextTick(() => {
+						this.renderChart()
+					})
 				}
 			})
 		},
 		handleProductLineChange(val) {
 			this.getWorksetionList()
 		},
+		// 渲染 echarts
+		renderChart() {
+			console.log('>>> chart configs: ', this.chartOption)
+			this.chart.setOption(this.chartOption)
+		},
 		// 每页数
 		sizeChangeHandle(val) {
 			this.pageSize = val
@@ -383,3 +453,9 @@ export default {
 	}
 }
 </script>
+
+<style scoped>
+/* .time-chart__inner {
+	transition: all 300ms ease-out;
+} */
+</style>