神祖牌位管理模組，掛單模組前端URL添加HTTP_HOST

web/admin/ancestraltablet/ancestraltabletstatistics/index.aspx

@@ -0,0 +1,126 @@
+<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="admin_ancestraltablet_ancestraltabletstatistics_index" %>
+
+<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
+</asp:Content>
+<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
+</asp:Content>
+<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
+    <div class="container">
+  <h2 class="title">區域牌位統計</h2>
+  <table class="stats-table" border="1" cellspacing="0" cellpadding="5">
+    <thead>
+      <tr>
+        <th>區域編號</th>
+        <th>區域名稱</th>
+        <th>總位置數</th>
+        <th>可用位置數</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="area in areas" :key="area.areaId">
+        <td>{{ area.areaId }}</td>
+        <td>{{ area.areaName }}</td>
+        <td>{{ area.totalPositions }}</td>
+        <td>{{ area.availableCount }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+</asp:Content>
+<asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
+</asp:Content>
+<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
+    <script>
+        new Vue({
+            el: '#app',
+            vuetify: new Vuetify(vuetify_options),
+            data() {
+                return {
+                    areas: []
+                }
+            },
+            methods: {
+                getAncestralTabletPositionsStatisticsMethod() {
+                    axios.get(HTTP_HOST + 'api/ancestraltablet/statistics/positions/availablepositions')
+                        .then((res) => {
+                            this.areas = res.data
+                        })
+                        .catch((error) => {
+
+                        })
+                }
+            },
+            mounted() {
+                this.getAncestralTabletPositionsStatisticsMethod()
+            }
+        })
+    </script>
+    <style>
+        .container {
+  max-width: 800px;
+  margin: 50px auto;
+  background: #ffffff;
+  padding: 25px 30px;
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  font-family: "Microsoft YaHei", sans-serif;
+}
+
+.title {
+  text-align: center;
+  color: #2c3e50;
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 25px;
+  letter-spacing: 1px;
+}
+
+.stats-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 15px;
+  text-align: center;
+  color: #333;
+}
+
+.stats-table th {
+  background-color: #1976d2;
+  color: #fff;
+  padding: 12px;
+  font-weight: 600;
+  border: none;
+}
+
+.stats-table td {
+  padding: 10px;
+  border: 1px solid #e0e0e0;
+}
+
+/* 奇偶行區分 */
+.stats-table tbody tr:nth-child(odd) {
+  background-color: #f8f9fa;
+}
+
+/* 滑鼠懸停高亮 */
+.stats-table tbody tr:hover {
+  background-color: #e3f2fd;
+  transition: 0.3s ease;
+}
+
+/* 響應式支持 */
+@media (max-width: 600px) {
+  .container {
+    padding: 15px;
+  }
+  .title {
+    font-size: 18px;
+  }
+  .stats-table th, .stats-table td {
+    padding: 8px;
+    font-size: 13px;
+  }
+}
+
+    </style>
+</asp:Content>