drivingTrack.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>下井记录</title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9. <link rel="stylesheet" href="../../css/animate.css">
  10. <link rel="stylesheet" href="../../css/style.css">
  11. <style>
  12. body,
  13. html {
  14. background: #fff;
  15. }
  16. .month_list_info {
  17. min-width: 110px;
  18. margin-left: 9.5px;
  19. float: left;
  20. flex: 1;
  21. position: relative;
  22. display: flex;
  23. justify-content: space-around;
  24. align-items: center;
  25. color: #009FE8;
  26. border-radius: 10px;
  27. border: 1px solid rgba(0, 159, 232, 1);
  28. padding: 8px 5px;
  29. }
  30. .month_list_info:first-child {
  31. width: 220px;
  32. background: rgba(0, 159, 232, 1);
  33. border-radius: 10px;
  34. color: #FFFFFF;
  35. }
  36. .month_list_info:first-child {
  37. margin-left: 0
  38. }
  39. .month_info_list li {
  40. display: flex;
  41. /*justify-content: space-around;*/
  42. align-items: center;
  43. height: 51px;
  44. border-bottom: solid 1px #F5F5F5;
  45. background: #fff;
  46. color: #2980B9
  47. }
  48. .month_info_list li:first-child {
  49. font-size: 14px;
  50. font-weight: 500;
  51. color: #232627;
  52. background: rgba(243, 246, 250, 1);
  53. border-bottom: none
  54. }
  55. .month_info_list li .item {
  56. width: 25%;
  57. text-align: center;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div class="api_layout">
  63. <!-- <div id="headerInfo"></div>
  64. <div id="MonthOnce"></div> -->
  65. <div id="monthList"></div>
  66. <!-- <div id="monthInfoList"></div> -->
  67. </div>
  68. </body>
  69. </html>
  70. <script type="text/javascript" src="../../script/api.js"></script>
  71. <script type="text/javascript" src="../../script/zepto.js"></script>
  72. <script src="../../script/config.js" charset="utf-8"></script>
  73. <script src="../../script/doT.min.js" charset="utf-8"></script>
  74. <script type="text/template" id="monthInfoView">
  75. <ul class="month_info_list">
  76. <li style="position: fixed;top: 0;width: 100%">
  77. <div class="item">时间</div>
  78. <div class="item">区域</div>
  79. <div class="item">位置</div>
  80. <div class="item">驻留时长</div>
  81. </li>
  82. {{ for(var i = 0; i
  83. < it.length; i++ ) { }} <li>
  84. <div class="item">
  85. <div>{{=it[i].time}}</div>
  86. </div>
  87. <div class="item">
  88. <div>{{=it[i].area}}</div>
  89. </div>
  90. <div class="item month_info">{{=it[i].station}}</div>
  91. <div class="item times_info">{{=it[i].slot}}</div>
  92. </li>
  93. {{ } }}
  94. </ul>
  95. </script>
  96. <script type="text/javascript">
  97. apiready = function() {
  98. let downtime = api.pageParam.downtime;
  99. getOnceInfo(downtime)
  100. }
  101. function getOnceInfo(downtime) {
  102. $http.requestData(UrlRouter.getOnceInfo, 'post', {
  103. downtime: downtime
  104. })
  105. .then(ret => {
  106. if (ret.code == 0) {
  107. $apis.html(monthList, '#monthInfoView', ret.data);
  108. }
  109. })
  110. .catch((err) => {
  111. // console.log(JSON.stringify(err));
  112. });
  113. }
  114. </script>