612813eb9fea89592bcc733303d53c81155ac7fc..12ce8ca5de9abe3bf59902d5d08b94b901edaad0
7 days ago xuye
no message
12ce8c diff | tree
7 days ago xuye
任务池
0506c7 diff | tree
1 files added
1 files modified
520 ■■■■ changed files
src/components/daytask/DispatchCar.vue 212 ●●●●● patch | view | raw | blame | history
src/components/taskpool/PoolList.vue 308 ●●●●● patch | view | raw | blame | history
src/components/daytask/DispatchCar.vue
@@ -20,101 +20,109 @@
                        <div class="line"></div>
                        <div class="dispatch-car-box" v-for="(item, index) in 10" :key="index">
                            <el-row :gutter="10" width="100%" type="flex">
                                <el-col :span="18">
                                    <div class="box">
                                        <div v-for="(item, index) in 2" :key="index">
                                            <div class="box-top">
                                                <div class="box-top-left">
                                                    <div class="left-inner-l">
                                                        <div>任务池:
                                                            <span>X00000000000000000</span>
                                                        </div>
                        <div class="dispatch-car-box" v-for="(item1, index1) in DispatchList" :key="index1">
                                <el-row :gutter="10" width="100%" type="flex">
                                    <el-col :span="18">
                                        <div class="box">
                                            <div v-for="(item2, index2) in item1" :key="index2">
                                                <div class="box-top">
                                                    <div class="box-top-left">
                                                        <div class="left-inner-l">
                                                            <div>任务池:
                                                                <span>X00000000000000000</span>
                                                            </div>
                                                        <div>提单号:
                                                            <span>CSXD2343343433</span>
                                                            <div>提单号:
                                                                <span>CSXD2343343433</span>
                                                            </div>
                                                        </div>
                                                        <div class="left-inner-r">
                                                            <SFPort :status="item2.status"></SFPort>
                                                        </div>
                                                    </div>
                                                    <div class="left-inner-r">
                                                        <SFPort :status="status"></SFPort>
                                                    <div class="box-top-center">
                                                        <div class="inner-box">
                                                            <div class="qiangdan">抢单</div>
                                                            <span>40GP</span>
                                                            <span>棉花-36kg</span>
                                                        </div>
                                                    </div>
                                                    <div class="box-top-right">
                                                        到达时间:2021-4-30 10:00
                                                        <img src="../../../public/img/index/time.svg" @click="ChooseDate" />
                                                    </div>
                                                </div>
                                                <div class="box-top-center">
                                                    <div class="inner-box">
                                                        <div class="qiangdan">抢单</div>
                                                        <span>40GP</span>
                                                        <span>棉花-36kg</span>
                                                <div class="box-under">
                                                    <div class="up">
                                                        <div>
                                                            <span>提箱地</span>
                                                        </div>
                                                        <div></div>
                                                        <div>
                                                            <span>装卸地</span>
                                                        </div>
                                                        <div></div>
                                                        <div>
                                                            <span>还箱地</span>
                                                        </div>
                                                    </div>
                                                    <div class="under">
                                                        <div>
                                                            <span>重庆寸滩</span>
                                                        </div>
                                                        <div class="icon">
                                                            <i class="el-icon-right"></i>
                                                        </div>
                                                        <div>
                                                            <span>重庆渝北</span>
                                                        </div>
                                                        <div class="icon">
                                                            <i class="el-icon-right"></i>
                                                        </div>
                                                        <div>
                                                            <sapn>重庆-渝北区 新溉大道18号山顶国宾城12栋1916</sapn>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="box-top-right">
                                                    到达时间:2021-4-30 10:00
                                                </div>
                                            </div>
                                            <div class="box-under">
                                                <div class="up">
                                                    <div>
                                                        <span>提箱地</span>
                                                    </div>
                                                    <div></div>
                                                    <div>
                                                        <span>装卸地</span>
                                                    </div>
                                                    <div></div>
                                                    <div>
                                                        <span>还箱地</span>
                                                    </div>
                                                </div>
                                                <div class="under">
                                                    <div>
                                                        <span>重庆寸滩</span>
                                                    </div>
                                                    <div class="icon">
                                                        <i class="el-icon-right"></i>
                                                    </div>
                                                    <div>
                                                        <span>重庆渝北</span>
                                                    </div>
                                                    <div class="icon">
                                                        <i class="el-icon-right"></i>
                                                    </div>
                                                    <div>
                                                        <sapn>重庆-渝北区 新溉大道18号山顶国宾城12栋1916</sapn>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="box box-right">
                                        <div class="box-right-top">
                                            <div class="status">
                                                <img src="../../../public/img/index/time.svg" @click="ChooseDate" />
                                                <span style="color: green;">等待接单</span>
                                                <!-- <span style="color: orange;">已接单</span>
                                                <span style="color: red;">拒绝</span> -->
                                            </div>
                                        </div>
                                        <div class="car">渝A.77238</div>
                                        <div class="edit">
                                            <div class="assign-car">
                                                <img src="../../../public/img/daytask/tuidan.svg" alt="" @click="assignCar" />
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="box box-right">
                                            <div class="box-right-top">
                                                <div class="status">
                                                    <span style="color: green;">等待接单</span>
                                                    <!-- <span style="color: orange;">已接单</span>
                                                    <span style="color: red;">拒绝</span> -->
                                                </div>
                                            </div>
                                            <div class="chargeback">
                                                <img src="../../../public/img/daytask/tuidan.svg" alt="" @click="Chargeback" />
                                            <div class="driver">
                                                <div>王师傅</div>
                                                <div>切换</div>
                                            </div>
                                            <div class="transfer-order">
                                                <img src="../../../public/img/daytask/tuidan.svg" alt="" @click="TransferOrder" />
                                            <div class="car">渝A.77238</div>
                                            <div class="edit">
                                                <div class="assign-car">
                                                    <img src="../../../public/img/daytask/tuidan.svg" alt="" @click="assignCar" />
                                                </div>
                                                <div class="chargeback">
                                                    <img src="../../../public/img/daytask/tuidan.svg" alt="" @click="Chargeback" />
                                                </div>
                                                <div class="transfer-order">
                                                    <img src="../../../public/img/daytask/tuidan.svg" alt="" @click="TransferOrder" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                                    </el-col>
                                </el-row>
                        </div>
                        <div class="pagenation">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
@@ -125,7 +133,7 @@
                </el-col>
            </div>
            <el-col :span="6">
                <CarTask/>
                <CarTask />
            </el-col>
            <!-- 选择日期对话框 -->
@@ -186,7 +194,10 @@
    import CarTask from "@/components/daytask/CarTask.vue"
    import SFPort from "@/components/common-vue/sf-or-port.vue"
    export default {
        components:{CarTask,SFPort},
        components: {
            CarTask,
            SFPort
        },
        data() {
            return {
                dialogVisible: false,
@@ -195,7 +206,21 @@
                TransferDialogVisible: false,
                value1: '',
                // 顺丰达、港口达
                status: 1,
                DispatchList: [
                    [{
                        status: 1,
                    }],
                    [{
                            status: 2,
                        },
                        {
                            status: 3,
                        },
                    ],
                    [{
                        status: 4,
                    }],
                ],
            }
        },
        methods: {
@@ -211,7 +236,7 @@
            TransferOrder() {
                this.TransferDialogVisible = true
            },
        },
    }
</script>
@@ -296,7 +321,6 @@
        text-align: center;
    }
    .box-under .up {
@@ -315,6 +339,7 @@
        width: 20%;
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 5px;
    }
@@ -338,6 +363,7 @@
        color: #959595;
        margin: 0 10px;
    }
    .box .status {
        display: flex;
@@ -349,10 +375,17 @@
        margin-left: 5px;
    }
    .box .driver {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 8px;
    }
    .box .car {
        color: orange;
        text-align: center;
        padding: 5px;
        padding: 10px;
        margin: 10px 0;
        font-weight: bold;
    }
@@ -439,10 +472,9 @@
        font-size: 30px;
    }
    .qiangdan{
        background-color: red;
        color: white;
    .qiangdan {
        background-color: #facd91;
        border-radius: 20px;
        padding: 6px;
    }
</style>
src/components/taskpool/PoolList.vue
New file
@@ -0,0 +1,308 @@
<template>
    <div class="common-main">
        <div class="common">
            <el-row :gutter="10">
                <div class="task-pool">
                    <div class="task-pool-title">
                        任务池
                    </div>
                    <div class="task-pool-content">
                        <div class="pool-content-box">
                            <div class="pool-content-box-row" v-for="(item1, index1) in PoolList" :key="index1">
                                <div class="content-box-show" v-for="(item2, index2) in item1" :key="index2">
                                    <el-row :gutter="10" type="flex" justify="space-around">
                                        <el-col :span="8">
                                            <div class="st">
                                                <SFPort :status="item2.status"></SFPort>
                                                <div>20GP</div>
                                            </div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="af up-second">
                                                <div>箱量:{{item2.num}}</div>
                                                <div>棉花-{{item2.weight}}kg</div>
                                            </div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="af" style="color: #f8a723;font-size: 16px;">到达:{{item2.time}}</div>
                                        </el-col>
                                    </el-row>
                                    <div class="box-show-under">
                                        <div class="show-under-info">
                                            <div>提箱地</div>
                                            <div>装卸地</div>
                                            <div>还箱地</div>
                                        </div>
                                        <div class="show-under-place">
                                            <div>
                                                <span>{{item2.CarryingCase}}</span>
                                            </div>
                                            <div>
                                                <span>{{item2.Boxed}}</span>
                                            </div>
                                            <div>
                                                <sapn>{{item2.Return}}</sapn>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box-show-foot">
                                    <div class="price">
                                        <div>¥600</div>
                                    </div>
                                    <div class="foot-right">
                                        <div>
                                            发布:2021-03-25 10:00
                                        </div>
                                        <div class="grab-order">抢单/1车</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pagenation">
                            <el-pagination background layout="prev, pager, next" :total="1000">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-row>
        </div>
    </div>
</template>
<script>
    import SFPort from "@/components/common-vue/sf-or-port.vue"
    export default {
        components: {
            SFPort
        },
        data() {
            return {
                PoolList: [
                    [{
                            status: 2,
                            num: 1,
                            weight: 36,
                            time: "2021-03-25 10:00",
                            CarryingCase:"重庆渝北",
                            Boxed:"重庆渝北",
                            Return:"重庆-渝北区 新溉大道18号山顶国宾城12栋1916",
                        },
                        {
                            status: 1,
                            num: 1,
                            weight: 36,
                            time: "2021-03-25 10:00",
                            CarryingCase:"重庆渝北",
                            Boxed:"重庆渝北",
                            Return:"重庆-渝北区 新溉大道18号山顶国宾城12栋1916",
                        }
                    ],
                    [{
                            status: 3,
                            num: 1,
                            weight: 36,
                            time: "2021-03-25 10:00",
                            CarryingCase:"重庆渝北",
                            Boxed:"重庆渝北",
                            Return:"重庆-渝北区 新溉大道18号山顶国宾城12栋1916",
                        },
                        {
                            status: 1,
                            num: 1,
                            weight: 36,
                            time: "2021-03-25 10:00",
                            CarryingCase:"重庆渝北",
                            Boxed:"重庆渝北",
                            Return:"重庆-渝北区 新溉大道18号山顶国宾城12栋1916",
                        }
                    ],
                    [{
                        status: 4,
                        num: 1,
                        weight: 36,
                        time: "2021-03-25 10:00",
                            CarryingCase:"重庆渝北",
                            Boxed:"重庆渝北",
                            Return:"重庆-渝北区 新溉大道18号山顶国宾城12栋1916",
                    }, ],
                    [{
                            status: 4,
                            num: 1,
                            weight: 36,
                            time: "2021-03-25 10:00",
                            CarryingCase:"重庆渝北",
                            Boxed:"重庆渝北",
                            Return:"重庆-渝北区 新溉大道18号山顶国宾城12栋1916",
                        },
                        {
                            status: 1,
                            num: 1,
                            weight: 36,
                            time: "2021-03-25 10:00",
                            CarryingCase:"重庆渝北",
                            Boxed:"重庆渝北",
                            Return:"重庆-渝北区 新溉大道18号山顶国宾城12栋1916",
                        }
                    ],
                    [{
                        status: 3,
                        num: 1,
                        weight: 36,
                        time: "2021-03-25 10:00",
                            CarryingCase:"重庆渝北",
                            Boxed:"重庆渝北",
                            Return:"重庆-渝北区 新溉大道18号山顶国宾城12栋1916",
                    }],
                ]
            }
        }
    }
</script>
<style>
    .common-main {
        margin-top: 10px;
    }
    .task-pool .task-pool-title {
        padding: 5px 20px;
        font-size: 20px;
        font-weight: bold;
    }
    .pool-content-box {
        margin-left:8px;
        display: flex;
        /*flex-wrap: wrap;
        box-sizing: border-box;*/
        flex-flow:column wrap;
        height: 100vh;
    }
    .pool-content-box-row {
        border: 1px solid #d7d7d7;
        margin: 10px 2px;
        width: calc(98%/2 - 4px);
    }
    .st {
        margin: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .st>div {
        font-size: 24px;
        font-weight: bold;
        color: #aaaaaa;
    }
    .af {
        padding: 20px 0;
        text-align: center;
    }
    .up-second {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .up-second>div {
        margin: 0 5px;
        color: #7f7f7f;
    }
    .box-show-under {
        padding: 8px;
    }
    .show-under-info {
        font-size: 18px;
        color: #333333;
    }
    .show-under-place {
        font-size: 16px;
        color: #7f7f7f;
    }
    .box-show-under .show-under-place,
    .box-show-under .show-under-info {
        padding: 5px;
        display: flex;
        align-items: center;
    }
    .show-under-place>div,
    .show-under-info>div {
        width: 30%;
        text-align: center;
    }
    .box-show-foot {
        margin-right: 50px;
        margin-bottom: 10px;
        padding: 5px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .box-show-foot .price {
        font-size: 20px;
        font-weight: bold;
        color: red;
        margin-left: 50px;
    }
    .box-show-foot .foot-right {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .box-show-foot .foot-right div:nth-child(1) {
        padding: 0 10px;
        font-size: 16px;
        margin-right: 20px;
    }
    .box-show-foot .foot-right .grab-order {
        padding: 10px;
        color: white;
        font-size: 20px;
        font-weight: bold;
        background-color: #a30014;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 5px 5px 5px #b8b6b6;
    }
    .pagenation {
        text-align: center;
    }
    .pool-content-box-row .content-box-show:nth-child(2){
        border-top: 1px dashed #d4d4d4;
    }
</style>