reactor:通话记录字段和查询条件调整;

feat:对接通话时段分析明细;

src/api/statistics/call.ts

@@ -48,6 +48,28 @@ export const callTransfer = (params: object) => {
 		params,
 	});
 }
+/**
+ * @description 通话时段统计基础信息
+ * @param {object} params
+ */
+export const callPeriodBase = (params?: object) => {
+	return request({
+		url: `/api/v1/BiCall/hourcall_list_base`,
+		method: 'get',
+		params,
+	});
+}
+/**
+ * @description 通话时段统计明细
+ * @param {object} params
+ */
+export const callPeriodDetail = (params?: object) => {
+	return request({
+		url: `/api/v1/BiCall/hourcall_list`,
+		method: 'get',
+		params,
+	});
+}
 /**
  * @description 通话时段统计
  * @param {object} params

src/components/ProTable/index.vue

@@ -25,7 +25,7 @@
 			</div>
 		</div>
 		<!-- 表格主体 -->
-<!--    :scrollbar-always-on="true" 滚动条一直展示-->
+		<!--    :scrollbar-always-on="true" 滚动条一直展示-->
 		<el-table
 			ref="tableRef"
 			v-bind="$attrs"
@@ -34,7 +34,7 @@
 			:row-key="rowKey"
 			@selection-change="selectionChange"
 			v-loading="loading"
-      :scrollbar-always-on="true"
+			:scrollbar-always-on="true"
 		>
 			<!-- 默认插槽 -->
 			<slot />
@@ -84,7 +84,7 @@
 </template>
 
 <script setup lang="ts" name="ProTable">
-import { ref, provide, onMounted, unref, computed, reactive, PropType, watch } from 'vue';
+import { ref, provide, onMounted, unref, computed, reactive, PropType, watch, shallowRef } from "vue";
 import { ElTable } from 'element-plus';
 import { useSelection } from '@/hooks/useSelection';
 import { ColumnProps, TypeProps } from '@/components/ProTable/interface';
@@ -288,15 +288,31 @@ const getSelectColumns = () => {
 	filterColumnsProp.value = filterColumns.value.map((item) => item.prop);
 };
 // 更新列设置
-// 更新列设置
-const updateColSetting = (colSetting: ColumnProps[]) => {
-  //  平铺数组后获取isShow为true的对象
-  const flatColumns = flatColumnsFunc(colSetting);
-  const newColumns = flatColumns.filter((item) => item.isShow);
-  // 获取prop
-  const newColumnsProp = newColumns.map((item) => item.prop);
-  emit('updateColSetting', newColumns, newColumnsProp);
+const exportNewColumns = ref([]);
+const exportNewColumnsProp = ref([]);
+const updateColSetting = (test: ColumnProps[]) => {
+	//  平铺数组后获取isShow为true的对象
+	const flatColumns = flatColumnsFunc(test);
+  exportNewColumns.value = flatColumns.filter((item) => item.isShow);
+	// 获取prop
+	const newColumnsProp = exportNewColumns.value.map((item) => item.prop);
+
+	emit('updateColSetting', exportNewColumns.value, newColumnsProp);
 };
+watch(
+	() => exportNewColumns.value,
+	(val: any) => {
+    console.log(val,'2121')
+    if(val.length){
+      exportNewColumnsProp.value = val.map((item: any) => item.prop);
+    }else{
+      exportNewColumns.value = flatColumnsFunc(colSetting);
+      exportNewColumnsProp.value = exportNewColumns.value.map((item: any) => item.prop);
+    }
+		console.log(exportNewColumns.value, 'test');
+	},
+	{ immediate: true,deep:true }
+);
 // 导出当前页
 const exportCurrent = () => {
 	emit('exportCurrent');
@@ -324,6 +340,7 @@ defineExpose({
 	selectedListIds,
 	filterColumns,
 	filterColumnsProp,
+  exportNewColumns:shallowRef(exportNewColumns.value)
 });
 </script>
 <style scoped lang="scss">

src/router/route.ts

@@ -301,6 +301,16 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 			isDynamic:true
 		},
 	},
+	{
+		path: '/statistics/call/detailTalkTime/:id/:tagsViewName?',
+		name: 'statisticsCallDetailTalkTime',
+		component: () => import('@/views/statistics/call/detailTalkTime.vue'),
+		meta: {
+			title: '通话时段分析',
+			isKeepAlive: true,
+			isDynamic:true
+		},
+	},
 ];
 
 /**

src/views/statistics/call/detailTalkTime.vue

@@ -0,0 +1,183 @@
+<template>
+	<div class="statistics-call-detail-talk-time-container layout-pd">
+		<!-- 搜索  -->
+		<el-card shadow="never" v-if="showSearch">
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="状态" prop="type">
+					<el-select v-model="state.queryParams.type" placeholder="请选择状态" clearable @change="handleQuery">
+						<el-option v-for="item in state.callForwardingType" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="来源" prop="source">
+					<el-select v-model="state.queryParams.source" placeholder="请选择来源" clearable @change="handleQuery">
+						<el-option v-for="item in state.callForwardingSource" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="时间段" prop="crTime">
+					<el-date-picker
+						v-model="state.queryParams.crTime"
+						type="daterange"
+						unlink-panels
+						range-separator="至"
+						start-placeholder="开始时间"
+						end-placeholder="结束时间"
+						:shortcuts="shortcuts"
+						@change="handleQuery"
+						value-format="YYYY-MM-DD"
+						:clearable="false"
+					/>
+				</el-form-item>
+				<el-form-item label-width="0">
+					<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>
+		</el-card>
+		<el-card shadow="never">
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
+				:total="state.total"
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				show-summary
+				border
+				:summary-method="getSummaries"
+			>
+			</ProTable>
+		</el-card>
+	</div>
+</template>
+<script setup lang="tsx" name="statisticsCallDetailTalkTime">
+import { computed, onMounted, reactive, ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { callPeriodBase, callPeriodDetail } from '@/api/statistics/call';
+import { defaultDate, shortcuts } from '@/utils/constants';
+import { formatDate } from '@/utils/formatTime';
+import { useRoute } from 'vue-router';
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
+	{ prop: 'cpn', label: '主叫号码', align: 'center' },
+	{
+		prop: 'cdpn',
+		label: '被叫号码',
+		align: 'center',
+	},
+	{
+		prop: 'createdTime',
+		label: '来电时间',
+		align: 'center',
+		render: (scope) => {
+			return <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+]);
+// 定义变量内容
+const ruleFormRef = ref<RefType>(); // 表单ref
+const state = reactive({
+	queryParams: {
+		// 查询条件
+		type: null,
+		source: null,
+		crTime: defaultDate,
+		PageIndex: 1,
+		PageSize: 10,
+	},
+	tableData: [], //表单
+	loading: false, // 加载
+	total: 0, // 总数
+	callForwardingSource: [],
+	callForwardingType: [],
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+	state.queryParams.PageIndex = 1;
+	queryList();
+};
+/** 获取列表 */
+const queryList = () => {
+	state.loading = true;
+	if (historyParams.type) {
+		state.queryParams.type = historyParams.type;
+	}
+	const request = {
+		beginDate: historyParams.beginDate,
+		endDate: historyParams.endDate,
+		PageIndex: state.queryParams.PageIndex,
+		PageSize: state.queryParams.PageSize,
+		type: state.queryParams.type,
+		source: state.queryParams.source,
+	};
+	callPeriodDetail(request)
+		.then((res: any) => {
+			state.tableData = res.result?.data ?? [];
+			state.total = res.result?.total ?? 0;
+			state.loading = false;
+		})
+		.catch(() => {
+			state.loading = false;
+		});
+};
+/** 重置按钮操作 */
+const resetQuery = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	queryList();
+};
+// 合计
+const getSummaries = (param: any) => {
+	const { columns, data } = param;
+	const sums: string[] = [];
+	columns.forEach((column: { property: string }, index: number) => {
+		if (index === 0) {
+			sums[index] = '合计';
+			return;
+		}
+		const values = data.map((item: { [x: string]: any }) => Number(item[column.property]));
+		if (['callInConnectRate', 'effectiveRate', 'gateWay'].includes(column.property)) {
+			//百分比不能计算
+			sums[index] = '';
+			return '';
+		} else if (!values.every((value: unknown) => Number.isNaN(value))) {
+			sums[index] = `${values.reduce((prev: any, curr: any) => {
+				const value = Number(curr);
+				if (!Number.isNaN(value)) {
+					return prev + curr;
+				} else {
+					return prev;
+				}
+			}, 0)}`;
+		} else {
+			sums[index] = ' ';
+		}
+	});
+	return sums;
+};
+// 获取基础信息
+const getBaseInfo = async () => {
+	try {
+		const { result } = await callPeriodBase();
+		state.callForwardingSource = result.callForwardingSource ?? [];
+		state.callForwardingType = result.callForwardingType ?? [];
+	} catch (e) {
+		console.log(e);
+	}
+};
+// 是否展示查询条件
+const historyParams = history.state;
+const route = useRoute();
+const showSearch = computed(() => {
+	return historyParams.showSearch;
+});
+onMounted(() => {
+	getBaseInfo();
+	queryList();
+});
+</script>

src/views/statistics/call/talkTime.vue

@@ -22,6 +22,7 @@
 					<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
 						<SvgIcon name="ele-Refresh" class="mr5" />重置
 					</el-button>
+					<el-button type="info" @click="onDetail" :loading="state.loading"> 通话时段分析 </el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
@@ -35,6 +36,8 @@
 				:pagination="false"
 				border
 				show-summary
+        :toolButton="['refresh','setting','exportCurrent','exportAll']"
+        @exportCurrent="exportCurrent"
 			>
 			</ProTable>
 		</el-card>
@@ -44,19 +47,87 @@
 import { onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { callPeriod } from '@/api/statistics/call';
-import { defaultDate, shortcuts } from "@/utils/constants";
+import { defaultDate, shortcuts } from '@/utils/constants';
+import { useRouter } from 'vue-router';
+import { guid } from '@/utils/tools';
 
 const proTableRef = ref<RefType>(); // 表格ref
 // 表格配置项
 const columns = ref<any[]>([
 	{ type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
 	{ prop: 'hourTo', label: '时间段', align: 'center' },
-	{ prop: 'count', label: '呼入总量', align: 'center' },
-	{ prop: 'effectiveCount', label: '有效接通', align: 'center' },
-	{ prop: 'connectByeCount', label: '接通秒挂', align: 'center' },
-	{ prop: 'noConnectByeCount', label: '未接通秒挂', align: 'center' },
-	{ prop: 'queueByeCount', label: '队列挂断', align: 'center' },
-	{ prop: 'ivrByeCount', label: 'IVR挂断', align: 'center' },
+	{
+		prop: 'count',
+		label: '呼入总量',
+		align: 'center',
+		render: (scope) => {
+			return (
+				<el-button type="primary" link onClick={() => linkDetail(scope)}>
+					{scope.row.count}
+				</el-button>
+			);
+		},
+	},
+	{
+		prop: 'effectiveCount',
+		label: '有效接通',
+		align: 'center',
+		render: (scope) => {
+			return (
+				<el-button type="primary" link onClick={() => linkDetail(scope)}>
+					{scope.row.effectiveCount}
+				</el-button>
+			);
+		},
+	},
+	{
+		prop: 'connectByeCount',
+		label: '接通秒挂',
+		align: 'center',
+		render: (scope) => {
+			return (
+				<el-button type="primary" link onClick={() => linkDetail(scope)}>
+					{scope.row.connectByeCount}
+				</el-button>
+			);
+		},
+	},
+	{
+		prop: 'noConnectByeCount',
+		label: '未接通秒挂',
+		align: 'center',
+		render: (scope) => {
+			return (
+				<el-button type="primary" link onClick={() => linkDetail(scope)}>
+					{scope.row.noConnectByeCount}
+				</el-button>
+			);
+		},
+	},
+	{
+		prop: 'queueByeCount',
+		label: '队列挂断',
+		align: 'center',
+		render: (scope) => {
+			return (
+				<el-button type="primary" link onClick={() => linkDetail(scope)}>
+					{scope.row.queueByeCount}
+				</el-button>
+			);
+		},
+	},
+	{
+		prop: 'ivrByeCount',
+		label: 'IVR挂断',
+		align: 'center',
+		render: (scope) => {
+			return (
+				<el-button type="primary" link onClick={() => linkDetail(scope)}>
+					{scope.row.ivrByeCount}
+				</el-button>
+			);
+		},
+	},
 ]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
@@ -87,9 +158,6 @@ const queryList = () => {
 	const request = {
 		beginDate,
 		endDate,
-		DelayState: state.queryParams.DelayState,
-		PageIndex: state.queryParams.PageIndex,
-		PageSize: state.queryParams.PageSize,
 		Keyword: state.queryParams.Keyword,
 	};
 	callPeriod(request)
@@ -107,6 +175,44 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
+// 通话时段分析
+const router = useRouter();
+const onDetail = () => {
+	router.push({
+		name: 'statisticsCallDetailTalkTime',
+		params: {
+			id: guid(),
+		},
+		state: {
+			showSearch: true,
+		},
+	});
+};
+// 查看详情
+const linkDetail = (scope: any) => {
+	console.log(scope);
+  let beginDate = null;
+  let endDate = null;
+  if (state.queryParams?.crTime) {
+    beginDate = state.queryParams?.crTime[0];
+    endDate = state.queryParams?.crTime[1];
+  }
+	router.push({
+		name: 'statisticsCallDetailTalkTime',
+		params: {
+			id: guid(),
+		},
+    state:{
+      type:scope.column.property,
+      beginDate,
+      endDate
+    }
+	});
+};
+// 导出当前页
+const exportCurrent = () => {
+  console.log(proTableRef.value.exportNewColumns)
+}
 onMounted(() => {
 	queryList();
 });

src/views/tels/callLog/index.vue

@@ -1,185 +1,183 @@
 <template>
-  <div class="tels-callLog-container layout-pd">
-    <el-card shadow="never">
-      <el-tabs v-model="state.queryParams.type" @tab-change="changeTba">
-        <el-tab-pane name="0" label="全部"></el-tab-pane>
-        <el-tab-pane name="1" label="呼入已接"></el-tab-pane>
-        <el-tab-pane name="2" label="呼出已接"></el-tab-pane>
-        <el-tab-pane name="3" label="未接"></el-tab-pane>
-      </el-tabs>
-      <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-width="20px">
-        <el-row :gutter="10">
-          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-            <el-form-item prop="CPN">
-              <el-input v-model="state.queryParams.CPN" placeholder="主叫号码" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-            <el-form-item prop="CDPN">
-              <el-input v-model="state.queryParams.CDPN" placeholder="被叫号码" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="['0', '1', '3'].includes(state.queryParams.type)">
-            <el-form-item prop="TelNo">
-              <el-input v-model="state.queryParams.TelNo" placeholder="响应分机" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+	<div class="tels-callLog-container layout-pd">
+		<el-card shadow="never">
+			<el-tabs v-model="state.queryParams.type" @tab-change="changeTba">
+				<el-tab-pane name="0" label="全部"></el-tab-pane>
+				<el-tab-pane name="1" label="呼入已接"></el-tab-pane>
+				<el-tab-pane name="2" label="呼出已接"></el-tab-pane>
+				<el-tab-pane name="3" label="未接"></el-tab-pane>
+			</el-tabs>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-width="20px">
+				<el-row :gutter="10">
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item prop="CPN">
+							<el-input v-model="state.queryParams.CPN" placeholder="主叫号码" clearable @keyup.enter="handleQuery" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item prop="CDPN">
+							<el-input v-model="state.queryParams.CDPN" placeholder="被叫号码" clearable @keyup.enter="handleQuery" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="['0', '1', '3'].includes(state.queryParams.type)">
+						<el-form-item prop="TelNo">
+							<el-input v-model="state.queryParams.TelNo" placeholder="响应分机" clearable @keyup.enter="handleQuery" />
+						</el-form-item>
+					</el-col>
+					<!--          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
             <el-form-item prop="gateway">
               <el-input v-model="state.queryParams.gateway" placeholder="中继号码" clearable @keyup.enter="handleQuery" />
             </el-form-item>
-          </el-col>
-          <transition name="el-zoom-in-top">
-            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
-              <el-form-item prop="UserName">
-                <el-input v-model="state.queryParams.UserName" placeholder="话务员名称" clearable @keyup.enter="handleQuery" />
-              </el-form-item>
-            </el-col>
-          </transition>
-          <transition name="el-zoom-in-top">
-            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '3'].includes(state.queryParams.type)">
-              <el-form-item prop="CallDirection">
-                <el-select v-model="state.queryParams.CallDirection" placeholder="电话方向" clearable class="w100" @change="handleQuery">
-                  <el-option v-for="item in state.callDirection" :value="item.key" :key="item.key" :label="item.value" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </transition>
-          <transition name="el-zoom-in-top">
-            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0'].includes(state.queryParams.type)">
-              <el-form-item prop="OnState">
-                <el-select v-model="state.queryParams.OnState" placeholder="通话结果" clearable class="w100" @change="handleQuery">
-                  <el-option v-for="item in state.onState" :value="item.key" :key="item.key" :label="item.value" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </transition>
-          <transition name="el-zoom-in-top">
-            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '2'].includes(state.queryParams.type)">
-              <el-form-item prop="EndBy">
-                <el-select v-model="state.queryParams.EndBy" placeholder="挂机类型" clearable class="w100" @change="handleQuery">
-                  <el-option v-for="item in state.endByOptions" :value="item.key" :key="item.key" :label="item.value" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </transition>
-          <transition name="el-zoom-in-top">
-            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3'].includes(state.queryParams.type)">
-              <el-form-item prop="ivrTime">
-                <el-date-picker
-                  v-model="state.queryParams.ivrTime"
-                  type="datetimerange"
-                  unlink-panels
-                  range-separator="至"
-                  start-placeholder="ivr开始时间"
-                  end-placeholder="ivr结束时间"
-                  :shortcuts="shortcuts"
-                  @change="timeStartChangeIvr"
-                  value-format="YYYY-MM-DD[T]HH:mm:ss"
-                />
-              </el-form-item>
-            </el-col>
-          </transition>
-          <transition name="el-zoom-in-top">
-            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3'].includes(state.queryParams.type)">
-              <el-form-item prop="callTime">
-                <el-date-picker
-                  v-model="state.queryParams.callTime"
-                  type="datetimerange"
-                  unlink-panels
-                  range-separator="至"
-                  start-placeholder="队列开始时间"
-                  end-placeholder="队列结束时间"
-                  :shortcuts="shortcuts"
-                  @change="timeStartChangeCall"
-                  value-format="YYYY-MM-DD[T]HH:mm:ss"
-                />
-              </el-form-item>
-            </el-col>
-          </transition>
-          <transition name="el-zoom-in-top">
-            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
-              <el-form-item prop="crTime">
-                <el-date-picker
-                  v-model="state.queryParams.crTime"
-                  type="datetimerange"
-                  unlink-panels
-                  range-separator="至"
-                  start-placeholder="应答开始时间"
-                  end-placeholder="应答结束时间"
-                  :shortcuts="shortcuts"
-                  @change="timeStartChange"
-                  value-format="YYYY-MM-DD[T]HH:mm:ss"
-                />
-              </el-form-item>
-            </el-col>
-          </transition>
-          <transition name="el-zoom-in-top">
-            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '2'].includes(state.queryParams.type)">
-              <el-form-item prop="OrderNo">
-                <el-input v-model="state.queryParams.OrderNo" placeholder="工单编码" clearable @keyup.enter="handleQuery" />
-              </el-form-item>
-            </el-col>
-          </transition>
-          <transition name="el-zoom-in-top">
-            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '2'].includes(state.queryParams.type)">
-              <el-form-item prop="Title">
-                <el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" />
-              </el-form-item>
-            </el-col>
-          </transition>
-        </el-row>
-        <div class="w100 ml20">
-          <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-button link type="primary" @click="closeSearch" :loading="state.loading">
-            {{ searchCol ? '展开' : '收起' }}
-            <SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
-          </el-button>
-        </div>
-      </el-form>
-    </el-card>
-    <el-card shadow="never">
-      <ProTable
-        ref="proTableRef"
-        :columns="columns"
-        :data="state.tableData"
-        @updateTable="queryList"
-        :loading="state.loading"
-        :total="state.total"
-        v-model:page-index="state.queryParams.PageIndex"
-        v-model:page-size="state.queryParams.PageSize"
-        :key="Math.random()"
-      >
-        <!-- 表格操作 -->
-        <template #operation="{ row }">
-          <template v-if="['0', '1'].includes(state.queryParams.type)">
-            <el-button link type="primary" @click="onCreate(row)" title="创建失联工单" v-auth="'tels:callLog:connectOrder'" v-if="!row.externalId">
-              失联工单
-            </el-button>
-            <el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.externalId">
-              关联业务
-            </el-button>
-            <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 v-else>
-            <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>
-        <template #title="{ row }">
-          <order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-        </template>
-      </ProTable>
-    </el-card>
-    <!-- 播放录音 -->
-    <play-record ref="playRecordRef" />
-    <!-- 业务关联 -->
-    <connect-business ref="connectBusinessRef" @updateList="queryList" />
-  </div>
+          </el-col>-->
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item prop="UserName">
+							<el-input v-model="state.queryParams.UserName" placeholder="话务员名称" clearable @keyup.enter="handleQuery" />
+						</el-form-item>
+					</el-col>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '3'].includes(state.queryParams.type)">
+							<el-form-item prop="CallDirection">
+								<el-select v-model="state.queryParams.CallDirection" placeholder="电话方向" clearable class="w100" @change="handleQuery">
+									<el-option v-for="item in state.callDirection" :value="item.key" :key="item.key" :label="item.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0'].includes(state.queryParams.type)">
+							<el-form-item prop="OnState">
+								<el-select v-model="state.queryParams.OnState" placeholder="通话结果" clearable class="w100" @change="handleQuery">
+									<el-option v-for="item in state.onState" :value="item.key" :key="item.key" :label="item.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item prop="EndBy">
+								<el-select v-model="state.queryParams.EndBy" placeholder="挂机类型" clearable class="w100" @change="handleQuery">
+									<el-option v-for="item in state.endByOptions" :value="item.key" :key="item.key" :label="item.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item prop="crTime">
+								<el-date-picker
+									v-model="state.queryParams.crTime"
+									type="datetimerange"
+									unlink-panels
+									range-separator="至"
+									start-placeholder="开始时间"
+									end-placeholder="挂断时间"
+									:shortcuts="shortcuts"
+									@change="timeStartChange"
+									value-format="YYYY-MM-DD[T]HH:mm:ss"
+								/>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3'].includes(state.queryParams.type)">
+							<el-form-item prop="ivrTime">
+								<el-date-picker
+									v-model="state.queryParams.ivrTime"
+									type="datetimerange"
+									unlink-panels
+									range-separator="至"
+									start-placeholder="ivr开始时间"
+									end-placeholder="ivr结束时间"
+									:shortcuts="shortcuts"
+									@change="timeStartChangeIvr"
+									value-format="YYYY-MM-DD[T]HH:mm:ss"
+								/>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3'].includes(state.queryParams.type)">
+							<el-form-item prop="callTime">
+								<el-date-picker
+									v-model="state.queryParams.callTime"
+									type="datetimerange"
+									unlink-panels
+									range-separator="至"
+									start-placeholder="队列开始时间"
+									end-placeholder="队列结束时间"
+									:shortcuts="shortcuts"
+									@change="timeStartChangeCall"
+									value-format="YYYY-MM-DD[T]HH:mm:ss"
+								/>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1'].includes(state.queryParams.type)">
+							<el-form-item prop="OrderNo">
+								<el-input v-model="state.queryParams.OrderNo" placeholder="工单编码" clearable @keyup.enter="handleQuery" />
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1'].includes(state.queryParams.type)">
+							<el-form-item prop="Title">
+								<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" />
+							</el-form-item>
+						</el-col>
+					</transition>
+				</el-row>
+				<div class="w100 ml20">
+					<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-button link type="primary" @click="closeSearch" :loading="state.loading">
+						{{ searchCol ? '展开' : '收起' }}
+						<SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
+					</el-button>
+				</div>
+			</el-form>
+		</el-card>
+		<el-card shadow="never">
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
+				:total="state.total"
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:key="Math.random()"
+			>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<template v-if="['0', '1'].includes(state.queryParams.type)">
+						<el-button link type="primary" @click="onCreate(row)" title="创建失联工单" v-auth="'tels:callLog:connectOrder'" v-if="!row.externalId">
+							失联工单
+						</el-button>
+						<el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.externalId">
+							关联业务
+						</el-button>
+						<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 v-else>
+						<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>
+				<template #title="{ row }">
+					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+				</template>
+			</ProTable>
+		</el-card>
+		<!-- 播放录音 -->
+		<play-record ref="playRecordRef" />
+		<!-- 业务关联 -->
+		<connect-business ref="connectBusinessRef" @updateList="queryList" />
+	</div>
 </template>
 
 <script lang="tsx" setup name="callLog">
@@ -202,448 +200,454 @@ const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/
 const proTableRef = ref<RefType>(); // 表格ref
 // 表格配置项
 const columns = ref<any[]>([
-  { prop: 'cpn', label: '主叫', width: 120 },
-  { prop: 'cdpn', label: '被叫', width: 120 },
-  { prop: 'ringTimes', label: '响铃次数', width: 110 },
-  { prop: 'gateway', label: '中继号', width: 120 },
-  { prop: 'duration', label: '通话时间(秒)', width: 120 },
-  { prop: 'onStateText', label: '通话结果' },
-  { prop: 'callDirectionText', label: '电话方向' },
-  { prop: 'endByText', label: '挂机类型', width: 120 },
-  {
-    prop: 'beginIvrTime',
-    label: 'ivr开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'endIvrTime',
-    label: 'ivr结束时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.endIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'beginQueueTime',
-    label: '队列开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.beginQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'endQueueTime',
-    label: '队列结束时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.endQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'createdTime',
-    label: '应答开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'answeredTime',
-    label: '应答时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.answeredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  { prop: 'overTime', label: '应答结束时间', width: 170, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 240, align: 'center' },
+	{ prop: 'cpn', label: '主叫', width: 120 },
+	{ prop: 'cdpn', label: '被叫', width: 120 },
+	{ prop: 'ringTimes', label: '响铃次数', width: 110 },
+	{ prop: 'gateway', label: '中继号', width: 120 },
+	{ prop: 'duration', label: '通话时间(秒)', width: 120 },
+	{ prop: 'onStateText', label: '通话结果' },
+	{ prop: 'callDirectionText', label: '电话方向' },
+	{ prop: 'endByText', label: '挂机类型', width: 120 },
+	{
+		prop: 'beginIvrTime',
+		label: 'ivr开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'endIvrTime',
+		label: 'ivr结束时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.endIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'beginQueueTime',
+		label: '队列开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.beginQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'endQueueTime',
+		label: '队列结束时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.endQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'createdTime',
+		label: '开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'answeredTime',
+		label: '接通时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.answeredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{ prop: 'overTime', label: '挂断时间', width: 170, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 240, align: 'center' },
 ]);
 // 定义变量内容
 const state = reactive({
-  queryParams: {
-    PageIndex: 1, // 当前页
-    PageSize: 10, // 每页条数
-    type: '0',
-    StaffNo: null, // 分机号
-    CPN: null, // 中继号码
-    CDPN: null, // 分机号
-    callDirection: null, // 呼叫类型
-    OnState: null, // 结果
-    crTime: [],
-    callTime: [],
-    ivrTime: [],
-  },
-  tableData: [], // 列表数据
-  loading: false, // 加载
-  total: 0, // 总条数
-  callDirection: [],
-  onState: [],
-  endByOptions: [],
+	queryParams: {
+		PageIndex: 1, // 当前页
+		PageSize: 10, // 每页条数
+		type: '0',
+		StaffNo: null, // 分机号
+		CPN: null, // 中继号码
+		CDPN: null, // 分机号
+		callDirection: null, // 呼叫类型
+		OnState: null, // 结果
+		crTime: [],
+		callTime: [],
+		ivrTime: [],
+	},
+	tableData: [], // 列表数据
+	loading: false, // 加载
+	total: 0, // 总条数
+	callDirection: [],
+	onState: [],
+	endByOptions: [],
 });
 const ruleFormRef = ref<FormInstance>(); // 表单ref
 const searchCol = ref(true); // 展开/收起
 // 展开/收起
 const closeSearch = () => {
-  searchCol.value = !searchCol.value;
+	searchCol.value = !searchCol.value;
 };
 const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
-  if (val) {
-    state.queryParams[startKey] = val[0];
-    state.queryParams[endKey] = val[1];
-  } else {
-    state.queryParams[startKey] = '';
-    state.queryParams[endKey] = '';
-  }
-  handleQuery();
+	if (val) {
+		state.queryParams[startKey] = val[0];
+		state.queryParams[endKey] = val[1];
+	} else {
+		state.queryParams[startKey] = '';
+		state.queryParams[endKey] = '';
+	}
+	handleQuery();
 };
 // IVR时间段
 const timeStartChangeIvr = (val: string[]) => {
-  handleTimeChange(val, 'BeginIvrTime', 'EndIvrTime');
+	handleTimeChange(val, 'BeginIvrTime', 'EndIvrTime');
 };
 // 队列时间段
 const timeStartChangeCall = (val: string[]) => {
-  handleTimeChange(val, 'BeginQueueTime', 'EndQueueTime');
+	handleTimeChange(val, 'BeginQueueTime', 'EndQueueTime');
 };
 // 通话时间段
 const timeStartChange = (val: string[]) => {
-  handleTimeChange(val, 'AnsweredTime', 'OverTime');
+	handleTimeChange(val, 'AnsweredTime', 'OverTime');
 };
 // 全部表头
 const allColumns = [
-  { prop: 'cpn', label: '主叫号码', width: 120 },
-  { prop: 'cdpn', label: '被叫号码', width: 120 },
-  { prop: 'order.no', label: '工单编码', width: 150 },
-  { prop: 'title', label: '工单标题', width: 300 },
-  { prop: 'telNo', label: '响应分机', width: 120 },
-  { prop: 'gateway', label: '中继号码', width: 120 },
-  { prop: 'userName', label: '话务员', width: 120 },
-  { prop: 'duration', label: '通话时间(秒)', width: 120 },
-  { prop: 'onStateText', label: '通话结果' },
-  { prop: 'callDirectionText', label: '电话方向' },
-  { prop: 'endByText', label: '挂机类型', width: 120 },
-  {
-    prop: 'beginIvrTime',
-    label: 'ivr开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'endIvrTime',
-    label: 'ivr结束时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.endIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'beginQueueTime',
-    label: '队列开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.beginQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'endQueueTime',
-    label: '队列结束时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.endQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'beginRingTime',
-    label: '开始振铃时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.beginRingTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'endRingTimg',
-    label: '结束振铃时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.endRingTimg, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'createdTime',
-    label: '应答开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'answeredTime',
-    label: '应答时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.answeredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  { prop: 'overTime', label: '应答结束时间', width: 170, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 310, align: 'center' },
+	{ prop: 'cpn', label: '主叫号码', width: 120 },
+	{ prop: 'cdpn', label: '被叫号码', width: 120 },
+	{ prop: 'order.no', label: '工单编码', width: 150 },
+	{ prop: 'title', label: '工单标题', width: 300 },
+	{ prop: 'telNo', label: '响应分机', width: 120 },
+	{ prop: 'gateway', label: '中继号码', width: 120 },
+	{ prop: 'userName', label: '话务员', width: 120 },
+	{ prop: 'duration', label: '通话时间(秒)', width: 120 },
+	{ prop: 'onStateText', label: '通话结果' },
+	{ prop: 'callDirectionText', label: '电话方向' },
+	{ prop: 'endByText', label: '挂机类型', width: 120 },
+	{
+		prop: 'beginIvrTime',
+		label: 'ivr开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'endIvrTime',
+		label: 'ivr结束时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.endIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'beginQueueTime',
+		label: '队列开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.beginQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'endQueueTime',
+		label: '队列结束时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.endQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'beginRingTime',
+		label: '开始振铃时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.beginRingTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'endRingTimg',
+		label: '结束振铃时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.endRingTimg, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'createdTime',
+		label: '开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'answeredTime',
+		label: '接通时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.answeredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{ prop: 'overTime', label: '挂断时间', width: 170, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 310, align: 'center' },
 ];
 // 呼入表头
 const inColumns = [
-  { prop: 'cpn', label: '主叫号码', width: 120 },
-  { prop: 'cdpn', label: '被叫号码', width: 120 },
-  { prop: 'order.no', label: '工单编码', width: 150 },
-  { prop: 'title', label: '工单标题', width: 300 },
-  { prop: 'telNo', label: '响应分机', width: 120 },
-  { prop: 'gateway', label: '中继号码', width: 120 },
-  { prop: 'userName', label: '话务员', width: 120 },
-  { prop: 'duration', label: '通话时间(秒)', width: 120 },
-  { prop: 'endByText', label: '挂机类型', width: 120 },
-  {
-    prop: 'beginIvrTime',
-    label: 'ivr开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'endIvrTime',
-    label: 'ivr结束时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.endIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'beginQueueTime',
-    label: '队列开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.beginQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'endQueueTime',
-    label: '队列结束时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.endQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'beginRingTime',
-    label: '开始振铃时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.beginRingTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'endRingTimg',
-    label: '结束振铃时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.endRingTimg, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'createdTime',
-    label: '应答开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'answeredTime',
-    label: '应答时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.answeredTime, ' YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  { prop: 'overTime', label: '应答结束时间', width: 170, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 310, align: 'center' },
+	{ prop: 'cpn', label: '主叫号码', width: 120 },
+	{ prop: 'cdpn', label: '被叫号码', width: 120 },
+	{ prop: 'order.no', label: '工单编码', width: 150 },
+	{ prop: 'title', label: '工单标题', width: 300 },
+	{ prop: 'telNo', label: '响应分机', width: 120 },
+	{ prop: 'gateway', label: '中继号码', width: 120 },
+	{ prop: 'userName', label: '话务员', width: 120 },
+	{ prop: 'duration', label: '通话时间(秒)', width: 120 },
+	{ prop: 'endByText', label: '挂机类型', width: 120 },
+	{
+		prop: 'beginIvrTime',
+		label: 'ivr开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'endIvrTime',
+		label: 'ivr结束时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.endIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'beginQueueTime',
+		label: '队列开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.beginQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'endQueueTime',
+		label: '队列结束时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.endQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'beginRingTime',
+		label: '开始振铃时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.beginRingTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'endRingTimg',
+		label: '结束振铃时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.endRingTimg, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'createdTime',
+		label: '开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'answeredTime',
+		label: '接通时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.answeredTime, ' YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{ prop: 'overTime', label: '挂断结束时间', width: 170, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 310, align: 'center' },
 ];
 // 呼出表头
 const outColumns = [
-  { prop: 'cpn', label: '主叫号码', width: 120 },
-  { prop: 'cdpn', label: '被叫号码', width: 120 },
-  { prop: 'telNo', label: '响应分机' },
-  { prop: 'gateway', label: '中继号码', width: 120 },
-  { prop: 'userName', label: '话务员' },
-  { prop: 'duration', label: '通话时间(秒)', width: 120 },
-  { prop: 'endByText', label: '挂机类型', width: 120 },
-  {
-    prop: 'createdTime',
-    label: '应答开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'answeredTime',
-    label: '应答时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.answeredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  { prop: 'overTime', label: '应答结束时间', width: 170, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 180, align: 'center' },
+	{ prop: 'cpn', label: '主叫号码', width: 120 },
+	{ prop: 'cdpn', label: '被叫号码', width: 120 },
+	{ prop: 'telNo', label: '响应分机' },
+	{ prop: 'gateway', label: '中继号码', width: 120 },
+	{ prop: 'userName', label: '话务员' },
+	{ prop: 'duration', label: '通话时间(秒)', width: 120 },
+	{ prop: 'endByText', label: '挂机类型', width: 120 },
+	{
+		prop: 'createdTime',
+		label: '开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'answeredTime',
+		label: '接通时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.answeredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{ prop: 'overTime', label: '挂断时间', width: 170, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 180, align: 'center' },
 ];
 // 未接表头
 const noColumns = [
-  { prop: 'cpn', label: '主叫号码', width: 120 },
-  { prop: 'cdpn', label: '被叫号码', width: 120 },
-  { prop: 'telNo', label: '响应分机' },
-  { prop: 'gateway', label: '中继号码', width: 120 },
-  { prop: 'userName', label: '话务员' },
-  { prop: 'callDirectionText', label: '电话方向' },
-  {
-    prop: 'beginIvrTime',
-    label: 'ivr开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'endIvrTime',
-    label: 'ivr结束时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.endIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'beginQueueTime',
-    label: '队列开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.beginQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  {
-    prop: 'endQueueTime',
-    label: '队列结束时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.endQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'beginRingTime',
-    label: '开始振铃时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.beginRingTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'endRingTimg',
-    label: '结束振铃时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.endRingTimg, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'createdTime',
-    label: '应答开始时间',
-    width: 170,
-    render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-  },
-  { prop: 'overTime', label: '应答结束时间', width: 170, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
+	{ prop: 'cpn', label: '主叫号码', width: 120 },
+	{ prop: 'cdpn', label: '被叫号码', width: 120 },
+	{ prop: 'telNo', label: '响应分机' },
+	{ prop: 'gateway', label: '中继号码', width: 120 },
+	{ prop: 'userName', label: '话务员' },
+	{ prop: 'callDirectionText', label: '电话方向' },
+	{
+		prop: 'beginIvrTime',
+		label: 'ivr开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'endIvrTime',
+		label: 'ivr结束时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.endIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'beginQueueTime',
+		label: '队列开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.beginQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'endQueueTime',
+		label: '队列结束时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.endQueueTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'beginRingTime',
+		label: '开始振铃时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.beginRingTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'endRingTimg',
+		label: '结束振铃时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.endRingTimg, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'createdTime',
+		label: '开始时间',
+		width: 170,
+		render: (scope) => <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{ prop: 'overTime', label: '挂断时间', width: 170, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
 ];
 const changeTba = () => {
-  ruleFormRef.value.resetFields();
-  handleQuery();
+	ruleFormRef.value.resetFields();
+	handleQuery();
 };
 // 手动查询，将页码设置为1
 const handleQuery = () => {
-  state.queryParams.PageIndex = 1;
-  queryList();
+	state.queryParams.PageIndex = 1;
+	queryList();
 };
 /** 通话记录列表 */
 const queryList = async () => {
-  state.loading = true;
-  try {
-    let request = other.deepClone(state.queryParams);
-    Reflect.deleteProperty(request, 'crTime'); // 删除无用的参数
-    Reflect.deleteProperty(request, 'callTime'); // 删除无用的参数
-    Reflect.deleteProperty(request, 'ivrTime'); // 删除无用的参数
-    Reflect.deleteProperty(request, 'type'); // 删除无用的参数
+	state.loading = true;
+	try {
+		let request = other.deepClone(state.queryParams);
+		Reflect.deleteProperty(request, 'crTime'); // 删除无用的参数
+		Reflect.deleteProperty(request, 'callTime'); // 删除无用的参数
+		Reflect.deleteProperty(request, 'ivrTime'); // 删除无用的参数
+		Reflect.deleteProperty(request, 'type'); // 删除无用的参数
 
-    switch (state.queryParams.type) {
-      case '0':
-        columns.value = allColumns;
-        break;
-      case '1':
-        columns.value = inColumns;
-        request.CallDirection = 0;
-        break;
-      case '2':
-        columns.value = outColumns;
-        request.CallDirection = 1;
-        break;
-      case '3':
-        columns.value = noColumns;
-        request.OnState = 2;
-        break;
-      default:
-        columns.value = allColumns;
-        break;
-    }
-    const response = await callLogPaged(request);
-    state.tableData = response.result?.items ?? [];
-    state.total = response.result?.total ?? 0;
-    state.loading = false;
-  } catch (e) {
-    state.loading = false;
-    console.log(e);
-  }
+		switch (state.queryParams.type) {
+			case '0':
+				columns.value = allColumns;
+				break;
+			case '1':
+				columns.value = inColumns;
+				request.CallDirection = 0;
+				break;
+			case '2':
+				columns.value = outColumns;
+				request.CallDirection = 1;
+				break;
+			case '3':
+				columns.value = noColumns;
+				request.OnState = 2;
+				break;
+			default:
+				columns.value = allColumns;
+				break;
+		}
+		const response = await callLogPaged(request);
+		state.tableData = response.result?.items ?? [];
+		state.total = response.result?.total ?? 0;
+		state.loading = false;
+	} catch (e) {
+		state.loading = false;
+		console.log(e);
+	}
 };
 /** 重置按钮操作 */
 const resetQuery = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-  state.queryParams.BeginIvrTime = null;
-  state.queryParams.EndIvrTime = null;
-  state.queryParams.BeginQueueTime = null;
-  state.queryParams.EndQueueTime = null;
-  state.queryParams.AnsweredTime = null;
-  state.queryParams.OverTime = null;
-  queryList();
+	if (!formEl) return;
+	formEl.resetFields();
+	state.queryParams.BeginIvrTime = null;
+	state.queryParams.EndIvrTime = null;
+	state.queryParams.BeginQueueTime = null;
+	state.queryParams.EndQueueTime = null;
+	state.queryParams.AnsweredTime = null;
+	state.queryParams.OverTime = null;
+	queryList();
 };
 // 播放录音
 const playRecordRef = ref<RefType>();
 const onPlaySoundRecording = (val: any) => {
-  playRecordRef.value.openDialog(import.meta.env.VITE_RECORD_PREFIX + val.recordingAbsolutePath, val.recordingFileName,val.recordingAbsolutePath,val.cpn,val.createdTime);
+	playRecordRef.value.openDialog(
+		import.meta.env.VITE_RECORD_PREFIX + val.recordingAbsolutePath,
+		val.recordingFileName,
+		val.recordingAbsolutePath,
+		val.cpn,
+		val.createdTime
+	);
 };
 // 下载录音
 const onDownload = (row: any) => {
-  ElMessageBox.confirm(`您确定要下载此录音吗？`, '提示', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
-    type: 'warning',
-    draggable: true,
-    cancelButtonClass: 'default-button',
-    autofocus: false,
-  })
-    .then(() => {
-      fileDownload({ path: import.meta.env.VITE_RECORD_DOWNLOAD_PREFIX + row.recordingAbsolutePath }).then((res: any) => {
-        downloadFileByStream(res, row.recordingFileName);
-      });
-    })
-    .catch(() => {});
+	ElMessageBox.confirm(`您确定要下载此录音吗？`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+		draggable: true,
+		cancelButtonClass: 'default-button',
+		autofocus: false,
+	})
+		.then(() => {
+			fileDownload({ path: import.meta.env.VITE_RECORD_DOWNLOAD_PREFIX + row.recordingAbsolutePath }).then((res: any) => {
+				downloadFileByStream(res, row.recordingFileName);
+			});
+		})
+		.catch(() => {});
 };
 // 关联业务
 const connectBusinessRef = ref<RefType>();
 const onConnect = (row: any) => {
-  connectBusinessRef.value.openDialog(row);
+	connectBusinessRef.value.openDialog(row);
 };
 // 失联工单
 const router = useRouter();
 const onCreate = (row: any) => {
-  router.push({
-    name: 'orderAccept',
-    state: {
-      createBy: 'tel',
-      fromTel: row.cpn,
-      telGuid: row.callAccept,
-      transfer: row.gateway,
-      telArea: '',
-    },
-    params: {
-      callId: row.callAccept,
-      tagsViewName: '创建失联工单',
-    },
-  });
+	router.push({
+		name: 'orderAccept',
+		state: {
+			createBy: 'tel',
+			fromTel: row.cpn,
+			telGuid: row.callAccept,
+			transfer: row.gateway,
+			telArea: '',
+		},
+		params: {
+			callId: row.callAccept,
+			tagsViewName: '创建失联工单',
+		},
+	});
 };
 // 基础信息
 const getBaseData = async () => {
-  const response = await callBaseData();
-  state.callDirection = response.result.callDirection;
-  state.onState = response.result.onState;
-  state.endByOptions = response.result.endBy;
+	const response = await callBaseData();
+	state.callDirection = response.result.callDirection;
+	state.onState = response.result.onState;
+	state.endByOptions = response.result.endBy;
 };
 onMounted(() => {
-  getBaseData();
-  queryList();
+	getBaseData();
+	queryList();
 });
 </script>
 <style lang="scss" scoped>
 .arrow {
-  transition: transform var(--el-transition-duration);
-  cursor: pointer;
+	transition: transform var(--el-transition-duration);
+	cursor: pointer;
 }
 .arrow.is-reverse {
-  transform: rotateZ(-180deg);
+	transform: rotateZ(-180deg);
 }
 </style>