manualIndex.vue 42 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421
  1. <template>
  2. <div class="air">
  3. <div class="air-top">
  4. <div class="air-desc">
  5. <p class="air-title">空调</p>
  6. <p class="air-temperature">
  7. {{ airTemp ? airTemp : "--" }}
  8. <sup>℃</sup>
  9. </p>
  10. </div>
  11. <div class="air-right">
  12. <img
  13. v-if="airData.isOpen"
  14. :src="parseImgUrl('page-officehome', 'openair.svg')"
  15. alt=""
  16. />
  17. <img
  18. v-else
  19. :src="parseImgUrl('page-officehome', 'air_close.svg')"
  20. alt=""
  21. />
  22. <!-- <van-loading style="padding-top: 20px" v-else /> -->
  23. </div>
  24. </div>
  25. <!--温度调节-->
  26. <div class="top-switch">
  27. <div class="top-nav" v-if="equipList && equipList.length > 1">
  28. <span
  29. :class="navType == 'all' ? 'nav-active' : ''"
  30. @click="checkNav('all')"
  31. >
  32. 总控制
  33. </span>
  34. <span
  35. :class="navType == 'child' ? 'nav-active' : ''"
  36. @click="checkNav('child')"
  37. >
  38. 子设备
  39. </span>
  40. </div>
  41. <div v-else></div>
  42. <Switch
  43. class="switch-btn"
  44. v-if="navType == 'all'"
  45. :size="23"
  46. inactive-color="rgba(196, 196, 196, 0.4)"
  47. @click="airChange"
  48. :model-value="airData.isOpen"
  49. />
  50. </div>
  51. <div class="line"></div>
  52. <!--温度调节的box-->
  53. <div class="main-temp" v-if="navType == 'all' && airData.isOpen">
  54. <div class="air-control air-control-padding">
  55. <div class="temp-slider" id="sliderId">
  56. <div class="slider-bar" id="barId">
  57. <div class="bar-temp">{{ realTemp }}℃</div>
  58. <div
  59. class="bar-circle"
  60. style="border: 2px solid rgba(255, 255, 255, 1)"
  61. id="handId"
  62. ></div>
  63. </div>
  64. <div class="temp-left" id="tempManualLeftId">
  65. {{ airData.minTempSet }}
  66. </div>
  67. <div class="temp-right">
  68. {{ airData.maxTempSet }}
  69. </div>
  70. </div>
  71. </div>
  72. <div class="air-control">
  73. <div class="control-box">
  74. <div class="volume-box">
  75. <div class="number">
  76. <span
  77. v-for="(item, index) in windGearArr"
  78. :class="airData.gear === item ? 'number-active' : ''"
  79. :key="'volume' + index"
  80. >{{ item }}</span
  81. >
  82. </div>
  83. <div class="text">风量调节</div>
  84. </div>
  85. <div class="volume-icon">
  86. <div
  87. class="icon-item"
  88. :style="{
  89. opacity: airData.gear <= 1 ? '0.6' : 1,
  90. }"
  91. @click="changeZongAir('gear', 'windLow')"
  92. >
  93. <img :src="parseImgUrl('ipdImages', 'wind_small.svg')" />
  94. </div>
  95. <div
  96. class="icon-item"
  97. :style="{ opacity: airData.gear >= 3 ? '0.6' : 1 }"
  98. @click="changeZongAir('gear', 'windUp')"
  99. >
  100. <img :src="parseImgUrl('ipdImages', 'wind_big.svg')" />
  101. </div>
  102. <div
  103. class="icon-item"
  104. @click="changeZongAir('gear', 'auto')"
  105. :class="airData.isAutoGear ? 'active-color' : ''"
  106. >
  107. <img :src="parseImgUrl('ipdImages', 'A.svg')" />
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. <div class="air-control">
  113. <div class="control-box">
  114. <div class="volume-box">
  115. <div class="model">
  116. {{
  117. airData.workMode == 1
  118. ? "制冷"
  119. : airData.workMode == 2
  120. ? "制热"
  121. : "通风"
  122. }}
  123. </div>
  124. <div class="text">模式设定</div>
  125. </div>
  126. <div class="volume-icon">
  127. <div
  128. class="icon-item"
  129. :class="airData.workMode === 1 ? 'active-color' : ''"
  130. @click="changeZongAir('mode', 1)"
  131. >
  132. <img
  133. :src="
  134. airData.workMode === 1
  135. ? parseImgUrl('ipdImages', 'aircoldblue.svg')
  136. : parseImgUrl('ipdImages', 'aircoldblack.svg')
  137. "
  138. />
  139. </div>
  140. <div
  141. class="icon-item"
  142. :class="airData.workMode === 2 ? 'active-color' : ''"
  143. @click="changeZongAir('mode', 2)"
  144. >
  145. <img
  146. :src="
  147. airData.workMode === 2
  148. ? parseImgUrl('ipdImages', 'airsunred.svg')
  149. : parseImgUrl('ipdImages', 'airsunblack.svg')
  150. "
  151. />
  152. </div>
  153. <div
  154. class="icon-item"
  155. :class="airData.workMode === 3 ? 'active-color' : ''"
  156. @click="changeZongAir('mode', 3)"
  157. >
  158. <img
  159. :src="
  160. airData.workMode === 3
  161. ? parseImgUrl('ipdImages', 'aircloudgreen.svg')
  162. : parseImgUrl('ipdImages', 'aircloudblack.svg')
  163. "
  164. />
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. <!--子设备-->
  171. <div class="air-child" v-if="navType == 'child'">
  172. <div
  173. class="child-control-box"
  174. @click="showAirColorCtrol(childItem)"
  175. :key="'child' + index"
  176. v-for="(childItem, index) in equipList"
  177. >
  178. <div class="open-title">
  179. <div class="open-temp-box">
  180. <span>{{ childItem.tempSet }}<sup>°C</sup></span>
  181. <div class="text-box" v-if="childItem.workMode == 2">
  182. <img :src="parseImgUrl('ipdImages', 'hot-small.svg')" alt="" />
  183. <span>制热模式</span>
  184. </div>
  185. <div class="text-box" v-else-if="childItem.workMode == 1">
  186. <img :src="parseImgUrl('ipdImages', 'cold-small.svg')" alt="" />
  187. <span>制冷模式</span>
  188. </div>
  189. <div class="text-box" v-else>
  190. <img
  191. :src="parseImgUrl('ipdImages', 'tongfeng-small.svg')"
  192. alt=""
  193. />
  194. <span>通风模式</span>
  195. </div>
  196. </div>
  197. <Switch
  198. @click.stop="changeChildItemAir('switch', childItem, 'switch')"
  199. :model-value="childItem.isOpen"
  200. class="child-switch"
  201. inactive-color="rgba(196, 196, 196, 0.4)"
  202. />
  203. </div>
  204. <div class="control-bottom">
  205. <div class="control-title">
  206. {{ childItem.localName }}
  207. </div>
  208. <img
  209. :style="{ opacity: childItem.isOpen ? '1' : '0.3' }"
  210. :src="lightColorImg"
  211. alt=""
  212. />
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </template>
  218. <script lang="ts">
  219. import {
  220. defineComponent,
  221. onMounted,
  222. reactive,
  223. toRefs,
  224. computed,
  225. watch,
  226. onUnmounted,
  227. onBeforeMount,
  228. onBeforeUnmount,
  229. nextTick,
  230. } from "vue";
  231. import { Switch, Dialog, Toast } from "vant";
  232. import { swiper } from "@/utils/swiper";
  233. import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
  234. import { getRelNowTime, parseImgUrl, setQueryConfig } from "@/utils";
  235. import any = jasmine.any;
  236. export default defineComponent({
  237. props: {
  238. temperature: {
  239. // 空调基本信息
  240. type: Number,
  241. default: () => 0,
  242. },
  243. // hasAir: {
  244. // // 有无空调
  245. // type: Boolean,
  246. // default: () => false,
  247. // },
  248. airVolumes: {
  249. // 风量信息
  250. type: Array,
  251. default: () => [],
  252. },
  253. projectId: {
  254. type: String,
  255. default: () => "",
  256. },
  257. spaceId: {
  258. type: String,
  259. default: () => "",
  260. },
  261. userIsControl: {
  262. type: Boolean,
  263. default: () => false,
  264. },
  265. forceOverTimeFlag: {
  266. type: Boolean,
  267. default: () => false,
  268. },
  269. seviceEquipmentList: {
  270. // 是否走服务定制的设备
  271. type: Array,
  272. default: () => [],
  273. },
  274. },
  275. components: {
  276. Switch,
  277. [Dialog.Component.name]: Dialog.Component,
  278. },
  279. setup(props, contx) {
  280. const propsVal = props;
  281. let airData: any = {
  282. avg: "", // 算法调节温度(目标值)
  283. icon: 1, // 固定框文案ID 7 为关机,其它都是开机
  284. spaceStatus: "", // 固定框文案展示
  285. notice: "", // 弹框文案展示
  286. mode: 0, // 模式
  287. tempSet: 0, // 温度
  288. maxTempSet: 32,
  289. minTempSet: 16,
  290. isAutoGear: 0,
  291. workMode: 0, //1=cold(制冷);2=hot(制热);3=wind(通风)
  292. gear: 0, // 风量
  293. isOpen: false, // 空调开关 true 是开
  294. runStatus: 0, // 查询设备的真实状态
  295. };
  296. const feedbackTimer: any = null;
  297. const airTimer: any = null;
  298. const domAirOpeen: any = false;
  299. const switchTimer: any = null;
  300. let realTemp: any = 16;
  301. let windGearArr: any = [0, 1, 2, 3];
  302. let equipList: any = [];
  303. let valueDom: any = null;
  304. let valueHeight: any = null;
  305. let spaceId: any = "";
  306. const proxyData: any = reactive({
  307. seviceEquipmentList: props.seviceEquipmentList,
  308. lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
  309. navType: "all",
  310. valueDom: valueDom,
  311. spaceId: props.spaceId,
  312. valueHeight: valueHeight,
  313. equipList: equipList,
  314. cotrolLoading: false,
  315. loadingNum: 0,
  316. airTemp: 0, // 设备真实温度
  317. loadingAir: false,
  318. windGearArr: windGearArr, // 风量3/5个档位
  319. lightIcon: "arrow-down",
  320. showChild: false,
  321. realTemp: realTemp,
  322. temperature: props.temperature,
  323. userIsControl: props.userIsControl,
  324. forceOverTimeFlag: props.forceOverTimeFlag,
  325. firstLoadingAir: true,
  326. domAirOpeen: domAirOpeen,
  327. swiperIinit: false,
  328. parseImgUrl: parseImgUrl,
  329. part: 1,
  330. airData: airData,
  331. modeName: "",
  332. showAirVolumeBtn: false, // 是否展示风量调节按钮
  333. showDialog: false,
  334. airTimer: airTimer,
  335. airSetText: {
  336. // 空调反馈文案
  337. notice: "",
  338. remark: [],
  339. nowImg: "",
  340. toWhere: "",
  341. designTemperature: 0,
  342. },
  343. checkNav(type: any = "all") {
  344. proxyData.navType = type;
  345. proxyData.swiperIinit = false;
  346. if (proxyData.navType == "child") {
  347. proxyData.updateChildSatus();
  348. } else {
  349. proxyData.updateParentSatus();
  350. }
  351. // isAddTimer==0(需要定时再调) isAddTimer==1(不需要定时调)
  352. proxyData.getAirInfo(1);
  353. },
  354. // 展示空调子设备的控制页面
  355. showAirColorCtrol(item: any) {
  356. // 只要空调开着的时候才可以调档位和风量
  357. console.log(item);
  358. if (item.isOpen) {
  359. item.maxTempSet = proxyData.airData.maxTempSet;
  360. item.minTempSet = proxyData.airData.minTempSet;
  361. contx.emit("showChildAirControl", item);
  362. }
  363. },
  364. // 点击展示所有的登录
  365. async showAll() {
  366. proxyData.showChild = !proxyData.showChild;
  367. if (proxyData.lightIcon === "arrow-up") {
  368. proxyData.lightIcon = "arrow-down";
  369. } else {
  370. proxyData.lightIcon = "arrow-up";
  371. }
  372. // if (proxyData.showChild) {
  373. // await nextTick(() => {
  374. // proxyData.setChildSelectList();
  375. // });
  376. // } else {
  377. // await nextTick(() => {
  378. // proxyData.barSwiperInit();
  379. // });
  380. // }
  381. if (proxyData.showChild) {
  382. proxyData.updateChildSatus();
  383. } else {
  384. proxyData.updateParentSatus();
  385. }
  386. // isAddTimer==0(需要定时再调) isAddTimer==1(不需要定时调)
  387. proxyData.getAirInfo(1);
  388. // proxyData.getAirInfoToTimer(0);
  389. },
  390. // 设置温度条的位置
  391. setBarNowPerstion() {
  392. proxyData.realTemp = proxyData.airTemp;
  393. let barBox: any = document.querySelector("#barId");
  394. if (!barBox) {
  395. return;
  396. }
  397. let sliderBox: any = document.querySelector("#sliderId");
  398. let sliderWidth: any = proxyData.getEleWidth(sliderBox);
  399. if (
  400. proxyData.airTemp >= proxyData.airData.minTempSet &&
  401. proxyData.airTemp <= proxyData.airData.maxTempSet
  402. ) {
  403. let left: any =
  404. (proxyData.airTemp - proxyData.airData.minTempSet) / proxyData.part;
  405. left = Math.floor(left);
  406. if (barBox) {
  407. barBox.style.left = left + "px";
  408. }
  409. } else {
  410. if (!proxyData.airTemp) {
  411. barBox.style.left = 0;
  412. } else if (proxyData.airTemp < proxyData.airData.minTempSet) {
  413. barBox.style.left = 0;
  414. } else if (proxyData.airTemp > proxyData.airData.maxTempSet) {
  415. let barWidth: any = barBox.offsetWidth;
  416. barBox.style.left =
  417. sliderWidth - barWidth + proxyData.sliderPading + "px";
  418. }
  419. }
  420. },
  421. getEleWidth(ele: any) {
  422. // debugger;
  423. if (ele) {
  424. return ele.getBoundingClientRect().width;
  425. } else {
  426. return 1;
  427. }
  428. },
  429. // 滑动
  430. endBoxSwiper() {
  431. proxyData.swiperIinit = true;
  432. let handBox: any = document.querySelector("#handId");
  433. let barBox: any = document.querySelector("#barId");
  434. let sliderBox: any = document.querySelector("#sliderId");
  435. let isMove: any = false;
  436. let barLeft: any = 0;
  437. proxyData.sliderPading = 2;
  438. let sliderWidth: any = proxyData.getEleWidth(sliderBox);
  439. let barWidth: any = proxyData.getEleWidth(barBox);
  440. if (sliderWidth > 1) {
  441. sliderWidth = sliderWidth - barWidth;
  442. }
  443. let tempPart =
  444. (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) /
  445. sliderWidth;
  446. let part: any = tempPart;
  447. proxyData.part = tempPart;
  448. if (!handBox) {
  449. return;
  450. }
  451. handBox.addEventListener("touchstart", function (e: any) {
  452. barLeft = isNaN(parseInt(barBox.style.left))
  453. ? 0
  454. : parseInt(barBox.style.left);
  455. isMove = true;
  456. });
  457. handBox.addEventListener("touchend", function (e: any) {
  458. isMove = false;
  459. proxyData.changeZongAir("temp", proxyData.realTemp);
  460. proxyData.airTemp = proxyData.realTemp;
  461. });
  462. swiper(handBox, {
  463. swipeLeft: function (e: any) {
  464. if (isMove) {
  465. barLeft = Math.abs(barLeft);
  466. let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
  467. let left: any = barLeft - moveRealX;
  468. left = left < 0 ? 0 : left;
  469. barBox.style.left = left + "px";
  470. proxyData.realTemp = left * part + proxyData.airData.minTempSet;
  471. proxyData.realTemp = Math.round(proxyData.realTemp);
  472. }
  473. },
  474. swipeRight: function (e: any) {
  475. if (isMove) {
  476. barLeft = Math.abs(barLeft);
  477. let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
  478. let left: any = barLeft + moveRealX;
  479. left = left > sliderWidth ? sliderWidth : left;
  480. proxyData.realTemp = left * part + proxyData.airData.minTempSet;
  481. proxyData.realTemp = Math.round(proxyData.realTemp);
  482. barBox.style.left = left + proxyData.sliderPading + "px";
  483. }
  484. },
  485. });
  486. },
  487. // 定时获取空调状态
  488. getAirInfoToTimer(timerLong: any = 15000) {
  489. let nowTime: any = getRelNowTime();
  490. if (timerLong == 15000 && nowTime < "070000" && nowTime > "200000") {
  491. timerLong = 300000;
  492. }
  493. console.log("nowTime===", nowTime);
  494. if (proxyData.airTimer) {
  495. clearTimeout(proxyData.airTimer);
  496. proxyData.airTimer = null;
  497. }
  498. proxyData.airTimer = setTimeout(function () {
  499. if (!proxyData.loadingNum) {
  500. proxyData.getAirInfo();
  501. }
  502. }, timerLong);
  503. },
  504. // 获取操作时长
  505. getTimerLen() {
  506. // debugger;
  507. let equipmentCategory: any = "";
  508. if (proxyData.equipList && proxyData.equipList.length) {
  509. equipmentCategory = proxyData.equipList[0].equipmentCategory;
  510. }
  511. let timerLen: any = 15;
  512. if (equipmentCategory && equipmentCategory == "ACATVI") {
  513. // timerLen = 120;
  514. timerLen = 15;
  515. }
  516. return timerLen;
  517. },
  518. switchTimer: switchTimer,
  519. // 计算loading时间
  520. setLoadingNumber() {
  521. let timerLen: any = proxyData.getTimerLen();
  522. proxyData.switchTimer = setInterval(() => {
  523. proxyData.loadingNum++;
  524. if (proxyData.loadingNum >= timerLen) {
  525. clearInterval(proxyData.switchTimer);
  526. proxyData.switchTimer = null;
  527. proxyData.loadingAir = false;
  528. proxyData.loadingNum = 0;
  529. proxyData.getAirInfoToTimer(0);
  530. }
  531. console.log("proxyData.loadingNum==", proxyData.loadingNum, timerLen);
  532. }, 1000);
  533. },
  534. // 格式化空调数据
  535. formatAirData(btnType: any, text: any) {
  536. let obj: any = {};
  537. if (btnType == "temp") {
  538. obj.codeKey = "tempSetCode";
  539. obj.value = text;
  540. }
  541. if (btnType == "gear" && text == "windLow") {
  542. //降挡
  543. if (proxyData.airData.gear > 1) {
  544. proxyData.airData.gear--;
  545. proxyData.airData.isAutoGear = 0;
  546. obj.value = proxyData.airData.gear;
  547. obj.codeKey = "gearCode";
  548. } else {
  549. return;
  550. }
  551. }
  552. if (btnType == "gear" && text == "windUp") {
  553. //升档
  554. if (proxyData.airData.gear < 3) {
  555. proxyData.airData.gear++;
  556. proxyData.airData.isAutoGear = 0;
  557. obj.value = proxyData.airData.gear;
  558. obj.codeKey = "gearCode";
  559. } else {
  560. return;
  561. }
  562. }
  563. if (btnType == "gear" && text == "auto") {
  564. proxyData.airData.isAutoGear = proxyData.airData.isAutoGear ? 0 : 1;
  565. obj.value = proxyData.airData.isAutoGear ? 4 : proxyData.airData.gear;
  566. obj.codeKey = "gearCode";
  567. }
  568. if (btnType == "mode") {
  569. proxyData.airData.workMode = text;
  570. obj.codeKey = "modeSetCode";
  571. obj.value = text;
  572. }
  573. return obj;
  574. },
  575. /**
  576. * 加载loading
  577. */
  578. loadingStart() {
  579. proxyData.cotrolLoading = true;
  580. },
  581. /**
  582. * 结束
  583. */
  584. loadinngEnd() {
  585. proxyData.cotrolLoading = false;
  586. },
  587. // 计算loading时间
  588. setChildLoadingNumber(childItem: any) {
  589. let timerLen: any = proxyData.getTimerLen();
  590. childItem.loadingNum = 1;
  591. childItem.timer = setInterval(() => {
  592. childItem.loadingNum++;
  593. if (childItem.loadingNum >= timerLen) {
  594. clearInterval(childItem.timer);
  595. childItem.timer = null;
  596. childItem.loadingNum = 0;
  597. proxyData.getAirInfoToTimer(0);
  598. }
  599. console.log("===");
  600. console.log(childItem.loadingNum);
  601. }, 1000);
  602. },
  603. // 连续点击2秒内未点击才发指令
  604. childDisabled(childItem: any, data: any) {
  605. clearTimeout(childItem.timeOuter);
  606. childItem.timeOuter = setInterval(() => {
  607. childItem.num--;
  608. if (childItem.num == 0) {
  609. proxyData.setSpaceCondtioners(data);
  610. clearTimeout(childItem.timeOuter);
  611. }
  612. }, 1000);
  613. },
  614. // 子设备开关控制
  615. changeChildItemAir(btnType: any, childItem: any, symbol: any) {
  616. const domAirOpen = !childItem.isOpen;
  617. let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime([
  618. childItem,
  619. ]);
  620. if (
  621. proxyData.forceOverTimeFlag &&
  622. domAirOpen &&
  623. isExeSpaceTime &&
  624. btnType == "switch"
  625. ) {
  626. //需要强制加班
  627. contx.emit("triggerWork", 2, childItem);
  628. return;
  629. }
  630. // 空调没有开的时候不让调温度和风量
  631. if (!childItem.isOpen && btnType !== "switch") {
  632. return;
  633. }
  634. let arr: any = [];
  635. if (btnType === "switch") {
  636. if (childItem.loadingNum >= 1 && childItem.loadingNum <= 15) {
  637. return;
  638. }
  639. childItem.isOpen = !childItem.isOpen;
  640. let obj: any = {
  641. id: childItem.id, //类型:String 必有字段 备注:设备id
  642. code: childItem.switchCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
  643. value: childItem.isOpen ? "1" : "0", //类型:String 必有字段 备注:值 0
  644. };
  645. arr.push(obj);
  646. } else if (btnType === "temp") {
  647. childItem.num = 2;
  648. if (symbol === "up") {
  649. if (childItem.tempSet >= proxyData.airData.maxTempSet) {
  650. return;
  651. }
  652. childItem.tempSet = childItem.tempSet + 0.5;
  653. } else if (symbol === "down") {
  654. if (childItem.tempSet <= proxyData.airData.minTempSet) {
  655. return;
  656. }
  657. childItem.tempSet = childItem.tempSet - 0.5;
  658. }
  659. let obj: any = {
  660. id: childItem.id, //类型:String 必有字段 备注:设备id
  661. code: childItem.tempSetCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
  662. value: childItem.tempSet, //类型:String 必有字段 备注:值 0
  663. };
  664. arr.push(obj);
  665. proxyData.childDisabled(childItem, arr);
  666. } else if (btnType === "gear") {
  667. if (symbol === "up") {
  668. if (childItem.isAutoGear) {
  669. return;
  670. }
  671. if (childItem.gear >= 3) {
  672. childItem.isAutoGear = 1;
  673. } else {
  674. childItem.gear++;
  675. childItem.isAutoGear = 0;
  676. }
  677. } else if (symbol === "down") {
  678. if (!childItem.isAutoGear && childItem.gear <= 1) {
  679. return;
  680. }
  681. if (childItem.isAutoGear) {
  682. childItem.isAutoGear = 0;
  683. childItem.gear = 3;
  684. } else {
  685. childItem.gear--;
  686. }
  687. }
  688. let obj: any = {
  689. id: childItem.id, //类型:String 必有字段 备注:设备id
  690. code: childItem.gearCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
  691. value: childItem.isAutoGear ? 4 : childItem.gear, //类型:String 必有字段 备注:值 0
  692. };
  693. arr.push(obj);
  694. } else if (btnType === "model") {
  695. if (symbol === "up") {
  696. if (childItem.workMode >= 3) {
  697. return;
  698. }
  699. childItem.workMode++;
  700. } else if (symbol === "down") {
  701. if (childItem.workMode <= 1) {
  702. return;
  703. }
  704. childItem.workMode--;
  705. }
  706. let obj: any = {
  707. id: childItem.id, //类型:String 必有字段 备注:设备id
  708. code: childItem.modeSetCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
  709. value: childItem.workMode, //类型:String 必有字段 备注:值 0
  710. };
  711. arr.push(obj);
  712. }
  713. // 空调调节后先不刷新,等2分钟后更新状态
  714. proxyData.updateAirStatus();
  715. // 修改单个设备的状态
  716. if (btnType !== "temp") {
  717. proxyData.setSpaceCondtioners(arr);
  718. }
  719. },
  720. // 改变设备状态
  721. setSpaceCondtioners(data: any) {
  722. setSpaceCondtioners(data)
  723. .then((res) => {
  724. // proxyData.setLoadingNumber();
  725. proxyData.loadinngEnd();
  726. })
  727. .catch(() => {
  728. // proxyData.setLoadingNumber();
  729. proxyData.loadinngEnd();
  730. Toast("连接异常,请检查网络!");
  731. });
  732. },
  733. // 改变空调状态
  734. changeZongAir(btnType: any, text: any) {
  735. if (!proxyData.airData.isOpen) return;
  736. let equpObj: any = proxyData.formatAirData(btnType, text);
  737. if (!(equpObj && equpObj.codeKey)) return;
  738. let data: any = [];
  739. proxyData.equipList.map((item: any) => {
  740. let obj: any = {
  741. id: item.id, //类型:String 必有字段 备注:设备id
  742. code: item[equpObj.codeKey], //类型:String 必有字段 备注:编码 EquipSwtichSet
  743. value: equpObj.value, //类型:String 必有字段 备注:值 0
  744. };
  745. data.push(obj);
  746. });
  747. console.log("设备数据处理---");
  748. console.log(data);
  749. if (!proxyData.cotrolLoading) {
  750. proxyData.loadingStart();
  751. // 调整设备状态
  752. proxyData.updateAirStatus();
  753. proxyData.setSpaceCondtioners(data);
  754. }
  755. },
  756. // 检查设备是否执行空间服务时间
  757. checkDeviceIsExeSpaceTime(deviceAll: any = []) {
  758. let seviceEquipmentList: any = proxyData.seviceEquipmentList;
  759. let flag: any = false;
  760. // debugger
  761. for (let i = 0; i < seviceEquipmentList.length; i++) {
  762. for (let j = 0; j < deviceAll.length; j++) {
  763. if (
  764. seviceEquipmentList[i].id == deviceAll[j].id &&
  765. seviceEquipmentList[i].isExeSpaceTime
  766. ) {
  767. flag = true;
  768. break;
  769. }
  770. }
  771. if (flag) {
  772. break;
  773. }
  774. }
  775. return flag;
  776. },
  777. // 加班更新按钮的状态
  778. updateSwitchFromWork(deviceItem: any) {
  779. if (deviceItem) {
  780. proxyData.equipList.map((item: any) => {
  781. if (item.id === deviceItem.id) {
  782. item.isOpen = true;
  783. proxyData.airData.isOpen = true;
  784. }
  785. });
  786. } else {
  787. proxyData.airData.isOpen = true;
  788. }
  789. nextTick(() => {
  790. proxyData.barSwiperInit();
  791. });
  792. },
  793. // 刷新空调状态的接口
  794. updateAirStatus() {
  795. clearTimeout(proxyData.airTimer);
  796. proxyData.airTimer = null;
  797. proxyData.loadingNum = 1;
  798. if (!proxyData.switchTimer) {
  799. proxyData.setLoadingNumber();
  800. }
  801. },
  802. // 点击总开关,前端更新子设备的状态
  803. updateChildSatus() {
  804. proxyData.equipList.map((item: any) => {
  805. item.isOpen = proxyData.airData.isOpen;
  806. });
  807. },
  808. // 更新总开关的开关状态
  809. updateParentSatus() {
  810. let flag: any = false;
  811. proxyData.equipList.map((item: any) => {
  812. if (item.isOpen) {
  813. flag = true;
  814. }
  815. });
  816. proxyData.airData.isOpen = flag;
  817. },
  818. // 总控制改变空调状态
  819. airChange() {
  820. // 先不更新状态等确认框弹出后再更新状
  821. // 操作空调
  822. const domAirOpen = !proxyData.airData.isOpen;
  823. let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime(
  824. proxyData.equipList
  825. );
  826. if (proxyData.forceOverTimeFlag && domAirOpen && isExeSpaceTime) {
  827. //需要强制加班
  828. contx.emit("triggerWork", 2);
  829. return;
  830. }
  831. proxyData.airData.isOpen = !proxyData.airData.isOpen;
  832. proxyData.loadingAir = true;
  833. // 操作空调后,先关闭定时刷新接口,等固定时间再更新空调状态
  834. proxyData.updateAirStatus();
  835. if (proxyData.airData.isOpen) {
  836. nextTick(() => {
  837. proxyData.barSwiperInit();
  838. });
  839. }
  840. let data: any = [];
  841. proxyData.equipList.map((item: any) => {
  842. let obj: any = {
  843. id: item.id, //类型:String 必有字段 备注:设备id
  844. code: item.switchCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
  845. value: proxyData.airData.isOpen ? "1" : "0", //类型:String 必有字段 备注:值 0
  846. };
  847. data.push(obj);
  848. });
  849. // 设备状态处理
  850. proxyData.setSpaceCondtioners(data);
  851. },
  852. // 设置子设备的状态
  853. formateSetChildStatus() {
  854. proxyData.equipList.map((item: any) => {
  855. item.isOpen = item.runStatus === 1 ? true : false;
  856. });
  857. },
  858. // 初始化滚动
  859. async barSwiperInit() {
  860. if (proxyData.airData.isOpen && !proxyData.showChild) {
  861. proxyData.endBoxSwiper();
  862. // debugger
  863. proxyData.setBarNowPerstion();
  864. }
  865. },
  866. // 设置子设备的可调范围
  867. setChildSelectList() {
  868. proxyData.equipList.map((item: any) => {
  869. let tempArr: any = [];
  870. for (
  871. let i = proxyData.airData.minTempSet;
  872. i <= proxyData.airData.maxTempSet;
  873. i = i + 0.5
  874. ) {
  875. tempArr.push(i);
  876. }
  877. item.tempArr = tempArr;
  878. let index: any = item.tempArr.findIndex((ele: any) => {
  879. return ele == item.tempSet;
  880. });
  881. item.sel = index == -1 ? 0 : index;
  882. let modelArr: any = ["制冷", "制热", "通风"];
  883. item.modelArr = modelArr;
  884. if (item.workMode > 3) {
  885. item.workMode = 1;
  886. }
  887. let mIndex: any = item.workMode ? item.workMode - 1 : 2;
  888. item.mIndex = mIndex;
  889. let gearArr: any = [0, 1, 2, 3, "AUTO"];
  890. item.gearArr = gearArr;
  891. let gIndex: any = item.gearArr.findIndex((ele: any) => {
  892. if (item.isAutoGear == 1) {
  893. return ele == "AUTO";
  894. } else {
  895. return ele == item.gear;
  896. }
  897. });
  898. item.gIndex = gIndex == -1 ? 0 : gIndex;
  899. });
  900. proxyData.setValueHeight();
  901. },
  902. setValueHeight() {
  903. if (!proxyData.valueHeight) {
  904. proxyData.valueDom = proxyData.valueDom
  905. ? proxyData.valueDom
  906. : document.querySelectorAll(".value")[0];
  907. proxyData.valueHeight = proxyData.valueDom
  908. ? proxyData.valueDom.offsetHeight
  909. : 0;
  910. }
  911. console.log("proxyData.valueHeight==", proxyData.valueHeight);
  912. },
  913. // 改变子设备选中的位置
  914. updateChildPerstion() {
  915. proxyData.equipList.map((item: any) => {
  916. let index: any = item.tempArr.findIndex((ele: any) => {
  917. return ele == item.tempSet;
  918. });
  919. item.sel = index == -1 ? 0 : index;
  920. let mIndex: any = item.workMode ? item.workMode - 1 : 2;
  921. item.mIndex = mIndex;
  922. let gIndex: any = item.gearArr.findIndex((ele: any) => {
  923. if (item.isAutoGear == 1) {
  924. return ele == "AUTO";
  925. } else {
  926. return ele == item.gear;
  927. }
  928. });
  929. item.gIndex = gIndex == -1 ? 0 : gIndex;
  930. });
  931. },
  932. // 空调信息airTemp的修改
  933. getAirInfo(isAddTimer: any = 0) {
  934. const paramObj = {
  935. spaceId: proxyData.spaceId,
  936. // spaceId: props.spaceId,//'Sp110108025564f438d7fef64eea8202a6462f1bbcce' 空间id
  937. };
  938. //wx.showLoading();
  939. let str: any = setQueryConfig(paramObj);
  940. querySpaceConditioners(str)
  941. .then((res) => {
  942. let data: any = res.data || {};
  943. proxyData.firstLoadingAir = false;
  944. proxyData.loadingAir = false;
  945. proxyData.airTemp = data.tempSet;
  946. proxyData.airData.maxTempSet = data.maxTempSet;
  947. proxyData.airData.minTempSet = data.minTempSet;
  948. proxyData.airData.isOpen = data.runStatus ? true : false;
  949. proxyData.airData.runStatus = data.runStatus;
  950. proxyData.airData.isAutoGear = data.isAutoGear;
  951. proxyData.airData.gear = data.gear || 0;
  952. proxyData.airData.workMode = data.workMode;
  953. proxyData.equipList = data.equipList;
  954. // proxyData.equipList.push(data.equipList[0]);
  955. // 设置子设备的状态
  956. proxyData.setChildSelectList();
  957. proxyData.formateSetChildStatus();
  958. nextTick(() => {
  959. proxyData.barSwiperInit();
  960. });
  961. if (isAddTimer == 0) {
  962. proxyData.getAirInfoToTimer();
  963. }
  964. })
  965. .catch(() => {});
  966. },
  967. });
  968. watch(
  969. [() => props, () => props.spaceId],
  970. (newProps: any, oldProps: any) => {
  971. if (newProps[0]) {
  972. proxyData.temperature = newProps[0].temperature;
  973. proxyData.userIsControl = newProps[0].userIsControl;
  974. proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
  975. proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList;
  976. }
  977. if (newProps[1] && newProps[1] != oldProps[1]) {
  978. proxyData.spaceId = newProps[1];
  979. proxyData.swiperIinit = false;
  980. proxyData.getAirInfoToTimer(0);
  981. }
  982. },
  983. {
  984. deep: true,
  985. immediate: true,
  986. }
  987. );
  988. onBeforeUnmount(() => {
  989. if (proxyData.airTimer) {
  990. clearTimeout(proxyData.airTimer);
  991. proxyData.airTimer = null;
  992. }
  993. });
  994. onMounted(() => {
  995. proxyData.spaceId = props.spaceId;
  996. proxyData.getAirInfoToTimer(0);
  997. // 获取空调信息
  998. });
  999. return {
  1000. ...toRefs(proxyData),
  1001. };
  1002. },
  1003. });
  1004. </script>
  1005. <style lang="scss" scoped>
  1006. .air {
  1007. position: relative;
  1008. width: 100%;
  1009. background: #ffffff;
  1010. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  1011. border-radius: 25px;
  1012. margin: 15px 0px;
  1013. .loading-box {
  1014. position: absolute;
  1015. left: 50%;
  1016. top: 50%;
  1017. transform: translate(-50%, -50%);
  1018. width: 100%;
  1019. height: 100%;
  1020. background: rgba(#000000, 0.3);
  1021. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07),
  1022. 0px 4px 10px rgba(0, 0, 0, 0.05);
  1023. text-align: center;
  1024. z-index: 999;
  1025. // line-height: 50px;
  1026. }
  1027. .air-top {
  1028. padding: 0 20px;
  1029. padding-bottom: 10px;
  1030. padding-top: 18px;
  1031. display: flex;
  1032. justify-content: space-between;
  1033. .air-desc {
  1034. position: relative;
  1035. font-family: "PingFang SC";
  1036. font-size: 16px;
  1037. font-weight: 600;
  1038. line-height: 22px;
  1039. letter-spacing: 0em;
  1040. padding-top: 8px;
  1041. text-align: left;
  1042. color: rgba(77, 82, 98, 1);
  1043. .air-title {
  1044. font-family: "PingFang SC";
  1045. font-size: 16px;
  1046. font-weight: 600;
  1047. line-height: 22px;
  1048. padding-bottom: 4px;
  1049. letter-spacing: 0;
  1050. text-align: left;
  1051. color: rgba(77, 82, 98, 1);
  1052. }
  1053. .air-temperature {
  1054. position: relative;
  1055. display: inline-block;
  1056. font-family: "Persagy";
  1057. font-size: 32px;
  1058. font-weight: 400;
  1059. line-height: 39px;
  1060. letter-spacing: 0px;
  1061. text-align: right;
  1062. color: rgba(27, 33, 41, 1);
  1063. sup {
  1064. position: absolute;
  1065. font-family: "Persagy";
  1066. top: -2px;
  1067. right: -12px;
  1068. font-size: 12px;
  1069. font-weight: 400;
  1070. line-height: 15px;
  1071. letter-spacing: 0em;
  1072. text-align: left;
  1073. color: rgba(196, 196, 196, 1);
  1074. }
  1075. }
  1076. .show-all {
  1077. position: absolute;
  1078. width: 110px;
  1079. bottom: -8px;
  1080. font-family: PingFang SC;
  1081. font-size: 14px;
  1082. line-height: 16px;
  1083. color: #c4c4c4;
  1084. margin: 0px 5px;
  1085. span {
  1086. font-size: 12px;
  1087. }
  1088. .light-icon {
  1089. font-size: 12px;
  1090. padding-right: 10px;
  1091. }
  1092. }
  1093. }
  1094. .air-right {
  1095. position: relative;
  1096. width: 130px;
  1097. text-align: center;
  1098. img {
  1099. width: 130px;
  1100. height: 64px;
  1101. }
  1102. }
  1103. }
  1104. .top-switch {
  1105. display: flex;
  1106. justify-content: space-between;
  1107. padding: 8px 20px;
  1108. margin-bottom: 8px;
  1109. .top-nav {
  1110. height: 28px;
  1111. line-height: 28px;
  1112. border-radius: 21px;
  1113. background: #f1f4f6;
  1114. span {
  1115. box-sizing: border-box;
  1116. display: inline-block;
  1117. font-family: "PingFang SC";
  1118. font-style: normal;
  1119. font-weight: 400;
  1120. font-size: 14px;
  1121. padding: 5px 8px;
  1122. height: 28px;
  1123. line-height: 14px;
  1124. color: #424c59;
  1125. }
  1126. .nav-active {
  1127. background: #fff;
  1128. border: 1px solid #e1e5eb;
  1129. border-radius: 21px;
  1130. }
  1131. }
  1132. // .switch-btn {
  1133. // margin-top: 0;
  1134. // }
  1135. }
  1136. .line {
  1137. width: 100%;
  1138. height: 0px;
  1139. border-top: 1px solid rgba(232, 236, 240, 1);
  1140. }
  1141. .active-color {
  1142. background: $elActiveColor !important;
  1143. span {
  1144. color: #fff !important;
  1145. }
  1146. }
  1147. .air-child {
  1148. width: 100%;
  1149. padding-left: 12px;
  1150. padding-right: 12px;
  1151. padding-top: 16px;
  1152. padding-bottom: 4px;
  1153. .child-control-box {
  1154. display: inline-block;
  1155. width: 49%;
  1156. margin-right: 2%;
  1157. margin-bottom: 12px;
  1158. padding: 14px 16px;
  1159. justify-content: space-between;
  1160. border-radius: 16px;
  1161. background: rgba(247, 249, 250, 1);
  1162. &:nth-child(2n) {
  1163. margin-right: 0;
  1164. }
  1165. .open-title {
  1166. width: 100%;
  1167. font-size: 14px;
  1168. display: flex;
  1169. justify-content: space-between;
  1170. margin-bottom: 26px;
  1171. .open-temp-box {
  1172. position: relative;
  1173. display: inline-block;
  1174. // width: calc(100% - 50px);
  1175. overflow: hidden;
  1176. span {
  1177. text-overflow: ellipsis;
  1178. white-space: nowrap;
  1179. font-family: "Persagy";
  1180. font-size: 22px;
  1181. font-weight: 400;
  1182. line-height: 22px;
  1183. letter-spacing: 0;
  1184. }
  1185. sup {
  1186. position: absolute;
  1187. top: -3px;
  1188. font-family: Mulish;
  1189. font-size: 12px;
  1190. font-weight: 400;
  1191. text-align: left;
  1192. color: rgba(196, 196, 196, 1);
  1193. }
  1194. }
  1195. .text-box {
  1196. margin-left: -2px;
  1197. padding-top: 4px;
  1198. img {
  1199. display: inline-block;
  1200. vertical-align: middle;
  1201. width: 16px;
  1202. height: 16px;
  1203. margin-right: 2px;
  1204. }
  1205. span {
  1206. display: inline-block;
  1207. vertical-align: middle;
  1208. font-family: "PingFang SC";
  1209. font-size: 12px;
  1210. font-weight: 400;
  1211. color: rgba(196, 201, 207, 1);
  1212. }
  1213. }
  1214. }
  1215. .control-bottom {
  1216. display: flex;
  1217. justify-content: space-between;
  1218. .control-title {
  1219. font-family: "PingFang SC";
  1220. font-size: 16px;
  1221. font-weight: 600;
  1222. line-height: 22px;
  1223. padding-right: 8px;
  1224. overflow: hidden;
  1225. text-overflow: ellipsis;
  1226. white-space: nowrap;
  1227. color: rgba(77, 82, 98, 1);
  1228. }
  1229. img {
  1230. width: 20px;
  1231. height: 20px;
  1232. cursor: pointer;
  1233. }
  1234. }
  1235. }
  1236. }
  1237. .main-temp {
  1238. padding-bottom: 16px;
  1239. }
  1240. .air-control {
  1241. padding: 20px;
  1242. padding-top: 28px;
  1243. padding-bottom: 0;
  1244. .control-box {
  1245. display: flex;
  1246. justify-content: space-between;
  1247. }
  1248. .volume-box {
  1249. .number {
  1250. span {
  1251. font-family: "Persagy";
  1252. font-size: 12px;
  1253. font-weight: 400;
  1254. padding-right: 8px;
  1255. line-height: 24px;
  1256. letter-spacing: 0px;
  1257. color: rgba(196, 201, 207, 1);
  1258. }
  1259. .number-active {
  1260. font-family: "Persagy";
  1261. font-size: 18px;
  1262. font-weight: 400;
  1263. line-height: 24px;
  1264. letter-spacing: 0px;
  1265. color: rgba(27, 33, 41, 1);
  1266. }
  1267. }
  1268. .model {
  1269. font-family: "PingFang SC";
  1270. font-size: 16px;
  1271. font-weight: 400;
  1272. line-height: 24px;
  1273. letter-spacing: 0px;
  1274. }
  1275. .text {
  1276. font-family: "PingFang SC";
  1277. display: block;
  1278. font-size: 13px;
  1279. font-weight: 400;
  1280. padding-top: 3px;
  1281. margin-left: -3px;
  1282. transform: scale(0.9);
  1283. text-align: left;
  1284. // line-height: 17px;
  1285. letter-spacing: 0px;
  1286. color: rgba(196, 201, 207, 1);
  1287. }
  1288. }
  1289. .volume-icon {
  1290. .icon-item {
  1291. position: relative;
  1292. display: inline-block;
  1293. width: 42px;
  1294. height: 42px;
  1295. background: rgba(196, 196, 196, 0.2);
  1296. border-radius: 50%;
  1297. img {
  1298. width: 20px;
  1299. height: 20px;
  1300. position: absolute;
  1301. left: 50%;
  1302. top: 50%;
  1303. transform: translate(-50%, -50%);
  1304. }
  1305. &:nth-child(2) {
  1306. margin-left: 10px;
  1307. margin-right: 10px;
  1308. }
  1309. span {
  1310. font-size: 12px;
  1311. color: #000000;
  1312. position: absolute;
  1313. left: 50%;
  1314. top: 50%;
  1315. transform: translate(-50%, -50%) scale(0.8);
  1316. }
  1317. }
  1318. }
  1319. .temp-slider {
  1320. position: relative;
  1321. display: flex;
  1322. height: 22px;
  1323. border-radius: 16px;
  1324. background: linear-gradient(
  1325. 270deg,
  1326. #ffbab6 0%,
  1327. #ffe7d1 29.05%,
  1328. #f1efff 62%,
  1329. #c8d6ff 100%
  1330. );
  1331. .slider-bar {
  1332. position: absolute;
  1333. left: 0;
  1334. bottom: -5px;
  1335. width: 32px;
  1336. z-index: 333;
  1337. text-align: center;
  1338. color: rgba(98, 108, 120, 1);
  1339. .bar-temp {
  1340. display: inline-block;
  1341. font-family: "Persagy";
  1342. font-size: 12px;
  1343. font-weight: 400;
  1344. line-height: 14px;
  1345. letter-spacing: 0px;
  1346. padding-bottom: 4px;
  1347. text-align: left;
  1348. color: rgba(98, 108, 120, 1);
  1349. }
  1350. .bar-circle {
  1351. width: 30px;
  1352. height: 30px;
  1353. background: rgba(246, 249, 254, 1);
  1354. border-radius: 50%;
  1355. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  1356. }
  1357. }
  1358. .temp-left,
  1359. .temp-right {
  1360. position: absolute;
  1361. display: inline-block;
  1362. font-family: "Persagy";
  1363. top: 50%;
  1364. transform: translateY(-50%);
  1365. font-size: 12px;
  1366. padding-top: 1px;
  1367. font-weight: 400;
  1368. letter-spacing: 0px;
  1369. color: rgba(98, 108, 120, 1);
  1370. }
  1371. .temp-left {
  1372. left: 0px;
  1373. padding-left: 8px;
  1374. }
  1375. .temp-right {
  1376. right: 0px;
  1377. padding-right: 8px;
  1378. text-align: left;
  1379. }
  1380. }
  1381. .control-text {
  1382. font-style: normal;
  1383. font-weight: 600;
  1384. font-size: 11px;
  1385. line-height: 15px;
  1386. color: #c4c4c4;
  1387. padding: 10px 0 0 10px;
  1388. }
  1389. }
  1390. .air-control-padding {
  1391. padding-top: 23px;
  1392. margin-top: 8px;
  1393. }
  1394. }
  1395. </style>