tianyun 2 년 전
부모
커밋
d88142d8b9
2개의 변경된 파일136개의 추가작업 그리고 1개의 파일을 삭제
  1. 135 0
      simple-demo/location_event.html
  2. 1 1
      simple-demo/location_point.html

+ 135 - 0
simple-demo/location_event.html

@@ -0,0 +1,135 @@
+<!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>

+ 1 - 1
simple-demo/location_point.html

@@ -59,7 +59,7 @@
                 <button class="deleteBtn" v-on:click="confirmDelete(item.id)">删除</button>&nbsp;
                 <button class="eventBtn" v-on:click="addEvent(index)">事件</button>
             </li>
-
+            <a href="https://web.tianyunperfect.cn/simple/location_event.html">转到事件</a>
         </ul>
     </div>
 </div>