|
@@ -0,0 +1,288 @@
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
+<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>
|
|
|
|
+ <script src="https://api.map.baidu.com/api?v=2.0&ak=WMYeXwq7z0VcaiUXTuYTGPZsm8Selmfd"></script>
|
|
|
|
+ <style>
|
|
|
|
+ .container {
|
|
|
|
+
|
|
|
|
+ width: 500px;
|
|
|
|
+
|
|
|
|
+ height: 50px;
|
|
|
|
+
|
|
|
|
+ margin: 20px 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>
|
|
|
|
+<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>id</td>
|
|
|
|
+ <td>时间</td>
|
|
|
|
+ <td>经纬度</td>
|
|
|
|
+ <td>附加信息</td>
|
|
|
|
+ <td>猜测位置</td>
|
|
|
|
+ <td>与我大概距离</td>
|
|
|
|
+ <td>操作</td>
|
|
|
|
+ </tr>
|
|
|
|
+ </thead>
|
|
|
|
+ <tbody>
|
|
|
|
+ <tr v-for="(item,index) in list">
|
|
|
|
+ <td>{{item.id}}</td>
|
|
|
|
+ <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>
|
|
|
|
+ <td>{{item.location_str}}</td>
|
|
|
|
+ <td>{{item['distance']}}</td>
|
|
|
|
+ <td>
|
|
|
|
+ <span @click="to_update(item)">跳转更新</span>
|
|
|
|
+ <span> | | | | </span>
|
|
|
|
+ <span @click="delete_by_id(item.id)">删除</span>
|
|
|
|
+ </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>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <hr>
|
|
|
|
+ <p>根据 id 更新</p>
|
|
|
|
+ <input v-model="update_id" placeholder="id" id="update_id">
|
|
|
|
+ <input v-model="update_msg" placeholder="信息">
|
|
|
|
+ <button @click="update">更新</button>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+
|
|
|
|
+ Date.prototype.format = function (fmt) {
|
|
|
|
+ var o = {
|
|
|
|
+ "M+": this.getMonth() + 1, //月份
|
|
|
|
+ "d+": this.getDate(), //日
|
|
|
|
+ "h+": this.getHours(), //小时
|
|
|
|
+ "m+": this.getMinutes(), //分
|
|
|
|
+ "s+": this.getSeconds(), //秒
|
|
|
|
+ "q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
|
|
|
+ "S": this.getMilliseconds() //毫秒
|
|
|
|
+ };
|
|
|
|
+ if (/(y+)/.test(fmt)) {
|
|
|
|
+ fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
|
|
+ }
|
|
|
|
+ for (var k in o) {
|
|
|
|
+ if (new RegExp("(" + k + ")").test(fmt)) {
|
|
|
|
+ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return fmt;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const scrollElement = (el) => {
|
|
|
|
+ document.querySelector(el).scrollIntoView({behavior: 'smooth'});
|
|
|
|
+ }
|
|
|
|
+ let longitude = '';
|
|
|
|
+ let latitude;
|
|
|
|
+
|
|
|
|
+ // 获取经纬度
|
|
|
|
+ function getLocation() {
|
|
|
|
+ // 创建百度地理位置实例,代替 navigator.geolocation
|
|
|
|
+ var geolocation = new BMap.Geolocation();
|
|
|
|
+ geolocation.getCurrentPosition(function (e) {
|
|
|
|
+ if (this.getStatus() == BMAP_STATUS_SUCCESS) {
|
|
|
|
+ // 百度 geolocation 的经纬度属性不同,此处是 point.lat 而不是 coords.latitude
|
|
|
|
+ latitude = e.point.lat;
|
|
|
|
+ longitude = e.point.lng;
|
|
|
|
+
|
|
|
|
+ _this.updateLocationStr();
|
|
|
|
+ } else {
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ getLocation();
|
|
|
|
+
|
|
|
|
+ let _this = new Vue({
|
|
|
|
+ el: '#tby',
|
|
|
|
+ data: {
|
|
|
|
+ update_id: '',
|
|
|
|
+ update_msg: '',
|
|
|
|
+ page: 1,
|
|
|
|
+ size: 1000,
|
|
|
|
+ msg: "",
|
|
|
|
+ user_id: "",
|
|
|
|
+ list: []
|
|
|
|
+ },
|
|
|
|
+ mounted: function () {
|
|
|
|
+ this.user_id = getQueryString("user_id");
|
|
|
|
+ this.search();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ updateLocationStr() {
|
|
|
|
+ for (const item of _this.list) {
|
|
|
|
+ if (item.location_xy.indexOf("un") < 0 && longitude.toString().length > 2) {
|
|
|
|
+ let split = item.location_xy.split(",");
|
|
|
|
+ item['distance'] = _this.getDistance(split[1], split[0], longitude, latitude);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ _this.$forceUpdate();
|
|
|
|
+ },
|
|
|
|
+ getDistance(lon1, lat1, lon2, lat2) {
|
|
|
|
+ const map = new BMap.Map("allmap");
|
|
|
|
+ const pointA = new BMap.Point(lon1, lat1); // 创建点坐标A
|
|
|
|
+ const pointB = new BMap.Point(lon2, lat2); // 创建点坐标B
|
|
|
|
+ const range = map.getDistance(pointA, pointB).toFixed(2); //获取两点距离,保留小数点后两位
|
|
|
|
+ return range;
|
|
|
|
+ },
|
|
|
|
+ delete_by_id: function (id) {
|
|
|
|
+ if (confirm("确定要删除吗?不可恢复!!!")) {
|
|
|
|
+ axios.get("https://api.tianyunperfect.cn/web_history/location_delete", {
|
|
|
|
+ params: {
|
|
|
|
+ "id": id,
|
|
|
|
+ "user_id": _this.user_id,
|
|
|
|
+ }
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.data.code === 1) {
|
|
|
|
+ _this.search();
|
|
|
|
+ _this.update_id = '';
|
|
|
|
+ _this.update_msg = '';
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ to_update: function (item) {
|
|
|
|
+ this.update_id = item.id;
|
|
|
|
+ if (item.msg && item.msg.length > 1) {
|
|
|
|
+ this.update_msg = item.msg;
|
|
|
|
+ }
|
|
|
|
+ scrollElement("#update_id");
|
|
|
|
+ },
|
|
|
|
+ update: function () {
|
|
|
|
+ axios.get("https://api.tianyunperfect.cn/web_history/location_update", {
|
|
|
|
+ params: {
|
|
|
|
+ "id": _this.update_id,
|
|
|
|
+ "user_id": _this.user_id,
|
|
|
|
+ "msg": _this.update_msg
|
|
|
|
+ }
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.data.code === 1) {
|
|
|
|
+ _this.search();
|
|
|
|
+ _this.update_id = '';
|
|
|
|
+ _this.update_msg = '';
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ 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 () {
|
|
|
|
+ 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;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+</body>
|
|
|
|
+</html>
|