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

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

<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="section mb-6">
        <v-card outlined class="pa-1">
            <v-card-title class="headline grey--text text--darken-2">
                今日使用情况
            </v-card-title>
            <v-divider class="mb-4"></v-divider>
            <v-card-text>
                <div class="d-flex flex-wrap justify-space-around">
                    <v-card class="ma-2 pa-3 text-center" color="#e3f2fd" outlined>
                        <div class="subtitle-1 font-weight-bold">总预订人数</div>
                        <div class="headline">{{totalbookers }}</div>
                    </v-card>
                    <v-card class="ma-2 pa-3 text-center" color="#e3f2fd" outlined>
                        <div class="subtitle-1 font-weight-bold">今日预订人数</div>
                        <div class="headline">{{today.todaytotalbookers }}</div>
                    </v-card>
                    <v-card class="ma-2 pa-3 text-center" color="#e3f2fd" outlined>
                        <div class="subtitle-1 font-weight-bold">今日已入住人数</div>
                        <div class="headline">{{today.checkin }}</div>
                    </v-card>
                    <v-card class="ma-2 pa-3 text-center" color="#e3f2fd" outlined>
                        <div class="subtitle-1 font-weight-bold">今日待入住人数</div>
                        <div class="headline">{{today.todaytotalbookers - today.checkin }}</div>
                    </v-card>
                    <v-card class="ma-2 pa-3 text-center" color="#fce4ec" outlined>
                        <div class="subtitle-1 font-weight-bold">空床數</div>
                        <div class="headline">{{ bedcount - today.todaytotalbookers}}</div>
                    </v-card>
                </div>
            </v-card-text>
        </v-card>
    </div>

    <!-- 近期床位使用統計 -->
<div class="section container">

    <!-- 日期筛选区 -->
    <div class="d-flex align-center flex-wrap" style="gap: 12px;">
      <!-- 开始日期 -->
      <v-menu
        ref="menu1"
        v-model="menu1"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
        min-width="auto"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="startDate"
            label="開始日期"
            prepend-icon="mdi-calendar"
            readonly
            v-bind="attrs"
            v-on="on"
            dense
            outlined
          ></v-text-field>
        </template>
        <v-date-picker v-model="startDate" @input="menu1 = false"></v-date-picker>
      </v-menu>

      <!-- 结束日期 -->
      <v-menu
        ref="menu2"
        v-model="menu2"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
        min-width="auto"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="endDate"
            label="結束日期"
            prepend-icon="mdi-calendar"
            readonly
            v-bind="attrs"
            v-on="on"
            dense
            outlined
          ></v-text-field>
        </template>
        <v-date-picker v-model="endDate" @input="menu2 = false"></v-date-picker>
      </v-menu>

      <!-- 查询按钮 -->
      <v-btn
        color="primary"
        @click="getList"
        style="align-self: stretch;"
      >
        查詢
      </v-btn>
    </div>

</div>

    <v-divider class="mb-4"></v-divider>
    
    <div>
                    <!-- 表格 -->
            <v-data-table
                :items="items"
                :headers="headers"
                class="elevation-2"
                dense
                hide-default-footer
                :items-per-page="10"
            >
                <template #item.date="{ item }">
                    <span>{{ item.date | timeString('YYYY-MM-DD') }}</span>
                </template>
                <template #item.bedusagerate="{ item }">
                    {{ ((item.todaytotalbookers / bedcount) * 100).toFixed(2) + '%' }}
                </template>
                <template #item.roomcount="{item}">
                    {{roomcount}}
                </template>
                <template #item.bedcount="{item}">
                    {{bedcount}}
                </template>
            </v-data-table>
    </div>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
    <script>
        Vue.filter('timeString', function (value, myFormat) {
            return value == null || value == "" ? "" : moment(value).format(myFormat || 'YYYY-MM-DD, HH:mm:ss');
        });
        new Vue({
            el: '#app',
            vuetify: new Vuetify(vuetify_options),
            data() {
                return {
                    items: [],
                    headers: [
                        { text: '日期', value: 'date' },
                        { text: '房间数量', value: 'roomcount' },
                        { text: '床位数量', value: 'bedcount' },
                        { text: '预约人数', value: 'todaytotalbookers' },
                        { text: '已入住人数', value: 'checkin'},
                        { text: '可用床位', value: 'availableBeds' },
                        { text: '床位利用率', value: 'bedusagerate' }
                    ],
                    today: {},
                    totalbookers: 0,
                    startDate: null,
                    endDate: null,
                    menu1: false,
                    menu2: false,
                    bedcount: 0,
                    roomcount: 0,
                }
            },
            methods: {
                async getList() {
                    try {
                        const res = await axios.get('/api/guadan/guadanstatisticstable/list', {
                            params: {
                                start: this.startDate || '',
                                end: this.endDate || ''
                            }
                        });
                        this.items = res.data.statistics;
                        this.roomcount = res.data.roomcount;
                        this.bedcount = res.data.bedcount;
                        this.today = res.data.today;
                        this.totalbookers = res.data.totalbookers;
                    } catch (e) {
                        console.error(e);
                    }
                }
            },
            mounted() {
                this.getList();
            }

        })
    </script>
</asp:Content>