唐润平：增加和删除后的提示信息框

src/components/content/tunnelScene/TunnelScene.vue

@@ -11,6 +11,27 @@
       :pointNum="pointNum"
       pointGap="500"
     />
+    <el-dialog
+      v-model="centerDialogVisible"
+      width="30%"
+      destroy-on-close
+      center
+      :show-close="false"
+      style="
+        margin: 20% auto;
+        width: 569px;
+        height: 330px;
+        background: rgba(7, 35, 72, 0.79);
+        border-radius: 20px;
+        border: 2px solid #0f82af;
+      "
+    >
+      <p id="remove-title">是否确定删除该设备</p>
+      <div class="btn">
+        <button @click="centerDialogVisible = false">取消</button>
+        <button @click="handleConfirmAddEqu">确定</button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -39,7 +60,7 @@ import {
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import { onMounted, reactive, ref } from "vue";
-
+import { ElMessage } from "element-plus";
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
@@ -156,7 +177,10 @@ function rClickCallback(demo) {
 // 添加设备
 function handleAddEqu(formInfo) {
   if (!formInfo.equipmentType) {
-    alert("请选择设备");
+    ElMessage({
+      message: "请选择传感器！",
+      type: "warning",
+    });
     return;
   }
   //表单信息
@@ -164,11 +188,27 @@ function handleAddEqu(formInfo) {
   demo.addEquipment(targetP, formInfo);
 }
 
+const centerDialogVisible = ref(false);
 // 删除设备
-async function handleRemoveEqu() {
-  demo.removeEquipment(targetP);
+function handleRemoveEqu() {
+  if (!targetP.hasDevice) {
+    ElMessage({
+      message: "该点位不存在设备！",
+      type: "warning",
+    });
+    return;
+  }
+  centerDialogVisible.value = true;
+}
+// 对话框确认删除
+function handleConfirmAddEqu() {
+  demo.removeEquipment(targetP);
+  centerDialogVisible.value = false;
+  ElMessage({
+    message: "删除成功！",
+    type: "success",
+  });
 }
-
 // 处理取消关闭编辑框事件
 function handleCancel() {
   if (!demo) return;
@@ -188,4 +228,42 @@ function handleCancel() {
     height: 100%;
   }
 }
+#remove-title {
+  height: 42px;
+  font-size: 32px;
+  font-family: MicrosoftYaHei, MicrosoftYaHei;
+  font-weight: bold;
+  color: #08b7b8;
+  line-height: 42px;
+  letter-spacing: 3px;
+  text-align: center;
+  margin: 65px 0px 70px 0px;
+}
+.btn {
+  display: flex;
+  justify-content: center;
+  gap: 80px;
+  :nth-child(1) {
+    width: 190px;
+    height: 60px;
+    border-radius: 11px;
+    border: 2px solid #0f82af;
+    font-size: 28px;
+    font-family: MicrosoftYaHei;
+    color: #08b7b8;
+    line-height: 37px;
+    background: transparent;
+  }
+  :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: 37px;
+  }
+}
 </style>

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

@@ -150,15 +150,6 @@ function removeEquipment() {
 
 // 添加设备
 function addEquipment() {
-  // // 处理不合法情况
-  // if (
-  //   !equipmentSetting.chooseEquipment ||
-  //   !equipmentSetting.equipmentType ||
-  //   !equipmentSetting.threshold
-  // ) {
-  //   alert("选项不能有空");
-  //   return;
-  // }
   emit("addEquipment", equipmentSetting);
   equipmentSetting.chooseEquipment = "";
   equipmentSetting.equipmentType = "";