#

zjj

2025-06-03 d8c377f4667784058a69adad055e2b8c79fde372

#

 Monitor-APP/pages/home/home.vue

@@ -6,7 +6,8 @@
                    <text>智能大屏显示系统</text>
                </view>
                <!-- 日历 -->
                <view class="time-tools">{{calendar}}</view>
                <view class="time-tools">{{version}}</view>
                <view class="version">当前版本:{{socketUrl}}</view>
                <view class="button-left" @click="ejected()"></view>
                <view class="button-right" @click="ejected()"></view>
                <!-- 主视图 -->
@@ -296,7 +297,7 @@
            </view>
        </view>
        <view style="color: #FFF;position: fixed;bottom: 10px;left: 10px;" v-show="timeOut">
            连接超时: {{times}} s
            连接超时，正在重新建立链接:: {{times}} 
        </view>
    </view>
</template>
@@ -305,6 +306,7 @@
    import demodata from '@/mockdata/demodata.json';
    import ycqdata from '@/pages/index/data.json';
    import {WebSocketClient} from "@/static/js/WebSocketClient"    
    import WebSocketUtil from './uniWebSocket';
    let socket;
    export default {
        data() {
@@ -372,7 +374,11 @@
                currDate: '',
                locList:[],    
                oldHours:'',
                oldMin:''
                oldMin:'',
                socketClient: null,
                messages: [],
                version:'',
                socketUrl:''
        
                
            }
@@ -382,6 +388,7 @@
            // #ifdef APP-PLUS
            plus.navigator.setFullscreen(true)
            // #endif
            this.getVersion()
        },
        mounted() {
            let that = this
@@ -409,7 +416,8 @@
            that.baseLedId = BaseLedId
            that.basePort = BasePort
            that.baseCrnId = BaseCrnId
            that.webSockerInit();
            that.uniWebSocket();
            // that.webSockerInit()
        },
        onLoad() {            
            setInterval(()=>{
@@ -453,95 +461,180 @@
            // },1000*30)
        },
        methods: {
            uniWebSocket(){
                let that = this;
                that.commonUrl = that.baseIP + ':' +that.basePort + "/" +that.baseUrl
                that.socketUrl = "ws://"+that.commonUrl+"/led/"+that.baseLedId
                // 创建WebSocket实例
                    that.socketClient = new WebSocketUtil(that.socketUrl, {
                      // 心跳间隔，默认30秒
                      heartbeatInterval: 30000,
                      // 重连间隔，默认3秒
                      reconnectInterval: 3000,
                      // 最大重连次数，-1表示无限重连
                      maxReconnectAttempts: -1,				      
                      // 消息回调
                      onMessage: (res) => {
                        try {
                          const data = JSON.parse(res.data);				          
                          that.showDate(data)
                          // 处理消息...
                        } catch (e) {
                          console.error('解析消息失败', e);
                        }
                      },
                      // 连接打开回调
                      onOpen: (res) => {
                          that.timeOut = false
                          that.times = 0
                        console.log('WebSocket已连接', res);	
                      },
                      // 连接错误回调
                      onError: (error) => {
                        console.error('WebSocket错误', error);
                      },
                      // 连接关闭回调
                      onClose: (res) => {
                          that.timeOut = true
                          that.times = that.times+1
                          that.infoType = 0
                        console.log('WebSocket已关闭', res);
                      },
                      // 重连回调
                      onReconnect: (info) => {
                        console.log(`WebSocket重连(${info.attempts}/${info.maxAttempts})`);
                      }
                    });
				    
                    // 建立连接
                    that.socketClient.connect();
            },
            // 发送消息
                sendMessage(content) {
                  const message = {
                    type: 'chat',
                    content: content,
                    timestamp: Date.now()
                  };
			      
                  this.socketClient.send(message)
                    .then(() => {
                      console.log('消息发送成功');
                    })
                    .catch(error => {
                      console.error('消息发送失败', error);
                    });
                },
            webSockerInit(){
                let that = this;
				
                if(that.baseIP === '' && that.basePort === '' && that.baseUrl ==='' ){
                    that.timeOut = true
                    that.times = that.times+1
                    that.infoType = 0
                    return ;
                }
				
                that.commonUrl = that.baseIP + ':' +that.basePort + "/" +that.baseUrl
                let socketUrl = "ws://"+that.commonUrl+"/led/"+that.baseLedId
                        // socketUrl = "ws://10.0.100.150:8080/gtctu/led/113"
                const ws = new WebSocketClient(socketUrl);
                ws.connect()
                ws.onmessage((msg)=>{					
				
                console.log(ws)		
						
                ws.onclose(() =>{
					
                })
				
                ws.onmessage((msg)=>{
                 that.timeOut = false
                 let data = JSON.parse(msg.data)
                 if(data.type === "default"){
                     that.chartsData.Pie.series[0].data = data.pie
                     that.baseInfo.stockCount = data.stockCunt
                     that.baseInfo.emptyCount = data.emptyCount
                     that.baseInfo.noneCount =data.noneCount
                     that.baseInfo.used = data.used
                     that.baseInfo.usedPr = data.usedPr
				 	
                     that.chartsData.Line.categories = [
                         that.getDateFormat(-11),that.getDateFormat(-10),that.getDateFormat(-9),that.getDateFormat(-8),
                         that.getDateFormat(-7),that.getDateFormat(-6),that.getDateFormat(-5),that.getDateFormat(-4),
                         that.getDateFormat(-3),that.getDateFormat(-2),that.getDateFormat(-1),that.getDateFormat(0),]
                     that.chartsData.Line.series = data.rows
                     that.calendar = data.year + "年" + data.month + "月" + data.day + "日 " + data.hour + ":" + data.minute + ":" + data.second + " " + data.week
                     that.currDate = data.year + "/" + data.month + "/" + data.day
                     that.locList = data.inventoryData
                    that.oldHours = data.hour
                    that.oldMin = data.minute
                 }else if(data.type === "error"){
                     if (data.errMsg && data.errMsg !== "") {
                         var errorInfo = data.errMsg
                         if (that.infoType == 1) {
                             that.infoType = 3
                             that.infoText.title = "其他信息" 
                             // that.infoText.title = "异常"
                             that.infoText.error = errorInfo
                             return
                         }
                         that.infoType = 2
                         that.infoText.title = "其他信息"
                         // that.infoText.title = "异常"
                         that.infoText.error = errorInfo
                     } else {
                         if (that.infoType == 1) {
                             return
                         }
                         that.infoType = 0
                     }
                 }else if(data.type === "task"){
                     if (data.taskList && data.taskList !== "" && data.taskList.length !=0) {
                         if (that.infoType == 2 || that.infoType == 3) {
                             return;
                         }
                         // infoType1:只有拣料等信息
                         that.infoType = 1
                         if (data.taskList[0].ioType === 101) {
                             that.infoText.title = '全板出库'
                         } else if(data.taskList[0].ioType === 103) {
                             that.infoText.title = '拣料出库'
                         } else if(data.taskList[0].ioType === 107) {
                             that.infoText.title = '盘点出库'
                         } else if(data.taskList[0].ioType === 1) {
                             that.infoText.title = '入库'
                         } else if(data.taskList[0].ioType === 10) {
                             that.infoText.title = '空托入库'
                         } else if(data.taskList[0].ioType === 110) {
                             that.infoText.title = '空托出库'
                         } else if(data.taskList[0].ioType === 104) {
                             that.infoText.title = '并板出库'
                         }else if(data.taskList[0].ioType === 54) {
                             that.infoText.title = '并板入库'
                         }
                         that.infoText.barcode = data.taskList[0].barcode
                         that.infoText.workNo = data.taskList[0].workNo
                         that.infoText.sourceLocNo = data.taskList[0].sourceLocNo
                         that.infoText.staNo = data.taskList[0].staNo
                         that.swiperList = data.taskList[0].matDtos
                         // that.infoText.matnr = res.data[0].matDtos[0].matnr
                         // that.infoText.specs = res.data[0].matDtos[0].specs
                         // that.infoText.maknx = res.data[0].matDtos[0].maknx
                         // that.infoText.count = res.data[0].matDtos[0].count
                     } else {
                         if (that.infoType == 2 || that.infoType == 3) {
                             return;
                         }
                         that.infoType = 0
                     }
                 }
                 that.showDate(data)
                 
                })
				
            },
            showDate(data){
                const that = this
                if(data.type === "default"){
                    that.chartsData.Pie.series[0].data = data.pie
                    that.baseInfo.stockCount = data.stockCunt
                    that.baseInfo.emptyCount = data.emptyCount
                    that.baseInfo.noneCount =data.noneCount
                    that.baseInfo.used = data.used
                    that.baseInfo.usedPr = data.usedPr
					
                    that.chartsData.Line.categories = [
                        that.getDateFormat(-11),that.getDateFormat(-10),that.getDateFormat(-9),that.getDateFormat(-8),
                        that.getDateFormat(-7),that.getDateFormat(-6),that.getDateFormat(-5),that.getDateFormat(-4),
                        that.getDateFormat(-3),that.getDateFormat(-2),that.getDateFormat(-1),that.getDateFormat(0),]
                    that.chartsData.Line.series = data.rows
                    that.calendar = data.year + "年" + data.month + "月" + data.day + "日 " + data.hour + ":" + data.minute + ":" + data.second + " " + data.week
                    that.currDate = data.year + "/" + data.month + "/" + data.day
                    that.locList = data.inventoryData
                                    that.oldHours = data.hour
                                    that.oldMin = data.minute
                }else if(data.type === "error"){
                    if (data.errMsg && data.errMsg !== "") {
                        var errorInfo = data.errMsg
                        if (that.infoType == 1) {
                            that.infoType = 3
                            that.infoText.title = "其他信息" 
                            // that.infoText.title = "异常"
                            that.infoText.error = errorInfo
                            return
                        }
                        that.infoType = 2
                        that.infoText.title = "其他信息"
                        // that.infoText.title = "异常"
                        that.infoText.error = errorInfo
                    } else {
                        if (that.infoType == 1) {
                            return
                        }
                        that.infoType = 0
                    }
                }else if(data.type === "task"){
                                     if (data.taskList && data.taskList !== "" && data.taskList.length !=0) {
                                         if (that.infoType == 2 || that.infoType == 3) {
                                             return;
                                         }
                                         // infoType1:只有拣料等信息
                                         that.infoType = 1
                                         if (data.taskList[0].ioType === 101) {
                                             that.infoText.title = '全板出库'
                                         } else if(data.taskList[0].ioType === 103) {
                                             that.infoText.title = '拣料出库'
                                         } else if(data.taskList[0].ioType === 107) {
                                             that.infoText.title = '盘点出库'
                                         } else if(data.taskList[0].ioType === 1) {
                                             that.infoText.title = '入库'
                                         } else if(data.taskList[0].ioType === 10) {
                                             that.infoText.title = '空托入库'
                                         } else if(data.taskList[0].ioType === 110) {
                                             that.infoText.title = '空托出库'
                                         } else if(data.taskList[0].ioType === 104) {
                                             that.infoText.title = '并板出库'
                                         }else if(data.taskList[0].ioType === 54) {
                                             that.infoText.title = '并板入库'
                                         }
                                         that.infoText.barcode = data.taskList[0].barcode
                                         that.infoText.workNo = data.taskList[0].workNo
                                         that.infoText.sourceLocNo = data.taskList[0].sourceLocNo
                                         that.infoText.staNo = data.taskList[0].staNo
                                         that.swiperList = data.taskList[0].matDtos
                                         // that.infoText.matnr = res.data[0].matDtos[0].matnr
                                         // that.infoText.specs = res.data[0].matDtos[0].specs
                                         // that.infoText.maknx = res.data[0].matDtos[0].maknx
                                         // that.infoText.count = res.data[0].matDtos[0].count
                                     } else {
                                         if (that.infoType == 2 || that.infoType == 3) {
                                             return;
                                         }
                                         that.infoType = 0
                                     }
                }
            },
            statisticalModel() {
                let that = this
@@ -941,6 +1034,27 @@
                    }
                })
            },
            //检测当前平台，如果是安卓则启动安卓更新
            getVersion() {
                let that = this;
                uni.getSystemInfo({
                    success: (res) => {
                        if (res.platform == "android") {
                            that.AndroidCheckUpdate();
                        }
                    }
                })
            },
            // 获取当前版本号
            AndroidCheckUpdate() {
                let that = this;
                plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
                    that.version = wgtinfo.version //客户端版本号
                })
                // setTimeout(()=>{
                //     that.getUpdateVersion()
                // },100)
            },
        }
        
    }
@@ -1112,6 +1226,13 @@
        font-size:1.5vw;
        font-weight: 700;
    }
    .version{
        position: absolute;
        left: 2%;
        top: 2%;
        font-size:1vw;
        transform: scale(0.8);
    }
    .item-subTitle {
        font-size:0.5vw;
        text-indent: 0em;

 Monitor-APP/pages/home/uniWebSocket.js

New file
@@ -0,0 +1,315 @@
/**
 * UniApp WebSocket封装类（局部使用版本）
 * 功能：
 * 1. 自动重连
 * 2. 心跳检测
 * 3. 消息发送队列
 */
class WebSocketUtil {
  constructor(url, options = {}) {
    // WebSocket服务地址
    this.url = url;
    // 配置选项
    this.options = Object.assign(
      {
        // 心跳检测间隔（毫秒）
        heartbeatInterval: 30000,
        // 重连间隔（毫秒）
        reconnectInterval: 3000,
        // 最大重连次数，-1表示无限重连
        maxReconnectAttempts: -1,
        // 心跳消息内容
        heartbeatMessage: JSON.stringify({ to: 'heartbeat' }),
        // 消息回调函数
        onMessage: null,
        // 连接打开回调
        onOpen: null,
        // 连接关闭回调
        onClose: null,
        // 连接错误回调
        onError: null,
        // 重连回调
        onReconnect: null
      },
      options
    );
    
    // 内部状态
    this.socketTask = null;        // WebSocket实例
    this.isConnected = false;      // 连接状态
    this.isConnecting = false;     // 是否正在连接中
    this.reconnectAttempts = 0;    // 重连尝试次数
    this.heartbeatTimer = null;    // 心跳定时器
    this.reconnectTimer = null;    // 重连定时器
    this.messageQueue = [];        // 消息队列
    this.isManualClose = false;    // 是否手动关闭
  }
  
  /**
   * 建立WebSocket连接
   */
  connect() {
    if (this.isConnecting) return;
    
    this.isConnecting = true;
    this.socketTask = uni.connectSocket({
      url: this.url,
      header: this.options.header || {},
      protocols: this.options.protocols || [],
      success: () => {
        console.log('WebSocket连接创建成功');
      },
      fail: (error) => {
        console.error('WebSocket连接创建失败', error);
        this.reconnect();
      },
      complete: () => {
        this.isConnecting = false;
      }
    });
    
    // 监听WebSocket连接打开事件
    this.socketTask.onOpen((res) => {
      console.log('WebSocket连接已打开', res);
      this.isConnected = true;
      this.reconnectAttempts = 0;
      
      // 清除重连定时器
      if (this.reconnectTimer) {
        clearTimeout(this.reconnectTimer);
        this.reconnectTimer = null;
      }
      
      // 开始心跳检测
      this.startHeartbeat();
      
      // 发送队列中的消息
      this.flushMessageQueue();
      
      // 调用回调函数
      if (typeof this.options.onOpen === 'function') {
        this.options.onOpen(res);
      }
    });
    
    // 监听WebSocket接收到服务器的消息事件
    this.socketTask.onMessage((res) => { 
      // 调用回调函数
      if (typeof this.options.onMessage === 'function') {
        this.options.onMessage(res);
      }
    });
    
    // 监听WebSocket错误事件
    this.socketTask.onError((error) => {
      console.error('WebSocket发生错误', error);
      this.isConnected = false;
      
      // 调用回调函数
      if (typeof this.options.onError === 'function') {
        this.options.onError(error);
      }
      
      // 尝试重连
      if (!this.isManualClose) {
        this.reconnect();
      }
    });
    
    // 监听WebSocket关闭事件
    this.socketTask.onClose((res) => {
      console.log('WebSocket连接已关闭', res);
      this.isConnected = false;
      
      // 停止心跳检测
      this.stopHeartbeat();
      
      // 调用回调函数
      if (typeof this.options.onClose === 'function') {
        this.options.onClose(res);
      }
      
      // 尝试重连
      if (!this.isManualClose) {
        this.reconnect();
      }
    });
  }
  
  /**
   * 重新连接
   */
  reconnect() {
    // 如果是手动关闭或已达到最大重连次数，则不再重连
    if (
      this.isManualClose ||
      (this.options.maxReconnectAttempts !== -1 &&
        this.reconnectAttempts >= this.options.maxReconnectAttempts)
    ) {
      return;
    }
    
    // 清除之前的重连定时器
    if (this.reconnectTimer) {
      clearTimeout(this.reconnectTimer);
    }
    
    // 增加重连次数
    this.reconnectAttempts++;
    
    console.log(`WebSocket尝试第${this.reconnectAttempts}次重连...`);
    
    // 设置重连定时器
    this.reconnectTimer = setTimeout(() => {
      this.connect();
    }, this.options.reconnectInterval);
    
    // 调用回调函数
    if (typeof this.options.onReconnect === 'function') {
      this.options.onReconnect({
        attempts: this.reconnectAttempts,
        maxAttempts: this.options.maxReconnectAttempts
      });
    }
  }
  
  /**
   * 开始心跳检测
   */
  startHeartbeat() {
    // 清除之前的心跳定时器
    this.stopHeartbeat();
    
    // 设置新的心跳定时器
    this.heartbeatTimer = setInterval(() => {
      if (this.isConnected) {
        console.log('WebSocket发送心跳');
        this.send(this.options.heartbeatMessage);
      }
    }, this.options.heartbeatInterval);
  }
  
  /**
   * 停止心跳检测
   */
  stopHeartbeat() {
    if (this.heartbeatTimer) {
      clearInterval(this.heartbeatTimer);
      this.heartbeatTimer = null;
    }
  }
  
  /**
   * 发送消息
   * @param {String|Object} data 消息内容
   * @returns {Promise} 发送结果
   */
  send(data) {
    return new Promise((resolve, reject) => {
      // 如果消息是对象，则转为JSON字符串
      if (typeof data === 'object') {
        data = JSON.stringify(data);
      }
      
      // 如果连接已打开，直接发送
      if (this.isConnected && this.socketTask) {
        this.socketTask.send({
          data,
          success: (res) => {
            console.log('WebSocket消息发送成功', data);
            resolve(res);
          },
          fail: (error) => {
            console.error('WebSocket消息发送失败', error);
            reject(error);
          }
        });
      } else {
        // 否则加入消息队列
        console.log('WebSocket连接未打开，消息加入队列', data);
        this.messageQueue.push({
          data,
          resolve,
          reject
        });
        
        // 如果未连接，则尝试连接
        if (!this.isConnected && !this.isConnecting) {
          this.connect();
        }
      }
    });
  }
  
  /**
   * 发送队列中的消息
   */
  flushMessageQueue() {
    if (this.messageQueue.length === 0) return;
    
    console.log(`WebSocket发送队列中的${this.messageQueue.length}条消息`);
    
    // 复制队列并清空原队列
    const queue = [...this.messageQueue];
    this.messageQueue = [];
    
    // 发送队列中的消息
    queue.forEach(item => {
      this.socketTask.send({
        data: item.data,
        success: (res) => {
          console.log('WebSocket队列消息发送成功', item.data);
          item.resolve(res);
        },
        fail: (error) => {
          console.error('WebSocket队列消息发送失败', error);
          item.reject(error);
        }
      });
    });
  }
  
  /**
   * 关闭WebSocket连接
   */
  close() {
    this.isManualClose = true;
    
    // 停止心跳检测
    this.stopHeartbeat();
    
    // 清除重连定时器
    if (this.reconnectTimer) {
      clearTimeout(this.reconnectTimer);
      this.reconnectTimer = null;
    }
    
    // 关闭连接
    if (this.socketTask && this.isConnected) {
      this.socketTask.close({
        code: 1000,
        reason: 'Manual close',
        success: () => {
          console.log('WebSocket连接已手动关闭');
        },
        fail: (error) => {
          console.error('WebSocket关闭失败', error);
        }
      });
    }
  }
  
  /**
   * 重置连接状态，允许重新连接
   */
  reset() {
    this.isManualClose = false;
    this.reconnectAttempts = 0;
    
    if (!this.isConnected) {
      this.connect();
    }
  }
}

export default WebSocketUtil;