cropland/src/pages/plantGuard/equipCtrls/scdctrl.vue

<!-- 杀虫灯控制 -->
<template>
  <div class=''>
    <div class="equipId">设备ID：{{equipId}}</div>
    <el-form
          ref="equipContrlRef"
          :model="equipContrlForm"
          label-position="top"
          label-width="150px"
        >
          <el-form-item label="设备开关：" prop="ds">
            <el-select v-model="equipContrlForm.ds">
              <el-option label="开机" :value="1"></el-option>
              <el-option label="关机" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="定时模式：" prop="timctrl">
            <el-select v-model="equipContrlForm.timctrl" placeholder="定时模式">
              <el-option label="光控" :value="0"></el-option>
              <el-option label="时控" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="equipContrlForm.timctrl == 1"
            label="开始结束时间："
          >
            <el-time-select
              placeholder="起始时间"
              v-model="equipContrlForm.st"
              default-value="00:00"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '24:00',
              }"
            ></el-time-select>
            -
            <el-time-select
              placeholder="结束时间"
              v-model="equipContrlForm.et"
              default-value="00:00"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '24:00',
              }"
            ></el-time-select>
          </el-form-item>
          <el-form-item
            v-if="equipContrlForm.timctrl != 1"
            label="定时时长(h)："
            prop="tt"
          >
            <el-select v-model="equipContrlForm.tt" placeholder="定时时长">
              <el-option label="常亮" :value="0"></el-option>
              <el-option :label="1" :value="1"></el-option>
              <el-option :label="2" :value="2"></el-option>
              <el-option :label="3" :value="3"></el-option>
              <el-option :label="4" :value="4"></el-option>
              <el-option :label="5" :value="5"></el-option>
              <el-option :label="6" :value="6"></el-option>
              <el-option :label="7" :value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传时间间隔(min)：" prop="dattim">
            <div class="sliderParent">
              <div class="block">
                <el-slider
                  :min="10"
                  :step="10"
                  :max="120"
                  v-model="equipContrlForm.dattim"
                  show-input
                ></el-slider>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="自清虫定时(min)：" prop="clt">
            <div class="sliderParent">
              <div class="block">
                <el-slider
                  :min="10"
                  :max="120"
                  v-model="equipContrlForm.clt"
                  show-input
                ></el-slider>
              </div>
            </div>
          </el-form-item>
          <el-form-item class="handAddFormBtn">
            <el-button type="blueInfo" size="small" @click="equipControlSubm"
              >确定</el-button
            >
            <el-button type="grayInfo" size="small" @click="resetForm()">取消</el-button
            >
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
props: ["equipId", "equipType","d_id"],
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  equipContrlForm: {
    st: "",
    et: "",
    ds: "",
    ts: "",
    tt: "",
    dattim: 10,
    clt: 10,
    timctrl: "",
  },
  equipContrlForm2: "{}",
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  //设备控制
  EquipControl() {
    this.$axios({
      method: "POST",
      url:
        "/api/api_gateway?method=forecast.send_control.device_control_info",
      data: this.qs.stringify({ d_id:this.d_id, cmd: "paramconf" }),
    }).then((res) => {
      if (res.data.data && Object.keys(res.data.data).length > 0) {
        let data = res.data.data;
        data.st =
          data.st && data.st < 10 ? "0" + data.st + ":00" : data.st + ":00";
        data.et =
          data.et && data.et < 10 ? "0" + data.et + ":00" : data.et + ":00";
        data.clt = Number(data.clt);
        this.equipContrlForm = data;
        this.equipContrlForm2 = JSON.stringify(data);
      }
    });
  },
  equipControlSubm() {
    let obj = this.equipContrlForm;
    obj.st =
      obj.st && obj.st.slice(0, 2).charAt(0) != "0"
        ? obj.st.slice(0, 2)
        : obj.st.slice(1, 2);
    obj.et =
      obj.et && obj.et.slice(0, 2).charAt(0) != "0"
        ? obj.et.slice(0, 2)
        : obj.et.slice(1, 2);
    this.$axios({
      method: "POST",
      url: "/api/api_gateway?method=forecast.send_control.device_control",
      data: this.qs.stringify({
        device_type_id: 2,
        d_id: this.d_id,
        config: JSON.stringify(obj),
      }),
    }).then((res) => {
      if (res.data.message == "") {
        this.$message.success("设备控制修改成功");
      } else {
        his.$message.error("设备控制修改失败");
      }
      this.equipControlDialogVisible = false;
    });
  },
  resetForm() {
    if(this.equipContrlForm2){
      this.equipContrlForm = JSON.parse(this.equipContrlForm2);
    }else{
      this.equipContrlForm={
        st: "",
        et: "",
        ds: "",
        ts: "",
        tt: "",
        dattim: 10,
        clt: 10,
        timctrl: "",
      }
    }
  }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
  this.EquipControl()
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="less">
.equipId{
  line-height: 33px;
  text-align: center;
  background: #eee;
}
.handAddFormBtn{
  margin-top: 20px;
  text-align: right;
}
// 时间input框
/deep/.el-date-editor.el-input, 
/deep/.el-date-editor.el-input__inner{
  width: 177px;
}
</style>