<template>
|
<div class="websocket-demo">
|
<div>
|
<h3>Websocket接口测试DEMO</h3>
|
<div class="config-area">
|
<div class="input-group">
|
<label>CTI_WS_URL</label>
|
<input
|
type="text"
|
v-model="config.cti_ws_url"
|
placeholder="ws://40.78.0.169:6688"
|
/>
|
|
<label>坐席工号</label>
|
<input type="text" v-model="config.seatname" placeholder="8000" />
|
|
<label>坐席分机</label>
|
<input type="text" v-model="config.seatnum" placeholder="8000" />
|
|
<label>密码</label>
|
<input type="text" v-model="config.password" placeholder="123456" />
|
</div>
|
|
<div class="input-group">
|
<label>外线号码</label>
|
<input type="text" v-model="config.phone" placeholder="10086" />
|
|
<label>UUID</label>
|
<input type="text" v-model="config.uuid" />
|
|
<label>其他坐席</label>
|
<input type="text" v-model="config.other" placeholder="8001" />
|
|
<label>技能组</label>
|
<input type="text" v-model="config.group" placeholder="a3" />
|
|
<label>外呼参数id</label>
|
<input type="text" v-model="config.paramid" placeholder="3" />
|
</div>
|
</div>
|
|
<!-- 操作按钮区域 -->
|
<div class="button-area">
|
<!-- 第一行按钮 -->
|
<div class="button-row">
|
<button @click="seatlogin">签入</button>
|
<button @click="seatlogout">签出</button>
|
<button @click="afk">示忙</button>
|
<button @click="online">示闲</button>
|
<button @click="pickup">代答</button>
|
</div>
|
|
<!-- 第二行按钮 -->
|
<div class="button-row">
|
<button @click="hangup">挂机</button>
|
<button @click="callout">外呼</button>
|
<button @click="transfer">通话转移</button>
|
<button @click="transferresume">通话转移收回</button>
|
<button @click="hold">通话保持</button>
|
<button @click="holdresume">通话保持收回</button>
|
<button @click="remove">通话强拆</button>
|
<button @click="insert">通话强插</button>
|
<button @click="monitor">监听</button>
|
<button @click="monitor_to_talk">监听转通话</button>
|
<button @click="monitor_end">监听结束</button>
|
<button @click="choosecall">选择</button>
|
<button @click="replacecall">代接</button>
|
<button @click="three">三方通话</button>
|
</div>
|
|
<!-- 第三行按钮 -->
|
<div class="button-row">
|
<button @click="handoff_ready">咨询开始</button>
|
<button @click="handoff_call">咨询呼叫</button>
|
<button @click="handoff_resume">咨询收回</button>
|
<button @click="handoff_transfer">咨询转移</button>
|
<button @click="handoff_three">咨询三方</button>
|
<button @click="record_start">开始通话录音</button>
|
<button @click="record_stop">停止通话录音</button>
|
</div>
|
|
<!-- 第四行按钮 -->
|
<div class="button-row">
|
<button @click="openseatlist">打开坐席状态</button>
|
<button @click="closeseatlist">关闭坐席状态</button>
|
<button @click="openqueues">打开队列信息</button>
|
<button @click="closequeues">关闭队列信息</button>
|
<button @click="opencalllist">打开通话信息</button>
|
<button @click="closecalllist">关闭通话信息</button>
|
<button @click="openroutelist">打开路由信息</button>
|
<button @click="closeroutelist">关闭路由信息</button>
|
</div>
|
|
<!-- 第五行按钮 -->
|
<div class="button-row">
|
<button @click="seatlist">获取坐席信息</button>
|
<button @click="queues">获取队列信息</button>
|
<button @click="calllist">获取通话信息</button>
|
<button @click="routelist">获取路由信息</button>
|
<button @click="batch">获取外呼参数信息</button>
|
<button @click="batch_start">开始外呼任务</button>
|
<button @click="batch_stop">停止外呼任务</button>
|
</div>
|
</div>
|
|
<!-- 日志显示区域 -->
|
<h3>协议日志区<button @click="testclear">清除</button></h3>
|
<div id="msg" class="log-area">{{ logs }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { CallsetState, CallgetList } from "@/api/AiCentre/index";
|
|
export default {
|
name: "WebsocketDemo",
|
|
data() {
|
return {
|
config: {
|
cti_ws_url: "wss://9.208.2.190:8092/cal-api/",
|
seatname: "8000",
|
seatnum: "8000",
|
password: "123456",
|
phone: "10086",
|
uuid: "",
|
other: "8001",
|
group: "a3",
|
paramid: "3",
|
},
|
randomNum: "",
|
randomID: "",
|
logs: "",
|
ws: null,
|
isConnected: false,
|
};
|
},
|
|
mounted() {
|
this.CallgetList();
|
this.initializeWebSocket();
|
},
|
|
beforeUnmount() {
|
this.disconnectWebSocket();
|
},
|
|
methods: {
|
// 初始化WebSocket连接
|
initializeWebSocket() {
|
try {
|
// 根据当前页面协议自动选择WS协议
|
const isHttps = window.location.protocol === "https:";
|
this.config.cti_ws_url = isHttps
|
? "wss://9.208.2.190:8092/cal-api/"
|
: "ws://40.78.0.169:6688";
|
|
if (typeof window.WebSocket === "undefined") {
|
this.addLog("错误: 浏览器不支持WebSocket");
|
return;
|
}
|
|
this.connectWebSocket();
|
} catch (error) {
|
this.addLog(`初始化WebSocket错误: ${error.message}`);
|
// 尝试使用备用地址
|
this.config.cti_ws_url = "wss://9.208.2.190:8092/cal-api/";
|
setTimeout(() => this.connectWebSocket(), 2000);
|
}
|
},
|
// 查询可用分机号
|
async CallgetList() {
|
try {
|
const res = await CallgetList();
|
this.randomNum = res.data[0].tel;
|
this.randomID = res.data[0].id;
|
// 正确设置 sipUri
|
this.config.seatname = randomNum;
|
this.config.seatnum = randomNum;
|
this.startCallsetState();
|
} catch (error) {
|
console.error("获取座席号失败:", error);
|
this.updateStatus("failed", "获取座席号失败");
|
}
|
},
|
//使用座席号
|
async startCallsetState() {
|
try {
|
await CallsetState({ id: this.randomID, state: 1 });
|
console.log("座席号状态更新为使用中");
|
} catch (error) {
|
console.error("更新座席号状态失败:", error);
|
}
|
},
|
//释放座席号
|
async overCallsetState() {
|
try {
|
if (this.randomID) {
|
await CallsetState({ id: this.randomID, state: 0 });
|
console.log("座席号状态更新为可用");
|
}
|
} catch (error) {
|
console.error("释放座席号失败:", error);
|
}
|
},
|
// 连接WebSocket
|
connectWebSocket() {
|
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
this.addLog("WebSocket已连接");
|
return;
|
}
|
|
try {
|
let wsUrl = this.config.cti_ws_url;
|
// 确保HTTPS页面使用WSS
|
if (
|
window.location.protocol === "https:" &&
|
wsUrl.startsWith("ws://")
|
) {
|
wsUrl = wsUrl.replace("ws://", "wss://");
|
}
|
|
this.ws = new WebSocket(wsUrl);
|
|
this.ws.onopen = () => {
|
this.isConnected = true;
|
this.addLog("WebSocket连接成功");
|
};
|
|
this.ws.onmessage = (event) => {
|
this.handleWebSocketMessage(event);
|
};
|
|
this.ws.onclose = (event) => {
|
this.isConnected = false;
|
this.addLog(`WebSocket连接关闭: ${event.code} ${event.reason}`);
|
// 自动重连
|
setTimeout(() => this.connectWebSocket(), 3000);
|
};
|
|
this.ws.onerror = (error) => {
|
this.addLog(`WebSocket错误: ${error.message}`);
|
// 尝试备用URL
|
if (!wsUrl.includes("9.208.2.190")) {
|
this.config.cti_ws_url = "wss://9.208.2.190:8092/cal-api/";
|
setTimeout(() => this.connectWebSocket(), 3000);
|
}
|
};
|
} catch (error) {
|
this.addLog(`连接WebSocket失败: ${error.message}`);
|
// 尝试备用URL
|
this.config.cti_ws_url = "wss://9.208.2.190:8092/cal-api/";
|
setTimeout(() => this.connectWebSocket(), 3000);
|
}
|
},
|
|
// 处理WebSocket消息
|
handleWebSocketMessage(event) {
|
const reader = new FileReader();
|
reader.onloadend = (e) => {
|
const message = reader.result;
|
this.addLog(`收到消息: ${message}`);
|
|
try {
|
const obj = JSON.parse(message);
|
|
// 处理心跳包
|
if (obj.cmd === "system" && obj.action === "keepalive") {
|
this.keepalive(obj.seatname, obj.seatnum);
|
}
|
|
// 自动设置UUID
|
if (obj.cmd === "control" && obj.action === "tp_callin") {
|
this.config.uuid = obj.uuid;
|
this.addLog(`自动设置UUID: ${obj.uuid}`);
|
}
|
} catch (error) {
|
this.addLog(`消息解析错误: ${error.message}`);
|
}
|
};
|
reader.readAsText(event.data);
|
},
|
|
// 断开WebSocket连接
|
disconnectWebSocket() {
|
if (this.ws) {
|
this.ws.close();
|
this.ws = null;
|
this.isConnected = false;
|
this.addLog("WebSocket已断开");
|
}
|
},
|
|
// 发送WebSocket消息
|
sendWebSocketMessage(message) {
|
if (!this.isConnected || !this.ws) {
|
this.addLog("错误: WebSocket未连接");
|
return false;
|
}
|
|
try {
|
const messageStr =
|
typeof message === "string" ? message : JSON.stringify(message);
|
this.ws.send(messageStr);
|
this.addLog(`发送消息: ${messageStr}`);
|
return true;
|
} catch (error) {
|
this.addLog(`发送消息失败: ${error.message}`);
|
return false;
|
}
|
},
|
|
// 验证参数
|
validateParams(params, requiredFields) {
|
for (const field of requiredFields) {
|
if (!params[field] || params[field].toString().trim() === "") {
|
this.addLog(`错误: ${field} 不能为空`);
|
return false;
|
}
|
}
|
return true;
|
},
|
|
// ==================== WebSocket.js 功能整合 ====================
|
|
// 签入
|
seatlogin() {
|
const { seatname, seatnum, password, cti_ws_url } = this.config;
|
|
if (
|
!this.validateParams({ seatname, seatnum }, ["seatname", "seatnum"])
|
) {
|
return;
|
}
|
|
// 重新连接WebSocket（原js文件中的逻辑）
|
this.connectWebSocket();
|
setTimeout(() => {
|
const protocol = {
|
cmd: "system",
|
action: "seatlogin",
|
seatname: seatname,
|
seatnum: seatnum,
|
password: password,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
}, 1000);
|
},
|
|
// 签出
|
seatlogout() {
|
const { seatname, seatnum } = this.config;
|
|
if (
|
!this.validateParams({ seatname, seatnum }, ["seatname", "seatnum"])
|
) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "system",
|
action: "seatlogout",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
this.ws.close();
|
},
|
|
// 示忙
|
afk() {
|
const { seatname, seatnum } = this.config;
|
|
if (
|
!this.validateParams({ seatname, seatnum }, ["seatname", "seatnum"])
|
) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "system",
|
action: "afk",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 示闲
|
online() {
|
const { seatname, seatnum } = this.config;
|
|
if (
|
!this.validateParams({ seatname, seatnum }, ["seatname", "seatnum"])
|
) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "system",
|
action: "online",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 代答
|
pickup() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "pickup",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 挂机
|
hangup() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "hangup",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 外呼
|
callout() {
|
const { seatname, seatnum, phone } = this.config;
|
|
if (!this.validateParams({ seatnum, phone }, ["seatnum", "phone"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "callout",
|
phone: phone,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 通话转移
|
transfer() {
|
const { seatname, seatnum, phone, uuid } = this.config;
|
|
if (
|
!this.validateParams({ seatnum, phone, uuid }, [
|
"seatnum",
|
"phone",
|
"uuid",
|
])
|
) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "transfer",
|
uuid: uuid,
|
phone: phone,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 通话转移收回
|
transferresume() {
|
const { seatname, seatnum, phone, uuid } = this.config;
|
|
if (
|
!this.validateParams({ seatnum, phone, uuid }, [
|
"seatnum",
|
"phone",
|
"uuid",
|
])
|
) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "transferresume",
|
uuid: uuid,
|
phone: phone,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 通话保持
|
hold() {
|
const { seatname, seatnum, uuid } = this.config;
|
|
if (!this.validateParams({ seatnum, uuid }, ["seatnum", "uuid"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "hold",
|
uuid: uuid,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 通话保持收回
|
holdresume() {
|
const { seatname, seatnum, uuid } = this.config;
|
|
if (!this.validateParams({ seatnum, uuid }, ["seatnum", "uuid"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "holdresume",
|
uuid: uuid,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 通话强拆
|
remove() {
|
const { seatname, seatnum, phone } = this.config;
|
|
if (!this.validateParams({ seatnum, phone }, ["seatnum", "phone"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "remove",
|
phone: phone,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 通话强插
|
insert() {
|
const { seatname, seatnum, phone } = this.config;
|
|
if (!this.validateParams({ seatnum, phone }, ["seatnum", "phone"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "insert",
|
phone: phone,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 监听
|
monitor() {
|
const { seatname, seatnum, phone } = this.config;
|
|
if (!this.validateParams({ seatnum, phone }, ["seatnum", "phone"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "monitor",
|
phone: phone,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 监听转通话
|
monitor_to_talk() {
|
const { seatname, seatnum, phone } = this.config;
|
|
if (!this.validateParams({ seatnum, phone }, ["seatnum", "phone"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "monitor_to_talk",
|
phone: phone,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 监听结束
|
monitor_end() {
|
const { seatname, seatnum, phone } = this.config;
|
|
if (!this.validateParams({ seatnum, phone }, ["seatnum", "phone"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "monitor_end",
|
phone: phone,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 选择通话
|
choosecall() {
|
const { seatname, seatnum, uuid } = this.config;
|
|
if (!this.validateParams({ seatnum, uuid }, ["seatnum", "uuid"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "choosecall",
|
uuid: uuid,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 代接
|
replacecall() {
|
const { seatname, seatnum, phone } = this.config;
|
|
if (!this.validateParams({ seatnum, phone }, ["seatnum", "phone"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "replacecall",
|
phone: phone,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 三方通话
|
three() {
|
const { seatname, seatnum, phone } = this.config;
|
|
if (!this.validateParams({ seatnum, phone }, ["seatnum", "phone"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "three",
|
phone: phone,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 咨询开始
|
handoff_ready() {
|
const { seatname, seatnum, uuid } = this.config;
|
|
if (!this.validateParams({ seatnum, uuid }, ["seatnum", "uuid"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "handoff_ready",
|
uuid: uuid,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 咨询呼叫
|
handoff_call() {
|
const { seatname, seatnum, other, uuid } = this.config;
|
|
if (
|
!this.validateParams({ seatnum, other, uuid }, [
|
"seatnum",
|
"other",
|
"uuid",
|
])
|
) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "handoff_call",
|
uuid: uuid,
|
phone: other,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 咨询收回
|
handoff_resume() {
|
const { seatname, seatnum, uuid } = this.config;
|
|
if (!this.validateParams({ seatnum, uuid }, ["seatnum", "uuid"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "handoff_resume",
|
uuid: uuid,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 咨询转移
|
handoff_transfer() {
|
const { seatname, seatnum, other, uuid } = this.config;
|
|
if (
|
!this.validateParams({ seatnum, other, uuid }, [
|
"seatnum",
|
"other",
|
"uuid",
|
])
|
) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "handoff_transfer",
|
uuid: uuid,
|
phone: other,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 咨询三方
|
handoff_three() {
|
const { seatname, seatnum, uuid } = this.config;
|
|
if (!this.validateParams({ seatnum, uuid }, ["seatnum", "uuid"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "handoff_three",
|
uuid: uuid,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 开始通话录音
|
record_start() {
|
const { seatname, seatnum, uuid } = this.config;
|
|
if (!this.validateParams({ seatnum, uuid }, ["seatnum", "uuid"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "record_start",
|
uuid: uuid,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 停止通话录音
|
record_stop() {
|
const { seatname, seatnum, uuid } = this.config;
|
|
if (!this.validateParams({ seatnum, uuid }, ["seatnum", "uuid"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "control",
|
action: "record_stop",
|
uuid: uuid,
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 打开坐席状态
|
openseatlist() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "status",
|
action: "openseatlist",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 关闭坐席状态
|
closeseatlist() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "status",
|
action: "closeseatlist",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 打开队列信息
|
openqueues() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "status",
|
action: "openqueues",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 关闭队列信息
|
closequeues() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "status",
|
action: "closequeues",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 打开通话信息
|
opencalllist() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "status",
|
action: "opencalllist",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 关闭通话信息
|
closecalllist() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "status",
|
action: "closecalllist",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 打开路由信息
|
openroutelist() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "status",
|
action: "openroutelist",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 关闭路由信息
|
closeroutelist() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "status",
|
action: "closeroutelist",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 获取坐席信息
|
seatlist() {
|
const { group } = this.config;
|
|
if (!this.validateParams({ group }, ["group"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "status",
|
action: "seatlist",
|
group: group,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 获取队列信息
|
queues() {
|
const protocol = {
|
cmd: "status",
|
action: "queues",
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 获取通话信息
|
calllist() {
|
const protocol = {
|
cmd: "status",
|
action: "calllist",
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 获取路由信息
|
routelist() {
|
const protocol = {
|
cmd: "status",
|
action: "routelist",
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 获取外呼参数信息
|
batch() {
|
const { paramid } = this.config;
|
|
if (!this.validateParams({ paramid }, ["paramid"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "status",
|
action: "batch",
|
paramid: paramid,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 开始外呼任务
|
batch_start() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "system",
|
action: "batch_start",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 停止外呼任务
|
batch_stop() {
|
const { seatname, seatnum } = this.config;
|
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "system",
|
action: "batch_stop",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 心跳包
|
keepalive(seatname, seatnum) {
|
if (!this.validateParams({ seatnum }, ["seatnum"])) {
|
return;
|
}
|
|
const protocol = {
|
cmd: "system",
|
action: "keepalive",
|
seatname: seatname,
|
seatnum: seatnum,
|
timestamp: Date.now(),
|
};
|
this.sendWebSocketMessage(protocol);
|
},
|
|
// 清除日志
|
testclear() {
|
this.logs = "";
|
this.addLog("日志已清除");
|
},
|
|
// 添加日志
|
addLog(message) {
|
const timestamp = new Date().toLocaleTimeString();
|
this.logs += `[${timestamp}] ${message}\n`;
|
|
// 限制日志长度，防止内存溢出
|
const logLines = this.logs.split("\n");
|
if (logLines.length > 100) {
|
this.logs = logLines.slice(-50).join("\n");
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.websocket-demo {
|
font-family: Arial, sans-serif;
|
padding: 20px;
|
max-width: 1200px;
|
margin: 0 auto;
|
}
|
|
.config-area {
|
margin-bottom: 20px;
|
padding: 15px;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
background-color: #f9f9f9;
|
}
|
|
.input-group {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
gap: 10px;
|
margin-bottom: 10px;
|
}
|
|
.input-group label {
|
font-weight: bold;
|
min-width: 80px;
|
}
|
|
.input-group input {
|
padding: 5px 10px;
|
border: 1px solid #ccc;
|
border-radius: 3px;
|
width: 120px;
|
}
|
|
.button-area {
|
margin-bottom: 20px;
|
}
|
|
.button-row {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 5px;
|
margin-bottom: 10px;
|
}
|
|
.button-row button {
|
padding: 8px 15px;
|
border: 1px solid #ccc;
|
border-radius: 3px;
|
background-color: #f0f0f0;
|
cursor: pointer;
|
transition: background-color 0.3s;
|
font-size: 12px;
|
}
|
|
.button-row button:hover {
|
background-color: #e0e0e0;
|
}
|
|
.button-row button:active {
|
background-color: #d0d0d0;
|
transform: translateY(1px);
|
}
|
|
.log-area {
|
height: 300px;
|
overflow-y: auto;
|
border: 1px solid #ccc;
|
padding: 10px;
|
background-color: #f5f5f5;
|
white-space: pre-wrap;
|
font-family: "Courier New", monospace;
|
font-size: 12px;
|
line-height: 1.4;
|
}
|
|
h3 {
|
color: #333;
|
border-bottom: 2px solid #eee;
|
padding-bottom: 10px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
h3 button {
|
padding: 5px 10px;
|
font-size: 12px;
|
background-color: #f0f0f0;
|
border: 1px solid #ccc;
|
border-radius: 3px;
|
cursor: pointer;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.websocket-demo {
|
padding: 10px;
|
}
|
|
.input-group {
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
|
.input-group input {
|
width: 100%;
|
}
|
|
.button-row {
|
flex-direction: column;
|
}
|
|
.button-row button {
|
width: 100%;
|
margin-bottom: 5px;
|
}
|
}
|
</style>
|
