toastr.options = { "closeButton": true, "positionClass": "toast-top-center", "preventDuplicates": true } new Vue({ el: '#main', data: { type:0,//0:高血压 1:糖尿病 2:孕产妇 3:65岁以上老年人人数 jsonUrl:"../../../dataJson/jumingHealthJson/高血压人群.json", jsonData:null, city: '上饶市', town: [], cityVal:"0", diseaseData:[], mapData:null, zhongDianData:[], gaoFaData:null, siWangData:[], skipShow:0, lineHeightIndex:null, reqUrl:[], isInit:true,//是否初始化 isClickDisease:true,//是否点击疾病 isClickMap:false//是否点击地图 }, mounted: function() { this.bindEvents(); this.initData(); }, methods: { initData:function(){ var vm = this,reqUrl = [],townStr="",viewMapJsonGXY = null,viewMapJsonTNB = null,viewMapJsonYCF = null,viewMapJsonGL = null,zhongDianViewCodeMonth="",zhongDianViewCodeJi="",zhongDianViewCodeYear=""; $(".div-mask-layer").show(); var currentDate = new Date(); //封装参数 vm.cityVal!="0"?townStr = "town="+vm.cityVal+";":townStr = "";//vm.cityVal=0 查询整个市 var diseaseLinkAgeFliter = "quotaDate >= '" + getLastMonthStartDate() + "' and quotaDate <= '" + getLastMonthEndDate() + "';";//疾病列表参数(上个月数据) var zhongDianLinkageFilter = "quotaDate >= '" + getLastYearMonthArray()[12] + "' and quotaDate <= '" + getLastMonthEndDate() + "';";//重点人群参数(过去12个月数据) var zhongDianLinkageFilterJi = "quotaDate >= '" + getThirdJiDate(currentDate.getFullYear(),(currentDate.getMonth()+1)) + "' and quotaDate <= '" + getQuarterEndDate() + "';"; var gaoFaLinkageFilterMonth = "quotaDate >= '" + getMonthStartDate() + "' and quotaDate <= '" + getMonthEndDate() + "';";//高发疾病参数(本月数据) var gaoFaLinkageFilterJi = "quotaDate >= '" + getQuarterStartDate() + "' and quotaDate <= '" + getQuarterEndDate() + "';";//高发疾病参数(本季数据) var gaoFaLinkageFilterYear = "quotaDate >= '" + getYearStartDate() + "' and quotaDate <= '" + getYearEndDate() + "';";//高发疾病参数(本年数据) viewMapJsonGXY = {VIEW_13_0013:townStr,VIEW_13_0036:townStr+diseaseLinkAgeFliter,VIEW_13_0037:townStr+diseaseLinkAgeFliter};//高血压 viewMapJsonTNB = {VIEW_13_0026:townStr,VIEW_13_0034:townStr+diseaseLinkAgeFliter,VIEW_13_0027:townStr+diseaseLinkAgeFliter};//糖尿病 viewMapJsonYCF = {VIEW_16_0009:townStr,VIEW_16_0010:townStr+diseaseLinkAgeFliter,VIEW_16_0011:townStr+diseaseLinkAgeFliter};//孕产妇 viewMapJsonGL = {VIEW_15_0001:townStr,VIEW_15_0011:townStr+diseaseLinkAgeFliter,VIEW_15_0008:townStr+diseaseLinkAgeFliter};//65岁以上 if(vm.type==0){//高血压 zhongDianViewCodeMonth = "VIEW_13_0017";//重点人群+按月 zhongDianViewCodeJi = "VIEW_13_0045";//重点人群+按季度 zhongDianViewCodeYear = "VIEW_13_0022";//重点人群+按年 }else if(vm.type==1){//糖尿病 zhongDianViewCodeMonth = "VIEW_13_0028";//重点人群+按月 zhongDianViewCodeJi = "VIEW_13_0046";//重点人群+按季度 zhongDianViewCodeYear = "VIEW_13_0029";//重点人群+按年 }else if(vm.type==2){//孕产妇 zhongDianViewCodeMonth = "VIEW_16_0004";//重点人群+按月 zhongDianViewCodeJi = "VIEW_16_0012";//重点人群+按季度 zhongDianViewCodeYear = "VIEW_16_0005";//重点人群+按年 }else if(vm.type==3){//65岁以上 zhongDianViewCodeMonth = "VIEW_15_0009";//重点人群+按月 zhongDianViewCodeJi = "VIEW_15_0012";//重点人群+按季度 zhongDianViewCodeYear = "VIEW_15_0010";//重点人群+按年 } if(vm.isInit || vm.isClickMap){//整理请求参数集合(初始化或点击地图时加载所有数据) reqUrl = [ {url: bigDataAPI.getCityArea,reqType: 'get',data: {}}, {url:bigDataAPI.getMapJingWeiDuInfo,reqType: 'get',data:{}},//上饶地图经纬度数据 {url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonGXY)}},//高血压疾病数据+地图 {url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonTNB)}},//糖尿病疾病数据+地图 {url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonYCF)}},//孕产妇疾病数据+地图 {url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonGL)}},//65岁以上疾病数据+地图 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeMonth,linkageFilter:zhongDianLinkageFilter+townStr}},//重点人群+按月 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeJi,linkageFilter:zhongDianLinkageFilterJi+townStr}},//重点人群+按季度 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeYear,linkageFilter:townStr}},//重点人群+按年 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_13_0007",linkageFilter:gaoFaLinkageFilterMonth+townStr,limitCondition:10}},//高发疾病排行----筛选条件:全部+本月 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_13_0007",linkageFilter:gaoFaLinkageFilterYear+townStr,limitCondition:10}},//高发疾病排行----筛选条件:全部+本年 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_13_0007",linkageFilter:gaoFaLinkageFilterJi+townStr,limitCondition:10}},//高发疾病排行----筛选条件:全部+本季度 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_13_0008",linkageFilter:townStr}},//死亡原因 ]; }else{//点击疾病类型,则本月高发和死亡原因数据不变,不用重新请求 reqUrl = [ {url: bigDataAPI.getCityArea,reqType: 'get',data: {}}, {url:bigDataAPI.getMapJingWeiDuInfo,reqType: 'get',data:{}},//上饶地图经纬度数据 {url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonGXY)}},//高血压疾病数据+地图 {url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonTNB)}},//糖尿病疾病数据+地图 {url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonYCF)}},//孕产妇疾病数据+地图 {url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonGL)}},//65岁以上疾病数据+地图 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeMonth,linkageFilter:zhongDianLinkageFilter+townStr}},//重点人群+按月 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeJi,linkageFilter:zhongDianLinkageFilter+townStr}},//重点人群+按季度 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeYear,linkageFilter:townStr}},//重点人群+按年 ]; } httpRequest.getReqPromises(reqUrl).then(function(datas) { vm.town = [{"name": "上饶市","id": "0"}].concat(datas[0]); echarts.registerMap('上饶',datas[1]); vm.diseaseData.push(datas[2]); vm.diseaseData.push(datas[3]); vm.diseaseData.push(datas[4]); vm.diseaseData.push(datas[5]); if(vm.isClickDisease){//点击疾病类型,则地图数据重新加载 if(vm.type==0){//高血压 vm.setMapData(datas[2]); }else if(vm.type==1){//糖尿病 vm.setMapData(datas[3]); }else if(vm.type==2){//孕产妇 vm.setMapData(datas[4]); }else if(vm.type==3){//65岁以上 vm.setMapData(datas[5]); } } vm.zhongDianData = [datas[6],datas[7],datas[8]];//重点人群+按月、重点人群+按季度、重点人群+按年 if(vm.isClickMap || vm.isInit){//点击地图或初始化,则高发和死亡原因数据重新加载 vm.gaoFaData = [datas[9],datas[10],datas[11]];//高发疾病排行----筛选条件:本月(默认)、本年、本季度 vm.siWangData = datas[12];//死亡原因 } vm.isInit = false; $(".div-mask-layer").hide(); }) }, setMapData: function(data) { var optionData = [],vm=this; if(vm.type==0){//高血压 data = data.successFlg?data.detailModelList&&data.detailModelList[1].VIEW_13_0036 || []:[]; _.map(data, function(item) { if(item.firstColumn != "合计") { optionData.push({ name: item.townName, value: parseInt(item.HC_13_0021) }) } }) }else if(vm.type==1){//糖尿病 data = data.successFlg?data.detailModelList&&data.detailModelList[1].VIEW_13_0034 || []:[]; _.map(data, function(item) { if(item.firstColumn != "合计") { optionData.push({ name: item.townName, value: parseInt(item.HC_13_0017) }) } }) }else if(vm.type==2){//孕产妇 data = data.successFlg?data.detailModelList&&data.detailModelList[1].VIEW_16_0010 || []:[]; _.map(data, function(item) { if(item.firstColumn != "合计") { optionData.push({ name: item.townName, value: parseInt(item.HC_13_0033) }) } }) }else if(vm.type==3){//65岁以上 data = data.successFlg?data.detailModelList&&data.detailModelList[1].VIEW_15_0011 || []:[]; _.map(data, function(item) { if(item.firstColumn != "合计") { optionData.push({ name: item.townName, value: parseInt(item.HC_15_1006) }) } }) } var options = optionData; this.mapData = { data: options, index: this.lineHeightIndex }; }, bindEvents:function(){ var vm = this; EventBus.$on("refresh-json-data", function(arg) { vm.isClickMap = false; vm.isClickDisease = true; vm.type = arg.type;//0:高血压 1:糖尿病 2:孕产妇 3:65岁以上老年人人数 vm.initData(); }); }, setCity(item){ this.city = item.name; }, clickMap:function(res){ this.isClickMap = true; this.isClickDisease = false; this.city = res.name; }, skipClick:function(){ console.log(222) this.skipShow == 0 ? this.skipShow = 1 : this.skipShow = 0 } }, watch:{ city:function(value){ var vm =this; vm.lineHeightIndex =value; this.town.map(function(v,i){ if(v.name == value) { vm.cityVal = v.id; } }) vm.isClickMap = true; vm.isClickDisease = false; vm.initData(); } } }); //数字格式化 function toThousands(str) { if(!str)return str =parseInt(str); if(typeof(str) == 'number')str = str.toString() var newStr = ""; var count = 0; if(str.indexOf(".") == -1) { for(var i = str.length - 1; i >= 0; i--) { if(count % 3 == 0 && count != 0) { newStr = str.charAt(i) + "," + newStr; } else { newStr = str.charAt(i) + newStr; } count++; } str = newStr; } else { for(var i = str.indexOf(".") - 1; i >= 0; i--) { if(count % 3 == 0 && count != 0) { newStr = str.charAt(i) + "," + newStr; } else { newStr = str.charAt(i) + newStr; //逐个字符相接起来 } count++; } str = newStr + (str + "00").substr((str + "00").indexOf("."), 3); } return str; }