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

邓洁 : 设备管理雏形

Browse Source
This commit is contained in:
邓洁
2023-12-16 16:33:54 +08:00
parent e8ac21d5be
commit a45afb9e6f
7 changed files with 141 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/device/sdgl_xz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

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

@@ -420,24 +420,20 @@ html, body, #app, .el-container, .el-aside, .el-main {
}
}
//el-select 下拉框样式
.dialog-dropdown{
}
.el-select__popper {
margin-top: -12px!important;
background: #072247!important;
border: 1px solid #0F82AF!important;
}
.el-popper {
max-width: 204px!important;
max-width: 202px!important;
box-sizing: border-box;
}
.el-popper__arrow::before{
display: none;
}
.el-select-dropdown{
width: 202px!important;
width: 200px!important;
}
.el-select-dropdown__item{
color: #fff!important;
@@ -460,3 +456,28 @@ html, body, #app, .el-container, .el-aside, .el-main {
}
}
}
//input number 右侧加减隐藏
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
//checkbox
.el-checkbox__inner {
width: 40px !important;
height: 40px !important;
border-radius: 25px!important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
width: 25px;
height: 25px;
background-color: #05FEFF!important;
}
.el-checkbox__input.is-checked .el-checkbox__inner::after {
display: none;
}

6
src/components/content/tunnelScene/editEquComp/editDialog.vue
View File

@@ -17,7 +17,6 @@
:fit-input-width="true"
filterable
clearable
popper-class="dialog-dropdown"
placeholder="请选择设备类型"
>
<el-option
@@ -35,7 +34,6 @@
:fit-input-width="true"
filterable
clearable
popper-class="dialog-dropdown"
placeholder="请选择设备类型"
>
<el-option
@@ -238,12 +236,12 @@ const equipment = {
}
}
:deep(.el-select) {
//width: 284px;
width: 284px;
//height: 51px;
border: transparent;
}
:deep(.el-input--suffix) {
//width: 284px;
width: 284px;
height: 51px;
background: rgba(7, 35, 72, 0.79);
border: 2px solid #0f82af;

2
src/router/index.js
View File

@@ -51,7 +51,7 @@ const routes = [
}
},
{
path: '/device',
path: '/device/:tunnelId(\\d+)',
name: 'device',
component: () => import('@/views/device-manage/index.vue'),
meta: {

76
src/views/device-manage/index.vue
View File

@@ -1,12 +1,40 @@
<template>
<div class="tunnel-bgc">
<div class="box-top">
<div class="back-tunnel" @click="router.push('/')">
<div class="back-tunnel" @click="router.back(-1)">
<div class="back-icon"></div>
<span>返回</span>
</div>
<div class="tunnel-name">
一号隧道
</div>
<div class="tunnel-title"></div>
</div>
<div class="device-content">
<div class="device-box">
<div class="box-left">
<!-- <div>风机</div>-->
<!-- <div>风压</div>-->
<!-- <div>其他传感器</div>-->
<el-menu
default-active="1"
>
<el-menu-item index="1">
<span>风机</span>
</el-menu-item>
<el-menu-item index="2">
<span>风压</span>
</el-menu-item>
<el-menu-item index="3">
<span>其他传感器</span>
</el-menu-item>
</el-menu>
</div>
<div class="box-right">
</div>
</div>
</div>
</div>
</template>
@@ -15,6 +43,7 @@ const router = useRouter()
</script>
<style scoped lang="scss">
.tunnel-bgc {
padding: 85px 0 0 0;
width: 100%;
@@ -23,7 +52,16 @@ const router = useRouter()
.box-top {
display: flex;
justify-content: space-between;
justify-content: flex-start;
.tunnel-name {
margin-left: 120px;
height: 61px;
font-size: 46px;
font-weight: bold;
color: #FFFFFF;
line-height: 61px;
}
.back-tunnel {
cursor: pointer;
@@ -47,5 +85,37 @@ const router = useRouter()
}
}
}
.device-content {
display: flex;
justify-content: center;
padding-top: 246px;
.device-box {
display: flex;
width: 2194px;
height: 1321px;
background: #064B66;
border-radius: 20px;
border: 2px solid #05FEFF;
box-sizing: border-box;
.box-left {
width: 300px;
height: 1318px;
background: #0D5A7A;
border-radius: 20px 0px 0px 20px;
:deep(.el-menu){
border-right: none;
margin-top: 261px;
background-color: #0D5A7A;
}
}
.box-right {
flex: 1;
}
}
}
}
</style>
</style>

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

@@ -7,7 +7,7 @@
</div>
<div class="tunnel-title"></div>
<div class="all-del-btn">
<div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon">
<div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
添加
</div>
<div class="all-btn">
@@ -98,7 +98,6 @@
<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([])
@@ -237,22 +236,6 @@ const handleCurrentChange = async (val) => {
</script>
<style scoped lang="scss">
:deep(.el-checkbox__inner) {
width: 40px !important;
height: 40px !important;
border-radius: 25px;
}
: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;
@@ -418,9 +401,9 @@ const handleCurrentChange = async (val) => {
.box-content {
display: flex;
flex-wrap: wrap;
padding-left: 70px;
padding-right: 70px;
//justify-content: space-between;
padding-left: 100px;
padding-right: 100px;
justify-content: space-between;
.add-box {
cursor: pointer;
@@ -442,7 +425,7 @@ const handleCurrentChange = async (val) => {
.site-box {
margin-top: 122px;
margin-right: 60px;
//margin-right: 60px;
padding: 40px 50px;
width: 1250px;
height: 750px;

38
src/views/tunnel-manage/index.vue
View File

@@ -20,7 +20,7 @@
<div class="top">
<span>{{ item.tunnelName }}</span>
<span>施工长度500米 隧道长度10公里</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>
@@ -63,6 +63,15 @@
<el-form-item label="隧道名称">
<el-input v-model="form.name" placeholder="请输入隧道名称"/>
</el-form-item>
<el-form-item label="序列号">
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
</el-form-item>
<el-form-item label="隧道长度">
<el-input type="number" v-model="form.tunnelLength" placeholder="请输入隧道长度"/>
</el-form-item>
<el-form-item label="隧道备注">
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
</el-form-item>
</el-form>
<div class="btns">
<div class="cancel-btn" @click="isVisited=false">
@@ -198,18 +207,20 @@ const iconsList = ref([
])
const title = ref('新增隧道')
const isVisited = ref(false);
const tunnelIds = ref([])
const tunnelNameList = ref([])
const form = ref({
address: '',
name: '',
desc: '',
remark: ''
serialNumber: '',
tunnelLength: '',
remarks: ''
});
const handleEdit = () => {
title.value = '编辑隧道'
isVisited.value = true
}
const handleEditDevice = () => {
router.push('/device')
router.push('/device/'+1)
}
const handleAdd = () => {
@@ -219,6 +230,23 @@ const handleAdd = () => {
const getImageUrl = (name) => {
return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
}
const handleClickSite = (type) => {
if (type.checked) {
// tunnelIds.value.push(type.siteId)
// tunnelNameList.value.push(type.siteName)
} else {
// tunnelIds.value.map((item, index) => {
// if (item === type.siteId) {
// tunnelIds.value.splice(index, 1)
// }
// })
// tunnelNameList.value.map((item, index) => {
// if (item === type.siteName) {
// tunnelNameList.value.splice(index, 1)
// }
// })
}
}
</script>
<style scoped lang="scss">