diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 797c3eb5..a14aba84 100644
--- a/src/layout/components/AppMain.vue
+++ b/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 {
diff --git a/src/views/monitoring/equipmentProcessAmount/index.vue b/src/views/monitoring/equipmentProcessAmount/index.vue
index b183e91b..c8217bc4 100644
--- a/src/views/monitoring/equipmentProcessAmount/index.vue
+++ b/src/views/monitoring/equipmentProcessAmount/index.vue
@@ -6,36 +6,50 @@
 -->
 
 <template>
-	<div class="equipment-process-amount">
-		<!-- side bar  -->
-		<div class="side-bar__left"></div>
+	<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" />
 
-		<!-- 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
+				<!-- 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>
+					</base-table>
+				</div>
 
-			<div class="graph" v-else>
-				<!-- graph  -->
+				<div class="graph" v-else>
+					<!-- graph  -->
+				</div>
 			</div>
 		</div>
 	</div>
@@ -50,33 +64,43 @@ export default {
 		return {
 			sidebarContent: [
 				{
-					factory: '工厂',
-					children: [
+					id: 'fc1',
+					name: '工厂',
+					lines: [
 						{
-							pl: '产线1',
-							children: [
+							name: '产线1',
+							id: 'pl1',
+							sections: [
 								{
-									ws: '工段1',
+									name: '工段1',
+									id: 'pl1ws1',
 								},
 								{
-									ws: '工段2',
+									name: '工段2',
+									id: 'pl1ws2',
 								},
 								{
-									ws: '工段3',
+									name: '工段3',
+									id: 'pl1ws3',
 								},
 							],
 						},
+
 						{
-							pl: '产线2',
-							children: [
+							name: '产线2',
+							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',
-					label: '分组名称',
-					placeholder: '请输入设备分组名称',
-					param: 'name',
-				},
-				{
-					type: 'input',
-					label: '分组编码',
-					placeholder: '请输入设备分组编码',
-					param: 'codes',
+					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',
@@ -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: 'createTime',
-				// 	label: '添加时间',
-				// 	fixed: true,
-				// 	width: 180,
-				// 	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,
-				// 							});
-				// 						},
-				// 					},
-				// 				},
-				// 				'查看报警'
-				// 			);
-				// 		},
-				// 	},
-				// },
+				{ 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',
+			},
 		};
 	},
-	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>