重构
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>
|
||||
Reference in New Issue
Block a user