343 lines
10 KiB
Vue
343 lines
10 KiB
Vue
<template>
|
||
<div id="main">
|
||
<div class="box-top">
|
||
<div class="back-tunnel" @click="handleGoTunnelMgr">
|
||
<div class="back-icon"></div>
|
||
<span>返回</span>
|
||
</div>
|
||
<tunnel-title/>
|
||
<div class="btn-right">
|
||
<div class="del-btn" @click="handleGotoDevice">设备管理</div>
|
||
<div class="del-btn" @click="handleSave">保存</div>
|
||
</div>
|
||
</div>
|
||
<div class="edit-box">
|
||
<el-form :model="form" :label-position="right" label-width="230px">
|
||
<el-form-item label="隧道名称">
|
||
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
|
||
</el-form-item>
|
||
<el-form-item label="隧道简称">
|
||
<el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
|
||
</el-form-item>
|
||
<el-form-item label="序列号前缀" prop="serialNumberPrefix">
|
||
<el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
|
||
</el-form-item>
|
||
<el-form-item label="序列号1" prop="serialNumber">
|
||
<el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="序列号2" prop="serialNumberOne">-->
|
||
<!-- <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>-->
|
||
<!-- </el-form-item>-->
|
||
|
||
|
||
<!-- <el-form-item label="PLC序列号" prop="serialNumber">-->
|
||
<!-- <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <div style="display: flex;flex-direction: column">-->
|
||
<!-- <div v-for="(item,index) in form.serialNumberList" :key="index" >-->
|
||
<!-- <el-form-item :label="'序列号'+(index+2)">-->
|
||
<!-- <div style="flex: 1;display: flex;">-->
|
||
<!-- <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />-->
|
||
<!-- </div>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<el-form-item label="隧道长度">
|
||
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
|
||
</el-form-item>
|
||
<el-form-item label="施工长度">
|
||
<el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
|
||
</el-form-item>
|
||
<el-form-item label="基准频率" prop="referenceFrequency">
|
||
<el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
|
||
</el-form-item>
|
||
<div style="display: flex">
|
||
<el-form-item label="升频时间(分钟)" prop="upTime" label-width="280px">
|
||
<el-input-number v-model="form.upTime" :min="0" :max="60"/>
|
||
</el-form-item>
|
||
<el-form-item label="升频率" prop="upFrequency">
|
||
<el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率">
|
||
<template #suffix>
|
||
<span>Hz</span>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div style="display: flex">
|
||
<el-form-item label="降频时间(分钟)" prop="dropTime" label-width="280px">
|
||
<el-input-number v-model="form.dropTime" :min="0" :max="60"/>
|
||
</el-form-item>
|
||
<el-form-item label="降频率" prop="dropFrequency">
|
||
<el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率">
|
||
<template #suffix>
|
||
<span>Hz</span>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<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" :form="form" ref="tunnelScene"
|
||
:tunnelLength="tunnelLength"/>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
|
||
import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
|
||
import {ElLoading, ElMessage} from "element-plus";
|
||
import {initSceneData} from "@/api/tunnelScene";
|
||
import TunnelTitle from "@/components/tunnelTitle/index.vue";
|
||
import {debounce} from 'lodash'
|
||
|
||
const router = useRouter();
|
||
const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
|
||
const userId = reactive(router.currentRoute.value.params.userId);
|
||
const type = reactive(router.currentRoute.value.params.type);
|
||
const modelEquipmentList = ref(null)
|
||
const form = ref({
|
||
tunnelName: "",
|
||
serialNumberPrefix: '',
|
||
serialNumberOne: '',
|
||
serialNumber: '',
|
||
totalLength: "",
|
||
referenceFrequency: '',
|
||
upTime: '',
|
||
upFrequency: '',
|
||
dropTime: '',
|
||
dropFrequency: '',
|
||
isDefault: false,
|
||
remarks: "",
|
||
serialNumberList: []
|
||
});
|
||
const getTunnel = () => {
|
||
const loading = ElLoading.service({
|
||
lock: true,
|
||
text: '正在加载系统资源...',
|
||
background: 'rgba(0, 0, 0, 0.7)',
|
||
customClass: 'allLoading'
|
||
})
|
||
getTunnelDetail(tunnelId).then((res) => {
|
||
if (res?.code === 1000) {
|
||
res.data.serialNumberList = res.data.serialNumberList?.map(item => ({serialNumberOne: item}))
|
||
form.value = res.data;
|
||
}
|
||
loading.close()
|
||
});
|
||
};
|
||
getTunnel();
|
||
const tunnelLength = computed(() => form.value.totalLength);
|
||
const handleGotoDevice = () => {
|
||
if (type === 'bySite') {
|
||
router.push('/device/' + tunnelId + '/bySite/' + userId)
|
||
} else if (type === 'byHome') {
|
||
router.push('/device/' + tunnelId + '/byHome/' + userId)
|
||
}
|
||
};
|
||
const handleGoTunnelMgr = () => {
|
||
router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
|
||
};
|
||
const getTunnelInfo = () => {
|
||
initSceneData(tunnelId).then((res) => {
|
||
modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
|
||
if (modelEquipmentList.value === null) {
|
||
modelEquipmentList.value = []
|
||
}
|
||
|
||
let serialNumberList = form.value.serialNumberList.map(item => item.serialNumberOne)
|
||
const data = {
|
||
tunnelId: tunnelId,
|
||
...form.value,
|
||
serialNumberList: serialNumberList,
|
||
tunnelLength: form.value.totalLength,
|
||
modelEquipmentList: modelEquipmentList.value,
|
||
};
|
||
editTunnel(data).then((res) => {
|
||
if (res?.code === 1000) {
|
||
ElMessage.success(res.msg);
|
||
router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
|
||
} else {
|
||
ElMessage.error(res.msg);
|
||
}
|
||
});
|
||
})
|
||
}
|
||
const handleSave = debounce(() => {
|
||
getTunnelInfo()
|
||
}, 100)
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
:deep(.el-form-item__content) {
|
||
.el-input-number {
|
||
width: 237px;
|
||
|
||
.el-input-number__decrease, .el-input-number__increase {
|
||
background-color: #08B7B8;
|
||
width: 50px;
|
||
|
||
.el-icon {
|
||
font-size: 40px;
|
||
color: #FFFFFF;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#main {
|
||
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;
|
||
}
|
||
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
#tunnel-box {
|
||
height: 100%;
|
||
}
|
||
|
||
.edit-box {
|
||
z-index: 2;
|
||
position: absolute;
|
||
top: 250px;
|
||
left: 80px;
|
||
width: 1000px;
|
||
//height: 500px;
|
||
background-image: url(@/assets/images/transducer/bg.png);
|
||
padding: 20px 30px;
|
||
box-sizing: border-box;
|
||
|
||
:deep(.el-radio-group) {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
: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;
|
||
}
|
||
|
||
.el-input__suffix-inner {
|
||
font-size: 30px;
|
||
color: #08B7B8;
|
||
line-height: 40px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|