Browse Source

修改诺和诺德轮播时间修改为15秒

wind 10 months ago
parent
commit
9f5c23ac01
1 changed files with 309 additions and 315 deletions
  1. 309 315
      src/views/horiScreen/index.vue

+ 309 - 315
src/views/horiScreen/index.vue

@@ -1,71 +1,64 @@
 <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" v-if="projectStore.projectId !== 'Pj1101050057'">
-                            <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="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="hor-content"
-                v-if="nowPage == 2"
+              class="bottom-left"
+              v-if="projectStore.projectId !== 'Pj1101050057'"
             >
-                <HorFloorSpace
-                    screenType="hor"
-                    :showPing="nowPage"
-                    @donetowpage="doneTowPage"
-                    ref="floorSpace"
-                ></HorFloorSpace>
+              <airSwitchHor></airSwitchHor>
+              <!-- <airSwitchVer></airSwitchVer> -->
             </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 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 { 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";
@@ -81,285 +74,286 @@ 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
-        //     );
-        // });
+  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();
 
-        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);
-            },
+    console.log(projectStore);
 
+    let intervalNumber = 7000;
 
+    if (projectStore.projectId === "Pj1101050057") {
+      intervalNumber = 15000;
+    }
 
-        });
-        onMounted(() => {
-            //console.log("horiscreen-mounted");
-            allData.timePageShow(7000);
+    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
+    //     );
+    // });
 
-        });
-        return {
-            ...toRefs(allData),floorSpace,projectStore
-        };
-    },
+    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(intervalNumber); //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(intervalNumber); //预订下一次的切屏
+        }
+      },
+      lastpage() {
+        clearTimeout(allData.timeoutsign);
+        if (allData.nowPage == 3) {
+          allData.nowPage = 2;
+          return;
+        }
+        if (allData.nowPage == 2) {
+          allData.nowPage = 1;
+          !projectStore.stopSign && allData.timePageShow(intervalNumber); //3屏变1屏时,预订下一次的切屏
+          return;
+        }
+        if (allData.nowPage == 1) {
+          if (showAllPage.value == 3) {
+            allData.nowPage = 3;
+            !projectStore.stopSign && allData.timePageShow(intervalNumber); //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(intervalNumber); //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(intervalNumber); //2屏变3屏 或 2屏变1屏时,预订下一次的切屏
+          }
+        }, time);
+      },
+    });
+    onMounted(() => {
+      //console.log("horiscreen-mounted");
+      allData.timePageShow(intervalNumber);
+    });
+    return {
+      ...toRefs(allData),
+      floorSpace,
+      projectStore,
+    };
+  },
 };
 </script>
 
 <style scoped lang="scss">
 .horizontalScreen {
-    padding: 40px;
+  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;
-    box-sizing: border-box;
-    scrollbar-width: none;
-    position: relative;
-    .container {
-        height: 100%;
+    .bgUp {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -2;
     }
-    .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 {
-        }
+    .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;
     }
-    .hor-head {
-        height: 134px;
-        box-sizing: border-box;
+    @keyframes mymove {
+      from {
+        left: 0px;
+      }
+      to {
+        left: -20%;
+      }
     }
-    .hor-content {
-        height: calc(100% - 134px);
+    img {
     }
-    .firstScreen {
-        box-sizing: border-box;
+  }
+  .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%;
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: stretch;
-            justify-content: flex-start;
-            .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 {
-                flex: 1;
-                height: 100%;
-                background: rgba(100, 108, 130, 0.06);
-                backdrop-filter: blur(20px);
-                border-top-right-radius: 20px;
-                border-bottom-right-radius: 20px;
-            }
-        }
+    .content-left {
+      width: calc(100% - 303px);
+      height: 100%;
     }
-    .flexBetween {
-        display: flex;
-        justify-content: space-between;
+    .content-right {
+      width: 303px;
+      height: 100%;
     }
+    .content-left-cont {
+      height: 52%;
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: stretch;
+      justify-content: flex-start;
+      .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 {
+        flex: 1;
+        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%;
+  .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;
         }
+      }
     }
-    .bottomCont {
-        height: 44%;
-        padding-top: 24px;
-        box-sizing: border-box;
+    .threeRight {
+      position: relative;
+      height: 100%;
+      width: 60%;
     }
+  }
+  .bottomCont {
+    height: 44%;
+    padding-top: 24px;
+    box-sizing: border-box;
+  }
 }
 </style>