bigDataApp/pages/deviceDetails/weatherStation/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('RESET')">重启</u-button>
      </div>
      <u-button type="success" class="reload-btn" @click="handleControl('FWUPDATE')">升级</u-button>
      <view class="title date-title">本地存储间隔(min)</view>
      <view class="date-slider">
        <slider
          :value="storageVal"
          show-value="true"
          :min="1"
          :max="240"
          @change="changeStorageVal"
          block-color="#57C878"
          activeColor="#57C878"
          step="1"
        />
      </view>
      <view class="title date-title">数据传输间隔(min)</view>
      <view class="date-slider">
        <slider
          :value="dataInterval"
          show-value="true"
          :min="1"
          :max="240"
          @change="changeDataInterval"
          block-color="#57C878"
          activeColor="#57C878"
          step="1"
        />
      </view>
    </view>
    <view class="footer-board">
      <u-button type="success" class="sub-btn" @click="handleSubmit()">确定</u-button>
    </view>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    this.loading = true
    const deviceInfo = JSON.parse(decodeURIComponent(options.deviceInfo));
    console.log(deviceInfo, "deviceInfo");
    this.deviceInfo = deviceInfo;
    this.getDevControlParams();
  },
  data() {
    return {
      deviceInfo: {},
      storageVal: "",
      dataInterval: "",
    };
  },
  methods: {
    // 改变本地存储间隔
    changeStorageVal(e) {
      this.storageVal = e.detail.value
    },
    // 改变数据传输间隔
    changeDataInterval(e) {
      this.dataInterval = e.detail.value
    },
    // 获取设备控制参数信息
    async getDevControlParams() {
      this.loading = true
      await this.$myRequest({
        url: '/api/api_gateway?method=qxz.device.control_args',
        data: {
          device_id: this.deviceInfo.devBid,
        }
      }).then(res => {
        console.log('设备控制参数信息', res)
        this.storageVal = res.storage_inr
        this.dataInterval = res.interval
      })
    },
    async handleControl(cmd) {
      const params = {
        device_id: this.deviceInfo.devBid,
        cmd,
        interval: cmd === 'INTERVAL' ? this.dataInterval : undefined,
        storage_inr: cmd === 'STORAGE_INR' ? this.storageVal : undefined,
        stnid: cmd === 'STNID' ? this.stnidVal : undefined
      };
      await this.$myRequest({
        url: '/api/api_gateway?method=qxz.device.control',
        data: params
      }).then(res => {
        console.log('设备控制参数信息', res)
      })
    },
    handleSubmit() {
      this.handleControl('STORAGE_INR');
      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;
}

.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>