将长链接剥离出来

This commit is contained in:
gyq 2024-07-10 10:24:45 +08:00
parent d101ecea41
commit 91670a440b
6 changed files with 220 additions and 379 deletions

View File

@ -22,7 +22,7 @@ VITE_API_PHP_URL = 'http://192.168.2.33:1666/index.php/api'
# VITE_API_URL = 'http://192.168.2.41:10589/cashier-client'
# 测试
# VITE_API_URL = 'https://cashier-client.sxczgkj.cn/cashier-client'
VITE_API_URL = 'https://cashier-client.sxczgkj.cn/cashier-client'
# 正式
VITE_API_URL = 'https://cashierclient.sxczgkj.cn/cashier-client'
# VITE_API_URL = 'https://cashierclient.sxczgkj.cn/cashier-client'

View File

@ -1,7 +1,7 @@
{
"name": "vite-electron",
"private": true,
"version": "1.3.42",
"version": "1.3.44",
"main": "dist-electron/main.js",
"scripts": {
"dev": "chcp 65001 && vite",

View File

@ -2,7 +2,7 @@
<el-config-provider size="large">
<div class="container">
<div class="left" v-if="!hideLeftMenu">
<left-menu ref="leftMenuRef" @connectWsHandle="initWebSocket" />
<left-menu ref="leftMenuRef" />
</div>
<div :class="{ view: !hideLeftMenu }">
<!-- <div class="wrapper">
@ -22,35 +22,20 @@
</template>
<script setup>
import { v4 as uuidv4 } from 'uuid'
import { ref, reactive, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import leftMenu from "@/components/leftMenu.vue";
import useStorage from '@/utils/useStorage'
import useStorage from "@/utils/useStorage";
import { useUser } from "@/store/user.js";
import { dayjs, ElMessage } from "element-plus";
import { scanSendMessage } from '@/api/order/index'
import { useGlobal } from '@/store/global.js'
import { useSocket } from '@/store/socket.js'
import { usePrint } from '@/store/print.js'
import ReconnectingWebSocket from 'reconnecting-websocket';
import { scanSendMessage } from "@/api/order/index";
import { useGlobal } from "@/store/global.js";
import { useSocket } from "@/store/socket.js";
const socket = useSocket();
const global = useGlobal()
const socketStore = useSocket()
const printStore = usePrint()
const global = useGlobal();
const leftMenuRef = ref(null)
const uuid = ref('')
function createUUID() {
if (!useStorage.get('uuid')) {
useStorage.set('uuid', uuidv4())
uuid.value = useStorage.get('uuid')
} else {
uuid.value = useStorage.get('uuid')
}
}
const leftMenuRef = ref(null);
const store = useUser();
@ -64,34 +49,14 @@ watch(route, (to) => {
includeList.push(to.name);
}
//
let arr = ["/login", "/device_list", "/add_device", "/add_label", '/webview'];
let arr = ["/login", "/device_list", "/add_device", "/add_label", "/webview"];
if (arr.includes(to.path)) {
hideLeftMenu.value = true;
} else {
hideLeftMenu.value = false;
}
if (to.fullPath == '/login') {
if (ws.value != null) {
console.log('退出登录关闭ws');
ws.value.close()
ws.value = null
// wsIsClose.value = true
}
} else {
// ws
openWs()
}
});
// ws
function openWs() {
if (store.userInfo && store.userInfo.shopId && ws.value == null) {
initWebSocket()
// print
printStore.init()
}
}
let transitionName = ref();
let router = useRouter();
router.beforeEach((to, from) => {
@ -107,301 +72,84 @@ router.beforeEach((to, from) => {
}
});
let ws = ref(null)
let wsIsClose = ref(false)
// websocket
function initWebSocket(wsUrl = import.meta.env.VITE_API_WSS) {
createUUID()
// wsIsClose.value = false
if (ws.value == null) {
ws.value = new ReconnectingWebSocket(`${wsUrl}`, null, {
reconnectInterval: 10000
})
}
// console.log("websocket:", ws.value);
ws.value.addEventListener('open', function (event) {
console.log('wss连接成功');
socketStore.changeOnline(true)
//
clearInterval(heartbeatTimer.value)
heartbeatTimer.value = null
startheartbeat()
//
// clearInterval(reConnectTimer.value)
// reConnectTimer.value = null
// reConnectCount.value = 0
ws.value.send(JSON.stringify({
type: "connect",
shopId: store.userInfo.shopId,
clientId: uuid.value
}))
})
// ws.value.onopen = function () {
// console.log('wss');
// socketStore.changeOnline(true)
// //
// clearInterval(heartbeatTimer.value)
// heartbeatTimer.value = null
// startheartbeat()
// //
// clearInterval(reConnectTimer.value)
// reConnectTimer.value = null
// reConnectCount.value = 0
// ws.value.send(JSON.stringify({
// type: "connect",
// shopId: store.userInfo.shopId,
// clientId: uuid.value
// }))
// };
ws.value.addEventListener('message', function (e) {
let data = JSON.parse(e.data)
if (data.type == 'order') {
console.log('接收消息', data);
ws.value.send(JSON.stringify({
type: "send",
orderNo: data.orderInfo.orderNo
}))
//
// printBill(data)
//
// checkLabelPrint(data)
printStore.labelPrint(data)
}
})
//
// ws.value.addEventListener('WebSocket.CLOSED', function () {
// })
//
// ws.value.onmessage = function (e) {
// // websocketonmessage(e);
// let data = JSON.parse(e.data)
// if (data.type == 'order') {
// console.log('', data);
// ws.value.send(JSON.stringify({
// type: "send",
// orderNo: data.orderInfo.orderNo
// }))
// //
// // printBill(data)
// //
// // checkLabelPrint(data)
// printStore.labelPrint(data)
// }
// };
ws.value.addEventListener('error', function () {
console.log("WebSocket连接发生错误");
socketStore.changeOnline(false)
//
clearInterval(heartbeatTimer.value)
heartbeatTimer.value = null
//
// ws.value.close();
// if (!wsIsClose.value) reConnect(wsUrl);
})
//
// ws.value.onerror = function () {
// console.log("WebSocket");
// socketStore.changeOnline(false)
// //
// clearInterval(heartbeatTimer.value)
// heartbeatTimer.value = null
// //
// if (!wsIsClose.value) reConnect(wsUrl);
// };
ws.value.addEventListener('error', function (e) {
console.log('ws关闭了', e);
socketStore.changeOnline(false)
//
clearInterval(heartbeatTimer.value)
heartbeatTimer.value = null
//
// ws.value.close();
// if (!wsIsClose.value) reConnect(wsUrl);
})
//
// ws.value.onclose = function (e) {
// console.log('ws', e);
// socketStore.changeOnline(false)
// //
// clearInterval(heartbeatTimer.value)
// heartbeatTimer.value = null
// //
// if (!wsIsClose.value) reConnect(wsUrl);
// };
}
//
let heartbeatTimer = ref(null)
function startheartbeat() {
heartbeatTimer.value = setInterval(() => {
console.log('发送心跳');
ws.value.send(JSON.stringify({ type: 'heartbeat' }))
}, 10000)
}
// 5
// let reConnectCount = ref(0)
// let reConnectTimer = ref(null)
// function reConnect(wsUrl) {
// if (reConnectTimer.value != null) return
// console.log('ws.value.readyState', ws.value.readyState);
// console.log('ReconnectingWebSocket.OPEN', ReconnectingWebSocket.OPEN);
// if (ws.value.readyState == ReconnectingWebSocket.OPEN) return
// ws.value.reconnect();
// reConnectTimer.value = setInterval(() => {
// // 5
// // console.log('reConnectCount.value===', reConnectCount.value);
// // if (reConnectCount.value >= 100) {
// // console.log('5');
// // clearInterval(reConnectTimer.value)
// // reConnectTimer.value = null
// // reConnectCount.value = 0
// // wsIsClose.value = true
// // ws.value.close()
// // } else {
// // }
// // reConnectCount.value++
// // initWebSocket(wsUrl)
// ws.value.reconnect();
// }, 2000)
// }
//
function updateInfo() {
//
let isOnLine = navigator.onLine
//
let info = navigator.connection
console.log('isOnLine===', isOnLine);
console.log('info===', info);
if (isOnLine) {
console.log('有网了重连ws连接');
reConnect()
} else {
console.log('没网了断开ws连接');
ws.value.close()
//
clearInterval(reConnectTimer.value)
reConnectTimer.value = null
clearInterval(heartbeatTimer.value)
heartbeatTimer.value = null
}
}
const nextCodeRef = ref('')
const lastTimeRef = ref('')
const codeRef = ref('')
//
const nextCodeRef = ref("");
const lastTimeRef = ref("");
const codeRef = ref("");
async function getBarCode(e) {
let nextCode = ''
let nextTime = ''
const lastTime = lastTimeRef.value
let code = codeRef.value
let nextCode = "";
let nextTime = "";
const lastTime = lastTimeRef.value;
let code = codeRef.value;
if (window.event) {
// IE
nextCode = e.keyCode
nextCode = e.keyCode;
} else if (e.which) {
// Netscape/Firefox/Opera
nextCode = e.which
nextCode = e.which;
}
nextTime = new Date().getTime()
nextTime = new Date().getTime();
// 0-9 48-57; 0-9 96-105
if (
(nextCode >= 48 && nextCode <= 57) ||
(nextCode >= 96 && nextCode <= 105)
) {
const codes = {
'48': 48,
'49': 49,
'50': 50,
'51': 51,
'52': 52,
'53': 53,
'54': 54,
'55': 55,
'56': 56,
'57': 57,
'96': 48,
'97': 49,
'98': 50,
'99': 51,
'100': 52,
'101': 53,
'102': 54,
'103': 55,
'104': 56,
'105': 57
}
nextCode = codes[nextCode]
nextTime = new Date().getTime()
48: 48,
49: 49,
50: 50,
51: 51,
52: 52,
53: 53,
54: 54,
55: 55,
56: 56,
57: 57,
96: 48,
97: 49,
98: 50,
99: 51,
100: 52,
101: 53,
102: 54,
103: 55,
104: 56,
105: 57,
};
nextCode = codes[nextCode];
nextTime = new Date().getTime();
}
//
if (nextTime && lastTime && nextTime - lastTime > 2000) {
code = String.fromCharCode(nextCode)
code = String.fromCharCode(nextCode);
} else {
code += String.fromCharCode(nextCode)
code += String.fromCharCode(nextCode);
}
//
nextCodeRef.value = nextCode
lastTimeRef.value = nextTime
codeRef.value = code
nextCodeRef.value = nextCode;
lastTimeRef.value = nextTime;
codeRef.value = code;
// Enter
if (e.which === 13) {
// code
code = code.trim()
code = code.trim();
if (code.length == 13) {
console.log('A类条码:' + code);
console.log("A类条码:" + code);
} else if (code.length == 23) {
console.log('B类条码:' + code);
console.log("B类条码:" + code);
} else if (code.length == 0) {
console.log('请输入条码');
console.log("请输入条码");
} else {
console.log('条码不合法:' + code);
console.log("条码不合法:" + code);
try {
if (!global.isCallNumber || !code.length) return
if (!global.isCallNumber || !code.length) return;
await scanSendMessage({
outNumber: code,
shopId: store.userInfo.shopId
})
ElMessage.success('叫号成功')
leftMenuRef.value.updateCallNumber()
shopId: store.userInfo.shopId,
});
ElMessage.success("叫号成功");
leftMenuRef.value.updateCallNumber();
} catch (error) {
console.log(error);
}
@ -409,23 +157,21 @@ async function getBarCode(e) {
// console.log('code', code);
// code
codeRef.value = ''
return false
codeRef.value = "";
return false;
}
}
onMounted(() => {
document.addEventListener('keydown', (e) => {
getBarCode(e)
})
// 线
// window.addEventListener("onLine", updateInfo)
// // 线
// window.addEventListener("offLine", updateInfo)
// //
// navigator.connection.addEventListener('change', updateInfo)
})
document.addEventListener("keydown", (e) => {
getBarCode(e);
});
//
if (store.userInfo && store.userInfo.shopId) {
socket.init();
}
});
</script>
<style lang="scss">
@ -457,20 +203,28 @@ onMounted(() => {
--b-darker: calc(var(--b) * 0.8);
--primary-color: rgb(var(--r), var(--g), var(--b));
--primary-color-hover: rgb(var(--r-lighter3),
var(--g-lighter3),
var(--b-lighter3));
--primary-color-hover: rgb(
var(--r-lighter3),
var(--g-lighter3),
var(--b-lighter3)
);
--el-color-primary: var(--primary-color) !important;
--el-button-hover-bg-color: var(--primary-color) !important;
--el-color-primary-light-3: rgb(var(--r-lighter),
var(--g-lighter),
var(--b-lighter)) !important;
--el-color-primary-dark-2: rgb(var(--r-darker),
var(--g-darker),
var(--b-darker)) !important;
--el-color-primary-light-5: rgb(var(--r-lighter2),
var(--g-lighter2),
var(--b-lighter2)) !important;
--el-color-primary-light-3: rgb(
var(--r-lighter),
var(--g-lighter),
var(--b-lighter)
) !important;
--el-color-primary-dark-2: rgb(
var(--r-darker),
var(--g-darker),
var(--b-darker)
) !important;
--el-color-primary-light-5: rgb(
var(--r-lighter2),
var(--g-lighter2),
var(--b-lighter2)
) !important;
--el-font-size-base: 16px !important;
--el-message-close-size: var(--el-font-size-base) !important;
@ -525,7 +279,8 @@ html {
background-color: #555;
margin-right: 0 !important;
padding-bottom: 20px !important;
border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0 0;
border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0
0;
}
.el-dialog__title {
@ -546,7 +301,8 @@ html {
}
.el-dialog__body {
padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary);
padding: calc(var(--el-dialog-padding-primary) + 10px)
var(--el-dialog-padding-primary);
}
.el-dialog__header {
@ -634,7 +390,7 @@ html {
display: flex;
width: 200%;
&>div {
& > div {
width: 50%;
}

View File

@ -1,28 +1,107 @@
import { defineStore } from "pinia";
import { useUser } from "@/store/user.js";
import { usePrint } from "@/store/print.js";
import { v4 as uuidv4 } from "uuid";
import useStorage from "@/utils/useStorage";
import ReconnectingWebSocket from "reconnecting-websocket";
export const useSocket = defineStore({
id: "socket",
state: () => ({
online: false, // 是否在线
ws: null,
online: false, // 在线状态
ws: null, // websocket实例
uuid: "", // 长连接唯一id
heartbeatTimer: null, // 心跳计时器
}),
actions: {
// 改变在线状态
changeOnline(state) {
this.online = state;
// 创建uuid
createUUID() {
if (!useStorage.get("uuid")) {
useStorage.set("uuid", uuidv4());
this.uuid = useStorage.get("uuid");
} else {
this.uuid = useStorage.get("uuid");
}
},
// 关闭ws
close() {
console.log("关闭ws");
this.ws.close();
this.ws = null;
this.clearHeartBeat();
},
// 初始化
init(wsUrl = import.meta.env.VITE_API_WSS) {
this.createUUID();
const store = useUser();
const printStore = usePrint();
printStore.init();
if (this.ws == null) {
this.ws = new ReconnectingWebSocket(
`${wsUrl}/shopId=${store.userInfo.shopId}/clientId=${uuid.value}`,
null,
{
reconnectInterval: 10000,
}
);
this.ws = new ReconnectingWebSocket(wsUrl);
}
this.ws.addEventListener("open", (event) => {
console.log("wss连接成功");
this.online = true;
// 清除心跳
this.clearHeartBeat();
this.startheartbeat();
this.ws.send(
JSON.stringify({
type: "connect",
shopId: store.userInfo.shopId,
clientId: this.uuid,
})
);
});
this.ws.addEventListener("message", (e) => {
let data = JSON.parse(e.data);
if (data.type == "order") {
console.log("接收消息", data);
this.ws.send(
JSON.stringify({
type: "send",
orderNo: data.orderInfo.orderNo,
})
);
// 接收订单消息,打印小票
// printBill(data)
// 打印标签小票
printStore.labelPrint(data);
}
});
this.ws.addEventListener("error", () => {
console.log("WebSocket连接发生错误");
this.online = false;
this.clearHeartBeat();
});
this.ws.addEventListener("error", (e) => {
console.log("ws关闭了", e);
this.online = false;
this.clearHeartBeat();
});
},
// 启动心跳连接
startheartbeat() {
this.heartbeatTimer = setInterval(() => {
console.log("发送心跳");
this.ws.send(JSON.stringify({ type: "heartbeat" }));
}, 10000);
},
// 清除心跳
clearHeartBeat() {
// 清除心跳
clearInterval(this.heartbeatTimer);
this.heartbeatTimer = null;
},
},
});

View File

@ -4,7 +4,7 @@
<el-image :src="logo" style="width: 180px"></el-image>
</div>
<div class="form-wrap">
<div style="flex: 1;">
<div style="flex: 1">
<!-- <div class="reg-wrap">
<router-link :to="{ name: 'register' }">
<el-link type="primary">注册</el-link>
@ -51,30 +51,29 @@
</template>
<script setup>
import packageData from '../../package.json'
import packageData from "../../package.json";
import logo from "@/assets/logo.png";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ipcRenderer } from "electron";
import { RandomNumBoth } from '@/utils'
import useStorage from '@/utils/useStorage'
import { douyincheckIn } from '@/api/group'
import { RandomNumBoth } from "@/utils";
import useStorage from "@/utils/useStorage";
import { douyincheckIn } from "@/api/group";
import { useUser } from "@/store/user.js";
import { useSocket } from "@/store/socket.js";
const store = useUser();
const socket = useSocket();
const router = useRouter();
const formRef = ref(null);
const loading = ref(false);
const form = reactive({
serialNumber: RandomNumBoth(1000, 9999),
clientType: 'pc',
merchantName: '',//19191703856
clientType: "pc",
merchantName: "",
loginName: "",
password: "",
});
@ -108,22 +107,26 @@ const submitHandle = () => {
formRef.value.validate(async (valid) => {
if (valid) {
loading.value = true;
store.userlogin(form).then(async (res) => {
// const douyin = await douyincheckIn({
// token: res.token,
// loginName: res.loginName,
// clientType: 'pc'
// })
// useStorage.set('douyin', douyin.userInfo)
ElMessage.success("登录成功");
setTimeout(() => {
router.replace({
name: "home",
});
}, 1000);
}).catch(err => {
loading.value = false
});
store
.userlogin(form)
.then(async (res) => {
// const douyin = await douyincheckIn({
// token: res.token,
// loginName: res.loginName,
// clientType: 'pc'
// })
// useStorage.set('douyin', douyin.userInfo)
ElMessage.success("登录成功");
socket.init();
setTimeout(() => {
router.replace({
name: "home",
});
}, 1000);
})
.catch((err) => {
loading.value = false;
});
}
});
};

View File

@ -131,6 +131,8 @@ import useStorage from '@/utils/useStorage'
import { useRouter } from "vue-router";
import { bySubType } from "@/api/device";
import { useUser } from "@/store/user.js";
import { useSocket } from "@/store/socket.js";
const socket = useSocket();
const store = useUser();
@ -163,7 +165,7 @@ function getPrintList() {
ipcRenderer.send("getPrintList");
ipcRenderer.on("printList", (event, arg) => {
localPrintList.value = arg;
console.log(localPrintList.value);
// console.log(localPrintList.value);
});
}
@ -237,6 +239,7 @@ const exit = async () => {
}, 1000);
loading.value = false;
}
socket.close()
} catch (error) {
loading.value = false;
}