修改挂单功能
This commit is contained in:
193
web/admin/guadan/statistics_table.aspx
Normal file
193
web/admin/guadan/statistics_table.aspx
Normal file
@@ -0,0 +1,193 @@
|
||||
<%@ 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>
|
||||
|
||||
Reference in New Issue
Block a user