app-big-data/component/patientInfo/chart-section.js

(function(){
    Vue.component('chart-section', {
        template: '<div class="panel-box4">\
                        <h4 class="c-b5e1fc c-f16 c-t-center">{{sectionTitle}}（数据展示）</h4>\
                        <div v-show="hasData" id="lineChart" style="height: calc(100% - 0.1rem);"></div>\
                        <div v-show="!hasData" class="no-result-panel">\
                            <div class="no-result-img">\
                                <img src="../images/wushuju_icon.png">\
                            </div>\
                            <div class="no-result-text">暂无相关体征数据</div>\
                        </div>\
                    </div>',
        props: ['patient'],
        data: function() {
            return {
               sectionTitle: "血压",
               hasData: true,
               fontSize: 0.007 * window.screen.width,
               dateType: 1
            }
        },
        mounted: function(){
            var vm = this;
            getChartInfo(vm);
        },
        methods: {}
    });
    
    function getChartInfo(vm){
        EventBus.$on('get-chart-data', function(arg){
            vm.dateType = arg.dateType ? arg.dateType : vm.dateType;
            var type = arg.type,
                gi_type = arg.gi_type,
                dateType = vm.dateType,
                startDate = getStartDate(dateType),
                endDate = getEndDate(),
                time = getTimeName(dateType);
            var params = {
                patient: vm.patient,
                type: type, //1-血糖,2-血压,3-体重,4-腰围
                gi_type: gi_type, //就餐类型
                time: time,
                begin: startDate,
                end: endDate
            };
            patientAPI.getChartData(params).then(function(res){
                if(res.status == 200){
                    //触发指标分析内容修改
                    EventBus.$emit("get-zhibiao-analysis", {content: res.data.content});
                    //触发指标统计值
                    EventBus.$emit("get-zhibiao-count", {total: res.data.total});
                    if(res.data.list.length == 0){
                        vm.hasData = false;
                        return false;
                    }else{
                        vm.hasData = true;
                    }
                    var xData = _.map(res.data.list, function(o){
                        return o.date;
                    });
                   
                    // 为echarts对象加载数据
                    if (type == 1) {
                        var xuetangDuring = ['','早餐前', '早餐后', '午餐前', '午餐后', '晚餐前', '晚餐后', '睡前'],
                            labelName = xuetangDuring[gi_type] + "血糖";
                        vm.sectionTitle = labelName;
                        var seriesData = getSeriesData(res.data.list, labelName, vm.fontSize);
                        var legent = {show: false};
                        drawLineChart(xData, seriesData, legent, vm.fontSize);
                    }
                    if (type == 2) {
                        var seriesData = getSeriesData2(res.data.list, vm.fontSize);
                        var legent = {
                            top: 'top',
                            data:['舒张压', '收缩压'],
                            textStyle: {
                                color: "#fff",
                                fontSize: vm.fontSize
                            }
                        };
                        drawLineChart(xData, seriesData, legent, vm.fontSize);
                    }
                }else{
                    console.log(res.msg);
                }
            });
        })
    }
    
    function getSeriesData(data, labelName, fontSize){
        //餐前血糖值: [7.0, 4.0]
        //餐后血糖值: [4.0, 11.1]
        var list = _.map(data, function(o){
            if(o.type == 1){ //血糖
                if(["1", "3", "5", "7"].indexOf(o.value2) > -1){ //餐前数据
                    return buildData(parseFloat(o.value1), 7.0, 4.0);
                }else{
                    return buildData(parseFloat(o.value1), 11.1, 4.0)
                }
            }else{
                return "";
            }
        });
        var obj = {
            name: labelName+'血糖',
            type: 'line',
            smooth: true,
            symbol: "circle",
            symbolSize: 0.005 * window.screen.width,
            data: list,
            itemStyle:{
                normal: {
                    borderWidth: 10,
                    color: '#03d95d',
                    lineStyle: { // 系列级个性化折线样式，横向渐变描边
                        borderWidth: 2,
                        color: '#CC66FF',
                        width: window.screen.width > 3000 ? 4 : 2
                    },
                    label:{
                        textStyle: {
                            fontSize: fontSize
                        }
                    }
                }
            }
        };
        
        return [obj];
    }
    
    function getSeriesData2(data, fontSize){
        //获取收缩压和舒张压的值
        //舒张压
        var list1 = _.map(data, function(o){
            return buildData(parseFloat(o.value1), 90, 60);
        });
        //收缩压
        var list2 = _.map(data, function(o){
            return buildData(parseFloat(o.value2), 140, 90)
        });
        
        return [{
            name: "舒张压",
            type: 'line',
            smooth: true,
            symbol: "circle",
            symbolSize: 0.005 * window.screen.width,
            data: list1,
            itemStyle:{
                normal: {
                    borderWidth: 10,
                    color: '#CC66FF',
                    lineStyle: { // 系列级个性化折线样式，横向渐变描边
                        borderWidth: 2,
                        width: window.screen.width > 3000 ? 4 : 2
                    },
                    label:{
                        textStyle: {
                            fontSize: fontSize
                        }
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        },{
            name: "收缩压",
            type: 'line',
            smooth: true,
            symbol: "circle",
            symbolSize: 0.005 * window.screen.width,
            data: list2,
            itemStyle:{
                normal: {
                    borderWidth: 10,
                    color: '#5dd1d2',
                    lineStyle: { // 系列级个性化折线样式，横向渐变描边
                        borderWidth: 2,
                        width: window.screen.width > 3000 ? 4 : 2
                    },
                    label:{
                        textStyle: {
                            fontSize: fontSize
                        }
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }]
    }
    
    function buildData(value, max, min) {
        if(value > 0 && value < min) {
            return {
                value: value,
                itemStyle: {
                    normal: {
                        color: '#fd9c0d'
                    }
                }
            }
        } else if(value > 0 && value > max) {
            return {
                value: value,
                itemStyle: {
                    normal: {
                        color: '#ff3803'
                    }
                }
            }
        }else{
            return {
                value: value,
                itemStyle:{
                    normal: {
                        color: "#0ad800"
                    }
                }
            }
        }
    }
    function drawLineChart(xData, seriesData, legent, fontSize){
        $("#lineChart").show();
        var lastIndex = xData.length % 10;
        if(xData.length >10 ){  
            var dataZoom_end = 100-(9/xData.length)*100;  
        }else{  
            var dataZoom_end = 0;  
        }
        var lineCharts = echarts.init(document.getElementById('lineChart'));
        var options = {
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    fontSize: fontSize,
                    color: '#0fa5f2'
                },
                backgroundColor: "#B5E1FC"
            },
            legend: legent,
            grid: {
                left: '5%',
                right: '5%',
                bottom: '15%',
                top: '12%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    interval:0,//横轴信息全部显示  
                    fontSize: fontSize,
                    formatter: function (value, index) {
                        return value.substr(5,5);
                    }
                },
                nameTextStyle: {
                    fontSize: fontSize
                },
                axisLine:{  
                    lineStyle:{  
                        color:'#b5e1fc',  
                        width:2  
                    }  
                },
                data: xData,
                splitLine: {
                    show: false
                },
            },
            yAxis: {
                type: 'value',
                axisPointer: {
                    snap: true
                },
                scale: true,
                minInterval: 1,
                boundaryGap: ['10%', '30%'],
                axisLine: {
                    "lineStyle": {
                        "color": "#b5e1fc",
                        "width": window.screen.width > 3000 ? 2 : 1
                    }
                },
                axisLabel:{
                    fontSize: fontSize
                },
                nameTextStyle: {
                    fontSize: fontSize
                },
            },
            dataZoom: [{//给x轴设置滚动条  
//              show: false,
                start: dataZoom_end,
                end: 100,
                type: 'slider',
                zoomLock: true,
            },{ //下面这个属性是内容区域配置
                start: dataZoom_end,
                end: 100,
                type: 'inside',
                zoomLock: true,
            }],
            series: seriesData
        };
        //删除旧的图标数据重新渲染
        $("#lineChart").removeAttr("_echarts_instance_");
        lineCharts.setOption(options);
        window.addEventListener("resize", function () {
            setTimeout(function () {
                lineCharts.resize();
            }, 500)
        });
    }
    
    function getStartDate(type){
        //type: 1-周, 2-月, 3-年
        var now = new Date(),
            endDate = new Date();
        switch(parseInt(type)){
            case 1:
                endDate.setDate(now.getDate()- 6);
                break;
            case 2:
                endDate.setMonth(now.getMonth() - 1);
                break;
            case 3:
                endDate.setFullYear(now.getFullYear() - 1);
                break;
        }
        return endDate.format("yyyy-MM-dd")+" 00:00:00";
    }
    
    function getEndDate(){
        var now = new Date();
        return now.format("yyyy-MM-dd")+ " 23:59:59";
    }
    
    function getTimeName(type){
        switch(parseInt(type)){
            case 1:
                return "一周";
                break;
            case 2:
                return "一月";
                break;
            case 3:
                return "一年";
                break;
        }
    }
})();