|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN" style="height: 100%">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/style/http/lora2.css">
|
|
|
|
|
<script type="text/javascript" src="/script/jquery.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="/script/vue.js"></script>
|
|
|
|
|
<script src="/script/axios.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app" class="box">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<div class="school">
|
|
|
|
|
<img class="school-logo" src="/image/lora2/logo.png">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="college">
|
|
|
|
|
<div class="college-text">
|
|
|
|
|
信息与计算机学院
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="menu">
|
|
|
|
|
<div @click="toggleCompare(1)" :class="{ 'menu-button-selected': show_category==1 }" class="menu-button">
|
|
|
|
|
数据对比
|
|
|
|
|
</div>
|
|
|
|
|
<div @click="toggleCompare(2)" :class="{ 'menu-button-selected': show_category==2 }" class="menu-button">
|
|
|
|
|
血氧对比
|
|
|
|
|
</div>
|
|
|
|
|
<div class="menu-middle">
|
|
|
|
|
LoRa手环数据分析
|
|
|
|
|
</div>
|
|
|
|
|
<div @click="toggleCompare(3)" :class="{ 'menu-button-selected': show_category==3 }" class="menu-button">
|
|
|
|
|
体温对比
|
|
|
|
|
</div>
|
|
|
|
|
<div @click="toggleCompare(4)" :class="{ 'menu-button-selected': show_category==4 }" class="menu-button">
|
|
|
|
|
心跳对比
|
|
|
|
|
</div>
|
|
|
|
|
<div @click="toggleCompare(5)" :class="{ 'menu-button-selected': show_category==5 }" class="menu-button">
|
|
|
|
|
脉搏对比
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="version">
|
|
|
|
|
V0.0.1
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main">
|
|
|
|
|
{{-- 设备列表--}}
|
|
|
|
|
<div class="device">
|
|
|
|
|
<div class="device-frame">
|
|
|
|
|
<div v-for="device in device_list">
|
|
|
|
|
<div :class="['device-cell' ,device.mac == mac_id ? 'device-cell1' : 'device-cell2']" @click="toggleDevice(device.mac)">
|
|
|
|
|
<div :class="['device-border' ,device.mac == mac_id ? 'device-border1' : 'device-border2']">
|
|
|
|
|
<div class="device-info1">@{{device.name}}</div>
|
|
|
|
|
<div class="device-online-chunk" v-if="device.online == 1">
|
|
|
|
|
<div class="device-info2">
|
|
|
|
|
<div class="device-online"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="device-info3">在线</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="device-online-chunk" v-else>
|
|
|
|
|
<div class="device-info2">
|
|
|
|
|
<div class="device-online2"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="device-info3">离线</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="show_category==1" class="diagram">
|
|
|
|
|
<div class="compare">
|
|
|
|
|
<div id="container1"></div>
|
|
|
|
|
<div class="compare-left"></div>
|
|
|
|
|
<div class="compare-left2"></div>
|
|
|
|
|
<div class="compare-middle">
|
|
|
|
|
<div class="compare-middle-title">
|
|
|
|
|
对比图
|
|
|
|
|
</div>
|
|
|
|
|
<div class="compare-middle-left"></div>
|
|
|
|
|
<div class="compare-middle-middle"></div>
|
|
|
|
|
<div class="compare-middle-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="compare-right2"></div>
|
|
|
|
|
<div class="compare-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="compare2">
|
|
|
|
|
<div class="radar">
|
|
|
|
|
<div id="container2"></div>
|
|
|
|
|
<div class="radar-left"></div>
|
|
|
|
|
<div class="radar-left2"></div>
|
|
|
|
|
<div class="radar-middle">
|
|
|
|
|
<div class="radar-middle-title">
|
|
|
|
|
雷达图
|
|
|
|
|
</div>
|
|
|
|
|
<div class="radar-middle-left"></div>
|
|
|
|
|
<div class="radar-middle-middle"></div>
|
|
|
|
|
<div class="radar-middle-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="radar-right2"></div>
|
|
|
|
|
<div class="radar-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="original">
|
|
|
|
|
<div id="container3">@{{data_blood}}</div>
|
|
|
|
|
<div class="original-left"></div>
|
|
|
|
|
<div class="original-left2"></div>
|
|
|
|
|
<div class="original-middle">
|
|
|
|
|
<div class="original-middle-title">
|
|
|
|
|
数据
|
|
|
|
|
</div>
|
|
|
|
|
<div class="original-middle-left"></div>
|
|
|
|
|
<div class="original-middle-middle"></div>
|
|
|
|
|
<div class="original-middle-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="original-right2"></div>
|
|
|
|
|
<div class="original-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{{-- 不同设备对比--}}
|
|
|
|
|
<div v-show="show_category!=1" class="diagram">
|
|
|
|
|
<div class="compare">
|
|
|
|
|
<div id="container4"></div>
|
|
|
|
|
<div class="compare-left"></div>
|
|
|
|
|
<div class="compare-left2"></div>
|
|
|
|
|
<div class="compare-middle">
|
|
|
|
|
<div class="compare-middle-title">
|
|
|
|
|
对比图
|
|
|
|
|
</div>
|
|
|
|
|
<div class="compare-middle-left"></div>
|
|
|
|
|
<div class="compare-middle-middle"></div>
|
|
|
|
|
<div class="compare-middle-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="compare-right2"></div>
|
|
|
|
|
<div class="compare-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="compare2">
|
|
|
|
|
<div class="original2">
|
|
|
|
|
<div id="container5">@{{ original2 }}</div>
|
|
|
|
|
<div class="original-left"></div>
|
|
|
|
|
<div class="original2-left2"></div>
|
|
|
|
|
<div class="original-middle">
|
|
|
|
|
<div class="original-middle-title">
|
|
|
|
|
数据
|
|
|
|
|
</div>
|
|
|
|
|
<div class="original-middle-left"></div>
|
|
|
|
|
<div class="original-middle-middle"></div>
|
|
|
|
|
<div class="original-middle-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="original2-right2"></div>
|
|
|
|
|
<div class="original-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="/script/echarts.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="/script/http/lora2.js"></script>
|
|
|
|
|
|
|
|
|
|
</html>
|
