唐润平：下拉框优化，编辑视角调整

src/components/content/tunnelScene/editEquComp/editDialog.vue

@@ -1,32 +1,48 @@
 <template>
   <div id="edit-dialog">
     <div class="distance-back">
-      <p>{{ pointDistance_str }}</p>
+      <p>当前距离洞口：{{ pointDistance_str }}</p>
       <img
         src="/images/htmlEditDialog/back-icon.png"
         alt=""
         @click="handleCancel"
       />
     </div>
-    <div class="dev-info"></div>
-    +
+    <div class="equ-info">当前风压:{{ p }}Pa</div>
     <div class="setting">
-      <select-input
-        name="传感器类型"
-        placeholder="请选择传感器类型"
-        :options="options"
-        @selected="handelSelectType"
-      />
-      <select-input
-        name="设备选择"
-        placeholder="请选择设备"
-        :options="options"
-        @selected="handelSelectEquipment"
-      />
+      <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">
@@ -37,16 +53,17 @@
 </template>
 
 <script setup>
-import { reactive, computed, defineEmits, defineProps } from "vue";
-
-import SelectInput from "./childComps/SelectInput.vue";
 import InputNum from "./childComps/InputNum.vue";
-import { remove } from "three/examples/jsm/libs/tween.module";
+
+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(
   () =>
@@ -62,13 +79,36 @@ const equipmentSetting = reactive({
   threshold: "", //阈值
 });
 
-// 选项参数
+// 设备类型选项参数
 const options = reactive([
-  { label: "风机1", id: "321321" },
-  { label: "风机2", id: "321321" },
-  { label: "风机3", id: "321321" },
-  { label: "风机4", id: "321321" },
+  { 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, //设备名称
@@ -82,18 +122,12 @@ const options = reactive([
 // const tunnel = {
 //   tunnelId: "",
 // };
+
 // 显示锚点距离
 let point_num = ref(0);
 
-function handelSelectType(e) {
-  equipmentSetting.equipmentType = e;
-}
-function handelSelectEquipment(e) {
-  equipmentSetting.chooseEquipment = e;
-}
 function handelInput(e) {
   equipmentSetting.threshold = e;
-  console.log(equipmentSetting);
 }
 
 // 处理取消事件
@@ -106,10 +140,29 @@ function handleCancel() {
 function removeEquipment() {
   emit("removeEquipment");
 }
+
 // 添加设备
 function addEquipment() {
-  emit("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>
@@ -143,18 +196,58 @@ function addEquipment() {
       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 {
-    .dev-type {
-      margin: 30px 30px;
-      P {
+    .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;