Files
tunnel-cloud-web/src/views/device-manage/index.vue
2023-12-27 23:52:10 +08:00

793 lines
23 KiB
Vue

<template>
<div class="tunnel-bgc">
<div class="box-top">
<div class="back-tunnel" @click="router.back(-1)">
<div class="back-icon"></div>
<span>返回</span>
</div>
<div class="tunnel-name">
一号隧道
</div>
<div class="tunnel-title"></div>
</div>
<div class="device-content">
<div class="device-box">
<div class="box-left">
<el-menu
default-active="1"
@select="handleChangeMenu"
>
<el-menu-item index="1">
<span>风机</span>
</el-menu-item>
<el-menu-item index="2">
<span>风压</span>
</el-menu-item>
<el-menu-item index="3">
<span>其他传感器</span>
</el-menu-item>
<!-- <el-menu-item index="4">-->
<!-- <span>分流器</span>-->
<!-- </el-menu-item>-->
</el-menu>
</div>
<div class="box-right" v-if="changeIndex==1">
<div class="device-title">
<span>风机设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<span class="units">
<input
type="number"
min="0"
v-model="collectionFrequency"
/>
</span>
</div>
</div>
<div class="device-table">
<el-table stripe
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<el-table-column prop="phaseCurrentAOffset" label="A电流" align="center">
<template #default="scope">
<el-input placeholder="请输入A电流" v-model="scope.row.phaseCurrentAOffset"
@change="changeCurrent(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="phaseCurrentBOffset" label="B电流" align="center">
<template #default="scope">
<el-input placeholder="请输入B电流" v-model="scope.row.phaseCurrentBOffset"
@change="changeCurrent(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="phaseCurrentCOffset" label="C电流" align="center">
<template #default="scope">
<el-input placeholder="请输入C电流" v-model="scope.row.phaseCurrentCOffset"
@change="changeCurrent(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
<div class="switch">
<div
:class="{ active: scope.row.state }"
@click="scope.row.state = 1;changeState(scope.row)"
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0;changeState(scope.row)"
>
停用
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn">
取消
</div>
<div class="sure-btn" @click="handleEditFan">
确定
</div>
</div>
</div>
<div class="box-right" v-if="changeIndex==2">
<div class="device-title">
<span>风压设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<span class="units">
<input
type="number"
min="0"
v-model="collectionFrequency"
/>
</span>
</div>
</div>
<div class="device-table">
<el-table stripe
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<el-table-column prop="offset" label="偏移量" align="center"/>
<el-table-column prop="unit" label="单位" align="center">
<template #default="scope">
<el-input placeholder="请输入单位" v-model="scope.row.unit" @change="changeCurrent(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="请输入阈值" v-model="scope.row.alarmValue" @change="changeCurrent(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
<div class="switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = 1;changeState(scope.row)"
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0;changeState(scope.row)"
>
停用
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn">
取消
</div>
<div class="sure-btn" @click="editWinPresure">
确定
</div>
</div>
</div>
<div class="box-right" v-if="changeIndex==3">
<div class="device-title">
<span>其他传感器设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<span class="units">
<input
type="number"
min="0"
v-model="collectionFrequency"
/>
</span>
</div>
</div>
<div class="device-table">
<el-table stripe
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<el-table-column prop="offset" label="偏移量" align="center"/>
<el-table-column prop="unit" label="单位" align="center">
<template #default="scope">
<el-input placeholder="请输入单位" v-model="scope.row.unit" @change="changeCurrent(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="请输入阈值" v-model="scope.row.alarmValue" @change="changeCurrent(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
<div class="switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = 1;changeState(scope.row)"
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0;changeState(scope.row)"
>
停用
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="isVisited=false">
取消
</div>
<div class="sure-btn" @click="editOtherSensor">
确定
</div>
</div>
</div>
<div class="box-right" v-if="changeIndex==4">
<div class="device-title">
<span>分流器设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<span class="units">
<input
type="number"
min="0"
v-model="collectionFrequency"
/>
</span>
</div>
</div>
<div class="device-table">
<el-table stripe
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fenliuData">
<el-table-column prop="name" label="设备名称" align="center"/>
<el-table-column prop="offset" label="偏移量" align="center"/>
<el-table-column prop="thresholdValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
<div class="switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = true"
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = false"
>
停用
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="isVisited=false">
取消
</div>
<div class="sure-btn" @click="router.back(-1)">
确定
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {getEquipmentList, editFan} from "@/api/tunnelManage";
import {ElMessage} from "element-plus";
import {editEquipment} from "../../api/tunnelManage";
const router = useRouter()
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
const collectionFrequency = ref(0)
const changeIndex = ref(1)
const fanData = ref([
// {
// name: '一号风机',
// currentA: '2342',
// currentB: '2342',
// currentC: '2342',
// state: false,
// },
// {
// name: '二号风机',
// currentA: '2342',
// currentB: '2342',
// currentC: '2342',
// state: true,
// },
// {
// name: '三号风机',
// currentA: '2342',
// currentB: '2342',
// currentC: '2342',
// state: false,
// }
])
const winData = ref([
// {
// name: '1号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '2号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '3号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '4号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '5号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '6号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '7号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '8号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '9号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '10号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
])
const otherData = ref([
// {
// name: '风速',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '氧 气',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '温 度',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '湿 度',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '粉 尘',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '二氧化碳',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '一氧化碳',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '二氧化氮',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '一氧化氮',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '二氧化硫',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '硫 化 氢',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }
])
const fenliuData = ref([
// {
// name: '1号分流器',
// offset: '2342',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '2号分流器',
// offset: '2342',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '3号分流器',
// offset: '2342',
// thresholdValue: '2342',
// state: false,
// }
])
const fanItem=ref({})
const windItem=ref({})
const sensorItem=ref({})
const changeCurrent = (row) => {
fanItem.value=getFanEditItem(row)
windItem.value=getWindEditItem(row)
sensorItem.value=getSensorEditItem(row)
}
const changeState = (row) => {
fanItem.value=getFanEditItem(row)
windItem.value=getWindEditItem(row)
sensorItem.value=getSensorEditItem(row)
}
const getFanEditItem = (item) => {
return {
equipmentId: item.equipmentId,
phaseCurrentAOffset: parseInt(item.phaseCurrentAOffset),
phaseCurrentBOffset: parseInt(item.phaseCurrentBOffset),
phaseCurrentCOffset: parseInt(item.phaseCurrentCOffset),
state: item.state,
}
}
const getWindEditItem = (item) => {
return {
equipmentId: item.equipmentId,
unit: item.unit,
alarmValue: item.alarmValue,
state: item.state,
}
}
const getSensorEditItem = (item) => {
return {
equipmentId: item.equipmentId,
unit: item.unit,
alarmValue: item.alarmValue,
state: item.state,
}
}
const editWinPresure=()=>{
editEquipment([windItem.value]).then(res => {
if (res.code === 1000) {
ElMessage.success('修改成功')
}
})
}
const editOtherSensor=()=>{
editEquipment([sensorItem.value]).then(res => {
if (res.code === 1000) {
ElMessage.success('修改成功')
}
})
}
const handleEditFan = () => {
editFan([fanItem.value]).then(res => {
if (res.code === 1000) {
ElMessage.success('修改成功')
}
})
}
const handleChangeMenu = (e) => {
console.log('切换', 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>
<style scoped lang="scss">
.tunnel-bgc {
padding: 85px 0 0 0;
width: 100%;
height: 100%;
background-image: url('@/assets/images/tunnel/sd_bj.png');
.box-top {
display: flex;
justify-content: flex-start;
.tunnel-name {
margin-left: 120px;
height: 61px;
font-size: 46px;
font-weight: bold;
color: #FFFFFF;
line-height: 61px;
}
.back-tunnel {
cursor: pointer;
margin: 0 0 0 70px;
display: flex;
align-items: center;
width: 178px;
height: 70px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08B7B8;
font-size: 38px;
color: #FFFFFF;
.back-icon {
margin-right: 20px;
margin-left: 23px;
width: 33px;
height: 33px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
}
}
}
.device-content {
display: flex;
justify-content: center;
padding-top: 220px;
.device-box {
display: flex;
width: 2194px;
height: 1500px;
background: #064B66;
border-radius: 20px;
border: 2px solid #05FEFF;
box-sizing: border-box;
.box-left {
padding-left: 24px;
width: 300px;
height: 1498px;
background: #0D5A7A;
border-radius: 20px 0px 0px 20px;
:deep(.el-menu) {
border-right: none;
margin-top: 261px;
background-color: #0D5A7A;
.el-menu-item.is-active {
background-image: url(../../assets/images/device/sdgl_xz.png);
}
.el-menu-item {
color: #fff;
height: 90px;
font-size: 40px;
&:hover {
background-color: #0D5A7A;
}
&:first-child {
letter-spacing: 120px;
}
&:nth-child(2) {
letter-spacing: 120px;
}
//&:nth-child(4) {
// letter-spacing: 40px;
//}
}
}
}
.box-right {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
.device-title {
margin-top: 60px;
line-height: 61px;
color: #FFFFFF;
display: flex;
justify-content: center;
> span:first-child {
font-size: 46px;
font-weight: bold;
}
.collection-frequency {
position: absolute;
right: 102px;
> span:first-child {
font-size: 38px !important;
}
.units {
position: relative;
input {
width: 220px;
height: 50px;
border: 1px solid #05FEFF;
background: transparent;
margin-left: 14px;
font-size: 35px;
color: #FFFFFF;
outline: none;
}
}
.units::after {
content: "秒/次";
position: absolute;
right: 6px;
top: 26%;
transform: translateY(-50%);
font-size: 35px;
color: #08B7B8;
}
}
}
}
.btns {
width: 100%;
margin: 0 auto;
position: absolute;
bottom: 70px;
}
.device-table {
margin-top: 50px;
margin-left: 97px;
.active {
color: #FFFFFF;
background: #0f7da9;
}
.switch {
margin-top: 22px;
margin-left: 60px;
display: flex;
width: 200px;
height: 50px;
border-radius: 6px;
border: 1px solid #05FEFF;
overflow: hidden;
color: #51A2B3;
line-height: 40px;
font-size: 36px;
& > div {
flex: 1;
text-align: center;
cursor: pointer;
}
}
:deep(.el-table--fit) {
width: 1700px !important;
}
:deep(.cell) {
height: 80px;
line-height: 80px;
color: #fff;
font-size: 38px;
}
:deep(.el-table tr) {
background-color: #1C5971;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
background-color: #1C5971;
}
:deep(.el-table__row--striped) {
background-color: #13849C !important;
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
background-color: #13849C !important;
}
:deep(.el-table__cell) {
.el-input {
width: 180px;
height: 53px;
}
.el-input__wrapper {
border-radius: 6px;
border: 1px solid #05FEFF;
background-color: transparent;
.el-input__inner {
color: #FFFFFF;
font-size: 40px;
}
}
}
:deep(.el-table__inner-wrapper::before) {
display: none;
}
}
}
}
}
</style>