app-big-data/page/bigData/js/medical.js

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){
				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) {
				debugger
				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;
}