Merge branch 'sr-1.11.0'

component/chart/bar-chart.js

@@ -1,13 +1,20 @@
(function () {
    Vue.component('bar-chart', {
        template: '<div class="chart_box" >\
                        <div :id="chartid" class="chart_box"></div>\
                        <div v-show="!isEmpty" :id="chartid" class="chart_box"></div>\
                        <div class="noData" v-show="isEmpty" class="chart-no-data">\
                            <p v-show="isEmpty" style="text-align: center">{{title}}</p>\
                            <img src="../../bigData/images/noData.png" alt="">\
                            暂无数据\
                        </div>\
                    </div>',
        props: ['config'],
        data: function () {
            return {
                chartid: _.uniqueId("chart_"),
                chart: null,
                isEmpty: false,
                title:''
            }
        },
        mounted: function () {
@@ -23,9 +30,12 @@
        methods: {
            setOption: function (options) {
            	var vm = this;
                if(!options)return
                var options = $.extend({}, defaults, options);
				vm.chart.on('click', function (param){
                   vm.$emit('click-item', {param:param});
       			});
    
                return options
            }
@@ -33,6 +43,15 @@
        watch: {
            config: function (data) {
                if (data) {
                    if(!data.series[0].data){
                        this.isEmpty = true;
                        this.title =data.title && data.title.text;  //无数据时渲染的标题  
                    }else if(data.series[0].data.length == 0){
                        this.isEmpty = true;
                        this.title =data.title && data.title.text;  //无数据时渲染的标题  
                    }else{
                        this.isEmpty = false;
                    }
                    this.chart.setOption(this.setOption(data));
                }
            }

component/chart/map-chart.js

@@ -16,7 +16,7 @@
            this.$nextTick(function () {
                that.chart = echarts.init(document.getElementById(that.chartid));
                that.chart.setOption(that.setOption()); //试着一下
                // that.chart.setOption(that.getOption()); //试着一下
                this.chart.on('click', function (params) { //点击事件
                    that.$emit('clickMap', params) //传给外面点击事件
                    if (params.componentType === 'series') {
@@ -42,7 +42,7 @@
        },
        methods: {
            setOption: function () {
            getOption: function () {
                var options=JSON.parse(JSON.stringify(defaults));
                if(this.config){
                    var maxValue =0;
@@ -54,13 +54,16 @@
                        })
                        var piceArr = this.getPiceArr(maxValue)
                        options.visualMap = {
                            text: null,
                            color: ['#62a3ff', '#bdcfe5', '#c5ddff'],
                            pieces: piceArr,
                            textStyle: {
                    		min: 0,
					        max: maxValue,
					        splitNumber: 5,//分成5等分
					        color: ['#0046ac', '#005adc', '#277fff','#62a2ff','#c5ddff'],
					         textStyle: {
                                color: '#b5e1fc'
                            },
                            left: '50'
					        //pieces: piceArr,
					        left: '50',
					        bottom:'20'
                        }
                        options.series[0].zoom = this.config.zoom || 1.2;
                        options.series[0].data = this.config.data;
@@ -129,7 +132,7 @@
        watch: {
            config: function (data) {
                if (data) {
                    this.chart.setOption(this.setOption());
                    this.chart.setOption(this.getOption());
                    if(data.index !== null)this.selectLineHeight(data.index)
                }
            }
@@ -142,12 +145,12 @@
        },      
        series: [{
            type: 'map',
            mapType: '贵港', // 自定义扩展图表类型
            mapType: '上饶', // 自定义扩展图表类型
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        color: '#002f9c'
                        color: '#ffffff'
                    },
                    borderColor: '#fff',
                    shadowColor: '#0355ab',
@@ -163,27 +166,7 @@
                    areaColor: '#00e9fa',
                }
            },
            data: [{
                    name: '港北区',
                    value: 20057.34
                },
                {
                    name: '港南区',
                    value: 15477.48
                },
                {
                    name: '桂平市',
                    value: 31686.1
                },
                {
                    name: '平南县',
                    value: 6992.6
                },
                {
                    name: '覃塘区',
                    value: 44045.49
                }
            ],
            data: [],
            selectedMode: 'single'
        }],

css/style.min.css

@@ -6853,7 +6853,7 @@ body.skin-3 {
}
::-webkit-scrollbar {
    width: 6px;
    width: 0;/*6px*/
    background-color: #F5F5F5
}

js/api/bigData-api.js

@@ -3,6 +3,17 @@
		getJsonData: function(url,data) {
			return httpRequest.getJson(url, {data: data})
		},
		getTemplateData: function(data) {
            return httpRequest.get("/gov/report/getNoChartTemplateData",{data: data})
        },
        getViewCodeTemplateData: function(data) {
            return httpRequest.get("/gov/report/getTemplateDataByViewCode",{data: data})
        },
		getNoChartTemplateData: "/gov/report/getNoChartTemplateData",
		getTemplateDataByViewCode:"/gov/report/getTemplateDataByViewCode",
		getCityArea: "/gov/report/getCityArea",
		getMapJingWeiDuInfo:"/gov/front/js/lib/plugins/echarts/map/json/china-main-city/361100.json",
		getMoreNoChartTemplateData:"/gov/report/getMoreNoChartTemplateData"
	}
	
	exports.bigDataAPI = bigDataAPI;

js/api/http-request.js

@@ -4,17 +4,15 @@
	var agentName = "useragent"
	var userInfo = "userInfoForPay"
	var isNeedLogin = false
	var openServer;
	var openServer,alertUrl;
	if(publish_version) { // 生产环境配置
		server = "http://www.xmtyw.cn/iot"; // 仕杰
		//      openServer="http://192.168.131.102:8080/user"; // 伟达
		openServer = "http://192.168.131.150:8080"; // 晓阳
		server = "http://jksr.srswjw.gov.cn:1235";
		alertUrl="http://jksr.srswjw.gov.cn:1235/bigScreenShow";
	} else { // 测试环境配置
		//      server = "http://192.168.131.202:9099/iot"; // 桃红
//		      server = "http://192.168.131.24:9099/iot"; // 仕杰
		server = "http://172.19.103.88:9099/iot"; // 测试环境
		//		openServer="http://192.168.131.102:8080/user"; // 伟达
		openServer = "http://192.168.131.150:8080"; // 晓阳
		server = "http://172.19.103.70:1235"; // 测试环境
		alertUrl="http://172.19.103.70:1235/bigScreenShow";
//		server = "http://192.168.131.104:9088"; // 测试环境 周杰
//		 server = "http://192.168.131.105:9088"; // 测试环境 兴旺
	}
	//保存userAgent
@@ -166,6 +164,7 @@
		openServer: openServer,
		userInfo: userInfo,
		agentName: agentName,
		alertUrl:alertUrl,
		saveAgent: function(obj) {
    		return saveUserAgent(obj)
    	},
@@ -180,7 +179,8 @@
		},
		getJson:function(url,options){
			return httpGetJson(url,options)
		}
		},
		getReqPromise:getReqPromise
	}
	exports.httpRequest = httpRequest;

js/util.js

@@ -24,6 +24,18 @@ Date.prototype.format = function(formatStr) {
	return str;
}
function resetClientWidth() {
	var width = document.body.clientWidth
	if(width >= 1920) {
		$('html').css('font-size', width/10 + 'px')
	} else {
		$(document.body).css('overflow', 'auto')
		$('html').css('font-size', 192 + 'px')
	}
}
resetClientWidth()
function isMobilePhone(n) {
	var reg = /^1[34578]\d{9}$/
	return reg.test(n)
@@ -65,4 +77,293 @@ function isNull(str) {
	var re = new RegExp(regu);
	var bb = re.test(str);
	return re.test(str);
}
}
/** 
 * 获取本周、本季度、本月、上月的开端日期、停止日期 
 */
var now = new Date(); //当前日期 
var nowDayOfWeek = now.getDay(); //今天本周的第几天 
var nowDay = now.getDate(); //当前日 
var nowMonth = now.getMonth(); //当前月 
var nowYear = now.getYear(); //当前年 
nowYear += (nowYear < 2000) ? 1900 : 0; //
//nowYear = nowYear-1;//由于2018年没数据，故查询2017年数据（测试）
var lastMonthDate = new Date(); //上月日期 
lastMonthDate.setDate(1);
lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
var lastYear = lastMonthDate.getYear();
var lastMonth = lastMonthDate.getMonth();
//格局化日期：yyyy-MM-dd 
function formatDate(date) {
	var myyear = date.getFullYear();
	var mymonth = date.getMonth() + 1;
	var myweekday = date.getDate();
	if(mymonth < 10) {
		mymonth = "0" + mymonth;
	}
	if(myweekday < 10) {
		myweekday = "0" + myweekday;
	}
	return(myyear + "-" + mymonth + "-" + myweekday);
}
//获得某月的天数 
function getMonthDays(myMonth) {
	var monthStartDate = new Date(nowYear, myMonth, 1);
	var monthEndDate = new Date(nowYear, myMonth + 1, 1);
	var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
	return days;
}
//获得本季度的开端月份 
function getQuarterStartMonth() {
	var quarterStartMonth = 0;
	if(nowMonth < 3) {
		quarterStartMonth = 0;
	}
	if(2 < nowMonth && nowMonth < 6) {
		quarterStartMonth = 3;
	}
	if(5 < nowMonth && nowMonth < 9) {
		quarterStartMonth = 6;
	}
	if(nowMonth > 8) {
		quarterStartMonth = 9;
	}
	return quarterStartMonth;
}
//获得本周的开端日期 
function getWeekStartDate() {
	var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
	return formatDate(weekStartDate);
}
//获得本周的停止日期 
function getWeekEndDate() {
	var weekEndDate = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek));
	return formatDate(weekEndDate);
}
//获得本月的开端日期 
function getMonthStartDate() {
	var monthStartDate = new Date(nowYear, nowMonth, 1);
	return formatDate(monthStartDate);
}
//获得本月的停止日期 
function getMonthEndDate() {
	var monthEndDate = new Date(nowYear, nowMonth, getMonthDays(nowMonth));
	return formatDate(monthEndDate);
}
//获得上月开端时候 
function getLastMonthStartDate() {
	var lastMonthStartDate = new Date(nowYear, lastMonth, 1);
	return formatDate(lastMonthStartDate);
}
//获得上月停止时候 
function getLastMonthEndDate() {
	var lastMonthEndDate = new Date(nowYear, lastMonth, getMonthDays(lastMonth));
	return formatDate(lastMonthEndDate);
}
//获得本季度的开端日期 
function getQuarterStartDate() {
	var quarterStartDate = new Date(nowYear, getQuarterStartMonth(), 1);
	return formatDate(quarterStartDate);
}
//或的本季度的停止日期 
function getQuarterEndDate() {
	var quarterEndMonth = getQuarterStartMonth() + 2;
	var quarterStartDate = new Date(nowYear, quarterEndMonth, getMonthDays(quarterEndMonth));
	return formatDate(quarterStartDate);
}
//获得本年的开始日期
function getYearStartDate() {
    //本年第一天
    var currentYearFirstDate=new Date(nowYear,0,1);
    return formatDate(currentYearFirstDate);
}
//获得本年的结束日期
function getYearEndDate() {
    //本年最后
    var currentYearLastDate=new Date(nowYear,11,31);
    return formatDate(currentYearLastDate);
}
//获得昨天日期
function getYearEndDate() {
    return getYesterday(-1, '-');
}
//近半年开始时间
function getHalfYearStartDate(){
	var date = new Date();
	date.setMonth(date.getMonth() - 6);
	var year = nowYear;
	var month = date.getMonth() + 1;
	month = (month < 10 ? "0" + month : month);
	return year.toString() + '-' + month.toString() + "-01";
}
//近半年结束时间
function getHalfYearEndDate(){
	var date = new Date();
	var currentMonth = date.getMonth();
	var nextMonth = ++currentMonth;
	var nextMonthFirstDay = new Date(nowYear, nextMonth-1, 1);
	var oneDay = 1000 * 60 * 60 * 24;
	return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd");
}
//获取过去12个月时间,不包含本月
function getLastYearMonthArray(){
	var dataArr = [],day,month;
    var data=new Date();
    var year=data.getFullYear()-1;
    data.setMonth(data.getMonth()+1)//获取到当前月份,设置月份
    for (var i = 0; i <=12; i++) {
    	data.setMonth(data.getMonth()-1);//每次循环一次 月份值减1
    	month = (data.getMonth()+1)<10?"0"+(data.getMonth()+1):data.getMonth()+1;
    	if(i==12){//过去第12个月
    		dataArr.push(data.getFullYear()+"-"+month+"-01")
    	}else if(i==0){//本月
    		var day = getDaysInMonth(data.getFullYear(),data.getMonth()+1);
    		dataArr.push(data.getFullYear()+"-"+month+"-"+day)
    	}else{
    		dataArr.push(data.getFullYear()+"-"+month)
    	}
    }
    return dataArr;
}
//根据年月实现获得当月天数
function getDaysInMonth(year,month){
	month = parseInt(month,10);  //parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话，默认是10进制。
	var temp = new Date(year,month,0);
	return temp.getDate();
}
//获取昨天日期
function getYesterday(num, str){
	var today = new Date();
    var nowTime = today.getTime();
    var ms = 24*3600*1000*num;
    today.setTime(parseInt(nowTime + ms));
    var oYear = nowYear;
    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;
}
//获取过去6个月的开始时间
function getLastHalfMonthArray(dateStr){//格式：2018-07
	var dataArr = [],day,month,halfDate;
    var data=new Date();
    data.setFullYear(parseInt(dateStr.substring(0,4)));
    data.setMonth(parseInt(dateStr.substring(5,7)))//获取到当前月份,设置月份
    data.setMonth(data.getMonth()-6);//往前推半年，月份值减6
    month = (data.getMonth()+1)<10?"0"+(data.getMonth()+1):data.getMonth()+1;
    halfDate = data.getFullYear()+"-"+month+"-01"
    return halfDate;
}
//获取当前时间往前推3个季度
function getThirdJiDate(year,month){
	year = Number(year);
	month = Number(month);
	var t = 11;
	if(month<=3){
		t = t - 3 + month;
	}else if(month>3 && month<=6){
		t = t - 6 + month;
	}else if(month>6 && month<=9){
		t = t - 9 + month;
	}else if(month>9 && month<=12){
		t = t - 12 + month;
	}
	if(t>=month){
		year = year - 1;
		month = 12 + month -t;
	}else{
		month = month - t;
	}
	var resDate;
	if(month<10){
		resDate = year +'-0'+month+'-01';
	}else{
		resDate = year +'-'+month+'-01';
	}
	console.log(resDate)
	return resDate;
}
//获取当前时间往前推4个季度
function getFirthJiDate(year,month){
	year = Number(year);
	month = Number(month);
	var t = 14;
	if(month<=3){
		t = t - 3 + month;
	}else if(month>3 && month<=6){
		t = t - 6 + month;
	}else if(month>6 && month<=9){
		t = t - 9 + month;
	}else if(month>9 && month<=12){
		t = t - 12 + month;
	}
	if(t>=month){
		year = year - 1;
		month = 12 + month -t;
	}else{
		month = month - t;
	}
	var resDate;
	if(month<10){
		resDate = year +'-0'+month+'-01';
	}else{
		resDate = year +'-'+month+'-01';
	}
	console.log(resDate)
	return resDate;
}
Date.prototype.Format = function (fmt) { //author: meizz 
	var o = {
	  "M+": this.getMonth() + 1, //月份 
	  "d+": this.getDate(), //日 
	  "h+": this.getHours(), //小时 
	  "m+": this.getMinutes(), //分 
	  "s+": this.getSeconds(), //秒 
	  "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
	  "S": this.getMilliseconds() //毫秒 
	};
	if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	for (var k in o)
	  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) :
		(("00" + o[k]).substr(("" + o[k]).length)));
	return fmt;
  }
function updateFontSize(){
	var width = document.body.clientWidth
	console.log(width)
	if(width >= 1920) {
		$('html').css('font-size', width/10 + 'px')
	} else {
		$(document.body).css('overflow', 'auto')
		$('html').css('font-size', width/7.7 + 'px')
	}
}
//获取地址栏参数
function getUrlParms(name){
	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if(r!=null)
	return unescape(r[2]);
	return null;
}

page/bigData/component/death-cause.js

@@ -1,9 +1,15 @@
(function() {
//<img src="../images/icon.png" class="icon-img">
	Vue.component('death-cause', {
		template: '<div style="height: 100%;">\
						<h4 class="c-b5e1fc c-f16 c-t-center div-common-title">死亡原因</h4>\
						<div class="" style="height: 85%;">\
						<img src="../images/icon.png" class="icon-img" @click="detailClick">\
						<div v-show="!hasData" class="no-result-panel">\
                            <div class="no-result-img">\
                                <img src="../images/noData.png">\
                            </div>\
                            <div class="no-result-text">暂无数据！</div>\
                        </div>\
						<div v-show="hasData" style="height: 85%;">\
							<div id="div-shiwang-echart" class="ml10"></div>\
							<div class="div-siwang-type" v-if="causeData.length>0">\
								<div class="div-webkit-box" v-for="(cause, idx) in causeData">\
@@ -16,10 +22,12 @@
							</div>\
						</div>\
					</div>',
		props: ["data"],
		props: ["data","city","cityVal"],
		data: function() {
			return {
				causeData: []
				causeData: [],
				hasData:true,
				newData:null
			}
		},
		mounted: function() {
@@ -27,8 +35,17 @@
		},
		watch:{
			data:function(data){
				this.data = data;
				this.initData();
				if(data){
					this.newData = data.successFlg?data.obj.viewInfos&&JSON.parse(data.obj.viewInfos[0].options[0].option):{};
					if(this.newData.series&&this.newData.series[0].data&&this.newData.series[0].data.length>0){
						this.hasData = true;
						this.initData();
					}else{
						this.hasData = false;
					}
				}else{
					this.hasData = false;
				}
			}
		},
		filters:{
@@ -38,8 +55,24 @@
			}
		},
		methods: {
			detailClick:function(){
				var vm = this;
				var width = (0.7604 * window.screen.width) + 'px';
				var height = (0.41875 * window.screen.width) + 'px';
				vm.cityVal = vm.cityVal=="0"?"":vm.cityVal;
				top.layer.open({
					id: 'LAY_layuipro', //设定一个id，防止重复弹出
				    type: 2,
				    title: false,
				    closeBtn: 0,
				    shade: 0.5,
				    shadeClose: true,
				    area:  [width, height],
				    content: httpRequest.alertUrl+'/page/bigData/html/alert5.html?town='+vm.city+"&cityVal="+vm.cityVal
				});
			},
			initData:function(){//死亡原因
				this.causeData = this.data["死亡原因"].series[0].data;
				this.causeData = this.newData.series[0].data;
				var myChart = echarts.init(document.getElementById('div-shiwang-echart'));
				var option = {
					//      "title": {

page/bigData/component/disease-crowd.js

@@ -11,7 +11,7 @@
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">总人数</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data["高血压人群"].总人数 | formatData}}</span>\
							<span class="c-fff71a c-f26 c-bold">{{data1.totalNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
@@ -20,7 +20,7 @@
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">上月新增</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data["高血压人群"].上月新增 | formatData}}</span>\
							<span class="c-fff71a c-f26 c-bold">{{data1.addNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
@@ -29,8 +29,9 @@
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">环比</span>\
							</p>\
							<img src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data["高血压人群"].环比}}</span>\
							<img v-if="data1.ringRatio<0" src="../images/xiajiang.png" class="zengzhang-img"/>\
							<img v-if="data1.ringRatio>=0" src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data1.ringRatio}}%</span>\
						</div>\
					</div>\
				</div>\
@@ -44,7 +45,7 @@
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">总人数</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data["糖尿病人群"].总人数 | formatData}}</span>\
							<span class="c-fff71a c-f26 c-bold">{{data2.totalNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
@@ -53,7 +54,7 @@
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">上月新增</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data["糖尿病人群"].上月新增 | formatData}}</span>\
							<span class="c-fff71a c-f26 c-bold">{{data2.addNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
@@ -62,21 +63,23 @@
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">环比</span>\
							</p>\
							<img src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data["糖尿病人群"].环比}}</span>\
							<img v-if="data2.ringRatio<0" src="../images/xiajiang.png" class="zengzhang-img"/>\
							<img v-if="data2.ringRatio>=0" src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data2.ringRatio}}%</span>\
						</div>\
					</div>\
				</div>\
			</div>\
			<div class="div-disease-item mt10" @click="diseaseClick(2)" :class="{active: activeIndex == 2}" @mouseout="diseaseMouseOut" @mouseover="diseaseMouseOver">\
				<h4 class="c-b5e1fc c-f16 c-t-center div-disease-title">孕产妇人群</h4>\
				<img src="../images/icon.png" class="icon-img" @click="detailClick(2)">\
				<div class="c-row">\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">总人数</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data["孕产妇人群"].总人数 | formatData}}</span>\
							<span class="c-fff71a c-f26 c-bold">{{data3.totalNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
@@ -85,7 +88,7 @@
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">上月新增</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data["孕产妇人群"].上月新增 | formatData}}</span>\
							<span class="c-fff71a c-f26 c-bold">{{data3.addNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
@@ -94,21 +97,23 @@
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">环比</span>\
							</p>\
							<img src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data["孕产妇人群"].环比}}</span>\
							<img v-if="data3.ringRatio<0" src="../images/xiajiang.png" class="zengzhang-img"/>\
							<img v-if="data3.ringRatio>=0" src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data3.ringRatio}}%</span>\
						</div>\
					</div>\
				</div>\
			</div>\
			<div class="div-disease-item mt10" @click="diseaseClick(3)" :class="{active: activeIndex == 3}" @mouseout="diseaseMouseOut" @mouseover="diseaseMouseOver">\
				<h4 class="c-b5e1fc c-f16 c-t-center div-disease-title">65岁以上老年人人数</h4>\
				<img src="../images/icon.png" class="icon-img" @click="detailClick(3)">\
				<div class="c-row">\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">总人数</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data["65岁以上老年人人数"].总人数 }}</span>\
							<span class="c-fff71a c-f26 c-bold">{{data4.totalNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
@@ -117,7 +122,7 @@
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">上月新增</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data["65岁以上老年人人数"].上月新增}}</span>\
							<span class="c-fff71a c-f26 c-bold">{{data4.addNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
@@ -126,18 +131,23 @@
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">环比</span>\
							</p>\
							<img src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data["65岁以上老年人人数"].环比}}</span>\
							<img v-if="data4.ringRatio<0" src="../images/xiajiang.png" class="zengzhang-img"/>\
							<img v-if="data4.ringRatio>=0" src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data4.ringRatio}}%</span>\
						</div>\
					</div>\
				</div>\
			</div>\
		</div>',
		props: ["data"],
		props: ["data","town"],
		data: function() {
			return {
				activeIndex:0,
				cacheActiveIndex:0
				cacheActiveIndex:0,
				data1:{},//高血压
				data2:{},//糖尿病
				data3:{},//孕产妇人群
				data4:{},//65岁以上老年人人数
			}
		},
		mounted: function() {
@@ -149,10 +159,67 @@
			}
		},
		methods: {
			initData:function(){
				var data1 = this.data[0].successFlg?this.data[0].detailModelList:[];
				var data2 = this.data[1].successFlg?this.data[1].detailModelList:[];
				var data3 = this.data[2].successFlg?this.data[2].detailModelList:[];
				var data4 = this.data[3].successFlg?this.data[3].detailModelList:[];
				this.gxyformatData(data1);
				this.tnbformatData(data2);
				this.ycfformatData(data3);
				this.lnrformatData(data4);
			},
			gxyformatData:function(data){//高血压数据
				var vm = this,idx;
				_.map(data[0].VIEW_13_0013,function(item,index){
					if(vm.town=="上饶市" && item.firstColumn=="合计"){//上饶市
						idx = index;
					}else if(item.firstColumn==vm.town){
						idx = index;
					}
				})
				vm.data1 = {totalNumber:(data[0].VIEW_13_0013[idx]&&data[0].VIEW_13_0013[idx].HC_13_0021 || "--"),addNumber:(data[1].VIEW_13_0036[idx]&&data[1].VIEW_13_0036[idx].HC_13_0021 || "--"),ringRatio:(data[2].VIEW_13_0037[idx]&&data[2].VIEW_13_0037[idx].HC_13_0023 || "--")};
			},
			tnbformatData:function(data){//糖尿病数据
				var vm = this,idx;
				_.map(data[0].VIEW_13_0026 || [],function(item,index){
					if(vm.town=="上饶市" && item.firstColumn=="合计"){//上饶市
						idx = index;
					}else if(item.firstColumn==vm.town){
						idx = index;
					}
				})
				vm.data2 = {totalNumber:(data[0].VIEW_13_0026[idx]&&data[0].VIEW_13_0026[idx].HC_13_0017 || "--"),addNumber:(data[1].VIEW_13_0034[idx]&&data[1].VIEW_13_0034[idx].HC_13_0017 || "--"),ringRatio:(data[2].VIEW_13_0027[idx]&&data[2].VIEW_13_0027[idx].HC_13_0026 || "--")};
			},
			ycfformatData:function(data){//孕产妇数据
				var vm = this,idx;
				_.map(data[0].VIEW_16_0009,function(item,index){
					if(vm.town=="上饶市" && item.firstColumn=="合计"){//上饶市
						idx = index;
					}else if(item.firstColumn==vm.town){
						idx = index;
					}
				})
				vm.data3 = {totalNumber:(data[0].VIEW_16_0009[idx]&&data[0].VIEW_16_0009[idx].HC_13_0033 || "--"),addNumber:(data[1].VIEW_16_0010[idx]&&data[1].VIEW_16_0010[idx].HC_13_0033 || "--"),ringRatio:(data[2].VIEW_16_0011[idx]&&data[2].VIEW_16_0011[idx].HC_13_0035 || "--")};
			},
			lnrformatData:function(data){//老年人数据
				var vm = this,idx;
				_.map(data[0].VIEW_15_0001,function(item,index){
					if(vm.town=="上饶市" && item.firstColumn=="合计"){//上饶市
						idx = index;
					}else if(item.firstColumn==vm.town){
						idx = index;
					}
				})
				vm.data4 = {totalNumber:data[0].VIEW_15_0001[idx].HC_15_1006,addNumber:data[1].VIEW_15_0011[idx].HC_15_1006,ringRatio:(data[2].VIEW_15_0008[idx]&&data[2].VIEW_15_0008[idx].HC_15_1009 || "--")};
			},
			diseaseClick:function(type){
				this.activeIndex = type;
				this.cacheActiveIndex = type;
				EventBus.$emit('refresh-json-data', {type:type});
				if($(event.target).hasClass("icon-img")){//点击图片,则不触发重新请求数据
					return false;
				}
				EventBus.$emit('refresh-json-data', {type:type});//触发首页重新请求数据方法
			},
			diseaseMouseOver:function(){
				this.activeIndex = null;
@@ -160,8 +227,19 @@
			diseaseMouseOut:function(){
				this.activeIndex = this.cacheActiveIndex;
			},
			detailClick:function(type){//type:0高血压 1糖尿病
				var height = (0.42 * window.screen.width) + 'px';
			detailClick:function(type){//type:0高血压 1糖尿病,2孕产妇3老年人
				var height = (0.42 * window.screen.width) + 'px',url=httpRequest.alertUrl;
				if(type==0){
					url += '/page/bigData/html/alert1.html';
				}else if(type==1){
					url += '/page/bigData/html/alert2.html';
				}else if(type==2){
					url += '/page/bigData/html/alert3.html';
				}else if(type==3){
					url += '/page/bigData/html/alert4.html';
				}
				var width = (0.7604 * window.screen.width) + 'px';
				var height = (0.41875 * window.screen.width) + 'px';
				top.layer.open({
					id: 'LAY_layuipro', //设定一个id，防止重复弹出
				    type: 2,
@@ -169,14 +247,17 @@
				    closeBtn: 0,
				    shade: 0.5,
				    shadeClose: true,
				    area:  ['7.604rem', '4.1875rem'],
				    content: '../../../page/bigData/html/alert.html?type='+type
				    area:  [width, height],
				    content: url
				});
			}
		},
		watch:{
			data:function(data){
				this.data = data;
				if(data&&data.length>0){
					this.data = data;
					this.initData();
				}
			}
		}
		

page/bigData/component/high-incidence-disease.js

@@ -1,8 +1,8 @@
(function() {
//<img src="../images/icon.png" class="icon-img">
	Vue.component('high-incidence-disease', {
		template: '<div style="height: 100%;">\
						<h4 class="c-b5e1fc c-f16 c-t-center div-common-title">本月高发疾病排行</h4>\
						<img src="../images/icon.png" class="icon-img" @click="detailClick">\
						<div data-toggle="buttons" class="btn-group">\
							<label class="btn btn-default" :class="{active: index1 == 0}" @click="btnClick1(0)">\
								<input type="radio">全部\
@@ -18,6 +18,7 @@
							<label class="btn btn-default" :class="{active: index2 == 0}" @click="btnClick2(0)">\
								<input type="radio">本月\
							</label>\
							<img src="../images/icon.png" class="icon-img">\
							<label class="btn btn-default" :class="{active: index2 == 1}" @click="btnClick2(1)">\
								<input type="radio">本季\
							</label>\
@@ -25,123 +26,136 @@
								<input type="radio">本年\
							</label>\
						</div>\
						<div id="div-gaofa-disease-chart" class=""></div>\
						<div v-show="!hasData" class="no-result-panel">\
                            <div class="no-result-img" style="padding-top:1.09375rem;">\
                                <img src="../images/noData.png">\
                            </div>\
                            <div class="no-result-text">暂无数据！</div>\
                        </div>\
						<div id="div-gaofa-disease-chart" v-show="hasData"></div>\
					</div>',
		props: ["data"],
		props: ["data","city","cityVal"],
		data: function() {
			return {
				index1:0,
				index2:0,
				gaoBingFaData:null,
				isInit:true,
				fontSize: 0.007 * window.screen.width,
				fontSize: 0,
				linkageFilter:"",
				hasData:true,
				monthData:null,
				jiData:null,
				yearMonth:null,
			}
		},
		mounted: function() {
			
			var width = window.screen.width>=1920?window.screen.width:1920;
			this.fontSize = 0.007 * width;
		},
		watch:{
			data:function(data){
				this.data = data;
				this.formatData(); 
				this.refreshData();
				if(data[0] || data[1] || data[2]){
					this.monthData = data[0];
					this.yearData = data[1];
					this.jiData = data[2];
					this.initData();
				}else{
					this.hasData = false;
				}
			}
		},
		methods: {
			detailClick:function(){
				var vm = this;
				var width = (0.7604 * window.screen.width) + 'px';
				var height = (0.41875 * window.screen.width) + 'px';
				vm.cityVal = vm.cityVal=="0"?"":vm.cityVal;
				top.layer.open({
					id: 'LAY_layuipro', //设定一个id，防止重复弹出
				    type: 2,
				    title: false,
				    closeBtn: 0,
				    shade: 0.5,
				    shadeClose: true,
				    area:  [width, height],
				    content: httpRequest.alertUrl+'/page/bigData/html/alert6.html?town='+vm.city+"&cityVal="+vm.cityVal
				});
			},
			btnClick1:function(idx){
				this.index1 = idx;
				this.refreshData();
				this.initData();
			},
			btnClick2:function(idx){
				this.index2 = idx;
				this.refreshData();
			},
			formatData:function(){
				//全部.本月
				this.data["本月高发疾病排行"].全部.本月.xAxis[0].data = (this.data["本月高发疾病排行"].全部.本月.xAxis[0].data).reverse();
				this.data["本月高发疾病排行"].全部.本月.series[0].data = (this.data["本月高发疾病排行"].全部.本月.series[0].data).reverse();
				this.data["本月高发疾病排行"].全部.本月.series[1].data = (this.data["本月高发疾病排行"].全部.本月.series[1].data).reverse();
				//全部.本季
				this.data["本月高发疾病排行"].全部.本季.xAxis[0].data = (this.data["本月高发疾病排行"].全部.本季.xAxis[0].data).reverse();
				this.data["本月高发疾病排行"].全部.本季.series[0].data = (this.data["本月高发疾病排行"].全部.本季.series[0].data).reverse();
				this.data["本月高发疾病排行"].全部.本季.series[1].data = (this.data["本月高发疾病排行"].全部.本季.series[1].data).reverse();
				//全部.本年
				this.data["本月高发疾病排行"].全部.本年.xAxis[0].data = (this.data["本月高发疾病排行"].全部.本年.xAxis[0].data).reverse();
				this.data["本月高发疾病排行"].全部.本年.series[0].data = (this.data["本月高发疾病排行"].全部.本年.series[0].data).reverse();
				this.data["本月高发疾病排行"].全部.本年.series[1].data = (this.data["本月高发疾病排行"].全部.本年.series[1].data).reverse();
				//住院.本月
				this.data["本月高发疾病排行"].住院[0].本月.xAxis[0].data = (this.data["本月高发疾病排行"].住院[0].本月.xAxis[0].data).reverse();
				this.data["本月高发疾病排行"].住院[0].本月.series[0].data = (this.data["本月高发疾病排行"].住院[0].本月.series[0].data).reverse();
				//住院.本季
				this.data["本月高发疾病排行"].住院[1].本季.xAxis[0].data = (this.data["本月高发疾病排行"].住院[1].本季.xAxis[0].data).reverse();
				this.data["本月高发疾病排行"].住院[1].本季.series[0].data = (this.data["本月高发疾病排行"].住院[1].本季.series[0].data).reverse();
				//住院.本年
				this.data["本月高发疾病排行"].住院[2].本年.xAxis[0].data = (this.data["本月高发疾病排行"].住院[2].本年.xAxis[0].data).reverse();
				this.data["本月高发疾病排行"].住院[2].本年.series[0].data = (this.data["本月高发疾病排行"].住院[2].本年.series[0].data).reverse();
				//门诊.本月
				this.data["本月高发疾病排行"].门诊[0].本月.xAxis[0].data = (this.data["本月高发疾病排行"].门诊[0].本月.xAxis[0].data).reverse();
				this.data["本月高发疾病排行"].门诊[0].本月.series[0].data = (this.data["本月高发疾病排行"].门诊[0].本月.series[0].data).reverse();
				//门诊.本季
				this.data["本月高发疾病排行"].门诊[1].本季.xAxis[0].data = (this.data["本月高发疾病排行"].门诊[1].本季.xAxis[0].data).reverse();
				this.data["本月高发疾病排行"].门诊[1].本季.series[0].data = (this.data["本月高发疾病排行"].门诊[1].本季.series[0].data).reverse();
				//门诊.本年
				this.data["本月高发疾病排行"].门诊[2].本年.xAxis[0].data = (this.data["本月高发疾病排行"].门诊[2].本年.xAxis[0].data).reverse();
				this.data["本月高发疾病排行"].门诊[2].本年.series[0].data = (this.data["本月高发疾病排行"].门诊[2].本年.series[0].data).reverse();
			},
			refreshData:function(){
				if(this.index1==0){//全部
					if(this.index2==0){//本月
						this.gaoBingFaData = this.data["本月高发疾病排行"].全部.本月;
					}else if(this.index2==1){//本季
						this.gaoBingFaData = this.data["本月高发疾病排行"].全部.本季;
					}else if(this.index2==2){//本年
						this.gaoBingFaData = this.data["本月高发疾病排行"].全部.本年;
					}
				}else if(this.index1==1){//住院
					if(this.index2==0){//本月
						this.gaoBingFaData = this.data["本月高发疾病排行"].住院[0].本月;
					}else if(this.index2==1){//本季
						this.gaoBingFaData = this.data["本月高发疾病排行"].住院[1].本季;
					}else if(this.index2==2){//本年
						this.gaoBingFaData = this.data["本月高发疾病排行"].住院[2].本年;
					}
				}else if(this.index1==2){//门诊
					if(this.index2==0){//本月
						this.gaoBingFaData = this.data["本月高发疾病排行"].门诊[0].本月;
					}else if(this.index2==1){//本季
						this.gaoBingFaData = this.data["本月高发疾病排行"].门诊[1].本季;
					}else if(this.index2==2){//本年
						this.gaoBingFaData = this.data["本月高发疾病排行"].门诊[2].本年;
					}
				}
				this.initData();
			},
			initData:function(){//高发疾病
				var zhuYuanData = [],zhuYuanTitle = "";
				var xAxisData = this.gaoBingFaData.xAxis[0].data;
				var menZhenData = this.gaoBingFaData.series[0].data;
				var menZhenTitle = this.gaoBingFaData.series[0].name;
				if(this.index1==0){//全部,显示门诊/住院数据叠加
					 zhuYuanData = this.gaoBingFaData.series[1].data;
					 zhuYuanTitle = this.gaoBingFaData.series[1].name;
					this.geoFaMainFun(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle)
				if(this.index2==0){//本月
					this.gaoBingFaData = this.monthData.successFlg?this.monthData.obj.viewInfos&&JSON.parse(this.monthData.obj.viewInfos[0].options[0].option):{};
				}else if(this.index2==1){//本季
					this.gaoBingFaData = this.jiData.successFlg?this.jiData.obj.viewInfos&&JSON.parse(this.jiData.obj.viewInfos[0].options[0].option):{};
				}else if(this.index2==2){//本年
					this.gaoBingFaData = this.yearData.successFlg?this.yearData.obj.viewInfos&&JSON.parse(this.yearData.obj.viewInfos[0].options[0].option):{};
				}
				else if(this.index1==1 || this.index1==2){//住院或门诊时,显示单个柱状图
					this.geoFaMainFun(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle)
				if(this.gaoBingFaData&&this.gaoBingFaData.xAxis[0].data){
					this.hasData = true;
				}else{
					this.hasData = false;
					return false;
				}
				var menZhenData = [],menZhenTitle = "";
				var xAxisData = (this.gaoBingFaData.xAxis[0].data)||[];
				var zhuYuanData = (this.gaoBingFaData.series[1].data)||[];
				var zhuYuanTitle = this.gaoBingFaData.series[1].name||"";
				if(this.index1==0){//全部（显示门诊/住院数据叠加)
					 menZhenData = (this.gaoBingFaData.series[0].data);
					 menZhenTitle = this.gaoBingFaData.series[0].name;
				}else if(this.index1==2){//门诊(显示单个柱状图)
					 zhuYuanData = (this.gaoBingFaData.series[0].data);
					 zhuYuanTitle = this.gaoBingFaData.series[0].name;
					 menZhenData = [];
					 menZhenTitle = "";
				}
				//数据排序(降序排列)
				if(this.index1==0){
					var formatData = _.map(zhuYuanData,function(item,idx){
						var total = parseInt(item)+parseInt(menZhenData[idx]);
						return {total:total,zhuyuanval:parseInt(item),menzhenval:parseInt(menZhenData[idx]),xAxis:xAxisData[idx]}
					 })
					 formatData = _.sortBy(formatData,"total").reverse();
					 xAxisData = [],zhuYuanData=[],menZhenData=[];
					_.map(formatData,function(item,idx){
						xAxisData.push(item.xAxis);
						zhuYuanData.push(item.zhuyuanval);
						menZhenData.push(item.menzhenval);
					})
				}else if(this.index1==1 || this.index1==2){
					var formatData = _.map(zhuYuanData,function(item,idx){
						return {total:parseInt(item),zhuyuanval:parseInt(item),xAxis:xAxisData[idx]}
					 })
					 formatData = _.sortBy(formatData,"total").reverse();
					 xAxisData = [],zhuYuanData=[];
					_.map(formatData,function(item,idx){
						xAxisData.push(item.xAxis);
						zhuYuanData.push(item.zhuyuanval);
					}) 
				}
				this.geoFaMainFun(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle)
			},
			geoFaMainFun:function(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle){
				var vm = this;
				var gaoFaChart = echarts.init(document.getElementById('div-gaofa-disease-chart'));
				debugger
				var gaofaOption = {
					"tooltip": {
						"trigger": "axis"
					},
					grid: {top: 40, bottom: 30, left: 140,right:80},
					"grid": {top: 40, bottom: 30, left: 140,right:80},
					"yAxis": [{
						"type": "category",
						"name": "人次",
						"data": xAxisData,
						"data": xAxisData.reverse(),
						axisPointer: {
							type: 'shadow'
						},
@@ -156,8 +170,16 @@
						axisLabel: {
							color: '#b5e1fc',
							fontSize:vm.fontSize,
							interval: 0,
						    formatter: function(value) {
							    if (value.length > 8) {
							      return value.substring(0, 8) + "...";
							    } else {
							      return value;
							    }
							 }
						},
						nameTextStyle:{color: '#b5e1fc'}
						nameTextStyle:{color: '#b5e1fc'},
					}],
					"xAxis": [{
						"type": "value",
@@ -183,7 +205,7 @@
					}],
					"series": [{
							"smooth": true,
							"name": menZhenTitle,
							"name": zhuYuanTitle,
							"type": "bar",
							stack: '高发疾病',
							barWidth: 20,
@@ -201,31 +223,32 @@
									barBorderRadius: [0, 8, 8, 0],
								}
							},
							"data": menZhenData
							"data": zhuYuanData.reverse()
						},
					]
				}
				if(zhuYuanData.length>0){
				if(menZhenData.length>0){
					gaofaOption.series[0].label.show = false;
					gaofaOption.series[0].itemStyle.normal.color = "#6576e0";
					delete gaofaOption.series[0].itemStyle.normal.barBorderRadius;
					gaofaOption.series[1] = {
							"smooth": true,
							"name": zhuYuanTitle,
							"name": menZhenTitle,
							"type": "bar",
							stack: '高发疾病',
							"label": {
								show: true,
								position: "right",
								color: '#b5e1fc',
								fontSize:vm.fontSize,
								formatter:function(param){
									var dataIndex = param.dataIndex,menZhenVal;
									 _.map(menZhenData,function(item,idx){
									var dataIndex = param.dataIndex,zhuYuanVal;
									 _.map(zhuYuanData,function(item,idx){
									 	if(idx==dataIndex){
									 		menZhenVal = item
									 		zhuYuanVal = item
									 	}
									})
	                                return menZhenVal+"+"+param.value;
	                                return zhuYuanVal+"+"+param.value;
	                           },
							},
							"itemStyle": {
@@ -237,7 +260,7 @@
									color: '#00e6f3'
								},
							},
							"data": zhuYuanData
							"data": menZhenData.reverse()
						}
				}else{
					gaofaOption.series = gaofaOption.series[0];

page/bigData/component/key-service-population.js

@@ -3,7 +3,7 @@
	Vue.component('key-service-population', {
		template: '<div style="height: 100%;">\
						<h4 class="c-b5e1fc c-f16 c-t-center div-common-title">重点服务人群增加趋势</h4>\
						<div data-toggle="buttons" class="btn-group fr mr40 mt0" style="position: absolute;right: 0.208rem;top: 0.05rem;z-index: 99999;">\
                    	<div data-toggle="buttons" class="btn-group fr mr40 mt0" style="position: absolute;right: 0.208rem;top: 0.05rem;z-index: 99999;">\
							<label class="btn btn-default" :class="{active: activeIndex == 0}" @click="btnClick(0)">\
								<input type="radio">月\
							</label>\
@@ -14,45 +14,62 @@
								<input type="radio">年\
							</label>\
						</div>\
						<div id="div-zhongidan-echart" class="ml30"></div>\
						<div v-show="!hasData" class="no-result-panel">\
                            <div class="no-result-img">\
                                <img src="../images/noData.png">\
                            </div>\
                            <div class="no-result-text">暂无数据！</div>\
                        </div>\
						<div id="div-zhongidan-echart" class="ml30" v-show="hasData"></div>\
					</div>',
		props: ["data"],
		data: function() {
			return {
				keyServiceData:null,
				activeIndex:0,
				fontSize: 0.007 * window.screen.width,
				fontSize: 0,
				hasData:true,
				monthData:null,
				jiData:null,
				yearData:null,
			}
		},
		mounted: function() {
			var vm = this;
			setTimeout(function(){
				vm.initData();
			},50)
			var width = window.screen.width>=1920?window.screen.width:1920;
			this.fontSize = 0.007 * width;
		},
		watch:{
			data:function(data){
				this.data = data;
				this.initData();
			data:function(newData){
				this.data = newData;
				if(this.data && JSON.parse(this.data[0].obj.viewInfos[0].options[0].option).series[0].data){
					this.monthData = this.data[0].successFlg?this.data[0].obj.viewInfos&&JSON.parse(this.data[0].obj.viewInfos[0].options[0].option):{};
					this.jiData = this.data[1].successFlg?this.data[1].obj.viewInfos&&JSON.parse(this.data[1].obj.viewInfos[0].options[0].option):{};
					this.yearData = this.data[2].successFlg?this.data[2].obj.viewInfos&&JSON.parse(this.data[2].obj.viewInfos[0].options[0].option):{};
					this.initData();
					this.hasData = true;
				}else{
					this.hasData = false;
				}
			}
		},
		methods: {
			initData:function(){//重点人群
				this.activeIndex = 0;
				this.keyServiceData = this.data["重点服务人群增加趋势"].本月;
				this.changeData();
				this.chartMainFun();
			},
			changeData:function(){
				if(this.activeIndex==0){//月
					this.keyServiceData = this.monthData;
				}else if(this.activeIndex==1){//季度
					this.keyServiceData = this.jiData;
				}else if(this.activeIndex==2){//年
					this.keyServiceData = this.yearData;
				}
			},
			btnClick:function(type){
				this.activeIndex = type;
				if(type==0){//本月
					this.keyServiceData = this.data["重点服务人群增加趋势"].本月;
				}
				if(type==1){//本季
					this.keyServiceData = this.data["重点服务人群增加趋势"].本季;
				}
				if(type==2){//本年
					this.keyServiceData = this.data["重点服务人群增加趋势"].本年;
				}
				this.changeData();
				this.chartMainFun();
			},
			chartMainFun:function(){
@@ -60,6 +77,10 @@
				var xAxisData = this.keyServiceData.xAxis[0].data;
				var pjcrsData = this.keyServiceData.series[0].data;
				var huanbiData = this.keyServiceData.series[1].data;
				huanbiData = _.map(huanbiData,function(item,idx){
					item = item=="--"?0:item;
					return item;
				})
				var zhongdianChart = echarts.init(document.getElementById('div-zhongidan-echart'));
				var zhongdianOption =  {
				    tooltip: {
@@ -71,7 +92,7 @@
				    },
					grid: {top: 50, bottom: 30, left: 30,right:80},
				    legend: {
				        data:['平均床日数','环比'],
				        data:['新增人数','环比'],
						textStyle: {
							color: '#b5e1fc'
						}
@@ -100,7 +121,7 @@
				    yAxis: [
				        {
				            type: 'value',
				            name: '平均床日数',
				            name: '新增人数',
							nameTextStyle: {
								color: '#b5e1fc' // 坐标轴名称颜色
							},
@@ -140,7 +161,7 @@
				    ],
				    series: [
				        {
				            name:'平均床日数',
				            name:'新增人数',
				            type:'bar',
				            data:pjcrsData,
				            barWidth: 20,
@@ -167,7 +188,9 @@
				        }
				    ]
				};
				
				if(zhongdianChart){
					zhongdianChart.clear();
				}
				zhongdianChart.setOption(zhongdianOption);
			},
		

page/bigData/css/alert.css

@@ -2,30 +2,30 @@ body {
  background-image: none;
  background-color: transparent;
}
.alert_centent {
.alert_content {
  width: 7.322917rem;
  height: 4.1875rem;
  background-image: url("../images/alert_bgi.png");
  background-size: 100% 100%;
  margin: 0 auto;
}
.alert_centent .alert_title {
.alert_content .alert_title {
  height: .3125rem;
  line-height: .416667rem;
  overflow: hidden;
}
.alert_centent .alert_title .left {
.alert_content .alert_title .left {
  float: left;
  font-size: .125rem;
  color: #b5e1fc;
  margin-left: .3125rem;
}
.alert_centent .alert_title .right {
.alert_content .alert_title .right {
  float: right;
  width: 2.838542rem;
  width: 2.538542rem;
  overflow: hidden;
}
.alert_centent .alert_title .right .alert_type {
.alert_content .alert_title .right .alert_type {
  float: left;
  width: .875rem;
  height: .125rem;
@@ -36,10 +36,10 @@ body {
  overflow: hidden;
  border-radius: .015625rem;
}
.alert_centent .alert_title .right .btn-group {
.alert_content .alert_title .right .btn-group {
  margin: 0;
}
.alert_centent .alert_title .right .btn-group .btn {
.alert_content .alert_title .right .btn-group .btn {
  height: .125rem;
  line-height: .125rem;
  font-size: .072917rem;
@@ -49,52 +49,69 @@ body {
  border-color: #009dfe;
  color: #257fb7;
}
.alert_centent .alert_title .right .btn-group .btn.active {
.alert_content .alert_title .right .btn-group .btn.active {
  color: #fff;
  background-color: #009dfe;
}
.alert_centent .alert_title .right .alert_time {
.alert_content .alert_title .right .alert_time {
  float: right;
  margin-right: .223958rem;
  margin-right: .263958rem;
  color: #b5e1fc;
  font-size: .072917rem;
}
.alert_centent .alert_title .right .alert_time select {
  width: .677083rem;
.alert_content .alert_title .right .alert_time input {
  width: 1.041667rem;
  height: .135417rem;
  background-color: #051f33;
  border: solid 1px #009dfe;
  margin-left: .078125rem;
  padding: 0;
  text-align: center;
  background-image: url("../images/icon_rili1.png");
  background-repeat: no-repeat;
  background-size: .072917rem .067708rem;
  background-position: .052083rem center;
}
.alert_content .alert_title .right .alert_time input:hover {
  border: solid 1px #009dfe!important;
}
.alert_content .alert_title .right .alert_time input:active {
  border: solid 1px #009dfe!important;
}
.alert_content .alert_title .right .alert_time input:focus {
  border: solid 1px #009dfe!important;
}
.alert_centent .alert_people {
.alert_content .alert_people {
  padding-left: .260417rem;
  padding-right: .260417rem;
  margin-top: .078125rem;
}
.alert_centent .alert_people > div {
.alert_content .alert_people > div {
  width: 1.677083rem;
  height: .239583rem;
  line-height: .239583rem;
  background-image: url("../images/people_bgi.png");
  background-size: 100% 100%;
}
.alert_centent .alert_people > div span {
.alert_content .alert_people > div span {
  color: #b5e1fc;
  display: inline-block;
}
.alert_centent .alert_people > div span:nth-of-type(1) {
.alert_content .alert_people > div span:nth-of-type(1) {
  font-size: .104167rem;
  margin-left: .364583rem;
}
.alert_centent .alert_people > div span:nth-of-type(2) {
.alert_content .alert_people > div span:nth-of-type(2) {
  font-size: .135417rem;
  margin-left: .130208rem;
}
.alert_centent .alert_people > div span:nth-of-type(3) {
.alert_content .alert_people > div span:nth-of-type(3) {
  font-size: .083333rem;
}
.alert_chart {
  padding-left: .260417rem;
  padding-right: .260417rem;
  margin-top: .0625rem;
  margin-top: .1025rem;
}
.alert_chart .left {
  height: 2.848958rem;
@@ -102,15 +119,58 @@ body {
  background-image: url("../images/quxian-bgi.png");
  background-size: 100% 100%;
}
.alert_chart .left_2 {
  height: 3.057292rem;
  width: 2.15625rem;
}
.alert_chart .left_2 ul {
  width: 1.036458rem;
}
.alert_chart .left_2 ul li {
  background-color: rgba(5, 31, 51, 0.75);
}
.alert_chart .left_2 ul li.title {
  box-shadow: inset 1px 0px 20px 6px #004b7a;
  border: 1px solid #009dfe;
}
.alert_chart .left_2 ul li.title div {
  height: .21875rem;
  line-height: .21875rem;
}
.alert_chart .left_2 ul li div {
  height: .239583rem;
  line-height: .239583rem;
  text-align: center;
  color: #b5e1fc;
  border: solid 1px #004b7a;
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert_chart .right {
  width: 4.583333rem;
}
.alert_chart .right .top > div {
  width: 1.510417rem;
  width: 1.479167rem;
  height: 1.380208rem;
  background-image: url("../images/top_bgi.png");
  background-size: 100% 100%;
}
.alert_chart .right .top > div.bingfa2 {
  width: 3.005208rem;
  background-image: url("../images/right-chart-bgi.png");
}
.alert_chart .right .top .nianling_2 {
  width: 2.255208rem;
  height: 1.4375rem;
  background-image: url("../images/nianling_2.png");
}
.alert_chart .right .top .xingbie_2 {
  width: 2.255208rem;
  height: 1.4375rem;
  background-image: url("../images/nianling_2.png");
}
.alert_chart .right .bottom {
  height: 1.380208rem;
  margin-top: .088542rem;
@@ -124,10 +184,101 @@ body {
  right: .078125rem;
  z-index: 5;
}
.alert_centent .alert_close {
  width: 50px;
  height: 50px;
  margin: 88px auto 0;
.alert_chart .right .bottom_2 {
  height: 1.588542rem;
  margin-top: .088542rem;
  background-image: url("../images/bottom_bgi.png");
  background-size: 100% 100%;
  position: relative;
}
.alert_chart .right .bottom_2 .btn-group {
  position: absolute;
  top: 0;
  right: .078125rem;
  z-index: 5;
}
.alert_content .alert_close {
  width: .260417rem;
  height: .260417rem;
  margin: .308333rem auto 0;
  display: block;
  cursor: pointer;
}
.laydate-main-list-0 .layui-laydate-content .layui-laydate-list {
  background: #051f33;
  box-shadow: inset 7px -8px 20px 0px #053b5c;
}
.laydate-main-list-1 .layui-laydate-content .layui-laydate-list {
  background: #051f33;
  box-shadow: inset -11px -11px 20px 0px #053b5c;
}
.laydate-theme-molv .layui-laydate-content {
  border: none!important;
}
.laydate-theme-molv .layui-laydate-footer {
  background-color: #051f33;
  border: none!important;
}
.layui-laydate-list li {
  color: #b5e1fc;
}
.layui-laydate-list li.layui-this {
  color: #009dfe!important;
}
.layui-laydate-list li:hover {
  color: #009dfe!important;
  background: #051f33!important;
}
.layui-laydate-footer .laydate-footer-btns span {
  background-color: transparent!important;
  color: #257fb7!important;
  border-color: #009dfe!important;
}
.layui-laydate-footer .laydate-footer-btns span:hover {
  background-color: #009dfe!important;
  color: #fff!important;
}
.layui-laydate {
  left: 4.454125rem!important;
  font-size: .072917rem!important;
  border: solid 1px #009dfe!important;
  box-sizing: border-box;
}
.layui-laydate .laydate-disabled,
.layui-laydate .laydate-disabled:hover {
  color: #0c324f!important;
}
.chart-no-data {
  text-align: center;
  color: #b5e1fc;
}
.chart-no-data p {
  font-size: .083333rem;
  padding-top: .052083rem;
  font-weight: bold;
}
.chart-no-data img {
  display: block;
  margin: .208333rem auto .078125rem;
}
.layui-laydate-header i {
  font-size: .09375rem!important;
}
.laydate-theme-molv.layui-laydate-range {
  width: 2.86742rem !important;
}
.laydate-theme-molv .layui-laydate-main {
  width: 1.427083rem!important;
}
.table_select {
  background-color: #009dfe!important;
  border-left: solid 1px #004b7a;
  border-right: solid 1px #004b7a;
}
.table_select div {
  border: none!important;
  color: #fff!important;
}
.click {
  cursor: pointer;
}

page/bigData/css/alert.less

@@ -1,50 +1,66 @@
body{
    background-image: none;background-color:transparent;
}
.alert_centent{
.alert_content{
    width: 7.322917rem;height: 4.1875rem;background-image: url("../images/alert_bgi.png");background-size: 100% 100%;
    margin: 0 auto;
}
.alert_centent .alert_title{
.alert_content .alert_title{
    height: .3125rem;line-height: .416667rem;overflow: hidden;
}
.alert_centent .alert_title .left{
.alert_content .alert_title .left{
    float: left;font-size: .125rem;color: #b5e1fc;margin-left: .3125rem;
}
.alert_centent .alert_title .right{
    float: right;width: 2.838542rem;overflow: hidden;
.alert_content .alert_title .right{
    float: right;width: 2.538542rem;overflow: hidden;
}
.alert_centent .alert_title .right .alert_type{
.alert_content .alert_title .right .alert_type{
    float: left;width: .875rem;
    height: .125rem;line-height: .125rem;
    background-color:transparent;
    border: solid 1px #009dfe;
    margin-top: .130208rem;overflow: hidden;border-radius: .015625rem;
}
.alert_centent .alert_title .right .btn-group{
.alert_content .alert_title .right .btn-group{
    margin: 0;
}
.alert_centent .alert_title .right .btn-group .btn{
.alert_content .alert_title .right .btn-group .btn{
    height: .125rem;line-height: .125rem;font-size: .072917rem;padding: 0;width: .291667rem;background-color: transparent;
    border-color: #009dfe;color: #257fb7;
}
.alert_centent .alert_title .right .btn-group .btn.active{
.alert_content .alert_title .right .btn-group .btn.active{
    color: #fff;background-color: #009dfe;
}
.alert_centent .alert_title .right .alert_time{
    float: right;margin-right: .223958rem;color: #b5e1fc;font-size: .072917rem;
.alert_content .alert_title .right .alert_time{
    float: right;margin-right: .263958rem;color: #b5e1fc;font-size: .072917rem;
}
.alert_centent .alert_title .right .alert_time select{
    width: .677083rem;
.alert_content .alert_title .right .alert_time input{
    width: 1.041667rem;
    height: .135417rem;
    background-color: #051f33;
    border: solid 1px #009dfe;
    margin-left: .078125rem;
    padding: 0;
    text-align: center;
    background-image: url("../images/icon_rili1.png");
    background-repeat: no-repeat;
    background-size: .072917rem .067708rem;
    background-position: .052083rem center;
    &:hover{
        border: solid 1px #009dfe!important;
    }
    &:active{
        border: solid 1px #009dfe!important;
    }
    &:focus{
        border: solid 1px #009dfe!important;
    }
}
.alert_centent .alert_people{
    padding-left: .260417rem;padding-right: .260417rem;
.alert_content .alert_people{
    padding-left: .260417rem;padding-right: .260417rem;margin-top: .078125rem;
}
.alert_centent .alert_people>div{
.alert_content .alert_people>div{
    width: 1.677083rem;height: .239583rem;line-height: .239583rem;background-image: url("../images/people_bgi.png");background-size: 100% 100%;
    span{
        color: #b5e1fc;display: inline-block;
@@ -60,15 +76,43 @@ body{
    }
}
.alert_chart{
    padding-left: .260417rem;padding-right: .260417rem;margin-top: .0625rem;
    padding-left: .260417rem;padding-right: .260417rem;margin-top: .1025rem;
    .left{
        height: 2.848958rem;width: 2.15625rem;background-image: url("../images/quxian-bgi.png");background-size: 100% 100%;
    }
    .left_2{
        height: 3.057292rem;width: 2.15625rem;
        ul{
            width: 1.036458rem;
            li{
                background-color: rgba(5, 31, 51, 0.75);
                &.title{
                    box-shadow:inset 1px 0px 20px 6px #004b7a;border:1px solid #009dfe;
                    div{
                        height: .21875rem;line-height: .21875rem;
                    }
                }
                div{
                    height: .239583rem;line-height: .239583rem;text-align: center;color: #b5e1fc; border: solid 1px #004b7a;width: 50%;
                    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
                }
            }
        }
    }
    .right{
        width: 4.583333rem;
        .top{
            &>div{
                width: 1.510417rem;height: 1.380208rem;background-image: url("../images/top_bgi.png");background-size: 100% 100%;
                width: 1.479167rem;height: 1.380208rem;background-image: url("../images/top_bgi.png");background-size: 100% 100%;
                &.bingfa2{
                    width: 3.005208rem;background-image: url("../images/right-chart-bgi.png");
                }
            }
            .nianling_2{
                width: 2.255208rem;height: 1.4375rem;background-image: url("../images/nianling_2.png");
            }
            .xingbie_2{
                width: 2.255208rem;height: 1.4375rem;background-image: url("../images/nianling_2.png");
            }
        }
        .bottom{
@@ -78,8 +122,99 @@ body{
                position: absolute;top: 0;right: .078125rem;z-index: 5;
            }
        }
        .bottom_2{
            height: 1.588542rem;margin-top: .088542rem;background-image: url("../images/bottom_bgi.png");background-size: 100% 100%;
            position: relative;
            .btn-group{
                position: absolute;top: 0;right: .078125rem;z-index: 5;
            }
        }
    }
}
.alert_content .alert_close{
    width: .260417rem;height: .260417rem;margin: .308333rem auto 0;display: block;cursor:pointer; 
}
.laydate-main-list-0{
    .layui-laydate-content{
        .layui-laydate-list{
            background: #051f33;
            box-shadow: inset 7px -8px 20px 0px #053b5c;
        }
    }
}
.alert_centent .alert_close{
    width: 50px;height: 50px;margin: 88px auto 0;display: block;
.laydate-main-list-1{
    .layui-laydate-content{
        .layui-laydate-list{
            background: #051f33;
            box-shadow: inset -11px -11px 20px 0px #053b5c;
        }
    }
}
.laydate-theme-molv .layui-laydate-content{
    border: none!important;
}
.laydate-theme-molv .layui-laydate-footer{
    background-color: #051f33;
    border: none!important;
}
.layui-laydate-list{
    li{
        color: #b5e1fc;
        &.layui-this{
            color: #009dfe!important;
        }
        &:hover{
            color: #009dfe!important;
            background: #051f33!important;
        }
    }
}
.layui-laydate-footer{
    .laydate-footer-btns{
        span{
            background-color: transparent!important;
            color: #257fb7!important;
            border-color: #009dfe!important;
            &:hover{
                background-color: #009dfe!important;
                color: #fff!important;
            }
        }
    }
}
.layui-laydate{
    left: 4.454125rem!important;font-size: .072917rem!important;border: solid 1px #009dfe!important;box-sizing: border-box;
}
.layui-laydate .laydate-disabled, .layui-laydate .laydate-disabled:hover{
    color: #0c324f!important;
}
.chart-no-data{
    text-align: center;color: #b5e1fc;
    p{
        font-size: .083333rem;padding-top: .052083rem;font-weight: bold;
    }
    img{
        display: block;margin: .208333rem auto .078125rem;
    }
}
.layui-laydate-header i{
    font-size: .09375rem!important;
}
.laydate-theme-molv.layui-laydate-range{
    width: 2.86742rem!important
}
.laydate-theme-molv .layui-laydate-main{
    width: 1.427083rem!important;
}
.table_select{
    background-color: #009dfe!important;
    border-left: solid 1px #004b7a;
    border-right: solid 1px #004b7a;
}
.table_select div{
    border: none!important;
    color: #fff!important;
}
.click{
    cursor:pointer;
}

page/bigData/css/home.css

@@ -9,25 +9,24 @@ body {
#main {
	height: 100%;
	overflow-y: auto;
}
.div-header {
	background: url(../images/jumingjiankang.png) no-repeat;
	width: 100%;
	width: 10rem;
	height: 0.39rem;
	background-size: 100% 100%;
	background-size: 10rem 0.39rem;
	z-index: 50;
	position: fixed;
	top: 0;
	position: relative;
}
.div-bottom {
	background: url(../images/logo_bg_img.png) no-repeat;
	width: 100%;
	width: 10rem;
	height: 0.2rem;
	background-size: 100% 100%;
	position: fixed;
	bottom: 0;
	background-size: 10rem 0.2rem;
	margin-top: 10px;
}
.div-title {
@@ -42,8 +41,9 @@ body {
	color: #ffffff;
	margin-left: 0.1rem;
	z-index: 99;
	position: relative;
	position: absolute;
	cursor: pointer;
	top: 10px;
}
.div-skip {
@@ -55,6 +55,7 @@ body {
	background-size: 100% 100%;
	position: fixed;
	z-index: 5;
	top: 0.271rem;
	-webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	-o-transition: all .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	transition: all .5s cubic-bezier(0.68, -0.55, 0.27, 1.55)
@@ -77,30 +78,30 @@ body {
}
.div-skip div a{
	color:rgba(213, 230, 255);
	color: rgba(213, 230, 255)
}
.div-skip div a:hover {
	color: rgb(4, 128, 211)
	color:rgb(4, 128, 211);
}
.content {
	width: 100%;
	height: calc(100% - 0.65rem);
	/*padding: 0.12rem;*/
	position: relative;
	display: -webkit-box;
	display: box;
	margin-top: 0.1rem;
}
.left-panel {
	position: absolute;
	position: relative;
	width: 2.62rem;
	height: 3.53rem;
	/* height: 3.53rem; */
	background: url(../images/dibu.png) no-repeat;
	background-size: 2.62rem 3.53rem;
	top: 0;
	left: 0.1rem;
	right: 0.18rem;
	/*padding: 0.05rem;*/
	margin-left: 0.1rem;
	margin-right: 0.1rem;
	padding: 0.05rem;
}
.left-panel-img{
@@ -118,18 +119,17 @@ body {
	height: 3.11rem;
	background: url(../images/ditudibu1.png) no-repeat;
	background-size: 4.286rem 3.11rem;
	margin-left: 2.8rem;
	margin-top: 0.1rem;
	color: rgba(213, 230, 255)
	color: rgba(213, 230, 255);
	-webkit-box-flex: 0;
}
.right-panel {
	position: absolute;
	width: 2.677rem;
	height: 3.1rem;
	background: url(../images/fengexian.png) no-repeat;
	background-size: 2.677rem 3.1rem;
	right: 0.1rem;
	margin-left: 0.1rem;
	position: relative;
}
.center-panel .map {
@@ -138,23 +138,23 @@ body {
}
.bottom-left-panel {
	position: absolute;
	position: relative; 
	width: 7rem;
	height: 1.63rem;
	background: url(../images/zdfwrqzengjiaqushi.png) no-repeat;
	background-size: 7rem 1.63rem;
	left: 0.1rem;
	bottom: 0.1rem;
	margin-left: 0.1rem;
	margin-top: 0.1rem;
}
.bottom-right-panel {
	position: absolute;
	position: relative; 
	width: 2.677rem;
	height: 1.64rem;
	background: url(../images/shiwangyuanyin.png) no-repeat;
	background-size: 2.677rem 1.64rem;
	right: 0.1rem;
	bottom: 0.1rem;
	margin-left: 0.1rem;
	margin-top: 0.1rem;
}
.div-disease-item {
@@ -337,6 +337,7 @@ h4 {
}
#div-gaofa-disease-chart {
	width: 100%;
	height: calc(100% - 0.53125rem)
}
@@ -372,6 +373,16 @@ h4 {
	margin-top: 0.12rem;
}
.btn.focus,
.btn:focus,
.btn:hover {
	color: #fff
}
.btn{
	padding: 3px 12px;
}
.mr20 {
	margin-right: 0.1rem;
}
@@ -404,6 +415,11 @@ h4 {
	margin-top: 0.1rem;
}
.pt20 {
	padding-top: 0.1rem;
}
.div-siwang-type {
	width: 50%;
	position: absolute;
@@ -486,11 +502,29 @@ h4 {
.map #dropdownMenu1 {
	background: url(../images/mjzfwqktoubukuang.png) center center / 100% 100% no-repeat;
	height: 34px;
	padding: 6px 35px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    margin-top: 0.1rem;
    width: 100px;
    text-align: left;
    border: 1px solid #009dfe;
    border-radius: 0;
    padding-left: 7px;
}
.dropdown-menu{
	min-width: 140px;
}
.btn .caret{
	float: right;
    margin-right: 7px;
    margin-top: 12px;
}
.dropdown-menu li a:hover{
	background: #009DFE;
	color: #FFFFFF;
}
.diqu-label{
	position: absolute;
    top: 0.26rem;
@@ -498,13 +532,45 @@ h4 {
    font-size: 0.073rem;
}
.btn.focus,
.btn:focus,
.btn:hover {
	color: #fff
.dropdown-menu {
	background: rgba(5,31,51, 0.6);
	border: 1px solid #009dfe;
}
.dropdown-menu {
	background: url(../images/mjzfwqktoubukuang.png) center center / 100% 100% no-repeat;
	background-size: 100% 100%;
.div-mask-layer{
	width: 100%;height: 100%;background: black;opacity: 0.5;position: absolute;z-index: 200;overflow: hidden;
}
.ibox-content{
	position: absolute;top:50%;margin-top: -117.5px;background-color: transparent;left: 50%;margin-left: -45px;border: 0;
}
.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.3125rem;
}
.no-result-img>img{
    width: 100%;
    height: 100%;
}
.no-result-text{
    text-align: center;
    margin-top: 0.1rem;
    font-size: 0.08rem;
    color: #b5e1fc;
}
.div-bottom-content{
	display: -webkit-box;
	display: box;
}
@media screen and (max-width: 1919px) {
	#main .div-bottom {
		bottom: 18px;
	}
}

page/bigData/css/medical.css

@@ -9,7 +9,7 @@ body {
	background-size: 100% 100%;
	background: url(../images/BG.png) no-repeat;
	overflow-y: auto;
	overflow-x: hidden;
	/*overflow-x: hidden;*/
	/* overflow: hidden; */
}
@@ -20,11 +20,11 @@ p {
.div-header {
	background: url(../images/biaoti_bg_img.png) no-repeat;
	width: 100%;
	width: 10rem;
	height: 0.39rem;
	background-size: 100% 100%;
	background-size: 10rem 0.39rem;
	z-index: 50;
	position: fixed;
	position: relative;
	top: 0;
}
@@ -44,16 +44,15 @@ p {
.div-bottom {
	background: url(../images/logo_bg_img.png) no-repeat;
	width: 100%;
	width: 10rem;
	height: 0.2rem;
	background-size: 100% 100%;
	position: fixed;
	bottom: 0;
	background-size: 10rem 0.2rem;
	margin-top: -37px;
}
.div-body {
	height: 100%;
	padding-top: .40625rem;
	/*height: 100%;*/
	padding-top: 0;
}
.div-skip {
@@ -64,6 +63,7 @@ p {
	background-image: url("../images/tc1.png");
	background-size: 100% 100%;
	position: fixed;
	top: 0.271rem;
	z-index: 5;
	transition: all .5s cubic-bezier(0.68, -0.55, 0.27, 1.55)
}
@@ -72,7 +72,7 @@ p {
	height: .625rem;
	opacity: 1;
	top: 0.35rem;
	margin-left: 0.1rem;
	/*margin-left: 0.1rem;*/
	width: 1.458333rem;
}
@@ -85,11 +85,11 @@ p {
}
.div-skip div a{
	color:rgba(213, 230, 255);
	color: rgba(213, 230, 255)
}
.div-skip div a:hover {
	color: rgb(4, 128, 211)
	color:rgb(4, 128, 211);
}
.div-body>.right {
@@ -133,15 +133,24 @@ p {
}
.boxTitle {
	background: url(../images/icon_biaoti.png) no-repeat;
	background-size: 100% 100%;
	height: .260417rem;
	color: #fff;
	font-weight: bold;
	padding-left: 0.26rem;
	width: 100%;
    background: url(../images/icon_biaoti.png) no-repeat;
    background-size: 100% 100%;
    height: .260417rem;
    color: #fff;
    font-weight: bold;
    line-height: 0.198rem;
    font-size: 0.104rem;
    position: absolute;
    top: -0.4375rem;
    left: -0.1302rem;
}
.ml50{
	margin-left: 0.26rem;
}
.title>span {
	cursor: pointer;
}
@@ -160,7 +169,7 @@ td >div{
}
td {
	text-align: center;
	border: 1px solid #019dff;
	/*border: 1px solid #019dff;*/
}
th {
@@ -169,9 +178,12 @@ th {
	background: url(../images/mjzfwqktoubukuang.png) no-repeat;
	background-size: 100% 100%;
}
.c-pr{
	position: relative;
}
td img {
	margin-right: .026042rem;
	/*margin-right: .026042rem;*/
	width: 12px;
}
@@ -179,10 +191,22 @@ td img {
	width: .3125rem
}
.w40{
	width:0.2083rem
}
.w193 {
	width: 1.005208rem
}
.w-90{
	width: 0.46875rem;
}
.w-115{
	width: 0.5989583rem;
}
.w188 {
	width: .979167rem
}
@@ -232,9 +256,14 @@ td img {
}
.h234 {
	height: 1.21875rem;
	/*height: 1.21875rem;*/
}
.no-result-h234 {
	height: 1.245rem;
}
.h165 {
	height: .859375rem;
}
@@ -337,6 +366,109 @@ td img {
}
.dropdown-menu {
	background: url(../images/mjzfwqktoubukuang.png) no-repeat no-repeat;
	background-size: 100% 100%;
	background: rgba(5,31,51, 0.6);
	border: 1px solid #009dfe;
}
.div-mask-layer{
	width: 100%;height: 100%;background: black;opacity: 0.5;position: absolute;z-index: 200;overflow: hidden;
}
.ibox-content{
	position: absolute;top:50%;margin-top: -117.5px;background-color: transparent;left: 50%;margin-left: -45px;border: 0;
}
.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;
}
.btn-default.active,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open .dropdown-toggle.btn-default {
	background-color: #009DFE;
	border-color: #009DFE;
}
.btn-default:hover,
.btn-default.active:hover {
	color: #fff;
	background-color: #009DFE;
	border-color: #009DFE;
}
.btn-default {
	background: #051829;
	border-color: #009DFE;
	color: #009DFE;
}
.btn-group {
	margin-left: 0.16rem;
	margin-top: 0.12rem;
}
.btn.focus,
.btn:focus,
.btn:hover {
	color: #fff
}
.btn{
	padding: 3px 12px;
}
@media screen and (max-width: 1919px) {
	#app .div-bottom {
		bottom: 18px;
	}
	.div-body>.middle{
		margin: 0 0.15625rem;
	}
}

page/bigData/html/alert.html

@@ -12,10 +12,11 @@
    <link href="../../../css/flex.css" rel="stylesheet">
    <link href="../css/home.css" rel="stylesheet">
    <link href="../css/alert.css" rel="stylesheet">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <div id="main" v-cloak>
        <div class="alert_centent">
        <div class="alert_content">
            <div class="alert_title">
                <div class="left">
                    {{title}}
@@ -32,15 +33,11 @@
							<input type="radio">门诊
						</label>
					</div>
                    <div class="alert_time">
                    <div class="alert_time flex f_xy_c">
                        时间
                        <select style="margin-left: 15px;" name="" id="">
                            <option value="">2016-03</option>
                        </select>
                        —
                        <select name="" id="">
                                <option value="">2017-03</option>
                            </select>
                        <div>
                            <input type="text" class="layui-input" id="time">
                        </div>
                    </div>
                </div>
            </div>
@@ -68,7 +65,7 @@
            </div>
            <div class="alert_chart flex f_x_sb">
                <div class="left">
                    <bar-chart :config="alertChart1"></bar-chart>
                    <bar-chart :config="alertChart1" @click-item="clickBarItem"></bar-chart>
                </div>
                <div class="right">
                    <div class="top flex f_x_sb">
@@ -84,15 +81,15 @@
                    </div>
                    <div class="bottom">
                        <div data-toggle="buttons" class="btn-group fr mr20">
                            <label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
                            <!-- <label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">日
							</label>
							</label> -->
							<label class="btn btn-default" :class="{active: alertTime == 1}" @click = "alertChart(1)">
								<input type="radio">月
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 2}" @click = "alertChart(2)">
							<!-- <label class="btn btn-default" :class="{active: alertTime == 2}" @click = "alertChart(2)">
								<input type="radio">季
							</label>
							</label> -->
							<label class="btn btn-default" :class="{active: alertTime == 3}" @click = "alertChart(3)">
								<input type="radio">年
							</label>
@@ -120,6 +117,7 @@
    <!--<script src="../../../js/api/intelligent-api.js"></script>-->
    <script src="../../../component/chart/bar-chart.js"></script>
    <script src="../component/disease-crowd.js"></script>   
    <script src="../layui/layui.js"></script>
    <script src="../js/alert-data.js"></script>
    <script src="../js/alert-data2.js"></script>
    <script src="../js/alert.js"></script>

page/bigData/html/alert1.html

@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
	<link href="../../../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="../../../css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="../../../css/style.min.css" rel="stylesheet">
    <link href="../../../css/flex.css" rel="stylesheet">
    <link href="../css/home.css" rel="stylesheet">
    <link href="../css/alert.css" rel="stylesheet">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <div id="main" v-cloak>
        <!-- 遮罩层 -->
        <div class="div-mask-layer">
            <div class="ibox-content">
                <div class="spiner-example">
                    <div class="sk-spinner sk-spinner-fading-circle">
                        <div class="sk-circle1 sk-circle"></div>
                        <div class="sk-circle2 sk-circle"></div>
                        <div class="sk-circle3 sk-circle"></div>
                        <div class="sk-circle4 sk-circle"></div>
                        <div class="sk-circle5 sk-circle"></div>
                        <div class="sk-circle6 sk-circle"></div>
                        <div class="sk-circle7 sk-circle"></div>
                        <div class="sk-circle8 sk-circle"></div>
                        <div class="sk-circle9 sk-circle"></div>
                        <div class="sk-circle10 sk-circle"></div>
                        <div class="sk-circle11 sk-circle"></div>
                        <div class="sk-circle12 sk-circle"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert_content">
            <div class="alert_title">
                <div class="left">
                    高血压人群
                </div>
                <div class="right">
                    <div data-toggle="buttons" class="btn-group">
						<label class="btn btn-default active" @click = "alertTitle(0)">
							<input type="radio">全部
						</label>
						<label class="btn btn-default" @click = "alertTitle(1)">
                            <input type="radio">住院
    					</label>
						<label class="btn btn-default" @click = "alertTitle(2)">
							<input type="radio">门诊
						</label>
					</div>
                    <div class="alert_time flex f_xy_c">
                        时间
                        <div>
                            <input type="text" class="layui-input" id="time">
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert_people flex f_x_sb f_y_c">
                <div>
                    <span>总人数</span>
                    <span>{{alertData1}}</span>
                    <span>人</span>
                </div>
                <div>
                    <span>新增人数</span>
                    <span>{{alertData2}}</span>
                    <span>人</span>
                </div>
                <div>
                    <span>门诊人次</span>
                    <span>{{alertData3}}</span>
                    <span>人次</span>
                </div>
                <div>
                    <span>住院人次</span>
                    <span>{{alertData4}}</span>
                    <span>人次</span>
                </div>
            </div>
            <div class="alert_chart flex f_x_sb">
                <div class="left">
                    <bar-chart :config="alertChart1" @click-item="clickBarItem"></bar-chart>
                </div>
                <div class="right">
                    <div class="top flex f_x_sb">
                        <div class="nianling">
                            <bar-chart :config="alertChart2"></bar-chart>
                        </div>
                        <div class="xingbie">
                            <bar-chart :config="alertChart3"></bar-chart>
                        </div>
                        <div class="bingfa">
                            <bar-chart :config="alertChart4"></bar-chart>
                        </div>
                    </div>
                    <div class="bottom">
                        <div data-toggle="buttons" class="btn-group fr mr20">
                            <!-- <label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">日
							</label> -->
							<label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">月
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 2}" @click = "alertChart(2)">
								<input type="radio">季
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 1}" @click = "alertChart(1)">
								<input type="radio">年
							</label>
						</div>
                        <bar-chart :config="alertChart5"></bar-chart>
                    </div>
                </div>
            </div>
            <div class="alert_close" @click="closeAlertClick"></div>
        </div>
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1W9gqPiqc7C9TDliPP8S9Rj9"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../component/common/event-bus.js"></script>
    <script src="../../../js/plugins/echarts/echarts.js"></script>
    <script src="../../../js/plugins/toastr/toastr.min.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../js/es6-promise.js"></script>
    <script src="../../../js/underscore.js"></script>
    <script src="../../../js/util.js"></script>
    <script src="../../../js/plugins/layer/layer.min.js"></script>
    <script src="../../../js/api/http-request.js"></script>
    <!--<script src="../../../js/api/intelligent-api.js"></script>-->
    <script src="../../../component/chart/bar-chart.js"></script>
    <script src="../component/disease-crowd.js"></script>   
    <script src="../layui/layui.js"></script>
    <script src="../js/alertCharts.js"></script>
    <script src="../js/alert1.js"></script>
</body>
</html>

page/bigData/html/alert2.html

@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
	<link href="../../../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="../../../css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="../../../css/style.min.css" rel="stylesheet">
    <link href="../../../css/flex.css" rel="stylesheet">
    <link href="../css/home.css" rel="stylesheet">
    <link href="../css/alert.css" rel="stylesheet">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <div id="main" v-cloak>
        <!-- 遮罩层 -->
        <div class="div-mask-layer">
            <div class="ibox-content">
                <div class="spiner-example">
                    <div class="sk-spinner sk-spinner-fading-circle">
                        <div class="sk-circle1 sk-circle"></div>
                        <div class="sk-circle2 sk-circle"></div>
                        <div class="sk-circle3 sk-circle"></div>
                        <div class="sk-circle4 sk-circle"></div>
                        <div class="sk-circle5 sk-circle"></div>
                        <div class="sk-circle6 sk-circle"></div>
                        <div class="sk-circle7 sk-circle"></div>
                        <div class="sk-circle8 sk-circle"></div>
                        <div class="sk-circle9 sk-circle"></div>
                        <div class="sk-circle10 sk-circle"></div>
                        <div class="sk-circle11 sk-circle"></div>
                        <div class="sk-circle12 sk-circle"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert_content">
            <div class="alert_title">
                <div class="left">
                    糖尿病人群
                </div>
                <div class="right">
                    <div data-toggle="buttons" class="btn-group">
						<label class="btn btn-default active" @click = "alertTitle(0)">
							<input type="radio">全部
						</label>
						<label class="btn btn-default" @click = "alertTitle(1)">
                            <input type="radio">住院
    					</label>
						<label class="btn btn-default" @click = "alertTitle(2)">
							<input type="radio">门诊
						</label>
					</div>
                    <div class="alert_time flex f_xy_c">
                        时间
                        <div>
                            <input type="text" class="layui-input" id="time">
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert_people flex f_x_sb f_y_c">
                <div>
                    <span>总人数</span>
                    <span>{{alertData1}}</span>
                    <span>人</span>
                </div>
                <div>
                    <span>新增人数</span>
                    <span>{{alertData2}}</span>
                    <span>人</span>
                </div>
                <div>
                    <span>门诊人次</span>
                    <span>{{alertData3}}</span>
                    <span>人次</span>
                </div>
                <div>
                    <span>住院人次</span>
                    <span>{{alertData4}}</span>
                    <span>人次</span>
                </div>
            </div>
            <div class="alert_chart flex f_x_sb">
                <div class="left">
                    <bar-chart :config="alertChart1" @click-item="clickBarItem"></bar-chart>
                </div>
                <div class="right">
                    <div class="top flex f_x_sb">
                        <div class="nianling">
                            <bar-chart :config="alertChart2"></bar-chart>
                        </div>
                        <div class="xingbie">
                            <bar-chart :config="alertChart3"></bar-chart>
                        </div>
                        <div class="bingfa">
                            <bar-chart :config="alertChart4"></bar-chart>
                        </div>
                    </div>
                    <div class="bottom">
                        <div data-toggle="buttons" class="btn-group fr mr20">
                            <!-- <label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">日
							</label> -->
							<label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">月
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 2}" @click = "alertChart(2)">
								<input type="radio">季
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 1}" @click = "alertChart(1)">
								<input type="radio">年
							</label>
						</div>
                        <bar-chart :config="alertChart5"></bar-chart>
                    </div>
                </div>
            </div>
            <div class="alert_close" @click="closeAlertClick"></div>
        </div>
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1W9gqPiqc7C9TDliPP8S9Rj9"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../component/common/event-bus.js"></script>
    <script src="../../../js/plugins/echarts/echarts.js"></script>
    <script src="../../../js/plugins/toastr/toastr.min.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../js/es6-promise.js"></script>
    <script src="../../../js/underscore.js"></script>
    <script src="../../../js/util.js"></script>
    <script src="../../../js/plugins/layer/layer.min.js"></script>
    <script src="../../../js/api/http-request.js"></script>
    <!--<script src="../../../js/api/intelligent-api.js"></script>-->
    <script src="../../../component/chart/bar-chart.js"></script>
    <script src="../component/disease-crowd.js"></script>   
    <script src="../layui/layui.js"></script>
    <script src="../js/alertCharts.js"></script>
    <script src="../js/alert2.js"></script>
</body>
</html>

page/bigData/html/alert3.html

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
	<link href="../../../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="../../../css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="../../../css/style.min.css" rel="stylesheet">
    <link href="../../../css/flex.css" rel="stylesheet">
    <link href="../css/home.css" rel="stylesheet">
    <link href="../css/alert.css" rel="stylesheet">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <div id="main" v-cloak>
        <!-- 遮罩层 -->
        <div class="div-mask-layer">
            <div class="ibox-content">
                <div class="spiner-example">
                    <div class="sk-spinner sk-spinner-fading-circle">
                        <div class="sk-circle1 sk-circle"></div>
                        <div class="sk-circle2 sk-circle"></div>
                        <div class="sk-circle3 sk-circle"></div>
                        <div class="sk-circle4 sk-circle"></div>
                        <div class="sk-circle5 sk-circle"></div>
                        <div class="sk-circle6 sk-circle"></div>
                        <div class="sk-circle7 sk-circle"></div>
                        <div class="sk-circle8 sk-circle"></div>
                        <div class="sk-circle9 sk-circle"></div>
                        <div class="sk-circle10 sk-circle"></div>
                        <div class="sk-circle11 sk-circle"></div>
                        <div class="sk-circle12 sk-circle"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert_content">
            <div class="alert_title">
                <div class="left">
                    孕产妇人群
                </div>
                <div class="right">
                    <div data-toggle="buttons" class="btn-group">
					</div>
                    <div class="alert_time flex f_xy_c">
                        时间
                        <div>
                            <input type="text" class="layui-input" id="time">
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert_people flex  f_y_c">
                <div>
                    <span>新增孕妇数</span>
                    <span>{{alertData1}}</span>
                    <span>人</span>
                </div>
                <div style="margin-left: 20px;">
                    <span>已生产孕妇数</span>
                    <span>{{alertData2}}</span>
                    <span>人</span>
                </div>
            </div>
            <div class="alert_chart flex f_x_sb">
                <div class="left">
                    <bar-chart :config="alertChart1" @click-item="clickBarItem"></bar-chart>
                </div>
                <div class="right">
                    <div class="top flex f_x_sb">
                        <div class="xingbie">
                            <bar-chart :config="alertChart2"></bar-chart>
                        </div>
                        <div class="bingfa2">
                            <bar-chart :config="alertChart4"></bar-chart>
                        </div>
                    </div>
                    <div class="bottom">
                        <div data-toggle="buttons" class="btn-group fr mr20">
                            <!-- <label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">日
							</label> -->
							<label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">月
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 2}" @click = "alertChart(2)">
								<input type="radio">季
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 1}" @click = "alertChart(1)">
								<input type="radio">年
							</label>
						</div>
                        <bar-chart :config="alertChart5"></bar-chart>
                    </div>
                </div>
            </div>
            <div class="alert_close" @click="closeAlertClick"></div>
        </div>
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1W9gqPiqc7C9TDliPP8S9Rj9"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../component/common/event-bus.js"></script>
    <script src="../../../js/plugins/echarts/echarts.js"></script>
    <script src="../../../js/plugins/toastr/toastr.min.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../js/es6-promise.js"></script>
    <script src="../../../js/underscore.js"></script>
    <script src="../../../js/util.js"></script>
    <script src="../../../js/plugins/layer/layer.min.js"></script>
    <script src="../../../js/api/http-request.js"></script>
    <!--<script src="../../../js/api/intelligent-api.js"></script>-->
    <script src="../../../component/chart/bar-chart.js"></script>
    <script src="../component/disease-crowd.js"></script>   
    <script src="../layui/layui.js"></script>
    <script src="../js/alertCharts.js"></script>
    <script src="../js/alert3.js"></script>
</body>
</html>

page/bigData/html/alert4.html

@@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
	<link href="../../../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="../../../css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="../../../css/style.min.css" rel="stylesheet">
    <link href="../../../css/flex.css" rel="stylesheet">
    <link href="../css/home.css" rel="stylesheet">
    <link href="../css/alert.css" rel="stylesheet">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <div id="main" v-cloak>
        <!-- 遮罩层 -->
        <div class="div-mask-layer">
            <div class="ibox-content">
                <div class="spiner-example">
                    <div class="sk-spinner sk-spinner-fading-circle">
                        <div class="sk-circle1 sk-circle"></div>
                        <div class="sk-circle2 sk-circle"></div>
                        <div class="sk-circle3 sk-circle"></div>
                        <div class="sk-circle4 sk-circle"></div>
                        <div class="sk-circle5 sk-circle"></div>
                        <div class="sk-circle6 sk-circle"></div>
                        <div class="sk-circle7 sk-circle"></div>
                        <div class="sk-circle8 sk-circle"></div>
                        <div class="sk-circle9 sk-circle"></div>
                        <div class="sk-circle10 sk-circle"></div>
                        <div class="sk-circle11 sk-circle"></div>
                        <div class="sk-circle12 sk-circle"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert_content">
            <div class="alert_title">
                <div class="left">
                    65岁以上老年人人数
                </div>
                <div class="right">
                    <div data-toggle="buttons" class="btn-group">
						<label class="btn btn-default active" @click = "alertTitle(0)">
							<input type="radio">全部
						</label>
						<label class="btn btn-default" @click = "alertTitle(1)">
                            <input type="radio">住院
    					</label>
						<label class="btn btn-default" @click = "alertTitle(2)">
							<input type="radio">门诊
						</label>
					</div>
                    <div class="alert_time flex f_xy_c">
                        时间
                        <div>
                            <input type="text" class="layui-input" id="time">
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert_people flex f_x_sb f_y_c">
                <div>
                    <span>总人数</span>
                    <span>{{alertData1}}</span>
                    <span>人</span>
                </div>
                <div>
                    <span>新增人数</span>
                    <span>{{alertData2}}</span>
                    <span>人</span>
                </div>
                <div>
                    <span>门诊人次</span>
                    <span>{{alertData3}}</span>
                    <span>人</span>
                </div>
                <div>
                    <span>住院人次</span>
                    <span>{{alertData4}}</span>
                    <span>人</span>
                </div>
            </div>
            <div class="alert_chart flex f_x_sb">
                <div class="left">
                    <bar-chart :config="alertChart1" @click-item="clickBarItem"></bar-chart>
                </div>
                <div class="right">
                    <div class="top flex f_x_sb">
                        <div class="xingbie">
                            <bar-chart :config="alertChart3"></bar-chart>
                        </div>
                        <div class="bingfa2">
                            <bar-chart :config="alertChart4"></bar-chart>
                        </div>
                    </div>
                    <div class="bottom">
                        <div data-toggle="buttons" class="btn-group fr mr20">
                            <!-- <label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">日
							</label> -->
							<label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">月
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 2}" @click = "alertChart(2)">
								<input type="radio">季
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 1}" @click = "alertChart(1)">
								<input type="radio">年
							</label>
						</div>
                        <bar-chart :config="alertChart5"></bar-chart>
                    </div>
                </div>
            </div>
            <div class="alert_close" @click="closeAlertClick"></div>
        </div>
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1W9gqPiqc7C9TDliPP8S9Rj9"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../component/common/event-bus.js"></script>
    <script src="../../../js/plugins/echarts/echarts.js"></script>
    <script src="../../../js/plugins/toastr/toastr.min.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../js/es6-promise.js"></script>
    <script src="../../../js/underscore.js"></script>
    <script src="../../../js/util.js"></script>
    <script src="../../../js/plugins/layer/layer.min.js"></script>
    <script src="../../../js/api/http-request.js"></script>
    <!--<script src="../../../js/api/intelligent-api.js"></script>-->
    <script src="../../../component/chart/bar-chart.js"></script>
    <script src="../component/disease-crowd.js"></script>   
    <script src="../layui/layui.js"></script>
    <script src="../js/alertCharts.js"></script>
    <script src="../js/alert4.js"></script>
</body>
</html>

page/bigData/html/alert5.html

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
	<link href="../../../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="../../../css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="../../../css/style.min.css" rel="stylesheet">
    <link href="../../../css/flex.css" rel="stylesheet">
    <link href="../css/home.css" rel="stylesheet">
    <link href="../css/alert.css" rel="stylesheet">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <div id="main" v-cloak>
        <!-- 遮罩层 -->
        <div class="div-mask-layer">
            <div class="ibox-content">
                <div class="spiner-example">
                    <div class="sk-spinner sk-spinner-fading-circle">
                        <div class="sk-circle1 sk-circle"></div>
                        <div class="sk-circle2 sk-circle"></div>
                        <div class="sk-circle3 sk-circle"></div>
                        <div class="sk-circle4 sk-circle"></div>
                        <div class="sk-circle5 sk-circle"></div>
                        <div class="sk-circle6 sk-circle"></div>
                        <div class="sk-circle7 sk-circle"></div>
                        <div class="sk-circle8 sk-circle"></div>
                        <div class="sk-circle9 sk-circle"></div>
                        <div class="sk-circle10 sk-circle"></div>
                        <div class="sk-circle11 sk-circle"></div>
                        <div class="sk-circle12 sk-circle"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert_content">
            <div class="alert_title">
                <div class="left">
                    死亡分析
                </div>
                <div class="right">
                    <div data-toggle="buttons" class="btn-group">
					</div>
                    <div class="alert_time flex f_xy_c">
                        时间
                        <div>
                            <input type="text" class="layui-input" id="time">
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert_chart flex f_x_sb">
                <div class="left_2 flex f_x_sb">
                    <ul>
                        <li class="title flex f_x_sb">
                            <div>区县</div>
                            <div>人</div>
                        </li>
                        <li v-for="(item,index) in alertChart2" :class = "townCode == item.townCode?'flex f_x_sb table_select':'flex f_x_sb'" v-if = "index > 0">
                            <div class="click" @click = 'getCity(item.townCode)'>{{item.firstColumn}}</div>
                            <div>{{item.HC_13_0004}}</div>
                        </li>
                    </ul>
                    <ul>
                        <li class="title flex f_x_sb">
                            <div>死亡原因</div>
                            <div>人</div>
                        </li>
                        <li v-for="item in alertChart1" class="flex f_x_sb">
                            <div>{{item.firstColumn}}</div>
                            <div>{{item.HC_15_1006}}</div>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <div class="top flex f_x_sb">
                        <div class="nianling_2">
                            <bar-chart :config="alertChart3"></bar-chart>
                        </div>
                        <div class="xingbie_2">
                            <bar-chart :config="alertChart4"></bar-chart>
                        </div>
                    </div>
                    <div class="bottom_2">
                        <div data-toggle="buttons" class="btn-group fr mr20">
                            <!-- <label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">日
							</label> -->
							<label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">月
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 2}" @click = "alertChart(2)">
								<input type="radio">季
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 1}" @click = "alertChart(1)">
								<input type="radio">年
							</label>
						</div>
                        <bar-chart :config="alertChart5" ref="_alertChart5" style="padding: 0 5px;"></bar-chart>
                    </div>
                </div>
            </div>
            <div class="alert_close" @click="closeAlertClick"></div>
        </div>
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1W9gqPiqc7C9TDliPP8S9Rj9"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../component/common/event-bus.js"></script>
    <script src="../../../js/plugins/echarts/echarts.js"></script>
    <script src="../../../js/plugins/toastr/toastr.min.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../js/es6-promise.js"></script>
    <script src="../../../js/underscore.js"></script>
    <script src="../../../js/util.js"></script>
    <script src="../../../js/plugins/layer/layer.min.js"></script>
    <script src="../../../js/api/http-request.js"></script>
    <!--<script src="../../../js/api/intelligent-api.js"></script>-->
    <script src="../../../component/chart/bar-chart.js"></script>
    <script src="../component/disease-crowd.js"></script>   
    <script src="../layui/layui.js"></script>
    <script src="../js/alertCharts.js"></script>
    <script src="../js/alert5.js"></script>
</body>
</html>

page/bigData/html/alert6.html

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
	<link href="../../../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="../../../css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="../../../css/style.min.css" rel="stylesheet">
    <link href="../../../css/flex.css" rel="stylesheet">
    <link href="../css/home.css" rel="stylesheet">
    <link href="../css/alert.css" rel="stylesheet">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <div id="main" v-cloak>
        <!-- 遮罩层 -->
        <div class="div-mask-layer">
            <div class="ibox-content">
                <div class="spiner-example">
                    <div class="sk-spinner sk-spinner-fading-circle">
                        <div class="sk-circle1 sk-circle"></div>
                        <div class="sk-circle2 sk-circle"></div>
                        <div class="sk-circle3 sk-circle"></div>
                        <div class="sk-circle4 sk-circle"></div>
                        <div class="sk-circle5 sk-circle"></div>
                        <div class="sk-circle6 sk-circle"></div>
                        <div class="sk-circle7 sk-circle"></div>
                        <div class="sk-circle8 sk-circle"></div>
                        <div class="sk-circle9 sk-circle"></div>
                        <div class="sk-circle10 sk-circle"></div>
                        <div class="sk-circle11 sk-circle"></div>
                        <div class="sk-circle12 sk-circle"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert_content">
            <div class="alert_title">
                <div class="left">
                    高发疾病分析
                </div>
                <div class="right">
                    <div data-toggle="buttons" class="btn-group">
					</div>
                    <div class="alert_time flex f_xy_c">
                        时间
                        <div>
                            <input type="text" class="layui-input" id="time">
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert_chart flex f_x_sb">
                <div class="left_2 flex f_x_sb">
                    <ul>
                        <li class="title flex f_x_sb">
                            <div>区县</div>
                            <div>人次</div>
                        </li>
                        <li v-for="(item,index) in alertChart2" v-if = "index > 0"  :class = "townCode == item.townCode?'flex f_x_sb table_select':'flex f_x_sb'">
                            <div class="click" @click = 'getCity(item.townCode)'>{{item.firstColumn}}</div>
                            <div>{{item.HC_13_0003}}</div>
                        </li>
                    </ul>
                    <ul>
                        <li class="title flex f_x_sb">
                            <div>疾病</div>
                            <div>人次</div>
                        </li>
                        <li v-for="(item,index) in alertChart1" class="flex f_x_sb" v-if = "index < 13 && index != 0">
                            <div>{{item.firstColumn}}</div>
                            <div>{{item.HC_13_0003}}</div>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <div class="top flex f_x_sb">
                        <div class="nianling_2">
                            <bar-chart :config="alertChart3"></bar-chart>
                        </div>
                        <div class="xingbie_2">
                            <bar-chart :config="alertChart4"></bar-chart>
                        </div>
                    </div>
                    <div class="bottom_2">
                        <div data-toggle="buttons" class="btn-group fr mr20">
                            <!-- <label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">日
							</label> -->
							<label class="btn btn-default" :class="{active: alertTime == 0}" @click = "alertChart(0)">
								<input type="radio">月
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 2}" @click = "alertChart(2)">
								<input type="radio">季
							</label>
							<label class="btn btn-default" :class="{active: alertTime == 1}" @click = "alertChart(1)">
								<input type="radio">年
							</label>
						</div>
                        <bar-chart :config="alertChart5" ref="_alertChart5"  style="padding: 0 5px;"></bar-chart>
                    </div>
                </div>
            </div>
            <div class="alert_close" @click="closeAlertClick"></div>
        </div>
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1W9gqPiqc7C9TDliPP8S9Rj9"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../component/common/event-bus.js"></script>
    <script src="../../../js/plugins/echarts/echarts.js"></script>
    <script src="../../../js/plugins/toastr/toastr.min.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../js/es6-promise.js"></script>
    <script src="../../../js/underscore.js"></script>
    <script src="../../../js/util.js"></script>
    <script src="../../../js/plugins/layer/layer.min.js"></script>
    <script src="../../../js/api/http-request.js"></script>
    <!--<script src="../../../js/api/intelligent-api.js"></script>-->
    <script src="../../../component/chart/bar-chart.js"></script>
    <script src="../component/disease-crowd.js"></script>   
    <script src="../layui/layui.js"></script>
    <script src="../js/alertCharts.js"></script>
    <script src="../js/alert6.js"></script>
</body>
</html>

page/bigData/html/home.html

@@ -17,57 +17,81 @@
	<body>
		<div id="main">
			<div class="div-header"></div>
			<div class="div-title" @click="skipClick()">大数据应用服务平台 <input type="checkbox" class="sanjiao"><img style="transition: all .3s ease-in-out" src="../images/sanjiao.png"></div>
			<div class="div-skip" :class="{'div-skip-active':skipShow}">
				<div>
					<a href="home.html">
						居民健康管理大数据分析
					</a>
			<!-- 遮罩层 -->
			<div class="div-mask-layer">
				<div class="ibox-content">
					<div class="spiner-example">
						<div class="sk-spinner sk-spinner-fading-circle">
							<div class="sk-circle1 sk-circle"></div>
							<div class="sk-circle2 sk-circle"></div>
							<div class="sk-circle3 sk-circle"></div>
							<div class="sk-circle4 sk-circle"></div>
							<div class="sk-circle5 sk-circle"></div>
							<div class="sk-circle6 sk-circle"></div>
							<div class="sk-circle7 sk-circle"></div>
							<div class="sk-circle8 sk-circle"></div>
							<div class="sk-circle9 sk-circle"></div>
							<div class="sk-circle10 sk-circle"></div>
							<div class="sk-circle11 sk-circle"></div>
							<div class="sk-circle12 sk-circle"></div>
						</div>
					</div>
				</div>
				<div>
					<a href="medical.html">
						医疗服务大数据分析
					</a>
			</div>
			<div class="div-header">
				<div class="div-title" @click="skipClick()">大数据应用服务平台 <input type="checkbox" class="sanjiao"><img style="transition: all .3s ease-in-out" src="../images/sanjiao.png"></div>
				<div class="div-skip" :class="{'div-skip-active':skipShow}">
					<div>
						<a href="medical.html">
							医疗服务大数据分析
						</a>
					</div>
					<div>
						<a href="home.html" style="color:rgb(4, 128, 211);">
							居民健康管理大数据分析
						</a>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="right-panel">
					<!-- 本月高发疾病排行 -->
					<high-incidence-disease :data="jsonData"></high-incidence-disease>
				</div>
				<div class="left-panel">
					<!-- 疾病人群 -->
					<disease-crowd :data="jsonData"></disease-crowd>
					<disease-crowd :data="diseaseData" :town="city"></disease-crowd>
				</div>
				<div class="center-panel" v-cloak>
					<!-- 地图 -->
					<div class="map mt20">
							<div class="set_all_city" @click="clickMap({name:'贵港市'})" title="选择全市">
									<img src="../images/allCity.png">
								</div>
							<map-chart @map-click="clickMap" ref="map" :config="mapData"></map-chart>
							<label class="diqu-label">地区</label>
							<div class="dropdown Mapselect">
									<div type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">{{city}}
										<span class="caret"></span>
									</div>
									<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
											<li role="presentation" @click="setCity(item)" v-for="item in town">
													<a role="menuitem" href="#">{{item.townName}}</a>
											</li>
									</ul>
					<div class="map pt20">
						<div class="set_all_city" @click="clickMap({name:'上饶市'})" title="选择全市">
								<img src="../images/allCity.png">
							</div>
						<map-chart @map-click="clickMap" ref="map" :config="mapData"></map-chart>
						<label class="diqu-label">地区</label>
						<div class="dropdown Mapselect">
								<div type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">{{city}}
									<span class="caret"></span>
								</div>
								<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
										<li role="presentation" @click="setCity(item)" v-for="item in town">
												<a role="menuitem" href="#">{{item.name}}</a>
										</li>
								</ul>
						</div>
					</div>
				</div>
				<div class="right-panel">
					<!-- 本月高发疾病排行 -->
					<high-incidence-disease :data="gaoFaData" :city="city" :city-val="cityVal"></high-incidence-disease>
				</div>
			</div>
			
			<div class="div-bottom-content">
				<div class="bottom-left-panel">
					<!-- 重点服务人群 -->
					<key-service-population :data="jsonData"></key-service-population>
					<key-service-population :data="zhongDianData"></key-service-population>
				</div>
				<div class="bottom-right-panel">
					<!-- 死亡原因 -->
					<death-cause :data="jsonData"></death-cause>
					<death-cause :data="siWangData" :city="city" :city-val="cityVal"></death-cause>
				</div>
			</div>
			<div class="div-bottom"></div>
@@ -83,10 +107,10 @@
		<script src="../../../js/bootstrap.min.js"></script>
		<script src="../../../js/es6-promise.js"></script>
		<script src="../../../js/underscore.js"></script>
		<script src="../../../js/util.js"></script>
		<script src="../../../js/plugins/layer/layer.min.js"></script>
		<script src="../../../js/api/http-request.js"></script>
		<script src="../../../js/api/bigData-api.js"></script>
		<script src="../../../component/chart/guigang.js"></script>
		<script src="../../../component/chart/map-chart.js"></script>
		<script src="../component/disease-crowd.js"></script>
		<script src="../component/high-incidence-disease.js"></script>

page/bigData/html/medical.html

@@ -17,229 +17,317 @@
	<body>
		<div id="app" v-cloak>
            <div class="div-header flex f_y_c pl20">
                <div class="div-title"  @click="skipClick()">大数据应用服务平台 <input type="checkbox" class="sanjiao"><img style="transition: all .3s ease-in-out" src="../images/sanjiao.png"></div>
            </div>
			<div class="div-skip" :class="{'div-skip-active':skipShow}">
				<div>
					<a href="home.html">
						居民健康管理大数据分析
					</a>
			<!-- 遮罩层 -->
			<div class="div-mask-layer">
				<div class="ibox-content">
					<div class="spiner-example">
						<div class="sk-spinner sk-spinner-fading-circle">
							<div class="sk-circle1 sk-circle"></div>
							<div class="sk-circle2 sk-circle"></div>
							<div class="sk-circle3 sk-circle"></div>
							<div class="sk-circle4 sk-circle"></div>
							<div class="sk-circle5 sk-circle"></div>
							<div class="sk-circle6 sk-circle"></div>
							<div class="sk-circle7 sk-circle"></div>
							<div class="sk-circle8 sk-circle"></div>
							<div class="sk-circle9 sk-circle"></div>
							<div class="sk-circle10 sk-circle"></div>
							<div class="sk-circle11 sk-circle"></div>
							<div class="sk-circle12 sk-circle"></div>
						</div>
					</div>
				</div>
				<div>
					<a href="medical.html">
						医疗服务大数据分析
					</a>
			</div>
		
			<div class="div-header flex f_y_c pl20">
				<div class="div-title" @click="skipClick()">大数据应用服务平台 <input type="checkbox" class="sanjiao"><img style="transition: all .3s ease-in-out" src="../images/sanjiao.png"></div>
				<div class="div-skip" :class="{'div-skip-active':skipShow}">
					<div>
						<a href="medical.html" style="color:rgb(4, 128, 211);">
							医疗服务大数据分析
						</a>
					</div>
					<div>
						<a href="home.html">
							居民健康管理大数据分析
						</a>
					</div>
				</div>
			</div>
			<div class="div-body flex">
                <div class="left">
				<div class="left">
					<!-- 大数据应用服务平台 -->
					<div class="contentBox h443   bigData">
						<div class="title flex f_y_c">
							<span :class="{active:timeType == 1}" @click="setTimeStr(1)">上月</span>
							<span :class="{active:timeType == 2}"  @click="setTimeStr(2)">本年</span>
							<div data-toggle="buttons" class="btn-group fr mr20" style="margin-top: 0;">
								<label class="btn btn-default" :class="{active: timeType == 1}" @click="setTimeStr(1)">
									<input type="radio">上月
								</label>
								<label class="btn btn-default" :class="{active: timeType == 2}" @click="setTimeStr(2)">
									<input type="radio">本年
								</label>
							</div>
						</div>
						<div class="menJiZhen contentBox2 flex f_x_sb mb20">
							<div class="left">
									<p class="mb10  tr">门诊人次</p>
									<p class="yellow_number pl15 mb25">{{leftData1['门诊人次']}} <span class="sub">人次</span></p>
									<p class="pl10 mb10">门诊总费用</p>
									<p class="yellow_number pl15">{{leftData1['门诊总费用']}} <span class="sub">元</span></p>
								<p class="mb10  tr">门诊人次</p>
								<p class="yellow_number mb25">{{leftData.HC_04_1050 || "0"}} <span class="sub">人次</span></p>
								<p class="pl10 mb10">门急诊总费用</p>
								<p class="yellow_number">{{leftData.HC_05_1001 || "0"}} <span class="sub">元</span></p>
							</div>
							<div class="middle flex_coloumn f_xy_c">
									<p class="mb10">门急诊人次</p>
									<p class="red_number">{{leftData1['门急诊人次']}} </p>
									<p class="sub">人次</p>
								<p class="mb10">门急诊人次</p>
								<p class="red_number">{{leftData.HC_05_1004 || "0"}} </p>
								<p class="sub">人次</p>
							</div>
							<div class="right">
									<p class="mb10 tl">急诊人次</p>
									<p class="yellow_number pr15 mb25">{{leftData1['急诊人次']}} <span class="sub">人次</span></p>
									<p class="pr10 mb10">门急诊总费用</p>
									<p class="yellow_number pr15">{{leftData1['急诊总费用']}} <span class="sub">元</span></p>
								<p class="mb10 tl">急诊人次</p>
								<p class="yellow_number pr15 mb25">{{leftData.HC_04_1048 || "0"}} <span class="sub">人次</span></p>
								<p class="pr10 mb10">门急诊次均费用</p>
								<p class="yellow_number pr15">{{leftData.HC_05_1003 || "0"}} <span class="sub">元</span></p>
							</div>
						</div>
						<div class="menJiZhen contentBox2 flex f_x_sb">
							<div class="left">
									<p class="mb10 	 tr">住院总费用</p>
									<p class="yellow_number  mb25">{{leftData1['住院总费用']}} <span class="sub">元</span></p>
									<p class="pl10 mb10">住院总床日数</p>
									<p class="yellow_number pl15">{{leftData1['住院床日数']}} <span class="sub">天</span></p>
								<p class="mb10 	 tr">住院总费用</p>
								<p class="yellow_number  mb25">{{leftData.HC_06_1014 || "0"}} <span class="sub">元</span></p>
								<p class="pl10 mb10">住院总床日数</p>
								<p class="yellow_number pl15">{{leftData.HC_04_1013 || "0"}} <span class="sub">天</span></p>
							</div>
							<div class="middle flex_coloumn f_xy_c">
									<p class="mb10">住院人次</p>
									<p class="red_number">{{leftData1['住院人次']}} </p>
									<p class="sub">人次</p>
								<p class="mb10">住院人次</p>
								<p class="red_number">{{leftData.HC_06_1013 || "0"}} </p>
								<p class="sub">人次</p>
							</div>
							<div class="right">
									<p class="mb10 tl">住院次均费用</p>
									<p class="yellow_number pr15 mb25">{{leftData1['住院均次费用']}} <span class="sub">元</span></p>
									<p class="pr10 mb5">平均床日数</p>
									<p class="yellow_number pr15">{{leftData1['住院平均床日数']}} <span class="sub">天</span></p>
								<p class="mb10 tl">住院次均费用</p>
								<p class="yellow_number pr15 mb25">{{leftData.HC_06_1022 || "0"}} <span class="sub">元</span></p>
								<p class="pr10 mb5">平均床日数</p>
								<p class="yellow_number pr15">{{leftData.HC_04_1066 || "0"}} <span class="sub">天</span></p>
							</div>
						</div>
					</div>
					<!-- 就诊人次 -->
					<div class="jiuZhen">
						<div class="boxTitle mb10 mt24">就诊人次</div>
					<div class="jiuZhen c-position-r" style="margin-top: 0.4375rem;">
						<div class="boxTitle mb10 mt24"><span class="ml50">就诊人次</span></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>
				<!-- 中间 -->
                <div class="middle flex_coloumn">
				<div class="middle flex_coloumn">
					<!-- 地图 -->
					<div class="map mt20">
							<div class="set_all_city" @click="clickMap({name:'贵港市'})" title="选择全市">
								<img src="../images/allCity.png">
							</div>
							<map-chart @map-click="clickMap" ref="map" :config="mapData"></map-chart>
							<div class="dropdown Mapselect">
									<label class="diqu-label">地区</label>
									<div type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">{{city}}
										<span class="caret"></span>
									</div>
									<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
											<li role="presentation" @click="setCity(item)" v-for="item in town">
													<a role="menuitem" href="#">{{item.townName}}</a>
											</li>
									</ul>
						<div class="set_all_city" @click="clickMap({name:'上饶市'})" title="选择全市" v-show="hasMapData">
							<img src="../images/allCity.png">
						</div>
						<div v-show="!hasMapData" class="no-result-panel">
                            <div class="no-result-img" style="padding-top: 1.3rem;">
                                <img src="../images/noData.png">
                            </div>
                            <div class="no-result-text">暂无数据！</div>
                        </div>
						<map-chart @map-click="clickMap" ref="map" :config="mapData" v-show="hasMapData"></map-chart>
						<div class="dropdown Mapselect">
							<label class="diqu-label">地区</label>
							<div type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">{{city}}
								<span class="caret"></span>
							</div>
							<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
								<li role="presentation" @click="setCity(item)" v-for="item in town">
									<a role="menuitem" href="#">{{item.name}}</a>
								</li>
							</ul>
						</div>
					</div>
					<!-- 地图底部 -->
					<div class="bottom  flex f_x_sb">
							<div class="left flex_coloumn f_x_sb">
								<div class="flex">
										<p class="w100">门急诊人次</p>
										<p class="yellow_number pl15 ">{{yesterdayData['门急诊人次']}} <span class="sub">人次</span></p>
								</div>
								<div class="flex ">
										<p class="w100">门急诊总费用</p>
										<p class="yellow_number pl15 ">{{yesterdayData['门急诊总费用']}} <span class="sub">元</span></p>
								</div>
									
								<div class="flex">
										<p class="w100">门急诊次均费用</p>
										<p class="yellow_number pl15 ">{{yesterdayData['门急诊次均费用']}} <span class="sub">元</span></p>
								</div>								
						<div class="left flex_coloumn f_x_sb">
							<div class="flex">
								<p class="w100">门急诊人次</p>
								<p class="yellow_number pl15 ">{{yesterdayData.HC_04_1008 || "0"}} <span class="sub">人次</span></p>
							</div>
							
							<div class="middle flex_coloumn f_xy_c">
									<p class="mb10 title">昨日数据</p>
									<p class="font44 red_number">{{yesterdayData['服务患者数']}} </p>
									<p class="sub">服务患者人数</p>
							<div class="flex ">
								<p class="w100">门急诊总费用</p>
								<p class="yellow_number pl15 ">{{yesterdayData.HC_05_1001 || "0"}} <span class="sub">元</span></p>
							</div>
							<div class="flex">
								<p class="w100">门急诊次均费用</p>
								<p class="yellow_number pl15 ">{{yesterdayData.HC_05_1003 || "0"}} <span class="sub">元</span></p>
							</div>
						</div>
						<div class="middle flex_coloumn f_xy_c">
							<p class="mb10 title">昨日数据</p>
							<p class="font44 red_number">{{yesterdayData.HC_14_1019 || "0"}} </p>
							<p class="sub">服务患者人数</p>
						</div>
						<div class="right flex_coloumn f_x_sb">
							<div class="flex">
								<p class="w100">住院人次</p>
								<p class="yellow_number pl15 ">{{yesterdayData.HC_06_1013 || "0"}} <span class="sub">人次</span></p>
							</div>
							<div class="right flex_coloumn f_x_sb">
									<div class="flex">
											<p class="w100">住院人次</p>
											<p class="yellow_number pl15 ">{{yesterdayData['住院人次']}} <span class="sub">人次</span></p>
									</div>
									<div class="flex">
											<p class="w100">住院总费用</p>
											<p class="yellow_number pl15 ">{{yesterdayData['门急诊次均费用']}} <span class="sub">元</span></p>
									</div>
										
									<div class="flex">
											<p class="w100">住院次均费用</p>
											<p class="yellow_number pl15 ">{{yesterdayData['住院均次费用']}} <span class="sub">元</span></p>
									</div>							
									<div class="flex">
											<p class="w100">住院平均日数</p>
											<p class="yellow_number pl15 ">{{yesterdayData['住院平均床日数']}} <span class="sub">天</span></p>
									</div>							
							<div class="flex">
								<p class="w100">住院总费用</p>
								<p class="yellow_number pl15 ">{{yesterdayData.HC_06_1014 || "0"}} <span class="sub">元</span></p>
							</div>
							<div class="flex">
								<p class="w100">住院次均费用</p>
								<p class="yellow_number pl15 ">{{yesterdayData.HC_06_1022 || "0"}} <span class="sub">元</span></p>
							</div>
							<div class="flex">
								<p class="w100">住院平均床日数</p>
								<p class="yellow_number pl15 ">{{yesterdayData.HC_04_1066 || "0"}} <span class="sub">天</span></p>
							</div>
						</div>
					</div>
				</div>
				<div class="right">
					<!-- 门诊服务情况 -->
					<div class="right1 c-position-r" style="margin-top: 0.3125rem;">
						<div class="boxTitle mb10" style="top:-0.3125rem;"><span class="ml50">门诊服务情况</span></div>
						<div class="contentBox mb20  h234">
							 <div v-show="!hasData3" class="no-result-panel no-result-h234">
	                            <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="w40">
										<div>月份</div>
									</th>
									<th colspan="3" class="c-pr">
										<div class="w-115" style="display: inline-block;position: absolute;left: 0;top:0;">门急诊总费用</div>
										<div class="w-90" style="display: inline-block;position: absolute;right: 15px;top:0;">环比</div>
									</th>
									<th colspan="3" class="c-pr">
										<div class="w-115" style="display: inline-block;position: absolute;left: 0;top:0;">门急诊次均费用</div>
										<div class="w-90" style="display: inline-block;position: absolute;right: 15px;top:0;">环比</div>
									</th>
								</tr>
								<tr v-for="(item,index) in tableData1">
									<td style="border: 1px solid #019dff;">
										<div>{{item.month}}</div>
									</td>
									<td style="border-bottom: 1px solid #019dff;" class="w-115" colspan="2">
										<span class="ml5">{{item.HC_05_1001 | formatData}}元</span>
									</td>
									<td style="border-bottom: 1px solid #019dff;text-align: left;padding-left: 10px;" class="w-90">
										<img v-show="item.HC_14_1025=='--' || item.HC_14_1025>=0" src="../images/zengzhang.png">
										<span v-show="item.HC_14_1025=='--'">{{item.HC_14_1025}}</span>
										<img v-show="item.HC_14_1025!='--' && item.HC_14_1025<0" src="../images/xiajiang.png">
										<span v-show="item.HC_14_1025!='--'">{{item.HC_14_1025}}%</span>
									</td>
									<td style="border-bottom: 1px solid #019dff;border-left: 1px solid #019dff;" class="w-115" colspan="2">
										<span class="ml5">{{item.HC_05_1003 | formatData}}元</span>
									</td>
									<td style="border-bottom: 1px solid #019dff;text-align: left;padding-left: 10px;" class="w-90">
										<img v-show="item.HC_14_1026=='--' || item.HC_14_1026>=0" src="../images/zengzhang.png">
										<span v-show="item.HC_14_1026=='--'">{{item.HC_14_1026}}</span>
										<img v-show="item.HC_14_1026!='--' && item.HC_14_1026<0" src="../images/xiajiang.png">
										<span v-show="item.HC_14_1026!='--'">{{item.HC_14_1026}}%</span>
									</td>
								</tr>
							</table>
                <div class="right">
						<!-- 门诊服务情况 -->
						<div class="right1">
								<div class="boxTitle mb10">门诊服务情况</div>
								<div class="contentBox mb20  h234">
									<table>
										<tr>
										  <th class="w60"><div>月份</div></th>
										  <th class="w193"><div>门急诊总费用</div></th>
										  <th class="w188"><div>门急诊均次费用</div></th>
										</tr>
										<tr v-for="(item,index) in tableData1">
										  <td><div>{{(index+1)+'月'}}</div></td>
										  <td>
											<div>
											  <span class="mr10">{{item['门急诊总费用']}}元</span>
											  <span class="mr20">环比</span>
											  <img  v-if="item['门急诊总费用环比'] >1" src="../images/zengzhang.png">
											  <img v-else src="../images/xiajiang.png">
											  <span>{{item['门急诊总费用环比']}}%</span>
											</div>
										   </td>
										   <td>
												<div>
											    <span class="mr10">{{item['门急诊次均费用']}}元</span>
											  <span class="mr20">环比</span>
											  <img  v-if="item['门急诊次均费用环比'] >1" src="../images/zengzhang.png">
											  <img v-else src="../images/xiajiang.png">
											  <span>{{item['门急诊次均费用环比']}}%</span>
											</div>
										   </td>
										</tr>
									  </table>
								</div>
								<div class="contentBox3 mb20 h165">
										<bar-chart :config="rightChart1"></bar-chart>
								</div>
							</div>
						<!-- 住院服务情况 -->
						<div class="right2">
								<div class="boxTitle mb10 mt24">住院服务情况</div>
								<div class="contentBox mb20 h234">
										<table>
												<tr>
												  <th class="w60"><div>月份</div></th>
												  <th class="w193"><div>住院总费用</div></th>
												  <th class="w188"><div>住院均次费用</div></th>
												</tr>
												<tr v-for="(item,index) in tableData2">
												  <td><div>{{(index+1)+'月'}}</div></td>
												  <td>
														<div>
																<span class="mr10">{{parseInt(item['住院总费用'])}}元</span>
																<span class="mr20">环比</span>
																<img  v-if="item['住院总费用环比'] >1" src="../images/zengzhang.png">
																<img v-else src="../images/xiajiang.png">
																<span>{{item['住院总费用环比']}}%</span>
														</div>													 
												   </td>
												   <td>
														<div>
														<span class="mr10">{{item['住院次均费用']}}元</span>
													  <span class="mr20">环比</span>
													  <img  v-if="item['住院次均费用环比'] >1" src="../images/zengzhang.png">
													  <img v-else src="../images/xiajiang.png">
													  <span>{{item['住院次均费用环比']}}%</span>
													</div>						
												   </td>
												</tr>
											  </table>
								</div>
								<div class="contentBox3  h165 mb10">
									<bar-chart :config="rightChart2"></bar-chart>
								</div>
							</div>
						</div>
						<div class="contentBox3 mb20 h165">
							<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 c-position-r" style="margin-top: 0.4375rem;">
						<div class="boxTitle mb10 mt24"><span class="ml50">住院服务情况</span></div>
						<div class="contentBox mb20 h234">
							<div v-show="!hasData5" class="no-result-panel no-result-h234">
	                            <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="w40">
										<div>月份</div>
									</th>
									<th colspan="3" class="c-pr">
										<div class="w-115" style="display: inline-block;position: absolute;left: 0;top:0;">住院总费用</div>
										<div class="w-90" style="display: inline-block;position: absolute;right: 15px;top:0;">环比</div>
									</th>
									<th colspan="3" class="c-pr">
										<div class="w-115" style="display: inline-block;position: absolute;left: 0;top:0;">住院次均费用</div>
										<div class="w-90" style="display: inline-block;position: absolute;right: 15px;top:0;">环比</div>
									</th>
								</tr>
								<tr v-for="(item,index) in tableData2">
									<td style="border: 1px solid #019dff;">
										<div>{{item.month}}</div>
									</td>
									<td style="border-bottom: 1px solid #019dff;" class="w-115" colspan="2">
										<span class="ml5">{{item.HC_06_1014 | formatData}}元</span>
									</td>
									<td style="border-bottom: 1px solid #019dff;text-align: left;padding-left: 10px;" class="w-90">
										<img v-show="item.HC_14_1027=='--' || item.HC_14_1027>=0" src="../images/zengzhang.png">
										<span v-show="item.HC_14_1027=='--'">{{item.HC_14_1027}}</span>
										<img v-show="item.HC_14_1027!='--' && item.HC_14_1027<0" src="../images/xiajiang.png">
										<span v-show="item.HC_14_1027!='--'">{{item.HC_14_1027}}%</span>
									</td>
									<td style="border-bottom: 1px solid #019dff;border-left: 1px solid #019dff;" class="w-115" colspan="2">
										<span class="ml5">{{item.HC_06_1022 | formatData}}元</span>
									</td>
									<td style="border-bottom: 1px solid #019dff;text-align: left;padding-left: 10px;" class="w-90">
										<img v-show="item.HC_14_1028=='--' || item.HC_14_1028>=0" src="../images/zengzhang.png">
										<span v-show="item.HC_14_1028=='--'">{{item.HC_14_1028}}</span>
										<img v-show="item.HC_14_1028!='--' && item.HC_14_1028<0" src="../images/xiajiang.png">
										<span v-show="item.HC_14_1028!='--'">{{item.HC_14_1028}}%</span>
									</td>
								</tr>
							</table>
						</div>
						<div class="contentBox3  h165 mb10">
							<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>
            </div>			
			</div>
			<div class="div-bottom"></div>
		</div>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1W9gqPiqc7C9TDliPP8S9Rj9"></script>
@@ -253,19 +341,13 @@
		<script src="../../../js/bootstrap.min.js"></script>
		<script src="../../../js/es6-promise.js"></script>
		<script src="../../../js/underscore.js"></script>
		<script src="../../../js/util.js"></script>
		<script src="../../../js/plugins/layer/layer.min.js"></script>
		<!--<script src="../../../js/security.js"></script>-->
		<script src="../../../js/api/http-request.js"></script>
		<script src="../../../component/chart/guigang.js"></script>
		<script src="../../../js/api/bigData-api.js"></script>
		<script src="../../../component/chart/bar-chart.js"></script>
		<script src="../../../component/chart/map-chart.js"></script>
	
		<script src="../../../dataJson/bigData.js"></script>
		<script src="../../../dataJson/bigData2.js"></script>
		<script src="../../../dataJson/bigData3.js"></script>
		<script src="../../../dataJson/bigData4.js"></script>
		<script src="../../../dataJson/bigData5.js"></script>
		<script src="../js/medicalCharts.js"></script>
		<script src="../js/medical.js"></script>
	</body>

page/bigData/js/alert-data.js

@@ -2523,4 +2523,4 @@ var bigData = {
            }
        }
    },
}
}

page/bigData/js/alert.js

@@ -12,7 +12,7 @@ new Vue({
        alertChart5:'',//右下
        bigData:'',//总数据
        alertType:0,
        alertTime:0,
        alertTime:1,
        type:'',
        title:'',
	},
@@ -25,8 +25,39 @@ new Vue({
        }else if(this.type == 1){
            this.title = '糖尿病人群分布';
            vm.bigData = bigData2;
        }else if(this.type == 2){
            this.title = '孕产妇人群';
        }else if(this.type == 3){
            this.title = '65岁以上老年人人数';
        }
        this.initData();
        var myDate = new Date();
        var maxMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var maxYear = myDate.getFullYear();
        var max = maxYear.toString()+'-'+maxMonth.toString();
        var moren = maxYear.toString()+'-'+(maxMonth-1).toString()+' 至 '+maxYear.toString()+'-'+(maxMonth-1).toString();
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            
            //执行一个laydate实例
            laydate.render({
              elem: '#time', //指定元素,
              type:'month',
              range: '至', //或 range: '~' 来自定义分割字符
              theme: '#05273e',
              position: 'abolute',
              right:'200px',
              value: moren,
              max:max,
              btns: ['confirm'],
              done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
              }
            //   showBottom: false
            });
          });
    },
    methods: {
        initData:function(){
@@ -50,8 +81,8 @@ new Vue({
                case 2:t = '住院';break;
            }
            var options = this.bigData[t]['区县分布'];
             options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart1 = options
            options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart1 = options;
        },
        setAlertChart2:function(type){
            var t = '';
@@ -150,12 +181,12 @@ new Vue({
            this.alertChart5 = options
        },
        alertTitle:function(type){
            this.alertTime = 0;
            this.alertTime = 1;
            this.setAlertChart1(type);
            this.setAlertChart2(type);
            this.setAlertChart3(type);
            this.setAlertChart4(type);
            this.setAlertChart5(type,0);
            this.setAlertChart5(type,1);
            this.alertType = type;
        },
        alertChart:function(time){
@@ -170,6 +201,12 @@ new Vue({
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        },
        chartArea:function(param){
            console.log(param);
        },
        clickBarItem:function(item){
        	console.log(item)
        }
    }
});

page/bigData/js/alert1.js

@@ -0,0 +1,314 @@
new Vue({
	el: '#main',
	data: {     
        alertData1:'',//总人数
        alertData2:'',//新增人数
        alertData3:'',//门诊人次
        alertData4:'',//住院人次
        alertChart1:'',//左边第一块表格
        alertChart2:'',//右上第一块
        alertChart3:'',//右上第二块
        alertChart4:'',//右上第三块
        alertChart5:'',//右下
        bigData:'',//总数据
        alertType:0,
        alertTime:0,
        firstDay: "", //上月第一天
        lastDay: "", //上月最后一天
        firstMonth:'',
        lastMonth:'',
        code:[
            'VIEW_13_0015',//总人数和新增人数
            'VIEW_13_0016',//门诊和住院人次
            'VIEW_13_0009',//区县分布
            'VIEW_13_0011',//性别分布
            'VIEW_13_0012',//疾病前五
            'VIEW_13_0017',//就诊月趋势
            'VIEW_13_0022',//就诊年趋势
            'VIEW_13_0010',//年龄分布
            'VIEW_13_0045',//季趋势
        ],
        qushiMonth:'',
        qushiYear:'',
        firstDayYear: "", //本年第一天
		lastDayYear: "", //本年最后一天
		halfYearStartDate: "", //近半年开始时间
		halfYearEndDate: "", //近半年结束时间
        yesterdayDate:"",//昨天
        type:0,
        thirdJiDate:"",//三个季度前
        qushiSeason:"",//季度趋势
	},
	mounted: function() {
        var vm = this;
        this.formatDate();
        updateFontSize();
        this.initData(this.type);
        var myDate = new Date();
        var maxMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var maxYear = myDate.getFullYear();
        var max = maxYear.toString()+'-'+maxMonth.toString();
        console.log(vm.firstMonth,vm.lastMonth)
        var moren = vm.firstMonth+' 至 '+vm.lastMonth;
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
              elem: '#time', //指定元素,
              type:'month',
              range: '至', //或 range: '~' 来自定义分割字符
              theme: '#05273e',
              position: 'abolute',
              right:'200px',
              value: moren,
              max:max,
              btns: ['confirm'],
              done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                console.log(vm.firstDay);
                if(date.month < 10){
                    vm.firstDay = date.year+'-0'+date.month+'-01';
                }else{
                    vm.firstDay = date.year+'-'+date.month+'-01';
                }
                if(endDate.month < 10){
                    vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }else{
                    vm.lastDay = endDate.year+'-'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }
                vm.halfYearStartDate = getLastHalfMonthArray(endDate.year+'-'+endDate.month)
                vm.halfYearEndDate = vm.lastDay;
                vm.thirdJiDate = getThirdJiDate(endDate.year,endDate.month)
                vm.initData(vm.type);
                vm.alertTime = 0;
              }
            //   showBottom: false
            });
        });
        
    },
    methods: {
        initData:function(type){
            var vm = this;
            if(type == 0){
                event_type = '';//全部
            }else if(type == 1){
                event_type = 1;//住院
            }else if(type == 2){
                event_type = 0;//门诊
            }
            var linkageFilter1 = "quotaDate >= '" + vm.firstDay + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter2 = "quotaDate >= '" + vm.thirdJiDate + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter3 = "quotaDate >= '" + vm.halfYearStartDate + "' and quotaDate <= '" + vm.halfYearEndDate + "';";
            console.log(linkageFilter1)
            var code = this.code;
            var urlNumber = '/gov/report/getNoChartTemplateData';
            var urlChart = '/gov/report/getTemplateDataByViewCode';
            var reqUrl = [
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0]}},//总人数
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0],linkageFilter:linkageFilter1}},//新增人数
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[1],linkageFilter:linkageFilter1}},//门诊,住院人次
                {url:urlChart,reqType: 'get',data: {viewCode:code[2],linkageFilter:linkageFilter1+'eventType='+event_type}},//区县分布
                {url:urlChart,reqType: 'get',data: {viewCode:code[3],linkageFilter:linkageFilter1+'eventType='+event_type}},//性别分布
                {url:urlChart,reqType: 'get',data: {viewCode:code[4],linkageFilter:linkageFilter1+'eventType='+event_type,'limitCondition':5}},//疾病前五
                {url:urlChart,reqType: 'get',data: {viewCode:code[5],linkageFilter:linkageFilter3+'eventType='+event_type}},//老年人就诊趋势-月
                {url:urlChart,reqType: 'get',data: {viewCode:code[6],linkageFilter:'eventType='+event_type}},//老年人就诊趋势-年
                {url:urlChart,reqType: 'get',data: {viewCode:code[7],linkageFilter:linkageFilter1+'eventType='+event_type}},//年龄分布
                {url:urlChart,reqType: 'get',data: {viewCode:code[8],linkageFilter:linkageFilter2+'eventType='+event_type}},//老年人就诊趋势-季
            ]
            $(".div-mask-layer").show();
            httpRequest.getReqPromises(reqUrl).then(function(datas) {
                console.log(datas);
                vm.alertData1 = datas[0].obj.VIEW_13_0015[0].HC_13_0021;
                vm.alertData2 = datas[1].obj.VIEW_13_0015[0].HC_13_0021;
                vm.alertData3 = datas[2].obj.VIEW_13_0016[0].HC_13_0015;
                vm.alertData4 = datas[2].obj.VIEW_13_0016[0].HC_13_0016;
                var chart1 = datas[3].obj.viewInfos[0].options[0].option;
                var chart2 = datas[4].obj.viewInfos[0].options[0].option;
                var chart3 = datas[5].obj.viewInfos[0].options[0].option;
                var chart4 = datas[6].obj.viewInfos[0].options[0].option;
                var chart5 = datas[7].obj.viewInfos[0].options[0].option;
                var chart6 = datas[8].obj.viewInfos[0].options[0].option;
                var chart7 = datas[9].obj.viewInfos[0].options[0].option;
                vm.qushiMonth = chart4;
                vm.qushiYear = chart5;
                vm.qushiSeason = chart7;
                vm.setAlertChart1(chart1);
                vm.setAlertChart2(chart6);
                vm.setAlertChart3(chart2);
                vm.setAlertChart4(chart3);
                vm.setAlertChart5(chart4);
                $(".div-mask-layer").hide();
            })
        },
        setAlertChart1:function(data){
            var options = JSON.parse(data);
            options = quxianChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart1 = options;
        },
        setAlertChart2:function(data){
            var options = JSON.parse(data);
            options = nianlingChart(options);
            options.color = ["#6576e0","#03fa6c","#ff616f","#0fa5f2","#00e6f3"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '58%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['35%','55%'];
            console.log(options)
            this.alertChart2 = options
        },
        setAlertChart3:function(data){
            var options = JSON.parse(data);
            options = xingbieChart(options);
            options.color = ["#00E7F3","#ff616f"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '58%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['35%','55%'];
            this.alertChart3 = options
        },
        setAlertChart4:function(data){
            var options = JSON.parse(data);
            options = jibingTopChart(options);
            options.series[0].label = {show: true,position: "right",color: '#b5e1fc'};
            options.series[0].itemStyle.normal.color = '#FFF71A';
            this.alertChart4 = options
        },
        setAlertChart5:function(data){
            var options = JSON.parse(data);
            console.log(options)
            options = qushiChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart5 = options;
        },
        alertTitle:function(type){
            this.alertTime = 0;
            this.type = type;
            this.initData(type)
        },
        alertChart:function(time){
            var vm = this;
            this.alertTime = time;
            if(time == 0){
                vm.setAlertChart5(vm.qushiMonth);
            }else if(time == 1){
                vm.setAlertChart5(vm.qushiYear);
            }else if(time == 2){
                vm.setAlertChart5(vm.qushiSeason);
            }
        },
        closeAlertClick:function(){
        	parent.layer.closeAll();
        },
        GetQueryString :function (name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        },
        chartArea:function(param){
            console.log(param);
        },
        clickBarItem:function(item){
        	console.log(item)
        },
		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 year = date.getFullYear();
            debugger
            this.thirdJiDate = getThirdJiDate(year,lastMonth+1);
            this.firstDay = getLastMonthStartDate();
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = getLastMonthEndDate();
            this.lastMonth = enddate.format("yyyy-MM");
            this.firstDayYear = getYearStartDate();
			this.lastDayYear = getYearEndDate();
			this.halfYearStartDate = getHalfYearStartDate();
			this.halfYearEndDate = getHalfYearEndDate();
			this.yesterdayDate = getYearEndDate();
        },
        getLastDay(year, month) {
            var new_year = year; //取当前的年份
            var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）
            if (month > 12) {
              //如果当前大于12月，则年份转到下一年
              new_month -= 12; //月份减
              new_year++; //年份增
            }
            var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
            return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
        },
    
    }
});
//数字格式化
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;
}

page/bigData/js/alert2.js

@@ -0,0 +1,317 @@
new Vue({
	el: '#main',
	data: {     
        alertData1:'',//总人数
        alertData2:'',//新增人数
        alertData3:'',//门诊人次
        alertData4:'',//住院人次
        alertChart1:'',//左边第一块表格
        alertChart2:'',//右上第一块
        alertChart3:'',//右上第二块
        alertChart4:'',//右上第三块
        alertChart5:'',//右下
        bigData:'',//总数据
        alertType:0,
        alertTime:0,
        firstDay: "", //上月第一天
        lastDay: "", //上月最后一天
        firstMonth:'',
        lastMonth:'',
        code:[
            'VIEW_13_0026',//总人数和新增人数
            'VIEW_13_0033',//门诊和住院人次
            'VIEW_13_0030',//区县分布
            'VIEW_13_0032',//性别分布
            'VIEW_13_0035',//疾病前五
            'VIEW_13_0028',//就诊月趋势
            'VIEW_13_0029',//就诊年趋势
            'VIEW_13_0031',//年龄分布
            'VIEW_13_0046',//就诊季趋势
        ],
        qushiMonth:'',
        qushiYear:'',
        firstDayYear: "", //本年第一天
		lastDayYear: "", //本年最后一天
		halfYearStartDate: "", //近半年开始时间
		halfYearEndDate: "", //近半年结束时间
        yesterdayDate:"",//昨天
        type:0,
        thirdJiDate:"",//三个季度前
        qushiSeason:"",//季度趋势
	},
	mounted: function() {
        var vm = this;
        updateFontSize();
        this.formatDate();
        this.initData(this.type);
        var myDate = new Date();
        var maxMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var maxYear = myDate.getFullYear();
        var max = maxYear.toString()+'-'+maxMonth.toString();
        console.log(vm.firstMonth,vm.lastMonth)
        var moren = vm.firstMonth+' 至 '+vm.lastMonth;
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
              elem: '#time', //指定元素,
              type:'month',
              range: '至', //或 range: '~' 来自定义分割字符
              theme: '#05273e',
              position: 'abolute',
              right:'200px',
              value: moren,
              max:max,
              btns: ['confirm'],
              done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                console.log(vm.firstDay);
                if(date.month < 10){
                    vm.firstDay = date.year+'-0'+date.month+'-01';
                }else{
                    vm.firstDay = date.year+'-'+date.month+'-01';
                }
                if(endDate.month < 10){
                    vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }else{
                    vm.lastDay = endDate.year+'-'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }
                vm.halfYearStartDate = getLastHalfMonthArray(endDate.year+'-'+endDate.month)
                vm.halfYearEndDate = vm.lastDay;
                vm.thirdJiDate = getThirdJiDate(endDate.year,endDate.month)
                vm.initData(vm.type);
                vm.alertTime = 0;
              }
            //   showBottom: false
            });
        });
        
    },
    methods: {
        initData:function(type){
            var vm = this;
            if(type == 0){
                event_type = '';//全部
            }else if(type == 1){
                event_type = 1;//住院
            }else if(type == 2){
                event_type = 0;//门诊
            }
            var linkageFilter1 = "quotaDate >= '" + vm.firstDay + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter2 = "quotaDate >= '" + vm.thirdJiDate + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter3 = "quotaDate >= '" + vm.halfYearStartDate + "' and quotaDate <= '" + vm.halfYearEndDate + "';";
            console.log(linkageFilter1)
            var code = this.code;
            var urlNumber = '/gov/report/getNoChartTemplateData';
            var urlChart = '/gov/report/getTemplateDataByViewCode';
            var reqUrl = [
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0]}},//总人数
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0],linkageFilter:linkageFilter1}},//新增人数
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[1],linkageFilter:linkageFilter1}},//门诊,住院人次
                {url:urlChart,reqType: 'get',data: {viewCode:code[2],linkageFilter:linkageFilter1+'eventType='+event_type}},//区县分布
                {url:urlChart,reqType: 'get',data: {viewCode:code[3],linkageFilter:linkageFilter1+'eventType='+event_type}},//性别分布
                {url:urlChart,reqType: 'get',data: {viewCode:code[4],linkageFilter:linkageFilter1+'eventType='+event_type,'limitCondition':5}},//疾病前五
                {url:urlChart,reqType: 'get',data: {viewCode:code[5],linkageFilter:linkageFilter3+'eventType='+event_type}},//老年人就诊趋势-月
                {url:urlChart,reqType: 'get',data: {viewCode:code[6],linkageFilter:'eventType='+event_type}},//老年人就诊趋势-年
                {url:urlChart,reqType: 'get',data: {viewCode:code[7],linkageFilter:linkageFilter1+'eventType='+event_type}},//年龄分布
                {url:urlChart,reqType: 'get',data: {viewCode:code[8],linkageFilter:linkageFilter2+'eventType='+event_type}},//老年人就诊趋势-月
            ]
            $(".div-mask-layer").show();
            httpRequest.getReqPromises(reqUrl).then(function(datas) {          
                console.log(datas);
                vm.alertData1 = datas[0].obj.VIEW_13_0026[0].HC_13_0017;
                vm.alertData2 = datas[1].obj.VIEW_13_0026[0].HC_13_0017;
                vm.alertData3 = datas[2].obj.VIEW_13_0033[0].HC_13_0029; 
                vm.alertData4 = datas[2].obj.VIEW_13_0033[0].HC_13_0030;
                var chart1 = datas[3].obj.viewInfos[0].options[0].option;
                var chart2 = datas[4].obj.viewInfos[0].options[0].option;
                var chart3 = datas[5].obj.viewInfos[0].options[0].option;
                var chart4 = datas[6].obj.viewInfos[0].options[0].option;
                var chart5 = datas[7].obj.viewInfos[0].options[0].option;
                var chart6 = datas[8].obj.viewInfos[0].options[0].option;
                var chart7 = datas[9].obj.viewInfos[0].options[0].option;
                vm.qushiMonth = chart4;
                vm.qushiYear = chart5;
                vm.qushiSeason = chart7;
                vm.setAlertChart1(chart1);
                vm.setAlertChart2(chart6);
                vm.setAlertChart3(chart2);
                vm.setAlertChart4(chart3);
                vm.setAlertChart5(chart4);
                $(".div-mask-layer").hide();
            }).catch(function(res){
                console.log(res);
            })
        },
        setAlertChart1:function(data){
            var options = JSON.parse(data);
            options = quxianChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart1 = options;
        },
        setAlertChart2:function(data){
            var options = JSON.parse(data);
            options = nianlingChart(options);
            options.color = ["#6576e0","#03fa6c","#ff616f","#0fa5f2","#00e6f3"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '58%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['35%','55%'];
            console.log(options)
            this.alertChart2 = options
        },
        setAlertChart3:function(data){
            var options = JSON.parse(data);
            options = xingbieChart(options);
            options.color = ["#00E7F3","#ff616f"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '58%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['35%','55%'];
            this.alertChart3 = options
        },
        setAlertChart4:function(data){
            var options = JSON.parse(data);
            options = jibingTopChart(options);
            options.series[0].label = {show: true,position: "right",color: '#b5e1fc'};
            options.series[0].itemStyle.normal.color = '#FFF71A';
            this.alertChart4 = options
        },
        setAlertChart5:function(data){
            console.log(data)
            var options = JSON.parse(data);
            console.log(options)
            options = qushiChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart5 = options;
        },
        alertTitle:function(type){
            this.alertTime = 0;
            this.type = type;
            this.initData(type)
        },
        alertChart:function(time){
            var vm = this;
            this.alertTime = time;
            if(time == 0){
                vm.setAlertChart5(vm.qushiMonth);
            }else if(time == 1){
                vm.setAlertChart5(vm.qushiYear);
            }else if(time == 2){
                vm.setAlertChart5(vm.qushiSeason);
            }
        },
        closeAlertClick:function(){
        	parent.layer.closeAll();
        },
        GetQueryString :function (name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        },
        chartArea:function(param){
            console.log(param);
        },
        clickBarItem:function(item){
        	console.log(item)
        },
		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 year = date.getFullYear();
            debugger
            this.thirdJiDate = getThirdJiDate(year,lastMonth+1);
            this.firstDay = getLastMonthStartDate();
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = getLastMonthEndDate();
            this.lastMonth = enddate.format("yyyy-MM");
            this.firstDayYear = getYearStartDate();
			this.lastDayYear = getYearEndDate();
			this.halfYearStartDate = getHalfYearStartDate();
			this.halfYearEndDate = getHalfYearEndDate();
			this.yesterdayDate = getYearEndDate();
        },
        getLastDay(year, month) {
            var new_year = year; //取当前的年份
            var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）
            if (month > 12) {
              //如果当前大于12月，则年份转到下一年
              new_month -= 12; //月份减
              new_year++; //年份增
            }
            var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
            return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
        },
    
    }
});
//数字格式化
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;
}

page/bigData/js/alert3.js

@@ -0,0 +1,314 @@
new Vue({
	el: '#main',
	data: {     
        alertData1:'',//总人数
        alertData2:'',//新增人数
        alertData3:'',//门诊人次
        alertData4:'',//住院人次
        alertChart1:'',//左边第一块表格
        alertChart2:'',//右上第一块
        alertChart3:'',//右上第二块
        alertChart4:'',//右上第三块
        alertChart5:'',//右下
        bigData:'',//总数据
        alertType:0,
        alertTime:0,
        firstDay: "", //上月第一天
        lastDay: "", //上月最后一天
        firstMonth:'',
        lastMonth:'',
        code:[
            'VIEW_16_0001',//新增人数
            'VIEW_16_0006',//已生产人数
            'VIEW_16_0002',//区县分布
            'VIEW_16_0007',//年龄分布
            'VIEW_16_0008',//疾病前五
            'VIEW_16_0004',//就诊月趋势
            'VIEW_16_0005',//就诊年趋势
            'VIEW_16_0012',//就诊季趋势
        ],
        qushiMonth:'',
        qushiYear:'',
        firstDayYear: "", //本年第一天
		lastDayYear: "", //本年最后一天
		halfYearStartDate: "", //近半年开始时间
		halfYearEndDate: "", //近半年结束时间
        yesterdayDate:"",//昨天
        type:0,
        time:'',//42天前
        thirdJiDate:"",//三个季度前
        qushiSeason:"",//季度趋势
	},
	mounted: function() {
        var vm = this;
        updateFontSize();
        this.formatDate();
        var t = new Date(vm.firstMonth+'-'+'01');
        t = Date.parse(t)-3600*24*42*1000
        vm.time = new Date(t).Format('yyyy-MM-dd');
        this.initData(this.type);
        var myDate = new Date();
        var maxMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var maxYear = myDate.getFullYear();
        var max = maxYear.toString()+'-'+maxMonth.toString();
        console.log(vm.firstMonth,vm.lastMonth)
        var moren = vm.firstMonth+' 至 '+vm.lastMonth;
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
              elem: '#time', //指定元素,
              type:'month',
              range: '至', //或 range: '~' 来自定义分割字符
              theme: '#05273e',
              position: 'abolute',
              right:'200px',
              value: moren,
              max:max,
              btns: ['confirm'],
              done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                console.log(vm.firstDay);
                var t = new Date(date.year+'-'+date.month+'-'+'01');
                t = Date.parse(t)-3600*24*42*1000
                vm.time = new Date(t).Format('yyyy-MM-dd');
                if(date.month < 10){
                    vm.firstDay = date.year+'-0'+date.month+'-01';
                }else{
                    vm.firstDay = date.year+'-'+date.month+'-01';
                }
                if(endDate.month < 10){
                    vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }else{
                    vm.lastDay = endDate.year+'-'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }
                vm.halfYearStartDate = getLastHalfMonthArray(endDate.year+'-'+endDate.month)
                vm.halfYearEndDate = vm.lastDay;
                vm.thirdJiDate = getThirdJiDate(endDate.year,endDate.month);
                vm.initData(vm.type);
                vm.alertTime = 0;
              }
            //   showBottom: false
            });
        });
        
    },
    methods: {
        initData:function(type){
            var vm = this;
            if(type == 0){
                event_type = '';//全部
            }else if(type == 1){
                event_type = 1;//住院
            }else if(type == 2){
                event_type = 0;//门诊
            }
            var linkageFilter1 = "quotaDate >= '" + vm.firstDay + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter2 = "quotaDate >= '" + vm.time + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter3 = "quotaDate >= '" + vm.halfYearStartDate + "' and quotaDate <= '" + vm.halfYearEndDate + "';";
            var linkageFilter4 = "quotaDate >= '" + vm.thirdJiDate + "' and quotaDate <= '" + vm.lastDay + "';";
            console.log(linkageFilter1)
            var code = this.code;
            var urlNumber = '/gov/report/getNoChartTemplateData';
            var urlChart = '/gov/report/getTemplateDataByViewCode';
            var reqUrl = [
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0],linkageFilter:linkageFilter1}},//新增人数
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[1],linkageFilter:linkageFilter2}},//已生产人数
                {url:urlChart,reqType: 'get',data: {viewCode:code[2],linkageFilter:linkageFilter1+'eventType='+event_type}},//区县分布
                {url:urlChart,reqType: 'get',data: {viewCode:code[3],linkageFilter:linkageFilter1+'eventType='+event_type}},//性别分布
                {url:urlChart,reqType: 'get',data: {viewCode:code[4],linkageFilter:linkageFilter1+'eventType='+event_type,'limitCondition':5}},//疾病前五
                {url:urlChart,reqType: 'get',data: {viewCode:code[5],linkageFilter:linkageFilter3+'eventType='+event_type}},//老年人就诊趋势-月
                {url:urlChart,reqType: 'get',data: {viewCode:code[6],linkageFilter:'eventType='+event_type}},//老年人就诊趋势-年
                {url:urlChart,reqType: 'get',data: {viewCode:code[7],linkageFilter:linkageFilter4+'eventType='+event_type}},//老年人就诊趋势-月
            ]
            $(".div-mask-layer").show();
            httpRequest.getReqPromises(reqUrl).then(function(datas) {
                console.log(datas);
                vm.alertData1 = datas[0].obj.VIEW_16_0001[0].HC_13_0033; //新增
                vm.alertData2 = datas[1].obj.VIEW_16_0006[0].HC_13_0034; //已生产人数
                var chart1 = datas[2].obj.viewInfos[0].options[0].option;
                var chart2 = datas[3].obj.viewInfos[0].options[0].option;
                var chart3 = datas[4].obj.viewInfos[0].options[0].option;
                var chart4 = datas[5].obj.viewInfos[0].options[0].option;
                var chart5 = datas[6].obj.viewInfos[0].options[0].option;
                var chart6 = datas[7].obj.viewInfos[0].options[0].option;
                vm.qushiMonth = chart4;
                vm.qushiYear = chart5;
                vm.qushiSeason = chart6;
                console.log(chart5)
                vm.setAlertChart1(chart1);
                vm.setAlertChart2(chart2);
                vm.setAlertChart4(chart3);
                vm.setAlertChart5(chart4);
                $(".div-mask-layer").hide();
            })
        },
        setAlertChart1:function(data){
            var options = JSON.parse(data);
            options = quxianChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart1 = options;
        },
        setAlertChart2:function(data){
            var options = JSON.parse(data);
            options = nianlingChart(options);
            options.color = ["#6576e0","#03fa6c","#ff616f","#0fa5f2","#00e6f3"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '58%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['35%','55%'];
            this.alertChart2 = options
        },
        setAlertChart3:function(data){
            var options = JSON.parse(data);
            options = xingbieChart(options);
            options.color = ["#00E7F3","#ff616f"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '58%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['35%','55%'];
            this.alertChart3 = options
        },
        setAlertChart4:function(data){
            var options = JSON.parse(data);
            options = jibingTopChart(options);
            options.series[0].label = {show: true,position: "right",color: '#b5e1fc'};
            options.series[0].itemStyle.normal.color = '#FFF71A';
            this.alertChart4 = options
        },
        setAlertChart5:function(data){
            var options = JSON.parse(data);
            options = qushiChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart5 = options;
        },
        alertTitle:function(type){
            this.alertTime = 0;
            this.type = type;
            this.initData(type)
        },
        alertChart:function(time){
            var vm = this;
            this.alertTime = time;
            if(time == 0){
                vm.setAlertChart5(vm.qushiMonth);
            }else if(time == 1){
                vm.setAlertChart5(vm.qushiYear);
            }else if(time == 2){
                vm.setAlertChart5(vm.qushiSeason);
            }
        },
        closeAlertClick:function(){
        	parent.layer.closeAll();
        },
        GetQueryString :function (name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        },
        chartArea:function(param){
            console.log(param);
        },
        clickBarItem:function(item){
        	console.log(item)
        },
		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 year = date.getFullYear();
            debugger
            this.thirdJiDate = getThirdJiDate(year,lastMonth+1);
            this.firstDay = getLastMonthStartDate();
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = getLastMonthEndDate();
            this.lastMonth = enddate.format("yyyy-MM");
            this.firstDayYear = getYearStartDate();
			this.lastDayYear = getYearEndDate();
			this.halfYearStartDate = getHalfYearStartDate();
			this.halfYearEndDate = getHalfYearEndDate();
			this.yesterdayDate = getYearEndDate();
        },
        getLastDay(year, month) {
            var new_year = year; //取当前的年份
            var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）
            if (month > 12) {
              //如果当前大于12月，则年份转到下一年
              new_month -= 12; //月份减
              new_year++; //年份增
            }
            var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
            return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
        },
    
    }
});
//数字格式化
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;
}

page/bigData/js/alert4.js

@@ -0,0 +1,308 @@
new Vue({
	el: '#main',
	data: {     
        alertData1:'',//总人数
        alertData2:'',//新增人数
        alertData3:'',//门诊人次
        alertData4:'',//住院人次
        alertChart1:'',//左边第一块表格
        alertChart2:'',//右上第一块
        alertChart3:'',//右上第二块
        alertChart4:'',//右上第三块
        alertChart5:'',//右下
        bigData:'',//总数据
        alertType:0,
        alertTime:0,
        firstDay: "", //上月第一天
        lastDay: "", //上月最后一天
        firstMonth:'',
        lastMonth:'',
        code:[
            'VIEW_15_0001',//总人数和新增人数
            'VIEW_15_0002',//门诊和住院人次
            'VIEW_15_0003',//区县分布
            'VIEW_15_0004',//性别分布
            'VIEW_15_0005',//疾病前五
            'VIEW_15_0006',//就诊月趋势
            'VIEW_15_0007',//就诊年趋势
            'VIEW_15_0012',//就诊季趋势
        ],
        qushiMonth:'',
        qushiYear:'',
        firstDayYear: "", //本年第一天
		lastDayYear: "", //本年最后一天
		halfYearStartDate: "", //近半年开始时间
		halfYearEndDate: "", //近半年结束时间
        yesterdayDate:"",//昨天
        type:0,
        thirdJiDate:"",//三个季度前
        qushiSeason:"",//季度趋势
	},
	mounted: function() {
        var vm = this;
        updateFontSize();
        this.formatDate();
        this.initData(this.type);
        var myDate = new Date();
        var maxMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var maxYear = myDate.getFullYear();
        var max = maxYear.toString()+'-'+maxMonth.toString();
        console.log(vm.firstMonth,vm.lastMonth)
        var moren = vm.firstMonth+' 至 '+vm.lastMonth;
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
              elem: '#time', //指定元素,
              type:'month',
              range: '至', //或 range: '~' 来自定义分割字符
              theme: '#05273e',
              position: 'abolute',
              right:'200px',
              value: moren,
              max:max,
              btns: ['confirm'],
              done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                console.log(vm.firstDay);
                if(date.month < 10){
                    vm.firstDay = date.year+'-0'+date.month+'-01';
                }else{
                    vm.firstDay = date.year+'-'+date.month+'-01';
                }
                if(endDate.month < 10){
                    vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }else{
                    vm.lastDay = endDate.year+'-'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }
                vm.halfYearStartDate = getLastHalfMonthArray(endDate.year+'-'+endDate.month)
                vm.halfYearEndDate = vm.lastDay;
                vm.thirdJiDate = getThirdJiDate(endDate.year,endDate.month)
                vm.initData(vm.type);
                vm.alertTime = 0;
              }
            //   showBottom: false
            });
        });
        
    },
    methods: {
        initData:function(type){
            var vm = this;
            if(type == 0){
                event_type = '';//全部
            }else if(type == 1){
                event_type = 1;//住院
            }else if(type == 2){
                event_type = 0;//门诊
            }
            var linkageFilter1 = "quotaDate >= '" + vm.firstDay + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter2 = "quotaDate >= '" + vm.thirdJiDate + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter3 = "quotaDate >= '" + vm.halfYearStartDate + "' and quotaDate <= '" + vm.halfYearEndDate + "';";
            console.log(linkageFilter1)
            var code = this.code;
            var urlNumber = '/gov/report/getNoChartTemplateData';
            var urlChart = '/gov/report/getTemplateDataByViewCode';
            var reqUrl = [
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0]}},//总人数
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0],linkageFilter:linkageFilter1}},//新增人数
                {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[1],linkageFilter:linkageFilter1}},//门诊,住院人次
                {url:urlChart,reqType: 'get',data: {viewCode:code[2],linkageFilter:linkageFilter1+'eventType='+event_type}},//区县分布
                {url:urlChart,reqType: 'get',data: {viewCode:code[3],linkageFilter:linkageFilter1+'eventType='+event_type}},//性别分布
                {url:urlChart,reqType: 'get',data: {viewCode:code[4],linkageFilter:linkageFilter1+'eventType='+event_type,'limitCondition':5}},//疾病前五
                {url:urlChart,reqType: 'get',data: {viewCode:code[5],linkageFilter:linkageFilter3+'eventType='+event_type}},//老年人就诊趋势-月
                {url:urlChart,reqType: 'get',data: {viewCode:code[6],linkageFilter:'eventType='+event_type}},//老年人就诊趋势-年
                {url:urlChart,reqType: 'get',data: {viewCode:code[7],linkageFilter:linkageFilter2+'eventType='+event_type}},//老年人就诊趋势-月
            ]
            $(".div-mask-layer").show();
            httpRequest.getReqPromises(reqUrl).then(function(datas) {
                vm.alertData1 = datas[0].obj.VIEW_15_0001[0].HC_15_1006;
                vm.alertData2 = datas[1].obj.VIEW_15_0001[0].HC_15_1006;
                vm.alertData3 = datas[2].obj.VIEW_15_0002[0].HC_15_1003;
                vm.alertData4 = datas[2].obj.VIEW_15_0002[0].HC_15_1004;
                var chart1 = datas[3].obj.viewInfos[0].options[0].option;
                var chart2 = datas[4].obj.viewInfos[0].options[0].option;
                var chart3 = datas[5].obj.viewInfos[0].options[0].option;
                var chart4 = datas[6].obj.viewInfos[0].options[0].option;
                var chart5 = datas[7].obj.viewInfos[0].options[0].option;
                var chart6 = datas[8].obj.viewInfos[0].options[0].option;
                vm.qushiMonth = chart4;
                vm.qushiYear = chart5;
                vm.qushiSeason = chart6;
                vm.setAlertChart1(chart1);
                vm.setAlertChart3(chart2);
                vm.setAlertChart4(chart3);
                vm.setAlertChart5(chart4);
                $(".div-mask-layer").hide();
            })
        },
        setAlertChart1:function(data){
            var options = JSON.parse(data);
            options = quxianChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart1 = options;
        },
        setAlertChart2:function(data){
            var options = JSON.parse(data);
            options = nianlingChart(options);
            options.color = ["#6576e0","#03fa6c","#ff616f","#0fa5f2","#00e6f3"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            this.alertChart2 = options
        },
        setAlertChart3:function(data){
            var options = JSON.parse(data);
            options = xingbieChart(options);
            options.color = ["#00E7F3","#ff616f","#6576e0"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            this.alertChart3 = options
        },
        setAlertChart4:function(data){
            var options = JSON.parse(data);
            options = jibingTopChart(options);
            options.series[0].label = {show: true,position: "right",color: '#b5e1fc'};
            options.series[0].itemStyle.normal.color = '#FFF71A';
            this.alertChart4 = options
        },
        setAlertChart5:function(data){
            var options = JSON.parse(data);
            console.log(options)
            options = qushiChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart5 = options;
        },
        alertTitle:function(type){
            this.alertTime = 0;
            this.type = type;
            this.initData(type)
        },
        alertChart:function(time){
            var vm = this;
            this.alertTime = time;
            if(time == 0){
                vm.setAlertChart5(vm.qushiMonth);
            }else if(time == 1){
                vm.setAlertChart5(vm.qushiYear);
            }else if(time == 2){
                vm.setAlertChart5(vm.qushiSeason);
            }
        },
        closeAlertClick:function(){
        	parent.layer.closeAll();
        },
        GetQueryString :function (name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        },
        chartArea:function(param){
            console.log(param);
        },
        clickBarItem:function(item){
        	console.log(item)
        },
		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 year = date.getFullYear();
            debugger
            this.thirdJiDate = getThirdJiDate(year,lastMonth+1);
            this.firstDay = getLastMonthStartDate();
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = getLastMonthEndDate();
            this.lastMonth = enddate.format("yyyy-MM");
            this.firstDayYear = getYearStartDate();
			this.lastDayYear = getYearEndDate();
			this.halfYearStartDate = getHalfYearStartDate();
			this.halfYearEndDate = getHalfYearEndDate();
			this.yesterdayDate = getYearEndDate();
        },
        getLastDay(year, month) {
            var new_year = year; //取当前的年份
            var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）
            if (month > 12) {
              //如果当前大于12月，则年份转到下一年
              new_month -= 12; //月份减
              new_year++; //年份增
            }
            var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
            return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
        },
    
    }
});
//数字格式化
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;
}

page/bigData/js/alert5.js

@@ -0,0 +1,319 @@
new Vue({
	el: '#main',
	data: {     
        alertChart1:'',//左边第一块表格
        alertChart2:'',//左边第二块表格
        alertChart3:'',//右上第一块
        alertChart4:'',//右上第二块
        alertChart5:'',//右下
        bigData:'',//总数据
        alertType:0,
        alertTime:0,
        firstDay: "", //上月第一天
        lastDay: "", //上月最后一天
        firstMonth:'',
        lastMonth:'',
        code:[
            'VIEW_13_0018',//死亡原因-人
            'VIEW_13_0019',//区县分布-人
            'VIEW_13_0020',//年龄段分布
            'VIEW_13_0021',//性别分布
            'VIEW_13_0023',//新增患者月趋势
            'VIEW_13_0025',//新增患者年趋势
            'VIEW_13_0024',//新增患者季趋势
        ],
        qushiMonth:'',
        qushiYear:'',
        firstDayYear: "", //本年第一天
		lastDayYear: "", //本年最后一天
		halfYearStartDate: "", //近半年开始时间
		halfYearEndDate: "", //近半年结束时间
        yesterdayDate:"",//昨天
        type:0,
        thirdJiDate:"",//三个季度前
        qushiSeason:"",//季度趋势
        townCode:'',//区县选择
	},
	mounted: function() {
        var vm = this;
        var townCode = getUrlParms('cityVal');
        if(townCode){
            vm.townCode = townCode;
        }
        updateFontSize();
        this.formatDate();
        this.initData(this.type,vm.townCode);
        var myDate = new Date();
        var maxMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var maxYear = myDate.getFullYear();
        var max = maxYear.toString()+'-'+maxMonth.toString();
        console.log(vm.firstMonth,vm.lastMonth)
        var moren = vm.firstMonth+' 至 '+vm.lastMonth;
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
              elem: '#time', //指定元素,
              type:'month',
              range: '至', //或 range: '~' 来自定义分割字符
              theme: '#05273e',
              position: 'abolute',
              right:'200px',
              value: moren,
              max:max,
              btns: ['confirm'],
              done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                console.log(vm.firstDay);
                if(date.month < 10){
                    vm.firstDay = date.year+'-0'+date.month+'-01';
                }else{
                    vm.firstDay = date.year+'-'+date.month+'-01';
                }
                if(endDate.month < 10){
                    vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }else{
                    vm.lastDay = endDate.year+'-'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }
                vm.halfYearStartDate = getLastHalfMonthArray(endDate.year+'-'+endDate.month)
                vm.halfYearEndDate = vm.lastDay;
                vm.thirdJiDate = getThirdJiDate(endDate.year,endDate.month);
                vm.initData(vm.type,vm.townCode);
                vm.alertTime = 0;
              }
            //   showBottom: false
            });
        });
        
    },
    methods: {
        initData:function(type,city){
            var vm = this;
            var linkageFilter1 = "quotaDate >= '" + vm.firstDay + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter2 = "quotaDate >= '" + vm.thirdJiDate + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter3 = "quotaDate >= '" + vm.halfYearStartDate + "' and quotaDate <= '" + vm.halfYearEndDate + "';";
            console.log(linkageFilter1)
            var code = this.code;
            var urlNumber = '/gov/report/getNoChartTemplateData';
            var urlChart = '/gov/report/getTemplateDataByViewCode';
            if(city == ''){
                var reqUrl = [
                    {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0],linkageFilter:linkageFilter1,limitCondition:JSON.stringify({'VIEW_13_0038': '12'})}},//死亡原因-人
                    {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[1],linkageFilter:linkageFilter1}},//区县分布-人
                    {url:urlChart,reqType: 'get',data: {viewCode:code[2],linkageFilter:linkageFilter1}},//年龄段分布
                    {url:urlChart,reqType: 'get',data: {viewCode:code[3],linkageFilter:linkageFilter1}},//性别分布
                    {url:urlChart,reqType: 'get',data: {viewCode:code[4],linkageFilter:linkageFilter3}},//新增患者月趋势
                    {url:urlChart,reqType: 'get',data: {viewCode:code[5]}},//老年人就诊趋势-年
                    {url:urlChart,reqType: 'get',data: {viewCode:code[6],linkageFilter:linkageFilter2}},//新增患者季趋势
                ]
            }else{
                var reqUrl = [
                    {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0],linkageFilter:linkageFilter1,limitCondition:JSON.stringify({'VIEW_13_0038': '12'})}},//死亡原因-人
                    {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[1],linkageFilter:linkageFilter1}},//区县分布-人
                    {url:urlChart,reqType: 'get',data: {viewCode:code[2],linkageFilter:linkageFilter1+'town='+city,linkageDimension:'org'}},//年龄段分布
                    {url:urlChart,reqType: 'get',data: {viewCode:code[3],linkageFilter:linkageFilter1+'town='+city,linkageDimension:'org'}},//性别分布
                    {url:urlChart,reqType: 'get',data: {viewCode:code[4],linkageFilter:linkageFilter3+'town='+city,linkageDimension:'org'}},//新增患者月趋势
                    {url:urlChart,reqType: 'get',data: {viewCode:code[5],linkageFilter:'town='+city,linkageDimension:'org'}},//老年人就诊趋势-年
                    {url:urlChart,reqType: 'get',data: {viewCode:code[6],linkageFilter:linkageFilter2+'town='+city,linkageDimension:'org'}},//新增患者季趋势
                ]
            }
            $(".div-mask-layer").show();
            httpRequest.getReqPromises(reqUrl).then(function(datas) {
                console.log(datas);
                vm.alertChart1 = datas[0].obj.VIEW_13_0018;
                vm.alertChart2 = datas[1].obj.VIEW_13_0019;
                // vm.alertData3 = datas[2].obj.VIEW_15_0002[0].HC_15_1003;
                // vm.alertData4 = datas[2].obj.VIEW_15_0002[0].HC_15_1004;
                var chart1 = datas[2].obj.viewInfos[0].options[0].option;
                var chart2 = datas[3].obj.viewInfos[0].options[0].option;
                var chart3 = datas[4].obj.viewInfos[0].options[0].option;
                var chart4 = datas[5].obj.viewInfos[0].options[0].option;
                var chart5 = datas[6].obj.viewInfos[0].options[0].option;
                vm.qushiMonth = chart3;
                vm.qushiYear = chart4;
                vm.qushiSeason = chart5;
                vm.setAlertChart2(chart1);
                vm.setAlertChart3(chart2);
                // vm.setAlertChart4(chart3);
                vm.setAlertChart5(chart3);
                $(".div-mask-layer").hide();
            })
        },
        setAlertChart1:function(data){
            var options = JSON.parse(data);
            options = quxianChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart1 = options;
        },
        setAlertChart2:function(data){
            var options = JSON.parse(data);
            options = nianlingChart(options);
            options.color = ["#6576e0","#03fa6c","#ff616f","#0fa5f2","#00e6f3"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '58%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['35%','55%'];
            this.alertChart3 = options
        },
        setAlertChart3:function(data){
            var options = JSON.parse(data);
            options = xingbieChart(options);
            options.color = ["#00E7F3","#ff616f"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '58%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['35%','55%'];
            this.alertChart4 = options
        },
        setAlertChart4:function(data){
            var options = JSON.parse(data);
            options = jibingTopChart(options);
            options.series[0].label = {show: true,position: "right",color: '#b5e1fc'};
            options.series[0].itemStyle.normal.color = '#FFF71A';
            this.alertChart4 = options
        },
        setAlertChart5:function(data){
            var options = JSON.parse(data);
            options = qushiChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart5 = options;
            window.chart5 = this.$refs._alertChart5.chart
        },
        alertTitle:function(type){
            this.alertTime = 0;
            this.type = type;
            this.initData(type,vm.townCode)
        },
        alertChart:function(time){
            var vm = this;
            this.alertTime = time;
            if(time == 0){
                vm.setAlertChart5(vm.qushiMonth);
            }else if(time == 1){
                vm.setAlertChart5(vm.qushiYear);
            }else if(time == 2){
                vm.setAlertChart5(vm.qushiSeason);
            }
        },
        closeAlertClick:function(){
        	parent.layer.closeAll();
        },
        GetQueryString :function (name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        },
        chartArea:function(param){
            console.log(param);
        },
        clickBarItem:function(item){
        	console.log(item)
        },
		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 year = date.getFullYear();
            debugger
            this.thirdJiDate = getThirdJiDate(year,lastMonth+1);
            this.firstDay = getLastMonthStartDate();
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = getLastMonthEndDate();
            this.lastMonth = enddate.format("yyyy-MM");
            this.firstDayYear = getYearStartDate();
			this.lastDayYear = getYearEndDate();
			this.halfYearStartDate = getHalfYearStartDate();
			this.halfYearEndDate = getHalfYearEndDate();
			this.yesterdayDate = getYearEndDate();
        },
        getLastDay(year, month) {
            var new_year = year; //取当前的年份
            var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）
            if (month > 12) {
              //如果当前大于12月，则年份转到下一年
              new_month -= 12; //月份减
              new_year++; //年份增
            }
            var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
            return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
        },
        getCity(e){
            console.log(e)
            var vm = this;
            e == vm.townCode?vm.townCode = '':vm.townCode=e;
            vm.initData(vm.type,vm.townCode);
        }
    
    }
});
//数字格式化
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;
}

page/bigData/js/alert6.js

@@ -0,0 +1,319 @@
new Vue({
	el: '#main',
	data: {     
        alertChart1:'',//左边第一块表格
        alertChart2:'',//左边第二块表格
        alertChart3:'',//右上第一块
        alertChart4:'',//右上第二块
        alertChart5:'',//右下
        bigData:'',//总数据
        alertType:0,
        alertTime:0,
        firstDay: "", //上月第一天
        lastDay: "", //上月最后一天
        firstMonth:'',
        lastMonth:'',
        code:[
            'VIEW_13_0038',//死亡原因-人
            'VIEW_13_0039',//区县分布-人
            'VIEW_13_0040',//年龄段分布
            'VIEW_13_0041',//性别分布
            'VIEW_13_0042',//新增患者月趋势
            'VIEW_13_0043',//新增患者年趋势
            'VIEW_13_0044',//新增患者季趋势
        ],
        qushiMonth:'',
        qushiYear:'',
        firstDayYear: "", //本年第一天
		lastDayYear: "", //本年最后一天
		halfYearStartDate: "", //近半年开始时间
		halfYearEndDate: "", //近半年结束时间
        yesterdayDate:"",//昨天
        type:0,
        thirdJiDate:"",//三个季度前
        qushiSeason:"",//季度趋势
        townCode:'',//区县选择
	},
	mounted: function() {
        var vm = this;
        var townCode = getUrlParms('cityVal');
        if(townCode){
            vm.townCode = townCode;
        }
        updateFontSize();
        this.formatDate();
        this.initData(this.type,this.townCode);
        var myDate = new Date();
        var maxMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var maxYear = myDate.getFullYear();
        var max = maxYear.toString()+'-'+maxMonth.toString();
        console.log(vm.firstMonth,vm.lastMonth)
        var moren = vm.firstMonth+' 至 '+vm.lastMonth;
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
              elem: '#time', //指定元素,
              type:'month',
              range: '至', //或 range: '~' 来自定义分割字符
              theme: '#05273e',
              position: 'abolute',
              right:'200px',
              value: moren,
              max:max,
              btns: ['confirm'],
              done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                console.log(vm.firstDay);
                if(date.month < 10){
                    vm.firstDay = date.year+'-0'+date.month+'-01';
                }else{
                    vm.firstDay = date.year+'-'+date.month+'-01';
                }
                if(endDate.month < 10){
                    vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }else{
                    vm.lastDay = endDate.year+'-'+endDate.month+'-'+vm.getLastDay(endDate.year,endDate.month);
                }
                vm.halfYearStartDate = getLastHalfMonthArray(endDate.year+'-'+endDate.month)
                vm.halfYearEndDate = vm.lastDay;
                vm.thirdJiDate = getThirdJiDate(endDate.year,endDate.month)
                vm.initData(vm.type,vm.townCode);
                vm.alertTime = 0;
              }
            //   showBottom: false
            });
        });
        
    },
    methods: {
        initData:function(type,city){
            var vm = this;
            var linkageFilter1 = "quotaDate >= '" + vm.firstDay + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter2 = "quotaDate >= '" + vm.thirdJiDate + "' and quotaDate <= '" + vm.lastDay + "';";
            var linkageFilter3 = "quotaDate >= '" + vm.halfYearStartDate + "' and quotaDate <= '" + vm.halfYearEndDate + "';";
            console.log(linkageFilter1)
            var code = this.code;
            var urlNumber = '/gov/report/getNoChartTemplateData';
            var urlChart = '/gov/report/getTemplateDataByViewCode';
            $(".div-mask-layer").show();
            if(city == ''){
                var reqUrl = [
                    {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0],linkageFilter:linkageFilter1,limitCondition:JSON.stringify({'VIEW_13_0038': '12'})}},//死亡原因-人
                    {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[1],linkageFilter:linkageFilter1}},//区县分布-人
                    {url:urlChart,reqType: 'get',data: {viewCode:code[2],linkageFilter:linkageFilter1}},//年龄段分布
                    {url:urlChart,reqType: 'get',data: {viewCode:code[3],linkageFilter:linkageFilter1}},//性别分布
                    {url:urlChart,reqType: 'get',data: {viewCode:code[4],linkageFilter:linkageFilter3}},//新增患者月趋势
                    {url:urlChart,reqType: 'get',data: {viewCode:code[5]}},//老年人就诊趋势-年
                    {url:urlChart,reqType: 'get',data: {viewCode:code[6],linkageFilter:linkageFilter2}},//新增患者季趋势
                ]
            }else{
                var reqUrl = [
                    {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[0],linkageFilter:linkageFilter1,limitCondition:JSON.stringify({'VIEW_13_0038': '12'})}},//死亡原因-人
                    {url:urlNumber,reqType: 'get',data: {viewCodeStr:code[1],linkageFilter:linkageFilter1}},//区县分布-人
                    {url:urlChart,reqType: 'get',data: {viewCode:code[2],linkageFilter:linkageFilter1+'town='+city,linkageDimension:'org'}},//年龄段分布
                    {url:urlChart,reqType: 'get',data: {viewCode:code[3],linkageFilter:linkageFilter1+'town='+city,linkageDimension:'org'}},//性别分布
                    {url:urlChart,reqType: 'get',data: {viewCode:code[4],linkageFilter:linkageFilter3+'town='+city,linkageDimension:'org'}},//新增患者月趋势
                    {url:urlChart,reqType: 'get',data: {viewCode:code[5],linkageFilter:'town='+city,linkageDimension:'org'}},//老年人就诊趋势-年
                    {url:urlChart,reqType: 'get',data: {viewCode:code[6],linkageFilter:linkageFilter2+'town='+city,linkageDimension:'org'}},//新增患者季趋势
                ]
            }
            
            httpRequest.getReqPromises(reqUrl).then(function(datas) {
                console.log(datas);
                vm.alertChart1 = datas[0].obj.VIEW_13_0038;
                vm.alertChart2 = datas[1].obj.VIEW_13_0039;
                // vm.alertData3 = datas[2].obj.VIEW_15_0002[0].HC_15_1003;
                // vm.alertData4 = datas[2].obj.VIEW_15_0002[0].HC_15_1004;
                var chart1 = datas[2].obj.viewInfos[0].options[0].option;
                var chart2 = datas[3].obj.viewInfos[0].options[0].option;
                var chart3 = datas[4].obj.viewInfos[0].options[0].option;
                var chart4 = datas[5].obj.viewInfos[0].options[0].option;
                var chart5 = datas[6].obj.viewInfos[0].options[0].option;
                vm.qushiMonth = chart3;
                vm.qushiYear = chart4;
                vm.qushiSeason = chart5;
                vm.setAlertChart2(chart1);
                vm.setAlertChart3(chart2);
                // vm.setAlertChart4(chart3);
                vm.setAlertChart5(chart3);
                $(".div-mask-layer").hide();
            })
        },
        setAlertChart1:function(data){
            var options = JSON.parse(data);
            options = quxianChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart1 = options;
        },
        setAlertChart2:function(data){
            var options = JSON.parse(data);
            options = nianlingChart(options);
            options.color = ["#6576e0","#03fa6c","#ff616f","#0fa5f2","#00e6f3"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '58%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['35%','55%'];
            this.alertChart3 = options
        },
        setAlertChart3:function(data){
            var options = JSON.parse(data);
            options = xingbieChart(options);
            options.color = ["#00E7F3","#ff616f"];
            options.legend.formatter = function(name) {
                var index = 0;
                var clientlabels = options.legend.data;
                var clientcounts = _.map(options.series[0].data,function(item,idx){
                	return item.value;
                });
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '58%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['40%','55%'];
            this.alertChart4 = options
        },
        setAlertChart4:function(data){
            var options = JSON.parse(data);
            options = jibingTopChart(options);
            options.series[0].label = {show: true,position: "right",color: '#b5e1fc'};
            options.series[0].itemStyle.normal.color = '#FFF71A';
            this.alertChart4 = options
        },
        setAlertChart5:function(data){
            var options = JSON.parse(data);
            options = qushiChart(options);
            // var options = this.bigData[t]['区县分布'];
            // options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
            this.alertChart5 = options;
            window.chart5 = this.$refs._alertChart5.chart
        },
        alertTitle:function(type){
            this.alertTime = 0;
            this.type = type;
            this.initData(type,vm.townCode)
        },
        alertChart:function(time){
            var vm = this;
            this.alertTime = time;
            if(time == 0){
                vm.setAlertChart5(vm.qushiMonth);
            }else if(time == 1){
                vm.setAlertChart5(vm.qushiYear);
            }else if(time == 2){
                vm.setAlertChart5(vm.qushiSeason);
            }
        },
        closeAlertClick:function(){
        	parent.layer.closeAll();
        },
        GetQueryString :function (name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        },
        chartArea:function(param){
            console.log(param);
        },
        clickBarItem:function(item){
        	console.log(item)
        },
		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 year = date.getFullYear();
            debugger
            this.thirdJiDate = getThirdJiDate(year,lastMonth+1);
            this.firstDay = getLastMonthStartDate();
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = getLastMonthEndDate();
            this.lastMonth = enddate.format("yyyy-MM");
            this.firstDayYear = getYearStartDate();
			this.lastDayYear = getYearEndDate();
			this.halfYearStartDate = getHalfYearStartDate();
			this.halfYearEndDate = getHalfYearEndDate();
			this.yesterdayDate = getYearEndDate();
        },
        getLastDay(year, month) {
            var new_year = year; //取当前的年份
            var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）
            if (month > 12) {
              //如果当前大于12月，则年份转到下一年
              new_month -= 12; //月份减
              new_year++; //年份增
            }
            var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
            return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
        },
        getCity(e){
            console.log(e)
            var vm = this;
            e == vm.townCode?vm.townCode = '':vm.townCode=e;
            vm.initData(vm.type,vm.townCode);
        }
    }
});
//数字格式化
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;
}

page/bigData/js/alertCharts.js

@@ -0,0 +1,431 @@
var quxianChart = function(options){
    var series0data = options.series[0].data  || [];
    var yAxisData = options.xAxis[0].data;   
    var option = {
        "title": {
            "text": "区县分布",
            "x": "center",
            "textStyle": {
                color: ['#b5e1fc']
            },
            "padding": [10, 0, 0, 0]
        },
        "tooltip": {
            "trigger": "axis"
        },
        grid: {
            top: 80,
            bottom: 30,
            left: 80
        },
        "yAxis": [{
            "type": "category",
            "name": "人次",
            "data": yAxisData,
            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#095f8e'
                }
            },
            axisLabel: {
                color: '#b5e1fc'
            },
            nameTextStyle: {
                color: '#b5e1fc'
            }
        }],
        "xAxis": [{
            "type": "value",
            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#095f8e'
                }
            },
            axisLabel: {
                color: '#fff'
            },
            splitLine: {
                show: false // 不显示坐标轴刻度
            }
        }],
        "series": [{
            "smooth": true,
            "name": "区县分布",
            "type": "bar",
            barWidth: 20,
            "label": {
                show: false,
                position: "right"
            },
            "itemStyle": {
                "normal": {
                    "lineStyle": {
                        "shadowColor": "rgba(0,0,0,0.4)"
                    },
                    barBorderRadius: [0, 8, 8, 0],
                    color: '#00e6f3'
                }
            },
            "data": series0data
        }, ]
    }
    return option
},
xingbieChart = function(options){
    console.log(options)
    var title = options.title.text;
    var data = options.series[0].data;
    var legend = data.map(function(item){
        return item.name;
    })
    var option =  {
        "title": {
            "text": title,
            "x": "center",
            "textStyle": {
                color: ['#b5e1fc']
            },
            "padding": [10, 0, 0, 0]
        },
        "tooltip": {
            "trigger": "item"
        },
        legend: {
            orient: 'vertical',
            // x: 'right',
            data: legend,
            right: '25%',
            top: '40%',
            textStyle: {
                color: ['#b5e1fc']
            }
        },
        "series": [{
            "center": [
                "35%",
                "50%"
            ],
            radius: ['30%', '40%'],
            "name": "",
            "type": "pie",
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": false
                    },
                    "labelLine": {
                        "show": false
                    }
                }
            },
            "data": data
        }]
    }
    return option
},
jibingTopChart = function(options){
    debugger
    var title = options.title.text;
    var yAxisData = (options.xAxis[0].data && options.xAxis[0].data.reverse()) || [];
    var xAxisData = (options.series[0].data && options.series[0].data.reverse()) || [];
    var option = {
        "title": {
            "text": title,
            "x": "center",
            "textStyle": {
                color: ['#b5e1fc']
            },
            "padding": [10, 0, 0, 0]
        },
        "tooltip": {
            "trigger": "axis"
        },
        grid: {
            top: 40,
            bottom: 30,
            left: 80,
            right:20
        },
        "yAxis": [{
            "type": "category",
            "name": "",
            "data": yAxisData,
            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#095f8e'
                }
            },
            axisLabel: {
                color: '#b5e1fc',
                formatter(v){
                    return   getBrStr(v,5,true);  
                }        
            },
            nameTextStyle: {
                color: '#b5e1fc'
            },
        }],
        "xAxis": [{
            "type": "value",
            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#095f8e'
                }
            },
            axisLabel: {
                color: '#fff'
            },
            splitLine: {
                show: false // 不显示坐标轴刻度
            }
        }],
        "series": [{
            "smooth": true,
            "name": "并发症排行",
            "type": "bar",
            barWidth: 20,
            "label": {
                show: false,
                position: "right"
            },
            "itemStyle": {
                "normal": {
                    "lineStyle": {
                        "shadowColor": "rgba(0,0,0,0.4)"
                    },
                    barBorderRadius: [0, 8, 8, 0],
                    color: '#00e6f3'
                }
            },
            "data": xAxisData
        }, ]
    }
    return option
},
qushiChart = function(options){
    debugger
    console.log(options);
    var title = options.title.text;
    var xAxisData = options.xAxis[0].data;
    var series0data = options.series[0].data  || [];
	var series1data = options.series[1].data || [];
    var option = {
        "title": {
            "text": title,
            "x": "center",
            textStyle: {
                color: '#b5e1fc',
                fontSize: 16,
                fontWeight: 'bold'
            },
            "padding": [10, 0, 0, 0]
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#fff'
                }
            }
        },
        "grid": {
            top: '90',
            left: '60',
            bottom:'25',
            right:'60'
        },
        legend: {
            data: ['新增人数', '环比'],
            textStyle: {
                color: '#b5e1fc'
            },
            top: '45'
        },
        xAxis: [{
            type: 'category',
            "data": xAxisData,
            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#095f8e'
                }
            },
            axisLabel: {
                color: '#b5e1fc'
            }
        }],
        yAxis: [{
                type: 'value',
                name: '新增人数',
                nameTextStyle: {
                    color: '#b5e1fc' // 坐标轴名称颜色
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#095f8e'
                    }
                },
                axisLabel: {
                    color: '#b5e1fc'
                }
            },
            {
                type: 'value',
                name: '环比',
                nameTextStyle: {
                    color: '#b5e1fc' // 坐标轴名称颜色
                },
                splitLine: {
                    show: false // 不显示坐标轴刻度
                },
                axisLine: {
                    lineStyle: {
                        color: '#095f8e' // 坐标轴轴线颜色
                    }
                },
                axisLabel: {
                    color: '#b5e1fc' // 坐标轴刻度标签文本颜色
                }
            }
        ],
        series: [{
                name: '新增人数',
                type: 'bar',
                "data":series0data,
                barWidth: 20,
                label: {
                    normal: {
                        show: true,
                        position: 'top', // 在柱状图上方显示
                        color: '#fff' // 柱状图上方显示的数值颜色
                    }
                },
                itemStyle: {
                    barBorderRadius: [8, 8, 0, 0],
                    color: '#00e6f3'
                }
            },
            {
                name: '环比',
                type: 'line',
                yAxisIndex: 1,
                "data": series1data,
                itemStyle: {
                    color: '#03fa6d'
                }
            }
        ]
    }
    return option
},
nianlingChart = function(options){
    var title = options.title.text;
    var data = options.series[0].data
    var legend = data.map(function(item){
        return item.name;
    })
    var option =  {
        "title": {
            "text": title,
            "x": "center",
            "textStyle": {
                color: ['#b5e1fc']
            },
            "padding": [10, 0, 0, 0]
        },
        "tooltip": {
            "trigger": "item"
        },
        legend: {
            orient: 'vertical',
            data: legend,
            right: '15%',
            top: '25%',
            textStyle: {
                color: ['#b5e1fc']
            }
        },
        "series": [{
            "center": [
                "35%",
                "50%"
            ],
            radius: ['30%', '40%'],
            "name": "",
            "type": "pie",
            "itemStyle": {
                "normal": {
                    "label": {
                        "show": false
                    },
                    "labelLine": {
                        "show": false
                    }
                }
            },
            "data": data
        }]
    }
    return option
}
function getBrStr(str,num,yRoute2){
    if(!str)return ''
    var newParamsName = "";// 最终拼接成的字符串
    var provideNumber = num || 10;// 每行能显示的字的个数
    var strArr=str.split('');
    if(strArr.length>15 && num && !yRoute2) {   //如果是Y轴 TOP5的  最多显示两行 然后用省略号
      strArr = strArr.slice(0,9)
      strArr.push('...')
      }
      else if(yRoute2 && strArr.length >5){
        strArr = strArr.slice(0,4)
        strArr.push('...');
      }
    strArr.map((v,i)=>{
      var str =v;
      if(i!=0  &&  (i+1)%provideNumber == 0 && !yRoute2){
        str+='\n';
        num++;
      }
  
      newParamsName+=str
    })
    return newParamsName
  }

page/bigData/js/home.js

@@ -7,91 +7,184 @@ toastr.options = {
new Vue({
	el: '#main',
	data: {
		type:0,//0:高血压 1:糖尿病 2:孕产妇 3:65岁以上老年人人数
		jsonUrl:"../../../dataJson/jumingHealthJson/高血压人群.json",
		jsonData:null,
        city:'贵港市',
        town:[
            {
                "townName": "贵港市",
                "result": "0"
            },
            {
                "townName": "港北区",
                "result": "26531"
            },
            {
                "townName": "港南区",
                "result": "25634"
            },
            {
                "townName": "桂平市",
                "result": "113485"
            },
            {
                "townName": "平南县",
                "result": "74128"
            },
            {
                "townName": "覃塘区",
                "result": "12587"
            },
        ],
        city: '上饶市',
		town: [],
		cityVal:"0",
        diseaseData:[],
        mapData:null,
        zhongDianData:[],
        gaoFaData:null,
        siWangData:[],
		skipShow:0,
		lineHeightIndex:null,
		reqUrl:[],
		isInit:true,//是否初始化
		isClickDisease:true,//是否点击疾病
		isClickMap:false//是否点击地图
	},
	mounted: function() {
	  this.bindEvents();
      this.getJsonData();
	  this.initData();
    },
    methods: {
    	getJsonData:function(){
    		var vm = this;
    		bigDataAPI.getJsonData(this.jsonUrl).then(function(res){
    			vm.jsonData = res;
    			var options = _.map(res.town,function(item,idx){
    				var it = {name:item.townName,value:item.result}
    				return it;
    			})
    			 vm.mapData ={data:options,zoom:1,index:vm.lineHeightIndex};  
    	initData:function(){
    		var vm = this,reqUrl = [],townStr="",viewMapJsonGXY = null,viewMapJsonTNB = null,viewMapJsonYCF = null,viewMapJsonGL = null,zhongDianViewCodeMonth="",zhongDianViewCodeJi="",zhongDianViewCodeYear="";
    		$(".div-mask-layer").show();
    		var currentDate = new Date();
    		//封装参数
    		vm.cityVal!="0"?townStr = "town="+vm.cityVal+";":townStr = "";//vm.cityVal=0 查询整个市
    		var diseaseLinkAgeFliter = "quotaDate >= '" + getLastMonthStartDate() + "' and quotaDate <= '" + getLastMonthEndDate() + "';";//疾病列表参数（上个月数据）
    		var zhongDianLinkageFilter = "quotaDate >= '" + getLastYearMonthArray()[12] + "' and quotaDate <= '" + getLastMonthEndDate() + "';";//重点人群参数(过去12个月数据)
    		var zhongDianLinkageFilterJi = "quotaDate >= '" + getThirdJiDate(currentDate.getFullYear(),(currentDate.getMonth()+1)) + "' and quotaDate <= '" + getLastMonthEndDate() + "';";
    		var gaoFaLinkageFilterMonth = "quotaDate >= '" + getMonthStartDate() + "' and quotaDate <= '" + getMonthEndDate() + "';";//高发疾病参数（本月数据）
			var gaoFaLinkageFilterJi = "quotaDate >= '" + getQuarterStartDate() + "' and quotaDate <= '" + getQuarterEndDate() + "';";//高发疾病参数（本季数据）
			var gaoFaLinkageFilterYear = "quotaDate >= '" + getYearStartDate() + "' and quotaDate <= '" + getYearEndDate() + "';";//高发疾病参数（本年数据）
    		viewMapJsonGXY = {VIEW_13_0013:townStr,VIEW_13_0036:townStr+diseaseLinkAgeFliter,VIEW_13_0037:townStr+diseaseLinkAgeFliter};//高血压
    		viewMapJsonTNB = {VIEW_13_0026:townStr,VIEW_13_0034:townStr+diseaseLinkAgeFliter,VIEW_13_0027:townStr+diseaseLinkAgeFliter};//糖尿病
    		viewMapJsonYCF = {VIEW_16_0009:townStr,VIEW_16_0010:townStr+diseaseLinkAgeFliter,VIEW_16_0011:townStr+diseaseLinkAgeFliter};//孕产妇
    		viewMapJsonGL = {VIEW_15_0001:townStr,VIEW_15_0011:townStr+diseaseLinkAgeFliter,VIEW_15_0008:townStr+diseaseLinkAgeFliter};//65岁以上
    		if(vm.type==0){//高血压
    			zhongDianViewCodeMonth = "VIEW_13_0017";//重点人群+按月
    			zhongDianViewCodeJi = "VIEW_13_0045";//重点人群+按季度
    			zhongDianViewCodeYear = "VIEW_13_0022";//重点人群+按年
    		}else if(vm.type==1){//糖尿病
    			zhongDianViewCodeMonth = "VIEW_13_0028";//重点人群+按月
    			zhongDianViewCodeJi = "VIEW_13_0046";//重点人群+按季度
    			zhongDianViewCodeYear = "VIEW_13_0029";//重点人群+按年
    		}else if(vm.type==2){//孕产妇
    			zhongDianViewCodeMonth = "VIEW_16_0004";//重点人群+按月
    			zhongDianViewCodeJi = "VIEW_16_0012";//重点人群+按季度
    			zhongDianViewCodeYear = "VIEW_16_0005";//重点人群+按年
    		}else if(vm.type==3){//65岁以上
    			zhongDianViewCodeMonth = "VIEW_15_0009";//重点人群+按月
    			zhongDianViewCodeJi = "VIEW_15_0012";//重点人群+按季度
    			zhongDianViewCodeYear = "VIEW_15_0010";//重点人群+按年
    		}
    		
    		if(vm.isInit || vm.isClickMap){//整理请求参数集合(初始化或点击地图时加载所有数据)
    		 	reqUrl = [
		    		{url: bigDataAPI.getCityArea,reqType: 'get',data: {}},
		    		{url:bigDataAPI.getMapJingWeiDuInfo,reqType: 'get',data:{}},//上饶地图经纬度数据
		    		{url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonGXY)}},//高血压疾病数据+地图
		    		{url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonTNB)}},//糖尿病疾病数据+地图
		    		{url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonYCF)}},//孕产妇疾病数据+地图
		    		{url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonGL)}},//65岁以上疾病数据+地图
		    		{url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeMonth,linkageFilter:zhongDianLinkageFilter+townStr}},//重点人群+按月
		    		{url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeJi,linkageFilter:zhongDianLinkageFilterJi+townStr}},//重点人群+按季度
		    		{url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeYear,linkageFilter:townStr}},//重点人群+按年
		    		{url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_13_0007",linkageFilter:gaoFaLinkageFilterMonth+townStr,limitCondition:10}},//高发疾病排行----筛选条件：全部+本月
		    		{url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_13_0007",linkageFilter:gaoFaLinkageFilterYear+townStr,limitCondition:10}},//高发疾病排行----筛选条件：全部+本年
		    		{url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_13_0007",linkageFilter:gaoFaLinkageFilterJi+townStr,limitCondition:10}},//高发疾病排行----筛选条件：全部+本季度
		    		{url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: "VIEW_13_0008",linkageFilter:townStr}},//死亡原因
    			];
    		}else{//点击疾病类型，则本月高发和死亡原因数据不变，不用重新请求
    			reqUrl = [
			    		{url: bigDataAPI.getCityArea,reqType: 'get',data: {}},
			    		{url:bigDataAPI.getMapJingWeiDuInfo,reqType: 'get',data:{}},//上饶地图经纬度数据
			    		{url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonGXY)}},//高血压疾病数据+地图
			    		{url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonTNB)}},//糖尿病疾病数据+地图
			    		{url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonYCF)}},//孕产妇疾病数据+地图
			    		{url:bigDataAPI.getMoreNoChartTemplateData,reqType: 'get',data:{viewMapJson:JSON.stringify(viewMapJsonGL)}},//65岁以上疾病数据+地图
			    		{url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeMonth,linkageFilter:zhongDianLinkageFilter+townStr}},//重点人群+按月
			    		{url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeJi,linkageFilter:zhongDianLinkageFilter+townStr}},//重点人群+按季度
			    		{url: bigDataAPI.getTemplateDataByViewCode,reqType: 'get',data: {viewCode: zhongDianViewCodeYear,linkageFilter:townStr}},//重点人群+按年
    			];
    		}
    		httpRequest.getReqPromises(reqUrl).then(function(datas) {
    			vm.town = [{"name": "上饶市","id": "0"}].concat(datas[0]);
				echarts.registerMap('上饶',datas[1]);
				vm.diseaseData.push(datas[2]);
				vm.diseaseData.push(datas[3]);
				vm.diseaseData.push(datas[4]);
				vm.diseaseData.push(datas[5]);
				if(vm.isClickDisease){//点击疾病类型，则地图数据重新加载
					if(vm.type==0){//高血压
		    			vm.setMapData(datas[2]);
		    		}else if(vm.type==1){//糖尿病
		    			vm.setMapData(datas[3]);
		    		}else if(vm.type==2){//孕产妇
		    			vm.setMapData(datas[4]);
		    		}else if(vm.type==3){//65岁以上
		    			vm.setMapData(datas[5]);
		    		}
				}
	    		vm.zhongDianData = [datas[6],datas[7],datas[8]];//重点人群+按月、重点人群+按季度、重点人群+按年
	    		if(vm.isClickMap ||  vm.isInit){//点击地图或初始化，则高发和死亡原因数据重新加载
	    			vm.gaoFaData = [datas[9],datas[10],datas[11]];//高发疾病排行----筛选条件：本月（默认）、本年、本季度
					vm.siWangData = datas[12];//死亡原因
	    		}
	    		vm.isInit = false;
				$(".div-mask-layer").hide();
    		})
    	},
    	setMapData: function(data) {
			var optionData = [],vm=this;
			if(vm.type==0){//高血压
    			data = data.successFlg?data.detailModelList&&data.detailModelList[1].VIEW_13_0036 || []:[];
    			_.map(data, function(item) {
					if(item.firstColumn != "合计") {
						optionData.push({
							name: item.townName,
							value: parseInt(item.HC_13_0021)
						})
					}
				})
    		}else if(vm.type==1){//糖尿病
    			data = data.successFlg?data.detailModelList&&data.detailModelList[1].VIEW_13_0034 || []:[];
    			_.map(data, function(item) {
					if(item.firstColumn != "合计") {
						optionData.push({
							name: item.townName,
							value: parseInt(item.HC_13_0017)
						})
					}
				})
    		}else if(vm.type==2){//孕产妇
    			data = data.successFlg?data.detailModelList&&data.detailModelList[1].VIEW_16_0010 || []:[];
    			_.map(data, function(item) {
					if(item.firstColumn != "合计") {
						optionData.push({
							name: item.townName,
							value: parseInt(item.HC_13_0033)
						})
					}
				})
    		}else if(vm.type==3){//65岁以上
    			data = data.successFlg?data.detailModelList&&data.detailModelList[1].VIEW_15_0011 || []:[];
    			_.map(data, function(item) {
					if(item.firstColumn != "合计") {
						optionData.push({
							name: item.townName,
							value: parseInt(item.HC_15_1006)
						})
					}
				})
    		}
			var options = optionData;
			this.mapData = {
				data: options,
				index: this.lineHeightIndex
			};
		},
    	bindEvents:function(){
    		var vm = this;
    		EventBus.$on("refresh-json-data", function(arg) {
				var type = arg.type;//0:高血压 1糖尿病 2孕产妇 365岁以上老年人人数
				if(type==0){
					vm.jsonUrl = "../../../dataJson/jumingHealthJson/高血压人群.json";
				}else if(type==1){
					vm.jsonUrl = "../../../dataJson/jumingHealthJson/糖尿病人群.json";
				}else if(type==2){
					vm.jsonUrl = "../../../dataJson/jumingHealthJson/孕产妇人群.json";
				}else if(type==3){
					vm.jsonUrl = "../../../dataJson/jumingHealthJson/65岁以上老年人人数.json";
				}
				vm.getJsonData();
    			vm.isClickMap = false;
    			vm.isClickDisease = true;
				vm.type = arg.type;//0:高血压 1:糖尿病 2:孕产妇 3:65岁以上老年人人数
				vm.initData();
			});
    	},
        setCity(item){
        	this.city = item.townName;
        	this.city = item.name;
        },
        clickMap:function(res){
          this.isClickMap = true;
    	  this.isClickDisease = false;
           this.city = res.name;
        },
        refreshAllData:function(cityVal){
        	 var vm = this;
        	 cityVal = parseInt(cityVal)
        	 switch(cityVal){
				case 0: vm.jsonUrl = "../../../dataJson/jumingHealthJson/高血压人群.json"; break;//贵港市
				case 26531: vm.jsonUrl = "../../../dataJson/jumingHealthJson/港北区.json"; break;//港北区
				case 25634: vm.jsonUrl = "../../../dataJson/jumingHealthJson/港南区.json";break;//港南区
				case 113485: vm.jsonUrl = "../../../dataJson/jumingHealthJson/桂平市.json"; break;//桂平市
				case 74128: vm.jsonUrl = "../../../dataJson/jumingHealthJson/平南县.json"; break;//平南县
				case 12587:vm.jsonUrl = "../../../dataJson/jumingHealthJson/覃塘区.json"; break;//覃塘区
				default:break;
			}
           vm.getJsonData();
        },
		skipClick:function(){
			console.log(222)
@@ -99,22 +192,17 @@ new Vue({
		}
    },
    watch:{
    	jsonData:function(data){
    		this.jsonData = data;
		},
		city:function(value){
			var that =this;
			that.lineHeightIndex =value;
			// debugger
            this.town.map(function(v,i){
                if(v.townName == value) {
					that.refreshAllData(v.result);
                  
                  
			var vm =this;
			vm.lineHeightIndex =value;
			this.town.map(function(v,i){
                if(v.name == value) {
					vm.cityVal = v.id;
                }
            })
		
			vm.isClickMap = true;
    		vm.isClickDisease = false;
			vm.initData();
		}
    }
});

page/bigData/js/medical.js

@@ -1,201 +1,309 @@
new Vue({
	el: '#app',
	data: {     
        city:'贵港市',
        town: [
            {
                "townName": "贵港市",
                "result": "0"
            },
            {
                "townName": "港北区",
                "result": "26531"
            },
            {
                "townName": "港南区",
                "result": "25634"
            },
            {
                "townName": "桂平市",
                "result": "113485"
            },
            {
                "townName": "平南县",
                "result": "74128"
            },
            {
                "townName": "覃塘区",
                "result": "12587"
            },
        ],
        timeType:'1',//时间过滤条件  1是上月  2是半年
        leftData1:{},  //左边数据块1
        leftData2:{}, //左边数据块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,
	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.allData = this.newObj(bigData);
       this.initData()
    },
    methods: {
        initData:function(){
            
            this.setLeftChart1();
            this.setLeftChart2();
            this.setRightChart1();
            this.setRightChart2();
            this.setTable1();
            this.setTable2();
            this.setleftData1();
            this.setYesterDay();
            this.setMapData();
        },
        setleftData1:function(){
            var options = null;
            if(this.timeType == 1){
               options= this.newObj(this.allData['上月']);         
                
            }
            else{
                options= this.newObj(this.allData['本年'])
            }
            this.setFormater(options);
            this.leftData1 =  options;
        },
        setYesterDay:function(){
            var options = null;
            options= this.newObj(this.allData['昨日数据'])
            this.setFormater(options);
            this.yesterdayData =  options;
        
        },
        setLeftChart1:function(){
           var options =this.allData['门诊人次月趋势'];
           options.grid= {
                top: '70',
                left: '75',
                bottom:'40'
            };
            options.yAxis[1].show =true;
            options.tooltip.formatter=  '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%";
            options.yAxis[0].axisLabel.fontSize='14'
            options.yAxis[1].axisLabel.fontSize='14'
            options.xAxis[0].axisLabel.fontSize='14'
           this.leftChart1 = options
        },
        setLeftChart2:function(){
           var options =this.allData['住院人次月趋势'];
           options.grid={
			top: '70',
            left: '70',
            bottom:'40'
		};
        options.yAxis[1].show =true;
        options.tooltip.formatter=  '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%";
        options.yAxis[0].axisLabel.fontSize='14'
        options.yAxis[1].axisLabel.fontSize='14'
        options.xAxis[0].axisLabel.fontSize='14'
           this.leftChart2 = options
        },
        setMapData:function(){
            var options =this.allData['各区县服务患者数'];
            this.mapData ={data:options,index:this.lineHeightIndex}  ;       
        },
        setRightChart1:function(){
           var options =this.allData['门诊分类别月趋势'];
           options.grid={
			top: '80',
			left: '80',
			bottom: '30'
        }
        options.yAxis[1].show =true;
        options.yAxis[0].axisLabel.fontSize='14'
        options.yAxis[1].axisLabel.fontSize='14'
        options.xAxis[0].axisLabel.fontSize='14'
           this.rightChart1= options
        },
        setRightChart2:function(){
           var options =this.allData['住院平均日数月趋势'];
           options.yAxis[1].show = true;
           options.tooltip.formatter=  '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%";
           options.yAxis[0].axisLabel.fontSize='14'
           options.yAxis[1].axisLabel.fontSize='14'
           options.xAxis[0].axisLabel.fontSize='14'
           this.rightChart2= options
        },
        setTable1:function(){
            var options =this.allData['门急诊服务情况'];
		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];
            this.tableData1= options
        },
        setTable2:function(){
            var options =this.allData['住院服务情况'];
				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;
            this.tableData2= options
        },
        setCity(item){
            this.city = item.townName;
   
           
        },
        setTimeStr(v){
            this.timeType = v;
            this.setleftData1()
        },
        setFormater:function(obj){
            for(var c in obj){
                obj[c] =toThousands(obj[c])
            }
        },
        newObj:function(obj){
            return JSON.parse(JSON.stringify(obj))
        },
        clickMap:function(res){
            this.city = res.name;
        },
        skipClick:function(){
		},
		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.town.map(function(v,i){
                if(v.townName == value) {                
                    switch(i){
                        case 0:that.allData = that.newObj(bigData);break;
                        case 1:that.allData = that.newObj(bigData2);break;
                        case 2:that.allData = that.newObj(bigData3);break;
                        case 3:that.allData = that.newObj(bigData4);break;
                        case 4:that.allData = that.newObj(bigData5);break;
                        case 5:that.allData = that.newObj(bigData5);break;
                    }
                }
            })
            this.initData()  
	},
	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()
	if(!str) return
	str = parseInt(str);
	if(typeof(str) == 'number') str = str.toString()
	var newStr = "";
	var count = 0;

page/bigData/js/medicalCharts.js

@@ -0,0 +1,617 @@
var fontSize = 0.0067 * window.screen.width;//字体13（默认）
var fontSize1 = 0.0057 * window.screen.width;//字体11（默认）
var fontSize2 = 0.00625 * window.screen.width;//字体12（默认）
var leftChart1DataFormat = function(options) {
	var xAxisData = _.map(options.xAxis[0].data, function(item, idx) {
		item = parseInt(item.substring(5, 7)) + "月";
		return item;
	});
	var series0data = options.series[0].data  || [];
	var series1data = options.series[1].data || [];
	var option = {
		"title": {
			"text": "门诊人次月趋势",
			"x": "center",
			textStyle: {
				color: '#b5e1fc',
				fontSize: 16,
				fontWeight: 'bold'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#fff'
				}
			},
			formatter: '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%"
		},
		"grid": {
			top: '70',
			left: '75',
			bottom: '40'
		},
		legend: {
			data: ['门诊人次', '环比'],
			textStyle: {
				color: '#b5e1fc'
			},
			top: '40'
		},
		xAxis: [{
			type: 'category',
			data: xAxisData,
			axisPointer: {
				type: 'shadow'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#095f8e'
				}
			},
			axisLabel: {
				color: '#b5e1fc',
				fontSize: fontSize
			}
		}],
		yAxis: [{
				type: 'value',
				name: '门诊人次',
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e'
					}
				},
				axisLabel: {
					color: '#b5e1fc',
					fontSize: fontSize
				}
			},
			{
				type: 'value',
				name: '环比',
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false // 不显示坐标轴刻度
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e' // 坐标轴轴线颜色
					}
				},
				axisLabel: {
					color: '#b5e1fc', // 坐标轴刻度标签文本颜色
					fontSize: fontSize
				},
				show: true
			}
		],
		series: [{
				name: '门诊人次',
				type: 'bar',
				"data": series0data,
				barWidth: 20,
				label: {
					normal: {
						show: true,
						position: 'top', // 在柱状图上方显示
						color: '#fff' // 柱状图上方显示的数值颜色
					}
				},
				itemStyle: {
					barBorderRadius: [8, 8, 0, 0],
					color: '#00e6f3'
				}
			},
			{
				name: '环比',
				type: 'line',
				yAxisIndex: 1,
				"data": series1data,
				itemStyle: {
					color: '#03fa6d'
				},
				markLine:{
                    data:[
                        {yAxis: 0, name: '环比'}
                    ],
                    label:{
                        show: true,
                        position: 'middle'
                    },
                    lineStyle:{
                        color: '#ffffff'
                    }
                }
			}
		]
	}
	return option;
},
leftChart2DataFormat = function(options){
	var xAxisData = _.map(options.xAxis[0].data, function(item, idx) {
		item = parseInt(item.substring(5, 7)) + "月";
		return item;
	});
	var series0data = options.series[0].data  || [];;
	var series1data = options.series[1].data  || [];;
	var option = {
		"title": {
			"text": "住院人次月趋势",
			"x": "center",
			textStyle: {
				color: '#b5e1fc',
				fontSize: 16,
				fontWeight: 'bold'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#fff'
				}
			}
		},
		"grid": {
			top: '70',
			left: '70',
			bottom: '40'
		},
		legend: {
			data: ['住院人次', '环比'],
			textStyle: {
				color: '#b5e1fc'
			},
			top: '40'
		},
		xAxis: [{
			type: 'category',
			data: xAxisData,
			axisPointer: {
				type: 'shadow'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#095f8e'
				}
			},
			axisLabel: {
				color: '#b5e1fc',
				fontSize: fontSize
			}
		}],
		yAxis: [{
				type: 'value',
				name: '住院人次',
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e'
					}
				},
				axisLabel: {
					color: '#b5e1fc',
					fontSize: fontSize
				}
			},
			{
				type: 'value',
				name: '环比',
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false // 不显示坐标轴刻度
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e' // 坐标轴轴线颜色
					}
				},
				axisLabel: {
					color: '#b5e1fc', // 坐标轴刻度标签文本颜色
					fontSize: fontSize
				},
				show:true
			}
		],
		series: [{
				name: '住院人次',
				type: 'bar',
				"data": series0data,
				barWidth: 20,
				label: {
					normal: {
						show: true,
						position: 'top', // 在柱状图上方显示
						color: '#fff' // 柱状图上方显示的数值颜色
					}
				},
				itemStyle: {
					barBorderRadius: [8, 8, 0, 0],
					color: '#ff616f'
				}
			},
			{
				name: '环比',
				type: 'line',
				yAxisIndex: 1,
				"data": series1data,
				itemStyle: {
					color: '#03fa6d'
				},
				markLine:{
                    data:[
                        {yAxis: 0, name: '环比'}
                    ],
                    label:{
                        show: true,
                        position: 'middle'
                    },
                    lineStyle:{
                        color: '#ffffff'
                    }
                }
			}
		]
	}
	return option;
},
rightChart1DataFormat = function(options){
	var xAxisData = _.map(options.xAxis[0].data, function(item, idx) {
		item = parseInt(item.substring(5, 7)) + "月";
		return item;
	});
	var series0data = options.series[0].data || [];
	var series1data = options.series[1].data || [];
	var series2data = options.series[2].data || [];
	var series3data = options.series[3].data || []
	series2data = _.map(series2data,function(item,idx){
		return parseFloat(item)
	})
	console.error(JSON.stringify(series2data))
	var option = {
		"title": {
			"text": "门诊分类别月趋势",
			"x": "center",
			textStyle: {
				color: '#b5e1fc',
				fontSize: 16,
				fontWeight: 'bold'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#fff'
				}
			},
			formatter: function(value){
				var resStr = "";
				_.map(value,function(item,idx){
					if(idx==0){
						resStr+=item.axisValue+" <br /> ";
					}
					resStr+=item.seriesName+":"+item.data;
					if(idx==2 || idx==3){//环比值加%
						if(item.data!="--"){
							resStr+="%";
						}
					}
					resStr+=" <br /> ";
				})
				return resStr;
			}
		},
		"grid":{
			top: '80',
			left: '60',
			bottom: '30',
			right:'60'
		},
		legend: {
			data: ['普通号', '专家号', '普通号环比', '专家号环比'],
			textStyle: {
				color: '#b5e1fc'
			},
			top: '30',
			itemWidth: 10
		},
		xAxis: [{
			type: 'category',
			data: xAxisData,
			axisPointer: {
				type: 'shadow'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#095f8e'
				}
			},
			axisLabel: {
				color: '#b5e1fc',
				fontSize: fontSize
			}
		}],
		yAxis: [{
				type: 'value',
				name: '人次',
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e'
					}
				},
				axisLabel: {
					color: '#b5e1fc',
					fontSize: fontSize2
				},
				splitNumber: 2
			},
			{
				type: 'value',
				name: '环比',
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false // 不显示坐标轴刻度
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e' // 坐标轴轴线颜色
					}
				},
				axisLabel: {
					color: '#b5e1fc', // 坐标轴刻度标签文本颜色
					fontSize: fontSize2
				},
				show:true,
				splitNumber: 4
			}
		],
		series: [{
				name: '普通号',
				type: 'bar',
				"data": series0data,
				barWidth: 20,
				label: {
					normal: {
						show: true,
						position: 'top', // 在柱状图上方显示
						color: '#fff', // 柱状图上方显示的数值颜色
						fontSize: fontSize1
					}
				},
				itemStyle: {
					barBorderRadius: [8, 8, 0, 0],
					color: '#00e6f3'
				}
			},
			{
				name: '专家号',
				type: 'bar',
				"data": series1data,
				barWidth: 20,
				label: {
					normal: {
						show: true,
						position: 'top', // 在柱状图上方显示
						color: '#fff', // 柱状图上方显示的数值颜色
						fontSize: fontSize1
					}
				},
				itemStyle: {
					barBorderRadius: [8, 8, 0, 0],
					color: '#fff71a'
				}
			},
			{
				name: '普通号环比',
				type: 'line',
				yAxisIndex: 1,
				"data": series2data,
				itemStyle: {
					color: '#03fa6d'
				}
			},
			{
				name: '专家号环比',
				type: 'line',
				yAxisIndex: 1,
				"data": series3data,
				itemStyle: {
					color: '#ff616f'
				},
				markLine:{
                    data:[
                        {yAxis: 0, name: '环比'}
                    ],
                    label:{
                        show: true,
                        position: 'middle'
                    },
                    lineStyle:{
                        color: '#ffffff'
                    }
                }
			},
		]
	}
	return option;
},
rightChart2DataFormat = function(options){
	var xAxisData = _.map(options.xAxis[0].data, function(item, idx) {
		item = parseInt(item.substring(5, 7)) + "月";
		return item;
	});
	var series0data = options.series[0].data  || [];;
	var series1data = options.series[1].data  || [];;
	var option = {
		"title": {
			"text": "住院平均日数月趋势",
			"x": "center",
			textStyle: {
				color: '#b5e1fc',
				fontSize: 16,
				fontWeight: 'bold'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#fff'
				}
			},
			formatter:'{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%"
		},
		"grid": {
			top: '70',
			left: '60',
			bottom: '30'
		},
		legend: {
			data: ['住院平均床日数', '环比'],
			textStyle: {
				color: '#b5e1fc'
			},
			top: '30'
		},
		xAxis: [{
			type: 'category',
			data: xAxisData,
			axisPointer: {
				type: 'shadow'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#095f8e'
				}
			},
			axisLabel: {
				color: '#b5e1fc',
				fontSize: fontSize
			}
		}],
		yAxis: [{
				type: 'value',
				name: '天',
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e'
					}
				},
				axisLabel: {
					color: '#b5e1fc',
					fontSize: fontSize2
				},
				splitNumber: 2
			},
			{
				type: 'value',
				name: '环比',
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false // 不显示坐标轴刻度
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e' // 坐标轴轴线颜色
					}
				},
				axisLabel: {
					color: '#b5e1fc', // 坐标轴刻度标签文本颜色
					fontSize: fontSize2
				},
				show:true,
				splitNumber: 4
			}
		],
		series: [{
				name: '住院平均床日数',
				type: 'bar',
				"data": series0data,
				barWidth: 20,
				label: {
					normal: {
						show: true,
						position: 'top', // 在柱状图上方显示
						color: '#fff' // 柱状图上方显示的数值颜色
					}
				},
				itemStyle: {
					barBorderRadius: [8, 8, 0, 0],
					color: '#00e6f3'
				}
			},
			{
				name: '环比',
				type: 'line',
				yAxisIndex: 1,
				"data": series1data,
				itemStyle: {
					color: '#03fa6d'
				},
				markLine:{
                    data:[
                        {yAxis: 0, name: '环比'}
                    ],
                    label:{
                        show: true,
                        position: 'middle'
                    },
                    lineStyle:{
                        color: '#ffffff'
                    }
                }
			}
		]
	}
	return option;
}