17168ERP/web/admin/activity/statistics/statistics.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="statistics.aspx.cs" Inherits="admin_activity_statistics_statistics" %>

<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
    <div class="ms-5">
        <span>
            活動名稱:  {{ activity_name }}
        </span>
    </div>
    <div class="me-5">
        <button class="btn btn-primary" type="button">匯出表格資料</button>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="content" class="container-fluid">
        <div class="card shadow-sm my-2" id="sec2">
            <div class="card-header py-0">
                <nav class="navbar py-0">
                    <div class="nav nav-tabs">
                        <button class="nav-link active" id="sec2-tab1" data-bs-toggle="tab" data-bs-target="#sec2-page1"
                            type="button" role="tab" aria-controls="home" aria-selected="true">
                            活動統計總表</button>
                        <button class="nav-link" id="sec2-tab2" data-bs-toggle="tab" data-bs-target="#sec2-page2"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">
                            活動統計數量明細 </button>
                        <button class="nav-link" id="sec2-tab3" data-bs-toggle="tab" data-bs-target="#sec2-page3"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">
                            活動統計報名人明細 </button>
                        <button class="nav-link" id="sec2-tab4" data-bs-toggle="tab" data-bs-target="#sec2-page4"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">
                            活動牌位明細</button>
                    </div>
                </nav>
            </div>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active noedit p-4" id="sec2-page1" role="tabpanel" aria-labelledby="sec2-tab1">
                    <h5 class="mb-4"> {{ activity_name }}（截至 {{summaryStats?.reportDate }}）</h5>
                    <!-- 基本資訊 + 功德金 統計 -->
                    <table class="table table-bordered table-sm w-auto mb-4">
                      <tbody>
                        <!-- 基本資訊 -->
                        <tr class="table-primary">
                          <th colspan="4">基本資訊</th>
                        </tr>
                        <tr>
                          <th>類別</th>
                          <td>報名人數</td>
                          <td>男眾人數</td>
                          <td>女眾人數</td>
                        </tr>
                        <tr>
                          <th>數量</th>
                          <td>{{ summaryStats?.totalApplicants }}</td>
                          <td>{{ summaryStats?.maleApplicants }}</td>
                          <td>{{ summaryStats?.femaleApplicants }}</td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="table table-bordered table-sm w-auto mb-4">
                        <tbody>
                            <!-- 功德金 -->
                            <tr class="table-primary">
                              <th colspan="4">功德金統計</th>
                            </tr>
                            <tr>
                              <th>類別</th>
                              <td>總功德金</td>
                              <td>已收</td>
                              <td>未收</td>
                            </tr>
                            <tr>
                              <th>金額</th>
                              <td>{{ summaryStats?.donation.total }}</td>
                              <td>{{ summaryStats?.donation.received }}</td>
                              <td>{{ summaryStats?.donation.unreceived }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 功德項目 -->
                    <table class="table table-bordered table-sm w-auto mb-4">
                      <tbody>
                        <tr class="table-primary">
                          <th colspan="100%">功德項目</th>
                        </tr>
                        <tr>
                          <th>功德項目</th>
                          <td v-for="(item, index) in summaryStats?.items" :key="'name-' + index">
                            {{ item.name }}
                          </td>
                        </tr>
                        <tr>
                          <th>人數</th>
                          <td v-for="(item, index) in summaryStats?.items" :key="'count-' + index">
                            {{ item.count }}
                          </td>
                        </tr>
                      </tbody>
                    </table>

                    <!-- 牌位數量 -->
                    <table class="table table-bordered table-sm w-auto">
                      <tbody>
                        <tr class="table-primary">
                          <th colspan="100%">牌位數量</th>
                        </tr>
                        <tr>
                          <th>牌位名稱</th>
                          <td v-for="(plaque, index) in summaryStats?.plaques" :key="'plaque-name-' + index">
                            {{ plaque.name }}
                          </td>
                        </tr>
                        <tr>
                          <th>數量</th>
                          <td v-for="(plaque, index) in summaryStats?.plaques" :key="'plaque-count-' + index">
                            {{ plaque.count }}
                          </td>
                        </tr>
                      </tbody>
                    </table>

                </div>

                <div class="tab-pane fade" id="sec2-page2" role="tabpanel" aria-labelledby="sec2-tab2">
                    sec2-page2
                </div>
                <div class="tab-pane fade" id="sec2-page3" role="tabpanel" aria-labelledby="sec2-tab3">
                    sec2-page3
                </div>
                <div class="tab-pane fade" id="sec2-page4" role="tabpanel" aria-labelledby="sec2-tab4">
                    sec2-page4
                </div>
            </div>
        </div>
    </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 {
                    activity_num: '<%= Request["num"] %>',
                    activity_name: '<%= Request["activity_name"] %>',
                    summaryStats: null,       //匯總統計（總覽）
                    quantityDetails: [],    // 數量明細（分類數量）
                    applicantList: [],      // 報名人清單
                    plaqueList: [],          //牌位清單
                    loadingSummary: false,
                }
            },
            methods: {
                fetchSummaryStats() {
                    //獲取匯總明細
                    this.loadingSummary = true;

                    axios.get(HTTP_HOST + 'api/activity/statistics/summary',
                        {
                            params: {
                                activity_num: this.activity_num
                            }
                        }

                    )
                        .then(res => {
                            this.summaryStats = res.data;
                        })
                        .catch(err => {
                            console.error(err);
                        })
                        .finally(() => {
                            this.loadingSummary = false;
                        });
                }
            },
            mounted() {
                this.fetchSummaryStats(); // 頁面載入時就獲取
            }
        })
    </script>
</asp:Content>