cac-fronted/src/views/mappingConfig/components/addMappDialog.vue

<template>
  <div class="filedAddBoxMapp">
    <el-dialog
      class="AddDialogBox"
      title="新增映射配置"
      :visible.sync="mappDialogShow"
      @close="hide"
      width="620px"
      :close-on-click-modal="false"
    >
      <div class="mappSeting">
        <div class="mappInput">
          <h3>输入</h3>
          <div class="iedClass">
            <b>ied名称：</b>
            <el-select
              v-model="iedValue"
              placeholder="请选择"
              @change="changeIed"
            >
              <el-option
                v-for="item in iedOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="iedClass">
            <b>逻辑设备：</b>
            <el-select
              v-model="deviceValue"
              placeholder="请选择"
              @change="changeDevice"
            >
              <el-option
                v-for="item in deviceOptions"
                :key="item.id"
                :label="item.paramIndex"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="deviceList">
            <p
              v-for="(item, index) in deviceList"
              :key="index"
              :class="{ errorRed: leftIndex === item }"
            >
              {{ item }}
            </p>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="mappOutput">
          <h3>输出</h3>
          <div class="iedClass">
            <b>server名称：</b>
            <el-select
              v-model="serverValue"
              placeholder="请选择"
              @change="changeServer"
            >
              <el-option
                v-for="item in serverOptions"
                :key="item.id"
                :label="item.filename"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="iedClass">
            <b>逻辑设备：</b>
            <el-select
              v-model="serveIecValue"
              placeholder="请选择"
              @change="changeServerDevice"
            >
              <el-option
                v-for="item in serveIecOptions"
                :key="item.inst"
                :label="item.paramIndex"
                :value="item.inst"
              >
              </el-option>
            </el-select>
          </div>
          <div class="deviceList serverList">
            <p
              v-for="(item, index) in deviceList"
              :key="index"
              :class="{ errorRed: rightIndex === outputValues[item] }"
            >
              <el-select
                v-model="outputValues[item]"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="outItem in serverdeviceList"
                  :key="outItem"
                  :label="outItem"
                  :value="outItem"
                ></el-option>
              </el-select>
            </p>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hide">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  listIedConfigApi,
  icdlistParamindexApi,
  ieclistFileApi,
  serverlistParamindexApi,
  addTransformApi,
} from "@/utils/api/index";
export default {
  data() {
    return {
      mappDialogShow: false,
      //左侧
      iedValue: "",
      iedOptions: [],
      deviceValue: "",
      deviceOptions: [],
      deviceList: [],
      //右侧
      serverValue: "",
      serverOptions: [],
      serveIecValue: "",
      serveIecOptions: [],
      serverdeviceList: [],
      //输出
      outputValues: {}, // 用于存储每个设备列表项的选择值
      leftIndex: -1,
      rightIndex: -1,
    };
  },
  created() {},
  mounted() {
    // 初始化时，给每个对象添加 selected 和 value 属性
  },
  watch: {},
  methods: {
    //左侧输入
    //获取led列表
    getLedList() {
      listIedConfigApi()
        .then((res) => {
          console.log(res);
          this.iedOptions = res.data;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换ied选项
    changeIed(val) {
      console.log(val);
      let selectOption = this.iedOptions.find((item) => {
        return item.id === val;
      });
      this.deviceValue = "";
      this.deviceList = [];
      this.getDeviceList(selectOption);
    },
    //获取逻辑设备
    getDeviceList(val) {
      icdlistParamindexApi({
        iedName: val.name,
      })
        .then((res) => {
          console.log(res);
          this.deviceOptions = res.data;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换逻辑设备
    changeDevice(val) {
      console.log(val);
      let selectdevice = this.deviceOptions.find((item) => {
        return item.id === val;
      });
      console.log(selectdevice);
      this.deviceList = selectdevice.attList;
    },
    //右侧serve输出
    //获取serve文件列表
    getSeverList() {
      ieclistFileApi()
        .then((res) => {
          console.log(res);
          this.serverOptions = res.data;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换server
    changeServer(val) {
      console.log(val);
      let serverSelectOption = this.serverOptions.find((item) => {
        return item.id === val;
      });
      this.serveIecValue = "";
      this.serverdeviceList = [];
      this.getserverDeviceList(serverSelectOption);
    },
    //获取serer服务设备
    getserverDeviceList(val) {
      serverlistParamindexApi({
        fileId: val.id,
      })
        .then((res) => {
          console.log(res);
          this.serveIecOptions = res.data;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换逻辑设备
    changeServerDevice(val) {
      console.log(val);
      let selectserver = this.serveIecOptions.find((item) => {
        return item.inst == val;
      });
      console.log(selectserver);
      this.serverdeviceList = selectserver.attList;
    },
    submitForm() {
      let params = [];
      this.deviceList.forEach((item) => {
        console.log(`设备项: ${item}, 选择的值: ${this.outputValues[item]}`);
        if (
          this.outputValues[item] !== undefined &&
          this.outputValues[item] !== ""
        ) {
          params.push({
            rptFrom: item,
            rptTo: this.outputValues[item],
          });
        }
      });
      console.log(params);
      this.callApiWithParams(params);
    },
    async callApiWithParams(params) {
      for (let index = 0; index < params.length; index++) {
        // 使用 index 变量来追踪当前索引
        try {
          const param = params[index]; // 通过索引获取当前参数
          const res = await addTransformApi(param);
          if (res.success === false) {
            console.log(`在索引 ${index} 处发生错误: ${res.errorMsg}`);
            this.$message({
              showClose: true,
              message: res.errorMsg,
              type: "error",
            });
            if (res.errorMsg && res.errorMsg.includes("From")) {
              this.leftIndex = param.rptFrom;
              this.rightIndex = "";
            }
            if (res.errorMsg && res.errorMsg.includes("To")) {
              this.rightIndex = param.rptTo;
              this.leftIndex = "";
            }
            return; // 停止循环
          }
          this.$set(this.outputValues, param.rptTo, "");
          console.log(`调用成功（索引 ${index}）:`, res);
        } catch (err) {
          console.error(`调用接口时发生错误（索引 ${index}）:`, err);
          //alert(`在索引 ${index} 处调用接口时发生错误，已停止后续调用。`);
          return; // 停止循环
        }
      }
      this.$message({
        showClose: true,
        message: `所有映射配置均已成功`,
        type: "success",
      });
      this.mappDialogShow = false;
      this.$parent.getiecListForm(); //刷新
    },
    //获取监测设备类型

    display() {
      this.mappDialogShow = true;
      this.getLedList();
      this.getSeverList();
    },
    hide() {
      this.mappDialogShow = false;
      console.log("我关闭了");
      this.outputValues = {};
      // this.formInfo = {};
      // this.$refs.formInforef.resetFields(); // 重置表单字段值
      // console.log(this.formInfo);
    },
  },
};
</script>
<style lang="less">
.filedAddBoxMapp {
  .AddDialogBox {
    .el-dialog__body {
      padding: 10px 20px;
    }

    .mappSeting {
      display: flex;
      justify-content: space-around;
      height: 400px;
      .el-divider--vertical {
        height: 100%;
        margin: 0 1%;
      }
      .mappInput,
      .mappOutput {
        width: 49%;
        height: 400px;
        h3 {
          //font-weight: normal;
          line-height: 32px;
        }
        .iedClass {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          b {
            width: 84px;
            font-weight: normal;
          }
        }
        .el-select {
          width: 200px;
        }
      }
      .deviceList {
        overflow-y: auto;
        height: 284px;
        .el-select {
          width: 240px !important;
        }
        p {
          height: 40px;
          line-height: 40px;
        }
        .errorRed {
          color: #f00;
          .el-input__inner {
            border: 1px solid #f00;
          }
        }
      }
      .serverList {
        width: 100%;
        .el-select {
          width: 300px;
        }
      }
    }
  }
}
</style>