12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421 |
- <template>
- <div class="air">
- <div class="air-top">
- <div class="air-desc">
- <p class="air-title">空调</p>
- <p class="air-temperature">
- {{ airTemp ? airTemp : "--" }}
- <sup>℃</sup>
- </p>
- </div>
- <div class="air-right">
- <img
- v-if="airData.isOpen"
- :src="parseImgUrl('page-officehome', 'openair.svg')"
- alt=""
- />
- <img
- v-else
- :src="parseImgUrl('page-officehome', 'air_close.svg')"
- alt=""
- />
- <!-- <van-loading style="padding-top: 20px" v-else /> -->
- </div>
- </div>
- <!--温度调节-->
- <div class="top-switch">
- <div class="top-nav" v-if="equipList && equipList.length > 1">
- <span
- :class="navType == 'all' ? 'nav-active' : ''"
- @click="checkNav('all')"
- >
- 总控制
- </span>
- <span
- :class="navType == 'child' ? 'nav-active' : ''"
- @click="checkNav('child')"
- >
- 子设备
- </span>
- </div>
- <div v-else></div>
- <Switch
- class="switch-btn"
- v-if="navType == 'all'"
- :size="23"
- inactive-color="rgba(196, 196, 196, 0.4)"
- @click="airChange"
- :model-value="airData.isOpen"
- />
- </div>
- <div class="line"></div>
- <!--温度调节的box-->
- <div class="main-temp" v-if="navType == 'all' && airData.isOpen">
- <div class="air-control air-control-padding">
- <div class="temp-slider" id="sliderId">
- <div class="slider-bar" id="barId">
- <div class="bar-temp">{{ realTemp }}℃</div>
- <div
- class="bar-circle"
- style="border: 2px solid rgba(255, 255, 255, 1)"
- id="handId"
- ></div>
- </div>
- <div class="temp-left" id="tempManualLeftId">
- {{ airData.minTempSet }}
- </div>
- <div class="temp-right">
- {{ airData.maxTempSet }}
- </div>
- </div>
- </div>
- <div class="air-control">
- <div class="control-box">
- <div class="volume-box">
- <div class="number">
- <span
- v-for="(item, index) in windGearArr"
- :class="airData.gear === item ? 'number-active' : ''"
- :key="'volume' + index"
- >{{ item }}</span
- >
- </div>
- <div class="text">风量调节</div>
- </div>
- <div class="volume-icon">
- <div
- class="icon-item"
- :style="{
- opacity: airData.gear <= 1 ? '0.6' : 1,
- }"
- @click="changeZongAir('gear', 'windLow')"
- >
- <img :src="parseImgUrl('ipdImages', 'wind_small.svg')" />
- </div>
- <div
- class="icon-item"
- :style="{ opacity: airData.gear >= 3 ? '0.6' : 1 }"
- @click="changeZongAir('gear', 'windUp')"
- >
- <img :src="parseImgUrl('ipdImages', 'wind_big.svg')" />
- </div>
- <div
- class="icon-item"
- @click="changeZongAir('gear', 'auto')"
- :class="airData.isAutoGear ? 'active-color' : ''"
- >
- <img :src="parseImgUrl('ipdImages', 'A.svg')" />
- </div>
- </div>
- </div>
- </div>
- <div class="air-control">
- <div class="control-box">
- <div class="volume-box">
- <div class="model">
- {{
- airData.workMode == 1
- ? "制冷"
- : airData.workMode == 2
- ? "制热"
- : "通风"
- }}
- </div>
- <div class="text">模式设定</div>
- </div>
- <div class="volume-icon">
- <div
- class="icon-item"
- :class="airData.workMode === 1 ? 'active-color' : ''"
- @click="changeZongAir('mode', 1)"
- >
- <img
- :src="
- airData.workMode === 1
- ? parseImgUrl('ipdImages', 'aircoldblue.svg')
- : parseImgUrl('ipdImages', 'aircoldblack.svg')
- "
- />
- </div>
- <div
- class="icon-item"
- :class="airData.workMode === 2 ? 'active-color' : ''"
- @click="changeZongAir('mode', 2)"
- >
- <img
- :src="
- airData.workMode === 2
- ? parseImgUrl('ipdImages', 'airsunred.svg')
- : parseImgUrl('ipdImages', 'airsunblack.svg')
- "
- />
- </div>
- <div
- class="icon-item"
- :class="airData.workMode === 3 ? 'active-color' : ''"
- @click="changeZongAir('mode', 3)"
- >
- <img
- :src="
- airData.workMode === 3
- ? parseImgUrl('ipdImages', 'aircloudgreen.svg')
- : parseImgUrl('ipdImages', 'aircloudblack.svg')
- "
- />
- </div>
- </div>
- </div>
- </div>
- </div>
- <!--子设备-->
- <div class="air-child" v-if="navType == 'child'">
- <div
- class="child-control-box"
- @click="showAirColorCtrol(childItem)"
- :key="'child' + index"
- v-for="(childItem, index) in equipList"
- >
- <div class="open-title">
- <div class="open-temp-box">
- <span>{{ childItem.tempSet }}<sup>°C</sup></span>
- <div class="text-box" v-if="childItem.workMode == 2">
- <img :src="parseImgUrl('ipdImages', 'hot-small.svg')" alt="" />
- <span>制热模式</span>
- </div>
- <div class="text-box" v-else-if="childItem.workMode == 1">
- <img :src="parseImgUrl('ipdImages', 'cold-small.svg')" alt="" />
- <span>制冷模式</span>
- </div>
- <div class="text-box" v-else>
- <img
- :src="parseImgUrl('ipdImages', 'tongfeng-small.svg')"
- alt=""
- />
- <span>通风模式</span>
- </div>
- </div>
- <Switch
- @click.stop="changeChildItemAir('switch', childItem, 'switch')"
- :model-value="childItem.isOpen"
- class="child-switch"
- inactive-color="rgba(196, 196, 196, 0.4)"
- />
- </div>
- <div class="control-bottom">
- <div class="control-title">
- {{ childItem.localName }}
- </div>
- <img
- :style="{ opacity: childItem.isOpen ? '1' : '0.3' }"
- :src="lightColorImg"
- alt=""
- />
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script lang="ts">
- import {
- defineComponent,
- onMounted,
- reactive,
- toRefs,
- computed,
- watch,
- onUnmounted,
- onBeforeMount,
- onBeforeUnmount,
- nextTick,
- } from "vue";
- import { Switch, Dialog, Toast } from "vant";
- import { swiper } from "@/utils/swiper";
- import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
- import { getRelNowTime, parseImgUrl, setQueryConfig } from "@/utils";
- import any = jasmine.any;
- export default defineComponent({
- props: {
- temperature: {
- // 空调基本信息
- type: Number,
- default: () => 0,
- },
- // hasAir: {
- // // 有无空调
- // type: Boolean,
- // default: () => false,
- // },
- airVolumes: {
- // 风量信息
- type: Array,
- default: () => [],
- },
- projectId: {
- type: String,
- default: () => "",
- },
- spaceId: {
- type: String,
- default: () => "",
- },
- userIsControl: {
- type: Boolean,
- default: () => false,
- },
- forceOverTimeFlag: {
- type: Boolean,
- default: () => false,
- },
- seviceEquipmentList: {
- // 是否走服务定制的设备
- type: Array,
- default: () => [],
- },
- },
- components: {
- Switch,
- [Dialog.Component.name]: Dialog.Component,
- },
- setup(props, contx) {
- const propsVal = props;
- let airData: any = {
- avg: "", // 算法调节温度(目标值)
- icon: 1, // 固定框文案ID 7 为关机,其它都是开机
- spaceStatus: "", // 固定框文案展示
- notice: "", // 弹框文案展示
- mode: 0, // 模式
- tempSet: 0, // 温度
- maxTempSet: 32,
- minTempSet: 16,
- isAutoGear: 0,
- workMode: 0, //1=cold(制冷);2=hot(制热);3=wind(通风)
- gear: 0, // 风量
- isOpen: false, // 空调开关 true 是开
- runStatus: 0, // 查询设备的真实状态
- };
- const feedbackTimer: any = null;
- const airTimer: any = null;
- const domAirOpeen: any = false;
- const switchTimer: any = null;
- let realTemp: any = 16;
- let windGearArr: any = [0, 1, 2, 3];
- let equipList: any = [];
- let valueDom: any = null;
- let valueHeight: any = null;
- let spaceId: any = "";
- const proxyData: any = reactive({
- seviceEquipmentList: props.seviceEquipmentList,
- lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
- navType: "all",
- valueDom: valueDom,
- spaceId: props.spaceId,
- valueHeight: valueHeight,
- equipList: equipList,
- cotrolLoading: false,
- loadingNum: 0,
- airTemp: 0, // 设备真实温度
- loadingAir: false,
- windGearArr: windGearArr, // 风量3/5个档位
- lightIcon: "arrow-down",
- showChild: false,
- realTemp: realTemp,
- temperature: props.temperature,
- userIsControl: props.userIsControl,
- forceOverTimeFlag: props.forceOverTimeFlag,
- firstLoadingAir: true,
- domAirOpeen: domAirOpeen,
- swiperIinit: false,
- parseImgUrl: parseImgUrl,
- part: 1,
- airData: airData,
- modeName: "",
- showAirVolumeBtn: false, // 是否展示风量调节按钮
- showDialog: false,
- airTimer: airTimer,
- airSetText: {
- // 空调反馈文案
- notice: "",
- remark: [],
- nowImg: "",
- toWhere: "",
- designTemperature: 0,
- },
- checkNav(type: any = "all") {
- proxyData.navType = type;
- proxyData.swiperIinit = false;
- if (proxyData.navType == "child") {
- proxyData.updateChildSatus();
- } else {
- proxyData.updateParentSatus();
- }
- // isAddTimer==0(需要定时再调) isAddTimer==1(不需要定时调)
- proxyData.getAirInfo(1);
- },
- // 展示空调子设备的控制页面
- showAirColorCtrol(item: any) {
- // 只要空调开着的时候才可以调档位和风量
- console.log(item);
- if (item.isOpen) {
- item.maxTempSet = proxyData.airData.maxTempSet;
- item.minTempSet = proxyData.airData.minTempSet;
- contx.emit("showChildAirControl", item);
- }
- },
- // 点击展示所有的登录
- async showAll() {
- proxyData.showChild = !proxyData.showChild;
- if (proxyData.lightIcon === "arrow-up") {
- proxyData.lightIcon = "arrow-down";
- } else {
- proxyData.lightIcon = "arrow-up";
- }
- // if (proxyData.showChild) {
- // await nextTick(() => {
- // proxyData.setChildSelectList();
- // });
- // } else {
- // await nextTick(() => {
- // proxyData.barSwiperInit();
- // });
- // }
- if (proxyData.showChild) {
- proxyData.updateChildSatus();
- } else {
- proxyData.updateParentSatus();
- }
- // isAddTimer==0(需要定时再调) isAddTimer==1(不需要定时调)
- proxyData.getAirInfo(1);
- // proxyData.getAirInfoToTimer(0);
- },
- // 设置温度条的位置
- setBarNowPerstion() {
- proxyData.realTemp = proxyData.airTemp;
- let barBox: any = document.querySelector("#barId");
- if (!barBox) {
- return;
- }
- let sliderBox: any = document.querySelector("#sliderId");
- let sliderWidth: any = proxyData.getEleWidth(sliderBox);
- if (
- proxyData.airTemp >= proxyData.airData.minTempSet &&
- proxyData.airTemp <= proxyData.airData.maxTempSet
- ) {
- let left: any =
- (proxyData.airTemp - proxyData.airData.minTempSet) / proxyData.part;
- left = Math.floor(left);
- if (barBox) {
- barBox.style.left = left + "px";
- }
- } else {
- if (!proxyData.airTemp) {
- barBox.style.left = 0;
- } else if (proxyData.airTemp < proxyData.airData.minTempSet) {
- barBox.style.left = 0;
- } else if (proxyData.airTemp > proxyData.airData.maxTempSet) {
- let barWidth: any = barBox.offsetWidth;
- barBox.style.left =
- sliderWidth - barWidth + proxyData.sliderPading + "px";
- }
- }
- },
- getEleWidth(ele: any) {
- // debugger;
- if (ele) {
- return ele.getBoundingClientRect().width;
- } else {
- return 1;
- }
- },
- // 滑动
- endBoxSwiper() {
- proxyData.swiperIinit = true;
- let handBox: any = document.querySelector("#handId");
- let barBox: any = document.querySelector("#barId");
- let sliderBox: any = document.querySelector("#sliderId");
- let isMove: any = false;
- let barLeft: any = 0;
- proxyData.sliderPading = 2;
- let sliderWidth: any = proxyData.getEleWidth(sliderBox);
- let barWidth: any = proxyData.getEleWidth(barBox);
- if (sliderWidth > 1) {
- sliderWidth = sliderWidth - barWidth;
- }
- let tempPart =
- (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) /
- sliderWidth;
- let part: any = tempPart;
- proxyData.part = tempPart;
- if (!handBox) {
- return;
- }
- handBox.addEventListener("touchstart", function (e: any) {
- barLeft = isNaN(parseInt(barBox.style.left))
- ? 0
- : parseInt(barBox.style.left);
- isMove = true;
- });
- handBox.addEventListener("touchend", function (e: any) {
- isMove = false;
- proxyData.changeZongAir("temp", proxyData.realTemp);
- proxyData.airTemp = proxyData.realTemp;
- });
- swiper(handBox, {
- swipeLeft: function (e: any) {
- if (isMove) {
- barLeft = Math.abs(barLeft);
- let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
- let left: any = barLeft - moveRealX;
- left = left < 0 ? 0 : left;
- barBox.style.left = left + "px";
- proxyData.realTemp = left * part + proxyData.airData.minTempSet;
- proxyData.realTemp = Math.round(proxyData.realTemp);
- }
- },
- swipeRight: function (e: any) {
- if (isMove) {
- barLeft = Math.abs(barLeft);
- let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
- let left: any = barLeft + moveRealX;
- left = left > sliderWidth ? sliderWidth : left;
- proxyData.realTemp = left * part + proxyData.airData.minTempSet;
- proxyData.realTemp = Math.round(proxyData.realTemp);
- barBox.style.left = left + proxyData.sliderPading + "px";
- }
- },
- });
- },
- // 定时获取空调状态
- getAirInfoToTimer(timerLong: any = 15000) {
- let nowTime: any = getRelNowTime();
- if (timerLong == 15000 && nowTime < "070000" && nowTime > "200000") {
- timerLong = 300000;
- }
- console.log("nowTime===", nowTime);
- if (proxyData.airTimer) {
- clearTimeout(proxyData.airTimer);
- proxyData.airTimer = null;
- }
- proxyData.airTimer = setTimeout(function () {
- if (!proxyData.loadingNum) {
- proxyData.getAirInfo();
- }
- }, timerLong);
- },
- // 获取操作时长
- getTimerLen() {
- // debugger;
- let equipmentCategory: any = "";
- if (proxyData.equipList && proxyData.equipList.length) {
- equipmentCategory = proxyData.equipList[0].equipmentCategory;
- }
- let timerLen: any = 15;
- if (equipmentCategory && equipmentCategory == "ACATVI") {
- // timerLen = 120;
- timerLen = 15;
- }
- return timerLen;
- },
- switchTimer: switchTimer,
- // 计算loading时间
- setLoadingNumber() {
- let timerLen: any = proxyData.getTimerLen();
- proxyData.switchTimer = setInterval(() => {
- proxyData.loadingNum++;
- if (proxyData.loadingNum >= timerLen) {
- clearInterval(proxyData.switchTimer);
- proxyData.switchTimer = null;
- proxyData.loadingAir = false;
- proxyData.loadingNum = 0;
- proxyData.getAirInfoToTimer(0);
- }
- console.log("proxyData.loadingNum==", proxyData.loadingNum, timerLen);
- }, 1000);
- },
- // 格式化空调数据
- formatAirData(btnType: any, text: any) {
- let obj: any = {};
- if (btnType == "temp") {
- obj.codeKey = "tempSetCode";
- obj.value = text;
- }
- if (btnType == "gear" && text == "windLow") {
- //降挡
- if (proxyData.airData.gear > 1) {
- proxyData.airData.gear--;
- proxyData.airData.isAutoGear = 0;
- obj.value = proxyData.airData.gear;
- obj.codeKey = "gearCode";
- } else {
- return;
- }
- }
- if (btnType == "gear" && text == "windUp") {
- //升档
- if (proxyData.airData.gear < 3) {
- proxyData.airData.gear++;
- proxyData.airData.isAutoGear = 0;
- obj.value = proxyData.airData.gear;
- obj.codeKey = "gearCode";
- } else {
- return;
- }
- }
- if (btnType == "gear" && text == "auto") {
- proxyData.airData.isAutoGear = proxyData.airData.isAutoGear ? 0 : 1;
- obj.value = proxyData.airData.isAutoGear ? 4 : proxyData.airData.gear;
- obj.codeKey = "gearCode";
- }
- if (btnType == "mode") {
- proxyData.airData.workMode = text;
- obj.codeKey = "modeSetCode";
- obj.value = text;
- }
- return obj;
- },
- /**
- * 加载loading
- */
- loadingStart() {
- proxyData.cotrolLoading = true;
- },
- /**
- * 结束
- */
- loadinngEnd() {
- proxyData.cotrolLoading = false;
- },
- // 计算loading时间
- setChildLoadingNumber(childItem: any) {
- let timerLen: any = proxyData.getTimerLen();
- childItem.loadingNum = 1;
- childItem.timer = setInterval(() => {
- childItem.loadingNum++;
- if (childItem.loadingNum >= timerLen) {
- clearInterval(childItem.timer);
- childItem.timer = null;
- childItem.loadingNum = 0;
- proxyData.getAirInfoToTimer(0);
- }
- console.log("===");
- console.log(childItem.loadingNum);
- }, 1000);
- },
- // 连续点击2秒内未点击才发指令
- childDisabled(childItem: any, data: any) {
- clearTimeout(childItem.timeOuter);
- childItem.timeOuter = setInterval(() => {
- childItem.num--;
- if (childItem.num == 0) {
- proxyData.setSpaceCondtioners(data);
- clearTimeout(childItem.timeOuter);
- }
- }, 1000);
- },
- // 子设备开关控制
- changeChildItemAir(btnType: any, childItem: any, symbol: any) {
- const domAirOpen = !childItem.isOpen;
- let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime([
- childItem,
- ]);
- if (
- proxyData.forceOverTimeFlag &&
- domAirOpen &&
- isExeSpaceTime &&
- btnType == "switch"
- ) {
- //需要强制加班
- contx.emit("triggerWork", 2, childItem);
- return;
- }
- // 空调没有开的时候不让调温度和风量
- if (!childItem.isOpen && btnType !== "switch") {
- return;
- }
- let arr: any = [];
- if (btnType === "switch") {
- if (childItem.loadingNum >= 1 && childItem.loadingNum <= 15) {
- return;
- }
- childItem.isOpen = !childItem.isOpen;
- let obj: any = {
- id: childItem.id, //类型:String 必有字段 备注:设备id
- code: childItem.switchCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: childItem.isOpen ? "1" : "0", //类型:String 必有字段 备注:值 0
- };
- arr.push(obj);
- } else if (btnType === "temp") {
- childItem.num = 2;
- if (symbol === "up") {
- if (childItem.tempSet >= proxyData.airData.maxTempSet) {
- return;
- }
- childItem.tempSet = childItem.tempSet + 0.5;
- } else if (symbol === "down") {
- if (childItem.tempSet <= proxyData.airData.minTempSet) {
- return;
- }
- childItem.tempSet = childItem.tempSet - 0.5;
- }
- let obj: any = {
- id: childItem.id, //类型:String 必有字段 备注:设备id
- code: childItem.tempSetCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: childItem.tempSet, //类型:String 必有字段 备注:值 0
- };
- arr.push(obj);
- proxyData.childDisabled(childItem, arr);
- } else if (btnType === "gear") {
- if (symbol === "up") {
- if (childItem.isAutoGear) {
- return;
- }
- if (childItem.gear >= 3) {
- childItem.isAutoGear = 1;
- } else {
- childItem.gear++;
- childItem.isAutoGear = 0;
- }
- } else if (symbol === "down") {
- if (!childItem.isAutoGear && childItem.gear <= 1) {
- return;
- }
- if (childItem.isAutoGear) {
- childItem.isAutoGear = 0;
- childItem.gear = 3;
- } else {
- childItem.gear--;
- }
- }
- let obj: any = {
- id: childItem.id, //类型:String 必有字段 备注:设备id
- code: childItem.gearCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: childItem.isAutoGear ? 4 : childItem.gear, //类型:String 必有字段 备注:值 0
- };
- arr.push(obj);
- } else if (btnType === "model") {
- if (symbol === "up") {
- if (childItem.workMode >= 3) {
- return;
- }
- childItem.workMode++;
- } else if (symbol === "down") {
- if (childItem.workMode <= 1) {
- return;
- }
- childItem.workMode--;
- }
- let obj: any = {
- id: childItem.id, //类型:String 必有字段 备注:设备id
- code: childItem.modeSetCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: childItem.workMode, //类型:String 必有字段 备注:值 0
- };
- arr.push(obj);
- }
- // 空调调节后先不刷新,等2分钟后更新状态
- proxyData.updateAirStatus();
- // 修改单个设备的状态
- if (btnType !== "temp") {
- proxyData.setSpaceCondtioners(arr);
- }
- },
- // 改变设备状态
- setSpaceCondtioners(data: any) {
- setSpaceCondtioners(data)
- .then((res) => {
- // proxyData.setLoadingNumber();
- proxyData.loadinngEnd();
- })
- .catch(() => {
- // proxyData.setLoadingNumber();
- proxyData.loadinngEnd();
- Toast("连接异常,请检查网络!");
- });
- },
- // 改变空调状态
- changeZongAir(btnType: any, text: any) {
- if (!proxyData.airData.isOpen) return;
- let equpObj: any = proxyData.formatAirData(btnType, text);
- if (!(equpObj && equpObj.codeKey)) return;
- let data: any = [];
- proxyData.equipList.map((item: any) => {
- let obj: any = {
- id: item.id, //类型:String 必有字段 备注:设备id
- code: item[equpObj.codeKey], //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: equpObj.value, //类型:String 必有字段 备注:值 0
- };
- data.push(obj);
- });
- console.log("设备数据处理---");
- console.log(data);
- if (!proxyData.cotrolLoading) {
- proxyData.loadingStart();
- // 调整设备状态
- proxyData.updateAirStatus();
- proxyData.setSpaceCondtioners(data);
- }
- },
- // 检查设备是否执行空间服务时间
- checkDeviceIsExeSpaceTime(deviceAll: any = []) {
- let seviceEquipmentList: any = proxyData.seviceEquipmentList;
- let flag: any = false;
- // debugger
- 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;
- },
- // 加班更新按钮的状态
- updateSwitchFromWork(deviceItem: any) {
- if (deviceItem) {
- proxyData.equipList.map((item: any) => {
- if (item.id === deviceItem.id) {
- item.isOpen = true;
- proxyData.airData.isOpen = true;
- }
- });
- } else {
- proxyData.airData.isOpen = true;
- }
- nextTick(() => {
- proxyData.barSwiperInit();
- });
- },
- // 刷新空调状态的接口
- updateAirStatus() {
- clearTimeout(proxyData.airTimer);
- proxyData.airTimer = null;
- proxyData.loadingNum = 1;
- if (!proxyData.switchTimer) {
- proxyData.setLoadingNumber();
- }
- },
- // 点击总开关,前端更新子设备的状态
- updateChildSatus() {
- proxyData.equipList.map((item: any) => {
- item.isOpen = proxyData.airData.isOpen;
- });
- },
- // 更新总开关的开关状态
- updateParentSatus() {
- let flag: any = false;
- proxyData.equipList.map((item: any) => {
- if (item.isOpen) {
- flag = true;
- }
- });
- proxyData.airData.isOpen = flag;
- },
- // 总控制改变空调状态
- airChange() {
- // 先不更新状态等确认框弹出后再更新状
- // 操作空调
- const domAirOpen = !proxyData.airData.isOpen;
- let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime(
- proxyData.equipList
- );
- if (proxyData.forceOverTimeFlag && domAirOpen && isExeSpaceTime) {
- //需要强制加班
- contx.emit("triggerWork", 2);
- return;
- }
- proxyData.airData.isOpen = !proxyData.airData.isOpen;
- proxyData.loadingAir = true;
- // 操作空调后,先关闭定时刷新接口,等固定时间再更新空调状态
- proxyData.updateAirStatus();
- if (proxyData.airData.isOpen) {
- nextTick(() => {
- proxyData.barSwiperInit();
- });
- }
- let data: any = [];
- proxyData.equipList.map((item: any) => {
- let obj: any = {
- id: item.id, //类型:String 必有字段 备注:设备id
- code: item.switchCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
- value: proxyData.airData.isOpen ? "1" : "0", //类型:String 必有字段 备注:值 0
- };
- data.push(obj);
- });
- // 设备状态处理
- proxyData.setSpaceCondtioners(data);
- },
- // 设置子设备的状态
- formateSetChildStatus() {
- proxyData.equipList.map((item: any) => {
- item.isOpen = item.runStatus === 1 ? true : false;
- });
- },
- // 初始化滚动
- async barSwiperInit() {
- if (proxyData.airData.isOpen && !proxyData.showChild) {
- proxyData.endBoxSwiper();
- // debugger
- proxyData.setBarNowPerstion();
- }
- },
- // 设置子设备的可调范围
- setChildSelectList() {
- proxyData.equipList.map((item: any) => {
- let tempArr: any = [];
- for (
- let i = proxyData.airData.minTempSet;
- i <= proxyData.airData.maxTempSet;
- i = i + 0.5
- ) {
- tempArr.push(i);
- }
- item.tempArr = tempArr;
- let index: any = item.tempArr.findIndex((ele: any) => {
- return ele == item.tempSet;
- });
- item.sel = index == -1 ? 0 : index;
- let modelArr: any = ["制冷", "制热", "通风"];
- item.modelArr = modelArr;
- if (item.workMode > 3) {
- item.workMode = 1;
- }
- let mIndex: any = item.workMode ? item.workMode - 1 : 2;
- item.mIndex = mIndex;
- let gearArr: any = [0, 1, 2, 3, "AUTO"];
- item.gearArr = gearArr;
- let gIndex: any = item.gearArr.findIndex((ele: any) => {
- if (item.isAutoGear == 1) {
- return ele == "AUTO";
- } else {
- return ele == item.gear;
- }
- });
- item.gIndex = gIndex == -1 ? 0 : gIndex;
- });
- proxyData.setValueHeight();
- },
- setValueHeight() {
- if (!proxyData.valueHeight) {
- proxyData.valueDom = proxyData.valueDom
- ? proxyData.valueDom
- : document.querySelectorAll(".value")[0];
- proxyData.valueHeight = proxyData.valueDom
- ? proxyData.valueDom.offsetHeight
- : 0;
- }
- console.log("proxyData.valueHeight==", proxyData.valueHeight);
- },
- // 改变子设备选中的位置
- updateChildPerstion() {
- proxyData.equipList.map((item: any) => {
- let index: any = item.tempArr.findIndex((ele: any) => {
- return ele == item.tempSet;
- });
- item.sel = index == -1 ? 0 : index;
- let mIndex: any = item.workMode ? item.workMode - 1 : 2;
- item.mIndex = mIndex;
- let gIndex: any = item.gearArr.findIndex((ele: any) => {
- if (item.isAutoGear == 1) {
- return ele == "AUTO";
- } else {
- return ele == item.gear;
- }
- });
- item.gIndex = gIndex == -1 ? 0 : gIndex;
- });
- },
- // 空调信息airTemp的修改
- getAirInfo(isAddTimer: any = 0) {
- const paramObj = {
- spaceId: proxyData.spaceId,
- // spaceId: props.spaceId,//'Sp110108025564f438d7fef64eea8202a6462f1bbcce' 空间id
- };
- //wx.showLoading();
- let str: any = setQueryConfig(paramObj);
- querySpaceConditioners(str)
- .then((res) => {
- let data: any = res.data || {};
- proxyData.firstLoadingAir = false;
- proxyData.loadingAir = false;
- proxyData.airTemp = data.tempSet;
- proxyData.airData.maxTempSet = data.maxTempSet;
- proxyData.airData.minTempSet = data.minTempSet;
- proxyData.airData.isOpen = data.runStatus ? true : false;
- proxyData.airData.runStatus = data.runStatus;
- proxyData.airData.isAutoGear = data.isAutoGear;
- proxyData.airData.gear = data.gear || 0;
- proxyData.airData.workMode = data.workMode;
- proxyData.equipList = data.equipList;
- // proxyData.equipList.push(data.equipList[0]);
- // 设置子设备的状态
- proxyData.setChildSelectList();
- proxyData.formateSetChildStatus();
- nextTick(() => {
- proxyData.barSwiperInit();
- });
- if (isAddTimer == 0) {
- proxyData.getAirInfoToTimer();
- }
- })
- .catch(() => {});
- },
- });
- watch(
- [() => props, () => props.spaceId],
- (newProps: any, oldProps: any) => {
- if (newProps[0]) {
- proxyData.temperature = newProps[0].temperature;
- proxyData.userIsControl = newProps[0].userIsControl;
- proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
- proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList;
- }
- if (newProps[1] && newProps[1] != oldProps[1]) {
- proxyData.spaceId = newProps[1];
- proxyData.swiperIinit = false;
- proxyData.getAirInfoToTimer(0);
- }
- },
- {
- deep: true,
- immediate: true,
- }
- );
- onBeforeUnmount(() => {
- if (proxyData.airTimer) {
- clearTimeout(proxyData.airTimer);
- proxyData.airTimer = null;
- }
- });
- onMounted(() => {
- proxyData.spaceId = props.spaceId;
- proxyData.getAirInfoToTimer(0);
- // 获取空调信息
- });
- return {
- ...toRefs(proxyData),
- };
- },
- });
- </script>
- <style lang="scss" scoped>
- .air {
- position: relative;
- 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;
- .loading-box {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 100%;
- height: 100%;
- background: rgba(#000000, 0.3);
- box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07),
- 0px 4px 10px rgba(0, 0, 0, 0.05);
- text-align: center;
- z-index: 999;
- // line-height: 50px;
- }
- .air-top {
- padding: 0 20px;
- padding-bottom: 10px;
- padding-top: 18px;
- display: flex;
- justify-content: space-between;
- .air-desc {
- position: relative;
- font-family: "PingFang SC";
- font-size: 16px;
- font-weight: 600;
- line-height: 22px;
- letter-spacing: 0em;
- padding-top: 8px;
- text-align: left;
- color: rgba(77, 82, 98, 1);
- .air-title {
- font-family: "PingFang SC";
- font-size: 16px;
- font-weight: 600;
- line-height: 22px;
- padding-bottom: 4px;
- letter-spacing: 0;
- text-align: left;
- color: rgba(77, 82, 98, 1);
- }
- .air-temperature {
- position: relative;
- display: inline-block;
- font-family: "Persagy";
- font-size: 32px;
- font-weight: 400;
- line-height: 39px;
- letter-spacing: 0px;
- text-align: right;
- color: rgba(27, 33, 41, 1);
- sup {
- position: absolute;
- font-family: "Persagy";
- top: -2px;
- right: -12px;
- font-size: 12px;
- font-weight: 400;
- line-height: 15px;
- letter-spacing: 0em;
- text-align: left;
- color: rgba(196, 196, 196, 1);
- }
- }
- .show-all {
- position: absolute;
- width: 110px;
- bottom: -8px;
- font-family: PingFang SC;
- font-size: 14px;
- line-height: 16px;
- color: #c4c4c4;
- margin: 0px 5px;
- span {
- font-size: 12px;
- }
- .light-icon {
- font-size: 12px;
- padding-right: 10px;
- }
- }
- }
- .air-right {
- position: relative;
- width: 130px;
- text-align: center;
- img {
- width: 130px;
- height: 64px;
- }
- }
- }
- .top-switch {
- display: flex;
- justify-content: space-between;
- padding: 8px 20px;
- margin-bottom: 8px;
- .top-nav {
- height: 28px;
- line-height: 28px;
- border-radius: 21px;
- background: #f1f4f6;
- span {
- box-sizing: border-box;
- display: inline-block;
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- padding: 5px 8px;
- height: 28px;
- line-height: 14px;
- color: #424c59;
- }
- .nav-active {
- background: #fff;
- border: 1px solid #e1e5eb;
- border-radius: 21px;
- }
- }
- // .switch-btn {
- // margin-top: 0;
- // }
- }
- .line {
- width: 100%;
- height: 0px;
- border-top: 1px solid rgba(232, 236, 240, 1);
- }
- .active-color {
- background: $elActiveColor !important;
- span {
- color: #fff !important;
- }
- }
- .air-child {
- width: 100%;
- padding-left: 12px;
- padding-right: 12px;
- padding-top: 16px;
- padding-bottom: 4px;
- .child-control-box {
- display: inline-block;
- width: 49%;
- margin-right: 2%;
- margin-bottom: 12px;
- padding: 14px 16px;
- justify-content: space-between;
- border-radius: 16px;
- background: rgba(247, 249, 250, 1);
- &:nth-child(2n) {
- margin-right: 0;
- }
- .open-title {
- width: 100%;
- font-size: 14px;
- display: flex;
- justify-content: space-between;
- margin-bottom: 26px;
- .open-temp-box {
- position: relative;
- display: inline-block;
- // width: calc(100% - 50px);
- overflow: hidden;
- span {
- text-overflow: ellipsis;
- white-space: nowrap;
- font-family: "Persagy";
- font-size: 22px;
- font-weight: 400;
- line-height: 22px;
- letter-spacing: 0;
- }
- sup {
- position: absolute;
- top: -3px;
- font-family: Mulish;
- font-size: 12px;
- font-weight: 400;
- text-align: left;
- color: rgba(196, 196, 196, 1);
- }
- }
- .text-box {
- margin-left: -2px;
- padding-top: 4px;
- img {
- display: inline-block;
- vertical-align: middle;
- width: 16px;
- height: 16px;
- margin-right: 2px;
- }
- span {
- display: inline-block;
- vertical-align: middle;
- font-family: "PingFang SC";
- font-size: 12px;
- font-weight: 400;
- color: rgba(196, 201, 207, 1);
- }
- }
- }
- .control-bottom {
- display: flex;
- justify-content: space-between;
- .control-title {
- font-family: "PingFang SC";
- font-size: 16px;
- font-weight: 600;
- line-height: 22px;
- padding-right: 8px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: rgba(77, 82, 98, 1);
- }
- img {
- width: 20px;
- height: 20px;
- cursor: pointer;
- }
- }
- }
- }
- .main-temp {
- padding-bottom: 16px;
- }
- .air-control {
- padding: 20px;
- padding-top: 28px;
- padding-bottom: 0;
- .control-box {
- display: flex;
- justify-content: space-between;
- }
- .volume-box {
- .number {
- span {
- font-family: "Persagy";
- font-size: 12px;
- font-weight: 400;
- padding-right: 8px;
- line-height: 24px;
- letter-spacing: 0px;
- color: rgba(196, 201, 207, 1);
- }
- .number-active {
- font-family: "Persagy";
- font-size: 18px;
- font-weight: 400;
- line-height: 24px;
- letter-spacing: 0px;
- color: rgba(27, 33, 41, 1);
- }
- }
- .model {
- font-family: "PingFang SC";
- font-size: 16px;
- font-weight: 400;
- line-height: 24px;
- letter-spacing: 0px;
- }
- .text {
- font-family: "PingFang SC";
- display: block;
- font-size: 13px;
- font-weight: 400;
- padding-top: 3px;
- margin-left: -3px;
- transform: scale(0.9);
- text-align: left;
- // line-height: 17px;
- letter-spacing: 0px;
- color: rgba(196, 201, 207, 1);
- }
- }
- .volume-icon {
- .icon-item {
- position: relative;
- display: inline-block;
- width: 42px;
- height: 42px;
- background: rgba(196, 196, 196, 0.2);
- border-radius: 50%;
- img {
- width: 20px;
- height: 20px;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
- &:nth-child(2) {
- margin-left: 10px;
- margin-right: 10px;
- }
- span {
- font-size: 12px;
- color: #000000;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%) scale(0.8);
- }
- }
- }
- .temp-slider {
- position: relative;
- display: flex;
- height: 22px;
- border-radius: 16px;
- background: linear-gradient(
- 270deg,
- #ffbab6 0%,
- #ffe7d1 29.05%,
- #f1efff 62%,
- #c8d6ff 100%
- );
- .slider-bar {
- position: absolute;
- left: 0;
- bottom: -5px;
- width: 32px;
- z-index: 333;
- text-align: center;
- color: rgba(98, 108, 120, 1);
- .bar-temp {
- display: inline-block;
- font-family: "Persagy";
- font-size: 12px;
- font-weight: 400;
- line-height: 14px;
- letter-spacing: 0px;
- padding-bottom: 4px;
- text-align: left;
- color: rgba(98, 108, 120, 1);
- }
- .bar-circle {
- width: 30px;
- height: 30px;
- background: rgba(246, 249, 254, 1);
- border-radius: 50%;
- box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
- }
- }
- .temp-left,
- .temp-right {
- position: absolute;
- display: inline-block;
- font-family: "Persagy";
- top: 50%;
- transform: translateY(-50%);
- font-size: 12px;
- padding-top: 1px;
- font-weight: 400;
- letter-spacing: 0px;
- color: rgba(98, 108, 120, 1);
- }
- .temp-left {
- left: 0px;
- padding-left: 8px;
- }
- .temp-right {
- right: 0px;
- padding-right: 8px;
- text-align: left;
- }
- }
- .control-text {
- font-style: normal;
- font-weight: 600;
- font-size: 11px;
- line-height: 15px;
- color: #c4c4c4;
- padding: 10px 0 0 10px;
- }
- }
- .air-control-padding {
- padding-top: 23px;
- margin-top: 8px;
- }
- }
- </style>
-
|