src/layout/components/AppMain.vue

@@ -46,6 +46,8 @@ export default {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 120px - 8px);
+    display: flex;
+    flex-direction: column;
   }
 
   .fixed-header + .app-main {

src/views/monitoring/equipmentProcessAmount/index.vue

@@ -6,10 +6,23 @@
 -->
 
 <template>
-	<div class="equipment-process-amount">
+	<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"></div>
+			<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
@@ -39,6 +52,7 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </template>
 
 <script>
@@ -50,33 +64,43 @@ export default {
 		return {
 			sidebarContent: [
 				{
-					factory: '工厂',
+					id: 'fc1',
-					children: [
+					name: '工厂',
+					lines: [
 						{
-							pl: '产线1',
+							name: '产线1',
-							children: [
+							id: 'pl1',
+							sections: [
 								{
-									ws: '工段1',
+									name: '工段1',
+									id: 'pl1ws1',
 								},
 								{
-									ws: '工段2',
+									name: '工段2',
+									id: 'pl1ws2',
 								},
 								{
-									ws: '工段3',
+									name: '工段3',
+									id: 'pl1ws3',
 								},
 							],
 						},
+
 						{
-							pl: '产线2',
+							name: '产线2',
-							children: [
+							id: 'pl2',
+							sections: [
 								{
-									ws: '工段1',
+									name: '工段1',
+									id: 'pl2ws1',
 								},
 								{
-									ws: '工段2',
+									name: '工段2',
+									id: 'pl2ws2',
 								},
 								{
-									ws: '工段3',
+									name: '工段3',
+									id: 'pl2ws3',
 								},
 							],
 						},
@@ -85,16 +109,17 @@ export default {
 			],
 			searchBarFormConfig: [
 				{
-					type: 'input',
+					type: 'datePicker',
-					label: '分组名称',
+					label: '时间段',
-					placeholder: '请输入设备分组名称',
+					dateType: 'daterange', // datetimerange
-					param: 'name',
+					format: 'yyyy-MM-dd',
-				},
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
-				{
+					rangeSeparator: '-',
-					type: 'input',
+					startPlaceholder: '开始日期',
-					label: '分组编码',
+					endPlaceholder: '结束日期',
-					placeholder: '请输入设备分组编码',
+					defaultTime: ['00:00:00', '23:59:59'],
-					param: 'codes',
+					param: 'timeVal',
+					width: 350,
 				},
 				{
 					type: 'button',
@@ -102,79 +127,77 @@ export default {
 					name: 'search',
 					color: 'primary',
 				},
-				{
-					type: 'separate',
-				},
-				{
-					type: this.$auth.hasPermi('base:equipment-group:create')
-						? 'button'
-						: '',
-					btnName: '新增',
-					name: 'add',
-					plain: true,
-					color: 'success',
-				},
-				// {
-				// 	type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
-				// 	btnName: '导出',
-				// 	name: 'export',
-				// 	color: 'warning',
-				// },
 			],
 			tableProps: [
-				// {
+				{ prop: 'lineName', label: '产线', align: 'center' },
-				// 	prop: 'createTime',
+				{ prop: 'sectionName', label: '工段', align: 'center' },
-				// 	label: '添加时间',
+				{ prop: 'externalCode', label: '设备编码', align: 'center' },
-				// 	fixed: true,
+				{ prop: 'equipmentName', label: '设备名称', align: 'center' },
-				// 	width: 180,
+				{ prop: 'totalQuantity', label: '加工数量', align: 'center' },
-				// 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
-				// },
-				{ prop: 'name', label: '产线', align: 'center' },
-				{ prop: 'code', label: '工段', align: 'center' },
-				{ prop: 'remark', label: '设备编码', align: 'center' },
-				{ prop: 'remark', label: '设备名称', align: 'center' },
-				{ prop: 'remark', label: '加工数量', align: 'center' },
-				// {
-				// 	_action: 'equipment-group-show-alert',
-				// 	label: '报警',
-				// 	align: 'center',
-				// 	subcomponent: {
-				// 		props: ['injectData'],
-				// 		render: function (h) {
-				// 			const _this = this;
-				// 			return h(
-				// 				'el-button',
-				// 				{
-				// 					props: { type: 'text', size: 'mini' },
-				// 					on: {
-				// 						click: function () {
-				// 							console.log('inejctdata', _this.injectData);
-				// 							_this.$emit('emitData', {
-				// 								action: _this.injectData._action,
-				// 								// value: _this.injectData.id,
-				// 								value: _this.injectData,
-				// 							});
-				// 						},
-				// 					},
-				// 				},
-				// 				'查看报警'
-				// 			);
-				// 		},
-				// 	},
-				// },
 			],
 			mode: 'table', // table | graph
 			queryParams: {
 				pageNo: 1,
 				pageSize: 999,
+				recordTime: [],
+				equipmentId: null,
+				lineId: null,
+				sectionId: null,
+				productId: null,
 			},
 			list: [],
+			treeProps: {
+				children: 'children',
+				label: 'label',
+			},
 		};
 	},
-	computed: {},
+	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() {},
+
+		handleSearchBarBtnClick(btn) {
+			console.log('btn', btn);
+			this.queryParams.recordTime = btn.timeVal;
+			this.handleQuery();
+		},
+
+		handleQuery() {
+			console.log(this.queryParams)
+		}
 	},
 };
 </script>