bigDataApp/pages/deviceDetails/SoilMoisturelist/devControl.vue

<template>
  <view class="device-details-page">
    <cu-custom :isBack="true">
      <template slot="content">
        <view class="nav-title">参数设置</view>
      </template>
    </cu-custom>
    <view class="control-board">
      <view class="title">操作</view>
      <text style="color:red">注：步长值最小值10cm、最大值200cm且为整数</text>
      <u-form :model="form" ref="uForm" label-width="200rpx">
        <u-form-item label="第1层步长值">
          <view style="display:flex;justify-content: space-between">
            <u-input v-model="form.depth[0]" max="200" min="10" maxlength="3" />cm
          </view>
        </u-form-item>
        <u-form-item label="第2层步长值">
          <view style="display:flex;justify-content: space-between;">
          <u-input v-model="form.depth[1]" max="200" min="10" maxlength="3" />cm
          </view>
        </u-form-item>
        <u-form-item label="第3层步长值">
          <view style="display:flex;justify-content: space-between">
            <u-input v-model="form.depth[2]" max="200" min="10" maxlength="3" />cm
          </view>
        </u-form-item>
      </u-form>
       <u-button type="success" class="sub-btn" @click="submitControlParams()">确定</u-button>
    </view>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    const deviceInfo = JSON.parse(decodeURIComponent(options.deviceInfo));
    this.deviceInfo = deviceInfo;
    this.getDevControlParams();
  },
  data() {
    return {
      deviceInfo: {},
      form: {
        depth: [],
      },
    };
  },
  methods: {
    async getDevControlParams() {
      await this.$myRequest({
        url: '/api/api_gateway?method=weather.weather.nd_topic_change',
        data: {
          device_id: this.deviceInfo.devBid,
        }
      }).then(res => {
        const depth = res.depth.split(',') || [];
        this.form.depth = depth
      })
    },
    async submitControlParams(){
      if(this.form.depth.length !== 3){
        uni.showToast({
          title: "请输入3个步长值",
          icon: "none",
        });
        return
      }
      if(!this.form.depth.every(item => item >= 10 && item <= 200 && Number.isInteger(Number(item)))){
        uni.showToast({
          title: "请输入正确的步长值",
          icon: "none",
        });
        return
      }
      await this.$myRequest({
        url: '/api/api_gateway?method=weather.weather.nd_topic_change',
        data: {
          device_id: this.deviceInfo.devBid,
          depth: this.form.depth.join(','),
        }
      }).then(res => {
        uni.showToast({
          title: "操作成功",
          icon: "none",
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.device-details-page {
  background: linear-gradient(
      180deg,
      #ffffff00 0%,
      #f5f6fa 23.64%,
      #f5f6fa 100%
    ),
    linear-gradient(102deg, #bfeadd 6.77%, #b8f1e7 40.15%, #b9eef5 84.02%);
  min-height: 100vh;
  padding: 0 32rpx;
  padding-top: 98rpx;
}
.nav-title{
  text-align: center;
}
.control-board {
  border-radius: 16rpx;
  background: #fff;
  padding: 32rpx;
  margin-top: 46rpx;
  .title {
    margin-bottom: 16rpx;
    color: #303133;
    font-size: 28rpx;
    font-weight: 400;
  }
  .date-title {
    margin-bottom: 52rpx;
  }
  .reload-btn {
    width: 100%;
    background: #0bbc58;
    margin-bottom: 48rpx;
    border-radius: 16rpx;
  }
  .date-slider {
    
  }
}

.footer-board {
  border-top: 2rpx solid #e4e7ed;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 164rpx;
  padding: 16rpx 32rpx 0 32rpx;
  .sub-btn {
    width: 100%;
    background: #0bbc58;
    border-radius: 16rpx;
  }
}
</style>