feat:新增分机列表监控;监听分机;

src/layout/navBars/breadcrumb/telControl.vue

@@ -623,11 +623,6 @@ const signalRStart = async () => {
 		console.log(data, '小休审批通过消息');
 		RestApplyPassFn(data);
 	});
-	/*try {
-		await signalR.SR.invoke('send', 'user', '消息');
-	} catch (err) {
-		console.error(err);
-	}*/
 };
 // 检查用户状态
 // 设置当前可用的按钮
@@ -865,6 +860,10 @@ const onConnect = () => {
 		connectVoiceAssistant(currentTel.value.telNo); // 坐席助手开启
 	}
 };
+// 业务系统发送消息
+const sendMsg = (msg: any) => {
+	signalR.SR.invoke('SendSeatState', { telNo: telStatusInfo.value.telsNo, state: msg });
+};
 const router = useRouter();
 const talkDealTimer = ref<any>(null); // 话后整理定时器
 // 呼叫中心消息
@@ -890,6 +889,7 @@ const onMessage = (event: any) => {
 			}, 1000);
 			console.log('呼叫中心：已签入');
 			ElMessage.success('签入成功');
+			sendMsg('login');
 		} else if (data.state == 'logout') {
 			// 签出
 			// 重置所有状态
@@ -897,6 +897,7 @@ const onMessage = (event: any) => {
 			console.log('呼叫中心：已签出');
 			ElMessage.success('签出成功');
 			seatAssistOff();
+			sendMsg('logout');
 		} else if (data.state == 'ready') {
 			// 结束计时
 			removeTimer();
@@ -912,6 +913,7 @@ const onMessage = (event: any) => {
 			state.loading = false;
 			// ElMessage.success('示闲中');
 			console.log('呼叫中心：示闲中');
+			sendMsg('ready');
 		} else if (data.state == 'unready') {
 			// 示忙中
 			useTelStatusStore.setPhoneControlState(TelStates.rest);
@@ -950,6 +952,7 @@ const onMessage = (event: any) => {
             });
       }*/
 			break_reason(data.private_data);
+			sendMsg('unready');
 			console.log('呼叫中心：示忙中');
 		} else if (data.state == 'acw') {
 			// 设置分机号和坐席组
@@ -976,6 +979,7 @@ const onMessage = (event: any) => {
 				clearTimeout(talkDealTimer.value); // 清除话后整理定时器
 			}, time);
 			console.log('呼叫中心：话后整理中');
+			sendMsg('acw');
 		} else if (data.state == 'busy') {
 		} else {
 			console.log(data.state, '其他状态');
@@ -983,6 +987,7 @@ const onMessage = (event: any) => {
 
 		if (data.state == 'busy') {
 			holdStatus(data.private_data); //处理保持
+      sendMsg('busy');
 			if (data.private_data == 'monitoring') {
 				// 三方来电振铃中
 				useTelStatusStore.setPhoneControlState(TelStates.ring);
@@ -1037,7 +1042,6 @@ const onMessage = (event: any) => {
 					// 设置电话状态 振铃中
 					useTelStatusStore.setPhoneControlState(TelStates.ring);
 					console.log(data, '呼叫中心：来电弹单信息');
-
 					// 来电才展示弹屏
 					// 跳转到录入工单页面
 					if (!router.hasRoute('orderAccept')) {
@@ -1066,6 +1070,7 @@ const onMessage = (event: any) => {
 
 					console.log('呼叫中心：呼入通话中');
 				}
+        sendMsg('busy');
 			}
 		} else if (data.old_state == 'busy') {
 			//挂机后系统可以返回两种状态:acw 话后整理状态 ready 示闲状态，如果不需要acw，可以联系我们后台修改配置，如果需要保留，如果需要再次
@@ -1078,6 +1083,7 @@ const onMessage = (event: any) => {
 			removeTimer();
 			onCallArr.value = [];
 			console.log('呼叫中心：已挂机', onCallArr.value, data);
+			sendMsg('ready');
 		}
 	} else if (data.event_type == 'agent_caller_state') {
 		//通话状态
@@ -1096,7 +1102,7 @@ const onMessage = (event: any) => {
 // 呼叫中心链接关闭
 const onClose = () => {
 	console.log('呼叫中心断开链接');
-	// ElMessage.error('呼叫中心断开链接');
+	ElMessage.error('呼叫中心断开链接，请刷新重试');
 };
 // 小休原因
 const restReason = ref(''); // 小休原因

src/views/tels/extension/index.vue

@@ -1,195 +1,115 @@
 <template>
 	<div class="tels-callLog-container layout-pd">
 		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent class="mt15" label-width="100px">
-				<el-row :gutter="10">
-					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
-						<el-form-item label="通话时间段" prop="crTime">
-							<el-date-picker
-								v-model="state.queryParams.crTime"
-								type="datetimerange"
-								unlink-panels
-								range-separator="至"
-								start-placeholder="开始时间"
-								end-placeholder="结束时间"
-								:shortcuts="shortcuts"
-								@change="queryList"
-								value-format="YYYY-MM-DD[T]HH:mm:ss"
-							/>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
-						<el-form-item label="主叫" prop="CPN">
-							<el-input v-model="state.queryParams.CPN" placeholder="请输入主叫号码" clearable @keyup.enter="queryList" />
-						</el-form-item>
-					</el-col>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-show="!searchCol">
-							<el-form-item label="被叫" prop="CDPN">
-								<el-input v-model="state.queryParams.CDPN" placeholder="请输入被叫号码" clearable @keyup.enter="queryList" />
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-show="!searchCol">
-							<el-form-item label="电话方向" prop="Direction">
-								<el-select v-model="state.queryParams.Direction" placeholder="请选择电话方向" clearable class="w100">
-									<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="8" :xl="8" v-show="!searchCol">
-							<el-form-item label="通话结果" prop="OnState">
-								<el-select v-model="state.queryParams.OnState" placeholder="请选择通话结果" clearable class="w100">
-									<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="8" :xl="8" v-show="!searchCol">
-							<el-form-item label="中继号" prop="Gateway">
-								<el-input v-model="state.queryParams.Gateway" placeholder="请输入中继号" clearable @keyup.enter="queryList" />
-							</el-form-item>
-						</el-col>
-					</transition>
-					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
-						<div class="flex-end w100">
-							<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 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-col>
-				</el-row>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent class="mt10" inline label-width="100px">
+				<el-form-item label="分机号" prop="CDPN">
+					<el-input v-model="state.queryParams.CDPN" placeholder="请输入被叫号码" clearable @keyup.enter="queryList" />
+				</el-form-item>
+				<el-form-item label="中继号" prop="Gateway">
+					<el-input v-model="state.queryParams.Gateway" placeholder="请输入中继号" clearable @keyup.enter="queryList" />
+				</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-form-item>
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
+			<el-radio-group v-model="state.queryParams.state" class="mb10" @change="queryList">
+				<el-radio label=" "
+					>总数：<el-tag type="">{{ state.tableList.length }}</el-tag></el-radio
+				>
+				<el-radio label=""
+					>注册数：<el-tag type="success">{{ registerCount }}</el-tag></el-radio
+				>
+				<el-radio label="login"
+					>签入数：<el-tag type="danger">{{ loginCount }}</el-tag></el-radio
+				>
+				<el-radio label="ready"
+					>示闲数：<el-tag type="info">{{ readyCount }}</el-tag></el-radio
+				>
+				<el-radio label="unready"
+					>示忙数：<el-tag type="success">{{ unreadyCount }}</el-tag></el-radio
+				>
+				<el-radio label="busy"
+					>通话数：<el-tag type="danger">{{ busyCount }}</el-tag></el-radio
+				>
+				<el-radio label="acw"
+					>整理数：<el-tag type="info">{{ acwCount }}</el-tag></el-radio
+				>
+			</el-radio-group>
 			<!-- 表格 -->
 			<el-table :data="state.tableList" v-loading="state.loading">
-				<el-table-column prop="cpn" label="主叫" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="cdpn" label="被叫" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="ringTimes" label="响铃次数" show-overflow-tooltip width="110"></el-table-column>
-				<el-table-column prop="gateway" label="中继号" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="duration" label="通话时间(秒)" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="onStateText" label="通话结果" show-overflow-tooltip> </el-table-column>
-				<el-table-column prop="callDirectionText" label="电话方向" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="endByText" label="挂机类型" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column label="ivr开始时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="ivr结束时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.endIvrTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="队列开始时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.beginQueueTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="队列结束时间" show-overflow-tooltip width="170">
+				<el-table-column prop="cpn" label="分机号" show-overflow-tooltip width="200"></el-table-column>
+				<el-table-column prop="cdpn" label="是否注册" show-overflow-tooltip width="200">
 					<template #default="{ row }">
-						<span>{{ formatDate(row.endQueueTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
+						<el-tag v-if="row.cdpn" type="success">已注册</el-tag>
+						<el-tag v-else type="danger">未注册</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column label="开始通话时间" show-overflow-tooltip width="170">
+				<el-table-column prop="ringTimes" label="注册信息" show-overflow-tooltip></el-table-column>
+				<el-table-column label="状态" show-overflow-tooltip width="200">
 					<template #default="{ row }">
-						<span>{{ formatDate(row.createdTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template></el-table-column
-				>
-				<el-table-column label="应答时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.answeredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="结束通话时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.overTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
+						<el-tag v-if="row.state === 'login'" type="danger">签入</el-tag>
+						<el-tag v-else-if="row.state === 'ready'" type="info">示闲</el-tag>
+						<el-tag v-else-if="row.state === 'unready'" type="success">示忙</el-tag>
+						<el-tag v-else-if="row.state === 'busy'" type="danger">通话</el-tag>
+						<el-tag v-else-if="row.state === 'acw'" type="info">整理</el-tag>
+						<el-tag v-else-if="row.state === 'logout'" type="danger">签出</el-tag>
 					</template>
 				</el-table-column>
 				<el-table-column label="操作" width="100" fixed="right" align="center">
 					<template #default="{ row }">
-						<el-button link type="primary" @click="onConnect(row)" title="监听分机" v-auth="'tels:extension:listen'"> 监听分机 </el-button>
+						<el-button link type="primary" @click="onListen(row)" title="监听分机" v-auth="'tels:extension:listen'"> 监听分机 </el-button>
 					</template>
 				</el-table-column>
 				<template #empty>
 					<Empty />
 				</template>
 			</el-table>
-			<!-- 分页 -->
-			<pagination
-				:total="state.total"
-				v-model:page="state.queryParams.pageIndex"
-				v-model:limit="state.queryParams.pageSize"
-				@pagination="queryList"
-			/>
 		</el-card>
-		<!-- 播放录音 -->
-		<play-record ref="playRecordRef" />
-		<!-- 业务关联 -->
-		<connect-business ref="connectBusinessRef" @updateList="queryList" />
 	</div>
 </template>
 
 <script lang="ts" setup name="telsExtension">
-import { defineAsyncComponent, onActivated, onDeactivated, onMounted, reactive, ref } from 'vue';
+import { computed, onActivated, onDeactivated, onMounted, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
-import { ElButton, ElMessageBox } from 'element-plus';
-import { downloadFile, throttle } from '@/utils/tools';
-import { callBaseData, callLogPaged } from '@/api/tels/callLog';
-import { formatDate } from '@/utils/formatTime';
-import { shortcuts } from '@/utils/constants';
+import { ElButton } from 'element-plus';
+import { callLogPaged } from '@/api/tels/callLog';
 import signalR from '@/utils/signalR';
-
-// 引入组件
-const PlayRecord = defineAsyncComponent(() => import('@/views/tels/callLog/component/Play-record.vue')); // 播放录音
-const ConnectBusiness = defineAsyncComponent(() => import('@/views/tels/callLog/component/Connect-business.vue')); // 关联工单还是回访
+import { ola } from '@/utils/ola_api';
+import { storeToRefs } from 'pinia';
+import { useTelStatus } from '@/stores/telStatus';
 
 // 定义变量内容
 const state = reactive(<any>{
 	queryParams: {
-		pageIndex: 1, // 当前页
-		pageSize: 10, // 每页条数
+		state: ' ',
 		StaffNo: null, // 分机号
 		CPN: null, // 中继号码
 		CDPN: null, // 分机号
 		Direction: null, // 呼叫类型
 		OnState: null, // 结果
-		crTime: [],
 	},
 	tableList: [], // 列表数据
 	loading: false, // 加载
 	total: 0, // 总条数
 });
+const useTelStatusStore = useTelStatus();
+const { telStatusInfo } = storeToRefs(useTelStatusStore); // 电话状态
 const ruleFormRef = ref<FormInstance>(); // 表单ref
-const searchCol = ref(true); // 展开/收起
-// 展开/收起
-const closeSearch = () => {
-	searchCol.value = !searchCol.value;
-};
 /** 通话记录列表 */
-const queryList = throttle(async () => {
+const queryList = async () => {
 	state.loading = true;
 	try {
 		const request = {
-			pageIndex: state.queryParams.pageIndex,
-			pageSize: state.queryParams.pageSize,
 			CPN: state.queryParams.CPN,
 			CDPN: state.queryParams.CDPN,
 			Direction: state.queryParams.Direction,
 			OnState: state.queryParams.OnState,
 			StaffNo: state.queryParams.StaffNo,
-			StartTime: state.queryParams.crTime[0],
-			EndTime: state.queryParams.crTime[1],
 			Gateway: state.queryParams.Gateway,
 		};
 		const response = await callLogPaged(request);
@@ -200,55 +120,58 @@ const queryList = throttle(async () => {
 		state.loading = false;
 		console.log(e);
 	}
-}, 300);
+};
 /** 重置按钮操作 */
-const resetQuery = throttle((formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
 	queryList();
-}, 300);
-// 播放录音
-const playRecordRef = ref<RefType>();
-const onPlaySoundRecording = (val: any) => {
-	playRecordRef.value.openDialog(val.recordingFileUrl);
 };
-// 下载录音
-const onDownload = (row: any) => {
-	ElMessageBox.confirm(`您确定要下载此录音吗？`, '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
-		type: 'warning',
-		draggable: true,
-		cancelButtonClass: 'default-button',
-		autofocus: false,
-	})
-		.then(() => {
-			downloadFile(row.recordingFileUrl, row.recordingFileName);
-			// window.open(row.recordUrl);
-		})
-		.catch(() => {});
-};
-// 关联业务
-const connectBusinessRef = ref<RefType>();
-const onConnect = (row: any) => {
-	connectBusinessRef.value.openDialog(row);
-};
-// 基础信息
-const getBaseData = async () => {
-	const response = await callBaseData();
-	state.callDirection = response.result.callDirection;
-	state.onState = response.result.onState;
+// 注册数
+const registerCount = computed(() => {
+	return state.tableList.filter((item: any) => item.cdpn).length;
+});
+// 签入数
+const loginCount = computed(() => {
+	return state.tableList.filter((item: any) => item.state === 'login').length;
+});
+// 示闲数
+const readyCount = computed(() => {
+	return state.tableList.filter((item: any) => item.state === 'ready').length;
+});
+// 示忙数
+const unreadyCount = computed(() => {
+	return state.tableList.filter((item: any) => item.state === 'unready').length;
+});
+// 通话数
+const busyCount = computed(() => {
+	return state.tableList.filter((item: any) => item.state === 'busy').length;
+});
+// 整理数
+const acwCount = computed(() => {
+	return state.tableList.filter((item: any) => item.state === 'acw').length;
+});
+// 监听分机
+const onListen = (row: any) => {
+	console.log(row, '121');
+	ola.monitor(row.cdpn, telStatusInfo.value.telsNo);
 };
 onMounted(() => {
-	getBaseData();
 	queryList();
-	signalR.joinGroup('callLog');
+	signalR.joinGroup('BigScreen-SeatState');
+	signalR.SR.on('SeatState', (data: any) => {
+		console.log(data, '分机状态改变');
+		const item = state.tableList.find((item: any) => item.cdpn === data.cdpn);
+		if (item) {
+			item.state = data.state;
+		}
+	});
 });
 onDeactivated(() => {
-	signalR.leaveGroup('callLog');
+	signalR.leaveGroup('BigScreen-SeatState');
 });
 onActivated(() => {
-	signalR.joinGroup('callLog');
+	signalR.joinGroup('BigScreen-SeatState');
 });
 </script>
 <style lang="scss" scoped>