tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记录</title>
    <script src="https://web.tianyunperfect.cn/simple/js/util.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
    <style>
        #getLocationBtn {
            transform: scale(3);
        }

        #app {
            position: relative;
        }

        #getLocationBtn {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
        }

        #my_li {
            position: absolute;
            top: calc(20% + 50px); /* 调整按钮下方的间距，根据需要修改数值 */
        }
    </style>
    <script>
        window.addEventListener('load', function () {
            var app = document.body;
            var startY;
            var dist;
            var threshold = 100; // 下拉刷新的阈值

            app.addEventListener('touchstart', function (e) {
                startY = e.touches[0].clientY;
            });

            app.addEventListener('touchmove', function (e) {
                dist = e.touches[0].clientY - startY;
                if (dist > threshold) {
                    // 执行刷新操作
                    location.reload();
                }
            });
        });
    </script>
</head>
<body>
<div id="app" class="container">
    <div class="row justify-content-center mt-5">
        <button id="getLocationBtn" class="btn btn-primary btn-lg" v-on:click="sendLocationToBackend">记录</button>
    </div>
    <div class="row justify-content-center mt-5" id="my_li">
        <ul>
            <li v-for="item in createdList">{{ convertToBeijingTime(item.created_at) }} &nbsp;&nbsp;&nbsp;&nbsp;
                <button class="deleteBtn" v-on:click="confirmDelete(item.id)">删除</button>
            </li>

        </ul>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
<script src="https://api.map.baidu.com/api?v=2.0&ak=WMYeXwq7z0VcaiUXTuYTGPZsm8Selmfd"></script>
<script>

    function convertToBeijingTime(dateString) {
        // 创建 Date 对象，将字符串解析为日期
        const date = new Date(dateString);

        // 转换为北京时间
        const beijingTime = date.toLocaleString('zh-CN', {
            timeZone: 'Asia/Shanghai',
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });

        return beijingTime;
    }

    const app = new Vue({
        el: '#app',
        data: {
            longitude: "0",
            latitude: "0",
            locationStr: "未知",
            createdList: []
        },
        mounted: function () {
            this.getLocation();
            this.getLatestData(); // 获取最新的数据
        },
        methods: {
            confirmDelete: function (id) {
                if (confirm("确认要删除吗？")) {
                    // 发送删除请求
                    const deleteUrl = `https://api.tianyunperfect.cn/location/point_delete?id=${id}`;
                    fetch(deleteUrl, {method: 'DELETE'}).then(response => {
                        if (response.ok) {
                            app.getLatestData();
                        }
                    })
                }
            },
            // 获取地址位置的名字
            getLocationStr: function (longitude, latitude) {
                // 创建地理编码实例, 并配置参数获取乡镇级数据
                const myGeo = new BMap.Geocoder({extensions_town: true});
                // 根据坐标得到地址描述
                myGeo.getLocation(new BMap.Point(longitude, latitude), function (result) {
                    if (result) {
                        app.locationStr = result.address;
                    }
                });
            },

            // 获取经纬度
            getLocation: function () {
                // 创建百度地理位置实例，代替 navigator.geolocation
                let _this = this;
                const geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function (e) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                        _this.latitude = e.point.lat;
                        _this.longitude = e.point.lng;
                        _this.getLocationStr(_this.longitude, _this.latitude);
                    }
                });
            },
            getLatestData: async function () {
                try {
                    const response = await axios.get('https://api.tianyunperfect.cn/location/page?page=1&size=10');
                    this.createdList = response.data.data.list;
                } catch (error) {
                    console.log(error);
                }
            },
            sendLocationToBackend: async function () {
                const data = {
                    location: app.locationStr,
                    longitude: app.longitude,
                    latitude: app.latitude,
                    created_by: "b90c0cf6997d4cfa987f2bc59583fcaa"
                };
                axios.post('https://api.tianyunperfect.cn/location/point', data)
                    .then(async function (response) {
                        console.log(response.data);
                        let res = response.data;
                        showMsg(res.message, 2);
                        await app.getLatestData();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

        }
    });
</script>
</body>
</html>