消毒机设备
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

217 lines
5.8 KiB

2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
  1. <script setup lang="ts">
  2. import { useDeviceStore } from 'stores/deviceStore'
  3. import { useHomeStore } from 'stores/homeStore'
  4. import { useLiquidStore } from 'stores/liquidStore'
  5. import { useSystemStore } from 'stores/systemStore'
  6. import { onBeforeMount, ref } from 'vue'
  7. import { sendCmd, subscribeEvent } from '@/apis/system'
  8. import { useDebugStore } from './stores/debugStore'
  9. import { useFormulaStore } from './stores/formulaStore'
  10. import { useSealStore } from './stores/sealStore'
  11. /**
  12. * 应用初始化组件
  13. * @description 负责系统初始化流程控制包括设备信息获取数据同步及进度展示
  14. */
  15. // 状态管理
  16. const deviceStore = useDeviceStore()
  17. const homeStore = useHomeStore()
  18. const formulaStore = useFormulaStore()
  19. const liquidStore = useLiquidStore()
  20. const systemStore = useSystemStore()
  21. const sealStore = useSealStore()
  22. const deviceStateStore = useDeviceStore()
  23. const debugStore = useDebugStore()
  24. const deviceType = useDeviceStore().deviceTypeMap
  25. // 组件状态
  26. const progress = ref(0) // 初始化进度百分比
  27. const version = __APP_VERSION__ // 应用版本号
  28. let timer: any = null // 进度条定时器
  29. /**
  30. * @hook 生命周期钩子 - 组件挂载前执行
  31. * @description 启动初始化流程和数据轮询
  32. */
  33. onBeforeMount(async () => {
  34. startProgress() // 启动进度条
  35. await systemStore.getSystemTime() // 获取系统时间
  36. })
  37. // 监听设备的主动上报数据,并根据上报类型 保存到对应的store
  38. subscribeEvent('stateUpdate', (data) => {
  39. if (data.fromClass === 'AirLeakDetectTest') {
  40. // 气密性测试
  41. sealStore.updateSealInfo(data.rely)
  42. }
  43. else if (data.fromClass === 'AddLiquidService') {
  44. // 加液服务
  45. liquidStore.updateAddLiquidWorkState(data.rely)
  46. }
  47. else if (data.fromClass === 'DrainLiquidService') {
  48. // 排液服务
  49. liquidStore.updateDrainLiquidWorkState(data.rely)
  50. }
  51. else if (data.fromClass === 'DisinfectionCtrlServiceExt') {
  52. // 消毒状态上报
  53. homeStore.updateHomeDisinfectionState(data.rely)
  54. }
  55. else if (data.fromClass === 'H2O2SensorMgr') {
  56. console.log(data.rely)
  57. // 首页传感器状态上报
  58. homeStore.updateHomeData(data.rely)
  59. }
  60. else if (data.fromClass === 'AppCore') {
  61. // 应用事件上报
  62. deviceStateStore.setDeviceState(data.rely)
  63. systemStore.insertLogs(data.rely.appEvents)
  64. }
  65. else if (data.fromClass === 'TestPageCtrlService') {
  66. // 测试页面状态上报
  67. debugStore.updateDebugPageState(data.rely)
  68. }
  69. })
  70. /**
  71. * @function 启动初始化进度条
  72. * @desc 模拟初始化进度同步加载各项数据
  73. */
  74. const startProgress = () => {
  75. timer = setInterval(async () => {
  76. // 生成随机进度增长(1-9%)
  77. const randomStep = Math.floor(Math.random() * 9 + 1)
  78. progress.value = Math.min(progress.value + randomStep, 100)
  79. const deviceInfo: Device.DeviceInfo = await initDeviceInfo()
  80. if (deviceInfo.deviceType === deviceType.LargeSpaceDM_B) {
  81. await initData() // 核心数据
  82. }
  83. else {
  84. await initData() // 核心数据
  85. await initLiquidConfig() // 液体配置
  86. }
  87. // 进度完成后清除定时器
  88. if (progress.value >= 100) {
  89. clearInterval(timer)
  90. }
  91. }, 100)
  92. }
  93. /**
  94. * @function 初始化核心数据
  95. * @desc 同步获取消毒状态
  96. */
  97. const initData = async () => {
  98. // 获取消毒状态
  99. const disinfectionParams = {
  100. className: 'DisinfectionCtrlServiceExt',
  101. fnName: 'getState',
  102. }
  103. const disinfectionData = await sendCmd(disinfectionParams)
  104. homeStore.updateHomeDisinfectionState(disinfectionData)
  105. await formulaStore.getFormualDefaultData() // 获取默认配方数据
  106. }
  107. /**
  108. * @function 初始化设备信息
  109. * @desc 从服务端获取设备信息并更新到状态存储
  110. */
  111. const initDeviceInfo = async () => {
  112. const deviceParams = {
  113. className: 'DeviceInfoMgrService',
  114. fnName: 'getDeviceInfo',
  115. }
  116. const res = await sendCmd(deviceParams)
  117. deviceStore.updateDeviceInfo(res)
  118. return res
  119. }
  120. /**
  121. * @function 初始化
  122. * @desc 获取液体最大容量和更新周期配置
  123. */
  124. const initLiquidConfig = async () => {
  125. const params = {
  126. className: 'AddLiquidService',
  127. fnName: 'getServiceConfig',
  128. }
  129. const liquidConfig = await sendCmd(params)
  130. liquidStore.initLiquidConfig(liquidConfig)
  131. const liquidParams = {
  132. fnName: 'getState',
  133. className: 'AddLiquidService',
  134. }
  135. const liquidData = await sendCmd(liquidParams)
  136. liquidStore.updateLiquidState(liquidData)
  137. }
  138. </script>
  139. <template>
  140. <!-- 进度条容器 -->
  141. <div v-if="progress < 100" class="main-content">
  142. <div class="progress-container">
  143. <div class="progress-bar" :style="{ width: `${progress}%` }" />
  144. <div class="progress-text">
  145. v{{ version }}系统初始化中 {{ progress }}%
  146. </div>
  147. </div>
  148. </div>
  149. <router-view v-slot="{ Component }" class="main-content">
  150. <transition name="">
  151. <component :is="Component" />
  152. </transition>
  153. </router-view>
  154. </template>
  155. <style scoped lang="scss">
  156. .main-content {
  157. width: 100%;
  158. height: 100%;
  159. background: url('assets/images/background-logo.svg') no-repeat center;
  160. background-size: cover;
  161. overflow: hidden;
  162. }
  163. .login-container {
  164. display: flex;
  165. flex-direction: column;
  166. align-items: center;
  167. justify-content: center;
  168. height: 100vh;
  169. background: #f0f2f5;
  170. }
  171. img {
  172. width: 600px;
  173. position: absolute;
  174. top: 40%;
  175. right: 20%;
  176. }
  177. .progress-container {
  178. width: 50%;
  179. height: 20px;
  180. background: #e4e7ed;
  181. border-radius: 30px;
  182. position: relative;
  183. top: 90%;
  184. margin: 0 auto;
  185. }
  186. .progress-bar {
  187. height: 100%;
  188. background: linear-gradient(90deg, #1989fa, #096ae0);
  189. border-radius: 30px;
  190. transition: width 0.3s ease;
  191. }
  192. .progress-text {
  193. position: absolute;
  194. top: 50%;
  195. left: 50%;
  196. transform: translate(-50%, -50%);
  197. color: #fff;
  198. font-size: 12px;
  199. line-height: 12px;
  200. font-weight: 500;
  201. }
  202. </style>