Página Principal Explorar Ajuda
Iniciar Sessão
tianyunperfect
/
web-base--
1
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Ver Fonte

update

tianyun há 2 anos atrás
pai
163ddf68c9
commit
d88142d8b9
2 ficheiros alterados com 136 adições e 1 exclusões
Visão Unificada Mostrar Estatísticas Diff
  1. 135 0
      simple-demo/location_event.html
  2. 1 1
      simple-demo/location_point.html

+ 135 - 0
simple-demo/location_event.html
Ver Ficheiro 

@@ -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
Ver Ficheiro 

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