lamp-colour.wpy 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <style lang="less" scoped>
  2. .box {
  3. padding-top: 40rpx;
  4. }
  5. .box_sw {
  6. display: flex;
  7. justify-content: center;
  8. align-items: center;
  9. }
  10. .text_box {
  11. width: 335px;
  12. display: flex;
  13. justify-content: space-between;
  14. padding-bottom: 30rpx;
  15. align-items: center;
  16. }
  17. .title {
  18. font-family: PingFang SC;
  19. font-size: 44rpx;
  20. font-weight: 500;
  21. line-height: 62rpx;
  22. color: rgba(0, 0, 0, 1);
  23. }
  24. </style>
  25. <template>
  26. <div class="box">
  27. <div class="box_sw">
  28. <div class="text_box">
  29. <div class="title">{{colourItem.localName}}</div>
  30. </div>
  31. </div>
  32. <div v-if="colourObj.bright">
  33. <Slider
  34. :onlyLine="false"
  35. :typeValue="colourObj.brightPercent"
  36. typeName="亮度"
  37. type="brightSet"
  38. @silder-percent-value="silderVal"
  39. @silder-mouseEnd="mouseEnd"
  40. @silder-mouseStart="mouseStart"
  41. ></Slider>
  42. </div>
  43. <div
  44. style="padding-top:100rpx;"
  45. v-if="colourObj.colorTemperature"
  46. >
  47. <Slider
  48. :onlyLine="true"
  49. :typeValue="colourObj.tempPercent"
  50. typeName="色温"
  51. type="colorTemperatureSet"
  52. @silder-percent-value="silderVal"
  53. @silder-mouseEnd="mouseEnd"
  54. @silder-mouseStart="mouseStart"
  55. ></Slider>
  56. </div>
  57. </div>
  58. </template>
  59. <script>
  60. import wepy from '@wepy/core';
  61. import { changeManualTempHttp } from '@/packagesEnv/api/officehome.js'
  62. wepy.component({
  63. props: {
  64. colourObj: Object
  65. },
  66. data: {
  67. timerSetVal: null,
  68. startTime: 0,
  69. colourItem: {},
  70. renew: true
  71. },
  72. watch: {
  73. colourObj(val) {
  74. // 开始滑动了 就不再更新父级数据
  75. if (this.renew && val) {
  76. if (val.brightValue === val.brightMinValue) {
  77. val.brightValue = 0;
  78. } else {
  79. const brightPercent = val.brightValue / (val.brightMaxValue - val.brightMinValue) * 100;
  80. val.brightPercent = Math.floor(brightPercent);
  81. }
  82. if (val.colorTempValue === val.colorTempMinValue) {
  83. val.colorTempValue = 0;
  84. } else {
  85. const tempPercent = val.colorTempValue / (val.colorTempMaxValue - val.colorTempMinValue) * 100;
  86. val.tempPercent = Math.floor(tempPercent);
  87. }
  88. this.colourItem = JSON.parse(JSON.stringify(val))
  89. }
  90. }
  91. },
  92. methods: {
  93. // 下发色温指令
  94. setColour(obj) {
  95. let paramsObj = JSON.parse(JSON.stringify(obj));
  96. paramsObj.id = this.colourItem.id;
  97. paramsObj.code = obj.type;
  98. delete paramsObj.type
  99. const arr = [paramsObj]
  100. changeManualTempHttp(arr)
  101. },
  102. countVal(obj) {
  103. let dxValue = 0;
  104. if (obj.type === 'brightSet') {
  105. if (obj.value < this.colourItem.brightMinValue) {
  106. obj.value = this.colourItem.brightMinValue
  107. return obj;
  108. }
  109. dxValue = this.colourItem.brightMaxValue - this.colourItem.brightMinValue;
  110. } else {
  111. if (obj.value < this.colourItem.colorTempMinValue) {
  112. obj.value = this.colourItem.brightMinValue
  113. return obj;
  114. }
  115. dxValue = this.colourItem.colorTempMaxValue - this.colourItem.colorTempMinValue;
  116. }
  117. obj.value = Math.floor(obj.value / 100 * (dxValue));
  118. return obj
  119. },
  120. // 滑动
  121. silderVal(obj) {
  122. // 值 obj.value 色温还是亮度 obj.type
  123. obj = this.countVal(obj);
  124. const endTime = Date.parse(new Date());
  125. const dx = endTime - this.startTime;
  126. if (dx === 1000) {
  127. this.startTime = endTime;
  128. this.setColour(obj);
  129. }
  130. },
  131. // 滑动开始
  132. mouseStart() {
  133. this.startTime = Date.parse(new Date());
  134. this.renew = false;
  135. },
  136. // 滑动停止
  137. mouseEnd(obj) {
  138. obj = this.countVal(obj);
  139. this.setColour(obj);
  140. }
  141. }
  142. })
  143. </script>
  144. <config>
  145. {
  146. usingComponents: {
  147. "Slider": "../comComponents/Slider",
  148. }
  149. }
  150. </config>