关机

src/components/LoginForm.vue

@@ -21,10 +21,13 @@
 <script setup>
 import Eye from '@/assets/img/login/eye.png'
 import Open from '@/assets/img/login/open.png'
+import { useWebSocketStore } from '@/store'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-const router = useRouter()
+import { loginJSON } from '@/mock/command'
 
+const router = useRouter()
+const webSocketStore = useWebSocketStore()
 const showPassword = ref(false)
 const username = ref('')
 const password = ref('')
@@ -44,6 +47,7 @@ const handleLogin = () => {
     return
   }
   tip.value = ''
+  webSocketStore?.sendCommandMsg(loginJSON(username.value, password.value))
   if (username.value == 'admin' && password.value == '123') {
     router.push('/')
   }

src/components/Operator.vue

@@ -17,7 +17,13 @@
       </div>
       <div class="warn_wrap">
         <p class="warn_text">警报信息</p>
-        <div class="detail_btn">详情</div>
+        <div
+          class="detail_btn"
+          v-if="operatorStore.disinfectStatus"
+          @click="toDetail"
+        >
+          详情
+        </div>
       </div>
     </div>
     <div class="right_container">
@@ -34,8 +40,13 @@
         />
         <div class="log" @click="showLogPicker">{{ logVal }}</div>
       </div>
-      <div class="start" @click="startDisinfect">开始消毒</div>
-      <div class="progress" @click="toDetail">
+      <div
+        :class="operatorStore.disinfectStatus ? 'start cant' : 'start'"
+        @click="startDisinfect"
+      >
+        开始消毒
+      </div>
+      <div class="progress">
         <p class="title">消毒进度</p>
         <div class="tube">
           <div
@@ -253,6 +264,9 @@ const showLogPicker = () => {
       letter-spacing: 0.1em;
       color: #ffffff;
     }
+    .cant {
+      background: #f4f4f4;
+    }
     .progress {
       width: 340px;
       height: 114px;

src/main.js

@@ -2,7 +2,15 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
-import { DatePicker, TimePicker, Picker, Field, Toast } from 'vant'
+import {
+  DatePicker,
+  TimePicker,
+  Picker,
+  Loading,
+  Field,
+  Toast,
+  Overlay,
+} from 'vant'
 import 'vant/lib/index.css'
 import '@/assets/css/reset.css'
 import './style.scss'
@@ -11,8 +19,10 @@ createApp(App)
   .use(router)
   .use(Picker)
   .use(DatePicker)
+  .use(Loading)
   .use(TimePicker)
   .use(Field)
+  .use(Overlay)
   .use(Toast)
   .use(store)
   .mount('#app')

src/mock/command.js

@@ -3,3 +3,36 @@ export const startDisinfectionJSON = {
   roomSize: 12,
   log: 6,
 }
+
+// 登陆
+export const loginJSON = (userid, passwd) => {
+  return {
+    command: 'login',
+    messageId: 'login',
+    userid,
+    passwd,
+  }
+}
+
+// 退出登陆
+export const logoutJSON = {
+  command: 'unlogin',
+  messageId: 'unlogin',
+}
+
+// 改密码
+export const chpasswdJSON = (userId, passwd) => {
+  return {
+    command: 'chpasswd',
+    messageId: 'chpasswd',
+    userId,
+    passwd,
+  }
+}
+
+// 关机
+export const shutdownJSON = {
+  command: 'shutdown',
+  messageId: 'shutdown',
+  delayms: 60 * 5,
+}

src/pages/Home.vue

@@ -134,6 +134,35 @@
       <p>IP192.0.0.0.0</p>
       <p class="time">{{ nowTime }}</p>
     </div>
+    <div class="log_out_btn" @click="handleLogout">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="76"
+        height="29"
+        viewBox="0 0 76 29"
+      >
+        <g>
+          <g>
+            <path
+              d="M34.9,7.65437C36.22,8.27594,37.86,9.23781,38.7,9.89937L39.480000000000004,8.77687C38.62,8.15563,36.92,7.25375,35.66,6.6725L34.9,7.65437ZM33.86,13.18C35.12,13.78,36.74,14.72,37.54,15.36L38.3,14.24C37.46,13.62,35.84,12.74,34.6,12.18L33.86,13.18ZM34.46,23.64L35.58,24.5628C36.76,22.7,38.18,20.16,39.24,18.04L38.28,17.16C37.12,19.44,35.54,22.1,34.46,23.64ZM43.96,6.81281C44.66,7.875,45.38,9.27812,45.68,10.18L46.96,9.63875C46.66,8.75687,45.88,7.39406,45.18,6.37187L43.96,6.81281ZM39.62,10.28L39.62,11.56L44.96,11.56L44.96,16.24L40.38,16.24L40.38,17.52L44.96,17.52L44.96,22.88L38.980000000000004,22.88L38.980000000000004,24.16L52.2,24.16L52.2,22.88L46.34,22.88L46.34,17.52L51,17.52L51,16.24L46.34,16.24L46.34,11.56L51.72,11.56L51.72,10.28L39.62,10.28ZM64.2,7.65625C65,8.84,65.82,10.4,66.16,11.38L67.28,10.8C66.94,9.8,66.06,8.29844,65.25999999999999,7.155L64.2,7.65625ZM73.24000000000001,7.03437C72.72,8.19812,71.78,9.84,71.08,10.84L72.1,11.32C72.82,10.36,73.72,8.86,74.42,7.57625L73.24000000000001,7.03437ZM59,6.51281C58.42,8.35844,57.4,10.14,56.22,11.34C56.44,11.62,56.8,12.26,56.9,12.54C57.519999999999996,11.88,58.120000000000005,11.06,58.66,10.16L63.58,10.16L63.58,8.9L59.34,8.9C59.66,8.23812,59.94,7.53594,60.18,6.85406L59,6.51281ZM56.68,16.4L56.68,17.64L59.6,17.64L59.6,21.7653C59.6,22.6262,59,23.1672,58.66,23.3672C58.879999999999995,23.6478,59.22,24.1884,59.32,24.5087C59.620000000000005,24.1884,60.120000000000005,23.8678,63.44,21.9856C63.34,21.7053,63.22,21.2047,63.18,20.8441L60.84,22.0856L60.84,17.64L63.7,17.64L63.7,16.4L60.84,16.4L60.84,13.56L63.239999999999995,13.56L63.239999999999995,12.34L57.519999999999996,12.34L57.519999999999996,13.56L59.6,13.56L59.6,16.4L56.68,16.4ZM65.7,16.88L72.62,16.88L72.62,19.18L65.7,19.18L65.7,16.88ZM65.7,15.7L65.7,13.44L72.62,13.44L72.62,15.7L65.7,15.7ZM68.6,6.43125L68.6,12.2L64.48,12.2L64.48,24.7819L65.7,24.7819L65.7,20.34L72.62,20.34L72.62,23.02C72.62,23.3,72.5,23.38,72.22,23.38C71.92,23.4,70.9,23.4,69.72,23.38C69.92,23.72,70.1,24.26,70.16,24.6C71.7,24.6,72.62,24.6,73.14,24.36C73.68,24.16,73.84,23.76,73.84,23.04L73.84,12.18L72.62,12.2L69.86,12.2L69.86,6.43125L68.6,6.43125Z"
+              fill="#FFFFFF"
+              fill-opacity="1"
+            />
+          </g>
+          <g>
+            <path
+              d="M12.8863,21.99L12.8863,24.6672C12.8863,24.6954,12.888,24.7,12.911,24.7L2.21645,24.7C2.23942,24.6994,2.2411,24.696,2.2411,24.6672L2.2411,6.33278C2.2411,6.304600000000001,2.23942,6.3,2.21645,6.3L12.911,6.3C12.888,6.30058,12.8863,6.30403,12.8863,6.33278L12.8863,11.778030000000001C12.8857,12.41359,13.3876,12.92915,14.0069,12.92915C14.6262,12.92915,15.128,12.41359,15.1274,11.778030000000001L15.1274,6.33278C15.1274,5.06203,14.1637,4,12.9328,4L2.1946,4C0.963674,4,0,5.06203,0,6.33278L0,24.6672C0,25.938,0.963674,27,2.1946,27L12.9328,27C14.1637,27,15.1274,25.938,15.1274,24.6672L15.1274,21.99C15.1274,21.3549,14.6257,20.84,14.0069,20.84C13.388,20.84,12.8863,21.3549,12.8863,21.99ZM21.6038,15.8428L18.8306,12.99639Q18.4344,12.5898,18.0383,12.5898Q17.6421,12.58981,17.2459,12.99639Q16.4536,13.80956,17.2459,14.6227L18.1007,15.5L9.52474,15.5Q8.40419,15.5,8.40419,16.65Q8.40419,17.8,9.52474,17.8L18.112,17.8L17.2459,18.6889Q16.4536,19.5021,17.2459,20.3152Q17.6421,20.7218,18.0383,20.7218Q18.4344,20.7218,18.8306,20.3152L21.6038,17.469099999999997Q22,17.0625,22,16.655900000000003Q22,16.249299999999998,21.6038,15.8428Z"
+              fill-rule="evenodd"
+              fill="#FFFFFF"
+              fill-opacity="1"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
   </div>
 </template>
 
@@ -145,9 +174,14 @@ import Progress from 'cpns/Progress'
 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 { useRouter } from 'vue-router'
 
+const router = useRouter()
 const webSocketStore = useWebSocketStore()
+const { socketCommandInstance } = storeToRefs(webSocketStore)
 webSocketStore.initCommandSocket()
 webSocketStore.initEventSocket()
 
@@ -180,6 +214,11 @@ onMounted(() => {
 onBeforeUnmount(() => {
   timer.value = null
 })
+
+const handleLogout = () => {
+  webSocketStore?.sendCommandMsg(logoutJSON)
+  router.push('/login')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -242,5 +281,18 @@ onBeforeUnmount(() => {
       white-space: nowrap;
     }
   }
+  .log_out_btn {
+    width: 123px;
+    height: 45px;
+    border-radius: 23px;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #064b81;
+    right: 248px;
+    bottom: 22px;
+    position: absolute;
+  }
 }
 </style>

src/pages/Login.vue

@@ -3,15 +3,23 @@
     <LoginForm />
     <p class="copyright">CopyRight@ xxxxxx公司</p>
     <div class="shutdown">
-      <div class="group">
+      <div class="group" @click="shutdown">
         <img :src="Shutdown" class="icon" alt="" />
         <p class="text">关机</p>
       </div>
-      <div class="group">
+      <div class="group" @click="reboot">
         <img :src="Restart" class="icon" alt="" />
         <p class="text">重新启动</p>
       </div>
     </div>
+    <van-overlay :show="showShutdown">
+      <div class="wrapper" @click.stop>
+        <div class="block">
+          <van-loading />
+          <p class="shutdown_text">{{ shutSecond }} 秒后关机...</p>
+        </div>
+      </div>
+    </van-overlay>
   </div>
 </template>
 
@@ -19,11 +27,33 @@
 import Restart from '@/assets/img/login/restart.png'
 import Shutdown from '@/assets/img/login/shutdown.png'
 import LoginForm from 'cpns/LoginForm.vue'
-
+import { shutdownJSON } from '@/mock/command'
 import { useWebSocketStore } from '@/store'
+import { ref, onUnmounted } from 'vue'
 const webSocketStore = useWebSocketStore()
 webSocketStore.initCommandSocket()
 webSocketStore.initEventSocket()
+const showShutdown = ref(false)
+const shutSecond = ref(5)
+const timer = ref(null)
+
+const shutdown = () => {
+  showShutdown.value = true
+  timer.value = setInterval(() => {
+    if (shutSecond.value > 0) {
+      shutSecond.value = shutSecond.value - 1
+    } else {
+      timer.value = null
+    }
+  }, 1000)
+  webSocketStore?.sendCommandMsg(shutdownJSON)
+}
+
+onUnmounted(() => {
+  timer.value = null
+})
+
+const reboot = () => {}
 </script>
 
 <style lang="scss" scoped>
@@ -76,4 +106,28 @@ webSocketStore.initEventSocket()
     }
   }
 }
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.block {
+  width: 120px;
+  height: 120px;
+  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>