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

163 lines
4.1 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. <template>
  2. <div class="environment_container">
  3. <div class="top_title">
  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="27.99883270263672"
  10. height="28"
  11. viewBox="0 0 27.99883270263672 28"
  12. >
  13. <g>
  14. <path
  15. d="M13.9988,0C6.26685,0,0,6.26801,0,14.0006C0,21.732,6.26685,28,13.9988,28C21.732,28,27.9988,21.7314,27.9988,14.0006C27.9988,6.26685,21.732,0,13.9988,0ZM13.33,2.65902L15.1101,2.65902L15.1101,6.15218L13.33,6.15218L13.33,2.65902ZM8.00499,9.19305L5.53515,6.72263L6.79364,5.46414L9.26348,7.93456L8.00499,9.19305ZM8.88395,3.93963L10.494,3.18872L11.9708,6.35358L10.359,7.10565L8.88395,3.93963ZM14.2439,24.2036C12.6961,24.2036,11.4428,22.9486,11.4428,21.4025C11.4428,20.1929,12.2083,19.1673,13.2823,18.7744L13.2823,10.7833L15.0606,10.7833L15.0606,18.722C16.2085,19.0706,17.0455,20.1382,17.0455,21.4031C17.0455,22.9486,15.7917,24.2036,14.2439,24.2036ZM16.3295,6.35009L17.8063,3.18407L19.4182,3.93672L17.9431,7.10274L16.3295,6.35009ZM20.2412,9.19305L18.9827,7.93456L21.4526,5.46414L22.7111,6.72263L20.2412,9.19305Z"
  16. fill="#FFFFFF"
  17. fill-opacity="1"
  18. />
  19. </g>
  20. </svg>
  21. <p class="title">{{ getTitle() }}</p>
  22. </div>
  23. <div class="content">
  24. <div class="line">
  25. <p class="title">{{ props.cardType == 1 ? '仓内' : '环境' }}温度</p>
  26. <p class="num">{{ getTemperature() }}</p>
  27. </div>
  28. <div class="line">
  29. <p class="title">{{ props.cardType == 1 ? '仓内' : '环境' }}湿度</p>
  30. <p class="num">{{ getHumidity() }}</p>
  31. </div>
  32. <div class="line">
  33. <p class="title">
  34. {{ props.cardType == 1 ? '仓内' : '环境' }}过氧化氢浓度
  35. </p>
  36. <p class="num">{{ getHP() }} PPM</p>
  37. </div>
  38. </div>
  39. </div>
  40. </template>
  41. <script setup>
  42. import { useDeviceStore } from '@/store'
  43. import { storeToRefs } from 'pinia'
  44. const deviceStore = useDeviceStore()
  45. const {
  46. binTemperature,
  47. binHumidity,
  48. binHP,
  49. envirTemperature1,
  50. envirHumidity1,
  51. envirHP1,
  52. envirTemperature2,
  53. envirHumidity2,
  54. envirHP2,
  55. } = storeToRefs(deviceStore)
  56. const props = defineProps({
  57. cardType: {
  58. type: Number,
  59. },
  60. })
  61. const getTitle = () => {
  62. if (props.cardType == 1) {
  63. return '仓内'
  64. }
  65. if (props.cardType == 2) {
  66. return '环境1'
  67. }
  68. if (props.cardType == 3) {
  69. return '环境2'
  70. }
  71. return ''
  72. }
  73. const getTemperature = () => {
  74. if (props.cardType == 1) {
  75. return binTemperature
  76. }
  77. if (props.cardType == 2) {
  78. return envirTemperature1
  79. }
  80. if (props.cardType == 3) {
  81. return envirTemperature2
  82. }
  83. }
  84. const getHumidity = () => {
  85. if (props.cardType == 1) {
  86. return binHumidity
  87. }
  88. if (props.cardType == 2) {
  89. return envirHumidity1
  90. }
  91. if (props.cardType == 3) {
  92. return envirHumidity2
  93. }
  94. }
  95. const getHP = () => {
  96. if (props.cardType == 1) {
  97. return binHP
  98. }
  99. if (props.cardType == 2) {
  100. return envirHP1
  101. }
  102. if (props.cardType == 3) {
  103. return envirHP2
  104. }
  105. }
  106. </script>
  107. <style lang="scss" scoped>
  108. .environment_container {
  109. width: 353px;
  110. height: 225px;
  111. box-sizing: border-box;
  112. overflow: hidden;
  113. border-radius: 17.5px;
  114. .top_title {
  115. padding: 15px 16px;
  116. display: flex;
  117. align-items: center;
  118. .title {
  119. font-family: Source Han Sans CN;
  120. font-size: 24px;
  121. font-weight: 500;
  122. letter-spacing: 0.1em;
  123. margin-left: 8px;
  124. color: #ffffff;
  125. }
  126. }
  127. .content {
  128. .line {
  129. padding: 14px 26px;
  130. width: 353px;
  131. height: 56px;
  132. box-sizing: border-box;
  133. display: flex;
  134. align-items: center;
  135. justify-content: space-between;
  136. &:nth-child(odd) {
  137. background: #1f6397;
  138. }
  139. .title {
  140. font-family: Source Han Sans CN;
  141. font-size: 16px;
  142. font-weight: normal;
  143. letter-spacing: 0.06em;
  144. color: #ffffff;
  145. }
  146. .num {
  147. font-family: Source Han Sans CN;
  148. font-size: 20px;
  149. font-weight: bold;
  150. letter-spacing: 0.06em;
  151. color: #ffffff;
  152. }
  153. }
  154. }
  155. }
  156. </style>