定时相关

src/router.ts

@@ -42,7 +42,23 @@ const projectRoutes = [
     meta: {
       title: '智慧屏首頁'
     }
-  }, 
+  },
+  {
+    name: "timingAdd",
+    path: "/timingAdd",
+    component: () => import("@/view/timing/timing-add.vue"),
+    meta: {
+      title: '智慧屏首頁'
+    }
+  },
+  {
+    name: "timingSureDelete",
+    path: "/timingSureDelete",
+    component: () => import("@/view/timing/timing-sure-delete.vue"),
+    meta: {
+      title: '智慧屏首頁'
+    }
+  },
   // 非哈希路由暂不启用
   {
     name: "notFound",

src/styles/framework/base/flexbox.scss

@@ -240,3 +240,31 @@ Flex, Grow, & Shrink 待确定
     line-height: 1;
   }
 }
+//智慧屏标题
+.zhp-title {
+  padding-top: 31px;
+  padding-bottom: 31px;
+  width: 100vw;
+  position: relative;
+}
+//智慧屏标题
+.zhp-title-text {
+  margin-top: 4px;
+  color: #ffffff;
+  text-align: center;
+  font-size: 40px;
+}
+//智慧屏背景
+.base-bg {
+  position: relative;
+  background-image: url("@/assets/imgs/show/bg_timing.png");
+  height: 720px;
+  width: 720px;
+  //智慧屏返回键
+  .leftImg {
+    width: 48px;
+    height: 48px;
+    position: absolute;
+    left: 24px;
+  }
+}

src/view/tabs/fixed-time.vue

@@ -4,15 +4,28 @@
       <div class="base-timing-card-title">
         <div class="layout-box-horizontal">
           <div class="base-timing-card-title-t">定时</div>
-          <div class="layout-items-center">
-            <img
-              class="base-timing-card-title-add"
-              src="@/assets/imgs/show/btn_item_timing_add.png"
-            />
-          </div>
+          <img
+            class="base-timing-card-title-add"
+            src="@/assets/imgs/show/btn_item_timing_add.png"
+            @click="onClickAdd()"
+          />
+        </div>
+      </div>
+      <div v-show="navList.length == 0">
+        <div class="layout-box-vertical layout-items-center">
+          <img
+            class="base-timing-card-no-timing-img"
+            src="@/assets/imgs/show/icon_notiming.png"
+          />
+          <div class="base-timing-card-no-timing">还没有定时</div>
         </div>
       </div>
-      <div v-for="(item, i) in navList" :key="i" @click="onItemClick(item)">
+      <div
+        v-for="(item, i) in navList"
+        v-show="navList.length > 0"
+        :key="i"
+        @click="onItemClick(item)"
+      >
         <div
           class="base-timing-card-content-unSelectBg"
           :class="
@@ -38,6 +51,7 @@
               <img
                 src="@/assets/imgs/show/btn_item_timing_delete.png"
                 class="delete"
+                @click="onItemDelete(i)"
               />
             </div>
           </div>
@@ -53,6 +67,7 @@ import { ref } from "vue";
 import { TimingDto } from "@/dto/timing-dto";
 import timing from "@/view/show/timing.vue";
 import type from "async-validator/dist-types/rule/type";
+import { Toast } from "vant";
 
 const router = useRouter();
 
@@ -69,6 +84,24 @@ const onItemClick = (timing: TimingDto) => {
   });
 };
 
+/**
+ * 添加定时
+ */
+const onClickAdd = () => {
+  router.push("/timingAdd");
+};
+
+/**
+ * 删除定时
+ */
+const onItemDelete = (index: number) => {
+  router.push("/timingSureDelete");
+  // navList.value.splice(index, 1);
+  // if (navList.value.length === 0) {
+  //   //显示无数据内容
+  // }
+};
+
 const navList = ref([
   {
     id: 0,
@@ -97,8 +130,8 @@ const navList = ref([
 <style lang="scss" scoped>
 .base-timing-card {
   background-image: url("@/assets/imgs/show/bg_timing.png");
-  height: 720px;
-  width: 720px;
+  height: 100vh;
+  width: 100vw;
 
   .base-timing-card-title {
     margin-top: 35px;
@@ -115,6 +148,19 @@ const navList = ref([
     }
   }
 
+  .base-timing-card-no-timing-img {
+    margin-top: 100px;
+    width: 260px;
+    height: 260px;
+  }
+
+  .base-timing-card-no-timing {
+    margin-top: 55px;
+    font-weight: 400;
+    font-size: 40px;
+    color: #ffffff;
+  }
+
   .base-timing-card-title-add {
     width: 48px;
     height: 48px;
@@ -126,6 +172,7 @@ const navList = ref([
   }
 
   .base-timing-card-content-unSelectBg {
+    width: 100vw;
     margin-left: 45px;
     margin-bottom: 12px;
     height: 126px;
@@ -170,7 +217,7 @@ const navList = ref([
   .state {
     line-height: 32px;
     font-weight: 400;
-    font-size: 18px;
+    font-size: 10px;
     color: #ffffff;
   }
 

src/view/tabs/home-screen.vue

@@ -20,7 +20,7 @@ onMounted(() => {
     // for (let i = 0; i <= 79; i++) {
     //     aniImgs.value.push(`/src/assets/imgs/home-screen/切图-关机时循环_000${i < 10? '0' + i: i}`);
     // }
-    run();
+    // run();
     console.log(aniImgs.value);
 })
 
@@ -60,4 +60,4 @@ const change = () => {
     #imgs {
         width: 100%;
     }
-}</style>
+}</style>

src/view/tabs/scene.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="base-scene-card safe-area-inset-bottom">
-    <div class="layout-box-vertical layout-items-center">
+    <div class="layout-box-vertical layout-items-center" style="height: 100vh">
       <div class="base-scene-card-title">
-        <div class="layout-items-center">
+        <div class="layout-items-center" style="flex-shrink: 0">
           <div class="base-scene-card-title-t">场景</div>
         </div>
       </div>
-      <div class="base-scene-card-content">
+      <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">
@@ -46,44 +46,44 @@ 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>
 

src/view/timing/timing-add.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="base-bg">
+    <div class="zhp-title">
+      <img
+        class="leftImg"
+        src="@/assets/imgs/show/back.png"
+        @click="onClickLeft()"
+      />
+      <div class="zhp-title-text">定时</div>
+    </div>
+    <div class="time-center">
+      <div class="time-center-item" @click="onOpenClick(true)">
+        <div class="layout-horizontal layout-items-center">
+          <div
+            class="time-center-item-select"
+            :class="
+              isOpen ? 'time-center-item-select' : 'time-center-item-unselect'
+            "
+          >
+            开机
+          </div>
+          <img
+            class="selectImg"
+            :src="
+              isOpen
+                ? '/src/assets/imgs/show/icon_check.png'
+                : '/src/assets/imgs/show/icon_nomor.png'
+            "
+          />
+        </div>
+      </div>
+      <div class="time-center-item" @click="onOpenClick(false)">
+        <div class="layout-horizontal layout-items-center">
+          <div
+            class="time-center-item-select"
+            :class="
+              isOpen ? 'time-center-item-unselect' : 'time-center-item-select'
+            "
+          >
+            关机
+          </div>
+          <img
+            class="selectImg"
+            :src="
+              isOpen
+                ? '/src/assets/imgs/show/icon_nomor.png'
+                : '/src/assets/imgs/show/icon_check.png'
+            "
+          />
+        </div>
+      </div>
+    </div>
+    <div class="item-content">
+      <div class="item-text">时间</div>
+      <div class="item-text-select">1小时后</div>
+      <img class="rightImg" src="@/assets/imgs/show/right.png" />
+    </div>
+    <div class="item-content">
+      <div class="item-text">设备</div>
+      <div class="item-text-select">1台空调</div>
+      <img class="rightImg" src="@/assets/imgs/show/right.png" />
+    </div>
+    <div class="bottom-btn bottom-btn-text">保存</div>
+  </div>
+</template>
+<script setup>
+import { Toast } from "vant";
+import { ref } from "vue";
+
+const isOpen = ref(false);
+const onClickLeft = () => {
+  Toast("点击返回");
+};
+const onOpenClick = (b) => {
+  isOpen.value = b;
+};
+</script>
+
+<style scoped>
+.time-center {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 24px;
+  padding-right: 24px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+
+  .time-center-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 100px;
+    width: 330px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url("@/assets/imgs/show/bg_add_timing_unselect.png");
+
+    .layout-horizontal {
+      display: flex;
+      align-items: stretch;
+      box-sizing: border-box;
+    }
+
+    .time-center-item-select {
+      color: #ffffff;
+      text-align: center;
+      font-size: 32px;
+      font-weight: 700;
+    }
+
+    .time-center-item-unselect {
+      color: #ffffff;
+      opacity: 0.4;
+      text-align: center;
+      font-size: 32px;
+      font-weight: 400;
+    }
+
+    .selectImg {
+      width: 60px;
+      height: 60px;
+      margin-left: 26px;
+    }
+  }
+}
+
+.item-content {
+  margin-bottom: 12px;
+  position: relative;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  width: 672px;
+  height: 100px;
+  background-image: url("@/assets/imgs/show/bg_add_item_timing.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.item-text {
+  margin-left: 36px;
+  color: #ffffff;
+  font-size: 32px;
+  font-weight: 400;
+}
+
+.item-text-select {
+  position: absolute;
+  right: 100px;
+  color: #ffffff;
+  text-align: center;
+  opacity: 0.4;
+  font-size: 28px;
+  font-weight: 400;
+}
+
+.rightImg {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  text-align: right;
+  right: 36px;
+}
+
+.bottom-btn {
+  bottom: 30px;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 672px;
+  height: 110px;
+  background-image: url("@/assets/imgs/show/bg_btn.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  color: #ffffff;
+  font-size: 40px;
+  font-weight: 400;
+}
+</style>

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

@@ -0,0 +1,91 @@
+<template>
+  <div class="base-bg">
+    <div class="timing-flex-box">
+      <img
+        class="timing-delete-img"
+        src="@/assets/imgs/show/icon_notiming.png"
+      />
+      <div class="hint-text">确定要删除该定时吗？</div>
+    </div>
+    <div class="bottom-s-c">
+      <div class="bottom-c" @click="onDeleteClick(false)">取消</div>
+      <div class="bottom-s" @click="onDeleteClick(true)">确定</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Toast } from "vant";
+
+/**
+ * 删除定时
+ * @param b
+ */
+const onDeleteClick = (b) => {
+  if (b) {
+    Toast("删除成功");
+  }
+};
+</script>
+
+<style scoped>
+.bottom-s-c {
+  left: 24px;
+  right: 24px;
+  position: absolute;
+  bottom: 30px;
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+
+  .bottom-s {
+    margin-left: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    color: #ffffff;
+    font-size: 40px;
+    font-weight: 400;
+    width: 326px;
+    height: 110px;
+    background-image: url("@/assets/imgs/show/bg_btn_blue.png");
+  }
+
+  .bottom-c {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    color: #ffffff;
+    font-size: 40px;
+    font-weight: 400;
+    width: 326px;
+    height: 110px;
+    background-image: url("@/assets/imgs/show/bg_btn_gray.png");
+  }
+}
+
+.timing-flex-box {
+  height: calc(100vh - 140px);
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.hint-text {
+  margin-top: 55px;
+  font-weight: 400;
+  font-size: 40px;
+  color: #ffffff;
+}
+
+.timing-delete-img {
+  width: 200px;
+  height: 200px;
+}
+</style>