<template>
|
<div class="content page-branch">
|
<div class="filter-section">
|
<!-- 查询条件 -->
|
<el-form
|
style="flex: 1"
|
:inline="true"
|
:model="filterForm"
|
ref="filterForm"
|
v-show="!driverList"
|
class="g-table-filter"
|
>
|
<el-form-item label="线路名称">
|
<el-input
|
style="width: 154px"
|
v-model="filterForm.lineName"
|
placeholder="请输入关键字并回车"
|
@keypress.enter.native="handleChange"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="时间筛选">
|
<el-date-picker
|
v-model="timeRange"
|
type="daterange"
|
placeholder=""
|
style="width: 244px"
|
:clearable="false"
|
@change="timeChange"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
|
<el-form
|
style="flex: 1"
|
:inline="true"
|
:model="driverFilterForm"
|
ref="filterForm"
|
v-show="driverList"
|
class="g-table-filter"
|
>
|
<el-form-item label="时间筛选">
|
<el-date-picker
|
v-model="driverFilterForm.oneDate"
|
type="date"
|
placeholder=""
|
style="width: 134px"
|
:clearable="false"
|
@change="driverHandleChange"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
|
<div class="action-bar">
|
<div class="action-item orange pointer" @click="exportData" v-if="!driverList">数据导出</div>
|
<div
|
v-show="driverList"
|
@click="driverList = false"
|
class="action-item blue pointer"
|
style="margin-left: 20px"
|
>
|
返回车辆列表
|
</div>
|
</div>
|
</div>
|
<!-- 数据表格 -->
|
<div class="g-table">
|
<el-table
|
v-show="!driverList"
|
stripe
|
style="width: 100%"
|
header-row-class-name="table-header"
|
:height="'calc(100vh - 400px)'"
|
:data="dataList"
|
highlight-current-row
|
class="bs"
|
v-loading="loading"
|
@sort-change="handleSortChange"
|
ref="busTable"
|
>
|
<el-table-column
|
align="center"
|
prop="companyName"
|
label="所属公司"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.companyName || '-'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="plateNum"
|
label="车牌号"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="lineName"
|
label="线路"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="workHours"
|
label="工作时长(小时)"
|
sortable="custom"
|
width="170"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="sumVolumePeople"
|
label="累计客流(人)"
|
sortable="custom"
|
width="140"
|
>
|
<template slot-scope="scope">{{ scope.row.sumVolumePeople ? parseInt(scope.row.sumVolumePeople) : '0' }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="hasFlowCounter"
|
label="客流计数器"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{+scope.row.hasFlowCounter ? '有' : '无'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="hasCan"
|
label="can总线"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{+scope.row.hasCan ? '有' : '无'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="plannedShift"
|
label="计划班次"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="operateShift"
|
label="实际班次"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="mileageAccumulatedOnTheDay"
|
label="行驶里程(km)"
|
width="140"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="completionRate"
|
label="班次完成率"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{ decimal(scope.row.completionRate, 2) }}%</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="onTimeRate"
|
label="发车准点率"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{ decimal(scope.row.onTimeRate, 2) }}%</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="mileageAccumulatedOnTheDayThisYear"
|
label="年行驶里程(km)"
|
width="140"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column label="操作" width="130px" align="center">
|
<template slot-scope="scope">
|
<el-button type="text" @click="showDriverList(scope.row.plateNum)">查看驾驶员</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-table
|
v-show="driverList"
|
stripe
|
style="width: 100%"
|
header-row-class-name="table-header"
|
:height="'calc(100vh - 400px)'"
|
:data="driverDataList"
|
highlight-current-row
|
class="bs"
|
v-loading="loading"
|
:default-sort="{prop: 'sumVolumePeople', order: 'descending'}"
|
>
|
<el-table-column
|
align="center"
|
prop="driverName"
|
label="驾驶员名称"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="companyName"
|
label="所属分公司"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="driverWorkingHours"
|
label="工作时长(小时)"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="level"
|
label="评价等级"
|
>
|
</el-table-column>
|
</el-table>
|
|
|
<div class="g-pagination">
|
<el-pagination
|
v-show="!driverList"
|
layout="total, prev, pager, next"
|
:total="total"
|
:current-page="filterForm.pageNum"
|
:page-size="filterForm.pageSize"
|
background
|
prev-text="上一页"
|
next-text="下一页"
|
@current-change="pageChange"
|
></el-pagination>
|
|
<el-pagination
|
v-show="driverList"
|
layout="total, prev, pager, next"
|
:total="driverTotal"
|
:current-page="driverFilterForm.pageNum"
|
:page-size="driverFilterForm.pageSize"
|
background
|
prev-text="上一页"
|
next-text="下一页"
|
@current-change="driverPageChange"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment';
|
import qs from 'qs'
|
|
export default {
|
name: "bus",
|
data() {
|
return {
|
plate: '',
|
reRender: true,
|
total: 0,
|
driverTotal: 0,
|
driverList: false,
|
filterForm: {
|
lineName: "",
|
endDate: moment().format('yyyy-MM-DD'),
|
startDate: moment().subtract(7, 'day').format('yyyy-MM-DD'),
|
pageSize: 20,
|
pageNum: 1,
|
},
|
driverFilterForm: {
|
oneDate: new Date(),
|
pageSize: 20,
|
pageNum: 1,
|
},
|
timeRange: [moment().subtract(7, 'day'), moment()],
|
dataList: [],
|
driverDataList: [],
|
loading: false
|
};
|
},
|
mounted() {
|
if (this.reRender) {
|
if (this.$route.query.prop) {
|
let {prop, order} = this.$route.query;
|
this.$refs.busTable.sort(prop, order);
|
} else {
|
this.$refs.busTable.sort('sumVolumePeople', 'descending');
|
// this.getList();
|
}
|
}
|
},
|
activated() {
|
if (!this.reRender) {
|
// this.getList();
|
if (this.$route.query.prop) {
|
let {prop, order} = this.$route.query;
|
this.$refs.busTable.sort(prop, order);
|
} else {
|
this.$refs.busTable.sort('sumVolumePeople', 'descending');
|
// this.getList();
|
}
|
}
|
},
|
methods: {
|
handleSortChange(opt) {
|
let {prop, order} = opt;
|
this.filterForm.sortWord = prop;
|
switch (order) {
|
case 'ascending':
|
this.filterForm.sortFx = 'ASC';
|
break;
|
case 'descending':
|
this.filterForm.sortFx = 'DESC';
|
break;
|
default:
|
this.filterForm.sortFx = '';
|
}
|
this.getList();
|
},
|
handleChange() {
|
this.filterForm.pageNum = 1;
|
this.dataList = [];
|
this.getList();
|
},
|
driverHandleChange() {
|
this.driverFilterForm.pageNum = 1;
|
this.driverDataList = [];
|
this.getDriverList();
|
},
|
timeChange() {
|
if (this.timeRange && this.timeRange.length) {
|
let start = this.timeRange[0], end = this.timeRange[1];
|
this.filterForm.startDate = moment(start).format('yyyy-MM-DD');
|
this.filterForm.endDate = moment(end).format('yyyy-MM-DD');
|
} else {
|
this.filterForm.startDate = '';
|
this.filterForm.endDate = '';
|
}
|
this.handleChange();
|
},
|
getList() {
|
this.loading = true;
|
const params = {};
|
if (this.filterForm.endDate) {
|
params.startDate = this.filterForm.startDate;
|
params.endDate = this.filterForm.endDate;
|
}
|
if (this.filterForm.lineName) {
|
params.lineName = this.filterForm.lineName;
|
}
|
if (this.filterForm.sortFx) {
|
params.sortFx = this.filterForm.sortFx;
|
params.sortWord = this.filterForm.sortWord;
|
}
|
this.$axios
|
.get(this.$Interface.basicResource.bus, {
|
params: {
|
limit: this.filterForm.pageSize,
|
page: this.filterForm.pageNum,
|
...params
|
},
|
})
|
.then((res) => {
|
this.dataList = res.data.records;
|
this.total = Number(res.data.total);
|
this.loading = false
|
});
|
},
|
getDriverList() {
|
this.$axios.get(this.$Interface.basicResource.busPerson, {
|
params: {
|
startDate: this.driverFilterForm.oneDate ? moment(this.driverFilterForm.oneDate).format('yyyy-MM-DD') : null,
|
plate: this.plate
|
}
|
}).then(res => {
|
this.driverDataList = res.data;
|
})
|
},
|
exportData() {
|
const params = {};
|
if (this.filterForm.endDate) {
|
params.startDate = this.filterForm.startDate;
|
params.endDate = this.filterForm.endDate;
|
}
|
if (this.filterForm.lineName) {
|
params.lineName = this.filterForm.lineName;
|
}
|
let token = localStorage.getItem('mtoken');
|
let _params = qs.stringify({
|
token,
|
...params,
|
});
|
let a = document.createElement('a');
|
a.href = `${this.$exportBase + this.$Interface.basicResource.export.bus}?${_params}`;
|
a.click();
|
a = null;
|
},
|
pageChange(page) {
|
this.filterForm.pageNum = page;
|
this.getList();
|
},
|
driverPageChange(page) {
|
this.driverFilterForm.pageNum = page;
|
this.getDriverList();
|
},
|
getPlayBack() {
|
this.playBack = true;
|
},
|
showDriverList(plate) {
|
this.driverList = true;
|
this.plate = plate;
|
this.getDriverList();
|
}
|
},
|
deactivated() {
|
this.reRender = false;
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/common.css");
|
@orange: #1cd1d3;
|
@blue: #3e89d3;
|
.content {
|
margin-top: 16px;
|
|
.filter-section {
|
display: flex;
|
align-items: flex-start;
|
text-align: right;
|
}
|
|
.action-bar {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
margin-left: 50px;
|
padding-top: 5px;
|
|
.action-item {
|
padding: 8px 30px;
|
border-left: 2px solid;
|
border-right: 2px solid;
|
opacity: 0.8;
|
}
|
|
.orange {
|
border-color: @orange;
|
background-color: rgba(28, 209, 211, 0.1);
|
}
|
|
.blue {
|
border-color: @blue;
|
background-color: rgba(62, 137, 211, 0.1);
|
}
|
}
|
}
|
</style>
|
