Compare commits
15 Commits
46490aebee
...
develop
Author | SHA1 | Date | |
---|---|---|---|
59d2a09644 | |||
21a8871e3c | |||
bf92b8010b | |||
d06feb2078 | |||
4d58c9883c | |||
ec35538afd | |||
328f893da9 | |||
c53bc4dc45 | |||
cacd939dd6 | |||
b59b564544 | |||
0861c3e15f | |||
edab894447 | |||
99b019ebc9 | |||
9b78635fd8 | |||
ab9a13264c |
@ -77,9 +77,18 @@ export function getAmmeterDataList(siteId) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 故障告警
|
// 故障告警
|
||||||
export function getAlarmDetailList({siteId, deviceType, alarmLevel, alarmStartTime, alarmEndTime,todayFlag,pageSize,pageNum}) {
|
export function getAlarmDetailList({siteId, deviceType, alarmLevel, alarmStartTime, alarmEndTime,pageSize,pageNum}) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/siteAlarm/getAlarmDetailList?todayFlag=${todayFlag}&siteId=${siteId}&deviceType=${deviceType}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
|
url: `/ems/siteAlarm/getAlarmDetailList?siteId=${siteId}&deviceType=${deviceType}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 概率统计
|
||||||
|
//获取概率统计 电量指标接口
|
||||||
|
export function getElectricData({siteId,startDate,endDate}) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/statsReport/getElectricData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
24
src/api/ems/site.js
Normal file
24
src/api/ems/site.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
// 站点列表
|
||||||
|
export function getSiteInfoList({siteName,startTime, endTime,pageSize,pageNum}) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/siteConfig/getSiteInfoList?siteName=${siteName}&startTime=${startTime}&endTime=${endTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设备列表
|
||||||
|
export function getDeviceInfoList({siteId,pageSize,pageNum}) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/siteConfig/getDeviceInfoList?siteId=${siteId}&pageSize=${pageSize}&pageNum=${pageNum}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设备详情
|
||||||
|
export function getDeviceDetailInfo(deviceId) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/siteConfig/getDeviceDetailInfo?deviceId=${deviceId}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
@ -24,7 +24,7 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
::v-deep .el-card__body{
|
::v-deep .el-card__body{
|
||||||
padding: 12px 16px;
|
padding: 12px 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -65,11 +65,13 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.card{
|
.card{
|
||||||
width: 150px;
|
min-width: 150px;
|
||||||
height: 96px;
|
height: 96px;
|
||||||
margin-right: 27px;
|
margin-right: 27px;
|
||||||
border-bottom: 4px solid transparent;
|
border-bottom: 4px solid transparent;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding:0 10px;
|
||||||
.info{
|
.info{
|
||||||
color: #666666;
|
color: #666666;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
|
@ -4,3 +4,16 @@ export const formatNumber = (val) => {
|
|||||||
return val
|
return val
|
||||||
}else {return '-'}
|
}else {return '-'}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const formatDate = (val,toSeconds = false) => {
|
||||||
|
if(!val) return ''
|
||||||
|
const date = new Date(val)
|
||||||
|
const month = date.getMonth() + 1,day = date.getDate()
|
||||||
|
if(!toSeconds){
|
||||||
|
return `${date.getFullYear()}-${month<10?'0'+month : month}-${day<10 ? '0'+day : day}`
|
||||||
|
}else{
|
||||||
|
const hours = date.getHours(),minuets=date.getMinutes(),seconds = date.getSeconds();
|
||||||
|
return `${date.getFullYear()}-${month<10?'0'+month : month}-${day<10 ? '0'+day : day} ${hours<10 ? '0'+hours : hours}:${minuets<10 ? '0'+minuets : minuets}:${seconds<10 ? '0'+seconds : seconds}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -41,7 +41,7 @@ export const dzjk=[
|
|||||||
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',activeSecondMenuName:'DzjkHome' }
|
meta: { title: '站点首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkHome' }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/dzjk/sbjk',
|
path: '/dzjk/sbjk',
|
||||||
|
@ -4,12 +4,12 @@
|
|||||||
<!-- 搜索栏-->
|
<!-- 搜索栏-->
|
||||||
<el-form :inline="true" class="select-container">
|
<el-form :inline="true" class="select-container">
|
||||||
<el-form-item label="设备类型">
|
<el-form-item label="设备类型">
|
||||||
<el-select v-model="search.deviceType" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
<el-select v-model="search.deviceType" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||||
<el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.deviceTypeOptions" :key="key+'deviceTypeOptions'"></el-option>
|
<el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.deviceTypeOptions" :key="key+'deviceTypeOptions'"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="告警等级">
|
<el-form-item label="告警等级">
|
||||||
<el-select v-model="search.alarmLevel" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
<el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||||
<el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions" :key="key+'alarmLevelOptions'"></el-option>
|
<el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions" :key="key+'alarmLevelOptions'"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -48,7 +48,7 @@
|
|||||||
max-height="500"
|
max-height="500"
|
||||||
style="width: 100%;margin-top:25px;">
|
style="width: 100%;margin-top:25px;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="name"
|
prop="deviceName"
|
||||||
width="200"
|
width="200"
|
||||||
label="设备名称">
|
label="设备名称">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
@ -61,17 +61,22 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="alarmContent"
|
prop="alarmContent"
|
||||||
min-width="400"
|
|
||||||
show-overflow-tooltip
|
show-overflow-tooltip
|
||||||
label="告警内容">
|
label="告警内容">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="alarmStartTime"
|
prop="alarmStartTime"
|
||||||
label="告警发生时间">
|
label="告警发生时间">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{formatDate(scope.row.alarmStartTime,true)}}</span>
|
||||||
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="alarmEndTime"
|
prop="alarmEndTime"
|
||||||
label="告警结束时间">
|
label="告警结束时间">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{formatDate(scope.row.alarmEndTime,true)}}</span>
|
||||||
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="状态">
|
label="状态">
|
||||||
@ -101,6 +106,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import {getAlarmDetailList} from'@/api/ems/dzjk'
|
import {getAlarmDetailList} from'@/api/ems/dzjk'
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
|
import { formatDate } from '@/filters/ems'
|
||||||
export default {
|
export default {
|
||||||
name:'DzjkGzgj',
|
name:'DzjkGzgj',
|
||||||
mixins:[getQuerySiteId],
|
mixins:[getQuerySiteId],
|
||||||
@ -109,7 +115,7 @@ export default {
|
|||||||
loading:false,
|
loading:false,
|
||||||
btnList:[
|
btnList:[
|
||||||
{name:'今日告警',id:'today'},
|
{name:'今日告警',id:'today'},
|
||||||
{name:'历史告警',id:'yesterday'},
|
{name:'历史告警',id:'history'},
|
||||||
],
|
],
|
||||||
pickerOptions:{
|
pickerOptions:{
|
||||||
disabledDate(time) {
|
disabledDate(time) {
|
||||||
@ -120,15 +126,6 @@ export default {
|
|||||||
dateRange:[],//alarmStartTime,alarmEndTime
|
dateRange:[],//alarmStartTime,alarmEndTime
|
||||||
activeBtn:'today',
|
activeBtn:'today',
|
||||||
search:{deviceType:'',alarmLevel:''},
|
search:{deviceType:'',alarmLevel:''},
|
||||||
deviceTypeOptions:[
|
|
||||||
{name:'类型一',id:1},
|
|
||||||
{name:'类型二',id:2},
|
|
||||||
{name:'类型三',id:3},
|
|
||||||
],
|
|
||||||
alarmLevelOptions:[
|
|
||||||
{name:'等级一',id:1},
|
|
||||||
{name:'等级二',id:2},
|
|
||||||
],
|
|
||||||
// 表格、分页
|
// 表格、分页
|
||||||
tableData:[],
|
tableData:[],
|
||||||
pageSize:10,//分页栏当前每个数据总数
|
pageSize:10,//分页栏当前每个数据总数
|
||||||
@ -137,6 +134,14 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
formatDate,
|
||||||
|
// 判断是否是同一天
|
||||||
|
isSameDay(day1, day2) {
|
||||||
|
const date1 = new Date(day1),date2 = new Date(day2)
|
||||||
|
return date1.getFullYear() === date2.getFullYear() &&
|
||||||
|
date1.getMonth() === date2.getMonth() &&
|
||||||
|
date1.getDate() === date2.getDate();
|
||||||
|
},
|
||||||
// 分页
|
// 分页
|
||||||
handleSizeChange(val) {
|
handleSizeChange(val) {
|
||||||
this.pageSize = val;
|
this.pageSize = val;
|
||||||
@ -152,12 +157,26 @@ export default {
|
|||||||
},
|
},
|
||||||
// 搜索
|
// 搜索
|
||||||
onSearch(){
|
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()
|
this.getData()
|
||||||
},
|
},
|
||||||
// 重置
|
// 重置
|
||||||
onReset(){
|
onReset(){
|
||||||
this.search={deviceType:'',alarmLevel:''}
|
this.search={deviceType:'',alarmLevel:''}
|
||||||
this.dateRange=[]
|
this.dateRange=[]
|
||||||
|
this.pageNum =1//每次搜索从1开始搜索
|
||||||
this.getData()
|
this.getData()
|
||||||
},
|
},
|
||||||
// 切换今日、历史告警
|
// 切换今日、历史告警
|
||||||
@ -165,6 +184,17 @@ export default {
|
|||||||
if(id !== this.activeBtn){
|
if(id !== this.activeBtn){
|
||||||
console.log('点击了不同的菜单,更新数据')
|
console.log('点击了不同的菜单,更新数据')
|
||||||
this.activeBtn=id;
|
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()
|
this.getData()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -173,10 +203,23 @@ export default {
|
|||||||
this.loading=true
|
this.loading=true
|
||||||
const {deviceType,alarmLevel} = this.search
|
const {deviceType,alarmLevel} = this.search
|
||||||
const {siteId,pageNum,pageSize,activeBtn} =this
|
const {siteId,pageNum,pageSize,activeBtn} =this
|
||||||
const [alarmStartTime='',alarmEndTime='']=this.dateRange
|
const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
|
||||||
const todayFlag = activeBtn === 'today'
|
let start='',end = '',now =new Date()
|
||||||
getAlarmDetailList({deviceType,alarmLevel,siteId,pageSize,pageNum,alarmStartTime,alarmEndTime,todayFlag}).then(response => {
|
if(activeBtn === 'today'){
|
||||||
this.tableData=response?.data || [];
|
start = end = now
|
||||||
|
}else{
|
||||||
|
if(alarmStartTime && alarmEndTime){
|
||||||
|
start = alarmStartTime
|
||||||
|
end = alarmEndTime
|
||||||
|
}else{
|
||||||
|
start=''
|
||||||
|
end = ''
|
||||||
|
// now
|
||||||
|
// end.setDate(end.getDate() - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getAlarmDetailList({deviceType,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(start),alarmEndTime:formatDate(end)}).then(response => {
|
||||||
|
this.tableData=response?.rows || [];
|
||||||
this.totalSize = response?.total || 0
|
this.totalSize = response?.total || 0
|
||||||
}).finally(() => {this.loading=false})
|
}).finally(() => {this.loading=false})
|
||||||
},
|
},
|
||||||
@ -191,3 +234,4 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -20,9 +20,9 @@
|
|||||||
<!-- 进度-->
|
<!-- 进度-->
|
||||||
<div class="process-container">
|
<div class="process-container">
|
||||||
<div class="process-line-bg">
|
<div class="process-line-bg">
|
||||||
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
|
<div class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="process">当前SOC : {{baseInfo.currentSoc}}%</div>
|
<div class="process">当前SOC : {{baseInfo.stackSoc}}%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-table
|
<el-table
|
||||||
@ -58,27 +58,27 @@
|
|||||||
prop="maxVoltage"
|
prop="maxVoltage"
|
||||||
label="单体最高电压">
|
label="单体最高电压">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{scope.row.maxVoltage}} V</span>
|
<span>{{scope.row.maxCellVoltage}} V</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="minVoltage"
|
prop="minVoltage"
|
||||||
label="单体最低电压">
|
label="单体最低电压">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{scope.row.minVoltage}} V</span>
|
<span>{{scope.row.minCellVoltage}} V</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="单体最高温度">
|
label="单体最高温度">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{scope.row.maxTemperature}} ℃</span>
|
<span>{{scope.row.maxCellTemp}} ℃</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="minTemperature"
|
prop="minTemperature"
|
||||||
label="单体最低温度">
|
label="单体最低温度">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{scope.row.minTemperature}} ℃</span>
|
<span>{{scope.row.minCellTemp}} ℃</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
@ -100,15 +100,15 @@ export default {
|
|||||||
loading:false,
|
loading:false,
|
||||||
baseInfoList:[],
|
baseInfoList:[],
|
||||||
infoData:[
|
infoData:[
|
||||||
{label:'电池堆总电压',attr:'totalVoltage',unit:'V'},
|
{label:'电池堆总电压',attr:'stackVoltage',unit:'V'},
|
||||||
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
|
{label:'可充电量',attr:'availableChargeCapacity',unit:'kWh'},
|
||||||
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
|
{label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh'},
|
||||||
{label:'电池堆总电流',attr:'totalCurrent',unit:'A'},
|
{label:'电池堆总电流',attr:'stackCurrent',unit:'A'},
|
||||||
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
|
{label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh'},
|
||||||
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
|
{label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh'},
|
||||||
{label:'SOH',attr:'soh',unit:'%'},
|
{label:'SOH',attr:'stackSoh',unit:'%'},
|
||||||
{label:'平均温度',attr:'averageTemperature',unit:'℃'},
|
{label:'平均温度',attr:'operatingTemp',unit:'℃'},
|
||||||
{label:'绝缘电阻',attr:'insulationResistance',unit:'Ω'},
|
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'Ω'},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -40,6 +40,10 @@
|
|||||||
prop="deviceId"
|
prop="deviceId"
|
||||||
label="单体编号">
|
label="单体编号">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="clusterDeviceId"
|
||||||
|
label="簇号">
|
||||||
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="voltage"
|
prop="voltage"
|
||||||
label="电压(V)"
|
label="电压(V)"
|
||||||
@ -113,6 +117,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 搜索
|
// 搜索
|
||||||
onSearch(){
|
onSearch(){
|
||||||
|
this.pageNum =1//每次搜索从1开始搜索
|
||||||
this.getTableData()
|
this.getTableData()
|
||||||
},
|
},
|
||||||
// 重置
|
// 重置
|
||||||
@ -121,6 +126,7 @@ export default {
|
|||||||
onReset(){
|
onReset(){
|
||||||
this.search={stackId:'',clusterId:''}
|
this.search={stackId:'',clusterId:''}
|
||||||
this.clusterOptions=[]
|
this.clusterOptions=[]
|
||||||
|
this.pageNum = 1
|
||||||
this.getTableData()
|
this.getTableData()
|
||||||
},
|
},
|
||||||
changeStackId(val){
|
changeStackId(val){
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span class="card-title">电量指标</span>
|
<span class="card-title">电量指标</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-main">
|
<div class="card-main" v-loading="loading">
|
||||||
<!-- 搜索栏-->
|
<!-- 搜索栏-->
|
||||||
<div class="select-container">
|
<div class="select-container">
|
||||||
<el-form :inline="true">
|
<el-form :inline="true">
|
||||||
@ -19,7 +19,7 @@
|
|||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
|
<el-button type="primary" @click="getData" native-type="button">搜索</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="onReset" native-type="button">重置</el-button>
|
<el-button @click="onReset" native-type="button">重置</el-button>
|
||||||
@ -27,9 +27,9 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
<div class="total-data">
|
<div class="total-data">
|
||||||
<div>总充电量:<span class="point">1390988kWh</span></div>
|
<div>总充电量:<span class="point">{{totalChargedCap | formatNumber}}kWh</span></div>
|
||||||
<div>总放电量:<span class="point">988kWh</span></div>
|
<div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div>
|
||||||
<div>综合效率:<span class="point">99%</span></div>
|
<div>综合效率:<span class="point">{{efficiency | formatNumber}}%</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="dlzbChart" style="height: 310px"></div>
|
<div id="dlzbChart" style="height: 310px"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -39,8 +39,11 @@
|
|||||||
<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 getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
|
import {getElectricData} from '@/api/ems/dzjk'
|
||||||
|
import {formatDate} from '@/filters/ems'
|
||||||
export default {
|
export default {
|
||||||
mixins: [resize],
|
mixins: [resize,getQuerySiteId],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pickerOptions:{
|
pickerOptions:{
|
||||||
@ -51,74 +54,94 @@ export default {
|
|||||||
defaultDateRange:[],//默认展示的时间
|
defaultDateRange:[],//默认展示的时间
|
||||||
dateRange:[],
|
dateRange:[],
|
||||||
loading:false,
|
loading:false,
|
||||||
chart: null
|
chart: null,
|
||||||
|
totalChargedCap:'',
|
||||||
|
totalDisChargedCap:'',
|
||||||
|
efficiency:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 搜索
|
|
||||||
onSearch(){
|
|
||||||
this.getData()
|
|
||||||
},
|
|
||||||
// 重置
|
// 重置
|
||||||
onReset(){
|
onReset(){
|
||||||
this.dateRange=[]
|
this.dateRange=[]
|
||||||
this.getData()
|
this.getData()
|
||||||
},
|
},
|
||||||
getData(){
|
|
||||||
this.loading=true;
|
|
||||||
this.chart.showLoading()
|
|
||||||
//接口调用完成之后 设置图表、结束loading
|
|
||||||
this.setOption()
|
|
||||||
this.loading=false;
|
|
||||||
this.chart.hideLoading()
|
|
||||||
},
|
|
||||||
setOption(data){
|
setOption(data){
|
||||||
// const source = [['日期','充电量','放电量']]
|
const source = [['日期','充电量','放电量','效率']]
|
||||||
// data.forEach(item=>{
|
data.forEach(item=>{
|
||||||
// source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
|
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap,item.dailyEfficiency])
|
||||||
// })
|
})
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
color:['#FFBD00','#3C81FF'],
|
color:['#FFBD00','#3C81FF','#05AEA3'],
|
||||||
// legend: {
|
// legend: {
|
||||||
// left: 'right',
|
// left: 'right',
|
||||||
// bottom: '10',
|
// bottom: '10',
|
||||||
// },
|
// },
|
||||||
tooltip: {},
|
tooltip: {},
|
||||||
xAxis: { type: 'category' },
|
xAxis: { type: 'category' },
|
||||||
yAxis: { type: 'value' },
|
yAxis: [{
|
||||||
grid:{top:30},
|
type: 'value',
|
||||||
|
name:'充电量/放电量kWh',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle:{
|
||||||
|
color: '#333333',
|
||||||
|
},
|
||||||
|
onZero:false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
type: 'value',
|
||||||
|
name:'效率%',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle:{
|
||||||
|
color: '#333333',
|
||||||
|
},
|
||||||
|
onZero:false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
grid:{top:40},
|
||||||
dataset:{
|
dataset:{
|
||||||
// source
|
source
|
||||||
source:[//格式
|
|
||||||
['product','充电量','放电量'],
|
|
||||||
['6/10',101,220],
|
|
||||||
['6/11',210,390],
|
|
||||||
['6/12',220,360],
|
|
||||||
['6/13',520,340],
|
|
||||||
['6/14',270,430],
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
yAxisIndex:0,
|
||||||
type: 'bar',//柱状图
|
type: 'bar',//柱状图
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
yAxisIndex:0,
|
||||||
type: 'bar',//柱状图
|
type: 'bar',//柱状图
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
yAxisIndex:1,
|
||||||
|
type: 'line',//柱状图
|
||||||
|
},
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
initChart() {
|
getData(){
|
||||||
|
this.loading=true;
|
||||||
|
//接口调用完成之后 设置图表、结束loading
|
||||||
|
const [start='',end='']=this.dateRange || [];
|
||||||
|
const startDate=formatDate(start),endDate = formatDate(end)
|
||||||
|
getElectricData({siteId:this.siteId,startDate,endDate}).then(response => {
|
||||||
|
const {totalChargedCap='',totalDisChargedCap='',efficiency='',sevenDayDisChargeStats=[]}=response?.data || {}
|
||||||
|
this.setOption(sevenDayDisChargeStats || [])
|
||||||
|
this.totalChargedCap=totalChargedCap
|
||||||
|
this.totalDisChargedCap=totalDisChargedCap
|
||||||
|
this.efficiency=efficiency
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading=false;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
init(){
|
||||||
this.chart = echarts.init(document.querySelector('#dlzbChart'));
|
this.chart = echarts.init(document.querySelector('#dlzbChart'));
|
||||||
|
this.onReset()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||||
this.defaultDateRange = [lastMonth, now];
|
this.defaultDateRange = [lastMonth, now];
|
||||||
this.initChart()
|
|
||||||
this.getData()
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (!this.chart) {
|
if (!this.chart) {
|
||||||
|
197
src/views/ems/site/sblb/index.vue
Normal file
197
src/views/ems/site/sblb/index.vue
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
|
||||||
|
<el-form :inline="true" class="select-container">
|
||||||
|
<el-form-item label="站点选择">
|
||||||
|
<el-select v-model="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
|
||||||
|
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
|
||||||
|
<el-button @click="onReset" native-type="button">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table
|
||||||
|
class="common-table"
|
||||||
|
:data="tableData"
|
||||||
|
stripe
|
||||||
|
max-height="600px"
|
||||||
|
style="width: 100%;margin-top: 25px">
|
||||||
|
<el-table-column
|
||||||
|
prop="siteId"
|
||||||
|
label="站点ID">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="siteName"
|
||||||
|
label="站点名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="deviceId"
|
||||||
|
label="设备ID"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="deviceName"
|
||||||
|
label="设备名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="deviceType"
|
||||||
|
label="设备类型">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="communicationStatus"
|
||||||
|
label="通信状态">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{$store.state.ems.communicationStatusOptions[scope.row.communicationStatus]}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
fixed="right"
|
||||||
|
label="操作"
|
||||||
|
width="140">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
@click="toDetail(scope.row.deviceId)"
|
||||||
|
type="primary"
|
||||||
|
size="small">
|
||||||
|
查看详情
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
v-show="tableData.length>0"
|
||||||
|
background
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="pageNum"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:page-sizes="[10, 20, 30, 40]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="totalSize"
|
||||||
|
style="margin-top:15px;text-align: center"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title=" 详细信息" :close-on-click-modal="false" :before-close="handleClosed">
|
||||||
|
<div class="descriptions-main" style="padding: 0" >
|
||||||
|
<el-descriptions direction="vertical" :column="2" :colon="false" border>
|
||||||
|
<el-descriptions-item v-for="item in detailData" labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getDeviceInfoList,getDeviceDetailInfo} from'@/api/ems/site'
|
||||||
|
import {getAllSites} from '@/api/ems/zddt'
|
||||||
|
import {formatNumber} from "@/filters/ems";
|
||||||
|
export default {
|
||||||
|
name: "Sblb",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading:false,
|
||||||
|
searchLoading:false,
|
||||||
|
siteId:'',
|
||||||
|
siteList:[],
|
||||||
|
tableData:[],
|
||||||
|
pageSize:10,//分页栏当前每个数据总数
|
||||||
|
pageNum:1,//分页栏当前页数
|
||||||
|
totalSize:0,//table表格数据总数
|
||||||
|
dialogTableVisible:false,
|
||||||
|
detailData:[
|
||||||
|
{label:'设备ID',value:'',attr:'deviceId'},
|
||||||
|
{label:'设备名称',value:'',attr:'deviceName'},
|
||||||
|
{label:'设备类型',value:'',attr:'deviceType'},
|
||||||
|
{label:'通信状态',value:'',attr:'communicationStatus'},
|
||||||
|
{label:'TCP设备的IP地址',value:'',attr:'ipAddress'},
|
||||||
|
{label:'TCP端口号',value:'',attr:'ipPort'},
|
||||||
|
{label:'串口路径',value:'',attr:'serialPort'},
|
||||||
|
{label:'波特率',value:'',attr:'baudRate'},
|
||||||
|
{label:'数据位',value:'',attr:'dataBits'},
|
||||||
|
{label:'停止位',value:'',attr:'stopBits'},
|
||||||
|
{label:'校验位',value:'',attr:'parity'},
|
||||||
|
{label:'设备描述',value:'',attr:'description'},
|
||||||
|
{label:'设备类别',value:'',attr:'deviceCategory'},
|
||||||
|
{label:'上级设备ID',value:'',attr:'parentId'},
|
||||||
|
{label:'设备唯一标识符',value:'',attr:'deviceId'},
|
||||||
|
],
|
||||||
|
detailformatAttr:{
|
||||||
|
'deviceType':'deviceTypeOptions',
|
||||||
|
'communicationStatus':'communicationStatusOptions',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleClosed(done){
|
||||||
|
this.detailData.forEach((item)=>{item.value = ''})
|
||||||
|
done()
|
||||||
|
},
|
||||||
|
toDetail(deviceId){
|
||||||
|
this.loading = true
|
||||||
|
getDeviceDetailInfo(deviceId).then(response => {
|
||||||
|
const data = response?.data || {};
|
||||||
|
this.detailData.forEach(item=>{
|
||||||
|
if(this.detailformatAttr[item.attr]){
|
||||||
|
item.value=formatNumber(this.$store.state.ems[this.detailformatAttr[item.attr]][data[item.attr]]);
|
||||||
|
}else{
|
||||||
|
item.value=formatNumber(data[item.attr]);
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
this.dialogTableVisible = true
|
||||||
|
}).finally(() => {this.loading = false})
|
||||||
|
|
||||||
|
},
|
||||||
|
// 分页
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.pageSize = val;
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.getData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.pageNum = val
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.getData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 搜索
|
||||||
|
onSearch(){
|
||||||
|
this.pageNum =1//每次搜索从1开始搜索
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
// 重置
|
||||||
|
onReset(){
|
||||||
|
this.siteId=''
|
||||||
|
this.pageNum =1//每次搜索从1开始搜索
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
// 获取数据
|
||||||
|
getData(){
|
||||||
|
this.loading=true
|
||||||
|
const {siteId,pageNum,pageSize} =this
|
||||||
|
getDeviceInfoList({siteId,pageNum,pageSize}).then(response => {
|
||||||
|
this.tableData=response?.rows || [];
|
||||||
|
this.totalSize = response?.total || 0
|
||||||
|
}).finally(() => {this.loading=false})
|
||||||
|
},
|
||||||
|
//获取站点列表
|
||||||
|
getZdList(){
|
||||||
|
this.searchLoading=true
|
||||||
|
getAllSites().then(response => {
|
||||||
|
this.siteList = response?.data || []
|
||||||
|
}).finally(() => {this.searchLoading=false})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.onReset()
|
||||||
|
this.getZdList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
147
src/views/ems/site/zdlb/index.vue
Normal file
147
src/views/ems/site/zdlb/index.vue
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
|
||||||
|
<el-form :inline="true" class="select-container">
|
||||||
|
<el-form-item label="站点名称">
|
||||||
|
<el-input
|
||||||
|
v-model="siteName"
|
||||||
|
placeholder="请输入"
|
||||||
|
clearable
|
||||||
|
style="width: 240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="运营时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dateRange"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
|
:default-value="defaultDateRange"
|
||||||
|
></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
|
||||||
|
<el-button @click="onReset" native-type="button">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table
|
||||||
|
class="common-table"
|
||||||
|
:data="tableData"
|
||||||
|
stripe
|
||||||
|
max-height="500px"
|
||||||
|
style="width: 100%;margin-top: 25px">
|
||||||
|
<el-table-column
|
||||||
|
prop="siteId"
|
||||||
|
label="站点ID">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="siteName"
|
||||||
|
label="站点名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="siteAddress"
|
||||||
|
label="站点地址"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="runningTime"
|
||||||
|
label="运营时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="installPower"
|
||||||
|
label="装机功率">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="installCapacity"
|
||||||
|
label="装机容量">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
v-show="tableData.length>0"
|
||||||
|
background
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="pageNum"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:page-sizes="[10, 20, 30, 40]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="totalSize"
|
||||||
|
style="margin-top:15px;text-align: center"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getSiteInfoList} from '@/api/ems/site'
|
||||||
|
import { formatDate } from '@/filters/ems'
|
||||||
|
export default {
|
||||||
|
name: "Zdlb",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading:false,
|
||||||
|
siteName:"",
|
||||||
|
pickerOptions:{
|
||||||
|
disabledDate(time) {
|
||||||
|
return time.getTime() > Date.now();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultDateRange:[],//默认展示的时间
|
||||||
|
dateRange:[],//startTime,endTime
|
||||||
|
tableData:[],
|
||||||
|
pageSize:10,//分页栏当前每个数据总数
|
||||||
|
pageNum:1,//分页栏当前页数
|
||||||
|
totalSize:0,//table表格数据总数
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 分页
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.pageSize = val;
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.getData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.pageNum = val
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.getData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 搜索
|
||||||
|
onSearch(){
|
||||||
|
this.pageNum =1//每次搜索从1开始搜索
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
// 重置
|
||||||
|
onReset(){
|
||||||
|
this.siteName=''
|
||||||
|
this.dateRange=[]
|
||||||
|
this.pageNum =1//每次搜索从1开始搜索
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
// 获取数据
|
||||||
|
getData(){
|
||||||
|
this.loading=true
|
||||||
|
const {siteName,pageNum,pageSize} =this
|
||||||
|
const [startTime='',endTime='']=(this.dateRange || [])
|
||||||
|
getSiteInfoList({siteName,pageSize,pageNum,startTime:formatDate(startTime),endTime:formatDate(endTime)}).then(response => {
|
||||||
|
this.tableData=response?.rows || [];
|
||||||
|
this.totalSize = response?.total || 0
|
||||||
|
}).finally(() => {this.loading=false})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.onReset()
|
||||||
|
const now = new Date();
|
||||||
|
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||||
|
this.defaultDateRange = [lastMonth, now];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
Reference in New Issue
Block a user