wzx
/
MakeVideo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
							<html>
<head>
    <meta charset="utf-8">
    <title id="title">心率展示</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/func.js"></script>
    <script src="js/fileinfo.js"></script>
    <script src="js/userinfo.js"></script>
    <script src="js/cle.js"></script>
    <script src="js/dealchart.js"></script>
    <script src="js/dealcsv.js"></script>
</head>
<body>
    <input type="hidden" id="rowNum" value="0" />
    <input type="hidden" id="totalTime" value="0" />
    <input type="hidden" id="rsCount" value="0" />
    <input type="hidden" id="endFlag" value="0" />
    <div id="box">
        <!-- <div id="title">运动强度 -- <span id="spIntensityLevelString"></span> [<span id="spIntensity"></span>]</div> -->
        <div id="title">运动强度 ── <span id="spIntensityLevelString"></span></div>
        <div id="content">
            <div id="areaHr" class="circle">
                <div id="hrIco"><img src="img/heart.svg" /></div>
                <div id="hrValue" class="">--</div>
            </div>
            <div id="areaChart"></div>
        </div>   
    </div>
</body>
</html>

<script>
    var param_f = getQueryParam('f');
    var filesNum = fileInfo.length;
    var fileId = 0;
    var file = '';
    var filePath = '';
    var filesSuffix = '.csv';   //文件后缀名
    var filePreUrl = 'http://localdata/csv/';
    var name = '';
    
    $(document).ready(function(){
        if (param_f == '')
            param_f = 0;
        
        if (param_f >= 0 && param_f <= filesNum) {
            fileId = param_f;
            name = fileInfo[fileId].name;
            file = fileInfo[fileId].file;
        }

        if (name != '' && file != '') {
            filePath = filePreUrl + file + filesSuffix;
            $("#title").text(file);

            setBaseInfo(userInfo[name].age, userInfo[name].sex, userInfo[name].weight, userInfo[name].basehr);
            
            console.log("file: " + file);
            console.log("name: " + name);

            csvInit();
            chartInit();
            loadCsvFile(filePath);
        }
        else {
            alert('参数错误！');
            return;
        }
    });
</script>

<style>
    .slowJump {
        animation: moveAct 3s infinite;
        -webkit-animation: moveAct 3s infinite;
        /*Safari and Chrome*/
        animation-direction: alternate;
        /*轮流反向播放动画。*/
        animation-timing-function: ease-in-out;
        /*动画的速度曲线*/
        /* Safari 和 Chrome */
        -webkit-animation-direction: alternate;
        /*轮流反向播放动画。*/
        -webkit-animation-timing-function: ease-in-out;
        /*动画的速度曲线*/
    }

    .normalJump {
        animation: moveAct 2s infinite;
        -webkit-animation: moveAct 2s infinite;
        /*Safari and Chrome*/
        animation-direction: alternate;
        /*轮流反向播放动画。*/
        animation-timing-function: ease-in-out;
        /*动画的速度曲线*/
        /* Safari 和 Chrome */
        -webkit-animation-direction: alternate;
        /*轮流反向播放动画。*/
        -webkit-animation-timing-function: ease-in-out;
        /*动画的速度曲线*/
    }

    .fastJump {
        animation: moveAct 1s infinite;
        -webkit-animation: moveAct 1s infinite;
        /*Safari and Chrome*/
        animation-direction: alternate;
        /*轮流反向播放动画。*/
        animation-timing-function: ease-in-out;
        /*动画的速度曲线*/
        /* Safari 和 Chrome */
        -webkit-animation-direction: alternate;
        /*轮流反向播放动画。*/
        -webkit-animation-timing-function: ease-in-out;
        /*动画的速度曲线*/
    }

    @keyframes moveAct {
        0% {
            transform: scale(1);
            /*开始为原始大小*/
        }

        25% {
            transform: scale(1.1);
            /*放大1.1倍*/
        }

        50% {
            transform: scale(1);
        }

        75% {
            transform: scale(1.1);
        }
    }

    @-webkit-keyframes moveAct

    /*Safari and Chrome*/
        {
        0% {
            transform: scale(1);
            /*开始为原始大小*/
        }

        25% {
            transform: scale(1.1);
            /*放大1.1倍*/
        }

        50% {
            transform: scale(1);
        }

        75% {
            transform: scale(1.1);
        }
    }

    body {
        display: flex;
        /*flex 布局*/
        align-items: center;
        /*实现垂直居中*/
        justify-content: center;
        /*实现水平居中*/
        /* background-color: #808080; */
        background-color: #5feb8c;
        overflow: hidden;
        margin: 0 0;
        /* display: block; */
    }

    #box {
        width: 40rem;
        height: 30rem;
        border: 5px solid white;
        /* margin: 0 auto; */
    }

    #title {
        width: 100%;
        height: 20%;
        background-color: #ffffff;
        font-family: "hei";
        font-weight: 550;
        text-align: center;
        line-height: 6rem;
        font-size: 3rem;
        letter-spacing: 0.4rem;
    }

    #content {
        margin: 0 auto;
        height: 80%;
    }

    #areaHr {
        margin: 0 auto;
        height: 65%;
        background-color: #028FE1;
        text-align: center;
    }

    #areaHr.circle {
        border: 3px solid white;
        border-radius: 50%;
        width: 220px;
        height: 220px;
        /* 宽度和高度需要相等 */

        margin-top: 1.2rem;
    }

    #hrIco img {
        width: 3rem;
        margin-top: 2.2rem;
    }

    #hrValue {
        font-size: 5rem;
        color: white;
        font-family: "Arial Black";
        margin-top: -0.5rem;
        /* font-weight: bold; */
    }

    #areaChart {
        margin: 0 auto;
        height: 37%;
    }
</style>