213 lines
6.5 KiB
Vue
213 lines
6.5 KiB
Vue
|
||
<template>
|
||
<div v-loading="loading">
|
||
<!-- 搜索栏-->
|
||
<el-form :inline="true" class="select-container">
|
||
<el-form-item label="电池堆">
|
||
<el-select v-model="search.stackId" placeholder="请选择" @change="changeStackId">
|
||
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in stackOptions" :key="index+'dcdOptions'"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="电池簇">
|
||
<el-select v-model="search.clusterId" :no-data-text="!search.stackId && stackOptions.length > 0 ? '请先选择电池堆':'无数据'" placeholder="请选择" :loading="clusterloading" loading-text="正在加载数据">
|
||
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in clusterOptions" :key="index+'dccOptions'"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="时间选择">
|
||
<el-date-picker
|
||
v-model="search.date"
|
||
type="date"
|
||
:picker-options="pickerOptions"
|
||
:default-value="defaultDate">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="onReset" native-type="button">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="margin:30px 0;">
|
||
<!--表格-->
|
||
<el-table
|
||
class="common-table"
|
||
:data="tableData"
|
||
stripe
|
||
max-height="500"
|
||
style="width: 100%;margin-top:25px;">
|
||
<el-table-column
|
||
prop="statisDate"
|
||
width="100"
|
||
label="时间">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="maxTemp"
|
||
label="最高温（℃）">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="maxTempId"
|
||
label="单体ID">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="minTemp"
|
||
label="最低温（℃）">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="minTempId"
|
||
label="单体ID">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="maxVoltage"
|
||
label="最高压（V）">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="maxVoltageId"
|
||
label="单体ID">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="minVoltage"
|
||
label="最低压（V）">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="minVoltageId"
|
||
label="单体ID">
|
||
</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>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import {getStackNameList, getClusterNameList, getClusterData} from '@/api/ems/dzjk'
|
||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||
import {formatDate} from "@/utils";
|
||
export default {
|
||
name:'DzjkTjbbDcwd',
|
||
mixins:[getQuerySiteId],
|
||
data() {
|
||
return {
|
||
pickerOptions:{
|
||
disabledDate(time) {
|
||
return time.getTime() > Date.now();
|
||
},
|
||
},
|
||
defaultDate:'',//默认展示的时间
|
||
loading:false,
|
||
clusterloading:false,
|
||
search:{stackId:'',clusterId:'',date:''},
|
||
stackOptions:[],//{id:'',deviceName:''}
|
||
clusterOptions:[],//{id:'',deviceName:''}
|
||
tableData:[],
|
||
pageSize:10,//分页栏当前每个数据总数
|
||
pageNum:1,//分页栏当前页数
|
||
totalSize:0,//table表格数据总数
|
||
}
|
||
},
|
||
methods:{
|
||
// 分页
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
this.$nextTick(()=>{
|
||
this.getTableData()
|
||
})
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.pageNum = val
|
||
this.$nextTick(()=>{
|
||
this.getTableData()
|
||
})
|
||
},
|
||
// 搜索
|
||
onSearch(){
|
||
this.pageNum =1//每次搜索从1开始搜索
|
||
this.getTableData()
|
||
},
|
||
// 重置
|
||
onReset(){
|
||
this.search.date=''
|
||
this.pageNum = 1
|
||
this.getTableData()
|
||
},
|
||
changeStackId(val){
|
||
if(val){
|
||
this.search.clusterId=''
|
||
this.getClusterList()
|
||
} else {
|
||
this.search.clusterId=''
|
||
this.clusterOptions=[]
|
||
}
|
||
},
|
||
//表格数据
|
||
async getTableData(){
|
||
const {stackId,clusterId,date} =this.search
|
||
const {siteId,pageNum,pageSize}=this
|
||
if(!stackId) return
|
||
this.loading=true;
|
||
await getClusterData({dateTime:formatDate(date),stackId,clusterId,siteId,pageNum,pageSize}).then(response => {
|
||
this.tableData=response?.rows || [];
|
||
this.totalSize = response?.total || 0
|
||
}).finally(()=>{
|
||
this.loading=false;
|
||
})
|
||
},
|
||
async getStackList(){
|
||
await getStackNameList(this.siteId).then(response => {
|
||
const data = JSON.parse(JSON.stringify(response?.data || []))
|
||
this.stackOptions = data
|
||
this.search.stackId = data.length > 0 ? data[0].id : ''
|
||
})
|
||
},
|
||
async getClusterList(){
|
||
const currentStackId = String(this.search.stackId || '')
|
||
if (!currentStackId) {
|
||
this.clusterOptions = []
|
||
this.search.clusterId = ''
|
||
return
|
||
}
|
||
this.clusterloading =true
|
||
await getClusterNameList({stackDeviceId: this.search.stackId, siteId: this.siteId}).then(response => {
|
||
if (String(this.search.stackId || '') !== currentStackId) return
|
||
const data = JSON.parse(JSON.stringify(response?.data || []))
|
||
this.clusterOptions = data
|
||
this.search.clusterId = data.length > 0 ? data[0].id : ''
|
||
}).finally(() => {this.clusterloading =false})
|
||
},
|
||
async init(){
|
||
this.loading = true
|
||
this.search={stackId:'',clusterId:'',date:''}
|
||
this.stackOptions=[]//{id:'',deviceName:''}
|
||
this.clusterOptions=[]//{id:'',deviceName:''}
|
||
this.tableData=[]
|
||
// 只有页面初次加载或切换站点的时候调用电池堆列表，其他情况不需要
|
||
await this.getStackList()
|
||
if(this.search.stackId){
|
||
await this.getClusterList()
|
||
await this.onReset()
|
||
}else{
|
||
this.loading = false
|
||
}
|
||
|
||
|
||
}
|
||
},
|
||
mounted(){
|
||
this.defaultDate = new Date()
|
||
}
|
||
}
|
||
</script>
|