yudao-dev/src/views/monitoring/equipmentProcessAmount/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">
			<div class="factory-list__selector" style="" title="点击切换工厂">
				{{ currentFactory || '工厂名称' }}
				<div class="factory-list__wrapper">
					<ul class="factory-list">
						<li
							v-for="fc in factoryList"
							:key="fc.id"
							@click="factoryChangeHandler"
							class="factory-list__item"></li>
					</ul>
				</div>
			</div>
			<!-- side bar  -->
			<div
				class="side-bar__left"
				style="width: 240px; padding: 12px; height: 100%">
				<el-tree
					:data="sidebarContent"
					:props="treeProps"
					@node-click="handleSidebarItemClick" />
			</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" />

				<el-row>
					<el-col class="custom-tabs">
						<el-tabs v-model="activeName" @tab-click="handleTabClick">
							<el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
								<base-table
									v-if="mode == 'table'"
									:table-props="tableProps"
									:page="1"
									:limit="999"
									:table-data="list"
									@emitFun="handleEmitFun">
									<!-- <method-btn
							v-if="tableBtn.length"
						slot="handleBtn"
						label="操作"
						:method-list="tableBtn"
						@clickBtn="handleTableBtnClick" /> -->
								</base-table>
							</el-tab-pane>
							<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
								<div class="graph" style="height: 56vh">
									<!-- graph  -->
									<Graph v-if="list.length" :equipment-list="list" />
									<div
										v-else
										style="
											color: #c7c7c7;
											text-align: center;
											margin-top: 20px;
										">
										没有设备
									</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</el-col>
				</el-row>

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

<script>
import Graph from './graph.vue';

export default {
	name: 'EquipmentProcessAmount',
	components: { Graph },
	props: {},
	data() {
		return {
			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',
				// 				},
				// 			],
				// 		},
				// 	],
				// },
			],
			activeName: 'table',
			searchBarFormConfig: [
				{
					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',
				// 	color: 'warning',
				// },
			],
			tableProps: [
				{ prop: 'lineName', label: '产线' },
				{ prop: 'sectionName', label: '工段' },
				{ prop: 'externalCode', 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() {
		this.getTree();
	},
	methods: {
		/** 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() {
			const { data } = await this.$axios('/base/factory/getTree');
			this.sidebarContent = data;
			this.buildTree(data);
			console.log('tree', this.sidebarContent);
		},

		handleTabClick(tab, event) {
			console.log('handle tab click: ', tab, event);
		},

		handleSidebarItemClick({ label, id, type }) {
			console.log('lable 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() {},

		handleSearchBarBtnClick(btn) {
			switch (btn.btnName) {
				case 'table':
					this.mode = 'table';
					break;
				case 'graph':
					this.mode = 'graph';
					break;
				case 'search':
					if (btn.timeVal != null && btn.timeVal.length > 0)
						this.queryParams.recordTime = btn.timeVal;
					else this.queryParams.recordTime = null;
					this.handleQuery();
					break;
			}
		},

		async handleQuery() {
			console.log('queryParams', this.queryParams);
			const { data } = await this.$axios({
				url: '/monitoring/equipment-monitor/quantity-det-list',
				method: 'get',
				params: this.queryParams,
			});
			this.list = data;
		},
	},
};
</script>

<style scoped>
.side-bar__left >>> .is-current {
	color: #111;
	background: #f2f4f7;
}

.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;
	left: 100px;
	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;
}
</style>