<template>
|
<flex-layout>
|
<div class="content_header" slot="header">
|
<three-btn @click="goSelect">重选文件</three-btn>
|
<three-btn @click="exportExcel">导出</three-btn>
|
<div class="summary">
|
<div class="summary-item">记录开始时间:<span>{{ summary.testStartTime }}</span></div>
|
<div class="summary-item">测试类型:<span>{{ summary.testType }}</span></div>
|
<div class="summary-item">正极绝缘电阻:<span>{{ summary.PosInsRes }}KΩ</span></div>
|
<div class="summary-item">负极绝缘电阻:<span>{{ summary.NegInsRes }}KΩ</span></div>
|
</div>
|
</div>
|
<div class="main">
|
<div class="flex-row">
|
<div class="flex-row-inner contain-flex-column">
|
<div class="item">
|
<flex-box class="item-inner" size="mini" title="组端电压折线图">
|
<normal-lines id="groupVol" ref="groupVol" unit="V"></normal-lines>
|
</flex-box>
|
</div>
|
<div class="item">
|
<flex-box class="item-inner" size="mini" title="电池电流折线图">
|
<normal-lines id="groupCurr" ref="groupCurr" unit="A"></normal-lines>
|
</flex-box>
|
</div>
|
</div>
|
</div>
|
<div class="flex-row">
|
<div class="flex-row-inner contain-flex-column">
|
<div class="item">
|
<flex-box class="item-inner" size="mini" title="单体电压折线图">
|
<normal-lines id="vol" ref="vol" unit="V"></normal-lines>
|
</flex-box>
|
</div>
|
<div class="item">
|
<flex-box class="item-inner" size="mini" :title="optsTitle">
|
<div slot="tools" class="chart-tools-wrapper">
|
<el-select
|
v-model="chartType"
|
size="mini"
|
@change="changeChartType"
|
>
|
<el-option
|
v-for="item in chartTypes"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
<normal-lines id="other" ref="other"></normal-lines>
|
</flex-box>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 导出用的图表 可变的那组图 -->
|
<div class="hideContain">
|
<normal-lines id="hideChart" ref="hideChart"></normal-lines>
|
</div>
|
</flex-layout>
|
</template>
|
|
<script>
|
import NormalLines from "@/components/myCharts/NormalLines";
|
import FlexBox from "@/components/FlexBox";
|
import ThreeBtn from "@/components/ThreeBtn";
|
import axios from "@/assets/js/axios";
|
const dataType = {
|
0xfd: "放电",
|
0xfc: "充电",
|
0xfb: "普通数据",
|
};
|
|
export default {
|
name: "",
|
components: {
|
NormalLines,
|
FlexBox,
|
ThreeBtn,
|
},
|
data() {
|
let info = this.$route.query.data;
|
let { fboData, fboDataStart } = info;
|
let lastRecord = fboData[fboData.length - 1];
|
let chartTypes = [
|
{
|
label: "环境温度",
|
value: "tempEnvi",
|
},
|
{
|
label: "环境湿度",
|
value: "humiEnvi",
|
}
|
];
|
let capTest = fboDataStart.DataType == 0xfd || fboDataStart.DataType == 0xfc;
|
return {
|
info,
|
capTest,
|
chartType: capTest ? "testCap" : "tempEnvi",
|
chartTypes: capTest ? [
|
{
|
label: "测试容量",
|
value: "testCap",
|
},
|
...chartTypes
|
] : [...chartTypes],
|
testCapOption: null,
|
tempEnviOption: null,
|
humiEnviOption: null,
|
summary: {
|
testStartTime: fboDataStart.testStartTime,
|
testType: dataType[fboDataStart.DataType],
|
PosInsRes: lastRecord.PosInsRes,
|
NegInsRes: lastRecord.NegInsRes,
|
},
|
optsTitle: capTest ? '测试容量拆线图' : '环境温度折线图'
|
};
|
},
|
methods: {
|
formatData() {
|
let { fboData, fboDataStart, fboDataStop } = this.info;
|
console.log(fboData, fboDataStart, fboDataStop, "=====data?");
|
let monCount = fboDataStart.BattGroup;
|
let times = [],
|
groupVol = [],
|
groupCurr = [],
|
testCap = [],
|
// actualCap = [],
|
// residualCap = [],
|
// residualTime = [],
|
// PosInsRes = [],
|
// NegInsRes = [],
|
tempEnvi = [],
|
humiEnvi = [],
|
SingleVol = [];
|
for (let i = 0, j = monCount; i < j; i++) {
|
SingleVol[i] = {
|
name: "#" + (i + 1) + "电压",
|
type: "line",
|
symbolSize: 0,
|
sampling: "average",
|
data: [],
|
};
|
}
|
|
for (let i = 0, j = fboData.length; i < j; i++) {
|
let item = fboData[i];
|
let testtime = item.m_TestTime;
|
let hour = testtime.hour > 9 ? testtime.hour : "0" + testtime.hour;
|
let minute =
|
testtime.minute > 9 ? testtime.minute : "0" + testtime.minute;
|
let second =
|
testtime.second > 9 ? testtime.second : "0" + testtime.second;
|
let time = "" + hour + ":" + minute + ":" + second;
|
// 时间
|
times.push(time);
|
// 总电压
|
groupVol.push(item.SumVoltage);
|
// 总电流
|
groupCurr.push(item.SumCurrent);
|
// 测试容量
|
testCap.push(item.testCap);
|
// 实际容量
|
// actualCap.push(item.actualCap);
|
// 剩余容量
|
// residualCap.push(item.residualCap);
|
// 剩余时间
|
// residualTime.push(item.residualTime);
|
// 正极绝缘电阻
|
// PosInsRes.push(item.PosInsRes);
|
// 负极绝缘电阻
|
// NegInsRes.push(item.NegInsRes);
|
// 环境温度
|
tempEnvi.push(item.Temp_Envi);
|
// 环境湿度
|
humiEnvi.push(item.Humi_Envi);
|
// 单体电压
|
for (let m = 0, n = monCount; m < n; m++) {
|
SingleVol[m].data.push(item.SingleVol[m]);
|
}
|
}
|
let groupVolOption = {
|
xData: times,
|
series: [
|
{
|
name: "组端电压",
|
type: "line",
|
symbolSize: 0,
|
sampling: "average",
|
data: groupVol,
|
},
|
],
|
};
|
let currOption = {
|
xData: times,
|
series: [
|
{
|
name: "电流",
|
type: "line",
|
symbolSize: 0,
|
sampling: "average",
|
data: groupCurr,
|
},
|
],
|
};
|
let volOption = {
|
xData: times,
|
series: SingleVol,
|
};
|
let testCapOption = {
|
unit: "AH",
|
xData: times,
|
series: [
|
{
|
name: "测试容量",
|
type: "line",
|
symbolSize: 0,
|
sampling: "average",
|
data: testCap,
|
},
|
],
|
},
|
tempEnviOption = {
|
unit: "℃",
|
xData: times,
|
series: [
|
{
|
name: "环境温度",
|
type: "line",
|
symbolSize: 0,
|
sampling: "lttb",
|
data: tempEnvi,
|
},
|
],
|
},
|
humiEnviOption = {
|
unit: "%",
|
xData: times,
|
series: [
|
{
|
name: "环境湿度",
|
type: "line",
|
symbolSize: 0,
|
sampling: "average",
|
data: humiEnvi,
|
},
|
],
|
};
|
this.testCapOption = testCapOption;
|
this.tempEnviOption = tempEnviOption;
|
this.humiEnviOption = humiEnviOption;
|
|
this.$refs.groupVol.setData(groupVolOption);
|
this.$refs.groupCurr.setData(currOption);
|
this.$refs.vol.setData(volOption);
|
this.$refs.other.setData(this.capTest ? testCapOption : tempEnviOption);
|
// 建立联动
|
this.$G.chartManage.connect(["groupVol", "groupCurr", "vol", "other"]);
|
},
|
changeChartType(v) {
|
let label = this.chartTypes.filter((val) => {return val.value == v})[0].label;
|
this.optsTitle = label + '折线图';
|
this.$refs.other.setData(this[v + "Option"]);
|
},
|
goSelect() {
|
this.$router.push({path: "/selectFile", query: {reselect: 1}});
|
},
|
// 导出报表
|
exportExcel() {
|
// 容量折线图
|
let arr = ["testCap", "tempEnvi", "humiEnvi"];
|
let o_pic = {};
|
arr.forEach((v) => {
|
let option = this[v + "Option"];
|
this.$refs.hideChart.setData(option);
|
o_pic[v] = this.$refs.hideChart.getDataURL();
|
});
|
let params = {
|
filePath: this.info.filePath,
|
groupVol_echart: this.$refs.groupVol.getDataURL(),
|
curr_echart: this.$refs.groupCurr.getDataURL(),
|
vol_echart: this.$refs.vol.getDataURL(),
|
tempEnvi_echart: o_pic.tempEnvi,
|
humiEnvi_echart: o_pic.humiEnvi,
|
};
|
if (this.capTest) {
|
params.cap_echart = o_pic.testCap;
|
}
|
|
let baseURL = axios.defaults.baseURL;
|
baseURL = baseURL ? baseURL : "";
|
var actionUrl = baseURL + "export";
|
this.construtFormSubmit(actionUrl, params);
|
},
|
construtFormSubmit(actionUrl, parms) {
|
var form = document.createElement("form");
|
form.id = "specialGraph";
|
form.style.display = "none";
|
form.action = actionUrl;
|
form.enctype = "multipart/form-data";
|
form.method = "post";
|
document.body.appendChild(form);
|
|
for (var key in parms) {
|
var input = document.createElement("input");
|
input.type = "hidden";
|
input.name = key;
|
input.value = parms[key];
|
form.appendChild(input);
|
}
|
form.submit();
|
document.body.removeChild(form);
|
},
|
},
|
|
mounted() {
|
console.log(this.info, this);
|
if (!this.info || !this.info.fboData) {
|
this.$router.push("/selectFile");
|
} else {
|
this.formatData();
|
}
|
},
|
};
|
</script>
|
|
<style scoped>
|
.main {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.flex-row {
|
flex: 1;
|
position: relative;
|
}
|
.item-inner,
|
.flex-row-inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
.contain-flex-column {
|
display: flex;
|
flex-direction: row;
|
}
|
.item {
|
background: #0d43a7;
|
flex: 1;
|
position: relative;
|
}
|
.content_header {
|
padding: 8px 8px 12px;
|
display: flex;
|
color: #fff;
|
align-items: center;
|
}
|
.summary {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.summary-item {
|
margin-left: 1em;
|
}
|
.summary-item span {
|
color: #ff0;
|
}
|
>>> .three-btn {
|
flex-shrink: 0;
|
}
|
>>> .three-btn + .three-btn {
|
margin-left: 8px;
|
}
|
.item + .item {
|
margin-left: 8px;
|
}
|
.flex-row + .flex-row {
|
margin-top: 8px;
|
}
|
.hideContain {
|
position: absolute;
|
width: 0;
|
height: 0;
|
display: none;
|
}
|
</style>
|
