<template> <div class="light" v-if="lampList && lampList.length"> <!--如果有子设备--> <div class="light-top"> <div class="light-desc"> <p class="light-title"> {{ isShowChildLight ? "光照" : lampList[0].localName }} </p> <p :class="isShowChildLight ? 'light-status' : 'light-status'"> {{ lampSw ? "照明已开启" : "照明已关闭" }} </p> </div> <div class="light-right"> <div class="switch-box" v-if="isShowChildLight"> <span class="switch-item" @click="eqChange('allLamp', true, 0)" >全开</span > <span class="switch-item" @click="eqChange('allLamp', false, 0)" >全关</span > </div> <img :src="lightImg" alt="" v-if="!isShowChildLight" /> </div> </div> <div class="light-main-control" v-if="!isShowChildLight"> <div class="main-color" v-if="lampList[0].bright || lampList[0].colorTemperature" > <img :src="lightColorImg" @click="showLightColorCtrol(lampList[0])" alt="" /> </div> <div v-else></div> <Switch v-if="!showFlag" :disabled="!userIsControl" v-model="lampSw" @click="eqChange('allLamp', '', 0)" inactive-color="rgba(196, 196, 196, 0.4)" class="switch-btn" /> </div> <!--灯控制按钮--> <div class="light-box" v-if="isShowChildLight"> <template v-for="(item, index) in lampList" :key="item.id"> <div class="light-control" @click="showLightColorCtrol(item)" v-if="showFlag ? index < lampList.length : index < 2" > <div class="control-top"> <img :src="item.switch ? item.imgOpen : item.imgClose" alt="" /> <Switch active-color="$elActiveColor" :disabled="!userIsControl" v-model="item.switch" size="14px" @click.stop="eqChange('main', item, index)" inactive-color="rgba(196, 196, 196, 0.2)" class="child-switch" /> </div> <div class="control-bottom"> <div class="control-title"> {{ item.localName }} </div> <img v-if="item.bright || item.colorTemperature" :style="{ opacity: item.switch ? '1' : '0.3' }" :src="lightColorImg" alt="" /> </div> </div> </template> </div> <div class="show-all" v-if="lampList && lampList.length > 2" @click.stop="showAll" > <van-icon :name="lightIcon" class="light-icon" /> <span>展开更多</span> </div> </div> </template> <script lang="ts"> import { defineComponent, computed, onMounted, reactive, toRefs, getCurrentInstance, watch, onBeforeMount, onUnmounted, onBeforeUnmount, } from "vue"; import { Switch, Toast } from "vant"; import { getLampHttp, getStatusHttp, setallLampHttp } from "@/apis/envmonitor"; import { parseImgUrl } from "@/utils"; import { type } from "os"; import { onDeactivated } from "vue"; import { AnyMxRecord } from "dns"; export default defineComponent({ props: { projectId: { type: String, default: () => "", }, controlMode: { type: Number, default: () => 0, }, spaceId: { type: String, default: () => "", }, userIsControl: { type: Boolean, default: () => false, }, forceOverTimeFlag: { type: Boolean, default: () => false, }, seviceEquipmentList: { // 是否走服务定制的设备 type: Array, default: () => [], }, }, components: { Switch }, setup(props, contx) { const lampList: any = []; let lightsStatusTimer: any = null; const timeOut: any = null; const initData: any = []; let lightParams: any = []; const proxyData = reactive({ seviceEquipmentList: props.seviceEquipmentList, spaceId: props.spaceId, controlMode: props.controlMode, userIsControl: props.userIsControl, forceOverTimeFlag: props.forceOverTimeFlag, setStatus: false, lightParams: lightParams, allowSvg: "down_Arrow.svg", timeOut: timeOut, lightIcon: "arrow-down", showFlag: false, loadingLight: false, initData: initData, lampList: lampList, lightsStatusTimer: lightsStatusTimer, startCheckLightsTime: 0, lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"), lightImg: parseImgUrl("page-officehome", "lamp_close.png"), lampSw: false, // 主灯开关 // 点击展示所有的登录 showAll() { proxyData.showFlag = !proxyData.showFlag; console.log("proxyData.showFlag==", proxyData.showFlag); if (proxyData.showFlag) { proxyData.lightIcon = "arrow-up"; } else { proxyData.lightIcon = "arrow-down"; } }, // 点击展示调色和调温弹窗 showLightColorCtrol(item: any, e: any = null) { console.log(item); if (item.switch) { contx.emit("showLightColorCtrol", item); } }, // 检查设备是否执行空间服务时间 checkDeviceIsExeSpaceTime(deviceAll: any = []) { if (proxyData.controlMode !== 1) { return true; } let seviceEquipmentList: any = proxyData.seviceEquipmentList; let flag: any = false; for (let i = 0; i < seviceEquipmentList.length; i++) { for (let j = 0; j < deviceAll.length; j++) { if ( seviceEquipmentList[i].id == deviceAll[j].id && seviceEquipmentList[i].isExeSpaceTime ) { flag = true; break; } } if (flag) { break; } } return flag; }, // 获取灯的状态 getLampList() { getLampHttp({ spaceId: proxyData.spaceId }) .then((res) => { const resData: any = res; if (!proxyData.setStatus) { if (resData && resData.result == "success") { let content = resData?.content ?? []; let lampOpen = false; // 如果有一个开 则总灯开 for (let i = 0; i < content.length; i++) { content[i].type = "lamp"; if (content[i].lightType == 1) { content[i].imgOpen = parseImgUrl( "page-officehome", "lamp_open.png" ); content[i].imgClose = parseImgUrl( "page-officehome", "lamp_close.png" ); } else { content[i].imgOpen = parseImgUrl( "page-officehome", "atmLamp_small_open.png" ); content[i].imgClose = parseImgUrl( "page-officehome", "atmLamp_small_close.png" ); } content[i].switch = content[i].runStatus ? true : false; if (content[i].runStatus) { lampOpen = true; } content[i].loading = false; } proxyData.initData = JSON.parse(JSON.stringify(content)); // 灯的数据 proxyData.lampSw = lampOpen; // 主灯开关 proxyData.lampList = content; proxyData.lightImg = proxyData.lampSw ? parseImgUrl("page-officehome", "lamp_open.png") : parseImgUrl("page-officehome", "lamp_close.png"); if (content[0]) { if (content[0].lightType !== 1) { proxyData.lightImg = proxyData.lampSw ? parseImgUrl("page-officehome", "atmLamp_small_open.png") : parseImgUrl( "page-officehome", "atmLamp_small_close.png" ); } } } } // console.log("执行了----===="); proxyData.startLightsStatusTimer(); }) .catch(() => { proxyData.startLightsStatusTimer(); }); }, // 调整灯 eqChange(type: any, item: any, index: any) { if (proxyData.userIsControl) { // debugger if (type === "allLamp") { let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime( proxyData.lampList ); if (item !== "") { proxyData.lampSw = item; // 点击全开和全关的时候item动态传值true或者false } if ( proxyData.forceOverTimeFlag && proxyData.lampSw && isExeSpaceTime ) { // 强制加班开灯 contx.emit("triggerWork", 3); return; } // 总开关按钮所有灯 // 当前要执行的灯的操作 proxyData.loadingLight = true; // const statusFlag = !proxyData.lampSw // console.log('proxyData.lampSw==') proxyData.lightImg = proxyData.lampSw ? parseImgUrl("page-officehome", "lamp_open.png") : parseImgUrl("page-officehome", "lamp_close.png"); const statusFlag = proxyData.lampSw; // 瞬间修改状态 proxyData.setStatus = true; proxyData.updateAllLampStatus(statusFlag); proxyData.setLamp(type, "", statusFlag, 0); // 调接口 } else { let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime([ item, ]); if (proxyData.forceOverTimeFlag && item.switch && isExeSpaceTime) { // 强制加班开灯 contx.emit("triggerWork", 3, item); return; } //当前要执行的灯的操作 // 按钮loading item.loading = true; const statusFlag: any = item.switch; let id = item.id; proxyData.setStatus = true; proxyData.updateLampStatus(item, statusFlag); proxyData.setLamp(type, id, statusFlag, index); // 调接口 } } else { Toast("您没有当前空间的控制权限!"); } }, // 控制灯的接口 setLamp(type: string, id: any, statusFlag: any, index: any) { let params: any = []; if (type === "allLamp") { for (let i = 0; i < proxyData.initData.length; i++) { proxyData.initData[i].switch = statusFlag; } params = proxyData.initData; } else { params = [ { id: id, switch: statusFlag, }, ]; } proxyData.lightParams = params; // 调服务端的接口像后台发送灯的操作的指令 setallLampHttp(params) .then((res) => { const resData: any = res; // set成功后1s关闭定时器 setTimeout(() => { proxyData.setStatus = false; }, 1000); if (resData.result === "success") { // const checkData: any = proxyData.judgeChangeResponeseSuccess(resData) // proxyData.getTimeLampStatus(checkData, type, id, statusFlag, index) } else { proxyData.initLampLoading(); } }) .catch(() => { setTimeout(() => { proxyData.setStatus = false; }, 1000); }); }, // 报错后关闭灯的loading initLampLoading() { proxyData.loadingLight = false; proxyData.lampList.map((item: any) => { item.loading = false; }); }, //手动修改灯的状态 updateAllLampStatus(statusFlag: any) { proxyData.lampSw = statusFlag; for (let i = 0; i < proxyData.lampList.length; i++) { proxyData.lampList[i].switch = statusFlag; // if (proxyData.lampList[i].type == 'lamp') { // } } }, // 单个灯的状态修改 updateLampStatus(item: any, statusFlag: any) { item.switch = statusFlag; // let flag: any = true // for (let i = 0; i < proxyData.lampList.length; i++) { // if (proxyData.lampList[i].type == 'lamp') { // if (proxyData.lampList[i].switch !== statusFlag) { // flag = false // break // } // } // } }, // 轮询查看状态 getTimeLampStatus( checkData: any, type: any, id: any, statusFlag: any, index: any ) { if (checkData["success"] && checkData["success"].length) { if (type === "allLamp") { // 点击主灯按钮 proxyData.updateAllLampLoading(checkData["success"]); // 所有灯 } else { // 当个的时候修改loading的状态 proxyData.updateLampLoading(index); } proxyData.getLampList(); } if (checkData["processing"] && checkData["processing"].length) { let checkParams: any = proxyData.lightParams; let processArr: any = checkData["processing"]; let params: any = []; processArr.map((item: any) => { let obj: any = { id: item.id, orderSeqNum: item.orderSeqNum, }; for (let i = 0; i < checkParams.length; i++) { if (item.id === checkParams[i].id) { obj.switch = checkParams[i].switch; break; } } params.push(obj); }); proxyData.checkChangeLightStatusSuccess( params, type, id, statusFlag, index ); } if (checkData["error"] && checkData["error"].length) { if (type === "allLamp") { // 点击主灯按钮 proxyData.updateAllLampLoading(checkData["error"]); // 所有灯 } else { // 当个的时候修改loading的状态 proxyData.updateLampLoading(index); } } }, // 查看指令是否成功完成 judgeChangeResponeseSuccess(resData: any) { let data: any = resData?.content ?? []; let processingArr: any = []; let successArr: any = []; let errorArr: any = []; for (let i = 0; i < data.length; i++) { let item: any = data[i]; if ((item.result = "success")) { if (item.state === 200 && item.exeResult === "success") { successArr.push(item); } else if ( (item.state === 200 && item.exeResult === "processing:rcvd") || (item.state === 202 && !item.exeResult) ) { processingArr.push(item); } else { errorArr.push(item); } } else { errorArr.push(item); } } let obj: any = { success: successArr, processing: processingArr, error: errorArr, }; return obj; }, // 操作成功后更新所有灯的真实状态 updateAllLampLoading(arr: any) { for (let i = 0; i < proxyData.lampList.length; i++) { if (proxyData.lampList[i].type == "lamp") { arr.map((item: any) => { if (proxyData.lampList[i].id === item.id) { proxyData.lampList[i].loading = false; } }); } } let loadingLen = proxyData.lampList.filter((item: any) => { return item.loading; }); if (loadingLen.length === 0) { proxyData.loadingLight = false; } }, // 动态切换主灯的状态 updateLampLoading(index: any) { proxyData.lampList[index].loading = false; }, // 灯的指令完成后更新状态 checkChangeLightStatusSuccess( checkParams: any, type: any, id: any, value: any, index: any ) { // 轮询查询灯的状态 getStatusHttp(checkParams).then((res) => { const resData: any = res; const checkData: any = proxyData.judgeChangeResponeseSuccess(resData); proxyData.getTimeLampStatus(checkData, type, id, value, index); }); }, // 灯灯接口清除定时器 clearLightStatusTimer() { clearTimeout(proxyData.lightsStatusTimer); proxyData.lightsStatusTimer = null; }, // 定时刷新接口 startLightsStatusTimer(timerLen: any = 2000) { proxyData.clearLightStatusTimer(); proxyData.lightsStatusTimer = setTimeout(() => { proxyData.clearLightStatusTimer(); proxyData.getLampList(); }, timerLen); }, }); const isShowChildLight:any = computed(() => { return proxyData.lampList.length && proxyData.lampList.length > 1; }); // onDeactivated(()=>{ // destroyWatch() // }) watch( [() => props, () => props.spaceId], (newProps: any, oldProps: any) => { if (newProps[0]) { proxyData.userIsControl = newProps[0].userIsControl; proxyData.controlMode = newProps[0].controlMode; proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag; proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList; } if (newProps[1] && newProps[1] != oldProps[1]) { // 空间id改变的重新获取值调用接口 proxyData.clearLightStatusTimer(); proxyData.spaceId = newProps[1]; proxyData.showFlag = false; proxyData.getLampList(); } }, { deep: false, immediate: false, } ); onBeforeUnmount(() => { console.log("灯的组件销毁了--"); proxyData.clearLightStatusTimer(); }); onMounted(() => { proxyData.getLampList(); }); return { isShowChildLight, ...toRefs(proxyData), }; }, }); </script> <style lang="scss" scoped> .light { width: 100%; background: #ffffff; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05); border-radius: 25px; margin: 15px 0px; } .light-main { padding-left: 20px; padding-bottom: 10px; padding-top: 10px; } .light-top { padding-left: 20px; // padding-bottom: 10px; padding-top: 10px; display: flex; justify-content: space-between; } .light-main-control { padding-bottom: 15px; padding-left: 20px; padding-right: 15px; // line-height: 36px; display: flex; justify-content: space-between; text-align: right; div { width: 36px; } .main-color { width: 36px; height: 36px; // line-height: 36px; text-align: center; border-radius: 50%; background: #f7f9fa; img { width: 20px; height: 20px; margin-top: 8px; } } .switch-btn { margin-top: 6px; margin-right: 12px; } } .light-desc { padding-top: 10px; // padding-left: 5px; font-family: PingFang SC; font-size: 16px; line-height: 19px; color: #4d5262; } .light-right { position: relative; text-align: center; .switch-box { padding-top: 20px; padding-right: 15px; span { display: inline-block; font-family: "PingFang SC"; font-style: normal; font-weight: 400; font-size: 14px; color: #2e3742; margin-left: 20px; // width: 60px; height: 32px; line-height: 32px; padding: 0 15px; background: #f1f4f6; border-radius: 21px; } .switch-item { &:hover { background: #e8ecf0; } &:active { background: #e8ecf0; } } } img { //width: 98px; height: 100px; } .switch-btn { position: absolute; right: -20px; bottom: 20px; } } .light-title { font-family: PingFang SC; padding-left: 5px; font-size: 16px; line-height: 19px; color: #4d5262; flex: none; order: 0; flex-grow: 0; margin: 5px 0px; } .light-status { font-family: PingFang SC; padding-left: 5px; font-size: 12px; line-height: 16px; color: #c4c4c4; flex: none; order: 1; flex-grow: 0; margin: 15px 0px; } .show-all { font-family: "PingFang SC"; font-style: normal; font-weight: 400; font-size: 12px; line-height: 17px; padding-bottom: 15px; padding-top: 5px; color: #cccccc; text-align: center; .light-icon { font-size: 12px; padding-right: 10px; } } .light-box { padding: 0 12px; font-size: 0; } .light-control { display: inline-block; width: 49%; vertical-align: middle; background: #f7f9fa; border-radius: 16px; margin-bottom: 12px; // margin-left: 2%; &:nth-child(2n - 1) { margin-right: 2%; } .control-top { display: flex; padding-right: 16px; padding-bottom: 12px; justify-content: space-between; img { width: 80px; height: 70px; vertical-align: middle; } .child-switch { margin-top: 16px; display: inline-block; vertical-align: middle; } } .control-bottom { display: flex; justify-content: space-between; padding-right: 16px; padding-left: 18px; padding-bottom: 15px; .control-title { font-weight: 500; font-family: PingFang SC; font-size: 16px; line-height: 20px; color: #4d5262; } img { width: 20px; height: 20px; cursor: pointer; } } } </style> <style class="style" lang="scss"> .light { .van-loading__spinner { color: $elActiveColor !important; } .van-switch__loading { top: 0; left: 0; width: 100%; height: 100%; line-height: 1; } .van-switch--disabled { opacity: 0.5; } } </style>