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

fix : 多序列号功能

Browse Source
This commit is contained in:
odjbin
2024-08-25 23:00:39 +08:00
parent 4fd4cf4f4c
commit d7378bf0af
5 changed files with 385 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/views/tunnel-manage/index.vue
View File

@@ -20,7 +20,7 @@
<!-- </div>-->
<tunnel-title/>
<div class="all-del-btn" v-if="showOperation">
<div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
<div class="all-btn" style=" margin-right: 40px;" v-if="showAddIcon" @click="handleAdd">
添加
</div>
<div class="all-btn" @click="handleChooseAll">
@@ -67,6 +67,7 @@
</div>
</div>
</div>
<!--/* <div style="width: 925px; height: 0" v-for="n in 8" :key="n"></div>*/-->
<div class="site-box add-box" @click="handleAdd" v-if="showOperation">
<div class="add-icon"></div>
<div style="cursor: pointer">添加隧道</div>
@@ -97,27 +98,61 @@
<el-form-item label="隧道简称" prop="tunnelAlias">
<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="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 serialNumberList" :key="index" >-->
<!-- <el-form-item :label="'序列号'+(index+2)">-->
<!-- <div style="flex: 1;display: flex;">-->
<!-- <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />-->
<!-- <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="addSerialNumber" v-if="index===0">-->
<!-- <CirclePlus/>-->
<!-- </el-icon>-->
<!-- <el-icon v-else size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="delSerialNumber(index)" >-->
<!-- <Remove/>-->
<!-- </el-icon>-->
<!-- </div>-->
<!-- </el-form-item>-->
<!-- </div>-->
<!-- </div>-->
<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 style="display:flex;align-items:center;justify-content:flex-end;font-size: 38px;color: #08B7B8;">
<span style="cursor: pointer;" @click="addSerialNumber">添加序列号</span>
<el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer;" @click="addSerialNumber">
<CirclePlus/>
</el-icon>
</div>
<div v-for="(item,index) in serialNumberList" :key="index">
<el-form-item label="序列号名称">
<div style="flex: 1;display: flex;">
<el-input v-model="item.serialNumberType" placeholder="请输入序列号名称"/>
<!-- <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="addSerialNumber"-->
<!-- v-if="index===0">-->
<!-- <CirclePlus/>-->
<!-- </el-icon>-->
<el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer"
@click="delSerialNumber(index)">
<Remove/>
</el-icon>
</div>
</el-form-item>
<el-form-item :label="item.serialNumberType+'序列号'" class="serialNumber-name-overflow-hidden">
<el-input v-model="item.serialNumber" :placeholder="'请输入'+item.serialNumberType+'序列号'"
style="margin-right: 94px"/>
</el-form-item>
</div>
</div>
<!-- <div style="display: flex;flex-direction: column">-->
<!-- <div v-for="(item,index) in serialNumberList" :key="index" >-->
<!-- <el-form-item :label="'序列号'+(index+2)">-->
<!-- <div style="flex: 1;display: flex;">-->
<!-- <el-input v-model="item.serialNumber" :placeholder="'请输入序列号'+(index+2)" />-->
<!-- <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="addSerialNumber" v-if="index===0">-->
<!-- <CirclePlus/>-->
<!-- </el-icon>-->
<!-- <el-icon v-else size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="delSerialNumber(index)" >-->
<!-- <Remove/>-->
<!-- </el-icon>-->
<!-- </div>-->
<!-- </el-form-item>-->
<!-- </div>-->
<!-- </div>-->
<el-form-item label="隧道长度" prop="totalLength">
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
</el-form-item>
@@ -190,7 +225,8 @@ import {debounce} from 'lodash'
const serialNumberList = ref([
{
serialNumberOne: ''
serialNumber: '',
serialNumberType: ''
}
])
@@ -203,7 +239,7 @@ const validateSerialNumberPrefix = (rule, value) => {
}
const router = useRouter()
const siteImage = ref()
const showAddIcon = ref(true)
const showAddIcon = ref(false)
const params = router.currentRoute.value.params;
const siteId = reactive(params.siteId)
const userId = reactive(params.userId)
@@ -220,7 +256,7 @@ const formRules = ref({
{required: true, message: '请输入PLC序列号', trigger: ['blur', 'change']},
{validator: validateNumber, message: '请输入英文、数字、英文数字组合的PLC序列号', trigger: ['blur', 'change']},
{min: 16, max: 16, message: '隧道PLC序列号长度为16位', trigger: ['blur', 'change']},
// {validator: validateSerialNumberPrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
{validator: validateSerialNumberPrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
],
serialNumberOne: [
// {required: true, message: '请输入序列号2', trigger: ['blur', 'change']},
@@ -237,7 +273,7 @@ const formRules = ref({
dropFrequency: [{required: true, message: '请输入降频率', trigger: ['blur', 'change']}]
})
let clickModel = ref(1)
const showFirst = ref(true)
const showFirst = ref(false)
const showOperation = ref(true)
const formInstance = ref()
const tunnelList = ref([])
@@ -313,14 +349,14 @@ const form = ref({
tunnelName: '',
tunnelAlias: '',
serialNumberPrefix: '',
serialNumberOne: '',
serialNumber: '',
// serialNumberOne: '',
totalLength: '',
referenceFrequency: '',
upTime: '',
upTime: 0,
upFrequency: '',
dropTime: '',
dropFrequency: '',
dropTime: 0,
dropFrequency: 0,
remarks: '',
isDefault: false
});
@@ -329,13 +365,14 @@ const pageInfo = reactive({
pageNum: 1,
pageSize: 12
});
const total = ref(10);
const total = ref(0);
onMounted(() => {
showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
})
const addSerialNumber = () => {
serialNumberList.value.push({
serialNumberOne: ''
serialNumber: '',
serialNumberType: '',
})
}
const delSerialNumber = (index) => {
@@ -404,7 +441,8 @@ const getList = () => {
if (res.code === 1000) {
total.value = res.data.total
tunnelList.value = res.data.rows
showFirst.value = total.value / pageInfo.pageSize >= 1;
showFirst.value = (total.value / pageInfo.pageSize) > 1;
showAddIcon.value = (total.value / pageInfo.pageSize) == 1;
// siteName.value = res.data.siteName
} else {
ElMessage.warning(res.msg)
@@ -427,15 +465,18 @@ const handleCurrentChange = (val) => {
getList()
}
const handleSubmit = debounce((instance) => {
let serialNumberListParam=serialNumberList.value.map(item=>item.serialNumberOne)
if (serialNumberList.value?.length > 0 && !serialNumberList.value[0].serialNumber&& !serialNumberList.value[0].serialNumberType) {
serialNumberList.value = []
}
if (!instance) return
instance.validate(async (valid) => {
if (!valid) return
const data = {
siteId: siteId,
...form.value,
serialNumberList:serialNumberListParam
tunnelGatewayDtoList: serialNumberList.value
}
console.info("🚀 ~method:data -----", data)
addTunnel(data).then(res => {
if (res.code === 1000) {
ElMessage.success('新增成功')
@@ -449,7 +490,6 @@ const handleSubmit = debounce((instance) => {
}, 100)
//预览隧道
const handlePreview = (id) => {
console.log('预览')
if (id) {
getTunnelBySiteId(siteId).then((res) => {
if (res?.code === 1000) {
@@ -498,9 +538,9 @@ const restFrom = () => {
serialNumber: '',
totalLength: '',
referenceFrequency: '',
upTime: '',
upTime: 0,
upFrequency: '',
dropTime: '',
dropTime: 0,
dropFrequency: '',
remarks: '',
isDefault: false
@@ -510,6 +550,12 @@ const handleAdd = () => {
restFrom()
title.value = '新增隧道'
isVisited.value = true
serialNumberList.value = [
// {
// serialNumber: '',
// serialNumberType:''
// }
]
nextTick(() => {
// 清空校验
formInstance.value.clearValidate()
@@ -562,6 +608,10 @@ const handleMoreDelete = debounce(() => {
</script>
<style scoped lang="scss">
.serialNumber-name-overflow-hidden {
}
.showNull {
margin-top: 150px;
font-size: 60px;
@@ -793,13 +843,20 @@ const handleMoreDelete = debounce(() => {
margin: 100px;
}
.box-content::after {
content: '';
flex: 0.65;
justify-content: flex-end;
}
.box-content {
height: 1850px;
display: flex;
flex-wrap: wrap;
padding-left: 67px;
padding-right: 70px;
//justify-content: space-between;
//padding-right: 70px;
align-content: flex-start;
justify-content: space-between;
box-sizing: border-box;
overflow: hidden;
@@ -835,10 +892,10 @@ const handleMoreDelete = debounce(() => {
//&:hover {
// background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
//}
&:nth-child(4n) {
margin-right: 0;
}
//
//&:nth-child(4n) {
// margin-right: 0;
//}
.top {
display: flex;