verticalScreen.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <template>
  2. <div class="verticalWrap" :style="{background:'url('+ver_big_bg+')',backgroundSize:'100% 100%'}">
  3. <div class="pageHead">
  4. <pageHead />
  5. </div>
  6. <div v-show="nowPage == 1">
  7. <NowData screenType="ver" />
  8. <AirSwitchVer />
  9. <TemChart screenType="ver" :showPing="nowPage" />
  10. <LastMonthData screenType="ver" />
  11. </div>
  12. <div v-show="nowPage == 2">
  13. <FloorSpace :showPing="nowPage" @donetowpage="doneTowPage" />
  14. </div>
  15. <div v-show="nowPage == 3">
  16. <div class="lastTotalEnergy verticalClass">
  17. <div class="head-title">
  18. <span>上月总能耗</span>
  19. </div>
  20. <div class="subhead-title">低能耗亲自然</div>
  21. <div class="bottomCont">
  22. <img src="@/assets/circleEnergy.svg" />
  23. <div class="showData">
  24. <div class="title">比基准能耗</div>
  25. <div class="energySave">
  26. 节能<span>{{ lastAllEnergy.energyCompare }}%</span>
  27. </div>
  28. <div class="totalEnergy">
  29. 总能耗<span>{{ lastAllEnergy.energyTotal }}</span
  30. >KWh
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. <lastSaveEnergy screenType="ver" />
  36. <lastEnergyChart
  37. screenType="ver"
  38. :showPing="nowPage"
  39. @donethreepage="doneThreePage"
  40. />
  41. </div>
  42. </div>
  43. </template>
  44. <script>
  45. //import ver_big_bg from "@/assets/ver_big_bg.png";
  46. import NowData from "./valueDelivery/NowData.vue";
  47. import LastMonthData from "./valueDelivery/LastMonthData.vue";
  48. import AirSwitchVer from "./valueDelivery/AirSwitchVer.vue";
  49. import FloorSpace from "./valueDelivery/FloorSpace.vue";
  50. import TemChart from "./valueDelivery/TemChart.vue";
  51. import lastEnergyChart from "./valueDelivery/lastEnergyChart.vue";
  52. import lastSaveEnergy from "./valueDelivery/lastSaveEnergy.vue";
  53. import pageHead from "./valueDelivery/pageHead.vue";
  54. import { mapState } from "vuex";
  55. export default {
  56. components: {
  57. NowData,
  58. FloorSpace,
  59. LastMonthData,
  60. AirSwitchVer,
  61. TemChart,
  62. lastEnergyChart,
  63. lastSaveEnergy,
  64. pageHead,
  65. },
  66. data() {
  67. return {
  68. nowPage: null,
  69. verticalInterval: null,
  70. ver_big_bg:require("@/assets/ver_big_bg.png"),
  71. };
  72. },
  73. mounted() {
  74. this.nowPage = 1;
  75. this.timePageShow();
  76. },
  77. destroyed() {
  78. clearInterval(this.verticalInterval);
  79. },
  80. computed: {
  81. ...mapState({
  82. lastAllEnergy: (state) => {
  83. // debugger;
  84. var lastAllEnergy = JSON.parse(
  85. JSON.stringify(state.lastAllEnergy)
  86. );
  87. lastAllEnergy.energyCompare = Number(
  88. (lastAllEnergy.energyCompare * 100).toFixed(0)
  89. );
  90. return lastAllEnergy;
  91. },
  92. }),
  93. },
  94. methods: {
  95. doneThreePage() {
  96. //第三屏刷新结束 通知
  97. this.nowPage = 1;
  98. this.timePageShow(); //1屏变2屏
  99. },
  100. doneTowPage() {
  101. //第二屏刷新结束 通知
  102. this.nowPage = 3;
  103. },
  104. timePageShow() {
  105. var timeoutsign = setTimeout(() => {
  106. this.nowPage = this.nowPage + 1;
  107. if (this.nowPage == 4) {
  108. this.nowPage = 1;
  109. }
  110. }, 6000);
  111. },
  112. },
  113. };
  114. </script>
  115. <style lang="less" scoped>
  116. .verticalWrap {
  117. background: #f3fdff;
  118. padding: 50px 40px 60px;
  119. }
  120. .pageHead {
  121. padding-bottom: 50px;
  122. }
  123. .lastTotalEnergy {
  124. height: 535px;
  125. .bottomCont {
  126. width: 580px;
  127. margin: 4px auto;
  128. position: relative;
  129. img {
  130. width: 100%;
  131. }
  132. .showData {
  133. position: absolute;
  134. top: 0;
  135. left: 0;
  136. width: 100%;
  137. height: 100%;
  138. box-sizing: border-box;
  139. padding-top: 90px;
  140. display: flex;
  141. align-items: center;
  142. justify-content: center;
  143. flex-direction: column;
  144. .title {
  145. font-size: 28px;
  146. color: #575271;
  147. }
  148. .energySave {
  149. margin-top: 14px;
  150. font-size: 56px;
  151. span {
  152. font-size: 60px;
  153. }
  154. }
  155. .totalEnergy {
  156. margin-top: 18px;
  157. color: #2ec5f5;
  158. font-size: 28px;
  159. }
  160. }
  161. }
  162. }
  163. </style>