index.vue 23 KB

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