<template>
|
<flex-layout direction="row" class="page-history">
|
<home-list slot="header"
|
@toggleChange="toggleChange"
|
@leaf-click="leafClick"></home-list>
|
<content-box style="margin-left: 4px; margin-right: 4px;" :title="battFullName">
|
<flex-layout>
|
<div class="content-header" slot="header">
|
<div class="table-layout">
|
<div class="table-row">
|
<div class="table-cell text-right w80">电池状态:</div>
|
<div class="table-cell">
|
<el-input placeholder="" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">端电压:</div>
|
<div class="table-cell">
|
<el-input placeholder="" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">电池电流:</div>
|
<div class="table-cell">
|
<el-input placeholder="" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">测试时长:</div>
|
<div class="table-cell">
|
<el-input placeholder="" size="small" :disabled="true"></el-input>
|
</div>
|
</div>
|
<div class="table-row">
|
<div class="table-cell text-right w80">测试日期:</div>
|
<div class="table-cell">
|
<el-cascader :options="list"
|
size="small" placeholder="请选择测试日期"
|
style="width: 100%; min-width:16rem">
|
<template slot-scope="{ node, data }">
|
<span>{{ data.label }}</span>
|
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
</template>
|
</el-cascader>
|
</div>
|
<div class="table-cell text-right w80">测试容量:</div>
|
<div class="table-cell">
|
<el-input placeholder="" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">剩余容量:</div>
|
<div class="table-cell">
|
<el-input placeholder="" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">续航时间:</div>
|
<div class="table-cell">
|
<el-input placeholder="" size="small" :disabled="true"></el-input>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-content">
|
<div class="history-list">
|
|
</div>
|
<div class="flex-box-list">
|
<div class="flex-box">
|
<line-chart ref="groupVol" id="groupVol" unit="V"></line-chart>
|
</div>
|
<div class="flex-box">
|
<bar-chart ref="monBar" id="monBar"></bar-chart>
|
</div>
|
</div>
|
<div class="flex-box-list">
|
<div class="flex-box">
|
<line-chart ref="groupCurr" id="groupCurr" unit="A"></line-chart>
|
</div>
|
<div class="flex-box">
|
<line-chart ref="monInfo" id="monInfo"></line-chart>
|
</div>
|
</div>
|
</div>
|
</flex-layout>
|
</content-box>
|
</flex-layout>
|
</template>
|
|
<script>
|
import ContentBox from '../../components/ContentBox'
|
import HomeList from './HomeList'
|
import BarChart from '../../components/chart/BarChart'
|
import LineChart from '../../components/chart/LineChart'
|
|
export default {
|
components: {
|
ContentBox,
|
HomeList,
|
BarChart,
|
LineChart,
|
},
|
data() {
|
return {
|
battFullName: '电池组全称',
|
data: [],
|
batt: {},
|
list: [
|
{
|
value: 'herongDischarge',
|
label: '核容放电',
|
children: []
|
},
|
{
|
value: 'herongCharge',
|
label: '核容充电',
|
children: []
|
},
|
{
|
value: 'jianceDischarge',
|
label: '监测放电',
|
children: []
|
},
|
{
|
value: 'jianceCharge',
|
label: '监测充电',
|
children: []
|
},
|
]
|
}
|
},
|
methods: {
|
toggleChange() {
|
this.resize();
|
},
|
resize() {
|
this.$G.chartManage.resize('groupVol');
|
this.$G.chartManage.resize('monBar');
|
this.$G.chartManage.resize('groupCurr');
|
this.$G.chartManage.resize('monInfo');
|
},
|
leafClick(data) {
|
this.batt = data;
|
// 查询历史数据
|
}
|
},
|
mounted() {
|
// 屏幕缩放时触发
|
window.addEventListener('resize', ()=>{
|
this.resize();
|
});
|
}
|
}
|
</script>
|
|
<style scoped>
|
.page-history {
|
color: #FFFFFF;
|
}
|
.table-cell.text-right {
|
font-size: 14px;
|
}
|
.table-row .table-cell {
|
padding-top: 12px;
|
}
|
.page-content {
|
position: relative;
|
padding-top: 8px;
|
padding-bottom: 2px;
|
box-sizing: border-box;
|
height: 100%;
|
}
|
.history-list {
|
position: absolute;
|
top: 8px;
|
left: 24px;
|
z-index: 99;
|
}
|
.flex-box-list {
|
display: flex;
|
flex-direction: row;
|
height: 50%;
|
box-sizing: border-box;
|
}
|
.page-content .flex-box {
|
flex:1;
|
overflow: hidden;
|
}
|
</style>
|
