重构

src/api/ems/dzjk.js

@@ -181,12 +181,319 @@ export function createTicketNo(data) {
     })
 }
 
-// 概率统计
-//获取概率统计 电量指标接口
-export function getElectricData({siteId, startDate, endDate}) {
+function getFieldNameByCode(fieldCode) {
+    const raw = String(fieldCode || '').trim()
+    if (!raw) return ''
+    const idx = raw.lastIndexOf('__')
+    return idx >= 0 ? raw.slice(idx + 2) : raw
+}
+
+function normalizeRows(displayResponse) {
+    const rows = displayResponse?.data || []
+    return Array.isArray(rows) ? rows : []
+}
+
+function filterByMenu(rows, menuCode) {
+    return (rows || []).filter(item => item && item.menuCode === menuCode)
+}
+
+function toDateLabel(valueTime) {
+    if (!valueTime) return ''
+    const date = new Date(valueTime)
+    if (isNaN(date.getTime())) return ''
+    const p = (n) => String(n).padStart(2, '0')
+    return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())}`
+}
+
+function toDateTimeLabel(valueTime) {
+    if (!valueTime) return ''
+    const date = new Date(valueTime)
+    if (isNaN(date.getTime())) return ''
+    const p = (n) => String(n).padStart(2, '0')
+    return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(date.getMinutes())}`
+}
+
+function toValueMap(rows) {
+    const map = {}
+    ;(rows || []).forEach(item => {
+        const fieldName = getFieldNameByCode(item?.fieldCode)
+        if (fieldName) {
+            map[fieldName] = item?.fieldValue
+        }
+    })
+    return map
+}
+
+function groupRowsByDevice(rows) {
+    const map = new Map()
+    ;(rows || []).forEach(item => {
+        const deviceId = String(item?.deviceId || '').trim() || 'DEFAULT'
+        if (!map.has(deviceId)) {
+            map.set(deviceId, [])
+        }
+        map.get(deviceId).push(item)
+    })
+    return map
+}
+
+function paginateRows(rows, pageNum = 1, pageSize = 10) {
+    const safePageNum = Number(pageNum) > 0 ? Number(pageNum) : 1
+    const safePageSize = Number(pageSize) > 0 ? Number(pageSize) : 10
+    const start = (safePageNum - 1) * safePageSize
+    return (rows || []).slice(start, start + safePageSize)
+}
+
+function toNumber(value) {
+    const num = Number(value)
+    return Number.isFinite(num) ? num : null
+}
+
+function normalizeDateInput(dateStr) {
+    if (dateStr) return dateStr
+    return toDateLabel(new Date())
+}
+
+function resolveElectricUnit(startDate, endDate) {
+    const start = new Date(`${normalizeDateInput(startDate)} 00:00:00`)
+    const end = new Date(`${normalizeDateInput(endDate)} 00:00:00`)
+    if (isNaN(start.getTime()) || isNaN(end.getTime())) return '日'
+    const diffDays = Math.floor((end.getTime() - start.getTime()) / (24 * 60 * 60 * 1000))
+    if (diffDays <= 0) return '时'
+    if (diffDays < 30) return '日'
+    return '月'
+}
+
+function formatByUnit(date, unit) {
+    const p = (n) => String(n).padStart(2, '0')
+    if (unit === '时') return `${p(date.getHours())}:${p(date.getMinutes())}`
+    if (unit === '月') return `${date.getFullYear()}-${p(date.getMonth() + 1)}`
+    return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())}`
+}
+
+function aggregateCurveByUnit(curveRows, unit) {
+    const result = new Map()
+    ;(curveRows || []).forEach(item => {
+        const time = item?.dataTime ? new Date(item.dataTime) : null
+        if (!time || isNaN(time.getTime())) return
+        const value = toNumber(item?.pointValue)
+        if (value == null) return
+        const label = formatByUnit(time, unit)
+        result.set(label, value)
+    })
+    return result
+}
+
+function getLatestCurveValue(curveRows) {
+    let latestTime = null
+    let latestValue = null
+    ;(curveRows || []).forEach(item => {
+        const time = item?.dataTime ? new Date(item.dataTime) : null
+        if (!time || isNaN(time.getTime())) return
+        const value = toNumber(item?.pointValue)
+        if (value == null) return
+        if (latestTime == null || time.getTime() > latestTime) {
+            latestTime = time.getTime()
+            latestValue = value
+        }
+    })
+    return latestValue
+}
+
+function findMappingByField(rows, fieldNames = []) {
+    const targetSet = new Set((fieldNames || []).map(name => String(name || '').trim()))
+    return (rows || []).find(item => targetSet.has(getFieldNameByCode(item?.fieldCode)))
+}
+
+function getDataPointFromMapping(mapping) {
+    if (!mapping) return ''
+    const useFixedDisplay = Number(mapping?.useFixedDisplay) === 1
+    const fixedDataPoint = String(mapping?.fixedDataPoint || '').trim()
+    const dataPoint = String(mapping?.dataPoint || '').trim()
+    if (useFixedDisplay && fixedDataPoint) return fixedDataPoint
+    return dataPoint || fixedDataPoint
+}
+
+function queryPointCurveByPointId({siteId, pointId, startDate, endDate}) {
+    if (!siteId || !pointId) return Promise.resolve([])
+    const start = `${normalizeDateInput(startDate)} 00:00:00`
+    const end = `${normalizeDateInput(endDate)} 23:59:59`
     return request({
-        url: `/ems/statsReport/getElectricData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
-        method: 'get'
+        url: `/ems/pointConfig/curve`,
+        method: 'post',
+        headers: {
+            repeatSubmit: false
+        },
+        data: {
+            siteId,
+            pointId,
+            rangeType: 'custom',
+            startTime: start,
+            endTime: end
+        }
+    }).then(resp => (Array.isArray(resp?.data) ? resp.data : []))
+}
+
+function sortCurveRows(curveRows = []) {
+    return [...(curveRows || [])].sort((a, b) => {
+        const ta = new Date(a?.dataTime).getTime()
+        const tb = new Date(b?.dataTime).getTime()
+        return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb)
+    })
+}
+
+function resolveRangeKind(startDate, endDate) {
+    const start = new Date(`${normalizeDateInput(startDate)} 00:00:00`)
+    const end = new Date(`${normalizeDateInput(endDate || startDate)} 00:00:00`)
+    if (isNaN(start.getTime()) || isNaN(end.getTime())) return 'day'
+    const diffDays = Math.floor((end.getTime() - start.getTime()) / (24 * 60 * 60 * 1000))
+    if (diffDays <= 0) return 'minute'
+    if (diffDays < 30) return 'day'
+    return 'month'
+}
+
+function formatTimeLabelByKind(date, kind = 'day') {
+    const p = (n) => String(n).padStart(2, '0')
+    if (kind === 'minute') return `${p(date.getHours())}:${p(date.getMinutes())}`
+    if (kind === 'month') return `${date.getFullYear()}-${p(date.getMonth() + 1)}`
+    return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())}`
+}
+
+function buildSortedLabels(labelSet, kind = 'day') {
+    const labels = Array.from(labelSet || [])
+    if (kind === 'minute') {
+        return labels.sort((a, b) => {
+            const [ah = 0, am = 0] = String(a || '').split(':').map(v => Number(v) || 0)
+            const [bh = 0, bm = 0] = String(b || '').split(':').map(v => Number(v) || 0)
+            return ah * 60 + am - (bh * 60 + bm)
+        })
+    }
+    return labels.sort()
+}
+
+function normalizePointValue(raw) {
+    const num = toNumber(raw)
+    if (num != null) return num
+    return raw == null ? '' : raw
+}
+
+function resolveAliasByField(aliasMap, fieldName) {
+    const raw = String(fieldName || '').trim()
+    if (!raw) return ''
+    if (aliasMap[raw]) return aliasMap[raw]
+    const withoutStat = raw.replace(/_stat$/, '')
+    return aliasMap[withoutStat] || ''
+}
+
+function queryMenuPointCurves({siteId, menuCode, startDate, endDate, mappingFilter}) {
+    return getProjectPointMapping(siteId).then((mappingResp) => {
+        const allMappings = Array.isArray(mappingResp?.data) ? mappingResp.data : []
+        let menuMappings = allMappings.filter(item => item?.menuCode === menuCode)
+        if (typeof mappingFilter === 'function') {
+            menuMappings = menuMappings.filter(mappingFilter)
+        }
+        const tasks = menuMappings.map((mapping) => {
+            const pointId = getDataPointFromMapping(mapping)
+            if (!pointId) return Promise.resolve(null)
+            return queryPointCurveByPointId({siteId, pointId, startDate, endDate})
+                .then(curve => ({
+                    deviceId: String(mapping?.deviceId || '').trim(),
+                    fieldName: getFieldNameByCode(mapping?.fieldCode),
+                    curve: sortCurveRows(curve || []),
+                }))
+                .catch(() => ({
+                    deviceId: String(mapping?.deviceId || '').trim(),
+                    fieldName: getFieldNameByCode(mapping?.fieldCode),
+                    curve: [],
+                }))
+        })
+        return Promise.all(tasks).then(rows => rows.filter(Boolean))
+    })
+}
+
+// 电量指标
+export function getElectricData({siteId, startDate, endDate}) {
+    return getProjectPointMapping(siteId).then((mappingResp) => {
+        const allMappings = Array.isArray(mappingResp?.data) ? mappingResp.data : []
+        const gltjMappings = allMappings.filter(item => item?.menuCode === 'TJBB_GLTJ')
+
+        const chargedMap = findMappingByField(gltjMappings, ['chargedCap_stat', 'chargedCap'])
+        const disChargedMap = findMappingByField(gltjMappings, ['disChargedCap_stat', 'disChargedCap'])
+        const dailyEfficiencyMap = findMappingByField(gltjMappings, ['dailyEfficiency'])
+        const totalChargedMap = findMappingByField(gltjMappings, ['totalChargedCap_stat', 'totalChargedCap'])
+        const totalDisChargedMap = findMappingByField(gltjMappings, ['totalDisChargedCap_stat', 'totalDisChargedCap'])
+        const totalEfficiencyMap = findMappingByField(gltjMappings, ['efficiency'])
+
+        const pointMap = {
+            charged: getDataPointFromMapping(chargedMap),
+            disCharged: getDataPointFromMapping(disChargedMap),
+            dailyEfficiency: getDataPointFromMapping(dailyEfficiencyMap),
+            totalCharged: getDataPointFromMapping(totalChargedMap),
+            totalDisCharged: getDataPointFromMapping(totalDisChargedMap),
+            totalEfficiency: getDataPointFromMapping(totalEfficiencyMap),
+        }
+
+        const queryTasks = Object.keys(pointMap).map((key) => {
+            const pointId = pointMap[key]
+            return queryPointCurveByPointId({siteId, pointId, startDate, endDate})
+                .then(curve => ({key, curve}))
+                .catch(() => ({key, curve: []}))
+        })
+
+        return Promise.all(queryTasks).then((queryResult) => {
+            const curveMap = {}
+            queryResult.forEach(item => {
+                curveMap[item.key] = item.curve || []
+            })
+
+            const unit = resolveElectricUnit(startDate, endDate)
+            const chargedSeries = aggregateCurveByUnit(curveMap.charged, unit)
+            const disChargedSeries = aggregateCurveByUnit(curveMap.disCharged, unit)
+            const efficiencySeries = aggregateCurveByUnit(curveMap.dailyEfficiency, unit)
+
+            const labels = Array.from(new Set([
+                ...chargedSeries.keys(),
+                ...disChargedSeries.keys(),
+                ...efficiencySeries.keys(),
+            ])).sort()
+
+            const sevenDayDisChargeStats = labels.map((label) => {
+                const chargedCap = chargedSeries.get(label)
+                const disChargedCap = disChargedSeries.get(label)
+                let dailyEfficiency = efficiencySeries.get(label)
+                if (dailyEfficiency == null && chargedCap != null && chargedCap !== 0 && disChargedCap != null) {
+                    dailyEfficiency = Number(((disChargedCap / chargedCap) * 100).toFixed(2))
+                }
+                return {
+                    ammeterDate: label,
+                    chargedCap: chargedCap == null ? '' : chargedCap,
+                    disChargedCap: disChargedCap == null ? '' : disChargedCap,
+                    dailyEfficiency: dailyEfficiency == null ? '' : dailyEfficiency,
+                }
+            })
+
+            const fallbackTotalCharged = sevenDayDisChargeStats.reduce((acc, item) => acc + (toNumber(item.chargedCap) || 0), 0)
+            const fallbackTotalDisCharged = sevenDayDisChargeStats.reduce((acc, item) => acc + (toNumber(item.disChargedCap) || 0), 0)
+
+            const totalChargedCap = getLatestCurveValue(curveMap.totalCharged)
+            const totalDisChargedCap = getLatestCurveValue(curveMap.totalDisCharged)
+            const totalEfficiency = getLatestCurveValue(curveMap.totalEfficiency)
+
+            const resultTotalCharged = totalChargedCap == null ? fallbackTotalCharged : totalChargedCap
+            const resultTotalDisCharged = totalDisChargedCap == null ? fallbackTotalDisCharged : totalDisChargedCap
+            const resultEfficiency = totalEfficiency == null
+                ? (resultTotalCharged > 0 ? Number(((resultTotalDisCharged / resultTotalCharged) * 100).toFixed(2)) : 0)
+                : totalEfficiency
+
+            return {
+                data: {
+                    totalChargedCap: resultTotalCharged,
+                    totalDisChargedCap: resultTotalDisCharged,
+                    efficiency: resultEfficiency,
+                    unit,
+                    sevenDayDisChargeStats,
+                }
+            }
+        })
     })
 }
 
@@ -198,27 +505,147 @@ export function getPcsNameList(siteId) {
     })
 }
 
-//pcs曲线
-export function getPCSData({siteId, startTime, endTime, dataType}) {
-    return request({
-        url: `/ems/statsReport/getPCSData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
-        method: 'get'
+// pcs曲线
+export function getPCSData({siteId, startTime, endTime}) {
+    const kind = resolveRangeKind(startTime, endTime)
+    const aliasMap = {
+        activePower_stat: 'activePower',
+        activePower: 'activePower',
+        reactivePower_stat: 'reactivePower',
+        reactivePower: 'reactivePower',
+        uCurrent: 'uCurrent',
+        vCurrent: 'vCurrent',
+        wCurrent: 'wCurrent',
+    }
+    return queryMenuPointCurves({
+        siteId,
+        menuCode: 'TJBB_PCSQX',
+        startDate: startTime,
+        endDate: endTime,
+    }).then((records) => {
+        const byDevice = new Map()
+        records.forEach((record) => {
+            const alias = resolveAliasByField(aliasMap, record.fieldName)
+            if (!alias) return
+            const deviceId = record.deviceId || ''
+            if (!byDevice.has(deviceId)) byDevice.set(deviceId, new Map())
+            const rowMap = byDevice.get(deviceId)
+            ;(record.curve || []).forEach((point) => {
+                const time = point?.dataTime ? new Date(point.dataTime) : null
+                if (!time || isNaN(time.getTime())) return
+                const label = formatTimeLabelByKind(time, kind)
+                if (!rowMap.has(label)) rowMap.set(label, {statisDate: label})
+                rowMap.get(label)[alias] = normalizePointValue(point?.pointValue)
+            })
+        })
+        const data = []
+        byDevice.forEach((rowMap, deviceId) => {
+            const labels = buildSortedLabels(new Set(Array.from(rowMap.keys())), kind)
+            data.push({
+                deviceId,
+                dataList: labels.map(label => rowMap.get(label)),
+            })
+        })
+        return {data}
     })
 }
 
-//电池堆曲线
-export function getStackData({siteId, startTime, endTime, dataType}) {
-    return request({
-        url: `/ems/statsReport/getStackData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
-        method: 'get'
+// 电池堆曲线
+export function getStackData({siteId, startTime, endTime}) {
+    const kind = resolveRangeKind(startTime, endTime)
+    const aliasMap = {
+        temp: 'temp',
+        voltage_stat: 'voltage',
+        voltage: 'voltage',
+        current: 'current',
+        soc_stat: 'soc',
+        soc: 'soc',
+    }
+    return queryMenuPointCurves({
+        siteId,
+        menuCode: 'TJBB_DCDQX',
+        startDate: startTime,
+        endDate: endTime,
+    }).then((records) => {
+        const byDevice = new Map()
+        records.forEach((record) => {
+            const alias = resolveAliasByField(aliasMap, record.fieldName)
+            if (!alias) return
+            const deviceId = record.deviceId || ''
+            if (!byDevice.has(deviceId)) byDevice.set(deviceId, new Map())
+            const rowMap = byDevice.get(deviceId)
+            ;(record.curve || []).forEach((point) => {
+                const time = point?.dataTime ? new Date(point.dataTime) : null
+                if (!time || isNaN(time.getTime())) return
+                const label = formatTimeLabelByKind(time, kind)
+                if (!rowMap.has(label)) rowMap.set(label, {statisDate: label})
+                rowMap.get(label)[alias] = normalizePointValue(point?.pointValue)
+            })
+        })
+        const data = []
+        byDevice.forEach((rowMap, deviceId) => {
+            const labels = buildSortedLabels(new Set(Array.from(rowMap.keys())), kind)
+            data.push({
+                deviceId,
+                dataList: labels.map(label => rowMap.get(label)),
+            })
+        })
+        return {data}
     })
 }
 
-//电池温度
+// 电池温度
 export function getClusterData({siteId, stackId, clusterId, dateTime, pageNum, pageSize}) {
-    return request({
-        url: `/ems/statsReport/getClusterData?siteId=${siteId}&stackId=${stackId}&clusterId=${clusterId}&dateTime=${dateTime}&pageNum=${pageNum}&pageSize=${pageSize}`,
-        method: 'get'
+    const startDate = dateTime || normalizeDateInput('')
+    const endDate = dateTime || normalizeDateInput('')
+    const kind = 'minute'
+    const aliasMap = {
+        maxTemp: 'maxTemp',
+        maxTempId: 'maxTempId',
+        minTemp: 'minTemp',
+        minTempId: 'minTempId',
+        maxVoltage: 'maxVoltage',
+        maxVoltageId: 'maxVoltageId',
+        minVoltage: 'minVoltage',
+        minVoltageId: 'minVoltageId',
+    }
+    const queryClusterCurves = (withClusterFilter) => queryMenuPointCurves({
+        siteId,
+        menuCode: 'TJBB_DCWD',
+        startDate,
+        endDate,
+        mappingFilter: withClusterFilter
+            ? (item) => {
+                if (!clusterId) return true
+                return String(item?.deviceId || '').trim() === String(clusterId || '').trim()
+            }
+            : undefined
+    })
+
+    return queryClusterCurves(true).then((records) => {
+        if (clusterId && (!records || records.length === 0)) {
+            return queryClusterCurves(false)
+        }
+        return records
+    }).then((records) => {
+        const rowMap = new Map()
+        records.forEach((record) => {
+            const alias = resolveAliasByField(aliasMap, record.fieldName)
+            if (!alias) return
+            ;(record.curve || []).forEach((point) => {
+                const time = point?.dataTime ? new Date(point.dataTime) : null
+                if (!time || isNaN(time.getTime())) return
+                const label = formatTimeLabelByKind(time, kind)
+                if (!rowMap.has(label)) rowMap.set(label, {statisDate: label})
+                rowMap.get(label)[alias] = normalizePointValue(point?.pointValue)
+            })
+        })
+        const labels = buildSortedLabels(new Set(Array.from(rowMap.keys())), kind)
+        const fullRows = labels.map(label => rowMap.get(label))
+        return {
+            rows: paginateRows(fullRows, pageNum, pageSize),
+            total: fullRows.length,
+        }
     })
 }
 
@@ -258,9 +685,37 @@ export function batteryAveTemp(siteId, startTime, endTime) {
 
 // 功率曲线
 export function getPowerData({siteId, startDate, endDate}) {
-    return request({
-        url: `/ems/statsReport/getPowerData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
-        method: 'get'
+    const kind = resolveRangeKind(startDate, endDate)
+    const aliasMap = {
+        gridPower_stat: 'gridPower',
+        gridPower: 'gridPower',
+        loadPower_stat: 'loadPower',
+        loadPower: 'loadPower',
+        storagePower_stat: 'storagePower',
+        storagePower: 'storagePower',
+        pvPower_stat: 'pvPower',
+        pvPower: 'pvPower',
+    }
+    return queryMenuPointCurves({
+        siteId,
+        menuCode: 'TJBB_GLQX',
+        startDate,
+        endDate,
+    }).then((records) => {
+        const rowMap = new Map()
+        records.forEach((record) => {
+            const alias = resolveAliasByField(aliasMap, record.fieldName)
+            if (!alias) return
+            ;(record.curve || []).forEach((point) => {
+                const time = point?.dataTime ? new Date(point.dataTime) : null
+                if (!time || isNaN(time.getTime())) return
+                const label = formatTimeLabelByKind(time, kind)
+                if (!rowMap.has(label)) rowMap.set(label, {statisDate: label})
+                rowMap.get(label)[alias] = normalizePointValue(point?.pointValue)
+            })
+        })
+        const labels = buildSortedLabels(new Set(Array.from(rowMap.keys())), kind)
+        return {data: labels.map(label => rowMap.get(label))}
     })
 }
 
@@ -274,18 +729,88 @@ export function getLoadNameList(siteId) {
 
 // 电表报表
 export function getAmmeterData({siteId, startTime, endTime, pageSize, pageNum}) {
-    return request({
-        url: `/ems/statsReport/getAmmeterData?siteId=${siteId}&startTime=${startTime}&endTime=${endTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
-        method: 'get'
+    const kind = 'day'
+    const aliasMap = {
+        activePeakKwh: 'activePeakKwh',
+        activeHighKwh: 'activeHighKwh',
+        activeFlatKwh: 'activeFlatKwh',
+        activeValleyKwh: 'activeValleyKwh',
+        activeTotalKwh: 'activeTotalKwh',
+        reActivePeakKwh: 'reActivePeakKwh',
+        reActiveHighKwh: 'reActiveHighKwh',
+        reActiveFlatKwh: 'reActiveFlatKwh',
+        reActiveValleyKwh: 'reActiveValleyKwh',
+        reActiveTotalKwh: 'reActiveTotalKwh',
+        effect: 'effect',
+    }
+    return queryMenuPointCurves({
+        siteId,
+        menuCode: 'TJBB_DBBB',
+        startDate: startTime,
+        endDate: endTime,
+    }).then((records) => {
+        const rowMap = new Map()
+        records.forEach((record) => {
+            const alias = aliasMap[record.fieldName]
+            if (!alias) return
+            ;(record.curve || []).forEach((point) => {
+                const time = point?.dataTime ? new Date(point.dataTime) : null
+                if (!time || isNaN(time.getTime())) return
+                const label = formatTimeLabelByKind(time, kind)
+                if (!rowMap.has(label)) rowMap.set(label, {dataTime: label})
+                rowMap.get(label)[alias] = normalizePointValue(point?.pointValue)
+            })
+        })
+        const labels = buildSortedLabels(new Set(Array.from(rowMap.keys())), kind)
+        const fullRows = labels.map(label => rowMap.get(label))
+        return {
+            rows: paginateRows(fullRows, pageNum, pageSize),
+            total: fullRows.length,
+        }
     })
 }
 
 // 电价报表
 export function getAmmeterRevenueData(data) {
-    return request({
-        url: `/ems/statsReport/getAmmeterRevenueData`,
-        method: 'get',
-        params: data
+    const {siteId, startTime, endTime, pageNum, pageSize} = data || {}
+    const kind = 'day'
+    const aliasMap = {
+        activePeakPrice: 'activePeakPrice',
+        activeHighPrice: 'activeHighPrice',
+        activeFlatPrice: 'activeFlatPrice',
+        activeValleyPrice: 'activeValleyPrice',
+        activeTotalPrice: 'activeTotalPrice',
+        reActivePeakPrice: 'reActivePeakPrice',
+        reActiveHighPrice: 'reActiveHighPrice',
+        reActiveFlatPrice: 'reActiveFlatPrice',
+        reActiveValleyPrice: 'reActiveValleyPrice',
+        reActiveTotalPrice: 'reActiveTotalPrice',
+        actualRevenue: 'actualRevenue',
+    }
+    return queryMenuPointCurves({
+        siteId,
+        menuCode: 'TJBB_SYBB',
+        startDate: startTime,
+        endDate: endTime,
+    }).then((records) => {
+        const rowMap = new Map()
+        records.forEach((record) => {
+            const alias = aliasMap[record.fieldName]
+            if (!alias) return
+            ;(record.curve || []).forEach((point) => {
+                const time = point?.dataTime ? new Date(point.dataTime) : null
+                if (!time || isNaN(time.getTime())) return
+                const label = formatTimeLabelByKind(time, kind)
+                if (!rowMap.has(label)) rowMap.set(label, {dataTime: label})
+                rowMap.get(label)[alias] = normalizePointValue(point?.pointValue)
+            })
+        })
+        const labels = buildSortedLabels(new Set(Array.from(rowMap.keys())), kind)
+        const fullRows = labels.map(label => rowMap.get(label))
+        return {
+            rows: paginateRows(fullRows, pageNum, pageSize),
+            total: fullRows.length,
+        }
     })
 }
 

src/api/ems/site.js

@@ -133,7 +133,30 @@ export function saveSingleMonitorProjectPointMapping(data) {
     return request({
         url: `/ems/siteConfig/saveSingleMonitorProjectPointMapping`,
         method: 'post',
-        data
+        data,
+        headers: {
+            repeatSubmit: false
+        }
+    })
+}
+
+// 获取单站监控工作状态枚举映射（PCS）
+export function getSingleMonitorWorkStatusEnumMappings(siteId) {
+    return request({
+        url: `/ems/siteConfig/getSingleMonitorWorkStatusEnumMappings?siteId=${siteId}`,
+        method: 'get',
+    })
+}
+
+// 保存单站监控工作状态枚举映射（PCS）
+export function saveSingleMonitorWorkStatusEnumMappings(data) {
+    return request({
+        url: `/ems/siteConfig/saveSingleMonitorWorkStatusEnumMappings`,
+        method: 'post',
+        data,
+        headers: {
+            repeatSubmit: false
+        }
     })
 }
 
@@ -267,7 +290,10 @@ export function getPointConfigLatestValues(data) {
     return request({
         url: `/ems/pointConfig/latestValues`,
         method: 'post',
-        data
+        data,
+        headers: {
+            repeatSubmit: false
+        }
     })
 }
 
@@ -276,7 +302,10 @@ export function getPointConfigCurve(data) {
     return request({
         url: `/ems/pointConfig/curve`,
         method: 'post',
-        data
+        data,
+        headers: {
+            repeatSubmit: false
+        }
     })
 }
 

src/components/Ems/SingleSquareBox/index.vue

@@ -2,7 +2,10 @@
 <template>
   <el-card shadow="always" class="single-square-box" :style="{background: 'linear-gradient(180deg, '+data.bgColor+' 0%,rgba(255,255,255,0) 100%)'}">
     <div class="single-square-box-title">{{ data.title }}</div>
-    <div class="single-square-box-value">{{ data.value | formatNumber }}</div>
+    <div class="single-square-box-value">
+      <i v-if="data.loading" class="el-icon-loading point-loading-icon"></i>
+      <span v-else>{{ data.value | formatNumber }}</span>
+    </div>
   </el-card>
 </template>
 
@@ -23,10 +26,21 @@
       line-height: 26px;
       font-weight: 500;
     }
+    .point-loading-icon{
+      color: #409eff;
+      display: inline-block;
+      transform-origin: center;
+      animation: pointLoadingSpinPulse 1.1s linear infinite;
+    }
     ::v-deep .el-card__body{
       padding: 12px 10px;
     }
   }
+  @keyframes pointLoadingSpinPulse {
+    0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
+    50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
+    100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
+  }
 </style>
 <script>
   export default {

src/layout/components/Navbar.vue

@@ -101,13 +101,16 @@ export default {
       if (!id) {
         return
       }
+      const currentSite = (this.$store.getters.zdList || []).find(item => item.siteId === id)
+      const siteName = currentSite && currentSite.siteName ? currentSite.siteName : ''
       localStorage.setItem('global_site_id', id)
-      if (id !== this.$route.query.siteId) {
+      if (id !== this.$route.query.siteId || siteName !== (this.$route.query.siteName || '')) {
         this.$router.push({
           path: this.$route.path,
           query: {
             ...this.$route.query,
-            siteId: id
+            siteId: id,
+            siteName
           }
         })
       }

src/views/ems/dzjk/clpz/runtimeParam/index.vue

@@ -5,32 +5,69 @@
         <span class="card-title">运行参数配置</span>
         <span class="site-tag">站点：{{ siteId || '-' }}</span>
       </div>
-      <el-form ref="form" :model="form" :rules="rules" label-width="180px" style="max-width: 760px;">
-        <el-form-item label="SOC下限(%)" prop="socDown">
-          <el-input-number v-model="form.socDown" :min="0" :max="100" :step="1" :precision="2" controls-position="right" style="width: 220px;" />
-        </el-form-item>
-        <el-form-item label="SOC上限(%)" prop="socUp">
-          <el-input-number v-model="form.socUp" :min="0" :max="100" :step="1" :precision="2" controls-position="right" style="width: 220px;" />
-        </el-form-item>
-        <el-form-item label="防逆流阈值(kW)" prop="antiReverseThreshold">
-          <el-input-number v-model="form.antiReverseThreshold" :min="0" :step="1" :precision="2" controls-position="right" style="width: 220px;" />
-        </el-form-item>
-        <el-form-item label="防逆流阈值上浮比例(%)" prop="antiReverseRangePercent">
-          <el-input-number v-model="form.antiReverseRangePercent" :min="0" :step="1" :precision="2" controls-position="right" style="width: 220px;" />
-        </el-form-item>
-        <el-form-item label="防逆流恢复上限(kW)" prop="antiReverseUp">
-          <el-input-number v-model="form.antiReverseUp" :min="0" :step="1" :precision="2" controls-position="right" style="width: 220px;" />
-        </el-form-item>
-        <el-form-item label="防逆流降功率比例(%)" prop="antiReversePowerDownPercent">
-          <el-input-number v-model="form.antiReversePowerDownPercent" :min="0" :max="100" :step="1" :precision="2" controls-position="right" style="width: 220px;" />
-        </el-form-item>
-        <el-form-item label="防逆流硬停阈值(kW)" prop="antiReverseHardStopThreshold">
-          <el-input-number v-model="form.antiReverseHardStopThreshold" :min="0" :step="1" :precision="2" controls-position="right" style="width: 220px;" />
-        </el-form-item>
-        <el-form-item>
+      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
+        <el-row :gutter="20" class="runtime-grid">
+          <el-col :xs="24" :sm="24" :md="8">
+            <div class="group-card">
+              <div class="group-title">SOC上下限</div>
+              <el-form-item label="SOC下限(%)" prop="socDown">
+                <el-input-number v-model="form.socDown" :min="0" :max="100" :step="1" :precision="2" :controls="false" style="width: 160px;" />
+              </el-form-item>
+              <el-form-item label="SOC上限(%)" prop="socUp">
+                <el-input-number v-model="form.socUp" :min="0" :max="100" :step="1" :precision="2" :controls="false" style="width: 160px;" />
+              </el-form-item>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="8">
+            <div class="group-card">
+              <div class="group-title">防逆流参数</div>
+              <el-form-item label="防逆流阈值(kW)" prop="antiReverseThreshold">
+                <el-input-number v-model="form.antiReverseThreshold" :min="0" :step="1" :precision="2" :controls="false" style="width: 160px;" />
+              </el-form-item>
+              <el-form-item label="阈值上浮比例(%)" prop="antiReverseRangePercent">
+                <el-input-number v-model="form.antiReverseRangePercent" :min="0" :step="1" :precision="2" :controls="false" style="width: 160px;" />
+              </el-form-item>
+              <el-form-item label="恢复上限(kW)" prop="antiReverseUp">
+                <el-input-number v-model="form.antiReverseUp" :min="0" :step="1" :precision="2" :controls="false" style="width: 160px;" />
+              </el-form-item>
+              <el-form-item label="降功率比例(%)" prop="antiReversePowerDownPercent">
+                <el-input-number v-model="form.antiReversePowerDownPercent" :min="0" :max="100" :step="1" :precision="2" :controls="false" style="width: 160px;" />
+              </el-form-item>
+              <el-form-item label="硬停阈值(kW)" prop="antiReverseHardStopThreshold">
+                <el-input-number v-model="form.antiReverseHardStopThreshold" :min="0" :step="1" :precision="2" :controls="false" style="width: 160px;" />
+              </el-form-item>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="8">
+            <div class="group-card">
+              <div class="group-title">功率与保护</div>
+              <el-form-item label="设定功率倍率" prop="powerSetMultiplier">
+                <el-input-number v-model="form.powerSetMultiplier" :min="0.0001" :step="0.1" :precision="4" :controls="false" style="width: 160px;" />
+              </el-form-item>
+              <el-form-item label="保护介入" prop="protectInterveneEnable">
+                <el-switch v-model="form.protectInterveneEnable" :active-value="1" :inactive-value="0" />
+              </el-form-item>
+              <el-form-item label="一级降额比例(%)" prop="protectL1DeratePercent">
+                <el-input-number v-model="form.protectL1DeratePercent" :min="0" :max="100" :step="1" :precision="2" :controls="false" style="width: 160px;" />
+              </el-form-item>
+              <el-form-item label="释放稳定时长(s)" prop="protectRecoveryStableSeconds">
+                <el-input-number v-model="form.protectRecoveryStableSeconds" :min="0" :max="3600" :step="1" :precision="0" :controls="false" style="width: 160px;" />
+              </el-form-item>
+              <el-form-item label="三级锁存" prop="protectL3LatchEnable">
+                <el-switch v-model="form.protectL3LatchEnable" :active-value="1" :inactive-value="0" />
+              </el-form-item>
+              <el-form-item label="冲突策略" prop="protectConflictPolicy">
+                <el-select v-model="form.protectConflictPolicy" style="width: 160px;">
+                  <el-option label="最高等级优先" value="MAX_LEVEL_WIN" />
+                </el-select>
+              </el-form-item>
+            </div>
+          </el-col>
+        </el-row>
+        <div class="action-row">
           <el-button type="primary" :loading="saveLoading" @click="handleSave">保存</el-button>
           <el-button @click="init">重置</el-button>
-        </el-form-item>
+        </div>
       </el-form>
     </el-card>
   </div>
@@ -45,10 +82,16 @@ const emptyForm = () => ({
   socDown: 0,
   socUp: 100,
   antiReverseThreshold: 30,
+  powerSetMultiplier: 10,
   antiReverseRangePercent: 20,
   antiReverseUp: 100,
   antiReversePowerDownPercent: 10,
-  antiReverseHardStopThreshold: 20
+  antiReverseHardStopThreshold: 20,
+  protectInterveneEnable: 1,
+  protectL1DeratePercent: 50,
+  protectRecoveryStableSeconds: 5,
+  protectL3LatchEnable: 1,
+  protectConflictPolicy: 'MAX_LEVEL_WIN'
 })
 
 export default {
@@ -69,6 +112,9 @@ export default {
         antiReverseThreshold: [
           { required: true, message: '请输入防逆流阈值', trigger: 'change' }
         ],
+        powerSetMultiplier: [
+          { required: true, message: '请输入设定功率倍率', trigger: 'change' }
+        ],
         antiReverseRangePercent: [
           { required: true, message: '请输入防逆流阈值上浮比例', trigger: 'change' }
         ],
@@ -80,6 +126,21 @@ export default {
         ],
         antiReverseHardStopThreshold: [
           { required: true, message: '请输入防逆流硬停阈值', trigger: 'change' }
+        ],
+        protectInterveneEnable: [
+          { required: true, message: '请选择是否启用保护介入', trigger: 'change' }
+        ],
+        protectL1DeratePercent: [
+          { required: true, message: '请输入一级降额比例', trigger: 'change' }
+        ],
+        protectRecoveryStableSeconds: [
+          { required: true, message: '请输入释放稳定时长', trigger: 'change' }
+        ],
+        protectL3LatchEnable: [
+          { required: true, message: '请选择三级锁存开关', trigger: 'change' }
+        ],
+        protectConflictPolicy: [
+          { required: true, message: '请选择冲突策略', trigger: 'change' }
         ]
       }
     }
@@ -113,6 +174,18 @@ export default {
           this.$message.error('SOC下限不能大于SOC上限')
           return
         }
+        if (Number(this.form.powerSetMultiplier) <= 0) {
+          this.$message.error('设定功率倍率必须大于0')
+          return
+        }
+        if (Number(this.form.protectL1DeratePercent) < 0 || Number(this.form.protectL1DeratePercent) > 100) {
+          this.$message.error('一级降额比例必须在0~100之间')
+          return
+        }
+        if (Number(this.form.protectRecoveryStableSeconds) < 0) {
+          this.$message.error('释放稳定时长不能小于0')
+          return
+        }
         this.saveLoading = true
         saveStrategyRuntimeConfig({ ...this.form, siteId: this.siteId }).then(response => {
           if (response?.code === 200) {
@@ -134,4 +207,37 @@ export default {
   color: #909399;
   font-size: 13px;
 }
+
+.runtime-grid {
+  max-width: 1180px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.runtime-grid > .el-col {
+  display: flex;
+}
+
+.group-card {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 14px 14px 2px;
+  min-height: 330px;
+  width: 100%;
+  height: 100%;
+  margin-bottom: 12px;
+}
+
+.group-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 14px;
+}
+
+.action-row {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
 </style>

src/views/ems/dzjk/home/ActiveChart.vue

@@ -12,13 +12,18 @@
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
 import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
-import {getProjectDisplayData} from '@/api/ems/dzjk'
 import {getPointConfigCurve} from '@/api/ems/site'
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
   mixins: [resize, intervalUpdate],
   components: {DateRangeSelect},
+  props: {
+    displayData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       chart: null,
@@ -27,6 +32,13 @@ export default {
       isInit: true
     }
   },
+  watch: {
+    displayData() {
+      if (this.siteId && this.timeRange.length === 2) {
+        this.getGVQXData()
+      }
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
@@ -47,37 +59,34 @@ export default {
       this.isInit = false
     },
     getGVQXData() {
-      this.showLoading()
       const {siteId, timeRange} = this
-      getProjectDisplayData(siteId).then(response => {
-        const displayData = response?.data || []
-        const sectionRows = displayData.filter(item =>
-          item && item.sectionName === '当日功率曲线' && item.useFixedDisplay !== 1 && item.dataPoint
-        )
-        const tasks = sectionRows.map(row => {
-          const pointId = String(row.dataPoint || '').trim()
-          if (!pointId) return Promise.resolve(null)
-          return getPointConfigCurve({
-            siteId,
-            pointId,
-            pointType: 'data',
-            rangeType: 'custom',
-            startTime: this.normalizeDateTime(timeRange[0], false),
-            endTime: this.normalizeDateTime(timeRange[1], true)
-          }).then(curveResponse => {
-            const list = curveResponse?.data || []
-            return {
-              name: row.fieldName || row.fieldCode || pointId,
-              data: list
-                .map(item => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
-                .filter(item => item[0] && !Number.isNaN(item[1]))
-            }
-          }).catch(() => null)
-        })
-        return Promise.all(tasks)
-      }).then(series => {
+      const displayData = this.displayData || []
+      const sectionRows = displayData.filter(item =>
+        item && item.sectionName === '当日功率曲线' && item.useFixedDisplay !== 1 && item.dataPoint
+      )
+      const tasks = sectionRows.map(row => {
+        const pointId = String(row.dataPoint || '').trim()
+        if (!pointId) return Promise.resolve(null)
+        return getPointConfigCurve({
+          siteId,
+          pointId,
+          pointType: 'data',
+          rangeType: 'custom',
+          startTime: this.normalizeDateTime(timeRange[0], false),
+          endTime: this.normalizeDateTime(timeRange[1], true)
+        }).then(curveResponse => {
+          const list = curveResponse?.data || []
+          return {
+            name: row.fieldName || row.fieldCode || pointId,
+            data: list
+              .map(item => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
+              .filter(item => item[0] && !Number.isNaN(item[1]))
+          }
+        }).catch(() => null)
+      })
+      Promise.all(tasks).then(series => {
         this.setOption((series || []).filter(Boolean))
-      }).finally(() => this.hideLoading())
+      })
     },
     init(siteId) {
       //初始化 清空数据
@@ -91,12 +100,6 @@ export default {
     initChart() {
       this.chart = echarts.init(document.querySelector('#activeChart'))
     },
-    showLoading() {
-      this.chart && this.chart.showLoading()
-    },
-    hideLoading() {
-      this.chart && this.chart.hideLoading()
-    },
     normalizeDateTime(value, endOfDay) {
       const raw = String(value || '').trim()
       if (!raw) return ''

src/views/ems/dzjk/home/WeekChart.vue

@@ -12,17 +12,29 @@
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
 import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
-import {getProjectDisplayData} from '@/api/ems/dzjk'
 import {getPointConfigCurve} from '@/api/ems/site'
 
 export default {
   mixins: [resize],
   components: {DateRangeSelect},
+  props: {
+    displayData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       chart: null,
       timeRange: [],
-      siteId: '',
+      siteId: ''
+    }
+  },
+  watch: {
+    displayData() {
+      if (this.siteId && this.timeRange.length === 2) {
+        this.getWeekKData()
+      }
     }
   },
   mounted() {
@@ -44,37 +56,34 @@ export default {
       this.getWeekKData()
     },
     getWeekKData() {
-      this.showLoading()
       const {siteId, timeRange} = this
-      getProjectDisplayData(siteId).then(response => {
-        const displayData = response?.data || []
-        const sectionRows = displayData.filter(item =>
-          item && item.sectionName === '一周充放曲线' && item.useFixedDisplay !== 1 && item.dataPoint
-        )
-        const tasks = sectionRows.map(row => {
-          const pointId = String(row.dataPoint || '').trim()
-          if (!pointId) return Promise.resolve(null)
-          return getPointConfigCurve({
-            siteId,
-            pointId,
-            pointType: 'data',
-            rangeType: 'custom',
-            startTime: this.normalizeDateTime(timeRange[0], false),
-            endTime: this.normalizeDateTime(timeRange[1], true)
-          }).then(curveResponse => {
-            const list = curveResponse?.data || []
-            return {
-              name: row.fieldName || row.fieldCode || pointId,
-              data: list
-                .map(item => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
-                .filter(item => item[0] && !Number.isNaN(item[1]))
-            }
-          }).catch(() => null)
-        })
-        return Promise.all(tasks)
-      }).then(series => {
+      const displayData = this.displayData || []
+      const sectionRows = displayData.filter(item =>
+        item && item.sectionName === '一周充放曲线' && item.useFixedDisplay !== 1 && item.dataPoint
+      )
+      const tasks = sectionRows.map(row => {
+        const pointId = String(row.dataPoint || '').trim()
+        if (!pointId) return Promise.resolve(null)
+        return getPointConfigCurve({
+          siteId,
+          pointId,
+          pointType: 'data',
+          rangeType: 'custom',
+          startTime: this.normalizeDateTime(timeRange[0], false),
+          endTime: this.normalizeDateTime(timeRange[1], true)
+        }).then(curveResponse => {
+          const list = curveResponse?.data || []
+          return {
+            name: row.fieldName || row.fieldCode || pointId,
+            data: list
+              .map(item => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
+              .filter(item => item[0] && !Number.isNaN(item[1]))
+          }
+        }).catch(() => null)
+      })
+      Promise.all(tasks).then(series => {
         this.setOption((series || []).filter(Boolean))
-      }).finally(() => this.hideLoading())
+      })
     },
     init(siteId) {
       //初始化 清空数据
@@ -86,12 +95,6 @@ export default {
     initChart() {
       this.chart = echarts.init(document.querySelector('#weekChart'))
     },
-    showLoading() {
-      this.chart && this.chart.showLoading()
-    },
-    hideLoading() {
-      this.chart && this.chart.hideLoading()
-    },
     normalizeDateTime(value, endOfDay) {
       const raw = String(value || '').trim()
       if (!raw) return ''

src/views/ems/dzjk/home/index.vue

@@ -105,10 +105,10 @@
         </el-card>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="12">
-        <week-chart ref="weekChart"/>
+        <week-chart ref="weekChart" :display-data="runningDisplayData"/>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="12">
-        <active-chart ref="activeChart"/>
+        <active-chart ref="activeChart" :display-data="runningDisplayData"/>
       </el-col>
     </el-row>
   </div>
@@ -133,6 +133,8 @@ export default {
       loading: false,
       baseInfoLoading: false,
       runningInfoLoading: false,
+      runningUpdateSpinning: false,
+      runningUpdateTimer: null,
       fallbackSjglData: [
         {
           title: "今日充电量（kWh）",
@@ -182,12 +184,11 @@ export default {
   },
   computed: {
     isBaseInfoLoading() {
-      const state = this.$data || {};
-      return !!(state.baseInfoLoading || state.loading);
+      return false;
     },
     isRunningInfoLoading() {
       const state = this.$data || {};
-      return !!(state.runningInfoLoading || state.loading);
+      return !!(state.runningInfoLoading || state.runningUpdateSpinning || state.loading);
     },
     tableData() {
       return this.runningInfo?.siteMonitorHomeAlarmVo || [];
@@ -227,6 +228,12 @@ export default {
       }));
     },
   },
+  beforeDestroy() {
+    if (this.runningUpdateTimer) {
+      clearTimeout(this.runningUpdateTimer);
+      this.runningUpdateTimer = null;
+    }
+  },
   methods: {
     setBaseInfoLoading(loading) {
       if (Object.prototype.hasOwnProperty.call(this.$data, "baseInfoLoading")) {
@@ -250,25 +257,73 @@ export default {
       this.$router.push({path: "/dzjk/gzgj", query: this.$route.query});
     },
     getBaseInfo() {
-      this.setBaseInfoLoading(true);
       return getSingleSiteBaseInfo(this.siteId).then((response) => {
         this.info = response?.data || {};
-      }).finally(() => {
-        this.setBaseInfoLoading(false);
       });
     },
     getRunningInfo() {
-      this.setRunningInfoLoading(true);
+      const hasOldData = Object.keys(this.runningInfo || {}).length > 0 || (this.runningDisplayData || []).length > 0;
+      if (!hasOldData) {
+        this.setRunningInfoLoading(true);
+      }
       return Promise.all([
         getDzjkHomeView(this.siteId),
         getProjectDisplayData(this.siteId),
       ]).then(([homeResponse, displayResponse]) => {
-        this.runningInfo = homeResponse?.data || {};
-        this.runningDisplayData = displayResponse?.data || [];
+        const nextRunningInfo = homeResponse?.data || {};
+        const nextRunningDisplayData = displayResponse?.data || [];
+        const changed = hasOldData && this.hasTotalRunningChanged(nextRunningInfo, nextRunningDisplayData);
+        this.runningInfo = nextRunningInfo;
+        this.runningDisplayData = nextRunningDisplayData;
+        if (changed) {
+          this.triggerRunningUpdateSpinner();
+        }
       }).finally(() => {
-        this.setRunningInfoLoading(false);
+        if (!hasOldData) {
+          this.setRunningInfoLoading(false);
+        }
       });
     },
+    triggerRunningUpdateSpinner() {
+      if (this.runningUpdateTimer) {
+        clearTimeout(this.runningUpdateTimer);
+      }
+      this.runningUpdateSpinning = true;
+      this.runningUpdateTimer = setTimeout(() => {
+        this.runningUpdateSpinning = false;
+        this.runningUpdateTimer = null;
+      }, 800);
+    },
+    hasTotalRunningChanged(nextRunningInfo, nextRunningDisplayData) {
+      const oldSnapshot = this.getTotalRunningSnapshot(this.runningInfo, this.runningDisplayData);
+      const newSnapshot = this.getTotalRunningSnapshot(nextRunningInfo, nextRunningDisplayData);
+      return JSON.stringify(oldSnapshot) !== JSON.stringify(newSnapshot);
+    },
+    getTotalRunningSnapshot(runningInfo, runningDisplayData) {
+      const snapshot = {};
+      const sectionData = (runningDisplayData || []).filter(item => item.sectionName === "总累计运行数据");
+      if (sectionData.length > 0) {
+        sectionData.forEach(item => {
+          const key = item.fieldCode || item.fieldName;
+          if (!key) return;
+          snapshot[`cfg:${key}`] = this.normalizeRunningCompareValue(item.fieldValue);
+        });
+        return snapshot;
+      }
+      this.fallbackSjglData.forEach(item => {
+        snapshot[`fallback:${item.attr}`] = this.normalizeRunningCompareValue(runningInfo?.[item.attr]);
+      });
+      snapshot["fallback:totalRevenue"] = this.normalizeRunningCompareValue(runningInfo?.totalRevenue);
+      return snapshot;
+    },
+    normalizeRunningCompareValue(value) {
+      if (value === null || value === undefined) return "";
+      if (typeof value === "number") return Number.isNaN(value) ? "" : value;
+      const text = String(value).trim();
+      if (text === "") return "";
+      const num = Number(text);
+      return Number.isNaN(num) ? text : num;
+    },
     init() {
       // 功率曲线
       this.$refs.activeChart.init(this.siteId);

src/views/ems/dzjk/sbjk/RealTimeBaseInfo.vue

@@ -2,8 +2,8 @@
 <template>
   <!--  6个方块-->
   <el-row :gutter="10">
-    <el-col :xs="12" :sm="8" :lg="4" style="margin-bottom: 10px;" class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
-      <single-square-box :data="{...item,value:formatNumber(data[item.attr])}" ></single-square-box>
+    <el-col :xs="12" :sm="8" :lg="4" style="margin-bottom: 10px;" class="single-square-box-container" v-for="(item,index) in displaySquares" :key="index+'singleSquareBox'">
+      <single-square-box :data="{...item,value:item.value,loading:item.valueLoading}" ></single-square-box>
     </el-col>
   </el-row>
 </template>
@@ -11,52 +11,67 @@
 
 <script>
 import SingleSquareBox from "@/components/Ems/SingleSquareBox/index.vue";
-import {formatNumber} from '@/filters/ems'
 export default {
   components:{SingleSquareBox},
   props:{
-    data:{
-      type:Object,
-      required:false,
-      default:()=>{return {}}
+    displayData: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
   },
-  methods:{formatNumber},
-  data() {
-    return {
-      // 单个电站 四个方块数据
-      singleZdSqaure:[{
-        title:'实时有功功率（kW）',
-        value:'',
-        bgColor:'#FFF2CB',
-        attr:'totalActivePower'
-      },{
-        title:'实时无功功率（kVar）',
-        value:'',
-        bgColor:'#CBD6FF',
-        attr:'totalReactivePower'
-      },{
-        title:'电池堆SOC',
-        value:'',
-        bgColor:'#DCCBFF',
-        attr:'soc'
-      },{
-        title:'电池堆SOH',
-        value:'',
-        bgColor:'#FFD4CB',
-        attr:'soh'
-      },{
-        title:'今日充电量（kWh）',
-        value:'',
-        bgColor:'#FFD6F8',
-        attr:'dayChargedCap'
-      },{
-        title:'今日放电量（kWh）',
-        value:'',
-        bgColor:'#E1FFCA',
-        attr:'dayDisChargedCap'
-      }]
-    }
+  computed: {
+    displaySquares() {
+      const sourceList = (this.displayData || []).filter((item) => {
+        if (!item) return false;
+        return item.menuCode === "SBJK_SSYX" || item.sectionName === "运行概览";
+      });
+      const sourceMap = {};
+      sourceList.forEach((item) => {
+        if (!item) return;
+        const key = this.getFieldName(item.fieldCode);
+        if (key) {
+          sourceMap[key] = item;
+        }
+      });
+      const defaults = [
+        {fieldCode: "totalActivePower", fieldName: "实时有功功率（kW）"},
+        {fieldCode: "totalReactivePower", fieldName: "实时无功功率（kVar）"},
+        {fieldCode: "soc", fieldName: "电池堆SOC"},
+        {fieldCode: "soh", fieldName: "电池堆SOH"},
+        {fieldCode: "dayChargedCap_rt", fieldName: "今日充电量（kWh）"},
+        {fieldCode: "dayDisChargedCap_rt", fieldName: "今日放电量（kWh）"},
+      ];
+      return defaults.map((def, index) => {
+        const row = sourceMap[def.fieldCode] || {};
+        return {
+          title: row.fieldName || def.fieldName,
+          value: row.fieldValue,
+          valueLoading: this.loading && this.isEmptyValue(row.fieldValue),
+          bgColor: this.getBgColor(index),
+        };
+      });
+    },
+  },
+  methods: {
+    getFieldName(fieldCode) {
+      const raw = String(fieldCode || "").trim();
+      if (!raw) return "";
+      const index = raw.lastIndexOf("__");
+      return index >= 0 ? raw.slice(index + 2) : raw;
+    },
+    getBgColor(index) {
+      const bgColors = ['#FFF2CB', '#CBD6FF', '#DCCBFF', '#FFD4CB', '#FFD6F8', '#E1FFCA'];
+      return bgColors[index % bgColors.length];
+    },
+    isEmptyValue(value) {
+      return value === undefined || value === null || value === "" || value === "-";
+    },
   },
 
 }

src/views/ems/dzjk/sbjk/bmsdcc/index.vue

@@ -1,6 +1,28 @@
 <template>
-  <div v-loading="loading">
-    <div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
+  <div>
+    <div class="pcs-tags">
+      <el-tag
+        size="small"
+        :type="selectedClusterId ? 'info' : 'primary'"
+        :effect="selectedClusterId ? 'plain' : 'dark'"
+        class="pcs-tag-item"
+        @click="handleTagClick('')"
+      >
+        全部
+      </el-tag>
+      <el-tag
+        v-for="(item, index) in clusterDeviceList"
+        :key="index + 'clusterTag'"
+        size="small"
+        :type="selectedClusterId === (item.deviceId || item.id) ? 'primary' : 'info'"
+        :effect="selectedClusterId === (item.deviceId || item.id) ? 'dark' : 'plain'"
+        class="pcs-tag-item"
+        @click="handleTagClick(item.deviceId || item.id || '')"
+      >
+        {{ item.deviceName || item.name || item.deviceId || item.id || 'BMS电池簇' }}
+      </el-tag>
+    </div>
+    <div v-for="(baseInfo,index) in filteredBaseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
       <el-card shadow="always"
                class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
                :class="handleCardClass(baseInfo)">
@@ -29,15 +51,15 @@
             <el-descriptions-item
                 contentClassName="descriptions-direction work-status"
                 :span="1" label="工作状态">
-              {{ CLUSTERWorkStatusOptions[baseInfo.workStatus] }}
+              {{ CLUSTERWorkStatusOptions[baseInfo.workStatus] || '-' }}
             </el-descriptions-item>
             <el-descriptions-item contentClassName="descriptions-direction"
                                   :span="1" label="与PCS通信">
-              {{ $store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus] }}
+              {{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[baseInfo.pcsCommunicationStatus] || '-' }}
             </el-descriptions-item>
             <el-descriptions-item contentClassName="descriptions-direction"
                                   :span="1" label="与EMS通信">
-              {{ $store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus] }}
+              {{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[baseInfo.emsCommunicationStatus] || '-' }}
             </el-descriptions-item>
           </el-descriptions>
         </div>
@@ -47,7 +69,9 @@
                                   v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1"
                                   :label="item.label">
                 <span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
-                {{ baseInfo[item.attr] | formatNumber }} <span v-if="item.unit" v-html="item.unit"></span>
+                <i v-if="isPointLoading(baseInfo[item.attr])" class="el-icon-loading point-loading-icon"></i>
+                <span v-else>{{ displayValue(baseInfo[item.attr]) | formatNumber }}</span>
+                <span v-if="item.unit" v-html="item.unit"></span>
               </span>
             </el-descriptions-item>
           </el-descriptions>
@@ -115,7 +139,6 @@
         </el-table>
       </el-card>
     </div>
-    <el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
     <point-chart ref="pointChart" :site-id="siteId"/>
     <point-table ref="pointTable"/>
   </div>
@@ -125,7 +148,7 @@
 <script>
 import pointChart from "./../PointChart.vue";
 import PointTable from "@/views/ems/site/sblb/PointTable.vue";
-import {getBMSBatteryCluster} from '@/api/ems/dzjk'
+import {getProjectDisplayData, getStackNameList, getClusterNameList} from '@/api/ems/dzjk'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 import {mapState} from "vuex";
@@ -137,11 +160,20 @@ export default {
   computed: {
     ...mapState({
       CLUSTERWorkStatusOptions: state => state?.ems?.CLUSTERWorkStatusOptions || {},
-    })
+    }),
+    filteredBaseInfoList() {
+      if (!this.selectedClusterId) {
+        return this.baseInfoList || [];
+      }
+      return (this.baseInfoList || []).filter(item => item.deviceId === this.selectedClusterId);
+    },
   },
   data() {
     return {
       loading: false,
+      displayData: [],
+      clusterDeviceList: [],
+      selectedClusterId: "",
       unitObj: {
         '电压': 'V',
         '温度': '&#8451;',
@@ -158,7 +190,15 @@ export default {
         'SOC单体平均值': '当前SOC',
         'SOC单体最大值': '最高单体SOC',
       },
-      baseInfoList: [],
+      baseInfoList: [{
+        siteId: "",
+        deviceId: "",
+        parentDeviceName: "",
+        deviceName: "BMS电池簇",
+        dataUpdateTime: "-",
+        alarmNum: 0,
+        batteryDataList: [],
+      }],
       infoData: [
         {label: '簇电压', attr: 'clusterVoltage', unit: 'V', pointName: '簇电压'},
         {label: '可充电量', attr: 'chargeableCapacity', unit: 'kWh', pointName: '可充电量'},
@@ -173,6 +213,12 @@ export default {
     }
   },
   methods: {
+    displayValue(value) {
+      return value === undefined || value === null || value === "" ? "-" : value;
+    },
+    isPointLoading(value) {
+      return this.loading && (value === undefined || value === null || value === "" || value === "-");
+    },
     handleCardClass(item) {
       const {workStatus = ''} = item
       return !(Object.keys(this.CLUSTERWorkStatusOptions).includes(item.workStatus)) ? "timing-card-container" : workStatus === '9' ? 'warning-card-container' : 'running-card-container'
@@ -185,23 +231,141 @@ export default {
     showChart(pointName, deviceId) {
       pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'CLUSTER', deviceId})
     },
-    updateData() {
-      this.loading = true
-      getBMSBatteryCluster(this.siteId).then(response => {
-        this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
-      }).finally(() => {
-        this.loading = false
-      })
+    handleTagClick(deviceId) {
+      this.selectedClusterId = deviceId || "";
     },
     init() {
       this.updateData()
       this.updateInterval(this.updateData)
+    },
+    getModuleRows(menuCode, sectionName) {
+      return (this.displayData || []).filter(item => item.menuCode === menuCode && item.sectionName === sectionName);
+    },
+    getFieldName(fieldCode) {
+      const raw = String(fieldCode || "").trim();
+      if (!raw) return "";
+      const index = raw.lastIndexOf("__");
+      return index >= 0 ? raw.slice(index + 2) : raw;
+    },
+    getFieldMap(rows = [], deviceId = "") {
+      const map = {};
+      const targetDeviceId = String(deviceId || "");
+      rows.forEach(item => {
+        if (!item || !item.fieldCode) return;
+        const itemDeviceId = String(item.deviceId || "");
+        if (itemDeviceId !== targetDeviceId) return;
+        map[this.getFieldName(item.fieldCode)] = item.fieldValue;
+      });
+      rows.forEach(item => {
+        if (!item || !item.fieldCode) return;
+        const itemDeviceId = String(item.deviceId || "");
+        if (itemDeviceId !== "") return;
+        const fieldName = this.getFieldName(item.fieldCode);
+        if (map[fieldName] === undefined || map[fieldName] === null || map[fieldName] === "") {
+          map[fieldName] = item.fieldValue;
+        }
+      });
+      return map;
+    },
+    getLatestTime(menuCode) {
+      const times = (this.displayData || [])
+        .filter(item => item.menuCode === menuCode && item.valueTime)
+        .map(item => new Date(item.valueTime).getTime())
+        .filter(ts => !isNaN(ts));
+      if (times.length === 0) {
+        return '-';
+      }
+      const date = new Date(Math.max(...times));
+      const p = (n) => String(n).padStart(2, '0');
+      return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(date.getMinutes())}:${p(date.getSeconds())}`;
+    },
+    getClusterDeviceList() {
+      return getStackNameList(this.siteId)
+        .then(response => {
+          const stackList = response?.data || [];
+          if (!stackList.length) {
+            this.clusterDeviceList = [];
+            return;
+          }
+          const requests = stackList.map(stack => {
+            const stackDeviceId = stack.deviceId || stack.id || '';
+            return getClusterNameList({stackDeviceId, siteId: this.siteId})
+              .then(clusterResponse => {
+                const clusterList = clusterResponse?.data || [];
+                return clusterList.map(cluster => ({
+                  ...cluster,
+                  parentDeviceName: stack.deviceName || stack.name || stackDeviceId || '',
+                }));
+              })
+              .catch(() => []);
+          });
+          return Promise.all(requests).then(results => {
+            this.clusterDeviceList = results.flat();
+          });
+        })
+        .catch(() => {
+          this.clusterDeviceList = [];
+        });
+    },
+    buildBaseInfoList() {
+      const devices = (this.clusterDeviceList && this.clusterDeviceList.length > 0)
+        ? this.clusterDeviceList
+        : [{deviceId: this.siteId, deviceName: 'BMS电池簇', parentDeviceName: ''}];
+      this.baseInfoList = devices.map(device => ({
+        ...(() => {
+          const id = device.deviceId || device.id || this.siteId;
+          const infoMap = this.getFieldMap(this.getModuleRows('SBJK_BMSDCC', '簇信息'), id);
+          const statusMap = this.getFieldMap(this.getModuleRows('SBJK_BMSDCC', '状态'), id);
+          const currentSoc = Number(infoMap.currentSoc);
+          return {
+            ...infoMap,
+            workStatus: statusMap.workStatus,
+            pcsCommunicationStatus: statusMap.pcsCommunicationStatus,
+            emsCommunicationStatus: statusMap.emsCommunicationStatus,
+            currentSoc: isNaN(currentSoc) ? 0 : currentSoc,
+          };
+        })(),
+        siteId: this.siteId,
+        deviceId: device.deviceId || device.id || this.siteId,
+        parentDeviceName: device.parentDeviceName || '',
+        deviceName: device.deviceName || device.name || device.deviceId || device.id || 'BMS电池簇',
+        dataUpdateTime: this.getLatestTime('SBJK_BMSDCC'),
+        alarmNum: 0,
+        batteryDataList: [],
+      }));
+    },
+    updateData() {
+      this.loading = true
+      // 先渲染卡片框架，字段值走单点位 loading
+      this.buildBaseInfoList();
+      Promise.all([
+        getProjectDisplayData(this.siteId),
+        this.getClusterDeviceList(),
+      ]).then(([response]) => {
+        this.displayData = response?.data || [];
+        this.buildBaseInfoList();
+      }).finally(() => {
+        this.loading = false
+      })
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.pcs-tags {
+  margin: 0 0 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.pcs-tag-item {
+  cursor: pointer;
+}
+
 ::v-deep {
   //描述列表样式
   .descriptions-main {
@@ -247,4 +411,16 @@ export default {
   }
 }
 
+.point-loading-icon {
+  color: #409eff;
+  display: inline-block;
+  transform-origin: center;
+  animation: pointLoadingSpinPulse 1.1s linear infinite;
+}
+@keyframes pointLoadingSpinPulse {
+  0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
+  50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
+  100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
+}
+
 </style>

src/views/ems/dzjk/sbjk/bmszl/index.vue

@@ -1,6 +1,28 @@
 <template>
-  <div v-loading="loading">
-    <div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
+  <div>
+    <div class="pcs-tags">
+      <el-tag
+        size="small"
+        :type="selectedStackId ? 'info' : 'primary'"
+        :effect="selectedStackId ? 'plain' : 'dark'"
+        class="pcs-tag-item"
+        @click="handleTagClick('')"
+      >
+        全部
+      </el-tag>
+      <el-tag
+        v-for="(item, index) in stackDeviceList"
+        :key="index + 'stackTag'"
+        size="small"
+        :type="selectedStackId === (item.deviceId || item.id) ? 'primary' : 'info'"
+        :effect="selectedStackId === (item.deviceId || item.id) ? 'dark' : 'plain'"
+        class="pcs-tag-item"
+        @click="handleTagClick(item.deviceId || item.id || '')"
+      >
+        {{ item.deviceName || item.name || item.deviceId || item.id || 'BMS总览' }}
+      </el-tag>
+    </div>
+    <div v-for="(baseInfo,index) in filteredBaseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
       <el-card
           :class="handleCardClass(baseInfo)"
           class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
@@ -27,15 +49,15 @@
             <el-descriptions-item
                 contentClassName="descriptions-direction work-status"
                 label="工作状态" labelClassName="descriptions-label">
-              {{ STACKWorkStatusOptions[baseInfo.workStatus] }}
+              {{ STACKWorkStatusOptions[baseInfo.workStatus] || '-' }}
             </el-descriptions-item>
             <el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与PCS通信"
                                   labelClassName="descriptions-label">
-              {{ $store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus] }}
+              {{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[baseInfo.pcsCommunicationStatus] || '-' }}
             </el-descriptions-item>
             <el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与EMS通信"
                                   labelClassName="descriptions-label">
-              {{ $store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus] }}
+              {{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[baseInfo.emsCommunicationStatus] || '-' }}
             </el-descriptions-item>
           </el-descriptions>
         </div>
@@ -45,7 +67,9 @@
                                   :span="1" contentClassName="descriptions-direction"
                                   labelClassName="descriptions-label">
               <span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
-                {{ baseInfo[item.attr] | formatNumber }}<span v-if="item.unit" v-html="item.unit"></span>
+                <i v-if="isPointLoading(baseInfo[item.attr])" class="el-icon-loading point-loading-icon"></i>
+                <span v-else>{{ displayValue(baseInfo[item.attr]) | formatNumber }}</span>
+                <span v-if="item.unit" v-html="item.unit"></span>
               </span>
             </el-descriptions-item>
           </el-descriptions>
@@ -150,14 +174,13 @@
         </el-table>
       </el-card>
     </div>
-    <el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
     <point-chart ref="pointChart" :site-id="siteId"/>
     <point-table ref="pointTable"/>
   </div>
 </template>
 
 <script>
-import {getBMSOverView} from '@/api/ems/dzjk'
+import {getProjectDisplayData, getStackNameList} from '@/api/ems/dzjk'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 import pointChart from "./../PointChart.vue";
@@ -171,12 +194,28 @@ export default {
   computed: {
     ...mapState({
       STACKWorkStatusOptions: state => state?.ems?.STACKWorkStatusOptions || {},
-    })
+    }),
+    filteredBaseInfoList() {
+      if (!this.selectedStackId) {
+        return this.baseInfoList || [];
+      }
+      return (this.baseInfoList || []).filter(item => item.deviceId === this.selectedStackId);
+    },
   },
   data() {
     return {
       loading: false,
-      baseInfoList: [],
+      displayData: [],
+      stackDeviceList: [],
+      selectedStackId: "",
+      baseInfoList: [{
+        siteId: "",
+        deviceId: "",
+        deviceName: "BMS总览",
+        dataUpdateTime: "-",
+        alarmNum: 0,
+        batteryDataList: [],
+      }],
       infoData: [
         {label: '电池堆总电压', attr: 'stackVoltage', unit: 'V', pointName: '电池堆电压'},
         {label: '可充电量', attr: 'availableChargeCapacity', unit: 'kWh', pointName: '可充电量'},
@@ -191,6 +230,12 @@ export default {
     }
   },
   methods: {
+    displayValue(value) {
+      return value === undefined || value === null || value === "" ? "-" : value;
+    },
+    isPointLoading(value) {
+      return this.loading && (value === undefined || value === null || value === "" || value === "-");
+    },
     handleCardClass(item) {
       const {workStatus = ''} = item
       return !Object.keys(this.STACKWorkStatusOptions).find(i => i === workStatus) ? "timing-card-container" : workStatus === '9' ? 'warning-card-container' : 'running-card-container'
@@ -204,24 +249,120 @@ export default {
     showChart(pointName, deviceId, deviceCategory = 'STACK') {
       pointName && this.$refs.pointChart.showChart({pointName, deviceCategory, deviceId})
     },
+    init() {
+      this.updateData()
+      this.updateInterval(this.updateData)
+    },
+    getModuleRows(menuCode, sectionName) {
+      return (this.displayData || []).filter(item => item.menuCode === menuCode && item.sectionName === sectionName);
+    },
+    getFieldName(fieldCode) {
+      const raw = String(fieldCode || "").trim();
+      if (!raw) return "";
+      const index = raw.lastIndexOf("__");
+      return index >= 0 ? raw.slice(index + 2) : raw;
+    },
+    getFieldMap(rows = [], deviceId = "") {
+      const map = {};
+      const targetDeviceId = String(deviceId || "");
+      rows.forEach(item => {
+        if (!item || !item.fieldCode) return;
+        const itemDeviceId = String(item.deviceId || "");
+        if (itemDeviceId !== targetDeviceId) return;
+        map[this.getFieldName(item.fieldCode)] = item.fieldValue;
+      });
+      rows.forEach(item => {
+        if (!item || !item.fieldCode) return;
+        const itemDeviceId = String(item.deviceId || "");
+        if (itemDeviceId !== "") return;
+        const fieldName = this.getFieldName(item.fieldCode);
+        if (map[fieldName] === undefined || map[fieldName] === null || map[fieldName] === "") {
+          map[fieldName] = item.fieldValue;
+        }
+      });
+      return map;
+    },
+    getLatestTime(menuCode) {
+      const times = (this.displayData || [])
+        .filter(item => item.menuCode === menuCode && item.valueTime)
+        .map(item => new Date(item.valueTime).getTime())
+        .filter(ts => !isNaN(ts));
+      if (times.length === 0) {
+        return '-';
+      }
+      const date = new Date(Math.max(...times));
+      const p = (n) => String(n).padStart(2, '0');
+      return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(date.getMinutes())}:${p(date.getSeconds())}`;
+    },
+    handleTagClick(deviceId) {
+      this.selectedStackId = deviceId || "";
+    },
+    getStackDeviceList() {
+      return getStackNameList(this.siteId).then(response => {
+        this.stackDeviceList = response?.data || [];
+      }).catch(() => {
+        this.stackDeviceList = [];
+      });
+    },
+    buildBaseInfoList() {
+      const devices = (this.stackDeviceList && this.stackDeviceList.length > 0)
+        ? this.stackDeviceList
+        : [{deviceId: this.siteId, deviceName: 'BMS总览'}];
+      this.baseInfoList = devices.map(device => ({
+        ...(() => {
+          const id = device.deviceId || device.id || this.siteId;
+          const infoMap = this.getFieldMap(this.getModuleRows('SBJK_BMSZL', '堆信息'), id);
+          const statusMap = this.getFieldMap(this.getModuleRows('SBJK_BMSZL', '状态'), id);
+          const stackSoc = Number(infoMap.stackSoc);
+          return {
+            ...infoMap,
+            workStatus: statusMap.workStatus,
+            pcsCommunicationStatus: statusMap.pcsCommunicationStatus,
+            emsCommunicationStatus: statusMap.emsCommunicationStatus,
+            stackSoc: isNaN(stackSoc) ? 0 : stackSoc,
+          };
+        })(),
+        siteId: this.siteId,
+        deviceId: device.deviceId || device.id || this.siteId,
+        deviceName: device.deviceName || device.name || device.deviceId || device.id || 'BMS总览',
+        dataUpdateTime: this.getLatestTime('SBJK_BMSZL'),
+        alarmNum: 0,
+        batteryDataList: [],
+      }));
+    },
     updateData() {
       this.loading = true
-      getBMSOverView(this.siteId).then(response => {
-        this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
+      // 先渲染卡片框架，字段值走单点位 loading
+      this.buildBaseInfoList();
+      Promise.all([
+        getProjectDisplayData(this.siteId),
+        this.getStackDeviceList(),
+      ]).then(([displayResponse]) => {
+        this.displayData = displayResponse?.data || [];
+        this.buildBaseInfoList();
       }).finally(() => {
         this.loading = false
       })
     },
-    init() {
-      this.updateData()
-      this.updateInterval(this.updateData)
-    }
 
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.pcs-tags {
+  margin: 0 0 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.pcs-tag-item {
+  cursor: pointer;
+}
+
 ::v-deep {
   //描述列表样式
   .descriptions-main {
@@ -267,4 +408,16 @@ export default {
   }
 }
 
+.point-loading-icon {
+  color: #409eff;
+  display: inline-block;
+  transform-origin: center;
+  animation: pointLoadingSpinPulse 1.1s linear infinite;
+}
+@keyframes pointLoadingSpinPulse {
+  0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
+  50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
+  100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
+}
+
 </style>

src/views/ems/dzjk/sbjk/db/index.vue

@@ -1,229 +1,239 @@
 <template>
-  <div v-loading="loading">
+  <div>
+    <div class="pcs-tags">
+      <el-tag
+        size="small"
+        :type="selectedSectionKey ? 'info' : 'primary'"
+        :effect="selectedSectionKey ? 'plain' : 'dark'"
+        class="pcs-tag-item"
+        @click="handleTagClick('')"
+      >
+        全部
+      </el-tag>
+      <el-tag
+        v-for="(group, index) in sectionGroups"
+        :key="index + 'dbTag'"
+        size="small"
+        :type="selectedSectionKey === group.sectionKey ? 'primary' : 'info'"
+        :effect="selectedSectionKey === group.sectionKey ? 'dark' : 'plain'"
+        class="pcs-tag-item"
+        @click="handleTagClick(group.sectionKey)"
+      >
+        {{ group.displayName || "电表" }}
+      </el-tag>
+    </div>
     <el-card
-        v-for="(item,index) in list"
-        :key="index+'dbList'"
-        shadow="always"
-        class="sbjk-card-container list"
-        :class="{
-        'timing-card-container':!['0','2'].includes(item.emsCommunicationStatus),
-        'warning-card-container':item.emsCommunicationStatus === '2',
-        'running-card-container':item.emsCommunicationStatus === '0'
-      }"
+      v-for="(group, index) in filteredSectionGroups"
+      :key="index + 'dbSection'"
+      class="sbjk-card-container list running-card-container"
+      shadow="always"
     >
       <div slot="header">
-        <span class="large-title">{{ item.deviceName }}</span>
+        <span class="large-title">{{ group.displayName || "电表" }}</span>
         <div class="info">
-          <div>
-            {{
-              communicationStatusOptions[item.emsCommunicationStatus] || '-'
-            }}
-          </div>
-          <div>数据更新时间：{{ item.dataUpdateTime || '-' }}</div>
-        </div>
-        <div class="alarm">
-          <el-button type="primary" round size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
-            详细
-          </el-button>
-          <el-badge :hidden="!item.alarmNum" :value="item.alarmNum || 0" class="item">
-            <i
-                class="el-icon-message-solid alarm-icon"
-                @click="pointDetail(item,'alarmPoint')"
-            ></i>
-          </el-badge>
+          <div>状态：{{ group.statusText }}</div>
+          <div>数据更新时间：{{ group.updateTimeText }}</div>
         </div>
       </div>
       <el-row class="device-info-row">
-        <el-col v-for="(tempDataItem,tempDataIndex) in (deviceIdTypeMsg[item.deviceId] || otherTypeMsg)"
-                :key="tempDataIndex+'dbTempData'"
-                :span="8" class="device-info-col">
-            <span class="pointer" @click="showChart(tempDataItem.pointName,item.deviceId)">
-              <span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] || '-' }}<span
-                v-html="tempDataItem.unit"></span></span>
-            </span>
+        <el-col
+          v-for="(item, dataIndex) in group.items"
+          :key="dataIndex + 'dbField'"
+          :span="8"
+          class="device-info-col"
+        >
+          <span class="left">{{ item.fieldName }}</span>
+          <span class="right">
+            <i v-if="isPointLoading(item.fieldValue)" class="el-icon-loading point-loading-icon"></i>
+            <span v-else>{{ displayValue(item.fieldValue) | formatNumber }}</span>
+          </span>
         </el-col>
       </el-row>
     </el-card>
-    <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
-    <point-chart ref="pointChart" :site-id="siteId"/>
-    <point-table ref="pointTable"/>
   </div>
 </template>
 
 <script>
-import pointChart from "./../PointChart.vue";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getAmmeterDataList} from "@/api/ems/dzjk";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
-import PointTable from "@/views/ems/site/sblb/PointTable.vue";
-import {mapState} from "vuex";
+import { getProjectDisplayData } from "@/api/ems/dzjk";
+import { getDeviceList } from "@/api/ems/site";
 
 export default {
   name: "DzjkSbjkDb",
   mixins: [getQuerySiteId, intervalUpdate],
-  components: {PointTable, pointChart},
-  computed: {
-
-    ...mapState({
-      communicationStatusOptions: state => state?.ems?.communicationStatusOptions || {},
-    })
-  },
   data() {
     return {
       loading: false,
-      list: [],
-      deviceIdTypeMsg: {
-        'LOAD': [
-          {
-            name: '正向有功电能',
-            attr: 'forwardActive',
-            pointName: '正向有功电能',
-            unit: 'kWh'
-          },
-          {
-            name: '反向有功电能',
-            attr: 'reverseActive',
-            pointName: '反向有功电能',
-            unit: 'kWh'
-          },
-          {
-            name: '正向无功电能',
-            attr: 'forwardReactive',
-            pointName: '正向无功电能',
-            unit: 'kvarh'
-          },
-          {
-            name: '反向无功电能',
-            attr: 'reverseReactive',
-            pointName: '反向无功电能',
-            unit: 'kvarh'
-          },
-          {
-            name: '有功功率',
-            attr: 'activePower',
-            pointName: '总有功功率',
-            unit: 'kW'
-          },
-          {
-            name: '无功功率',
-            attr: 'reactivePower',
-            pointName: '总无功功率',
-            unit: 'kvar'
-          }
-        ],
-        'METE': [
-          {
-            name: '正向有功电能',
-            attr: 'forwardActive',
-            pointName: '正向有功电能',
-            unit: 'kWh'
-          },
-          {
-            name: '反向有功电能',
-            attr: 'reverseActive',
-            pointName: '反向有功电能',
-            unit: 'kWh'
-          },
-          {
-            name: '正向无功电能',
-            attr: 'forwardReactive',
-            pointName: '正向无功电能',
-            unit: 'kvarh'
-          },
-          {
-            name: '反向无功电能',
-            attr: 'reverseReactive',
-            pointName: '反向无功电能',
-            unit: 'kvarh'
-          },
-          {
-            name: '有功功率',
-            attr: 'activePower',
-            pointName: '总有功功率',
-            unit: 'kW'
-          },
-          {
-            name: '无功功率',
-            attr: 'reactivePower',
-            pointName: '总无功功率',
-            unit: 'kvar'
-          }
-        ],
-        'METEGF': [
-          {
-            name: '有功电能',
-            attr: 'activeEnergy',
-            pointName: '有功电能',
-            unit: 'kWh'
-          },
-          {
-            name: '无功电能',
-            attr: 'reactiveEnergy',
-            pointName: '无功电能',
-            unit: 'kvarh'
-          },
-          {
-            name: '有功功率',
-            attr: 'activePower',
-            pointName: '总有功功率',
-            unit: 'kW'
-          },
-          {
-            name: '无功功率',
-            attr: 'reactivePower',
-            pointName: '总无功功率',
-            unit: 'kvar'
-          }
-        ]
-      },
-      otherTypeMsg: [
-        {
-          name: '正向有功电能',
-          attr: 'forwardActive',
-          pointName: '正向有功电能',
-          unit: 'kWh'
-        },
-        {
-          name: '反向有功电能',
-          attr: 'reverseActive',
-          pointName: '反向有功电能',
-          unit: 'kWh'
-        },
-        {
-          name: '有功功率',
-          attr: 'activePower',
-          pointName: '总有功功率',
-          unit: 'kW'
-        },
-      ]
+      displayData: [],
+      selectedSectionKey: "",
+      ammeterDeviceList: [],
     };
   },
-  methods: {
-    // 查看设备电位表格
-    pointDetail(row, dataType) {
-      const {deviceId} = row
-      this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'AMMETER'}, dataType)
+  computed: {
+    moduleDisplayData() {
+      return (this.displayData || []).filter((item) => item.menuCode === "SBJK_DB");
     },
-    showChart(pointName, deviceId) {
-      pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'AMMETER', deviceId})
+    dbTemplateFields() {
+      const source = this.moduleDisplayData || [];
+      const result = [];
+      const seen = new Set();
+      source.forEach((item) => {
+        const fieldName = String(item?.fieldName || "").trim();
+        if (!fieldName || seen.has(fieldName)) {
+          return;
+        }
+        seen.add(fieldName);
+        result.push(fieldName);
+      });
+      return result.length > 0 ? result : this.fallbackFields;
+    },
+    sectionGroups() {
+      const source = this.moduleDisplayData || [];
+      const devices = (this.ammeterDeviceList || []).length > 0
+        ? this.ammeterDeviceList
+        : [{ deviceId: "", deviceName: "电表" }];
+
+      return devices.map((device, index) => {
+        const deviceId = String(device?.deviceId || device?.id || "").trim();
+        const sectionKey = deviceId || `AMMETER_${index}`;
+        const displayName = String(device?.deviceName || device?.name || deviceId || `电表${index + 1}`).trim();
+        const exactRows = source.filter((item) => String(item?.deviceId || "").trim() === deviceId);
+        const fallbackRows = source.filter((item) => !String(item?.deviceId || "").trim());
+
+        const exactValueMap = {};
+        exactRows.forEach((item) => {
+          const key = String(item?.fieldName || "").trim();
+          if (key) {
+            exactValueMap[key] = item;
+          }
+        });
+        const fallbackValueMap = {};
+        fallbackRows.forEach((item) => {
+          const key = String(item?.fieldName || "").trim();
+          if (key && fallbackValueMap[key] === undefined) {
+            fallbackValueMap[key] = item;
+          }
+        });
+
+        const items = (this.dbTemplateFields || []).map((fieldName) => {
+          const row = exactValueMap[fieldName] || fallbackValueMap[fieldName] || {};
+          return {
+            fieldName,
+            fieldValue: row.fieldValue,
+            valueTime: row.valueTime,
+          };
+        });
+
+        const statusItem = (items || []).find((it) => String(it.fieldName || "").includes("状态"));
+        const timestamps = [...exactRows, ...fallbackRows]
+          .map((it) => new Date(it?.valueTime).getTime())
+          .filter((ts) => !isNaN(ts));
+
+        return {
+          sectionName: displayName,
+          sectionKey,
+          displayName,
+          deviceId,
+          items,
+          statusText: this.displayValue(statusItem ? statusItem.fieldValue : "-"),
+          updateTimeText: timestamps.length > 0 ? this.formatDate(new Date(Math.max(...timestamps))) : "-",
+        };
+      });
+    },
+    displaySectionGroups() {
+      if (this.sectionGroups.length > 0) {
+        return this.sectionGroups;
+      }
+      return [
+        {
+          sectionName: "电参量",
+          sectionKey: "电参量",
+          displayName: "电表",
+          items: this.fallbackFields.map((fieldName) => ({ fieldName, fieldValue: "-" })),
+          statusText: "-",
+          updateTimeText: "-",
+        },
+      ];
+    },
+    filteredSectionGroups() {
+      const groups = this.displaySectionGroups || [];
+      if (!this.selectedSectionKey) {
+        return groups;
+      }
+      return groups.filter((group) => group.sectionKey === this.selectedSectionKey);
+    },
+    fallbackFields() {
+      return [
+        "正向有功电能",
+        "反向有功电能",
+        "正向无功电能",
+        "反向无功电能",
+        "有功功率",
+        "无功功率",
+      ];
+    },
+  },
+  methods: {
+    handleTagClick(sectionKey) {
+      this.selectedSectionKey = sectionKey || "";
+    },
+    displayValue(value) {
+      return value === undefined || value === null || value === "" ? "-" : value;
+    },
+    isPointLoading(value) {
+      return this.loading && (value === undefined || value === null || value === "" || value === "-");
+    },
+    formatDate(date) {
+      if (!(date instanceof Date) || isNaN(date.getTime())) {
+        return "-";
+      }
+      const p = (n) => String(n).padStart(2, "0");
+      return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(
+        date.getMinutes()
+      )}:${p(date.getSeconds())}`;
+    },
+    resolveDbDisplayName(sectionName) {
+      const key = String(sectionName || "").trim();
+      if (!key) {
+        return "电表";
+      }
+      const list = this.ammeterDeviceList || [];
+      const matched = list.find((item) => {
+        const deviceId = String(item.deviceId || item.id || "").trim();
+        const deviceName = String(item.deviceName || item.name || "").trim();
+        return key === deviceId || key === deviceName;
+      });
+      if (matched) {
+        return matched.deviceName || matched.name || key;
+      }
+      return key;
+    },
+    getAmmeterDeviceList() {
+      return getDeviceList(this.siteId)
+        .then((response) => {
+          const list = response?.data || [];
+          this.ammeterDeviceList = list.filter((item) => item.deviceCategory === "AMMETER");
+        })
+        .catch(() => {
+          this.ammeterDeviceList = [];
+        });
     },
     updateData() {
       this.loading = true;
-      getAmmeterDataList(this.siteId)
-          .then((response) => {
-            this.list = response?.data || []
-          })
-          .finally(() => {
-            this.loading = false;
-          });
+      Promise.all([getProjectDisplayData(this.siteId), this.getAmmeterDeviceList()])
+        .then(([response]) => {
+          this.displayData = response?.data || [];
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     init() {
-      this.updateData()
-      this.updateInterval(this.updateData)
+      this.updateData();
+      this.updateInterval(this.updateData);
     },
   },
-  mounted() {
-  },
 };
 </script>
 
@@ -232,6 +242,38 @@ export default {
   &.list:not(:last-child) {
     margin-bottom: 25px;
   }
+
+  .info {
+    float: right;
+    text-align: right;
+    font-size: 12px;
+    color: #666;
+    line-height: 18px;
+  }
 }
 
+.pcs-tags {
+  margin: 0 0 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.pcs-tag-item {
+  cursor: pointer;
+}
+
+.point-loading-icon {
+  color: #409eff;
+  display: inline-block;
+  transform-origin: center;
+  animation: pointLoadingSpinPulse 1.1s linear infinite;
+}
+@keyframes pointLoadingSpinPulse {
+  0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
+  50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
+  100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
+}
 </style>

src/views/ems/dzjk/sbjk/dh/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading">
+  <div>
     <el-card
         v-for="(item,index) in list"
         :key="index+'ylLise'"
@@ -26,9 +26,11 @@
         <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12"
                 class="device-info-col">
             <span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
-              <span class="left">{{ tempDataItem.title }}</span> <span
-                class="right">{{ item[tempDataItem.attr] || '-' }}<span
-                v-html="tempDataItem.unit"></span></span>
+              <span class="left">{{ tempDataItem.title }}</span>
+              <span class="right">
+                <i v-if="isPointLoading(item[tempDataItem.attr])" class="el-icon-loading point-loading-icon"></i>
+                <span v-else>{{ displayValue(item[tempDataItem.attr]) }}<span v-html="tempDataItem.unit"></span></span>
+              </span>
             </span>
         </el-col>
       </el-row>
@@ -62,6 +64,12 @@ export default {
     }
   },
   methods: {
+    displayValue(value) {
+      return value === undefined || value === null || value === "" ? "-" : value;
+    },
+    isPointLoading(value) {
+      return this.loading && (value === undefined || value === null || value === "" || value === "-");
+    },
     // 查看设备电位表格
     pointDetail(row, dataType) {
       const {deviceId} = row
@@ -117,4 +125,16 @@ export default {
     }
   }
 }
+
+.point-loading-icon {
+  color: #409eff;
+  display: inline-block;
+  transform-origin: center;
+  animation: pointLoadingSpinPulse 1.1s linear infinite;
+}
+@keyframes pointLoadingSpinPulse {
+  0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
+  50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
+  100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
+}
 </style>

src/views/ems/dzjk/sbjk/ems/index.vue

@@ -1,126 +1,217 @@
 <template>
-  <div v-loading="loading" class="ems">
+  <div>
+    <div class="pcs-tags">
+      <el-tag
+        size="small"
+        :type="selectedSectionKey ? 'info' : 'primary'"
+        :effect="selectedSectionKey ? 'plain' : 'dark'"
+        class="pcs-tag-item"
+        @click="handleTagClick('')"
+      >
+        全部
+      </el-tag>
+      <el-tag
+        v-for="(group, index) in sectionGroups"
+        :key="index + 'emsTag'"
+        size="small"
+        :type="selectedSectionKey === group.sectionKey ? 'primary' : 'info'"
+        :effect="selectedSectionKey === group.sectionKey ? 'dark' : 'plain'"
+        class="pcs-tag-item"
+        @click="handleTagClick(group.sectionKey)"
+      >
+        {{ group.displayName || group.sectionName || "EMS" }}
+      </el-tag>
+    </div>
     <el-card
-        v-for="(item,index) in list"
-        :key="index+'emsList'"
-        class="sbjk-card-container list running-card-container"
-        shadow="always"
+      v-for="(group, index) in filteredSectionGroups"
+      :key="index + 'emsSection'"
+      class="sbjk-card-container list running-card-container"
+      shadow="always"
     >
       <div slot="header">
-        <span class="large-title">{{ item.deviceName }}</span>
+        <span class="large-title">{{ group.displayName || group.sectionName || "EMS" }}</span>
         <div class="info">
-          <div>
-            EMS控制模式: {{
-              item.emsStatus === 0 ? '自动' : '手动'
-            }}
-          </div>
-          <div>数据更新时间：{{ item.dataUpdateTime }}</div>
-        </div>
-        <div class="alarm">
-          <el-button size="small" round style="margin-right:20px;" type="primary" @click="pointDetail(item,'point')">详细
-          </el-button>
-          <el-badge :hidden="!item.alarmNum" :value="item.alarmNum || 0" class="item">
-            <i
-                class="el-icon-message-solid alarm-icon"
-                @click="pointDetail(item,'alarmPoint')"
-            ></i>
-          </el-badge>
+          <div>状态：{{ group.statusText }}</div>
+          <div>数据更新时间：{{ group.updateTimeText }}</div>
         </div>
       </div>
       <el-row class="device-info-row">
-        <el-col v-for="(tempDataItem,tempDataIndex) in bmsDataList" :key="tempDataIndex+'bmsTempData'"
-                :span="6" class="device-info-col">
-            <span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
-              <span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
-                v-html="tempDataItem.unit"></span></span>
-            </span>
-        </el-col>
-        <el-col v-for="(tempDataItem,tempDataIndex) in pcsDataList" :key="tempDataIndex+'pcsTempData'"
-                :span="6" class="device-info-col">
-            <span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
-              <span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
-                v-html="tempDataItem.unit"></span></span>
-            </span>
+        <el-col
+          v-for="(item, dataIndex) in group.items"
+          :key="dataIndex + 'emsField'"
+          :span="6"
+          class="device-info-col"
+        >
+          <span class="left">{{ item.fieldName }}</span>
+          <span class="right">
+            <i v-if="isPointLoading(item.fieldValue)" class="el-icon-loading point-loading-icon"></i>
+            <span v-else>{{ displayValue(item.fieldValue) | formatNumber }}</span>
+          </span>
         </el-col>
       </el-row>
     </el-card>
-
-    <el-empty v-show="list.length <= 0" :image-size="200"></el-empty>
-    <point-chart ref="pointChart" :site-id="siteId"/>
-    <point-table ref="pointTable"/>
   </div>
 </template>
 
 <script>
-import pointChart from "./../PointChart.vue";
-import PointTable from "@/views/ems/site/sblb/PointTable.vue";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getEmsDataList} from "@/api/ems/dzjk";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
+import { getProjectDisplayData } from "@/api/ems/dzjk";
+import { getDeviceList } from "@/api/ems/site";
 
 export default {
   name: "DzjkSbjkEms",
-  components: {pointChart, PointTable},
   mixins: [getQuerySiteId, intervalUpdate],
   data() {
     return {
       loading: false,
-      list: [],
-      bmsDataList: [{
-        name: 'BMS1SOC',
-        attr: 'bms1Soc'
-      },
-        {
-          name: 'BMS2SOC',
-          attr: 'bms2Soc'
-        },
-        {
-          name: 'BMS3SOC',
-          attr: 'bms3Soc'
-        },
-        {
-          name: 'BMS4SOC',
-          attr: 'bms4Soc'
-        }],
-      pcsDataList: [{
-        name: 'PCS-1有功功率',
-        attr: 'pcs1Yggl'
-      },
-        {
-          name: 'PCS-2有功功率',
-          attr: 'pcs2Yggl'
-        },
-        {
-          name: 'PCS-3有功功率',
-          attr: 'pcs3Yggl'
-        },
-        {
-          name: 'PCS-4有功功率',
-          attr: 'pcs4Yggl'
-        }]
+      displayData: [],
+      selectedSectionKey: "",
+      emsDeviceList: [],
     };
   },
+  computed: {
+    moduleDisplayData() {
+      return (this.displayData || []).filter((item) => item.menuCode === "SBJK_EMS");
+    },
+    emsTemplateFields() {
+      const source = this.moduleDisplayData || [];
+      const result = [];
+      const seen = new Set();
+      source.forEach((item) => {
+        const fieldName = String(item?.fieldName || "").trim();
+        if (!fieldName || seen.has(fieldName)) {
+          return;
+        }
+        seen.add(fieldName);
+        result.push(fieldName);
+      });
+      return result.length > 0 ? result : this.fallbackFields;
+    },
+    sectionGroups() {
+      const source = this.moduleDisplayData || [];
+      const devices = (this.emsDeviceList || []).length > 0
+        ? this.emsDeviceList
+        : [{ deviceId: "", deviceName: "EMS" }];
+
+      return devices.map((device, index) => {
+        const deviceId = String(device?.deviceId || device?.id || "").trim();
+        const sectionKey = deviceId || `EMS_${index}`;
+        const displayName = String(device?.deviceName || device?.name || deviceId || `EMS${index + 1}`).trim();
+        const exactRows = source.filter((item) => String(item?.deviceId || "").trim() === deviceId);
+        const fallbackRows = source.filter((item) => !String(item?.deviceId || "").trim());
+
+        const exactValueMap = {};
+        exactRows.forEach((item) => {
+          const key = String(item?.fieldName || "").trim();
+          if (key) {
+            exactValueMap[key] = item;
+          }
+        });
+        const fallbackValueMap = {};
+        fallbackRows.forEach((item) => {
+          const key = String(item?.fieldName || "").trim();
+          if (key && fallbackValueMap[key] === undefined) {
+            fallbackValueMap[key] = item;
+          }
+        });
+
+        const items = (this.emsTemplateFields || []).map((fieldName) => {
+          const row = exactValueMap[fieldName] || fallbackValueMap[fieldName] || {};
+          return {
+            fieldName,
+            fieldValue: row.fieldValue,
+            valueTime: row.valueTime,
+          };
+        });
+
+        const statusItem = (items || []).find((it) => String(it.fieldName || "").includes("状态"));
+        const timestamps = [...exactRows, ...fallbackRows]
+          .map((it) => new Date(it?.valueTime).getTime())
+          .filter((ts) => !isNaN(ts));
+
+        return {
+          sectionName: displayName,
+          sectionKey,
+          displayName,
+          deviceId,
+          items,
+          statusText: this.displayValue(statusItem ? statusItem.fieldValue : "-"),
+          updateTimeText: timestamps.length > 0 ? this.formatDate(new Date(Math.max(...timestamps))) : "-",
+        };
+      });
+    },
+    displaySectionGroups() {
+      if (this.sectionGroups.length > 0) {
+        return this.sectionGroups;
+      }
+      return [
+        {
+          sectionName: "EMS",
+          items: this.fallbackFields.map((fieldName) => ({ fieldName, fieldValue: "-" })),
+          statusText: "-",
+          updateTimeText: "-",
+        },
+      ];
+    },
+    filteredSectionGroups() {
+      const groups = this.displaySectionGroups || [];
+      if (!this.selectedSectionKey) {
+        return groups;
+      }
+      return groups.filter((group) => group.sectionKey === this.selectedSectionKey);
+    },
+    fallbackFields() {
+      return [
+        "BMS1SOC",
+        "BMS2SOC",
+        "BMS3SOC",
+        "BMS4SOC",
+        "PCS-1有功功率",
+        "PCS-2有功功率",
+        "PCS-3有功功率",
+        "PCS-4有功功率",
+      ];
+    },
+  },
   methods: {
-    // 查看设备电位表格
-    pointDetail(row, dataType) {
-      const {deviceId} = row
-      this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'EMS'}, dataType)
+    handleTagClick(sectionKey) {
+      this.selectedSectionKey = sectionKey || "";
     },
-    showChart(pointName, deviceId) {
-      pointName &&
-      this.$refs.pointChart.showChart({pointName, deviceCategory: 'EMS', deviceId});
+    displayValue(value) {
+      return value === undefined || value === null || value === "" ? "-" : value;
     },
-    getData() {
-      this.loading = true;
-      getEmsDataList(this.siteId)
-          .then((response) => {
-            const data = response?.data || {};
-            this.list = JSON.parse(JSON.stringify(data));
-          })
-          .finally(() => (this.loading = false));
+    isPointLoading(value) {
+      return this.loading && (value === undefined || value === null || value === "" || value === "-");
+    },
+    formatDate(date) {
+      if (!(date instanceof Date) || isNaN(date.getTime())) {
+        return "-";
+      }
+      const p = (n) => String(n).padStart(2, "0");
+      return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(
+        date.getMinutes()
+      )}:${p(date.getSeconds())}`;
+    },
+    getEmsDeviceList() {
+      return getDeviceList(this.siteId)
+        .then((response) => {
+          const list = response?.data || [];
+          this.emsDeviceList = list.filter((item) => item.deviceCategory === "EMS");
+        })
+        .catch(() => {
+          this.emsDeviceList = [];
+        });
     },
     updateData() {
-      this.getData();
+      this.loading = true;
+      Promise.all([getProjectDisplayData(this.siteId), this.getEmsDeviceList()])
+        .then(([response]) => {
+          this.displayData = response?.data || [];
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     init() {
       this.updateData();
@@ -130,4 +221,43 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped lang="scss">
+.sbjk-card-container {
+  &.list:not(:last-child) {
+    margin-bottom: 25px;
+  }
+
+  .info {
+    float: right;
+    text-align: right;
+    font-size: 12px;
+    color: #666;
+    line-height: 18px;
+  }
+}
+
+.pcs-tags {
+  margin: 0 0 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.pcs-tag-item {
+  cursor: pointer;
+}
+
+.point-loading-icon {
+  color: #409eff;
+  display: inline-block;
+  transform-origin: center;
+  animation: pointLoadingSpinPulse 1.1s linear infinite;
+}
+@keyframes pointLoadingSpinPulse {
+  0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
+  50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
+  100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
+}
+</style>

src/views/ems/dzjk/sbjk/index.vue

@@ -72,4 +72,3 @@ export default {
   flex: 1;
 }
 </style>
-

src/views/ems/dzjk/sbjk/pcs/index.vue

@@ -1,9 +1,29 @@
 <template>
-  <div v-loading="loading" class="pcs-ems-dashboard-editor-container">
-    <!--    顶部六个方块-->
-    <real-time-base-info :data="runningHeadData"/>
+  <div class="pcs-ems-dashboard-editor-container">
+    <div class="pcs-tags">
+      <el-tag
+          size="small"
+          :type="selectedPcsId ? 'info' : 'primary'"
+          :effect="selectedPcsId ? 'plain' : 'dark'"
+          class="pcs-tag-item"
+          @click="handleTagClick('')"
+      >
+        全部
+      </el-tag>
+      <el-tag
+          v-for="(item, index) in pcsDeviceList"
+          :key="index + 'pcsTag'"
+          size="small"
+          :type="selectedPcsId === (item.deviceId || item.id) ? 'primary' : 'info'"
+          :effect="selectedPcsId === (item.deviceId || item.id) ? 'dark' : 'plain'"
+          class="pcs-tag-item"
+          @click="handleTagClick(item.deviceId || item.id || '')"
+      >
+        {{ item.deviceName || item.deviceId || item.id || 'PCS' }}
+      </el-tag>
+    </div>
     <div
-        v-for="(pcsItem, pcsIndex) in pcsList"
+        v-for="(pcsItem, pcsIndex) in filteredPcsList"
         :key="pcsIndex + 'PcsHome'"
         style="margin-bottom: 25px"
     >
@@ -18,19 +38,11 @@
           >
           <div class="info">
             <div>
-              {{
-                $store.state.ems.communicationStatusOptions[
-                    pcsItem.communicationStatus
-                    ]
-              }}
+              {{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[pcsItem.communicationStatus] || '-' }}
             </div>
             <div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
           </div>
           <div class="alarm">
-            <el-button type="primary" round size="small" style="margin-right:20px;"
-                       @click="pointDetail(pcsItem,'point')">
-              详细
-            </el-button>
             <el-badge :hidden="!pcsItem.alarmNum" :value="pcsItem.alarmNum || 0" class="item">
               <i
                   class="el-icon-message-solid alarm-icon"
@@ -46,9 +58,7 @@
                 :span="1"
                 label="工作状态"
                 labelClassName="descriptions-label"
-            >{{
-                PCSWorkStatusOptions[pcsItem.workStatus]
-              }}
+            >{{ formatDictValue((PCSWorkStatusOptions || {}), pcsItem.workStatus) }}
             </el-descriptions-item
             >
             <el-descriptions-item
@@ -56,9 +66,7 @@
                 contentClassName="descriptions-direction"
                 label="并网状态"
                 labelClassName="descriptions-label"
-            >{{
-                $store.state.ems.gridStatusOptions[pcsItem.gridStatus]
-              }}
+            >{{ formatDictValue((($store.state.ems && $store.state.ems.gridStatusOptions) || {}), pcsItem.gridStatus) }}
             </el-descriptions-item
             >
             <el-descriptions-item
@@ -68,9 +76,7 @@
                 :span="1"
                 label="设备状态"
                 labelClassName="descriptions-label"
-            >{{
-                $store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]
-              }}
+            >{{ formatDictValue((($store.state.ems && $store.state.ems.deviceStatusOptions) || {}), pcsItem.deviceStatus) }}
             </el-descriptions-item
             >
             <el-descriptions-item
@@ -78,9 +84,7 @@
                 contentClassName="descriptions-direction"
                 label="控制模式"
                 labelClassName="descriptions-label"
-            >{{
-                $store.state.ems.controlModeOptions[pcsItem.controlMode]
-              }}
+            >{{ formatDictValue((($store.state.ems && $store.state.ems.controlModeOptions) || {}), pcsItem.controlMode) }}
             </el-descriptions-item
             >
           </el-descriptions>
@@ -105,7 +109,8 @@
                   showChart(item.pointName || '', pcsItem.deviceId)
                 "
               >
-                {{ pcsItem[item.attr] | formatNumber }}
+                <i v-if="isPointLoading(pcsItem[item.attr])" class="el-icon-loading point-loading-icon"></i>
+                <span v-else>{{ displayValue(pcsItem[item.attr]) | formatNumber }}</span>
                 <span v-if="item.unit" v-html="item.unit"></span>
               </span>
             </el-descriptions-item>
@@ -171,7 +176,6 @@
         </div>
       </el-card>
     </div>
-    <el-empty v-show="pcsList.length <= 0" :image-size="200"></el-empty>
     <point-chart ref="pointChart" :site-id="siteId"/>
     <point-table ref="pointTable"/>
   </div>
@@ -180,26 +184,39 @@
 <script>
 import pointChart from "./../PointChart.vue";
 import PointTable from "@/views/ems/site/sblb/PointTable.vue";
-import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getPcsDetailInfo, getRunningHeadInfo} from "@/api/ems/dzjk";
+import {getPcsNameList, getProjectDisplayData} from "@/api/ems/dzjk";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 import {mapState} from "vuex";
 
 export default {
   name: "DzjkSbjkPcs",
-  components: {RealTimeBaseInfo, pointChart, PointTable},
+  components: {pointChart, PointTable},
   mixins: [getQuerySiteId, intervalUpdate],
   computed: {
     ...mapState({
       PCSWorkStatusOptions: state => state?.ems?.PCSWorkStatusOptions || {},
-    })
+    }),
+    filteredPcsList() {
+      if (!this.selectedPcsId) {
+        return this.pcsList || [];
+      }
+      return (this.pcsList || []).filter(item => item.deviceId === this.selectedPcsId);
+    },
   },
   data() {
     return {
       loading: false,
-      runningHeadData: {}, //运行信息
-      pcsList: [],
+      displayData: [],
+      pcsDeviceList: [],
+      selectedPcsId: "",
+      pcsList: [{
+        deviceId: "",
+        deviceName: "PCS",
+        dataUpdateTime: "-",
+        alarmNum: 0,
+        pcsBranchInfoList: [],
+      }],
       infoData: [
         {
           label: "总交流有功功率",
@@ -277,13 +294,43 @@ export default {
           pointName: "交流频率",
         },
       ],
-      pcsBranchList: [], //pcs的支路列表
     };
   },
   methods: {
+    displayValue(value) {
+      return value === undefined || value === null || value === "" ? "-" : value;
+    },
+    isPointLoading(value) {
+      return this.loading && (value === undefined || value === null || value === "" || value === "-");
+    },
+    normalizeDictKey(value) {
+      const raw = String(value == null ? "" : value).trim();
+      if (!raw) return "";
+      if (/^-?\d+(\.0+)?$/.test(raw)) {
+        return String(parseInt(raw, 10));
+      }
+      return raw;
+    },
+    formatDictValue(options, value) {
+      const dict = (options && typeof options === "object") ? options : {};
+      const key = this.normalizeDictKey(value);
+      if (!key) return "-";
+      return dict[key] || key;
+    },
+    normalizeDeviceId(value) {
+      return String(value == null ? "" : value).trim().toUpperCase();
+    },
     handleCardClass(item) {
-      const {workStatus = ''} = item
-      return workStatus === '1' || !Object.keys(this.PCSWorkStatusOptions).find(i => i === workStatus) ? "timing-card-container" : workStatus === '2' ? 'warning-card-container' : 'running-card-container'
+      const workStatus = this.normalizeDictKey((item && item.workStatus) || "");
+      const statusOptions = (this.PCSWorkStatusOptions && typeof this.PCSWorkStatusOptions === 'object')
+        ? this.PCSWorkStatusOptions
+        : {};
+      const hasStatus = Object.prototype.hasOwnProperty.call(statusOptions, workStatus);
+      return workStatus === '1' || !hasStatus
+        ? "timing-card-container"
+        : workStatus === '2'
+          ? 'warning-card-container'
+          : 'running-card-container';
     },
     // 查看设备电位表格
     pointDetail(row, dataType) {
@@ -294,24 +341,92 @@ export default {
       pointName &&
       this.$refs.pointChart.showChart({pointName, deviceCategory: isBranch ? 'BRANCH' : 'PCS', deviceId});
     },
-    //6个方块数据
-    getRunningHeadData() {
-      getRunningHeadInfo(this.siteId).then((response) => {
-        this.runningHeadData = response?.data || {};
+    handleTagClick(deviceId) {
+      this.selectedPcsId = deviceId || "";
+    },
+    getModuleRows(menuCode, sectionName) {
+      return (this.displayData || []).filter(item => item.menuCode === menuCode && item.sectionName === sectionName);
+    },
+    getFieldName(fieldCode) {
+      if (!fieldCode) {
+        return "";
+      }
+      const index = fieldCode.lastIndexOf("__");
+      return index >= 0 ? fieldCode.slice(index + 2) : fieldCode;
+    },
+    getFieldMap(rows = [], deviceId = "") {
+      const map = {};
+      const targetDeviceId = this.normalizeDeviceId(deviceId || "");
+      // 设备维度优先：先吃 device_id 对应值，再用默认值(空 device_id)补齐
+      rows.forEach(item => {
+        if (!item || !item.fieldCode) {
+          return;
+        }
+        const itemDeviceId = this.normalizeDeviceId(item.deviceId || "");
+        if (itemDeviceId !== targetDeviceId) {
+          return;
+        }
+        map[this.getFieldName(item.fieldCode)] = item.fieldValue;
+      });
+      rows.forEach(item => {
+        if (!item || !item.fieldCode) {
+          return;
+        }
+        const itemDeviceId = this.normalizeDeviceId(item.deviceId || "");
+        if (itemDeviceId !== "") {
+          return;
+        }
+        const fieldName = this.getFieldName(item.fieldCode);
+        if (map[fieldName] === undefined || map[fieldName] === null || map[fieldName] === "") {
+          map[fieldName] = item.fieldValue;
+        }
+      });
+      return map;
+    },
+    getLatestTime(menuCode) {
+      const times = (this.displayData || [])
+        .filter(item => item.menuCode === menuCode && item.valueTime)
+        .map(item => new Date(item.valueTime).getTime())
+        .filter(ts => !isNaN(ts));
+      if (times.length === 0) {
+        return '-';
+      }
+      const date = new Date(Math.max(...times));
+      const p = (n) => String(n).padStart(2, '0');
+      return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(date.getMinutes())}:${p(date.getSeconds())}`;
+    },
+    getPcsDeviceList() {
+      return getPcsNameList(this.siteId).then((response) => {
+        this.pcsDeviceList = response?.data || [];
+      }).catch(() => {
+        this.pcsDeviceList = [];
       });
     },
-    getPcsList() {
-      this.loading = true;
-      getPcsDetailInfo(this.siteId)
-          .then((response) => {
-            const data = response?.data || {};
-            this.pcsList = JSON.parse(JSON.stringify(data));
-          })
-          .finally(() => (this.loading = false));
+    buildPcsList() {
+      const devices = (this.pcsDeviceList && this.pcsDeviceList.length > 0)
+        ? this.pcsDeviceList
+        : [{deviceId: this.siteId, deviceName: 'PCS'}];
+      this.pcsList = devices.map((device) => ({
+        ...this.getFieldMap(this.getModuleRows('SBJK_PCS', '电参量'), device.deviceId || device.id || this.siteId),
+        deviceId: device.deviceId || device.id || this.siteId,
+        deviceName: device.deviceName || device.name || device.deviceId || device.id || 'PCS',
+        ...this.getFieldMap(this.getModuleRows('SBJK_PCS', '状态'), device.deviceId || device.id || this.siteId),
+        dataUpdateTime: this.getLatestTime('SBJK_PCS'),
+        alarmNum: 0,
+        pcsBranchInfoList: [],
+      }));
     },
     updateData() {
-      this.getRunningHeadData();
-      this.getPcsList();
+      this.loading = true;
+      // 先渲染卡片框架，字段值走单点位 loading
+      this.buildPcsList();
+      Promise.all([
+        getProjectDisplayData(this.siteId),
+        this.getPcsDeviceList(),
+      ]).then(([displayResponse]) => {
+        this.displayData = displayResponse?.data || [];
+        this.buildPcsList();
+      }).finally(() => (this.loading = false));
     },
     init() {
       this.updateData();
@@ -320,5 +435,29 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.pcs-tags {
+  margin: 0 0 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-start;
+  align-items: center;
+}
 
-<style lang="scss" scoped></style>
+.pcs-tag-item {
+  cursor: pointer;
+}
+
+.point-loading-icon {
+  color: #409eff;
+  display: inline-block;
+  transform-origin: center;
+  animation: pointLoadingSpinPulse 1.1s linear infinite;
+}
+@keyframes pointLoadingSpinPulse {
+  0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
+  50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
+  100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
+}
+</style>

src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue

@@ -6,7 +6,7 @@
     <div slot="header">
       <span class="card-title">PCS有功功率/PCS无功功率</span>
     </div>
-    <div style="height: 360px" id="cnglqxChart"/>
+    <div ref="chartRef" style="height: 360px" />
   </el-card>
 </template>
 
@@ -14,17 +14,23 @@
 <script>
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
-import {storagePower} from "@/api/ems/dzjk";
+import { getPointConfigCurve } from "@/api/ems/site";
 
 export default {
   mixins: [resize],
+  props: {
+    displayData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       chart: null,
     };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector("#cnglqxChart"));
+    this.chart = echarts.init(this.$refs.chartRef);
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -35,56 +41,61 @@ export default {
   },
   methods: {
     init(siteId, timeRange) {
-      this.chart.showLoading();
-      const [startTime = '', endTime = ''] = timeRange;
-      storagePower(siteId, startTime, endTime)
+      const [startTime = "", endTime = ""] = timeRange;
+      const query = {
+        rangeType: "custom",
+        startTime: this.normalizeDateTime(startTime, false),
+        endTime: this.normalizeDateTime(endTime, true),
+        siteId
+      };
+      const rows = (this.displayData || []).filter(
+        (item) =>
+          item &&
+          item.useFixedDisplay !== 1 &&
+          [
+            "SBJK_SSYX__curvePcsActivePower",
+            "SBJK_SSYX__curvePcsReactivePower"
+          ].includes(item.fieldCode) &&
+          item.dataPoint
+      );
+      const tasks = rows.map((row) => {
+        const pointId = String(row.dataPoint || "").trim();
+        if (!pointId) return Promise.resolve(null);
+        return getPointConfigCurve({
+          ...query,
+          pointId
+        })
           .then((response) => {
-            this.setOption(response?.data?.pcsPowerList || []);
+            const list = response?.data || [];
+            return {
+              name: row.fieldName || row.fieldCode || pointId,
+              data: list
+                .map((item) => [
+                  this.parseToTimestamp(item.dataTime),
+                  Number(item.pointValue)
+                ])
+                .filter((item) => item[0] && !Number.isNaN(item[1]))
+            };
           })
-          .finally(() => {
-            this.chart.hideLoading();
-          });
-    },
-    setOption(data) {
-      let xdata = [],
-          series = [];
-      data.forEach((element, index) => {
-        if (index === 0) {
-          xdata = (element.energyStoragePowList || []).map((i) => i.createDate);
-        }
-        series.push(
-            {
-              type: "line",
-              name: `${element.deviceId}有功功率`,
-              areaStyle: {
-                // color:'#FFBD00'
-              },
-              data: (element.energyStoragePowList || []).map(
-                  (i) => {
-                    return {
-                      value: i.pcsTotalActPower,
-                      year: i.dateDay || ''
-                    }
-                  }
-              )
-            },
-            {
-              type: "line",
-              name: `${element.deviceId}无功功率`,
-              areaStyle: {
-                // color:'#FFBD00'
-              },
-              data: (element.energyStoragePowList || []).map(
-                  (i) => {
-                    return {
-                      value: i.pcsTotalReactivePower,
-                      year: i.dateDay || ''
-                    }
-                  }
-              ),
-            }
-        );
+          .catch(() => null);
       });
+      Promise.all(tasks)
+        .then((series) => {
+          this.setOption((series || []).filter(Boolean));
+        });
+    },
+    normalizeDateTime(value, endOfDay) {
+      const raw = String(value || "").trim();
+      if (!raw) return "";
+      if (raw.includes(" ")) return raw;
+      return `${raw} ${endOfDay ? "23:59:59" : "00:00:00"}`;
+    },
+    parseToTimestamp(value) {
+      if (!value) return null;
+      const t = new Date(value).getTime();
+      return Number.isNaN(t) ? null : t;
+    },
+    setOption(seriesData = []) {
       this.chart && this.chart.setOption({
         legend: {
           left: "center",
@@ -102,26 +113,13 @@ export default {
           show: true,
           trigger: "axis",
           axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-          },
-          formatter: (params) => {
-            if (params.length <= 0) return
-            let result = (params[0].data.year || '') + ' ' + params[0].name + '<div>'
-            params.forEach(item => {
-              const {color, seriesName, value} = item
-              result += `<div style="position: relative;padding-left:20px;line-height: 20px;">
-                <div style="position: absolute;top:50%;left:0;width:12px;height:12px;border-radius:100%;background: ${color};transform: translateY(-50%)"></div>
-                <span>${seriesName}</span><span style="margin-left:20px;font-weight: 700">${value}</span></div>`
-            })
-            result += '</div>'
-            return result
+            type: "cross",
           }
         },
         textStyle: {
           color: "#333333",
         },
-        xAxis: {type: "category", data: xdata},
+        xAxis: { type: "time" },
         yAxis: {
           type: "value",
         },
@@ -136,7 +134,16 @@ export default {
             end: 100,
           },
         ],
-        series,
+        series: seriesData.map((item) => ({
+          type: "line",
+          name: item.name,
+          showSymbol: false,
+          smooth: true,
+          areaStyle: {
+            opacity: 0.35
+          },
+          data: item.data
+        })),
       }, true);
     },
   },

src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue

@@ -6,7 +6,7 @@
     <div slot="header">
       <span class="card-title">平均SOC</span>
     </div>
-    <div style="height: 360px" id="dcpjsocChart" />
+    <div ref="chartRef" style="height: 360px" />
   </el-card>
 </template>
 
@@ -14,16 +14,22 @@
 <script>
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
-import { batteryAveSoc } from "@/api/ems/dzjk";
+import { getPointConfigCurve } from "@/api/ems/site";
 export default {
   mixins: [resize],
+  props: {
+    displayData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       chart: null,
     };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector("#dcpjsocChart"));
+    this.chart = echarts.init(this.$refs.chartRef);
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -34,26 +40,47 @@ export default {
   },
   methods: {
     init(siteId,timeRange) {
-      this.chart.showLoading();
       const [startTime='', endTime=''] = timeRange;
-      batteryAveSoc(siteId,startTime,endTime)
+      const row = (this.displayData || []).find(
+        (item) =>
+          item &&
+          item.fieldCode === "SBJK_SSYX__curveBatteryAveSoc" &&
+          item.useFixedDisplay !== 1 &&
+          item.dataPoint
+      );
+      const pointId = String(row?.dataPoint || "").trim();
+      if (!pointId) {
+        this.setOption([]);
+        return;
+      }
+      getPointConfigCurve({
+        siteId,
+        pointId,
+        rangeType: "custom",
+        startTime: this.normalizeDateTime(startTime, false),
+        endTime: this.normalizeDateTime(endTime, true)
+      })
         .then((response) => {
-          this.setOption(response?.data?.batteryAveSOCList || []);
-        })
-        .finally(() => {
-          this.chart.hideLoading();
+          const list = response?.data || [];
+          this.setOption(
+            list
+              .map((item) => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
+              .filter((item) => item[0] && !Number.isNaN(item[1]))
+          );
         });
     },
-    setOption(data) {
-      let xdata = [],
-        ydata = [];
-      data.forEach((element) => {
-        xdata.push(element.createDate);
-        ydata.push({
-          value:element.batterySOC,
-          year:element.dateDay,
-        });
-      });
+    normalizeDateTime(value, endOfDay) {
+      const raw = String(value || "").trim();
+      if (!raw) return "";
+      if (raw.includes(" ")) return raw;
+      return `${raw} ${endOfDay ? "23:59:59" : "00:00:00"}`;
+    },
+    parseToTimestamp(value) {
+      if (!value) return null;
+      const t = new Date(value).getTime();
+      return Number.isNaN(t) ? null : t;
+    },
+    setOption(data = []) {
       this.chart && this.chart.setOption({
         legend: {
           left: "center",
@@ -71,26 +98,13 @@ export default {
           show:true,
           trigger: "axis",
           axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-          },
-          formatter :(params)=>{
-            if(params.length <= 0) return
-            let result = (params[0].data.year || '')+' '+params[0].name + '<div>'
-            params.forEach(item=>{
-              const {color,seriesName,value} = item
-              result +=  `<div style="position: relative;padding-left:20px;line-height: 20px;">
-                <div style="position: absolute;top:50%;left:0;width:12px;height:12px;border-radius:100%;background: ${color};transform: translateY(-50%)"></div>
-                <span>${seriesName}</span><span style="margin-left:20px;font-weight: 700">${value}</span></div>`
-            })
-            result+='</div>'
-            return result
+            type: "cross",
           }
         },
         textStyle: {
           color: "#333333",
         },
-        xAxis: { type: "category", data: xdata },
+        xAxis: { type: "time" },
         yAxis: {
           type: "value",
         },
@@ -109,10 +123,12 @@ export default {
           {
             type: "line",
             name: `平均SOC`,
+            showSymbol: false,
+            smooth: true,
             areaStyle: {
-              // color:'#FFBD00'
+              opacity: 0.35
             },
-            data: ydata,
+            data,
           },
         ],
       },true);

src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue

@@ -6,7 +6,7 @@
     <div slot="header">
       <span class="card-title">电池平均温度</span>
     </div>
-    <div style="height: 360px" id="dcpjwdChart" />
+    <div ref="chartRef" style="height: 360px" />
   </el-card>
 </template>
 
@@ -14,17 +14,23 @@
 <script>
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
-import { batteryAveTemp } from "@/api/ems/dzjk";
+import { getPointConfigCurve } from "@/api/ems/site";
 
 export default {
   mixins: [resize],
+  props: {
+    displayData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       chart: null,
     };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector("#dcpjwdChart"));
+    this.chart = echarts.init(this.$refs.chartRef);
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -35,28 +41,47 @@ export default {
   },
   methods: {
     init(siteId,timeRange) {
-      this.chart.showLoading();
       const [startTime='', endTime=''] = timeRange;
-      batteryAveTemp(siteId,startTime,endTime)
+      const row = (this.displayData || []).find(
+        (item) =>
+          item &&
+          item.fieldCode === "SBJK_SSYX__curveBatteryAveTemp" &&
+          item.useFixedDisplay !== 1 &&
+          item.dataPoint
+      );
+      const pointId = String(row?.dataPoint || "").trim();
+      if (!pointId) {
+        this.setOption([]);
+        return;
+      }
+      getPointConfigCurve({
+        siteId,
+        pointId,
+        rangeType: "custom",
+        startTime: this.normalizeDateTime(startTime, false),
+        endTime: this.normalizeDateTime(endTime, true)
+      })
         .then((response) => {
-          this.setOption(response?.data?.batteryAveTempList || []);
-        })
-        .finally(() => {
-          this.chart.hideLoading();
+          const list = response?.data || [];
+          this.setOption(
+            list
+              .map((item) => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
+              .filter((item) => item[0] && !Number.isNaN(item[1]))
+          );
         });
     },
-    setOption(data) {
-      let xdata = [],
-        ydata = [];
-      data.forEach((element) => {
-        xdata.push(element.createDate);
-        ydata.push(
-          {
-            value: element.batteryTemp,
-            year: element.dateDay
-          }
-        );
-      });
+    normalizeDateTime(value, endOfDay) {
+      const raw = String(value || "").trim();
+      if (!raw) return "";
+      if (raw.includes(" ")) return raw;
+      return `${raw} ${endOfDay ? "23:59:59" : "00:00:00"}`;
+    },
+    parseToTimestamp(value) {
+      if (!value) return null;
+      const t = new Date(value).getTime();
+      return Number.isNaN(t) ? null : t;
+    },
+    setOption(data = []) {
       this.chart && this.chart.setOption({
         legend: {
           left: "center",
@@ -74,26 +99,13 @@ export default {
           show:true,
           trigger: "axis",
           axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-          },
-          formatter :(params)=>{
-            if(params.length <= 0) return
-            let result = (params[0].data.year || '')+' '+params[0].name + '<div>'
-            params.forEach(item=>{
-              const {color,seriesName,value} = item
-              result +=  `<div style="position: relative;padding-left:20px;line-height: 20px;">
-                <div style="position: absolute;top:50%;left:0;width:12px;height:12px;border-radius:100%;background: ${color};transform: translateY(-50%)"></div>
-                <span>${seriesName}</span><span style="margin-left:20px;font-weight: 700">${value}</span></div>`
-            })
-            result+='</div>'
-            return result
+            type: "cross",
           }
         },
         textStyle: {
           color: "#333333",
         },
-        xAxis: { type: "category", data: xdata },
+        xAxis: { type: "time" },
         yAxis: {
           type: "value",
         },
@@ -112,10 +124,12 @@ export default {
           {
             type: "line",
             name: `电池平均温度`,
+            showSymbol: false,
+            smooth: true,
             areaStyle: {
-              // color:'#FFBD00'
+              opacity: 0.35
             },
-            data: ydata,
+            data,
           },
         ],
       },true);

src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue

@@ -6,7 +6,7 @@
     <div slot="header">
       <span class="card-title">PCS最高温度</span>
     </div>
-    <div style="height: 360px" id="pocpjwdChart" />
+    <div ref="chartRef" style="height: 360px" />
   </el-card>
 </template>
 
@@ -14,17 +14,24 @@
 <script>
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
-import { pcsMaxTemp } from "@/api/ems/dzjk";
+import { getPointConfigCurve } from "@/api/ems/site";
 
 export default {
   mixins: [resize],
+  props: {
+    displayData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       chart: null,
+      seriesName: "PCS最高温度"
     };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector("#pocpjwdChart"));
+    this.chart = echarts.init(this.$refs.chartRef);
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -35,37 +42,48 @@ export default {
   },
   methods: {
     init(siteId,timeRange) {
-      this.chart.showLoading();
       const [startTime='', endTime=''] = timeRange;
-      pcsMaxTemp(siteId,startTime,endTime)
+      const row = (this.displayData || []).find(
+        (item) =>
+          item &&
+          item.fieldCode === "SBJK_SSYX__curvePcsMaxTemp" &&
+          item.useFixedDisplay !== 1 &&
+          item.dataPoint
+      );
+      const pointId = String(row?.dataPoint || "").trim();
+      this.seriesName = row?.fieldName || "PCS最高温度";
+      if (!pointId) {
+        this.setOption([]);
+        return;
+      }
+      getPointConfigCurve({
+        siteId,
+        pointId,
+        rangeType: "custom",
+        startTime: this.normalizeDateTime(startTime, false),
+        endTime: this.normalizeDateTime(endTime, true)
+      })
         .then((response) => {
-          this.setOption(response?.data?.pcsMaxTempList || []);
-        })
-        .finally(() => {
-          this.chart.hideLoading();
+          const list = response?.data || [];
+          this.setOption(
+            list
+              .map((item) => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
+              .filter((item) => item[0] && !Number.isNaN(item[1]))
+          );
         });
     },
-    setOption(data) {
-      let xdata = [],
-        series = [];
-      data.forEach((element, index) => {
-        if (index === 0) {
-          xdata = (element.maxTempVoList || []).map((i) => i.createDate);
-        }
-        series.push({
-          type: "line",
-          name: `${element.deviceId}最高温度`,
-          areaStyle: {
-            // color:'#FFBD00'
-          },
-          data: (element.maxTempVoList || []).map((i) => {
-            return {
-              value: i.temp,
-              year: i.dateDay
-            }
-          }),
-        });
-      });
+    normalizeDateTime(value, endOfDay) {
+      const raw = String(value || "").trim();
+      if (!raw) return "";
+      if (raw.includes(" ")) return raw;
+      return `${raw} ${endOfDay ? "23:59:59" : "00:00:00"}`;
+    },
+    parseToTimestamp(value) {
+      if (!value) return null;
+      const t = new Date(value).getTime();
+      return Number.isNaN(t) ? null : t;
+    },
+    setOption(data = []) {
       this.chart && this.chart.setOption({
         legend: {
           left: "center",
@@ -83,26 +101,13 @@ export default {
           show:true,
           trigger: "axis",
           axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-          },
-          formatter :(params)=>{
-            if(params.length <= 0) return
-            let result = (params[0].data.year || '')+' '+params[0].name + '<div>'
-            params.forEach(item=>{
-              const {color,seriesName,value} = item
-              result +=  `<div style="position: relative;padding-left:20px;line-height: 20px;">
-                <div style="position: absolute;top:50%;left:0;width:12px;height:12px;border-radius:100%;background: ${color};transform: translateY(-50%)"></div>
-                <span>${seriesName}</span><span style="margin-left:20px;font-weight: 700">${value}</span></div>`
-            })
-            result+='</div>'
-            return result
+            type: "cross",
           }
         },
         textStyle: {
           color: "#333333",
         },
-        xAxis: { type: "category", data: xdata },
+        xAxis: { type: "time" },
         yAxis: {
           type: "value",
         },
@@ -117,7 +122,18 @@ export default {
             end: 100,
           },
         ],
-        series,
+        series: [
+          {
+            type: "line",
+            name: this.seriesName,
+            showSymbol: false,
+            smooth: true,
+            areaStyle: {
+              opacity: 0.35
+            },
+            data
+          }
+        ],
       },true);
     },
   },

src/views/ems/dzjk/sbjk/ssyx/index.vue

@@ -2,24 +2,24 @@
 <template>
 <div class="ssyx-ems-dashboard-editor-container">
 <!--  6个方块-->
-  <real-time-base-info :data="runningHeadData"/>
+  <real-time-base-info :display-data="runningDisplayData" :loading="runningHeadLoading"/>
   <!-- 时间选择 -->
   <date-range-select ref="dateRangeSelect" @updateDate="updateDate" style="margin-top:20px;"/>
 <!--  echart图表-->
   <el-row :gutter="32" style="background:#fff;margin:30px 0;">
     <el-col :xs="24" :sm="12" :lg="12">
-      <cnglqx-chart ref='cnglqx'/>
+      <cnglqx-chart ref='cnglqx' :display-data="runningDisplayData"/>
     </el-col>
     <el-col :xs="24" :sm="12" :lg="12">
-      <pocpjwd-chart ref='pocpjwd'/>
+      <pocpjwd-chart ref='pocpjwd' :display-data="runningDisplayData"/>
     </el-col>
   </el-row>
   <el-row :gutter="32" style="margin:30px 0;">
     <el-col :xs="24" :sm="12" :lg="12">
-      <dcpjsoc-chart ref="dcpjsoc"/>
+      <dcpjsoc-chart ref="dcpjsoc" :display-data="runningDisplayData"/>
     </el-col>
     <el-col :xs="24" :sm="12" :lg="12">
-      <dcpjwd-chart ref="dcpjwd"/>
+      <dcpjwd-chart ref="dcpjwd" :display-data="runningDisplayData"/>
     </el-col>
   </el-row>
 </div>
@@ -36,7 +36,7 @@ import PocpjwdChart from './PocpjwdChart.vue'
 import DcpjwdChart from './DcpjwdChart.vue'
 import DcpjsocChart from './DcpjsocChart.vue'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getRunningHeadInfo} from '@/api/ems/dzjk'
+import {getProjectDisplayData} from '@/api/ems/dzjk'
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
@@ -45,16 +45,20 @@ export default {
   mixins:[getQuerySiteId,intervalUpdate],
   data() {
     return {
-      runningHeadData:{},//运行信息
+      runningDisplayData: [], //单站监控项目配置展示数据
       timeRange:[],
-      isInit:true
+      isInit:true,
+      runningHeadLoading: false,
     }
   },
   methods:{
     //6个方块数据
     getRunningHeadData(){
-      getRunningHeadInfo(this.siteId).then(response => {
-        this.runningHeadData = response?.data || {}
+      this.runningHeadLoading = true
+      return getProjectDisplayData(this.siteId).then((displayResponse) => {
+        this.runningDisplayData = displayResponse?.data || []
+      }).finally(() => {
+        this.runningHeadLoading = false
       })
     },
     // 更新时间范围 重置图表
@@ -71,8 +75,9 @@ export default {
       this.updateInterval(this.updateData)
     },
     updateData(){
-      this.getRunningHeadData()
-      this.updateChart()
+      this.getRunningHeadData().finally(() => {
+        this.updateChart()
+      })
     },
     init(){
       this.$refs.dateRangeSelect.init(true)

src/views/ems/dzjk/sbjk/xf/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading">
+  <div>
     <el-card
         v-for="(item,index) in list"
         :key="index+'ylLise'"
@@ -37,10 +37,11 @@
         <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12"
                 class="device-info-col">
             <span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
-              <span class="left">{{ tempDataItem.title }}</span> <span class="right">{{
-                item[tempDataItem.attr] || '-'
-              }}<span
-                  v-html="tempDataItem.unit"></span></span>
+              <span class="left">{{ tempDataItem.title }}</span>
+              <span class="right">
+                <i v-if="isPointLoading(item[tempDataItem.attr])" class="el-icon-loading point-loading-icon"></i>
+                <span v-else>{{ displayValue(item[tempDataItem.attr]) }}<span v-html="tempDataItem.unit"></span></span>
+              </span>
             </span>
         </el-col>
       </el-row>
@@ -76,6 +77,12 @@ export default {
     }
   },
   methods: {
+    displayValue(value) {
+      return value === undefined || value === null || value === "" ? "-" : value;
+    },
+    isPointLoading(value) {
+      return this.loading && (value === undefined || value === null || value === "" || value === "-");
+    },
     // 查看设备电位表格
     pointDetail(row, dataType) {
       const {deviceId} = row
@@ -131,4 +138,16 @@ export default {
     }
   }
 }
+
+.point-loading-icon {
+  color: #409eff;
+  display: inline-block;
+  transform-origin: center;
+  animation: pointLoadingSpinPulse 1.1s linear infinite;
+}
+@keyframes pointLoadingSpinPulse {
+  0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
+  50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
+  100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
+}
 </style>

src/views/ems/dzjk/sbjk/yl/index.vue

@@ -1,103 +1,253 @@
 <template>
-  <div v-loading="loading">
+  <div>
+    <div class="pcs-tags">
+      <el-tag
+        size="small"
+        :type="selectedSectionKey ? 'info' : 'primary'"
+        :effect="selectedSectionKey ? 'plain' : 'dark'"
+        class="pcs-tag-item"
+        @click="handleTagClick('')"
+      >
+        全部
+      </el-tag>
+      <el-tag
+        v-for="(group, index) in sectionGroups"
+        :key="index + 'ylTag'"
+        size="small"
+        :type="selectedSectionKey === group.sectionKey ? 'primary' : 'info'"
+        :effect="selectedSectionKey === group.sectionKey ? 'dark' : 'plain'"
+        class="pcs-tag-item"
+        @click="handleTagClick(group.sectionKey)"
+      >
+        {{ group.displayName || group.sectionName || "冷却" }}
+      </el-tag>
+    </div>
     <el-card
-        v-for="(item,index) in list"
-        :key="index+'ylLise'"
-        class="sbjk-card-container running-card-container"
-        shadow="always">
+      v-for="(group, index) in filteredSectionGroups"
+      :key="index + 'ylSection'"
+      class="sbjk-card-container list running-card-container"
+      shadow="always"
+    >
       <div slot="header">
-        <span class="large-title">{{ item.deviceName }}</span>
+        <span class="large-title">{{ group.displayName || group.sectionName || "冷却" }}</span>
         <div class="info">
-          <div>数据更新时间：{{ item.dataUpdateTime || '-' }}</div>
-        </div>
-        <div class="alarm">
-          <el-button type="primary" round size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
-            详细
-          </el-button>
-          <el-badge :hidden="!item.alarmNum" :value="item.alarmNum || 0" class="item">
-            <i
-                class="el-icon-message-solid alarm-icon"
-                @click="pointDetail(item,'alarmPoint')"
-            ></i>
-          </el-badge>
+          <div>状态：{{ group.statusText }}</div>
+          <div>数据更新时间：{{ group.updateTimeText }}</div>
         </div>
       </div>
       <el-row class="device-info-row">
-        <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8"
-                class="device-info-col">
-            <span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
-              <span class="left">{{ tempDataItem.title }}</span> <span
-                class="right">{{ item[tempDataItem.attr] || '-' }}<span
-                v-html="tempDataItem.unit"></span></span>
-            </span>
+        <el-col
+          v-for="(item, dataIndex) in group.items"
+          :key="dataIndex + 'ylField'"
+          :span="8"
+          class="device-info-col"
+        >
+          <span class="left">{{ item.fieldName }}</span>
+          <span class="right">
+            <i v-if="isPointLoading(item.fieldValue)" class="el-icon-loading point-loading-icon"></i>
+            <span v-else>{{ displayValue(item.fieldValue) | formatNumber }}</span>
+          </span>
         </el-col>
       </el-row>
     </el-card>
-    <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
-    <point-chart ref="pointChart" :site-id="siteId"/>
-    <point-table ref="pointTable"/>
   </div>
 </template>
 
-
 <script>
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getCoolingDataList} from '@/api/ems/dzjk'
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
-import pointChart from "./../PointChart.vue";
-import PointTable from "@/views/ems/site/sblb/PointTable.vue";
+import { getProjectDisplayData } from "@/api/ems/dzjk";
+import { getDeviceList } from "@/api/ems/site";
 
 export default {
-  name: 'DzjkSbjkYl',
+  name: "DzjkSbjkYl",
   mixins: [getQuerySiteId, intervalUpdate],
-  components: {pointChart, PointTable},
   data() {
     return {
       loading: false,
-      list: [],
-      tempData: [
-        {title: '供水温度', attr: 'gsTemp', unit: '&#8451;'},
-        {title: '回水温度', attr: 'hsTemp', unit: '&#8451;'},
-        {title: '供水压力', attr: 'gsPressure', unit: 'bar'},
-        {title: '回水压力', attr: 'hsPressure', unit: 'bar'},
-        {title: '冷源水温度', attr: 'lysTemp', unit: '&#8451;'},
-        {title: 'VB01开度', attr: 'vb01Kd', unit: '%'},
-        {title: 'VB02开度', attr: 'vb02Kd', unit: '%'},
-      ]
-    }
+      displayData: [],
+      selectedSectionKey: "",
+      coolingDeviceList: [],
+    };
+  },
+  computed: {
+    moduleDisplayData() {
+      return (this.displayData || []).filter((item) => item.menuCode === "SBJK_YL");
+    },
+    ylTemplateFields() {
+      const source = this.moduleDisplayData || [];
+      const result = [];
+      const seen = new Set();
+      source.forEach((item) => {
+        const fieldName = String(item?.fieldName || "").trim();
+        if (!fieldName || seen.has(fieldName)) {
+          return;
+        }
+        seen.add(fieldName);
+        result.push(fieldName);
+      });
+      return result.length > 0 ? result : this.fallbackFields;
+    },
+    sectionGroups() {
+      const source = this.moduleDisplayData || [];
+      const devices = (this.coolingDeviceList || []).length > 0
+        ? this.coolingDeviceList
+        : [{ deviceId: "", deviceName: "冷却" }];
+      return devices.map((device, index) => {
+        const deviceId = String(device?.deviceId || device?.id || "").trim();
+        const sectionKey = deviceId || `COOLING_${index}`;
+        const displayName = String(device?.deviceName || device?.name || deviceId || `冷却${index + 1}`).trim();
+        const exactRows = source.filter((item) => String(item?.deviceId || "").trim() === deviceId);
+        const fallbackRows = source.filter((item) => !String(item?.deviceId || "").trim());
+
+        const exactValueMap = {};
+        exactRows.forEach((item) => {
+          const key = String(item?.fieldName || "").trim();
+          if (key) {
+            exactValueMap[key] = item;
+          }
+        });
+        const fallbackValueMap = {};
+        fallbackRows.forEach((item) => {
+          const key = String(item?.fieldName || "").trim();
+          if (key && fallbackValueMap[key] === undefined) {
+            fallbackValueMap[key] = item;
+          }
+        });
+
+        const items = (this.ylTemplateFields || []).map((fieldName) => {
+          const row = exactValueMap[fieldName] || fallbackValueMap[fieldName] || {};
+          return {
+            fieldName,
+            fieldValue: row.fieldValue,
+            valueTime: row.valueTime,
+          };
+        });
+
+        const statusItem = (items || []).find((it) => String(it.fieldName || "").includes("状态"));
+        const timestamps = [...exactRows, ...fallbackRows]
+          .map((it) => new Date(it?.valueTime).getTime())
+          .filter((ts) => !isNaN(ts));
+
+        return {
+          sectionName: displayName,
+          sectionKey,
+          displayName,
+          deviceId,
+          items,
+          statusText: this.displayValue(statusItem ? statusItem.fieldValue : "-"),
+          updateTimeText: timestamps.length > 0 ? this.formatDate(new Date(Math.max(...timestamps))) : "-",
+        };
+      });
+    },
+    displaySectionGroups() {
+      if (this.sectionGroups.length > 0) {
+        return this.sectionGroups;
+      }
+      return [
+        {
+          sectionName: "冷却参数",
+          items: this.fallbackFields.map((fieldName) => ({ fieldName, fieldValue: "-" })),
+          statusText: "-",
+          updateTimeText: "-",
+        },
+      ];
+    },
+    filteredSectionGroups() {
+      const groups = this.displaySectionGroups || [];
+      if (!this.selectedSectionKey) {
+        return groups;
+      }
+      return groups.filter((group) => group.sectionKey === this.selectedSectionKey);
+    },
+    fallbackFields() {
+      return ["供水温度", "回水温度", "供水压力", "回水压力", "冷源水温度", "VB01开度", "VB02开度"];
+    },
   },
   methods: {
-    // 查看设备电位表格
-    pointDetail(row, dataType) {
-      const {deviceId} = row
-      this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'COOLING'}, dataType)
+    handleTagClick(sectionKey) {
+      this.selectedSectionKey = sectionKey || "";
     },
-    showChart(pointName, deviceId) {
-      pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'COOLING', deviceId})
+    displayValue(value) {
+      return value === undefined || value === null || value === "" ? "-" : value;
+    },
+    isPointLoading(value) {
+      return this.loading && (value === undefined || value === null || value === "" || value === "-");
+    },
+    formatDate(date) {
+      if (!(date instanceof Date) || isNaN(date.getTime())) {
+        return "-";
+      }
+      const p = (n) => String(n).padStart(2, "0");
+      return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())} ${p(date.getHours())}:${p(
+        date.getMinutes()
+      )}:${p(date.getSeconds())}`;
+    },
+    getCoolingDeviceList() {
+      return getDeviceList(this.siteId)
+        .then((response) => {
+          const list = response?.data || [];
+          this.coolingDeviceList = list.filter((item) => item.deviceCategory === "COOLING");
+        })
+        .catch(() => {
+          this.coolingDeviceList = [];
+        });
     },
     updateData() {
-      this.loading = true
-      getCoolingDataList(this.siteId).then(response => {
-        this.list = JSON.parse(JSON.stringify(response?.data || []));
-      }).finally(() => {
-        this.loading = false
-      })
+      this.loading = true;
+      Promise.all([getProjectDisplayData(this.siteId), this.getCoolingDeviceList()])
+        .then(([response]) => {
+          this.displayData = response?.data || [];
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     init() {
-      this.updateData()
-      this.updateInterval(this.updateData)
-    }
+      this.updateData();
+      this.updateInterval(this.updateData);
+    },
   },
-  mounted() {
-
-  }
-}
+};
 </script>
 
 <style scoped lang="scss">
 .sbjk-card-container {
-  &:not(:last-child) {
+  &.list:not(:last-child) {
     margin-bottom: 25px;
   }
+
+  .info {
+    float: right;
+    text-align: right;
+    font-size: 12px;
+    color: #666;
+    line-height: 18px;
+  }
+}
+
+.pcs-tags {
+  margin: 0 0 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.pcs-tag-item {
+  cursor: pointer;
+}
+
+.point-loading-icon {
+  color: #409eff;
+  display: inline-block;
+  transform-origin: center;
+  animation: pointLoadingSpinPulse 1.1s linear infinite;
+}
+@keyframes pointLoadingSpinPulse {
+  0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
+  50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
+  100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
 }
 </style>

src/views/ems/dzjk/tjbb/gltj/Dlzb.vue

@@ -125,6 +125,12 @@ export default {
         this.totalChargedCap=totalChargedCap
         this.totalDisChargedCap=totalDisChargedCap
         this.efficiency=efficiency
+      }).catch(() => {
+        this.setOption([], '')
+        this.totalChargedCap=''
+        this.totalDisChargedCap=''
+        this.efficiency=''
+        // 错误提示由全局请求拦截器处理，这里兜底避免出现 Uncaught (in promise)
       }).finally(() => {
         this.loading=false;
       })

src/views/ems/search/index.vue

@@ -5,55 +5,19 @@
       style="background-color: #ffffff"
   >
     <el-form ref="form" :model="form" label-position="top">
-      <el-form-item
-          label="站点"
-          prop="siteIds"
-          :rules="[{ required: true, message: '请选择站点' }]"
-      >
-        <el-radio-group v-model="form.siteIds">
-          <el-radio
-              v-for="(item, index) in siteList"
-              :key="index + 'zdListSearch'"
-              :label="item.siteId"
-          >
-            {{ item.siteName }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-
-      <div
-          v-for="(group, index) in form.queryGroups"
-          :key="group.key"
-          class="query-group"
-      >
-        <div class="query-group-row">
-          <el-form-item :label="`设备 ${index + 1}`" class="group-device-item">
-            <el-select
-                v-model="group.deviceId"
-                clearable
-                filterable
-                placeholder="请选择设备"
-                style="width: 320px"
-                @change="(val) => handleDeviceChange(index, val)"
-            >
-              <el-option
-                  v-for="(item, deviceIndex) in deviceList"
-                  :key="`${deviceIndex}-sbListSearch-${group.key}`"
-                  :label="`${item.deviceName || item.deviceId}(${item.deviceId})`"
-                  :value="item.deviceId"
-              />
-            </el-select>
-          </el-form-item>
-
+      <div class="query-groups-row">
+        <div
+            v-for="(group, index) in form.queryGroups"
+            :key="group.key"
+            class="query-group"
+        >
           <el-form-item :label="`点位 ${index + 1}`" class="group-point-item">
             <div class="point-select-wrapper">
               <el-select
-                  v-model="group.pointNames"
-                  multiple
+                  v-model="group.pointId"
                   filterable
                   remote
                   clearable
-                  collapse-tags
                   reserve-keyword
                   :disabled="!canSelectPoint(group)"
                   :placeholder="pointSelectPlaceholder(group)"
@@ -61,6 +25,7 @@
                   :loading="group.pointLoading"
                   :no-data-text="pointNoDataText(group)"
                   class="point-select"
+                  @change="(value) => handlePointChange(index, value)"
                   @visible-change="(visible) => handlePointDropdownVisible(index, visible)"
               >
                 <el-option
@@ -71,7 +36,7 @@
                 />
               </el-select>
               <div class="point-select-toolbar">
-                <span class="point-select-tip">已选 {{ group.pointNames.length }} 个点位</span>
+                <span class="point-select-tip">{{ group.pointId ? "已选择点位" : "未选择点位" }}</span>
                 <div>
                   <el-button
                       type="text"
@@ -84,7 +49,7 @@
                   <el-button
                       type="text"
                       size="mini"
-                      :disabled="group.pointNames.length === 0"
+                      :disabled="!group.pointId"
                       @click="clearPointSelection(index)"
                   >
                     清空选择
@@ -93,43 +58,9 @@
               </div>
             </div>
           </el-form-item>
-
-          <div class="group-action-area">
-            <el-button
-                v-if="index === form.queryGroups.length - 1"
-                type="primary"
-                icon="el-icon-plus"
-                circle
-                :disabled="form.queryGroups.length >= maxQueryGroups"
-                @click="addQueryGroup"
-            />
-            <el-button
-                v-if="form.queryGroups.length > 1"
-                type="danger"
-                icon="el-icon-delete"
-                circle
-                @click="removeQueryGroup(index)"
-            />
-          </div>
         </div>
       </div>
 
-      <el-form-item
-          v-if="isDtdc"
-          label="单体电池(不超过5个，仅第一组设备为电池时生效)"
-          prop="child"
-          :rules="[{ required: true, message: '请选择单体电池' }]"
-      >
-        <el-cascader
-            v-model="form.child"
-            style="width: 400px"
-            :props="{ multiple: true }"
-            :show-all-levels="false"
-            :options="childOptions"
-            @change="handleChildChange"
-        ></el-cascader>
-      </el-form-item>
-
       <el-form-item>
         <el-button type="primary" @click="submitForm">生成图表</el-button>
       </el-form-item>
@@ -161,13 +92,7 @@
 <script>
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
-import {getAllSites} from "@/api/ems/zddt";
-import {
-  getAllBatteryIdsBySites,
-  getGeneralQueryDeviceList,
-  getPointValueList,
-  pointFuzzyQuery,
-} from "@/api/ems/search";
+import {getPointValueList, pointFuzzyQuery} from "@/api/ems/search";
 import DateTimeSelect from "./DateTimeSelect.vue";
 import {debounce} from "@/utils";
 
@@ -175,27 +100,10 @@ export default {
   name: "Search",
   mixins: [resize],
   components: {DateTimeSelect},
-  computed: {
-    isDtdc() {
-      return this.form.queryGroups?.[0]?.deviceCategory === "BATTERY";
-    },
-  },
   watch: {
-    "form.siteIds": {
+    "$route.query.siteId": {
       handler(newVal) {
-        this.form.queryGroups = [this.createEmptyQueryGroup()];
-        this.form.child = [];
-        this.childOptions = [];
-        this.deviceList = [];
-        if (newVal) {
-          this.getDeviceListBySite(newVal);
-        }
-      },
-    },
-    isDtdc: {
-      handler(newVal) {
-        newVal && this.form.siteIds && this.getChildList();
-        !newVal && (this.form.child = []);
+        this.syncQuerySiteIds(newVal);
       },
     },
     "form.dataUnit": {
@@ -210,15 +118,9 @@ export default {
   data() {
     return {
       chart: null,
-      deviceList: [],
-      siteList: [],
-      childOptions: [],
-      maxQueryGroups: 10,
-      groupKeySeed: 0,
       form: {
         dataRange: [],
-        child: [],
-        siteIds: "",
+        siteIds: [],
         queryGroups: [],
         dataUnit: 1,
       },
@@ -227,16 +129,14 @@ export default {
     };
   },
   created() {
-    this.form.queryGroups = [this.createEmptyQueryGroup()];
+    this.form.queryGroups = [1, 2, 3, 4, 5].map((index) => this.createEmptyQueryGroup(index));
   },
   methods: {
-    createEmptyQueryGroup() {
-      this.groupKeySeed += 1;
+    createEmptyQueryGroup(index) {
       return {
-        key: this.groupKeySeed,
-        deviceId: "",
-        deviceCategory: "",
-        pointNames: [],
+        key: index,
+        pointId: "",
+        selectedPointName: "",
         pointOptions: [],
         pointOptionsCache: {},
         pointRequestId: 0,
@@ -246,100 +146,16 @@ export default {
     getQueryGroup(index) {
       return this.form.queryGroups[index];
     },
-    addQueryGroup() {
-      if (this.form.queryGroups.length >= this.maxQueryGroups) {
-        this.$message.warning(`最多只能添加 ${this.maxQueryGroups} 组`);
-        return;
-      }
-      this.form.queryGroups.push(this.createEmptyQueryGroup());
-    },
-    removeQueryGroup(index) {
-      if (this.form.queryGroups.length <= 1) return;
-      this.form.queryGroups.splice(index, 1);
-      if (index === 0) {
-        this.form.child = [];
-      }
-    },
     canSelectPoint(group) {
-      return !!(this.form.siteIds && group && group.deviceId);
+      return !!(group && this.form.siteIds && this.form.siteIds.length > 0);
     },
     pointSelectPlaceholder(group) {
       return this.canSelectPoint(group)
-          ? "支持关键字搜索，展开可查看设备点位"
-          : "请先选择站点和设备";
+          ? "支持关键字搜索，展开可查看点位列表"
+          : "暂无可用站点点位";
     },
     pointNoDataText(group) {
-      return this.canSelectPoint(group) ? "暂无匹配点位" : "请先选择站点和设备";
-    },
-    getDeviceListBySite(siteId) {
-      if (!siteId) return Promise.resolve([]);
-      return getGeneralQueryDeviceList(siteId).then((response) => {
-        this.deviceList = response?.data || [];
-        return this.deviceList;
-      });
-    },
-    handleDeviceChange(groupIndex, deviceId) {
-      const group = this.getQueryGroup(groupIndex);
-      if (!group) return;
-      const selected = this.deviceList.find((item) => item.deviceId === deviceId);
-      group.deviceCategory = selected?.deviceCategory || "";
-      group.pointNames = [];
-      group.pointOptions = [];
-      group.pointOptionsCache = {};
-      group.pointRequestId = 0;
-      group.pointLoading = false;
-
-      if (groupIndex === 0) {
-        this.form.child = [];
-        this.childOptions = [];
-        if (this.isDtdc) {
-          this.getChildList();
-        }
-      }
-
-      if (this.canSelectPoint(group)) {
-        this.fetchPointOptions(groupIndex, "");
-      }
-    },
-    getChildList() {
-      this.childOptions = [];
-      this.form.child = [];
-      const {siteIds} = this.form;
-      getAllBatteryIdsBySites([siteIds]).then((response) => {
-        const data = response?.data || {};
-        const base = 50;
-        let options = [];
-        Object.entries(data).forEach(([key, value], index) => {
-          if (!value) value = [];
-          options.push({
-            value: key,
-            label: this.siteList.find((s) => s.siteId === key)?.siteName || "",
-            children: [],
-          });
-          const length = value.length;
-          const num = Math.ceil(length / base);
-          if (num === 0) return;
-          for (let i = 1; i <= num; i++) {
-            const start = (i - 1) * base + 1;
-            const end = i * base;
-            options[index].children.push({
-              value: i,
-              label: `${start}-${end}`,
-              children: [],
-            });
-            for (let s = start; s <= Math.min(length, end); s++) {
-              options[index].children[i - 1].children.push({
-                value: value[s - 1],
-                label: value[s - 1],
-              });
-            }
-          }
-        });
-        this.childOptions = options;
-      });
-    },
-    handleChildChange(data) {
-      this.form.child = data;
+      return this.canSelectPoint(group) ? "暂无匹配点位" : "暂无可用站点点位";
     },
     showLoading() {
       this.chart && this.chart.showLoading();
@@ -373,11 +189,7 @@ export default {
       data.forEach((item) => {
         item.deviceList.forEach((inner) => {
           dataset.push({
-            name: `${
-                this.isDtdc
-                    ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
-                    : ""
-            }${inner.deviceId}`,
+            name: inner.deviceId,
             type: "line",
             markPoint: {
               symbolSize: 30,
@@ -463,11 +275,7 @@ export default {
       data.forEach((item) => {
         item.deviceList.forEach((inner) => {
           dataset.push({
-            name: `${
-                this.isDtdc
-                    ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
-                    : ""
-            }${inner.deviceId}`,
+            name: inner.deviceId,
             type: "boxplot",
             xdata: [],
             data: [],
@@ -521,27 +329,26 @@ export default {
     submitForm() {
       this.getDate();
     },
-    getPointCacheKey(group, query = "") {
-      return `${this.form.siteIds}_${group.deviceId}_${query.trim()}`;
+    getPointCacheKey(query = "") {
+      return `${this.form.siteIds.join(",")}_${query.trim()}`;
+    },
+    formatPointLabel({pointId = "", pointName = "", dataKey = ""} = {}) {
+      return `${pointId || "-"}-${pointName || "-"}(${dataKey || "-"})`;
     },
     normalizePointOptions(data = []) {
       return (data || []).map((item) => {
         if (typeof item === "string") {
-          return {value: item, label: item, pointName: item, dataKey: "", pointDesc: ""};
+          return {value: item, label: this.formatPointLabel({pointName: item}), pointId: "", pointName: item, dataKey: "", pointDesc: ""};
         }
+        const pointId = item?.pointId || "";
         const pointName = item?.pointName || item?.value || "";
         const dataKey = item?.dataKey || "";
         const pointDesc = item?.pointDesc || "";
-        const labelParts = [pointName];
-        if (dataKey && dataKey !== pointName) {
-          labelParts.push(`key:${dataKey}`);
-        }
-        if (pointDesc) {
-          labelParts.push(pointDesc);
-        }
+        const label = this.formatPointLabel({pointId, pointName, dataKey});
         return {
-          value: pointName,
-          label: labelParts.join(" | "),
+          value: pointId || pointName,
+          label,
+          pointId,
           pointName,
           dataKey,
           pointDesc,
@@ -549,10 +356,18 @@ export default {
       }).filter((item) => item.value);
     },
     setPointOptions(group, data = []) {
-      const selected = group.pointNames || [];
-      const selectedOptions = selected.map((value) => ({value, label: value, pointName: value}));
       const normalized = this.normalizePointOptions(data);
-      const merged = [...selectedOptions, ...normalized];
+      const selected = group.pointId
+          ? [{
+            value: group.pointId,
+            label: this.formatPointLabel({pointId: group.pointId}),
+            pointId: group.pointId,
+            pointName: "",
+            dataKey: "",
+            pointDesc: "",
+          }]
+          : [];
+      const merged = [...normalized, ...group.pointOptions, ...selected];
       const seen = {};
       group.pointOptions = merged.filter((item) => {
         if (!item?.value || seen[item.value]) {
@@ -566,7 +381,7 @@ export default {
       const group = this.getQueryGroup(groupIndex);
       if (!group || !this.canSelectPoint(group)) return Promise.resolve([]);
       const normalizedQuery = (query || "").trim();
-      const cacheKey = this.getPointCacheKey(group, normalizedQuery);
+      const cacheKey = this.getPointCacheKey(normalizedQuery);
       if (!force && group.pointOptionsCache[cacheKey]) {
         this.setPointOptions(group, group.pointOptionsCache[cacheKey]);
         return Promise.resolve(group.pointOptionsCache[cacheKey]);
@@ -574,9 +389,7 @@ export default {
       const requestId = ++group.pointRequestId;
       group.pointLoading = true;
       return pointFuzzyQuery({
-        siteIds: [this.form.siteIds],
-        deviceCategory: group.deviceCategory,
-        deviceId: group.deviceId,
+        siteIds: this.form.siteIds,
         pointName: normalizedQuery,
       })
           .then((response) => {
@@ -619,23 +432,32 @@ export default {
     clearPointSelection(groupIndex) {
       const group = this.getQueryGroup(groupIndex);
       if (!group) return;
-      group.pointNames = [];
+      group.pointId = "";
+      group.selectedPointName = "";
     },
-    getZdList() {
-      return getAllSites().then((response) => {
-        this.siteList = response.data || [];
-      });
+    resolveSelectedPointName(group) {
+      if (!group) return "";
+      if (group.selectedPointName) return String(group.selectedPointName).trim();
+      const selectedOption = (group.pointOptions || []).find((item) => item?.value === group.pointId);
+      if (selectedOption?.pointName) {
+        return String(selectedOption.pointName).trim();
+      }
+      return "";
     },
-    buildSiteDeviceMap() {
-      let siteDeviceMap = {};
-      this.form.child.forEach(([first, second, third]) => {
-        if (siteDeviceMap[first]) {
-          siteDeviceMap[first].push(third);
-        } else {
-          siteDeviceMap[first] = [third];
-        }
-      });
-      return siteDeviceMap;
+    handlePointChange(groupIndex, value) {
+      const group = this.getQueryGroup(groupIndex);
+      if (!group) return;
+      if (!value) {
+        group.selectedPointName = "";
+        return;
+      }
+      const selectedOption = (group.pointOptions || []).find((item) => item?.value === value);
+      group.selectedPointName = String(selectedOption?.pointName || "").trim();
+    },
+    syncQuerySiteIds(routeSiteId) {
+      const siteId = routeSiteId || this.$route?.query?.siteId;
+      const normalizedSiteId = siteId === undefined || siteId === null ? "" : String(siteId).trim();
+      this.form.siteIds = normalizedSiteId ? [normalizedSiteId] : [];
     },
     getDate() {
       this.$refs.form.validate((valid) => {
@@ -644,22 +466,15 @@ export default {
         }
 
         const activeGroups = this.form.queryGroups
-            .map((group, index) => ({group, index}))
-            .filter(({group}) => group.deviceId && group.pointNames && group.pointNames.length > 0);
+            .map((group) => ({group}))
+            .filter(({group}) => !!group.pointId);
 
         if (activeGroups.length === 0) {
-          return this.$message.error("请至少选择1组设备和点位");
+          return this.$message.error("请至少选择1组点位");
         }
 
-        const invalidGroupIndex = this.form.queryGroups.findIndex(
-            (group) => group.deviceId && (!group.pointNames || group.pointNames.length === 0)
-        );
-        if (invalidGroupIndex !== -1) {
-          return this.$message.error(`第 ${invalidGroupIndex + 1} 组请至少选择1个点位`);
-        }
-
-        if (this.isDtdc && (this.form.child.length === 0 || this.form.child.length > 5)) {
-          return this.$message.error("请选择单体电池且不能超过5个");
+        if (!this.form.siteIds || this.form.siteIds.length === 0) {
+          return this.$message.error("请先在顶部选择站点");
         }
 
         const {
@@ -681,29 +496,38 @@ export default {
 
         this.loading = true;
 
-        const requests = activeGroups.map(({group, index}) => {
-          const useChildMap = index === 0 && group.deviceCategory === "BATTERY";
-          return getPointValueList({
-            siteIds: [siteIds],
-            dataUnit,
-            deviceId: group.deviceId,
-            deviceCategory: group.deviceCategory,
-            pointNames: group.pointNames,
-            pointName: group.pointNames.join(","),
-            startDate,
-            endDate,
-            siteDeviceMap: useChildMap ? this.buildSiteDeviceMap() : {},
-          }).then((response) => response?.data || []);
+        const selectedPoints = [];
+        const pointIdSet = new Set();
+        activeGroups.forEach(({group}) => {
+          const pointId = String(group.pointId || "").trim();
+          if (!pointId || pointIdSet.has(pointId)) return;
+          pointIdSet.add(pointId);
+          selectedPoints.push({
+            pointId,
+            pointName: this.resolveSelectedPointName(group) || pointId,
+          });
+        });
+        const pointIds = selectedPoints.map((item) => item.pointId);
+        const pointNames = selectedPoints.map((item) => item.pointName);
+        getPointValueList({
+          siteIds,
+          dataUnit,
+          pointIds,
+          pointNames,
+          pointId: pointIds.join(","),
+          startDate,
+          endDate,
+        }).then((response) => {
+          this.setOption(response?.data || []);
+        }).catch((error) => {
+          if (error?.code === "ECONNABORTED") {
+            this.$message.error("查询超时，请缩短时间范围后重试");
+            return;
+          }
+          this.$message.error("查询失败，请稍后重试");
+        }).finally(() => {
+          this.loading = false;
         });
-
-        Promise.all(requests)
-            .then((groupResults) => {
-              const merged = groupResults.flat();
-              this.setOption(merged);
-            })
-            .finally(() => {
-              this.loading = false;
-            });
       });
     },
   },
@@ -719,36 +543,31 @@ export default {
     this.$nextTick(() => {
       this.initChart();
       this.$refs.dateTimeSelect.init();
-      Promise.all([this.getZdList()]).finally(() => (this.loading = false));
+      this.syncQuerySiteIds();
+      this.loading = false;
     });
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.query-group {
-  margin-bottom: 10px;
-  padding: 10px 12px 0;
-  border: 1px solid #ebeef5;
-  border-radius: 6px;
-}
-
-.query-group-row {
+.query-groups-row {
   display: flex;
   align-items: flex-start;
-  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px;
 }
 
-.group-device-item {
-  margin-right: 20px;
+.query-group {
+  width: 19.2%;
 }
 
 .group-point-item {
-  margin-right: 16px;
+  margin-right: 0;
 }
 
 .point-select-wrapper {
-  width: 420px;
+  width: 100%;
 }
 
 .point-select {
@@ -767,10 +586,24 @@ export default {
   color: #909399;
 }
 
-.group-action-area {
-  padding-top: 34px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+@media (max-width: 1600px) {
+  .query-group {
+    width: 32%;
+  }
+}
+
+@media (max-width: 1200px) {
+  .query-group {
+    width: 49%;
+  }
+}
+
+@media (max-width: 768px) {
+  .query-groups-row {
+    gap: 0;
+  }
+  .query-group {
+    width: 100%;
+  }
 }
 </style>

src/views/ems/site/mqtt/AddMqtt.vue

@@ -2,9 +2,7 @@
   <el-dialog :visible.sync="dialogTableVisible" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" destroy-on-close lock-scroll append-to-body width="400px"  class="ems-dialog" :title="mode === 'add'?'新增配置':`编辑配置` " >
     <el-form v-loading="loading>0" ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="140px">
       <el-form-item label="站点" prop="siteId">
-        <el-select v-model="formData.siteId" :disabled="mode === 'edit'" placeholder="请选择站点" :loading="searchLoading" loading-text="正在加载数据">
-            <el-option v-for="(item,index) in siteList" :key="index+'zdxeSelect'" :label="item.siteName" :value="item.siteId" ></el-option>
-          </el-select>
+        <el-input v-model="formData.siteId" placeholder="请先在顶部选择站点" disabled />
       </el-form-item>
       <el-form-item label="消息等级" prop="qos">
         <el-select v-model="formData.qos" placeholder="请选择消息等级">
@@ -30,13 +28,10 @@
 </template>
 <script>
 import {editMqtt,addMqtt,getMqttDetail} from "@/api/ems/site";
-import {getAllSites} from '@/api/ems/zddt'
 export default {
   data() {
     return {
       loading:0,
-      siteList:[],
-      searchLoading:false,
       dialogTableVisible:false,
       mode:'',
       formData: {
@@ -48,7 +43,7 @@ export default {
       },
       rules: {
         siteId:[
-          { required: true, message: '请选择站点', trigger: 'blur'},
+          { required: true, message: '请先在顶部选择站点', trigger: 'blur'},
         ],
         qos:[
           { required: true, message: '请选择消息等级', trigger: 'blur'},
@@ -63,23 +58,20 @@ export default {
     }
   },
   methods: {
-    showDialog(id){
+    getRouteSiteId() {
+      const siteId = this.$route?.query?.siteId
+      return siteId === undefined || siteId === null ? '' : String(siteId).trim()
+    },
+    showDialog(id, siteId = ''){
       this.dialogTableVisible = true
-      this.getZdList()
       if(id){
         this.mode = 'edit'
         this.formData.id = id
         this.getDetail(id)
       }else{
         this.mode = 'add'
+        this.formData.siteId = siteId || this.getRouteSiteId()
       }
-    },
-     //获取站点列表
-    getZdList(){
-      this.searchLoading=true
-      getAllSites().then(response => {
-        this.siteList = response?.data || []
-      }).finally(() => {this.searchLoading=false})
     },
     getDetail(id){
       getMqttDetail(id).then(response => {
@@ -132,6 +124,8 @@ export default {
       // 清空所有数据
       this.formData= {
         id:'',//设备唯一标识
+        siteId:'',
+        qos:'',
         mqttTopic:'',
         topicName:''
       }

src/views/ems/site/mqtt/index.vue

@@ -160,7 +160,7 @@ export default {
       }).finally(() => {this.loading=false})
     },
     addPowerConfig(id=''){
-      this.$refs.addMqtt.showDialog(id);
+      this.$refs.addMqtt.showDialog(id, this.form.siteId);
     },
     deleteMqtt(row){
       this.$confirm(`确认要删除该配置吗?`, {

src/views/ems/site/pointConfig/index.vue

@@ -29,6 +29,9 @@
               />
             </el-select>
           </el-form-item>
+          <el-form-item label="点位ID">
+            <el-input v-model.trim="queryParams.pointId" placeholder="请输入点位ID" clearable style="width: 180px" />
+          </el-form-item>
           <el-form-item label="数据键">
             <el-input v-model="queryParams.dataKey" placeholder="请输入数据键" clearable style="width: 180px" />
           </el-form-item>
@@ -115,6 +118,18 @@
       <el-form ref="pointForm" :model="form" :rules="rules" label-width="120px">
         <el-row :gutter="16">
           <el-col :span="12">
+            <el-form-item label="点位ID" prop="pointId">
+              <el-input v-model.trim="form.pointId" placeholder="请输入点位ID（系统唯一）" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="点位名称" prop="pointName">
+              <el-input v-model.trim="form.pointName" placeholder="请输入点位名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col v-if="form.id" :span="12">
             <el-form-item label="站点" prop="siteId">
               <el-input v-model="form.siteId" disabled />
             </el-form-item>
@@ -129,19 +144,7 @@
           </el-col>
         </el-row>
         <el-row :gutter="16">
-          <el-col :span="12">
-            <el-form-item label="点位ID" prop="pointId">
-              <el-input v-model.trim="form.pointId" placeholder="请输入点位ID（系统唯一）" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="点位名称" prop="pointName">
-              <el-input v-model.trim="form.pointName" placeholder="请输入点位名称" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="16">
-          <el-col :span="12" v-if="form.pointType === 'data' || form.pointType === 'calc'">
+          <el-col :span="12" v-if="form.pointType === 'data'">
             <el-form-item label="设备类型" prop="deviceCategory">
               <el-select v-model="form.deviceCategory" placeholder="请选择设备类型" @change="handleFormCategoryChange">
                 <el-option
@@ -199,6 +202,9 @@
                 :rows="3"
                 placeholder="例如：voltageA * currentA + powerLoss"
               />
+              <div class="calc-expression-tips">
+                示例：A + B * 2；(A + B) / C；voltageA * currentA + powerLoss
+              </div>
             </el-form-item>
           </el-col>
           <el-col :span="24" v-if="form.pointType === 'calc'">
@@ -356,6 +362,7 @@ export default {
         siteId: '',
         deviceCategory: '',
         deviceId: '',
+        pointId: '',
         dataKey: '',
         pointDesc: '',
         pointType: 'data'
@@ -370,6 +377,8 @@ export default {
         siteId: '',
         deviceId: '',
         pointId: '',
+        pointName: '',
+        dataKey: '',
         pointType: 'data',
         rangeType: 'custom',
         startTime: '',
@@ -439,6 +448,15 @@ export default {
     }
   },
   methods: {
+    formatPointCurveName(point = {}) {
+      const pointId = String(point.pointId || '').trim()
+      const pointName = String(point.pointName || '').trim()
+      const dataKey = String(point.dataKey || '').trim()
+      const idPart = pointId || '-'
+      const namePart = pointName || '-'
+      const keyPart = dataKey || '-'
+      return `${idPart}-${namePart}(${keyPart})`
+    },
     formatDeviceInfo(row) {
       if (!row) {
         return '-'
@@ -505,14 +523,14 @@ export default {
         return
       }
       const points = this.tableData
-        .filter(item => item.pointType !== 'calc' && item.siteId && item.deviceId && item.dataKey)
+        .filter(item => item.pointType === 'data' && item.siteId && item.deviceId && item.dataKey)
         .map(item => ({
           siteId: item.siteId,
           deviceId: item.deviceId,
           dataKey: item.dataKey
         }))
       if (!points.length) {
-        const calcRows = this.tableData.filter(item => item.pointType === 'calc')
+        const calcRows = this.tableData.filter(item => item.pointType !== 'data')
         if (!calcRows.length) {
           this.tableData = this.applyCalcLatestValues(this.tableData)
           return
@@ -544,13 +562,13 @@ export default {
             })
             const mergedRows = this.applyCalcLatestValues([...depRowsWithLatest, ...this.tableData])
             const calcLatestMap = mergedRows
-              .filter(item => item.pointType === 'calc')
+              .filter(item => item.pointType !== 'data')
               .reduce((acc, item) => {
                 acc[this.getCalcRowKey(item)] = item.latestValue
                 return acc
               }, {})
             this.tableData = this.tableData.map(row => {
-              if (row.pointType !== 'calc') return row
+              if (row.pointType === 'data') return row
               const nextLatest = calcLatestMap[this.getCalcRowKey(row)]
               return {
                 ...row,
@@ -584,12 +602,83 @@ export default {
     getCalcRowKey(row) {
       return `${row.id || ''}__${row.siteId || ''}__${row.pointId || ''}`
     },
-    extractExpressionTokens(expression) {
+    tokenizeCalcExpression(expression) {
       const expr = String(expression || '').trim()
-      if (!expr) return []
-      if (!/^[0-9A-Za-z_+\-*/().\s]+$/.test(expr)) return []
-      const matched = expr.match(/\b[A-Za-z_][A-Za-z0-9_]*\b/g) || []
-      return Array.from(new Set(matched.map(item => String(item || '').trim()).filter(Boolean)))
+      if (!expr) {
+        return []
+      }
+      if (!/^[0-9A-Za-z_+\-*/().\s]+$/.test(expr)) {
+        throw new Error('计算表达式仅支持四则运算和括号')
+      }
+      const tokens = []
+      let index = 0
+      while (index < expr.length) {
+        const ch = expr[index]
+        if (/\s/.test(ch)) {
+          index += 1
+          continue
+        }
+        if (/[0-9.]/.test(ch)) {
+          const start = index
+          let hasDot = ch === '.'
+          index += 1
+          while (index < expr.length) {
+            const next = expr[index]
+            if (/[0-9]/.test(next)) {
+              index += 1
+              continue
+            }
+            if (next === '.' && !hasDot) {
+              hasDot = true
+              index += 1
+              continue
+            }
+            break
+          }
+          const numText = expr.slice(start, index)
+          if (!Number.isFinite(Number(numText))) {
+            throw new Error(`数值格式错误: ${numText}`)
+          }
+          tokens.push({ type: 'number', value: Number(numText) })
+          continue
+        }
+        if (/[A-Za-z_]/.test(ch)) {
+          const start = index
+          index += 1
+          while (index < expr.length && /[A-Za-z0-9_]/.test(expr[index])) {
+            index += 1
+          }
+          const word = expr.slice(start, index)
+          tokens.push({ type: 'identifier', value: word })
+          continue
+        }
+        if (ch === '(' || ch === ')') {
+          tokens.push({ type: ch, value: ch })
+          index += 1
+          continue
+        }
+        if (['+', '-', '*', '/'].includes(ch)) {
+          tokens.push({ type: 'operator', value: ch })
+          index += 1
+          continue
+        }
+        throw new Error(`表达式包含非法字符: ${ch}`)
+      }
+      tokens.push({ type: 'eof', value: '<eof>' })
+      return tokens
+    },
+    extractExpressionTokens(expression) {
+      const reserved = new Set(['IF'])
+      try {
+        const tokens = this.tokenizeCalcExpression(expression)
+        const identifiers = tokens
+          .filter(token => token.type === 'identifier')
+          .map(token => String(token.value || '').trim())
+          .filter(token => token && !reserved.has(token.toUpperCase()))
+        return Array.from(new Set(identifiers))
+      } catch (e) {
+        return []
+      }
     },
     loadCalcDependencyRows(calcRows = []) {
       if (!calcRows.length) {
@@ -656,7 +745,7 @@ export default {
     applyCalcLatestValues(rows = []) {
       const dataPointMap = {}
       rows.forEach(row => {
-        if (row.pointType === 'calc') return
+        if (row.pointType !== 'data') return
         if (row.latestValue === '-' || row.latestValue === '' || row.latestValue === null || row.latestValue === undefined) {
           return
         }
@@ -687,7 +776,7 @@ export default {
         })
       })
       return rows.map(row => {
-        if (row.pointType !== 'calc') return row
+        if (row.pointType === 'data') return row
         return {
           ...row,
           latestValue: this.evaluateCalcExpression(row.calcExpression, row.siteId, row.deviceId, dataPointMap)
@@ -697,37 +786,260 @@ export default {
     evaluateCalcExpression(expression, siteId, deviceId, dataPointMap) {
       const expr = String(expression || '').trim()
       if (!expr) return '-'
-      if (!/^[0-9A-Za-z_+\-*/().\s]+$/.test(expr)) return '-'
-      const tokenPattern = /\b[A-Za-z_][A-Za-z0-9_]*\b/g
-      const missingKeys = []
-      const resolvedExpr = expr.replace(tokenPattern, token => {
-        const candidates = [token, token.toUpperCase(), token.toLowerCase()]
-        let value
-        for (let i = 0; i < candidates.length; i++) {
-          const candidate = candidates[i]
-          const deviceKey = `${siteId || ''}__${deviceId || ''}__${candidate}`
-          const siteKey = `${siteId || ''}__${candidate}`
-          value = dataPointMap[deviceKey] !== undefined ? dataPointMap[deviceKey] : dataPointMap[siteKey]
-          if (value !== undefined && value !== null && value !== '' && value !== '-') {
-            break
+      try {
+        const tokens = this.tokenizeCalcExpression(expr)
+        let current = 0
+
+        const peek = () => tokens[current] || { type: 'eof', value: '<eof>' }
+        const matchType = type => {
+          if (peek().type !== type) return false
+          current += 1
+          return true
+        }
+        const matchOperator = op => {
+          const token = peek()
+          if (token.type !== 'operator' || token.value !== op) return false
+          current += 1
+          return true
+        }
+        const expectType = (type, message) => {
+          if (!matchType(type)) {
+            throw new Error(message)
           }
         }
-        if (value === undefined || value === null || value === '' || value === '-') {
-          missingKeys.push(token)
-          return 'NaN'
+        const resolveIdentifierValue = name => {
+          const candidates = [name, name.toUpperCase(), name.toLowerCase()]
+          for (let i = 0; i < candidates.length; i += 1) {
+            const candidate = candidates[i]
+            const deviceKey = `${siteId || ''}__${deviceId || ''}__${candidate}`
+            const siteKey = `${siteId || ''}__${candidate}`
+            const value = dataPointMap[deviceKey] !== undefined ? dataPointMap[deviceKey] : dataPointMap[siteKey]
+            if (value === undefined || value === null || value === '' || value === '-') {
+              continue
+            }
+            const numberValue = Number(value)
+            if (Number.isFinite(numberValue)) {
+              return numberValue
+            }
+          }
+          throw new Error(`缺少变量: ${name}`)
         }
-        const numberValue = Number(value)
-        if (Number.isNaN(numberValue)) {
-          missingKeys.push(token)
-          return 'NaN'
+        const toBoolean = value => Number(value) !== 0
+
+        const evaluateNode = node => {
+          if (!node || !node.type) {
+            throw new Error('表达式节点无效')
+          }
+          if (node.type === 'number') return node.value
+          if (node.type === 'variable') return resolveIdentifierValue(node.name)
+          if (node.type === 'unary') {
+            const value = evaluateNode(node.node)
+            if (node.operator === '+') return value
+            if (node.operator === '-') return -value
+            if (node.operator === '!') return toBoolean(value) ? 0 : 1
+            throw new Error(`不支持的一元操作符: ${node.operator}`)
+          }
+          if (node.type === 'binary') {
+            if (node.operator === '&&') {
+              const left = evaluateNode(node.left)
+              if (!toBoolean(left)) return 0
+              return toBoolean(evaluateNode(node.right)) ? 1 : 0
+            }
+            if (node.operator === '||') {
+              const left = evaluateNode(node.left)
+              if (toBoolean(left)) return 1
+              return toBoolean(evaluateNode(node.right)) ? 1 : 0
+            }
+            const left = evaluateNode(node.left)
+            const right = evaluateNode(node.right)
+            if (node.operator === '+') return left + right
+            if (node.operator === '-') return left - right
+            if (node.operator === '*') return left * right
+            if (node.operator === '/') {
+              if (right === 0) {
+                throw new Error('除数不能为0')
+              }
+              return left / right
+            }
+            if (node.operator === '>=') return left >= right ? 1 : 0
+            if (node.operator === '<=') return left <= right ? 1 : 0
+            if (node.operator === '>') return left > right ? 1 : 0
+            if (node.operator === '<') return left < right ? 1 : 0
+            if (node.operator === '==') return left === right ? 1 : 0
+            if (node.operator === '!=') return left !== right ? 1 : 0
+            throw new Error(`不支持的操作符: ${node.operator}`)
+          }
+          if (node.type === 'ternary') {
+            return toBoolean(evaluateNode(node.condition))
+              ? evaluateNode(node.trueNode)
+              : evaluateNode(node.falseNode)
+          }
+          throw new Error(`不支持的节点类型: ${node.type}`)
         }
-        return String(numberValue)
-      })
-      if (missingKeys.length > 0) {
-        return '-'
-      }
-      try {
-        const result = Function(`"use strict"; return (${resolvedExpr});`)()
+
+        const parseExpression = () => parseTernary()
+        const parseTernary = () => {
+          const conditionNode = parseOr()
+          if (matchType('?')) {
+            const trueNode = parseTernary()
+            expectType(':', '三元表达式缺少 :')
+            const falseNode = parseTernary()
+            return {
+              type: 'ternary',
+              condition: conditionNode,
+              trueNode,
+              falseNode
+            }
+          }
+          return conditionNode
+        }
+        const parseOr = () => {
+          let left = parseAnd()
+          while (matchOperator('||')) {
+            left = {
+              type: 'binary',
+              operator: '||',
+              left,
+              right: parseAnd()
+            }
+          }
+          return left
+        }
+        const parseAnd = () => {
+          let left = parseEquality()
+          while (matchOperator('&&')) {
+            left = {
+              type: 'binary',
+              operator: '&&',
+              left,
+              right: parseEquality()
+            }
+          }
+          return left
+        }
+        const parseEquality = () => {
+          let left = parseComparison()
+          while (true) {
+            if (matchOperator('==')) {
+              left = {
+                type: 'binary',
+                operator: '==',
+                left,
+                right: parseComparison()
+              }
+              continue
+            }
+            if (matchOperator('!=')) {
+              left = {
+                type: 'binary',
+                operator: '!=',
+                left,
+                right: parseComparison()
+              }
+              continue
+            }
+            break
+          }
+          return left
+        }
+        const parseComparison = () => {
+          let left = parseAddSub()
+          while (true) {
+            if (matchOperator('>=')) {
+              left = { type: 'binary', operator: '>=', left, right: parseAddSub() }
+              continue
+            }
+            if (matchOperator('<=')) {
+              left = { type: 'binary', operator: '<=', left, right: parseAddSub() }
+              continue
+            }
+            if (matchOperator('>')) {
+              left = { type: 'binary', operator: '>', left, right: parseAddSub() }
+              continue
+            }
+            if (matchOperator('<')) {
+              left = { type: 'binary', operator: '<', left, right: parseAddSub() }
+              continue
+            }
+            break
+          }
+          return left
+        }
+        const parseAddSub = () => {
+          let left = parseMulDiv()
+          while (true) {
+            if (matchOperator('+')) {
+              left = { type: 'binary', operator: '+', left, right: parseMulDiv() }
+              continue
+            }
+            if (matchOperator('-')) {
+              left = { type: 'binary', operator: '-', left, right: parseMulDiv() }
+              continue
+            }
+            break
+          }
+          return left
+        }
+        const parseMulDiv = () => {
+          let left = parseUnary()
+          while (true) {
+            if (matchOperator('*')) {
+              left = { type: 'binary', operator: '*', left, right: parseUnary() }
+              continue
+            }
+            if (matchOperator('/')) {
+              left = { type: 'binary', operator: '/', left, right: parseUnary() }
+              continue
+            }
+            break
+          }
+          return left
+        }
+        const parseUnary = () => {
+          if (matchOperator('+')) return { type: 'unary', operator: '+', node: parseUnary() }
+          if (matchOperator('-')) return { type: 'unary', operator: '-', node: parseUnary() }
+          if (matchOperator('!')) return { type: 'unary', operator: '!', node: parseUnary() }
+          return parsePrimary()
+        }
+        const parsePrimary = () => {
+          const token = peek()
+          if (matchType('number')) {
+            return { type: 'number', value: token.value }
+          }
+          if (matchType('identifier')) {
+            const identifier = String(token.value || '')
+            if (matchType('(')) {
+              if (identifier.toUpperCase() !== 'IF') {
+                throw new Error(`不支持的函数: ${identifier}`)
+              }
+              const condition = parseExpression()
+              expectType(',', 'IF函数缺少第1个逗号')
+              const trueValue = parseExpression()
+              expectType(',', 'IF函数缺少第2个逗号')
+              const falseValue = parseExpression()
+              expectType(')', 'IF函数缺少右括号')
+              return {
+                type: 'ternary',
+                condition,
+                trueNode: trueValue,
+                falseNode: falseValue
+              }
+            }
+            return { type: 'variable', name: identifier }
+          }
+          if (matchType('(')) {
+            const node = parseExpression()
+            expectType(')', '括号不匹配')
+            return node
+          }
+          throw new Error(`表达式语法错误: ${token.value}`)
+        }
+
+        const rootNode = parseExpression()
+        if (peek().type !== 'eof') {
+          throw new Error('表达式尾部有多余内容')
+        }
+        const result = evaluateNode(rootNode)
         if (!Number.isFinite(result)) {
           return '-'
         }
@@ -748,6 +1060,7 @@ export default {
         siteId: currentSiteId,
         deviceCategory: '',
         deviceId: '',
+        pointId: '',
         dataKey: '',
         pointDesc: '',
         pointType: this.activePointTab
@@ -820,7 +1133,7 @@ export default {
         id: null,
         siteId: querySiteId,
         pointType: this.activePointTab,
-        deviceCategory: this.queryParams.deviceCategory || '',
+        deviceCategory: this.activePointTab === 'data' ? (this.queryParams.deviceCategory || '') : '',
         deviceId: '',
         registerAddress: '',
         pointId: '',
@@ -848,8 +1161,9 @@ export default {
       }
       this.resetForm()
       this.dialogVisible = true
-      this.getFormDeviceList()
-      if (this.form.pointType === 'calc') {
+      if (this.form.pointType === 'data') {
+        this.getFormDeviceList()
+      } else {
         this.loadCalcDataPointOptions()
       }
     },
@@ -889,6 +1203,10 @@ export default {
     handleFormPointTypeChange() {
       if (this.form.pointType !== 'calc') {
         this.form.calcExpression = ''
+      } else {
+        this.form.deviceCategory = ''
+        this.form.deviceId = ''
+        this.formDeviceList = []
       }
       this.loadCalcDataPointOptions()
     },
@@ -929,11 +1247,14 @@ export default {
       this.selectedCalcDataKey = ''
     },
     openCurveDialog(row) {
-      this.curveDialogTitle = `曲线 - ${row.pointDesc || row.dataKey || ''}`
+      const curveName = this.formatPointCurveName(row)
+      this.curveDialogTitle = `曲线 - ${curveName}`
       this.curveQuery = {
         siteId: row.siteId || '',
         deviceId: row.deviceId || '',
         pointId: row.pointId || '',
+        pointName: row.pointName || '',
+        dataKey: row.dataKey || '',
         pointType: row.pointType || 'data',
         rangeType: 'custom',
         startTime: '',
@@ -1080,7 +1401,7 @@ export default {
         ],
         series: [
           {
-            name: this.curveQuery.pointId || '点位值',
+            name: this.formatPointCurveName(this.curveQuery),
             type: 'line',
             data: yData,
             connectNulls: true,
@@ -1149,8 +1470,10 @@ export default {
             this.$message.warning('请输入计算表达式')
             return
           }
-          if (!/^[0-9A-Za-z_+\-*/().\s]+$/.test(calcExpression)) {
-            this.$message.warning('计算表达式格式不正确')
+          try {
+            this.tokenizeCalcExpression(calcExpression)
+          } catch (e) {
+            this.$message.warning(e?.message || '计算表达式格式不正确')
             return
           }
           this.form.registerAddress = this.form.registerAddress || ''
@@ -1162,12 +1485,14 @@ export default {
         this.form.pointType = pointType
 
         if (pointType === 'calc') {
+          this.form.deviceCategory = ''
+          this.form.deviceId = ''
           const request = this.form.id ? updatePointMatch : addPointMatch
           const calcData = {
             id: this.form.id,
             siteId: this.form.siteId,
             pointType: 'calc',
-            deviceCategory: this.form.deviceCategory,
+            deviceCategory: '',
             deviceId: '',
             registerAddress: '',
             pointId: this.form.pointId,
@@ -1301,6 +1626,13 @@ export default {
   color: #606266;
 }
 
+.calc-expression-tips {
+  margin-top: 6px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
 @media (max-width: 992px) {
   .point-config-layout {
     flex-direction: column;

src/views/ems/site/powerTariff/AddPowerTariff.vue

@@ -5,9 +5,7 @@
       <div class="items-container">
         <div class="item-title">站点:</div>
         <div class="item-content">
-          <el-select v-model="siteId" :disabled="mode === 'edit'" placeholder="请选择站点" :loading="searchLoading" loading-text="正在加载数据">
-            <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
-          </el-select>
+          <el-input v-model="siteId" placeholder="请先在顶部选择站点" disabled />
         </div>
       </div>
       <div class="items-container">
@@ -103,15 +101,12 @@
 </template>
 <script>
 import {addPriceConfig,editPriceConfig,detailPriceConfig} from '@/api/ems/powerTariff'
-import {getAllSites} from '@/api/ems/zddt'
 export default {
   data() {
     return {
       mode:'',
       id:'',
-      searchLoading:false,
       siteId:'',
-      siteList:[],
       powerDate:'',//时间
       //尖-peak,峰-high,平-flat,谷=valley
       priceTypeOptions:[{
@@ -137,6 +132,10 @@ export default {
     }
   },
   methods: {
+    getRouteSiteId() {
+      const siteId = this.$route?.query?.siteId
+      return siteId === undefined || siteId === null ? '' : String(siteId).trim()
+    },
     addRow(){
       this.hoursOptions.push({
         startTime:'',
@@ -147,15 +146,7 @@ export default {
     deleteRow(index){
       this.hoursOptions.splice(index,1)
     },
-    //获取站点列表
-    getZdList(){
-      this.searchLoading=true
-      getAllSites().then(response => {
-        this.siteList = response?.data || []
-      }).finally(() => {this.searchLoading=false})
-    },
-    showDialog(id){
-      this.getZdList()
+    showDialog(id, siteId = ''){
       this.id = id
       if(id) {
         this.mode='edit'
@@ -172,11 +163,12 @@ export default {
         }).finally(()=>this.loading = false)
       }else {
         this.mode='add'
+        this.siteId = siteId || this.getRouteSiteId()
       }
       this.dialogTableVisible=true
     },
     saveDialog() {
-      if(this.siteId === '') return this.$message.error('请选择站点')
+      if(this.siteId === '') return this.$message.error('请先在顶部选择站点')
       if(this.powerDate === '') return this.$message.error('请选择时间')
       let priceArr=[]
       this.priceTypeOptions.forEach(item=>{
@@ -244,8 +236,6 @@ export default {
       this.mode=''
       this.id=''
       this.siteId=''
-      this.siteList=[]
-      this.searchLoading=false
       this.powerDate=''
       this.hoursOptions=[]
       this.priceTypeOptions.forEach(item=>{

src/views/ems/site/powerTariff/index.vue

@@ -129,7 +129,7 @@ export default {
       }).finally(() => {this.loading=false})
     },
     addPowerConfig(id=''){
-      this.$refs.addPowerTariff.showDialog(id);
+      this.$refs.addPowerTariff.showDialog(id, this.siteId);
     },
     deletePowerConfig(row){
       this.$confirm(`确认要删除${row.month}月的电价配置吗?`, {

src/views/ems/site/sbbh/index.vue

@@ -1,109 +1,92 @@
 <template>
-  <div
-    class="ems-dashboard-editor-container"
-    style="background-color: #ffffff"
-    v-loading="loading"
-  >
-    <el-form :inline="true" class="select-container">
-      <el-form-item label="故障名称">
-        <el-input
+  <div class="protect-plan-page" v-loading="loading">
+    <el-card class="query-card" shadow="never">
+      <div class="query-head">
+        <div class="query-title">设备保护方案</div>
+        <el-button type="primary" @click="addPlan" native-type="button">新增方案</el-button>
+      </div>
+      <el-form :inline="true" class="query-form" @submit.native.prevent>
+        <el-form-item label="故障名称">
+          <el-input
             v-model="form.faultName"
             clearable
             placeholder="请输入故障名称"
-            style="width: 150px"
-        ></el-input>
-      </el-form-item>
-      <el-form-item>
+            style="width: 220px"
+          />
+        </el-form-item>
+        <el-form-item>
           <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
           <el-button @click="onReset" native-type="button">重置</el-button>
-      </el-form-item>
-    </el-form>
-    <el-button type="primary" @click="addPlan" native-type="button"
-      >新增方案</el-button
-    >
-    <el-table
-      class="common-table"
-      :data="tableData"
-      stripe
-      max-height="600px"
-      style="width: 100%; margin-top: 25px"
-    >
-      <el-table-column prop="siteId" label="站点"  width="100"> </el-table-column>
-      <el-table-column prop="faultName" label="设备保护名称" width="100"> </el-table-column>
-      <el-table-column prop="faultLevel" label="故障等级" width="100">
-        <template slot-scope="scope">等级{{scope.row.faultLevel}}</template>
-      </el-table-column>
-      <el-table-column prop="isAlert" label="是否告警" width="100">
-        <template slot-scope="scope">{{scope.row.isAlert === 1 ? '是' : '否'}}</template>
-      </el-table-column>
-      <el-table-column prop="description" label="处理方案描述" width="200" show-overflow-tooltip>
-      </el-table-column>
-      <el-table-column prop="protectionSettings" label="保护前提" show-overflow-tooltip width="400">
-        <template slot-scope="scope">
-          <div v-html="handleProtectionSettings(scope.row.protectionSettings)"></div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="faultDelaySeconds" label="保护前提延时(s)" width="120">
-      </el-table-column>
-      <el-table-column prop="protectionPlan" label="保护方案" show-overflow-tooltip width="200">
-        <template slot-scope="scope">
-          <div v-html="handleProtectionPlan(scope.row.protectionPlan)"></div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="releaseDelaySeconds" label="保护方案延时(s)" width="120">
-      </el-table-column>
-      <el-table-column fixed="right" label="操作" width="150">
-        <template slot-scope="scope">
-          <el-button @click="editDevice(scope.row)" type="warning" size="mini">
-            编辑
-          </el-button>
-          <el-button type="danger" @click="deleteDevice(scope.row)" size="mini">
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      v-show="tableData.length > 0"
-      background
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      :current-page="pageNum"
-      :page-size="pageSize"
-      :page-sizes="[10, 20, 30, 40]"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="totalSize"
-      style="margin-top: 15px; text-align: center"
-    >
-    </el-pagination>
-    <add-plan
-      ref="addPlan"
-      @update="getData"
-    />
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="table-card" shadow="never">
+      <el-table class="common-table" :data="tableData" stripe max-height="620px">
+        <el-table-column prop="faultName" label="设备保护名称" min-width="140" />
+        <el-table-column prop="faultLevel" label="故障等级" width="100">
+          <template slot-scope="scope">等级{{ scope.row.faultLevel }}</template>
+        </el-table-column>
+        <el-table-column prop="isAlert" label="是否告警" width="100">
+          <template slot-scope="scope">{{ scope.row.isAlert === 1 ? '是' : '否' }}</template>
+        </el-table-column>
+        <el-table-column prop="description" label="处理方案描述" min-width="180" show-overflow-tooltip />
+        <el-table-column prop="protectionSettings" label="保护前提" min-width="360" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <div class="rich-lines" v-html="handleProtectionSettings(scope.row.protectionSettings)"></div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="faultDelaySeconds" label="前提延时(s)" width="110" />
+        <el-table-column prop="protectionPlan" label="保护方案" min-width="260" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <div class="rich-lines" v-html="handleProtectionPlan(scope.row.protectionPlan)"></div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="releaseDelaySeconds" label="方案延时(s)" width="110" />
+        <el-table-column fixed="right" label="操作" width="150">
+          <template slot-scope="scope">
+            <el-button @click="editDevice(scope.row)" type="warning" size="mini">编辑</el-button>
+            <el-button type="danger" @click="deleteDevice(scope.row)" size="mini">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        v-show="tableData.length > 0"
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalSize"
+        class="pager"
+      />
+    </el-card>
+
+    <add-plan ref="addPlan" @update="getData" />
   </div>
 </template>
 
 <script>
-import {
-  protectPlanList,
-  deleteProtectPlan,
-} from "@/api/ems/site";
-import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
+import { protectPlanList, deleteProtectPlan } from "@/api/ems/site";
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import AddPlan from "./AddPlan.vue";
+
 export default {
   name: "SBBH",
   components: { AddPlan },
   mixins: [getQuerySiteId],
   data() {
     return {
-      form:{
-        faultName:''
+      form: {
+        faultName: "",
       },
       loading: false,
       tableData: [],
-      pageSize: 10, //分页栏当前每个数据总数
-      pageNum: 1, //分页栏当前页数
-      totalSize: 0, //table表格数据总数
+      pageSize: 10,
+      pageNum: 1,
+      totalSize: 0,
       dialogTableVisible: false,
     };
   },
@@ -112,39 +95,52 @@ export default {
       this.pageNum = 1;
       this.getData();
     },
-    handleProtectionSettings(data){
-      if(!data || !JSON.parse(data)) return
-      const arr = JSON.parse(data),
-      str= arr.map((item,index)=>{
-        const {categoryName='',deviceId='',point='',faultOperator='',faultValue='',releaseOperator='',releaseValue='',relationNext=''} = item
-        return `<div>${index+1}、 <span>${categoryName ? categoryName + '-' : ''}${deviceId ? deviceId + '-' : ''}${ point || ''}</span> <span>故障:${faultOperator || ''}${ faultValue || ''}</span> <span>释放:${releaseOperator || ''}${releaseValue || ''}</span> ${arr[index+1] ? '<span>关系:'+(relationNext || '')+'</span>' : ''}</div>`
-      })
-      return str.join('')
+    handleProtectionSettings(data) {
+      if (!data || !JSON.parse(data)) return;
+      const arr = JSON.parse(data);
+      const str = arr.map((item, index) => {
+        const {
+          categoryName = "",
+          deviceId = "",
+          point = "",
+          faultOperator = "",
+          faultValue = "",
+          releaseOperator = "",
+          releaseValue = "",
+          relationNext = "",
+        } = item;
+        return `<div>${index + 1}、 <span>${categoryName ? categoryName + "-" : ""}${
+          deviceId ? deviceId + "-" : ""
+        }${point || ""}</span> <span>故障:${faultOperator || ""}${faultValue || ""}</span> <span>释放:${
+          releaseOperator || ""
+        }${releaseValue || ""}</span> ${
+          arr[index + 1] ? "<span>关系:" + (relationNext || "") + "</span>" : ""
+        }</div>`;
+      });
+      return str.join("");
     },
-    handleProtectionPlan(data){
-      if(!data || !JSON.parse(data)) return
-      const arr = JSON.parse(data),
-          str= arr.map((item,index)=>{
-            const {categoryName='',deviceId='',point='',value=''} = item
-            return `<div>${index+1}、 <span>${categoryName ? categoryName + '-' : ''}${deviceId ? deviceId + '-' : ''}${ point || ''}</span> <span>故障:=${ value || ''}</span> </div>`
-          })
-      return str.join('')
+    handleProtectionPlan(data) {
+      if (!data || !JSON.parse(data)) return;
+      const arr = JSON.parse(data);
+      const str = arr.map((item, index) => {
+        const { categoryName = "", deviceId = "", point = "", value = "" } = item;
+        return `<div>${index + 1}、 <span>${categoryName ? categoryName + "-" : ""}${
+          deviceId ? deviceId + "-" : ""
+        }${point || ""}</span> <span>故障:=${value || ""}</span> </div>`;
+      });
+      return str.join("");
     },
-    //  新增方案 展示弹窗
     addPlan() {
       if (!this.siteId) {
-        this.$message.warning('请先在顶部选择站点')
-        return
+        this.$message.warning("请先在顶部选择站点");
+        return;
       }
-      this.$refs.addPlan.open('', this.siteId)
+      this.$refs.addPlan.open("", this.siteId);
     },
-    // 编辑设备
     editDevice(row) {
-      this.$refs.addPlan.open(row.id, this.siteId || row.siteId)
+      this.$refs.addPlan.open(row.id, this.siteId);
     },
-    //删除设备
     deleteDevice(row) {
-      console.log('删除')
       this.$confirm(`确认要设备保护${row.faultName}吗?`, {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -167,19 +163,14 @@ export default {
         },
       })
         .then(() => {
-          //只有在废弃成功的情况下会走到这里
           this.$message({
             type: "success",
             message: "删除成功!",
           });
           this.getData();
-          //调用接口 更新表格数据
         })
-        .catch(() => {
-          //取消关机
-        });
+        .catch(() => {});
     },
-    // 分页
     handleSizeChange(val) {
       this.pageSize = val;
       this.$nextTick(() => {
@@ -192,29 +183,27 @@ export default {
         this.getData();
       });
     },
-    // 搜索
     onSearch() {
-      this.pageNum = 1; //每次搜索从1开始搜索
+      this.pageNum = 1;
       this.getData();
     },
-    // 重置
     onReset() {
-      this.form={
+      this.form = {
         faultName: "",
-      }
-      this.pageNum = 1; //每次搜索从1开始搜索
+      };
+      this.pageNum = 1;
       this.getData();
     },
-    // 获取数据
     getData() {
       if (!this.siteId) {
-        this.tableData = []
-        this.totalSize = 0
-        return
+        this.tableData = [];
+        this.totalSize = 0;
+        return;
       }
       this.loading = true;
-      const { pageNum, pageSize } = this,{faultName=''}=this.form;
-      protectPlanList({ siteId: this.siteId, faultName,pageNum, pageSize })
+      const { pageNum, pageSize } = this;
+      const { faultName = "" } = this.form;
+      protectPlanList({ siteId: this.siteId, faultName, pageNum, pageSize })
         .then((response) => {
           this.tableData = response?.rows || [];
           this.totalSize = response?.total || 0;
@@ -227,4 +216,46 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.protect-plan-page {
+  padding: 16px;
+  background: linear-gradient(180deg, #f5f8ff 0%, #f7f9fc 100%);
+
+  .query-card,
+  .table-card {
+    border-radius: 12px;
+    border: 1px solid #e7edf7;
+    margin-bottom: 12px;
+  }
+
+  .query-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 14px;
+  }
+
+  .query-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1d2a3a;
+    letter-spacing: 0.5px;
+  }
+
+  .query-form {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: -18px;
+  }
+
+  .rich-lines {
+    color: #3e4b5a;
+    line-height: 1.45;
+  }
+
+  .pager {
+    margin-top: 16px;
+    text-align: center;
+  }
+}
+</style>

src/views/ems/site/sblb/AddDevice.vue

@@ -7,10 +7,12 @@
         <el-form v-loading="loading>0" ref="addTempForm" inline :model="formData" :rules="rules" size="medium"
                  label-width="120px" class="device-form base-form">
           <el-form-item label="站点" prop="siteId">
-            <el-select v-model="formData.siteId" placeholder="请选择" :style="{width: '100%'}" @change="changeType">
-              <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList"
-                         :key="index+'siteOptions'"></el-option>
-            </el-select>
+            <el-input
+              v-model="formData.siteId"
+              placeholder="请先在顶部选择站点"
+              disabled
+              :style="{width: '100%'}"
+            />
           </el-form-item>
           <el-form-item label="设备id" prop="deviceId">
             <el-input v-model="formData.deviceId" placeholder="请输入" maxlength="60" clearable :style="{width: '100%'}">
@@ -25,12 +27,6 @@
                       :style="{width: '100%'}">
             </el-input>
           </el-form-item>
-          <el-form-item label="工作状态" prop="communicationStatus">
-            <el-select v-model="formData.communicationStatus" placeholder="请选择" :style="{width: '100%'}">
-              <el-option :label="value" :value="key" v-for="(value,key) in communicationStatusOptions"
-                         :key="key+'communicationStatusOptions'"></el-option>
-            </el-select>
-          </el-form-item>
           <el-form-item label="设备类型" prop="deviceType">
             <el-select v-model="formData.deviceType" placeholder="请选择" :style="{width: '100%'}">
               <el-option :label="value" :value="key" v-for="(value,key) in deviceTypeOptions"
@@ -46,7 +42,7 @@
           </el-form-item>
           <el-form-item label="上级设备" prop="parentId" v-if="dccDeviceCategoryList.includes(formData.deviceCategory)">
             <el-select v-model="formData.parentId"
-                       :placeholder="parentDeviceList.length === 0 && !formData.siteId ? '请先选择站点' : '请选择'"
+                       :placeholder="parentDeviceList.length === 0 && !formData.siteId ? '请先在顶部选择站点' : '请选择'"
                        :style="{width: '100%'}">
               <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in parentDeviceList"
                          :key="index+'parentDeviceList'"></el-option>
@@ -86,50 +82,43 @@
           </el-form-item>
         </el-form>
         <!--      pcs配置-->
-        <el-form v-if="isPcs" ref="pcsSettingForm" inline :model="pcsSetting" size="medium"
-                 label-width="120px" class="device-form pcs-form" :rules="pcsSettingRules">
-          <div style="font-size: 14px;padding: 10px 0 20px;font-weight: 600;">PCS配置</div>
-          <el-form-item label="开关机地址" prop="pointAddress">
-            <el-input v-model="pcsSetting.pointAddress" placeholder="请输入" clearable :style="{width: '100%'}">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="功率地址" prop="powerAddress">
-            <el-input v-model="pcsSetting.powerAddress" placeholder="请输入" clearable :style="{width: '100%'}">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="开机指令" prop="startCommand">
-            <el-input v-model="pcsSetting.startCommand" placeholder="请输入" clearable :style="{width: '100%'}">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="开机目标功率" prop="startPower">
-            <el-input v-model="pcsSetting.startPower" placeholder="请输入" clearable :style="{width: '100%'}">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="关机指令" prop="stopCommand">
-            <el-input v-model="pcsSetting.stopCommand" placeholder="请输入" clearable :style="{width: '100%'}">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="关机目标功率" prop="stopPower">
-            <el-input v-model="pcsSetting.stopPower" placeholder="请输入" clearable :style="{width: '100%'}">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="倍率" prop="powerMultiplier">
-            <el-input v-model="pcsSetting.powerMultiplier" placeholder="请输入" clearable :style="{width: '100%'}">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="电池簇数" prop="clusterNum">
-            <el-input v-model="pcsSetting.clusterNum" placeholder="请输入" clearable :style="{width: '100%'}">
-            </el-input>
-          </el-form-item>
-          <br>
-          <template v-for="index in parseInt(pcsSetting.clusterNum) || 0">
-            <el-form-item :label="'电池簇'+(index)+'地址'"
-                          prop="clusterPointAddress">
-              <el-input v-model="pcsSetting.clusterPointAddress[index-1]" placeholder="请输入" clearable
-                        :style="{width: '100%'}">
-              </el-input>
+        <el-form v-if="isPcs" ref="pcsSettingForm" :model="pcsSetting" size="medium"
+                 label-position="top" class="pcs-form" :rules="pcsSettingRules">
+          <div class="pcs-form__title">PCS配置</div>
+          <div class="pcs-form__grid">
+            <el-form-item label="开关机地址" prop="pointAddress" class="pcs-form__item">
+              <el-input v-model="pcsSetting.pointAddress" placeholder="请输入" clearable :style="{width: '100%'}" />
             </el-form-item>
-          </template>
+            <el-form-item label="功率地址" prop="powerAddress" class="pcs-form__item">
+              <el-input v-model="pcsSetting.powerAddress" placeholder="请输入" clearable :style="{width: '100%'}" />
+            </el-form-item>
+            <el-form-item label="开机指令" prop="startCommand" class="pcs-form__item">
+              <el-input v-model="pcsSetting.startCommand" placeholder="请输入" clearable :style="{width: '100%'}" />
+            </el-form-item>
+            <el-form-item label="关机指令" prop="stopCommand" class="pcs-form__item">
+              <el-input v-model="pcsSetting.stopCommand" placeholder="请输入" clearable :style="{width: '100%'}" />
+            </el-form-item>
+            <el-form-item label="开机目标功率" prop="startPower" class="pcs-form__item">
+              <el-input v-model="pcsSetting.startPower" placeholder="请输入" clearable :style="{width: '100%'}" />
+            </el-form-item>
+            <el-form-item label="关机目标功率" prop="stopPower" class="pcs-form__item">
+              <el-input v-model="pcsSetting.stopPower" placeholder="请输入" clearable :style="{width: '100%'}" />
+            </el-form-item>
+            <el-form-item label="倍率" prop="powerMultiplier" class="pcs-form__item">
+              <el-input v-model="pcsSetting.powerMultiplier" placeholder="请输入" clearable :style="{width: '100%'}" />
+            </el-form-item>
+            <el-form-item label="电池簇数" prop="clusterNum" class="pcs-form__item">
+              <el-input v-model="pcsSetting.clusterNum" placeholder="请输入" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </div>
+          <div v-if="(parseInt(pcsSetting.clusterNum) || 0) > 0" class="pcs-form__cluster">
+            <div class="pcs-form__cluster-title">电池簇地址</div>
+            <template v-for="index in parseInt(pcsSetting.clusterNum) || 0">
+              <el-form-item :key="'clusterAddress' + index" :label="'电池簇' + index + '地址'" prop="clusterPointAddress">
+                <el-input v-model="pcsSetting.clusterPointAddress[index - 1]" placeholder="请输入" clearable :style="{width: '100%'}" />
+              </el-form-item>
+            </template>
+          </div>
         </el-form>
       </div>
     </div>
@@ -141,7 +130,6 @@
 </template>
 <script>
 import {mapState} from "vuex";
-import {getAllSites} from '@/api/ems/zddt'
 import {validText} from '@/utils/validate'
 import {addDevice, getDeviceDetailInfo, getParentDeviceId, updateDevice} from "@/api/ems/site";
 import {getAllDeviceCategory} from '@/api/ems/search'
@@ -191,7 +179,6 @@ export default {
       dccDeviceCategoryList: ['CLUSTER', 'BATTERY'],//需要展示上级设备的设备类型
       dialogTableVisible: false,
       parentDeviceList: [],//上级设备列表  从接口获取数据
-      siteList: [],//站点列表  从接口获取数据
       deviceCategoryList: [],//设备类别列表 从接口获取数据
       formData: {
         id: '',//设备唯一标识
@@ -199,7 +186,6 @@ export default {
         deviceId: '',//设备id
         deviceName: '',//设备名称
         description: '',//设备描述
-        communicationStatus: '',//工作状态
         deviceType: '',//设备类型
         deviceCategory: '',//设备类别
         parentId: '',//上级设备id
@@ -226,7 +212,7 @@ export default {
       },
       rules: {
         siteId: [
-          {required: true, message: '请选择站点', trigger: ['blur', 'change']}
+          {required: true, message: '请先在顶部选择站点', trigger: ['blur', 'change']}
         ],
         deviceId: [
           {required: true, message: '请输入设备id', trigger: 'blur'},
@@ -240,9 +226,6 @@ export default {
           {required: true, message: '请输入设备描述', trigger: 'blur'},
           {validator: validateText, trigger: 'blur'}
         ],
-        communicationStatus: [
-          {required: true, message: '请选择工作状态', trigger: ['blur', 'change']}
-        ],
         deviceType: [
           {required: true, message: '请选择设备类型', trigger: ['blur', 'change']}
         ],
@@ -312,7 +295,6 @@ export default {
   },
   computed: {
     ...mapState({
-      communicationStatusOptions: state => state?.ems?.communicationStatusOptions || {},
       deviceTypeOptions: state => state?.ems?.deviceTypeOptions || {}
     }),
     isPcs() {
@@ -324,12 +306,22 @@ export default {
       handler(newVal) {
         //打开弹窗
         if (newVal) {
-          this.getZdList()
+          if (this.mode === 'add') {
+            this.syncSiteFromRoute(true)
+          }
           this.getDeviceCategoryList()
         }
       },
       immediate: true,
     },
+    '$route.query.siteId': {
+      handler() {
+        if (!this.dialogTableVisible || this.mode !== 'add') {
+          return
+        }
+        this.syncSiteFromRoute(true)
+      }
+    },
     id: {
       handler(newVal) {
         if ((newVal || newVal === 0) && this.mode !== 'add') {
@@ -355,20 +347,24 @@ export default {
     }
   },
   methods: {
+    syncSiteFromRoute(force = false) {
+      const routeSiteId = this.$route?.query?.siteId
+      const normalizedSiteId = routeSiteId === undefined || routeSiteId === null ? '' : String(routeSiteId).trim()
+      if (!normalizedSiteId) {
+        if (force) {
+          this.formData.siteId = ''
+        }
+        return
+      }
+      if (force || !this.formData.siteId) {
+        this.formData.siteId = normalizedSiteId
+      }
+    },
     changeType() {
       if (this.dccDeviceCategoryList.includes(this.formData.deviceCategory)) {
         this.getParentDeviceList()
       }
     },
-    //获取站点列表
-    getZdList() {
-      this.loading += 1
-      getAllSites().then(response => {
-        this.siteList = response?.data || []
-      }).finally(() => {
-        this.loading -= 1
-      })
-    },
     // 获取设备类别
     getDeviceCategoryList() {
       this.loading += 1
@@ -381,7 +377,8 @@ export default {
     //获取上级id列表
     getParentDeviceList(init = false) {
       if (!this.formData.siteId) {
-        return console.log('请先选择站点')
+        this.$message.warning('请先在顶部选择站点')
+        return
       }
       !init && (this.formData.parentId = '')
       this.loading = this.loading + 1
@@ -399,7 +396,6 @@ export default {
         deviceId = '',//设备id
         deviceName = '',//设备名称
         description = '',//设备描述
-        communicationStatus = '',//工作状态
         deviceType = '',//设备类型
         deviceCategory = '',//设备类别
         parentId = '',//上级设备id
@@ -429,7 +425,6 @@ export default {
         deviceId,
         deviceName,
         description,
-        communicationStatus,
         deviceType,
         deviceCategory,
         parentId,
@@ -503,7 +498,6 @@ export default {
         deviceId: '',//设备id
         deviceName: '',//设备名称
         description: '',//设备描述
-        communicationStatus: '',//工作状态
         deviceType: '',//设备类型
         deviceCategory: '',//设备类别
         parentId: '',//上级设备id
@@ -516,6 +510,7 @@ export default {
         parity: '',//校验位
         slaveId: '',//从站地址
       }
+      this.parentDeviceList = []
       this.pcsSetting = {
         deviceSettingId: '',
         powerAddress: '',//功率地址
@@ -538,24 +533,17 @@ export default {
 </script>
 <style scoped lang="scss">
 .form-layout {
-  display: block;
+  position: relative;
 }
 
 .form-layout.has-pcs {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
+  overflow: visible;
 }
 
 .base-form {
   width: 100%;
 }
 
-.form-layout.has-pcs .base-form,
-.form-layout.has-pcs .pcs-form {
-  width: calc(50% - 8px);
-}
-
 .device-form {
   ::v-deep .el-form-item--medium .el-form-item__content {
     width: 260px;
@@ -567,7 +555,92 @@ export default {
   }
 }
 
-.form-layout.has-pcs .device-form .el-form-item {
-  width: 100%;
+.pcs-form {
+  position: absolute;
+  top: 0;
+  right: -360px;
+  width: 340px;
+  max-height: 520px;
+  overflow-y: auto;
+  padding: 14px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: none;
+  z-index: 2;
+}
+
+.pcs-form__title {
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.pcs-form__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 10px;
+}
+
+.pcs-form__item {
+  margin-bottom: 0;
+}
+
+.pcs-form__cluster {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #ebeef5;
+}
+
+.pcs-form__cluster-title {
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #606266;
+}
+
+.pcs-form {
+  ::v-deep .el-form-item {
+    width: 100%;
+    margin-right: 0;
+    margin-bottom: 18px;
+  }
+
+  ::v-deep .el-form-item__label {
+    line-height: 20px;
+    padding-bottom: 4px;
+    font-size: 14px;
+    color: #606266;
+  }
+
+  ::v-deep .el-form-item__content {
+    width: 100%;
+    line-height: normal;
+  }
+
+  ::v-deep .el-input__inner {
+    height: 34px;
+    line-height: 34px;
+  }
+
+  ::v-deep .el-form-item__error {
+    position: static;
+    line-height: 1.2;
+    padding-top: 4px;
+  }
+
+  ::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
+    margin-right: 3px;
+  }
+}
+
+.ems-dialog {
+  ::v-deep .el-dialog,
+  ::v-deep .el-dialog__body {
+    overflow: visible;
+  }
 }
 </style>

src/views/ems/site/sblb/PointTable.vue

@@ -110,6 +110,11 @@
             sortable="custom"
         >
         </el-table-column>
+        <el-table-column v-if="selectable" label="操作" width="90" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="selectPoint(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
       </el-table>
       <el-pagination
           v-show="tableData.length > 0"
@@ -147,6 +152,7 @@ export default {
         this.pageNum = 1;
         this.totalSize = 0;
         this.dataType = '';
+        this.selectable = false;
         this.form = {
           sortMethod: "desc", //升序不传或者asc、降序desc）
           sortData: this.defaultSort.prop,
@@ -191,9 +197,14 @@ export default {
       pageSize: 10, //分页栏当前每个数据总数
       pageNum: 1, //分页栏当前页数
       totalSize: 0, //table表格数据总数
+      selectable: false
     };
   },
   methods: {
+    selectPoint(row) {
+      this.$emit('select-point', row || {})
+      this.show = false
+    },
     showChart({pointName}) {
       if (pointName) {
         const {deviceCategory, deviceId} = this;
@@ -235,12 +246,13 @@ export default {
         this.getData()
       });
     },
-    showTable({deviceCategory, siteId, deviceId, parentId = ""}, dataType) {
+    showTable({deviceCategory, siteId, deviceId, parentId = ""}, dataType, options = {}) {
       this.dataType = dataType;
       this.deviceCategory = deviceCategory;
       this.siteId = siteId;
       this.deviceId = deviceId;
       this.parentId = deviceCategory === "BATTERY" ? parentId : ""; //只有单体电池需要这个值
+      this.selectable = !!options.selectable
       this.show = true;
       this.getData()
     },

src/views/ems/site/sblb/index.vue

@@ -27,10 +27,6 @@
           prop="siteId"
           label="站点ID">
       </el-table-column>
-      <el-table-column
-          prop="siteName"
-          label="站点名称">
-      </el-table-column>
       <el-table-column
           prop="deviceId"
           label="设备ID"
@@ -111,6 +107,17 @@ export default {
       }
       this.siteId = normalizedSiteId
       this.onSearch()
+    },
+    '$route.query.siteName'(newSiteName) {
+      const normalizedSiteName = this.getSelectedSiteName(newSiteName)
+      if (normalizedSiteName === this.selectedSiteName) {
+        return
+      }
+      this.selectedSiteName = normalizedSiteName
+      this.tableData = (this.tableData || []).map(item => ({
+        ...item,
+        siteName: normalizedSiteName
+      }))
     }
   },
   data() {
@@ -119,6 +126,7 @@ export default {
       mode: '',//新增、编辑设备
       editDeviceId: '',//编辑设备id
       siteId: '',
+      selectedSiteName: '',
       deviceCategory: '',//搜索栏设备类型
       deviceCategoryList: [],//设备类别
       tableData: [],
@@ -153,6 +161,17 @@ export default {
     hasValidSiteId(siteId) {
       return !!(siteId !== undefined && siteId !== null && String(siteId).trim())
     },
+    getSelectedSiteName(routeSiteName) {
+      const name = routeSiteName === undefined || routeSiteName === null ? '' : String(routeSiteName).trim()
+      if (name) {
+        return name
+      }
+      const matchedSite = (this.$store.getters.zdList || []).find(item => item.siteId === this.siteId)
+      if (matchedSite && matchedSite.siteName) {
+        return matchedSite.siteName
+      }
+      return this.siteId || ''
+    },
     // 获取设备类别
     getDeviceCategoryList() {
       getAllDeviceCategory().then(response => {
@@ -259,7 +278,12 @@ export default {
       this.loading = true
       const {siteId, deviceCategory, pageNum, pageSize} = this
       getDeviceInfoList({siteId, deviceCategory, pageNum, pageSize}).then(response => {
-        this.tableData = response?.rows || [];
+        const selectedSiteName = this.getSelectedSiteName(this.$route.query.siteName)
+        this.selectedSiteName = selectedSiteName
+        this.tableData = (response?.rows || []).map(item => ({
+          ...item,
+          siteName: selectedSiteName
+        }));
         this.totalSize = response?.total || 0
       }).finally(() => {
         this.loading = false
@@ -268,6 +292,7 @@ export default {
   },
   mounted() {
     this.siteId = this.hasValidSiteId(this.$route.query.siteId) ? String(this.$route.query.siteId).trim() : ''
+    this.selectedSiteName = this.getSelectedSiteName(this.$route.query.siteName)
     this.pageNum = 1//每次搜索从1开始搜索
     this.getDeviceCategoryList()
     this.getData()