<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>足压分析</title>
|
<link rel="stylesheet" href="css/style.css"/>
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> -->
|
<!-- 4.0.1版本 ↓ 在项目node中没有配置相关静态访问资源，所以这个会报错404 GET http://localhost:3000/socket.io.js net::ERR_ABORTED 404 (Not Found)-->
|
<script src="./js/socket.io.js"></script>
|
<script src="./js/jquery-1.11.3.min.js"></script>
|
<script src="./js/heatmap_data.js"></script>
|
<script src="./js/heatmap.js"></script>
|
</head>
|
<body>
|
<div class="head">
|
<!-- <div style="float: right; line-height: 36px;">
|
压力区间：
|
<span style="border-radius:3px; padding:2px 8px;color: #444; background: #fff; border:1px solid #eee;">0-200</span>
|
<span style="border-radius:3px; padding:2px 8px;color: #fff; background: #F49B7C; border: 1px solid #F49B7C;">201-500</span>
|
<span style="border-radius:3px; padding:2px 8px;color: #fff; background: #220000; border: 1px solid #220000;"">501-2000</span>
|
</div> -->
|
<div class="topDiv">
|
<button class="start">开始</button>
|
<button class="end">结束</button>
|
<button class="back" disabled="disabled">回放</button>
|
<button class="last" disabled="disabled">上一帧</button>
|
<button class="next" disabled="disabled">下一帧</button>
|
<button class="download" disabled="disabled">保存文件</button>
|
<input type="file" id="excel-file">
|
</div>
|
<div class="fbox">
|
<img src="images/bg_t.png" class="mask">
|
<div class="region_main">
|
<div class="region_1"></div>
|
<div class="region_2"></div>
|
<div class="region_7"></div>
|
<div class="region_6"></div>
|
<div class="region_5"></div>
|
<div class="region_4"></div>
|
<div class="region_3"></div>
|
<div class="region_9"></div>
|
<div class="region_8"></div>
|
</div>
|
<div id="D">
|
<div class="Y15">
|
<div class="data20 data none"></div>
|
<div class="data19 data none"></div>
|
<div class="data18 data"></div>
|
<div class="data17 data"></div>
|
<div class="data16 data"></div>
|
<div class="data15 data"></div>
|
<div class="data14 data none"></div>
|
</div>
|
<div class="Y14">
|
<div class="data13 data none"></div>
|
<div class="data12 data"></div>
|
<div class="data11 data"></div>
|
<div class="data10 data"></div>
|
<div class="data9 data"></div>
|
<div class="data8 data"></div>
|
<div class="data7 data"></div>
|
</div>
|
<div class="Y13">
|
<div class="data6 data"></div>
|
<div class="data5 data"></div>
|
<div class="data4 data"></div>
|
<div class="data3 data"></div>
|
<div class="data2 data"></div>
|
<div class="data1 data"></div>
|
<div class="data0 data"></div>
|
</div>
|
</div>
|
<div id="C">
|
<div class="Y12">
|
<div class="data27 data"></div>
|
<div class="data26 data"></div>
|
<div class="data25 data"></div>
|
<div class="data24 data"></div>
|
<div class="data23 data"></div>
|
<div class="data22 data"></div>
|
<div class="data21 data"></div>
|
</div>
|
<div class="Y11">
|
<div class="data20 data"></div>
|
<div class="data19 data"></div>
|
<div class="data18 data"></div>
|
<div class="data17 data"></div>
|
<div class="data16 data"></div>
|
<div class="data15 data"></div>
|
<div class="data14 data"></div>
|
</div>
|
<div class="Y10">
|
<div class="data13 data"></div>
|
<div class="data12 data"></div>
|
<div class="data11 data"></div>
|
<div class="data10 data"></div>
|
<div class="data9 data"></div>
|
<div class="data8 data"></div>
|
<div class="data7 data"></div>
|
</div>
|
<div class="Y09">
|
<div class="data6 data"></div>
|
<div class="data5 data"></div>
|
<div class="data4 data"></div>
|
<div class="data3 data"></div>
|
<div class="data2 data"></div>
|
<div class="data1 data"></div>
|
<div class="data0 data"></div>
|
</div>
|
</div>
|
<div id="B">
|
<div class="Y08">
|
<div class="data27 data"></div>
|
<div class="data26 data"></div>
|
<div class="data25 data"></div>
|
<div class="data24 data"></div>
|
<div class="data23 data"></div>
|
<div class="data22 data"></div>
|
<div class="data21 data"></div>
|
</div>
|
<div class="Y07">
|
<div class="data20 data"></div>
|
<div class="data19 data"></div>
|
<div class="data18 data"></div>
|
<div class="data17 data"></div>
|
<div class="data16 data"></div>
|
<div class="data15 data"></div>
|
<div class="data14 data"></div>
|
</div>
|
<div class="Y06">
|
<div class="data13 data"></div>
|
<div class="data12 data"></div>
|
<div class="data11 data"></div>
|
<div class="data10 data"></div>
|
<div class="data9 data"></div>
|
<div class="data8 data"></div>
|
<div class="data7 data"></div>
|
</div>
|
<div class="Y05">
|
<div class="data6 data"></div>
|
<div class="data5 data"></div>
|
<div class="data4 data"></div>
|
<div class="data3 data"></div>
|
<div class="data2 data"></div>
|
<div class="data1 data"></div>
|
<div class="data0 data"></div>
|
</div>
|
</div>
|
<div id="A">
|
<div class="Y04">
|
<div class="data27 data"></div>
|
<div class="data26 data"></div>
|
<div class="data25 data"></div>
|
<div class="data24 data"></div>
|
<div class="data23 data"></div>
|
<div class="data22 data"></div>
|
<div class="data21 data"></div>
|
</div>
|
<div class="Y03">
|
<div class="data20 data"></div>
|
<div class="data19 data"></div>
|
<div class="data18 data"></div>
|
<div class="data17 data"></div>
|
<div class="data16 data"></div>
|
<div class="data15 data"></div>
|
<div class="data14 data"></div>
|
</div>
|
<div class="Y02">
|
<div class="data13 data"></div>
|
<div class="data12 data"></div>
|
<div class="data11 data"></div>
|
<div class="data10 data"></div>
|
<div class="data9 data"></div>
|
<div class="data8 data"></div>
|
<div class="data7 data"></div>
|
</div>
|
<div class="Y01">
|
<div class="data6 data none"></div>
|
<div class="data5 data"></div>
|
<div class="data4 data"></div>
|
<div class="data3 data"></div>
|
<div class="data2 data"></div>
|
<div class="data1 data"></div>
|
<div class="data0 data none"></div>
|
</div>
|
</div>
|
</div>
|
|
|
|
<div class="fbox2">
|
<img src="images/bg_t.png" class="mask">
|
<div class="region_main">
|
<div class="region_1"></div>
|
<div class="region_2"></div>
|
<div class="region_3"></div>
|
<div class="region_4"></div>
|
<div class="region_5"></div>
|
<div class="region_6"></div>
|
<div class="region_7"></div>
|
<div class="region_8"></div>
|
<div class="region_9"></div>
|
</div>
|
<div id="D2">
|
<div class="Y15">
|
<div class="data20 data none"></div>
|
<div class="data19 data none"></div>
|
<div class="data18 data"></div>
|
<div class="data17 data"></div>
|
<div class="data16 data"></div>
|
<div class="data15 data"></div>
|
<div class="data14 data none"></div>
|
</div>
|
<div class="Y14">
|
<div class="data13 data none"></div>
|
<div class="data12 data"></div>
|
<div class="data11 data"></div>
|
<div class="data10 data"></div>
|
<div class="data9 data"></div>
|
<div class="data8 data"></div>
|
<div class="data7 data"></div>
|
</div>
|
<div class="Y13">
|
<div class="data6 data"></div>
|
<div class="data5 data"></div>
|
<div class="data4 data"></div>
|
<div class="data3 data"></div>
|
<div class="data2 data"></div>
|
<div class="data1 data"></div>
|
<div class="data0 data"></div>
|
</div>
|
</div>
|
<div id="C2">
|
<div class="Y12">
|
<div class="data27 data"></div>
|
<div class="data26 data"></div>
|
<div class="data25 data"></div>
|
<div class="data24 data"></div>
|
<div class="data23 data"></div>
|
<div class="data22 data"></div>
|
<div class="data21 data"></div>
|
</div>
|
<div class="Y11">
|
<div class="data20 data"></div>
|
<div class="data19 data"></div>
|
<div class="data18 data"></div>
|
<div class="data17 data"></div>
|
<div class="data16 data"></div>
|
<div class="data15 data"></div>
|
<div class="data14 data"></div>
|
</div>
|
<div class="Y10">
|
<div class="data13 data"></div>
|
<div class="data12 data"></div>
|
<div class="data11 data"></div>
|
<div class="data10 data"></div>
|
<div class="data9 data"></div>
|
<div class="data8 data"></div>
|
<div class="data7 data"></div>
|
</div>
|
<div class="Y09">
|
<div class="data6 data"></div>
|
<div class="data5 data"></div>
|
<div class="data4 data"></div>
|
<div class="data3 data"></div>
|
<div class="data2 data"></div>
|
<div class="data1 data"></div>
|
<div class="data0 data"></div>
|
</div>
|
</div>
|
<div id="B2">
|
<div class="Y08">
|
<div class="data27 data"></div>
|
<div class="data26 data"></div>
|
<div class="data25 data"></div>
|
<div class="data24 data"></div>
|
<div class="data23 data"></div>
|
<div class="data22 data"></div>
|
<div class="data21 data"></div>
|
</div>
|
<div class="Y07">
|
<div class="data20 data"></div>
|
<div class="data19 data"></div>
|
<div class="data18 data"></div>
|
<div class="data17 data"></div>
|
<div class="data16 data"></div>
|
<div class="data15 data"></div>
|
<div class="data14 data"></div>
|
</div>
|
<div class="Y06">
|
<div class="data13 data"></div>
|
<div class="data12 data"></div>
|
<div class="data11 data"></div>
|
<div class="data10 data"></div>
|
<div class="data9 data"></div>
|
<div class="data8 data"></div>
|
<div class="data7 data"></div>
|
</div>
|
<div class="Y05">
|
<div class="data6 data"></div>
|
<div class="data5 data"></div>
|
<div class="data4 data"></div>
|
<div class="data3 data"></div>
|
<div class="data2 data"></div>
|
<div class="data1 data"></div>
|
<div class="data0 data"></div>
|
</div>
|
</div>
|
<div id="A2">
|
<div class="Y04">
|
<div class="data27 data"></div>
|
<div class="data26 data"></div>
|
<div class="data25 data"></div>
|
<div class="data24 data"></div>
|
<div class="data23 data"></div>
|
<div class="data22 data"></div>
|
<div class="data21 data"></div>
|
</div>
|
<div class="Y03">
|
<div class="data20 data"></div>
|
<div class="data19 data"></div>
|
<div class="data18 data"></div>
|
<div class="data17 data"></div>
|
<div class="data16 data"></div>
|
<div class="data15 data"></div>
|
<div class="data14 data"></div>
|
</div>
|
<div class="Y02">
|
<div class="data13 data"></div>
|
<div class="data12 data"></div>
|
<div class="data11 data"></div>
|
<div class="data10 data"></div>
|
<div class="data9 data"></div>
|
<div class="data8 data"></div>
|
<div class="data7 data"></div>
|
</div>
|
<div class="Y01">
|
<div class="data6 data none"></div>
|
<div class="data5 data"></div>
|
<div class="data4 data"></div>
|
<div class="data3 data"></div>
|
<div class="data2 data"></div>
|
<div class="data1 data"></div>
|
<div class="data0 data none"></div>
|
</div>
|
</div>
|
</div>
|
<div class="foot">
|
<div class="dataLeft">
|
<p>左脚</p>
|
<p class="region9"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region8"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region7"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region6"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region5"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region4"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region3"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region1"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
</div>
|
<div class="dataRight">
|
<p>右脚</p>
|
<p class="region9"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region8"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region7"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region6"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region5"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region4"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region3"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region1"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
</div>
|
</div>
|
<div class="chart_line">
|
<div class="chart2" style="width:50%; margin: 80px"><canvas id="chart2"></canvas></div>
|
<div class="chart" style="width:50%; margin: 80px"><canvas id="chart"></canvas></div>
|
</div>
|
<div class="heatmap_box">
|
<div class="left_map"></div>
|
<div class="right_map"></div>
|
</div>
|
|
<script src="./js/charts.js"></script>
|
<script src="./js/region.js"></script>
|
<script src="./js/function.js"></script>
|
<script>
|
|
</script>
|
</body>
|
</html>
|
