邓洁 : 隧道管理界面
This commit is contained in:
dengj
597
src/views/tunnel-manage/index.vue
Normal file
597
src/views/tunnel-manage/index.vue
Normal file
@@ -0,0 +1,597 @@
|
||||
<template>
|
||||
<div class="tunnel-bgc">
|
||||
<div class="box-top">
|
||||
<div class="back-tunnel" @click="router.push('/')">
|
||||
<div class="back-icon"></div>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="tunnel-title"></div>
|
||||
<div class="all-del-btn">
|
||||
<div class="all-btn">
|
||||
全选
|
||||
</div>
|
||||
<div class="all-btn del-btn">
|
||||
删除
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="site-box" v-for="item in siteList" :key="item.tunnelId">
|
||||
<div class="top">
|
||||
<span>{{ item.tunnelName }}</span>
|
||||
<span>施工长度500米 隧道长度10公里</span>
|
||||
<div @click.stop="handleClickSite"><span :class="{ clickColor: isClick }"></span></div>
|
||||
</div>
|
||||
<div class="box-center">
|
||||
<div>
|
||||
<div class="left-img"></div>
|
||||
<div>
|
||||
<div class="edit-btn" @click="handleEdit">
|
||||
<div class="edit-icon"></div>
|
||||
<div>隧道编辑</div>
|
||||
</div>
|
||||
<div class="edit-btn" @click="handleEditDevice">
|
||||
<div class="edit-icon-two"></div>
|
||||
<div>设备管理</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tunnel-right">
|
||||
<div>
|
||||
<div class="fan-icon"></div>
|
||||
<span>风机异常</span>
|
||||
</div>
|
||||
<div class="icons-block">
|
||||
<div v-for="item in iconsList" :key="item.icon" class="icon-text">
|
||||
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.icon)+')' }" class="icon"></div>
|
||||
<span>{{ item.name }}：{{ item.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-box add-box" @click="handleAdd">
|
||||
<div class="add-icon"></div>
|
||||
<div style="cursor: pointer">添加隧道</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="isVisited" width="1958px">
|
||||
<div class="siteId">
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<el-form :model="form" :label-position="right" label-width="168px">
|
||||
<el-form-item label="隧道名称">
|
||||
<el-input v-model="form.name" placeholder="请输入隧道名称"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="isVisited=false">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div class="pagination">
|
||||
<span>首页</span>
|
||||
<el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
|
||||
<span>尾页</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const router = useRouter()
|
||||
const siteList = ref([
|
||||
{
|
||||
tunnelName: '一号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
tunnelName: '二号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
tunnelName: '三号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
tunnelName: '三号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
tunnelName: '三号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
tunnelName: '三号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
tunnelName: '三号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
tunnelName: '三号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
tunnelName: '三号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
tunnelName: '三号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
tunnelName: '三号隧道',
|
||||
num: 1,
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
const iconsList = ref([
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: '无'
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: '无'
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 2
|
||||
},
|
||||
])
|
||||
const title = ref('新增隧道')
|
||||
const isVisited = ref(false);
|
||||
const form = ref({
|
||||
address: '',
|
||||
name: '',
|
||||
desc: '',
|
||||
remark: ''
|
||||
});
|
||||
const handleEdit = () => {
|
||||
title.value = '编辑隧道'
|
||||
isVisited.value = true
|
||||
}
|
||||
const handleEditDevice = () => {
|
||||
router.push('/device')
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
title.value = '新增隧道'
|
||||
isVisited.value = true
|
||||
}
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dialog) {
|
||||
border: 2px solid #05FEFF;
|
||||
background: #0D6578;
|
||||
border-radius: 20px;
|
||||
padding: 30px 40px;
|
||||
box-sizing: border-box;
|
||||
margin: 458px auto 0 auto;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
font-size: 38px;
|
||||
font-family: MicrosoftYaHei;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.siteId {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 0 60px 0;
|
||||
font-size: 50px;
|
||||
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 {
|
||||
padding: 85px 0 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/tunnel/sd_bj.png');
|
||||
|
||||
.box-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.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');
|
||||
}
|
||||
}
|
||||
|
||||
.all-del-btn {
|
||||
display: flex;
|
||||
|
||||
.del-btn {
|
||||
width: 168px;
|
||||
height: 60px;
|
||||
background: #08B7B8;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.all-btn {
|
||||
cursor: pointer;
|
||||
padding-left: 53px;
|
||||
width: 178px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #FFFFFF;
|
||||
font-size: 38px;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 40px;
|
||||
margin-right: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
justify-content: space-between;
|
||||
|
||||
.add-box {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
font-size: 38px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.add-icon {
|
||||
margin-top: 110px;
|
||||
margin-bottom: 87px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
|
||||
}
|
||||
}
|
||||
|
||||
.site-box {
|
||||
margin-top: 50px;
|
||||
//margin-right: 122px;
|
||||
padding: 40px 50px;
|
||||
width: 981px;
|
||||
height: 550px;
|
||||
background-image: url('@/assets/images/site/zdgl_bj.png');
|
||||
//box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&:nth-child(3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 45px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 42px;
|
||||
|
||||
> span:nth-child(2) {
|
||||
font-size: 38px;
|
||||
color: #5CE4F2;
|
||||
}
|
||||
|
||||
> div:last-child {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid #05FEFF;
|
||||
border-radius: 25px;
|
||||
position: relative;
|
||||
|
||||
.clickColor {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 6.5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: #05FEFF;
|
||||
border-radius: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-center {
|
||||
display: flex;
|
||||
|
||||
//flex-direction: column;
|
||||
> div:first-child {
|
||||
|
||||
> div:nth-child(2) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-img {
|
||||
margin-top: 110px;
|
||||
margin-right: 100px;
|
||||
width: 340px;
|
||||
height: 148px;
|
||||
background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
cursor: pointer;
|
||||
margin-top: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 36px;
|
||||
color: #60DDDE;
|
||||
//margin-left: 175px;
|
||||
|
||||
.edit-icon {
|
||||
width: 32px;
|
||||
height: 34px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_bj.png');
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.edit-icon-two {
|
||||
width: 32px;
|
||||
height: 34px;
|
||||
background-image: url('@/assets/images/tunnel/device.png');
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tunnel-right {
|
||||
padding-top: 40px;
|
||||
|
||||
> div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 36px;
|
||||
color: #FB3838;
|
||||
|
||||
.fan-icon {
|
||||
margin-right: 10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url('@/assets/images/tunnel/sp_icon_yc.png');
|
||||
}
|
||||
}
|
||||
|
||||
.icons-block {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.icon-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 36px;
|
||||
margin-right: 62px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
bottom: 50px;
|
||||
color: #60DDDE;
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
|
||||
> span:first-child {
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
margin-left: 71px;
|
||||
}
|
||||
|
||||
:deep(.btn-prev) {
|
||||
background-color: transparent;
|
||||
font-size: 38px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
:deep(.btn-next) {
|
||||
background-color: transparent;
|
||||
font-size: 38px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
:deep(.el-pager li.is-active ) {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: #60DDDE;
|
||||
border-radius: 50%;
|
||||
color: #071F40;
|
||||
font-size: 38px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(.el-pager li) {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
:deep(.el-pager li:not(.is-active) ) {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border: 1px solid #60DDDE;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
font-size: 38px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user