waterUnit.vue 7.8 KB

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