From 43017c316ab6a2e11305a7f016b12d13736e8cc1 Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期二, 02 十二月 2025 17:33:33 +0800
Subject: [PATCH] 测试完成
---
src/views/followvisit/record/detailpage/index.vue | 215 ++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 193 insertions(+), 22 deletions(-)
diff --git a/src/views/followvisit/record/detailpage/index.vue b/src/views/followvisit/record/detailpage/index.vue
index f41424d..886d0b5 100644
--- a/src/views/followvisit/record/detailpage/index.vue
+++ b/src/views/followvisit/record/detailpage/index.vue
@@ -628,8 +628,8 @@
icon="el-icon-phone"
@click="handleCall(userform.telcode, 'tel')"
:disabled="!isValidPhone(userform.telcode)"
- ></el-button
- ></el-input> </el-form-item
+ ></el-button>
+ </el-input> </el-form-item
></el-col>
</el-row>
<el-row>
@@ -664,22 +664,44 @@
style="display: none"
/>
- <div v-if="callStatus === 'connected'" class="hangup-btn">
+ <!-- 鎸傛柇鎸夐挳鏍峰紡浼樺寲 -->
+ <div v-if="callStatus === 'connected'" class="hangup-container">
<el-button
type="danger"
icon="el-icon-phone"
@click="endCurrentCall"
:loading="isEndingCall"
+ class="hangup-btn"
+ size="medium"
>
- 鎸傛柇鐢佃瘽
+ {{ isEndingCall ? "鎸傛柇涓�..." : "鎸傛柇鐢佃瘽" }}
</el-button>
+
+ <!-- 閫氳瘽璁℃椂鏄剧ず -->
+ <div class="call-timer" v-if="callStartTime">
+ 閫氳瘽鏃堕暱: {{ formatCallTime }}
+ </div>
</div>
- <div class="call-status" v-if="callStatus !== 'idle'">
+
+ <!-- 鐘舵�佹彁绀轰紭鍖� -->
+ <div class="call-status-container" v-if="callStatus !== 'idle'">
<el-alert
:title="callStatusText"
:type="callStatusType"
:closable="false"
show-icon
+ :class="['status-alert', `status-${callStatus}`]"
+ />
+ </div>
+
+ <!-- SIP娉ㄥ唽鐘舵�佹彁绀� -->
+ <div v-if="isSipRegistering&&orgname == '涓芥按甯備腑鍖婚櫌'" class="sip-registering">
+ <el-alert
+ title="鍛煎彨搴ф満鍒濆鍖栦腑锛岃绋嶅��..."
+ type="info"
+ :closable="false"
+ show-icon
+ class="registering-alert"
/>
</div>
</div>
@@ -1133,6 +1155,7 @@
userid: "",
currentPhoneNumber: "",
callType: "", // 鐢ㄤ簬鍖哄垎鏄摢涓數璇�
+ isSipRegistering: true, // SIP娉ㄥ唽鐘舵��
// 宸叉湁鏁版嵁...
callStatus: "idle", // idle, calling, connected, ended, failed
isEndingCall: false,
@@ -1405,7 +1428,22 @@
this.getTaskservelist();
},
-
+mounted() {
+ // 鐩戝惉瀛愮粍浠剁殑sipStatus灞炴�у彉鍖�
+ if (this.$refs.callButton) {
+ this.$watch(
+ () => this.$refs.callButton.sipStatus,
+ (newStatus) => {
+ if (newStatus === '宸叉敞鍐�') {
+ this.isSipRegistering = false;
+ } else if (newStatus === '娉ㄥ唽澶辫触' || newStatus === '鏈繛鎺�') {
+ this.isSipRegistering = true;
+ }
+ },
+ { immediate: true } // 绔嬪嵆鎵ц涓�娆′互鑾峰彇鍒濆鍊�
+ );
+ }
+ },
methods: {
// 鑾峰彇涓婚鏍峰紡绫�
getTopicClass(item) {
@@ -1763,22 +1801,34 @@
this.$message.error("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜");
return;
}
+ // 妫�鏌IP鏄惁宸叉敞鍐�
+
this.currentPhoneNumber = phone;
// 鏄惁鏅畞鍛煎彨
if (this.orgname == "鏅畞鐣叉棌鑷不鍘夸汉姘戝尰闄�") {
this.CaldialogVisible = true;
return;
}
-// 涓嬫柟鏄腑鍖婚櫌鍛煎彨
+ // 涓嬫柟鏄腑鍖婚櫌鍛煎彨
+ if (this.isSipRegistering) {
+ this.$message.warning("绯荤粺姝ｅ湪鍒濆鍖栵紝璇风◢鍊�...");
+ return;
+ }
this.callType = type;
this.callStatus = "calling";
this.$nextTick(() => {
this.$refs.callButton.startCall();
- // 鐩戝惉閫氳瘽鐘舵�佸彉鍖�
this.$refs.callButton.$on("call-status-change", (status) => {
this.handleCallStatusChange(status);
+ // 鐩戝惉娉ㄥ唽鐘舵�佸彉鍖�
+ if (status.type === "registered") {
+ this.isSipRegistering = false;
+ }
+ if (status.type === "failed" || status.type === "disconnected") {
+ this.isSipRegistering = true;
+ }
});
});
},
@@ -2427,15 +2477,18 @@
.manual-action {
flex: 1;
min-width: 0;
- height: 100%; /* 纭繚楂樺害缁ф壙 */
+ height: 100%;
+ /* 纭繚楂樺害缁ф壙 */
}
.call-action {
width: 60%;
min-width: 0;
- height: 100%; /* 纭繚楂樺害缁ф壙 */
+ height: 100%;
+ /* 纭繚楂樺害缁ф壙 */
}
}
+
.numeric-input {
position: relative;
}
@@ -2452,6 +2505,7 @@
padding: 2px 6px;
border-radius: 4px;
}
+
.call-container {
padding: 20px;
background: #fff;
@@ -2481,11 +2535,13 @@
margin-top: 20px;
}
}
+
.merge-controls {
background: #f5f7fa;
border-radius: 4px;
margin-left: 20px;
}
+
.Followuserinfo {
margin: 10px 10px 0 10px;
align-items: center;
@@ -2519,8 +2575,10 @@
background: #ffff;
border: 1px solid #dcdfe6;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
- height: 100%; /* 纭繚楂樺害缁ф壙 */
- min-height: 880px; /* 鏈�灏忛珮搴︿笌闅忚鍐呭涓�鑷� */
+ height: 100%;
+ /* 纭繚楂樺害缁ф壙 */
+ min-height: 880px;
+ /* 鏈�灏忛珮搴︿笌闅忚鍐呭涓�鑷� */
display: flex;
flex-direction: column;
@@ -2540,11 +2598,15 @@
.el-form {
flex: 1;
- overflow-y: auto; /* 鍐呭瓒呰繃楂樺害鏃舵樉绀烘粴鍔ㄦ潯 */
- max-height: calc(880px - 60px); /* 鍑忓幓padding */
- padding-right: 10px; /* 闃叉婊氬姩鏉￠伄鎸″唴瀹� */
+ overflow-y: auto;
+ /* 鍐呭瓒呰繃楂樺害鏃舵樉绀烘粴鍔ㄦ潯 */
+ max-height: calc(880px - 60px);
+ /* 鍑忓幓padding */
+ padding-right: 10px;
+ /* 闃叉婊氬姩鏉￠伄鎸″唴瀹� */
}
}
+
.append-input-container {
margin-top: 15px;
padding: 10px;
@@ -2552,6 +2614,7 @@
border-radius: 4px;
border: 1px solid #dcdfe6;
}
+
.borderdiv {
min-height: 60vh;
font-size: 20px;
@@ -2590,14 +2653,111 @@
}
}
}
+
.topic-dev[inert] {
opacity: 0.5;
pointer-events: none;
}
+/* 鎸傛柇瀹瑰櫒鏍峰紡 */
+.hangup-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+ margin: 15px 0;
+}
+
+.hangup-btn {
+ width: 120px;
+ height: 40px;
+ font-size: 14px;
+ border-radius: 20px;
+ box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
+ transition: all 0.3s ease;
+}
+
+.hangup-btn:hover:not(:disabled) {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
+}
+
+/* 閫氳瘽璁℃椂鍣� */
+.call-timer {
+ font-size: 12px;
+ color: #666;
+ background: #f5f5f5;
+ padding: 4px 12px;
+ border-radius: 12px;
+ font-family: "Courier New", monospace;
+}
+
+/* 鐘舵�佹彁绀哄鍣� */
+.call-status-container {
+ margin: 10px 0;
+}
+
+.status-alert {
+ border-radius: 8px;
+ transition: all 0.3s ease;
+}
+
+.status-alert.status-calling {
+ border-left: 4px solid #e6a23c;
+}
+
+.status-alert.status-connected {
+ border-left: 4px solid #67c23a;
+ animation: pulse 2s infinite;
+}
+
+.status-alert.status-ended {
+ border-left: 4px solid #909399;
+}
+
+/* SIP娉ㄥ唽鎻愮ず */
+.sip-registering {
+ margin: 10px 0;
+}
+
+.registering-alert {
+ border-radius: 8px;
+ background-color: #f4f4f5;
+ border-left: 4px solid #909399;
+}
+
+/* 鍔ㄧ敾鏁堟灉 */
+@keyframes pulse {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.7;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 768px) {
+ .hangup-container {
+ margin: 10px 0;
+ }
+
+ .hangup-btn {
+ width: 100%;
+ max-width: 200px;
+ }
+
+ .status-alert {
+ font-size: 12px;
+ }
+}
.CONTENT {
padding: 10px;
height: 100%;
- min-height: 738px; /* 璁剧疆鏈�灏忛珮搴� */
+ min-height: 738px;
+ /* 璁剧疆鏈�灏忛珮搴� */
.title {
font-size: 22px;
@@ -2612,8 +2772,10 @@
padding: 30px;
border: 1px solid #dcdfe6;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
- max-height: 618px; /* 璁剧疆鏈�澶ч珮搴� */
- overflow-y: auto; /* 鍐呭瓒呰繃楂樺害鏃舵樉绀烘粴鍔ㄦ潯 */
+ max-height: 618px;
+ /* 璁剧疆鏈�澶ч珮搴� */
+ overflow-y: auto;
+ /* 鍐呭瓒呰繃楂樺害鏃舵樉绀烘粴鍔ㄦ潯 */
.topic-dev {
margin-bottom: 25px;
@@ -2669,7 +2831,8 @@
/* 鏂板锛氳鍛婄姸鎬佹牱寮� - 榛勮壊 */
.scriptTopic-warning {
- color: #d4be00; /* 鎮ㄦ寚瀹氱殑榛勮壊 */
+ color: #d4be00;
+ /* 鎮ㄦ寚瀹氱殑榛勮壊 */
}
/* 寮傚父閫夐」鏍峰紡 - 绾㈣壊鏄熷彿 (淇濇寔涓嶅彉) */
@@ -2697,7 +2860,8 @@
::v-deep.el-radio__label::after {
content: "*";
- color: #ffe202; /* 榛勮壊鏄熷彿 */
+ color: #ffe202;
+ /* 榛勮壊鏄熷彿 */
position: absolute;
right: -5px;
top: 0;
@@ -2723,6 +2887,7 @@
right: -5px;
top: 0;
}
+
.tag-selector-container {
display: flex;
align-items: center;
@@ -2759,9 +2924,11 @@
.tag-normal {
background-color: #7ff5e1;
}
+
.tag-abnormal {
background-color: #f75c5c;
}
+
.tag-warning {
background-color: #fbfb4a;
}
@@ -2771,6 +2938,7 @@
color: #909399;
cursor: pointer;
}
+
::v-deep.offside-value .el-radio__label {
color: #fff;
}
@@ -2820,6 +2988,7 @@
color: #080808 !important;
cursor: not-allowed;
}
+
/* 鍘熸湁鐨勬牱寮忎繚鎸佷笉鍙橈紝娣诲姞浠ヤ笅鍝嶅簲寮忎唬鐮� */
.Followupdetailspage {
@@ -2831,7 +3000,8 @@
.action-container {
display: flex;
- flex-direction: row; /* 榛樿妯悜鎺掑垪 */
+ flex-direction: row;
+ /* 榛樿妯悜鎺掑垪 */
gap: 20px;
margin: 0 10px 20px 10px;
@@ -2974,7 +3144,8 @@
/* 纭繚鍐呭鍦ㄧ缉鏀炬椂淇濇寔鍙鎬� */
.headline {
- font-size: clamp(18px, 2vw, 24px); /* 浣跨敤clamp鍑芥暟纭繚瀛椾綋澶у皬鍦ㄥ悎鐞嗚寖鍥村唴 */
+ font-size: clamp(18px, 2vw, 24px);
+ /* 浣跨敤clamp鍑芥暟纭繚瀛椾綋澶у皬鍦ㄥ悎鐞嗚寖鍥村唴 */
}
/* 涓虹Щ鍔ㄨ澶囦紭鍖栨粴鍔ㄤ綋楠� */
--
Gitblit v1.9.3