You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
174 lines
8.4 KiB
174 lines
8.4 KiB
<!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="menuSelected" class="menu-button">
|
|
数据对比
|
|
</div>
|
|
<div @click="toggleCompare(2)" :class="{ 'menu-button-selected': compare.compare2 }" class="menu-button">
|
|
血氧对比
|
|
</div>
|
|
<div class="menu-middle">
|
|
LoRa手环数据分析
|
|
</div>
|
|
<div @click="toggleCompare(3)" :class="{ 'menu-button-selected': compare.compare3 }" class="menu-button">
|
|
体温对比
|
|
</div>
|
|
<div @click="toggleCompare(4)" :class="{ 'menu-button-selected': compare.compare4 }" class="menu-button">
|
|
心跳对比
|
|
</div>
|
|
<div @click="toggleCompare(5)" :class="{ 'menu-button-selected': compare.compare5 }" 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-cell1 device-cell" v-if="device.online == 1" @click="toggleDevice(device.mac)">
|
|
<div class="device-info1">@{{device.name}}</div>
|
|
<div class="device-info2">
|
|
<div class="device-online"></div>
|
|
|
|
</div>
|
|
<div class="device-info3">在线</div>
|
|
</div>
|
|
|
|
<div class="device-cell2 device-cell" v-else @click="toggleDevice(device.mac)">
|
|
<div class="device-border">
|
|
<div class="device-info1">@{{device.name}}</div>
|
|
<div class="device-info2">
|
|
<div class="device-online2"></div>
|
|
|
|
</div>
|
|
<div class="device-info3">离线</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div v-show="show_category1" 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">0000000000000000000000 000000000000000</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_category2" 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">00000000000000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000</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>
|
|
|