reactor:话务日期表格重构;

src/views/statistics/call/detailIndex.vue

@@ -1,37 +1,18 @@
 <template>
 	<div class="statistics-call-detail-index-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
-				border
-				:pagination="false"
-				:toolButton="['refresh', 'setting', 'exportAll']"
-				:exportMethod="callDetailListExport"
-				:exportParams="requestParams"
-				show-summary
-				:summary-method="getSummaries"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item prop="crTime">
-							<statistical-time v-model="state.queryParams.crTime"	@change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleQuery" :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-form-item>
-					</el-form>
-				</template>
-				<template #description>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item prop="crTime">
+					<statistical-time v-model="state.queryParams.crTime"	@change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :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-popover :width="500" trigger="click">
 						<template #reference>
-							<el-button circle title="口径说明"><SvgIcon name="ele-QuestionFilled" /></el-button>
+							<el-button type="primary" title="口径说明">口径说明<SvgIcon name="ele-QuestionFilled" /></el-button>
 						</template>
 						<el-descriptions title="" :column="1" border style="max-height: 400px; overflow: auto">
 							<el-descriptions-item label="呼入总量">呼入接通量+呼入未接通量</el-descriptions-item>
@@ -52,8 +33,73 @@
 							<el-descriptions-item label="呼出接通率"> 呼出接通量/呼出总量 </el-descriptions-item>
 						</el-descriptions>
 					</el-popover>
-				</template>
-			</ProTable>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportAll' } }]"
+			>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30, keyField: 'id' }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					:scrollY="{ enabled: true, gt: 0 }"
+					show-overflow
+					id="statisticsCallDetailIndex"
+					:custom-config="{ storage: true }"
+					show-footer
+					:footer-method="footerMethod"
+					:params="{ exportMethod: callDetailListExport, exportParams: requestParams }"
+				>
+					<vxe-column field="date" title="日期" width="100">
+						<template #default="scope">
+							<el-button type="primary" link @click="linkDetail(scope, 'date')">
+								{{ scope.row.date }}
+							</el-button>
+						</template>
+					</vxe-column>
+					<vxe-column field="inTotal" title="呼入总量">
+						<template #default="scope">
+							<el-button type="primary" link @click="linkDetail(scope)">
+								{{ scope.row.inTotal }}
+							</el-button>
+						</template>
+					</vxe-column>
+					<vxe-column field="inConnectionQuantity" title="接通总量">
+						<template #default="scope">
+							<el-button type="primary" link @click="linkDetail(scope)">
+								{{ scope.row.inConnectionQuantity }}
+							</el-button>
+						</template>
+					</vxe-column>
+					<vxe-column field="notAcceptedHang" title="未接通秒挂"></vxe-column>
+					<vxe-column field="inConnectionRate" title="接通率"></vxe-column>
+					<vxe-column field="averageDuration" title="平均时长"></vxe-column>
+					<vxe-column field="inAvailableAnswer" title="有效接通量"></vxe-column>
+					<vxe-column field="inHangupImmediateWhenAnswered" title="接通秒挂"></vxe-column>
+					<vxe-column field="effectiveConnectionRate" title="有效接通率"></vxe-column>
+					<vxe-column field="timeoutConnection" title="超时接通量"></vxe-column>
+					<vxe-column field="timeoutSuspension" title="超时挂断量"></vxe-column>
+					<vxe-column field="onTimeConnectionRate" title="按时接通率"></vxe-column>
+					<vxe-column field="queueByeCount" title="队列挂断"></vxe-column>
+					<vxe-column field="ivrByeCount" title="IVR挂断"></vxe-column>
+					<vxe-column field="outTotal" title="呼出总量"></vxe-column>
+					<vxe-column field="outConnectionQuantity" title="呼出接通量"></vxe-column>
+					<vxe-column field="outConnectionRate" title="呼出接通率"></vxe-column>
+				</vxe-table>
+			</div>
 		</div>
 	</div>
 </template>
@@ -65,117 +111,9 @@ import Other from '@/utils/other';
 import { callDetailList, callDetailListExport } from '@/api/statistics/call';
 import { useRouter } from 'vue-router';
 import dayjs from 'dayjs';
+import XEUtils from 'xe-utils';
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-// 表格配置项
-const columns = ref<any[]>([
-	{
-		prop: 'date',
-		label: '日期',
-		align: 'center',
-		render: (scope) => {
-			return (
-				<el-button type="primary" link onClick={() => linkDetail(scope, 'date')}>
-					{scope.row.date}
-				</el-button>
-			);
-		},
-	},
-	{
-		prop: 'inTotal',
-		label: '呼入总量',
-		align: 'center',
-		render: (scope) => {
-			return (
-				<el-button type="primary" link onClick={() => linkDetail(scope)}>
-					{scope.row.inTotal}
-				</el-button>
-			);
-		},
-	},
-	{
-		prop: 'inConnectionQuantity',
-		label: '接通总量',
-		align: 'center',
-		render: (scope) => {
-			return (
-				<el-button type="primary" link onClick={() => linkDetail(scope)}>
-					{scope.row.inConnectionQuantity}
-				</el-button>
-			);
-		},
-	},
-	{
-		prop: 'notAcceptedHang',
-		label: '未接通秒挂',
-		align: 'center',
-	},
-	{
-		prop: 'inConnectionRate',
-		label: '接通率',
-		align: 'center',
-	},
-	{
-		prop: 'averageDuration',
-		label: '平均时长',
-		align: 'center',
-	},
-	{
-		prop: 'inAvailableAnswer',
-		label: '有效接通量',
-		align: 'center',
-	},
-	{
-		prop: 'inHangupImmediateWhenAnswered',
-		label: '接通秒挂',
-		align: 'center',
-	},
-	{
-		prop: 'effectiveConnectionRate',
-		label: '有效接通率',
-		align: 'center',
-	},
-	{
-		prop: 'timeoutConnection',
-		label: '超时接通量',
-		align: 'center',
-	},
-	{
-		prop: 'timeoutSuspension',
-		label: '超时挂断量',
-		align: 'center',
-	},
-	{
-		prop: 'onTimeConnectionRate',
-		label: '按时接通率',
-		align: 'center',
-	},
-	{
-		prop: 'queueByeCount',
-		label: '队列挂断',
-		align: 'center',
-	},
-	{
-		prop: 'ivrByeCount',
-		label: 'IVR挂断',
-		align: 'center',
-	},
-	{
-		prop: 'outTotal',
-		label: '呼出总量',
-		align: 'center',
-	},
-	{
-		prop: 'outConnectionQuantity',
-		label: '呼出接通量',
-		align: 'center',
-	},
-	{
-		prop: 'outConnectionRate',
-		label: '呼出接通率',
-		align: 'center',
-	},
-]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -219,70 +157,17 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	statisticalTimeRef.value.reset();
 	queryList();
 };
-// 合计
-const getSummaries = (param: any) => {
-	const { columns } = param;
-	const sums: string[] = [];
-	columns.forEach((column: { property: string }, index: number) => {
-		if (index === 0) {
-			sums[index] = '合计';
-			return;
-		}
-		switch (column.property) {
-			case 'inTotal':
-				sums[index] = state.totalCount?.inTotal;
-				break;
-			case 'inConnectionQuantity':
-				sums[index] = state.totalCount?.inConnectionQuantity;
-				break;
-			case 'notAcceptedHang':
-				sums[index] = state.totalCount?.notAcceptedHang;
-				break;
-			case 'inConnectionRate':
-				sums[index] = state.totalCount?.inConnectionRate;
-				break;
-			case 'averageDuration':
-				sums[index] = state.totalCount?.averageDuration;
-				break;
-			case 'inAvailableAnswer':
-				sums[index] = state.totalCount?.inAvailableAnswer;
-				break;
-			case 'inHangupImmediateWhenAnswered':
-				sums[index] = state.totalCount?.inHangupImmediateWhenAnswered;
-				break;
-			case 'effectiveConnectionRate':
-				sums[index] = state.totalCount?.effectiveConnectionRate;
-				break;
-			case 'timeoutConnection':
-				sums[index] = state.totalCount?.timeoutConnection;
-				break;
-			case 'timeoutSuspension':
-				sums[index] = state.totalCount?.timeoutSuspension;
-				break;
-			case 'onTimeConnectionRate':
-				sums[index] = state.totalCount?.onTimeConnectionRate;
-				break;
-			case 'queueByeCount':
-				sums[index] = state.totalCount?.queueByeCount;
-				break;
-			case 'ivrByeCount':
-				sums[index] = state.totalCount?.ivrByeCount;
-				break;
-			case 'outTotal':
-				sums[index] = state.totalCount?.outTotal;
-				break;
-			case 'outConnectionQuantity':
-				sums[index] = state.totalCount?.outConnectionQuantity;
-				break;
-			case 'outConnectionRate':
-				sums[index] = state.totalCount?.outConnectionRate;
-				break;
-			default:
-				sums[index] = '';
-				break;
-		}
-	});
-	return sums;
+// 计算合计
+const footerMethod = ({ columns, data }) => {
+	return [
+		columns.map((column: any, columnIndex: number) => {
+			if (columnIndex === 0) {
+				return '合计';
+			}
+			// 后端返回了数据集合 state.totalCount 所以不需要计算 直接进行赋值
+			return XEUtils.get(state.totalCount, column.property);
+		}),
+	];
 };
 // 查看详情
 const router = useRouter();
@@ -307,7 +192,12 @@ const linkDetail = (scope: any, type?: string) => {
 		});
 	}
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/call/detailIndexCall.vue

@@ -1,33 +1,81 @@
 <template>
-	<div class="statistics-call-detail-index-container layout-padding">
+	<div class="statistics-call-detail-index-call-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: queryList,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
+			>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="statisticsCallDetailIndexCall"
+					:custom-config="{ storage: true }"
+					:params="{ exportMethod: callDetailListDetailExport, exportParams: requestParams }"
+					showHeaderOverflow
+				>
+					<vxe-column field="orderNo" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="{ id: row.orderId, ...row }" @updateList="queryList">{{ row.orderTitle }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="cpn" title="主叫号码" width="120"></vxe-column>
+					<vxe-column field="cdpn" title="被叫号码" width="120"></vxe-column>
+					<vxe-column field="telNo" title="响应分机" width="120"></vxe-column>
+					<vxe-column field="endByText" title="挂断状态" width="120"></vxe-column>
+					<vxe-column field="userName" title="话务员" width="120"></vxe-column>
+					<vxe-column field="createdTime" title="开始时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.createdTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="answeredTime" title="接通时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.answeredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="overTime" title="挂断时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.overTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="duration" title="通话时间(秒)" width="120"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="160" align="center" :show-overflow="false">
+						<template #default="{ row }">
+							<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.recordingAbsolutePath">播放录音</el-button>
+							<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.recordingAbsolutePath">下载录音</el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
 				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
+				v-model:current-page="state.queryParams.PageIndex"
 				v-model:page-size="state.queryParams.PageSize"
-				:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
-				:exportMethod="callDetailListDetailExport"
-				:exportParams="requestParams"
-			>
-				<template #operation="{ row }">
-					<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.recordingAbsolutePath">播放录音</el-button>
-					<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.recordingAbsolutePath">下载录音</el-button>
-				</template>
-				<template #orderTitle="{ row }">
-					<order-detail :order="{id:row.orderId,...row }" @updateList="queryList">{{ row.orderTitle }}</order-detail>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!-- 播放录音 -->
 		<play-record ref="playRecordRef" />
 	</div>
 </template>
-<script setup lang="tsx" name="statisticsCallDetailIndexTime">
+<script setup lang="tsx" name="statisticsCallDetailIndexCall">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 import { callDetailListDetail, callDetailListDetailExport } from '@/api/statistics/call';
@@ -37,37 +85,11 @@ import { fileDownload } from '@/api/public/file';
 import { downloadFileBySrc, downloadFileByStream } from '@/utils/tools';
 import { useThemeConfig } from '@/stores/themeConfig';
 import { storeToRefs } from 'pinia';
+import { exportOrder } from '@/api/business/order';
 
 const PlayRecord = defineAsyncComponent(() => import('@/components/PlayRecord/index.vue')); // 播放录音
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'orderNo', label: '工单编码', minWidth: 140 },
-	{ prop: 'orderTitle', label: '工单标题', minWidth: 200 },
-	{ prop: 'cpn', label: '主叫号码', minWidth: 120 },
-	{ prop: 'cdpn', label: '被叫号码', minWidth: 120 },
-	{ prop: 'telNo', label: '响应分机' },
-	{ prop: 'endByText', label: '挂断状态', minWidth: 100 },
-	{ prop: 'userName', label: '话务员', minWidth: 120 },
-	// { prop: 'duration', label: '功能组号码', minWidth: 100 },
-	{
-		prop: 'createdTime',
-		label: '开始时间',
-		minWidth: 160,
-		render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-	},
-	{
-		prop: 'answeredTime',
-		label: '接通时间',
-		minWidth: 160,
-		render: (scope) => <span>{formatDate(scope.row.answeredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-	},
-	{ prop: 'overTime', label: '挂断时间', minWidth: 160, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
-	{ prop: 'duration', label: '通话时间(秒)', minWidth: 110 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 170, align: 'center' },
-]);
-// 定义变量内容
-// const ruleFormRef = ref<RefType>(); // 表单ref
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 const state = reactive<any>({
 	queryParams: {
 		PageIndex: 1,
@@ -79,11 +101,6 @@ const state = reactive<any>({
 	callForwardingSource: [],
 	totalCount: {},
 });
-/** 搜索按钮操作 */
-/*const handleQuery = () => {
-	state.queryParams.PageIndex = 1;
-	queryList();
-};*/
 /** 获取列表 */
 const requestParams = ref<EmptyObjectType>({});
 const route = useRoute();
@@ -148,7 +165,12 @@ const onDownload = (row: any) => {
 		})
 		.catch(() => {});
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/call/detailIndexTime.vue

@@ -1,7 +1,54 @@
 <template>
 	<div class="statistics-call-detail-index-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportAll' } }]"
+			>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					:scrollY="{ enabled: true, gt: 0 }"
+					show-overflow
+					id="statisticsCallDetailIndexTime"
+					:custom-config="{ storage: true }"
+					show-footer
+					:footer-method="footerMethod"
+					:params="{ exportMethod: callDetailListDateExport, exportParams: requestParams }"
+				>
+					<vxe-column field="hour" title="时间" width="110"> </vxe-column>
+					<vxe-column field="inTotal" title="呼入总量"> </vxe-column>
+					<vxe-column field="inConnectionQuantity" title="接通总量"> </vxe-column>
+					<vxe-column field="notAcceptedHang" title="未接通秒挂"></vxe-column>
+					<vxe-column field="inConnectionRate" title="接通率"></vxe-column>
+					<vxe-column field="averageDuration" title="平均时长"></vxe-column>
+					<vxe-column field="inAvailableAnswer" title="有效接通量"></vxe-column>
+					<vxe-column field="inHangupImmediateWhenAnswered" title="接通秒挂"></vxe-column>
+					<vxe-column field="effectiveConnectionRate" title="有效接通率"></vxe-column>
+					<vxe-column field="timeoutConnection" title="超时接通量"></vxe-column>
+					<vxe-column field="timeoutSuspension" title="超时挂断量"></vxe-column>
+					<vxe-column field="onTimeConnectionRate" title="按时接通率"></vxe-column>
+					<vxe-column field="queueByeCount" title="队列挂断"></vxe-column>
+					<vxe-column field="ivrByeCount" title="IVR挂断"></vxe-column>
+					<vxe-column field="outTotal" title="呼出总量"></vxe-column>
+					<vxe-column field="outConnectionQuantity" title="呼出接通量"></vxe-column>
+					<vxe-column field="outConnectionRate" title="呼出接通率"></vxe-column>
+				</vxe-table>
+			</div>
+			<!--			<ProTable
 				ref="proTableRef"
 				:columns="columns"
 				:data="state.tableData"
@@ -30,8 +77,8 @@
 						</el-form-item>
 					</el-form>
 				</template>
-			</ProTable>
-		</DIV>
+			</ProTable>-->
+		</div>
 	</div>
 </template>
 <script setup lang="tsx" name="statisticsCallDetailIndexTime">
@@ -39,6 +86,7 @@ import { onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { callDateListDate, callDetailListDateExport, callPeriodBase } from '@/api/statistics/call';
 import { useRoute } from 'vue-router';
+import XEUtils from 'xe-utils';
 
 // 表格配置项
 const columns = ref<any[]>([
@@ -133,7 +181,7 @@ const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
 	queryParams: {
 		// 查询条件
-		Keyword:null
+		Keyword: null,
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -182,6 +230,18 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
+// 计算合计
+const footerMethod = ({ columns, data }) => {
+	return [
+		columns.map((column: any, columnIndex: number) => {
+			if (columnIndex === 0) {
+				return '合计';
+			}
+			// 后端返回了数据集合 state.totalCount 所以不需要计算 直接进行赋值
+			return XEUtils.get(state.totalCount, column.property);
+		}),
+	];
+};
 // 合计
 const getSummaries = (param: any) => {
 	const { columns } = param;
@@ -247,8 +307,13 @@ const getSummaries = (param: any) => {
 	});
 	return sums;
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseInfo();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseInfo();
 });
 </script>

src/views/statistics/call/index.vue

@@ -3,7 +3,7 @@
 		<el-card shadow="never">
 			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
 				<el-form-item prop="crTime">
-					<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
+					<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading" />
 				</el-form-item>
 				<el-form-item label="热线号码" prop="Keyword">
 					<el-select v-model="state.queryParams.Keyword" placeholder="请选择热线号码" clearable @change="handleQuery">
@@ -23,40 +23,55 @@
 					<v-chart class="chart" :option="option" :loading="state.loading" autoresize />
 				</el-col>
 				<el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
-					<ProTable
-						ref="proTableRef1"
-						:columns="columns1"
-						:data="state.tableData1"
-						@updateTable="queryList"
-						:loading="state.loading"
-						:pagination="false"
-						show-summary
+					<vxe-table
 						border
-						:tool-button="false"
-						max-height="160px"
+						:loading="state.loading"
+						:data="state.tableData1"
+						:row-config="{ isCurrent: true, isHover: true }"
+						show-footer
+						:footer-method="footerMethod"
 					>
-					</ProTable>
+						<vxe-column field="name" title=""></vxe-column>
+						<vxe-column field="value" title="数量"></vxe-column>
+					</vxe-table>
 				</el-col>
 				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
 					<v-chart class="chart1" :option="option1" :loading="state.loading" autoresize />
 				</el-col>
 				<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-					<ProTable
-						ref="proTableRef"
-						:columns="columns"
-						:data="state.tableData"
-						@updateTable="queryList"
+					<vxe-toolbar
+						ref="toolbarRef"
 						:loading="state.loading"
-						:pagination="false"
-						show-summary
-						border
-						:tool-button="false"
-						max-height="60vh"
-						:toolButton="['refresh', 'setting', 'exportAll']"
-						:exportMethod="callListExport"
-						:exportParams="requestParams"
+						custom
+						:refresh="{
+							queryMethod: handleQuery,
+						}"
+						:tools="[{ toolRender: { name: 'exportAll' } }]"
 					>
-					</ProTable>
+					</vxe-toolbar>
+					<div style="max-height: 60vh" class="h100">
+						<vxe-table
+							border
+							:loading="state.loading"
+							:data="state.tableData"
+							:column-config="{ resizable: true }"
+							:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+							ref="tableRef"
+							height="auto"
+							auto-resize
+							show-overflow
+							id="statisticsCallIndex"
+							:custom-config="{ storage: true }"
+							:params="{ exportMethod: callListExport, exportParams: requestParams }"
+							show-footer
+							:footer-method="footerMethod1"
+						>
+							<vxe-column field="hourRange" title="时段" min-width="70"></vxe-column>
+							<vxe-column field="total" title="呼入数量"></vxe-column>
+							<vxe-column field="answered" title="接通数量"></vxe-column>
+							<vxe-column field="hanguped" title="挂断数量"></vxe-column>
+						</vxe-table>
+					</div>
 				</el-col>
 			</el-row>
 		</el-card>
@@ -69,22 +84,9 @@ import { callList, callListExport, callPeriodBase } from '@/api/statistics/call'
 import { defaultDate } from '@/utils/constants';
 import Other from '@/utils/other';
 import { useRouter } from 'vue-router';
+import XEUtils from 'xe-utils';
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-const proTableRef = ref<RefType>(); // 表格ref
-const proTableRef1 = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'hourRange', label: '时段', align: 'center', minWidth: 120 },
-	{ prop: 'total', label: '呼入数量', align: 'center' },
-	{ prop: 'answered', label: '接通数量', align: 'center' },
-	{ prop: 'hanguped', label: '挂断数量', align: 'center' },
-]);
-// 表格配置项
-const columns1 = ref<any[]>([
-	{ prop: 'name', label: '', align: 'center' },
-	{ prop: 'value', label: '数量', align: 'center' },
-]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -101,6 +103,32 @@ const state = reactive<any>({
 	total: 0, // 总数
 	callForwardingSource: [],
 });
+// 计算合计
+const footerMethod = ({ columns, data }) => {
+	return [
+		columns.map((column: any, columnIndex: number) => {
+			if (columnIndex === 0) {
+				return '合计';
+			}
+			if (['value'].includes(column.property)) {
+				return XEUtils.sum(data, column.property);
+			}
+		}),
+	];
+};
+// 计算合计
+const footerMethod1 = ({ columns, data }) => {
+	return [
+		columns.map((column: any, columnIndex: number) => {
+			if (columnIndex === 0) {
+				return '合计';
+			}
+			if (['answered', 'total', 'hanguped'].includes(column.property)) {
+				return XEUtils.sum(data, column.property);
+			}
+		}),
+	];
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
 	// state.queryParams.PageIndex = 1;
@@ -141,17 +169,17 @@ const queryList = () => {
 				? [
 						{ value: allConnectNum, name: '接通' },
 						{ value: allHangupNum, name: '挂断' },
-				]
+				  ]
 				: [];
 			const dataTable = state.tableData.length
 				? [
 						{ value: allConnectNum, name: '接通' },
 						{ value: allHangupNum, name: '挂断' },
-				]
+				  ]
 				: [
 						{ value: null, name: '接通' },
 						{ value: null, name: '挂断' },
-				];
+				  ];
 			setOption(dataTable);
 			state.loading = false;
 		})
@@ -197,7 +225,7 @@ const setOption = (data: any) => {
 				label: {
 					show: true,
 					overflow: 'none',
-					formatter: function (params:any) {
+					formatter: function (params: any) {
 						if (params.name !== '') {
 							return `${params.name}:${params.data.value}（${params.percent}%）`;
 						}
@@ -270,9 +298,14 @@ const onDetail = () => {
 		name: 'statisticsCallDetailIndex',
 	});
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseInfo();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseInfo();
 });
 </script>
 <style lang="scss" scoped>