123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <style lang="less" scoped>
- .box {
- padding-top: 40rpx;
- }
- .box_sw {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .text_box {
- width: 335px;
- display: flex;
- justify-content: space-between;
- padding-bottom: 30rpx;
- align-items: center;
- }
- .title {
- font-family: PingFang SC;
- font-size: 44rpx;
- font-weight: 500;
- line-height: 62rpx;
- color: rgba(0, 0, 0, 1);
- }
- </style>
- <template>
- <div class="box">
- <div class="box_sw">
- <div class="text_box">
- <div class="title">{{colourItem.localName}}</div>
- </div>
- </div>
- <div v-if="colourObj.bright">
- <Slider
- :onlyLine="false"
- :typeValue="colourObj.brightPercent"
- typeName="亮度"
- type="brightSet"
- @silder-percent-value="silderVal"
- @silder-mouseEnd="mouseEnd"
- @silder-mouseStart="mouseStart"
- ></Slider>
- </div>
- <div
- style="padding-top:100rpx;"
- v-if="colourObj.colorTemperature"
- >
- <Slider
- :onlyLine="true"
- :typeValue="colourObj.tempPercent"
- typeName="色温"
- type="colorTemperatureSet"
- @silder-percent-value="silderVal"
- @silder-mouseEnd="mouseEnd"
- @silder-mouseStart="mouseStart"
- ></Slider>
- </div>
- </div>
- </template>
- <script>
- import wepy from '@wepy/core';
- import { changeManualTempHttp } from '@/packagesEnv/api/officehome.js'
- wepy.component({
- props: {
- colourObj: Object
- },
- data: {
- timerSetVal: null,
- startTime: 0,
- colourItem: {},
- renew: true
- },
- watch: {
- colourObj(val) {
- // 开始滑动了 就不再更新父级数据
- if (this.renew && val) {
- if (val.brightValue === val.brightMinValue) {
- val.brightValue = 0;
- } else {
- const brightPercent = val.brightValue / (val.brightMaxValue - val.brightMinValue) * 100;
- val.brightPercent = Math.floor(brightPercent);
- }
- if (val.colorTempValue === val.colorTempMinValue) {
- val.colorTempValue = 0;
- } else {
- const tempPercent = val.colorTempValue / (val.colorTempMaxValue - val.colorTempMinValue) * 100;
- val.tempPercent = Math.floor(tempPercent);
- }
- this.colourItem = JSON.parse(JSON.stringify(val))
- }
- }
- },
- methods: {
- // 下发色温指令
- setColour(obj) {
- let paramsObj = JSON.parse(JSON.stringify(obj));
- paramsObj.id = this.colourItem.id;
- paramsObj.code = obj.type;
- delete paramsObj.type
- const arr = [paramsObj]
- changeManualTempHttp(arr)
- },
- countVal(obj) {
- let dxValue = 0;
- if (obj.type === 'brightSet') {
- if (obj.value < this.colourItem.brightMinValue) {
- obj.value = this.colourItem.brightMinValue
- return obj;
- }
- dxValue = this.colourItem.brightMaxValue - this.colourItem.brightMinValue;
- } else {
- if (obj.value < this.colourItem.colorTempMinValue) {
- obj.value = this.colourItem.brightMinValue
- return obj;
- }
- dxValue = this.colourItem.colorTempMaxValue - this.colourItem.colorTempMinValue;
- }
- obj.value = Math.floor(obj.value / 100 * (dxValue));
- return obj
- },
- // 滑动
- silderVal(obj) {
- // 值 obj.value 色温还是亮度 obj.type
- obj = this.countVal(obj);
- const endTime = Date.parse(new Date());
- const dx = endTime - this.startTime;
- if (dx === 1000) {
- this.startTime = endTime;
- this.setColour(obj);
- }
- },
- // 滑动开始
- mouseStart() {
- this.startTime = Date.parse(new Date());
- this.renew = false;
- },
- // 滑动停止
- mouseEnd(obj) {
- obj = this.countVal(obj);
- this.setColour(obj);
- }
- }
- })
- </script>
- <config>
- {
- usingComponents: {
- "Slider": "../comComponents/Slider",
- }
- }
- </config>
|