some interface

src/components/Operator.vue

@@ -109,7 +109,9 @@ const startDisinfect = () => {
     if (roomSize.value == 0) {
       showFailToast('请调整房间大小设置，不能为0')
     } else {
-      webSocketStore.sendCommandMsg(startDisinfectionJSON)
+      webSocketStore.sendCommandMsg(
+        startDisinfectionJSON(logVal.value, roomSize.value),
+      )
       operatorStore.updateDisinfectStatus(true)
       props.changeShowOperator(false)
     }

src/components/Progress.vue

@@ -49,8 +49,11 @@
 </template>
 
 <script setup>
-import { useOperatorStore } from '@/store'
+import { useOperatorStore, useWebSocketStore } from '@/store'
+import { stopDisinfectionJSON } from '@/mock/command'
+
 const operatorStore = useOperatorStore()
+const webSocketStore = useWebSocketStore()
 const props = defineProps({
   changeShowOperator: {
     type: Function,
@@ -62,6 +65,7 @@ const showDetail = () => {
 
 const pauseDisinfect = () => {
   if (operatorStore.disinfectStatus) {
+    webSocketStore.sendCommandMsg(stopDisinfectionJSON)
     operatorStore.updateDisinfectStatus(false)
   }
 }

src/components/Setting/components/User.vue

@@ -23,7 +23,7 @@
     </div>
     <div v-else-if="changePasswordVisible" class="change_password_form">
       <p class="title">
-        正在修改 <span class="username">username1</span> 的密码
+        正在修改 <span class="username">{{ userStore.operUser }}</span> 的密码
       </p>
       <div class="update_form">
         <img
@@ -75,19 +75,25 @@
         </svg>
       </div>
       <div class="user_content">
-        <div class="user_line">
-          <p class="username">username</p>
+        <div
+          class="user_line"
+          v-for="item in userStore.userList"
+          :key="item.uid"
+        >
+          <p class="username">{{ item.uid }}</p>
           <div class="operator_wrap">
-            <div class="btn" @click="showUserModal('username1 用户删除')">
+            <div class="btn" @click="showUserModal(`${item.uid} 用户删除`)">
               删除用户
             </div>
             <div
               class="btn mb"
-              @click="showUserModal('username1 设置为管理员')"
+              @click="showUserModal(`${item.uid} 设置为管理员`)"
             >
               设为管理员
             </div>
-            <div class="btn" @click="showUpdatePassword">修改密码</div>
+            <div class="btn" @click="showUpdatePassword(item.uid)">
+              修改密码
+            </div>
           </div>
         </div>
       </div>
@@ -108,6 +114,11 @@ import { ref } from 'vue'
 import UserModal from 'cpns/dialogs/UserModal'
 import Eye from '@/assets/img/login/eye.png'
 import Open from '@/assets/img/login/open.png'
+import { useUserStore, useWebSocketStore } from '@/store'
+import { chpasswdJSON } from '@/mock/command'
+
+const userStore = useUserStore()
+const webSocketStore = useWebSocketStore()
 const userFormVisible = ref(false)
 const changePasswordVisible = ref(false)
 const userModalVisible = ref(false)
@@ -122,13 +133,17 @@ const updateUserPassword = () => {
     return
   }
   updateUserInfoTip.value = ''
+  webSocketStore.sendCommandMsg(
+    chpasswdJSON(userStore.operUser, updateUserNewPassword.value),
+  )
 }
 
 const handleAddPasswordShow = () => {
   showAddPassword.value = !showAddPassword.value
 }
 
-const showUpdatePassword = () => {
+const showUpdatePassword = uid => {
+  userStore.updateOperUser(uid)
   changePasswordVisible.value = true
 }
 

src/components/Setting/index.vue

@@ -37,11 +37,18 @@ import Admin from './components/Admin.vue'
 import Date from './components/Date.vue'
 import Device from './components/Device.vue'
 import User from './components/User.vue'
+import { getAllUserJSON } from '@/mock/command'
+import { useWebSocketStore } from '@/store'
+
+const webSocketStore = useWebSocketStore()
 
 const activeTab = ref(1)
 
 const changeActiveTab = index => {
   activeTab.value = index
+  if (index == 3) {
+    webSocketStore.sendCommandMsg(getAllUserJSON)
+  }
 }
 </script>
 

src/mock/command.js

@@ -1,9 +1,3 @@
-export const startDisinfectionJSON = {
-  command: '1231',
-  roomSize: 12,
-  log: 6,
-}
-
 // 登陆
 export const loginJSON = (userid, passwd) => {
   return {
@@ -38,7 +32,7 @@ export const shutdownJSON = {
 }
 
 // 开始消毒
-export const startDisinfection = (loglevel, roomVolume) => {
+export const startDisinfectionJSON = (loglevel, roomVolume) => {
   return {
     command: 'startDisinfection',
     messageId: 'startDisinfection',
@@ -48,18 +42,18 @@ export const startDisinfection = (loglevel, roomVolume) => {
 }
 
 // 停止消毒
-export const stopDisinfection = {
+export const stopDisinfectionJSON = {
   command: 'stopDisinfection',
   messageId: 'stopDisinfection',
 }
 
 // 获取当前设备的状态信息
-export const getState = {
+export const getStateJSON = {
   command: 'getState',
   messageId: 'getState',
 }
 
-export const getAllUser = {
+export const getAllUserJSON = {
   command: 'getAllUser',
   messageId: 'getAllUser',
 }

src/pages/Home.vue

@@ -163,6 +163,14 @@
         </g>
       </svg>
     </div>
+    <van-overlay :show="settingStore.initLoading">
+      <div class="wrapper" @click.stop>
+        <div class="block">
+          <van-loading />
+          <p class="shutdown_text">初始化系统参数...</p>
+        </div>
+      </div>
+    </van-overlay>
   </div>
 </template>
 
@@ -175,12 +183,13 @@ import LiquidHandle from 'cpns/LiquidHandle'
 import Setting from 'cpns/Setting'
 import Test from 'cpns/Test'
 import { storeToRefs } from 'pinia'
-import { useOperatorStore, useWebSocketStore } from '@/store'
-import { logoutJSON } from '@/mock/command'
+import { useOperatorStore, useWebSocketStore, useSettingStore } from '@/store'
+import { logoutJSON, getStateJSON } from '@/mock/command'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const webSocketStore = useWebSocketStore()
+const settingStore = useSettingStore()
 const { socketCommandInstance } = storeToRefs(webSocketStore)
 webSocketStore.initCommandSocket()
 webSocketStore.initEventSocket()
@@ -209,6 +218,9 @@ onMounted(() => {
   timer.value = setInterval(() => {
     getdateTime()
   }, 1000)
+  setTimeout(() => {
+    webSocketStore.sendCommandMsg(getStateJSON)
+  }, 2000)
 })
 
 onBeforeUnmount(() => {
@@ -295,4 +307,28 @@ const handleLogout = () => {
     position: absolute;
   }
 }
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.block {
+  width: 220px;
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  align-items: center;
+  justify-content: center;
+  .shutdown_text {
+    margin-top: 24px;
+    font-family: Source Han Sans CN;
+    font-size: 16px;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0.06em;
+    color: #fff;
+  }
+}
 </style>

src/socket/index.js

@@ -39,6 +39,7 @@ export default class Socket {
     if (param === 'heartbeat') {
       this.ws.send(param)
     } else {
+      console.log(param)
       this.ws.send(JSON.stringify(param))
     }
   }

src/store/index.js

@@ -4,6 +4,7 @@ import { useSettingStore } from './modules/setting'
 import { useOperatorStore } from './modules/operator'
 import { useWebSocketStore } from './modules/websocket'
 import { useDeviceStore } from './modules/device'
+import { useUserStore } from './modules/user'
 const store = createPinia()
 
 export default store
@@ -13,4 +14,5 @@ export {
   useOperatorStore,
   useWebSocketStore,
   useDeviceStore,
+  useUserStore,
 }

src/store/modules/setting.js

@@ -12,10 +12,15 @@ export const useSettingStore = defineStore({
       addLiquidConfigVal: 0,
       // 设置喷液泵的参数
       sprayLiquidConfigVal: 0,
+      // 首屏初始化
+      initLoading: true,
     }
   },
   // actions
   actions: {
+    updateInitLoading() {
+      this.initLoading = false
+    },
     updateCurrentDate(currentDate) {
       this.currentDate = currentDate
     },

src/store/modules/user.js

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia'
+export const useUserStore = defineStore({
+  id: 'user', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      allUserList: [],
+      operUser: '',
+    }
+  },
+  // actions
+  actions: {
+    updateOperUser(operUser) {
+      this.operUser = operUser
+    },
+    updateUserList(userList) {
+      this.allUserList = userList
+    },
+  },
+  getters: {
+    userList: state => {
+      const arr = state.allUserList.filter(item => item.permission_level == 3)
+      return arr
+    },
+  },
+})

src/store/modules/websocket.js

@@ -1,5 +1,8 @@
 import { defineStore } from 'pinia'
 import Socket from '@/socket'
+import { useSettingStore } from './setting'
+import { useUserStore } from './user'
+
 export const useWebSocketStore = defineStore({
   id: 'websocket', // id必填，且需要唯一
   // state
@@ -14,17 +17,38 @@ export const useWebSocketStore = defineStore({
   // actions
   actions: {
     initCommandSocket() {
-      const url = 'ws://192.168.1.100:19001/'
+      const url = 'ws://192.168.8.115:19001/'
       const init = new Socket(url)
+      const settingStore = useSettingStore()
+      const userStore = useUserStore()
       init.connect()
       init.ws.onmessage = function (ev) {
-        console.log(ev)
-        // switch (data.type) {
-        //   case 1:
-        //     break
-        //   case 2:
-        //     break
-        // }
+        console.log(JSON.parse(ev.data))
+        const { ackcode, messageId } = JSON.parse(ev.data)
+
+        if (ackcode == 0) {
+          switch (messageId) {
+            case 'getState':
+              // 初始化完毕
+              settingStore.updateInitLoading()
+              // 将sensor_data中的数据更新到store中
+              break
+            case 'getAllUser':
+              const { dbval } = JSON.parse(ev.data)
+              userStore.updateUserList(dbval)
+              break
+            case 'chpasswd':
+              // const { dbval } = JSON.parse(ev.data)
+              // userStore.updateUserList(dbval)
+              break
+            case 'startDisinfection':
+              break
+            case 'stopDisinfection':
+              break
+            default:
+              break
+          }
+        }
       }
       this.socketCommandInstance = init
     },
@@ -32,17 +56,20 @@ export const useWebSocketStore = defineStore({
       this.socketCommandInstance?.msg(message)
     },
     initEventSocket() {
-      const url = 'ws://192.168.1.100:19002/'
+      const url = 'ws://192.168.8.115:19002/'
       const init = new Socket(url)
       init.connect()
-      init.ws.onmessage = function (ev) {
-        console.log(ev)
-        // switch (data.type) {
-        //   case 1:
-        //     break
-        //   case 2:
-        //     break
-        // }
+      init.ws.onmessage = function (data) {
+        // console.log(data)
+        const { command } = data
+        switch (command) {
+          case 'RealtimeSensorDataReport':
+            const { sensor_data } = data || {}
+            // 将sensor_data中的数据更新到store中
+            break
+          default:
+            break
+        }
       }
       this.socketEventInstance = init
     },

vite.config.js

@@ -12,6 +12,10 @@ export default defineConfig({
     extensions: ['.js', '.json', '.vue'],
   },
   plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+  },
   //配置sass
   css: {
     preprocessorOptions: {