Переглянути джерело

修改大数据平台页面

lulihong 6 роки тому
батько
коміт
c25994f5a1

+ 48 - 0
page/bigData/css/medical.css

@ -350,3 +350,51 @@ td img {
.sk-spinner-fading-circle .sk-circle:before{
	background-color:white;
}
.no-result-img{
    width: 0.5rem;
    margin: 0 auto;
    object-fit: fill;
    padding-top: 0.2rem;
}
.no-result-img>img{
    width: 100%;
    height: 100%;
}
.no-result-text{
    text-align: center;
    margin-top: 0.1rem;
    font-size: 0.08rem;
    color: #b5e1fc;
}
.no-result-img-chart{
    width: 0.5rem;
    object-fit: fill;
    padding-top: 0.2rem;
    margin: 0 0.05rem 0 0.625rem;
    display: inline-block;
}
.no-result-img-chart>img{
    width: 100%;
    height: 100%;
}
.no-result-text-chart{
    text-align: center;
    margin-top: 0.1rem;
    font-size: 0.08rem;
    color: #b5e1fc;
    display: inline-block;
}
.div-header-title{
	text-align: center;
    font-size: 0.08rem;
    font-weight: bold;
    color: #b5e1fc;
    padding-top: 0.03125rem;
}
.div-menzhenfenleibei{
	background: url(../images/mzrcyuequshi-nodata.png) no-repeat;
}

+ 46 - 6
page/bigData/html/medical.html

@ -105,10 +105,24 @@
					<div class="jiuZhen">
						<div class="boxTitle mb10 mt24">就诊人次</div>
						<div class="contentBox3 mb20">
							<bar-chart :config="leftChart1"></bar-chart>
							<div v-show="!hasData1" class="no-result-panel">
								<div class="div-header-title">门诊人次月趋势</div>
	                            <div class="no-result-img-chart">
	                                <img src="../images/noData.png">
	                            </div>
	                            <div class="no-result-text-chart">暂无数据!</div>
	                        </div>
							<bar-chart :config="leftChart1" v-show="hasData1"></bar-chart>
						</div>
						<div class="contentBox3 ">
							<bar-chart :config="leftChart2"></bar-chart>
							<div v-show="!hasData2" class="no-result-panel">
								<div class="div-header-title">住院人次月趋势</div>
	                            <div class="no-result-img-chart">
	                                <img src="../images/noData.png">
	                            </div>
	                            <div class="no-result-text-chart">暂无数据!</div>
	                        </div>
							<bar-chart :config="leftChart2" v-show="hasData2"></bar-chart>
						</div>
					</div>
				</div>
@ -183,7 +197,13 @@
					<div class="right1">
						<div class="boxTitle mb10">门诊服务情况</div>
						<div class="contentBox mb20  h234">
							<table>
							 <div v-show="!hasData3" class="no-result-panel">
	                            <div class="no-result-img">
	                                <img src="../images/noData.png">
	                            </div>
	                            <div class="no-result-text">暂无数据!</div>
	                        </div>
							<table v-show="hasData3">
								<tr>
									<th class="w60">
										<div>月份</div>
@ -222,14 +242,27 @@
						</div>
						<div class="contentBox3 mb20 h165">
							<bar-chart :config="rightChart1"></bar-chart>
							<div v-show="!hasData4" class="no-result-panel">
								<div class="div-header-title">门诊分类别月趋势</div>
	                            <div class="no-result-img-chart" style="padding-top: 0.078rem;">
	                                <img src="../images/noData.png">
	                            </div>
	                            <div class="no-result-text-chart">暂无数据!</div>
	                        </div>
							<bar-chart :config="rightChart1" v-show="hasData4"></bar-chart>
						</div>
					</div>
					<!-- 住院服务情况 -->
					<div class="right2">
						<div class="boxTitle mb10 mt24">住院服务情况</div>
						<div class="contentBox mb20 h234">
							<table>
							<div v-show="!hasData5" class="no-result-panel">
	                            <div class="no-result-img">
	                                <img src="../images/noData.png">
	                            </div>
	                            <div class="no-result-text">暂无数据!</div>
	                        </div>
							<table v-show="hasData5">
								<tr>
									<th class="w60">
										<div>月份</div>
@ -267,7 +300,14 @@
							</table>
						</div>
						<div class="contentBox3  h165 mb10">
							<bar-chart :config="rightChart2"></bar-chart>
							<div v-show="!hasData6" class="no-result-panel">
								<div class="div-header-title">住院平均日数月趋势</div>
	                            <div class="no-result-img-chart" style="padding-top: 0.078rem;">
	                                <img src="../images/noData.png">
	                            </div>
	                            <div class="no-result-text-chart">暂无数据!</div>
	                        </div>
							<bar-chart :config="rightChart2" v-show="hasData6"></bar-chart>
						</div>
					</div>
				</div>

BIN
page/bigData/images/mzrcyuequshi-nodata.png


BIN
page/bigData/images/noData.png


+ 132 - 71
page/bigData/js/medical.js

@ -19,6 +19,12 @@ new Vue({
		allData: null, //所有的数据  用来切换区县
		lineHeightIndex: null,
		skipShow: 0,
		hasData1:true,
		hasData2:true,
		hasData3:true,
		hasData4:true,
		hasData5:true,
		hasData6:true,
		firstDay: "", //上月第一天
		lastDay: "", //上月最后一天
		firstDayYear: "", //本年第一天
@ -28,8 +34,8 @@ new Vue({
		yesterdayDate:""//昨天
	},
	mounted: function() {
		this.formatDate2017(); //格式化时间
		this.initData();
//		this.formatDate2017(); //格式化时间
		this.initDataNew();
	},
	methods: {
		initData: function() {
@ -83,6 +89,74 @@ new Vue({
				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();
			})
		},
		initDataNew: 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 ob = {VIEW_04_0009:"town=361102;quotaDate >= '2017-01-01' and quotaDate <= '2017-06-30';",VIEW_04_00010:"town=361102;quotaDate >= '2017-01-01' and quotaDate <= '2017-06-30';"};
			
			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:{}},//上饶地图经纬度数据
//						   {url:"/gov/report/getMoreNoChartTemplateData",reqType: 'get',data:{viewMapJson:JSON.stringify(ob)}}
						  ];
			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);
@ -124,9 +198,15 @@ new Vue({
			this.leftData = options;
		},
		setYesterDay: function(data3) {
			var options = null;
			var options = null,vm=this;
			if(data3.successFlg) {
				options = data3.obj.VIEW_14_0012[0];
				 _.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;
@ -134,19 +214,25 @@ new Vue({
		},
		setLeftChart1: function(data6) {
			var options = null;
			if(data6.successFlg) {
				options = JSON.parse(data6.obj.viewInfos[0].options[0].option);
			var options = data6.successFlg?JSON.parse(data6.obj.viewInfos[0].options[0].option):{};
			if(options.series && options.series[0].data && options.series[1].data){
				options = leftChart1DataFormat(options);
				this.leftChart1 = options;
				this.hasData1 = true;
			}else{
				this.hasData2 = false;
			}
			options = leftChart1DataFormat(options);
			this.leftChart1 = options
		},
		setLeftChart2: function(data7) {
			var options = null;
			if(data7.successFlg) {
				options = JSON.parse(data7.obj.viewInfos[0].options[0].option);
			var options = data7.successFlg?JSON.parse(data7.obj.viewInfos[0].options[0].option):{};
			if(options.series && options.series[0].data && options.series[1].data){
				options = leftChart2DataFormat(options);
				this.leftChart2 = options;
				this.hasData2 = true;
			}else{
				this.hasData2 = false;
			}
			options = leftChart2DataFormat(options);
			this.leftChart2 = options;
		},
		setMapData: function(data3) {
			var optionData = [];
@ -166,40 +252,61 @@ new Vue({
		},
		setRightChart1: function(data8) {
			var options = null;
			if(data8.successFlg) {
				options = JSON.parse(data8.obj.viewInfos[0].options[0].option);
			var options = data8.successFlg?JSON.parse(data8.obj.viewInfos[0].options[0].option):{};
			if(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");
			}
			options = rightChart1DataFormat(options);
			this.rightChart1 = options
		},
		setRightChart2: function(data9) {
			var options = null;
			if(data9.successFlg) {
				options = JSON.parse(data9.obj.viewInfos[0].options[0].option);
			var options = data9.successFlg?JSON.parse(data9.obj.viewInfos[0].options[0].option):{};
			if(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");
			}
			options = rightChart2DataFormat(options);
			this.rightChart2 = options
		},
		setTable1: function(data4) {
			var resData = [];
			_.map(data4.obj.VIEW_14_0013, function(item, index) {
			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)
				}
			})
			debugger
			this.tableData1 = resData
			if(resData.length==0){
				this.hasData3 = false;
			}else{
				this.hasData3 = true;
				this.tableData1 = resData
			}
		},
		setTable2: function(data5) {
			var resData = [];
			_.map(data5.obj.VIEW_14_0014, function(item, index) {
			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)
				}
			})
			this.tableData2 = resData
			if(resData.length==0){
				this.hasData5 = false;
			}else{
				this.hasData5 = true;
				this.tableData2 = resData
			}
		},
		setCity(item) {
			this.city = item.name;
@ -216,52 +323,6 @@ new Vue({
				}
			}
		},
		formatDate: function() {
			//获取上个月第一天
			var firstdate = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1);
			//获取上个月最后一天
			var date = new Date();
			var day = new Date(date.getFullYear(), date.getMonth(), 0).getDate();
			var enddate = new Date(new Date().getFullYear(), new Date().getMonth() - 1, day);
			//获取本年第一天和最后一天
			var firstYearDate = new Date();
			firstYearDate.setDate(1);
			firstYearMonty = firstYearDate.setMonth(0);
			//近半年开始时间
			var date1 = new Date();
			date1.setMonth(date1.getMonth() - 6);
			var year1 = date1.getFullYear();
			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()) + "-12-31";
			this.halfYearStartDate = year1.toString() + '-' + month1.toString() + "-01";
			this.halfYearEndDate = this.getCurrentMonthLast();
			this.yesterdayDate = this.getYesterday(-1, '-');
		},
		getCurrentMonthLast: function() {
			var date = new Date();
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth-1, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd");
		},
		getYesterday: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();
		    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;
		},
		formatDate2017: function() {
			//获取上个月第一天
			var firstdate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, 1);