<template>
|
<div class="content page-branch">
|
<div class="filter-section">
|
<!-- 查询条件 -->
|
<el-form
|
style="flex: 1"
|
:inline="true"
|
:model="filterForm"
|
ref="filterForm"
|
class="g-table-filter"
|
>
|
<el-form-item label="分公司">
|
<el-select
|
style="width: 154px"
|
v-model="filterForm.companyId"
|
popper-class="safety-report-filter"
|
@change="handleChange"
|
>
|
<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-select
|
style="width: 154px"
|
v-model="filterForm.disScreen"
|
popper-class="safety-report-filter"
|
@change="disScreenChange"
|
>
|
<el-option
|
v-for="item in disScreenOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option
|
></el-select>
|
</el-form-item>
|
<el-form-item label="时间筛选">
|
<el-date-picker
|
v-if="filterForm.disScreen == 'month'"
|
v-model="timeRange"
|
type="monthrange"
|
placeholder=""
|
style="width: 184px"
|
:clearable="false"
|
@change="timeChange"
|
>
|
</el-date-picker>
|
<el-date-picker
|
v-if="filterForm.disScreen == 'day' || filterForm.disScreen == 'default'"
|
v-model="timeRange"
|
type="daterange"
|
placeholder=""
|
style="width: 244px"
|
:clearable="false"
|
@change="timeChange"
|
>
|
</el-date-picker>
|
<div v-if="filterForm.disScreen == 'year'">
|
<el-date-picker v-model="yearRange[0]" type="year" style="width: 100px" :clearable="false" @change="yearChange(0)"></el-date-picker>
|
<span style="display: inline-block; margin: 0 5px">-</span>
|
<el-date-picker v-model="yearRange[1]" type="year" style="width: 100px" :clearable="false" @change="yearChange(1)"></el-date-picker>
|
</div>
|
<quarter-picker-range v-model="timeRange" @change="timeChange" v-if="filterForm.disScreen == 'quarter'"></quarter-picker-range>
|
</el-form-item>
|
</el-form>
|
|
<div class="action-bar">
|
<div class="action-item orange pointer" @click="exportData">
|
数据导出
|
</div>
|
</div>
|
</div>
|
<!-- 数据表格 -->
|
<div class="g-table">
|
<el-table
|
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"
|
:default-sort="{prop: 'sumVolumePeople', order: 'descending'}"
|
ref="branchTable"
|
>
|
<el-table-column align="center" prop="companyName" label="分公司名称" width="120" fixed sortable="custom">
|
<template slot-scope="scope">{{
|
getDefault(scope.row.companyName)
|
}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="lineNum"
|
label="线路条数"
|
width="100"
|
sortable="custom"
|
/>
|
<el-table-column
|
align="center"
|
prop="vehicleNum"
|
label="车辆数量"
|
sortable="custom"
|
width="100"
|
/>
|
<el-table-column
|
align="center"
|
prop="driverNum"
|
label="司机数量"
|
sortable="custom"
|
width="100"
|
/>
|
<!-- <el-table-column
|
align="center"
|
prop="score"
|
label="评分"
|
sortable="custom"
|
></el-table-column> -->
|
<el-table-column
|
align="center"
|
prop="completionRate"
|
label="班次完成率"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{
|
getDefault(scope.row.completionRate)
|
}}%</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="onTimeRate"
|
label="班次发车准点率"
|
width="150"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.onTimeRate}}%</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="onTimeRateF"
|
label="首班准点率"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.onTimeRateF}}%</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="onTimeRateL"
|
label="末班准点率"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.onTimeRateL}}%</template>
|
</el-table-column>
|
<el-table-column align="center" prop="sumVolumePeople" label="客流总量(人)" width="140" sortable="custom">
|
<template slot-scope="scope">{{
|
getDefault(scope.row.sumVolumePeople)
|
}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="totalMileageByDay"
|
label="行驶总里程(km)"
|
width="150"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{
|
getDefault(scope.row.totalMileageByDay)
|
}}</template>
|
</el-table-column>
|
<el-table-column align="center" prop="complaintsNum" label="投诉数量" width="120" sortable="custom">
|
<template slot-scope="scope">{{
|
getDefault(scope.row.complaintsNum)
|
}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="planMileageRate"
|
label="计划里程完成率"
|
width="150"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.planMileageRate}}%</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="complaintsRate"
|
label="投诉率"
|
width="100"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.complaintsRate}}%</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="avgDepartureInterval"
|
label="平均发车间隔(分钟)"
|
width="180"
|
sortable="custom"
|
/>
|
|
<el-table-column
|
align="center"
|
prop="avgDepartureIntervalG"
|
label="高峰发车间隔(分钟)"
|
width="180"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="numberLargeIntervals"
|
label="大间隔次数"
|
width="120"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="operateShift"
|
label="线路班次"
|
width="100"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="mornPeakVolumePeople"
|
label="早高峰客流(人)"
|
width="140"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{getDefault(scope.row.mornPeakVolumePeople)}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="flatHumpVolumePeople"
|
label="平峰客流(人)"
|
width="140"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{getDefault(scope.row.flatHumpVolumePeople)}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="evePeakVolumePeople"
|
label="晚高峰客流(人)"
|
width="140"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{getDefault(scope.row.evePeakVolumePeople)}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="powerPerKm"
|
label="百公里电耗"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{decimal(scope.row.powerPerKm, 1)}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="vehicleIntactRate"
|
label="车辆完好率"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.vehicleIntactRate}}%</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="vehicleUseRate"
|
label="车辆利用率"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.vehicleUseRate}}%</template>
|
</el-table-column>
|
</el-table>
|
<div class="g-pagination">
|
<el-pagination
|
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>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moment from "moment";
|
import qs from "qs";
|
import quarterPickerRange from "@/components/quarterPicker/quarterPickerRange";
|
export default {
|
name: "branch",
|
components: {quarterPickerRange},
|
data() {
|
return {
|
loading: false,
|
filterForm: {
|
companyId: "",
|
disScreen: "default",
|
endDate: moment().format('yyyy-MM-DD') + ' 23:59:59',
|
startDate: moment().subtract(7, 'days').format('yyyy-MM-DD') + ' 00:00:00',
|
pageSize: 20,
|
pageNum: 1,
|
},
|
total: 0,
|
timeRange: [moment().subtract(7, 'days'), moment()],
|
yearRange: [],
|
companyList: [],
|
reRender: true,
|
disScreenOptions: [
|
{ label: "年", value: "year" },
|
{ label: "季度", value: "quarter" },
|
{ label: "月", value: "month" },
|
{ label: "日", value: "day" },
|
{ label: '默认', value: 'default'}
|
],
|
dataList: [],
|
};
|
},
|
mounted() {
|
if(this.reRender) {
|
if(this.$route.query.companyId){
|
this.filterForm.companyId = Number(this.$route.query.companyId)
|
}else {
|
this.filterForm.companyId = ''
|
}
|
this.getCompanyList();
|
if(this.$route.query.prop) {
|
let {prop, order} = this.$route.query;
|
this.$refs.branchTable.sort(prop, order);
|
}else {
|
this.filterForm.sortFx = 'DESC';
|
this.filterForm.sortWord = 'sumVolumePeople';
|
this.getList();
|
}
|
}
|
},
|
activated() {
|
if(!this.reRender) {
|
if(this.$route.query.companyId){
|
this.filterForm.companyId = Number(this.$route.query.companyId)
|
}else {
|
this.filterForm.companyId = ''
|
}
|
if(this.$route.query.prop) {
|
let {prop, order} = this.$route.query;
|
this.$refs.branchTable.sort(prop, order);
|
}else {
|
this.filterForm.sortFx = 'DESC';
|
this.filterForm.sortWord = 'sumVolumePeople';
|
this.getList();
|
}
|
this.getCompanyList();
|
}
|
},
|
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();
|
},
|
getCompanyList() {
|
this.$axios
|
.get(this.$Interface.companyList, {
|
params: {},
|
})
|
.then((res) => {
|
this.companyList = res.data;
|
this.companyList.unshift({
|
companyNum: "",
|
companyName: "全部",
|
});
|
});
|
},
|
handleChange() {
|
this.filterForm.pageNum = 1;
|
this.dataList = [];
|
this.getList();
|
},
|
disScreenChange() {
|
this.filterForm.startDate = "";
|
this.filterForm.endDate = "";
|
this.timeRange = null;
|
if(this.filterForm.disScreen == 'default'){
|
this.filterForm.endDate = moment().format('yyyy-MM-DD') + ' 23:59:59';
|
this.filterForm.startDate = moment().subtract(7, 'days').format('yyyy-MM-DD') + ' 00:00:00';
|
this.timeRange = [moment().subtract(7, 'days'), moment()];
|
}
|
this.handleChange();
|
},
|
timeChange(value) {
|
if (this.timeRange && Array.isArray(this.timeRange)) {
|
let start = this.timeRange[0];
|
let end = this.timeRange[1];
|
this.filterForm.startDate =
|
moment(start).format("yyyy-MM-DD") + " 00:00:00";
|
this.filterForm.endDate =
|
moment(end).format("yyyy-MM-DD") + " 23:59:59";
|
if (this.filterForm.disScreen == "month") {
|
this.filterForm.endDate =
|
moment(end).endOf("month").format("yyyy-MM-DD") + " 23:59:59";
|
}
|
if(this.filterForm.disScreen == 'quarter'){
|
this.filterForm.endDate = moment(end).add(2, 'month').endOf("month").format("yyyy-MM-DD") + " 23:59:59";
|
}
|
} else {
|
this.filterForm.startDate = "";
|
this.filterForm.endDate = "";
|
}
|
this.handleChange();
|
},
|
yearChange(index){
|
if(!this.yearRange[0] || !this.yearRange[1]){
|
return
|
}
|
if(this.yearRange[0].getTime() > this.yearRange[1].getTime()){
|
this.$message({
|
message: '开始时间应在结束时间之前，请重新选择！',
|
type: 'warning'
|
})
|
return;
|
}
|
this.filterForm.startDate = moment(this.yearRange[0]).format('yyyy-MM-DD HH:mm:ss');
|
this.filterForm.endDate = moment(this.yearRange[1]).format('yyyy') + '-12-31 23:59:59'
|
this.handleChange();
|
},
|
getList() {
|
this.loading = true;
|
const params = {};
|
if (this.filterForm.companyId) {
|
params.companyId = this.filterForm.companyId;
|
}
|
if (this.filterForm.startDate) {
|
params.startDate = this.filterForm.startDate;
|
params.endDate = this.filterForm.endDate;
|
}
|
if (this.filterForm.sortFx) {
|
params.sortFx = this.filterForm.sortFx;
|
params.sortWord = this.filterForm.sortWord;
|
}
|
this.$axios
|
.get(this.$Interface.basicResource.company, {
|
params: {
|
limit: this.filterForm.pageSize,
|
page: this.filterForm.pageNum,
|
disScreen: this.filterForm.disScreen,
|
...params,
|
},
|
})
|
.then((res) => {
|
this.dataList = res.data.records;
|
this.total = Number(res.data.total);
|
this.loading = false;
|
});
|
},
|
exportData() {
|
const params = {};
|
if (this.filterForm.companyId) {
|
params.companyId = this.filterForm.companyId;
|
}
|
if (this.filterForm.startDate) {
|
params.startDate = this.filterForm.startDate;
|
params.endDate = this.filterForm.endDate;
|
}
|
let token = localStorage.getItem("mtoken");
|
let _params = qs.stringify({
|
token,
|
disScreen: this.filterForm.disScreen,
|
...params,
|
});
|
let a = document.createElement("a");
|
a.href = `${
|
this.$exportBase + this.$Interface.basicResource.export.company
|
}?${_params}`;
|
a.click();
|
a = null;
|
},
|
pageChange(page) {
|
this.filterForm.pageNum = page;
|
this.getList();
|
},
|
},
|
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 {
|
text-align: right;
|
display: flex;
|
align-items: flex-start;
|
}
|
.table-container {
|
margin: 0 72px;
|
.pagination-block {
|
text-align: center;
|
margin-top: 20px;
|
}
|
/deep/.el-pagination__total {
|
color: #fff;
|
}
|
}
|
}
|
.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>
|
<style lang="less">
|
.page-branch .el-table tr {
|
background: #161e2f !important;
|
height: 40px;
|
}
|
.page-branch .el-table td.el-table__cell {
|
border-bottom: none !important;
|
padding: 0 !important;
|
.cell {
|
color: #fff;
|
}
|
}
|
.page-branch
|
.el-table--striped
|
.el-table__body
|
tr.el-table__row--striped
|
td.el-table__cell {
|
background: #182237 !important;
|
}
|
.page-branch .table-header th {
|
height: 54px !important;
|
background: rgba(255, 255, 255, 0.04) !important;
|
color: rgba(255, 255, 255, 0.85);
|
}
|
.page-branch .el-table {
|
background: none !important;
|
}
|
.page-branch .el-table::before {
|
height: 0 !important;
|
}
|
.page-branch .table-header {
|
background: none;
|
}
|
.page-branch .el-table th.el-table__cell.is-leaf {
|
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
}
|
.page-branch .el-table__empty-block {
|
background: rgba(60, 129, 255, 0.04);
|
}
|
.page-branch .el-table__body tr.current-row > td.el-table__cell {
|
background: rgba(60, 129, 255, 0.1) !important;
|
}
|
.page-branch
|
.el-table--striped
|
.el-table__body
|
tr.current-row.el-table__row--striped
|
td.el-table__cell {
|
background: rgba(60, 129, 255, 0.1) !important;
|
}
|
.page-branch
|
.el-table--enable-row-hover
|
.el-table__body
|
tr:hover
|
> td.el-table__cell {
|
background: rgba(60, 129, 255, 0.1) !important;
|
.cell {
|
color: #fff !important;
|
}
|
}
|
.page-branch {
|
.pagination-block {
|
.el-pagination.is-background .btn-next,
|
.el-pagination.is-background .btn-prev,
|
.el-pagination.is-background .el-pager li {
|
background: none;
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
color: rgba(255, 255, 255, 0.65);
|
}
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
background: #0179d0 !important;
|
}
|
.el-pagination.is-background .btn-next,
|
.el-pagination.is-background .btn-prev {
|
border: none !important;
|
}
|
}
|
.el-table--enable-row-hover .el-table__body tr:hover {
|
border: 1px solid rgba(0, 114, 194, 0.5);
|
}
|
.el-table--striped .el-table__body tr.current-row.el-table__row--striped {
|
border: 1px solid rgba(0, 114, 194, 0.5);
|
}
|
}
|
</style>
|
