|  |  |  | 
|---|
|  |  |  | <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 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | <style></style> | 
|---|