<template>
|
<div class="page">
|
<div class="navbar">
|
<div class="navbar-inner">
|
<div class="title">机房筛选</div>
|
</div>
|
</div>
|
<div class="page-content">
|
<div class="list no-margin" id="filter-data">
|
<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 name="stationName1" id="province">
|
<option value=" " selected>全部</option>
|
<option value="广西省">广西省</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 name="stationName2" id="city">
|
<option value=" " selected>全部</option>
|
<option value="百色">百色</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 name="stationName5" id="county">
|
<option value=" " selected>全部</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 name="optionsList" id="optionsList">
|
<option value="1" selected>标称单体电压</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<div class="item-content item-input" id="optionsListContent"></div>
|
</li>
|
</ul>
|
</div>
|
<div class="row" style="margin-top: 8px">
|
<button class="col button button-fill color-blue" id="startFilter">启动筛选</button>
|
<button class="col button button-fill color-white text-color-black" id="endFilter">取消筛选</button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style>
|
.list.no-margin {
|
marign: 0;
|
}
|
</style>
|
<script>
|
return {
|
methods: {
|
searchProvince: function() {
|
var _this =this;
|
myAjax({
|
url: "User_battgroup_baojigroup_battgroupAction!serchStationName1InGroup",
|
data: null,
|
beforeSend: null,
|
success: function(res) {
|
if(res.code == 1) {
|
var data = res.data;
|
//console.log(data);
|
var arr = [];
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {};
|
tmp.value = _data;
|
tmp.text = _data;
|
arr.push(tmp);
|
}
|
_this.createOptions({
|
el: $("#province"),
|
data: arr,
|
isAll:true
|
})
|
}
|
},
|
complete: function() {
|
_this.searchCity();
|
}
|
});
|
},
|
searchCity: function(isLoad) {
|
var _this= this;
|
|
var temp = {
|
StationName1: $('#province').val().trim()
|
};
|
// console.log(temp);
|
myAjax({
|
url: "BattInfAction!serchStationName2",
|
data: temp,
|
beforeSend: function() {
|
if(isLoad) {
|
app.preloader.show();
|
}
|
},
|
success: function(res) {
|
if(res.code == 1) {
|
var data = res.data;
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
_data.value = _data.StationName2;
|
_data.text = _data.StationName2;
|
}
|
_this.createOptions({
|
el: $("#city"),
|
data: data,
|
isAll:true
|
})
|
}
|
},
|
complete: function() {
|
_this.searchCounty(isLoad);
|
}
|
});
|
},
|
searchCounty: function(isLoad) {
|
var _this = this;
|
var temp = {
|
StationName1: $('#province').val().trim(),
|
StationName2: $('#city').val().trim()
|
};
|
|
// 判断市是否为空
|
if(!temp.StationName2) {
|
var data = [{
|
value: " ",
|
text: "请选择市"
|
}];
|
|
if(isLoad) { // 关闭等待框
|
app.preloader.hide();
|
}
|
this.createOptions({
|
el: $("#county"),
|
data: data,
|
isAll: false
|
});
|
return;
|
}
|
|
myAjax({
|
url: "BattInfAction!serchStationName5",
|
data: temp,
|
beforeSend: function() {
|
if(isLoad) {
|
app.preloader.show();
|
}
|
},
|
success: function(res) {
|
if(res.code == 1) {
|
var data = res.data;
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
_data.value = _data.StationName5;
|
_data.text = _data.StationName5;
|
}
|
_this.createOptions({
|
el: $("#county"),
|
data: data,
|
isAll:true
|
});
|
}
|
},
|
complete: function() {
|
if(isLoad) {
|
app.preloader.hide();
|
}
|
}
|
});
|
},
|
createOptions: function(props) {
|
var el = props.el;
|
var data = props.data;
|
var isAll = props.isAll;
|
|
el.text(""); // 清空内容
|
|
if(isAll) { // 判断是否显示全部
|
var option = $('<option value=" "></option>');
|
option.text("全部（共"+data.length+"种）");
|
el.append(option);
|
}
|
|
// 遍历data的值将值添加到el中
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var option = $('<option></option>');
|
option.val(_data.value);
|
option.text(_data.text);
|
option.data('data', _data);
|
el.append(option);
|
}
|
},
|
getTplHtml: function(tpl, data) {
|
var compiledTpl = Template7.compile(tpl);
|
var tplHtml = compiledTpl(data);
|
return tplHtml;
|
},
|
checkFormData: function(id, callback) {
|
var form = $('#'+id);
|
var formData = app.form.convertToData('#'+id);
|
var msg = '';
|
Object.keys(formData).forEach(function(key) {
|
|
});
|
if(msg) {
|
// Create center toast
|
var toastCenter = app.toast.create({
|
text: msg,
|
position: 'center',
|
closeTimeout: 2000,
|
});
|
toastCenter.open();
|
}else if(typeof callback == 'function' ) {
|
callback(formData);
|
}
|
},
|
createFilterParam(field) {
|
var optsNum = Number(field.optionsList);
|
field.stationName1 = field.stationName1.trim();
|
field.stationName2 = field.stationName2.trim();
|
field.stationName5 = field.stationName5.trim();
|
/**
|
* 构造省市区县
|
*/
|
switch(optsNum){
|
case 1:
|
case 2:
|
case 3:
|
field.StationName1 = field.stationName1;
|
field.StationName2 = field.stationName2;
|
field.StationName5 = field.stationName5;
|
break;
|
case 12:
|
field.stationname1 = field.stationName1;
|
field.stationname2 = field.stationName2;
|
field.stationname5 = field.stationName5;
|
break;
|
}
|
|
/**
|
* 构造筛选条件
|
*/
|
switch(optsNum){
|
case 10:
|
case 11:
|
var times = field.rangeOfDay.split(" - ");
|
field.record_datetime = times[0]+" 00:00:00";
|
field.record_datetime_end = times[1]+" 23:59:59";
|
break;
|
case 12:
|
var times = field.rangeOfMonth.split(" - ");
|
var dayEnd = hdwDate.getMonthDay(times[1]);
|
field.replaced_time = times[0]+"-01 00:00:00";
|
field.replaced_time1 = times[1]+"-"+dayEnd+" 23:59:59";
|
}
|
return field;
|
}
|
},
|
data: function() {
|
return {
|
optionlist:[
|
{
|
id: "monVol",
|
filter: "monVolSelFilter",
|
text: "标称单体电压",
|
value:1,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">标称电压</div>
|
<div class="item-input-wrap">
|
<select name="MonVolStd" id="MonVolStd">
|
<option value="0">全部</option>
|
<option value="2">2V</option>
|
<option value="12">12V</option>
|
</select>
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "groupNum",
|
filter: "groupNumSelFilter",
|
text: "BTS设备电池组数",
|
value: 2,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">电池组数</div>
|
<div class="item-input-wrap">
|
<select name="BattGroupNum" id="BattGroupNum" lay-filter="BattGroupNum">
|
<option value="0">全部</option>
|
<option value="1">1组</option>
|
<option value="2">2组</option>
|
</select>
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "loadCurr",
|
filter: "loadCurrFilter",
|
text: "实际负载电流",
|
value: 3,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">电流上下限(A)</div>
|
<div class="item-input-wrap">
|
<div class="row">
|
<div class="col-45">
|
<input type="text" name="Load_curr" id="Load_curr" placeholder="电流下限" autocomplete="off" class="layui-input">
|
</div>
|
<div class="col-5" style="line-height: 44px">-</div>
|
<div class="col-45">
|
<input type="text" name="Load_curr1" id="Load_curr1" placeholder="电流上限" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "actCap",
|
filter: "actCapFilter",
|
text: "电池组实际容量",
|
value: 4,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">实际容量(AH)</div>
|
<div class="item-input-wrap">
|
<div class="row">
|
<div class="col-45">
|
<input type="text" name="real_cap_min" id="curr_per_min" placeholder="容量下限" lay-verify="required|number|currPerMin" autocomplete="off" class="layui-input">
|
</div>
|
<div class="col-5" style="line-height: 44px">-</div>
|
<div class="col-45">
|
<input type="text" name="real_cap_max" id="curr_per_max" placeholder="容量上限" lay-verify="required|number|currPerMax" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
</div>
|
</div>
|
`
|
|
},
|
{
|
id: "tmpRange",
|
filter: "tmpRangeFilter",
|
text: "设备温度",
|
value: 14,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">温度范围(℃)</div>
|
<div class="item-input-wrap">
|
<div class="row">
|
<div class="col-45">
|
<input type="text" name="dev_temp" id="tmpDown" placeholder="温度下限" lay-verify="required|number|tmpMin" autocomplete="off" class="layui-input">
|
</div>
|
<div class="col-5" style="line-height: 44px">-</div>
|
<div class="col-45">
|
<input type="text" name="dev_temp1" id="tmpUp" placeholder="温度上限" lay-verify="required|number|tmpMax" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "endurTimeLong",
|
filter: "endurTimeLongFilter",
|
text: "机房续航时间",
|
value: 13,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">续航时间(min)</div>
|
<div class="item-input-wrap">
|
<div class="row">
|
<div class="col-45">
|
<input type="text" name="endurance_actual_timelong_min" id="endurance_actual_timelong_min" placeholder="时间下限" lay-verify="required|number|endurTimeLongMin" autocomplete="off" class="layui-input">
|
</div>
|
<div class="col-5" style="line-height: 44px">-</div>
|
<div class="col-45">
|
<input type="text" name="endurance_actual_timelong_max" id="endurance_actual_timelong_max" placeholder="时间上限" lay-verify="required|number|endurTimeLongMax" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "actCapBehind",
|
filter: "actCapBehindFilter",
|
text: "单体实际容量落后数量",
|
value: 5,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">百分比(%)</div>
|
<div class="item-input-wrap">
|
<input type="text" name="number" placeholder="落后数量个数百分比" lay-verify="required|number|int|max100" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "eleWarnType",
|
filter: "eleWarnTypeFilter",
|
text: "电池实时告警",
|
value: 6,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">告警类型</div>
|
<div class="item-input-wrap">
|
<select name="alm_id" id="eleWarnTypeSel" lay-filter="eleWarnTypeSel">
|
<option value="0">全部</option>
|
<option value="119001">在线电压</option>
|
<option value="119002">组端电压</option>
|
<option value="119005">单体电压</option>
|
<option value="119003">充放电电流</option>
|
</select>
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "equipWarnType",
|
filter: "equipWarnTypeFilter",
|
text: "设备实时告警",
|
value: 7,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">告警类型</div>
|
<div class="item-input-wrap">
|
<div class="layui-input-block">
|
<select name="alm_type" id="equipWarnTypeSel" lay-filter="equipWarnTypeSel">
|
<option value="0">全部</option>
|
<option value="119020">通信故障</option>
|
<option value="119028">设备温度异常</option>
|
<option value="119032">SD卡故障</option>
|
<option value="119033">采集线告警</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "homeProblem",
|
filter: "homeProblemFilter",
|
text: "机房问题类型",
|
value: 8,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">问题类型</div>
|
<div class="item-input-wrap">
|
<div class="layui-input-block">
|
<select name="error_state" id="homeProblemSel" lay-filter="homeProblemSel">
|
<option value="-1">全部</option>
|
<option value="0">电池问题</option>
|
<option value="1">电源问题</option>
|
<option value="2">空调问题</option>
|
<option value="3">漏水问题</option>
|
<option value="4">BTS设备问题</option>
|
<option value="5">GPRS模块问题</option>
|
<option value="6">施工安装问题</option>
|
<option value="7">铁锂电池问题</option>
|
<option value="8">其他问题</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "equipVersion",
|
filter: "equipVersionFilter",
|
text: "设备版本号",
|
value: 9,
|
selects:[]
|
},
|
{
|
id: "powerCutRecord",
|
filter: "powerCutRecordFilter",
|
text: "有停电记录",
|
timeRange: true,
|
type: "day",
|
timeId: "powerCutRecordDay",
|
value: 10,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">日期范围</div>
|
<div class="item-input-wrap">
|
<div class="layui-input-block">
|
<input type="text" name="rangeOfDay" id="powerCutRecordDay" readonly="readonly" autocomplete="off">
|
</div>
|
</div>
|
<div class="item-title item-label">停电大于（次数）</div>
|
<div class="item-input-wrap">
|
<div class="layui-input-block">
|
<input type="text" name="station_event_type_poff" placeholder="" lay-verify="required|number|int" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "dropRecord",
|
filter: "dropRecordFilter",
|
text: "有掉站记录",
|
timeRange: true,
|
type: "day",
|
timeId: "dropRecordDay",
|
value: 11,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">日期范围</div>
|
<div class="item-input-wrap">
|
<div class="layui-input-block">
|
<input type="text" name="rangeOfDay" id="dropRecordDay" placeholder="" lay-verify="required" readonly="readonly" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="item-title item-label">掉站大于（次数）</div>
|
<div class="item-input-wrap">
|
<div class="layui-input-block">
|
<input type="text" name="station_event_type_diaozhan" placeholder="" lay-verify="required|number|int" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
</div>
|
`
|
},
|
{
|
id: "eleChangeRecord",
|
filter: "eleChangeRecordFilter",
|
text: "电池更换记录",
|
timeRange: true,
|
type: "month",
|
timeId: "eleChangeRecordMonth",
|
value: 12,
|
template:`
|
<div class="item-inner">
|
<div class="item-title item-label">日期范围</div>
|
<div class="item-input-wrap">
|
<div class="layui-input-block">
|
<input type="text" name="rangeOfMonth" id="eleChangeRecordMonth" lay-verify="required" readonly="readonly" placeholder="" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="item-title item-label">更换大于（次数）</div>
|
<div class="item-input-wrap">
|
<div class="layui-input-block">
|
<input type="text" name="replaced_moncount" placeholder="" lay-verify="required|number|int" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
</div>
|
`
|
}
|
]
|
}
|
},
|
on: {
|
pageInit: function() {
|
var _this = this;
|
|
this.searchProvince();
|
// 切换省
|
$("#province").change(function() {
|
_this.searchCity(true);
|
});
|
|
// 切换市
|
$("#city").change(function() {
|
_this.searchCounty(true);
|
});
|
|
// 生成条件选择列表
|
this.createOptions({
|
el: $("#optionsList"),
|
data: this.optionlist,
|
isAll: false
|
});
|
var monVolData = getOptionsList();
|
var optionsListContent = $("#optionsListContent");
|
optionsListContent.html(this.getTplHtml(monVolData.template, {}));
|
// 切换optionsList
|
$("#optionsList").change(setOptionsListContent);
|
|
// 点击启动筛选
|
$("#startFilter").click(function() {
|
var formData = app.form.convertToData('#filter-data');
|
var homePage = pages.home;
|
//console.log(homePage);
|
_this.checkFormData('filter-data', function(res) {
|
var field = _this.createFilterParam(res);
|
$.ajax({
|
type: "post",
|
async: true,
|
url: "BattMap_informationAction!serchBattInMapFilter",
|
data: "json="+JSON.stringify(field)+"&condition="+field.optionsList,
|
dataType: "json",
|
beforeSend: function() {
|
app.preloader.show();
|
},
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
_data.title = data[i].StationName;
|
_data.StationName1 = _data.stationName1;
|
_data.StationName2 = _data.stationName2;
|
_data.StationName3 = _data.stationName3;
|
_data.StationName5 = _data.stationName5;
|
_data.text = _data.StationName3;
|
}
|
homePage.changeMarkers(data);
|
}else {
|
var toastCenter = app.toast.create({
|
text: '查询结果为空',
|
position: 'center',
|
closeTimeout: 2000,
|
});
|
toastCenter.open();
|
}
|
},
|
complete: function() {
|
app.preloader.hide();
|
}
|
});
|
});
|
});
|
|
// 取消筛选
|
$('#endFilter').click(function() {
|
var homePage = pages.home;
|
homePage.recovery();
|
});
|
|
// 获取optionsList的data
|
function getOptionsList() {
|
var selected = $("#optionsList").find('option:selected');
|
var data = selected.data('data');
|
return data;
|
}
|
|
// 根据optionsList的值对optionsListContent进行操作
|
function setOptionsListContent() {
|
var optionsVal = getOptionsList();
|
var template = optionsVal.template;
|
var optionsListContent = $("#optionsListContent");
|
if(typeof template == 'string') {
|
optionsListContent.html(_this.getTplHtml(template, {}));
|
}else {
|
optionsListContent.html("");
|
}
|
|
if(optionsVal.type=='day') {
|
var timeId = optionsVal.timeId;
|
var calendarRange = app.calendar.create({
|
inputEl: "#"+timeId,
|
monthNames:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
dayNamesShort:['日', '一', '二', '三', '四', '五', '六'],
|
dateFormat: 'yyyy-mm-dd',
|
footer: true,
|
rangePicker: true
|
});
|
}
|
|
if(optionsVal.type=='month') {
|
var timeId = optionsVal.timeId;
|
var calendarRange = app.calendar.create({
|
inputEl: "#"+timeId,
|
monthNames:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
dayNamesShort:['日', '一', '二', '三', '四', '五', '六'],
|
dateFormat: 'yyyy-mm',
|
footer: true,
|
rangePicker: true
|
});
|
}
|
}
|
}
|
}
|
};
|
</script>
|
