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, }, mounted: function() { this.bindEvents(); this.initData(); // this.getJsonData(); }, methods: { initData:function(){ var vm = this,townStr="",viewMapJsonGXY = null,viewMapJsonTNB = null,viewMapJsonYCF = null,viewMapJsonGL = null,zhongDianViewCodeMonth="",zhongDianViewCodeYear=""; $(".div-mask-layer").show(); //封装参数 vm.cityVal!="0"?townStr = "town="+vm.cityVal+";":townStr = "";//vm.cityVal=0 查询整个市 var diseaseLinkAgeFliter = "quotaDate >= '" + getLastMonthStartDate() + "' and quotaDate <= '" + getLastMonthEndDate() + "';";//疾病列表参数(上个月数据) var zhongDianLinkageFilter = "quotaDate >= '" + getLastYearMonthArray()[11] + "' and quotaDate <= '" + getLastYearMonthArray()[0] + "';";//重点人群参数(过去12个月数据) // var gaoFaLinkageFilterMonth = "quotaDate >= '" + getMonthStartDate() + "' and quotaDate <= '" + getMonthEndDate() + "';";//高发疾病参数(本月数据) // var gaoFaLinkageFilterYear = "quotaDate >= '" + getYearStartDate() + "' and quotaDate <= '" + getYearEndDate() + "';";//高发疾病参数(本年数据) var gaoFaLinkageFilterMonth = "quotaDate >= '2017-06-01' and quotaDate <= '2017-06-30';";//高发疾病参数(本月数据) var gaoFaLinkageFilterYear = "quotaDate >= '2017-01-01' and quotaDate <= '2017-12-31';";//高发疾病参数(本年数据) 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_0001:townStr,VIEW_16_0002:townStr+diseaseLinkAgeFliter,VIEW_16_0003: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";//重点人群+按月 zhongDianViewCodeYear = "VIEW_13_0022";//重点人群+按年 }else if(vm.type==1){//糖尿病 zhongDianViewCodeMonth = "VIEW_13_0028";//重点人群+按月 zhongDianViewCodeYear = "VIEW_13_0029";//重点人群+按年 }else if(vm.type==2){//孕产妇 zhongDianViewCodeMonth = "VIEW_16_0004";//重点人群+按月 zhongDianViewCodeYear = "VIEW_16_0005";//重点人群+按年 }else if(vm.type==3){//65岁以上 zhongDianViewCodeMonth = "VIEW_15_0009";//重点人群+按月 zhongDianViewCodeYear = "VIEW_15_0010";//重点人群+按年 } //整理请求参数集合 var 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: zhongDianViewCodeYear,linkageFilter:zhongDianLinkageFilter+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_0008",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.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]];//重点人群+按月、重点人群+按年 vm.gaoFaData = [datas[8],datas[9]];//高发疾病排行----筛选条件:本月(默认)、本年 vm.siWangData = datas[10];//死亡原因 $(".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_15_0011 || []:[]; _.map(data, function(item) { if(item.firstColumn != "合计") { optionData.push({ name: item.townName, value: parseInt(item.HC_15_1006) }) } }) }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 }; }, getJsonData:function(){ var vm = this; bigDataAPI.getJsonData(this.jsonUrl).then(function(res){ vm.jsonData = res; var options = _.map(res.town,function(item,idx){ var it = {name:item.townName,value:item.result} return it; }) vm.mapData ={data:options,zoom:1,index:vm.lineHeightIndex}; }) }, bindEvents:function(){ var vm = this; EventBus.$on("refresh-json-data", function(arg) { vm.type = arg.type;//0:高血压 1:糖尿病 2:孕产妇 3:65岁以上老年人人数 vm.initData(); }); }, setCity(item){ this.city = item.townName; }, clickMap:function(res){ this.city = res.name; }, refreshAllData:function(cityVal){ var vm = this; cityVal = parseInt(cityVal) switch(cityVal){ case 0: vm.jsonUrl = "../../../dataJson/jumingHealthJson/高血压人群.json"; break;//贵港市 case 26531: vm.jsonUrl = "../../../dataJson/jumingHealthJson/港北区.json"; break;//港北区 case 25634: vm.jsonUrl = "../../../dataJson/jumingHealthJson/港南区.json";break;//港南区 case 113485: vm.jsonUrl = "../../../dataJson/jumingHealthJson/桂平市.json"; break;//桂平市 case 74128: vm.jsonUrl = "../../../dataJson/jumingHealthJson/平南县.json"; break;//平南县 case 12587:vm.jsonUrl = "../../../dataJson/jumingHealthJson/覃塘区.json"; break;//覃塘区 default:break; } vm.getJsonData(); }, skipClick:function(){ console.log(222) this.skipShow == 0 ? this.skipShow = 1 : this.skipShow = 0 } }, watch:{ jsonData:function(data){ this.jsonData = data; }, city:function(value){ var vm =this; vm.lineHeightIndex =value; this.town.map(function(v,i){ if(v.name == value) { vm.cityVal = v.id; } }) 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; }