chenwei
9 days ago 97736e7e0598926199c8c374db0e53a27cb92596
Merge remote-tracking branch 'origin/xuye'

# Conflicts:
# src/router/index.js
# src/views/Index.vue
9 files added
3 files modified
1749 ■■■■■ changed files
src/components/common-vue/sf-or-port.vue 62 ●●●●● patch | view | raw | blame | history
src/components/daytask/CarTask.vue 88 ●●●●● patch | view | raw | blame | history
src/components/daytask/DispatchCar.vue 480 ●●●●● patch | view | raw | blame | history
src/components/finance/FinanceCenter.vue 313 ●●●●● patch | view | raw | blame | history
src/components/finance/Income.vue 162 ●●●●● patch | view | raw | blame | history
src/components/mainpage/DayTask.vue 4 ●●● patch | view | raw | blame | history
src/components/mainpage/FinanceList.vue 20 ●●●●● patch | view | raw | blame | history
src/components/mainpage/TaskPool.vue 20 ●●●●● patch | view | raw | blame | history
src/components/taskpool/PoolList.vue 308 ●●●●● patch | view | raw | blame | history
src/components/taskpool/PoolTop.vue 261 ●●●●● patch | view | raw | blame | history
src/router/index.js 29 ●●●● patch | view | raw | blame | history
src/views/Index.vue 2 ●●● patch | view | raw | blame | history
src/components/common-vue/sf-or-port.vue
New file
@@ -0,0 +1,62 @@
<template>
    <div id="type" :class="bgClass">
        {{this.formmatterStatus()}}
    </div>
</template>
<script>
    export default {
        data(){
            return{
                bgClass:''
            }
        },
        props: ['status'],
        methods: {
            formmatterStatus() {
                switch (this.status) {
                    case 1:
                        this.bgClass = 'bg-green'
                        return "顺丰达-装";
                    case 2:
                        this.bgClass = 'bg-red'
                        return "顺丰达-卸";
                    case 3:
                        this.bgClass = 'bg-blue'
                        return "港口达-装";
                    case 4:
                        this.bgClass = 'bg-yellow'
                        return "港口装-卸";
                }
            }
        }
    }
</script>
<style>
    #type {
        font-size: 16px;
        font-weight: bold;
        color: white;
        box-shadow: 5px 5px 5px #b8b6b6;
        padding: 10px;
    }
    .bg-blue {
        background-color: #36a9ce;
    }
    .bg-red {
        background-color: #ec808d;
    }
    .bg-green {
        background-color: #70b603;
    }
    .bg-yellow{
        background-color: #f59a23;
    }
</style>
src/components/daytask/CarTask.vue
New file
@@ -0,0 +1,88 @@
<template>
    <div>
        <div class="dispatch-car">
            <div class="dispatch-car-title">
                <span class="title-right">车辆任务</span>
                <el-select v-model="value" placeholder="请选择车辆">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="dispatch-car-content" v-for="(item, index) in 10" :key="index">
                <div>
                    <span>到达:</span>
                    <span>2021-4-30 10:00 </span>
                    <span>渝A.77238</span>
                </div>
                <div class="up">
                    <div>提箱地</div>
                    <div></div>
                    <div>装卸地</div>
                    <div></div>
                    <div>还箱地</div>
                </div>
                <div class="under">
                    <div>重庆寸滩</div>
                    <div>--------</div>
                    <div>重庆渝北</div>
                    <div>--------</div>
                    <div>重庆寸滩</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{}
</script>
<style>
    .dispatch-car {
        border: 1px solid #f5f5f5;
        box-shadow: 3px 3px 3px #f5f5f5;
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        margin: 10px 0;
    }
    .dispatch-car .dispatch-car-title {
        font-size: 18px;
        font-weight: bold;
        margin-left: 20px;
    }
    .dispatch-car-content {
        margin: 10px;
        border-bottom: 1px solid #e2e2e2;
        padding: 10px 5px;
        display: block;
    }
    .dispatch-car-content .under>div,
    .dispatch-car-content .up>div {
        text-align: center;
        width: 20%;
        display: inline-block;
        line-height: 30px;
    }
    .dispatch-car-content .up {
        color: lightgray;
        font-size: 18px;
        font-weight: bold;
        margin-top: 10px;
    }
    .dispatch-car-content .under {
        color: gray;
        margin: 0 auto;
    }
    .dispatch-car .dispatch-car-content span:nth-child(3) {
        font-size: 16px;
        float: right;
        color: orange;
    }
</style>
src/components/daytask/DispatchCar.vue
New file
@@ -0,0 +1,480 @@
<template>
    <div>
        <el-row :gutter="10" width="100%">
            <div class="left-col">
                <el-col :span="18">
                    <div class="dispatch-car ">
                        <div class="dispatch-car-title">
                            调度车辆
                        </div>
                        <div class="dispatch-car-top">
                            <el-form :model="formInline" class="demo-form-inline" :inline="true">
                                <el-form-item label="提单号:">
                                    <el-input placeholder="请输入提单号"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="warning" @click="onSubmit" style="font-size: 16px;">搜索</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="line"></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>
                                                        </div>
                                                        <div class="left-inner-r">
                                                            <SFPort :status="item2.status"></SFPort>
                                                        </div>
                                                    </div>
                                                    <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-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">
                                                    <span style="color: green;">等待接单</span>
                                                    <!-- <span style="color: orange;">已接单</span>
                                                    <span style="color: red;">拒绝</span> -->
                                                </div>
                                            </div>
                                            <div class="driver">
                                                <div>王师傅</div>
                                                <div>切换</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" />
                                                </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>
                                    </el-col>
                                </el-row>
                        </div>
                        <div class="pagenation">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
                             :page-size="100" layout="total, prev, pager, next" :total="1000">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </div>
            <el-col :span="6">
                <CarTask />
            </el-col>
            <!-- 选择日期对话框 -->
            <el-dialog :visible.sync="DateDialogVisible" width="20%" title="指定到达时间">
                <div class="date-task" v-for="(item, index) in 2" :key="index">
                    <div class="date-task-num">
                        任务池:
                        <span>X00000000000000000</span>
                    </div>
                    <div class="date-task-time">
                        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="DateDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="DateDialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 指定车辆对话框 -->
            <el-dialog :visible.sync="dialogVisible" width="30%">
                <div class="dialog-title">选择车辆</div>
                <div class="car-message" v-for="(item, index) in 5" :key="index">
                    <div class="car-message-left">渝A.77238 陈老五</div>
                    <div class="car-message-right"> 任务:0</div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 转单申请对话框 -->
            <el-dialog :visible.sync="TransferDialogVisible" width="20%">
                <div class="transfer-dialog-title">确定要取消此任务?</div>
                <div class="btn-confirm">
                    <el-button type="warning" @click="TransferDialogVisible = false">确 定</el-button>
                    <el-button @click="TransferDialogVisible = false">取 消</el-button>
                </div>
            </el-dialog>
            <!-- 退单对话框 -->
            <el-dialog :visible.sync="ChargeDialogVisible" width="20%">
                <div class="charge-dialog-title">请确认已于客服沟通联系!</div>
                <div class="charge-dialog-title-content">要将此单转给其它车队?</div>
                <div class="btn-confirm">
                    <el-button type="warning" @click="ChargeDialogVisible = false">确 定</el-button>
                    <el-button @click="ChargeDialogVisible = false">取 消</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>
<script>
    import CarTask from "@/components/daytask/CarTask.vue"
    import SFPort from "@/components/common-vue/sf-or-port.vue"
    export default {
        components: {
            CarTask,
            SFPort
        },
        data() {
            return {
                dialogVisible: false,
                DateDialogVisible: false,
                ChargeDialogVisible: false,
                TransferDialogVisible: false,
                value1: '',
                // 顺丰达、港口达
                DispatchList: [
                    [{
                        status: 1,
                    }],
                    [{
                            status: 2,
                        },
                        {
                            status: 3,
                        },
                    ],
                    [{
                        status: 4,
                    }],
                ],
            }
        },
        methods: {
            assignCar() {
                this.dialogVisible = true
            },
            ChooseDate() {
                this.DateDialogVisible = true
            },
            Chargeback() {
                this.ChargeDialogVisible = true
            },
            TransferOrder() {
                this.TransferDialogVisible = true
            },
        },
    }
</script>
<style lang="less" scoped>
    .dispatch-car {
        border: 1px solid #f5f5f5;
        box-shadow: 3px 3px 3px #f5f5f5;
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        margin: 10px 0;
    }
    .dispatch-car .dispatch-car-title {
        font-size: 18px;
        font-weight: bold;
        margin-left: 20px;
    }
    .dispatch-car-top {
        margin-top: 30px;
        margin-left: 20px;
    }
    .dispatch-car-title .title-right {
        margin-right: 80px;
    }
    .line {
        width: 100%;
        height: 1px;
        background-color: #e2e2e2;
        margin: 0 auto;
        margin-bottom: 8px;
    }
    .dispatch-car-box .box {
        border: 1px solid #e2e2e2;
        padding: 10px 8px;
        margin: 10px 0;
    }
    .box-right-top {
        display: flex;
        justify-content: center;
    }
    .box-top {
        display: flex;
        align-items: center;
    }
    .box-top .box-top-left,
    .box-top .box-top-right,
    .box-top .box-top-center {
        display: inline-block;
        width: 31%;
        margin: 5px 10px;
    }
    .box-top .box-top-left {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .box .box-top-left .left-inner-l {
        font-size: 14px;
    }
    .box .box-top-right {
        padding: 3px;
        text-align: right;
        font-size: 14px;
    }
    .box .box-top .box-top-center {
        text-align: center;
    }
    .box-under .up {
        color: #666666;
    }
    .box-under .under {
        color: #959595;
        display: flex;
        align-items: center;
    }
    .box-under .up>div,
    .box-under .under>div {
        text-align: center;
        width: 20%;
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .dispatch-car-box .box-top-center .inner-box {
        padding: 5px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dispatch-car .dispatch-car-box .box-top-center span:nth-child(2) {
        font-size: 24px;
        font-weight: bold;
        color: #a6a6a6;
        margin: 0 10px;
    }
    .dispatch-car .dispatch-car-box .box-top-center span:nth-child(3) {
        font-size: 14px;
        color: #959595;
        margin: 0 10px;
    }
    .box .status {
        display: flex;
        align-items: center;
        padding: 5px;
    }
    .box .status span {
        margin-left: 5px;
    }
    .box .driver {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 8px;
    }
    .box .car {
        color: orange;
        text-align: center;
        padding: 10px;
        margin: 10px 0;
        font-weight: bold;
    }
    .box .edit {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .assign-car,
    .chargeback,
    .transfer-order {
        cursor: pointer;
    }
    .dialog-title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .car-message {
        padding: 20px;
        background-color: #f2f2f2;
        margin: 10px 5px;
        font-size: 18px;
        font-weight: bold;
    }
    .car-message:hover {
        background-color: #d9d9d9;
    }
    .car-message .car-message-right {
        margin-right: 30px;
        float: right;
    }
    .car-message>div {
        display: inline-block;
    }
    .transfer-dialog-title,
    .charge-dialog-title {
        text-align: center;
        font-size: 18px;
    }
    .charge-dialog-title-content {
        font-size: 16px;
        margin: 10px;
        text-align: center;
    }
    .btn-confirm {
        margin: 20px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 80%;
    }
    .pagenation {
        padding: 20px;
        text-align: center;
        margin: 10px 0;
    }
    .date-task {
        text-align: center;
        margin: 20px 0;
    }
    .date-task-time {
        padding: 5px 2px;
    }
    .icon {
        font-size: 30px;
    }
    .qiangdan {
        background-color: #facd91;
        border-radius: 20px;
        padding: 6px;
    }
</style>
src/components/finance/FinanceCenter.vue
New file
@@ -0,0 +1,313 @@
<template>
    <div class="common-main">
        <div class="common">
            <div class="common-top">
                <div class="common-top-title">
                    <i class="el-icon-rank"></i>
                    <span>财务中心</span>
                </div>
                <div class="common-top-right">
                    <i class="el-icon-arrow-down"></i>
                    <i class="el-icon-refresh"></i>
                </div>
            </div>
            <el-row :gutter="10" width="100%">
                <el-col :span="12">
                    <div class="common-card-show">
                        <div class="card-show-top">
                            <div class="top-content">
                                <div class="tag"></div>
                                <div> 我的资金池</div>
                            </div>
                            <div class="top-close">
                                <i class="el-icon-circle-close"></i>
                            </div>
                        </div>
                        <div class="card-content card-left">
                            <div class="card-box">
                                <div>
                                    <i class="el-icon-wallet"></i>
                                    <span>每月保底金额</span>
                                </div>
                                <div>
                                    <span class="left-font">58000.00</span>
                                    <span class="money">元</span>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="card-box">
                                <div>
                                    <i class="el-icon-coin"></i>
                                    当月完成金额
                                </div>
                                <div>
                                    <span class="right-font">30000.00</span><span class="money">元</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="common-card-show">
                        <div class="card-show-top">
                            <div class="top-content">
                                <div class="tag"></div>
                                <div> 我的财务</div>
                            </div>
                            <div class="top-close">
                                <i class="el-icon-circle-close"></i>
                            </div>
                        </div>
                        <div class="card-content card-center">
                            <div class="card-content-show">
                                <i>¥</i>
                                <span>完成总额</span>
                                <span>3001528.00</span>
                            </div>
                            <div class="card-content-show">
                                <i>¥</i>
                                <span>当前任务</span>
                                <span>31528.00</span>
                            </div>
                            <div class="card-content-show">
                                <i>¥</i>
                                <span>进行任务</span>
                                <span>1528.00</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                    <div class="order-right">
                        <div class="img">
                            <img src="../../../public/img/order/jiantou.svg" alt="">
                        </div>
                        <div style="position: relative;top: -30px;">
                            <div class="order-right-show">
                                <div class="show-img">
                                    <span>保底额</span>
                                </div>
                                <div class="show-process">
                                    <div class="percent">35%</div>
                                    <div class="plan">
                                        <div class="plan-show"></div>
                                    </div>
                                </div>
                                <div class="show-count">
                                    <span>61800元</span>
                                </div>
                            </div>
                            <div class="order-right-show">
                                <div class="show-img show-img-two">
                                    <span>在线率</span>
                                </div>
                                <div class="show-process">
                                    <div class="percent">35%</div>
                                    <div class="plan">
                                        <div class="plan-show"></div>
                                    </div>
                                </div>
                                <div class="show-count">
                                    <span>5辆</span>
                                </div>
                            </div>
                            <div class="order-right-show ">
                                <div class="show-img show-img-three">
                                    <span>退/转单</span>
                                </div>
                                <div class="show-process">
                                    <div class="percent">35%</div>
                                    <div class="plan">
                                        <div class="plan-show"></div>
                                    </div>
                                </div>
                                <div class="show-count">
                                    <span>3单</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    export default ({
        data () {
            return {}
        },
        method: {
        }
    })
</script>
<style lang="less" scoped>
    .card-content {
        margin: 8px;
        height: 150px;
        background-color: white;
    }
    .card-left {
        text-align: center;
        padding: 30px;
    }
    .card-left>div {
        display: inline-block;
        margin-left: 60px;
        margin-right: 60px;
        vertical-align: middle;
    }
    .card-box {
        text-align: center;
    }
    .line {
        width: 1px;
        height: 100%;
        background-color: #e2e2e2;
    }
    .left-font {
        font-size: 30px;
        font-weight: bold;
    }
    .right-font {
        font-size: 30px;
        font-weight: bold;
        color: red;
    }
    .money {
        color: #aaaaaa;
        padding: 3px;
    }
    .card-content-show {
        width: 80%;
        padding: 5px;
        margin-left: 10px;
    }
    .card-center .card-content-show span {
        font-size: 16px;
        padding: 6px;
    }
    .card-center .card-content-show span:nth-child(3),
    .card-content .card-content-show i {
        color: red;
        font-size: 30px;
        font-weight: bold;
        font-style: normal;
    }
    .card-content .card-content-show:nth-child(2) {
        margin-top: 20px;
    }
    .common-card-show .card-center {
        height: 200px;
    }
    .order-right {
        background-color: #F5FAFF;
        height: 264px;
        margin-left: 15px;
        padding-bottom: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
    }
    .formal-middle .middle-one {
        padding-left: 66px;
    }
    .order-right .show-img {
        background-image: url("../../../public/img/task/lanse.svg");
        background-repeat: no-repeat;
        width: 77px;
        height: 59px;
        line-height: 48px;
        color: #fff;
    }
    .order-right .show-img span {
        margin-left: 9px;
    }
    .order-right .show-img-two {
        background-image: url("../../../public/img/task/zongse.svg");
    }
    .order-right .show-img-three {
        background-image: url("../../../public/img/task/tuidan.svg");
    }
    .order-right .img {
        position: relative;
        top: 117px;
        left: -15px;
    }
    .order-right-show {
        margin-left: 45px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #F2F2F2;
        align-items: center;
        padding-top: 15px;
        padding-bottom: 6px;
    }
    .order-right-show .show-count {
        width: 120px;
        height: 60px;
        text-align: center;
        line-height: 78px;
        color: #D9001B;
        font-size: 16px;
    }
    .order-right-show .show-process {
        width: 40%;
        text-align: center;
    }
    .order-right-show .show-process .plan {
        width: 100%;
        background-color: #F2F2F2;
        height: 20px;
    }
    .order-right-show .show-process .plan .plan-show {
        width: 35%;
        background-color: #95F204;
        height: 20px;
    }
    .show-process .percent {
        padding-bottom: 8px;
        margin-top: -8px;
    }
</style>
src/components/finance/Income.vue
New file
@@ -0,0 +1,162 @@
<template>
    <div class="fronthome-top">
        <el-row :gutter="10" width="100%">
            <el-col :span="18">
                <div class="foot-card-top" style="width: 100px;text-align: center;">
                    收入明细
                </div>
                <div class="foot-card-bottom">
                    <div class="foot-content-box left">
                        <div class="foot-content">
                            <div class="foot-content-table">
                                <el-table :data="tableData" style="width: 100%" border>
                                    <el-table-column prop="1" label="xx" width="180">
                                    </el-table-column>
                                    <el-table-column prop="2" label="xx" width="180">
                                    </el-table-column>
                                    <el-table-column prop="3" label="xx">
                                    </el-table-column>
                                    <el-table-column prop="4" label="xx" width="180">
                                    </el-table-column>
                                    <el-table-column prop="5" label="xx" width="180">
                                    </el-table-column>
                                    <el-table-column prop="6" label="xx">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="pagenation">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                             :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="foot-card-top">
                    当月车辆任务总额
                </div>
                <div class="foot-card-bottom">
                    <div class="foot-content-box right">
                        <div class="foot-content">
                            <div class="foot-content-table">
                                <el-table :data="tableData" style="width: 100%" border>
                                    <el-table-column prop="1" label="xx" >
                                    </el-table-column>
                                    <el-table-column prop="2" label="xx" >
                                    </el-table-column>
                                    <el-table-column prop="3" label="xx">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [{
                    1: '2016-05-02',
                    2: '王小虎',
                    3: '上海市普陀区金沙江路 1518 弄',
                    4: '2016-05-02',
                    5: '王小虎',
                    6: '上海市普陀区金沙江路 1518 弄'
                }, {
                    1: '2016-05-04',
                    2: '王小虎',
                    3: '上海市普陀区金沙江路 1517 弄',
                    4: '2016-05-02',
                    5: '王小虎',
                    6: '上海市普陀区金沙江路 1518 弄'
                }, {
                    1: '2016-05-01',
                    2: '王小虎',
                    3: '上海市普陀区金沙江路 1519 弄',
                    4: '2016-05-02',
                    5: '王小虎',
                    6: '上海市普陀区金沙江路 1518 弄'
                }, {
                    1: '2016-05-03',
                    2: '王小虎',
                    3: '上海市普陀区金沙江路 1516 弄',
                    4: '2016-05-02',
                    5: '王小虎',
                    6: '上海市普陀区金沙江路 1518 弄'
                }],
                pageNum:'',
                pageSize:'',
                total:0
            }
        },
        methods:{
            handleSizeChange(newSize){
                this.pageSize=newSize
            },
            handleCurrentChange(newPage){
                this.pageNum=newPage
            },
        }
    }
</script>
<style lang="less" scoped>
    .fronthome-top {
        margin: 20px 0;
    }
    .fronthome-top .foot-card-top {
        margin-top: 10px;
        font-size: 14px;
        border: 1px solid #F2F2F2;
        padding: 10px;
        box-shadow: 0px -2px 1px #D2D2D2,
            -2px 0px 1px #D2D2D2,
            2px 0px 1px #D2D2D2;
        padding: 10px;
        font-weight: bold;
        font-size: 16px;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        border-bottom: none;
    }
    .foot-card-bottom .foot-content-box {
        box-shadow: 3px 3px 2px #f1f1f1;
        border: 1px solid #eaeaea;
        margin-left: -2px;
        padding: 10px;
    }
    .foot-content {
        height: 90%;
    }
    .foot-card-bottom .left {
    }
    .foot-card-bottom .right {
    }
    .foot-card-bottom .foot-content-box .pagenation {
        padding-bottom: 20px;
        text-align: center;
    }
    .foot-content-table {
        padding: 3px;
        margin: 8px 5px;
    }
</style>
src/components/mainpage/DayTask.vue
@@ -2,13 +2,15 @@
    <div>
        <DayTop/>
        <DayTable/>
        <DispatchCar/>
    </div>
</template>
<script>
import DayTop from "@/components/daytask/DayTop.vue"
import DayTable from "@/components/daytask/DayTable.vue"
import DispatchCar from "@/components/daytask/DispatchCar.vue"
export default {
    components:{DayTop,DayTable},
    components:{DayTop,DayTable,DispatchCar},
    created(){
        console.log("这是当日任务的执行")
    }
src/components/mainpage/FinanceList.vue
New file
@@ -0,0 +1,20 @@
<template>
    <div>
        <FinanceCenter/>
        <Income/>
    </div>
</template>
<script>
import FinanceCenter from "@/components/finance/FinanceCenter.vue"
import Income from "@/components/finance/Income.vue"
export default {
    components:{FinanceCenter,Income},
    created(){
        console.log("财务明细")
    }
}
</script>
<style lang="less" scoped>
</style>
src/components/mainpage/TaskPool.vue
New file
@@ -0,0 +1,20 @@
<template>
    <div>
        <PoolTop />
        <PoolList/>
    </div>
</template>
<script>
    import PoolTop from "@/components/taskpool/PoolTop.vue";
    import PoolList from "@/components/taskpool/PoolList.vue";
    export default {
        components: {
            PoolTop,PoolList
        }
    }
</script>
<style>
</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>
src/components/taskpool/PoolTop.vue
New file
@@ -0,0 +1,261 @@
<template>
    <div class="common-main">
        <div class="common">
            <div class="common-top">
                <div class="common-top-title">
                    <i class="el-icon-rank"></i>
                    <span>任务池</span>
                </div>
                <div class="common-top-right">
                    <i class="el-icon-arrow-down"></i>
                    <i class="el-icon-refresh"></i>
                </div>
            </div>
            <el-row :gutter="10" width="100%">
                <el-col :span="12">
                    <div class="common-card-show">
                        <div class="card-show-top">
                            <div class="top-content">
                                <div class="tag"></div>
                                <div>当日任务</div>
                            </div>
                            <div class="top-close">
                                <i class="el-icon-circle-close"></i>
                            </div>
                        </div>
                        <div class="card-content first-card">
                            <div class="card-content-left">
                                <div class="card-content-title">
                                    <el-row :gutter="10" width="100%">
                                        <el-col :span="8">
                                            <div>运输类型</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div>任务量</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div>抢单</div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="card-content-show">
                                    <el-row :gutter="10" width="100%">
                                        <el-col :span="8">
                                            <div class="card-content-btn sf">
                                                <div>顺丰达</div>
                                            </div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="taskload">120</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="graborder">10</div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="card-content-show">
                                    <el-row :gutter="10" width="100%">
                                        <el-col :span="8">
                                            <div class="card-content-btn port">
                                                <div>港口达</div>
                                            </div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="taskload">20</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div class="graborder">0</div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div class="center">
                                <div class="line"></div>
                            </div>
                            <div class="card-content-right">
                                <div class="card-content-title">
                                    总收获
                                </div>
                                <div class="card-right-show">
                                    <div>
                                        抢单任务:<span>10</span>
                                    </div>
                                    <div>
                                        指派任务:<span>0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="common-card-show">
                        <div class="card-show-top">
                            <div class="top-content">
                                <div class="tag"></div>
                                <div>总任务</div>
                            </div>
                            <div class="top-close">
                                <i class="el-icon-circle-close"></i>
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="content-up">
                                <div class="card-content-btn sf">
                                    <div>顺丰达</div>
                                </div>
                                <div class="card-content-btn port">
                                    <div>港口达</div>
                                </div>
                            </div>
                            <div class="content-under">
                                <div>320</div>
                                <div>320</div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="common-card-show">
                        <div class="card-show-top">
                            <div class="top-content">
                                <div class="tag"></div>
                                <div>接单明细</div>
                            </div>
                        </div>
                        <div class="card-content third-card" v-for="(item, index) in 5" :key="index">
                            <span>[港口达]</span>
                            <span>果园 ---渝北区---寸滩</span>
                            <span>箱量:2</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    export default {}
</script>
<style>
    .card-content {
        margin: 4px;
        padding: 10px;
        background-color: white;
    }
    .first-card{
        display: flex;
        justify-content: center;
    }
    .line {
        width: 1px;
        height: 100%;
        background-color: #8f8e8e;
    }
    .center {
        width: 5%;
        display: flex;
        justify-content: center;
    }
    .card-content-left {
        width: 60%;
    }
    .card-content-right {
        width: 30%;
    }
    .card-content-title {
        text-align: center;
        font-size: 18px;
        width: 100%;
    }
    .card-content-btn {
        width: 80px;
        box-shadow: 5px 5px 5px #b8b6b6;
        padding: 10px;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        font-weight: bold;
        margin: 20px auto;
    }
    .sf {
        background-color: #a30014;
    }
    .port {
        background-color: #70b603;
    }
    .card-content-show {
        text-align: center;
    }
    .card-content-show .taskload,
    .card-content-show .graborder {
        padding: 20px;
        color: #d90029;
        font-size: 30px;
        font-weight: bold;
    }
    .card-right-show {
        height: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 20px;
    }
    .card-right-show div:nth-child(1) {
        color: #a30014;
    }
    .card-right-show div:nth-child(2) {
        color: #4b7902;
    }
    .card-right-show span {
        font-weight: bold;
    }
    .content-up,
    .content-under{
        display: flex;
    }
    .content-under>div{
        margin: 20px auto;
        font-size: 30px;
        font-weight: bold;
        color: #d9001b;
    }
    .third-card{
        margin-top: 6px;
        font-size: 16px;
        padding: 8px;
    }
    .third-card span{
        margin: 0 10px;
    }
</style>
src/router/index.js
@@ -9,8 +9,8 @@
Vue.use(VueRouter)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
const routes = [
@@ -48,19 +48,34 @@
        component:()=>import('../components/mainpage/PersonalCenter.vue'),
        meta:{requireAuth: true },
      },
      {
        path: "/finance",
        name: "财务中心",
        component: () => import('../components/mainpage/FinanceList.vue'),
        meta: {
            requireAuth: true
        },
    },
    {
        path: "/taskpool",
        name: "任务池",
        component: () => import('../components/mainpage/TaskPool.vue'),
        meta: {
            requireAuth: true
        },
    },
     
   
    ]
  },
]
const router = new VueRouter({
  routes,
//  originalPush
    routes,
    //  originalPush
})
src/views/Index.vue
@@ -122,7 +122,7 @@
         { id: "/daytask", icon: "el-icon-setting", title: "当日任务" },
          { id: "/task", icon: "el-icon-setting", title: "任务列表" },
          { id: "/PersonalCenter", icon: "el-icon-setting", title: "个人中心" },
           { id: "/finance", icon: "el-icon-setting", title: "财务中心" },
        
      ],