new Vue({ el: '#main', data: { alertChart1:'',//左边第一块表格 alertChart2:'',//左边第二块表格 alertChart3:'',//右上第一块 alertChart4:'',//右上第二块 alertChart5:'',//右下 bigData:'',//总数据 alertType:0, alertTime:0, firstDay: "", //上月第一天 lastDay: "", //上月最后一天 firstMonth:'', lastMonth:'', code:[ 'VIEW_13_0018',//死亡原因-人 'VIEW_13_0019',//区县分布-人 'VIEW_13_0020',//年龄段分布 'VIEW_13_0021',//性别分布 'VIEW_13_0023',//新增患者月趋势 'VIEW_13_0025',//新增患者年趋势 'VIEW_13_0024',//新增患者季趋势 ], qushiMonth:'', qushiYear:'', firstDayYear: "", //本年第一天 lastDayYear: "", //本年最后一天 halfYearStartDate: "", //近半年开始时间 halfYearEndDate: "", //近半年结束时间 yesterdayDate:"",//昨天 type:0, thirdJiDate:"",//三个季度前 qushiSeason:"",//季度趋势 townCode:'',//区县选择 }, mounted: function() { var vm = this; var townCode = getUrlParms('cityVal'); if(townCode){ vm.townCode = townCode; } updateFontSize(); this.formatDate(); this.initData(this.type,vm.townCode); var myDate = new Date(); var maxMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月) var maxYear = myDate.getFullYear(); var max = maxYear.toString()+'-'+maxMonth.toString(); console.log(vm.firstMonth,vm.lastMonth) var moren = vm.firstMonth+' 至 '+vm.lastMonth; layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#time', //指定元素, type:'month', range: '至', //或 range: '~' 来自定义分割字符 theme: '#05273e', position: 'abolute', right:'200px', value: moren, max:max, btns: ['confirm'], done: function(value, date, endDate){ console.log(value); //得到日期生成的值,如:2017-08-18 console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。 console.log(vm.firstDay); if(date.month < 10){ vm.firstDay = date.year+'-0'+date.month+'-01'; }else{ vm.firstDay = date.year+'-'+date.month+'-01'; } if(endDate.month < 10){ vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month); }else{ vm.lastDay = endDate.year+'-'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month); } vm.halfYearStartDate = getLastHalfMonthArray(endDate.year+'-'+endDate.month) vm.halfYearEndDate = vm.lastDay; vm.thirdJiDate = getThirdJiDate(endDate.year,endDate.month); vm.initData(vm.type,vm.townCode); vm.alertTime = 0; } // showBottom: false }); }); }, methods: { initData:function(type,city){ var vm = this; var linkageFilter1 = "quotaDate >= '" + vm.firstDay + "' and quotaDate <= '" + vm.lastDay + "';"; var linkageFilter2 = "quotaDate >= '" + vm.thirdJiDate + "' and quotaDate <= '" + vm.lastDay + "';"; var linkageFilter3 = "quotaDate >= '" + vm.halfYearStartDate + "' and quotaDate <= '" + vm.halfYearEndDate + "';"; console.log(linkageFilter1) var code = this.code; var urlNumber = '/gov/report/getNoChartTemplateData'; var urlChart = '/gov/report/getTemplateDataByViewCode'; if(city == ''){ var reqUrl = [ {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0],linkageFilter:linkageFilter1,limitCondition:JSON.stringify({'VIEW_13_0038': '12'})}},//死亡原因-人 {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[1],linkageFilter:linkageFilter1}},//区县分布-人 {url:urlChart,reqType: 'get',data: {viewCode:code[2],linkageFilter:linkageFilter1}},//年龄段分布 {url:urlChart,reqType: 'get',data: {viewCode:code[3],linkageFilter:linkageFilter1}},//性别分布 {url:urlChart,reqType: 'get',data: {viewCode:code[4],linkageFilter:linkageFilter3}},//新增患者月趋势 {url:urlChart,reqType: 'get',data: {viewCode:code[5]}},//老年人就诊趋势-年 {url:urlChart,reqType: 'get',data: {viewCode:code[6],linkageFilter:linkageFilter2}},//新增患者季趋势 ] }else{ var reqUrl = [ {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0],linkageFilter:linkageFilter1,limitCondition:JSON.stringify({'VIEW_13_0038': '12'})}},//死亡原因-人 {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[1],linkageFilter:linkageFilter1}},//区县分布-人 {url:urlChart,reqType: 'get',data: {viewCode:code[2],linkageFilter:linkageFilter1+'town='+city,linkageDimension:'org'}},//年龄段分布 {url:urlChart,reqType: 'get',data: {viewCode:code[3],linkageFilter:linkageFilter1+'town='+city,linkageDimension:'org'}},//性别分布 {url:urlChart,reqType: 'get',data: {viewCode:code[4],linkageFilter:linkageFilter3+'town='+city,linkageDimension:'org'}},//新增患者月趋势 {url:urlChart,reqType: 'get',data: {viewCode:code[5],linkageFilter:'town='+city,linkageDimension:'org'}},//老年人就诊趋势-年 {url:urlChart,reqType: 'get',data: {viewCode:code[6],linkageFilter:linkageFilter2+'town='+city,linkageDimension:'org'}},//新增患者季趋势 ] } $(".div-mask-layer").show(); httpRequest.getReqPromises(reqUrl).then(function(datas) { console.log(datas); vm.alertChart1 = datas[0].obj.VIEW_13_0018; vm.alertChart2 = datas[1].obj.VIEW_13_0019; // vm.alertData3 = datas[2].obj.VIEW_15_0002[0].HC_15_1003; // vm.alertData4 = datas[2].obj.VIEW_15_0002[0].HC_15_1004; var chart1 = datas[2].obj.viewInfos[0].options[0].option; var chart2 = datas[3].obj.viewInfos[0].options[0].option; var chart3 = datas[4].obj.viewInfos[0].options[0].option; var chart4 = datas[5].obj.viewInfos[0].options[0].option; var chart5 = datas[6].obj.viewInfos[0].options[0].option; vm.qushiMonth = chart3; vm.qushiYear = chart4; vm.qushiSeason = chart5; vm.setAlertChart2(chart1); vm.setAlertChart3(chart2); // vm.setAlertChart4(chart3); vm.setAlertChart5(chart3); $(".div-mask-layer").hide(); }) }, setAlertChart1:function(data){ var options = JSON.parse(data); options = quxianChart(options); // var options = this.bigData[t]['区县分布']; // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'} this.alertChart1 = options; }, setAlertChart2:function(data){ var options = JSON.parse(data); options = nianlingChart(options); options.color = ["#6576e0","#03fa6c","#ff616f","#0fa5f2","#00e6f3"]; options.legend.formatter = function(name) { var index = 0; var clientlabels = options.legend.data; var clientcounts = _.map(options.series[0].data,function(item,idx){ return item.value; }); clientlabels.forEach(function(value,i){ if(value == name){ index = i; } }); return name + " " + clientcounts[index]; } options.legend.left = '58%'; options.legend.top = 0.044 * window.screen.width;//85; options.legend.itemWidth = 0.005 * window.screen.width;//10; options.legend.itemHeight = 0.005 * window.screen.width;//10; options.legend.itemGap = 0.0078 * window.screen.width;//15; options.series[0].center = ['35%','55%']; this.alertChart3 = options }, setAlertChart3:function(data){ var options = JSON.parse(data); options = xingbieChart(options); options.color = ["#00E7F3","#ff616f"]; options.legend.formatter = function(name) { var index = 0; var clientlabels = options.legend.data; var clientcounts = _.map(options.series[0].data,function(item,idx){ return item.value; }); clientlabels.forEach(function(value,i){ if(value == name){ index = i; } }); return name + " " + clientcounts[index]; } options.legend.left = '58%'; options.legend.top = 0.0625 * window.screen.width;//120 options.legend.itemWidth = 0.005 * window.screen.width;//10; options.legend.itemHeight = 0.005 * window.screen.width;//10; options.legend.itemGap = 0.0078 * window.screen.width;//15; options.series[0].center = ['35%','55%']; this.alertChart4 = options }, setAlertChart4:function(data){ var options = JSON.parse(data); options = jibingTopChart(options); options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}; options.series[0].itemStyle.normal.color = '#FFF71A'; this.alertChart4 = options }, setAlertChart5:function(data){ var options = JSON.parse(data); options = qushiChart(options); // var options = this.bigData[t]['区县分布']; // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'} this.alertChart5 = options; window.chart5 = this.$refs._alertChart5.chart }, alertTitle:function(type){ this.alertTime = 0; this.type = type; this.initData(type,vm.townCode) }, alertChart:function(time){ var vm = this; this.alertTime = time; if(time == 0){ vm.setAlertChart5(vm.qushiMonth); }else if(time == 1){ vm.setAlertChart5(vm.qushiYear); }else if(time == 2){ vm.setAlertChart5(vm.qushiSeason); } }, closeAlertClick:function(){ parent.layer.closeAll(); }, GetQueryString :function (name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); return null; }, chartArea:function(param){ console.log(param); }, clickBarItem:function(item){ console.log(item) }, formatDate: function() { //获取上个月第一天 var firstdate = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1); //获取上个月最后一天 var date = new Date(); var day = new Date(date.getFullYear(), date.getMonth(), 0).getDate(); var enddate = new Date(new Date().getFullYear(), new Date().getMonth() - 1, day); //格式化结果 var year = date.getFullYear(); debugger this.thirdJiDate = getThirdJiDate(year,lastMonth+1); this.firstDay = getLastMonthStartDate(); this.firstMonth = firstdate.format("yyyy-MM"); this.lastDay = getLastMonthEndDate(); this.lastMonth = enddate.format("yyyy-MM"); this.firstDayYear = getYearStartDate(); this.lastDayYear = getYearEndDate(); this.halfYearStartDate = getHalfYearStartDate(); this.halfYearEndDate = getHalfYearEndDate(); this.yesterdayDate = getYearEndDate(); }, getLastDay(year, month) { var new_year = year; //取当前的年份 var new_month = month++; //取下一个月的第一天,方便计算(最后一天不固定) if (month > 12) { //如果当前大于12月,则年份转到下一年 new_month -= 12; //月份减 new_year++; //年份增 } var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天 return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期 }, getCity(e){ console.log(e) var vm = this; e == vm.townCode?vm.townCode = '':vm.townCode=e; vm.initData(vm.type,vm.townCode); } } }); //数字格式化 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; }