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

小的细节优化

Browse Source
This commit is contained in:
Hcat
2024-01-27 00:16:55 +08:00
parent 3e9c18f648
commit c29b14d968
4 changed files with 141 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/content/tunnelScene/preEquComp/preDialog.vue
View File

@@ -1,10 +1,16 @@
<template> <template>
<div id="edit-dialog"> <div id="edit-dialog">
<div class="distance-back"> <div class="distance-back">
<p>当前距离洞口：{{ pointDistance_str }}</p> <p>当前距离洞口：
<span>
{{ pointDistance_str }}
</span>
</p>
<img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" /> <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
</div> </div>
<div class="equ-info">当前风压:{{ p }}Pa</div> <div class="equ-info">当前风压:
<span>{{ p }}Pa</span>
</div>
<div class="setting"> <div class="setting">
<div class="setting-item"> <div class="setting-item">
<p>传感器类型</p> <p>传感器类型</p>
@@ -187,10 +193,14 @@ const equipment = {
height: 35px; height: 35px;
font-size: 24px; font-size: 24px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #ffffff; color: white;
line-height: 35px; line-height: 35px;
} }
span {
color: #f7b500;
}
img { img {
cursor: pointer; cursor: pointer;
} }
@@ -205,9 +215,15 @@ const equipment = {
height: 35px; height: 35px;
font-size: 26px; font-size: 26px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #f7b500; color: white;
line-height: 35px; line-height: 35px;
margin: 20px 30px 0px 30px; margin: 20px 30px 0px 30px;
}
.equ-info span {
color: #f7b500;
} }
.setting { .setting {
@@ -223,6 +239,10 @@ const equipment = {
line-height: 35px; line-height: 35px;
margin-bottom: 20px; margin-bottom: 20px;
} }
p:nth-child(2) {
color: #f7b500
}
} }
:deep(.el-select) { :deep(.el-select) {

220
src/components/content/tunnelScene/sceneClass/editEquipment/index.js
View File

@@ -73,75 +73,75 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
this.scene.add(equMesh); this.scene.add(equMesh);
targetPoint.visible = false; targetPoint.visible = false;
// targetPoint.hasWall = true; // targetPoint.hasWall = true;
allline.push(targetPoint.name) // allline.push(targetPoint.name)
if (hasWall == false) { // if (hasWall == false) {
let findWallHang = new Array; // let findWallHang = new Array;
// console.log(targetPoint.name); // // console.log(targetPoint.name);
console.log(allline); // console.log(allline);
Allhang = allline.map(function (str) { // Allhang = allline.map(function (str) {
return parseInt(str.match(/\d+/)[0], 10); // return parseInt(str.match(/\d+/)[0], 10);
}) // })
console.log(Allhang); // console.log(Allhang);
//将取出来的所有行数字符串用一个新数组来保存，之后判断是不是存在同一行的（即相同的行数） // //将取出来的所有行数字符串用一个新数组来保存，之后判断是不是存在同一行的（即相同的行数）
for (let i = 0; i < Allhang.length; i++) { // for (let i = 0; i < Allhang.length; i++) {
//判断是不是存在相同的行数，如果存在，则继续判断是不是存在左右的传感器 // //判断是不是存在相同的行数，如果存在，则继续判断是不是存在左右的传感器
findWallHang.push(Allhang[i - 1]) // findWallHang.push(Allhang[i - 1])
if (findWallHang.includes(Allhang[i])) { // if (findWallHang.includes(Allhang[i])) {
console.log(allline[i - 1].slice(-1)); // console.log(allline[i - 1].slice(-1));
console.log(allline[i].slice(-1)); // console.log(allline[i].slice(-1));
wallHang = Allhang[i]; // wallHang = Allhang[i];
let sameHang = findWallHang.indexOf(Allhang[i]) // let sameHang = findWallHang.indexOf(Allhang[i])
if ((allline[sameHang - 1].slice(-1) == 'r' && allline[i].slice(-1) == 'l') || allline[sameHang - 1].slice(-1) == 'l' && allline[i].slice(-1) == 'r') { // if ((allline[sameHang - 1].slice(-1) == 'r' && allline[i].slice(-1) == 'l') || allline[sameHang - 1].slice(-1) == 'l' && allline[i].slice(-1) == 'r') {
console.log('进行添加操作'); // console.log('进行添加操作');
// 将这二个符合添加规则的锚点给设一个属性，这样方便之后我们进行删除操作 // // 将这二个符合添加规则的锚点给设一个属性，这样方便之后我们进行删除操作
// this.scene.getObjectByName(allline[i - 1]).hasWall = true // // this.scene.getObjectByName(allline[i - 1]).hasWall = true
// this.scene.getObjectByName(allline[i]).hasWall = true // // this.scene.getObjectByName(allline[i]).hasWall = true
console.log(this.scene.getObjectByName(allline[i - 1])); // console.log(this.scene.getObjectByName(allline[i - 1]));
console.log(this.scene.getObjectByName(allline[i])); // console.log(this.scene.getObjectByName(allline[i]));
//出现满足条件的风压阀了，这时候就设定为已经有墙了，不需要再添加了 // //出现满足条件的风压阀了，这时候就设定为已经有墙了，不需要再添加了
hasWall = true // hasWall = true
findWallHang = [] // findWallHang = []
//进行添加操作，因为数值问题，所以我们分开进行添加操作 // //进行添加操作，因为数值问题，所以我们分开进行添加操作
for (let line = Allhang[i]; line <= 20; line++) { // for (let line = Allhang[i]; line <= 20; line++) {
if (line < 10) { // if (line < 10) {
let wall = 'wall_' + '0' + line // let wall = 'wall_' + '0' + line
console.log(wall); // console.log(wall);
//把墙设为可见 // //把墙设为可见
this.scene.getObjectByName(wall).visible = true // this.scene.getObjectByName(wall).visible = true
let point = 'point_' + '00' + line + '_tc' // let point = 'point_' + '00' + line + '_tc'
// console.log(this.scene.getObjectByName(point)); // // console.log(this.scene.getObjectByName(point));
//把顶部的附着点设为隐藏！！！，然后设为不可选中 // //把顶部的附着点设为隐藏！！！，然后设为不可选中
this.scene.getObjectByName(point).visible = false // this.scene.getObjectByName(point).visible = false
this.scene.getObjectByName(point).layers.set(-2) // this.scene.getObjectByName(point).layers.set(-2)
//如果最中间一行有设备，我们则需要将设备进行隐藏！！！ // //如果最中间一行有设备，我们则需要将设备进行隐藏！！！
if (this.scene.getObjectByName(point).hasDevice == true) { // if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id // let EquID = this.scene.getObjectByName(point).info.id
this.scene.getObjectById(EquID).visible = false // this.scene.getObjectById(EquID).visible = false
} // }
} else if (line >= 10) { // } else if (line >= 10) {
let wall = 'wall_' + line // let wall = 'wall_' + line
this.scene.getObjectByName(wall).visible = true // this.scene.getObjectByName(wall).visible = true
let point = 'point_' + '0' + line + '_tc' // let point = 'point_' + '0' + line + '_tc'
this.scene.getObjectByName(point).visible = false // this.scene.getObjectByName(point).visible = false
this.scene.getObjectByName(point).layers.set(-2) // this.scene.getObjectByName(point).layers.set(-2)
if (this.scene.getObjectByName(point).hasDevice == true) { // if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id // let EquID = this.scene.getObjectByName(point).info.id
this.scene.getObjectById(EquID).visible = false // this.scene.getObjectById(EquID).visible = false
} // }
} // }
//处理21行的设备和附着点 // //处理21行的设备和附着点
let point = 'point_' + '0' + 21 + '_tc' // let point = 'point_' + '0' + 21 + '_tc'
this.scene.getObjectByName(point).visible = false // this.scene.getObjectByName(point).visible = false
this.scene.getObjectByName(point).layers.set(-2) // this.scene.getObjectByName(point).layers.set(-2)
if (this.scene.getObjectByName(point).hasDevice == true) { // if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id // let EquID = this.scene.getObjectByName(point).info.id
this.scene.getObjectById(EquID).visible = false // this.scene.getObjectById(EquID).visible = false
} // }
} // }
} // }
} // }
} // }
} // }
//处理风压阀的代码片段 //处理风压阀的代码片段
// let lineIndex = targetPoint.name.slice(7, 9); // let lineIndex = targetPoint.name.slice(7, 9);
// if (allline.includes(Number(lineIndex))) { // if (allline.includes(Number(lineIndex))) {
@@ -218,47 +218,47 @@ function removeEquipment(targetPoint) {
//删除我们这里使用行数来判断，即是不是删除到了我们的那一行呢？ //删除我们这里使用行数来判断，即是不是删除到了我们的那一行呢？
//如果删除到了我们那行的话，我们必须将行的数组从中去掉已存在的数据，然后将附着点列表中也去除这个点，然后将墙设置为false来让下次使用 //如果删除到了我们那行的话，我们必须将行的数组从中去掉已存在的数据，然后将附着点列表中也去除这个点，然后将墙设置为false来让下次使用
let lineIndex = targetPoint.name.slice(7, 9) // let lineIndex = targetPoint.name.slice(7, 9)
deleteItem(allline, targetPoint.name) // deleteItem(allline, targetPoint.name)
if (Number(lineIndex) == wallHang) { // if (Number(lineIndex) == wallHang) {
wallHang = 0; // wallHang = 0;
hasWall = false // hasWall = false
for (let line = Number(lineIndex); line <= 20; line++) { // for (let line = Number(lineIndex); line <= 20; line++) {
if (line < 10) { // if (line < 10) {
let wall = 'wall_' + '0' + line // let wall = 'wall_' + '0' + line
this.scene.getObjectByName(wall).visible = false // this.scene.getObjectByName(wall).visible = false
let point = 'point_' + '00' + line + '_tc' // let point = 'point_' + '00' + line + '_tc'
console.log(this.scene.getObjectByName(point)); // console.log(this.scene.getObjectByName(point));
this.scene.getObjectByName(point).visible = true // this.scene.getObjectByName(point).visible = true
this.scene.getObjectByName(point).layers.set(0) // this.scene.getObjectByName(point).layers.set(0)
if (this.scene.getObjectByName(point).hasDevice == true) { // if (this.scene.getObjectByName(point).hasDevice == true) {
this.scene.getObjectByName(point).visible = false // this.scene.getObjectByName(point).visible = false
let EquID = this.scene.getObjectByName(point).info.id // let EquID = this.scene.getObjectByName(point).info.id
this.scene.getObjectById(EquID).visible = true // this.scene.getObjectById(EquID).visible = true
} // }
} else if (line >= 10) { // } else if (line >= 10) {
let wall = 'wall_' + line // let wall = 'wall_' + line
this.scene.getObjectByName(wall).visible = false // this.scene.getObjectByName(wall).visible = false
let point = 'point_' + '0' + line + '_tc' // let point = 'point_' + '0' + line + '_tc'
this.scene.getObjectByName(point).visible = true // this.scene.getObjectByName(point).visible = true
this.scene.getObjectByName(point).layers.set(0) // this.scene.getObjectByName(point).layers.set(0)
if (this.scene.getObjectByName(point).hasDevice == true) { // if (this.scene.getObjectByName(point).hasDevice == true) {
this.scene.getObjectByName(point).visible = false // this.scene.getObjectByName(point).visible = false
let EquID = this.scene.getObjectByName(point).info.id // let EquID = this.scene.getObjectByName(point).info.id
this.scene.getObjectById(EquID).visible = true // this.scene.getObjectById(EquID).visible = true
} // }
} // }
//处理21行的设备和附着点 // //处理21行的设备和附着点
let point = 'point_' + '0' + 21 + '_tc' // let point = 'point_' + '0' + 21 + '_tc'
this.scene.getObjectByName(point).visible = true // this.scene.getObjectByName(point).visible = true
this.scene.getObjectByName(point).layers.set(0) // this.scene.getObjectByName(point).layers.set(0)
if (this.scene.getObjectByName(point).hasDevice == true) { // if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id // let EquID = this.scene.getObjectByName(point).info.id
this.scene.getObjectById(EquID).visible = true // this.scene.getObjectById(EquID).visible = true
} // }
} // }
} // }
deleteItem(Allhang, Number(lineIndex)) // deleteItem(Allhang, Number(lineIndex))

4
src/components/content/tunnelScene/sceneClass/utils/StreetSignTag/StreetSignTag.js
View File

@@ -13,8 +13,8 @@ export function StreetSignTag(text = "", param = "", width = 250, height = 150)
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.font = "20px serif"; ctx.font = "20px serif";
ctx.fillText('隧道简称:' + text, (100 - text.length * 1) / 50, 40); ctx.fillText(' ' + text, (100 - text.length * 1) / 50, 40);
ctx.fillText('隧道长度:' + param + 'm', (100 - param.length * 1) / 50, 115); ctx.fillText(' 隧道长度:' + param + 'm', (100 - param.length * 1) / 50, 115);
ctx.strokeStyle = "white"; ctx.strokeStyle = "white";
ctx.moveTo(0, 75); ctx.moveTo(0, 75);
ctx.lineTo(30000, 120); ctx.lineTo(30000, 120);

8
src/views/tunnel/index.vue
View File

@@ -5,7 +5,7 @@
<div class="tunnel-title"></div> <div class="tunnel-title"></div>
<!-- <manage-length class="tunnel-length"></manage-length>--> <!-- <manage-length class="tunnel-length"></manage-length>-->
<div class="top-length"> <div class="top-length">
<!-- <span>隧道总长度: {{ tunnelLength }}米</span>--> <!-- <span>隧道总长度: {{ tunnelLength }}米</span>-->
<span>当前施工长度: {{ constructionLength }}米</span> <span>当前施工长度: {{ constructionLength }}米</span>
</div> </div>
<div class="top-right"> <div class="top-right">
@@ -39,7 +39,7 @@
<el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
:transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId"/> :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId" />
<used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" /> <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
</el-drawer> </el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div> <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
@@ -245,7 +245,7 @@ const getScreenInfo = (id) => {
initSceneData(id).then((res) => { initSceneData(id).then((res) => {
tunnelLength.value = res.data.tunnelLength tunnelLength.value = res.data.tunnelLength
constructionLength.value = res.data.constructionLength constructionLength.value = res.data.constructionLength
serialNumber.value=res.data.serialNumber serialNumber.value = res.data.serialNumber
initWebSocket(); initWebSocket();
}) })
} }
@@ -350,7 +350,9 @@ const initWebSocket = () => {
socketData.sensor = data; socketData.sensor = data;
} }
}); });
console.log(socketData);
} }
}; };
//连接关闭的回调方法 //连接关闭的回调方法
socket.onclose = function () { socket.onclose = function () {