|
|
@@ -2,27 +2,110 @@
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+ <script src="https://web.tianyunperfect.cn/util.js"></script>
|
|
|
<title>location_list</title>
|
|
|
<script src="js/axios.min.js"></script>
|
|
|
<script src="js/vue.min.js"></script>
|
|
|
+ <style>
|
|
|
+ .container {
|
|
|
+
|
|
|
+ width: 500px;
|
|
|
+
|
|
|
+ height: 50px;
|
|
|
+
|
|
|
+ margin: 100px auto;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .parent {
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ height: 42px;
|
|
|
+
|
|
|
+ top: 4px;
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .parent > input:first-of-type {
|
|
|
+
|
|
|
+ /*输入框高度设置为40px, border占据2px，总高度为42px*/
|
|
|
+
|
|
|
+ width: 380px;
|
|
|
+
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ border: 1px solid #ccc;
|
|
|
+
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ outline: none;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .parent > input:first-of-type:focus {
|
|
|
+
|
|
|
+ border: 1px solid #317ef3;
|
|
|
+
|
|
|
+ padding-left: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .parent > input:last-of-type {
|
|
|
+ /*button按钮border并不占据外围大小，设置高度42px*/
|
|
|
+ width: 100px;
|
|
|
+ height: 44px;
|
|
|
+ position: absolute;
|
|
|
+ background: #317ef3;
|
|
|
+ border: 1px solid #317ef3;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<table>
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <td>事件</td>
|
|
|
- <td>地点</td>
|
|
|
- <td>信息</td>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody id="tby">
|
|
|
- <tr v-for="(item,index) in list">
|
|
|
- <td>{{new Date(item.create_time).format("yyyy-MM-dd hh:mm:ss")}}</td>
|
|
|
- <td>{{item.location_xy}}--{{item.location_str}}</td>
|
|
|
- <td>{{item.msg}}</td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
-</table>
|
|
|
+<div id="tby">
|
|
|
+ <div class="container">
|
|
|
+ <form action="" class="parent">
|
|
|
+ <input type="text" v-model="msg">
|
|
|
+ <input type="button" value="搜索" @click="search">
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <td>事件</td>
|
|
|
+ <td>地点</td>
|
|
|
+ <td>信息</td>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item,index) in list">
|
|
|
+ <td>{{new Date(item.create_time).format("yyyy-MM-dd hh:mm:ss")}}</td>
|
|
|
+ <td>
|
|
|
+ <a :href="'https://api.map.baidu.com/marker?location='+ item.location_xy + '&title=' + item.msg + '&content=&output=html&src=webapp.baidu.openAPIdemo'"
|
|
|
+ target="_blank">{{item.location_xy}}</a>
|
|
|
+ </td>
|
|
|
+ <td>{{item.msg}}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <!-- 分页按钮 -->
|
|
|
+ <div class="page-icon">
|
|
|
+ <button class="firstPage" @click="first_click">第一页</button>
|
|
|
+ <button class="beforePage" @click="prev_click">上一页</button>
|
|
|
+ <button>第<input v-model="page" @change="choose_page" type="text" value="1"/>页</button>
|
|
|
+ <button class="nextPage" @click="next_click">下一页</button>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
|
|
|
<script>
|
|
|
Date.prototype.format = function (fmt) {
|
|
|
@@ -49,21 +132,53 @@
|
|
|
new Vue({
|
|
|
el: '#tby',
|
|
|
data: {
|
|
|
+ page: 1,
|
|
|
+ size: 1000,
|
|
|
+ msg: "",
|
|
|
+ user_id: "",
|
|
|
list: []
|
|
|
},
|
|
|
mounted: function () {
|
|
|
- let _this = this;
|
|
|
- axios.get("https://api.tianyunperfect.cn/web_history/location_history").then(res => {
|
|
|
- if (res.data.code === 1) {
|
|
|
- _this.list = res.data.data;
|
|
|
- }
|
|
|
- });
|
|
|
+ this.user_id = getQueryString("user_id");
|
|
|
+ this.search();
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ first_click: function () {
|
|
|
+ this.page = 1;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ prev_click: function () {
|
|
|
+ this.page -= 1;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ choose_page: function () {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ next_click: function () {
|
|
|
+ this.page += 1;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ getParam: function () {
|
|
|
+ let obj = {};
|
|
|
+ obj['user_id'] = this.user_id;
|
|
|
+ obj['limit1'] = (this.page - 1) * this.size;
|
|
|
+ obj['limit2'] = this.page * this.size;
|
|
|
+ if (this.msg.length > 0) {
|
|
|
+ obj["msg"] = this.msg;
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ search: function () {
|
|
|
+ let _this = this;
|
|
|
+ axios.get("https://api.tianyunperfect.cn/web_history/location_history", {params: this.getParam()}).then(res => {
|
|
|
+ if (res.data.code === 1) {
|
|
|
+ _this.list = res.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
- function sendMsg() {
|
|
|
-
|
|
|
- }
|
|
|
|
|
|
</script>
|
|
|
</body>
|
