strategyLine.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. <template>
  2. <div class='line-container'>
  3. <div class='leftL'>
  4. <div class='leftLengend'>
  5. <i class='outIcon'></i> 室外温度
  6. <i class='innerIcon'></i> 室内平均温度
  7. <i class='innerMax'></i> 室内最高温度
  8. </div>
  9. <div style='width:100%;height:100%;'>
  10. <div id='leftLine' style='width:100%;height:100%;'></div>
  11. </div>
  12. </div>
  13. <div class='rightL'>
  14. <div class='rightLengend'>
  15. <i class='blue-bg'></i> 实际供冷量
  16. <i class='preCool'></i>
  17. 预测冷量
  18. </div>
  19. <div style='width:100%;height:100%;'>
  20. <div id='RightLine' style='width:100%;height:100%;'></div>
  21. </div>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. import echarts from 'echarts'
  27. export default {
  28. data() {
  29. return {
  30. dataX: [],
  31. loadX: [],
  32. dataY1: [],
  33. dataY2: [],
  34. dataY3: [],
  35. loadY1: [],
  36. loadY2: [],
  37. loadY3: [],
  38. dataY1Min: '',
  39. dataY1Max: ''
  40. }
  41. },
  42. props: ['chillerList'],
  43. methods: {
  44. getMax(arr) {
  45. var max = arr[0]
  46. for (var i = 0; i < arr.length; i++) {
  47. if (max < arr[i]) {
  48. max = arr[i]
  49. }
  50. }
  51. return max
  52. },
  53. getMin(arr) {
  54. var min = arr[0]
  55. for (var i = 0; i < arr.length; i++) {
  56. if (arr[i] == '') {
  57. arr.splice(arr[i], 1)
  58. }
  59. if (min > arr[i]) {
  60. min = arr[i]
  61. }
  62. }
  63. return min
  64. },
  65. drawData() {
  66. this.dataY1 = []
  67. this.dataX = []
  68. this.loadX = []
  69. this.dataY2 = []
  70. this.dataY3 = []
  71. this.loadY1 = []
  72. this.loadY2 = []
  73. this.loadY3 = []
  74. this.chillerList.forEach(el => {
  75. el.value = el.time.slice(0, 2) + ':' + el.time.slice(2, 4)
  76. this.dataX.push(el.value)
  77. this.loadX.push(el.value)
  78. this.dataY1.push(el.tout == '-9999' ? undefined : el.tout)
  79. this.dataY2.push(el.meanTindoor == '-9999' ? undefined : el.meanTindoor)
  80. this.dataY3.push(el.maxTindoor == '-9999' ? undefined : el.maxTindoor)
  81. this.loadY1.push(el.nowPlantLoad == '-9999' && el.nowPlantLoad == '-9998' ? undefined : el.nowPlantLoad)
  82. this.loadY2.push(el.predictedLoadUpLimit != '-9999' && el.predictedLoadUpLimit != '-9998' ? el.predictedLoadUpLimit : undefined)
  83. this.loadY3.push(el.predictedLoadDownLimit != '-9999' && el.predictedLoadDownLimit != '-9998' ? el.predictedLoadDownLimit : undefined)
  84. })
  85. let arr = []
  86. arr = arr
  87. .concat(this.dataY1)
  88. .concat(this.dataY2)
  89. .concat(this.dataY3)
  90. this.dataY1Min = this.getMin(arr)
  91. this.dataY1Max = this.getMax(arr)
  92. let minG = parseInt(this.dataY1Min % 10),
  93. minS = parseInt((this.dataY1Min % 100) / 10),
  94. maxG = parseInt(this.dataY1Max % 10),
  95. maxS = parseInt((this.dataY1Max % 100) / 10)
  96. if (minG > 5) {
  97. this.dataY1Min = String(minS) + '5'
  98. } else if (minG <= 5) {
  99. this.dataY1Min = String(minS) + '0'
  100. }
  101. if (maxG >= 5) {
  102. this.dataY1Max = String(maxS + 1) + '0'
  103. } else if (maxG < 5) {
  104. this.dataY1Max = String(maxS) + '5'
  105. }
  106. this.drawLeft()
  107. this.drawRight()
  108. },
  109. drawLeft() {
  110. var leftLine = echarts.init(document.getElementById('leftLine'))
  111. let option = {
  112. tooltip: {
  113. trigger: 'axis',
  114. formatter: function(data) {
  115. let val1 = '',
  116. val2 = '',
  117. val3 = ''
  118. data.forEach(i => {
  119. if (i.seriesName == '室外温度') {
  120. val1 = `<br/>室外温度:${i.value ? i.value.toFixed(1) : ''}`
  121. }
  122. if (i.seriesName == '室内平均温度') {
  123. val2 = `<br/>室内平均温度:${i.value ? i.value.toFixed(1) : ''}`
  124. }
  125. if (i.seriesName == '室内最高温度') {
  126. val3 = `<br/>室内最高温度:${i.value ? i.value.toFixed(1) : ''}`
  127. }
  128. })
  129. return `${data[0].name}${val1}${val2}${val3}`
  130. }
  131. },
  132. title: {
  133. text: '室内外温度',
  134. fontSize: '16px',
  135. color: '#1F2429'
  136. },
  137. grid: {
  138. left: '3%',
  139. right: '4%',
  140. bottom: '3%',
  141. containLabel: true
  142. },
  143. xAxis: {
  144. type: 'category',
  145. boundaryGap: false,
  146. data: this.dataX
  147. },
  148. yAxis: {
  149. type: 'value',
  150. min: Number(this.dataY1Min),
  151. max: Number(this.dataY1Max),
  152. interval: 2,
  153. axisLabel: { formatter: '{value} ℃' }
  154. },
  155. series: [
  156. {
  157. name: '室外温度',
  158. type: 'line',
  159. data: this.dataY1,
  160. color: '#0091FF'
  161. },
  162. {
  163. name: '室内平均温度',
  164. type: 'line',
  165. data: this.dataY2,
  166. color: '#00D6B9'
  167. },
  168. {
  169. name: '室内最高温度',
  170. type: 'line',
  171. data: this.dataY3,
  172. color: '#FFBA6B'
  173. }
  174. ]
  175. }
  176. leftLine.setOption(option)
  177. },
  178. drawRight() {
  179. var RightLine = echarts.init(document.getElementById('RightLine'))
  180. RightLine.setOption({
  181. tooltip: {
  182. trigger: 'axis',
  183. axisPointer: {
  184. type: 'cross',
  185. animation: false,
  186. label: {
  187. backgroundColor: '#ccc',
  188. borderColor: '#aaa',
  189. borderWidth: 1,
  190. shadowBlur: 0,
  191. shadowOffsetX: 0,
  192. shadowOffsetY: 0,
  193. color: '#222'
  194. }
  195. },
  196. formatter: function(data) {
  197. let val1 = '',
  198. val2 = '',
  199. val3 = ''
  200. data.forEach(i => {
  201. if (i.seriesName == '预测冷量上限') {
  202. val1 = `<br/>预测冷量上限:${i.value ? i.value.toFixed(1) : '--'}`
  203. }
  204. if (i.seriesName == '预测冷量下限') {
  205. val2 = `<br/>预测冷量下限:${i.value ? i.value.toFixed(1) : '--'}`
  206. }
  207. if (i.seriesName == '实际供冷量') {
  208. val3 = `<br/>实际供冷量:${i.value ? i.value.toFixed(1) : '--'}`
  209. }
  210. })
  211. return `${data[0].name}${val1}${val2}${val3}`
  212. }
  213. },
  214. grid: {
  215. left: '3%',
  216. right: '4%',
  217. bottom: '3%',
  218. containLabel: true
  219. },
  220. xAxis: {
  221. type: 'category',
  222. data: this.loadX
  223. },
  224. yAxis: {
  225. splitLine: {
  226. lineStyle: {
  227. type: 'dotted'
  228. }
  229. },
  230. axisLabel: { formatter: '{value} kW' }
  231. },
  232. series: [
  233. {
  234. name: '实际供冷量',
  235. type: 'line',
  236. data: this.loadY1,
  237. itemStyle: {
  238. color: '#0091FF'
  239. }
  240. },
  241. {
  242. name: '预测冷量上限',
  243. type: 'line',
  244. data: this.loadY2,
  245. color: '#B6E0FF',
  246. lineStyle: {
  247. opacity: 0
  248. },
  249. stack: 'confidence-band',
  250. symbol: 'none'
  251. },
  252. {
  253. name: '预测冷量下限',
  254. type: 'line',
  255. data: this.loadY3,
  256. color: '#B6E0FF',
  257. areaStyle: {
  258. normal: {
  259. color: '#B6E0FF'
  260. }
  261. },
  262. stack: 'confidence-band',
  263. symbol: 'none'
  264. }
  265. ]
  266. })
  267. }
  268. },
  269. mounted() {
  270. this.$nextTick(function() {
  271. this.drawData()
  272. })
  273. },
  274. watch: {
  275. chillerList: {
  276. immediate: true,
  277. handler(val, old) {
  278. if (old) {
  279. this.drawData()
  280. }
  281. }
  282. }
  283. }
  284. }
  285. </script>
  286. <style lang="scss" scoped>
  287. .line-container {
  288. width: 100%;
  289. height: 100%;
  290. display: flex;
  291. .leftL {
  292. width: 45%;
  293. flex: 1;
  294. .leftLengend {
  295. text-align: center;
  296. margin-bottom: 10px;
  297. i {
  298. display: inline-block;
  299. width: 16px;
  300. height: 6px;
  301. border-radius: 3px;
  302. vertical-align: middle;
  303. }
  304. .innerIcon {
  305. background: rgba(0, 214, 185, 1);
  306. margin: 0 20px;
  307. }
  308. .outIcon {
  309. background: rgba(0, 145, 255, 1);
  310. }
  311. .innerMax {
  312. background: rgba(255, 186, 107, 1);
  313. }
  314. }
  315. }
  316. .rightL {
  317. flex: 1;
  318. width: 45%;
  319. .rightLengend {
  320. text-align: center;
  321. margin-bottom: 10px;
  322. i {
  323. display: inline-block;
  324. width: 16px;
  325. height: 6px;
  326. border-radius: 3px;
  327. vertical-align: middle;
  328. }
  329. .preCool {
  330. background: #0091ff;
  331. opacity: 0.29;
  332. margin-left: 20px;
  333. }
  334. }
  335. }
  336. }
  337. </style>