|
@@ -114,7 +114,7 @@
|
|
|
<text>{{getopeningValue(item.sensor_params)}}%</text>
|
|
<text>{{getopeningValue(item.sensor_params)}}%</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="action-container" v-if="type_id == 49">
|
|
|
|
|
|
|
+ <view class="action-container" style="display:flex;align-items: center;" v-if="type_id == 49">
|
|
|
<view class="action-container-item" :class="n.switchValue?'action-container-container-item-active':''" v-for="(n,key) in getvalve_params(item)" :key="key">
|
|
<view class="action-container-item" :class="n.switchValue?'action-container-container-item-active':''" v-for="(n,key) in getvalve_params(item)" :key="key">
|
|
|
<view class="action-open">
|
|
<view class="action-open">
|
|
|
<view class="item-number" :class="n.switchValue?'item-number-active':''">{{n.name}}</view>
|
|
<view class="item-number" :class="n.switchValue?'item-number-active':''">{{n.name}}</view>
|
|
@@ -163,15 +163,14 @@
|
|
|
<view @click="show2 = true" class="minute">{{minute}} 分钟</view>
|
|
<view @click="show2 = true" class="minute">{{minute}} 分钟</view>
|
|
|
</u-form-item>
|
|
</u-form-item>
|
|
|
<u-form-item label="开度数值">
|
|
<u-form-item label="开度数值">
|
|
|
- <view class="slider-container">
|
|
|
|
|
|
|
+ <view class="slider-row" style="display:flex;align-items:center;"><view class="slider-container">
|
|
|
<view class="slider-min-value">10</view>
|
|
<view class="slider-min-value">10</view>
|
|
|
<view
|
|
<view
|
|
|
class="custom-progress"
|
|
class="custom-progress"
|
|
|
@touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 100)"
|
|
@touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 100)"
|
|
|
- @touchmove.stop.prevent="onSliderTouchMove($event, 10, 100)"
|
|
|
|
|
|
|
+ @touchmove="onSliderTouchMove($event, 10, 100)"
|
|
|
@touchend.stop="onSliderTouchEnd"
|
|
@touchend.stop="onSliderTouchEnd"
|
|
|
- @tap.stop="onSliderTap($event, 'openingValue', 10, 100)"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+>
|
|
|
<view class="progress-track">
|
|
<view class="progress-track">
|
|
|
<view class="progress-fill" :style="{ width: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
|
|
<view class="progress-fill" :style="{ width: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
|
|
|
<view class="progress-thumb" :style="{ left: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
|
|
<view class="progress-thumb" :style="{ left: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
|
|
@@ -179,7 +178,7 @@
|
|
|
</view>
|
|
</view>
|
|
|
<view class="slider-max-value">100</view>
|
|
<view class="slider-max-value">100</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text>
|
|
|
|
|
|
|
+ <text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text></view>
|
|
|
</u-form-item>
|
|
</u-form-item>
|
|
|
<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit">提交</u-button>
|
|
<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit">提交</u-button>
|
|
|
</u-form>
|
|
</u-form>
|
|
@@ -187,15 +186,14 @@
|
|
|
<u-popup v-model="showPopup2" mode="bottom">
|
|
<u-popup v-model="showPopup2" mode="bottom">
|
|
|
<u-form :model="form" label-width="160rpx" :label-style="{marginLeft:'20rpx'}">
|
|
<u-form :model="form" label-width="160rpx" :label-style="{marginLeft:'20rpx'}">
|
|
|
<u-form-item label="开度数值">
|
|
<u-form-item label="开度数值">
|
|
|
- <view class="slider-container">
|
|
|
|
|
|
|
+ <view class="slider-row" style="display:flex;align-items:center;"><view class="slider-container">
|
|
|
<view class="slider-min-value">10</view>
|
|
<view class="slider-min-value">10</view>
|
|
|
<view
|
|
<view
|
|
|
class="custom-progress"
|
|
class="custom-progress"
|
|
|
@touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 100)"
|
|
@touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 100)"
|
|
|
- @touchmove.stop.prevent="onSliderTouchMove($event, 10, 100)"
|
|
|
|
|
|
|
+ @touchmove="onSliderTouchMove($event, 10, 100)"
|
|
|
@touchend.stop="onSliderTouchEnd"
|
|
@touchend.stop="onSliderTouchEnd"
|
|
|
- @tap.stop="onSliderTap($event, 'openingValue', 10, 100)"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+>
|
|
|
<view class="progress-track">
|
|
<view class="progress-track">
|
|
|
<view class="progress-fill" :style="{ width: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
|
|
<view class="progress-fill" :style="{ width: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
|
|
|
<view class="progress-thumb" :style="{ left: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
|
|
<view class="progress-thumb" :style="{ left: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
|
|
@@ -203,7 +201,7 @@
|
|
|
</view>
|
|
</view>
|
|
|
<view class="slider-max-value">100</view>
|
|
<view class="slider-max-value">100</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text>
|
|
|
|
|
|
|
+ <text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text></view>
|
|
|
</u-form-item>
|
|
</u-form-item>
|
|
|
<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit2">提交</u-button>
|
|
<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit2">提交</u-button>
|
|
|
</u-form>
|
|
</u-form>
|
|
@@ -429,14 +427,16 @@ import openingDegree from '../assets/openingDegree.png';
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
onSliderTouchStart(e, field, min, max) {
|
|
onSliderTouchStart(e, field, min, max) {
|
|
|
|
|
+ const clientX = e.touches[0].clientX
|
|
|
this.sliderField = field
|
|
this.sliderField = field
|
|
|
this.sliderMin = min
|
|
this.sliderMin = min
|
|
|
this.sliderMax = max
|
|
this.sliderMax = max
|
|
|
const query = uni.createSelectorQuery().in(this)
|
|
const query = uni.createSelectorQuery().in(this)
|
|
|
- query.select('.custom-progress').boundingClientRect(rect => {
|
|
|
|
|
- this.sliderRect = rect
|
|
|
|
|
|
|
+ query.selectAll('.custom-progress').boundingClientRect(rects => {
|
|
|
|
|
+ const list = Array.isArray(rects) ? rects : []
|
|
|
|
|
+ this.sliderRect = list.find(r => r && r.width > 0) || list[0] || null
|
|
|
|
|
+ this.updateSliderValue(clientX, field, min, max)
|
|
|
}).exec()
|
|
}).exec()
|
|
|
- this.updateSliderValue(e.touches[0].clientX, field, min, max)
|
|
|
|
|
},
|
|
},
|
|
|
onSliderTouchMove(e, min, max) {
|
|
onSliderTouchMove(e, min, max) {
|
|
|
if (!this.sliderField || !this.sliderRect) return
|
|
if (!this.sliderField || !this.sliderRect) return
|
|
@@ -453,7 +453,7 @@ import openingDegree from '../assets/openingDegree.png';
|
|
|
}).exec()
|
|
}).exec()
|
|
|
},
|
|
},
|
|
|
updateSliderValue(clientX, field, min, max) {
|
|
updateSliderValue(clientX, field, min, max) {
|
|
|
- if (!this.sliderRect) return
|
|
|
|
|
|
|
+ if (!this.sliderRect || !this.sliderRect.width) return
|
|
|
let ratio = (clientX - this.sliderRect.left) / this.sliderRect.width
|
|
let ratio = (clientX - this.sliderRect.left) / this.sliderRect.width
|
|
|
ratio = Math.max(0, Math.min(1, ratio))
|
|
ratio = Math.max(0, Math.min(1, ratio))
|
|
|
const value = Math.round(min + ratio * (max - min))
|
|
const value = Math.round(min + ratio * (max - min))
|
|
@@ -1313,7 +1313,6 @@ import openingDegree from '../assets/openingDegree.png';
|
|
|
.action-container{
|
|
.action-container{
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- gap: 16rpx;
|
|
|
|
|
.action-container-item{
|
|
.action-container-item{
|
|
|
flex:1;
|
|
flex:1;
|
|
|
height: 90rpx;
|
|
height: 90rpx;
|
|
@@ -1321,6 +1320,10 @@ import openingDegree from '../assets/openingDegree.png';
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
|
padding: 8rpx;
|
|
padding: 8rpx;
|
|
|
border: 2rpx solid #999999;
|
|
border: 2rpx solid #999999;
|
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
|
+ &:last-child{
|
|
|
|
|
+ margin-right: 0;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.action-container-container-item-active{
|
|
.action-container-container-item-active{
|
|
|
border: 2rpx solid #0BBC58;
|
|
border: 2rpx solid #0BBC58;
|