<template>
|
<div class="v-views-basic-shift">
|
<el-form :model="filterForm" :inline="true" class="g-table-filter">
|
<el-form-item label="分公司">
|
<el-select
|
style="width: 154px"
|
v-model="filterForm.companyId"
|
popper-class="safety-report-filter"
|
@change="loadData"
|
>
|
<el-option
|
v-for="item in companyList"
|
:key="item.companyNum"
|
:label="item.companyName"
|
:value="item.companyNum"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="线路名称">
|
<el-input
|
style="width: 154px"
|
v-model="filterForm.routeName"
|
placeholder="请输入关键字并回车"
|
@keypress.enter.native="loadData"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="司机姓名">
|
<el-input
|
style="width: 154px"
|
v-model="filterForm.driverName"
|
placeholder="请输入司机姓名并回车"
|
@keypress.enter.native="loadData"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="时间筛选">
|
<el-date-picker
|
v-model="timeRange"
|
type="daterange"
|
placeholder=""
|
style="width: 244px"
|
:clearable="false"
|
@change="handleTimeChange"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-select
|
style="width: 154px"
|
v-model="filterForm.state"
|
popper-class="safety-report-filter"
|
@change="loadData"
|
>
|
<el-option
|
label="全部"
|
value=""
|
></el-option>
|
<el-option
|
label="未完成"
|
:value="1"
|
></el-option>
|
<el-option
|
label="晚点"
|
:value="2"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div class="g-table">
|
<el-table
|
:data="dataList"
|
:height="'calc(100vh - 400px)'"
|
stripe
|
v-loading="loading"
|
header-row-class-name="table-header"
|
highlight-current-row
|
@sort-change="handleChangeSort"
|
:default-sort = "{prop: 'ARRIVE_TIME', order: 'descending'}"
|
style="width: 100%"
|
>
|
<el-table-column
|
prop="orgName"
|
label="分公司"
|
sortable="custom"
|
sort-by="ORG_NAME"
|
align="center"
|
/>
|
<el-table-column
|
prop="routeName"
|
label="线路"
|
sortable="custom"
|
sort-by="ROUTE_NAME"
|
align="center"
|
/>
|
<el-table-column
|
prop="plate"
|
label="车辆"
|
align="center"
|
sort-by="PLATE"
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="empName"
|
label="司机"
|
align="center"
|
sort-by="EMP_NAME"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<div>{{ scope.row.empName || '-' }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="shiftNum"
|
label="班次"
|
align="center"
|
sort-by="SHIFT_NUM"
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="leaveTime"
|
label="计划发车"
|
sortable="custom"
|
sort-by="LEAVE_TIME"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<div>{{ timeFormat(scope.row.leaveTime) }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="realLeaveTime"
|
label="实际发车"
|
sortable="custom"
|
sort-by="REALLEAVETIME"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<div>{{ timeFormat(scope.row.realLeaveTime) }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="arriveTime "
|
label=" 计划到达"
|
sort-by="ARRIVE_TIME"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<div>{{ timeFormat(scope.row.arriveTime) }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="statisticalDate"
|
label="运营周期"
|
width="120"
|
sortable="custom"
|
sort-by="OPERATE_DURATION"
|
>
|
<template slot-scope="scope">{{scope.row.operateDuration || '-'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="statisticalDate"
|
label="准点率"
|
width="120"
|
sortable="custom"
|
sort-by="ON_TIME_RATE"
|
>
|
<template slot-scope="scope">{{`${scope.row.onTimeRate}%` || '-'}}</template>
|
</el-table-column>
|
<el-table-column
|
prop="realArrivetTime"
|
label="实际到达"
|
align="center"
|
sortable="custom"
|
sort-by="REALARRIVETTIME"
|
>
|
<template slot-scope="scope">
|
<div>{{ timeFormat(scope.row.realArrivetTime) }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="state"
|
label="状态"
|
sortable="custom"
|
sort-by="STATE"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<div>{{ state[scope.row.state] }}</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="g-pagination">
|
<el-pagination
|
layout="total, prev, pager, next"
|
:current-page="filterForm.pageNum"
|
:page-size="filterForm.limit"
|
:total="total"
|
background
|
prev-text="上一页"
|
next-text="下一页"
|
@current-change="handlePageChange"
|
></el-pagination>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import moment from "moment";
|
export default {
|
name: "shift",
|
data() {
|
return {
|
reRender: true,
|
loading: false,
|
timeRange: [moment().subtract(2, 'day'), moment()],
|
filterForm: {
|
limit: 20,
|
page: 1,
|
startDate: moment().subtract(2, 'day').format("yyyy-MM-DD") + " 00:00:00",
|
endDate: moment().format("yyyy-MM-DD") + " 23:59:59",
|
order: 'desc',
|
orderField: 'ARRIVE_TIME'
|
|
},
|
state: {
|
1: '未完成',
|
2: '晚点'
|
},
|
total: 0,
|
dataList: [],
|
companyList: [],
|
}
|
},
|
mounted() {
|
if(this.reRender) {
|
this.loadCompany();
|
this.loadData();
|
}
|
|
},
|
computed: {
|
},
|
activated() {
|
if(!this.reRender) {
|
this.loadCompany();
|
this.loadData();
|
}
|
},
|
methods: {
|
loadCompany() {
|
this.$axios.get(this.$Interface.companyList, {
|
params: {},
|
}).then((res) => {
|
this.companyList = res.data;
|
this.companyList.unshift({
|
companyNum: "",
|
companyName: "全部",
|
});
|
});
|
},
|
loadData() {
|
this.loading = true;
|
this.$axios
|
.get(this.$Interface.basicResource.getShiftFail, {
|
params: {
|
...this.filterForm,
|
},
|
})
|
.then((res) => {
|
this.dataList = res.data.list;
|
this.total = Number(res.data.total);
|
this.loading = false;
|
});
|
},
|
handlePageChange(page) {
|
this.filterForm.page = page;
|
this.loadData();
|
},
|
handleChangeSort(e, v) {
|
console.log(e, 'v', v);
|
let obj = {
|
'ascending': 'asc',
|
'descending': 'desc'
|
}
|
this.filterForm.order = e.order ? obj[e.order] : '';
|
this.filterForm.orderField = e.order ? (e.column && e.column.sortBy) : '';
|
this.loadData();
|
|
|
},
|
handleTimeChange(e) {
|
if(e[0]) {
|
this.filterForm.startDate = moment(e[0]).format("yyyy-MM-DD") + " 00:00:00";
|
this.filterForm.endDate = moment(e[1]).format("yyyy-MM-DD") + " 23:59:59";
|
this.loadData();
|
}
|
|
},
|
timeFormat(time) {
|
return time ? moment(time).format('yyyy-MM-DD, HH:mm:ss') : '-';
|
}
|
},
|
deactivated() {
|
this.reRender = false;
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.v-views-basic-shift {
|
margin-top: 16px;
|
}
|
|
|
</style>
|
