horizontalScreen.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. <template>
  2. <div class="horizontalScreen">
  3. <div class="bg">
  4. <img :src="bgImg" />
  5. </div>
  6. <div class="container">
  7. <div class="hor-head">
  8. <pageHead />
  9. </div>
  10. <div
  11. class="hor-nowData-content firstScreen flexBetween"
  12. v-show="nowPage == 1"
  13. >
  14. <div class="content-left">
  15. <NowData screenType="hor" />
  16. <div class="content-left-cont flexBetween">
  17. <div class="bottom-left">
  18. <HorAirSwitch />
  19. </div>
  20. <div class="bottom-right" ref="bottomright">
  21. <TemChart screenType="hor" :showPing="nowPage" />
  22. </div>
  23. </div>
  24. </div>
  25. <div class="content-right">
  26. <LastMonth screenType="hor" />
  27. </div>
  28. </div>
  29. <div class="hor-nowData-content" v-show="nowPage == 2">
  30. <HorFloorSpace :showPing="nowPage" @donetowpage="doneTowPage" />
  31. </div>
  32. <div class="hor-nowData-content secondScreen" v-show="nowPage == 3">
  33. <div class="flexBetween">
  34. <div class="left horizontalClass">
  35. <div class="head-title">
  36. <span>上月总能耗</span>
  37. </div>
  38. <div class="subhead-title">低能耗亲自然</div>
  39. <div class="left-content">
  40. <div class="left-bg lastbg">
  41. <img :src="lastMonthTotal" />
  42. </div>
  43. <div class="left-text">
  44. <div class="left-content-first">比基准能耗</div>
  45. <div class="left-content-next">
  46. 节能<span class="next-num"
  47. >{{
  48. lastAllEnergy.energyCompare
  49. }}%</span
  50. >
  51. </div>
  52. <div class="left-content-first blue">
  53. 总能耗{{ lastAllEnergy.energyTotal }}KWh
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="right ">
  59. <lastSaveEnergy screenType="hor" />
  60. </div>
  61. </div>
  62. <div class="chart-box ">
  63. <lastEnergyChart screenType="hor" :showPing="nowPage" />
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </template>
  69. <script>
  70. import hor_big_bg from "@/assets/horImg/hor_big_bg.png";
  71. import pageHead from "./valueDelivery/pageHead.vue";
  72. import NowData from "./valueDelivery/NowData.vue";
  73. import LastMonth from "./valueDelivery/LastMonthData.vue";
  74. import HorAirSwitch from "./valueDelivery/HorAirSwitch.vue";
  75. import lastSaveEnergy from "./valueDelivery/lastSaveEnergy.vue";
  76. import TemChart from "./valueDelivery/TemChart.vue";
  77. import lastEnergyChart from "./valueDelivery/lastEnergyChart.vue";
  78. import HorFloorSpace from "./valueDelivery/HorFloorSpace.vue";
  79. import { mapState } from "vuex";
  80. export default {
  81. components: {
  82. pageHead,
  83. NowData,
  84. HorAirSwitch,
  85. LastMonth,
  86. lastSaveEnergy,
  87. TemChart,
  88. lastEnergyChart,
  89. HorFloorSpace,
  90. },
  91. data() {
  92. return {
  93. bgImg: hor_big_bg,
  94. lastMonthTotal: require("@/assets/horImg/hor_lastMonthTotal.png"),
  95. nowPage: null,
  96. horiInterval: null,
  97. };
  98. },
  99. mounted() {
  100. this.nowPage = 1;
  101. this.timePageShow();
  102. },
  103. methods: {
  104. doneTowPage() {
  105. //第二屏刷新结束 通知
  106. //debugger;
  107. this.nowPage = 3;
  108. this.timePageShow();
  109. },
  110. timePageShow() {
  111. var timeoutsign = setTimeout(() => {
  112. this.nowPage = this.nowPage + 1;
  113. if (this.nowPage == 4) {
  114. this.nowPage = 1;
  115. }
  116. if (this.nowPage == 2) {
  117. clearTimeout(timeoutsign);
  118. return;
  119. }
  120. this.timePageShow();
  121. }, 6000);
  122. },
  123. },
  124. destroyed() {
  125. //clearInterval(this.horiInterval);
  126. },
  127. computed: {
  128. ...mapState({
  129. lastAllEnergy: (state) => {
  130. //debugger;
  131. var lastAllEnergy = JSON.parse(
  132. JSON.stringify(state.lastAllEnergy)
  133. );
  134. lastAllEnergy.energyCompare = lastAllEnergy.energyCompare
  135. ? Number((lastAllEnergy.energyCompare * 100).toFixed(0))
  136. : lastAllEnergy.energyCompare;
  137. return lastAllEnergy;
  138. },
  139. }),
  140. },
  141. };
  142. </script>
  143. <style lang="less" scoped>
  144. .horizontalScreen {
  145. padding: 30px 40px;
  146. min-height: 100%;
  147. box-sizing: border-box;
  148. scrollbar-width: none;
  149. position: relative;
  150. .bg {
  151. position: absolute;
  152. top: 0;
  153. left: 0;
  154. z-index: -1;
  155. right: 0;
  156. bottom: 0;
  157. overflow: hidden;
  158. img {
  159. width: 100%;
  160. height: 100%;
  161. }
  162. }
  163. .hor-head {
  164. // padding-top: 32px;
  165. // display: flex;
  166. // justify-content: center;
  167. margin-bottom: 30px;
  168. }
  169. .hor-nowData-content {
  170. // padding: 30px 36px;
  171. box-sizing: border-box;
  172. }
  173. .firstScreen {
  174. height: 910px;
  175. .content-left {
  176. width: calc(100% - 328px);
  177. }
  178. .content-right {
  179. width: 308px;
  180. }
  181. .content-left-cont {
  182. padding-top: 27px;
  183. .bottom-left {
  184. width: 446px;
  185. }
  186. .bottom-right {
  187. width: calc(100% - 466px);
  188. }
  189. }
  190. }
  191. .flexBetween {
  192. display: flex;
  193. justify-content: space-between;
  194. }
  195. }
  196. .secondScreen {
  197. .left {
  198. position: relative;
  199. height: 556px;
  200. width: 678px;
  201. .left-content {
  202. text-align: center;
  203. height: 390px;
  204. width: 100%;
  205. margin-top: 20px;
  206. position: relative;
  207. display: flex;
  208. justify-content: center;
  209. align-items: center;
  210. .lastbg {
  211. position: absolute;
  212. }
  213. .left-text {
  214. // width: 100%;
  215. // height: 100%;
  216. .left-content-first {
  217. font-size: 20px;
  218. font-weight: 500;
  219. line-height: 28px;
  220. &.blue {
  221. color: #2ec5f5;
  222. padding-top: 12px;
  223. }
  224. }
  225. .left-content-next {
  226. padding-top: 12px;
  227. font-size: 46px;
  228. font-weight: 600;
  229. line-height: 64px;
  230. .next-num {
  231. font-size: 48px;
  232. font-weight: 700;
  233. line-height: 58px;
  234. font-size: Persagy;
  235. }
  236. }
  237. }
  238. }
  239. }
  240. .right {
  241. position: relative;
  242. height: 556px;
  243. width: calc(100% - 698px);
  244. }
  245. .chart-box {
  246. margin-top: 24px;
  247. // width: 1840px;
  248. height: 330px;
  249. }
  250. }
  251. </style>