ws增加报错关闭重连功能

qingyiay

2023-07-03 d4bffaa2419bc3e3d6b1af4a6314065c67a8cbc0

ws增加报错关闭重连功能

 components/card/card.vue

File was deleted

 components/weighItem.vue

New file
@@ -0,0 +1,122 @@
<template>
    <!--  称重历史-->
    <view class="weigh-history"
        v-if="list.length!==0">
        <view class="block-main">
            <view class="weigh-item"
                v-for='item in list'
                :key="item.id">
                <view class="weigh-time">
                    <u-tag :text="item.createTime.slice(-8,-3)"
                        plain></u-tag>
                </view>
                <view class="item-block">
                    <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>
        </view>
    </view>
</template>

<script>
    import { onlineurl } from '@/api/request.js'
    export default {
        name: "weighItem",
        props: {
            list: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                onlineurl,
            };
        }
    }
</script>

<style lang="scss"
    scoped>
    .weigh-history {
        width: 690rpx;
        height: 100%;
        min-height: 420rpx;
        margin: vww(20) auto;
        background: #ffffff;
        box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
        border-radius: 20rpx;
        position: relative;
        font-size: 30rpx;
        font-weight: 300;
        color: #303030;
        overflow: hidden;

        .block-main {
            display: grid;
            grid-template-columns: auto;
            grid-template-rows: repeat(auto-fit, minmax(40rpx, 1fr));
            gap: auto 5rpx;
            width: 94%;
            height: 100%;
            min-height: 380rpx;
            margin: vww(18) vww(7) vww(11) vww(17);
            gap: 10rpx 20rpx;

            .weigh-item {
                width: 100%;
                height: vww(80);
                @include flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;

                .item-block {
                    width: 100%;
                    height: vww(36);
                    @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;
                        }
                    }
                }
            }
        }
    }
</style>

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

@@ -163,7 +163,6 @@

<script>
    import { onlineurl } from '@/api/request.js'
    import card from '@/components/card/card.vue';
    import combinedTitle from '@/components/combined-title/combined-title.vue';
    import { customerId } from '@/utils/status';
    export default {
@@ -174,7 +173,6 @@
            }
        },
        components: {
            card,
            combinedTitle
        },
        watch: {

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

@@ -68,7 +68,7 @@
            </view>
            <view class="main-banner">
                <view class="empty-pointer"
                    v-if="!yyDailyList">暂无更多数据</view>
                    v-if="yyDailyList.length===0">暂无更多数据</view>
                <view class="main-block">
                    <view class="main-container">
                        <view class="main-container_content"
@@ -86,7 +86,8 @@
                            <view class="second-line">
                                <view class="line-content">
                                    <view class="line-content_text">净重</view>
                                    <view class="line-content_num">{{ item.clean.toFixed(2)  || 0 }}</view>
                                    <view class="line-content_num">{{ item.clean?item.clean.toFixed(2):''  || '' }}
                                    </view>
                                </view>
                                <view class="line-content">
                                    <view class="line-content_text">余量</view>

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

@@ -57,49 +57,19 @@
                    </view>
                </view>
            </view>
            <view class="weigh-history"
                v-if="showWeigh.length!==0">
                <view class="block-main">
                    <view class="weigh-item"
                        v-for='item in showWeigh'
                        :key="item.id">
                        <view class="weigh-time">
                            <u-tag :text="item.createTime.slice(-8,-3)"
                                plain></u-tag>
                        </view>
                        <view class="item-block">
                            <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>
                </view>
            </view>
            <weigh-item :list="showWeigh"></weigh-item>
        </view>
    </view>
</template>

<script>
    import combinedTitle from '@/components/combined-title/combined-title.vue';
    import weighItem from '@/components/weighItem.vue'
    import { onlineurl } from '@/api/request.js'
    export default {
        components: {
            combinedTitle
            combinedTitle,
            weighItem
        },
        onLoad(params) {
            this.id = params.id;

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

@@ -44,39 +44,7 @@
        </view>

        <!--  称重历史-->
        <view class="weigh-history"
            v-if="showWeigh.length!==0">
            <view class="block-main">
                <view class="weigh-item"
                    v-for='item in showWeigh'
                    :key="item.id">
                    <view class="weigh-time">
                        <u-tag :text="item.createTime.slice(-8,-3)"
                            plain></u-tag>
                    </view>
                    <view class="item-block">
                        <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>
            </view>
        </view>
        <weigh-item :list="showWeigh"></weigh-item>
        <!-- 时间线 -->
        <view class="timeLine">
            <u-steps :current="dayRZ.length - 1"
@@ -155,7 +123,11 @@
    import { onlineurl } from '@/api/request.js'
    import { webSocketUrl } from '@/api/request.js';
    import { mapState, mapMutations } from 'vuex';
    import weighItem from '@/components/weighItem.vue'
    export default {
        components: {
            weighItem
        },
        onLoad(value) {
            this.orderPlanId = value.orderPlanId;
            this.yyId = value.yyId;

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

@@ -1,11 +1,11 @@
<template>
    <view class="main">
        <view style="position: relative;top: -120px;">
        <view>
            <u-empty mode="data"
                icon="http://cdn.uviewui.com/uview/empty/data.png"
                textSize="30"
                iconSize="1000"
                v-if="!orderPlanData"></u-empty>
                v-if="orderPlanData.length===0"></u-empty>
        </view>
        <view class="collection-form">
            <view class="collection-form-item"

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

@@ -142,7 +142,9 @@
                        this.showWeigh = this.coalDetailsData.tmTaskCoalItems ? this.coalDetailsData
                            .tmTaskCoalItems : [],
                            this.showWeigh.forEach(v => {
                                v.discount = null
                                if (!v.discount) {
                                    v.discount = ''
                                }
                            })
                        uni.hideLoading()
                    } else {

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

@@ -4,8 +4,8 @@
            :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/weighbanner.png)`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
            <view class="top">
                <view class="top_left">
                    <text>{{ realTimeWeigh }}</text>
                    <!-- <text>{{ globalweigh }}</text> -->
                    <!-- <text>{{ realTimeWeigh }}</text> -->
                    <text>{{ globalweigh }}</text>
                </view>
                <view class="top_right">
                    <view class="">
@@ -92,41 +92,7 @@
            </view>
        </view>
        <!--  称重历史-->
        <transition name="weighHistory">
            <view class="weigh-history"
                v-if="weighHistory.length!==0">
                <view class="block-main">
                    <view class="weigh-item"
                        v-for='item in weighHistory'
                        :key="item.id">
                        <view class="weigh-time">
                            <u-tag :text="item.createTime.slice(-8,-3)"
                                plain></u-tag>
                        </view>
                        <view class="item-block">
                            <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>
                </view>
            </view>
        </transition>
        <weigh-item :list="weighHistory"></weigh-item>
        <view class="three">
            <!-- 放空 -->
            <u-button type="primary"
@@ -153,6 +119,7 @@
                @click="UnloadingAgainHandle"
                :loading="UnloadingAgainLoading"
                loadingText="确认"
                :disabled="isweigh||realTimeWeigh == 0"
                v-if='canUnload'></u-button>
        </view>
        <!-- 放空弹窗 -->
@@ -172,6 +139,7 @@
    import { webSocketUrl, onlineurl } from '@/api/request.js';
    import { mapState, mapMutations } from 'vuex';
    import combinedTitle from '@/components/combined-title/combined-title.vue';
    import weighItem from '@/components/weighItem.vue'
    export default {
        onLoad(params) {
            this.takeCoalId = params.takeCoalId;
@@ -187,9 +155,11 @@
                this.weighData.overTmWaixiao = 1
            }
            this.changeweighHouseCode(params.weighHouseCode);
            this.changeWeigh(0)
        },
        components: {
            combinedTitle
            combinedTitle,
            weighItem
        },
        data() {
            return {
@@ -272,15 +242,18 @@
                }
            },
            // 监听重量变化
            globalweigh(newV) {
                this.weighData.weigh = this.realTimeWeigh = newV;
                console.log(this.realTimeWeigh, '真实重量改变了');
            globalweigh: {
                handler: function(newV) {
                    this.weighData.weigh = this.realTimeWeigh = newV;
                    console.log(this.realTimeWeigh, '真实重量改变了');
                },
                deep: true
            }
        },
        onShow() {
            this.init();
            this.changeisLogin(true)
            this.realTimeWeigh = 0
            // this.realTimeWeigh = 0
        },
        computed: {
            ...mapState(['globalweigh', 'globalinfraredStatus']),
@@ -326,7 +299,7 @@
            }
        },
        methods: {
            ...mapMutations(['changeweighHouseCode', 'changeisLogin']),
            ...mapMutations(['changeweighHouseCode', 'changeisLogin', 'changeWeigh']),
            init() {
                uni.showLoading({
                    title: '加载中'

 store/index.js

@@ -103,6 +103,9 @@
        socketTask: null,
        websocketData: null, // 存放从后端接收到的websocket数据
        globalIntervalId: null,
        is_open_socket: false, //避免重复连接
        connectNum: 1, //重连次数,
        reconnectTimeOut: null
    },
    mutations: {
        lengthchange(state, payload) {
@@ -114,13 +117,13 @@
        // 设置底部栏
        setUserTabbar(state, roleType) {
            state.roleType = roleType
            if (roleType == 1) {
            if (roleType === 1) {
                state.userTabbar = userRoleTabbar.first
                uni.setStorageSync('userTabbar', state.userTabbar)
            } else if (roleType == 2 || roleType == 3) {
            } else if (roleType === 2 || roleType === 3) {
                state.userTabbar = userRoleTabbar.second
                uni.setStorageSync('userTabbar', state.userTabbar)
            } else if (roleType == 4) {
            } else if (roleType === 4) {
                state.userTabbar = userRoleTabbar.three
                uni.setStorageSync('userTabbar', state.userTabbar)
            }
@@ -159,7 +162,15 @@
        },
        setWebsocketData(state, data) {
            state.websocketData = data
        }
        },
        // 改变重连状态
        changereconnectState(state, payload) {
            state.is_open_socket = payload
        },
        // 改变重连次数
        changereconnectNum(state, payload) {
            state.connectNum = payload
        },
    },
    actions: {
        websocketInit({ state, dispatch, commit }) {
@@ -167,20 +178,30 @@
            state.socketTast = uni.connectSocket({
                url: wsUrl,
                header: { CLIENT_TOC: 'Y' },
                complete: res => {
                    console.log(res, 'socket结果')
                success: res => {
                    console.log(res, 'socketSuccess')
                    if (res.errMsg === 'connectSocket:ok') {
                        commit('changeisconnect', true)
                        commit('changereconnectState', true)
                    }
                },
                fail: res => {
                    console.log(res, 'socketFail')
                    console.log('ws失败');
                    commit('changereconnectState', false)
                    dispatch('reconnect')
                }

            })
            state.socketTast.onOpen(() => dispatch('websocketOnOpen'))
            state.socketTast.onMessage(result => dispatch('websocketOnMessage', result.data))
            state.socketTast.onClose(e => dispatch('websocketOnClose', e))
            state.socketTast.onError(e => dispatch('websocketOnError'))
            state.socketTast.onError(e => dispatch('websocketOnError', e))
        },
        websocketOnOpen({ state, commit }) {
            console.log('onOpen')
            console.log('ws打开')
            clearInterval(state.reconnectTimeOut)
            clearInterval(state.globalIntervalId)
            state.globalIntervalId = setInterval(() => {
                state.socketTast.send({
                    data: JSON.stringify({ type: 'ping' }),
@@ -190,19 +211,56 @@
                })
            }, 30000)
        },
        websocketOnClose({ state, commit }) {
        websocketOnClose({ state, commit, dispatch }, e) {
            if (!state.socketTast) return
            console.log('ws关闭', e)
            state.socketTast.close(e => {
                commit('changeisconnect', false)
            })
            console.log('ws关闭')
            clearInterval(state.globalIntervalId)
            clearInterval(state.reconnectTimeOut)
            state.socketTast = null
            commit('changereconnectState', false)
            if (state.connectNum < 6) {
                dispatch('reconnect')
            } else {
                commit('changereconnectNum', 1)
            }

        },
        websocketOnError(e) {
            console.log('socket报错', e)
        websocketOnError({ state, commit, dispatch }, e) {
            // 如果重连状态为false则不进行重连，为true才会
            console.log('ws报错', e)
            clearInterval(state.globalIntervalId)
            clearInterval(state.reconnectTimeOut)
            state.socketTast = null
            commit('changereconnectState', false)
            if (state.connectNum < 6) {
                uni.showToast({
                    title: `连接失败，正尝试第${state.connectNum}次连接`,
                    icon: 'none'
                })
                let num = 1;
                num++;
                commit('changereconnectNum', num)
                dispatch('reconnect')
            } else {
                commit('changereconnectNum', 1)
            }
        },
        // 接收数据
        websocketOnMessage({ state, commit }, result) {
            commit('setWebsocketData', result)
        },
        // 重新连接
        reconnect({ state, commit, dispatch }) {
            console.log(state.is_open_socket, '重新连接socket状态');
            clearInterval(state.globalIntervalId)
            if (!state.is_open_socket) {
                state.reconnectTimeOut = setInterval(() => {
                    dispatch('websocketInit')
                }, 5000)
            }
        }
    }
})