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

new Vue({
	el: '#app',
	data: {     
        city:'贵港市',
        town: [
            {
                "townName": "贵港市",
                "result": "0"
            },
            {
                "townName": "港北区",
                "result": "26531"
            },
            {
                "townName": "港南区",
                "result": "25634"
            },
            {
                "townName": "桂平市",
                "result": "113485"
            },
            {
                "townName": "平南县",
                "result": "74128"
            },
            {
                "townName": "覃塘区",
                "result": "12587"
            },
        ],
        timeType:'1',//时间过滤条件  1是上月  2是半年
        leftData1:{},  //左边数据块1
        leftData2:{}, //左边数据块2
        yesterdayData:{},
        leftChart1:null,   //左边的图表1
        leftChart2:null,    //左边的图表2
        rightChart1:null,    //右边边的图表1
        rightChart2:null,    //右边的图表2
        tableData1:null, //表格数据1
        tableData2:null, //表格数据2
        mapData:null,
        allData:null ,  //所有的数据  用来切换区县
        lineHeightIndex:null,
        skipShow:0,
	},
	mounted: function() {
        this.allData = this.newObj(bigData);
       this.initData()
    },
    methods: {
        initData:function(){
            
            this.setLeftChart1();
            this.setLeftChart2();
            this.setRightChart1();
            this.setRightChart2();
            this.setTable1();
            this.setTable2();
            this.setleftData1();
            this.setYesterDay();
            this.setMapData();
        },
        setleftData1:function(){
            var options = null;
            if(this.timeType == 1){
               options= this.newObj(this.allData['上月']);         
                
            }
            else{
                options= this.newObj(this.allData['本年'])
            }
            this.setFormater(options);
            this.leftData1 =  options;
        },
        setYesterDay:function(){
            var options = null;
            options= this.newObj(this.allData['昨日数据'])

            this.setFormater(options);
            this.yesterdayData =  options;
        
        },
        setLeftChart1:function(){
           var options =this.allData['门诊人次月趋势'];
           options.grid= {
                top: '70',
                left: '75'
            };
            options.yAxis[1].show =true;
            options.tooltip.formatter=  '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%";
           this.leftChart1 = options
        },
        setLeftChart2:function(){
           var options =this.allData['住院人次月趋势'];
           options.grid={
			top: '70',
			left: '70'
		};
        options.yAxis[1].show =true;
        options.tooltip.formatter=  '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%";
           this.leftChart2 = options
        },
        setMapData:function(){
            var options =this.allData['各区县服务患者数'];
            this.mapData ={data:options,index:this.lineHeightIndex}  ;       
        },
        setRightChart1:function(){
           var options =this.allData['门诊分类别月趋势'];
           options.grid={
			top: '80',
			left: '80',
			bottom: '30'
        }
        options.yAxis[1].show =true;
           this.rightChart1= options
        },
        setRightChart2:function(){
           var options =this.allData['住院平均日数月趋势'];
           options.yAxis[1].show = true;
           options.tooltip.formatter=  '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%";
           this.rightChart2= options
        },
        setTable1:function(){
            var options =this.allData['门急诊服务情况'];

            this.tableData1= options
        },
        setTable2:function(){
            var options =this.allData['住院服务情况'];

            this.tableData2= options
        },
        setCity(item){
            this.city = item.townName;
   
           
        },
        setTimeStr(v){
            this.timeType = v;
            this.setleftData1()
        },
        setFormater:function(obj){
            for(var c in obj){
                obj[c] =toThousands(obj[c])
            }
        },
        newObj:function(obj){
            return JSON.parse(JSON.stringify(obj))
        },
        clickMap:function(res){
            this.city = res.name;
        },
        skipClick:function(){
			console.log(222)
			this.skipShow == 0 ? this.skipShow = 1 : this.skipShow = 0
		}
    },
    watch: {
        city:function(value){

            var that =this;
            that.lineHeightIndex =value;
            this.town.map(function(v,i){
                if(v.townName == value) {                
                    switch(i){
                        case 0:that.allData = that.newObj(bigData);break;
                        case 1:that.allData = that.newObj(bigData2);break;
                        case 2:that.allData = that.newObj(bigData3);break;
                        case 3:that.allData = that.newObj(bigData4);break;
                        case 4:that.allData = that.newObj(bigData5);break;
                        case 5:that.allData = that.newObj(bigData5);break;
                    }
                }
            })
            this.initData()  

        }
    }
});
//数字格式化
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;
}