air-hand-card.wpy 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990
  1. <template>
  2. <div class="air-adjust office-card g-fl">
  3. <div class="air-content">
  4. <div class="air-adjust-env">
  5. <div class="air-text">
  6. <span class="envname">空调</span>
  7. <div class="envnum">{{airTemp ? airTemp :'--'}}<span>℃</span></div>
  8. </div>
  9. <div class="air-show-all" v-if="allDevices.length>1&&hasAir && totalBoundPoint.tempSetBound">
  10. <SwitchLR
  11. @commponent-SwitchLR-change="allAirClick"
  12. ></SwitchLR>
  13. </div>
  14. </div>
  15. <div class="air-adjust-btn">
  16. <image
  17. :src="h5StaticPath+ (airData.isOpen?'openair2.png':'air_close2.png')"
  18. alt=""
  19. lazyload
  20. />
  21. </div>
  22. <div
  23. class="air-switch"
  24. v-show="!allAirShow && totalBoundPoint.switchSetBound"
  25. >
  26. <switch
  27. v-if="hasAir && !isACATVA"
  28. :isACATFC="isACATFC"
  29. :seasonType="seasonType"
  30. :isHand="'hand'"
  31. :showWorkTime="showWorkTime"
  32. :checked="airData.isOpen"
  33. :eqTitle="eqTitle"
  34. @component-switch-change="changeZongAir('sw')"
  35. ></switch>
  36. </div>
  37. </div>
  38. <!-- 空调 调节 -->
  39. <div class="air-control-wrap" v-show="!allAirShow&&hasAir&&airData.isOpen">
  40. <div v-if="totalBoundPoint.tempSetBound" class="air-control-item" >
  41. <CardSlider
  42. :cardWidth="cardWidth"
  43. :maxValue="endTemp"
  44. :minValue="startTemp"
  45. :onlyLine="false"
  46. :typeValue="nowTemp"
  47. type="air"
  48. @silder-mouseEnd="ctouchend($event)"
  49. ></CardSlider>
  50. </div>
  51. <div
  52. class="air-control-item item-flex"
  53. v-if="!isACATVA && totalBoundPoint.gearSetBound"
  54. >
  55. <div class="air-control-item-box">
  56. <div class="envnum-common air-envnum-comon">
  57. <span
  58. class="envnum-common-wind"
  59. v-for="(item,index) in windGearArr"
  60. :key="index"
  61. :class="{'windBlack': item == airGear}"
  62. >{{item}}</span>
  63. </div>
  64. <div class="air-common-text change-text">风量调节</div>
  65. </div>
  66. <div class="air-common-switch">
  67. <div
  68. class="switch"
  69. :class="{'disabled':airGear<=1||!airData.isOpen}"
  70. @click="changeZongAir('gear','windLow')"
  71. >
  72. <img src="{{h5StaticPath}}wind_small2.svg" />
  73. </div>
  74. <div
  75. class="switch"
  76. :class="{'disabled':airGear>=3||!airData.isOpen}"
  77. @click="changeZongAir('gear','windUp')"
  78. >
  79. <img src="{{h5StaticPath}}wind_big2.svg" />
  80. </div>
  81. <div
  82. class="switch"
  83. :class="{'yell': isAutoGear==1,'disabled':!airData.isOpen}"
  84. @click="changeZongAir('gear','auto')"
  85. >
  86. <img src="{{h5StaticPath}}wind_auto2.svg" />
  87. </div>
  88. </div>
  89. </div>
  90. <div
  91. class="air-control-item item-flex"
  92. v-if="!isACATVA && totalBoundPoint.modeSetBound"
  93. >
  94. <div class="air-control-item-box">
  95. <div class="envnum-common air-envnum-comon">
  96. {{airMode==2?'制热':airMode==1?'制冷':'通风'}}
  97. </div>
  98. <div class="air-common-text change-text">模式设定</div>
  99. </div>
  100. <div class="air-common-switch">
  101. <div
  102. class="switch"
  103. :class="{'yell': airMode==1,'disabled':!airData.isOpen}"
  104. @click="changeZongAir('mode',1)"
  105. >
  106. <img :src="h5StaticPath+'aircoldblack2.svg'" />
  107. </div>
  108. <div
  109. class="switch"
  110. :class="{'yell': airMode==2,'disabled':!airData.isOpen}"
  111. @click="changeZongAir('mode',2)"
  112. >
  113. <img :src="h5StaticPath+'airsunblack2.svg'" />
  114. </div>
  115. <div
  116. class="switch"
  117. :class="{'yell': airMode==3,'disabled':!airData.isOpen}"
  118. @click="changeZongAir('mode',3)"
  119. >
  120. <img :src="h5StaticPath+'aircloudblack2.svg'" />
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. <div
  126. class="allAir"
  127. v-show="allAirShow"
  128. >
  129. <div class="eachFeat" @click="openFloorFeatPop(item)"
  130. v-for="(item,aindex) in allDevices"
  131. :key="aindex"
  132. >
  133. <div class="temp">
  134. <div style="display: flex;">{{item.tempSet2 ? item.tempSet2 : '--'}}<span class="unit">℃</span></div>
  135. <Switch
  136. v-if="item.boundPoint.switchSetBound"
  137. :checked="item.open"
  138. :height="32"
  139. :width="64"
  140. @component-switch-change="eachAirOpen(aindex)"
  141. ></Switch>
  142. </div>
  143. <div class="status">
  144. <img v-if="item.boundPoint.modeSetBound" :src="item.airMode2 == 1? h5StaticPath+'aircoldblack2.svg': item.airMode2 == 2? h5StaticPath+'airsunblack2.svg': h5StaticPath+'aircloudblack2.svg'" />
  145. <span v-if="item.boundPoint.modeSetBound">{{item.airMode2 == 2 ? '制热' : item.airMode2 == 1 ? '制冷' : '通风'}}</span>
  146. </div>
  147. <div class="eqName">
  148. {{item.name}}
  149. </div>
  150. <img
  151. v-if="item.boundPoint.gearSetBound || item.boundPoint.modeSetBound ||item.boundPoint.tempSetBound"
  152. :style="{'opacity':(item.open ? '1' : '0.3')}"
  153. class="imgSt"
  154. src="{{h5StaticPath}}icon_adjust.svg"
  155. />
  156. </div>
  157. </div>
  158. </div>
  159. </template>
  160. <script>
  161. import wepy from '@wepy/core'
  162. import {
  163. changeManualTempHttp,
  164. querySpaceConditioners
  165. } from '../../../api/officehome.js'
  166. import config from '@config'
  167. import { isWithinLocation } from '@/service/location'
  168. import store from '@/store'
  169. import { mapState } from '@wepy/x'
  170. let infoTimer
  171. const barWidth = 17
  172. wepy.component({
  173. props: {
  174. roomType: String, // 房间类型
  175. // hasBlowing: Boolean, // 有无变风量
  176. roomHasScene: Boolean, // 加班场景
  177. temperature: Number,
  178. cardWidth: Number,
  179. objectId: String,
  180. hasAir: {
  181. type: Boolean,
  182. default: true
  183. }, // 有无空调
  184. equipConfig: Array, // 设备配置情况
  185. projectId: String,
  186. isACATVA: Boolean,
  187. isACATFC: Boolean
  188. },
  189. store,
  190. data: {
  191. baseMode: [
  192. {
  193. name: '温度',
  194. id: 'temp',
  195. selectArr: []
  196. // sel: 0,
  197. // value: 25
  198. },
  199. {
  200. name: '档位',
  201. id: 'gear',
  202. selectArr: [0, 1, 2, 3, 'AUTO']
  203. },
  204. {
  205. name: '模式',
  206. id: 'mode',
  207. selectArr: ['制冷', '制热', '通风'],
  208. refer: [
  209. { mid: 1, value: '制冷', sindex: 0 },
  210. { mid: 2, value: '制热', sindex: 1 },
  211. { mid: 3, value: '通风', sindex: 2 }
  212. ]
  213. }
  214. ],
  215. allDevices: [],
  216. showWorkTime: false, // 展示是否需要预约时间
  217. h5StaticPath: config.h5StaticPath + '/page-officehome/',
  218. eqTitle: '空调',
  219. windGearArr: [0, 1, 2, 3], // 风量3/5个档位
  220. nowTemp: 18,
  221. airMode: 2, // 空调模式 总的 1=cold;2=hot 3=wind
  222. airGear: 1, // 风量档位 总的
  223. isAutoGear: 0,
  224. airTemp: 18, // 总的 温度
  225. airData: {
  226. isOpen: true, // 空调开关 true 是开
  227. spaceStatus: '' // 固定框文案展示
  228. },
  229. totalBoundPoint: {},
  230. seasonType: '',
  231. movesign: false,
  232. startX: 0,
  233. transX: 0,
  234. tempBarWidth: 0,
  235. startTemp: 18,
  236. endTemp: 26,
  237. allAirShow: false
  238. },
  239. watch: {
  240. hasAir(val) {
  241. if (!val) {
  242. clearInterval(infoTimer)
  243. this.airData.isOpen = false
  244. }
  245. },
  246. objectId(val) {
  247. if (val) {
  248. this.doTimeout()
  249. this.getAirInfo()
  250. } else {
  251. this.airData.isOpen = false
  252. }
  253. }
  254. },
  255. computed: {
  256. ...mapState({ isNowTime: (state) => state.officehome.isNowTime })
  257. },
  258. ready() {
  259. var _this = this
  260. },
  261. detached() {
  262. this.airData.isOpen = false
  263. clearInterval(infoTimer)
  264. },
  265. methods: {
  266. doTimeout() {
  267. clearInterval(infoTimer) // 定时器先清理 再设定
  268. infoTimer = setInterval(() => {
  269. this.getAirInfo()
  270. }, 15000)
  271. },
  272. doTemp(newVal) {
  273. // 处理温度
  274. var _this = this
  275. let maxSelecotr = this.$wx.createSelectorQuery()
  276. maxSelecotr
  277. .select('#tempBar')
  278. .boundingClientRect()
  279. .exec((res) => {
  280. // console.log('res', res);
  281. _this.tempBarWidth =
  282. res[0] && res[0].width
  283. ? res[0].width - barWidth
  284. : _this.tempBarWidth
  285. var tempNum = (_this.endTemp - _this.startTemp) * 2
  286. // console.log("_this.tempBarWidth", _this.tempBarWidth, newVal);
  287. var eachUnit = _this.tempBarWidth / tempNum // 0.5度的长度
  288. var changeNum = (newVal - _this.startTemp) * 2
  289. var transX = eachUnit * changeNum
  290. if (transX < 0) {
  291. // transX只能是正的
  292. transX = 0
  293. }
  294. if (transX > _this.tempBarWidth) {
  295. transX = _this.tempBarWidth
  296. }
  297. _this.transX = transX
  298. })
  299. },
  300. allAirClick(val) {
  301. this.getAirInfo()
  302. this.allAirShow = !val
  303. },
  304. ctouchend: function(value) {
  305. if (!this.airData.isOpen) return
  306. // 挪动到一定区域 则可以自己到固定位置
  307. var _this = this
  308. _this.movesign = false
  309. _this.changeZongAir('temp', value)
  310. this.$emit('setCanScroll', true)
  311. },
  312. eachAirOpen(aindex) {
  313. isWithinLocation()
  314. .then(() => {
  315. this.allDevices[aindex].open = !this.allDevices[aindex].open
  316. var value = this.allDevices[aindex].open ? 1 : 0
  317. this.changeOneAir(
  318. this.allDevices[aindex].id,
  319. this.allDevices[aindex].switchCode,
  320. value
  321. )
  322. })
  323. .catch(() => {})
  324. },
  325. showDetail(funcid) {
  326. this.$emit('showDetail', { funcid: funcid })
  327. wx.uma.trackEvent('officeHome_changeAir_temperature', {
  328. key: 'roomTemperature'
  329. })
  330. },
  331. // 空调信息airTemp
  332. getAirInfo() {
  333. const paramObj = {
  334. projectId: this.projectId, // 'Pj1101080255'
  335. spaceId: this.objectId // 'Sp110108025564f438d7fef64eea8202a6462f1bbcce' 空间id
  336. }
  337. var _this = this
  338. // wx.showLoading();
  339. querySpaceConditioners(paramObj)
  340. .then((res) => {
  341. var data = res.data || {}
  342. // console.log('_this.baseMode[0]', data);
  343. _this.airTemp = data.tempSet
  344. _this.airMode = data.workMode // 1=cold;2=hot;3=wind
  345. _this.airGear = data.gear || 0 // 总的档位
  346. _this.isAutoGear = data.isAutoGear // 总的档位
  347. _this.totalBoundPoint = data.boundPoint // 空调可控点位
  348. _this.airData.isOpen = !!data.runStatus
  349. var maxTempSet = data.maxTempSet
  350. _this.endTemp = data.maxTempSet
  351. var minTempSet = data.minTempSet
  352. _this.startTemp = data.minTempSet
  353. // 获取的空调温度超出设置 上下限
  354. _this.nowTemp = data.tempSet || data.minTempSet
  355. if (data.tempSet < data.minTempSet) {
  356. _this.nowTemp = data.minTempSet
  357. }
  358. if (data.tempSet > data.maxTempSet) {
  359. _this.nowTemp = data.maxTempSet
  360. }
  361. var tempArr = []
  362. for (var i = minTempSet; i <= maxTempSet; i = i + 0.5) {
  363. tempArr.push(i)
  364. }
  365. _this.baseMode[0].selectArr = tempArr
  366. _this.doTemp(data.tempSet)
  367. var deviceArr = [];
  368. (data.equipList || []).forEach((eitem) => {
  369. var deviceObj = {}
  370. deviceObj.id = eitem.id
  371. deviceObj.name = eitem.localName
  372. deviceObj.open = eitem.runStatus == 1
  373. deviceObj.switchCode = eitem.switchCode
  374. deviceObj.boundPoint = eitem.boundPoint
  375. var allModel = JSON.parse(JSON.stringify(_this.baseMode))
  376. allModel.forEach((mitem) => {
  377. if (mitem.id == 'temp') {
  378. mitem.code = eitem.tempSetCode
  379. deviceObj.nowTemp2 = eitem.tempSet || _this.startTemp
  380. if (eitem.tempSet > _this.endTemp) {
  381. deviceObj.nowTemp2 = _this.endTemp
  382. }
  383. if (deviceObj.nowTemp2 < _this.startTemp) {
  384. deviceObj.nowTemp2 = _this.startTemp
  385. }
  386. deviceObj.tempSet2 = eitem.tempSet
  387. }
  388. if (mitem.id == 'gear') {
  389. mitem.code = eitem.gearCode
  390. deviceObj.airGear2 = eitem.gear || 0
  391. deviceObj.isAutoGear2 = eitem.isAutoGear
  392. }
  393. if (mitem.id == 'mode') {
  394. mitem.code = eitem.modeSetCode
  395. deviceObj.airMode2 = eitem.workMode
  396. }
  397. })
  398. deviceObj.allModel = allModel
  399. deviceArr.push(deviceObj)
  400. })
  401. _this.allDevices = deviceArr
  402. })
  403. .catch(() => {
  404. // wx.hideLoading();
  405. })
  406. },
  407. vibrateLong() {
  408. if (wx.canIUse('vibrateLong')) {
  409. wx.vibrateLong()
  410. } else {
  411. wx.vibrateShort()
  412. }
  413. },
  414. vibrateShort() {
  415. if (wx.canIUse('vibrateShort')) {
  416. wx.vibrateShort()
  417. } else {
  418. wx.vibrateLong()
  419. }
  420. },
  421. // 手动模式下设备是否可控
  422. checkControlMode(id) {
  423. let flag = false
  424. if (!this.controlMode) {
  425. return flag
  426. }
  427. // 总开关
  428. if (id === 'air') {
  429. let canOpen = true
  430. for (let i = 0; i < this.equipConfig.length; i++) {
  431. const ele = this.equipConfig[i]
  432. for (let j = 0; j < this.lampList.length; j++) {
  433. const jele = this.lampList[j]
  434. // 有可控设备
  435. if (ele.equipmentId === jele.id && ele.isExeSpaceTime) {
  436. canOpen = false
  437. return
  438. }
  439. }
  440. }
  441. flag = canOpen
  442. } else {
  443. this.equipConfig.map((item) => {
  444. // 设备不受控制 可直接开灯
  445. if (item.equipmentId === id && !item.isExeSpaceTime) {
  446. flag = true
  447. }
  448. // 设备受控 且有当前工作时间 可直接开灯
  449. if (
  450. item.equipmentId === id &&
  451. this.isNowTime &&
  452. item.isExeSpaceTime
  453. ) {
  454. flag = true
  455. }
  456. })
  457. }
  458. return flag
  459. },
  460. checkAirCanOpen(id, value) {
  461. // 判断空调是否能开启
  462. if (value) {
  463. // 12表示开空调
  464. // 手动模式下设备是否可控
  465. let canControl = this.checkControlMode(id)
  466. if (this.roomHasScene && !this.isNowTime && !canControl) {
  467. this.$emit('component-open-workTimePop', true)
  468. this.$emit('component-EquipType-workTimePop', id)
  469. return false
  470. }
  471. }
  472. return true
  473. },
  474. changeZongAir(btnType, value) {
  475. if (!this.airData.isOpen && btnType != 'sw') return
  476. isWithinLocation()
  477. .then(() => {
  478. if (this.roomType === '开放') {
  479. this.showWorkTime = this.checkAirCanOpen(
  480. 'air',
  481. !this.airData.isOpen
  482. )
  483. if (!this.showWorkTime) {
  484. return
  485. }
  486. }
  487. var _this = this
  488. if (btnType == 'gear' && value == 'windLow') {
  489. // 降挡
  490. if (this.airGear > 1) {
  491. this.airGear--
  492. this.isAutoGear = 0
  493. } else {
  494. return
  495. }
  496. }
  497. if (btnType == 'gear' && value == 'windUp') {
  498. // 升档
  499. if (this.airGear < 3) {
  500. this.airGear++
  501. this.isAutoGear = 0
  502. } else {
  503. return
  504. }
  505. }
  506. if (btnType == 'gear' && value == 'auto') {
  507. this.isAutoGear = this.isAutoGear == 1 ? 0 : 1
  508. }
  509. if (btnType == 'mode') {
  510. this.airMode = value
  511. }
  512. if (btnType == 'sw') {
  513. this.airData.isOpen = !this.airData.isOpen
  514. }
  515. let paramArr = []
  516. this.allDevices.forEach((dele) => {
  517. if (btnType == 'sw') {
  518. let paramObj = {
  519. id: dele.id,
  520. code: dele.switchCode,
  521. value: _this.airData.isOpen ? 1 : 0
  522. }
  523. paramArr.push(paramObj)
  524. }
  525. var pvalue
  526. dele.allModel.forEach((mele) => {
  527. if (mele.id == 'temp') {
  528. pvalue = value
  529. } else if (mele.id == 'gear') {
  530. pvalue = _this.isAutoGear == 1 ? 4 : _this.airGear
  531. } else if (mele.id == 'mode') {
  532. pvalue = _this.airMode
  533. }
  534. if (mele.id == btnType) {
  535. let paramObj = {
  536. id: dele.id,
  537. code: mele.code,
  538. value: pvalue
  539. }
  540. paramArr.push(paramObj)
  541. }
  542. })
  543. })
  544. this.vibrateShort()
  545. wx.showLoading()
  546. // 下达指令
  547. changeManualTempHttp(paramArr, {
  548. curTemp: _this.temperature,
  549. equipType: 'airConditioner'
  550. })
  551. .then((res) => {
  552. if (btnType == 'temp') {
  553. _this.airTemp = value
  554. }
  555. _this.doTimeout()
  556. })
  557. .catch(() => {
  558. wx.hideLoading()
  559. })
  560. })
  561. .catch(() => {})
  562. },
  563. changeOneAir(id, code, value, deviceObjCopy) {
  564. var _this = this
  565. // isWithinLocation()
  566. // .then(() => {
  567. this.vibrateShort()
  568. if (this.roomType === '开放') {
  569. this.showWorkTime = this.checkAirCanOpen(id, value)
  570. if (!this.showWorkTime) {
  571. return
  572. }
  573. }
  574. const paramArr = [
  575. {
  576. id: id,
  577. code: code,
  578. value: value
  579. }
  580. ]
  581. wx.showLoading()
  582. if (deviceObjCopy) {
  583. var allDevicesCopy = [..._this.allDevices]
  584. var aindex = allDevicesCopy.findIndex((device) => {
  585. return device.id == deviceObjCopy.id
  586. })
  587. allDevicesCopy[aindex] = deviceObjCopy
  588. _this.allDevices = allDevicesCopy
  589. }
  590. // 下达指令
  591. changeManualTempHttp(paramArr, {
  592. curTemp: _this.temperature,
  593. equipType: 'airConditioner'
  594. })
  595. .then((res) => {
  596. _this.doTimeout()
  597. })
  598. .catch(() => {
  599. wx.hideLoading()
  600. })
  601. // })
  602. // .catch(() => {});
  603. },
  604. openFloorFeatPop(item) {
  605. var _this = this
  606. if (item.open) {
  607. this.$emit('component-open-airHand-pop', item, {
  608. maxValue: _this.endTemp,
  609. minValue: _this.startTemp
  610. })
  611. }
  612. }
  613. }
  614. })
  615. </script>
  616. <style lang="less" scoped>
  617. .allAir {
  618. display: flex;
  619. box-sizing: border-box;
  620. padding: 32rpx 10rpx 0rpx 10rpx;
  621. border-top: 1px solid rgba(196, 196, 196, 0.4);
  622. flex-wrap: wrap;
  623. .eachFeat {
  624. margin-bottom: 24rpx;
  625. position: relative;
  626. height: 232rpx;
  627. width: 296rpx;
  628. margin-left: 24rpx;
  629. background: #f7f9fa;
  630. border-radius: 32rpx;
  631. padding-left: 32rpx;
  632. box-sizing: border-box;
  633. padding-top: 26rpx;
  634. padding-bottom: 24rpx;
  635. padding-right: 24rpx;
  636. .temp {
  637. display: flex;
  638. justify-content: space-between;
  639. align-items: center;
  640. font-family: Montserrat;
  641. font-size: 44rpx;
  642. font-weight: 400;
  643. line-height: 44rpx;
  644. color: #1b144e;
  645. }
  646. .unit {
  647. font-family: Mulish;
  648. font-size: 24rpx;
  649. font-weight: 400;
  650. line-height: 30rpx;
  651. color: #c4c4c4;
  652. }
  653. .status {
  654. height: 96rpx;
  655. box-sizing: border-box;
  656. padding-top: 8rpx;
  657. padding-bottom: 52rpx;
  658. font-family: PingFang SC;
  659. font-size: 24rpx;
  660. font-weight: 400;
  661. display: flex;
  662. align-items: center;
  663. color: #c4c9cf;
  664. image {
  665. margin-right: 8rpx;
  666. width: 28rpx;
  667. height: 28rpx;
  668. opacity: 0.6;
  669. }
  670. }
  671. .eqName {
  672. font-family: PingFang SC;
  673. font-size: 32rpx;
  674. font-weight: 600;
  675. line-height: 44rpx;
  676. color: #4d5262;
  677. width: calc(100% - 23px);
  678. overflow: hidden;
  679. white-space: nowrap;
  680. text-overflow: ellipsis;
  681. }
  682. .imgSt {
  683. position: absolute;
  684. right: 28rpx;
  685. bottom: 30rpx;
  686. height: 40rpx;
  687. width: 40rpx;
  688. }
  689. }
  690. }
  691. .air-common-text {
  692. padding-top: 2rpx;
  693. font-family: PingFang SC;
  694. font-size: 24rpx;
  695. font-weight: 400;
  696. line-height: 30rpx;
  697. color: rgba(196, 196, 196, 1);
  698. &.change-text {
  699. font-size: 24rpx;
  700. line-height: 40rpx;
  701. }
  702. }
  703. .office-card {
  704. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  705. border-radius: 50rpx;
  706. background: #ffffff;
  707. margin-bottom: 30rpx;
  708. }
  709. .air-adjust {
  710. position: relative;
  711. // height: 280rpx;
  712. .air-text {
  713. padding-bottom: 60rpx;
  714. }
  715. .air-content {
  716. padding: 48rpx 46rpx 32rpx 40rpx;
  717. box-sizing: border-box;
  718. position: relative;
  719. }
  720. .air-switch {
  721. position: absolute;
  722. bottom: 10rpx;
  723. right: 46rpx;
  724. }
  725. .air-adjust-env {
  726. .envname {
  727. font-family: PingFang SC;
  728. color: rgba(77, 82, 98, 1);
  729. font-size: 32rpx;
  730. font-weight: 600;
  731. line-height: 44rpx;
  732. }
  733. .envnum {
  734. font-family: Montserrat;
  735. font-size: 64rpx;
  736. font-weight: 400;
  737. line-height: 64rpx;
  738. padding-top: 10rpx;
  739. color: #1b144e;
  740. label {
  741. font-family: Mulish;
  742. font-weight: 800;
  743. font-size: 24rpx;
  744. margin-left: 6rpx;
  745. line-height: 30rpx;
  746. vertical-align: top;
  747. color: #c4c4c4;
  748. }
  749. }
  750. }
  751. .air-adjust-btn {
  752. position: absolute;
  753. top: 34rpx;
  754. right: 40rpx;
  755. image {
  756. width: 132px;
  757. height: 76px;
  758. }
  759. }
  760. }
  761. .air-show-all {
  762. height: 50rpx;
  763. .text {
  764. margin-right: 4px;
  765. }
  766. .air-arrow {
  767. width: 50rpx;
  768. height: 36rpx;
  769. }
  770. .showarrow {
  771. color: #4d5262;
  772. }
  773. .arrow {
  774. padding-top: 4px;
  775. }
  776. }
  777. .air-show-all-cont {
  778. font-family: PingFang SC;
  779. font-size: 14px;
  780. font-weight: 400;
  781. line-height: 50rpx;
  782. color: rgba(196, 196, 196, 1);
  783. display: flex;
  784. align-items: center;
  785. }
  786. .air-control-wrap {
  787. border-top: 1px solid rgba(196, 196, 196, 0.4);
  788. padding-top: 30rpx;
  789. }
  790. .air-control-item {
  791. padding: 30rpx 40rpx 32rpx 40rpx;
  792. box-sizing: border-box;
  793. &.item-flex {
  794. display: flex;
  795. justify-content: space-between;
  796. }
  797. .temp-wrap {
  798. display: flex;
  799. padding-top: 26px;
  800. padding-bottom: 5px;
  801. height: 20px;
  802. align-items: center;
  803. .minVal {
  804. color: #c4c4c4;
  805. font-size: 22rpx;
  806. flex-grow: 0;
  807. margin-right: 8px;
  808. }
  809. .maxVal {
  810. color: #c4c4c4;
  811. font-size: 22rpx;
  812. flex-grow: 0;
  813. margin-left: 8px;
  814. }
  815. .tempBar {
  816. //background: red;
  817. height: 10px;
  818. flex-grow: 1;
  819. position: relative;
  820. display: flex;
  821. border-radius: 10px;
  822. .circle {
  823. position: absolute;
  824. width: 19px;
  825. height: 19px;
  826. left: 0px;
  827. top: -5px;
  828. background: #ffffff;
  829. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
  830. 0px 4px 10px rgba(0, 0, 0, 0.07);
  831. border-radius: 21px;
  832. z-index: 1;
  833. .tvalue {
  834. position: relative;
  835. top: -26px;
  836. text-align: center;
  837. color: #1f2429;
  838. font-size: 22rpx;
  839. }
  840. &.disable {
  841. opacity: 0.6;
  842. }
  843. }
  844. .eachBlock {
  845. width: 20%;
  846. background: red;
  847. &:nth-child(1) {
  848. background: #5e8bcf;
  849. border-top-left-radius: 10px;
  850. border-bottom-left-radius: 10px;
  851. }
  852. &:nth-child(2) {
  853. background: #9fb7cd;
  854. }
  855. &:nth-child(3) {
  856. background: #f3f3f3;
  857. }
  858. &:nth-child(4) {
  859. background: #ff9882;
  860. }
  861. &:nth-child(5) {
  862. background: #e5574f;
  863. border-top-right-radius: 10px;
  864. border-bottom-right-radius: 10px;
  865. }
  866. }
  867. }
  868. }
  869. .air-control-item-box {
  870. display: flex;
  871. // align-items: center;
  872. flex-direction: column;
  873. }
  874. .envnum-common {
  875. font-family: Montserrat;
  876. font-weight: 500;
  877. line-height: 48rpx;
  878. font-size: 28rpx;
  879. color: rgba(77, 82, 98, 1);
  880. &.air-envnum-comon {
  881. display: flex;
  882. align-items: center;
  883. }
  884. .envnum-common-wind {
  885. font-family: Montserrat;
  886. font-size: 24rpx;
  887. font-weight: 500;
  888. line-height: 30rpx;
  889. margin-right: 14rpx;
  890. color: rgba(196, 196, 196, 1);
  891. &.windBlack {
  892. font-size: 40rpx;
  893. font-weight: 500;
  894. line-height: 48rpx;
  895. color: rgba(77, 82, 98, 1);
  896. }
  897. }
  898. &.colorRed {
  899. color: red;
  900. }
  901. &.colorBlue {
  902. color: rgba(94, 139, 207, 1);
  903. }
  904. &.colorBlack {
  905. color: rgba(77, 82, 98, 1);
  906. }
  907. label {
  908. font-size: 11px;
  909. line-height: 13px;
  910. color: rgba(196, 196, 196, 1);
  911. vertical-align: top;
  912. }
  913. }
  914. .air-common-switch {
  915. display: flex;
  916. }
  917. .switch:last-child {
  918. margin-right: 0rpx;
  919. }
  920. .switch {
  921. display: flex;
  922. justify-content: center;
  923. align-items: center;
  924. height: 80rpx;
  925. width: 80rpx;
  926. font-size: 12px;
  927. margin-right: 16rpx;
  928. background: #f1f4f6;
  929. border-radius: 50%;
  930. image {
  931. width: 40rpx;
  932. height: 40rpx;
  933. }
  934. &.yell {
  935. background: rgba(61, 203, 204, 0.3);
  936. }
  937. }
  938. }
  939. .disabled {
  940. opacity: 0.5;
  941. }
  942. </style>
  943. <config>
  944. {
  945. usingComponents: {
  946. "switch": "../components/switch" ,
  947. "van-icon": "module:@vant/weapp/dist/icon",
  948. "van-loading": "module:@vant/weapp/dist/loading",
  949. "CardSlider": "../comComponents/CardSlider" ,
  950. "SwitchLR": "../comComponents/SwitchLR",
  951. "Switch": "../comComponents/Switch",
  952. }
  953. }
  954. </config>