Q5全热控制页面增加底部按钮

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

@@ -13,11 +13,207 @@
       <div class="zhp-title-text">新风换气机</div>
     </div>
     <img class="show-img" src="@/assets/imgs/show/icon_xfhqj.png" />
+    <!-- 模式、风量、风向、开关 -->
+    <div class="setting-control">
+        <div class="setting-control-container">
+          <div class="circle-card mode" @click="openModePop()">
+            <img :src="getImgSrc(modeImg)">
+          </div>
+          <span>{{ modeName }}</span>
+        </div>
+        <div class="setting-control-container">
+          <div class="circle-card wind" @click="openWindPop()">
+            <img :src="getImgSrc(windImg)">
+          </div>
+          <span>{{ windName }}</span>
+        </div>
+        <div class="setting-control-container">
+          <div class="circle-card wind-dire">
+            <img :src="getImgSrc(windDireImg)">
+          </div>
+          <span>风向</span>
+        </div>
+        <div class="setting-control-container">
+          <div class="circle-card switch" @click="changeSwitch()">
+            <img :src="getImgSrc(onOffImg)">
+          </div>
+          <span>开关</span>
+        </div>
+    </div>
+
+    <!-- 模式切换弹窗 -->
+    <ModeChangePop
+      :show-mode-pop="showModePop"
+      :mode-list="modeList"
+      @close-pop="closeModePop($event)"
+      @switch-mode="switchMode($event)"
+    ></ModeChangePop>
+    <!-- 风量切换弹窗 -->
+    <WindChangePop
+      :show-wind-pop="showWindPop"
+      :wind-list="windList"
+      @close-pop="closeWindPop($event)"
+      @switch-wind="switchWind($event)"
+      style="background-color: #20252E;"
+    ></WindChangePop>
   </div>
 </template>
 
 <script lang="ts" setup>
 import router from "@/router";
+import { ref, nextTick, onBeforeMount } from "vue";
+import { ModeOptions } from './mode/mode-dic';
+import { WindOptions } from './mode/wind-dic';
+import { Mode } from './mode/enmu/mode.enmu';
+import { Wind } from './mode/enmu/wind.enmu';
+import ModeChangePop from '@/components/mode-change.vue';
+import WindChangePop from '@/components/wind-change.vue';
+import { $commonService } from '@/services/framework/dependency-injection-service';
+
+const getImgSrc = $commonService.$imgService.getImgSrc;
+/** 模式配置字典 */
+const modeOptions: any = ModeOptions;
+/** 风量配置字典 */
+const windOptions: any = WindOptions;
+/** 当前选中的模式 */
+const mode = ref(Mode.SMART_AUTO);
+/** 当前选中的模式名称 */
+const modeName = ref('');
+/** 模式展示的图片 */
+const modeImg = ref('');
+/** 可设定的模式数组 */
+const modeList = ref<any[]>([]);
+/**
+ * 开关
+ * true:开 false:关
+ */
+const onOff = ref(false);
+/** 开关图片 */
+const onOffImg = ref('');
+/** 当前选中的风量 */
+const wind = ref(Wind.AUTO);
+/** 当前选中的风量名称 */
+const windName = ref('');
+/** 风量展示的图片 */
+const windImg = ref('');
+/** 当前风量字典数据 */
+const windData: any = ref();
+/** 可设定的风量 */
+const settableWind = ref<any[]>([]);
+/** 风量数组 */
+const windList = ref<any[]>([]);
+/** 风向展示的图片 */
+const windDireImg = ref('');
+/** 模式更改弹窗是否开启 */
+const showModePop = ref(false);
+/** 风量更改弹窗是否开启 */
+const showWindPop = ref(false);
+
+/** 模式切换弹窗开启 */
+const openModePop = () => {
+    showModePop.value = true;
+}
+
+onBeforeMount(() => {
+  settableWind.value = [Wind.AUTO, Wind.SUPER_LOW, Wind.LOW, Wind.MIDDLE, Wind.HIGH, Wind.SUPER_HIGH];
+  const modeArr = [Mode.SMART_AUTO, Mode.LOOP_PUR, Mode.SAVE_AIR, Mode.VENTILATION];
+  modeArr.forEach((item: any) => {
+    modeList.value.push(modeOptions.find((item1: any) => item1.mode === item));
+  });
+  getShowImg();
+})
+
+/** 获取展示图片 */
+const getShowImg = () => {
+  modeList.value.forEach(item => {
+    if (item.mode === mode.value) {
+      item.selected = true;
+    } else {
+      item.selected = false;
+    }
+  })
+  // 获取模式字典配置数据
+  const modeData = modeOptions.find((item: any) => item.mode === mode.value);
+  // 获取风量字典配置数据
+  getWindDic();
+  // 展示模式的文字
+  modeName.value = modeData.modeName;
+  windName.value = windData.value[`wind${wind.value}Name`];
+  if (onOff.value) {
+    // 开机展示模式图片
+    modeImg.value = modeData.modeImg;
+    // 开机时的开关图
+    onOffImg.value = modeData.selectSwitchImg;
+    // 当前风量展示的图片
+    windImg.value = windData.value[`modeWind${wind.value}`];
+    // 当前风向展示的图片
+    windDireImg.value = modeData.windDireImg;
+  } else {
+    // 关机展示关机模式图片
+    modeImg.value = modeOptions.find((item: any) => item.mode === mode.value).shutdownImg;
+    // 关机时图片自灰
+    onOffImg.value = modeOptions.find((item: any) => item.mode === mode.value).shutdownSwitchImg;
+    // 当前风量展示的关机图片
+    windImg.value = windOptions[0][`modeWind${wind.value}`];
+    // 当前风向关机展示的图片
+    windDireImg.value = '/assets/imgs/device-detail/normal-mode/horiz_swing_shutdown@2x.png';
+  }
+}
+
+/** 模式弹窗关闭 */
+const closeModePop = (params: any) => {
+  showModePop.value = params.showModePop;
+  modeList.value = [...params.modeList];
+  mode.value = modeList.value.find(item => item.selected).mode;
+  getShowImg();
+}
+
+/** 模式切换 */
+const switchMode = (list: any[]) => {
+  modeList.value = [...list];
+  mode.value = modeList.value.find(item => item.selected).mode;
+  getShowImg();
+}
+
+/** 获取当前模式的风量字典 */
+const getWindDic = () => {
+  // 获取风量字典配置数据
+  windData.value = windOptions.find((item: any) => item.mode === mode.value);
+  windList.value = [];
+  settableWind.value.forEach(item => {
+    const data = {
+      name: windData.value[`wind${item}Name`], // 风量名称
+      img: windData.value[`modeWind${item}`], // 风量图
+      wind: item,
+      selected: item === wind.value? true: false // 是否选中
+    };
+    windList.value.push(data);
+  });
+}
+
+/** 风量切换 */
+const switchWind = (list: any[]) => {
+  windList.value = [...list];
+  wind.value = windList.value.find(item => item.selected).wind;
+  getShowImg();
+}
+
+/** 风量切换弹窗开启 */
+const openWindPop = () => {
+  showWindPop.value = true;
+}
+
+const closeWindPop = (params: any) => {
+  showWindPop.value = params.showWindPop;
+}
+
+/** 开关切换 */
+const changeSwitch = () => {
+  onOff.value = !onOff.value;
+  nextTick(() => {
+      getShowImg();
+  });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -27,7 +223,7 @@ import router from "@/router";
   position: relative;
   background-image: url("@/assets/imgs/show/bg_xfhqj.png");
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size: 100% 100%;
   height: 100vh;
   width: 100vw;
   //智慧屏返回键
@@ -64,5 +260,40 @@ import router from "@/router";
   .show-img {
     width: 100vw;
   }
+
+  .setting-control {
+    margin-top: 43px;
+    padding: 0 64px;
+    display: flex;
+    justify-content: space-between;
+
+    .setting-control-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      span {
+        color: #FFF;
+        font-size: 28px;
+        font-weight: 400;
+        margin-top: 20px;
+      }
+    }
+
+    .circle-card {
+      width: 110px;
+      height: 110px;
+      background: url('@/assets/imgs/device-detail/normal-mode/circle-bg@2x.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+          width: 56px;
+          height: 56px;
+      }
+    }
+  }
 }
 </style>

src/view/device-detail/mode/enmu/mode.enmu.ts

@@ -36,4 +36,12 @@ export enum Mode {
     HOT_WATER,
     /** 泳池用水 */
     SWIMMING_WATER,
+    /** 智慧自动 */
+    SMART_AUTO,
+    /** 循环净化 */
+    LOOP_PUR,
+    /** 节能新风 */
+    SAVE_AIR,
+    /** 普通换气 */
+    VENTILATION,
 }

src/view/device-detail/mode/mode-dic.ts

@@ -230,6 +230,54 @@ const ModeOptions = [
         selected: false,
         selectModeBg: '/assets/imgs/device-detail/normal-mode/swimming_water_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_cold@2x.png',
+    }, {
+        modeName: '智慧自动',
+        mode: Mode.SMART_AUTO,
+        modeImg: '/assets/imgs/device-detail/normal-mode/smart_auto@2x.png',
+        nomalBg: '/assets/imgs/device-detail/normal-mode/normal_bg_cold@2x.png',
+        smartBg: '',
+        selectSwitchImg: '/assets/imgs/device-detail/normal-mode/switch_cold@2x.png',
+        shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_smart_auto@2x.png',
+        shutdownSwitchImg: '',
+        selected: false,
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/smart_auto_select@2x.png',
+        windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_cold@2x.png',
+    }, {
+        modeName: '循环净化',
+        mode: Mode.LOOP_PUR,
+        modeImg: '/assets/imgs/device-detail/normal-mode/loop_pur@2x.png',
+        nomalBg: '/assets/imgs/device-detail/normal-mode/normal_bg_cold@2x.png',
+        smartBg: '',
+        selectSwitchImg: '/assets/imgs/device-detail/normal-mode/switch_cold@2x.png',
+        shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_loop_pur@2x.png',
+        shutdownSwitchImg: '',
+        selected: false,
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/loop_pur_select@2x.png',
+        windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_cold@2x.png',
+    }, {
+        modeName: '节能新风',
+        mode: Mode.SAVE_AIR,
+        modeImg: '/assets/imgs/device-detail/normal-mode/save_air@2x.png',
+        nomalBg: '/assets/imgs/device-detail/normal-mode/normal_bg_cold@2x.png',
+        smartBg: '',
+        selectSwitchImg: '/assets/imgs/device-detail/normal-mode/switch_cold@2x.png',
+        shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_save_air@2x.png',
+        shutdownSwitchImg: '',
+        selected: false,
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/save_air_select@2x.png',
+        windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_cold@2x.png',
+    }, {
+        modeName: '普通换气',
+        mode: Mode.VENTILATION,
+        modeImg: '/assets/imgs/device-detail/normal-mode/ventilation@2x.png',
+        nomalBg: '/assets/imgs/device-detail/normal-mode/normal_bg_cold@2x.png',
+        smartBg: '',
+        selectSwitchImg: '/assets/imgs/device-detail/normal-mode/switch_cold@2x.png',
+        shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_ventilation@2x.png',
+        shutdownSwitchImg: '',
+        selected: false,
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/ventilation_select@2x.png',
+        windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_cold@2x.png',
     }
 ]
 

src/view/device-detail/mode/wind-dic.ts

@@ -89,7 +89,10 @@ const WindOptions: any = [
     }
 ];
 ModeOptions.forEach(item => {
-    if (item.mode === Mode.COLD || item.mode ===  Mode.COLD_WIND || item.mode === Mode.SWIMMING_WATER) {
+    if (
+        item.mode === Mode.COLD || item.mode ===  Mode.COLD_WIND || item.mode === Mode.SWIMMING_WATER
+        || item.mode === Mode.SMART_AUTO || item.mode === Mode.LOOP_PUR || item.mode === Mode.SAVE_AIR || item.mode === Mode.VENTILATION
+    ) {
         const windOption = {...coldWind};
         windOption.mode = item.mode;
         WindOptions.push(windOption);