2019-02-20

作者: _信仰zmh | 来源:发表于2019-02-20 16:56 被阅读1次

viewDaily.html

<!doctype html>
<html class="no-js" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>我的报告</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">
    <link rel="stylesheet" href="assets/css/amazeui.css">
    <link rel="stylesheet" href="assets/css/iconfont.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/viewDaily.css">
</head>
<body>
<div class="container">
    <header data-am-widget="header" class="am-header am-cf am-header-search my-header">
        <h1 class="am-header-title">
            <a href="javascript:;" class="" id="headerTitle" >
                <div class="city-header">
                    <span id="statusDisplay">报告概览</span>
                </div>
            </a>
        </h1>

        <div class="am-header-right am-header-nav">
            <a href="javascript:;" class="" onclick="viewSearchWindow()">
                <i class="am-header-icon am-icon-search"></i>
                <span></span>
            </a>
            <!--<a href="javascript:;" class="" onclick="addWorkOrder()">-->
                <!--<i class="am-header-icon icon-gxinjiangongdan" style="font-weight:bold;"></i>-->
            <!--</a>-->
        </div>
    </header>

    <!--<div id="statusSwitchDropDown" class="am-dropdown" data-am-dropdown style="width:100%;position: absolute;top:35;left:0;">-->
        <!--<button id="statusSwitchButton" style="display:none;padding:0 0 0 0;line-height:0;" class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>下拉列表 <span class="am-icon-caret-down"></span></button>-->
        <!--<ul class="am-dropdown-content" id="statusSelected">-->
        <!--</ul>-->
    <!--</div>-->

    <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
        <div class="nodatadiv" style="display:none;">未查询到相关记录！</div>
        <div id="Icon-emjo">
            <span class="icon-running Icon-Run"></span>
        </div>
        <div class="am-list-news-bd">

            <ul class="am-nav am-nav-ul" style="" id="list">
            </ul>
            <ul class="am-list am-list-ul" id="uiList" style="position: relative;">
            </ul>
        </div>
    </div>

    <footer id="loadMore" data-am-widget="footer" class="am-footer am-footer-default" style="display:none;">
        <div  class="am-footer-miscs " >
            <span class="am-icon-spinner am-icon-spin"></span>&nbsp;&nbsp;正在更新数据
        </div>
    </footer>

    <button type="button" style="display:none;" class="am-btn am-btn-secondary" data-am-modal="{target: '#my-actions'}" id="actionButton">
        Actions
    </button>



    <div class="am-modal am-modal-prompt" tabindex="-1" id="searchModal">
        <div class="am-modal-dialog" style="width:100%;vertical-align: top !important">
            <div class="am-modal-bd">
                <div>
                    <table style="width:100%;"><tr>
                        <td width="120px">
                            <select id="querySelected" data-am-selected="{btnWidth: '120px', btnSize: 'sm', btnStyle: 'secondary'}">
                                <option value="reportTitle" selected>报告名称</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" id="queryContent" placeholder="请输入内容进行查询" class="am-form-field searchInput" style="height: 32px;" required/>
                        </td>
                    </tr></table>
                </div>
            </div>
            <div class="am-modal-footer searchFooter">
                <span class="am-modal-btn searchButton" data-am-modal-cancel>清除</span>
                <span class="am-modal-btn searchButton" data-am-modal-confirm>搜索</span>
            </div>
        </div>
    </div>

    <!--弹出框-->

    <div class="am-modal am-modal-no-btn" tabindex="-1" id="your-modal1">
        <div class="am-modal-dialog alertContent" >
                订阅成功
        </div>
    </div>
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="your-modal2">
        <div class="am-modal-dialog alertContent" >
                取消订阅成功
        </div>
    </div>

    <!--<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">-->
        <!--<div class="am-modal-dialog">-->
            <!--<div class="am-modal-bd">-->
                <!--确定要撤销这份工单吗？-->
            <!--</div>-->
            <!--<div class="am-modal-footer">-->
                <!--<span class="am-modal-btn" data-am-modal-cancel>取消</span>-->
                <!--<span class="am-modal-btn" data-am-modal-confirm>确定</span>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.js"></script>
<script src="assets/js/mobileClient.js"></script>
<script src="assets/js/util.js"></script>
<script src="viewDaily.js"></script>
</body>
</html>

viewDaily.js



var customerId = getPageParam("customerId");
var customerGroup = getPageParam("customerGroup");
var tenantType = getPageParam("tenantType");
var instanceId = getPageParam("instanceId");
var userId = getPageParam("userId");
var selected = "";
var content = "";
var recordCount = 0;
var isLoadEnd = true;
//是否为运营人员
var isCustomerPeople = "";
var iscustomerId = "";
var subscribeResult = "";

//根据连接中是否含有DataSource调用不同的服务服务的不同，是后台数据库的不同
var diffSerivce = "";


//var bgCloud="bgcloud";
////从链接中取到bgCloud
//var index = window.location.href.indexOf("isbgCloud");

var url = window.location.href;
var result = url.split("?")[1];
var results = result.split("#")[0];

var keyValue = results.split("&");
console.log(keyValue);
var obj = {};
for(let i = 0;i<keyValue.length;i++){
    var item = keyValue[i].split("=");
    obj[item[0]] = item[1];
}
console.log(obj);
//判断公众号的不同；
var isbgCloud = obj.isbgCloud;
var  datasource = 'ecmp';
if(obj.hasOwnProperty("datasource")){
    datasource = obj.datasource;
    diffSerivce = "invokeBWServiceForMultiDataSource";
}else {
    diffSerivce = "invokeBWService";
}


console.log(datasource)
//console.log(urlList)
//var isbgCloud = window.location.href.slice(index).split("=")[1];
//console.log(urlContent);
//
//sessionStorage.setItem("isbgCloud",bgCloud);
//
//var isbgCloud = sessionStorage.getItem("isbgCloud");
//console.log("sessionStorage.",isbgCloud)


// 点击search，弹出的框
function viewSearchWindow(){
    $('#searchModal').modal({
        relatedTarget: this,
        onConfirm: function(e) {
            var currentSelected = $('#querySelected').val();
            var currentContent = $("#queryContent").val();
            if(content == currentContent){
                return;
            }
            selected = currentSelected;
            content = currentContent;
            recordCount = 0;
            console.log("selected",selected)
            //$("#list").children('li').remove();
            $('.nodatadiv').css('display','none');
            searchMoney();
            //loadRackList();
        },
        onCancel: function(e) {
            $("#queryContent").val("");
            if(content == ""){
                return;
            }
            selected = "";
            content = "";
            recordCount = 0;
            //$("#list").children('li').remove();
            $('.nodatadiv').css('display','none');
            loadData()
            //loadRackList();

        }
    });
}

//search
//点击弹出框按照日报名称查询
function searchMoney(){
    isLoadEnd = false;
    //$('#loadMore').css('display','');
    $("#Icon-emjo").css("display","block");
    if(isCustomerPeople == 1){
        iscustomerId = "";
    }else {
        iscustomerId = customerId;
    }
    $.ajax({
        type:"POST",
        async:true,
        url : serviceUrl,
        data : {
            "service" : "BC20",
            "method" : diffSerivce,
            "eiinfo" : '{attr:{"serviceId":"OC05_GETSUBSCRIBEREPORTS","method":"getSubscribeReports","datasource":"'+datasource+'","isbgCloud":"'+isbgCloud+'","userID":"'+userId+'","tenantID":"'+iscustomerId+'","reportTitle":"'+content+'",limit:"1000",offset:"0"},blocks:{result:{attr:{},meta:{attr:{},columns:[]},rows:[]}}}'
        },
        dataType : "json",
        success:function(msg) {
            $("#list").css("display","none");
            $("#uiList").css("marginLeft","0");
            reportContent(msg);
        },
        error : function(xmlR, status, e) {
            errorMsg();
////            return false;
        }
    })
}

//日报按照租户查询，侧边栏点击租户查询
function toApplication(tenantID,e){

    var listLi = document.getElementsByClassName("listLi");
    for(var i =0;i<listLi.length;i++){
        listLi[i].style.borderLeft = "2px solid transparent";
        listLi[i].style.backgroundColor = "#f5f5f5";
    }
    if(e != "Window"){
        e.style.borderLeft = "2px solid #EF8C00";
        e.style.backgroundColor = "#F9F9F9";
    }else {
        listLi[0].style.borderLeft = "2px solid #EF8C00";
        listLi[0].style.backgroundColor = "#F9F9F9";
    }

    $('#Icon-emjo').css('display','block');
    if(tenantID == "undelined"){
        tenantID ="";
    }else {
        $.ajax({
            type:"POST",
            async:true,
            url : serviceUrl,
            data : {
                "service" : "BC20",
                "method" : diffSerivce,
                "eiinfo" : '{attr:{"serviceId":"OC05_GETSUBSCRIBEREPORTS","method":"getSubscribeReports","datasource":"'+datasource+'","isbgCloud":"'+isbgCloud+'","userID":"'+userId+'","tenantID":"'+tenantID+'","reportTitle":"",limit:"1000",offset:"0"},blocks:{result:{attr:{},meta:{attr:{},columns:[]},rows:[]}}}'
            },
            dataType : "json",
            success:function(msg) {
                $("#list").css("display","block");
                $("#uiList").css("marginLeft","22%");
                reportContent(msg);
            },
            error : function(xmlR, status, e) {
                errorMsg();
////            return false;
            }
        });
    }
}
// 点击订阅或取消订阅保存值到后台
function Subscribe(reportId,userID,e) {
    if(e.innerText == "订阅"){
        e.removeAttribute("onclick"); //避免连续请求
        $.ajax({
            type:"POST",
            async:true,
            url : serviceUrl,
            data : {
                "service" : "BC20",
                "method" : diffSerivce,
                "eiinfo" : '{attr:{"serviceId":"OC05_SUBSCRIBEREPORTS","method":"SubscribeReports","datasource":"'+datasource+'","userID":"'+userID+'","reportId":"'+reportId+'"},blocks:{result:{attr:{},meta:{attr:{},columns:[]},rows:[]}}}'
            },
            dataType : "json",
            success:function(msg) {
                e.setAttribute("onclick","Subscribe('"+reportId+"','"+userId+"',this)"); //请求返回后，再添加onclick事件
                var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
                var status = eiinfo.status;
                if(status == 0){
                    e.innerText ="已订阅";
                    e.style.color="gray";
                    e.style.border = "1px solid gray";
                    $('#your-modal1').modal({
                        width:100,
                        height:60
                    });
                    setTimeout(function(){
                        $('#your-modal1').modal("close");
                    },800)

                }else {
                    console.log("取消失败")
                }
            },
            error : function(xmlR, status, e) {
                e.setAttribute("onclick","Subscribe('"+reportId+"','"+userId+"',this)"); //请求返回后，再添加onclick事件
                errorMsg();
            }
        });
    }else if(e.innerText == "已订阅"){
        $.ajax({
            type:"POST",
            async:true,
            url : serviceUrl,
            data : {
                "service" : "BC20",
                "method" : diffSerivce,
                "eiinfo" : '{attr:{"serviceId":"OC05_UNSUBSCRIBEREPORTS","method":"unSubscribeReports","datasource":"'+datasource+'","userID":"'+userID+'","reportId":"'+reportId+'"},blocks:{result:{attr:{},meta:{attr:{},columns:[]},rows:[]}}}'
            },
            dataType : "json",
            success:function(msg) {

                var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
                var status = eiinfo.status;
                console.log("status",status)
                if(status == 0){
                    e.innerText ="订阅";
                    e.style.color="#57b0dd";
                    e.style.border = "1px solid #57b0dd";
                    $('#your-modal2').modal({
                        width:100,
                        height:60
                    });
                    setTimeout(function(){
                        $('#your-modal2').modal("close");
                    },800)
                }else {
                    console.log("取消失败")
                }
            },
            error : function(xmlR, status, e) {
                errorMsg();
////            return false;
            }
        });
    }

}


/**
 * check user role
 */
//根据userId检查是否为租户管理员
function checkUserRole(userId){
    //if(null!=sessionStorage.getItem('hasChooseTenantID')){
    //    $("#consoleDiv").show();
    //    $("#navbarDiv").show();
    //    return;
    //}
    if(userId != null && userId != "" && userId != undefined){
        $.ajax({
            type : "POST",
            async : false,
            url : serviceUrl,
            data : {
                "service" : "BC20",
                "method" : diffSerivce,
                "eiinfo" : '{attr:{"serviceId":"OC00_CHECKUSERIFOPERATOR","datasource":"'+datasource+'","userId":"'+userId+'"},blocks:{result:{attr:{},meta:{attr:{},columns:[]},rows:[]}}}'
            },
            dataType : "json",
            success : function(msg) {
                //var tenantselect = $("#tenantID");
                var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
                var ifOperator = eiinfo.get("ifOperator");
                var result = [];
                var newArray = [];
                var resultList =[];
                if( null !=subscribeResult && subscribeResult.length > 0){
                    //运营团队可订阅所有租户下报告，查询租户列表
                    if(true==ifOperator){
                        result = getTenantList();
                    }
                    //是否为运营人员
                    isCustomerPeople = 1;
                    if(null!=result && result.length>0){
                        $("#list").css("display","block");
                        $("#uiList").css("marginLeft","22%");


                        subscribeResult.forEach(function(item){
                            newArray.push(item.tenantID);
                        });

                        var resultArray = [...new Set(newArray)];
                        for(let tenantID of resultArray){
                            var list = result.filter(item =>{
                                    return tenantID == item.tenantID;
                        });
                            resultList.push(...list);
                        }
                        console.log("result)",result);
                        console.log("resultArray)",resultArray);
                        console.log("resultList",resultList);
                        console.log("subscribeResult",subscribeResult);


                        var uiList="";
                        for(var i=0;i<resultList.length;i++){
                            //'<div class="wrap-content wrap' + i + '" > '
                            uiList = uiList+"<li class='listLi'>" +
                                "<div style='height: 2.5rem;line-height: 2.5rem' onclick = 'toApplication(\""+resultList[i].tenantID+"\",this)' class='listLi listLi" + i + "' >" +
                                "<span class='tenantId' style='display:none;visibility: hidden;width: 0;height: 0;'>"+ resultList[i].tenantID+"</span>" +
                                "<p class='mobile-ellipsis' style='width: 100%;margin: 0;padding: 0 2px 0 4px;width: 100%;display: inline-block;' '>"+resultList[i].tenantName+"</p>" +
                                "</div>" +
                                "</li>"
                        }
                        $("#list").append(uiList);
                        for(let i=0;i<resultList.length;i++){
                            var distance =""
                            $('.listLi'+i).on("touchstart",function(e){
                                //console.log(111)
                                // console.log(e)
                                _touch = e.originalEvent.targetTouches[0].pageX;
                                // console.log($('.wrap'+i))

                            })
                            $('.listLi'+i).on("touchmove",function(e){

                                // console.log(e.originalEvent)
                                var  distance = e.originalEvent.targetTouches[0].pageX - _touch ;
                                // console.log(distance)
                                if(distance<0){
                                    if(distance <-100){
                                        distance = -200
                                    }
                                    var css ={
                                        "transform": "translateX("+ distance +"px)",
                                        "transition":"0.5s",
                                        width: "150px",
                                        "margin": 0,

                                    }
                                    $('.listLi'+i).removeClass("wrap").css(css)

                                }
                                //if(distance>0){
                                //    if(distance >60){
                                //        distance = 0
                                //    }
                                //    var css ={
                                //        transform: "translateX("+distance+"px)",
                                //
                                //        width: "350px",
                                //        margin: 0,
                                //
                                //
                                //
                                //    }
                                //    $('.listLi'+i).removeClass("wrap").css(css)
                                //}

                                // console.log(_touch)
                                // if()
                            })
                            $('.listLi'+i).on("touchend",function(e){
                                //console.log(1111)
                                if(distance < 60){
                                    distance = 0
                                    //console.log(111222)
                                }
                                var css={
                                    transform: "translateX(0px)",
                                    transition:"0.5s",
                                    width:"100%",
                                    //overflow:"hidden",
                                    //"white-space":"nowrap",
                                    "text-overflow":"ellipsis"
                                }
                                $('.listLi'+i).css(css)

                            })
                        }
                        toApplication(resultList[0].tenantID,"Window")

                    }else{
                        isCustomerPeople = 0;
                        $.ajax({
                            type:"POST",
                            async:true,
                            url : serviceUrl,
                            data : {
                                "service" : "BC20",
                                "method" : diffSerivce,
                                "eiinfo" : '{attr:{"serviceId":"OC05_GETSUBSCRIBEREPORTS","method":"getSubscribeReports","datasource":"'+datasource+'","isbgCloud":"'+isbgCloud+'","userID":"'+userId+'","tenantID":"'+customerId+'","reportTitle":"",limit:"1000",offset:"0"},blocks:{result:{attr:{},meta:{attr:{},columns:[]},rows:[]}}}'
                            },
                            dataType : "json",
                            success:function(msg) {
                                $("#list").css("display","none");
                                $("#uiList").css("marginLeft","0");
                                reportContent(msg);

                            },
                            error : function(xmlR, status, e) {
                                errorMsg();
////            return false;
                            }
                        });
                    }
                }else {
                    tipMsg();
                }

            },
            error : function(xmlR, status, e) {
                errorMsg();
            }
        });
    }
    else{
        errorMsg();
    }
}


//获取租户列表
function getTenantList(){
    var tenants = [];
    $.ajax({
        type : "POST",
        async : false,
        url : serviceUrl,
        data : {
            "service" : "BC20",
            "method" : diffSerivce,
            "eiinfo" : '{attr:{"serviceId":"OC00_GETTENANTLIST","datasource":"'+datasource+'","offset":"0","limit":"-1"},blocks:{result:{attr:{},meta:{attr:{},columns:[]},rows:[]}}}'
        },
        dataType : "json",
        success : function(msg) {
            var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
            tenants = eiinfo.get("tenants");
        },
        error : function(xmlR, status, e) {
            errorMsg();
        }
    });
    return tenants;
}


//出错信息
function errorMsg(){
    $("#list").css("display","none");
    $("#uiList").css("marginLeft","0");
    var uiList = document.getElementById("uiList");
    while(uiList.hasChildNodes()) //当div下还存在子节点时 循环继续
    {
        uiList.removeChild(uiList.firstChild);
    }
    var uiLists="";
    uiLists = uiLists+'<ul class="wrap-ul" id="wrap-Nothing" style="padding-right: 1%;">' +
        '<a class="wrap-Nothing-content"> ' +
        '<i class="icon-chucuoliao"></i> ' +
        '<p>出错啦</p> ' +
        '</a> ' +
        '</ul>';

    $("#uiList").append(uiLists);
    $("#Icon-emjo").css("display","none");
    $(uiList).scrollTop(0);
    return false;
}

//提示信息
function tipMsg(){
    $("#list").css("display","none");
    $("#uiList").css("marginLeft","0");
    var uiList = document.getElementById("uiList");
    while(uiList.hasChildNodes()) //当div下还存在子节点时 循环继续
    {
        uiList.removeChild(uiList.firstChild);
    }
    var uiLists="";
    uiLists = uiLists+'<ul class="wrap-ul" id="wrap-Nothing" style="padding-right: 1%;">' +
        '<a class="wrap-Nothing-content"> ' +
        '<i class="icon-chucuoliao"></i> ' +
        '<p>没有可订阅的报告</p> ' +
        '</a> ' +
        '</ul>';

    $("#uiList").append(uiLists);
    $("#Icon-emjo").css("display","none");
    $(uiList).scrollTop(0);
    return false;
}
function toReportDetailPage(title, content){
    console.log(title,content);
    console.log("详细页面")
}

function reportContent(msg){
    var uiList = document.getElementById("uiList");
    while(uiList.hasChildNodes()) //当div下还存在子节点时 循环继续
    {
        uiList.removeChild(uiList.firstChild);
    }
    //$("#uiList").removeChild("li");
    var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
    var resultLists = eiinfo.get("SubscribeReports");
    totalCount = eiinfo.getAttr("count").count;
    var uiLists="";
    var color="";
    var border ="";
    var distance = "";
    if(totalCount>0 || resultLists.length>0){
        var subscribe = "";
        for(var i=0;i<resultLists.length;i++){
            if(resultLists[i].userID != "" && resultLists[i].userID != null && resultLists[i].userID !=undefined ) {
                subscribe = "已订阅";
                color = "gray";
                border = "1px solid gray"
            }else {
                subscribe = "订阅";
                color = "#57b0dd";
                border = "1px solid #57b0dd"
            }
            uiLists = uiLists+'<li class="wrap"> ' +
                '<div class="wrap-icon"> ' +
                '<img src="https://view.baocloud.cn:7090/bsview/'+resultLists[i].icon+'"style="width: 40px;height: 40px;">'+
                '</div> ' +
                '<div class="wrap-contentp" onclick="toReportDetailPage(\''+resultLists[i].reportTitle+'\',\''+resultLists[i].description+'\')"> ' +
                '<div class="wrap-content wrap' + i + '" > ' +
                '<p class="wrap-content-head mobile-ellipsis" >'+resultLists[i].reportTitle+'</p>' +
                '<p class="wrap-content-text " style="margin-top:5px;font-size:10px;color:gray;">'+resultLists[i].description+'</p> ' +
                '</div> ' +
                '</div> ' +
                '<span style="color:'+color+';border:'+border+'" class="wrap-dingyue" onclick="Subscribe(\''+resultLists[i].reportId+'\',\''+userId+'\',this'+')">'+subscribe+'</span> ' +
                '</li>'
        }

    }else {
        uiLists = uiLists+'<ul class="wrap-ul" id="wrap-Nothing" style="padding-right: 1%;">' +
            '<a class="wrap-Nothing-content"> ' +
            '<i class="icon-dingyue"></i> ' +
            '<p>该租户没有报告概览</p> ' +
            '</a> ' +
            '</ul>';

    }
    $("#uiList").append(uiLists);
    $("#Icon-emjo").css("display","none");
    for(let i=0;i<resultLists.length;i++){
        $('.wrap'+i).on("touchstart",function(e){
            // console.log(111)
            // console.log(e)
            _touch = e.originalEvent.targetTouches[0].pageX;
            // console.log($('.wrap'+i))

        })
        $('.wrap'+i).on("touchmove",function(e){
            //console.log(111111)
            var hfontsize = $('.wrap'+i + '>.wrap-content-head').css('font-size').slice(0,-2);
            var tfontsize = $('.wrap'+i + '>.wrap-content-text').css('font-size').slice(0,-2);
            var hlength = $('.wrap'+i + '>.wrap-content-head').text().length;
            var tlength = $('.wrap'+i + '>.wrap-content-text').text().length
            var textw = (hlength*hfontsize > tlength*tfontsize )?hlength*hfontsize:tlength*tfontsize
            //console.log(textw)
            var  distance = e.originalEvent.targetTouches[0].pageX - _touch ;
            //var textwidth = $('.wrap'+i + '>.wrap-content-head').innerWidth();
            //console.log(textwidth)


            if(distance<0){
                if(distance < - 100 && textw  > $(window).width()* 0.45){
                    distance = -textw + $(window).width()* 0.45 - 50
                }else if(textw < $(window).width()* 0.45){
                    distance =  0;
                }
                var css ={
                    "transform": "translateX("+ distance +"px)",
                    "transition":"0.5s",
                    width:textw + 100 + "px",
                    "margin": 0,

                }

                $('.wrap'+i).removeClass(".mobile-ellipsis").css(css)


            }

            // console.log(_touch)
            // if()
        })

        $('.wrap'+i).on("touchend",function(e){
            //console.log(1111)
            if(distance < 60){
                distance = 0
                //console.log(111222)
            }
            var css={
                transform: "translateX("+distance+"px)",
                transition:"0.5s",
                width:"100%",
                //overflow:"hidden",
                //"white-space":"nowrap",
                "text-overflow":"ellipsis"
            }
            $('.wrap'+i).css(css)

        })
    }
    $(uiList).scrollTop(0);
}

//主函数，初始化，检查是否为租户管理员
function loadData(){

    //设置高度
    $("html").height();
    $("#list").css("height",($("html").height()-64) + "px");
    $("#uiList").css("height",($("html").height()-64) + "px");

    //设置旋转按钮
    $("#Icon-emjo").css("display","block");

    //获取可订阅中的tenantID

    $.ajax({
        type:"POST",
        async:false,
        url : serviceUrl,
        data : {
            "service" : "BC20",
            "method" : diffSerivce,
            "eiinfo" : '{attr:{"serviceId":"OC05_GETSUBSCRIBEREPORTS","method":"getSubscribeReports","datasource":"'+datasource+'","isbgCloud":"'+isbgCloud+'","userID":"'+userId+'","reportTitle":"",limit:"1000",offset:"0"},blocks:{result:{attr:{},meta:{attr:{},columns:[]},rows:[]}}}'
        },
        dataType : "json",
        success:function(msg) {
            $("#list").css("display","none");
            $("#uiList").css("marginLeft","0");
            var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
            subscribeResult = eiinfo.get("SubscribeReports");
            console.log("subscribeResult111",subscribeResult)

        },
        error : function(xmlR, status, e) {
            errorMsg();
////            return false;
        }
    });

    //检查userId是否为运营人员
    checkUserRole(userId);


//    $.ajax({
//        type:"POST",
//        async:true,
//        url : serviceUrl,
//        data : {
//            "service" : "BC20",
//            "method" : "invokeBWService",
//            "eiinfo" : '{attr:{"serviceId":"OC00_GETTENANTLIST","method":"tenants",limit:"1000",offset:"10"},blocks:{result:{attr:{},meta:{attr:{},columns:[]},rows:[]}}}'
//        },
//        dataType : "json",
//        success:function(msg) {
//            $("#list").css("display","block");
//            $("#uiList").css("marginLeft","22%");
//            var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
//            totalCount = eiinfo.getAttr("count").count;
//            var result = eiinfo.get("tenants");
//            var uiList="";
//            for(var i=0;i<result.length;i++){
//                 uiList = uiList+"<li class='listLi' style='height: 2.5rem;line-height: 2.5rem' onclick = 'toApplication(\""+result[i].tenantID+"\",this)'><span class='tenantId' style='display:none;visibility: hidden;width: 0;height: 0;'>"+result[i].tenantID+"</span><p class='mobile-ellipsis' style='width: 100%;margin: 0;padding: 0 2px 0 4px;width: 100%;display: inline-block;' '>"+result[i].tenantName+"</p></li>"
//            }
//            $("#list").append(uiList);
//            toApplication(result[0].tenantID,"Window")
//        },
//        error : function(xmlR, status, e) {
//            console.log("我出错了")
////            return false;
//        }
//        })

}
loadData();

information.html

<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>我的消息</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">
    <link rel="stylesheet" href="assets/css/amazeui.css">
    <link rel="stylesheet" href="assets/css/iconfont.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
    <header data-am-widget="header" class="am-header am-cf am-header-search my-header">
        <h1 class="am-header-title">
            <a href="javascript:;" class="" id="headerTitle" onclick="viewPullDown()">
                <div class="city-header">
                    <i class="am-icon-map-marker"></i>
                    <span id="statusDisplay">全部</span>
                    <i id="angleicon" class="am-icon-angle-down"></i>
                </div>
            </a>
        </h1>

        <div class="am-header-right am-header-nav">
            <a href="javascript:;" class="" onclick="viewSearchWindow()">
                <i class="am-header-icon am-icon-search"></i>
            </a>
        </div>
    </header>

    <div id="statusSwitchDropDown" class="am-dropdown" data-am-dropdown style="width:100%;position: absolute;top:35;left:0;">
        <button id="statusSwitchButton" style="display:none;padding:0 0 0 0;line-height:0;" class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>下拉列表 <span class="am-icon-caret-down"></span></button>
        <ul class="am-dropdown-content" id="statusSelected">
            <li><a href="javascript:;" data-role="button" id="allRead" name="全部" class="status-selected-item">全部&nbsp;&nbsp;&nbsp;<span id="allReadStyle" style="display:inline-block" class="am-icon-check"></span></a></li>
            <li><a href="javascript:;" data-role="button" id="isRead" name="已读" class="status-selected-item">已读&nbsp;&nbsp;&nbsp;<span id="isReadStyle" style="display:none" class="am-icon-check"></span></a></li>
            <li><a href="javascript:;" data-role="button" id="noRead" name="未读" class="status-selected-item">未读&nbsp;&nbsp;&nbsp;<span id="noReadStyle" style="display:none" class="am-icon-check"></span></a></li>
        </ul>
    </div>

    <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
        <div class="nodatadiv" style="display:none;">未查询到相关记录！</div>
        <div class="am-list-news-bd">
            <ul class="am-list am-list-striped" id="list"></ul>
        </div>
    </div>

    <footer id="loadMore" data-am-widget="footer" class="am-footer am-footer-default" style="display:none;">
        <div  class="am-footer-miscs " >
            <span class="am-icon-spinner am-icon-spin"></span>&nbsp;&nbsp;正在更新数据
        </div>
    </footer>

    <button type="button" style="display:none;" class="am-btn am-btn-secondary" data-am-modal="{target: '#my-actions'}" id="actionButton">
        Actions
    </button>

    <div class="am-modal-actions" id="my-actions" style="display:none;">
        <div class="am-modal-actions-group">
            <ul class="am-list">
                <li><a href="javascript:;"  id="markRead" class="am-btn am-btn-default am-disabled">标为已读</a></li>
                <li><a href="javascript:;"  id="delete" class="am-btn am-btn-default">删除</a></li>
                </li>
            </ul>
        </div>
        <div class="am-modal-actions-group">
            <button class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button>
        </div>
    </div>

    <div class="am-modal am-modal-prompt" tabindex="-1" id="searchModal">
        <div class="am-modal-dialog" style="width:100%;vertical-align: top !important">
            <div class="am-modal-bd">
                <div>
                    <table style="width:100%;"><tr>
                        <td width="120px">
                            <select id="querySelected" data-am-selected="{btnWidth: '120px', btnSize: 'sm', btnStyle: 'secondary'}">
                                <option value="messageCategory" selected>消息类型</option>
                                <!--<option value="title">消息标题</option>-->
                            </select>
                        </td>
                        <td>
                            <!--<input type="text" id="queryContent" placeholder="请输入内容进行查询" class="am-form-field searchInput" style="height: 32px;display:none;" required/>-->
                            <div id="messTypeVal">
                                <select id="operatorSelect" data-am-selected="{btnWidth: '100%',btnSize: 'sm', btnStyle: 'white'}">


                                </select>
                            </div>
                        </td>
                        </td>
                    </tr></table>
                </div>
            </div>
            <div class="am-modal-footer searchFooter">
                <span class="am-modal-btn searchButton" data-am-modal-cancel>清除</span>
                <span class="am-modal-btn searchButton" data-am-modal-confirm>搜索</span>
            </div>
        </div>
    </div>
    <!--<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">-->
        <!--<div class="am-modal-dialog">-->
            <!--<div class="am-modal-bd">-->
                <!--确定要撤销这份工单吗？-->
            <!--</div>-->
            <!--<div class="am-modal-footer">-->
                <!--<span class="am-modal-btn" data-am-modal-cancel>取消</span>-->
                <!--<span class="am-modal-btn" data-am-modal-confirm>确定</span>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.js"></script>
<script src="assets/js/mobileClient.js"></script>
<script src="assets/js/util.js"></script>
<script src="information.js"></script>
</body>
</html>

information.js

调接口最好看接口文档，看哪些参数是必须的，别tm看network，坑爹玩意

///**
// * Created by zmh on 2019/2/19.
// */

var customerId = getPageParam("customerId");
var customerGroup = getPageParam("customerGroup");
var userId = getPageParam("userId");
var isCustomerAdmin = getPageParam("isCustomerAdmin");
var selected = sessionStorage.getItem('message-selected')?sessionStorage.getItem('message-selected'):"messageCategory";
var content = sessionStorage.getItem('message-content')?sessionStorage.getItem('message-content'):"";
//var mesType = "0";
var msgStatus = "";
var recordCount = 0;
var totalCount = 0;
var itemIdForAction = "";
var statusList = [];
//var clickCount = 0;
var isLoadEnd = true;


// 滚动加载
$(window).on('scroll',function(){
    if(scrollTop() + windowHeight() >= (documentHeight() - 200/*滚动响应区域高度取50px*/)){
        if(isLoadEnd && (recordCount < totalCount)){
            loadMsgList();
        }
    }
});

// 设置 操作是否禁用
function viewOperateMenu(itemId,status){
    // 用于抛出id 知道点击操作的是那一条数据
    itemIdForAction = itemId;
    // 未读status=1 可点击 标记为已读
    if(status == 1){
        $("#markRead").removeClass("am-disabled");
    }
    // 删除操作 不管是已读未读均可操作，再html上直接可点击 省去操作dom
    //$("#delete").removeClass("am-disabled");

    $("#actionButton").click();
    $("#my-actions").css('display','');
}


// 通用方法 用于标记已读和删除
function toUpdateMsgStatus(statusId,msgId){
    $.ajax({
        type : "POST",
        async : false,
        url : serviceUrl,
        data : {
            "service" : "BZ00",
            "method" : "queryWxData",
        //,"userId:"'+userId+'" 加了userId参数会报错
            "eiinfo" : '{attr:{"service":"MS00","method":"MESSAGE_UPDATE_STATUS","status":"'+ statusId +'","messageId":"'+ msgId +'","customerId":"'+ customerId  +'","userId":"'+ userId +'"},blocks:{}}'
        },
        dataType : "json",
        success : function(msg) {
            var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
            // 和门户一致 根据status判断是否成功
            var returnStatus = eiinfo.status;
            if(statusId == 0){
                var st = "删除";
            }else if(statusId == 2){
                var st = "标记为已读"
            }
            if("0"==returnStatus){
                alert(st+'成功');
                window.location.href = 'information.html?userId=' + userId + '&customerId=' + customerId + '&customerGroup=' + customerGroup+ '&isCustomerAdmin=' + isCustomerAdmin;
            }else{
                alert(st+'失败');
            }
            return true;
        },
        error : function(xmlR, status, e) {
            alert("error");
            return false;
        }
    });
}
// 删除msg
$("#delete").click(function(e){
    // 删除操作时更新状态为0
    toUpdateMsgStatus(0,itemIdForAction);
    // return 用于关闭modal框
    return;
});
// 标为已读msg
$("#markRead").click(function(e){
    toUpdateMsgStatus(2,itemIdForAction)
    return;
});


// amazi modal 关闭后 将禁用状态添加
$('#my-actions').on('closed.modal.amui',function(){
    //$("#delete").addClass("am-disabled");
    $("#markRead").addClass("am-disabled");
});

// 模拟amazi 下拉框点击
function viewPullDown(){
    $("#statusSwitchButton").click();
}
// 已读未读 下拉框操作
$('#statusSwitchDropDown').on('opened.dropdown.amui', function(){
    $("#angleicon").removeClass("am-icon-angle-down");
    $("#angleicon").addClass("am-icon-angle-up");
});

$('#statusSwitchDropDown').on('closed.dropdown.amui', function(){
    $("#angleicon").removeClass("am-icon-angle-up");
    $("#angleicon").addClass("am-icon-angle-down");
});

// 搜索查询  搜索和清除操作
function viewSearchWindow(){
    $('#searchModal').modal({
        relatedTarget: this,
        onConfirm: function(e) {
            var currentSelected = $('#querySelected').val();
            if(currentSelected=='messageCategory'){
                var currentContent = $("#operatorSelect").val();
            }else{
                var currentContent = $("#queryContent").val();
            }
            if(selected == currentSelected && content == currentContent){
                return;
            }
            selected = currentSelected;
            content = currentContent;
            recordCount = 0;
            $("#list").children('li').remove();
            $('.nodatadiv').css('display','none');
            sessionStorage.setItem('message-selected', selected);
            sessionStorage.setItem('message-content', content);
            loadMsgList();
        },
        onCancel: function(e) {
            $("#queryContent").val("");
            // 选中 amazui 下拉框第一项 使用.val("0")方法无效
            $("#operatorSelect").val("0");
            //$("#operatorSelect").find('option').attr('selected', false);
            //$("#operatorSelect").find('option').eq(0).attr('selected', "selected");
            //$("#operatorSelect").trigger('changed.selected.amui');
            if(content == ""){
                return;
            }
            selected = "";
            content = "";
            recordCount = 0;
            $("#list").children('li').remove();
            $('.nodatadiv').css('display','none');
            sessionStorage.setItem('message-selected', selected);
            sessionStorage.setItem('message-content', content);
            loadMsgList();
        }
    });
}
// 获取信息列表
function loadMsgList() {
    isLoadEnd = false;
    $('#loadMore').css('display','');
    if(selected=="messageCategory"){
        content = content==0?"":content;
    }
    $.ajax({
        type : "POST",
        async : true,
        url : serviceUrl,
        data : {
            "service" : "BZ00",
            "method" : "queryWxData",
            "eiinfo" : '{attr:{"service":"MS00","method":"MESSAGE_QUERY_LIST","offset":"'+recordCount+'","limit":"10","status":"'+msgStatus+'","'+selected+'":"'+content+'","customerId":"'+ customerId  +'","userId":"'+ userId +'"},blocks:{}}'
        },
        dataType : "json",
        success : function(msg) {
            var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
            var result = eiinfo.get("MESSAGE_QUERY_LIST");
            totalCount = eiinfo.getAttr("count").count;
            if(result.length == 0){
                isLoadEnd = true;
                $('#loadMore').css('display','none');
                $('.nodatadiv').css('display','block');

                return;
            }
            //var tcount = eiinfo.getAttr().totalCount;
            //if(tcount==0){
            //    $("#list").empty();
            //}
            $('.nodatadiv').css('display','none');
            recordCount = recordCount + result.length;

            for(var i = 0; i < result.length; i++){
                var itemId = result[i]["messageId"];
                var gdType = result[i]["messageCategoryName"];
                var status = result[i]["status"];
                if(status==1){
                    var statusCH = "未读";
                }else{
                    var statusCH = "已读";
                }

                var title = result[i]["title"];
                var openDate = result[i]["createTime"];

                var li="<li class='am-g am-list-item-desced'><table style='width:100%'><tr><td>"
                +"<a href='msgdetail.html?userId=" + userId + "&msgId="+itemId+ "&customerId="+customerId+"'>"
                    +"<div class='am-list-item-hd '><span style='color:#333;font-size:23px;' ";
                    if(status==1){
                        li +="class='icon-weidu'>";
                    }else{
                        li +="class='icon-yidu'>";
                    }
                    li+="</span>&nbsp;"+ itemId + "&nbsp;&nbsp;&nbsp;"+ gdType+ "&nbsp;&nbsp;&nbsp;"+ statusCH+ "</div>"
                    +"<div class='am-list-item-text'>"+ title + "</div>"
                    +"<div class='am-list-item-text'>"+ openDate + "</div>"
                    +"<td align='center' width='50px' onclick='viewOperateMenu("+itemId+", \""+status+"\")'><span class='icon-diandiandian' style='font-size:20px;color:#aaaaaa;'></span></td></tr></table></li>";

                $("#list").append(li);

            }
            isLoadEnd = true;
            $('#loadMore').css('display','none');
        },
        error : function(xmlR, status, e) {
            alert(xmlR);
            alert(status);
            alert(e);
            alert("error");
            isLoadEnd = true;
            $('#loadMore').css('display','none');
        }
    });
}
//  通用方法：获取全部、未读、已读 信息条数
//  不再调用 全部和未读各自条数的方法MESSAGE_UNREAD_COUNT\MESSAGE_ALL_COUNT，无直接调用已读条数方法（差值）
function getItemStausCount(name){
    var statusId = "";
    if(name=="全部"){
        statusId = "";
    };
    if(name=="未读"){
        statusId = "1";
    }
    if(name=="已读"){
        statusId = "2";
    }
    $.ajax({
        type : "POST",
        async : false,
        url : serviceUrl,
        data : {
            "service" : "BZ00",
            "method" : "queryWxData",
            "eiinfo" : '{attr:{"service":"MS00","method":"MESSAGE_QUERY_LIST","offset":"0","limit":"1000","status":"'+ statusId +'","messageCategory":"","customerId":"'+ customerId  +'","userId":"'+ userId +'"},blocks:{}}'
        },
        dataType : "json",
        success : function(msg) {
            var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
            var count = eiinfo.getAttr().totalCount;
            count?count:0;
            // 设置状态条数html
            $("#statusDisplay").html(name+"("+count+")");
            return true;
        },
        error : function(xmlR, status, e) {
            alert("error");
            return false;
        }
    });
}
// 第一次默认选中全部状态条数
getItemStausCount("全部");
// 获取消息类型 name是id，cname是消息中文名
function getMessageType(){
    $.ajax({
        type : "POST",
        async : false,
        url : serviceUrl,
        data : {
            "service" : "BZ00",
            "method" : "queryWxData",
            "eiinfo" : '{attr:{"service":"MS00","method":"MESSAGE_CATEGORY_INFO"},blocks:{}}'
        },
        dataType : "json",
        success : function(msg) {
            var eiinfo = Json2EiInfo.prototype.parseJsonObject(msg);
            console.log(msg)
            var type = eiinfo.getAttr().MESSAGE_CATEGORY_INFO;

            // 设置状态下拉选项
            $("#operatorSelect").empty();
            var str ="<option value=''></option>";
            for(var i = 0;i<type.length; i++){
                if(type[i].name == 0){
                    str += '<option value='+type[i].name+'>'+type[i].cname+'</option>';
                }else{
                    str += '<option value='+type[i].name+'>'+type[i].cname+'</option>';
                }
            }
            $("#operatorSelect").append(str);
            return true;
        },
        error : function(xmlR, status, e) {
            alert("error");
            return false;
        }
    });
}

// 后台获取消息类型 用于查询条件绑定 不在使用前台写死
getMessageType();

// 切换input和select
$("#querySelected").on('change', function() {
    var selectedValue = $('#querySelected').val();
    if(selectedValue == 'messageCategory'){
        $("#queryContent").css('display','none');
        $("#messTypeVal").css('display','');
    }
    else{
        $("#messTypeVal").css('display','none');
        $("#queryContent").css('display','');
    }
});

var oldStatus = "全部";
// 各自状态的条数
function loadWorkOrderScoreBoard(){
            // 切换全部、已读、未读 显示条数，传参
            $(".status-selected-item").click(function(e) {
                $("#allReadStyle").hide();
                $("#isReadStyle").hide();
                $("#noReadStyle").hide();
                $('#'+this.id+"Style").show();

                getItemStausCount(this.name);

                if(this.name == "全部"){
                    msgStatus = "";
                }
                if(this.name == "未读"){
                    msgStatus = "1";
                }
                if(this.name == "已读"){
                    msgStatus = "2";
                }
                // 状态切换 offset默认0
                //if(oldStatus!=this.name){
                //    recordCount = 0;
                //}
                //
                //oldStatus = this.name;
                $("#statusSwitchButton").click();
                //selected = "";
                //content = "";
                recordCount = 0;
                $("#list").children('li').remove();
                $('.nodatadiv').css('display','none');
                //sessionStorage.setItem('message-selected', selected);
                //sessionStorage.setItem('message-content', content);
                loadMsgList();
            });
    loadMsgList();
}
// load页面
function load(){
    if(selected != null && selected != ""){
        $('#querySelected').val(selected);
        $("#querySelected").trigger('changed.selected.amui');
    }
    if(content != null && content != ""){
        if(selected == 'messageCategory'){
            $("#queryContent").val("");
            $("#operatorSelect").val(content);
        }else{
            $("#queryContent").val(content);
        }

    }
    loadWorkOrderScoreBoard();
}

setTimeout(function(){
    load();
},100);

2019-02-20

information.html

information.js

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞