|
@@ -45,76 +45,51 @@
|
|
|
<template v-if="type == 'all'">
|
|
|
<div class="line"></div>
|
|
|
<div class="top-control">
|
|
|
- <img
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_opening.svg')"
|
|
|
- @click="openCurtainOpening()"
|
|
|
- alt=""
|
|
|
- />
|
|
|
-
|
|
|
- <!--左边-->
|
|
|
- <img
|
|
|
- v-if="
|
|
|
- curtainData[0].equipmentType == 4 ||
|
|
|
- curtainData[0].equipmentType == 5
|
|
|
- "
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
-
|
|
|
- <!--暂停-->
|
|
|
- <img :src="parseImgUrl('page-officehome', 'curtain_stop.svg')" alt="" />
|
|
|
-
|
|
|
- <!--右边-->
|
|
|
- <img
|
|
|
- v-if="
|
|
|
- curtainData[0].equipmentType == 4 ||
|
|
|
- curtainData[0].equipmentType == 5
|
|
|
- "
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <div class="curtain-child" v-if="type == 'child'">
|
|
|
- <div class="child-item" :key="item.id" v-for="item in curtainData">
|
|
|
- <div class="curtain-name">
|
|
|
- <div class="name">{{ item.name }}</div>
|
|
|
- <span>开度90%</span>
|
|
|
- </div>
|
|
|
- <div class="curtain-control">
|
|
|
- <!--左边-->
|
|
|
+ <div class="control-item" @click="openCurtainOpening(curtainData)">
|
|
|
<img
|
|
|
- v-if="item.equipmentType == 4 || item.equipmentType == 5"
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else
|
|
|
- :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_opening.svg')"
|
|
|
alt=""
|
|
|
/>
|
|
|
+ </div>
|
|
|
+ <!--左边-->
|
|
|
+ <div
|
|
|
+ class="control-item"
|
|
|
+ :class="allActive == 1 ? 'control-item-active' : ''"
|
|
|
+ @click="openCurtainMain(1)"
|
|
|
+ >
|
|
|
+ <template v-if="allActive !== 1">
|
|
|
+ <img
|
|
|
+ v-if="
|
|
|
+ curtainData[0].equipmentType == 4 ||
|
|
|
+ curtainData[0].equipmentType == 5
|
|
|
+ "
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <span v-else>{{ count }}</span>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="control-item">
|
|
|
<!--暂停-->
|
|
|
<img
|
|
|
:src="parseImgUrl('page-officehome', 'curtain_stop.svg')"
|
|
|
alt=""
|
|
|
/>
|
|
|
-
|
|
|
- <!-- {{ item }} -->
|
|
|
- <!--右边-->
|
|
|
+ </div>
|
|
|
+ <!--右边-->
|
|
|
+ <div class="control-item">
|
|
|
<img
|
|
|
- v-if="item.equipmentType == 4 || item.equipmentType == 5"
|
|
|
+ v-if="
|
|
|
+ curtainData[0].equipmentType == 4 ||
|
|
|
+ curtainData[0].equipmentType == 5
|
|
|
+ "
|
|
|
+ @click="openCurtainMain(1)"
|
|
|
:src="parseImgUrl('page-officehome', 'curtain_right.svg')"
|
|
|
alt=""
|
|
|
/>
|
|
@@ -125,6 +100,53 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="curtain-child" v-if="type == 'child'">
|
|
|
+ <div class="child-item" :key="item.id" v-for="item in curtainData">
|
|
|
+ <div class="curtain-name">
|
|
|
+ <div class="name">{{ item.name }}</div>
|
|
|
+ <span>开度90%</span>
|
|
|
+ </div>
|
|
|
+ <div class="curtain-control top-control">
|
|
|
+ <!--左边-->
|
|
|
+ <div class="control-item">
|
|
|
+ <img
|
|
|
+ v-if="item.equipmentType == 4 || item.equipmentType == 5"
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--暂停-->
|
|
|
+ <div class="control-item">
|
|
|
+ <img
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_stop.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- {{ item }} -->
|
|
|
+ <!--右边-->
|
|
|
+ <div class="control-item">
|
|
|
+ <img
|
|
|
+ v-if="item.equipmentType == 4 || item.equipmentType == 5"
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -162,6 +184,7 @@ export default defineComponent({
|
|
|
let timer: any = null;
|
|
|
let projectId: any = props.projectId;
|
|
|
let type: any = "all";
|
|
|
+ let interval: any = {};
|
|
|
const proxyData = reactive({
|
|
|
curtainData: curtainData,
|
|
|
userIsControl: props.userIsControl,
|
|
@@ -169,12 +192,13 @@ export default defineComponent({
|
|
|
projectId: projectId,
|
|
|
type: type,
|
|
|
countText: "", // 到记时文案
|
|
|
- count: 0, // 到记时
|
|
|
+ count: 2, // 到记时
|
|
|
curtainOpen: false,
|
|
|
curtainClose: false,
|
|
|
parseImgUrl: parseImgUrl,
|
|
|
timer: timer,
|
|
|
// 开度弹窗
|
|
|
+ allActive: 0,
|
|
|
openCurtainOpening(selectData: any) {
|
|
|
contx.emit("showCurtainOpening", selectData);
|
|
|
},
|
|
@@ -223,117 +247,25 @@ export default defineComponent({
|
|
|
return false;
|
|
|
}
|
|
|
},
|
|
|
- // 窗帘总开关
|
|
|
- handleTotal(setType: string) {
|
|
|
- if (proxyData.userIsControl) {
|
|
|
- let flag = proxyData.checkCount();
|
|
|
- /**
|
|
|
- * flag:true 代表指令正在发送中,false:代表当前没有指令在发送
|
|
|
- */
|
|
|
- if (!flag) {
|
|
|
- // 只要有一条指令在发送中,要求其它指令不能再发送
|
|
|
- proxyData.changeStatus(setType);
|
|
|
- let arr = JSON.parse(JSON.stringify(proxyData.curtainData)); // 窗帘数据
|
|
|
- let paramsArr = proxyData.setParams(arr, setType);
|
|
|
- // 更新窗帘的按钮可点击状态
|
|
|
- proxyData.setSwitchStatus(setType);
|
|
|
- // 发送窗帘指令
|
|
|
- setEquipeHttp(paramsArr).then((res) => {});
|
|
|
- }
|
|
|
- } else {
|
|
|
- Toast("您没有当前空间的控制权限!");
|
|
|
- }
|
|
|
- },
|
|
|
- handleChild(setType: string, id: any, index: any) {
|
|
|
- if (proxyData.userIsControl) {
|
|
|
- let flag = proxyData.checkCount();
|
|
|
- /**
|
|
|
- * flag:true 代表指令正在发送中,false:代表当前没有指令在发送
|
|
|
- */
|
|
|
- if (!flag) {
|
|
|
- // 只要有一条指令在发送中,要求其它指令不能再发送
|
|
|
- let childItem: any = proxyData.curtainData[index];
|
|
|
- const params = {
|
|
|
- projectId: proxyData.projectId,
|
|
|
- objectId: id, // 设备ID/窗帘组ID
|
|
|
- equipmentCategory: "CFSSES", // 设备编码 窗帘:CFSSES
|
|
|
- infoCode: setType, // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
|
|
|
- value: 1, // 窗帘 1 移动/停止
|
|
|
- };
|
|
|
- let paramsArr = [];
|
|
|
- paramsArr.push(params);
|
|
|
- // 更新窗帘的按钮可点击状态
|
|
|
- proxyData.changeStatus(setType, childItem);
|
|
|
- proxyData.setSwitchStatus(setType, childItem);
|
|
|
- // 发送窗帘指令
|
|
|
- setEquipeHttp(paramsArr).then((res) => {});
|
|
|
- }
|
|
|
- } else {
|
|
|
- Toast("您没有当前空间的控制权限!");
|
|
|
- }
|
|
|
- },
|
|
|
- clearCurtain() {
|
|
|
- proxyData.curtainData.map((item: any) => {
|
|
|
- item.curtainClose = false;
|
|
|
- item.curtainOpen = false;
|
|
|
- proxyData.curtainClose = false;
|
|
|
- proxyData.curtainOpen = false;
|
|
|
- });
|
|
|
- },
|
|
|
- changeStatus(setType: any, item: any = null) {
|
|
|
- proxyData.clearCurtain();
|
|
|
- if (setType === "EquipOffSet") {
|
|
|
- if (item) {
|
|
|
- item.curtainClose = true;
|
|
|
- } else {
|
|
|
- proxyData.curtainClose = true;
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (item) {
|
|
|
- item.curtainOpen = true;
|
|
|
- } else {
|
|
|
- proxyData.curtainOpen = true;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 窗帘状态数据
|
|
|
- setSwitchStatus(setType: any, item: any = null) {
|
|
|
- proxyData.count = 2; // 恢复count
|
|
|
- proxyData.countText = "指令下发中";
|
|
|
- proxyData.timer = setInterval(() => {
|
|
|
- if (proxyData.count === 0) {
|
|
|
- proxyData.countText = "";
|
|
|
- clearInterval(proxyData.timer);
|
|
|
- proxyData.clearCurtain();
|
|
|
- }
|
|
|
- if (proxyData.count === 1) {
|
|
|
- proxyData.countText = "再次点击停止窗帘";
|
|
|
- }
|
|
|
- if (proxyData.count > 0) {
|
|
|
- proxyData.count--;
|
|
|
- } else {
|
|
|
- proxyData.count = 0;
|
|
|
+ interval: interval,
|
|
|
+ // 定时器定时计算
|
|
|
+ countInterval() {
|
|
|
+ proxyData.interval = setInterval(() => {
|
|
|
+ proxyData.count--;
|
|
|
+ if (proxyData.count == 0) {
|
|
|
+ proxyData.count = 2;
|
|
|
+ proxyData.allActive = 0;
|
|
|
+ clearInterval(proxyData.interval);
|
|
|
}
|
|
|
}, 1000);
|
|
|
},
|
|
|
- // 设置发送给后台的窗帘数据
|
|
|
- setParams(arr: any, setType: any) {
|
|
|
- let paramsArr = [];
|
|
|
- for (let i = 0; i < arr.length; i++) {
|
|
|
- let obj = {
|
|
|
- objectId: arr[i].id, // 设备ID/窗帘组ID
|
|
|
- equipmentCategory: "CFSSES", // 设备编码 窗帘:CFSSES
|
|
|
- infoCode: setType, // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
|
|
|
- value: 1,
|
|
|
- };
|
|
|
- paramsArr.push(obj);
|
|
|
- }
|
|
|
- return paramsArr;
|
|
|
+ // 调节总开关
|
|
|
+ openCurtainMain(type: any) {
|
|
|
+ proxyData.allActive = type;
|
|
|
+ proxyData.countInterval();
|
|
|
},
|
|
|
});
|
|
|
- const isShowChildLight = computed(() => {
|
|
|
- return proxyData.curtainData.length && proxyData.curtainData.length > 1;
|
|
|
- });
|
|
|
+
|
|
|
watch(props, (newProps: any) => {
|
|
|
if (newProps.spaceId) {
|
|
|
// 当前空间的控制权限
|
|
@@ -346,7 +278,6 @@ export default defineComponent({
|
|
|
proxyData.getEqpGroup();
|
|
|
});
|
|
|
return {
|
|
|
- isShowChildLight,
|
|
|
...toRefs(proxyData),
|
|
|
};
|
|
|
},
|
|
@@ -429,18 +360,6 @@ export default defineComponent({
|
|
|
|
|
|
.line {
|
|
|
border-top: 1px solid #e8ecf0;
|
|
|
- // margin-bottom: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.top-control {
|
|
|
- text-align: right;
|
|
|
- padding: 16px 20px;
|
|
|
- padding-bottom: 0;
|
|
|
- img {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.curtain-child {
|
|
@@ -452,13 +371,6 @@ export default defineComponent({
|
|
|
padding-left: 20px;
|
|
|
padding-right: 20px;
|
|
|
border-top: 1px solid #e8ecf0;
|
|
|
- .curtain-control {
|
|
|
- img {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
.curtain-name {
|
|
|
.name {
|
|
|
font-family: "PingFang SC";
|
|
@@ -481,4 +393,41 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.top-control {
|
|
|
+ text-align: right;
|
|
|
+ padding: 16px 20px;
|
|
|
+ padding-bottom: 0;
|
|
|
+ .control-item {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 8px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: #f1f4f6;
|
|
|
+ border-radius: 50%;
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .control-item-active {
|
|
|
+ background: rgba(206, 159, 39, 0.4);
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ font-family: "Persagy";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|