<template>
|
<div class="page-container colorfff">
|
<div class="nav">
|
<img
|
class="nav-icon"
|
:src="require('@/assets/safety/location.png')"
|
alt=""
|
/>
|
<div class="nav-content">
|
<span>司机评价 </span>
|
<i class="el-icon el-icon-arrow-right"></i>
|
<div class="pointer pos-rel" @click="drop = !drop">
|
{{ currentSelectedName
|
}}<i class="el-icon el-icon-caret-bottom" v-if="!drop"></i>
|
<i class="el-icon el-icon-caret-top" v-if="drop"></i>
|
<div class="dropdown_" v-show="drop" :key="drop">
|
<div
|
v-for="(item, index) in dropList"
|
:class="currentSelected == item.value ? 'active' : ''"
|
:key="index"
|
@click.stop="toggleSence(item)"
|
>
|
{{ item.label }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<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-input
|
style="width: 154px"
|
v-model="filterForm.driverName"
|
placeholder="请输入司机姓名并回车"
|
@keypress.enter.native="handleChange"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="性别">
|
<el-select
|
style="width: 154px"
|
v-model="filterForm.sex"
|
popper-class="safety-report-filter"
|
@change="handleChange"
|
>
|
<el-option
|
v-for="item in sexOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item label="分公司" v-if="userInfo.deptId == '1'">
|
<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.type"
|
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.type == '2'"
|
v-model="timeRange"
|
type="monthrange"
|
placeholder=""
|
style="width: 204px"
|
:clearable="false"
|
@change="timeChange"
|
>
|
</el-date-picker>
|
<el-date-picker
|
v-if="filterForm.type == '1' || filterForm.type == '3'"
|
v-model="timeRange"
|
type="daterange"
|
placeholder=""
|
:clearable="false"
|
style="width: 244px"
|
@change="timeChange"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
</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"
|
ref="driverList"
|
:default-sort="{prop: 'companyName', order: 'descending'}"
|
>
|
<el-table-column
|
align="center"
|
prop="driverName"
|
label="姓名"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="driverPhone"
|
label="手机号"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{getDefault(scope.row.driverPhone)}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="companyName"
|
label="所属分公司"
|
sortable="custom"
|
width="140"
|
>
|
<template slot-scope="scope">{{getDefault(scope.row.companyName)}}</template>
|
</el-table-column>
|
<el-table-column align="center" prop="dateStr" label="当班日期" v-if="filterForm.type != '3'"></el-table-column>
|
<el-table-column
|
align="center"
|
prop="postType"
|
label="岗位"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{getDefault(postMap[scope.row.postType])}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="driverWorkingHours"
|
label="工作时长(小时)"
|
sortable="custom"
|
width="170"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="accidentNumber"
|
label="事故次数"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="mile"
|
label="行驶里程(km)"
|
sortable="custom"
|
width="140"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="workTime"
|
label="在职时间(年)"
|
sortable="custom"
|
width="140"
|
>
|
<template slot-scope="scope">{{getDefault(scope.row.workTime)}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="complaintsNum"
|
label="投诉次数"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="sex"
|
label="性别"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.sex == '1' ? '男' : (scope.row.sex == '2' ? '女' : '保密')}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="violationNum"
|
label="违规次数"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.violationNum || '-'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="totalMile"
|
label="累计行驶总里程(km)"
|
width="180"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.totalMile || '-'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="totalDriverDuration"
|
label="累计驾驶时间"
|
width="140"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.totalDriverDuration || '-'}}</template>
|
</el-table-column>
|
<el-table-column label="操作" width="180px" align="center">
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
@click="editDriver(scope.row)"
|
>编辑</el-button>
|
</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>
|
|
<div class="mask" v-if="showDialog"></div>
|
<div class="dialog" v-if="showDialog">
|
<div class="title row">
|
<img
|
class="title-icon"
|
:src="require('@/assets/safety/icon_select.png')"
|
alt=""
|
/>
|
<span class="title-text">编辑司机详情</span>
|
</div>
|
<img
|
class="icon-close"
|
:src="require('@/assets/safety/icon_close_n.png')"
|
alt=""
|
@click="showDialog = false"
|
/>
|
|
<div class="filter-section">
|
<el-form :model="tempInfo" class="">
|
<el-form-item label="司机姓名：">
|
{{tempInfo.driverName}}
|
</el-form-item>
|
<el-form-item label="评价等级：">
|
<el-select v-model="tempInfo.level" style="width: 300px">
|
<el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<div>
|
<el-form-item label="岗位类型：">
|
<el-select v-model="tempInfo.postType" style="width: 300px">
|
<el-option v-for="item in postType" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
|
</el-form>
|
</div>
|
|
<div class="action-bar">
|
<div class="action-item orange pointer" @click="showDialog = false">
|
取消
|
</div>
|
<div class="action-item blue pointer" @click="updateDriver">确认</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
export default {
|
name: "driver",
|
data() {
|
return {
|
reRender: false,
|
dropList: [
|
{ label: "分公司", value: "1" },
|
{ label: "场站", value: "2" },
|
{ label: "线路", value: "3" },
|
{ label: "车辆", value: "4" },
|
{ label: "站点", value: "5" },
|
{ label: "司机", value: "6" },
|
{ label: "班次", value: "7" },
|
],
|
senceObj: { 1: "分公司", 2: "场站", 3: "线路", 4: "车辆", 5: "站点", 6: '司机', 7: '班次'},
|
drop: false,
|
currentSelected: "6",
|
currentSelectedName: "司机",
|
loading: false,
|
userInfo: {},
|
filterForm: {
|
companyId: "",
|
type: "3",
|
endDate: moment().format('yyyy-MM-DD'),
|
startDate: moment().subtract(7, 'day').format('yyyy-MM-DD'),
|
sex: '',
|
driverName: '',
|
pageSize: 20,
|
pageNum: 1,
|
},
|
timeRange: [moment().subtract(7, 'day'), moment()],
|
dataList: [ ],
|
disScreenOptions: [
|
{ label: "月", value: "2" },
|
{ label: "日", value: "1" },
|
{ label: "默认", value: "3" },
|
],
|
sexOptions: [
|
{label: '全部', value: ''},
|
{label: '男', value: '1'},
|
{label: '女', value: '2'},
|
],
|
companyList: [],
|
total: 0,
|
showDialog: false,
|
levelOptions: [{value: '0', label: '0'}, {value: '1', label: '1'},
|
{value: '2', label: '2'}, {value: '3', label: "3"}, {value: '4', label: '4'}, {value: '5', label: '5'}, {value: '6', label: '6'}, {value: '7', label: '7'}, {value: '8', label: '8'}, {value: '9', label: '9'}],
|
postType: [{value:'1', label:'营运司机'}, {value: '2', label: '非营运司机'}],
|
postMap: {
|
'1': '营运司机',
|
'2': '非营运司机'
|
},
|
tempInfo: {
|
driverName: '',
|
driverId: '',
|
level: '',
|
postType: ''
|
}
|
};
|
},
|
mounted() {
|
const that = this;
|
this.reRender = true
|
this.getCompanyList()
|
let userInfo = JSON.parse(localStorage.getItem('userInfo'));
|
if(userInfo){
|
this.userInfo = userInfo;
|
if(userInfo.deptId != '1'){
|
this.filterForm.companyId = userInfo.deptId;
|
}
|
}
|
if(this.$route.query.prop){
|
this.$nextTick(function (){
|
let {prop, order} = that.$route.query;
|
that.$refs.driverList.sort(prop, order);
|
})
|
}else {
|
this.$refs.driverList.sort('companyName', 'descending');
|
}
|
},
|
activated() {
|
if(!this.reRender){
|
console.log('执行了', this.$route.query)
|
if(this.$route.query.prop){
|
let {prop, order} = this.$route.query;
|
console.log(prop, order)
|
this.$refs.driverList.sort(prop, order);
|
}else {
|
this.$refs.driverList.sort('companyName', 'descending');
|
}
|
}
|
},
|
deactivated() {
|
this.reRender = false;
|
},
|
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();
|
},
|
toggleSence(item) {
|
this.drop = false;
|
if (!(item.value === "6")) {
|
this.$router.push("/branchOfficeResource?sence="+item.value);
|
}
|
},
|
getCompanyList() {
|
this.$axios
|
.get(this.$Interface.companyList, {
|
params: {},
|
})
|
.then((res) => {
|
for(let i=0; i<res.data.length; i++){
|
if(res.data[i].companyNum == 1){
|
res.data.splice(i, 1);
|
i--;
|
}
|
}
|
this.companyList = res.data;
|
this.companyList.unshift({
|
companyNum: "",
|
companyName: "全部",
|
});
|
});
|
},
|
|
handleChange() {
|
this.filterForm.pageNum = 1;
|
this.dataList = [];
|
this.getList();
|
},
|
timeChange() {
|
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.type == "2") {
|
this.filterForm.endDate =
|
moment(end).endOf("month").format("yyyy-MM-DD") + " 23:59:59";
|
}
|
this.handleChange();
|
},
|
getList() {
|
this.loading = true
|
const params = {}
|
if(this.filterForm.driverName) params.driverName = this.filterForm.driverName;
|
if(this.filterForm.sex) params.sex = this.filterForm.sex;
|
if(this.filterForm.companyId) params.companyId = this.filterForm.companyId;
|
if(this.filterForm.sortFx){
|
params.sortFx = this.filterForm.sortFx;
|
params.sortWord = this.filterForm.sortWord;
|
}
|
this.$axios
|
.get(this.$Interface.driver.list, {
|
params: {
|
limit: this.filterForm.pageSize,
|
page: this.filterForm.pageNum,
|
type: this.filterForm.type,
|
startDate: this.filterForm.startDate,
|
endDate: this.filterForm.endDate,
|
...params
|
},
|
})
|
.then((res) => {
|
this.dataList = res.data.records;
|
this.total = Number(res.data.total)
|
this.loading = false
|
});
|
},
|
pageChange(page) {
|
this.filterForm.pageNum = page;
|
this.getList();
|
},
|
disScreenChange(){
|
if(this.filterForm.type == '1' || this.filterForm.type == '3'){
|
this.timeRange = [moment().subtract(7, 'day'), moment()];
|
this.filterForm.startDate = moment().subtract(7, 'day').format('yyyy-MM-DD');
|
this.filterForm.endDate = moment().format('yyyy-MM-DD');
|
}else {
|
this.timeRange = [moment().subtract(1, 'month'), moment()];
|
this.filterForm.startDate = moment().subtract(1, 'month').startOf('month').format('yyyy-MM-DD');
|
this.filterForm.endDate = moment().endOf('month').format('yyyy-MM-DD');
|
}
|
this.handleChange();
|
},
|
editDriver(item){
|
this.showDialog = true
|
this.tempInfo.driverId = item.driverId
|
this.tempInfo.driverName = item.driverName;
|
this.tempInfo.postType = item.postType ? item.postType + '' : item.postType;
|
this.tempInfo.level = item.level;
|
},
|
updateDriver(){
|
if(!this.tempInfo.driverId || !this.tempInfo.postType){
|
this.$message({
|
message: '请完善评价等级和司机岗位信息！',
|
type: 'warning'
|
})
|
return
|
}
|
this.$axios.post(this.$Interface.driver.update, {
|
driverId: this.tempInfo.driverId,
|
level: Number(this.tempInfo.level),
|
postType: Number(this.tempInfo.postType)
|
}).then(res => {
|
this.$message({
|
message: '编辑成功！',
|
type: 'success'
|
});
|
this.showDialog = false;
|
this.getList();
|
})
|
}
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/common.css");
|
.page-container {
|
padding: 20px 30px;
|
padding-bottom: 0;
|
.nav {
|
display: flex;
|
font-size: 14px;
|
width: 100%;
|
height: 20px;
|
align-items: center;
|
position: relative;
|
.nav-icon {
|
width: 18px;
|
margin-left: 11px;
|
flex-shrink: 0;
|
margin-right: 11px;
|
}
|
.nav-content {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
.dropdown_ {
|
position: absolute;
|
z-index: 2100;
|
background: #06203f;
|
border-radius: 4px;
|
padding: 4px 0;
|
top: 30px;
|
left: -30px;
|
> div {
|
padding: 10px 20px;
|
width: 100px;
|
&.active {
|
background: rgba(20, 131, 242, 0.3);
|
}
|
}
|
> div:hover {
|
background: rgba(20, 131, 242, 0.3);
|
}
|
}
|
.dropdown_::before {
|
content: "";
|
position: absolute;
|
margin: auto;
|
width: 0;
|
height: 0;
|
border-left: 6px solid transparent;
|
border-right: 6px solid transparent;
|
border-bottom: 10px solid #06203f;
|
left: 0;
|
right: 0;
|
top: -10px;
|
}
|
}
|
}
|
}
|
</style>
|
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/common.css");
|
@orange: #1cd1d3;
|
@blue: #3e89d3;
|
.content {
|
margin-top: 16px;
|
.table-container {
|
margin: 0 72px;
|
.pagination-block {
|
text-align: center;
|
margin-top: 20px;
|
}
|
}
|
}
|
.action-bar {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
margin-left: 50px;
|
padding-top: 5px;
|
padding-right: 73px;
|
.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);
|
}
|
}
|
.mask {
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 10;
|
width: 100vw;
|
height: 100vh;
|
background: rgba(0, 0, 0, 0.8);
|
}
|
.dialog {
|
width: 690px;
|
height: 568px;
|
opacity: 1;
|
z-index: 100;
|
background: linear-gradient(180deg, #06203f, #08141c);
|
border: 2px solid #2a488a;
|
margin: auto;
|
position: fixed;
|
top: 230px;
|
left: 0;
|
right: 0;
|
.title {
|
.title-icon {
|
margin: 17px 20px;
|
margin-right: 8px;
|
width: 20px;
|
}
|
}
|
.icon-close {
|
position: absolute;
|
top: 0;
|
right: -3px;
|
width: 42px;
|
cursor: pointer;
|
}
|
|
.action-bar {
|
position: absolute;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
margin-top: 113px;
|
bottom: 60px;
|
.action-item:first-child {
|
margin-right: 96px;
|
}
|
.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);
|
}
|
}
|
.filter-section{
|
/deep/.el-form-item{
|
display: flex;
|
}
|
justify-content: center;
|
margin-right: 0;
|
margin-top: 80px;
|
}
|
}
|
.filter-section {
|
text-align: right;
|
display: flex;
|
align-items: flex-start;
|
margin-right: 70px;
|
/deep/input {
|
height: 32px;
|
background: rgba(0, 131, 250, 0.1);
|
border: 1px solid rgba(20, 131, 242, 0.6);
|
border-radius: 0;
|
font-size: 12px;
|
::placeholder {
|
font-size: 12px;
|
}
|
color: #fff !important;
|
}
|
/deep/.el-icon-arrow-up:before {
|
content: "\e78f";
|
}
|
/deep/.el-form-item__label {
|
color: #fff;
|
}
|
/deep/.el-icon-date::before {
|
content: "" !important;
|
}
|
/deep/.el-range-editor.el-input__inner {
|
background: none;
|
height: 32px;
|
background: rgba(0, 131, 250, 0.1);
|
border: 1px solid rgba(20, 131, 242, 0.6);
|
border-radius: 0;
|
font-size: 12px;
|
margin-top: 6px;
|
input {
|
border: none;
|
background: none;
|
}
|
.el-range-separator {
|
color: #fff;
|
line-height: 20px;
|
}
|
.el-range__close-icon {
|
line-height: 24px;
|
}
|
}
|
}
|
|
</style>
|
