projects/mes-test #133
@@ -482,7 +482,7 @@ export default {
 | 
			
		||||
 | 
			
		||||
		async submitForm() {
 | 
			
		||||
			const { code, data } = await this.$axios({
 | 
			
		||||
				url: '/analysis/equipment-analysis/quantity',
 | 
			
		||||
				url: '/monitoring/equipment-monitor/quantity-series',
 | 
			
		||||
				method: 'get',
 | 
			
		||||
				params: this.queryParams,
 | 
			
		||||
			});
 | 
			
		||||
 
 | 
			
		||||
@@ -6,19 +6,29 @@
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
 | 
			
		||||
		<el-row class="" style="
 | 
			
		||||
	<div
 | 
			
		||||
		class="status-timegraph-container"
 | 
			
		||||
		style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
 | 
			
		||||
		<el-row
 | 
			
		||||
			class=""
 | 
			
		||||
			style="
 | 
			
		||||
				margin-bottom: 12px;
 | 
			
		||||
				background: #fff;
 | 
			
		||||
				padding: 16px 16px 0;
 | 
			
		||||
				border-radius: 8px;
 | 
			
		||||
			">
 | 
			
		||||
			<div class="blue-title">生产节拍时序图</div>
 | 
			
		||||
			<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" :remove-blue="true"
 | 
			
		||||
				@select-changed="handleSearchBarSelectChange" @headBtnClick="handleSearchBarBtnClick" />
 | 
			
		||||
			<SearchBar
 | 
			
		||||
				:formConfigs="searchBarFormConfig"
 | 
			
		||||
				ref="search-bar"
 | 
			
		||||
				:remove-blue="true"
 | 
			
		||||
				@select-changed="handleSearchBarSelectChange"
 | 
			
		||||
				@headBtnClick="handleSearchBarBtnClick" />
 | 
			
		||||
		</el-row>
 | 
			
		||||
 | 
			
		||||
		<el-row class="" style="
 | 
			
		||||
		<el-row
 | 
			
		||||
			class=""
 | 
			
		||||
			style="
 | 
			
		||||
				height: 1px;
 | 
			
		||||
				flex: 1;
 | 
			
		||||
				margin-bottom: 12px;
 | 
			
		||||
@@ -47,17 +57,36 @@
 | 
			
		||||
					</div>
 | 
			
		||||
				</el-col>
 | 
			
		||||
			</el-row>
 | 
			
		||||
			<div class="main-area" style="flex: 1; display: flex; flex-direction: column">
 | 
			
		||||
				<div class="graphs" v-show="graphList.length" id="status-chart" style="height: 1px; flex: 1"></div>
 | 
			
		||||
			<div
 | 
			
		||||
				class="main-area"
 | 
			
		||||
				style="flex: 1; display: flex; flex-direction: column">
 | 
			
		||||
				<div
 | 
			
		||||
					class="graphs"
 | 
			
		||||
					v-show="graphList.length"
 | 
			
		||||
					id="status-chart"
 | 
			
		||||
					style="height: 1px; flex: 1"></div>
 | 
			
		||||
				<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-row>
 | 
			
		||||
 | 
			
		||||
		<!-- 对话框(添加 / 修改) -->
 | 
			
		||||
		<base-dialog dialogTitle="添加设备" :dialogVisible="open" width="500px" @close="open = false" @cancel="open = false"
 | 
			
		||||
		<base-dialog
 | 
			
		||||
			dialogTitle="添加设备"
 | 
			
		||||
			:dialogVisible="open"
 | 
			
		||||
			width="500px"
 | 
			
		||||
			@close="open = false"
 | 
			
		||||
			@cancel="open = false"
 | 
			
		||||
			@confirm="submitForm">
 | 
			
		||||
			<el-select v-if="open" style="width: 100%" v-model="queryParams.equipmentId" placeholder="请选择一个设备">
 | 
			
		||||
				<el-option v-for="eq in eqList" :key="eq.id" :value="eq.id" :label="eq.name"></el-option>
 | 
			
		||||
			<el-select
 | 
			
		||||
				v-if="open"
 | 
			
		||||
				style="width: 100%"
 | 
			
		||||
				v-model="queryParams.equipmentId"
 | 
			
		||||
				placeholder="请选择一个设备">
 | 
			
		||||
				<el-option
 | 
			
		||||
					v-for="eq in eqList"
 | 
			
		||||
					:key="eq.id"
 | 
			
		||||
					:value="eq.id"
 | 
			
		||||
					:label="eq.name"></el-option>
 | 
			
		||||
			</el-select>
 | 
			
		||||
		</base-dialog>
 | 
			
		||||
	</div>
 | 
			
		||||
@@ -129,7 +158,7 @@ export default {
 | 
			
		||||
			open: false,
 | 
			
		||||
			eqList: [],
 | 
			
		||||
			startTime: null,
 | 
			
		||||
			gantt: null
 | 
			
		||||
			gantt: null,
 | 
			
		||||
			// demo: [
 | 
			
		||||
			// 	[
 | 
			
		||||
			// 		{
 | 
			
		||||
@@ -159,7 +188,7 @@ export default {
 | 
			
		||||
		this.initEquipment();
 | 
			
		||||
		// this.getList();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() { },
 | 
			
		||||
	mounted() {},
 | 
			
		||||
	watch: {
 | 
			
		||||
		graphList: {
 | 
			
		||||
			handler(val) {
 | 
			
		||||
@@ -171,7 +200,6 @@ export default {
 | 
			
		||||
							return;
 | 
			
		||||
						}
 | 
			
		||||
						this.gantt.update(val);
 | 
			
		||||
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
				return;
 | 
			
		||||
@@ -215,7 +243,9 @@ export default {
 | 
			
		||||
				params: this.queryParams,
 | 
			
		||||
			});
 | 
			
		||||
			if (code == 0) {
 | 
			
		||||
				this.existingEquipments = Object.values(data).map((eq) => eq[0].equipmentId);
 | 
			
		||||
				this.existingEquipments = Object.values(data).map(
 | 
			
		||||
					(eq) => eq[0].equipmentId
 | 
			
		||||
				);
 | 
			
		||||
				this.graphList = this.objectToArray(data);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
@@ -302,26 +332,26 @@ export default {
 | 
			
		||||
						return;
 | 
			
		||||
					}
 | 
			
		||||
 | 
			
		||||
					this.startTime = new Date(payload.recordTime)
 | 
			
		||||
					this.startTime = new Date(payload.recordTime);
 | 
			
		||||
					this.queryParams.lineId = payload.lineId || null;
 | 
			
		||||
					this.queryParams.sectionId = payload.sectionId || null;
 | 
			
		||||
					this.queryParams.equipmentId = payload.equipmentId || null;
 | 
			
		||||
					this.queryParams.recordTime = payload.recordTime
 | 
			
		||||
						? [
 | 
			
		||||
							payload.recordTime,
 | 
			
		||||
							new Date(
 | 
			
		||||
								new Date(payload.recordTime).getTime() + 24 * 3600 * 1000
 | 
			
		||||
							)
 | 
			
		||||
								.toLocaleDateString()
 | 
			
		||||
								.split('/')
 | 
			
		||||
								.map((value, index) => {
 | 
			
		||||
									if (index == 1 || index == 2) {
 | 
			
		||||
										return value.padStart(2, '0');
 | 
			
		||||
									}
 | 
			
		||||
									return value;
 | 
			
		||||
								})
 | 
			
		||||
								.join('-') + ' 00:00:00',
 | 
			
		||||
						]
 | 
			
		||||
								payload.recordTime,
 | 
			
		||||
								new Date(
 | 
			
		||||
									new Date(payload.recordTime).getTime() + 24 * 3600 * 1000
 | 
			
		||||
								)
 | 
			
		||||
									.toLocaleDateString()
 | 
			
		||||
									.split('/')
 | 
			
		||||
									.map((value, index) => {
 | 
			
		||||
										if (index == 1 || index == 2) {
 | 
			
		||||
											return value.padStart(2, '0');
 | 
			
		||||
										}
 | 
			
		||||
										return value;
 | 
			
		||||
									})
 | 
			
		||||
									.join('-') + ' 00:00:00',
 | 
			
		||||
						  ]
 | 
			
		||||
						: null;
 | 
			
		||||
					this.getList();
 | 
			
		||||
					break;
 | 
			
		||||
@@ -337,7 +367,7 @@ export default {
 | 
			
		||||
				return;
 | 
			
		||||
			}
 | 
			
		||||
			const { code, data } = await this.$axios({
 | 
			
		||||
				url: '/analysis/equipment-analysis/status',
 | 
			
		||||
				url: '/monitoring/equipment-monitor/status-series',
 | 
			
		||||
				method: 'get',
 | 
			
		||||
				params: this.queryParams,
 | 
			
		||||
			});
 | 
			
		||||
@@ -444,7 +474,7 @@ export default {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.running {
 | 
			
		||||
	background-color: #288AFF;
 | 
			
		||||
	background-color: #288aff;
 | 
			
		||||
	// background-color: #84f04e;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@@ -455,7 +485,7 @@ export default {
 | 
			
		||||
 | 
			
		||||
.fault {
 | 
			
		||||
	// background-color: #ea5b5b;
 | 
			
		||||
	background-color: #FC9C91;
 | 
			
		||||
	background-color: #fc9c91;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.full {
 | 
			
		||||
@@ -469,7 +499,7 @@ export default {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.stop {
 | 
			
		||||
	background-color: #FFDC94;
 | 
			
		||||
	background-color: #ffdc94;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.legend-row {
 | 
			
		||||
@@ -478,7 +508,7 @@ export default {
 | 
			
		||||
	display: flex;
 | 
			
		||||
	justify-content: flex-end;
 | 
			
		||||
 | 
			
		||||
	>.legend:not(:last-child) {
 | 
			
		||||
	> .legend:not(:last-child) {
 | 
			
		||||
		margin-right: 12px;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
@@ -521,7 +551,7 @@ export default {
 | 
			
		||||
	background: #ccc;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.echarts__status-chart>div {
 | 
			
		||||
.echarts__status-chart > div {
 | 
			
		||||
	height: 100% !important;
 | 
			
		||||
	width: 100% !important;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user