demo完成提测版

src/styles/framework/base/flexbox.scss

@@ -265,6 +265,11 @@ Flex, Grow, & Shrink 待确定
   padding: 24px;
   flex-wrap: wrap;
 }
+//单行列表父布局
+.zhp-item-one-bg {
+  display: flex;
+  flex-wrap: wrap;
+}
 
 //智慧屏背景
 .base-bg {
@@ -371,7 +376,11 @@ Flex, Grow, & Shrink 待确定
     font-size: 24px;
     font-weight: 400;
   }
-
+  .zhp-text-24-white {
+    color: #fff;
+    font-size: 24px;
+    font-weight: 400;
+  }
   .zhp-text-28-white {
     color: #fff;
     font-size: 28px;
@@ -474,4 +483,16 @@ Flex, Grow, & Shrink 待确定
   .margin-top-30 {
     margin-top: 30px;
   }
+  .margin-top-34 {
+    margin-top: 34px;
+  }
+  .margin-bottom-20 {
+    margin-bottom: 20px;
+  }
+  .margin-bottom-26 {
+    margin-bottom: 26px;
+  }
+  .margin-bottom-34 {
+    margin-bottom: 34px;
+  }
 }

src/view/data-center/data-center-show.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="base-bg">
     <div class="zhp-title">
-      <img src="@/assets/imgs/show/back.png" class="leftImg" @click="router.back()" />
+      <img
+        src="@/assets/imgs/show/back.png"
+        class="leftImg"
+        @click="router.back()"
+      />
       <div class="right-select">
-        <div class="zhp-text-30-white">空气盒子</div>
+        <div class="zhp-text-30-white" @click="onShowOver">
+          {{ isKt==1 ? "客厅空调" : "空气盒子" }}
+        </div>
         <img
           class="zhp-img-30 margin-left-2"
           src="@/assets/imgs/show/down.png"
@@ -12,6 +18,37 @@
       <div class="zhp-title-text">{{ titleText }}</div>
     </div>
     <img class="show-img" :src="getImgSrc(showImg)" />
+    <van-overlay :show="showOver" @click="onShowOver">
+      <div class="wrapper">
+        <div class="block">
+          <div class="zhp-item-one-bg" style="justify-content: center">
+            <div class="zhp-vertical">
+              <div class="zhp-text-24-white margin-top-34 margin-bottom-26">
+                {{ isKt==1 ? "请选择空调" : "请选择" }}
+              </div>
+              <div v-for="(item, i) in isKt == 1 ? ktList : kqList" :key="i">
+                <div class="zhp-vertical">
+                  <div class="data-center-line margin-bottom-20"></div>
+                  <div class="data-center-item-bg margin-bottom-20">
+                    <div class="zhp-text-28-white">
+                      {{ item.name }}
+                    </div>
+                    <img
+                      class="selectImg"
+                      :src="
+                        item.selectState
+                          ? getImgSrc('/assets/imgs/show/icon_check.png')
+                          : getImgSrc('/assets/imgs/show/icon_nomor.png')
+                      "
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-overlay>
   </div>
 </template>
 
@@ -22,9 +59,13 @@ import router from "@/router";
 
 const getImgSrc = $commonService.$imgService.getImgSrc;
 
-let titleText = ref("");
-let showImg = ref("");
-
+const titleText = ref("");
+const showImg = ref("");
+const showOver = ref(false);
+/**
+ * 是否为空调
+ */
+const isKt = ref(1);
 onBeforeMount(() => {
   const query: any = router.currentRoute.value.query;
   if (query) {
@@ -37,8 +78,41 @@ onActivated(() => {
   if (query) {
     titleText.value = query.titleText;
     showImg.value = query.showImg;
+    isKt.value = query.isKt;
   }
 });
+const kqList = ref([
+  {
+    selectState: true,
+    name: "空气盒子",
+    id: 1,
+  },
+  {
+    selectState: false,
+    name: "全热新风",
+    id: 2,
+  },
+]);
+const ktList = ref([
+  {
+    selectState: true,
+    name: "客厅空调",
+    id: 1,
+  },
+  {
+    selectState: false,
+    name: "卧室空调",
+    id: 2,
+  },
+  {
+    selectState: false,
+    name: "儿童房空调",
+    id: 3,
+  },
+]);
+const onShowOver = () => {
+  showOver.value = !showOver.value;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -48,4 +122,38 @@ onActivated(() => {
   align-items: center;
   display: flex;
 }
+
+.wrapper {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.block {
+  position: absolute;
+  right: 0;
+  width: 312px;
+  height: 100%;
+  background-color: #20252e;
+}
+
+.selectImg {
+  width: 60px;
+  height: 60px;
+}
+
+.data-center-item-bg {
+  width: 252px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.data-center-line {
+  width: 252px;
+  height: 1px;
+  background-color: rgba($color: #fff, $alpha: 0.2);
+}
 </style>

src/view/data-center/data-center.vue

@@ -44,10 +44,11 @@ const centerList = ref([
         path: "/dataCenterShow",
         query: {
           titleText: "低碳节能",
-          showImg: "/assets/imgs/show/datacenter_tb_nhtj.png"
-        }
+          showImg: "/assets/imgs/show/datacenter_tb_nhtj.png",
+          isKt: 1,
+        },
       });
-    }
+    },
   },
   {
     isSelect: false,
@@ -58,10 +59,11 @@ const centerList = ref([
         path: "/dataCenterShow",
         query: {
           titleText: "温度曲线",
-          showImg: "/assets/imgs/show/datacenter_tb_wdbh.png"
-        }
+          showImg: "/assets/imgs/show/datacenter_tb_wdbh.png",
+          isKt: 1,
+        },
       });
-    }
+    },
   },
   {
     isSelect: false,
@@ -72,10 +74,11 @@ const centerList = ref([
         path: "/dataCenterShow",
         query: {
           titleText: "空气质量",
-          showImg: "/assets/imgs/show/datacenter_tb_kqzl.png"
-        }
+          showImg: "/assets/imgs/show/datacenter_tb_kqzl.png",
+          isKt: 0,
+        },
       });
-    }
+    },
   },
   {
     isSelect: false,
@@ -86,11 +89,12 @@ const centerList = ref([
         path: "/dataCenterShow",
         query: {
           titleText: "运转状态",
-          showImg: "/assets/imgs/show/datacenter_tb_wdbh.png"
-        }
+          showImg: "/assets/imgs/show/datacenter_tb_wdbh.png",
+          isKt: 1,
+        },
       });
-    }
-  }
+    },
+  },
 ]);
 </script>
 

src/view/device-detail/device-detail.vue

@@ -49,6 +49,8 @@
       :show-wind-dire="showWindDire"
       :device-type="deviceType"
       :d-mode="dMode"
+      :d-tem="tem"
+      :d-hum="hum"
       @change-bg="changeBg($event)"
       @change-switch="changeSwitch($event)"
     ></NormalMode>
@@ -124,6 +126,10 @@ const showWindDire = ref(true);
 const deviceType = ref();
 /** 当前选中的模式 */
 const dMode = ref(1);
+/** 温度 */
+const tem = ref(22);
+/** 湿度 */
+const hum = ref(50);
 
 onActivated(() => {
   // 为了刷新dom 用v-if刷新
@@ -134,6 +140,8 @@ onActivated(() => {
   ifRun.value = query.openFlg === "true" ? true : false;
   dMode.value = query.dMode;
   deviceType.value = query.deviceType;
+  tem.value = query.tem;
+  hum.value = query.hum;
   // mode.value=query.mode;
   if (query.deviceType === "4E") {
     showTabs.value = false;

src/view/device-detail/fresh-air.vue

@@ -262,7 +262,7 @@ const changeSwitch = () => {
   }
 
   .setting-control {
-    margin-top: 43px;
+    margin-top: 13px;
     padding: 0 64px;
     display: flex;
     justify-content: space-between;

src/view/device-detail/mode/normal.vue

@@ -133,24 +133,28 @@ const props = defineProps<{
   deviceType: string;
   /**默认模式*/
   dMode: any;
+  /**温度*/
+  dTem: number;
+  /**湿度*/
+  dHum: number;
 }>();
 const { ifRun } = toRefs(props);
 /** 温度配置 */
 const tempOptions = ref({
   titleName: "室内",
-  value: 25,
+  value: props.dTem,
   unit: "℃",
-  min: 16,
-  max: 32,
+  min: 22,
+  max: 60,
   current: "temp"
 });
 /** 湿度配置 */
 const humiOptions = ref({
   titleName: "湿度",
-  value: 76,
+  value: props.dHum,
   unit: "%",
-  min: 35,
-  max: 90,
+  min: 22,
+  max: 60,
   current: "humi"
 });
 /** 当前展示可操作性的配置 */

src/view/device-detail/whole-setting.vue

@@ -100,8 +100,8 @@ import { getCurrentInstance, onActivated, onBeforeMount, ref } from "vue";
 import router from "@/router";
 
 const isAuto = ref(true);
-const tem = ref(23);
-const hum = ref(56);
+const tem = ref(22);
+const hum = ref(50);
 const { proxy } = getCurrentInstance() as any;
 const queryType = ref(1);
 
@@ -109,30 +109,11 @@ onActivated(() => {
   const query: any = router.currentRoute.value.query;
   if (query) {
     queryType.value = query.type;
-    setData();
+    tem.value = query.tem;
+    hum.value = query.hum;
   }
 });
 
-const setData = () => {
-  switch (queryType.value) {
-    case 1: //春季
-      tem.value = 24;
-      hum.value = 50;
-      break;
-    case 2: //夏季
-      tem.value = 26;
-      hum.value = 60;
-      break;
-    case 3: //梅雨
-      tem.value = 24;
-      hum.value = 60;
-      break;
-    case 4: //冬季
-      tem.value = 22;
-      hum.value = 50;
-      break;
-  }
-};
 /**
  * 全屋设定，Event通知值变化
  */
@@ -173,7 +154,6 @@ const openAuto = () => {
   isAuto.value = !isAuto.value;
   if (isAuto.value) {
     //自动
-    setData();
   }
 };
 </script>

src/view/message/messageDetail.vue

@@ -8,9 +8,9 @@
       />
     </div>
     <div class="message-bg">
-      <div class="zhp-text-34-white-alpha50">{{time}}</div>
-      <div class="message-title">{{title}}</div>
-      <div class="zhp-text-28-white">{{content}}</div>
+      <div class="zhp-text-34-white-alpha50">{{ time }}</div>
+      <div class="message-title">{{ title }}</div>
+      <div class="zhp-text-28-white">{{ content }}</div>
     </div>
   </div>
 </template>
@@ -18,17 +18,18 @@
 <script lang="ts" setup>
 import router from "@/router";
 import { onActivated, ref } from "vue";
-let title=ref("");
-let time=ref("");
-let content=ref("");
-onActivated(()=>{
-  const query:any=router.currentRoute.value.query;
-  if (query){
-    title.value=query.title;
-    time.value=query.time;
-    content.value=query.content;
+
+let title = ref("");
+let time = ref("");
+let content = ref("");
+onActivated(() => {
+  const query: any = router.currentRoute.value.query;
+  if (query) {
+    title.value = query.title;
+    time.value = query.time;
+    content.value = query.content;
   }
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -38,11 +39,12 @@ onActivated(()=>{
   border-radius: 8px;
   background-origin: border-box;
   display: flex;
-  height: 100vh;
+  height: 580px;
   padding: 24px 29px 29px 24px;
   margin-left: 24px;
   margin-right: 24px;
 }
+
 .message-title {
   color: white;
   font-weight: 500;

src/view/tabs/device-control.vue

@@ -102,8 +102,8 @@ import { Toast } from "vant";
 const { proxy } = getCurrentInstance() as any;
 /** 当前选中的模式 */
 const mode = ref(1); //是否制热
-const tem = ref("23"); //设置温度
-const hum = ref("56"); //设置湿度
+const tem = ref("22"); //设置温度
+const hum = ref("50"); //设置湿度
 const deviceList: any = ref<any[]>([]);
 
 onBeforeMount(() => {
@@ -215,7 +215,9 @@ const goToDetail = (item: any) => {
           openFlg: item.openFlg,
           deviceType: item.deviceType,
           smartMode: item.smartMode,
-          dMode: mode.value
+          dMode: mode.value,
+          tem: tem.value,
+          hum: hum.value
         }
       });
   }

src/view/tabs/home-screen.vue

@@ -6,7 +6,7 @@
       style="background-color: #000"
     >
       <van-loading size="80px" vertical color="#1989fa"
-      ><span>加载中...</span></van-loading
+        ><span>加载中...</span></van-loading
       >
     </van-overlay>
     <div class="bg-video" @click="changeAnimation()">
@@ -121,7 +121,7 @@ import {
   onUnmounted,
   onActivated,
   getCurrentInstance,
-  onBeforeMount
+  onBeforeMount,
 } from "vue";
 import router from "@/router";
 import { CountTo } from "vue3-count-to";
@@ -166,10 +166,10 @@ const showNumScoll = ref(false);
 /** 时间长按定时器 */
 const timePushTimer: any = ref(null);
 const { proxy } = getCurrentInstance() as any;
-const tem = ref(23);
-const hum = ref(56);
-const startTem = ref(23);
-const startHum = ref(56);
+const tem = ref(22);
+const hum = ref(50);
+const startTem = ref(22);
+const startHum = ref(50);
 const seasonName = ref("雪天");
 const seasonImg = ref("/assets/imgs/show/home_xuetian.png");
 const seasonTem = ref(-10);
@@ -186,27 +186,44 @@ onBeforeMount(() => {
 const setType = (type: any) => {
   currentType.value = type;
   switch (currentType.value) {
-    case 1: //春季
-      seasonName.value = "多云";
+    case 1: //夏季
+      seasonName.value = "晴天";
       seasonTem.value = 26;
+      tem.value = 24;
+      hum.value = 50;
+      startTem.value = 24;
+      startHum.value = 50;
       seasonImg.value = "/assets/imgs/show/home_duoyun.png";
       break;
     case 2: //夏季
       seasonName.value = "晴天";
       seasonTem.value = 32;
+      tem.value = 26;
+      hum.value = 60;
+      startTem.value = 26;
+      startHum.value = 60;
       seasonImg.value = "/assets/imgs/show/home_qingtian.png";
       break;
     case 3: //梅雨
       seasonName.value = "雨天";
       seasonTem.value = 16;
+      tem.value = 24;
+      hum.value = 60;
+      startTem.value = 24;
+      startHum.value = 60;
       seasonImg.value = "/assets/imgs/show/home_yutian.png";
       break;
     case 4: //冬季
       seasonName.value = "雪天";
       seasonTem.value = -10;
+      tem.value = 22;
+      hum.value = 50;
+      startTem.value = 22;
+      startHum.value = 50;
       seasonImg.value = "/assets/imgs/show/home_xuetian.png";
       break;
   }
+  proxy.$eventBusService.emit("queryData", { tem: tem.value, hum: hum.value });
 };
 const queryData = (data: any) => {
   tem.value = data.tem;
@@ -246,8 +263,10 @@ const wholeSetting = () => {
   router.push({
     path: "/wholeSetting",
     query: {
-      type: currentType.value
-    }
+      type: currentType.value,
+      tem: tem.value,
+      hum: hum.value,
+    },
   });
 };
 

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

@@ -1,7 +1,8 @@
 <template>
   <div class="base-bg" style="align-items: center; display: flex">
     <div class="timeBg margin-top-30">
-      <div class="swiper swiper-container" style="height: 100px">
+      <img class="selectedBg" src="@/assets/imgs/show/select_time_bg.png" />
+      <div class="swiper swiper-container" style="height: 150px">
         <div class="swiper-wrapper">
           <div v-for="(item, i) in timeList" :key="i" class="swiper-slide">
             <div class="swiper-item">
@@ -26,11 +27,12 @@ import { useRouter } from "vue-router";
 import { getCurrentInstance, onMounted, ref } from "vue";
 import { Toast } from "vant";
 import { Swiper } from "swiper";
+
 let mySwiper: Swiper; // 声明swiper
 const router = useRouter();
 const timeMode = ref("1");
 const { proxy } = getCurrentInstance() as any;
-
+const time = ref("0.5");
 onMounted(() => {
   initSwiper();
 });
@@ -50,23 +52,20 @@ const initSwiper = () => {
     observeParents: true,
     initialSlide: currentModeIndex, // 初始时展示的位置
     on: {
-      touchStart: () => {},
-      touchMove: () => {},
-      slideChangeTransitionEnd: () => {
-        // mySwiper &&
-        //   emit("changeSmartMode", timeList.value[mySwiper.realIndex].id);
-        // nextTick(() => {
-        //   getShowImg();
-        // });
+      touchStart: () => {
+      },
+      touchMove: () => {
       },
-    },
+      slideChangeTransitionEnd: () => {
+        time.value = timeList.value[mySwiper.realIndex].text;
+      }
+    }
   });
 };
 const onSelectClick = (sure: boolean) => {
   router.back();
   if (sure) {
-    const time = 0.5;
-    proxy.$eventBusService.emit("selectTimeEvent", time);
+    proxy.$eventBusService.emit("selectTimeEvent", time.value);
   }
 };
 
@@ -79,7 +78,7 @@ const timeList = ref<any[]>([
   { text: "3.0", id: "6" },
   { text: "3.5", id: "7" },
   { text: "4.0", id: "8" },
-  { text: "4.5", id: "9" },
+  { text: "4.5", id: "9" }
 
 ]);
 const onConfirm = ({ selectedValues }: { selectedValues: any }) => {
@@ -93,39 +92,69 @@ const onCancel = () => Toast("取消");
 
 <style lang="scss" scoped>
 .timeBg {
+  display: flex;
   width: 672px;
   height: 520px;
   align-items: center;
   justify-content: center;
   background-color: rgba($color: #a1b8e6, $alpha: 0.08);
 }
+
+.selectedBg {
+  position: fixed;
+  width: 100%;
+  height: 104px;
+}
+
 .swiper-item {
   font-size: 60px;
   width: 65px;
   text-align: center;
 }
-.smart-wrapper {
-  width: 100%;
-  height: 100%;
-  position: relative;
 
-  .swiper-container {
-    position: relative;
-    width: 100%;
-    height: 426px;
+.swiper-container {
+  position: relative;
+  width: 100%;
+  height: 253px;
 
-    .select-wrapper {
-      position: absolute;
-      width: 212px;
-      height: 416px;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+  .select-wrapper {
+    position: absolute;
+    width: 212px;
+    height: 416px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
-      img {
-        width: 100%;
-      }
+    img {
+      width: 100%;
     }
   }
 }
+
+.swiper-slide {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 300ms;
+  transform: scale(0.6);
+  color: rgba($color: #FFF, $alpha: .2);
+}
+
+.swiper-slide-active, .swiper-slide-duplicate-active {
+  transform: scale(1);
+  color: white;
+  margin-bottom: 20px;
+}
+
+.swiper-slide-prev, .swiper-slide-next {
+  transform: scale(0.75);
+  color: rgba($color: #FFF, $alpha: .4);
+}
+
+.swiper-item {
+  font-size: 72px;
+  width: 72px;
+  text-align: center;
+}
 </style>

src/view/ui/env-select.vue

@@ -44,7 +44,7 @@ const seasonList = ref([
   {
     id: 1,
     tem: "26",
-    season: "春季",
+    season: "夏季",
     hum: 0
   },
   {