bomBox.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. <template>
  2. <div class='bomb'>
  3. <div class='bomb-line' :class='data.hasOwnProperty("isExecuted")?(data.isExecuted?"green":"red"):"gray"'></div>
  4. <div class='close' @click='$emit("close")'>
  5. <img src='../../assets/close.png' alt />
  6. </div>
  7. <div class='bomb-left'>
  8. <div class='bomb-left1'>当前策略</div>
  9. <div class='bomb-left2'>
  10. 应执行时间
  11. <span v-if='data.onTime'>{{data.onTime?data.onTime.slice(0,2)+":"+data.onTime.slice(2,4):"--"}}</span>
  12. <span v-else-if='data.offTime'>{{data.offTime?data.offTime.slice(0,2)+":"+data.offTime.slice(2,4):"--"}}</span>
  13. <span v-else>{{data.executeTime?data.executeTime.slice(8,10)+":"+data.executeTime.slice(10,12):"--"}}</span>
  14. </div>
  15. <div class='bomb-left3'>策略可靠度</div>
  16. <div id='circleEcharts' style='width:170px;height:204px'></div>
  17. </div>
  18. <div class='bomb-right'>
  19. <water-unit :data='data' :type='2'></water-unit>
  20. <div class='snapshotss-center2'>
  21. <div class='snapshotss-cont2-box1 MicrYaHei'>
  22. <span>数据传输情况</span>
  23. <span :class='data.energyErrorFlag!=1?"span1":"span2"'>
  24. 能耗
  25. <img v-if='data.energyErrorFlag!=1' src='../../assets/finish.png' alt />
  26. <img v-else src='../../assets/wrong.png' alt />
  27. </span>
  28. <span :class='data.environmentErrorFlag!=1?"span1":"span2"'>
  29. 环境
  30. <img v-if='data.environmentErrorFlag!=1' src='../../assets/finish.png' alt />
  31. <img v-else src='../../assets/wrong.png' alt />
  32. </span>
  33. <span :class='data.baErrorFalg!=1?"span1":"span2"'>
  34. BA
  35. <img v-if='data.baErrorFalg!=1' src='../../assets/finish.png' alt />
  36. <img v-else src='../../assets/wrong.png' alt />
  37. </span>
  38. </div>
  39. <div class='snapshotss-cont2-box2 MicrYaHei'>
  40. <span>实际冷量</span>
  41. <span>
  42. <font
  43. :class='parseInt(data.nowPlantLoad)=="-9999"?"reds":""'
  44. >{{(data.nowPlantLoad==undefined)?'--':(parseInt(data.nowPlantLoad)=='-9999'?'x':(parseInt(data.nowPlantLoad)=='-9998'?'--':parseInt(data.nowPlantLoad)))}}</font>
  45. <font style='font-size:12px;'>kW</font>
  46. </span>
  47. <span>未来1小时预测冷量</span>
  48. <span>
  49. <font
  50. :class='parseInt(data.predictedLoad1h)=="-9999"?"reds":""'
  51. >{{(data.predictedLoad1h==undefined)?'--':(parseInt(data.predictedLoad1h)=='-9999'?'x':(parseInt(data.predictedLoad1h)=='-9998'?'--':parseInt(data.predictedLoad1h)))}}</font>
  52. <font style='font-size:12px;'>kW</font>
  53. </span>
  54. </div>
  55. </div>
  56. <div class='bomb-right-bottom'>
  57. <el-input placeholder='你可以在此处填写备注信息' v-model='remarks' @blur='saveRemarks'></el-input>
  58. </div>
  59. </div>
  60. </div>
  61. </template>
  62. <script>
  63. import echarts from 'echarts'
  64. import waterUnit from './waterUnit'
  65. import { updateCommand } from '@/api/strategy/strategy.js'
  66. import { timestamp2String } from '@/utils/helper.js'
  67. export default {
  68. data() {
  69. return {
  70. timestamp2String,
  71. circle1: 0,
  72. circle2: 0,
  73. remarks: ''
  74. }
  75. },
  76. props: ['data'],
  77. components: { waterUnit },
  78. methods: {
  79. saveRemarks() {
  80. let postParams = {
  81. id: this.data.id,
  82. remarks: this.remarks
  83. }
  84. updateCommand({ postParams }).then(res => {
  85. if (res.result == 'success') {
  86. this.$message.success('添加备注成功!')
  87. }
  88. })
  89. },
  90. getData() {
  91. this.circle1 = this.data.strategyReliability ? this.data.strategyReliability.toFixed(2) : 0
  92. this.circle2 = 100 - this.circle1
  93. this.drawCircle()
  94. },
  95. drawCircle() {
  96. var circleEcharts = echarts.init(document.getElementById('circleEcharts'))
  97. let option = {
  98. color: ['#E1F2FF', '#0091FF'],
  99. series: [
  100. {
  101. name: '',
  102. type: 'pie',
  103. radius: ['50%', '60%'],
  104. avoidLabelOverlap: false,
  105. hoverAnimation: false,
  106. label: {
  107. normal: {
  108. show: true,
  109. position: 'center',
  110. formatter: function(formatter) {
  111. return formatter.percent + '%'
  112. }
  113. },
  114. },
  115. labelLine: {
  116. normal: {
  117. show: false
  118. }
  119. },
  120. data: [
  121. { value: this.circle1, name: '' },
  122. { value: this.circle2, name: '' }
  123. ]
  124. }
  125. ]
  126. }
  127. circleEcharts.setOption(option)
  128. }
  129. },
  130. mounted() {
  131. this.getData()
  132. }
  133. }
  134. </script>
  135. <style lang='scss' scoped>
  136. .bomb {
  137. .reds {
  138. color: #f54e45;
  139. }
  140. background: #cccccc;
  141. width: 98%;
  142. display: flex;
  143. align-items: center;
  144. border-left: 8px solid #fff;
  145. position: relative;
  146. border-radius: 8px 0 0 8px;
  147. box-shadow: 0 2px 10px 0 rgba(44, 48, 62, 0.16);
  148. .bomb-line {
  149. position: absolute;
  150. top: 0;
  151. left: -8px;
  152. width: 8px;
  153. height: 100%;
  154. border-radius: 8px 0 0 8px;
  155. }
  156. .red {
  157. background: #f54e45ff;
  158. }
  159. .green {
  160. background: #34c724ff;
  161. }
  162. .gray {
  163. background: #0091ff;
  164. }
  165. .close {
  166. cursor: pointer;
  167. margin-left: 10px;
  168. }
  169. .bomb-left {
  170. width: 180px;
  171. padding-left: 10px;
  172. .bomb-left1 {
  173. font-size: 16px;
  174. margin: 38px 0 16px 0;
  175. }
  176. .bomb-left2 {
  177. color: #646c73;
  178. font-size: 14px;
  179. margin-bottom: 16px;
  180. }
  181. .bomb-left3 {
  182. color: #646c73;
  183. font-size: 14px;
  184. margin-bottom: 22px;
  185. }
  186. }
  187. .bomb-right {
  188. flex: 1;
  189. margin-right: 30px;
  190. .snapshotss-center2 {
  191. margin-top: 20px;
  192. margin-bottom: 20px;
  193. display: flex;
  194. align-items: center;
  195. justify-content: space-between;
  196. .snapshotss-cont2-box1,
  197. .snapshotss-cont2-box2 {
  198. flex: 1;
  199. height: 80px;
  200. background: url('../../assets/copy.png');
  201. background-size: 100% 100%;
  202. display: flex;
  203. align-items: center;
  204. padding-left: 24px;
  205. }
  206. .snapshotss-cont2-box1 {
  207. margin-right: 12px;
  208. span:nth-of-type(1) {
  209. height: 22px;
  210. font-size: 14px;
  211. color: rgba(100, 108, 115, 1);
  212. line-height: 19px;
  213. margin-right: 20px;
  214. }
  215. span:not(:first-child) {
  216. height: 28px;
  217. background: rgba(255, 255, 255, 1);
  218. border-radius: 16px;
  219. font-size: 14px;
  220. color: rgba(31, 36, 41, 1);
  221. display: flex;
  222. justify-content: space-between;
  223. align-items: center;
  224. padding: 0 6px 0 12px;
  225. margin-right: 20px;
  226. img {
  227. width: 20px;
  228. height: 20px;
  229. margin-left: 8px;
  230. }
  231. }
  232. .span1 {
  233. border: 1px solid rgba(52, 199, 36, 1);
  234. }
  235. .span2 {
  236. border: 1px solid rgba(245, 78, 69, 1);
  237. }
  238. }
  239. .snapshotss-cont2-box2 {
  240. span:nth-of-type(1),
  241. span:nth-of-type(3) {
  242. height: 22px;
  243. font-size: 14px;
  244. color: rgba(100, 108, 115, 1);
  245. line-height: 19px;
  246. margin-right: 16px;
  247. }
  248. span:nth-of-type(2),
  249. span:nth-of-type(4) {
  250. height: 32px;
  251. font-size: 24px;
  252. font-family: Persagy;
  253. color: rgba(31, 36, 41, 1);
  254. line-height: 29px;
  255. margin-right: 64px;
  256. }
  257. span:nth-of-type(3) {
  258. margin-right: 16px;
  259. }
  260. }
  261. }
  262. .bomb-right-bottom {
  263. }
  264. }
  265. }
  266. </style>