yudao-dev/src/views/quality/monitoring/deviceParameters/index.vue

<!--
    filename: index.vue
    author: liubin
    date: 2023-08-30 14:02:49
    description: 设备加工数量
-->

<template>
	<div style="flex: 1; display: flex; background: #f2f4f9">
		<div
			class="app-container"
			style="
				margin-right: 12px;
				border-radius: 8px;
				background: #fff;
				padding: 0;
			">
			<div
				class="factory-list__selector"
				style="margin: 12px"
				title="点击切换工厂"
				@mouseenter="factoryListOpen = true"
				@mouseleave="factoryListOpen = false">
				{{ currentFactory?.label || '点我选择设备' }}
				<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
					<ul
						class="factory-list"
						v-if="sidebarContent.length"
						@click.prevent="factoryChangeHandler">
						<li
							v-for="fc in sidebarContent"
							:key="fc.id"
							:data-value="fc.id"
							class="factory-list__item"
							:class="{ 'is-current': fc.id == currentFactory?.id }">
							<span>
								{{ fc.label }}
							</span>
							<svg-icon
								v-if="fc.id == currentFactory?.id"
								icon-class="Confirm"
								style="height: 14px; width: 14px" />
						</li>
					</ul>
					<div v-else style="color: #0008; width: 128px; text-align: center">
						- 无 -
					</div>
				</div>
			</div>
			<!-- side bar  -->
			<div class="side-bar__left">
				<el-tree
					class="custom-tree-class"
					:data="currentFactory?.children"
					:props="treeProps"
					:empty-text="''"
					icon-class="custom-icon-class"
					@node-click="handleSidebarItemClick">
					<!-- <div class="custom-tree-node" slot-scope="{ node, data }">
						<span class="icon"></span>
						<span>{{ node.label }}</span>
					</div> -->
				</el-tree>
			</div>
		</div>
		<div
			class="app-container equipment-process-amount"
			style="flex: 1; border-radius: 8px; background: #fff">
			<!-- main area  -->
			<div class="main-content" style="display: flex; flex-direction: column">
				<SearchBar
					:formConfigs="searchBarFormConfig"
					ref="search-bar"
					@headBtnClick="handleSearchBarBtnClick"
					@select-changed="handleSearchBarChanged" />

				<el-row>
					<el-col class="custom-tabs">
						<div v-if="tableList.length" class="tables">
							<div
								class="custom-table"
								v-for="table in tableList"
								:key="table.key">
								<!-- {{ JSON.stringify(spanMethod) }} -->
								<base-table
									:key="table.key + '__basetable'"
									:table-props="table.tableProps"
									:table-data="table.dataManager?.dataList ?? []"
									:span-method="spanMethod"
									:max-height="tableH"
									@emitFun="(val) => handleEmitFun(table, val)"></base-table>
								<pagination
									:key="table.key + '__pagination'"
									v-show="table.total > 0"
									:total="table.total"
									:page.sync="table.pageNo"
									:limit.sync="table.pageSize"
									:page-size="table.pageSize"
									:page-sizes="[1, 3, 5, 10, 20]"
									@pagination="
										({ page, limit, current }) =>
											getListFor(table, { page, limit, current })
									" />
							</div>
						</div>
						<div v-else class="no-data-bg"></div>
					</el-col>
				</el-row>

				<!-- <transition appear name="vvv" mode="out-in"></transition> -->
			</div>
		</div>
	</div>
</template>

<script>
// import Graph from './graph.vue';
import { getWorkOrderList, getTreeData } from '@/api/quality/deviceParameters';
import tableHeightMixin from '@/mixins/tableHeightMixin';
export default {
	name: 'EquipmentProcessAmount',
	// components: { Graph },
	mixins: [tableHeightMixin],
	props: {},
	data() {
		const now = new Date();
		const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
		const today = new Date(y, m, d, 0, 0, 0, 0).getTime();
		const aWeekAgo = today - 3600 * 1000 * 24 * 7;
		return {
			renderKey: Math.random(),
			factoryListOpen: false,
			currentFactory: null,
			factoryList: [
				{ name: '1', value: 1 },
				{ name: '2', value: 2 },
				{ name: '3', value: 3 },
				{ name: '4', value: 4 },
				{ name: '5', value: 5 },
				{ name: '6', value: 6 },
			],
			sidebarContent: [
				// {
				// 	id: 'fc1',
				// 	name: '工厂',
				// 	lines: [
				// 		{
				// 			name: '产线1',
				// 			id: 'pl1',
				// 			sections: [
				// 				{
				// 					name: '工段1',
				// 					id: 'pl1ws1',
				// 					equipments: [
				// 						{
				// 							name: '设备1',
				// 							id: 'pl1ws1--eq1',
				// 						},
				// 						{
				// 							name: '设备2',
				// 							id: 'pl1ws1--eq2',
				// 						},
				// 						{
				// 							name: '设备3',
				// 							id: 'pl1ws1--eq3',
				// 						},
				// 					],
				// 				},
				// 				{
				// 					name: '工段2',
				// 					id: 'pl1ws2',
				// 					equipments: [
				// 						{
				// 							name: '设备1',
				// 							id: 'pl2ws1--eq1',
				// 						},
				// 						{
				// 							name: '设备2',
				// 							id: 'pl2ws1--eq2',
				// 						},
				// 						{
				// 							name: '设备3',
				// 							id: 'pl2ws1--eq3',
				// 						},
				// 					],
				// 				},
				// 				{
				// 					name: '工段3',
				// 					id: 'pl1ws3',
				// 					equipments: [
				// 						{
				// 							name: '设备1',
				// 							id: 'pl3ws1--eq1',
				// 						},
				// 						{
				// 							name: '设备2',
				// 							id: 'pl3ws1--eq2',
				// 						},
				// 						{
				// 							name: '设备3',
				// 							id: 'pl3ws1--eq3',
				// 						},
				// 					],
				// 				},
				// 			],
				// 		},
				// 		{
				// 			name: '产线2',
				// 			id: 'pl2',
				// 			sections: [
				// 				{
				// 					name: '工段1',
				// 					id: 'pl2ws1',
				// 				},
				// 				{
				// 					name: '工段2',
				// 					id: 'pl2ws2',
				// 				},
				// 				{
				// 					name: '工段3',
				// 					id: 'pl2ws3',
				// 				},
				// 			],
				// 		},
				// 	],
				// },
			],
			tableList: [],
			queryParams: {
				id: null,
				time: [new Date(aWeekAgo), new Date(today)],
			},
			activeName: 'table',
			searchBarFormConfig: [
				{
					type: 'select',
					label: '工单名称',
					selectOptions: [],
					labelField: 'name',
					valueField: 'id',
					param: 'workOrderId',
					onchange: true,
					filterable: true,
				},
				{
					type: 'datePicker',
					label: '时间段',
					dateType: 'daterange', // datetimerange
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始日期',
					endPlaceholder: '结束日期',
					defaultTime: ['00:00:00', '23:59:59'],
					param: 'timeVal',
					width: 350,
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				// {
				// 	type: 'button',
				// 	btnName: '表格',
				// 	name: 'table',
				// 	plain: true,
				// 	color: 'success',
				// },
				// {
				// 	type: 'button',
				// 	btnName: '图表',
				// 	name: 'graph',
				// 	plain: true,
				// 	color: 'warning',
				// },
				{
					type: this.$auth.hasPermi('base:equipment-group:export')
						? 'button'
						: '',
					btnName: '导出',
					name: 'export',
					plain: true,
					color: 'success',
				},
			],
			tableProps: [
				{ prop: 'lineName', label: '产线' },
				{ prop: 'sectionName', label: '工段' },
				// { prop: 'externalCode', label: '设备编码' },
				{ prop: 'equipmentId', label: '设备编码' },
				{ prop: 'equipmentName', label: '设备名称' },
				{ prop: 'totalQuantity', label: '加工数量' },
			],
			mode: 'table', // table | graph
			queryParams: {
				// pageNo: 1,
				// pageSize: 999,
				recordTime: [],
				equipmentId: null,
				lineId: null,
				sectionId: null,
				productId: null,
			},
			list: [],
			treeProps: {
				children: 'children',
				label: 'label',
			},
		};
	},
	// mounted() {
	// },
	computed: {
		// id() {
		//   return this.$route.params.equipmentId;
		// },
		// code() {
		//   return this.$route.params.equipmentCode;
		// },
		// name() {
		//   return this.$route.params.equipmentName;
		// },
	},
	mounted() {
		this.getDict();
		// if (this.id) this.$set(this.queryParams, 'id', this.id);
		// if (this.code)
		//   this.$set(this.searchBarFormConfig[0], 'defaultSelect', this.code);
		// if (this.name)
		//   this.$set(this.searchBarFormConfig[1], 'defaultSelect', this.name);

		// this.handleResponse();
	},
	methods: {
		handleSearchBarChanged({ param, value }) {
			if (!value) {
				this.formConfig[0].selectOptions = [];
				return;
			}
			switch (param) {
				case 'workOrderId':
					this.getTree(value);
					break;
			}
		},
		getDict() {
			// 获取产品的属性列表
			// getCustomerList().then((response) => {
			//   console.log(response);
			//   this.customerList = response.data
			//   // this.listQuery.total = response.data.total;
			// })
			// getModelList().then((response) => {
			//   console.log(response);
			//   this.modelList = response.data
			//   // this.listQuery.total = response.data.total;
			// })
			getWorkOrderList().then((res) => {
				console.log(res);
				// console.log(response);
				this.searchBarFormConfig[0].selectOptions = res.data.map((item) => {
					return {
						name: item.name,
						id: item.id,
					};
				});
				// console.log(this.formConfig[0].selectOptions);
				// this.listQuery.total = response.data.total;
			});
		},
		buildProps(table) {
			console.log('building props', table);
			// 通过 otherList 来构建 props
			const { otherList } = table;
			const props = [
				{
					// type: 'index',
					width: 48,
					prop: 'index',
					label: '序号',
				},
				{
					width: 160,
					prop: 'time',
					label: '时间',
				},
				{
					width: 200,
					prop: 'plcCode',
					label: 'PLC编码',
				},
			];
			const firstLineData = {
				index: '参考值： [最小]-[最大][/标准]',
				time: null, // 此处必须是空白
				plcCode: null, // 此处必须是空白
			};
			otherList.forEach((item) => {
				props.push({
					label: item.name,
					prop: item.name,
					width: 128,
				});
				firstLineData[item.name] = `${item.minValue ?? ''}-${
					item.maxValue ?? ''
				}${item.defaultValue != null ? '/' + item.defaultValue : ''}`;
			});
			return { props, firstLineData };
		},

		handleResponse(response) {
			const { code, data } = response;
			if (code == 0) {
				// 处理一个表格
				data.forEach((table, index) => {
					console.log('handle index:', index, table);
					const { props: tableProps, firstLineData } = this.buildProps(table);
					this.$set(this.tableList, index, {
						key: 'base-table__key__' + index,
						tableProps,
						list: [firstLineData],
						dataManager: null,
						pageNo: 1,
						pageSize: 5,
						total: 0,
					});

					// 处理某一表格的各个行
					const { data } = table;
					if (data) {
						data.forEach((row, idx) => {
							const listItem = {
								index: idx + 1,
								time: moment(+row.time).format('YYYY-MM-DD HH:mm:ss'),
								plcCode: row.plcCode,
							};
							row.data.forEach((column) => {
								listItem[column.dynamicName] = column.dynamicValue;
							});
							this.tableList[index].list.push(listItem);
							this.tableList[index].total++;
						});

						// 处理分页
						const { pageNo, pageSize, list } = this.tableList[index];
						this.tableList[index].dataManager = new LocalDataManager(
							list,
							pageNo,
							pageSize
						);
					}
				});
			}
		},

		spanMethod({ row, column, rowIndex, columnIndex }) {
			if (rowIndex == 0 && columnIndex == 0) {
				return [1, 3];
			} else if (rowIndex == 0 && (columnIndex == 1 || columnIndex == 2)) {
				return [0, 0];
			}
			return [1, 1];
		},

		/** 查询 */
		async handleQuery() {
			this.handleResponse(
				await this.$axios({
					url: '/monitoring/equipment-monitor/runLog',
					method: 'get',
					params: this.queryParams,
				})
			);
		},

		async handleSearchBarBtnClick({ btnName, timeVal }) {
			if (timeVal && timeVal.length > 0) {
				this.queryParams.time = timeVal;
			} else {
				this.queryParams.time = [];
			}
			await this.handleQuery();
		},

		handleEmitFun(table, val) {
			console.log('table val', table, val);
		},

		/** 为某个 table 获取 list 数据 */
		getListFor(table, { page, limit, current }) {
			console.log('get list for', table, { page, limit, current });
			table.dataManager.pageNo = page ?? current;
			table.dataManager.pageSize = limit;
		},
		/** build side bar tree */
		buildTree(data) {
			data.forEach((factory) => {
				this.$set(factory, 'label', factory.name);
				this.$set(factory, 'type', '工厂');
				delete factory.name;
				// factory.children = factory.lines;
				// delete factory.lines;
				factory.children?.forEach((line) => {
					this.$set(line, 'label', line.name);
					this.$set(line, 'type', '产线');
					delete line.name;
					// line.children = line.sections;
					// delete line.sections;
					line.children?.forEach((ws) => {
						this.$set(ws, 'label', ws.name);
						this.$set(ws, 'type', '工段');
						delete ws.name;
						// ws.children = ws.equipments;
						// delete ws.equipments;
						ws.children?.forEach((eq) => {
							this.$set(eq, 'label', eq.name);
							this.$set(eq, 'type', '设备');
							delete eq.name;
						});
					});
				});
			});
		},

		async getTree(id) {
			getTreeData({ id: id }).then((res) => {
				console.log(res.data);
				this.sidebarContent = res.data;
				this.buildTree(res.data);
				console.log('tree', this.sidebarContent);
				// console.log(this.formConfig[0].selectOptions);
				// this.listQuery.total = response.data.total;
			});
			// const { data } = await this.$axios('/base/core-factory/getTreeByWorkOrder');
			// console.log(data)
		},

		handleTabClick(tab, event) {
			if (tab.name == 'graph') this.renderKey = Math.random();
		},

		factoryChangeHandler(event) {
			this.factoryListOpen = false;
			const fcId = event.target.dataset.value;
			this.handleSidebarItemClick({ id: fcId, type: '工厂' });
			this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
		},

		handleSidebarItemClick({ label, id, type }) {
			this.equipmentId = id;
			console.log('label clicked!', label, id, type);
			switch (type) {
				case '设备':
					this.queryParams.equipmentId = id;
					break;
				case '工段':
					this.queryParams.equipmentId = null;
					this.queryParams.sectionId = id;
					break;
				case '产线':
					this.queryParams.equipmentId = null;
					this.queryParams.sectionId = null;
					this.queryParams.lineId = id;
					break;
				case '工厂':
					this.queryParams.equipmentId = null;
					this.queryParams.sectionId = null;
					this.queryParams.lineId = null;
					break;
			}
		},

		handleEmitFun() {},
	},
};
</script>

<style scoped>
.side-bar__left {
	width: 240px;
	height: calc(100% - 70px);
}
.side-bar__left >>> .is-current {
	padding: 0;
	color: #111;
	/* background: #f2f4f7; */
	background: #e3efff !important;
}

.vvv-enter,
.vvv-leave-to {
	/* transform: translateY(24px) scaleY(0); */
	transform: translateY(24px);
	opacity: 0;
}

.vvv-enter-active,
.vvv-leave-active {
	transition: all 0.3s ease-out;
}

.vvv-enter-to,
.vvv-leave {
	/* transform: translateY(0) scaleY(1); */
	transform: translateY(0);
}

.custom-tabs >>> .el-tabs__header {
	margin-bottom: 8px;
	display: inline-block;
	transform: translateY(-12px);
}

.custom-tabs >>> .el-tabs__item {
	padding-left: 0px !important;
	padding-right: 0px !important;
	line-height: 36px !important;
	height: 36px;
}

.factory-list__selector {
	position: relative;
	height: 36px;
	font-size: 16px;
	line-height: 36px;
	padding-left: 28px;
	background: url(../../../../assets/images/factory-icon.png) 0 / 10% no-repeat;
}

.factory-list__selector:hover {
	cursor: pointer;
	color: #0008;
}

.factory-list__selector::after {
	/* content: ''; */
	position: absolute;
	top: 16px;
	right: 12px;
	display: inline-block;
	width: 8px;
	height: 8px;
	/* background: #5c5c5c; */
	border-color: #000;
	border-width: 4px;
	border-style: solid;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
}

.factory-list__selector:hover::after {
	/* cursor: pointer; */
	border-left-color: #0008;
}

.factory-list__wrapper {
	visibility: hidden;
	position: absolute;
	background: #fff;
	box-shadow: 0 0 32px 10px #0002;
	border-radius: 8px;
	top: 36px;
	left: 90px;
	/* max-width: 128px; */
	height: auto;
	width: auto;
	white-space: nowrap;
	overflow: hidden;
	/* transition: all 0.3s ease-out; */
	z-index: 1000;
}

.factory-list__wrapper.open {
	visibility: visible;
}

ul,
li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.factory-list {
	color: #0008;
	max-height: 240px;
	overflow-y: auto;
}

.factory-list__item {
	font-size: 16px;
	line-height: 1;
	padding: 8px 16px 8px 16px;
	min-width: 128px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.factory-list__item:hover,
.factory-list__item.is-current {
	background: #e3efff;
	color: #0b58ff;
}

/* .factory-list__item.is-current::after {
	content: '√';
	position: absolute;
	top: 8px;
	right: 16px;
	font-weight: bold;
} */

.custom-tree-class >>> .el-tree-node__content {
	width: 100%;
	height: auto !important;
	padding: 8px 12px !important;
}

.custom-tree-class >>> .el-tree-node__content:hover {
	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 {
	padding: 8px 24px !important;
}
</style>

<style>
.custom-icon-class {
	margin-right: 8px;
	width: 20px;
	height: 20px;
	background: url('../../../../assets/images/Qian.png') center center / contain
		no-repeat;
}

.custom-icon-class.el-tree-node__expand-icon.expanded {
	transform: unset;
}

.el-tree-node__children .custom-icon-class {
	background: url('../../../../assets/images/tree-icon-2.png') 100% / contain
		no-repeat;
}

.el-tree-node__children .el-tree-node__children .custom-icon-class {
	background: unset;
}
</style>