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

260 lines
6.6 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
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
  30. :class="isPopLiquidStatus ? 'btn mr active' : 'btn mr '"
  31. v-if="tabType == 2"
  32. @click="stopPop"
  33. >
  34. 停止排液
  35. </div>
  36. <div
  37. :class="isPopLiquidStatus ? 'btn' : 'btn active'"
  38. v-if="tabType == 2"
  39. @click="startTabLiquid"
  40. >
  41. 开始排液
  42. </div>
  43. </div>
  44. <!-- <div class="add_liquid">
  45. <svg
  46. xmlns="http://www.w3.org/2000/svg"
  47. xmlns:xlink="http://www.w3.org/1999/xlink"
  48. fill="none"
  49. version="1.1"
  50. width="30"
  51. height="30"
  52. viewBox="0 0 30 30"
  53. >
  54. <g>
  55. <path
  56. 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"
  57. fill="#81FC50"
  58. fill-opacity="1"
  59. />
  60. </g>
  61. </svg>
  62. <p class="text">{{ tabType == 1 ? '加液完成' : '排液完成' }}</p>
  63. </div> -->
  64. <div class="chart">
  65. <div
  66. class="liquid_column"
  67. :style="{
  68. '--height': `${(disinfectantCapacity / 500) * 427}px`,
  69. }"
  70. ></div>
  71. </div>
  72. <LiquidModal
  73. v-if="tabType == 2 && tipModalVisible"
  74. :hideTabLiquid="hideTabLiquid"
  75. :startPopFlag="startPopFlag"
  76. :isPopLiquidStatus="isPopLiquidStatus"
  77. />
  78. </div>
  79. </template>
  80. <script setup>
  81. import LiquidModal from './dialogs/LiquidModal.vue'
  82. import { useDeviceStore, useWebSocketStore } from '@/store'
  83. import { ref } from 'vue'
  84. import { storeToRefs } from 'pinia'
  85. import {
  86. startReplenishingFluidsJSON,
  87. stopReplenishingFluidsJSON,
  88. stopDrainingJSON,
  89. } from '@/mock/command'
  90. const props = defineProps({
  91. tabType: {
  92. type: Number,
  93. },
  94. })
  95. const addLiquidVal = ref(0)
  96. const tipModalVisible = ref(false)
  97. const webSocketStore = useWebSocketStore()
  98. const isAddLiquidStatus = ref(false)
  99. const isPopLiquidStatus = ref(false)
  100. const startAdd = () => {
  101. if (!isAddLiquidStatus.value) {
  102. isAddLiquidStatus.value = true
  103. webSocketStore.sendCommandMsg(startReplenishingFluidsJSON)
  104. }
  105. }
  106. const stopAdd = () => {
  107. if (isAddLiquidStatus.value) {
  108. isAddLiquidStatus.value = false
  109. webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON)
  110. }
  111. }
  112. const stopPop = () => {
  113. if (isPopLiquidStatus.value) {
  114. webSocketStore.sendCommandMsg(stopDrainingJSON)
  115. isPopLiquidStatus.value = false
  116. }
  117. }
  118. const startPopFlag = () => {
  119. isPopLiquidStatus.value = true
  120. }
  121. const startTabLiquid = () => {
  122. if (!isPopLiquidStatus.value) {
  123. tipModalVisible.value = true
  124. }
  125. }
  126. const formatter = value => {
  127. if (value > 500) {
  128. return '500/g'
  129. }
  130. if (value != 0) {
  131. var newVal = value.replace(/\b(0+)/gi, '')
  132. return newVal + '/g'
  133. }
  134. return '0/g'
  135. }
  136. const hideTabLiquid = () => {
  137. tipModalVisible.value = false
  138. }
  139. const deviceStore = useDeviceStore()
  140. const { disinfectantCapacity } = storeToRefs(deviceStore)
  141. </script>
  142. <style lang="scss" scoped>
  143. .liquid_contaienr {
  144. margin-bottom: 30px;
  145. height: 580px;
  146. box-sizing: border-box;
  147. background: #ffffff;
  148. border-radius: 16px;
  149. padding: 30px;
  150. padding-bottom: 23px;
  151. position: relative;
  152. .header_wrap {
  153. display: flex;
  154. align-items: center;
  155. justify-content: flex-end;
  156. position: relative;
  157. margin-bottom: 39px;
  158. .set_wrap {
  159. position: relative;
  160. width: 227px;
  161. height: 45px;
  162. background: url(../assets/img/liquid/oper.png) no-repeat;
  163. background-size: 227px 45px;
  164. .title {
  165. position: absolute;
  166. left: 22px;
  167. top: 12px;
  168. font-family: Source Han Sans CN;
  169. font-size: 14px;
  170. font-weight: normal;
  171. line-height: normal;
  172. letter-spacing: 0.1em;
  173. color: #0e0e0e;
  174. }
  175. .add_liquid_input {
  176. width: 40px;
  177. height: 20px;
  178. position: absolute;
  179. left: 113px;
  180. top: 11px;
  181. padding: 0;
  182. color: #0e0e0e;
  183. font-family: Source Han Sans CN;
  184. font-weight: 500;
  185. font-size: 14;
  186. }
  187. }
  188. .btn {
  189. width: 140px;
  190. height: 45px;
  191. border-radius: 23px;
  192. background: #f6f6f6;
  193. display: flex;
  194. align-items: center;
  195. justify-content: center;
  196. font-family: Source Han Sans CN;
  197. font-size: 14px;
  198. font-weight: normal;
  199. line-height: normal;
  200. letter-spacing: 0.1em;
  201. color: #d8d8d8;
  202. }
  203. .mr {
  204. margin: 0 16px;
  205. }
  206. .active {
  207. background: #06518b;
  208. color: #fff;
  209. }
  210. }
  211. .add_liquid {
  212. position: absolute;
  213. left: 382px;
  214. top: 33px;
  215. display: flex;
  216. align-items: center;
  217. .text {
  218. margin-left: 16px;
  219. font-family: Source Han Sans CN;
  220. font-size: 26px;
  221. font-weight: normal;
  222. line-height: normal;
  223. letter-spacing: 0.06em;
  224. color: #81fc50;
  225. }
  226. }
  227. .chart {
  228. position: absolute;
  229. left: 310px;
  230. bottom: 23px;
  231. width: 600px;
  232. height: 452px;
  233. background: url(../assets/img/liquid/chart.png) no-repeat;
  234. background-size: 600px 452px;
  235. .liquid_column {
  236. position: absolute;
  237. left: 96px;
  238. bottom: 13px;
  239. width: 491px;
  240. height: var(--height);
  241. border-radius: 0px 12px 12px 0px;
  242. background: linear-gradient(0deg, #06518b 0%, rgba(6, 81, 139, 0.7) 58%);
  243. }
  244. }
  245. }
  246. </style>