<style scoped>
|
.graph-container {
|
background-color: #FFFFFF;
|
}
|
</style>
|
<template>
|
<div data-name="data-group-info" 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 toggle-my-modal" data-href="#myModal">
|
<i class="icon f7-icons">menu</i>
|
</a>
|
</div>
|
</div>
|
</div>
|
<!-- Additional "tabbar-labels" class -->
|
<div class="toolbar tabbar-labels toolbar-bottom">
|
<div class="toolbar-inner">
|
<a href="#tab-1" class="tab-link tab-link-active">
|
<!-- Different icons for iOS and MD themes -->
|
<i class="icon f7-icons">keyboard_fill</i>
|
<span class="tabbar-label">数据表格</span>
|
</a>
|
<a href="#tab-2" class="tab-link">
|
<!-- Different icons for iOS and MD themes -->
|
<i class="icon f7-icons">graph_square_fill</i>
|
<span class="tabbar-label">数据折线图</span>
|
</a>
|
</div>
|
</div>
|
<!-- Scrollable page content -->
|
<div class="page-content" id="vContent">
|
<div class="tabs">
|
<div class="tab tab-active" id="tab-1">
|
<div class="card data-table data-table-collapsible data-table-init">
|
<div class="card-content">
|
<table>
|
<thead>
|
<tr>
|
<th class="numeric-cell" v-for="thead in dataTbl.theads" v-bind:key="thead">${thead}</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, key) in dataTbl.tbody">
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[0]">${item.data.BattGroupIdPlus}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[1]">${item.data.StationName}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[2]">${item.data.BattGroupName}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[3]">${item.tmodel.data[0].test_starttime}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[4]">节能放电</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[5]">${item.tmodel.data[0].test_curr.toFixed(1)}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[6]">${formatSeconds(item.tmodel.data[0].test_timelong)}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[7]">${item.tmodel.data[0].test_cap.toFixed(1)}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[8]">${item.tmodel.data[0].min_monnum}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[9]">${item.tmodel.data[0].min_monvol}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[10]">${item.tmodel.data[0].group_vol.toFixed(0)}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[11]">${item.tmodel.data[0].mon_vol.toFixed(0)}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[12]">${getCapPer(item.tmodel.data[0].group_vol, item.data.MonCapStd)}</td>
|
<td class="numeric-cell" ></td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div class="tab" id="tab-2">
|
<div class="graph-container" id="battDataLineGraph">
|
<div class="graph"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 左侧面板 -->
|
<div class="my-modal" id="myModal">
|
<div class="my-modal-rel">
|
<div class="my-modal-bg my-modal-close"></div>
|
<div class="my-modal-container">
|
<div class="my-modal-rel">
|
<div class="my-modal-header">
|
<div class="title center">条件筛选</div>
|
</div>
|
<div class="my-modal-content">
|
<div class="list no-margin">
|
<ul>
|
<li>
|
<div class="item-content item-input">
|
<div class="item-inner">
|
<div class="item-title item-label">电池组名称</div>
|
<div class="item-input-wrap">
|
<select v-model="modal.binf.BattGroupId">
|
<option v-for="item in battGroup.res" v-bind:value="item.value">${item.text}</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<div class="item-content item-input">
|
<div class="item-inner">
|
<div class="item-title item-label">电池测试时间段（起始）</div>
|
<div class="item-input-wrap">
|
<input type="text" placeholder=""
|
readonly="readonly"
|
v-model="tmp.record_time"
|
id="recordTime"/>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<div class="item-content item-input">
|
<div class="item-inner">
|
<div class="item-title item-label">电池测试时间段（结束）</div>
|
<div class="item-input-wrap">
|
<input type="text"
|
placeholder=""
|
readonly="readonly"
|
v-model="tmp.record_time1"
|
id="recordTime1"/>
|
</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="my-modal-footer">
|
<div class="row">
|
<button class="col button button-fill" v-on:click="searchData()">确定</button>
|
<button class="col button button-fill color-orange my-modal-close">关闭</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
return {
|
data: function() {
|
var params = this.$route.params;
|
var cView = app.views.current;
|
var paramsUrl = getUrlStr({
|
province: params.province,
|
city: params.city,
|
county: params.county,
|
home: params.home,
|
fbsid: params.fbsid,
|
stationid: params.stationid
|
});
|
return {
|
params: params,
|
myModal: '',
|
vue: {
|
vContent: ''
|
},
|
page: {
|
baseUrl: '/data/'+paramsUrl,
|
pages: {
|
pageSize:10, //每页的行数
|
pageCurr:1, //当前页码数
|
pageAll:0,
|
}
|
},
|
lineGraph: ''
|
};
|
},
|
on: {
|
pageInit:function() {
|
var pageThis = this;
|
var params = this.params;
|
var today = new Date().format('yyyy-MM-dd');
|
// 定义vue内容
|
var vContent = this.vue.vContent = new Vue({
|
el: '#vContent',
|
delimiters: ['${', '}'],
|
data: {
|
tmp: {
|
record_time: "2000-01-01",
|
record_time1: today
|
},
|
modal: {
|
page:{
|
pageCurr: 1,
|
pageSize: 50,
|
},
|
binf:{
|
StationName1: params.province,
|
StationName2: params.city,
|
StationName5: params.county,
|
StationName: params.home,
|
BattGroupId: 0,
|
BattProducer: null,
|
MonVolStd: null,
|
MonCapStd: null,
|
BattGroupName1: null,
|
BattProductDate: "2000-01-01 00:00:00",
|
BattProductDate1: today+' 23:59:59',
|
BattInUseDate: "2000-01-01 00:00:00",
|
BattInUseDate1: today+' 23:59:59',
|
},
|
uinf:{
|
UName: null
|
},
|
tdata:{
|
test_type: 3,
|
record_time: "2000-01-01 00:00:00",
|
record_time1: today+' 23:59:59',
|
test_starttype: 3,
|
},
|
mainf:{
|
remark: 100,
|
maint_done_time: "2000-01-01 00:00:00",
|
maint_done_time1: today+' 23:59:59'
|
}
|
},
|
myModal: '',
|
dataTbl: {
|
theads: ['电池组ID-序号', '机房名称', '电池组名称', '测试日期', '测试类型', '测试电流',
|
'测试时长（H:M:S）', '测试容量（AH）', '最低单体编号', '最低单体电压（V）', '实际容量（AH）',
|
'剩余容量（AH）', '容量百分比'],
|
tbody: []
|
},
|
battGroupData: []
|
},
|
created: function() {
|
var vm = this;
|
bus.$on('searchData', function(data) {
|
vm.modal = data;
|
vm.searchData();
|
});
|
},
|
watch:{
|
tmp: {
|
handler: function(nName, oName) {
|
console.log(nName);
|
console.log(oName);
|
},
|
deep: true
|
}
|
},
|
methods: {
|
searchData: function() {
|
var searchParams = this.modal;
|
var _self = this;
|
var lineGraphOpts={
|
lname: [],
|
name: [],
|
xData: [],
|
seriesData: []
|
};
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'Batt_Maint_DealarmAction_serchLow',
|
data: 'result='+JSON.stringify(searchParams),
|
dataType: 'json',
|
beforeSend: function() {
|
app.preloader.show();
|
_self.dataTbl.tbody=[];
|
},
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
// 初始化折线图配置
|
lineGraphOpts.seriesData = [];
|
lineGraphOpts.lname = [];
|
lineGraphOpts.xData = [];
|
lineGraphOpts.name = [];
|
|
if(rs.code == 1 && rs.data.length>0) {
|
var data = rs.data;
|
var battgroupid = 0;
|
var order_num = 0;
|
var xData = [];
|
var battData = new Array();
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
if(_data.tmodel.code == 0){
|
continue;
|
}
|
// 设置数据
|
if(battgroupid != data[i].data.BattGroupId){
|
order_num = 0;
|
battData = new Array(); // 初始化battData
|
battgroupid = data[i].data.BattGroupId;
|
lineGraphOpts.lname.push(data[i].data.BattGroupId);
|
lineGraphOpts.name.push(data[i].data.BattGroupName);
|
lineGraphOpts.seriesData.push(battData);
|
}
|
order_num++;
|
for(var j = 0;j<data[i].tmodel.data.length;j++){
|
var _temp = []; // 存储测试时间和实际容量
|
var tmodel = data[i].tmodel.data[j];
|
_data.data.BattGroupIdPlus = _data.data.BattGroupId+"-"+(order_num);
|
|
// 添加测试时间和实际容量
|
_temp.push(tmodel.test_starttime)
|
_temp.push(tmodel.group_vol.toFixed(0));
|
battData.push(_temp);
|
// 添加所有的时间点
|
xData.push(tmodel.test_starttime);
|
}
|
}
|
lineGraphOpts.xData = _self.unique(xData).sort(function(a,b){
|
var d1=new Date(a.replace(/-/g,"/"));
|
var d2=new Date(b.replace(/-/g,"/"));
|
return d1-d2;
|
});
|
_self.dataTbl.tbody = data;
|
_self.myModal.hide();
|
lineGraph.setOption(lineGraphOpts, $('#vContent'));
|
}else {
|
// Create center toast
|
var toastCenter = app.toast.create({
|
text: '未查询到结果',
|
position: 'center',
|
closeTimeout: 2000,
|
});
|
toastCenter.open();
|
}
|
},
|
complete: function() {
|
app.preloader.hide();
|
}
|
});
|
},
|
getCapPer(vol, MonCapStd) { // 容量百分比
|
return (vol*100/MonCapStd).toFixed(0)+"%"
|
},
|
unique: function(arr) {
|
var result = [], hash = {};
|
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
|
if (!hash[elem]) {
|
result.push(elem);
|
hash[elem] = true;
|
}
|
}
|
return result;
|
}
|
}
|
});
|
|
|
var myModalVm = new Vue({
|
el: '#myModal',
|
delimiters: ['${', '}'],
|
data: {
|
tmp: {
|
record_time: "2000-01-01",
|
record_time1: today
|
},
|
modal: {
|
page:{
|
pageCurr: 1,
|
pageSize: 50,
|
},
|
binf:{
|
StationName1: params.province,
|
StationName2: params.city,
|
StationName5: params.county,
|
StationName: params.home,
|
BattGroupId: 0,
|
BattProducer: null,
|
MonVolStd: null,
|
MonCapStd: null,
|
BattGroupName1: null,
|
BattProductDate: "2000-01-01 00:00:00",
|
BattProductDate1: today+' 23:59:59',
|
BattInUseDate: "2000-01-01 00:00:00",
|
BattInUseDate1: today+' 23:59:59',
|
},
|
uinf:{
|
UName: null
|
},
|
tdata:{
|
test_type: 3,
|
record_time: "2000-01-01 00:00:00",
|
record_time1: today+' 23:59:59',
|
test_starttype: 3,
|
},
|
mainf:{
|
remark: 100,
|
maint_done_time: "2000-01-01 00:00:00",
|
maint_done_time1: today+' 23:59:59'
|
}
|
},
|
myModal: '',
|
battGroup: {
|
url: 'BattInfAction!serchBattByStation',
|
data: {
|
StationName1: params.province,
|
StationName2: params.city,
|
StationName5: params.county,
|
StationName: params.home,
|
StationId: params.stationid
|
},
|
res: []
|
},
|
},
|
created: function() {
|
var vm = this;
|
this.searchBattGroup(); // 查询电池组名称
|
},
|
methods: {
|
// 查询电池组列表
|
searchBattGroup: function() {
|
var vm = this;
|
var battGroup = this.battGroup;
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: battGroup.url,
|
data: 'json='+JSON.stringify(battGroup.data),
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
var firData = {
|
value: '0',
|
text: '全部(共'+data.length+'种)'
|
}
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
_data.value = _data.BattGroupId,
|
_data.text = _data.BattGroupName
|
}
|
data.unshift(firData);
|
battGroup.res = data;
|
}else {
|
battGroup.res = [{
|
value: '0',
|
text: '全部(共0种)'
|
}];
|
}
|
}
|
});
|
},
|
searchData: function() {
|
var searchParams = this.modal;
|
bus.$emit('searchData', searchParams);
|
}
|
}
|
});
|
|
// 自定义左侧面板
|
var myModal = this.myModal = new MyModal('#myModal');
|
vContent.myModal = myModal;
|
myModal.show();
|
|
var lineGraph = this.lineGraph = new LineEcharts2('battDataLineGraph', 'vContent');
|
// 测试时间段
|
var recordTime = app.calendar.create({
|
inputEl: '#recordTime',
|
monthNames: monthNames,
|
monthNamesShort: monthNamesShort,
|
dayNames: dayNames,
|
dayNamesShort: dayNamesShort,
|
footer: true,
|
toolbarCloseText: '确定',
|
on:{
|
change: function(calendar, value) {
|
var date = value[0].format('yyyy-MM-dd');
|
vContent.modal.tdata.record_time = date+' 00:00:00'
|
}
|
}
|
});
|
var recordTime1 = app.calendar.create({
|
inputEl: '#recordTime1',
|
monthNames: monthNames,
|
monthNamesShort: monthNamesShort,
|
dayNames: dayNames,
|
dayNamesShort: dayNamesShort,
|
footer: true,
|
toolbarCloseText: '确定',
|
on:{
|
change: function(calendar, value) {
|
var date = value[0].format('yyyy-MM-dd');
|
vContent.modal.tdata.record_time1 = date+' 23:59:59'
|
}
|
}
|
|
});
|
|
$('a[href=#tab-2]').click(function() {
|
lineGraph.resize();
|
});
|
}
|
}
|
}
|
</script>
|
