优化websocket

qingyiay

2023-06-26 e442087924963ddf39f451032ae55efb0b16195e

优化websocket

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

New file
@@ -0,0 +1,266 @@
<!-- 查看皮毛净明细 -->
<template>
    <view class="main">
        <view class="main-block"
            v-for="(item,i) in showWeigh"
            :key="i">
            <view class="weigh-item">
                <view class="item">
                    <view class="concrete"
                        style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/skin.png') no-repeat;background-size: cover;">
                        皮</view>
                    <view class="num">{{ item.skin }}</view>
                </view>
                <view class="item">
                    <view class="concrete"
                        style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/hair.png') no-repeat;background-size: cover;">
                        毛</view>
                    <view class="num">{{ item.hair }}</view>
                </view>
                <view class="item">
                    <view class="concrete"
                        style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clean.png') no-repeat;background-size: cover;">
                        净</view>
                    <view class="num">{{ item.clean }}</view>
                </view>
            </view>
            <view class="discount">
                <view class="rate">
                    <view class="label-text">
                        折扣率
                    </view>
                    <view v-if='roleType!==1'
                        class="count">{{item.discount}}%</view>
                    <view v-else
                        class="count-input"><u--input placeholder="请输入折扣率"
                            border="bottom"
                            clearable
                            v-model="discountrate"></u--input></view>
                </view>
                <view class="weigh">
                    <view class="label-text">
                        折扣后重量
                    </view>
                    <view class="count">{{item.discountWeight}}</view>
                </view>
            </view>
            <view class="level">
                <u-tag :text="level||''"
                    plain
                    @click="popoverShow"></u-tag>
            </view>
            <view class="confirm-button"
                v-if='roleType===1'>
                <u-button type="primary"
                    :plain="true"
                    shape="circle"
                    text="确认"
                    @click="confirmInput(item.id)"
                    :loading="loading"
                    loading-text="确认"></u-button>
            </view>
            <view v-if='roleType===1'>
                <u-picker :show="show"
                    :columns="columns"
                    @cancel='cancel'
                    @confirm='confirm'></u-picker>
            </view>
        </view>
    </view>
</template>

<script>
    import loginVue from '../../../../login/login.vue';
    export default {
        data() {
            return {
                orderPlanId: "",
                index: null,
                coalDetailsData: {},
                showWeigh: [],
                discountrate: "",
                loading: false,
                show: false,
                columns: [
                    ['轻质', '中质', '重质']
                ],
                level: '请选择'
            };
        },
        computed: {
            roleType() {
                return uni.getStorageSync('roleType')
            }
        },
        onLoad(params) {
            this.orderPlanId = params.orderPlanId ? params.orderPlanId : ''
            this.index = params.index ? params.index : ''
        },
        onShow() {
            this.roleType === 1 ? this.GetOrderPlan() : this.getTakeCoal()
        },
        methods: {
            getTakeCoal() {
                uni.showLoading({
                    title: '加载中'
                });
                this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
                    if (res.code == 0) {
                        this.coalDetailsData = res.data;
                        this.showWeigh = this.coalDetailsData.tmTaskCoalItems ? this.coalDetailsData
                            .tmTaskCoalItems : []
                        uni.hideLoading()
                    } else {
                        this.$u.toast('加载失败')
                        uni.hideLoading()
                    }
                })
            },
            GetOrderPlan() {
                uni.showLoading({ title: '加载中...' });
                this.$reqGet('GetOrderPlan').then(res => {
                    if (res.data) {
                        this.coalDetailsData = res.data;
                        this.showWeigh = this.coalDetailsData[this.index].tmTaskCoalItems ? this.coalDetailsData[
                            this.index].tmTaskCoalItems : []
                        uni.hideLoading();
                    } else {
                        this.$u.toast('加载失败')
                        uni.hideLoading()
                    }
                });
            },
            confirmInput(id) {
                this.loading = true
                this.$reqPost('updateTmTaskCoalItem', { id, discount: this.discountrate }, 'json').then(res => {
                    if (res.code == 0) {
                        this.loading = false
                        this.$u.toast('操作成功')
                    } else {
                        this.loading = false
                        this.$u.toast('操作失败')
                    }
                })
            },
            popoverShow() {
                console.log(222);
                this.show = true
            },
            confirm(e) {
                this.show = false
                this.level = e.value[0]
            },
            cancel() {
                this.show = false
            }
        },
    }
</script>

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

    /deep/ .u-picker {
        height: 600rpx;
    }

    .main {
        width: 100%;
        height: 100vh;
        background-color: #fff;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        .main-block {
            width: 690rpx;
            height: 360rpx;
            margin: vww(40) auto;
            padding: vww(5);
            background: #ffffff;
            box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
            border-radius: 20rpx;
            overflow: hidden;
            position: relative;

            .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;
                    }
                }
            }

            .discount {
                @include flex;
                justify-content: space-around;
                width: 100%;
                line-height: vww(36);

                .rate,
                .weigh {
                    width: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    flex-direction: column;

                    .count-input {
                        width: 70%;
                        border-bottom: 1px solid rgb(218, 219, 222);

                    }
                }

                .count {
                    font-size: 40rpx;
                    color: rgb(242, 70, 79);
                }

            }

            .level {
                width: 100rpx;
                margin-top: 30rpx;
                margin-left: 60rpx;
            }

            .confirm-button {
                position: absolute;
                bottom: 10rpx;
                right: 10rpx;

                /deep/ .u-button {
                    width: 180rpx !important;
                }
            }
        }
    }
</style>

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

@@ -187,6 +187,7 @@
            console.log('页面卸载');
            this.$store.dispatch('websocketOnClose')
            clearInterval(this.globalIntervalId);
            this.changeisconnect(true)
        },
        methods: {
            ...mapMutations(['pushMessage', 'changeWeigh', 'changeinfraredStatus', 'changeisconnect', 'websocketInit']),