tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件列表</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
    <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>
</head>
<body>
<div id="app">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>起始时间</th>
            <th>终止时间</th>
            <th>事件名</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="event in events" :key="event.id">
            <td>{{ convertToBeijingTime(event.start_time) }}</td>
            <td>{{ convertToBeijingTime(event.end_time) }}</td>
            <td>{{ event.event_name }}</td>
            <td>{{ convertToBeijingTime(event.created_at) }}</td>
            <td>
                <button @click="confirmDelete(event.id)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item" :class="{ 'disabled': currentPage === 1 }">
                <a class="page-link" href="#" aria-label="Previous" @click="prevPage">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <li class="page-item" v-for="page in totalPages" :key="page" :class="{ 'active': currentPage === page }">
                <a class="page-link" href="#" @click="gotoPage(page)">{{ page }}</a>
            </li>
            <li class="page-item" :class="{ 'disabled': currentPage === totalPages }">
                <a class="page-link" href="#" aria-label="Next" @click="nextPage">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<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;
    }

    new Vue({
        el: '#app',
        data() {
            return {
                events: [],
                currentPage: 1,
                totalPages: 0,
                pageSize: 10
            };
        },
        mounted() {
            this.fetchEvents();
        },
        methods: {
            confirmDelete(id) {
                if (confirm('确定要删除吗？')) {
                    // 发送删除请求
                    axios.delete(`https://api.tianyunperfect.cn/location/event_delete?id=${id}`)
                        .then(response => {
                            this.fetchEvents();
                        })
                }
            },
            fetchEvents() {
                axios.get('https://api.tianyunperfect.cn/location/event_page', {
                    params: {
                        page: this.currentPage,
                        size: this.pageSize
                    }
                })
                    .then(response => {
                        this.events = response.data.data.list;
                        this.totalPages = Math.ceil(response.data.data.total / this.pageSize);
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.fetchEvents();
                }
            },
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.fetchEvents();
                }
            },
            gotoPage(page) {
                if (page >= 1 && page <= this.totalPages) {
                    this.currentPage = page;
                    this.fetchEvents();
                }
            }
        }
    });
</script>
</body>
</html>