624 lines
16 KiB
Vue
624 lines
16 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>
|
|
</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="name" label="设备名称" align="center"/>
|
|
<el-table-column prop="currentA" label="A电流" align="center">
|
|
<template #default="scope">
|
|
<el-input placeholder="请输入A电流" v-model="scope.row.currentA"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="currentB" label="B电流" align="center">
|
|
<template #default="scope">
|
|
<el-input placeholder="请输入B电流" v-model="scope.row.currentB"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="currentC" label="C电流" align="center">
|
|
<template #default="scope">
|
|
<el-input placeholder="请输入C电流" v-model="scope.row.currentC"></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">
|
|
取消
|
|
</div>
|
|
<div class="sure-btn" @click="router.back(-1)">
|
|
确定
|
|
</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="name" label="设备名称" align="center"/>
|
|
<el-table-column prop="offset" label="偏移量" align="center"/>
|
|
<el-table-column prop="unit" 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">
|
|
取消
|
|
</div>
|
|
<div class="sure-btn" @click="router.back(-1)">
|
|
确定
|
|
</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="name" label="设备名称" align="center"/>
|
|
<el-table-column prop="offset" label="偏移量" align="center"/>
|
|
<el-table-column prop="unit" label="单位" align="center">
|
|
<template #default="scope">
|
|
<el-input placeholder="请输入单位" v-model="scope.row.unit"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="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>
|
|
const router = useRouter()
|
|
const collectionFrequency = ref(0)
|
|
const changeIndex = ref(1)
|
|
const fanData = [
|
|
{
|
|
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 = [
|
|
{
|
|
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 = [
|
|
{
|
|
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 handleChangeMenu = (e) => {
|
|
console.log('切换', e)
|
|
changeIndex.value = e
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 166px;
|
|
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>
|