flyLong/online/src/page/mainpage.vue

<template>
    <div class="content">
        <div class="top" :style="{backgroundColor:bgColor}">
            <span class="watchState">{{watchText}} {{battery}}</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="userHead"/>
                    </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 @click="showConsole()">瞬时心率</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 class="classInfo" v-if="InClass == 1 && watchState">
                <em><span>课程名称：</span>{{DpName}}</em>
            </div>
        </div>
        <div class="middle">
            <ul>
                <li>
                    <div class="center">
                        <em>{{cal |parseToInt}}</em>
                        <img src="../static/images/main/normal.png"/>
                        <span>卡路里</span>
                    </div>
                </li>
                <li>
                    <div class="center">
                        <em>{{sportCal |parseToInt}}</em>
                        <img src="../static/images/main/redfire.png"/>
                        <span>运动卡路里</span>
                    </div>
                </li>
                <li>
                    <div class="center">
                        <em>{{ck |parseToFix2}}</em>
                        <img src="../static/images/main/ck.png" class="ck"/>
                        <span>CK</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="bottom">
            <h5>心率趋势图</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},
                            ]"
                :style="{bottom:parseInt(screenHeight -  30) +'px'}"
            >{{heartRate}}</em>
        </div>
        <mu-dialog title="" width="600" max-width="80%" :esc-press-close="true"
                   :overlay-close="true" :open.sync="openAlert">
            <p v-if="!watchListState">
                没有任何设备
            </p>
            <div class="watchList" v-else>
                <p>请选择设备</p>
                <ul>
                    <li v-for="w in watchs" @click="choiceWatch(w)">{{w.localName}} <em>信号：{{w.RSSI |parseLevel}}</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'
    import {
        UserSelfQuery,
        GetDuInfoAndUserInfoByUserMd5,
        HrSensorsUpdate,
        AddAppHeartRate,
    } from '../api/getApiRes.js'

    let qs = require('qs');

    export default {
        data() {
            return {
                runMode: '',//'' 为正常模式 mock 为模拟操作模式
                isClassTime: 5000,//上课状态检测频率
                isAddHeartTime: 1000,//心率上报检测频率
                dataLabels: [],
                dataDatasets: [],
                watchText: '',
                battery: '',
                userHead: 'http://xhead.beswell.com/flyhead.png',
                watchState: false,//false
                bgColor: '#028FE1',
                activeLevel: 0,
                activeLevelText: '激活放松',
                heartRate: 0,
                activeState: false,//false
                openAlert: false,//false
                alertState: false,//false
                watchListState: false,//false
                username: 'XXX',
                sex: 1,
                height: 148,
                age: 8,
                weight: 38,
                peaceHeart: 70,
                heartMax: 0,
                heartAverage: 0,
                cal: 0,
                sportCal: 0,
                ck: 0,
                addCalories: 0,//增量卡路里
                addPureCalories: 0,//增量运动卡路里
                screenWidth: parseInt(document.body.clientWidth - 10),
                screenHeight: parseInt(document.documentElement.clientHeight / 3),
                watchs: [],
                begin: null,
                heartLine: [],
                InClass: 0,//是否上课
                DpName: '1234',//课程名称
                HrId: '',//心率带
                duId: 0,
                sn: '',
            }
        },
        mounted() {
            this.getBodyInfo();
            this.init();

            // 获取上课状态
            clearInterval(this.timerisClass);
            this.timerisClass = setInterval(() => {
                this.isClass();
            }, this.isClassTime);

            // 上报心率信息
            clearInterval(this.timerAutoAddAppHeartRate);
            this.timerAutoAddAppHeartRate = setInterval(() => {
                // 上课中，且已连接心率带
                if (this.InClass == 1 && this.watchState && this.runMode != 'mock') {
                    // 上课就自动上报
                    this.AutoAddAppHeartRate();
                } else {
                    // 不上课就不报
                    console.log('下课中，不汇报');
                }
                //
                // if (this.runMode == 'mock') {
                //     this.InClass = 1;
                //     this.duId = 775;
                //     this.sn = '22735';
                //     this.HrId = 87;
                //     this.AutoAddAppHeartRate();
                // } else {
                //     // 不上课就不报
                //     console.log('下课中，不汇报test');
                // }
            }, this.isAddHeartTime);
        },
        beforeDestroy() {
            clearInterval(this.timerisClass);
            clearInterval(this.timerAutoAddAppHeartRate);
        },
        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: {
            init() {
                let that = this;
                if (this.runMode == 'mock') {
                    that.mockCreateDate();
                } else {
                    // 页面初始化操作
                    document.addEventListener('plusready', function (e) {
                        plus.bluetooth.onBLECharacteristicValueChange(function (e) {
                            if (e.characteristicId == '00002A19-0000-1000-8000-00805F9B34FB') {
                                // 获取电量
                                var value = that.buffer2hexPower(e.value);
                                that.battery = value + '%';
                            } else {
                                // 成功获取心跳
                                that.heartRate = parseInt(that.parseHeartRate(e.value).heartRate);
                                that.watchText = '心率带已连接';
                                that.activeState = true;
                                // 运动强度计算
                                that.calcActLevel(that.heartRate);
                                that.openAlert = false;//关闭弹窗
                                that.watchState = true;//关闭连接按钮并显示当前课程名
                                // 卡路里计算
                                that.calcCalorie(that.heartRate);
                                if (that.heartLine.length > 30) {
                                    that.heartLine = that.heartLine.concat();
                                    that.dataLabels = that.dataLabels.concat();
                                } else {
                                    that.heartLine.push(that.heartRate);
                                    that.dataLabels.push('');
                                }
                                that.DrawHeartLine(that.heartLine, that.dataLabels);
                            }
                        });
                    });
                }
            },
            showConsole() {
                let vconDom = document.getElementById('__vconsole');
                this.toggleClass(vconDom, 'show')
            },
            toggleClass(obj, cls) {
                if (this.hasClass(obj, cls)) {
                    this.removeClass(obj, cls);
                } else {
                    this.addClass(obj, cls);
                }
            },
            hasClass(obj, cls) {
                return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
            },
            addClass(obj, cls) {
                if (!this.hasClass(obj, cls)) obj.className += " " + cls;
            },
            removeClass(obj, cls) {
                if (this.hasClass(obj, cls)) {
                    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                    obj.className = obj.className.replace(reg, ' ');
                }
            },
            // 生成心率数据
            mockCreateDate() {
                let that = this;
                clearInterval(this.timermockCreateDate);
                this.timermockCreateDate = setInterval(() => {
                    that.battery = '85%';
                    // 成功获取心跳
                    that.heartRate = parseInt(Math.random() * 100 + 90);
                    that.watchText = '心率带已连接';
                    that.activeState = true;
                    // 运动强度计算
                    that.calcActLevel(that.heartRate);
                    that.openAlert = false;//关闭弹窗
                    that.watchState = true;//关闭连接按钮
                    // 卡路里计算
                    that.calcCalorie(that.heartRate);
                    if (that.heartLine.length > 30) {
                        that.heartLine.shift();
                        that.dataLabels.shift();
                    } else {
                        that.heartLine.push(that.heartRate);
                        that.dataLabels.push('');
                    }
                    that.DrawHeartLine(that.heartLine, that.dataLabels);
                }, 1000);
            },
            // 是否正在上课
            isClass() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                GetDuInfoAndUserInfoByUserMd5(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.InClass = json.InClass;//0下课，1上课
                        // 记录duid
                        that.duId = parseInt(json.DuInfo.DuId);
                        that.DpName = json.DuInfo.DpName;
                        console.log('that.duId:' + that.duId);
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            buffer2hexPower(value) {
                var t = '';
                if (value) {
                    var v = new Uint8Array(value);
                    for (var i in v) {
                        // t += '0x' + v[i].toString(16) + ' ';
                        t += v[i].toString(10) + ' ';
                    }
                } else {
                    t = '无效值';
                }
                return t;
            },
            connectWatch() {
                // 打开蓝牙适配器
                let that = this;
                if (typeof plus == 'undefined') {
                    that.Toast('当前设备不支持蓝牙心率带', 'error');
                    return false
                }
                plus.bluetooth.openBluetoothAdapter({
                    success: function (e) {
                        that.Toast('蓝牙适配器打开成功!', 'success');
                        that.openAlert = true;
                        that.searchWatch();
                        return e
                    },
                    fail: function (e) {
                        that.Toast('打开失败! 请确认蓝牙开关已开启', 'error');
                    }
                });
            },
            closeAlertDialog() {
                this.openAlert = false;
            },
            // 监听搜索到新设备
            searchWatch() {
                let that = this;
                that.watchs = [];
                plus.bluetooth.startBluetoothDevicesDiscovery({
                    // services: ['heart_rate'],//ios不支持
                    success: function (e) {
                        that.Toast('开始搜索成功!', 'success');
                        plus.bluetooth.onBluetoothDeviceFound(function (e) {
                            let devices = e.devices;
                            for (let i in devices) {
                                let device = devices[i];
                                // localName CL831
                                if (device.localName.indexOf('CL831') != -1) {
                                    console.log(JSON.stringify(device));
                                    that.watchs.push(device)
                                }
                            }
                            that.watchListState = true;
                        });
                    },
                    fail: function (e) {
                        that.Toast('开始搜索失败! ' + JSON.stringify(e));
                    }
                });
            },
            choiceWatch(w) {
                let that = this;
                that.Toast('连接心率带' + w.localName + '中...', 'success');
                // 建立连接
                plus.bluetooth.createBLEConnection({
                    deviceId: w.deviceId,
                    success: function (e) {
                        // 记录心率带sn
                        that.sn = w.localName;
                        that.AddHrSensorsUpdate(w.localName);
                        that.Toast('连接成功!', 'success');
                        // 渲染完毕再执行这个，所以才能没有延时的更改
                        // 需要一个回调等待5S
                        clearTimeout(that.timer);           //清除延迟执行
                        that.timer = setTimeout(() => {   //设置延迟执行
                            // 获取服务
                            that.getServices(w);
                        }, 2000);
                    },
                    fail: function (e) {
                        that.Toast('连接失败! 请重新连接' + JSON.stringify(e));
                    }
                });
            },
            getServices(w) {
                let that = this;
                that.Toast('获取蓝牙设备服务:', 'success');
                plus.bluetooth.getBLEDeviceServices({
                    deviceId: w.deviceId,
                    success: function (e) {
                        that.Toast('获取蓝牙服务成功!', 'success');
                        // 获取服务的特征值
                        // console.log('服务的特征值' + w.advertisServiceUUIDs[0]);
                        var HEARTuuid = "0000180D-0000-1000-8000-00805F9B34FB";//HEART RATE
                        var Batteryuuid = "0000180F-0000-1000-8000-00805F9B34FB";//Battery
                        that.getBatteryCharacteristics(w.deviceId, Batteryuuid);
                        clearTimeout(that.timer);           //清除延迟执行
                        that.timer = setTimeout(() => {   //设置延迟执行
                            // 获取心跳服务
                            that.getCharacteristics(w.deviceId, HEARTuuid);
                        }, 3000);
                    },
                    fail: function (e) {
                        console.log('获取服务失败! ' + JSON.stringify(e));
                        that.Toast('获取服务失败!请重试 ' + JSON.stringify(e));
                    }
                });
            },
            // 获取服务的特征值
            getCharacteristics(deviceId, serviceId) {
                let that = this;
                let chaaracterUuid = '00002A37-0000-1000-8000-00805F9B34FB';
                let characteristicId = null;
                that.begin = new Date();
                plus.bluetooth.getBLEDeviceCharacteristics({
                    deviceId: deviceId,
                    serviceId: serviceId,
                    success: function (e) {
                        let characteristics = e.characteristics;
                        that.Toast('获取特征值成功! ' + characteristics.length, 'success');
                        console.log('获取特征值成功! ' + characteristics.length, 'success');
                        console.log('特征值列表： ' + JSON.stringify(characteristics));
                        plus.bluetooth.notifyBLECharacteristicValueChange({	//监听数据变化
                            deviceId: deviceId,
                            serviceId: serviceId,
                            characteristicId: chaaracterUuid,
                            success: function (e) {
                                console.log('---> 获取心跳服务' + JSON.stringify(e));
                                console.log('---> notifyBLECharacteristicValueChange ' + chaaracterUuid + ' success.');
                                //that.onValuesChange();
                            },
                            fail: function (e) {
                                that.Toast('获取特征值失败!重启APP后再次尝试 ' + JSON.stringify(e));
                            }
                        });
                    },
                    fail: function (e) {
                        console.log('获取特征值失败! ' + JSON.stringify(e));
                        that.Toast('获取特征值失败!重启APP后再次尝试 ' + JSON.stringify(e));
                    }
                })
            },
            // 获取服务的特征值
            getBatteryCharacteristics(deviceId, serviceId) {
                let that = this;
                let chaaracterUuid = '00002A19-0000-1000-8000-00805F9B34FB';
                let characteristicId = null;
                that.begin = new Date();
                that.readValue(deviceId, serviceId, chaaracterUuid);
                plus.bluetooth.getBLEDeviceCharacteristics({
                    deviceId: deviceId,
                    serviceId: serviceId,
                    success: function (e) {
                        var characteristics = e.characteristics;
                        that.Toast('获取心率带服务成功! ' + characteristics.length, 'success');
                        plus.bluetooth.notifyBLECharacteristicValueChange({	//监听数据变化
                            deviceId: deviceId,
                            serviceId: serviceId,
                            characteristicId: chaaracterUuid,
                            success: function (e) {
                                console.log('notifyBLECharacteristicValueChange' + JSON.stringify(e));
                            },
                            fail: function (e) {
                                that.Toast('notifyBLECharacteristicValueChange失败! ' + JSON.stringify(e));
                            }
                        });
                    },
                    fail: function (e) {
                        console.log('获取特征值失败! ' + JSON.stringify(e));
                        that.Toast('获取特征值失败!重启APP后再次尝试 ' + JSON.stringify(e));
                    }
                })
            },
            readValue(deviceId, serviceId, characteristicId) {
                let that = this;
                plus.bluetooth.readBLECharacteristicValue({
                    deviceId: deviceId,
                    serviceId: serviceId,
                    characteristicId: characteristicId,
                    success: function (e) {
                        console.log("读取电量数据成功" + JSON.stringify(e));
                    },
                    fail: function (e) {
                        that.Toast('读取电量数据失败!重启APP后再次尝试 ' + JSON.stringify(e));
                    }
                });
            },
            // 获取基础身体数据
            getBodyInfo() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                UserSelfQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.username = json.Rs.UserName;
                        that.sex = json.Rs.Sex;
                        that.height = json.Rs.Height;
                        // Birthday
                        let age = parseInt((new Date().getTime() - new Date(json.Rs.Birthday).getTime()) / (365 * 24 * 60 * 60 * 1000));
                        that.age = age;
                        that.weight = parseInt(json.Rs.Weight) / 10;
                        that.peaceHeart = json.Rs.StaticHr;
                        // 有无默认头像
                        if (json.Rs.Head) {
                            that.userHead = json.Rs.Head;
                        } else {
                            that.userHead = 'http://xhead.beswell.com/flyhead.png';
                        }
                    } else {
                        if (json.Code == 9999999999) {
                            that.Toast('登陆已失效，请重新登陆');
                            localStorage.token = '';
                            this.$router.push({path: '/login'});
                        } else {
                            that.Toast(json.Memo, 'error');
                        }
                    }
                })
            }
            ,
            parseHeartRate(data) {
                var data = new DataView(data);
                const flags = data.getUint8(0);
                const rate16Bits = flags & 0x1;
                const result = {};
                let index = 1;
                if (rate16Bits) {
                    result.heartRate = data.getUint16(index, /*littleEndian=*/ true);
                    index += 2;
                } else {
                    result.heartRate = data.getUint8(index);
                    index += 1;
                }
                const contactDetected = flags & 0x2;
                const contactSensorPresent = flags & 0x4;
                if (contactSensorPresent) {
                    result.contactDetected = !!contactDetected;
                }
                const energyPresent = flags & 0x8;
                if (energyPresent) {
                    result.energyExpended = data.getUint16(index, /*littleEndian=*/ true);
                    index += 2;
                }
                const rrIntervalPresent = flags & 0x10;
                if (rrIntervalPresent) {
                    const rrIntervals = [];
                    for (; index + 1 < data.byteLength; index += 2) {
                        rrIntervals.push(data.getUint16(index, /*littleEndian=*/ true));
                    }
                    result.rrIntervals = rrIntervals;
                }
                return result;
            }
            ,
            // 活动强度计算公式
            calcActLevel(heartRate) {
                let sum = 170 - this.age;
                let actLevel = parseInt((heartRate / sum) * 100) > 100 ? 100 : parseInt((heartRate / sum) * 100);
                this.activeLevel = actLevel;
            },
            // 持续时间
            calcHoldTime(curTime) {
                if (this.runMode == 'mock') {
                    return 1
                } else {
                    let res = parseInt(curTime.getTime() - this.begin.getTime()) / 1000;
                    return parseInt(res)
                }
            },
            // 计算卡路里
            calcCalorie(heartRate) {
                let that = this;
                let calorieNoVo2 = 0;
                let curTime = that.calcHoldTime(new Date());
                // 男
                if (that.sex == 1) {
                    calorieNoVo2 = ((-55.0969 + (0.6309 * heartRate) + (0.1988 * that.weight) + (0.2017 * that.age)) / 4.184) / 60 * 1;
                } else {
                    calorieNoVo2 = ((-20.4022 + (0.4472 * heartRate) + (0.1263 * that.weight) + (0.074 * that.age)) / 4.184) / 60 * 1;
                }
                // 记录增量卡路里
                that.addCalories = calorieNoVo2;
                that.cal = that.cal + calorieNoVo2;
                // 计算CK
                that.calcCk(that.cal);
                that.calcSportCal(calorieNoVo2, curTime)
            },
            // 计算CK
            calcCk(cal) {
                this.ck = parseFloat(cal / this.weight).toFixed(2);
            },
            // 计算运动卡路里
            calcSportCal(calorieNoVo2) {
                let that = this;
                let bmrMSjDaily = (10.00 * this.weight) + (6.25 * this.height) - (5.00 * this.age) + 5.00;
                let BmrMSjRmrcb = parseFloat((bmrMSjDaily * 1.1) / 24);
                let calorieNoVo2Pure = (calorieNoVo2 - BmrMSjRmrcb / 3600 * 1);

                // 记录增量运动卡路里
                that.addPureCalories = calorieNoVo2Pure;
                this.sportCal = this.sportCal + calorieNoVo2Pure;
            },
            // 绘制心电图
            DrawHeartLine(heartLine, dataLabels) {
                this.dataLabels = dataLabels;
                this.dataDatasets = heartLine;
                this.calcMaxHr(heartLine);
                this.calcAveHr(heartLine);
            },
            // 最大心率
            calcMaxHr(heartLine) {
                this.heartMax = Math.max(...heartLine);
            },
            // 平均心率
            calcAveHr(heartLine) {
                var sum = 0;
                for (var i = 0; i < heartLine.length; i++) {
                    sum += heartLine[i];
                }
                this.heartAverage = parseInt(sum / heartLine.length);
            },
            // 上报信息
            AutoAddAppHeartRate() {
                let that = this;
                console.log('duId:' + that.duId);
                let param = {
                    token: localStorage.token,
                    duId: that.duId,
                    sn: that.sn,
                    hrId: that.HrId,
                    heartRate: that.heartRate,
                    rcvTime: new Date().getTime(),
                    calories: parseInt(that.addCalories * 1000000), //卡
                    pureCalories: parseInt(that.addPureCalories * 1000000), //卡
                };
                let postdata = qs.stringify(param);
                AddAppHeartRate(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.InClass = json.InClass;
                        console.log('心率数据上传成功！');
                    } else {
                        // that.Toast( '心率数据上传失败' + json.Memo);
                        console.log('心率数据上传失败' + json.Memo);
                    }
                })
            },
            AddHrSensorsUpdate(sn) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    sn: sn,
                };
                let postdata = qs.stringify(param);
                HrSensorsUpdate(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.HrId = json.HrId;
                        that.Toast('心率带已连接在线课程', 'success');
                    } else {
                        that.HrId = '';
                        that.Toast(json.Memo);
                    }
                })
            },
        },
        filters: {
            parseLevel: function (value) {
                if (!value) {
                    return '无'
                } else {
                    if (value < -90) {
                        return '强'
                    } else {
                        return '弱'
                    }
                }
            }
            ,
            parseToInt: function (val) {
                return parseInt(val)
            }
            ,
            parseToFix2: function (val) {
                return parseFloat(val).toFixed(2)
            }
        }
        ,
        components: {
            LineExample
        }
    }
</script>

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

    .top .watchState {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 20px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        margin-top: 20px;
        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;
        display: block;
        margin: 0 auto;
        /*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: 5px;
        padding-bottom: 5px;
    }

    .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.85);
        color: #fff;
        border-radius: 20px;
        background-size: 100%;
        background-origin: content-box;
    }

    /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;
    }

    .classInfo {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-size: 16px;
        text-align: center;
    }

    .classInfo span {
        font-size: 12px;
    }
</style>