From d8c377f4667784058a69adad055e2b8c79fde372 Mon Sep 17 00:00:00 2001 From: zjj <3272660260@qq.com> Date: 星期二, 03 六月 2025 08:32:01 +0800 Subject: [PATCH] # --- Monitor-APP/pages/home/uniWebSocket.js | 315 ++++++++++++++++++++++++++++ Monitor-APP/pages/home/home.vue | 287 ++++++++++++++++++------- 2 files changed, 519 insertions(+), 83 deletions(-) diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue index 12946e6..d93dea0 100644 --- a/Monitor-APP/pages/home/home.vue +++ b/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('瑙f瀽娑堟伅澶辫触', 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:鍙湁鎷f枡绛変俊鎭� - that.infoType = 1 - if (data.taskList[0].ioType === 101) { - that.infoText.title = '鍏ㄦ澘鍑哄簱' - } else if(data.taskList[0].ioType === 103) { - that.infoText.title = '鎷f枡鍑哄簱' - } 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:鍙湁鎷f枡绛変俊鎭� + that.infoType = 1 + if (data.taskList[0].ioType === 101) { + that.infoText.title = '鍏ㄦ澘鍑哄簱' + } else if(data.taskList[0].ioType === 103) { + that.infoText.title = '鎷f枡鍑哄簱' + } 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; diff --git a/Monitor-APP/pages/home/uniWebSocket.js b/Monitor-APP/pages/home/uniWebSocket.js new file mode 100644 index 0000000..c2bf73a --- /dev/null +++ b/Monitor-APP/pages/home/uniWebSocket.js @@ -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; // 鏄惁姝e湪杩炴帴涓� + 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) => { + // 濡傛灉娑堟伅鏄璞★紝鍒欒浆涓篔SON瀛楃涓� + 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; \ No newline at end of file -- Gitblit v1.9.1