index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <div class="verticalWrap">
  3. <div class="bg">
  4. <img
  5. class="bgUp"
  6. src="@/assets/image/horImg/background_up_ver.png"
  7. />
  8. <img
  9. class="bgBuild"
  10. src="@/assets/image/horImg/background.png"
  11. />
  12. </div>
  13. <div class="container">
  14. <div class="hor-head">
  15. <pageHead />
  16. </div>
  17. <div
  18. class="hor-content"
  19. v-if="nowPage == 1"
  20. >
  21. <NowData screenType="ver"></NowData>
  22. <airSwitchVer></airSwitchVer>
  23. <TemChart screenType="ver"></TemChart>
  24. <LastMonthData screenType="ver"></LastMonthData>
  25. </div>
  26. <div
  27. class="hor-content"
  28. v-if="nowPage == 2"
  29. >
  30. <HorFloorSpace
  31. screenType="ver"
  32. :showPing="nowPage"
  33. @donetowpage="doneTowPage"
  34. ></HorFloorSpace>
  35. </div>
  36. <div
  37. class="hor-content"
  38. v-if="nowPage == 3"
  39. >
  40. <LastAllEnergy screenType="ver"></LastAllEnergy>
  41. <LastSaveEnergy screenType="ver"></LastSaveEnergy>
  42. <lastEnergyChart
  43. screenType="ver"
  44. :showPing="nowPage"
  45. @donethreepage="doneThreePage"
  46. ></lastEnergyChart>
  47. </div>
  48. </div>
  49. </div>
  50. </template>
  51. <script lang="ts">
  52. import { ref, defineComponent, reactive, toRefs, watch, onMounted } from "vue";
  53. import { storeToRefs } from "pinia";
  54. import useProjectStore from "@/store/useProjectStore";
  55. import pageHead from "@/components/pageHead.vue";
  56. import NowData from "@/components/NowData.vue";
  57. import LastMonthData from "@/components/LastMonthData.vue";
  58. import airSwitchVer from "@/components/airSwitchVer.vue";
  59. import airSwitchHor from "@/components/airSwitchHor.vue";
  60. import TemChart from "@/components/TemChart.vue";
  61. import LastAllEnergy from "@/components/LastAllEnergy.vue";
  62. import LastSaveEnergy from "@/components/LastSaveEnergy.vue";
  63. import HorFloorSpace from "@/components/HorFloorSpace.vue";
  64. import lastEnergyChart from "@/components/lastEnergyChart.vue";
  65. export default defineComponent({
  66. components: {
  67. pageHead: pageHead,
  68. NowData: NowData,
  69. LastMonthData: LastMonthData,
  70. airSwitchVer: airSwitchVer,
  71. TemChart: TemChart,
  72. HorFloorSpace: HorFloorSpace,
  73. LastAllEnergy: LastAllEnergy,
  74. lastEnergyChart: lastEnergyChart,
  75. airSwitchHor: airSwitchHor,
  76. LastSaveEnergy: LastSaveEnergy,
  77. },
  78. setup() {
  79. const allData = reactive({
  80. nowPage: 1,
  81. showAllPage: 3,
  82. doneThreePage() {
  83. //第三屏刷新结束 通知
  84. allData.nowPage = 1;
  85. allData.timePageShow(); //1屏变2屏
  86. },
  87. doneTowPage() {
  88. //第二屏刷新结束 通知
  89. if (allData.showAllPage == 3) {
  90. allData.nowPage = 3;
  91. } else if (allData.showAllPage == 2) {
  92. allData.nowPage = 1;
  93. allData.timePageShow(); //1屏变2屏
  94. }
  95. },
  96. timePageShow() {
  97. var timeoutsign = setTimeout(() => {
  98. allData.nowPage = allData.nowPage + 1;
  99. // if (allData.nowPage == 4) {
  100. // allData.nowPage = 1;
  101. // }
  102. }, 6000);
  103. },
  104. });
  105. onMounted(() => {
  106. allData.timePageShow();
  107. });
  108. return { ...toRefs(allData) };
  109. },
  110. });
  111. </script>
  112. <style scoped lang="scss">
  113. .verticalWrap {
  114. padding: 40px 40px 100px;
  115. overflow: hidden;
  116. height: 100%;
  117. min-height: 1280px; //todo
  118. box-sizing: border-box;
  119. scrollbar-width: none;
  120. position: relative;
  121. .container {
  122. height: 100%;
  123. }
  124. .bg {
  125. position: absolute;
  126. top: 0;
  127. left: 0;
  128. z-index: -1;
  129. right: 0;
  130. bottom: 0;
  131. overflow: hidden;
  132. .bgUp {
  133. position: absolute;
  134. top: 0;
  135. left: 0;
  136. width: 100%;
  137. height: 100%;
  138. z-index: -2;
  139. }
  140. .bgBuild {
  141. position: absolute;
  142. top: -10%;
  143. left: 0;
  144. width: 120%;
  145. height: 100%;
  146. z-index: -4;
  147. animation: mymove 20s linear infinite alternate;
  148. -webkit-animation: mymove 20s linear infinite alternate;
  149. }
  150. @keyframes mymove {
  151. from {
  152. left: 0px;
  153. }
  154. to {
  155. left: -20%;
  156. }
  157. }
  158. img {
  159. // width: 100%;
  160. // height: 100%;
  161. }
  162. }
  163. .hor-head {
  164. height: 150px;
  165. box-sizing: border-box;
  166. }
  167. .hor-content {
  168. height: calc(100% - 150px);
  169. }
  170. }
  171. </style>