单体电池表格曲线图,统计报表概览统计没有数据返回 隐藏

This commit is contained in:
2025-07-17 17:47:18 +08:00
parent e9c8b10d29
commit 62eb0e7e7d
4 changed files with 179 additions and 3 deletions

View File

@ -60,6 +60,15 @@ export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId,
method: 'get'
})
}
// 单体电池图表
//http://localhost:8089/ems/siteMonitor/getSingleBatteryData?clusterDeviceId=BMSC01&siteId=021_FXX_01&deviceId=001&startDate=2025-07-11&endDate=2025-07-18
export function getSingleBatteryData({siteId,deviceId,clusterDeviceId,startDate,endDate}) {
return request({
url: `/ems/siteMonitor/getSingleBatteryData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&clusterDeviceId=${clusterDeviceId}`,
method: 'get'
})
}
//获取液冷列表数据
export function getCoolingDataList(siteId) {
return request({

View File

@ -0,0 +1,150 @@
<template>
<el-dialog
:visible.sync="dialogTableVisible"
:close-on-click-modal="false"
show-close
destroy-on-close
lock-scroll
append-to-body
width="700px"
class="ems-dialog"
:before-close="handleColsed"
>
<div>
<el-form size="medium" label-width="100px" inline>
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator=""
start-placeholder="开始时间"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getData">搜索</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
<div id="lineChart" style="height: 360px;width: 100%;"></div>
</div>
</el-dialog>
</template>
<script>
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {getSingleBatteryData} from '@/api/ems/dzjk'
export default {
mixins: [resize],
data() {
return {
loading: false,
siteId:'',
deviceId:'',
clusterDeviceId:'',
pickerOptions:{
disabledDate(time) {
return time.getTime() > Date.now();
},
},
dialogTableVisible: false,
dateRange: [],
defaultDateRange:[]
}
},
methods: {
handleColsed(done){
if (!this.chart) {
return done()
}
this.chart.dispose()
this.chart = null
done()
},
getData(){
if(this.loading) return
this.loading = true;
this.chart.showLoading()
const {siteId, deviceId,clusterDeviceId,dateRange:[startDate='',endDate='']}=this;
getSingleBatteryData({siteId, deviceId,clusterDeviceId,startDate,endDate}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{
this.loading = false;
this.chart.hideLoading()
})
},
// 重置
onReset(){
this.dateRange=[]
this.getData()
},
initChart({siteId, clusterDeviceId, deviceId}) {
this.siteId=siteId
this.clusterDeviceId=clusterDeviceId
this.deviceId=deviceId
this.dateRange=[]
this.dialogTableVisible = true
this.$nextTick(()=>{
!this.chart && (this.chart = echarts.init(document.querySelector('#lineChart')))
this.getData()
})
},
setOption(data) {
const source = [['日期','电压','温度','SOC','SOH']]
data.forEach(item => {
source.push([item.dataTimestamp,item.voltage,item.temperature,item.soc,item.soh])
})
this.chart && this.chart.setOption({
color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
legend: {
bottom: '10',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
textStyle:{
color:"#333333",
},
xAxis: {
type: 'category',
},
yAxis: {
type: 'value',
},
dataset:{
source
},
series: [
{
name:'电压',
type: 'line',
},{
name:'温度',
type: 'line',
},
{
name:'SOC',
type: 'line',
},{
name:'SOH',
type: 'line',
}]
})
}
},
mounted(){
const now = new Date();
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
this.defaultDateRange = [lastMonth, now];
}
}
</script>

View File

@ -61,6 +61,17 @@
prop="soh"
label="SOH%">
</el-table-column>
<el-table-column
label="曲线图">
<template slot-scope="scope">
<el-button
@click="chartDetail(scope.row)"
type="text"
size="small">
展示
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-show="tableData.length>0"
@ -75,7 +86,7 @@
style="margin-top:15px;text-align: center"
>
</el-pagination>
<chart-detail ref="chartDetail"/>
</el-card>
</template>
@ -84,10 +95,11 @@
import BarChart from './BarChart'
import {getStackNameList, getClusterNameList, getClusterDataInfoList} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import ChartDetail from "./ChartDetail.vue";
export default {
name:'DzjkSbjkDtdc',
mixins:[getQuerySiteId],
components:{BarChart},
components:{BarChart, ChartDetail},
data() {
return {
loading:false,
@ -102,6 +114,11 @@ export default {
}
},
methods:{
//查看表格行图表
chartDetail(row){
const { clusterDeviceId, deviceId} = row,{siteId} = this
this.$refs.chartDetail.initChart({siteId,clusterDeviceId,deviceId})
},
// 分页
handleSizeChange(val) {
this.pageSize = val;

View File

@ -1,7 +1,7 @@
<template>
<div>
<syzb/>
<!-- <syzb/>-->
<dlzb/>
</div>
</template>