<template>
|
<div data-name="history-data" class="page">
|
<!-- Top Navbar -->
|
<div class="navbar">
|
<div class="navbar-inner">
|
<div class="left">
|
<a href="#" class="link back">
|
<i class="icon f7-icons">chevron_left</i>
|
</a>
|
</div>
|
<div class="title center">历史-测试数据</div>
|
<div class="right">
|
<a href="#" class="link ac"><i class="icon f7-icons">more_vertical</i></a>
|
</div>
|
</div>
|
</div>
|
<div class="toolbar tabbar toolbar-bottom" id="toolbarRange">
|
<div class="toolbar-inner">
|
<div class="range-slider" id="rangeSlider">
|
<input type="range" min="0" max="100" step="1" value="100">
|
</div>
|
</div>
|
</div>
|
<!-- Scrollable page content -->
|
<div class="page-content" id="vm" :class="{'no-padding-bottom':isNoPaddingBottom}">
|
<div class="tabs tabs-full">
|
<div class="segmented segmented-raised" v-show="isShow">
|
<a class="button tab-link" data-route-tab-id="monVol" href="./">数据表格</a>
|
<a class="button tab-link" data-route-tab-id="commonBar" href="./common-bar/">数据图表</a>
|
</div>
|
<div class="tab" id="monVol">
|
<div class="data-table data-table-border data-table-init" id="dataTbl">
|
<table>
|
<caption style="font-size: 12px">${caption}</caption>
|
<thead>
|
<tr>
|
<th v-for="item in title" :key="item">${item}</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in data" :key="index">
|
<td v-for="(_item, _index) in item" :key="_item" v-html="_item"
|
:class="{'bg-blue': isMax(_item, _index), 'bg-red': isMin(_item, _index)}">
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<div class="tab tab-full-content" id="commonBar">
|
<div class="graph-container" id="commonBarContainer">
|
<div class="graph"></div>
|
</div>
|
</div>
|
<div class="tab tab-full" id="commonLine">
|
<div class="graph-container" id="commonLineContainer">
|
<div class="graph"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style>
|
.page-content.no-padding-bottom {
|
padding-bottom: 0;
|
}
|
.popup .fab[class*="-bottom"] {
|
bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom) + 50px);
|
}
|
.tabs.tabs-full {
|
height: 100%;
|
}
|
.tab.tab-full {
|
height: 100%;
|
background-color: #fff;
|
}
|
.tab.tab-full-content {
|
height: calc(100% - 30px);
|
background-color: #fff;
|
}
|
.graph-container {
|
height: 100%;
|
background-color: #FFFFFF;
|
}
|
.bg-blue {
|
background-color: blue;
|
color: #fff;
|
}
|
.bg-red {
|
background-color: red;
|
color: #fff;
|
}
|
</style>
|
<script>
|
return {
|
data: function() {
|
var params = this.$route.params;
|
//console.log(params);
|
var path = this.$route.path;
|
var cView = app.views.current;
|
return {
|
params: params,
|
path: path,
|
vm: '',
|
rangeSlider: '',
|
data: [],
|
type: 0,
|
commonBar: '',
|
cView: cView,
|
lineGraph:{
|
groupVol: {
|
title: '端电压曲线图',
|
name: ['组端电压', '在线电压'],
|
xData: [],
|
seriesData: []
|
},
|
curr: {
|
title: '电池电流曲线图',
|
name: ['组端电流'],
|
xData: [],
|
seriesData: []
|
},
|
monVol: {
|
title: '单体电压曲线',
|
name: [],
|
xData: [],
|
seriesData: []
|
}
|
|
}
|
}
|
},
|
methods: {
|
searchData: function() {
|
// 定义参数
|
var _this = this;
|
var params = this.params;
|
app.preloader.show();
|
// 请求后台
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'BatttestdataAction!findByInfo',
|
data: "btd.BattGroupId="+params.groupid+"&btd.test_record_count="+params.count,
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
var lineBar = _this.lineBar;
|
_this.data = _this.formatData(data);
|
//console.log(_this.data);
|
_this.setPagesData();
|
if(_this.data.length>0) {
|
var fData = _this.data[0];
|
var battNum = [];
|
// 设置电池编号
|
for(var i=0; i<fData.length; i++) {
|
var num = i+1;
|
battNum.push("#"+num);
|
}
|
|
// 遍历data值
|
var xData = [];
|
// 组端电压
|
var groupVol = _this.lineGraph.groupVol;
|
groupVol.seriesData[0] = [];
|
groupVol.seriesData[1] = [];
|
groupVol.xData = xData;
|
// 电流
|
var curr = _this.lineGraph.curr;
|
curr.seriesData[0] = [];
|
curr.xData = xData;
|
|
// 单体电压
|
var monVol = _this.lineGraph.monVol;
|
monVol.name = battNum;
|
for(var i=0; i<battNum.length; i++) {
|
monVol.seriesData[i] = [];
|
}
|
monVol.xData = xData;
|
// 遍历数组
|
for(var i=0; i<_this.data.length; i++) {
|
var _data = _this.data[i];
|
// 生成x轴数据（测试时长）
|
xData.push(formatSeconds(_data[0].test_timelong));
|
// 设置端电压折线图
|
groupVol.seriesData[0].push(_data[0].group_vol);
|
groupVol.seriesData[1].push(_data[0].online_vol);
|
|
// 电池电流
|
curr.seriesData[0].push(_data[0].test_curr);
|
|
// 电池单体电压
|
for(var k=0; k<monVol.seriesData.length; k++) {
|
monVol.seriesData[k].push(_data[k].mon_vol);
|
}
|
}
|
}
|
|
}
|
},
|
complete: function() {
|
app.preloader.hide();
|
}
|
});
|
},
|
formatData: function(list) {
|
var _this = this;
|
var rs = [];
|
var record = -1;
|
var index = -1;
|
var flag = false;
|
var start_record_num = list[0].record_num;
|
// 遍历结果集
|
for(var i=0;i<list.length;i++){
|
if(list[i].record_num != record){
|
rs[++index] = new Array();
|
|
if(list[i].record_num > start_record_num){
|
flag = true;
|
rs[index] = rs[index-1].slice(0);
|
}
|
record = list[i].record_num;
|
}
|
rs[index][list[i].mon_num-1] = list[i];
|
// 判断是否上一笔
|
if(flag){
|
_this.setArrayVal(list[i],rs[index]);
|
flag = false;
|
}
|
}
|
// 返回被格式化后的数组
|
return rs;
|
},
|
setArrayVal: function(obj, list) {
|
if(obj != undefined && list != undefined){
|
for(var i = 0; i<list.length;i++){
|
list[i].group_vol = obj.group_vol;
|
list[i].record_num = obj.record_num;
|
list[i].record_time = obj.record_time;
|
list[i].test_cap = obj.test_cap;
|
list[i].test_curr = obj.test_curr;
|
list[i].test_timelong = obj.test_timelong;
|
}
|
}
|
},
|
getData: function(value) {
|
var arr = [];
|
var data = this.data;
|
if(data.length != 0) {
|
var index = parseInt((data.length-1)*value/100);
|
arr = data[index];
|
}
|
return arr;
|
},
|
changePagesType: function(type) {
|
this.type = type;
|
switch(type) {
|
default:
|
this.setPagesTitle();
|
this.setPagesData();
|
break;
|
}
|
},
|
setPagesTitle: function() {
|
var type = this.type;
|
var vm = this.vm;
|
var title = ['编号', '单体电压（V）', '编号', '单体电压（V）'];
|
switch(type) {
|
case 0:
|
title = ['编号', '单体电压（V）', '编号', '单体电压（V）'];
|
break;
|
case 1:
|
title = ['编号', '实际容量（AH）', '编号', '实际容量（AH）']
|
break;
|
case 2:
|
title = ['编号', '剩余容量（AH）', '编号', '剩余容量（AH）']
|
break;
|
case 3:
|
title = ['编号', '容量百分比（%）', '编号', '容量百分比（%）']
|
break;
|
}
|
vm.setTitle(title);
|
},
|
setPagesData: function() {
|
var vm = this.vm;
|
var type = this.type;
|
var commonBar = this.commonBar;
|
var rangeSlider = this.rangeSlider;
|
var range = rangeSlider.getValue();
|
var arr = this.getData(range);
|
var max_vol=0;
|
var capstd = this.params.capstd;
|
var volstd = this.params.volstd;
|
// 遍历arr获取最大值
|
for(var i=0;i<arr.length;i++){
|
if(arr[i].mon_vol>max_vol){
|
max_vol=arr[i].mon_vol;
|
}
|
}
|
// 根据类型设置页面
|
switch(type) {
|
case 0: // 单体电压
|
var unit = "V";
|
var data = this.formatArr(arr, 'mon_vol');
|
vm.setData(data.tbody);
|
vm.setCaption(data.min, data.max, data.avg, unit);
|
commonBar.setOption({
|
title: '单体电压',
|
subtitle: vm.getCaption(),
|
x: "center",
|
name: "单体电压",
|
seriesData: data.data,
|
yData: data.num,
|
color:[]
|
});
|
break;
|
case 1: // 实际容量
|
var unit = "AH";
|
// 遍历arr向arr中添加属性realcap
|
for(var i=0; i<arr.length; i++) {
|
var _arr = arr[i];
|
var realcap = GetMonomerCap(capstd, GetHourRate(capstd, _arr.test_curr), _arr.test_cap,
|
max_vol, _arr.mon_vol, volstd, CapType_Real);
|
_arr.real_cap = Number(realcap.toFixed(0));
|
}
|
var data = this.formatArr(arr, 'real_cap');
|
vm.setData(data.tbody);
|
vm.setCaption(data.min, data.max, data.avg, unit);
|
commonBar.setOption({
|
title: '单体实际容量',
|
subtitle: vm.getCaption(),
|
x: "center",
|
name: "单体实际容量",
|
seriesData: data.data,
|
yData: data.num,
|
color:[]
|
});
|
break;
|
case 2: // 单体剩余容量
|
var unit = "AH";
|
// 遍历arr向arr中添加属性realcap
|
for(var i=0; i<arr.length; i++) {
|
var _arr = arr[i];
|
var res_cap = GetMonomerCap(capstd, GetHourRate(capstd, _arr.test_curr), _arr.test_cap,
|
max_vol, _arr.mon_vol, volstd, CapType_Rest);
|
_arr.res_cap = Number(res_cap.toFixed(0));
|
}
|
var data = this.formatArr(arr, 'res_cap');
|
vm.setData(data.tbody);
|
vm.setCaption(data.min, data.max, data.avg, unit);
|
commonBar.setOption({
|
title: '单体剩余容量',
|
subtitle: vm.getCaption(),
|
x: "center",
|
name: "单体剩余容量",
|
seriesData: data.data,
|
yData: data.num,
|
color:[]
|
});
|
break;
|
case 3: // 剩余容量百分比
|
var unit = "%";
|
// 遍历arr向arr中添加属性realcap
|
for(var i=0; i<arr.length; i++) {
|
var _arr = arr[i];
|
var real_cap = GetMonomerCap(capstd, GetHourRate(capstd, _arr.test_curr), _arr.test_cap,
|
max_vol, _arr.mon_vol, volstd, CapType_Rest);
|
var real_cap_per = Number(real_cap)*100/capstd;
|
_arr.real_cap_per = Number(real_cap_per.toFixed(0));
|
}
|
var data = this.formatArr(arr, 'real_cap_per');
|
vm.setData(data.tbody);
|
vm.setCaption(data.min, data.max, data.avg, unit);
|
commonBar.setOption({
|
title: '单体容量百分比',
|
subtitle: vm.getCaption(),
|
x: "center",
|
name: "单体容量百分比",
|
seriesData: data.data,
|
yData: data.num,
|
color:[]
|
});
|
break;
|
|
}
|
},
|
formatArr: function(data, key) {
|
var rs = {
|
num: [],
|
tbody: [],
|
data: [],
|
max: 0,
|
min: 0,
|
avg: 0,
|
sum: 0
|
};
|
// 遍历data的值返回指定的格式
|
for(var i=0; i<data.length; i+=2) {
|
var _rs = [];
|
for(var k=i;k<i+2; k++) {
|
if(k>=data.length) {
|
break;
|
}
|
var _data = data[k];
|
var num = k+1;
|
_rs.push("#"+num);
|
_rs.push(_data[key]);
|
rs.num.push("#"+num);
|
rs.data.push(_data[key]);
|
}
|
rs.tbody.push(_rs);
|
}
|
rs.max = Math.max.apply(null, rs.data);
|
rs.min = Math.min.apply(null, rs.data);
|
for(var i=0; i<rs.data.length; i++) {
|
rs.sum += rs.data[i];
|
}
|
rs.avg = (rs.sum/rs.data.length).toFixed(2);
|
return rs;
|
}
|
},
|
on: {
|
pageInit: function() {
|
var cView = this.cView;
|
var _this = this;
|
var vm = this.vm = new Vue({
|
el: '#vm',
|
delimiters: ['${', '}'],
|
data: function() {
|
return {
|
title: ['编号', '单体电压（V）', '编号', '单体电压（V）'],
|
data: [],
|
max: 0,
|
min: 0,
|
caption: '',
|
isShow: true,
|
isNoPaddingBottom: false
|
}
|
},
|
methods: {
|
setTitle: function(title) {
|
this.title = title;
|
},
|
setData: function(data) {
|
this.data = data;
|
},
|
setMax: function(max) {
|
this.max = max;
|
},
|
setMin: function(min) {
|
this.min = min;
|
},
|
setCaption: function(min, max, avg, unit) {
|
if(unit == undefined) {
|
unit = '';
|
}
|
var str = '';
|
str += '最小值：'+min+unit+" ";
|
str += '最大值：'+max+unit+" ";
|
str += '平均值：'+avg+unit;
|
this.caption = str;
|
this.min = min;
|
this.max = max;
|
},
|
getCaption: function() {
|
return this.caption;
|
},
|
isMax: function(value, index) {
|
var rs = false;
|
if(index%2 == 1 && value==this.max) {
|
rs = true;
|
}
|
return rs;
|
},
|
isMin: function(value, index) {
|
var rs = false;
|
if(index%2 == 1 && value==this.min) {
|
rs = true;
|
}
|
return rs;
|
}
|
}
|
});
|
|
// 初始化rangeSlider
|
var rangeSlider = this.rangeSlider = app.range.create({
|
el: '#rangeSlider',
|
on: {
|
change: function() {
|
_this.setPagesData();
|
}
|
}
|
});
|
|
// 饼状图
|
var commonBar = this.commonBar = new BarEcharts('commonBarContainer');
|
|
// 查询数据
|
this.searchData();
|
|
// 点击头部标签进行重置graph大小
|
$(".segmented-raised").on("click", ".tab-link", function() {
|
setTimeout(function() {
|
commonBar.resize();
|
}, 100);
|
});
|
|
// 菜单选项
|
var ac = app.actions.create({
|
buttons:[
|
{
|
text: "单体电压",
|
onClick: function() {
|
setPagesContent(0);
|
}
|
},
|
{
|
text: "单体实际容量",
|
onClick: function() {
|
setPagesContent(1);
|
}
|
},
|
{
|
text: "单体剩余容量",
|
onClick: function() {
|
setPagesContent(2);
|
}
|
},
|
{
|
text: "单体容量百分比",
|
onClick: function() {
|
setPagesContent(3);
|
}
|
},
|
{
|
text: '端电压曲线图',
|
onClick: function() {
|
setPagesLineContent('groupVol');
|
}
|
},
|
{
|
text: '电池电流曲线图',
|
onClick: function() {
|
setPagesLineContent('curr');
|
}
|
},
|
{
|
text: '单体电压曲线图',
|
onClick: function() {
|
setPagesLineContent('monVol');
|
}
|
}
|
]
|
});
|
|
// 设置页面内容
|
function setPagesContent(type) {
|
cView.router.navigate('./');
|
vm.isShow = true;
|
vm.isNoPaddingBottom = false;
|
app.toolbar.show("#toolbarRange");
|
_this.changePagesType(type);
|
}
|
|
// 设置页面的折线图内容
|
var lineBar = this.lineBar;
|
var commonLine = new LineEcharts('commonLineContainer');
|
function setPagesLineContent(type) {
|
vm.isShow = false;
|
app.toolbar.hide("#toolbarRange");
|
vm.isNoPaddingBottom = true;
|
cView.router.navigate('./common-line/');
|
var options = _this.lineGraph[type];
|
setTimeout(function() {
|
commonLine.setOptions(options);
|
}, 100);
|
}
|
|
// 点击ac显示选择内容
|
$$('.ac').click(function() {
|
ac.open();
|
});
|
}
|
}
|
}
|
</script>
|
