index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. <template>
  2. <div class="volumn-box" :class="airData.isOpen ? 'activeShow' : ''">
  3. <div>
  4. <div class="top">
  5. <img :src="parseImgUrl('taiguv1/envmonitor', airData.isOpen ? 'active/air-con.svg' : 'air-con.svg')" alt="" />
  6. <SwitchButton
  7. :loading="allAirStatus.all?.loading"
  8. @click.stop
  9. @change="setAirStatus('isOpen')"
  10. v-model="airData.isOpen" />
  11. </div>
  12. <div class="filter-box" v-if="equipList.length > 1">
  13. <div class="filter-item" @click="searchMore">
  14. <img :src="FilterIcon" alt="" />
  15. </div>
  16. </div>
  17. </div>
  18. <div class="bottom">
  19. <div class="air-info">
  20. <div class="left">
  21. <div class="text">{{ $t(`air.空调`) }}</div>
  22. <div class="status">{{ $t('air.' + airSwitchStatus.statusText) }}</div>
  23. </div>
  24. <div class="temp" v-if="airData.isOpen">{{ airData.tempSet || 16 }}<sup>℃</sup></div>
  25. </div>
  26. <!--温度⏭️-->
  27. <div class="temp-box" id="sliderAirId" v-if="airData.isOpen">
  28. <Slider
  29. v-model="airData.tempSet"
  30. :min="airData.minTempSet"
  31. :max="airData.maxTempSet"
  32. @onEnd="setAirStatus('tempSet')"></Slider>
  33. </div>
  34. <!--风量调整-->
  35. <div class="air-volume" v-show="airData.isOpen">
  36. <div class="volume-left">
  37. <div class="volume-top">
  38. <!-- <span :class="airData.gear == 0 ? 'span-active' : ''">0</span> -->
  39. <span :class="airData.gear == 1 ? 'span-active' : ''">1</span>
  40. <span :class="airData.gear == 2 ? 'span-active' : ''">2</span>
  41. <span :class="airData.gear == 3 ? 'span-active' : ''">3</span>
  42. <span :class="airData.gear == 4 ? 'span-active' : ''">4</span>
  43. <span :class="airData.gear == 5 ? 'span-active' : ''">5</span>
  44. </div>
  45. <div class="text">{{ $t(`air.风量调节`) }}</div>
  46. </div>
  47. <div class="volume-right">
  48. <div class="control-item" :ref="setRef" data-type="minus" @click.prevent.stop="handle('minus')">
  49. <img class="icon" :src="buttonStates.minus ? MinusIconActive : MinusIcon" />
  50. </div>
  51. <div class="control-item" :ref="setRef" data-type="plus" @click.prevent.stop="handle('plus')">
  52. <img class="icon" :src="buttonStates.plus ? AddIconActive : AddIcon" />
  53. </div>
  54. <div class="control-item" @click.prevent.stop="handle('auto')">
  55. <img class="icon" :src="airData.isAutoGear ? AutoIconActive : AutoIcon" />
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. </template>
  62. <script setup>
  63. import AddIcon from '@/assets/taiguv1/svg/add_icon.svg'
  64. import AddIconActive from '@/assets/taiguv1/svg/add_icon_active.svg'
  65. import AutoIcon from '@/assets/taiguv1/svg/auto_icon.svg'
  66. import AutoIconActive from '@/assets/taiguv1/svg/auto_icon_active.svg'
  67. import MinusIcon from '@/assets/taiguv1/svg/minus_icon.svg'
  68. import MinusIconActive from '@/assets/taiguv1/svg/minus_icon_active.svg'
  69. import FilterIcon from '@/assets/taiguv1/svg/filter_icon.svg'
  70. import Slider from '@/components/slider/Slider.vue'
  71. import SwitchButton from '@/components/switch-button/SwitchButton.vue'
  72. import useDeviceControl from '@/hooks/useDeviceControl'
  73. import { useStore } from '@/store'
  74. import { parseImgUrl } from '@/utils'
  75. import { nextTick } from 'process'
  76. import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
  77. const store = useStore()
  78. const deviceControl = useDeviceControl()
  79. const controlBtn = ref([])
  80. const setRef = el => {
  81. if (el) {
  82. if (!controlBtn.value.includes(el)) {
  83. controlBtn.value.push(el)
  84. }
  85. }
  86. }
  87. const props = defineProps({
  88. status: {
  89. type: Object,
  90. default: function () {
  91. return {
  92. isOpen: false,
  93. gear: 1,
  94. minTempSet: 16,
  95. maxTempSet: 32,
  96. tempSet: 24,
  97. isAutoGear: false,
  98. switchLoading: false
  99. }
  100. }
  101. },
  102. equipList: {
  103. type: Array,
  104. default: function () {
  105. return []
  106. }
  107. }
  108. })
  109. const airData = ref({
  110. isOpen: false,
  111. gear: 1,
  112. minTempSet: 16,
  113. maxTempSet: 32,
  114. tempSet: 16,
  115. isAutoGear: false,
  116. switchLoading: false
  117. })
  118. watch(
  119. () => props.status,
  120. (newVal, oldVal) => {
  121. if (!newVal) {
  122. return
  123. }
  124. compareStatus(newVal)
  125. },
  126. { deep: true } // 添加深度监听
  127. )
  128. const compareStatus = data => {
  129. let { minTempSet, maxTempSet } = airData.value
  130. const updateAirData = () => {
  131. airData.value = {
  132. ...data,
  133. isOpen: data.runStatus === 1,
  134. minTempSet,
  135. maxTempSet
  136. }
  137. }
  138. if (allAirStatus.value.all) {
  139. const { lastSwitchStatus } = allAirStatus.value.all
  140. if (lastSwitchStatus == data.runStatus) {
  141. store.dispatch('taiguv1/setAirStatus', {
  142. id: 'all',
  143. status: {
  144. loading: false,
  145. lastSwitchStatus: null
  146. }
  147. })
  148. updateAirData()
  149. } else if (lastSwitchStatus === null) {
  150. console.log('debugger')
  151. updateAirData()
  152. } else {
  153. airData.value = {
  154. ...data,
  155. isOpen: lastSwitchStatus,
  156. minTempSet,
  157. maxTempSet
  158. }
  159. }
  160. } else {
  161. updateAirData()
  162. }
  163. emit('getStatus', airData.value.isOpen)
  164. }
  165. const airSwitchStatus = computed(() => {
  166. let statusText = ''
  167. let switchStatus = false
  168. let arr = props.equipList.filter(item => item.runStatus == 1)
  169. if (arr.length == 0) {
  170. statusText = '已关闭'
  171. switchStatus = false
  172. } else {
  173. statusText = arr.length > 0 && arr.length < props.equipList.length ? '部分开启' : '已开启'
  174. switchStatus = true
  175. }
  176. return {
  177. statusText,
  178. switchStatus
  179. }
  180. })
  181. const allAirStatus = computed(() => store.state.taiguv1.airSwtichStatus)
  182. const emit = defineEmits(['getStatus'])
  183. const buttonStates = ref({
  184. minus: false,
  185. plus: false
  186. })
  187. onMounted(() => {
  188. nextTick(() => {
  189. nextTick(() => {
  190. controlBtn.value.forEach(button => {
  191. button.addEventListener('touchstart', handleTouchStart)
  192. })
  193. })
  194. })
  195. })
  196. const handleTouchStart = event => {
  197. const button = event.currentTarget
  198. const type = button.dataset.type
  199. button.classList.add('active')
  200. buttonStates.value[type] = true
  201. setTimeout(() => {
  202. button.classList.remove('active')
  203. buttonStates.value[type] = false
  204. }, 200)
  205. }
  206. onUnmounted(() => {
  207. controlBtn.value.forEach(button => {
  208. button.removeEventListener('touchstart', handleTouchStart)
  209. })
  210. })
  211. const handle = type => {
  212. if (!airData.value.gear) airData.value.gear = 1
  213. if (type === 'minus') {
  214. airData.value.gear = Math.max(airData.value.gear - 1, 1);
  215. airData.value.isAutoGear = false
  216. setAirStatus('gear')
  217. } else if (type === 'plus') {
  218. airData.value.gear += 1
  219. if (airData.value.gear > 5) {
  220. airData.value.gear = 5
  221. }
  222. airData.value.isAutoGear = false
  223. setAirStatus('gear')
  224. } else if (type === 'auto') {
  225. // TODO:自动风量
  226. airData.value.isAutoGear = true
  227. setAirStatus('auto')
  228. }
  229. }
  230. const setAirStatus = type => {
  231. if (type == 'isOpen') {
  232. store.dispatch('taiguv1/setAirStatus', {
  233. id: 'all',
  234. status: {
  235. loading: true,
  236. lastSwitchStatus: airData.value.isOpen
  237. }
  238. })
  239. }
  240. const params = deviceControl.assemblyAirCommand(airData.value[type], type, props.equipList)
  241. deviceControl.sendCommands(params)
  242. emit('getStatus', airData.value.isOpen)
  243. }
  244. const searchMore = () => {
  245. emit('showMore', 'air', true)
  246. }
  247. </script>
  248. <style lang="scss" scoped>
  249. .volumn-box {
  250. box-sizing: border-box;
  251. display: flex;
  252. flex-direction: column;
  253. justify-content: space-between;
  254. padding: 16px;
  255. width: 100%;
  256. height: 100%;
  257. border-radius: 24px 24px 44px 24px;
  258. background-color: rgba(255, 255, 255, 0.2);
  259. -webkit-backdrop-filter: blur(40px);
  260. backdrop-filter: blur(40px);
  261. box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
  262. .filter-box {
  263. margin-top: 10px;
  264. display: flex;
  265. justify-content: flex-end;
  266. gap: 10px;
  267. .filter-item {
  268. display: flex;
  269. width: 36px;
  270. height: 36px;
  271. justify-content: center;
  272. align-items: center;
  273. gap: 10px;
  274. flex-shrink: 0;
  275. border-radius: 60px;
  276. background: var(--White-White-40, rgba(255, 255, 255, 0.4));
  277. }
  278. }
  279. .top {
  280. display: flex;
  281. justify-content: space-between;
  282. align-items: center;
  283. img {
  284. width: 30px;
  285. height: 30px;
  286. }
  287. }
  288. .bottom {
  289. width: 100%;
  290. .air-info {
  291. display: flex;
  292. justify-content: space-between;
  293. align-items: end;
  294. .temp {
  295. font-family: Jost;
  296. font-size: 20px;
  297. font-weight: 300;
  298. line-height: 28px;
  299. color: rgba(0, 20, 40, 1);
  300. sup {
  301. font-family: Jost;
  302. font-size: 11px;
  303. font-weight: 400;
  304. line-height: 15px;
  305. color: rgba(0, 20, 40, 1);
  306. }
  307. }
  308. }
  309. .text {
  310. font-family: PingFang SC;
  311. font-size: 16px;
  312. font-weight: 300;
  313. line-height: 22px;
  314. letter-spacing: 0.02em;
  315. text-align: left;
  316. text-underline-position: from-font;
  317. text-decoration-skip-ink: none;
  318. color: rgba(255, 255, 255, 1);
  319. padding-bottom: 2px;
  320. }
  321. .status {
  322. font-family: PingFang SC;
  323. font-size: 11px;
  324. font-weight: 400;
  325. line-height: 15px;
  326. letter-spacing: 0.02em;
  327. color: rgba(255, 255, 255, 0.4);
  328. }
  329. .temp-box {
  330. margin-top: 8px;
  331. background: rgba(255, 255, 255, 0.6);
  332. width: 100%;
  333. height: 34px;
  334. border-radius: 12px;
  335. }
  336. }
  337. .switch-btn {
  338. margin-top: 0;
  339. width: 50px !important;
  340. height: 28px !important;
  341. border: none;
  342. }
  343. }
  344. .activeShow {
  345. background: rgba(255, 255, 255, 0.8);
  346. // -webkit-backdrop-filter: blur(40px);
  347. // backdrop-filter: blur(40px);
  348. box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
  349. .bottom {
  350. .text {
  351. color: rgba(0, 20, 40, 1);
  352. }
  353. .status {
  354. color: rgba(116, 128, 141, 1);
  355. }
  356. }
  357. }
  358. .air-volume {
  359. display: flex;
  360. margin-top: 12px;
  361. .volume-left {
  362. width: 69px;
  363. .volume-top {
  364. padding-bottom: 2px;
  365. height: 3.33vh;
  366. line-height: 1;
  367. span {
  368. display: inline-block;
  369. margin-right: 5px;
  370. font-family: Jost;
  371. font-size: 12px;
  372. font-weight: 400;
  373. line-height: 17px;
  374. color: rgba(116, 128, 141, 1);
  375. }
  376. .span-active {
  377. color: rgba(0, 20, 40, 1);
  378. font-size: 16px;
  379. line-height: 22px;
  380. }
  381. }
  382. .text {
  383. font-family: PingFang SC;
  384. font-size: 11px;
  385. font-weight: 400;
  386. line-height: 15px;
  387. letter-spacing: 0.02em;
  388. color: rgba(0, 20, 40, 1);
  389. }
  390. }
  391. .volume-right {
  392. width: 120px;
  393. display: flex;
  394. justify-content: space-between;
  395. .control-item {
  396. width: 36px;
  397. height: 36px;
  398. text-align: center;
  399. .icon {
  400. margin-top: 8px;
  401. }
  402. }
  403. }
  404. }
  405. </style>