| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
- <title>yjxx</title>
- <style type="text/css">
- @media (device-height:1024px) and (-webkit-min-device-pixel-ratio:2){/* 兼容ipad */
- .scrollX{
- height: 55px !important;
- }
- .btnBox{
- font-size: 20px !important;
- height: 55px !important;
- }
- .btnBox>div {
- width: 120px !important;
- height: 52px !important;
- line-height: 55px !important;
- margin: 0 50px !important;
- }
- .yujing_iscroll{
- top: 100px !important;
- bottom: 55px !important;
- }
- .sbsj1{
- height: 40.5px !important;
- line-height: 37.5px !important;
- font-size: 20px !important;
- }
- .sbsj2{
- font-size: 20px !important;
- margin-bottom: 10px;
- }
- .sbp {
- font-size: 18px !important;
- }
- .iscroll_content>ul>.scxx{
- font-size: 22px !important;
- }
- .iscroll_content>ul>.scxx>a{
- width: 605px !important;
- }
- .badge{
- font-size: 18px !important;
- }
- .fenmian_header{
- height: 50px !important;
- line-height: 50px !important;
- }
- .glyphicon-menu-left{
- font-size: 22px !important;
- }
- .fenmian_header p{
- font-size: 22px !important;
- }
- .titleText{
- height: 50px !important;
- line-height: 50px !important;
- font-size:20px !important;
- text-alain:center;
- }
- }
- * {
- padding: 0;
- margin: 0;
- }
- body,html {
- height:100%;
- width:100%;
- overflow:hidden;
- }
- ul {
- list-style: none;
- margin-bottom: 0;
- }
- a {
- text-decoration: none;
- }
- .unread{
- width: 11.7px;
- height: 11.7px;
- border-radius: 100%;
- background: #89C930;
- position: absolute;
- left: -15.5px;
- top: 50%;
- margin-top: -5px;
- }
- /* 滚动条样式 */
- .iScrollHorizontalScrollbar {
- position: absolute;
- z-index: 9999;
- height: 2px;
- left: 2px;
- right: 2px;
- bottom: 0;
- overflow: hidden;
- }
- .iScrollHorizontalScrollbar.iScrollBothScrollbars {
- right: 18px;
- }
- .iScrollVerticalScrollbar {
- position: absolute;
- z-index: 9999;
- width: 3px;
- bottom: 2px;
- top: 2px;
- right: 2px;
- overflow: hidden;
- }
- .iScrollVerticalScrollbar.iScrollBothScrollbars {
- bottom: 18px;
- }
- .iScrollIndicator {
- position: absolute;
- background: rgba(0, 0, 0);
- border: 2px solid rgba(0, 0, 0, 0.5);
- border-radius: 8px;
- }
- /* 主页面 */
- .container {
- width: 100%;
- padding: 0;
- margin: 0;
- }
- .header {
- width: 100%;
- height: 38px;
- line-height: 38px;
- font-weight: bold;
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- background: #2285e2 !important;
- border: none;
- }
- .header>.btn-group {
- position: absolute;
- left: 0;
- }
- .glyphicon-menu-left{
- margin: 10px;
- font-size: 18px;
- color: #fff;
- width: 40px;
- }
- .header p {
- font-size: 18px;
- color: #fff;
- margin-bottom: 0 !important;
- }
- .titleText {
- width: 100%;
- background: #f4f2f3 !important;
- position: relative;
- margin-bottom: 0.1rem;
- height: 0.8rem;
- line-height: 0.8rem;
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
- text-indent: 16px;
- font-size: 0.24rem;
- font-weight: bold;
- }
- .yujing_iscroll {
- width: 100%;
- overflow: hidden;
- background: #fff !important;
- position: absolute;
- padding: 0 8%;
- left: 0;
- top: 38px;
- bottom: 0;
- }
- .group_iscroll .iscroll_content {
- width: 84%;
- position: absolute;
- padding: 0;
- background: #f4f2f3;
- }
- .btnBox{
- height: 38px;
- display: flex;
- overflow: hidden;
- font-size: 14px;
- }
- .btnBox>div{
- width: 80px;
- height: 37px;
- line-height: 38px;
- text-align: center;
- margin: 0 20px;
- }
- .titleText{
- height: 38px;
- line-height: 38px;
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
- text-indent: 16px;
- font-size: 14px;
- font-weight: bold;
- }
- .sbsj1{
- text-align: center;
- height: 27.5px;
- line-height: 22.5px;
- font-size: 14px;
- background: #fff !important;
- }
- .sbxxBox{
- position: relative;
- border: 1px solid #ccc;
- padding: 15px;
- border-radius: 8px;
- background: #fff;
- }
- .sbp1{
- font-weight: bold;
- font-size: 14px;
- margin: 0;
- }
- .sbsj2{
- font-size: 12px;
- margin-bottom: 20px;
- }
- .sbp2{
- font-weight: bold;
- font-size: 12px;
- text-indent: 2em;
- }
- .iscroll_content>ul>.scxx{
- height: 588.2px;
- line-height: 48.2px;
- border-bottom: 1px solid #ccc;
- font-size: 14px;
- display: flex;
- align-items: center;
- background: #fff;
- }
- .iscroll_content>ul>.scxx>a{
- width: 300px;
- color: #000;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- text-decoration: none;
- }
- .yujingActive{
- color: #2285E2;
- border-bottom: 2px solid #2285E2;
- font-weight: bold;
- }
- .scrollX{
- width: 100%;
- height: 38px;
- position: absolute;
- bottom: 0;
- border-top: 1px solid #ccc;
- background: #f4f2f3 !important;
- display: -webkit-box;
- -webkit-box-pack: center;
- }
-
- #pullDown,#pullUp{
- height:40px;
- line-height:40px;
- text-align:center;
- }
- </style>
- <script>
- $(function(){
- var myScroll,mScroll;
- var from = '${from}';
- /*纵向滚轮 */
- myScroll = new IScroll(".yujing_iscroll",{
- scrollbars: true,
- fadeScrollbars:true,
- scrollbars: 'custom',
- shrinkScrollbars:'clip',
- probeType: 2,
- bindToWrapper:true,
- bounce:true,
- click:true,
- tap:true
- });
- setTimeout(function(){
- myScroll.refresh();
- }, 100);
- /* 横向滚轮 */
- mScroll = new IScroll(".scrollX",{
- scrollX: true,
- scrollY: false,
- scrollbars: true,
- fadeScrollbars:true,
- scrollbars: 'custom',
- shrinkScrollbars:'clip',
- tap:true
- });
- setTimeout(function(){
- mScroll.refresh();
- }, 100);
-
- var pullUp = $("#pullUp"),
- pullUpLabel = $(".pullUpLabel"),
- loadingStep = 0;//加载状态0默认,1显示加载状态,2执行加载数据,只有当为0时才能再次加载,这是防止过快拉动刷新
- pullUp.hide();
-
- myScroll.on("scroll",function(){
- if(loadingStep == 0 && !pullUp.attr("class").match('refresh')){
- if(this.y < (this.maxScrollY - 14)){//上拉加载更多
- pullUp.addClass("refresh").show();
- pullUp.css({"background":"","background-size":""});
- pullUpLabel.text("松手开始加载...");
- loadingStep = 1;
- myScroll.refresh();
- }
- }
- });
- myScroll.on("scrollEnd",function(){
- if(loadingStep == 1){
- if( pullUp.attr("class").match("refresh") ){//下拉刷新操作
- pullUp.removeClass("refresh").addClass("loading");
- pullUpLabel.text("加载中...");
- pullUp.css({"background":"#fff url(views/haifm/images/pullUp.gif) 35% center no-repeat","background-size":"8%"});
- loadingStep = 2;
- pullUpAction();
- myScroll.refresh();
- }
- }
- });
- //上拉加载方法
- function pullUpAction(){
- if (parseInt($("#page").val()) < parseInt($("#maxPage").val())) {
- setTimeout(function(){
- jQuery("#sub").ajaxSubmit({
- type: "post",
- async: true,
- dataType : 'text',
- data : {
- "page" : parseInt($("#page").val())+1,
- "from" : from,
- "mcid" :$("#mcid").val()
- },
- success : function(data) {
- var szd= new Array();
- szd = data.split("$");
- szd.pop();//删除最后一个空元素
- page = szd[0];
- var maxPage = szd[1];
- $("#from").val(szd[2]);
- if (parseInt($("#page").val()) < parseInt(maxPage)) {
- $("#page").val(parseInt(page));
- for (i = 3 ; i < szd.length ; i++) {
- var jt = new Array();
- jt = szd[i].split("@");
- var li, i, el, curIndex;
- el = document.getElementsByTagName(".iscroll_content ul");
- curIndex = $(".yujingActive").index();
- var fbsj = jt[0];
- var zw = jt[1];
- var tssj = jt[2];
- var bt = jt[3];
- var id =jt[4];
- var ydzt = jt[5];
- var fromVal = $("#from").val();
- var page = $("#page").val();
- li = document.createElement("li");
- if (ydzt == 0){
- li.innerHTML = "<div class='sbsj1'>" + tssj + "</div><div class='sbxxBox' onclick= 'viewXxtsxx2(" + id +","+ fromVal + "," + page +")'><p class='sbp1'>" + bt + "</p><div class='sbsj2'>"+fbsj+"</div><p class='sbp2'>"+zw+"</p><span class='unread'></span></div>";
- }else {
- li.innerHTML = "<div class='sbsj1'>" + tssj + "</div><div class='sbxxBox' onclick= 'viewXxtsxx2(" + id +","+ fromVal + "," + page +")'><p class='sbp1'>" + bt + "</p><div class='sbsj2'>"+fbsj+"</div><p class='sbp2'>"+zw+"</p><span class=''></span></div>";
- }
- $(".iscroll_content ul").append(li);
- pullUp.attr("class","").hide();
- myScroll.refresh();
- loadingStep = 0;
- }
- }else{
- pullUp.css({"background":"","background-size":""});
- pullUpLabel.text("没有数据了");
- myScroll.refresh();
- }
- },
- error: function(XMLHttpRequest, textStatus, errorThrown,msg) {
- alert(XMLHttpRequest.status);
- alert(XMLHttpRequest.readyState);
- alert(textStatus);
- }
- });
- },1000);
- }else{
- pullUp.css({"background":"","background-size":""});
- pullUpLabel.text("没有数据了");
- myScroll.refresh();
- };
- }
- document.addEventListener("touchmove", function (e) {
- e.preventDefault();
- }, false);
- /* tab内容切换*/
- $(".btnBox div").on("tap",function() {
- var $this = $(this);
- $this.addClass("yujingActive").siblings().removeClass();
- var data = $(this).data("for");
- if (data != "" && data != undefined) {
- haifm.loadMobilePage("haifm","viewXxlist.htm?from=" + data +"&page=" + $("#page").val() + "&mcid=" + $("#mcid").val());
- }
- myScroll.scrollTo(0, 0);
- myScroll.refresh();
- });
- //根据from 显示内容
- if (from == "sbxx") {
- $("#sbxx").addClass("yujingActive").siblings().removeClass();
- } else if (from =="scxx"){
- $("#scxx").addClass("yujingActive").siblings().removeClass();
- }else if (from =="mctg"){
- $("#tgxx").addClass("yujingActive").siblings().removeClass();
- }
- });
-
- function onBack(){
- haifm.loadMobilePage("haifm", "haifmMain.htm?uuid=" + $("#uuid").val() + "&mcid=" + $("#mcid").val());
- }
-
- function viewXxtsxx1(id, from, page) {
- haifm.loadMobilePage("haifm", "viewGtxxtsxx.htm?xxid=" + id + "&from=" + from + "&mcid="+$("#mcid").val() +"&page=" +page);
- }
- function viewXxtsxx2(id, from, page) {
- haifm.loadMobilePage("haifm", "viewGtxxtsxx.htm?xxid=" + id + "&from=" + $("#from").val() + "&mcid="+$("#mcid").val() +"&page=" +page);
- }
- </script>
- </head>
- <body>
- <form name="sub" id="sub" method="post" action="jzXxList.htm">
- <input type="hidden" id="from" value="$!from">
- <input type="hidden" id="page" value="$!page">
- <input type="hidden" id="maxPage" value="$!maxPage">
- <div class="container">
- <div class="header">
- <div class="btn-group" role="group">
- <span class="glyphicon glyphicon glyphicon-menu-left" aria-hidden="true" onclick="onBack()"></span>
- </div>
- <p>信息详情</p>
- </div>
- <div class="fenmian_dayNumBox titleText" style="display:none;">
- $!mcmc
- </div>
- <section class="yujing_iscroll">
- <div class="container iscroll_content" id="container">
- <ul id = "sb">
- #foreach($obj in $!xxtsList)
- <li>
- <div class="sbsj1">$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!obj.tssj)</div>
- <div class="sbxxBox" onclick="viewXxtsxx1('$!obj.id', '$!from', $('#page').val())">
- <p class="sbp1">$!obj.bt</p>
- <div class="sbsj2">$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!obj.fbsj)</div>
- <p class="sbp2">$!obj.zw</p>
- <span #if ("$!obj.ydzt" == "0") class="unread" #else class="" #end ></span>
- </div>
-
- </li>
- #end
- </ul>
- <div id="pullUp" class="">
- <div class="pullUpLabel">上拉加载更多</div>
- </div>
- </div>
- </section>
- <div class="scrollX" style="display:none;">
- <div class="btnBox">
- <div data-for="sbxx" id="sbxx" class="yujingActive">设备信息</div>
- <div data-for="scxx" id="scxx">生产信息</div>
- <div data-for="mctg" id="tgxx">通告</div>
- </div>
- </div>
- </div>
- </form>
- </body>
- </html>
|