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

new Vue({
	el: '#app',
	data: {
		pickerOptions0: {
			disabledDate:function(time) {
			  return time.getTime() > Date.now() - 8.64e6
			}},
		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:'',
		linkageFilter1:'',
		linkageFilter3:'',
	},
	mounted: function() {
		var _nowMonth;
		nowMonth == '0'?_nowMonth = 12:_nowMonth=nowMonth
		this.time = new Date(nowYear+'-'+ (_nowMonth))
		this.linkageFilter1 = "quotaDate >= '" + getLastMonthStartDate() + "' and quotaDate <= '" + getLastMonthEndDate() + "';";
		this.linkageFilter2 = "quotaDate >= '" + getHalfYearStartDate() + "' and quotaDate <= '" + getHalfYearEndDate() + "';";
		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;
			// debugger
			// 这个月
			var linkageFilter1 = this.linkageFilter1
			// console.log(linkageFilter1)
			if(vm.cityVal!="0") {
				linkageFilter1 += "town=" + vm.cityVal + ";";
			}
			// 半年
			var linkageFilter2 = this.linkageFilter2
			if(vm.cityVal!="0") {
				linkageFilter2 += "town=" + vm.cityVal + ";";
			}
			// console.log(linkageFilter2)
			// 本月,没有地区条件
			var linkageFilter3 = vm.linkageFilter1;
			// console.log(linkageFilter3)		
			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:linkageFilter2}},//医保支出费用月趋势
						  {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,limitCondition:JSON.stringify({'VIEW_22_0001': '50'})}},//机构排行
						  {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_22_0006",linkageFilter:linkageFilter1,limitCondition:JSON.stringify({'VIEW_22_0006': '50'})}},//疾病
						  {url: bigDataAPI.getNoChartTemplateData,reqType: 'get',data: {viewCodeStr: "VIEW_22_0004",linkageFilter:linkageFilter3}}//医保费用地图数据
						  ];
						//   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'
				})
				// debugger
				// console.log(datas[1])
				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 data5 = datas[5];
				var data6 = datas[6];
				var data7 = datas[7];
				var data8 = datas[8];
				vm.setLeftChart1(chart2);
				vm.setLeftChart2(chart3);
				vm.setLeftChart3(chart4);
				vm.setTable1(data6)
				vm.setTable2(data7)
				echarts.registerMap('上饶',data5);
				vm.setMapData(data8);
				vm.setYesterDay(data8);
				$(".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 = null;
			if(options.series[0].data[0] && options.series[0].data[1]){
				if(options.series[0].data[0].value && options.series[0].data[1].value){
					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) {
			// debugger
			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;
			})
			if(arr.length == 0){
				this.tableData1 = false;
			}else{
				this.tableData1 = arr;
			}
			// console.log(this.tableData1)
		},
		setTable2: function(data) {
			// console.log(data) 
			var arr = data.obj.VIEW_22_0006;
			arr.shift()
			arr = arr.map(function(item){
				if(item.HC_22_1004 == 0){
					return item;
				}
				item.HC_22_1004 = toThousands(Number(item.HC_22_1004)/10000)
				return item;
			})
			if(arr.length == 0){
				this.tableData2 = false;
			}else{
				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) {
			var vm = this;
			// console.log(res)
			this.city = res.name;
			// console.log(this.town)
			var k = null;
			this.town.map(function(item,index){
				if(item.label == res.name){
					k = item.value
				}
				if(item.label == vm.city) {
					vm.cityVal = item.value;
				}
			})
			this.selectTown = [];
			this.selectTown.push(k);
		},
		skipClick: function() {
			// console.log(222)
			this.skipShow == 0 ? this.skipShow = 1 : this.skipShow = 0
		},
		areaChange:function(data){
			console.log(data)
			console.log(this.town)
			var cityValue = null,city=null;
			this.town.map(function(item,index){
				if(item.value == data[0]){
					cityValue = item.value;
					city = item.label
					if(data[1]){
						item.children.map(function(t){
							if(t.value == data[1]){
								cityValue = t.value
							}
						})
					}
				}
			})
			console.log(cityValue)
			this.cityVal = cityValue;
			this.city = city;
		},
		clickTime:function(data){
			// console.log(data);
			var year = data.substring(0,4);
			var month = data.substring(5,7);
			var linkageFilter1 = "quotaDate >= '" + data +"-01' and quotaDate <= '" + data+'-'+getDaysInMonth(year,month)+"';"
			var linkageFilter2 = "quotaDate >= '" + getLastHalfMonthArray(data) +"' and quotaDate <= '" + data+'-'+getDaysInMonth(year,month)+"';"
			this.linkageFilter1 = linkageFilter1;
			this.linkageFilter2 = linkageFilter2;
			this.initData();
		}
	},
	watch: {
		city: function(value) {
			var that = this;
			that.lineHeightIndex = value;
			// this.selectTown = value;
			this.initData();
		}
	}
});
//数字格式化
function toThousands(num) {
	if (!num && num !== 0) return ''
	if (typeof (num) == 'number') {
		num = num.toString()
	}
	var str = ''
	if (num.indexOf('.') != -1) {
		num = Number(num).toFixed(2);
		str = num.split('.')[1];
		num = num.split('.')[0];
	}
	if (str) {
		str = '.' + str
	}

	return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + str;
}
document.getElementById("full").onclick = function (event) {
	var app = document.getElementById('app')
	FullScreen(app);
}
function FullScreen(el) {
	var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
	if (!isFullscreen) { //进入全屏,多重短路表达式
		(el.requestFullscreen && el.requestFullscreen()) ||
		(el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
		(el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el.msRequestFullscreen());

	} else { //退出全屏,三目运算符
		document.exitFullscreen ? document.exitFullscreen() :
			document.mozCancelFullScreen ? document.mozCancelFullScreen() :
			document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
	}
}