<template>
|
<div class="main_app">
|
<div class="mb20 main_header">
|
<div class="platgroup_tabs">
|
<div class="tab" :class="{ active: activeGroup.id === item.id }" @click="platgroupClick(item)"
|
v-for="(item, i) in PlatGroupList" :key="i">
|
{{ item.name }}
|
</div>
|
</div>
|
<div class="btns">
|
<!-- <el-button type="primary" @click="handleSet">刷新</el-button> -->
|
<el-button type="primary" class="ml20" @click="handleSet">配置月台</el-button>
|
</div>
|
</div>
|
<!-- -->
|
<div v-if="activeGroup.platformList" class="platform_list">
|
<div class="item" :class="{ emyty: item.workStatus == 0 }" v-for="(item, i) in activeGroup.platformList" :key="i">
|
<div class="head">
|
<div class="left">
|
<div class="status mr10">
|
{{ item.workStatus == "0" ? "空闲" : "作业中" }}
|
</div>
|
<div class="name">{{ item.name }}</div>
|
<div class="ite">
|
<span class="placeholder9">作业：</span><span>{{ item.platformWorkVO.workNum }}</span>
|
</div>
|
<div class="ite">
|
<span class="placeholder9">已叫：</span><span>{{ item.platformWorkVO.callNum }}</span>
|
</div>
|
<div class="ite">
|
<span class="placeholder9">等待：</span><span>{{ item.platformWorkVO.waitNum }}</span>
|
</div>
|
<div class="ite">
|
<span class="placeholder9">异常：</span><span class="red">{{ item.platformWorkVO.exceptionNum }}</span>
|
</div>
|
</div>
|
<el-button @click="handleQueuing(item, 1)">叫号入园</el-button>
|
<el-button type="primary" @click="handleQueuing(item, 2)">月台叫号</el-button>
|
</div>
|
<div class="list" v-if="item.platformWorkVO && item.platformWorkVO.platformJobList">
|
<div class="info" :class="{ err: task.status == 8 }" v-for="task in item.platformWorkVO.platformJobList"
|
:key="task.id">
|
<div class="line">
|
<div class="left">
|
<div v-if="task.carCodeFront" class="code">
|
<span>{{ task.carCodeFront.slice(0, 1) }}</span>
|
<span>{{ task.carCodeFront.slice(1, 2) }}</span>
|
<span>·</span>
|
<span>{{ task.carCodeFront.slice(2) }}</span>
|
</div>
|
</div>
|
<div class="right">
|
<div class="status_item" v-if="task.status != 4 && task.status != 5" :class="{ red: task.status == 8 }">
|
<span class="lab">{{ statusMap[task.status] }}</span>
|
</div>
|
<div class="status_item" v-if="task.status == 4">
|
<span class="lab">叫号中</span> {{ task.callDateTemp }}
|
</div>
|
<div class="status_item scs" v-if="task.status == 5">
|
<span class="lab">作业中</span> {{ task.startDateTemp }}
|
</div>
|
</div>
|
</div>
|
<div class="line">
|
<div v-if="task.billCode" style="width: 40%;" class="ite">
|
<span>运输单号：</span>
|
<span>{{ task.billCode }}</span>
|
</div>
|
<div v-else class="ite" style="width: 40%;">
|
<span>合同单号：</span>
|
<span>{{ task.contractNum }}</span>
|
</div>
|
<div class="ite jiashi">
|
<span>驾驶员：</span>
|
<span>{{ task.driverName }} {{ task.drivierPhone }}</span>
|
</div>
|
<!-- <div class="ite phone">
|
<span>手机号：</span>
|
<span>{{ task.drivierPhone }}</span>
|
</div> -->
|
<div class="ite" style="width: 40%">
|
<span>总运输量：</span>
|
<span>{{ task.totalNum }}万支</span>
|
</div>
|
<div v-if="task.billCode" class="ite" style="width: 60%">
|
<span>运输公司：</span>
|
<span>{{ task.carrierName }}</span>
|
</div>
|
<!-- <div class="ite"></div> -->
|
</div>
|
<div class="line">
|
<div class="left">
|
<span v-if="task.billCode" class="primaryColor pointer" @click="handleDetail(task)">运单详情</span>
|
<span v-else class="primaryColor pointer" @click="subDetail(task)">预约详情</span>
|
</div>
|
<div class="right">
|
<el-button v-if="task.status == 5" plain @click="handleErr(task)">异常挂起</el-button>
|
<el-button v-if="task.status == 5 || task.status == 8" plain
|
@click="handleTransform(item, task)">转移月台</el-button>
|
<el-button v-if="task.status == 4" plain @click="handlePass(task)">过号</el-button>
|
<el-button v-preventReClick :loading="loadingFinish" v-if="task.status == 5 || task.status == 8" type="primary"
|
@click="handleFinish(task)">作业完成</el-button>
|
<el-button v-preventReClick :loading="loadingOpen" v-if="task.status == 4" type="primary" @click="handleWork(task)">开始作业</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="!item.platformWorkVO.platformJobList || item.platformWorkVO.platformJobList.length == 0"
|
class="empty_plat">
|
<img src="@/assets/images/default_nodata.png" alt="">
|
<div>暂无车辆</div>
|
</div>
|
</div>
|
</div>
|
<!-- 配置显示月台 -->
|
<GlobalWindow title="配置显示月台" :visible.sync="isShowSet" :confirm-working="setLoading" @confirm="handleSetSub"
|
width="560px">
|
<div class="set_modal">
|
<div class="mb10" v-for="group in PlatGroupListSet" :key="group.id">
|
<div class="title">{{ group.name }}</div>
|
<div class="list">
|
<div class="item" @click="platformSetClick(item.id)" :class="{ active: item.showConfig }"
|
v-for="item in group.platformList" :key="item.id">
|
<div>{{ item.name }}</div>
|
<div v-if="item.showConfig" class="bg"></div>
|
<i v-if="item.showConfig" class="el-icon-check scs"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
</GlobalWindow>
|
<!-- 运单详情 -->
|
<!-- -->
|
<!-- 叫号 -->
|
<PlatformQueuing ref="PlatformQueuingRef" v-if="isShowQueuing" @success="getPlatGroupList"
|
@close="isShowQueuing = false" />
|
<WaybillDetail ref="WaybillDetailRef" v-if="isShowDetail" @success="getList" @close="isShowDetail = false" />
|
<DriverDetail v-if="isShowDriver" ref="DriverDetailRef" />
|
<el-dialog title="转移月台" :visible.sync="isShowTransform" width="500px" style="margin-top: 12vh">
|
<div class="df_ac">
|
<span>选择转移到的月台：</span>
|
<el-select v-model="activePlatId">
|
<el-option v-for="item in activeGroup.platformList" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowTransform = false">取消</el-button>
|
<el-button v-preventReClick type="primary" @click="transformSub">确定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getPlatformGroupList,
|
platformBeginWork,
|
platformFinishWork,
|
platformOverNumber,
|
platformErr,
|
platformMove,
|
updUserPlatformConfig,
|
|
listByGroupId
|
} from '@/api'
|
import PlatformQueuing from './components/PlatformQueuing.vue'
|
import WaybillDetail from './components/WaybillDetail.vue'
|
import DriverDetail from "@/views/task/driverDetail.vue"
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import dayjs from 'dayjs'
|
import duration from 'dayjs/plugin/duration'
|
import { Loading, Message } from 'element-ui'
|
import { statusMap } from './config'
|
dayjs.extend(duration)
|
export default {
|
components: {
|
PlatformQueuing,
|
WaybillDetail,
|
DriverDetail,
|
GlobalWindow
|
},
|
data() {
|
return {
|
statusMap,
|
activeGroup: {},
|
PlatGroupList: [],
|
PlatGroupListSet: [],
|
platList: [],
|
platCallList: [],
|
isShowTransform: false,
|
activePlatId: '', // 转移月台
|
activetaskId: '',
|
|
isShowSet: false, // 月台配置
|
setLoading: false,
|
|
setParam: {},
|
isShowDetail: false, // 运单详情
|
isShowDriver: false, // 预约详情
|
detail: {},
|
isShowQueuing: false,
|
timer: null,
|
|
loadingOpen: false,
|
loadingFinish: false,
|
}
|
},
|
created() {
|
setInterval(() => {
|
this.getPlatGroupList()
|
}, 1000 * 20)
|
this.getPlatGroupList()
|
},
|
methods: {
|
handleWork(item) {
|
this.loadingOpen = true
|
platformBeginWork({ jobId: item.id }).then(res => {
|
this.loadingOpen = false
|
Message.success('已开始作业')
|
this.getPlatGroupList()
|
}, () => {
|
this.loadingOpen = false
|
})
|
},
|
handleFinish(item) {
|
this.loadingFinish = true
|
platformFinishWork({ jobId: item.id }).then(res => {
|
this.loadingFinish = false
|
Message.success('完成作业')
|
this.getPlatGroupList()
|
},() => {
|
this.loadingFinish = false
|
})
|
},
|
handleTransform(item, task) {
|
this.activePlatId = item.id
|
this.activetaskId = task.id
|
this.isShowTransform = true
|
},
|
transformSub() {
|
const { activePlatId, activetaskId } = this
|
platformMove({ platformId: activePlatId, jobId: activetaskId }).then(res => {
|
Message.success('转移月台成功')
|
this.isShowTransform = false
|
this.getPlatGroupList()
|
})
|
},
|
handlePass(item) {
|
this.$confirm(`确认 ${item.carCodeFront}置为过号吗？过号后，需要重新签到才能进入园区`, '温馨提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
platformOverNumber({ jobId: item.id }).then(ress => {
|
Message.success('过号成功')
|
this.getPlatGroupList()
|
})
|
})
|
},
|
handleErr(item) {
|
this.$confirm('您确认要对该任务进行异常挂起吗', '温馨提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
platformErr({ jobId: item.id }).then(ress => {
|
Message.success('异常挂起成功')
|
this.getPlatGroupList()
|
})
|
})
|
},
|
platgroupClick(item) {
|
this.activeGroup = { ...item }
|
this.circulInitTaskList()
|
this.timer = setInterval(() => {
|
this.circulInitTaskList()
|
}, 1000)
|
},
|
getPlatGroupList() {
|
getPlatformGroupList({
|
queryData: 1,
|
queryType: 1
|
}).then(res => {
|
this.PlatGroupList = res || []
|
if (res.length > 0) {
|
if (this.activeGroup && this.activeGroup.id) {
|
this.activeGroup = res.find(item => item.id === this.activeGroup.id)
|
} else {
|
this.activeGroup = res[0]
|
}
|
this.circulInitTaskList()
|
this.timer = setInterval(() => {
|
this.circulInitTaskList()
|
}, 1000)
|
}
|
})
|
},
|
circulInitTaskList() {
|
if (this.activeGroup && this.activeGroup.platformList && this.activeGroup.platformList.length > 0) {
|
const time = new Date()
|
this.activeGroup.platformList.forEach(plat => {
|
if (plat.platformWorkVO.platformJobList && plat.platformWorkVO.platformJobList.length > 0) {
|
plat.platformWorkVO.platformJobList.forEach(item => {
|
if (item.newCallDate) {
|
const timeNum = time.getTime() - new Date(item.newCallDate).getTime()
|
if (timeNum > 3600000) {
|
item.callDateTemp = dayjs.duration(timeNum).format('H小时m分s秒')
|
} else {
|
item.callDateTemp = dayjs.duration(timeNum).format('m分s秒')
|
}
|
}
|
if (item.newStartDate) {
|
const timeNum = time.getTime() - new Date(item.newStartDate).getTime()
|
if (timeNum > 3600000) {
|
item.startDateTemp = dayjs.duration(timeNum).format('H小时m分s秒')
|
} else {
|
item.startDateTemp = dayjs.duration(timeNum).format('m分s秒')
|
}
|
}
|
})
|
}
|
})
|
this.$forceUpdate()
|
}
|
},
|
handleQueuing(item, callType) {
|
this.isShowQueuing = true
|
this.$nextTick(() => {
|
this.$refs.PlatformQueuingRef.isShowModal = true
|
this.$refs.PlatformQueuingRef.callType = callType
|
this.$refs.PlatformQueuingRef.carCodeFront = ''
|
this.$refs.PlatformQueuingRef.pagination = {
|
total: 0,
|
pageSize: 10,
|
page: 1
|
}
|
this.$refs.PlatformQueuingRef.activePlat = { ...item }
|
this.$refs.PlatformQueuingRef.getList()
|
this.$refs.PlatformQueuingRef.title = item.name
|
})
|
},
|
subDetail(row) {
|
this.isShowDriver = true
|
this.$nextTick(() => {
|
this.$refs.DriverDetailRef.id = row.bookId
|
this.$refs.DriverDetailRef.type = 6
|
this.$refs.DriverDetailRef.getDetail()
|
this.$refs.DriverDetailRef.isShowModal = true
|
})
|
},
|
handleDetail(row) {
|
this.isShowDetail = true
|
this.$nextTick(() => {
|
this.$refs.WaybillDetailRef.isShowModal = true
|
this.$refs.WaybillDetailRef.id = row.id
|
this.$refs.WaybillDetailRef.getDetail()
|
})
|
},
|
getList() {
|
const { groupId } = this
|
listByGroupId(groupId).then(res => {
|
this.platList = res
|
})
|
},
|
handleSet() {
|
this.isShowSet = true
|
getPlatformGroupList({
|
queryData: 0,
|
queryType: 1
|
}).then(res => {
|
this.PlatGroupListSet = res || []
|
})
|
},
|
handleSetSub() {
|
const { PlatGroupListSet } = this
|
const ids = []
|
PlatGroupListSet.forEach(item => {
|
item.platformList.forEach(platform => {
|
if (platform.showConfig) {
|
ids.push(platform.id)
|
}
|
})
|
})
|
this.setLoading = true
|
updUserPlatformConfig(ids).then(res => {
|
this.setLoading = false
|
Message.success('更新成功')
|
this.isShowSet = false
|
this.getPlatGroupList()
|
}, () => {
|
this.setLoading = false
|
})
|
},
|
platformSetClick(id) {
|
const { PlatGroupListSet } = this
|
PlatGroupListSet.forEach(item => {
|
item.platformList.forEach(platform => {
|
if (platform.id === id) {
|
platform.showConfig = !platform.showConfig
|
}
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
|
.platform_list {
|
width: 100%;
|
|
.item {
|
/* padding: 16px 24px; */
|
background: #ffffff;
|
border-radius: 2px;
|
border: 1px solid #dfe2e8;
|
margin-bottom: 12px;
|
width: 100%;
|
|
.head {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 50px;
|
background: linear-gradient(270deg, #FFFFFF 0%, #EBF6F7 100%);
|
border-radius: 2px 2px 0px 0px;
|
padding: 0 20px;
|
|
.shengyin {
|
width: 12px;
|
height: 12px;
|
margin-right: 3px;
|
}
|
|
.left {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
|
.name {
|
font-size: 16px;
|
margin-right: 50px;
|
}
|
|
.status {
|
line-height: 25px;
|
height: 25px;
|
background: #00ba67;
|
border-radius: 2px;
|
color: #ffffff;
|
padding: 0 6px;
|
}
|
|
.ite {
|
margin-right: 30px;
|
}
|
}
|
}
|
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 10px;
|
padding: 16px;
|
width: calc(100% - 0);
|
|
.info {
|
background: #f4fafb;
|
border-radius: 2px;
|
border: 1px solid #dfe2e8;
|
padding: 16px;
|
border-radius: 2px;
|
margin-bottom: 10px;
|
width: calc(31.6% - 22px);
|
margin-right: 10px;
|
|
&:nth-of-type(3n) {
|
margin-right: 0;
|
}
|
|
.status_item {
|
.lab {
|
font-weight: 500;
|
}
|
|
color: #00ba67;
|
}
|
|
.line {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
margin-bottom: 6px;
|
|
.ite {
|
width: 50%;
|
margin-top: 8px;
|
}
|
|
.jiashi {
|
width: 60%;
|
}
|
|
.phone {
|
width: 37.6%;
|
}
|
|
.left {
|
.code {
|
display: flex;
|
font-weight: 600;
|
height: 30px;
|
line-height: 30px;
|
font-size: 15px;
|
color: #111111;
|
background-color: #fff;
|
border-radius: 4px;
|
border: 1px solid $primaryColor;
|
padding-right: 4px;
|
|
span {
|
&:nth-of-type(1) {
|
background: $primaryColor;
|
padding: 0 8px;
|
color: #fff;
|
}
|
|
&:nth-of-type(2) {
|
padding-left: 4px;
|
}
|
}
|
}
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
|
.jobing {
|
background: #effbf5;
|
|
.status {
|
color: #00ba67;
|
}
|
}
|
|
.err {
|
background: #fef6f6;
|
|
.status {
|
color: #ed4545;
|
}
|
}
|
}
|
|
.empty_plat {
|
width: 100%;
|
height: 170px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
font-size: 12px;
|
color: #B2B2B2;
|
|
img {
|
width: 110px;
|
}
|
}
|
}
|
|
.emyty {
|
.head {
|
background: linear-gradient(270deg, #FFFFFF 0%, #F7F7F7 100%) !important;
|
}
|
|
.status {
|
background: #CCCCCC !important;
|
}
|
}
|
}
|
|
.main_header {
|
display: flex;
|
position: relative;
|
|
.platgroup_tabs {
|
flex: 1;
|
display: flex;
|
border-bottom: 1px solid #dfe2e8;
|
|
.tab {
|
color: #666666;
|
margin-right: 40px;
|
cursor: pointer;
|
padding-bottom: 18px;
|
border-bottom: 2px solid #fff;
|
}
|
|
.active {
|
font-weight: 500;
|
font-size: 15px;
|
color: #222222;
|
border-bottom: 2px solid $primary-color;
|
}
|
}
|
|
.btns {
|
position: absolute;
|
width: 180px;
|
height: 36px;
|
right: 0;
|
top: -4px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
|
/* */
|
.set_modal {
|
.title {
|
font-size: 16px;
|
font-weight: 600;
|
margin-bottom: 16px;
|
}
|
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
|
.item {
|
cursor: pointer;
|
padding: 0 36px;
|
height: 36px;
|
border: 1px solid #dfe2e8;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 2px;
|
margin-bottom: 10px;
|
margin-right: 13px;
|
position: relative;
|
overflow: hidden;
|
|
.bg {
|
position: absolute;
|
right: -12px;
|
bottom: -12px;
|
width: 24px;
|
height: 24px;
|
background: $primaryColor;
|
transform: rotate(45deg);
|
}
|
|
.scs {
|
position: absolute;
|
right: -1px;
|
bottom: -1px;
|
color: #fff;
|
z-index: 99999;
|
transform: scale(.8)
|
}
|
}
|
|
.active {
|
background: rgba(39, 155, 170, 0.06);
|
border: 1px solid $primaryColor;
|
color: $primaryColor;
|
}
|
}
|
}
|
|
/* */
|
/* */
|
</style>
|
