0322

cshenfu

2023-03-22 0f396039885600f920cb041a10b71001e6960917

 read_com/index.html

@@ -14,140 +14,61 @@
    <script src="./js/excel.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>
      <label>左脚：<input type="file" id="excel-file-left"></label>
      <label>右脚：<input type="file" id="excel-file-right"></label>
    </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>
  <label>左脚：<input type="file" id="excel-file-left"></label>
  <label>右脚：<input type="file" id="excel-file-right"></label>
</div>

   </div>
</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="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"></div>
        </div>
        <div class="Y06">
          <div class="data13 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="Y05">
      </div>
      <div class="Y13">
          <div class="data6 data"></div>
          <div class="data5 data"></div>
          <div class="data4 data"></div>
@@ -155,10 +76,10 @@
          <div class="data2 data"></div>
          <div class="data1 data"></div>
          <div class="data0 data"></div>
        </div>
    </div>
    <div id="A">
        <div class="Y04">
      </div>
  </div>
  <div id="C">
      <div class="Y12">
          <div class="data27 data"></div>
          <div class="data26 data"></div>
          <div class="data25 data"></div>
@@ -166,8 +87,8 @@
          <div class="data23 data"></div>
          <div class="data22 data"></div>
          <div class="data21 data"></div>
        </div>
        <div class="Y03">
      </div>
      <div class="Y11">
          <div class="data20 data"></div>
          <div class="data19 data"></div>
          <div class="data18 data"></div>
@@ -175,8 +96,8 @@
          <div class="data16 data"></div>
          <div class="data15 data"></div>
          <div class="data14 data"></div>
        </div>
        <div class="Y02">
      </div>
      <div class="Y10">
          <div class="data13 data"></div>
          <div class="data12 data"></div>
          <div class="data11 data"></div>
@@ -184,17 +105,93 @@
          <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>
      <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 none"></div>
        </div>
    </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>


@@ -384,35 +381,7 @@
        <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="left_map_top"></div> 
  <div class="left_map_middle"></div>
  <div class="left_map_buttom"></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="chart-container"></div>


</div>

<!-- 总览 -->
<!-- 总览数据框 -->
<div class="region_data">
  <div class="dataLeft">
    <p>左脚(总)</p>
@@ -441,13 +410,46 @@
    <p class="sum_region_2"><span class="colorCircle"></span>总值:<span class="ave"></p>
</div>
</div>

<!-- chart曲线 -->
<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>

<!-- heatmap热力图 -->
<div class="heatmap_box" style="display: none;">
  <div class="left_map"></div>
  <div class="left_map_top"></div> 
  <div class="left_map_middle"></div>
  <div class="left_map_buttom"></div>
</div>
<div class="heatmap_box" style="display: none;">
  <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="chart-container"></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>
<script src="./js/region.js"></script> -->
<script src="./js/function.js"></script>
<!-- <script src="./js/region7.js"></script>
<script src="./js/function_7.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>
  </body>
</html>