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>
        <el-select
          v-model="equipmentSetting.equipmentType"
          placeholder="请选择设备类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="setting-item">
        <p>设备选择</p>
        <el-select
          v-model="equipmentSetting.chooseEquipment"
          placeholder="请选择设备类型"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </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 { reactive, computed, defineEmits, defineProps, watch } from "vue";

// 定义事件发射器，父组件监听
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
const params = defineProps(["pointNum", "pointGap"]); //隧道第几个锚点

// 当前风压
let p = ref(57);

//计算锚点之间距离
const pointDistance_str = computed(
  () =>
    `${params.pointGap}米*${params.pointNum}=${
      params.pointGap * params.pointNum
    }米`
);

// 请求数据模型
const equipmentSetting = reactive({
  equipmentType: "", //设备类型
  chooseEquipment: "", //设备选择(设备名称)
  threshold: "", //阈值
});

// 设备类型选项参数
const options = reactive([
  { label: "风机", value: "fan" },
  { label: "风压传感器", value: "windPressure" },
  { label: "普通传感器", value: "sensors" },
]);

// 设备编号参数
let options2 = reactive([]);

let isDisabledInputNum = ref(false);
watch(
  () => equipmentSetting.equipmentType,
  () => {
    let label;
    options2 = [];
    equipmentSetting.chooseEquipment = "";
    isDisabledInputNum = false;
    if (equipmentSetting.equipmentType === "fan") {
      label = "风机";
      isDisabledInputNum = true;
    }
    if (equipmentSetting.equipmentType === "windPressure") label = "风压传感器";
    if (equipmentSetting.equipmentType === "sensors") label = "普通传感器";
    for (let i = 1; i < 11; i++) {
      options2.push({ label: `${i}号${label}`, value: `${label}_${i}` });
    }
  }
);

// const obj = {
//   equipmentId: String, //传感器id
//   equipmentName: String, //设备名称
//   pointName: String, //附着点名称（定位）
//   equipmentType: String, //设备类型（类型可根据后端）
//   equipmentOnline: Boolean, //是否在线
//   isFan: Boolean, //是不是风机
//   fanSpeed: Number, //F
// };

// const tunnel = {
//   tunnelId: "",
// };

// 显示锚点距离
let point_num = ref(0);

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

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

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

// 添加设备
function addEquipment() {
  // 处理不合法情况
  if (
    !equipmentSetting.chooseEquipment ||
    !equipmentSetting.equipmentType ||
    !equipmentSetting.threshold
  ) {
    alert("选项不能有空");
    return;
  }
  emit("addEquipment", equipmentSetting);
}
const equipmentType = {
  label: String, //传感器类型
  typeId: String, //传感器类型ID(方便查找该类型的所有设备)
};
// 通过以上选项请求以下具体哪个设备
const equipment = {
  label: String, //传感器编号加名称
  equId: String, // 传感器Id
};
</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: 26px;
      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;
      }
    }
    :deep(.el-select) {
      width: 284px;
      //height: 51px;
      border: transparent;
    }
    :deep(.el-input--suffix) {
      width: 284px;
      height: 51px;
      background: rgba(7, 35, 72, 0.79);
      border: 2px solid #0f82af;
    }
    :deep(.el-input__wrapper) {
      background: transparent;
      border: none !important;
      padding: 0px 12px 0px 10px;
      box-shadow: none !important;
    }
    :deep(.el-input__wrapper input) {
      background: transparent;
      height: 100%;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: #08b7b8;
      line-height: 37px;
    }
    :deep(.el-icon) {
      color: #05feff;
      font-size: 34px;
    }
  }
  .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);
    }
  }
}
:deep(.el-select-dropdown__wrap) {
  background: greenyellow !important;
}
</style>