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 CITY_CODE = "350200";//默认厦门市 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; i10 ){ 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