邓洁: 接口部分对接
This commit is contained in:
邓洁
@@ -1,202 +1,241 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<div class="box-top">
|
||||
<div class="back-tunnel" @click="router.back(-1)">
|
||||
<div class="back-icon"></div>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="tunnel-title"></div>
|
||||
<div class="btn-right">
|
||||
<div class="del-btn" @click="handleGotoDevice">
|
||||
设备管理
|
||||
</div>
|
||||
<div class="del-btn" @click="handleSave">
|
||||
保存
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="box-top">
|
||||
<div class="back-tunnel" @click="handleGoTunnelMgr">
|
||||
<div class="back-icon"></div>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="tunnel-title"></div>
|
||||
<div class="btn-right">
|
||||
<div class="del-btn" @click="handleGotoDevice">
|
||||
设备管理
|
||||
</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 class="del-btn" @click="handleSave">
|
||||
保存
|
||||
</div>
|
||||
|
||||
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
|
||||
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" ref="tunnelScene" :tunnelLength="tunnelLength" />
|
||||
</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-radio-group v-model="form.isDefault">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</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" ref="tunnelScene" :tunnelLength="tunnelLength"/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
|
||||
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
|
||||
import { computed } from "vue";
|
||||
import { useModelSceneStore } from "@/store/modelSceneStore";
|
||||
import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
|
||||
import {computed} from "vue";
|
||||
import {useModelSceneStore} from "@/store/modelSceneStore";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const router = useRouter();
|
||||
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
|
||||
const type = reactive(router.currentRoute.value.params.type)
|
||||
const store = useModelSceneStore();
|
||||
const form = ref({
|
||||
tunnelName: '',
|
||||
serialNumber: '',
|
||||
totalLength: '',
|
||||
remarks: ''
|
||||
tunnelName: '',
|
||||
serialNumber: '',
|
||||
totalLength: '',
|
||||
isDefault: false,
|
||||
remarks: ''
|
||||
});
|
||||
const equipmentList = ref([])
|
||||
onMounted(async () => {
|
||||
equipmentList.value = await store.getEquipmentList();
|
||||
equipmentList.value = await store.getEquipmentList();
|
||||
})
|
||||
const getTunnel = () => {
|
||||
getTunnelDetail(tunnelId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
form.value = res.data
|
||||
console.log('for', form.value)
|
||||
}
|
||||
});
|
||||
getTunnelDetail(tunnelId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
form.value = res.data
|
||||
}
|
||||
});
|
||||
}
|
||||
getTunnel()
|
||||
const tunnelLength = computed(() => form.value.totalLength);
|
||||
const handleGotoDevice = () => {
|
||||
router.push('/device/' + tunnelId)
|
||||
router.push('/device/' + tunnelId)
|
||||
}
|
||||
const handleSave =async () => {
|
||||
const data = {
|
||||
tunnelId: tunnelId,
|
||||
tunnelName: form.value.tunnelName,
|
||||
serialNumber: form.value.serialNumber,
|
||||
remarks: form.value.remarks,
|
||||
// constructionLength:form.value.constructionLength,
|
||||
constructionLength: 500,
|
||||
tunnelLength: form.value.totalLength,
|
||||
tunnelThreeConfig: JSON.stringify(await store.getEquipmentList())
|
||||
const handleGoTunnelMgr=()=>{
|
||||
router.push('/tunnel/' + form.value.siteId+'/'+type)
|
||||
}
|
||||
const handleSave = async () => {
|
||||
const data = {
|
||||
tunnelId: tunnelId,
|
||||
tunnelName: form.value.tunnelName,
|
||||
serialNumber: form.value.serialNumber,
|
||||
remarks: form.value.remarks,
|
||||
// constructionLength:form.value.constructionLength,
|
||||
constructionLength: 500,
|
||||
tunnelLength: form.value.totalLength,
|
||||
isDefault: form.value.isDefault,
|
||||
tunnelThreeConfig: JSON.stringify(await store.getEquipmentList())
|
||||
}
|
||||
editTunnel(data).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
router.push('/tunnel/' + form.value.siteId+'/'+type)
|
||||
}
|
||||
console.log('data', data, form.value.tunnelLength)
|
||||
editTunnel(data).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
console.log('re---s', res)
|
||||
ElMessage.success(res.msg)
|
||||
router.push('/tunnel/'+tunnelId)
|
||||
// form.value=res.data
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #072348;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #072348;
|
||||
|
||||
.box-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.back-tunnel {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
//left: 80px;
|
||||
cursor: pointer;
|
||||
margin: 0 0 0 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 180px;
|
||||
height: 80px;
|
||||
line-height: 70px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
font-size: 42px;
|
||||
color: #FFFFFF;
|
||||
|
||||
.back-icon {
|
||||
margin-right: 20px;
|
||||
margin-left: 23px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||||
}
|
||||
}
|
||||
|
||||
.btn-right {
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 80px;
|
||||
|
||||
.del-btn {
|
||||
&:first-child {
|
||||
width: 220px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.box-top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.back-tunnel {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
//left: 80px;
|
||||
cursor: pointer;
|
||||
margin: 0 0 0 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 180px;
|
||||
height: 80px;
|
||||
line-height: 70px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
font-size: 42px;
|
||||
color: #FFFFFF;
|
||||
|
||||
.back-icon {
|
||||
margin-right: 20px;
|
||||
margin-left: 23px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||||
}
|
||||
}
|
||||
|
||||
.btn-right {
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 80px;
|
||||
|
||||
.del-btn {
|
||||
&:first-child {
|
||||
width: 220px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
width: 180px;
|
||||
height: 80px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #FFFFFF;
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
width: 180px;
|
||||
height: 80px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #FFFFFF;
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
#tunnel-box {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#tunnel-box {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.edit-box {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: 80px;
|
||||
width: 830px;
|
||||
//height: 500px;
|
||||
background-image: url(@/assets/images/transducer/bg.png);
|
||||
padding: 20px 30px;
|
||||
box-sizing: border-box;
|
||||
:deep(.el-radio-group) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.edit-box {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: 80px;
|
||||
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;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-radio__label) {
|
||||
color: #FFFFFF;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
:deep(.el-radio__inner) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 25px;
|
||||
border: 4px solid #05FEFF;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:deep(.el-radio__input.is-checked+.el-radio__label) {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
:deep(.el-radio__input.is-checked .el-radio__inner ) {
|
||||
background: #064B66;
|
||||
border-color: #05FEFF !important;
|
||||
}
|
||||
|
||||
:deep(.el-radio__inner::after) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #05FEFF;
|
||||
}
|
||||
|
||||
: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>
|
||||
|
||||
Reference in New Issue
Block a user