animationBox.vue 8.1 KB

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