index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895
  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. {{ airData.tempSet ? airData.tempSet : "" }}
  8. <sup v-if="airData.tempSet">℃</sup>
  9. </p>
  10. <!-- <p class="air-model">
  11. <span v-if="modeName">
  12. {{ modeName }}
  13. </span>
  14. <span v-if="airData.tempSet"> {{ airData.tempSet }}℃ </span>
  15. </p> -->
  16. <p class="air-status" v-if="hasAir">
  17. {{ airData.isOpen ? "空调已开启" : "空调已关闭" }}
  18. </p>
  19. <p class="air-loading" v-if="airData.isOpen">
  20. <img
  21. v-if="airData.icon == 1 || airData.icon == 2 || airData.icon == 3"
  22. :src="airRunImg"
  23. alt=""
  24. />
  25. <span>{{ airData.spaceStatus }}</span>
  26. </p>
  27. </div>
  28. <div class="air-right">
  29. <img v-if="airData.airImg" :src="airData.airImg" alt="" />
  30. <van-loading style="padding-top: 20px" v-else />
  31. <Switch
  32. class="switch-btn"
  33. :size="23"
  34. :loading="loadingAir || firstLoadingAir"
  35. :disabled="!userIsControl || loadingAir || firstLoadingAir || disable"
  36. inactive-color="rgba(196, 196, 196, 0.4)"
  37. @click="airChange"
  38. :model-value="airData.isOpen"
  39. v-if="hasAir"
  40. />
  41. </div>
  42. </div>
  43. <!--温度调节-->
  44. <div class="air-control" v-if="userIsControl && airData.isOpen">
  45. <div class="control-title">温度调节</div>
  46. <div class="btn-box">
  47. <div class="control-btn mr20" @click.stop="changeAir(4, 'temp', 'toCold')">
  48. <img :src="parseImgUrl('envmonitor', 'arrow-top.png')" alt="" />
  49. </div>
  50. <div class="control-btn" @click.stop="changeAir(2, 'temp', 'toWarm')">
  51. <img :src="parseImgUrl('envmonitor', 'arrow-down.png')" alt="" />
  52. </div>
  53. </div>
  54. </div>
  55. <div class="air-control" v-if="userIsControl && airData.isOpen && showAirVolumeBtn">
  56. <div class="control-title">风量调节</div>
  57. <div class="btn-box">
  58. <div class="control-btn mr20" @click.stop="changeAir(5, 'wind', 'toWindLow')">
  59. <img class="temp-img" :src="parseImgUrl('envmonitor', 'fengshan.png')" alt="" />
  60. </div>
  61. <div class="control-btn" @click.stop="changeAir(6, 'wind', 'toWindUp')">
  62. <img class="temp-img" :src="parseImgUrl('envmonitor', 'wendu.png')" alt="" />
  63. </div>
  64. </div>
  65. </div>
  66. <!-- 空调反馈 文案 -->
  67. <van-dialog
  68. v-model:show="showDialog"
  69. class="dialog-width"
  70. :show-confirm-button="false"
  71. :show-cancel-button="false"
  72. >
  73. <div class="air-dialog-content">
  74. <div class="dialog-top">
  75. <img
  76. class="img-greey"
  77. :class="
  78. airSetText.toWhere == 'toCold'
  79. ? 'img-blue'
  80. : airSetText.toWhere == 'toWarm'
  81. ? 'img-red'
  82. : ''
  83. "
  84. :src="parseImgUrl('page-officehome', airSetText.nowImg)"
  85. alt=""
  86. />
  87. </div>
  88. <div class="dialog-text">
  89. <div class="air-body-item-num">
  90. <!-- <div class="air-temp-num">{{ temperature }}</div> -->
  91. <!-- <div
  92. class="air-temp-num"
  93. :class="{
  94. 'arrow-cooling': airSetText.toWhere == 'toCold',
  95. 'arrow-warn': airSetText.toWhere == 'toWarm',
  96. }"
  97. >
  98. </div> -->
  99. <div v-if="airSetText.notice" class="air-temp-num">
  100. {{ airSetText.notice }}
  101. </div>
  102. <div v-else class="air-temp-load">
  103. <van-loading type="spinner" />
  104. </div>
  105. <!-- <div v-else class="air-temp-num-load">
  106. <img
  107. style="padding-top: 4px; height: 20px; width: 20px"
  108. :src="parseImgUrl('page-officehome', 'loading.svg')"
  109. />
  110. </div> -->
  111. </div>
  112. <p v-if="airSetText.remark && airSetText.remark.length" class="air-notice">
  113. <span
  114. v-for="(remarkItem, index) in airSetText.remark"
  115. :key="'remark' + index"
  116. >{{ remarkItem }}</span
  117. >
  118. </p>
  119. </div>
  120. <div class="dialog-btns" @click.stop="closeDialog">
  121. <span>确定</span>
  122. </div>
  123. </div>
  124. </van-dialog>
  125. </div>
  126. </template>
  127. <script lang="ts">
  128. import {
  129. defineComponent,
  130. onMounted,
  131. reactive,
  132. toRefs,
  133. computed,
  134. watch,
  135. onUnmounted,
  136. onBeforeMount,
  137. onBeforeUnmount,
  138. } from "vue";
  139. import { Switch, Dialog, Loading, Toast } from "vant";
  140. import {
  141. changeTempHttp,
  142. getEquipmentListHttp,
  143. getFeedbackDocumentsHttp,
  144. } from "@/apis/envmonitor";
  145. import { parseImgUrl } from "@/utils";
  146. import any = jasmine.any;
  147. export default defineComponent({
  148. props: {
  149. temperature: {
  150. // 空调基本信息
  151. type: Number,
  152. default: () => 0,
  153. },
  154. hasAir: {
  155. // 有无空调
  156. type: Boolean,
  157. default: () => false,
  158. },
  159. airVolumes: {
  160. // 风量信息
  161. type: Array,
  162. default: () => [],
  163. },
  164. projectId: {
  165. type: String,
  166. default: () => "",
  167. },
  168. spaceId: {
  169. type: String,
  170. default: () => "",
  171. },
  172. userIsControl: {
  173. type: Boolean,
  174. default: () => false,
  175. },
  176. forceOverTimeFlag: {
  177. type: Boolean,
  178. default: () => false,
  179. },
  180. disable: {
  181. type: Boolean,
  182. default: () => false,
  183. },
  184. },
  185. components: {
  186. Switch,
  187. [Dialog.Component.name]: Dialog.Component,
  188. Loading,
  189. },
  190. setup(props, contx) {
  191. const propsVal = props;
  192. let airData: any = {
  193. avg: "", // 算法调节温度(目标值)
  194. icon: 1, // 固定框文案ID 7 为关机,其它都是开机
  195. spaceStatus: "", // 固定框文案展示
  196. notice: "", // 弹框文案展示
  197. mode: 0, // 模式
  198. tempSet: 0, // 温度
  199. isOpen: false, // 空调开关 true 是开
  200. };
  201. const feedbackTimer: any = null;
  202. const airTimer: any = null;
  203. const domAirOpeen: any = false;
  204. const proxyData = reactive({
  205. loadingAir: false,
  206. distroyFlag: false,
  207. temperature: props.temperature,
  208. userIsControl: props.userIsControl,
  209. forceOverTimeFlag: props.forceOverTimeFlag,
  210. firstLoadingAir: true,
  211. spaceId: props.spaceId,
  212. domAirOpeen: domAirOpeen,
  213. feedbackTimer: feedbackTimer,
  214. parseImgUrl: parseImgUrl,
  215. airData: airData,
  216. modeName: "",
  217. showAirVolumeBtn: false, // 是否展示风量调节按钮
  218. showDialog: false,
  219. airTimer: airTimer,
  220. airSetText: {
  221. // 空调反馈文案
  222. notice: "",
  223. remark: [],
  224. nowImg: "",
  225. toWhere: "",
  226. designTemperature: 0,
  227. },
  228. // 格式化模式
  229. formateModel(model: any) {
  230. if (model) {
  231. if (model === 1) {
  232. proxyData.modeName = "制冷";
  233. } else if (model === 2) {
  234. proxyData.modeName = "制热";
  235. } else if (model === 3) {
  236. proxyData.modeName = "通风";
  237. } else if (model === 4) {
  238. proxyData.modeName = "除湿";
  239. } else {
  240. proxyData.modeName = "";
  241. }
  242. } else {
  243. proxyData.modeName = "";
  244. }
  245. },
  246. // 获取设备类型(ACATVI)
  247. getEquipmentListHttp() {
  248. let params = {
  249. spaceId: proxyData.spaceId,
  250. };
  251. proxyData.showAirVolumeBtn = false;
  252. let flag: any = true;
  253. getEquipmentListHttp(params).then((res) => {
  254. let resData: any = res;
  255. let data: any = resData ? resData.data : [];
  256. if (data && data.length) {
  257. for (let i = 0; i < data.length; i++) {
  258. let item: any = data[i];
  259. if (item.equipmentCategory === "ACATVI") {
  260. // 多联机不展示风量调整
  261. proxyData.showAirVolumeBtn = false;
  262. flag = false;
  263. break;
  264. }
  265. }
  266. if (flag) {
  267. proxyData.showAirVolumeBtn = true;
  268. }
  269. }
  270. });
  271. },
  272. // 定时获取空调状态
  273. getAirInfoToTimer(timerLong: any = 3000) {
  274. if (proxyData.airTimer) {
  275. clearTimeout(proxyData.airTimer);
  276. }
  277. proxyData.airTimer = setTimeout(function () {
  278. if (!proxyData.distroyFlag) {
  279. proxyData.getAirInfo();
  280. }
  281. }, timerLong);
  282. },
  283. // 定时调文案的接口
  284. getFeedbackTimer(btnType: any, id: any) {
  285. clearTimeout(proxyData.airTimer);
  286. proxyData.airTimer = null;
  287. proxyData.feedbackTimer = setTimeout(() => {
  288. proxyData.getAirInfo("feedback", btnType, id, false); // 调节反馈文案
  289. }, 3000);
  290. },
  291. // 关闭空调的按钮点击的loading状态
  292. closeLoading() {
  293. let num: any = 0;
  294. let interval: any = setInterval(() => {
  295. if (num > 15 || proxyData.domAirOpeen === proxyData.airData.isOpen) {
  296. proxyData.loadingAir = false;
  297. clearInterval(interval);
  298. }
  299. num++;
  300. }, 1000);
  301. },
  302. getAirInfo(
  303. type: string = "",
  304. btnType: string = "",
  305. feedbackId: any = "",
  306. isTimer: boolean = true
  307. ) {
  308. let paramObj: any = {
  309. projectId: propsVal.projectId, // 项目id
  310. objectId: proxyData.spaceId, // 空间id
  311. };
  312. if (type === "feedback") {
  313. paramObj.id = feedbackId;
  314. }
  315. console.log("paramObj===");
  316. getFeedbackDocumentsHttp(paramObj)
  317. .then((res) => {
  318. const resData: any = res;
  319. if (type !== "feedback") {
  320. if (resData) {
  321. proxyData.airData = resData;
  322. proxyData.formateModel(proxyData.airData.mode);
  323. contx.emit("updateAirTemp", proxyData.airData.tempSet);
  324. if (proxyData.airData.icon && proxyData.airData.icon === 7) {
  325. proxyData.airData.isOpen = false;
  326. proxyData.airData.airImg = parseImgUrl(
  327. "page-officehome",
  328. "air_close.png"
  329. );
  330. } else {
  331. if (proxyData.airData.icon && proxyData.airData.icon !== 6) {
  332. proxyData.airData.isOpen = true;
  333. proxyData.airData.airImg = parseImgUrl(
  334. "page-officehome",
  335. "openair.png"
  336. );
  337. }
  338. }
  339. }
  340. }
  341. // 弹窗
  342. if (type === "feedback") {
  343. if (resData.notice) {
  344. proxyData.airSetText.notice = resData.notice;
  345. if (resData.remark && resData.remark.length) {
  346. proxyData.airSetText.remark = resData.remark.split("*");
  347. }
  348. if (proxyData.feedbackTimer) {
  349. clearTimeout(proxyData.feedbackTimer); // 拿到反馈文案清除定时器
  350. proxyData.getAirInfoToTimer();
  351. }
  352. } else {
  353. proxyData.getFeedbackTimer(btnType, feedbackId);
  354. }
  355. } else {
  356. proxyData.getAirInfoToTimer();
  357. }
  358. proxyData.firstLoadingAir = false;
  359. })
  360. .catch(() => {
  361. proxyData.getAirInfoToTimer();
  362. proxyData.firstLoadingAir = false;
  363. proxyData.airData.airImg = parseImgUrl("page-officehome", "air_close.png");
  364. });
  365. },
  366. airChange() {
  367. if (props.disable) {
  368. return;
  369. }
  370. // 先不更新状态等确认框弹出后再更新状
  371. if (proxyData.userIsControl) {
  372. if (!proxyData.loadingAir) {
  373. proxyData.airComfir();
  374. } else {
  375. Toast("指令正在下发中,勿重复操作!");
  376. }
  377. } else {
  378. Toast("您没有当前空间的控制权限!");
  379. }
  380. },
  381. // 确认
  382. airComfir() {
  383. const message = proxyData.airData.isOpen ? "要关闭空调吗?" : "要开启空调吗?";
  384. const confirmBtnText = proxyData.airData.isOpen ? "关闭" : "开启";
  385. Dialog.confirm({
  386. cancelButtonText: "取消",
  387. confirmButtonText: confirmBtnText,
  388. confirmButtonColor: "$elActiveColor",
  389. message: message,
  390. })
  391. .then(() => {
  392. // 操作空调
  393. const domAirOpen = !proxyData.airData.isOpen;
  394. if (proxyData.forceOverTimeFlag && domAirOpen) {
  395. //需要强制加班
  396. contx.emit("triggerWork");
  397. return;
  398. }
  399. const itemId = domAirOpen ? 12 : 10; // 12 开启 10关闭
  400. proxyData.domAirOpeen = domAirOpen;
  401. let btnTypeDetail = "";
  402. if (itemId == 12) {
  403. btnTypeDetail = "openAir";
  404. } else {
  405. btnTypeDetail = "closeAir";
  406. }
  407. proxyData.loadingAir = true;
  408. proxyData.closeLoading();
  409. proxyData.changeAir(itemId, "sw", btnTypeDetail);
  410. })
  411. .catch(() => {
  412. // on cancel
  413. });
  414. },
  415. // 切换散会的时候手动关闭空调()
  416. closeScenarioAir() {
  417. proxyData.changeAir(10, "sw", "closeAir");
  418. },
  419. // 更新空调开关状态
  420. updatAirStatus(btnType: string) {
  421. // 开启空调后手动调一下状态更新接口
  422. if (btnType === "sw") {
  423. proxyData.getAirInfo("", "", "", false);
  424. }
  425. },
  426. // 更新
  427. updateAirText(btnType: string, val: any) {
  428. if (btnType !== "sw") {
  429. proxyData.airSetText.designTemperature = val.designTemperature; // 目标温度
  430. proxyData.airSetText.toWhere = val.toWhere;
  431. if (proxyData.airSetText.toWhere == "toCold") {
  432. proxyData.airSetText.nowImg = "dialog_cooling.svg";
  433. } else if (proxyData.airSetText.toWhere == "toWarm") {
  434. proxyData.airSetText.nowImg = "dialog_warmUp.svg";
  435. } else {
  436. proxyData.airSetText.nowImg = "icon_wind.svg";
  437. }
  438. }
  439. },
  440. // 展示空调反馈弹窗¬
  441. showAirConditioning(btnType: string, btnTypeDetail: string) {
  442. // 空调温度和风量调整的时候展示弹窗
  443. if (btnType !== "sw") {
  444. proxyData.showDialog = true;
  445. // 调整空调温度接口
  446. const defaultAirText: any = {
  447. toWhere: btnTypeDetail,
  448. designTemperature: 0,
  449. };
  450. proxyData.updateAirText(btnType, defaultAirText);
  451. }
  452. },
  453. // 关闭弹窗
  454. closeDialog() {
  455. if (proxyData.feedbackTimer) {
  456. clearInterval(proxyData.feedbackTimer); // 拿到反馈文案清除定时器
  457. proxyData.feedbackTimer = null;
  458. }
  459. proxyData.getAirInfoToTimer();
  460. proxyData.showDialog = false;
  461. },
  462. changeAir(itemId: number, btnType: string, btnTypeDetail: string) {
  463. /**
  464. * 缺少的逻辑:
  465. * 1.设备位置判断
  466. * 2.空调温度调整的反馈文案
  467. */
  468. // 温度切换的时候调整文案
  469. proxyData.airSetText.notice = "";
  470. proxyData.airSetText.remark = [];
  471. const paramObj = {
  472. projectId: propsVal.projectId, // 项目id
  473. objectId: proxyData.spaceId, // 空间id
  474. valueType: 1, // 固定为1
  475. itemId: itemId, // 12 开启 10关闭 4 调低温 2 调高温 5 调小风量 6 调大风量
  476. };
  477. // 空调温度和风量调整的时候展示弹窗
  478. proxyData.showAirConditioning(btnType, btnTypeDetail);
  479. changeTempHttp(paramObj)
  480. .then((res) => {
  481. let resData: any = res;
  482. // 开启和关闭空调之后手动
  483. // proxyData.updatAirStatus(btnType)
  484. // 调整温度和风量的时候修改文案
  485. let airText = {
  486. toWhere: btnTypeDetail,
  487. designTemperature: resData.designTemperature,
  488. };
  489. proxyData.updateAirText(btnType, airText);
  490. // 改变温度和风量的时候给弹窗设置文案
  491. if (btnType !== "sw") {
  492. // debugger
  493. if (resData.notice) {
  494. proxyData.airSetText.notice = resData.notice;
  495. if (resData.remark && resData.remark.length) {
  496. proxyData.airSetText.remark = resData.remark.split("*");
  497. }
  498. } else {
  499. proxyData.getFeedbackTimer(btnType, resData.id);
  500. }
  501. }
  502. })
  503. .catch(() => {
  504. proxyData.loadingAir = false;
  505. });
  506. },
  507. });
  508. watch(
  509. [() => props, () => props.spaceId],
  510. (newProps: any, oldProps: any) => {
  511. if (newProps[1] && newProps[1] != oldProps[1]) {
  512. // 空间id改变的重新获取值调用接口
  513. // 定时调空间信息
  514. proxyData.spaceId = newProps[1];
  515. proxyData.distroyFlag = false;
  516. // proxyData.getAirInfoToTimer(0);
  517. proxyData.getAirInfo();
  518. // proxyData.getEquipmentListHttp();
  519. }
  520. if (newProps[0]) {
  521. proxyData.temperature = newProps[0].temperature;
  522. proxyData.userIsControl = newProps[0].userIsControl;
  523. proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
  524. }
  525. },
  526. {
  527. deep: false,
  528. immediate: true,
  529. }
  530. );
  531. onBeforeUnmount(() => {
  532. proxyData.distroyFlag = true;
  533. if (proxyData.airTimer) {
  534. clearTimeout(proxyData.airTimer);
  535. proxyData.airTimer = null;
  536. }
  537. if (proxyData.feedbackTimer) {
  538. clearTimeout(proxyData.feedbackTimer);
  539. proxyData.feedbackTimer = null;
  540. }
  541. });
  542. onMounted(() => {
  543. // 获取空调信息
  544. proxyData.firstLoadingAir = true;
  545. proxyData.distroyFlag = false;
  546. proxyData.getAirInfo();
  547. proxyData.getEquipmentListHttp();
  548. });
  549. const airRunImg = computed(() => {
  550. let imgStr: string = "";
  551. switch (proxyData.airData.icon) {
  552. case 1:
  553. imgStr = parseImgUrl("page-officehome", "temp-keep.png");
  554. break;
  555. case 2:
  556. imgStr = parseImgUrl("page-officehome", "temp_cold.svg");
  557. break;
  558. case 3:
  559. imgStr = parseImgUrl("page-officehome", "temp_sun.png");
  560. break;
  561. default:
  562. imgStr = "";
  563. break;
  564. }
  565. return imgStr;
  566. });
  567. return {
  568. airRunImg,
  569. ...toRefs(proxyData),
  570. };
  571. },
  572. });
  573. </script>
  574. <style lang="scss" scoped>
  575. .air {
  576. width: 100%;
  577. background: #ffffff;
  578. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  579. border-radius: 25px;
  580. margin: 15px 0px;
  581. }
  582. .air-top {
  583. padding-left: 20px;
  584. padding-bottom: 10px;
  585. display: flex;
  586. justify-content: space-between;
  587. }
  588. .air-desc {
  589. flex: 1 157px;
  590. padding-top: 10px;
  591. font-family: PingFang SC;
  592. font-size: 16px;
  593. line-height: 19px;
  594. color: #4d5262;
  595. flex: none;
  596. order: 0;
  597. //color: rgba(196, 196, 196, 0.2)
  598. flex-grow: 0;
  599. margin: 5px 0px;
  600. }
  601. .air-right {
  602. position: relative;
  603. width: 157px;
  604. text-align: center;
  605. img {
  606. width: 147px;
  607. height: 110px;
  608. }
  609. .switch-btn {
  610. position: absolute;
  611. z-index: 111;
  612. bottom: 10px;
  613. right: 25px;
  614. }
  615. }
  616. .air-title {
  617. font-family: PingFang SC;
  618. padding-left: 5px;
  619. font-size: 16px;
  620. line-height: 19px;
  621. color: #4d5262;
  622. flex: none;
  623. order: 0;
  624. flex-grow: 0;
  625. margin: 5px 0px;
  626. }
  627. .air-temperature {
  628. display: inline-block;
  629. font-family: "Persagy";
  630. font-style: normal;
  631. font-weight: normal;
  632. font-size: 32px;
  633. line-height: 32px;
  634. flex: none;
  635. order: 0;
  636. flex-grow: 0;
  637. margin: 0px 4px;
  638. sup {
  639. font-family: Mulish;
  640. font-style: normal;
  641. font-weight: 800;
  642. font-size: 12px;
  643. line-height: 15px;
  644. }
  645. }
  646. .air-model {
  647. padding-left: 5px;
  648. display: inline-block;
  649. font-family: "Persagy";
  650. font-style: normal;
  651. font-weight: 400;
  652. font-size: 15px;
  653. line-height: 18px;
  654. color: #c4c4c4;
  655. span {
  656. padding-right: 2px;
  657. }
  658. }
  659. .air-status {
  660. font-family: PingFang SC;
  661. padding-left: 5px;
  662. font-size: 14px;
  663. line-height: 16px;
  664. color: #c4c4c4;
  665. flex: none;
  666. order: 1;
  667. flex-grow: 0;
  668. margin: 10px 0px;
  669. }
  670. .air-loading {
  671. font-family: Roboto;
  672. padding-left: 5px;
  673. font-style: normal;
  674. font-weight: normal;
  675. font-size: 11px;
  676. //line-height: 13px;
  677. color: #c4c4c4;
  678. img {
  679. width: 12px;
  680. height: 12px;
  681. vertical-align: middle;
  682. }
  683. span {
  684. vertical-align: middle;
  685. }
  686. }
  687. .air-control {
  688. display: flex;
  689. justify-content: space-between;
  690. padding: 10px 0;
  691. padding-left: 28px;
  692. padding-right: 15px;
  693. border-top: 1px solid rgba(196, 196, 196, 0.4);
  694. .control-title {
  695. flex: 1;
  696. line-height: 42px;
  697. font-weight: 500;
  698. font-size: 12px;
  699. color: #c4c4c4;
  700. }
  701. .btn-box {
  702. flex: 1;
  703. text-align: right;
  704. }
  705. .control-btn {
  706. display: inline-block;
  707. vertical-align: middle;
  708. width: 42px;
  709. height: 42px;
  710. text-align: center;
  711. border-radius: 50%;
  712. background: rgba(196, 196, 196, 0.2);
  713. img {
  714. width: 13px;
  715. height: 17px;
  716. margin: 0 auto;
  717. margin-top: 12.5px;
  718. }
  719. .temp-img {
  720. width: 20px;
  721. height: 20px;
  722. }
  723. }
  724. }
  725. .dialog-width {
  726. width: 280px !important;
  727. }
  728. .air-dialog-content {
  729. position: relative;
  730. width: 100%;
  731. height: 340px;
  732. .dialog-top {
  733. position: relative;
  734. height: 70px;
  735. background: #f3f3f3;
  736. .img-greey {
  737. background: #c4c4c4;
  738. }
  739. .img-blue {
  740. background: $elActiveColor;
  741. }
  742. .img-red {
  743. background: #e5574f;
  744. }
  745. img {
  746. box-sizing: border-box;
  747. border-radius: 50%;
  748. position: absolute;
  749. left: 50%;
  750. width: 70px;
  751. height: 70px;
  752. padding: 17px;
  753. transform: translateX(-50%);
  754. top: 15px;
  755. }
  756. }
  757. }
  758. .dialog-text {
  759. padding-top: 52px;
  760. text-align: center;
  761. .air-temp-num {
  762. font-family: Persagy;
  763. display: inline-block;
  764. font-size: 24px;
  765. font-weight: 400;
  766. line-height: 29px;
  767. color: rgba(20, 0, 80, 1);
  768. &.arrow-cooling {
  769. color: $elActiveColor;
  770. margin: 0 30px;
  771. margin-bottom: 70px;
  772. }
  773. &.arrow-warn {
  774. color: rgba(229, 87, 79, 1);
  775. margin: 0 30px;
  776. margin-bottom: 70px;
  777. }
  778. }
  779. .air-temp-num-load {
  780. display: inline-block;
  781. }
  782. .air-notice {
  783. padding-top: 10px;
  784. padding-left: 48px;
  785. padding-right: 48px;
  786. text-align: center;
  787. // display: flex;
  788. justify-content: center;
  789. font-family: PingFang SC;
  790. font-size: 15px;
  791. font-weight: 400;
  792. line-height: 21px;
  793. color: rgba(77, 82, 98, 1);
  794. span {
  795. display: block;
  796. padding-bottom: 5px;
  797. }
  798. }
  799. .air-temp-load {
  800. padding-top: 25px;
  801. }
  802. .air-body-item-num {
  803. height: 50px;
  804. }
  805. }
  806. .dialog-btns {
  807. position: absolute;
  808. left: 50%;
  809. bottom: 30px;
  810. transform: translateX(-50%);
  811. text-align: center;
  812. margin: 0 auto;
  813. width: 88px;
  814. height: 46px;
  815. line-height: 1;
  816. color: #4d5262;
  817. background: #ffffff;
  818. border: 1px solid #c4c4c4;
  819. border-radius: 30px;
  820. cursor: pointer;
  821. span {
  822. height: 46px;
  823. line-height: 46px;
  824. display: inline-block;
  825. }
  826. }
  827. </style>
  828. <style lang="scss">
  829. .air-dialog-content {
  830. .van-button_text {
  831. color: $elActiveColor;
  832. }
  833. }
  834. .air {
  835. .van-loading__spinner {
  836. color: $elActiveColor !important;
  837. }
  838. .van-switch__loading {
  839. top: 0;
  840. left: 0;
  841. width: 100%;
  842. height: 100%;
  843. line-height: 1;
  844. }
  845. .van-switch--disabled {
  846. opacity: 0.5;
  847. }
  848. }
  849. </style>