diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index d574bf0..3ae494d 100644 --- 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; } } } diff --git a/src/components/content/tunnelScene/TunnelScene.vue b/src/components/content/tunnelScene/TunnelScene.vue index ad9fc02..466b374 100644 --- a/src/components/content/tunnelScene/TunnelScene.vue +++ b/src/components/content/tunnelScene/TunnelScene.vue @@ -11,6 +11,27 @@ :pointNum="pointNum" pointGap="500" /> + +

是否确定删除该设备

+
+ + +
+
@@ -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; + } +} diff --git a/src/components/content/tunnelScene/editEquComp/editDialog.vue b/src/components/content/tunnelScene/editEquComp/editDialog.vue index 4a9b272..565ea1c 100644 --- a/src/components/content/tunnelScene/editEquComp/editDialog.vue +++ b/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 = "";