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

Compare commits

base: xzzn:b4c49c3e5801271a7fc322b4321c8765c07deab0
Branches Tags
xzzn:main-cloud xzzn:waibao xzzn:develop-cloud xzzn:main-local xzzn:develop-local xzzn:screen-develop
...
compare: xzzn:34d9e038e6c9e02df991ad917db680077944c6f1
Branches Tags
xzzn:waibao xzzn:main-cloud xzzn:develop-cloud xzzn:main-local xzzn:develop-local xzzn:screen-develop

5 Commits
b4c49c3e58 ... 34d9e038e6

Author SHA1 Message Date
白菜
34d9e038e6 合并代码 2025-12-10 15:09:33 +08:00
白菜
ac54ce999e ems、箱型图 2025-12-10 15:00:12 +08:00
白菜
f49efb5edd ems接口、综合查询 2025-12-09 18:25:36 +08:00
白菜
97f9b3ff0e ems 2025-12-08 17:00:18 +08:00
白菜
674a0c6c33 ems、收益报表 2025-12-08 16:58:43 +08:00
7 changed files with 1510 additions and 765 deletions
Expand all files Collapse all files

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

@ -2,331 +2,383 @@ import request from '@/utils/request'
//获取单个站点的信息 //获取单个站点的信息
export function getDzjkHomeView(siteId) { export function getDzjkHomeView(siteId) {
return request({ return request({
url: `/ems/siteMonitor/homeView?siteId=${siteId}`, url: `/ems/siteMonitor/homeView?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//站点首页 冲放曲线 //站点首页 冲放曲线
export function getSevenChargeData({siteId,startDate,endDate}) { export function getSevenChargeData({siteId, startDate, endDate}) {
return request({ return request({
url: `/ems/siteMap/getSevenChargeData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`, url: `/ems/siteMap/getSevenChargeData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
method: 'get' method: 'get'
}) })
} }
// 获取站点包含的设备种类 用来判断单站监控设备监控的菜单栏展示 // 获取站点包含的设备种类 用来判断单站监控设备监控的菜单栏展示
export function getSiteAllDeviceCategory(siteId) { export function getSiteAllDeviceCategory(siteId) {
return request({ return request({
url: `/ems/siteConfig/getSiteAllDeviceCategory?siteId=${siteId}`, url: `/ems/siteConfig/getSiteAllDeviceCategory?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//EMS
export function getEmsDataList(siteId) {
return request({
url: `/ems/siteMonitor/getEmsDataList?siteId=${siteId}`,
method: 'get',
})
}
//获取pcs、实时运行头部的设备信息 //获取pcs、实时运行头部的设备信息
export function getRunningHeadInfo(siteId) { export function getRunningHeadInfo(siteId) {
return request({ return request({
url: `/ems/siteMonitor/runningHeadInfo?siteId=${siteId}`, url: `/ems/siteMonitor/runningHeadInfo?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//获取pcs列表 //获取pcs列表
export function getPcsDetailInfo(siteId) { export function getPcsDetailInfo(siteId) {
return request({ return request({
url: `/ems/siteMonitor/getPcsDetailInfo?siteId=${siteId}`, url: `/ems/siteMonitor/getPcsDetailInfo?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//获取BMS总览数据 //获取BMS总览数据
export function getBMSOverView(siteId) { export function getBMSOverView(siteId) {
return request({ return request({
url: `/ems/siteMonitor/getBMSOverView?siteId=${siteId}`, url: `/ems/siteMonitor/getBMSOverView?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//获取BMS电池簇总览数据 //获取BMS电池簇总览数据
export function getBMSBatteryCluster(siteId) { export function getBMSBatteryCluster(siteId) {
return request({ return request({
url: `/ems/siteMonitor/getBMSBatteryCluster?siteId=${siteId}`, url: `/ems/siteMonitor/getBMSBatteryCluster?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//获取单体电池 电池堆列表数据 //获取单体电池 电池堆列表数据
export function getStackNameList(siteId) { export function getStackNameList(siteId) {
return request({ return request({
url: `/ems/siteMonitor/getStackNameList?siteId=${siteId}`, url: `/ems/siteMonitor/getStackNameList?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//获取单体电池 电池簇列表数据 //获取单体电池 电池簇列表数据
export function getClusterNameList({stackDeviceId,siteId}) { export function getClusterNameList({stackDeviceId, siteId}) {
return request({ return request({
url: `/ems/siteMonitor/getClusterNameList?stackDeviceId=${stackDeviceId}&siteId=${siteId}`, url: `/ems/siteMonitor/getClusterNameList?stackDeviceId=${stackDeviceId}&siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//单体电池表格数据 //单体电池表格数据
export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId,batteryId, pageSize, pageNum}) { export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId, batteryId, pageSize, pageNum}) {
return request({ return request({
url: `/ems/siteMonitor/getClusterDataInfoList?clusterDeviceId=${clusterDeviceId}&siteId=${siteId}&stackDeviceId=${stackDeviceId}&batteryId=${batteryId}&pageSize=${pageSize}&pageNum=${pageNum}`, url: `/ems/siteMonitor/getClusterDataInfoList?clusterDeviceId=${clusterDeviceId}&siteId=${siteId}&stackDeviceId=${stackDeviceId}&batteryId=${batteryId}&pageSize=${pageSize}&pageNum=${pageNum}`,
method: 'get' method: 'get'
}) })
} }
// 单体电池图表 // 单体电池图表
//http://localhost:8089/ems/siteMonitor/getSingleBatteryData?clusterDeviceId=BMSC01&siteId=021_FXX_01&deviceId=001&startDate=2025-07-11&endDate=2025-07-18 //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}) { export function getSingleBatteryData({siteId, deviceId, clusterDeviceId, startDate, endDate}) {
return request({ return request({
url: `/ems/siteMonitor/getSingleBatteryData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&clusterDeviceId=${clusterDeviceId}`, url: `/ems/siteMonitor/getSingleBatteryData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&clusterDeviceId=${clusterDeviceId}`,
method: 'get' method: 'get'
}) })
} }
//获取液冷列表数据 //获取液冷列表数据
export function getCoolingDataList(siteId) { export function getCoolingDataList(siteId) {
return request({ return request({
url: `/ems/siteMonitor/getCoolingDataList?siteId=${siteId}`, url: `/ems/siteMonitor/getCoolingDataList?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//获取动环数据 //获取动环数据
export function getDhDataList(siteId) { export function getDhDataList(siteId) {
return request({ return request({
url: `/ems/siteMonitor/getDhDataList?siteId=${siteId}`, url: `/ems/siteMonitor/getDhDataList?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//获取消防数据 //获取消防数据
export function getXfDataList(siteId) { export function getXfDataList(siteId) {
return request({ return request({
url: `/ems/siteMonitor/getXfDataList?siteId=${siteId}`, url: `/ems/siteMonitor/getXfDataList?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//获取电表数据 //获取电表数据
export function getAmmeterDataList(siteId) { export function getAmmeterDataList(siteId) {
return request({ return request({
url: `/ems/siteMonitor/getAmmeterDataList?siteId=${siteId}`, url: `/ems/siteMonitor/getAmmeterDataList?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
// 故障告警 // 故障告警
export function getAlarmDetailList({status,siteId, deviceId, alarmLevel, alarmStartTime, alarmEndTime,pageSize,pageNum}) { export function getAlarmDetailList({
return request({ status,
url: `/ems/siteAlarm/getAlarmDetailList?siteId=${siteId}&status=${status}&deviceId=${deviceId}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`, siteId,
method: 'get' 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) { export function createTicketNo(data) {
return request({ return request({
url: `/ems/siteAlarm/createTicketNo`, url: `/ems/siteAlarm/createTicketNo`,
method: 'post', method: 'post',
data data
}) })
} }
// 概率统计 // 概率统计
//获取概率统计 电量指标接口 //获取概率统计 电量指标接口
export function getElectricData({siteId,startDate,endDate}) { export function getElectricData({siteId, startDate, endDate}) {
return request({ return request({
url: `/ems/statsReport/getElectricData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`, url: `/ems/statsReport/getElectricData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
method: 'get' method: 'get'
}) })
} }
//获取pcs列表 //获取pcs列表
export function getPcsNameList(siteId) { export function getPcsNameList(siteId) {
return request({ return request({
url: `/ems/siteMonitor/getPcsNameList?siteId=${siteId}`, url: `/ems/siteMonitor/getPcsNameList?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//pcs曲线 //pcs曲线
export function getPCSData({siteId,startTime,endTime,dataType}) { export function getPCSData({siteId, startTime, endTime, dataType}) {
return request({ return request({
url: `/ems/statsReport/getPCSData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`, url: `/ems/statsReport/getPCSData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
method: 'get' method: 'get'
}) })
} }
//电池堆曲线 //电池堆曲线
export function getStackData({siteId,startTime,endTime,dataType}) { export function getStackData({siteId, startTime, endTime, dataType}) {
return request({ return request({
url: `/ems/statsReport/getStackData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`, url: `/ems/statsReport/getStackData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
method: 'get' method: 'get'
}) })
} }
//电池温度 //电池温度
export function getClusterData({siteId,stackId,clusterId,dateTime,pageNum,pageSize}) { export function getClusterData({siteId, stackId, clusterId, dateTime, pageNum, pageSize}) {
return request({ return request({
url: `/ems/statsReport/getClusterData?siteId=${siteId}&stackId=${stackId}&clusterId=${clusterId}&dateTime=${dateTime}&pageNum=${pageNum}&pageSize=${pageSize}`, url: `/ems/statsReport/getClusterData?siteId=${siteId}&stackId=${stackId}&clusterId=${clusterId}&dateTime=${dateTime}&pageNum=${pageNum}&pageSize=${pageSize}`,
method: 'get' method: 'get'
}) })
} }
// 实时运行 // 实时运行
//储能 //储能
export function storagePower(siteId,startTime,endTime) { export function storagePower(siteId, startTime, endTime) {
return request({ return request({
url: `/ems/siteMonitor/runningGraph/storagePower?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`, url: `/ems/siteMonitor/runningGraph/storagePower?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
method: 'get' method: 'get'
}) })
} }
//poc温度 //poc温度
export function pcsMaxTemp(siteId,startTime,endTime) { export function pcsMaxTemp(siteId, startTime, endTime) {
return request({ return request({
url: `/ems/siteMonitor/runningGraph/pcsMaxTemp?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`, url: `/ems/siteMonitor/runningGraph/pcsMaxTemp?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
method: 'get' method: 'get'
}) })
} }
// 电池平均soc // 电池平均soc
export function batteryAveSoc(siteId,startTime,endTime) { export function batteryAveSoc(siteId, startTime, endTime) {
return request({ return request({
url: `/ems/siteMonitor/runningGraph/batteryAveSoc?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`, url: `/ems/siteMonitor/runningGraph/batteryAveSoc?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
method: 'get' method: 'get'
}) })
} }
// 电池平均温度 // 电池平均温度
export function batteryAveTemp(siteId,startTime,endTime) { export function batteryAveTemp(siteId, startTime, endTime) {
return request({ return request({
url: `/ems/siteMonitor/runningGraph/batteryAveTemp?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`, url: `/ems/siteMonitor/runningGraph/batteryAveTemp?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
method: 'get' method: 'get'
}) })
} }
// 功率曲线 // 功率曲线
export function getPowerData({siteId,startDate,endDate}) { export function getPowerData({siteId, startDate, endDate}) {
return request({ return request({
url: `/ems/statsReport/getPowerData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`, url: `/ems/statsReport/getPowerData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
method: 'get' method: 'get'
}) })
} }
//电表列表 //电表列表
export function getLoadNameList(siteId) { export function getLoadNameList(siteId) {
return request({ return request({
url: `/ems/statsReport/getLoadNameList?siteId=${siteId}`, url: `/ems/statsReport/getLoadNameList?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
}
// 电表报表
export function getAmmeterData({siteId,startTime,endTime, pageSize, pageNum}) {
return request({
url: `/ems/statsReport/getAmmeterData?siteId=${siteId}&startTime=${startTime}&endTime=${endTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
method: 'get'
})
} }
// 电表报表
export function getAmmeterData({siteId, startTime, endTime, pageSize, pageNum}) {
return request({
url: `/ems/statsReport/getAmmeterData?siteId=${siteId}&startTime=${startTime}&endTime=${endTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
method: 'get'
})
}
// 电价报表
export function getAmmeterRevenueData(data) {
return request({
url: `/ems/statsReport/getAmmeterRevenueData`,
method: 'get',
params: data
})
}
//策略列表 //策略列表
export function strategyRunningList(siteId) { export function strategyRunningList(siteId) {
return request({ return request({
url: `/system/strategyRunning/list?siteId=${siteId}`, url: `/system/strategyRunning/list?siteId=${siteId}`,
method: 'get' method: 'get'
}) })
} }
//停止策略 //停止策略
export function stopStrategyRunning(id) { export function stopStrategyRunning(id) {
return request({ return request({
url: `/system/strategyRunning/stop?id=${id}`, url: `/system/strategyRunning/stop?id=${id}`,
method: 'get' method: 'get'
}) })
} }
// 获取所有主策略 // 获取所有主策略
export function getMainStrategyList() { export function getMainStrategyList() {
return request({ return request({
url: `/system/strategyRunning/getMainStrategyList`, url: `/system/strategyRunning/getMainStrategyList`,
method: 'get' method: 'get'
}) })
} }
//获取所有辅助策略 //获取所有辅助策略
export function getAuxStrategyList() { export function getAuxStrategyList() {
return request({ return request({
url: `/system/strategyRunning/getAuxStrategyList`, url: `/system/strategyRunning/getAuxStrategyList`,
method: 'get' method: 'get'
}) })
} }
//配置策略 //配置策略
export function configStrategy(data) { export function configStrategy(data) {
return request({ return request({
url: `/system/strategyRunning/configStrategy`, url: `/system/strategyRunning/configStrategy`,
method: 'post', method: 'post',
data data
}) })
} }
//http://localhost:8089/strategy/temp/getTempNameList?strategyId=1&siteId=021_FXX_01 //http://localhost:8089/strategy/temp/getTempNameList?strategyId=1&siteId=021_FXX_01
//获取策略下的所有模板列表 //获取策略下的所有模板列表
export function getTempNameList({siteId,strategyId}) { export function getTempNameList({siteId, strategyId}) {
return request({ return request({
url: `/strategy/temp/getTempNameList?siteId=${siteId}&strategyId=${strategyId}`, url: `/strategy/temp/getTempNameList?siteId=${siteId}&strategyId=${strategyId}`,
method: 'get', method: 'get',
}) })
} }
//获取模板详情 //获取模板详情
///strategy/temp/list?templateId=1 ///strategy/temp/list?templateId=1
export function getStrategyTempDetail(templateId) { export function getStrategyTempDetail(templateId) {
return request({ return request({
url: `/strategy/temp/list?templateId=${templateId}`, url: `/strategy/temp/list?templateId=${templateId}`,
method: 'get', method: 'get',
}) })
} }
//新增模板 //新增模板
export function addStrategyTemp(data) { export function addStrategyTemp(data) {
return request({ return request({
url: `/strategy/temp`, url: `/strategy/temp`,
method: 'post', method: 'post',
data data
}) })
} }
export function editStrategyTemp(data) { export function editStrategyTemp(data) {
return request({ return request({
url: `/strategy/temp`, url: `/strategy/temp`,
method: 'put', method: 'put',
data data
}) })
} }
//http://localhost:8089/strategy/temp/{id} //http://localhost:8089/strategy/temp/{id}
export function deleteStrategyTemp(id) { export function deleteStrategyTemp(id) {
return request({ return request({
url: `/strategy/temp/`+id, url: `/strategy/temp/` + id,
method: 'delete', method: 'delete',
}) })
} }
//http://localhost:8089/strategy/timeConfig/list?strategyId=1&siteId=021_FXX_01 //http://localhost:8089/strategy/timeConfig/list?strategyId=1&siteId=021_FXX_01
export function timeConfigList({siteId,strategyId}) { export function timeConfigList({siteId, strategyId}) {
return request({ return request({
url: `/strategy/timeConfig/list?siteId=${siteId}&strategyId=${strategyId}`, url: `/strategy/timeConfig/list?siteId=${siteId}&strategyId=${strategyId}`,
method: 'get', method: 'get',
}) })
} }
//保存时间配置 //保存时间配置
// http://localhost:8089/strategy/timeConfig // http://localhost:8089/strategy/timeConfig
export function setTimeConfigList(data) { export function setTimeConfigList(data) {
return request({ return request({
url: `/strategy/timeConfig`, url: `/strategy/timeConfig`,
method: 'post', method: 'post',
data data
}) })
} }
// 策略曲线图 // 策略曲线图
//http://localhost:8089/strategy/curve/curveList?strategyId=1&siteId=021_FXX_01 //http://localhost:8089/strategy/curve/curveList?strategyId=1&siteId=021_FXX_01
export function curveList({siteId,strategyId}) { export function curveList({siteId, strategyId}) {
return request({ return request({
url: `/strategy/curve/curveList?siteId=${siteId}&strategyId=${strategyId}`, url: `/strategy/curve/curveList?siteId=${siteId}&strategyId=${strategyId}`,
method: 'get', method: 'get',
}) })
} }
//单站监控 首页 当日功率曲线 //单站监控 首页 当日功率曲线
export function getPointData({siteId,startDate,endDate}) { export function getPointData({siteId, startDate, endDate}) {
return request({ return request({
url: `/ems/siteMonitor/getPointData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`, url: `/ems/siteMonitor/getPointData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
method: 'get', method: 'get',
}) })
} }

419
src/router/ems.js
View File

@ -2,168 +2,265 @@ import Layout from "@/layout/index.vue";
//单站监控 //单站监控
// todo 本地设置了 hidden:true,不会显示在侧边栏，需要在系统管理、菜单管理中手动添加菜单后才会展示在侧边栏 // todo 本地设置了 hidden:true,不会显示在侧边栏，需要在系统管理、菜单管理中手动添加菜单后才会展示在侧边栏
export const dzjk=[ export const dzjk = [
{ {
path: '/dzjk', path: '/dzjk',
component: Layout, component: Layout,
redirect: '/dzjk/home', redirect: '/dzjk/home',
meta: { title: '单站监控', icon: 'server',}, meta: {title: '单站监控', icon: 'server',},
alwaysShow: false, alwaysShow: false,
name:'Dzjk', name: 'Dzjk',
children: [ children: [
{ {
path: '/dzjk/home', path: '/dzjk/home',
component: () => import('@/views/ems/dzjk/home/index.vue'), component: () => import('@/views/ems/dzjk/home/index.vue'),
name: 'DzjkHome', name: 'DzjkHome',
meta: { title: '站点首页',breadcrumb: false,activeMenu: '/dzjk/home',activeSecondMenuName:'DzjkHome' } meta: {title: '站点首页', breadcrumb: false, activeMenu: '/dzjk/home', activeSecondMenuName: 'DzjkHome'}
}, },
{ {
path: '/dzjk/zxlt', path: '/dzjk/zxlt',
component: () => import('@/views/ems/dzjk/zxlt/index.vue'), component: () => import('@/views/ems/dzjk/zxlt/index.vue'),
name: 'DzjkZxlt', name: 'DzjkZxlt',
meta: { title: '主线路图',breadcrumb: false,activeMenu: '/dzjk/zxlt',activeSecondMenuName:'DzjkZxlt' } meta: {title: '主线路图', breadcrumb: false, activeMenu: '/dzjk/zxlt', activeSecondMenuName: 'DzjkZxlt'}
}, },
{ {
path: '/dzjk/sbjk', path: '/dzjk/sbjk',
component: () => import('@/views/ems/dzjk/sbjk/index.vue'), component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
name: 'DzjkSbjk', name: 'DzjkSbjk',
alwaysShow: false, alwaysShow: false,
meta: { title: '设备监控',breadcrumb: false,activeMenu: '/dzjk/sbjk'}, meta: {title: '设备监控', breadcrumb: false, activeMenu: '/dzjk/sbjk'},
hidden: false, hidden: false,
redirect: '/dzjk/sbjk/ssyx', redirect: '/dzjk/sbjk/ssyx',
children: [ children: [
{ {
path: 'ssyx', path: 'ssyx',
component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'), component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'),
name: 'DzjkSbjkSsyx', name: 'DzjkSbjkSsyx',
hidden: true, hidden: true,
meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'SSYX'}, meta: {
}, title: '实时运行',
{ breadcrumb: false,
path: 'pcs', activeMenu: '/dzjk/sbjk',
component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'), activeSecondMenuName: 'DzjkSbjk',
name: 'DzjkSbjkPcs', deviceCategory: 'SSYX'
hidden: true, },
meta: { title: 'PCS',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'PCS'}, },
}, {
{ path: 'ems',
path: 'bmszl', component: () => import('@/views/ems/dzjk/sbjk/ems/index.vue'),
component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'), name: 'DzjkSbjkEms',
name: 'DzjkSbjkBmszl', hidden: true,
hidden: true, meta: {
meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk', deviceCategory:'STACK'}, title: 'EMS',
}, breadcrumb: false,
{ activeMenu: '/dzjk/sbjk',
path: 'bmsdcc', activeSecondMenuName: 'DzjkSbjk',
component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'), deviceCategory: 'EMS'
name: 'DzjkSbjkBmsdcc', },
hidden: true, },
meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'CLUSTER'}, {
}, path: 'pcs',
{ component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
path: 'dtdc', name: 'DzjkSbjkPcs',
component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'), hidden: true,
name: 'DzjkSbjkDtdc', meta: {
hidden: true, title: 'PCS',
meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'BATTERY'}, breadcrumb: false,
}, activeMenu: '/dzjk/sbjk',
{ activeSecondMenuName: 'DzjkSbjk',
path: 'db', deviceCategory: 'PCS'
component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'), },
name: 'DzjkSbjkDb', },
hidden: true, {
meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'AMMETER'}, path: 'bmszl',
}, component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'),
{ name: 'DzjkSbjkBmszl',
path: 'yl', hidden: true,
component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'), meta: {
name: 'DzjkSbjkYl', title: 'BMS总览',
hidden: true, breadcrumb: false,
meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'COOLING'}, activeMenu: '/dzjk/sbjk',
}, activeSecondMenuName: 'DzjkSbjk',
{ deviceCategory: 'STACK'
path: 'dh', },
component: () => import('@/views/ems/dzjk/sbjk/dh/index.vue'), },
name: 'DzjkSbjkDh', {
hidden: true, path: 'bmsdcc',
meta: { title: '动环',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'DH'}, component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'),
}, name: 'DzjkSbjkBmsdcc',
{ hidden: true,
path: 'xf', meta: {
component: () => import('@/views/ems/dzjk/sbjk/xf/index.vue'), title: 'BMS电池簇',
name: 'DzjkSbjkXf', breadcrumb: false,
hidden: true, activeMenu: '/dzjk/sbjk',
meta: { title: '消防',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'XF'}, activeSecondMenuName: 'DzjkSbjk',
} deviceCategory: 'CLUSTER'
] },
}, },
{ {
path: '/dzjk/gzgj', path: 'dtdc',
component: () => import('@/views/ems/dzjk/gzgj/index.vue'), component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'),
name: 'DzjkGzgj', name: 'DzjkSbjkDtdc',
meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk/gzgj',activeSecondMenuName:'DzjkGzgj' } hidden: true,
}, meta: {
{ title: '单体电池',
path: '/dzjk/tjbb', breadcrumb: false,
component: () => import('@/views/ems/dzjk/tjbb/index.vue'), activeMenu: '/dzjk/sbjk',
name: 'DzjkTjbb', activeSecondMenuName: 'DzjkSbjk',
alwaysShow: false, deviceCategory: 'BATTERY'
meta: {title: '统计报表', breadcrumb: false, activeMenu: '/dzjk/tjbb'}, },
hidden: false, },
redirect: '/dzjk/tjbb/gltj', {
children: [ path: 'db',
{ component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'),
path: 'gltj', name: 'DzjkSbjkDb',
component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'), hidden: true,
name: 'DzjkTjbbGltj', meta: {
hidden: true, title: '电表',
meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'}, breadcrumb: false,
}, activeMenu: '/dzjk/sbjk',
{ activeSecondMenuName: 'DzjkSbjk',
path: 'glqx', deviceCategory: 'AMMETER'
component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'), },
name: 'DzjkTjbbGlqx', },
hidden: true, {
meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'}, path: 'yl',
}, component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
{ name: 'DzjkSbjkYl',
path: 'pcsqx', hidden: true,
component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'), meta: {
name: 'DzjkTjbbPcsqx', title: '液冷',
hidden: true, breadcrumb: false,
meta: { title: 'PCS曲线',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'}, activeMenu: '/dzjk/sbjk',
}, activeSecondMenuName: 'DzjkSbjk',
{ deviceCategory: 'COOLING'
path: 'dcdqx', },
component: () => import('@/views/ems/dzjk/tjbb/dcdqx/index.vue'), },
name: 'DzjkTjbbDcdqx', {
hidden: true, path: 'dh',
meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'}, component: () => import('@/views/ems/dzjk/sbjk/dh/index.vue'),
}, name: 'DzjkSbjkDh',
{ hidden: true,
path: 'dcwd', meta: {
component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'), title: '动环',
name: 'DzjkTjbbDcwd', breadcrumb: false,
hidden: true, activeMenu: '/dzjk',
meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'}, activeSecondMenuName: 'DzjkSbjk',
}, deviceCategory: 'DH'
{ },
path: 'dbbb', },
component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'), {
name: 'DzjkTjbbDbbb', path: 'xf',
hidden: true, component: () => import('@/views/ems/dzjk/sbjk/xf/index.vue'),
meta: { title: '电表报表',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'}, name: 'DzjkSbjkXf',
} hidden: true,
] meta: {
}, title: '消防',
{ breadcrumb: false,
path: '/dzjk/clpz', activeMenu: '/dzjk',
component: () => import('@/views/ems/dzjk/clpz/clyx/index.vue'), activeSecondMenuName: 'DzjkSbjk',
name: 'DzjkClpz', deviceCategory: 'XF'
meta: {title: '策略配置', breadcrumb: false, activeMenu: '/dzjk/clpz'}, },
} }
]
},
{
path: '/dzjk/gzgj',
component: () => import('@/views/ems/dzjk/gzgj/index.vue'),
name: 'DzjkGzgj',
meta: {title: '故障告警', breadcrumb: false, activeMenu: '/dzjk/gzgj', activeSecondMenuName: 'DzjkGzgj'}
},
{
path: '/dzjk/tjbb',
component: () => import('@/views/ems/dzjk/tjbb/index.vue'),
name: 'DzjkTjbb',
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',
hidden: true,
meta: {
title: '概率统计',
breadcrumb: false,
activeMenu: '/dzjk/tjbb',
activeSecondMenuName: 'DzjkTjbb'
},
},
{
path: 'glqx',
component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'),
name: 'DzjkTjbbGlqx',
hidden: true,
meta: {
title: '功率曲线',
breadcrumb: false,
activeMenu: '/dzjk/tjbb',
activeSecondMenuName: 'DzjkTjbb'
},
},
{
path: 'pcsqx',
component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'),
name: 'DzjkTjbbPcsqx',
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',
hidden: true,
meta: {
title: '电池堆曲线',
breadcrumb: false,
activeMenu: '/dzjk/tjbb',
activeSecondMenuName: 'DzjkTjbb'
},
},
{
path: 'dcwd',
component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'),
name: 'DzjkTjbbDcwd',
hidden: true,
meta: {
title: '电池温度',
breadcrumb: false,
activeMenu: '/dzjk/tjbb',
activeSecondMenuName: 'DzjkTjbb'
},
},
{
path: 'dbbb',
component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'),
name: 'DzjkTjbbDbbb',
hidden: true,
meta: {
title: '电表报表',
breadcrumb: false,
activeMenu: '/dzjk/tjbb',
activeSecondMenuName: 'DzjkTjbb'
},
}
]
},
{
path: '/dzjk/clpz',
component: () => import('@/views/ems/dzjk/clpz/clyx/index.vue'),
name: 'DzjkClpz',
meta: {title: '策略配置', breadcrumb: false, activeMenu: '/dzjk/clpz'},
}
] ]
} }
] ]

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

@ -1,62 +1,71 @@
import {getAllSites} from '@/api/ems/zddt' import {getAllSites} from '@/api/ems/zddt'
import {getAlarmDetailList,getSiteAllDeviceCategory} from'@/api/ems/dzjk' import {getAlarmDetailList, getSiteAllDeviceCategory} from '@/api/ems/dzjk'
const ems = {
state: {
dzjkAlarmLighting:false,//单站监控 告警统计红点标志
zdList:[],
zdDeviceCategoryOptions:{},//站点各个站点包含的设备种类 {021_DDS_01:["BATTERY","CLUSTER","STACK", "DH", "AMMETER", "PCS", "XF"],021_DDS_02:[]...}
workStatusOptions:{'0':'正常','1':'异常','2':'停止'},//工作状态
deviceStatusOptions:{'0':'离线','1':'待机','2':'运行','3':'故障','4':'停机'},//设备状态
gridStatusOptions:{'0':'并网','1':'未并网'},//并网状态
controlModeOptions:{'0':'远程','1':'本地'},//控制模式
warnOptions:{0:'正常', 1:'中断', 2:'不在线',3:'异常'},//告警状态
communicationStatusOptions:{'0':'正常','1':'通讯中断','2':'异常'},//通讯状态
workModeOptions:{'0':'正常','1':'停止'},//工作模式
alarmLevelOptions:{'A':'提示','B':'一般','C':'严重','D':'紧急'},//告警等级
alarmStatusOptions:{'0':'待处理','1':'已处理','2':'处理中'},//告警状态
deviceTypeOptions:{'TCP':'TCP','RTU':'RTU'},//设备类型
ticketStatusOptions:{1:'待处理', 2:'处理中', 3:'已处理'},//工单处理状态
strategyStatusOptions:{'0':'未启用', '1':'已运行', '2':'已暂停', '3':'禁用', '4':'删除'},//策略状态
chargeStatusOptions:{'1':'充电','2':'待机'},//冲放状态
deviceCategoryOptions:{'PCS':'PCS','STACK':'电池堆','CLUSTER':'电池簇','COOLING':'液冷','BATTERY':'单体电池','AMMETER':'电表'},//设备类别
comparisonOperatorOptions:{'>':'>','<':'<','=':'=','>=':'>=','<=':'<='},
relationWithPoint:{'||':'||','&&':'&&'}
},
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: {
getZdList({commit,state}){
if(state.zdList.length === 0){
getAllSites().then(response => {
commit('SET_ZD_LIST', response?.data || [])
console.log('store action getZdList 获取站点数据',state.zdList)
})
}
},
//查询站点的所有待处理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})
})
}
} const ems = {
state: {
dzjkAlarmLighting: false,//单站监控 告警统计红点标志
zdList: [],
zdDeviceCategoryOptions: {},//站点各个站点包含的设备种类 {021_DDS_01:["BATTERY","CLUSTER","STACK", "DH", "AMMETER", "PCS", "XF"],021_DDS_02:[]...}
workStatusOptions: {'0': '正常', '1': '异常', '2': '停止'},//工作状态
deviceStatusOptions: {'0': '离线', '1': '待机', '2': '运行', '3': '故障', '4': '停机'},//设备状态
gridStatusOptions: {'0': '并网', '1': '未并网'},//并网状态
controlModeOptions: {'0': '远程', '1': '本地'},//控制模式
warnOptions: {0: '正常', 1: '中断', 2: '不在线', 3: '异常'},//告警状态
communicationStatusOptions: {'0': '正常', '1': '通讯中断', '2': '异常'},//通讯状态
workModeOptions: {'0': '正常', '1': '停止'},//工作模式
alarmLevelOptions: {'A': '提示', 'B': '一般', 'C': '严重', 'D': '紧急'},//告警等级
alarmStatusOptions: {'0': '待处理', '1': '已处理', '2': '处理中'},//告警状态
deviceTypeOptions: {'TCP': 'TCP', 'RTU': 'RTU'},//设备类型
ticketStatusOptions: {1: '待处理', 2: '处理中', 3: '已处理'},//工单处理状态
strategyStatusOptions: {'0': '未启用', '1': '已运行', '2': '已暂停', '3': '禁用', '4': '删除'},//策略状态
chargeStatusOptions: {'1': '充电', '2': '待机'},//冲放状态
comparisonOperatorOptions: {'>': '>', '<': '<', '=': '=', '>=': '>=', '<=': '<='},
relationWithPoint: {'||': '||', '&&': '&&'}
},
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: {
getZdList({commit, state}) {
if (state.zdList.length === 0) {
getAllSites().then(response => {
commit('SET_ZD_LIST', response?.data || [])
console.log('store action getZdList 获取站点数据', state.zdList)
})
}
},
//查询站点的所有待处理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})
})
}
}
} }
export default ems export default ems

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

@ -1,20 +1,20 @@
<!--电位展示图表--> <!--电位展示图表-->
<template> <template>
<el-dialog <el-dialog
:visible.sync="show" :visible.sync="show"
:title="pointName" :title="pointName"
:close-on-click-modal="false" :close-on-click-modal="false"
show-close show-close
destroy-on-close destroy-on-close
lock-scroll lock-scroll
append-to-body append-to-body
width="1000px" width="1000px"
class="ems-dialog" class="ems-dialog"
:before-close="handleClosed" :before-close="handleClosed"
> >
<el-card <el-card
shadow="always" shadow="always"
class="common-card-container common-card-container-body-no-padding time-range-card" class="common-card-container common-card-container-body-no-padding time-range-card"
> >
<div slot="header" class="time-range-header"> <div slot="header" class="time-range-header">
<el-radio-group class="card-title" v-model="dataUnit"> <el-radio-group class="card-title" v-model="dataUnit">
@ -23,10 +23,10 @@
<el-radio :label="3">天</el-radio> <el-radio :label="3">天</el-radio>
</el-radio-group> </el-radio-group>
<date-time-select <date-time-select
ref="dateTimeSelect" ref="dateTimeSelect"
:data-unit="dataUnit" :data-unit="dataUnit"
@initDate="(e) => (dataRange = e || [])" @initDate="(e) => (dataRange = e || [])"
@updateDate="updateDate" @updateDate="updateDate"
/> />
</div> </div>
<div style="height: 350px" id="searchChart"></div> <div style="height: 350px" id="searchChart"></div>
@ -37,10 +37,11 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
import resize from "@/mixins/ems/resize"; import resize from "@/mixins/ems/resize";
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue"; import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
import { getPointValueList } from "@/api/ems/search"; import {getPointValueList} from "@/api/ems/search";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue"; import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default { export default {
components: { DateRangeSelect, DateTimeSelect }, components: {DateRangeSelect, DateTimeSelect},
mixins: [resize], mixins: [resize],
props: { props: {
siteId: { siteId: {
@ -93,7 +94,7 @@ export default {
}; };
}, },
methods: { methods: {
showChart({ pointName, deviceCategory, deviceId, child = "" }) { showChart({pointName, deviceCategory, deviceId, child = ""}) {
//初始化数据 //初始化数据
this.pointName = pointName; this.pointName = pointName;
this.deviceCategory = deviceCategory; this.deviceCategory = deviceCategory;
@ -152,84 +153,94 @@ export default {
endDate, endDate,
siteDeviceMap, siteDeviceMap,
}) })
.then((response) => { .then((response) => {
this.setOption(response?.data || []); this.setOption(response?.data || []);
}) })
.finally(() => { .finally(() => {
this.hideLoading(); this.hideLoading();
}); });
}, },
setOption(data) { setOption(data) {
if (!this.chart) return; if (!this.chart) return;
this.chart.clear(); this.chart.clear();
console.log("返回的数据", data); console.log("返回的数据", data);
let dataset = []; if (!data || data.length <= 0) {
if (data.length > 0) {
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);
});
});
});
} else {
this.$message.warning("暂无数据"); this.$message.warning("暂无数据");
} }
console.log("图表数据", dataset); console.log('展示的图表类型chartType', data[0].chartType)
if (data[0].chartType === 2) {
// 箱型图
this.setBoxOption(data)
} else {
//折线图
this.setLineOption(data)
}
},
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);
this.chart.setOption({ this.chart.setOption({
legend: { legend: {
// left: 'center', // left: 'center',
@ -241,14 +252,17 @@ export default {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
// 坐标轴指示器，坐标轴触发有效 type: 'cross',
type: "cross", // 默认为直线，可选为：'line' | 'shadow'
}, },
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
// },
}, },
textStyle: { textStyle: {
color: "#333333", color: "#333333",
}, },
xAxis: { type: "category", data: dataset?.[0]?.xdata || [] }, xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
yAxis: { yAxis: {
type: "value", type: "value",
}, },
@ -266,6 +280,122 @@ export default {
series: dataset, 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: '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,
});
},
updateDate(val) { updateDate(val) {
this.dataRange = val || []; this.dataRange = val || [];
this.getDate(); this.getDate();

334
src/views/ems/dzjk/sbjk/ems/index.vue Normal file
View File

@ -0,0 +1,334 @@
<template>
<div v-loading="loading" class="ems">
<!-- <div-->
<!-- v-for="(item, index) in list"-->
<!-- :key="index + 'PcsHome'"-->
<!-- style="margin-bottom: 25px"-->
<!-- >-->
<!-- <el-card-->
<!-- :class="{-->
<!-- 'warning-card-container': item.workStatus === '1',-->
<!-- 'timing-card-container': item.workStatus === '2',-->
<!-- 'running-card-container': !['1', '2'].includes(item.workStatus),-->
<!-- }"-->
<!-- class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"-->
<!-- shadow="always"-->
<!-- >-->
<!-- &lt;!&ndash; 标题&ndash;&gt;-->
<!-- <div slot="header">-->
<!-- <span class="large-title"-->
<!-- >{{ item.deviceName }}</span-->
<!-- >-->
<!-- <div class="info">-->
<!-- <div>-->
<!-- {{-->
<!-- $store.state.ems.workStatusOptions[item.workStatus]-->
<!-- }}-->
<!-- </div>-->
<!-- <div>数据更新时间：{{ item.dataUpdateTime }}</div>-->
<!-- </div>-->
<!-- <div class="alarm">-->
<!-- <el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">-->
<!-- 详细-->
<!-- </el-button>-->
<!-- <el-badge :value="item.alarmNum || 0" class="item">-->
<!-- <i-->
<!-- class="el-icon-message-solid alarm-icon"-->
<!-- @click="pointDetail(item,'alarmPoint')"-->
<!-- ></i>-->
<!-- </el-badge>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; 工作状态&ndash;&gt;-->
<!-- <div class="descriptions-main">-->
<!-- <el-descriptions :colon="false" :column="5" direction="vertical">-->
<!-- <el-descriptions-item-->
<!-- :contentClassName="`descriptions-direction ${-->
<!-- item.workStatus === '0' ? 'save' : 'danger'-->
<!-- }`"-->
<!-- :span="1"-->
<!-- label="工作状态"-->
<!-- labelClassName="descriptions-label"-->
<!-- >{{-->
<!-- $store.state.ems.workStatusOptions[item.workStatus]-->
<!-- }}-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="工作模式"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- todo 手动/自动-->
<!-- {{-->
<!-- $store.state.ems.gridStatusOptions[item.gridStatus]-->
<!-- }}-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="并网状态"-->
<!-- labelClassName="descriptions-label"-->
<!-- >{{-->
<!-- $store.state.ems.gridStatusOptions[item.gridStatus]-->
<!-- }}-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="告警状态"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- todo-->
<!-- &lt;!&ndash;-->
<!-- {{-->
<!-- $store.state.ems.warnOptions[item.warnMode]-->
<!-- }}&ndash;&gt;-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :contentClassName="`descriptions-direction ${-->
<!-- item.deviceStatus === '2' ? 'save' : 'danger'-->
<!-- }`"-->
<!-- :span="1"-->
<!-- label="设备状态"-->
<!-- labelClassName="descriptions-label"-->
<!-- >{{-->
<!-- $store.state.ems.deviceStatusOptions[item.deviceStatus]-->
<!-- }}-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- </el-descriptions>-->
<!-- </div>-->
<!-- &lt;!&ndash; 用电量&ndash;&gt;-->
<!-- <div class="descriptions-main descriptions-main-bg-color">-->
<!-- <el-descriptions :colon="false" :column="5" direction="vertical">-->
<!-- <el-descriptions-item-->
<!-- :span="5"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="当日用电量："-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="电网用电量"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="储能放电量"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="储能充电量"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="负荷用电量"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="光伏发电量"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- </el-descriptions>-->
<!-- </div>-->
<!-- &lt;!&ndash; 表格&ndash;&gt;-->
<!-- <el-table-->
<!-- class="common-table"-->
<!-- stripe-->
<!-- style="width: 100%;margin-top:25px;">-->
<!-- <el-table-column-->
<!-- label="功率"-->
<!-- prop="type">-->
<!-- </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="负荷">-->
<!-- <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="光伏">-->
<!-- <template slot-scope="scope">-->
<!-- <span class="pointer"-->
<!-- @click="showChart('当前SOC',scope.row.clusterId)">{{ scope.row.currentSoc }} %</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 图表&ndash;&gt;-->
<!-- <div id="emsChart" style="height: 350px"></div>-->
<!-- </el-card>-->
<!-- </div>-->
<el-card
v-for="(item,index) in list"
:key="index+'emsList'"
class="sbjk-card-container list running-card-container"
shadow="always"
>
<div slot="header">
<span class="large-title">{{ item.deviceName }}</span>
<div class="info">
<div>
EMS控制模式: {{
item.emsStatus === 0 ? '自动' : '手动'
}}
</div>
<div>数据更新时间：{{ item.dataUpdateTime }}</div>
</div>
<div class="alarm">
<el-button size="small" style="margin-right:20px;" type="primary" @click="pointDetail(item,'point')">详细
</el-button>
<el-badge :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 bmsDataList" :key="tempDataIndex+'bmsTempData'"
:span="6" class="device-info-col">
<span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
<span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
v-html="tempDataItem.unit"></span></span>
</span>
</el-col>
<el-col v-for="(tempDataItem,tempDataIndex) in pcsDataList" :key="tempDataIndex+'pcsTempData'"
:span="6" class="device-info-col">
<span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
<span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
v-html="tempDataItem.unit"></span></span>
</span>
</el-col>
</el-row>
</el-card>
<el-empty v-show="list.length <= 0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
<point-table ref="pointTable"/>
</div>
</template>
<script>
import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getEmsDataList} from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name: "DzjkSbjkEms",
components: {pointChart, PointTable},
mixins: [getQuerySiteId, intervalUpdate],
data() {
return {
loading: false,
list: [],
bmsDataList: [{
name: 'BMS1SOC',
attr: 'bms1Soc'
},
{
name: 'BMS2SOC',
attr: 'bms2Soc'
},
{
name: 'BMS3SOC',
attr: 'bms3Soc'
},
{
name: 'BMS4SOC',
attr: 'bms4Soc'
}],
pcsDataList: [{
name: 'PCS-1有功功率',
attr: 'pcs1Yggl'
},
{
name: 'PCS-2有功功率',
attr: 'pcs2Yggl'
},
{
name: 'PCS-3有功功率',
attr: 'pcs3Yggl'
},
{
name: 'PCS-4有功功率',
attr: 'pcs4Yggl'
}]
};
},
methods: {
// 查看设备电位表格
pointDetail(row, dataType) {
const {deviceId} = row
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'EMS'}, dataType)
},
showChart(pointName, deviceId) {
pointName &&
this.$refs.pointChart.showChart({pointName, deviceCategory: 'EMS', deviceId});
},
getData() {
this.loading = true;
getEmsDataList(this.siteId)
.then((response) => {
const data = response?.data || {};
this.list = JSON.parse(JSON.stringify(data));
})
.finally(() => (this.loading = false));
},
updateData() {
this.getData();
},
init() {
this.updateData();
this.updateInterval(this.updateData);
},
},
};
</script>
<style lang="scss" scoped></style>

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

@ -1,4 +1,3 @@
<template> <template>
<div style="width:100%" v-loading="loading"> <div style="width:100%" v-loading="loading">
<!-- 搜索栏--> <!-- 搜索栏-->
@ -25,169 +24,171 @@
</el-form> </el-form>
<!--表格--> <!--表格-->
<el-table <el-table
class="common-table" class="common-table"
:data="tableData" :data="tableData"
stripe stripe
style="width: 100%;margin-top:25px;"> style="width: 100%;margin-top:25px;">
<!-- 汇总列--> <!-- 汇总列-->
<el-table-column label="汇总"> <el-table-column label="汇总">
<el-table-column <el-table-column
prop="dataTime" prop="dataTime"
label="日期" label="日期"
width="120"> width="120">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<!--充电量列--> <!--充电量列-->
<el-table-column label="充电价格" align="center"> <el-table-column label="充电价格" align="center">
<el-table-column <el-table-column
align="center" align="center"
prop="activePeakKwh" prop="activePeakPrice"
label="尖"> label="尖">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="activeHighKwh" prop="activeHighPrice"
label="峰"> label="峰">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="activeFlatKwh" prop="activeFlatPrice"
label="平"> label="平">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="activeValleyKwh" prop="activeValleyPrice"
label="谷"> label="谷">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="activeTotalKwh" prop="activeTotalPrice"
label="总"> label="总">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<!--充电量列--> <!--充电量列-->
<el-table-column label="放电价格" align="center"> <el-table-column label="放电价格" align="center">
<el-table-column <el-table-column
align="center" align="center"
prop="reActivePeakKwh" prop="reActivePeakPrice"
label="尖"> label="尖">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="reActiveHighKwh" prop="reActiveHighPrice"
label="峰"> label="峰">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="reActiveFlatKwh" prop="reActiveFlatPrice"
label="平"> label="平">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="reActiveValleyKwh" prop="reActiveValleyPrice"
label="谷"> label="谷">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="reActiveTotalKwh" prop="reActiveTotalPrice"
label="总"> label="总">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<!-- 效率--> <!-- 效率-->
<!-- <el-table-column label="效率(%)" align="center">--> <!-- <el-table-column label="效率(%)" align="center">-->
<!-- <el-table-column--> <!-- <el-table-column-->
<!-- align="center"--> <!-- align="center"-->
<!-- prop="effect">--> <!-- prop="effect">-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
</el-table> </el-table>
<el-pagination <el-pagination
v-show="tableData.length>0" v-show="tableData.length>0"
background background
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="pageNum" :current-page="pageNum"
:page-size="pageSize" :page-size="pageSize"
:page-sizes="[10, 20, 30, 40]" :page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="totalSize" :total="totalSize"
style="margin-top:15px;text-align: center" style="margin-top:15px;text-align: center"
> >
</el-pagination> </el-pagination>
</div> </div>
</template> </template>
<script> <script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getAmmeterData} from '@/api/ems/dzjk' import {getAmmeterRevenueData} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems"; import {formatDate} from "@/filters/ems";
export default { export default {
name:'DzjkTjbbSybb', name: 'DzjkTjbbSybb',
mixins: [getQuerySiteId], mixins: [getQuerySiteId],
data() { data() {
return { return {
loading:false, loading: false,
pickerOptions:{ pickerOptions: {
disabledDate(time) { disabledDate(time) {
return time.getTime() > Date.now(); return time.getTime() > Date.now();
}, },
}, },
defaultDateRange:[],//默认展示的时间 defaultDateRange: [],//默认展示的时间
dateRange:[], dateRange: [],
tableData:[], tableData: [],
pageSize:10,//分页栏当前每个数据总数 pageSize: 10,//分页栏当前每个数据总数
pageNum:1,//分页栏当前页数 pageNum: 1,//分页栏当前页数
totalSize:0,//table表格数据总数 totalSize: 0,//table表格数据总数
} }
}, },
methods:{ methods: {
// 搜索 // 搜索
onSearch(){ onSearch() {
this.pageNum =1//每次搜索从1开始搜索 this.pageNum = 1//每次搜索从1开始搜索
this.getData() this.getData()
}, },
// 重置 // 重置
onReset(){ onReset() {
this.dateRange=this.defaultDateRange this.dateRange = this.defaultDateRange
this.pageNum =1//每次搜索从1开始搜索 this.pageNum = 1//每次搜索从1开始搜索
this.getData() this.getData()
}, },
// 分页 // 分页
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize = val; this.pageSize = val;
this.$nextTick(()=>{ this.$nextTick(() => {
this.getData() this.getData()
}) })
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.pageNum = val this.pageNum = val
this.$nextTick(()=>{ this.$nextTick(() => {
this.getData() this.getData()
}) })
}, },
// 获取数据 // 获取数据
getData(){ getData() {
this.loading=true this.loading = true
const {siteId,pageNum,pageSize} =this const {siteId, pageNum, pageSize} = this
const [startTime='',endTime='']=(this.dateRange || []) const [startTime = '', endTime = ''] = (this.dateRange || [])
getAmmeterData({siteId:siteId,startTime,endTime,pageSize,pageNum}).then(response=>{ //http://localhost:8089/ems/statsReport/getAmmeterRevenueData?siteId=021_DDS_01&startTime=2025-10-14&endTime=2025-10-15&pageSize=10&pageNum=1
this.tableData=response?.rows || []; getAmmeterRevenueData({siteId: siteId, startTime, endTime, pageSize, pageNum}).then(response => {
this.tableData = response?.rows || [];
this.totalSize = response?.total || 0 this.totalSize = response?.total || 0
}).finally(()=> { }).finally(() => {
this.loading = false this.loading = false
}) })
}, },
init(){ init() {
this.dateRange=[] this.dateRange = []
this.tableData=[] this.tableData = []
this.totalSize=0 this.totalSize = 0
this.pageSize=10 this.pageSize = 10
this.pageNum = 1 this.pageNum = 1
const now = new Date().getTime(); const now = new Date().getTime();
const lastMonth = new Date(now-30 * 24 * 60 * 60 * 1000).getTime(); const lastMonth = new Date(now - 30 * 24 * 60 * 60 * 1000).getTime();
this.defaultDateRange = [formatDate(lastMonth), formatDate(now)]; this.defaultDateRange = [formatDate(lastMonth), formatDate(now)];
this.dateRange=[formatDate(lastMonth), formatDate(now)]; this.dateRange = [formatDate(lastMonth), formatDate(now)];
this.getData() this.getData()
}, },
}, },
@ -195,8 +196,8 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep{ ::v-deep {
.common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th{ .common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th {
border-bottom: 1px solid #dfe6ec; border-bottom: 1px solid #dfe6ec;
} }
} }

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

@ -1,68 +1,68 @@
<template> <template>
<div <div
v-loading="loading" v-loading="loading"
class="ems-dashboard-editor-container" class="ems-dashboard-editor-container"
style="background-color: #ffffff" style="background-color: #ffffff"
> >
<el-form ref="form" :model="form" label-position="top"> <el-form ref="form" :model="form" label-position="top">
<el-form-item <el-form-item
label="站点" label="站点"
prop="siteIds" prop="siteIds"
:rules="[{ required: true, message: '请选择站点' }]" :rules="[{ required: true, message: '请选择站点' }]"
> >
<el-radio-group v-model="form.siteIds" @input="changeSiteIds"> <el-radio-group v-model="form.siteIds" @input="changeSiteIds">
<el-radio <el-radio
v-for="(item, index) in siteList" v-for="(item, index) in siteList"
:key="index + 'zdListSearch'" :key="index + 'zdListSearch'"
:label="item.siteId" :label="item.siteId"
> >
{{ item.siteName }} {{ item.siteName }}
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="设备" label="设备"
prop="deviceCategory" prop="deviceCategory"
:rules="[{ required: true, message: '请选择设备' }]" :rules="[{ required: true, message: '请选择设备' }]"
> >
<el-radio-group v-model="form.deviceCategory" @input="changeSiteIds"> <el-radio-group v-model="form.deviceCategory" @input="changeSiteIds">
<el-radio <el-radio
v-for="(item, index) in deviceCategoryList" v-for="(item, index) in deviceCategoryList"
:key="index + 'sbListSearch'" :key="index + 'sbListSearch'"
:label="item.code" :label="item.code"
> >
{{ item.name }} {{ item.name }}
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="isDtdc" v-if="isDtdc"
label="单体电池(不超过5个)" label="单体电池(不超过5个)"
prop="child" prop="child"
:rules="[{ required: true, message: '请选择单体电池' }]" :rules="[{ required: true, message: '请选择单体电池' }]"
> >
<el-cascader <el-cascader
v-model="form.child" v-model="form.child"
style="width: 400px" style="width: 400px"
:props="{ multiple: true }" :props="{ multiple: true }"
:show-all-levels="false" :show-all-levels="false"
:options="childOptions" :options="childOptions"
@change="handleChildChange" @change="handleChildChange"
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<div style="display: flex"> <div style="display: flex">
<el-form-item <el-form-item
label="点位" label="点位"
prop="pointName" prop="pointName"
:rules="[{ required: true, message: '请输入点位' }]" :rules="[{ required: true, message: '请输入点位' }]"
style="margin-right: 50px" style="margin-right: 50px"
> >
<el-autocomplete <el-autocomplete
v-model="form.pointName" v-model="form.pointName"
placeholder="请输入点位" placeholder="请输入点位"
clearable clearable
:fetch-suggestions="querySearchAsync" :fetch-suggestions="querySearchAsync"
@select="handleSelect" @select="handleSelect"
></el-autocomplete> ></el-autocomplete>
</el-form-item> </el-form-item>
</div> </div>
@ -71,8 +71,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-card <el-card
shadow="always" shadow="always"
class="common-card-container common-card-container-body-no-padding time-range-card" class="common-card-container common-card-container-body-no-padding time-range-card"
> >
<div slot="header" class="time-range-header"> <div slot="header" class="time-range-header">
<span class="card-title"> <span class="card-title">
@ -83,10 +83,10 @@
</el-radio-group> </el-radio-group>
</span> </span>
<date-time-select <date-time-select
ref="dateTimeSelect" ref="dateTimeSelect"
:data-unit="form.dataUnit" :data-unit="form.dataUnit"
@initDate="(e) => (form.dataRange = e || [])" @initDate="(e) => (form.dataRange = e || [])"
@updateDate="updateDate" @updateDate="updateDate"
/> />
</div> </div>
<div style="height: 350px" id="searchChart"></div> <div style="height: 350px" id="searchChart"></div>
@ -97,18 +97,14 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import resize from "@/mixins/ems/resize"; import resize from "@/mixins/ems/resize";
import { getAllSites } from "@/api/ems/zddt"; import {getAllSites} from "@/api/ems/zddt";
import { import {getAllBatteryIdsBySites, getAllDeviceCategory, getPointValueList, pointFuzzyQuery,} from "@/api/ems/search";
getAllDeviceCategory,
getPointValueList,
pointFuzzyQuery,
getAllBatteryIdsBySites,
} from "@/api/ems/search";
import DateTimeSelect from "./DateTimeSelect.vue"; import DateTimeSelect from "./DateTimeSelect.vue";
export default { export default {
name: "Search", name: "Search",
mixins: [resize], mixins: [resize],
components: { DateTimeSelect }, components: {DateTimeSelect},
computed: { computed: {
isDtdc() { isDtdc() {
return this.form.deviceCategory === "BATTERY"; return this.form.deviceCategory === "BATTERY";
@ -161,7 +157,7 @@ export default {
getChildList() { getChildList() {
this.childOptions = []; this.childOptions = [];
this.form.child = []; this.form.child = [];
const { siteIds } = this.form; const {siteIds} = this.form;
getAllBatteryIdsBySites([siteIds]).then((response) => { getAllBatteryIdsBySites([siteIds]).then((response) => {
const data = response?.data || {}; const data = response?.data || {};
const base = 50; const base = 50;
@ -178,7 +174,7 @@ export default {
if (num === 0) return; if (num === 0) return;
for (let i = 1; i <= num; i++) { for (let i = 1; i <= num; i++) {
const start = (i - 1) * base + 1, const start = (i - 1) * base + 1,
end = i * base; end = i * base;
options[index].children.push({ options[index].children.push({
value: i, value: i,
label: `${start}-${end}`, label: `${start}-${end}`,
@ -214,76 +210,88 @@ export default {
this.getDate(); this.getDate();
}, },
setOption(data) { setOption(data) {
// 点位类型 dataType 1-瞬时值 2-累计值 仅当值为2展示差值
// 图表类型 chartType 1-曲线图，2-箱线图
if (!this.chart) return; if (!this.chart) return;
this.chart.clear(); this.chart.clear();
console.log("返回的数据", data); console.log("返回的数据", data);
let dataset = []; if (!data || data.length <= 0) {
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",
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);
});
});
});
} else {
this.$message.warning("暂无数据"); this.$message.warning("暂无数据");
} }
console.log("图表数据", dataset); console.log('展示的图表类型chartType', data[0].chartType)
if (data[0].chartType === 2) {
// 箱型图
this.setBoxOption(data)
} else {
//折线图
this.setLineOption(data)
}
},
setLineOption(data) {
let dataset = [];
data.forEach((item, index) => {
item.deviceList.forEach((inner) => {
dataset.push({
name: `${
this.isDtdc
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
: ""
}${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);
this.chart.setOption({ this.chart.setOption({
legend: { legend: {
// left: 'center', // left: 'center',
@ -305,7 +313,120 @@ export default {
textStyle: { textStyle: {
color: "#333333", color: "#333333",
}, },
xAxis: { type: "category", data: dataset?.[0]?.xdata || [] }, 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}`,
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
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: 'cross',
// },
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
// },
},
textStyle: {
color: "#333333",
},
xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
yAxis: { yAxis: {
type: "value", type: "value",
}, },
@ -345,9 +466,9 @@ export default {
}).then((response) => { }).then((response) => {
const data = response?.data || []; const data = response?.data || [];
cb( cb(
data.map((item) => { data.map((item) => {
return { name: item, value: item }; return {name: item, value: item};
}) })
); );
}); });
}, },
@ -359,10 +480,11 @@ export default {
}, },
getZdList() { getZdList() {
return getAllSites() return getAllSites()
.then((response) => { .then((response) => {
this.siteList = response.data || []; this.siteList = response.data || [];
}) })
.finally(() => {}); .finally(() => {
});
}, },
getDate() { getDate() {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
@ -371,8 +493,8 @@ export default {
return this.$message.error("请输入正确的点位"); return this.$message.error("请输入正确的点位");
} }
if ( if (
this.isDtdc && this.isDtdc &&
(this.form.child.length === 0 || this.form.child.length > 5) (this.form.child.length === 0 || this.form.child.length > 5)
) { ) {
return this.$message.error("请选择单体电池且不能超过5个"); return this.$message.error("请选择单体电池且不能超过5个");
} }
@ -417,12 +539,12 @@ export default {
endDate, endDate,
siteDeviceMap, siteDeviceMap,
}) })
.then((response) => { .then((response) => {
this.setOption(response?.data || []); this.setOption(response?.data || []);
}) })
.finally(() => { .finally(() => {
this.loading = false; this.loading = false;
}); });
} }
}); });
}, },
@ -440,7 +562,7 @@ export default {
this.initChart(); this.initChart();
this.$refs.dateTimeSelect.init(); this.$refs.dateTimeSelect.init();
Promise.all([this.getDeviceCategory(), this.getZdList()]).finally( Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(
() => (this.loading = false) () => (this.loading = false)
); );
}); });
}, },