Browse Source

选择设备

dev_230517
刘洪超 1 year ago
parent
commit
86e1653af4
  1. BIN
      src/assets/imgs/show/icon_select.png
  2. BIN
      src/assets/imgs/show/icon_timing_fault.png
  3. BIN
      src/assets/imgs/show/icon_timing_killvirus.png
  4. 9
      src/router-demo.ts
  5. 26
      src/router.ts
  6. 49
      src/styles/framework/base/flexbox.scss
  7. 75
      src/view/tabs/device-control.vue
  8. 17
      src/view/tabs/fixed-time.vue
  9. 48
      src/view/timing/timing-add.vue
  10. 249
      src/view/timing/timing-select-device.vue
  11. 43
      src/view/timing/timing-select-time.vue
  12. 58
      src/view/timing/timing-sure-delete.vue

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

9
src/router-demo.ts

@ -36,15 +36,6 @@ export const demoRoutes = [ @@ -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",

26
src/router.ts

@ -40,32 +40,42 @@ const projectRoutes = [ @@ -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"),
},
// 非哈希路由暂不启用
{

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

@ -240,6 +240,7 @@ Flex, Grow, & Shrink 待确定 @@ -240,6 +240,7 @@ Flex, Grow, & Shrink 待确定
line-height: 1;
}
}
//智慧屏标题
.zhp-title {
padding-top: 31px;
@ -247,6 +248,7 @@ Flex, Grow, & Shrink 待确定 @@ -247,6 +248,7 @@ Flex, Grow, & Shrink 待确定
width: 100vw;
position: relative;
}
//智慧屏标题
.zhp-title-text {
margin-top: 4px;
@ -254,11 +256,14 @@ Flex, Grow, & Shrink 待确定 @@ -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 待确定 @@ -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");
}
}
}

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

@ -16,7 +16,6 @@ @@ -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 @@ @@ -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 @@ @@ -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 = () => { @@ -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) => { @@ -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) => { @@ -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;
padding: 28px 36px;
font-size: 32px;
padding: 14px 18px;
background: #394457;
border-radius: 32px;
border-radius: 16px;
position: absolute;
top: 50px;
right: 48px;
top: 25px;
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;
padding: 44px 48px 20px 48px;
margin-bottom: 40px;
border-radius: 16px;
padding: 22px 24px 10px 24px;
margin-bottom: 20px;
.content-top {
display: flex;
@ -200,15 +188,15 @@ const goToDetail = (item: any) => { @@ -200,15 +188,15 @@ const goToDetail = (item: any) => {
.device-name {
color: #FFF;
font-size: 48px;
margin-right: 20px;
padding: 12px 0;
font-size: 24px;
margin-right: 10px;
padding: 6px 0;
}
.status-border {
font-size: 40px;
padding: 12px 20px;
border-radius: 32px;
font-size: 20px;
padding: 6px 10px;
border-radius: 16px;
span {
display: inline-block;
@ -227,7 +215,7 @@ const goToDetail = (item: any) => { @@ -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) => { @@ -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) => { @@ -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,12 +256,11 @@ const goToDetail = (item: any) => { @@ -268,12 +256,11 @@ const goToDetail = (item: any) => {
.device-btm {
display: flex;
justify-content: space-between;
align-items: center;
.close-btn {
width: 120px;
height: 120px;
width: 60px;
height: 60px;
img {
width: 100%;
}
@ -287,7 +274,7 @@ const goToDetail = (item: any) => { @@ -287,7 +274,7 @@ const goToDetail = (item: any) => {
align-items: flex-end;
}
}
.air-quality-you {
background: url('@/assets/imgs/device-control/air_quality_you@2x.png') no-repeat;
background-size: cover;
@ -304,4 +291,4 @@ const goToDetail = (item: any) => { @@ -304,4 +291,4 @@ const goToDetail = (item: any) => {
}
}
}
</style>
</style>

17
src/view/tabs/fixed-time.vue

@ -65,9 +65,6 @@ @@ -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([ @@ -172,21 +169,20 @@ const navList = ref([
}
.base-timing-card-content-unSelectBg {
width: 100vw;
margin-left: 45px;
width: 672px;
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([ @@ -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([ @@ -217,7 +216,7 @@ const navList = ref([
.state {
line-height: 32px;
font-weight: 400;
font-size: 10px;
font-size: 18px;
color: #ffffff;
}

48
src/view/timing/timing-add.vue

@ -52,28 +52,60 @@ @@ -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>

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

@ -0,0 +1,249 @@ @@ -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>

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

@ -0,0 +1,43 @@ @@ -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>

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

@ -14,60 +14,36 @@ @@ -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;

Loading…
Cancel
Save