唐润平：上线版,功能为待完善

src/components/content/tunnelScene/displayInfoComp/DevInfo.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="dev-info">
+    <div class="title">设备属性</div>
+    <div class="name">
+      <span>设备名称:</span><span>{{ devInfo.name }}</span>
+    </div>
+    <div class="state-info">
+      <span>设备状态:</span><span>{{ devInfo.state }}</span>
+    </div>
+    <div class="state-info">
+      <span>设备位置:</span><span>{{ devInfo.position }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, watch } from "vue";
+// 接受参数
+const params = defineProps(["devInfo"]);
+watch(
+  () => params.devInfo,
+  (newValue, oldValue) => {
+    console.log("监听");
+    console.log(newValue, oldValue);
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+#dev-info {
+  height: 300px;
+  width: 200px;
+  background-color: rgba(236, 236, 236, 0.836);
+  position: absolute;
+  z-index: 999;
+  border-radius: 10px;
+  padding: 5px;
+  display: block;
+  opacity: 0;
+  .title {
+    height: 20px;
+    text-align: center;
+  }
+}
+</style>