Merge branch 'dev' into trp_dev
This commit is contained in:
trp
35
src/api/site.js
Normal file
35
src/api/site.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
export const getSiteList = (params) => {
|
||||
return request({
|
||||
url: '/tunnel/site/screenlist',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
export const getSiteDetail = (siteId) => {
|
||||
return request({
|
||||
url: `/tunnel/site/${siteId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export const editSite = (data) => {
|
||||
return request({
|
||||
url: '/tunnel/site',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
export const addSite = (data) => {
|
||||
return request({
|
||||
url: '/tunnel/site',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
export const deleteSite = (siteIdList) => {
|
||||
return request({
|
||||
url: `/tunnel/site/${siteIdList}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
BIN
src/assets/images/site/sdgl_bjtq.png
Normal file
BIN
src/assets/images/site/sdgl_bjtq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/tunnel/device.png
Normal file
BIN
src/assets/images/tunnel/device.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/tunnel/sd_bj.png
Normal file
BIN
src/assets/images/tunnel/sd_bj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 944 KiB |
BIN
src/assets/images/tunnel/sdgl_sdt.png
Normal file
BIN
src/assets/images/tunnel/sdgl_sdt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
src/assets/images/tunnel/sp_icon_yc.png
Normal file
BIN
src/assets/images/tunnel/sp_icon_yc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 573 B |
BIN
src/assets/images/tunnel/white-state-icon.png
Normal file
BIN
src/assets/images/tunnel/white-state-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 832 B |
@@ -377,4 +377,45 @@ html, body, #app, .el-container, .el-aside, .el-main {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-overlay-message-box{
|
||||
.el-message-box{
|
||||
width: 500px;
|
||||
height: 230px;
|
||||
background: rgba(7,35,72,0.79);
|
||||
border-radius: 20px;
|
||||
border: 2px solid #0F82AF;
|
||||
.el-message-box__title{
|
||||
display: none;
|
||||
}
|
||||
.el-message-box__content{
|
||||
.el-icon{
|
||||
display: none;
|
||||
}
|
||||
.el-message-box__message{
|
||||
//width: 315px;
|
||||
height: 80px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #08B7B8;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
}
|
||||
.el-message-box__btns{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.el-button{
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
border: 2px solid #0F82AF;
|
||||
font-size: 28px;
|
||||
background-color: #072348;
|
||||
color: #08B7B8;
|
||||
}
|
||||
.el-button--primary{
|
||||
background: #08B7B8;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<div
|
||||
id="bad-gas-info"
|
||||
:style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }"
|
||||
@click="handleOpenChart"
|
||||
>
|
||||
<div class="title">有害气体</div>
|
||||
<div class="info-list">
|
||||
@@ -9,7 +10,6 @@
|
||||
v-for="item in badGasList"
|
||||
:key="item.equipmentId"
|
||||
:gasInfo="item"
|
||||
@click="handleOpenChart"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -37,7 +37,6 @@
|
||||
<div class="right-bottom-icon"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
>>>>>>> 077ff6a0744d396411f6b0bd5f409d42997965e9
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -138,11 +137,12 @@ const initChart = () => {
|
||||
legend: {
|
||||
left: 0,
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: 40,
|
||||
color: '#60DDDE',
|
||||
fontSize: 40
|
||||
},
|
||||
// itemWidth: 20,
|
||||
// itemHeight: 20
|
||||
itemWidth: 30,
|
||||
itemHeight: 30,
|
||||
icon: "circle",
|
||||
},
|
||||
//离容器四侧的距离
|
||||
grid: {
|
||||
@@ -156,6 +156,9 @@ const initChart = () => {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "axis",
|
||||
textStyle: {
|
||||
fontSize: 40
|
||||
}
|
||||
},
|
||||
//X轴
|
||||
xAxis: {
|
||||
@@ -296,6 +299,7 @@ const initChart = () => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#bad-gas-info {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
width: 824px;
|
||||
|
||||
@@ -180,9 +180,12 @@ export default class Demo {
|
||||
this.camera,
|
||||
this.renderer.domElement
|
||||
);
|
||||
this.orbitControls.object.position.set(-27.285, 16.356, -54.925);
|
||||
//限制轨道控制器的视角变化
|
||||
this.orbitControls.maxPolarAngle = Math.PI * (3 / 5);
|
||||
//初始化轨道控制器
|
||||
this.orbitControls.object.position.set(-29, 18, -50)
|
||||
this.orbitControls.maxPolarAngle = Math.PI * (3.17 / 6);
|
||||
this.orbitControls.minPolarAngle = Math.PI * (2 / 6);
|
||||
this.orbitControls.minDistance = 19;
|
||||
this.orbitControls.maxDistance = 87;
|
||||
// 监听控制器变化
|
||||
this.orbitControls.addEventListener("end", handleEndChange.bind(this));
|
||||
this.orbitControls.addEventListener("start", handleStartChange.bind(this));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }">
|
||||
<div class="content" @click="handleOpenChart">
|
||||
<div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
|
||||
<div class="content" >
|
||||
<div class="item">
|
||||
<div></div>
|
||||
<span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
|
||||
@@ -108,9 +108,12 @@ const initChart = () => {
|
||||
legend: {
|
||||
left: 0,
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
color: '#60DDDE',
|
||||
fontSize: 45
|
||||
}
|
||||
},
|
||||
itemWidth: 30,
|
||||
itemHeight:30,
|
||||
icon: "circle",
|
||||
},
|
||||
//离容器四侧的距离
|
||||
grid: {
|
||||
@@ -123,7 +126,10 @@ const initChart = () => {
|
||||
//提示框组件
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis'
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
fontSize: 40
|
||||
}
|
||||
},
|
||||
//X轴
|
||||
xAxis: {
|
||||
@@ -176,6 +182,7 @@ const getImageUrl = (name) => {
|
||||
padding: 0!important;
|
||||
}
|
||||
#used-ele {
|
||||
cursor: pointer;
|
||||
width: 830px;
|
||||
height: 90px;
|
||||
color: aliceblue;
|
||||
|
||||
@@ -115,7 +115,10 @@ const initChart = () => {
|
||||
//提示框组件
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis'
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
fontSize: 40
|
||||
}
|
||||
},
|
||||
//X轴
|
||||
xAxis: {
|
||||
|
||||
@@ -20,7 +20,6 @@ const btnList = ref([
|
||||
icon: 'sp_icon_zdgl.png',
|
||||
name: '站点管理'
|
||||
},
|
||||
|
||||
{
|
||||
icon: 'sp_icon_sdgl.png',
|
||||
name: '隧道管理'
|
||||
|
||||
@@ -40,6 +40,24 @@ const routes = [
|
||||
title: 'site',
|
||||
breadcrumb: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/tunnel/:siteId(\\d+)',
|
||||
name: 'tunnel',
|
||||
component: () => import('@/views/tunnel-manage/index.vue'),
|
||||
meta: {
|
||||
title: 'tunnel',
|
||||
breadcrumb: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/device',
|
||||
name: 'device',
|
||||
component: () => import('@/views/device-manage/index.vue'),
|
||||
meta: {
|
||||
title: 'device',
|
||||
breadcrumb: true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
51
src/views/device-manage/index.vue
Normal file
51
src/views/device-manage/index.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const router = useRouter()
|
||||
</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: 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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,150 +7,268 @@
|
||||
</div>
|
||||
<div class="tunnel-title"></div>
|
||||
<div class="all-del-btn">
|
||||
<div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon">
|
||||
添加
|
||||
</div>
|
||||
<div class="all-btn">
|
||||
全选
|
||||
</div>
|
||||
<div class="all-btn del-btn">
|
||||
<div class="all-btn del-btn" @click="handleMoreDelete">
|
||||
删除
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="site-box" v-for="item in siteList">
|
||||
<div class="site-box" v-for="item in siteList" :key="item.siteId">
|
||||
<div class="top">
|
||||
<span>站点名称：{{ item.siteName }}</span>
|
||||
<div @click.stop="handleClickSite"><span :class="{ clickColor: isClick }"></span></div>
|
||||
<el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
|
||||
</div>
|
||||
<div class="box-center">
|
||||
<div class="left-img"></div>
|
||||
<div class="right-tunnel">
|
||||
<div>隧道数量：{{ item.num }}条</div>
|
||||
<div>隧道数量：{{ item.info.tunnelNum }}条
|
||||
</div>
|
||||
<div>
|
||||
<div class="tunnel">
|
||||
<div>{{ item.sortTunnel }}</div>
|
||||
<div class="tunnel" v-if="showFirstTunnel">
|
||||
<div>{{ item.info.tunnelName }}</div>
|
||||
<div class="tunnel-icon"></div>
|
||||
<div>施工长度{{ item.constructionLength }}米</div>
|
||||
<div>实现长度{{ item.implementationLength }}公里</div>
|
||||
<div>施工长度{{ item.info.constructionLength }}米</div>
|
||||
<div>实现长度{{ item.info.implementationLength }}公里
|
||||
</div>
|
||||
</div>
|
||||
<div class="tunnel-add">
|
||||
<div class="tunnel-add" @click="goToAddTunnel(item.siteId)">
|
||||
<div class="add-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more">
|
||||
<div class="more" @click="router.push('/tunnel')" v-if="showFirstTunnel">
|
||||
更多
|
||||
<div class="icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-btn" @click="isVisited=true">
|
||||
<div class="edit-btn" @click="handleEdit(item.siteId)">
|
||||
<div class="edit-icon"></div>
|
||||
<div>站点编辑</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-box add-box" @click="isVisited=true">
|
||||
<div class="site-box add-box" v-if="showAddIcon" @click="handleAdd">
|
||||
<div class="add-icon"></div>
|
||||
<div style="cursor: pointer">添加站点</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="isVisited" width="958px">
|
||||
<el-dialog v-model="isVisited" width="1958px">
|
||||
<div class="siteId">
|
||||
<span>站点id：{{ siteId }}</span>
|
||||
<span>站点管理员id：{{ siteManageId }}</span>
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<el-form :model="form" :label-position="right" label-width="116px">
|
||||
<el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px">
|
||||
<el-form-item label="站点名称">
|
||||
<el-input v-model="form.siteName" placeholder="请输入站点名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="站点地址">
|
||||
<el-input v-model="form.address" placeholder="请输入站点地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="站点名称">
|
||||
<el-input v-model="form.name" placeholder="请输入站点名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="站点描述">
|
||||
<el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入站点信息"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注"/>
|
||||
<el-input v-model="form.describe" type="textarea" :autosize="{ minRows: 5, maxRows: 7 }"
|
||||
placeholder="请输入站点信息"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="isVisited=false">
|
||||
取消
|
||||
|
||||
<template #footer>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="isVisited=false">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn" @click="handleSubmit(formInstance)">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
<div class="sure-btn">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</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 v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
|
||||
:total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
|
||||
@current-change="handleCurrentChange"/>
|
||||
<span>尾页</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
|
||||
const router = useRouter()
|
||||
const siteList = ref([
|
||||
{
|
||||
siteName: '松江站',
|
||||
num: 1,
|
||||
sortTunnel: '一号隧道',
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
siteName: '松江站',
|
||||
num: 1,
|
||||
sortTunnel: '一号隧道',
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
siteName: '松江站',
|
||||
num: 1,
|
||||
sortTunnel: '一号隧道',
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
siteName: '松江站',
|
||||
num: 1,
|
||||
sortTunnel: '一号隧道',
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
siteName: '松江站',
|
||||
num: 1,
|
||||
sortTunnel: '一号隧道',
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
])
|
||||
const siteId = ref('iu78686')
|
||||
const siteManageId = ref('j98h0')
|
||||
const siteList = ref([])
|
||||
const siteIds = ref([])
|
||||
const siteNameList = ref([])
|
||||
const info = ref({
|
||||
tunnelNum: 0,
|
||||
tunnelName: '隧道',
|
||||
constructionLength: 0,
|
||||
implementationLength: 0
|
||||
})
|
||||
const title = ref('新增站点')
|
||||
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
|
||||
});
|
||||
const form = ref({
|
||||
address: '',
|
||||
name: '',
|
||||
desc: '',
|
||||
remark: ''
|
||||
siteName: '',
|
||||
describe: ''
|
||||
});
|
||||
const handleClickSite = () => {
|
||||
isClick.value = !isClick.value
|
||||
const formRules = ref({
|
||||
siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
|
||||
})
|
||||
const formInstance = ref()
|
||||
const getList = () => {
|
||||
getSiteList({
|
||||
...pageInfo
|
||||
}).then((res) => {
|
||||
total.value = res.data.total;
|
||||
showAddIcon.value = total.value !== 6;
|
||||
res.data.rows.map(item => {
|
||||
if (item.tunnelList === null || item.tunnelList === []) {
|
||||
showFirstTunnel.value = false
|
||||
}
|
||||
item.info = info.value
|
||||
item.checked = false
|
||||
})
|
||||
siteList.value = res.data.rows;
|
||||
});
|
||||
}
|
||||
getList()
|
||||
const handleClickSite = (type) => {
|
||||
if (type.checked) {
|
||||
siteIds.value.push(type.siteId)
|
||||
siteNameList.value.push(type.siteName)
|
||||
} else {
|
||||
siteIds.value.map((item, index) => {
|
||||
if (item === type.siteId) {
|
||||
siteIds.value.splice(index, 1)
|
||||
}
|
||||
})
|
||||
siteNameList.value.map((item, index) => {
|
||||
if (item === type.siteName) {
|
||||
siteNameList.value.splice(index, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const goToAddTunnel = (siteId) => {
|
||||
router.push('/tunnel/' + siteId)
|
||||
}
|
||||
//重置from表单
|
||||
const restFrom = () => {
|
||||
form.value = {
|
||||
address: '',
|
||||
siteName: '',
|
||||
describe: ''
|
||||
}
|
||||
}
|
||||
const handleEdit = (siteId) => {
|
||||
title.value = '编辑站点'
|
||||
restFrom()
|
||||
getSiteDetail(siteId).then((res) => {
|
||||
form.value = res.data;
|
||||
isVisited.value = true
|
||||
});
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
restFrom()
|
||||
title.value = '新增站点'
|
||||
isVisited.value = true
|
||||
}
|
||||
const handleSubmit = (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
if (title.value === '编辑站点') {
|
||||
editSite(form.value).then(() => {
|
||||
isVisited.value = false
|
||||
getList()
|
||||
});
|
||||
} else {
|
||||
addSite(form.value).then(() => {
|
||||
isVisited.value = false
|
||||
getList()
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleMoreDelete = () => {
|
||||
if (siteIds.value.length === 0) {
|
||||
ElMessage.warning('请先选择站点进行删除')
|
||||
} else {
|
||||
ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
customClass: 'delBox'
|
||||
}).then(() => {
|
||||
deleteSite(siteIds.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
siteIds.value = []
|
||||
siteNameList.value = []
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.pageNum = val
|
||||
await getList()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.siteId {
|
||||
font-size: 30px;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 48px;
|
||||
:deep(.el-checkbox__inner) {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
> span:first-child {
|
||||
margin-right: 70px;
|
||||
}
|
||||
:deep(.el-checkbox__input.is-checked .el-checkbox__inner ) {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: #05FEFF;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clickColor {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 6.5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: #05FEFF;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.siteId {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 0 60px 0;
|
||||
font-size: 50px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.btns {
|
||||
@@ -159,72 +277,40 @@ const handleClickSite = () => {
|
||||
margin-top: 80px;
|
||||
|
||||
.cancel-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
width: 190px;
|
||||
height: 60px;
|
||||
width: 220px;
|
||||
height: 80px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #08B7B8;
|
||||
line-height: 60px;
|
||||
padding-left: 67px;
|
||||
font-size: 28px;
|
||||
line-height: 80px;
|
||||
font-size: 38px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sure-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
width: 190px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
width: 220px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
background: #08B7B8;
|
||||
border-radius: 11px;
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
padding-left: 67px;
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
font-size: 26px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #FFFFFF;
|
||||
margin-right: 12px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 50px;
|
||||
|
||||
.el-input__wrapper {
|
||||
background-color: transparent;
|
||||
border: 1px solid #08B7B8;
|
||||
|
||||
.el-input__inner {
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-textarea__inner) {
|
||||
background-color: transparent;
|
||||
border: 1px solid #08B7B8;
|
||||
//min-height: 50px!important;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
border: 2px solid #05FEFF;
|
||||
background: #0D6578;
|
||||
border-radius: 20px;
|
||||
padding: 30px 40px;
|
||||
box-sizing: border-box;
|
||||
margin: 588px auto 0 auto;
|
||||
margin: 458px auto 0 auto;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
@@ -232,7 +318,43 @@ const handleClickSite = () => {
|
||||
}
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-textarea__inner) {
|
||||
background-color: transparent;
|
||||
border: 1px solid #08B7B8;
|
||||
color: #fff;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
|
||||
.site-bgc {
|
||||
background-color: #072348;
|
||||
padding: 85px 0 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -247,19 +369,19 @@ const handleClickSite = () => {
|
||||
margin: 0 0 0 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 168px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
width: 178px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
font-size: 28px;
|
||||
font-size: 38px;
|
||||
color: #FFFFFF;
|
||||
|
||||
.back-icon {
|
||||
margin-right: 20px;
|
||||
margin-left: 33px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-left: 23px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||||
}
|
||||
}
|
||||
@@ -276,14 +398,14 @@ const handleClickSite = () => {
|
||||
|
||||
.all-btn {
|
||||
cursor: pointer;
|
||||
padding-left: 56px;
|
||||
width: 168px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding-left: 53px;
|
||||
width: 178px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
font-size: 38px;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 40px;
|
||||
@@ -296,15 +418,15 @@ const handleClickSite = () => {
|
||||
.box-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
justify-content: space-between;
|
||||
padding-left: 70px;
|
||||
padding-right: 70px;
|
||||
//justify-content: space-between;
|
||||
|
||||
.add-box {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
font-size: 32px;
|
||||
font-size: 38px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -320,43 +442,33 @@ const handleClickSite = () => {
|
||||
|
||||
.site-box {
|
||||
margin-top: 122px;
|
||||
//margin-right: 122px;
|
||||
margin-right: 60px;
|
||||
padding: 40px 50px;
|
||||
width: 1158px;
|
||||
height: 718px;
|
||||
width: 1250px;
|
||||
height: 750px;
|
||||
background-image: url('@/assets/images/site/zdgl_bj.png');
|
||||
//box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&:nth-child(3) {
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32px;
|
||||
font-size: 45px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 42px;
|
||||
|
||||
> div:last-child {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -366,8 +478,8 @@ const handleClickSite = () => {
|
||||
.left-img {
|
||||
margin-top: 50px;
|
||||
margin-right: 60px;
|
||||
width: 480px;
|
||||
height: 350px;
|
||||
width: 500px;
|
||||
height: 370px;
|
||||
background-image: url('@/assets/images/site/zdgl_zd.png');
|
||||
}
|
||||
|
||||
@@ -375,7 +487,7 @@ const handleClickSite = () => {
|
||||
position: relative;
|
||||
|
||||
> div:first-child {
|
||||
font-size: 32px;
|
||||
font-size: 38px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #FFFFFF;
|
||||
line-height: 42px;
|
||||
@@ -386,21 +498,19 @@ const handleClickSite = () => {
|
||||
margin-top: 29px;
|
||||
|
||||
.tunnel {
|
||||
width: 256px;
|
||||
height: 310px;
|
||||
margin-right: 20px;
|
||||
width: 280px;
|
||||
height: 350px;
|
||||
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;
|
||||
font-size: 32px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@@ -409,21 +519,20 @@ const handleClickSite = () => {
|
||||
}
|
||||
|
||||
> div:nth-child(3), > div:nth-child(4) {
|
||||
font-size: 26px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.tunnel-icon {
|
||||
width: 62px;
|
||||
height: 64px;
|
||||
width: 82px;
|
||||
height: 84px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_sd.png');
|
||||
margin: 30px 0 40px 0;
|
||||
margin: 30px 0 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tunnel-add {
|
||||
margin-left: 20px;
|
||||
width: 256px;
|
||||
height: 310px;
|
||||
width: 280px;
|
||||
height: 350px;
|
||||
background: #1891A3;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
@@ -432,8 +541,8 @@ const handleClickSite = () => {
|
||||
|
||||
.add-icon {
|
||||
cursor: pointer;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
width: 122px;
|
||||
height: 122px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
|
||||
}
|
||||
}
|
||||
@@ -448,13 +557,13 @@ const handleClickSite = () => {
|
||||
right: 0;
|
||||
font-weight: bold;
|
||||
color: #35C5CC;
|
||||
font-size: 28px;
|
||||
font-size: 38px;
|
||||
|
||||
.icon {
|
||||
margin-left: 19px;
|
||||
transform: rotate(180deg);
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||||
}
|
||||
}
|
||||
@@ -462,47 +571,48 @@ const handleClickSite = () => {
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
width: 174px;
|
||||
cursor: pointer;
|
||||
margin-top: 147px;
|
||||
margin-top: 117px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
font-size: 40px;
|
||||
color: #60DDDE;
|
||||
line-height: 42px;
|
||||
margin-left: 492px;
|
||||
|
||||
.edit-icon {
|
||||
width: 30px;
|
||||
height: 32px;
|
||||
width: 42px;
|
||||
height: 44px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_bj.png');
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 120px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
bottom: 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #60DDDE;
|
||||
font-size: 32px;
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
|
||||
> span:first-child {
|
||||
cursor: pointer;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
cursor: pointer;
|
||||
margin-left: 71px;
|
||||
}
|
||||
|
||||
:deep(.btn-prev) {
|
||||
background-color: transparent;
|
||||
font-size: 32px;
|
||||
font-size: 38px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
@@ -511,7 +621,7 @@ const handleClickSite = () => {
|
||||
|
||||
:deep(.btn-next) {
|
||||
background-color: transparent;
|
||||
font-size: 32px;
|
||||
font-size: 38px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
@@ -519,12 +629,12 @@ const handleClickSite = () => {
|
||||
}
|
||||
|
||||
:deep(.el-pager li.is-active ) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: #60DDDE;
|
||||
border-radius: 50%;
|
||||
color: #071F40;
|
||||
font-size: 32px;
|
||||
font-size: 38px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -534,12 +644,12 @@ const handleClickSite = () => {
|
||||
}
|
||||
|
||||
:deep(.el-pager li:not(.is-active) ) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border: 1px solid #60DDDE;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
font-size: 32px;
|
||||
font-size: 38px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
|
||||
599
src/views/tunnel-manage/index.vue
Normal file
599
src/views/tunnel-manage/index.vue
Normal file
@@ -0,0 +1,599 @@
|
||||
<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-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 siteId = reactive(router.currentRoute.value.params.siteId)
|
||||
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: 11
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: '无'
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 11
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: '无'
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 11
|
||||
},
|
||||
{
|
||||
icon: 'white-state-icon.png',
|
||||
name: '风机',
|
||||
num: 11
|
||||
},
|
||||
])
|
||||
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 {
|
||||
background-color: #072348;
|
||||
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: 67px;
|
||||
padding-right: 70px;
|
||||
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 30px;
|
||||
width: 925px;
|
||||
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:30px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-img {
|
||||
margin-top: 110px;
|
||||
margin-right: 70px;
|
||||
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: 34px;
|
||||
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: 27px;
|
||||
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>
|
||||
@@ -99,10 +99,11 @@ import { onMounted } from "vue";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { useAuthStore } from "@/store/userstore.js";
|
||||
import { getLargeScreen } from "@/api/largeScreen";
|
||||
import {ElMessageBox} from "element-plus";
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const router = useRouter();
|
||||
const selectIndex = ref(1);
|
||||
const selectIndex = ref(-1);
|
||||
const showFan = ref(false);
|
||||
const drawerLeft = ref(true);
|
||||
const drawerRight = ref(true);
|
||||
@@ -167,6 +168,8 @@ const manageSelect = (index) => {
|
||||
console.log("首页点击-", index);
|
||||
if (index === 0) {
|
||||
router.push("/site");
|
||||
}else if (index === 1){
|
||||
router.push("/tunnel/1");
|
||||
}
|
||||
};
|
||||
const closeLeft = () => {
|
||||
@@ -176,8 +179,14 @@ const closeRight = () => {
|
||||
drawerRight.value = !drawerRight.value;
|
||||
};
|
||||
const handleLogout = () => {
|
||||
authStore.userLogout();
|
||||
router.push("/login");
|
||||
ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
authStore.userLogout();
|
||||
router.push("/login");
|
||||
})
|
||||
};
|
||||
const previousBtn = () => {
|
||||
tunnelBtn.value.prev();
|
||||
@@ -235,6 +244,7 @@ initWebSocket();
|
||||
#main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #072348;
|
||||
#tunnel-box {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user