|  |  | 
 |  |  | <template> | 
 |  |  |   <div class="main_app"> | 
 |  |  |     <QueryForm | 
 |  |  |       v-model="filters" | 
 |  |  |       :query-form-config="queryFormConfig" | 
 |  |  |       @handleQuery="getList(1)" | 
 |  |  |       @clear="clear" | 
 |  |  |     /> | 
 |  |  |     <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear"> | 
 |  |  |       <template #fastdate> | 
 |  |  |         <el-radio-group v-model="filters.fastdate" size="small" @input="changeRadio"> | 
 |  |  |           <el-radio-button label="0">当天</el-radio-button> | 
 |  |  |           <el-radio-button label="6">近7天</el-radio-button> | 
 |  |  |           <el-radio-button label="29">近30天</el-radio-button> | 
 |  |  |         </el-radio-group> | 
 |  |  |       </template> | 
 |  |  |     </QueryForm> | 
 |  |  |     <el-table v-loading="loading" :data="list" stripe> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="月台名称" | 
 |  |  |         min-width="100" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="月台组" | 
 |  |  |         min-width="100" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="停靠次数(次)" | 
 |  |  |         min-width="100" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="工作时长" | 
 |  |  |         min-width="100" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="月台使用率" | 
 |  |  |         min-width="100" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column prop="name" label="月台名称" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="groupName" label="月台组" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="stopCount" label="停靠次数(次)" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="workCountTime" label="工作时长" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="useRata" label="月台使用率" min-width="100" show-overflow-tooltip /> | 
 |  |  |     </el-table> | 
 |  |  |     <pagination | 
 |  |  |       @size-change="handleSizeChange" | 
 |  |  |       @current-change="getList" | 
 |  |  |       :pagination="pagination" | 
 |  |  |     /> | 
 |  |  |     <!-- <pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" /> --> | 
 |  |  |   </div> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import Pagination from '@/components/common/Pagination' | 
 |  |  | import QueryForm from '@/components/common/QueryForm' | 
 |  |  | import dayjs from 'dayjs' | 
 |  |  | import { platformWorkReportPage, getPlatformGroupList } from '@/api' | 
 |  |  | export default { | 
 |  |  |   components: { | 
 |  |  |     Pagination, | 
 |  |  |     QueryForm | 
 |  |  |   }, | 
 |  |  |   data () { | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       loading: false, | 
 |  |  |       pagination: { | 
 |  |  |         capacity: 10, | 
 |  |  |         page: 1 | 
 |  |  |         pageSize: 10, | 
 |  |  |         page: 1, | 
 |  |  |         total: 0 | 
 |  |  |       }, | 
 |  |  |       filters: {}, | 
 |  |  |       filters: { | 
 |  |  |         fastdate: 0, | 
 |  |  |         selDate: [] | 
 |  |  |       }, | 
 |  |  |       list: [], | 
 |  |  |       total: 0, | 
 |  |  |       queryFormConfig: { | 
 |  |  |         formItems: [ | 
 |  |  |           { | 
 |  |  |             filed: 'aaaa', | 
 |  |  |             filed: 'name', | 
 |  |  |             type: 'input', | 
 |  |  |             label: '月台名称' | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'bbb', | 
 |  |  |             filed: 'groupId', | 
 |  |  |             type: 'select', | 
 |  |  |             label: '月台组', | 
 |  |  |             placeholder: '全部月台组', | 
 |  |  |             options: [] | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             type: 'slot', | 
 |  |  |             filed: 'fastdate', | 
 |  |  |             label: '' | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'selDate', | 
 |  |  |             type: 'daterange', | 
 |  |  |             label: '选择时间' | 
 |  |  |             clearable: false, | 
 |  |  |             label: '日期' | 
 |  |  |           } | 
 |  |  |         ], | 
 |  |  |         online: true | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  |     this.changeRadio('0') | 
 |  |  |     this.getGroupList() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     handleSub () { | 
 |  |  |     changeRadio(day) { | 
 |  |  |       const arr = [dayjs().subtract(day, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')] | 
 |  |  |       this.$set(this.filters, 'selDate', arr) | 
 |  |  |       this.getList() | 
 |  |  |     }, | 
 |  |  |     handleSub() { | 
 |  |  |       this.$refs.ruleForm.validate((valid) => { | 
 |  |  |         if (valid) { | 
 |  |  |           alert('submit!') | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getList (page) { }, | 
 |  |  |     clear () { }, | 
 |  |  |     handleSizeChange (capacity) { | 
 |  |  |       this.pagination.capacity = capacity | 
 |  |  |     getGroupList() { | 
 |  |  |       getPlatformGroupList({ queryData: 0, queryType: 0 }).then(res => { | 
 |  |  |         this.queryFormConfig.formItems[1].options = res.map(i => { | 
 |  |  |           return { | 
 |  |  |             value: i.id, | 
 |  |  |             label: i.name | 
 |  |  |           } | 
 |  |  |         }) | 
 |  |  |         // this.queryFormConfig.formItems[1].options.unshift({ value: '', label: '全部月台组' }) | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getList(page) { | 
 |  |  |       const { pagination, filters } = this | 
 |  |  |       this.loading = true | 
 |  |  |       platformWorkReportPage({ | 
 |  |  |         ...filters, | 
 |  |  |         queryDateStart: filters.selDate && filters.selDate.length > 0 ? filters.selDate[0] : null, | 
 |  |  |         queryDateEnd: filters.selDate && filters.selDate.length > 0 ? filters.selDate[1] : null, | 
 |  |  |       }).then(res => { | 
 |  |  |         this.loading = false | 
 |  |  |         this.list = res || [] | 
 |  |  |         this.list.forEach(item => { | 
 |  |  |           item.useRata = item.useRata + '%' | 
 |  |  |           item.workCountTime = item.workCountTime + '时' | 
 |  |  |           // item.workTime = dayjs.duration(item.workTime, 'seconds').format('H时m分s秒') | 
 |  |  |         }) | 
 |  |  |       }, () => { | 
 |  |  |         this.loading = false | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     clear() { | 
 |  |  |       this.filters = { | 
 |  |  |         fastdate: 0, | 
 |  |  |         selDate: [] | 
 |  |  |       } | 
 |  |  |       this.changeRadio('0') | 
 |  |  |     }, | 
 |  |  |     handleSizeChange(capacity) { | 
 |  |  |       this.pagination.pageSize = capacity | 
 |  |  |       this.getList() | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style> | 
 |  |  | </style> | 
 |  |  | <style></style> |