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

src/views/modules/monitoring/equipmentTimesequence.vue

@@ -24,6 +24,9 @@
 				<el-button @click="getDataList()">{{ $t('search') }}</el-button>
 				<!-- <el-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
 			</el-form-item>
+			<el-form-item>
+				<el-button type="success" @click="addEq()">{{ '添加设备' }}</el-button>
+			</el-form-item>
 		</el-form>
 
 		<div class="time-chart" style="margin-top: 10px;">
@@ -38,6 +41,16 @@
 			<div v-show="equipmentCount === 0">请先查询数据</div>
 			<!-- <div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div> -->
 		</div>
+
+		<el-dialog :visible.sync="dialogVisible" :title="'添加设备'" width="30%">
+			<el-select v-model="eqId" style="width: 100%" placeholder="请选择设备" clearable>
+				<el-option v-for="eq in dialogEqList" :key="eq.id" :label="eq.name" :value="eq.id" />
+			</el-select>
+			<div slot="footer">
+				<el-button @click="dialogVisible = false">{{ '取消' }}</el-button>
+				<el-button type="primary" @click="dialogConfirm">{{ '确定' }}</el-button>
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
@@ -183,7 +196,7 @@ export default {
 			equipments: {},
 			state: ['正常', '停机', '故障'],
 			colors: ['#4caf50', '#ffb300', '#e53935'],
-			queryBuffer: {},
+			// queryBuffer: {},
 			// tableConfigs,
 			calcMaxHeight,
 			timeType: 'range',
@@ -199,7 +212,11 @@ export default {
 			pageIndex: 1,
 			pageSize: 10,
 			totalPage: 0,
-			dataListLoading: false
+			dataListLoading: false,
+			/** dialog */
+			dialogVisible: false,
+			eqId: null,
+			dialogEqList: []
 		}
 	},
 	components: {
@@ -217,6 +234,7 @@ export default {
 		this.getProductLineList().then(() => {
 			this.getWorksetionList()
 		})
+		this.getEqList()
 	},
 	mounted() {
 		this.$nextTick(() => {
@@ -312,6 +330,7 @@ export default {
 			console.log('created equipments --- ', equipments)
 			return equipments
 		},
+
 		// 把分组好的设备数据转换为echarts需要的series数据
 		transformEquipmentsToSeries(equipments) {
 			const seriesData = []
@@ -343,27 +362,20 @@ export default {
 						.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
+			// this.dataListLoading = true
+			const condition = {
+				startTime,
+				endTime,
+				productlines: [this.dataForm.productlines],
+				wsId: this.dataForm.wsId
+			}
 
 			/** fetch data */
 			this.$http({
 				url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'),
 				method: 'post',
-				data: {
-					startTime,
-					endTime,
-					productlines: [this.dataForm.productlines],
-					wsId: this.dataForm.wsId
-				}
+				data: condition
 			}).then(({ data: res }) => {
 				if (res.code === 500) {
 					this.dataList.splice(0)
@@ -371,8 +383,8 @@ export default {
 					this.$message.error(res.msg)
 				} else {
 					/** handle actual data */
-					this.dataList = res.data 
-					
+					this.dataList = res.data
+
 					/** test data */
 					// this.dataList = [
 					// 	{
@@ -417,14 +429,91 @@ export default {
 				}
 			})
 		},
+
 		handleProductLineChange(val) {
 			this.getWorksetionList()
 		},
+
 		// 渲染 echarts
 		renderChart() {
 			console.log('>>> chart configs: ', this.chartOption)
 			this.chart.setOption(this.chartOption)
 		},
+
+		// 获取对话框里的设备列表
+		getEqList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipment/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					page: 1,
+					limit: 99999
+				})
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.dialogEqList = data.data.list
+				} else {
+					this.dialogEqList.splice(0)
+				}
+			})
+		},
+
+		// 添加设备
+		addEq() {
+			if (this.equipmentCount) {
+				this.dialogVisible = true
+			} else {
+				this.$message.warning('请先查询数据')
+			}
+		},
+
+		// 确认添加设备
+		dialogConfirm() {
+			let startTime = this.rawTime
+				? moment(this.rawTime)
+						.set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
+						.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+			let endTime = startTime
+				? moment(startTime)
+						.add(1, 'd')
+						.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+
+			const condition = {
+				startTime,
+				endTime,
+				productlines: [this.dataForm.productlines],
+				wsId: this.dataForm.wsId,
+				eqId: this.eqId
+			}
+
+			/** fetch data */
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'),
+				method: 'post',
+				data: condition
+			}).then(({ data: res }) => {
+				if (res.code === 500) {
+					this.$message.error(res.msg)
+				} else {
+					/** handle new equipment */
+					const newEqStatusList = res.data
+					console.log('添加设备', res)
+					const newEq = this.transformDataToEquipments(newEqStatusList)
+					this.$set(this.equipments, Object.keys(newEq)[0], newEq[Object.keys(newEq)[0]])
+					this.chartOption.setYAxis(Object.keys(this.equipments).map(item => this.equipments[item].name))
+					this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments))
+
+					this.$message.success('新设备数据获取成功')
+					this.$nextTick(() => {
+						this.dialogVisible = false
+						this.renderChart()
+					})
+				}
+			})
+		},
+
 		// 每页数
 		sizeChangeHandle(val) {
 			this.pageSize = val