邓洁 : 隧道模型合并

src/components/content/tunnelScene/childComp/EditDev.vue

@@ -0,0 +1,106 @@
+<template>
+  <div id="edit-dev">
+    <div class="title">编辑设备</div>
+    <div class="divice-list">
+      <ul>
+        <li
+          v-for="(item, key) of devicesList"
+          :key="key"
+          @click="checkDev(key)"
+        >
+          <img :src="item.devImgUrl" />
+          <div>{{ item.devName }}</div>
+        </li>
+      </ul>
+    </div>
+    <div class="option-btn">
+      <button @click="removeDev">移除设备</button>
+      <button @click="addDev">添加设备</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, defineEmits, onMounted, ref } from "vue";
+// 定义需要发射的事件
+const emit = defineEmits([
+  "initLoadDevicesModel",
+  "checkDev",
+  "addDev",
+  "removeDev",
+]);
+onMounted(initDevicesModel);
+//  挂载后加所有的设备模型
+function initDevicesModel() {
+  emit("initLoadDevicesModel");
+}
+
+const devItem = {
+  devName: "传感器",
+  devImgUrl: "../../../../../public/images/camera.jpg",
+};
+const list = [devItem, devItem, devItem, devItem];
+
+const devicesList = reactive(list);
+const checkIndex = ref(0);
+//选择设备
+function checkDev(key) {
+  checkIndex = key;
+  emit("checkDev", key); //携带参数发射事件
+}
+// 添加设备
+function addDev() {
+  emit("addDev");
+}
+//删除设备
+function removeDev() {
+  emit("removeDev");
+}
+</script>
+
+<style lang="scss" scoped>
+#edit-dev {
+  height: 300px;
+  width: 200px;
+  background-color: rgba(236, 236, 236, 0.836);
+  position: absolute;
+  z-index: 999;
+  display: block;
+  border-radius: 10px;
+  text-align: center;
+  img {
+    width: 50px;
+  }
+  .title {
+    height: 20px;
+  }
+  .option-btn {
+    height: 40px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-right: 10px;
+  }
+  .divice-list {
+    height: 240px;
+  }
+  .divice-list ul {
+    height: 100%;
+    padding: 7px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 7px;
+    align-content: first baseline;
+  }
+  .divice-list ul li {
+    border-radius: 5px;
+
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  #li-active {
+    background: red;
+  }
+}
+</style>