iHealth-app-demo/html/device/js/device-data.js

var self,
    initLevel, 
    type, 
    level, 
    area, 
    title, 
    startDate = '', 
    endDate = '',
    lowLevel,
    lowCode = '',
    deviceCode = "", // kong所有设备，1血压计，2血糖仪
    dateType = 1, //折线图坐标值1-日，2-周，3-月
    areaType; //标记底部区域选中的tab的值， 4 - 各区， 3 - 社区， 2 - 团队
    
var userRole;

var reqParam = []; //请求参数
var reqList = []; //请求的链接数据，根据这些信息后退的时候使用


//定义年份
var chooseYear;
var now = new Date();
if(now.getMonth() >= 6){
    chooseYear = now.getFullYear();
}else{
    chooseYear = now.getFullYear() - 1;
}

mui.plusReady(function(){
    var self = plus.webview.currentWebview();
    userRole = plus!=null ? JSON.parse(plus.storage.getItem("selectedRole")) : {};
    initLevel = userRole.code == CITY_CODE  ? 4 : userRole.code.length==6 ? 3 : 2;
    level = initLevel;
    area = userRole.code;
    title = userRole.name;
    startDate = getStartDate();
    endDate = getEndDate();
    //初始默认选中的时间和类型
    $("#areaTitle").text(title);
    
    //控制底部各区等tab的显示
    showTabs();
    
    initReqParams(); //现获得页面请求的接口参数
    //记录返回链接信息
    reqList.push({
        level: level,
        lowLevel: lowLevel,
        area: area,
        title: title,
        lowCode: lowCode,
        req: reqParam
    });
    loadData([0,1]); //现获得页面请求的接口参数
    
    initScroller();
    shaixuanInit(self);
    bindEvents();
});

//获得页面请求的接口参数
function initReqParams(){
    var topIndex = {"4": "29", "3": "44", "2": "43"}, //顶部区域对应的level ： index 
        bottomIndex = {"4": "44", "3": "43", "2": "42"}; //与选中的当前底部区域tab的值有关 areaType
    
    if(lowCode && lowCode != "0"){
        var topIndex = {"4": "51", "3": "54", "2": "53"}, //顶部区域对应的level ： index 
        bottomIndex = {"4": "54", "3": "53", "2": "52"}; //与选中的当前底部区域tab的值有关 areaType
    }
    
    var index = "85,86",
        bIndex = bottomIndex[areaType];
    reqParam = [{
        url: "/statistics/lowlevel_device",
        reqType: 'get',
        data: {level: level, area: area, sort: 1, deviceType: deviceCode}
    },{
        url: "/statistics/interval_total",
        reqType: 'get',
        data: {level: level, area: area, startDate: startDate, endDate: endDate, interval: dateType, index: index, lowCode: deviceCode}
    }];
    if(lowLevel){
        reqParam[0].data.lowLevel = lowLevel;
    }
}

/*
 * 加载页面数据
 * @param loadArr array 记录需要请求的区域0-顶部，1-中间，2-底部
 */
function loadData(loadArr){
    plus.nativeUI.showWaiting();
    getJieZhiTime();
    
    var reqPromise = [];
    for(var i=0; i<loadArr.length; i++){
        var j = loadArr[i];
        reqPromise.push(reqParam[j]);
    }
    getReqPromises(reqPromise, true).then(function(ress){
        var res1, res2;
        for(var i=0; i<loadArr.length; i++){
            var j = loadArr[i] + 1;
            if(j == 1){
                res1 = ress[i];
            }
            if(j == 2){
                res2 = ress[i];
            }
        }
        
        if(res1 && res1.status == 200){
            handleTopData(res1.data);
            listHandle(res1.data.list)
        }
        if(res2 && res2.status == 200){
            handleSecondPanelData(res2.data);
        }
        plus.nativeUI.closeWaiting();
    });
}

/*
 * 加载数据截止时间
 */
function getJieZhiTime(){
    sendPost("/statistics/time",null,function(res){
    },function(res){
        if(res.status=="200"){
            var date = (res.data && res.data.substring(11,16)) || "";
            $(".jiezhi-time").html("（"+date+"）");
        }
    });
}
/*
 * 圆饼图
 */
var roundCharts = echarts.init(document.getElementById('roundChart')),
	roundCharts1 = echarts.init(document.getElementById('roundChart1')),
	roundCharts2 = echarts.init(document.getElementById('roundChart2')),
	roundCharts3 = echarts.init(document.getElementById('roundChart3'));
function handleTopData(res){
	$(".device-buy").html(res.totalAll);
	$(".device-push").html(res.totalGrant);
	$(".device-bind").html(res.totalBinding);
	$(".device-use").html(res.totalUse);
	$(".device-dif").html(res.totalAnomaly);
	$(".device-del").html(res.totalIntervene);
	var labelTop = {
	    normal : {
	        label : {
	            show : true,
	            position : 'center',
	            formatter : '{b}',
	            textStyle: {
	                baseline : 'bottom',
	                fontSize: "16",
	                color: "#8f8f94"
	            }
	        },
	        labelLine : {
	            show : false
	        }
	    }
	};
	var labelFromatter = {
	    normal : {
	        label : {
	            formatter : function (params){
	                return  res.totalGrantRange
	            },
	            textStyle: {
	                baseline : 'top',
	                fontSize: "18",
	                color: "#39f"
	            }
	        }
	    },
	},
	labelFromatter1 = {
	    normal : {
	        label : {
	            formatter : function (params){
	                return  res.totalBindingRange
	            },
	            textStyle: {
	                baseline : 'top',
	                fontSize: "18",
	                color: "#39f"
	            }
	        }
	    },
	},
	labelFromatter2 = {
	    normal : {
	        label : {
	            formatter : function (params){
	                return  res.totalUseRange
	            },
	            textStyle: {
	                baseline : 'top',
	                fontSize: "24",
	                color: "#39f"
	            }
	        }
	    },
	},
	labelFromatter3 = {
	    normal : {
	        label : {
	            formatter : function (params){
	                return  res.totalInterveneRange
	            },
	            textStyle: {
	                baseline : 'top',
	                fontSize: "24",
	                color: "#39f"
	            }
	        }
	    },
	}
	var labelBottom = {
	    normal : {
	        color: '#ccc',
	        label : {
	            show : true,
	            position : 'center'
	        },
	        labelLine : {
	            show : false
	        }
	    }
	};
	var radius = [45, 55],
		radius2 = [60, 70];
	var options = {
	    legend: {
	        x : 'center',
	        y : 'center'
	    },
	    series : [
	        {
	            type : 'pie',
	            radius : radius,
	            x: '0%', // for funnel
	            itemStyle : labelFromatter,
	            data : [
	                {value: res.totalAll - res.totalGrant, itemStyle: labelBottom},
	                {name:'设备发放率', value: res.totalGrant, itemStyle: labelTop}
	            ]
	        }
	    ],
	    color: ["#39f", "#ddd"]
	},
	options1 = {
		legend: {
	        x : 'center',
	        y : 'center'
	    },
	    series : [
	        {
	            type : 'pie',
	            radius : radius,
	            x: '0%', // for funnel
	            itemStyle : labelFromatter1,
	            data : [
	                {value: res.totalGrant - res.totalBinding, itemStyle: labelBottom},
	                {name:'设备绑定率', value: res.totalBinding, itemStyle: labelTop}
	            ]
	        }
	    ],
	    color: ["#39f", "#ddd"]
	},
	options2 = {
		legend: {
	        x : 'center',
	        y : 'center'
	    },
	    series : [
	        {
	            type : 'pie',
	            radius : radius2,
	            x: '0%', // for funnel
	            itemStyle : labelFromatter2,
	            data : [
	                {value: res.totalGrant - res.totalUse, itemStyle: labelBottom},
	                {name:'每周使用率', value: res.totalUse, itemStyle: labelTop}
	            ]
	        }
	    ],
	    color: ["#39f", "#ddd"]
	},
	options3 = {
		legend: {
	        x : 'center',
	        y : 'center'
	    },
	    series : [
	        {
	            type : 'pie',
	            radius : radius2,
	            x: '0%', // for funnel
	            itemStyle : labelFromatter3,
	            data : [
	                {value: res.totalAnomaly - res.totalIntervene, itemStyle: labelBottom},
	                {name:'体征异常24h\n干预指导率', value: res.totalIntervene, itemStyle: labelTop}
	            ]
	        }
	    ],
	    color: ["#39f", "#ddd"]
	};
	roundCharts.setOption(options);
	roundCharts1.setOption(options1);
	roundCharts2.setOption(options2);
	roundCharts3.setOption(options3);
}
/*
 * 处理中间折线图数据
 */
function handleSecondPanelData(data){
        var xData = _.map(data.index_85.data, function(o){
            return o.range;
        });
        var yData = _.map(data.index_85.data, function(o){
            return o.amount;
        });
        var yData2 = _.map(data.index_86.data, function(o){
            return o.amount
        });
        var lastIndex = yData.length % 10;
        if(yData.length >10 ){  
            var dataZoom_end = 100-(9/yData.length)*100;  
        }else{  
            var dataZoom_end = 0;  
        }  
        //初始给定第一版页面中时间区间
        var d1 = xData[yData.length - lastIndex],
            d2 = xData[yData.length -1];
        if(!d1 || !d2) {
        	$("#startValue").text("暂无");
//      	$("#startValue").hide()
            $("#endValue").text("暂无");
        }else if(dateType == 3){
            $("#startValue").text(d1.substr(0,4)+"年"+d1.substr(5,2)+"月");
            $("#endValue").text(d2.substr(0,4)+"年"+d2.substr(5,2)+"月");
        } else {
            $("#startValue").text(d1);
            $("#endValue").text(d2);
        }
        var lineCharts = echarts.init(document.getElementById('lineChart'));
        var options = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: 'bottom',
                data:['设备发放量','设备绑定量']
            },
            grid: {
                left: '10px',
                right: '10px',
                bottom: '30px',
                top: '10px',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xData,
                axisLabel: {
                    interval:0,//横轴信息全部显示  
                    formatter: function (value, index) {
                        if(dateType == 1 || dateType == 2){
                            if(index == 0){
                                $("#startValue").text(value ? value : "暂无");
                                return value.substr(5,2)+"月"+value.substr(8,2);
                            }else{
                                if(index == 10){
                                    $("#endValue").text(value ? value : "暂无");
                                }
                                return value.substr(8,2);
                            }
                        }else if(dateType == 3){
                            var val = value.substr(5,2)+"月"
                            if(index == 0){
                                $("#startValue").text(value.substr(0,4)+"年"+val);
                            }else{
                                if(index == 9){
                                    $("#endValue").text(value.substr(0,4)+"年"+val);
                                }
                            }
                            return val;
                        }
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisPointer: {
                    snap: true
                },
                scale: true,
                minInterval: 1,
                min: 0,
                boundaryGap: ['0%', '30%']
            },
            dataZoom: [{//给x轴设置滚动条  
                show: false,
                start: dataZoom_end,
                end: 100,
                type: 'slider',
                zoomLock: true,
            },{ //下面这个属性是内容区域配置
                start: dataZoom_end,
                end: 100,
                type: 'inside',
                zoomLock: true,
            }],
            series: [{
                name: '设备发放量',
                type: 'line',
                smooth: true,
                data: yData,
                lineStyle:{
                    normal: {
                        color: 'rgba(66, 188, 254, 1)'
                    }
                },
                itemStyle:{
                    normal: {
                    	areaStyle: {
                    		type: 'default'
                    	},
                        color: 'rgba(66, 188, 254, 1)'
                    }
                }
            },
            {
                name: '设备绑定量',
                type: 'line',
                smooth: true,
                data: yData2,
                lineStyle:{
                    normal: {
                        color: 'rgba(120, 150, 254, 1)'
                    }
                },
                itemStyle:{
                    normal: {
                    	areaStyle: {
                    		type: 'default'
                    	},
                        color: 'rgba(120, 150, 254, 1)'
                    }
                }
            }]
        };
        lineCharts.clear();
        lineCharts.setOption(options);
}

/*
 * 处理底部区域数据
 */
function listHandle(res){
    var list = res;
    var topArr = soreRank(amountArr(list));
    
    list = _.map(list, function(o, index){
        o.top = topArr[index];
        o.rate = parseFloat(o.rate).toFixed(2);
        return o;
    })
    
    var html = template("data-list", {list: list, level: level, lowLevel: lowLevel});
    $("#listTable").empty().append(html);
}

/*
 * 控制底部各区等tab的显示，根据level来控制
 */
function showTabs(){
    $(".area-tab").removeClass("active");
    switch(level){
        case 4:
            $(".area-tab").show();
            $(".area-tab").eq(0).addClass("active");
            areaType = "4";
            break;
        case 3:
            $(".area-tab").eq(0).hide();
            $(".area-tab").eq(1).show();
            $(".area-tab").eq(1).addClass("active");
            areaType = "3";
            break;
        case 2:
            $(".area-tab").eq(0).hide();
            $(".area-tab").eq(1).hide();
            $(".area-tab").eq(2).addClass("active");
            areaType = "2";
            break;
    }
}

/*
 * 初始化scroller
 */
function initScroller(){
    //阻尼系数
    var deceleration = mui.os.ios?0.003:0.0009;
    mui('.mui-scroll-wrapper').scroll({
        bounce: false,
        indicators: true, //是否显示滚动条
        deceleration:deceleration
    });
    mui('.mui-scroll-wrapper').pullRefresh({
        down: {
            callback: function() {
                var self = this;
                setTimeout(function() {
                    initReqParams();
                    loadData([0,1]);
                    self.endPulldownToRefresh();
                }, 1000);
            }
        }
    });
}

/**
 * 初始化筛选事件
 */
function shaixuanInit(main){
    var shaixuan = plus.webview.getWebviewById('shaixuan.html');
    if(!shaixuan){
        shaixuan = mui.createWindow({
                id: 'shaixuan.html',
                url: 'shaixuan.html',
                styles: {
                    top: 0,
                    bottom: 0,
                    left: '20%',
                    width: '80%',
                    scorllIndicator: "none"
                },
                show:{
                  aniShow: "slide-in-right",
                  duration: "400"
                },
                extras:{
                }
           });
    }
    window.addEventListener("hideShaiXuan",function(){
        main.setStyle({mask:"none"});
        shaixuan.hide();
    }, false);
    
    window.addEventListener("showShaiXuan", function() {
        shaixuan.show();
        main.setStyle({mask:"rgba(0,0,0,0.5)"});
        main.addEventListener("maskClick",function(){
            main.setStyle({mask:"none"});
            shaixuan.hide();
        }, false);
    });
}


function bindEvents(){
    $(".header-link").on("tap", function() {
    	// 跳转
    	openWebview("../../wdsb/html/scan2.html", {isManage: 1});
    })
    //左滑筛选区域的数据
    $('.select-label-btn').on("tap", function(){
        var self = plus.webview.currentWebview();
        mui.fire(self, "showShaiXuan", {deviceCode: deviceCode});
    })
    //日、周、月按钮切换
    $(".date-tag").on("tap",function(){
        dateType = $(this).attr("data-type");
        $(".date-tag").removeClass("active");
        $(this).addClass("active");
        
        initReqParams();
        loadData([1]); //只加载中间区域的数据
    });
    //底部各区等区域的tab切换
    $(".area-tab").on('tap', function(){
        var $this = $(this),
            type = $this.attr("data-val"); //4 - 各区， 3 - 社区， 2 - 团队
        
        if($this.hasClass("active")){
            return false;
        }
        $(".area-tab").removeClass("active");
        $this.addClass("active");
        
        if(type == "4"){
            lowLevel = 0;
        }else if(type == "3"){
            lowLevel = 2;
        }else{
            lowLevel = 1;
        }
        initReqParams();
        loadData([0]);
    });
    //底部每条记录的点击事件
    $("#listTable").on('tap', ".data-row", function(){
        var $this = $(this),
            name = $this.attr("data-name"),
            code = $this.attr("data-code"),
            $selectTab = $(".area-tab.active");
        
        if($selectTab.attr("data-val") == "2"){ //获得团队信息，弹框显示数据
            showTeamInfo(code);
            return false;
        }
        
        title = name;
        
        area = code;
        var newlevel = level - 1;
        //如果是市级管理员，先点击“社区”tab后再往下看下一级的数据，需要将level再-1
        if(newlevel == 3 && lowLevel == 2){
            newlevel -- ;
        }
        lowLevel = '';
        level = newlevel;
        $("#areaTitle").text(title);
        
        //判断当前tab的位置
        var top = $(".area-tab-panel").offset().top;
        if(top < 0){
            mui(".mui-scroll-wrapper").scroll().scrollTo(0, -(parseInt(initTabOffsetTop)/2), 500);
        }
        
        showTabs();
        initReqParams();
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            area: area,
            title: title,
            lowCode: lowCode,
            req: reqParam
        });
        loadData([0,1]);
    });
    //弹出遮罩
    $(".icon-remark").on("click", function(e) {
        $(".modal-overlay").addClass("modal-overlay-visible");
        setTimeout(function(){
            $(".modal-content").show();
        },50)
    });
    
    $(".div-close,.modal-overlay").on("click",function(){
        $(".modal-overlay").removeClass("modal-overlay-visible");
        $(".modal-content").hide();
    });
    //添加页面监听
    window.addEventListener("refresh", function(e){
        lowCode = e.detail.lowCode || lowCode;
        deviceCode = e.detail.deviceCode;
        var name = e.detail.name;
        if (deviceCode == 2) {
        	$(".select-label").html("血糖仪")
        } else if (deviceCode == 1) {
        	$(".select-label").html("血压计")
        } else {
        	$(".select-label").html("所有设备")
        }
        //重置变量值
        level = level;
        area = area;
        title = title;
        lowLevel = lowLevel;
        startDate = getStartDate();
        endDate = getEndDate();
        
        $("#areaTitle").text(title);
        $(".choose-label").text(name);
        
        initReqParams();
        
        //清空请求数组
        if(reqList.length == 2) {
        	reqList.splice(1, 1);
        } else {
        	reqList.splice(0, reqList.length)
        }
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            area: area,
            title: title,
            lowCode: lowCode,
            req: reqParam
        });
        loadData([0,1]);
    });
}

function getStartDate(){
    return chooseYear+'-07-01';
}

//获取结束时间
function getEndDate(){
    var nowdate = new Date();
    var year = nowdate.getFullYear();
    var month = nowdate.getMonth() + 1;
    var day = nowdate.getDate();
    var endDate = new Date((parseInt(chooseYear)+1) + '-06-30');
    var now = new Date();
    
    if(now <= endDate){
        return now.format("yyyy-MM-dd");
    }else{
        return (parseInt(chooseYear)+1) + '-06-30';
    }
}

//续签量数据集合
function amountArr(list){
    var amountArr = [];
    for(var k in list){
        amountArr.push(list[k].rate);
    }
    
    return amountArr;
}

//排名方法
function soreRank(arr){
    var temp = [];
    var lis = [];
    for(var i=0;i<arr.length;i++){
        lis.push(arr[i]);
    }
    lis = _.uniq(lis);
    for(var i=0;i<arr.length;i++){
        temp[i] = lis.indexOf(arr[i])+1;
    }
    
    return temp;
}
/*
 * 获得团队信息
 */

function showTeamInfo(teamId){
    var url = "/doctor/admin-teams/teams/info",
        params = {
            teamId: teamId
        };
    plus.nativeUI.showWaiting();
    sendGet(url, params, null, function(res){
        if(res.status == 200){
            var data = res.data;
            data.memberLength = data.members.length;
            var html = template("teamInfo", data);
            $("#teamInfoBox").empty().append(html);
            $(".modal-overlay").addClass("modal-overlay-visible");
            setTimeout(function(){
                $(".modal-content").show();
            },50)
        }else{
            mui.toast(res.msg);
        }
        plus.nativeUI.closeWaiting();
    }, true);
}
//返回事件 
var old_back = mui.back;
mui.back = function(){
    if(reqList.length == 1){
        old_back();
    } 
    else{
        var preInfo = reqList[reqList.length - 1];
        if(preInfo.level == level && preInfo.lowLevel == lowLevel){
            reqList.pop();
            var info = reqList[reqList.length - 1];
        }else{
            info = preInfo;
        }
        
        level = info.level;
        area = info.area;
        title = info.title;
        lowLevel = info.lowLevel;
        sumType = info.sumType;
        tagCode = info.tagCode;
        
        $("#areaTitle").html(title);
		showTabs();
        initReqParams();
        loadData([0,1]);
    }
}