邓洁 : 隧道接口部分对接
This commit is contained in:
dengj
@@ -7,11 +7,13 @@ export const getTunnelList = (params) => {
|
|||||||
params
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
export const editTunnel = (data) => {
|
export const getTunnelDetail = (tunnelId) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/tunnel/tunnel',
|
url: `/tunnel/tunnel/${tunnelId}`,
|
||||||
method: 'put',
|
method: 'get',
|
||||||
data
|
params:{
|
||||||
|
tunnelId:tunnelId
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
export const addTunnel = (data) => {
|
export const addTunnel = (data) => {
|
||||||
@@ -27,3 +29,20 @@ export const deleteTunnel = (tunnelIdList) => {
|
|||||||
method: 'delete'
|
method: 'delete'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//设备信息列表
|
||||||
|
export const getEquipmentList = (tunnelId) => {
|
||||||
|
return request({
|
||||||
|
url: '/tunnel/equipment/equipments',
|
||||||
|
method: 'get',
|
||||||
|
params:{
|
||||||
|
tunnelId:tunnelId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export const editTunnel = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/tunnel/model/details',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -46,11 +46,11 @@ const btnList = ref([
|
|||||||
icon: 'sp_icon_yhgl.png',
|
icon: 'sp_icon_yhgl.png',
|
||||||
name: '用户管理'
|
name: '用户管理'
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
route: '/system',
|
// route: '/system',
|
||||||
icon: 'sp_icon_xtgl.png',
|
// icon: 'sp_icon_xtgl.png',
|
||||||
name: '系统管理'
|
// name: '系统管理'
|
||||||
},
|
// },
|
||||||
// {
|
// {
|
||||||
// icon: 'sp_icon_mngl.png',
|
// icon: 'sp_icon_mngl.png',
|
||||||
// name: '模拟仿真'
|
// name: '模拟仿真'
|
||||||
|
|||||||
@@ -26,9 +26,9 @@
|
|||||||
<el-menu-item index="3">
|
<el-menu-item index="3">
|
||||||
<span>其他传感器</span>
|
<span>其他传感器</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
<el-menu-item index="4">
|
<!-- <el-menu-item index="4">-->
|
||||||
<span>分流器</span>
|
<!-- <span>分流器</span>-->
|
||||||
</el-menu-item>
|
<!-- </el-menu-item>-->
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-right" v-if="changeIndex==1">
|
<div class="box-right" v-if="changeIndex==1">
|
||||||
@@ -50,20 +50,20 @@
|
|||||||
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="fanData">
|
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
|
||||||
<el-table-column prop="name" label="设备名称" align="center"/>
|
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||||
<el-table-column prop="currentA" label="A电流" align="center">
|
<el-table-column prop="phaseCurrentAOffset" label="A电流" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input placeholder="请输入A电流" v-model="scope.row.currentA"></el-input>
|
<el-input placeholder="请输入A电流" v-model="scope.row.phaseCurrentAOffset"></el-input>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="currentB" label="B电流" align="center">
|
<el-table-column prop="phaseCurrentBOffset" label="B电流" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input placeholder="请输入B电流" v-model="scope.row.currentB"></el-input>
|
<el-input placeholder="请输入B电流" v-model="scope.row.phaseCurrentBOffset"></el-input>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="currentC" label="C电流" align="center">
|
<el-table-column prop="phaseCurrentCOffset" label="C电流" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input placeholder="请输入C电流" v-model="scope.row.currentC"></el-input>
|
<el-input placeholder="请输入C电流" v-model="scope.row.phaseCurrentCOffset"></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">
|
||||||
@@ -90,7 +90,7 @@
|
|||||||
<div class="cancel-btn">
|
<div class="cancel-btn">
|
||||||
取消
|
取消
|
||||||
</div>
|
</div>
|
||||||
<div class="sure-btn" @click="router.back(-1)">
|
<div class="sure-btn" @click="router.back(-1)">
|
||||||
确定
|
确定
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -114,12 +114,12 @@
|
|||||||
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">
|
||||||
<el-table-column prop="name" label="设备名称" align="center"/>
|
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||||
<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"/>
|
||||||
<el-table-column prop="thresholdValue" label="阈值" align="center">
|
<el-table-column prop="alarmValue" label="阈值" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
|
<el-input placeholder="请输入阈值" v-model="scope.row.alarmValue"></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">
|
||||||
@@ -146,7 +146,7 @@
|
|||||||
<div class="cancel-btn">
|
<div class="cancel-btn">
|
||||||
取消
|
取消
|
||||||
</div>
|
</div>
|
||||||
<div class="sure-btn" @click="router.back(-1)">
|
<div class="sure-btn" @click="router.back(-1)">
|
||||||
确定
|
确定
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -170,16 +170,16 @@
|
|||||||
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">
|
||||||
<el-table-column prop="name" label="设备名称" align="center"/>
|
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
|
||||||
<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"></el-input>
|
<el-input placeholder="请输入单位" v-model="scope.row.unit"></el-input>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="thresholdValue" label="阈值" align="center">
|
<el-table-column prop="alarmValue" label="阈值" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
|
<el-input placeholder="请输入阈值" v-model="scope.row.alarmValue"></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">
|
||||||
@@ -272,195 +272,214 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import {getEquipmentList} from "@/api/tunnelManage";
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
|
||||||
const collectionFrequency = ref(0)
|
const collectionFrequency = ref(0)
|
||||||
const changeIndex = ref(1)
|
const changeIndex = ref(1)
|
||||||
const fanData = [
|
const fanData = ref([
|
||||||
{
|
// {
|
||||||
name: '一号风机',
|
// name: '一号风机',
|
||||||
currentA: '2342',
|
// currentA: '2342',
|
||||||
currentB: '2342',
|
// currentB: '2342',
|
||||||
currentC: '2342',
|
// currentC: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '二号风机',
|
// name: '二号风机',
|
||||||
currentA: '2342',
|
// currentA: '2342',
|
||||||
currentB: '2342',
|
// currentB: '2342',
|
||||||
currentC: '2342',
|
// currentC: '2342',
|
||||||
state: true,
|
// state: true,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '三号风机',
|
// name: '三号风机',
|
||||||
currentA: '2342',
|
// currentA: '2342',
|
||||||
currentB: '2342',
|
// currentB: '2342',
|
||||||
currentC: '2342',
|
// currentC: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}
|
// }
|
||||||
]
|
])
|
||||||
const winData = [
|
const winData = ref([
|
||||||
{
|
// {
|
||||||
name: '1号风压',
|
// name: '1号风压',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'Pa',
|
// unit: 'Pa',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '2号风压',
|
// name: '2号风压',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'Pa',
|
// unit: 'Pa',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '3号风压',
|
// name: '3号风压',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'Pa',
|
// unit: 'Pa',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '4号风压',
|
// name: '4号风压',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'Pa',
|
// unit: 'Pa',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '5号风压',
|
// name: '5号风压',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'Pa',
|
// unit: 'Pa',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '6号风压',
|
// name: '6号风压',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'Pa',
|
// unit: 'Pa',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '7号风压',
|
// name: '7号风压',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'Pa',
|
// unit: 'Pa',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '8号风压',
|
// name: '8号风压',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'Pa',
|
// unit: 'Pa',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '9号风压',
|
// name: '9号风压',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'Pa',
|
// unit: 'Pa',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '10号风压',
|
// name: '10号风压',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'Pa',
|
// unit: 'Pa',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
},
|
// },
|
||||||
]
|
])
|
||||||
const otherData = [
|
const otherData = ref([
|
||||||
{
|
// {
|
||||||
name: '风速',
|
// name: '风速',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '氧 气',
|
// name: '氧 气',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '温 度',
|
// name: '温 度',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '湿 度',
|
// name: '湿 度',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '粉 尘',
|
// name: '粉 尘',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '二氧化碳',
|
// name: '二氧化碳',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '一氧化碳',
|
// name: '一氧化碳',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '二氧化氮',
|
// name: '二氧化氮',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '一氧化氮',
|
// name: '一氧化氮',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '二氧化硫',
|
// name: '二氧化硫',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '硫 化 氢',
|
// name: '硫 化 氢',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
unit: 'm/s',
|
// unit: 'm/s',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}
|
// }
|
||||||
]
|
])
|
||||||
const fenliuData = [
|
const fenliuData = ref([
|
||||||
{
|
// {
|
||||||
name: '1号分流器',
|
// name: '1号分流器',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '2号分流器',
|
// name: '2号分流器',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}, {
|
// }, {
|
||||||
name: '3号分流器',
|
// name: '3号分流器',
|
||||||
offset: '2342',
|
// offset: '2342',
|
||||||
thresholdValue: '2342',
|
// thresholdValue: '2342',
|
||||||
state: false,
|
// state: false,
|
||||||
}
|
// }
|
||||||
]
|
])
|
||||||
const handleChangeMenu = (e) => {
|
const handleChangeMenu = (e) => {
|
||||||
console.log('切换', e)
|
console.log('切换', e)
|
||||||
changeIndex.value = e
|
changeIndex.value = e
|
||||||
}
|
}
|
||||||
|
const getList = () => {
|
||||||
|
getEquipmentList(tunnelId).then(res => {
|
||||||
|
console.log('设备列表', res)
|
||||||
|
if (res.code === 1000) {
|
||||||
|
fanData.value = res.data.frequencyChangerList
|
||||||
|
winData.value = res.data.windPressureSensorList
|
||||||
|
otherData.value = res.data.sensorList
|
||||||
|
res.data.acquisitionList.map(item=>{
|
||||||
|
if(item.tunnelId==tunnelId){
|
||||||
|
collectionFrequency.value=item.acquisitionPeriod
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
getList()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@@ -552,9 +571,10 @@ const handleChangeMenu = (e) => {
|
|||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
letter-spacing: 120px;
|
letter-spacing: 120px;
|
||||||
}
|
}
|
||||||
&:last-child{
|
|
||||||
letter-spacing: 40px;
|
//&:nth-child(4) {
|
||||||
}
|
// letter-spacing: 40px;
|
||||||
|
//}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -589,7 +609,7 @@ const handleChangeMenu = (e) => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
width: 166px;
|
width: 220px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border: 1px solid #05FEFF;
|
border: 1px solid #05FEFF;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -669,11 +689,13 @@ const handleChangeMenu = (e) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-table__row--striped) {
|
:deep(.el-table__row--striped) {
|
||||||
background-color: #13849C!important;
|
background-color: #13849C !important;
|
||||||
}
|
}
|
||||||
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
|
|
||||||
background-color: #13849C!important;
|
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
|
||||||
|
background-color: #13849C !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-table__cell) {
|
:deep(.el-table__cell) {
|
||||||
.el-input {
|
.el-input {
|
||||||
width: 180px;
|
width: 180px;
|
||||||
|
|||||||
@@ -1,264 +1,115 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<div class="box-top">
|
<div class="box-top">
|
||||||
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
|
<div class="tunnel-title"></div>
|
||||||
<div class="tunnel-title"></div>
|
<div class="top-right">
|
||||||
<manage-length class="tunnel-length"></manage-length>
|
<div class="del-btn" @click="handleSave">
|
||||||
<div class="top-right">
|
保存
|
||||||
<div class="current-site">
|
|
||||||
当前站点：<span>{{ currentSite }}</span>
|
|
||||||
<el-dropdown trigger="click" @command="handleCommand">
|
|
||||||
<div class="toggle"></div>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label
|
|
||||||
}}</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
<div class="current-user">
|
|
||||||
上午好：<span>{{ currentUser }}</span>
|
|
||||||
<span>今天是：{{ currentDate }}</span>
|
|
||||||
<div class="logout" @click="handleLogout"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
|
</div>
|
||||||
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" />
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="edit-box">
|
||||||
|
<el-form :model="form" :label-position="right" label-width="188px">
|
||||||
|
<el-form-item label="隧道名称">
|
||||||
|
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="序列号">
|
||||||
|
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="隧道长度">
|
||||||
|
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="隧道备注">
|
||||||
|
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
|
||||||
|
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId"/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
|
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
|
||||||
import ManageBtn from "@/components/manageBtn/index.vue";
|
import {getTunnelDetail} from "../../api/tunnelManage";
|
||||||
import ManageLength from "@/components/manageLength/index.vue";
|
|
||||||
import { dateFormat } from "@/utils/date.js";
|
|
||||||
import { getToken } from "@/utils/auth";
|
|
||||||
import { useAuthStore } from "@/store/userstore.js";
|
|
||||||
import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
|
|
||||||
import { ElMessageBox } from "element-plus";
|
|
||||||
import { getUserInfo } from "@/api/login";
|
|
||||||
|
|
||||||
const authStore = useAuthStore();
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const selectIndex = ref(-1);
|
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
|
||||||
const showFan = ref(false);
|
|
||||||
const drawerLeft = ref(true);
|
const form = ref({
|
||||||
const drawerRight = ref(true);
|
tunnelName: '',
|
||||||
const currentSite = ref("");
|
serialNumber: '',
|
||||||
const siteList = ref([])
|
totalLength: '',
|
||||||
const currentUser = ref("");
|
remarks: ''
|
||||||
const currentDate = ref(dateFormat());
|
|
||||||
const tunnelBtn = ref();
|
|
||||||
const tunnelList = ref([]);
|
|
||||||
const tunnelId = ref(0);
|
|
||||||
const routeList = ref([]);
|
|
||||||
let socket = reactive("");
|
|
||||||
const serialNumber = ref("SC00DY00GH00ELBT");
|
|
||||||
let token = getToken();
|
|
||||||
let send = {
|
|
||||||
type: "ping",
|
|
||||||
};
|
|
||||||
const largeScreenData = ref(null);
|
|
||||||
const socketData = reactive({
|
|
||||||
leftData: [],
|
|
||||||
windPressure: [],
|
|
||||||
sensor: [],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
const getTunnel = () => {
|
||||||
nextTick(() => {
|
getTunnelDetail(tunnelId).then((res) => {
|
||||||
showFan.value = true;
|
if (res?.code === 1000) {
|
||||||
});
|
console.log('res',res)
|
||||||
getUser()
|
form.value=res.data
|
||||||
getOtherInfo()
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
const getUser = () => {
|
|
||||||
getUserInfo().then(res => {
|
|
||||||
currentUser.value = res.data.user.userName
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const getOtherInfo = () => {
|
|
||||||
getLargeScreenInfo().then((res) => {
|
|
||||||
if (res?.code === 1000) {
|
|
||||||
routeList.value = res.data.routeList
|
|
||||||
currentSite.value = res.data.siteOption[0].label
|
|
||||||
siteList.value = res.data.siteOption
|
|
||||||
tunnelId.value = res.data.tunnelOption[0].value
|
|
||||||
getTunnel(res.data.siteOption[0].value)
|
|
||||||
getScreenInfo(tunnelId.value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const getScreenInfo = async (id) => {
|
|
||||||
await getLargeScreen(id).then((res) => {
|
|
||||||
if (res?.code === 1000) {
|
|
||||||
largeScreenData.value = res.data;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
//根据站点id获取隧道信息
|
|
||||||
const getTunnel = (id) => {
|
|
||||||
getTunnelBySiteId(id).then((res) => {
|
|
||||||
if (res?.code === 1000) {
|
|
||||||
tunnelList.value = res.data
|
|
||||||
getScreenInfo(res.data[0].value)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const changeTunnel = (e) => {
|
|
||||||
tunnelId.value = e
|
|
||||||
let newObj = {}
|
|
||||||
tunnelList.value.forEach((item, index) => {
|
|
||||||
if (index === e) {
|
|
||||||
newObj = item
|
|
||||||
}
|
|
||||||
})
|
|
||||||
getScreenInfo(newObj.value)
|
|
||||||
nextTick(() => {
|
|
||||||
showFan.value = true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const manageSelect = (index) => {
|
|
||||||
console.log("首页点击-", index);
|
|
||||||
if (index === 0) {
|
|
||||||
router.push("/site");
|
|
||||||
} else if (index === 1) {
|
|
||||||
router.push("/tunnel/1");
|
|
||||||
} else if (index === 2) {
|
|
||||||
router.push("/user");
|
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
const handleCommand = (item) => {
|
|
||||||
console.log('commads', item)
|
|
||||||
currentSite.value = item.label
|
|
||||||
getTunnel(item.value)
|
|
||||||
}
|
}
|
||||||
const closeLeft = () => {
|
getTunnel()
|
||||||
drawerLeft.value = !drawerLeft.value;
|
|
||||||
};
|
|
||||||
const closeRight = () => {
|
|
||||||
drawerRight.value = !drawerRight.value;
|
|
||||||
};
|
|
||||||
const handleLogout = () => {
|
|
||||||
ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
authStore.userLogout();
|
|
||||||
router.push("/login");
|
|
||||||
})
|
|
||||||
};
|
|
||||||
const previousBtn = () => {
|
|
||||||
tunnelBtn.value.prev();
|
|
||||||
};
|
|
||||||
const nextBtn = () => {
|
|
||||||
tunnelBtn.value.next();
|
|
||||||
};
|
|
||||||
|
|
||||||
const initWebSocket = () => {
|
|
||||||
// let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
|
|
||||||
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
|
|
||||||
console.log(wsUrl);
|
|
||||||
socket = new WebSocket(wsUrl);
|
|
||||||
//连接发生错误的回调方法
|
|
||||||
socket.onerror = function () {
|
|
||||||
console.log("ws连接发生错误");
|
|
||||||
};
|
|
||||||
//连接成功建立的回调方法
|
|
||||||
socket.onopen = function () {
|
|
||||||
console.log("ws连接成功");
|
|
||||||
};
|
|
||||||
//接收到消息的回调方法
|
|
||||||
socket.onmessage = function (event) {
|
|
||||||
console.log("服务器返回的信息: ", JSON.parse(event.data));
|
|
||||||
const type = JSON.parse(event.data).type;
|
|
||||||
const data = JSON.parse(event.data).data;
|
|
||||||
if (type === "equipment") {
|
|
||||||
data.forEach((item) => {
|
|
||||||
if (item.typeKey === "frequency") {
|
|
||||||
socketData.leftData = data;
|
|
||||||
} else if (item.typeKey === "windPressure") {
|
|
||||||
socketData.windPressure = data;
|
|
||||||
} else if (item.typeKey === "sensor") {
|
|
||||||
socketData.sensor = data;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//连接关闭的回调方法
|
|
||||||
socket.onclose = function () {
|
|
||||||
console.log("ws连接关闭");
|
|
||||||
// initWebSocket()
|
|
||||||
};
|
|
||||||
setInterval(() => {
|
|
||||||
socket.send(JSON.stringify(send));
|
|
||||||
}, 30000);
|
|
||||||
};
|
|
||||||
const closeSocket = () => {
|
|
||||||
socket.close();
|
|
||||||
};
|
|
||||||
initWebSocket();
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
|
||||||
.el-dropdown__popper.el-popper {
|
|
||||||
background: transparent;
|
|
||||||
//border: none;
|
|
||||||
border: 1px solid #0E7DAA;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-light {
|
|
||||||
background: rgba(7, 35, 72, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-popper {
|
|
||||||
padding: 20px;
|
|
||||||
margin-left: 50px;
|
|
||||||
width: 150px;
|
|
||||||
background: rgba(7, 35, 72, 0.9);
|
|
||||||
|
|
||||||
.el-scrollbar__wrap {
|
|
||||||
.el-dropdown__list {
|
|
||||||
.el-dropdown-menu {
|
|
||||||
background-color: rgba(7, 35, 72, 0.9);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 5px;
|
|
||||||
|
|
||||||
.el-dropdown-menu__item {
|
|
||||||
color: #FFFFFF;
|
|
||||||
//border:none;
|
|
||||||
padding: 5px;
|
|
||||||
|
|
||||||
border-bottom: 1px solid #05FEFF;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dropdown-menu__item.hover,
|
|
||||||
.el-dropdown-menu__item:hover {
|
|
||||||
background-color: transparent !important;
|
|
||||||
color: #F7B500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#main {
|
#main {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #072348;
|
||||||
|
.del-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 85px;
|
||||||
|
right: 80px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 42px;
|
||||||
|
width: 180px;
|
||||||
|
height: 80px;
|
||||||
|
line-height: 80px;
|
||||||
|
background: #08B7B8;
|
||||||
|
border-radius: 11px;
|
||||||
|
padding-left: 50px;
|
||||||
|
}
|
||||||
|
#tunnel-box {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
}
|
||||||
background-color: #072348;
|
.edit-box{
|
||||||
|
z-index: 2;
|
||||||
#tunnel-box {
|
position: absolute;
|
||||||
height: 100%;
|
top: 160px;
|
||||||
|
left: 70px;
|
||||||
|
width: 830px;
|
||||||
|
height: 500px;
|
||||||
|
background-image: url(@/assets/images/transducer/bg.png);
|
||||||
|
padding: 0 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.el-form-item__label) {
|
||||||
|
font-size: 38px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-right: 12px;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-input) {
|
||||||
|
height: 75px;
|
||||||
|
|
||||||
|
.el-input__wrapper {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid #08B7B8;
|
||||||
|
|
||||||
|
.el-input__inner {
|
||||||
|
height: auto;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 38px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
<div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
|
<div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<span>{{ item.tunnelName }}</span>
|
<span>{{ item.tunnelName }}</span>
|
||||||
<span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}公里</span>
|
<span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
|
||||||
<el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
|
<el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-center">
|
<div class="box-center">
|
||||||
@@ -33,7 +33,7 @@
|
|||||||
<div class="edit-icon"></div>
|
<div class="edit-icon"></div>
|
||||||
<div>隧道编辑</div>
|
<div>隧道编辑</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="edit-btn" @click.stop="handleEditDevice">
|
<div class="edit-btn" @click.stop="handleEditDevice(item.tunnelId)">
|
||||||
<div class="edit-icon-two"></div>
|
<div class="edit-icon-two"></div>
|
||||||
<div>设备管理</div>
|
<div>设备管理</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -62,15 +62,15 @@
|
|||||||
<div class="siteId">
|
<div class="siteId">
|
||||||
<span>{{ title }}</span>
|
<span>{{ title }}</span>
|
||||||
</div>
|
</div>
|
||||||
<el-form :model="form" :label-position="right" label-width="168px">
|
<el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
|
||||||
<el-form-item label="隧道名称">
|
<el-form-item label="隧道名称" required>
|
||||||
<el-input v-model="form.name" placeholder="请输入隧道名称"/>
|
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="序列号">
|
<el-form-item label="序列号" required>
|
||||||
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
|
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="隧道长度">
|
<el-form-item label="隧道长度" required>
|
||||||
<el-input type="number" v-model="form.tunnelLength" placeholder="请输入隧道长度"/>
|
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="隧道备注">
|
<el-form-item label="隧道备注">
|
||||||
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
|
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
|
||||||
@@ -80,7 +80,7 @@
|
|||||||
<div class="cancel-btn" @click="isVisited=false">
|
<div class="cancel-btn" @click="isVisited=false">
|
||||||
取消
|
取消
|
||||||
</div>
|
</div>
|
||||||
<div class="sure-btn" @click="handleAddTunnel">
|
<div class="sure-btn" @click="handleSubmit(formInstance)">
|
||||||
确定
|
确定
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -97,12 +97,16 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {ElMessage, ElMessageBox} from "element-plus";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
||||||
import {getTunnelList} from "@/api/tunnelManage";
|
import {getTunnelList,addTunnel, deleteTunnel} from "@/api/tunnelManage";
|
||||||
import {deleteTunnel} from "../../api/tunnelManage";
|
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const showAddIcon = ref(true)
|
const showAddIcon = ref(true)
|
||||||
const siteId = reactive(router.currentRoute.value.params.siteId)
|
const siteId = reactive(router.currentRoute.value.params.siteId)
|
||||||
|
const formRules = ref({
|
||||||
|
tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}],
|
||||||
|
serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
|
||||||
|
})
|
||||||
|
const formInstance = ref()
|
||||||
const tunnelList = ref([
|
const tunnelList = ref([
|
||||||
{
|
{
|
||||||
tunnelName: '一号隧道',
|
tunnelName: '一号隧道',
|
||||||
@@ -226,9 +230,9 @@ const isVisited = ref(false);
|
|||||||
const tunnelIds = ref([])
|
const tunnelIds = ref([])
|
||||||
const tunnelNameList = ref([])
|
const tunnelNameList = ref([])
|
||||||
const form = ref({
|
const form = ref({
|
||||||
name: '',
|
tunnelName: '',
|
||||||
serialNumber: '',
|
serialNumber: '',
|
||||||
tunnelLength: '',
|
totalLength: '',
|
||||||
remarks: ''
|
remarks: ''
|
||||||
});
|
});
|
||||||
const isEdit = ref(false)
|
const isEdit = ref(false)
|
||||||
@@ -242,7 +246,7 @@ const getList = () => {
|
|||||||
...pageInfo
|
...pageInfo
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
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
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -253,8 +257,28 @@ const handleCurrentChange = (val) => {
|
|||||||
pageInfo.pageNum = val
|
pageInfo.pageNum = val
|
||||||
getList()
|
getList()
|
||||||
}
|
}
|
||||||
const handleAddTunnel=()=>{
|
const handleSubmit = (instance) => {
|
||||||
|
// if (!instance) return
|
||||||
|
// console.log('instance',instance)
|
||||||
|
// instance.validate(async (valid) => {
|
||||||
|
// console.log('valid',valid)
|
||||||
|
// if (!valid) return
|
||||||
|
const data={
|
||||||
|
siteId:siteId,
|
||||||
|
...form.value
|
||||||
|
}
|
||||||
|
if(form.value.tunnelName&&form.value.serialNumber&&form.value.totalLength){
|
||||||
|
addTunnel(data).then(res => {
|
||||||
|
if (res.code === 1000) {
|
||||||
|
ElMessage.success('新增成功')
|
||||||
|
getList()
|
||||||
|
isVisited.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else {
|
||||||
|
ElMessage.warning('请先完善信息再新增')
|
||||||
|
}
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
const handleGoToEditTunnel = (tunnelId) => {
|
const handleGoToEditTunnel = (tunnelId) => {
|
||||||
isEdit.value = true
|
isEdit.value = true
|
||||||
@@ -269,14 +293,15 @@ const handleEdit = () => {
|
|||||||
title.value = '编辑隧道'
|
title.value = '编辑隧道'
|
||||||
// isVisited.value = true
|
// isVisited.value = true
|
||||||
}
|
}
|
||||||
const handleEditDevice = () => {
|
const handleEditDevice = (tunnelId) => {
|
||||||
router.push('/device/' + 1)
|
router.push('/device/' + tunnelId)
|
||||||
}
|
}
|
||||||
const restFrom = () => {
|
const restFrom = () => {
|
||||||
form.value = {
|
form.value = {
|
||||||
address: '',
|
tunnelName: '',
|
||||||
siteName: '',
|
serialNumber: '',
|
||||||
describe: ''
|
totalLength: '',
|
||||||
|
remarks: ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user