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

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

<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 my-4">
  <!-- 客房统计 -->
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3">
    <div class="col">
      <div class="p-3 bg-light text-center rounded shadow"  style="min-height: 180px;">
        <div class="fs-2">🏠</div>
        <div class="text-muted small mt-1">总房间数量</div>
        <div class="fw-bold fs-5 mt-1">{{ roomStatistics.roomCount }}</div>
      </div>
    </div>

    <div class="col">
      <div class="p-3 bg-light text-center rounded shadow"  style="min-height: 180px;">
        <div class="fs-2">🚪</div>
        <div class="text-muted small mt-1">空房间数量</div>
        <div class="fw-bold fs-5 mt-1">{{ roomStatistics.emptyRoomCount }}</div>
      </div>
    </div>

    <div class="col">
      <div class="p-3 bg-light text-center rounded shadow"  style="min-height: 180px;">
        <div class="fs-2">🛏️</div>
        <div class="text-muted small mt-1">总床位数量</div>
        <div class="fw-bold fs-5 mt-1">
          {{ roomStatistics.bedCount }} （男：{{ roomStatistics.maleBedCount }}，女：{{ roomStatistics.femaleBedCount }}）
        </div>
      </div>
    </div>

    <div class="col">
      <div class="p-3 bg-light text-center rounded shadow"  style="min-height: 180px;">
        <div class="fs-2">🛌</div>
        <div class="text-muted small mt-1">可用空床</div>
        <div class="fw-bold fs-5 mt-1">
          {{ roomStatistics.emptyBedCount }} （男：{{ roomStatistics.emptyMaleBedCount }}，女：{{ roomStatistics.emptyFemaleBedCount }}）
        </div>
      </div>
    </div>
  </div>

  <!-- 挂单统计 -->
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3 mt-1">
    <div class="col">
      <div class="p-3 bg-light text-center rounded shadow"  style="min-height: 180px;">
        <div class="fs-2">📝</div>
        <div class="text-muted small mt-1">总挂单次数</div>
        <div class="fw-bold fs-5 mt-1">{{ guadanStatistics.guadanTotalCount }}</div>
      </div>
    </div>

    <div class="col">
      <div class="p-3 bg-light text-center rounded shadow"  style="min-height: 180px;">
        <div class="fs-2">📋</div>
        <div class="text-muted small mt-1">当前挂单数量</div>
        <div class="fw-bold fs-5 mt-1">{{ guadanStatistics.guadanCurrentCount }}</div>
      </div>
    </div>

    <div class="col">
      <div class="p-3 bg-light text-center rounded shadow"  style="min-height: 180px;">
        <div class="fs-2">👥</div>
        <div class="text-muted small mt-1">总挂单人数</div>
        <div class="fw-bold fs-5 mt-1">
          {{ guadanStatistics.guadanPeopleTotal }} （男：{{ guadanStatistics.guadanPeopleMale }}，女：{{ guadanStatistics.guadanPeopleFemale }}）
        </div>
      </div>
    </div>

    <div class="col">
      <div class="p-3 bg-light text-center rounded shadow"  style="min-height: 180px;">
        <div class="fs-2">👨👩</div>
        <div class="text-muted small mt-1">当前挂单人数</div>
        <div class="fw-bold fs-5 mt-1">
          {{ guadanStatistics.guadanPeopleCurrent }} （男：{{ guadanStatistics.guadanPeopleCurrentMale }}，女：{{ guadanStatistics.guadanPeopleCurrentFemale }}）
        </div>
      </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 {
                    roomStatistics: {
                        roomCount: 0,
                        emptyRoomCount: 0,
                        bedCount: 0,
                        maleBedCount: 0,
                        femaleBedCount: 0,
                        emptyBedCount: 0,
                        emptyMaleBedCount: 0,
                        emptyFemaleBedCount: 0
                    },
                    guadanStatistics: {
                        guadanTotalCount: 0,
                        guadanCurrentCount: 0,
                        guadanPeopleTotal: 0,
                        guadanPeopleMale: 0,
                        guadanPeopleFemale: 0,
                        guadanPeopleCurrent: 0,
                        guadanPeopleCurrentMale: 0,
                        guadanPeopleCurrentFemale: 0
                    },
                }
            },
            methods: {
                GetGuadanStatistics() {
                    axios.get('/api/guadanStatistics/GetGuadanStatistics')
                        .then((res) => {
                            this.roomStatistics = res.data.roomStatistics;
                            this.guadanStatistics = res.data.guadanStatistics;
                        })
                }
            },
            watch: {

            },
            mounted() {
                this.GetGuadanStatistics();

                // 每两分钟更新一次 (2 * 60 * 1000 毫秒)
                setInterval(() => {
                    this.GetGuadanStatistics();
                }, 1 * 60 * 1000);
            },
        })
    </script>
</asp:Content>