new Vue({ el: '#app', data: { city: '上饶市', town: [], cityVal:"0", timeType: '1', //时间过滤条件 1是上月 2是半年 leftData: {}, //左边数据块 leftData1: {}, //左边数据块1 leftData2: {}, //左边数据块2 yesterdayData: {}, leftChart1: null, //左边的图表1 leftChart2: null, //左边的图表2 rightChart1: null, //右边边的图表1 rightChart2: null, //右边的图表2 tableData1: null, //表格数据1 tableData2: null, //表格数据2 mapData: null, allData: null, //所有的数据 用来切换区县 lineHeightIndex: null, skipShow: 0, hasData1:true, hasData2:true, hasData3:true, hasData4:true, hasData5:true, hasData6:true, }, mounted: function() { this.initData(); }, methods: { initData: function() { $(".div-mask-layer").show(); var vm = this,data1, data2, data3, data4, data5, data6, data7, data8; this.town.map(function(v, i) { if(v.name == vm.city) { vm.cityVal = v.id; } }) var linkageFilter1 = "quotaDate >= '" + getLastMonthStartDate() + "' and quotaDate <= '" + getLastMonthEndDate() + "';"; if(vm.cityVal!="0") { linkageFilter1 += "town=" + vm.cityVal + ";"; } var linkageFilter2 = "quotaDate >= '" + getYearStartDate() + "' and quotaDate <= '" + getYearEndDate() + "';"; if(vm.cityVal!="0") { linkageFilter2 += "town=" + vm.cityVal + ";"; } var linkageFilter3 = "quotaDate >= '" + getHalfYearStartDate() + "' and quotaDate <= '" + getHalfYearEndDate() + "';"; if(vm.cityVal!="0") { linkageFilter3 += "town=" + vm.cityVal + ";"; } var linkageFilter4 = "quotaDate >= '" + getYearEndDate() + "' and quotaDate <= '" + getYearEndDate() + "';"; if(vm.cityVal!="0") { linkageFilter4 += "town=" + vm.cityVal + ";"; } var reqUrl = [{url: bigDataAPI.getCityArea,reqType: 'get',data: {}}, {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_14_0011",linkageFilter:linkageFilter1}},//左上角-上月 {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_14_0011",linkageFilter:linkageFilter2}},//左上角-本年 {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_14_0012",linkageFilter:linkageFilter4}}, {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_14_0013",linkageFilter:linkageFilter3}},// {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_14_0014",linkageFilter:linkageFilter3}},// {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_14_0015",linkageFilter:linkageFilter3}},//门诊人次月趋势 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_14_0016",linkageFilter:linkageFilter3}},//住院人次月趋势 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_14_0017",linkageFilter:linkageFilter3}},//门诊分类别月趋势 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_14_0018",linkageFilter:linkageFilter3}},//住院平均日数月趋势 {url:bigDataAPI.getMapJingWeiDuInfo,reqType: 'get',data:{}},//上饶地图经纬度数据 ]; httpRequest.getReqPromises(reqUrl).then(function(datas) { vm.town = [{ "name": "上饶市", "id": "0" }].concat(datas[0]); vm.leftData1 = datas[1]; vm.leftData2 = datas[2]; data3 = datas[3]; data4 = datas[4]; data5 = datas[5]; data6 = datas[6]; data7 = datas[7]; data8 = datas[8]; data9 = datas[9]; data10 = datas[10]; vm.setLeftChart1(data6); vm.setLeftChart2(data7); vm.setRightChart1(data8); vm.setRightChart2(data9); vm.setTable1(data4); vm.setTable2(data5); vm.setleftData1(); echarts.registerMap('上饶',data10); vm.setMapData(data3); vm.setYesterDay(data3); $(".div-mask-layer").hide(); }) }, setleftData1: function() { var options = null,vm=this; if(this.timeType == 1) { if(this.leftData1.successFlg) { _.map(vm.leftData1.obj.VIEW_14_0011,function(item,index){ if(vm.cityVal=="0"){//上饶市 options = vm.leftData1.obj.VIEW_14_0011[0]; }else if(item.firstColumn==vm.city){ options = item; } }) } } else { if(this.leftData2.successFlg) { _.map(vm.leftData2.obj.VIEW_14_0011,function(item,index){ if(vm.cityVal=="0"){//上饶市 options = vm.leftData2.obj.VIEW_14_0011[0]; }else if(item.firstColumn==vm.city){ options = item; } }) } } this.setFormater(options); this.leftData = options; }, setYesterDay: function(data3) { var options = null,vm=this; if(data3.successFlg) { _.map(data3.obj.VIEW_14_0012,function(item,index){ if(vm.cityVal=="0"){//上饶市 options = data3.obj.VIEW_14_0012[0]; }else if(item.firstColumn==vm.city){ options = item; } }) } this.setFormater(options); this.yesterdayData = options; }, setLeftChart1: function(data6) { var options = null; var options = data6.successFlg?data6.obj.viewInfos&&JSON.parse(data6.obj.viewInfos[0].options[0].option):{}; if(options&&options.series && options.series[0].data && options.series[1].data){ options = leftChart1DataFormat(options); this.leftChart1 = options; this.hasData1 = true; }else{ this.hasData1 = false; } }, setLeftChart2: function(data7) { var options = null; var options = data7.successFlg?data7.obj.viewInfos&&JSON.parse(data7.obj.viewInfos[0].options[0].option):{}; if(options&&options.series && options.series[0].data && options.series[1].data){ options = leftChart2DataFormat(options); this.leftChart2 = options; this.hasData2 = true; }else{ this.hasData2 = false; } }, setMapData: function(data3) { var optionData = []; _.map(data3.obj.VIEW_14_0012, function(item) { if(item.firstColumn != "合计") { optionData.push({ name: item.townName, value: parseInt(item.HC_14_1019) }) } }) var options = optionData; this.mapData = { data: options, index: this.lineHeightIndex }; }, setRightChart1: function(data8) { debugger var options = null; var options = data8.successFlg?data8.obj.viewInfos&&JSON.parse(data8.obj.viewInfos[0].options[0].option):{}; if(options&&options.series && options.series[0].data && options.series[1].data && options.series[2].data && options.series[3].data){ options = rightChart1DataFormat(options); this.rightChart1 = options this.hasData4 = true; $(".right1 .contentBox3").removeClass("div-menzhenfenleibei"); }else{ this.hasData4 = false; $(".right1 .contentBox3").addClass("div-menzhenfenleibei"); } }, setRightChart2: function(data9) { var options = null; var options = data9.successFlg?data9.obj.viewInfos&&JSON.parse(data9.obj.viewInfos[0].options[0].option):{}; if(options&&options.series && options.series[0].data && options.series[1].data){ options = rightChart2DataFormat(options); this.rightChart2 = options this.hasData6 = true; $(".right2 .contentBox3").removeClass("div-menzhenfenleibei"); }else{ this.hasData6 = false; $(".right2 .contentBox3").addClass("div-menzhenfenleibei"); } }, setTable1: function(data4) { var resData = []; var data = data4.successFlg?data4.obj.VIEW_14_0013:[]; _.map(data, function(item, index) { if(item.firstColumn != "合计" && item.month) { item.month = parseInt(item.month.substring(5, 7))+"月"; resData.push(item) } }) if(resData.length==0){ this.hasData3 = false; }else{ this.hasData3 = true; this.tableData1 = resData } }, setTable2: function(data5) { var resData = []; var data = data5.successFlg?data5.obj.VIEW_14_0014:[]; _.map(data, function(item, index) { if(item.firstColumn != "合计" && item.month) { item.month = parseInt(item.month.substring(5, 7))+"月"; resData.push(item) } }) if(resData.length==0){ this.hasData5 = false; }else{ this.hasData5 = true; this.tableData2 = resData } }, setCity(item) { this.city = item.name; }, setTimeStr(v) { this.timeType = v; this.setleftData1() }, setFormater: function(obj) { for(var c in obj) { if(obj[c].indexOf(",") == -1){//不存在,,说明要格式化 obj[c] = toThousands(obj[c]) } } }, formatDate2017: function() { //获取上个月第一天 var firstdate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, 1); //获取上个月最后一天 var date = new Date(); var day = new Date(date.getFullYear()-1, date.getMonth(), 0).getDate(); var enddate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, day); //获取本年第一天和最后一天 var firstYearDate = new Date(); firstYearDate.setFullYear(new Date().getFullYear()-1) firstYearDate.setDate(1); firstYearMonty = firstYearDate.setMonth(0); //近半年开始时间 var date1 = new Date(); date1.setMonth(date1.getMonth() - 6); var year1 = date1.getFullYear() - 1; var month1 = date1.getMonth() + 1; month1 = (month1 < 10 ? "0" + month1 : month1); //格式化结果 this.firstDay = firstdate.format("yyyy-MM-dd"); this.lastDay = enddate.format("yyyy-MM-dd"); this.firstDayYear = firstYearDate.format("yyyy-MM-dd"); this.lastDayYear = (new Date().getFullYear()-1) + "-12-31"; this.halfYearStartDate = year1.toString() + '-' + month1.toString() + "-01"; this.halfYearEndDate = this.getCurrentMonthLast2017(); this.yesterdayDate = this.getYesterday2017(-1, '-'); }, getYesterday2017:function(num, str){ var today = new Date(); var nowTime = today.getTime(); var ms = 24*3600*1000*num; today.setTime(parseInt(nowTime + ms)); var oYear = today.getFullYear()-1; var oMoth = (today.getMonth() + 1).toString(); if (oMoth.length <= 1) oMoth = '0' + oMoth; var oDay = today.getDate().toString(); if (oDay.length <= 1) oDay = '0' + oDay; return oYear + str + oMoth + str + oDay; }, getCurrentMonthLast2017: function() { var date = new Date(); var currentMonth = date.getMonth(); var nextMonth = ++currentMonth; var nextMonthFirstDay = new Date(date.getFullYear() - 1, nextMonth-1, 1); var oneDay = 1000 * 60 * 60 * 24; return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd"); }, newObj: function(obj) { return JSON.parse(JSON.stringify(obj)) }, clickMap: function(res) { this.city = res.name; }, skipClick: function() { console.log(222) this.skipShow == 0 ? this.skipShow = 1 : this.skipShow = 0 } }, watch: { city: function(value) { var that = this; that.lineHeightIndex = value; this.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; }