变电站结构和管网结构

This commit is contained in:
hongchao 2025-01-13 17:48:03 +08:00
parent a91edd46a1
commit 15596f77f1
4 changed files with 1042 additions and 9 deletions

View File

@ -0,0 +1,79 @@
import request from '@/utils/request'
// 获取变电站结构列表
export function querySubsStructureListApi(query) {
return request({
url: '/base/screen/subsInfo/list',
method: 'get',
params: query
})
}
// 新增结构数据
export function addSubs(data) {
return request({
url: '/base/screen/subsInfo/addSubs',
method: 'post',
data: data
})
}
// 编辑结构数据
export function editSubs(data) {
return request({
url: '/base/screen/subsInfo/editSubs',
method: 'post',
data: data
})
}
// 删除结构数据
export function deleteSubs(data) {
return request({
url: '/base/screen/subsInfo/deleteById',
method: 'post',
data: data
})
}
// 获取变电站管网结构列表
export function querySubsPipeListApi(query) {
return request({
url: '/base/screen/subsInfo/pipeList',
method: 'get',
params: query
})
}

View File

@ -0,0 +1,355 @@
<template>
<div class="hole-page">
<div class="tower-detect">
<div class="inner-tit" style="display: flex; justify-content: space-between; align-items: center;">
<div>
<img src="../../assets/img/lef-badge.png" alt="">
变电站管网结构
</div>
</div>
<el-form
style="width: 100%;"
:model="queryParams"
ref="queryFormRef"
size="small"
:inline="true"
label-width="110px"
>
<el-form-item
label="监测设备名称"
prop="name"
>
<el-input
v-model="queryParams.name"
placeholder="请输入监测设备名称"
clearable maxlength="20"
style="width: 200px;"
/>
</el-form-item>
<el-form-item
label="监测时间"
prop="time"
>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="background-color: #ECF3FE;">
</el-date-picker>
</el-form-item>
<el-button
style="margin-top: 3px"
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button>
</el-form>
<el-table
:data="tableList"
stripe
style="width: 100%"
>
<el-table-column
label="序号"
align="center"
width="80"
type="index"
>
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="监测设备名称"
align="center"
>
</el-table-column>
<el-table-column
prop="time"
label="监测时间"
align="center"
>
</el-table-column>
<el-table-column
prop="voltage"
label="电压"
align="center"
>
</el-table-column>
<el-table-column
prop="elecCurrent"
label="电流"
align="center"
>
</el-table-column>
<el-table-column
prop="power"
label="功率"
align="center"
>
</el-table-column>
</el-table>
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getTableList"
style="background-color: #f3f7ff;"
/>
</div>
</div>
</template>
<script>
import { commonMixin } from '@/views/mixins/common'
import {querySubsPipeListApi} from '@/api/substation/subsInfo'
export default {
mixins: [ commonMixin ],
props: {
sendMsg: {
type: Object,
default: null
}
},
name: 'subsPipeDetect',
data() {
return {
sendId: undefined,
title: '',
queryParams: {
name: '',
pageNum: 1,
pageSize: 10,
startTime: '',
endTime: '',
},
dateRange: [],
tableList: [],
total: 0,
}
},
computed: {},
created() {},
mounted() {
this.sendId = this.sendMsg.projectId
this.getList(this.sendMsg.projectId)
},
methods: {
//
async getList(proId) {
let res = await querySubsPipeListApi({
proId,
})
this.tableList = res.rows
this.total = res.total
},
async getTableList() {
this.queryParams.proId = this.sendMsg.projectId
if (this.dateRange!=null&&this.dateRange.length>0) {
const dateStart = new Date(this.dateRange[0])
const dateEnd = new Date(this.dateRange[1])
this.queryParams.startTime = dateStart.toLocaleDateString('en-CA')
this.queryParams.endTime = dateEnd.toLocaleDateString('en-CA')
} else {
this.queryParams.startTime = null
this.queryParams.endTime = null
}
let res = await querySubsPipeListApi(this.queryParams)
this.tableList = res.rows
this.total = res.total
},
//
handleQuery() {
this.getTableList()
},
}
}
</script>
<style lang='less' scoped>
/deep/ .el-collapse-item__header {
background-color: transparent !important;
box-sizing: border-box;
padding-left: 15px;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #BAC4CD;
}
/deep/ .el-collapse-item__content {
padding-bottom: 0;
font-size: 16px;
}
/deep/ .el-collapse-item__wrap {
background-color: transparent;
}
@font-face {
font-family: 'YouShe';
src: url("../../assets/iconfont/YouSheBiaoTiHei.ttf");
}
.el-input__inner {
background-color: #FFFF;
}
.hole-page{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
.tower-detect{
width: 100%;
height: 100%;
background-color: #F3F7FF;
box-sizing: border-box;
padding: 15px 20px;
border-radius: 5px;
border: 1px solid #EFF2FC;
box-shadow: 2px 2px 2px #D9E0F3;
display: flex;
flex-direction: column;
margin-right: 20px;
.inner-tit{
width: 100%;
box-sizing: border-box;
padding: 10px 20px;
background-color: #EFF4FE;
display: flex;
align-items: center;
color: #000;
font-size: 20px;
font-family: 'YouShe', sans-serif;
box-shadow: -3px -3px 2px #CBDCF6,
2px 2px 2px #F8F9FE,
-2px -2px 2px #CBDCF6,
2px 2px 2px #F8F9FE;
margin-bottom: 15px;
img{
margin-right: 10px;
}
}
.tower-info{
flex: 1;
display: flex;
.tower-lef{
width: 100%;
height: 100%;
margin-right: 15px;
display: flex;
flex-direction: column;
.lef-spin{
width: 100%;
height: 4%;
display: flex;
align-items: center;
color: #000;
font-size: 16px;
margin-bottom: 15px;
div{
display: flex;
align-items: center;
margin-right: 12px;
h4{
width: 15px;
height: 15px;
margin-right: 12px;
}
}
}
span{
padding: 15px 0;
color: #000;
font-size: 16px;
}
.lef-tower-pic{
width: 100%;
height: 350px;
box-sizing: border-box;
padding: 10px;
display: flex;
justify-content: left;
flex-wrap: wrap;
overflow-y: auto;
.single-tower{
width: 40%;
height: 100px;
display: flex;
margin-right: 20px;
flex-direction: column; /* 垂直排列内部元素 */
justify-content: center;
align-items: center;
img{
width: 60%;
height: 70%;
}
.dev-name {
text-align: center; /* 文本居中对齐 */
margin-top: 5px; /* 根据需要调整间距 */
font-size: 16px;
color: #000;
}
}
.isActive{
background: linear-gradient(135deg, #EEF7FF, #DDEDFF, #C2DCFF);
border: 1px solid #B8D2ED;
}
}
}
}
}
}
</style>

View File

@ -0,0 +1,585 @@
<template>
<div class="hole-page">
<div class="tower-detect">
<div class="inner-tit" style="display: flex; justify-content: space-between; align-items: center;">
<div>
<img src="../../assets/img/lef-badge.png" alt="">
变电站结构
</div>
</div>
<el-form
style="width: 100%;"
:model="queryParams"
ref="queryFormRef"
size="small"
:inline="true"
label-width="100px"
>
<el-form-item
label="变电站名称"
prop="sName"
>
<el-input
v-model="queryParams.name"
placeholder="请输入变电站名称"
clearable maxlength="20"
style="width: 200px;"
/>
</el-form-item>
<el-form-item
label="电压等级"
prop="elecLevel"
>
<el-input
v-model="queryParams.elecLevel"
placeholder="请输入电压等级"
clearable maxlength="20"
style="width: 200px;"
/>
</el-form-item>
<el-button
style="margin-top: 3px"
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button>
<el-button
style="margin-top: 3px"
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-form>
<el-table
:data="tableList"
stripe
style="width: 100%"
>
<el-table-column
label="序号"
align="center"
width="80"
type="index"
>
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="变电站名称"
align="center"
>
</el-table-column>
<el-table-column
prop="elecLevel"
label="电压等级"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.elecLevel }} kV</span>
</template>
</el-table-column>
<el-table-column
prop="width"
label="变电站宽度"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.width }} </span>
</template>
</el-table-column>
<el-table-column
prop="length"
label="变电站长度"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.width }} </span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
>
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getTableList"
style="background-color: #f3f7ff;"
/>
</div>
<!--新增和编辑弹窗 -->
<el-dialog :title="title" :visible.sync="showSubs" width="800px" height="800px" append-to-body @close="closeConfig">
<el-form :model="queryForm" ref="queryForm" :rules="rules" size="small" :inline="true" v-show="showSearch" label-width="120px">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="变电站名称" prop="name">
<el-input
v-model="queryForm.name"
placeholder="请输入变电站名称"
clearable maxlength="20"
style="width: 200px;"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电压等级" prop="elecLevel">
<el-input
v-model="queryForm.elecLevel"
placeholder="请输入电压等级"
clearable maxlength="20"
style="width: 200px;"
>
<template slot="append">kV</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="变电站宽度" prop="width">
<el-input
v-model="queryForm.width"
placeholder="变电站宽度"
clearable maxlength="20"
style="width: 200px;"
>
<template slot="append"></template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="变电站长度" prop="length">
<el-input
v-model="queryForm.length"
placeholder="变电站长度"
clearable maxlength="20"
style="width: 200px;"
>
<template slot="append"></template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div
style="
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
align-items: center;
"
>
<el-button type="primary" size="mini" @click="submit"
>确定</el-button
>
<el-button type="normal" size="mini" @click="closeClick"
>取消</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import { commonMixin } from '@/views/mixins/common'
import {querySubsStructureListApi,addSubs,editSubs,deleteSubs} from '@/api/substation/subsInfo'
export default {
mixins: [ commonMixin ],
props: {
sendMsg: {
type: Object,
default: null
}
},
name: 'subsStructureDetect',
data() {
return {
showSearch: true,
showSubs: false,
sendId: undefined,
title: '',
// radioLevelList: [
// { value: 1, label: '10KV' },
// { value: 2, label: '20~35KV' },
// { value: 3, label: '66~110KV' },
// { value: 4, label: '220KV' },
// { value: 5, label: '330KV' },
// { value: 6, label: '500KV' },
// { value: 7, label: '700KV' },
// { value: 8, label: '1000KV' },
// //
// ],
queryParams: {
sName: '',
elecLevel: "",
pageNum: 1,
pageSize: 10,
},
queryForm: {
id: undefined,
proId: undefined,
name: '',
elecLevel: "",
width: '',
length: '',
},
tableList: [],
total: 0,
rules: {
name: [{ required: true, message: '请输入变电站名称', trigger: 'blur' }],
elecLevel: [{ required: true, message: '请输入电压等级', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value === '' || value === null) {
return callback(new Error('请正确输入电压等级(正整数)'));
}
if (!/^[1-9]\d*$/.test(value)) {
return callback(new Error('请输入正整数'));
}
callback();
},
trigger: 'blur'
}
],
width: [{ required: true, message: '请输入变电站宽度', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value === '' || value === null) {
return callback(new Error('请正确输入变电站宽度(小数点后最多保留两位)'));
}
const regexTwo = /^[+-]?(\d+(\.\d*)?|\.\d*[1-9]\d*)$/;
if(!regexTwo.test(value)){
return callback(new Error('请勿输入非数字'));
}
const valueTemp = parseFloat(value);
if(valueTemp.toString().includes('.')==true){
if (valueTemp.toString().split(".")[1].length>2) {
callback(new Error('请正确输入变电站宽度(小数点后最多保留两位)'));
} else {
callback();
}
}else{
callback();
}
},
trigger: 'blur'
}
],
length: [{ required: true, message: '请输入变电站长度', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value === '' || value === null) {
return callback(new Error('请正确输入变电站长度(小数点后最多保留两位)'));
}
const regexTwo = /^[+-]?(\d+(\.\d*)?|\.\d*[1-9]\d*)$/;
if(!regexTwo.test(value)){
return callback(new Error('请勿输入非数字'));
}
const valueTemp = parseFloat(value);
if(valueTemp.toString().includes('.')==true){
if (valueTemp.toString().split(".")[1].length>2) {
callback(new Error('请正确输入变电站长度(小数点后最多保留两位)'));
} else {
callback();
}
}else{
callback();
}
},
trigger: 'blur'
}
],
},
}
},
created() {},
mounted() {
this.sendId = this.sendMsg.projectId
this.getList(this.sendMsg.projectId)
},
methods: {
//
async getList(proId) {
let res = await querySubsStructureListApi({
proId,
})
this.tableList = res.rows
this.total = res.total
},
async getTableList() {
this.queryParams.proId = this.sendMsg.projectId
let res = await querySubsStructureListApi(this.queryParams)
this.tableList = res.rows
this.total = res.total
},
//
handleQuery() {
this.getTableList()
},
//
handleAdd() {
this.queryForm = {
id: undefined,
proId: undefined,
name: '',
elecLevel: "",
width: '',
length: '',
},
this.resetForm("queryForm");
this.title = '新增'
this.showSubs = true
},
//
handleUpdate(row) {
this.queryForm.id = row.id
this.queryForm.name = row.name
this.queryForm.elecLevel = row.elecLevel
this.queryForm.width = row.width
this.queryForm.length = row.length
this.title = '编辑'
this.showSubs = true
},
/** 删除按钮操作 */
handleDelete(row) {
const id = row.id
this.$modal.confirm('是否确认删除该条数据').then(function() {
return deleteSubs({'id':id});
}).then(() => {
this.getTableList()
this.$modal.msgSuccess("删除成功");
}).catch(() => {})
},
/** 提交按钮 */
submit() {
this.$refs["queryForm"].validate(valid => {
if (valid) {
this.queryForm.proId = this.sendId;
if (this.queryForm.id) {
editSubs(this.queryForm).then(response => {
this.$modal.msgSuccess("修改成功");
this.showSubs = false;
this.getTableList();
// this.getListGt();
});
} else {
addSubs(this.queryForm).then(response => {
this.$modal.msgSuccess("新增成功");
this.showSubs = false;
this.getTableList();
// this.getListGt();
});
}
}
});
},
closeClick() {
this.showSubs = false
},
}
}
</script>
<style lang='less' scoped>
/deep/ .el-collapse-item__header {
background-color: transparent !important;
box-sizing: border-box;
padding-left: 15px;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #BAC4CD;
}
/deep/ .el-collapse-item__content {
padding-bottom: 0;
font-size: 16px;
}
/deep/ .el-collapse-item__wrap {
background-color: transparent;
}
@font-face {
font-family: 'YouShe';
src: url("../../assets/iconfont/YouSheBiaoTiHei.ttf");
}
.el-input__inner {
background-color: #FFFF;
}
.hole-page{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
.tower-detect{
width: 100%;
height: 100%;
background-color: #F3F7FF;
box-sizing: border-box;
padding: 15px 20px;
border-radius: 5px;
border: 1px solid #EFF2FC;
box-shadow: 2px 2px 2px #D9E0F3;
display: flex;
flex-direction: column;
margin-right: 20px;
.inner-tit{
width: 100%;
box-sizing: border-box;
padding: 10px 20px;
background-color: #EFF4FE;
display: flex;
align-items: center;
color: #000;
font-size: 20px;
font-family: 'YouShe', sans-serif;
box-shadow: -3px -3px 2px #CBDCF6,
2px 2px 2px #F8F9FE,
-2px -2px 2px #CBDCF6,
2px 2px 2px #F8F9FE;
margin-bottom: 15px;
img{
margin-right: 10px;
}
}
.tower-info{
flex: 1;
display: flex;
.tower-lef{
width: 100%;
height: 100%;
margin-right: 15px;
display: flex;
flex-direction: column;
.lef-spin{
width: 100%;
height: 4%;
display: flex;
align-items: center;
color: #000;
font-size: 16px;
margin-bottom: 15px;
div{
display: flex;
align-items: center;
margin-right: 12px;
h4{
width: 15px;
height: 15px;
margin-right: 12px;
}
}
}
span{
padding: 15px 0;
color: #000;
font-size: 16px;
}
.lef-tower-pic{
width: 100%;
height: 350px;
box-sizing: border-box;
padding: 10px;
display: flex;
justify-content: left;
flex-wrap: wrap;
overflow-y: auto;
.single-tower{
width: 40%;
height: 100px;
display: flex;
margin-right: 20px;
flex-direction: column; /* 垂直排列内部元素 */
justify-content: center;
align-items: center;
img{
width: 60%;
height: 70%;
}
.dev-name {
text-align: center; /* 文本居中对齐 */
margin-top: 5px; /* 根据需要调整间距 */
font-size: 16px;
color: #000;
}
}
.isActive{
background: linear-gradient(135deg, #EEF7FF, #DDEDFF, #C2DCFF);
border: 1px solid #B8D2ED;
}
}
}
}
}
}
</style>

View File

@ -98,20 +98,28 @@
v-if="currentLefIndex === 4"
:send-msg="sendMsg"
></pit-detect>
<deform-detect
<subsStructure-detect
v-if="currentLefIndex === 5"
:send-msg="sendMsg"
></subsStructure-detect>
<subsPipe-detect
v-if="currentLefIndex === 6"
:send-msg="sendMsg"
></subsPipe-detect>
<deform-detect
v-if="currentLefIndex === 7"
:send-msg="sendMsg"
></deform-detect>
<gll-detect
v-if="currentLefIndex === 6"
v-if="currentLefIndex === 8"
:send-msg="sendMsg"
></gll-detect>
<restrictedSpace-detect
v-if="currentLefIndex === 7"
v-if="currentLefIndex === 9"
:send-msg="sendMsg"
></restrictedSpace-detect>
<powerWork-detect
v-if="currentLefIndex === 8"
v-if="currentLefIndex === 10"
:send-msg="sendMsg"
></powerWork-detect>
</div>
@ -135,6 +143,8 @@ import DeformDetect from '../../components/substation/deformDetect.vue'
import GllDetect from '../../components/substation/gllDetect.vue'
import PowerWorkDetect from '../../components/substation/powerWorkDetect.vue'
import RestrictedSpaceDetect from '../../components/substation/restrictedSpaceDetect.vue'
import SubsStructureDetect from '../../components/substation/subsStructureDetect.vue'
import SubsPipeDetect from '../../components/substation/subsPipeDetect.vue'
export default {
components: {
GlobalBar,
@ -147,7 +157,9 @@ export default {
DeformDetect,
GllDetect,
PowerWorkDetect,
RestrictedSpaceDetect
RestrictedSpaceDetect,
SubsStructureDetect,
SubsPipeDetect
},
name: 'Substation',
data() {
@ -170,10 +182,12 @@ export default {
{ title: '环境检测类', id: 2 },
{ title: '组塔检测类', id: 3 },
{ title: '基坑检测类', id: 4 },
{ title: '形变监测类', id: 5 },
{ title: 'GLL通管监测类', id: 6 },
{ title: '受限空间视频预警', id: 7 },
{ title: '近电作业检测', id: 8 },
{ title: '变电站结构', id: 5 },
{ title: '变电站管网结构', id: 6 },
{ title: '形变监测类', id: 7 },
{ title: 'GLL通管监测类', id: 8 },
{ title: '受限空间视频预警', id: 9 },
{ title: '近电作业检测', id: 10 },
],
sendMsg: undefined,
sendGeo: undefined