trp:设备hover回显面板数据绑定和模拟模式3d场景添加

src/components/content/tunnelScene/preEquComp/preDialog.vue

@@ -26,35 +26,32 @@
           :placeholder="params.equipmentName" disabled>
           <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
         </el-select> -->
-        <p>{{ params.equipmentName }}</p>
+        <p>{{ params.devRealtimeDetail.equipmentName }}</p>
       </div>
       <div class="setting-item">
-        <p>参数:</p>
-        <p>31.3%</p>
+        <p>{{ getDevParam + ":" }}</p>
+        <p>
+          {{
+            params.devRealtimeDetail.value + params.devRealtimeDetail.unit ||
+            "--"
+          }}
+        </p>
       </div>
       <!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
         :disabled="isDisabledInputNum" />
       <p>{{ params.equipmentValue }}</p> -->
     </div>
-    <div class="btn">
-      <!-- <button @click="removeEquipment" disabled>删除</button> -->
-      <!-- <button @click="addEquipment" disabled>添加</button> -->
-    </div>
+    <!-- <div class="btn">
+      <button @click="removeEquipment">删除</button>
+      <button @click="addEquipment" disabled>添加</button>
+    </div> -->
   </div>
 </template>
 
 <script setup>
 import InputNum from "./childComps/InputNum.vue";
 
-import {
-  reactive,
-  computed,
-  defineEmits,
-  defineProps,
-  watch,
-  nextTick,
-  ref,
-} from "vue";
+import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
 
 // 定义事件发射器，父组件监听
 const emit = defineEmits([
@@ -69,11 +66,30 @@ const params = defineProps([
   "equipmentType",
   "equipmentName",
   "equipmentValue",
+  "devRealtimeDetail",
 ]); //隧道第几个锚点
 
 // 当前风压
 let p = ref(57);
-
+const getDevParam = computed(() => {
+  if (/^windPressure+/.test(params.devRealtimeDetail.equipmentType)) {
+    return "风压";
+  } else if (/^frequency+/.test(params.devRealtimeDetail.equipmentType)) {
+    return "频率";
+  }
+  switch (params.devRealtimeDetail.equipmentType) {
+    case "windDirection":
+      return "风向";
+    case "temperature":
+      return "温度";
+    case "windSpeed":
+      return "风速";
+    case "humidness":
+      return "湿度";
+    default:
+      return "浓度";
+  }
+});
 // function EquInf() {
 //   // 发射事件给tunnel父组件
 //   emit("EquInf");
@@ -171,22 +187,22 @@ function addEquipment() {
   equipmentSetting.equipmentType = "";
   equipmentSetting.threshold = "";
 }
-const equipmentType = {
-  label: String, //传感器类型
-  typeId: String, //传感器类型ID(方便查找该类型的所有设备)
-};
-// 通过以上选项请求以下具体哪个设备
-const equipment = {
-  label: String, //传感器编号加名称
-  equId: String, // 传感器Id
-};
+// const equipmentType = {
+//   label: String, //传感器类型
+//   typeId: String, //传感器类型ID(方便查找该类型的所有设备)
+// };
+// // 通过以上选项请求以下具体哪个设备
+// const equipment = {
+//   label: String, //传感器编号加名称
+//   equId: String, // 传感器Id
+// };
 </script>
 
 <style lang="scss" scoped>
 #edit-dialog {
   // width: 540px;
   width: 230px;
-  height: 120px;
+  // height: 120px;
   // min-height: 683px;
   background: rgba(7, 35, 72, 0.79);
   border-radius: 20px;
@@ -295,7 +311,25 @@ const equipment = {
   }
 
   .btn {
-    margin: 100px 40px 40px 40px;
+    display: flex;
+    justify-content: flex-end;
+    button {
+      cursor: pointer;
+      transition: transform 0.1s linear 0s;
+    }
+    & :nth-child(1) {
+      width: 95px;
+      height: 39px;
+      border-radius: 11px;
+      border: 2px solid #0f82af;
+      background: transparent;
+      font-size: 20px;
+      font-family: MicrosoftYaHei;
+      color: #08b7b8;
+      line-height: 39px;
+      margin: 15px;
+    }
+    /* margin: 100px 40px 40px 40px;
     display: flex;
     justify-content: space-between;
 
@@ -331,10 +365,10 @@ const equipment = {
       font-weight: bold;
       color: #ffffff;
       line-height: 60px;
-    }
+    }*/
 
     button:active {
-      transform: scale(0.9);
+      transform: scale(0.98);
     }
   }
 }