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

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

@@ -1,115 +1,122 @@
<template>
<div id="main">
<div class="box-top">
<div class="tunnel-title"></div>
<div class="top-right">
<div class="del-btn" @click="handleSave">
保存
<div id="main">
<div class="box-top">
<div class="tunnel-title"></div>
<div class="top-right">
<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 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"/>
</div>
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" :tunnelLength="tunnelLength" />
</div>
</template>
<script setup>
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 tunnelId = reactive(router.currentRoute.value.params.tunnelId)
const form = ref({
tunnelName: '',
serialNumber: '',
totalLength: '',
remarks: ''
tunnelName: '',
serialNumber: '',
totalLength: '',
remarks: ''
});
const getTunnel = () => {
getTunnelDetail(tunnelId).then((res) => {
if (res?.code === 1000) {
console.log('res',res)
form.value=res.data
}
});
getTunnelDetail(tunnelId).then((res) => {
if (res?.code === 1000) {
console.log('res', res)
form.value = res.data
}
});
}
getTunnel()
const tunnelLength = computed(() => form.value.totalLength);
</script>
<style lang="scss" scoped>
#main {
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 {
position: relative;
height: 100%;
}
.edit-box{
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;
:deep(.el-form-item) {
margin-top: 40px;
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;
}
:deep(.el-form-item__label) {
font-size: 38px;
color: #FFFFFF;
margin-right: 12px;
line-height: 50px;
#tunnel-box {
height: 100%;
}
:deep(.el-input) {
height: 75px;
.edit-box {
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 {
background-color: transparent;
border: 1px solid #08B7B8;
.el-input__inner {
height: auto;
color: #fff;
font-size: 38px;
:deep(.el-form-item) {
margin-top: 40px;
}
:deep(.el-form-item__label) {
font-size: 38px;
color: #FFFFFF;
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>