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">
			<!-- 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">
				<SearchBar
					:formConfigs="searchBarFormConfig"
					ref="search-bar"
					@headBtnClick="handleSearchBarBtnClick" />

				<!-- tabs  -->
				<div class="table" v-if="mode == 'table'">
					<base-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>
				</div>

				<div class="graph" v-else>
					<!-- graph  -->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'EquipmentProcessAmount',
	components: {},
	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',
				// 				},
				// 			],
				// 		},
				// 	],
				// },
			],
			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: '产线', align: 'center' },
				{ prop: 'sectionName', label: '工段', align: 'center' },
				{ prop: 'externalCode', label: '设备编码', align: 'center' },
				{ prop: 'equipmentName', label: '设备名称', align: 'center' },
				{ prop: 'totalQuantity', label: '加工数量', align: 'center' },
			],
			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);
		},

		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;
}
</style>