new Vue({ el: '#app', data: { city: '上饶市', town: [], selectTown:["0"], cityVal:"0", timeType: '1', //时间过滤条件 1是上月 2是半年 leftData1: {}, //左边数据块1 leftData2: {}, //左边数据块2 bakLeftData1:{},//缓存左边数据块1 bakLeftData2:{},//缓存左边数据块2 yesterdayData: {}, leftChart1: null, //左边的图表1 leftChart2: null, //左边的图表2 leftData3:null,//左边的图表3 leftData2_legend: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, time:'', middleData1:'', middleData2:'', middleData3:'', }, 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 >= '" + getMonthStartDate() + "' and quotaDate <= '" + getMonthEndDate() + "';"; console.log(linkageFilter1) if(vm.cityVal!="0") { linkageFilter1 += "town=" + vm.cityVal + ";"; } // 今年 var linkageFilter2 = "quotaDate >= '" + getYearStartDate() + "' and quotaDate <= '" + getYearEndDate() + "';"; if(vm.cityVal!="0") { linkageFilter2 += "town=" + vm.cityVal + ";"; } console.log(linkageFilter2) // 半年 var linkageFilter3 = "quotaDate >= '" + getHalfYearStartDate() + "' and quotaDate <= '" + getHalfYearEndDate() + "';"; if(vm.cityVal!="0") { linkageFilter3 += "town=" + vm.cityVal + ";"; } console.log(linkageFilter3) var linkageFilter4 = "quotaDate >= '" + getYearEndDate() + "' and quotaDate <= '" + getYearEndDate() + "';"; console.log(linkageFilter4) var reqUrl = [{url: bigDataAPI.getCityHospital,reqType: 'get',data: {}}, {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_22_0004",linkageFilter:linkageFilter1}},//医保费用 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_22_0003",linkageFilter:linkageFilter3}},//医保支出费用月趋势 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_22_0002",linkageFilter:linkageFilter1}},//医保目录外费用占比 {url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_22_0005",linkageFilter:linkageFilter1}},// {url:bigDataAPI.getMapJingWeiDuInfo,reqType: 'get',data:{}},//上饶地图经纬度数据 {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_22_0001",linkageFilter:linkageFilter1}},//机构排行 {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_22_0006",linkageFilter:linkageFilter1,limitCondition:JSON.stringify({'VIEW_22_0006': '50'})}},//疾病 ]; // debugger httpRequest.getReqPromises(reqUrl).then(function(datas) { vm.town = datas[0].map((item, index, arr) => { item.children.map((t) => { return t.label = t.text; }) item.label = item.text; return item; }) vm.town.unshift({ label: '上饶市', value: '0' }) vm.middleData1 = toThousands(datas[1].obj.VIEW_22_0004[0].HC_22_1001/10000); vm.middleData2 = datas[1].obj.VIEW_22_0004[0].HC_22_1002; vm.middleData3 = toThousands(datas[1].obj.VIEW_22_0004[0].HC_22_1006/10000); var chart2 = datas[2].obj.viewInfos[0].options[0].option; // vm.leftData1 = datas[1]; var chart3 = datas[3].obj.viewInfos[0].options[0].option; var chart4 = datas[4].obj.viewInfos[0].options[0].option; var data1 = datas[1] var data5 = datas[5]; var data6 = datas[6]; var data7 = datas[7]; vm.setLeftChart1(chart2); vm.setLeftChart2(chart3); vm.setLeftChart3(chart4); vm.setTable1(data6) vm.setTable2(data7) // vm.setRightChart1(data8); // vm.setRightChart2(data9); // vm.setTable1(data4); // vm.setTable2(data5); // vm.setleftData1(); echarts.registerMap('上饶',data5); vm.setMapData(data1); vm.setYesterDay(data1); $(".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(data) { var options = JSON.parse(data); options = leftChart1(options); this.leftData1 = options; }, setLeftChart2: function(data) { var options = JSON.parse(data); this.leftData2_legend = toThousands((Number(options.series[0].data[0].value)+Number(options.series[0].data[1].value))/10000) options = leftChart2(options); this.leftData2 = options; }, setLeftChart3: function(data) { var options = JSON.parse(data); options = leftChart3(options); this.leftData3 = options; }, setMapData: function(data3) { // debugger var optionData = []; _.map(data3.obj&&data3.obj.VIEW_22_0004||[], function(item) { if(item.firstColumn != "合计") { optionData.push({ name: item.town, value: parseInt(item.HC_22_1001) }) } }) if(optionData.length>0){ var options = optionData; this.mapData = { data: options, index: this.lineHeightIndex }; this.hasMapData = true; }else{ this.hasMapData = false; } }, setTable1: function(data) { var arr = data.obj.VIEW_22_0001; arr.shift() arr = arr.map(function(item){ item.HC_22_1001 = toThousands(Number(item.HC_22_1001)/10000) return item; }) this.tableData1 = arr; }, setTable2: function(data) { console.log(data) var arr = data.obj.VIEW_22_0006; arr.shift() arr = arr.map(function(item){ item.HC_22_1004 = toThousands(Number(item.HC_22_1004)/10000) return item; }) this.tableData2 = arr; console.log(this.tableData2) }, 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; }