yaorongkeji
/
web-work


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>耀荣康健</title>
    <link rel="stylesheet" type="text/css" href="/analysis/css/styles.css">
    <link rel="stylesheet" type="text/css" href="/analysis/js/layui/css/layui.css">
    <script src="/analysis/js/jquery-3.2.1.min.js"></script>
    <script src="/analysis/js/layer.js"></script>
    <script src="/analysis/js/timeUtils.js"></script>
    <script src="/analysis/js/chart.js"></script>
    <script src="/analysis/js/laydate.js"></script>
</head>
<body>
<div style="margin: 0 auto; height: 100%; width: 100%; text-align: center">
    <div style="display: flex; width: 100%; height: 112px; align-items: center; justify-content: center;background-color: #0044CB; color:#ffffff">
        <div style="width: 60%; display: flex; height: 100%; align-items: center">
            <a href="/analysis/index.html">
                <div style="width:50%; float: left; text-align: left"><img src="/analysis/img/LOGO.png"></div>
            </a>
            <div style="width:50%;float: right; text-align: right">
                <!--                <a href="/index.html" style="text-decoration: none; color: #ffffff; font-size: 24px"><span>主页</span></a>-->
                <!--                <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>-->
                <!--                <a href="/analysis.html" style="text-decoration: none; color: #ffffff; font-size: 24px"> <span>认知测试</span></a>-->
            </div>
        </div>
    </div>
    <div style="width: 100%; height: 730px; display: flex; justify-content: center; flex-direction: column">
        <div style="width: 100%;display: flex; justify-content: center; align-items: center">
            <div id="dateRange">
                <input type="text" id="sdate" style="width: 200px; height: 20px; color: #666666">
                &nbsp;&nbsp;
                <input type="text" id="edate" style="width: 200px; height: 20px; color: #666666">
                &nbsp;&nbsp;
            </div>
            <a href="javascript:search(null)" style="color:white;width:70px;height:30px;line-height: 30px;
background-image: url('/analysis/img/btnBg.png'); background-repeat: no-repeat;background-size: cover;background-position: center;background-size: 100% 100%;
">查询</a>
        </div>
        <div>&nbsp;</div>
        <div style="width: 100%;display: flex; justify-content: center; align-items: center">
            <div style="width: 50%">
                <canvas id="myChart"></canvas>
            </div>
        </div>
    </div>
    <!--    <div style="width:100%; height:50px; display: flex; align-items: center; justify-content: center">-->
    <!--        <div id="dateRange" style=" display: flex; justify-content: center; align-items: center">-->
    <!--            <input type="text" id="sdate" style="width: 200px; height: 20px; color: #666666">-->
    <!--            &nbsp;&nbsp;-->
    <!--            <input type="text" id="edate" style="width: 200px; height: 20px; color: #666666">-->
    <!--            &nbsp;&nbsp;-->
    <!--        </div>-->
    <!--&lt;!&ndash;        <button style="color:white;width:100px;height:30px;background-color: #3155C5; border: 0"&ndash;&gt;-->
    <!--&lt;!&ndash;                onclick="javascript:getReport(null)">查询</button>&ndash;&gt;-->
    <!--        <a href="javascript:getReport(null)" style="color:white;width:70px;height:30px;line-height: 30px;-->
    <!--background-image: url('/img/btnBg.png'); background-repeat: no-repeat;background-size: cover;background-position: center;background-size: 100% 100%;-->
    <!--">查询</a>-->
    <!--    </div>-->
    <!--    <div style="width:100%; height:660px; display: flex; align-items: center; justify-content: center">-->
    <!--        <div style="width: 50%">-->
    <!--            <canvas id="myChart"></canvas>-->
    <!--        </div>-->
    <!--    </div>-->
    <div style="font-size:14px; height: 98px; color: #999999; display: flex;
    align-items: center; justify-content: center; background: url(/analysis/img/d97f28a59f20114dad3adbeb0dab456f.png) 100% no-repeat;">
        地址:&nbsp;北京市朝阳区东四环中路41号嘉泰国际A座16层1619室&nbsp;&nbsp;&nbsp;&nbsp;联系电话:400-086-1638<br/>
        湘ICP备2024059687号-3
    </div>
</div>

<script>
    function search() {
        currPage = 1
        checkLogin()
    }

    function checkLogin() {
        $.ajax({
            url: '/analysis/login/checkLogin',
            type: 'POST',
            dataType: 'json',
            success: function (res) {
                // console.log('成功:', res.code);
                if (res.code == 0) {
                    // showReport(res.data)
                    // phone = res.data.phone
                    getReport(res.data.phone)
                } else {
                    isLogin = false
                    LAYER_ID = layer.open({
                        // icon: 2,
                        type: 2,
                        title: ["请先登录", "font-size:18px"],
                        // title: false,
                        content: '/analysis/login.html',
                        scrollbar: false,
                        area: ['800px', '500px'],
                        // offset:'100px',
                        anim: 0,
                        closeBtn: 0
                    });
                }
            },
            error: function (xhr, status, error) {
                console.error('错误:', error);
                layer.alert("服务器繁忙，请稍后重试！", {icon: 2});
            }
        });
    }

    function afterLogin(data) {
        getReport(data.phone)
    }

    function getReport(phone) {
        const param = {"phone": phone, "sdate": $("#sdate").val(), "edate": $("#edate").val()}
        $.ajax({
            url: '/analysis/detect/report',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(param),
            success: function (res) {
                if (res.code == 0) {
                    const labels = []
                    const data1 = []
                    const data2 = []
                    for (let i = 0; i < res.data.length; i++) {
                        // alert(res.data[i].create_time)
                        const tt = new Date(res.data[i].create_time)
                        labels.push(tt.format("MM月dd日hh时mm分"))
                        data1.push(res.data[i].score)
                        data2.push(res.data[i].ave_time)
                    }
                    if ((null != myChat)) {
                        myChat.destroy()
                    }
                    showReport(labels, data1, data2)
                    // myChat.update()
                } else {
                    layer.alert(res.message, {icon: 2})
                }
            },
            error: function (xhr, status, error) {
                console.error('错误:', error);
                layer.alert("服务器繁忙，请稍后重试！", {icon: 2});
            }
        });
    }

    var myChat

    function showReport(labels, data1, data2) {
        const ctx = document.getElementById('myChart');
        myChat = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: '百分比正确率',
                        data: data1,
                        labels: "百分比正确率",
                        borderWidth: 1,
                        yAxisID: "y",
                    },
                    {
                        label: '平均反应速度',
                        data: data2,
                        labels: "平均反应速度",
                        borderWidth: 1,
                        yAxisID: "y1",
                    }
                ],
            },
            options: {
                responsive: true,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                stacked: false,
                plugins: {
                    title: {
                        display: true,
                        text: '早筛结果趋势图'
                    }
                },
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',

                        // grid line settings
                        grid: {
                            drawOnChartArea: false, // only want the grid lines for one axis to show up
                        },
                    },
                }
            },
        });
        // new Chart(ctx, {
        //     type: 'line',
        //     data: {
        //         // labels: ['2025年12月12日12点12分', '2025年12月12日12点13分', '2025年12月12日12点14分', '2025年12月12日12点15分', '2025年12月12日12点12分', '2025年12月12日12点12分', '2025年12月12日12点12分', '2025年12月12日12点12分', '2025年12月12日12点12分'],
        //         labels: ['12点12分', '12点13分', '12点14分', '12点15分', '12点12分', '12点12分', '12点12分', '12点12分', '12点12分'],
        //         datasets: [
        //             {
        //                 label: '1',
        //                 data: [12, 19, 3, 5, 2, 3],
        //                 labels: ['12分', '9分', '2分', '8分', '3分', '12分'],
        //                 borderWidth: 1
        //             },
        //             {
        //                 label: '2',
        //                 data: [1, 2, 3, 5, 2, 3],
        //                 labels: ['12分', '9分', '2分', '8分', '3分', '12分'],
        //                 borderWidth: 1
        //             }
        //         ],
        //         // datasets: [
        //         // }]
        //     },
        //     options: {
        //         scales: {
        //             y: {
        //                 beginAtZero: true
        //             }
        //         }
        //     }
        // });

    }

    $(function () {
        showReport([], [], [])
        // laydate.render({
        //     elem: '#timeRange', //指定元素
        //     type: "datetime",
        //     range: ['#test1','#test2']
        // });
        laydate.render({
            elem: '#dateRange',
            type: 'date',
            range: ['#sdate', '#edate']
        })
        const sdate = new Date()
        sdate.setDate(sdate.getDate() - 30)
        // alert(sdate.format("yyyy-MM-dd"))
        $("#sdate").val(sdate.format("yyyy-MM-dd"))
        $("#edate").val(new Date().format("yyyy-MM-dd"))
        checkLogin()
    })
</script>
</body>
</html>