feat : 隧道模拟
This commit is contained in:
@@ -1,861 +0,0 @@
|
||||
<template>
|
||||
<div class="tunnel-bgc">
|
||||
<div class="box-top">
|
||||
<div class="back-tunnel" @click="router.back(-1)">
|
||||
<div class="back-icon"></div>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="tunnel-name">
|
||||
{{ tunnelName }}
|
||||
</div>
|
||||
<tunnel-title/>
|
||||
</div>
|
||||
<div class="device-content">
|
||||
<div class="device-box">
|
||||
<div class="box-left">
|
||||
<el-menu
|
||||
default-active="1"
|
||||
@select="handleChangeMenu"
|
||||
>
|
||||
<el-menu-item index="1">
|
||||
<span>风机</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<span>风压</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<span>其他传感器</span>
|
||||
</el-menu-item>
|
||||
<!-- <el-menu-item index="4">-->
|
||||
<!-- <span>分流器</span>-->
|
||||
<!-- </el-menu-item>-->
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==1">
|
||||
<div class="device-title">
|
||||
<span>风机设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="fanFrequency">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;" table-layout="auto"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
|
||||
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||
<el-table-column prop="ratedPower" label="额定功率" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="额定功率" v-model="scope.row.ratedPower"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
|
||||
<el-table-column prop="acurrentValue" label="A电流阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="A电流" v-model="scope.row.acurrentValue"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
|
||||
<el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
|
||||
<el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="serialNumber" label="序列号" align="center" width="500">
|
||||
<template #default="scope">
|
||||
<!-- {{scope.row.serialNumberOption.filter(item => item.value == scope.row.serialNumber).map(item => item.label)[0]}}?-->
|
||||
<!-- <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
|
||||
<!-- clearable class="serialNumber">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in scope.row.serialNumberOption"-->
|
||||
<!-- :key="item.value"-->
|
||||
<!-- :label="item.label"-->
|
||||
<!-- :value="item.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click="scope.row.state = 1; "
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0; "
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="editEquip">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==2">
|
||||
<div class="device-title">
|
||||
<span>风压设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="windFrequency">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe table-layout="auto"
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
|
||||
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||
<el-table-column prop="offset" label="偏移量" align="center"/>
|
||||
<el-table-column prop="unit" label="单位" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="单位" v-model="scope.row.unit" ></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="alarmValue" label="阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="阈值" v-model="scope.row.alarmValue"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="miniRange" label="最小范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最小范围" v-model="scope.row.miniRange"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="maxRange" label="最大范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最大范围" v-model="scope.row.maxRange"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="serialNumber" label="序列号" align="center" width="500">
|
||||
<template #default="scope">
|
||||
<el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
|
||||
clearable class="serialNumber" @clear="clearWinDataSelectedOption" >
|
||||
<!-- @change="changeWindDataSerialNumber($event,scope.row.serialNumberOption)"-->
|
||||
<el-option
|
||||
v-for="item in scope.row.serialNumberOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
|
||||
/>
|
||||
<!-- :disabled="serialNumberOptionDisabled(item)"-->
|
||||
<!-- :title="serialNumberOptionDisabled(item)?'该4G序列号已选择':''"-->
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch wind-switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click=" scope.row.state = 1; "
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0; "
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="editEquip">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==3">
|
||||
<div class="device-title">
|
||||
<span>其他传感器设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="otherFrequency">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe table-layout="auto"
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
|
||||
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||
<el-table-column prop="offset" label="偏移量" align="center"/>
|
||||
<el-table-column prop="unit" label="单位" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="单位" v-model="scope.row.unit" ></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="alarmValue" label="阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="阈值" v-model="scope.row.alarmValue"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="miniRange" label="最小范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最小范围" v-model="scope.row.miniRange"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="maxRange" label="最大范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最大范围" v-model="scope.row.maxRange"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="serialNumber" label="序列号" align="center" width="500">
|
||||
<template #default="scope">
|
||||
<el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
|
||||
clearable class="serialNumber">
|
||||
<el-option
|
||||
v-for="item in otherSensorSerialNumberOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch wind-switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click=" scope.row.state = 1; "
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0; "
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="editEquip">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==4">
|
||||
<div class="device-title">
|
||||
<span>分流器设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="fenFrequency">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fenLiuData">
|
||||
<el-table-column prop="name" label="设备名称" align="center"/>
|
||||
<el-table-column prop="offset" label="偏移量" align="center"/>
|
||||
<el-table-column prop="thresholdValue" label="阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="阈值" v-model="scope.row.thresholdValue"
|
||||
@change="changeFenData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click=" scope.row.state = 1;changeFenData(scope.row)"
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0;changeFenData(scope.row)"
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="handleEditFen">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import {getEquipmentList, editEquipment, getTunnelDetail,getOtherSensorSerialNumberOptions, getWindPressureSerialNumberOptions} from "@/api/tunnelManage";
|
||||
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 fanFrequency = ref(0)
|
||||
const windFrequency = ref(0)
|
||||
const otherFrequency = ref(0)
|
||||
const changeIndex = ref(1)
|
||||
const fanData = ref([])
|
||||
const winData = ref([])
|
||||
const windPressureDataSerialNumberOptions = ref([])
|
||||
const otherSensorSerialNumberOptions = ref([])
|
||||
const otherData = ref([])
|
||||
const winDataSelectedOption = ref([])
|
||||
const fenLiuData = ref([])
|
||||
const siteId = ref(0)
|
||||
const tunnelName = ref('')
|
||||
const getWindPressureOptions =async () => {
|
||||
let {data,code,msg}=await getWindPressureSerialNumberOptions(tunnelId)
|
||||
if(code===1000){
|
||||
windPressureDataSerialNumberOptions.value= data
|
||||
}else{
|
||||
ElMessage.error(msg)
|
||||
}
|
||||
}
|
||||
getWindPressureOptions()
|
||||
const getOtherSensorOptions =async () => {
|
||||
let {data,code,msg}=await getOtherSensorSerialNumberOptions(tunnelId)
|
||||
if(code===1000){
|
||||
otherSensorSerialNumberOptions.value= data
|
||||
}else{
|
||||
ElMessage.error(msg)
|
||||
}
|
||||
}
|
||||
getOtherSensorOptions()
|
||||
const clearWinDataSelectedOption=()=>{
|
||||
winDataSelectedOption.value=[]
|
||||
}
|
||||
const changeWindDataSerialNumber = (value,options) => {
|
||||
options?.forEach(item=>{
|
||||
if(item.value==value){
|
||||
if(item.label.indexOf('4G')>=0){
|
||||
winDataSelectedOption.value.push(value)
|
||||
}else{
|
||||
winDataSelectedOption.value=[]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const serialNumberOptionDisabled=(item)=>{
|
||||
return winDataSelectedOption.value.indexOf(item.value) >= 0;
|
||||
}
|
||||
const changeData = (item) => {
|
||||
return {
|
||||
equipmentId: item.equipmentId,
|
||||
unit: item.unit,
|
||||
alarmValue: item.alarmValue,
|
||||
serialNumber:item.serialNumber,
|
||||
miniRange: parseInt(item.miniRange),
|
||||
maxRange: parseInt(item.maxRange),
|
||||
state: item.state,
|
||||
}
|
||||
}
|
||||
const editEquip = debounce(() => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '修改中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
customClass: 'allLoading'
|
||||
})
|
||||
let newFrequency = [{
|
||||
acquisitionPeriod: fanFrequency.value * 1000,
|
||||
tunnelId: parseInt(tunnelId),
|
||||
typeKey: 'frequency'
|
||||
}, {
|
||||
acquisitionPeriod: windFrequency.value * 1000,
|
||||
tunnelId: parseInt(tunnelId),
|
||||
typeKey: 'windPressure'
|
||||
}, {
|
||||
acquisitionPeriod: otherFrequency.value * 1000,
|
||||
tunnelId: parseInt(tunnelId),
|
||||
typeKey: 'sensor'
|
||||
}]
|
||||
let newFan = []
|
||||
let newWind = []
|
||||
let newSensor = []
|
||||
fanData.value.forEach(item => {
|
||||
let obj = {
|
||||
equipmentId: item.equipmentId,
|
||||
ratedPower: parseInt(item.ratedPower),
|
||||
acurrentValue: parseInt(item.acurrentValue),
|
||||
bcurrentValue: parseInt(item.bcurrentValue),
|
||||
ccurrentValue: parseInt(item.ccurrentValue),
|
||||
serialNumber:item.serialNumber,
|
||||
state: parseInt(item.state)
|
||||
}
|
||||
newFan.push(obj)
|
||||
})
|
||||
winData.value.forEach(item => {
|
||||
newWind.push(changeData(item))
|
||||
})
|
||||
otherData.value.forEach(item => {
|
||||
newSensor.push(changeData(item))
|
||||
})
|
||||
const basicData = {
|
||||
tunnelId: tunnelId,
|
||||
acquisitionList: newFrequency,
|
||||
frequencyChangerList: newFan,
|
||||
windPressureSensorList: newWind,
|
||||
sensorList: newSensor,
|
||||
// shuntList: editFenLiuData.value,
|
||||
}
|
||||
// console.info("🚀 ~ file:index method: line:478 -----",basicData)
|
||||
editEquipment(basicData).then(res => {
|
||||
if (res.code === 1000) {
|
||||
loading.close()
|
||||
ElMessage.success('修改成功')
|
||||
router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
loading.close()
|
||||
|
||||
}
|
||||
})
|
||||
}, 100)
|
||||
|
||||
const handleChangeMenu = (e) => {
|
||||
changeIndex.value = e
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '正在加载系统资源...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
customClass: 'allLoading'
|
||||
})
|
||||
getEquipmentList(tunnelId).then( res => {
|
||||
if (res.code === 1000) {
|
||||
fanData.value = res.data.frequencyChangerList
|
||||
res.data.windPressureSensorList?.forEach(item => {
|
||||
item.offset = item.offset + 4000
|
||||
})
|
||||
winData.value = res.data.windPressureSensorList
|
||||
winData.value?.forEach(item => {
|
||||
for (const equipmentId in windPressureDataSerialNumberOptions.value) {
|
||||
if(item.equipmentId == equipmentId){
|
||||
item.serialNumberOption =windPressureDataSerialNumberOptions.value[equipmentId]
|
||||
}
|
||||
}
|
||||
})
|
||||
res.data.sensorList?.forEach(item => {
|
||||
item.offset = item.offset + 4000
|
||||
})
|
||||
otherData.value = res.data.sensorList
|
||||
res.data.acquisitionList.map(item => {
|
||||
item.acquisitionPeriod = item.acquisitionPeriod / 1000
|
||||
if (item.typeKey === 'frequency') {
|
||||
fanFrequency.value = item.acquisitionPeriod
|
||||
} else if (item.typeKey === 'windPressure') {
|
||||
windFrequency.value = item.acquisitionPeriod
|
||||
} else if (item.typeKey === 'sensor') {
|
||||
otherFrequency.value = item.acquisitionPeriod
|
||||
}
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
const getTunnel = () => {
|
||||
getTunnelDetail(tunnelId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
siteId.value = res.data.siteId
|
||||
tunnelName.value = res.data.tunnelName
|
||||
}
|
||||
});
|
||||
}
|
||||
getTunnel()
|
||||
getList()
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.serialNumber{
|
||||
.el-input{
|
||||
width: 580px!important;
|
||||
}
|
||||
.el-input__suffix-inner{
|
||||
.el-icon{
|
||||
width: 3em!important;
|
||||
height: 3em!important;
|
||||
color: #fff!important;
|
||||
svg{
|
||||
width: 3em!important;
|
||||
height: 3em!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-select.serialNumber {
|
||||
border-radius: 6px!important;
|
||||
border: 1px solid #05FEFF!important;
|
||||
background-color: transparent!important;
|
||||
.el-select__wrapper{
|
||||
height: 54px!important;
|
||||
color: #FFFFFF!important;
|
||||
font-size: 40px!important;
|
||||
//height: auto!important;
|
||||
line-height: normal!important;
|
||||
border-radius: 6px!important;
|
||||
border: 1px solid #05FEFF!important;
|
||||
background-color: transparent!important;
|
||||
}
|
||||
.el-select__placeholder {
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.serialNumber-select.el-popper {
|
||||
background: #064B66 !important;
|
||||
border: 2px solid #05FEFF !important;
|
||||
|
||||
.el-select-dropdown {
|
||||
min-width: 130px !important;
|
||||
}
|
||||
.el-select-dropdown__item.is-hovering{
|
||||
background-color: #064B66 !important;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
color: #FFFFFF;
|
||||
border-bottom: 1px solid #05FEFF;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.el-select-dropdown__item.selected {
|
||||
background-color: transparent !important;
|
||||
color: #F7B500;
|
||||
}
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: transparent !important;
|
||||
color: #F7B500;
|
||||
}
|
||||
.el-select-dropdown__item.is-disabled{
|
||||
background-color: transparent !important;
|
||||
color: #fff!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.tunnel-bgc {
|
||||
padding: 85px 0 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/tunnel/sd_bj.png');
|
||||
|
||||
.box-top {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.tunnel-name {
|
||||
margin-left: 120px;
|
||||
height: 61px;
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 61px;
|
||||
}
|
||||
|
||||
.back-tunnel {
|
||||
cursor: pointer;
|
||||
margin: 0 0 0 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 178px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
font-size: 38px;
|
||||
color: #FFFFFF;
|
||||
|
||||
.back-icon {
|
||||
margin-right: 20px;
|
||||
margin-left: 23px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 190px;
|
||||
|
||||
.device-box {
|
||||
display: flex;
|
||||
width: 3500px;
|
||||
height: 1600px;
|
||||
background: #064B66;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #05FEFF;
|
||||
box-sizing: border-box;
|
||||
|
||||
.box-left {
|
||||
padding-left: 24px;
|
||||
width: 300px;
|
||||
height: 1596px;
|
||||
background: #0D5A7A;
|
||||
border-radius: 20px 0px 0px 20px;
|
||||
|
||||
:deep(.el-menu) {
|
||||
border-right: none;
|
||||
margin-top: 261px;
|
||||
background-color: #0D5A7A;
|
||||
|
||||
.el-menu-item.is-active {
|
||||
background-image: url(../../assets/images/device/sdgl_xz.png);
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: #fff;
|
||||
height: 90px;
|
||||
font-size: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: #0D5A7A;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
letter-spacing: 120px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
letter-spacing: 120px;
|
||||
}
|
||||
|
||||
//&:nth-child(4) {
|
||||
// letter-spacing: 40px;
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.device-title {
|
||||
margin-top: 60px;
|
||||
line-height: 61px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
> span:first-child {
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.collection-frequency {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 102px;
|
||||
|
||||
> span:first-child {
|
||||
font-size: 38px !important;
|
||||
white-space: pre;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 166px;
|
||||
height: 56px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
transform: none;
|
||||
transition: none;
|
||||
|
||||
.el-input__inner {
|
||||
height: 54px;
|
||||
font-size: 30px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.el-input__suffix-inner {
|
||||
font-size: 30px;
|
||||
color: #08B7B8;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
}
|
||||
|
||||
.device-table {
|
||||
margin-top: 50px;
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
|
||||
.active {
|
||||
color: #FFFFFF;
|
||||
background: #0f7da9;
|
||||
}
|
||||
|
||||
.wind-switch {
|
||||
//margin-left: 26px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-top: 22px;
|
||||
|
||||
display: flex;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
overflow: hidden;
|
||||
color: #51A2B3;
|
||||
line-height: 40px;
|
||||
font-size: 36px;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table--fit) {
|
||||
//width: 1780px !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
:deep(.cell) {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
background-color: #1C5971;
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
|
||||
background-color: #1C5971;
|
||||
}
|
||||
|
||||
:deep(.el-table__row--striped) {
|
||||
background-color: #13849C !important;
|
||||
}
|
||||
|
||||
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
|
||||
background-color: #13849C !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__cell) {
|
||||
.el-input {
|
||||
width: 180px;
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
background-color: transparent;
|
||||
|
||||
.el-input__inner {
|
||||
color: #FFFFFF;
|
||||
font-size: 40px;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__inner-wrapper::before) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,860 +0,0 @@
|
||||
<template>
|
||||
<div class="tunnel-bgc">
|
||||
<div class="box-top">
|
||||
<div class="back-tunnel" @click="router.back(-1)">
|
||||
<div class="back-icon"></div>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="tunnel-name">
|
||||
{{ tunnelName }}
|
||||
</div>
|
||||
<tunnel-title/>
|
||||
</div>
|
||||
<div class="device-content">
|
||||
<div class="device-box">
|
||||
<div class="box-left">
|
||||
<el-menu
|
||||
default-active="1"
|
||||
@select="handleChangeMenu"
|
||||
>
|
||||
<el-menu-item index="1">
|
||||
<span>风机</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<span>风压</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<span>其他传感器</span>
|
||||
</el-menu-item>
|
||||
<!-- <el-menu-item index="4">-->
|
||||
<!-- <span>分流器</span>-->
|
||||
<!-- </el-menu-item>-->
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==1">
|
||||
<div class="device-title">
|
||||
<span>风机设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="fanFrequency" @change="changeFan">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;" table-layout="auto"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
|
||||
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||
<el-table-column prop="ratedPower" label="额定功率" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="额定功率" v-model="scope.row.ratedPower"
|
||||
@change="changeFanData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
|
||||
<el-table-column prop="acurrentValue" label="A电流阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="A电流" v-model="scope.row.acurrentValue"
|
||||
@change="changeFanData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
|
||||
<el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
|
||||
@change="changeFanData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
|
||||
<el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
|
||||
@change="changeFanData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
|
||||
<!-- @change="changeFanData(scope.row)" class="serialNumber">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in scope.row.serialNumberOption"-->
|
||||
<!-- :key="item.value"-->
|
||||
<!-- :label="item.label"-->
|
||||
<!-- :value="item.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click="scope.row.state = 1;changeFanData(scope.row)"
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0;changeFanData(scope.row)"
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="editEquip">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==2">
|
||||
<div class="device-title">
|
||||
<span>风压设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="windFrequency" @change="changeWind">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe table-layout="auto"
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
|
||||
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||
<el-table-column prop="offset" label="偏移量" align="center"/>
|
||||
<el-table-column prop="unit" label="单位" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="单位" v-model="scope.row.unit" @change="changeWindData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="alarmValue" label="阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="阈值" v-model="scope.row.alarmValue"
|
||||
@change="changeWindData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="miniRange" label="最小范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最小范围" v-model="scope.row.miniRange"
|
||||
@change="changeWindData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="maxRange" label="最大范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最大范围" v-model="scope.row.maxRange"
|
||||
@change="changeWindData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
|
||||
<!-- @change="changeWindData(scope.row)" class="serialNumber">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in scope.row.serialNumberOption"-->
|
||||
<!-- :key="item.value"-->
|
||||
<!-- :label="item.label"-->
|
||||
<!-- :value="item.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch wind-switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click=" scope.row.state = 1;changeWindData(scope.row)"
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0;changeWindData(scope.row)"
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="editEquip">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==3">
|
||||
<div class="device-title">
|
||||
<span>其他传感器设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="otherFrequency" @change="changeOther">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe table-layout="auto"
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
|
||||
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||
<el-table-column prop="offset" label="偏移量" align="center"/>
|
||||
<el-table-column prop="unit" label="单位" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="单位" v-model="scope.row.unit" @change="changeOtherData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="alarmValue" label="阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="阈值" v-model="scope.row.alarmValue"
|
||||
@change="changeOtherData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="miniRange" label="最小范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最小范围" v-model="scope.row.miniRange"
|
||||
@change="changeOtherData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="maxRange" label="最大范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最大范围" v-model="scope.row.maxRange"
|
||||
@change="changeOtherData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
|
||||
<!-- @change="changeOtherData(scope.row)" clearable class="serialNumber">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in scope.row.serialNumberOption"-->
|
||||
<!-- :key="item.value"-->
|
||||
<!-- :label="item.label"-->
|
||||
<!-- :value="item.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch wind-switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click=" scope.row.state = 1;changeOtherData(scope.row)"
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0;changeOtherData(scope.row)"
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="editEquip">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==4">
|
||||
<div class="device-title">
|
||||
<span>分流器设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="fenFrequency">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fenLiuData">
|
||||
<el-table-column prop="name" label="设备名称" align="center"/>
|
||||
<el-table-column prop="offset" label="偏移量" align="center"/>
|
||||
<el-table-column prop="thresholdValue" label="阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="阈值" v-model="scope.row.thresholdValue"
|
||||
@change="changeFenData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click=" scope.row.state = 1;changeFenData(scope.row)"
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0;changeFenData(scope.row)"
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="handleEditFen">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import {getEquipmentList, editEquipment, getTunnelDetail, getEquipmentSerialNumberOptions} from "@/api/tunnelManage";
|
||||
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 fanFrequency = ref(0)
|
||||
const windFrequency = ref(0)
|
||||
const otherFrequency = ref(0)
|
||||
const changeIndex = ref(1)
|
||||
const fanData = ref([])
|
||||
const editFanData = ref([])
|
||||
const winData = ref([])
|
||||
const editWinData = ref([])
|
||||
const otherData = ref([])
|
||||
const editOtherData = ref([])
|
||||
const fenLiuData = ref([])
|
||||
const editFenLiuData = ref([])
|
||||
const frequencyData = ref([])
|
||||
const serialNumberOptions = ref([])
|
||||
const siteId = ref(0)
|
||||
const tunnelName = ref('')
|
||||
const getSerialNumberOptions =async (equipmentId) => {
|
||||
console.log('tunnelId',tunnelId)
|
||||
let {data,code,msg}=await getEquipmentSerialNumberOptions(tunnelId,equipmentId)
|
||||
if(code===1000){
|
||||
return data
|
||||
}else{
|
||||
ElMessage.error(msg)
|
||||
}
|
||||
// getEquipmentSerialNumberOptions(tunnelId,equipmentId).then(res => {
|
||||
// if (res.code === 1000) {
|
||||
// serialNumberOptions.value = res.data
|
||||
// } else {
|
||||
// ElMessage.error(res.msg)
|
||||
// }
|
||||
// })
|
||||
}
|
||||
// getSerialNumberOptions()
|
||||
const changeFan = (e) => {
|
||||
// const fanObj = {
|
||||
// acquisitionPeriod: e * 1000,
|
||||
// tunnelId: tunnelId,
|
||||
// typeKey: 'frequency'
|
||||
// }
|
||||
// frequencyData.value.push(fanObj)
|
||||
}
|
||||
const changeFanData = (row) => {
|
||||
// editFanData.value.push(row)
|
||||
}
|
||||
const changeWind = (e) => {
|
||||
// const windObj = {
|
||||
// acquisitionPeriod: e * 1000,
|
||||
// tunnelId: tunnelId,
|
||||
// typeKey: 'windPressure'
|
||||
// }
|
||||
// frequencyData.value.push(windObj)
|
||||
}
|
||||
const changeWindData = (row) => {
|
||||
// editWinData.value.push(row)
|
||||
}
|
||||
const changeOther = (e) => {
|
||||
// const otherObj = {
|
||||
// acquisitionPeriod: e * 1000,
|
||||
// tunnelId: tunnelId,
|
||||
// typeKey: 'sensor'
|
||||
// }
|
||||
// frequencyData.value.push(otherObj)
|
||||
}
|
||||
const changeOtherData = (row) => {
|
||||
// editOtherData.value.push(row)
|
||||
}
|
||||
const changeData = (item) => {
|
||||
return {
|
||||
equipmentId: item.equipmentId,
|
||||
unit: item.unit,
|
||||
alarmValue: item.alarmValue,
|
||||
serialNumber:item.serialNumber,
|
||||
miniRange: parseInt(item.miniRange),
|
||||
maxRange: parseInt(item.maxRange),
|
||||
state: item.state,
|
||||
}
|
||||
}
|
||||
const editEquip = debounce(() => {
|
||||
let newFrequency = [{
|
||||
acquisitionPeriod: fanFrequency.value * 1000,
|
||||
tunnelId: parseInt(tunnelId),
|
||||
typeKey: 'frequency'
|
||||
}, {
|
||||
acquisitionPeriod: windFrequency.value * 1000,
|
||||
tunnelId: parseInt(tunnelId),
|
||||
typeKey: 'windPressure'
|
||||
}, {
|
||||
acquisitionPeriod: otherFrequency.value * 1000,
|
||||
tunnelId: parseInt(tunnelId),
|
||||
typeKey: 'sensor'
|
||||
}]
|
||||
let newFan = []
|
||||
let newWind = []
|
||||
let newSensor = []
|
||||
fanData.value.forEach(item => {
|
||||
let obj = {
|
||||
equipmentId: item.equipmentId,
|
||||
ratedPower: parseInt(item.ratedPower),
|
||||
acurrentValue: parseInt(item.acurrentValue),
|
||||
bcurrentValue: parseInt(item.bcurrentValue),
|
||||
ccurrentValue: parseInt(item.ccurrentValue),
|
||||
serialNumber:item.serialNumber,
|
||||
state: parseInt(item.state)
|
||||
}
|
||||
newFan.push(obj)
|
||||
})
|
||||
winData.value.forEach(item => {
|
||||
newWind.push(changeData(item))
|
||||
})
|
||||
otherData.value.forEach(item => {
|
||||
newSensor.push(changeData(item))
|
||||
})
|
||||
const basicData = {
|
||||
tunnelId: tunnelId,
|
||||
acquisitionList: newFrequency,
|
||||
frequencyChangerList: newFan,
|
||||
windPressureSensorList: newWind,
|
||||
sensorList: newSensor,
|
||||
// shuntList: editFenLiuData.value,
|
||||
}
|
||||
// console.info("🚀 ~ file:index method: line:478 -----",basicData)
|
||||
editEquipment(basicData).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success('修改成功')
|
||||
router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}, 100)
|
||||
|
||||
const handleChangeMenu = (e) => {
|
||||
changeIndex.value = e
|
||||
}
|
||||
|
||||
const getList =async () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '正在加载系统资源...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
customClass: 'allLoading'
|
||||
})
|
||||
await getEquipmentList(tunnelId).then( res => {
|
||||
if (res.code === 1000) {
|
||||
fanData.value = res.data.frequencyChangerList
|
||||
fanData.value?.forEach( async item => {
|
||||
item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
|
||||
})
|
||||
res.data.windPressureSensorList?.forEach(item => {
|
||||
item.offset = item.offset + 4000
|
||||
})
|
||||
winData.value = res.data.windPressureSensorList
|
||||
winData.value?.forEach( async item => {
|
||||
item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
|
||||
})
|
||||
res.data.sensorList?.forEach(item => {
|
||||
item.offset = item.offset + 4000
|
||||
})
|
||||
otherData.value = res.data.sensorList
|
||||
otherData.value?.forEach( async item => {
|
||||
item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
|
||||
})
|
||||
res.data.acquisitionList.map(item => {
|
||||
item.acquisitionPeriod = item.acquisitionPeriod / 1000
|
||||
if (item.typeKey === 'frequency') {
|
||||
fanFrequency.value = item.acquisitionPeriod
|
||||
} else if (item.typeKey === 'windPressure') {
|
||||
windFrequency.value = item.acquisitionPeriod
|
||||
} else if (item.typeKey === 'sensor') {
|
||||
otherFrequency.value = item.acquisitionPeriod
|
||||
}
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
const getTunnel = () => {
|
||||
getTunnelDetail(tunnelId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
siteId.value = res.data.siteId
|
||||
tunnelName.value = res.data.tunnelName
|
||||
}
|
||||
});
|
||||
}
|
||||
getTunnel()
|
||||
getList()
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.serialNumber{
|
||||
.el-input{
|
||||
width: 580px!important;
|
||||
}
|
||||
.el-input__suffix-inner{
|
||||
.el-icon{
|
||||
width: 3em!important;
|
||||
height: 3em!important;
|
||||
color: #fff!important;
|
||||
svg{
|
||||
width: 3em!important;
|
||||
height: 3em!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-select.serialNumber {
|
||||
border-radius: 6px!important;
|
||||
border: 1px solid #05FEFF!important;
|
||||
background-color: transparent!important;
|
||||
.el-select__wrapper{
|
||||
height: 54px!important;
|
||||
color: #FFFFFF!important;
|
||||
font-size: 40px!important;
|
||||
//height: auto!important;
|
||||
line-height: normal!important;
|
||||
border-radius: 6px!important;
|
||||
border: 1px solid #05FEFF!important;
|
||||
background-color: transparent!important;
|
||||
}
|
||||
.el-select__placeholder {
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.serialNumber-select.el-popper {
|
||||
background: #064B66 !important;
|
||||
border: 2px solid #05FEFF !important;
|
||||
|
||||
.el-select-dropdown {
|
||||
min-width: 130px !important;
|
||||
}
|
||||
.el-select-dropdown__item.is-hovering{
|
||||
background-color: #064B66 !important;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
color: #FFFFFF;
|
||||
border-bottom: 1px solid #05FEFF;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: transparent !important;
|
||||
color: #F7B500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.tunnel-bgc {
|
||||
padding: 85px 0 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/tunnel/sd_bj.png');
|
||||
|
||||
.box-top {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.tunnel-name {
|
||||
margin-left: 120px;
|
||||
height: 61px;
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 61px;
|
||||
}
|
||||
|
||||
.back-tunnel {
|
||||
cursor: pointer;
|
||||
margin: 0 0 0 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 178px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
font-size: 38px;
|
||||
color: #FFFFFF;
|
||||
|
||||
.back-icon {
|
||||
margin-right: 20px;
|
||||
margin-left: 23px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 190px;
|
||||
|
||||
.device-box {
|
||||
display: flex;
|
||||
width: 3500px;
|
||||
height: 1600px;
|
||||
background: #064B66;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #05FEFF;
|
||||
box-sizing: border-box;
|
||||
|
||||
.box-left {
|
||||
padding-left: 24px;
|
||||
width: 300px;
|
||||
height: 1596px;
|
||||
background: #0D5A7A;
|
||||
border-radius: 20px 0px 0px 20px;
|
||||
|
||||
:deep(.el-menu) {
|
||||
border-right: none;
|
||||
margin-top: 261px;
|
||||
background-color: #0D5A7A;
|
||||
|
||||
.el-menu-item.is-active {
|
||||
background-image: url(../../assets/images/device/sdgl_xz.png);
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: #fff;
|
||||
height: 90px;
|
||||
font-size: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: #0D5A7A;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
letter-spacing: 120px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
letter-spacing: 120px;
|
||||
}
|
||||
|
||||
//&:nth-child(4) {
|
||||
// letter-spacing: 40px;
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.device-title {
|
||||
margin-top: 60px;
|
||||
line-height: 61px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
> span:first-child {
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.collection-frequency {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 102px;
|
||||
|
||||
> span:first-child {
|
||||
font-size: 38px !important;
|
||||
white-space: pre;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 166px;
|
||||
height: 56px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
transform: none;
|
||||
transition: none;
|
||||
|
||||
.el-input__inner {
|
||||
height: 54px;
|
||||
font-size: 30px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.el-input__suffix-inner {
|
||||
font-size: 30px;
|
||||
color: #08B7B8;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
}
|
||||
|
||||
.device-table {
|
||||
margin-top: 50px;
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
|
||||
.active {
|
||||
color: #FFFFFF;
|
||||
background: #0f7da9;
|
||||
}
|
||||
|
||||
.wind-switch {
|
||||
margin-left: 26px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-top: 22px;
|
||||
|
||||
display: flex;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
overflow: hidden;
|
||||
color: #51A2B3;
|
||||
line-height: 40px;
|
||||
font-size: 36px;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table--fit) {
|
||||
//width: 1780px !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
:deep(.cell) {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
background-color: #1C5971;
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
|
||||
background-color: #1C5971;
|
||||
}
|
||||
|
||||
:deep(.el-table__row--striped) {
|
||||
background-color: #13849C !important;
|
||||
}
|
||||
|
||||
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
|
||||
background-color: #13849C !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__cell) {
|
||||
.el-input {
|
||||
width: 180px;
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
background-color: transparent;
|
||||
|
||||
.el-input__inner {
|
||||
color: #FFFFFF;
|
||||
font-size: 40px;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__inner-wrapper::before) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,860 +0,0 @@
|
||||
<template>
|
||||
<div class="tunnel-bgc">
|
||||
<div class="box-top">
|
||||
<div class="back-tunnel" @click="router.back(-1)">
|
||||
<div class="back-icon"></div>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="tunnel-name">
|
||||
{{ tunnelName }}
|
||||
</div>
|
||||
<tunnel-title/>
|
||||
</div>
|
||||
<div class="device-content">
|
||||
<div class="device-box">
|
||||
<div class="box-left">
|
||||
<el-menu
|
||||
default-active="1"
|
||||
@select="handleChangeMenu"
|
||||
>
|
||||
<el-menu-item index="1">
|
||||
<span>风机</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<span>风压</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<span>其他传感器</span>
|
||||
</el-menu-item>
|
||||
<!-- <el-menu-item index="4">-->
|
||||
<!-- <span>分流器</span>-->
|
||||
<!-- </el-menu-item>-->
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==1">
|
||||
<div class="device-title">
|
||||
<span>风机设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="fanFrequency" @change="changeFan">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;" table-layout="auto"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
|
||||
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||
<el-table-column prop="ratedPower" label="额定功率" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="额定功率" v-model="scope.row.ratedPower"
|
||||
@change="changeFanData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
|
||||
<el-table-column prop="acurrentValue" label="A电流阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="A电流" v-model="scope.row.acurrentValue"
|
||||
@change="changeFanData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
|
||||
<el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
|
||||
@change="changeFanData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
|
||||
<el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
|
||||
@change="changeFanData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
|
||||
<!-- @change="changeFanData(scope.row)" class="serialNumber">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in scope.row.serialNumberOption"-->
|
||||
<!-- :key="item.value"-->
|
||||
<!-- :label="item.label"-->
|
||||
<!-- :value="item.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click="scope.row.state = 1;changeFanData(scope.row)"
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0;changeFanData(scope.row)"
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="editEquip">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==2">
|
||||
<div class="device-title">
|
||||
<span>风压设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="windFrequency" @change="changeWind">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe table-layout="auto"
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
|
||||
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||
<el-table-column prop="offset" label="偏移量" align="center"/>
|
||||
<el-table-column prop="unit" label="单位" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="单位" v-model="scope.row.unit" @change="changeWindData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="alarmValue" label="阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="阈值" v-model="scope.row.alarmValue"
|
||||
@change="changeWindData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="miniRange" label="最小范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最小范围" v-model="scope.row.miniRange"
|
||||
@change="changeWindData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="maxRange" label="最大范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最大范围" v-model="scope.row.maxRange"
|
||||
@change="changeWindData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
|
||||
<!-- @change="changeWindData(scope.row)" class="serialNumber">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in scope.row.serialNumberOption"-->
|
||||
<!-- :key="item.value"-->
|
||||
<!-- :label="item.label"-->
|
||||
<!-- :value="item.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch wind-switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click=" scope.row.state = 1;changeWindData(scope.row)"
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0;changeWindData(scope.row)"
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="editEquip">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==3">
|
||||
<div class="device-title">
|
||||
<span>其他传感器设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="otherFrequency" @change="changeOther">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe table-layout="auto"
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
|
||||
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||
<el-table-column prop="offset" label="偏移量" align="center"/>
|
||||
<el-table-column prop="unit" label="单位" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="单位" v-model="scope.row.unit" @change="changeOtherData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="alarmValue" label="阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="阈值" v-model="scope.row.alarmValue"
|
||||
@change="changeOtherData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="miniRange" label="最小范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最小范围" v-model="scope.row.miniRange"
|
||||
@change="changeOtherData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="maxRange" label="最大范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="最大范围" v-model="scope.row.maxRange"
|
||||
@change="changeOtherData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
|
||||
<!-- @change="changeOtherData(scope.row)" clearable class="serialNumber">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in scope.row.serialNumberOption"-->
|
||||
<!-- :key="item.value"-->
|
||||
<!-- :label="item.label"-->
|
||||
<!-- :value="item.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch wind-switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click=" scope.row.state = 1;changeOtherData(scope.row)"
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0;changeOtherData(scope.row)"
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="editEquip">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right" v-if="changeIndex==4">
|
||||
<div class="device-title">
|
||||
<span>分流器设备管理</span>
|
||||
<div class="collection-frequency">
|
||||
<span>采集频率</span>
|
||||
<el-input type="number" v-model="fenFrequency">
|
||||
<template #suffix>
|
||||
<span>秒/次</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fenLiuData">
|
||||
<el-table-column prop="name" label="设备名称" align="center"/>
|
||||
<el-table-column prop="offset" label="偏移量" align="center"/>
|
||||
<el-table-column prop="thresholdValue" label="阈值" align="center">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="阈值" v-model="scope.row.thresholdValue"
|
||||
@change="changeFenData(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="状态" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<div class="switch">
|
||||
<div
|
||||
:class="{ active: scope.row.state }"
|
||||
@click=" scope.row.state = 1;changeFenData(scope.row)"
|
||||
>
|
||||
启用
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: ! scope.row.state }"
|
||||
@click=" scope.row.state = 0;changeFenData(scope.row)"
|
||||
>
|
||||
停用
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="router.back(-1)">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="handleEditFen">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import {getEquipmentList, editEquipment, getTunnelDetail, getEquipmentSerialNumberOptions} from "@/api/tunnelManage";
|
||||
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 fanFrequency = ref(0)
|
||||
const windFrequency = ref(0)
|
||||
const otherFrequency = ref(0)
|
||||
const changeIndex = ref(1)
|
||||
const fanData = ref([])
|
||||
const editFanData = ref([])
|
||||
const winData = ref([])
|
||||
const editWinData = ref([])
|
||||
const otherData = ref([])
|
||||
const editOtherData = ref([])
|
||||
const fenLiuData = ref([])
|
||||
const editFenLiuData = ref([])
|
||||
const frequencyData = ref([])
|
||||
const serialNumberOptions = ref([])
|
||||
const siteId = ref(0)
|
||||
const tunnelName = ref('')
|
||||
const getSerialNumberOptions =async (equipmentId) => {
|
||||
console.log('tunnelId',tunnelId)
|
||||
let {data,code,msg}=await getEquipmentSerialNumberOptions(tunnelId,equipmentId)
|
||||
if(code===1000){
|
||||
return data
|
||||
}else{
|
||||
ElMessage.error(msg)
|
||||
}
|
||||
// getEquipmentSerialNumberOptions(tunnelId,equipmentId).then(res => {
|
||||
// if (res.code === 1000) {
|
||||
// serialNumberOptions.value = res.data
|
||||
// } else {
|
||||
// ElMessage.error(res.msg)
|
||||
// }
|
||||
// })
|
||||
}
|
||||
// getSerialNumberOptions()
|
||||
const changeFan = (e) => {
|
||||
// const fanObj = {
|
||||
// acquisitionPeriod: e * 1000,
|
||||
// tunnelId: tunnelId,
|
||||
// typeKey: 'frequency'
|
||||
// }
|
||||
// frequencyData.value.push(fanObj)
|
||||
}
|
||||
const changeFanData = (row) => {
|
||||
// editFanData.value.push(row)
|
||||
}
|
||||
const changeWind = (e) => {
|
||||
// const windObj = {
|
||||
// acquisitionPeriod: e * 1000,
|
||||
// tunnelId: tunnelId,
|
||||
// typeKey: 'windPressure'
|
||||
// }
|
||||
// frequencyData.value.push(windObj)
|
||||
}
|
||||
const changeWindData = (row) => {
|
||||
// editWinData.value.push(row)
|
||||
}
|
||||
const changeOther = (e) => {
|
||||
// const otherObj = {
|
||||
// acquisitionPeriod: e * 1000,
|
||||
// tunnelId: tunnelId,
|
||||
// typeKey: 'sensor'
|
||||
// }
|
||||
// frequencyData.value.push(otherObj)
|
||||
}
|
||||
const changeOtherData = (row) => {
|
||||
// editOtherData.value.push(row)
|
||||
}
|
||||
const changeData = (item) => {
|
||||
return {
|
||||
equipmentId: item.equipmentId,
|
||||
unit: item.unit,
|
||||
alarmValue: item.alarmValue,
|
||||
serialNumber:item.serialNumber,
|
||||
miniRange: parseInt(item.miniRange),
|
||||
maxRange: parseInt(item.maxRange),
|
||||
state: item.state,
|
||||
}
|
||||
}
|
||||
const editEquip = debounce(() => {
|
||||
let newFrequency = [{
|
||||
acquisitionPeriod: fanFrequency.value * 1000,
|
||||
tunnelId: parseInt(tunnelId),
|
||||
typeKey: 'frequency'
|
||||
}, {
|
||||
acquisitionPeriod: windFrequency.value * 1000,
|
||||
tunnelId: parseInt(tunnelId),
|
||||
typeKey: 'windPressure'
|
||||
}, {
|
||||
acquisitionPeriod: otherFrequency.value * 1000,
|
||||
tunnelId: parseInt(tunnelId),
|
||||
typeKey: 'sensor'
|
||||
}]
|
||||
let newFan = []
|
||||
let newWind = []
|
||||
let newSensor = []
|
||||
fanData.value.forEach(item => {
|
||||
let obj = {
|
||||
equipmentId: item.equipmentId,
|
||||
ratedPower: parseInt(item.ratedPower),
|
||||
acurrentValue: parseInt(item.acurrentValue),
|
||||
bcurrentValue: parseInt(item.bcurrentValue),
|
||||
ccurrentValue: parseInt(item.ccurrentValue),
|
||||
serialNumber:item.serialNumber,
|
||||
state: parseInt(item.state)
|
||||
}
|
||||
newFan.push(obj)
|
||||
})
|
||||
winData.value.forEach(item => {
|
||||
newWind.push(changeData(item))
|
||||
})
|
||||
otherData.value.forEach(item => {
|
||||
newSensor.push(changeData(item))
|
||||
})
|
||||
const basicData = {
|
||||
tunnelId: tunnelId,
|
||||
acquisitionList: newFrequency,
|
||||
frequencyChangerList: newFan,
|
||||
windPressureSensorList: newWind,
|
||||
sensorList: newSensor,
|
||||
// shuntList: editFenLiuData.value,
|
||||
}
|
||||
// console.info("🚀 ~ file:index method: line:478 -----",basicData)
|
||||
editEquipment(basicData).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success('修改成功')
|
||||
router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}, 100)
|
||||
|
||||
const handleChangeMenu = (e) => {
|
||||
changeIndex.value = e
|
||||
}
|
||||
|
||||
const getList =async () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '正在加载系统资源...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
customClass: 'allLoading'
|
||||
})
|
||||
await getEquipmentList(tunnelId).then( res => {
|
||||
if (res.code === 1000) {
|
||||
fanData.value = res.data.frequencyChangerList
|
||||
fanData.value?.forEach( async item => {
|
||||
item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
|
||||
})
|
||||
res.data.windPressureSensorList?.forEach(item => {
|
||||
item.offset = item.offset + 4000
|
||||
})
|
||||
winData.value = res.data.windPressureSensorList
|
||||
winData.value?.forEach( async item => {
|
||||
item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
|
||||
})
|
||||
res.data.sensorList?.forEach(item => {
|
||||
item.offset = item.offset + 4000
|
||||
})
|
||||
otherData.value = res.data.sensorList
|
||||
otherData.value?.forEach( async item => {
|
||||
item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
|
||||
})
|
||||
res.data.acquisitionList.map(item => {
|
||||
item.acquisitionPeriod = item.acquisitionPeriod / 1000
|
||||
if (item.typeKey === 'frequency') {
|
||||
fanFrequency.value = item.acquisitionPeriod
|
||||
} else if (item.typeKey === 'windPressure') {
|
||||
windFrequency.value = item.acquisitionPeriod
|
||||
} else if (item.typeKey === 'sensor') {
|
||||
otherFrequency.value = item.acquisitionPeriod
|
||||
}
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
const getTunnel = () => {
|
||||
getTunnelDetail(tunnelId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
siteId.value = res.data.siteId
|
||||
tunnelName.value = res.data.tunnelName
|
||||
}
|
||||
});
|
||||
}
|
||||
getTunnel()
|
||||
getList()
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.serialNumber{
|
||||
.el-input{
|
||||
width: 580px!important;
|
||||
}
|
||||
.el-input__suffix-inner{
|
||||
.el-icon{
|
||||
width: 3em!important;
|
||||
height: 3em!important;
|
||||
color: #fff!important;
|
||||
svg{
|
||||
width: 3em!important;
|
||||
height: 3em!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-select.serialNumber {
|
||||
border-radius: 6px!important;
|
||||
border: 1px solid #05FEFF!important;
|
||||
background-color: transparent!important;
|
||||
.el-select__wrapper{
|
||||
height: 54px!important;
|
||||
color: #FFFFFF!important;
|
||||
font-size: 40px!important;
|
||||
//height: auto!important;
|
||||
line-height: normal!important;
|
||||
border-radius: 6px!important;
|
||||
border: 1px solid #05FEFF!important;
|
||||
background-color: transparent!important;
|
||||
}
|
||||
.el-select__placeholder {
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.serialNumber-select.el-popper {
|
||||
background: #064B66 !important;
|
||||
border: 2px solid #05FEFF !important;
|
||||
|
||||
.el-select-dropdown {
|
||||
min-width: 130px !important;
|
||||
}
|
||||
.el-select-dropdown__item.is-hovering{
|
||||
background-color: #064B66 !important;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
color: #FFFFFF;
|
||||
border-bottom: 1px solid #05FEFF;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: transparent !important;
|
||||
color: #F7B500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.tunnel-bgc {
|
||||
padding: 85px 0 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/tunnel/sd_bj.png');
|
||||
|
||||
.box-top {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.tunnel-name {
|
||||
margin-left: 120px;
|
||||
height: 61px;
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 61px;
|
||||
}
|
||||
|
||||
.back-tunnel {
|
||||
cursor: pointer;
|
||||
margin: 0 0 0 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 178px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
font-size: 38px;
|
||||
color: #FFFFFF;
|
||||
|
||||
.back-icon {
|
||||
margin-right: 20px;
|
||||
margin-left: 23px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 190px;
|
||||
|
||||
.device-box {
|
||||
display: flex;
|
||||
width: 3500px;
|
||||
height: 1600px;
|
||||
background: #064B66;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #05FEFF;
|
||||
box-sizing: border-box;
|
||||
|
||||
.box-left {
|
||||
padding-left: 24px;
|
||||
width: 300px;
|
||||
height: 1596px;
|
||||
background: #0D5A7A;
|
||||
border-radius: 20px 0px 0px 20px;
|
||||
|
||||
:deep(.el-menu) {
|
||||
border-right: none;
|
||||
margin-top: 261px;
|
||||
background-color: #0D5A7A;
|
||||
|
||||
.el-menu-item.is-active {
|
||||
background-image: url(../../assets/images/device/sdgl_xz.png);
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: #fff;
|
||||
height: 90px;
|
||||
font-size: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: #0D5A7A;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
letter-spacing: 120px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
letter-spacing: 120px;
|
||||
}
|
||||
|
||||
//&:nth-child(4) {
|
||||
// letter-spacing: 40px;
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.device-title {
|
||||
margin-top: 60px;
|
||||
line-height: 61px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
> span:first-child {
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.collection-frequency {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 102px;
|
||||
|
||||
> span:first-child {
|
||||
font-size: 38px !important;
|
||||
white-space: pre;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 166px;
|
||||
height: 56px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
transform: none;
|
||||
transition: none;
|
||||
|
||||
.el-input__inner {
|
||||
height: 54px;
|
||||
font-size: 30px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.el-input__suffix-inner {
|
||||
font-size: 30px;
|
||||
color: #08B7B8;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
}
|
||||
|
||||
.device-table {
|
||||
margin-top: 50px;
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
|
||||
.active {
|
||||
color: #FFFFFF;
|
||||
background: #0f7da9;
|
||||
}
|
||||
|
||||
.wind-switch {
|
||||
margin-left: 26px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-top: 22px;
|
||||
|
||||
display: flex;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
overflow: hidden;
|
||||
color: #51A2B3;
|
||||
line-height: 40px;
|
||||
font-size: 36px;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table--fit) {
|
||||
//width: 1780px !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
:deep(.cell) {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
background-color: #1C5971;
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
|
||||
background-color: #1C5971;
|
||||
}
|
||||
|
||||
:deep(.el-table__row--striped) {
|
||||
background-color: #13849C !important;
|
||||
}
|
||||
|
||||
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
|
||||
background-color: #13849C !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__cell) {
|
||||
.el-input {
|
||||
width: 180px;
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #05FEFF;
|
||||
background-color: transparent;
|
||||
|
||||
.el-input__inner {
|
||||
color: #FFFFFF;
|
||||
font-size: 40px;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__inner-wrapper::before) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,415 +0,0 @@
|
||||
<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 style="display:flex;align-items:center;justify-content:flex-end;font-size: 38px;color: #08B7B8;cursor: pointer;">
|
||||
添加序列号
|
||||
<el-icon size="74" color="#08B7B8" style="margin-left: 20px;" @click="addSerialNumber">
|
||||
<CirclePlus/>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div v-for="(item,index) in form.tunnelGatewayVoList" :key="index">
|
||||
<el-form-item label="序列号名称">
|
||||
<div style="flex: 1;display: flex;">
|
||||
<el-input v-model="item.serialNumberType" placeholder="请输入序列号名称" :disabled="item.isUse"
|
||||
:style="{'margin-right':item.isUse? '94px':''}" :title="item.isUse?'该序列号正在使用中, 暂不能修改':''"/>
|
||||
<el-icon v-if="!item.isUse" 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" :disabled="item.isUse" :title="item.isUse?'该序列号正在使用中, 暂不能修改':''"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="display: flex;flex-direction: column">-->
|
||||
<!-- <div v-for="(item,index) in form.tunnelGatewayVoList" :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="隧道长度">
|
||||
<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, getSerialNumberOnUse} 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 isShowRemove = ref(false)
|
||||
const form = ref({
|
||||
tunnelName: "",
|
||||
serialNumberPrefix: '',
|
||||
// serialNumber: '',
|
||||
serialNumber: '',
|
||||
totalLength: "",
|
||||
referenceFrequency: '',
|
||||
upTime: '',
|
||||
upFrequency: '',
|
||||
dropTime: '',
|
||||
dropFrequency: '',
|
||||
isDefault: false,
|
||||
remarks: "",
|
||||
tunnelGatewayVoList: []
|
||||
});
|
||||
const addSerialNumber = () => {
|
||||
form.value.tunnelGatewayVoList.push({
|
||||
serialNumber: '',
|
||||
serialNumberType: '',
|
||||
})
|
||||
}
|
||||
const delSerialNumber = (index) => {
|
||||
form.value.tunnelGatewayVoList.splice(index, 1)
|
||||
}
|
||||
const getSerialNumberOnUseList = async () => {
|
||||
let {data, code} = await getSerialNumberOnUse(tunnelId)
|
||||
if (code === 1000) {
|
||||
return data
|
||||
}
|
||||
}
|
||||
const getTunnel = async () => {
|
||||
let serialNumberOnUseList = await getSerialNumberOnUseList()
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '正在加载系统资源...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
customClass: 'allLoading'
|
||||
})
|
||||
await getTunnelDetail(tunnelId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
res.data.tunnelGatewayVoList?.forEach((item) => {
|
||||
serialNumberOnUseList?.forEach((serialNumberOnUseItem) => {
|
||||
item.isUse = item.serialNumber == serialNumberOnUseItem;
|
||||
})
|
||||
})
|
||||
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 = () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '修改中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
customClass: 'allLoading'
|
||||
})
|
||||
initSceneData(tunnelId).then((res) => {
|
||||
modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
|
||||
if (modelEquipmentList.value === null) {
|
||||
modelEquipmentList.value = []
|
||||
}
|
||||
const data = {
|
||||
tunnelId: tunnelId,
|
||||
...form.value,
|
||||
tunnelGatewayVoList: form.value.tunnelGatewayVoList,
|
||||
tunnelLength: form.value.totalLength,
|
||||
modelEquipmentList: modelEquipmentList.value,
|
||||
};
|
||||
editTunnel(data).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
loading.close()
|
||||
ElMessage.success(res.msg);
|
||||
router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
loading.close()
|
||||
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
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::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
// 滚动条轨道
|
||||
.edit-box::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// 小滑块
|
||||
.edit-box::-webkit-scrollbar-thumb {
|
||||
background: rgb(8, 183, 184);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.edit-box {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: 80px;
|
||||
width: 1000px;
|
||||
height: 2000px;
|
||||
overflow-y: scroll;
|
||||
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>
|
||||
@@ -1,342 +0,0 @@
|
||||
<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>
|
||||
@@ -1,342 +0,0 @@
|
||||
<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>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -2,46 +2,31 @@
|
||||
<div id="main">
|
||||
<div class="box-top">
|
||||
<!-- <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />-->
|
||||
<tunnel-title v-if="showTunnelTitle"/>
|
||||
<tunnel-title v-if="showTunnelTitle" />
|
||||
<div class="top-length">
|
||||
<span>隧道总长度: {{ tunnelLength }}米</span>
|
||||
<span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
|
||||
>开始模拟</span>
|
||||
<span class="all-btn" @click="endSimulate" v-else>结束模拟</span>
|
||||
<div v-else>
|
||||
<span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
|
||||
<span class="all-btn" @click="endSimulate">结束模拟</span>
|
||||
</div>
|
||||
<!-- <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
|
||||
</div>
|
||||
<div class="top-right" v-if="isPreview">
|
||||
<div class="current-site">
|
||||
当前站点：<span>{{ currentSite }}</span>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
@command="handleChangeSite"
|
||||
popper-class="dropdown-style"
|
||||
>
|
||||
<div class="toggle"></div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="item in siteList"
|
||||
:key="item.value"
|
||||
:command="item"
|
||||
>{{ item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-icon
|
||||
size="50"
|
||||
color="#0BE9FA"
|
||||
style="margin-left: 50px; cursor: pointer"
|
||||
@click="
|
||||
isVisited = true;
|
||||
getAlarmList();
|
||||
"
|
||||
>
|
||||
<Bell/>
|
||||
</el-icon>
|
||||
</div>
|
||||
<!-- <div class="current-site">-->
|
||||
<!-- <el-icon-->
|
||||
<!-- size="50"-->
|
||||
<!-- color="#0BE9FA"-->
|
||||
<!-- style="margin-left: 50px; cursor: pointer"-->
|
||||
<!-- @click="-->
|
||||
<!-- isVisited = true;-->
|
||||
<!-- getAlarmList();-->
|
||||
<!-- "-->
|
||||
<!-- >-->
|
||||
<!-- <Bell/>-->
|
||||
<!-- </el-icon>-->
|
||||
<!-- </div>-->
|
||||
<div class="current-user">
|
||||
你好！<span>{{ currentUser }}</span>
|
||||
<span>今天是：{{ currentDate }}</span>
|
||||
@@ -49,17 +34,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<device-manage v-if="showDevice" @cancel="cancelDeviceManage"/>
|
||||
<device-manage v-if="showDevice" @cancel="cancelDeviceManage" @submit="submitDevice"/>
|
||||
<!-- 模拟隧道模式-->
|
||||
<preview-scene-simulate id="tunnel-box" :isedit="false" :device-data="largeScreenData" :tunnelLength="100"></preview-scene-simulate>
|
||||
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
|
||||
<preview-scene
|
||||
id="tunnel-box"
|
||||
:isedit="false"
|
||||
:tunnelId="tunnelId"
|
||||
:key="tunnelId"
|
||||
:tunnelLen="tunnelLen"
|
||||
:largeScreen="largeScreen"
|
||||
:fanList="socketData.leftData"
|
||||
></preview-scene>
|
||||
<!-- <preview-scene-->
|
||||
<!-- id="tunnel-box"-->
|
||||
<!-- :isedit="false"-->
|
||||
<!-- :tunnelId="tunnelId"-->
|
||||
<!-- :key="tunnelId"-->
|
||||
<!-- :tunnelLen="tunnelLen"-->
|
||||
<!-- :largeScreen="largeScreen"-->
|
||||
<!-- :fanList="socketData.leftData"-->
|
||||
<!-- ></preview-scene>-->
|
||||
<div class="left" v-if="isPreview">
|
||||
<el-drawer
|
||||
v-model="drawerLeft"
|
||||
@@ -73,17 +60,18 @@
|
||||
<fan-info
|
||||
v-if="showFan"
|
||||
:list="socketData.leftData"
|
||||
:isSimulate="true"
|
||||
:fan-data="largeScreenData"
|
||||
:transducer-data="largeScreenData"
|
||||
:loading="showFanLoading"
|
||||
:tunnel-id="tunnelId"
|
||||
/>
|
||||
<used-ele
|
||||
v-if="showFan"
|
||||
:list="socketData.leftData"
|
||||
:loading="showUsedLoading"
|
||||
:ele-data="largeScreenData"
|
||||
/>
|
||||
<!-- <used-ele-->
|
||||
<!-- v-if="showFan"-->
|
||||
<!-- :list="socketData.leftData"-->
|
||||
<!-- :loading="showUsedLoading"-->
|
||||
<!-- :ele-data="largeScreenData"-->
|
||||
<!-- />-->
|
||||
</el-drawer>
|
||||
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
|
||||
<div v-else class="shrink-left" @click="closeLeft"></div>
|
||||
@@ -101,6 +89,7 @@
|
||||
<wind-pressure-list
|
||||
v-if="showFan"
|
||||
:list="socketData.windPressure"
|
||||
:isSimulate="true"
|
||||
:win-data="largeScreenData"
|
||||
:loading="showWindLoading"
|
||||
/>
|
||||
@@ -108,12 +97,14 @@
|
||||
v-if="showFan"
|
||||
:list="socketData.sensor"
|
||||
:windSpeed="socketData.windSpeed"
|
||||
:isSimulate="true"
|
||||
:air-data="largeScreenData"
|
||||
/>
|
||||
<bad-gas-info
|
||||
v-if="showFan"
|
||||
:list="socketData.sensor"
|
||||
:bad-gas-data="largeScreenData"
|
||||
:isSimulate="true"
|
||||
:tunnelId="tunnelId"
|
||||
:loading="showBadLoading"
|
||||
/>
|
||||
@@ -121,24 +112,6 @@
|
||||
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
|
||||
<div v-else class="shrink-right" @click="closeRight"></div>
|
||||
</div>
|
||||
<div class="switch-btn">
|
||||
<div class="arrow" @click="previousBtn"></div>
|
||||
<el-carousel
|
||||
height="150px"
|
||||
type="card"
|
||||
ref="tunnelBtn"
|
||||
:autoplay="false"
|
||||
:initial-index="initialIndex"
|
||||
@change="changeTunnel"
|
||||
>
|
||||
<div class="btn">
|
||||
<el-carousel-item v-for="item in tunnelList" :key="item.value">
|
||||
{{ item.label }}
|
||||
</el-carousel-item>
|
||||
</div>
|
||||
</el-carousel>
|
||||
<div class="arrow right" @click="nextBtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarm-dialog alarm-tunnel">
|
||||
<el-dialog
|
||||
@@ -285,7 +258,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue";
|
||||
// import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue";
|
||||
import PreviewSceneSimulate from "@/components/content/tunnelScene/TunnelSceneSimulate.vue";
|
||||
import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
|
||||
import UsedEle from "@/components/content/usedEle/UsedEle.vue";
|
||||
import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
|
||||
@@ -303,12 +277,12 @@ import {
|
||||
getAlarmInfo,
|
||||
deleteAlarmSate,
|
||||
getAlarmDetail,
|
||||
updateAlarmState,
|
||||
updateAlarmState, endSimulation, blastingSimulation,
|
||||
} from "@/api/largeScreen";
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getUserInfo} from "@/api/login";
|
||||
import {initSceneData} from "@/api/tunnelScene";
|
||||
import {getTunnelList} from "@/api/tunnelManage";
|
||||
import {getScreenSimulateTunnel, getSimulateTunnelDetail, getTunnelList} from "@/api/tunnelManage";
|
||||
import {debounce} from "lodash";
|
||||
|
||||
const authStore = useAuthStore();
|
||||
@@ -406,9 +380,11 @@ const queryParams = reactive({
|
||||
lookupStatus: "",
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getUser();
|
||||
getOtherInfo();
|
||||
// getOtherInfo();
|
||||
getScreenInfo(previewId)
|
||||
|
||||
getBasicData(previewId)
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
});
|
||||
@@ -421,8 +397,18 @@ const cancelDeviceManage = () => {
|
||||
isStartSimulate.value = true;
|
||||
showDevice.value = false;
|
||||
};
|
||||
const endSimulate = () => {
|
||||
const submitDevice = () => {
|
||||
isStartSimulate.value = false;
|
||||
showDevice.value = false;
|
||||
getScreenInfo(previewId)
|
||||
// initWebSocket()
|
||||
};
|
||||
const simulatedBlasting =async () => {
|
||||
await blastingSimulation(previewId,10)
|
||||
};
|
||||
const endSimulate =async () => {
|
||||
isStartSimulate.value = true;
|
||||
await endSimulation(previewId)
|
||||
};
|
||||
const changeName = (id) => {
|
||||
for (let item of equipmentOption.value) {
|
||||
@@ -547,19 +533,33 @@ const getOtherInfo = () => {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getBasicData = (id) => {
|
||||
getSimulateTunnelDetail(id).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
tunnelLength.value = res.data.totalLength;
|
||||
serialNumber.value = res.data.serialNumber;
|
||||
constructionLength.value = res.data.constructionLength;
|
||||
initWebSocket()
|
||||
} else {
|
||||
ElMessage.warning(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getScreenInfo = (id) => {
|
||||
if (id) {
|
||||
tunnelId.value = id;
|
||||
// equipmentOption.value = []
|
||||
getLargeScreen(id).then((res) => {
|
||||
getScreenSimulateTunnel(id).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
if (res.data.frequencyChangerList.length !== 0) {
|
||||
showFanLoading.value = 0;
|
||||
showFanLoading.value = 1;
|
||||
} else {
|
||||
showFanLoading.value = 1;
|
||||
}
|
||||
if (res.data.windPressureSensorList.length !== 0) {
|
||||
showWindLoading.value = 0;
|
||||
showWindLoading.value = 1;
|
||||
} else {
|
||||
showWindLoading.value = 1;
|
||||
}
|
||||
@@ -590,34 +590,20 @@ const getScreenInfo = (id) => {
|
||||
showBadLoading.value = 1;
|
||||
}
|
||||
largeScreenData.value = res.data;
|
||||
console.log('largeScreenData.value', largeScreenData.value)
|
||||
} else {
|
||||
ElMessage.warning(res.msg);
|
||||
}
|
||||
});
|
||||
initSceneData(id).then((res) => {
|
||||
tunnelLength.value = res.data.tunnelLength;
|
||||
constructionLength.value = res.data.constructionLength;
|
||||
// serialNumber.value = res.data.serialNumber.slice(0, -2)
|
||||
serialNumber.value = res.data.serialNumberPrefix;
|
||||
initWebSocket();
|
||||
});
|
||||
// initSceneData(id).then((res) => {
|
||||
// tunnelLength.value = res.data.tunnelLength;
|
||||
// constructionLength.value = res.data.constructionLength;
|
||||
// // serialNumber.value = res.data.serialNumber.slice(0, -2)
|
||||
// serialNumber.value = res.data.serialNumberPrefix;
|
||||
// initWebSocket();
|
||||
// });
|
||||
}
|
||||
};
|
||||
//这里可以获取隧道简称
|
||||
const getList = () => {
|
||||
getTunnelList({
|
||||
siteId: siteId,
|
||||
}).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
if (res.data.rows.length !== 0) {
|
||||
isTunnel = true;
|
||||
totalTunnelList.value = res.data.rows;
|
||||
} else {
|
||||
isTunnel = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let largeScreen = computed(() => largeScreenData);
|
||||
const getTunnel = (id) => {
|
||||
@@ -645,72 +631,7 @@ const getTunnel = (id) => {
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const changeTunnel = (e) => {
|
||||
if (socket) {
|
||||
socket.close();
|
||||
}
|
||||
let newObj = {};
|
||||
tunnelList.value.forEach((item, index) => {
|
||||
if (index === e) {
|
||||
newObj = item;
|
||||
}
|
||||
});
|
||||
showFan.value = false;
|
||||
showBadLoading.value = 0;
|
||||
showWindLoading.value = 0;
|
||||
showFanLoading.value = 0;
|
||||
// showUsedLoading.value = 0
|
||||
pageInfo.pageNum = 1;
|
||||
getScreenInfo(newObj.value);
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
});
|
||||
};
|
||||
const manageSelect = (index) => {
|
||||
if (index === "站点管理") {
|
||||
if (currentUserId.value) {
|
||||
router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
|
||||
}
|
||||
} else if (index === "隧道管理") {
|
||||
if (currentSiteId.value && currentUserId.value) {
|
||||
router.push(
|
||||
"/tunnel/" +
|
||||
localStorage.getItem("currentSiteId") +
|
||||
"/byHome/" +
|
||||
currentUserId.value
|
||||
);
|
||||
}
|
||||
} else if (index === "用户管理") {
|
||||
if (currentSiteId.value) {
|
||||
router.push("/user/" + localStorage.getItem("currentSiteId"));
|
||||
}
|
||||
}
|
||||
if (socket) {
|
||||
socket.close();
|
||||
}
|
||||
};
|
||||
const handleChangeSite = debounce((item) => {
|
||||
if (socket) {
|
||||
socket.close();
|
||||
}
|
||||
currentSite.value = item.label;
|
||||
currentSiteId.value = item.value;
|
||||
getTunnel(item.value);
|
||||
showFan.value = false;
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
});
|
||||
localStorage.setItem("site", currentSite.value);
|
||||
localStorage.setItem("currentSiteId", currentSiteId.value);
|
||||
if (tunnelIdFlag) {
|
||||
router.push("/" + tunnelIdFlag + "/" + currentSiteId.value);
|
||||
}
|
||||
showTunnelTitle.value = false;
|
||||
nextTick(() => {
|
||||
showTunnelTitle.value = true;
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
const closeLeft = () => {
|
||||
drawerLeft.value = !drawerLeft.value;
|
||||
};
|
||||
@@ -727,18 +648,13 @@ const handleLogout = () => {
|
||||
router.push("/login");
|
||||
});
|
||||
};
|
||||
const previousBtn = () => {
|
||||
tunnelBtn.value.prev();
|
||||
};
|
||||
const nextBtn = () => {
|
||||
tunnelBtn.value.next();
|
||||
};
|
||||
|
||||
const initWebSocket = () => {
|
||||
// let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
|
||||
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
|
||||
let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123`
|
||||
// let wsUrl = `ws://tunnel.feashow.com/api/websocket/simulate/${token}/${serialNumber.value}`;
|
||||
// let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
|
||||
// let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
|
||||
// let wsUrl = `ws://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`;
|
||||
socket = new WebSocket(wsUrl);
|
||||
//连接发生错误的回调方法
|
||||
socket.onerror = function () {
|
||||
@@ -753,11 +669,11 @@ const initWebSocket = () => {
|
||||
// console.log("服务器返回的信息: ", JSON.parse(event.data));
|
||||
const type = JSON.parse(event.data).type;
|
||||
const data = JSON.parse(event.data).data;
|
||||
if (type === "equipment") {
|
||||
if (type === "simulate") {
|
||||
data.forEach((item) => {
|
||||
if (item.typeKey === "frequency") {
|
||||
socketData.leftData = data;
|
||||
// console.log(socketData.leftData);
|
||||
console.log(socketData.leftData);
|
||||
} else if (item.typeKey === "windPressure") {
|
||||
socketData.windPressure = data;
|
||||
} else if (item.typeKey === "sensor") {
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
<div class="back-icon"></div>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="site-name">
|
||||
{{ siteName }}
|
||||
</div>
|
||||
<!-- <div class="site-name">-->
|
||||
<!-- {{ siteName }}-->
|
||||
<!-- </div>-->
|
||||
<tunnel-title/>
|
||||
<div class="all-del-btn" v-if="showOperation">
|
||||
<div class="all-btn" style=" margin-right: 40px;" v-if="showAddIcon" @click="handleAdd">
|
||||
@@ -22,7 +22,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content" >
|
||||
<div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
|
||||
<div class="site-box" v-for="item in tunnelList" :key="item.projectId">
|
||||
<div class="top">
|
||||
<span>{{ item.tunnelName }}</span>
|
||||
<span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
|
||||
@@ -31,10 +31,13 @@
|
||||
</div>
|
||||
<div class="box-center">
|
||||
<div>
|
||||
<!-- @click="handlePreview(item.tunnelId)"-->
|
||||
<div class="left-img"></div>
|
||||
<div style="display: flex;justify-content: center">
|
||||
<div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.tunnelId)">
|
||||
<div style="display: flex;justify-content: space-around">
|
||||
<!-- <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.projectId)">-->
|
||||
<!-- <div class="edit-icon"></div>-->
|
||||
<!-- <div>编辑</div>-->
|
||||
<!-- </div>-->
|
||||
<div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.projectId)">
|
||||
<div class="edit-icon"></div>
|
||||
<div>去模拟</div>
|
||||
</div>
|
||||
@@ -44,7 +47,8 @@
|
||||
<div class="icons-block">
|
||||
<div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
|
||||
<div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
|
||||
<span>{{ equItem.name }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
|
||||
<span>{{ equItem.name }}：0</span>
|
||||
<!-- {{ item.tunnelEquipmentAmountInfo[equItem.type] }}-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,7 +56,7 @@
|
||||
</div>
|
||||
<div class="site-box add-box" @click="handleAdd" v-if="showOperation">
|
||||
<div class="add-icon"></div>
|
||||
<div style="cursor: pointer">添加隧道</div>
|
||||
<div style="cursor: pointer">添加模拟隧道</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
|
||||
@@ -72,18 +76,21 @@
|
||||
<el-form-item label="施工长度" prop="constructionLength">
|
||||
<el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="风机初始频率" prop="fanInitialFrequency">
|
||||
<el-input type="number" v-model="form.fanInitialFrequency" placeholder="请输入风机初始频率"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="爆破量级" prop="burstLevel">
|
||||
<el-input type="number" v-model="form.burstLevel" 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 label="序列号" prop="serialNumber">
|
||||
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="风机初始频率" prop="fanInitialFrequency">-->
|
||||
<!-- <el-input type="number" v-model="form.fanInitialFrequency" placeholder="请输入风机初始频率"/>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="爆破量级" prop="burstLevel">-->
|
||||
<!-- <el-input type="number" v-model="form.burstLevel" 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>
|
||||
@@ -109,7 +116,13 @@
|
||||
|
||||
<script setup>
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
|
||||
import {
|
||||
getTunnelList,
|
||||
deleteSimulateTunnel,
|
||||
addSimulateTunnel,
|
||||
getSimulateTunnelList,
|
||||
getTunnelDetail, getSimulateTunnelDetail
|
||||
} from "@/api/tunnelManage";
|
||||
import {getSiteDrawing, getSiteDetail} from "@/api/site";
|
||||
import TunnelTitle from "@/components/tunnelTitle/index.vue";
|
||||
import {getTunnelBySiteId} from "@/api/largeScreen";
|
||||
@@ -141,6 +154,7 @@ const formRules = ref({
|
||||
tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
|
||||
totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
|
||||
constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
|
||||
serialNumber: [{required: true, message: '请输入序列号', trigger: ['blur', 'change']}],
|
||||
})
|
||||
const showFirst = ref(false)
|
||||
const showOperation = ref(true)
|
||||
@@ -196,10 +210,10 @@ const iconsList = ref([
|
||||
num: 0
|
||||
},
|
||||
])
|
||||
const title = ref('新增隧道')
|
||||
const title = ref('新增模拟隧道')
|
||||
const showNull = ref(false);
|
||||
const isVisited = ref(false);
|
||||
const tunnelIds = ref([])
|
||||
const projectIds = ref([])
|
||||
const tunnelNameList = ref([])
|
||||
const siteName = ref(localStorage.getItem('site'))
|
||||
const form = ref({
|
||||
@@ -226,67 +240,12 @@ const total = ref(0);
|
||||
onMounted(() => {
|
||||
showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
|
||||
})
|
||||
const handleGoToSimulateTunnel = (tunnelId) => {
|
||||
router.push('/simulate/' + tunnelId)
|
||||
}
|
||||
const addSerialNumber = () => {
|
||||
serialNumberList.value.push({
|
||||
serialNumber: '',
|
||||
serialNumberType: '',
|
||||
})
|
||||
}
|
||||
const delSerialNumber = (index) => {
|
||||
serialNumberList.value.splice(index, 1)
|
||||
}
|
||||
const getSiteImg = () => {
|
||||
showNull.value = false
|
||||
getSiteDrawing(siteId).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
if (res.data.drawingData === null) {
|
||||
// ElMessageBox.confirm('暂无图纸, 是否前往站点管理上传图纸?', '系统提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// }).then(() => {
|
||||
// router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
|
||||
// }).catch(()=>{
|
||||
showNull.value = true
|
||||
// })
|
||||
} else {
|
||||
showNull.value = false
|
||||
siteImage.value = res.data.drawingData
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
const clickHot = (id) => {
|
||||
console.log('点击热区===============')
|
||||
router.push('/' + id + '/' + siteId)
|
||||
}
|
||||
// const testArr=[]
|
||||
const clickHandler = (id) => {
|
||||
// let obj=e.offsetX+','+e.offsetY
|
||||
// testArr.push(obj)
|
||||
// console.log('正确数值',testArr.map(item=>item).join())
|
||||
// console.log('点击',e.offsetX+','+e.offsetY+',')
|
||||
// console.log('图纸', document.getElementById('imgModel').getBoundingClientRect().x,document.getElementById('imgModel').getBoundingClientRect().y)
|
||||
const handleGoToSimulateTunnel = (projectId) => {
|
||||
router.push('/simulate/' + projectId)
|
||||
}
|
||||
const handleGoSiteOrIndex = () => {
|
||||
if (type === 'bySite') {
|
||||
router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
|
||||
} else if (type === 'byHome') {
|
||||
router.push('/' + 'siteToHome/' + siteId)
|
||||
}
|
||||
router.push('/')
|
||||
}
|
||||
//根据站点id获取隧道信息
|
||||
const getTunnel = (id) => {
|
||||
getSiteDetail(id).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
siteName.value = res.data.siteName
|
||||
}
|
||||
});
|
||||
}
|
||||
getTunnel(1)
|
||||
const getList = () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
@@ -294,8 +253,7 @@ const getList = () => {
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
customClass: 'allLoading'
|
||||
})
|
||||
getTunnelList({
|
||||
siteId: 1,
|
||||
getSimulateTunnelList({
|
||||
...pageInfo
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
@@ -332,14 +290,13 @@ const handleSubmit = debounce((instance) => {
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
const data = {
|
||||
siteId: siteId,
|
||||
...form.value,
|
||||
tunnelGatewayDtoList: serialNumberList.value
|
||||
// tunnelGatewayDtoList: serialNumberList.value
|
||||
}
|
||||
// console.info("🚀 ~method:data -----", data)
|
||||
addTunnel(data).then(res => {
|
||||
console.info("🚀 ~method:data -----", data)
|
||||
addSimulateTunnel(data).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success('新增成功')
|
||||
ElMessage.success('新增模拟隧道成功')
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
@@ -348,49 +305,21 @@ const handleSubmit = debounce((instance) => {
|
||||
})
|
||||
})
|
||||
}, 100)
|
||||
//预览隧道
|
||||
const handlePreview = (id) => {
|
||||
if (id) {
|
||||
getTunnelBySiteId(siteId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
if (res.data.filter((item) => item.value == id).length === 0) {
|
||||
ElMessage.warning('当前预览的隧道未准备好, 不予展示, 请添加设备后再试!')
|
||||
} else {
|
||||
router.push('/' + id + '/' + siteId)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
const handleGoToEditTunnel = (tunnelId) => {
|
||||
isEdit.value = true
|
||||
if (type === 'bySite') {
|
||||
router.push('/edit/' + tunnelId + '/bySite/' + userId)
|
||||
} else if (type === 'byHome') {
|
||||
router.push('/edit/' + tunnelId + '/byHome/' + userId)
|
||||
}
|
||||
}
|
||||
|
||||
const handleChooseAll = debounce(() => {
|
||||
tunnelList.value.map(item => {
|
||||
item.checked = !item.checked
|
||||
if (item.checked && !item.isDefault) {
|
||||
tunnelIds.value.push(item.tunnelId)
|
||||
projectIds.value.push(item.projectId)
|
||||
} else if (!item.checked && !item.isDefault) {
|
||||
tunnelIds.value.map((newItem, index) => {
|
||||
if (newItem === item.tunnelId) {
|
||||
tunnelIds.value.splice(index, 1)
|
||||
projectIds.value.map((newItem, index) => {
|
||||
if (newItem === item.projectId) {
|
||||
projectIds.value.splice(index, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}, 100)
|
||||
const handleEditDevice = (tunnelId) => {
|
||||
if (type === 'bySite') {
|
||||
router.push('/device/' + tunnelId + '/bySite/' + userId)
|
||||
} else if (type === 'byHome') {
|
||||
router.push('/device/' + tunnelId + '/byHome/' + userId)
|
||||
}
|
||||
}
|
||||
const restFrom = () => {
|
||||
form.value = {
|
||||
tunnelName: '',
|
||||
@@ -406,9 +335,39 @@ const restFrom = () => {
|
||||
isDefault: false
|
||||
}
|
||||
}
|
||||
const getTunnel = async (projectId) => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '正在加载系统资源...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
customClass: 'allLoading'
|
||||
})
|
||||
await getSimulateTunnelDetail(projectId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
form.value = res.data;
|
||||
}
|
||||
loading.close()
|
||||
});
|
||||
};
|
||||
const handleGoToEditTunnel = (projectId) => {
|
||||
restFrom()
|
||||
title.value = '编辑模拟隧道'
|
||||
getTunnel(projectId)
|
||||
isVisited.value = true
|
||||
serialNumberList.value = [
|
||||
// {
|
||||
// serialNumber: '',
|
||||
// serialNumberType:''
|
||||
// }
|
||||
]
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
const handleAdd = () => {
|
||||
restFrom()
|
||||
title.value = '新增隧道'
|
||||
title.value = '新增模拟隧道'
|
||||
isVisited.value = true
|
||||
serialNumberList.value = [
|
||||
// {
|
||||
@@ -426,12 +385,12 @@ const getImageUrl = (name) => {
|
||||
}
|
||||
const handleClickSite = (type) => {
|
||||
if (type.checked) {
|
||||
tunnelIds.value.push(type.tunnelId)
|
||||
projectIds.value.push(type.projectId)
|
||||
tunnelNameList.value.push(type.tunnelName)
|
||||
} else {
|
||||
tunnelIds.value.map((item, index) => {
|
||||
if (item === type.tunnelId) {
|
||||
tunnelIds.value.splice(index, 1)
|
||||
projectIds.value.map((item, index) => {
|
||||
if (item === type.projectId) {
|
||||
projectIds.value.splice(index, 1)
|
||||
}
|
||||
})
|
||||
tunnelNameList.value.map((item, index) => {
|
||||
@@ -442,7 +401,7 @@ const handleClickSite = (type) => {
|
||||
}
|
||||
}
|
||||
const handleMoreDelete = debounce(() => {
|
||||
if (tunnelIds.value.length === 0) {
|
||||
if (projectIds.value.length === 0) {
|
||||
ElMessage.warning('请先选择隧道进行删除')
|
||||
} else {
|
||||
ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
|
||||
@@ -451,11 +410,11 @@ const handleMoreDelete = debounce(() => {
|
||||
type: 'warning',
|
||||
customClass: 'delBox'
|
||||
}).then(() => {
|
||||
deleteTunnel(tunnelIds.value).then(res => {
|
||||
deleteSimulateTunnel(projectIds.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
tunnelIds.value = []
|
||||
projectIds.value = []
|
||||
tunnelNameList.value = []
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
|
||||
Reference in New Issue
Block a user