123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- <template>
- <div class="verticalWrap">
- <div class="bg">
- <img
- class="bgUp"
- src="@/assets/image/horImg/background_up_ver.png"
- />
- <img
- class="bgBuild"
- src="@/assets/image/horImg/background.png"
- />
- </div>
- <div class="container">
- <div class="hor-head">
- <pageHead />
- </div>
- <div
- class="hor-content"
- v-if="nowPage == 1"
- >
- <NowData screenType="ver"></NowData>
- <airSwitchVer></airSwitchVer>
- <TemChart screenType="ver"></TemChart>
- <LastMonthData screenType="ver"></LastMonthData>
- </div>
- <div
- class="hor-content"
- v-if="nowPage == 2"
- >
- <HorFloorSpace
- screenType="ver"
- :showPing="nowPage"
- @donetowpage="doneTowPage"
- ></HorFloorSpace>
- </div>
- <div
- class="hor-content"
- v-if="nowPage == 3"
- >
- <LastAllEnergy screenType="ver"></LastAllEnergy>
- <LastSaveEnergy screenType="ver"></LastSaveEnergy>
- <lastEnergyChart
- screenType="ver"
- :showPing="nowPage"
- @donethreepage="doneThreePage"
- ></lastEnergyChart>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import { ref, defineComponent, reactive, toRefs, watch, onMounted } from "vue";
- import { storeToRefs } from "pinia";
- import useProjectStore from "@/store/useProjectStore";
- import pageHead from "@/components/pageHead.vue";
- import NowData from "@/components/NowData.vue";
- import LastMonthData from "@/components/LastMonthData.vue";
- import airSwitchVer from "@/components/airSwitchVer.vue";
- import airSwitchHor from "@/components/airSwitchHor.vue";
- import TemChart from "@/components/TemChart.vue";
- import LastAllEnergy from "@/components/LastAllEnergy.vue";
- import LastSaveEnergy from "@/components/LastSaveEnergy.vue";
- import HorFloorSpace from "@/components/HorFloorSpace.vue";
- import lastEnergyChart from "@/components/lastEnergyChart.vue";
- export default defineComponent({
- components: {
- pageHead: pageHead,
- NowData: NowData,
- LastMonthData: LastMonthData,
- airSwitchVer: airSwitchVer,
- TemChart: TemChart,
- HorFloorSpace: HorFloorSpace,
- LastAllEnergy: LastAllEnergy,
- lastEnergyChart: lastEnergyChart,
- airSwitchHor: airSwitchHor,
- LastSaveEnergy: LastSaveEnergy,
- },
- setup() {
- const allData = reactive({
- nowPage: 1,
- showAllPage: 3,
- doneThreePage() {
- //第三屏刷新结束 通知
- allData.nowPage = 1;
- allData.timePageShow(); //1屏变2屏
- },
- doneTowPage() {
- //第二屏刷新结束 通知
- if (allData.showAllPage == 3) {
- allData.nowPage = 3;
- } else if (allData.showAllPage == 2) {
- allData.nowPage = 1;
- allData.timePageShow(); //1屏变2屏
- }
- },
- timePageShow() {
- var timeoutsign = setTimeout(() => {
- allData.nowPage = allData.nowPage + 1;
- // if (allData.nowPage == 4) {
- // allData.nowPage = 1;
- // }
- }, 6000);
- },
- });
- onMounted(() => {
- allData.timePageShow();
- });
- return { ...toRefs(allData) };
- },
- });
- </script>
- <style scoped lang="scss">
- .verticalWrap {
- padding: 40px 40px 100px;
- overflow: hidden;
- height: 100%;
- min-height: 1280px; //todo
- box-sizing: border-box;
- scrollbar-width: none;
- position: relative;
- .container {
- height: 100%;
- }
- .bg {
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- right: 0;
- bottom: 0;
- overflow: hidden;
- .bgUp {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -2;
- }
- .bgBuild {
- position: absolute;
- top: -10%;
- left: 0;
- width: 120%;
- height: 100%;
- z-index: -4;
- animation: mymove 20s linear infinite alternate;
- -webkit-animation: mymove 20s linear infinite alternate;
- }
- @keyframes mymove {
- from {
- left: 0px;
- }
- to {
- left: -20%;
- }
- }
- img {
- // width: 100%;
- // height: 100%;
- }
- }
- .hor-head {
- height: 150px;
- box-sizing: border-box;
- }
- .hor-content {
- height: calc(100% - 150px);
- }
- }
- </style>
|