Merge branch 'dev_230517' of https://git.qdhtt.cn/shuai16.wang/smart-screen-demo-web into dev_230517

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"
@@ -23,7 +23,7 @@
       <div
         v-for="(item, i) in navList"
         v-show="navList.length > 0"
-        :key="i"
+        :key="item.id"
         @click="onItemClick(item)"
       >
         <div
@@ -63,11 +63,25 @@
 
 <script lang="ts" setup>
 import { useRouter } from "vue-router";
-import { ref } from "vue";
+import { getCurrentInstance, onBeforeMount, ref } from "vue";
 import { TimingDto } from "@/dto/timing-dto";
+import { Toast } from "vant";
+
+const { proxy } = getCurrentInstance() as any;
 
 const router = useRouter();
+let isCreat = false;
+const runFun = (index: any) => {
+  Toast("删除角标" + index);
+  navList.value.splice(index, 1);
 
+};
+/**
+ * 环境模拟选择
+ */
+const envSelect = () => {
+  router.push("/envSelect");
+};
 /**
  * 切换选中状态
  */
@@ -92,12 +106,21 @@ const onClickAdd = () => {
  * 删除定时
  */
 const onItemDelete = (index: number) => {
-  router.push("/timingSureDelete");
+  router.push({
+    path: "/timingSureDelete",
+    query: { pageType: "timingSureDelete", index: index }
+  });
   // navList.value.splice(index, 1);
   // if (navList.value.length === 0) {
   //   //显示无数据内容
   // }
 };
+onBeforeMount(() => {
+  if (!isCreat) {
+    isCreat = true;
+    proxy.$eventBusService.on("timingDelete", runFun);
+  }
+});
 
 const navList = ref([
   {
@@ -105,26 +128,31 @@ const navList = ref([
     time: "2.5",
     name: "主卧空调",
     state: false,
-    selectState: false,
+    selectState: false
   },
   {
     id: 1,
     time: "3.0",
     name: "次卧空调",
     state: true,
-    selectState: false,
+    selectState: false
   },
   {
     id: 2,
     time: "4.0",
     name: "餐厅空调",
     state: false,
-    selectState: false,
+    selectState: false
-  },
+  }
 ]);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+.sy {
+  width: 672px;
+  background-color: rebeccapurple;
+}
+
 .base-timing-card {
   background-image: url("@/assets/imgs/show/bg_timing.png");
   height: 100vh;

src/view/tabs/scene.vue

@@ -1,16 +1,12 @@
 <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 class="base-scene-card-title-t">场景</div>
     </div>
-      </div>
+    <div class="zhp-item-bg" style="overflow: auto">
-      <div class="base-scene-card-content" style="flex: 1; overflow: auto">
       <div v-for="(item, i) in navList" :key="i">
         <div class="base-scene-card-content-bg" @click="onItemClick(item)">
-            <div class="layout-box-horizontal layout-items-center">
+          <img class="stateBgf" :src="item.img" />
-              <img class="stateBg" :src="item.img" />
           <div class="function">
             {{ item.name }}
           </div>
@@ -18,8 +14,6 @@
       </div>
     </div>
   </div>
-    </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
@@ -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;
-
-  .base-scene-card-title {
-    margin-top: 35px;
-    margin-bottom: 35px;
-    width: 100%;
-
-    .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;
-    }
+  display: flex;
+}
 
-    .function {
+.function {
   margin-left: 30px;
-      line-height: 146px;
   font-weight: 400;
   font-size: 32px;
   color: #ffffff;
-    }
+}
 
-    .stateBg {
+.stateBgf {
-      margin-left: 52px;
-      line-height: 146px;
-      background-size: contain;
-      background-repeat: no-repeat;
   width: 60px;
   height: 60px;
-    }
-  }
 }
 
-.bottom-line {
-  position: relative;
-  padding-top: 3px;
-}
 </style>

src/view/tabs/tabs.vue

@@ -12,22 +12,30 @@
       <div class="swiper-wrapper" @touchstart.self>
         <div class="swiper-slide">
           <div class="swiper-item">
-              <div><FixedTime></FixedTime></div>
+            <div>
+              <FixedTime></FixedTime>
+            </div>
           </div>
         </div>
         <div class="swiper-slide">
           <div class="swiper-item">
-                <div><HomeScreen></HomeScreen></div>
+            <div>
+              <HomeScreen></HomeScreen>
+            </div>
           </div>
         </div>
         <div class="swiper-slide">
           <div class="swiper-item">
-                <div><DeviceControl></DeviceControl></div>
+            <div>
+              <DeviceControl></DeviceControl>
+            </div>
           </div>
         </div>
         <div class="swiper-slide">
           <div class="swiper-item">
-                <div><Scene></Scene></div>
+            <div>
+              <Scene></Scene>
+            </div>
           </div>
         </div>
       </div>
@@ -41,14 +49,14 @@ import {
   ref,
   onBeforeMount,
   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
@@ -60,8 +68,8 @@ const menuDom: any = ref();
 
 onMounted(() => {
   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

@@ -15,32 +15,30 @@
 </template>
 
 <script lang="ts" setup>
-import { Toast } from "vant";
 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();
+let index = 0;
 /**
  * 删除定时
- * @param b
+ * @param sure
  */
-const onDeleteClick = (b: boolean) => {
+const onDeleteClick = (sure: boolean) => {
-  if (b) {
+  router.back();
-    Toast("删除成功");
-  }
-};
-const onSelectClick = (sure: boolean) => {
   if (sure) {
-    router.push({
+    proxy.$eventBusService.emit("timingDelete", index);
-      path: "/tabs",
-      query: { pageType: "tabs", isDelete: "1" }
-    });
-  } else {
-    router.push({
-      path: "/tabs",
-      query: { pageType: "tabs", isDelete: "0" }
-    });
   }
 };
+onBeforeMount(() => {
+  const query: any = router.currentRoute.value.query;
+  if (query && query.pageType === "timingSureDelete") {
+    index = query.index;
+  }
+});
 </script>
 
 <style scoped>

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>