<!DOCTYPE html>
|
<html>
|
<head>
|
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
|
<title>智能鞋垫</title>
|
<link rel="stylesheet" href="css/insole.css">
|
<link rel="stylesheet" href="icon/remixicon.css">
|
<link rel="stylesheet" href="./css/style.css">
|
<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>
|
<script src="./js/excel.js"></script>
|
<script src="./js/jspdf.js"></script>
|
<script src="./js/html2canvas.js"></script>
|
</head>
|
<body>
|
<div class="main">
|
<div class="sidebar">
|
<img src="images/logo.png" class="logo">
|
<nav class="menu">
|
<ul class="">
|
<li class="current"><a href="#region_demo">分区</a> </li>
|
<li><a href="#circle-line">曲线图</a></li>
|
<li><a href="#heatmap">热力图</a></li>
|
<li><a href="#chart-container">3D等高</a></li>
|
<li><a href="#">1</a></li>
|
</ul>
|
</nav>
|
<div class="logout"></div>
|
</div>
|
<div class="wrapper">
|
<!-- <div class="key">
|
<span class="color1">0-200</span>
|
<span class="color2">201-300</span>
|
<span class="color3">301-500</span>
|
<span class="color4">501-800</span>
|
<span class="color5">801-1200</span>
|
<span class="color6">1201-1700</span>
|
<span class="color7">1701-2500</span>
|
</div> -->
|
<div class="operate">
|
<button class="btn start"><i class="ri-play-circle-line"></i> 采集</button>
|
<button class="btn end"><i class="ri-stop-circle-line"></i> 结束</button>
|
<button class="btn last"><i class="ri-skip-back-mini-fill"></i> 上一帧</button>
|
<button class="btn next"><i class="ri-skip-forward-mini-fill"></i> 下一帧</button>
|
<button class="btn back"><i class="ri-repeat-2-fill"></i> 回放</button>
|
<button class="btn download"><i class="ri-download-2-fill"></i> 导出报告</button>
|
<button class="btn"><i class="ri-repeat-2-fill"></i><input style="opacity: 0;cursor:pointer;position: absolute;left: 0;top: 0;" type="file" id="excel-file-left" multiple>左脚文件</button>
|
<button class="btn"><i class="ri-download-2-fill"></i> <input style="opacity: 0;cursor:pointer;position: absolute;left: 0;top: 0;" type="file" id="excel-file-right" multiple>右脚文件</button>
|
</div>
|
|
<div class="container">
|
<div style="width: 100%;min-width: 1200px; height: 3000px; border: 1px solid #000;position: relative;">
|
<div id="region_demo" style="text-align: center;height: 50px;line-height: 50px;font-size: 20px;">分区示例</div>
|
<div class="xiedian">
|
<!-- 左脚 -->
|
<div id="region" 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>
|
|
|
|
<!-- 数据框 -->
|
<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>
|
<p></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>
|
<p></p>
|
</div>
|
</div>
|
|
<!-- 总览数据框 -->
|
<div class="region_data">
|
<div class="dataLeft">
|
<p>左脚(总)</p>
|
<p class="region9_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region8_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region7_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region6_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region5_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region4_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region3_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region2_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region1_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="sum_region_2"><span class="colorCircle"></span>总值:<span class="ave"></p>
|
</div>
|
<div class="dataRight">
|
<p>右脚(总)</p>
|
<p class="region9_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region8_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region7_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region6_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region5_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region4_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region3_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region2_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="region1_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
|
<p class="sum_region_2"><span class="colorCircle"></span>总值:<span class="ave"></p>
|
</div>
|
</div>
|
|
<!-- chart曲线 -->
|
<div id="circle-line" style="position: relative;height: 50px;font-size: 20px; margin-top: 100px;top: 500px;">曲线图</div>
|
<div class="chart_line">
|
<div class="chart2" style="width:47%;"><canvas id="chart2"></canvas></div>
|
<div class="chart" style="width:47%;"><canvas id="chart"></canvas></div>
|
</div>
|
|
<!-- heatmap热力图 -->
|
<div id="heatmap" style="position: relative;height: 50px;font-size: 20px;text-align: center; margin-top: 100px;top: 300px;">受力图</div>
|
<div class="heatmap_box">
|
<div class="left_map"></div>
|
<div class="left_map_top"></div>
|
<div class="left_map_middle"></div>
|
<div class="left_map_buttom"></div>
|
<div class="right_map_buttom"></div>
|
<div class="right_map_middle"></div>
|
<div class="right_map_top"></div>
|
<div class="right_map"></div>
|
</div>
|
<!-- <div class="heatmap_box">
|
<div class="right_map"></div>
|
<div class="right_map_top"></div>
|
<div class="right_map_middle"></div>
|
<div class="right_map_buttom"></div>
|
</div> -->
|
|
|
<div id="heatmap3d" style="position: relative;height: 50px;font-size: 20px;text-align: center; margin-top: 100px;">重力等高线</div>
|
<div name="threeD" id="chart-container"></div>
|
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script src="./js/3d_data.js"></script>
|
<script src="./js/echarts.min.js"></script>
|
<script src="./js/echarts.gl.min.js"></script>
|
<script src="./js/charts.js"></script>
|
|
<!-- 9分区数据和JS -->
|
<!-- <script src="./js/region.js"></script>
|
<script src="./js/function.js"></script> -->
|
|
<!-- 七分区数据和JS -->
|
<script src="./js/region7.js"></script>
|
<script src="./js/function_7.js"></script>
|
<script src="./js/dpdf.js"></script>
|
</body>
|
</html>
|