smart-power-ui/src/views/profile/DeviceTrigger/profile/conditionTemp.vue

<template>
  <div class="condition-temp">
    <div class="top-info">
      <span style="margin: 0px 8px">关系:</span>
      <el-select
        v-model="info.relationType"
        style="width: 150px"
        size="small"
        placeholder="请选择"
      >
        <el-option
          v-for="(lable, val) in relationOptions"
          :label="lable"
          :value="val"
          :key="val"
        ></el-option>
      </el-select>
      <span style="margin: 0px 8px">类型:</span>
      <el-select
        v-model="info.funKey"
        placeholder="请选择"
        @change="propertChangeFu"
        style="width: 150px"
        size="small"
      >
        <el-option
          v-for="opt in propertyList"
          :label="opt.funName"
          :value="opt.funKey"
          :key="opt.funKey"
        ></el-option>
      </el-select>
      <span style="margin: 0px 8px"> 条件:</span>
      <el-select
        v-model="info.conditionType"
        placeholder="请选择"
        size="small"
        style="width: 150px"
        @change="changeTriggerCondFu(info.conditionType)"
      >
        <el-option
          v-for="(proVal, proName) in trigCondEnumOptions"
          :label="proVal"
          :value="proName"
          :key="proVal"
          >{{ proVal }}</el-option
        >
      </el-select>
      <el-button
        size="small"
        type="danger"
        style="margin-left: 5px"
        plain
        @click="delItemFun"
        >删除此数据</el-button
      >
    </div>

    <div class="val-info">
      <div style="padding-top: 10px">
        <div
          v-show="info.conditionType !== 'GTB'"
          style="
            float: left;
            margin-right: 20px;
            margin-bottom: 8px;
            padding-left: 10px;
          "
        >
          &#12288;&#160;&#160;A:
          <!-- <el-input-number
            v-model="info.value1"
            placeholder="A"
            controls-position="right"
            style="width: 220px;margin-left: 5px;"
          ></el-input-number> -->
          <el-input
            v-model="info.value1"
            placeholder="A"
            style="width: 220px; margin-left: 5px"
          ></el-input>
        </div>
        <div
          v-show="
            info.conditionType === 'GTB' ||
            info.conditionType === 'GTA_AND_LTB' ||
            info.conditionType === 'LTA_OR_GTB'
          "
          style="float: left; margin-left: 5px"
        >
          &#12288;&#160;&#160;B:
          <!-- <el-input-number
            v-model="info.value2"
            placeholder="B"
            controls-position="right"
            style="width: 220px;margin-left: 5px; "
          ></el-input-number> -->
          <el-input
            v-model="info.value2"
            placeholder="B"
            style="width: 220px; margin-left: 5px"
          ></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const relationOptions = {
  AND: "并且",
  OR: "或者",
};
const trigCondEnumOptions = {
  LTA: "数值低于A",
  GTB: "数值高于B",
  GTA_AND_LTB: "数值介于AB之间",
  LTA_OR_GTB: "数值高于B低于A",
  EQA: "数值等于A",
};
export default {
  name: "ConditionTemp",
  props: ["info", "propertyList", "tempIndex"],
  data() {
    return {
      relationOptions,
      trigCondEnumOptions,
      triggerMinInput: false,
      triggerMaxInput: false,
    };
  },
  created() {
    this.triggerCondFu();
  },
  methods: {
    delItemFun() {
      this.$emit("EventDel", this.tempIndex);
    },
    propertChangeFu(val) {
      this.propertyList.forEach((v) => {
        if (v.funKey === val) {
          // this.info.funDataType = v.funDataType;
          this.info.funId = v.funId;
          this.info.funName = v.funName;
        }
      });
    },
    changeTriggerCondFu(val) {
      this.triggerCondFu(val);
    },
    triggerCondFu(val) {
      this.triggerMaxInput = false;
      this.triggerMinInput = false;
      if (val === "LTA") {
        this.triggerMinInput = true;
      }
      if (val === "GTB") {
        this.triggerMaxInput = true;
      }
      if (val === "GTA_AND_LTB" || val === "LTA_OR_GTB") {
        this.triggerMaxInput = true;
        this.triggerMinInput = true;
      }
      if (val === "EQA") {
        this.triggerMinInput = true;
      }
    },
  },
};
</script>

<style lang="scss">
.condition-temp {
  width: calc(100% + 80px);
  position: relative;
  left: -80px;
  border: 1px solid #c6c6c6;
  padding: 5px;
  height: 110px;
  overflow: auto;
  margin-top: 10px;
  .top-info {
    border-bottom: 1px dotted #898788;
    padding-bottom: 5px;
  }
}
</style>