odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/148
This commit is contained in:
trp-ironman
2023-12-16 09:36:23 +00:00
parent da34dbb986 8c0b322cf4
commit fdecc480ec
3 changed files with 146 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/assets/styles/index.scss
View File

@@ -13,7 +13,12 @@ a {
color: #333; color: #333;
} }
html, body, #app, .el-container, .el-aside, .el-main { html,
body,
#app,
.el-container,
.el-aside,
.el-main {
height: 100%; height: 100%;
} }
@@ -25,7 +30,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -859px; margin-left: -859px;
background-image: url('../images/topAndDown/sp_tb.png'); background-image: url("../images/topAndDown/sp_tb.png");
} }
.box-top { .box-top {
@@ -44,7 +49,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
> * { > * {
font-size: 28px; font-size: 28px;
color: #FFFFFF; color: #ffffff;
line-height: 37px; line-height: 37px;
} }
@@ -55,7 +60,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
} }
.select-active { .select-active {
color: #11EAF2 !important; color: #11eaf2 !important;
} }
} }
} }
@@ -66,14 +71,14 @@ html, body, #app, .el-container, .el-aside, .el-main {
top: 50px; top: 50px;
right: 70px; right: 70px;
font-size: 28px; font-size: 28px;
color: #FFFFFF; color: #ffffff;
.current-site { .current-site {
display: flex; display: flex;
align-items: center; align-items: center;
> span:first-child { > span:first-child {
color: #F7B500; color: #f7b500;
margin-right: 20px; margin-right: 20px;
} }
@@ -81,7 +86,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
cursor: pointer; cursor: pointer;
width: 50px; width: 50px;
height: 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; align-items: center;
> span:first-child { > span:first-child {
color: #F7B500; color: #f7b500;
margin-right: 20px; margin-right: 20px;
} }
@@ -100,7 +105,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
margin-left: 27px; margin-left: 27px;
width: 50px; width: 50px;
height: 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; left: 900px;
width: 100px; width: 100px;
height: 114px; height: 114px;
background-image: url('../images/topAndDown/sp_icon_zyc.png'); background-image: url("../images/topAndDown/sp_icon_zyc.png");
} }
.tunnel-length { .tunnel-length {
@@ -141,7 +146,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
left: 0; left: 0;
width: 100px; width: 100px;
height: 114px; height: 114px;
background-image: url('../images/topAndDown/sp_yyc.png'); background-image: url("../images/topAndDown/sp_yyc.png");
} }
.right-arrow { .right-arrow {
@@ -151,7 +156,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
right: 900px; right: 900px;
width: 100px; width: 100px;
height: 114px; height: 114px;
background-image: url('../images/topAndDown/sp_yyc.png'); background-image: url("../images/topAndDown/sp_yyc.png");
} }
.shrink-right { .shrink-right {
@@ -161,7 +166,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
right: 0; right: 0;
width: 100px; width: 100px;
height: 114px; height: 114px;
background-image: url('../images/topAndDown/sp_icon_zyc.png'); background-image: url("../images/topAndDown/sp_icon_zyc.png");
} }
.switch-btn { .switch-btn {
@@ -174,7 +179,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -925px; margin-left: -925px;
background-image: url('../images/topAndDown/sp_dbbj.png'); background-image: url("../images/topAndDown/sp_dbbj.png");
.el-carousel__mask { .el-carousel__mask {
display: none; display: none;
@@ -207,14 +212,14 @@ html, body, #app, .el-container, .el-aside, .el-main {
margin: 50px 0 0 263px; margin: 50px 0 0 263px;
width: 46px; width: 46px;
height: 54px; height: 54px;
background-image: url('../images/topAndDown/sp_icon_zst.png'); background-image: url("../images/topAndDown/sp_icon_zst.png");
} }
.btn { .btn {
width: 100%; width: 100%;
margin-top: 14px; margin-top: 14px;
font-size: 26px; font-size: 26px;
color: #9FC3CD; color: #9fc3cd;
.el-carousel__item { .el-carousel__item {
left: 19%; left: 19%;
@@ -226,16 +231,16 @@ html, body, #app, .el-container, .el-aside, .el-main {
padding-top: 5px; padding-top: 5px;
width: 158px; width: 158px;
height: 50px; height: 50px;
background-image: url('../images/topAndDown/sp_icon_sdqhx.png'); background-image: url("../images/topAndDown/sp_icon_sdqhx.png");
} }
.is-active { .is-active {
margin-top: -5px; margin-top: -5px;
color: #FFFFFF; color: #ffffff;
padding-top: 7px; padding-top: 7px;
width: 201px; width: 201px;
height: 62px; 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 { .digital-tunnel {
.chat-dialog {
.chat-dialog{ display: flex;
display: flex; #container {
#container { flex: 1;
flex: 1; height: 1160px;
height: 1160px; //width: 1300px;
//width: 1300px; }
#containerEle {
flex: 1;
height: 1060px;
//width: 2180px;
}
} }
#containerEle {
flex: 1;
height: 1060px;
//width: 2180px;
}
}
.el-dialog { .el-dialog {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 1300px; height: 1300px;
border: 2px solid #0F82AF; border: 2px solid #0f82af;
background: rgba(6, 34, 71, 0.78); background: rgba(6, 34, 71, 0.78);
border-radius: 20px; border-radius: 20px;
padding: 47px 30px; padding: 47px 30px;
@@ -281,11 +284,11 @@ html, body, #app, .el-container, .el-aside, .el-main {
.el-dialog__title { .el-dialog__title {
font-size: 50px; font-size: 50px;
font-weight: bold; font-weight: bold;
color: #D6F1FA; color: #d6f1fa;
} }
.el-dialog__close { .el-dialog__close {
color: #05FEFF; color: #05feff;
font-size: 35px; font-size: 35px;
} }
} }
@@ -349,7 +352,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
width: 300px; width: 300px;
height: 200px; height: 200px;
border-radius: 10px; border-radius: 10px;
border: 2px solid #0F82AF; border: 2px solid #0f82af;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -364,57 +367,57 @@ html, body, #app, .el-container, .el-aside, .el-main {
align-items: center; align-items: center;
width: 300px; width: 300px;
height: 100px; height: 100px;
background: #264A78; background: #264a78;
font-size: 45px; font-size: 45px;
color: #FFFFFF; color: #ffffff;
} }
.value { .value {
margin-top: 15px; margin-top: 15px;
font-size: 50px; font-size: 50px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #FFFFFF; color: #ffffff;
} }
} }
} }
} }
.el-overlay-message-box{ .el-overlay-message-box {
.el-message-box{ .el-message-box {
width: 500px; width: 500px;
height: 230px; height: 230px;
background: rgba(7,35,72,0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
border: 2px solid #0F82AF; border: 2px solid #0f82af;
.el-message-box__title{ .el-message-box__title {
display: none; display: none;
} }
.el-message-box__content{ .el-message-box__content {
.el-icon{ .el-icon {
display: none; display: none;
} }
.el-message-box__message{ .el-message-box__message {
//width: 315px; //width: 315px;
height: 80px; height: 80px;
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
color: #08B7B8; color: #08b7b8;
letter-spacing: 3px; letter-spacing: 3px;
} }
} }
.el-message-box__btns{ .el-message-box__btns {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.el-button{ .el-button {
width: 130px; width: 130px;
height: 50px; height: 50px;
border: 2px solid #0F82AF; border: 2px solid #0f82af;
font-size: 28px; font-size: 28px;
background-color: #072348; background-color: #072348;
color: #08B7B8; color: #08b7b8;
} }
.el-button--primary{ .el-button--primary {
background: #08B7B8; background: #08b7b8;
color: #FFFFFF; color: #ffffff;
} }
} }
} }

92
src/components/content/tunnelScene/TunnelScene.vue
View File

@@ -11,6 +11,27 @@
:pointNum="pointNum" :pointNum="pointNum"
pointGap="500" 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> </div>
</template> </template>
@@ -39,7 +60,7 @@ import {
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"; import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
// 获取html标签跟随组件dom // 获取html标签跟随组件dom
const content = ref(null); const content = ref(null);
const info = ref(null); const info = ref(null);
@@ -156,19 +177,42 @@ function rClickCallback(demo) {
// 添加设备 // 添加设备
function handleAddEqu(formInfo) { function handleAddEqu(formInfo) {
if (!formInfo.equipmentType) { if (!formInfo.equipmentType) {
alert("请选择设备"); ElMessage({
message: "请选择传感器！",
type: "warning",
});
return; return;
} }
//表单信息 //表单信息
//这里利用处理请求 //这里利用处理请求
demo.addEquipment(targetP, formInfo); demo.addEquipment(targetP, formInfo);
ElMessage({
message: "添加成功！",
type: "success",
});
} }
const centerDialogVisible = ref(false);
// 删除设备 // 删除设备
async function handleRemoveEqu() { function handleRemoveEqu() {
demo.removeEquipment(targetP); 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() { function handleCancel() {
if (!demo) return; if (!demo) return;
@@ -188,4 +232,42 @@ function handleCancel() {
height: 100%; 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> </style>

9
src/components/content/tunnelScene/editEquComp/editDialog.vue
View File

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