emsfront/src/views/ems/site/zdlb/MonitorPointMapping.vue

<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>