web socket

src/components/LoginForm.vue

@@ -44,8 +44,10 @@ const handleLogin = () => {
     return
   }
   tip.value = ''
+  if (username.value == 'admin' && password.value == '123') {
     router.push('/')
   }
+}
 </script>
 
 <style lang="scss" scoped>

src/components/Operator.vue

@@ -63,9 +63,12 @@ import WarnModal from 'cpns/dialogs/WarnModal'
 import DisinfectantLiquidInfo from 'cpns/info/DisinfectantLiquidInfo'
 import EnvironmentInfo from 'cpns/info/EnvironmentInfo'
 import { ref } from 'vue'
-import { useOperatorStore } from '@/store'
+import { useOperatorStore, useWebSocketStore } from '@/store'
+import { startDisinfectionJSON } from '@/mock/command'
+import { showSuccessToast, showFailToast } from 'vant'
 
 const operatorStore = useOperatorStore()
+const webSocketStore = useWebSocketStore()
 
 const props = defineProps({
   changeShowOperator: {
@@ -92,10 +95,15 @@ const changeLogVal = val => {
 const startDisinfect = () => {
   // 改变开始消毒状态 如果已经开始则不可点击
   if (!operatorStore.disinfectStatus) {
+    if (roomSize.value == 0) {
+      showFailToast('请调整房间大小设置，不能为0')
+    } else {
+      webSocketStore.sendMsg(startDisinfectionJSON)
       operatorStore.updateDisinfectStatus(true)
       props.changeShowOperator(false)
     }
   }
+}
 
 const showLogPicker = () => {
   if (!operatorStore.disinfectStatus) {

src/components/Setting/components/User.vue

@@ -34,12 +34,13 @@
         <input
           :type="showUpdateUserPasswordVisible ? 'text' : 'password'"
           class="password_input"
+          v-model="updateUserNewPassword"
         />
-        <p class="tip">*密码限制信息</p>
+        <p class="tip">{{ updateUserInfoTip }}</p>
       </div>
       <div class="btns">
         <div class="btn" @click="returnToList">返回</div>
-        <div class="btn">修改</div>
+        <div class="btn" @click="updateUserPassword">修改</div>
       </div>
     </div>
     <div v-else>
@@ -110,9 +111,19 @@ import Open from '@/assets/img/login/open.png'
 const userFormVisible = ref(false)
 const changePasswordVisible = ref(false)
 const userModalVisible = ref(false)
+const updateUserInfoTip = ref('')
+const updateUserNewPassword = ref('')
 
 const showAddPassword = ref(false)
 
+const updateUserPassword = () => {
+  if (updateUserNewPassword.value == '') {
+    updateUserInfoTip.value = '请输入修改的密码'
+    return
+  }
+  updateUserInfoTip.value = ''
+}
+
 const handleAddPasswordShow = () => {
   showAddPassword.value = !showAddPassword.value
 }

src/mock/command.js

@@ -0,0 +1,5 @@
+export const startDisinfectionJSON = {
+  command: '1231',
+  roomSize: 12,
+  log: 6,
+}

src/pages/Home.vue

@@ -144,7 +144,10 @@ import Progress from 'cpns/Progress'
 import LiquidHandle from 'cpns/LiquidHandle'
 import Setting from 'cpns/Setting'
 import Test from 'cpns/Test'
-import { useOperatorStore } from '@/store'
+import { useOperatorStore, useWebSocketStore } from '@/store'
+
+const webSocketStore = useWebSocketStore()
+webSocketStore.initSocket()
 
 const showOpertor = ref(true)
 

src/pages/Login.vue

@@ -19,6 +19,10 @@
 import Restart from '@/assets/img/login/restart.png'
 import Shutdown from '@/assets/img/login/shutdown.png'
 import LoginForm from 'cpns/LoginForm.vue'
+
+import { useWebSocketStore } from '@/store'
+const webSocketStore = useWebSocketStore()
+webSocketStore.initSocket()
 </script>
 
 <style lang="scss" scoped>

src/socket/index.js

@@ -0,0 +1,62 @@
+export default class Socket {
+  constructor(url, protocols) {
+    this.url = url
+    this.protocols = protocols
+    this.ws = null
+    this.reconnectTimeout = 1000
+    this.maxReconnectTimes = 5
+  }
+
+  connect() {
+    this.ws = new WebSocket(this.url, this.protocols)
+    this.ws.onopen = () => {
+      console.log('WebSocket连接成功')
+      this.reconnectTimes = 0
+    }
+    this.ws.onclose = () => {
+      console.log('WebSocket断开连接')
+      this.reconnect()
+    }
+    this.ws.onerror = err => {
+      console.log('WebSocket连接出错', err)
+    }
+  }
+
+  reconnect() {
+    if (this.reconnectTimes < this.maxReconnectTimes) {
+      setTimeout(() => {
+        this.connect()
+        this.reconnectTimes++
+      }, this.reconnectTimeout)
+      this.reconnectTimeout *= 2
+    } else {
+      console.log('WebSocket重连超过最大次数,放弃重连')
+    }
+  }
+
+  // 消息发送
+  msg(param) {
+    if (param === 'heartbeat') {
+      this.ws.send(param)
+    } else {
+      this.ws.send(JSON.stringify(param))
+    }
+  }
+
+  // 延迟发送
+  timeout(param) {
+    setTimeout(() => {
+      this.msg(param)
+    }, 2000)
+  }
+
+  send(param) {
+    if (this.ws.readyState === this.ws.OPEN) {
+      this.msg(param)
+    } else if (this.ws.readyState === this.ws.CONNECTING) {
+      this.timeout(param)
+    } else {
+      this.timeout(param)
+    }
+  }
+}

src/store/index.js

@@ -2,7 +2,8 @@ import { createPinia } from 'pinia'
 import { useTestStore } from './modules/test'
 import { useSettingStore } from './modules/setting'
 import { useOperatorStore } from './modules/operator'
+import { useWebSocketStore } from './modules/websocket'
 const store = createPinia()
 
 export default store
-export { useTestStore, useSettingStore, useOperatorStore }
+export { useTestStore, useSettingStore, useOperatorStore, useWebSocketStore }

src/store/modules/websocket.js

@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia'
+import Socket from '@/socket'
+export const useWebSocketStore = defineStore({
+  id: 'websocket', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      socketInstance: null,
+    }
+  },
+  // actions
+  actions: {
+    initSocket() {
+      const url = 'ws://localhost:8899/websocket/nuclear'
+      const init = new Socket(url)
+      init.connect()
+      init.ws.onmessage = function (ev) {
+        console.log(ev)
+        // switch (data.type) {
+        //   case 1:
+        //     break
+        //   case 2:
+        //     break
+        // }
+      }
+      this.socketInstance = init
+    },
+    sendMsg(message) {
+      this.socketInstance?.msg(message)
+    },
+  },
+})