index.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1" />
  7. <meta name="format-detection" content="telephone=no" />
  8. <title>潜山市数据局车辆停车系统</title>
  9. <meta name="keywords" content="潜山市数据局车辆停车系统">
  10. <meta name="description" content="潜山市数据局车辆停车系统">
  11. <script src="static/js/vue.js"></script>
  12. <script type="text/javascript" src="static/js/vue-router.js"></script>
  13. <script src="static/js/index.js" type="text/javascript"></script>
  14. <script type="text/javascript" src="./static/js/jquery.min.js"></script>
  15. <script src="static/js/common.js"></script>
  16. <link href="static/css/common.css" rel="stylesheet" />
  17. <link href="static/css/style.css" rel="stylesheet" />
  18. <link rel="stylesheet" href="static/css/theme-chalk/index.css">
  19. <style></style>
  20. </head>
  21. <body class="qtbox">
  22. <!-- <div class="qsback">
  23. <img src="static/images/back_white.png" class="backimg" />
  24. </div> -->
  25. <div id="app">
  26. <main>
  27. <div>
  28. <img src="static/images/qstit.png" class="qt_tit"/>
  29. </div>
  30. <div class="tc mb18">
  31. <div class="qt_txt">
  32. <div class="qt_txta">潜山数据局地面停车场</div>
  33. <div class="qt_line"></div>
  34. </div>
  35. </div>
  36. <div class="qrnum">
  37. <div class="flexc mb18">
  38. <img src="static/images/timeleft.png" class="qrnuml"/>
  39. <div class="qrnumt" id="myTime"></div>
  40. <img src="static/images/timeright.png" class="qrnuml"/>
  41. </div>
  42. <div class="qrnum_line"></div>
  43. <div class="qrnumb">
  44. <div class="qt_txt">
  45. <div class="qrnumn">{{parknum}}</div>
  46. <div class="qt_shadow"></div>
  47. </div>
  48. <span class="qrnumbs flexcj">个</span>
  49. </div>
  50. <div class="qrnumftit">当前空余地面停车位</div>
  51. </div>
  52. </main>
  53. </div>
  54. <!-- 底部 -->
  55. <div>
  56. <img src="static/images/bgf.png" class="qtdown"/>
  57. </div>
  58. <script type="text/javascript">
  59. var app = new Vue({
  60. el: '#app',
  61. data: {
  62. base_url: 'https://qssjtc.qs163.cn/prod-api',
  63. timefn:'',
  64. parknum:0,
  65. },
  66. created() {
  67. window.clearInterval(this.timefn);
  68. this.gettimeFn();
  69. this.getDataFn()
  70. },
  71. mounted() {
  72. },
  73. methods: {
  74. getDataFn() {
  75. var that = this;
  76. var params={}
  77. $.ajax({
  78. url: this.base_url + '/parkLot/parkLotNum',
  79. type: 'POST',
  80. data: {},
  81. dataType: 'json',
  82. success: function(res) {
  83. that.loading=false;
  84. if(res.code){
  85. if (res.code == 200) {
  86. that.parknum = res.data;
  87. } else {
  88. that.$message({
  89. message: res.msg,
  90. type: 'error',
  91. center: true,
  92. });
  93. }
  94. }else{
  95. that.parknum=res;
  96. }
  97. },
  98. fail:function(res){
  99. that.loading=false;
  100. that.$message({
  101. message: "网络请求错误",
  102. type: 'error',
  103. center: true,
  104. });
  105. }
  106. })
  107. },
  108. gettimeFn() {
  109. var that = this;
  110. that.getCurrentDate()
  111. that.timefn = setInterval(function() {
  112. that.getCurrentDate()
  113. }, 1000)
  114. },
  115. // 获取当前时间
  116. getCurrentDate() {
  117. var date = new Date();
  118. var y = date.getFullYear();
  119. var m = date.getMonth() + 1;
  120. var d = date.getDate();
  121. var h = date.getHours();
  122. var min = date.getMinutes();
  123. var s = date.getSeconds();
  124. var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
  125. var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  126. var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' '
  127. var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
  128. '0' + s) : s);
  129. var time = yearStr + timeStr
  130. $("#myTime").html(time);
  131. },
  132. }
  133. })
  134. </script>
  135. <script type="text/javascript">
  136. $(document).ready(function() {
  137. window.clearInterval(this.timefn);
  138. $('.backimg').click(function() {
  139. window.clearInterval(this.timefn);
  140. window.history.go(-1)
  141. })
  142. })
  143. </script>
  144. </body>
  145. </html>