smart-screen-demo-web/src/view/device-detail/mode/normal.vue

<template>
    <div class="normal-wrapper">
        <div class="title">{{ currentOptions.titleName }}</div>
        <!-- 温湿度设置 -->
        <div class="set-wrapper">
            <div class="set-reduce" @click="handleReduce()">
                <img src="@/assets/imgs/device-detail/normal-mode/set-reduce@2x.png" width="100%">
            </div>
            <div class="set-container">
                <div class="current-value">{{ currentOptions.value }}</div>
                <div class="current-unit">{{ currentOptions.unit }}</div>
                <div class="treat" v-if="props.deviceType !== '4E'">
                    <span>{{ treatOptions.value }}{{ treatOptions.unit }}</span>
                    <img src="@/assets/imgs/device-detail/normal-mode/switch_btn@2x.png" width="100%" @click="switchTempHumi()">
                </div>
            </div>
            <div class="set-add" @click="handleAdd()">
                <img src="@/assets/imgs/device-detail/normal-mode/set-add@2x.png" width="100%">
            </div>
        </div>

        <!-- 滤网未复位提示 -->
        <div class="filter-screen-prompt" v-if="false">
            <img src="@/assets/imgs/device-detail/normal-mode/filter_fault@2x.png" width="100%" class="filter-screen-prompt-img">
            <span>滤网未复位</span>
            <img src="@/assets/imgs/device-detail/normal-mode/right@2x.png" width="100%">
        </div>

        <!-- 水模块 -->
        <div class="water-module-wrapper" v-if="props.deviceType === '4E'">
            <!-- 出水温度 -->
            <div class="water-module-container outlet-water">
                <div class="water-module-top">28℃</div>
                <div class="water-module-btm">出水温度</div>
            </div>
            <!-- 回水温度 -->
            <div class="water-module-container return-water">
                <div class="water-module-top">24℃</div>
                <div class="water-module-btm">回水温度</div>
            </div>
            <!-- 水泵状态 -->
            <div class="water-module-container water-pump">
                <div class="water-module-top">关闭</div>
                <div class="water-module-btm">水泵状态</div>
            </div>
        </div>

        <!-- 模式、风量、风向、开关 -->
        <div class="setting-control">
            <div class="setting-control-container" v-if="props.showMode">
                <div class="circle-card mode" @click="openModePop()">
                    <img :src="getImgSrc(modeImg)">
                </div>
                <span>{{ modeName }}</span>
            </div>
            <div class="setting-control-container" v-if="props.showWind">
                <div class="circle-card wind" @click="openWindPop()">
                    <img :src="getImgSrc(windImg)">
                </div>
                <span>{{ windName }}</span>
            </div>
            <div class="setting-control-container" v-if="props.showWindDire">
                <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 { ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
import { ModeOptions } from './mode-dic';
import { WindOptions } from './wind-dic';
import { Mode } from './enmu/mode.enmu';
import { Wind } from './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 props = defineProps<{
    /** 开关机状态 */
    ifRun: boolean;
    /** 是否显示模式 */
    showMode: boolean;
    /** 风量是否显示 */
    showWind: boolean;
    /** 风向是否显示 */
    showWindDire: boolean;
    /** 设备类型 */
    deviceType: string;
}>()
const { ifRun } = toRefs(props);
/** 温度配置 */
const tempOptions = ref({
    titleName: '室内',
    value: 25,
    unit: '℃',
    min: 16,
    max: 32,
    current: 'temp'
});
/** 湿度配置 */
const humiOptions = ref({
    titleName: '湿度',
    value: 76,
    unit: '%',
    min: 35,
    max: 90,
    current: 'humi'
});
/** 当前展示可操作性的配置 */
const currentOptions = ref();
/** 等待操作的配置 */
const treatOptions = ref();
/** 模式配置字典 */
const modeOptions: any = ModeOptions;
/** 风量配置字典 */
const windOptions: any = WindOptions;
/** 当前选中的模式 */
const mode = ref(Mode.COLD);
/** 当前选中的模式名称 */
const modeName = ref('');
/** 模式展示的图片 */
const modeImg = ref('');
/** 可设定的模式数组 */
const modeList = ref<any[]>([]);
/**
 * 开关
 * true:开 false:关
 */
const onOff = ref(ifRun);
/** 开关图片 */
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 emit = defineEmits(['changeBg', 'changeSwitch']);

onBeforeMount(() => {
    currentOptions.value = {...tempOptions.value};
    treatOptions.value = {...humiOptions.value};
    // 可设定的模式 todo::现在是写死的
    let modeArr: any = [];
    if (props.deviceType === '4E') {
        mode.value = Mode.FLOOR;
        modeArr = [Mode.COLD_WIND, Mode.HOT_WIND, Mode.FLOOR, Mode.HOT_WATER, Mode.SWIMMING_WATER];
    } else {
        mode.value = Mode.COLD;
        modeArr = [Mode.COLD, Mode.WET, Mode.HOT, Mode.WIND, Mode.FLOOR, Mode.HOT_FLOOR, Mode.AUTO];
    }
    modeArr.forEach((item: any) => {
        modeList.value.push(modeOptions.find((item1: any) => item1.mode === item));
    })
    settableWind.value = [Wind.AUTO, Wind.SUPER_LOW, Wind.LOW, Wind.MIDDLE, Wind.HIGH, Wind.SUPER_HIGH];
    getShowImg();
})

onMounted(() => {
})

/** 获取展示图片 */
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;
        // 向父组件发送事件，展示背景图
        emit('changeBg', modeData.nomalBg);
        // 当前风量展示的图片
        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;
        // 向父组件发送事件，展示关机背景图
        emit('changeBg', '/assets/imgs/device-detail/normal-mode/normal_bg_shutdown@2x.png');
        // 当前风量展示的关机图片
        windImg.value = windOptions[0][`modeWind${wind.value}`];
        // 当前风向关机展示的图片
        windDireImg.value = '/assets/imgs/device-detail/normal-mode/horiz_swing_shutdown@2x.png';
    }
}

/** 温湿度减 */
const handleReduce = () => {
    if (currentOptions.value.value <= currentOptions.value.min) {
        currentOptions.value.value = currentOptions.value.max;
    } else {
        currentOptions.value.value -= 1;
    }
}

/** 温湿度加 */
const handleAdd = () => {
    if (currentOptions.value.value >= currentOptions.value.max) {
        currentOptions.value.value = currentOptions.value.min;
    } else {
        currentOptions.value.value += 1;
    }
}

/** 切换温湿度 */
const switchTempHumi = () => {
    if (currentOptions.value.current === 'temp') {
        tempOptions.value = {...currentOptions.value};
        currentOptions.value = {...humiOptions.value};
        treatOptions.value = {...tempOptions.value};
    } else {
        humiOptions.value = {...currentOptions.value};
        currentOptions.value = {...tempOptions.value};
        treatOptions.value = {...humiOptions.value};
    }
}

/** 模式切换弹窗开启 */
const openModePop = () => {
    showModePop.value = true;
}

/** 模式弹窗关闭 */
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 = () => {
    emit('changeSwitch', !onOff.value);
    nextTick(() => {
        getShowImg();
    });
}
</script>

<style lang="scss" scoped>
.normal-wrapper {
    width: 100%;
    height: 100%;

    .title {
        color: #FFF;
        font-size: 28px;
        text-align: center;
    }

    .set-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 11px;
        position: relative;

        .set-reduce, .set-add {
            width: 134px;
            height: 134px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .set-container {
            color: #FFF;
            font-family: Roboto-Regular, Roboto;

            .current-value {
                font-size: 180px;
                font-family: Roboto-Light, Roboto;
                font-weight: 300;
            }

            .current-unit {
                font-size: 50px;
                position: absolute;
                top: 17px;
                right: 190px;
            }

            .treat {
                position: absolute;
                bottom: 17px;
                right: 140px;
                font-size: 34px;

                img {
                    width: 30px;
                    margin-left: 4px;
                }
            }
        }
    }

    .filter-screen-prompt {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 17px;

        img {
            width: 30px;
            height: 31px;
        }

        span {
            color: #D65659;
            font-size: 26px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            margin: 0 3px 0 6px;
        }
    }
    
    // 水模块
    .water-module-wrapper {
        padding: 0 134px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #FFF;

        .water-module-container {
            display: flex;
            flex-direction: column;
            align-items: center;

            .water-module-top {
                font-size: 40px;
                font-family: Roboto-Regular, Roboto, SourceHanSansCN-Regular, SourceHanSansCN;
            }

            .water-module-btm {
                margin-top: 16px;
                font-size: 20px;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            }
        }
    }

    .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>