index.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209
  1. <template>
  2. <div class="light" v-if="showLight && lampList && lampList.length">
  3. <!--如果有子设备-->
  4. <div class="floor-top">
  5. <div class="top-box">
  6. <div class="top-left">
  7. <span>地暖</span>
  8. <span>26<sup>℃</sup></span>
  9. </div>
  10. <div class="top-right">
  11. <img :src="parseImgUrl('page-officehome', 'heating.svg')" alt="" />
  12. </div>
  13. </div>
  14. <div class="top-switch">
  15. <div class="top-nav">
  16. <span
  17. :class="navType == 'all' ? 'nav-active' : ''"
  18. @click="checkNav('all')"
  19. >
  20. 总控制
  21. </span>
  22. <span
  23. :class="navType == 'child' ? 'nav-active' : ''"
  24. @click="checkNav('child')"
  25. >
  26. 子设备
  27. </span>
  28. </div>
  29. <Switch
  30. class="switch-btn"
  31. size="18px"
  32. inactive-color="rgba(196, 196, 196, 0.4)"
  33. />
  34. </div>
  35. </div>
  36. <div class="air-control air-control-padding" v-if="navType == 'all'">
  37. <div class="control-box">
  38. <div class="temp-slider" id="slideFloorId">
  39. <div class="slider-bar" id="barFloorId">
  40. <div class="bar-temp">26℃</div>
  41. <div class="bar-circle" id="handFloorId"></div>
  42. </div>
  43. <div class="temp-left" style="width: 22px">23</div>
  44. <div class="temp-right" style="width: 22px">28</div>
  45. </div>
  46. </div>
  47. </div>
  48. <!--灯控制按钮-->
  49. <div class="line" v-if="navType == 'child'"></div>
  50. <div class="light-box" v-if="navType == 'child'">
  51. <template v-for="(item, index) in lampList" :key="item.id">
  52. <div
  53. class="light-control"
  54. @click="showLightColorCtrol(item)"
  55. v-if="showFlag ? index < lampList.length : index < 2"
  56. >
  57. <div class="control-top">
  58. <div class="control-temp">
  59. <span>26<sup>℃</sup></span>
  60. <span>已开启</span>
  61. </div>
  62. <Switch
  63. active-color="$elActiveColor"
  64. :disabled="!userIsControl"
  65. v-model="item.switch"
  66. :loading="item.loading"
  67. size="14px"
  68. @click.stop="eqChange('main', item, index)"
  69. inactive-color="rgba(196, 196, 196, 0.2)"
  70. class="child-switch"
  71. />
  72. </div>
  73. <div class="control-bottom">
  74. <div class="control-title">
  75. {{ item.localName }}
  76. </div>
  77. <img
  78. :style="{ opacity: item.switch ? '1' : '0.3' }"
  79. :src="lightColorImg"
  80. alt=""
  81. />
  82. </div>
  83. </div>
  84. </template>
  85. </div>
  86. <div
  87. class="show-all"
  88. v-if="lampList && lampList.length > 2"
  89. @click.stop="showAll"
  90. >
  91. <van-icon :name="lightIcon" class="light-icon" />
  92. <span>展开更多</span>
  93. </div>
  94. </div>
  95. </template>
  96. <script lang="ts">
  97. import {
  98. defineComponent,
  99. computed,
  100. onMounted,
  101. reactive,
  102. toRefs,
  103. getCurrentInstance,
  104. watch,
  105. onBeforeMount,
  106. onUnmounted,
  107. onBeforeUnmount,
  108. } from "vue";
  109. import { Switch, Toast } from "vant";
  110. import { getLampHttp, getStatusHttp, setallLampHttp } from "@/apis/envmonitor";
  111. import { parseImgUrl } from "@/utils";
  112. import { type } from "os";
  113. import { onDeactivated } from "vue";
  114. import { AnyMxRecord } from "dns";
  115. import { swiper } from "@/utils/swiper";
  116. import { nextTick } from "process";
  117. export default defineComponent({
  118. props: {
  119. projectId: {
  120. type: String,
  121. default: () => "",
  122. },
  123. controlMode: {
  124. type: Number,
  125. default: () => 0,
  126. },
  127. spaceId: {
  128. type: String,
  129. default: () => "",
  130. },
  131. userIsControl: {
  132. type: Boolean,
  133. default: () => false,
  134. },
  135. forceOverTimeFlag: {
  136. type: Boolean,
  137. default: () => false,
  138. },
  139. showLight: {
  140. type: Boolean,
  141. default: () => false,
  142. },
  143. seviceEquipmentList: {
  144. // 是否走服务定制的设备
  145. type: Array,
  146. default: () => [],
  147. },
  148. },
  149. components: { Switch },
  150. setup(props, contx) {
  151. const lampList: any = [];
  152. let lightsStatusTimer: any = null;
  153. const timeOut: any = null;
  154. const initData: any = [];
  155. let lightParams: any = [];
  156. let heatingData: any = {
  157. minTempSet: 16,
  158. maxTempSet: 35,
  159. };
  160. const proxyData = reactive({
  161. seviceEquipmentList: props.seviceEquipmentList,
  162. showLight: props.showLight,
  163. spaceId: props.spaceId,
  164. controlMode: props.controlMode,
  165. userIsControl: props.userIsControl,
  166. forceOverTimeFlag: props.forceOverTimeFlag,
  167. setStatus: false,
  168. lightParams: lightParams,
  169. heatingData: heatingData,
  170. heatingTemp: 35,
  171. parseImgUrl: parseImgUrl,
  172. allowSvg: "down_Arrow.svg",
  173. timeOut: timeOut,
  174. lightIcon: "arrow-down",
  175. showFlag: false,
  176. loadingLight: false,
  177. loading: false,
  178. initData: initData,
  179. lampList: lampList,
  180. lightsStatusTimer: lightsStatusTimer,
  181. startCheckLightsTime: 0,
  182. lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
  183. lightImg: parseImgUrl("page-officehome", "lamp_close.png"),
  184. lampSw: false, // 主灯开关
  185. swiperIinit: false,
  186. part: 1,
  187. realTemp: 0,
  188. navType: "all",
  189. getElePading(ele: any, elePadingKey: any) {
  190. let style: any = getComputedStyle(ele, null);
  191. if (style) {
  192. return parseFloat(style.getPropertyValue(elePadingKey));
  193. } else {
  194. return 0;
  195. }
  196. },
  197. // 子设备导航切换
  198. checkNav(type: any = "all") {
  199. proxyData.navType = type;
  200. },
  201. // 滑动
  202. endBoxSwiper() {
  203. proxyData.swiperIinit = true;
  204. let handBox: any = document.querySelector("#handFloorId");
  205. let barBox: any = document.querySelector("#barFloorId");
  206. let sliderBox: any = document.querySelector("#slideFloorId");
  207. let sliderPadingL: any = 24;
  208. let sliderPadingR: any = 24;
  209. let isMove: any = false;
  210. let barLeft: any = 0;
  211. let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
  212. if (sliderWidth > 1) {
  213. sliderWidth = sliderWidth - sliderPadingR;
  214. }
  215. let barWidth: any = barBox ? barBox.offsetWidth : 20;
  216. let tempPart = (35 - 16) / (sliderWidth - sliderPadingL - barWidth);
  217. let part: any = tempPart;
  218. proxyData.part = part;
  219. if (!handBox) {
  220. return;
  221. }
  222. handBox.addEventListener("touchstart", function (e: any) {
  223. barLeft = isNaN(parseInt(barBox.style.left))
  224. ? 0
  225. : parseInt(barBox.style.left);
  226. isMove = true;
  227. });
  228. handBox.addEventListener("touchend", function (e: any) {
  229. isMove = false;
  230. // proxyData.changeZongAir("temp", proxyData.realTemp);
  231. // proxyData.heatingTemp = proxyData.realTemp;
  232. });
  233. swiper(handBox, {
  234. swipeLeft: function (e: any) {
  235. if (isMove) {
  236. barLeft = Math.abs(barLeft);
  237. let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
  238. let left: any = barLeft - moveRealX;
  239. left = left < sliderPadingL ? sliderPadingL : left;
  240. barBox.style.left = left + "px";
  241. proxyData.realTemp = left * part;
  242. }
  243. },
  244. swipeRight: function (e: any) {
  245. if (isMove) {
  246. barLeft = Math.abs(barLeft);
  247. let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
  248. let left: any = barLeft + moveRealX;
  249. left = left > sliderWidth ? sliderWidth - barWidth : left;
  250. barBox.style.left = left + "px";
  251. proxyData.realTemp = left * part;
  252. }
  253. },
  254. });
  255. },
  256. // 设置温度条的位置
  257. setBarNowPerstion() {
  258. proxyData.realTemp = proxyData.heatingTemp;
  259. let barBox: any = document.querySelector("#barFloorId");
  260. if (!barBox) {
  261. return;
  262. }
  263. let sliderBox: any = document.querySelector("#slideFloorId");
  264. if (
  265. proxyData.heatingTemp >= proxyData.heatingData.minTempSet &&
  266. proxyData.heatingTemp <= proxyData.heatingData.maxTempSet
  267. ) {
  268. // 正常温度范围
  269. let left: any =
  270. (proxyData.heatingTemp - proxyData.heatingData.minTempSet) /
  271. proxyData.part;
  272. left = Math.floor(left) + 24;
  273. if (barBox) {
  274. barBox.style.left = left + "px";
  275. }
  276. } else {
  277. if (!proxyData.heatingTemp) {
  278. barBox.style.left = 24 + "px";
  279. } else if (proxyData.heatingTemp < proxyData.heatingData.minTempSet) {
  280. barBox.style.left = 24 + "px";
  281. } else if (proxyData.heatingTemp > proxyData.heatingData.maxTempSet) {
  282. let sliderWidth: any = sliderBox.offsetWidth;
  283. let barWidth: any = barBox.offsetWidth;
  284. barBox.style.left = sliderWidth - barWidth + "px";
  285. }
  286. }
  287. },
  288. // 点击展示所有的登录
  289. showAll() {
  290. proxyData.showFlag = !proxyData.showFlag;
  291. console.log("proxyData.showFlag==", proxyData.showFlag);
  292. if (proxyData.showFlag) {
  293. proxyData.lightIcon = "arrow-up";
  294. } else {
  295. proxyData.lightIcon = "arrow-down";
  296. }
  297. },
  298. // 点击展示调色和调温弹窗
  299. showLightColorCtrol(item: any, e: any = null) {
  300. console.log(item);
  301. if (item.switch) {
  302. contx.emit("showLightColorCtrol", item);
  303. }
  304. },
  305. // 检查设备是否执行空间服务时间
  306. checkDeviceIsExeSpaceTime(deviceAll: any = []) {
  307. // debugger
  308. if (proxyData.controlMode !== 1) {
  309. return true;
  310. }
  311. let seviceEquipmentList: any = proxyData.seviceEquipmentList;
  312. let flag: any = false;
  313. for (let i = 0; i < seviceEquipmentList.length; i++) {
  314. for (let j = 0; j < deviceAll.length; j++) {
  315. if (
  316. seviceEquipmentList[i].id == deviceAll[j].id &&
  317. seviceEquipmentList[i].isExeSpaceTime
  318. ) {
  319. flag = true;
  320. break;
  321. }
  322. }
  323. if (flag) {
  324. break;
  325. }
  326. }
  327. return flag;
  328. },
  329. // 获取灯的状态
  330. getLampList() {
  331. getLampHttp({ spaceId: proxyData.spaceId })
  332. .then((res) => {
  333. const resData: any = res;
  334. if (!proxyData.setStatus) {
  335. if (resData && resData.result == "success") {
  336. let content = resData?.content ?? [];
  337. let lampOpen = false; // 如果有一个开 则总灯开
  338. for (let i = 0; i < content.length; i++) {
  339. content[i].type = "lamp";
  340. if (content[i].lightType == 1) {
  341. content[i].imgOpen = parseImgUrl(
  342. "page-officehome",
  343. "lamp_open.png"
  344. );
  345. content[i].imgClose = parseImgUrl(
  346. "page-officehome",
  347. "lamp_close.png"
  348. );
  349. } else {
  350. content[i].imgOpen = parseImgUrl(
  351. "page-officehome",
  352. "atmLamp_small_open.png"
  353. );
  354. content[i].imgClose = parseImgUrl(
  355. "page-officehome",
  356. "atmLamp_small_close.png"
  357. );
  358. }
  359. content[i].switch = content[i].runStatus ? true : false;
  360. if (content[i].runStatus) {
  361. lampOpen = true;
  362. }
  363. content[i].loading = false;
  364. }
  365. proxyData.initData = JSON.parse(JSON.stringify(content)); // 灯的数据
  366. proxyData.lampSw = lampOpen; // 主灯开关
  367. proxyData.lampList = content;
  368. proxyData.lightImg = proxyData.lampSw
  369. ? parseImgUrl("page-officehome", "lamp_open.png")
  370. : parseImgUrl("page-officehome", "lamp_close.png");
  371. if (content[0]) {
  372. if (content[0].lightType !== 1) {
  373. proxyData.lightImg = proxyData.lampSw
  374. ? parseImgUrl("page-officehome", "atmLamp_small_open.png")
  375. : parseImgUrl(
  376. "page-officehome",
  377. "atmLamp_small_close.png"
  378. );
  379. }
  380. }
  381. }
  382. }
  383. // console.log("执行了----====");
  384. proxyData.startLightsStatusTimer();
  385. })
  386. .catch(() => {
  387. proxyData.startLightsStatusTimer();
  388. });
  389. },
  390. // 调整灯
  391. eqChange(type: any, item: any, index: any) {
  392. if (proxyData.userIsControl) {
  393. // debugger
  394. if (type === "allLamp") {
  395. let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime(
  396. proxyData.lampList
  397. );
  398. if (item !== "") {
  399. proxyData.lampSw = item; // 点击全开和全关的时候item动态传值true或者false
  400. }
  401. if (
  402. proxyData.forceOverTimeFlag &&
  403. proxyData.lampSw &&
  404. isExeSpaceTime
  405. ) {
  406. // 强制加班开灯
  407. contx.emit("triggerWork", 3);
  408. return;
  409. }
  410. // 总开关按钮所有灯
  411. // 当前要执行的灯的操作
  412. proxyData.loading = true;
  413. proxyData.loadingLight = true;
  414. proxyData.lightImg = proxyData.lampSw
  415. ? parseImgUrl("page-officehome", "lamp_open.png")
  416. : parseImgUrl("page-officehome", "lamp_close.png");
  417. const statusFlag = proxyData.lampSw;
  418. // 瞬间修改状态
  419. proxyData.setStatus = true;
  420. proxyData.updateAllLampStatus(statusFlag);
  421. proxyData.setLamp(type, "", statusFlag, 0); // 调接口
  422. } else {
  423. let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime([
  424. item,
  425. ]);
  426. if (proxyData.forceOverTimeFlag && item.switch && isExeSpaceTime) {
  427. // 强制加班开灯
  428. contx.emit("triggerWork", 3, item);
  429. return;
  430. }
  431. //当前要执行的灯的操作
  432. // 按钮loading
  433. item.loading = true;
  434. const statusFlag: any = item.switch;
  435. let id = item.id;
  436. proxyData.setStatus = true;
  437. proxyData.updateLampStatus(item, statusFlag);
  438. proxyData.setLamp(type, id, statusFlag, index, item); // 调接口
  439. }
  440. } else {
  441. Toast("您没有当前空间的控制权限!");
  442. }
  443. },
  444. // 控制灯的接口
  445. setLamp(
  446. type: string,
  447. id: any,
  448. statusFlag: any,
  449. index: any,
  450. item: any = null
  451. ) {
  452. let params: any = [];
  453. if (type === "allLamp") {
  454. for (let i = 0; i < proxyData.initData.length; i++) {
  455. proxyData.initData[i].switch = statusFlag;
  456. }
  457. params = proxyData.initData;
  458. } else {
  459. params = [
  460. {
  461. id: id,
  462. switch: statusFlag,
  463. },
  464. ];
  465. }
  466. proxyData.lightParams = params;
  467. // 调服务端的接口像后台发送灯的操作的指令
  468. setallLampHttp(params)
  469. .then((res) => {
  470. const resData: any = res;
  471. // set成功后1s关闭定时器
  472. setTimeout(() => {
  473. proxyData.setStatus = false;
  474. }, 1000);
  475. if (item) {
  476. item.loading = false;
  477. }
  478. if (resData.result === "success") {
  479. // const checkData: any = proxyData.judgeChangeResponeseSuccess(resData)
  480. // proxyData.getTimeLampStatus(checkData, type, id, statusFlag, index)
  481. } else {
  482. proxyData.initLampLoading();
  483. }
  484. })
  485. .catch((error: any) => {
  486. setTimeout(() => {
  487. proxyData.setStatus = false;
  488. }, 1000);
  489. if (item) {
  490. item.loading = false;
  491. }
  492. // console.log(error)
  493. Toast("连接异常,请检查网络!");
  494. });
  495. },
  496. // 报错后关闭灯的loading
  497. initLampLoading() {
  498. proxyData.loadingLight = false;
  499. proxyData.lampList.map((item: any) => {
  500. item.loading = false;
  501. });
  502. },
  503. //手动修改灯的状态
  504. updateAllLampStatus(statusFlag: any) {
  505. proxyData.lampSw = statusFlag;
  506. for (let i = 0; i < proxyData.lampList.length; i++) {
  507. proxyData.lampList[i].switch = statusFlag;
  508. // if (proxyData.lampList[i].type == 'lamp') {
  509. // }
  510. }
  511. },
  512. // 单个灯的状态修改
  513. updateLampStatus(item: any, statusFlag: any) {
  514. item.switch = statusFlag;
  515. // let flag: any = true
  516. // for (let i = 0; i < proxyData.lampList.length; i++) {
  517. // if (proxyData.lampList[i].type == 'lamp') {
  518. // if (proxyData.lampList[i].switch !== statusFlag) {
  519. // flag = false
  520. // break
  521. // }
  522. // }
  523. // }
  524. },
  525. // 轮询查看状态
  526. getTimeLampStatus(
  527. checkData: any,
  528. type: any,
  529. id: any,
  530. statusFlag: any,
  531. index: any
  532. ) {
  533. if (checkData["success"] && checkData["success"].length) {
  534. if (type === "allLamp") {
  535. // 点击主灯按钮
  536. proxyData.updateAllLampLoading(checkData["success"]); // 所有灯
  537. } else {
  538. // 当个的时候修改loading的状态
  539. proxyData.updateLampLoading(index);
  540. }
  541. proxyData.getLampList();
  542. }
  543. if (checkData["processing"] && checkData["processing"].length) {
  544. let checkParams: any = proxyData.lightParams;
  545. let processArr: any = checkData["processing"];
  546. let params: any = [];
  547. processArr.map((item: any) => {
  548. let obj: any = {
  549. id: item.id,
  550. orderSeqNum: item.orderSeqNum,
  551. };
  552. for (let i = 0; i < checkParams.length; i++) {
  553. if (item.id === checkParams[i].id) {
  554. obj.switch = checkParams[i].switch;
  555. break;
  556. }
  557. }
  558. params.push(obj);
  559. });
  560. proxyData.checkChangeLightStatusSuccess(
  561. params,
  562. type,
  563. id,
  564. statusFlag,
  565. index
  566. );
  567. }
  568. if (checkData["error"] && checkData["error"].length) {
  569. if (type === "allLamp") {
  570. // 点击主灯按钮
  571. proxyData.updateAllLampLoading(checkData["error"]); // 所有灯
  572. } else {
  573. // 当个的时候修改loading的状态
  574. proxyData.updateLampLoading(index);
  575. }
  576. }
  577. },
  578. // 查看指令是否成功完成
  579. judgeChangeResponeseSuccess(resData: any) {
  580. let data: any = resData?.content ?? [];
  581. let processingArr: any = [];
  582. let successArr: any = [];
  583. let errorArr: any = [];
  584. for (let i = 0; i < data.length; i++) {
  585. let item: any = data[i];
  586. if ((item.result = "success")) {
  587. if (item.state === 200 && item.exeResult === "success") {
  588. successArr.push(item);
  589. } else if (
  590. (item.state === 200 && item.exeResult === "processing:rcvd") ||
  591. (item.state === 202 && !item.exeResult)
  592. ) {
  593. processingArr.push(item);
  594. } else {
  595. errorArr.push(item);
  596. }
  597. } else {
  598. errorArr.push(item);
  599. }
  600. }
  601. let obj: any = {
  602. success: successArr,
  603. processing: processingArr,
  604. error: errorArr,
  605. };
  606. return obj;
  607. },
  608. // 操作成功后更新所有灯的真实状态
  609. updateAllLampLoading(arr: any) {
  610. for (let i = 0; i < proxyData.lampList.length; i++) {
  611. if (proxyData.lampList[i].type == "lamp") {
  612. arr.map((item: any) => {
  613. if (proxyData.lampList[i].id === item.id) {
  614. proxyData.lampList[i].loading = false;
  615. }
  616. });
  617. }
  618. }
  619. let loadingLen = proxyData.lampList.filter((item: any) => {
  620. return item.loading;
  621. });
  622. if (loadingLen.length === 0) {
  623. proxyData.loadingLight = false;
  624. }
  625. },
  626. // 动态切换主灯的状态
  627. updateLampLoading(index: any) {
  628. proxyData.lampList[index].loading = false;
  629. },
  630. // 灯的指令完成后更新状态
  631. checkChangeLightStatusSuccess(
  632. checkParams: any,
  633. type: any,
  634. id: any,
  635. value: any,
  636. index: any
  637. ) {
  638. // 轮询查询灯的状态
  639. getStatusHttp(checkParams).then((res) => {
  640. const resData: any = res;
  641. const checkData: any = proxyData.judgeChangeResponeseSuccess(resData);
  642. proxyData.getTimeLampStatus(checkData, type, id, value, index);
  643. });
  644. },
  645. // 灯灯接口清除定时器
  646. clearLightStatusTimer() {
  647. clearTimeout(proxyData.lightsStatusTimer);
  648. proxyData.lightsStatusTimer = null;
  649. },
  650. // 定时刷新接口
  651. startLightsStatusTimer(timerLen: any = 2000) {
  652. proxyData.clearLightStatusTimer();
  653. proxyData.lightsStatusTimer = setTimeout(() => {
  654. proxyData.clearLightStatusTimer();
  655. proxyData.getLampList();
  656. }, timerLen);
  657. },
  658. });
  659. const isShowChildLight: any = computed(() => {
  660. return proxyData.lampList.length && proxyData.lampList.length > 1;
  661. });
  662. // onDeactivated(()=>{
  663. // destroyWatch()
  664. // })
  665. watch(
  666. [() => props, () => props.spaceId],
  667. (newProps: any, oldProps: any) => {
  668. // debugger
  669. if (newProps[0]) {
  670. proxyData.showLight = newProps[0].showLight;
  671. proxyData.userIsControl = newProps[0].userIsControl;
  672. proxyData.controlMode = newProps[0].controlMode;
  673. proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
  674. proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList;
  675. }
  676. if (newProps[1] && oldProps[1] && newProps[1] != oldProps[1]) {
  677. // 空间id改变的重新获取值调用接口
  678. console.log("灯模块的spaceId变化了");
  679. // 清除原始数据
  680. proxyData.clearLightStatusTimer();
  681. proxyData.showFlag = false;
  682. proxyData.lampList = [];
  683. proxyData.spaceId = newProps[1];
  684. proxyData.getLampList();
  685. }
  686. },
  687. {
  688. deep: true,
  689. immediate: true,
  690. }
  691. );
  692. onBeforeUnmount(() => {
  693. console.log("灯的组件销毁了--");
  694. proxyData.clearLightStatusTimer();
  695. });
  696. onMounted(() => {
  697. // proxyData.clearLightStatusTimer();
  698. proxyData.getLampList();
  699. nextTick(() => {
  700. setTimeout(() => {
  701. proxyData.endBoxSwiper();
  702. proxyData.setBarNowPerstion();
  703. }, 3000);
  704. });
  705. });
  706. return {
  707. isShowChildLight,
  708. ...toRefs(proxyData),
  709. };
  710. },
  711. });
  712. </script>
  713. <style lang="scss" scoped>
  714. .light {
  715. width: 100%;
  716. background: #ffffff;
  717. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  718. border-radius: 25px;
  719. margin: 15px 0px;
  720. }
  721. .light-main {
  722. padding-left: 20px;
  723. padding-bottom: 10px;
  724. padding-top: 10px;
  725. }
  726. .floor-top {
  727. padding: 20px;
  728. .top-box {
  729. display: flex;
  730. justify-content: space-between;
  731. padding-bottom: 20px;
  732. .top-left {
  733. span {
  734. display: block;
  735. &:nth-child(1) {
  736. font-family: "PingFang SC";
  737. font-style: normal;
  738. font-weight: 600;
  739. font-size: 16px;
  740. line-height: 22px;
  741. color: #4d5262;
  742. }
  743. &:nth-child(2) {
  744. padding-top: 4px;
  745. font-family: "Persagy";
  746. font-style: normal;
  747. font-weight: 400;
  748. font-size: 32px;
  749. line-height: 39px;
  750. color: #1b2129;
  751. sup {
  752. font-family: "Mulish";
  753. font-style: normal;
  754. font-weight: 400;
  755. font-size: 12px;
  756. line-height: 15px;
  757. color: #c4c4c4;
  758. }
  759. }
  760. }
  761. }
  762. .top-right {
  763. width: 106px;
  764. height: 62px;
  765. img {
  766. width: 106px;
  767. height: 62px;
  768. }
  769. }
  770. }
  771. .top-switch {
  772. display: flex;
  773. justify-content: space-between;
  774. // padding-bottom: 15px;
  775. .top-nav {
  776. height: 28px;
  777. line-height: 28px;
  778. border-radius: 21px;
  779. background: #f1f4f6;
  780. span {
  781. box-sizing: border-box;
  782. display: inline-block;
  783. font-family: "PingFang SC";
  784. font-style: normal;
  785. font-weight: 400;
  786. font-size: 14px;
  787. padding: 5px 8px;
  788. height: 28px;
  789. line-height: 14px;
  790. color: #424c59;
  791. &:nth-child(1) {
  792. border: 1px solid #e1e5eb;
  793. border-radius: 21px;
  794. }
  795. &:nth-child(2) {
  796. // padding-left: 0px;
  797. }
  798. }
  799. .nav-active {
  800. background: #fff;
  801. }
  802. }
  803. .switch-btn {
  804. margin-top: 0;
  805. }
  806. }
  807. }
  808. .air-control {
  809. padding: 10px;
  810. border-top: 1px solid #e8ecf0;
  811. .control-box {
  812. display: flex;
  813. justify-content: space-between;
  814. }
  815. .volume-box {
  816. padding: 10px;
  817. color: #c4c4c4;
  818. font-size: 12px;
  819. .text {
  820. padding-top: 5px;
  821. font-style: normal;
  822. font-weight: 600;
  823. font-size: 11px;
  824. }
  825. .number {
  826. span {
  827. display: inline-block;
  828. vertical-align: middle;
  829. color: #c4c4c4;
  830. padding-right: 5px;
  831. }
  832. .number-active {
  833. font-family: "Montserrat";
  834. font-style: normal;
  835. font-weight: 500;
  836. font-size: 22px;
  837. line-height: 24px;
  838. color: #4d5262 !important;
  839. }
  840. }
  841. .model {
  842. font-size: 14px;
  843. color: #1f2429;
  844. }
  845. }
  846. .volume-icon {
  847. .icon-item {
  848. position: relative;
  849. display: inline-block;
  850. width: 42px;
  851. height: 42px;
  852. background: rgba(196, 196, 196, 0.2);
  853. border-radius: 50%;
  854. img {
  855. width: 20px;
  856. height: 20px;
  857. position: absolute;
  858. left: 50%;
  859. top: 50%;
  860. transform: translate(-50%, -50%);
  861. }
  862. &:nth-child(2) {
  863. margin-left: 10px;
  864. margin-right: 10px;
  865. }
  866. span {
  867. font-size: 12px;
  868. color: #000000;
  869. position: absolute;
  870. left: 50%;
  871. top: 50%;
  872. transform: translate(-50%, -50%) scale(0.8);
  873. }
  874. }
  875. }
  876. .temp-text {
  877. height: 20px;
  878. line-height: 20px;
  879. font-family: "Montserrat";
  880. font-style: normal;
  881. font-weight: 500;
  882. font-size: 11px;
  883. color: #c4c4c4;
  884. padding: 0 5px;
  885. }
  886. .temp-slider {
  887. position: relative;
  888. display: flex;
  889. height: 22px;
  890. flex: 1;
  891. padding: 0 32px;
  892. background: linear-gradient(
  893. 270deg,
  894. #ffbab6 0%,
  895. #ffe7d1 29.05%,
  896. #f1efff 62%,
  897. #c8d6ff 100%
  898. );
  899. border-radius: 16px;
  900. .temp-left,
  901. .temp-right {
  902. position: absolute;
  903. top: 50%;
  904. transform: translateY(-50%);
  905. font-family: "Persagy";
  906. font-style: normal;
  907. font-weight: 400;
  908. font-size: 12px;
  909. line-height: 22px;
  910. text-align: right;
  911. color: #626c78;
  912. }
  913. .temp-left {
  914. left: 0px;
  915. padding-left: 8px;
  916. }
  917. .temp-right {
  918. right: 0px;
  919. padding-right: 8px;
  920. }
  921. .slider-bar {
  922. position: absolute;
  923. width: 25px;
  924. left: 0;
  925. bottom: -2px;
  926. z-index: 333;
  927. .bar-temp {
  928. padding-bottom: 6px;
  929. font-family: "Persagy";
  930. font-style: normal;
  931. font-weight: 400;
  932. font-size: 12px;
  933. line-height: 14px;
  934. color: #626c78;
  935. }
  936. .bar-circle {
  937. width: 25px;
  938. height: 25px;
  939. background: #fff;
  940. border-radius: 50%;
  941. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
  942. 0px 4px 10px rgba(0, 0, 0, 0.07);
  943. border-radius: 21px;
  944. z-index: 444;
  945. }
  946. }
  947. }
  948. .control-text {
  949. font-style: normal;
  950. font-weight: 600;
  951. font-size: 11px;
  952. line-height: 15px;
  953. color: #c4c4c4;
  954. padding: 10px 0 0 10px;
  955. }
  956. }
  957. .air-control-padding {
  958. padding: 30px 20px;
  959. // padding-top: 40px;
  960. }
  961. .line {
  962. border-top: 1px solid #e8ecf0;
  963. margin-bottom: 16px;
  964. }
  965. .light-main-control {
  966. padding-bottom: 15px;
  967. padding-left: 20px;
  968. padding-right: 15px;
  969. // line-height: 36px;
  970. display: flex;
  971. justify-content: space-between;
  972. text-align: right;
  973. div {
  974. width: 36px;
  975. }
  976. .main-color {
  977. width: 36px;
  978. height: 36px;
  979. // line-height: 36px;
  980. text-align: center;
  981. border-radius: 50%;
  982. background: #f7f9fa;
  983. img {
  984. width: 20px;
  985. height: 20px;
  986. margin-top: 8px;
  987. }
  988. }
  989. .switch-btn {
  990. margin-top: 6px;
  991. margin-right: 12px;
  992. }
  993. }
  994. .light-desc {
  995. padding-top: 10px;
  996. // padding-left: 5px;
  997. font-family: PingFang SC;
  998. font-size: 16px;
  999. line-height: 19px;
  1000. color: #4d5262;
  1001. }
  1002. .light-right {
  1003. position: relative;
  1004. text-align: center;
  1005. .switch-box {
  1006. padding-top: 20px;
  1007. padding-right: 15px;
  1008. span {
  1009. display: inline-block;
  1010. font-family: "PingFang SC";
  1011. font-style: normal;
  1012. font-weight: 400;
  1013. font-size: 14px;
  1014. color: #2e3742;
  1015. margin-left: 20px;
  1016. // width: 60px;
  1017. height: 32px;
  1018. line-height: 32px;
  1019. padding: 0 15px;
  1020. background: #f1f4f6;
  1021. border-radius: 21px;
  1022. }
  1023. .switch-item {
  1024. &:hover {
  1025. background: #e8ecf0;
  1026. }
  1027. &:active {
  1028. background: #e8ecf0;
  1029. }
  1030. }
  1031. }
  1032. img {
  1033. //width: 98px;
  1034. height: 100px;
  1035. }
  1036. .switch-btn {
  1037. position: absolute;
  1038. right: -20px;
  1039. bottom: 20px;
  1040. }
  1041. }
  1042. .light-title {
  1043. font-family: PingFang SC;
  1044. padding-left: 5px;
  1045. font-size: 16px;
  1046. line-height: 19px;
  1047. color: #4d5262;
  1048. flex: none;
  1049. order: 0;
  1050. flex-grow: 0;
  1051. margin: 5px 0px;
  1052. }
  1053. .light-status {
  1054. font-family: PingFang SC;
  1055. padding-left: 5px;
  1056. font-size: 12px;
  1057. line-height: 16px;
  1058. color: #c4c4c4;
  1059. flex: none;
  1060. order: 1;
  1061. flex-grow: 0;
  1062. margin: 15px 0px;
  1063. }
  1064. .show-all {
  1065. font-family: "PingFang SC";
  1066. font-style: normal;
  1067. font-weight: 400;
  1068. font-size: 12px;
  1069. line-height: 17px;
  1070. padding-bottom: 15px;
  1071. padding-top: 5px;
  1072. color: #cccccc;
  1073. text-align: center;
  1074. .light-icon {
  1075. font-size: 12px;
  1076. padding-right: 10px;
  1077. }
  1078. }
  1079. .line {
  1080. border-top: 1px solid #e8ecf0;
  1081. margin-top: 4px;
  1082. margin-bottom: 16px;
  1083. }
  1084. .light-box {
  1085. padding: 0 16px;
  1086. font-size: 0;
  1087. }
  1088. .light-control {
  1089. display: inline-block;
  1090. width: 49%;
  1091. vertical-align: middle;
  1092. background: #f7f9fa;
  1093. border-radius: 16px;
  1094. padding-right: 16px;
  1095. padding-left: 16px;
  1096. padding-top: 13px;
  1097. padding-bottom: 12px;
  1098. margin-bottom: 12px;
  1099. &:nth-child(2n - 1) {
  1100. margin-right: 2%;
  1101. }
  1102. .control-top {
  1103. display: flex;
  1104. padding-bottom: 26px;
  1105. justify-content: space-between;
  1106. .control-temp {
  1107. vertical-align: middle;
  1108. span {
  1109. display: block;
  1110. font-family: "Persagy";
  1111. font-style: normal;
  1112. font-weight: 400;
  1113. font-size: 22px;
  1114. line-height: 22px;
  1115. color: #1b144e;
  1116. &:nth-child(1) {
  1117. margin-bottom: 4px;
  1118. sup {
  1119. width: 12px;
  1120. height: 15px;
  1121. font-family: "Mulish";
  1122. font-style: normal;
  1123. font-weight: 400;
  1124. font-size: 12px;
  1125. line-height: 15px;
  1126. color: #c4c4c4;
  1127. }
  1128. }
  1129. &:nth-child(2) {
  1130. font-family: "PingFang SC";
  1131. font-style: normal;
  1132. font-weight: 400;
  1133. font-size: 12px;
  1134. line-height: 17px;
  1135. color: #c4c9cf;
  1136. }
  1137. }
  1138. }
  1139. .child-switch {
  1140. display: inline-block;
  1141. vertical-align: middle;
  1142. }
  1143. }
  1144. .control-bottom {
  1145. display: flex;
  1146. justify-content: space-between;
  1147. .control-title {
  1148. font-weight: 500;
  1149. font-family: PingFang SC;
  1150. font-size: 16px;
  1151. line-height: 20px;
  1152. color: #4d5262;
  1153. }
  1154. img {
  1155. width: 20px;
  1156. height: 20px;
  1157. cursor: pointer;
  1158. }
  1159. }
  1160. }
  1161. </style>
  1162. <style class="style" lang="scss">
  1163. .light {
  1164. .van-loading__spinner {
  1165. color: $elActiveColor !important;
  1166. }
  1167. .van-switch__loading {
  1168. top: 0;
  1169. left: 0;
  1170. width: 100%;
  1171. height: 100%;
  1172. line-height: 1;
  1173. }
  1174. .van-switch--disabled {
  1175. opacity: 0.5;
  1176. }
  1177. }
  1178. </style>