index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820
  1. <template>
  2. <div class="light" v-if="showLight && lampList && lampList.length">
  3. <!--如果有子设备-->
  4. <div class="light-top">
  5. <div class="light-desc">
  6. <p class="light-title">
  7. {{ isShowChildLight ? "光照" : lampList[0].localName }}
  8. </p>
  9. <p :class="isShowChildLight ? 'light-status' : 'light-status'">
  10. {{ lampSw ? "照明已开启" : "照明已关闭" }}
  11. </p>
  12. </div>
  13. <div class="light-right">
  14. <div class="switch-box" v-if="isShowChildLight">
  15. <span class="switch-item" @click="eqChange('allLamp', true, 0)"
  16. >全开</span
  17. >
  18. <span class="switch-item" @click="eqChange('allLamp', false, 0)"
  19. >全关</span
  20. >
  21. </div>
  22. <img :src="lightImg" alt="" v-if="!isShowChildLight" />
  23. </div>
  24. </div>
  25. <div class="light-main-control" v-if="!isShowChildLight">
  26. <div
  27. class="main-color"
  28. v-if="lampList[0].bright || lampList[0].colorTemperature"
  29. >
  30. <img
  31. :src="lightColorImg"
  32. @click="showLightColorCtrol(lampList[0])"
  33. alt=""
  34. />
  35. </div>
  36. <div v-else></div>
  37. <Switch
  38. v-if="!showFlag"
  39. :size="23"
  40. :disabled="!userIsControl"
  41. v-model="lampSw"
  42. @click="eqChange('allLamp', '', 0)"
  43. inactive-color="rgba(196, 196, 196, 0.4)"
  44. class="switch-btn"
  45. />
  46. </div>
  47. <!--灯控制按钮-->
  48. <div class="light-box" v-if="isShowChildLight">
  49. <template v-for="(item, index) in lampList" :key="item.id">
  50. <div
  51. class="light-control"
  52. @click="showLightColorCtrol(item)"
  53. v-if="showFlag ? index < lampList.length : index < 2"
  54. >
  55. <div class="control-top">
  56. <img :src="item.switch ? item.imgOpen : item.imgClose" alt="" />
  57. <Switch
  58. active-color="$elActiveColor"
  59. :disabled="!userIsControl"
  60. v-model="item.switch"
  61. :loading="item.loading"
  62. size="14px"
  63. @click.stop="eqChange('main', item, index)"
  64. inactive-color="rgba(196, 196, 196, 0.2)"
  65. class="child-switch"
  66. />
  67. </div>
  68. <div class="control-bottom">
  69. <div class="control-title">
  70. {{ item.localName }}
  71. </div>
  72. <img
  73. v-if="item.bright || item.colorTemperature"
  74. :style="{ opacity: item.switch ? '1' : '0.3' }"
  75. :src="lightColorImg"
  76. alt=""
  77. />
  78. </div>
  79. </div>
  80. </template>
  81. </div>
  82. <div
  83. class="show-all"
  84. v-if="lampList && lampList.length > 2"
  85. @click.stop="showAll"
  86. >
  87. <van-icon :name="lightIcon" class="light-icon" />
  88. <span v-if="lightIcon == 'arrow-down'">展开更多</span>
  89. <span v-else>收起全部</span>
  90. </div>
  91. </div>
  92. </template>
  93. <script lang="ts">
  94. import {
  95. defineComponent,
  96. computed,
  97. onMounted,
  98. reactive,
  99. toRefs,
  100. getCurrentInstance,
  101. watch,
  102. onBeforeMount,
  103. onUnmounted,
  104. onBeforeUnmount,
  105. } from "vue";
  106. import { Switch, Toast } from "vant";
  107. import { getLampHttp, getStatusHttp, setallLampHttp } from "@/apis/envmonitor";
  108. import { getRelNowTime, parseImgUrl } from "@/utils";
  109. import { type } from "os";
  110. import { onDeactivated } from "vue";
  111. import { AnyMxRecord } from "dns";
  112. export default defineComponent({
  113. props: {
  114. projectId: {
  115. type: String,
  116. default: () => "",
  117. },
  118. controlMode: {
  119. type: Number,
  120. default: () => 0,
  121. },
  122. spaceId: {
  123. type: String,
  124. default: () => "",
  125. },
  126. userIsControl: {
  127. type: Boolean,
  128. default: () => false,
  129. },
  130. forceOverTimeFlag: {
  131. type: Boolean,
  132. default: () => false,
  133. },
  134. showLight: {
  135. type: Boolean,
  136. default: () => false,
  137. },
  138. seviceEquipmentList: {
  139. // 是否走服务定制的设备
  140. type: Array,
  141. default: () => [],
  142. },
  143. },
  144. components: { Switch },
  145. setup(props, contx) {
  146. const lampList: any = [];
  147. let lightsStatusTimer: any = null;
  148. const timeOut: any = null;
  149. const initData: any = [];
  150. let lightParams: any = [];
  151. let statusInterval: any = null;
  152. const proxyData = reactive({
  153. seviceEquipmentList: props.seviceEquipmentList,
  154. showLight: props.showLight,
  155. spaceId: props.spaceId,
  156. controlMode: props.controlMode,
  157. userIsControl: props.userIsControl,
  158. forceOverTimeFlag: props.forceOverTimeFlag,
  159. setStatus: 0,
  160. lightParams: lightParams,
  161. allowSvg: "down_Arrow.svg",
  162. timeOut: timeOut,
  163. lightIcon: "arrow-down",
  164. showFlag: false,
  165. loadingLight: false,
  166. loading: false,
  167. initData: initData,
  168. lampList: lampList,
  169. lightsStatusTimer: lightsStatusTimer,
  170. startCheckLightsTime: 0,
  171. lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
  172. lightImg: parseImgUrl("page-officehome", "lamp_close.png"),
  173. lampSw: false, // 主灯开关
  174. // 点击展示所有的登录
  175. showAll() {
  176. proxyData.showFlag = !proxyData.showFlag;
  177. console.log("proxyData.showFlag==", proxyData.showFlag);
  178. if (proxyData.showFlag) {
  179. proxyData.lightIcon = "arrow-up";
  180. } else {
  181. proxyData.lightIcon = "arrow-down";
  182. }
  183. },
  184. // 点击展示调色和调温弹窗
  185. showLightColorCtrol(item: any, e: any = null) {
  186. console.log(item);
  187. if (item.switch && (item.bright || item.colorTemperature)) {
  188. contx.emit("showLightColorCtrol", item);
  189. }
  190. },
  191. // 检查设备是否执行空间服务时间
  192. checkDeviceIsExeSpaceTime(deviceAll: any = []) {
  193. // debugger
  194. if (proxyData.controlMode !== 1) {
  195. return true;
  196. }
  197. let seviceEquipmentList: any = proxyData.seviceEquipmentList;
  198. let flag: any = false;
  199. for (let i = 0; i < seviceEquipmentList.length; i++) {
  200. for (let j = 0; j < deviceAll.length; j++) {
  201. if (
  202. seviceEquipmentList[i].id == deviceAll[j].id &&
  203. seviceEquipmentList[i].isExeSpaceTime
  204. ) {
  205. flag = true;
  206. break;
  207. }
  208. }
  209. if (flag) {
  210. break;
  211. }
  212. }
  213. return flag;
  214. },
  215. // 获取灯的状态
  216. getLampList() {
  217. getLampHttp({ spaceId: proxyData.spaceId })
  218. .then((res) => {
  219. const resData: any = res;
  220. if (!proxyData.setStatus) {
  221. // console.log("灯的状态修改--");
  222. if (resData && resData.result == "success") {
  223. let content = resData?.content ?? [];
  224. let lampOpen = false; // 如果有一个开 则总灯开
  225. for (let i = 0; i < content.length; i++) {
  226. content[i].type = "lamp";
  227. if (content[i].lightType == 1) {
  228. content[i].imgOpen = parseImgUrl(
  229. "page-officehome",
  230. "lamp_open.png"
  231. );
  232. content[i].imgClose = parseImgUrl(
  233. "page-officehome",
  234. "lamp_close.png"
  235. );
  236. } else {
  237. content[i].imgOpen = parseImgUrl(
  238. "page-officehome",
  239. "atmLamp_small_open.png"
  240. );
  241. content[i].imgClose = parseImgUrl(
  242. "page-officehome",
  243. "atmLamp_small_close.png"
  244. );
  245. }
  246. content[i].switch = content[i].runStatus ? true : false;
  247. if (content[i].runStatus) {
  248. lampOpen = true;
  249. }
  250. content[i].loading = false;
  251. }
  252. proxyData.initData = JSON.parse(JSON.stringify(content)); // 灯的数据
  253. proxyData.lampSw = lampOpen; // 主灯开关
  254. proxyData.lampList = content;
  255. proxyData.lightImg = proxyData.lampSw
  256. ? parseImgUrl("page-officehome", "lamp_open.png")
  257. : parseImgUrl("page-officehome", "lamp_close.png");
  258. if (content[0]) {
  259. if (content[0].lightType !== 1) {
  260. proxyData.lightImg = proxyData.lampSw
  261. ? parseImgUrl("page-officehome", "atmLamp_small_open.png")
  262. : parseImgUrl(
  263. "page-officehome",
  264. "atmLamp_small_close.png"
  265. );
  266. }
  267. }
  268. }
  269. }
  270. // console.log("执行了----====");
  271. proxyData.startLightsStatusTimer();
  272. })
  273. .catch(() => {
  274. proxyData.startLightsStatusTimer();
  275. });
  276. },
  277. // 调整灯
  278. eqChange(type: any, item: any, index: any) {
  279. if (proxyData.userIsControl) {
  280. // debugger
  281. if (type === "allLamp") {
  282. let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime(
  283. proxyData.lampList
  284. );
  285. if (item !== "") {
  286. proxyData.lampSw = item; // 点击全开和全关的时候item动态传值true或者false
  287. }
  288. // debugger
  289. if (
  290. proxyData.forceOverTimeFlag &&
  291. proxyData.lampSw &&
  292. isExeSpaceTime
  293. ) {
  294. // 强制加班开灯
  295. contx.emit("triggerWork", 3);
  296. return;
  297. }
  298. // 总开关按钮所有灯
  299. // 当前要执行的灯的操作
  300. proxyData.loading = true;
  301. proxyData.loadingLight = true;
  302. proxyData.lightImg = proxyData.lampSw
  303. ? parseImgUrl("page-officehome", "lamp_open.png")
  304. : parseImgUrl("page-officehome", "lamp_close.png");
  305. const statusFlag = proxyData.lampSw;
  306. // 瞬间修改状态
  307. proxyData.setStatus = 15; // 点击后状态重新计算
  308. proxyData.updateAllLampStatus(statusFlag);
  309. proxyData.setLamp(type, "", statusFlag, 0); // 调接口
  310. } else {
  311. let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime([
  312. item,
  313. ]);
  314. debugger;
  315. if (proxyData.forceOverTimeFlag && item.switch && isExeSpaceTime) {
  316. // 强制加班开灯
  317. contx.emit("triggerWork", 3, item);
  318. return;
  319. }
  320. //当前要执行的灯的操作
  321. // 按钮loading
  322. item.loading = true;
  323. const statusFlag: any = item.switch;
  324. let id = item.id;
  325. proxyData.setStatus = 15;
  326. proxyData.updateLampStatus(item, statusFlag);
  327. proxyData.setLamp(type, id, statusFlag, index, item); // 调接口
  328. }
  329. } else {
  330. Toast("您没有当前空间的控制权限!");
  331. }
  332. },
  333. // 定时查看灯的状态是否需要更新
  334. statusInterval: statusInterval,
  335. setStatusNum() {
  336. clearInterval(proxyData.statusInterval);
  337. proxyData.statusInterval = setInterval(() => {
  338. proxyData.setStatus--;
  339. if (proxyData.setStatus == 1) {
  340. proxyData.setStatus = 0;
  341. clearInterval(proxyData.statusInterval);
  342. }
  343. }, 1000);
  344. },
  345. // 控制灯的接口
  346. setLamp(
  347. type: string,
  348. id: any,
  349. statusFlag: any,
  350. index: any,
  351. item: any = null
  352. ) {
  353. let params: any = [];
  354. if (type === "allLamp") {
  355. for (let i = 0; i < proxyData.initData.length; i++) {
  356. proxyData.initData[i].switch = statusFlag;
  357. }
  358. params = proxyData.initData;
  359. } else {
  360. params = [
  361. {
  362. id: id,
  363. switch: statusFlag,
  364. },
  365. ];
  366. }
  367. proxyData.lightParams = params;
  368. // 调服务端的接口像后台发送灯的操作的指令
  369. setallLampHttp(params)
  370. .then((res) => {
  371. const resData: any = res;
  372. // set成功后15s更新灯的状态
  373. proxyData.setStatusNum();
  374. if (item) {
  375. item.loading = false;
  376. }
  377. if (resData.result === "success") {
  378. // const checkData: any = proxyData.judgeChangeResponeseSuccess(resData)
  379. // proxyData.getTimeLampStatus(checkData, type, id, statusFlag, index)
  380. } else {
  381. proxyData.initLampLoading();
  382. }
  383. })
  384. .catch((error: any) => {
  385. // set成功后15s更新灯的状态
  386. proxyData.setStatusNum();
  387. if (item) {
  388. item.loading = false;
  389. }
  390. // console.log(error)
  391. Toast("连接异常,请检查网络!");
  392. });
  393. },
  394. // 报错后关闭灯的loading
  395. initLampLoading() {
  396. proxyData.loadingLight = false;
  397. proxyData.lampList.map((item: any) => {
  398. item.loading = false;
  399. });
  400. },
  401. //手动修改灯的状态
  402. updateAllLampStatus(statusFlag: any) {
  403. proxyData.lampSw = statusFlag;
  404. for (let i = 0; i < proxyData.lampList.length; i++) {
  405. proxyData.lampList[i].switch = statusFlag;
  406. // if (proxyData.lampList[i].type == 'lamp') {
  407. // }
  408. }
  409. },
  410. // 单个灯的状态修改
  411. updateLampStatus(item: any, statusFlag: any) {
  412. item.switch = statusFlag;
  413. },
  414. // 轮询查看状态
  415. getTimeLampStatus(
  416. checkData: any,
  417. type: any,
  418. id: any,
  419. statusFlag: any,
  420. index: any
  421. ) {
  422. if (checkData["success"] && checkData["success"].length) {
  423. if (type === "allLamp") {
  424. // 点击主灯按钮
  425. proxyData.updateAllLampLoading(checkData["success"]); // 所有灯
  426. } else {
  427. // 当个的时候修改loading的状态
  428. proxyData.updateLampLoading(index);
  429. }
  430. proxyData.getLampList();
  431. }
  432. if (checkData["processing"] && checkData["processing"].length) {
  433. let checkParams: any = proxyData.lightParams;
  434. let processArr: any = checkData["processing"];
  435. let params: any = [];
  436. processArr.map((item: any) => {
  437. let obj: any = {
  438. id: item.id,
  439. orderSeqNum: item.orderSeqNum,
  440. };
  441. for (let i = 0; i < checkParams.length; i++) {
  442. if (item.id === checkParams[i].id) {
  443. obj.switch = checkParams[i].switch;
  444. break;
  445. }
  446. }
  447. params.push(obj);
  448. });
  449. proxyData.checkChangeLightStatusSuccess(
  450. params,
  451. type,
  452. id,
  453. statusFlag,
  454. index
  455. );
  456. }
  457. if (checkData["error"] && checkData["error"].length) {
  458. if (type === "allLamp") {
  459. // 点击主灯按钮
  460. proxyData.updateAllLampLoading(checkData["error"]); // 所有灯
  461. } else {
  462. // 当个的时候修改loading的状态
  463. proxyData.updateLampLoading(index);
  464. }
  465. }
  466. },
  467. // 查看指令是否成功完成
  468. judgeChangeResponeseSuccess(resData: any) {
  469. let data: any = resData?.content ?? [];
  470. let processingArr: any = [];
  471. let successArr: any = [];
  472. let errorArr: any = [];
  473. for (let i = 0; i < data.length; i++) {
  474. let item: any = data[i];
  475. if ((item.result = "success")) {
  476. if (item.state === 200 && item.exeResult === "success") {
  477. successArr.push(item);
  478. } else if (
  479. (item.state === 200 && item.exeResult === "processing:rcvd") ||
  480. (item.state === 202 && !item.exeResult)
  481. ) {
  482. processingArr.push(item);
  483. } else {
  484. errorArr.push(item);
  485. }
  486. } else {
  487. errorArr.push(item);
  488. }
  489. }
  490. let obj: any = {
  491. success: successArr,
  492. processing: processingArr,
  493. error: errorArr,
  494. };
  495. return obj;
  496. },
  497. // 操作成功后更新所有灯的真实状态
  498. updateAllLampLoading(arr: any) {
  499. for (let i = 0; i < proxyData.lampList.length; i++) {
  500. if (proxyData.lampList[i].type == "lamp") {
  501. arr.map((item: any) => {
  502. if (proxyData.lampList[i].id === item.id) {
  503. proxyData.lampList[i].loading = false;
  504. }
  505. });
  506. }
  507. }
  508. let loadingLen = proxyData.lampList.filter((item: any) => {
  509. return item.loading;
  510. });
  511. if (loadingLen.length === 0) {
  512. proxyData.loadingLight = false;
  513. }
  514. },
  515. // 动态切换主灯的状态
  516. updateLampLoading(index: any) {
  517. proxyData.lampList[index].loading = false;
  518. },
  519. // 灯的指令完成后更新状态
  520. checkChangeLightStatusSuccess(
  521. checkParams: any,
  522. type: any,
  523. id: any,
  524. value: any,
  525. index: any
  526. ) {
  527. // 轮询查询灯的状态
  528. getStatusHttp(checkParams).then((res) => {
  529. const resData: any = res;
  530. const checkData: any = proxyData.judgeChangeResponeseSuccess(resData);
  531. proxyData.getTimeLampStatus(checkData, type, id, value, index);
  532. });
  533. },
  534. // 灯灯接口清除定时器
  535. clearLightStatusTimer() {
  536. clearTimeout(proxyData.lightsStatusTimer);
  537. proxyData.lightsStatusTimer = null;
  538. },
  539. // 定时刷新接口
  540. startLightsStatusTimer(timerLen: any = 15000) {
  541. let nowTime: any = getRelNowTime();
  542. if (timerLen == 15000 && nowTime < "070000" && nowTime > "200000") {
  543. timerLen = 300000;
  544. }
  545. proxyData.clearLightStatusTimer();
  546. proxyData.lightsStatusTimer = setTimeout(() => {
  547. proxyData.clearLightStatusTimer();
  548. proxyData.getLampList();
  549. }, timerLen);
  550. },
  551. });
  552. const isShowChildLight: any = computed(() => {
  553. return proxyData.lampList.length && proxyData.lampList.length > 1;
  554. });
  555. // onDeactivated(()=>{
  556. // destroyWatch()
  557. // })
  558. watch(
  559. [() => props, () => props.spaceId],
  560. (newProps: any, oldProps: any) => {
  561. // debugger
  562. if (newProps[0]) {
  563. proxyData.showLight = newProps[0].showLight;
  564. proxyData.userIsControl = newProps[0].userIsControl;
  565. proxyData.controlMode = newProps[0].controlMode;
  566. proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
  567. proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList;
  568. }
  569. if (newProps[1] && oldProps[1] && newProps[1] != oldProps[1]) {
  570. // 空间id改变的重新获取值调用接口
  571. proxyData.clearLightStatusTimer();
  572. proxyData.showFlag = false;
  573. proxyData.lampList = [];
  574. proxyData.spaceId = newProps[1];
  575. proxyData.getLampList();
  576. }
  577. },
  578. {
  579. deep: true,
  580. immediate: true,
  581. }
  582. );
  583. onBeforeUnmount(() => {
  584. console.log("灯的组件销毁了--");
  585. proxyData.clearLightStatusTimer();
  586. });
  587. onMounted(() => {
  588. // proxyData.clearLightStatusTimer();
  589. proxyData.getLampList();
  590. });
  591. return {
  592. isShowChildLight,
  593. ...toRefs(proxyData),
  594. };
  595. },
  596. });
  597. </script>
  598. <style lang="scss" scoped>
  599. .light {
  600. width: 100%;
  601. background: #ffffff;
  602. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  603. border-radius: 25px;
  604. margin: 15px 0px;
  605. }
  606. .light-main {
  607. padding-left: 20px;
  608. padding-bottom: 10px;
  609. padding-top: 10px;
  610. }
  611. .light-top {
  612. padding-left: 20px;
  613. // padding-bottom: 14px;
  614. // padding-top: 10px;
  615. display: flex;
  616. justify-content: space-between;
  617. }
  618. .light-main-control {
  619. padding-bottom: 16px;
  620. padding-left: 20px;
  621. padding-right: 20px;
  622. // line-height: 36px;
  623. display: flex;
  624. justify-content: space-between;
  625. text-align: right;
  626. div {
  627. width: 36px;
  628. }
  629. .main-color {
  630. width: 36px;
  631. height: 36px;
  632. // line-height: 36px;
  633. text-align: center;
  634. border-radius: 50%;
  635. background: #f7f9fa;
  636. img {
  637. width: 20px;
  638. height: 20px;
  639. margin-top: 8px;
  640. }
  641. }
  642. .switch-btn {
  643. margin-top: 6px;
  644. // margin-right: 12px;
  645. }
  646. }
  647. .light-desc {
  648. padding-top: 24px;
  649. font-family: "PingFang SC";
  650. font-size: 16px;
  651. font-weight: 600;
  652. line-height: 22px;
  653. letter-spacing: 0;
  654. text-align: left;
  655. }
  656. .light-right {
  657. position: relative;
  658. text-align: center;
  659. .switch-box {
  660. padding-top: 33px;
  661. padding-right: 15px;
  662. span {
  663. display: inline-block;
  664. font-family: "PingFang SC";
  665. font-style: normal;
  666. font-weight: 400;
  667. font-size: 14px;
  668. color: #2e3742;
  669. margin-left: 20px;
  670. // width: 60px;
  671. height: 32px;
  672. line-height: 32px;
  673. padding: 0 15px;
  674. background: #f1f4f6;
  675. border-radius: 21px;
  676. }
  677. .switch-item {
  678. &:hover {
  679. background: #e8ecf0;
  680. }
  681. &:active {
  682. background: #e8ecf0;
  683. }
  684. }
  685. }
  686. img {
  687. //width: 98px;
  688. height: 100px;
  689. }
  690. .switch-btn {
  691. position: absolute;
  692. right: -20px;
  693. bottom: 20px;
  694. }
  695. }
  696. .light-title {
  697. font-family: "PingFang SC";
  698. font-size: 16px;
  699. line-height: 19px;
  700. color: #4d5262;
  701. flex: none;
  702. order: 0;
  703. flex-grow: 0;
  704. }
  705. .light-status {
  706. font-family: "PingFang SC";
  707. font-size: 14px;
  708. font-weight: 400;
  709. line-height: 20px;
  710. padding-top: 8px;
  711. color: rgba(196, 196, 196, 1);
  712. }
  713. .show-all {
  714. font-family: "PingFang SC";
  715. font-style: normal;
  716. font-weight: 400;
  717. font-size: 12px;
  718. line-height: 17px;
  719. padding-bottom: 15px;
  720. // padding-top: 5px;
  721. color: #cccccc;
  722. text-align: center;
  723. .light-icon {
  724. font-size: 12px;
  725. padding-right: 10px;
  726. }
  727. }
  728. .light-box {
  729. padding: 0 12px;
  730. font-size: 0;
  731. padding-top: 14px;
  732. padding-bottom: 8px;
  733. }
  734. .light-control {
  735. display: inline-block;
  736. width: 49%;
  737. vertical-align: middle;
  738. background: #f7f9fa;
  739. border-radius: 16px;
  740. margin-bottom: 12px;
  741. // margin-left: 2%;
  742. &:nth-child(2n - 1) {
  743. margin-right: 2%;
  744. }
  745. .control-top {
  746. display: flex;
  747. padding-right: 16px;
  748. padding-bottom: 12px;
  749. justify-content: space-between;
  750. img {
  751. width: 80px;
  752. height: 70px;
  753. vertical-align: middle;
  754. }
  755. .child-switch {
  756. margin-top: 16px;
  757. display: inline-block;
  758. vertical-align: middle;
  759. }
  760. }
  761. .control-bottom {
  762. display: flex;
  763. justify-content: space-between;
  764. padding-right: 16px;
  765. padding-left: 18px;
  766. padding-bottom: 15px;
  767. .control-title {
  768. font-weight: 500;
  769. font-family: "PingFang SC";
  770. color: #4d5262;
  771. font-size: 16px;
  772. line-height: 20px;
  773. }
  774. img {
  775. width: 20px;
  776. height: 20px;
  777. cursor: pointer;
  778. }
  779. }
  780. }
  781. </style>
  782. <style class="style" lang="scss">
  783. .light {
  784. .van-loading__spinner {
  785. color: $elActiveColor !important;
  786. }
  787. .van-switch__loading {
  788. top: 0;
  789. left: 0;
  790. width: 100%;
  791. height: 100%;
  792. line-height: 1;
  793. }
  794. .van-switch--disabled {
  795. opacity: 0.5;
  796. }
  797. }
  798. </style>