Merge pull request 'dev' (#374) from dev into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/374
This commit is contained in:
2024-08-26 15:22:50 +00:00
8 changed files with 424 additions and 208 deletions

View File

@@ -56,9 +56,28 @@ export const editEquipment = (data) => {
data data
}) })
} }
export const getEquipmentSerialNumberOptions = (tunnelId) => { export const getWindPressureSerialNumberOptions = (tunnelId) => {
return request({ return request({
url: '/tunnel/tunnel/serialnumber/options', url: '/tunnel/equipment/serialnumber/wind/pressure/options',
method: 'get',
params:{
tunnelId:tunnelId
}
})
}
export const getOtherSensorSerialNumberOptions = (tunnelId) => {
return request({
url: '/tunnel/equipment/serialnumber/options',
method: 'get',
params:{
tunnelId:tunnelId
}
})
}
//获取隧道中正在使用的序列号
export const getSerialNumberOnUse = (tunnelId) => {
return request({
url: '/tunnel/equipment/serialnumber/on/use',
method: 'get', method: 'get',
params:{ params:{
tunnelId:tunnelId tunnelId:tunnelId

View File

@@ -324,7 +324,7 @@ const timeSelect = (index) => {
const changeData = (item) => { const changeData = (item) => {
return { return {
equipmentId: item.equipmentId, equipmentId: item.equipmentId,
icon: changeIcon(item.equipmentType), icon: changeIcon(item.equipmentType,item.equipmentName),
name: item.equipmentName.slice(0, 2), name: item.equipmentName.slice(0, 2),
max: item.maxRange, max: item.maxRange,
value: item.value, value: item.value,
@@ -332,7 +332,7 @@ const changeData = (item) => {
unit: item.unit unit: item.unit
} }
} }
const changeIcon = (type) => { const changeIcon = (type,name) => {
switch (type) { switch (type) {
case "oxygen": case "oxygen":
return 'o2-icon.png'; return 'o2-icon.png';
@@ -340,6 +340,12 @@ const changeIcon = (type) => {
return 'tempture-icon.png'; return 'tempture-icon.png';
case "humidness": case "humidness":
return 'water-icon.png'; return 'water-icon.png';
case "humiture":
if(name==='温度传感器'){
return 'tempture-icon.png';
}else if(name==='湿度传感器'){
return 'water-icon.png';
}
} }
} }
const getAirInfo = (now) => { const getAirInfo = (now) => {
@@ -347,15 +353,15 @@ const getAirInfo = (now) => {
let airObj = {} let airObj = {}
let airArr = [] let airArr = []
now?.map(item => { now?.map(item => {
if (item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") { if (item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness"|| item.equipmentType === "humiture") {
airObj = changeData(item) airObj = changeData(item)
airArr.push(airObj) airArr.push(airObj)
} else if (item.equipmentType === "windSpeed") { } else if (item.equipmentType === "windSpeed"||item.equipmentName==="风速传感器") {
windSpeedType.value = item.equipmentType windSpeedType.value = item.equipmentType
windSpeedId.value = item.equipmentId windSpeedId.value = item.equipmentId
windSpeed.value = item.value windSpeed.value = item.value
windSpeedUnit.value = item.unit windSpeedUnit.value = item.unit
} else if (item.equipmentType === "windDirection") { } else if (item.equipmentType === "windDirection"||item.equipmentName==="风向传感器") {
windDirectionSpeedType.value = item.equipmentType windDirectionSpeedType.value = item.equipmentType
windDirectionSpeedId.value = item.equipmentId windDirectionSpeedId.value = item.equipmentId
windDirection.value = item.value windDirection.value = item.value

View File

@@ -21,13 +21,17 @@
<!-- <p>{{ params.equipmentType }}</p> --> <!-- <p>{{ params.equipmentType }}</p> -->
<!-- </div> --> <!-- </div> -->
<div class="setting-item"> <div class="setting-item">
<p>设备名称</p> <p>设备名称:</p>
<!-- <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable <!-- <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
:placeholder="params.equipmentName" disabled> :placeholder="params.equipmentName" disabled>
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
</el-select> --> </el-select> -->
<p>{{ params.equipmentName }}</p> <p>{{ params.equipmentName }}</p>
</div> </div>
<div class="setting-item">
<p>参数:</p>
<p>31.3%</p>
</div>
<!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput" <!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
:disabled="isDisabledInputNum" /> :disabled="isDisabledInputNum" />
<p>{{ params.equipmentValue }}</p> --> <p>{{ params.equipmentValue }}</p> -->
@@ -53,8 +57,19 @@ import {
} from "vue"; } from "vue";
// 定义事件发射器,父组件监听 // 定义事件发射器,父组件监听
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment", "EquInf"]); const emit = defineEmits([
const params = defineProps(["pointNum", "pointGap", "equipmentType", "equipmentName", "equipmentValue"]); //隧道第几个锚点 "cancel",
"removeEquipment",
"addEquipment",
"EquInf",
]);
const params = defineProps([
"pointNum",
"pointGap",
"equipmentType",
"equipmentName",
"equipmentValue",
]); //隧道第几个锚点
// 当前风压 // 当前风压
let p = ref(57); let p = ref(57);
@@ -68,18 +83,15 @@ let p = ref(57);
// console.log(params.equipmentName); // console.log(params.equipmentName);
// console.log(params.equipmentValue); // console.log(params.equipmentValue);
// let equipmentTypeInf = ref(params.equipmentType) // let equipmentTypeInf = ref(params.equipmentType)
// let equipmentNameInf = ref(params.equipmentName) // let equipmentNameInf = ref(params.equipmentName)
// let equipmentValueInf = ref(params.equipmentValue) // let equipmentValueInf = ref(params.equipmentValue)
//计算锚点之间距离 //计算锚点之间距离
const pointDistance_str = computed( const pointDistance_str = computed(
() => () =>
`${params.pointGap}米*${params.pointNum}=${params.pointGap * params.pointNum `${params.pointGap}米*${params.pointNum}=${
params.pointGap * params.pointNum
}` }`
); );
@@ -173,8 +185,8 @@ const equipment = {
<style lang="scss" scoped> <style lang="scss" scoped>
#edit-dialog { #edit-dialog {
// width: 540px; // width: 540px;
width: 190px; width: 230px;
height: 150px; height: 120px;
// min-height: 683px; // min-height: 683px;
background: rgba(7, 35, 72, 0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
@@ -220,8 +232,6 @@ const equipment = {
color: white; color: white;
line-height: 35px; line-height: 35px;
margin: 20px 30px 0px 30px; margin: 20px 30px 0px 30px;
} }
.equ-info span { .equ-info span {
@@ -230,20 +240,22 @@ const equipment = {
.setting { .setting {
.setting-item { .setting-item {
padding: 30px 30px 10px 30px; padding: 15px 15px 5px 15px;
display: flex;
gap: 10px;
p { p {
width: 190px; width: 190px;
height: 35px; height: 35px;
line-height: 35px;
font-size: 18px; font-size: 18px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #ffffff; color: #ffffff;
line-height: 35px; text-align: right;
margin-bottom: 20px;
} }
p:nth-child(2) { p:nth-child(2) {
color: #f7b500 color: #f7b500;
text-align: left;
} }
} }
@@ -289,14 +301,12 @@ const equipment = {
button[disabled] { button[disabled] {
color: grey !important; color: grey !important;
opacity: 1 opacity: 1;
} }
button { button {
cursor: pointer; cursor: pointer;
transition: transform 0.1s linear 0s; transition: transform 0.1s linear 0s;
} }
& :nth-child(1) { & :nth-child(1) {

View File

@@ -75,8 +75,8 @@ const handleSend = () => {
} }
const initWebSocket = () => { const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/debug/${token}/${serialNumber.value}` // let wsUrl = `ws://192.168.31.176:9000/websocket/debug/${token}/${serialNumber.value}`
let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`; // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
// let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}` let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
console.log(wsUrl) console.log(wsUrl)
socket = new WebSocket(wsUrl) socket = new WebSocket(wsUrl)
//连接发生错误的回调方法 //连接发生错误的回调方法

View File

@@ -36,7 +36,7 @@
<span>风机设备管理</span> <span>风机设备管理</span>
<div class="collection-frequency"> <div class="collection-frequency">
<span>采集频率</span> <span>采集频率</span>
<el-input type="number" v-model="fanFrequency" @change="changeFan"> <el-input type="number" v-model="fanFrequency">
<template #suffix> <template #suffix>
<span>/</span> <span>/</span>
</template> </template>
@@ -45,62 +45,63 @@
</div> </div>
<div class="device-table"> <div class="device-table">
<el-table stripe <el-table stripe
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;" 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' }" :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData"> :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
<el-table-column prop="equipmentName" label="设备名称" align="center"/> <el-table-column prop="equipmentName" label="设备名称" align="center"/>
<el-table-column prop="ratedPower" label="额定功率" align="center"> <el-table-column prop="ratedPower" label="额定功率" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="额定功率" v-model="scope.row.ratedPower" <el-input placeholder="额定功率" v-model="scope.row.ratedPower"
@change="changeFanData(scope.row)"></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/> <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
<el-table-column prop="acurrentValue" label="A电流阈值" align="center"> <el-table-column prop="acurrentValue" label="A电流阈值" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="A电流" v-model="scope.row.acurrentValue" <el-input placeholder="A电流" v-model="scope.row.acurrentValue"
@change="changeFanData(scope.row)"></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/> <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
<el-table-column prop="bcurrentValue" label="B电流阈值" align="center"> <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="B电流" v-model="scope.row.bcurrentValue" <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
@change="changeFanData(scope.row)"></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/> <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
<el-table-column prop="ccurrentValue" label="C电流阈值" align="center"> <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="C电流" v-model="scope.row.ccurrentValue" <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
@change="changeFanData(scope.row)"></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="serialNumber" label="序列号" align="center" width="500"> <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
<template #default="scope"> <template #default="scope">
<el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select" <!-- {{scope.row.serialNumberOption.filter(item => item.value == scope.row.serialNumber).map(item => item.label)[0]}}?-->
@change="changeFanData(scope.row)" class="serialNumber"> <!-- <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
<el-option <!-- clearable class="serialNumber">-->
v-for="item in serialNumberOptions" <!-- <el-option-->
:key="item.value" <!-- v-for="item in scope.row.serialNumberOption"-->
:label="item.label" <!-- :key="item.value"-->
:value="item.value" <!-- :label="item.label"-->
/> <!-- :value="item.value"-->
</el-select> <!-- />-->
<!-- </el-select>-->
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="state" label="状态" align="center" min-width="86"> <el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope"> <template #default="scope">
<div class="switch"> <div class="switch">
<div <div
:class="{ active: scope.row.state }" :class="{ active: scope.row.state }"
@click="scope.row.state = 1;changeFanData(scope.row)" @click="scope.row.state = 1; "
> >
启用 启用
</div> </div>
<div <div
:class="{ active: ! scope.row.state }" :class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0;changeFanData(scope.row)" @click=" scope.row.state = 0; "
> >
停用 停用
</div> </div>
@@ -123,7 +124,7 @@
<span>风压设备管理</span> <span>风压设备管理</span>
<div class="collection-frequency"> <div class="collection-frequency">
<span>采集频率</span> <span>采集频率</span>
<el-input type="number" v-model="windFrequency" @change="changeWind"> <el-input type="number" v-model="windFrequency">
<template #suffix> <template #suffix>
<span>/</span> <span>/</span>
</template> </template>
@@ -131,7 +132,7 @@
</div> </div>
</div> </div>
<div class="device-table"> <div class="device-table">
<el-table stripe <el-table stripe table-layout="auto"
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;" 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' }" :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData"> :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
@@ -139,52 +140,54 @@
<el-table-column prop="offset" label="偏移量" align="center"/> <el-table-column prop="offset" label="偏移量" align="center"/>
<el-table-column prop="unit" label="单位" align="center"> <el-table-column prop="unit" label="单位" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="单位" v-model="scope.row.unit" @change="changeWindData(scope.row)"></el-input> <el-input placeholder="单位" v-model="scope.row.unit" ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="alarmValue" label="阈值" align="center"> <el-table-column prop="alarmValue" label="阈值" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="阈值" v-model="scope.row.alarmValue" <el-input placeholder="阈值" v-model="scope.row.alarmValue"
@change="changeWindData(scope.row)"></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="miniRange" label="最小范围" align="center"> <el-table-column prop="miniRange" label="最小范围" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="最小范围" v-model="scope.row.miniRange" <el-input placeholder="最小范围" v-model="scope.row.miniRange"
@change="changeWindData(scope.row)"></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="maxRange" label="最大范围" align="center"> <el-table-column prop="maxRange" label="最大范围" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="最大范围" v-model="scope.row.maxRange" <el-input placeholder="最大范围" v-model="scope.row.maxRange"
@change="changeWindData(scope.row)"></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="serialNumber" label="序列号" align="center" width="500"> <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
<template #default="scope"> <template #default="scope">
<el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select" <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
@change="changeWindData(scope.row)" class="serialNumber"> clearable class="serialNumber" @clear="clearWinDataSelectedOption" @change="changeWindDataSerialNumber($event,scope.row.serialNumberOption)">
<el-option <el-option
v-for="item in serialNumberOptions" v-for="item in scope.row.serialNumberOption"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
:disabled="serialNumberOptionDisabled(item)"
:title="serialNumberOptionDisabled(item)?'该序列号已选择!':''"
/> />
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="state" label="状态" align="center"> <el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope"> <template #default="scope">
<div class="switch wind-switch"> <div class="switch wind-switch">
<div <div
:class="{ active: scope.row.state }" :class="{ active: scope.row.state }"
@click=" scope.row.state = 1;changeWindData(scope.row)" @click=" scope.row.state = 1; "
> >
启用 启用
</div> </div>
<div <div
:class="{ active: ! scope.row.state }" :class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0;changeWindData(scope.row)" @click=" scope.row.state = 0; "
> >
停用 停用
</div> </div>
@@ -207,7 +210,7 @@
<span>其他传感器设备管理</span> <span>其他传感器设备管理</span>
<div class="collection-frequency"> <div class="collection-frequency">
<span>采集频率</span> <span>采集频率</span>
<el-input type="number" v-model="otherFrequency" @change="changeOther"> <el-input type="number" v-model="otherFrequency">
<template #suffix> <template #suffix>
<span>/</span> <span>/</span>
</template> </template>
@@ -215,7 +218,7 @@
</div> </div>
</div> </div>
<div class="device-table"> <div class="device-table">
<el-table stripe <el-table stripe table-layout="auto"
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;" 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' }" :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData"> :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
@@ -223,33 +226,33 @@
<el-table-column prop="offset" label="偏移量" align="center"/> <el-table-column prop="offset" label="偏移量" align="center"/>
<el-table-column prop="unit" label="单位" align="center"> <el-table-column prop="unit" label="单位" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="单位" v-model="scope.row.unit" @change="changeOtherData(scope.row)"></el-input> <el-input placeholder="单位" v-model="scope.row.unit" ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="alarmValue" label="阈值" align="center"> <el-table-column prop="alarmValue" label="阈值" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="阈值" v-model="scope.row.alarmValue" <el-input placeholder="阈值" v-model="scope.row.alarmValue"
@change="changeOtherData(scope.row)"></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="miniRange" label="最小范围" align="center"> <el-table-column prop="miniRange" label="最小范围" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="最小范围" v-model="scope.row.miniRange" <el-input placeholder="最小范围" v-model="scope.row.miniRange"
@change="changeOtherData(scope.row)"></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="maxRange" label="最大范围" align="center"> <el-table-column prop="maxRange" label="最大范围" align="center">
<template #default="scope"> <template #default="scope">
<el-input placeholder="最大范围" v-model="scope.row.maxRange" <el-input placeholder="最大范围" v-model="scope.row.maxRange"
@change="changeOtherData(scope.row)"></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="serialNumber" label="序列号" align="center" width="500"> <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
<template #default="scope"> <template #default="scope">
<el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select" <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
@change="changeOtherData(scope.row)" clearable class="serialNumber"> clearable class="serialNumber">
<el-option <el-option
v-for="item in serialNumberOptions" v-for="item in otherSensorSerialNumberOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
@@ -257,18 +260,18 @@
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="state" label="状态" align="center"> <el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope"> <template #default="scope">
<div class="switch wind-switch"> <div class="switch wind-switch">
<div <div
:class="{ active: scope.row.state }" :class="{ active: scope.row.state }"
@click=" scope.row.state = 1;changeOtherData(scope.row)" @click=" scope.row.state = 1; "
> >
启用 启用
</div> </div>
<div <div
:class="{ active: ! scope.row.state }" :class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0;changeOtherData(scope.row)" @click=" scope.row.state = 0; "
> >
停用 停用
</div> </div>
@@ -311,7 +314,7 @@
@change="changeFenData(scope.row)"></el-input> @change="changeFenData(scope.row)"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="state" label="状态" align="center"> <el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope"> <template #default="scope">
<div class="switch"> <div class="switch">
<div <div
@@ -347,7 +350,7 @@
<script setup> <script setup>
import {ElLoading, ElMessage} from "element-plus"; import {ElLoading, ElMessage} from "element-plus";
import {getEquipmentList, editEquipment, getTunnelDetail, getEquipmentSerialNumberOptions} from "@/api/tunnelManage"; import {getEquipmentList, editEquipment, getTunnelDetail,getOtherSensorSerialNumberOptions, getWindPressureSerialNumberOptions} from "@/api/tunnelManage";
import TunnelTitle from "@/components/tunnelTitle/index.vue"; import TunnelTitle from "@/components/tunnelTitle/index.vue";
import {debounce} from 'lodash' import {debounce} from 'lodash'
@@ -360,60 +363,51 @@ const windFrequency = ref(0)
const otherFrequency = ref(0) const otherFrequency = ref(0)
const changeIndex = ref(1) const changeIndex = ref(1)
const fanData = ref([]) const fanData = ref([])
const editFanData = ref([])
const winData = ref([]) const winData = ref([])
const editWinData = ref([]) const windPressureDataSerialNumberOptions = ref([])
const otherSensorSerialNumberOptions = ref([])
const otherData = ref([]) const otherData = ref([])
const editOtherData = ref([]) const winDataSelectedOption = ref([])
const fenLiuData = ref([]) const fenLiuData = ref([])
const editFenLiuData = ref([])
const frequencyData = ref([])
const serialNumberOptions = ref([])
const siteId = ref(0) const siteId = ref(0)
const tunnelName = ref('') const tunnelName = ref('')
const getSerialNumberOptions = () => { const getWindPressureOptions =async () => {
console.log('tunnelId',tunnelId) let {data,code,msg}=await getWindPressureSerialNumberOptions(tunnelId)
getEquipmentSerialNumberOptions(tunnelId).then(res => { if(code===1000){
if (res.code === 1000) { // windPressureDataSerialNumberOptions.value= data
serialNumberOptions.value = res.data return data
} else { }else{
ElMessage.error(res.msg) ElMessage.error(msg)
}
}
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) => {
console.info("🚀 ~method:changeWindDataSerialNumber -----", value,options)
options?.forEach(item=>{
if(item.value==value){
console.info("🚀 ~method:item.label -----", item.label)
if(item.label.indexOf('PLC')>=0){
winDataSelectedOption.value=[]
}else{
winDataSelectedOption.value.push(value)
}
} }
}) })
} }
getSerialNumberOptions() const serialNumberOptionDisabled=(item)=>{
const changeFan = (e) => { return winDataSelectedOption.value.indexOf(item.value) >= 0;
// 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) => { const changeData = (item) => {
return { return {
@@ -427,6 +421,12 @@ const changeData = (item) => {
} }
} }
const editEquip = debounce(() => { const editEquip = debounce(() => {
const loading = ElLoading.service({
lock: true,
text: '修改中...',
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading'
})
let newFrequency = [{ let newFrequency = [{
acquisitionPeriod: fanFrequency.value * 1000, acquisitionPeriod: fanFrequency.value * 1000,
tunnelId: parseInt(tunnelId), tunnelId: parseInt(tunnelId),
@@ -469,12 +469,16 @@ const editEquip = debounce(() => {
sensorList: newSensor, sensorList: newSensor,
// shuntList: editFenLiuData.value, // shuntList: editFenLiuData.value,
} }
console.info("🚀 ~ file:index method: line:478 -----",basicData)
editEquipment(basicData).then(res => { editEquipment(basicData).then(res => {
if (res.code === 1000) { if (res.code === 1000) {
loading.close()
ElMessage.success('修改成功') ElMessage.success('修改成功')
router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId) router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
} else { } else {
ElMessage.error(res.msg) ElMessage.error(res.msg)
loading.close()
} }
}) })
}, 100) }, 100)
@@ -483,21 +487,29 @@ const handleChangeMenu = (e) => {
changeIndex.value = e changeIndex.value = e
} }
const getList = () => { const getList = async () => {
const windPressureOption=await getWindPressureOptions()
const loading = ElLoading.service({ const loading = ElLoading.service({
lock: true, lock: true,
text: '正在加载系统资源...', text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)', background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading' customClass: 'allLoading'
}) })
getEquipmentList(tunnelId).then(res => { await getEquipmentList(tunnelId).then( res => {
if (res.code === 1000) { if (res.code === 1000) {
fanData.value = res.data.frequencyChangerList fanData.value = res.data.frequencyChangerList
res.data.windPressureSensorList.forEach(item => { res.data.windPressureSensorList?.forEach(item => {
item.offset = item.offset + 4000 item.offset = item.offset + 4000
}) })
winData.value = res.data.windPressureSensorList winData.value = res.data.windPressureSensorList
res.data.sensorList.forEach(item => { winData.value?.forEach(item => {
for (const equipmentId in windPressureOption) {
if(item.equipmentId == equipmentId){
item.serialNumberOption =windPressureOption[equipmentId]
}
}
})
res.data.sensorList?.forEach(item => {
item.offset = item.offset + 4000 item.offset = item.offset + 4000
}) })
otherData.value = res.data.sensorList otherData.value = res.data.sensorList
@@ -529,7 +541,18 @@ getList()
<style lang="scss"> <style lang="scss">
.serialNumber{ .serialNumber{
.el-input{ .el-input{
width: 450px!important; 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 { .el-select.serialNumber {
@@ -558,7 +581,7 @@ getList()
background: #064B66 !important; background: #064B66 !important;
border: 2px solid #05FEFF !important; border: 2px solid #05FEFF !important;
.el-select-dropdown { .el-select-dropdown {
min-width: 130px !important; min-width: 130px !important;
} }
.el-select-dropdown__item.is-hovering{ .el-select-dropdown__item.is-hovering{
@@ -572,12 +595,19 @@ getList()
border-bottom: none; border-bottom: none;
} }
} }
.el-select-dropdown__item.selected {
background-color: transparent !important;
color: #F7B500;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover { .el-select-dropdown__item:hover {
background-color: transparent !important; background-color: transparent !important;
color: #F7B500; color: #F7B500;
} }
.el-select-dropdown__item.is-disabled{
background-color: transparent !important;
color: #fff!important;
}
} }
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -630,7 +660,7 @@ getList()
.device-box { .device-box {
display: flex; display: flex;
width: 2800px; width: 3500px;
height: 1600px; height: 1600px;
background: #064B66; background: #064B66;
border-radius: 20px; border-radius: 20px;
@@ -752,7 +782,7 @@ getList()
} }
.wind-switch { .wind-switch {
margin-left: 26px; //margin-left: 26px;
} }
.switch { .switch {

View File

@@ -12,28 +12,65 @@
</div> </div>
</div> </div>
<div class="edit-box"> <div class="edit-box">
<el-form :model="form" :label-position="right" label-width="230px"> <el-form :model="form" :label-position="right" label-width="230px">
<el-form-item label="隧道名称"> <el-form-item label="隧道名称">
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/> <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
</el-form-item> </el-form-item>
<el-form-item label="隧道简称"> <el-form-item label="隧道简称">
<el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/> <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
</el-form-item> </el-form-item>
<!-- <el-form-item label="序列号前缀" prop="serialNumberPrefix">--> <el-form-item label="序列号前缀" prop="serialNumberPrefix">
<!-- <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>--> <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="PLC序列号" prop="serialNumber">--> <!-- <el-form-item label="序列号1" prop="serialNumber">-->
<!-- <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>--> <!-- <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <div style="display: flex;flex-direction: column">--> <!-- <el-form-item label="序列号2" prop="serialNumberOne">-->
<!-- <div v-for="(item,index) in form.serialNumberList" :key="index" >--> <!-- <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>-->
<!-- <el-form-item :label="'序列号'+(index+2)">--> <!-- </el-form-item>-->
<!-- <div style="flex: 1;display: flex;">-->
<!-- <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />--> <el-form-item label="PLC序列号" prop="serialNumber">
<!-- </div>--> <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>
<!-- </el-form-item>--> </el-form-item>
<!-- </div>--> <div style="display: flex;flex-direction: column">
<!-- </div>--> <div style="display:flex;align-items:center;justify-content:flex-end;font-size: 38px;color: #08B7B8;">
<span style="cursor: pointer;" @click="addSerialNumber">添加序列号</span>
<el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer;" @click="addSerialNumber">
<CirclePlus/>
</el-icon>
</div>
<div v-for="(item,index) in 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-form-item label="隧道长度">
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/> <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
</el-form-item> </el-form-item>
@@ -86,20 +123,22 @@
</template> </template>
<script setup> <script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue"; import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import {editTunnel, getTunnelDetail} from "@/api/tunnelManage"; import {editTunnel, getTunnelDetail, getSerialNumberOnUse} from "@/api/tunnelManage";
import {ElLoading, ElMessage} from "element-plus"; import {ElLoading, ElMessage} from "element-plus";
import {initSceneData} from "@/api/tunnelScene"; import {initSceneData} from "@/api/tunnelScene";
import TunnelTitle from "@/components/tunnelTitle/index.vue"; import TunnelTitle from "@/components/tunnelTitle/index.vue";
import { debounce } from 'lodash' import {debounce} from 'lodash'
const router = useRouter(); const router = useRouter();
const tunnelId = reactive(router.currentRoute.value.params.tunnelId); const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
const userId = reactive(router.currentRoute.value.params.userId); const userId = reactive(router.currentRoute.value.params.userId);
const type = reactive(router.currentRoute.value.params.type); const type = reactive(router.currentRoute.value.params.type);
const modelEquipmentList = ref(null) const modelEquipmentList = ref(null)
const isShowRemove = ref(false)
const form = ref({ const form = ref({
tunnelName: "", tunnelName: "",
serialNumberPrefix: '', serialNumberPrefix: '',
serialNumberOne: '', // serialNumber: '',
serialNumber: '', serialNumber: '',
totalLength: "", totalLength: "",
referenceFrequency: '', referenceFrequency: '',
@@ -109,18 +148,43 @@ const form = ref({
dropFrequency: '', dropFrequency: '',
isDefault: false, isDefault: false,
remarks: "", remarks: "",
serialNumberList:[] tunnelGatewayVoList: []
}); });
const getTunnel = () => { 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({ const loading = ElLoading.service({
lock: true, lock: true,
text: '正在加载系统资源...', text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)', background: 'rgba(0, 0, 0, 0.7)',
customClass:'allLoading' customClass: 'allLoading'
}) })
getTunnelDetail(tunnelId).then((res) => { await getTunnelDetail(tunnelId).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
res.data.serialNumberList= res.data.serialNumberList?.map(item=>({serialNumberOne:item})) res.data.tunnelGatewayVoList?.forEach((item) => {
serialNumberOnUseList?.forEach((serialNumberOnUseItem) => {
if (item.serialNumber == serialNumberOnUseItem) {
item.isUse = true
}
})
})
if(!res.data.tunnelGatewayVoList){
res.data.tunnelGatewayVoList=[]
}
form.value = res.data; form.value = res.data;
} }
loading.close() loading.close()
@@ -139,33 +203,39 @@ const handleGoTunnelMgr = () => {
router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId); router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
}; };
const getTunnelInfo = () => { const getTunnelInfo = () => {
const loading = ElLoading.service({
lock: true,
text: '修改中...',
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading'
})
initSceneData(tunnelId).then((res) => { initSceneData(tunnelId).then((res) => {
modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig) modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
if (modelEquipmentList.value === null) { if (modelEquipmentList.value === null) {
modelEquipmentList.value = [] modelEquipmentList.value = []
} }
let serialNumberList=form.value.serialNumberList.map(item=>item.serialNumberOne)
const data = { const data = {
tunnelId: tunnelId, tunnelId: tunnelId,
...form.value, ...form.value,
serialNumberList:serialNumberList, tunnelGatewayDtoList: form.value.tunnelGatewayVoList,
tunnelLength: form.value.totalLength, tunnelLength: form.value.totalLength,
modelEquipmentList: modelEquipmentList.value, modelEquipmentList: modelEquipmentList.value,
}; };
editTunnel(data).then((res) => { editTunnel(data).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
loading.close()
ElMessage.success(res.msg); ElMessage.success(res.msg);
router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId); router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
} else { } else {
ElMessage.error(res.msg); ElMessage.error(res.msg);
loading.close()
} }
}); });
}) })
} }
const handleSave =debounce(() => { const handleSave = debounce(() => {
getTunnelInfo() getTunnelInfo()
},100) }, 100)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-form-item__content) { :deep(.el-form-item__content) {
@@ -253,13 +323,30 @@ const handleSave =debounce(() => {
height: 100%; 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 { .edit-box {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
top: 250px; top: 250px;
left: 80px; left: 80px;
width: 1000px; width: 1000px;
//height: 500px; height: 1500px;
overflow-y: scroll;
background-image: url(@/assets/images/transducer/bg.png); background-image: url(@/assets/images/transducer/bg.png);
padding: 20px 30px; padding: 20px 30px;
box-sizing: border-box; box-sizing: border-box;
@@ -304,7 +391,13 @@ const handleSave =debounce(() => {
font-size: 38px; font-size: 38px;
color: #ffffff; color: #ffffff;
margin-right: 12px; margin-right: 12px;
height: 50px;
line-height: 50px; line-height: 50px;
word-break: break-all;
//text-overflow: ellipsis;
//overflow: hidden;
//white-space: nowrap;
//-webkit-line-clamp: 2;
} }
:deep(.el-input) { :deep(.el-input) {
@@ -319,6 +412,7 @@ const handleSave =debounce(() => {
color: #fff; color: #fff;
font-size: 38px; font-size: 38px;
} }
.el-input__suffix-inner { .el-input__suffix-inner {
font-size: 30px; font-size: 30px;
color: #08B7B8; color: #08B7B8;

View File

@@ -53,12 +53,12 @@
<div class="edit-icon"></div> <div class="edit-icon"></div>
<div>站点编辑</div> <div>站点编辑</div>
</div> </div>
<div v-if="item.totalTunnel!==0" @click="handleUpload(item.siteId)"> <!-- <div v-if="item.totalTunnel!==0" @click="handleUpload(item.siteId)">-->
<el-icon style="margin-left: 20px"> <!-- <el-icon style="margin-left: 20px">-->
<UploadFilled/> <!-- <UploadFilled/>-->
</el-icon> <!-- </el-icon>-->
<div>上传图纸</div> <!-- <div>上传图纸</div>-->
</div> <!-- </div>-->
</div> </div>
</div> </div>
<div class="site-box add-box" v-if="showAddIcon" @click="handleAdd"> <div class="site-box add-box" v-if="showAddIcon" @click="handleAdd">
@@ -168,8 +168,8 @@ const info = ref({
const title = ref('新增站点') const title = ref('新增站点')
const isVisited = ref(false); const isVisited = ref(false);
let isUploadVisited = ref(false); let isUploadVisited = ref(false);
const showFirst = ref(true) const showFirst = ref(false)
const total = ref(10); const total = ref(0);
const showAddIcon = ref(true) const showAddIcon = ref(true)
const pageInfo = reactive({ const pageInfo = reactive({
pageNum: 1, pageNum: 1,

View File

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