odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'dev' (#87) from dev into master

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/87
This commit is contained in:
odjbin
2023-12-12 01:54:12 +00:00
parent 54a4b0f6f7 0cc53c1a61
commit a0820989fc
9 changed files with 370 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.drone.yml
View File

@@ -16,7 +16,7 @@ steps:
- export NODE_MODULES_PATH=`pwd`/node_modules
- npm config set registry https://registry.npm.taobao.org
- set NODE_OPTIONS=--openssl-legacy-provider
- npm install
# - npm install
- npm run build
- echo $NODE_MODULES_PATH
- cp -r dist /app/build/$DRONE_REPO_NAME

BIN
src/assets/images/site/zdgl_bj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/site/zdgl_icon_bj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 B

BIN
src/assets/images/site/zdgl_icon_fh.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 626 B

BIN
src/assets/images/site/zdgl_icon_tjz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
src/assets/images/site/zdgl_zd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

22
src/assets/styles/index.scss
View File

@@ -16,7 +16,16 @@ a {
html, body, #app, .el-container, .el-aside, .el-main {
height: 100%;
}
.tunnel-title {
width: 2330px;
height: 156px;
z-index: 2;
position: absolute;
top: 0;
left: 50%;
margin-left: -1165px;
background-image: url('../images/topAndDown/sp_tb.png');
}
.box-top {
.manage-btn {
display: flex;
@@ -49,17 +58,6 @@ html, body, #app, .el-container, .el-aside, .el-main {
}
}
.tunnel-title {
width: 2330px;
height: 156px;
z-index: 2;
position: absolute;
top: 0;
left: 50%;
margin-left: -1165px;
background-image: url('../images/topAndDown/sp_tb.png');
}
.top-right {
z-index: 2;
position: absolute;

9
src/components/content/badGasInfo/childComps/GasInfoItem.vue
View File

@@ -135,13 +135,14 @@ function setPoint() {
.point::after {
content: "";
display: block;
height: 22px;
width: 4px;
background: white;
height: 20px;
width: 2px;
background: #7EDFEC;
position: absolute;
bottom: 0px;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 10px #7EDFEC;
}
.info {
width: 200px;

359
src/views/site/index.vue
View File

@@ -1,15 +1,364 @@
<template>
<div class="site-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">
删除
</div>
</div>
</div>
<div class="box-content">
<div class="site-box" v-for="item in siteList">
<div class="top">
<span>站点名称：{{ item.siteName }}</span>
<div @click.stop="handleClickSite"><span :class="{ clickColor: isClick }"></span></div>
</div>
<div class="box-center">
<div class="left-img"></div>
<div class="right-tunnel">
<div>隧道数量：{{ item.num }}条</div>
<div>
<div class="tunnel">
<div>{{ item.sortTunnel }}</div>
<div class="tunnel-icon"></div>
<div>施工长度{{ item.constructionLength }}米</div>
<div>实现长度{{ item.implementationLength }}公里</div>
</div>
<div class="tunnel-add">
<div class="add-icon"></div>
</div>
</div>
<div class="more">
更多
<div class="icon"></div>
</div>
</div>
</div>
<div class="edit-btn">
<div class="edit-icon"></div>
<div @click="isVisited=true">站点编辑</div>
</div>
</div>
<div class="site-box add-box">
<div class="add-icon"></div>
<div style="cursor: pointer">添加站点</div>
</div>
</div>
<el-dialog v-model="isVisited" width="958px">
<div class="siteId">
<span>站点id：iu78686</span>
<span>站点管理员id：j98h0</span>
</div>
<el-form :model="form">
<el-form-item label="站点地址">
<el-input v-model="form.address"/>
</el-form-item>
<el-form-item label="站点名称">
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item label="站点 描述">
<el-input v-model="form.desc" type="textarea"/>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark"/>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script setup>
const router = useRouter()
const siteList = ref([
{
siteName: '松江站',
num: 1,
sortTunnel: '一号隧道',
constructionLength: 500,
implementationLength: 10
}
])
const isClick = ref(false);
const isVisited = ref(false);
const form = ref({
address: '',
name: '',
desc: '',
remark: ''
});
const handleClickSite = () => {
isClick.value = !isClick.value
}
</script>
<style scoped lang="scss">
.site-bgc{
width: 100%;
height:100%;
background-image: url('@/assets/images/site/zdgl_dbj.png');
.siteId {
font-size: 30px;
color: #FFFFFF;
> span:first-child {
margin-right: 70px;
}
}
</style>
:deep(.el-dialog) {
border: 2px solid #05FEFF;
background: #0D6578;
border-radius: 20px;
padding: 50px 60px;
box-sizing: border-box;
.el-dialog__header {
padding: 0;
display: none;
}
}
.site-bgc {
padding-top: 85px;
width: 100%;
height: 100%;
background-image: url('@/assets/images/site/zdgl_dbj.png');
.box-top {
display: flex;
justify-content: space-between;
.back-tunnel {
cursor: pointer;
margin: 0 0 0 70px;
display: flex;
align-items: center;
width: 168px;
height: 60px;
line-height: 60px;
border-radius: 11px;
border: 2px solid #08B7B8;
font-size: 28px;
color: #FFFFFF;
.back-icon {
margin-right: 20px;
margin-left: 33px;
width: 26px;
height: 26px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
}
}
.all-del-btn {
display: flex;
.all-btn {
cursor: pointer;
padding-left: 56px;
width: 168px;
height: 60px;
line-height: 60px;
border-radius: 11px;
border: 2px solid #08B7B8;
color: #FFFFFF;
font-size: 28px;
&:last-child {
margin-left: 40px;
margin-right: 70px;
}
}
}
}
.box-content {
display: flex;
margin-top: 142px;
padding-left: 67px;
.add-box {
font-weight: bold;
color: #60DDDE;
font-size: 32px;
display: flex;
flex-direction: column;
//justify-content: center;
align-items: center;
.add-icon {
cursor: pointer;
margin-top: 160px;
margin-bottom: 107px;
width: 320px;
height: 320px;
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
}
}
.site-box {
margin-right: 119px;
padding: 31px 43px;
width: 1158px;
height: 718px;
background-image: url('@/assets/images/site/zdgl_bj.png');
box-sizing: border-box;
position: relative;
.top {
display: flex;
justify-content: space-between;
font-size: 32px;
font-weight: bold;
color: #FFFFFF;
line-height: 42px;
> div:last-child {
cursor: pointer;
width: 30px;
height: 30px;
border: 2px solid #05FEFF;
border-radius: 25px;
position: relative;
.clickColor {
position: absolute;
top: 5.5px;
left: 5.5px;
width: 16px;
height: 16px;
background-color: #05FEFF;
border-radius: 25px;
}
}
}
.box-center {
display: flex;
.left-img {
margin-top: 50px;
margin-right: 60px;
width: 480px;
height: 350px;
background-image: url('@/assets/images/site/zdgl_zd.png');
}
.right-tunnel {
position: relative;
> div:first-child {
font-size: 32px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
line-height: 42px;
}
> div:nth-child(2) {
display: flex;
margin-top: 29px;
.tunnel {
width: 256px;
height: 310px;
background: #3FBED1;
border-radius: 16px;
display: flex;
flex-direction: column;
//justify-content: center;
align-items: center;
color: #FFFFFF;
> div:first-child {
width: 112px;
height: 37px;
font-size: 28px;
line-height: 37px;
margin-top: 20px;
}
> div:nth-child(3) {
margin-bottom: 18px;
}
> div:nth-child(3), > div:nth-child(4) {
font-size: 26px;
}
.tunnel-icon {
width: 62px;
height: 64px;
background: #FFFFFF;
margin: 30px 0 40px 0;
}
}
.tunnel-add {
margin-left: 20px;
width: 256px;
height: 310px;
background: #1891A3;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
.add-icon {
cursor: pointer;
width: 112px;
height: 112px;
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
}
}
}
.more {
margin-top: 20px;
cursor: pointer;
display: flex;
align-items: center;
position: absolute;
right: 0;
font-weight: bold;
color: #35C5CC;
font-size: 28px;
.icon {
margin-left: 19px;
transform: rotate(180deg);
width: 26px;
height: 26px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
}
}
}
}
.edit-btn {
cursor: pointer;
margin-top: 147px;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
color: #60DDDE;
line-height: 42px;
.edit-icon {
width: 30px;
height: 32px;
background-image: url('@/assets/images/site/zdgl_icon_bj.png');
margin-right: 16px;
}
}
}
}
}
</style>