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

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

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/374
This commit is contained in:
odjbin
2024-08-26 15:22:50 +00:00
parent 967d603ff2 c2a5d47506
commit 7c7e9e9607
8 changed files with 424 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/api/tunnelManage.js
View File

@@ -56,9 +56,28 @@ export const editEquipment = (data) => {
data
})
}
export const getEquipmentSerialNumberOptions = (tunnelId) => {
export const getWindPressureSerialNumberOptions = (tunnelId) => {
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',
params:{
tunnelId:tunnelId

16
src/components/content/airInfo/AirInfo.vue
View File

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

50
src/components/content/tunnelScene/preEquComp/preDialog.vue
View File

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

4
src/views/debug/index.vue
View File

@@ -75,8 +75,8 @@ const handleSend = () => {
}
const initWebSocket = () => {
// 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 = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/debug/${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}`
console.log(wsUrl)
socket = new WebSocket(wsUrl)
//连接发生错误的回调方法

224
src/views/device-manage/index.vue
View File

@@ -36,7 +36,7 @@
<span>风机设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<el-input type="number" v-model="fanFrequency" @change="changeFan">
<el-input type="number" v-model="fanFrequency">
<template #suffix>
<span>秒/次</span>
</template>
@@ -45,62 +45,63 @@
</div>
<div class="device-table">
<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' }"
: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>
></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>
></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>
></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>
></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 serialNumberOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<!-- {{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" min-width="86">
<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)"
@click="scope.row.state = 1; "
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0;changeFanData(scope.row)"
@click=" scope.row.state = 0; "
>
停用
</div>
@@ -123,7 +124,7 @@
<span>风压设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<el-input type="number" v-model="windFrequency" @change="changeWind">
<el-input type="number" v-model="windFrequency">
<template #suffix>
<span>秒/次</span>
</template>
@@ -131,7 +132,7 @@
</div>
</div>
<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;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
@@ -139,52 +140,54 @@
<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>
<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"
@change="changeWindData(scope.row)"></el-input>
></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>
></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>
></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">
clearable class="serialNumber" @clear="clearWinDataSelectedOption" @change="changeWindDataSerialNumber($event,scope.row.serialNumberOption)">
<el-option
v-for="item in serialNumberOptions"
v-for="item in scope.row.serialNumberOption"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="serialNumberOptionDisabled(item)"
:title="serialNumberOptionDisabled(item)?'该序列号已选择!':''"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<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)"
@click=" scope.row.state = 1; "
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0;changeWindData(scope.row)"
@click=" scope.row.state = 0; "
>
停用
</div>
@@ -207,7 +210,7 @@
<span>其他传感器设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<el-input type="number" v-model="otherFrequency" @change="changeOther">
<el-input type="number" v-model="otherFrequency">
<template #suffix>
<span>秒/次</span>
</template>
@@ -215,7 +218,7 @@
</div>
</div>
<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;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
@@ -223,33 +226,33 @@
<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>
<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"
@change="changeOtherData(scope.row)"></el-input>
></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>
></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>
></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">
clearable class="serialNumber">
<el-option
v-for="item in serialNumberOptions"
v-for="item in otherSensorSerialNumberOptions"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -257,18 +260,18 @@
</el-select>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<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)"
@click=" scope.row.state = 1; "
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0;changeOtherData(scope.row)"
@click=" scope.row.state = 0; "
>
停用
</div>
@@ -311,7 +314,7 @@
@change="changeFenData(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope">
<div class="switch">
<div
@@ -347,7 +350,7 @@
<script setup>
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 {debounce} from 'lodash'
@@ -360,60 +363,51 @@ 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 windPressureDataSerialNumberOptions = ref([])
const otherSensorSerialNumberOptions = ref([])
const otherData = ref([])
const editOtherData = ref([])
const winDataSelectedOption = ref([])
const fenLiuData = ref([])
const editFenLiuData = ref([])
const frequencyData = ref([])
const serialNumberOptions = ref([])
const siteId = ref(0)
const tunnelName = ref('')
const getSerialNumberOptions = () => {
console.log('tunnelId',tunnelId)
getEquipmentSerialNumberOptions(tunnelId).then(res => {
if (res.code === 1000) {
serialNumberOptions.value = res.data
} else {
ElMessage.error(res.msg)
const getWindPressureOptions =async () => {
let {data,code,msg}=await getWindPressureSerialNumberOptions(tunnelId)
if(code===1000){
// windPressureDataSerialNumberOptions.value= data
return data
}else{
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 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 serialNumberOptionDisabled=(item)=>{
return winDataSelectedOption.value.indexOf(item.value) >= 0;
}
const changeData = (item) => {
return {
@@ -427,6 +421,12 @@ const changeData = (item) => {
}
}
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),
@@ -469,12 +469,16 @@ const editEquip = debounce(() => {
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)
@@ -483,21 +487,29 @@ const handleChangeMenu = (e) => {
changeIndex.value = e
}
const getList = () => {
const getList = async () => {
const windPressureOption=await getWindPressureOptions()
const loading = ElLoading.service({
lock: true,
text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading'
})
getEquipmentList(tunnelId).then(res => {
await getEquipmentList(tunnelId).then( res => {
if (res.code === 1000) {
fanData.value = res.data.frequencyChangerList
res.data.windPressureSensorList.forEach(item => {
res.data.windPressureSensorList?.forEach(item => {
item.offset = item.offset + 4000
})
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
})
otherData.value = res.data.sensorList
@@ -529,7 +541,18 @@ getList()
<style lang="scss">
.serialNumber{
.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 {
@@ -558,7 +581,7 @@ getList()
background: #064B66 !important;
border: 2px solid #05FEFF !important;
.el-select-dropdown {
.el-select-dropdown {
min-width: 130px !important;
}
.el-select-dropdown__item.is-hovering{
@@ -572,12 +595,19 @@ getList()
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">
@@ -630,7 +660,7 @@ getList()
.device-box {
display: flex;
width: 2800px;
width: 3500px;
height: 1600px;
background: #064B66;
border-radius: 20px;
@@ -752,7 +782,7 @@ getList()
}
.wind-switch {
margin-left: 26px;
//margin-left: 26px;
}
.switch {

154
src/views/edit/edit.vue
View File

@@ -12,28 +12,65 @@
</div>
</div>
<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-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="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="序列号前缀" prop="serialNumberPrefix">
<el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
</el-form-item>
<!-- <el-form-item label="序列号1" prop="serialNumber">-->
<!-- <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="序列号2" prop="serialNumberOne">-->
<!-- <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>-->
<!-- </el-form-item>-->
<el-form-item label="PLC序列号" prop="serialNumber">
<el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>
</el-form-item>
<div style="display: flex;flex-direction: column">
<div style="display:flex;align-items:center;justify-content:flex-end;font-size: 38px;color: #08B7B8;">
<span style="cursor: pointer;" @click="addSerialNumber">添加序列号</span>
<el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer;" @click="addSerialNumber">
<CirclePlus/>
</el-icon>
</div>
<div v-for="(item,index) in 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>
@@ -86,20 +123,22 @@
</template>
<script setup>
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 {initSceneData} from "@/api/tunnelScene";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
import { debounce } from 'lodash'
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: '',
serialNumberOne: '',
// serialNumber: '',
serialNumber: '',
totalLength: "",
referenceFrequency: '',
@@ -109,18 +148,43 @@ const form = ref({
dropFrequency: '',
isDefault: false,
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({
lock: true,
text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)',
customClass:'allLoading'
customClass: 'allLoading'
})
getTunnelDetail(tunnelId).then((res) => {
await getTunnelDetail(tunnelId).then((res) => {
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;
}
loading.close()
@@ -139,33 +203,39 @@ 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 = []
}
let serialNumberList=form.value.serialNumberList.map(item=>item.serialNumberOne)
const data = {
tunnelId: tunnelId,
...form.value,
serialNumberList:serialNumberList,
tunnelGatewayDtoList: 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(() => {
const handleSave = debounce(() => {
getTunnelInfo()
},100)
}, 100)
</script>
<style lang="scss" scoped>
:deep(.el-form-item__content) {
@@ -253,13 +323,30 @@ const handleSave =debounce(() => {
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: 500px;
height: 1500px;
overflow-y: scroll;
background-image: url(@/assets/images/transducer/bg.png);
padding: 20px 30px;
box-sizing: border-box;
@@ -304,7 +391,13 @@ const handleSave =debounce(() => {
font-size: 38px;
color: #ffffff;
margin-right: 12px;
height: 50px;
line-height: 50px;
word-break: break-all;
//text-overflow: ellipsis;
//overflow: hidden;
//white-space: nowrap;
//-webkit-line-clamp: 2;
}
:deep(.el-input) {
@@ -319,6 +412,7 @@ const handleSave =debounce(() => {
color: #fff;
font-size: 38px;
}
.el-input__suffix-inner {
font-size: 30px;
color: #08B7B8;

16
src/views/site/index.vue
View File

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

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

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