消毒机设备
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.

179 lines
5.2 KiB

2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
  1. <script lang="ts" setup>
  2. import { roundNumber } from '@/libs/utils'
  3. import { useFormulaStore } from '@/stores/formulaStore'
  4. import { useSystemStore } from '@/stores/systemStore'
  5. import homeLiquid from 'assets/images/home/home-liquid.svg'
  6. import Environment from 'components/home/Environment.vue'
  7. import HomeFormula from 'components/home/HomeFormula.vue'
  8. import HomeLogLevel from 'components/home/HomeLogLevel.vue'
  9. import HomeOperation from 'components/home/HomeOperation.vue'
  10. import HomeSetting from 'components/home/HomeSetting.vue'
  11. import { useHomeStore } from 'stores/homeStore'
  12. import { useLiquidStore } from 'stores/liquidStore'
  13. import { computed, ref, watchEffect } from 'vue'
  14. import { useRoute } from 'vue-router'
  15. const route = useRoute()
  16. const homeStore = useHomeStore()
  17. const liquidStore = useLiquidStore()
  18. const formulaStore = useFormulaStore()
  19. const systemStore = useSystemStore()
  20. const environmentParams = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[0])
  21. const initEnv1 = {
  22. type: 'env1',
  23. title: '探头1',
  24. }
  25. const initEnv2 = {
  26. type: 'env2',
  27. title: '探头2',
  28. }
  29. const probe1Params = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[1] || initEnv1)
  30. const probe2Params = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[2] || initEnv2)
  31. const liquidInfo = ref<Liquid.LiquidData>(liquidStore.liquidStateData)
  32. const liquidTotal = ref<number>(liquidStore.liquidTotal)
  33. const formulaInfo = ref()
  34. const loading = ref(false)
  35. watchEffect(() => {
  36. formulaInfo.value = formulaStore.currentSelectedFormulaInfo
  37. liquidTotal.value = liquidStore.liquidTotal
  38. liquidInfo.value = liquidStore.liquidStateData
  39. loading.value = systemStore.loading
  40. if (homeStore.h2O2SensorData && homeStore.h2O2SensorData.length) {
  41. environmentParams.value = {
  42. ...homeStore.h2O2SensorData[0],
  43. title: '仓内',
  44. type: 'inside',
  45. }
  46. }
  47. })
  48. // 当前消毒液余量百分比
  49. const nowLiquidProgress = computed(() => {
  50. const nl = roundNumber(Number(((liquidInfo.value.nowLiquid / liquidTotal.value) * 100)), 0)
  51. return nl
  52. })
  53. // 当前消毒液余量
  54. const nowLiquid = computed(() => {
  55. return roundNumber(liquidInfo.value.nowLiquid, 0)
  56. })
  57. </script>
  58. <template>
  59. <div v-loading="loading" class="home">
  60. <div v-if="route.path === '/home'" class="home-grid-container">
  61. <div class="home-grid-item merged-cell">
  62. <div class="home-left">
  63. <el-card class="card">
  64. <template #default>
  65. <!-- <div class="title-line" /> -->
  66. <div class="card-title-name">
  67. <img :src="homeLiquid"> 消毒液
  68. </div>
  69. <div class="card-progress">
  70. <div class="card-progress-content">
  71. <el-progress :text-inside="true" :stroke-width="35" :percentage="nowLiquidProgress" />
  72. </div>
  73. </div>
  74. <div class="card-num-g">
  75. {{ nowLiquid }}g
  76. </div>
  77. </template>
  78. </el-card>
  79. <el-card class="card">
  80. <Environment :env-params="environmentParams" line-color="#ffb380" />
  81. </el-card>
  82. <el-card class="card">
  83. <Environment :env-params="probe1Params" line-color="#80ffb3" />
  84. </el-card>
  85. <el-card class="card">
  86. <Environment :env-params="probe2Params" line-color="#cc99ff" />
  87. </el-card>
  88. </div>
  89. </div>
  90. <div class="home-grid-item home-right">
  91. <!-- 正在进行的配方 -->
  92. <HomeFormula />
  93. <!-- 选择消毒的等级 -->
  94. <HomeLogLevel />
  95. <!-- 开始消毒停止消毒及状态区 -->
  96. <HomeOperation />
  97. <!-- 消毒设置 -->
  98. <HomeSetting />
  99. </div>
  100. </div>
  101. <div v-else>
  102. <router-view />
  103. </div>
  104. </div>
  105. </template>
  106. <style lang="scss" scoped>
  107. $input-height: 3rem;
  108. .home{
  109. min-height: $main-container-height;
  110. }
  111. .home-grid-container {
  112. display: grid;
  113. grid-template-columns: repeat(3, 1fr);
  114. gap: 1.5rem;
  115. }
  116. .home-merged-cell {
  117. grid-column: 1 / 2;
  118. background-color: #ff6b6b;
  119. }
  120. .home-left {
  121. display: grid;
  122. grid-template-columns: repeat(2, 1fr);
  123. grid-template-rows: repeat(2, auto);
  124. gap:1.5rem;
  125. .card {
  126. text-align: center;
  127. height: 40.1vh;
  128. width: 30.5vw;
  129. border: 1px solid rgb(225, 225, 225);
  130. position: relative;
  131. border-radius: 10px 10px 10px 10px;
  132. background: #FFFFFF;
  133. background: $gradient-color;
  134. .title-line{
  135. height: 1vw;
  136. background-color: #b3d9ff;
  137. position: absolute;
  138. width: 100%;
  139. border-radius: 10px 10px 0 0;
  140. margin: -2.12rem;
  141. }
  142. .card-title-name{
  143. display: flex;
  144. align-items: center;
  145. gap: 10px;
  146. font-size: 26px;
  147. padding: 1rem;
  148. }
  149. .card-progress{
  150. display: flex;
  151. justify-content: center;
  152. margin-top: 3rem;
  153. .card-progress-content{
  154. width: 92%;
  155. }
  156. }
  157. .card-num-g{
  158. margin-top: 3.5vw;
  159. font-size: 26px;
  160. font-weight: bold;
  161. }
  162. }
  163. }
  164. .home-right{
  165. width: 31vw;
  166. background: $gradient-color;
  167. position: relative;
  168. }
  169. .el-button {
  170. background-color: #2892F3 !important;
  171. }
  172. </style>