Browse Source

demo完成提测版

dev_230517
刘洪超 1 year ago
parent
commit
b995659c59
  1. BIN
      public/assets/imgs/device-detail/normal-mode/loop_pur@2x.png
  2. BIN
      public/assets/imgs/device-detail/normal-mode/loop_pur_select@2x.png
  3. BIN
      public/assets/imgs/device-detail/normal-mode/save_air@2x.png
  4. BIN
      public/assets/imgs/device-detail/normal-mode/save_air_select@2x.png
  5. BIN
      public/assets/imgs/device-detail/normal-mode/shut_down_loop_pur@2x.png
  6. BIN
      public/assets/imgs/device-detail/normal-mode/shut_down_save_air@2x.png
  7. BIN
      public/assets/imgs/device-detail/normal-mode/shut_down_smart_auto@2x.png
  8. BIN
      public/assets/imgs/device-detail/normal-mode/shut_down_ventilation@2x.png
  9. BIN
      public/assets/imgs/device-detail/normal-mode/smart_auto@2x.png
  10. BIN
      public/assets/imgs/device-detail/normal-mode/smart_auto_select@2x.png
  11. BIN
      public/assets/imgs/device-detail/normal-mode/ventilation@2x.png
  12. BIN
      public/assets/imgs/device-detail/normal-mode/ventilation_select@2x.png
  13. BIN
      public/assets/imgs/show/select_time_bg.png
  14. BIN
      src/assets/imgs/show/select_time_bg.png
  15. 23
      src/styles/framework/base/flexbox.scss
  16. 118
      src/view/data-center/data-center-show.vue
  17. 30
      src/view/data-center/data-center.vue
  18. 8
      src/view/device-detail/device-detail.vue
  19. 2
      src/view/device-detail/fresh-air.vue
  20. 16
      src/view/device-detail/mode/normal.vue
  21. 28
      src/view/device-detail/whole-setting.vue
  22. 30
      src/view/message/messageDetail.vue
  23. 8
      src/view/tabs/device-control.vue
  24. 37
      src/view/tabs/home-screen.vue
  25. 69
      src/view/timing/timing-select-time.vue
  26. 2
      src/view/ui/env-select.vue

BIN
public/assets/imgs/device-detail/normal-mode/loop_pur@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
public/assets/imgs/device-detail/normal-mode/loop_pur_select@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
public/assets/imgs/device-detail/normal-mode/save_air@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
public/assets/imgs/device-detail/normal-mode/save_air_select@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
public/assets/imgs/device-detail/normal-mode/shut_down_loop_pur@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
public/assets/imgs/device-detail/normal-mode/shut_down_save_air@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
public/assets/imgs/device-detail/normal-mode/shut_down_smart_auto@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
public/assets/imgs/device-detail/normal-mode/shut_down_ventilation@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
public/assets/imgs/device-detail/normal-mode/smart_auto@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
public/assets/imgs/device-detail/normal-mode/smart_auto_select@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
public/assets/imgs/device-detail/normal-mode/ventilation@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
public/assets/imgs/device-detail/normal-mode/ventilation_select@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
public/assets/imgs/show/select_time_bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
src/assets/imgs/show/select_time_bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

23
src/styles/framework/base/flexbox.scss

@ -265,6 +265,11 @@ Flex, Grow, & Shrink 待确定 @@ -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 待确定 @@ -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 待确定 @@ -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;
}
}

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

@ -1,9 +1,15 @@ @@ -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 @@ @@ -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"; @@ -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(() => { @@ -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(() => { @@ -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>

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

@ -44,10 +44,11 @@ const centerList = ref([ @@ -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([ @@ -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([ @@ -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([ @@ -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>

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

@ -49,6 +49,8 @@ @@ -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); @@ -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(() => { @@ -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;

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

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

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

@ -133,24 +133,28 @@ const props = defineProps<{ @@ -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"
});
/** 当前展示可操作性的配置 */

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

@ -100,8 +100,8 @@ import { getCurrentInstance, onActivated, onBeforeMount, ref } from "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(() => { @@ -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 = () => { @@ -173,7 +154,6 @@ const openAuto = () => {
isAuto.value = !isAuto.value;
if (isAuto.value) {
//
setData();
}
};
</script>

30
src/view/message/messageDetail.vue

@ -8,9 +8,9 @@ @@ -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 @@ @@ -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(()=>{ @@ -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;

8
src/view/tabs/device-control.vue

@ -102,8 +102,8 @@ import { Toast } from "vant"; @@ -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) => { @@ -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
}
});
}

37
src/view/tabs/home-screen.vue

@ -121,7 +121,7 @@ import { @@ -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); @@ -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(() => { @@ -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 = () => { @@ -246,8 +263,10 @@ const wholeSetting = () => {
router.push({
path: "/wholeSetting",
query: {
type: currentType.value
}
type: currentType.value,
tem: tem.value,
hum: hum.value,
},
});
};

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

@ -1,7 +1,8 @@ @@ -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"; @@ -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 = () => { @@ -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[]>([ @@ -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,26 +92,30 @@ const onCancel = () => Toast("取消"); @@ -93,26 +92,30 @@ 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 {
.swiper-container {
position: relative;
width: 100%;
height: 426px;
height: 253px;
.select-wrapper {
position: absolute;
@ -126,6 +129,32 @@ const onCancel = () => Toast("取消"); @@ -126,6 +129,32 @@ const onCancel = () => Toast("取消");
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>

2
src/view/ui/env-select.vue

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

Loading…
Cancel
Save