flyLong/online/src/page/mainpage.vue

<template>
    <div class="content">
        <div class="top" :style="{backgroundColor:bgColor}">
            <span class="watchState">{{watchText}}</span>
            <div class="toprow">
                <div class="lt">
                    <div class="activeLevel">
                        <div v-if="activeState">
                            <s>%</s>
                            <em>{{activeLevel}}</em>
                        </div>
                        <div v-else>
                            <s class="noValue">--</s>
                        </div>
                    </div>
                    <span>{{activeLevelText}}</span>
                </div>
                <div class="md">
                    <div class="headContainer">
                        <img src="../static/images/main/testhead.png"/>
                    </div>
                    <span class="username">
                        <em>{{username}}</em>
                    <img src="../static/images/main/male.png" height="60" width="60" v-if="sex == 1"/>
                    <img src="../static/images/main/female.png" height="60" width="60" v-if="sex == 2"/>
                    </span>
                </div>
                <div class="rt">
                    <div class="heartJump">
                        <div v-if="activeState">
                            <img src="../static/images/main/heart.png" height="74" width="86"/>
                            <em :class="[
                            {'normalJump':activeLevel > 30 &&  activeLevel <= 90},
                            {'fastJump':activeLevel > 90},
                            {'slowJump':activeLevel < 30},
                            ]">{{heartRate}}</em>
                        </div>
                        <div v-else>
                            <s class="noValue">--</s>
                        </div>
                    </div>
                    <span>瞬时心率</span>
                </div>
            </div>
        </div>
        <div class="info">
            <ul>
                <li><em>{{height}}</em><span>身高cm</span></li>
                <li><em>{{age}}</em><span>年龄</span></li>
                <li><em>{{weight}}</em><span>体重kg</span></li>
                <li><em>{{peaceHeart}}</em><span>静息心率</span></li>
            </ul>
        </div>
        <div class="row">
            <div class="rowCenter" v-if="!watchState" @click="connectWatch">
                <img src="../static/images/main/chain.png"/>
                <em>心率带未连接</em>
                <button>点击连接</button>
            </div>
        </div>
        <div class="middle">
            <ul>
                <li>
                    <div class="center">
                        <em>{{cal}}</em>
                        <img src="../static/images/main/normal.png"/>
                        <span>卡路里</span>
                    </div>
                </li>
                <li>
                    <div class="center">
                        <em>{{sportCal}}</em>
                        <img src="../static/images/main/redfire.png"/>
                        <span>运动卡路里</span>
                    </div>
                </li>
                <li>
                    <div class="center">
                        <em>{{ck}}</em>
                        <img src="../static/images/main/ck.png" class="ck"/>
                        <span>CK</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="bottom">
            <h5>5分钟心率趋势图</h5>
            <span>最大心率 : {{heartMax}}      平均心率 : {{heartAverage}}</span>
            <Line-example
                    :width="screenWidth"
                    :height="screenHeight"
                    :dataLabels="dataLabels"
                    :datadatasets="dataDatasets"
            />
            <em v-if="activeState" :class="[
                            {'normalJump':activeLevel > 30 &&  activeLevel <= 90},
                            {'fastJump':activeLevel > 90},
                            {'slowJump':activeLevel < 30},
                            ]">{{heartRate}}</em>
        </div>
        <mu-dialog title="" width="600" max-width="80%" :esc-press-close="false"
                   :overlay-close="false" :open.sync="openAlert">
            <p v-if="!watchs">
                没有任何设备
            </p>
            <div class="watchList" v-else>
                <p>请选择设备</p>
                <ul>
                    <li v-for="w in watchs" @click="choiceWatch">{{w.name}} <em>信号：{{w.level}}</em></li>
                </ul>
            </div>
            <br>
            <mu-button slot="actions" flat color="primary" @click="closeAlertDialog" v-if="watchListState">取消
            </mu-button>
            <mu-button slot="actions" flat color="primary" @click="searchWatch" v-else>搜索</mu-button>
        </mu-dialog>
    </div>
</template>

<script>
    import LineExample from '../components/LineExample'

    export default {
        data() {
            return {
                dataLabels: [],
                dataDatasets: [],
                watchText: '',
                watchState: false,//false
                bgColor: '#028FE1',
                activeLevel: 0,
                activeLevelText: '激活放松',
                heartRate: 0,
                activeState: false,//false
                openAlert: false,//false
                alertState: false,//false
                watchListState: false,//false
                username: '王胜寒',
                sex: 1,
                height: 148,
                age: 8,
                weight: 38,
                peaceHeart: 100,
                heartMax: 0,
                heartAverage: 0,
                cal: 0,
                sportCal: 0,
                ck: 0,
                screenWidth: document.body.clientWidth,
                screenHeight: parseInt(document.documentElement.clientHeight / 5),
                watchs: [],
            }
        },
        mounted() {
            this.getBodyInfo();
            this.activeLevel = 0;
            this.watchs = [
                // {name: 'CL831-0022750', id: 1, rssi: -90, level: '强'},
                // {name: 'CL831-0022767', id: 2, rssi: -30, level: '弱'},
            ]
        },
        watch: {
            activeLevel(val) {
                let that = this;
                switch (true) {
                    case parseInt(val) < 39 :
                        that.bgColor = '#028FE1';
                        that.activeLevelText = '激活放松';
                        break;
                    case parseInt(val) < 54 && parseInt(val) >= 39 :
                        that.bgColor = '#6D29FA';
                        that.activeLevelText = '动态热身';
                        break;
                    case parseInt(val) < 69 && parseInt(val) >= 54 :
                        that.bgColor = '#0AB105';
                        that.activeLevelText = '脂肪燃烧';
                        break;
                    case parseInt(val) < 79 && parseInt(val) >= 69 :
                        that.bgColor = '#B9CB01';
                        that.activeLevelText = '糖分消耗';
                        break;
                    case parseInt(val) < 89 && parseInt(val) >= 79 :
                        that.bgColor = '#EA8813';
                        that.activeLevelText = '心肺训练';
                        break;
                    case parseInt(val) >= 90 :
                        that.bgColor = '#D11122';
                        that.activeLevelText = '峰值锻炼';
                        break;

                }
            }
        },
        methods: {
            connectWatch() {
                // 打开蓝牙适配器
                this.Toast('蓝牙适配器打开成功!');
                let that = this;
                plus.bluetooth.openBluetoothAdapter({
                    success: function (e) {
                        that.Toast('蓝牙适配器打开成功!');
                        that.openAlert = true;
                        return e
                    },
                    fail: function (e) {
                        that.Toast('打开失败! 请确认蓝牙开关已开启');
                    }
                });
            },
            closeAlertDialog() {
                this.openAlert = false;
            },
            searchWatch() {
                // test
                this.watchs = [
                    {name: 'CL831-0022750', id: 1, rssi: -90, level: '强'},
                    {name: 'CL831-0022767', id: 2, rssi: -30, level: '弱'},
                ];
                this.watchListState = true;
            },
            choiceWatch() {
            },
            // 获取基础身体数据
            getBodyInfo() {

            }
        },
        components: {
            LineExample
        }
    }
</script>

<style scoped>
    .top {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .top .watchState {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 20px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .toprow {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .toprow .lt {
        width: 30%;
        float: left;
        overflow: hidden;
    }

    .toprow .md {
        width: 40%;
        float: left;
        overflow: hidden;
    }

    .toprow .rt {
        width: 30%;
        float: right;
        overflow: hidden;
    }

    .toprow .lt .activeLevel {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 10px;
        color: #fff;
    }

    .activeLevel div {
        width: 86px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .activeLevel s {
        float: right;
        font-size: 20px;
    }

    .activeLevel em {
        font-size: 40px;
        text-align: right;
        font-weight: bold;
        float: right;
    }

    .toprow .lt span {
        width: 80px;
        height: 20px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 250px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
    }

    .toprow .md .headContainer {
        width: 70%;
        height: 70%;
        border: 3px solid rgba(255, 255, 255, 0.71);
        border-radius: 250px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .headContainer img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .activeLevel .noValue {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-weight: bold;
        font-size: 40px;
        text-align: center;
        float: none;
    }

    .username {
        width: 100%;
        height: 30px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-size: 14px;
        color: #fff;
        margin-top: 10px;
    }

    .username em {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    .username img {
        position: relative;
        bottom: 20px;
        float: right;
        width: 15px;
        height: 15px;
        right: 15%;
    }

    .heartJump {
        width: 90%;
        overflow: hidden;
        float: left;
        margin: 0 auto;
        margin-top: 10px;
        color: #fff;
    }

    .heartJump div {
        width: 86px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .heartJump img {
        width: 16px;
        height: 14px;
        float: right;
    }

    .heartJump em {
        font-size: 40px;
        text-align: right;
        font-weight: bold;
        float: right;
    }

    .heartJump .noValue {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-weight: bold;
        font-size: 40px;
        text-align: center;
        float: none;
    }

    .toprow .rt span {
        width: 80px;
        height: 20px;
        overflow: hidden;
        float: left;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 250px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
    }

    .info {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .info ul {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .info li {
        width: 25%;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        float: left;
        text-align: center;
    }

    .info li:nth-child(2) {
        border-color: #E2E2E2;
    }

    .info li:nth-child(3) {
        border-color: #E2E2E2;
        border-left: 0;
    }

    .info li em {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #363636;
        font-size: 20px;
        text-align: center;
    }

    .info li span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #C4C4C4;
        font-size: 12px;
        text-align: center;
    }

    .row {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #EFEFEF;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .row .rowCenter {
        width: 208px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        line-height: 30px;
    }

    .rowCenter img {
        width: 11px;
        height: 11px;
        float: left;
        margin-top: 10px;
        margin-right: 5px;
    }

    .rowCenter em {
        font-size: 14px;
        color: #FF4040;
        margin-right: 15px;
    }

    .rowCenter button {
        width: 92px;
        height: 27px;
        text-align: center;
        line-height: 27px;
        color: black;
        background: #FFDE93;
        border-radius: 6px;
        border: none;
        outline: none;
    }

    .middle {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border-bottom: 10px solid #EFEFEF;
    }

    .middle ul {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .middle li {
        width: 33%;
        float: left;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
    }

    .middle li .center {
        width: 72px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .middle li:nth-child(2) {
        border-color: #E2E2E2;
    }

    .middle li img {
        width: 15px;
        float: right;
        margin-top: 4px;
        margin-right: 5px;
    }

    .middle li em {
        float: right;
        text-align: right;
        color: #000;
        font-weight: bold;
        font-size: 22px;
    }

    .middle li span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: right;
        color: #9A9A9A;
        font-size: 12px;
    }

    .middle .ck {
        width: 19px;
        height: 19px;
        margin-top: 6px;
    }

    .bottom {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .bottom h5 {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #363636;
        font-size: 16px;
        text-align: center;
        font-weight: normal;
        margin-top: 14px;
    }

    .bottom span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 12px;
        color: #9A9A9A;
    }

    .bottom em {
        position: relative;
        bottom: 160px;
        right: 20px;
        float: right;
        color: #FF4040;
        background: #fff;
    }


    .slowJump {
        animation: mymove 3s infinite;
        -webkit-animation: mymove 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: mymove 2s infinite;
        -webkit-animation: mymove 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: mymove 1s infinite;
        -webkit-animation: mymove 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 mymove {
        0% {
            transform: scale(1); /*开始为原始大小*/
        }
        25% {
            transform: scale(1.1); /*放大1.1倍*/
        }
        50% {
            transform: scale(1);
        }
        75% {
            transform: scale(1.1);
        }

    }

    @-webkit-keyframes mymove /*Safari and Chrome*/
    {
        0% {
            transform: scale(1); /*开始为原始大小*/
        }
        25% {
            transform: scale(1.1); /*放大1.1倍*/
        }
        50% {
            transform: scale(1);
        }
        75% {
            transform: scale(1.1);
        }
    }

    /deep/ .mu-dialog {
        background-color: rgba(0, 0, 0, 0.75);
        color: #fff;
        border-radius: 20px;
        background-size: 100%;
        background-origin: content-box;
        filter: blur(0.5px);
    }

    /deep/ .mu-dialog p {
        color: #fff;
        text-align: center;
    }

    /deep/ .mu-dialog .mu-primary-text-color {
        margin: 0 auto;
        border-radius: 9px;
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .watchList {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        min-height: 100px;
        overflow-y: scroll;
    }

    .watchList li {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 5px;
        padding-bottom: 5px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background-color: rgba(255, 255, 255, 0.29);
        color: #fff;
        border-radius: 9px;
        font-size: 12px;
        margin-bottom: 5px;
    }

    .watchList li em {
        float: right;
        text-align: right;
    }
</style>