hotline-web/src/views/statistics/center/report.vue

<template>
	<div class="statistics-center-report-container layout-pd">
		<!-- 搜索  -->
		<el-card shadow="never">
			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
				<el-form-item prop="dateType" label="时间单位">
					<el-select v-model="state.queryParams.dateType" placeholder="部门名称" @change="changeDateType">
						<el-option label="日" value="date" />
						<el-option label="周" value="week" />
						<el-option label="月" value="month" />
						<el-option label="自定义" value="daterange" />
					</el-select>
				</el-form-item>
				<el-form-item prop="crTime" v-if="state.queryParams.dateType === 'daterange'" label="时间">
					<el-date-picker
						v-model="state.queryParams.crTime"
						type="daterange"
						unlink-panels
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:shortcuts="shortcuts"
						@change="
							() => {
								queryList();
								changeDateType('daterange');
							}
						"
						value-format="YYYY-MM-DD"
						:clearable="false"
					/>
				</el-form-item>
				<el-form-item prop="time" v-else label="时间">
					<el-date-picker
						v-model="state.queryParams.time"
						:type="state.queryParams.dateType"
						placeholder="选择时间"
						@change="
							() => {
								queryList();
								changeDateType(state.queryParams.dateType);
							}
						"
						:value-format="valueFormat"
						:format="formats"
						:clearable="false"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
					<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
						<SvgIcon name="ele-Refresh" class="mr5" />重置
					</el-button>
					<el-button class="default-button" :loading="state.loading" @click="exportWord"
						><SvgIcon name="iconfont icon-daochu" class="mr5" /> 导出</el-button
					>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="never">
			<table style="min-width: 80%; height: 100%; margin: 0 auto; text-align: center" v-loading="state.loading" ref="exportTable">
				<tbody>
					<tr style="height: 70px">
						<td style="vertical-align: top; text-align: center">
							<div style="font-size: 28px; font-weight: bold">{{ tableTitle }}</div>
							<div style="margin-top: 10px; font-size: 22px">{{ dates }}</div>
						</td>
					</tr>
					<tr>
						<td>
							<table style="width: 100%; border: 1px solid #000000; border-collapse: collapse; padding: 0">
								<tbody>
									<tr style="height: 43px">
										<td colspan="4" style="font-size: 22px; font-weight: bold; border-bottom: 1px solid #000000">一、总体情况</td>
									</tr>
									<tr style="height: 43px">
										<td colspan="2" style="font-size: 22px; text-align: left; border-bottom: 1px solid #000000">
											电话总量：{{ centerReportCallData.allCallCount }}
										</td>
										<td colspan="2" style="font-size: 22px; text-align: left; border-bottom: 1px solid #000000">
											居家养老电话总量：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;居家养老呼入接通量：
										</td>
									</tr>
									<tr style="height: 43px">
										<td style="width: 25%; font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">有效</td>
										<td style="width: 25%; font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
											{{ centerReportCallData.effectiveCount }}(接通)
										</td>
										<td style="width: 25%; font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">无效</td>
										<td style="width: 25%; font-size: 22px; border-bottom: 1px solid #000000">{{ centerReportCallData.invalidCount }}(未接通)</td>
									</tr>
									<tr style="height: 43px">
										<td style="width: 25%; font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">在IVR中挂断</td>
										<td style="width: 25%; font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
											{{ centerReportCallData.ivrByeCount }}
										</td>
										<td style="width: 25%; font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">在队列中挂断</td>
										<td style="width: 25%; font-size: 22px; border-bottom: 1px solid #000000">{{ centerReportCallData.queueByeCount }}</td>
									</tr>
									<tr style="height: 43px">
										<td colspan="4" style="font-size: 22px; text-align: left; border-bottom: 1px solid #000000">信件回访量</td>
									</tr>
									<tr style="height: 43px">
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">已回访量</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
											{{ centerReportVisitdData.visitd }}
										</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">待回访量</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000">{{ centerReportVisitdData.waitVisitd }}</td>
									</tr>
									<tr style="height: 43px">
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">坐席满意度</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
											{{ centerReportVisitdData.seatsRate }}%
										</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">部门满意度</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000">{{ centerReportVisitdData.orgRate }}%</td>
									</tr>
									<tr style="height: 43px">
										<td colspan="4" style="font-size: 22px; text-align: left; border-bottom: 1px solid #000000">
											来件总计：{{ centerReportOrderData.allCallCount }}
										</td>
									</tr>
									<tr style="height: 43px">
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">有效</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
											{{ centerReportOrderData.effectiveCount }}
										</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">无效</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000">{{ centerReportOrderData.invalidCount }}</td>
									</tr>
									<tr style="height: 43px">
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">已办结信件</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
											{{ centerReportOrderData.completedCount }}
										</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">在办信件</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000">{{ centerReportOrderData.inProgressCount }}</td>
									</tr>
									<tr style="height: 43px">
										<td colspan="4" style="font-size: 22px; border-bottom: 1px solid #000000">信件来源</td>
									</tr>
									<tr style="height: 43px">
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">来源方式</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">数量</td>
										<td colspan="2" style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">备注</td>
									</tr>
									<tr style="height: 43px" v-for="(item, index) in centerReportOrderSourceChannelsData" :key="index">
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.name }}：</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.countNum }}</td>
										<td colspan="2" style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.remark }}</td>
									</tr>
									<tr style="height: 43px">
										<td colspan="4" style="font-size: 22px; border-bottom: 1px solid #000000">信件分类</td>
									</tr>
									<tr style="height: 43px" v-for="(item, index) in centerReportOrderAcceptTypesData" :key="index">
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.name }}</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.countNum }}</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">所占百分比</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000">{{ item.proportionRate }}%</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
					<tr>
						<td style="height: 30px">&nbsp;</td>
					</tr>
					<tr>
						<td style="vertical-align: top">
							<table style="width: 100%; border: 1px solid #000000; border-collapse: collapse; padding: 0px">
								<tbody>
									<tr style="height: 43px">
										<td colspan="2" style="font-size: 22px; font-weight: bold; border-bottom: 1px solid #000000">二、信件分布情况</td>
									</tr>
									<tr style="height: 43px">
										<td colspan="2" style="font-size: 22px; text-align: left; border-bottom: 1px solid #000000">
											市本级总计：{{ orgStatisticsCityAllData.orgStatisticsCountAll }}件
										</td>
									</tr>
									<tr style="height: 43px">
										<td style="font-size: 22px; width: 40%; border-bottom: 1px solid #000000; border-right: 1px solid #000000">部门（单位）</td>
										<td style="font-size: 22px; width: 40%; border-bottom: 1px solid #000000; border-right: 1px solid #000000">数 量</td>
									</tr>
									<tr style="height: 43px" v-for="(item, index) in orgStatisticsCityAllData.orgStatistics" :key="index">
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.orgName }}</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.countNum }}</td>
									</tr>
									<tr style="height: 43px">
										<td colspan="2" style="font-size: 22px; text-align: left; border-bottom: 1px solid #000000">
											县（区）总计：{{ orgStatisticsAreaAllData.orgStatisticsCountAll }}件
										</td>
									</tr>
									<tr style="height: 43px">
										<td style="font-size: 22px; width: 40%; border-bottom: 1px solid #000000; border-right: 1px solid #000000">县（区）</td>
										<td style="font-size: 22px; width: 40%; border-bottom: 1px solid #000000; border-right: 1px solid #000000">数 量</td>
									</tr>
									<tr style="height: 43px" v-for="(item, index) in orgStatisticsAreaAllData.orgStatistics" :key="index">
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.orgName }}</td>
										<td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.countNum }}</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
				</tbody>
			</table>
		</el-card>
	</div>
</template>
<script setup lang="ts" name="statisticsCenterReport">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, FormInstance } from 'element-plus';
import { throttle } from '@/utils/tools';
import { centerReport } from '@/api/statistics/center';
import { defaultDate, shortcuts } from '@/utils/constants';
import dayjs from 'dayjs';
import { exportAsDocx } from '@/utils/exportAsWord';
// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive(<any>{
	queryParams: {
		dateType: 'date', //
		time: dayjs(new Date()).format('YYYY-MM-DD'), // 时间默认今天
		crTime: defaultDate, // 时间默认今天开始到今天结束
	},
	loading: false, // 加载
});
const valueFormat = ref('YYYY-MM-DD');
const formats = ref('YYYY-MM-DD');
const tableTitle = ref('12345市民服务热线办理工作日统计');
const dates = ref<string>(dayjs(state.queryParams.time).format('YYYY-MM-DD'));
const changeDateType = (val: string) => {
	switch (val) {
		case 'date':
			valueFormat.value = 'YYYY-MM-DD';
			formats.value = 'YYYY-MM-DD';
			dates.value = dayjs(state.queryParams.time).format('YYYY-MM-DD');
			tableTitle.value = '12345市民服务热线办理工作日统计';
			state.queryParams.crTime = [dayjs().startOf('day').format('YYYY-MM-DD'), dayjs().endOf('day').format('YYYY-MM-DD')];
			queryList();
			break;
		case 'month':
			valueFormat.value = 'YYYY-MM';
			formats.value = 'YYYY-MM';
			dates.value = `${dayjs(state.queryParams.time).startOf('month').format('YYYY-MM-DD')} 至 ${dayjs(state.queryParams.time)
				.endOf('month')
				.format('YYYY-MM-DD')}`;
			tableTitle.value = '12345市民服务热线办理工作月统计';
			state.queryParams.crTime = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')];
			queryList();
			break;
		case 'week':
			valueFormat.value = 'YYYY-MM-DD';
			formats.value = 'YYYY 第ww周';
			dates.value = `${dayjs(state.queryParams.time).startOf('week').format('YYYY-MM-DD')} 至 ${dayjs(state.queryParams.time)
				.endOf('week')
				.format('YYYY-MM-DD')}`;
			tableTitle.value = '12345市民服务热线办理工作周统计';
			state.queryParams.crTime = [dayjs().startOf('week').format('YYYY-MM-DD'), dayjs().endOf('week').format('YYYY-MM-DD')];
			queryList();
			break;
		case 'daterange':
			dates.value = `${dayjs(state.queryParams.crTime[0]).format('YYYY-MM-DD')} 至 ${dayjs(state.queryParams.crTime[1]).format('YYYY-MM-DD')}`;
			tableTitle.value = '12345市民服务热线办理工作时间段统计';
			queryList();
			break;
		default:
			valueFormat.value = 'YYYY-MM-DD';
			formats.value = 'YYYY-MM-DD';
			dates.value = dayjs(state.queryParams.time).format('YYYY-MM-DD');
			tableTitle.value = '12345市民服务热线办理工作日统计';
			state.queryParams.crTime = [dayjs().startOf('day').format('YYYY-MM-DD'), dayjs().endOf('day').format('YYYY-MM-DD')];
			queryList();
			break;
	}
};
const centerReportCallData = ref<EmptyObjectType>({}); // 电话统计
const centerReportOrderData = ref<EmptyObjectType>({}); // 信件统计
const centerReportOrderAcceptTypesData = ref<EmptyObjectType>([]); // 信件类型统计
const centerReportOrderSourceChannelsData = ref<EmptyObjectType>([]); // 信件来源统计
const centerReportVisitdData = ref<EmptyObjectType>({}); // 信件回访统计
const orgStatisticsAreaAllData = ref<EmptyObjectType>({}); // 区域统计
const orgStatisticsCityAllData = ref<EmptyObjectType>({}); // 城市统计
/** 获取列表 */
const queryList = throttle(() => {
	state.loading = true;
	let StartDate = null;
	let EndDate = null;
	if (state.queryParams?.crTime) {
		StartDate = state.queryParams?.crTime[0];
		EndDate = state.queryParams?.crTime[1];
	}
	const request = {
		StartDate,
		EndDate,
	};
	centerReport(request)
		.then((res: any) => {
			const {
				centerReportCall,
				centerReportOrder,
				centerReportOrderAcceptTypes,
				centerReportOrderSourceChannels,
				centerReportVisitd,
				orgStatisticsAreaAll,
				orgStatisticsCityAll,
			} = res.result;

			centerReportCallData.value = centerReportCall;
			centerReportOrderData.value = centerReportOrder;
			centerReportOrderAcceptTypesData.value = centerReportOrderAcceptTypes;
			centerReportOrderSourceChannelsData.value = centerReportOrderSourceChannels;
			centerReportVisitdData.value = centerReportVisitd;
			orgStatisticsAreaAllData.value = orgStatisticsAreaAll;
			orgStatisticsCityAllData.value = orgStatisticsCityAll;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
}, 300);
/** 重置按钮操作 */
const resetQuery = throttle((formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
	valueFormat.value = 'YYYY-MM-DD';
	formats.value = 'YYYY-MM-DD';
	dates.value = dayjs(state.queryParams.time).format('YYYY-MM-DD');
	tableTitle.value = '12345市民服务热线办理工作日统计';
	state.queryParams.crTime = [dayjs().startOf('day').format('YYYY-MM-DD'), dayjs().endOf('day').format('YYYY-MM-DD')];
}, 300);
const exportTable = ref<RefType>();
const exportWord = () => {
	ElMessageBox.confirm(`确定要导出（${tableTitle.value}【${dates.value}】），是否继续?`, '提示', {
		confirmButtonText: '确认导出',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			exportAsDocx(exportTable.value, `${tableTitle.value}【${dates.value}】`);
		})
		.catch(() => {});
};
onMounted(() => {
	queryList();
});
</script>