单体电池表格曲线图,统计报表概览统计没有数据返回 隐藏
This commit is contained in:
@ -60,6 +60,15 @@ export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId,
|
|||||||
method: 'get'
|
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) {
|
export function getCoolingDataList(siteId) {
|
||||||
return request({
|
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"
|
prop="soh"
|
||||||
label="SOH(%)">
|
label="SOH(%)">
|
||||||
</el-table-column>
|
</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-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
v-show="tableData.length>0"
|
v-show="tableData.length>0"
|
||||||
@ -75,7 +86,7 @@
|
|||||||
style="margin-top:15px;text-align: center"
|
style="margin-top:15px;text-align: center"
|
||||||
>
|
>
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
|
<chart-detail ref="chartDetail"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -84,10 +95,11 @@
|
|||||||
import BarChart from './BarChart'
|
import BarChart from './BarChart'
|
||||||
import {getStackNameList, getClusterNameList, getClusterDataInfoList} from '@/api/ems/dzjk'
|
import {getStackNameList, getClusterNameList, getClusterDataInfoList} from '@/api/ems/dzjk'
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
|
import ChartDetail from "./ChartDetail.vue";
|
||||||
export default {
|
export default {
|
||||||
name:'DzjkSbjkDtdc',
|
name:'DzjkSbjkDtdc',
|
||||||
mixins:[getQuerySiteId],
|
mixins:[getQuerySiteId],
|
||||||
components:{BarChart},
|
components:{BarChart, ChartDetail},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading:false,
|
loading:false,
|
||||||
@ -102,6 +114,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
//查看表格行图表
|
||||||
|
chartDetail(row){
|
||||||
|
const { clusterDeviceId, deviceId} = row,{siteId} = this
|
||||||
|
this.$refs.chartDetail.initChart({siteId,clusterDeviceId,deviceId})
|
||||||
|
},
|
||||||
// 分页
|
// 分页
|
||||||
handleSizeChange(val) {
|
handleSizeChange(val) {
|
||||||
this.pageSize = val;
|
this.pageSize = val;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<syzb/>
|
<!-- <syzb/>-->
|
||||||
<dlzb/>
|
<dlzb/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user