tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
							<!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);
            width: 100vw;
        }
        .pagination a.current {
            font-weight: bold;
            color: #534d4d;
        }
    </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" id="my_li">
        <ul>
            <li v-for="(item, index) in createdList">{{ convertToBeijingTime(item.created_at) }} &nbsp;&nbsp;&nbsp;&nbsp;
                <button class="deleteBtn" v-on:click="confirmDelete(item.id)">删除</button>&nbsp;
                <button class="eventBtn" v-on:click="addEvent(index)">事件</button>
            </li>
            <br/>
            <div class="pagination">
                <a href="#" @click.prevent="changePage(page-1)" :disabled="page === 1">上一页</a>&nbsp;
                <a
                        v-for="p in visiblePages"
                        @click="changePage(p)"
                        :class="{ current: p === page }"
                >
                    &nbsp;{{ p }}&nbsp;
                </a>&nbsp;
                <a href="#" @click.prevent="changePage(page+1)" :disabled="page === totalPages">下一页</a>&nbsp;&nbsp;
                <select v-model="size" v-on:change="changeSize">
                    <option value="10">10条/页</option>
                    <option value="20">20条/页</option>
                    <option value="50">50条/页</option>
                </select>
            </div>
            <br/>
            <a href="https://web.tianyunperfect.cn/simple/location_event.html">转到事件页面</a>
        </ul>
    </div>
    <div class="row justify-content-center mt-5">
        <button id="getLocationBtn" class="btn btn-primary btn-lg" v-on:click="sendLocationToBackend">记录</button>
    </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: {
            page: 1,
            size: 10,
            totalPages: 1,
            longitude: "0",
            latitude: "0",
            locationStr: "未知",
            createdList: []
        },
        mounted: function () {
            this.getLocation();
            this.getLatestData(); // 获取最新的数据
        },
        computed: {
            visiblePages() {
                const left = Math.max(1, this.page - 2);
                const right = Math.min(this.totalPages, this.page + 2);

                const pages = [];
                for (let i = left; i <= right; i++) {
                    pages.push(i);
                }
                return pages;
            }
        },
        methods: {
            changePage(newPage) {
                this.page = newPage;
                this.getLatestData();
            },
            changeSize() {
                this.page = 1; // 重置页码
                this.getLatestData();
            },
            async getLatestData() {
                const response = await axios.get('https://api.tianyunperfect.cn/location/page', {
                    params: {
                        page: this.page,
                        size: this.size
                    }
                });
                this.createdList = response.data.data.list;
                this.totalPages = Math.ceil(response.data.data.total / app.size);
            },
            addEvent(index) {
                const currentItem = this.createdList[index];
                const nextItem = this.createdList[index + 1];

                const endTime = currentItem.created_at;
                const startTime = nextItem ? nextItem.created_at : currentItem.created_at;

                const eventName = prompt("请输入事件名称：");

                if (eventName) {
                    const eventData = {
                        start_time: convertToBeijingTime(startTime),
                        end_time: convertToBeijingTime(endTime),
                        event_name: eventName,
                        created_by: "b90c0cf6997d4cfa987f2bc59583fcaa"
                    };

                    // 使用异步请求将 eventData 发送到后台
                    axios.post("https://api.tianyunperfect.cn/location/event", eventData)
                        .then(response => {
                            // 处理请求成功的响应
                            showMsg("成功", 2);
                        })
                        .catch(error => {
                            // 处理请求失败的错误
                            console.error(error);
                        });
                }
            },
            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);
                    }
                });
            },
            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>