air-adjust.wpy 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644
  1. <template>
  2. <div class="air-adjust office-card g-fl">
  3. <div class="air-content">
  4. <div class="air-adjust-env">
  5. <div>
  6. <span class="envname">空调</span>
  7. <div
  8. class="envnum"
  9. @tap.stop="showDetail('Tdb,RH')"
  10. >{{temperature ? temperature :'--'}}<span>℃</span></div>
  11. </div>
  12. <div
  13. class="air-status"
  14. v-if="hasAir"
  15. >
  16. <span>{{airData.isOpen ? '空调已开启' : '空调已关闭'}}</span>
  17. </div>
  18. <div
  19. class="room-air-status"
  20. v-if="airData.isOpen"
  21. >
  22. <image
  23. v-if="airData.icon==1 || airData.icon==2 || airData.icon==3"
  24. class="room-air-img"
  25. src="{{h5StaticPath + airRunImg}}"
  26. />
  27. <span class="air-common-text air-status-text">{{airData.spaceStatus}}</span>
  28. </div>
  29. <div
  30. v-else
  31. style="height:52rpx"
  32. >
  33. </div>
  34. </div>
  35. <div class="air-adjust-btn">
  36. <image
  37. :src="h5StaticPath+airImg"
  38. alt=""
  39. lazyload
  40. />
  41. </div>
  42. <div class="air-switch">
  43. <switch
  44. v-if="hasAir && !isACATVA"
  45. :isACATFC="isACATFC"
  46. :seasonType="seasonType"
  47. :isHand="'auto'"
  48. :showWorkTime="showWorkTime"
  49. :checked="airData.isOpen"
  50. :eqTitle="eqTitle"
  51. @component-switch-change="airChange($event)"
  52. ></switch>
  53. </div>
  54. </div>
  55. <!-- 空调 调节 -->
  56. <div v-if="airData.isOpen">
  57. <div class="air-control-item">
  58. <div class="air-control-item-box">
  59. <!-- <div
  60. class="envnum-common"
  61. :class="[airTemSt]"
  62. v-show="glistenFlag"
  63. >{{airData.designTemperature}}<span>℃</span></div> -->
  64. <span class="air-common-text change-text">温度调节</span>
  65. </div>
  66. <div class="air-common-switch">
  67. <div
  68. class="switch"
  69. :class="{'yell': suspendUpFlag} "
  70. @click="changeAir(4, 'temp','toCold')"
  71. >
  72. <image src="{{h5StaticPath}}arrow_down_grey.png" />
  73. </div>
  74. <div
  75. class="switch"
  76. :class="{'yell': suspendUpFlag} "
  77. @click=" changeAir(2, 'temp','toWarm')"
  78. >
  79. <image src="{{h5StaticPath}}arrow_up_grey.png" />
  80. </div>
  81. </div>
  82. </div>
  83. <!--Pj1101050038 ACATVA没有风量调节 和开关按钮 -->
  84. <div
  85. class="air-control-item"
  86. v-if="!isACATVA"
  87. >
  88. <div class="air-control-item-box">
  89. <!-- <div class="envnum-common air-envnum-comon">
  90. <span
  91. class="envnum-common-wind"
  92. v-for="(item,index) in windGearArr"
  93. :key="index"
  94. :class="{'windBlack': item == windGear}"
  95. >{{item}}</span>
  96. </div> -->
  97. <span class="air-common-text change-text">风量调节</span>
  98. </div>
  99. <div class="air-common-switch">
  100. <div
  101. class="switch"
  102. :class="{'yell': suspendUpFlag} "
  103. @click="changeAir(5,'wind','toWindLow')"
  104. >
  105. <image src="{{h5StaticPath}}wind_small.png" />
  106. </div>
  107. <div
  108. class="switch"
  109. :class="{'yell': suspendUpFlag} "
  110. @click="changeAir(6,'wind','toWindUp')"
  111. >
  112. <image src="{{h5StaticPath}}wind_big.png" />
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </template>
  119. <script>
  120. import wepy from '@wepy/core'
  121. import { changeTempHttp, getFeedbackDocumentsHttp, getTempRangeHttp, getSeasonType } from '@/packagesEnv/api/officehome.js'
  122. import config from '@/config'
  123. import { isWithinLocation } from '@/service/location'
  124. import moment from 'moment'
  125. import store from '@/store'
  126. import { mapState } from '@wepy/x'
  127. import { checkSpaceControl } from '@/packagesEnv/pages/common.js'
  128. let infoTimer
  129. let feedbackTimer
  130. wepy.component({
  131. props: {
  132. isControl: Boolean, // 是否可控
  133. roomType: String, // 房间类型
  134. // hasBlowing: Boolean, // 有无变风量
  135. roomHasScene: Boolean, // 加班场景
  136. temperature: Number,
  137. objectId: String,
  138. hasAir: {
  139. type: Boolean,
  140. default: true
  141. }, // 有无空调
  142. projectId: String,
  143. isACATVA: Boolean,
  144. isACATFC: Boolean,
  145. airVolumes: Array, // 风量信息
  146. airVisible: Boolean
  147. },
  148. store,
  149. data: {
  150. showWorkTime: false, // 展示是否需要预约时间
  151. h5StaticPath: config.h5StaticPath + '/page-officehome/',
  152. visible: false,
  153. eqTitle: '空调',
  154. airImg: 'air_close.png',
  155. airTemSt: 'colorBlack',
  156. glistenFlag: true,
  157. windGear: 0, // 风量档位
  158. windGearArr: [1, 2, 3], // 风量3/5个档位
  159. airData: {
  160. avg: '--', // 算法调节温度(目标值)
  161. icon: 1, // 固定框文案ID 7 为关机,其它都是开机
  162. spaceStatus: '', // 固定框文案展示
  163. notice: '', // 弹框文案展示
  164. isOpen: false // 空调开关 true 是开
  165. },
  166. watchObjectIdEnd: false, // 监听空间ID
  167. tempMax: '--',
  168. tempMin: '--',
  169. seasonType: ''
  170. },
  171. watch: {
  172. airVisible(val) {
  173. if (!val) {
  174. console.log('---关闭定时器')
  175. clearInterval(feedbackTimer)
  176. }
  177. },
  178. hasAir(val) {
  179. if (!val) {
  180. clearInterval(infoTimer)
  181. this.airData.isOpen = false
  182. this.airImg = 'air_close.png'
  183. }
  184. },
  185. objectId(val) {
  186. // this.glistenAirTemHttp();
  187. if (val) {
  188. clearInterval(infoTimer) // 定时器先清理 再设定
  189. infoTimer = setInterval(() => {
  190. this.getInfo()
  191. }, 1000)
  192. } else {
  193. this.airData.isOpen = false
  194. this.airImg = 'air_close.png'
  195. }
  196. }
  197. },
  198. computed: {
  199. ...mapState({isNowTime: state => state.officehome.isNowTime}),
  200. airRunImg() {
  201. let imgStr = ''
  202. switch (this.airData.icon) {
  203. case 1:
  204. imgStr = 'temp-keep.png'
  205. break
  206. case 2:
  207. imgStr = 'temp_cold.svg'
  208. break
  209. case 3:
  210. imgStr = 'temp_sun.png'
  211. break
  212. default:
  213. imgStr = ''
  214. break
  215. }
  216. return imgStr
  217. }
  218. },
  219. ready() {
  220. this.querySeasonType()
  221. },
  222. detached() {
  223. this.airData.isOpen = false
  224. this.airData.icon = 1
  225. clearInterval(feedbackTimer)
  226. clearInterval(infoTimer)
  227. },
  228. methods: {
  229. querySeasonType() {
  230. const params = {
  231. projectId: this.projectId,
  232. date: moment().format('YYYYMMDD') // 当天日期
  233. }
  234. if (!this.seasonType) {
  235. getSeasonType(params).then(res => {
  236. this.seasonType = res.data || ''
  237. }).catch(() => {
  238. })
  239. }
  240. },
  241. showDetail(funcid) {
  242. this.$emit('showDetail', { funcid: funcid })
  243. wx.uma.trackEvent('officeHome_changeAir_temperature', { key: 'roomTemperature' })
  244. },
  245. async getInfo() {
  246. await this.getAirInfo('info')
  247. // this.judgeAirLevel();
  248. // this.glistenAirTem();
  249. },
  250. // 空调信息airTemp
  251. getAirInfo(type, btnType, feedbackId) {
  252. const paramObj = {
  253. projectId: 'Pj1101080259', // 项目id
  254. objectId: this.objectId // 空间id
  255. }
  256. if (type === 'feedback') {
  257. paramObj.id = feedbackId
  258. }
  259. getFeedbackDocumentsHttp(paramObj).then(res => {
  260. if (type !== 'feedback') {
  261. res.isOpen = false
  262. this.airData = res
  263. this.airData.designTemperature = res.designTemperature ? res.designTemperature.toFixed(1) : '--'
  264. if (this.airData.icon === 7) {
  265. this.airData.isOpen = false
  266. this.airImg = 'air_close.png'
  267. // 如果是过渡季 并且 是ATVA 空调 开启时则显示 过渡季节运行中...
  268. } else if (this.airData.icon != 6) {
  269. this.airData.isOpen = true
  270. this.airImg = 'openair.png'
  271. if (this.isACATVA && this.seasonType == 'Transition') {
  272. this.airData.spaceStatus = '过渡季节运行中...'
  273. this.airData.icon = 1
  274. }
  275. }
  276. }
  277. // 弹窗
  278. if (type === 'feedback' && res.notice && btnType != 'sw') {
  279. clearInterval(feedbackTimer) // 拿到反馈文案清除定时器
  280. this.$emit('airTemp', {notice: res.notice, remark: res.remark})
  281. }
  282. })
  283. },
  284. // 空调温度 闪烁
  285. glistenAirTemHttp() {
  286. getTempRangeHttp().then(res => {
  287. this.tempMax = res.tempMax
  288. this.tempMin = res.tempMin
  289. })
  290. },
  291. // glistenAirTem() {
  292. // clearInterval(timer);
  293. // if (this.airData.avg >= this.tempMax || this.airData.avg <= this.tempMin) {
  294. // this.airData.avg >= this.tempMax ? (this.airTemSt = 'colorRed') : (this.airTemSt = 'colorBlue');
  295. // const _this = this;
  296. // timer = setInterval(() => {
  297. // _this.glistenFlag = !_this.glistenFlag;
  298. // }, 500);
  299. // } else {
  300. // this.glistenFlag = true;
  301. // this.airTemSt = 'colorBlack';
  302. // }
  303. // },
  304. // judgeAirLevel() {
  305. // // - 空调风量判断 -
  306. // let blowObj = this.airVolumes ? this.airVolumes[0] : {};
  307. // let airLevel = 0;
  308. // if (blowObj.data === undefined || blowObj.data === 0 || !this.airData.isOpen) {
  309. // this.airLevel = 0;
  310. // return;
  311. // }
  312. // this.windGearArr = [1, 2, 3];
  313. // switch (blowObj.code) {
  314. // case 'AirSpeedGear':
  315. // this.windGearArr = [1, 2, 3, 4, 5]; // AirSpeedGear是五个挡位
  316. // airLevel = blowObj.data;
  317. // break;
  318. // case 'FanGear':
  319. // airLevel = blowObj.data;
  320. // break;
  321. // case 'SupplyAirFlow':
  322. // let avg = (blowObj.maxAirFlow - blowObj.minAirFlow) / 3;
  323. // if (blowObj.data > blowObj.minAirFlow && blowObj.data <= blowObj.minAirFlow + avg) {
  324. // airLevel = 1;
  325. // } else if (blowObj.data > blowObj.minAirFlow + avg && blowObj.data <= blowObj.minAirFlow + avg * 2) {
  326. // airLevel = 2;
  327. // } else {
  328. // airLevel = 3;
  329. // }
  330. // break;
  331. // default:
  332. // break;
  333. // }
  334. // this.windGear = airLevel;
  335. // },
  336. vibrateLong() {
  337. if (wx.canIUse('vibrateLong')) {
  338. wx.vibrateLong()
  339. } else {
  340. wx.vibrateShort()
  341. }
  342. },
  343. vibrateShort() {
  344. if (wx.canIUse('vibrateShort')) {
  345. wx.vibrateShort()
  346. } else {
  347. wx.vibrateLong()
  348. }
  349. },
  350. airChange(value) {
  351. if (!checkSpaceControl(this.isControl)) return
  352. const itemId = value ? 12 : 10 // 10关闭 12开启
  353. console.log('itemId', itemId, value)
  354. let btnTypeDetail = ''
  355. if (itemId == 12) {
  356. btnTypeDetail = 'openAir'
  357. } else {
  358. btnTypeDetail = 'closeAir'
  359. }
  360. this.changeAir(itemId, 'sw', btnTypeDetail)
  361. },
  362. onClose() {
  363. this.visible = false
  364. },
  365. popShow() {
  366. this.visible = true
  367. },
  368. checkAirCanOpen(itemId) { // 判断空调是否能开启
  369. if (!this.roomHasScene && !this.isNowTime) {
  370. wx.showToast({
  371. title: '大厦该时段无空调提供',
  372. icon: 'info',
  373. duration: 1000
  374. })
  375. return false
  376. }
  377. if (itemId === 12) { // 12表示开空调
  378. console.log(this.isNowTime, 'this.isNowTime')
  379. if (this.roomHasScene && !this.isNowTime) {
  380. this.$emit('component-open-workTimePop', true)
  381. return false
  382. }
  383. }
  384. return true
  385. },
  386. changeAir(itemId, btnType, btnTypeDetail) {
  387. if (!checkSpaceControl(this.isControl)) return
  388. // 如果是过渡季 并且ACATVA 空调 则不能调节温度 不能开
  389. // console.log('btnType,this.isACATVA,this.seasonType', btnType, this.isACATVA, this.isACATFC, this.seasonType);
  390. if (btnType == 'temp' && this.isACATVA && this.seasonType == 'Transition') {
  391. setTimeout(() => {
  392. wx.showToast({
  393. title: '目前为过渡季节,大厦无冷热水供应,空调无法调节',
  394. duration: 2600,
  395. icon: 'none'
  396. })
  397. }, 0)
  398. return
  399. }
  400. isWithinLocation().then(() => {
  401. if (this.roomType === '开放') {
  402. this.showWorkTime = this.checkAirCanOpen(itemId)
  403. if (!this.showWorkTime) return
  404. }
  405. wx.uma.trackEvent(`officeHome_changeAir_${btnTypeDetail}`, { key: btnTypeDetail })
  406. this.vibrateShort()
  407. const paramObj = {
  408. objectId: this.objectId, // 空间id
  409. valueType: 1, // 固定为1
  410. itemId: itemId // 1,有点冷 2,冷死了 3,有点热 4,热死了
  411. }
  412. // 如果不是开关空调
  413. if (btnType != 'sw') {
  414. this.$emit('airShowVisible', {
  415. 'toWhere': btnTypeDetail,
  416. 'designTemperature': 0 }
  417. )
  418. }
  419. console.log('空调下发指令')
  420. // 下达指令
  421. changeTempHttp(paramObj).then(res => {
  422. if (btnType != 'sw') {
  423. this.$emit('airShowVisible', {
  424. 'toWhere': btnTypeDetail,
  425. 'designTemperature': res.designTemperature }
  426. )
  427. if (res.notice) {
  428. this.$emit('airTemp', {notice: res.notice, remark: res.remark})
  429. } else {
  430. feedbackTimer = setInterval(() => {
  431. this.getAirInfo('feedback', btnType, res.id) // 调节反馈文案
  432. }, 1000)
  433. }
  434. }
  435. }).catch(() => {
  436. })
  437. }).catch(() => {
  438. })
  439. }
  440. }
  441. })
  442. </script>
  443. <style lang="less" scoped>
  444. .air-common-text {
  445. padding-top: 2rpx;
  446. font-family: PingFang SC;
  447. font-size: 22rpx;
  448. font-weight: 400;
  449. line-height: 30rpx;
  450. color: rgba(196, 196, 196, 1);
  451. &.air-status-text {
  452. width: 60%;
  453. overflow: hidden;
  454. text-overflow: ellipsis;
  455. white-space: nowrap;
  456. color: #827f7f;
  457. }
  458. &.change-text {
  459. font-size: 28rpx;
  460. line-height: 40rpx;
  461. }
  462. }
  463. .office-card {
  464. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07),
  465. 0px 4px 10px rgba(0, 0, 0, 0.05);
  466. border-radius: 50rpx;
  467. background: #ffffff;
  468. margin-bottom: 30rpx;
  469. }
  470. .air-adjust {
  471. position: relative;
  472. // height: 280rpx;
  473. .air-content {
  474. padding: 48rpx 30rpx 0rpx 60rpx;
  475. box-sizing: border-box;
  476. }
  477. .air-switch {
  478. position: absolute;
  479. top: 190rpx;
  480. right: 30rpx;
  481. }
  482. .air-adjust-env {
  483. .envname {
  484. font-family: PingFang SC;
  485. color: rgba(77, 82, 98, 1);
  486. font-size: 32rpx;
  487. font-weight: 600;
  488. line-height: 44rpx;
  489. }
  490. .envnum {
  491. font-family: Montserrat;
  492. font-size: 64rpx;
  493. font-weight: 400;
  494. line-height: 64rpx;
  495. padding-top: 10rpx;
  496. color: #1b144e;
  497. label {
  498. font-family: Mulish;
  499. font-weight: 800;
  500. font-size: 24rpx;
  501. margin-left: 6rpx;
  502. line-height: 30rpx;
  503. vertical-align: top;
  504. color: #c4c4c4;
  505. }
  506. }
  507. }
  508. .air-status {
  509. padding-top: 20rpx;
  510. font-family: PingFang SC;
  511. font-size: 28rpx;
  512. font-weight: 400;
  513. line-height: 40rpx;
  514. color: rgba(196, 196, 196, 1);
  515. }
  516. .room-air-status {
  517. padding-top: 6rpx;
  518. padding-bottom: 20rpx;
  519. display: flex;
  520. align-items: center;
  521. .room-air-img {
  522. margin-right: 7rpx;
  523. width: 28rpx;
  524. height: 28rpx;
  525. }
  526. }
  527. .air-adjust-btn {
  528. flex: 1;
  529. image {
  530. position: absolute;
  531. top: 0;
  532. right: 0;
  533. width: 314rpx;
  534. height: 220rpx;
  535. }
  536. }
  537. }
  538. .air-control-item {
  539. padding: 20rpx 28rpx 16rpx 56rpx;
  540. box-sizing: border-box;
  541. display: flex;
  542. justify-content: space-between;
  543. border-top: 1px solid rgba(196, 196, 196, 0.4);
  544. .air-control-item-box {
  545. display: flex;
  546. align-items: center;
  547. }
  548. .envnum-common {
  549. font-family: Montserrat;
  550. font-size: 40rpx;
  551. font-weight: 500;
  552. line-height: 48rpx;
  553. color: rgba(77, 82, 98, 1);
  554. &.air-envnum-comon {
  555. display: flex;
  556. align-items: center;
  557. }
  558. .envnum-common-wind {
  559. font-family: Montserrat;
  560. font-size: 24rpx;
  561. font-weight: 500;
  562. line-height: 30rpx;
  563. margin-right: 10rpx;
  564. color: rgba(196, 196, 196, 1);
  565. &.windBlack {
  566. font-size: 40rpx;
  567. line-height: 48rpx;
  568. color: rgba(77, 82, 98, 1);
  569. }
  570. }
  571. &.colorRed {
  572. color: red;
  573. }
  574. &.colorBlue {
  575. color: rgba(94, 139, 207, 1);
  576. }
  577. &.colorBlack {
  578. color: rgba(77, 82, 98, 1);
  579. }
  580. label {
  581. font-size: 11px;
  582. line-height: 13px;
  583. color: rgba(196, 196, 196, 1);
  584. vertical-align: top;
  585. }
  586. }
  587. .air-common-switch {
  588. display: flex;
  589. }
  590. .switch:first-child {
  591. margin-right: 40rpx;
  592. }
  593. .switch {
  594. display: flex;
  595. justify-content: center;
  596. align-items: center;
  597. height: 80rpx;
  598. width: 80rpx;
  599. background: #c4c4c433;
  600. border-radius: 50%;
  601. image {
  602. width: 40rpx;
  603. height: 40rpx;
  604. }
  605. &.yell {
  606. background: rgba(61, 203, 204, 0.3);
  607. }
  608. }
  609. }
  610. </style>
  611. <config>
  612. {
  613. usingComponents: {
  614. "switch": "./switch"
  615. }
  616. }
  617. </config>