bigdata_WX/pages/deviceDetails/weatherStation1/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>
      <div style="margin-bottom: 48rpx;">
        <u-button type="success" class="reload-btn" @click="handleControl('RC_LOC')">定位</u-button>
      </div>
      <u-button type="success" class="reload-btn" @click="handleControl('RC_IN')">长在线</u-button>
      <view class="title date-title">数据传输间隔(min)</view>
      <view class="date-slider">
        <slider
          v-model="interval"
          show-value="true"
          :min="1"
          :max="240"
          @change="changeDataInterval"
          block-color="#57C878"
          activeColor="#57C878"
          step="1"
        />
      </view>
       <u-button type="success" class="sub-btn" @click="handleControl('interval')">确定</u-button>
    </view>
    <!-- <view class="footer-board">
      <u-button type="success" class="sub-btn" @click="handleSubmit()">确定</u-button>
    </view> -->
  </view>
</template>

<script>
export default {
  onLoad(options) {
    const deviceInfo = JSON.parse(decodeURIComponent(options.deviceInfo));
    console.log(deviceInfo, "deviceInfo");
    this.deviceInfo = deviceInfo;
    this.getDevControlParams();
  },
  data() {
    return {
      deviceInfo: {},
      interval: "",
    };
  },
  methods: {
    changeDataInterval(v){
      this.interval = v.detail.value
    },
    // 获取设备控制参数信息
    async getDevControlParams() {
      await this.$myRequest({
        url: '/api/api_gateway?method=greenhouse.env_first.control_device',
        data: {
          device_id: this.deviceInfo.devBid,
        }
      }).then(res => {
        console.log('设备控制参数信息', res)
        this.interval = res.interval
      })
    },
    async handleControl(cmd) {
      let params = {};
      if(cmd == 'interval'){
        params = {
          device_id: this.deviceInfo.devBid,
          interval: this.interval,
        };
      }else{
        params = {
          device_id: this.deviceInfo.devBid,
          order: cmd,
        };
      }
      await this.$myRequest({
        url: '/api/api_gateway?method=greenhouse.env_first.send_control',
        data: params
      }).then(res => {
        console.log('设备控制参数信息', res)
        uni.showToast({
          title: "操作成功",
          icon: "none",
        });
      })
    },
    async handleSubmit() {
      await this.handleControl('STORAGE_INR');
      await this.handleControl('INTERVAL');
      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>