animationBox.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  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==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.isExecuted==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.isExecuted==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>{{data.nowPlantLoad || 0}} KW</span>
  25. <span>未来1小时预测冷量</span>
  26. <span>{{data.predictedLoad1h || 0}} KW</span>
  27. </div>
  28. </div>
  29. <div class="an-bottom">
  30. <div id="leftLine" style="width:45%;height:350px;margin-right:;24px;"></div>
  31. <div id="rightLine" style="width:45%;height:350px;"></div>
  32. </div>
  33. <div class="side-r" v-if="data.isExecuted!=0">
  34. <div v-if="!showDraw" class="float-r" @click="showDraw = true">
  35. <img src="../../assets/open.png" alt />
  36. <p>当前策略</p>
  37. </div>
  38. </div>
  39. <bom-box :class="['draw', {'open': showDraw}]" :data="data" @close="showDraw = false"></bom-box>
  40. </div>
  41. </template>
  42. <script>
  43. import echarts from "echarts";
  44. import bomBox from "./bomBox";
  45. export default {
  46. data() {
  47. return {
  48. showDraw: false,
  49. dataX: [],
  50. dataY1: [],
  51. dataY2: [],
  52. dataY3: [],
  53. loadX: [],
  54. loadY1: [],
  55. loadY2: [],
  56. loadY3: []
  57. };
  58. },
  59. components: { bomBox },
  60. props: ["data", "chillerHourList"],
  61. methods: {
  62. getData() {
  63. this.chillerHourList.forEach(el => {
  64. el.value = el.time.slice(0, 2) + ":" + el.time.slice(2, 4);
  65. this.dataX.push(el.value);
  66. this.loadX.push(el.value);
  67. this.dataY1.push(el.tout);
  68. this.dataY2.push(el.meanTindoor);
  69. this.dataY3.push(el.maxTindoor);
  70. this.loadY1.push(el.nowPlantLoad);
  71. this.loadY2.push(el.predictedLoadUpLimit);
  72. this.loadY3.push(el.redictedLoadDownLimit);
  73. });
  74. },
  75. drawLeft() {
  76. var leftLine = echarts.init(document.getElementById("leftLine"));
  77. let option = {
  78. tooltip: {
  79. trigger: "axis"
  80. },
  81. legend: {
  82. data: ["室外温度", "室内平均温度", "室内最高温度"]
  83. },
  84. grid: {
  85. left: "3%",
  86. right: "4%",
  87. bottom: "3%",
  88. containLabel: true
  89. },
  90. xAxis: {
  91. type: "category",
  92. boundaryGap: false,
  93. data: this.dataX
  94. },
  95. yAxis: {
  96. type: "value"
  97. },
  98. series: [
  99. {
  100. name: "室外温度",
  101. type: "line",
  102. stack: "总量",
  103. data: this.dataY1
  104. },
  105. {
  106. name: "室内平均温度",
  107. type: "line",
  108. stack: "总量",
  109. data: this.dataY2
  110. },
  111. {
  112. name: "室内最高温度",
  113. type: "line",
  114. stack: "总量",
  115. data: this.dataY3
  116. }
  117. ]
  118. };
  119. leftLine.setOption(option);
  120. },
  121. drawRight() {
  122. var rightLine = echarts.init(document.getElementById("rightLine"));
  123. rightLine.setOption({
  124. tooltip: {
  125. trigger: "axis",
  126. axisPointer: {
  127. type: "cross",
  128. animation: false,
  129. label: {
  130. backgroundColor: "#ccc",
  131. borderColor: "#aaa",
  132. borderWidth: 1,
  133. shadowBlur: 0,
  134. shadowOffsetX: 0,
  135. shadowOffsetY: 0,
  136. color: "#222"
  137. }
  138. }
  139. // formatter: function (params) {
  140. // // return params[2].name + '<br />' + params[2].value;
  141. // }
  142. },
  143. grid: {
  144. left: "3%",
  145. right: "4%",
  146. bottom: "3%",
  147. containLabel: true
  148. },
  149. xAxis: {
  150. type: "category",
  151. data: this.loadX
  152. },
  153. yAxis: {
  154. splitNumber: 3,
  155. splitLine: {
  156. show: false
  157. }
  158. },
  159. series: [
  160. {
  161. name: "L",
  162. type: "line",
  163. data: this.loadY2,
  164. lineStyle: {
  165. opacity: 0
  166. },
  167. stack: "confidence-band",
  168. symbol: "none"
  169. },
  170. {
  171. name: "U",
  172. type: "line",
  173. data: this.loadY3,
  174. lineStyle: {
  175. opacity: 0
  176. },
  177. areaStyle: {
  178. color: "#ccc"
  179. },
  180. stack: "confidence-band",
  181. symbol: "none"
  182. },
  183. {
  184. type: "line",
  185. data: this.loadY1,
  186. hoverAnimation: false,
  187. symbolSize: 6,
  188. itemStyle: {
  189. color: "#c23531"
  190. },
  191. showSymbol: false
  192. }
  193. ]
  194. });
  195. }
  196. },
  197. created() {
  198. this.getData();
  199. },
  200. mounted() {
  201. this.drawLeft();
  202. this.drawRight();
  203. }
  204. };
  205. </script>
  206. <style lang='scss' scoped>
  207. .an-content {
  208. .snapshotss-center2 {
  209. padding: 20px 0;
  210. margin-bottom: 44px;
  211. display: flex;
  212. align-items: center;
  213. overflow: hidden;
  214. .snapshotss-cont2-box1,
  215. .snapshotss-cont2-box2 {
  216. flex: 1;
  217. height: 80px;
  218. background: url("../../assets/copy.png");
  219. background-size: 100% 100%;
  220. display: flex;
  221. align-items: center;
  222. padding-left: 24px;
  223. }
  224. .snapshotss-cont2-box1 {
  225. margin-right: 12px;
  226. span:nth-of-type(1) {
  227. height: 22px;
  228. font-size: 14px;
  229. color: rgba(100, 108, 115, 1);
  230. line-height: 19px;
  231. margin-right: 20px;
  232. }
  233. span:not(:first-child) {
  234. height: 28px;
  235. background: rgba(255, 255, 255, 1);
  236. border-radius: 16px;
  237. font-size: 14px;
  238. color: rgba(31, 36, 41, 1);
  239. display: flex;
  240. justify-content: space-between;
  241. align-items: center;
  242. padding: 0 6px 0 12px;
  243. margin-right: 20px;
  244. img {
  245. width: 20px;
  246. height: 20px;
  247. margin-left: 8px;
  248. }
  249. }
  250. .span1 {
  251. border: 1px solid rgba(52, 199, 36, 1);
  252. }
  253. .span2 {
  254. border: 1px solid rgba(245, 78, 69, 1);
  255. }
  256. }
  257. .snapshotss-cont2-box2 {
  258. span:nth-of-type(1),
  259. span:nth-of-type(3) {
  260. height: 22px;
  261. font-size: 14px;
  262. color: rgba(100, 108, 115, 1);
  263. line-height: 19px;
  264. margin-right: 16px;
  265. }
  266. span:nth-of-type(2),
  267. span:nth-of-type(4) {
  268. height: 32px;
  269. font-size: 24px;
  270. font-family: Persagy;
  271. color: rgba(31, 36, 41, 1);
  272. line-height: 29px;
  273. margin-right: 64px;
  274. }
  275. span:nth-of-type(3) {
  276. margin-right: 16px;
  277. }
  278. }
  279. }
  280. .side-r {
  281. position: fixed;
  282. right: 0;
  283. top: 50%;
  284. transform: translateY(-50%);
  285. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  286. background: #ffffff;
  287. display: flex;
  288. .float-r {
  289. display: flex;
  290. align-items: center;
  291. padding: 60px 40px 60px 10px;
  292. cursor: pointer;
  293. img {
  294. height: 10px;
  295. margin-right: 10px;
  296. }
  297. p {
  298. width: 0;
  299. }
  300. &:hover {
  301. background: #efefef;
  302. }
  303. }
  304. }
  305. .draw {
  306. position: fixed;
  307. left: 100%;
  308. top: 50%;
  309. transform: translateY(-50%);
  310. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  311. background: #ffffff;
  312. transition: transform 0.3s ease-in-out;
  313. &.open {
  314. transform: translate(-100%, -50%);
  315. }
  316. }
  317. .an-bottom {
  318. margin-top: 45px;
  319. display: flex;
  320. }
  321. }
  322. </style>