Compare commits

...

15 Commits

12 changed files with 542 additions and 77 deletions

View File

@ -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
View 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'
})
}

View File

@ -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>

View File

@ -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;

View File

@ -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}`
}
}

View File

@ -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',

View File

@ -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>

View File

@ -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}} &#8451;</span> <span>{{scope.row.maxCellTemp}} &#8451;</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}} &#8451;</span> <span>{{scope.row.minCellTemp}} &#8451;</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:'&#8451;'}, {label:'平均温度',attr:'operatingTemp',unit:'&#8451;'},
{label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;'}, {label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;'},
] ]
} }
}, },

View File

@ -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){

View File

@ -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) {

View 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>

View 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>