单体电池表格曲线图,统计报表概览统计没有数据返回 隐藏
This commit is contained in:
@ -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({
|
||||
|
||||
150
src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
Normal file
150
src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
Normal 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>
|
||||
@ -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;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<syzb/>
|
||||
<!-- <syzb/>-->
|
||||
<dlzb/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user