231 lines
10 KiB
Plaintext
231 lines
10 KiB
Plaintext
<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="activity.aspx.cs" Inherits="admin_activity_statistics_activity" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server" />
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server" />
|
|
|
|
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
|
|
<div class="container mt-1" id="app">
|
|
<v-container fluid>
|
|
<v-card class="elevation-2 pa-4 rounded-lg">
|
|
<!-- 標題 -->
|
|
<v-row justify="center">
|
|
<v-col cols="12" class="text-center">
|
|
<v-icon size="36" color="primary">mdi-account-group</v-icon>
|
|
<h2 class="font-weight-bold mt-2">參加活動信眾統計表</h2>
|
|
<v-divider class="my-4"></v-divider>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- 匯出按鈕 -->
|
|
<v-row class="align-center mb-4">
|
|
<v-col cols="12" class="text-right">
|
|
<v-btn color="green darken-2" class="white--text" @click="exportToExcel">
|
|
<v-icon left>mdi-microsoft-excel</v-icon> 匯出 Excel
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- 全選／取消 -->
|
|
<v-row class="mb-3" justify="start" align="center" dense>
|
|
<v-col cols="auto" class="pr-1">
|
|
<v-btn small color="primary" @click="selectAll">全選</v-btn>
|
|
</v-col>
|
|
<v-col cols="auto" class="pl-1">
|
|
<v-btn small color="primary" @click="deselectAll">取消全選</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-data-table
|
|
:headers="statistics.summary_headers"
|
|
:items="statistics.summary_rows"
|
|
class="elevation-1 rounded-lg"
|
|
dense
|
|
hide-default-footer
|
|
disable-sort
|
|
>
|
|
<!-- 勾選欄：主項名稱（對齊左邊） -->
|
|
<template #item.label="{ item }">
|
|
<div>
|
|
<v-checkbox
|
|
v-model="exportSettings.selectedItems"
|
|
:value="item.label"
|
|
hide-details
|
|
dense
|
|
class="mr-2 text-center"
|
|
></v-checkbox>
|
|
<span class="font-weight-medium">{{ item.label }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 數量欄：對齊右邊 -->
|
|
<template #item.value="{ item }">
|
|
<div class="text-center font-weight-bold pr-2">
|
|
{{ item.value }}
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 名單勾選欄：置中 -->
|
|
<template #item.include_followers="{ item }">
|
|
<div>
|
|
<v-checkbox
|
|
v-if="item.canHaveFollowers"
|
|
v-model="exportSettings.itemFollowers[item.label]"
|
|
hide-details
|
|
dense
|
|
class="ma-0"
|
|
color="primary"
|
|
label="含名單"
|
|
></v-checkbox>
|
|
</div>
|
|
|
|
</template>
|
|
</v-data-table>
|
|
|
|
</v-card>
|
|
</v-container>
|
|
</div>
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
|
|
<!-- 匯出套件 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
|
|
|
|
<script>
|
|
let VueApp = new Vue({
|
|
el: "#app",
|
|
vuetify: new Vuetify(vuetify_options),
|
|
data() {
|
|
return {
|
|
this_id: '<%= Request["num"] %>',
|
|
exportSettings: {
|
|
selectedItems: [],
|
|
itemFollowers: {}
|
|
},
|
|
statistics: {
|
|
summary_rows: [],
|
|
summary_headers: [
|
|
{ text: '項目（勾選匯出）', value: 'label', align: 'center' },
|
|
{ text: '數量', value: 'value', align: 'center' },
|
|
{ text: '名單', value: 'include_followers', align: 'center' }
|
|
]
|
|
},
|
|
raw_gdz_items: []
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getGDZCount();
|
|
},
|
|
methods: {
|
|
getGDZCount() {
|
|
axios.post(HTTP_HOST + 'api/statistics/GDZCount', null, {
|
|
params: { activity_num: this.this_id }
|
|
}).then(res => {
|
|
const raw = res.data;
|
|
this.raw_gdz_items = raw.gdz_item_counts;
|
|
|
|
this.statistics.summary_rows = [
|
|
{ label: "報名總人數", value: raw.all_count },
|
|
{ label: "功德主人數", value: raw.all_gdz_count }
|
|
];
|
|
|
|
raw.gdz_item_counts.forEach(item => {
|
|
this.statistics.summary_rows.push({
|
|
label: item.item_name,
|
|
value: item.count,
|
|
canHaveFollowers: true
|
|
});
|
|
this.$set(this.exportSettings.itemFollowers, item.item_name, false);
|
|
});
|
|
});
|
|
},
|
|
exportToExcel() {
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = (now.getMonth() + 1).toString().padStart(2, '0');
|
|
const day = now.getDate().toString().padStart(2, '0');
|
|
const hour = now.getHours().toString().padStart(2, '0');
|
|
const minute = now.getMinutes().toString().padStart(2, '0');
|
|
const dateStr = `${year}-${month}-${day} ${hour}:${minute}`;
|
|
const filename = `活動統計明細_${dateStr.replace(/[: ]/g, '_')}.xlsx`;
|
|
|
|
const selectedLabels = this.exportSettings.selectedItems;
|
|
const selectedItems = this.raw_gdz_items.filter(item =>
|
|
selectedLabels.includes(item.item_name)
|
|
);
|
|
|
|
const aoa = [];
|
|
|
|
// 統計時間
|
|
aoa.push([`統計時間：`, `${dateStr}`]);
|
|
const totalRow = this.statistics.summary_rows.find(r => r.label === '報名總人數');
|
|
const gdzRow = this.statistics.summary_rows.find(r => r.label === '功德主人數');
|
|
if (totalRow) aoa.push([totalRow.label, totalRow.value + '人']);
|
|
if (gdzRow) aoa.push([gdzRow.label, gdzRow.value + '人']);
|
|
aoa.push([])
|
|
aoa.push(['牌位功德項目', '數量', '供花果，供齋', '數量', '金額']);
|
|
|
|
selectedItems.forEach(item => {
|
|
if (!item.item_name.includes('供') && !item.item_name.includes('齋')) {
|
|
aoa.push([item.item_name, `${item.count}`]);
|
|
const includeFollowers = this.exportSettings.itemFollowers[item.item_name];
|
|
if (includeFollowers && Array.isArray(item.followers)) {
|
|
item.followers.forEach((name, index) => {
|
|
aoa.push(['', index + 1 + '.' + name]);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
var row = 5
|
|
selectedItems.forEach(item => {
|
|
if (item.item_name.includes('供') || item.item_name.includes('齋')) {
|
|
if (!aoa[row]) aoa[row] = []; // 防止該行不存在
|
|
//aoa.push([item.item_name + ' 總計金額：' + item.total_price, `${item.count}`]);
|
|
aoa[row][2] = item.item_name;
|
|
aoa[row][3] = `${item.count}`;
|
|
aoa[row][4] = '$' + item.total_price;
|
|
row++;
|
|
const includeFollowers = this.exportSettings.itemFollowers[item.item_name];
|
|
if (includeFollowers && Array.isArray(item.followers)) {
|
|
item.followers.forEach((name, index) => {
|
|
//aoa.push(['', index + 1 + '.' + name]);
|
|
aoa[row][2] = index + 1 + '.' + name
|
|
const gk = item.amountsByFollower.find(x => x.follower === name);
|
|
const amount = '$' + gk.amount; // 找不到就回傳 0 或其他預設值
|
|
aoa[row][4] = amount
|
|
row++;
|
|
});
|
|
}
|
|
}
|
|
|
|
})
|
|
const sheet = XLSX.utils.aoa_to_sheet(aoa);
|
|
|
|
const range = XLSX.utils.decode_range(sheet['!ref']);
|
|
for (let R = range.s.r; R <= range.e.r; ++R) {
|
|
for (let C = range.s.c; C <= range.e.c; ++C) {
|
|
const cell_address = XLSX.utils.encode_cell({ r: R, c: C });
|
|
if (!sheet[cell_address]) continue;
|
|
if (!sheet[cell_address].s) sheet[cell_address].s = {};
|
|
sheet[cell_address].s.alignment = { horizontal: 'center', vertical: 'center' };
|
|
}
|
|
}
|
|
|
|
const workbook = XLSX.utils.book_new();
|
|
XLSX.utils.book_append_sheet(workbook, sheet, '統計資料');
|
|
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array', cellStyles: true });
|
|
const blob = new Blob([wbout], { type: 'application/octet-stream' });
|
|
saveAs(blob, filename);
|
|
},
|
|
selectAll() {
|
|
this.exportSettings.selectedItems = this.statistics.summary_rows
|
|
.map(row => row.label);
|
|
},
|
|
deselectAll() {
|
|
this.exportSettings.selectedItems = [];
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</asp:Content>
|