tunnel-cloud-web/src/components/content/tunnelScene/editEquComp/editDialog.vue

<template>
  <div id="edit-dialog">
    <div class="distance-back">
      <p>当前距离洞口：{{ pointDistance_str }}</p>
      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
    </div>
    <div class="equ-info">当前风压:{{ p }}Pa</div>
    <div class="setting">
      <div class="setting-item">
        <p>传感器类型</p>

        <select-input :options="options" @selectChange="handleTypeChange" placeholder="请选择传感器类型" ref="equipmentType" />
      </div>
      <div class="setting-item">
        <p>设备选择</p>
        <select-input :options="options2" @selectChange="handleEquipmentChange" placeholder="请选择设备" ref="equipment" />
      </div>
      <input-num name="阈值" placeholder="请输入阈值" @inputValue="handelInput" :disabled="isDisabledInputNum" />
    </div>
    <div class="btn">
      <button @click="removeEquipment">删除</button>
      <button @click="addEquipment">添加</button>
    </div>
  </div>
</template>

<script setup>
import InputNum from "./childComps/InputNum.vue";
import SelectInput from "./childComps/SelectInput.vue";
import { getEquipmentType, getEquipment } from "@/api/tunnelScene";
import {
  reactive,
  computed,
  defineEmits,
  defineProps,
  watch,
  ref,
  toRaw,
} from "vue";
import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore";

const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
const params = defineProps([
  "pointNum",
  "pointGap",
  "tunnelId",
  "position",
  "hasEquipment",
  "form",
]);

let p = ref(57);
const equipment = ref(null);
const equipmentType = ref(null);
const modelStore = useModelSceneStore();
//计算锚点之间距离
const pointDistance_str = computed(
  () =>
    `${parseInt(params.pointGap)}米*${params.pointNum}=${parseInt(params.pointGap) * params.pointNum
    }米`
);

// 请求数据模型
const equipmentSetting = ref({
  equipmentId: null,
  equipmentName: "",
  equipmentType: "", //设备类型
  position: "",
  threshold: "", //阈值
  typeKey: null, //设备选择(设备名称)
});
function resetEquipmentSetting() {
  equipmentSetting.value.equipmentId = null;
  equipmentSetting.value.equipmentName = "";
  equipmentSetting.value.equipmentType = "";
  equipmentSetting.value.position = "";
  equipmentSetting.value.threshold = "";
  equipmentSetting.value.typeKey = null;
  equipment.value.reset();
  equipmentType.value.reset();
}

// 绑定选择的设备类型
function handleTypeChange(optionItem) {
  equipmentSetting.value.equipmentType = optionItem.value;
}
function handleEquipmentChange(equipmentItem) {
  equipmentSetting.value.equipmentName = equipmentItem.label;
  equipmentSetting.value.equipmentId = equipmentItem.equipmentId;
  equipmentSetting.value.typeKey = equipmentItem.value;
}
// 设备类型选项参数
let options = reactive([{ label: "暂无数据", value: "" }]);

// 设备编号参数
let options2 = reactive([{ equipmentId: 0, label: "暂无数据", value: "" }]);

// 模拟生成option2
watch(
  () => equipmentSetting.value.equipmentType,
  (newVal) => {
    console.log(params.tunnelId, newVal);
    equipment.value.reset();
    getEquipment(params.tunnelId, newVal).then((res) => {
      options2.splice(0, options2.length);
      options2.push(
        ...res.data.map((item) => {
          return {
            equipmentId: item.equipmentId,
            label: item.equipmentName,
            value: item.equipmentType,
          };
        })
      );
    });
  }
);

// 设备类型请求
getEquipmentType()
  .then((res) => {
    options.splice(0, options.length);
    options.push(...res.data);
  })
  .catch((err) => console.log(err));

function handelInput(e) {
  equipmentSetting.threshold = e;
}

// 处理取消事件
function handleCancel() {
  resetEquipmentSetting();
  // 发射事件给tunnel父组件
  emit("cancel");
}

// 删除模型
function removeEquipment() {
  emit("removeEquipment");
}

// 添加设备
function addEquipment() {
  if (params.hasEquipment) {
    ElMessage({
      message: "该点位已存在设备！",
      type: "warning",
    });
    return;
  }
  if (
    !equipmentSetting.value.equipmentType ||
    !equipmentSetting.value.equipmentId
  ) {
    ElMessage({
      message: "选项不能为空！",
      type: "warning",
    });
    return;
  }
  equipmentSetting.value.position = params.position;
  console.log("add-", toRaw(equipmentSetting.value));
  // 合法请求
  modelStore
    .addEquipment({ ...toRaw(equipmentSetting.value) }, params.pointGap)
    .then((res) => {
      emit("addEquipment", equipmentSetting.value);
      if (res.code === 1000) {
        ElMessage.success(res.msg)
      } else {
        ElMessage.error(res.msg)
      }
      resetEquipmentSetting();
    })
    .catch((err) => {
      if (err === 3000) {
        ElMessage({
          message: "该设备已添加！",
          type: "warning",
        });
        resetEquipmentSetting();
      } else {
        console.log(err);
        ElMessage({
          message: "添加异常！",
          type: "warning",
        });
      }
    });
}
</script>

<style lang="scss" scoped>
#edit-dialog {
  width: 540px;
  // min-height: 683px;
  background: rgba(7, 35, 72, 0.79);
  border-radius: 20px;
  border: 2px solid #0f82af;
  position: absolute;
  z-index: 999;
  display: block;
  opacity: 0;

  .distance-back {
    height: 30px;
    display: flex;
    justify-content: space-between;
    margin: 20px 20px 0px 30px;

    p {
      width: 388px;
      height: 35px;
      font-size: 24px;
      font-family: MicrosoftYaHei;
      color: #ffffff;
      line-height: 35px;
    }

    img {
      cursor: pointer;
    }

    img:active {
      transform: scale(0.9);
    }
  }

  .equ-info {
    width: 190px;
    height: 35px;
    font-size: 26px;
    font-family: MicrosoftYaHei;
    color: #f7b500;
    line-height: 35px;
    margin: 20px 30px 0px 30px;
  }

  .setting {
    .setting-item {
      padding: 30px 30px 10px 30px;

      p {
        width: 130px;
        height: 35px;
        font-size: 26px;
        font-family: MicrosoftYaHei;
        color: #ffffff;
        line-height: 35px;
        margin-bottom: 20px;
      }
    }
  }

  .btn {
    margin: 100px 40px 40px 40px;
    display: flex;
    justify-content: space-between;

    button {
      cursor: pointer;
      transition: transform 0.1s linear 0s;
    }

    & :nth-child(1) {
      width: 190px;
      height: 60px;
      border-radius: 11px;
      border: 2px solid #0f82af;
      background: transparent;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: #08b7b8;
      line-height: 60px;
    }

    & :nth-child(2) {
      width: 190px;
      height: 60px;
      background: #08b7b8;
      border-radius: 11px;
      font-size: 28px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      color: #ffffff;
      line-height: 60px;
    }

    button:active {
      transform: scale(0.9);
    }
  }
}
</style>