auditTable.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <template>
  2. <div class='detailTable' style='width: 767px'>
  3. <!-- <el-table :data='tableList' border>
  4. <el-table-column prop='title' label width='95'></el-table-column>
  5. <el-table-column prop label='冷机开启台数' align='center' width>
  6. <template slot-scope='{row}'>
  7. <font :class='row.chillerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(row.chillerNumSetLOrg,true,0)}}</font>
  8. <font :class='row.chillerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(row.chillerNumSetSOrg,true,0)}}</font>
  9. </template>
  10. </el-table-column>
  11. <el-table-column prop label='冷机出水温度' align='center' width>
  12. <template slot-scope='{row}'>
  13. <font :class='row.chillWaterOutTempSetOrg=="-9999"?"reds":""'>{{formatterRes(parseInt(row.chillWaterOutTempSetOrg),false,1)}}</font>
  14. </template>
  15. </el-table-column>
  16. <el-table-column prop label='冷冻泵台数' align='center' width>
  17. <template slot-scope='{row}'>
  18. <font :class='row.coolPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(row.coolPumpNumSetLOrg,true,1)}}</font>
  19. <font :class='row.coolPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(row.coolPumpNumSetSOrg,true,0)}}</font>
  20. </template>
  21. </el-table-column>
  22. <el-table-column prop label='冷冻泵频率' align='center' width>
  23. <template slot-scope='{row}'>
  24. <font :class='row.coolPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(row.coolPumpFreqSetOrg,false,0)}}</font>
  25. HZ
  26. </template>
  27. </el-table-column>
  28. <el-table-column prop label='冷却泵台数' align='center' width>
  29. <template slot-scope='{row}'>
  30. <font :class='row.chillPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(row.chillPumpNumSetLOrg,true,0)}}</font>
  31. <font :class='row.chillPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(row.chillPumpNumSetSOrg,true,0)}}</font>
  32. </template>
  33. </el-table-column>
  34. <el-table-column prop label='冷却泵频率' align='center' width>
  35. <template slot-scope='{row}'>
  36. <font :class='row.chillPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(row.chillPumpFreqSetOrg,false,0)}}</font>
  37. HZ
  38. </template>
  39. </el-table-column>
  40. <el-table-column prop label='冷却塔台数' align='center' width>
  41. <template slot-scope='{row}'>
  42. <font :class='row.coolTowerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(row.coolTowerNumSetSOrg,true,0)}}</font>
  43. <font :class='row.coolTowerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(row.coolTowerNumSetLOrg,true,0)}}</font>
  44. </template>
  45. </el-table-column>
  46. <el-table-column prop='zip' label='冷却塔频率' align='center' width>
  47. <template slot-scope='{row}'>
  48. <font :class='row.coolTowerFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(row.coolTowerFreqSetOrg,false,0)}}</font>
  49. HZ
  50. </template>
  51. </el-table-column>
  52. <el-table-column prop label='室内平均温度' align='center' width>
  53. <template slot-scope='{row}'>
  54. <font :class='row.meanTindoor=="-9999"?"reds":""'>{{formatterRes(row.meanTindoor,false,1)}}</font>
  55. </template>
  56. </el-table-column>
  57. <el-table-column prop label='室内最高温度' align='center' width>
  58. <template slot-scope='{row}'>
  59. <font :class='row.maxTindoor=="-9999"?"reds":""'>{{formatterRes(row.maxTindoor,false,1)}}</font>
  60. </template>
  61. </el-table-column>
  62. <el-table-column prop label='冷机负载率' align='center' width>
  63. <template slot-scope='{row}'>
  64. <font
  65. :class='parseInt(row.plrAllOrg)=="-9999"?"reds":""'
  66. >{{(row.plrAllOrg==undefined)?'--':(parseInt(row.plrAllOrg)=='-9999'?'x':(parseInt(row.plrAllOrg)=='-9998'?'--':parseInt(row.plrAllOrg)))}}</font>
  67. HZ
  68. </template>
  69. </el-table-column>
  70. </el-table>-->
  71. <div class='detail-box'>
  72. <div class='detail-box-top'>
  73. <div style='width:100px;diplay:inline-block;'></div>
  74. <span style='width:75px;text-align:center'>
  75. 冷机
  76. <br />开启台数
  77. </span>
  78. <span style='width:75px;text-align:center'>
  79. 冷机
  80. <br />出水温度
  81. </span>
  82. <span style='width:70px;text-align:center'>
  83. 冷冻泵
  84. <br />台数
  85. </span>
  86. <span style='width:60px;text-align:center'>
  87. 冷冻泵
  88. <br />频率
  89. </span>
  90. <span style='width:70px;text-align:center'>
  91. 冷却泵
  92. <br />台数
  93. </span>
  94. <span style='width:60px;text-align:center'>
  95. 冷却泵
  96. <br />频率
  97. </span>
  98. <span style='width:70px;text-align:center'>
  99. 冷却塔
  100. <br />台数
  101. </span>
  102. <span style='width:60px;text-align:center'>
  103. 冷却塔
  104. <br />频率
  105. </span>
  106. <span style='width:75px;text-align:center'>
  107. 室内
  108. <br />平均温度
  109. </span>
  110. <span style='width:75px;text-align:center'>
  111. 室内
  112. <br />最高温度
  113. </span>
  114. <span style='width:60px;text-align:center'>
  115. 冷机
  116. <br />负载率
  117. </span>
  118. </div>
  119. <div class='detail-box-bottom' Î>
  120. <div class='detail-box-bottom-box' v-for='(item,index) in tableList' :key='index'>
  121. <span
  122. style='width:100px;font-size:12px;background:rgba(248,249,250,1);color:rgba(100,106,115,1);diplay:inline-block;text-align: center;'
  123. >{{item.title}}</span>
  124. <span style='width:75px;text-align:center'>
  125. <font :class='item.chillerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(item.chillerNumSetLOrg,true,0)}}</font>大
  126. <font :class='item.chillerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(item.chillerNumSetSOrg,true,0)}}</font>小
  127. </span>
  128. <span style='width:75px;text-align:center'>
  129. <font
  130. :class='item.chillWaterOutTempSetOrg=="-9999"?"reds":""'
  131. >{{formatterRes(parseInt(item.chillWaterOutTempSetOrg),false,1)}}</font>℃
  132. </span>
  133. <span style='width:70px;text-align:center'>
  134. <font :class='item.coolPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(item.coolPumpNumSetLOrg,true,1)}}</font>大
  135. <font :class='item.coolPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(item.coolPumpNumSetSOrg,true,0)}}</font>小
  136. </span>
  137. <span style='width:60px;text-align:center'>
  138. <font :class='item.coolPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(item.coolPumpFreqSetOrg,false,0)}}</font>Hz
  139. </span>
  140. <span style='width:70px;text-align:center'>
  141. <font :class='item.chillPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(item.chillPumpNumSetLOrg,true,0)}}</font>大
  142. <font :class='item.chillPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(item.chillPumpNumSetSOrg,true,0)}}</font>小
  143. </span>
  144. <span style='width:60px;text-align:center'>
  145. <font :class='item.chillPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(item.chillPumpFreqSetOrg,false,0)}}</font>Hz
  146. </span>
  147. <span style='width:70px;text-align:center'>
  148. <font :class='item.coolTowerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(item.coolTowerNumSetSOrg,true,0)}}</font>大
  149. <font :class='item.coolTowerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(item.coolTowerNumSetLOrg,true,0)}}</font>小
  150. </span>
  151. <span style='width:60px;text-align:center'>
  152. <font :class='item.coolTowerFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(item.coolTowerFreqSetOrg,false,0)}}</font>Hz
  153. </span>
  154. <span style='width:75px;text-align:center'>
  155. <font :class='item.meanTindoor=="-9999"?"reds":""'>{{formatterRes(item.meanTindoor,false,1)}}</font>℃
  156. </span>
  157. <span style='width:75px;text-align:center'>
  158. <font :class='item.maxTindoor=="-9999"?"reds":""'>{{formatterRes(item.maxTindoor,false,1)}}</font>℃
  159. </span>
  160. <span style='width:60px;text-align:center'>
  161. <font
  162. :class='parseInt(item.plrAllOrg)=="-9999"?"reds":""'
  163. >{{(item.plrAllOrg==undefined)?'--':(parseInt(item.plrAllOrg)=='-9999'?'x':(parseInt(item.plrAllOrg)=='-9998'?'--':parseInt(item.plrAllOrg)))}}</font>Hz
  164. </span>
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </template>
  170. <script>
  171. export default {
  172. data() {
  173. return {}
  174. },
  175. props: ['tableList'],
  176. mounted() {
  177. console.log(this.tableList)
  178. },
  179. methods: {
  180. formatterRes(res, type, num) {
  181. if (res == '-9999') {
  182. return 'x'
  183. } else if (res == '-9998') {
  184. if (type) {
  185. return 0
  186. } else {
  187. return '--'
  188. }
  189. } else {
  190. if (res != undefined) {
  191. console.log(res)
  192. res = res.toFixed(num)
  193. } else {
  194. return '--'
  195. }
  196. return res
  197. }
  198. }
  199. }
  200. }
  201. </script>
  202. <style lang="scss" scoped>
  203. .detailTable {
  204. .reds {
  205. color: #f54e45;
  206. }
  207. margin: 0 auto;
  208. .el-table {
  209. font-size: 12px;
  210. }
  211. .el-table th {
  212. padding: 6px 0;
  213. font-size: 12px;
  214. }
  215. .el-table td {
  216. padding: 8px 0;
  217. }
  218. .el-table th > .cell {
  219. padding-right: 2px;
  220. padding-left: 2px;
  221. }
  222. .detail-box {
  223. // width: 100%;
  224. .detail-box-top {
  225. // width: 762px;
  226. height: 48px;
  227. background: rgba(248, 249, 250, 1);
  228. display: flex;
  229. border-bottom: 1px solid #eee;
  230. span {
  231. display: inline-block;
  232. font-size: 12px;
  233. font-family: MicrosoftYaHei;
  234. color: rgba(100, 106, 115, 1);
  235. line-height: 16px;
  236. padding: 8px 5px;
  237. }
  238. }
  239. .detail-box-bottom {
  240. // width:92px;
  241. height: 123px;
  242. background: rgba(255, 255, 255, 1);
  243. font-size: 12px;
  244. font-family: MicrosoftYaHei;
  245. color: rgba(31, 36, 41, 1);
  246. .detail-box-bottom-box {
  247. display: flex;
  248. border-bottom: 1px solid #eee;
  249. span {
  250. padding: 12px 5px;
  251. display: inline-block;
  252. }
  253. }
  254. }
  255. }
  256. }
  257. </style>
  258. <style lang="scss">
  259. .detailTable {
  260. .el-table__header,
  261. table {
  262. width: auto !important;
  263. }
  264. .el-table_tbody {
  265. width: auto !important;
  266. }
  267. }
  268. </style>