|
@@ -19,37 +19,63 @@
|
|
|
|
|
|
<div class="curtain-control top-control">
|
|
|
<!--左边-->
|
|
|
- <div class="control-item">
|
|
|
- <img
|
|
|
- v-if="curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5"
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <div
|
|
|
+ class="control-item"
|
|
|
+ :class="activeIndex == 1 ? 'control-item-active' : ''"
|
|
|
+ @click="openCurtainMain(1)"
|
|
|
+ >
|
|
|
+ <template v-if="activeIndex != 1">
|
|
|
+ <img
|
|
|
+ v-if="
|
|
|
+ curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5
|
|
|
+ "
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <span class="count-num" v-else>{{ count }}</span>
|
|
|
+ <span class="title">关闭</span>
|
|
|
</div>
|
|
|
|
|
|
<!--暂停-->
|
|
|
- <div class="control-item">
|
|
|
+ <div
|
|
|
+ class="control-item"
|
|
|
+ @click="openCurtainMain(3)"
|
|
|
+ :class="activeIndex == 3 ? 'control-item-active' : ''"
|
|
|
+ >
|
|
|
<img :src="parseImgUrl('page-officehome', 'curtain_stop.svg')" alt="" />
|
|
|
+ <span class="title">暂停</span>
|
|
|
</div>
|
|
|
|
|
|
<!-- {{ item }} -->
|
|
|
<!--右边-->
|
|
|
- <div class="control-item">
|
|
|
- <img
|
|
|
- v-if="curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5"
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <div
|
|
|
+ class="control-item"
|
|
|
+ @click="openCurtainMain(2)"
|
|
|
+ :class="activeIndex == 2 ? 'control-item-active' : ''"
|
|
|
+ >
|
|
|
+ <template v-if="activeIndex != 2">
|
|
|
+ <img
|
|
|
+ v-if="
|
|
|
+ curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5
|
|
|
+ "
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <span class="count-num" v-else>{{ count }}</span>
|
|
|
+ <span class="title">打开</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -86,10 +112,13 @@ export default defineComponent({
|
|
|
const propsVal = props;
|
|
|
let timeTemp: any = null;
|
|
|
let curtainObj: any = {};
|
|
|
+ let interval: any = {};
|
|
|
const proxyData = reactive({
|
|
|
lampSw: false,
|
|
|
itemWidth: "0%",
|
|
|
apertureVal: 0,
|
|
|
+ activeIndex: 0,
|
|
|
+ count: 2, // 到记时
|
|
|
parseImgUrl: parseImgUrl,
|
|
|
curtainObj: curtainObj,
|
|
|
curtainData: props.curtainData,
|
|
@@ -147,6 +176,40 @@ export default defineComponent({
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
+ // 定时器定时计算
|
|
|
+ interval: interval,
|
|
|
+ countInterval() {
|
|
|
+ proxyData.interval = setInterval(() => {
|
|
|
+ proxyData.count--;
|
|
|
+ if (proxyData.count == 0) {
|
|
|
+ proxyData.count = 2;
|
|
|
+ proxyData.activeIndex = 0;
|
|
|
+ clearInterval(proxyData.interval);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ // 窗帘总开关
|
|
|
+ openCurtainMain(type: any) {
|
|
|
+ // type=1(关) type=2(开) type=3(暂停)
|
|
|
+ if (proxyData.activeIndex == type && proxyData.count !== 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ proxyData.activeIndex = type;
|
|
|
+ proxyData.count = 2;
|
|
|
+ proxyData.countInterval();
|
|
|
+ proxyData.formateCurtainData(type);
|
|
|
+ },
|
|
|
+ formateValue(type: any) {
|
|
|
+ let value: any = 0;
|
|
|
+ if (type == 1) {
|
|
|
+ value = 0;
|
|
|
+ } else if (type == 2) {
|
|
|
+ value = 1;
|
|
|
+ } else {
|
|
|
+ value = 2;
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ },
|
|
|
// 处理窗帘数据
|
|
|
formateCurtainData(type: any) {
|
|
|
let data: any = [];
|
|
@@ -291,14 +354,37 @@ export default defineComponent({
|
|
|
display: inline-block;
|
|
|
width: 56px;
|
|
|
height: 56px;
|
|
|
+ // padding-bottom: 40px;
|
|
|
background: #f1f4f6;
|
|
|
border-radius: 50%;
|
|
|
img {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
+ // width: 16px;
|
|
|
+ // height: 16px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -30px !important;
|
|
|
+ left: 8px !important;
|
|
|
+ display: block;
|
|
|
+ z-index: 333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .control-item-active {
|
|
|
+ // position: relative;
|
|
|
+ background: rgba(206, 159, 39, 0.4);
|
|
|
+ .count-num {
|
|
|
+ position: absolute;
|
|
|
+ font-family: "Persagy";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
}
|