animationBox.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
  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.isExecuted==true?"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.isExecuted==true?"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.isExecuted==true?"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>{{data.nowPlantLoad?parseInt(data.nowPlantLoad):'--'}} kW</span>
  25. <span>未来1小时预测冷量</span>
  26. <span>{{data.predictedLoad1h?parseInt(data.predictedLoad1h):'--'}} kW</span>
  27. </div>
  28. </div>
  29. <div class='an-bottom'>
  30. <div class='leftL'>
  31. <div class='leftLengend'>
  32. <i class='outIcon'></i> 室外温度
  33. <i class='innerIcon'></i> 室内平均温度
  34. <i class='innerMax'></i> 室内最高温度
  35. </div>
  36. <div id='leftLine' style='width:100%;height:350px;margin-right:;24px;'></div>
  37. </div>
  38. <div class='rightL'>
  39. <div class='rightLengend'>
  40. <i class='reactCool'></i> 实际供冷量
  41. <i class='preCool'></i> 预测冷量
  42. </div>
  43. <div id='rightLine' style='width:100%;height:350px;'></div>
  44. </div>
  45. </div>
  46. <div class='side-r' :class='data.isExecuted==true?"green":"red"'>
  47. <div v-if='!showDraw' class='float-r' @click='showDraw = true'>
  48. <div class='float-line' :class='data.isExecuted==true?"green":"red"'></div>
  49. <img src='../../assets/open.png' alt />
  50. <p>当前策略</p>
  51. </div>
  52. </div>
  53. <bom-box v-if='Object.keys(chillerCommandQ).length>0' :class='["draw", {"open": showDraw}]' :data='chillerCommandQ' @close='showDraw = false'></bom-box>
  54. </div>
  55. </template>
  56. <script>
  57. import echarts from 'echarts'
  58. import bomBox from './bomBox'
  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 },
  76. props: ['data', 'chillerHourList', 'chillerCommandQ'],
  77. watch: {
  78. chillerHourList(newVal, oldVal) {
  79. if(newVal) {
  80. this.getData()
  81. this.drawLeft()
  82. this.drawRight()
  83. }
  84. }
  85. },
  86. methods: {
  87. getMax(arr) {
  88. var max = arr[0]
  89. for (var i = 0; i < arr.length; i++) {
  90. if (max < arr[i]) {
  91. max = arr[i]
  92. }
  93. }
  94. return max
  95. },
  96. getMin(arr) {
  97. var min = arr[0]
  98. for (var i = 0; i < arr.length; i++) {
  99. if (arr[i] == '') {
  100. arr.splice(arr[i], 1)
  101. }
  102. if (min > arr[i]) {
  103. min = arr[i]
  104. }
  105. }
  106. return min
  107. },
  108. getData() {
  109. this.chillerHourList.forEach(el => {
  110. el.value = el.time.slice(0, 2) + ':' + el.time.slice(2, 4)
  111. this.dataX.push(el.value)
  112. this.loadX.push(el.value)
  113. this.dataY1.push(el.tout == '-9999' ? undefined : el.tout)
  114. this.dataY2.push(el.meanTindoor)
  115. this.dataY3.push(el.maxTindoor)
  116. this.loadY1.push(el.nowPlantLoad == '-9999' ? undefined : el.nowPlantLoad)
  117. this.loadY2.push(el.predictedLoadUpLimit != '-9999' ? el.predictedLoadUpLimit : undefined)
  118. this.loadY3.push(el.redictedLoadDownLimit != '-9999' ? el.redictedLoadDownLimit : undefined)
  119. let arr = []
  120. arr = arr
  121. .concat(this.dataY1)
  122. .concat(this.dataY2)
  123. .concat(this.dataY3)
  124. this.dataY1Min = this.getMin(arr)
  125. this.dataY1Max = this.getMax(arr)
  126. let minG = parseInt(this.dataY1Min % 10),
  127. minS = parseInt((this.dataY1Min % 100) / 10),
  128. maxG = parseInt(this.dataY1Max % 10),
  129. maxS = parseInt((this.dataY1Max % 100) / 10)
  130. if (minG > 5) {
  131. this.dataY1Min = String(minS) + '5'
  132. } else if (minG <= 5) {
  133. this.dataY1Min = String(minS) + '0'
  134. }
  135. if (maxG > 5) {
  136. this.dataY1Max = String(maxS + 1) + '0'
  137. } else if (maxG <= 5) {
  138. this.dataY1Max = String(maxS) + '0'
  139. }
  140. })
  141. },
  142. drawLeft() {
  143. var leftLine = echarts.init(document.getElementById('leftLine'))
  144. let option = {
  145. tooltip: {
  146. trigger: 'axis'
  147. },
  148. title: {
  149. text: '室内外温度',
  150. fontSize: '16px',
  151. color: '#1F2429'
  152. },
  153. grid: {
  154. left: '3%',
  155. right: '4%',
  156. bottom: '3%',
  157. containLabel: true
  158. },
  159. xAxis: {
  160. type: 'category',
  161. boundaryGap: false,
  162. data: this.dataX
  163. },
  164. yAxis: {
  165. type: 'value',
  166. min: Number(this.dataY1Min),
  167. max: Number(this.dataY1Max),
  168. interval: 5,
  169. axisLabel: { formatter: '{value} ℃' }
  170. },
  171. series: [
  172. {
  173. name: '室外温度',
  174. type: 'line',
  175. data: this.dataY1,
  176. color: '#0091FF'
  177. },
  178. {
  179. name: '室内平均温度',
  180. type: 'line',
  181. data: this.dataY2,
  182. color: '#00D6B9'
  183. },
  184. {
  185. name: '室内最高温度',
  186. type: 'line',
  187. data: this.dataY3,
  188. color: '#FFBA6B'
  189. }
  190. ]
  191. }
  192. leftLine.setOption(option)
  193. },
  194. drawRight() {
  195. var rightLine = echarts.init(document.getElementById('rightLine'))
  196. rightLine.setOption({
  197. tooltip: {
  198. trigger: 'axis',
  199. axisPointer: {
  200. type: 'cross',
  201. animation: false,
  202. label: {
  203. backgroundColor: '#ccc',
  204. borderColor: '#aaa',
  205. borderWidth: 1,
  206. shadowBlur: 0,
  207. shadowOffsetX: 0,
  208. shadowOffsetY: 0,
  209. color: '#222'
  210. }
  211. }
  212. // formatter: function (params) {
  213. // // return params[2].name + '<br />' + params[2].value;
  214. // }
  215. },
  216. grid: {
  217. left: '3%',
  218. right: '4%',
  219. bottom: '3%',
  220. containLabel: true
  221. },
  222. title: {
  223. text: '预测冷量',
  224. fontSize: '16px',
  225. color: '#1F2429'
  226. },
  227. xAxis: {
  228. type: 'category',
  229. data: this.loadX
  230. },
  231. yAxis: {
  232. splitNumber: 3,
  233. splitLine: {
  234. show: false
  235. },
  236. axisLabel: { formatter: '{value} KW' }
  237. },
  238. series: [
  239. {
  240. name: 'L',
  241. type: 'line',
  242. data: this.loadY2,
  243. lineStyle: {
  244. opacity: 0
  245. },
  246. stack: 'confidence-band',
  247. symbol: 'none'
  248. },
  249. {
  250. name: 'U',
  251. type: 'line',
  252. data: this.loadY3,
  253. lineStyle: {
  254. opacity: 0
  255. },
  256. areaStyle: {
  257. color: '#ccc'
  258. },
  259. stack: 'confidence-band',
  260. symbol: 'none'
  261. },
  262. {
  263. type: 'line',
  264. data: this.loadY1,
  265. hoverAnimation: false,
  266. symbolSize: 6,
  267. itemStyle: {
  268. color: '#0091FF'
  269. },
  270. showSymbol: false
  271. }
  272. ]
  273. })
  274. }
  275. },
  276. created() {
  277. this.getData()
  278. },
  279. mounted() {
  280. this.drawLeft()
  281. this.drawRight()
  282. }
  283. }
  284. </script>
  285. <style lang='scss' scoped>
  286. .an-content {
  287. .snapshotss-center2 {
  288. padding: 20px 0;
  289. margin-bottom: 20px;
  290. display: flex;
  291. align-items: center;
  292. overflow: hidden;
  293. .snapshotss-cont2-box1,
  294. .snapshotss-cont2-box2 {
  295. flex: 1;
  296. height: 80px;
  297. background: url('../../assets/copy.png');
  298. background-size: 100% 100%;
  299. display: flex;
  300. align-items: center;
  301. padding-left: 24px;
  302. }
  303. .snapshotss-cont2-box1 {
  304. margin-right: 12px;
  305. span:nth-of-type(1) {
  306. height: 22px;
  307. font-size: 14px;
  308. color: rgba(100, 108, 115, 1);
  309. line-height: 19px;
  310. margin-right: 20px;
  311. }
  312. span:not(:first-child) {
  313. height: 28px;
  314. background: rgba(255, 255, 255, 1);
  315. border-radius: 16px;
  316. font-size: 14px;
  317. color: rgba(31, 36, 41, 1);
  318. display: flex;
  319. justify-content: space-between;
  320. align-items: center;
  321. padding: 0 6px 0 12px;
  322. margin-right: 20px;
  323. img {
  324. width: 20px;
  325. height: 20px;
  326. margin-left: 8px;
  327. }
  328. }
  329. .span1 {
  330. border: 1px solid rgba(52, 199, 36, 1);
  331. }
  332. .span2 {
  333. border: 1px solid rgba(245, 78, 69, 1);
  334. }
  335. }
  336. .snapshotss-cont2-box2 {
  337. span:nth-of-type(1),
  338. span:nth-of-type(3) {
  339. height: 22px;
  340. font-size: 14px;
  341. color: rgba(100, 108, 115, 1);
  342. line-height: 19px;
  343. margin-right: 16px;
  344. }
  345. span:nth-of-type(2),
  346. span:nth-of-type(4) {
  347. height: 32px;
  348. font-size: 24px;
  349. font-family: Persagy;
  350. color: rgba(31, 36, 41, 1);
  351. line-height: 29px;
  352. margin-right: 64px;
  353. }
  354. span:nth-of-type(3) {
  355. margin-right: 16px;
  356. }
  357. }
  358. }
  359. .side-r {
  360. position: fixed;
  361. right: 0;
  362. top: 50%;
  363. transform: translateY(-50%);
  364. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  365. display: flex;
  366. width: 8px;
  367. border-radius: 8px 0 0 8px;
  368. cursor: pointer;
  369. height: 357px;
  370. .float-r {
  371. width: 8px;
  372. display: flex;
  373. align-items: center;
  374. border-radius: 8px 0 0 8px;
  375. cursor: pointer;
  376. .float-line {
  377. width: 8px;
  378. height: 357px;
  379. border-radius: 8px 0 0 8px;
  380. }
  381. img {
  382. height: 10px;
  383. margin: 0 10px;
  384. }
  385. p {
  386. width: 0;
  387. }
  388. }
  389. }
  390. .red {
  391. background: #f54e45ff;
  392. }
  393. .green {
  394. background: #34c724ff;
  395. }
  396. .side-r:hover {
  397. width: 68px;
  398. background: #fff;
  399. }
  400. .side-r:hover .float-r {
  401. width: 68px;
  402. }
  403. .draw {
  404. position: fixed;
  405. left: 100%;
  406. top: 50%;
  407. transform: translateY(-50%);
  408. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  409. background: #ffffff;
  410. transition: transform 0.3s ease-in-out;
  411. &.open {
  412. transform: translate(-100%, -50%);
  413. }
  414. }
  415. .an-bottom {
  416. margin-top: 45px;
  417. display: flex;
  418. .leftL {
  419. flex: 1;
  420. .leftLengend {
  421. text-align: center;
  422. margin-bottom: 10px;
  423. i {
  424. display: inline-block;
  425. width: 16px;
  426. height: 6px;
  427. border-radius: 3px;
  428. vertical-align: middle;
  429. }
  430. .innerIcon {
  431. background: rgba(0, 214, 185, 1);
  432. margin: 0 20px;
  433. }
  434. .outIcon {
  435. background: rgba(0, 145, 255, 1);
  436. }
  437. .innerMax {
  438. background: rgba(255, 186, 107, 1);
  439. }
  440. }
  441. }
  442. .rightL {
  443. flex: 1;
  444. .rightLengend {
  445. text-align: center;
  446. margin-bottom: 10px;
  447. i {
  448. display: inline-block;
  449. width: 16px;
  450. height: 6px;
  451. border-radius: 3px;
  452. vertical-align: middle;
  453. }
  454. .reactCool {
  455. background: rgba(0, 214, 185, 1);
  456. }
  457. .preCool {
  458. background: rgba(0, 145, 255, 1);
  459. opacity: 0.29;
  460. margin-left: 20px;
  461. }
  462. }
  463. }
  464. }
  465. }
  466. </style>