new Vue({
el: '#main',
data: {
alertData1:'',//总人数
alertData2:'',//新增人数
alertData3:'',//门诊人次
alertData4:'',//住院人次
alertChart1:'',//左边第一块表格
alertChart2:'',//右上第一块
alertChart3:'',//右上第二块
alertChart4:'',//右上第三块
alertChart5:'',//右下
bigData:'',//总数据
alertType:0,
alertTime:1,
type:'',
title:'',
},
mounted: function() {
var vm = this;
this.type = this.GetQueryString("type");
if(this.type == 0){
this.title = '高血压人群分布';
vm.bigData = bigData;
}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(){
var vm = this;
vm.alertData1 = vm.bigData['总人数'];
vm.alertData2 = vm.bigData['新增人数'];
vm.alertData3 = vm.bigData['门诊人次'];
vm.alertData4 = vm.bigData['住院人次'];
this.setAlertChart1(0);
this.setAlertChart2(0);
this.setAlertChart3(0);
this.setAlertChart4(0);
this.setAlertChart5(0,0);
console.log(vm.bigData)
},
setAlertChart1:function(type){
var t = '';
switch(type){
case 0:t = '全部';break;
case 1:t = '门诊';break;
case 2:t = '住院';break;
}
var options = this.bigData[t]['区县分布'];
options.series[0].label = {show: true,position: "right",color: '#b5e1fc'}
this.alertChart1 = options;
},
setAlertChart2:function(type){
var t = '';
switch(type){
case 0:t = '全部';break;
case 1:t = '门诊';break;
case 2:t = '住院';break;
}
var options = this.bigData[t]['年龄段分布'];
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(type){
var t = '';
switch(type){
case 0:t = '全部';break;
case 1:t = '门诊';break;
case 2:t = '住院';break;
}
var options = this.bigData[t]['性别分布'];
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(type){
var t = '';
switch(type){
case 0:t = '全部';break;
case 1:t = '门诊';break;
case 2:t = '住院';break;
}
var options = this.bigData[t]["并发症"];
options.series[0].label = {show: true,position: "right",color: '#b5e1fc'};
options.series[0].itemStyle.normal.color = '#FFF71A';
this.alertChart4 = options
},
setAlertChart5:function(type,time){
var t = '',m='';
switch(type){
case 0:t = '全部';break;
case 1:t = '门诊';break;
case 2:t = '住院';break;
}
switch(time){
case 0:m = '日';break;
case 1:m = '月';break;
case 2:m = '季';break;
case 3:m = '年';break;
}
var options = this.bigData[t]['新增患者趋势'][m];
options.tooltip = {
trigger: 'axis',
axisPointer: {
type : 'shadow'
},
formatter: '{b}
{a0}: {c0}
{a1}: {c1}' + "%"
}
options.series[0].itemStyle.color = '#FF606E';
this.alertChart5 = options
},
alertTitle:function(type){
this.alertTime = 1;
this.setAlertChart1(type);
this.setAlertChart2(type);
this.setAlertChart3(type);
this.setAlertChart4(type);
this.setAlertChart5(type,1);
this.alertType = type;
},
alertChart:function(time){
var type = this.alertType;
this.alertTime = time;
this.setAlertChart5(type,time);
},
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)
}
}
});
//数字格式化
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;
}