<style scoped>
|
|
</style>
|
<template>
|
<div data-name="data-batt-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>
|
<!-- Scrollable page content -->
|
<div class="page-content" id="vContent">
|
<p class="monitor-index-url">地址：<span class="bread-item" onclick="breadItemClick(0)">{{ params.home}}</span>/电池信息统计查询</p>
|
<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 in battInfo.res" v-bind:key="item.BattGroupId">
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[0]">${item.BattGroupId}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[1]">${item.StationName}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[2]">${item.StationIp}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[3]">${item.BattGroupName}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[4]">${item.BattGroupNum}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[5]">${item.MonCount}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[6]">${item.MonCapStd}AH</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[7]">${item.MonVolStd}V</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[8]">${item.BattProducer}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[9]">${item.BattProductDate}</td>
|
<td class="numeric-cell" v-bind:data-collapsible-title="dataTbl.theads[10]">${item.BattInUseDate}</td>
|
<td class="numeric-cell"></td>
|
</tr>
|
</tbody>
|
</table>
|
</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">
|
<select v-model="modal.binf.BattProducer">
|
<option v-for="item in battBrand.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">
|
<select v-model="modal.binf.MonVolStd">
|
<option v-for="item in monVol.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">
|
<select v-model="modal.binf.MonCapStd">
|
<option v-for="item in monCap.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">
|
<select v-model="modal.binf.BattGroupName1">
|
<option value=" ">全部</option>
|
<option value="开关电源系统">开关电源系统</option>
|
<option value="UPS系统">UPS系统</option>
|
<option value="其他">其他</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">
|
<select v-model="modal.uinf.UName">
|
<option v-for="item in userList.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">
|
<select v-model="modal.tdata.test_type">
|
<option value="0">全部</option>
|
<option value="3">有放电记录</option>
|
<option value="2">有充电记录</option>
|
<option value="3000">有放电或充电记录</option>
|
<option value="9">有在线监测记录</option>
|
<option value="5000">有内阻/电导记录</option>
|
<option value="4000">无记录</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="modal.tdata.record_time"
|
id="record_time"/>
|
</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="modal.tdata.record_time1"
|
id="record_time1"/>
|
</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">
|
<select v-model="modal.mainf.remark">
|
<option value="100">全部（共2种）</option>
|
<option value="1">有故障维护记录</option>
|
<option value="0">无故障维护记录</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="modal.mainf.maint_done_time"
|
id="maint_done_time"/>
|
</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="modal.mainf.maint_done_time1"
|
id="maint_done_time1"/>
|
</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="modal.binf.BattInUseDate"
|
id="BattInUseDate"/>
|
</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="modal.binf.BattInUseDate1"
|
id="BattInUseDate1"/>
|
</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">
|
<select v-model="modal.tdata.test_starttype">
|
<option value="0">全部(共3种)</option>
|
<option value="1">停电放电</option>
|
<option value="2">假负载放电</option>
|
<option value="3">节能放电</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="my-modal-footer">
|
<div class="row">
|
<button class="col button button-fill" v-on:click="enSure">确定</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,
|
}
|
}
|
}
|
},
|
methods: {
|
searchData: function() {
|
var params = this.params;
|
|
},
|
structParams: function() {
|
|
}
|
},
|
on: {
|
pageInit: function(e, page) {
|
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: {
|
dataTbl: {
|
theads: ['电池组ID', '机房名称', '机房IP地址', '电池组名称', '电池组序号', '单体数量',
|
'容量', '单体电压', '电池品牌', '生产日期', '安装日期'],
|
},
|
modal: {
|
page: {
|
pageCurr: 1,
|
pageSize: 64
|
},
|
binf:{
|
StationName1: params.province,
|
StationName2: params.city,
|
StationName5: params.county,
|
StationName: params.home,
|
BattGroupId: 0,
|
BattProducer: '', // 电池品牌
|
MonVolStd: 0, // 单体电压
|
MonCapStd: 0, // 电池容量
|
BattGroupName1: ' ', // 系统型号
|
BattProductDate: '2000-01-01',//电池生产开始时间
|
BattProductDate1: today, //电池生产结束时间
|
BattInUseDate: '2000-01-01', //电池安装开始时间
|
BattInUseDate1: today, //电池安装结束时间
|
},
|
uinf: {
|
UName: '0', // 包机人
|
},
|
tdata:{
|
test_type: 0, // 电池测试记录
|
record_time: '2001-01-01', //电池测试记录时间段
|
record_time1: today,
|
test_starttype: 0, //放电类型
|
},
|
mainf:{
|
remark: 100, // 故障维护
|
maint_done_time: '2000-01-01', //电池维护时间段
|
maint_done_time1: today,
|
}
|
},
|
battInfo: {
|
url: 'Batt_Maint_DealarmAction_serchByConditionNew',
|
res: []
|
},
|
myModal: ''
|
},
|
created: function() {
|
var vm = this;
|
|
bus.$on('enSure', function(data) {
|
vm.modal = data;
|
vm.enSure();
|
});
|
},
|
methods: {
|
enSure: function() {
|
var _self = this;
|
var modal = this.modal;
|
var battInfo = this.battInfo;
|
app.preloader.show();
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: battInfo.url,
|
data: 'result='+JSON.stringify(modal),
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
// 查询成功且有数据结果
|
if(rs.code == 1) {
|
var data = rs.data;
|
battInfo.res = data;
|
}else {
|
battInfo.res = [];
|
}
|
app.preloader.hide();
|
_self.myModal.hide();
|
}
|
});
|
}
|
}
|
});
|
|
var myModalVm = new Vue({
|
el: '#myModal',
|
delimiters: ['${', '}'],
|
data: {
|
dataTbl: {
|
theads: ['电池组ID', '机房名称', '机房IP地址', '电池组名称', '电池组序号', '单体数量',
|
'容量', '单体电压', '电池品牌', '生产日期', '安装日期'],
|
},
|
modal: {
|
page: {
|
pageCurr: 1,
|
pageSize: 64
|
},
|
binf:{
|
StationName1: params.province,
|
StationName2: params.city,
|
StationName5: params.county,
|
StationName: params.home,
|
BattGroupId: 0,
|
BattProducer: '', // 电池品牌
|
MonVolStd: 0, // 单体电压
|
MonCapStd: 0, // 电池容量
|
BattGroupName1: ' ', // 系统型号
|
BattProductDate: '2000-01-01',//电池生产开始时间
|
BattProductDate1: today, //电池生产结束时间
|
BattInUseDate: '2000-01-01', //电池安装开始时间
|
BattInUseDate1: today, //电池安装结束时间
|
},
|
uinf: {
|
UName: '0', // 包机人
|
},
|
tdata:{
|
test_type: 0, // 电池测试记录
|
record_time: '2001-01-01', //电池测试记录时间段
|
record_time1: today,
|
test_starttype: 0, //放电类型
|
},
|
mainf:{
|
remark: 100, // 故障维护
|
maint_done_time: '2000-01-01', //电池维护时间段
|
maint_done_time1: today,
|
}
|
},
|
battGroup: {
|
url: 'BattInfAction!serchBattByStation',
|
data: {
|
StationName1: params.province,
|
StationName2: params.city,
|
StationName5: params.county,
|
StationName: params.home,
|
StationId: params.stationid
|
},
|
res: []
|
},
|
battBrand: {
|
url: 'BattInfAction_serchByBattProducer',
|
data: null,
|
res: []
|
},
|
monVol: {
|
url: 'BattInfAction_serchByMonVolStd',
|
data: null,
|
res: []
|
},
|
monCap: {
|
url: 'BattInfAction_serchByMonCapStd',
|
data: null,
|
res: []
|
},
|
userList: {
|
url: 'User_infAction_searchAll',
|
data: null,
|
res: []
|
}
|
},
|
created: function() {
|
var vm = this;
|
this.searchBattGroup(); // 查询电池组名称
|
this.searchBattBrand(); // 查询电池品牌
|
this.searchMonVol(); // 查询单体电压
|
this.searchMonCap(); // 查询单体容量
|
this.searchUserList(); // 查询包机人
|
},
|
methods: {
|
enSure: function() {
|
var modal = this.modal;
|
bus.$emit('enSure', modal);
|
},
|
// 查询电池组列表
|
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种)'
|
}];
|
}
|
}
|
});
|
},
|
// 查询电池品牌
|
searchBattBrand: function() {
|
var vm = this;
|
var battBrand = this.battBrand;
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: battBrand.url,
|
data: battBrand.data,
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data= rs.data;
|
var firData = {
|
value: '',
|
text: '全部(共'+data.length+'种)'
|
}
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
_data.value= _data.BattProducer+" ";
|
if(_data.BattProducer) {
|
_data.text = _data.BattProducer;
|
}else {
|
_data.text="其他";
|
}
|
}
|
data.unshift(firData);
|
battBrand.res = data;
|
}else {
|
battBrand.res = [{
|
value: '',
|
text: '全部(共0种)'
|
}];
|
}
|
}
|
});
|
},
|
searchMonVol: function() {
|
var monVol = this.monVol;
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: monVol.url,
|
data: monVol.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.MonVolStd;
|
_data.text = _data.MonVolStd;
|
}
|
data.unshift(firData);
|
monVol.res = data;
|
}else {
|
monVol.res = [{
|
value: '0',
|
text: '全部(共0种)'
|
}];
|
}
|
}
|
});
|
},
|
// 电池容量
|
searchMonCap: function() {
|
var monCap = this.monCap;
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: monCap.url,
|
data: monCap.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.MonCapStd;
|
_data.text = _data.MonCapStd;
|
}
|
data.unshift(firData);
|
monCap.res = data;
|
}else {
|
monCap.res = [{
|
value: '0',
|
text: '全部(共0种)'
|
}];
|
}
|
}
|
});
|
},
|
// 包机人
|
searchUserList: function() {
|
var userList = this.userList;
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: userList.url,
|
data: userList.data,
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
// console.log(rs);
|
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.UName;
|
_data.text = _data.UName;
|
}
|
data.unshift(firData);
|
userList.res = data;
|
}else {
|
userList.res = [{
|
value: '0',
|
text: '全部(共0种)'
|
}];
|
}
|
}
|
});
|
},
|
}
|
});
|
|
|
// 自定义左侧面板
|
var myModal = this.myModal = vContent.myModal = new MyModal('#myModal');
|
myModal.show();
|
// 测试时间段
|
var recordTime = app.calendar.create({
|
inputEl: '#record_time',
|
monthNames: monthNames,
|
monthNamesShort: monthNamesShort,
|
dayNames: dayNames,
|
dayNamesShort: dayNamesShort,
|
footer: true,
|
toolbarCloseText: '确定'
|
});
|
|
var recordTime1 = app.calendar.create({
|
inputEl: '#record_time1',
|
monthNames: monthNames,
|
monthNamesShort: monthNamesShort,
|
dayNames: dayNames,
|
dayNamesShort: dayNamesShort,
|
footer: true,
|
toolbarCloseText: '确定'
|
});
|
|
// 故障维护结束时间段maint_done_time
|
var maintDoneTime = app.calendar.create({
|
inputEl: '#maint_done_time',
|
monthNames: monthNames,
|
monthNamesShort: monthNamesShort,
|
dayNames: dayNames,
|
dayNamesShort: dayNamesShort,
|
footer: true,
|
toolbarCloseText: '确定'
|
});
|
|
var maintDoneTime1 = app.calendar.create({
|
inputEl: '#maint_done_time1',
|
monthNames: monthNames,
|
monthNamesShort: monthNamesShort,
|
dayNames: dayNames,
|
dayNamesShort: dayNamesShort,
|
footer: true,
|
toolbarCloseText: '确定'
|
});
|
|
// 电池安装时间段
|
var BattInUseDate = app.calendar.create({
|
inputEl: '#BattInUseDate',
|
monthNames: monthNames,
|
monthNamesShort: monthNamesShort,
|
dayNames: dayNames,
|
dayNamesShort: dayNamesShort,
|
footer: true,
|
toolbarCloseText: '确定'
|
});
|
|
var BattInUseDate1 = app.calendar.create({
|
inputEl: '#BattInUseDate1',
|
monthNames: monthNames,
|
monthNamesShort: monthNamesShort,
|
dayNames: dayNames,
|
dayNamesShort: dayNamesShort,
|
footer: true,
|
toolbarCloseText: '确定'
|
});
|
}
|
}
|
}
|
</script>
|
