evIndoorTemperature.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. <template>
  2. <div class="p-echarts">
  3. <div class="pLegend">
  4. <i class="icon1"></i>按照策略执行
  5. <i class="icon2"></i>未按照策略执行
  6. <i class="icon3"></i>未按照策略执行,申诉通过
  7. <i class="icon4"></i>室内温度满足率
  8. <i class="icon5"></i>节能率
  9. </div>
  10. <div id="pCharts2" style="width: 100%;height: 100%;margin-top:20px;"></div>
  11. </div>
  12. </template>
  13. <script>
  14. var echarts = require("echarts");
  15. export default {
  16. data() {
  17. return {
  18. dataX:[],
  19. energyY:[],
  20. indoorY:[],
  21. strategy1:[],
  22. strategy2:[],
  23. strategy3:[]
  24. };
  25. },
  26. props: ["energyDataList"],
  27. mounted() {
  28. this.getDrawData()
  29. },
  30. methods: {
  31. getDrawData(){
  32. this.energyDataList.forEach(el=>{
  33. el.time = el.date.slice(4,6)+":"+el.date.slice(6,8)
  34. this.dataX.push(el.time)
  35. this.indoorY.push(el.tindoorFillRate?el.tindoorFillRate.toFixed(2):0)
  36. this.energyY.push(el.energySavingRate?el.energySavingRate.toFixed(2):0)
  37. if(el.chillerExecuteRateReal >= 75){
  38. this.strategy1.push(1)
  39. }else{
  40. this.strategy1.push(null)
  41. }
  42. if(el.chillerExecuteRate >= 75){
  43. this.strategy2.push(1)
  44. }else{
  45. this.strategy2.push(null)
  46. }
  47. if(el.chillerExecuteRateReal < 75 || el.chillerExecuteRate < 75){
  48. this.strategy3.push(1)
  49. }else{
  50. this.strategy3.push(null)
  51. }
  52. })
  53. this.drawIt();
  54. },
  55. drawIt() {
  56. let myCharts = echarts.init(document.getElementById("pCharts2"));
  57. var colors = ["#34C724", "#8D9399", "#F54E45", "#00D6B9", "#0091FF"];
  58. var option = {
  59. color: colors,
  60. tooltip: {
  61. trigger: "axis",
  62. axisPointer: {
  63. type: "cross"
  64. }
  65. },
  66. grid: {
  67. right: "5%",
  68. left: "5%"
  69. },
  70. xAxis: [
  71. {
  72. type: "category",
  73. axisTick: {
  74. alignWithLabel: true
  75. },
  76. splitLine: {
  77. show: false
  78. },
  79. axisLine: {
  80. lineStyle: {
  81. color: "#8D9399"
  82. }
  83. },
  84. axisLabel: {
  85. interval: 0 //代表显示所有x轴标签显示
  86. },
  87. data: this.dataX,
  88. }
  89. ],
  90. yAxis: [
  91. {
  92. type: "value",
  93. name: "节能率",
  94. axisLine: {
  95. lineStyle: {
  96. color: "#8D9399"
  97. }
  98. },
  99. splitLine: {
  100. show: false
  101. },
  102. min: 0,
  103. max: 25,
  104. position: "right",
  105. axisLabel: {
  106. formatter: "{value} ml"
  107. }
  108. },
  109. {
  110. type: "value",
  111. show: false,
  112. name: "",
  113. min: 0,
  114. max: 1,
  115. position: "right",
  116. offset: 80,
  117. axisLine: {
  118. show: false
  119. },
  120. axisLabel: {
  121. formatter: function() {
  122. return "";
  123. }
  124. }
  125. },
  126. {
  127. type: "value",
  128. name: "室内温度满足率",
  129. axisLine: {
  130. lineStyle: {
  131. color: "#8D9399"
  132. }
  133. },
  134. splitLine: {
  135. show: false
  136. },
  137. min: 0,
  138. max: 25,
  139. position: "left",
  140. axisLabel: {
  141. formatter: "{value} °C"
  142. }
  143. }
  144. ],
  145. series: [
  146. {
  147. name: "按照策略执行",
  148. type: "bar",
  149. barWidth: 30,
  150. data: this.strategy1
  151. },
  152. {
  153. name: "未按照策略执行",
  154. type: "bar",
  155. barWidth: 30,
  156. data: this.strategy2
  157. },
  158. {
  159. name: "未按照策略执行,申诉通过",
  160. type: "bar",
  161. barWidth: 30,
  162. data: this.strategy3
  163. },
  164. {
  165. name: "室内温度满足率",
  166. type: "line",
  167. yAxisIndex: 2,
  168. data: this.indoorY
  169. },
  170. {
  171. name: "节能率",
  172. type: "line",
  173. yAxisIndex: 2,
  174. data: this.energyY
  175. }
  176. ]
  177. };
  178. myCharts.setOption(option);
  179. myCharts.on("click", param => {
  180. this.$router.push("/evaluate/evTwoLevelMenu");
  181. if (param.seriesName == "室内温度满足率") {
  182. this.$router.push({
  183. path: "/evaluate/evTwoLevelMenu",
  184. query: { type: 1 }
  185. });
  186. } else if (param.seriesName == "节能率") {
  187. this.$router.push({
  188. path: "/evaluate/evTwoLevelMenu",
  189. query: { type: 2 }
  190. });
  191. } else {
  192. this.$router.push({
  193. path: "/evaluate/evTwoLevelMenu",
  194. query: { type: 3 }
  195. });
  196. }
  197. });
  198. }
  199. }
  200. };
  201. </script>
  202. <style lang="scss" scoped>
  203. .p-echarts {
  204. width: 100%;
  205. height: 100%;
  206. #pCharts2 {
  207. width: 100%;
  208. height: 100%;
  209. }
  210. .pLegend {
  211. font-size: 12px;
  212. color: #000000;
  213. text-align: center;
  214. margin-top: 20px;
  215. .icon1 {
  216. display: inline-block;
  217. width: 12px;
  218. height: 12px;
  219. background: rgba(52, 199, 36, 1);
  220. vertical-align: middle;
  221. margin-right: 3px;
  222. }
  223. .icon2 {
  224. display: inline-block;
  225. width: 12px;
  226. height: 12px;
  227. background: #f54e45;
  228. vertical-align: middle;
  229. margin-right: 3px;
  230. margin-left: 20px;
  231. }
  232. .icon3 {
  233. display: inline-block;
  234. width: 12px;
  235. height: 12px;
  236. background: #8d9399;
  237. vertical-align: middle;
  238. margin-right: 3px;
  239. margin-left: 20px;
  240. }
  241. .icon4 {
  242. display: inline-block;
  243. height: 6px;
  244. width: 16px;
  245. background: rgba(0, 145, 255, 1);
  246. border-radius: 3px;
  247. vertical-align: middle;
  248. margin-right: 3px;
  249. margin-left: 20px;
  250. }
  251. .icon5 {
  252. display: inline-block;
  253. height: 6px;
  254. width: 16px;
  255. background: #00d6b9;
  256. border-radius: 3px;
  257. vertical-align: middle;
  258. margin-right: 3px;
  259. margin-left: 20px;
  260. }
  261. }
  262. }
  263. </style>