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

231 lines
5.4 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
  1. <template>
  2. <div class="progress_container">
  3. <div class="header_wrap">
  4. <div class="left_progress">
  5. <div class="left_time_tag">剩余时间</div>
  6. <p class="time">{{ operatorStore.estimatedRemainingTimeS }} S</p>
  7. <div class="progress_bg">
  8. <div
  9. class="pro"
  10. :style="{
  11. '--width': '325px',
  12. }"
  13. ></div>
  14. </div>
  15. </div>
  16. <div class="right_btns">
  17. <div
  18. :class="operatorStore.disinfectStatus ? 'btn active' : 'btn'"
  19. @click="pauseDisinfect"
  20. >
  21. 暂停消毒
  22. </div>
  23. <div
  24. :class="operatorStore.disinfectStatus ? 'btn ml' : 'btn ml active'"
  25. @click="continueDisinfect"
  26. >
  27. 继续消毒
  28. </div>
  29. </div>
  30. </div>
  31. <div class="echarts_wrap">
  32. <div class="single_wrap">
  33. <p class="title">设备温度/湿度/过氧化氢浓度</p>
  34. <div class="echarts_box"></div>
  35. </div>
  36. <div class="single_wrap">
  37. <p class="title">环境1/湿度/过氧化氢浓度</p>
  38. <div class="echarts_box"></div>
  39. </div>
  40. <div class="single_wrap">
  41. <p class="title">环境2/湿度/过氧化氢浓度</p>
  42. <div class="echarts_box"></div>
  43. </div>
  44. </div>
  45. <div class="detail_wrap">
  46. <div class="detail" @click="showDetail">详情</div>
  47. </div>
  48. </div>
  49. </template>
  50. <script setup>
  51. import { useOperatorStore, useWebSocketStore } from '@/store'
  52. import { stopDisinfectionJSON, getStateJSON } from '@/mock/command'
  53. import { onMounted, onUnmounted, ref } from 'vue'
  54. const operatorStore = useOperatorStore()
  55. const webSocketStore = useWebSocketStore()
  56. const props = defineProps({
  57. changeShowOperator: {
  58. type: Function,
  59. },
  60. })
  61. const showDetail = () => {
  62. props.changeShowOperator(true)
  63. }
  64. const timer = ref(null)
  65. onMounted(() => {
  66. timer.value = setInterval(() => {
  67. webSocketStore.sendCommandMsg(getStateJSON)
  68. }, 1000)
  69. })
  70. onUnmounted(() => {
  71. timer.value = null
  72. })
  73. const pauseDisinfect = () => {
  74. if (operatorStore.disinfectStatus) {
  75. webSocketStore.sendCommandMsg(stopDisinfectionJSON)
  76. operatorStore.updateDisinfectStatus(false)
  77. }
  78. }
  79. const continueDisinfect = () => {
  80. if (!operatorStore.disinfectStatus) {
  81. operatorStore.updateDisinfectStatus(true)
  82. }
  83. }
  84. </script>
  85. <style lang="scss" scoped>
  86. .progress_container {
  87. margin-bottom: 30px;
  88. height: 580px;
  89. box-sizing: border-box;
  90. background: #ffffff;
  91. border-radius: 16px;
  92. padding: 20px;
  93. padding-bottom: 30px;
  94. .header_wrap {
  95. display: flex;
  96. align-items: center;
  97. margin-bottom: 49px;
  98. .left_progress {
  99. width: 860px;
  100. height: 80px;
  101. border-radius: 14px;
  102. background: #f6f6f6;
  103. box-sizing: border-box;
  104. padding: 0 23px;
  105. display: flex;
  106. align-items: center;
  107. .left_time_tag {
  108. width: 158.66px;
  109. height: 45px;
  110. border-radius: 23px;
  111. opacity: 1;
  112. background: #06518b;
  113. display: flex;
  114. align-items: center;
  115. justify-content: center;
  116. font-family: Source Han Sans CN;
  117. font-size: 14px;
  118. font-weight: normal;
  119. letter-spacing: 0.1em;
  120. color: #ffffff;
  121. margin-right: 73px;
  122. }
  123. .time {
  124. width: 90px;
  125. height: 20px;
  126. font-family: Source Han Sans CN;
  127. font-size: 14px;
  128. font-weight: 500;
  129. letter-spacing: 0.1em;
  130. color: #000000;
  131. margin-right: 85px;
  132. display: flex;
  133. align-items: center;
  134. }
  135. .progress_bg {
  136. width: 396px;
  137. height: 14px;
  138. border-radius: 7px;
  139. background: #ffffff;
  140. position: relative;
  141. overflow: hidden;
  142. .pro {
  143. position: absolute;
  144. left: 0;
  145. top: 0;
  146. height: 14px;
  147. border-radius: 7px;
  148. background: #06518b;
  149. width: var(--width);
  150. }
  151. }
  152. }
  153. .right_btns {
  154. display: flex;
  155. align-items: center;
  156. box-sizing: border-box;
  157. margin-left: 20px;
  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. letter-spacing: 0.1em;
  170. color: #d8d8d8;
  171. }
  172. .active {
  173. color: #ffffff;
  174. background: #06518b;
  175. }
  176. .ml {
  177. margin-left: 20px;
  178. }
  179. }
  180. }
  181. .echarts_wrap {
  182. height: 351px;
  183. display: flex;
  184. align-items: center;
  185. margin-bottom: 19px;
  186. .single_wrap {
  187. flex: 1;
  188. height: 351px;
  189. .title {
  190. font-family: Source Han Sans CN;
  191. font-size: 14px;
  192. font-weight: 500;
  193. letter-spacing: 0.1em;
  194. color: #000000;
  195. margin-bottom: 24px;
  196. padding-left: 11px;
  197. }
  198. .echarts_box {
  199. width: 380px;
  200. height: 308px;
  201. }
  202. }
  203. }
  204. .detail_wrap {
  205. display: flex;
  206. align-items: center;
  207. justify-content: flex-end;
  208. padding-right: 16px;
  209. .detail {
  210. width: 105px;
  211. height: 31px;
  212. border-radius: 16px;
  213. background: #06518b;
  214. display: flex;
  215. align-items: center;
  216. justify-content: center;
  217. font-family: Source Han Sans CN;
  218. font-size: 12px;
  219. font-weight: normal;
  220. letter-spacing: 0.1em;
  221. color: #ffffff;
  222. }
  223. }
  224. }
  225. </style>