new Vue({ el: '#app', data: { city: '上饶市', town: [], cityVal:"0", timeType: '1', //时间过滤条件 1是上月 2是半年 leftData: {}, //左边数据块 leftData1: {}, //左边数据块1 leftData2: {}, //左边数据块2 bakLeftData1:{},//缓存左边数据块1 bakLeftData2:{},//缓存左边数据块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, hasMapData:true, }, mounted: function() { this.initData(); }, filters:{ formatData:function(value){ if(value>100000){ if(value>1000000000){ return (value/100000000).toFixed(2)+"亿" }else{ return (value/10000).toFixed(2)+"万" } }else{ return value } } }, methods: { initData: function() { this.timeType = 1;//默认显示本月 $(".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 = {},options1={},options2={},vm=this; if(this.leftData1.successFlg) { _.map(vm.leftData1.obj.VIEW_14_0011,function(item,index){ if(vm.cityVal=="0"){//上饶市 options1 = vm.leftData1.obj.VIEW_14_0011[0]; }else if(item.firstColumn==vm.city){ options1 = item; } }) } if(this.leftData2.successFlg) { _.map(vm.leftData2.obj.VIEW_14_0011,function(item,index){ if(vm.cityVal=="0"){//上饶市 options2 = vm.leftData2.obj.VIEW_14_0011[0]; }else if(item.firstColumn==vm.city){ options2 = item; } }) } vm.bakLeftData1 = this.setFormater(options1); vm.bakLeftData2 = this.setFormater(options2); this.leftData = vm.bakLeftData1; }, setYesterDay: function(data3) { var options = {},vm=this; if(data3.successFlg) { _.map(data3.obj&&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; } }) } if(options){ 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&&data3.obj.VIEW_14_0012||[], function(item) { if(item.firstColumn != "合计") { optionData.push({ name: item.townName, value: parseInt(item.HC_14_1019) }) } }) if(optionData.length>0){ var options = optionData; this.mapData = { data: options, index: this.lineHeightIndex }; this.hasMapData = true; }else{ this.hasMapData = false; } }, setRightChart1: function(data8) { 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.timeType == 1?this.leftData=this.bakLeftData1:this.leftData=this.bakLeftData2; }, setFormater: function(obj) { for(var c in obj) { if(obj[c].toString().indexOf(",") == -1){//不存在,,说明要格式化 var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/ if (!re.test(obj[c])) { //不是数字,则不格式化 continue; } if(obj[c]>100000){ obj[c] = (obj[c]/10000).toFixed(2)+"万" }else{ obj[c] = toThousands(obj[c]); } } } return obj; }, 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; }