重构
This commit is contained in:
217
src/views/ems/site/zdlb/MonitorPointMapping.vue
Normal file
217
src/views/ems/site/zdlb/MonitorPointMapping.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="ems-dashboard-editor-container" style="background-color:#ffffff">
|
||||
<div class="header-row">
|
||||
<div class="title-block">
|
||||
<div class="page-title">单站监控项目点位配置</div>
|
||||
<div class="page-desc">站点：{{ siteName || siteId || '-' }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
<el-button type="primary" @click="saveData">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
title="当前字段清单与点位映射均从后端表读取，保存后可直接用于单站监控查询。"
|
||||
type="info"
|
||||
:closable="false"
|
||||
style="margin-top: 16px;"
|
||||
/>
|
||||
|
||||
<el-tabs v-model="activeTopMenu" style="margin-top: 16px;">
|
||||
<el-tab-pane
|
||||
v-for="topMenu in topMenuList"
|
||||
:key="topMenu.code"
|
||||
:label="topMenu.name"
|
||||
:name="topMenu.code"
|
||||
>
|
||||
<el-table
|
||||
v-if="!topMenu.children || topMenu.children.length === 0"
|
||||
class="common-table"
|
||||
:data="topMenu.items"
|
||||
stripe
|
||||
>
|
||||
<el-table-column prop="section" label="分组" min-width="180" />
|
||||
<el-table-column prop="name" label="页面展示名称" min-width="280" />
|
||||
<el-table-column prop="field" label="字段名" min-width="260" />
|
||||
<el-table-column label="点位" min-width="420">
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model.trim="scope.row.point"
|
||||
placeholder="请输入点位"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-tabs
|
||||
v-else
|
||||
v-model="activeChildMap[topMenu.code]"
|
||||
class="child-menu-tabs"
|
||||
type="border-card"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="child in topMenu.children"
|
||||
:key="child.code"
|
||||
:label="child.name"
|
||||
:name="child.code"
|
||||
>
|
||||
<el-table class="common-table" :data="child.items" stripe>
|
||||
<el-table-column prop="section" label="分组" min-width="180" />
|
||||
<el-table-column prop="name" label="页面展示名称" min-width="280" />
|
||||
<el-table-column prop="field" label="字段名" min-width="260" />
|
||||
<el-table-column label="点位" min-width="420">
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model.trim="scope.row.point"
|
||||
placeholder="请输入点位"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSingleMonitorProjectPointMapping, saveSingleMonitorProjectPointMapping } from '@/api/ems/site'
|
||||
|
||||
export default {
|
||||
name: 'MonitorPointMapping',
|
||||
data() {
|
||||
return {
|
||||
activeTopMenu: 'HOME',
|
||||
activeChildMap: {},
|
||||
topMenuList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
siteId() {
|
||||
return this.$route.query.siteId || ''
|
||||
},
|
||||
siteName() {
|
||||
return this.$route.query.siteName || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$router.back()
|
||||
},
|
||||
async initMenuStructure() {
|
||||
if (!this.siteId) {
|
||||
this.topMenuList = []
|
||||
return
|
||||
}
|
||||
const response = await getSingleMonitorProjectPointMapping(this.siteId)
|
||||
const list = response?.data || []
|
||||
const topMap = new Map()
|
||||
const childMap = new Map()
|
||||
|
||||
list.forEach((row, index) => {
|
||||
const moduleCode = row.moduleCode || 'UNKNOWN'
|
||||
const moduleName = row.moduleName || '未分组'
|
||||
const menuCode = row.menuCode || moduleCode
|
||||
const menuName = row.menuName || moduleName
|
||||
const topKey = moduleCode
|
||||
if (!topMap.has(topKey)) {
|
||||
topMap.set(topKey, {
|
||||
code: moduleCode,
|
||||
name: moduleName,
|
||||
children: [],
|
||||
items: []
|
||||
})
|
||||
}
|
||||
const item = {
|
||||
code: `${moduleCode}_${menuCode}_${row.fieldCode || index}`,
|
||||
section: row.sectionName || '-',
|
||||
name: row.fieldName || '-',
|
||||
field: row.fieldCode || '',
|
||||
point: row.dataPoint || ''
|
||||
}
|
||||
const topItem = topMap.get(topKey)
|
||||
const isTopDirect = moduleCode === menuCode || moduleCode === 'HOME'
|
||||
if (isTopDirect) {
|
||||
topItem.items.push(item)
|
||||
return
|
||||
}
|
||||
const childKey = `${moduleCode}_${menuCode}`
|
||||
if (!childMap.has(childKey)) {
|
||||
const child = { code: menuCode, name: menuName, items: [] }
|
||||
childMap.set(childKey, child)
|
||||
topItem.children.push(child)
|
||||
}
|
||||
childMap.get(childKey).items.push(item)
|
||||
})
|
||||
|
||||
this.topMenuList = Array.from(topMap.values())
|
||||
const firstTop = this.topMenuList[0]
|
||||
this.activeTopMenu = firstTop ? firstTop.code : 'HOME'
|
||||
this.activeChildMap = {}
|
||||
this.topMenuList.forEach(top => {
|
||||
if (top.children && top.children.length > 0) {
|
||||
this.$set(this.activeChildMap, top.code, top.children[0].code)
|
||||
}
|
||||
})
|
||||
},
|
||||
getAllMappingRows() {
|
||||
const rows = []
|
||||
this.topMenuList.forEach(top => {
|
||||
;(top.items || []).forEach(item => rows.push(item))
|
||||
;(top.children || []).forEach(child => {
|
||||
;(child.items || []).forEach(item => rows.push(item))
|
||||
})
|
||||
})
|
||||
return rows
|
||||
},
|
||||
async saveData() {
|
||||
if (!this.siteId) {
|
||||
this.$message.warning('缺少站点ID')
|
||||
return
|
||||
}
|
||||
const mappings = this.getAllMappingRows()
|
||||
.filter(item => item.field)
|
||||
.map(item => ({ fieldCode: item.field, dataPoint: item.point || '' }))
|
||||
await saveSingleMonitorProjectPointMapping({ siteId: this.siteId, mappings })
|
||||
this.$message.success('保存成功')
|
||||
await this.initMenuStructure()
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.initMenuStructure()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.child-menu-tabs {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
<template>
|
||||
<div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
|
||||
<el-form :inline="true" class="select-container">
|
||||
@ -24,6 +23,7 @@
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
|
||||
<el-button @click="onReset" native-type="button">重置</el-button>
|
||||
<el-button type="success" @click="openAddDialog" native-type="button">新增站点</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
@ -57,6 +57,15 @@
|
||||
prop="installCapacity"
|
||||
label="装机容量">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="220"
|
||||
fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
|
||||
<el-button type="text" size="small" @click="openPointMappingPage(scope.row)">配置</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-show="tableData.length>0"
|
||||
@ -71,67 +80,217 @@
|
||||
style="margin-top:15px;text-align: center"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<el-dialog
|
||||
:title="isEdit ? '编辑站点' : '新增站点'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="640px"
|
||||
:close-on-click-modal="false">
|
||||
<el-form ref="siteForm" :model="siteForm" :rules="siteRules" label-width="100px">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="站点ID" prop="siteId">
|
||||
<el-input v-model.trim="siteForm.siteId" :disabled="isEdit" placeholder="仅支持字母/数字/下划线" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="站点名称" prop="siteName">
|
||||
<el-input v-model.trim="siteForm.siteName" placeholder="请输入站点名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="运营时间" prop="runningTime">
|
||||
<el-date-picker
|
||||
v-model="siteForm.runningTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择运营时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="站点地址" prop="siteAddress">
|
||||
<el-input v-model.trim="siteForm.siteAddress" placeholder="请输入站点地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="装机功率" prop="installPower">
|
||||
<el-input v-model="siteForm.installPower" placeholder="请输入装机功率" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="装机容量" prop="installCapacity">
|
||||
<el-input v-model="siteForm.installCapacity" placeholder="请输入装机容量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纬度" prop="latitude">
|
||||
<el-input v-model="siteForm.latitude" placeholder="请输入纬度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="经度" prop="longitude">
|
||||
<el-input v-model="siteForm.longitude" placeholder="请输入经度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model.trim="siteForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitSite">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getSiteInfoList} from '@/api/ems/site'
|
||||
import {addSite, getSiteInfoList, updateSite} from '@/api/ems/site'
|
||||
import { formatDate } from '@/filters/ems'
|
||||
|
||||
const emptySiteForm = () => ({
|
||||
id: undefined,
|
||||
siteId: '',
|
||||
siteName: '',
|
||||
siteAddress: '',
|
||||
runningTime: '',
|
||||
installPower: '',
|
||||
installCapacity: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
export default {
|
||||
name: "Zdlb",
|
||||
name: 'Zdlb',
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
siteName:"",
|
||||
pickerOptions:{
|
||||
loading: false,
|
||||
submitLoading: false,
|
||||
siteName: '',
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
defaultDateRange:[],//默认展示的时间
|
||||
dateRange:[],//startTime,endTime
|
||||
tableData:[],
|
||||
pageSize:10,//分页栏当前每个数据总数
|
||||
pageNum:1,//分页栏当前页数
|
||||
totalSize:0,//table表格数据总数
|
||||
defaultDateRange: [],
|
||||
dateRange: [],
|
||||
tableData: [],
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
totalSize: 0,
|
||||
dialogVisible: false,
|
||||
isEdit: false,
|
||||
siteForm: emptySiteForm(),
|
||||
siteRules: {
|
||||
siteId: [
|
||||
{ required: true, message: '请输入站点ID', trigger: 'blur' },
|
||||
{ pattern: /^[A-Za-z0-9_]+$/, message: '站点ID仅支持字母、数字、下划线', trigger: 'blur' }
|
||||
],
|
||||
siteName: [
|
||||
{ required: true, message: '请输入站点名称', trigger: 'blur' }
|
||||
],
|
||||
runningTime: [
|
||||
{ required: true, message: '请选择运营时间', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 分页
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.$nextTick(()=>{
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pageNum = val
|
||||
this.$nextTick(()=>{
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
// 搜索
|
||||
onSearch(){
|
||||
this.pageNum =1//每次搜索从1开始搜索
|
||||
onSearch() {
|
||||
this.pageNum = 1
|
||||
this.getData()
|
||||
},
|
||||
// 重置
|
||||
onReset(){
|
||||
this.siteName=''
|
||||
this.dateRange=[]
|
||||
this.pageNum =1//每次搜索从1开始搜索
|
||||
onReset() {
|
||||
this.siteName = ''
|
||||
this.dateRange = []
|
||||
this.pageNum = 1
|
||||
this.getData()
|
||||
},
|
||||
// 获取数据
|
||||
getData(){
|
||||
this.loading=true
|
||||
const {siteName,pageNum,pageSize} =this
|
||||
const [startTime='',endTime='']=(this.dateRange || [])
|
||||
getSiteInfoList({siteName,pageSize,pageNum,startTime:formatDate(startTime),endTime:formatDate(endTime)}).then(response => {
|
||||
this.tableData=response?.rows || [];
|
||||
getData() {
|
||||
this.loading = true
|
||||
const {siteName, pageNum, pageSize} = this
|
||||
const [startTime = '', endTime = ''] = (this.dateRange || [])
|
||||
getSiteInfoList({siteName, pageSize, pageNum, startTime: formatDate(startTime), endTime: formatDate(endTime)}).then(response => {
|
||||
this.tableData = response?.rows || [];
|
||||
this.totalSize = response?.total || 0
|
||||
}).finally(() => {this.loading=false})
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
openAddDialog() {
|
||||
this.isEdit = false
|
||||
this.siteForm = emptySiteForm()
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.siteForm && this.$refs.siteForm.clearValidate()
|
||||
})
|
||||
},
|
||||
openEditDialog(row) {
|
||||
this.isEdit = true
|
||||
this.siteForm = {
|
||||
id: row.id,
|
||||
siteId: row.siteId || '',
|
||||
siteName: row.siteName || '',
|
||||
siteAddress: row.siteAddress || '',
|
||||
runningTime: row.runningTime || '',
|
||||
installPower: row.installPower || '',
|
||||
installCapacity: row.installCapacity || '',
|
||||
latitude: row.latitude || '',
|
||||
longitude: row.longitude || '',
|
||||
remark: row.remark || ''
|
||||
}
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.siteForm && this.$refs.siteForm.clearValidate()
|
||||
})
|
||||
},
|
||||
openPointMappingPage(row) {
|
||||
this.$router.push({
|
||||
path: '/ems/site/zdlb/monitor-point-mapping',
|
||||
query: {
|
||||
siteId: row.siteId,
|
||||
siteName: row.siteName || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
submitSite() {
|
||||
this.$refs.siteForm.validate(valid => {
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
this.submitLoading = true
|
||||
const request = this.isEdit ? updateSite : addSite
|
||||
request(this.siteForm).then(() => {
|
||||
this.$message.success(this.isEdit ? '编辑成功' : '新增成功')
|
||||
this.dialogVisible = false
|
||||
this.getData()
|
||||
}).finally(() => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.onReset()
|
||||
|
||||
Reference in New Issue
Block a user