nlu_App/pages/prevention/control.vue

<template>
  <view>
    <view class="status_bar"></view>
    <view class="" style="position: relative; top: 44px">
      <view style="position: fixed; z-index: 100; width: 100%">
        <uni-nav-bar
          @clickLeft="clickLeft"
          left-icon="back"
          left-text="返回"
          title="设备控制"
        ></uni-nav-bar>
      </view>
      <view class="control">
        <view class="control_restart" v-if="myuser_type">
          <p class="title_p">管理员操作</p>
          <view class="control_restart_but">
            <button @click="restart">重启</button>
            <button @click="upgrade">升级</button>
          </view>
        </view>
        <view class="control_off">
          <p class="title_p">设备开关</p>
          <view class="control_off_off">
            <p>{{ condatas.ds == 1 ? '开机' : '关机' }}</p>
            <u-switch
              v-model="checked1"
              size="30"
              style="margin-top: 14rpx"
              active-color="#58C876"
              @change="checkedTF"
            ></u-switch>
          </view>
        </view>
        <view class="control_mo">
          <p class="title_p">定时模式</p>
          <view class="control_off_off" @click="show1 = !show1">
            <p>{{ Number(condatas.ts) == 1 ? '时控' : '光控' }}</p>
            <u-icon name="arrow-down-fill" size="12" color="#7F8082"></u-icon>
          </view>
          <u-action-sheet
            :list="options1"
            v-model="show1"
            @click="actionSheetCallback"
          ></u-action-sheet>
        </view>
        <view class="control_time" v-if="condatas.ts == 0">
          <p class="title_p">定时时长(h)</p>
          <view class="control_off_off" @click="show2 = !show2">
            <p>{{ condatas.tt == 0 ? '常亮' : condatas.tt }}</p>
            <u-icon name="arrow-down-fill" size="12" color="#7F8082"></u-icon>
          </view>
        </view>
        <view class="control_time" v-else>
          <p class="title_p">开始结束时间</p>
          <view class="control_off_off" @click="show3 = !show3">
            <p>开始时间：{{ condatas.st ? condatas.st : '00' }}:00</p>
            <u-picker
              v-model="show3"
              mode="time"
              :params="params"
              @confirm="confirmFun"
            ></u-picker>
            <u-icon name="arrow-down-fill" size="12" color="#7F8082"></u-icon>
          </view>
          <view class="control_off_off" @click="show4 = !show4">
            <p>结束时间：{{ condatas.et ? condatas.et : '00' }}:00</p>
            <u-picker
              v-model="show4"
              mode="time"
              :params="params"
              @confirm="confirmFun2"
            ></u-picker>
            <u-icon name="arrow-down-fill" size="12" color="#7F8082"></u-icon>
          </view>
        </view>
        <view class="control_interval">
          <p class="title_p">数据间隔(min)</p>
          <view class="slider">
            <view class="" style="width: 100%; padding-top: 18rpx">
              <slider
                v-model="condatas.dat_f"
                min="0"
                max="120"
                step="1"
                show-value
                block-size="18"
                activeColor="#57C878"
                @changing="changing"
              ></slider>
            </view>
          </view>
        </view>
        <view class="control_timing">
          <p class="title_p">清虫间隔(min)</p>
          <view class="slider">
            <view class="" style="width: 100%; padding-top: 18rpx">
              <slider
                v-model="condatas.clt_t"
                min="0"
                max="120"
                step="1"
                show-value
                block-size="18"
                activeColor="#57C878"
                @changing="changing2"
              ></slider>
            </view>
          </view>
          <view class="qingchong" v-if="allqingchong">
            <view class="qingchongbox" @click="suzumusi"> 清 虫 </view>
          </view>
        </view>
      </view>
    </view>
    <view class="ensure">
      <view class="ensure_btn" @click="ensure"> 确 定 </view>
    </view>
    <u-popup v-model="show2" mode="bottom" length="30%" class="pop-up">
      <scroll-view scroll-y="true" class="sheet">
        <view class="sheet-text" v-for="(item, index) in options2" :key="index">
          <p @click="typesofroles(index)">{{ item.text }}</p>
        </view>
      </scroll-view>
      <button @click="show2 = false">取消</button>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      myuid: '',
      condatas: {
        dat_f: '',
      },
      checked1: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      options1: [
        {
          text: '光控',
        },
        {
          text: '时控',
        },
      ],
      options2: [
        {
          text: '常亮',
        },
        {
          text: '1',
        },
        {
          text: '2',
        },
        {
          text: '3',
        },
        {
          text: '4',
        },
        {
          text: '5',
        },
        {
          text: '6',
        },
        {
          text: '7',
        },
        {
          text: '8',
        },
        {
          text: '00',
        },
      ],
      params: {
        year: false,
        month: false,
        day: false,
        hour: true,
        minute: false,
        second: false,
      },
      myuser_type: false,
      d_id: '',
      allqingchong: false,
    };
  },
  methods: {
    //forecast.send_control.device_control_info
    async controldata(data) {
      //设备列表
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.device_control_info',
        data: {
          d_id: data,
          cmd: 'paramconf',
        },
      });
      console.log(res);
      this.condatas = res;
      if (this.condatas.ds == 1) {
        this.checked1 = true;
      } else {
        this.checked1 = false;
      }
    },
    //forecast.send_control.admin_device_control
    async reorup(data) {
      //设备列表
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
        data: {
          d_id: data.d_id,
          device_type_id: 2,
          cmd: data.cmd,
        },
      });
      if (res == true) {
        uni.showToast({
          title: '指令下发成功!',
        });
      } else {
        uni.showToast({
          title: '指令下发失败!',
        });
      }
    },
    //forecast.send_control.device_control
    async controlby(data) {
      //设备列表
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.device_control',
        data: {
          d_id: this.d_id,
          device_type_id: 2,
          config: data,
        },
      });
    },
    clickLeft() {
      uni.navigateBack({
        delta: 1,
      });
    },
    typesofroles(index) {
      this.condatas.tt = index;
      this.show2 = false;
    },
    actionSheetCallback(index) {
      this.condatas.ts = index;
    },
    checkedTF(e) {
      //设备开关
      if (e == true) {
        this.condatas.ds = 1;
      } else {
        this.condatas.ds = 0;
      }
    },
    confirmFun(e) {
      //开始时间
      this.condatas.st = Number(e.hour);
    },
    confirmFun2(e) {
      //结束时间
      this.condatas.et = Number(e.hour);
    },
    restart() {
      //重启
      let obj = {
        d_id: this.d_id,
        cmd: 'reboot',
      };
      this.reorup(obj);
    },
    upgrade() {
      //升级
      let obj = {
        d_id: this.d_id,
        cmd: 'update',
      };
      this.reorup(obj);
    },
    ensure() {
      // var obj = this.condatas
      console.log(this.condatas);
      var obj = {};
      for (var key in this.condatas) {
        if (key == 'dat_f') {
          obj['dattim'] = this.condatas[key];
        } else if (key == 'clt_t') {
          obj['clt'] = this.condatas[key];
        } else {
          obj[key] = this.condatas[key];
        }
      }
      let str = JSON.stringify(obj);
      this.controlby(str);
      this.clickLeft();
    },
    async getworm() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.clear_insects_permission',
        data: {},
      });
      console.log(res);
      this.allqingchong = res[0] == 1 ? true : false;
    },
    async suzumusi() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.device_control',
        data: {
          config: '{"cmd":"ctr_clear"}',
          d_id: this.d_id,
          device_type_id: '2',
          req: 'ctr_clear',
        },
      });
      // console.log(res)
      if (res == true) {
        uni.showToast({
          title: '指令下发成功!',
        });
      } else {
        uni.showToast({
          title: '指令下发失败!',
        });
      }
    },
    changing(e) {
      // console.log(e.detail.value)
      this.condatas.dat_f = e.detail.value;
    },
    changing2(e) {
      // console.log(e.detail.value)
      this.condatas.clt_t = e.detail.value;
    },
  },
  onLoad(option) {
    this.$forceUpdate();
    this.getworm();
    this.controldata(option.id);
    this.d_id = option.id;
    uni.getStorage({
      key: 'myuid',
      success: (res) => {
        this.myuid = res.data;
      },
    });
    uni.getStorage({
      key: 'myuser_type',
      success: (res) => {
        if (Number(res.data) == 1) {
          this.myuser_type = true;
        }
      },
    });
  },
};
</script>

<style lang="scss">
.control {
  position: absolute;
  top: 50px;
  width: 90%;
  left: 5%;

  .title_p {
    padding-left: 20rpx;
    border-left: 6rpx solid #28ae4f;
    height: 40rpx;
    margin-bottom: 20rpx;
  }

  .control_off_off {
    display: flex;
    justify-content: space-between;
    margin-left: 24rpx;
    padding: 0 30rpx;
    background-color: #f7f8fa;
    height: 60rpx;
    line-height: 60rpx;
    margin-bottom: 20rpx;
  }

  .slider {
    display: flex;
    padding: 0 30rpx 0 0;
    margin-left: 24rpx;
    margin-bottom: 20rpx;
    ::v-deep uni-slider {
      margin: 0 !important;
    }
  }

  .control_restart {
    margin-bottom: 20rpx;

    .title_p {
      border-left: 6rpx solid #d17978;
    }

    .control_restart_but {
      display: flex;
      justify-content: flex-start;
      margin-left: 24rpx;

      button {
        width: 110rpx;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 26rpx;
        margin: 0 20rpx 0 0;
        color: #ffffff;
        background-color: #d17978;
      }
    }
  }

  .control_off {
  }
}

.pop-up {
  .sheet {
    background-color: white;
    height: 400rpx;
    overflow: hidden;

    .sheet-text {
      height: 80rpx;
      border-bottom: 2rpx solid #f7f8fa;

      p {
        text-align: center;
        height: 80rpx;
        line-height: 80rpx;
        color: black;
        font-size: 16px;
      }
    }
  }

  button {
    color: black;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 16px;
    height: 80rpx;
  }
}

.ensure {
  width: 100%;
  position: absolute;
  bottom: 100rpx;

  .ensure_btn {
    width: 90%;
    margin: 0 auto;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    background-color: #28ae4f;
    color: #ffffff;
    border-radius: 30rpx;
  }
}
.qingchong {
  width: 90%;
  margin: 10px auto;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  .qingchongbox {
    padding: 2px 8px 3px 8px;
    background-color: #28ae4f;
    color: #fff;
    border-radius: 5px;
    // line-height: 27px;
  }
}
</style>