选择设备

src/router-demo.ts

@@ -36,15 +36,6 @@ export const demoRoutes = [
           requireAuth: false,
         },
       },
-      {
-        name: "timing",
-        path: "base-components-demo/timing",
-        component: () => import("@/view/show/timing.vue"),
-        meta: {
-          title: "定时",
-          requireAuth: false,
-        },
-      },
       {
         name: "animation-demo",
         path: "base-components-demo/animation-demo",

src/router.ts

@@ -40,32 +40,42 @@ const projectRoutes = [
     path: "/tabs",
     component: () => import("@/view/tabs/tabs.vue"),
     meta: {
-      title: '智慧屏首頁'
+      title: "智慧屏首頁",
-    }
+    },
   },
   {
     name: "timingAdd",
     path: "/timingAdd",
     component: () => import("@/view/timing/timing-add.vue"),
     meta: {
-      title: '智慧屏首頁'
+      title: "",
-    }
+    },
   },
   {
     name: "timingSureDelete",
     path: "/timingSureDelete",
     component: () => import("@/view/timing/timing-sure-delete.vue"),
     meta: {
-      title: '智慧屏首頁'
+      title: "",
-    }
+    },
   },
   {
     name: "device-detail",
     path: "/device-detail",
     component: () => import("@/view/device-detail/device-detail.vue"),
     meta: {
-      title: '设备详情页'
+      title: "设备详情页",
-    }
+    },
+  },
+  {
+    name: "timingSelectDevice",
+    path: "/timingSelectDevice",
+    component: () => import("@/view/timing/timing-select-device.vue"),
+  },
+  {
+    name: "timingSelectTime",
+    path: "/timingSelectTime",
+    component: () => import("@/view/timing/timing-select-time.vue"),
   },
   // 非哈希路由暂不启用
   {

src/styles/framework/base/flexbox.scss

@@ -240,6 +240,7 @@ Flex, Grow, & Shrink 待确定
     line-height: 1;
   }
 }
+
 //智慧屏标题
 .zhp-title {
   padding-top: 31px;
@@ -247,6 +248,7 @@ Flex, Grow, & Shrink 待确定
   width: 100vw;
   position: relative;
 }
+
 //智慧屏标题
 .zhp-title-text {
   margin-top: 4px;
@@ -254,11 +256,14 @@ Flex, Grow, & Shrink 待确定
   text-align: center;
   font-size: 40px;
 }
+
 //智慧屏背景
 .base-bg {
+  display: flex;
+  flex-direction: column;
   position: relative;
   background-image: url("@/assets/imgs/show/bg_timing.png");
-  height: 720px;
+  height: 100vh;
   width: 720px;
   //智慧屏返回键
   .leftImg {
@@ -267,4 +272,46 @@ Flex, Grow, & Shrink 待确定
     position: absolute;
     left: 24px;
   }
+
+  .bottom-s-c {
+    left: 24px;
+    right: 24px;
+    position: absolute;
+    bottom: 0;
+    flex-wrap: wrap;
+    display: flex;
+    justify-content: space-between;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    background-color: rgba($color: #0A101A, $alpha: 0.7);
+
+    .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");
+    }
+  }
 }

src/view/tabs/device-control.vue

@@ -16,7 +16,6 @@
                         'air-quality-liang': item.airQuality === '良',
                         'air-quality-cha': item.airQuality === '差',
                     }"
-                    @click="goToDetail(item)"
                 >
                     <div class="content-top">
                         <div class="device-name">{{ item.name }}</div>
@@ -39,7 +38,7 @@
                                 </span>
                                 <span v-for="i in item.unitArr" class="unit">{{ i }}</span>
                             </div>
-                            <div class="close-btn" @click.stop="switchDevice(item)">
+                            <div class="close-btn" @click="switchDevice(item)">
                                 <img src="@/assets/imgs/device-control/power_on@2x.png" v-show="item.openFlg">
                                 <img src="@/assets/imgs/device-control/shutdown@2x.png" v-show="!item.openFlg">
                             </div>
@@ -62,7 +61,6 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import router from "@/router";
 
 const deviceList: any = ref<any[]>([]);
 
@@ -128,17 +126,6 @@ const allShutDown = () => {
         }
     })
 }
-
-/**
- * 进入详情页面
- * @param item 点击的设备信息
- */
-const goToDetail = (item: any) => {
-    router.push({
-        path: '/device-detail',
-        query: {}
-    })
-}
 </script>
 
 <style lang="scss" scoped>
@@ -152,7 +139,7 @@ const goToDetail = (item: any) => {
 
     .title {
         width: 100%;
-        padding: 70px 0;
+        padding: 35px 0;
         position: relative;
         flex-shrink: 0;
 
@@ -160,39 +147,40 @@ const goToDetail = (item: any) => {
             text-align: center;
             color: #FFF;
             font-weight: 400;
-            font-size: 80px;
+            font-size: 40px;
         }
 
         .all-close-btn {
             color: #FFF;
-            font-size: 64px;
+            font-size: 32px;
-            padding: 28px 36px;
+            padding: 14px 18px;
             background: #394457;
-            border-radius: 32px;
+            border-radius: 16px;
             position: absolute;
-            top: 50px;
+            top: 25px;
-            right: 48px;
+            right: 24px;
         }
     }
 
     .container {
         flex: 1;
+        overflow: auto;
     }
 
     .content {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
-        padding: 0 48px;
+        padding: 0 24px;
 
         .device-card {
+            width: 326px;
+            height: 146px;
             box-sizing: border-box;
-            width: 620px;
-            height: 292px;
             background: #20252E;
-            border-radius: 32px;
+            border-radius: 16px;
-            padding: 44px 48px 20px 48px;
+            padding: 22px 24px 10px 24px;
-            margin-bottom: 40px;
+            margin-bottom: 20px;
 
             .content-top {
                 display: flex;
@@ -200,15 +188,15 @@ const goToDetail = (item: any) => {
 
                 .device-name {
                     color: #FFF;
-                    font-size: 48px;
+                    font-size: 24px;
-                    margin-right: 20px;
+                    margin-right: 10px;
-                    padding: 12px 0;
+                    padding: 6px 0;
                 }
 
                 .status-border {
-                    font-size: 40px;
+                    font-size: 20px;
-                    padding: 12px 20px;
+                    padding: 6px 10px;
-                    border-radius: 32px;
+                    border-radius: 16px;
 
                     span {
                         display: inline-block;
@@ -227,7 +215,7 @@ const goToDetail = (item: any) => {
             }
 
             .content-btm {
-                margin-top: 36px;
+                margin-top: 18px;
                 font-family: Roboto-Light, Roboto;
 
                 // 关机
@@ -241,9 +229,9 @@ const goToDetail = (item: any) => {
                 }
 
                 .status {
-                    font-size: 80px;
+                    font-size: 40px;
                     font-weight: 300;
-                    margin-right: 8px;
+                    margin-right: 4px;
                 }
 
                 .hot {
@@ -255,12 +243,12 @@ const goToDetail = (item: any) => {
                 }
 
                 .unit {
-                    font-size: 36px;
+                    font-size: 18px;
                     font-weight: 400;
                 }
 
                 .air-quality {
-                    font-size: 80px;
+                    font-size: 40px;
                 }
             }
 
@@ -268,11 +256,10 @@ const goToDetail = (item: any) => {
             .device-btm {
                 display: flex;
                 justify-content: space-between;
-                align-items: center;
 
                 .close-btn {
-                    width: 120px;
+                    width: 60px;
-                    height: 120px;
+                    height: 60px;
 
                     img {
                         width: 100%;

src/view/tabs/fixed-time.vue

@@ -65,9 +65,6 @@
 import { useRouter } from "vue-router";
 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();
 
@@ -172,21 +169,20 @@ const navList = ref([
   }
 
   .base-timing-card-content-unSelectBg {
-    width: 100vw;
+    width: 672px;
-    margin-left: 45px;
     margin-bottom: 12px;
     height: 126px;
     background-image: url(@/assets/imgs/show/bg_item_timing_unselect.png);
-    background-size: contain;
+    background-size: 100% 100%;
     background-repeat: no-repeat;
   }
 
   .base-timing-card-content-selectBg {
-    margin-left: 45px;
     margin-bottom: 12px;
+    background-size: 100% 100%;
+    width: 672px;
     height: 126px;
     background-image: url(@/assets/imgs/show/bg_item_timing_select.png);
-    background-size: contain;
     background-repeat: no-repeat;
   }
 
@@ -206,10 +202,13 @@ const navList = ref([
   }
 
   .stateBg {
+    display: flex;
     margin-left: 14px;
     background-image: url(@/assets/imgs/show/btn_item_timing_open.png);
     background-size: contain;
     background-repeat: no-repeat;
+    align-items: center;
+    justify-content: center;
     width: 56px;
     height: 32px;
   }
@@ -217,7 +216,7 @@ const navList = ref([
   .state {
     line-height: 32px;
     font-weight: 400;
-    font-size: 10px;
+    font-size: 18px;
     color: #ffffff;
   }
 

src/view/timing/timing-add.vue

@@ -52,28 +52,60 @@
     </div>
     <div class="item-content">
       <div class="item-text">时间</div>
-      <div class="item-text-select">1小时后</div>
+      <div class="item-text-select" @click="onSelectTime">{{ time }}小时后</div>
       <img class="rightImg" src="@/assets/imgs/show/right.png" />
     </div>
-    <div class="item-content">
+    <div class="item-content" @click="onSelectDevice">
       <div class="item-text">设备</div>
-      <div class="item-text-select">1台空调</div>
+      <div class="item-text-select">{{ selectNum }}台空调</div>
       <img class="rightImg" src="@/assets/imgs/show/right.png" />
     </div>
-    <div class="bottom-btn bottom-btn-text">保存</div>
+    <div class="bottom-btn bottom-btn-text" @click="onSaveClick">保存</div>
   </div>
 </template>
-<script setup>
+<script lang="ts" setup>
 import { Toast } from "vant";
-import { ref } from "vue";
+import { onBeforeMount, ref } from "vue";
+import { useRouter } from "vue-router";
+
+let selectNum = 0;
+let time = 0;
 
+const router = useRouter();
 const isOpen = ref(false);
 const onClickLeft = () => {
-  Toast("点击返回");
+  onSaveClick();
 };
-const onOpenClick = (b) => {
+const onOpenClick = (b: boolean) => {
   isOpen.value = b;
 };
+/**
+ * 选择设备
+ */
+const onSelectTime = () => {
+  router.push("/timingSelectTime");
+};
+/**
+ * 选择时间
+ */
+const onSelectDevice = () => {
+  router.push("/timingSelectDevice");
+};
+
+onBeforeMount(() => {
+  const query: any = router.currentRoute.value.query;
+  if (query && query.pageType === "timingAdd") {
+    selectNum = query.sListNum;
+    time = query.time;
+  }
+});
+
+const onSaveClick = () => {
+  router.push({
+    path: "/tabs",
+    query: { pageType: "tabs", time: time, device: "主卧空调" }
+  });
+};
 </script>
 
 <style scoped>

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

@@ -0,0 +1,249 @@
+<template>
+  <div class="base-bg">
+    <div class="zhp-title">
+      <div class="zhp-title-text">选择空调</div>
+    </div>
+    <div class="card" style="overflow: auto">
+      <div v-for="(item, i) in dList" :key="i">
+        <div class="item-card" @click="onSelectDevice(item)">
+          <div class="layout-top">
+            <div class="name">{{ item.name }}</div>
+            <div
+              :class="{
+                openBg: item.state,
+                closeBg: !item.state,
+              }"
+            >
+              <span v-if="item.state" class="stateText">开机</span>
+              <span v-if="!item.state" class="stateText">关机</span>
+            </div>
+            <img
+              v-show="item.imgState.includes(1)"
+              class="pre_img"
+              src="@/assets/imgs/show/icon_timing_fault.png"
+            />
+            <img
+              v-show="item.imgState.includes(2)"
+              class="pre_img"
+              src="@/assets/imgs/show/icon_timing_killvirus.png"
+            />
+          </div>
+          <div class="layout-btm">
+            <div class="tem-btm">
+              <span v-if="item.state" class="tem-openText">{{ item.tem }}</span>
+              <span v-if="!item.state" class="tem-closeText">{{
+                item.tem
+              }}</span>
+              <span v-if="item.state" class="tem-open">℃</span>
+              <span v-if="!item.state" class="tem-close">℃</span>
+            </div>
+            <div>
+              <img
+                v-show="item.selectState"
+                class="state-img"
+                src="@/assets/imgs/show/icon_select.png"
+              />
+              <img
+                v-show="!item.selectState"
+                class="state-img"
+                src="@/assets/imgs/show/icon_nomor.png"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-s-c">
+      <div class="bottom-c" @click="onSelectClick(false)">取消</div>
+      <div class="bottom-s" @click="onSelectClick(true)">确定</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// eslint-disable-next-line vue/no-export-in-script-setup
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const dList: any = ref<any[]>([]);
+
+const onSelectDevice = (item: any) => {
+  //开机状态可选
+  if (item.state) {
+    item.selectState = !item.selectState;
+  }
+};
+const onSelectClick = (sure: boolean) => {
+  if (sure) {
+    let number = 0;
+    dList.value.forEach((e: any) => {
+      if (e.selectState) {
+        number++;
+      }
+    });
+    router.push({
+      path: "/timingAdd",
+      query: { pageType: "timingAdd", sListNum: number },
+    });
+  } else {
+    router.push({
+      path: "/timingAdd",
+    });
+  }
+};
+onMounted(() => {
+  dList.value = [
+    {
+      name: "卧室空调",
+      state: true,
+      tem: "25",
+      selectState: false,
+      imgState: [0],
+    },
+    {
+      name: "客房空调",
+      state: false,
+      tem: "23",
+      selectState: false,
+      imgState: [0],
+    },
+    {
+      name: "厨房空调",
+      state: true,
+      tem: "27",
+      selectState: false,
+      imgState: [1],
+    },
+    {
+      name: "书房空调",
+      state: true,
+      tem: "26",
+      selectState: true,
+      imgState: [1, 2],
+    },
+    {
+      name: "次卧空调",
+      state: true,
+      tem: "28",
+      selectState: true,
+      imgState: [2],
+    },
+    {
+      name: "主卫空调",
+      state: false,
+      tem: "25",
+      selectState: false,
+      imgState: [0],
+    },
+  ];
+});
+</script>
+
+<style lang="scss" scoped>
+.card {
+  padding-bottom: 170px;
+  margin-right: 24px;
+  margin-left: 24px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  .item-card {
+    margin-bottom: 20px;
+    width: 326px;
+    height: 145px;
+    background: #20252e;
+    box-sizing: border-box;
+    border-radius: 16px;
+    padding: 24px 22px 10px 24px;
+  }
+
+  .layout-top {
+    display: flex;
+    align-items: center;
+  }
+
+  .name {
+    font-size: 28px;
+    color: white;
+    font-weight: 400;
+    margin-right: 10px;
+  }
+
+  .openBg {
+    width: 56px;
+    height: 32px;
+    border-radius: 16px;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    background-color: #3c75e5;
+  }
+
+  .closeBg {
+    width: 56px;
+    height: 32px;
+    border-radius: 16px;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    background-color: rgba($color: #ffffff, $alpha: 0.2);
+  }
+
+  .stateText {
+    font-size: 18px;
+    font-weight: 400;
+    color: white;
+  }
+
+  .layout-btm {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 23px;
+  }
+
+  .tem-btm {
+    align-items: end;
+
+    .tem-openText {
+      font-size: 54px;
+      font-weight: 300;
+      color: white;
+    }
+
+    .tem-closeText {
+      font-size: 54px;
+      font-weight: 300;
+      color: rgba($color: #ffffff, $alpha: 0.4);
+    }
+
+    .tem-open {
+      margin-left: 5px;
+      font-size: 24px;
+      font-weight: 300;
+      color: white;
+    }
+
+    .tem-close {
+      margin-left: 5px;
+      font-size: 24px;
+      font-weight: 300;
+      color: rgba($color: #ffffff, $alpha: 0.4);
+    }
+  }
+
+  .state-img {
+    width: 60px;
+    height: 60px;
+  }
+
+  .pre_img {
+    margin-left: 10px;
+    width: 30px;
+    height: 30px;
+  }
+}
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="base-bg layout-items-center">
+    <div class="timeBg">
+
+    </div>
+    <div class="bottom-s-c">
+      <div class="bottom-c" @click="onSelectClick(false)">取消</div>
+      <div class="bottom-s" @click="onSelectClick(true)">确定</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const onSelectClick = (sure: boolean) => {
+  if (sure) {
+    let time = 0.5;
+    router.push({
+      path: "/timingAdd",
+      query: { pageType: "timingAdd", time: time },
+    });
+  } else {
+    router.push({
+      path: "/timingAdd",
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.timeBg {
+  margin-top: 30px;
+  width: 672px;
+  height: 520px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex: 1;
+  background-color: rgba($color: #a1b8e6, $alpha: 0.08);
+}
+</style>

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

@@ -14,60 +14,36 @@
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { Toast } from "vant";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 /**
  * 删除定时
  * @param b
  */
-const onDeleteClick = (b) => {
+const onDeleteClick = (b: boolean) => {
   if (b) {
     Toast("删除成功");
   }
 };
+const onSelectClick = (sure: boolean) => {
+  if (sure) {
+    router.push({
+      path: "/tabs",
+      query: { pageType: "tabs", isDelete: "1" }
+    });
+  } else {
+    router.push({
+      path: "/tabs",
+      query: { pageType: "tabs", isDelete: "0" }
+    });
+  }
+};
 </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;