环境模拟选择，场景等页面修改

src/router.ts

@@ -73,10 +73,17 @@ const projectRoutes = [
     component: () => import("@/view/timing/timing-select-device.vue"),
   },
   {
+    //定时选择时间
     name: "timingSelectTime",
     path: "/timingSelectTime",
     component: () => import("@/view/timing/timing-select-time.vue"),
   },
+  {
+    //环境模拟选择
+    name: "envSelect",
+    path: "/envSelect",
+    component: () => import("@/view/ui/env-select.vue"),
+  },
   // 非哈希路由暂不启用
   {
     name: "notFound",

src/styles/framework/base/flexbox.scss

@@ -256,7 +256,13 @@ Flex, Grow, & Shrink 待确定
   text-align: center;
   font-size: 40px;
 }
-
+//card列表父布局
+.zhp-item-bg{
+  display: flex;
+  justify-content: space-between;
+  padding: 24px;
+  flex-wrap: wrap;
+}
 //智慧屏背景
 .base-bg {
   display: flex;
@@ -265,6 +271,13 @@ Flex, Grow, & Shrink 待确定
   background-image: url("@/assets/imgs/show/bg_timing.png");
   height: 100vh;
   width: 720px;
+  //智慧右侧图片
+  .rightImg {
+    width: 48px;
+    height: 48px;
+    position: absolute;
+    right: 24px;
+  }
   //智慧屏返回键
   .leftImg {
     width: 48px;

src/view/tabs/fixed-time.vue

@@ -3,7 +3,7 @@
     <div class="layout-box-vertical layout-items-center">
       <div class="base-timing-card-title">
         <div class="layout-box-horizontal">
-          <div class="base-timing-card-title-t">定时</div>
+          <div class="base-timing-card-title-t" @click="envSelect">定时</div>
           <img
             class="base-timing-card-title-add"
             src="@/assets/imgs/show/btn_item_timing_add.png"
@@ -76,6 +76,12 @@ const runFun = (index: any) => {
   navList.value.splice(index, 1);
 
 };
+/**
+ * 环境模拟选择
+ */
+const envSelect = () => {
+  router.push("/envSelect");
+};
 /**
  * 切换选中状态
  */

src/view/tabs/scene.vue

@@ -1,20 +1,14 @@
 <template>
-  <div class="base-scene-card safe-area-inset-bottom">
+  <div class="base-bg">
-    <div class="layout-box-vertical layout-items-center" style="height: 100vh">
+    <div class="zhp-title">
-      <div class="base-scene-card-title">
+      <div class="zhp-title-text">场景</div>
-        <div class="layout-items-center" style="flex-shrink: 0">
+    </div>
-          <div class="base-scene-card-title-t">场景</div>
+    <div class="zhp-item-bg" style="overflow: auto">
-        </div>
+      <div v-for="(item, i) in navList" :key="i">
-      </div>
+        <div class="base-scene-card-content-bg" @click="onItemClick(item)">
-      <div class="base-scene-card-content" style="flex: 1; overflow: auto">
+          <img class="stateBgf" :src="item.img" />
-        <div v-for="(item, i) in navList" :key="i">
+          <div class="function">
-          <div class="base-scene-card-content-bg" @click="onItemClick(item)">
+            {{ item.name }}
-            <div class="layout-box-horizontal layout-items-center">
-              <img class="stateBg" :src="item.img" />
-              <div class="function">
-                {{ item.name }}
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -46,110 +40,70 @@ const navList = ref([
     id: 0,
     img: "/src/assets/imgs/show/icon_tyzl.png",
     name: "统一制冷",
-    progress: 0.5,
+    progress: 0.5
   },
   {
     id: 1,
     img: "/src/assets/imgs/show/icon_tyzr.png",
     name: "统一制热",
-    progress: 0.8,
+    progress: 0.8
   },
   {
     id: 2,
     img: "/src/assets/imgs/show/icon_kszl.png",
     name: "快速制冷",
-    progress: 0.3,
+    progress: 0.3
   },
   {
     id: 3,
     img: "/src/assets/imgs/show/icon_kszr.png",
     name: "快速制热",
-    progress: 0.5,
+    progress: 0.5
   },
   {
     id: 4,
     img: "/src/assets/imgs/show/icon_hwxf.png",
     name: "恒温新风",
-    progress: 0.8,
+    progress: 0.8
   },
   {
     id: 5,
     img: "/src/assets/imgs/show/icon_zhqg.png",
     name: "智慧全感",
-    progress: 0.3,
+    progress: 0.3
   },
   {
     id: 6,
     img: "/src/assets/imgs/show/icon_ty.png",
     name: "通用",
-    progress: 0.3,
+    progress: 0.3
-  },
+  }
 ]);
 </script>
 
 <style lang="scss" scoped>
-.base-scene-card {
+.base-scene-card-content-bg {
-  background-image: url("@/assets/imgs/show/bg_timing.png");
+  align-items: center;
-  height: 720px;
+  justify-content: center;
-  width: 720px;
+  margin-bottom: 20px;
-
+  height: 146px;
-  .base-scene-card-title {
+  background-image: url(@/assets/imgs/show/bg_item_scene.png);
-    margin-top: 35px;
+  background-size: contain;
-    margin-bottom: 35px;
+  background-repeat: no-repeat;
-    width: 100%;
+  width: 326px;
-
+  display: flex;
-    .base-scene-card-title-t {
+}
-      font-weight: 400;
-      font-size: 40px;
-      color: #ffffff;
-      width: 100%;
-      text-align: center;
-    }
-  }
-
-  .base-scene-card-content {
-    display: flex;
-    justify-content: space-between;
-    padding: 24px;
-    flex-wrap: wrap;
-
-    .base-scene-card-content-bg {
-      position: relative;
-      flex: 0 0 50%;
-
-      > div {
-        position: relative;
-      }
-
-      margin-bottom: 20px;
-      height: 146px;
-      background-image: url(@/assets/imgs/show/bg_item_scene.png);
-      background-size: contain;
-      background-repeat: no-repeat;
-      width: 326px;
-    }
-
-    .function {
-      margin-left: 30px;
-      line-height: 146px;
-      font-weight: 400;
-      font-size: 32px;
-      color: #ffffff;
-    }
 
-    .stateBg {
+.function {
-      margin-left: 52px;
+  margin-left: 30px;
-      line-height: 146px;
+  font-weight: 400;
-      background-size: contain;
+  font-size: 32px;
-      background-repeat: no-repeat;
+  color: #ffffff;
-      width: 60px;
-      height: 60px;
-    }
-  }
 }
 
-.bottom-line {
+.stateBgf {
-  position: relative;
+  width: 60px;
-  padding-top: 3px;
+  height: 60px;
 }
+
 </style>

src/view/tabs/tabs.vue

@@ -1,54 +1,62 @@
 <template>
-    <div id="tabs-wrapper">
+  <div id="tabs-wrapper">
-      <!-- 下拉 -->
+    <!-- 下拉 -->
-      <div
+    <div
-        class="drop-down-menu"
+      class="drop-down-menu"
-        @touchstart="dropDownMenuStart($event)"
+      @touchstart="dropDownMenuStart($event)"
-        @touchmove="dropDownMenuMove($event)"
+      @touchmove="dropDownMenuMove($event)"
-        @touchend="dropDownMenuEnd($event)">
+      @touchend="dropDownMenuEnd($event)">
-      </div>
+    </div>
-      <DropDownMenu id="menu" v-show="showMenu" ref="menu" @pull-up="pullUp()"></DropDownMenu>
+    <DropDownMenu id="menu" v-show="showMenu" ref="menu" @pull-up="pullUp()"></DropDownMenu>
-      <div class="swiper">
+    <div class="swiper">
-        <div class="swiper-wrapper" @touchstart.self>
+      <div class="swiper-wrapper" @touchstart.self>
-          <div class="swiper-slide">
+        <div class="swiper-slide">
-            <div class="swiper-item">
+          <div class="swiper-item">
-              <div><FixedTime></FixedTime></div>
+            <div>
+              <FixedTime></FixedTime>
             </div>
           </div>
-          <div class="swiper-slide">
+        </div>
-            <div class="swiper-item">
+        <div class="swiper-slide">
-                <div><HomeScreen></HomeScreen></div>
+          <div class="swiper-item">
+            <div>
+              <HomeScreen></HomeScreen>
             </div>
           </div>
-          <div class="swiper-slide">
+        </div>
-            <div class="swiper-item">
+        <div class="swiper-slide">
-                <div><DeviceControl></DeviceControl></div>
+          <div class="swiper-item">
+            <div>
+              <DeviceControl></DeviceControl>
             </div>
           </div>
-          <div class="swiper-slide">
+        </div>
-            <div class="swiper-item">
+        <div class="swiper-slide">
-                <div><Scene></Scene></div>
+          <div class="swiper-item">
+            <div>
+              <Scene></Scene>
             </div>
           </div>
         </div>
-        <div class="swiper-pagination"></div>
       </div>
+      <div class="swiper-pagination"></div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import {
-    ref,
+  ref,
-    onBeforeMount,
+  onBeforeMount,
-    onMounted,
+  onMounted,
-    nextTick,
+  nextTick
-} from 'vue';
+} from "vue";
 import { Swiper, Navigation, Pagination } from "swiper";
-import FixedTime from './fixed-time.vue';
+import FixedTime from "./fixed-time.vue";
-import HomeScreen from './home-screen.vue';
+import HomeScreen from "./home-screen.vue";
-import DeviceControl from './device-control.vue';
+import DeviceControl from "./device-control.vue";
-import Scene from './scene.vue';
+import Scene from "./scene.vue";
-import DropDownMenu from '../drop-down-menu/drop-down-menu.vue';
+import DropDownMenu from "../drop-down-menu/drop-down-menu.vue";
 import "swiper/swiper-bundle.css";
 
 let mySwiper: Swiper; // 声明swiper
@@ -59,9 +67,9 @@ const showMenu = ref(false);
 const menuDom: any = ref();
 
 onMounted(() => {
-    initSwiper();
+  initSwiper();
-    menuDom.value = document.getElementById('menu') as HTMLElement | null;
+  menuDom.value = document.getElementById("menu") as HTMLElement | null;
-})
+});
 
 /** 初始化swiper */
 const initSwiper = () => {
@@ -70,20 +78,20 @@ const initSwiper = () => {
     // observer: true, // 修改swiper自己或子元素时，自动初始化swiper
     // observeParents: true, // 修改swiper的父元素时，自动初始化swiper
     pagination: {
-      el: ".swiper-pagination",
+      el: ".swiper-pagination"
     }, //分页样式
-    touchStartPreventDefault   : false,
+    touchStartPreventDefault: false,
     effect: "fade", //轮播图切换效果的类型
-    resistanceRatio: 0,
+    resistanceRatio: 0
   });
-}
+};
 
 /** 下拉菜单开始 */
 const dropDownMenuStart = (event: any) => {
   touchStart.value = 0;
   touchDis.value = 0;
   touchStart.value = event.targetTouches[0].pageY;
-}
+};
 
 /** 下拉菜单移动 */
 const dropDownMenuMove = (event: any) => {
@@ -93,36 +101,36 @@ const dropDownMenuMove = (event: any) => {
   if (document.documentElement.scrollTop === 0 && touchDis.value > 0) {
     showMenu.value = true;
     if (menuDom.value) {
-      const top = (-(window.innerHeight) + touchDis.value) > 0? 0: (-(window.innerHeight) + touchDis.value);
+      const top = (-(window.innerHeight) + touchDis.value) > 0 ? 0 : (-(window.innerHeight) + touchDis.value);
       menuDom.value.style.top = `${top}px`;
     }
   } else {
     showMenu.value = false;
   }
-}
+};
 
 /** 下拉菜单结束 */
 const dropDownMenuEnd = (event: any) => {
   if (touchDis.value > 0) {
     if (menuDom.value) {
       menuDom.value.style.transition = `${(window.innerHeight - touchDis.value) / (window.innerHeight)}s`;
-      menuDom.value.style.top = '0';
+      menuDom.value.style.top = "0";
     }
   }
-}
+};
 
 /** 点击收起菜单 */
 const pullUp = () => {
-  if (menuDom.value && (menuDom.value.style.top === '0px' || menuDom.value.style.top === '0')) {
+  if (menuDom.value && (menuDom.value.style.top === "0px" || menuDom.value.style.top === "0")) {
-    menuDom.value.style.top = '-100vh';
+    menuDom.value.style.top = "-100vh";
-    menuDom.value.style.transition = '0.5s';
+    menuDom.value.style.transition = "0.5s";
     // 0.5s动画时间。等时间过去隐藏
     setTimeout(() => {
       showMenu.value = false;
-      menuDom.value.style.transition = '0s';
+      menuDom.value.style.transition = "0s";
     }, 500);
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/view/timing/timing-add.vue

@@ -65,7 +65,7 @@
 </template>
 <script lang="ts" setup>
 import { Toast } from "vant";
-import { onBeforeMount, ref } from "vue";
+import { getCurrentInstance, onBeforeMount, ref } from "vue";
 import { useRouter } from "vue-router";
 
 let selectNum = 0;
@@ -73,6 +73,21 @@ let time = 0;
 
 const router = useRouter();
 const isOpen = ref(false);
+const { proxy } = getCurrentInstance() as any;
+/**
+ * 选择设备数量
+ * @param index
+ */
+const selectNumEvent = (index: any) => {
+  selectNum = index;
+};
+/**
+ * 选择时间
+ * @param index
+ */
+const selectTimeEvent = (index: any) => {
+  time = index;
+};
 const onClickLeft = () => {
   onSaveClick();
 };
@@ -93,11 +108,8 @@ const onSelectDevice = () => {
 };
 
 onBeforeMount(() => {
-  const query: any = router.currentRoute.value.query;
+  proxy.$eventBusService.on("selectNumEvent", selectNumEvent);
-  if (query && query.pageType === "timingAdd") {
+  proxy.$eventBusService.on("selectTimeEvent", selectTimeEvent);
-    selectNum = query.sListNum;
-    time = query.time;
-  }
 });
 
 const onSaveClick = () => {

src/view/timing/timing-select-device.vue

@@ -64,10 +64,11 @@
 // eslint-disable-next-line vue/no-export-in-script-setup
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
+import { getCurrentInstance } from "vue";
 
 const router = useRouter();
 const dList: any = ref<any[]>([]);
-
+const { proxy } = getCurrentInstance() as any;
 const onSelectDevice = (item: any) => {
   //开机状态可选
   if (item.state) {
@@ -75,6 +76,7 @@ const onSelectDevice = (item: any) => {
   }
 };
 const onSelectClick = (sure: boolean) => {
+  router.back();
   if (sure) {
     let number = 0;
     dList.value.forEach((e: any) => {
@@ -82,14 +84,7 @@ const onSelectClick = (sure: boolean) => {
         number++;
       }
     });
-    router.push({
+    proxy.$eventBusService.emit("selectNumEvent", number);
-      path: "/timingAdd",
-      query: { pageType: "timingAdd", sListNum: number },
-    });
-  } else {
-    router.push({
-      path: "/timingAdd",
-    });
   }
 };
 onMounted(() => {

src/view/timing/timing-select-time.vue

@@ -11,20 +11,17 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
 import { useRouter } from "vue-router";
+import { getCurrentInstance } from "vue";
 const router = useRouter();
+
+
+const { proxy } = getCurrentInstance() as any;
 const onSelectClick = (sure: boolean) => {
+  router.back();
   if (sure) {
     let time = 0.5;
-    router.push({
+    proxy.$eventBusService.emit("selectTimeEvent", time);
-      path: "/timingAdd",
-      query: { pageType: "timingAdd", time: time },
-    });
-  } else {
-    router.push({
-      path: "/timingAdd",
-    });
   }
 };
 </script>

src/view/timing/timing-sure-delete.vue

@@ -19,7 +19,6 @@ import { useRouter } from "vue-router";
 import { onBeforeMount, ref } from "vue";
 import { Toast } from "vant";
 import { getCurrentInstance } from "vue";
-
 const { proxy } = getCurrentInstance() as any;
 
 const router = useRouter();
@@ -33,13 +32,11 @@ const onDeleteClick = (sure: boolean) => {
   if (sure) {
     proxy.$eventBusService.emit("timingDelete", index);
   }
-
 };
 onBeforeMount(() => {
   const query: any = router.currentRoute.value.query;
   if (query && query.pageType === "timingSureDelete") {
     index = query.index;
-    Toast("接收的角标：" + index);
   }
 });
 </script>

src/view/ui/env-select.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="base-bg">
+    <div class="zhp-title">
+      <img
+        class="rightImg"
+        src="@/assets/imgs/show/close.png"
+        @click="router.back()"
+      />
+      <div class="zhp-title-text">环境模拟选择</div>
+    </div>
+    <div class="zhp-item-bg">
+      <div v-for="(item, i) in seasonList" :key="i">
+        <div class="seasonItem" @click="itemOnClick(item)">
+          <div class="tem-bg">
+            <div class="tem-text">{{ item.tem }}</div>
+            <div class="tem">℃</div>
+            <div
+              v-show="item.hum != 0"
+              class="tem-text"
+              style="margin-left: 25px"
+            >
+              {{ item.hum }}
+            </div>
+            <div v-show="item.hum != 0" class="tem">%</div>
+          </div>
+          <div class="tem">{{ item.season }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import router from "@/router";
+import { Toast } from "vant";
+
+const itemOnClick = (item: any) => {
+  Toast("获取的id" + item.id);
+};
+const seasonList = ref([
+  {
+    id: 1,
+    tem: "14",
+    season: "春季",
+    hum: 0
+  },
+  {
+    id: 2,
+    tem: "34",
+    season: "夏季",
+    hum: 0
+  },
+  {
+    id: 3,
+    tem: "16",
+    season: "梅雨季",
+    hum: 99
+  },
+  {
+    id: 4,
+    tem: "-4",
+    season: "冬季",
+    hum: 0
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.seasonItem {
+  margin-top: 20px;
+  width: 330px;
+  height: 132px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background-color: #20252e;
+
+  .tem-bg {
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+
+    .tem-text {
+      font-weight: 400;
+      font-size: 60px;
+      margin-right: 2px;
+      color: white;
+    }
+  }
+
+  .tem {
+    font-weight: 400;
+    font-size: 28px;
+    color: white;
+  }
+}
+</style>