animationBox.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <template>
  2. <div class='an-content'>
  3. <div class='snapshotss-center2'>
  4. <div class='snapshotss-cont2-box1 MicrYaHei'>
  5. <span>数据传输情况</span>
  6. <span :class='data.energyErrorFlag!=1?"span1":"span2"'>
  7. 能耗
  8. <img v-if='data.energyErrorFlag!=1' src='../../assets/finish.png' alt />
  9. <img v-else src='../../assets/wrong.png' alt />
  10. </span>
  11. <span :class='data.environmentErrorFlag!=1?"span1":"span2"'>
  12. 环境
  13. <img v-if='data.environmentErrorFlag!=1' src='../../assets/finish.png' alt />
  14. <img v-else src='../../assets/wrong.png' alt />
  15. </span>
  16. <span :class='data.baErrorFalg!=1?"span1":"span2"'>
  17. BA
  18. <img v-if='data.baErrorFalg!=1' src='../../assets/finish.png' alt />
  19. <img v-else src='../../assets/wrong.png' alt />
  20. </span>
  21. </div>
  22. <div class='snapshotss-cont2-box2 MicrYaHei'>
  23. <span>实际冷量</span>
  24. <span>
  25. <font
  26. :class='parseInt(data.nowPlantLoad)=="-9999"?"red":""'
  27. >{{(data.nowPlantLoad==undefined)?'--':(parseInt(data.nowPlantLoad)=='-9999'?'x':(parseInt(data.nowPlantLoad)=='-9998'?'--':parseInt(data.nowPlantLoad)))}}</font>
  28. <font style='font-size:12px;'>kW</font>
  29. </span>
  30. <span>未来1小时预测冷量</span>
  31. <span>
  32. <font
  33. :class='parseInt(data.predictedLoad1h)=="-9999"?"red":""'
  34. >{{(data.predictedLoad1h==undefined)?'--':(parseInt(data.predictedLoad1h)=='-9999'?'x':(parseInt(data.predictedLoad1h)=='-9998'?'--':parseInt(data.predictedLoad1h)))}}</font>
  35. <font style='font-size:12px;'>kW</font>
  36. </span>
  37. </div>
  38. </div>
  39. <div class='an-bottom'>
  40. <strategy-line :chillerList='chillerHourList' v-if='chillerHourList.length>=0'></strategy-line>
  41. </div>
  42. <div class='side-r' :class='chillerCommandQ.hasOwnProperty("isExecuted")?(chillerCommandQ.isExecuted?"green-bg":"red-bg"):"blue-bg"'>
  43. <div v-if='!showDraw' class='float-r' @click='showDraw = true'>
  44. <div
  45. class='float-line'
  46. :class='chillerCommandQ.hasOwnProperty("isExecuted")?(chillerCommandQ.isExecuted?"green-bg":"red-bg"):"blue-bg"'
  47. ></div>
  48. <img src='../../assets/open.png' alt />
  49. <p>当前策略</p>
  50. </div>
  51. </div>
  52. <bom-box v-if='Object.keys(chillerCommandQ).length>0' :class='["draw", {"open": showDraw}]' :data='chillerCommandQ' @close='showDraw = false'></bom-box>
  53. </div>
  54. </template>
  55. <script>
  56. import echarts from 'echarts'
  57. import bomBox from './bomBox'
  58. import strategyLine from '@/components/strategyLine'
  59. export default {
  60. data() {
  61. return {
  62. showDraw: false,
  63. dataX: [],
  64. dataY1: [],
  65. dataY2: [],
  66. dataY3: [],
  67. loadX: [],
  68. loadY1: [],
  69. loadY2: [],
  70. loadY3: [],
  71. dataY1Min: '',
  72. dataY1Max: ''
  73. }
  74. },
  75. components: { bomBox, strategyLine },
  76. methods:{
  77. isShowDraw(){
  78. if((Object.keys(this.chillerCommandQ).length>0 && this.chillerCommandQ.isNew) || (Object.keys(this.chillerCommandQ).length>0 && !this.chillerCommandQ.isExecuted)){
  79. this.showDraw = true
  80. }else{
  81. this.showDraw = false
  82. }
  83. }
  84. },
  85. props: ['data', 'chillerHourList', 'chillerCommandQ']
  86. }
  87. </script>
  88. <style lang='scss' scoped>
  89. .an-content {
  90. .snapshotss-center2 {
  91. padding: 20px 0;
  92. margin-bottom: 20px;
  93. display: flex;
  94. align-items: center;
  95. overflow: hidden;
  96. .snapshotss-cont2-box1,
  97. .snapshotss-cont2-box2 {
  98. flex: 1;
  99. height: 80px;
  100. background: url('../../assets/copy.png');
  101. background-size: 100% 100%;
  102. display: flex;
  103. align-items: center;
  104. padding-left: 24px;
  105. }
  106. .snapshotss-cont2-box1 {
  107. margin-right: 12px;
  108. span:nth-of-type(1) {
  109. height: 22px;
  110. font-size: 14px;
  111. color: rgba(100, 108, 115, 1);
  112. line-height: 19px;
  113. margin-right: 20px;
  114. }
  115. span:not(:first-child) {
  116. height: 28px;
  117. background: rgba(255, 255, 255, 1);
  118. border-radius: 16px;
  119. font-size: 14px;
  120. color: rgba(31, 36, 41, 1);
  121. display: flex;
  122. justify-content: space-between;
  123. align-items: center;
  124. padding: 0 6px 0 12px;
  125. margin-right: 20px;
  126. img {
  127. width: 20px;
  128. height: 20px;
  129. margin-left: 8px;
  130. }
  131. }
  132. .span1 {
  133. border: 1px solid rgba(52, 199, 36, 1);
  134. }
  135. .span2 {
  136. border: 1px solid rgba(245, 78, 69, 1);
  137. }
  138. }
  139. .snapshotss-cont2-box2 {
  140. span:nth-of-type(1),
  141. span:nth-of-type(3) {
  142. height: 22px;
  143. font-size: 14px;
  144. color: rgba(100, 108, 115, 1);
  145. line-height: 19px;
  146. margin-right: 16px;
  147. }
  148. span:nth-of-type(2),
  149. span:nth-of-type(4) {
  150. height: 32px;
  151. font-size: 24px;
  152. font-family: Persagy;
  153. color: rgba(31, 36, 41, 1);
  154. line-height: 29px;
  155. margin-right: 64px;
  156. }
  157. span:nth-of-type(3) {
  158. margin-right: 16px;
  159. }
  160. }
  161. }
  162. .side-r {
  163. position: fixed;
  164. right: 0;
  165. top: 50%;
  166. transform: translateY(-50%);
  167. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  168. display: flex;
  169. width: 8px;
  170. border-radius: 8px 0 0 8px;
  171. cursor: pointer;
  172. height: 357px;
  173. .float-r {
  174. width: 8px;
  175. display: flex;
  176. align-items: center;
  177. border-radius: 8px 0 0 8px;
  178. cursor: pointer;
  179. .float-line {
  180. width: 8px;
  181. height: 357px;
  182. border-radius: 8px 0 0 8px;
  183. }
  184. img {
  185. height: 10px;
  186. margin: 0 10px;
  187. }
  188. p {
  189. width: 0;
  190. }
  191. }
  192. }
  193. .side-r:hover {
  194. width: 68px;
  195. background: #fff;
  196. }
  197. .side-r:hover .float-r {
  198. width: 68px;
  199. }
  200. .draw {
  201. position: fixed;
  202. left: 100%;
  203. top: 50%;
  204. transform: translateY(-50%);
  205. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  206. background: #ffffff;
  207. transition: transform 0.3s ease-in-out;
  208. &.open {
  209. transform: translate(-100%, -50%);
  210. }
  211. }
  212. .an-bottom {
  213. margin-top: 45px;
  214. display: flex;
  215. }
  216. }
  217. </style>