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

888 lines
21 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
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
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="update_device_container">
  3. <div class="row_wrap">
  4. <p class="title">注射蠕动泵速率(g/min)</p>
  5. <p class="num">
  6. <van-field
  7. type="number"
  8. v-model="sprayLiquidConfigVal"
  9. :clickable="true"
  10. :formatter="formatter7"
  11. readonly
  12. @click.stop="hideClickKey(2)"
  13. />
  14. </p>
  15. </div>
  16. <div class="row_wrap">
  17. <p class="title">消毒停止过氧化氢浓度(ppm)</p>
  18. <p class="num">
  19. <van-field
  20. type="number"
  21. v-model="stoped_gs"
  22. :clickable="true"
  23. :formatter="formatter1"
  24. readonly
  25. @click.stop="hideClickKey(3)"
  26. />
  27. </p>
  28. </div>
  29. <div class="row_wrap">
  30. <p class="title">消毒继续过氧化氢浓度(ppm)</p>
  31. <p class="num">
  32. <van-field
  33. type="number"
  34. v-model="continued_gs"
  35. :clickable="true"
  36. :formatter="formatter2"
  37. readonly
  38. @click.stop="hideClickKey(4)"
  39. />
  40. </p>
  41. </div>
  42. <div class="row_wrap">
  43. <p class="title">消毒停止相对湿度(%RH)</p>
  44. <p class="num">
  45. <van-field
  46. type="number"
  47. v-model="stoped_humi"
  48. :clickable="true"
  49. :formatter="formatter9"
  50. readonly
  51. @click.stop="hideClickKey(9)"
  52. />
  53. </p>
  54. </div>
  55. <div class="row_wrap">
  56. <p class="title">消毒继续相对湿度(%RH)</p>
  57. <p class="num">
  58. <van-field
  59. type="number"
  60. v-model="continued_humi"
  61. :clickable="true"
  62. :formatter="formatter10"
  63. readonly
  64. @click.stop="hideClickKey(10)"
  65. />
  66. </p>
  67. </div>
  68. <div class="row_wrap">
  69. <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
  70. <p class="num">
  71. <van-field
  72. type="number"
  73. :formatter="formatter3"
  74. v-model="stoped_satur"
  75. :clickable="true"
  76. readonly
  77. @click.stop="hideClickKey(5)"
  78. />
  79. </p>
  80. </div>
  81. <div class="row_wrap">
  82. <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
  83. <p class="num">
  84. <van-field
  85. type="number"
  86. :formatter="formatter4"
  87. v-model="continued_satur"
  88. :clickable="true"
  89. readonly
  90. @click.stop="hideClickKey(6)"
  91. />
  92. </p>
  93. </div>
  94. <div class="row_wrap" @click="showLogPicker">
  95. <p class="title">Log等级</p>
  96. <div class="num">
  97. <p class="log">{{ logVal }}</p>
  98. </div>
  99. </div>
  100. <div class="row_wrap">
  101. <p class="title">配方名称</p>
  102. <div>
  103. <input
  104. id="id_formula"
  105. type="text"
  106. v-model="formula_id"
  107. class="formula_input"
  108. placeholder="请输入配方名称"
  109. @focus="handleShowKeyBoard"
  110. />
  111. </div>
  112. </div>
  113. <van-number-keyboard
  114. v-model="addLiquidConfigVal"
  115. :title="addLiquidConfigVal"
  116. :show="addLiquidConfigValShow"
  117. @input="val => handleInput(val, 1)"
  118. theme="custom"
  119. close-button-text="配置"
  120. @close="setAddliquidVal"
  121. @blur="addLiquidConfigValShow = false"
  122. />
  123. <van-number-keyboard
  124. v-model="sprayLiquidConfigVal"
  125. @input="val => handleInput(val, 2)"
  126. :title="sprayLiquidConfigVal"
  127. :show="sprayLiquidConfigValShow"
  128. theme="custom"
  129. @close="setSprayLiquidVal"
  130. close-button-text="配置"
  131. @blur="sprayLiquidConfigValShow = false"
  132. />
  133. <van-number-keyboard
  134. v-model="stoped_gs"
  135. @input="val => handleInput(val, 3)"
  136. :title="stoped_gs"
  137. :show="stoped_gsShow"
  138. theme="custom"
  139. @close="setStopedGsVal"
  140. close-button-text="配置"
  141. @blur="stoped_gsShow = false"
  142. />
  143. <van-number-keyboard
  144. v-model="continued_gs"
  145. @input="val => handleInput(val, 4)"
  146. :title="continued_gs"
  147. @close="setcontinuedGsVal"
  148. :show="continued_gsShow"
  149. theme="custom"
  150. close-button-text="配置"
  151. @blur="continued_gsShow = false"
  152. />
  153. <van-number-keyboard
  154. v-model="stoped_satur"
  155. @input="val => handleInput(val, 5)"
  156. :title="stoped_satur"
  157. @close="setstopedSaturVal"
  158. :show="stoped_saturShow"
  159. theme="custom"
  160. close-button-text="配置"
  161. @blur="stoped_saturShow = false"
  162. />
  163. <van-number-keyboard
  164. v-model="continued_satur"
  165. @input="val => handleInput(val, 6)"
  166. :title="continued_satur"
  167. @close="setContinuedSaturVal"
  168. :show="continued_saturShow"
  169. theme="custom"
  170. close-button-text="配置"
  171. @blur="continued_saturShow = false"
  172. />
  173. <van-number-keyboard
  174. v-model="max_humidity"
  175. @input="val => handleInput(val, 7)"
  176. :title="max_humidity"
  177. @close="setMaxHumidityVal"
  178. :show="max_humidityShow"
  179. theme="custom"
  180. close-button-text="配置"
  181. @blur="max_humidityShow = false"
  182. />
  183. <van-number-keyboard
  184. theme="custom"
  185. close-button-text="配置"
  186. @input="val => handleInput(val, 8)"
  187. @close="setHeat_timeVal"
  188. v-model="pre_heat_time_s"
  189. :title="pre_heat_time_s"
  190. :show="pre_heat_time_sShow"
  191. @blur="pre_heat_time_sShow = false"
  192. />
  193. <van-number-keyboard
  194. @input="val => handleInput(val, 9)"
  195. theme="custom"
  196. close-button-text="配置"
  197. @close="setstoped_humiVal"
  198. v-model="stoped_humi"
  199. :title="stoped_humi"
  200. :show="stoped_humiShow"
  201. @blur="stoped_humiShow = false"
  202. />
  203. <van-number-keyboard
  204. theme="custom"
  205. @input="val => handleInput(val, 10)"
  206. close-button-text="配置"
  207. @close="setcontinued_humiVal"
  208. v-model="continued_humi"
  209. :title="continued_humi"
  210. :show="continued_humiShow"
  211. @blur="continued_humiShow = false"
  212. />
  213. <LogPicker
  214. v-if="logVisible"
  215. :hiddenLogVisible="hiddenLogVisible"
  216. :changeLogVal="changeLogVal"
  217. :logVal="logVal"
  218. />
  219. <div class="btns">
  220. <!-- <div class="btn" @click="save">保存</div> -->
  221. <div class="btn ml" @click="hiddleSettingModal">返回</div>
  222. </div>
  223. <div class="key_wrap" v-show="showkeyboard" id="keyboard_formula">
  224. <SimpleKeyboard @onChange="onChange" :input="formula_id" />
  225. </div>
  226. </div>
  227. </template>
  228. <script setup>
  229. import { ref, onMounted, watch } from 'vue'
  230. import SimpleKeyboard from 'cpns/SimpleKeyboard'
  231. import { showSuccessToast, showFailToast } from 'vant'
  232. import {
  233. useSettingStore,
  234. useWebSocketStore,
  235. useOperatorStore,
  236. useFormulaStore,
  237. } from '@/store'
  238. import { storeToRefs } from 'pinia'
  239. import {
  240. setSettingValJSON,
  241. addFormulaJSON,
  242. getAllFormulaJSON,
  243. updateFormulaJSON,
  244. } from '@/mock/command'
  245. import LogPicker from 'cpns/dialogs/LogPicker'
  246. const settingStore = useSettingStore()
  247. const webSocketStore = useWebSocketStore()
  248. const operatorStore = useOperatorStore()
  249. const formulaStore = useFormulaStore()
  250. const max_humidity = ref('0')
  251. const continued_satur = ref(props.formulaInfo.continued_satur)
  252. const stoped_satur = ref(props.formulaInfo.stoped_satur)
  253. const continued_gs = ref(props.formulaInfo.continued_gs)
  254. const stoped_gs = ref(props.formulaInfo.stoped_gs)
  255. const addLiquidConfigVal = ref('0')
  256. const sprayLiquidConfigVal = ref(props.formulaInfo.injection_pump_speed)
  257. const stoped_humi = ref(props.formulaInfo.stoped_humi)
  258. const continued_humi = ref(props.formulaInfo.continued_humi)
  259. const pre_heat_time_s = ref('0')
  260. const pre_heat_time_sShow = ref(false)
  261. const addLiquidConfigValShow = ref(false)
  262. const sprayLiquidConfigValShow = ref(false)
  263. const stoped_gsShow = ref(false)
  264. const continued_gsShow = ref(false)
  265. const stoped_saturShow = ref(false)
  266. const continued_saturShow = ref(false)
  267. const max_humidityShow = ref(false)
  268. const stoped_humiShow = ref(false)
  269. const continued_humiShow = ref(false)
  270. const logVisible = ref(false)
  271. const logVal = ref(props.formulaInfo.loglevel)
  272. const formula_id = ref(props.formulaInfo.formula_id)
  273. watch(formula_id, (newValue, oldValue) => {
  274. if (newValue != '') {
  275. webSocketStore.sendCommandMsg(
  276. updateFormulaJSON('formula_id', newValue, props.formulaInfo.id),
  277. )
  278. }
  279. })
  280. const save = () => {
  281. if (formula_id.value == '') {
  282. showFailToast('配方名称不能为空')
  283. return
  284. }
  285. // const data = {
  286. // formula_id: formula_id.value,
  287. // loglevel: logVal.value,
  288. // injection_pump_speed: sprayLiquidConfigVal.value,
  289. // stoped_gs: stoped_gs.value,
  290. // continued_gs: continued_gs.value,
  291. // stoped_satur: stoped_satur.value,
  292. // continued_satur: continued_satur.value,
  293. // stoped_humi: stoped_humi.value,
  294. // continued_humi: continued_humi.value,
  295. // }
  296. // console.log(data)
  297. // webSocketStore.sendCommandMsg(addFormulaJSON(data))
  298. // webSocketStore.sendCommandMsg(getAllFormulaJSON)
  299. props.hideSettingModal()
  300. }
  301. const changeLogVal = val => {
  302. logVal.value = val
  303. logVisible.value = false
  304. webSocketStore.sendCommandMsg(
  305. updateFormulaJSON('loglevel', val, props.formulaInfo.id),
  306. )
  307. }
  308. const hiddenLogVisible = () => {
  309. logVisible.value = false
  310. }
  311. const showLogPicker = () => {
  312. logVisible.value = true
  313. }
  314. const isFirstClick = ref(true)
  315. const props = defineProps({
  316. hideSettingModal: {
  317. type: Function,
  318. },
  319. formulaInfo: {
  320. type: Object,
  321. },
  322. })
  323. const hiddleSettingModal = () => {
  324. webSocketStore.sendCommandMsg(getAllFormulaJSON)
  325. props.hideSettingModal()
  326. }
  327. const hideClickKey = flag => {
  328. isFirstClick.value = true
  329. stoped_humiShow.value = false
  330. continued_humiShow.value = false
  331. pre_heat_time_sShow.value = false
  332. addLiquidConfigValShow.value = false
  333. sprayLiquidConfigValShow.value = false
  334. stoped_gsShow.value = false
  335. continued_gsShow.value = false
  336. stoped_saturShow.value = false
  337. continued_saturShow.value = false
  338. max_humidityShow.value = false
  339. if (flag == 1) {
  340. addLiquidConfigValShow.value = true
  341. }
  342. if (flag == 2) {
  343. sprayLiquidConfigValShow.value = true
  344. }
  345. if (flag == 3) {
  346. stoped_gsShow.value = true
  347. }
  348. if (flag == 4) {
  349. continued_gsShow.value = true
  350. }
  351. if (flag == 5) {
  352. stoped_saturShow.value = true
  353. }
  354. if (flag == 6) {
  355. continued_saturShow.value = true
  356. }
  357. if (flag == 7) {
  358. max_humidityShow.value = true
  359. }
  360. if (flag == 8) {
  361. pre_heat_time_sShow.value = true
  362. }
  363. if (flag == 9) {
  364. stoped_humiShow.value = true
  365. }
  366. if (flag == 10) {
  367. continued_humiShow.value = true
  368. }
  369. }
  370. const handleInput = (value, index) => {
  371. if (isFirstClick.value) {
  372. if (index == 1) {
  373. setTimeout(() => {
  374. addLiquidConfigVal.value = value + ''
  375. })
  376. }
  377. if (index == 2) {
  378. setTimeout(() => {
  379. sprayLiquidConfigVal.value = value + ''
  380. })
  381. }
  382. if (index == 3) {
  383. setTimeout(() => {
  384. stoped_gs.value = value + ''
  385. })
  386. }
  387. if (index == 4) {
  388. setTimeout(() => {
  389. continued_gs.value = value + ''
  390. })
  391. }
  392. if (index == 5) {
  393. setTimeout(() => {
  394. stoped_satur.value = value + ''
  395. })
  396. }
  397. if (index == 6) {
  398. setTimeout(() => {
  399. continued_satur.value = value + ''
  400. })
  401. }
  402. if (index == 7) {
  403. setTimeout(() => {
  404. max_humidity.value = value + ''
  405. })
  406. }
  407. if (index == 8) {
  408. setTimeout(() => {
  409. pre_heat_time_s.value = value + ''
  410. })
  411. }
  412. if (index == 9) {
  413. setTimeout(() => {
  414. stoped_humi.value = value + ''
  415. })
  416. }
  417. if (index == 10) {
  418. setTimeout(() => {
  419. continued_humi.value = value + ''
  420. })
  421. }
  422. isFirstClick.value = false
  423. }
  424. }
  425. const formatter1 = value => {
  426. if (parseInt(value) == 0) {
  427. return '0'
  428. }
  429. let arr = settingStore.allSettingList.filter(item => item.name == 'stoped_gs')
  430. if (arr && arr.length > 0) {
  431. if (parseInt(value) > arr[0].val_upper_limit) {
  432. return arr[0].val_upper_limit + ''
  433. }
  434. if (parseInt(value) < arr[0].val_lower_limit) {
  435. return arr[0].val_lower_limit + ''
  436. }
  437. }
  438. if (value == '') {
  439. return '0'
  440. }
  441. return value.replace(/^0+/gi, '')
  442. }
  443. const formatter2 = value => {
  444. if (parseInt(value) == 0) {
  445. return '0'
  446. }
  447. let arr = settingStore.allSettingList.filter(
  448. item => item.name == 'continued_gs',
  449. )
  450. if (arr && arr.length > 0) {
  451. if (parseInt(value) > arr[0].val_upper_limit) {
  452. return arr[0].val_upper_limit + ''
  453. }
  454. if (parseInt(value) < arr[0].val_lower_limit) {
  455. return arr[0].val_lower_limit + ''
  456. }
  457. }
  458. if (value == '') {
  459. return '0'
  460. }
  461. return value.replace(/^0+/gi, '')
  462. }
  463. const formatter3 = value => {
  464. if (parseInt(value) == 0) {
  465. return '0'
  466. }
  467. let arr = settingStore.allSettingList.filter(
  468. item => item.name == 'stoped_satur',
  469. )
  470. if (arr && arr.length > 0) {
  471. if (parseInt(value) > arr[0].val_upper_limit) {
  472. return arr[0].val_upper_limit + ''
  473. }
  474. if (parseInt(value) < arr[0].val_lower_limit) {
  475. return arr[0].val_lower_limit + ''
  476. }
  477. }
  478. if (value == '') {
  479. return '0'
  480. }
  481. return value.replace(/^0+/gi, '')
  482. }
  483. const formatter4 = value => {
  484. if (parseInt(value) == 0) {
  485. return '0'
  486. }
  487. let arr = settingStore.allSettingList.filter(
  488. item => item.name == 'continued_satur',
  489. )
  490. if (arr && arr.length > 0) {
  491. if (parseInt(value) > arr[0].val_upper_limit) {
  492. return arr[0].val_upper_limit + ''
  493. }
  494. if (parseInt(value) < arr[0].val_lower_limit) {
  495. return arr[0].val_lower_limit + ''
  496. }
  497. }
  498. if (value == '') {
  499. return '0'
  500. }
  501. return value.replace(/^0+/gi, '')
  502. }
  503. const formatter5 = value => {
  504. if (parseInt(value) == 0) {
  505. return '0'
  506. }
  507. let arr = settingStore.allSettingList.filter(
  508. item => item.name == 'max_humidity',
  509. )
  510. if (arr && arr.length > 0) {
  511. if (parseInt(value) > arr[0].val_upper_limit) {
  512. return arr[0].val_upper_limit + ''
  513. }
  514. if (parseInt(value) < arr[0].val_lower_limit) {
  515. return arr[0].val_lower_limit + ''
  516. }
  517. }
  518. if (value == '') {
  519. return '0'
  520. }
  521. return value.replace(/^0+/gi, '')
  522. }
  523. const formatter6 = value => {
  524. if (parseInt(value) == 0) {
  525. return '0'
  526. }
  527. let arr = settingStore.allSettingList.filter(
  528. item => item.name == 'drainage_pump_speed',
  529. )
  530. if (arr && arr.length > 0) {
  531. if (parseInt(value) > arr[0].val_upper_limit) {
  532. return arr[0].val_upper_limit + ''
  533. }
  534. if (parseInt(value) < arr[0].val_lower_limit) {
  535. return arr[0].val_lower_limit + ''
  536. }
  537. }
  538. if (value == '') {
  539. return '0'
  540. }
  541. return value.replace(/^0+/gi, '')
  542. }
  543. const formatter7 = value => {
  544. if (parseInt(value) == 0) {
  545. return '0'
  546. }
  547. let arr = settingStore.allSettingList.filter(
  548. item => item.name == 'injection_pump_speed',
  549. )
  550. if (arr && arr.length > 0) {
  551. if (parseInt(value) > arr[0].val_upper_limit) {
  552. return arr[0].val_upper_limit + ''
  553. }
  554. if (parseInt(value) < arr[0].val_lower_limit) {
  555. return arr[0].val_lower_limit + ''
  556. }
  557. }
  558. if (value == '') {
  559. return '0'
  560. }
  561. return value.replace(/^0+/gi, '')
  562. }
  563. const formatter8 = value => {
  564. if (parseInt(value) == 0) {
  565. return '0'
  566. }
  567. let arr = settingStore.allSettingList.filter(
  568. item => item.name == 'pre_heat_time_s',
  569. )
  570. if (arr && arr.length > 0) {
  571. if (parseInt(value) > arr[0].val_upper_limit) {
  572. return arr[0].val_upper_limit + ''
  573. }
  574. if (parseInt(value) < arr[0].val_lower_limit) {
  575. return arr[0].val_lower_limit + ''
  576. }
  577. }
  578. if (value == '') {
  579. return '0'
  580. }
  581. return value.replace(/^0+/gi, '')
  582. }
  583. const formatter9 = value => {
  584. if (parseInt(value) == 0) {
  585. return '0'
  586. }
  587. let arr = settingStore.allSettingList.filter(
  588. item => item.name == 'stoped_humi',
  589. )
  590. if (arr && arr.length > 0) {
  591. if (parseInt(value) > arr[0].val_upper_limit) {
  592. return arr[0].val_upper_limit + ''
  593. }
  594. if (parseInt(value) < arr[0].val_lower_limit) {
  595. return arr[0].val_lower_limit + ''
  596. }
  597. }
  598. if (value == '') {
  599. return '0'
  600. }
  601. return value.replace(/^0+/gi, '')
  602. }
  603. const formatter10 = value => {
  604. if (parseInt(value) == 0) {
  605. return '0'
  606. }
  607. let arr = settingStore.allSettingList.filter(
  608. item => item.name == 'continued_humi',
  609. )
  610. if (arr && arr.length > 0) {
  611. if (parseInt(value) > arr[0].val_upper_limit) {
  612. return arr[0].val_upper_limit + ''
  613. }
  614. if (parseInt(value) < arr[0].val_lower_limit) {
  615. return arr[0].val_lower_limit + ''
  616. }
  617. }
  618. if (value == '') {
  619. return '0'
  620. }
  621. return value.replace(/^0+/gi, '')
  622. }
  623. const setAddliquidVal = () => {
  624. const val = parseInt(addLiquidConfigVal.value)
  625. if (isNaN(val)) {
  626. showFailToast('设置失败,请填写正确参数')
  627. return
  628. }
  629. }
  630. const setStopedGsVal = () => {
  631. const val = parseInt(stoped_gs.value)
  632. if (isNaN(val)) {
  633. showFailToast('设置失败,请填写正确参数')
  634. return
  635. } else {
  636. webSocketStore.sendCommandMsg(
  637. updateFormulaJSON('stoped_gs', val, props.formulaInfo.id),
  638. )
  639. }
  640. }
  641. const setcontinuedGsVal = () => {
  642. const val = parseInt(continued_gs.value)
  643. if (isNaN(val)) {
  644. showFailToast('设置失败,请填写正确参数')
  645. return
  646. } else {
  647. webSocketStore.sendCommandMsg(
  648. updateFormulaJSON('continued_gs', val, props.formulaInfo.id),
  649. )
  650. }
  651. }
  652. const setstopedSaturVal = () => {
  653. const val = parseInt(stoped_satur.value)
  654. if (isNaN(val)) {
  655. showFailToast('设置失败,请填写正确参数')
  656. return
  657. } else {
  658. webSocketStore.sendCommandMsg(
  659. updateFormulaJSON('stoped_satur', val, props.formulaInfo.id),
  660. )
  661. }
  662. }
  663. const setContinuedSaturVal = () => {
  664. const val = parseInt(continued_satur.value)
  665. if (isNaN(val)) {
  666. showFailToast('设置失败,请填写正确参数')
  667. return
  668. } else {
  669. webSocketStore.sendCommandMsg(
  670. updateFormulaJSON('continued_satur', val, props.formulaInfo.id),
  671. )
  672. }
  673. }
  674. const setMaxHumidityVal = () => {
  675. const val = parseInt(max_humidity.value)
  676. if (isNaN(val)) {
  677. showFailToast('设置失败,请填写正确参数')
  678. return
  679. }
  680. }
  681. const setHeat_timeVal = () => {
  682. const val = parseInt(pre_heat_time_s.value)
  683. if (isNaN(val)) {
  684. showFailToast('设置失败,请填写正确参数')
  685. return
  686. }
  687. }
  688. const setstoped_humiVal = () => {
  689. const val = parseInt(stoped_humi.value)
  690. if (isNaN(val)) {
  691. showFailToast('设置失败,请填写正确参数')
  692. return
  693. } else {
  694. webSocketStore.sendCommandMsg(
  695. updateFormulaJSON('stoped_humi', val, props.formulaInfo.id),
  696. )
  697. }
  698. }
  699. const setcontinued_humiVal = () => {
  700. const val = parseInt(continued_humi.value)
  701. if (isNaN(val)) {
  702. showFailToast('设置失败,请填写正确参数')
  703. return
  704. } else {
  705. webSocketStore.sendCommandMsg(
  706. updateFormulaJSON('continued_humi', val, props.formulaInfo.id),
  707. )
  708. }
  709. }
  710. const setSprayLiquidVal = () => {
  711. const val = parseInt(sprayLiquidConfigVal.value)
  712. if (isNaN(val)) {
  713. showFailToast('设置失败,请填写正确参数')
  714. return
  715. } else {
  716. webSocketStore.sendCommandMsg(
  717. updateFormulaJSON('injection_pump_speed', val, props.formulaInfo.id),
  718. )
  719. }
  720. }
  721. const showkeyboard = ref(false)
  722. const onChange = a => {
  723. console.log(a)
  724. formula_id.value = a
  725. }
  726. const handleShowKeyBoard = () => {
  727. showkeyboard.value = true
  728. }
  729. onMounted(() => {
  730. document.addEventListener('click', e => {
  731. let box = document.getElementById('keyboard_formula')
  732. let room = document.getElementById('id_formula')
  733. const arr = [
  734. 'hg-candidate-box-next',
  735. 'hg-candidate-box-btn-active',
  736. 'hg-candidate-box-prev',
  737. 'hg-candidate-box-list-item',
  738. ]
  739. if (
  740. !box?.contains(e.target) &&
  741. e.target != room &&
  742. !arr.includes(Array.from(e.target.classList)[0])
  743. ) {
  744. showkeyboard.value = false
  745. }
  746. })
  747. })
  748. </script>
  749. <style lang="scss" scoped>
  750. .update_device_container {
  751. box-sizing: border-box;
  752. width: 100%;
  753. height: 580px;
  754. display: grid;
  755. overflow: hidden;
  756. grid-template-columns: repeat(2, 1fr);
  757. row-gap: 20px;
  758. column-gap: 20px;
  759. padding: 20px;
  760. padding-bottom: 180px;
  761. position: relative;
  762. .btns {
  763. position: absolute;
  764. right: 20px;
  765. bottom: 20px;
  766. width: 300px;
  767. height: 68px;
  768. display: flex;
  769. align-items: center;
  770. justify-content: flex-end;
  771. .btn {
  772. width: 111px;
  773. height: 38px;
  774. border-radius: 19px;
  775. background: #06518b;
  776. display: flex;
  777. align-items: center;
  778. justify-content: center;
  779. font-family: Source Han Sans CN;
  780. font-size: 14px;
  781. font-weight: normal;
  782. line-height: normal;
  783. letter-spacing: 0.1em;
  784. color: #ffffff;
  785. }
  786. .ml {
  787. margin-left: 20px;
  788. }
  789. }
  790. .row_wrap {
  791. // width: 726px;
  792. height: 80px;
  793. border-radius: 14px;
  794. background: #f6f6f6;
  795. box-sizing: border-box;
  796. padding: 0 18px 0 40px;
  797. display: flex;
  798. align-items: center;
  799. justify-content: space-between;
  800. .title {
  801. font-family: Zona Pro;
  802. white-space: nowrap;
  803. font-size: 20px;
  804. font-weight: normal;
  805. letter-spacing: 0.06em;
  806. color: #000000;
  807. }
  808. .num {
  809. font-family: Source Han Sans CN;
  810. font-size: 14px;
  811. font-weight: 500;
  812. letter-spacing: 0.1em;
  813. color: #000000;
  814. display: flex;
  815. align-items: center;
  816. .log {
  817. width: 182px;
  818. display: flex;
  819. align-items: center;
  820. justify-content: center;
  821. }
  822. }
  823. .formula_input {
  824. border: none;
  825. height: 38px;
  826. padding: 0 12px;
  827. width: 220px;
  828. }
  829. .btn {
  830. width: 87px;
  831. height: 45px;
  832. border-radius: 23px;
  833. background: #06518b;
  834. font-family: Source Han Sans CN;
  835. font-size: 14px;
  836. font-weight: normal;
  837. letter-spacing: 0.1em;
  838. color: #ffffff;
  839. display: flex;
  840. align-items: center;
  841. justify-content: center;
  842. }
  843. }
  844. .key_wrap {
  845. position: absolute;
  846. right: 97px;
  847. bottom: 0;
  848. height: 245px;
  849. width: 520px;
  850. }
  851. }
  852. </style>