增加装卸员相关页面和相关功能

qingyiay

2023-07-26 b3c833eeb97a7ef0e32d05f9ee3604fed6e4a37b

增加装卸员相关页面和相关功能

 App.vue

@@ -10,17 +10,19 @@
        },
        onShow() {
            console.log('appvue显示');
            if (!this.globalisconnect && !this.globalisUploadimg) {
                this.$store.dispatch('websocketInit')
                this.changeisconnect(false);
                console.log('appvue的ws');
            if (!this.globalisconnect && !this.globalisUploadimg && this.globalisLogin) {
                if (!this.is_open_socket) {
                    this.$store.dispatch('websocketInit')
                    this.changeisconnect(false);
                    console.log('appvue的ws');
                }
            }
        },
        methods: {
            ...mapMutations(['changeisconnect'])
        },
        computed: {
            ...mapState(['globalisconnect', 'globalisUploadimg', 'globalisLogin'])
            ...mapState(['globalisconnect', 'globalisUploadimg', 'globalisLogin', 'is_open_socket'])
        }
    };
</script>

 api/globalApi.js

@@ -375,5 +375,21 @@
    setUpWxOpenid: {
        url: '/admin/user/setUpWxOpenid',
        method: 'POST'
    },
    /**
     * @description 装卸员查看所有煤种类型 */
    getCoalNameAll: {
        url: '/wrzs/tmtaskcoal/getCoalNameAll',
        method: 'GET'
    },
    /**
     * @description  */
    getAccordingCoalNameAll: {
        url: '/wrzs/tmtaskcoal/getAccordingCoalNameAll',
        method: 'GET'
    },
    confirmLoadAndUnload: {
        url: '/wrzs/tmtaskcoal/confirmLoadAndUnload',
        method: 'POST'
    }
}

 pages.json

@@ -210,6 +210,28 @@
                "enablePullDownRefresh": false
            }

        }, {
            "path": "pages/loadUnload-page/loadUnload-page",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }

        }, {
            "path": "pages/loadUnload-page/loadUnload-detail/loadUnload-detail",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }

        }, {
            "path": "pages/loadUnload-page/my-page/my-page",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }

        }
    ],
    "subPackages": [{

 pages/customer-page/customer-index/customer-index.vue

@@ -202,8 +202,7 @@
                canClick: false
            };
        },
        onLoad() {},
        onShow() {
        onLoad() {
            this.init();
        },
        methods: {
@@ -313,7 +312,7 @@
            // 提煤单详情
            cardBodyClick(v) {
                uni
        .navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&code=${v.code}&cars2=${v.cars2}` });
                    .navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&code=${v.code}&cars2=${v.cars2}` });
            },
            // 点击历史提煤单获取详情
            faYundetail(v) {
@@ -478,7 +477,8 @@
                    box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
                    border-radius: 20rpx;
                    overflow: hidden;
                    @include flex flex-direction: column;
                    @include flex;
                    flex-direction: column;
                    position: relative;
                    align-items: flex-start;
                    margin-top: vww(10);

 pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue

@@ -17,17 +17,28 @@
                </view>
            </view>
            <view class="main-block">
                <view class="data-filter" @click="showPopup">
                    <view class="search-icon"><u-icon name="search" color="#494949" size="50"></u-icon></view>
                <view class="data-filter"
                    @click="showPopup">
                    <view class="search-icon"><u-icon name="search"
                            color="#494949"
                            size="50"></u-icon></view>
                    <view class="date-text">{{ dateselect }}</view>
                    <view class="">
                        <view class="arrow-icon"><u-icon name="arrow-down-fill" color="#1481FF" size="50"></u-icon></view>
                        <view class="arrow-icon"><u-icon name="arrow-down-fill"
                                color="#1481FF"
                                size="50"></u-icon></view>
                    </view>
                </view>
                <view class="filter-condition"></view>
                <view class="date-information">
                    <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="filterList.length == 0"></u-empty>
                    <view class="statistics-card" v-for="(item, index) in filterList" :key="index">
                    <u-empty mode="data"
                        icon="http://cdn.uviewui.com/uview/empty/data.png"
                        textSize="30"
                        iconSize="1000"
                        v-if="filterList.length == 0"></u-empty>
                    <view class="statistics-card"
                        v-for="(item, index) in filterList"
                        :key="index">
                        <view class="card-top">
                            <view class="left"><combined-title :title="item.condition"></combined-title></view>
                            <view class="card-top_num">
@@ -40,13 +51,18 @@
                                }}吨
                            </view>
                        </view>
                        <view class="card-main" v-for="(value, i) in item.taskCoalList" :key="i" @click="faYunDetail(value.id)">
                        <view class="card-main"
                            v-for="(value, i) in item.taskCoalList"
                            :key="i"
                            @click="faYunDetail(value.id)">
                            <view class="first-line">
                                <view class="main-information">
                                    <view class="sign">装</view>
                                    <view class="filedname">
                                        <text v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.deptName || '' }}</text>
                                        <text v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.customerName || '' }}</text>
                                        <text
                                            v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.deptName || '' }}</text>
                                        <text
                                            v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.customerName || '' }}</text>
                                    </view>
                                </view>
                                <view class="main-divider"></view>
@@ -56,8 +72,10 @@
                                <view class="main-information">
                                    <view class="sign">卸</view>
                                    <view class="filedname">
                                        <text v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.customerName || '' }}</text>
                                        <text v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.deptName || '' }}</text>
                                        <text
                                            v-if="value.orderType == '外销' || value.orderType == '内销' || value.orderType == '转出'">{{ value.customerName || '' }}</text>
                                        <text
                                            v-else-if="value.orderType == '外购' || value.orderType == '内购' || value.orderType == '转入'">{{ value.deptName || '' }}</text>
                                    </view>
                                </view>
                            </view>
@@ -65,33 +83,44 @@
                                <view class="coal-name">
                                    <view class="">{{ value.coalName }}</view>
                                    <view class="black-bar"></view>
                                    <view class="coal-type" v-if="value.orderType">{{ value.orderType }}</view>
                                    <view class="coal-type"
                                        v-if="value.orderType">{{ value.orderType }}</view>
                                </view>
                                <!-- <view class="black-block"><view class="black-bar"></view></view>
                                <view class="coal-type">{{ value.orderType }}</view> -->
                            </view>
                            <view class="third-line">
                                <view class="carnum-icon"><image src="https://mx.jzeg.cn:9095/appimg/image/banner/carNO.png" mode="widthFix"></image></view>
                                <view class="carnum-icon">
                                    <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carNO.png"
                                        mode="widthFix"></image>
                                </view>
                                <view class="carnum-text">{{ value.carNo || '' }}</view>
                            </view>
                            <view class="fourth-line">
                                <view class="time-icon"><u-icon name="clock" color="#515151" size="28"></u-icon></view>
                                <view class="time-icon"><u-icon name="clock"
                                        color="#515151"
                                        size="28"></u-icon></view>
                                <view class="send-date">{{ value.sendDate }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <u-popup :show="conditinonShow" mode="bottom" :closeable="true" :closeOnClickOverlay="true" @close="conditinonclose">
                <scroll-view scroll-y="true" class="scroll-Y">
            <u-popup :show="conditinonShow"
                mode="bottom"
                :closeable="true"
                :closeOnClickOverlay="true"
                @close="conditinonclose">
                <scroll-view scroll-y="true"
                    class="scroll-Y">
                    <view class="filter-main">
                        <view class="filter-body date-button">
                            <view class="condition-name">日期</view>
                            <view class="filter-name">
                                <u-button :text="dateselect" @click="opencalendar"></u-button>
                                <u-button :text="dateselect"
                                    @click="opencalendar"></u-button>
                                <view class="filter-button ">
                                    <uni-calendar
                                        ref="calendar"
                                    <uni-calendar ref="calendar"
                                        class="uni-calendar--hook"
                                        :clear-date="true"
                                        :date="info.date"
@@ -100,49 +129,71 @@
                                        :startDate="info.startDate"
                                        :endDate="info.endDate"
                                        :range="info.range"
                                        @confirm="confirm"
                                    />
                                        @confirm="confirm" />
                                </view>
                            </view>
                        </view>
                        <view class="filter-body">
                            <view class="condition-name">煤种</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in coalList" :key="index" @click="filterCondition(0, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" :class="{ shadowactive: item.active }"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in coalList"
                                    :key="index"
                                    @click="filterCondition(0, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"
                                        :class="{ shadowactive: item.active }"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="coalShow < coalTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(0)" v-if="coalTotal > 3"></u-button>
                            </view> -->
                            </view>
                        </view>
                        <view class="filter-body" v-if="typeList.length !== 0">
                        <view class="filter-body"
                            v-if="typeList.length !== 0">
                            <view class="condition-name">类型</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in typeList" :key="index" @click="filterCondition(1, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in typeList"
                                    :key="index"
                                    @click="filterCondition(1, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="typeShow < typeTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(1)" v-if="typeTotal > 3"></u-button>
                            </view> -->
                            </view>
                        </view>
                        <view class="filter-body" v-if="roleType !== 1">
                        <view class="filter-body"
                            v-if="roleType !== 1">
                            <view class="condition-name">客户</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in customerList" :key="index" @click="filterCondition(2, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in customerList"
                                    :key="index"
                                    @click="filterCondition(2, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="customerShow < customerTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(2)" v-if="customerTotal > 3"></u-button>
                            </view> -->
                            </view>
                        </view>
                        <view class="filter-body" v-if="roleType == 1">
                        <view class="filter-body"
                            v-if="roleType == 1">
                            <view class="condition-name">货代</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in forwarderList" :key="index" @click="filterCondition(3, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in forwarderList"
                                    :key="index"
                                    @click="filterCondition(3, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button
@@ -155,11 +206,17 @@
                            </view> -->
                            </view>
                        </view>
                        <view class="filter-body" v-if="roleType != 3">
                        <view class="filter-body"
                            v-if="roleType != 3">
                            <view class="condition-name">车队</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in fleetList" :key="index" @click="filterCondition(4, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in fleetList"
                                    :key="index"
                                    @click="filterCondition(4, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="fleetShow < fleetTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(4)" v-if="fleetTotal > 3"></u-button>
@@ -169,19 +226,31 @@
                        <view class="filter-body">
                            <view class="condition-name">矿场</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in filedList" :key="index" @click="filterCondition(5, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in filedList"
                                    :key="index"
                                    @click="filterCondition(5, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="filedShow < filedTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(5)" v-if="filedTotal > 3"></u-button>
                            </view> -->
                            </view>
                        </view>
                        <view class="filter-body" v-if="roleType == 2">
                        <view class="filter-body"
                            v-if="roleType == 2">
                            <view class="condition-name">车牌号</view>
                            <view class="filter-name">
                                <view class="filter-button" v-for="(item, index) in carNoList" :key="index" @click="filterCondition(6, index, item.condition)">
                                    <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" v-if="index < carNoShow"></u-button>
                                <view class="filter-button"
                                    v-for="(item, index) in carNoList"
                                    :key="index"
                                    @click="filterCondition(6, index, item.condition)">
                                    <u-button :text="item.condition"
                                        :type="item.active ? 'primary' : ''"
                                        size="small"
                                        v-if="index < carNoShow"></u-button>
                                </view>
                                <!-- <view class="toggle-button">
                                <u-button :text="carNoShow < carNoTotal ? '查看更多' : '收起'" type="primary" size="small" @click="toggle(6)" v-if="carNoTotal > 3"></u-button>
@@ -191,8 +260,16 @@
                    </view>
                </scroll-view>
                <view class="utils-button">
                    <view class="reset-button"><u-button type="default" text="重置" :plain="true" shape="circle" @click="resetCondition"></u-button></view>
                    <view class="confirm-button"><u-button type="primary" text="确定" :plain="true" shape="circle" @click="confirmCondition"></u-button></view>
                    <view class="reset-button"><u-button type="default"
                            text="重置"
                            :plain="true"
                            shape="circle"
                            @click="resetCondition"></u-button></view>
                    <view class="confirm-button"><u-button type="primary"
                            text="确定"
                            :plain="true"
                            shape="circle"
                            @click="confirmCondition"></u-button></view>
                </view>
            </u-popup>
            <tab-bar :current="1"></tab-bar>
@@ -202,152 +279,230 @@
</template>

<script>
import combinedTitle from '@/components/combined-title/combined-title.vue';
export default {
    components: {
        combinedTitle
    },
    data() {
        return {
            conditionList: [],
            coalList: [],
            typeList: [],
            customerList: [],
            forwarderList: [],
            fleetList: [],
            filedList: [],
            carNoList: [],
            isactive: false,
            info: {
                lunar: false,
                range: true,
                insert: false,
                selected: []
    import combinedTitle from '@/components/combined-title/combined-title.vue';
    export default {
        components: {
            combinedTitle
        },
        data() {
            return {
                conditionList: [],
                coalList: [],
                typeList: [],
                customerList: [],
                forwarderList: [],
                fleetList: [],
                filedList: [],
                carNoList: [],
                isactive: false,
                info: {
                    lunar: false,
                    range: true,
                    insert: false,
                    selected: []
                },
                first: '',
                last: '',
                firstFilter: '',
                lastFilter: '',
                taskList: [],
                filterList: [],
                totalLength: 0,
                totalTon: 0,
                // 筛选弹出层
                conditinonShow: false,
                // 超过两行自动隐藏
                coalShow: 3,
                typeShow: 3,
                customerShow: 3,
                forwarderShow: 3,
                fleetShow: 3,
                filedShow: 3,
                carNoShow: 3,
                coalToggeleState: false,
                typeToggeleState: false,
                customerToggeleState: false,
                forwarderToggeleState: false,
                fleetToggeleState: false,
                filedToggeleState: false,
                carNoToggeleState: false,
                // 点击右箭头详情弹窗
                faYunDetailobj: {},
                modalShow: false,
                coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请',
                    '进入场院'
                ]
            };
        },
        onShow() {
            this.firstDate();
            this.lastDate();
            this.getShipping();
            this.getTmTaskCoalData();
        },
        methods: {
            firstDate() {
                let y = new Date().getFullYear(); //获取年份
                let m = new Date().getMonth() + 1; //获取月份
                let d = '01';
                m = m < 10 ? '0' + m : m; //月份补 0
                this.first = [y, m, d].join('-');
                this.firstFilter = [y, m, d].join('-');
            },
            first: '',
            last: '',
            firstFilter: '',
            lastFilter: '',
            taskList: [],
            filterList: [],
            totalLength: 0,
            totalTon: 0,
            // 筛选弹出层
            conditinonShow: false,
            // 超过两行自动隐藏
            coalShow: 3,
            typeShow: 3,
            customerShow: 3,
            forwarderShow: 3,
            fleetShow: 3,
            filedShow: 3,
            carNoShow: 3,
            coalToggeleState: false,
            typeToggeleState: false,
            customerToggeleState: false,
            forwarderToggeleState: false,
            fleetToggeleState: false,
            filedToggeleState: false,
            carNoToggeleState: false,
            // 点击右箭头详情弹窗
            faYunDetailobj: {},
            modalShow: false,
            coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请', '进入场院']
        };
    },
    onShow() {
        this.firstDate();
        this.lastDate();
        this.getShipping();
        this.getTmTaskCoalData();
    },
    methods: {
        firstDate() {
            let y = new Date().getFullYear(); //获取年份
            let m = new Date().getMonth() + 1; //获取月份
            let d = '01';
            m = m < 10 ? '0' + m : m; //月份补 0
            this.first = [y, m, d].join('-');
            this.firstFilter = [y, m, d].join('-');
        },
        lastDate() {
            let y = new Date().getFullYear(); //获取年份
            let m = new Date().getMonth() + 1; //获取月份
            let d = new Date(y, m, 0).getDate(); //获取当月最后一日
            m = m < 10 ? '0' + m : m; //月份补 0
            d = d < 10 ? '0' + d : d; //日数补 0
            this.last = [y, m, d].join('-');
            this.lastFilter = [y, m, d].join('-');
        },
        // 筛选条件
        getShipping() {
            this.$reqGet('getShippingCondition', { startTime: this.first, endTime: this.last }).then(res => {
                this.conditionList = res.data;
                this.coalList = res.data
                    .filter(v => v.conditionType == 0)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.typeList = res.data
                    .filter(v => v.conditionType == 1)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.customerList = res.data
                    .filter(v => v.conditionType == 2)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.forwarderList = res.data
                    .filter(v => v.conditionType == 3)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.fleetList = res.data
                    .filter(v => v.conditionType == 4)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.filedList = res.data
                    .filter(v => v.conditionType == 5)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
                this.carNoList = res.data
                    .filter(v => v.conditionType == 6)
                    .map(item => {
                        return {
                            ...item,
                            active: false
                        };
                    });
            });
        },
        // 获取数据
        getTmTaskCoalData() {
            uni.showLoading({
                title: '加载中'
            });
            this.$reqGet('getTmTaskCoalData', { startTime: this.first, endTime: this.last }).then(res => {
                this.filterList = this.taskList = res.data;
            lastDate() {
                let y = new Date().getFullYear(); //获取年份
                let m = new Date().getMonth() + 1; //获取月份
                let d = new Date(y, m, 0).getDate(); //获取当月最后一日
                m = m < 10 ? '0' + m : m; //月份补 0
                d = d < 10 ? '0' + d : d; //日数补 0
                this.last = [y, m, d].join('-');
                this.lastFilter = [y, m, d].join('-');
            },
            // 筛选条件
            getShipping() {
                this.$reqGet('getShippingCondition', { startTime: this.first, endTime: this.last }).then(res => {
                    this.conditionList = res.data;
                    this.coalList = res.data
                        .filter(v => v.conditionType == 0)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.typeList = res.data
                        .filter(v => v.conditionType == 1)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.customerList = res.data
                        .filter(v => v.conditionType == 2)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.forwarderList = res.data
                        .filter(v => v.conditionType == 3)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.fleetList = res.data
                        .filter(v => v.conditionType == 4)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.filedList = res.data
                        .filter(v => v.conditionType == 5)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                    this.carNoList = res.data
                        .filter(v => v.conditionType == 6)
                        .map(item => {
                            return {
                                ...item,
                                active: false
                            };
                        });
                });
            },
            // 获取数据
            getTmTaskCoalData() {
                uni.showLoading({
                    title: '加载中'
                });
                this.$reqGet('getTmTaskCoalData', { startTime: this.first, endTime: this.last }).then(res => {
                    this.filterList = this.taskList = res.data;
                    if (this.filterList.length != 0) {
                        this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y);
                        this.totalTon = this.filterList.map(v =>
                            v.taskCoalList.reduce((prev, cur) => {
                                return cur.clean + prev;
                            }, 0)
                        );
                        this.totalTon = this.totalTon.reduce((x, y) => x + y);
                    } else {
                        this.totalLength = 0;
                        this.totalTon = 0;
                    }
                    uni.hideLoading();
                });
            },
            // 筛选数据
            filterCondition(value, i, data) {
                switch (value) {
                    case 0:
                        this.coalList[i].active = !this.coalList[i].active;
                        break;
                    case 1:
                        this.typeList[i].active = !this.typeList[i].active;
                        break;
                    case 2:
                        this.customerList[i].active = !this.customerList[i].active;
                        break;
                    case 3:
                        this.forwarderList[i].active = !this.forwarderList[i].active;
                        break;
                    case 4:
                        this.fleetList[i].active = !this.fleetList[i].active;
                        break;
                    case 5:
                        this.filedList[i].active = !this.filedList[i].active;
                        break;
                    case 6:
                        this.carNoList[i].active = !this.carNoList[i].active;
                        break;
                }

                const validateFn = key => (v, arr) => {
                    if (arr.length == 0) {
                        return true;
                    } else {
                        return arr.includes(v[key]);
                    }
                };
                let conditionMapping = {
                    coalName: this.coalList.filter(v => v.active == true).map(item => item.condition),
                    orderType: this.typeList.filter(v => v.active == true).map(item => item.condition),
                    customerName: this.customerList.filter(v => v.active == true).map(item => item.condition),
                    xsUser2Name: this.forwarderList.filter(v => v.active == true).map(item => item.condition),
                    fleetName: this.fleetList.filter(v => v.active == true).map(item => item.condition),
                    filedName: this.filedList.filter(v => v.active == true).map(item => item.condition),
                    carNo: this.carNoList.filter(v => v.active == true).map(item => item.condition)
                };

                const mapping = {
                    coalName: validateFn('coalName'),
                    orderType: validateFn('orderType'),
                    customerName: validateFn('customerName'),
                    xsUser2Name: validateFn('xsUser2Name'),
                    fleetName: validateFn('fleetName'),
                    filedName: validateFn('filedName'),
                    carNo: validateFn('carNo')
                };
                this.filterList = this.taskList.map(val => {
                    return {
                        condition: val.condition,
                        conditionId: val.conditionId,
                        conditionType: val.conditionType,
                        taskCoalList: val.taskCoalList.filter(v => Reflect.ownKeys(conditionMapping).every(key =>
                            mapping[key](v, conditionMapping[key])))
                    };
                });
                if (this.filterList.length != 0) {
                    this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y);
                    this.totalTon = this.filterList.map(v =>
@@ -360,679 +515,659 @@
                    this.totalLength = 0;
                    this.totalTon = 0;
                }
                uni.hideLoading();
            });
        },
        // 筛选数据
        filterCondition(value, i, data) {
            switch (value) {
                case 0:
                    this.coalList[i].active = !this.coalList[i].active;
                    break;
                case 1:
                    this.typeList[i].active = !this.typeList[i].active;
                    break;
                case 2:
                    this.customerList[i].active = !this.customerList[i].active;
                    break;
                case 3:
                    this.forwarderList[i].active = !this.forwarderList[i].active;
                    break;
                case 4:
                    this.fleetList[i].active = !this.fleetList[i].active;
                    break;
                case 5:
                    this.filedList[i].active = !this.filedList[i].active;
                    break;
                case 6:
                    this.carNoList[i].active = !this.carNoList[i].active;
                    break;
            }

            const validateFn = key => (v, arr) => {
                if (arr.length == 0) {
                    return true;
                } else {
                    return arr.includes(v[key]);
            },
            // 确定筛选
            confirmCondition() {
                this.conditinonShow = false;
            },
            // 重置筛选
            resetCondition() {
                this.conditinonShow = false;
                this.first = this.dateRange.slice(0, 10);
                this.last = this.dateRange.slice(11);
                this.coalList.forEach(v => {
                    v.active = false;
                });
                this.typeList.forEach(v => {
                    v.active = false;
                });
                this.customerList.forEach(v => {
                    v.active = false;
                });
                this.forwarderList.forEach(v => {
                    v.active = false;
                });
                this.fleetList.forEach(v => {
                    v.active = false;
                });
                this.filedList.forEach(v => {
                    v.active = false;
                });
            },
            confirm(e) {
                console.log(e, '日期选择');
                this.first = e.range.before;
                this.last = e.range.after;
                this.conditinonShow = false;
            },
            opencalendar() {
                this.$refs.calendar.open();
            },
            // 点击查看更多
            toggle(value) {
                switch (value) {
                    case 0:
                        if (!this.coalToggeleState) {
                            this.coalShow = this.coalTotal;
                            this.coalToggeleState = true;
                        } else {
                            this.coalShow = 3;
                            this.coalToggeleState = false;
                        }
                        break;
                    case 1:
                        if (!this.typeToggeleState) {
                            this.typeShow = this.typeTotal;
                            this.typeToggeleState = true;
                        } else {
                            this.typeShow = 3;
                            this.typeToggeleState = false;
                        }
                        break;
                    case 2:
                        if (!this.customerToggeleState) {
                            this.customerShow = this.customerTotal;
                            this.customerToggeleState = true;
                        } else {
                            this.customerShow = 3;
                            this.customerToggeleState = false;
                        }
                        break;
                    case 3:
                        if (!this.forwarderToggeleState) {
                            this.forwarderShow = this.forwarderTotal;
                            this.forwarderToggeleState = true;
                        } else {
                            this.forwarderShow = 3;
                            this.forwarderToggeleState = false;
                        }
                        break;
                    case 4:
                        if (!this.fleetToggeleState) {
                            this.fleetShow = this.fleetTotal;
                            this.fleetToggeleState = true;
                        } else {
                            this.fleetShow = 3;
                            this.fleetToggeleState = false;
                        }
                        break;
                    case 5:
                        if (!this.filedToggeleState) {
                            this.filedShow = this.filedTotal;
                            this.filedToggeleState = true;
                        } else {
                            this.filedShow = 3;
                            this.filedToggeleState = false;
                        }
                        break;
                    case 6:
                        if (!this.carNoToggeleState) {
                            this.carNoShow = this.carNoTotal;
                            this.carNoToggeleState = true;
                        } else {
                            this.carNoShow = 3;
                            this.carNoToggeleState = false;
                        }
                        break;
                }
            };
            let conditionMapping = {
                coalName: this.coalList.filter(v => v.active == true).map(item => item.condition),
                orderType: this.typeList.filter(v => v.active == true).map(item => item.condition),
                customerName: this.customerList.filter(v => v.active == true).map(item => item.condition),
                xsUser2Name: this.forwarderList.filter(v => v.active == true).map(item => item.condition),
                fleetName: this.fleetList.filter(v => v.active == true).map(item => item.condition),
                filedName: this.filedList.filter(v => v.active == true).map(item => item.condition),
                carNo: this.carNoList.filter(v => v.active == true).map(item => item.condition)
            };

            const mapping = {
                coalName: validateFn('coalName'),
                orderType: validateFn('orderType'),
                customerName: validateFn('customerName'),
                xsUser2Name: validateFn('xsUser2Name'),
                fleetName: validateFn('fleetName'),
                filedName: validateFn('filedName'),
                carNo: validateFn('carNo')
            };
            this.filterList = this.taskList.map(val => {
                return {
                    condition: val.condition,
                    conditionId: val.conditionId,
                    conditionType: val.conditionType,
                    taskCoalList: val.taskCoalList.filter(v => Reflect.ownKeys(conditionMapping).every(key => mapping[key](v, conditionMapping[key])))
                };
            });
            if (this.filterList.length != 0) {
                this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y);
                this.totalTon = this.filterList.map(v =>
                    v.taskCoalList.reduce((prev, cur) => {
                        return cur.clean + prev;
                    }, 0)
                );
                this.totalTon = this.totalTon.reduce((x, y) => x + y);
            } else {
                this.totalLength = 0;
                this.totalTon = 0;
            },
            // 跳转发运详情
            faYunDetail(takeCoalId) {
                uni.navigateTo({
                    url: `/pages/public-page/faYunstatisticsDetails/faYunstatisticsDetails?id=${takeCoalId}`
                });
            },
            // 打开筛选条件弹窗
            showPopup() {
                this.conditinonShow = true;
            },
            // 关闭筛选条件弹窗
            conditinonclose() {
                this.conditinonShow = false;
            }
        },
        // 确定筛选
        confirmCondition() {
            this.conditinonShow = false;
        },
        // 重置筛选
        resetCondition() {
            this.conditinonShow = false;
            this.first = this.dateRange.slice(0, 10);
            this.last = this.dateRange.slice(11);
            this.coalList.forEach(v => {
                v.active = false;
            });
            this.typeList.forEach(v => {
                v.active = false;
            });
            this.customerList.forEach(v => {
                v.active = false;
            });
            this.forwarderList.forEach(v => {
                v.active = false;
            });
            this.fleetList.forEach(v => {
                v.active = false;
            });
            this.filedList.forEach(v => {
                v.active = false;
            });
        },
        confirm(e) {
            console.log(e, '日期选择');
            this.first = e.range.before;
            this.last = e.range.after;
            this.conditinonShow = false;
        },
        opencalendar() {
            this.$refs.calendar.open();
        },
        // 点击查看更多
        toggle(value) {
            switch (value) {
                case 0:
                    if (!this.coalToggeleState) {
                        this.coalShow = this.coalTotal;
                        this.coalToggeleState = true;
                    } else {
                        this.coalShow = 3;
                        this.coalToggeleState = false;
                    }
                    break;
                case 1:
                    if (!this.typeToggeleState) {
                        this.typeShow = this.typeTotal;
                        this.typeToggeleState = true;
                    } else {
                        this.typeShow = 3;
                        this.typeToggeleState = false;
                    }
                    break;
                case 2:
                    if (!this.customerToggeleState) {
                        this.customerShow = this.customerTotal;
                        this.customerToggeleState = true;
                    } else {
                        this.customerShow = 3;
                        this.customerToggeleState = false;
                    }
                    break;
                case 3:
                    if (!this.forwarderToggeleState) {
                        this.forwarderShow = this.forwarderTotal;
                        this.forwarderToggeleState = true;
                    } else {
                        this.forwarderShow = 3;
                        this.forwarderToggeleState = false;
                    }
                    break;
                case 4:
                    if (!this.fleetToggeleState) {
                        this.fleetShow = this.fleetTotal;
                        this.fleetToggeleState = true;
                    } else {
                        this.fleetShow = 3;
                        this.fleetToggeleState = false;
                    }
                    break;
                case 5:
                    if (!this.filedToggeleState) {
                        this.filedShow = this.filedTotal;
                        this.filedToggeleState = true;
                    } else {
                        this.filedShow = 3;
                        this.filedToggeleState = false;
                    }
                    break;
                case 6:
                    if (!this.carNoToggeleState) {
                        this.carNoShow = this.carNoTotal;
                        this.carNoToggeleState = true;
                    } else {
                        this.carNoShow = 3;
                        this.carNoToggeleState = false;
                    }
                    break;
        computed: {
            roleType() {
                return uni.getStorageSync('roleType');
            },
            dateRange() {
                return `${this.firstFilter}至${this.lastFilter}`;
            },
            dateselect() {
                return `${this.first}至${this.last}`;
            },
            coalTotal() {
                return this.coalList.length;
            },
            typeTotal() {
                return this.typeList.length;
            },
            customerTotal() {
                return this.customerList.length;
            },
            forwarderTotal() {
                return this.forwarderList.length;
            },
            fleetTotal() {
                return this.fleetList.length;
            },
            filedTotal() {
                return this.filedList.length;
            },
            carNoTotal() {
                return this.carNoList.length;
            }
        },
        // 跳转发运详情
        faYunDetail(takeCoalId) {
            uni.navigateTo({
                url: `/pages/public-page/faYunstatisticsDetails/faYunstatisticsDetails?id=${takeCoalId}`
            });
        },
        // 打开筛选条件弹窗
        showPopup() {
            this.conditinonShow = true;
        },
        // 关闭筛选条件弹窗
        conditinonclose() {
            this.conditinonShow = false;
        }
    },
    computed: {
        roleType() {
            return uni.getStorageSync('roleType');
        },
        dateRange() {
            return `${this.firstFilter}至${this.lastFilter}`;
        },
        dateselect() {
            return `${this.first}至${this.last}`;
        },
        coalTotal() {
            return this.coalList.length;
        },
        typeTotal() {
            return this.typeList.length;
        },
        customerTotal() {
            return this.customerList.length;
        },
        forwarderTotal() {
            return this.forwarderList.length;
        },
        fleetTotal() {
            return this.fleetList.length;
        },
        filedTotal() {
            return this.filedList.length;
        },
        carNoTotal() {
            return this.carNoList.length;
        }
    },
    watch: {
        dateselect(newV, old) {
            let tempDate = `${this.first}至${this.last}`;
            if (newV != old && old != '至') {
                this.first = newV.slice(0, 10);
                this.last = newV.slice(11);
                this.getTmTaskCoalData();
        watch: {
            dateselect(newV, old) {
                let tempDate = `${this.first}至${this.last}`;
                if (newV != old && old != '至') {
                    this.first = newV.slice(0, 10);
                    this.last = newV.slice(11);
                    this.getTmTaskCoalData();
                }
            }
        }
    }
};
    };
</script>

<style lang="scss" scoped>
@mixin flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@mixin firstLine {
    width: 80%;
    height: vww(68);
    margin: vww(10) vww(16) 0 0;
    display: flex;
    justify-content: space-between;
}
::v-deep .toggle-button .u-button {
    width: vww(40);
}
.scroll-Y {
    height: 1000rpx;
    position: relative;
    top: 20rpx;
}
.utils-button {
    width: 94%;
    height: vww(30);
    margin: vww(50) auto;
    @include flex;
    .reset-button {
        /deep/ .u-button {
            border: 1px solid #c5c5c5;
            outline: none;
        }
    }
    .confirm-button {
        /deep/ .u-button {
            border: 1px solid #3b56eb;
            outline: none;
            color: #3b56eb;
        }
    }
    /deep/ .u-button {
        width: 279rpx;
        height: 60rpx;
        font-size: 28rpx;
    }
}
.white-block {
    width: 100%;
    height: vww(50);
    margin-top: vww(10);
}
.main {
    width: 100%;
    margin: 0 auto;
    /*顶部统计栏*/
    .top-statistics {
        width: 100%;
        height: 430rpx;
        background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
<style lang="scss"
    scoped>
    @mixin flex {
        display: flex;
        justify-content: center;
        .top-body {
            width: 690rpx;
            height: 220rpx;
            margin: vww(21) auto;
        justify-content: space-between;
        align-items: center;
    }

    @mixin firstLine {
        width: 80%;
        height: vww(68);
        margin: vww(10) vww(16) 0 0;
        display: flex;
        justify-content: space-between;
    }

    ::v-deep .toggle-button .u-button {
        width: vww(40);
    }

    .scroll-Y {
        height: 1000rpx;
        position: relative;
        top: 20rpx;
    }

    .utils-button {
        width: 94%;
        height: vww(30);
        margin: vww(50) auto;
        @include flex;

        .reset-button {
            /deep/ .u-button {
                border: 1px solid #c5c5c5;
                outline: none;
            }
        }

        .confirm-button {
            /deep/ .u-button {
                border: 1px solid #3b56eb;
                outline: none;
                color: #3b56eb;
            }
        }

        /deep/ .u-button {
            width: 279rpx;
            height: 60rpx;
            font-size: 28rpx;
        }
    }

    .white-block {
        width: 100%;
        height: vww(50);
        margin-top: vww(10);
    }

    .main {
        width: 100%;
        margin: 0 auto;

        /*顶部统计栏*/
        .top-statistics {
            width: 100%;
            height: 430rpx;
            background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            .content-statistics {
            justify-content: center;

            .top-body {
                width: 690rpx;
                height: 140rpx;
                background: #ffffff;
                box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
                border-radius: 10rpx;
                height: 220rpx;
                margin: vww(21) auto;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                .content-text {
                    height: vww(40);
                justify-content: space-between;
                flex-direction: column;

                .content-statistics {
                    width: 690rpx;
                    height: 140rpx;
                    background: #ffffff;
                    box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
                    border-radius: 10rpx;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;

                    .content-text {
                        height: vww(40);
                        @include flex;
                        flex-direction: column;
                        margin-top: 31rpx;
                        margin-bottom: 31rpx;

                        .content-container {
                            width: 100%;
                            min-height: vww(16);
                            font-size: 40rpx;
                            font-weight: bold;
                            color: #3b56eb;
                            text-align: center;
                        }

                        .content-num {
                            width: 96rpx;
                            min-height: 24rpx;
                            font-size: 24rpx;
                            font-weight: 400;
                            color: #333333;
                        }
                    }
                }

                .content-title {
                    width: 160rpx;
                    height: 38rpx;
                    font-size: 40rpx;
                    font-weight: normal;
                    color: #ffffff;
                    line-height: 69rpx;
                    margin: vww(21) auto;
                }
            }
        }

        .main-block {
            width: 690rpx;
            margin: vww(12) vww(15) auto vww(15);
            background: #ffffff;
            box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
            border-radius: 20rpx;
            @include flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            top: -145rpx;

            .data-filter {
                width: 635rpx;
                height: 68rpx;
                border: 2px solid rgba(73, 95, 252, 0.6);
                box-shadow: 0rpx 5rpx 13rpx 0rpx rgba(73, 95, 252, 0.6);
                border-radius: 34rpx;
                margin-top: vww(21);
                padding: 0 vww(5);

                @include flex .date-text {
                    width: 330rpx;
                    height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #494949;
                }
            }

            .filter-condition {
                width: 100%;
                height: 54rpx;
                background: #f5f5f5;
                @include flex;
                margin-top: vww(15);
            }

            .date-information {
                width: 635rpx;
                background: #f6faff;
                border-radius: 20rpx;

                .statistics-card {
                    width: 100%;
                    min-height: vww(120);
                    @include flex;
                    flex-direction: column;
                    margin-top: 31rpx;
                    margin-bottom: 31rpx;
                    .content-container {
                        width: 100%;
                        min-height: vww(16);
                        font-size: 40rpx;
                        font-weight: bold;
                        color: #3b56eb;
                        text-align: center;
                    }
                    .content-num {
                        width: 96rpx;
                        min-height: 24rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #333333;
                    }
                }
            }
            .content-title {
                width: 160rpx;
                height: 38rpx;
                font-size: 40rpx;
                font-weight: normal;
                color: #ffffff;
                line-height: 69rpx;
                margin: vww(21) auto;
            }
        }
    }
    .main-block {
        width: 690rpx;
        margin: vww(12) vww(15) auto vww(15);
        background: #ffffff;
        box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
        border-radius: 20rpx;
        @include flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        top: -145rpx;
        .data-filter {
            width: 635rpx;
            height: 68rpx;
            border: 2px solid rgba(73, 95, 252, 0.6);
            box-shadow: 0rpx 5rpx 13rpx 0rpx rgba(73, 95, 252, 0.6);
            border-radius: 34rpx;
            margin-top: vww(21);
            padding: 0 vww(5);
            @include flex .date-text {
                width: 330rpx;
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #494949;
            }
        }
        .filter-condition {
            width: 100%;
            height: 54rpx;
            background: #f5f5f5;
            @include flex;
            margin-top: vww(15);
        }
        .date-information {
            width: 635rpx;
            background: #f6faff;
            border-radius: 20rpx;
            .statistics-card {
                width: 100%;
                min-height: vww(120);
                @include flex;
                flex-direction: column;
                margin-top: vww(5);
                margin-bottom: vww(5);
                overflow: hidden;
                &:last-child {
                    .card-main {
                        &:last-child {
                            border-bottom: 0;
                        }
                    }
                }
                .card-top {
                    width: 96%;
                    @include flex;
                    .left {
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #494949;
                    }
                    .card-top_num {
                        font-size: 40rpx;
                        font-weight: 400;
                        color: #6074ee;
                    }
                }
                .card-main {
                    width: 100%;
                    height: vww(150);
                    border-bottom: vww(1) solid #d6d6d6;
                    margin-top: vww(12);
                    margin-left: vww(20);
                    padding-bottom: vww(12);
                    position: relative;
                    @include flex flex-direction: column;
                    align-items: flex-start;
                    .first-line {
                        width: 80%;
                        height: vww(32);
                        color: #303030;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .main-information {
                            width: 88%;
                            height: vww(28);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            .sign {
                                width: vww(28);
                                height: vww(28);
                                line-height: vww(28);
                                text-align: center;
                                background: url('https://mx.jzeg.cn:9095/appimg/image/banner/blueblock.png') no-repeat;
                                background-size: contain;
                                font-size: 30rpx;
                                font-weight: 400;
                                color: #ffffff;
                                margin-right: vww(20);
                    margin-top: vww(5);
                    margin-bottom: vww(5);
                    overflow: hidden;

                    &:last-child {
                        .card-main {
                            &:last-child {
                                border-bottom: 0;
                            }
                        }
                        .main-divider {
                            width: 530rpx;
                            height: 1rpx;
                            background: #e3e3e3;
                            position: absolute;
                            top: 80rpx;
                            left: vww(50);
                    }

                    .card-top {
                        width: 96%;
                        @include flex;

                        .left {
                            font-size: 30rpx;
                            font-weight: 400;
                            color: #494949;
                        }
                        .point-number {
                            width: 20%;

                        .card-top_num {
                            font-size: 40rpx;
                            font-weight: 400;
                            color: #f81414;
                            position: absolute;
                            right: 12rpx;
                            display: flex;
                            flex-wrap: wrap;
                            color: #6074ee;
                        }
                    }
                    .first-extra {
                        @include firstLine;
                        height: vww(32);
                        .main-information {

                    .card-main {
                        width: 100%;
                        height: vww(150);
                        border-bottom: vww(1) solid #d6d6d6;
                        margin-top: vww(12);
                        margin-left: vww(20);
                        padding-bottom: vww(12);
                        position: relative;
                        @include flex flex-direction: column;
                        align-items: flex-start;

                        .first-line {
                            width: 80%;
                            height: vww(32);
                            color: #303030;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .main-information {
                                width: 88%;
                                height: vww(28);
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;

                                .sign {
                                    width: vww(28);
                                    height: vww(28);
                                    line-height: vww(28);
                                    text-align: center;
                                    background: url('https://mx.jzeg.cn:9095/appimg/image/banner/blueblock.png') no-repeat;
                                    background-size: contain;
                                    font-size: 30rpx;
                                    font-weight: 400;
                                    color: #ffffff;
                                    margin-right: vww(20);
                                }
                            }

                            .main-divider {
                                width: 530rpx;
                                height: 1rpx;
                                background: #e3e3e3;
                                position: absolute;
                                top: 80rpx;
                                left: vww(50);
                            }

                            .point-number {
                                width: 20%;
                                font-size: 40rpx;
                                font-weight: 400;
                                color: #f81414;
                                position: absolute;
                                right: 12rpx;
                                display: flex;
                                flex-wrap: wrap;
                            }
                        }

                        .first-extra {
                            @include firstLine;
                            height: vww(32);

                            .main-information {
                                width: 100%;
                                height: vww(28);
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;

                                .sign {
                                    width: vww(28);
                                    height: vww(28);
                                    line-height: vww(28);
                                    text-align: center;
                                    background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat;
                                    background-size: contain;
                                    font-size: 30rpx;
                                    font-weight: 400;
                                    color: #ffffff;
                                    margin-right: vww(20);
                                }
                            }
                        }

                        .second-line {
                            width: 100%;
                            height: vww(28);
                            height: vww(15);
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .coal-name {
                                flex-grow: 1;
                                height: 30rpx;
                                font-size: 30rpx;
                                font-weight: 300;
                                color: #515151;
                                position: relative;
                                display: flex;
                                align-items: center;

                                .black-bar {
                                    width: 2rpx;
                                    height: 30rpx;
                                    background: #515151;
                                    margin-left: vww(12);
                                }

                                .coal-type {
                                    margin-left: vww(12);
                                    min-width: vww(50);
                                    height: 30rpx;
                                    line-height: 30rpx;
                                    font-size: 30rpx;
                                    font-weight: 300;
                                    color: #515151;
                                }
                            }
                        }

                        .third-line {
                            width: 40%;
                            min-height: vww(15);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            .sign {
                                width: vww(28);
                                height: vww(28);
                                line-height: vww(28);
                                text-align: center;
                                background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat;
                                background-size: contain;
                                font-size: 30rpx;
                                font-weight: 400;
                                color: #ffffff;
                                margin-right: vww(20);
                            align-items: flex-start;

                            .carnum-icon {
                                width: 28rpx;
                                height: 28rpx;
                                margin-right: vww(10);

                                image {
                                    width: 28rpx;
                                    height: 28rpx;
                                }
                            }
                        }
                    }
                    .second-line {
                        width: 100%;
                        height: vww(15);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .coal-name {
                            flex-grow: 1;
                            height: 30rpx;
                            font-size: 30rpx;
                            font-weight: 300;
                            color: #515151;
                            position: relative;
                            display: flex;
                            align-items: center;
                            .black-bar {
                                width: 2rpx;
                                height: 30rpx;
                                background: #515151;
                                margin-left: vww(12);
                            }
                            .coal-type {
                                margin-left: vww(12);
                                min-width: vww(50);
                                height: 30rpx;
                                line-height: 30rpx;
                                font-size: 30rpx;

                            .carnum-text {
                                font-size: 28rpx;
                                font-weight: 300;
                                color: #515151;
                            }
                        }
                    }
                    .third-line {
                        width: 40%;
                        min-height: vww(15);
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-start;
                        .carnum-icon {
                            width: 28rpx;
                            height: 28rpx;
                            margin-right: vww(10);
                            image {
                                width: 28rpx;
                                height: 28rpx;

                        .fourth-line {
                            width: 40%;
                            height: vww(14);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            color: #515151;

                            .time-icon {
                                margin-right: vww(10);
                            }
                        }
                        .carnum-text {
                            font-size: 28rpx;
                            font-weight: 300;
                            color: #515151;
                        }
                    }
                    .fourth-line {
                        width: 40%;
                        height: vww(14);
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        color: #515151;
                        .time-icon {
                            margin-right: vww(10);
                        }
                    }
                }
            }
        }
    }
    .filter-main {
        min-height: 950rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .date-button {
            width: 80%;
            height: vww(80);
            margin: vww(5) auto;
            .condition-name {
                margin-bottom: vww(10);
            }
        }
        .filter-body {

        .filter-main {
            min-height: 950rpx;
            width: 100%;
            position: relative;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .condition-name {
                margin-left: vww(15);
                margin-top: vww(10);
                font-size: vww(16);
                color: #686868;
            flex-direction: column;
            justify-content: space-around;

            .date-button {
                width: 80%;
                height: vww(80);
                margin: vww(5) auto;

                .condition-name {
                    margin-bottom: vww(10);
                }
            }
            .filter-name {
                width: 94%;
                margin: 0 auto;

            .filter-body {
                width: 100%;
                position: relative;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;

                .filter-button {
                    color: #393a3c;
                    height: vww(16);
                    padding: vww(8);
                    margin: vww(5) vww(5);
                    margin-bottom: vww(10);
                    /deep/ .shadowactive {
                        background: linear-gradient(90deg, rgba(73, 123, 251, 0.32), rgba(72, 16, 255, 0.32));
                        box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29);
                    }
                .condition-name {
                    margin-left: vww(15);
                    margin-top: vww(10);
                    font-size: vww(16);
                    color: #686868;
                }
                .toggle-button {
                    width: 30%;

                .filter-name {
                    width: 94%;
                    margin: 0 auto;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    position: absolute;
                    right: vww(-21);
                    top: vww(-23);
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: flex-start;

                    .filter-button {
                        color: #393a3c;
                        height: vww(16);
                        padding: vww(8);
                        margin: vww(5) vww(5);
                        margin-bottom: vww(10);

                        /deep/ .shadowactive {
                            background: linear-gradient(90deg, rgba(73, 123, 251, 0.32), rgba(72, 16, 255, 0.32));
                            box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29);
                        }
                    }

                    .toggle-button {
                        width: 30%;
                        display: flex;
                        justify-content: center;
                        position: absolute;
                        right: vww(-21);
                        top: vww(-23);
                    }
                }
            }
        }

        // 日期发运
        // .date-information {
        //     width: 100%;
        //     display: flex;
        //     flex-direction: column;
        //     .statistics-card {
        //         width: 100%;
        //         margin-top: vww(8);
        //         border: 1px solid #cccccc;
        //         border-radius: vww(5);
        //         background-color: #fff;
        //         min-height: vww(120);
        //         display: flex;
        //         flex-direction: column;
        //         justify-content: space-between;
        //         .card-title {
        //             width: 100%;
        //             height: vww(40);
        //             line-height: vww(40);
        //             padding-left: vww(5);
        //             color: #bcbcbc;
        //             border-bottom: 1px solid #cccccc;
        //             display: flex;
        //             .title-date {
        //                 width: vww(90);
        //                 margin-right: vww(10);
        //             }
        //             .title-number {
        //                 flex: 1;
        //             }
        //         }
        //         .card-main {
        //             width: 100%;
        //             flex: 1;
        //             position: relative;
        //             .arrow-right {
        //                 position: absolute;
        //                 right: vww(14);
        //                 top: vww(18);
        //             }
        //             .main-body {
        //                 width: 80%;
        //                 height: vww(60);
        //                 margin-top: vww(5);
        //                 padding: vww(3);
        //                 color: #686868;
        //                 display: flex;
        //                 flex-wrap: wrap;
        //                 justify-content: space-around;
        //             }
        //         }
        //     }
        // }
    }
    // 日期发运
    // .date-information {
    //     width: 100%;
    //     display: flex;
    //     flex-direction: column;
    //     .statistics-card {
    //         width: 100%;
    //         margin-top: vww(8);
    //         border: 1px solid #cccccc;
    //         border-radius: vww(5);
    //         background-color: #fff;
    //         min-height: vww(120);
    //         display: flex;
    //         flex-direction: column;
    //         justify-content: space-between;
    //         .card-title {
    //             width: 100%;
    //             height: vww(40);
    //             line-height: vww(40);
    //             padding-left: vww(5);
    //             color: #bcbcbc;
    //             border-bottom: 1px solid #cccccc;
    //             display: flex;
    //             .title-date {
    //                 width: vww(90);
    //                 margin-right: vww(10);
    //             }
    //             .title-number {
    //                 flex: 1;
    //             }
    //         }
    //         .card-main {
    //             width: 100%;
    //             flex: 1;
    //             position: relative;
    //             .arrow-right {
    //                 position: absolute;
    //                 right: vww(14);
    //                 top: vww(18);
    //             }
    //             .main-body {
    //                 width: 80%;
    //                 height: vww(60);
    //                 margin-top: vww(5);
    //                 padding: vww(3);
    //                 color: #686868;
    //                 display: flex;
    //                 flex-wrap: wrap;
    //                 justify-content: space-around;
    //             }
    //         }
    //     }
    // }
}
</style>
</style>

 pages/driver-page/driver-index/bill-of-lading-details/weighingDevice/weighingDevice.vue

@@ -291,10 +291,8 @@
                } else if (this.weighList.orderType == '外购' || this.weighList.orderType == '内购' || this.weighList
                    .orderType == '转入') {
                    if (this.weighList.hair == 0) {
                        // this.temporaryWeighObj.hair = this.realTimeWeigh;
                        this.temporaryWeighObj.hair = newV;
                    } else {
                        // this.temporaryWeighObj.skin = this.realTimeWeigh;
                        this.temporaryWeighObj.skin = newV;
                        this.temporaryWeighObj.clean = (this.weighList.hair - this.temporaryWeighObj.skin).toFixed(2);
                        this.isweigh = this.temporaryWeighObj.clean > this.weighList.orderSurplus || this.temporaryWeighObj
@@ -303,13 +301,6 @@
                }
            },
            // 监听重量变化
            // globalweigh: {
            //     handler(v) {
            //         this.weighData.weigh = this.realTimeWeigh = v;
            //         console.log(this.realTimeWeigh, '真实重量改变了');
            //     },
            //     deep: true
            // },
            globalweigh(newV) {
                this.weighData.weigh = this.realTimeWeigh = newV;
                console.log(this.realTimeWeigh, '真实重量改变了');
@@ -334,13 +325,6 @@
            // 加减煤按钮禁用与否
            addAndSubtractCoalDisabled() {
                return this.realTimeWeigh == 0;
                // if (this.weighList.orderType == '外销' || this.weighList.orderType == '内销' || this.weighList.orderType == '转出') {
                //     if (this.weighList.hair == 0) {
                //         return true;
                //     } else if (this.weighList.hair != 0) {
                //         return false;
                //     }
                // }
            },
            // 是否放空按钮禁用
            isEvacuation() {
@@ -348,15 +332,11 @@
                    '转出') {
                    return (this.weighList.skin === 0 ? this.temporaryWeighObj.skin : this.weighList.skin) == this
                        .temporaryWeighObj.hair;
                    // return this.weighList.skin == this.temporaryWeighObj.hair || this.temporaryWeighObj.skin == this
                    //     .temporaryWeighObj.hair;
                }
                if (this.weighList.orderType == '外购' || this.weighList.orderType == '内购' || this.weighList.orderType ==
                    '转入') {
                    return (this.weighList.hair === 0 ? this.temporaryWeighObj.skin : this.weighList.hair) == this
                        .temporaryWeighObj.hair;
                    // return this.weighList.hair == this.temporaryWeighObj.skin || this.temporaryWeighObj.skin == this
                    //     .temporaryWeighObj.hair;
                }
            },
            sideline() {

 pages/driver-page/drvier-my/drvier-my.vue

@@ -24,7 +24,6 @@
                            </view>
                            <view class="information-value">
                                {{ userInfo.idCard || '' }}
                                <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.idCard"></u-icon> -->
                            </view>
                        </view>
                        <view class="information-line">
@@ -35,7 +34,6 @@
                            </view>
                            <view class="information-value">
                                {{ userInfo.phone || '' }}
                                <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.phone"></u-icon> -->
                            </view>
                        </view>
                        <view class="information-line">
@@ -46,7 +44,6 @@
                            </view>
                            <view class="information-value">
                                {{ userInfo.carNo || '' }}
                                <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.carNo"></u-icon> -->
                            </view>
                        </view>
                        <view class="information-line">
@@ -57,7 +54,6 @@
                            </view>
                            <view class="information-value">
                                {{ userInfo.axleNum || '' }}
                                <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.axleNum"></u-icon> -->
                            </view>
                        </view>
                        <view class="information-line last">
@@ -68,7 +64,6 @@
                            </view>
                            <view class="information-value">
                                {{ userInfo.weight || '' }}
                                <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.weight"></u-icon> -->
                            </view>
                        </view>
                    </view>
@@ -122,43 +117,6 @@
                    shape="circle"
                    plain></u-button></view>
        </view>
        <!-- <view class="personal-information-form">
            <u--form labelPosition="left" :model="userInfo" ref="form1">
                <u-form-item labelWidth="20%" label="姓名" ref="item1">
                    <u--input v-model="userInfo.name" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
                </u-form-item>
                <u-form-item labelWidth="20%" label="身份证号" ref="item1">
                    <u--input v-model="userInfo.idCard" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
                </u-form-item>
                <u-form-item labelWidth="20%" label="手机号" ref="item1">
                    <u--input v-model="userInfo.phone" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
                </u-form-item>
                <u-form-item labelWidth="20%" label="车牌号" ref="item1">
                    <u--input v-model="userInfo.carNo" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
                </u-form-item>
                <u-form-item labelWidth="20%" label="体重" ref="item1">
                    <u--input v-model="userInfo.weight" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
                </u-form-item>
                <u-form-item v-model="userInfo.axleNum" labelWidth="20%" label="车轴数" ref="item1">
                    <u--input border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
                </u-form-item>
                <u-form-item labelWidth="20%" label="车辆照片" ref="item1">
                    <u--image :showLoading="true" :src="userInfo.carImg != null ? BaseUrl + userInfo.carImg : ''" width="80px" height="80px" @click="imageClick(1)">
                        <view slot="error" style="font-size: 24rpx;">加载失败</view>
                    </u--image>
                </u-form-item>
                <u-form-item labelWidth="25%" label="行驶证照片" ref="item1">
                    <u--image :showLoading="true" :src="userInfo.drivingImg != null ? BaseUrl + userInfo.drivingImg : ''" width="80px" height="80px" @click="imageClick(2)">
                        <view slot="error" style="font-size: 24rpx;">加载失败</view>
                    </u--image>
                </u-form-item>
            </u--form>
            <view class="push-information-button">
                <u-button text="修改个人资料" type="primary" @click="editBtnClick"></u-button>
                <u-button text="退出登录" type="primary" @click="logout"></u-button>
            </view> -->
        <!-- <view class="statistics"><u-button text="发运统计" type="primary" @click="statistics"></u-button></view> -->
        <!-- </view> -->

        <!-- 图片预览弹出框 -->
        <view class="previewImage-container">

 pages/loadUnload-page/loadUnload-detail/loadUnload-detail.vue

New file
@@ -0,0 +1,188 @@
<template>
    <view>
        <view style="position: relative;">
            <u-empty mode="data"
                icon="http://cdn.uviewui.com/uview/empty/data.png"
                textSize="30"
                iconSize="1000"
                v-if="detailData.length == 0"></u-empty>
        </view>
        <view class="collection-form">
            <view class="collection-form-item"
                v-for="(item, index) in detailData"
                :key="index">
                <view class="weigh-item">
                    <view class="item">
                        <view class="concrete"
                            :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/skin.png)`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
                            皮
                        </view>
                        <view class="num">{{ item.skin }}</view>
                    </view>
                    <view class="item">
                        <view class="concrete"
                            :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/hair.png)`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
                            毛
                        </view>
                        <view class="num">{{ item.hair }}</view>
                    </view>
                    <view class="item">
                        <view class="concrete"
                            :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/clean.png)`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
                            净
                        </view>
                        <view class="num">{{ item.clean }}</view>
                    </view>
                </view>
                <view class="order-type info">
                    订单类型:{{item.orderType}}
                </view>
                <view class="car-num info">
                    车牌号:{{item.carNo}}
                </view>
                <view class="file-name info">
                    煤场名称:{{item.filedName}}
                </view>
                <view class="order-margin info">
                    煤种名称:{{item.coalName}}
                </view>
                <view class="confirm-button info">
                    <u-button plain
                        type="primary"
                        text="确定装卸"
                        shape="circle"
                        @click.stop="loadOrder(item.id)"
                        :loading="loading"
                        loadingText="确认"></u-button>
                </view>
            </view>
        </view>
        <u-modal :show="loadShow"
            content='确认装卸此提煤单'
            :showCancelButton="true"
            @confirm="confirmUnload"
            @cancel="cancelUnload"></u-modal>
    </view>
</template>

<script>
    import { onlineurl } from '@/api/request.js'
    export default {
        data() {
            return {
                name: "",
                detailData: [],
                onlineurl,
                loadShow: false, // 确认弹窗控制
                loading: false,
                id: ""
            }
        },
        onLoad(params) {
            this.name = params.coalName ? params.coalName : ''
            this.init()
        },
        methods: {
            init() {
                uni.showLoading({
                    title: "加载中"
                })
                this.$reqGet('getAccordingCoalNameAll', { coalName: this.name }).then(res => {
                    uni.hideLoading()
                    if (res.code === 0) {
                        this.detailData = res.data
                    } else {
                        this.$u.toast('加载失败')
                    }
                })
            },
            loadOrder(id) {
                this.loadShow = true;
                this.id = id;
            },
            confirmUnload() {
                this.loadShow = false;
                this.loading = true
                this.$reqPost('confirmLoadAndUnload', { tmId: this.id }, 'params').then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.$u.toast('装卸成功')
                        this.init()
                    } else {
                        this.$u.toast(res.msg ? res.msg : '装卸失败')
                    }
                })
            },
            cancelUnload() {
                this.loadShow = false
            },
        }
    }
</script>

<style lang="scss"
    scoped>
    .collection-form {
        width: vww(345);
        margin: 0 vww(15);
        position: relative;

        .collection-form-item {
            width: 690rpx;
            height: 400rpx;
            background: #ffffff;
            box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
            border-radius: 20rpx;
            overflow: hidden;
            @include flex;
            flex-direction: column;
            position: relative;
            justify-content: center;
            margin-top: vww(10);

            .weigh-item {
                width: 100%;
                height: vww(36);
                margin: vww(10);
                @include flex;
                justify-content: space-around;

                .item {
                    min-width: vww(50);
                    height: vww(45);
                    font-size: 21rpx;
                    font-weight: 400;
                    color: #ffffff;
                    text-align: center;
                    line-height: vww(30);
                    @include flex;

                    .concrete {
                        width: vww(36);
                        height: vww(36);
                    }

                    .num {
                        font-size: 40rpx;
                        font-weight: 300;
                        color: #303030;
                    }
                }
            }

            .info {
                height: vww(20);
                color: #515151;
                margin: vww(5);
                margin-left: vww(20);
            }

            .confirm-button {
                width: vww(80);
                position: absolute;
                bottom: vww(20);
                right: vww(10);
            }
        }
    }
</style>

 pages/loadUnload-page/loadUnload-page.vue

New file
@@ -0,0 +1,125 @@
<template>
    <view class="">
        <view class="customer-index">
            <view class="customer-index_body">
                <view class="wait-collection"
                    style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/customerbanner.png') no-repeat;background-size:contain">
                </view>
                <view style="position: relative;top: -120px;">
                    <u-empty mode="data"
                        icon="http://cdn.uviewui.com/uview/empty/data.png"
                        textSize="30"
                        iconSize="1000"
                        v-if="CoalNameList.length == 0"></u-empty>
                </view>
                <view class="collection-form">
                    <view class="collection-form-item"
                        v-for="(item, index) in CoalNameList"
                        :key="index">
                        <view class="first-line">
                            <view class="dispatch-receive">
                                <view class="dispatch">煤种名称:{{ item.coalName }}</view>
                            </view>
                            <view class="">
                                <u-button type="primary"
                                    plain
                                    text="选择"
                                    @click.stop="loadUnloadHandle(item.coalName)"></u-button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                CoalNameList: []
            };
        },
        onLoad() {
            this.init()
        },
        methods: {
            init() {
                this.getCoalNameAllHandle()
            },
            getCoalNameAllHandle() {
                uni.showLoading({
                    title: "加载中"
                })
                this.$reqGet('getCoalNameAll').then(res => {
                    uni.hideLoading()
                    if (res.code === 0) {
                        this.CoalNameList = res.data
                    } else {
                        this.$u.toast('加载失败')
                    }
                })
            },
            loadUnloadHandle(name) {
                uni.navigateTo({
                    url: `/pages/loadUnload-page/loadUnload-detail/loadUnload-detail?coalName=${name}`
                })
            }
        },
    }
</script>

<style lang="scss"
    scoped>
    @mixin flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wait-collection {
        width: 100%;
        height: 600rpx;
        position: relative;
        top: vww(-10);
        z-index: 0;
    }

    .customer-index {
        width: 100%;
        margin: 0 auto;

        &_body {
            .collection-form {
                width: vww(345);
                margin: 0 vww(15);
                position: relative;
                top: vww(-144);

                .collection-form-item {
                    width: 690rpx;
                    height: 100rpx;
                    background: #ffffff;
                    box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
                    border-radius: 20rpx;
                    overflow: hidden;
                    @include flex;
                    flex-direction: column;
                    position: relative;
                    align-items: center;
                    justify-content: center;
                    margin-top: vww(10);

                    .first-line {
                        width: 94%;
                        height: vww(30);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                }
            }
        }
    }
</style>

 pages/loadUnload-page/my-page/my-page.vue

New file
@@ -0,0 +1,551 @@
<template>
    <view class="driver-my">
        <view class="driver-banner">
            <view class="navgation">我的</view>
            <view class="avatar">
                <view class="avatar-imgage"
                    style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/driverava.png')no-repeat;background-size: cover;">
                </view>
                <view class="avatar-name">{{ userInfo.name || '' }}</view>
                <view class="edit-button"><u-button type="primary"
                        @click="editBtnClick"
                        shape="circle"
                        plain>编辑个人资料</u-button></view>
            </view>
            <view class="personal-information">
                <view class="personal-information-block">
                    <view class="block-main">
                        <view class="information-line"
                            @click="">
                            <view class="line-label">
                                <image src="https://mx.jzeg.cn:9095/appimg/image/banner/personalicon.png"
                                    mode="widthFix"></image>
                                <view class="label-text">身份证号</view>
                            </view>
                            <view class="information-value">
                                {{ userInfo.idCard || '' }}
                            </view>
                        </view>
                        <view class="information-line">
                            <view class="line-label">
                                <image src="https://mx.jzeg.cn:9095/appimg/image/banner/phonenum.png"
                                    mode="widthFix"></image>
                                <view class="label-text">手机号</view>
                            </view>
                            <view class="information-value">
                                {{ userInfo.phone || '' }}
                            </view>
                        </view>
                        <view class="information-line">
                            <view class="line-label">
                                <image src="https://mx.jzeg.cn:9095/appimg/image/banner/phonenum.png"
                                    mode="widthFix"></image>
                                <view class="label-text">账号</view>
                            </view>
                            <view class="information-value">
                                {{ userInfo.username || '' }}
                            </view>
                        </view>
                        <view class="information-line last">
                            <view class="line-label">
                                <image src="https://mx.jzeg.cn:9095/appimg/image/banner/weighnum.png"
                                    mode="widthFix"></image>
                                <view class="label-text">体重</view>
                            </view>
                            <view class="information-value">
                                {{ userInfo.weight || '' }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="loginout">
            <view class="loginout-main"><u-button text="退出登录"
                    type="primary"
                    @click="logout"
                    shape="circle"
                    plain></u-button></view>
        </view>
        <!-- 修改弹出框 -->
        <view class="editDriverPopup-container">
            <u-popup :show="editDriverPopupShow"
                mode="bottom"
                @close="editDriverPopupClose"
                @open="editDriverPopupOpen"
                :closeable="true">
                <combined-title title="修改个人信息"
                    style="margin-left:20rpx"></combined-title>
                <view class="editDriverPopup-container-box">
                    <u--form labelPosition="left"
                        :model="editUserInfo"
                        ref="editRef">
                        <u-form-item labelWidth="20%"
                            label="姓名"
                            prop="name"
                            required>
                            <u--input v-model="editUserInfo.name"
                                border="none"
                                inputAlign="left"></u--input>
                        </u-form-item>
                        <u-form-item labelWidth="20%"
                            label="身份证号"
                            prop="idCard"
                            required>
                            <u--input v-model="editUserInfo.idCard"
                                border="none"
                                inputAlign="left"></u--input>
                        </u-form-item>
                        <u-form-item labelWidth="20%"
                            label="手机号"
                            prop="phone"
                            required>
                            <u--input v-model="editUserInfo.phone"
                                border="none"
                                inputAlign="left"></u--input>
                        </u-form-item>
                        <u-form-item labelWidth="20%"
                            label="账号"
                            prop="username"
                            required>
                            <u--input v-model="editUserInfo.username"
                                border="none"
                                inputAlign="left"></u--input>
                        </u-form-item>
                        <u-form-item labelWidth="20%"
                            label="体重"
                            prop="weight"
                            required>
                            <u--input v-model="editUserInfo.weight"
                                border="none"
                                inputAlign="left"
                                placeholder="体重以kg作为单位"></u--input>
                        </u-form-item>
                    </u--form>
                    <view style="margin-top: 30rpx;">
                        <u-button text="提交"
                            @click="updateUser"
                            type="primary"></u-button>
                    </view>
                </view>
            </u-popup>
        </view>
        <view class="logoutModel">
            <u-modal :show="logoutShow"
                :title="logoutTitle"
                showCancelButton
                :content="logoutContent"
                @confirm="logoutConfirm"
                @cancel="logoutCancel"></u-modal>
        </view>
    </view>
</template>

<script>
    import { customerId, userInfo, redirectLogin } from '@/utils/status';
    import { BaseUrl } from '@/api/publicInterface.js';
    import { mapMutations } from 'vuex';
    export default {
        data() {
            return {
                // 获取的司机详情
                userInfo: {},
                // 修改司机详情
                editUserInfo: {
                    phone: '',
                    name: '',
                    username: '',
                    type: 3,
                    idCard: '',
                    carNo: '',
                    carImg: '',
                    drivingImg: '',
                    axleNum: '',
                    weight: '',
                    userId: ''
                },
                rules: {
                    name: {
                        type: 'string',
                        required: true,
                        message: '请填写姓名',
                        trigger: ['blur', 'change']
                    },
                    idCard: [{
                            type: 'string',
                            required: true,
                            message: '请输入身份证号',
                            trigger: ['blur', 'change']
                        },
                        {
                            pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                            message: '身份证号格式不正确'
                        }
                    ],
                    phone: [{
                            required: true,
                            message: '此项为必填项',
                            // blur和change事件触发检验
                            trigger: ['blur', 'change']
                        },
                        {
                            min: 11,
                            max: 11,
                            message: '请输入合法手机号'
                        },
                        {
                            validator: (rule, value, callback) => {
                                return uni.$u.test.mobile(value);
                            },
                            message: '手机号码格式不正确',
                            trigger: ['change', 'blur']
                        }
                    ],
                    weight: {
                        type: 'number',
                        required: true,
                        message: '请填写体重',
                        trigger: ['blur', 'change']
                    },
                    username: {
                        type: 'string',
                        required: true,
                        message: '请填写账号',
                        trigger: ['blur', 'change']
                    }
                },
                src: '',
                fileList1: [],
                fileList2: [],
                // 修改信息弹出框
                editDriverPopupShow: false,
                // previewImage
                previewImageShow: false,
                previewImageSrc: '',
                // 退出模态框
                logoutShow: false,
                logoutTitle: '提示',
                logoutContent: '是否确认退出',
                BaseUrl
            };
        },
        onShow() {
            // this.init();
        },
        onReady() {
            this.$refs.editRef.setRules(this.rules);
        },
        methods: {
            ...mapMutations(['changeisUploadimg']),
            init() {
                this.getUserEntity();
            },
            getUserEntity() {
                uni.showLoading({
                    title: '加载中...'
                });
                this.$reqGet('getUserEntity').then(res => {
                    uni.hideLoading();
                    this.userInfo = res.data;
                    Object.keys(this.editUserInfo).map(item => {
                        if (res.data[item]) {
                            this.editUserInfo[item] = res.data[item];
                        }
                    });
                });
            },
            // 修改按钮点击
            editBtnClick() {
                this.editDriverPopupShow = true;
            },
            /**
             * @editPopup 修改弹出框事件
             */
            editDriverPopupClose() {
                this.editDriverPopupShow = false;
            },
            editDriverPopupOpen() {},
            // 修改用户信息
            updateUser() {
                this.editUserInfo = {
                    ...this.editUserInfo,
                    carImg: uni.getStorageSync('carImg'),
                    drivingImg: uni.getStorageSync('drivingImg')
                };
                this.$refs.editRef
                    .validate()
                    .then(res => {
                        this.$reqPost('updateUser', this.editUserInfo, 'json').then(res => {
                            console.log('更新数据', res);
                            this.editDriverPopupShow = false;
                            if (res.code == 0) {
                                this.$u.toast('修改成功');
                                this.init();
                            } else {
                                uni.showToast({
                                    title: res.msg,
                                    icon: 'none',
                                    duration: 2000
                                });
                            }
                        });
                    })
                    .catch(err => {
                        this.$u.toast('修改失败');
                    });
            },
            logout() {
                this.logoutShow = true;
            },
            logoutConfirm() {
                redirectLogin();
                this.$store.commit('changeisLogin', false)
                this.$store.dispatch('websocketOnClose')
            },
            logoutCancel() {
                this.logoutShow = false;
            },
        }
    };
</script>

<style lang="scss"
    scoped>
    @mixin flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .statistics {
        margin-top: vww(10);
        margin-bottom: vww(10);
    }

    ::v-deep.driver-my {
        width: 100%;
        margin: 0 auto;
        padding-bottom: vww(60);

        .driver-banner {
            width: 100%;
            height: 430rpx;
            background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
            background-size: contain;
            position: fixed;
            top: 0;

            .navgation {
                width: 80rpx;
                height: 37rpx;
                font-size: 40rpx;
                font-weight: normal;
                color: #ffffff;
                line-height: 69rpx;
                margin: vww(60) auto;
            }

            .avatar {
                width: 100%;
                height: 430rpx;
                display: flex;
                align-items: center;
                position: fixed;
                top: 0;

                .avatar-imgage {
                    width: 98rpx;
                    height: 98rpx;
                    margin-left: vww(18);
                    @include flex;
                    justify-content: center;
                }

                .avatar-name {
                    width: 200rpx;
                    display: flex;
                    flex-wrap: wrap;
                    height: 32rpx;
                    font-size: 34rpx;
                    font-weight: bold;
                    color: #ffffff;
                    margin-left: vww(17);
                }

                .edit-button {
                    position: relative;
                    left: vww(73);
                    top: vww(4);
                }
            }

            .personal-information {
                width: 100%;
                display: flex;
                justify-content: center;
                position: relative;
                top: vww(20);

                &-block {
                    width: 690rpx;
                    height: 400rpx;
                    background: #ffffff;
                    box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
                    border-radius: 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .block-main {
                        width: 636rpx;
                        margin: vww(10) vww(14);
                    }

                    .information-line {
                        @include flex width: 636rpx;
                        height: vww(45);
                        border-bottom: 1rpx solid #f0f1f6;

                        .line-label {
                            width: 188rpx;
                            height: 90rpx;

                            @include flex image {
                                width: 50rpx;
                                height: 50rpx;
                            }

                            .label-text {
                                width: 120rpx;
                                font-size: 30rpx;
                                font-weight: 400;
                                color: #000000;
                                line-height: 85rpx;
                            }
                        }

                        .information-value {
                            min-width: vww(125);
                            @include flex;
                            font-size: 30rpx;
                            font-weight: 400;
                            color: #000000;
                            line-height: 85rpx;
                        }
                    }

                    .last {
                        border-bottom: 0;
                    }
                }
            }
        }

        .car-information {
            width: 100%;
            position: relative;
            top: vww(410);
            @include flex justify-content: center;

            .information-main {
                width: 690rpx;
                height: 552rpx;
                background: #ffffff;
                box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
                border-radius: 20rpx;

                .information-body {
                    width: 636rpx;
                    margin: vww(15) vww(14);
                    @include flex flex-direction: column;

                    .car-img {
                        height: 246rpx;
                        width: 100%;
                        @include flex;
                        flex-direction: column;
                        align-items: flex-start;

                        .label-title {
                            @include flex;
                            width: 220rpx;
                            height: 100rpx;

                            .label-text {
                                width: 100%;
                                height: 50rpx;
                            }

                            image {
                                width: 50rpx;
                                height: 50rpx;
                            }
                        }
                    }
                }
            }
        }

        .loginout {
            width: 100%;
            height: 74rpx;
            @include flex;
            justify-content: center;
            position: relative;
            bottom: vww(-430);

            .loginout-main {
                width: 84%;
            }
        }

        // 表单
        .personal-information-form {
            margin-top: vww(200);

            .push-information-button {
                display: flex;
                margin: vww(20) auto 0;
                width: 80%;

                .u-button {
                    &:nth-of-type(2) {
                        margin-left: vww(10);
                    }
                }
            }
        }

        // 预览图片
        .previewImage-container {}

        // 修改弹出框
        .editDriverPopup-container {
            .u-popup {
                .u-transition {
                    height: 50%;

                    .u-popup__content {
                        overflow: scroll !important;

                        .editDriverPopup-container-box {
                            width: 90%;
                            margin: 0 auto;
                        }

                        //closeIcon
                        .u-popup__content__close--top-right {
                            top: vww(20) !important;

                            .u-icon {
                                .u-icon__icon {
                                    font-size: vww(20) !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>

 pages/tabbar-page/index-tabbar/index-tabbar.vue

@@ -23,6 +23,8 @@
        <driver-index v-if="roleType == 3"
            ref="driverIndexRef"
            :indexdriverBillOfLoadingData="indexdriverBillOfLoadingData"></driver-index>
        <load-unload ref="LoadUnloadRef"
            v-if="roleType == 5"></load-unload>
        <tab-bar :current="0"></tab-bar>
        <!-- 推送消息弹窗 -->
        <u-modal :show="messagePushShow"
@@ -39,6 +41,7 @@
    import customerIndex from '@/pages/customer-page/customer-index/customer-index.vue';
    import driverIndex from '@/pages/driver-page/driver-index/driver-index.vue';
    import freightForwarderIndex from '@/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue';
    import LoadUnload from '@/pages/loadUnload-page/loadUnload-page.vue'
    import { mapState, mapMutations } from 'vuex';
    import { webSocketUrl } from '@/api/request.js';

@@ -47,7 +50,8 @@
        components: {
            customerIndex,
            driverIndex,
            freightForwarderIndex
            freightForwarderIndex,
            LoadUnload
        },
        computed: {
            ...mapState(['globalweighHouseCode', 'globalweigh', 'globalisconnect', 'globalSocket', 'websocketData',
@@ -217,6 +221,12 @@
                            this.$refs.driverIndexRef.init();
                        });
                        break;
                    case 5:
                        console.log('LoadUnloadRef');
                        this.$nextTick(() => {
                            this.$refs.LoadUnloadRef.init();
                        });
                        break;
                    default:
                        break;
                }

 pages/tabbar-page/myPage-tabbar/myPage-tabbar.vue

@@ -1,51 +1,62 @@
<template>
    <view>
        <customer-my-page v-if="roleType == 1" ref="customerMyPageRef"></customer-my-page>
        <freight-forwarder-my-page v-if="roleType == 2" ref="freightForwarderMyPageRef"></freight-forwarder-my-page>
        <driver-my-page v-if="roleType == 3" ref="driverMyRef"></driver-my-page>
        <tab-bar :current="2"></tab-bar>
        <customer-my-page v-if="roleType == 1"
            ref="customerMyPageRef"></customer-my-page>
        <freight-forwarder-my-page v-if="roleType == 2"
            ref="freightForwarderMyPageRef"></freight-forwarder-my-page>
        <driver-my-page v-if="roleType == 3"
            ref="driverMyRef"></driver-my-page>
        <unload-mypage ref="UnloadMypageRef"
            v-if="roleType == 5"></unload-mypage>
        <tab-bar :current="roleType==5?1:2"></tab-bar>
    </view>
</template>

<script>
import customerMyPage from '@/pages/customer-page/customer-my/customer-my.vue';
import driverMyPage from '@/pages/driver-page/drvier-my/drvier-my.vue';
import freightForwarderMyPage from '@/pages/freight-forwarder-page/freightForwarder-my/freightForwarder-my.vue';

export default {
    components: {
        customerMyPage,
        driverMyPage,
        freightForwarderMyPage
    },
    onShow() {
        this.init();
    },
    data() {
        return {};
    },
    computed: {
        roleType() {
            return uni.getStorageSync('roleType');
        }
    },
    methods: {
        init() {
            switch (this.roleType) {
                case 1:
                    this.$refs.customerMyPageRef.init();
                    break;
                case 2:
                    this.$refs.freightForwarderMyPageRef.init();
                    break;
                case 3:
                    this.$refs.driverMyRef.init();
                default:
                    break;
    import customerMyPage from '@/pages/customer-page/customer-my/customer-my.vue';
    import driverMyPage from '@/pages/driver-page/drvier-my/drvier-my.vue';
    import freightForwarderMyPage from '@/pages/freight-forwarder-page/freightForwarder-my/freightForwarder-my.vue';
    import UnloadMypage from '@/pages/loadUnload-page/my-page/my-page.vue'
    export default {
        components: {
            customerMyPage,
            driverMyPage,
            freightForwarderMyPage,
            UnloadMypage
        },
        onLoad() {
            this.init();
        },
        data() {
            return {};
        },
        computed: {
            roleType() {
                return uni.getStorageSync('roleType');
            }
        },
        methods: {
            init() {
                switch (this.roleType) {
                    case 1:
                        this.$refs.customerMyPageRef.init();
                        break;
                    case 2:
                        this.$refs.freightForwarderMyPageRef.init();
                        break;
                    case 3:
                        this.$refs.driverMyRef.init();
                        break;
                    case 5:
                        this.$refs.UnloadMypageRef.init();
                        break;
                    default:
                        break;
                }
            }
        }
    }
};
    };
</script>

<style lang="scss" scoped></style>
<style lang="scss"
    scoped></style>

 store/index.js

@@ -42,13 +42,26 @@
            selectedIconPath: '../../static/tabBar-icon/Bmine57.png',
            text: '我的'
        }
    ],
    three: [{
            pagePath: 'pages/tabbar-page/index-tabbar/index-tabbar',
            iconPath: '../../static/tabBar-icon/home.png',
            selectedIconPath: '../../static/tabBar-icon/homeblue.png',
            text: '首页'
        },
        {
            pagePath: 'pages/tabbar-page/myPage-tabbar/myPage-tabbar',
            iconPath: '../../static/tabBar-icon/Gmine10.png',
            selectedIconPath: '../../static/tabBar-icon/Bmine57.png',
            text: '我的'
        }
    ]
}
const store = new Vuex.Store({
    state: {
        // 用戶界面判斷
        userInfo: {},
        roleType: null, // 1客户，2货代，3司机
        roleType: null, // 1客户，2货代，3司机 5装卸员
        userTabbar: [], // 用户所在角色底部菜单，
        // 称重时的重量
        globalweigh: 0,
@@ -97,6 +110,9 @@
                uni.setStorageSync('userTabbar', state.userTabbar)
            } else if (roleType == 2 || roleType == 3) {
                state.userTabbar = userRoleTabbar.second
                uni.setStorageSync('userTabbar', state.userTabbar)
            } else if (roleType == 5) {
                state.userTabbar = userRoleTabbar.three
                uni.setStorageSync('userTabbar', state.userTabbar)
            }
        },
@@ -203,7 +219,7 @@
                })
                commit('changereconnectNum', 1)
                dispatch('reconnect')
            } else if (state.connectNum > 6 && state.globalisLogin) {
            } else if (state.connectNum >= 6 && state.globalisLogin) {
                commit('changereconnectNum', 1)
                uni.showToast({
                    title: '网络异常,请稍后重试',