Merge pull request 'trp_dev' (#148) from trp_dev into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/148
2023-12-16 09:36:23 +00:00
parent da34dbb986 8c0b322cf4
commit fdecc480ec
3 changed files with 146 additions and 70 deletions
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -13,7 +13,12 @@ a {
  color: #333;
 }

-html, body, #app, .el-container, .el-aside, .el-main {
+html,
+body,
+#app,
+.el-container,
+.el-aside,
+.el-main {
  height: 100%;
 }

@@ -25,7 +30,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
  top: 0;
  left: 50%;
  margin-left: -859px;
-  background-image: url('../images/topAndDown/sp_tb.png');
+  background-image: url("../images/topAndDown/sp_tb.png");
 }

 .box-top {
@@ -44,7 +49,7 @@ html, body, #app, .el-container, .el-aside, .el-main {

      > * {
        font-size: 28px;
-        color: #FFFFFF;
+        color: #ffffff;
        line-height: 37px;
      }

@@ -55,7 +60,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
      }

      .select-active {
-        color: #11EAF2 !important;
+        color: #11eaf2 !important;
      }
    }
  }
@@ -66,14 +71,14 @@ html, body, #app, .el-container, .el-aside, .el-main {
    top: 50px;
    right: 70px;
    font-size: 28px;
-    color: #FFFFFF;
+    color: #ffffff;

    .current-site {
      display: flex;
      align-items: center;

      > span:first-child {
-        color: #F7B500;
+        color: #f7b500;
        margin-right: 20px;
      }

@@ -81,7 +86,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
        cursor: pointer;
        width: 50px;
        height: 50px;
-        background-image: url('../images/topAndDown/sp_icon_zdqh.png');
+        background-image: url("../images/topAndDown/sp_icon_zdqh.png");
      }
    }

@@ -91,7 +96,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
      align-items: center;

      > span:first-child {
-        color: #F7B500;
+        color: #f7b500;
        margin-right: 20px;
      }

@@ -100,7 +105,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
        margin-left: 27px;
        width: 50px;
        height: 50px;
-        background-image: url('../images/topAndDown/sp_icon_tcdl.png');
+        background-image: url("../images/topAndDown/sp_icon_tcdl.png");
      }
    }
  }
@@ -124,7 +129,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
  left: 900px;
  width: 100px;
  height: 114px;
-  background-image: url('../images/topAndDown/sp_icon_zyc.png');
+  background-image: url("../images/topAndDown/sp_icon_zyc.png");
 }

 .tunnel-length {
@@ -141,7 +146,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
  left: 0;
  width: 100px;
  height: 114px;
-  background-image: url('../images/topAndDown/sp_yyc.png');
+  background-image: url("../images/topAndDown/sp_yyc.png");
 }

 .right-arrow {
@@ -151,7 +156,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
  right: 900px;
  width: 100px;
  height: 114px;
-  background-image: url('../images/topAndDown/sp_yyc.png');
+  background-image: url("../images/topAndDown/sp_yyc.png");
 }

 .shrink-right {
@@ -161,7 +166,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
  right: 0;
  width: 100px;
  height: 114px;
-  background-image: url('../images/topAndDown/sp_icon_zyc.png');
+  background-image: url("../images/topAndDown/sp_icon_zyc.png");
 }

 .switch-btn {
@@ -174,7 +179,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
  bottom: 0;
  left: 50%;
  margin-left: -925px;
-  background-image: url('../images/topAndDown/sp_dbbj.png');
+  background-image: url("../images/topAndDown/sp_dbbj.png");

  .el-carousel__mask {
    display: none;
@@ -207,14 +212,14 @@ html, body, #app, .el-container, .el-aside, .el-main {
    margin: 50px 0 0 263px;
    width: 46px;
    height: 54px;
-    background-image: url('../images/topAndDown/sp_icon_zst.png');
+    background-image: url("../images/topAndDown/sp_icon_zst.png");
  }

  .btn {
    width: 100%;
    margin-top: 14px;
    font-size: 26px;
-    color: #9FC3CD;
+    color: #9fc3cd;

    .el-carousel__item {
      left: 19%;
@@ -226,16 +231,16 @@ html, body, #app, .el-container, .el-aside, .el-main {
      padding-top: 5px;
      width: 158px;
      height: 50px;
-      background-image: url('../images/topAndDown/sp_icon_sdqhx.png');
+      background-image: url("../images/topAndDown/sp_icon_sdqhx.png");
    }

    .is-active {
      margin-top: -5px;
-      color: #FFFFFF;
+      color: #ffffff;
      padding-top: 7px;
      width: 201px;
      height: 62px;
-      background-image: url('../images/topAndDown/sp_icon_sdqhd.png');
+      background-image: url("../images/topAndDown/sp_icon_sdqhd.png");
    }
  }

@@ -247,28 +252,26 @@ html, body, #app, .el-container, .el-aside, .el-main {

 //弹窗样式
 .digital-tunnel {
-
-.chat-dialog{
-  display: flex;
-  #container {
-    flex: 1;
-    height: 1160px;
-    //width: 1300px;
+  .chat-dialog {
+    display: flex;
+    #container {
+      flex: 1;
+      height: 1160px;
+      //width: 1300px;
+    }
+    #containerEle {
+      flex: 1;
+      height: 1060px;
+      //width: 2180px;
+    }
  }
-  #containerEle {
-    flex: 1;
-    height: 1060px;
-    //width: 2180px;
-  }
-}
-

  .el-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 1300px;
-    border: 2px solid #0F82AF;
+    border: 2px solid #0f82af;
    background: rgba(6, 34, 71, 0.78);
    border-radius: 20px;
    padding: 47px 30px;
@@ -281,11 +284,11 @@ html, body, #app, .el-container, .el-aside, .el-main {
      .el-dialog__title {
        font-size: 50px;
        font-weight: bold;
-        color: #D6F1FA;
+        color: #d6f1fa;
      }

      .el-dialog__close {
-        color: #05FEFF;
+        color: #05feff;
        font-size: 35px;
      }
    }
@@ -349,7 +352,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
      width: 300px;
      height: 200px;
      border-radius: 10px;
-      border: 2px solid #0F82AF;
+      border: 2px solid #0f82af;
      display: flex;
      flex-direction: column;
      align-items: center;
@@ -364,57 +367,57 @@ html, body, #app, .el-container, .el-aside, .el-main {
        align-items: center;
        width: 300px;
        height: 100px;
-        background: #264A78;
+        background: #264a78;
        font-size: 45px;
-        color: #FFFFFF;
+        color: #ffffff;
      }

      .value {
        margin-top: 15px;
        font-size: 50px;
        font-family: MicrosoftYaHei;
-        color: #FFFFFF;
+        color: #ffffff;
      }
    }
  }
 }
-.el-overlay-message-box{
-  .el-message-box{
+.el-overlay-message-box {
+  .el-message-box {
    width: 500px;
    height: 230px;
-    background: rgba(7,35,72,0.79);
+    background: rgba(7, 35, 72, 0.79);
    border-radius: 20px;
-    border: 2px solid #0F82AF;
-    .el-message-box__title{
+    border: 2px solid #0f82af;
+    .el-message-box__title {
      display: none;
    }
-    .el-message-box__content{
-      .el-icon{
+    .el-message-box__content {
+      .el-icon {
        display: none;
      }
-      .el-message-box__message{
+      .el-message-box__message {
        //width: 315px;
        height: 80px;
        font-size: 32px;
        font-weight: bold;
-        color: #08B7B8;
+        color: #08b7b8;
        letter-spacing: 3px;
      }
    }
-    .el-message-box__btns{
+    .el-message-box__btns {
      display: flex;
      justify-content: space-around;
-      .el-button{
+      .el-button {
        width: 130px;
        height: 50px;
-        border: 2px solid #0F82AF;
+        border: 2px solid #0f82af;
        font-size: 28px;
        background-color: #072348;
-        color: #08B7B8;
+        color: #08b7b8;
      }
-      .el-button--primary{
-        background: #08B7B8;
-        color: #FFFFFF;
+      .el-button--primary {
+        background: #08b7b8;
+        color: #ffffff;
      }
    }
  }
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/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,19 +177,42 @@ function rClickCallback(demo) {
 // 添加设备
 function handleAddEqu(formInfo) {
  if (!formInfo.equipmentType) {
-    alert("请选择设备");
+    ElMessage({
+      message: "请选择传感器！",
+      type: "warning",
+    });
    return;
  }
  //表单信息
  //这里利用处理请求
  demo.addEquipment(targetP, formInfo);
+  ElMessage({
+    message: "添加成功！",
+    type: "success",
+  });
 }

+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 +232,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>
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -156,15 +156,6 @@ function removeEquipment() {

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