<template>
|
<div class="call-container">
|
<div class="sip-status" :class="sipStatusClass">
|
SIP状态: {{ sipStatus }}
|
</div>
|
|
<!-- 状态显示 -->
|
<div class="call-status" :class="callStatusClass">
|
{{ callStatusText }}
|
</div>
|
|
<!-- 呼叫按钮 -->
|
<button
|
:class="['call-btn', { calling: isCalling }]"
|
@click="startCall"
|
:disabled="isCalling || sipStatus !== '已注册'"
|
>
|
{{ callButtonText }}
|
</button>
|
|
<!-- 挂断按钮 -->
|
<button v-if="isCalling" class="end-call-btn" @click="endCall">挂断</button>
|
|
<!-- 音频元素（隐藏） -->
|
<audio id="remoteAudio" autoplay></audio>
|
</div>
|
</template>
|
|
<script>
|
import sipService from "@/utils/sipService";
|
import { CallsetState, CallgetList } from "@/api/AiCentre/index";
|
|
export default {
|
props: {
|
phoneNumber: {
|
type: String,
|
default: "",
|
},
|
},
|
data() {
|
const randomNum = Math.floor(Math.random() * 20) + 1000; // 定义随机分机号
|
return {
|
isCalling: false,
|
randomNum: randomNum,
|
randomID: null,
|
callStatus: "idle", // idle, calling, connected, ended
|
sipStatus: "未连接",
|
sipStatusClass: "status-disconnected",
|
sipConfig: {
|
wsUrl: "wss://192.168.100.6:7443",
|
sipUri: "",
|
password: "Smartor@2023",
|
displayName: "Web 小龙",
|
// realm: "9.208.5.18:8090",
|
},
|
};
|
},
|
computed: {
|
callStatusText() {
|
const statusMap = {
|
idle: "准备就绪",
|
calling: "呼叫中...",
|
connected: "通话中",
|
ended: "通话结束",
|
};
|
return statusMap[this.callStatus];
|
},
|
countdownText() {
|
if (this.sipStatus !== "已注册") return "";
|
|
const { canCall, reason } = sipService.canMakeCall();
|
if (!canCall && reason.includes("等待")) {
|
return reason;
|
}
|
return "";
|
},
|
callStatusClass() {
|
return `status-${this.callStatus}`;
|
},
|
callButtonText() {
|
return this.isCalling ? "通话中..." : "一键呼叫";
|
},
|
},
|
created() {
|
// CallgetList();
|
},
|
|
async mounted() {
|
await this.CallgetList();
|
sipService.init(this.sipConfig);
|
// 设置状态回调
|
sipService.onStatusChange = (status) => {
|
this.sipStatus = status.text;
|
this.sipStatusClass = `status-${status.type}`;
|
|
// 处理注册失败和断开连接情况
|
if (status.type === "failed" || status.type === "disconnected") {
|
this.overCallsetState(); // 释放分机号
|
}
|
};
|
|
// 监听通话状态变化
|
sipService.onCallStatusChange = (status) => {
|
this.callStatus = status.type;
|
this.isCalling = status.type === "calling" || status.type === "connected";
|
|
// 通知父组件通话状态变化
|
this.$emit("call-status-change", status);
|
};
|
},
|
methods: {
|
async startCall() {
|
if (!this.phoneNumber) {
|
this.$message.error("请输入电话号码");
|
return;
|
}
|
|
try {
|
// 先检查是否可以呼叫
|
const { canCall, reason } = sipService.canMakeCall();
|
if (!canCall) {
|
const { canCall, reason } = sipService.canMakeCall();
|
//this.$message.warning(reason);
|
//return;
|
}
|
this.callStatus = "calling";
|
this.isCalling = true;
|
console.log("开始呼叫：", sipService);
|
|
await sipService.makeCall("0" + this.phoneNumber);
|
} catch (error) {
|
let registrationTime = Date.now(); // 记录注销成功时间
|
console.log(registrationTime, "呼叫失败时间");
|
console.error("呼叫失败1:", error);
|
// this.callStatus = "ended";
|
// this.isCalling = false;
|
//this.$message.error(`呼叫失败: ${error.message}`);
|
try {
|
// 先检查是否可以呼叫
|
const { canCall, reason } = sipService.canMakeCall();
|
if (!canCall) {
|
const { canCall, reason } = sipService.canMakeCall();
|
}
|
this.callStatus = "calling";
|
this.isCalling = true;
|
console.log("开始呼叫：", sipService);
|
|
await sipService.makeCall("0" + this.phoneNumber);
|
} catch (error) {
|
this.callStatus = "ended";
|
this.isCalling = false;
|
}
|
}
|
},
|
// 查询可用分机号
|
async CallgetList() {
|
try {
|
const res = await CallgetList();
|
this.randomNum = res.data[0].tel;
|
this.randomID = res.data[0].id;
|
// 正确设置 sipUri
|
this.sipConfig.sipUri = `${this.randomNum}@192.168.100.6`;
|
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);
|
}
|
},
|
endCall() {
|
sipService.endCall();
|
this.callStatus = "ended";
|
this.isCalling = false;
|
},
|
cleanupResources() {
|
// 结束通话
|
if (this.isCalling) {
|
sipService.endCall();
|
}
|
|
// 释放分机号
|
this.overCallsetState();
|
|
// 断开 SIP 连接
|
if (sipService.ua) {
|
sipService.ua.stop();
|
}
|
},
|
},
|
beforeUnmount() {
|
// 组件销毁时确保释放资源
|
this.cleanupResources();
|
},
|
};
|
</script>
|
|
<style scoped>
|
.call-container {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
max-width: 300px;
|
margin: 0 auto;
|
padding: 20px;
|
border: 1px solid #eee;
|
border-radius: 8px;
|
}
|
|
input {
|
padding: 8px;
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
}
|
|
.call-btn {
|
padding: 10px;
|
background-color: #4caf50;
|
color: white;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
.call-status {
|
padding: 8px;
|
margin: 10px 0;
|
border-radius: 4px;
|
text-align: center;
|
}
|
|
.status-idle {
|
background-color: #f5f5f5;
|
color: #666;
|
}
|
|
.status-calling {
|
background-color: #fff8e1;
|
color: #ff8f00;
|
}
|
|
.status-connected {
|
background-color: #e8f5e9;
|
color: #2e7d32;
|
}
|
|
.status-ended {
|
background-color: #ffebee;
|
color: #c62828;
|
}
|
|
/* 原有样式保持不变 */
|
.call-container {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
max-width: 300px;
|
margin: 0 auto;
|
padding: 20px;
|
border: 1px solid #eee;
|
border-radius: 8px;
|
}
|
|
.call-btn {
|
padding: 10px;
|
background-color: #4caf50;
|
color: white;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
|
.call-btn:hover:not(:disabled) {
|
background-color: #45a049;
|
}
|
|
.call-btn:disabled {
|
background-color: #cccccc;
|
cursor: not-allowed;
|
}
|
|
.call-btn.calling {
|
background-color: #2196f3;
|
}
|
|
.end-call-btn {
|
padding: 10px;
|
background-color: #f44336;
|
color: white;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
|
.end-call-btn:hover {
|
background-color: #d32f2f;
|
}
|
|
.sip-status {
|
padding: 8px;
|
margin-bottom: 10px;
|
border-radius: 4px;
|
text-align: center;
|
}
|
|
.status-disconnected {
|
background-color: #ffebee;
|
color: #c62828;
|
}
|
|
.status-connecting {
|
background-color: #fff8e1;
|
color: #ff8f00;
|
}
|
|
.status-registered {
|
background-color: #e8f5e9;
|
color: #2e7d32;
|
}
|
|
.status-failed {
|
background-color: #ffebee;
|
color: #c62828;
|
}
|
.call-btn:hover {
|
background-color: #45a049;
|
}
|
|
.call-btn.calling {
|
background-color: #2196f3;
|
}
|
|
.end-call-btn {
|
padding: 10px;
|
background-color: #f44336;
|
color: white;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
|
.end-call-btn:hover {
|
background-color: #d32f2f;
|
}
|
|
.call-status {
|
margin-top: 10px;
|
font-size: 14px;
|
color: #666;
|
}
|
.sip-status {
|
padding: 8px;
|
margin-bottom: 10px;
|
border-radius: 4px;
|
text-align: center;
|
}
|
|
.status-disconnected {
|
background-color: #ffebee;
|
color: #c62828;
|
}
|
|
.status-connecting {
|
background-color: #fff8e1;
|
color: #ff8f00;
|
}
|
|
.status-registered {
|
background-color: #e8f5e9;
|
color: #2e7d32;
|
}
|
|
.status-failed {
|
background-color: #ffebee;
|
color: #c62828;
|
}
|
</style>
|
