<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">
|
<div slot="box-tools" class="box-tools">
|
<el-tooltip class="item" effect="dark" content="实时数据" placement="bottom">
|
<i class="iconfont el-icon-jinru" @click="syncPage"></i>
|
</el-tooltip>
|
</div>
|
<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 v-model="formateBattState" placeholder=""
|
size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">端电压:</div>
|
<div class="table-cell">
|
<el-input v-model="top.group" placeholder=""
|
size="small" :disabled="true" style="min-width:12rem"></el-input>
|
</div>
|
<div class="table-cell text-right w80">电池电流:</div>
|
<div class="table-cell">
|
<el-input v-model="top.curr" placeholder=""
|
size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">测试时长:</div>
|
<div class="table-cell">
|
<el-input v-model="top.test_long" 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 v-model="test_record.value" :options="test_record.list"
|
size="small" placeholder="请选择测试日期"
|
style="width: 100%; min-width:16rem"
|
@change="testRecordChange">
|
<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 v-model="top.test_cap" placeholder=""
|
size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">剩余容量:</div>
|
<div class="table-cell">
|
<el-input v-model="top.re_cap" placeholder=""
|
size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">续航时间:</div>
|
<div class="table-cell">
|
<el-input v-model="top.xuhang" placeholder="" size="small" :disabled="true"></el-input>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-content">
|
<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" :show-label="false"></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>
|
<div class="content-footer" slot="footer">
|
<div class="slider-container">
|
<el-slider v-model="slider" size="small"
|
:format-tooltip="formatTooltip"
|
@input="sliderInput"></el-slider>
|
</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";
|
|
import {
|
searchBattTestData,
|
searchBattTestDataStop,
|
searchHistory
|
} from "../../assets/js/history";
|
|
import {
|
formatSeconds,
|
GetMonomerCap,
|
GetHourRate,
|
getBarNum,
|
} from "../../assets/js/tools";
|
|
// 端信息
|
let allData = {
|
groupVol: [],
|
onlineVol: [],
|
testCurr: [],
|
testTimeLong: [],
|
recordTime: [],
|
testCap: [],
|
dataList: []
|
};
|
// 单体折线信息
|
let monLineData = {
|
vol: []
|
};
|
// 单体柱状信息
|
let monBarData = {
|
vol: []
|
};
|
// 4个图表
|
let groupVolLineChart, currLineChart, monLineChart, monBarChart;
|
|
export default {
|
components: {
|
ContentBox,
|
HomeList,
|
BarChart,
|
LineChart
|
},
|
data() {
|
|
return {
|
data: [],
|
batt: {},
|
top: {
|
state: "", // 电池状态
|
group: "", // 端电压
|
curr: "", // 电池电流
|
test_long: "", // 测试时长
|
test_cap: "", // 测试容量
|
re_cap: "", // 剩余容量
|
xuhang: "" // 续航时长
|
},
|
test_record: {
|
value: [],
|
list: [
|
{
|
value: "herongDischarge",
|
label: "核容放电",
|
children: []
|
},
|
{
|
value: "jianceDischarge",
|
label: "监测放电",
|
children: []
|
},
|
{
|
value: "herongCharge",
|
label: "核容充电",
|
children: []
|
},
|
{
|
value: "jianceCharge",
|
label: "监测充电",
|
children: []
|
}
|
]
|
},
|
slider: 100,
|
testTimeLong: [],
|
battState: {
|
test_type: -100,
|
stop_reason: ''
|
}
|
}
|
},
|
methods: {
|
toggleChange() {
|
console.log(123);
|
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;
|
// 重置页面内容
|
this.init();
|
// 获取充放电记录
|
this.searchBattTestData();
|
},
|
// 初始化页面数据
|
init() {
|
// 初始化充放电记录
|
this.test_record.value = [];
|
this.test_record.list[0].children = [];
|
this.test_record.list[1].children = [];
|
this.test_record.list[2].children = [];
|
this.test_record.list[3].children = [];
|
// 初始化顶部文本框内容
|
this.top = {
|
state: "", // 电池状态
|
group: "", // 端电压
|
curr: "", // 电池电流
|
test_long: "", // 测试时长
|
test_cap: "", // 测试容量
|
re_cap: "", // 剩余容量
|
xuhang: "---" // 续航时长
|
};
|
|
// 初始化电池状态
|
this.battState.test_type = -100;
|
|
// 初始化图表
|
this.initChart();
|
},
|
// 初始化图表和图表数据
|
initChart() {
|
// 拖动条默认值100
|
this.slider = 100;
|
this.testTimeLong = [];
|
|
// 端信息
|
allData = {
|
groupVol: [],
|
onlineVol: [],
|
testCurr: [],
|
testTimeLong: [],
|
recordTime: [],
|
testCap: [],
|
dataList: [],
|
};
|
// 单体折线信息
|
monLineData = {
|
vol: []
|
};
|
// 单体柱状信息
|
monBarData = {
|
vol: []
|
};
|
// 端电压折线图
|
groupVolLineChart = {
|
color: ["#FF0000", "#15E3F3"],
|
title: {
|
show: true,
|
text: "端电压折线图",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
legend: {
|
show: true,
|
data: ["组端电压", "在线电压"],
|
right: 0,
|
orient: "vertical"
|
},
|
series: [
|
{
|
name: "组端电压",
|
data: []
|
},
|
{
|
name: "在线电压",
|
data: []
|
}
|
]
|
};
|
|
// 电池电流折线图
|
currLineChart = {
|
title: {
|
show: true,
|
text: "电池电流折线图",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: [
|
{
|
name: "电池电流",
|
data: []
|
}
|
]
|
};
|
|
// 单体信息折线图
|
monLineChart = {
|
title: {
|
show: true,
|
text: "单体电压",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: []
|
};
|
// 设置折线图
|
this.setLineChart();
|
|
// 单体信息柱状图
|
monBarChart = {
|
title: {
|
show: true,
|
text: "最大值=0V;最小值=0V;平均值=0V",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: [
|
{
|
name: "单体电压",
|
zlevel: 1,
|
data: []
|
}
|
// {
|
// name: '初始单体电压',
|
// barGap: '-100%',
|
// zlevel: 0,
|
// hColor: '#FFFFFF',
|
// data: []
|
// }
|
]
|
};
|
// 设置柱状图
|
this.setBarChart();
|
},
|
// 设置折线图
|
setLineChart() {
|
// 设置端电压折线图
|
this.setGroupVolLineChart();
|
// 设置电池电流折线图
|
this.setCurrLineChart();
|
// 设置单体折线图
|
this.setMonLineChart();
|
// 建立联动
|
this.$G.chartManage.connect(["groupVol", "groupCurr", "monInfo"]);
|
},
|
// 设置端电压折线图
|
setGroupVolLineChart() {
|
// 根据allData.groupVol数据设置groupVolLineChart的值
|
groupVolLineChart.series[0].data = allData.groupVol;
|
groupVolLineChart.series[1].data = allData.onlineVol;
|
// 更新图表
|
this.$refs.groupVol.setOption(groupVolLineChart);
|
},
|
// 设置电池电流折线图
|
setCurrLineChart() {
|
// 根据allData.testCurr数据设置currLineChart的值
|
currLineChart.series[0].data = allData.testCurr;
|
// 更新图表
|
this.$refs.groupCurr.setOption(currLineChart);
|
},
|
// 设置单体折线图
|
setMonLineChart() {
|
// 根据monLineData的值设置monLineChart
|
let dataList = monLineData.vol;
|
monLineChart.series = dataList.map((item, index) => {
|
let monNum = "#" + (index + 1);
|
return {
|
name: monNum,
|
data: item
|
};
|
});
|
// 更新图表
|
this.$refs.monInfo.setOption(monLineChart);
|
},
|
// 设置柱状图
|
setBarChart() {
|
let batt = this.batt;
|
// 根据monBarData的值设置monBarChart
|
let dataList = monBarData.vol;
|
let index = this.getDataIndex(dataList.length, this.slider);
|
if (index != -1) {
|
let data = dataList[index];
|
let batNum = getBarNum(data);
|
monBarChart.title.text = "最大值="+batNum.max+"V;最小值="+batNum.min+"V;平均值="+batNum.avg.toFixed(3)+"V"
|
monBarChart.series[0].data = data;
|
// monBarChart.series[1].data = dataList[0];
|
}
|
// 设置柱状图
|
this.$refs.monBar.setOption(monBarChart);
|
},
|
// 查询测试信息
|
searchBattTestData() {
|
let batt = this.batt;
|
// 开启等待框
|
let loading = this.$layer.loading(1);
|
searchBattTestData({
|
num: batt.FBSDeviceId,
|
BattGroupId: batt.BattGroupId
|
})
|
.then(res => {
|
// 关闭等待框
|
this.$layer.close(loading);
|
// 解析数据
|
let rs = JSON.parse(res.data.result);
|
let herongDischarge = []; // 核容放电
|
let herongCharge = []; // 核容充电
|
let jianceDischarge = []; // 监测放电
|
let jianceCharge = []; // 监测充电
|
if (rs.code == 1) {
|
rs.data.forEach(item => {
|
item.value = item.test_starttime;
|
item.label = item.test_starttime;
|
if (item.test_type == 3) {
|
// 测试类型为放电
|
if (item.test_starttype == 3) {
|
// 核容放电
|
herongDischarge.push(item);
|
} else {
|
// 监测放电
|
jianceDischarge.push(item);
|
}
|
} else if (item.test_type == 2) {
|
// 测试类型为充电
|
if (item.test_starttype == 3) {
|
// 核容充电
|
herongCharge.push(item);
|
} else {
|
// 监测充电
|
jianceCharge.push(item);
|
}
|
}
|
});
|
} else {
|
this.$layer.msg("未获取到充放电记录");
|
}
|
// 充放电记录
|
this.test_record.list[0].children = herongDischarge;
|
this.test_record.list[1].children = jianceDischarge;
|
this.test_record.list[2].children = herongCharge;
|
this.test_record.list[3].children = jianceCharge;
|
})
|
.catch(error => {
|
this.$layer.close(loading);
|
console.log(error);
|
});
|
},
|
// 切换测试信息
|
testRecordChange() {
|
let testRecord = this.getTestRecord();
|
// 初始化图表
|
this.initChart();
|
|
// 获取顶部电池组信息
|
this.searchBattTestDataStop(
|
testRecord.BattGroupId,
|
testRecord.test_record_count
|
);
|
|
// 查询历史数据
|
this.searchHistory(testRecord.BattGroupId, testRecord.test_record_count);
|
},
|
// 查询顶部信息
|
searchBattTestDataStop(BattGroupId, count) {
|
searchBattTestDataStop(BattGroupId, count).then(res => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
let data = rs.data[0];
|
this.top.test_cap = data.test_cap.toFixed(1) + "AH";
|
this.top.test_long = formatSeconds(data.test_timelong);
|
}
|
});
|
},
|
// 查询历史信息
|
searchHistory(BattGroupId, count) {
|
// 开启等待框
|
let loading = this.$layer.loading(1);
|
searchHistory({
|
BattGroupId: BattGroupId,
|
test_record_count: count
|
}).then(res => {
|
// 关闭等待框
|
this.$layer.close(loading);
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
// 数据
|
if (rs.code == 1) {
|
data = rs.data;
|
}
|
// 格式化数据
|
this.formateHisData(data);
|
})
|
.catch(error => {
|
// 关闭等待框
|
this.$layer.close(loading);
|
console.log(error);
|
});
|
},
|
// 格式化历史信息数据
|
formateHisData(data) {
|
let record_time = -1; // 记录时间
|
data.forEach(item => {
|
let mon_num = item.mon_num;
|
// 获取组端电压，在线电压,组端电流的信息和开辟一个单体柱状图
|
if (record_time != item.record_time) {
|
record_time = item.record_time;
|
allData.groupVol.push([record_time, item.group_vol]);
|
allData.onlineVol.push([record_time, item.online_vol]);
|
allData.testCurr.push([record_time, item.test_curr]);
|
allData.recordTime.push(record_time);
|
allData.testTimeLong.push(item.test_timelong);
|
allData.testCap.push(item.test_cap);
|
allData.dataList.push(item);
|
this.testTimeLong.push(item.test_timelong);
|
// 开辟空间
|
monBarData.vol.push([]);
|
}
|
// 单体电压柱状图设置
|
let monBarVol = monBarData.vol[monBarData.vol.length - 1];
|
monBarVol.push(["#" + mon_num, item.mon_vol]);
|
|
// 设置单体折线图信息
|
if (typeof monLineData.vol[mon_num - 1] != "object") {
|
// 开辟空间
|
monLineData.vol[mon_num - 1] = [];
|
}
|
// 获取到需要使用的空间
|
let monLineVol = monLineData.vol[mon_num - 1];
|
monLineVol.push([record_time, item.mon_vol]);
|
});
|
// 设置折线图表
|
this.setLineChart();
|
// 执行滑动事件
|
this.sliderInput();
|
},
|
// 获取测试的信息
|
getTestRecord() {
|
let value = this.test_record.value;
|
// 没有选择充放电记录,返回-1
|
if (value.length == 0) {
|
return -1;
|
}
|
let type = value[0];
|
let time = value[1];
|
let list = this.test_record.list;
|
let result = 0;
|
// 遍历list
|
for (let i in list) {
|
let item = list[i];
|
if (item.value == type) {
|
for (let j in item.children) {
|
let child = item.children[j];
|
if (child.value == time) {
|
result = child;
|
break;
|
}
|
}
|
break;
|
}
|
}
|
// 设置电池状态
|
this.battState.test_type = result.test_type;
|
this.battState.stop_reason = result.test_stoptype_reason;
|
// 返回结果集
|
return result;
|
},
|
// 格式化滑块显示的内容
|
formatTooltip(value) {
|
let testTimeLong = this.testTimeLong;
|
let index = this.getDataIndex(testTimeLong.length, value);
|
let test_long = formatSeconds(0);
|
if (index != -1) {
|
test_long = formatSeconds(testTimeLong[index]);
|
}
|
this.top.test_long = test_long;
|
return test_long;
|
},
|
// 拖动滑块时触发
|
sliderInput() {
|
// 设置头部信息
|
this.setTopData();
|
|
// 设置柱状图
|
this.setBarChart();
|
},
|
// 设置顶部文本框的数据
|
setTopData() {
|
let batt = this.batt;
|
// 组端电压和在线电压
|
let groupVol = allData.groupVol;
|
let onlineVol = allData.onlineVol;
|
let testCurr = allData.testCurr;
|
let testCap = allData.testCap;
|
let monVols = monBarData.vol;
|
let dataList = allData.dataList;
|
let index = this.getDataIndex(groupVol.length, this.slider);
|
if (index != -1) {
|
this.top.group =
|
"在线:" +
|
onlineVol[index][1].toFixed(2) +
|
"V；组端:" +
|
groupVol[index][1].toFixed(2) +
|
"V";
|
this.top.curr = testCurr[index][1].toFixed(1) + "A";
|
this.top.test_cap = testCap[index].toFixed(1) + "AH";
|
// 剩余容量
|
let monVol = monVols[index];
|
let list = dataList[index];
|
let avg_curr = list.test_timelong>0?list.test_cap*3600/list.test_timelong:list.test_curr;
|
let batNum = getBarNum(monVol);
|
let over_cap = GetMonomerCap(batt.MonCapStd, GetHourRate(batt.MonCapStd, avg_curr),
|
list.test_cap, batNum.max, batNum.min,batt.MonVolStd, 0);
|
this.top.re_cap = over_cap.toFixed(1)+'AH';
|
}
|
},
|
// 根据百分比获取显示的数据的笔数
|
getDataIndex(num, percent) {
|
return Math.floor(num * percent / 100) - 1;
|
},
|
// 向父级发送同步页面的指令
|
syncPage() {
|
let batt = this.batt;
|
let search="?province="+batt.StationName1
|
+"&city="+batt.StationName2+"&county="+batt.StationName5
|
+"&home="+batt.StationName3+"&batt="+batt.BattGroupId;
|
window.parent.postMessage({
|
cmd: "syncPage",
|
params: {
|
pageInfo: {
|
label: '实时监测',
|
name: 'realTime',
|
src: '#/real-time'+search,
|
closable: true,
|
}
|
},
|
}, "*");
|
}
|
},
|
computed: {
|
battFullName() {
|
let batt = this.batt;
|
if (batt.StationName && batt.BattGroupName) {
|
return batt.StationName + "-" + batt.BattGroupName;
|
}
|
return "电池组全称";
|
},
|
formateBattState() {
|
let battState = this.battState;
|
if(battState.test_type == 3) {
|
return "放电(终止原因："+battState.stop_reason+")";
|
}else if(battState.test_type == 2) {
|
return "充电"
|
}else {
|
return "";
|
}
|
}
|
},
|
mounted() {
|
// 初始化图表
|
this.initChart();
|
// 屏幕缩放时触发
|
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-x: hidden;
|
}
|
.slider-container {
|
padding-left: 16px;
|
padding-right: 16px;
|
overflow: hidden;
|
}
|
.box-tools {
|
line-height: 32px;
|
}
|
.box-tools .iconfont {
|
font-size: 20px;
|
}
|
.box-tools .iconfont:hover {
|
cursor: pointer;
|
color: #cfcfcf;
|
}
|
.box-tools .iconfont:active {
|
color: #FF0000;
|
}
|
</style>
|
