<!-- 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>