index.vue 24 KB

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