修改播放问题

src/components/HorFloorSpace.vue

@@ -155,6 +155,7 @@ export default defineComponent({
         const projectStore = useProjectStore();
         const allData = reactive({
             selectColor: selectColor,
+            timeoutsign:null,
             selIndicator: {},
             selIndicatorId: "", //为了颜色用
             //              温度
@@ -334,13 +335,19 @@ export default defineComponent({
 
                         allData.nowIndicatorIndex = 0;
                         //debugger;
-                        allData.getTimeFloorParam();
+                        allData.getTimeFloorParam(2000);
                     })
                     .catch(function(res) {
                         // loading.close();
                     });
             },
-            getTimeFloorParam() {
+            toplay(){
+                allData.getTimeFloorParam(500);
+            },
+            tostop(){
+                clearTimeout(allData.timeoutsign);
+            },
+            getTimeFloorParam(time) {
                 //第一屏的参数 第二屏的参数
                 var floorparam =
                     allData.nowPage == 1
@@ -348,21 +355,23 @@ export default defineComponent({
                         : allData.secondPageParams;
 
                 allData.fqueryParam(floorparam).then(() => {
-                    var timeoutsign = setTimeout(() => {
+                    allData.timeoutsign = setTimeout(() => {
                         //debugger;
+                        // if(projectStore.stopSign){ 
+                        //     return;
+                        // }
                         allData.nowIndicatorIndex =
                             allData.nowIndicatorIndex + 1; //湿度等指标的轮询变化
-                        if (allData.nowIndicatorIndex == 5) {
+                        if (allData.nowIndicatorIndex == 5) {//如果指标轮询结束 通知切换
                             if (allData.pageNum == allData.nowPage) {
-                                //如果指标轮询结束 通知切换
-
+                                
                                 allData.nowPage = 1;
                                 if (
                                     allData.nowBuildPage ==
                                     allData.allBuild.length
                                 ) {
-                                    contx.emit("donetowpage"); //todo
-                                    clearTimeout(timeoutsign);
+                                    contx.emit("donetowpage"); 
+                                    clearTimeout(allData.timeoutsign);
                                 } else {
                                     //换下一个建筑
                                     allData.nowBuildPage =
@@ -377,8 +386,8 @@ export default defineComponent({
                                 allData.nowIndicatorIndex = 0;
                             }
                         }
-                        allData.getTimeFloorParam();
-                    }, 2000);
+                        allData.getTimeFloorParam(2000);
+                    }, time);
                 });
             },
             fqueryParam(floorparam) {
@@ -465,6 +474,7 @@ export default defineComponent({
         onMounted(() => {
             allData.nowPage = 1;
             allData.hqueryBuild();
+            console.log("floorspace-mounted");
         });
         return { ...toRefs(allData) };
     },

src/components/TemChart.vue

@@ -104,7 +104,7 @@ export default defineComponent({
             //     this.tempChart.clear();
             //     var chart = this.tempChart;
             // } else {
-            var chart = new Chart({
+            var chart = tempChartRef.value && new Chart({
                 container: "tempChartBox",
                 autoFit: true,
                 // width: chartWidth,

src/components/lastEnergyChart.vue

@@ -55,6 +55,7 @@ export default defineComponent({
         const allData = reactive({
             lastChart: null,
             ds: null,
+            intervalInt:null,
             getLastDayEnergy() {
                 queryLastDayEnergy().then((res) => {
                     var resdata = res.data.content || [];
@@ -90,21 +91,28 @@ export default defineComponent({
                     allData.setChartInterval();
                 });
             },
+            toplay(){
+                allData.setChartInterval();
+            },
+            tostop(){
+                clearInterval(allData.intervalInt);
+            },
             setChartInterval() {
                 if (props.screenType == "ver") {
                     //只有竖屏才轮播
                     //上个月
-                    var start = moment()
-                        .subtract(1, "months")
-                        .date(1);
-                    var end = moment()
-                        .subtract(1, "months")
-                        .date(12);
-                    var end2 = moment().subtract(1, "months");
-                    var intervalInt = setInterval(() => {
-                        start.add(1, "days");
-                        end.add(1, "days");
+                    // var start = moment()
+                    //     .subtract(1, "months")
+                    //     .date(1);
+                    // var end = moment()
+                    //     .subtract(1, "months")
+                    //     .date(12);
+                    //var end2 = moment().subtract(1, "months");
+                    allData.intervalInt = setInterval(() => {
+                        var start=moment(allData.ds.state.laststart).add(1, "days");
+                        var end=moment(allData.ds.state.lastend).add(1, "days");
 
+                        //console.log('ds.state.lastend',allData.ds.state.lastend,start);
                         allData.ds.setState(
                             "laststart",
                             start.format("YYYY-MM-DD")
@@ -114,6 +122,7 @@ export default defineComponent({
                             end.format("YYYY-MM-DD")
                         );
                         const rows = allData.ds.views.ttime.rows;
+                        
                         allData.lastChart.changeData(rows);
 
                         //console.log("rows----", rows.length, rows, start, end);
@@ -124,7 +133,7 @@ export default defineComponent({
                         // });
 
                         if (rows.length == 11) {
-                            clearInterval(intervalInt);
+                            clearInterval(allData.intervalInt);
                             contx.emit("donethreepage");
                         }
                     }, 800);

src/components/pageHead.vue

@@ -30,9 +30,17 @@
                 />
             </div>
             <div
-                class="right-item"
-                style="display: none"
-            >退出</div>
+                class="right-item showButton" @click="toPlay"
+            >播放</div>
+            <div
+                class="right-item showButton" @click="toStop"
+            >暂停</div>
+            <div
+                class="right-item showButton" @click="toLast"
+            >上一页</div>
+            <div
+                class="right-item showButton" @click="toNext"
+            >下一页</div>
         </div>
     </div>
 </template>
@@ -46,125 +54,143 @@ import { dapingImage } from "@/utils/dapingImage";
 import { setRem } from "@/utils/rem";
 
 export default defineComponent({
-    props: {
-        navigateItem: {
-            type: String,
-        },
+  props: {
+    navigateItem: {
+      type: String,
     },
-    setup(props, contx) {
-        const { persagyLogo, zhijiangLogo, changeHor, changeVer } = dapingImage;
+  },
+  setup(props, contx) {
+    const { persagyLogo, zhijiangLogo, changeHor, changeVer } = dapingImage;
 
-        const route: any = useRoute();
-        const router = useRouter();
-        const projectStore = useProjectStore();
+    const route: any = useRoute();
+    const router = useRouter();
+    const projectStore = useProjectStore();
 
-        const { weatherCont, projectObj, projectId } = storeToRefs(
-            projectStore
-        );
+    const { weatherCont, projectObj, projectId } = storeToRefs(projectStore);
 
-        const allData = reactive({
-            // logo: new URL(
-            //     "../assets/image/horImg/zhijianglogo.png",
-            //     import.meta.url
-            // ).href,
-            logo: projectId == "Pj3301100002" ? zhijiangLogo : persagyLogo,
-            changeHor: changeHor,
-            changeVer: changeVer,
-            nowScreen:
-                route.path.indexOf("horiScreen") > -1
-                    ? "horizontal"
-                    : "vertical",
-            nowStr: moment().format("YYYY.MM.DD HH:mm"),
-            setNowInterval() {
-                setInterval(() => {
-                    var nowTimeStr2 = moment().format("YYYY.MM.DD HH:mm");
-                    allData.nowStr = nowTimeStr2;
-                }, 30000);
-            },
-            changeScreen() {
-                if (allData.nowScreen == "vertical") {
-                    allData.nowScreen = "horizontal";
-                    //setRem("horizontal");
-                    router.push({ path: "/horiScreen" });
-                } else {
-                    allData.nowScreen = "vertical";
-                    //setRem("vertical");
-                    router.push({ path: "/verScreen" });
-                }
-            },
-        });
+    const allData = reactive({
+      // logo: new URL(
+      //     "../assets/image/horImg/zhijianglogo.png",
+      //     import.meta.url
+      // ).href,
+      logo: projectId == "Pj3301100002" ? zhijiangLogo : persagyLogo,
+      changeHor: changeHor,
+      changeVer: changeVer,
+      nowScreen:
+        route.path.indexOf("horiScreen") > -1 ? "horizontal" : "vertical",
+      nowStr: moment().format("YYYY.MM.DD HH:mm"),
+      setNowInterval() {
+        setInterval(() => {
+          var nowTimeStr2 = moment().format("YYYY.MM.DD HH:mm");
+          allData.nowStr = nowTimeStr2;
+        }, 30000);
+      },
+      changeScreen() {
+        if (allData.nowScreen == "vertical") {
+          allData.nowScreen = "horizontal";
+          //setRem("horizontal");
+          router.push({ path: "/horiScreen" });
+        } else {
+          allData.nowScreen = "vertical";
+          //setRem("vertical");
+          router.push({ path: "/verScreen" });
+        }
+      },
+      toPlay() {
+        projectStore.stopSign=false;
+        contx.emit("toplay");
+      },
+      toStop() {
+        debugger;
+        projectStore.stopSign=true;
+        contx.emit("tostop");
+      },
+      toLast() {
+        contx.emit("lastpage");
+      },
+      toNext() {
+        contx.emit("nextpage");
+      },
+    });
 
-        onMounted(() => {
-            allData.setNowInterval();
-        });
-        return { ...toRefs(allData), weatherCont, projectObj };
-    },
+    onMounted(() => {
+        console.log("pagehead-mounted");
+      allData.setNowInterval();
+    });
+    return { ...toRefs(allData), weatherCont, projectObj };
+  },
 });
 </script>
 
 <style scoped lang="scss">
 .horHead {
-    // display: flex;
-    // justify-content: space-between;
-    // align-items: center;
-    position: relative;
-    &.horSty {
-        height: 74px;
+  // display: flex;
+  // justify-content: space-between;
+  // align-items: center;
+  position: relative;
+  &.horSty {
+    height: 74px;
+  }
+  .horHead-content {
+    width: 100%;
+    height: 100%;
+    color: #efdec6;
+    text-align: center;
+    .firtitle {
+      font-weight: 700;
+      font-size: 38px;
+      font-family: Alibaba PuHuiTi;
     }
-    .horHead-content {
-        width: 100%;
-        height: 100%;
-        color: #efdec6;
-        text-align: center;
-        .firtitle {
-            font-weight: 700;
-            font-size: 38px;
-            font-family: Alibaba PuHuiTi;
-        }
-        .sectitle {
-            font-weight: 500;
-            font-size: 16px;
-            letter-spacing: 8px;
-        }
+    .sectitle {
+      font-weight: 500;
+      font-size: 16px;
+      letter-spacing: 8px;
     }
-    .horHead-left {
-        position: absolute;
-        top: 0;
-        left: 0;
-        font-size: 0;
+  }
+  .horHead-left {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 0;
+  }
+  .horHead-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    // justify-content: space-between;
+    height: 46px;
+    // width: 396px;
+    .right-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      // padding: 12px 16px;
+      font-size: 20px;
+      color: #efdec6;
+      font-weight: 400;
+      line-height: 22px;
+      margin-left: 18px;
+      // background: #ffffff99;
+      // border: 2px solid #ffffffcc;
+      box-sizing: border-box;
+      // border-radius: 8px;
+      .firstImg {
+        margin-right: 6px;
+        width: 28px;
+      }
+      .item-time {
+        font-family: Persagy;
+        font-weight: 400;
+      }
     }
-    .horHead-right {
-        position: absolute;
-        top: 0;
-        right: 0;
-        display: flex;
-        // justify-content: space-between;
-        height: 46px;
-        // width: 396px;
-        .right-item {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            // padding: 12px 16px;
-            font-size: 20px;
-            color: #efdec6;
-            font-weight: 400;
-            line-height: 22px;
-            margin-left: 18px;
-            // background: #ffffff99;
-            // border: 2px solid #ffffffcc;
-            box-sizing: border-box;
-            // border-radius: 8px;
-            .firstImg {
-                margin-right: 6px;
-                width: 28px;
-            }
-            .item-time {
-                font-family: Persagy;
-                font-weight: 400;
-            }
-        }
+    .showButton {
+      background: #fff;
+      padding: 5px 8px;
+      color: #4f4f4f;
+      display:none;
     }
+  }
 }
 </style>

src/store/useProjectStore.ts

@@ -6,6 +6,7 @@ interface projectStoreState {
     projectId: string;
     projectObj: any;
     lastAllEnergy: any;
+    stopSign:any
 }
 
 const useProjectStore = defineStore({
@@ -16,10 +17,11 @@ const useProjectStore = defineStore({
             projectId: "Pj1101080259", // "Pj3301100002",
             projectObj: {},
             lastAllEnergy: {},
+            stopSign:false
         };
     },
     getters: {
-        floorIdAfter() {},
+       // floorIdAfter() {},
     },
     actions: {
         setProjectId(param: any) {

src/views/horiScreen/index.vue

@@ -12,7 +12,7 @@
         </div>
         <div class="container">
             <div class="hor-head">
-                <pageHead />
+                <pageHead    @toplay="toplay" @tostop="tostop"  @nextpage="nextpage" @lastpage="lastpage"/>
             </div>
             <div
                 class="hor-content firstScreen flexBetween"
@@ -42,6 +42,7 @@
                     screenType="hor"
                     :showPing="nowPage"
                     @donetowpage="doneTowPage"
+                    ref="floorSpace"
                 ></HorFloorSpace>
             </div>
             <div
@@ -64,7 +65,7 @@
     </div>
 </template>
 <script lang="ts">
-import { ref, reactive, toRefs, onMounted, computed } 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";
@@ -93,6 +94,7 @@ export default {
         LastSaveEnergy: LastSaveEnergy,
     },
     setup() {
+        const floorSpace = ref();
         const projectStore = useProjectStore();
         var showAllPage = computed(() => {
             console.log(
@@ -110,7 +112,7 @@ export default {
         });
         // projectStore.$subscribe((mutation, state) => {
         //     console.log(
-        //         "projectStore--state",
+        //         "projectStore--state1",
         //         state,
         //         state.lastAllEnergy.energySaving
         //     );
@@ -118,36 +120,110 @@ export default {
 
         const allData = reactive({
             nowPage: 1,
+            timeoutsign:null,
             //showAllPage: 3,
-            doneTowPage() {
-                //debugger;
-                //第二屏刷新结束 通知
-                if (showAllPage.value == 3) {
-                    allData.nowPage = 3;
-                } else if (showAllPage.value == 2) {
+            toplay(){
+                //todo
+                // if(allData.nowPage==2){
+                //     floorSpace.value&&floorSpace.value.toplay();//第二屏动画播放
+                // }else{
+                //     allData.timePageShow(500);
+                // }
+                allData.timePageShow(500);
+            },
+            tostop(){
+                //todo
+                // if(allData.nowPage==2){
+                //     floorSpace.value&&floorSpace.value.tostop();//第二屏动画暂停
+                // }
+                
+                clearTimeout(allData.timeoutsign);
+            },
+            nextpage(){
+                //allData.nowPage = allData.nowPage + 1;
+                if (allData.nowPage == 3) {
+                        allData.nowPage = 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;
+                    }
+                }
+            },
+            lastpage(){
+                if (allData.nowPage == 3) {
+                        allData.nowPage = 2;
+                        return;
+                }
+                if (allData.nowPage == 2) {
                     allData.nowPage = 1;
+                    return;
                 }
-                allData.timePageShow();
+                if (allData.nowPage == 1) { 
+                    if (showAllPage.value == 3) {
+                        allData.nowPage = 3;
+                    } else if (showAllPage.value == 2) {
+                        allData.nowPage = 2;
+                    }
+                }
+
             },
-            timePageShow() {
-                var timeoutsign = setTimeout(() => {
-                    allData.nowPage = allData.nowPage + 1;
-                    if (allData.nowPage == 4) {
+            doneTowPage() {
+                if(projectStore.stopSign){ 
+                    return;
+                }
+                //第二屏刷新结束 通知
+                allData.timePageShow(500);
+            },
+            timePageShow(time) {
+                allData.timeoutsign = setTimeout(() => {
+                    if(projectStore.stopSign){ 
+                        //clearTimeout(allData.timeoutsign);
+                        return;
+                    }
+                   // allData.nowPage = allData.nowPage + 1;
+                    if (allData.nowPage == 3) {
                         allData.nowPage = 1;
+                        console.log('allData.nowPage3',allData.nowPage,time);
+                        allData.timePageShow(7000);//3屏变1屏时，预订下一次的切屏
+                        return;
                     }
-                    if (allData.nowPage == 2) {
-                        clearTimeout(timeoutsign);
+                    if (allData.nowPage == 1) {
+                        allData.nowPage = 2;
+                        console.log('allData.nowPage1',allData.nowPage,time);
+                        //clearTimeout(allData.timeoutsign);
                         return;
                     }
-                    allData.timePageShow();
-                }, 6000);
+                    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(() => {
-            allData.timePageShow();
+            //console.log("horiscreen-mounted");
+            allData.timePageShow(7000);
+
         });
         return {
-            ...toRefs(allData),
+            ...toRefs(allData),floorSpace
         };
     },
 };

src/views/verScreen/index.vue

@@ -12,7 +12,7 @@
         </div>
         <div class="container">
             <div class="hor-head">
-                <pageHead />
+                <pageHead  @toplay="toplay" @tostop="tostop" @lastpage="lastpage" @nextpage="nextpage"/>
             </div>
             <div
                 class="hor-content"
@@ -30,7 +30,7 @@
                 <HorFloorSpace
                     screenType="ver"
                     :showPing="nowPage"
-                    @donetowpage="doneTowPage"
+                    @donetowpage="doneTowPage" ref="floorSpace"
                 ></HorFloorSpace>
             </div>
             <div
@@ -43,6 +43,7 @@
                     screenType="ver"
                     :showPing="nowPage"
                     @donethreepage="doneThreePage"
+                    ref="energyChart"
                 ></lastEnergyChart>
             </div>
         </div>
@@ -86,6 +87,8 @@ export default defineComponent({
         LastSaveEnergy: LastSaveEnergy,
     },
     setup() {
+        const floorSpace = ref();
+        const energyChart=ref();
         const projectStore = useProjectStore();
         var showAllPage = computed(() => {
             console.log(
@@ -104,33 +107,114 @@ export default defineComponent({
 
         const allData = reactive({
             nowPage: 1,
+            timeoutsign:null,
             //showAllPage: 3,
+            toplay(){
+                // if(allData.nowPage==2){
+                //     floorSpace.value&&floorSpace.value.toplay();//第二屏动画播放
+                // }else if(allData.nowPage==3){
+                //     energyChart.value&&energyChart.value.toplay();//第三屏动画播放
+                // }else{
+                //     allData.timePageShow(500);
+                // }
+                allData.timePageShow(500);
+            },
+            tostop(){
+                // if(allData.nowPage==2){
+                //     floorSpace.value&&floorSpace.value.tostop();//第二屏动画暂停
+                // }else if(allData.nowPage==3){
+                //     energyChart.value&&energyChart.value.tostop();//第三屏动画暂停
+                // }else{
+                //     clearTimeout(allData.timeoutsign);
+                // }
+                clearTimeout(allData.timeoutsign);
+            },
             doneThreePage() {
+                if(projectStore.stopSign){ 
+                    return;
+                }
                 //第三屏刷新结束 通知
-                allData.nowPage = 1;
-                allData.timePageShow(); //1屏变2屏
+                allData.timePageShow(500); 
             },
             doneTowPage() {
-                //debugger;
+                if(projectStore.stopSign){ 
+                    return;
+                }
                 //第二屏刷新结束 通知
-                if (showAllPage.value == 3) {
-                    allData.nowPage = 3;
-                } else if (showAllPage.value == 2) {
+                // if (showAllPage.value == 3) {
+                //     allData.nowPage = 3;
+                // } else if (showAllPage.value == 2) {
+                //     allData.nowPage = 1;
+                //     allData.timePageShow(); //1屏变2屏
+               // }
+               allData.timePageShow(500);
+            },
+            nextpage(){
+                    //allData.nowPage = allData.nowPage + 1;
+                if (allData.nowPage == 3) {
+                    allData.nowPage = 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;
+                    }
+                }
+            },
+            lastpage(){
+                if (allData.nowPage == 3) {
+                    allData.nowPage = 2;
+                    return;
+                }
+                if (allData.nowPage == 2) {
                     allData.nowPage = 1;
-                    allData.timePageShow(); //1屏变2屏
+                    return;
+                }
+                if (allData.nowPage == 1) {
+                    if (showAllPage.value == 3) {
+                        allData.nowPage = 3;
+                    } else if (showAllPage.value == 2) {
+                        allData.nowPage = 2;
+                    }
                 }
             },
-            timePageShow() {
-                var timeoutsign = setTimeout(() => {
-                    allData.nowPage = allData.nowPage + 1;
-                }, 6000);
+            timePageShow(time) {
+                allData.timeoutsign = setTimeout(() => {
+                    if(projectStore.stopSign){ 
+                        return;
+                    }
+                    //allData.nowPage = allData.nowPage + 1;
+                    if (allData.nowPage == 3) {
+                        allData.nowPage = 1;
+                        allData.timePageShow(7000);
+                        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;
+                            allData.timePageShow(7000);
+                        }
+                    }
+                }, time);
             },
         });
 
         onMounted(() => {
-            allData.timePageShow();
+            allData.timePageShow(3000);
         });
-        return { ...toRefs(allData) };
+        return { ...toRefs(allData),floorSpace,energyChart};
     },
 });
 </script>