弹窗详情

js/api/http-request.js

@@ -8,7 +8,8 @@
	if(publish_version) { // 生产环境配置
		server = "http://jksr.srswjw.gov.cn:1235";
	} else { // 测试环境配置
		server = "http://192.168.131.104:9088"; // 测试环境
		server = "http://192.168.131.104:9088"; // 测试环境 周杰
		// server = "http://192.168.131.105:9088"; // 测试环境 兴旺
	}
	//保存userAgent
@@ -174,7 +175,8 @@
		},
		getJson:function(url,options){
			return httpGetJson(url,options)
		}
		},
		getReqPromise:getReqPromise
	}
	exports.httpRequest = httpRequest;

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;
  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,46 +49,52 @@ 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: 200px;
  height: .135417rem;
  background-color: #051f33;
  border: solid 1px #009dfe;
  margin-left: 15px;
  padding: 0;
  text-align: center;
  background-image: url("../images/icon_rili1.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.alert_centent .alert_people {
.alert_content .alert_people {
  padding-left: .260417rem;
  padding-right: .260417rem;
}
.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 {
@@ -111,6 +117,10 @@ body {
  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 .bottom {
  height: 1.380208rem;
  margin-top: .088542rem;
@@ -124,10 +134,46 @@ body {
  right: .078125rem;
  z-index: 5;
}
.alert_centent .alert_close {
.alert_content .alert_close {
  width: 50px;
  height: 50px;
  margin: 88px 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: 855px !important;
}

page/bigData/css/alert.less

@@ -1,50 +1,56 @@
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;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: 200px;
    height: .135417rem;
    background-color: #051f33;
    border: solid 1px #009dfe;
    margin-left: 15px;
    padding: 0;
    text-align: center;
    background-image: url("../images/icon_rili1.png");
    background-repeat: no-repeat;
    background-position: 10px center;
}
.alert_centent .alert_people{
.alert_content .alert_people{
    padding-left: .260417rem;padding-right: .260417rem;
}
.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;
@@ -69,6 +75,9 @@ body{
        .top{
            &>div{
                width: 1.510417rem;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");
                }
            }
        }
        .bottom{
@@ -80,6 +89,57 @@ body{
        }
    }
}
.alert_centent .alert_close{
.alert_content .alert_close{
    width: 50px;height: 50px;margin: 88px auto 0;display: block;
}
.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-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: 855px!important
}

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,125 @@
<!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="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,125 @@
<!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="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,103 @@
<!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="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,122 @@
<!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="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/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,371 @@
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',//年龄分布
        ],
        qushiMonth:'',
        qushiYear:'',
        firstDayYear: "", //本年第一天
		lastDayYear: "", //本年最后一天
		halfYearStartDate: "", //近半年开始时间
		halfYearEndDate: "", //近半年结束时间
        yesterdayDate:"",//昨天
        type:0
	},
	mounted: function() {
        var vm = this;
        this.formatDate2017();
        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';
                }
                if(endDate.month < 10){
                    vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(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 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+'eventType=0'}},//门诊,住院人次
                {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}},//疾病前五
                {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}},//年龄分布
            ]
            httpRequest.getReqPromises(reqUrl).then(function(datas) {
                console.log(datas);
                vm.alertData1 = datas[0].obj.VIEW_13_0015[0].HC_15_1006;
                vm.alertData2 = datas[1].obj.VIEW_13_0015[0].HC_15_1006;
                vm.alertData3 = datas[2].obj.VIEW_13_0016[0].HC_15_1003;
                vm.alertData4 = datas[2].obj.VIEW_13_0016[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.setAlertChart1(chart1);
                vm.setAlertChart2(chart6);
                vm.setAlertChart3(chart2);
                vm.setAlertChart4(chart3);
                vm.setAlertChart5(chart4);
            })
        },
        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%'];
            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 = '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);
            }
        },
        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 firstYearDate = new Date();
			firstYearDate.setDate(1);
			firstYearMonty = firstYearDate.setMonth(0);
			//近半年开始时间
			var date1 = new Date();
			date1.setMonth(date1.getMonth() - 6);
			var year1 = date1.getFullYear() - 1;
			var month1 = date1.getMonth() + 1;
			month1 = (month1 < 10 ? "0" + month1 : month1);
			//格式化结果
            this.firstDay = firstdate.format("yyyy-MM-dd");
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = enddate.format("yyyy-MM-dd");
            this.lastMonth = enddate.format("yyyy-MM");
            this.firstDayYear = firstYearDate.format("yyyy-MM-dd");
			this.lastDayYear = (new Date().getFullYear()-1) + "-12-31";
			this.halfYearStartDate = year1.toString() + '-' + month1.toString() + "-01";
			this.halfYearEndDate = this.getCurrentMonthLast2017();
			this.yesterdayDate = this.getYesterday2017(-1, '-');
        },
		getCurrentMonthLast: function() {
			var date = new Date();
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth-1, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd");
		},
		getYesterday:function(num, str){
			var today = new Date();
		    var nowTime = today.getTime();
		    var ms = 24*3600*1000*num;
		    today.setTime(parseInt(nowTime + ms));
		    var oYear = today.getFullYear();
		    var oMoth = (today.getMonth() + 1).toString();
		    if (oMoth.length <= 1) oMoth = '0' + oMoth;
		    var oDay = today.getDate().toString();
		    if (oDay.length <= 1) oDay = '0' + oDay;
		    return oYear + str + oMoth + str + oDay;
		},
        formatDate2017: function() {
			//获取上个月第一天
			var firstdate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, 1);
			//获取上个月最后一天
			var date = new Date();
			var day = new Date(date.getFullYear()-1, date.getMonth(), 0).getDate();
			var enddate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, day);
			//获取本年第一天和最后一天
			var firstYearDate = new Date();
			firstYearDate.setFullYear(new Date().getFullYear()-1)
			firstYearDate.setDate(1);
			firstYearMonty = firstYearDate.setMonth(0);
			//近半年开始时间
			var date1 = new Date();
			date1.setMonth(date1.getMonth() - 6);
			var year1 = date1.getFullYear() - 1;
			var month1 = date1.getMonth() + 1;
			month1 = (month1 < 10 ? "0" + month1 : month1);
			//格式化结果
            this.firstDay = firstdate.format("yyyy-MM-dd");
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = enddate.format("yyyy-MM-dd");
            this.lastMonth = enddate.format("yyyy-MM");
			this.firstDayYear = firstYearDate.format("yyyy-MM-dd");
			this.lastDayYear = (new Date().getFullYear()-1) + "-12-31";
			this.halfYearStartDate = year1.toString() + '-' + month1.toString() + "-01";
			this.halfYearEndDate = this.getCurrentMonthLast2017();
			this.yesterdayDate = this.getYesterday2017(-1, '-');
        },
		getYesterday2017:function(num, str){
			var today = new Date();
		    var nowTime = today.getTime();
		    var ms = 24*3600*1000*num;
		    today.setTime(parseInt(nowTime + ms));
		    var oYear = today.getFullYear()-1;
		    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;
		},
		getCurrentMonthLast2017: function() {
			var date = new Date();
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear() - 1, nextMonth-1, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd");
        },
        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,372 @@
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',//年龄分布
        ],
        qushiMonth:'',
        qushiYear:'',
        firstDayYear: "", //本年第一天
		lastDayYear: "", //本年最后一天
		halfYearStartDate: "", //近半年开始时间
		halfYearEndDate: "", //近半年结束时间
        yesterdayDate:"",//昨天
        type:0
	},
	mounted: function() {
        var vm = this;
        this.formatDate2017();
        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';
                }
                if(endDate.month < 10){
                    vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(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 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+'eventType=0'}},//门诊,住院人次
                {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}},//疾病前五
                {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}},//年龄分布
            ]
            httpRequest.getReqPromises(reqUrl).then(function(datas) {          
                console.log(datas);
                vm.alertData1 = datas[0].obj.VIEW_13_0026[0].HC_15_1006;
                vm.alertData2 = datas[1].obj.VIEW_13_0026[0].HC_15_1006;
                vm.alertData3 = datas[2].obj.VIEW_13_0035[0].HC_15_1003; 
                vm.alertData4 = datas[2].obj.VIEW_13_0035[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.setAlertChart1(chart1);
                vm.setAlertChart2(chart6);
                vm.setAlertChart3(chart2);
                vm.setAlertChart4(chart3);
                vm.setAlertChart5(chart4);
            })
        },
        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%'];
            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 = '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){
            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);
            }
        },
        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 firstYearDate = new Date();
			firstYearDate.setDate(1);
			firstYearMonty = firstYearDate.setMonth(0);
			//近半年开始时间
			var date1 = new Date();
			date1.setMonth(date1.getMonth() - 6);
			var year1 = date1.getFullYear() - 1;
			var month1 = date1.getMonth() + 1;
			month1 = (month1 < 10 ? "0" + month1 : month1);
			//格式化结果
            this.firstDay = firstdate.format("yyyy-MM-dd");
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = enddate.format("yyyy-MM-dd");
            this.lastMonth = enddate.format("yyyy-MM");
            this.firstDayYear = firstYearDate.format("yyyy-MM-dd");
			this.lastDayYear = (new Date().getFullYear()-1) + "-12-31";
			this.halfYearStartDate = year1.toString() + '-' + month1.toString() + "-01";
			this.halfYearEndDate = this.getCurrentMonthLast2017();
			this.yesterdayDate = this.getYesterday2017(-1, '-');
        },
		getCurrentMonthLast: function() {
			var date = new Date();
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth-1, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd");
		},
		getYesterday:function(num, str){
			var today = new Date();
		    var nowTime = today.getTime();
		    var ms = 24*3600*1000*num;
		    today.setTime(parseInt(nowTime + ms));
		    var oYear = today.getFullYear();
		    var oMoth = (today.getMonth() + 1).toString();
		    if (oMoth.length <= 1) oMoth = '0' + oMoth;
		    var oDay = today.getDate().toString();
		    if (oDay.length <= 1) oDay = '0' + oDay;
		    return oYear + str + oMoth + str + oDay;
		},
        formatDate2017: function() {
			//获取上个月第一天
			var firstdate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, 1);
			//获取上个月最后一天
			var date = new Date();
			var day = new Date(date.getFullYear()-1, date.getMonth(), 0).getDate();
			var enddate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, day);
			//获取本年第一天和最后一天
			var firstYearDate = new Date();
			firstYearDate.setFullYear(new Date().getFullYear()-1)
			firstYearDate.setDate(1);
			firstYearMonty = firstYearDate.setMonth(0);
			//近半年开始时间
			var date1 = new Date();
			date1.setMonth(date1.getMonth() - 6);
			var year1 = date1.getFullYear() - 1;
			var month1 = date1.getMonth() + 1;
			month1 = (month1 < 10 ? "0" + month1 : month1);
			//格式化结果
            this.firstDay = firstdate.format("yyyy-MM-dd");
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = enddate.format("yyyy-MM-dd");
            this.lastMonth = enddate.format("yyyy-MM");
			this.firstDayYear = firstYearDate.format("yyyy-MM-dd");
			this.lastDayYear = (new Date().getFullYear()-1) + "-12-31";
			this.halfYearStartDate = year1.toString() + '-' + month1.toString() + "-01";
			this.halfYearEndDate = this.getCurrentMonthLast2017();
			this.yesterdayDate = this.getYesterday2017(-1, '-');
        },
		getYesterday2017:function(num, str){
			var today = new Date();
		    var nowTime = today.getTime();
		    var ms = 24*3600*1000*num;
		    today.setTime(parseInt(nowTime + ms));
		    var oYear = today.getFullYear()-1;
		    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;
		},
		getCurrentMonthLast2017: function() {
			var date = new Date();
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear() - 1, nextMonth-1, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd");
        },
        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,364 @@
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',//就诊年趋势
        ],
        qushiMonth:'',
        qushiYear:'',
        firstDayYear: "", //本年第一天
		lastDayYear: "", //本年最后一天
		halfYearStartDate: "", //近半年开始时间
		halfYearEndDate: "", //近半年结束时间
        yesterdayDate:"",//昨天
        type:0
	},
	mounted: function() {
        var vm = this;
        this.formatDate2017();
        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';
                }
                if(endDate.month < 10){
                    vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(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 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[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}},//疾病前五
                {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}},//老年人就诊趋势-年
            ]
            httpRequest.getReqPromises(reqUrl).then(function(datas) {
                console.log(datas);
                vm.alertData1 = datas[1].obj.VIEW_16_0006[0].HC_15_1003; //新增
                vm.alertData2 = datas[0].obj.VIEW_16_0001[0].HC_15_1006; //已生产人数
                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 = chart4;
                vm.qushiYear = chart5;
                console.log(chart5)
                vm.setAlertChart1(chart1);
                vm.setAlertChart2(chart2);
                vm.setAlertChart4(chart3);
                vm.setAlertChart5(chart4);
            })
        },
        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"];
            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){
            console.log(options)
            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);
            }
        },
        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 firstYearDate = new Date();
			firstYearDate.setDate(1);
			firstYearMonty = firstYearDate.setMonth(0);
			//近半年开始时间
			var date1 = new Date();
			date1.setMonth(date1.getMonth() - 6);
			var year1 = date1.getFullYear() - 1;
			var month1 = date1.getMonth() + 1;
			month1 = (month1 < 10 ? "0" + month1 : month1);
			//格式化结果
            this.firstDay = firstdate.format("yyyy-MM-dd");
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = enddate.format("yyyy-MM-dd");
            this.lastMonth = enddate.format("yyyy-MM");
            this.firstDayYear = firstYearDate.format("yyyy-MM-dd");
			this.lastDayYear = (new Date().getFullYear()-1) + "-12-31";
			this.halfYearStartDate = year1.toString() + '-' + month1.toString() + "-01";
			this.halfYearEndDate = this.getCurrentMonthLast2017();
			this.yesterdayDate = this.getYesterday2017(-1, '-');
        },
		getCurrentMonthLast: function() {
			var date = new Date();
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth-1, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd");
		},
		getYesterday:function(num, str){
			var today = new Date();
		    var nowTime = today.getTime();
		    var ms = 24*3600*1000*num;
		    today.setTime(parseInt(nowTime + ms));
		    var oYear = today.getFullYear();
		    var oMoth = (today.getMonth() + 1).toString();
		    if (oMoth.length <= 1) oMoth = '0' + oMoth;
		    var oDay = today.getDate().toString();
		    if (oDay.length <= 1) oDay = '0' + oDay;
		    return oYear + str + oMoth + str + oDay;
		},
        formatDate2017: function() {
			//获取上个月第一天
			var firstdate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, 1);
			//获取上个月最后一天
			var date = new Date();
			var day = new Date(date.getFullYear()-1, date.getMonth(), 0).getDate();
			var enddate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, day);
			//获取本年第一天和最后一天
			var firstYearDate = new Date();
			firstYearDate.setFullYear(new Date().getFullYear()-1)
			firstYearDate.setDate(1);
			firstYearMonty = firstYearDate.setMonth(0);
			//近半年开始时间
			var date1 = new Date();
			date1.setMonth(date1.getMonth() - 6);
			var year1 = date1.getFullYear() - 1;
			var month1 = date1.getMonth() + 1;
			month1 = (month1 < 10 ? "0" + month1 : month1);
			//格式化结果
            this.firstDay = firstdate.format("yyyy-MM-dd");
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = enddate.format("yyyy-MM-dd");
            this.lastMonth = enddate.format("yyyy-MM");
			this.firstDayYear = firstYearDate.format("yyyy-MM-dd");
			this.lastDayYear = (new Date().getFullYear()-1) + "-12-31";
			this.halfYearStartDate = year1.toString() + '-' + month1.toString() + "-01";
			this.halfYearEndDate = this.getCurrentMonthLast2017();
			this.yesterdayDate = this.getYesterday2017(-1, '-');
        },
		getYesterday2017:function(num, str){
			var today = new Date();
		    var nowTime = today.getTime();
		    var ms = 24*3600*1000*num;
		    today.setTime(parseInt(nowTime + ms));
		    var oYear = today.getFullYear()-1;
		    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;
		},
		getCurrentMonthLast2017: function() {
			var date = new Date();
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear() - 1, nextMonth-1, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd");
        },
        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,366 @@
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',//就诊年趋势
        ],
        qushiMonth:'',
        qushiYear:'',
        firstDayYear: "", //本年第一天
		lastDayYear: "", //本年最后一天
		halfYearStartDate: "", //近半年开始时间
		halfYearEndDate: "", //近半年结束时间
        yesterdayDate:"",//昨天
        type:0
	},
	mounted: function() {
        var vm = this;
        this.formatDate2017();
        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';
                }
                if(endDate.month < 10){
                    vm.lastDay = endDate.year+'-0'+endDate.month+'-'+vm.getLastDay(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 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+'eventType=0'}},//门诊,住院人次
                {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}},//疾病前五
                {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}},//老年人就诊趋势-年
            ]
            httpRequest.getReqPromises(reqUrl).then(function(datas) {
                console.log(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;
                vm.qushiMonth = chart4;
                vm.qushiYear = chart5;
                vm.setAlertChart1(chart1);
                vm.setAlertChart3(chart2);
                vm.setAlertChart4(chart3);
                vm.setAlertChart5(chart4);
            })
        },
        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"];
            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);
            }
        },
        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 firstYearDate = new Date();
			firstYearDate.setDate(1);
			firstYearMonty = firstYearDate.setMonth(0);
			//近半年开始时间
			var date1 = new Date();
			date1.setMonth(date1.getMonth() - 6);
			var year1 = date1.getFullYear() - 1;
			var month1 = date1.getMonth() + 1;
			month1 = (month1 < 10 ? "0" + month1 : month1);
			//格式化结果
            this.firstDay = firstdate.format("yyyy-MM-dd");
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = enddate.format("yyyy-MM-dd");
            this.lastMonth = enddate.format("yyyy-MM");
            this.firstDayYear = firstYearDate.format("yyyy-MM-dd");
			this.lastDayYear = (new Date().getFullYear()-1) + "-12-31";
			this.halfYearStartDate = year1.toString() + '-' + month1.toString() + "-01";
			this.halfYearEndDate = this.getCurrentMonthLast2017();
			this.yesterdayDate = this.getYesterday2017(-1, '-');
        },
		getCurrentMonthLast: function() {
			var date = new Date();
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth-1, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd");
		},
		getYesterday:function(num, str){
			var today = new Date();
		    var nowTime = today.getTime();
		    var ms = 24*3600*1000*num;
		    today.setTime(parseInt(nowTime + ms));
		    var oYear = today.getFullYear();
		    var oMoth = (today.getMonth() + 1).toString();
		    if (oMoth.length <= 1) oMoth = '0' + oMoth;
		    var oDay = today.getDate().toString();
		    if (oDay.length <= 1) oDay = '0' + oDay;
		    return oYear + str + oMoth + str + oDay;
		},
        formatDate2017: function() {
			//获取上个月第一天
			var firstdate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, 1);
			//获取上个月最后一天
			var date = new Date();
			var day = new Date(date.getFullYear()-1, date.getMonth(), 0).getDate();
			var enddate = new Date(new Date().getFullYear()-1, new Date().getMonth() - 1, day);
			//获取本年第一天和最后一天
			var firstYearDate = new Date();
			firstYearDate.setFullYear(new Date().getFullYear()-1)
			firstYearDate.setDate(1);
			firstYearMonty = firstYearDate.setMonth(0);
			//近半年开始时间
			var date1 = new Date();
			date1.setMonth(date1.getMonth() - 6);
			var year1 = date1.getFullYear() - 1;
			var month1 = date1.getMonth() + 1;
			month1 = (month1 < 10 ? "0" + month1 : month1);
			//格式化结果
            this.firstDay = firstdate.format("yyyy-MM-dd");
            this.firstMonth = firstdate.format("yyyy-MM");
            this.lastDay = enddate.format("yyyy-MM-dd");
            this.lastMonth = enddate.format("yyyy-MM");
			this.firstDayYear = firstYearDate.format("yyyy-MM-dd");
			this.lastDayYear = (new Date().getFullYear()-1) + "-12-31";
			this.halfYearStartDate = year1.toString() + '-' + month1.toString() + "-01";
			this.halfYearEndDate = this.getCurrentMonthLast2017();
			this.yesterdayDate = this.getYesterday2017(-1, '-');
        },
		getYesterday2017:function(num, str){
			var today = new Date();
		    var nowTime = today.getTime();
		    var ms = 24*3600*1000*num;
		    today.setTime(parseInt(nowTime + ms));
		    var oYear = today.getFullYear()-1;
		    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;
		},
		getCurrentMonthLast2017: function() {
			var date = new Date();
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear() - 1, nextMonth-1, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			return(new Date(nextMonthFirstDay - oneDay)).format("yyyy-MM-dd");
        },
        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/alertCharts.js

@@ -0,0 +1,389 @@
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 option =  {
        "title": {
            "text": title,
            "x": "center",
            "textStyle": {
                color: ['#b5e1fc']
            },
            "padding": [10, 0, 0, 0]
        },
        "tooltip": {
            "trigger": "item"
        },
        legend: {
            orient: 'vertical',
            // x: 'right',
            data: ['男', '女'],
            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){
    var title = options.title.text;
    var yAxisData = options.xAxis[0].data
    var xAxisData = options.series[0].data
    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
        },
        "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": xAxisData
        }, ]
    }
    return option
},
qushiChart = function(options){
    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'
        },
        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'
            }
        }],
        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 option =  {
        "title": {
            "text": title,
            "x": "center",
            "textStyle": {
                color: ['#b5e1fc']
            },
            "padding": [10, 0, 0, 0]
        },
        "tooltip": {
            "trigger": "item"
        },
        legend: {
            orient: 'vertical',
            data: ['0-6', '7-17', '18-40', '41-65', '> 65'],
            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
}