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="queryParams.pageNo"
						:limit="queryParams.pageSize"
						: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',
								},
								{
									name: '工段2',
									id: 'pl1ws2',
								},
								{
									name: '工段3',
									id: 'pl1ws3',
								},
							],
						},

						{
							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',
				},
			],
			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.getList();
	},
	methods: {
		/** build side bar tree */
		buildTree(data) {
			data.forEach((factory) => {
				this.$set(factory, 'label', factory.name);
				delete factory.name;
				factory.children = factory.lines;
				delete factory.lines;
				factory.children.forEach((line) => {
					this.$set(line, 'label', line.name);
					delete line.name;
					line.children = line.sections;
					delete line.sections;
					line.children.forEach((ws) => {
						this.$set(ws, 'label', ws.name);
						delete ws.name;
					});
				});
			});
		},

		async getList() {
			this.buildTree(this.sidebarContent);
			console.log('sidebar final', this.sidebarContent);
		},

		

		handleSidebarItemClick({ label, id }) {
			console.log('lable clicked!', label, id);
		},

		handleEmitFun() {},

		handleSearchBarBtnClick(btn) {
			console.log('btn', btn);
			this.queryParams.recordTime = btn.timeVal;
			this.handleQuery();
		},

		handleQuery() {
			console.log(this.queryParams)
		}
	},
};
</script>

<style scoped lang="scss"></style>