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

Merge branch 'develop' into single-develop

Browse Source
This commit is contained in:
白菜
2025-09-17 14:57:30 +08:00
parent 3d5d8918d7 36b1e19120
commit 25bb28f77a
31 changed files with 1527 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,9 +93,9 @@ export function getAmmeterDataList(siteId) {
}
// 故障告警
export function getAlarmDetailList({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}&deviceId=${deviceId}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
url: `/ems/siteAlarm/getAlarmDetailList?siteId=${siteId}&status=${status}&deviceId=${deviceId}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
method: 'get'
})
}
@ -116,16 +116,16 @@ export function getPcsNameList(siteId) {
})
}
//pcs曲线
export function getPCSData({siteId,deviceId,startTime,endTime,dataType}) {
export function getPCSData({siteId,startTime,endTime,dataType}) {
return request({
url: `/ems/statsReport/getPCSData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
url: `/ems/statsReport/getPCSData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
method: 'get'
})
}
//电池堆曲线
export function getStackData({siteId,deviceId,startTime,endTime,dataType}) {
export function getStackData({siteId,startTime,endTime,dataType}) {
return request({
url: `/ems/statsReport/getStackData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
url: `/ems/statsReport/getStackData?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
method: 'get'
})
}
@ -168,9 +168,9 @@ export function batteryAveTemp(siteId) {
})
}
// 功率曲线
export function getPowerData({siteId,deviceId,startDate,endDate,dataType}) {
export function getPowerData({siteId,startDate,endDate}) {
return request({
url: `/ems/statsReport/getPowerData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&dataType=${dataType}`,
url: `/ems/statsReport/getPowerData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
method: 'get'
})
}
@ -291,3 +291,11 @@ export function curveList({siteId,strategyId}) {
method: 'get',
})
}
//单站监控 首页 当日功率曲线
export function getPointData({siteId,startDate,endDate}) {
return request({
url: `/ems/siteMonitor/getPointData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
method: 'get',
})
}

32
src/api/ems/search.js Normal file
View File

@ -0,0 +1,32 @@
import request from '@/utils/request'
// 获取设备列表
export function getAllDeviceCategory() {
return request({
url: '/ems/generalQuery/getAllDeviceCategory',
method: 'get'
})
}
// 点位列表
export function pointFuzzyQuery(data) {
return request({
url: '/ems/generalQuery/pointFuzzyQuery',
method: 'post',
data
})
}
// 图表
export function getPointValueList(data) {
return request({
url: '/ems/generalQuery/getPointValueList',
method: 'post',
data
})
}
// 图表
export function getAllBatteryIdsBySites(data) {
return request({
url: `/ems/generalQuery/getAllBatteryIdsBySites/${data}`,
method: 'get',
})
}

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

@ -62,3 +62,11 @@ export function getDeviceList(siteId) {
method: 'get',
})
}
//获取设备点位table
export function getDevicePointList({siteId,deviceCategory,pageNum,pageSize}) {
return request({
url: `/ems/siteConfig/getDevicePointList?siteId=${siteId}&pageNum=${pageNum}&pageSize=${pageSize}&deviceCategory=${deviceCategory}`,
method: 'get',
})
}

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

@ -26,18 +26,15 @@
border-bottom: none;
font-size: 12px;
background: #F1F5FB ;
position: relative;
.card-title{
font-weight: 500;
color:#333333;
}
.large-title{
font-size: 20px;
font-weight: 500;
line-height: 40px;
}
.el-button--text{
color: #666666;
}
}
}
.common-card-container-body-no-padding{
@ -50,6 +47,80 @@
background-color: transparent;
}
}
//单站监控 设备监控card公共样式
.sbjk-card-container{
.el-card__header {
background-color: transparent;
padding: 10px 14px;
color: #ffffff;
position: relative;
border-radius: 5px 5px 0 0;
.large-title{
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;
color: #ffffff;
font-size: 12px;
line-height: 20px;
}
.el-button--text{
color: #666666;
}
.alarm{
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
}
}
//红色背景颜色标题
&.warning-card-container{
.el-card__header {
background-color: #fc6b69;
}
}
//绿色背景颜色标题
&.running-card-container {
.el-card__header {
background-color: #05aea3;
}
}
//灰色背景颜色标题
&.timing-card-container {
.el-card__header {
background-color: #666666;
}
}
}
/* card标题里的时间选择器 */
.time-range-card {
&.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;
}
}
}
}
//描述样式 PCS、BMS总览、BMS电池簇页面公共样式
.descriptions-main{
padding:24px;

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

@ -38,9 +38,9 @@ export default {
}
},
methods: {
init(){
init(today=false){
const now = new Date(),formatNow = formatDate(now);
const weekAgo = formatDate(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000))
const weekAgo = formatDate(today ? new Date(now.getTime()) : new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000))
this.dateRange = [weekAgo, formatNow];
this.defaultDateRange=[weekAgo, formatNow];
this.$emit('updateDate',this.dateRange)

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

@ -3,13 +3,13 @@
<div class="zd-select-container">
<el-form :inline="true">
<el-form-item label="站点选择">
<el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
<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>
<el-form-item>
<el-button type="primary" :loading="searchLoading" @click="onSubmit">搜索</el-button>
</el-form-item>
<!-- <el-form-item>-->
<!-- <el-button type="primary" :loading="searchLoading" @click="onSubmit">搜索</el-button>-->
<!-- </el-form-item>-->
</el-form>
</div>
</template>

24
src/mixins/ems/intervalUpdate.js Normal file
View File

@ -0,0 +1,24 @@
// 定时刷新
const intervalUpdate= {
data: function () {
return {
intervalUpdateTimer:null
}
},
beforeDestroy() {
console.log('销毁之前 清空定时器')
if( this.intervalUpdateTimer) {
window.clearInterval(this.intervalUpdateTimer)
this.intervalUpdateTimer = null
}
},
methods:{
updateInterval: function (cn,time=60000) {
window.clearInterval(this.intervalUpdateTimer)
this.intervalUpdateTimer = null
this.intervalUpdateTimer = window.setInterval(cn,time)
}
}
}
export default intervalUpdate

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

@ -15,6 +15,7 @@ const ems = {
ticketStatusOptions:{0:'待处理', 1:'已处理', 2:'处理中'},//工单处理状态
strategyStatusOptions:{'0':'未启用', '1':'已运行', '2':'已暂停', '3':'禁用', '4':'删除'},//策略状态
chargeStatusOptions:{'1':'充电','2':'待机'},//冲放状态
deviceCategoryOptions:{'PCS':'PCS','STACK':'电池堆','CLUSTER':'电池簇','COOLING':'液冷','BATTERY':'单体电池','AMMETER':'电表'},//设备类别
},
mutations: {
SET_ZD_LIST(state, list) {

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

@ -124,7 +124,7 @@ export default {
return {
loading:false,
btnList:[
{name:'今日告警',id:'today'},
{name:'未处理告警',id:'today'},
{name:'历史告警',id:'history'},
],
deviceOptions:[],//设备列表
@ -173,17 +173,6 @@ export default {
onSearch(){
this.pageNum =1//每次搜索从1开始搜索
const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
// 选中了时间范围
if(alarmStartTime && alarmStartTime){
// 如果选择的时间范围是今天
if(this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
this.activeBtn = 'today'
}else {
this.activeBtn = 'history'
}
}else{
//没有选择时间范围 还是按照选中的今日告警、历史告警查询
}
this.getData()
},
// 重置
@ -198,17 +187,6 @@ export default {
if(id !== this.activeBtn){
console.log('点击了不同的菜单，更新数据')
this.activeBtn=id;
const [alarmStartTime,alarmEndTime]=(this.dateRange || [])
// 切换到今日告警，如果已经选择了时间范围清空
if(alarmStartTime && alarmEndTime){
// 如果切换到了今日告警，时间范围不相等或者相等但是不是今天 清空时间选择范围
if(id === 'today' && !this.isSameDay(alarmStartTime,alarmEndTime) || (this.isSameDay(alarmStartTime,alarmEndTime) && !this.isSameDay(alarmStartTime,new Date()))){
this.dateRange = []
}else if(id === 'history' && this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
// 切换成历史告警，但是选择时间范围是当天，清空时间范围
this.dateRange = []
}
}
this.getData()
}
},
@ -218,21 +196,8 @@ export default {
const {deviceId,alarmLevel} = this.search
const {siteId,pageNum,pageSize,activeBtn} =this
const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
let start='',end = '',now =new Date()
if(activeBtn === 'today'){
start = end = now
}else{
if(alarmStartTime && alarmEndTime){
start = alarmStartTime
end = alarmEndTime
}else{
start=''
end = ''
// now
// end.setDate(end.getDate() - 1);
}
}
getAlarmDetailList({deviceId,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(start),alarmEndTime:formatDate(end)}).then(response => {
let status = activeBtn === 'today' ? '0' : '1,2'
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})

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

@ -13,7 +13,7 @@
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
import {getPcsNameList, getPowerData} from '@/api/ems/dzjk'
import { getPointData } from '@/api/ems/dzjk'
export default {
mixins: [resize],
@ -23,7 +23,7 @@ export default {
chart: null,
timeRange:[],
siteId:'',
deviceId:''
isInit:true
}
},
mounted() {
@ -42,33 +42,23 @@ export default {
// 更新时间范围 重置图表
updateDate(data){
this.timeRange=data
this.getGVQXData()
!this.isInit && this.getGVQXData()
this.isInit = false
},
getGVQXData(){
this.showLoading()
const {siteId,deviceId,timeRange}=this
if(!deviceId) return this.hideLoading()
getPowerData({siteId,deviceId,startDate:timeRange[0],endDate:timeRange[1],dataType:'1'}).then(response => {
const {siteId,timeRange}=this
getPointData({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>this.hideLoading())
},
init(siteId){
//初始化 清空数据
this.siteId = siteId
this.isInit = true
this.timeRange=[]
this.deviceId=''
this.$refs.dateRangeSelect.init()
this.showLoading()
getPcsNameList(siteId).then(response=>{
const data=response?.data || [];
if(data.length>0){
this.deviceId=data[0].id
//接口调用完成之后 设置图表、结束loading
this.$refs.dateRangeSelect.init(true)
this.getGVQXData()
}else{
this.hideLoading()
}
})
},
initChart() {
this.chart = echarts.init(document.querySelector('#activeChart'))
@ -80,12 +70,12 @@ export default {
this.chart && this.chart.hideLoading()
},
setOption(data) {
const source = [['日期','电网功率']]
const source = [['日期','电网功率','负载功率','储能功率','光伏功率','soc平均值','soh平均值','电池平均温度平均值']]
console.log('source.slice(1)',source[0].slice(1))
this.chart && data.forEach((item)=>{
source.push([item.statisDate,item.gridPower])
source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower,item.avgSoc,item.avgSoh,item.avgTemp])
})
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
grid: {
containLabel: true
},
@ -105,16 +95,21 @@ export default {
xAxis: {
type: 'category',
},
yAxis: {
yAxis: [
{
type: 'value',
},
dataset:{source},
series: [
{
name:'电网功率',
type: 'value',
},
],
dataset:{source},
series: source[0].slice(1).map((item,index)=>{
return {
type: 'line',
yAxisIndex:index<=4 ? 0 : 1
}
]
})
})
},

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

@ -72,7 +72,7 @@ export default {
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
})
this.chart && this.chart.setOption({
color:['#FFBD00','#3C81FF','#05AEA3'],
color:['#4472c4','#70ad47'],//所有充放电颜色保持统一
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
@ -107,11 +107,11 @@ export default {
series: [
{
yAxisIndex:0,
type: 'line',
type: 'bar',
},
{
yAxisIndex:0,
type: 'line',
type: 'bar',
},
]
})

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

@ -13,7 +13,7 @@
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header">
<span class="card-title">静态信息</span>
<span class="card-title">站点信息</span>
</div>
<div
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
@ -105,11 +105,11 @@ export default {
],
sjglData: [
{
title: "今日充电量（MWh）",
title: "今日充电量（kWh）",
attr: "dayChargedCap",
},
{
title: "今日放电量（MWh）",
title: "今日放电量（kWh）",
attr: "dayDisChargedCap",
},
{
@ -202,20 +202,4 @@ export default {
}
}
}
/* card标题里的时间选择器 */
.time-range-card {
&.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;
}
}
}
}
</style>

221
src/views/ems/dzjk/sbjk/PointChart.vue Normal file
View File

@ -0,0 +1,221 @@
<!--电位展示图表-->
<template>
<el-dialog
:visible.sync="show"
:title="pointName"
:close-on-click-modal="false"
show-close
destroy-on-close
lock-scroll
append-to-body
width="1000px"
class="ems-dialog"
: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"/>
</div>
<div style="height: 350px" id="searchChart"></div>
</el-card>
</el-dialog>
</template>
<script>
import * as echarts from "echarts";
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],
props: {
siteId:{
type: String,
required: true,
}
},
computed: {
isDtdc(){
return this.categoryName === '单体电池'
},
},
watch:{
show(val) {
if(!val){
this.pointName=''
this.categoryName=''
this.deviceId=''
this.dataUnit=1
if (!this.chart) {
return
}
this.hideLoading()
this.chart.dispose()
this.chart = null
}
},
dataUnit:{
handler(newVal,oldVal){
console.log('wacth到了dataUnit的变化',newVal,oldVal)
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init()
this.getDate()
})
},
}
},
data(){
return{
show:false,
chart:null,
dataUnit:1,
dataRange:[],
child:[],//单体电池需要数据 暂不删除
pointName:'',
categoryName:'',
deviceId:''
}
},
methods:{
showChart({pointName,categoryName,deviceId}){
//初始化数据
this.pointName=pointName
this.categoryName=categoryName
this.deviceId=deviceId
this.show = true
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init()
this.initChart()
this.getDate()
})
},
initChart() {
this.chart = echarts.init(document.querySelector('#searchChart'))
},
showLoading(){
this.chart && this.chart.showLoading()
},
hideLoading(){
this.chart && this.chart.hideLoading()
},
getDate(){
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'
}else{
startDate=start
}
if(end && dataUnit===3){
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
endDate = end + ' 00:00:00'
}else{
endDate=end
}
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()
})
},
setOption(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.$message.warning('暂无数据')
}
console.log('图表数据',dataset)
this.chart.setOption({
legend: {
// left: 'center',
// top: '10',
},
grid: {
containLabel: true
},
tooltip: {
trigger: 'axis',
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){
this.dataRange =val || []
this.getDate()
},
handleColsed(done) {
if (!this.chart) {
return done();
}
this.chart.dispose();
this.chart = null;
done();
},
}
}
</script>
<style scoped lang="scss">
::v-deep {
.card-title .el-radio{
line-height: 40px;
}
}
</style>

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

@ -2,9 +2,13 @@
<template>
<div v-loading="loading">
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
<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">{{index+1}}#{{baseInfo.deviceName}}</span>
<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">
@ -15,14 +19,18 @@
</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">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
<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>
<!-- 进度-->
<div class="process-container">
<div class="process-line-bg">
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
</div>
<div class="process">当前SOC : {{baseInfo.currentSoc}}%</div>
<div class="process pointer" @click="showChart( '当前SOC','电池簇',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div>
</div>
</div>
<el-table
@ -41,10 +49,16 @@
prop="avgData"
label="单体平均值"
>
<template slot-scope="scope">
<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" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.minData}}</span>
</template>
</el-table-column>
<el-table-column
prop="minDataID"
@ -53,6 +67,9 @@
<el-table-column
prop="maxData"
label="单体最大值">
<template slot-scope="scope">
<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
prop="maxDataID"
@ -62,17 +79,20 @@
</el-card>
</div>
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import pointChart from "./../PointChart.vue";
import {getBMSBatteryCluster} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkBmsdcc',
mixins:[getQuerySiteId],
components:{},
mixins:[getQuerySiteId,intervalUpdate],
components:{pointChart},
data() {
return {
loading:false,
@ -81,27 +101,45 @@ export default {
'温度':'&#8451;',
'SOC':'%'
},
tablePointNameMap:{
'电压单体最小值':'最低单体电压',
'电压单体平均值':'电压平均值',
'电压单体最大值':'最高单体电压',
'温度单体最小值':'最低单体温度',
'温度单体平均值':'温度平均值',
'温度单体最大值':'最高单体温度',
'SOC单体最小值':'最低单体SOC',
'SOC单体平均值':'当前SOC',
'SOC单体最大值':'最高单体SOC',
},
baseInfoList:[],
infoData:[
{label:'簇电压',attr:'clusterVoltage',unit:'V'},
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
{label:'簇电流',attr:'clusterCurrent',unit:'A'},
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
{label:'SOH',attr:'soh',unit:'%'},
{label:'平均温度',attr:'averageTemperature',unit:'&#8451;'},
{label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;'},
{label:'簇电压',attr:'clusterVoltage',unit:'V',pointName:'簇电压'},
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh',pointName:'可充电量'},
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh',pointName:'累计充电量'},
{label:'簇电流',attr:'clusterCurrent',unit:'A',pointName:'簇电流'},
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh',pointName:'可放电量'},
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh',pointName:'累计放电量'},
{label:'SOH',attr:'soh',unit:'%',pointName:'SOH'},
{label:'平均温度',attr:'averageTemperature',unit:'&#8451;',pointName:'平均温度'},
{label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;',pointName:'绝缘电阻'},
],
}
},
methods:{
init(){
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,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)
}
}
}

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

@ -2,145 +2,165 @@
<template>
<div v-loading="loading">
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
<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">{{index+1}}#{{baseInfo.deviceName}}</span>
</div>
<div class="descriptions-main">
<el-descriptions direction="vertical" :column="3" :colon="false">
<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 :colon="false" :column="3" direction="vertical">
<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 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">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
<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="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>
<!-- 进度-->
<div class="process-container">
<div class="process-line-bg">
<div class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
<div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
</div>
<div class="process">当前SOC : {{baseInfo.stackSoc}}%</div>
<div class="process pointer" @click="showChart('当前SOC','电池堆',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
</div>
</div>
<el-table
class="common-table"
:data="baseInfo.batteryDataList"
stripe
class="common-table"
max-height="500"
stripe
style="width: 100%;margin-top:25px;">
<el-table-column
prop="clusterId"
label="簇号">
label="簇号"
prop="clusterId">
</el-table-column>
<el-table-column
label="簇电压"
>
<template slot-scope="scope">
<span>{{scope.row.clusterVoltage}} V</span>
<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>{{scope.row.clusterCurrent}} A</span>
<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>{{scope.row.currentSoc}} %</span>
<span class="pointer" @click="showChart('当前SOC','电池簇',scope.row.clusterId)">{{scope.row.currentSoc}} %</span>
</template>
</el-table-column>
<el-table-column
prop="maxVoltage"
label="单体最高电压">
label="单体最高电压"
prop="maxVoltage">
<template slot-scope="scope">
<span>{{scope.row.maxCellVoltage}} V</span>
<span class="pointer" @click="showChart('最高单体电压','电池簇',scope.row.clusterId)">{{scope.row.maxCellVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
prop="maxCellVoltageId"
label="电池号码">
label="电池号码"
prop="maxCellVoltageId">
</el-table-column>
<el-table-column
prop="minVoltage"
label="单体最低电压">
label="单体最低电压"
prop="minVoltage">
<template slot-scope="scope">
<span>{{scope.row.minCellVoltage}} V</span>
<span class="pointer" @click="showChart('最低单体电压','电池簇',scope.row.clusterId)">{{scope.row.minCellVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
prop="minCellVoltageId"
label="电池号码">
label="电池号码"
prop="minCellVoltageId">
</el-table-column>
<el-table-column
label="单体最高温度">
<template slot-scope="scope">
<span>{{scope.row.maxCellTemp}} &#8451;</span>
<span class="pointer" @click="showChart('最高单体温度','电池簇',scope.row.clusterId)">{{scope.row.maxCellTemp}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
prop="maxCellTempId"
label="电池号码">
label="电池号码"
prop="maxCellTempId">
</el-table-column>
<el-table-column
prop="minTemperature"
label="单体最低温度">
label="单体最低温度"
prop="minTemperature">
<template slot-scope="scope">
<span>{{scope.row.minCellTemp}} &#8451;</span>
<span class="pointer" @click="showChart('最低单体温度','电池簇',scope.row.clusterId)">{{scope.row.minCellTemp}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
prop="minCellTempId"
label="电池号码">
label="电池号码"
prop="minCellTempId">
</el-table-column>
</el-table>
</el-card>
</div>
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import {getBMSOverView} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue";
export default {
name:'DzjkSbjkBmszl',
mixins:[getQuerySiteId],
components: {pointChart,},
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
loading:false,
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:{
init(){
this.loading=true;
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
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)
}
}
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
::v-deep {
//描述列表样式
.descriptions-main {

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

@ -2,16 +2,15 @@
<div v-loading="loading">
<el-card
shadow="always"
class="common-card-container"
:class="
zbInfo.emsCommunicationStatus !== '0'
? 'zb-common-card-container'
: 'cnb-common-card-container'
"
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">1#{{ zbInfo.deviceName }}</span>
<div class="status">
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
@ -25,6 +24,7 @@
<el-table
class="common-table"
:data="zbInfo.loadDataDetailInfo"
@cell-click="(row,col)=>{handlerCell(zbInfo.deviceId,row,col)}"
stripe
style="width: 100%"
>
@ -38,17 +38,16 @@
</el-card>
<el-card
shadow="always"
class="common-card-container"
class="sbjk-card-container"
style="margin-top: 20px"
:class="
cnbInfo.emsCommunicationStatus !== '0'
? 'zb-common-card-container'
: 'cnb-common-card-container'
"
:class="{
'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
'running-card-container':zbInfo.emsCommunicationStatus === '0'
}"
>
<div slot="header">
<span class="large-title">2#{{ cnbInfo.deviceName }}</span>
<div class="status">
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
@ -62,6 +61,7 @@
<el-table
class="common-table"
:data="cnbInfo.meteDataDetailInfo"
@cell-click="(row,col)=>{handlerCellCN(cnbInfo.deviceId,row,col)}"
stripe
style="width: 100%"
>
@ -71,15 +71,19 @@
</el-table-column>
</el-table>
</el-card>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import pointChart from "./../PointChart.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getAmmeterDataList } from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name: "DzjkSbjkDb",
mixins: [getQuerySiteId],
mixins: [getQuerySiteId,intervalUpdate],
components:{pointChart},
data() {
return {
loading: false,
@ -88,7 +92,25 @@ export default {
};
},
methods: {
init() {
handlerCell(id,row,column){
if(column.label !== '类别'){
const arr = row.category.split('')
arr.splice(6,0,column.label[0])
this.showChart(arr.join(''),'电表',id)
}
},
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)
}
},
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
updateData(){
this.loading = true;
getAmmeterDataList(this.siteId)
.then((response) => {
@ -103,38 +125,26 @@ export default {
this.loading = false;
});
},
init() {
this.updateData()
this.updateInterval(this.updateData)
},
},
mounted() {},
};
</script>
<style scoped lang="scss">
.zb-common-card-container,
.cnb-common-card-container {
.common-card-container {
::v-deep {
.el-card__header {
padding: 10px 14px;
background-color: #fc6b69;
color: #ffffff;
position: relative;
.el-table__row td{
&:not(:first-child){
.cell{
cursor: pointer;
}
}
}
.cnb-common-card-container {
margin-top: 25px;
::v-deep {
.el-card__header {
background-color: #05aea3;
}
}
}
.status {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: #ffffff;
font-size: 12px;
line-height: 20px;
}
</style>

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

@ -2,7 +2,7 @@
<el-card
v-loading="loading"
shadow="always"
class="common-card-container common-card-container-no-title-bg"
class="sbjk-card-container common-card-container-no-title-bg running-card-container"
>
<div slot="header">
<span class="large-title">单体电池实时数据</span>

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

@ -1,141 +1,112 @@
<template>
<div class="pcs-ems-dashboard-editor-container" v-loading="loading">
<div v-loading="loading" class="pcs-ems-dashboard-editor-container">
<!-- 顶部六个方块-->
<real-time-base-info :data="runningHeadData"/>
<!-- 内容-->
<el-container class="pcs-container" v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'">
<!-- 背景颜色根据工作状态来展示-->
<el-header class="pcs-header" :class="pcsItem.workStatus === '1' ? 'warn' : pcsItem.workStatus === '2' ? 'close' : ''">
<div class="pcs-title">{{pcsItem.deviceName}}</div>
<div class="pcs-status">
<div>{{$store.state.ems.communicationStatusOptions[pcsItem.communicationStatus]}}</div>
<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">{{pcsIndex+1}}#{{pcsItem.deviceName}}</span>
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
pcsItem.communicationStatus
]
}}
</div>
<div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
</div>
<div class="pcs-btns">
<div class="alarm">
<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>
</el-header>
<el-main style="padding: 0">
</div>
<div class="descriptions-main">
<el-descriptions direction="vertical" :column="4" :colon="false">
<el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="并网状态">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="控制模式">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
<el-descriptions :colon="false" :column="4" direction="vertical">
<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 labelClassName="descriptions-label" contentClassName="descriptions-direction" direction="vertical" :column="4" :colon="false">
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
<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 class="descriptions-main" v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'">
<el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction keep" direction="vertical" :column="4" :colon="false">
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="4" :label="'支路'+(index+1)">{{item.dischargeStatus}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流功率">{{item.dcPower}}kW</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电压">{{item.dcVoltage}}V</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电流">{{item.dcCurrent}}A</el-descriptions-item>
<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" @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" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
</el-descriptions-item>
</el-descriptions>
</div>
</el-main>
</el-container>
</el-card>
</div>
<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 pointChart from "./../PointChart.vue";
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkPcs',
components:{RealTimeBaseInfo},
mixins:[getQuerySiteId],
components:{RealTimeBaseInfo,pointChart},
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
loading:false,
runningHeadData:{},//运行信息
pcsList:[],
infoData:[
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW'},
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh'},
{label:'A相电压',attr:'aPhaseVoltage',unit:'V'},
{label:'A相电流',attr:'aPhaseCurrent',unit:'A'},
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar'},
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh'},
{label:'B相电压',attr:'bPhaseVoltage',unit:'V'},
{label:'B相电流',attr:'bPhaseCurrent',unit:'A'},
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA'},
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;'},
{label:'C相电压',attr:'cPhaseVoltage',unit:'V'},
{label:'C相电流',attr:'cPhaseCurrent',unit:'A'},
{label:'总交流功率因数',attr:'totalPowerFactor',unit:''},
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;'},
{label:'交流频率',attr:'acFrequency',unit:'Hz'}
{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:{
problemSaved(){
this.$confirm('确认故障已复位?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
setTimeout(() => {
done();
instance.confirmButtonLoading = false;
}, 3000);
} else {
done();
}
}
}).then(() => {
//只有在故障复位成功的情况下会走到这里
this.$message({
type: 'success',
message: '故障复位成功!'
});
}).catch(() => {
//取消复位
});
},
machineClosed(){
this.$confirm('确认要关机吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
setTimeout(() => {
done();
instance.confirmButtonLoading = false;
}, 3000);
} else {
done();
}
}
}).then(() => {
//只有在关机成功的情况下会走到这里
this.$message({
type: 'success',
message: '关机成功!'
});
}).catch(() => {
//取消关机
});
//todo 后续需要新增设备id
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
//6个方块数据
getRunningHeadData(){
@ -150,54 +121,18 @@ export default {
this.pcsList = JSON.parse(JSON.stringify(data))
}).finally(()=>this.loading = false)
},
init(){
updateData(){
this.getRunningHeadData()
this.getPcsList()
},
init(){
this.updateData()
this.updateInterval(this.updateData)
}
},
}
</script>
<style scoped lang="scss">
.pcs-container{
margin-top: 25px;
border:1px solid #eeeeee;
border-radius: 6px 6px 0 0;
//红色标题
.pcs-header{
background: #05AEA3;
display: flex;
position: relative;
justify-content: flex-start;
align-items: center;
padding: 0;
height: 60px;
border-radius: 6px 6px 0 0;
.pcs-title{
color: #ffffff;
font-size: 20px;
font-weight: 500;
line-height: 20px;
padding: 0 50px 0 25px;
}
.pcs-status{
color: #ffffff;
font-size: 12px;
line-height: 20px;
}
.pcs-btns{
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
}
}
.pcs-header.warn{
background-color:#FC6B69 ;
}
.pcs-header.close{
background-color:#666666 ;
}
}
<style lang="scss" scoped>
</style>

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

@ -34,11 +34,12 @@ import DcpjwdChart from './DcpjwdChart.vue'
import DcpjsocChart from './DcpjsocChart.vue'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getRunningHeadInfo} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkSsyx',
components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
mixins:[getQuerySiteId],
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
runningHeadData:{},//运行信息
@ -51,15 +52,18 @@ export default {
this.runningHeadData = response?.data || {}
})
},
init(){
this.getRunningHeadData()
this.$nextTick(()=>{
updateData(){
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.getRunningHeadData()
this.$nextTick(()=>{
this.updateData()
this.updateInterval(this.updateData)
})
}
}

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

@ -1,7 +1,7 @@
<template>
<div v-loading="loading">
<div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
<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>
@ -21,9 +21,10 @@
<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getCoolingDataList} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkYl',
mixins:[getQuerySiteId],
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
loading:false,
@ -40,11 +41,15 @@ export default {
}
},
methods:{
init(){
updateData(){
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)
}
},
mounted(){
@ -56,7 +61,6 @@ export default {
<style scoped lang="scss">
.yl-item-container{
border-radius: 5px;
background-color: #EBF6F6;
&:not(:last-child){
margin-bottom: 25px;
}
@ -73,11 +77,9 @@ export default {
width: 120px;
height: 40px;
font-size: 16px;
background-color: #05AEA3;
text-align: center;
}
.header-values{
color: #05AEA3;
font-weight: 500;
}
}
@ -113,5 +115,16 @@ export default {
}
}
}
.yl-normal-item-container{
background-color: #EBF6F6;
.header{
.header-title{
background-color: #05AEA3;
}
.header-values{
color: #05AEA3;
}
}
}
</style>

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

@ -3,11 +3,11 @@
<div v-loading="loading">
<div class="select-container">
<el-form :inline="true">
<el-form-item label="电池堆">
<el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="电池堆">-->
<!-- <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
<!-- <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
@ -62,14 +62,14 @@ export default {
defaultDateRange:[],//默认展示的时间
dateRange:[],
loading:false,
pcs:'',
pcsOptions: [],
// pcs:'',
// pcsOptions: [],
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']},
],
}
},
@ -90,41 +90,71 @@ export default {
this.dateRange=''
this.getData()
},
getPcsList(){
return getStackNameList(this.siteId).then(response => {
const data = JSON.parse(JSON.stringify(response?.data || []))
this.pcsOptions = data
this.pcs = data.length>0?data[0].id:'';
})
},
// getPcsList(){
// return getStackNameList(this.siteId).then(response => {
// const data = JSON.parse(JSON.stringify(response?.data || []))
// this.pcsOptions = data
// this.pcs = data.length>0?data[0].id:'';
// })
// },
getData(){
const {siteId,pcs,activeBtn}=this;
const {siteId,activeBtn}=this;
const [start='',end='']=(this.dateRange || [])
if(!pcs) return
//接口调用完成之后 设置图表、结束loading
this.loading=true;
getStackData({siteId,deviceId:pcs,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
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)
// 年2025-09/天2025-09-15/时2025-09-15/10:00
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
},
setOption(data) {
const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
const source = JSON.parse(JSON.stringify(ele.source))
const length = ele.attr.length
const series = []
const sourceBase = JSON.parse(JSON.stringify(ele.source))
// sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
const source=[]
const sourceTop = ['日期']
let map={},mapArr=[]
// 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
data.forEach((item)=>{
const arr = ele.attr.map(key=>item[key])
source.push([item.statisDate,...arr])
})
ele.attr.forEach((item)=>{
series.push({
name:length>1?item:ele.name,
type:ele.type || 'scatter'
item.dataList.forEach((inner)=>{
// 日期格式
// 年2025-09/天2025-09-15/时2025-09-15/10:00
// 所有数据的日期格式一致
if(!map[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))
sourceBase.forEach((outer,outerIndex)=>{
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)
console.log('map=',map)
console.log('mapArr=',mapArr)
console.log('========',source)
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
grid: {
containLabel: true
},
@ -148,7 +178,11 @@ export default {
type: 'value',
},
dataset: {source},
series
series:source[0].slice(1).map(item=>{
return {
type:ele.type || 'scatter'
}
})
},true)
},
initChart() {
@ -156,16 +190,10 @@ export default {
},
init(){
this.loading = true
this.pcs=''
this.pcsOptions=[]
// this.pcs=''
// this.pcsOptions=[]
this.initChart()
this.getPcsList().then(()=>{
if(this.pcs){
this.onReset()
}else{
this.loading = false
}
})
}
},
mounted(){

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

@ -3,16 +3,6 @@
<div v-loading="loading">
<div class="select-container">
<el-form :inline="true">
<!-- <el-form-item label="网点">-->
<!-- <el-select v-model="wd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
<!-- <el-option :label="item.name" :value="item.id" v-for="(item,index) in wdOptions" :key="index+'sblxOptions'"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="PCS">
<el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
@ -33,15 +23,6 @@
</el-form>
</div>
<div style="margin:30px 0;">
<!-- 二个选择按钮-->
<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+'flqxcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
</el-button-group>
</el-col>
</el-row>
<!--echart-->
<div id="glqxEchart" style="height:360px;"></div>
</div>
</div>
@ -67,26 +48,9 @@ export default {
defaultDateRange:[],//默认展示的时间
dateRange:[],
loading:false,
pcs:'',
pcsOptions: [],
activeBtn:'1',
btnList:[
{name:'电网功率',id:'1',attr:'gridPower'},
{name:'负载功率',id:'2',attr:'loadPower'},
{name:'储能功率',id:'3',attr:'storagePower'},
{name:'光伏功率',id:'4',attr:'pvPower'},
],
}
},
methods: {
changeDataType(id){
if(id !== this.activeBtn){
console.log('点击了不同的菜单，更新数据')
this.activeBtn=id;
this.getData()
}
},
// 搜索
onSearch(){
this.getData()
@ -96,31 +60,21 @@ export default {
this.dateRange=[]
this.getData()
},
getPcsList(){
return getPcsNameList(this.siteId).then(response => {
const data = response?.data || [];
this.pcsOptions = data
this.pcs = data.length>0?data[0].id:'';
})
},
getData(){
const {siteId,pcs,activeBtn}=this;
const {siteId}=this;
const [start='',end='']=(this.dateRange || [])
if(!pcs) return
//接口调用完成之后 设置图表、结束loading
this.loading=true;
getPowerData({siteId,deviceId:pcs,startDate:formatDate(start),endDate:formatDate(end),dataType:activeBtn}).then(response => {
getPowerData({siteId,startDate:formatDate(start),endDate:formatDate(end)}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{this.loading=false;})
},
setOption(data) {
const {name,attr} =this.btnList.find(item=>item.id===this.activeBtn)
const source = [['日期',name]]
data.forEach((item,index)=>{
source.push([item.statisDate,item[attr]])
const source = [['日期','电网功率','负载功率','储能功率','光伏功率']]
data.forEach(item=>{
source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower])
})
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
grid: {
containLabel: true
},
@ -146,7 +100,15 @@ export default {
dataset:{source},
series: [
{
name,
type: 'scatter',
},
{
type: 'scatter',
},
{
type: 'scatter',
},
{
type: 'scatter',
}
]
@ -157,16 +119,8 @@ export default {
},
init(){
this.loading = true
this.pcs=''
this.pcsOptions=[]
this.initChart()
this.getPcsList().then(()=>{
if(this.pcs){
this.onReset()
}else{
this.loading = false
}
})
this.getData()
}
},
mounted(){

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

@ -72,7 +72,6 @@ export default {
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap,item.dailyEfficiency])
})
this.chart.setOption({
color:['#FFBD00','#3C81FF','#05AEA3'],
legend: {
left: 'center',
bottom: '15',
@ -110,18 +109,22 @@ export default {
dataset:{
source
},
//所有充放电颜色保持统一
series: [
{
yAxisIndex:0,
type: 'bar',//柱状图
color:'#4472c4'
},
{
yAxisIndex:0,
type: 'bar',//柱状图
color:'#70ad47'
},
{
yAxisIndex:1,
type: 'line',//柱状图
color:'#FFBD00'
},
]
})

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

@ -3,11 +3,11 @@
<div v-loading="loading">
<div class="select-container">
<el-form :inline="true">
<el-form-item label="PCS">
<el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="PCS">-->
<!-- <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
<!-- <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
@ -62,15 +62,15 @@ export default {
defaultDateRange:[],//默认展示的时间
dateRange:[],
loading:false,
pcs:'',
pcsOptions: [],
// pcs:'',
// pcsOptions: [],
activeBtn:'1',
btnList:[
{name:'有功功率',id:'1',attr:['activePower'],source:[['日期','有功功率']]},
{name:'无功功率',id:'2',attr:['reactivePower'],source:[['日期','无功功率']]},
{name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
{name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
// {name:'温度',id:'wd'},
// {name:'三相电压',id:'sxdy'},
{name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:[['日期','u电流','v电流','w电流']],type:'bar'},
{name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'},
],
}
@ -93,41 +93,72 @@ export default {
this.dateRange=[]
this.getData()
},
getPcsList(){
return getPcsNameList(this.siteId).then(response => {
const data = response?.data || [];
this.pcsOptions = data
this.pcs = data.length>0?data[0].id:'';
})
},
// getPcsList(){
// return getPcsNameList(this.siteId).then(response => {
// const data = response?.data || [];
// this.pcsOptions = data
// this.pcs = data.length>0?data[0].id:'';
// })
// },
getData(){
const {siteId,pcs,activeBtn}=this;
const {siteId,activeBtn}=this;
const [start='',end='']=(this.dateRange || [])
if(!pcs) return
this.loading=true;
//接口调用完成之后 设置图表、结束loading
getPCSData({siteId,deviceId:pcs,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
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)
// 年2025-09/天2025-09-15/时2025-09-15/10:00
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
},
setOption(data) {
const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
const source = JSON.parse(JSON.stringify(ele.source))
const length = ele.attr.length
const series = []
const sourceBase = JSON.parse(JSON.stringify(ele.source))
// sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
const source=[]
const sourceTop = ['日期']
let map={},mapArr=[]
// 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
data.forEach((item)=>{
const arr = ele.attr.map(key=>item[key])
source.push([item.statisDate,...arr])
})
ele.attr.forEach((item)=>{
series.push({
name:length>1?item:ele.name,
type:ele.type || 'scatter'
item.dataList.forEach((inner)=>{
// 日期格式
// 年2025-09/天2025-09-15/时2025-09-15/10:00
// 所有数据的日期格式一致
if(!map[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))
sourceBase.forEach((outer,outerIndex)=>{
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)
console.log('map=',map)
console.log('mapArr=',mapArr)
console.log('========',source)
this.chart.setOption({
color:['#FFBD00','#3C81FF','#91cc74'],
grid: {
containLabel: true
},
@ -151,7 +182,11 @@ export default {
type: 'value',
},
dataset: {source},
series
series:source[0].slice(1).map(item=>{
return {
type:ele.type || 'scatter'
}
})
},true)
},
@ -160,18 +195,18 @@ export default {
},
init(){
this.loading = true
this.pcs=''
this.pcsOptions=[]
this.dateRange =[]
// this.pcs=''
// this.pcsOptions=[]
this.initChart()
this.getPcsList().then(()=>{
if(this.pcs){
this.onReset()
}else{
this.loading=false;
}
})
// this.getPcsList().then(()=>{
// if(this.pcs){
// this.onReset()
// }else{
// this.loading=false;
// }
//
// })
}
},
mounted(){

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

@ -112,11 +112,14 @@
>
{{ communicationStatusOptions[item.communicationStatus] }}
</div>
<div class="row-items-img">
<div class="row-items-img row-items-img-bms">
<div style="position:relative;">
<img
class="img-bms"
:src="require('@/assets/images/ems/bms.png')"
/>
<div class="num">{{item.batteryNum || 0}}</div>
</div>
<div class="name">{{ item.deviceName }}</div>
</div>
</div>
@ -179,11 +182,14 @@
]
}}
</div>
<div class="row-items-img">
<div class="row-items-img row-items-img-bms">
<div style="position: relative">
<img
class="img-pcs"
class="img-bms"
:src="require('@/assets/images/ems/bms.png')"
/>
<div class="num">{{item.batteryNum || 0}}</div>
</div>
<div class="name">{{ item.children[0].deviceName }}</div>
</div>
</div>
@ -505,10 +511,26 @@ $lineColor: #86bcc7;
.row-items-img {
position: relative;
padding-top: 12px;
&.row-items-img-bms{
padding-top: 14px;
.num{
position: absolute;
top: -2px;
right: -2px;
font-size: 10px;
line-height: 10px;
padding: 2px 4px;
text-align: center;
border-radius: 10px;
background-color: #03c69d;
color: #fff;
}
}
img {
width: 80px;
height: auto;
display: block;
position: relative;
&.img-lq {
width: 50px;
}

135
src/views/ems/search/DateTimeSelect.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<div class="time-range">
<el-date-picker
v-model="dateRange"
:type="type"
range-separator="至"
start-placeholder="开始时间"
:format="valueFormat"
:value-format="valueFormat"
:clearable="false"
:picker-options="pickerOptions"
end-placeholder="结束时间">
</el-date-picker>
<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>
</div>
</template>
<script>
import {formatDate} from '@/filters/ems'
export default {
props:{
dataUnit:{
type:Number,
default:1
}
},
computed:{
type(){
return this.dataUnit === 3 ? 'daterange' : 'datetimerange'
},
valueFormat(){
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){
return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
}else{
return true
}
}
},
data() {
return {
loading:false,
dateRange:[],
defaultDateRange:[],
pickerOptions:{
disabledDate(time) {
return time.getTime() > Date.now();
},
},
}
},
methods: {
init(){
const {dataUnit} = this
const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
const now = new Date(),formatNow = formatDate(now.getTime(),dataUnit !== 3 );
const timeAgo = formatDate(new Date(now.getTime() - timeDis),dataUnit !== 3)
this.dateRange = [timeAgo, formatNow];
this.defaultDateRange=[timeAgo, formatNow];
console.log('init',timeAgo,formatNow)
this.$emit('initDate',this.dateRange || [])
},
showBtnLoading(status){
this.loading = status
},
// 切换分、时、天 重置时间可选范围
resetDate(){
this.dateRange = this.defaultDateRange
},
//重置 设置时间范围为初始化时间段
reset(){
this.resetDate()
this.$emit('updateDate',this.dateRange || [])
},
// 搜索
search(){
if(this.dateRange && this.dateRange.length>0){
const {dataUnit} = this
const [start,end] = this.dateRange
const startTime = new Date(start),endTime=new Date(end)
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(`时间范围不能超过${dataUnit === 3 ? '30天' : dataUnit === 2 ? '24小时' : '1小时'}`)
}else{
this.$emit('updateDate',this.dateRange || [])
}
}else{
this.$emit('updateDate',this.dateRange || [])
}
},
timeLine(type){
if(!this.dateRange) return
//baseTime,maxTime 毫秒数
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 || [])
},
}
}
</script>
<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: 24px;
}
.el-button--mini{
padding:3px 10px;
}
}
}
</style>

340
src/views/ems/search/index.vue Normal file
View File

@ -0,0 +1,340 @@
<template>
<div v-loading="loading" class="ems-dashboard-editor-container" style="background-color: #ffffff">
<el-form ref="form" :model="form" label-position="top">
<el-form-item
label="站点"
prop="siteIds"
:rules="[{ required: true, message: '请选择站点' }]"
>
<el-radio-group v-model="form.siteIds" >
<el-radio v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId">
{{ item.siteName }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="设备" prop="categoryName" :rules="[{ required: true, message: '请选择设备' }]">
<el-radio-group v-model="form.categoryName" >
<el-radio v-for="(key,index) in deviceCategoryList" :key="index+'sbListSearch'" :label="key">
{{ key }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="isDtdc" label="单体电池(不超过5个)" prop="child" :rules="[{ required: true, message: '请选择单体电池' }]">
<el-cascader
v-model="form.child"
style="width:400px"
:props="{ multiple: true }"
:show-all-levels="false"
:options="childOptions"
@change="handleChildChange"></el-cascader>
</el-form-item>
<div style="display: flex">
<el-form-item label="点位" prop="pointName" :rules="[{ required: true, message: '请输入点位' }]" style="margin-right: 50px">
<el-autocomplete
v-model="form.pointName"
placeholder="请输入点位"
clearable
:fetch-suggestions="querySearchAsync"
@select="handleSelect"
></el-autocomplete>
</el-form-item>
<!-- <el-form-item label="横坐标" prop="dataUnit" :rules="[{ required: true, message: '请选择横坐标' }]">-->
<!-- <el-radio-group v-model="form.dataUnit">-->
<!-- <el-radio :label="1">分钟</el-radio>-->
<!-- <el-radio :label="2">小时</el-radio>-->
<!-- <el-radio :label="3">天</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
</div>
<el-form-item>
<el-button type="primary" @click="submitForm">生成图表</el-button>
</el-form-item>
</el-form>
<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">
<el-radio-group v-model="form.dataUnit">
<el-radio :label="1">分钟</el-radio>
<el-radio :label="2">小时</el-radio>
<el-radio :label="3">天</el-radio>
</el-radio-group>
</span>
<date-time-select ref="dateTimeSelect" :data-unit="form.dataUnit" @initDate="((e)=>form.dataRange=e||[])" @updateDate="updateDate"/>
</div>
<div style="height: 350px" id="searchChart"></div>
</el-card>
</div>
</template>
<script>
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {getAllSites} from "@/api/ems/zddt";
import {getAllDeviceCategory,getPointValueList,pointFuzzyQuery,getAllBatteryIdsBySites} from '@/api/ems/search'
import DateTimeSelect from "./DateTimeSelect.vue";
export default {
name: "Search",
mixins: [resize],
components:{DateTimeSelect},
computed: {
isDtdc(){
return this.form.categoryName === '单体电池'
},
},
watch:{
'form.siteIds':{
handler(newVal){
newVal && this.isDtdc && this.getChildList()
}
},
isDtdc:{
handler(newVal){
newVal && this.form.siteIds && this.getChildList()
!newVal && (this.form.child = [])
}
},
'form.dataUnit':{
handler(newVal,oldVal){
console.log('wacth到了dataUnit的变化',newVal,oldVal)
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init()
this.getDate()
})
// this.submitForm()
},
}
},
data() {
return {
chart: null,
deviceCategoryList:[],//设备列表
siteList: [],//站点列表
childOptions:[],//二级设备列表
form: {
dataRange:[],//时间选择范围
child:[],
siteIds: '',//当前选中的站点id 默认选中第一个站点
categoryName: '',//设备
pointName: '',//点位
dataUnit: 1,//横坐标
},
loading: false,
}
},
methods: {
getChildList(){
this.childOptions=[]
this.form.child=[]
const {siteIds} = this.form
getAllBatteryIdsBySites([siteIds]).then(response=>{
const data = response?.data || {};
const base = 50
let options = []
Object.entries(data).forEach(([key,value],index)=>{
if(!value) value =[]
options.push({
value: key,
label: this.siteList.find(s=>s.siteId === key)?.siteName || '',
children:[]
})
const length = value.length
const num = Math.ceil(length /base )
if(num === 0) return
for(let i = 1; i <= num; i++){
const start = (i-1)*base+1,end = i*base
options[index].children.push({
value:i,
label: `${start}-${end}`,
children:[]
})
for(let s = start;s<=Math.min(length,end);s++){
options[index].children[i-1].children.push({
value:value[s-1],
label:value[s-1]
})
}
}
})
console.log('二级设备options',options)
this.childOptions = options;
})
},
handleChildChange(data){
console.log('选择二级设备',data)
this.form.child=data
},
showLoading(){
this.chart && this.chart.showLoading()
},
hideLoading(){
this.chart && this.chart.hideLoading()
},
initChart() {
this.chart = echarts.init(document.querySelector('#searchChart'))
},
updateDate(val){
this.form.dataRange =val || []
this.getDate()
},
setOption(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.$message.warning('暂无数据')
}
console.log('图表数据',dataset)
this.chart.setOption({
legend: {
// left: 'center',
// top: '10',
},
grid: {
containLabel: true
},
tooltip: {
trigger: 'axis',
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
})
},
submitForm() {
this.getDate()
},
handleSelect(data){
this.form.pointName = data.value
},
querySearchAsync(query,cb){
console.log('查询数据',query)
if(!this.form.siteIds || !this.form.categoryName){
this.$message({
type: 'warning',
message: '请先选择站点和设备',
})
return cb([])
}
pointFuzzyQuery({
siteIds:[this.form.siteIds],
categoryName:this.form.categoryName,
pointName:query,
}).then(response => {
const data = response?.data || []
cb(data.map(item => {
return {name: item, value: item}
}))
})
},
// 获取所有设备
getDeviceCategory(){
return getAllDeviceCategory().then(response => {
this.deviceCategoryList=response?.data || []
})
},
getZdList() {
return getAllSites().then(response => {
this.siteList = response.data || []
}).finally(() => {
})
},
getDate(){
this.$refs.form.validate(valid => {
if(valid){
if(!this.form.pointName){
return this.$message.error('请输入正确的点位');
}
if(this.isDtdc && (this.form.child.length === 0 || this.form.child.length > 5 )){
return this.$message.error('请选择单体电池且不能超过5个');
}
this.loading = true
const{siteIds,dataUnit,categoryName,pointName,dataRange:[start='',end=''],child}=this.form
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'
}else{
startDate=start
}
if(end && dataUnit===3){
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
endDate = end + ' 00:00:00'
}else{
endDate=end
}
getPointValueList({siteIds:[siteIds],dataUnit,categoryName,pointName,startDate,endDate,siteDeviceMap}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{
this.loading = false
})
}
})
},
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
mounted() {
this.loading= true
this.$nextTick(()=>{
this.initChart()
this.$refs.dateTimeSelect.init()
Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(()=>this.loading=false)
})
}
}
</script>
<style lang="scss" scoped>
</style>

114
src/views/ems/site/sblb/PointTable.vue Normal file
View File

@ -0,0 +1,114 @@
<!--电位展示图表-->
<template>
<el-dialog
v-loading="loading"
:visible.sync="show"
title="点位列表"
:close-on-click-modal="false"
show-close
destroy-on-close
lock-scroll
append-to-body
width="600px"
class="ems-dialog"
>
<el-table
class="common-table"
:data="tableData"
stripe
max-height="600px"
style="width: 100%;">
<el-table-column
prop="dataPoint"
label="数据点位">
</el-table-column>
<el-table-column
prop="dataPointName"
label="数据点位名称">
</el-table-column>
</el-table>
<el-pagination
v-show="tableData.length>0"
small
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:pager-count="5"
: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>
</el-dialog>
</template>
<script>
import {getDevicePointList} from "@/api/ems/site";
export default {
watch:{
show(val) {
if(!val){
this.tableData=[]
this.deviceId=''
this.siteId=''
this.pageSize=10
this.pageNum=1
this.totalSize=0
this.loading =false
}
},
},
data(){
return{
show:false,
loading:false,
deviceCategory:'',
siteId:'',
tableData:[],
pageSize:10,//分页栏当前每个数据总数
pageNum:1,//分页栏当前页数
totalSize:0,//table表格数据总数
}
},
methods:{
showTable({deviceCategory,siteId}){
this.deviceCategory =deviceCategory
this.siteId=siteId
this.show=true
this.getData()
},
getData(){
this.loading=true
const {siteId,deviceCategory,pageNum,pageSize} =this
getDevicePointList({siteId,deviceCategory,pageNum,pageSize}).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.$nextTick(()=>{
this.getData()
})
},
}
}
</script>
<style scoped lang="scss">
::v-deep {
.card-title .el-radio{
line-height: 40px;
}
}
</style>

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

@ -3,12 +3,12 @@
<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="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
<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 type="primary" @click="onSearch" native-type="button">搜索</el-button>-->
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
</el-form>
@ -50,7 +50,7 @@
<el-table-column
fixed="right"
label="操作"
width="150">
width="260">
<template slot-scope="scope">
<!-- <el-button-->
<!-- @click="toDetail(scope.row.id)"-->
@ -58,6 +58,12 @@
<!-- size="mini">-->
<!-- 查看详情-->
<!-- </el-button>-->
<el-button
@click="pointDetail(scope.row)"
type="primary"
size="mini">
电位列表
</el-button>
<el-button
@click="editDevice(scope.row)"
type="warning"
@ -94,6 +100,7 @@
</div>
</el-dialog>
<add-device ref="addDevice" :mode="mode" :id="editDeviceId" @update="getData" @clear="clearEditDeviceData"/>
<point-table ref="pointTable"/>
</div>
</template>
@ -101,10 +108,11 @@
import {getDeviceInfoList,getDeviceDetailInfo,deleteService} from'@/api/ems/site'
import {getAllSites} from '@/api/ems/zddt'
import {formatNumber} from "@/filters/ems";
import PointTable from './PointTable.vue'
import AddDevice from "./AddDevice.vue";
export default {
name: "Sblb",
components:{AddDevice},
components:{AddDevice,PointTable},
data() {
return {
loading:false,
@ -142,6 +150,10 @@ export default {
}
},
methods:{
// 查看设备电位表格
pointDetail(row){
this.$refs.pointTable.showTable({deviceCategory:row.deviceCategory,siteId:row.siteId})
},
clearEditDeviceData(){
this.mode = '';
this.editDeviceId=''

2
src/views/ems/zddt/BarChart.vue
View File

@ -32,7 +32,7 @@ export default {
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
})
this.chart.setOption({
color:['#A796FF','#FFBE01'],
color:['#4472c4','#70ad47'],//所有充放电颜色保持统一
grid: {
top:30,
containLabel: true