123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361 |
- <template>
- <div class="horizontalScreen">
- <div class="bg">
- <img
- class="bgUp"
- src="@/assets/image/horImg/background_up.png"
- />
- <img
- class="bgBuild"
- src="@/assets/image/horImg/background.png"
- />
- </div>
- <div class="container">
- <div class="hor-head">
- <pageHead @toplay="toplay" @tostop="tostop" @nextpage="nextpage" @lastpage="lastpage"/>
- </div>
- <div
- class="hor-content firstScreen flexBetween"
- v-if="nowPage == 1"
- >
- <div class="content-left">
- <NowData screenType="hor" />
- <div class="content-left-cont horizontalClass flexBetween">
- <div class="bottom-left">
- <airSwitchHor></airSwitchHor>
- <!-- <airSwitchVer></airSwitchVer> -->
- </div>
- <div class="bottom-right">
- <TemChart screenType="hor"></TemChart>
- </div>
- </div>
- </div>
- <div class="content-right">
- <LastMonthData screenType="hor"></LastMonthData>
- </div>
- </div>
- <div
- class="hor-content"
- v-if="nowPage == 2"
- >
- <HorFloorSpace
- screenType="hor"
- :showPing="nowPage"
- @donetowpage="doneTowPage"
- ref="floorSpace"
- ></HorFloorSpace>
- </div>
- <div
- class="hor-content threeScreen"
- v-if="nowPage == 3"
- >
- <div class="topCont flexBetween">
- <div class="threeLeft">
- <LastAllEnergy screenType="hor"></LastAllEnergy>
- </div>
- <div class="threeRight">
- <LastSaveEnergy screenType="hor"></LastSaveEnergy>
- </div>
- </div>
- <div class="bottomCont">
- <lastEnergyChart screenType="hor"></lastEnergyChart>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import { ref, reactive, toRefs, onMounted, computed ,nextTick} from "vue";
- 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";
- import { storeToRefs } from "pinia";
- import useProjectStore from "@/store/useProjectStore";
- export default {
- components: {
- pageHead: pageHead,
- NowData: NowData,
- LastMonthData: LastMonthData,
- airSwitchVer: airSwitchVer,
- TemChart: TemChart,
- HorFloorSpace: HorFloorSpace,
- LastAllEnergy: LastAllEnergy,
- lastEnergyChart: lastEnergyChart,
- airSwitchHor: airSwitchHor,
- LastSaveEnergy: LastSaveEnergy,
- },
- setup() {
- const floorSpace = ref();
- const projectStore = useProjectStore();
- var showAllPage = computed(() => {
- console.log(
- "lastAllEnergy",
- projectStore.lastAllEnergy.energyTotal
- );
- if (
- projectStore.lastAllEnergy.energyTotal === undefined &&
- projectStore.lastAllEnergy.energyCompare === undefined
- ) {
- return 2;
- } else {
- return 3;
- }
- });
- // projectStore.$subscribe((mutation, state) => {
- // console.log(
- // "projectStore--state1",
- // state,
- // state.lastAllEnergy.energySaving
- // );
- // });
- const allData = reactive({
- nowPage: 1,
- timeoutsign:null,
- //showAllPage: 3,
- toplay(){
- //todo
- if(allData.nowPage==2){
- floorSpace.value&&floorSpace.value.toplay();//第二屏动画播放
- }else{
- allData.timePageShow(500);
- }
- },
- tostop(){
- //todo
- if(allData.nowPage==2){
- floorSpace.value&&floorSpace.value.tostop();//第二屏动画暂停
- }
- clearTimeout(allData.timeoutsign);
- },
- nextpage(){
- clearTimeout(allData.timeoutsign);
- if (allData.nowPage == 3) {
- allData.nowPage = 1;
- !projectStore.stopSign&&allData.timePageShow(7000);//3屏变1屏时,预订下一次的切屏
- return;
- }
- if (allData.nowPage == 1) {
- allData.nowPage = 2;
- return;
- }
- if (allData.nowPage == 2) {
- if (showAllPage.value == 3) {
- allData.nowPage = 3;
- } else if (showAllPage.value == 2) {
- allData.nowPage = 1;
- }
- !projectStore.stopSign&&allData.timePageShow(7000);//预订下一次的切屏
- }
- },
- lastpage(){
- clearTimeout(allData.timeoutsign);
- if (allData.nowPage == 3) {
- allData.nowPage = 2;
- return;
- }
- if (allData.nowPage == 2) {
- allData.nowPage = 1;
- !projectStore.stopSign&&allData.timePageShow(7000);//3屏变1屏时,预订下一次的切屏
- return;
- }
- if (allData.nowPage == 1) {
- if (showAllPage.value == 3) {
- allData.nowPage = 3;
- !projectStore.stopSign&&allData.timePageShow(7000);//1屏变3屏时,预订下一次的切屏
- } else if (showAllPage.value == 2) {
- allData.nowPage = 2;
- }
- }
- },
- doneTowPage() {
- if(projectStore.stopSign){
- return;
- }
- //第二屏刷新结束 通知
- allData.timePageShow(500);
- },
- timePageShow(time) {
- allData.timeoutsign = setTimeout(() => {
-
- if(projectStore.stopSign){
- //clearTimeout(allData.timeoutsign);
- return;
- }
- if (allData.nowPage == 3) {
- allData.nowPage = 1;
- //console.log('allData.nowPage3',allData.nowPage,time);
- allData.timePageShow(7000);//3屏变1屏时,预订下一次的切屏
- return;
- }
- if (allData.nowPage == 1) {
- allData.nowPage = 2;
- console.log('allData.nowPage1',allData.nowPage,time);
- return;
- }
- if (allData.nowPage == 2) {
- if (showAllPage.value == 3) {
- allData.nowPage = 3;
- } else if (showAllPage.value == 2) {
- allData.nowPage = 1;
- }
- console.log('allData.nowPage2',allData.nowPage,time);
- allData.timePageShow(7000);//2屏变3屏 或 2屏变1屏时,预订下一次的切屏
- }
-
- }, time);
- },
- });
- onMounted(() => {
- //console.log("horiscreen-mounted");
- allData.timePageShow(7000);
- });
- return {
- ...toRefs(allData),floorSpace
- };
- },
- };
- </script>
- <style scoped lang="scss">
- .horizontalScreen {
- padding: 40px;
- height: 100%;
- overflow: hidden;
- 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: 0%;
- left: 0;
- width: 120%;
- height: 120%;
- // height: 1420PX;//不想自动转换成rem的px 只需要将px大写 PX就可以了
- z-index: -4;
- animation: mymove 40s linear infinite alternate;
- -webkit-animation: mymove 40s linear infinite alternate;
- }
- @keyframes mymove {
- from {
- left: 0px;
- }
- to {
- left: -20%;
- }
- }
- img {
- }
- }
- .hor-head {
- height: 134px;
- box-sizing: border-box;
- }
- .hor-content {
- height: calc(100% - 134px);
- }
- .firstScreen {
- box-sizing: border-box;
- .content-left {
- width: calc(100% - 303px);
- height: 100%;
- }
- .content-right {
- width: 303px;
- height: 100%;
- }
- .content-left-cont {
- height: 52%;
- .bottom-left {
- width: 36%;
- height: 100%;
- background: rgba(100, 108, 130, 0.06);
- backdrop-filter: blur(20px);
- border-top-left-radius: 20px;
- border-bottom-left-radius: 20px;
- }
- .bottom-right {
- width: 64%;
- height: 100%;
- background: rgba(100, 108, 130, 0.06);
- backdrop-filter: blur(20px);
- border-top-right-radius: 20px;
- border-bottom-right-radius: 20px;
- }
- }
- }
- .flexBetween {
- display: flex;
- justify-content: space-between;
- }
- }
- .threeScreen {
- .topCont {
- height: 56%;
- .threeLeft {
- position: relative;
- height: 100%;
- width: 40%;
- box-sizing: border-box;
- padding-right: 25px;
- .left-content {
- text-align: center;
- height: 390px;
- width: 100%;
- margin-top: 20px;
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- .lastbg {
- position: absolute;
- }
- }
- }
- .threeRight {
- position: relative;
- height: 100%;
- width: 60%;
- }
- }
- .bottomCont {
- height: 44%;
- padding-top: 24px;
- box-sizing: border-box;
- }
- }
- </style>
|