|
|
@@ -27,6 +27,7 @@
|
|
|
<view class="device-detail-btn" @click="setDeviceContorl('dtu_update')">升级</view>
|
|
|
<view class="device-detail-btn" @click="setDeviceContorl('dtu_reboot')">重启</view>
|
|
|
<!-- <view class="device-detail-btn" @click="showMqttConfig">MQTT配置</view> -->
|
|
|
+ <view class="device-detail-btn" @click="setDeviceContorl('yfwlw')">平台切换</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="device-detail-item">
|
|
|
@@ -39,9 +40,9 @@
|
|
|
<view class="device-detail-item">
|
|
|
<text class="device-detail-label">强制操作</text>
|
|
|
<view class="device-detail-btn-container">
|
|
|
- <view class="device-detail-btn force-btn" @click="setDeviceContorl('takephoto')">拍照</view>
|
|
|
<view class="device-detail-btn force-btn" @click="setDeviceContorl('update')">升级</view>
|
|
|
<view class="device-detail-btn force-btn" @click="setDeviceContorl('reboot')">重启</view>
|
|
|
+ <view class="device-detail-btn force-btn" @click="setDeviceContorl('takephoto')">立即拍照</view>
|
|
|
<view class="device-detail-btn force-btn" @click="setDeviceContorl('autotakephoto')">对焦拍照</view>
|
|
|
<view class="device-detail-btn force-btn" @click="setDeviceContorl('turn')">转仓</view>
|
|
|
</view>
|
|
|
@@ -60,21 +61,120 @@
|
|
|
<view class="end-time" @click="showPickerHandler(index,'end_time')">{{item.end_time_label || '结束时间'}}
|
|
|
</view><u-icon name="clock" color="#4E5969" size="26" style="padding-right: 20rpx"></u-icon>
|
|
|
</view>
|
|
|
- <view class="device-detail-viewImage">
|
|
|
- <text class="device-detail-label">高温保护阀值(℃)
|
|
|
- {{ equipContrlForm.tph }}</text>
|
|
|
+ <view class="device-detail-viewImage" v-if="device_model == 51">
|
|
|
+ <text class="device-detail-label">高温保护阀值(℃) {{ sliderField === 'tph' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tph }}</text>
|
|
|
</view>
|
|
|
- <u-slider v-model="equipContrlForm.tph" style="width:100%" :min="50" :max="70" active-color="#0bbc58"></u-slider>
|
|
|
- <view class="device-detail-viewImage">
|
|
|
- <text class="device-detail-label">低温保护阀值(℃)
|
|
|
- {{ equipContrlForm.tpl }}</text>
|
|
|
+ <view class="slider-container" v-if="device_model == 51">
|
|
|
+ <view class="slider-min-value">50</view>
|
|
|
+ <view
|
|
|
+ class="custom-progress"
|
|
|
+ @touchstart.stop="onSliderTouchStart($event, 'tph', 50, 70, 1)"
|
|
|
+ @touchmove.stop.prevent="onSliderTouchMove($event, 50, 70, 1)"
|
|
|
+ @touchend.stop="onSliderTouchEnd"
|
|
|
+ @tap.stop="onSliderTap($event, 'tph', 50, 70, 1)"
|
|
|
+ >
|
|
|
+ <view class="progress-track">
|
|
|
+ <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'tph' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tph, 50, 70) + '%' }"></view>
|
|
|
+ <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'tph' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tph, 50, 70) + '%' }"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="slider-max-value">70</view>
|
|
|
+ </view>
|
|
|
+ <view class="device-detail-viewImage" v-if="device_model == 0">
|
|
|
+ <text class="device-detail-label">载玻片滴液时间(h) {{ sliderField === 'drop_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.drop_time }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="slider-container" v-if="device_model == 0">
|
|
|
+ <view class="slider-min-value">1</view>
|
|
|
+ <view
|
|
|
+ class="custom-progress"
|
|
|
+ @touchstart.stop="onSliderTouchStart($event, 'drop_time', 1, 30, 1)"
|
|
|
+ @touchmove.stop.prevent="onSliderTouchMove($event, 1, 30, 1)"
|
|
|
+ @touchend.stop="onSliderTouchEnd"
|
|
|
+ @tap.stop="onSliderTap($event, 'drop_time', 1, 30, 1)"
|
|
|
+ >
|
|
|
+ <view class="progress-track">
|
|
|
+ <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'drop_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.drop_time, 1, 30) + '%' }"></view>
|
|
|
+ <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'drop_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.drop_time, 1, 30) + '%' }"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="slider-max-value">30</view>
|
|
|
+ </view>
|
|
|
+ <view class="device-detail-viewImage" v-if="device_model == 0">
|
|
|
+ <text class="device-detail-label">孢子培养时间(h) {{ sliderField === 'cul_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.cul_time }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="slider-container" v-if="device_model == 0">
|
|
|
+ <view class="slider-min-value">1</view>
|
|
|
+ <view
|
|
|
+ class="custom-progress"
|
|
|
+ @touchstart.stop="onSliderTouchStart($event, 'cul_time', 1, 24, 1)"
|
|
|
+ @touchmove.stop.prevent="onSliderTouchMove($event, 1, 24, 1)"
|
|
|
+ @touchend.stop="onSliderTouchEnd"
|
|
|
+ @tap.stop="onSliderTap($event, 'cul_time', 1, 24, 1)"
|
|
|
+ >
|
|
|
+ <view class="progress-track">
|
|
|
+ <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'cul_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.cul_time, 1, 24) + '%' }"></view>
|
|
|
+ <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'cul_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.cul_time, 1, 24) + '%' }"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="slider-max-value">24</view>
|
|
|
+ </view>
|
|
|
+ <view class="device-detail-viewImage" v-if="device_model == 0">
|
|
|
+ <text class="device-detail-label">保温仓设定温度(℃) {{ sliderField === 'set_temp' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.set_temp }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="slider-container" v-if="device_model == 0">
|
|
|
+ <view class="slider-min-value">10</view>
|
|
|
+ <view
|
|
|
+ class="custom-progress"
|
|
|
+ @touchstart.stop="onSliderTouchStart($event, 'set_temp', 10, 40, 1)"
|
|
|
+ @touchmove.stop.prevent="onSliderTouchMove($event, 10, 40, 1)"
|
|
|
+ @touchend.stop="onSliderTouchEnd"
|
|
|
+ @tap.stop="onSliderTap($event, 'set_temp', 10, 40, 1)"
|
|
|
+ >
|
|
|
+ <view class="progress-track">
|
|
|
+ <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'set_temp' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.set_temp, 10, 40) + '%' }"></view>
|
|
|
+ <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'set_temp' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.set_temp, 10, 40) + '%' }"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="slider-max-value">40</view>
|
|
|
+ </view>
|
|
|
+ <view class="device-detail-viewImage" v-if="device_model == 51">
|
|
|
+ <text class="device-detail-label">低温保护阀值(℃) {{ sliderField === 'tpl' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tpl }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="slider-container" v-if="device_model == 51">
|
|
|
+ <view class="slider-min-value">-30</view>
|
|
|
+ <view
|
|
|
+ class="custom-progress"
|
|
|
+ @touchstart.stop="onSliderTouchStart($event, 'tpl', -30, 20, 1)"
|
|
|
+ @touchmove.stop.prevent="onSliderTouchMove($event, -30, 20, 1)"
|
|
|
+ @touchend.stop="onSliderTouchEnd"
|
|
|
+ @tap.stop="onSliderTap($event, 'tpl', -30, 20, 1)"
|
|
|
+ >
|
|
|
+ <view class="progress-track">
|
|
|
+ <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'tpl' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tpl, -30, 20) + '%' }"></view>
|
|
|
+ <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'tpl' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tpl, -30, 20) + '%' }"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="slider-max-value">20</view>
|
|
|
</view>
|
|
|
- <u-slider v-model="equipContrlForm.tpl" style="width:100%" :min="-30" :max="20" active-color="#0bbc58"></u-slider>
|
|
|
<view class="device-detail-viewImage">
|
|
|
- <text class="device-detail-label">数据上传间隔(min)
|
|
|
- {{ equipContrlForm.datt }}</text>
|
|
|
+ <text class="device-detail-label">数据上传间隔(min) {{ sliderField === 'datt' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.datt }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="slider-container">
|
|
|
+ <view class="slider-min-value">10</view>
|
|
|
+ <view
|
|
|
+ class="custom-progress"
|
|
|
+ @touchstart.stop="onSliderTouchStart($event, 'datt', 10, 60, 10)"
|
|
|
+ @touchmove.stop.prevent="onSliderTouchMove($event, 10, 60, 10)"
|
|
|
+ @touchend.stop="onSliderTouchEnd"
|
|
|
+ @tap.stop="onSliderTap($event, 'datt', 10, 60, 10)"
|
|
|
+ >
|
|
|
+ <view class="progress-track">
|
|
|
+ <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'datt' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.datt, 10, 60) + '%' }"></view>
|
|
|
+ <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'datt' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.datt, 10, 60) + '%' }"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="slider-max-value">60</view>
|
|
|
</view>
|
|
|
- <u-slider v-model="equipContrlForm.datt" style="width:100%;" :max="60" :min="10" active-color="#0bbc58"></u-slider>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="device-detail-btn-footer" v-if="activeTab === 'viewImage'">
|
|
|
@@ -130,11 +230,19 @@ export default {
|
|
|
show: false,
|
|
|
checked: false,
|
|
|
currentIndex: -1,
|
|
|
- currentType: ''
|
|
|
+ currentType: '',
|
|
|
+ sliderDragValue: null,
|
|
|
+ sliderRect: null,
|
|
|
+ sliderField: '',
|
|
|
+ sliderMin: 0,
|
|
|
+ sliderMax: 100,
|
|
|
+ device_model: '',
|
|
|
+ sliderStep: 1
|
|
|
}
|
|
|
},
|
|
|
onLoad(options){
|
|
|
this.d_id = options.d_id;
|
|
|
+ this.device_model = options.device_model;
|
|
|
this.getControlDeviceConfigInfo();
|
|
|
this.timeList = [];
|
|
|
for(let i = 0;i<24;i++){
|
|
|
@@ -151,11 +259,95 @@ export default {
|
|
|
this.activeTab = 'pestAnalysis'
|
|
|
}else{
|
|
|
this.activeTab = 'viewImage'
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.cacheSliderRect()
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
+ getProgressWidth(value, min, max) {
|
|
|
+ if (max === min) return 0
|
|
|
+ return ((value - min) / (max - min)) * 100
|
|
|
+ },
|
|
|
+ cacheSliderRect() {
|
|
|
+ const query = uni.createSelectorQuery().in(this)
|
|
|
+ query.select('.custom-progress').boundingClientRect(rect => {
|
|
|
+ if (rect) {
|
|
|
+ this.sliderRect = rect
|
|
|
+ }
|
|
|
+ }).exec()
|
|
|
+ },
|
|
|
+ onSliderTouchStart(e, field, min, max, step) {
|
|
|
+ this.sliderField = field
|
|
|
+ this.sliderMin = min
|
|
|
+ this.sliderMax = max
|
|
|
+ this.sliderStep = step || 1
|
|
|
+ this._lastUpdateTime = 0
|
|
|
+ this._touchX = e.touches[0].clientX
|
|
|
+ if (!this.sliderRect) {
|
|
|
+ const query = uni.createSelectorQuery().in(this)
|
|
|
+ query.select('.custom-progress').boundingClientRect(rect => {
|
|
|
+ this.sliderRect = rect
|
|
|
+ this._applyDragValue(e.touches[0].clientX)
|
|
|
+ }).exec()
|
|
|
+ } else {
|
|
|
+ this._applyDragValue(e.touches[0].clientX)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSliderTouchMove(e, min, max, step) {
|
|
|
+ if (!this.sliderField || !this.sliderRect) return
|
|
|
+ this._touchX = e.touches[0].clientX
|
|
|
+ const now = Date.now()
|
|
|
+ if (now - this._lastUpdateTime < 33) return
|
|
|
+ this._lastUpdateTime = now
|
|
|
+ this._applyDragValue(e.touches[0].clientX)
|
|
|
+ },
|
|
|
+ onSliderTouchEnd(e) {
|
|
|
+ const clientX = (e.changedTouches && e.changedTouches[0])
|
|
|
+ ? e.changedTouches[0].clientX
|
|
|
+ : this._touchX
|
|
|
+ if (this.sliderField && this.sliderRect && clientX != null) {
|
|
|
+ const ratio = Math.max(0, Math.min(1,
|
|
|
+ (clientX - this.sliderRect.left) / this.sliderRect.width))
|
|
|
+ const value = this._snapToStep(Math.round(this.sliderMin + ratio * (this.sliderMax - this.sliderMin)))
|
|
|
+ this.$set(this.equipContrlForm, this.sliderField, value)
|
|
|
+ }
|
|
|
+ this.sliderField = ''
|
|
|
+ this.sliderDragValue = null
|
|
|
+ this._lastUpdateTime = 0
|
|
|
+ this._touchX = 0
|
|
|
+ },
|
|
|
+ onSliderTap(e, field, min, max, step) {
|
|
|
+ const snap = step || 1
|
|
|
+ const apply = (rect) => {
|
|
|
+ const ratio = Math.max(0, Math.min(1, e.detail.x / rect.width))
|
|
|
+ const raw = Math.round(min + ratio * (max - min))
|
|
|
+ const snapped = Math.round((raw - min) / snap) * snap + min
|
|
|
+ this.$set(this.equipContrlForm, field, Math.max(min, Math.min(max, snapped)))
|
|
|
+ }
|
|
|
+ if (!this.sliderRect) {
|
|
|
+ const query = uni.createSelectorQuery().in(this)
|
|
|
+ query.select('.custom-progress').boundingClientRect(rect => {
|
|
|
+ this.sliderRect = rect
|
|
|
+ apply(rect)
|
|
|
+ }).exec()
|
|
|
+ } else {
|
|
|
+ apply(this.sliderRect)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ _applyDragValue(clientX) {
|
|
|
+ const ratio = Math.max(0, Math.min(1,
|
|
|
+ (clientX - this.sliderRect.left) / this.sliderRect.width))
|
|
|
+ const raw = Math.round(this.sliderMin + ratio * (this.sliderMax - this.sliderMin))
|
|
|
+ this.sliderDragValue = this._snapToStep(raw)
|
|
|
+ },
|
|
|
+ _snapToStep(value) {
|
|
|
+ const step = this.sliderStep || 1
|
|
|
+ const snapped = Math.round((value - this.sliderMin) / step) * step + this.sliderMin
|
|
|
+ return Math.max(this.sliderMin, Math.min(this.sliderMax, snapped))
|
|
|
+ },
|
|
|
clearTime(){
|
|
|
this.coll_time.forEach(item => {
|
|
|
item.start_time = '';
|
|
|
@@ -232,6 +424,11 @@ export default {
|
|
|
},
|
|
|
handleTabClick(tab) {
|
|
|
this.activeTab = tab;
|
|
|
+ if (tab === 'viewImage') {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.cacheSliderRect()
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
showMqttConfig(){
|
|
|
this.show = true;
|
|
|
@@ -241,7 +438,7 @@ export default {
|
|
|
},
|
|
|
async setDeviceContorl(type){
|
|
|
const data = {
|
|
|
- device_type_id: 3,
|
|
|
+ device_type_id: 7,
|
|
|
d_id: this.d_id,
|
|
|
cmd: type,
|
|
|
}
|
|
|
@@ -271,22 +468,22 @@ export default {
|
|
|
},
|
|
|
saveSettings(){
|
|
|
let newForm = Object.assign({}, this.equipContrlForm) // 深拷贝
|
|
|
- newForm.st = newForm.st + ''
|
|
|
- newForm.et = newForm.et + ''
|
|
|
- newForm.st && newForm.st.slice(0, 2).charAt(0) != '0'
|
|
|
- ? newForm.st.slice(0, 2)
|
|
|
- : newForm.st.slice(1, 2)
|
|
|
- newForm.et =
|
|
|
- newForm.et && newForm.et.slice(0, 2).charAt(0) != '0'
|
|
|
- ? newForm.et.slice(0, 2)
|
|
|
- : newForm.et.slice(1, 2)
|
|
|
+ // newForm.st = newForm.st + ''
|
|
|
+ // newForm.et = newForm.et + ''
|
|
|
+ // newForm.st && newForm.st.slice(0, 2).charAt(0) != '0'
|
|
|
+ // ? newForm.st.slice(0, 2)
|
|
|
+ // : newForm.st.slice(1, 2)
|
|
|
+ // newForm.et =
|
|
|
+ // newForm.et && newForm.et.slice(0, 2).charAt(0) != '0'
|
|
|
+ // ? newForm.et.slice(0, 2)
|
|
|
+ // : newForm.et.slice(1, 2)
|
|
|
|
|
|
for (let k in newForm) {
|
|
|
if (typeof newForm[k] === 'number') {
|
|
|
newForm[k] = newForm[k] + ''
|
|
|
}
|
|
|
}
|
|
|
- newForm.st = newForm.st.replace(':00', '')
|
|
|
+ // newForm.st = newForm.st.replace(':00', '')
|
|
|
console.log(this.coll_time,'coll_timecoll_timecoll_time')
|
|
|
const coll_time = [];
|
|
|
for(let i = 0;i< this.coll_time.length;i++){
|
|
|
@@ -296,11 +493,24 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
newForm.coll_time = coll_time
|
|
|
+ newForm.admin = Number(newForm.admin);
|
|
|
+ newForm.drop_time = Number(newForm.drop_time);
|
|
|
+ newForm.cul_time = Number(newForm.cul_time);
|
|
|
+ newForm.set_temp = Number(newForm.set_temp);
|
|
|
+ newForm.datt = Number(newForm.datt);
|
|
|
+ newForm.cold_sw = Number(newForm.cold_sw);
|
|
|
+ newForm.on_off = Number(newForm.on_off);
|
|
|
+ newForm.tpl = Number(newForm.tpl);
|
|
|
+ newForm.tph = Number(newForm.tph);
|
|
|
+ if(this.device_model == 0){
|
|
|
+ delete newForm.tpl
|
|
|
+ delete newForm.tph
|
|
|
+ }
|
|
|
this.$myRequest({
|
|
|
url: '/api/api_gateway?method=forecast.send_control.device_control',
|
|
|
method: 'POST',
|
|
|
data: {
|
|
|
- device_type_id: 3,
|
|
|
+ device_type_id: 7,
|
|
|
d_id: this.d_id,
|
|
|
config: JSON.stringify(newForm)
|
|
|
}
|
|
|
@@ -449,6 +659,52 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .slider-container{
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .slider-min-value{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: -50rpx;
|
|
|
+ }
|
|
|
+ .slider{
|
|
|
+ width: 600rpx;
|
|
|
+ }
|
|
|
+ .slider-max-value{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .custom-progress{
|
|
|
+ width: 600rpx;
|
|
|
+ padding: 0;
|
|
|
+ .progress-track{
|
|
|
+ position: relative;
|
|
|
+ height: 12rpx;
|
|
|
+ background-color: #ebedf0;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ }
|
|
|
+ .progress-fill{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #0BBC58;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ }
|
|
|
+ .progress-thumb{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-left: -14rpx;
|
|
|
+ margin-top: -14rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0 1px 4px rgba(0,0,0,0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
.device-detail-content{
|
|
|
display: flex;
|
|
|
padding: 24rpx 32rpx;
|