evCard.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <div class="count-card-box">
  3. <div class="count-card" v-for="(item,index) in cardList" :key="index">
  4. <div class="card-div1">执行时间:{{item.recommend?formatterStr2(item.recommend.time):'--'}}</div>
  5. <div class="card-div2 MicrYaHei">
  6. <span>策略建议</span>
  7. <span>冷机台数</span>
  8. <span>{{item.recommend?item.recommend.chillerNumSetL:'--'}}大{{item.recommend?item.recommend.chillerNumSetS:'--'}}小</span>
  9. <span>冷机出水温度</span>
  10. <span>{{item.recommend?item.recommend.chillWaterOutTempSet:'--'}}°C</span>
  11. </div>
  12. <div class="card-div3 MicrYaHei">
  13. <span>实际执行</span>
  14. <span>冷机台数</span>
  15. <span>{{item.real?item.real.chillerNumSetLOrg:'--'}}大{{item.real?item.real.chillerNumSetSOrg:'--'}}小</span>
  16. <span>冷机出水温度</span>
  17. <span>{{item.real?item.real.chillWaterOutTempSetOrg:'--'}}°C</span>
  18. </div>
  19. <div class="card-div4">备注:{{item.h||'--'}}</div>
  20. <div class="card-div5">
  21. <span class="card-div7" v-if="item.recommend.isExecuted==true">
  22. <img src="../../assets/completed.png" alt />
  23. 已按策略执行
  24. </span>
  25. <span class="card-div6" v-else>
  26. <img src="../../assets/error.png" alt />
  27. 未按策略执行
  28. </span>
  29. <!-- <span class="card-div8">
  30. <img src="../../assets/processing.png" alt />
  31. 申诉中
  32. </span>-->
  33. <span class="MicrYaHei" @click="viewSnapshots = true">查看快照</span>
  34. </div>
  35. </div>
  36. <div class="view-dialog">
  37. <el-dialog
  38. title="策略推出时状况"
  39. :visible.sync="viewSnapshots"
  40. :close-on-click-modal="false"
  41. width="1260px"
  42. >
  43. <ev-snapshots-dialog></ev-snapshots-dialog>
  44. </el-dialog>
  45. </div>
  46. </div>
  47. </template>
  48. <script>
  49. import EvSnapshotsDialog from "./evSnapshotsDialog";
  50. export default {
  51. data() {
  52. return {
  53. viewSnapshots: false
  54. };
  55. },
  56. props: ["cardList"],
  57. components: {
  58. EvSnapshotsDialog
  59. },
  60. methods: {
  61. formatterStr2(str) {
  62. if (str) {
  63. return str.substring(0, 2) + ":" + str.substring(2, 4);
  64. }
  65. }
  66. }
  67. };
  68. </script>
  69. <style lang="scss" scoped>
  70. // 执行率
  71. .count-card-box {
  72. display: flex;
  73. flex-wrap: wrap;
  74. .count-card {
  75. min-width: 436px;
  76. margin-right: 6px;
  77. margin-top: 16px;
  78. padding: 16px 20px;
  79. background: rgba(255, 255, 255, 1);
  80. box-shadow: 0px 4px 12px -2px rgba(31, 36, 41, 0.1);
  81. border-radius: 4px;
  82. border: 1px solid rgba(228, 230, 231, 1);
  83. .card-div1,
  84. .card-div2,
  85. .card-div3,
  86. .card-div4,
  87. .card-div5 {
  88. display: flex;
  89. justify-content: space-between;
  90. align-items: center;
  91. }
  92. .card-div1 {
  93. height: 22px;
  94. font-size: 16px;
  95. font-family: PingFangSC-Regular, PingFang SC;
  96. font-weight: 400;
  97. color: rgba(31, 36, 41, 1);
  98. line-height: 22px;
  99. margin-bottom: 14px;
  100. }
  101. .card-div2,
  102. .card-div3 {
  103. height: 40px;
  104. background: rgba(245, 246, 247, 1);
  105. border-radius: 1px;
  106. padding-left: 16px;
  107. padding-right: 34px;
  108. span:nth-of-type(1) {
  109. height: 19px;
  110. font-size: 14px;
  111. color: rgba(31, 36, 41, 1);
  112. line-height: 19px;
  113. margin-right: 36px;
  114. }
  115. span:nth-of-type(2) {
  116. height: 18px;
  117. font-size: 12px;
  118. color: rgba(141, 147, 153, 1);
  119. line-height: 22px;
  120. margin-right: 8px;
  121. }
  122. span:nth-of-type(3) {
  123. height: 19px;
  124. font-size: 14px;
  125. color: rgba(31, 36, 41, 1);
  126. line-height: 19px;
  127. margin-right: 36px;
  128. }
  129. span:nth-of-type(4) {
  130. height: 18px;
  131. font-size: 12px;
  132. color: rgba(141, 147, 153, 1);
  133. line-height: 22px;
  134. margin-right: 8px;
  135. }
  136. span:nth-of-type(5) {
  137. height: 21px;
  138. font-size: 16px;
  139. color: rgba(31, 36, 41, 1);
  140. line-height: 21px;
  141. }
  142. }
  143. .card-div2 {
  144. margin-bottom: 4px;
  145. }
  146. .card-div3 {
  147. margin-bottom: 16px;
  148. }
  149. .card-div4 {
  150. height: 20px;
  151. font-size: 14px;
  152. font-family: PingFangSC-Regular, PingFang SC;
  153. font-weight: 400;
  154. color: rgba(100, 108, 115, 1);
  155. line-height: 20px;
  156. margin-bottom: 26px;
  157. }
  158. .card-div5 {
  159. span:nth-of-type(1) {
  160. img {
  161. width: 14px;
  162. height: 14px;
  163. margin-right: 4px;
  164. }
  165. padding: 0 12px;
  166. display: flex;
  167. align-items: center;
  168. height: 22px;
  169. border-radius: 12px;
  170. font-size: 14px;
  171. font-family: MicrosoftYaHeiSemibold;
  172. }
  173. span:nth-of-type(2) {
  174. cursor: pointer;
  175. height: 22px;
  176. font-size: 14px;
  177. color: rgba(31, 35, 41, 1);
  178. line-height: 22px;
  179. background: rgba(255, 255, 255, 1);
  180. border-radius: 4px;
  181. border: 1px solid rgba(195, 199, 203, 1);
  182. padding: 0 12px;
  183. }
  184. }
  185. .card-div6 {
  186. color: rgba(245, 78, 69, 1);
  187. background: rgba(253, 227, 226, 1);
  188. }
  189. .card-div7 {
  190. color: rgba(52, 199, 36, 1);
  191. background: rgba(217, 245, 214, 1);
  192. }
  193. .card-div8 {
  194. color: rgba(0, 145, 255, 1);
  195. background: rgba(225, 242, 255, 1);
  196. }
  197. }
  198. }
  199. </style>
  200. <style lang="scss">
  201. .view-dialog {
  202. .el-dialog__header {
  203. padding: 16px 28px 0 32px;
  204. .el-dialog__title {
  205. height: 24px;
  206. font-size: 16px;
  207. font-family: PingFangSC-Medium, PingFang SC;
  208. font-weight: 500;
  209. color: rgba(31, 36, 41, 1);
  210. line-height: 24px;
  211. }
  212. }
  213. .el-dialog__body {
  214. padding-top: 0;
  215. }
  216. }
  217. </style>