From 2079ba28f20bde46f7736699c97abf0e1564770d Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期一, 14 十月 2024 09:30:46 +0800 Subject: [PATCH] 最新版本 --- admin/src/views/platform/index.vue | 369 +++++++++++++++++++++++++++------------------------- 1 files changed, 193 insertions(+), 176 deletions(-) diff --git a/admin/src/views/platform/index.vue b/admin/src/views/platform/index.vue index 052788a..8ecaeba 100644 --- a/admin/src/views/platform/index.vue +++ b/admin/src/views/platform/index.vue @@ -2,27 +2,15 @@ <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" - > + <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 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"> @@ -34,38 +22,24 @@ </div> <div class="name">{{ item.name }}</div> <div class="ite"> - <span class="placeholder9">浣滀笟锛�</span - ><span>{{ item.platformWorkVO.workNum }}</span> + <span class="placeholder9">浣滀笟锛�</span><span>{{ item.platformWorkVO.workNum }}</span> </div> <div class="ite"> - <span class="placeholder9">宸插彨锛�</span - ><span>{{ item.platformWorkVO.callNum }}</span> + <span class="placeholder9">宸插彨锛�</span><span>{{ item.platformWorkVO.callNum }}</span> </div> <div class="ite"> - <span class="placeholder9">绛夊緟锛�</span - ><span>{{ item.platformWorkVO.waitNum }}</span> + <span class="placeholder9">绛夊緟锛�</span><span>{{ item.platformWorkVO.waitNum }}</span> </div> <div class="ite"> - <span class="placeholder9">寮傚父锛�</span - ><span class="red">{{ item.platformWorkVO.exceptionNum }}</span> + <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> + <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" - v-for="task in item.platformWorkVO.platformJobList" - :key="task.id" - > + <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"> @@ -76,35 +50,31 @@ </div> </div> <div class="right"> - <div - class="status" - v-if="task.status != 4 && task.status != 5" - :class="{ red: task.status == 8 }" - > + <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" v-if="task.status == 4"> + <div class="status_item" 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 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.type == 4" class="ite"> + <div v-if="task.billCode" class="ite"> + <span>杩愯緭鍗曞彿锛�</span> + <span>{{ task.billCode }}</span> + </div> + <div v-else class="ite"> <span>鍚堝悓鍗曞彿锛�</span> <span>{{ task.contractNum }}</span> </div> - <div v-else class="ite"> - <span>杩愯緭鍗曞彿锛�</span> - <span>{{ task.code }}</span> - </div> - <div class="ite"> + <div class="ite siji"> <span>椹鹃┒鍛橈細</span> <span>{{ task.driverName }}</span> </div> - <div class="ite"> + <div class="ite phone"> <span>鎵嬫満鍙凤細</span> <span>{{ task.drivierPhone }}</span> </div> @@ -112,74 +82,46 @@ <span>鎬昏繍杈撻噺锛�</span> <span>{{ task.totalNum }}涓囨敮</span> </div> - <div v-if="task.type != 4" class="ite" style="width: 66.6%"> + <div v-if="task.billCode" 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 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 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 - > + <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"> + <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" - > + <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="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 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> @@ -190,39 +132,21 @@ <!-- 杩愬崟璇︽儏 --> <!-- --> <!-- 鍙彿 --> - <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" - > + <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 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> + <el-button v-preventReClick type="primary" @click="transformSub">纭畾</el-button> </span> </el-dialog> </div> @@ -242,23 +166,26 @@ } 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 { Message } from 'element-ui' +import { Loading, Message } from 'element-ui' import { statusMap } from './config' dayjs.extend(duration) export default { components: { PlatformQueuing, WaybillDetail, + DriverDetail, GlobalWindow }, - data () { + data() { return { statusMap, activeGroup: {}, PlatGroupList: [], + PlatGroupListSet: [], platList: [], platCallList: [], isShowTransform: false, @@ -270,34 +197,48 @@ setParam: {}, isShowDetail: false, // 杩愬崟璇︽儏 + isShowDriver: false, // 棰勭害璇︽儏 detail: {}, isShowQueuing: false, - timer: null + timer: null, + + loadingOpen: false, + loadingFinish: false, } }, - created () { + created() { + setInterval(() => { + this.getPlatGroupList() + }, 1000 * 20) this.getPlatGroupList() - // this.getList() }, methods: { - handleWork (item) { + handleWork(item) { + this.loadingOpen = true platformBeginWork({ jobId: item.id }).then(res => { + this.loadingOpen = false Message.success('宸插紑濮嬩綔涓�') this.getPlatGroupList() + }, () => { + this.loadingOpen = false }) }, - handleFinish (item) { + handleFinish(item) { + this.loadingFinish = true platformFinishWork({ jobId: item.id }).then(res => { + this.loadingFinish = false Message.success('瀹屾垚浣滀笟') this.getPlatGroupList() + },() => { + this.loadingFinish = false }) }, - handleTransform (item, task) { + handleTransform(item, task) { this.activePlatId = item.id this.activetaskId = task.id this.isShowTransform = true }, - transformSub () { + transformSub() { const { activePlatId, activetaskId } = this platformMove({ platformId: activePlatId, jobId: activetaskId }).then(res => { Message.success('杞Щ鏈堝彴鎴愬姛') @@ -305,8 +246,8 @@ this.getPlatGroupList() }) }, - handlePass (item) { - this.$confirm('鎮ㄧ‘璁よ瀵硅浠诲姟杩涜杩囧彿鍚�', '娓╅Θ鎻愮ず', { + handlePass(item) { + this.$confirm(`纭 ${item.carCodeFront}缃负杩囧彿鍚楋紵杩囧彿鍚庯紝闇�瑕侀噸鏂扮鍒版墠鑳借繘鍏ュ洯鍖篳, '娓╅Θ鎻愮ず', { confirmButtonText: '纭畾', cancelButtonText: '鍙栨秷', type: 'warning' @@ -317,7 +258,7 @@ }) }) }, - handleErr (item) { + handleErr(item) { this.$confirm('鎮ㄧ‘璁よ瀵硅浠诲姟杩涜寮傚父鎸傝捣鍚�', '娓╅Θ鎻愮ず', { confirmButtonText: '纭畾', cancelButtonText: '鍙栨秷', @@ -329,14 +270,14 @@ }) }) }, - platgroupClick (item) { + platgroupClick(item) { this.activeGroup = { ...item } this.circulInitTaskList() this.timer = setInterval(() => { this.circulInitTaskList() }, 1000) }, - getPlatGroupList () { + getPlatGroupList() { getPlatformGroupList({ queryData: 1, queryType: 1 @@ -355,22 +296,22 @@ } }) }, - circulInitTaskList () { + 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 (item.newCallDate) { + const timeNum = time.getTime() - new Date(item.newCallDate).getTime() if (timeNum > 3600000) { item.callDateTemp = dayjs.duration(timeNum).format('H灏忔椂m鍒唖绉�') } else { item.callDateTemp = dayjs.duration(timeNum).format('m鍒唖绉�') } } - if (item.startDate) { - const timeNum = time.getTime() - new Date(item.startDate).getTime() + 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 { @@ -383,34 +324,58 @@ this.$forceUpdate() } }, - handleQueuing (item) { + 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 }) }, - handleDetail () { + 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 () { + getList() { const { groupId } = this listByGroupId(groupId).then(res => { this.platList = res }) }, - handleSet () { + handleSet() { this.isShowSet = true + getPlatformGroupList({ + queryData: 0, + queryType: 1 + }).then(res => { + this.PlatGroupListSet = res || [] + }) }, - handleSetSub () { - const { PlatGroupList } = this + handleSetSub() { + const { PlatGroupListSet } = this const ids = [] - PlatGroupList.forEach(item => { + PlatGroupListSet.forEach(item => { item.platformList.forEach(platform => { if (platform.showConfig) { ids.push(platform.id) @@ -427,9 +392,9 @@ this.setLoading = false }) }, - platformSetClick (id) { - const { PlatGroupList } = this - PlatGroupList.forEach(item => { + platformSetClick(id) { + const { PlatGroupListSet } = this + PlatGroupListSet.forEach(item => { item.platformList.forEach(platform => { if (platform.id === id) { platform.showConfig = !platform.showConfig @@ -443,8 +408,10 @@ <style lang="scss" scoped> @import "@/assets/style/variables.scss"; + .platform_list { width: 100%; + .item { /* padding: 16px 24px; */ background: #ffffff; @@ -452,27 +419,32 @@ 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%); + background: linear-gradient(270deg, #FFFFFF 0%, #EBF6F7 100%); border-radius: 2px 2px 0px 0px; padding: 0 20px; - .shengyin{ + + .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; @@ -481,18 +453,20 @@ 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 ); + width: calc(100% - 0); + .info { background: #f4fafb; border-radius: 2px; @@ -500,23 +474,41 @@ padding: 16px; border-radius: 2px; margin-bottom: 10px; - width: calc( 31.6% - 16px ); - .status { + 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: 33.3%; margin-top: 8px; } + + .siji { + width: 29%; + } + + .phone { + width: 37.6%; + } + .left { .code { display: flex; @@ -529,38 +521,46 @@ 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{ + + .empty_plat { width: 100%; height: 170px; display: flex; @@ -569,27 +569,33 @@ align-items: center; font-size: 12px; color: #B2B2B2; - img{ + + img { width: 110px; } } } - .emyty{ - .head{ - background: linear-gradient( 270deg, #FFFFFF 0%, #F7F7F7 100%) !important; + + .emyty { + .head { + background: linear-gradient(270deg, #FFFFFF 0%, #F7F7F7 100%) !important; } - .status{ + + .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; @@ -597,6 +603,7 @@ padding-bottom: 18px; border-bottom: 2px solid #fff; } + .active { font-weight: 500; font-size: 15px; @@ -604,14 +611,18 @@ border-bottom: 2px solid $primary-color; } } - .ml20 { + + .btns { position: absolute; - width: 120px; + width: 180px; height: 36px; right: 0; top: -4px; + display: flex; + justify-content: flex-end; } } + /* */ .set_modal { .title { @@ -619,9 +630,11 @@ font-weight: 600; margin-bottom: 16px; } + .list { display: flex; flex-wrap: wrap; + .item { cursor: pointer; padding: 0 36px; @@ -635,7 +648,8 @@ margin-right: 13px; position: relative; overflow: hidden; - .bg{ + + .bg { position: absolute; right: -12px; bottom: -12px; @@ -644,22 +658,25 @@ background: $primaryColor; transform: rotate(45deg); } - .scs{ + + .scs { position: absolute; right: -1px; bottom: -1px; color: #fff; z-index: 99999; - transform:scale(.8) + transform: scale(.8) } } + .active { - background: rgba(39,155,170,0.06); + background: rgba(39, 155, 170, 0.06); border: 1px solid $primaryColor; color: $primaryColor; } } } + /* */ /* */ </style> -- Gitblit v1.9.3