<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>
|
<!-- <el-tabs v-model="activeGroup.id" @tab-click="platgroupClick">
|
<el-tab-pane
|
v-for="item,i in PlatGroupList"
|
:key="i"
|
:label="item.name"
|
:name="String(item.id)"
|
/>
|
</el-tabs> -->
|
</div>
|
<el-button type="primary" class="ml20" @click="handleSet"
|
>配置月台</el-button
|
>
|
</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 type="primary" @click="handleQueuing(item)">
|
<div class="df_ac">
|
<img class="shengyin" src="@/assets/icons/shengyin.png" alt="">
|
<span>叫号</span>
|
</div>
|
</el-button>
|
</div>
|
<div
|
class="list"
|
v-if="item.platformWorkVO && item.platformWorkVO.platformJobList"
|
>
|
<div
|
class="info"
|
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"
|
v-if="task.status != 4 && task.status != 5"
|
:class="{ red: task.status == 8 }"
|
>
|
<span class="lab">{{ statusMap[task.status] }}</span>
|
</div>
|
<div class="status" v-if="task.status == 4">
|
<span class="lab">叫号中</span> {{ task.callDateTemp }}
|
</div>
|
<div class="status scs" v-if="task.status == 5">
|
<span class="lab">已作业</span> {{ task.startDateTemp }}
|
</div>
|
</div>
|
</div>
|
<div class="line">
|
<div v-if="task.type == 4" class="ite">
|
<span>合同单号：</span>
|
<span>{{ task.contractNum }}</span>
|
</div>
|
<div v-else class="ite">
|
<span>运输单号：</span>
|
<span>{{ task.code }}</span>
|
</div>
|
<div class="ite">
|
<span>驾驶员：</span>
|
<span>{{ task.driverName }}</span>
|
</div>
|
<div class="ite">
|
<span>手机号：</span>
|
<span>{{ task.drivierPhone }}</span>
|
</div>
|
<div class="ite">
|
<span>总运输量：</span>
|
<span>{{ task.totalNum }}万支</span>
|
</div>
|
<div v-if="task.type != 4" class="ite" style="width: 66.6%">
|
<span>运输公司：</span>
|
<span>{{ task.carrierName }}</span>
|
</div>
|
<div class="ite"></div>
|
</div>
|
<div class="line">
|
<div v-if="task.type != 4" class="left">
|
<span class="primaryColor pointer" @click="handleDetail"
|
>运单详情</span
|
>
|
</div>
|
<div v-else></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-if="task.status == 5 || task.status == 8"
|
type="primary"
|
@click="handleFinish(task)"
|
>作业完成</el-button
|
>
|
<el-button
|
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 PlatGroupList" :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"
|
/>
|
<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 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 GlobalWindow from '@/components/common/GlobalWindow'
|
import dayjs from 'dayjs'
|
import duration from 'dayjs/plugin/duration'
|
import { Message } from 'element-ui'
|
import { statusMap } from './config'
|
dayjs.extend(duration)
|
export default {
|
components: {
|
PlatformQueuing,
|
WaybillDetail,
|
GlobalWindow
|
},
|
data () {
|
return {
|
statusMap,
|
activeGroup: {},
|
PlatGroupList: [],
|
platList: [],
|
platCallList: [],
|
isShowTransform: false,
|
activePlatId: '', // 转移月台
|
activetaskId: '',
|
|
isShowSet: false, // 月台配置
|
setLoading: false,
|
|
setParam: {},
|
isShowDetail: false, // 运单详情
|
detail: {},
|
isShowQueuing: false,
|
timer: null
|
}
|
},
|
created () {
|
this.getPlatGroupList()
|
// this.getList()
|
},
|
methods: {
|
handleWork (item) {
|
platformBeginWork({ jobId: item.id }).then(res => {
|
Message.success('已开始作业')
|
this.getPlatGroupList()
|
})
|
},
|
handleFinish (item) {
|
platformFinishWork({ jobId: item.id }).then(res => {
|
Message.success('完成作业')
|
this.getPlatGroupList()
|
})
|
},
|
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('您确认要对该任务进行过号吗', '温馨提示', {
|
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.callDate) {
|
const timeNum = time.getTime() - new Date(item.callDate).getTime()
|
if (timeNum > 3600000) {
|
item.callDateTemp = dayjs.duration(timeNum).format('H小时m分s秒')
|
} else {
|
item.callDateTemp = dayjs.duration(timeNum).format('m分s秒')
|
}
|
}
|
if (item.startDate) {
|
const timeNum = time.getTime() - new Date(item.startDate).getTime()
|
if (timeNum > 3600000) {
|
item.startDateTemp = dayjs.duration(timeNum).format('H小时m分ss秒')
|
} else {
|
item.startDateTemp = dayjs.duration(timeNum).format('m分s秒')
|
}
|
}
|
})
|
}
|
})
|
this.$forceUpdate()
|
}
|
},
|
handleQueuing (item) {
|
this.isShowQueuing = true
|
this.$nextTick(() => {
|
this.$refs.PlatformQueuingRef.isShowModal = true
|
this.$refs.PlatformQueuingRef.activePlat = { ...item }
|
this.$refs.PlatformQueuingRef.getList()
|
})
|
},
|
handleDetail () {
|
this.isShowDetail = true
|
this.$nextTick(() => {
|
this.$refs.WaybillDetailRef.isShowModal = true
|
})
|
},
|
getList () {
|
const { groupId } = this
|
listByGroupId(groupId).then(res => {
|
this.platList = res
|
})
|
},
|
handleSet () {
|
this.isShowSet = true
|
},
|
handleSetSub () {
|
const { PlatGroupList } = this
|
const ids = []
|
PlatGroupList.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 { PlatGroupList } = this
|
PlatGroupList.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;
|
justify-content: space-between;
|
margin-top: 10px;
|
padding: 16px;
|
width: calc( 100% - 48px );
|
.info {
|
background: #f4fafb;
|
border-radius: 2px;
|
border: 1px solid #dfe2e8;
|
padding: 16px;
|
border-radius: 2px;
|
margin-bottom: 10px;
|
width: calc( 31.6% - 16px );
|
.status {
|
.lab {
|
font-weight: 500;
|
}
|
color: #00ba67;
|
}
|
.line {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
margin-bottom: 6px;
|
.ite {
|
width: 33.3%;
|
margin-top: 8px;
|
}
|
.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;
|
}
|
}
|
.ml20 {
|
position: absolute;
|
width: 120px;
|
height: 36px;
|
right: 0;
|
top: -4px;
|
}
|
}
|
/* */
|
.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>
|
