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
2023-12-26 23:31:35 +08:00
parent 49baa25f8a
commit e25398db7d
2 changed files with 117 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@
<!-- 这里的预览模式需要做成不能修改的模式 --> <!-- 这里的预览模式需要做成不能修改的模式 -->
<edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel" <edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
:hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice" :hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice"
pointGap="500" /> :pointGap="pointGap" />
<el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style=" <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
margin: 20% auto; margin: 20% auto;
width: 569px; width: 569px;
@@ -47,7 +47,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, watch } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore"; import { useModelSceneStore } from "@/store/modelSceneStore";
@@ -62,13 +62,32 @@ const loader = new OBJLoader();
let hdrLoader = new RGBELoader(); let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding; let backColorSet = three.sRGBEncoding;
const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理 const params = defineProps(["isedit", "tunnelId", "tunnelLength"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit); let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId);
console.log(tunnelId);
console.log(params.tunnelLength);
watch(
() => params.tunnelLength,
(now) => {
params.tunnelLength = now
console.log(params.tunnelLength);
pointGap = now / 20
},
{ deep: true }
)
let pointGap = reactive(params.tunnelLength);
onMounted(handleMounted); onMounted(handleMounted);
// 挂载后回调 // 挂载后回调
async function handleMounted() { async function handleMounted() {
const doms = [info.value.$el, edit.value.$el]; const doms = [info.value.$el, edit.value.$el];
demo = new ThreeDScene(three, content.value); demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行) //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
@@ -108,6 +127,8 @@ async function handleMounted() {
type: "warning", type: "warning",
}); });
} }
} }
// 每个模型加载回调 // 每个模型加载回调

179
src/views/edit/edit.vue
View File

@@ -1,115 +1,122 @@
<template> <template>
<div id="main"> <div id="main">
<div class="box-top"> <div class="box-top">
<div class="tunnel-title"></div> <div class="tunnel-title"></div>
<div class="top-right"> <div class="top-right">
<div class="del-btn" @click="handleSave"> <div class="del-btn" @click="handleSave">
保存 保存
</div>
</div>
</div>
<div class="edit-box">
<el-form :model="form" :label-position="right" label-width="188px">
<el-form-item label="隧道名称">
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称" />
</el-form-item>
<el-form-item label="序列号">
<el-input v-model="form.serialNumber" placeholder="请输入序列号" />
</el-form-item>
<el-form-item label="隧道长度">
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度" />
</el-form-item>
<el-form-item label="隧道备注">
<el-input v-model="form.remarks" placeholder="请输入隧道备注" />
</el-form-item>
</el-form>
</div> </div>
</div>
</div>
<div class="edit-box">
<el-form :model="form" :label-position="right" label-width="188px">
<el-form-item label="隧道名称">
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
</el-form-item>
<el-form-item label="序列号">
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
</el-form-item>
<el-form-item label="隧道长度">
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
</el-form-item>
<el-form-item label="隧道备注">
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
</el-form-item>
</el-form>
</div>
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 --> <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId"/> <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" :tunnelLength="tunnelLength" />
</div> </div>
</template> </template>
<script setup> <script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue"; import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import {getTunnelDetail} from "../../api/tunnelManage"; import { getTunnelDetail } from "../../api/tunnelManage";
import { reactive, computed } from "vue";
const router = useRouter(); const router = useRouter();
const tunnelId = reactive(router.currentRoute.value.params.tunnelId) const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
const form = ref({ const form = ref({
tunnelName: '', tunnelName: '',
serialNumber: '', serialNumber: '',
totalLength: '', totalLength: '',
remarks: '' remarks: ''
}); });
const getTunnel = () => { const getTunnel = () => {
getTunnelDetail(tunnelId).then((res) => { getTunnelDetail(tunnelId).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
console.log('res',res) console.log('res', res)
form.value=res.data form.value = res.data
} }
}); });
} }
getTunnel() getTunnel()
const tunnelLength = computed(() => form.value.totalLength);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#main { #main {
position: relative; position: relative;
height: 100%;
width: 100%;
background-color: #072348;
.del-btn {
position: absolute;
top: 85px;
right: 80px;
cursor: pointer;
font-size: 42px;
width: 180px;
height: 80px;
line-height: 80px;
background: #08B7B8;
border-radius: 11px;
padding-left: 50px;
}
#tunnel-box {
height: 100%; height: 100%;
} width: 100%;
.edit-box{ background-color: #072348;
z-index: 2;
position: absolute; .del-btn {
top: 160px; position: absolute;
left: 70px; top: 85px;
width: 830px; right: 80px;
height: 500px; cursor: pointer;
background-image: url(@/assets/images/transducer/bg.png); font-size: 42px;
padding: 0 30px; width: 180px;
box-sizing: border-box; height: 80px;
:deep(.el-form-item) { line-height: 80px;
margin-top: 40px; background: #08B7B8;
border-radius: 11px;
padding-left: 50px;
} }
:deep(.el-form-item__label) { #tunnel-box {
font-size: 38px; height: 100%;
color: #FFFFFF;
margin-right: 12px;
line-height: 50px;
} }
:deep(.el-input) { .edit-box {
height: 75px; z-index: 2;
position: absolute;
top: 160px;
left: 70px;
width: 830px;
height: 500px;
background-image: url(@/assets/images/transducer/bg.png);
padding: 0 30px;
box-sizing: border-box;
.el-input__wrapper { :deep(.el-form-item) {
background-color: transparent; margin-top: 40px;
border: 1px solid #08B7B8; }
.el-input__inner { :deep(.el-form-item__label) {
height: auto; font-size: 38px;
color: #fff; color: #FFFFFF;
font-size: 38px; margin-right: 12px;
line-height: 50px;
}
:deep(.el-input) {
height: 75px;
.el-input__wrapper {
background-color: transparent;
border: 1px solid #08B7B8;
.el-input__inner {
height: auto;
color: #fff;
font-size: 38px;
}
}
} }
}
} }
}
} }
</style> </style>