index.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>设备数据</title>
  6. <script type="text/javascript" src="__static__/js/jquery-1.10.2.min.js"></script>
  7. <script type="text/javascript" src="__static__/js/echarts.common.min.js"></script>
  8. <link rel="stylesheet" href="__static__/css/bootstrap.min.css">
  9. <script type="text/javascript" src="__static__/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <div class="container-fluid">
  13. <div class="row">
  14. <div class="col-md-4">
  15. <div style="margin-top: 80px; margin-left: 40px;">
  16. <h1>设备详情</h1>
  17. <p class="">设备编号: {$device.device_id}</p>
  18. <p class="">设备名称: {$device.name}</p>
  19. <p class="">所属单位: {$company.name}</p>
  20. <p class="">单位地址: {$company.address}</p>
  21. <p class="">单位邮箱: {$company.phone}</p>
  22. <p class="">经纬度: {$device.jing},{$device.wei}</p>
  23. <p class="">详细地址: {$device.address}</p>
  24. <p class="">压力上下限: {$device.up} - {$device.down} </p>
  25. <p class="">添加时间: {$device.addtime}</p>
  26. </div>
  27. </div>
  28. <div class="col-md-8">
  29. <div class="row">
  30. <div id="table" style="width: 100%;height:400px;"></div>
  31. </div>
  32. <div class="row">
  33. <h1>设备历史数据</h1>
  34. <table class="table table-hover">
  35. <thead>
  36. <th>设备压力值</th>
  37. <th>状态</th>
  38. <th>时间</th>
  39. </thead>
  40. <tbody>
  41. {volist name="device_history" id="vo"}
  42. <tr>
  43. <td>{$vo['pressure']} &nbsp; Mpa.g</td>
  44. <td>{if $vo['status']==1} 正常
  45. {elseif $vo['status']==2 }超压
  46. {elseif $vo['status']==3 }低压
  47. {else/} 离线
  48. {/if}
  49. </td>
  50. <td>{$vo['addtime']}</td>
  51. </tr>
  52. {/volist}
  53. </tbody>
  54. </table>
  55. <p>{$pages}</p>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <script>
  61. var myChart = echarts.init(document.getElementById('table'));
  62. var data={$data};
  63. var datax=data.x;
  64. var datay=data.y;
  65. console.log(data);
  66. myChart.setOption({
  67. title: {
  68. text: '设备压力数据'
  69. },
  70. tooltip: {},
  71. legend: {
  72. data:['水压值']
  73. },
  74. xAxis: {
  75. data: datax
  76. },
  77. yAxis: {},
  78. series: [{
  79. name: '销量',
  80. type: 'line',
  81. data: datay
  82. }]
  83. });
  84. </script>
  85. </body>
  86. </html>