邓洁 : 设备管理及修复
This commit is contained in:
邓洁
BIN
src/assets/images/tunnel/sd_icon_fc.png
Normal file
BIN
src/assets/images/tunnel/sd_icon_fc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/images/tunnel/sd_icon_fj.png
Normal file
BIN
src/assets/images/tunnel/sd_icon_fj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/images/tunnel/sd_icon_fs.png
Normal file
BIN
src/assets/images/tunnel/sd_icon_fs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 823 B |
BIN
src/assets/images/tunnel/sd_icon_fy.png
Normal file
BIN
src/assets/images/tunnel/sd_icon_fy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 916 B |
BIN
src/assets/images/tunnel/sd_icon_qt.png
Normal file
BIN
src/assets/images/tunnel/sd_icon_qt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 828 B |
BIN
src/assets/images/tunnel/sd_icon_sd.png
Normal file
BIN
src/assets/images/tunnel/sd_icon_sd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 925 B |
BIN
src/assets/images/tunnel/sd_icon_wd.png
Normal file
BIN
src/assets/images/tunnel/sd_icon_wd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 925 B |
BIN
src/assets/images/tunnel/sd_icon_yq.png
Normal file
BIN
src/assets/images/tunnel/sd_icon_yq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 949 B |
@@ -6,6 +6,11 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
-moz-user-select: none; /*火狐*/
|
||||
-webkit-user-select: none; /*webkit浏览器*/
|
||||
-ms-user-select: none; /*IE10*/
|
||||
-khtml-user-select: none; /*早期浏览器*/
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -402,9 +407,13 @@ body,
|
||||
font-weight: bold;
|
||||
color: #08b7b8;
|
||||
letter-spacing: 3px;
|
||||
p{
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-message-box__btns {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.el-button {
|
||||
@@ -485,3 +494,37 @@ input[type="number"] {
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//取消 确定按钮
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 80px;
|
||||
|
||||
.cancel-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
width: 220px;
|
||||
height: 80px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #08B7B8;
|
||||
line-height: 80px;
|
||||
font-size: 38px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sure-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
width: 220px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
background: #08B7B8;
|
||||
border-radius: 11px;
|
||||
color: #FFFFFF;
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -447,7 +447,7 @@ input[type="number"] {
|
||||
border: 2px solid #0f82af;
|
||||
background: transparent;
|
||||
margin-left: 14px;
|
||||
|
||||
outline:none;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -13,11 +13,9 @@
|
||||
<div class="device-content">
|
||||
<div class="device-box">
|
||||
<div class="box-left">
|
||||
<!-- <div>风机</div>-->
|
||||
<!-- <div>风压</div>-->
|
||||
<!-- <div>其他传感器</div>-->
|
||||
<el-menu
|
||||
default-active="1"
|
||||
@select="handleChangeMenu"
|
||||
>
|
||||
<el-menu-item index="1">
|
||||
<span>风机</span>
|
||||
@@ -30,8 +28,185 @@
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="box-right">
|
||||
|
||||
<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" @click="isVisited=false">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn">
|
||||
确定
|
||||
</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" @click="isVisited=false">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn">
|
||||
确定
|
||||
</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="handleSubmit(formInstance)">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,10 +215,179 @@
|
||||
|
||||
<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%;
|
||||
@@ -89,31 +433,189 @@ const router = useRouter()
|
||||
.device-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 246px;
|
||||
padding-top: 220px;
|
||||
|
||||
.device-box {
|
||||
display: flex;
|
||||
width: 2194px;
|
||||
height: 1321px;
|
||||
height: 1500px;
|
||||
background: #064B66;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #05FEFF;
|
||||
box-sizing: border-box;
|
||||
|
||||
.box-left {
|
||||
padding-left: 24px;
|
||||
width: 300px;
|
||||
height: 1318px;
|
||||
height: 1498px;
|
||||
background: #0D5A7A;
|
||||
border-radius: 20px 0px 0px 20px;
|
||||
:deep(.el-menu){
|
||||
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<div>隧道数量：{{ item.info.tunnelNum }}条
|
||||
</div>
|
||||
<div>
|
||||
<div class="tunnel" v-if="showFirstTunnel">
|
||||
<div class="tunnel" v-if="item.info.tunnelName">
|
||||
<div>{{ item.info.tunnelName }}</div>
|
||||
<div class="tunnel-icon"></div>
|
||||
<div>施工长度{{ item.info.constructionLength }}米</div>
|
||||
@@ -41,7 +41,7 @@
|
||||
<div class="add-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more" @click="router.push('/tunnel')" v-if="showFirstTunnel">
|
||||
<div class="more" @click="goToAddTunnel(item.siteId)" v-if="item.info.tunnelName">
|
||||
更多
|
||||
<div class="icon"></div>
|
||||
</div>
|
||||
@@ -105,7 +105,7 @@ const siteIds = ref([])
|
||||
const siteNameList = ref([])
|
||||
const info = ref({
|
||||
tunnelNum: 0,
|
||||
tunnelName: '隧道',
|
||||
tunnelName: '',
|
||||
constructionLength: 0,
|
||||
implementationLength: 0
|
||||
})
|
||||
@@ -114,7 +114,6 @@ const isClick = ref(false);
|
||||
const isVisited = ref(false);
|
||||
const total = ref();
|
||||
const showAddIcon = ref(false)
|
||||
const showFirstTunnel = ref(true)
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 6
|
||||
@@ -136,9 +135,10 @@ const getList = () => {
|
||||
showAddIcon.value = total.value !== 6;
|
||||
res.data.rows.map(item => {
|
||||
if (item.tunnelList === null || item.tunnelList === []) {
|
||||
showFirstTunnel.value = false
|
||||
item.info = info.value
|
||||
}else{
|
||||
item.info=item.tunnelList[0]
|
||||
}
|
||||
item.info = info.value
|
||||
item.checked = false
|
||||
})
|
||||
siteList.value = res.data.rows;
|
||||
@@ -229,9 +229,9 @@ const handleMoreDelete = () => {
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
await getList()
|
||||
getList()
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -254,39 +254,6 @@ const handleCurrentChange = async (val) => {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 80px;
|
||||
|
||||
.cancel-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
width: 220px;
|
||||
height: 80px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #08B7B8;
|
||||
line-height: 80px;
|
||||
font-size: 38px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sure-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
width: 220px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
background: #08B7B8;
|
||||
border-radius: 11px;
|
||||
color: #FFFFFF;
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
border: 2px solid #05FEFF;
|
||||
background: #0D6578;
|
||||
@@ -399,11 +366,14 @@ const handleCurrentChange = async (val) => {
|
||||
}
|
||||
|
||||
.box-content {
|
||||
height: 1850px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.add-box {
|
||||
cursor: pointer;
|
||||
@@ -425,7 +395,7 @@ const handleCurrentChange = async (val) => {
|
||||
|
||||
.site-box {
|
||||
margin-top: 122px;
|
||||
//margin-right: 60px;
|
||||
//margin-right: 1%;
|
||||
padding: 40px 50px;
|
||||
width: 1250px;
|
||||
height: 750px;
|
||||
|
||||
@@ -7,6 +7,9 @@
|
||||
</div>
|
||||
<div class="tunnel-title"></div>
|
||||
<div class="all-del-btn">
|
||||
<div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
|
||||
添加
|
||||
</div>
|
||||
<div class="all-btn">
|
||||
全选
|
||||
</div>
|
||||
@@ -84,7 +87,7 @@
|
||||
</el-dialog>
|
||||
<div class="pagination">
|
||||
<span>首页</span>
|
||||
<el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
|
||||
<el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next" />
|
||||
<span>尾页</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,6 +95,7 @@
|
||||
|
||||
<script setup>
|
||||
const router = useRouter()
|
||||
const showAddIcon = ref(true)
|
||||
const siteId = reactive(router.currentRoute.value.params.siteId)
|
||||
const siteList = ref([
|
||||
{
|
||||
@@ -159,51 +163,49 @@ const siteList = ref([
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
])
|
||||
const iconsList = ref([
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
icon: 'sd_icon_fj.png',
|
||||
name: '风机',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 11
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
icon: 'sd_icon_sd.png',
|
||||
name: '湿度',
|
||||
num: '无'
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 2
|
||||
icon: 'sd_icon_fy.png',
|
||||
name: '风压',
|
||||
num: 10
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 11
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
icon: 'sd_icon_yq.png',
|
||||
name: '氧气',
|
||||
num: '无'
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
icon: 'sd_icon_fs.png',
|
||||
name: '风速',
|
||||
num: 11
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
icon: 'sd_icon_fc.png',
|
||||
name: '粉尘',
|
||||
num: 1
|
||||
},
|
||||
{
|
||||
icon: 'sd_icon_wd.png',
|
||||
name: '温度',
|
||||
num: 11
|
||||
},
|
||||
{
|
||||
icon: 'sd_icon_qt.png',
|
||||
name: '有害气体',
|
||||
num: '无'
|
||||
},
|
||||
])
|
||||
const title = ref('新增隧道')
|
||||
const isVisited = ref(false);
|
||||
@@ -215,12 +217,13 @@ const form = ref({
|
||||
tunnelLength: '',
|
||||
remarks: ''
|
||||
});
|
||||
|
||||
const handleEdit = () => {
|
||||
title.value = '编辑隧道'
|
||||
isVisited.value = true
|
||||
}
|
||||
const handleEditDevice = () => {
|
||||
router.push('/device/'+1)
|
||||
router.push('/device/' + 1)
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
@@ -299,37 +302,6 @@ const handleClickSite = (type) => {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 80px;
|
||||
|
||||
.cancel-btn {
|
||||
cursor: pointer;
|
||||
width: 220px;
|
||||
height: 80px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #08B7B8;
|
||||
line-height: 80px;
|
||||
padding-left: 67px;
|
||||
font-size: 38px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sure-btn {
|
||||
cursor: pointer;
|
||||
width: 220px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
background: #08B7B8;
|
||||
border-radius: 11px;
|
||||
color: #FFFFFF;
|
||||
font-size: 38px;
|
||||
padding-left: 67px;
|
||||
}
|
||||
}
|
||||
|
||||
.tunnel-bgc {
|
||||
background-color: #072348;
|
||||
padding: 85px 0 0 0;
|
||||
@@ -393,12 +365,14 @@ const handleClickSite = (type) => {
|
||||
}
|
||||
|
||||
.box-content {
|
||||
height: 1850px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 67px;
|
||||
padding-right: 70px;
|
||||
justify-content: space-between;
|
||||
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
.add-box {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
@@ -419,7 +393,7 @@ const handleClickSite = (type) => {
|
||||
|
||||
.site-box {
|
||||
margin-top: 50px;
|
||||
//margin-right: 122px;
|
||||
margin-right: 1.5%;
|
||||
padding: 40px 30px;
|
||||
width: 925px;
|
||||
height: 550px;
|
||||
@@ -427,7 +401,7 @@ const handleClickSite = (type) => {
|
||||
//box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&:nth-child(3) {
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@@ -474,13 +448,13 @@ const handleClickSite = (type) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-right:30px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-img {
|
||||
margin-top: 110px;
|
||||
margin-right: 70px;
|
||||
margin-right: 50px;
|
||||
width: 340px;
|
||||
height: 148px;
|
||||
background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
|
||||
@@ -492,7 +466,7 @@ const handleClickSite = (type) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 34px;
|
||||
font-size: 30px;
|
||||
color: #60DDDE;
|
||||
//margin-left: 175px;
|
||||
|
||||
@@ -538,10 +512,14 @@ const handleClickSite = (type) => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 36px;
|
||||
margin-right: 27px;
|
||||
font-size: 34px;
|
||||
margin-right: 17px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 37px;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -563,7 +541,7 @@ const handleClickSite = (type) => {
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
transform: translate(-50%, -50%);
|
||||
bottom: 50px;
|
||||
color: #60DDDE;
|
||||
font-size: 38px;
|
||||
|
||||
Reference in New Issue
Block a user