xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: xzzn:main-cloud
Branches Tags
xzzn:main-cloud xzzn:waibao xzzn:develop-cloud xzzn:main-local xzzn:develop-local xzzn:screen-develop
..
compare: xzzn:2a3d2fcf63327685645d242bef8b56830044a142
Branches Tags
xzzn:waibao xzzn:main-cloud xzzn:develop-cloud xzzn:main-local xzzn:develop-local xzzn:screen-develop

5 Commits
main-cloud ... 2a3d2fcf63

Author SHA1 Message Date
白菜
2a3d2fcf63 Merge branch 'develop' into single-develop 2025-09-22 17:59:25 +08:00
白菜
25bb28f77a Merge branch 'develop' into single-develop 2025-09-17 14:57:30 +08:00
baicai
3d5d8918d7 合并develop最新代码 2025-08-20 17:53:26 +08:00
白菜
fe14089562 在路由权限校验中获取设备列表 2025-07-23 21:35:40 +08:00
白菜
b68f2608f3 本地 2025-07-21 23:00:41 +08:00
110 changed files with 5541 additions and 20005 deletions
Expand all files Collapse all files

9
.env.development
View File

@ -1,15 +1,14 @@
# 页面标题
VUE_APP_TITLE = 上动新能源-EMS管理系统
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 开发环境配置
NODE_ENV = 'development'
ENV = 'development'
# EMS管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# EMS管理系统/开发环境 图片拼接地址
VUE_APP_IMG_URL = '/dev-api'

9
.env.production
View File

@ -2,11 +2,10 @@
VUE_APP_TITLE = 上动新能源-EMS管理系统
# 生产环境配置
NODE_ENV = 'production'
ENV = 'production'
# EMS管理系统/生产环境
VUE_APP_BASE_API= 'http://1.15.120.242:8089'
# EMS管理系统/生产环境 图片拼接地址
VUE_APP_IMG_URL = 'http://1.15.120.242:8089'
VUE_APP_BASE_API = '/dev-api'
# EMS管理系统/生产环境 图片拼接地址 todo baseUrl有变更时 请更新
VUE_APP_IMG_URL = 'http://110.40.171.179:8089'

12
.env.staging
View File

@ -1,12 +1,12 @@
# 页面标题
VUE_APP_TITLE = 上动新能源-EMS管理系统
BABEL_ENV = production
NODE_ENV = production
# 测试环境配置
NODE_ENV = 'staging'
ENV = 'staging'
# EMS管理系统/测试环境
VUE_APP_BASE_API= 'http://110.40.171.179:8089'
# EMS管理系统/测试环境 图片拼接地址
VUE_APP_IMG_URL = 'http://110.40.171.179:8089'
VUE_APP_BASE_API = '/stage-api'

2
public/index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>logo-icon.png">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style>

BIN
public/logo-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

2
src/App.vue
View File

@ -10,7 +10,7 @@ import ThemePicker from "@/components/ThemePicker"
export default {
name: "App",
components: { ThemePicker }
components: { ThemePicker },
}
</script>
<style scoped>

668
src/api/ems/dzjk.js
View File

@ -7,40 +7,6 @@ export function getDzjkHomeView(siteId) {
method: 'get'
})
}
//获取单个站点总累计运行数据（基于日表）
export function getDzjkHomeTotalView(siteId) {
return request({
url: `/ems/siteMonitor/homeTotalView?siteId=${siteId}`,
method: 'get'
})
}
// 单站监控项目点位配置（供单站监控功能查询）
export function getProjectPointMapping(siteId) {
return request({
url: `/ems/siteMonitor/getProjectPointMapping?siteId=${siteId}`,
method: 'get'
})
}
// 单站监控项目展示数据（字段配置 + 最新值）
export function getProjectDisplayData(siteId) {
return request({
url: `/ems/siteMonitor/getProjectDisplayData?siteId=${siteId}`,
method: 'get'
})
}
// 单站监控项目展示数据写入（批量）
export function saveProjectDisplayData(data) {
return request({
url: `/ems/siteMonitor/saveProjectDisplayData`,
method: 'post',
data
})
}
//站点首页 冲放曲线
export function getSevenChargeData({siteId,startDate,endDate}) {
return request({
@ -49,22 +15,6 @@ export function getSevenChargeData({siteId, startDate, endDate}) {
})
}
// 获取站点包含的设备种类 用来判断单站监控设备监控的菜单栏展示
export function getSiteAllDeviceCategory(siteId) {
return request({
url: `/ems/siteConfig/getSiteAllDeviceCategory?siteId=${siteId}`,
method: 'get'
})
}
//EMS
export function getEmsDataList(siteId) {
return request({
url: `/ems/siteMonitor/getEmsDataList?siteId=${siteId}`,
method: 'get',
})
}
//获取pcs、实时运行头部的设备信息
export function getRunningHeadInfo(siteId) {
return request({
@ -72,7 +22,6 @@ export function getRunningHeadInfo(siteId) {
method: 'get'
})
}
//获取pcs列表
export function getPcsDetailInfo(siteId) {
return request({
@ -104,7 +53,6 @@ export function getStackNameList(siteId) {
method: 'get'
})
}
//获取单体电池 电池簇列表数据
export function getClusterNameList({stackDeviceId,siteId}) {
return request({
@ -112,7 +60,6 @@ export function getClusterNameList({stackDeviceId, siteId}) {
method: 'get'
})
}
//单体电池表格数据
export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId,batteryId, pageSize, pageNum}) {
return request({
@ -120,7 +67,6 @@ export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId,
method: 'get'
})
}
// 单体电池图表
//http://localhost:8089/ems/siteMonitor/getSingleBatteryData?clusterDeviceId=BMSC01&siteId=021_FXX_01&deviceId=001&startDate=2025-07-11&endDate=2025-07-18
export function getSingleBatteryData({siteId,deviceId,clusterDeviceId,startDate,endDate}) {
@ -138,23 +84,6 @@ export function getCoolingDataList(siteId) {
})
}
//获取动环数据
export function getDhDataList(siteId) {
return request({
url: `/ems/siteMonitor/getDhDataList?siteId=${siteId}`,
method: 'get'
})
}
//获取消防数据
export function getXfDataList(siteId) {
return request({
url: `/ems/siteMonitor/getXfDataList?siteId=${siteId}`,
method: 'get'
})
}
//获取电表数据
export function getAmmeterDataList(siteId) {
return request({
@ -164,356 +93,21 @@ export function getAmmeterDataList(siteId) {
}
// 故障告警
export function getAlarmDetailList({
status,
siteId,
deviceId,
alarmLevel,
alarmStartTime,
alarmEndTime,
pageSize,
pageNum
}) {
export function getAlarmDetailList({status,siteId, deviceId, alarmLevel, alarmStartTime, alarmEndTime,pageSize,pageNum}) {
return request({
url: `/ems/siteAlarm/getAlarmDetailList?siteId=${siteId}&status=${status}&deviceId=${deviceId}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
method: 'get'
})
}
// 告警生成工单
export function createTicketNo(data) {
return request({
url: `/ems/siteAlarm/createTicketNo`,
method: 'post',
data
})
}
// 告警确认关闭
export function closeAlarm(data) {
return request({
url: `/ems/siteAlarm/closeAlarm`,
method: 'post',
data
})
}
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/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,
}
}
})
return request({
url: `/ems/statsReport/getElectricData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
method: 'get'
})
}
//获取pcs列表
export function getPcsNameList(siteId) {
return request({
@ -521,218 +115,63 @@ export function getPcsNameList(siteId) {
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 getPCSData({siteId,startTime,endTime,dataType}) {
return request({
url: `/ems/statsReport/getPCSData?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 getStackData({siteId,startTime,endTime,dataType}) {
return request({
url: `/ems/statsReport/getStackData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
method: 'get'
})
}
//电池温度
export function getClusterData({siteId,stackId,clusterId,dateTime,pageNum,pageSize}) {
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,
}
return request({
url: `/ems/statsReport/getClusterData?siteId=${siteId}&stackId=${stackId}&clusterId=${clusterId}&dateTime=${dateTime}&pageNum=${pageNum}&pageSize=${pageSize}`,
method: 'get'
})
}
// 实时运行
//储能
export function storagePower(siteId, startTime, endTime) {
export function storagePower(siteId) {
return request({
url: `/ems/siteMonitor/runningGraph/storagePower?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
url: `/ems/siteMonitor/runningGraph/storagePower?siteId=${siteId}`,
method: 'get'
})
}
//poc温度
export function pcsMaxTemp(siteId, startTime, endTime) {
//poc平均温度
export function stackAveTemp(siteId) {
return request({
url: `/ems/siteMonitor/runningGraph/pcsMaxTemp?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
url: `/ems/siteMonitor/runningGraph/stackAveTemp?siteId=${siteId}`,
method: 'get'
})
}
// 电池平均soc
export function batteryAveSoc(siteId, startTime, endTime) {
export function batteryAveSoc(siteId) {
return request({
url: `/ems/siteMonitor/runningGraph/batteryAveSoc?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
url: `/ems/siteMonitor/runningGraph/batteryAveSoc?siteId=${siteId}`,
method: 'get'
})
}
// 电池平均温度
export function batteryAveTemp(siteId, startTime, endTime) {
export function batteryAveTemp(siteId) {
return request({
url: `/ems/siteMonitor/runningGraph/batteryAveTemp?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
url: `/ems/siteMonitor/runningGraph/batteryAveTemp?siteId=${siteId}`,
method: 'get'
})
}
// 功率曲线
export function getPowerData({siteId,startDate,endDate}) {
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))}
return request({
url: `/ems/statsReport/getPowerData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
method: 'get'
})
}
@ -743,30 +182,14 @@ export function getLoadNameList(siteId) {
method: 'get'
})
}
// 电表报表
export function getAmmeterData({siteId, startTime, endTime, pageSize, pageNum}) {
export function getAmmeterData({siteId,deviceId,dateTime}) {
return request({
url: `/ems/statsReport/getAmmeterDataFromDaily`,
method: 'get',
params: {
siteId,
startTime,
endTime,
pageSize,
pageNum,
}
url: `/ems/statsReport/getAmmeterData?siteId=${siteId}&deviceId=${deviceId}&dateTime=${dateTime}`,
method: 'get'
})
}
// 电价报表
export function getAmmeterRevenueData(data) {
return request({
url: `/ems/statsReport/getAmmeterRevenueData`,
method: 'get',
params: data
})
}
//策略列表
export function strategyRunningList(siteId) {
@ -775,7 +198,6 @@ export function strategyRunningList(siteId) {
method: 'get'
})
}
//停止策略
export function stopStrategyRunning(id) {
return request({
@ -783,7 +205,6 @@ export function stopStrategyRunning(id) {
method: 'get'
})
}
// 获取所有主策略
export function getMainStrategyList() {
return request({
@ -791,7 +212,6 @@ export function getMainStrategyList() {
method: 'get'
})
}
//获取所有辅助策略
export function getAuxStrategyList() {
return request({
@ -799,7 +219,6 @@ export function getAuxStrategyList() {
method: 'get'
})
}
//配置策略
export function configStrategy(data) {
return request({
@ -809,23 +228,6 @@ export function configStrategy(data) {
})
}
// 获取策略运行参数配置（按站点）
export function getStrategyRuntimeConfig(siteId) {
return request({
url: `/system/strategyRuntimeConfig/getBySiteId?siteId=${siteId}`,
method: 'get'
})
}
// 保存策略运行参数配置（按站点）
export function saveStrategyRuntimeConfig(data) {
return request({
url: `/system/strategyRuntimeConfig/save`,
method: 'post',
data
})
}
//http://localhost:8089/strategy/temp/getTempNameList?strategyId=1&siteId=021_FXX_01
//获取策略下的所有模板列表
export function getTempNameList({siteId,strategyId}) {
@ -834,7 +236,6 @@ export function getTempNameList({siteId, strategyId}) {
method: 'get',
})
}
//获取模板详情
///strategy/temp/list?templateId=1
export function getStrategyTempDetail(templateId) {
@ -843,7 +244,6 @@ export function getStrategyTempDetail(templateId) {
method: 'get',
})
}
//新增模板
export function addStrategyTemp(data) {
return request({
@ -852,7 +252,6 @@ export function addStrategyTemp(data) {
data
})
}
export function editStrategyTemp(data) {
return request({
url: `/strategy/temp`,
@ -860,7 +259,6 @@ export function editStrategyTemp(data) {
data
})
}
//http://localhost:8089/strategy/temp/{id}
export function deleteStrategyTemp(id) {
return request({
@ -876,7 +274,6 @@ export function timeConfigList({siteId, strategyId}) {
method: 'get',
})
}
//保存时间配置
// http://localhost:8089/strategy/timeConfig
export function setTimeConfigList(data) {
@ -886,7 +283,6 @@ export function setTimeConfigList(data) {
data
})
}
// 策略曲线图
//http://localhost:8089/strategy/curve/curveList?strategyId=1&siteId=021_FXX_01
export function curveList({siteId,strategyId}) {

42
src/api/ems/powerTariff.js
View File

@ -1,42 +0,0 @@
import request from '@/utils/request'
// 新增
export function addPriceConfig(data) {
return request({
url: '/ems/energyPriceConfig',
method: 'post',
data
})
}
//修改
export function editPriceConfig(data) {
return request({
url: '/ems/energyPriceConfig',
method: 'put',
data
})
}
//删除
export function energyPriceConfig(id) {
return request({
url: `/ems/energyPriceConfig/${id}`,
method: 'DELETE',
})
}
//详情
export function detailPriceConfig(id) {
return request({
url: `/ems/energyPriceConfig/${id}`,
method: 'get',
})
}
//列表
export function listPriceConfig({startTime,endTime,pageSize,pageNum,siteId}) {
return request({
url: `/ems/energyPriceConfig/list?startTime=${startTime}&endTime=${endTime}&pageNum=${pageNum}&pageSize=${pageSize}&siteId=${siteId}`,
method: 'get',
})
}

8
src/api/ems/search.js
View File

@ -30,11 +30,3 @@ export function getAllBatteryIdsBySites(data) {
method: 'get',
})
}
// 综合查询-按站点获取配置设备列表
export function getGeneralQueryDeviceList(siteId) {
return request({
url: `/ems/siteConfig/getDeviceList?siteId=${siteId}`,
method: 'get',
})
}

436
src/api/ems/site.js
View File

@ -1,5 +1,4 @@
import request from '@/utils/request'
// 站点列表
export function getSiteInfoList({siteName,startTime, endTime,pageSize,pageNum}) {
return request({
@ -8,39 +7,11 @@ export function getSiteInfoList({siteName, startTime, endTime, pageSize, pageNum
})
}
// 手动同步站点天气（收益报表）
export function syncSiteWeatherByDateRange({siteId, startTime, endTime}) {
return request({
url: `/ems/statsReport/syncWeatherByDateRange`,
method: 'post',
params: {siteId, startTime, endTime}
})
}
// 新增站点
export function addSite(data) {
return request({
url: `/ems/siteConfig/addSite`,
method: 'post',
data
})
}
// 编辑站点
export function updateSite(data) {
return request({
url: `/ems/siteConfig/updateSite`,
method: 'post',
data
})
}
// 设备列表
export function getDeviceInfoList(data) {
export function getDeviceInfoList({siteId,pageSize,pageNum}) {
return request({
url: `/ems/siteConfig/getDeviceInfoList`,
method: 'get',
params: data
url: `/ems/siteConfig/getDeviceInfoList?siteId=${siteId}&pageSize=${pageSize}&pageNum=${pageNum}`,
method: 'get'
})
}
@ -68,7 +39,6 @@ export function addDevice(data) {
data
})
}
// 编辑设备
export function updateDevice(data) {
return request({
@ -77,7 +47,6 @@ export function updateDevice(data) {
data
})
}
// 删除设备
export function deleteService(id) {
return request({
@ -86,23 +55,6 @@ export function deleteService(id) {
})
}
//pcs开、关机
export function updateDeviceStatus(data) {
return request({
url: `/ems/siteConfig/updateDeviceStatus`,
method: 'post',
data
})
}
// 获取上级设备id列表
export function getParentDeviceId({siteId, deviceCategory}) {
return request({
url: `/ems/siteConfig/getParentDeviceId?siteId=${siteId}&deviceCategory=${deviceCategory}`,
method: 'get',
})
}
//获取所有设备
export function getDeviceList(siteId) {
return request({
@ -112,387 +64,9 @@ export function getDeviceList(siteId) {
}
//获取设备点位table
export function getDevicePointList(data) {
export function getDevicePointList({siteId,deviceId,deviceCategory,pageNum,pageSize,dataPointName=''}) {
return request({
url: `/ems/siteConfig/getDevicePointList`,
method: 'get',
params: data
})
}
//获取设备类型下面的所有设备列表
export function getDeviceListBySiteAndCategory({siteId, deviceCategory}) {
return request({
url: `/ems/siteConfig/getDeviceListBySiteAndCategory?siteId=${siteId}&deviceCategory=${deviceCategory}`,
url: `/ems/siteConfig/getDevicePointList?siteId=${siteId}&deviceId=${deviceId}&pageNum=${pageNum}&pageSize=${pageSize}&deviceCategory=${deviceCategory}&dataPointName=${dataPointName}`,
method: 'get',
})
}
// 获取单站监控项目点位映射
export function getSingleMonitorProjectPointMapping(siteId) {
return request({
url: `/ems/siteConfig/getSingleMonitorProjectPointMapping?siteId=${siteId}`,
method: 'get',
})
}
// 保存单站监控项目点位映射
export function saveSingleMonitorProjectPointMapping(data) {
return request({
url: `/ems/siteConfig/saveSingleMonitorProjectPointMapping`,
method: 'post',
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
}
})
}
//新增设备保护
export function addProtectPlan(data) {
return request({
url: `/ems/protectPlan`,
method: 'post',
data
})
}
//修改设备保护
export function updateProtectPlan(data) {
return request({
url: `/ems/protectPlan`,
method: 'put',
data
})
}
//删除设备保护
export function deleteProtectPlan(id) {
return request({
url: `/ems/protectPlan/${id}`,
method: 'delete',
})
}
//设备保护详情
export function getProtectPlan(id) {
return request({
url: `/ems/protectPlan/${id}`,
method: 'get',
})
}
//设备保护详情列表
//http://localhost:8089/ems/protectPlan/list?pageSize=10&pageNum=1&faultName=总压&siteId=021_DDS_01
export function protectPlanList({siteId, faultName, pageSize, pageNum}) {
return request({
url: `/ems/protectPlan/list?siteId=${siteId}&faultName=${faultName}&pageSize=${pageSize}&pageNum=${pageNum}`,
method: 'get',
})
}
// 点位导出
export function exportPointList(data) {
return request({
url: `/ems/pointMatch/export`,
method: 'post',
data
})
}
// 点位导入
export function importPointList(data) {
return request({
url: `/ems/pointMatch/importData`,
method: 'post',
data
})
}
// 按站点导入模板点位配置
export function importPointTemplateBySite(data) {
return request({
url: `/ems/pointConfig/importTemplateBySite`,
method: 'post',
data
})
}
// CSV导入点位配置
export function importPointConfigCsv(data) {
return request({
url: `/ems/pointConfig/importCsv`,
method: 'post',
data,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
// 点位配置列表
export function getPointMatchList(params) {
return request({
url: `/ems/pointConfig/list`,
method: 'get',
params
})
}
// 点位配置详情
export function getPointMatchDetail(id) {
return request({
url: `/ems/pointConfig/${id}`,
method: 'get',
})
}
// 新增点位配置
export function addPointMatch(data) {
return request({
url: `/ems/pointConfig`,
method: 'post',
data
})
}
// 编辑点位配置
export function updatePointMatch(data) {
return request({
url: `/ems/pointConfig`,
method: 'put',
data
})
}
// 删除点位配置
export function deletePointMatch(ids) {
return request({
url: `/ems/pointConfig/${ids}`,
method: 'delete',
})
}
// 点位配置-批量获取最新值（新接口）
export function getPointConfigLatestValues(data) {
return request({
url: `/ems/pointConfig/latestValues`,
method: 'post',
data,
headers: {
repeatSubmit: false
}
})
}
// 点位配置-曲线数据（新接口）
export function getPointConfigCurve(data) {
return request({
url: `/ems/pointConfig/curve`,
method: 'post',
data,
headers: {
repeatSubmit: false
}
})
}
// 点位配置-生成最近7天数据
export function generatePointConfigRecent7Days(data) {
return request({
url: `/ems/pointConfig/generateRecent7Days`,
method: 'post',
data,
headers: {
repeatSubmit: false
}
})
}
// 计算点配置列表
export function getPointCalcConfigList(params) {
return request({
url: `/ems/pointCalcConfig/list`,
method: 'get',
params
})
}
// 计算点配置详情
export function getPointCalcConfigDetail(id) {
return request({
url: `/ems/pointCalcConfig/${id}`,
method: 'get',
})
}
// 新增计算点配置
export function addPointCalcConfig(data) {
return request({
url: `/ems/pointCalcConfig`,
method: 'post',
data
})
}
// 编辑计算点配置
export function updatePointCalcConfig(data) {
return request({
url: `/ems/pointCalcConfig`,
method: 'put',
data
})
}
// 删除计算点配置
export function deletePointCalcConfig(ids) {
return request({
url: `/ems/pointCalcConfig/${ids}`,
method: 'delete',
})
}
// 数据修正列表（ems_daily_energy_data）
export function getDailyEnergyDataList(params) {
return request({
url: `/ems/dailyEnergyData/list`,
method: 'get',
params
})
}
// 数据修正详情
export function getDailyEnergyDataDetail(id) {
return request({
url: `/ems/dailyEnergyData/${id}`,
method: 'get',
})
}
// 新增数据修正
export function addDailyEnergyData(data) {
return request({
url: `/ems/dailyEnergyData`,
method: 'post',
data
})
}
// 编辑数据修正
export function updateDailyEnergyData(data) {
return request({
url: `/ems/dailyEnergyData`,
method: 'put',
data
})
}
// 删除数据修正
export function deleteDailyEnergyData(ids) {
return request({
url: `/ems/dailyEnergyData/${ids}`,
method: 'delete',
})
}
// 充放电修正列表（ems_daily_charge_data）
export function getDailyChargeDataList(params) {
return request({
url: `/ems/dailyChargeData/list`,
method: 'get',
params
})
}
// 充放电修正详情
export function getDailyChargeDataDetail(id) {
return request({
url: `/ems/dailyChargeData/${id}`,
method: 'get',
})
}
// 新增充放电修正
export function addDailyChargeData(data) {
return request({
url: `/ems/dailyChargeData`,
method: 'post',
data
})
}
// 编辑充放电修正
export function updateDailyChargeData(data) {
return request({
url: `/ems/dailyChargeData`,
method: 'put',
data
})
}
// 删除充放电修正
export function deleteDailyChargeData(ids) {
return request({
url: `/ems/dailyChargeData/${ids}`,
method: 'delete',
})
}
//mqtt
export function getMqttList({pageSize, pageNum, mqttTopic, topicName, siteId}) {
return request({
url: `/ems/mqttConfig/list?pageSize=${pageSize}&pageNum=${pageNum}&mqttTopic=${mqttTopic}&topicName=${topicName}&siteId=${siteId}`,
method: 'get',
})
}
export function getMqttDetail(id) {
return request({
url: `/ems/mqttConfig/${id}`,
method: 'get',
})
}
export function addMqtt(data) {
return request({
url: `/ems/mqttConfig`,
method: 'post',
data
})
}
export function editMqtt(data) {
return request({
url: `/ems/mqttConfig`,
method: 'put',
data
})
}
export function deleteMqtt(id) {
return request({
url: `/ems/mqttConfig/${id}`,
method: 'delete',
})
}

BIN
src/assets/images/ems/bigData-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 MiB

BIN
src/assets/images/ems/bigData-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 MiB

BIN
src/assets/images/ems/bigData-3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 MiB

BIN
src/assets/images/ems/loginBg/1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

BIN
src/assets/images/ems/loginBg/2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 MiB

BIN
src/assets/images/ems/loginBg/3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 MiB

BIN
src/assets/images/ems/loginBg/4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1021 KiB

BIN
src/assets/images/ems/logo-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
src/assets/images/ems/logo-large.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

BIN
src/assets/images/ems/logo-small.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 65 KiB

BIN
src/assets/images/ems/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
src/assets/images/login-background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 KiB

109
src/assets/styles/common.scss
View File

@ -5,17 +5,15 @@
//右侧内容区域
//父元素
.ems-dashboard-editor-container{
background-color: #F1F5FC;
background-color: #FFFFFF;//#F1F5FC
padding: 24px;
font-size: 12px;
}
//除去顶部信息(如搜索栏、站点基本信息等)外的 白色背景内容区域
.ems-content-container{
background-color: #ffffff;
margin-top: 24px;
}
//需要设置内padding的白色背景区域
.ems-content-container-padding{
padding: 24px;
@ -29,49 +27,42 @@
font-size: 12px;
background: #F1F5FB ;
position: relative;
.card-title{
font-weight: 500;
color:#333333;
}
.el-button--text{
color: #666666;
}
}
}
.common-card-container-body-no-padding{
.el-card__body{
padding:0;
}
}
.common-card-container-no-title-bg {
.el-card__header{
background-color: transparent;
}
}
//单站监控 设备监控card公共样式
.sbjk-card-container{
.el-card__header {
background-color: transparent;
padding: 5px 14px;
padding: 10px 14px;
color: #ffffff;
position: relative;
border-radius: 5px 5px 0 0;
.large-title{
font-size: 18px;
font-size: 20px;
font-weight: 500;
line-height: 40px;
padding: 0 50px 0 11px;
display: inline-block;
vertical-align: middle;
}
.info {
display: inline-block;
vertical-align: middle;
@ -79,57 +70,33 @@
font-size: 12px;
line-height: 20px;
}
.el-button--text{
color: #666666;
}
.alarm{
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
.alarm-icon {
font-size: 22px;
color: #fff;
display: block;
cursor: pointer;
}
}
}
//红色背景颜色标题
&.warning-card-container{
.el-card__header {
background-color: #b64040; //#fc6b69;
}
.work-status {
color: #b64040 !important;;
background-color: #fc6b69;
}
}
//绿色背景颜色标题
&.running-card-container {
.el-card__header {
background-color: #40b6a5; //#05aea3;
}
.work-status {
color: #40b6a5 !important;
background-color: #05aea3;
}
}
//灰色背景颜色标题
&.timing-card-container {
.el-card__header {
background-color: #666666;
}
.work-status {
color: #666666 !important;;
}
}
}
@ -138,13 +105,11 @@
&.common-card-container .el-card__header {
padding-top: 0;
padding-bottom: 0;
.time-range-header {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
.card-title {
line-height: 40px;
}
@ -153,23 +118,22 @@
}
//描述样式 PCS、BMS总览、BMS电池簇页面公共样式
.descriptions-main{
padding:24px;
position: relative;
&.descriptions-main-bg-color{
background-color:#f1f5fc ;
.el-descriptions__body{
background-color:#f1f5fc ;
}
}
.el-descriptions-item__cell[colspan='1']{
width:25%
}
.el-descriptions__body .el-descriptions__table{
.descriptions-direction{
line-height: 19px;
@ -177,76 +141,35 @@
font-size: 16px;
font-weight: 500;
}
.descriptions-label{
line-height: 14px;
color: #666666;
font-size: 12px;
}
.danger{
color:#FC6B69;
}
.save{
color:#09ADA3;
}
.keep{
color:#3C81FF;
}
}
}
//电表、液冷公共样式
.device-info-row {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-left: 1px solid #eee;
border-top: 1px solid #eee;
.device-info-col {
padding: 10px 0;
text-align: center;
font-size: 12px;
color: #666666;
line-height: 14px;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
.left {
}
.right {
display: block;
font-weight: 500;
font-size: 16px;
line-height: 18px;
margin-top: 10px;
}
}
}
//公共表格样式
.el-table {
font-size: 13px;
}
.common-table.el-table{
color:#333333;
.el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
background: #f1f5fc;
border-bottom: none;
.table-head {
color: #515a6e;
}
}
.warning-status{
color:#FC6B69;
&.circle::before {
content: "";
display: inline-block;
@ -262,35 +185,29 @@
//二、三级菜单栏样式
.ems-second-menu{
width:fit-content;
.el-menu-item{
line-height: 40px;
height: 40px;
padding:0;
}
&.el-menu--horizontal > .el-menu-item.is-active,&.el-menu--horizontal > .el-menu-item{
border-bottom:none!important;
}
.el-menu-item.is-active{
background: #0366c1!important;
}
}
.ems-third-menu-container{
position: relative;
padding-left: 140px;
padding-left: 160px;
background-color: #ffffff;
.ems-third-menu{
border-right: none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
height: fit-content;
position: absolute;
top: 0;
left: 0;
top:20px;
left:20px;
.el-menu-item{
line-height: 45px;
height: 45px;
@ -298,12 +215,10 @@
width: 125px;
text-align: center;
}
.el-menu-item:hover{
background: #67b1ff!important;
color:#ffffff!important;
}
.el-menu-item.is-active{
background: #409eff!important;
}
@ -312,6 +227,7 @@
}
//按钮栏 选中样式
.ems-btns-group{
.activeBtn{
@ -326,7 +242,6 @@
.select-container.el-form--inline .el-form-item{
margin-right: 15px;
}
//红色背景颜色按钮
.alarm-btn,.alarm-btn:hover, .alarm-btn:focus{
background-color: #FC6B69;

137
src/components/BigDataPopup/index.vue
View File

@ -1,137 +0,0 @@
<template>
<el-dialog
:fullscreen="true"
:append-to-body="true"
:visible.sync="show"
:show-close="false"
top="0"
custom-class="big-data-dialog"
>
<div class="swiper-container">
<div class="swiper-icon left-icon" v-show="imgIndex > 0">
<i class="el-icon-d-arrow-left icon" @click="toLeft"></i>
</div>
<div v-show="showRightIcon" class="swiper-icon right-icon">
<i class="el-icon-d-arrow-right icon" @click="toRight"></i>
</div>
<div
class="img-container"
:style="{ transform: 'translateX(' + imgIndex * -100 + 'vw)' }"
>
<img
v-for="index in maxImgNumber"
:key="'swiperImg' + index"
:src="require(`@/assets/images/ems/bigData-${index}.png`)"
alt=""
/>
</div>
</div>
<div class="close-btn" @click="show = false">
<i class="el-icon-close"></i>
</div>
</el-dialog>
</template>
<style lang="scss" scoped>
.close-btn {
position: absolute;
right: 10px;
top: 10px;
font-size: 23px;
line-height: 20px;
color: rgba(217, 242, 255, 1);
cursor: pointer;
}
.swiper-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
.swiper-icon {
color: rgba(217, 242, 255, 1);
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
cursor: pointer;
font-size: 30px;
padding: 20px;
background: transparent;
&.left-icon {
left: 20px;
}
&.right-icon {
right: 20px;
}
&:hover {
.icon {
opacity: 1;
}
}
.icon {
transition: all 0.6s;
opacity: 0;
}
}
.img-container {
height: 100%;
transition: all 1s;
display: flex;
flex-direction: row;
z-index: 0;
img {
width: 100vw;
height: 100vh;
display: block;
margin: 0;
flex-shrink: 0;
}
}
}
</style>
<style lang="scss">
.big-data-dialog {
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 0;
margin: 0;
position: relative;
}
}
</style>
<script>
export default {
data() {
return {
show: false,
imgIndex: 0,
maxImgNumber: 3,
};
},
computed: {
showRightIcon() {
return this.imgIndex < this.maxImgNumber - 1;
},
},
watch: {
show: {
handler(newValue) {
if (!newValue) this.imgIndex = 0;
},
immediate: true,
},
},
methods: {
toLeft() {
if (this.imgIndex === 0) return;
this.imgIndex -= 1;
},
toRight() {
if (this.imgIndex >= this.maxImgNumber - 1) return;
this.imgIndex += 1;
},
},
};
</script>

72
src/components/Ems/DateRangeSelect/index.vue
View File

@ -2,7 +2,6 @@
<div class="time-range">
<el-date-picker
v-model="dateRange"
:class="miniTimePicker ? 'mini-date-picker' : ''"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
@ -11,47 +10,16 @@
:picker-options="pickerOptions"
end-placeholder="结束时间">
</el-date-picker>
<template v-if="!showIcon">
<el-button size="mini" style="margin-left: 10px;" :loading="loading" @click="reset">重置</el-button>
<el-button type="primary" size="mini" :loading="loading" @click="search">搜索</el-button>
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('before')">上一时段</el-button>
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">
下一时段
</el-button>
</template>
<template v-else>
<el-button class="btn-icon" icon="el-icon-refresh-right" circle size="mini" style="margin-left: 8px;"
:loading="loading"
@click="reset"></el-button>
<el-button class="btn-icon" type="primary" size="mini" icon="el-icon-search" circle :loading="loading"
@click="search"></el-button>
<el-button class="btn-icon" type="primary" size="mini" icon="el-icon-d-arrow-left" circle :loading="loading"
@click="timeLine('before')"></el-button>
<el-button class="btn-icon" type="primary" size="mini" icon="el-icon-d-arrow-right" circle :loading="loading"
@click="timeLine('next')"
:disabled="disabledNextBtn"></el-button>
</template>
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">下一时段</el-button>
</div>
</template>
<script>
import {formatDate} from '@/filters/ems'
export default {
props: {
showIcon: {
type: Boolean,
required: false,
default: false
},
miniTimePicker: {
type: Boolean,
required: false,
default: false
}
},
computed:{
disabledNextBtn(){
return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
@ -86,7 +54,6 @@ export default {
//重置 设置时间范围为初始化时间段
reset(){
this.resetDate()
this.$emit('reset')
this.$emit('updateDate',this.dateRange)
},
// 搜索
@ -94,18 +61,15 @@ export default {
this.$emit('updateDate',this.dateRange)
},
timeLine(type){
if (!this.dateRange || !this.dateRange[0] || !this.dateRange[1]) return
const nowStartTimes = new Date(this.dateRange[0]).getTime(), nowEndTimes = new Date(this.dateRange[1]).getTime(),
maxTime = new Date(this.defaultDateRange[1]).getTime()
const nowDis = nowEndTimes - nowStartTimes//用户当前选择时间差 可能=0
//baseTime,maxTime 毫秒数
const baseDis = 24 * 60 * 60 * 1000
const calcDis = nowDis === 0 ? baseDis : nowDis
let start = type === 'before' ? nowStartTimes - calcDis : nowStartTimes + calcDis
if (start > maxTime) start = maxTime
let end = type === 'before' ? nowEndTimes - calcDis : nowEndTimes + calcDis
if (end > maxTime) end = maxTime
this.dateRange = [formatDate(start), formatDate(end)]
let baseTime = type === 'before' ? new Date(this.dateRange[0]).getTime() - ( 24 * 60 * 60 * 1000) :new Date(this.dateRange[1]).getTime() + ( 24 * 60 * 60 * 1000) ,
maxTime = new Date(this.defaultDateRange[1]).getTime()
//updateTime 毫秒数
let updateTime = type === 'before' ? baseTime - 7 * 24 * 60 * 60 * 1000 : baseTime + 7 * 24 * 60 * 60 * 1000
if(type === 'next' && updateTime >= maxTime) updateTime = maxTime
const start = formatDate(type === 'before' ? updateTime : baseTime)
const end = formatDate(type === 'before' ? baseTime : updateTime)
this.dateRange = [start,end]
this.$emit('updateDate',this.dateRange)
},
}
@ -115,35 +79,19 @@ export default {
<style lang="scss" scoped>
.time-range{
display: flex;
::v-deep {
.el-range-editor--medium .el-range__icon, .el-range-editor--medium .el-range__close-icon{
line-height: 22px;
}
.el-range-editor--medium.el-input__inner{
height: 30px;
}
.el-range-editor--medium .el-range-separator{
line-height: 22px;
line-height: 24px;
}
.el-button--mini{
padding:3px 10px;
}
// 展示icon的小组件
.btn-icon.el-button--mini {
padding: 3px 8px;
margin-left: 6px;
}
//小宽度时间选择框
.mini-date-picker {
width: 250px !important;
}
}
}

28
src/components/Ems/SingleSquareBox/index.vue
View File

@ -2,10 +2,7 @@
<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">
<i v-if="data.loading" class="el-icon-loading point-loading-icon"></i>
<span v-else>{{ data.value | formatNumber }}</span>
</div>
<div class="single-square-box-value">{{ data.value | formatNumber }}</div>
</el-card>
</template>
@ -17,30 +14,19 @@
color:#666666;
text-align: left;
.single-square-box-title{
font-size: 10px;
line-height: 10px;
padding-bottom: 8px;
font-size: 12px;
line-height: 12px;
padding-bottom: 12px;
}
.single-square-box-value{
font-size: 18px;
line-height: 18px;
font-size: 26px;
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: 8px 7px;
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 {

25
src/components/Ems/ZdBaseInfo/index.vue
View File

@ -4,10 +4,7 @@
<el-row type="flex" >
<el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
<div class="info">{{ item.title }}</div>
<div class="num">
<i v-if="item.loading" class="el-icon-loading"></i>
<span v-else>{{item.num | formatNumber}}</span>
</div>
<div class="num">{{item.num | formatNumber}}</div>
</el-card>
</el-row>
</template>
@ -21,35 +18,30 @@ export default {
title:'站点总数（座）',
num:'',
color:'#FFBD00',
attr:'siteNum',
loading: true
attr:'siteNum'
},{
title:'装机功率（MW）',
num:'',
color:'#3C81FF',
attr:'installPower',
loading: true
attr:'installPower'
},{
title:'装机容量（MW）',
num:'',
color:'#5AC7C0',
attr:'installCapacity',
loading: true
attr:'installCapacity'
},{
title:'总充电量（KWh）',
title:'总充电量（MWh）',
num:'',
color:'#A696FF',
attr:'totalChargedCap',
loading: true
attr:'totalChargedCap'
},{
title:'总放电量（KWh）',
title:'总放电量（MWh）',
num:'',
color:'#A696FF',
attr:'totalDischargedCap',
loading: true
attr:'totalDischargedCap'
}]
}
@ -58,7 +50,6 @@ export default {
setData(res = {}){
this.data.forEach((item)=>{
item.num =res[item.attr]
item.loading = false
})
}
},

66
src/components/Ems/ZdSelect/index.vue
View File

@ -2,16 +2,8 @@
<template>
<div class="zd-select-container">
<el-form :inline="true">
<el-form-item :label="showLabel ? '站点选择' : ''" :class="{'no-label': !showLabel}">
<el-select
v-model="id"
:size="size"
:placeholder="placeholder"
:loading="loading"
loading-text="正在加载数据"
:style="{width: selectWidth}"
@change="onSubmit"
>
<el-form-item label="站点选择">
<el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="onSubmit">
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
</el-select>
</el-form-item>
@ -23,21 +15,7 @@
</template>
<style scoped lang="scss">
.zd-select-container {
.el-form {
display: inline-flex;
align-items: center;
}
.el-form-item {
margin-bottom: 0;
}
.no-label ::v-deep .el-form-item__label {
display: none;
}
.no-label ::v-deep .el-form-item__content {
margin-left: 0 !important;
}
}
</style>
<script>
import {getAllSites} from '@/api/ems/zddt'
@ -53,26 +31,6 @@ import {mapGetters} from "vuex"
type:String,
default:'',
required:false
},
showLabel: {
type: Boolean,
default: true,
required: false
},
size: {
type: String,
default: 'medium',
required: false
},
placeholder: {
type: String,
default: '请选择换电站名称',
required: false
},
selectWidth: {
type: String,
default: '220px',
required: false
}
},
data() {
@ -86,23 +44,10 @@ import {mapGetters} from "vuex"
computed:{
...mapGetters(["zdList"]),
},
watch: {
defaultSiteId(newVal) {
if (!newVal || !this.siteList || this.siteList.length === 0) {
return
}
if (this.siteList.find(item => item.siteId === newVal) && this.id !== newVal) {
this.id = newVal
}
}
},
methods:{
onSubmit(){
this.$emit('submitSite',this.id)
},
emitSitesLoaded() {
this.$emit('sitesLoaded', this.siteList || [])
},
setDefaultSite(){
const defaultSite = this.defaultSiteId
if(defaultSite && this.siteList.find(item=>item.siteId === defaultSite)){
@ -115,7 +60,7 @@ import {mapGetters} from "vuex"
getList(){
return getAllSites().then(response => {
this.siteList = response.data || []
this.emitSitesLoaded()
console.log("获取站点列表返回数据",response,this.siteList)
this.setDefaultSite()
}).finally(() => {this.loading=false;this.searchLoading=false})
}
@ -128,12 +73,13 @@ import {mapGetters} from "vuex"
if(this.zdList.length === 0){
this.getList().then(()=>{
this.$store.commit('SET_ZD_LIST', this.siteList)
console.log("从store中获取站点列表数据,但是store中的zdList=[]，所以从接口获取数据",this.zdList,this.siteList)
})
}else{
this.siteList = this.zdList
this.emitSitesLoaded()
this.loading=false
this.searchLoading=false
console.log("从store中获取站点列表数据",this.zdList,this.siteList)
this.setDefaultSite()
}
}else{

79
src/layout/components/Navbar.vue
View File

@ -1,17 +1,12 @@
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar"/>
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
<top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
<div class="right-menu">
<template v-if="device!=='mobile'">
<div class="big-data-container">
<i class="el-icon-s-marketing big-data-icon" @click.stop="showBigDataImg"></i>
</div>
<search id="header-search" class="right-menu-item" />
@ -22,16 +17,6 @@
</el-tooltip>
</template>
<div v-if="device!=='mobile'" class="site-select-wrap">
<zd-select
:get-list-by-store="true"
:show-label="false"
size="mini"
select-width="220px"
:default-site-id="$route.query.siteId"
@submitSite="onSiteChange"
/>
</div>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
<div class="avatar-wrapper">
@ -47,11 +32,11 @@
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="right-menu-item hover-effect setting" @click="setLayout" v-if="setting">
<svg-icon icon-class="more-up" />
</div>
</div>
<BigDataPopup ref="bigDataPopup"/>
</div>
</template>
@ -63,8 +48,6 @@ import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import BigDataPopup from '@/components/BigDataPopup'
import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
export default {
emits: ['setLayout'],
@ -74,9 +57,7 @@ export default {
Hamburger,
Screenfull,
SizeSelect,
Search,
BigDataPopup,
ZdSelect
Search
},
computed: {
...mapGetters([
@ -97,28 +78,6 @@ export default {
}
},
methods: {
onSiteChange(id) {
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 || siteName !== (this.$route.query.siteName || '')) {
this.$router.push({
path: this.$route.path,
query: {
...this.$route.query,
siteId: id,
siteName
}
})
}
this.$store.dispatch('getSiteAlarmNum', id)
},
showBigDataImg() {
this.$refs.bigDataPopup.show = true
},
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
@ -134,8 +93,7 @@ export default {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index'
})
}).catch(() => {
})
}).catch(() => {})
}
}
}
@ -181,33 +139,6 @@ export default {
height: 100%;
line-height: 50px;
.site-select-wrap {
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 10px 0 14px;
vertical-align: top;
::v-deep .el-form-item__content {
line-height: 1;
}
::v-deep .el-input__inner {
border-radius: 16px;
}
}
.big-data-container {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 24px;
color: #5a5e66;
vertical-align: text-bottom;
cursor: pointer;
}
&:focus {
outline: none;
}
@ -237,7 +168,6 @@ export default {
.avatar-wrapper {
margin-top: 10px;
position: relative;
padding-right: 10px;
.user-avatar {
cursor: pointer;
@ -262,7 +192,6 @@ export default {
}
}
}
}
}
</style>

48
src/layout/components/Sidebar/Logo.vue
View File

@ -1,22 +1,8 @@
<template>
<div
class="sidebar-logo-container"
:class="{ collapse: collapse }"
:style="{
backgroundColor:
sideTheme === 'theme-dark'
? variables.menuBackground
: variables.menuLightBackground,
}"
>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade">
<router-link
v-if="collapse"
key="collapse"
class="sidebar-logo-link"
to="/"
>
<img :src="logoSmall" class="sidebar-logo" />
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img :src="logo" class="sidebar-logo" />
<!-- <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
@ -28,33 +14,35 @@
</template>
<script>
import variables from "@/assets/styles/variables.scss";
import logo from "@/assets/images/ems/logo.png";
import logoSmall from "@/assets/images/ems/logo-small.png";
import logoImg from '@/assets/logo/logo.png'
import variables from '@/assets/styles/variables.scss'
import logo from '@/assets/images/ems/logo.png'
import logoLarge from '@/assets/images/ems/logo-large.png'
export default {
name: "SidebarLogo",
name: 'SidebarLogo',
props: {
collapse: {
type: Boolean,
required: true,
},
required: true
}
},
computed: {
variables() {
return variables;
return variables
},
sideTheme() {
return this.$store.state.settings.sideTheme;
},
return this.$store.state.settings.sideTheme
}
},
data() {
return {
title: process.env.VUE_APP_TITLE,
// logo: logoImg
logo:logo,
logoSmall: logoSmall,
};
},
};
logoLarge:logoLarge
}
}
}
</script>
<style lang="scss" scoped>

9
src/layout/components/Sidebar/index.vue
View File

@ -55,12 +55,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
::v-deep{
//,.el-submenu.is-active>.el-submenu__title 选中了二级菜单的以及菜单
.el-menu-item.is-active{
background-color: rgba(0,0,0,0.1) !important;
}
}
</style>

10
src/mixins/ems/getQuerySiteId.js
View File

@ -6,16 +6,16 @@ const getQuerySiteId= {
}
},
watch: {
'$route.query':{
'$store.state.ems.zdList':{
handler (newQuery,oldQuery) {
if(!newQuery || newQuery.length === 0){return}
// 参数变化处理
this.$nextTick(() => {
const {siteId} =newQuery
if(siteId){
const {siteId} =newQuery[0]
this.siteId = siteId
siteId && this.init(newQuery.siteId)
console.log('mixin=>getQuerySiteId=>页面参数siteId发生了变化,this.siteId=',this.siteId)
}
console.log('watch站点列表返回数据newQuery=',newQuery)
console.log('设置页面siteId，this.siteId=',this.siteId)
})
},
immediate: true,

24
src/permission.js
View File

@ -10,16 +10,11 @@ import { isRelogin } from '@/utils/request'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/register']
const GLOBAL_SITE_STORAGE_KEY = 'global_site_id'
const isWhiteList = (path) => {
return whiteList.some(pattern => isPathMatch(pattern, path))
}
const shouldAppendSiteId = (path) => {
return !['/login', '/register', '/404', '/401'].includes(path) && !path.startsWith('/redirect')
}
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
@ -31,29 +26,12 @@ router.beforeEach((to, from, next) => {
} else if (isWhiteList(to.path)) {
next()
} else {
const routeSiteId = to.query?.siteId
if (routeSiteId) {
localStorage.setItem(GLOBAL_SITE_STORAGE_KEY, routeSiteId)
} else {
const globalSiteId = localStorage.getItem(GLOBAL_SITE_STORAGE_KEY)
if (globalSiteId && shouldAppendSiteId(to.path)) {
next({
path: to.path,
query: {
...to.query,
siteId: globalSiteId
},
hash: to.hash,
replace: true
})
return
}
}
if (store.getters.roles.length === 0) {
isRelogin.show = true
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => {
isRelogin.show = false
store.dispatch('getZdList')
store.dispatch('GenerateRoutes').then(accessRoutes => {
// 根据roles权限生成可访问的路由表
router.addRoutes(accessRoutes) // 动态添加可访问路由表

252
src/router/ems.js
View File

@ -7,166 +7,79 @@ export const dzjk = [
path: '/dzjk',
component: Layout,
redirect: '/dzjk/home',
meta: {title: '单站监控', icon: 'dashboard',},
meta: { title: '单站监控', icon: 'server',},
alwaysShow: false,
name: 'DzjkLocal',
hidden: true,
children: [
{
path: '',
component: () => import('@/views/ems/dzjk/index'),
name: 'DzjkRoot',
redirect: '/dzjk/home',
hidden: true,
name:'Dzjk',
children: [
{
path: '/dzjk/home',
component: () => import('@/views/ems/dzjk/home/index.vue'),
name: 'DzjkHome',
meta: {
title: '站点首页',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkHome'
}
meta: { title: '站点首页',breadcrumb: false,activeMenu: '/dzjk/home',activeSecondMenuName:'DzjkHome' }
},
{
path: '/dzjk/zxlt',
component: () => import('@/views/ems/dzjk/zxlt/index.vue'),
name: 'DzjkZxlt',
meta: {
title: '主线路图',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkZxlt'
}
meta: { title: '主线路图',breadcrumb: false,activeMenu: '/dzjk/zxlt',activeSecondMenuName:'DzjkZxlt' }
},
{
path: '/dzjk/sbjk',
component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
name: 'DzjkSbjk',
meta: {title: '设备监控', breadcrumb: false, activeMenu: '/dzjk'},
alwaysShow: false,
meta: { title: '设备监控',breadcrumb: false,activeMenu: '/dzjk/sbjk'},
hidden: false,
redirect: '/dzjk/sbjk/ssyx',
children: [
{
path: 'ssyx',
component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'),
name: 'DzjkSbjkSsyx',
meta: {
title: '实时运行',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkSbjk',
deviceCategory: 'SSYX'
},
},
{
path: 'ems',
component: () => import('@/views/ems/dzjk/sbjk/ems/index.vue'),
name: 'DzjkSbjkEms',
meta: {
title: 'EMS',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkSbjk',
deviceCategory: 'EMS'
},
hidden: true,
meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk'},
},
{
path: 'pcs',
component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
name: 'DzjkSbjkPcs',
meta: {
title: 'PCS',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkSbjk',
deviceCategory: 'PCS'
},
hidden: true,
meta: { title: 'PCS',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk'},
},
{
path: 'bmszl',
component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'),
name: 'DzjkSbjkBmszl',
meta: {
title: 'BMS总览',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkSbjk',
deviceCategory: 'STACK'
},
hidden: true,
meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk'},
},
{
path: 'bmsdcc',
component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'),
name: 'DzjkSbjkBmsdcc',
meta: {
title: 'BMS电池簇',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkSbjk',
deviceCategory: 'CLUSTER'
},
hidden: true,
meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk'},
},
{
path: 'dtdc',
component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'),
name: 'DzjkSbjkDtdc',
meta: {
title: 'BMS单体电池',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkSbjk',
deviceCategory: 'BATTERY'
},
hidden: true,
meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk'},
},
{
path: 'db',
component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'),
name: 'DzjkSbjkDb',
meta: {
title: '电表',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkSbjk',
deviceCategory: 'AMMETER'
},
hidden: true,
meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk'},
},
{
path: 'yl',
component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
name: 'DzjkSbjkYl',
meta: {
title: '冷却',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkSbjk',
deviceCategory: 'COOLING'
},
},
{
path: 'dh',
component: () => import('@/views/ems/dzjk/sbjk/dh/index.vue'),
name: 'DzjkSbjkDh',
meta: {
title: '动环',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkSbjk',
deviceCategory: 'DH'
},
},
{
path: 'xf',
component: () => import('@/views/ems/dzjk/sbjk/xf/index.vue'),
name: 'DzjkSbjkXf',
meta: {
title: '消防',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkSbjk',
deviceCategory: 'XF'
},
hidden: true,
meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk'},
}
]
},
@ -174,151 +87,70 @@ export const dzjk = [
path: '/dzjk/gzgj',
component: () => import('@/views/ems/dzjk/gzgj/index.vue'),
name: 'DzjkGzgj',
meta: {
title: '故障告警',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkGzgj'
}
meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk/gzgj',activeSecondMenuName:'DzjkGzgj' }
},
{
path: '/dzjk/tjbb',
component: () => import('@/views/ems/dzjk/tjbb/index.vue'),
name: 'DzjkTjbb',
meta: {title: '统计报表', breadcrumb: false, activeMenu: '/dzjk'},
alwaysShow: false,
meta: {title: '统计报表', breadcrumb: false, activeMenu: '/dzjk/tjbb'},
hidden: false,
redirect: '/dzjk/tjbb/gltj',
children: [
{
path: 'gltj',
component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
name: 'DzjkTjbbGltj',
meta: {
title: '运行统计',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkTjbb'
},
hidden: true,
meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
},
{
path: 'glqx',
component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'),
name: 'DzjkTjbbGlqx',
meta: {
title: '功率曲线',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkTjbb'
},
hidden: true,
meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
},
{
path: 'pcsqx',
component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'),
name: 'DzjkTjbbPcsqx',
meta: {
title: 'PCS曲线',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkTjbb'
},
hidden: true,
meta: { title: 'PCS曲线',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
},
{
path: 'dcdqx',
component: () => import('@/views/ems/dzjk/tjbb/dcdqx/index.vue'),
name: 'DzjkTjbbDcdqx',
meta: {
title: '电池堆曲线',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkTjbb'
},
hidden: true,
meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
},
{
path: 'dcwd',
component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'),
name: 'DzjkTjbbDcwd',
meta: {
title: '电池温度',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkTjbb'
},
hidden: true,
meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
},
{
path: 'dbbb',
component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'),
name: 'DzjkTjbbDbbb',
meta: {
title: '电表报表',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkTjbb'
},
},
{
path: 'sybb',
component: () => import('@/views/ems/dzjk/tjbb/sybb/index.vue'),
name: 'DzjkTjbbSybb',
meta: {
title: '收益报表',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkTjbb'
},
hidden: true,
meta: { title: '电表报表',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
}
]
},
{
path: '/dzjk/clpz',
component: () => import('@/views/ems/dzjk/clpz/index.vue'),
name: 'DzjkClpz',
meta: {title: '策略配置', breadcrumb: false, activeMenu: '/dzjk'},
redirect: '/dzjk/clpz/clyx',
children: [
{
path: 'clyx',
component: () => import('@/views/ems/dzjk/clpz/clyx/index.vue'),
name: 'DzjkClpzClyx',
meta: {
title: '策略运行',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkClpz'
},
},
{
path: 'runtimeParam',
component: () => import('@/views/ems/dzjk/clpz/runtimeParam/index.vue'),
name: 'DzjkClpzRuntimeParam',
meta: {
title: '运行参数',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkClpz'
},
},
{
path: 'sbbh',
component: () => import('@/views/ems/site/sbbh/index.vue'),
name: 'DzjkClpzSbbh',
meta: {
title: '设备保护',
breadcrumb: false,
activeMenu: '/dzjk',
activeSecondMenuName: 'DzjkClpz'
},
},
// {
// path: 'xftg',
// component: () => import('@/views/ems/dzjk/clpz/xftg/index.vue'),
// hidden:true,
// breadcrumb: false,
// name: 'DzjkClpzXftg',
// meta: { title: '削峰填谷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkClpz'},
// }
]
}
]
name: 'DzjkClpz',
meta: {title: '策略配置', breadcrumb: false, activeMenu: '/dzjk/clpz'},
}
]
}
]

13
src/router/index.js
View File

@ -89,19 +89,6 @@ export const constantRoutes = [
}
]
},
{
path: '/ems/site/zdlb',
component: Layout,
hidden: true,
children: [
{
path: 'monitor-point-mapping',
component: () => import('@/views/ems/site/zdlb/MonitorPointMapping.vue'),
name: 'MonitorPointMapping',
meta: { title: '单站监控项目点位配置', activeMenu: '/dzjk/clpz/sbbh' }
}
]
},
// EMS管理系统routers
...dzjk
]

6
src/settings.js
View File

@ -7,12 +7,12 @@ module.exports = {
/**
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
*/
sideTheme: 'theme-light',
sideTheme: 'theme-dark',
/**
* 系统布局配置
*/
showSettings: false,
showSettings: true,
/**
* 是否显示顶部导航
@ -52,5 +52,5 @@ module.exports = {
/**
* 底部版权文本内容
*/
footerContent: 'Copyright © 2025 上动新能源 版权所有'
footerContent: 'Copyright © 2018-2025 xzzn. All Rights Reserved.'
}

58
src/store/modules/ems.js
View File

@ -1,22 +1,9 @@
import {getAlarmDetailList, getSiteAllDeviceCategory} from '@/api/ems/dzjk'
import {getAllSites} from '@/api/ems/zddt'
const ems = {
state: {
dzjkAlarmLighting: false,//单站监控 告警统计红点标志
zdList:[],
zdDeviceCategoryOptions: {},//站点各个站点包含的设备种类 {021_DDS_01:["BATTERY","CLUSTER","STACK", "DH", "AMMETER", "PCS", "XF"],021_DDS_02:[]...}
CLUSTERWorkStatusOptions: {'0': '静置', '1': '充电', '2': '放电', '3': '待机', '5': '运行', '9': "故障"},//电池簇工作状态
PCSWorkStatusOptions: {'0': '运行', '1': '停机', '2': '故障', '3': '待机', '4': '充电', '5': '放电'},//PCS工作状态
STACKWorkStatusOptions: {
"0": "静置",
"1": "充电",
"2": "放电",
"3": "浮充",
'4': '待机',
'5': '运行',
'9': "故障"
},//STACKBMS总览工作状态
deviceStatusOptions: {'0': '离线', '1': '在线'},//设备状态
workStatusOptions:{'0':'正常','1':'异常','2':'停止'},//工作状态
deviceStatusOptions:{'0':'在线','1':'离线','2':'维修中'},//设备状态
gridStatusOptions:{'0':'并网','1':'未并网'},//并网状态
controlModeOptions:{'0':'远程','1':'本地'},//控制模式
warnOptions:{0:'正常', 1:'中断', 2:'不在线',3:'异常'},//告警状态
@ -25,48 +12,27 @@ const ems = {
alarmLevelOptions:{'A':'提示','B':'一般','C':'严重','D':'紧急'},//告警等级
alarmStatusOptions:{'0':'待处理','1':'已处理','2':'处理中'},//告警状态
deviceTypeOptions:{'TCP':'TCP','RTU':'RTU'},//设备类型
ticketStatusOptions: {1: '待处理', 2: '处理中', 3: '已处理'},//工单处理状态
ticketStatusOptions:{0:'待处理', 1:'已处理', 2:'处理中'},//工单处理状态
strategyStatusOptions:{'0':'未启用', '1':'已运行', '2':'已暂停', '3':'禁用', '4':'删除'},//策略状态
chargeStatusOptions: {'1': '充电', '2': '待机', '3': '放电'},//冲放状态
comparisonOperatorOptions: {'>': '>', '<': '<', '=': '=', '>=': '>=', '<=': '<='},
relationWithPoint: {'||': '||', '&&': '&&'}
chargeStatusOptions:{'1':'充电','2':'待机'},//冲放状态
deviceCategoryOptions:{'PCS':'PCS','STACK':'电池堆','CLUSTER':'电池簇','COOLING':'液冷','BATTERY':'单体电池','AMMETER':'电表'},//设备类别
},
mutations: {
SET_ZD_LIST(state, list) {
state.zdList = list || []
},
SET_DZJK_ALARM_LIGHTING(state, status) {
state.dzjkAlarmLighting = status
},
SET_ZD_DEVICE_CATEGORY_OPTIONS(state, {siteId, data}) {
state.zdDeviceCategoryOptions = Object.assign({}, state.zdDeviceCategoryOptions, {[siteId]: data})
}
},
actions: {
//查询站点的所有待处理0的告警 存在展示红点标志
getSiteAlarmNum({state, commit}, siteId) {
getAlarmDetailList({
status: 0,
siteId,
pageSize: 10,
pageNum: 1,
deviceId: '',
alarmLevel: '',
alarmStartTime: '',
alarmEndTime: ''
}).then(response => {
commit('SET_DZJK_ALARM_LIGHTING', !!response?.total || false)
})
},
getSiteDeviceCategory({state, commit}, siteId) {
getSiteAllDeviceCategory(siteId).then(response => {
let data = response?.data || [];
data.unshift('SSYX');
commit('SET_ZD_DEVICE_CATEGORY_OPTIONS', {siteId, data})
getZdList({commit,state}){
if(state.zdList.length === 0){
getAllSites().then(response => {
commit('SET_ZD_LIST', response?.data || [])
console.log('store action getZdList 获取站点数据',state.zdList)
})
}
}
}
}
export default ems

24
src/store/modules/permission.js
View File

@ -34,12 +34,6 @@ const permission = {
return new Promise(resolve => {
// 向后端请求路由数据
getRouters().then(res => {
let hasDzjk = false
if(res?.data){
res.data.forEach(i=>{
i.children && i.children.find(j=>j.path.indexOf('dzjk')>-1) && (hasDzjk=true)
})
}
const sdata = JSON.parse(JSON.stringify(res.data))
const rdata = JSON.parse(JSON.stringify(res.data))
const sidebarRoutes = filterAsyncRouter(sdata)
@ -47,13 +41,6 @@ const permission = {
const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
router.addRoutes(asyncRoutes)
// 后端已下发 dzjk 菜单时，移除本地静态 dzjk 路由，避免重名/重复注册
if (hasDzjk) {
const index = constantRoutes.findIndex(i=>i.path.indexOf('dzjk')>-1)
if (index > -1) {
constantRoutes.splice(index, 1)
}
}
commit('SET_ROUTES', rewriteRoutes)
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
commit('SET_DEFAULT_ROUTES', sidebarRoutes)
@ -124,16 +111,11 @@ export function filterDynamicRoutes(routes) {
}
export const loadView = (view) => {
const normalizedView = String(view || '')
.replace(/^\.\/+/, '')
.replace(/^\/+/, '')
.replace(/^@\/views\//, '')
if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'staging') {
return (resolve) => require([`@/views/${normalizedView}`], resolve)
if (process.env.NODE_ENV === 'development') {
return (resolve) => require([`@/views/${view}`], resolve)
} else {
// 使用 import 实现生产环境的路由懒加载
return () => import(`@/views/${normalizedView}`)
return () => import(`@/views/${view}`)
}
}

2
src/views/ems/dzjk/clpz/clyx/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div v-loading="loading">
<div v-loading="loading" class="ems-dashboard-editor-container ems-content-container-padding">
<template v-if="!showTemp">
<el-button v-if="!showTemp" type="primary" plain @click="settingStrategy" style="margin-bottom: 20px;">新增策略</el-button>
<cl-container v-for="(item,index) in list" :key="index+'clContainer'" :info="item" :hide-setting-btn="showTemp" class="contain" @update="init" @showSetting="settingStrategy(item)">

52
src/views/ems/dzjk/clpz/index.vue
View File

@ -1,52 +0,0 @@
<template>
<div class="ems-dashboard-editor-container ems-third-menu-container">
<el-menu
class="ems-third-menu"
:default-active="$route.name"
background-color="#ffffff"
text-color="#666666"
active-text-color="#ffffff"
>
<el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'clpzChildrenRoute'">
<router-link style="height: 100%;width: 100%;display: block;" :to="{path:item.path,query:$route.query}">
{{item.meta.title}}
</router-link>
</el-menu-item>
</el-menu>
<div class="ems-content-container ems-content-container-padding clpz-ems-content-container">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
<script>
import { dzjk } from '@/router/ems'
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkClpz').children.filter(item=>!item?.hidden)//获取到统计报表下面的字路由
console.log('设备监控子路由',childrenRoute)
export default {
name:'DzjkClpz',
data(){
return {
childrenRoute,
activeMenu:''
}
},
mounted() {
console.log('当前统计报表页面路由',this.$route)
}
}
</script>
<style scoped lang="scss">
.clpz-ems-content-container{
margin-top:0;
padding-top:0;
padding-right: 0;
flex: 1;
}
</style>

248
src/views/ems/dzjk/clpz/runtimeParam/index.vue
View File

@ -1,248 +0,0 @@
<template>
<div class="ems-dashboard-editor-container" v-loading="loading">
<el-card shadow="never" class="common-card-container">
<div slot="header" class="clearfix">
<span class="card-title">运行参数配置</span>
<span class="site-tag">站点：{{ siteId || '-' }}</span>
</div>
<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>
</div>
</el-form>
</el-card>
</div>
</template>
<script>
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
import { getStrategyRuntimeConfig, saveStrategyRuntimeConfig } from '@/api/ems/dzjk'
const emptyForm = () => ({
siteId: '',
socDown: 0,
socUp: 100,
antiReverseThreshold: 30,
powerSetMultiplier: 10,
antiReverseRangePercent: 20,
antiReverseUp: 100,
antiReversePowerDownPercent: 10,
antiReverseHardStopThreshold: 20,
protectInterveneEnable: 1,
protectL1DeratePercent: 50,
protectRecoveryStableSeconds: 5,
protectL3LatchEnable: 1,
protectConflictPolicy: 'MAX_LEVEL_WIN'
})
export default {
name: 'DzjkClpzRuntimeParam',
mixins: [getQuerySiteId],
data() {
return {
loading: false,
saveLoading: false,
form: emptyForm(),
rules: {
socDown: [
{ required: true, message: '请输入SOC下限', trigger: 'change' }
],
socUp: [
{ required: true, message: '请输入SOC上限', trigger: 'change' }
],
antiReverseThreshold: [
{ required: true, message: '请输入防逆流阈值', trigger: 'change' }
],
powerSetMultiplier: [
{ required: true, message: '请输入设定功率倍率', trigger: 'change' }
],
antiReverseRangePercent: [
{ required: true, message: '请输入防逆流阈值上浮比例', trigger: 'change' }
],
antiReverseUp: [
{ required: true, message: '请输入防逆流恢复上限', trigger: 'change' }
],
antiReversePowerDownPercent: [
{ required: true, message: '请输入防逆流降功率比例', trigger: 'change' }
],
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' }
]
}
}
},
methods: {
init() {
if (!this.siteId) {
this.form = emptyForm()
return
}
this.loading = true
getStrategyRuntimeConfig(this.siteId).then(response => {
const data = response?.data || {}
this.form = {
...emptyForm(),
...data,
siteId: this.siteId
}
}).finally(() => {
this.loading = false
})
},
handleSave() {
if (!this.siteId) {
this.$message.error('缺少站点ID')
return
}
this.$refs.form.validate(valid => {
if (!valid) return
if (Number(this.form.socDown) > Number(this.form.socUp)) {
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) {
this.$message.success('保存成功')
this.init()
}
}).finally(() => {
this.saveLoading = false
})
})
}
}
}
</script>
<style scoped lang="scss">
.site-tag {
float: right;
color: #909399;
font-size: 13px;
}
.common-card-container {
border: none;
box-shadow: none !important;
}
.runtime-grid {
max-width: 1180px;
display: flex;
flex-wrap: wrap;
}
.runtime-grid > .el-col {
display: flex;
}
.group-card {
border: none;
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>

350
src/views/ems/dzjk/clpz/xftg/AddTemplate.vue
View File

@ -1,6 +1,5 @@
<template>
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog add-template-dialog"
:title="mode === 'add'?'新增模板':`编辑模板` ">
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑模板` ">
<el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-form-item label="模板名称" prop="templateName">
<el-input v-model="formData.templateName" placeholder="请输入" clearable :style="{width: '100%'}">
@ -9,63 +8,49 @@
<el-form-item label="soc限制" prop="sdcLimit" required>
<el-switch :active-value="1" :inactive-value="0" v-model="formData.sdcLimit"></el-switch>
</el-form-item>
<!-- <template v-if="formData.sdcLimit === 1">-->
<el-form-item label="soc下限" prop="sdcDown">
<el-input v-model="formData.sdcDown" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
</el-form-item>
<el-form-item label="soc上限" prop="sdcUp">
<el-input v-model="formData.sdcUp" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
</el-form-item>
<!-- </template>-->
</el-form>
<el-button type="primary" size="mini" @click="addTime">新增</el-button>
<!-- 新增时间段表单-->
<el-collapse-transition>
<el-card v-show="showAddTime" shadow="always" class="common-card-container" style="margin-top:25px;">
<el-form class="add-time-form transition-box" ref="addTimeForm" :model="formInline" :rules="formInlineRule"
label-width="100px" style="margin-top:25px">
<!-- <el-form-item label="开始时间" prop="startTime">-->
<!-- <el-time-select-->
<!-- placeholder="开始时间"-->
<!-- v-model="formInline.startTime"-->
<!-- :picker-options="{-->
<!-- start: '00:00',-->
<!-- step: '00:01',-->
<!-- end: '23:00',-->
<!-- }">-->
<!-- </el-time-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="结束时间" prop="endTime">-->
<!-- <el-time-select-->
<!-- placeholder="结束时间"-->
<!-- v-model="formInline.endTime"-->
<!-- :picker-options="{-->
<!-- start: '00:00',-->
<!-- step: '00:01',-->
<!-- end: '23:00',-->
<!-- minTime: formInline.startTime-->
<!-- }">-->
<!-- </el-time-select>-->
<!-- </el-form-item>-->
<el-form-item label="时间范围" prop="timeRange">
<el-time-picker
is-range
v-model="formInline.timeRange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
format="HH:mm"
value-format="HH:mm"
:style="{width: '100%'}">
</el-time-picker>
<el-form class="add-time-form transition-box" ref="addTimeForm" :model="formInline" :rules="formInlineRule" label-width="100px" style="margin-top:25px">
<el-form-item label="开始时间" prop="startTime">
<el-time-select
placeholder="开始时间"
v-model="formInline.startTime"
:picker-options="{
start: '00:00',
step: '01:00',
end: '23:00',
}">
</el-time-select>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-time-select
placeholder="结束时间"
v-model="formInline.endTime"
:picker-options="{
start: '00:00',
step: '01:00',
end: '23:00',
minTime: formInline.startTime
}">
</el-time-select>
</el-form-item>
<el-form-item label="冲放功率" prop="chargeDischargePower">
<el-input v-model="formInline.chargeDischargePower" placeholder="请输入"
:style="{width: '100%'}"></el-input>
</el-form-item>
<el-form-item label="soc下限" prop="sdcDown">
<el-input v-model="formInline.sdcDown" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
</el-form-item>
<el-form-item label="soc上限" prop="sdcUp">
<el-input v-model="formInline.sdcUp" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
<el-input v-model="formInline.chargeDischargePower" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="充电状态" prop="chargeStatus">
<el-select v-model="formInline.chargeStatus" placeholder="请选择" :style="{width: '100%'}">
<el-option v-for="(value,key) in chargeStatusOptions" :key="key+'chargeStatusOptions'" :label="value"
:value="key"></el-option>
<el-select v-model="formInline.chargeStatus" placeholder="请选择">
<el-option v-for="(value,key) in chargeStatusOptions" :key="key+'chargeStatusOptions'" :label="value" :value="key"></el-option>
</el-select>
</el-form-item>
<el-form-item>
@ -79,103 +64,24 @@
:data="tableData"
border
style="width: 100%;margin-top:25px">
<!-- todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
<el-table-column
prop="startTime"
label="开始时间">
<template slot-scope="scope">
<el-time-select
v-if="mode === 'edit'"
v-model="scope.row.startTime"
placeholder="开始时间"
:picker-options="{
start: '00:00',
step: '00:01',
end: '23:59'
}"
:style="{width: '100%'}"
/>
<span v-else>{{ scope.row.startTime || '-' }}</span>
</template>
</el-table-column>
<el-table-column
prop="endTime"
label="结束时间">
<template slot-scope="scope">
<el-time-select
v-if="mode === 'edit'"
v-model="scope.row.endTime"
placeholder="结束时间"
:picker-options="{
start: '00:00',
step: '00:01',
end: '23:59',
minTime: scope.row.startTime
}"
:style="{width: '100%'}"
/>
<span v-else>{{ scope.row.endTime || '-' }}</span>
</template>
</el-table-column>
<el-table-column
prop="chargeDischargePower"
label="充放功率（kW）">
<template slot-scope="scope">
<el-input
v-if="mode === 'edit'"
v-model.trim="scope.row.chargeDischargePower"
placeholder="请输入"
clearable
:style="{width: '100%'}"
/>
<span v-else>{{ scope.row.chargeDischargePower || '-' }}</span>
</template>
</el-table-column>
<el-table-column
prop="sdcDown"
label="SOC下限">
<template slot-scope="scope">
<el-input
v-if="mode === 'edit'"
v-model.trim="scope.row.sdcDown"
placeholder="请输入"
clearable
:style="{width: '100%'}"
/>
<span v-else>{{ scope.row.sdcDown === null || scope.row.sdcDown === undefined || scope.row.sdcDown === '' ? '-' : scope.row.sdcDown + '%' }}</span>
</template>
</el-table-column>
<el-table-column
prop="sdcUp"
label="SOC上限">
<template slot-scope="scope">
<el-input
v-if="mode === 'edit'"
v-model.trim="scope.row.sdcUp"
placeholder="请输入"
clearable
:style="{width: '100%'}"
/>
<span v-else>{{ scope.row.sdcUp === null || scope.row.sdcUp === undefined || scope.row.sdcUp === '' ? '-' : scope.row.sdcUp + '%' }}</span>
</template>
</el-table-column>
<el-table-column
prop="chargeStatus"
label="充电状态">
<template slot-scope="scope">
<el-select
v-if="mode === 'edit'"
v-model="scope.row.chargeStatus"
placeholder="请选择"
:style="{width: '100%'}"
>
<el-option
v-for="(value,key) in chargeStatusOptions"
:key="key+'chargeStatusEditOptions'"
:label="value"
:value="key"
/>
</el-select>
<span v-else>{{ chargeStatusOptions[scope.row.chargeStatus] }}</span>
{{chargeStatusOptions[scope.row.chargeStatus]}}
</template>
</el-table-column>
<el-table-column
@ -201,21 +107,18 @@
<script>
import {mapState} from 'vuex'
import {addStrategyTemp,editStrategyTemp,getStrategyTempDetail} from '@/api/ems/dzjk'
export default {
inject:['$home'],
data() {
const now = new Date()
const year = now.getFullYear(), month = now.getMonth(), day = now.getDate()
const range = [new Date(year, month, day, 0), new Date(year, month, day, 23)]
return {
mode:'',
editTempId:'',
dialogTableVisible:false,
secondRange: range,
formData: {
templateName: '',
sdcLimit: false,
sdcDown: '',
sdcUp: '',
},
rules: {
templateName: [{
@ -223,19 +126,28 @@ export default {
message: '请输入',
trigger: 'blur'
}],
sdcDown: [
{required: true,message: '请输入', trigger: 'blur'},
{ pattern: /^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入合法数字或小数' }
],
sdcUp: [
{required: true,message: '请输入', trigger: 'blur'},
{ pattern: /^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入合法数字或小数' }
],
},
showAddTime: false,
formInline:{
timeRange: range,
chargeDischargePower: '',
sdcDown: '',
sdcUp: '',
chargeStatus: ''
startTime:'',endTime:'',chargeDischargePower:'',chargeStatus:''
},
formInlineRule:{
timeRange: [{
startTime: [{
required: true,
message: '请选择时间范围',
message: '请选择开始时间',
trigger: 'change'
}],
endTime: [{
required: true,
message: '请选择结束时间',
trigger: 'change'
}],
chargeDischargePower: [{
@ -243,14 +155,6 @@ export default {
message: '请输入冲放功率',
trigger: 'blur'
},
{pattern: /^-?\d*\.?\d*$/, message: '请输入合法数字或小数'}
],
sdcDown: [
{required: true, message: '请输入', trigger: 'blur'},
{pattern: /^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入合法数字或小数'}
],
sdcUp: [
{required: true, message: '请输入', trigger: 'blur'},
{ pattern: /^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入合法数字或小数' }
],
chargeStatus:[{
@ -268,6 +172,20 @@ export default {
chargeStatusOptions: state => state?.ems?.chargeStatusOptions || {},
})
},
watch: {
"formInline.startTime":{
handler(newVal){
if(newVal && this.formInline.endTime){
const endTime = parseInt((this.formInline.endTime).split(':')[0] || 0)
const startTime =parseInt(newVal.split(':')[0])
if(endTime<=startTime){
this.formInline.endTime = `${startTime+1 <=9 ? '0'+(startTime+1) : startTime+1}:00`
}
}
},
deep:true
},
},
methods: {
changeSiteId(){
this.dialogTableVisible=false
@ -276,10 +194,12 @@ export default {
this.formData={
templateName: '',
sdcLimit: false,
sdcDown: '',
sdcUp: '',
}
this.formInline={
timeRange: this.secondRange, chargeDischargePower: '', sdcDown: '', sdcUp: '', chargeStatus: ''
}//startTime: '', endTime: '',
startTime:'',endTime:'',chargeDischargePower:'',chargeStatus:''
}
this.showAddTime = false
this.tableData=[]
},
@ -292,12 +212,14 @@ export default {
getStrategyTempDetail(this.editTempId).then(response => {
const data=JSON.parse(JSON.stringify(response?.data || []));
if(data.length>0){
const {templateName, sdcLimit} = JSON.parse(JSON.stringify(data[0]));
const {templateName,sdcLimit,sdcDown,sdcUp} =JSON.parse(JSON.stringify( data[0]));
this.formData.templateName=templateName
this.formData.sdcLimit=sdcLimit
this.formData.sdcDown=sdcDown
this.formData.sdcUp=sdcUp
}
if(data.length === 1){
const {startTime, endTime} = data[0];
const {startTime,endTime}=data;
if(!startTime || !endTime){
this.tableData = []
}else{
@ -316,18 +238,14 @@ export default {
cancelAddTime(){
this.$refs.addTimeForm.resetFields()
this.showAddTime=false
this.formInline = {timeRange: this.secondRange, chargeDischargePower: '', sdcDown: '', sdcUp: '', chargeStatus: ''}//startTime: '', endTime: '',
this.formInline = {startTime:'',endTime:'',chargeDischargePower:'',chargeStatus:''}
},
saveTime(){
//表单校验，校验成功，添加到tableData里
this.$refs.addTimeForm.validate(valid => {
if (!valid) return
const {timeRange: [startTime, endTime], chargeDischargePower, sdcDown, sdcUp, chargeStatus} = this.formInline
this.tableData.push({startTime, endTime, chargeDischargePower, sdcDown, sdcUp, chargeStatus})
this.$nextTick(() => {
this.cancelAddTime()
})
this.tableData.push(JSON.parse(JSON.stringify(this.formInline)));
this.$nextTick(() => {this.cancelAddTime()})
})
},
deleteRow(index){
@ -336,23 +254,33 @@ export default {
saveDialog() {
this.$refs.addTempForm.validate(valid => {
if (!valid) return
const {templateName, sdcLimit} = this.formData
//校验时间选择范围是否冲突
let status = true
this.tableData.forEach((outer,outerIndex)=>{
const {startTime, endTime}=outer
const outerStart = parseInt(startTime),outerEnd = parseInt(endTime)
if(outerStart>outerEnd){
status = false
}else{
this.tableData.forEach((inner,innerIndex)=>{
if(innerIndex !== outerIndex){
const {startTime:innerStartTime, endTime:innerEndTime}=inner
const innerStart = parseInt(innerStartTime),innerEnd = parseInt(innerEndTime)
if((innerStart<outerStart && innerEnd>outerEnd) || !((innerStart<outerStart && innerEnd<=outerStart) || (innerStart>=outerEnd && innerEnd>outerEnd))){
status=false
}
}
})
}
})
if(!status){
return this.$message.error('时间选择范围冲突');
}
const {templateName,sdcLimit,sdcDown,sdcUp} = this.formData
const {siteId,updateStrategyId} =this.$home
const tableData = this.tableData.map(item => ({
...item,
sdcDown: this.normalizeSocValue(item.sdcDown),
sdcUp: this.normalizeSocValue(item.sdcUp)
}))
if (!this.validateTableData(tableData)) return
const {tableData} = this
if(this.mode==='edit'){
editStrategyTemp({
siteId,
strategyId: updateStrategyId,
templateId: this.editTempId,
templateName,
sdcLimit,
timeConfigList: tableData
}).then(response => {
editStrategyTemp({siteId,strategyId:updateStrategyId,templateId:this.editTempId,templateName,sdcLimit,sdcDown,sdcUp,timeConfigList:tableData}).then(response=>{
if(response?.code === 200){
this.closeDialog()
this.$emit('update')
@ -360,13 +288,7 @@ export default {
}
})
}else{
addStrategyTemp({
siteId,
strategyId: updateStrategyId,
templateName,
sdcLimit,
timeConfigList: tableData
}).then(response => {
addStrategyTemp({siteId,strategyId:updateStrategyId,templateName,sdcLimit,sdcDown,sdcUp,timeConfigList:tableData}).then(response=>{
if(response?.code === 200){
this.closeDialog()
this.$emit('update')
@ -375,64 +297,14 @@ export default {
}
})
},
normalizeSocValue(value) {
if (value === null || value === undefined) return null
const normalized = String(value).replace('%', '').trim()
return normalized === '' ? null : normalized
},
toMinutes(timeValue) {
if (!timeValue || String(timeValue).indexOf(':') < 0) return -1
const [h, m] = String(timeValue).split(':')
const hour = Number(h), minute = Number(m)
if (!Number.isInteger(hour) || !Number.isInteger(minute)) return -1
if (hour < 0 || hour > 23 || minute < 0 || minute > 59) return -1
return hour * 60 + minute
},
validateTableData(list = []) {
const numberPattern = /^-?\d+(\.\d+)?$/
const socPattern = /^(0|[1-9]\d*)(\.\d+)?$/
for (let i = 0; i < list.length; i++) {
const row = list[i]
const rowNo = i + 1
if (!row.startTime || !row.endTime) {
this.$message.error(`第${rowNo}行：开始时间和结束时间不能为空`)
return false
}
const startMinute = this.toMinutes(row.startTime)
const endMinute = this.toMinutes(row.endTime)
if (startMinute < 0 || endMinute < 0 || startMinute >= endMinute) {
this.$message.error(`第${rowNo}行：时间范围不合法`)
return false
}
if (!numberPattern.test(String(row.chargeDischargePower ?? '').trim())) {
this.$message.error(`第${rowNo}行：充放功率格式不正确`)
return false
}
if (!socPattern.test(String(row.sdcDown ?? '').trim())) {
this.$message.error(`第${rowNo}行：SOC下限格式不正确`)
return false
}
if (!socPattern.test(String(row.sdcUp ?? '').trim())) {
this.$message.error(`第${rowNo}行：SOC上限格式不正确`)
return false
}
if (Number(row.sdcDown) > Number(row.sdcUp)) {
this.$message.error(`第${rowNo}行：SOC下限不能大于SOC上限`)
return false
}
if (row.chargeStatus === undefined || row.chargeStatus === null || row.chargeStatus === '') {
this.$message.error(`第${rowNo}行：请选择充电状态`)
return false
}
}
return true
},
closeDialog(){
// 清空所有数据
this.$refs.addTempForm.resetFields()
this.formData={
templateName: '',
sdcLimit:0,
sdcDown: '',
sdcUp: '',
}
this.tableData=[]
this.cancelAddTime()
@ -442,9 +314,3 @@ export default {
}
</script>
<style lang="scss" scoped>
.add-template-dialog {
max-height: 90vh;
overflow-y: auto;
}
</style>

6
src/views/ems/dzjk/clpz/xftg/TempTable.vue
View File

@ -39,14 +39,14 @@
prop="sdcDown"
label="SOC下限">
<template slot-scope="scope">
{{scope.row.sdcDown === null || scope.row.sdcDown === undefined || scope.row.sdcDown === '' ? '-' : scope.row.sdcDown + '%'}}
{{scope.row.sdcDown ? scope.row. sdcDown + '%' : '-'}}
</template>
</el-table-column>
<el-table-column
prop="sdcUp"
label="SOC上限">
<template slot-scope="scope">
{{scope.row.sdcUp === null || scope.row.sdcUp === undefined || scope.row.sdcUp === '' ? '-' : scope.row.sdcUp + '%'}}
{{scope.row.sdcUp ? scope.row.sdcUp + '%' : '-'}}
</template>
</el-table-column>
<el-table-column
@ -92,7 +92,7 @@ export default {
activeBtn:'',
tempList:[],
tableData:[],
mixinPrototype:['templateName','sdcLimit']
mixinPrototype:['templateName','sdcLimit','sdcDown','sdcUp']
}
},
computed:{

2
src/views/ems/dzjk/clpz/xftg/index.vue
View File

@ -2,7 +2,7 @@
<template>
<!-- <cl-container :hideSettingBtn="true">-->
<!-- <template v-slot:default>-->
<div>
<div class="ems-dashboard-editor-container ems-content-container-padding">
<temp-table ref="tempTable" @updateTimeSetting="updateTimeSetting"/>
<time-setting ref="timeSetting"/>
<temp-power-chart ref="tomePowerChart"/>

89
src/views/ems/dzjk/gzgj/index.vue
View File

@ -1,19 +1,16 @@
<template>
<el-card v-loading="loading" gshadow="always" class="common-card-container common-card-container-no-title-bg">
<div v-loading="loading" class="ems-dashboard-editor-container ems-content-container-padding">
<!-- 搜索栏-->
<el-form :inline="true" class="select-container">
<el-form-item label="设备清单">
<el-select v-model="search.deviceId" clearable placeholder="请选择" :loading="loading"
loading-text="正在加载数据">
<el-option :label="item.deviceName" :value="item.deviceId" v-for="(item,key) in deviceOptions"
:key="key+'deviceIdOptions'"></el-option>
<el-select v-model="search.deviceId" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
<el-option :label="item.deviceName" :value="item.deviceId" v-for="(item,key) in deviceOptions" :key="key+'deviceIdOptions'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="告警等级">
<el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading"
loading-text="正在加载数据" style="width: 130px">
<el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions"
:key="key+'alarmLevelOptions'"></el-option>
<el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
<el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions" :key="key+'alarmLevelOptions'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间选择">
@ -39,9 +36,7 @@
<el-row style="">
<el-col :xs="24" :sm="24" :lg="24">
<el-button-group class="ems-btns-group">
<el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'"
:class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{ item.name }}
</el-button>
<el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
</el-button-group>
</el-col>
</el-row>
@ -85,30 +80,17 @@
<el-table-column
label="状态">
<template slot-scope="scope">
<span
:class="['0','2'].includes(scope.row.status) ? 'warning-status' : ''">{{
$store.state.ems.alarmStatusOptions[scope.row.status]
}}</span>
<span :class="['0','2'].includes(scope.row.status) ? 'warning-status' : ''">{{$store.state.ems.alarmStatusOptions[scope.row.status]}}</span>
</template>
</el-table-column>
<el-table-column
label="工单"
fixed="right"
width="320"
width="250"
>
<template slot-scope="scope">
<el-button type="text" size="mini" v-if="scope.row.ticketNo" @click="toTicket">
已生成工单(工单号:{{ scope.row.ticketNo }})
</el-button>
<el-button type="primary" size="mini" v-else @click="createTicket(scope.row.id)">生成工单</el-button>
<el-button
v-if="scope.row.status !== '1'"
type="success"
size="mini"
style="margin-left: 8px;"
@click="closeAlarmRecord(scope.row.id)">
确认关闭
</el-button>
<el-button type="text" size="mini" v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
<el-button type="primary" size="mini" v-else @click="toTicket">生成工单</el-button>
</template>
</el-table-column>
</el-table>
@ -126,16 +108,15 @@
>
</el-pagination>
</div>
</el-card>
</div>
</template>
<script>
import {closeAlarm, createTicketNo, getAlarmDetailList} from '@/api/ems/dzjk'
import {getAlarmDetailList} from'@/api/ems/dzjk'
import {getDeviceList} from'@/api/ems/site'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { formatDate } from '@/filters/ems'
export default {
name:'DzjkGzgj',
mixins:[getQuerySiteId],
@ -168,32 +149,6 @@ export default {
toTicket(){
this.$router.push({path:'/ticket'})
},
//生成工单
createTicket(id) {
this.loading = true
createTicketNo({id}).then(response => {
response?.data && this.toTicket()
}).finally(() => {
this.loading = false
})
},
//确认关闭告警
closeAlarmRecord(id) {
this.$confirm('确认关闭该故障告警吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading = true
closeAlarm({id}).then(() => {
this.$message.success('关闭成功')
this.getData()
}).finally(() => {
this.loading = false
})
}).catch(() => {
})
},
// 判断是否是同一天
isSameDay(day1, day2) {
const date1 = new Date(day1),date2 = new Date(day2)
@ -217,6 +172,7 @@ export default {
// 搜索
onSearch(){
this.pageNum =1//每次搜索从1开始搜索
const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
this.getData()
},
// 重置
@ -236,27 +192,15 @@ export default {
},
// 获取数据
getData(){
this.$store.dispatch('getSiteAlarmNum', this.siteId)
this.loading=true
const {deviceId,alarmLevel} = this.search
const {siteId,pageNum,pageSize,activeBtn} =this
const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
let status = activeBtn === 'today' ? '0' : '1,2'
getAlarmDetailList({
status,
deviceId,
alarmLevel,
siteId,
pageSize,
pageNum,
alarmStartTime: formatDate(alarmStartTime),
alarmEndTime: formatDate(alarmEndTime)
}).then(response => {
getAlarmDetailList({status,deviceId,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(alarmStartTime),alarmEndTime:formatDate(alarmEndTime)}).then(response => {
this.tableData=response?.rows || [];
this.totalSize = response?.total || 0
}).finally(() => {
this.loading = false
})
}).finally(() => {this.loading=false})
},
getDeviceOptions(){
getDeviceList(this.siteId).then(response => {
@ -275,3 +219,4 @@ export default {
}
}
</script>

103
src/views/ems/dzjk/home/ActiveChart.vue
View File

@ -1,8 +1,9 @@
<template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
<div slot="header" class="time-range-header">
<span class="card-title">当日功率曲线</span>
<date-range-select ref="dateRangeSelect" :showIcon="true" :mini-time-picker="true" @updateDate="updateDate"/>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div>
<div style="height: 310px" id="activeChart"></div>
</el-card>
@ -12,18 +13,11 @@
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
import {getPointConfigCurve} from '@/api/ems/site'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import { getPointData } from '@/api/ems/dzjk'
export default {
mixins: [resize, intervalUpdate],
mixins: [resize],
components: {DateRangeSelect},
props: {
displayData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
@ -32,13 +26,6 @@ export default {
isInit:true
}
},
watch: {
displayData() {
if (this.siteId && this.timeRange.length === 2) {
this.getGVQXData()
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
@ -59,34 +46,11 @@ export default {
this.isInit = false
},
getGVQXData(){
this.showLoading()
const {siteId,timeRange}=this
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))
})
getPointData({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>this.hideLoading())
},
init(siteId){
//初始化 清空数据
@ -95,23 +59,22 @@ export default {
this.timeRange=[]
this.$refs.dateRangeSelect.init(true)
this.getGVQXData()
this.updateInterval(this.getGVQXData)
},
initChart() {
this.chart = echarts.init(document.querySelector('#activeChart'))
},
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'}`
showLoading(){
this.chart && this.chart.showLoading()
},
parseToTimestamp(value) {
if (!value) return null
const t = new Date(value).getTime()
return Number.isNaN(t) ? null : t
hideLoading(){
this.chart && this.chart.hideLoading()
},
setOption(seriesData = []) {
setOption(data) {
const source = [['日期','电网功率','负载功率','储能功率','光伏功率','soc平均值','soh平均值','电池平均温度平均值']]
console.log('source.slice(1)',source[0].slice(1))
this.chart && data.forEach((item)=>{
source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower,item.avgSoc,item.avgSoh,item.avgTemp])
})
this.chart.setOption({
grid: {
containLabel: true
@ -122,28 +85,29 @@ export default {
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
textStyle:{
color:"#333333",
},
xAxis: {
type: 'time',
type: 'category',
},
yAxis: [{
yAxis: [
{
type: 'value',
}],
series: seriesData.map((item) => {
return {
name: item.name,
type: 'line',
showSymbol: false,
symbolSize: 2,
smooth: true,
areaStyle: {
opacity: 0.5,
},
data: item.data
{
type: 'value',
},
],
dataset:{source},
series: source[0].slice(1).map((item,index)=>{
return {
type: 'line',
yAxisIndex:index<=4 ? 0 : 1
}
})
})
@ -153,3 +117,4 @@ export default {
}
</script>

95
src/views/ems/dzjk/home/WeekChart.vue
View File

@ -1,8 +1,9 @@
<template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
<div slot="header" class="time-range-header">
<span class="card-title">一周充放曲线</span>
<date-range-select ref="dateRangeSelect" :showIcon="true" :mini-time-picker="true" @updateDate="updateDate"/>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div>
<div style="height: 310px" id="weekChart"></div>
</el-card>
@ -12,29 +13,15 @@
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
import {getPointConfigCurve} from '@/api/ems/site'
import {getSevenChargeData} from '@/api/ems/dzjk'
export default {
mixins: [resize],
components: {DateRangeSelect},
props: {
displayData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
timeRange:[],
siteId: ''
}
},
watch: {
displayData() {
if (this.siteId && this.timeRange.length === 2) {
this.getWeekKData()
}
siteId:'',
}
},
mounted() {
@ -56,34 +43,12 @@ export default {
this.getWeekKData()
},
getWeekKData(){
this.showLoading()
const {siteId,timeRange}=this
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))
})
this.hideLoading()
getSevenChargeData({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>this.hideLoading())
},
init(siteId){
//初始化 清空数据
@ -95,23 +60,24 @@ export default {
initChart() {
this.chart = echarts.init(document.querySelector('#weekChart'))
},
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'}`
showLoading(){
this.chart && this.chart.showLoading()
},
parseToTimestamp(value) {
if (!value) return null
const t = new Date(value).getTime()
return Number.isNaN(t) ? null : t
hideLoading(){
this.chart && this.chart.hideLoading()
},
setOption(seriesData = []) {
setOption(data,unit) {
const source = [['日期','充电量','放电量']]
data.forEach(item=>{
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
})
this.chart && this.chart.setOption({
color:['#4472c4','#70ad47'],//所有充放电颜色保持统一
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
containLabel: true
@ -121,7 +87,9 @@ export default {
bottom: '15',
},
xAxis: {
type: 'time'
type: 'category',
name:unit,
nameLocation:'center'
},
yAxis: [{
type: 'value',
@ -133,12 +101,19 @@ export default {
onZero:false
}
}],
series: seriesData.map(item => ({
name: item.name,
dataset:{
source
},
series: [
{
yAxisIndex:0,
type: 'bar',
data: item.data
}))
},
{
yAxisIndex:0,
type: 'bar',
},
]
})
}
}

648
src/views/ems/dzjk/home/index.vue
View File

@ -1,643 +1,167 @@
<template>
<div>
<div
class="ems-dashboard-editor-container ems-content-container-padding"
v-loading="loading"
>
<el-row style="background: #fff" class="row-container" :gutter="15">
<el-col :xs="24" :sm="24" :lg="5">
<!-- 站点信息-->
<el-col v-if="tableData.length > 0" :xs="24" :sm="24" :lg="24">
<alarm-table :tableData="tableData" />
</el-col>
<el-col :xs="24" :sm="24" :lg="6">
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header">
<span class="card-title">站点信息</span>
<div class="alarm-msg" v-if="tableData.length > 0" @click="toAlarm">
<i class="el-icon-message-solid"></i> 设备告警
</div>
</div>
<div
style="box-sizing: border-box; height: 218px; padding: 20px 15px"
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
>
<!-- 地址、运行时间-->
<div class="site-info site-info-address">
<div class="title">
<i class="el-icon-location"></i>
</div>
<div class="value">
<i v-if="isBaseInfoLoading" class="el-icon-loading"></i>
<span v-else>{{ info.siteAddress || '-' }}</span>
</div>
</div>
<div class="site-info">
<div class="title">
<i class="el-icon-date"></i>
</div>
<div class="value">
<i v-if="isBaseInfoLoading" class="el-icon-loading"></i>
<span v-else>{{ info.runningTime || '-' }}</span>
</div>
</div>
<!-- 装机功率、容量 -->
<el-row :gutter="10" style="margin-top:20px;">
<el-col
:span="12"
class="sjgl-col power-col"
<el-descriptions class="home-normal-info" :column="1">
<el-descriptions-item
size="mini"
v-for="(item, index) in singleZdInfo"
:key="index + 'singleZdInfo'"
:label="item.title"
>{{ info[item.attr] | formatNumber }}</el-descriptions-item
>
<div class="sjgl-wrapper">
<div class="sjgl-title">装机功率(MWh)</div>
<div class="sjgl-value">
<i v-if="isBaseInfoLoading" class="el-icon-loading"></i>
<span v-else>{{ info.installPower | formatNumber }}</span>
</div>
</div>
</el-col>
<el-col
:span="12"
class="sjgl-col power-col"
>
<div class="sjgl-wrapper">
<div class="sjgl-title">装机容量(MWh)</div>
<div class="sjgl-value">
<i v-if="isBaseInfoLoading" class="el-icon-loading"></i>
<span v-else>{{ info.installCapacity | formatNumber }}</span>
</div>
</div>
</el-col>
</el-row>
</el-descriptions>
</div>
</el-card>
</el-col>
<!-- 总累计运行数据-->
<el-col :xs="24" :sm="24" :lg="19">
<el-col :xs="24" :sm="24" :lg="8">
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header">
<span class="card-title">总累计运行数据</span>
<div class="total-count">
<span class="title pointer-field" @click="handleTotalRevenueClick">总收入</span>
<span
class="value pointer-field"
:class="{ 'field-disabled': !hasPointId(totalRevenueDisplayItem) }"
@click="handleTotalRevenueClick"
>
<i v-if="isRunningInfoLoading" class="el-icon-loading"></i>
<span v-else>{{ totalRevenueDisplayValue | formatNumber }}</span>
</span>
<span class="unit">元</span>
</div>
</div>
<div
style="box-sizing: border-box; height: 218px; padding: 20px 15px"
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
>
<el-row :gutter="10">
<el-row :gutter="20">
<el-col
:span="6"
v-for="(item, index) in runningDataCards"
:span="12"
v-for="(item, index) in sjglData"
:key="index + 'sjglData'"
class="sjgl-col"
>
<div
class="sjgl-wrapper pointer-field"
:class="{ 'field-disabled': !hasPointId(item.raw) }"
@click="handleRunningFieldClick(item)"
class="sjgl-data"
>
<div class="sjgl-title">{{ item.title }}</div>
<div class="sjgl-value" :style="{color:item.color}">
<i v-if="item.loading" class="el-icon-loading"></i>
<span v-else>{{ item.value | formatNumber }}</span>
</div>
<div class="sjgl-value">
{{ runningInfo[item.attr] | formatNumber }}
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :lg="12">
<week-chart ref="weekChart" :display-data="runningDisplayData"/>
<el-col :xs="24" :sm="24" :lg="10">
<cl-info :info="runningInfo.strategyTempInfo" />
</el-col>
<el-col :xs="24" :sm="24" :lg="12">
<active-chart ref="activeChart" :display-data="runningDisplayData"/>
<el-col :xs="24" :sm="24" :lg="24">
<week-chart ref="weekChart" />
</el-col>
<el-col :xs="24" :sm="24" :lg="24">
<active-chart ref="activeChart" />
</el-col>
</el-row>
<el-dialog
:visible.sync="curveDialogVisible"
:title="curveDialogTitle"
width="1000px"
append-to-body
class="ems-dialog"
:close-on-click-modal="false"
destroy-on-close
@opened="handleCurveDialogOpened"
@closed="handleCurveDialogClosed"
>
<div class="curve-tools">
<el-date-picker
v-model="curveCustomRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 440px"
/>
<el-button type="primary" size="mini" :loading="curveLoading" @click="loadCurveData">查询</el-button>
</div>
<div v-loading="curveLoading" ref="curveChartRef" style="height: 380px;"></div>
</el-dialog>
</div>
</template>
<script>
import * as echarts from "echarts";
import { getSingleSiteBaseInfo } from "@/api/ems/zddt";
import {getDzjkHomeTotalView, getProjectDisplayData} from "@/api/ems/dzjk";
import {getPointConfigCurve} from "@/api/ems/site";
import { getDzjkHomeView } from "@/api/ems/dzjk";
import WeekChart from "./WeekChart.vue";
import ActiveChart from "./ActiveChart.vue";
import AlarmTable from "./AlarmTable.vue";
import ClInfo from "./ClInfo.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name: "DzjkSbjkHome",
components: { WeekChart, ActiveChart, AlarmTable, ClInfo },
mixins: [getQuerySiteId, intervalUpdate],
mixins: [getQuerySiteId],
data() {
return {
loading: false,
baseInfoLoading: false,
runningInfoLoading: false,
runningUpdateSpinning: false,
runningUpdateTimer: null,
curveDialogVisible: false,
curveDialogTitle: "点位曲线",
curveChart: null,
curveLoading: false,
curveCustomRange: [],
curveQuery: {
siteId: "",
pointId: "",
pointType: "data",
rangeType: "custom",
startTime: "",
endTime: "",
singleZdInfo: [
{
title: "电站位置",
attr: "siteAddress",
},
fallbackSjglData: [
{
title: "投运时间",
attr: "runningTime",
},
{
title: "装机功率(MW)",
attr: "installPower",
},
{
title: "装机容量(MW)",
attr: "installCapacity",
},
],
sjglData: [
{
title: "今日充电量（kWh）",
attr: "dayChargedCap",
color: '#4472c4'
},
{
title: "今日放电量（kWh）",
attr: "dayDisChargedCap",
color: '#70ad47'
},
{
title: "总充电量（kWh）",
title: "总充电量（MWh）",
attr: "totalChargedCap",
color: '#4472c4'
},
{
title: "今日实时收入（元）",
attr: "dayRevenue",
color: '#f67438'
},
{
title: "昨日充电量（kWh）",
attr: "yesterdayChargedCap",
color: '#4472c4'
},
{
title: "昨日放电量（kWh）",
attr: "yesterdayDisChargedCap",
color: '#70ad47'
},
{
title: "总放电量（kWh）",
title: "总放电量（MWh）",
attr: "totalDischargedCap",
color: '#70ad47'
},
{
title: "昨日实时收入（元）",
attr: "yesterdayRevenue",
color: '#f67438'
},
],
info: {}, //基本信息
runningInfo: {}, //总累计运行数据+报警表格
runningDisplayData: [], //单站监控项目配置展示数据
};
},
computed: {
isBaseInfoLoading() {
return false;
},
isRunningInfoLoading() {
const state = this.$data || {};
return !!(state.runningInfoLoading || state.runningUpdateSpinning || state.loading);
},
tableData() {
console.log(
"this.runningInfo?.siteMonitorHomeAlarmVo ",
this.runningInfo?.siteMonitorHomeAlarmVo
);
return this.runningInfo?.siteMonitorHomeAlarmVo || [];
},
totalRunningSectionData() {
return (this.runningDisplayData || []).filter(item => item.sectionName === "总累计运行数据");
},
totalRevenueDisplayItem() {
const sectionData = this.totalRunningSectionData || [];
const byFieldCode = sectionData.find(item => item.fieldCode === "totalRevenue");
if (byFieldCode) {
return byFieldCode;
}
return sectionData.find(item => item.fieldName === "总收入");
},
totalRevenueDisplayValue() {
return this.totalRevenueDisplayItem ? this.totalRevenueDisplayItem.fieldValue : this.runningInfo.totalRevenue;
},
runningDataCards() {
const sectionData = this.totalRunningSectionData || [];
if (sectionData.length > 0) {
const revenueFieldCode = this.totalRevenueDisplayItem ? this.totalRevenueDisplayItem.fieldCode : "";
return sectionData
.filter(item => item.fieldCode !== revenueFieldCode)
.map((item, index) => ({
title: item.fieldName,
value: item.fieldValue,
color: this.getCardColor(index),
loading: this.isRunningInfoLoading,
raw: item,
}));
}
return this.fallbackSjglData.map(item => ({
title: item.title,
value: this.runningInfo[item.attr],
color: item.color,
loading: this.isRunningInfoLoading,
raw: item,
}));
},
},
beforeDestroy() {
if (this.runningUpdateTimer) {
clearTimeout(this.runningUpdateTimer);
this.runningUpdateTimer = null;
}
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
},
methods: {
hasPointId(item) {
return !!String(item?.dataPoint || "").trim();
},
handleTotalRevenueClick() {
const item = this.totalRevenueDisplayItem;
const pointId = String(item?.dataPoint || "").trim();
if (!pointId) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
this.openCurveDialog({
pointId,
title: item?.fieldName || "总收入",
});
},
handleRunningFieldClick(card) {
const item = card?.raw || {};
const pointId = String(item?.dataPoint || "").trim();
if (!pointId) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
this.openCurveDialog({
pointId,
title: card?.title || item?.fieldName || item?.fieldCode || pointId,
});
},
openCurveDialog({pointId, title}) {
const range = this.getDefaultCurveRange();
this.curveCustomRange = range;
this.curveDialogTitle = `点位曲线 - ${title || pointId}`;
this.curveQuery = {
siteId: this.siteId,
pointId,
pointType: "data",
rangeType: "custom",
startTime: range[0],
endTime: range[1],
};
this.curveDialogVisible = true;
},
handleCurveDialogOpened() {
if (!this.curveChart && this.$refs.curveChartRef) {
this.curveChart = echarts.init(this.$refs.curveChartRef);
}
this.loadCurveData();
},
handleCurveDialogClosed() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
this.curveLoading = false;
},
getDefaultCurveRange() {
const end = new Date();
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000);
return [this.formatDateTime(start), this.formatDateTime(end)];
},
formatDateTime(date) {
const d = new Date(date);
const pad = (num) => String(num).padStart(2, "0");
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
},
formatCurveTime(value) {
if (value === undefined || value === null || value === "") {
return "";
}
const raw = String(value).trim();
const normalized = raw
.replace("T", " ")
.replace(/\.\d+/, "")
.replace(/Z$/, "")
.replace(/([+-]\d{2}:?\d{2})$/, "")
.trim();
const matched = normalized.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
if (matched) {
return `${matched[1]} ${matched[2]}`;
}
return normalized.slice(0, 16);
},
loadCurveData() {
if (!this.curveQuery.siteId || !this.curveQuery.pointId) {
this.$message.warning("点位信息不完整，无法查询曲线");
return;
}
if (!this.curveCustomRange || this.curveCustomRange.length !== 2) {
this.$message.warning("请选择查询时间范围");
return;
}
this.curveQuery.startTime = this.curveCustomRange[0];
this.curveQuery.endTime = this.curveCustomRange[1];
const query = {
siteId: this.curveQuery.siteId,
pointId: this.curveQuery.pointId,
pointType: "data",
rangeType: "custom",
startTime: this.curveQuery.startTime,
endTime: this.curveQuery.endTime,
};
this.curveLoading = true;
getPointConfigCurve(query).then((response) => {
const rows = response?.data || [];
this.renderCurveChart(rows);
}).catch(() => {
this.renderCurveChart([]);
}).finally(() => {
this.curveLoading = false;
});
},
renderCurveChart(rows = []) {
if (!this.curveChart) return;
const xData = rows.map(item => this.formatCurveTime(item.dataTime));
const yData = rows.map(item => item.pointValue);
this.curveChart.clear();
this.curveChart.setOption({
legend: {},
grid: {
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
textStyle: {
color: "#333333",
},
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: this.curveDialogTitle,
type: "line",
data: yData,
connectNulls: true,
},
],
});
if (!rows.length) {
this.$message.warning("当前时间范围暂无曲线数据");
}
},
setBaseInfoLoading(loading) {
if (Object.prototype.hasOwnProperty.call(this.$data, "baseInfoLoading")) {
this.baseInfoLoading = loading;
return;
}
this.$set(this.$data, "baseInfoLoading", loading);
},
setRunningInfoLoading(loading) {
if (Object.prototype.hasOwnProperty.call(this.$data, "runningInfoLoading")) {
this.runningInfoLoading = loading;
return;
}
this.$set(this.$data, "runningInfoLoading", loading);
},
getCardColor(index) {
const colors = ['#4472c4', '#70ad47', '#4472c4', '#f67438', '#4472c4', '#70ad47', '#70ad47', '#f67438'];
return colors[index % colors.length];
},
toAlarm() {
this.$router.push({path: "/dzjk/gzgj", query: this.$route.query});
},
getBaseInfo() {
return getSingleSiteBaseInfo(this.siteId).then((response) => {
this.info = response?.data || {};
});
},
getRunningInfo() {
const hasOldData = Object.keys(this.runningInfo || {}).length > 0 || (this.runningDisplayData || []).length > 0;
if (!hasOldData) {
this.setRunningInfoLoading(true);
}
return Promise.all([
getDzjkHomeTotalView(this.siteId),
getProjectDisplayData(this.siteId),
]).then(([homeResponse, displayResponse]) => {
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(() => {
if (!hasOldData) {
this.setRunningInfoLoading(false);
}
return getDzjkHomeView(this.siteId).then((response) => {
this.runningInfo = response?.data || {};
});
},
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.loading = true;
// 功率曲线
this.$refs.activeChart.init(this.siteId);
// 一周冲放曲线
this.$refs.weekChart.init(this.siteId);
// 静态信息 this.getBaseInfo()
// 总累计运行数据+故障告警 this.getRunningInfo()
Promise.all([this.getBaseInfo(), this.getRunningInfo()]);
// 一分钟循环一次总累计运行数据
this.updateInterval(this.getRunningInfo);
Promise.all([this.getBaseInfo(), this.getRunningInfo()]).finally(() => {
this.loading = false;
});
},
},
};
</script>
<style scoped lang="scss">
//设备告警
.alarm-msg {
background: #ff4949;
padding: 2px 5px;
font-size: 10px;
font-weight: bolder;
border-radius: 3px;
line-height: 20px;
cursor: pointer;
color: #fff;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
//基本信息-地址 运行️时间
.site-info {
display: flex;
font-size: 12px;
line-height: 20px;
margin-bottom: 10px;
align-items: center;
&.site-info-address {
height: 40px;
}
.title {
color: #1791ff;
font-size: 18px;
line-height: 20px;
margin-right: 7px;
}
.value {
color: #000;
font-size: 12px;
max-height: 40px;
overflow: hidden;
}
}
//总收入
.total-count {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
font-weight: bolder;
color: #333;
line-height: 14px;
.unit {
font-style: italic;
}
.value {
font-size: 22px;
font-weight: bolder;
color: #ed2f1d;
font-style: italic;
padding: 0 5px;
}
}
.pointer-field {
cursor: pointer;
}
.field-disabled {
cursor: not-allowed;
opacity: 0.75;
}
.curve-tools {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.row-container {
& > .el-col {
margin-bottom: 20px;
@ -645,47 +169,23 @@ export default {
}
//数据概览
.sjgl-col {
.sjgl-wrapper {
text-align: left;
padding: 15px 20px;
background-color: #f2f7fb;
.sjgl-data {
text-align: center;
&:nth-child(1),
&:nth-child(2) {
margin-bottom: 25px;
}
&.power-col {
.sjgl-wrapper {
padding: 10px;
.sjgl-value {
color: #c44444;
}
}
}
&:nth-child(4),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4) {
margin-bottom: 10px;
}
.sjgl-title {
color: #717171;
color: #666666;
line-height: 14px;
font-weight: bold;
}
.sjgl-value {
color: rgba(51, 51, 51, 1);
font-size: 22px;
font-size: 26px;
line-height: 26px;
font-weight: bolder;
font-style: italic;
font-weight: 500;
margin-top: 14px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
}
}
</style>
@ -693,12 +193,10 @@ export default {
<style lang="scss">
.home-normal-info {
font-size: 12px;
.el-descriptions-item__container {
.el-descriptions-item__label {
color: #666666;
}
.el-descriptions-item__content {
color: #333333;
}

43
src/views/ems/dzjk/index.vue
View File

@ -2,6 +2,7 @@
<template>
<div class="ems-dashboard-editor-container">
<zd-select :get-list-by-store="true" :default-site-id="$route.query.siteId" @submitSite="submitSite"/>
<el-menu
class="ems-second-menu"
:default-active="$route.meta.activeSecondMenuName"
@ -10,7 +11,7 @@
active-text-color="#ffffff"
mode="horizontal"
>
<el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'" :class="{'lighting':item.path.indexOf('gzgj')>-1 && dzjkAlarmLighting}">
<el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
<router-link style="height: 100%;width: 100%;display: block;padding:0 20px;" :to="{path:item.path,query:$route.query}">
{{item.meta.title}}
</router-link>
@ -27,18 +28,25 @@
<script>
import { dzjk } from '@/router/ems'
const childrenRoute = dzjk[0].children[0].children//获取到单站监控下面的字路由
import {mapState} from "vuex";
console.log('childrenRoute',childrenRoute)
import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
export default {
components:{ZdSelect},
data(){
return {
childrenRoute,
activeMenu:''
}
},
computed:{
...mapState({
dzjkAlarmLighting:state=>state.ems.dzjkAlarmLighting
})
methods:{
submitSite(id){
if(id != this.$route.query.siteId){
console.log('单站监控选择了其他的站点id=',id,'并更新页面地址参数')
this.$router.push({query:{...this.$route.query,siteId:id}})
}else{
console.log('单站监控选择了相同的其他的站点id=',id,'页面地址不发生改变')
}
}
},
beforeRouteLeave(to,from, next){
//从单站监控下面的所有子页面跳出时会触发
@ -46,30 +54,15 @@ export default {
this.$store.commit('SET_ZD_LIST',[])
next()
},
mounted() {
console.log('单站监控一级页面路由',this.$route)
}
}
</script>
<style scoped lang="scss">
.ems-dashboard-editor-container{
padding-top: 12px;
}
.dzjk-ems-content-container{
margin-top:0;
min-height: 60vh;
}
.lighting{
position: relative;
z-index: 1;
&::after{
content:"";
display: block;
background-color: red;
height: 10px;
width: 10px;
border-radius: 100%;
position: absolute;
right: -2px;
top: -2px;
}
}
</style>

389
src/views/ems/dzjk/sbjk/PointChart.vue
View File

@ -10,24 +10,16 @@
append-to-body
width="1000px"
class="ems-dialog"
:before-close="handleClosed"
>
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding time-range-card"
:before-close="handleColsed"
>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
<div slot="header" class="time-range-header">
<el-radio-group class="card-title" v-model="dataUnit">
<el-radio :label="1">分钟</el-radio>
<el-radio :label="2">小时</el-radio>
<el-radio :label="3">天</el-radio>
</el-radio-group>
<date-time-select
ref="dateTimeSelect"
:data-unit="dataUnit"
@initDate="(e) => (dataRange = e || [])"
@updateDate="updateDate"
/>
<date-time-select ref="dateTimeSelect" :data-unit="dataUnit" @initDate="((e)=>dataRange=e||[])" @updateDate="updateDate"/>
</div>
<div style="height: 350px" id="searchChart"></div>
</el-card>
@ -39,7 +31,6 @@ import resize from "@/mixins/ems/resize";
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
import {getPointValueList} from "@/api/ems/search";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
components: {DateRangeSelect, DateTimeSelect},
mixins: [resize],
@ -47,39 +38,37 @@ export default {
siteId:{
type: String,
required: true,
},
}
},
computed: {
isDtdc(){
return this.deviceCategory === "BATTERY";
return this.categoryName === '单体电池'
},
},
watch:{
show(val) {
if(!val){
this.pointName = "";
this.deviceCategory = "";
this.deviceId = "";
this.dataUnit = 1;
this.child = "";
this.pointName=''
this.categoryName=''
this.deviceId=''
this.dataUnit=1
if (!this.chart) {
return;
return
}
this.hideLoading();
this.chart.dispose();
this.chart = null;
this.hideLoading()
this.chart.dispose()
this.chart = null
}
},
dataUnit:{
handler(newVal,oldVal){
if (!this.show) return;
console.log("wacth到了dataUnit的变化", newVal, oldVal);
console.log('wacth到了dataUnit的变化',newVal,oldVal)
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init();
this.getDate();
});
},
this.$refs.dateTimeSelect.init()
this.getDate()
})
},
}
},
data(){
return{
@ -87,320 +76,131 @@ export default {
chart:null,
dataUnit:1,
dataRange:[],
child: "", //单体电池需要数据
pointName: "",
deviceCategory: "",
deviceId: "",
};
child:[],//单体电池需要数据 暂不删除
pointName:'',
categoryName:'',
deviceId:''
}
},
methods:{
showChart({pointName, deviceCategory, deviceId, child = ""}) {
showChart({pointName,categoryName,deviceId}){
//初始化数据
this.pointName = pointName;
this.deviceCategory = deviceCategory;
this.deviceId = deviceId;
child && (this.child = child);
this.show = true;
this.pointName=pointName
this.categoryName=categoryName
this.deviceId=deviceId
this.show = true
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init();
this.initChart();
this.getDate();
});
this.$refs.dateTimeSelect.init()
this.initChart()
this.getDate()
})
},
initChart() {
this.chart = echarts.init(document.querySelector("#searchChart"));
this.chart = echarts.init(document.querySelector('#searchChart'))
},
showLoading(){
this.chart && this.chart.showLoading();
this.chart && this.chart.showLoading()
},
hideLoading(){
this.chart && this.chart.hideLoading();
this.chart && this.chart.hideLoading()
},
getDate(){
this.showLoading();
const {
siteId,
dataUnit,
dataRange: [start = "", end = ""],
child,
deviceId,
deviceCategory,
pointName,
} = this;
let siteDeviceMap = {};
child && (siteDeviceMap[siteId] = child);
let startDate, endDate;
this.showLoading()
const{dataUnit,dataRange:[start='',end=''],child}=this
let siteDeviceMap={}
child.forEach(([first,second,third])=>{
if(siteDeviceMap[first]){
siteDeviceMap[first].push(third)
}else{
siteDeviceMap[first]=[]
siteDeviceMap[first].push(third)
}
})
let startDate,endDate
if(start && dataUnit===3){
// startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
startDate = start + " 00:00:00";
startDate = start + ' 00:00:00'
}else{
startDate = start;
startDate=start
}
if(end && dataUnit===3){
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
endDate = end + " 00:00:00";
endDate = end + ' 00:00:00'
}else{
endDate = end;
endDate=end
}
getPointValueList({
siteIds: [siteId],
deviceId,
dataUnit,
deviceCategory,
pointName,
startDate,
endDate,
siteDeviceMap,
getPointValueList({siteIds:[this.siteId],deviceId:this.deviceId,dataUnit,categoryName:this.categoryName,pointName:this.pointName,startDate,endDate,siteDeviceMap:{}}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{
this.hideLoading()
})
.then((response) => {
this.setOption(response?.data || []);
})
.finally(() => {
this.hideLoading();
});
},
setOption(data) {
if (!this.chart) return;
this.chart.clear();
console.log("返回的数据", data);
if (!data || data.length <= 0) {
this.$message.warning("暂无数据");
}
console.log('展示的图表类型chartType', data[0].chartType)
if (data[0].chartType === 2) {
// 箱型图
this.setBoxOption(data)
if(!this.chart) return
this.chart.clear()
console.log('返回的数据',data)
let dataset=[]
if(data.length>0){
data.forEach((item,index)=>{
item.deviceList.forEach(inner=>{
dataset.push({
name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${inner.deviceId}`,
type:'line',
xdata:[],
data:[]
})
const length = dataset.length
inner.pointValueList.forEach(value=>{
dataset[length-1].xdata.push(value.valueDate)
dataset[length-1].data.push(value.pointValue)
})
})
})
}else{
//折线图
this.setLineOption(data)
this.$message.warning('暂无数据')
}
},
setLineOption(data) {
let dataset = [];
data.forEach((item, index) => {
item.deviceList.forEach((inner) => {
dataset.push({
name: `${
this.isDtdc
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
: `${inner.deviceId}`
}`,
type: "line",
markPoint: {
symbolSize: 30,
emphasis: {
disabled: false//打开 鼠标高亮
},
data: [//最大值、最小值
{
// type: 'max',
name: `最大值`,
coord: [inner.maxDate, inner.maxValue],
relativeTo: 'coordinate',
label: {
position: "top",
formatter: item.dataType === 2 ? ([
`最大值:${inner.maxValue}`,
// `平均值:${inner.avgValue}`,
`差值:${inner.diffValue}`,
]).join('\n') : ([
`最大值:${inner.maxValue}`,
// `平均值:${inner.avgValue}`,
]).join('\n'),
},
},
{
// type: 'min',
name: `最小值`,
coord: [inner.minDate, inner.minValue],
relativeTo: 'coordinate',
label: {
position: "top",
formatter: item.dataType === 2 ? ([
`最小值:${inner.minValue}`,
// `平均值:${inner.avgValue}`,
`差值:${inner.diffValue}`,
]).join('\n') : ([
`最小值:${inner.minValue}`,
// `平均值:${inner.avgValue}`,
]).join('\n'),
}
}
]
},
xdata: [],
data: [],
});
const length = dataset.length;
inner.pointValueList.forEach((value) => {
dataset[length - 1].xdata.push(value.valueDate);
dataset[length - 1].data.push(value.pointValue);
});
});
});
console.log("折线图图表数据", dataset);
console.log('图表数据',dataset)
this.chart.setOption({
legend: {
// left: 'center',
// top: '10',
},
grid: {
containLabel: true,
containLabel: true
},
tooltip: {
trigger: "axis",
axisPointer: {
type: 'cross',
},
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
// },
},
textStyle: {
color: "#333333",
},
xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: dataset,
});
},
setBoxOption(data) {
let dataset = [];
data.forEach((item, index) => {
item.deviceList.forEach((inner) => {
dataset.push({
name: `${
this.isDtdc
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
: `${inner.deviceId}`
}`,
type: "boxplot",
// markPoint: {
// symbolSize: 30,
// emphasis: {
// disabled: false//打开 鼠标高亮
// },
// data: [//最大值、最小值
// {
// // type: 'max',
// name: `最大值`,
// coord: [inner.maxDate, inner.maxValue],
// relativeTo: 'coordinate',
// label: {
// position: "top",
// formatter: item.dataType === 2 ? ([
// `最大值:${inner.maxValue}`,
// // `平均值:${inner.avgValue}`,
// `差值:${inner.diffValue}`,
// ]).join('\n') : ([
// `最大值:${inner.maxValue}`,
// // `平均值:${inner.avgValue}`,
// ]).join('\n'),
// },
// },
// {
// // type: 'min',
// name: `最小值`,
// coord: [inner.minDate, inner.minValue],
// relativeTo: 'coordinate',
// label: {
// position: "top",
// formatter: item.dataType === 2 ? ([
// `最小值:${inner.minValue}`,
// // `平均值:${inner.avgValue}`,
// `差值:${inner.diffValue}`,
// ]).join('\n') : ([
// `最小值:${inner.minValue}`,
// // `平均值:${inner.avgValue}`,
// ]).join('\n'),
// }
// }
// ]
// },
xdata: [],
data: [],
});
const length = dataset.length;
inner.pointValueList.forEach((value) => {
const {valueDate, min, q1, median, q3, max} = value
// const mid = (max - min) / 2, minLine = min + Math.abs(median / 2),
// maxLine = max - Math.abs(median / 2)
dataset[length - 1].xdata.push(valueDate);
dataset[length - 1].data.push([min, q1, median, q3, max]);
});
});
});
console.log("箱型图图表数据", dataset);
this.chart.setOption({
legend: {
// left: 'center',
// top: '10',
},
grid: {
containLabel: true,
},
tooltip: {
trigger: 'item',
formatter: function (params) {
let data = params.data;
let result = params.marker + params.name + ' ' + params.seriesName + '<br/>';
result += '最小值: ' + data[1] + '<br/>';
result += '平均值: ' + data[3] + '<br/>';
result += '最大值: ' + data[5];
return result;
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
// trigger: "axis",
// axisPointer: {
// type: 'cross',
// },
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
// },
},
textStyle:{
color:"#333333",
},
xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
yAxis: {
type: "value",
type: 'value',
},
dataZoom: [
{
type: "inside",
type: 'inside',
start: 0,
end: 100,
end: 100
},
{
start: 0,
end: 100,
},
end: 100
}
],
series: dataset,
});
series: dataset
})
},
updateDate(val){
this.dataRange = val || [];
this.getDate();
this.dataRange =val || []
this.getDate()
},
handleClosed(done) {
handleColsed(done) {
if (!this.chart) {
return done();
}
@ -408,8 +208,8 @@ export default {
this.chart = null;
done();
},
},
};
}
}
</script>
<style scoped lang="scss">
::v-deep {
@ -417,4 +217,5 @@ export default {
line-height: 40px;
}
}
</style>

119
src/views/ems/dzjk/sbjk/RealTimeBaseInfo.vue
View File

@ -2,14 +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 displaySquares" :key="index+'singleSquareBox'">
<div
class="square-click-wrapper"
:class="{ 'field-disabled': !item.pointId }"
@click="handleSquareClick(item)"
>
<single-square-box :data="{...item,value:item.value,loading:item.valueLoading}" ></single-square-box>
</div>
<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>
</el-row>
</template>
@ -17,74 +11,52 @@
<script>
import SingleSquareBox from "@/components/Ems/SingleSquareBox/index.vue";
import {formatNumber} from '@/filters/ems'
export default {
components:{SingleSquareBox},
props:{
displayData: {
type: Array,
data:{
type:Object,
required:false,
default: () => [],
},
loading: {
type: Boolean,
required: false,
default: false,
default:()=>{return {}}
},
},
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] || {};
const pointId = String(row.dataPoint || "").trim();
methods:{formatNumber},
data() {
return {
title: row.fieldName || def.fieldName,
value: row.fieldValue,
valueLoading: this.loading && this.isEmptyValue(row.fieldValue),
bgColor: this.getBgColor(index),
pointId,
fieldCode: row.fieldCode || def.fieldCode,
raw: row,
};
});
},
},
methods: {
handleSquareClick(item) {
this.$emit("field-click", item || {});
},
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 === "-";
},
// 单个电站 四个方块数据
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'
}]
}
},
}
@ -98,13 +70,4 @@ export default {
width: fit-content;
}
}
.square-click-wrapper {
cursor: pointer;
}
.square-click-wrapper.field-disabled {
cursor: not-allowed;
opacity: 0.8;
}
</style>

566
src/views/ems/dzjk/sbjk/bmsdcc/index.vue
View File

@ -1,99 +1,27 @@
<template>
<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)">
<div v-loading="loading">
<div v-for="(baseInfo,index) in baseInfoList" :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="{
'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
'running-card-container':baseInfo.workStatus === '0'
}">
<div slot="header">
<span
class="large-title">{{
baseInfo.parentDeviceName ? `${baseInfo.parentDeviceName} -> ` : ''
}}{{ baseInfo.deviceName }}</span>
<div class="info">
<div>数据更新时间：{{ baseInfo.dataUpdateTime || '-' }}</div>
</div>
<div class="alarm">
<el-button type="primary" round size="small" style="margin-right:20px;"
@click="pointDetail(baseInfo,'point')">详细
</el-button>
<el-badge :hidden="!baseInfo.alarmNum" :value="baseInfo.alarmNum || 0" class="item">
<i
class="el-icon-message-solid alarm-icon"
@click="pointDetail(baseInfo,'alarmPoint')"
></i>
</el-badge>
</div>
<span class="large-title">{{index+1}}#{{baseInfo.parentDeviceName?`${baseInfo.parentDeviceName} —> ` : ''}}{{baseInfo.deviceName}}</span>
</div>
<div class="descriptions-main">
<el-descriptions direction="vertical" :column="3" :colon="false">
<el-descriptions-item
contentClassName="descriptions-direction work-status"
:span="1" label="工作状态">
<span
class="pointer"
:class="{ 'field-disabled': !hasFieldPointId(baseInfo, 'workStatus') }"
@click="handleFieldClick(baseInfo, 'workStatus', '工作状态')"
>
{{ CLUSTERWorkStatusOptions[baseInfo.workStatus] || '-' }}
</span>
</el-descriptions-item>
<el-descriptions-item contentClassName="descriptions-direction"
:span="1" label="与PCS通信">
<span
class="pointer"
:class="{ 'field-disabled': !hasFieldPointId(baseInfo, 'pcsCommunicationStatus') }"
@click="handleFieldClick(baseInfo, 'pcsCommunicationStatus', '与PCS通信')"
>
{{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[baseInfo.pcsCommunicationStatus] || '-' }}
</span>
</el-descriptions-item>
<el-descriptions-item contentClassName="descriptions-direction"
:span="1" label="与EMS通信">
<span
class="pointer"
:class="{ 'field-disabled': !hasFieldPointId(baseInfo, 'emsCommunicationStatus') }"
@click="handleFieldClick(baseInfo, 'emsCommunicationStatus', '与EMS通信')"
>
{{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[baseInfo.emsCommunicationStatus] || '-' }}
</span>
</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
</el-descriptions>
</div>
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions direction="vertical" :column="3" :colon="false">
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"
v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1"
:label="item.label">
<span
class="pointer"
:class="{ 'field-disabled': !hasFieldPointId(baseInfo, item.attr) }"
@click="handleFieldClick(baseInfo, item.attr, item.label)"
>
<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>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" 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>
</span>
</el-descriptions-item>
</el-descriptions>
@ -102,13 +30,7 @@
<div class="process-line-bg">
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
</div>
<div
class="process pointer"
:class="{ 'field-disabled': !hasFieldPointId(baseInfo, 'currentSoc') }"
@click="handleFieldClick(baseInfo, 'currentSoc', '当前SOC')"
>当前SOC :
{{ baseInfo.currentSoc }}%
</div>
<div class="process pointer" @click="showChart( '当前SOC','电池簇',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div>
</div>
</div>
<el-table
@ -128,22 +50,14 @@
label="单体平均值"
>
<template slot-scope="scope">
<span class="pointer"
:class="{ 'field-disabled': !hasTableFieldPointId(baseInfo, scope.row.dataName, scope.column.label) }"
@click="handleTableFieldClick(baseInfo, scope.row.dataName, scope.column.label)">{{
scope.row.avgData
}}</span>
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.avgData}}</span>
</template>
</el-table-column>
<el-table-column
prop="minData"
label="单体最小值">
<template slot-scope="scope">
<span class="pointer"
:class="{ 'field-disabled': !hasTableFieldPointId(baseInfo, scope.row.dataName, scope.column.label) }"
@click="handleTableFieldClick(baseInfo, scope.row.dataName, scope.column.label)">{{
scope.row.minData
}}</span>
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.minData}}</span>
</template>
</el-table-column>
<el-table-column
@ -154,11 +68,7 @@
prop="maxData"
label="单体最大值">
<template slot-scope="scope">
<span class="pointer "
:class="{ 'field-disabled': !hasTableFieldPointId(baseInfo, scope.row.dataName, scope.column.label) }"
@click="handleTableFieldClick(baseInfo, scope.row.dataName, scope.column.label)">{{
scope.row.maxData
}}</span>
<span class="pointe " @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.maxData}}</span>
</template>
</el-table-column>
<el-table-column
@ -168,79 +78,24 @@
</el-table>
</el-card>
</div>
<point-table ref="pointTable"/>
<el-dialog
:visible.sync="curveDialogVisible"
:title="curveDialogTitle"
width="1000px"
append-to-body
class="ems-dialog"
:close-on-click-modal="false"
destroy-on-close
@opened="handleCurveDialogOpened"
@closed="handleCurveDialogClosed"
>
<div class="curve-tools">
<el-date-picker
v-model="curveCustomRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 440px"
/>
<el-button type="primary" size="mini" :loading="curveLoading" @click="loadCurveData">查询</el-button>
</div>
<div v-loading="curveLoading" ref="curveChartRef" style="height: 380px;"></div>
</el-dialog>
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import * as echarts from "echarts";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
import {getProjectDisplayData, getStackNameList, getClusterNameList} from '@/api/ems/dzjk'
import pointChart from "./../PointChart.vue";
import {getBMSBatteryCluster} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import {mapState} from "vuex";
import {getPointConfigCurve} from "@/api/ems/site";
export default {
name:'DzjkSbjkBmsdcc',
mixins:[getQuerySiteId,intervalUpdate],
components: {PointTable},
computed: {
...mapState({
CLUSTERWorkStatusOptions: state => state?.ems?.CLUSTERWorkStatusOptions || {},
}),
filteredBaseInfoList() {
if (!this.selectedClusterId) {
return this.baseInfoList || [];
}
return (this.baseInfoList || []).filter(item => item.deviceId === this.selectedClusterId);
},
},
components:{pointChart},
data() {
return {
loading:false,
displayData: [],
clusterDeviceList: [],
selectedClusterId: "",
curveDialogVisible: false,
curveDialogTitle: "点位曲线",
curveChart: null,
curveLoading: false,
curveCustomRange: [],
curveQuery: {
siteId: "",
pointId: "",
pointType: "data",
rangeType: "custom",
startTime: "",
endTime: "",
},
unitObj:{
'电压':'V',
'温度':'&#8451;',
@ -251,21 +106,13 @@ export default {
'电压单体平均值':'电压平均值',
'电压单体最大值':'最高单体电压',
'温度单体最小值':'最低单体温度',
'温度单体平均值': '平均单体温度',
'温度单体平均值':'温度平均值',
'温度单体最大值':'最高单体温度',
'SOC单体最小值':'最低单体SOC',
'SOC单体平均值':'当前SOC',
'SOC单体最大值':'最高单体SOC',
},
baseInfoList: [{
siteId: "",
deviceId: "",
parentDeviceName: "",
deviceName: "BMS电池簇",
dataUpdateTime: "-",
alarmNum: 0,
batteryDataList: [],
}],
baseInfoList:[],
infoData:[
{label:'簇电压',attr:'clusterVoltage',unit:'V',pointName:'簇电压'},
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh',pointName:'可充电量'},
@ -280,364 +127,34 @@ export default {
}
},
methods:{
displayValue(value) {
return value === undefined || value === null || value === "" ? "-" : value;
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
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'
},
// 查看设备电位表格
pointDetail(row, dataType) {
const {siteId, deviceId} = row
this.$refs.pointTable.showTable({siteId, deviceId, deviceCategory: 'CLUSTER'}, dataType)
},
hasFieldPointId(baseInfo, fieldName) {
const row = this.getFieldRow(baseInfo, fieldName);
return !!String(row?.dataPoint || "").trim();
},
hasTableFieldPointId(baseInfo, dataName, columnLabel) {
const pointName = this.tablePointNameMap[String(dataName || "") + String(columnLabel || "")];
if (!pointName) {
return false;
}
return this.hasFieldPointId(baseInfo, pointName);
},
getFieldRow(baseInfo, fieldName) {
const key = String(fieldName || "").trim();
const map = baseInfo?._fieldRowMap || {};
return map[key] || null;
},
handleFieldClick(baseInfo, fieldName, title) {
const row = this.getFieldRow(baseInfo, fieldName);
const pointId = String(row?.dataPoint || "").trim();
this.openCurveDialogByPointId(pointId, title || fieldName);
},
handleTableFieldClick(baseInfo, dataName, columnLabel) {
const pointName = this.tablePointNameMap[String(dataName || "") + String(columnLabel || "")];
if (!pointName) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
this.handleFieldClick(baseInfo, pointName, pointName);
},
openCurveDialogByPointId(pointId, title) {
const normalizedPointId = String(pointId || "").trim();
if (!normalizedPointId) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
const range = this.getDefaultCurveRange();
this.curveCustomRange = range;
this.curveDialogTitle = `点位曲线 - ${title || normalizedPointId}`;
this.curveQuery = {
siteId: this.siteId,
pointId: normalizedPointId,
pointType: "data",
rangeType: "custom",
startTime: range[0],
endTime: range[1],
};
this.curveDialogVisible = true;
},
handleCurveDialogOpened() {
if (!this.curveChart && this.$refs.curveChartRef) {
this.curveChart = echarts.init(this.$refs.curveChartRef);
}
this.loadCurveData();
},
handleCurveDialogClosed() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
this.curveLoading = false;
},
getDefaultCurveRange() {
const end = new Date();
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000);
return [this.formatDateTime(start), this.formatDateTime(end)];
},
formatDateTime(date) {
const d = new Date(date);
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
},
formatCurveTime(value) {
if (value === undefined || value === null || value === "") {
return "";
}
const raw = String(value).trim();
const normalized = raw
.replace("T", " ")
.replace(/\.\d+/, "")
.replace(/Z$/, "")
.replace(/([+-]\d{2}:?\d{2})$/, "")
.trim();
const matched = normalized.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
if (matched) {
return `${matched[1]} ${matched[2]}`;
}
return normalized.slice(0, 16);
},
loadCurveData() {
if (!this.curveQuery.siteId || !this.curveQuery.pointId) {
this.$message.warning("点位信息不完整，无法查询曲线");
return;
}
if (!this.curveCustomRange || this.curveCustomRange.length !== 2) {
this.$message.warning("请选择查询时间范围");
return;
}
this.curveQuery.startTime = this.curveCustomRange[0];
this.curveQuery.endTime = this.curveCustomRange[1];
const query = {
siteId: this.curveQuery.siteId,
pointId: this.curveQuery.pointId,
pointType: "data",
rangeType: "custom",
startTime: this.curveQuery.startTime,
endTime: this.curveQuery.endTime,
};
this.curveLoading = true;
getPointConfigCurve(query).then((response) => {
const rows = response?.data || [];
this.renderCurveChart(rows);
}).catch(() => {
this.renderCurveChart([]);
}).finally(() => {
this.curveLoading = false;
});
},
renderCurveChart(rows = []) {
if (!this.curveChart) return;
const xData = rows.map(item => this.formatCurveTime(item.dataTime));
const yData = rows.map(item => item.pointValue);
this.curveChart.clear();
this.curveChart.setOption({
legend: {},
grid: {
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
textStyle: {
color: "#333333",
},
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: this.curveDialogTitle,
type: "line",
data: yData,
connectNulls: true,
},
],
});
if (!rows.length) {
this.$message.warning("当前时间范围暂无曲线数据");
}
},
handleTagClick(deviceId) {
this.selectedClusterId = deviceId || "";
updateData(){
this.loading = true
getBMSBatteryCluster(this.siteId).then(response => {
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false})
},
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 rowMap = this.getFieldRowMap(rows, deviceId);
return Object.keys(rowMap).reduce((acc, fieldName) => {
const row = rowMap[fieldName];
if (acc[fieldName] === undefined) {
acc[fieldName] = row?.fieldValue;
}
return acc;
}, {});
},
getFieldRowMap(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;
const fieldName = this.getFieldName(item.fieldCode);
map[fieldName] = item;
const displayName = String(item.fieldName || "").trim();
if (displayName && !map[displayName]) {
map[displayName] = item;
}
});
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;
}
const displayName = String(item.fieldName || "").trim();
if (displayName && !map[displayName]) {
map[displayName] = item;
}
});
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,
_fieldRowMap: {
...this.getFieldRowMap(this.getModuleRows('SBJK_BMSDCC', '簇信息'), id),
...this.getFieldRowMap(this.getModuleRows('SBJK_BMSDCC', '状态'), id),
...this.getFieldRowMap(this.getModuleRows('SBJK_BMSDCC', '单体数据'), id),
},
};
})(),
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
})
}
},
beforeDestroy() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
},
}
</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{
padding:24px 300px 24px 24px;
}
.descriptions-main-bottom{
padding:14px 300px 14px 24px;
}
}
// 进度条样式
.process-container{
width:100px;
@ -645,7 +162,6 @@ export default {
right:70px;
top:50%;
transform: translateY(-50%);
.process-line-bg{
position: relative;
width:100%;
@ -653,7 +169,6 @@ export default {
background-color:#fff2cb ;
border-radius: 6px;
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
.process-line{
position: absolute;
left: 0;
@ -665,23 +180,10 @@ export default {
box-shadow: 0 0 10px #ffbf14, 0 0 0 rgba(255, 191, 20, 0.5);
}
}
.process{
margin-top:15px;
color:#666666;
}
}
.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>

606
src/views/ems/dzjk/sbjk/bmszl/index.vue
View File

@ -1,81 +1,27 @@
<template>
<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"
<div v-loading="loading">
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
<el-card :class="{
'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
'running-card-container':baseInfo.workStatus === '0'
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
shadow="always">
<div slot="header">
<span class="large-title">{{ baseInfo.deviceName }}</span>
<div class="info">
<div>数据更新时间：{{ baseInfo.dataUpdateTime || '-' }}</div>
</div>
<div class="alarm">
<el-button type="primary" round size="small" style="margin-right:20px;"
@click="pointDetail(baseInfo,'point')">详细
</el-button>
<el-badge :hidden="!baseInfo.alarmNum" :value="baseInfo.alarmNum || 0" class="item">
<i
class="el-icon-message-solid alarm-icon"
@click="pointDetail(baseInfo,'alarmPoint')"
></i>
</el-badge>
</div>
<span class="large-title">{{index+1}}#{{baseInfo.deviceName}}</span>
</div>
<div class="descriptions-main">
<el-descriptions :colon="false" :column="3" direction="vertical">
<el-descriptions-item
contentClassName="descriptions-direction work-status"
label="工作状态" labelClassName="descriptions-label">
<span class="pointer" @click="handleStatusFieldClick(baseInfo, 'workStatus', '工作状态')">
{{ STACKWorkStatusOptions[baseInfo.workStatus] || '-' }}
</span>
</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与PCS通信"
labelClassName="descriptions-label">
<span class="pointer" @click="handleStatusFieldClick(baseInfo, 'pcsCommunicationStatus', '与PCS通信')">
{{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[baseInfo.pcsCommunicationStatus] || '-' }}
</span>
</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与EMS通信"
labelClassName="descriptions-label">
<span class="pointer" @click="handleStatusFieldClick(baseInfo, 'emsCommunicationStatus', '与EMS通信')">
{{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[baseInfo.emsCommunicationStatus] || '-' }}
</span>
</el-descriptions-item>
<el-descriptions-item :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与PCS通信" labelClassName="descriptions-label">{{$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]}}</el-descriptions-item>
</el-descriptions>
</div>
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions :colon="false" :column="3" direction="vertical">
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label"
:span="1" contentClassName="descriptions-direction"
labelClassName="descriptions-label">
<span class="pointer" @click="handleStackFieldClick(baseInfo, item)">
<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>
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :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>
</span>
</el-descriptions-item>
</el-descriptions>
@ -84,449 +30,137 @@
<div class="process-line-bg">
<div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
</div>
<div class="process pointer" @click="handleStackSocClick(baseInfo)">当前SOC :
{{ baseInfo.stackSoc }}%
</div>
<div class="process pointer" @click="showChart('当前SOC','电池堆',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
</div>
</div>
<el-table
:data="baseInfo.batteryDataList"
class="common-table"
max-height="500"
stripe
style="width: 100%;margin-top:25px;">
<el-table-column
label="簇号"
prop="clusterId">
</el-table-column>
<el-table-column
label="簇电压"
>
<template slot-scope="scope">
<span class="pointer" @click="showChart('簇电压','电池簇',scope.row.clusterId)">{{scope.row.clusterVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="簇电流">
<template slot-scope="scope">
<span class="pointer" @click="showChart('簇电流','电池簇',scope.row.clusterId)">{{scope.row.clusterCurrent}} A</span>
</template>
</el-table-column>
<el-table-column
label="簇SOC">
<template slot-scope="scope">
<span class="pointer" @click="showChart('当前SOC','电池簇',scope.row.clusterId)">{{scope.row.currentSoc}} %</span>
</template>
</el-table-column>
<el-table-column
label="单体最高电压"
prop="maxVoltage">
<template slot-scope="scope">
<span class="pointer" @click="showChart('最高单体电压','电池簇',scope.row.clusterId)">{{scope.row.maxCellVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="电池号码"
prop="maxCellVoltageId">
</el-table-column>
<el-table-column
label="单体最低电压"
prop="minVoltage">
<template slot-scope="scope">
<span class="pointer" @click="showChart('最低单体电压','电池簇',scope.row.clusterId)">{{scope.row.minCellVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="电池号码"
prop="minCellVoltageId">
</el-table-column>
<el-table-column
label="单体最高温度">
<template slot-scope="scope">
<span class="pointer" @click="showChart('最高单体温度','电池簇',scope.row.clusterId)">{{scope.row.maxCellTemp}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
label="电池号码"
prop="maxCellTempId">
</el-table-column>
<el-table-column
label="单体最低温度"
prop="minTemperature">
<template slot-scope="scope">
<span class="pointer" @click="showChart('最低单体温度','电池簇',scope.row.clusterId)">{{scope.row.minCellTemp}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
label="电池号码"
prop="minCellTempId">
</el-table-column>
</el-table>
</el-card>
</div>
<el-dialog
:visible.sync="curveDialogVisible"
:title="curveDialogTitle"
width="1000px"
append-to-body
class="ems-dialog"
:close-on-click-modal="false"
destroy-on-close
@opened="handleCurveDialogOpened"
@closed="handleCurveDialogClosed"
>
<div class="curve-tools">
<el-date-picker
v-model="curveCustomRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 440px"
/>
<el-button type="primary" size="mini" :loading="curveLoading" @click="loadCurveData">查询</el-button>
</div>
<div v-loading="curveLoading" ref="curveChartRef" style="height: 380px;"></div>
</el-dialog>
<point-table ref="pointTable"/>
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import * as echarts from "echarts";
import {getProjectDisplayData, getStackNameList} from '@/api/ems/dzjk'
import {getPointConfigCurve} from "@/api/ems/site";
import {getBMSOverView} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
import {mapState} from "vuex";
import pointChart from "./../PointChart.vue";
export default {
name:'DzjkSbjkBmszl',
components: {PointTable},
components: {pointChart,},
mixins:[getQuerySiteId,intervalUpdate],
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,
displayData: [],
stackDeviceList: [],
selectedStackId: "",
curveDialogVisible: false,
curveDialogTitle: "点位曲线",
curveChart: null,
curveLoading: false,
curveCustomRange: [],
curveQuery: {
siteId: "",
pointId: "",
pointType: "data",
rangeType: "custom",
startTime: "",
endTime: "",
},
baseInfoList: [{
siteId: "",
deviceId: "",
deviceName: "BMS总览",
dataUpdateTime: "-",
alarmNum: 0,
batteryDataList: [],
}],
baseInfoList:[],
infoData:[
{label: '电池堆总电压', attr: 'stackVoltage', unit: 'V'},
{label: '可充电量', attr: 'availableChargeCapacity', unit: 'kWh'},
{label: '累计充电量', attr: 'totalChargeCapacity', unit: 'kWh'},
{label: '电池堆总电流', attr: 'stackCurrent', unit: 'A'},
{label: '可放电量', attr: 'availableDischargeCapacity', unit: 'kWh'},
{label: '累计放电量', attr: 'totalDischargeCapacity', unit: 'kWh'},
{label: 'SOH', attr: 'stackSoh', unit: '%'},
{label: '平均温度', attr: 'operatingTemp', unit: '&#8451;'},
{label: '绝缘电阻', attr: 'stackInsulationResistance', unit: '&Omega;'},
{label:'电池堆总电压',attr:'stackVoltage',unit:'V',pointName:'电池堆电压'},
{label:'可充电量',attr:'availableChargeCapacity',unit:'kWh',pointName:'可充电量'},
{label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh',pointName:'累计充电量'},
{label:'电池堆总电流',attr:'stackCurrent',unit:'A',pointName:'电池堆总电流'},
{label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh',pointName:'可放电量'},
{label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh',pointName:'累计放电量'},
{label:'SOH',attr:'stackSoh',unit:'%',pointName:'SOH'},
{label:'平均温度',attr:'operatingTemp',unit:'&#8451;',pointName:'平均温度'},
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;',pointName:'绝缘电阻'},
]
}
},
methods:{
displayValue(value) {
return value === undefined || value === null || value === "" ? "-" : value;
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
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'
},
// 查看设备电位表格
pointDetail(row, dataType) {
const {siteId, deviceId} = row
this.$refs.pointTable.showTable({siteId, deviceId, deviceCategory: 'STACK'}, dataType)
},
handleStatusFieldClick(baseInfo, fieldKey, title) {
const pointId = this.resolvePointId(baseInfo, fieldKey, "status");
this.openCurveDialogByPointId(pointId, title || fieldKey);
},
handleStackFieldClick(baseInfo, item) {
const fieldKey = item?.attr || "";
const pointId = this.resolvePointId(baseInfo, fieldKey, "info");
this.openCurveDialogByPointId(pointId, item?.label || fieldKey);
},
handleStackSocClick(baseInfo) {
const pointId = this.resolvePointId(baseInfo, "stackSoc", "info");
this.openCurveDialogByPointId(pointId, "当前SOC");
},
handleClusterFieldClick(row = {}, fieldKey = "", title = "") {
const directKeys = [
"pointId",
"dataPoint",
`${fieldKey}PointId`,
`${fieldKey}DataPoint`,
];
let pointId = "";
directKeys.some((key) => {
const value = String(row?.[key] || "").trim();
if (value) {
pointId = value;
return true;
}
return false;
});
if (!pointId && row?.pointIdMap && fieldKey) {
pointId = String(row.pointIdMap[fieldKey] || "").trim();
}
this.openCurveDialogByPointId(pointId, title || fieldKey);
},
resolvePointId(baseInfo = {}, fieldKey = "", source = "info") {
const mapKey = source === "status" ? "statusPointIdMap" : "pointIdMap";
return String(baseInfo?.[mapKey]?.[fieldKey] || "").trim();
},
openCurveDialogByPointId(pointId, title) {
const normalizedPointId = String(pointId || "").trim();
if (!normalizedPointId) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
const range = this.getDefaultCurveRange();
this.curveCustomRange = range;
this.curveDialogTitle = `点位曲线 - ${title || normalizedPointId}`;
this.curveQuery = {
siteId: this.siteId,
pointId: normalizedPointId,
pointType: "data",
rangeType: "custom",
startTime: range[0],
endTime: range[1],
};
this.curveDialogVisible = true;
},
handleCurveDialogOpened() {
if (!this.curveChart && this.$refs.curveChartRef) {
this.curveChart = echarts.init(this.$refs.curveChartRef);
}
this.loadCurveData();
},
handleCurveDialogClosed() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
this.curveLoading = false;
},
getDefaultCurveRange() {
const end = new Date();
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000);
return [this.formatDateTime(start), this.formatDateTime(end)];
},
formatDateTime(date) {
const d = new Date(date);
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
},
formatCurveTime(value) {
if (value === undefined || value === null || value === "") {
return "";
}
const raw = String(value).trim();
const normalized = raw
.replace("T", " ")
.replace(/\.\d+/, "")
.replace(/Z$/, "")
.replace(/([+-]\d{2}:?\d{2})$/, "")
.trim();
const matched = normalized.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
if (matched) {
return `${matched[1]} ${matched[2]}`;
}
return normalized.slice(0, 16);
},
loadCurveData() {
if (!this.curveQuery.siteId || !this.curveQuery.pointId) {
this.$message.warning("点位信息不完整，无法查询曲线");
return;
}
if (!this.curveCustomRange || this.curveCustomRange.length !== 2) {
this.$message.warning("请选择查询时间范围");
return;
}
this.curveQuery.startTime = this.curveCustomRange[0];
this.curveQuery.endTime = this.curveCustomRange[1];
const query = {
siteId: this.curveQuery.siteId,
pointId: this.curveQuery.pointId,
pointType: "data",
rangeType: "custom",
startTime: this.curveQuery.startTime,
endTime: this.curveQuery.endTime,
};
this.curveLoading = true;
getPointConfigCurve(query).then((response) => {
const rows = response?.data || [];
this.renderCurveChart(rows);
}).catch(() => {
this.renderCurveChart([]);
}).finally(() => {
this.curveLoading = false;
});
},
renderCurveChart(rows = []) {
if (!this.curveChart) return;
const xData = rows.map((item) => this.formatCurveTime(item.dataTime));
const yData = rows.map((item) => item.pointValue);
this.curveChart.clear();
this.curveChart.setOption({
legend: {},
grid: {
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
textStyle: {
color: "#333333",
},
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: this.curveDialogTitle,
type: "line",
data: yData,
connectNulls: true,
},
],
});
if (!rows.length) {
this.$message.warning("当前时间范围暂无曲线数据");
}
updateData(){
this.loading = true
getBMSOverView(this.siteId).then(response => {
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false})
},
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;
},
isEmptyValue(value) {
return value === undefined || value === null || value === "";
},
getFieldRowMap(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;
});
rows.forEach(item => {
if (!item || !item.fieldCode) return;
const itemDeviceId = String(item.deviceId || "");
if (itemDeviceId !== "") return;
const fieldName = this.getFieldName(item.fieldCode);
const existRow = map[fieldName];
if (!existRow || this.isEmptyValue(existRow.fieldValue)) {
map[fieldName] = item;
}
});
return map;
},
getFieldMap(rowMap = {}) {
const map = {};
Object.keys(rowMap || {}).forEach((fieldName) => {
map[fieldName] = rowMap[fieldName]?.fieldValue;
});
return map;
},
getPointIdMap(rowMap = {}) {
const map = {};
Object.keys(rowMap || {}).forEach((fieldName) => {
map[fieldName] = String(rowMap[fieldName]?.dataPoint || "").trim();
});
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 infoRowMap = this.getFieldRowMap(this.getModuleRows('SBJK_BMSZL', '堆信息'), id);
const statusRowMap = this.getFieldRowMap(this.getModuleRows('SBJK_BMSZL', '状态'), id);
const infoMap = this.getFieldMap(infoRowMap);
const statusMap = this.getFieldMap(statusRowMap);
const stackSoc = Number(infoMap.stackSoc);
return {
...infoMap,
workStatus: statusMap.workStatus,
pcsCommunicationStatus: statusMap.pcsCommunicationStatus,
emsCommunicationStatus: statusMap.emsCommunicationStatus,
stackSoc: isNaN(stackSoc) ? 0 : stackSoc,
pointIdMap: this.getPointIdMap(infoRowMap),
statusPointIdMap: this.getPointIdMap(statusRowMap),
};
})(),
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
// 先渲染卡片框架，字段值走单点位 loading
this.buildBaseInfoList();
Promise.all([
getProjectDisplayData(this.siteId),
this.getStackDeviceList(),
]).then(([displayResponse]) => {
this.displayData = displayResponse?.data || [];
this.buildBaseInfoList();
}).finally(() => {
this.loading = false
})
},
}
,
beforeDestroy() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
},
}
</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;
}
.curve-tools {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
::v-deep {
//描述列表样式
.descriptions-main {
@ -537,7 +171,6 @@ export default {
}
}
}
// 进度条样式
.process-container{
width:100px;
@ -545,7 +178,6 @@ export default {
right:70px;
top:50%;
transform: translateY(-50%);
.process-line-bg{
position: relative;
width:100%;
@ -553,7 +185,6 @@ export default {
background-color:#fff2cb ;
border-radius: 6px;
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
.process-line{
position: absolute;
left: 0;
@ -565,23 +196,10 @@ export default {
box-shadow: 0 0 10px rgb(252 108 108), 0 0 0 rgba(252, 108, 108, 0.5);
}
}
.process{
margin-top:15px;
color:#666666;
}
}
.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>

543
src/views/ems/dzjk/sbjk/db/index.vue
View File

@ -1,497 +1,150 @@
<template>
<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>
<div v-loading="loading">
<el-card
v-for="(group, index) in filteredSectionGroups"
:key="index + 'dbSection'"
class="sbjk-card-container list running-card-container"
shadow="always"
class="sbjk-card-container"
:class="{
'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
'running-card-container':zbInfo.emsCommunicationStatus === '0'
}"
>
<div slot="header">
<span class="large-title">{{ group.displayName || "电表" }}</span>
<span class="large-title">1#{{ zbInfo.deviceName }}</span>
<div class="info">
<div>状态：{{ group.statusText }}</div>
<div>数据更新时间：{{ group.updateTimeText }}</div>
<div>
{{
$store.state.ems.communicationStatusOptions[
zbInfo.emsCommunicationStatus
]
}}
</div>
<div>数据更新时间：{{ zbInfo.dataUpdateTime }}</div>
</div>
</div>
<el-row class="device-info-row">
<el-col
v-for="(item, dataIndex) in group.items"
:key="dataIndex + 'dbField'"
:span="8"
class="device-info-col"
:class="{ 'field-disabled': !item.pointId }"
<el-table
class="common-table"
:data="zbInfo.loadDataDetailInfo"
@cell-click="(row,col)=>{handlerCell(zbInfo.deviceId,row,col)}"
stripe
style="width: 100%"
>
<div class="field-click-wrapper" @click="handleFieldClick(item)">
<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>
</div>
</el-col>
</el-row>
<el-table-column prop="category" label="类别"> </el-table-column>
<el-table-column prop="totalKwh" label="总/kWh"> </el-table-column>
<el-table-column prop="peakKwh" label="尖/kWh"> </el-table-column>
<el-table-column prop="highKwh" label="峰/kWh"> </el-table-column>
<el-table-column prop="flatKwh" label="平/kWh"> </el-table-column>
<el-table-column prop="valleyKwh" label="谷/kWh"> </el-table-column>
</el-table>
</el-card>
<el-dialog
:visible.sync="curveDialogVisible"
:title="curveDialogTitle"
width="1000px"
append-to-body
class="ems-dialog"
:close-on-click-modal="false"
destroy-on-close
@opened="handleCurveDialogOpened"
@closed="handleCurveDialogClosed"
<el-card
shadow="always"
class="sbjk-card-container"
style="margin-top: 20px"
:class="{
'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
'running-card-container':zbInfo.emsCommunicationStatus === '0'
}"
>
<div class="curve-tools">
<el-date-picker
v-model="curveCustomRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 440px"
/>
<el-button type="primary" size="mini" :loading="curveLoading" @click="loadCurveData">查询</el-button>
<div slot="header">
<span class="large-title">2#{{ cnbInfo.deviceName }}</span>
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
cnbInfo.emsCommunicationStatus
]
}}
</div>
<div v-loading="curveLoading" ref="curveChartRef" style="height: 380px;"></div>
</el-dialog>
<div>数据更新时间：{{ cnbInfo.dataUpdateTime }}</div>
</div>
</div>
<el-table
class="common-table"
:data="cnbInfo.meteDataDetailInfo"
@cell-click="(row,col)=>{handlerCellCN(cnbInfo.deviceId,row,col)}"
stripe
style="width: 100%"
>
<el-table-column prop="category" label="类别"> </el-table-column>
<el-table-column prop="activePower" label="有功功率"> </el-table-column>
<el-table-column prop="reactivePower" label="无功功率">
</el-table-column>
</el-table>
</el-card>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import * as echarts from "echarts";
import pointChart from "./../PointChart.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getAmmeterDataList } from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import { getProjectDisplayData } from "@/api/ems/dzjk";
import { getDeviceList, getPointConfigCurve } from "@/api/ems/site";
export default {
name: "DzjkSbjkDb",
mixins: [getQuerySiteId,intervalUpdate],
components:{pointChart},
data() {
return {
loading: false,
displayData: [],
selectedSectionKey: "",
ammeterDeviceList: [],
curveDialogVisible: false,
curveDialogTitle: "点位曲线",
curveChart: null,
curveLoading: false,
curveCustomRange: [],
curveQuery: {
siteId: "",
pointId: "",
pointType: "data",
rangeType: "custom",
startTime: "",
endTime: "",
},
zbInfo: {},
cnbInfo: {},
};
},
computed: {
moduleDisplayData() {
return (this.displayData || []).filter((item) => item.menuCode === "SBJK_DB");
},
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,
pointId: String(row?.dataPoint || "").trim(),
raw: row,
};
});
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: {
handleFieldClick(item) {
const pointId = String(item?.pointId || item?.raw?.dataPoint || "").trim();
if (!pointId) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
this.openCurveDialog({
pointId,
title: item?.fieldName || pointId,
});
},
openCurveDialog({ pointId, title }) {
const range = this.getDefaultCurveRange();
this.curveCustomRange = range;
this.curveDialogTitle = `点位曲线 - ${title || pointId}`;
this.curveQuery = {
siteId: this.siteId,
pointId,
pointType: "data",
rangeType: "custom",
startTime: range[0],
endTime: range[1],
};
this.curveDialogVisible = true;
},
handleCurveDialogOpened() {
if (!this.curveChart && this.$refs.curveChartRef) {
this.curveChart = echarts.init(this.$refs.curveChartRef);
}
this.loadCurveData();
},
handleCurveDialogClosed() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
this.curveLoading = false;
},
getDefaultCurveRange() {
const end = new Date();
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000);
return [this.formatDateTime(start), this.formatDateTime(end)];
},
formatDateTime(date) {
const d = new Date(date);
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
},
formatCurveTime(value) {
if (value === undefined || value === null || value === "") {
return "";
}
const raw = String(value).trim();
const normalized = raw
.replace("T", " ")
.replace(/\.\d+/, "")
.replace(/Z$/, "")
.replace(/([+-]\d{2}:?\d{2})$/, "")
.trim();
const matched = normalized.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
if (matched) {
return `${matched[1]} ${matched[2]}`;
}
return normalized.slice(0, 16);
},
loadCurveData() {
if (!this.curveQuery.siteId || !this.curveQuery.pointId) {
this.$message.warning("点位信息不完整，无法查询曲线");
return;
}
if (!this.curveCustomRange || this.curveCustomRange.length !== 2) {
this.$message.warning("请选择查询时间范围");
return;
}
this.curveQuery.startTime = this.curveCustomRange[0];
this.curveQuery.endTime = this.curveCustomRange[1];
const query = {
siteId: this.curveQuery.siteId,
pointId: this.curveQuery.pointId,
pointType: "data",
rangeType: "custom",
startTime: this.curveQuery.startTime,
endTime: this.curveQuery.endTime,
};
this.curveLoading = true;
getPointConfigCurve(query)
.then((response) => {
const rows = response?.data || [];
this.renderCurveChart(rows);
})
.catch(() => {
this.renderCurveChart([]);
})
.finally(() => {
this.curveLoading = false;
});
},
renderCurveChart(rows = []) {
if (!this.curveChart) return;
const xData = rows.map((item) => this.formatCurveTime(item.dataTime));
const yData = rows.map((item) => item.pointValue);
this.curveChart.clear();
this.curveChart.setOption({
legend: {},
grid: {
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
textStyle: {
color: "#333333",
},
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: this.curveDialogTitle,
type: "line",
data: yData,
connectNulls: true,
},
],
});
if (!rows.length) {
this.$message.warning("当前时间范围暂无曲线数据");
handlerCell(id,row,column){
if(column.label !== '类别'){
const arr = row.category.split('')
arr.splice(6,0,column.label[0])
this.showChart(arr.join(''),'电表',id)
}
},
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 "-";
handlerCellCN(id,row,column){
if(column.label !== '类别'){
const arr = row.category.split('')
arr.splice(2,arr.length-2,column.label)
this.showChart(arr.join(''),'电表',id)
}
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 = [];
});
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
updateData(){
this.loading = true;
Promise.all([getProjectDisplayData(this.siteId), this.getAmmeterDeviceList()])
.then(([response]) => {
this.displayData = response?.data || [];
getAmmeterDataList(this.siteId)
.then((response) => {
this.zbInfo = JSON.parse(
JSON.stringify(response?.data?.ammeterLoadData || {})
);
this.cnbInfo = JSON.parse(
JSON.stringify(response?.data?.ammeterMeteData || {})
);
})
.finally(() => {
this.loading = false;
});
},
init() {
this.updateData();
this.updateInterval(this.updateData);
this.updateData()
this.updateInterval(this.updateData)
},
},
beforeDestroy() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
},
mounted() {},
};
</script>
<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 {
::v-deep {
.el-table__row td{
&:not(:first-child){
.cell{
cursor: pointer;
}
.device-info-col {
cursor: pointer;
}
}
}
}
.field-click-wrapper {
width: 100%;
}
.device-info-col.field-disabled {
cursor: not-allowed;
opacity: 0.8;
}
.curve-tools {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.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>

140
src/views/ems/dzjk/sbjk/dh/index.vue
View File

@ -1,140 +0,0 @@
<template>
<div>
<el-card
v-for="(item,index) in list"
:key="index+'ylLise'"
class="sbjk-card-container running-card-container"
shadow="always">
<div slot="header">
<span class="large-title">{{ item.deviceName }}</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>
</div>
<el-row class="device-info-row">
<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">
<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>
</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 {getDhDataList} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
export default {
name: 'DzjkSbjkDh',
mixins: [getQuerySiteId, intervalUpdate],
components: {pointChart, PointTable},
data() {
return {
loading: false,
list: [],
tempData: [
{title: '湿度', attr: 'humidity', unit: ''},
{title: '温度', attr: 'temperature', unit: '&#8451;'},
]
}
},
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
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'DH'}, dataType)
},
showChart(pointName, deviceId) {
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'DH', deviceId})
},
updateData() {
this.loading = true
getDhDataList(this.siteId).then(response => {
this.list = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {
this.loading = false
})
},
init() {
this.updateData()
this.updateInterval(this.updateData)
}
},
mounted() {
}
}
</script>
<style scoped lang="scss">
.sbjk-card-container {
&:not(:last-child) {
margin-bottom: 25px;
}
.el-row {
background-color: #ffffff;
border: 1px solid #eeeeee;
font-size: 14px;
line-height: 16px;
color: #333333;
.el-col {
padding: 12px 0;
text-align: center;
position: relative;
}
.el-col {
border-bottom: 1px solid #eeeeee;
}
.el-col:not(:nth-child(3n)) {
border-right: 1px solid #eeeeee;
}
}
}
.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>

15
src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
View File

@ -10,17 +10,13 @@
class="ems-dialog chart-detail-dialog"
:before-close="handleColsed"
>
<el-card
shadow="always"
class="common-card-container time-range-card"
style="margin-top: 20px"
>
<el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
<div slot="header" class="time-range-header">
<span class="card-title"></span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div>
<div class="card-main" v-loading="loading">
<div id="lineChart" style="height: 310px"></div>
<div id="lineChart" style="height: 310px;"></div>
</div>
</el-card>
</el-dialog>
@ -53,8 +49,8 @@ export default {
methods: {
// 更新时间范围 重置图表
updateDate(data){
this.dateRange = data || [];
this.getData();
this.dateRange=data || []
this.getData()
},
handleColsed(done) {
if (!this.chart) {
@ -98,7 +94,7 @@ export default {
this.$nextTick(() => {
!this.chart &&
(this.chart = echarts.init(document.querySelector("#lineChart")));
this.$refs.dateRangeSelect.init();
this.$refs.dateRangeSelect.init()
});
},
setOption(data) {
@ -152,6 +148,7 @@ export default {
},
];
}
this.chart &&
this.chart.setOption({
color: ["#FFBD00", "#3C81FF", "#05AEA3", "#F86F70"],

15
src/views/ems/dzjk/sbjk/dtdc/List.vue
View File

@ -10,17 +10,14 @@
v-for="(item, index) in tableData"
:key="index + 'dtdcList'"
:class="handleListClass(item)"
@click="chartDetail(item)"
>
<div style="font-size: 10px; font-weight: 600">
{{ item.clusterDeviceId }}
</div>
<div>#{{ item.deviceId }}</div>
<div class="dy pointer" @click="chartDetail(item, 'voltage')">
{{ item.voltage }}V
</div>
<div class="wd pointer" @click="chartDetail(item, 'temperature')">
{{ item.temperature }}℃
</div>
<div class="dy">{{ item.voltage }}V</div>
<div class="wd">{{ item.temperature }}℃</div>
</div>
</div>
@ -102,8 +99,9 @@ export default {
return className;
},
//查看表格行图表
chartDetail(row, fieldKey = "") {
this.$emit("chart", { ...row, fieldKey });
chartDetail(row, dataType = "") {
const { clusterDeviceId, deviceId } = row;
this.$emit("chart", { clusterDeviceId, deviceId, dataType });
},
},
};
@ -125,6 +123,7 @@ export default {
box-sizing: content-box;
min-width: 60px;
width: auto;
cursor: pointer;
&::before {
display: block;
content: "";

20
src/views/ems/dzjk/sbjk/dtdc/Table.vue
View File

@ -8,7 +8,7 @@
>
<el-table-column prop="deviceId" label="单体编号"> </el-table-column>
<el-table-column prop="clusterDeviceId" label="簇号"> </el-table-column>
<el-table-column prop="voltage" label="电压 (V)">
<el-table-column prop="voltage" label="电压（V）">
<template slot-scope="scope">
<el-button
@click="chartDetail(scope.row, 'voltage')"
@ -19,7 +19,7 @@
</el-button>
</template>
</el-table-column>
<el-table-column prop="temperature" label="温度 (℃)">
<el-table-column prop="temperature" label="温度（℃）">
<template slot-scope="scope">
<el-button
@click="chartDetail(scope.row, 'temperature')"
@ -30,7 +30,7 @@
</el-button>
</template>
</el-table-column>
<el-table-column prop="soc" label="SOC (%)">
<el-table-column prop="soc" label="SOC（%）">
<template slot-scope="scope">
<el-button
@click="chartDetail(scope.row, 'soc')"
@ -41,7 +41,7 @@
</el-button>
</template>
</el-table-column>
<el-table-column prop="soh" label="SOH (%)">
<el-table-column prop="soh" label="SOH（%）">
<template slot-scope="scope">
<el-button
@click="chartDetail(scope.row, 'soh')"
@ -52,6 +52,13 @@
</el-button>
</template>
</el-table-column>
<el-table-column label="曲线图">
<template slot-scope="scope">
<el-button @click="chartDetail(scope.row)" type="text" size="small">
展示
</el-button>
</template>
</el-table-column>
</el-table>
<!-- <el-pagination
v-show="tableData.length > 0"
@ -107,8 +114,9 @@ export default {
},
methods: {
//查看表格行图表
chartDetail(row, fieldKey = "") {
this.$emit("chart", {...row, fieldKey});
chartDetail(row, dataType = "") {
const { clusterDeviceId, deviceId } = row;
this.$emit("chart", { clusterDeviceId, deviceId, dataType });
},
},
};

242
src/views/ems/dzjk/sbjk/dtdc/index.vue
View File

@ -103,43 +103,16 @@
>
</el-pagination>
<chart-detail ref="chartDetail" />
<el-dialog
:visible.sync="curveDialogVisible"
:title="curveDialogTitle"
width="1000px"
append-to-body
class="ems-dialog"
:close-on-click-modal="false"
destroy-on-close
@opened="handleCurveDialogOpened"
@closed="handleCurveDialogClosed"
>
<div class="curve-tools">
<el-date-picker
v-model="curveCustomRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 440px"
/>
<el-button type="primary" size="mini" :loading="curveLoading" @click="loadCurveData">查询</el-button>
</div>
<div v-loading="curveLoading" ref="curveChartRef" style="height: 380px;"></div>
</el-dialog>
</el-card>
</template>
<script>
import * as echarts from "echarts";
import BarChart from "./BarChart";
import {
getClusterDataInfoList,
getClusterNameList,
getStackNameList,
getClusterNameList,
getClusterDataInfoList,
} from "@/api/ems/dzjk";
import { getPointConfigCurve } from "@/api/ems/site";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import ChartDetail from "./ChartDetail.vue";
import Table from "./Table.vue";
@ -147,12 +120,7 @@ import List from "./List.vue";
export default {
name: "DzjkSbjkDtdc",
mixins: [getQuerySiteId],
components: {
BarChart,
ChartDetail,
DtdcTable: Table,
DtdcList: List,
},
components: { BarChart, ChartDetail, DtdcTable: Table, DtdcList: List },
computed: {
pointIdList() {
let obj = {};
@ -186,190 +154,20 @@ export default {
pageNum: 1, //分页栏当前页数
totalSize: 0, //table表格数据总数
activeBtn: "table",
curveDialogVisible: false,
curveDialogTitle: "点位曲线",
curveChart: null,
curveLoading: false,
curveCustomRange: [],
curveQuery: {
siteId: "",
pointId: "",
pointType: "data",
rangeType: "custom",
startTime: "",
endTime: "",
},
};
},
beforeDestroy() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
},
methods: {
getFieldPointConfig(fieldKey) {
const pointMap = {
voltage: { pointIdKey: "voltagePointId", title: "电压 (V)" },
temperature: { pointIdKey: "temperaturePointId", title: "温度 (℃)" },
soc: { pointIdKey: "socPointId", title: "SOC (%)" },
soh: { pointIdKey: "sohPointId", title: "SOH (%)" },
};
return pointMap[String(fieldKey || "").trim()] || null;
},
openCurveDialogByPointId(pointId, title) {
const normalizedPointId = String(pointId || "").trim();
if (!normalizedPointId) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
const range = this.getDefaultCurveRange();
this.curveCustomRange = range;
this.curveDialogTitle = `点位曲线 - ${title || normalizedPointId}`;
this.curveQuery = {
siteId: this.siteId,
pointId: normalizedPointId,
pointType: "data",
rangeType: "custom",
startTime: range[0],
endTime: range[1],
};
this.curveDialogVisible = true;
},
handleCurveDialogOpened() {
if (!this.curveChart && this.$refs.curveChartRef) {
this.curveChart = echarts.init(this.$refs.curveChartRef);
}
this.loadCurveData();
},
handleCurveDialogClosed() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
this.curveLoading = false;
},
getDefaultCurveRange() {
const end = new Date();
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000);
return [this.formatDateTime(start), this.formatDateTime(end)];
},
formatDateTime(date) {
const d = new Date(date);
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(
d.getHours()
)}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
},
formatCurveTime(value) {
if (value === undefined || value === null || value === "") {
return "";
}
const raw = String(value).trim();
const normalized = raw
.replace("T", " ")
.replace(/\.\d+/, "")
.replace(/Z$/, "")
.replace(/([+-]\d{2}:?\d{2})$/, "")
.trim();
const matched = normalized.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
if (matched) {
return `${matched[1]} ${matched[2]}`;
}
return normalized.slice(0, 16);
},
loadCurveData() {
if (!this.curveQuery.siteId || !this.curveQuery.pointId) {
this.$message.warning("点位信息不完整，无法查询曲线");
return;
}
if (!this.curveCustomRange || this.curveCustomRange.length !== 2) {
this.$message.warning("请选择查询时间范围");
return;
}
this.curveQuery.startTime = this.curveCustomRange[0];
this.curveQuery.endTime = this.curveCustomRange[1];
const query = {
siteId: this.curveQuery.siteId,
pointId: this.curveQuery.pointId,
pointType: "data",
rangeType: "custom",
startTime: this.curveQuery.startTime,
endTime: this.curveQuery.endTime,
};
this.curveLoading = true;
getPointConfigCurve(query)
.then((response) => {
const rows = response?.data || [];
this.renderCurveChart(rows);
})
.catch(() => {
this.renderCurveChart([]);
})
.finally(() => {
this.curveLoading = false;
});
},
renderCurveChart(rows = []) {
if (!this.curveChart) return;
const xData = rows.map((item) => this.formatCurveTime(item.dataTime));
const yData = rows.map((item) => item.pointValue);
this.curveChart.clear();
this.curveChart.setOption({
legend: {},
grid: {
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
textStyle: {
color: "#333333",
},
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: this.curveDialogTitle,
type: "line",
data: yData,
connectNulls: true,
},
],
});
if (!rows.length) {
this.$message.warning("当前时间范围暂无曲线数据");
}
},
changeMenu(menu) {
const { activeBtn } = this;
activeBtn !== menu && (this.activeBtn = menu);
},
//查看表格行图表
chartDetail(row = {}) {
const config = this.getFieldPointConfig(row.fieldKey);
if (!config) return;
const pointId = row[config.pointIdKey];
this.openCurveDialogByPointId(pointId, config.title);
chartDetail({ clusterDeviceId, deviceId, dataType = "" }) {
const { siteId } = this;
this.$refs.chartDetail.initChart(
{ siteId, clusterDeviceId, deviceId },
dataType
);
},
// 分页
handleSizeChange(val) {
@ -407,9 +205,6 @@ export default {
);
this.search.clusterId = "";
this.getClusterList();
} else {
this.search.clusterId = "";
this.clusterOptions = [];
}
},
//表格数据
@ -440,26 +235,19 @@ export default {
},
getStackList() {
getStackNameList(this.siteId).then((response) => {
const list = JSON.parse(JSON.stringify(response?.data || []));
this.stackOptions = list;
this.stackOptions = JSON.parse(JSON.stringify(response?.data || []));
});
},
getClusterList() {
const { stackId } = this.search;
if (!stackId) {
this.clusterOptions = [];
return Promise.resolve();
}
this.clusterloading = true;
const currentStackId = String(stackId);
return getClusterNameList({
stackDeviceId: stackId,
getClusterNameList({
stackDeviceId: this.search.stackId,
siteId: this.siteId,
})
.then((response) => {
// 避免用户快速切换电池堆时旧请求覆盖新数据
if (String(this.search.stackId || "") !== currentStackId) return;
this.clusterOptions = JSON.parse(JSON.stringify(response?.data || []));
this.clusterOptions = JSON.parse(
JSON.stringify(response?.data || [])
);
})
.finally(() => {
this.clusterloading = false;

481
src/views/ems/dzjk/sbjk/ems/index.vue
View File

@ -1,481 +0,0 @@
<template>
<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="(group, index) in filteredSectionGroups"
:key="index + 'emsSection'"
class="sbjk-card-container list running-card-container"
shadow="always"
>
<div slot="header">
<span class="large-title">{{ group.displayName || group.sectionName || "EMS" }}</span>
<div class="info">
<div>状态：{{ group.statusText }}</div>
<div>数据更新时间：{{ group.updateTimeText }}</div>
</div>
</div>
<el-row class="device-info-row">
<el-col
v-for="(item, dataIndex) in group.items"
:key="dataIndex + 'emsField'"
:span="6"
class="device-info-col"
:class="{ 'field-disabled': !item.pointId }"
>
<div class="field-click-wrapper" @click="handleFieldClick(item)">
<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>
</div>
</el-col>
</el-row>
</el-card>
<el-dialog
:visible.sync="curveDialogVisible"
:title="curveDialogTitle"
width="1000px"
append-to-body
class="ems-dialog"
:close-on-click-modal="false"
destroy-on-close
@opened="handleCurveDialogOpened"
@closed="handleCurveDialogClosed"
>
<div class="curve-tools">
<el-date-picker
v-model="curveCustomRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 440px"
/>
<el-button type="primary" size="mini" :loading="curveLoading" @click="loadCurveData">查询</el-button>
</div>
<div v-loading="curveLoading" ref="curveChartRef" style="height: 380px;"></div>
</el-dialog>
</div>
</template>
<script>
import * as echarts from "echarts";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import { getProjectDisplayData } from "@/api/ems/dzjk";
import { getDeviceList, getPointConfigCurve } from "@/api/ems/site";
export default {
name: "DzjkSbjkEms",
mixins: [getQuerySiteId, intervalUpdate],
data() {
return {
loading: false,
displayData: [],
selectedSectionKey: "",
emsDeviceList: [],
curveDialogVisible: false,
curveDialogTitle: "点位曲线",
curveChart: null,
curveLoading: false,
curveCustomRange: [],
curveQuery: {
siteId: "",
pointId: "",
pointType: "data",
rangeType: "custom",
startTime: "",
endTime: "",
},
};
},
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,
pointId: String(row?.dataPoint || "").trim(),
raw: row,
};
});
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: {
handleFieldClick(item) {
const pointId = String(item?.pointId || item?.raw?.dataPoint || "").trim();
if (!pointId) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
this.openCurveDialog({
pointId,
title: item?.fieldName || pointId,
});
},
openCurveDialog({ pointId, title }) {
const range = this.getDefaultCurveRange();
this.curveCustomRange = range;
this.curveDialogTitle = `点位曲线 - ${title || pointId}`;
this.curveQuery = {
siteId: this.siteId,
pointId,
pointType: "data",
rangeType: "custom",
startTime: range[0],
endTime: range[1],
};
this.curveDialogVisible = true;
},
handleCurveDialogOpened() {
if (!this.curveChart && this.$refs.curveChartRef) {
this.curveChart = echarts.init(this.$refs.curveChartRef);
}
this.loadCurveData();
},
handleCurveDialogClosed() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
this.curveLoading = false;
},
getDefaultCurveRange() {
const end = new Date();
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000);
return [this.formatDateTime(start), this.formatDateTime(end)];
},
formatDateTime(date) {
const d = new Date(date);
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
},
formatCurveTime(value) {
if (value === undefined || value === null || value === "") {
return "";
}
const raw = String(value).trim();
const normalized = raw
.replace("T", " ")
.replace(/\.\d+/, "")
.replace(/Z$/, "")
.replace(/([+-]\d{2}:?\d{2})$/, "")
.trim();
const matched = normalized.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
if (matched) {
return `${matched[1]} ${matched[2]}`;
}
return normalized.slice(0, 16);
},
loadCurveData() {
if (!this.curveQuery.siteId || !this.curveQuery.pointId) {
this.$message.warning("点位信息不完整，无法查询曲线");
return;
}
if (!this.curveCustomRange || this.curveCustomRange.length !== 2) {
this.$message.warning("请选择查询时间范围");
return;
}
this.curveQuery.startTime = this.curveCustomRange[0];
this.curveQuery.endTime = this.curveCustomRange[1];
const query = {
siteId: this.curveQuery.siteId,
pointId: this.curveQuery.pointId,
pointType: "data",
rangeType: "custom",
startTime: this.curveQuery.startTime,
endTime: this.curveQuery.endTime,
};
this.curveLoading = true;
getPointConfigCurve(query)
.then((response) => {
const rows = response?.data || [];
this.renderCurveChart(rows);
})
.catch(() => {
this.renderCurveChart([]);
})
.finally(() => {
this.curveLoading = false;
});
},
renderCurveChart(rows = []) {
if (!this.curveChart) return;
const xData = rows.map((item) => this.formatCurveTime(item.dataTime));
const yData = rows.map((item) => item.pointValue);
this.curveChart.clear();
this.curveChart.setOption({
legend: {},
grid: {
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
textStyle: {
color: "#333333",
},
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: this.curveDialogTitle,
type: "line",
data: yData,
connectNulls: true,
},
],
});
if (!rows.length) {
this.$message.warning("当前时间范围暂无曲线数据");
}
},
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())}`;
},
getEmsDeviceList() {
return getDeviceList(this.siteId)
.then((response) => {
const list = response?.data || [];
this.emsDeviceList = list.filter((item) => item.deviceCategory === "EMS");
})
.catch(() => {
this.emsDeviceList = [];
});
},
updateData() {
this.loading = true;
Promise.all([getProjectDisplayData(this.siteId), this.getEmsDeviceList()])
.then(([response]) => {
this.displayData = response?.data || [];
})
.finally(() => {
this.loading = false;
});
},
init() {
this.updateData();
this.updateInterval(this.updateData);
},
},
beforeDestroy() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
},
};
</script>
<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;
}
.device-info-col {
cursor: pointer;
}
.field-click-wrapper {
width: 100%;
}
.device-info-col.field-disabled {
cursor: not-allowed;
opacity: 0.8;
}
.curve-tools {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.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>

70
src/views/ems/dzjk/sbjk/index.vue
View File

@ -1,5 +1,7 @@
<template>
<div class="ems-dashboard-editor-container ems-third-menu-container" v-loading="loading">
<div
class="ems-dashboard-editor-container ems-content-container-padding sbjk-ems-dashboard-editor-container ems-third-menu-container"
>
<el-menu
class="ems-third-menu"
:default-active="$route.name"
@ -7,64 +9,54 @@
text-color="#666666"
active-text-color="#ffffff"
>
<el-menu-item :index="item.name" v-for="(item,index) in categoryRouter" :key="index+'dzjkChildrenRoute'">
<router-link style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
<el-menu-item
:index="item.name"
v-for="(item, index) in childrenRoute"
:key="index + 'dzjkChildrenRoute'"
>
<router-link
style="height: 100%; width: 100%; display: block"
:to="{ path: item.path, query: $route.query }"
>
{{ item.meta.title }}
</router-link>
</el-menu-item>
</el-menu>
<div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
<div
class="ems-content-container ems-content-container-padding sbjk-ems-content-container"
>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { dzjk } from '@/router/ems'
import {mapState} from "vuex";
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkSbjk').children//获取到单站监控-设备监控下面的字路由
import { dzjk } from "@/router/ems";
const childrenRoute = dzjk[0].children.find(
(item) => item.name === "DzjkSbjk"
).children; //获取到单站监控-设备监控下面的字路由
console.log("设备监控子路由", childrenRoute);
export default {
name:'DzjkSbjk',
mixins:[getQuerySiteId],
computed:{
...mapState({
zdDeviceCategoryOptions: state => state.ems.zdDeviceCategoryOptions,
}),
locationSiteCategory(){
return this.zdDeviceCategoryOptions[this.siteId] || []
},
categoryRouter(){
const routeData =this.childrenRoute.filter(item=>this.locationSiteCategory.includes(item.meta.deviceCategory))
if(this.siteId && routeData.length > 0 && this.locationSiteCategory && this.locationSiteCategory.length >1){
const locationPageDeviceCategory = this.$route.meta?.deviceCategory || ''
if(!routeData.some(item=> item.meta.deviceCategory===locationPageDeviceCategory)){
this.$router.replace({path:'/dzjk/sbjk/ssyx',query:this.$route.query})
}
}
return routeData
}
},
name: "DzjkSbjk",
data() {
return {
childrenRoute,
activeMenu:'',
loading:false,
}
activeMenu: "",
};
},
methods:{
init(){
this.loading=true
this.$store.dispatch('getSiteDeviceCategory',this.siteId).finally(()=>this.loading=false)
}
}
}
mounted() {
console.log("当前设备监控页面路由", this.$route);
},
};
</script>
<style scoped lang="scss">
.sbjk-ems-dashboard-editor-container {
display: flex;
background: #ffffff;
}
.sbjk-ems-content-container {
margin-top: 0;
padding-top: 0;

743
src/views/ems/dzjk/sbjk/pcs/index.vue
View File

@ -1,709 +1,138 @@
<template>
<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 filteredPcsList"
:key="pcsIndex + 'PcsHome'"
style="margin-bottom: 25px"
>
<el-card
:class="handleCardClass(pcsItem)"
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
shadow="always"
>
<div v-loading="loading" class="pcs-ems-dashboard-editor-container">
<!-- 顶部六个方块-->
<real-time-base-info :data="runningHeadData"/>
<div v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'" style="margin-bottom:25px;">
<el-card :class="{
'warning-card-container':pcsItem.workStatus === '1',
'timing-card-container':pcsItem.workStatus === '2',
'running-card-container':!['1','2'].includes(pcsItem.workStatus)
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
shadow="always">
<div slot="header">
<span class="large-title"
>{{ pcsItem.deviceName }}</span
>
<span class="large-title">{{pcsIndex+1}}#{{pcsItem.deviceName}}</span>
<div class="info">
<div v-if="(($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[pcsItem.communicationStatus]">
{{ (($store.state.ems && $store.state.ems.communicationStatusOptions) || {})[pcsItem.communicationStatus] }}
<div>
{{
$store.state.ems.communicationStatusOptions[
pcsItem.communicationStatus
]
}}
</div>
<div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
</div>
<div class="alarm">
<el-badge :hidden="!pcsItem.alarmNum" :value="pcsItem.alarmNum || 0" class="item">
<i
class="el-icon-message-solid alarm-icon"
@click="pointDetail(pcsItem,'alarmPoint')"
></i>
<el-badge :value="pcsItem.alarmNum || 0" class="item">
<i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
</el-badge>
</div>
</div>
<div class="descriptions-main">
<el-descriptions :colon="false" :column="4" direction="vertical">
<el-descriptions-item
contentClassName="descriptions-direction work-status"
:span="1"
label="工作状态"
labelClassName="descriptions-label"
>
<span
class="pointer"
:class="{ 'field-disabled': !hasFieldPointId(pcsItem, 'workStatus') }"
@click="handlePcsFieldClick(pcsItem, 'workStatus', '工作状态')"
>
{{ formatDictValue((PCSWorkStatusOptions || {}), pcsItem.workStatus) }}
</span>
</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="并网状态"
labelClassName="descriptions-label"
>
<span
class="pointer"
:class="{ 'field-disabled': !hasFieldPointId(pcsItem, 'gridStatus') }"
@click="handlePcsFieldClick(pcsItem, 'gridStatus', '并网状态')"
>
{{ formatDictValue((($store.state.ems && $store.state.ems.gridStatusOptions) || {}), pcsItem.gridStatus) }}
</span>
</el-descriptions-item
>
<el-descriptions-item
:contentClassName="`descriptions-direction ${
pcsItem.deviceStatus === '1' ? 'save' : 'danger'
}`"
:span="1"
label="设备状态"
labelClassName="descriptions-label"
>
<span
class="pointer"
:class="{ 'field-disabled': !hasFieldPointId(pcsItem, 'deviceStatus') }"
@click="handlePcsFieldClick(pcsItem, 'deviceStatus', '设备状态')"
>
{{ formatDictValue((($store.state.ems && $store.state.ems.deviceStatusOptions) || {}), pcsItem.deviceStatus) }}
</span>
</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="控制模式"
labelClassName="descriptions-label"
>
<span
class="pointer"
:class="{ 'field-disabled': !hasFieldPointId(pcsItem, 'controlMode') }"
@click="handlePcsFieldClick(pcsItem, 'controlMode', '控制模式')"
>
{{ formatDictValue((($store.state.ems && $store.state.ems.controlModeOptions) || {}), pcsItem.controlMode) }}
</span>
</el-descriptions-item
>
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="并网状态" labelClassName="descriptions-label">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态" labelClassName="descriptions-label">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="控制模式" labelClassName="descriptions-label">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
</el-descriptions>
</div>
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions
:colon="false"
:column="4"
contentClassName="descriptions-direction"
direction="vertical"
labelClassName="descriptions-label"
>
<el-descriptions-item
v-for="(item, index) in infoData"
:key="index + 'pcsInfoData'"
:label="item.label"
:span="1"
>
<span
class="pointer"
:class="{ 'field-disabled': !hasFieldPointId(pcsItem, item.attr) }"
@click="handlePcsFieldClick(pcsItem, item.attr, item.label)"
>
<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>
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction" direction="vertical" labelClassName="descriptions-label">
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1">
<span class="pointer" @click="showChart(item.pointName || '','PCS',pcsItem.deviceId)">
{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
</span>
</el-descriptions-item>
</el-descriptions>
</div>
<div
v-for="(item, index) in pcsItem.pcsBranchInfoList"
:key="index + 'pcsBranchInfoList'"
class="descriptions-main"
>
<el-descriptions
:colon="false"
:column="4"
contentClassName="descriptions-direction keep"
direction="vertical"
labelClassName="descriptions-label"
>
<el-descriptions-item
:label="'支路' + (index + 1)"
:span="4"
contentClassName="descriptions-direction keep"
labelClassName="descriptions-label"
>{{ item.dischargeStatus }}
</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="直流功率"
labelClassName="descriptions-label"
>
<span
class="pointer"
:class="{ 'field-disabled': !item.dcPowerPointId }"
@click="openCurveDialogByPointId(item.dcPowerPointId, '直流功率')"
>{{ item.dcPower }}kW</span
>
<div v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'" class="descriptions-main">
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction keep" direction="vertical" labelClassName="descriptions-label">
<el-descriptions-item :label="'支路'+(index+1)" :span="4" contentClassName="descriptions-direction keep" labelClassName="descriptions-label">{{item.dischargeStatus}}</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流功率" labelClassName="descriptions-label">
<span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span>
</el-descriptions-item>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="直流电压"
labelClassName="descriptions-label"
>
<span
class="pointer"
:class="{ 'field-disabled': !item.dcVoltagePointId }"
@click="openCurveDialogByPointId(item.dcVoltagePointId, '直流电压')"
>{{ item.dcVoltage }}V</span
>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电压" labelClassName="descriptions-label">
<span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span>
</el-descriptions-item>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="直流电流"
labelClassName="descriptions-label"
>
<span
class="pointer"
:class="{ 'field-disabled': !item.dcCurrentPointId }"
@click="openCurveDialogByPointId(item.dcCurrentPointId, '直流电流')"
>{{ item.dcCurrent }}A</span
>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电流" labelClassName="descriptions-label">
<span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
</div>
<point-table ref="pointTable"/>
<el-dialog
:visible.sync="curveDialogVisible"
:title="curveDialogTitle"
width="1000px"
append-to-body
class="ems-dialog"
:close-on-click-modal="false"
destroy-on-close
@opened="handleCurveDialogOpened"
@closed="handleCurveDialogClosed"
>
<div class="curve-tools">
<el-date-picker
v-model="curveCustomRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 440px"
/>
<el-button type="primary" size="mini" :loading="curveLoading" @click="loadCurveData">查询</el-button>
</div>
<div v-loading="curveLoading" ref="curveChartRef" style="height: 380px;"></div>
</el-dialog>
<el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
<!-- 电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import * as echarts from "echarts";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
import pointChart from "./../PointChart.vue";
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getPcsNameList, getProjectDisplayData} from "@/api/ems/dzjk";
import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import {mapState} from "vuex";
import {getPointConfigCurve} from "@/api/ems/site";
export default {
name: "DzjkSbjkPcs",
components: {PointTable},
name:'DzjkSbjkPcs',
components:{RealTimeBaseInfo,pointChart},
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,
displayData: [],
pcsDeviceList: [],
selectedPcsId: "",
curveDialogVisible: false,
curveDialogTitle: "点位曲线",
curveChart: null,
curveLoading: false,
curveCustomRange: [],
curveQuery: {
siteId: "",
pointId: "",
pointType: "data",
rangeType: "custom",
startTime: "",
endTime: "",
},
pcsList: [{
deviceId: "",
deviceName: "PCS",
dataUpdateTime: "-",
alarmNum: 0,
pcsBranchInfoList: [],
}],
runningHeadData:{},//运行信息
pcsList:[],
infoData:[
{
label: "总交流有功功率",
attr: "totalActivePower",
unit: "kW",
pointName: "总交流有功功率",
},
{
label: "当天交流充电量",
attr: "dailyAcChargeEnergy",
unit: "kWh",
pointName: "当天交流充电量 (kWh)",
},
{label: "A相电压", attr: "aPhaseVoltage", unit: "V", pointName: ""},
{
label: "A相电流",
attr: "aPhaseCurrent",
unit: "A",
pointName: "A相电流",
},
{
label: "总交流无功功率",
attr: "totalReactivePower",
unit: "kVar",
pointName: "总交流无功功率",
},
{
label: "当天交流放电量",
attr: "dailyAcDischargeEnergy",
unit: "kWh",
pointName: "当天交流放电量 (kWh)",
},
{label: "B相电压", attr: "bPhaseVoltage", unit: "V", pointName: ""},
{
label: "B相电流",
attr: "bPhaseCurrent",
unit: "A",
pointName: "B相电流",
},
{
label: "总交流视在功率",
attr: "totalApparentPower",
unit: "kVA",
pointName: "总交流视在功率",
},
{
label: "PCS模块温度",
attr: "pcsModuleTemperature",
unit: "&#8451;",
pointName: "",
},
{label: "C相电压", attr: "cPhaseVoltage", unit: "V", pointName: ""},
{
label: "C相电流",
attr: "cPhaseCurrent",
unit: "A",
pointName: "C相电流",
},
{
label: "总交流功率因数",
attr: "totalPowerFactor",
unit: "",
pointName: "总交流功率因数",
},
{
label: "PCS环境温度",
attr: "pcsEnvironmentTemperature",
unit: "&#8451;",
pointName: "",
},
{
label: "交流频率",
attr: "acFrequency",
unit: "Hz",
pointName: "交流频率",
},
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW',pointName:'总交流有功电率'},
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh',pointName:'当天交流充电量 (kWh)'},
{label:'A相电压',attr:'aPhaseVoltage',unit:'V',pointName:''},
{label:'A相电流',attr:'aPhaseCurrent',unit:'A',pointName:'A相电流'},
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar',pointName:'总交流无功电率'},
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh',pointName:'当天交流放电量 (kWh)'},
{label:'B相电压',attr:'bPhaseVoltage',unit:'V',pointName:''},
{label:'B相电流',attr:'bPhaseCurrent',unit:'A',pointName:'B相电流'},
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA',pointName:'总交流视在功率'},
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;',pointName:''},
{label:'C相电压',attr:'cPhaseVoltage',unit:'V',pointName:''},
{label:'C相电流',attr:'cPhaseCurrent',unit:'A',pointName:'C相电流'},
{label:'总交流功率因数',attr:'totalPowerFactor',unit:'',pointName:'总交流功率因数'},
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;',pointName:''},
{label:'交流频率',attr:'acFrequency',unit:'Hz',pointName:'交流频率'}
],
};
pcsBranchList:[],//pcs的支路列表
}
},
methods:{
displayValue(value) {
return value === undefined || value === null || value === "" ? "-" : value;
//todo 后续需要新增设备id
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
isPointLoading(value) {
return this.loading && (value === undefined || value === null || value === "" || value === "-");
//6个方块数据
getRunningHeadData(){
getRunningHeadInfo(this.siteId).then(response => {
this.runningHeadData = response?.data || {}
})
},
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 = 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) {
const {deviceId} = row
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'PCS'}, dataType)
},
hasFieldPointId(pcsItem, fieldName) {
const row = this.getFieldRow(pcsItem, fieldName);
return !!String(row?.dataPoint || "").trim();
},
getFieldRow(pcsItem, fieldName) {
const key = String(fieldName || "").trim();
const map = pcsItem?._fieldRowMap || {};
return map[key] || null;
},
handlePcsFieldClick(pcsItem, fieldName, title) {
const row = this.getFieldRow(pcsItem, fieldName);
const pointId = String(row?.dataPoint || "").trim();
this.openCurveDialogByPointId(pointId, title || fieldName);
},
openCurveDialogByPointId(pointId, title) {
const normalizedPointId = String(pointId || "").trim();
if (!normalizedPointId) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
const range = this.getDefaultCurveRange();
this.curveCustomRange = range;
this.curveDialogTitle = `点位曲线 - ${title || normalizedPointId}`;
this.curveQuery = {
siteId: this.siteId,
pointId: normalizedPointId,
pointType: "data",
rangeType: "custom",
startTime: range[0],
endTime: range[1],
};
this.curveDialogVisible = true;
},
handleCurveDialogOpened() {
if (!this.curveChart && this.$refs.curveChartRef) {
this.curveChart = echarts.init(this.$refs.curveChartRef);
}
this.loadCurveData();
},
handleCurveDialogClosed() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
this.curveLoading = false;
},
getDefaultCurveRange() {
const end = new Date();
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000);
return [this.formatDateTime(start), this.formatDateTime(end)];
},
formatDateTime(date) {
const d = new Date(date);
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
},
formatCurveTime(value) {
if (value === undefined || value === null || value === "") {
return "";
}
const raw = String(value).trim();
const normalized = raw
.replace("T", " ")
.replace(/\.\d+/, "")
.replace(/Z$/, "")
.replace(/([+-]\d{2}:?\d{2})$/, "")
.trim();
const matched = normalized.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
if (matched) {
return `${matched[1]} ${matched[2]}`;
}
return normalized.slice(0, 16);
},
loadCurveData() {
if (!this.curveQuery.siteId || !this.curveQuery.pointId) {
this.$message.warning("点位信息不完整，无法查询曲线");
return;
}
if (!this.curveCustomRange || this.curveCustomRange.length !== 2) {
this.$message.warning("请选择查询时间范围");
return;
}
this.curveQuery.startTime = this.curveCustomRange[0];
this.curveQuery.endTime = this.curveCustomRange[1];
const query = {
siteId: this.curveQuery.siteId,
pointId: this.curveQuery.pointId,
pointType: "data",
rangeType: "custom",
startTime: this.curveQuery.startTime,
endTime: this.curveQuery.endTime,
};
this.curveLoading = true;
getPointConfigCurve(query).then((response) => {
const rows = response?.data || [];
this.renderCurveChart(rows);
}).catch(() => {
this.renderCurveChart([]);
}).finally(() => {
this.curveLoading = false;
});
},
renderCurveChart(rows = []) {
if (!this.curveChart) return;
const xData = rows.map(item => this.formatCurveTime(item.dataTime));
const yData = rows.map(item => item.pointValue);
this.curveChart.clear();
this.curveChart.setOption({
legend: {},
grid: {
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
textStyle: {
color: "#333333",
},
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: this.curveDialogTitle,
type: "line",
data: yData,
connectNulls: true,
},
],
});
if (!rows.length) {
this.$message.warning("当前时间范围暂无曲线数据");
}
},
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 rowMap = this.getFieldRowMap(rows, deviceId);
return Object.keys(rowMap).reduce((acc, fieldName) => {
const row = rowMap[fieldName] || {};
acc[fieldName] = row.fieldValue;
return acc;
}, {});
},
getFieldRowMap(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;
});
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;
}
});
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 = [];
});
},
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),
_fieldRowMap: {
...this.getFieldRowMap(this.getModuleRows('SBJK_PCS', '电参量'), device.deviceId || device.id || this.siteId),
...this.getFieldRowMap(this.getModuleRows('SBJK_PCS', '状态'), device.deviceId || device.id || this.siteId),
},
dataUpdateTime: this.getLatestTime('SBJK_PCS'),
alarmNum: 0,
pcsBranchInfoList: [],
}));
getPcsList(){
this.loading = true
getPcsDetailInfo(this.siteId).then(response => {
const data = response?.data || {}
this.pcsList = JSON.parse(JSON.stringify(data))
}).finally(()=>this.loading = false)
},
updateData(){
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));
this.getRunningHeadData()
this.getPcsList()
},
init(){
this.updateData();
this.updateInterval(this.updateData);
},
},
beforeDestroy() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
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;
}
.field-disabled {
cursor: not-allowed;
opacity: 0.8;
}
.curve-tools {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.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>

164
src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
View File

@ -1,151 +1,107 @@
<template>
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="card-title">PCS有功功率/PCS无功功率</span>
<span class="card-title">储能功率曲线</span>
</div>
<div ref="chartRef" style="height: 360px" />
<div style="height: 360px" id="cnglqxChart"/>
</el-card>
</template>
<style scoped lang="scss"></style>
<script>
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { getPointConfigCurve } from "@/api/ems/site";
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {storagePower} from '@/api/ems/dzjk'
export default {
mixins: [resize],
props: {
displayData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
};
chart: null
}
},
mounted() {
this.chart = echarts.init(this.$refs.chartRef);
this.chart = echarts.init(document.querySelector('#cnglqxChart'))
},
beforeDestroy() {
if (!this.chart) {
return;
return
}
this.chart.dispose();
this.chart = null;
this.chart.dispose()
this.chart = null
},
methods: {
init(siteId, timeRange) {
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
init(siteId){
this.chart.showLoading()
const x = []
const data1 =[],data2 =[]
storagePower(siteId).then(response => {
const source = response?.data?.energyStoragePowList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data1.push(item.pcsTotalActPower)
data2.push(item.pcsTotalReactivePower)
})
.then((response) => {
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]))
};
this.setOption(x,data1,data2)
}).finally(()=>{
this.chart.hideLoading()
})
.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({
setOption(x,data1,data2) {
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
legend: {
left: "center",
top: "5",
itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
left: 'center',
top: '10',
},
grid: {
containLabel: true,
containLabel: true
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "cross",
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
textStyle:{
color:"#333333",
},
xAxis: { type: "time" },
xAxis: {type:'category',data:x},
yAxis: {
type: "value",
type: 'value',
},
dataZoom: [
{
type: "inside",
type: 'inside',
start: 0,
end: 100,
end: 100
},
{
start: 0,
end: 100,
},
end: 100
}
],
series: seriesData.map((item) => ({
type: "line",
name: item.name,
showSymbol: false,
smooth: true,
series: [
{
name:'PCS实时有功功率',
type: 'line',
areaStyle: {
opacity: 0.35
color:'#FFBD00'
},
data: item.data
})),
}, true);
data: data1,
},{
name:'PCS实时无功功率',
type: 'line',
areaStyle: {
color: '#3C81FF'
},
},
};
data: data2
}]
})
}
}
}
</script>

155
src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
View File

@ -1,138 +1,99 @@
<template>
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="card-title">平均SOC</span>
<span class="card-title">电池平均SOC</span>
</div>
<div ref="chartRef" style="height: 360px" />
<div style="height: 360px" id="dcpjsocChart"/>
</el-card>
</template>
<style scoped lang="scss"></style>
<script>
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { getPointConfigCurve } from "@/api/ems/site";
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {batteryAveSoc} from '@/api/ems/dzjk'
export default {
mixins: [resize],
props: {
displayData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
};
chart: null
}
},
mounted() {
this.chart = echarts.init(this.$refs.chartRef);
this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
},
beforeDestroy() {
if (!this.chart) {
return;
return
}
this.chart.dispose();
this.chart = null;
this.chart.dispose()
this.chart = null
},
methods: {
init(siteId,timeRange) {
const [startTime='', endTime=''] = timeRange;
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)
init(siteId){
this.chart.showLoading()
const x = []
const data =[]
batteryAveSoc(siteId).then(response => {
const source = response?.data?.batteryAveSOCList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data.push(item.batterySOC)
})
this.setOption(x,data)
}).finally(()=>{
this.chart.hideLoading()
})
.then((response) => {
const list = response?.data || [];
this.setOption(
list
.map((item) => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
.filter((item) => item[0] && !Number.isNaN(item[1]))
);
});
},
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",
top: "5",
itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
setOption(x,data) {
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
// legend: {
// left: 'center',
// bottom: '10',
// },
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
containLabel: true,
},
tooltip: {
show:true,
trigger: "axis",
axisPointer: {
type: "cross",
}
containLabel: true
},
textStyle:{
color:"#333333",
},
xAxis: { type: "time" },
xAxis: {type:'category',data:x},
yAxis: {
type: "value",
type: 'value',
},
dataZoom: [
{
type: "inside",
type: 'inside',
start: 0,
end: 100,
end: 100
},
{
start: 0,
end: 100,
},
end: 100
}
],
series: [
{
type: "line",
name: `平均SOC`,
showSymbol: false,
smooth: true,
name:'电池平均SOC',
data: data,
type: 'line',
areaStyle: {
opacity: 0.35
},
data,
},
],
},true);
},
},
};
color:'#FFBD00'
}
}]
})
}
}
}
</script>

150
src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
View File

@ -1,139 +1,99 @@
<template>
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="card-title">电池平均温度</span>
</div>
<div ref="chartRef" style="height: 360px" />
<div style="height: 360px" id="dcpjwdChart"/>
</el-card>
</template>
<style scoped lang="scss"></style>
<script>
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { getPointConfigCurve } from "@/api/ems/site";
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {batteryAveTemp} from '@/api/ems/dzjk'
export default {
mixins: [resize],
props: {
displayData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
};
chart: null
}
},
mounted() {
this.chart = echarts.init(this.$refs.chartRef);
this.chart = echarts.init(document.querySelector('#dcpjwdChart'))
},
beforeDestroy() {
if (!this.chart) {
return;
return
}
this.chart.dispose();
this.chart = null;
this.chart.dispose()
this.chart = null
},
methods: {
init(siteId,timeRange) {
const [startTime='', endTime=''] = timeRange;
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)
init(siteId){
this.chart.showLoading()
const x = []
const data1 =[],data2 =[]
batteryAveTemp(siteId).then(response => {
const source = response?.data?.batteryAveTempList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data1.push(item.batteryTemp)
})
this.setOption(x,data1,data2)
}).finally(()=>{
this.chart.hideLoading()
})
.then((response) => {
const list = response?.data || [];
this.setOption(
list
.map((item) => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
.filter((item) => item[0] && !Number.isNaN(item[1]))
);
});
},
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",
top: "5",
itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
setOption(x,data) {
this.chart.setOption({
color:['#3C81FF'],
// legend: {
// left: 'center',
// bottom: '10',
// },
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
containLabel: true,
},
tooltip: {
show:true,
trigger: "axis",
axisPointer: {
type: "cross",
}
containLabel: true
},
textStyle:{
color:"#333333",
},
xAxis: { type: "time" },
xAxis: {type:'category',data:x},
yAxis: {
type: "value",
type: 'value',
},
dataZoom: [
{
type: "inside",
type: 'inside',
start: 0,
end: 100,
end: 100
},
{
start: 0,
end: 100,
},
end: 100
}
],
series: [
{
type: "line",
name: `电池平均温度`,
showSymbol: false,
smooth: true,
name:'电池平均温度',
data: data,
type: 'line',
areaStyle: {
opacity: 0.35
color:'#3C81FF'
},
data,
},
],
},true);
},
},
};
}]
})
}
}
}
</script>

151
src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
View File

@ -1,141 +1,96 @@
<template>
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="card-title">PCS最高温度</span>
<span class="card-title">PCS平均温度</span>
</div>
<div ref="chartRef" style="height: 360px" />
<div style="height: 360px" id="pocpjwdChart"/>
</el-card>
</template>
<style scoped lang="scss"></style>
<script>
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { getPointConfigCurve } from "@/api/ems/site";
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {stackAveTemp} from '@/api/ems/dzjk'
export default {
mixins: [resize],
props: {
displayData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
seriesName: "PCS最高温度"
};
chart: null
}
},
mounted() {
this.chart = echarts.init(this.$refs.chartRef);
this.chart = echarts.init(document.querySelector('#pocpjwdChart'))
},
beforeDestroy() {
if (!this.chart) {
return;
return
}
this.chart.dispose();
this.chart = null;
this.chart.dispose()
this.chart = null
},
methods: {
init(siteId,timeRange) {
const [startTime='', endTime=''] = timeRange;
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)
init(siteId){
this.chart.showLoading()
const x = []
const data =[]
stackAveTemp(siteId).then(response => {
const source = response?.data?.stackAveTempList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data.push(item.temp)
})
this.setOption(x,data)
}).finally(()=>{
this.chart.hideLoading()
})
.then((response) => {
const list = response?.data || [];
this.setOption(
list
.map((item) => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
.filter((item) => item[0] && !Number.isNaN(item[1]))
);
});
},
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",
top: "5",
itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
setOption(x,data) {
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
containLabel: true,
},
tooltip: {
show:true,
trigger: "axis",
axisPointer: {
type: "cross",
}
containLabel: true
},
textStyle:{
color:"#333333",
},
xAxis: { type: "time" },
xAxis: {type:'category',data:x},
yAxis: {
type: "value",
type: 'value',
},
dataZoom: [
{
type: "inside",
type: 'inside',
start: 0,
end: 100,
end: 100
},
{
start: 0,
end: 100,
},
end: 100
}
],
series: [
{
type: "line",
name: this.seriesName,
showSymbol: false,
smooth: true,
name:'PCS平均温度',
data: data,
type: 'line',
areaStyle: {
opacity: 0.35
},
data
color:'#FFBD00'
}
],
},true);
},
},
};
}]
})
}
}
}
</script>

250
src/views/ems/dzjk/sbjk/ssyx/index.vue
View File

@ -2,283 +2,67 @@
<template>
<div class="ssyx-ems-dashboard-editor-container">
<!-- 6个方块-->
<real-time-base-info :display-data="runningDisplayData" :loading="runningHeadLoading" @field-click="handleHeadFieldClick"/>
<!-- 时间选择 -->
<date-range-select ref="dateRangeSelect" @updateDate="updateDate" style="margin-top:20px;"/>
<real-time-base-info :data="runningHeadData"/>
<!-- echart图表-->
<el-row :gutter="32" style="background:#fff;margin:30px 0;">
<el-col :xs="24" :sm="12" :lg="12">
<cnglqx-chart ref='cnglqx' :display-data="runningDisplayData"/>
<cnglqx-chart ref='cnglqx'/>
</el-col>
<el-col :xs="24" :sm="12" :lg="12">
<pocpjwd-chart ref='pocpjwd' :display-data="runningDisplayData"/>
<pocpjwd-chart ref='pocpjwd'/>
</el-col>
</el-row>
<el-row :gutter="32" style="margin:30px 0;">
<el-col :xs="24" :sm="12" :lg="12">
<dcpjsoc-chart ref="dcpjsoc" :display-data="runningDisplayData"/>
<dcpjsoc-chart ref="dcpjsoc"/>
</el-col>
<el-col :xs="24" :sm="12" :lg="12">
<dcpjwd-chart ref="dcpjwd" :display-data="runningDisplayData"/>
<dcpjwd-chart ref="dcpjwd"/>
</el-col>
</el-row>
<el-dialog
:visible.sync="curveDialogVisible"
:title="curveDialogTitle"
width="1000px"
append-to-body
class="ems-dialog"
:close-on-click-modal="false"
destroy-on-close
@opened="handleCurveDialogOpened"
@closed="handleCurveDialogClosed"
>
<div class="curve-tools">
<el-date-picker
v-model="curveCustomRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 440px"
/>
<el-button type="primary" size="mini" :loading="curveLoading" @click="loadCurveData">查询</el-button>
</div>
<div v-loading="curveLoading" ref="curveChartRef" style="height: 380px;"></div>
</el-dialog>
</div>
</template>
<style scoped lang="scss">
.curve-tools {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
</style>
<script>
import * as echarts from "echarts";
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
import CnglqxChart from './CnglqxChart.vue'
import PocpjwdChart from './PocpjwdChart.vue'
import DcpjwdChart from './DcpjwdChart.vue'
import DcpjsocChart from './DcpjsocChart.vue'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getProjectDisplayData} from '@/api/ems/dzjk'
import {getPointConfigCurve} from "@/api/ems/site";
import {getRunningHeadInfo} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkSsyx',
components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart,DateRangeSelect},
components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
runningDisplayData: [], //单站监控项目配置展示数据
timeRange:[],
isInit:true,
runningHeadLoading: false,
curveDialogVisible: false,
curveDialogTitle: "点位曲线",
curveChart: null,
curveLoading: false,
curveCustomRange: [],
curveQuery: {
siteId: "",
pointId: "",
pointType: "data",
rangeType: "custom",
startTime: "",
endTime: "",
},
}
},
beforeDestroy() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
runningHeadData:{},//运行信息
}
},
methods:{
handleHeadFieldClick(item) {
const pointId = String(item?.pointId || item?.raw?.dataPoint || "").trim();
if (!pointId) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
this.openCurveDialog({
pointId,
title: item?.title || item?.raw?.fieldName || pointId,
});
},
openCurveDialog({pointId, title}) {
const range = this.getDefaultCurveRange();
this.curveCustomRange = range;
this.curveDialogTitle = `点位曲线 - ${title || pointId}`;
this.curveQuery = {
siteId: this.siteId,
pointId,
pointType: "data",
rangeType: "custom",
startTime: range[0],
endTime: range[1],
};
this.curveDialogVisible = true;
},
handleCurveDialogOpened() {
if (!this.curveChart && this.$refs.curveChartRef) {
this.curveChart = echarts.init(this.$refs.curveChartRef);
}
this.loadCurveData();
},
handleCurveDialogClosed() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
this.curveLoading = false;
},
getDefaultCurveRange() {
const end = new Date();
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000);
return [this.formatDateTime(start), this.formatDateTime(end)];
},
formatDateTime(date) {
const d = new Date(date);
const pad = (num) => String(num).padStart(2, "0");
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
},
formatCurveTime(value) {
if (value === undefined || value === null || value === "") {
return "";
}
const raw = String(value).trim();
const normalized = raw
.replace("T", " ")
.replace(/\.\d+/, "")
.replace(/Z$/, "")
.replace(/([+-]\d{2}:?\d{2})$/, "")
.trim();
const matched = normalized.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
if (matched) {
return `${matched[1]} ${matched[2]}`;
}
return normalized.slice(0, 16);
},
loadCurveData() {
if (!this.curveQuery.siteId || !this.curveQuery.pointId) {
this.$message.warning("点位信息不完整，无法查询曲线");
return;
}
if (!this.curveCustomRange || this.curveCustomRange.length !== 2) {
this.$message.warning("请选择查询时间范围");
return;
}
this.curveQuery.startTime = this.curveCustomRange[0];
this.curveQuery.endTime = this.curveCustomRange[1];
const query = {
siteId: this.curveQuery.siteId,
pointId: this.curveQuery.pointId,
pointType: "data",
rangeType: "custom",
startTime: this.curveQuery.startTime,
endTime: this.curveQuery.endTime,
};
this.curveLoading = true;
getPointConfigCurve(query).then((response) => {
const rows = response?.data || [];
this.renderCurveChart(rows);
}).catch(() => {
this.renderCurveChart([]);
}).finally(() => {
this.curveLoading = false;
});
},
renderCurveChart(rows = []) {
if (!this.curveChart) return;
const xData = rows.map(item => this.formatCurveTime(item.dataTime));
const yData = rows.map(item => item.pointValue);
this.curveChart.clear();
this.curveChart.setOption({
legend: {},
grid: {
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
textStyle: {
color: "#333333",
},
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: this.curveDialogTitle,
type: "line",
data: yData,
connectNulls: true,
},
],
});
if (!rows.length) {
this.$message.warning("当前时间范围暂无曲线数据");
}
},
//6个方块数据
getRunningHeadData(){
this.runningHeadLoading = true
return getProjectDisplayData(this.siteId).then((displayResponse) => {
this.runningDisplayData = displayResponse?.data || []
}).finally(() => {
this.runningHeadLoading = false
getRunningHeadInfo(this.siteId).then(response => {
this.runningHeadData = response?.data || {}
})
},
// 更新时间范围 重置图表
updateDate(data){
this.timeRange=data
!this.isInit && this.updateChart()
this.isInit = false
},
updateChart(){
this.$refs.cnglqx.init(this.siteId,this.timeRange||[])
this.$refs.pocpjwd.init(this.siteId,this.timeRange||[])
this.$refs.dcpjsoc.init(this.siteId,this.timeRange||[])
this.$refs.dcpjwd.init(this.siteId,this.timeRange||[])
this.updateInterval(this.updateData)
},
updateData(){
this.getRunningHeadData().finally(() => {
this.updateChart()
})
this.getRunningHeadData()
this.$refs.cnglqx.init(this.siteId)
this.$refs.pocpjwd.init(this.siteId)
this.$refs.dcpjsoc.init(this.siteId)
this.$refs.dcpjwd.init(this.siteId)
},
init(){
this.$refs.dateRangeSelect.init(true)
this.$nextTick(()=>{
this.updateData()
this.updateInterval(this.updateData)
})
}
}

153
src/views/ems/dzjk/sbjk/xf/index.vue
View File

@ -1,153 +0,0 @@
<template>
<div>
<el-card
v-for="(item,index) in list"
:key="index+'ylLise'"
class="sbjk-card-container running-card-container"
:class="{
'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
'running-card-container':item.emsCommunicationStatus === '0'
}"
shadow="always">
<div slot="header">
<span class="large-title">{{ item.deviceName }}</span>
<div class="info">
<div>
{{
$store.state.ems.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>
</div>
<el-row class="device-info-row">
<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">
<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>
</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 {getXfDataList} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
export default {
name: 'DzjkSbjkXf',
mixins: [getQuerySiteId, intervalUpdate],
components: {pointChart, PointTable},
data() {
return {
loading: false,
list: [],
tempData: [
{title: '主电源备用电池状态', attr: 'dczt', unit: ''},
{title: '手自动状态延时状态', attr: 'yszt', unit: ''},
{title: '启动喷洒气体喷洒状态', attr: 'pszt', unit: ''},
{title: '压力开关状态电磁阀状态', attr: 'dcfzt', unit: ''},
]
}
},
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
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'XF'}, dataType)
},
showChart(pointName, deviceId) {
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'XF', deviceId})
},
updateData() {
this.loading = true
getXfDataList(this.siteId).then(response => {
this.list = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {
this.loading = false
})
},
init() {
this.updateData()
this.updateInterval(this.updateData)
}
},
mounted() {
}
}
</script>
<style scoped lang="scss">
.sbjk-card-container {
&:not(:last-child) {
margin-bottom: 25px;
}
.el-row {
background-color: #ffffff;
border: 1px solid #eeeeee;
font-size: 14px;
line-height: 16px;
color: #333333;
.el-col {
padding: 12px 0;
text-align: center;
position: relative;
}
.el-col {
border-bottom: 1px solid #eeeeee;
}
.el-col:not(:nth-child(3n)) {
border-right: 1px solid #eeeeee;
}
}
}
.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>

543
src/views/ems/dzjk/sbjk/yl/index.vue
View File

@ -1,471 +1,130 @@
<template>
<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="(group, index) in filteredSectionGroups"
:key="index + 'ylSection'"
class="sbjk-card-container list running-card-container"
shadow="always"
>
<div slot="header">
<span class="large-title">{{ group.displayName || group.sectionName || "冷却" }}</span>
<div class="info">
<div>状态：{{ group.statusText }}</div>
<div>数据更新时间：{{ group.updateTimeText }}</div>
</div>
</div>
<el-row class="device-info-row">
<el-col
v-for="(item, dataIndex) in group.items"
:key="dataIndex + 'ylField'"
:span="8"
class="device-info-col"
:class="{ 'field-disabled': !item.pointId }"
>
<div class="field-click-wrapper" @click="handleFieldClick(item)">
<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>
</div>
</el-col>
</el-row>
</el-card>
<el-dialog
:visible.sync="curveDialogVisible"
:title="curveDialogTitle"
width="1000px"
append-to-body
class="ems-dialog"
:close-on-click-modal="false"
destroy-on-close
@opened="handleCurveDialogOpened"
@closed="handleCurveDialogClosed"
>
<div class="curve-tools">
<el-date-picker
v-model="curveCustomRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 440px"
/>
<el-button type="primary" size="mini" :loading="curveLoading" @click="loadCurveData">查询</el-button>
<template>
<div v-loading="loading">
<div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0','yl-normal-item-container':item.workMode === '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
<div class="header">
<div class="header-title">{{item.systemName}}</div>
<div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
<div>当前温度：<span class="header-values">{{item.currentTemperature}}&#8451;</span></div>
</div>
<div v-loading="curveLoading" ref="curveChartRef" style="height: 380px;"></div>
</el-dialog>
<div class="content">
<el-row>
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">{{tempDataItem.title}}：{{item[tempDataItem.attr]}}&#8451;</el-col>
</el-row>
</div>
</div>
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
</div>
</template>
<script>
import * as echarts from "echarts";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import { getProjectDisplayData } from "@/api/ems/dzjk";
import { getDeviceList, getPointConfigCurve } from "@/api/ems/site";
<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getCoolingDataList} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name: "DzjkSbjkYl",
name:'DzjkSbjkYl',
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
loading:false,
displayData: [],
selectedSectionKey: "",
coolingDeviceList: [],
curveDialogVisible: false,
curveDialogTitle: "点位曲线",
curveChart: null,
curveLoading: false,
curveCustomRange: [],
curveQuery: {
siteId: "",
pointId: "",
pointType: "data",
rangeType: "custom",
startTime: "",
endTime: "",
},
};
},
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());
list:[],
tempData:[
{title:'制热开启点',attr:'heatingStartPoint'},
{title:'制冷开启点',attr:'coolingStartPoint'},
{title:'高温告警点',attr:'highTempAlarmPoint'},
{title:'制热停止点',attr:'heatingStopPoint'},
{title:'制冷停止点',attr:'coolingStopPoint'},
{title:'低温告警点',attr:'lowTempAlarmPoint'},
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,
pointId: String(row?.dataPoint || "").trim(),
raw: row,
};
});
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:{
handleFieldClick(item) {
const pointId = String(item?.pointId || item?.raw?.dataPoint || "").trim();
if (!pointId) {
this.$message.warning("该字段未配置点位，无法查询曲线");
return;
}
this.openCurveDialog({
pointId,
title: item?.fieldName || pointId,
});
},
openCurveDialog({ pointId, title }) {
const range = this.getDefaultCurveRange();
this.curveCustomRange = range;
this.curveDialogTitle = `点位曲线 - ${title || pointId}`;
this.curveQuery = {
siteId: this.siteId,
pointId,
pointType: "data",
rangeType: "custom",
startTime: range[0],
endTime: range[1],
};
this.curveDialogVisible = true;
},
handleCurveDialogOpened() {
if (!this.curveChart && this.$refs.curveChartRef) {
this.curveChart = echarts.init(this.$refs.curveChartRef);
}
this.loadCurveData();
},
handleCurveDialogClosed() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
}
this.curveLoading = false;
},
getDefaultCurveRange() {
const end = new Date();
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000);
return [this.formatDateTime(start), this.formatDateTime(end)];
},
formatDateTime(date) {
const d = new Date(date);
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
},
formatCurveTime(value) {
if (value === undefined || value === null || value === "") {
return "";
}
const raw = String(value).trim();
const normalized = raw
.replace("T", " ")
.replace(/\.\d+/, "")
.replace(/Z$/, "")
.replace(/([+-]\d{2}:?\d{2})$/, "")
.trim();
const matched = normalized.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
if (matched) {
return `${matched[1]} ${matched[2]}`;
}
return normalized.slice(0, 16);
},
loadCurveData() {
if (!this.curveQuery.siteId || !this.curveQuery.pointId) {
this.$message.warning("点位信息不完整，无法查询曲线");
return;
}
if (!this.curveCustomRange || this.curveCustomRange.length !== 2) {
this.$message.warning("请选择查询时间范围");
return;
}
this.curveQuery.startTime = this.curveCustomRange[0];
this.curveQuery.endTime = this.curveCustomRange[1];
const query = {
siteId: this.curveQuery.siteId,
pointId: this.curveQuery.pointId,
pointType: "data",
rangeType: "custom",
startTime: this.curveQuery.startTime,
endTime: this.curveQuery.endTime,
};
this.curveLoading = true;
getPointConfigCurve(query)
.then((response) => {
const rows = response?.data || [];
this.renderCurveChart(rows);
})
.catch(() => {
this.renderCurveChart([]);
})
.finally(() => {
this.curveLoading = false;
});
},
renderCurveChart(rows = []) {
if (!this.curveChart) return;
const xData = rows.map((item) => this.formatCurveTime(item.dataTime));
const yData = rows.map((item) => item.pointValue);
this.curveChart.clear();
this.curveChart.setOption({
legend: {},
grid: {
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
textStyle: {
color: "#333333",
},
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: this.curveDialogTitle,
type: "line",
data: yData,
connectNulls: true,
},
],
});
if (!rows.length) {
this.$message.warning("当前时间范围暂无曲线数据");
}
},
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())}`;
},
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;
Promise.all([getProjectDisplayData(this.siteId), this.getCoolingDeviceList()])
.then(([response]) => {
this.displayData = response?.data || [];
})
.finally(() => {
this.loading = false;
});
this.loading = true
getCoolingDataList(this.siteId).then(response => {
this.list = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false})
},
init(){
this.updateData();
this.updateInterval(this.updateData);
},
},
beforeDestroy() {
if (this.curveChart) {
this.curveChart.dispose();
this.curveChart = null;
this.updateData()
this.updateInterval(this.updateData)
}
},
};
mounted(){
}
}
</script>
<style scoped lang="scss">
.sbjk-card-container {
&.list:not(:last-child) {
.yl-item-container{
border-radius: 5px;
&: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;
}
.device-info-col {
cursor: pointer;
}
.field-click-wrapper {
width: 100%;
}
.device-info-col.field-disabled {
cursor: not-allowed;
opacity: 0.8;
}
.curve-tools {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.point-loading-icon {
color: #409eff;
.header{
line-height: 40px;
font-size: 14px;
>div{
display: inline-block;
transform-origin: center;
animation: pointLoadingSpinPulse 1.1s linear infinite;
margin-right: 40px;
}
@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); }
.header-title{
border-radius: 5px 0 5px 0;
color:#ffffff;
width: 120px;
height: 40px;
font-size: 16px;
text-align: center;
}
.header-values{
font-weight: 500;
}
}
.content{
padding:25px;
.el-row{
background-color: #ffffff;
border:1px solid #eeeeee;
line-height: 14px;
color: #333333;
font-size: 12px;
.el-col{
padding:10px 0;
text-align: center;
}
.el-col:nth-child(-n+3){
border-bottom: 1px solid #eeeeee;
}
.el-col:not(:nth-child(3n)){
border-right: 1px solid #eeeeee;
}
}
}
}
.yl-warn-item-container{
background-color: #FFF1F0;
.header{
.header-title{
background-color: #FC6B69;
}
.header-values{
color: #FC6B69;
}
}
}
.yl-normal-item-container{
background-color: #EBF6F6;
.header{
.header-title{
background-color: #05AEA3;
}
.header-values{
color: #05AEA3;
}
}
}
</style>

141
src/views/ems/dzjk/tjbb/dbbb/index.vue
View File

@ -1,19 +1,25 @@
<template>
<div style="width:100%" v-loading="loading">
<!-- 搜索栏-->
<el-form :inline="true" class="select-container">
<el-form-item label="电表">
<el-select v-model="search.deviceId" placeholder="请选择" loading-text="正在加载数据">
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in deviceOptions" :key="index+'dbOptions'"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="日报">-->
<!-- <el-select v-model="search.rb" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
<!-- <el-option :label="item.name" :value="item.id" v-for="(item,index) in rbOptions" :key="index+'rbOptions'"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:clearable="false"
v-model="search.date"
type="date"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
></el-date-picker>
:default-value="defaultDate">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
@ -21,9 +27,6 @@
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportTable" native-type="button">导出</el-button>
</el-form-item>
</el-form>
<!--表格-->
<el-table
@ -37,94 +40,72 @@
prop="dataTime"
label="日期"
width="120">
<template slot-scope="scope">
<span>{{scope.row.dataTime}}{{scope.row.dataTime === '汇总' ? '' : ':00'}}</span>
</template>
</el-table-column>
</el-table-column>
<!--充电量列-->
<el-table-column label="充电量" align="center">
<el-table-column label="充电量">
<el-table-column
align="center"
prop="activePeakKwh"
label="尖">
</el-table-column>
<el-table-column
align="center"
prop="activeHighKwh"
label="峰">
</el-table-column>
<el-table-column
align="center"
prop="activeFlatKwh"
label="平">
</el-table-column>
<el-table-column
align="center"
prop="activeValleyKwh"
label="谷">
</el-table-column>
<el-table-column
align="center"
prop="activeTotalKwh"
label="总">
</el-table-column>
</el-table-column>
<!--充电量列-->
<el-table-column label="放电量" align="center">
<el-table-column label="放电量">
<el-table-column
align="center"
prop="reActivePeakKwh"
label="尖">
</el-table-column>
<el-table-column
align="center"
prop="reActiveHighKwh"
label="峰">
</el-table-column>
<el-table-column
align="center"
prop="reActiveFlatKwh"
label="平">
</el-table-column>
<el-table-column
align="center"
prop="reActiveValleyKwh"
label="谷">
</el-table-column>
<el-table-column
align="center"
prop="reActiveTotalKwh"
label="总">
</el-table-column>
</el-table-column>
<!-- 效率-->
<el-table-column label="效率(%)" align="center">
<el-table-column label="效率(%)">
<el-table-column
align="center"
prop="effect">
</el-table-column>
</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>
</div>
</template>
<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getAmmeterData} from '@/api/ems/dzjk'
import { getAmmeterData, getLoadNameList} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";
export default {
name:'DzjkTjbbDbbb',
mixins: [getQuerySiteId],
@ -136,73 +117,61 @@ export default {
return time.getTime() > Date.now();
},
},
defaultDateRange: [],//默认展示的时间
dateRange: [],
tableData: [],
pageSize: 10,//分页栏当前每个数据总数
pageNum: 1,//分页栏当前页数
totalSize: 0,//table表格数据总数
defaultDate:'',//默认展示的时间
search:{deviceId:'',date:''},
deviceOptions:[],
// rbOptions:[
// {name:'日报1',id:1},
// {name:'日报2',id:2},
// ],
tableData:[]
}
},
methods:{
// 导出表格
exportTable() {
if (!this.dateRange?.length) return
const [startTime, endTime] = this.dateRange
this.download('ems/statsReport/exportAmmeterDataFromDaily', {
siteId: this.siteId,
startTime,
endTime,
}, `电表报表_${startTime}-${endTime}.xlsx`)
},
// 搜索
onSearch(){
this.pageNum = 1//每次搜索从1开始搜索
this.getData()
},
// 重置
onReset(){
this.dateRange = this.defaultDateRange
this.pageNum = 1//每次搜索从1开始搜索
this.search.date = ''
this.getData()
},
// 分页
handleSizeChange(val) {
this.pageSize = val;
this.$nextTick(() => {
this.getData()
})
},
handleCurrentChange(val) {
this.pageNum = val
this.$nextTick(() => {
this.getData()
})
},
// 获取数据
getData(){
if(!this.search.deviceId) return
this.loading=true
const {siteId, pageNum, pageSize} = this
const [startTime = '', endTime = ''] = (this.dateRange || [])
getAmmeterData({siteId: siteId, startTime, endTime, pageSize, pageNum}).then(response => {
this.tableData = response?.rows || [];
this.totalSize = response?.total || 0
getAmmeterData({siteId:this.siteId,deviceId:this.search.deviceId,dateTime:formatDate(this.search.date)}).then(response=>{
this.tableData=response?.data || [];
}).finally(()=> {
this.loading = false
})
},
getDbList(){
return getLoadNameList(this.siteId).then(response=>{
this.deviceOptions=response?.data || [];
this.deviceOptions.length > 0 && (this.search.deviceId = this.deviceOptions[0].id);
})
},
init(){
this.dateRange = []
this.loading = true
this.deviceOptions = []
this.search.deviceId=''
this.search.date=''
this.tableData=[]
this.totalSize = 0
this.pageSize = 10
this.pageNum = 1
let now = new Date(), lastDay = now.getTime(), firstDay = new Date(now.setDate(1)).getTime();
this.defaultDateRange = [formatDate(firstDay), formatDate(lastDay)];
this.dateRange = [formatDate(firstDay), formatDate(lastDay)];
this.getData()
this.getDbList().then(()=>{
if(this.search.deviceId){
this.onReset()
}else{
this.loading = false
}
})
},
},
mounted(){
this.defaultDate = new Date()
}
}
</script>

201
src/views/ems/dzjk/tjbb/dcdqx/index.vue
View File

@ -1,40 +1,28 @@
<template>
<el-card
shadow="always"
class="common-card-container time-range-card"
style="margin-top: 20px"
>
<el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
<div slot="header" class="time-range-header">
<span class="card-title"> </span>
<span class="card-title">
<el-button-group class="ems-btns-group">
<el-button v-for="(item,index) in btnList" :key="index+'dcdqxBtns'" size="mini" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
</el-button-group>
</span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div>
<div class="card-main" v-loading="loading">
<el-button-group class="ems-btns-group">
<el-button
v-for="(item, index) in btnList"
:key="index + 'dcdqxBtns'"
size="mini"
:class="{ activeBtn: activeBtn === item.id }"
@click="changeDataType(item.id)"
>{{ item.name }}
</el-button
>
</el-button-group>
<div id="dcdEchart" style="height: 310px"></div>
<div id="dcdEchart" style="height: 310px;"></div>
</div>
</el-card>
</template>
<script>
import * as echarts from "echarts";
import * as echarts from 'echarts'
import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getStackData} from "@/api/ems/dzjk";
import { getStackData, getStackNameList} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
name: "DzjkTjbbDcdqx",
name:'DzjkTjbbDcdqx',
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId],
data() {
@ -46,69 +34,53 @@ export default {
},
dateRange:[],
loading:false,
activeBtn: "1",
activeBtn:'1',
btnList:[
{name: "堆平均维度", id: "1", attr: ["temp"], source: ["有功功率"]},
{name: "堆电压", id: "2", attr: ["voltage"], source: ["堆电压"]},
{name: "堆电流", id: "3", attr: ["current"], source: ["堆电流"]},
{name: "堆soc", id: "4", attr: ["soc"], source: ["堆soc"]},
{name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
{name:'堆电压',id:'2',attr:['voltage'],source:['堆电压']},
{name:'堆电流',id:'3',attr:['current'],source:['堆电流']},
{name:'堆soc',id:'4',attr:['soc'],source:['堆soc']},
],
};
}
},
methods: {
changeDataType(id){
if(id !== this.activeBtn){
this.activeBtn=id;
this.getData();
this.getData()
}
},
// 更新时间范围 重置图表
updateDate(data){
this.dateRange = data || [];
this.getData();
this.dateRange=data || []
this.getData()
},
getData(){
const {siteId,activeBtn}=this;
const [start = "", end = ""] = this.dateRange || [];
const [start='',end='']=(this.dateRange || [])
//接口调用完成之后 设置图表、结束loading
this.loading=true;
getStackData({
siteId,
startTime: formatDate(start),
endTime: formatDate(end),
dataType: activeBtn,
})
.then((response) => {
this.setOption(response?.data || []);
})
.finally(() => {
this.loading = false;
});
getStackData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{this.loading=false;})
},
compareDate(date1,date2){
console.log("比较时间", date1, date2);
console.log('比较时间',date1,date2)
// 年2025-09/天2025-09-15/时2025-09-15/10:00
if (date1.indexOf(":") > -1 && date2.indexOf(":") > -1) {
return parseInt(date1) - parseInt(date2);
if(date1.indexOf(':') > -1 && date2.indexOf(':') > -1){
return parseInt(date1) - parseInt(date2)
}
const [date1_Y = "", date1_M = "", date1_D = ""] = date1.split("-"); //根据空格区分[年月日,小时]
const [date2_Y = "", date2_M = "", date2_D = ""] = date2.split("-"); //根据空格区分[年月日,小时]
return (
(date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) ||
(date1_Y === date2_Y && date1_M - date2_M) ||
date1_Y - date2_Y
);
const [date1_Y='',date1_M='',date1_D=''] = date1.split('-')//根据空格区分[年月日,小时]
const [date2_Y='',date2_M='',date2_D=''] = date2.split('-')//根据空格区分[年月日,小时]
return (date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) || (date1_Y === date2_Y && date1_M - date2_M) || date1_Y - date2_Y
},
setOption(data) {
const ele = this.btnList.find((item) => {
return item.id === this.activeBtn;
});
const sourceBase = JSON.parse(JSON.stringify(ele.source));
const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
const sourceBase = JSON.parse(JSON.stringify(ele.source))
// sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
const source = [];
const sourceTop = ["日期"];
let map = {},
mapArr = [];
const source=[]
const sourceTop = ['日期']
let map={},mapArr=[]
// 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
data.forEach((item)=>{
item.dataList.forEach((inner)=>{
@ -116,93 +88,78 @@ export default {
// 年2025-09/天2025-09-15/时2025-09-15/10:00
// 所有数据的日期格式一致
if(!map[inner.statisDate]) {
map[inner.statisDate] = [];
mapArr.push(inner.statisDate);
map[inner.statisDate] = []
mapArr.push(inner.statisDate)
}
});
});
})
})
data.forEach((item,itemIndex)=>{
const dataTimeList = item.dataList.map((i) => i.statisDate);
const noDataTime = mapArr.filter((i) => !dataTimeList.includes(i));
const dataTimeList = item.dataList.map(i =>i.statisDate)
const noDataTime = mapArr.filter(i=>!dataTimeList.includes(i))
sourceBase.forEach((outer,outerIndex)=>{
sourceTop.push(`${item.deviceId}-${outer}`);
noDataTime.forEach((i) => map[i].push(""));
sourceTop.push(`${item.deviceId}-${outer}`)
noDataTime.forEach(i=>map[i].push(''))
item.dataList.forEach((inner,innerIndex)=>{
map[inner.statisDate].push(inner[ele.attr[outerIndex]]);
});
});
});
mapArr = mapArr.sort((a, b) => this.compareDate(a, b));
mapArr.forEach((item) => {
source.push([item, ...map[item]]);
});
source.unshift(sourceTop);
this.chart.setOption(
{
map[inner.statisDate].push(inner[ele.attr[outerIndex]])
})
})
})
mapArr = mapArr.sort((a,b)=>this.compareDate(a,b))
mapArr.forEach(item=>{
source.push([item,...map[item]])
})
source.unshift(sourceTop)
console.log('map=',map)
console.log('mapArr=',mapArr)
console.log('========',source)
this.chart.setOption({
grid: {
containLabel: true,
containLabel: true
},
legend: {
left: "center",
top: "10",
left: 'center',
bottom: '15',
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
textStyle:{
color:"#333333",
},
xAxis: {
type: "category",
type: 'category',
},
yAxis: {
type: "value",
type: 'value',
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
dataset: {source},
series: source[0].slice(1).map((item) => {
series:source[0].slice(1).map(item=>{
return {
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
};
}),
},
true
);
type:ele.type || 'scatter'
}
})
},true)
},
initChart() {
this.chart = echarts.init(document.querySelector("#dcdEchart"));
this.chart = echarts.init(document.querySelector('#dcdEchart'));
},
init(){
this.$nextTick(()=>{
this.initChart();
this.$refs.dateRangeSelect.init(true);
});
},
this.initChart()
this.$refs.dateRangeSelect.init()
})
}
},
beforeDestroy() {
if (!this.chart) {
return;
return
}
this.chart.dispose();
this.chart = null;
this.chart.dispose()
this.chart = null
},
};
}
</script>

11
src/views/ems/dzjk/tjbb/dcwd/index.vue
View File

@ -147,9 +147,6 @@ export default {
if(val){
this.search.clusterId=''
this.getClusterList()
} else {
this.search.clusterId=''
this.clusterOptions=[]
}
},
//表格数据
@ -173,15 +170,8 @@ export default {
})
},
async getClusterList(){
const currentStackId = String(this.search.stackId || '')
if (!currentStackId) {
this.clusterOptions = []
this.search.clusterId = ''
return
}
this.clusterloading =true
await getClusterNameList({stackDeviceId: this.search.stackId, siteId: this.siteId}).then(response => {
if (String(this.search.stackId || '') !== currentStackId) return
const data = JSON.parse(JSON.stringify(response?.data || []))
this.clusterOptions = data
this.search.clusterId = data.length > 0 ? data[0].id : ''
@ -210,3 +200,4 @@ export default {
}
}
</script>

144
src/views/ems/dzjk/tjbb/glqx/index.vue
View File

@ -1,32 +1,26 @@
<template>
<el-card
shadow="always"
class="common-card-container time-range-card"
style="margin-top: 20px"
>
<el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
<div slot="header" class="time-range-header">
<span class="card-title">功率曲线</span>
<date-range-select
ref="dateRangeSelect"
@updateDate="updateDate"
/>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div>
<div class="card-main" v-loading="loading">
<div id="glqxEchart" style="height: 310px"></div>
<div id="glqxEchart" style="height: 310px;"></div>
</div>
</el-card>
</template>
<script>
import * as echarts from "echarts";
import * as echarts from 'echarts'
import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getPowerData} from "@/api/ems/dzjk";
import {getPcsNameList, getPowerData} from "@/api/ems/dzjk";
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
name: "DzjkTjbbGlqx",
name:'DzjkTjbbGlqx',
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId],
data() {
@ -38,131 +32,85 @@ export default {
},
dateRange:[],
loading:false,
};
}
},
methods: {
// 更新时间范围 重置图表
updateDate(data){
this.dateRange = data || [];
this.getData();
this.dateRange=data || []
this.getData()
},
getData(){
const {siteId}=this;
let [start = "", end = ""] = this.dateRange || [];
const [start='',end='']=(this.dateRange || [])
//接口调用完成之后 设置图表、结束loading
this.loading=true;
getPowerData({
siteId,
startDate: formatDate(start),
endDate: formatDate(end),
})
.then((response) => {
this.setOption(response?.data || []);
})
.finally(() => {
this.loading = false;
});
getPowerData({siteId,startDate:formatDate(start),endDate:formatDate(end)}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{this.loading=false;})
},
setOption(data) {
const source = [["日期", "电网功率", "负载功率", "储能功率", "光伏功率"]];
data.forEach((item) => {
source.push([
item.statisDate,
item.gridPower,
item.loadPower,
item.storagePower,
item.pvPower,
]);
});
this.chart.setOption(
{
const source = [['日期','电网功率','负载功率','储能功率','光伏功率']]
data.forEach(item=>{
source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower])
})
this.chart.setOption({
grid: {
containLabel: true,
containLabel: true
},
legend: {
left: "center",
top: "10",
left: 'center',
bottom: '15',
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
textStyle:{
color:"#333333",
},
xAxis: {
type: "category",
type: 'category',
},
yAxis: {
type: "value",
type: 'value',
},
dataset:{source},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
type: 'scatter',
},
{
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
type: 'scatter',
},
{
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
type: 'scatter',
},
{
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
},
],
},
true
);
type: 'scatter',
}
]
},true)
},
initChart() {
if (this.chart) return;
this.chart = echarts.init(document.querySelector("#glqxEchart"));
this.chart = echarts.init(document.querySelector('#glqxEchart'));
},
init(){
this.$nextTick(()=>{
this.initChart();
this.$refs.dateRangeSelect.init();
});
this.initChart()
this.$refs.dateRangeSelect.init()
})
}
},
},
beforeDestroy() {
if (!this.chart) {
return;
return
}
this.chart.dispose();
this.chart = null;
this.chart.dispose()
this.chart = null
},
};
}
</script>

6
src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
View File

@ -125,12 +125,6 @@ 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;
})

38
src/views/ems/dzjk/tjbb/index.vue
View File

@ -7,39 +7,48 @@
text-color="#666666"
active-text-color="#ffffff"
>
<el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'tjbbChildrenRoute'">
<router-link style="height: 100%;width: 100%;display: block;" :to="{path:item.path,query:$route.query}">
<el-menu-item
:index="item.name"
v-for="(item, index) in childrenRoute"
:key="index + 'tjbbChildrenRoute'"
>
<router-link
style="height: 100%; width: 100%; display: block"
:to="{ path: item.path, query: $route.query }"
>
{{ item.meta.title }}
</router-link>
</el-menu-item>
</el-menu>
<div class="ems-content-container ems-content-container-padding tjbb-ems-content-container">
<div
class="ems-content-container ems-content-container-padding tjbb-ems-content-container"
>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
<script>
import { dzjk } from '@/router/ems'
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkTjbb').children//获取到统计报表下面的字路由
console.log('设备监控子路由',childrenRoute)
import { dzjk } from "@/router/ems";
const childrenRoute = dzjk[0].children.find(
(item) => item.name === "DzjkTjbb"
).children; //获取到统计报表下面的字路由
console.log("设备监控子路由", childrenRoute);
export default {
name:'DzjkTjbb',
name: "DzjkTjbb",
data() {
return {
childrenRoute,
activeMenu:''
}
activeMenu: "",
};
},
mounted() {
console.log('当前统计报表页面路由',this.$route)
}
}
console.log("当前统计报表页面路由", this.$route);
},
};
</script>
<style scoped lang="scss">
@ -50,4 +59,3 @@ export default {
flex: 1;
}
</style>

219
src/views/ems/dzjk/tjbb/pcsqx/index.vue
View File

@ -1,40 +1,29 @@
<template>
<el-card
shadow="always"
class="common-card-container time-range-card"
style="margin-top: 20px"
>
<el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
<div slot="header" class="time-range-header">
<span class="card-title"> </span>
<span class="card-title">
<el-button-group class="ems-btns-group">
<el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" size="mini" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
</el-button-group>
</span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div>
<div class="card-main" v-loading="loading">
<el-button-group class="ems-btns-group">
<el-button
v-for="(item, index) in btnList"
:key="index + 'flqxcBtns'"
size="mini"
:class="{ activeBtn: activeBtn === item.id }"
@click="changeDataType(item.id)"
>{{ item.name }}
</el-button
>
</el-button-group>
<div id="pcsEchart" style="height: 310px"></div>
<div id="pcsEchart" style="height: 310px;"></div>
</div>
</el-card>
</template>
<script>
import * as echarts from "echarts";
import * as echarts from 'echarts'
import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getPCSData} from "@/api/ems/dzjk";
import { getPCSData, getPcsNameList} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
name: "DzjkTjbbPcsqx",
name:'DzjkTjbbPcsqx',
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId],
data() {
@ -46,85 +35,54 @@ export default {
},
dateRange:[],
loading:false,
activeBtn: "1",
activeBtn:'1',
btnList:[
{
name: "有功功率",
id: "1",
attr: ["activePower"],
source: ["有功功率"],
},
{
name: "无功功率",
id: "2",
attr: ["reactivePower"],
source: ["无功功率"],
},
{
name: "三相电流",
id: "3",
attr: ["uCurrent", "vCurrent", "wCurrent"],
source: ["u电流", "v电流", "w电流"],
type: "bar",
},
{name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
{name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
{name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'},
],
};
}
},
methods: {
changeDataType(id){
if(id !== this.activeBtn){
console.log("点击了不同的菜单，更新数据");
console.log('点击了不同的菜单，更新数据')
this.activeBtn=id;
this.getData();
this.getData()
}
},
// 更新时间范围 重置图表
updateDate(data){
this.dateRange = data || [];
this.getData();
this.dateRange=data || []
this.getData()
},
getData(){
const {siteId,activeBtn}=this;
const [start = "", end = ""] = this.dateRange || [];
const [start='',end='']=(this.dateRange || [])
this.loading=true;
//接口调用完成之后 设置图表、结束loading
getPCSData({
siteId,
startTime: formatDate(start),
endTime: formatDate(end),
dataType: activeBtn,
})
.then((response) => {
this.setOption(response?.data || []);
})
.finally(() => {
this.loading = false;
});
getPCSData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{this.loading=false;})
},
compareDate(date1,date2){
console.log("比较时间", date1, date2);
console.log('比较时间',date1,date2)
// 年2025-09/天2025-09-15/时2025-09-15/10:00
if (date1.indexOf(":") > -1 && date2.indexOf(":") > -1) {
return parseInt(date1) - parseInt(date2);
if(date1.indexOf(':') > -1 && date2.indexOf(':') > -1){
return parseInt(date1) - parseInt(date2)
}
const [date1_Y = "", date1_M = "", date1_D = ""] = date1.split("-"); //根据空格区分[年月日,小时]
const [date2_Y = "", date2_M = "", date2_D = ""] = date2.split("-"); //根据空格区分[年月日,小时]
return (
(date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) ||
(date1_Y === date2_Y && date1_M - date2_M) ||
date1_Y - date2_Y
);
const [date1_Y='',date1_M='',date1_D=''] = date1.split('-')//根据空格区分[年月日,小时]
const [date2_Y='',date2_M='',date2_D=''] = date2.split('-')//根据空格区分[年月日,小时]
return (date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) || (date1_Y === date2_Y && date1_M - date2_M) || date1_Y - date2_Y
},
setOption(data) {
const ele = this.btnList.find((item) => {
return item.id === this.activeBtn;
});
const sourceBase = JSON.parse(JSON.stringify(ele.source));
const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
const sourceBase = JSON.parse(JSON.stringify(ele.source))
// sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
const source = [];
const sourceTop = ["日期"];
let map = {},
mapArr = [];
const source=[]
const sourceTop = ['日期']
let map={},mapArr=[]
// 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
data.forEach((item)=>{
item.dataList.forEach((inner)=>{
@ -132,93 +90,78 @@ export default {
// 年2025-09/天2025-09-15/时2025-09-15/10:00
// 所有数据的日期格式一致
if(!map[inner.statisDate]) {
map[inner.statisDate] = [];
mapArr.push(inner.statisDate);
map[inner.statisDate] = []
mapArr.push(inner.statisDate)
}
});
});
})
})
data.forEach((item,itemIndex)=>{
const dataTimeList = item.dataList.map((i) => i.statisDate);
const noDataTime = mapArr.filter((i) => !dataTimeList.includes(i));
const dataTimeList = item.dataList.map(i =>i.statisDate)
const noDataTime = mapArr.filter(i=>!dataTimeList.includes(i))
sourceBase.forEach((outer,outerIndex)=>{
sourceTop.push(`${item.deviceId}-${outer}`);
noDataTime.forEach((i) => map[i].push(""));
sourceTop.push(`${item.deviceId}-${outer}`)
noDataTime.forEach(i=>map[i].push(''))
item.dataList.forEach((inner,innerIndex)=>{
map[inner.statisDate].push(inner[ele.attr[outerIndex]]);
});
});
});
mapArr = mapArr.sort((a, b) => this.compareDate(a, b));
mapArr.forEach((item) => {
source.push([item, ...map[item]]);
});
source.unshift(sourceTop);
this.chart.setOption(
{
map[inner.statisDate].push(inner[ele.attr[outerIndex]])
})
})
})
mapArr = mapArr.sort((a,b)=>this.compareDate(a,b))
mapArr.forEach(item=>{
source.push([item,...map[item]])
})
source.unshift(sourceTop)
console.log('map=',map)
console.log('mapArr=',mapArr)
console.log('========',source)
this.chart.setOption({
grid: {
containLabel: true,
containLabel: true
},
legend: {
left: "center",
top: "10",
left: 'center',
bottom: '15',
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
textStyle:{
color:"#333333",
},
xAxis: {
type: "category",
type: 'category',
},
yAxis: {
type: "value",
type: 'value',
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
dataset: {source},
series: source[0].slice(1).map((item) => {
series:source[0].slice(1).map(item=>{
return {
type: "line",
smooth: true,
areaStyle: {
opacity: 0.7,
},
};
}),
},
true
);
type:ele.type || 'scatter'
}
})
},true)
},
initChart() {
this.chart = echarts.init(document.querySelector("#pcsEchart"));
this.chart = echarts.init(document.querySelector('#pcsEchart'));
},
init(){
this.$nextTick(()=>{
this.initChart();
this.$refs.dateRangeSelect.init(true);
});
},
this.initChart()
this.$refs.dateRangeSelect.init()
})
}
},
beforeDestroy() {
if (!this.chart) {
return;
return
}
this.chart.dispose();
this.chart = null;
this.chart.dispose()
this.chart = null
},
};
}
</script>

240
src/views/ems/dzjk/tjbb/sybb/index.vue
View File

@ -1,240 +0,0 @@
<template>
<div style="width:100%" v-loading="loading">
<!-- 搜索栏-->
<el-form :inline="true" class="select-container">
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:clearable="false"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportTable" native-type="button">导出</el-button>
</el-form-item>
</el-form>
<!--表格-->
<el-table
class="common-table"
:data="tableData"
show-summary
stripe
style="width: 100%;margin-top:25px;">
<!-- 汇总列-->
<el-table-column label="汇总" min-width="100px" align="center">
<el-table-column
prop="dataTime"
label="日期"
min-width="100px" align="center">
</el-table-column>
<el-table-column
prop="dayType"
label="日期类型"
min-width="100px" align="center">
</el-table-column>
<el-table-column
prop="weatherDesc"
label="天气情况"
min-width="180px"
align="center">
</el-table-column>
</el-table-column>
<!--充电量列-->
<el-table-column label="充电价格" align="center">
<el-table-column
align="center"
prop="activePeakPrice"
label="尖">
</el-table-column>
<el-table-column
align="center"
prop="activeHighPrice"
label="峰">
</el-table-column>
<el-table-column
align="center"
prop="activeFlatPrice"
label="平">
</el-table-column>
<el-table-column
align="center"
prop="activeValleyPrice"
label="谷">
</el-table-column>
<el-table-column
align="center"
prop="activeTotalPrice"
label="总">
</el-table-column>
</el-table-column>
<!--充电量列-->
<el-table-column label="放电价格" align="center">
<el-table-column
align="center"
prop="reActivePeakPrice"
label="尖">
</el-table-column>
<el-table-column
align="center"
prop="reActiveHighPrice"
label="峰">
</el-table-column>
<el-table-column
align="center"
prop="reActiveFlatPrice"
label="平">
</el-table-column>
<el-table-column
align="center"
prop="reActiveValleyPrice"
label="谷">
</el-table-column>
<el-table-column
align="center"
prop="reActiveTotalPrice"
label="总">
</el-table-column>
</el-table-column>
<!-- 实际收益-->
<el-table-column label="" align="center" fixed="right">
<el-table-column
prop="actualRevenue"
label="实际收益"
align="center">
</el-table-column>
</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>
</div>
</template>
<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getAmmeterRevenueData} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";
export default {
name: 'DzjkTjbbSybb',
mixins: [getQuerySiteId],
data() {
return {
loading: false,
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
defaultDateRange: [],//默认展示的时间
dateRange: [],
tableData: [],
pageSize: 10,//分页栏当前每个数据总数
pageNum: 1,//分页栏当前页数
totalSize: 0,//table表格数据总数
}
},
methods: {
// 导出表格
exportTable() {
if (!this.dateRange?.length) return
const [startTime, endTime] = this.dateRange
this.download('ems/statsReport/exportAmmeterRevenueData', {
siteId: this.siteId,
startTime,
endTime,
}, `收益报表_${startTime}-${endTime}.xlsx`)
},
// 搜索
onSearch() {
this.pageNum = 1//每次搜索从1开始搜索
this.getData()
},
// 重置
onReset() {
this.dateRange = this.defaultDateRange
this.pageNum = 1//每次搜索从1开始搜索
this.getData()
},
// 分页
handleSizeChange(val) {
this.pageSize = val;
this.$nextTick(() => {
this.getData()
})
},
handleCurrentChange(val) {
this.pageNum = val
this.$nextTick(() => {
this.getData()
})
},
// 获取数据
getData() {
this.loading = true
const {siteId, pageNum, pageSize} = this
const [startTime = '', endTime = ''] = (this.dateRange || [])
getAmmeterRevenueData({siteId: siteId, startTime, endTime, pageSize, pageNum}).then(response => {
const rows = response?.rows || [];
this.totalSize = response?.total || 0
this.tableData = rows
}).finally(() => {
this.loading = false
})
},
init() {
this.dateRange = []
this.tableData = []
this.totalSize = 0
this.pageSize = 10
this.pageNum = 1
let now = new Date(), lastDay = now.getTime(), firstDay = new Date(now.setDate(1)).getTime();
this.defaultDateRange = [formatDate(firstDay), formatDate(lastDay)];
this.dateRange = [formatDate(firstDay), formatDate(lastDay)];
this.getData()
},
},
}
</script>
<style scoped lang="scss">
::v-deep {
.common-table.el-table {
.el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th {
border-bottom: 1px solid #dfe6ec;
}
.el-table__footer-wrapper {
tbody td.el-table__cell {
color: #000;
font-weight: bolder;
}
}
}
}
</style>

577
src/views/ems/dzjk/zxlt/index copy 2.vue Normal file
View File

@ -0,0 +1,577 @@
<template>
<div class="ems-dashboard-editor-container" v-loading="loading">
<div class="container" v-show="!empty">
<!-- 云、电脑 -->
<div class="top">
<div class="cloud-container">
<div class="cloud">
<span style="z-index: 2; position: relative">云</span>
</div>
</div>
<div class="double-arrows">
<div class="top-arrows"></div>
<div class="bottom-arrows"></div>
</div>
<div class="computer">
<img src="@/assets/images/ems/computer.png" alt="" />
<span style="z-index: 2; position: relative">ems</span>
</div>
</div>
<div class="outer-border">
<!-- 电表-->
<div class="row-lists-container" v-if="showDb">
<div class="row-title">电表({{ db.length }})</div>
<div class="row-lists">
<div v-for="item in db" :key="item.deviceId" class="row-items">
<div
class="status"
:class="
item.communicationStatus === '0' ? 'status-running' : ''
"
>
{{ communicationStatusOptions[item.communicationStatus] }}
</div>
<div class="row-items-img">
<img
class="img-db"
:src="require('@/assets/images/ems/db.png')"
/>
<div class="name">{{ item.deviceName }}</div>
</div>
</div>
</div>
</div>
<!-- 液冷-->
<div class="row-lists-container" v-if="showLq">
<div class="row-title">冷却({{ lq.length }})</div>
<div class="row-lists">
<div v-for="item in lq" :key="item.deviceId" class="row-items">
<div
class="status"
:class="
item.communicationStatus === '0' ? 'status-running' : ''
"
>
{{ communicationStatusOptions[item.communicationStatus] }}
</div>
<div class="row-items-img">
<img
class="img-lq"
:src="require('@/assets/images/ems/lq.png')"
/>
<div class="name">{{ item.deviceName }}</div>
</div>
</div>
</div>
</div>
<!-- PCS-->
<div class="row-lists-container" v-if="showPcs">
<div class="row-lists">
<div class="row-title">PCS({{ pcs.length }})</div>
<div
v-for="(item, index) in pcs"
:key="item.deviceId"
class="row-items row-items-pcs"
>
<!-- pcs -->
<div class="parent-dash">
<div
class="status"
:class="
item.communicationStatus === '0' ? 'status-running' : ''
"
>
{{ communicationStatusOptions[item.communicationStatus] }}
</div>
<div class="row-items-img">
<img
class="img-pcs"
:src="require('@/assets/images/ems/pcs.png')"
/>
<div class="name">{{ item.deviceName }}</div>
</div>
</div>
<!-- 子设备 bms -->
<div
v-if="item.children && item.children.length > 0"
class="children-dash"
>
<div
class="row-children-title"
v-if="bmsHasParentLength > 0 && index === 0"
>
BMS({{ bmsHasParentLength }})
</div>
<div
v-for="(childrenItem, childrenIndex) in item.children"
:key="childrenIndex + 'childrenBms'"
class="children-dash-items"
>
<div
class="status"
:class="
childrenItem.communicationStatus === '0'
? 'status-running'
: ''
"
>
{{
communicationStatusOptions[
childrenItem.communicationStatus
]
}}
</div>
<div class="row-items-img">
<img
class="img-pcs"
:src="require('@/assets/images/ems/bms.png')"
/>
<div class="name">{{ childrenItem.deviceName }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row-lists-container" v-if="showPcs">
<div class="row-title">PCS({{ pcs.length }})</div>
<div class="row-lists">
<div
v-for="item in bmsNoParent"
:key="item.deviceId"
class="row-items row-items-pcs"
>
<!-- pcs -->
<div class="parent-dash">
<div
class="status"
:class="
item.communicationStatus === '0' ? 'status-running' : ''
"
>
{{ communicationStatusOptions[item.communicationStatus] }}
</div>
<div class="row-items-img">
<img :src="require('@/assets/images/ems/bms.png')" />
<div class="name">{{ item.deviceName }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- bms没有上级设备-->
<div class="row-lists-container" v-if="bmsNoParent.length > 0">
<div class="row-title">BMS({{ bmsNoParent.length }})</div>
<div class="row-lists">
<div
v-for="item in bmsNoParent"
:key="item.deviceId"
class="row-items row-items-pcs"
>
<!-- pcs -->
<div class="parent-dash">
<div
class="status"
:class="
item.communicationStatus === '0' ? 'status-running' : ''
"
>
{{ communicationStatusOptions[item.communicationStatus] }}
</div>
<div class="row-items-img">
<img :src="require('@/assets/images/ems/bms.png')" />
<div class="name">{{ item.deviceName }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<el-empty v-show="empty" :image-size="200"></el-empty>
</div>
</template>
<script>
import { getDeviceList } from "@/api/ems/site";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { mapState } from "vuex";
export default {
name: "DzjkZxlt",
mixins: [getQuerySiteId],
data() {
return {
loading: false,
pcs: [],
bms: [],
db: [],
lq: [],
pcsHasChildren: [],
pcsNoChildren: [],
bmsNoParent: [],
};
},
computed: {
...mapState({
communicationStatusOptions: (state) =>
state.ems.communicationStatusOptions,
}),
showPcs() {
return this.pcs.length > 0;
},
showBms() {
return this.bms.length > 0;
},
showDb() {
return this.db.length > 0;
},
showLq() {
return this.lq.length > 0;
},
bmsHasParentLength() {
let count = 0;
this.pcs.forEach((item) => (count += item.children.length));
return count;
},
empty() {
return !this.showBms && !this.showPcs && !this.showDb && !this.showLq;
},
},
methods: {
init() {
this.pcs = [];
this.bms = [];
this.lq = [];
this.db = [];
this.bmsNoParent = [];
this.loading = true;
getDeviceList(this.siteId)
.then((response) => {
const data = JSON.parse(JSON.stringify(response?.data || []));
let pcs = [],
bms = [],
db = [],
lq = [],
bmsNoParent = [];
data.forEach((item) => {
// 电表
if (item.deviceCategory === "AMMETER") {
db.push({ ...item, children: [] });
} else if (item.deviceCategory === "PCS") {
// pcs
pcs.push({ ...item, children: [] });
} else if (item.deviceCategory === "STACK") {
// bms
bms.push({ ...item, children: [] });
} else if (item.deviceCategory === "COOLING") {
// 液冷
lq.push({ ...item, children: [] });
}
});
bms.forEach((item, index) => {
if (item.parentId) {
pcs
.find((pcsItem) => pcsItem.deviceId === item.parentId)
.children.push(item);
} else {
bmsNoParent.push(item);
}
});
this.pcs = pcs;
this.bms = bms;
this.lq = lq;
this.db = db;
this.pcsHasChildren = pcs.filter((item) => item.children.length > 0);
this.pcsNoChildren = pcs.filter((item) => item.children.length === 0);
this.bmsNoParent = bmsNoParent;
})
.finally(() => {
this.loading = false;
});
},
},
};
</script>
<style lang="scss" scoped>
$sqDistance: 30px;
$borderColor: #174a8e;
$lineColor: #86bcc7;
.ems-dashboard-editor-container {
background-color: #ffffff;
padding: 0;
color: #666666;
.container {
display: flex;
position: relative;
}
//云 、计算机 、箭头
.top {
z-index: 2;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
// position: absolute;
// top: 50%;
// left: 0;
// transform: translateY(-50%);
//云 样式
.cloud-container {
margin: 0 auto;
.cloud {
width: 60px;
height: 26px;
background: #cbebfd;
border-radius: 100px;
position: relative;
text-align: center;
font-weight: bold;
font-size: 14px;
line-height: 26px;
}
.cloud:before,
.cloud:after {
content: "";
position: absolute;
background: #cbebfd;
width: 30px;
height: 30px;
border-radius: 100%;
}
.cloud:before {
top: -9px;
left: 8px;
}
.cloud:after {
top: -6px;
right: 9px;
}
}
//双箭头
.double-arrows {
height: fit-content;
margin: 0 10px;
text-align: center;
.top-arrows,
.bottom-arrows {
height: 4px;
width: 30px;
background-color: #5ea9df;
margin: 0 10px;
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
}
}
.top-arrows {
vertical-align: super;
}
.top-arrows::after {
top: -4px;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
border-right: 6px solid #5ea9df;
border-top: 6px solid transparent;
left: -11px;
}
.bottom-arrows {
margin-top: 8px;
&::after {
top: -4px;
border-top: 6px solid transparent;
border-left: 6px solid #5ea9df;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
right: -11px;
left: auto;
}
}
}
//电脑
.computer {
text-align: center;
font-size: 14px;
line-height: 16px;
font-weight: bold;
position: relative;
background: #fff;
img {
width: 80px;
height: auto;
display: block;
}
}
}
.outer-border {
position: relative;
width: fit-content;
border: 1.5px solid $borderColor;
border-radius: 5px;
padding-left: 120px;
padding-right: 20px;
margin-left: -40px;
}
// 设备列表
.row-lists-container {
font-size: 10px;
position: relative;
padding: 10px;
.row-title {
position: absolute;
left: -$sqDistance - 30px;
top: calc(50% + 10px);
transform: translateY(-50%);
color: #000;
font-weight: bolder;
}
.row-lists {
display: flex;
position: relative;
.row-items {
position: relative;
padding: 5px 0;
&:not(:first-child) {
margin-left: $sqDistance; //和外层父元素上下padding一致
}
&::before {
content: "";
display: block;
height: 3px;
width: $sqDistance - 2px;
background: $lineColor;
position: absolute;
left: -$sqDistance;
top: calc(50% + 10px);
transform: scale(1, 0.4);
}
// 一列 第一个设备最上面的线
&:first-child {
&::before {
width: $sqDistance + 20px;
// top: -$sqDistance - 20px;
}
}
// 一列 最后一个设备最下面的线
// &:last-child {
// &::after {
// content: "";
// display: block;
// width: 3px;
// height: $sqDistance - 2px;
// background: $lineColor;
// position: absolute;
// bottom: -$sqDistance;
// left: 50%;
// transform: scale(0.4, 1);
// }
// }
// 设备状态
.status {
margin: 0 auto 4px;
width: fit-content;
height: 18px;
padding: 0 8px;
box-sizing: border-box;
text-align: center;
font-size: 8px;
line-height: 18px;
border: 1px solid #08ffff;
border-radius: 2px;
background: #aaaaaa;
color: #ffffff;
&.status-running {
background: #00c69c;
}
}
// 图片+设备名称
.row-items-img {
position: relative;
padding-top: 12px;
img {
width: 80px;
height: auto;
display: block;
&.img-lq {
width: 50px;
}
&.img-pcs {
width: 50px;
}
&.img-db {
width: 56px;
}
}
.name {
position: absolute;
top: 1px;
left: 0;
color: #666;
white-space: nowrap;
}
}
}
}
}
//子设备
.row-lists-container-children {
margin: 10px 0 0 $sqDistance;
.parent-dash {
position: relative;
&::before {
content: "";
display: block;
height: 40px;
width: 3px;
background: #ec7f8c;
position: absolute;
left: 20%;
top: -40px;
transform: scale(0.4, 1) rotate(-40deg);
}
}
}
.parent-dash {
width: fit-content;
}
.children-dash {
margin: $sqDistance 0 0 $sqDistance;
position: relative;
.row-children-title {
position: absolute;
left: -$sqDistance - 30px;
top: calc(50% + 10px);
transform: translateY(-50%);
color: #000;
font-weight: bolder;
}
.children-dash-items {
position: relative;
&::before {
content: "";
display: block;
height: $sqDistance;
width: 3px;
background: #ec7f8c;
position: absolute;
left: 20%;
top: -$sqDistance;
transform: scale(0.4, 1) rotate(-40deg);
}
}
}
}
</style>

614
src/views/ems/dzjk/zxlt/index copy.vue Normal file
View File

@ -0,0 +1,614 @@
<template>
<div class="ems-dashboard-editor-container" v-loading="loading" >
<div class="container" v-show="!empty">
<div class="top">
<div class="cloud-container">
<div class="cloud">
<span style="z-index:2;position: relative;">云</span>
</div>
</div>
<div class="double-arrows">
<div class="top-arrows"></div>
<div class="bottom-arrows"></div>
</div>
<div class="computer">
<img src="@/assets/images/ems/computer.png" alt="">
<span style="z-index:2;position: relative;">ems</span>
</div>
<div class="arrow"></div>
</div>
<div class="bottom">
<!-- 四列设备-->
<div class="zxlt-row">
<!-- bms、pcs 下级和上级在一列 -->
<div class="row-lists pcs-row-lists" v-if="showPcsAndBms">
<div class="item-square">
<div class="row-lists-title" v-if="showPcs">PCS({{pcs.length}})</div>
<div class="row-lists-title" v-if="showBms">BMS({{bms.length}})</div>
</div>
<!-- 上下级块 class区分-->
<div class="item-square pcs-has-children-item-square" :class="{'no-bms-list':!showBms}" v-for="(item,index) in pcsHasChildren" :key="index+'pcsHasChildren'">
<!-- 左边的上级 上级只有一个-->
<div class="item-lists parent-item-lists">
<!-- 上级设备-->
<div class="items normal-items-arrow">
<div class="items-inner">
<div style="text-align: center;margin-bottom:10px;">
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
</div>
<img v-if="item.pictureUrl" :src="item.pictureUrl">
<img v-else :src="require('@/assets/images/ems/pcs.png')"/>
<div class="name">{{item.deviceName}}</div>
</div>
</div>
</div>
<!-- 右边的下级 下级有多个-->
<div class="item-lists children-item-lists">
<!-- 下级设备 循环生成-->
<div class="items children-items-arrow bms-children-arrow" v-for="children in item.children" :key="children.deviceId">
<div class="items-inner">
<div style="text-align: center;margin-bottom:10px;">
<div class="status" :class="children.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[children.communicationStatus] || '-'}}</div>
</div>
<img v-if="children.pictureUrl" :src="children.pictureUrl">
<img v-else :src="require('@/assets/images/ems/bms.png')"/>
<div class="name">{{children.deviceName}}</div>
</div>
</div>
</div>
</div>
<!-- 没有上下级关系的bms、pcs-->
<div class="item-square" :class="{'no-bms-list':!showBms}">
<!-- 左边没有下级的pcs-->
<div class="item-lists">
<div class="items normal-items-arrow" v-for="item in pcsNoChildren" :key="item.deviceId">
<div class="items-inner">
<div style="text-align: center;margin-bottom:10px;">
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
</div>
<img v-if="item.pictureUrl" :src="item.pictureUrl">
<img v-else :src="require('@/assets/images/ems/pcs.png')"/>
<div class="name">{{item.deviceName}}</div>
</div>
</div>
</div>
<!-- 右边没有上级的bms-->
<div class="item-lists">
<!-- 下级设备 循环生成-->
<div class="items children-items-arrow" v-for="item in bmsNoParent" :key="item.deviceId">
<div class="items-inner">
<div style="text-align: center;margin-bottom:10px;">
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
</div>
<img v-if="item.pictureUrl" :src="item.pictureUrl">
<img v-else :src="require('@/assets/images/ems/bms.png')"/>
<div class="name">{{item.deviceName}}</div>
</div>
</div>
</div>
</div>
</div>
<!-- 电表-->
<div class="row-lists" v-if="showDb">
<div class="item-square">
<div class="row-lists-title" style="width:100%;">电表({{db.length}})</div>
</div>
<div class="item-square">
<!-- 左边的下级 下级有多个-->
<div class="item-lists">
<!-- 下级设备 循环生成-->
<div class="items normal-items-arrow" v-for="item in db" :key="item.deviceId">
<div class="items-inner">
<div style="text-align: center;margin-bottom:10px;">
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
</div>
<img v-if="item.pictureUrl" :src="item.pictureUrl">
<img v-else :src="require('@/assets/images/ems/bms.png')"/>
<div class="name">{{item.deviceName}}</div>
</div>
</div>
</div>
</div>
</div>
<!--冷却-->
<div class="row-lists" v-if="showLq">
<div class="item-square">
<div class="row-lists-title" style="width:100%;">冷却({{lq.length}})</div>
</div>
<div class="item-square">
<div class="item-lists">
<div class="items normal-items-arrow" v-for="item in lq" :key="item.deviceId">
<div class="items-inner">
<div style="text-align: center;margin-bottom:10px;">
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
</div>
<img v-if="item.pictureUrl" :src="item.pictureUrl">
<img v-else :src="require('@/assets/images/ems/bms.png')"/>
<div class="name">{{item.deviceName}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<el-empty v-show="empty" :image-size="200"></el-empty>
</div>
</template>
<script>
import {getDeviceList} from'@/api/ems/site'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {mapState} from "vuex";
export default {
name: 'DzjkZxlt',
mixins: [getQuerySiteId],
data() {
return {
loading:false,
pcs :[],
bms:[],
db:[],
lq:[],
pcsHasChildren:[],
pcsNoChildren:[],
bmsNoParent:[]
}
},
computed:{
...mapState({
communicationStatusOptions:(state)=>state.ems.communicationStatusOptions
}),
showPcs(){
return this.pcs.length>0
},
showBms(){
return this.bms.length>0
},
showDb(){
return this.db.length>0
},
showLq(){
return this.lq.length>0
},
showPcsAndBms(){
return this.showPcs || this.showBms
},
empty(){
return !this.showBms && !this.showPcs && !this.showDb && !this.showLq
},
},
methods: {
init(){
this.pcs = []
this.bms = []
this.lq=[]
this.db=[]
this.bmsNoParent=[]
this.loading = true
getDeviceList(this.siteId).then(response => {
const data =JSON.parse(JSON.stringify(response?.data || []))
let pcs = [],bms=[],db=[],lq=[],bmsNoParent=[]
data.forEach(item=>{
// 电表
if(item.deviceCategory === 'AMMETER'){
db.push({...item,children:[]})
}else if(item.deviceCategory === 'PCS'){
// pcs
pcs.push({...item,children:[]})
}else if(item.deviceCategory === 'STACK'){
// bms
bms.push({...item,children:[]})
}else if(item.deviceCategory === 'COOLING'){
// 液冷
lq.push({...item,children:[]})
}
})
bms.forEach((item,index)=>{
if(item.parentId){
pcs.find(pcsItem=>pcsItem.deviceId === item.parentId).children.push(item)
}else{
bmsNoParent.push(item)
}
})
this.pcs = pcs
this.bms = bms
this.lq=lq
this.db=db
this.pcsHasChildren = pcs.filter(item=>item.children.length > 0)
this.pcsNoChildren = pcs.filter(item=>item.children.length === 0)
this.bmsNoParent = bmsNoParent
}).finally(() => {
this.loading = false
})
}
},
}
</script>
<style lang="scss" scoped>
$distance:60px;
$arrowDistance:80px;//margin:60+quare的padding10
$arrowColoe:#5ea9df;
$lineColoe:#5ea9df;
.ems-dashboard-editor-container {
background-color: #ffffff;
padding:0;
.container{
position: relative;
overflow-x: auto;
}
//云 、计算机 、箭头
.top{
width: 280px;
font-size: 30px;
line-height: 40px;
font-weight: 500;
display: flex;
flex-direction: column;
//云 样式
.cloud-container{
padding-top:40px;
margin:0 auto;
.cloud {
width: 150px;
height: 60px;
background: #cbebfd;
border-radius: 200px;
position: relative;
text-align: center;
color:#666666;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background:#cbebfd;
width: 80px;
height: 80px;
border-radius: 50%;
}
.cloud:before {
top: -28px;
left: 20px;
}
.cloud:after {
top: -31px;
right: 20px;
}
}
//双箭头
.double-arrows {
height: 50px;
margin:20px 0;
text-align: center;
.top-arrows,.bottom-arrows{
height: 100%;
width: 6px;
background-color: $arrowColoe;
display: inline-block;
margin: 0 10px;
position: relative;
vertical-align: super;
&::after {
content: '';
position: absolute;
left:0;
width: 0;
height: 0;
}
}
.top-arrows{
vertical-align: super;
}
.top-arrows::after {
bottom: -24px;
border-bottom: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 14px solid $arrowColoe;
left: -9px;
}
.bottom-arrows{
margin-top:12px;
&::after {
top: -24px;
border-top: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 14px solid $arrowColoe;
left: -9px;
}
}
}
//电脑
.computer{
margin:20px auto;
text-align: center;
color:#666666;
position: relative;
img {
width: auto;
height: 100px;
display: block;
}
}
.arrow{
height: 50px;
width: 30px;
border-radius: 5px;
background-color: $arrowColoe;
position: relative;
margin:0 auto;
&::after{
content: "";
position: absolute;
width: 0;
height: 0;
left: -9px;
border-top: 24px solid $arrowColoe;
border-left: 24px solid transparent;
border-bottom: 24px solid transparent;
border-right: 24px solid transparent;
bottom: -44px;
}
}
}
.bottom{
z-index:1;
box-sizing: border-box;
margin-top:50px;
.zxlt-row{
display: flex;
padding:20px $distance;
position: relative;
width: fit-content;
&:before{
content: '';
display: block;
width:calc(100% - 100px);
height:1px;
background-color: $lineColoe;
position:absolute;
top:0;
left: $distance/2;
}
.row-lists{
height: fit-content;
position: relative;
&:before{
content: '';
display: block;
height: 100%;
width: 1px;
position: absolute;
left:-($distance/2);
top:-20px;
background-color: $lineColoe;
}
//pcs列 bms右侧的边框
&.pcs-row-lists{
&:after{
content: '';
display: block;
height: 100%;
width: 1px;
position: absolute;
right:-(($distance/2) + 1);
top:-20px;
background-color: $lineColoe;
}
}
&:not(:last-child){
margin-right: $distance;
}
.item-square{
//左右 两列
display: flex;
vertical-align: middle;
align-items: flex-start;
padding:10px;
border-radius: 5px;
&:not(:last-child){
margin-bottom: 40px;
}
.row-lists-title{
font-size: 20px;
line-height: 20px;
color: #333333;
font-weight: 500;
text-align: center;
flex: 1;
}
.item-lists{
position: relative;
&:not(:last-child){
margin-right:$distance;
}
//每个设备
.items{
background-color: #cbebfd;
position: relative;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0.5);
//普通设备 箭头方向
&.normal-items-arrow{
&:before{
content: '';
display: block;
width:($arrowDistance/2) - 15;
height: 4px;
background-color: $arrowColoe;
position: absolute;
top:50%;
left: -($arrowDistance/2);
transform: translateY(-50%);
}
&:after{
content: '';
display: block;
height: 0;
width: 0;
border-left: 10px solid #5ea9df;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
position: absolute;
top: 50%;
left: -15px;
transform: translateY(-50%);
}
}
//下级的箭头
&.children-items-arrow{
&:before{
content: '';
display: block;
width:($arrowDistance/2) - 15;
height: 4px;
background-color: $arrowColoe;
position: absolute;
top:50%;
right: -($arrowDistance/2);
transform: translateY(-50%);
}
&:after{
content: '';
display: block;
height: 0;
width: 0;
border-right: 10px solid #5ea9df;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
position: absolute;
top: 50%;
right: -15px;
transform: translateY(-50%);
}
}
&:not(:last-child){
margin-bottom: 15px;
}
.items-inner{
background-color: #ffffff;
border-radius: 5px;
padding:10px;
width:130px;
text-align: center;
}
img{
width: 80px;
height: auto;
display: block;
z-index:2;
margin: 0 auto;
}
.name{
text-align: center;
margin-top:10px;
font-size: 14px;
line-height: 20px;
z-index:2;
}
.status{
z-index:2;
margin-top:10px;
font-size: 14px;
line-height: 20px;
position: relative;
padding-left:20px;
display: inline;
&.status-normal {
&:before {
content: "";
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #05AEA3;
position: absolute;
top:50%;
left:0;
transform: translate(0,-50%);
}
}
&.status-warn{
&:before{
content: "";
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #FC6B69;
position: absolute;
top:50%;
left:0;
transform: translate(0,-50%);
}
}
}
}
}
.children-item-lists{
//todo 手动修改
&:before{
content: '';
display: block;
width:40px;
height: 4px;
background-color: $arrowColoe;
position: absolute;
top:50%;
left: -50px;
transform:translateY(-50%);
}
&:after{
content: '';
display: block;
height: 0;
width: 0;
border-left: 10px solid #5ea9df;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
position: absolute;
top: 50%;
left: -14px;
transform:translateY(-50%);
}
}
}
.pcs-has-children-item-square{
vertical-align: middle;
align-items: center;
background-color: #ffefad;
}
.no-bms-list{
.item-lists{
&:not(:last-child){
margin-right:0;
}
}
}
}
}
}
}
</style>

62
src/views/ems/dzjk/zxlt/index.vue
View File

@ -34,10 +34,10 @@
<div
class="status"
:class="
item.deviceStatus === '1' ? 'status-running' : ''
item.communicationStatus === '0' ? 'status-running' : ''
"
>
{{ deviceStatusOptions[item.deviceStatus] }}
{{ communicationStatusOptions[item.communicationStatus] }}
</div>
<div class="row-items-img">
<img
@ -68,10 +68,10 @@
<div
class="status"
:class="
item.deviceStatus === '1' ? 'status-running' : ''
item.communicationStatus === '0' ? 'status-running' : ''
"
>
{{ deviceStatusOptions[item.deviceStatus] }}
{{ communicationStatusOptions[item.communicationStatus] }}
</div>
<div class="row-items-img">
<img
@ -107,10 +107,10 @@
<div
class="status"
:class="
item.deviceStatus === '1' ? 'status-running' : ''
item.communicationStatus === '0' ? 'status-running' : ''
"
>
{{ deviceStatusOptions[item.deviceStatus] }}
{{ communicationStatusOptions[item.communicationStatus] }}
</div>
<div class="row-items-img row-items-img-bms">
<div style="position:relative;">
@ -150,10 +150,10 @@
<div
class="status"
:class="
item.deviceStatus === '1' ? 'status-running' : ''
item.communicationStatus === '0' ? 'status-running' : ''
"
>
{{ deviceStatusOptions[item.deviceStatus] }}
{{ communicationStatusOptions[item.communicationStatus] }}
</div>
<div class="row-items-img">
<img
@ -171,14 +171,14 @@
<div
class="status"
:class="
item.children[0].deviceStatus === '1'
item.children[0].communicationStatus === '0'
? 'status-running'
: ''
"
>
{{
deviceStatusOptions[
item.children[0].deviceStatus
communicationStatusOptions[
item.children[0].communicationStatus
]
}}
</div>
@ -207,7 +207,6 @@
import { getDeviceList } from "@/api/ems/site";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { mapState } from "vuex";
export default {
name: "DzjkZxlt",
mixins: [getQuerySiteId],
@ -223,8 +222,8 @@ export default {
},
computed: {
...mapState({
deviceStatusOptions: (state) =>
state.ems.deviceStatusOptions,
communicationStatusOptions: (state) =>
state.ems.communicationStatusOptions,
}),
showPcs() {
@ -323,14 +322,13 @@ $lineColor: #86bcc7;
.ems-dashboard-editor-container {
background-color: #ffffff;
padding: 0;
padding: 30px;
color: #666666;
.container {
display: flex;
position: relative;
}
//云 、计算机 、箭头
.top {
z-index: 2;
@ -345,7 +343,6 @@ $lineColor: #86bcc7;
//云 样式
.cloud-container {
margin: 0 auto;
.cloud {
width: 60px;
height: 26px;
@ -357,7 +354,6 @@ $lineColor: #86bcc7;
font-size: 14px;
line-height: 26px;
}
.cloud:before,
.cloud:after {
content: "";
@ -367,24 +363,20 @@ $lineColor: #86bcc7;
height: 30px;
border-radius: 100%;
}
.cloud:before {
top: -9px;
left: 8px;
}
.cloud:after {
top: -6px;
right: 9px;
}
}
//双箭头
.double-arrows {
height: fit-content;
margin: 0 10px;
text-align: center;
.top-arrows,
.bottom-arrows {
height: 4px;
@ -392,7 +384,6 @@ $lineColor: #86bcc7;
background-color: #5ea9df;
margin: 0 10px;
position: relative;
&::after {
content: "";
position: absolute;
@ -401,11 +392,9 @@ $lineColor: #86bcc7;
height: 0;
}
}
.top-arrows {
vertical-align: super;
}
.top-arrows::after {
top: -4px;
border-bottom: 6px solid transparent;
@ -414,10 +403,8 @@ $lineColor: #86bcc7;
border-top: 6px solid transparent;
left: -11px;
}
.bottom-arrows {
margin-top: 8px;
&::after {
top: -4px;
border-top: 6px solid transparent;
@ -438,7 +425,6 @@ $lineColor: #86bcc7;
font-weight: bold;
position: relative;
background: #fff;
img {
width: 80px;
height: auto;
@ -446,7 +432,6 @@ $lineColor: #86bcc7;
}
}
}
.outer-border {
position: relative;
width: fit-content;
@ -482,10 +467,8 @@ $lineColor: #86bcc7;
color: #000;
font-weight: bolder;
}
.row-lists {
position: relative;
.row-items {
position: relative;
padding: 5px 0;
@ -520,20 +503,16 @@ $lineColor: #86bcc7;
border-radius: 2px;
background: #aaaaaa;
color: #ffffff;
&.status-running {
background: #00c69c;
}
}
// 图片+设备名称
.row-items-img {
position: relative;
padding-top: 12px;
&.row-items-img-bms{
padding-top: 14px;
.num{
position: absolute;
top: -2px;
@ -547,26 +526,21 @@ $lineColor: #86bcc7;
color: #fff;
}
}
img {
width: 80px;
height: auto;
display: block;
position: relative;
&.img-lq {
width: 50px;
}
&.img-pcs {
width: 50px;
}
&.img-db {
width: 56px;
}
}
.name {
position: absolute;
top: 1px;
@ -585,24 +559,19 @@ $lineColor: #86bcc7;
&:not(:last-child) {
margin-right: 30px;
}
.row-items {
display: flex;
&::after {
display: none;
}
.parent-dash {
position: relative;
z-index: 2;
background-color: #fff;
> div {
z-index: 2;
position: inherit;
}
&::after {
z-index: 1;
content: "";
@ -616,19 +585,16 @@ $lineColor: #86bcc7;
transform: scale(0.4, 1);
}
}
.children-dash {
position: relative;
z-index: 2;
background-color: #fff;
margin: -20px 0 0 26px;
height: fit-content;
> div {
z-index: 2;
position: inherit;
}
&::after {
z-index: 1;
content: "";

45
src/views/ems/home/index.vue
View File

@ -1,25 +1,25 @@
<template>
<div class="ems-dashboard-editor-container">
<div class="ems-dashboard-editor-container" v-loading="loading">
<zd-info></zd-info>
<div class="ems-content-container ems-content-container-padding">
<div class="content-title">数据概览</div>
<el-row :gutter="15" style="background:#fff;margin:30px 0;">
<el-col :xs="24" :sm="12" :lg="12" v-loading="chartLoading.dlzbchart">
<el-col :xs="24" :sm="12" :lg="12">
<dlzb-chart ref="dlzbchart"/>
</el-col>
<el-col :xs="24" :sm="12" :lg="12" v-loading="chartLoading.xtxlchart">
<el-col :xs="24" :sm="12" :lg="12">
<xtxl-chart ref="xtxlchart"/>
</el-col>
</el-row>
<el-row :gutter="15" style="background:#fff;margin:0;">
<el-col :xs="24" :sm="8" :lg="8" v-loading="chartLoading.gjqsChart">
<el-col :xs="24" :sm="8" :lg="8">
<gjqs-chart ref="gjqsChart"/>
</el-col>
<el-col :xs="24" :sm="8" :lg="8" v-loading="chartLoading.sbgjzbChart">
<el-col :xs="24" :sm="8" :lg="8">
<sbgjzb-chart ref="sbgjzbChart"/>
</el-col>
<el-col :xs="24" :sm="8" :lg="8" v-loading="chartLoading.gjdjfbChart">
<el-col :xs="24" :sm="8" :lg="8">
<gjdjfb-chart ref="gjdjfbChart"/>
</el-col>
</el-row>
@ -47,45 +47,24 @@ export default {
},
data() {
return {
chartLoading: {
dlzbchart: false,
xtxlchart: false,
gjqsChart: false,
sbgjzbChart: false,
gjdjfbChart: false
}
loading:false,
}
},
methods: {
setChartLoading(loading) {
this.chartLoading = {
dlzbchart: loading,
xtxlchart: loading,
gjqsChart: loading,
sbgjzbChart: loading,
gjdjfbChart: loading
}
},
hideChartLoading(key) {
this.$set(this.chartLoading, key, false)
}
},
mounted() {
this.setChartLoading(true)
this.loading = true
dataList().then(response => {
const data = JSON.parse(JSON.stringify(response?.data || {}))
this.$refs.dlzbchart.initChart(data?.elecDataList || [])
this.hideChartLoading('dlzbchart')
this.$refs.xtxlchart.initChart(data?.sysEfficList || [])
this.hideChartLoading('xtxlchart')
this.$refs.gjqsChart.initChart(data?.alarmDataList || [])
this.hideChartLoading('gjqsChart')
this.$refs.sbgjzbChart.initChart(data?.deviceAlarmList || [])
this.hideChartLoading('sbgjzbChart')
this.$refs.gjdjfbChart.initChart(data?.alarmLevelList || [])
this.hideChartLoading('gjdjfbChart')
}).catch(() => {
this.setChartLoading(false)
}).finally(() => {
this.loading = false
})
}
}

35
src/views/ems/search/DateTimeSelect.vue
View File

@ -32,7 +32,7 @@ export default {
return this.dataUnit === 3 ? 'daterange' : 'datetimerange'
},
valueFormat(){
return this.dataUnit === 3 ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'
return this.dataUnit === 3 ? 'yyyy-MM-dd' :this.dataUnit === 2 ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd HH:mm:ss'
},
disabledNextBtn(){
if(this.dateRange && this.dateRange.length ===2){
@ -83,32 +83,31 @@ export default {
if(this.dateRange && this.dateRange.length>0){
const {dataUnit} = this
const [start,end] = this.dateRange
if([1,2].includes(dataUnit)){
const startTime = new Date(start),endTime=new Date(end)
const timeDis= 7 * 24 * 60 * 60 * 1000
const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
if(endTime - startTime > timeDis){
this.$message.error(`按分钟或小时查询数据,时间范围不能超过7天`)
return
}
}
this.$message.error(`时间范围不能超过${dataUnit === 3 ? '30天' : dataUnit === 2 ? '24小时' : '1小时'}`)
}else{
this.$emit('updateDate',this.dateRange || [])
}
}else{
this.$emit('updateDate',this.dateRange || [])
}
},
timeLine(type){
if(!this.dateRange || !this.dateRange[0] || !this.dateRange[1]) return
const nowStartTimes = new Date(this.dateRange[0]).getTime(),nowEndTimes = new Date(this.dateRange[1]).getTime(),maxTime = new Date(this.defaultDateRange[1]).getTime()
const nowDis = nowEndTimes - nowStartTimes//用户当前选择时间差 可能=0
if(!this.dateRange) return
//baseTime,maxTime 毫秒数
const baseDis = this.dataUnit === 3 ? 24 * 60 * 60 * 1000 :60 * 60 * 1000
const calcDis = nowDis === 0 ? baseDis : nowDis
let start = type === 'before' ? nowStartTimes - calcDis : nowStartTimes + calcDis
if(start>maxTime) start=maxTime
let end = type === 'before' ? nowEndTimes - calcDis : nowEndTimes + calcDis
if(end>maxTime) end=maxTime
this.dateRange = [formatDate(start,this.dataUnit !== 3),formatDate(end,this.dataUnit !== 3)]
this.$emit('updateDate',this.dateRange)
const baseTimes= this.dataUnit === 3 ? 24 * 60 * 60 * 1000 :this.dataUnit === 2 ? 60 * 60 * 1000 : 60 * 1000
const baseDis = this.dataUnit === 3 ? 30 :this.dataUnit === 2 ? 24 : 60
let baseTime = type === 'before' ? new Date(this.dateRange[0]).getTime() - baseTimes :new Date(this.dateRange[1]).getTime() + baseTimes ,
maxTime = new Date(this.defaultDateRange[1]).getTime()
//updateTime 毫秒数
let updateTime = type === 'before' ? baseTime - baseDis * baseTimes : baseTime + baseDis * baseTimes
if(type === 'next' && updateTime >= maxTime) updateTime = maxTime
const start = formatDate(type === 'before' ? updateTime : baseTime,this.dataUnit !== 3)
const end = formatDate(type === 'before' ? baseTime : updateTime,this.dataUnit !== 3)
this.dateRange = [start,end]
this.$emit('updateDate',this.dateRange || [])
},
}
}

1092
src/views/ems/search/index.vue
View File

File diff suppressed because it is too large Load Diff

183
src/views/ems/site/dataCorrection/AddChargeDataCorrection.vue
View File

@ -1,183 +0,0 @@
<template>
<el-dialog
:visible.sync="dialogVisible"
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="false"
destroy-on-close
lock-scroll
append-to-body
width="760px"
class="ems-dialog"
:title="mode === 'add' ? '新增充放电收益修正' : '编辑充放电收益修正'"
>
<el-form
ref="formRef"
v-loading="loading"
:model="formData"
:rules="rules"
label-width="120px"
size="medium"
class="form-grid"
>
<el-form-item label="站点" prop="siteId">
<el-input v-model="formData.siteId" placeholder="请先在顶部选择站点" disabled />
</el-form-item>
<el-form-item label="数据日期" prop="dateTime">
<el-date-picker
v-model="formData.dateTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择数据日期"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="总充电量" prop="totalChargeData">
<el-input-number v-model="formData.totalChargeData" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="总放电量" prop="totalDischargeData">
<el-input-number v-model="formData.totalDischargeData" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="当日充电量" prop="chargeData">
<el-input-number v-model="formData.chargeData" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="当日放电量" prop="dischargeData">
<el-input-number v-model="formData.dischargeData" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="累计收益" prop="totalRevenue">
<el-input-number v-model="formData.totalRevenue" :controls="false" :min="-999999999" :max="999999999" :step="0.0001" :precision="4" style="width: 100%" />
</el-form-item>
<el-form-item label="当日收益" prop="dayRevenue">
<el-input-number v-model="formData.dayRevenue" :controls="false" :min="-999999999" :max="999999999" :step="0.0001" :precision="4" style="width: 100%" />
</el-form-item>
<el-form-item label="备注" prop="remark" class="full-row">
<el-input v-model="formData.remark" type="textarea" :rows="3" maxlength="300" show-word-limit />
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" :loading="saving" @click="saveDialog">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import {
addDailyChargeData,
getDailyChargeDataDetail,
updateDailyChargeData,
} from '@/api/ems/site'
const buildEmptyForm = () => ({
id: '',
siteId: '',
dateTime: '',
totalChargeData: null,
totalDischargeData: null,
chargeData: null,
dischargeData: null,
totalRevenue: null,
dayRevenue: null,
remark: '',
})
export default {
name: 'AddChargeDataCorrection',
data() {
return {
dialogVisible: false,
mode: 'add',
loading: false,
saving: false,
formData: buildEmptyForm(),
rules: {
siteId: [{ required: true, message: '请先在顶部选择站点', trigger: 'blur' }],
dateTime: [{ required: true, message: '请选择数据日期', trigger: 'change' }],
},
}
},
methods: {
getRouteSiteId() {
const siteId = this.$route?.query?.siteId
return siteId === undefined || siteId === null ? '' : String(siteId).trim()
},
showDialog(id, siteId = '') {
this.dialogVisible = true
if (id) {
this.mode = 'edit'
this.formData.id = id
this.fetchDetail(id)
} else {
this.mode = 'add'
this.formData = buildEmptyForm()
this.formData.siteId = siteId || this.getRouteSiteId()
}
},
fetchDetail(id) {
this.loading = true
getDailyChargeDataDetail(id)
.then((res) => {
this.formData = Object.assign(buildEmptyForm(), res?.data || {})
})
.finally(() => {
this.loading = false
})
},
saveDialog() {
this.$refs.formRef.validate((valid) => {
if (!valid) return
this.saving = true
const request = this.mode === 'add' ? addDailyChargeData : updateDailyChargeData
const payload = {
id: this.formData.id,
siteId: this.formData.siteId,
dateTime: this.formData.dateTime,
totalChargeData: this.formData.totalChargeData,
totalDischargeData: this.formData.totalDischargeData,
chargeData: this.formData.chargeData,
dischargeData: this.formData.dischargeData,
totalRevenue: this.formData.totalRevenue,
dayRevenue: this.formData.dayRevenue,
remark: this.formData.remark,
}
request(payload)
.then((res) => {
if (res?.code === 200) {
this.$emit('update')
this.closeDialog()
}
})
.finally(() => {
this.saving = false
})
})
},
closeDialog() {
this.dialogVisible = false
this.formData = buildEmptyForm()
this.$nextTick(() => {
this.$refs.formRef && this.$refs.formRef.resetFields()
})
},
},
}
</script>
<style lang="scss" scoped>
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 16px;
.full-row {
grid-column: 1 / span 2;
}
}
</style>

218
src/views/ems/site/dataCorrection/AddDataCorrection.vue
View File

@ -1,218 +0,0 @@
<template>
<el-dialog
:visible.sync="dialogVisible"
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="false"
destroy-on-close
lock-scroll
append-to-body
width="760px"
class="ems-dialog"
:title="mode === 'add' ? '新增数据修正' : '编辑数据修正'"
>
<el-form
ref="formRef"
v-loading="loading"
:model="formData"
:rules="rules"
label-width="120px"
size="medium"
class="form-grid"
>
<el-form-item label="站点" prop="siteId">
<el-input v-model="formData.siteId" placeholder="请先在顶部选择站点" disabled />
</el-form-item>
<el-form-item label="数据日期" prop="dataDate">
<el-date-picker
v-model="formData.dataDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择数据日期"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="数据小时" prop="dataHour">
<el-input-number
v-model="formData.dataHour"
:controls="false"
:min="0"
:max="23"
:step="1"
:precision="0"
placeholder="0-23"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="尖充电差值" prop="peakChargeDiff">
<el-input-number v-model="formData.peakChargeDiff" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="尖放电差值" prop="peakDischargeDiff">
<el-input-number v-model="formData.peakDischargeDiff" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="峰充电差值" prop="highChargeDiff">
<el-input-number v-model="formData.highChargeDiff" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="峰放电差值" prop="highDischargeDiff">
<el-input-number v-model="formData.highDischargeDiff" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="平充电差值" prop="flatChargeDiff">
<el-input-number v-model="formData.flatChargeDiff" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="平放电差值" prop="flatDischargeDiff">
<el-input-number v-model="formData.flatDischargeDiff" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="谷充电差值" prop="valleyChargeDiff">
<el-input-number v-model="formData.valleyChargeDiff" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="谷放电差值" prop="valleyDischargeDiff">
<el-input-number v-model="formData.valleyDischargeDiff" :controls="false" :min="-999999999" :max="999999999" :step="0.001" :precision="3" style="width: 100%" />
</el-form-item>
<el-form-item label="计算时间" prop="calcTime" class="full-row">
<el-date-picker
v-model="formData.calcTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择计算时间"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="备注" prop="remark" class="full-row">
<el-input v-model="formData.remark" type="textarea" :rows="3" maxlength="300" show-word-limit />
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" :loading="saving" @click="saveDialog">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import {
addDailyEnergyData,
getDailyEnergyDataDetail,
updateDailyEnergyData,
} from '@/api/ems/site'
const buildEmptyForm = () => ({
id: '',
siteId: '',
dataDate: '',
dataHour: null,
peakChargeDiff: null,
peakDischargeDiff: null,
highChargeDiff: null,
highDischargeDiff: null,
flatChargeDiff: null,
flatDischargeDiff: null,
valleyChargeDiff: null,
valleyDischargeDiff: null,
calcTime: '',
remark: '',
})
export default {
name: 'AddDataCorrection',
data() {
return {
dialogVisible: false,
mode: 'add',
loading: false,
saving: false,
formData: buildEmptyForm(),
rules: {
siteId: [{ required: true, message: '请先在顶部选择站点', trigger: 'blur' }],
dataDate: [{ required: true, message: '请选择数据日期', trigger: 'change' }],
dataHour: [
{
validator: (rule, value, callback) => {
if (value === '' || value === null || value === undefined) {
callback()
return
}
if (Number.isInteger(value) && value >= 0 && value <= 23) {
callback()
return
}
callback(new Error('数据小时需为 0-23 的整数'))
},
trigger: 'change',
},
],
},
}
},
methods: {
getRouteSiteId() {
const siteId = this.$route?.query?.siteId
return siteId === undefined || siteId === null ? '' : String(siteId).trim()
},
showDialog(id, siteId = '') {
this.dialogVisible = true
if (id) {
this.mode = 'edit'
this.formData.id = id
this.fetchDetail(id)
} else {
this.mode = 'add'
this.formData = buildEmptyForm()
this.formData.siteId = siteId || this.getRouteSiteId()
}
},
fetchDetail(id) {
this.loading = true
getDailyEnergyDataDetail(id)
.then((res) => {
this.formData = Object.assign(buildEmptyForm(), res?.data || {})
})
.finally(() => {
this.loading = false
})
},
saveDialog() {
this.$refs.formRef.validate((valid) => {
if (!valid) return
this.saving = true
const request = this.mode === 'add' ? addDailyEnergyData : updateDailyEnergyData
request(this.formData)
.then((res) => {
if (res?.code === 200) {
this.$emit('update')
this.closeDialog()
}
})
.finally(() => {
this.saving = false
})
})
},
closeDialog() {
this.dialogVisible = false
this.formData = buildEmptyForm()
this.$nextTick(() => {
this.$refs.formRef && this.$refs.formRef.resetFields()
})
},
},
}
</script>
<style lang="scss" scoped>
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 16px;
.full-row {
grid-column: 1 / span 2;
}
}
</style>

187
src/views/ems/site/dataCorrection/DailyChargeDataTab.vue
View File

@ -1,187 +0,0 @@
<template>
<div style="background-color: #ffffff" v-loading="loading">
<el-form :inline="true" class="select-container" @submit.native.prevent>
<el-form-item label="数据日期">
<el-date-picker
v-model="form.dateTime"
type="date"
value-format="yyyy-MM-dd"
clearable
placeholder="请选择日期"
style="width: 180px"
/>
</el-form-item>
<el-form-item>
<el-button native-type="button" type="primary" @click="onSearch">搜索</el-button>
<el-button native-type="button" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="openDialog('')">新增</el-button>
<el-table
:data="tableData"
class="common-table"
max-height="620px"
stripe
style="width: 100%; margin-top: 20px"
>
<el-table-column label="站点" prop="siteId" min-width="120" />
<el-table-column label="数据日期" prop="dateTime" width="120" />
<el-table-column label="总充电量" prop="totalChargeData" min-width="110" />
<el-table-column label="总放电量" prop="totalDischargeData" min-width="110" />
<el-table-column label="当日充电量" prop="chargeData" min-width="110" />
<el-table-column label="当日放电量" prop="dischargeData" min-width="110" />
<el-table-column label="累计收益" prop="totalRevenue" min-width="110" />
<el-table-column label="当日收益" prop="dayRevenue" min-width="110" />
<el-table-column label="备注" prop="remark" min-width="180" show-overflow-tooltip />
<el-table-column fixed="right" label="操作" width="150">
<template slot-scope="scope">
<el-button size="mini" type="warning" @click="openDialog(scope.row.id)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</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"
/>
<add-charge-data-correction ref="addChargeDataCorrection" @update="getData" />
</div>
</template>
<script>
import {
deleteDailyChargeData,
getDailyChargeDataList,
} from '@/api/ems/site'
import AddChargeDataCorrection from './AddChargeDataCorrection.vue'
export default {
name: 'DailyChargeDataTab',
components: { AddChargeDataCorrection },
data() {
return {
loading: false,
form: {
siteId: '',
dateTime: '',
},
tableData: [],
pageSize: 10,
pageNum: 1,
totalSize: 0,
}
},
watch: {
'$route.query.siteId'(newSiteId) {
const normalizedSiteId = this.normalizeSiteId(newSiteId)
if (normalizedSiteId === this.form.siteId) {
return
}
this.form.siteId = normalizedSiteId
this.onSearch()
},
},
mounted() {
this.form.siteId = this.normalizeSiteId(this.$route.query.siteId)
this.getData()
},
methods: {
normalizeSiteId(siteId) {
return siteId === undefined || siteId === null ? '' : String(siteId).trim()
},
handleSizeChange(val) {
this.pageSize = val
this.pageNum = 1
this.getData()
},
handleCurrentChange(val) {
this.pageNum = val
this.getData()
},
onSearch() {
this.pageNum = 1
this.getData()
},
onReset() {
this.form = {
siteId: this.form.siteId,
dateTime: '',
}
this.pageNum = 1
this.getData()
},
getData() {
if (!this.form.siteId) {
this.tableData = []
this.totalSize = 0
return
}
this.loading = true
const params = {
pageNum: this.pageNum,
pageSize: this.pageSize,
siteId: this.form.siteId,
}
if (this.form.dateTime) {
params.dateTime = this.form.dateTime
}
getDailyChargeDataList(params)
.then((res) => {
this.tableData = res?.rows || []
this.totalSize = res?.total || 0
})
.finally(() => {
this.loading = false
})
},
openDialog(id) {
this.$refs.addChargeDataCorrection.showDialog(id, this.form.siteId)
},
handleDelete(row) {
this.$confirm('确认要删除该条数据吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose: false,
closeOnClickModal: false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true
deleteDailyChargeData(row.id)
.then((res) => {
if (res?.code === 200) {
done()
}
})
.finally(() => {
instance.confirmButtonLoading = false
})
} else {
done()
}
},
})
.then(() => {
this.$message.success('删除成功!')
this.getData()
})
.catch(() => {})
},
},
}
</script>
<style scoped>
</style>

191
src/views/ems/site/dataCorrection/DailyEnergyDataTab.vue
View File

@ -1,191 +0,0 @@
<template>
<div style="background-color: #ffffff" v-loading="loading">
<el-form :inline="true" class="select-container" @submit.native.prevent>
<el-form-item label="数据日期">
<el-date-picker
v-model="form.dataDate"
type="date"
value-format="yyyy-MM-dd"
clearable
placeholder="请选择日期"
style="width: 180px"
/>
</el-form-item>
<el-form-item>
<el-button native-type="button" type="primary" @click="onSearch">搜索</el-button>
<el-button native-type="button" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="openDialog('')">新增</el-button>
<el-table
:data="tableData"
class="common-table"
max-height="620px"
stripe
style="width: 100%; margin-top: 20px"
>
<el-table-column label="站点" prop="siteId" width="130" />
<el-table-column label="数据日期" prop="dataDate" width="120" />
<el-table-column label="data_hour" prop="dataHour" width="100" />
<el-table-column label="尖充" prop="peakChargeDiff" min-width="90" />
<el-table-column label="尖放" prop="peakDischargeDiff" min-width="90" />
<el-table-column label="峰充" prop="highChargeDiff" min-width="90" />
<el-table-column label="峰放" prop="highDischargeDiff" min-width="90" />
<el-table-column label="平充" prop="flatChargeDiff" min-width="90" />
<el-table-column label="平放" prop="flatDischargeDiff" min-width="90" />
<el-table-column label="谷充" prop="valleyChargeDiff" min-width="90" />
<el-table-column label="谷放" prop="valleyDischargeDiff" min-width="90" />
<el-table-column label="计算时间" prop="calcTime" min-width="170" />
<el-table-column label="备注" prop="remark" min-width="180" show-overflow-tooltip />
<el-table-column fixed="right" label="操作" width="150">
<template slot-scope="scope">
<el-button size="mini" type="warning" @click="openDialog(scope.row.id)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</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"
/>
<add-data-correction ref="addDataCorrection" @update="getData" />
</div>
</template>
<script>
import {
deleteDailyEnergyData,
getDailyEnergyDataList,
} from '@/api/ems/site'
import AddDataCorrection from './AddDataCorrection.vue'
export default {
name: 'DailyEnergyDataTab',
components: { AddDataCorrection },
data() {
return {
loading: false,
form: {
siteId: '',
dataDate: '',
},
tableData: [],
pageSize: 10,
pageNum: 1,
totalSize: 0,
}
},
watch: {
'$route.query.siteId'(newSiteId) {
const normalizedSiteId = this.normalizeSiteId(newSiteId)
if (normalizedSiteId === this.form.siteId) {
return
}
this.form.siteId = normalizedSiteId
this.onSearch()
},
},
mounted() {
this.form.siteId = this.normalizeSiteId(this.$route.query.siteId)
this.getData()
},
methods: {
normalizeSiteId(siteId) {
return siteId === undefined || siteId === null ? '' : String(siteId).trim()
},
handleSizeChange(val) {
this.pageSize = val
this.pageNum = 1
this.getData()
},
handleCurrentChange(val) {
this.pageNum = val
this.getData()
},
onSearch() {
this.pageNum = 1
this.getData()
},
onReset() {
this.form = {
siteId: this.form.siteId,
dataDate: '',
}
this.pageNum = 1
this.getData()
},
getData() {
if (!this.form.siteId) {
this.tableData = []
this.totalSize = 0
return
}
this.loading = true
const params = {
pageNum: this.pageNum,
pageSize: this.pageSize,
siteId: this.form.siteId,
}
if (this.form.dataDate) {
params.dataDate = this.form.dataDate
}
getDailyEnergyDataList(params)
.then((res) => {
this.tableData = res?.rows || []
this.totalSize = res?.total || 0
})
.finally(() => {
this.loading = false
})
},
openDialog(id) {
this.$refs.addDataCorrection.showDialog(id, this.form.siteId)
},
handleDelete(row) {
this.$confirm('确认要删除该条数据吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose: false,
closeOnClickModal: false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true
deleteDailyEnergyData(row.id)
.then((res) => {
if (res?.code === 200) {
done()
}
})
.finally(() => {
instance.confirmButtonLoading = false
})
} else {
done()
}
},
})
.then(() => {
this.$message.success('删除成功!')
this.getData()
})
.catch(() => {})
},
},
}
</script>
<style scoped>
</style>

30
src/views/ems/site/dataCorrection/index.vue
View File

@ -1,30 +0,0 @@
<template>
<div class="ems-dashboard-editor-container" style="background-color: #ffffff">
<el-tabs v-model="activeTab">
<el-tab-pane label="充放电量修正" name="energy" lazy>
<daily-energy-data-tab />
</el-tab-pane>
<el-tab-pane label="充放电收益修正" name="charge" lazy>
<daily-charge-data-tab />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import DailyChargeDataTab from './DailyChargeDataTab.vue'
import DailyEnergyDataTab from './DailyEnergyDataTab.vue'
export default {
name: 'DataCorrection',
components: { DailyEnergyDataTab, DailyChargeDataTab },
data() {
return {
activeTab: 'energy',
}
},
}
</script>
<style scoped>
</style>

140
src/views/ems/site/mqtt/AddMqtt.vue
View File

@ -1,140 +0,0 @@
<template>
<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-input v-model="formData.siteId" placeholder="请先在顶部选择站点" disabled />
</el-form-item>
<el-form-item label="消息等级" prop="qos">
<el-select v-model="formData.qos" placeholder="请选择消息等级">
<el-option :value="1">1</el-option>
<el-option :value="2">2</el-option>
<el-option :value="3">3</el-option>
</el-select>
</el-form-item>
<el-form-item label="订阅topic" prop="mqttTopic">
<el-input v-model="formData.mqttTopic" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="topic描述" prop="topicName">
<el-input v-model="formData.topicName" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="saveDialog">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import {editMqtt,addMqtt,getMqttDetail} from "@/api/ems/site";
export default {
data() {
return {
loading:0,
dialogTableVisible:false,
mode:'',
formData: {
id:'',//设备唯一标识
siteId:'',
qos:'',
topicName:'',
mqttTopic:''
},
rules: {
siteId:[
{ required: true, message: '请先在顶部选择站点', trigger: 'blur'},
],
qos:[
{ required: true, message: '请选择消息等级', trigger: 'blur'},
],
mqttTopic:[
{ required: true, message: '请输入订阅topic', trigger: 'blur'},
],
topicName:[
{ required: true, message: '请输入topic描述', trigger: 'blur'},
],
},
}
},
methods: {
getRouteSiteId() {
const siteId = this.$route?.query?.siteId
return siteId === undefined || siteId === null ? '' : String(siteId).trim()
},
showDialog(id, siteId = ''){
this.dialogTableVisible = true
if(id){
this.mode = 'edit'
this.formData.id = id
this.getDetail(id)
}else{
this.mode = 'add'
this.formData.siteId = siteId || this.getRouteSiteId()
}
},
getDetail(id){
getMqttDetail(id).then(response => {
const {topicName='',mqttTopic='',qos='',siteId=''} = JSON.parse(JSON.stringify(response?.data || {}));
this.formData.mqttTopic=mqttTopic;
this.formData.topicName=topicName;
this.formData.qos=qos;
this.formData.siteId=siteId;
})
},
saveDialog() {
this.$refs.addTempForm.validate(valid => {
if (!valid) return
this.loading+=1
const {
id='',
siteId='',
qos='',
mqttTopic='',//站点ID
topicName='',//设备id
}= this.formData;
if(this.mode === 'add'){
addMqtt( {mqttTopic,topicName,siteId,qos}).then(response => {
if(response.code === 200){
//新增成功
// 关闭弹窗 更新表格
this.$emit('update')
this.closeDialog()
}
}).finally(() => {
this.loading-=1
})
}else{
editMqtt({mqttTopic,topicName,id,siteId,qos}).then(response => {
if(response.code === 200){
//新增成功
// 关闭弹窗 更新表格
this.$emit('update')
this.closeDialog()
}
}).finally(() => {
this.loading-=1
})
}
})
},
closeDialog(){
this.$emit('clear')
// 清空所有数据
this.formData= {
id:'',//设备唯一标识
siteId:'',
qos:'',
mqttTopic:'',
topicName:''
}
this.$refs.addTempForm.resetFields()
this.dialogTableVisible=false
}
}
}
</script>
<style scoped>
</style>

202
src/views/ems/site/mqtt/index.vue
View File

@ -1,202 +0,0 @@
<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="订阅topic">
<el-input
v-model="form.mqttTopic"
clearable
placeholder="请输入订阅topic"
style="width: 150px"
></el-input>
</el-form-item>
<el-form-item label="topic描述">
<el-input
v-model="form.topicName"
clearable
placeholder="请输入topic描述"
style="width: 150px"
></el-input>
</el-form-item>
<el-form-item>
<el-button native-type="button" type="primary" @click="onSearch">搜索</el-button>
<el-button native-type="button" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="addPowerConfig('')">新增</el-button>
<el-table
:data="tableData"
class="common-table"
max-height="600px"
stripe
style="width: 100%;margin-top: 25px">
<el-table-column
label="站点"
prop="siteId">
</el-table-column>
<el-table-column
label="消息等级"
prop="qos">
</el-table-column>
<el-table-column
label="订阅topic"
prop="mqttTopic">
</el-table-column>
<el-table-column
label="topic描述"
prop="topicName">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
style="margin-top:10px;"
type="warning"
@click="addPowerConfig(scope.row.id)">
编辑
</el-button>
<el-button
size="mini"
style="margin-top:10px;"
type="danger"
@click="deleteMqtt(scope.row)">
删除
</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-mqtt ref="addMqtt" @update="getData"/>
</div>
</template>
<script>
import {deleteMqtt,getMqttList} from '@/api/ems/site'
import AddMqtt from './AddMqtt.vue'
export default {
name: "Mqtt",
components: {AddMqtt},
computed: { },
watch: {
'$route.query.siteId'(newSiteId) {
const normalizedSiteId = this.hasValidSiteId(newSiteId) ? String(newSiteId).trim() : ''
if (normalizedSiteId === this.form.siteId) {
return
}
this.form.siteId = normalizedSiteId
this.onSearch()
}
},
data() {
return {
form:{
siteId:"",
topicName:'',
mqttTopic:''
},
loading:false,
tableData:[],
pageSize:10,//分页栏当前每个数据总数
pageNum:1,//分页栏当前页数
totalSize:0,//table表格数据总数
}
},
methods:{
hasValidSiteId(siteId) {
return !!(siteId !== undefined && siteId !== null && String(siteId).trim())
},
// 分页
handleSizeChange(val) {
this.pageSize = val;
this.$nextTick(()=>{
this.getData()
})
},
handleCurrentChange(val) {
this.pageNum = val
this.$nextTick(()=>{
this.getData()
})
},
// 搜索
onSearch(){
this.pageNum =1//每次搜索从1开始搜索
this.getData()
},
onReset(){
this.form={
siteId:this.form.siteId,
topicName:'',
mqttTopic:''
}
this.pageNum =1//每次搜索从1开始搜索
this.getData()
},
getData(){
if (!this.form.siteId) {
this.tableData = []
this.totalSize = 0
return
}
this.loading=true;
const {mqttTopic,topicName,siteId} = this.form;
const {pageNum,pageSize} = this;
getMqttList({pageNum,pageSize,mqttTopic,topicName,siteId}).then(response => {
this.tableData=response?.rows || [];
this.totalSize = response?.total || 0
}).finally(() => {this.loading=false})
},
addPowerConfig(id=''){
this.$refs.addMqtt.showDialog(id, this.form.siteId);
},
deleteMqtt(row){
this.$confirm(`确认要删除该配置吗?`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
deleteMqtt(row.id).then(response => {
response.code === 200 && done();
}).finally(() => {
instance.confirmButtonLoading = false;
})
} else {
done();
}
}
}).then(() => {
//只有在废弃成功的情况下会走到这里
this.$message({
type: 'success',
message: '删除成功!'
});
this.getData()
//调用接口 更新表格数据
}).catch(() => {
//取消关机
});
},
},
mounted() {
this.form.siteId = this.hasValidSiteId(this.$route.query.siteId) ? String(this.$route.query.siteId).trim() : ''
this.getData()
}
}
</script>

1800
src/views/ems/site/pointConfig/index.vue
View File

File diff suppressed because it is too large Load Diff

296
src/views/ems/site/powerTariff/AddPowerTariff.vue
View File

@ -1,296 +0,0 @@
//选择年月 配置尖峰平谷对应的电价 配置24小时选择对应的尖峰平谷
<template>
<div>
<el-dialog v-loading="loading" width="780px" :visible.sync="dialogTableVisible" class="ems-dialog" title="电价配置" :close-on-click-modal="false" :show-close="false">
<div class="items-container">
<div class="item-title">站点:</div>
<div class="item-content">
<el-input v-model="siteId" placeholder="请先在顶部选择站点" disabled />
</div>
</div>
<div class="items-container">
<div class="item-title">时间:</div>
<div class="item-content">
<el-date-picker
v-model="powerDate"
format="yyyy-MM"
value-format="yyyy-MM"
type="month"
placeholder="请选择月份"
:disabled="mode === 'edit'"
>
</el-date-picker>
</div>
</div>
<div style="display: flex">
<div class="items-container price-types" v-for="item in priceTypeOptions" :key="item.id">
<div class="item-title">{{item.name}}:</div>
<div class="item-content">
<el-input
placeholder="请输入价格"
v-model="item.price">
</el-input>
</div>
</div>
</div>
<div class="items-container">
<div class="item-title">
<el-button
@click.native.prevent="addRow"
block
type="primary"
size="mini">
新增时间段配置
</el-button>
</div>
<div class="item-content">
<div class="time-lists-container">
<div class="time-lists time-lists-title">
<div>开始时间</div>
<div>结束时间(不包括)</div>
<div>电价</div>
<div>操作</div>
</div>
<div class="time-lists" v-for="(item,index) in hoursOptions" :key="'hoursOptions'+index">
<div>
<el-time-select
placeholder="开始时间"
v-model="item.startTime"
:picker-options="{
start: '00:00',
step: '01:00',
end: '23:00',
}">
</el-time-select>
</div>
<div>
<el-time-select
placeholder="结束时间"
v-model="item.endTime"
:picker-options="{
start: '00:00',
step: '01:00',
end: '24:00',
minTime: item.startTime
}">
</el-time-select>
</div>
<div>
<el-select v-model="item.costType" placeholder="请选择">
<el-option v-for="(value,key) in priceTypeOptions" :key="key+'priceTypeOptions'" :label="value.name" :value="value.id"></el-option>
</el-select>
</div>
<div>
<el-button
@click.native.prevent="deleteRow(index)"
type="warning"
size="mini">
删除
</el-button>
</div>
</div>
</div>
</div>
</div>
<div slot="footer">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="saveDialog">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {addPriceConfig,editPriceConfig,detailPriceConfig} from '@/api/ems/powerTariff'
export default {
data() {
return {
mode:'',
id:'',
siteId:'',
powerDate:'',//时间
//尖-peak,峰-high,平-flat,谷=valley
priceTypeOptions:[{
id:'peak',
name:'尖',
price:''
},{
id:'high',
name:'峰',
price:''
},{
id:'flat',
name:'平',
price:''
},{
id:'valley',
name:'谷',
price:''
}],
hoursOptions:[],
loading:false,
dialogTableVisible:false,
}
},
methods: {
getRouteSiteId() {
const siteId = this.$route?.query?.siteId
return siteId === undefined || siteId === null ? '' : String(siteId).trim()
},
addRow(){
this.hoursOptions.push({
startTime:'',
endTime:'',
costType:''
})
},
deleteRow(index){
this.hoursOptions.splice(index,1)
},
showDialog(id, siteId = ''){
this.id = id
if(id) {
this.mode='edit'
//获取详情 初始化hoursOptions
this.loading = true
detailPriceConfig(id).then(response => {
const data = response?.data || {}
this.siteId = data?.siteId || ''
this.hoursOptions = data?.range || []
this.powerDate=data?.year && data?.month ? data.year +'-'+data.month : ''
this.priceTypeOptions.forEach(item=>{
item.price = data[item.id]
})
}).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.powerDate === '') return this.$message.error('请选择时间')
let priceArr=[]
this.priceTypeOptions.forEach(item=>{
!['0',0].includes(item.price) && !item.price && priceArr.push(item.name)
})
if(priceArr.length>0) return this.$message.error(`请配置${priceArr.join(',')}的电价`)
if(this.hoursOptions.length<=0) return this.$message.error(`请配置24小时的电价`)
let hours=false,hourDis=false
this.hoursOptions.forEach(item=>{
if(!item.startTime || !item.endTime || !item.costType ) hours=true
if(parseInt(item.startTime)>=parseInt(item.endTime)) hourDis=true
})
if(hours) return this.$message.error(`时间段电价配置错误`)
if(hourDis) return this.$message.error(`结束时间要大于开始时间`)
let hoursMap={}
this.hoursOptions.forEach(item=>{
let s = parseInt(item.startTime),e=parseInt(item.endTime)
for(s;s<e;s++){
if(!hoursMap[s]) hoursMap[s]=1
else hoursMap[s]+=1
}
})
console.log('hoursMap======',hoursMap)
if(Object.values(hoursMap).length<24 || Object.values(hoursMap).find(i=>i>1)) return this.$message.error(`请配置24小时的电价且时间不能重复`)
const {powerDate,priceTypeOptions,hoursOptions,mode,id,siteId} =this
this.loading = true
let params={
year:powerDate.split('-')[0],
month:parseInt(powerDate.split('-')[1]),
range:hoursOptions,
siteId,
}
priceTypeOptions.forEach(item=>{params[item.id]=item.price})
if(mode === 'edit') params.id = id
console.log('参数=======',params)
//调接口传数据 区分新增还是修改 成功之后关闭弹窗 更新表格
if(mode === 'add'){
addPriceConfig(params).then(response => {
if(response.code === 200){
this.$emit('update')
this.closeDialog()
}else{
this.$message.error('新增失败')
}
}).finally(() => {
this.loading = false
})
}else{
editPriceConfig(params).then(response => {
if(response.code === 200){
this.$emit('update')
this.closeDialog()
}else{
this.$message.error('修改失败')
}
}).finally(() => {
this.loading = false
})
}
},
closeDialog(){
// 清空所有数据
this.$emit('clear')
this.mode=''
this.id=''
this.siteId=''
this.powerDate=''
this.hoursOptions=[]
this.priceTypeOptions.forEach(item=>{
item.price=''
})
this.dialogTableVisible=false
}
},
}
</script>
<style scoped lang="scss">
.items-container{
margin-bottom: 20px;
.item-title{
line-height: 16px;
padding: 10px 0;
color: #000;
}
}
.price-types{
width: 150px;
&:not(:last-child){
margin-right: 20px;
}
}
.time-lists-container{
width: 100%;
border:1px solid #eee;
.time-lists{
&:not(:last-child){
border-bottom: 1px solid #eee;
}
display: flex;
&>div{
width: 16%;
box-sizing: border-box;
text-align: center;
padding: 10px 15px;
&:not(:last-child){
width: 28%;
border-right: 1px solid #eee;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100%;
}
}
}
.time-lists-title{
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 20px;
}
}
</style>

208
src/views/ems/site/powerTariff/index.vue
View File

@ -1,208 +0,0 @@
<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-date-picker
v-model="defaultYear"
type="year"
:clearable="false"
placeholder="请选择年份"
align="center"
format="yyyy年"
value-format="yyyy"
@change="changeDefaultYear"
>
</el-date-picker>
</el-form-item>
<br>
<el-form-item>
<el-button type="primary" @click="addPowerConfig('')">新增电价配置</el-button>
</el-form-item>
</el-form>
<div class="month-lists-container" v-infinite-scroll="getData" infinite-scroll-immediate="false">
<el-empty v-show="tableData.length<=0" :image-size="200"></el-empty>
<el-card
shadow="always"
class="common-card-container time-range-card"
v-for="item in tableData"
:key="item.id"
>
<div slot="header" class="time-range-header">
<span class="card-title">{{item.siteId || ''}}-{{item.month}}月电价时段划分</span>
<div>
<el-button type="primary" size="mini" @click="addPowerConfig(item.id)">编辑</el-button>
<el-button type="warning" size="mini" @click="deletePowerConfig(item)">删除</el-button>
</div>
</div>
<div class="price-table-container">
<div class="price-table">
<div class="time-list">
<div class="time"> </div>
<div class="type">时段</div>
<div class="price">电价（元/kWh）</div>
</div>
<div class="time-list" v-for="(rangeItem,rangeIndex) in item.range" :key="rangeIndex+'price'">
<div class="time">{{`${rangeItem.startTime}-${rangeItem.endTime}`}}</div>
<div class="type">{{priceTypeOptions[rangeItem.costType]}}</div>
<div class="price">{{item[rangeItem.costType]}}</div>
</div>
</div>
</div>
</el-card>
</div>
<add-power-tariff ref="addPowerTariff" @update="getData(true)"/>
</div>
</template>
<script>
import {energyPriceConfig,listPriceConfig} from '@/api/ems/powerTariff'
import AddPowerTariff from './AddPowerTariff.vue'
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
export default {
name: "PowerTariff",
components: {DateTimeSelect, AddPowerTariff},
computed: { },
watch: {
'$route.query.siteId'(newSiteId) {
const normalizedSiteId = this.hasValidSiteId(newSiteId) ? String(newSiteId).trim() : ''
if (normalizedSiteId === this.siteId) {
return
}
this.siteId = normalizedSiteId
this.onSearch()
}
},
data() {
return {
loading:false,
pageNum:1,
pageSize:40,
siteId:'',
tableData:[],
tableTotal:0,
defaultYear:'',
pickerOptions:{
disabledDate(time) {
return time.getFullYear() >= new Date().getFullYear()+1;
},
},
priceTypeOptions:{
'peak':'尖',
'high':'峰',
'flat':'平',
'valley':'谷'
},
}
},
methods:{
hasValidSiteId(siteId) {
return !!(siteId !== undefined && siteId !== null && String(siteId).trim())
},
resetTableData(){
this.tableData=[]
this.tableTotal=0
this.pageNum=1
},
// 搜索
onSearch(){
this.getData(true)
},
changeDefaultYear(){
this.getData(true)
},
getData(reset=false){
reset && this.resetTableData()
if (!this.siteId) {
this.tableData = []
this.tableTotal = 0
return
}
if(!reset && this.tableData.length>=this.tableTotal) return
this.loading=true;
const date = new Date(this.defaultYear).getFullYear()
const startTime = date+'-01',endTime = date+'-12'
listPriceConfig({startTime,endTime,pageNum:this.pageNum,pageSize:this.pageSize,siteId:this.siteId}).then(response => {
const data = JSON.parse(JSON.stringify(response?.rows || []))
data.length > 0 && (this.pageNum += 1)
this.tableData.push(...data)
this.tableTotal=response?.total || 0
}).finally(() => {this.loading=false})
},
addPowerConfig(id=''){
this.$refs.addPowerTariff.showDialog(id, this.siteId);
},
deletePowerConfig(row){
this.$confirm(`确认要删除${row.month}月的电价配置吗?`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
energyPriceConfig(row.id).then(response => {
response.code === 200 && done();
}).finally(() => {
instance.confirmButtonLoading = false;
})
} else {
done();
}
}
}).then(() => {
//只有在废弃成功的情况下会走到这里
this.$message({
type: 'success',
message: '删除成功!'
});
this.getData(true)
//调用接口 更新表格数据
}).catch(() => {
//取消关机
});
},
},
mounted() {
this.defaultYear = new Date()
this.siteId = this.hasValidSiteId(this.$route.query.siteId) ? String(this.$route.query.siteId).trim() : ''
this.getData(true)
}
}
</script>
<style lang="scss" scoped>
.month-lists-container{
max-height:100vh ;
overflow-y: auto;
}
.common-card-container{
width: 100%;
margin-top: 20px;
}
.price-table-container{
overflow-x: auto;
.price-table{
border:1px solid #eee;
width: fit-content;
overflow-x: auto;
display: flex;
.time-list{
&:not(:first-child){
border-left:1px solid #eee;
}
text-align: center;
width: 140px;
&>div{
height: 30px;
font-size: 12px;
line-height: 30px;
color:#000;
&.time,&.type{
border-bottom: 1px solid #eee;
}
}
}
}
}
</style>

1090
src/views/ems/site/sbbh/AddPlan.vue
View File

File diff suppressed because it is too large Load Diff

300
src/views/ems/site/sbbh/index.vue
View File

@ -1,300 +0,0 @@
<template>
<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: 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-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 AddPlan from "./AddPlan.vue";
export default {
name: "SBBH",
components: { AddPlan },
mixins: [getQuerySiteId],
data() {
return {
form: {
faultName: "",
},
loading: false,
tableData: [],
pageSize: 10,
pageNum: 1,
totalSize: 0,
dialogTableVisible: false,
};
},
methods: {
init() {
this.pageNum = 1;
this.getData();
},
handleProtectionSettings(data) {
if (!data) return;
let parsed = null;
try {
parsed = JSON.parse(data);
} catch (e) {
return "";
}
const faultSettings = Array.isArray(parsed) ? parsed : parsed?.faultSettings || [];
const releaseSettings = Array.isArray(parsed) ? parsed : parsed?.releaseSettings || [];
const buildLine = (item, index, total, key, value, relationKey) => {
const {
categoryName = "",
deviceId = "",
point = "",
[key]: operator = "",
[value]: val = "",
relationNext = "",
} = item;
return `<div>${index + 1}、 <span>${categoryName ? categoryName + "-" : ""}${
deviceId ? deviceId + "-" : ""
}${point || ""}</span> <span>${relationKey}:${operator || ""}${val || ""}</span> ${
total[index + 1] ? "<span>关系:" + (relationNext || "") + "</span>" : ""
}</div>`;
};
const faultStr = faultSettings.map((item, index) =>
buildLine(item, index, faultSettings, "faultOperator", "faultValue", "故障")
);
const releaseStr = releaseSettings.map((item, index) =>
buildLine(item, index, releaseSettings, "releaseOperator", "releaseValue", "释放")
);
const groups = [];
if (faultStr.length) {
groups.push(`<div><strong>故障保护</strong></div>${faultStr.join("")}`);
}
if (releaseStr.length) {
groups.push(`<div><strong>释放保护</strong></div>${releaseStr.join("")}`);
}
return groups.join("");
},
handleProtectionPlan(data) {
if (!data) return;
let arr = [];
try {
const parsed = JSON.parse(data);
arr = Array.isArray(parsed) ? parsed : parsed ? [parsed] : [];
} catch (e) {
return "";
}
const actionLabelMap = {
derate: "降功率",
shutdown: "关机/停机/切断",
forbid_charge: "禁止充电",
allow_discharge: "允许放电",
forbid_discharge: "禁止放电",
allow_charge: "允许充电",
forbid_charge_discharge: "禁止充放电",
standby: "待机",
};
const str = arr.map((item, index) => {
const action = item?.action || "";
const point = item?.point || "";
const pointName = item?.pointName || "";
const actionName = item?.actionName || actionLabelMap[action] || pointName || point || "未配置";
const value = item?.value;
if ((action === "derate" || actionName.includes("降功率")) && value !== null && value !== undefined && value !== "") {
return `<div>${index + 1}、 <span>动作:${actionName}</span> <span>比例:${value}%</span></div>`;
}
return `<div>${index + 1}、 <span>动作:${actionName}</span></div>`;
});
return str.join("");
},
addPlan() {
if (!this.siteId) {
this.$message.warning("请先在顶部选择站点");
return;
}
this.$refs.addPlan.open("", this.siteId);
},
editDevice(row) {
this.$refs.addPlan.open(row.id, this.siteId);
},
deleteDevice(row) {
this.$confirm(`确认要设备保护${row.faultName}吗?`, {
confirmButtonText: "确定",
cancelButtonText: "取消",
showClose: false,
closeOnClickModal: false,
type: "warning",
beforeClose: (action, instance, done) => {
if (action === "confirm") {
instance.confirmButtonLoading = true;
deleteProtectPlan(row.id)
.then((response) => {
response.code === 200 && done();
})
.finally(() => {
instance.confirmButtonLoading = false;
});
} else {
done();
}
},
})
.then(() => {
this.$message({
type: "success",
message: "删除成功!",
});
this.getData();
})
.catch(() => {});
},
handleSizeChange(val) {
this.pageSize = val;
this.$nextTick(() => {
this.getData();
});
},
handleCurrentChange(val) {
this.pageNum = val;
this.$nextTick(() => {
this.getData();
});
},
onSearch() {
this.pageNum = 1;
this.getData();
},
onReset() {
this.form = {
faultName: "",
};
this.pageNum = 1;
this.getData();
},
getData() {
if (!this.siteId) {
this.tableData = [];
this.totalSize = 0;
return;
}
this.loading = true;
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;
})
.finally(() => {
this.loading = false;
});
},
},
};
</script>
<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>

470
src/views/ems/site/sblb/AddDevice.vue
View File

@ -1,21 +1,13 @@
<template>
<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="800px" class="ems-dialog"
:title="mode === 'add'?'新增设备':`编辑设备` ">
<div v-loading="loading>0">
<div class="form-layout" :class="{ 'has-pcs': isPcs }">
<el-form v-loading="loading>0" ref="addTempForm" inline :model="formData" :rules="rules" size="medium"
label-width="120px" class="device-form base-form">
<el-dialog :visible.sync="dialogTableVisible" :close-on-click-modal="false" :show-close="false" destroy-on-close lock-scroll append-to-body width="600px" class="ems-dialog" :title="mode === 'add'?'新增设备':`编辑设备` " >
<el-form v-loading="loading>0" ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-form-item label="站点" prop="siteId">
<el-input
v-model="formData.siteId"
placeholder="请先在顶部选择站点"
disabled
:style="{width: '100%'}"
/>
<el-select v-model="formData.siteId" placeholder="请选择" :style="{width: '100%'}">
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'siteOptions'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备id" prop="deviceId" >
<el-input v-model="formData.deviceId" placeholder="请输入" maxlength="60" clearable :style="{width: '100%'}">
<el-input v-model="formData.deviceId" maxlength="60" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
@ -23,29 +15,27 @@
</el-input>
</el-form-item>
<el-form-item label="设备描述" prop="description">
<el-input v-model="formData.description" type="textarea" placeholder="请输入" clearable
:style="{width: '100%'}">
<el-input v-model="formData.description" type="textarea" placeholder="请输入" clearable :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"
:key="key+'deviceTypeOptions'"></el-option>
<el-option :label="value" :value="key" v-for="(value,key) in deviceTypeOptions" :key="key+'deviceTypeOptions'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备类别" prop="deviceCategory">
<el-select v-model="formData.deviceCategory" placeholder="请选择" :style="{width: '100%'}"
@change="changeType">
<el-option :label="item.name" :value="item.code" v-for="(item,index) in deviceCategoryList"
:key="index+'deviceCategoryList'"></el-option>
<el-select v-model="formData.deviceCategory" placeholder="请选择" :style="{width: '100%'}">
<el-option :label="item" :value="item" v-for="(item,index) in deviceCategoryList" :key="index+'deviceCategoryList'"></el-option>
</el-select>
</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 ? '请先在顶部选择站点' : '请选择'"
:style="{width: '100%'}">
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in parentDeviceList"
:key="index+'parentDeviceList'"></el-option>
<el-form-item label="上级设备" prop="parentId" v-if="formData.deviceCategory === dccDeviceCategory">
<el-select v-model="formData.parentId" :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>
</el-select>
</el-form-item>
<el-form-item label="TCP设备的ip地址" prop="ipAddress" v-if="formData.deviceType === 'TCP'">
@ -56,10 +46,7 @@
<el-input v-model="formData.ipPort" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="从站地址" prop="slaveId" v-if="formData.deviceType === 'TCP'">
<el-input v-model="formData.slaveId" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="串口路径" prop="serialPort">
<el-input v-model="formData.serialPort" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
@ -80,48 +67,11 @@
<el-input v-model="formData.parity" placeholder="请输入" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="图片" prop="pictureUrl">
<image-upload :limit="1" :drag="false" @input="uploadImage" :value="formData.pictureUrl"/>
</el-form-item>
</el-form>
<!-- pcs配置-->
<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>
<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>
<div slot="footer">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="saveDialog">确定</el-button>
@ -130,10 +80,10 @@
</template>
<script>
import {mapState} from "vuex";
import {getStackNameList} from '@/api/ems/dzjk'
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'
import {getDeviceDetailInfo,getDeviceCategory,updateDevice,addDevice} from "@/api/ems/site";
export default {
props:{
mode:{
@ -160,25 +110,12 @@ export default {
callback();
}
}
const validateNumber = (rule, value, callback) => {
if (value !== '' && !/^[0-9]+$/.test(value)) {
callback(new Error('只能输入数字!'));
} else {
callback();
}
}
const validateDecimal = (rule, value, callback) => {
if (value !== '' && !/^(0|[1-9]\d*)(\.\d+)?$/.test(value)) {
callback(new Error('只能输入非负数字!'));
} else {
callback();
}
}
return {
loading:0,
dccDeviceCategoryList: ['CLUSTER', 'BATTERY'],//需要展示上级设备的设备类型
dccDeviceCategory:'CLUSTER',
dialogTableVisible:false,
parentDeviceList:[],//上级设备列表 从接口获取数据
siteList:[],//站点列表 从接口获取数据
deviceCategoryList:[],//设备类别列表 从接口获取数据
formData: {
id:'',//设备唯一标识
@ -186,6 +123,7 @@ export default {
deviceId:'',//设备id
deviceName:'',//设备名称
description:'',//设备描述
communicationStatus:'',//工作状态
deviceType:'',//设备类型
deviceCategory:'',//设备类别
parentId:'',//上级设备id
@ -196,23 +134,11 @@ export default {
dataBits:'',//数据位
stopBits:'',//停止位
parity:'',//校验位
slaveId: '',//从站地址
},
pcsSetting: {
deviceSettingId: '',
powerAddress: '',//功率地址
pointAddress: "",//开关机地址
startCommand: "",//开机指令
stopCommand: "",//关机指令
startPower: '',//开机目标功率
stopPower: '',//关机目标功率
powerMultiplier: '',//目标功率倍率
clusterNum: '',//电池簇数
clusterPointAddress: []//电池簇地址
pictureUrl:'',//设备图片
},
rules: {
siteId:[
{required: true, message: '请先在顶部选择站点', trigger: ['blur', 'change']}
{ required: true, message: '请选择站点', trigger: ['blur','change']}
],
deviceId:[
{ required: true, message: '请输入设备id', trigger: 'blur'},
@ -226,6 +152,9 @@ 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']}
],
@ -238,9 +167,6 @@ export default {
ipPort:[
{ validator: validateText, trigger: 'blur' }
],
slaveId: [
{validator: validateNumber, trigger: 'blur'}
],
serialPort:[
{ validator: validateText, trigger: 'blur' }
],
@ -256,139 +182,93 @@ export default {
parity:[
{ validator: validateText, trigger: 'blur' }
],
// pictureUrl:[
// { required: true, message: '请上传图片', trigger: ['blur', 'change']}
// ],
},
pcsSettingRules: {
pointAddress: [
{required: true, message: '请输入开关机地址', trigger: 'blur'},
{validator: validateText, trigger: 'blur'}
],
powerAddress: [
{validator: validateText, trigger: 'blur'}
],
startCommand: [
{required: true, message: '请输入开机指令', trigger: 'blur'},
{validator: validateText, trigger: 'blur'}
],
startPower: [
{validator: validateText, trigger: 'blur'}
],
stopCommand: [
{required: true, message: '请输入关机指令', trigger: 'blur'},
{validator: validateText, trigger: 'blur'}
],
stopPower: [
{validator: validateText, trigger: 'blur'}
],
powerMultiplier: [
{validator: validateDecimal, trigger: 'blur'}
],
clusterNum: [
{required: true, message: '请输入电池簇数', trigger: 'blur'},
{validator: validateNumber, trigger: 'blur'}
],
clusterPointAddress: [
{required: true, message: '请输入电池簇地址', trigger: 'blur'},
{validator: validateText, trigger: 'blur'}
]
}
}
},
computed: {
...mapState({
communicationStatusOptions: state => state?.ems?.communicationStatusOptions || {},
deviceTypeOptions:state=>state?.ems?.deviceTypeOptions || {}
}),
isPcs() {
return this.formData.deviceCategory === 'PCS'
}
})
},
watch:{
'formData.deviceCategory':{
handler(newVal){
// 只有电池簇需要选择上级设备 调用接口获取电池堆列表
if(newVal && newVal === this.dccDeviceCategory){
this.getParentDeviceList()
}
},
immediate:true
},
'formData.siteId':{
handler(newVal,oldVal){
// 只有电池簇需要选择上级设备 调用接口获取电池堆列表
if(newVal && oldVal!== newVal && this.formData.deviceCategory === this.dccDeviceCategory){
this.getParentDeviceList()
}
},
immediate:true
},
dialogTableVisible:{
handler(newVal){
//打开弹窗
if(newVal){
if (this.mode === 'add') {
this.syncSiteFromRoute(true)
}
this.getZdList()
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'){
this.loading+=1
getDeviceDetailInfo(newVal).then(response => {
const {pcsSetting, ...data} = JSON.parse(JSON.stringify(response?.data || {}))
this.formData = data;
if (pcsSetting && JSON.stringify(pcsSetting) !== '{}') {
this.pcsSetting = JSON.parse(JSON.stringify({
...pcsSetting,
clusterPointAddress: JSON.parse(pcsSetting.clusterPointAddress || [])
}));
}
if (this.dccDeviceCategoryList.includes(this.formData.deviceCategory)) {
this.getParentDeviceList(true)
}
}).finally(() => {
this.loading -= 1
})
this.formData = JSON.parse(JSON.stringify(response?.data || {}));
}).finally(() => {this.loading-=1})
}
},
immediate: true,
}
},
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
}
uploadImage(data){
this.formData.pictureUrl = data
},
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
getAllDeviceCategory().then(response => {
getDeviceCategory().then(response => {
this.deviceCategoryList = response?.data || []
}).finally(() => {
this.loading -= 1
})
}).finally(() => {this.loading-=1})
},
//获取上级id列表
getParentDeviceList(init = false) {
getParentDeviceList(){
if(!this.formData.siteId){
this.$message.warning('请先在顶部选择站点')
return
return console.log('请先选择站点')
}
!init && (this.formData.parentId = '')
this.formData.parentId=''
this.loading= this.loading+1
getParentDeviceId({siteId: this.formData.siteId, deviceCategory: this.formData.deviceCategory}).then(response => {
getStackNameList(this.formData.siteId).then(response => {
this.parentDeviceList = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {
this.loading=this.loading -1
})
},
saveData() {
saveDialog() {
this.$refs.addTempForm.validate(valid => {
if (!valid) return
this.loading+=1
const {
id='',
@ -396,6 +276,7 @@ export default {
deviceId='',//设备id
deviceName='',//设备名称
description='',//设备描述
communicationStatus='',//工作状态
deviceType='',//设备类型
deviceCategory='',//设备类别
parentId='',//上级设备id
@ -406,52 +287,10 @@ export default {
dataBits='',//数据位
stopBits='',//停止位
parity='',//校验位
slaveId = '',//从站地址
pictureUrl='',//设备图片
}= this.formData;
const {
deviceSettingId,
powerAddress,
pointAddress,
startCommand,
stopCommand,
startPower,
stopPower,
powerMultiplier,
clusterNum,
clusterPointAddress
} = this.pcsSetting
let params = {
siteId,
deviceId,
deviceName,
description,
deviceType,
deviceCategory,
parentId,
ipAddress,
ipPort,
serialPort,
baudRate,
dataBits,
stopBits,
parity,
slaveId,
}
if (this.isPcs) {
params.pcsSetting = {
powerAddress,
pointAddress,
startCommand,
stopCommand,
startPower,
stopPower,
powerMultiplier,
clusterNum,
clusterPointAddress: JSON.stringify(!clusterNum ? [] : (clusterPointAddress || []).slice(0, clusterNum))
}
}
if(this.mode === 'add'){
addDevice(params).then(response => {
addDevice({siteId,deviceId,deviceName,description,communicationStatus,deviceType,deviceCategory,parentId,ipAddress,ipPort,serialPort,baudRate,dataBits,stopBits,parity,pictureUrl}).then(response => {
if(response.code === 200){
//新增成功
// 关闭弹窗 更新表格
@ -462,9 +301,7 @@ export default {
this.loading-=1
})
}else{
params.id = id
params.pcsSetting && (params.pcsSetting.deviceSettingId = deviceSettingId)
updateDevice(params).then(response => {
updateDevice({id,siteId,deviceId,deviceName,description,communicationStatus,deviceType,deviceCategory,parentId,ipAddress,ipPort,serialPort,baudRate,dataBits,stopBits,parity,pictureUrl}).then(response => {
if(response.code === 200){
//新增成功
// 关闭弹窗 更新表格
@ -475,29 +312,20 @@ export default {
this.loading-=1
})
}
},
saveDialog() {
this.$refs.addTempForm.validate(valid => {
if (!valid) return
if (this.isPcs) {
this.$refs.pcsSettingForm.validate(pcsValidate => {
if (!pcsValidate) return
this.saveData()
})
} else {
this.saveData()
}
})
},
closeDialog(){
this.$emit('clear')
// 清空所有数据
this.$refs.addTempForm.resetFields()
this.formData= {
id:'',//设备唯一标识
siteId:'',//站点ID
deviceId:'',//设备id
deviceName:'',//设备名称
description:'',//设备描述
communicationStatus:'',//工作状态
deviceType:'',//设备类型
deviceCategory:'',//设备类别
parentId:'',//上级设备id
@ -508,139 +336,13 @@ export default {
dataBits:'',//数据位
stopBits:'',//停止位
parity:'',//校验位
slaveId: '',//从站地址
pictureUrl:'',//设备图片
}
this.parentDeviceList = []
this.pcsSetting = {
deviceSettingId: '',
powerAddress: '',//功率地址
pointAddress: "",//开关机地址
startCommand: "",//开机指令
stopCommand: "",//关机指令
startPower: '',//开机目标功率
stopPower: '',//关机目标功率
powerMultiplier: '',//目标功率倍率
clusterNum: '',//电池簇数
clusterPointAddress: []//电池簇地址
}
this.$refs.addTempForm.resetFields()
this.$refs?.pcsSettingForm?.resetFields()
this.dialogTableVisible=false
}
}
}
</script>
<style scoped lang="scss">
.form-layout {
position: relative;
}
.form-layout.has-pcs {
overflow: visible;
}
.base-form {
width: 100%;
}
.device-form {
::v-deep .el-form-item--medium .el-form-item__content {
width: 260px;
}
.el-form-item {
width: 50%;
margin-right: 0;
}
}
.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 scoped>
</style>

94
src/views/ems/site/sblb/PcsSwitch.vue
View File

@ -1,94 +0,0 @@
<template>
<el-button :size="size" :type="type" :round="round" @click="switchStatus"
>
{{ label }}
</el-button>
</template>
<style scoped lang="scss">
</style>
<script>
import {updateDeviceStatus} from "@/api/ems/site";
export default {
props: {
size: {
type: String,
default: 'mini',
required: false
},
round: {
type: Boolean,
default: false,
required: false
},
type: {
type: String,
default: 'primary',
required: false
},
data: {
type: Object,
default: () => {
return {
workStatus: null,
deviceId: null,
deviceName: null,
}
},
required: true
}
},
computed: {
label() {
return this.data.workStatus === '0' ? '关机' : '开机'
}
},
methods: {
switchStatus() {
console.log(this.data, 11111111)
const {workStatus, deviceId, deviceName, siteId} = this.data
this.$confirm(`确认要${this.label}设备${deviceName || ''}吗?`, {
confirmButtonText: "确定",
cancelButtonText: "取消",
showClose: false,
closeOnClickModal: false,
type: "warning",
beforeClose: (action, instance, done) => {
if (action === "confirm") {
instance.confirmButtonLoading = true;
//做开关机操作,更新成功后刷新表格
updateDeviceStatus({
siteId,
workStatus: workStatus === '0' ? "1" : '0',
deviceId
})
.then((response) => {
response.code === 200 && done();
})
.finally(() => {
instance.confirmButtonLoading = false;
});
} else {
done();
}
},
})
.then(() => {
//只有在废弃成功的情况下会走到这里
this.$message({
type: "success",
message: `${deviceName}${this.label}成功!`,
});
this.$emit('updateSuccess')
//调用接口 更新表格数据
})
.catch(() => {
//取消关机
});
}
}
}
</script>

299
src/views/ems/site/sblb/PointTable.vue
View File

@ -1,6 +1,5 @@
<!--电位展示图表-->
<template>
<div>
<el-dialog
v-loading="loading"
:close-on-click-modal="false"
@ -10,110 +9,42 @@
destroy-on-close
lock-scroll
show-close
:title="dataType === 'point' ? '点位清单' : '报警点位'"
width="950px"
title="点位列表"
width="800px"
>
<el-form :inline="true" label-width="100px">
<el-form-item label="点位名称">
<el-input
v-model="form.dataPointName"
clearable
placeholder="请输入点位名称"
style="width: 150px"
></el-input>
</el-form-item>
<el-form-item label="点位">
<el-input
v-model="form.dataPoint"
clearable
placeholder="请输入点位"
style="width: 150px"
></el-input>
</el-form-item>
<!-- <el-form-item label="modbus ip">-->
<!-- <el-input-->
<!-- v-model="form.ipAddress"-->
<div style="margin-bottom: 20px">
<el-input v-model="pointName" placeholder="请输入点位" clearable style="width: 200px"></el-input>
<!-- <el-autocomplete-->
<!-- v-model="pointName"-->
<!-- placeholder="请输入点位"-->
<!-- clearable-->
<!-- placeholder="请输入ip"-->
<!-- style="width: 150px"-->
<!-- ></el-input>-->
<!-- </el-form-item>-->
<br>
<el-form-item label="最小值">
<el-input
v-model="form.lower"
clearable
placeholder="请输入最小值"
style="width: 150px"
></el-input>
</el-form-item>
<el-form-item label="最大值">
<el-input
v-model="form.upper"
clearable
placeholder="请输入最大值"
style="width: 150px"
></el-input>
</el-form-item>
<!-- <el-form-item label="modbus 端口">-->
<!-- <el-input-->
<!-- v-model="form.ipPort"-->
<!-- clearable-->
<!-- placeholder="请输入端口"-->
<!-- style="width: 150px"-->
<!-- ></el-input>-->
<!-- </el-form-item>-->
<el-form-item style="margin-left: 20px">
<el-button type="primary" @click="search">搜索</el-button>
</el-form-item>
</el-form>
<!-- :fetch-suggestions="querySearchAsync"-->
<!-- @select="handleSelect"-->
<!-- ></el-autocomplete>-->
<el-button type="primary" style="margin-left: 20px" @click="pointNameSearch">搜索</el-button>
</div>
<el-table
:data="tableData"
class="common-table"
max-height="400px"
stripe
style="width: 100%"
:default-sort="defaultSort"
@sort-change="handleSortChange"
>
<el-table-column label="数据点位" prop="dataPoint"></el-table-column>
style="width: 100%;">
<el-table-column
label="数据点位"
prop="dataPoint">
</el-table-column>
<el-table-column
label="数据点位名称"
prop="dataPointName"
></el-table-column>
<!-- <el-table-column label="modbus地址">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{-->
<!-- `${scope.row.ipAddress || ""} ${scope.row.ipPort || ""}`-->
<!-- }}</span>-->
<!-- </template>-->
<!-- </el-table-column>
<el-table-column label="寄存器地址" prop="寄存器地址"></el-table-column>-->
prop="dataPointName">
</el-table-column>
<el-table-column
label="最新值"
prop="pointValue"
align="right"
sortable="custom"
>
<template slot-scope="scope">
<span class="pointer" @click="showChart(scope.row)">{{
scope.row.pointValue
}}</span>
</template>
prop="pointValue">
</el-table-column>
<el-table-column label="单位" prop="dataUnit"></el-table-column>
<el-table-column
label="更新时间"
min-width="160px"
prop="updateTime"
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>
prop="updateTime">
</el-table-column>
</el-table>
<el-pagination
@ -132,178 +63,95 @@
>
</el-pagination>
</el-dialog>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import {getDevicePointList} from "@/api/ems/site";
import pointChart from "@/views/ems/dzjk/sbjk/PointChart.vue";
import {pointFuzzyQuery} from "@/api/ems/search";
export default {
components: {pointChart},
watch:{
show(val) {
if(!val){
this.tableData = [];
this.deviceId = "";
this.parentId = "";
this.siteId = "";
this.pageSize = 10;
this.pageNum = 1;
this.totalSize = 0;
this.dataType = '';
this.selectable = false;
this.form = {
sortMethod: "desc", //升序不传或者asc、降序desc）
sortData: this.defaultSort.prop,
dataPointName: "", //点位名称
dataPoint: "", //点位名称
lower: "", //
upper: "", //
// ipAddress: "",
// ipPort: "",
};
this.loading = false;
this.tableData=[]
this.deviceId=''
this.deviceName=''
this.siteId=''
this.pageSize=10
this.pageNum=1
this.totalSize=0
this.pointName=''
this.loading =false
}
},
},
computed: {
isDtdc() {
return this.deviceCategory === "BATTERY";
},
},
data(){
return{
// 默认排序
defaultSort: {prop: "updateTime", order: "descending"},
show:false,
loading:false,
dataType: '',//展示的数据类型 point点位/alarmPoint报警点位
form: {
sortData: "updateTime", //最新值升序不传或者asc、降序desc）
sortMethod: "desc", //升序不传或者asc、降序desc）
dataPointName: "", //点位名称
dataPoint: "", //点位名称
lower: "", //
upper: "", //
// ipAddress: "",
// ipPort: "",
},
deviceCategory: "",
deviceId: "",
parentId: "",
siteId: "",
pointName:'',//点位名称
deviceCategory:'',
deviceName:'',
deviceId:'',
siteId:'',
tableData:[],
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;
if (this.isDtdc)
this.$refs.pointChart.showChart({
pointName,
deviceCategory,
deviceId: this.parentId,
child: [deviceId],
});
else
this.$refs.pointChart.showChart({
pointName,
deviceCategory,
deviceId,
});
}
},
handleSortChange(column) {
this.form.sortData = column.prop;
this.form.sortMethod = column.order === "descending" ? "desc" : "asc";
console.log("切换排序方式", column, this.form);
methods:{
pointNameSearch(){
this.pageNum=1
this.getData()
},
search() {
this.pageNum = 1;
showTable({deviceCategory,siteId,deviceId,deviceName}){
this.deviceCategory =deviceCategory
this.siteId=siteId
this.deviceId=deviceId
this.deviceName=deviceName
this.show=true
this.getData()
},
getData(){
this.loading=true
const {siteId,deviceId,deviceCategory,pageNum,pageSize,pointName} =this
getDevicePointList({siteId,deviceId,deviceCategory,pageNum,pageSize,dataPointName:pointName}).then(response => {
this.tableData=response?.rows || [];
this.totalSize = response?.total || 0
}).finally(() => {this.loading=false})
},
// 分页
handleSizeChange(val) {
this.pageSize = val;
this.$nextTick(()=>{
this.getData()
});
})
},
handleCurrentChange(val) {
this.pageNum = val;
this.pageNum = val
this.$nextTick(()=>{
this.getData()
});
},
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()
},
getData() {
const {
siteId,
deviceId,
deviceCategory,
parentId,
pageNum,
pageSize,
form: {
sortData,
sortMethod,
dataPointName,
dataPoint,
lower,
upper,
// ipAddress,
// ipPort,
},
} = this;
const params = {
siteId,
deviceId,
deviceCategory,
parentId,
pageNum,
pageSize,
sortData,
sortMethod,
dataPointName,
dataPoint,
lower,
upper,
// ipAddress: '',
// ipPort: '',
}
params.isAlarm = this.dataType === 'point' ? 0 : 1
this.loading = true;
getDevicePointList(params)
.then((response) => {
this.tableData = response?.rows || [];
this.totalSize = response?.total || 0;
})
.finally(() => {
this.loading = false;
});
},
//点位
handleSelect(data){
this.pointName = data.value
},
};
querySearchAsync(query,cb){
console.log('查询数据',query)
pointFuzzyQuery({
siteIds:[this.siteId],
categoryName:this.deviceName,
pointName:query,
}).then(response => {
const data = response?.data || []
cb(data.map(item => {
return {name: item, value: item}
}))
})
},
}
}
</script>
<style lang="scss" scoped>
::v-deep {
@ -311,4 +159,5 @@ export default {
line-height: 40px;
}
}
</style>

80
src/views/ems/site/sblb/PointUpload.vue
View File

@ -1,80 +0,0 @@
<template>
<el-dialog :visible.sync="show" class="ems-dialog" title="点位上传" width="400px" append-to-body
:close-on-click-modal="false" :close-on-press-escape="false">
<!-- <file-upload :fileType='["xls", "xlsx"]' value="String" :limit="1" :drag="false" @input="updateFile"/>-->
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
:data="upload.data" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xls、xlsx格式文件。</span>
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>-->
</div>
</el-upload>
<div slot="footer">
<el-button @click="handleClosed">取消</el-button>
<el-button type="primary" @click="submitFileForm">确定</el-button>
</div>
</el-dialog>
</template>
<style scoped lang="scss">
</style>
<script>
import {getToken} from "@/utils/auth"
export default {
data() {
return {
show: false,
// 用户导入参数
upload: {
data: {},
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: {Authorization: "Bearer " + getToken()},
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/ems/pointMatch/importDataByDevice"
},
}
},
methods: {
showDialog({siteId, deviceCategory, deviceId}) {
this.upload.data = {siteId, deviceCategory, deviceId}
this.show = true;
},
//关闭弹窗 重置数据
handleClosed() {
this.$refs.upload.clearFiles()//写在before-closed无效
this.upload.data = {}
this.show = false
},
// updateFile(data){
// console.log('上传文件emit',data)
// },
// saveDialog(){
// this.show=true
// },
// 文件上传中处理 返回参数event, file, fileList
handleFileUploadProgress() {
this.upload.isUploading = true
},
// 文件上传成功处理 返回参数response, file, fileList
handleFileSuccess(response) {
console.log('上传文件结果', response)
this.upload.isUploading = false
if (response.code === 500 && !response.msg) response.msg = '上传失败'
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + (response.msg || '上传成功') + "</div>", "导入结果", {dangerouslyUseHTMLString: true})
this.$emit('update')
this.handleClosed()
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
}
}
}
</script>

147
src/views/ems/site/sblb/index.vue
View File

@ -1,19 +1,15 @@
<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-select v-model="deviceCategory" placeholder="请选择设备类型" @change="onSearch" clearable>
<el-option
v-for="(item,index) in deviceCategoryList"
:key="index+'deviceCategorySelect'"
:label="item.name"
:value="item.code">
</el-option>
<el-form-item label="站点选择">
<el-select v-model="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="onSearch">
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
</el-select>
</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-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="addDevice" native-type="button">新增设备</el-button>
@ -27,6 +23,10 @@
prop="siteId"
label="站点ID">
</el-table-column>
<el-table-column
prop="siteName"
label="站点名称">
</el-table-column>
<el-table-column
prop="deviceId"
label="设备ID"
@ -37,24 +37,41 @@
label="设备名称">
</el-table-column>
<el-table-column
prop="categoryName"
label="设备类别">
prop="deviceType"
label="设备类型">
</el-table-column>
<el-table-column
prop="communicationStatus"
label="通信状态">
<template slot-scope="scope">
<span>{{$store.state.ems.communicationStatusOptions[scope.row.communicationStatus]}}</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
width="260">
<template slot-scope="scope">
<!-- <el-button-->
<!-- @click="toDetail(scope.row.id)"-->
<!-- type="primary"-->
<!-- size="mini">-->
<!-- 查看详情-->
<!-- </el-button>-->
<el-button
@click="pointDetail(scope.row)"
type="primary"
size="mini">
点位列表
</el-button>
<el-button
@click="editDevice(scope.row)"
style="margin-top:10px;"
type="warning"
size="mini">
编辑
</el-button>
<el-button
type="danger"
style="margin-top:10px;"
@click="deleteDevice(scope.row)"
size="mini">
删除
@ -75,60 +92,35 @@
style="margin-top:15px;text-align: center"
>
</el-pagination>
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title="详细信息" :close-on-click-modal="false"
:before-close="handleClosed">
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title=" 详细信息" :close-on-click-modal="false" :before-close="handleClosed">
<div class="descriptions-main" style="padding: 0" >
<el-descriptions direction="vertical" :column="2" :colon="false" border>
<el-descriptions-item v-for="(item,index) in detailData" :key="index+'descriptions'"
labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1"
:label="item.label">{{ item.value }}
</el-descriptions-item>
<el-descriptions-item v-for="(item,index) in detailData" :key="index+'descriptions'" labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
</el-descriptions>
</div>
</el-dialog>
<add-device ref="addDevice" :mode="mode" :id="editDeviceId" @update="getData" @clear="clearEditDeviceData"/>
<point-table ref="pointTable"/>
</div>
</template>
<script>
import {deleteService, getDeviceDetailInfo, getDeviceInfoList} from '@/api/ems/site'
import {getDeviceInfoList,getDeviceDetailInfo,deleteService} from'@/api/ems/site'
import {getAllSites} from '@/api/ems/zddt'
import {formatNumber} from "@/filters/ems";
import {getAllDeviceCategory} from '@/api/ems/search'
import PointTable from './PointTable.vue'
import AddDevice from "./AddDevice.vue";
export default {
name: "Sblb",
components: {AddDevice},
watch: {
'$route.query.siteId'(newSiteId) {
const normalizedSiteId = this.hasValidSiteId(newSiteId) ? String(newSiteId).trim() : ''
if (normalizedSiteId === this.siteId) {
return
}
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
}))
}
},
components:{AddDevice,PointTable},
data() {
return {
loading:false,
searchLoading:false,
mode:'',//新增、编辑设备
editDeviceId:'',//编辑设备id
siteId:'',
selectedSiteName: '',
deviceCategory: '',//搜索栏设备类型
deviceCategoryList: [],//设备类别
siteList:[],
tableData:[],
pageSize:10,//分页栏当前每个数据总数
pageNum:1,//分页栏当前页数
@ -158,25 +150,9 @@ export default {
}
},
methods:{
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 => {
this.deviceCategoryList = response?.data || []
})
// 查看设备电位表格
pointDetail(row){
this.$refs.pointTable.showTable(row)
},
clearEditDeviceData(){
this.mode = '';
@ -226,9 +202,7 @@ export default {
});
},
handleClosed(done){
this.detailData.forEach((item) => {
item.value = ''
})
this.detailData.forEach((item)=>{item.value = ''})
done()
},
toDetail(id){
@ -244,9 +218,7 @@ export default {
})
this.dialogTableVisible = true
}).finally(() => {
this.loading = false
})
}).finally(() => {this.loading = false})
},
// 分页
@ -276,26 +248,23 @@ export default {
// 获取数据
getData(){
this.loading=true
const {siteId, deviceCategory, pageNum, pageSize} = this
getDeviceInfoList({siteId, deviceCategory, pageNum, pageSize}).then(response => {
const selectedSiteName = this.getSelectedSiteName(this.$route.query.siteName)
this.selectedSiteName = selectedSiteName
this.tableData = (response?.rows || []).map(item => ({
...item,
siteName: selectedSiteName
}));
const {siteId,pageNum,pageSize} =this
getDeviceInfoList({siteId,pageNum,pageSize}).then(response => {
this.tableData=response?.rows || [];
this.totalSize = response?.total || 0
}).finally(() => {
this.loading = false
})
}).finally(() => {this.loading=false})
},
//获取站点列表
getZdList(){
this.searchLoading=true
getAllSites().then(response => {
this.siteList = response?.data || []
}).finally(() => {this.searchLoading=false})
}
},
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()
this.onReset()
this.getZdList()
}
}
</script>

Some files were not shown because too many files have changed in this diff Show More