|
@@ -1,18 +1,24 @@
|
|
<template>
|
|
<template>
|
|
<div class="curtain-temp">
|
|
<div class="curtain-temp">
|
|
<div class="curtain-tep-top">
|
|
<div class="curtain-tep-top">
|
|
- <span>窗帘</span>
|
|
|
|
|
|
+ <span>
|
|
|
|
+ {{
|
|
|
|
+ curtainData && curtainData.length > 1 ? "窗帘" : curtainObj.name
|
|
|
|
+ }}</span
|
|
|
|
+ >
|
|
</div>
|
|
</div>
|
|
<div class="bright-box">
|
|
<div class="bright-box">
|
|
<div class="bight-text">
|
|
<div class="bight-text">
|
|
- <span>开度</span>
|
|
|
|
|
|
+ <span>设定开度</span>
|
|
<span class="line"></span>
|
|
<span class="line"></span>
|
|
- <span>{{ apertureVal }}%</span>
|
|
|
|
|
|
+ <span class="text-aper">{{ apertureVal }}%</span>
|
|
</div>
|
|
</div>
|
|
<div class="curtain-control">
|
|
<div class="curtain-control">
|
|
<div class="bight-slider" id="curtainSlider1">
|
|
<div class="bight-slider" id="curtainSlider1">
|
|
<div class="item-now" :style="{ width: itemWidth }"></div>
|
|
<div class="item-now" :style="{ width: itemWidth }"></div>
|
|
<div class="slider-bar" id="curtainHandld1"></div>
|
|
<div class="slider-bar" id="curtainHandld1"></div>
|
|
|
|
+ <div class="temp-left">关</div>
|
|
|
|
+ <div class="temp-right">开</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -26,13 +32,15 @@
|
|
>
|
|
>
|
|
<template v-if="activeIndex != 1">
|
|
<template v-if="activeIndex != 1">
|
|
<img
|
|
<img
|
|
|
|
+ class="curtain-left-icon"
|
|
v-if="
|
|
v-if="
|
|
- curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5
|
|
|
|
|
|
+ curtainObj.equipmentType != 4 && curtainObj.equipmentType != 5
|
|
"
|
|
"
|
|
:src="parseImgUrl('page-officehome', 'curtain_left.svg')"
|
|
:src="parseImgUrl('page-officehome', 'curtain_left.svg')"
|
|
alt=""
|
|
alt=""
|
|
/>
|
|
/>
|
|
<img
|
|
<img
|
|
|
|
+ class="curtain-down-icon"
|
|
v-else
|
|
v-else
|
|
:src="parseImgUrl('page-officehome', 'curtain_down.svg')"
|
|
:src="parseImgUrl('page-officehome', 'curtain_down.svg')"
|
|
alt=""
|
|
alt=""
|
|
@@ -49,7 +57,7 @@
|
|
@click="openCurtainMain(3)"
|
|
@click="openCurtainMain(3)"
|
|
:class="activeIndex == 3 ? 'control-item-active' : ''"
|
|
:class="activeIndex == 3 ? 'control-item-active' : ''"
|
|
>
|
|
>
|
|
- <img :src="parseImgUrl('page-officehome', 'curtain_stop.svg')" alt="" />
|
|
|
|
|
|
+ <img class="curtain-stop-icon" :src="parseImgUrl('page-officehome', 'curtain_stop.svg')" alt="" />
|
|
<span class="title">暂停</span>
|
|
<span class="title">暂停</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -63,18 +71,19 @@
|
|
<template v-if="activeIndex != 2">
|
|
<template v-if="activeIndex != 2">
|
|
<img
|
|
<img
|
|
v-if="
|
|
v-if="
|
|
- curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5
|
|
|
|
|
|
+ curtainObj.equipmentType != 4 && curtainObj.equipmentType != 5
|
|
"
|
|
"
|
|
:src="parseImgUrl('page-officehome', 'curtain_right.svg')"
|
|
:src="parseImgUrl('page-officehome', 'curtain_right.svg')"
|
|
alt=""
|
|
alt=""
|
|
/>
|
|
/>
|
|
<img
|
|
<img
|
|
v-else
|
|
v-else
|
|
|
|
+ class="curtain-up-icon"
|
|
:src="parseImgUrl('page-officehome', 'curtain_up.svg')"
|
|
:src="parseImgUrl('page-officehome', 'curtain_up.svg')"
|
|
alt=""
|
|
alt=""
|
|
/>
|
|
/>
|
|
</template>
|
|
</template>
|
|
- <span class="count-num" v-else>{{ count }}</span>
|
|
|
|
|
|
+ <span class="count-num" v-else>{{ count }}</span>
|
|
<span class="title">打开</span>
|
|
<span class="title">打开</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -113,6 +122,7 @@ export default defineComponent({
|
|
let timeTemp: any = null;
|
|
let timeTemp: any = null;
|
|
let curtainObj: any = {};
|
|
let curtainObj: any = {};
|
|
let interval: any = {};
|
|
let interval: any = {};
|
|
|
|
+ let curtainItem:any=''
|
|
const proxyData = reactive({
|
|
const proxyData = reactive({
|
|
lampSw: false,
|
|
lampSw: false,
|
|
itemWidth: "0%",
|
|
itemWidth: "0%",
|
|
@@ -122,6 +132,7 @@ export default defineComponent({
|
|
parseImgUrl: parseImgUrl,
|
|
parseImgUrl: parseImgUrl,
|
|
curtainObj: curtainObj,
|
|
curtainObj: curtainObj,
|
|
curtainData: props.curtainData,
|
|
curtainData: props.curtainData,
|
|
|
|
+ curtainItem:curtainItem,
|
|
//亮度滑块滑动
|
|
//亮度滑块滑动
|
|
endBoxSwiper() {
|
|
endBoxSwiper() {
|
|
let handBox: any = document.querySelector("#curtainHandld1");
|
|
let handBox: any = document.querySelector("#curtainHandld1");
|
|
@@ -227,9 +238,11 @@ export default defineComponent({
|
|
// 开度
|
|
// 开度
|
|
value = proxyData.apertureVal;
|
|
value = proxyData.apertureVal;
|
|
}
|
|
}
|
|
|
|
+ console.log("proxyData.curtainData==", proxyData.curtainData);
|
|
proxyData.curtainData.map((item: any) => {
|
|
proxyData.curtainData.map((item: any) => {
|
|
let obj: any = {
|
|
let obj: any = {
|
|
- id: item.id,
|
|
|
|
|
|
+ id: item.equipId,
|
|
|
|
+ // id:'Eq110108025995ec5bdc23fc47a0a9d8debb150d18eb',
|
|
code: type == 4 ? "EquipOpeningSet" : "EquipSwitchSet",
|
|
code: type == 4 ? "EquipOpeningSet" : "EquipSwitchSet",
|
|
value: value,
|
|
value: value,
|
|
};
|
|
};
|
|
@@ -253,6 +266,7 @@ export default defineComponent({
|
|
onBeforeUnmount(() => {});
|
|
onBeforeUnmount(() => {});
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
proxyData.curtainObj = proxyData.curtainData[0];
|
|
proxyData.curtainObj = proxyData.curtainData[0];
|
|
|
|
+ // console.log("加载了")
|
|
proxyData.barSwiperInit();
|
|
proxyData.barSwiperInit();
|
|
});
|
|
});
|
|
return {
|
|
return {
|
|
@@ -293,12 +307,20 @@ export default defineComponent({
|
|
color: #1b2129;
|
|
color: #1b2129;
|
|
}
|
|
}
|
|
.line {
|
|
.line {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: middle;
|
|
width: 1px;
|
|
width: 1px;
|
|
margin-left: 12px;
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
margin-right: 12px;
|
|
- height: 22px;
|
|
|
|
|
|
+ height: 14px;
|
|
border-left: 1px solid #e1e5eb;
|
|
border-left: 1px solid #e1e5eb;
|
|
}
|
|
}
|
|
|
|
+ .text-aper{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ font-family: "Persagy";
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.curtain-control {
|
|
.curtain-control {
|
|
.bight-slider {
|
|
.bight-slider {
|
|
@@ -336,6 +358,29 @@ export default defineComponent({
|
|
#c8d6ff 100%
|
|
#c8d6ff 100%
|
|
);
|
|
);
|
|
}
|
|
}
|
|
|
|
+ .temp-left,
|
|
|
|
+ .temp-right {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ font-family: "Persagy";
|
|
|
|
+ font-style: normal;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ width: 32px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ text-align: right;
|
|
|
|
+ color: #626c78;
|
|
|
|
+ }
|
|
|
|
+ .temp-left {
|
|
|
|
+ left: 0px;
|
|
|
|
+ padding-left: 8px;
|
|
|
|
+ }
|
|
|
|
+ .temp-right {
|
|
|
|
+ right: 0px;
|
|
|
|
+ padding-right: 8px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.curtain-control-padding {
|
|
.curtain-control-padding {
|
|
@@ -361,16 +406,32 @@ export default defineComponent({
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 50%;
|
|
left: 50%;
|
|
top: 50%;
|
|
top: 50%;
|
|
- // width: 16px;
|
|
|
|
- // height: 16px;
|
|
|
|
|
|
+ width: 24px;
|
|
|
|
+ height: 24px;
|
|
transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
+ // .curtain-down-icon{
|
|
|
|
+ // width: 18px;
|
|
|
|
+ // height: 18px;
|
|
|
|
+ // }
|
|
|
|
+ // .curtain-stop-icon{
|
|
|
|
+ // width: 14px;
|
|
|
|
+ // height: 16px;
|
|
|
|
+ // }
|
|
|
|
+ // .curtain-up-icon{
|
|
|
|
+ // width: 18px;
|
|
|
|
+ // height: 18px;
|
|
|
|
+ // }
|
|
.title {
|
|
.title {
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: -30px !important;
|
|
|
|
- left: 8px !important;
|
|
|
|
|
|
+ font-family: 'PingFang SC';
|
|
|
|
+ bottom: -28px !important;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ left: 13px !important;
|
|
display: block;
|
|
display: block;
|
|
z-index: 333;
|
|
z-index: 333;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #626C78;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|