CurtainOpening.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <template>
  2. <div class="curtain-temp">
  3. <div class="curtain-tep-top">
  4. <span>窗帘</span>
  5. </div>
  6. <div class="bright-box">
  7. <div class="bight-text">
  8. <span>开度</span>
  9. <span class="line"></span>
  10. <span>20%</span>
  11. </div>
  12. <div class="curtain-control">
  13. <div class="bight-slider" id="curtainSlider1">
  14. <div class="item-now" :style="{ width: itemWidth }"></div>
  15. <div class="slider-bar" id="curtainHandld1"></div>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="curtain-control top-control">
  20. <!--左边-->
  21. <div class="control-item">
  22. <img
  23. v-if="curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5"
  24. :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
  25. alt=""
  26. />
  27. <img
  28. v-else
  29. :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
  30. alt=""
  31. />
  32. </div>
  33. <!--暂停-->
  34. <div class="control-item">
  35. <img :src="parseImgUrl('page-officehome', 'curtain_stop.svg')" alt="" />
  36. </div>
  37. <!-- {{ item }} -->
  38. <!--右边-->
  39. <div class="control-item">
  40. <img
  41. v-if="curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5"
  42. :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
  43. alt=""
  44. />
  45. <img
  46. v-else
  47. :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
  48. alt=""
  49. />
  50. </div>
  51. </div>
  52. </div>
  53. </template>
  54. <script lang="ts">
  55. import {
  56. defineComponent,
  57. onMounted,
  58. reactive,
  59. toRefs,
  60. computed,
  61. watch,
  62. onUnmounted,
  63. onBeforeMount,
  64. onBeforeUnmount,
  65. nextTick,
  66. } from "vue";
  67. import { Switch, Dialog, Toast } from "vant";
  68. import { swiper } from "@/utils/swiper";
  69. import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
  70. import { parseImgUrl, setQueryConfig } from "@/utils";
  71. import any = jasmine.any;
  72. export default defineComponent({
  73. props: {
  74. curtainData: {
  75. type: Array,
  76. default: () => [],
  77. },
  78. },
  79. components: { Switch },
  80. setup(props, contx) {
  81. const propsVal = props;
  82. let timeTemp: any = null;
  83. let curtainObj: any = {};
  84. const proxyData = reactive({
  85. lampSw: false,
  86. itemWidth: "0%",
  87. parseImgUrl: parseImgUrl,
  88. curtainObj: curtainObj,
  89. curtainData: props.curtainData,
  90. //亮度滑块滑动
  91. endBoxSwiper() {
  92. let handBox: any = document.querySelector("#curtainHandld1");
  93. let sliderBox: any = document.querySelector("#curtainSlider1");
  94. let isMove: any = false;
  95. let barLeft: any = 0;
  96. let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
  97. if (!handBox) {
  98. return;
  99. }
  100. let barWidth: any = handBox.getBoundingClientRect().width;
  101. handBox.addEventListener("touchstart", function (e: any) {
  102. barLeft = isNaN(parseInt(handBox.style.left))
  103. ? 0
  104. : parseInt(handBox.style.left);
  105. isMove = true;
  106. });
  107. handBox.addEventListener("touchend", function (e: any) {
  108. isMove = false;
  109. });
  110. swiper(handBox, {
  111. swipeLeft: function (e: any) {
  112. if (isMove) {
  113. barLeft = Math.abs(barLeft);
  114. let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
  115. let left: any = barLeft - moveRealX;
  116. left = left < 0 ? 0 : left;
  117. // debugger
  118. handBox.style.left = left + "px";
  119. proxyData.itemWidth = left + barWidth / 2 + "px";
  120. }
  121. },
  122. swipeRight: function (e: any) {
  123. // debugger;
  124. if (isMove) {
  125. barLeft = Math.abs(barLeft);
  126. let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
  127. let left: any = barLeft + moveRealX;
  128. left =
  129. left >= sliderWidth - barWidth ? sliderWidth - barWidth : left;
  130. handBox.style.left = left + "px";
  131. proxyData.itemWidth = left + barWidth / 2 + "px";
  132. }
  133. },
  134. });
  135. },
  136. // 初始化滑动
  137. async barSwiperInit() {
  138. nextTick(() => {
  139. proxyData.endBoxSwiper();
  140. });
  141. },
  142. });
  143. watch(props, (newProps: any) => {});
  144. onBeforeUnmount(() => {});
  145. onMounted(() => {
  146. proxyData.curtainObj = proxyData.curtainData[0];
  147. proxyData.barSwiperInit();
  148. });
  149. return {
  150. ...toRefs(proxyData),
  151. };
  152. },
  153. });
  154. </script>
  155. <style lang="scss" scoped>
  156. .curtain-temp {
  157. padding: 24px 20px;
  158. .curtain-tep-top {
  159. display: flex;
  160. padding-bottom: 48px;
  161. line-height: 31px;
  162. justify-content: space-between;
  163. span {
  164. font-family: "PingFang SC";
  165. font-style: normal;
  166. font-weight: 500;
  167. font-size: 22px;
  168. color: #000000;
  169. }
  170. }
  171. .bright-box {
  172. .bight-text {
  173. line-height: 22px;
  174. padding-bottom: 17px;
  175. span {
  176. display: inline-block;
  177. vertical-align: middle;
  178. font-family: "PingFang SC";
  179. font-style: normal;
  180. font-weight: 600;
  181. font-size: 16px;
  182. line-height: 22px;
  183. color: #1b2129;
  184. }
  185. .line {
  186. width: 1px;
  187. margin-left: 12px;
  188. margin-right: 12px;
  189. height: 22px;
  190. border-left: 1px solid #e1e5eb;
  191. }
  192. }
  193. .curtain-control {
  194. .bight-slider {
  195. position: relative;
  196. display: flex;
  197. height: 32px;
  198. flex: 1;
  199. background: #e8ecf0;
  200. border-radius: 25px;
  201. .item-now {
  202. background: #ffe399;
  203. border-radius: 25px 0 0 25px;
  204. }
  205. .slider-bar {
  206. position: absolute;
  207. width: 38px;
  208. height: 38px;
  209. background: #f6f9fe;
  210. left: 0;
  211. bottom: -2px;
  212. z-index: 333;
  213. border-radius: 50%;
  214. border: 2px solid #fff;
  215. box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06),
  216. 0px 0px 8px rgba(0, 0, 0, 0.1);
  217. }
  218. }
  219. .temp-slider {
  220. background: linear-gradient(
  221. 90deg,
  222. #ffc079 0%,
  223. #ffe7d1 43.1%,
  224. #f1efff 74.36%,
  225. #c8d6ff 100%
  226. );
  227. }
  228. }
  229. .curtain-control-padding {
  230. padding-top: 35px;
  231. padding-bottom: 15px;
  232. }
  233. }
  234. .top-control {
  235. display: flex;
  236. justify-content: space-between;
  237. padding: 51px 27px;
  238. padding-bottom: 0;
  239. .control-item {
  240. position: relative;
  241. display: inline-block;
  242. width: 56px;
  243. height: 56px;
  244. background: #f1f4f6;
  245. border-radius: 50%;
  246. img {
  247. position: absolute;
  248. left: 50%;
  249. top: 50%;
  250. width: 16px;
  251. height: 16px;
  252. transform: translate(-50%, -50%);
  253. }
  254. }
  255. }
  256. }
  257. </style>