|
@@ -1,346 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="statistics-order-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="datetimerange" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="crTime" v-if="state.queryParams.dateType === 'datetimerange'" label="时间">
|
|
|
- <el-date-picker
|
|
|
- v-model="state.queryParams.crTime"
|
|
|
- type="datetimerange"
|
|
|
- unlink-panels
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- :shortcuts="shortcuts"
|
|
|
- @change="
|
|
|
- () => {
|
|
|
- queryList();
|
|
|
- changeDateType('datetimerange');
|
|
|
- }
|
|
|
- "
|
|
|
- value-format="YYYY-MM-DD[T]HH:mm:ss"
|
|
|
- :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"/> 导出</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">
|
|
|
- 居家养老电话总量: 居家养老呼入接通量:
|
|
|
- </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.allCountNum }}</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.allCountNum }}</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"> </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.name}}</td>
|
|
|
- <td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{item.allCountNum}}</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.name}}</td>
|
|
|
- <td style="font-size: 22px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{item.allCountNum}}</td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script setup lang="ts" name="statisticsOrderCenterReport">
|
|
|
-import { onMounted, reactive, ref } from "vue";
|
|
|
-import { ElButton, ElMessageBox, FormInstance } from "element-plus";
|
|
|
-import { throttle } from '@/utils/tools';
|
|
|
-import { centerReport } from '@/api/statistics/order';
|
|
|
-import { 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: [dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')], // 时间默认今天开始到今天结束
|
|
|
- },
|
|
|
- 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 HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')];
|
|
|
- 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 HH:mm:ss'), dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss')];
|
|
|
- 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 HH:mm:ss'), dayjs().endOf('week').format('YYYY-MM-DD HH:mm:ss')];
|
|
|
- queryList();
|
|
|
- break;
|
|
|
- case 'datetimerange':
|
|
|
- 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 HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')];
|
|
|
- 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 StartTime = null;
|
|
|
- let EndTime = null;
|
|
|
- if (state.queryParams?.crTime) {
|
|
|
- StartTime = state.queryParams?.crTime[0];
|
|
|
- EndTime = state.queryParams?.crTime[1];
|
|
|
- }
|
|
|
- const request = {
|
|
|
- StartTime,
|
|
|
- EndTime,
|
|
|
- };
|
|
|
- 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 HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')];
|
|
|
-}, 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>
|