alertGuardian-JinNeng/src/pages/alarmConfig/bj_windturbine/windturbine_components.vue

<template>
  <el-dialog
    v-model="isShow"
    width="800px"
    :before-close="dialogClose"
    @closed="resetOptions"
  >
    <el-form
      :model="dialogOptions"
      :rules="rules"
      label-width="120px"
      ref="formRef"
      inline
    >
      <el-form-item label="报警类别" prop="deviceType">
        <el-select
          v-model="dialogOptions.deviceType"
          filterable
          placeholder="请选择"
          @change="
            (res) => {
              dialogOptions.stationId = '';
              dialogOptions.characteristic =
                dialogOptions.deviceType == 'booststation'
                  ? '报警'
                  : '正常停机';
              checkRules();
              getWpList();
            }
          "
        >
          <el-option
            v-for="item in categoryArray"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="序列号">
        <el-input
          v-model="dialogOptions.id"
          placeholder="自动生成"
          clearable
          readonly
        />
      </el-form-item>
      <el-form-item label="场站" prop="stationId">
        <el-select
          v-model="dialogOptions.stationId"
          filterable
          placeholder="请选择"
          :disabled="!wpArray?.length"
          @change="
            (res) => {
              dialogOptions.modelId = '';
              getWtModel();
            }
          "
        >
          <el-option
            v-for="item in wpArray"
            :key="item.id"
            :label="item.aname"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="设备型号"
        prop="modelId"
        v-if="dialogOptions.deviceType !== 'booststation'"
      >
        <el-select
          v-model="dialogOptions.modelId"
          filterable
          placeholder="请选择"
          :disabled="!modelArray?.length"
        >
          <el-option
            v-for="item in modelArray"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="统一编码" prop="uniformCode">
        <el-input v-model="dialogOptions.uniformCode" clearable />
      </el-form-item>
      <el-form-item label="特性" prop="characteristic">
        <el-select
          v-model="dialogOptions.characteristic"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in dialogOptions.deviceType == 'booststation'
              ? characteristicArray1
              : characteristicArray"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="故障编码">
        <el-input v-model="dialogOptions.nemCode" clearable />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="dialogOptions.description"
          placeholder="请输入"
          clearable
        />
      </el-form-item>
      <el-form-item label="报警级别">
        <el-select v-model="dialogOptions.rank" filterable placeholder="请选择">
          <el-option
            v-for="item in levelArray"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="测点"
        prop="tagId"
        v-if="dialogOptions.deviceType === 'booststation'"
      >
        <el-select
          v-model="dialogOptions.tagId"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in pointArray"
            :key="item.nemCode"
            :label="item.name"
            :value="item.nemCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="关键部件"
        prop="components"
        v-if="dialogOptions.deviceType !== 'booststation'"
      >
        <el-select v-model="dialogOptions.components" filterable>
          <el-option-group
            v-for="group in associatedComponentsArray"
            :key="group.label"
            :label="group.label"
          >
            <el-option
              v-for="item in group.options"
              :key="item.nemCode"
              :label="item.name"
              :value="item.nemCode"
            />
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="dialogOptions.enable">
          <el-radio-button :label="true">是</el-radio-button>
          <el-radio-button :label="false">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否可复位">
        <el-radio-group v-model="dialogOptions.resetTable">
          <el-radio-button :label="true">是</el-radio-button>
          <el-radio-button :label="false">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="checkData">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {
  getWpList,
  getBpList,
  getWtModel,
  getPointList,
  fetchRelatePartAndAlarmType,
  saveAlarmconfiguration,
} from "/@/api/api.js";
export default {
  props: {
    isVisible: {
      type: Boolean,
      default: () => false,
    },
    form: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      isShow: false,
      dialogOptions: {
        deviceType: "",
        id: "",
        stationId: "",
        modelId: "",
        uniformCode: "",
        nemCode: "",
        characteristic: "",
        description: "",
        rank: 1,
        tagId: "",
        components: "",
        enable: false,
        resetTable: false,
      },
      rules: {
        deviceType: [
          {
            required: true,
            message: "报警类型不可为空",
            trigger: "change",
          },
        ],
        stationId: [
          {
            required: true,
            message: "场站不可为空",
            trigger: "change",
          },
        ],
        modelId: [
          {
            required: true,
            message: "设备型号不可为空",
            trigger: "change",
          },
        ],
        uniformCode: [
          {
            required: true,
            message: "统一编码不可为空",
            trigger: "change",
          },
        ],
        characteristic: [
          {
            required: true,
            message: "统一编码不可为空",
            trigger: "change",
          },
        ],
        tagId: [
          {
            required: true,
            message: "测点不可为空",
            trigger: "change",
          },
        ],
        description: [
          {
            required: true,
            message: "描述不可为空",
            trigger: "change",
          },
        ],
        components: [
          {
            required: true,
            message: "部件不可为空",
            trigger: "change",
          },
        ],
      },
      categoryArray: [
        { id: "windturbine", label: "风机报警" },
        { id: "booststation", label: "升压站报警" },
        { id: "inverter", label: "光伏报警" },
      ],
      wpArray: [],
      modelArray: [],
      characteristicArray: [
        "安全链停机",
        "启动禁止",
        "报警",
        "手动停机",
        "安全停机",
        "禁止启动",
        "电网故障",
        "电网停机故障",
        "记录",
        "紧急停机",
        "变桨停机",
        "正常停机",
        "偏航停机",
        "报警记录",
        "日志",
        "正常停机故障",
        "电网故障停机",
        "快速停机",
        "总故障",
      ],
      characteristicArray1: ["动作", "事故", "报警"],
      levelArray: [
        { id: 1, label: "低级" },
        { id: 2, label: "低中级" },
        { id: 3, label: "中级" },
        { id: 4, label: "中高级" },
        { id: 5, label: "高级" },
      ],
      pointArray: [],
      associatedComponentsArray: [],
    };
  },

  created() {
    this.isShow = this.isVisible;
    this.dialogOptions = Object.assign(this.dialogOptions, this.form);
    this.checkRules();
    this.getWpList();
    this.getfetchRelatePart();
  },

  methods: {
    dialogClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },

    cancle() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.isShow = false;
        })
        .catch(() => {});
    },

    checkRules() {
      const isBp = this.dialogOptions.deviceType === "booststation";
      const isWt = this.dialogOptions.deviceType === "windturbine";
      const isInv = this.dialogOptions.deviceType === "inverter";
      this.rules.tagId.forEach((ele) => {
        ele.required = isBp;
      });

      this.rules.modelId.forEach((ele) => {
        ele.required = !isBp;
      });

      this.rules.components.forEach((ele) => {
        ele.required = isWt || isInv;
      });
    },

    getWpList() {
      if (
        this.dialogOptions.deviceType === "windturbine" ||
        this.dialogOptions.deviceType === "inverter"
      ) {
        getWpList(this.dialogOptions.deviceType).then((res) => {
          this.dialogOptions.stationId = res?.data?.[0]?.id || "";
          this.wpArray = res.data;
          this.getWtModel();
        });
      } else {
        getBpList().then((res) => {
          this.dialogOptions.stationId = res?.data?.[0]?.id || "";
          this.wpArray = res.data;
          this.getWtModel();
        });
      }
    },

    getWtModel() {
      getWtModel(this.dialogOptions.stationId).then((res) => {
        this.dialogOptions.modelId = res?.data?.[0] || "";
        this.modelArray = res.data;
        if (this.dialogOptions.deviceType === "booststation") {
          this.getPointList();
        }
      });
    },

    getPointList() {
      getPointList({
        subId: this.dialogOptions.stationId,
      }).then((res) => {
        this.pointArray = res.data.total;
      });
    },

    getfetchRelatePart() {
      fetchRelatePartAndAlarmType().then((res) => {
        const keyMap = {
          fjbj: "风机部件",
          gfbj: "光伏部件",
        };

        let associatedComponentsArray = [];

        for (let key in keyMap) {
          associatedComponentsArray.push({
            id: key,
            label: keyMap[key],
            options: res.data[key] || [],
          });
        }
        this.dialogOptions.components =
          associatedComponentsArray?.[0]?.options?.[0]?.nemCode || "";
        this.associatedComponentsArray = associatedComponentsArray;
      });
    },

    checkData() {
      this.$refs.formRef.validate((valid, fields) => {
        if (valid) {
          saveAlarmconfiguration(
            Object.assign(this.dialogOptions, {
              alarmType:
                this.dialogOptions.alarmType || this.dialogOptions.deviceType,
            })
          ).then((res) => {
            if (res.code === 200) {
              this.BASE.showMsg({
                type: "success",
                msg: "提交成功",
              });
              this.isShow = false;
            }
          });
        }
      });
    },

    resetOptions() {
      this.dialogOptions = {
        deviceType: "",
        id: "",
        stationId: "",
        modelId: "",
        uniformCode: "",
        characteristic:
          this.dialogOptions.deviceType == "booststation" ? "报警" : "正常停机",
        nemCode: "",
        description: "",
        rank: 1,
        tagId: "",
        components: "",
        enable: false,
        resetTable: false,
      };
      this.resetForm();
    },

    resetForm() {
      this.$refs.formRef.resetFields();
    },
  },

  watch: {
    isVisible(value) {
      this.isShow = value;
    },
    form(value) {
      this.dialogOptions = value;
      console.log(this.dialogOptions);
      this.checkRules();
      this.getWpList();
    },
  },
};
</script>