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

124 lines
3.2 KiB

2 years ago
  1. <template>
  2. <div class="clear_audit_modal_container">
  3. <div class="modal_content">
  4. <svg
  5. xmlns="http://www.w3.org/2000/svg"
  6. xmlns:xlink="http://www.w3.org/1999/xlink"
  7. fill="none"
  8. version="1.1"
  9. width="69"
  10. height="69"
  11. viewBox="0 0 69 69"
  12. >
  13. <g>
  14. <path
  15. d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
  16. fill="#FA1C1C"
  17. fill-opacity="1"
  18. />
  19. </g>
  20. </svg>
  21. <p class="tips">
  22. <span class="red">确定要清空所有审计吗</span>
  23. </p>
  24. <div class="btns">
  25. <div class="ok style-btn" @click="handleStart">确定</div>
  26. <div class="cancel style-btn" @click="handleCancel">取消</div>
  27. </div>
  28. </div>
  29. </div>
  30. </template>
  31. <script setup>
  32. import { useWebSocketStore } from '@/store'
  33. import { cleanDisinfectionRecordJSON } from '@/mock/command'
  34. const webSocketStore = useWebSocketStore()
  35. const props = defineProps({
  36. hideAuditModal: {
  37. type: Function,
  38. },
  39. })
  40. const handleCancel = () => {
  41. props.hideAuditModal()
  42. }
  43. const handleStart = () => {
  44. webSocketStore.sendCommandMsg(cleanDisinfectionRecordJSON)
  45. props.hideAuditModal()
  46. }
  47. </script>
  48. <style lang="scss" scoped>
  49. .clear_audit_modal_container {
  50. position: fixed;
  51. top: 0;
  52. left: 0;
  53. right: 0;
  54. bottom: 0;
  55. background: rgba(0, 0, 0, 0.5);
  56. z-index: 2;
  57. display: flex;
  58. align-items: center;
  59. justify-content: center;
  60. .modal_content {
  61. width: 476px;
  62. height: 350px;
  63. border-radius: 16px;
  64. background: #ffffff;
  65. padding: 52px 37px 55px 37px;
  66. box-sizing: border-box;
  67. display: flex;
  68. flex-direction: column;
  69. align-items: center;
  70. .tips {
  71. margin-top: 33px;
  72. margin-bottom: 50px;
  73. font-family: Source Han Sans CN;
  74. font-size: 21px;
  75. font-weight: normal;
  76. letter-spacing: 0.04em;
  77. color: #000000;
  78. .red {
  79. color: #fa1c1c;
  80. }
  81. }
  82. .btns {
  83. display: flex;
  84. align-items: center;
  85. justify-content: space-between;
  86. width: 362px;
  87. .cancel {
  88. width: 173px;
  89. height: 68px;
  90. border-radius: 34px;
  91. background: #06518b;
  92. font-family: Source Han Sans CN;
  93. font-size: 23px;
  94. font-weight: 350;
  95. letter-spacing: 0em;
  96. color: #ffffff;
  97. display: flex;
  98. align-items: center;
  99. justify-content: center;
  100. }
  101. .ok {
  102. width: 173px;
  103. height: 68px;
  104. border-radius: 34px;
  105. background: #1f6397;
  106. font-family: Source Han Sans CN;
  107. font-size: 23px;
  108. font-weight: 350;
  109. letter-spacing: 0em;
  110. color: #ffffff;
  111. display: flex;
  112. align-items: center;
  113. justify-content: center;
  114. }
  115. }
  116. }
  117. }
  118. </style>