index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. <template>
  2. <div class="horizontalScreen">
  3. <div class="bg">
  4. <img
  5. class="bgUp"
  6. src="@/assets/image/horImg/background_up.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 @toplay="toplay" @tostop="tostop" @nextpage="nextpage" @lastpage="lastpage"/>
  16. </div>
  17. <div
  18. class="hor-content firstScreen flexBetween"
  19. v-if="nowPage == 1"
  20. >
  21. <div class="content-left">
  22. <NowData screenType="hor" />
  23. <div class="content-left-cont horizontalClass flexBetween">
  24. <div class="bottom-left">
  25. <airSwitchHor></airSwitchHor>
  26. <!-- <airSwitchVer></airSwitchVer> -->
  27. </div>
  28. <div class="bottom-right">
  29. <TemChart screenType="hor"></TemChart>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="content-right">
  34. <LastMonthData screenType="hor"></LastMonthData>
  35. </div>
  36. </div>
  37. <div
  38. class="hor-content"
  39. v-if="nowPage == 2"
  40. >
  41. <HorFloorSpace
  42. screenType="hor"
  43. :showPing="nowPage"
  44. @donetowpage="doneTowPage"
  45. ref="floorSpace"
  46. ></HorFloorSpace>
  47. </div>
  48. <div
  49. class="hor-content threeScreen"
  50. v-if="nowPage == 3"
  51. >
  52. <div class="topCont flexBetween">
  53. <div class="threeLeft">
  54. <LastAllEnergy screenType="hor"></LastAllEnergy>
  55. </div>
  56. <div class="threeRight">
  57. <LastSaveEnergy screenType="hor"></LastSaveEnergy>
  58. </div>
  59. </div>
  60. <div class="bottomCont">
  61. <lastEnergyChart screenType="hor"></lastEnergyChart>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </template>
  67. <script lang="ts">
  68. import { ref, reactive, toRefs, onMounted, computed ,nextTick} from "vue";
  69. import pageHead from "@/components/pageHead.vue";
  70. import NowData from "@/components/NowData.vue";
  71. import LastMonthData from "@/components/LastMonthData.vue";
  72. import airSwitchVer from "@/components/airSwitchVer.vue";
  73. import airSwitchHor from "@/components/airSwitchHor.vue";
  74. import TemChart from "@/components/TemChart.vue";
  75. import LastAllEnergy from "@/components/LastAllEnergy.vue";
  76. import LastSaveEnergy from "@/components/LastSaveEnergy.vue";
  77. import HorFloorSpace from "@/components/HorFloorSpace.vue";
  78. import lastEnergyChart from "@/components/lastEnergyChart.vue";
  79. import { storeToRefs } from "pinia";
  80. import useProjectStore from "@/store/useProjectStore";
  81. export default {
  82. components: {
  83. pageHead: pageHead,
  84. NowData: NowData,
  85. LastMonthData: LastMonthData,
  86. airSwitchVer: airSwitchVer,
  87. TemChart: TemChart,
  88. HorFloorSpace: HorFloorSpace,
  89. LastAllEnergy: LastAllEnergy,
  90. lastEnergyChart: lastEnergyChart,
  91. airSwitchHor: airSwitchHor,
  92. LastSaveEnergy: LastSaveEnergy,
  93. },
  94. setup() {
  95. const floorSpace = ref();
  96. const projectStore = useProjectStore();
  97. var showAllPage = computed(() => {
  98. console.log(
  99. "lastAllEnergy",
  100. projectStore.lastAllEnergy.energyTotal
  101. );
  102. if (
  103. projectStore.lastAllEnergy.energyTotal === undefined &&
  104. projectStore.lastAllEnergy.energyCompare === undefined
  105. ) {
  106. return 2;
  107. } else {
  108. return 3;
  109. }
  110. });
  111. // projectStore.$subscribe((mutation, state) => {
  112. // console.log(
  113. // "projectStore--state1",
  114. // state,
  115. // state.lastAllEnergy.energySaving
  116. // );
  117. // });
  118. const allData = reactive({
  119. nowPage: 1,
  120. timeoutsign:null,
  121. //showAllPage: 3,
  122. toplay(){
  123. //todo
  124. if(allData.nowPage==2){
  125. floorSpace.value&&floorSpace.value.toplay();//第二屏动画播放
  126. }else{
  127. allData.timePageShow(500);
  128. }
  129. },
  130. tostop(){
  131. //todo
  132. if(allData.nowPage==2){
  133. floorSpace.value&&floorSpace.value.tostop();//第二屏动画暂停
  134. }
  135. clearTimeout(allData.timeoutsign);
  136. },
  137. nextpage(){
  138. clearTimeout(allData.timeoutsign);
  139. if (allData.nowPage == 3) {
  140. allData.nowPage = 1;
  141. !projectStore.stopSign&&allData.timePageShow(7000);//3屏变1屏时,预订下一次的切屏
  142. return;
  143. }
  144. if (allData.nowPage == 1) {
  145. allData.nowPage = 2;
  146. return;
  147. }
  148. if (allData.nowPage == 2) {
  149. if (showAllPage.value == 3) {
  150. allData.nowPage = 3;
  151. } else if (showAllPage.value == 2) {
  152. allData.nowPage = 1;
  153. }
  154. !projectStore.stopSign&&allData.timePageShow(7000);//预订下一次的切屏
  155. }
  156. },
  157. lastpage(){
  158. clearTimeout(allData.timeoutsign);
  159. if (allData.nowPage == 3) {
  160. allData.nowPage = 2;
  161. return;
  162. }
  163. if (allData.nowPage == 2) {
  164. allData.nowPage = 1;
  165. !projectStore.stopSign&&allData.timePageShow(7000);//3屏变1屏时,预订下一次的切屏
  166. return;
  167. }
  168. if (allData.nowPage == 1) {
  169. if (showAllPage.value == 3) {
  170. allData.nowPage = 3;
  171. !projectStore.stopSign&&allData.timePageShow(7000);//1屏变3屏时,预订下一次的切屏
  172. } else if (showAllPage.value == 2) {
  173. allData.nowPage = 2;
  174. }
  175. }
  176. },
  177. doneTowPage() {
  178. if(projectStore.stopSign){
  179. return;
  180. }
  181. //第二屏刷新结束 通知
  182. allData.timePageShow(500);
  183. },
  184. timePageShow(time) {
  185. allData.timeoutsign = setTimeout(() => {
  186. if(projectStore.stopSign){
  187. //clearTimeout(allData.timeoutsign);
  188. return;
  189. }
  190. if (allData.nowPage == 3) {
  191. allData.nowPage = 1;
  192. //console.log('allData.nowPage3',allData.nowPage,time);
  193. allData.timePageShow(7000);//3屏变1屏时,预订下一次的切屏
  194. return;
  195. }
  196. if (allData.nowPage == 1) {
  197. allData.nowPage = 2;
  198. console.log('allData.nowPage1',allData.nowPage,time);
  199. return;
  200. }
  201. if (allData.nowPage == 2) {
  202. if (showAllPage.value == 3) {
  203. allData.nowPage = 3;
  204. } else if (showAllPage.value == 2) {
  205. allData.nowPage = 1;
  206. }
  207. console.log('allData.nowPage2',allData.nowPage,time);
  208. allData.timePageShow(7000);//2屏变3屏 或 2屏变1屏时,预订下一次的切屏
  209. }
  210. }, time);
  211. },
  212. });
  213. onMounted(() => {
  214. //console.log("horiscreen-mounted");
  215. allData.timePageShow(7000);
  216. });
  217. return {
  218. ...toRefs(allData),floorSpace
  219. };
  220. },
  221. };
  222. </script>
  223. <style scoped lang="scss">
  224. .horizontalScreen {
  225. padding: 40px;
  226. height: 100%;
  227. overflow: hidden;
  228. box-sizing: border-box;
  229. scrollbar-width: none;
  230. position: relative;
  231. .container {
  232. height: 100%;
  233. }
  234. .bg {
  235. position: absolute;
  236. top: 0;
  237. left: 0;
  238. z-index: -1;
  239. right: 0;
  240. bottom: 0;
  241. overflow: hidden;
  242. .bgUp {
  243. position: absolute;
  244. top: 0;
  245. left: 0;
  246. width: 100%;
  247. height: 100%;
  248. z-index: -2;
  249. }
  250. .bgBuild {
  251. position: absolute;
  252. top: 0%;
  253. left: 0;
  254. width: 120%;
  255. height: 120%;
  256. // height: 1420PX;//不想自动转换成rem的px 只需要将px大写 PX就可以了
  257. z-index: -4;
  258. animation: mymove 40s linear infinite alternate;
  259. -webkit-animation: mymove 40s linear infinite alternate;
  260. }
  261. @keyframes mymove {
  262. from {
  263. left: 0px;
  264. }
  265. to {
  266. left: -20%;
  267. }
  268. }
  269. img {
  270. }
  271. }
  272. .hor-head {
  273. height: 134px;
  274. box-sizing: border-box;
  275. }
  276. .hor-content {
  277. height: calc(100% - 134px);
  278. }
  279. .firstScreen {
  280. box-sizing: border-box;
  281. .content-left {
  282. width: calc(100% - 303px);
  283. height: 100%;
  284. }
  285. .content-right {
  286. width: 303px;
  287. height: 100%;
  288. }
  289. .content-left-cont {
  290. height: 52%;
  291. .bottom-left {
  292. width: 36%;
  293. height: 100%;
  294. background: rgba(100, 108, 130, 0.06);
  295. backdrop-filter: blur(20px);
  296. border-top-left-radius: 20px;
  297. border-bottom-left-radius: 20px;
  298. }
  299. .bottom-right {
  300. width: 64%;
  301. height: 100%;
  302. background: rgba(100, 108, 130, 0.06);
  303. backdrop-filter: blur(20px);
  304. border-top-right-radius: 20px;
  305. border-bottom-right-radius: 20px;
  306. }
  307. }
  308. }
  309. .flexBetween {
  310. display: flex;
  311. justify-content: space-between;
  312. }
  313. }
  314. .threeScreen {
  315. .topCont {
  316. height: 56%;
  317. .threeLeft {
  318. position: relative;
  319. height: 100%;
  320. width: 40%;
  321. box-sizing: border-box;
  322. padding-right: 25px;
  323. .left-content {
  324. text-align: center;
  325. height: 390px;
  326. width: 100%;
  327. margin-top: 20px;
  328. position: relative;
  329. display: flex;
  330. justify-content: center;
  331. align-items: center;
  332. .lastbg {
  333. position: absolute;
  334. }
  335. }
  336. }
  337. .threeRight {
  338. position: relative;
  339. height: 100%;
  340. width: 60%;
  341. }
  342. }
  343. .bottomCont {
  344. height: 44%;
  345. padding-top: 24px;
  346. box-sizing: border-box;
  347. }
  348. }
  349. </style>