<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>电池组统计分析查询</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<link rel="stylesheet" href="mobilCss/jquery.mobile-1.4.5.min.css"/>
|
<style type="text/css">
|
/*规定表格样式*/
|
th{
|
color: #FFFFFF;
|
background-color: #7EB9FD;
|
}
|
th, td{
|
border: 1px solid #ccc;
|
text-align: center !important;
|
}
|
/*规定表格选项的样式*/
|
.ui-table-columntoggle-btn{
|
padding:0.4em 0.7em;
|
}
|
/*规定面板的样式*/
|
.ui-panel {
|
width: 80%;
|
}
|
.ui-panel-dismiss{
|
width: 20%;
|
}
|
.ui-panel-inner{
|
padding:0 !important;
|
}
|
.ui-collapsible-heading-toggle{
|
padding-left: 1em !important;
|
}
|
.panel-header{
|
padding: 8px 0;
|
font-size: 1.2em;
|
text-indent: 1em;
|
background-color: #DFDCDC;
|
}
|
/*规定开关的位置*/
|
#switchCon {
|
float: left;
|
margin-left: 0.5em;
|
}
|
/*定义显示或隐藏div*/
|
.div-list{
|
display: none;
|
}
|
.div-block {
|
display: block !important;
|
}
|
/*清除浮动*/
|
.clear {
|
clear: both;
|
}
|
|
.ui-field-contain{
|
padding: 0 0.6em ;
|
}
|
</style>
|
<script type="text/javascript" src="mobilJs/base.js"></script>
|
<script type="text/javascript" src="mobilJs/jquery-1.8.2.js"></script>
|
<script type="text/javascript" src="mobilJs/jquery.mobile-1.4.5.min.js"></script>
|
</head>
|
<body>
|
<div data-role="page">
|
<!-- 面板内容 -->
|
<div data-role="panel" data-position="right" id="filterPanel" data-display="overlay" data-position-fixed="true">
|
<div class="panel-header"><span>筛选</span></div>
|
<div class="ui-field-contain">
|
<fieldset data-role="controlgroup" id="station_name1_fie">
|
|
</fieldset>
|
<fieldset data-role="controlgroup" id="station_name_fie">
|
|
</fieldset>
|
<fieldset data-role="controlgroup" id="battgroup_name_fie">
|
|
</fieldset>
|
</div>
|
</div>
|
<!-- 头部内容 -->
|
<div data-role="header" data-position="fixed">
|
<a href="count-report.html" target="_top" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left" style="padding-top: 0.7em; padding-bottom: 0.7em;">返回</a>
|
<h1>电池组统计分析查询</h1>
|
<a href="#filterPanel" class="ui-btn ui-corner-all ui-shadow ui-icon-grid ui-btn-icon-left" style="padding-top: 0.7em; padding-bottom: 0.7em;">筛选</a>
|
</div>
|
<!-- 主体内容 -->
|
<div data-role="main">
|
<!-- 开关按钮 -->
|
<div id="switchCon">
|
<input type="checkbox" data-mini="true" data-mini="true" data-role="flipswitch" id="switch" checked data-on-text="数据" data-off-text="折线">
|
</div>
|
|
<!-- 表格容器 -->
|
<div id="" class="div-list div-block">
|
<table data-role="table" data-mode="columntoggle" data-column-btn-text="表格选项" class="ui-responsive">
|
<thead>
|
<tr>
|
<th data-priority="1">武汉</th>
|
<th data-priority="1">源畅</th>
|
<th data-priority="1">科技</th>
|
<th data-priority="4">有限</th>
|
<th data-priority="5">公司</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>内容1</td>
|
<td>内容2</td>
|
<td>内容3</td>
|
<td>内容4</td>
|
<td>内容5</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
<!-- 清除浮动 -->
|
<div class="clear"></div>
|
<!-- 折线图容器 -->
|
<div class="div-list" id="lineChart">
|
<span>我是折线图1</span>
|
</div>
|
</div>
|
<!-- 页脚内容 -->
|
<div data-role="footer" data-position="fixed">
|
<h1>福光电子有限公司</h1>
|
</div>
|
</div>
|
<script type="text/javascript">
|
|
$('#switchCon').on('click', '.ui-flipswitch', function() {
|
if($(this).hasClass('ui-flipswitch-active')) {
|
$('.div-list').eq(0).addClass('div-block');
|
$('.div-list').eq(1).removeClass('div-block');
|
}else {
|
$('.div-list').eq(0).removeClass('div-block');
|
$('.div-list').eq(1).addClass('div-block');
|
}
|
});
|
|
$(function(){
|
//页面加载时查询维护区中的枢纽类型
|
$.ajax({
|
url:'BattInfAction!serchByStation',
|
async:'true',
|
type:'post',
|
success:function(data){
|
var model=eval("("+data.result+")");
|
console.info(model);
|
if(model.code==1){
|
$('#station_name1_fie').text('');
|
var _p=$('<p>维护区</p>');
|
var _select=$('<select data-mini="true" id="station_name1"></select>');
|
for(var i=0;i<=model.data.length;i++){
|
var _option=$("<option></option>");
|
if(i==0){
|
_option.text("全部(共"+model.data.length+"种)");
|
_option.attr("value", "");
|
}else{
|
_option.text(model.data[i-1].StationName1);
|
_option.attr("value", model.data[i-1].StationName1);
|
}
|
_select.append(_option);
|
}
|
$('#station_name1_fie').append(_p);
|
$('#station_name1_fie').append(_select).trigger('create');
|
}
|
findStationNamebyStationname1();
|
}
|
});
|
});
|
|
//当维护区的值变换时更新机房站点
|
$('.ui-field-contain').on('change','#station_name1',(function(){
|
findStationNamebyStationname1();
|
}));
|
|
//根据维护区查询站点
|
function findStationNamebyStationname1(){
|
var selectvalue=$("#station_name1 option:selected").val();
|
$.ajax({
|
type:'post',
|
url:"BattInfAction!serchByStationName",
|
dataType:'json',
|
data:
|
{
|
'bif.StationName1':selectvalue,
|
},
|
success:function(data){
|
var model=eval('('+data.result+')');
|
if(model.code==1){
|
$('#station_name_fie').text('');
|
var _p=$('<p>机房站点</p>');
|
var _select = $('<select data-mini="true" class="station_name" id="station_name"></select>');
|
for(var i=0;i<=model.data.length;i++){
|
var _option = $('<option></option>');
|
if(i==0){
|
_option.text('全部共('+model.data.length+')种');
|
_option.attr('value','');
|
}else{
|
_option.text(model.data[i-1].StationName);
|
_option.attr('value',model.data[i-1].StationName);
|
}
|
_select.append(_option).trigger('create');
|
}
|
$('#station_name_fie').append(_p);
|
$('#station_name_fie').append(_select).trigger('create');
|
}
|
findserchByBattGroupNamebystationname();
|
},
|
error:function(e){
|
console.info(e);
|
}
|
|
});
|
}
|
|
//当机房改变时,电池组也要重新加载
|
$('.ui-field-contain').on('change','#station_name',function(){
|
findserchByBattGroupNamebystationname();
|
});
|
|
//根据维护区和机房查询蓄电池组
|
function findserchByBattGroupNamebystationname(){
|
var station_name1=$("#station_name1 option:selected").val();
|
var station_name=$("#station_name option:selected").val();
|
|
$.ajax({
|
url:'BattInfAction_serchByBattGroupName',
|
type:'post',
|
dataType:'json',
|
data:{
|
'bif.StationName1':station_name1,'bif.StationName':station_name
|
},
|
success:function(data){
|
var model=eval('('+data.result+')');
|
if(model.code==1){
|
//$('#battgroup_name').text('');
|
$('#battgroup_name_fie').text('');
|
var _p=$('<p>蓄电池组</p>');
|
var _select=$('<select data-mini="true" id="battgroup_name"></select>');
|
for(var i=0;i<=model.data.length;i++){
|
var _option=$('<option></option>');
|
if(i!=0){
|
_option.text(model.data[i-1].BattGroupName+"-"+model.data[i-1].MonCount+"节");
|
_option.attr("value",model.data[i-1].BattGroupId);
|
}else{
|
_option.text("全部蓄电池组（共"+model.data.length+"组）");
|
_option.attr("value", "0");
|
}
|
_select.append(_option).trigger('create');
|
}
|
$('#battgroup_name_fie').append(_p);
|
$('#battgroup_name_fie').append(_select).trigger('create');
|
}
|
},
|
error:function(e){
|
console.info(e);
|
}
|
});
|
}
|
|
|
</script>
|
</body>
|
</html>
|
