bigDataApp/pages/cb/zhamenFirst/controls.vue

<template>
  <view class="control-container">
    <custom-card>
      <block slot="backText">{{ title }}</block>
    </custom-card>
    <view class="control-content" v-if="leftList.length > 0">
      <view class="control-list-left">
        <view
          class="control-list-left-item"
          v-for="(item, index) in leftList"
          :key="index"
          @click="controlClick(index)"
          :class="{ 'control-list-left-item-active': index === activeIndex }"
        >
          {{ item.title }}
        </view>
      </view>
      <view class="control-list-right">
        <view class="action-container" v-if="deviceList.length > 0">
          <view class="action-button" @click="openAll">一键开启</view>
          <view class="action-button action-button-plain" @click="closeAll">一键关闭</view>
        </view>
        <view
          v-for="(item, index) in deviceList"
          class="control-list-right-item"
          :key="index"
        >
          <view style="display: flex; align-items: center;" v-if="item.sfType != '10'">
            <view class="control-list-right-item-icon">
              <image
                :src="solenoidValve"
                class="solenoid-valve"
              />
            </view>
            <view class="control-list-right-item-title">{{
              item.device_name
            }}</view>
            <view class="control-list-right-item-action">
              <u-switch
                :value="item.device_status == 1 ? true : false"
                activeColor="#0BBC58"
                size="40"
                inactiveColor="rgb(230, 230, 230)"
              ></u-switch>
            </view>
          </view>
        </view>
        <u-empty v-if="deviceList.length === 0" text="暂无数据"></u-empty>
      </view>
    </view>
    <u-empty v-else text="暂无数据"></u-empty>
    <u-popup v-model="showPopup" mode="bottom">
			<u-form :model="form" label-width="160rpx" :label-style="{marginLeft:'20rpx'}">
				<u-form-item label="开启状态">
					<u-radio-group v-model="value">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in radioList" :key="index" 
							:name="item.value"
							active-color="#0BBC58"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="开阀时间" v-if="value == 1">
					<view @click="show1 = true" class="hour">{{hour}} 小时</view>
				</u-form-item>
				<u-form-item label="开度数值">
					<view class="slider-row" style="display:flex;align-items:center;"><view class="slider-container">
          <view class="slider-min-value">10</view>
          <view
            :class="['custom-progress', { dragging: sliderDragging }]"
            @touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 100)"
            @touchmove="onSliderTouchMove($event, 10, 100)"
            @touchend.stop="onSliderTouchEnd"
>
            <view class="progress-track">
              <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>
          </view>
          <view class="slider-max-value">100</view>
        </view>
				<text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text></view>
				</u-form-item>
				<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit">提交</u-button>
			</u-form>
		</u-popup>
    <u-modal
      v-model="show2"
      :title="'提示'"
      :content="content"
      @confirm="confirmHandle"
      @cancel="show2 = false"
      :mask-close-able="true" 
      :show-cancel-button="true"
    ></u-modal>
    <u-select v-model="show1" :list="hours" @confirm="changeHour"></u-select>
    <u-popup v-model="show4" mode="center" width="80%" :mask-close-able="false">
			<view class="progress-container">
				<u-line-progress :percent="percentage" style="width: 90%;"></u-line-progress>
			</view>
		</u-popup>
  </view>
</template>
<script>
import solenoidValve from './assets/solenoidValve.png';

export default {
  name: 'control',
  data() {
    return {
      show1: false,
      show2: false,
      show4: false,
      percentage: 0,
      activeIndex: 0,
      showPopup: false,
      content:'确定一键关闭所有阀门吗？',
      value: 0,
      sliderField: '',
      sliderMin: 0,
			hours: [],
      sliderMax: 0,
			sliderRect: {},
      hour: 1,
      minute: 0,
      form: {},
      radioList:[{
        name:'常开',
        value:0
      },
      {
        name:'定时',
        value:1
      }],
      sliderDragging: false,
      equipContrlForm: {
        openingValue: 60,
      },
      solenoidValve,
      title: '分组控制',
      leftList: [],
      deviceList: [],
      timer: null,
    };
  },
  methods: {
    changeHour(e){
      this.hour = e[0].value
    },
    setPercentage(msg){
      this.timer = setInterval(() => {
        this.percentage += 1;
        if(this.percentage >= 100){
          this.percentage = 100;
          uni.showToast({
            title: msg,
            icon: 'none',
          });
          clearInterval(this.timer);
          this.show4 = false;
          this.percentage = 0;
          this.getdeviceSfStatus();
        }
      }, 125);
    },
    getHours(){
      for(let i = 1; i <= 12; i++){
        this.hours.push({
          label: i + ' 时',
          value: i,
        })
      }
    },
   async confirmHandle(){
      const data = {
        group_id: this.leftList[this.activeIndex].id,
        control_type:'close',
      };
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.valvecontrol.control_huapu_valve_group',
        method: 'post',
        data
      });
      if(res.code == 0){
        this.show4 = true;
        this.setPercentage(res.msg);
      }
      this.showPopup = false;
      this.show2 = false;
    },
   async submit(){
      const data = {
        group_id: this.leftList[this.activeIndex].id,
        control_type:'open',
        valve_delayed: this.value == 0 ? 0 : this.hour * 60 + this.minute,
        var_value: this.equipContrlForm.openingValue,
      };
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.valvecontrol.control_huapu_valve_group',
        method: 'post',
        data
      });
      if(res.code == 0){
        this.show4 = true;
        this.setPercentage(res.msg);
      }
      this.showPopup = false;
      this.show2 = false;
    },
    getProgressWidth(value, min, max) {
      if (max === min) return 0
      return ((value - min) / (max - min)) * 100
    },
    getModel(value){
      return value == 0 ? false : true
    },
    controlClick(index) {
      this.activeIndex = index;
      this.deviceList = this.leftList[this.activeIndex]?.device_list || [];
    },
    onSliderTouchStart(e, field, min, max) {
      this.sliderDragging = true
      const clientX = e.touches[0].clientX
      this.sliderField = field
      this.sliderMin = min
      this.sliderMax = max
      const query = uni.createSelectorQuery().in(this)
      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()
    },
    onSliderTouchMove(e, min, max) {
      if (!this.sliderField || !this.sliderRect) return
      this.updateSliderValue(e.touches[0].clientX, this.sliderField, min, max)
    },
    onSliderTouchEnd() {
      this.sliderField = ''
      this.sliderDragging = false
    },
    onSliderTap(e, field, min, max) {
      const query = uni.createSelectorQuery().in(this)
      query.select('.custom-progress').boundingClientRect(rect => {
        this.sliderRect = rect
        this.updateSliderValue(e.detail.x + rect.left, field, min, max)
      }).exec()
    },
    updateSliderValue(clientX, field, min, max) {
      if (!this.sliderRect || !this.sliderRect.width) return
      let ratio = (clientX - this.sliderRect.left) / this.sliderRect.width
      ratio = Math.max(0, Math.min(1, ratio))
      const value = Math.round(min + ratio * (max - min))
      if (this.equipContrlForm[field] === value) return
      this.$set(this.equipContrlForm, field, value)
    },
    openAll(){
      this.showPopup = true;
    },
    closeAll(){
      this.show2 = true;
    },
    initData(res){
      this.deviceList = [];
      this.leftList = [];
      res?.forEach((item) => {
        this.leftList.push(item);
      });
      this.activeIndex = 0;
      this.deviceList = this.leftList[this.activeIndex]?.device_list || [];
    },
    async getdeviceSfStatus() {
      this.activeIndex = 0;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.valvecontrol.get_huapu_valve_group_list',
        method: 'post',
      });
      this.initData(res?.data || []);
    },
  },
  onLoad() {
    this.getHours();
    this.getdeviceSfStatus();
  },
};
</script>
<style scoped lang="scss">
uni-page-body {
  position: relative;
  height: 100%;
}
.progress-container{
  display: flex;
  justify-content: center;
  align-items: center;
  height:100%;
}
.hour,.minute{
  font-size: 28rpx;
  color: #999999;
  border-radius: 8rpx;
  border: 2rpx solid #aaa;
  padding: 4rpx 8rpx;
  margin-right: 8rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160rpx;
}
.control-container {
  background: linear-gradient(180deg, #ffffff00 0%, #fff 23.64%, #fff 100%),
    linear-gradient(102deg, #bfeadd 6.77%, #b8f1e7 40.15%, #b9eef5 84.02%);
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  .control-content {
    display: flex;
    width: 100%;
    height: calc(100% - 102rpx);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 0;
    border-radius: 8px 8px 0 0;
    background: #fff;
    .control-list-left {
      width: 250rpx;
      position: fixed;
      height: calc(100% - 90rpx);
      overflow-x: hidden;
      overflow-y: auto;
      .control-list-left-item {
        width: 240rpx;
        height: 96rpx;
        line-height: 96rpx;
        background: #f5f7fa;
        padding-left: 24rpx;
        color: #364d46;
        font-family: 'Source Han Sans CN VF';
        font-size: 32rpx;
        font-weight: 400;
        position: relative;
        //超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .control-list-left-item-active {
        background: #0bbc581a;
        color:#0BBC58;
        font-family: "Source Han Sans CN VF";
        font-size: 32rpx;
        font-weight: 700;
      }
    }
    .control-list-right {
      width: calc(100% - 250rpx);
      margin: 0 32rpx;
      margin-left: 280rpx;
      .action-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 22rpx;
        gap: 22rpx;
        .action-button{
          flex:1;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          border-radius: 8rpx;
          background: #0bbc58;
          color:#ffffff;
          font-family: "Source Han Sans CN VF";
          font-size: 28rpx;
          font-weight: 600;
        }
        .action-button-plain{
          background: #ffffff;
          border:2rpx solid #0bbc58;
          color:#0bbc58;
        }
      }
      .control-list-right-item {
        height: 96rpx;
        display: flex;
        padding: 0rpx 16rpx;
        align-items: center;
        border-radius: 8rpx;
        background: #f5f7fa;
        margin-bottom: 22rpx;
        position: relative;
        .control-list-right-item-icon {
          display: flex;
          align-items: center;
          .solenoid-valve {
            width: 40rpx;
            height: 40rpx;
          }
        }
        .control-list-right-item-title {
          margin-left: 8rpx;
        }
        .control-list-right-item-action {
          position: absolute;
          right: 16rpx;
        }
      }
    }
  }
  
  .slider-container{
    position: relative;
    margin-top: 10rpx;
    .slider-min-value{
      position: absolute;
      left: 0;
      top: -60rpx;
    }
    .slider{
      width: 600rpx;
    }
    .slider-max-value{
      position: absolute;
      right: 0;
      top: -60rpx;
    }
  }
  .custom-progress{
    width: 500rpx;
    padding: 0;
    &.dragging{
      .progress-fill,
      .progress-thumb{
        transition: none;
      }
    }
    .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;
      transition: width 0.2s;
    }
    .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);
      transition: left 0.2s;
    }
  }
}
</style>