shangshang
/
jili2


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
							<!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>学习记录</title>
    <style>
        body {
            margin: 10px;
            background: #F1F1F1;
        }
        .record-chart {
            width: 100%;
            height: 300px;
            background:rgba(255,255,255,1);
            border-radius:20px;
        }
        .record-list {
            margin-top: 10px;
            width: 100%;
            height: 100%;
            padding-bottom: 10px;
            background:rgba(255,255,255,1);
            border-radius:20px;
        }
        .record-title {
            display: inline-block;
            width: 124px;
            height: 31px;
            line-height: 31px;
            font-size: 18px;
            font-family:PingFang SC;
            font-weight: bold;
            color:rgba(51,51,51,1);
            padding: 5px 20px;
        }
        .record-list-data {
            margin: 10px 25px;
            padding: 0 10px 10px;
            border-left: 1px solid #DEDEDE;
        }
        .record-date {
            font-size:14px;
            font-weight:500;
            color:rgba(153,153,153,1);
        }
        .record-data {
            display: flex;
            margin: 5px 0;
            justify-content: space-between;
            align-items: center;
        }
        .record-data .doc-title {
            color: #666666;
        }
        .record-data .read-time {
            color: #2DC2DC;
        }
        .record-data .doc-title,.record-data .read-time{
            font-size: 16px;
        }
        .dian {
            width: 10px;
            height: 10px;
            background: #DEDEDE;
            display: block;
            border-radius: 5px;
            margin-left: -15px;
        }
        .no-data {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .no-data img {
            margin-top: 20px;
        }
        .no-data-text {
            font-size:16px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(153,153,153,1);
        }
    </style>
</head>
<body>
    <div class="record-chart">
        <div id="record-chart" style="height: 100%"></div>
    </div>
    <div id="record-data" class="record-list">
<!--        <div class="no-data">-->
<!--            <img src="/public/img/no_data.png" alt="" width="187" height="144">-->
<!--            <p class="no-data-text">啊哦！您今天还未开始学习哦！</p>-->
<!--        </div>-->
<!--        <span class="record-title">学习记录</span>-->
<!--        <div class="record-list-data">-->
<!--            <b class="dian"></b>-->
<!--            <span id="record-date" class="record-date"></span>-->
<!--            <div >-->
<!--                <div class="doc-title">《公司考勤制度》</div>-->
<!--                <div class="read-time">10分钟</div>-->
<!--            </div>-->
<!--        </div>-->
    </div>

<script src="/static/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/static/data/js/echarts.js"></script>
<script>
var days2;
function recordChart() {
    $.get('/h5/RecordData/recordChart',{token:'{$token}'},function (data) {
        if(data.code == 0){
            days2 = data.data.days2;
            if(data.data.days.length > 0){
                let dom = document.getElementById("record-chart");
                let myChart = echarts.init(dom);

                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: "{b}: {c}'"
                    },
                    grid: {
                        left: '-2%',
                        right: '4%',
                        bottom: '5%',
                        top:'15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.data.days,
                        axisLine: {
                            lineStyle: {
                                color: '#999999'
                            }
                        },
                        axisLabel: {},
                    },

                    yAxis: {
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'white'
                            }
                        },
                        axisLabel: {}
                    },
                    "dataZoom": [{
                        "show": false,
                        "height": 12,
                        "xAxisIndex": [
                            0
                        ],
                        bottom:'8%',
                        "start": 80,
                        "end": 100,
                        handleStyle:{
                            color:"#d3dee5",
                        },
                        textStyle:{
                            color:"#999999"
                        },
                        borderColor:"#90979c"
                    }, {
                        "type": "inside",
                        "show": false,
                        "height": 15,
                        "start": 1,
                        "end": 35
                    }],
                    series: [{
                        name: '学习时长',
                        type: 'bar',
                        barMaxWidth: '30',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#3595A5'
                                }, {
                                    offset: 1,
                                    color: '#3595A5'
                                }]),
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                color: '#999999',
                                formatter: "{c}'"
                            }
                        },
                        data: data.data.times
                    }]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

                myChart.on('click', function (params) {
                    recordList(days2[params.name]);
                });
            }
        }
    });
}

function recordList(day) {
    $.get('/h5/RecordData/recordList',{ day:day,token:'{$token}' },function (res) {
        if(res.code == 0) {
            let list = res.data;
            if (list.length > 0) {
                var str = '<span class="record-title">'+ '学习记录' + '</span>';
                str += '<div class="record-list-data">';
                str += '<b class="dian">' + '</b>';
                str += '<span id="record-date" class="record-date">'+'</span>';
                for (var i in list){
                    str += '<div class="record-data">';
                    str += '<div class="doc-title">' + list[i]['title'] + '</div>';
                    str += '<div class="read-time">' + list[i]['time']+ ' 分钟' + '</div>';
                    str += '</div>';
                }
                str += '</div>';
                $('#record-data').html(str);
                $('#record-date').html(list[0]['create_time']);
            } else {
                var data = '<div class="no-data">';
                data += '<img src="/static/no_data.png" alt="" width="187" height="144">';
                data += '<p class="no-data-text">' + '啊哦！您今天还未开始学习哦！' + '</p>';
                data += '</div>';
                $('#record-data').html(data);
            }
        }
    })
}
recordChart();
recordList();
</script>
</body>
</html>