rubberTyredCar.html 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta
  6. name="viewport"
  7. content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
  8. />
  9. <meta
  10. name="format-detection"
  11. content="telephone=no,email=no,date=no,address=no"
  12. />
  13. <title></title>
  14. <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  15. <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  16. <link rel="stylesheet" href="../../css/projeck.css" />
  17. <style>
  18. body,
  19. html {
  20. /*background: #F3F3F3;*/
  21. background: rgba(243, 243, 243, 1);
  22. position: relative;
  23. }
  24. .api_layout {
  25. /*border-top: 1px solid #37b0e9;*/
  26. padding: 13px 10px;
  27. -webkit-box-sizing: border-box;
  28. -moz-box-sizing: border-box;
  29. box-sizing: border-box;
  30. }
  31. /*车辆总数 和地下车辆总数*/
  32. .header_car_number {
  33. color: #fff;
  34. font-size: 16px;
  35. font-weight: 700;
  36. }
  37. .header_car_number ul {
  38. display: flex;
  39. justify-content: space-between;
  40. }
  41. .header_car_number ul li {
  42. border-radius: 10px;
  43. text-align: center;
  44. width: 48%;
  45. padding: 12px 8px;
  46. }
  47. .header_car_number ul li:first-child {
  48. background: rgba(230, 126, 34, 1);
  49. }
  50. .header_car_number ul li:last-child {
  51. background: rgba(39, 174, 96, 1);
  52. }
  53. /*车辆数据列表*/
  54. .car_list {
  55. background: rgba(255, 255, 255, 1);
  56. border-radius: 10px;
  57. margin: 10px 0 10px 0;
  58. }
  59. /*头部车辆图片 车牌号 速度等信息*/
  60. .header_container {
  61. display: flex;
  62. justify-content: space-between;
  63. border-bottom: solid 1px #ecf0f1;
  64. }
  65. .header_container_item {
  66. display: flex;
  67. align-items: center;
  68. justify-content: space-between;
  69. padding: 7px 5px 5px 11px;
  70. /*padding: 7px 12px;*/
  71. }
  72. .car_image {
  73. width: 38px;
  74. height: 38px;
  75. }
  76. .registration_number {
  77. padding-left: 9px;
  78. font-size: 16px;
  79. font-weight: 700;
  80. color: rgba(35, 38, 39, 1);
  81. }
  82. .speed_image {
  83. width: 22px;
  84. height: 22px;
  85. }
  86. .speed {
  87. font-weight: bold;
  88. color: rgba(46, 204, 113, 1);
  89. padding-left: 5px;
  90. }
  91. .right_arrow {
  92. width: 12px;
  93. height: 22px;
  94. margin-left: 10px;
  95. display: flex;
  96. align-items: center;
  97. }
  98. /*巷口信息*/
  99. .center_container {
  100. display: flex;
  101. background: rgba(0, 159, 232, 1);
  102. align-items: center;
  103. border-radius: 37px;
  104. margin: 12px;
  105. color: #fff;
  106. }
  107. .center_container ul {
  108. padding: 7px 0 7px 12px;
  109. display: flex;
  110. }
  111. .position_img {
  112. display: flex;
  113. align-items: center;
  114. width: 22px;
  115. height: 22px;
  116. }
  117. /*车辆具体信息*/
  118. .footer_container {
  119. margin: 12px;
  120. }
  121. .footer_container ul {
  122. display: flex;
  123. justify-content: space-between;
  124. }
  125. .footer_container ul:last-child {
  126. padding: 12px 0;
  127. }
  128. .footer_container ul li {
  129. display: flex;
  130. font-size: 14px;
  131. color: rgba(108, 111, 116, 1);
  132. }
  133. /*一键叫车*/
  134. .One_click_call {
  135. display: flex;
  136. align-items: center;
  137. justify-content: center;
  138. position: fixed;
  139. bottom: -85%;
  140. left: 0;
  141. right: 0;
  142. top: 0;
  143. margin: auto;
  144. height: 37px;
  145. width: 120px;
  146. padding: 0 12px;
  147. background: rgba(46, 204, 113, 1);
  148. border-radius: 47px;
  149. color: #ffffff;
  150. z-index: 100;
  151. }
  152. .One_click_call_container {
  153. width: 17px;
  154. height: 21px;
  155. }
  156. </style>
  157. </head>
  158. <body>
  159. <div class="api_layout">
  160. <div id="rubberTyredcarContainer"></div>
  161. </div>
  162. <div class="One_click_call" onclick="Oneclickcall()">
  163. <div class="One_click_call_container">
  164. <img src="../../image/Oneclickcall.png" alt="" />
  165. </div>
  166. <div>一键叫车</div>
  167. </div>
  168. </body>
  169. </html>
  170. <!-- 仓库页面 -->
  171. <script id="rubberTyredcarView" type="text/template">
  172. <div class="header_car_number">
  173. <ul>
  174. <li>
  175. <div>地面总车辆数</div>
  176. <div>{{=it.groundCarCount}}辆</div>
  177. </li>
  178. <li>
  179. <div>井下总车辆数</div>
  180. <div>{{=it.pitCarCount}}辆</div>
  181. </li>
  182. </ul>
  183. </div>
  184. {{ for (var i=0; i
  185. <it.carList.length; i++) { }} <div class="car_list" onclick="openDetails('{{=it.carList[i].CarUserNo}}','{{=it.carList[i].InterzoneNo}}','{{=it.carList[i].Pageid}}')">
  186. <div class="header_container">
  187. <div class="header_container_item">
  188. {{? it.carList[i].CarType == '人车'}}
  189. <div class="car_image"><img src="../../image/ManCar.png" alt=""></div>
  190. {{?? it.carList[i].CarType == '特种车'}}
  191. <div class="car_image"><img src="../../image/SpecialCar.png" alt=""></div>
  192. {{?? it.carList[i].CarType == '防爆指挥车'}}
  193. <div class="car_image"><img src="../../image/ExplosionproofCar.png" alt=""></div>
  194. {{?? it.carList[i].CarType == '货车'}}
  195. <div class="car_image"><img src="../../image/TruckCar.png" alt=""></div>
  196. {{?? it.carList[i].CarType == '低污染皮卡车'}}
  197. <div class="car_image"><img src="../../image/LowpollutionCar.png" alt=""></div>
  198. {{?}}
  199. <div class="registration_number">{{=it.carList[i].CarUserNo}}</div>
  200. </div>
  201. <div class="header_container_item">
  202. <div class="speed_image"><img src="../../image/speed.png" alt=""></div>
  203. <div class="speed">{{=it.carList[i].AvgSpeed}}km/h</div>
  204. <div class="right_arrow"><img src="../../image/more.png" alt=""></div>
  205. </div>
  206. </div>
  207. <div class="center_container">
  208. <ul>
  209. <li class="position_img"><img src="../../image/position.png" alt=""></li>
  210. <li class="alley_name">{{=it.carList[i].InterzoneName}}</li>
  211. </ul>
  212. </div>
  213. <div class="footer_container">
  214. <ul>
  215. <li>
  216. <div>车辆型号:</div>
  217. <div> {{=it.carList[i].CarModel}} </div>
  218. </li>
  219. <li>
  220. <div>设备类型:</div>
  221. <div>{{=it.carList[i].DeviceType}}</div>
  222. </li>
  223. </ul>
  224. <ul>
  225. <li>
  226. <div>车辆类型:</div>
  227. <div>{{=it.carList[i].CarType}}</div>
  228. </li>
  229. <li>
  230. <div>平均速度:</div>
  231. <div>{{=it.carList[i].AvgSpeed}}</div>
  232. </li>
  233. </ul>
  234. </div>
  235. </div>
  236. {{ } }}
  237. </script>
  238. <script type="text/javascript" src="../../script/api.js"></script>
  239. <script src="../../script/doT.min.js" charset="utf-8"></script>
  240. <script src="../../script/config.js" charset="utf-8"></script>
  241. <script type="text/javascript"></script>
  242. <script>
  243. var toast = new auiToast();
  244. apiready = function () {
  245. getrubberTyredCarList();
  246. };
  247. function getrubberTyredCarList() {
  248. $http.fnReuestDataNologing(
  249. zaoquanUrlRouter.rubberTyredCarList,
  250. '',
  251. 'get',
  252. '',
  253. function (ret, err) {
  254. // console.log(JSON.stringify());
  255. if (ret.code == 0) {
  256. $apis.html(rubberTyredcarContainer, '#rubberTyredcarView', ret.data);
  257. }
  258. }
  259. );
  260. }
  261. function openDetails(CarUserNo, InterzoneNo, Pageid) {
  262. const pageParams = {
  263. CarUserNo: CarUserNo,
  264. InterzoneNo: InterzoneNo,
  265. Pageid: Pageid,
  266. };
  267. $event.openTabLayout(
  268. 'rubberTypedCarDetails',
  269. '../productionData/rubberTypedCarDetails',
  270. CarUserNo,
  271. pageParams
  272. );
  273. }
  274. function Oneclickcall() {
  275. api.call({
  276. type: 'tel_prompt',
  277. number: '8811',
  278. });
  279. }
  280. </script>