消毒机前端代码
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.

228 lines
5.9 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. <template>
  2. <div class="liquid_contaienr">
  3. <div class="header_wrap">
  4. <div class="set_wrap" v-if="tabType == 1">
  5. <van-field
  6. type="number"
  7. v-model="addLiquidVal"
  8. :clickable="true"
  9. class="add_liquid_input"
  10. :maxlength="5"
  11. :formatter="formatter"
  12. />
  13. <p class="title">设置加液</p>
  14. </div>
  15. <div
  16. :class="isAddLiquidStatus ? 'btn mr active' : 'btn mr '"
  17. v-if="tabType == 1"
  18. @click="stopAdd"
  19. >
  20. 暂停加液
  21. </div>
  22. <div
  23. :class="isAddLiquidStatus ? 'btn' : 'btn active'"
  24. v-if="tabType == 1"
  25. @click="startAdd"
  26. >
  27. 开始加液
  28. </div>
  29. <div class="btn active" v-if="tabType == 2" @click="startTabLiquid">
  30. 开始排液
  31. </div>
  32. </div>
  33. <!-- <div class="add_liquid">
  34. <svg
  35. xmlns="http://www.w3.org/2000/svg"
  36. xmlns:xlink="http://www.w3.org/1999/xlink"
  37. fill="none"
  38. version="1.1"
  39. width="30"
  40. height="30"
  41. viewBox="0 0 30 30"
  42. >
  43. <g>
  44. <path
  45. d="M15.0171,0Q18.13,0,20.8495,1.1748Q23.569,2.3496,25.6043,4.39274Q27.6397,6.43587,28.8198,9.16005Q30,11.8842,30,14.983Q30,18.0817,28.8198,20.8229Q27.6397,23.5641,25.6043,25.6073Q23.569,27.6504,20.8495,28.8252Q18.13,30,15.0171,30Q11.9042,30,9.16762,28.8252Q6.43101,27.6504,4.39567,25.6073Q2.36032,23.5641,1.18016,20.8229Q-0.00000305839,18.0817,0,14.983Q0.00000305839,11.8842,1.18016,9.16004Q2.36032,6.43587,4.39567,4.39274Q6.43102,2.3496,9.16762,1.1748Q11.9042,-5.07417e-7,15.0171,0ZM24.4242,12.1226Q25.0399,11.5096,25.0741,10.6073Q25.1083,9.70488,24.4926,9.09194Q23.8769,8.479,22.9875,8.49603Q22.0981,8.51305,21.4823,9.12599L11.8358,18.7287L8.51767,15.4597Q7.90194,14.8468,7.01254,14.8297Q6.12315,14.8127,5.50741,15.4257Q4.89168,16.0386,4.87457,16.8729Q4.85747,17.7072,5.4732,18.3201L10.2281,23.0874Q10.8438,23.7003,11.8358,23.6833Q12.8278,23.6663,13.4436,23.0533L13.3067,23.1896L24.4242,12.1226Z"
  46. fill="#81FC50"
  47. fill-opacity="1"
  48. />
  49. </g>
  50. </svg>
  51. <p class="text">{{ tabType == 1 ? '加液完成' : '排液完成' }}</p>
  52. </div> -->
  53. <div class="chart">
  54. <div
  55. class="liquid_column"
  56. :style="{
  57. '--height': `${(disinfectantCapacity / 500) * 427}px`,
  58. }"
  59. ></div>
  60. </div>
  61. <LiquidModal
  62. v-if="tabType == 2 && tipModalVisible"
  63. :hideTabLiquid="hideTabLiquid"
  64. />
  65. </div>
  66. </template>
  67. <script setup>
  68. import LiquidModal from './dialogs/LiquidModal.vue'
  69. import { useDeviceStore, useWebSocketStore } from '@/store'
  70. import { ref } from 'vue'
  71. import { storeToRefs } from 'pinia'
  72. import {
  73. startReplenishingFluidsJSON,
  74. stopReplenishingFluidsJSON,
  75. } from '@/mock/command'
  76. const props = defineProps({
  77. tabType: {
  78. type: Number,
  79. },
  80. })
  81. const addLiquidVal = ref(0)
  82. const tipModalVisible = ref(false)
  83. const webSocketStore = useWebSocketStore()
  84. const isAddLiquidStatus = ref(false)
  85. const startAdd = () => {
  86. isAddLiquidStatus.value = true
  87. webSocketStore.sendCommandMsg(startReplenishingFluidsJSON)
  88. }
  89. const stopAdd = () => {
  90. isAddLiquidStatus.value = false
  91. webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON)
  92. }
  93. const startTabLiquid = () => {
  94. tipModalVisible.value = true
  95. }
  96. const formatter = value => {
  97. if (value > 500) {
  98. return '500/g'
  99. }
  100. if (value != 0) {
  101. var newVal = value.replace(/\b(0+)/gi, '')
  102. return newVal + '/g'
  103. }
  104. return '0/g'
  105. }
  106. const hideTabLiquid = () => {
  107. tipModalVisible.value = false
  108. }
  109. const deviceStore = useDeviceStore()
  110. const { disinfectantCapacity } = storeToRefs(deviceStore)
  111. </script>
  112. <style lang="scss" scoped>
  113. .liquid_contaienr {
  114. margin-bottom: 30px;
  115. height: 580px;
  116. box-sizing: border-box;
  117. background: #ffffff;
  118. border-radius: 16px;
  119. padding: 30px;
  120. padding-bottom: 23px;
  121. position: relative;
  122. .header_wrap {
  123. display: flex;
  124. align-items: center;
  125. justify-content: flex-end;
  126. position: relative;
  127. margin-bottom: 39px;
  128. .set_wrap {
  129. position: relative;
  130. width: 227px;
  131. height: 45px;
  132. background: url(../assets/img/liquid/oper.png) no-repeat;
  133. background-size: 227px 45px;
  134. .title {
  135. position: absolute;
  136. left: 22px;
  137. top: 12px;
  138. font-family: Source Han Sans CN;
  139. font-size: 14px;
  140. font-weight: normal;
  141. line-height: normal;
  142. letter-spacing: 0.1em;
  143. color: #0e0e0e;
  144. }
  145. .add_liquid_input {
  146. width: 40px;
  147. height: 20px;
  148. position: absolute;
  149. left: 113px;
  150. top: 11px;
  151. padding: 0;
  152. color: #0e0e0e;
  153. font-family: Source Han Sans CN;
  154. font-weight: 500;
  155. font-size: 14;
  156. }
  157. }
  158. .btn {
  159. width: 140px;
  160. height: 45px;
  161. border-radius: 23px;
  162. background: #f6f6f6;
  163. display: flex;
  164. align-items: center;
  165. justify-content: center;
  166. font-family: Source Han Sans CN;
  167. font-size: 14px;
  168. font-weight: normal;
  169. line-height: normal;
  170. letter-spacing: 0.1em;
  171. color: #d8d8d8;
  172. }
  173. .mr {
  174. margin: 0 16px;
  175. }
  176. .active {
  177. background: #06518b;
  178. color: #fff;
  179. }
  180. }
  181. .add_liquid {
  182. position: absolute;
  183. left: 382px;
  184. top: 33px;
  185. display: flex;
  186. align-items: center;
  187. .text {
  188. margin-left: 16px;
  189. font-family: Source Han Sans CN;
  190. font-size: 26px;
  191. font-weight: normal;
  192. line-height: normal;
  193. letter-spacing: 0.06em;
  194. color: #81fc50;
  195. }
  196. }
  197. .chart {
  198. position: absolute;
  199. left: 310px;
  200. bottom: 23px;
  201. width: 600px;
  202. height: 452px;
  203. background: url(../assets/img/liquid/chart.png) no-repeat;
  204. background-size: 600px 452px;
  205. .liquid_column {
  206. position: absolute;
  207. left: 96px;
  208. bottom: 13px;
  209. width: 491px;
  210. height: var(--height);
  211. border-radius: 0px 12px 12px 0px;
  212. background: linear-gradient(0deg, #06518b 0%, rgba(6, 81, 139, 0.7) 58%);
  213. }
  214. }
  215. }
  216. </style>