waterUnit.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <template>
  2. <div class='water-unit'>
  3. <div class='strate-right-box-1' :class='type==2?"content1":""'>
  4. <div class='starte-right-box-1-title' :class='type==2?"title1":""'>冷水机组</div>
  5. <div class='starte-right-box-1-content1' v-if='data'>
  6. <p>
  7. <font v-if='type==1' :class='data.chillerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(data.chillerNumSetLOrg,true,0)}}</font>
  8. <font v-if='type==2' :class='data.chillerNumSetL=="-9999"?"reds":""'>{{formatterRes(data.chillerNumSetL,true,0)}}</font>
  9. </p>
  10. <p>
  11. <font v-if='type==1' :class='data.chillerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(data.chillerNumSetSOrg,true,0)}}</font>
  12. <font v-if='type==2' :class='data.chillerNumSetS=="-9999"?"reds":""'>{{formatterRes(data.chillerNumSetS,true,0)}}</font>
  13. </p>
  14. <p>
  15. <font
  16. v-if='type==1'
  17. :class='data.chillWaterOutTempSetOrg=="-9999"?"reds":""'
  18. >{{formatterRes(data.chillWaterOutTempSetOrg,true,1)}}</font>
  19. <font v-if='type==2' :class='data.chillWaterOutTempSet=="-9999"?"reds":""'>{{formatterRes(data.chillWaterOutTempSet,true,1)}}</font>
  20. <font style='font-size:12px;'>℃</font>
  21. </p>
  22. </div>
  23. <div class='starte-right-box-1-content'>
  24. <p>大</p>
  25. <p>小</p>
  26. <p>供水温度设定</p>
  27. </div>
  28. </div>
  29. <div class='strate-right-box-1' :class='type==2?"content1":""'>
  30. <div class='starte-right-box-1-title' :class='type==2?"title1":""'>冷冻水泵</div>
  31. <div class='starte-right-box-1-content1' v-if='data'>
  32. <p>
  33. <font v-if='type==1' :class='data.coolPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(data.coolPumpNumSetLOrg ,true,0)}}</font>
  34. <font v-if='type==2' :class='data.coolPumpNumSetL=="-9999"?"reds":""'>{{formatterRes(data.coolPumpNumSetL,true,0)}}</font>
  35. </p>
  36. <p>
  37. <font v-if='type==1' :class='data.coolPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(data.coolPumpNumSetSOrg,true,0)}}</font>
  38. <font v-if='type==2' :class='data.coolPumpNumSetS=="-9999"?"reds":""'>{{formatterRes(data.coolPumpNumSetS,true,0)}}</font>
  39. </p>
  40. <p>
  41. <font v-if='type==1' :class='data.coolPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(data.coolPumpFreqSetOrg,false,0)}}</font>
  42. <font v-if='type==2' :class='data.coolPumpFreqSet=="-9999"?"reds":""'>{{formatterRes(data.coolPumpFreqSet,false,0)}}</font>
  43. <font style='font-size:12px;'>Hz</font>
  44. </p>
  45. </div>
  46. <div class='starte-right-box-1-content'>
  47. <p>大</p>
  48. <p>小</p>
  49. <p>{{type==2?'运行频率设定':'运行频率'}}</p>
  50. </div>
  51. </div>
  52. <div class='strate-right-box-1' :class='type==2?"content1":""'>
  53. <div class='starte-right-box-1-title' :class='type==2?"title1":""'>冷却水泵</div>
  54. <div class='starte-right-box-1-content1' v-if='data'>
  55. <p>
  56. <font v-if='type==1' :class='data.chillPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(data.chillPumpNumSetLOrg,true,0)}}</font>
  57. <font v-if='type==2' :class='data.chillPumpNumSetL=="-9999"?"reds":""'>{{formatterRes(data.chillPumpNumSetL,true,0)}}</font>
  58. </p>
  59. <p>
  60. <font v-if='type==1' :class='data.chillPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(data.chillPumpNumSetSOrg,true,0)}}</font>
  61. <font v-if='type==2' :class='data.chillPumpNumSetS=="-9999"?"reds":""'>{{formatterRes(data.chillPumpNumSetS,true,0)}}</font>
  62. </p>
  63. <p>
  64. <font v-if='type==1' :class='data.chillPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(data.chillPumpFreqSetOrg,false,0)}}</font>
  65. <font v-if='type==2' :class='data.chillPumpFreqSet=="-9999"?"reds":""'>{{formatterRes(data.chillPumpFreqSet,false,0)}}</font>
  66. <font style='font-size:12px;'>Hz</font>
  67. </p>
  68. </div>
  69. <div class='starte-right-box-1-content'>
  70. <p>大</p>
  71. <p>小</p>
  72. <p>{{type==2?'运行频率设定':'运行频率'}}</p>
  73. </div>
  74. </div>
  75. <div class='strate-right-box-1' :class='type==2?"content1":""'>
  76. <div class='starte-right-box-1-title' :class='type==2?"title1":""'>冷却塔</div>
  77. <div class='starte-right-box-1-content1' v-if='data'>
  78. <p>
  79. <font v-if='type==1' :class='data.coolTowerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(data.coolTowerNumSetLOrg,true,0)}}</font>
  80. <font v-if='type==2' :class='data.coolTowerNumSetL=="-9999"?"reds":""'>{{formatterRes(data.coolTowerNumSetL,true,0)}}</font>
  81. </p>
  82. <p>
  83. <font v-if='type==1' :class='data.coolTowerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(data.coolTowerNumSetSOrg,true,0)}}</font>
  84. <font v-if='type==2' :class='data.coolTowerNumSetS=="-9999"?"reds":""'>{{formatterRes(data.coolTowerNumSetS,true,0)}}</font>
  85. </p>
  86. <p>
  87. <font v-if='type==1' :class='data.coolTowerFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(data.coolTowerFreqSetOrg,false,0)}}</font>
  88. <font v-if='type==2' :class='data.coolTowerFreqSet=="-9999"?"reds":""'>{{formatterRes(data.coolTowerFreqSet,false,0)}}</font>
  89. <font style='font-size:12px;'>Hz</font>
  90. </p>
  91. </div>
  92. <div class='starte-right-box-1-content'>
  93. <p>大</p>
  94. <p>小</p>
  95. <p>{{type==2?'运行频率设定':'运行频率'}}</p>
  96. </div>
  97. </div>
  98. </div>
  99. </template>
  100. <script>
  101. export default {
  102. data() {
  103. return {}
  104. },
  105. props: ['data', 'type'],
  106. methods: {
  107. formatterRes(res, type, num) {
  108. if (res == '-9999') {
  109. return 'x'
  110. } else if (res == '-9998') {
  111. if (type) {
  112. return 0
  113. } else {
  114. return '--'
  115. }
  116. } else {
  117. if (res != undefined) {
  118. res = res.toFixed(num)
  119. } else {
  120. return '--'
  121. }
  122. return res
  123. }
  124. }
  125. }
  126. }
  127. </script>
  128. <style lang='scss' scoped>
  129. .water-unit {
  130. .reds {
  131. color: #f54e45;
  132. }
  133. display: flex;
  134. justify-content: space-between;
  135. .content1 {
  136. background: rgba(0, 145, 255, 1);
  137. color: #fff;
  138. }
  139. .strate-right-box-1 {
  140. flex: 1;
  141. border-radius: 6px;
  142. border: 1px solid rgba(238, 238, 238, 1);
  143. margin-right: 18px;
  144. &:last-of-type {
  145. margin-right: 0;
  146. }
  147. .starte-right-box-1-title {
  148. padding-left: 28px;
  149. height: 56px;
  150. line-height: 56px;
  151. font-size: 16px;
  152. background: rgba(248, 249, 250, 1);
  153. color: #1f2429;
  154. }
  155. .title1 {
  156. color: #fff;
  157. background: rgba(0, 124, 219, 1);
  158. }
  159. p {
  160. padding: 0;
  161. margin: 0;
  162. }
  163. .starte-right-box-1-content1 {
  164. display: flex;
  165. font-size: 24px;
  166. justify-content: space-evenly;
  167. margin-top: 11px;
  168. p {
  169. width: 35%;
  170. text-align: center;
  171. }
  172. p:nth-of-type(1),
  173. p:nth-of-type(2) {
  174. width: 15%;
  175. text-align: center;
  176. }
  177. }
  178. .starte-right-box-1-content {
  179. display: flex;
  180. font-size: 14px;
  181. margin-top: 4px;
  182. margin-bottom: 14px;
  183. justify-content: space-evenly;
  184. p {
  185. width: 35%;
  186. text-align: center;
  187. }
  188. p:nth-of-type(1),
  189. p:nth-of-type(2) {
  190. width: 15%;
  191. text-align: center;
  192. }
  193. }
  194. }
  195. }
  196. </style>