lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 1

Browse Source
This commit is contained in:
duanliang
2025-05-30 13:50:43 +08:00
parent 21a3bc6452
commit e3f0196e76
16 changed files with 2049 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/layout/components/Correspondence/index.vue
View File

@@ -43,6 +43,7 @@
<el-dialog :title="gridTitle" center v-model="dialogTableVisible">
<div class="bom-box">
<div class="table">
<div class="header">
<div>姓名</div>
<div>部门</div>
@@ -58,7 +59,7 @@
<div>{{ item.phoneNumber }}</div>
<div>
<img @click="doCallTel(item)" class="tel-ico" src="@/assets/images/tel-icon.png" />
<img @click="doCallVoice(item)" class="voice-ico" src="@/assets/images/voice-icon.png" />
<!-- <img @click="doCallVoice(item)" class="voice-ico" src="@/assets/images/voice-icon.png" /> -->
<img @click="doCallVideo(item)" class="sp-ico" src="@/assets/images/sp-icom.png" />
</div>
</div>
@@ -74,14 +75,36 @@
</div>
</div>
</el-dialog>
<el-dialog v-model="dialogComVideo">
<div class="videoPrefecture_video" id="videoPrefecture">
<video id="youVideo" class="oneVideo"></video>
<video id="meVideo" class="twoVideo"></video>
<!-- <span class="glyphicon glyphicon-volume-down"></span>-->
<!-- <span class="glyphicon glyphicon-off"></span>-->
</div>
</el-dialog>
<!-- <el-dialog :title="'三峡之巅广播'" top="0" @close="closeTh" width="1200px" center v-model="dialogTableVisible3">
</el-dialog> -->
<div v-show="dialogTableVisible3" class="videoPrefecture_video" id="videoPrefecture">
<img src="/src/assets/images/close.png" @click="closeTh" class="closeCall" alt="" />
<div class="flex-hj" :class="callType!=3?'tell-flex':''">
<video id="youVideo" class="oneVideo"></video>
<div class="hj-box" v-if="callType==3">
<div v-if="progressVal!=='通话中'">
<img src="/src/assets/images/hj-1.png" class="hj-ico" alt="" />
<div>{{progressVal=='未通话'?'呼叫中...':progressVal}}</div>
</div>
</div>
<div class="hj-box " v-else>
<img src="/src/assets/images/hj-1.png" class="hj-ico" alt="" />
<div>{{progressVal=='未通话'?'呼叫中...':progressVal}}</div>
</div>
</div>
<div class="gd-ico" >
<el-button type="success" @click="doCallVideo()" v-if="progressVal=='呼叫停止'||progressVal=='呼叫失败'" round>重拨</el-button>
<!-- <el-button type="success" round>解除保持</el-button> -->
<el-button type="success" @click="ansWerPhone()" v-else-if="thState" round>接听</el-button>
<el-button type="danger" @click="closeTh" v-else round>挂断</el-button>
</div>
<video id="meVideo" :class="callType==3?'':'callVideo'" class="twoVideo"></video>
<span class="glyphicon glyphicon-volume-down"></span>
<span class="glyphicon glyphicon-off"></span>
</div>
</div>
</template>
@@ -93,8 +116,10 @@
let deptsList = ref([])
let dialogTableVisible = ref(false)
let dialogTableVisible2 = ref(false)
let dialogTableVisible3 = ref(false)
let callType = ref(3)
let dialogComVideo = ref(false)
const webrtcInstance = new MyWebrtc();
const webrtcInstance = new MyWebrtc()
const getComDepts = async () => {
let res = await getComDeptsApi()
deptsList.value = res.data
@@ -110,18 +135,58 @@
dialogTableVisible2.value = true
// location.href="http://192.168.0.2:81/";
}
let progressVal = ref(null)
let timer = ref(null)
watch(
() => dialogTableVisible.value,
(val) => {
// comRegister();
}
)
const doCallTel = (item) => {
webrtcInstance.JsSip_VoiceCall('15123854798',true);
dialogComVideo.value=true;
callType.value = 1
dialogTableVisible3.value=true;
nextTick(()=>{
webrtcInstance.JsSip_VoiceCall('15123854798',true);
})
}
const doCallVoice = (item) => {
webrtcInstance.JsSip_VoiceCall('854798',false);
dialogComVideo.value=true;
callType.value = 2
dialogTableVisible3.value=true;
nextTick(()=>{
webrtcInstance.JsSip_VoiceCall('854798',false);
})
}
const doCallVideo = (item) => {
webrtcInstance.JsSip_VoiceCall('854798',true);
dialogComVideo.value=true;
callType.value = 3
dialogTableVisible3.value = true;
nextTick(()=>{
webrtcInstance.JsSip_VoiceCall('854798',true);
})
}
// 接听
const ansWerPhone = ()=> {
//调用语音接听方法
nextTick(()=>{
webrtcInstance.VoiceAnsWter();
thState.value = false
})
}
const huangUp = ()=>{
// clearInterval(timer.value)
//调用挂断方法
dialogTableVisible3.value = false;
webrtcInstance.JsSip_hangUpPhone();
}
const closeTh = ()=>{
huangUp()
}
const handleDepsUser = async (id, item) => {
gridTitle.value = item.name
dialogTableVisible.value = true
@@ -129,16 +194,120 @@
gridData.value = res.data
}
const comRegister = () => {
webrtcInstance.jssipAgent('101','192.168.77.8','7066','Admin246246246',null,null,null);
//初始化
nextTick(()=>{
webrtcInstance.jssipAgent('101','192.168.77.8','7066','Admin246246246',null,null,null);
// console.log(webrtcInstance.changeAgent)
webrtcInstance.changeAgent.on('newRTCSession',(res)=>{
timer.value = setInterval(()=>{
progressVal.value = webrtcInstance.callPoneState()
// console.log(progressVal.value,'progressVal.value')
if(progressVal.value.includes('来电')){
dialogTableVisible3.value = true;
thState.value = true
}else if( progressVal.value == '呼叫停止'){
thState.value = false
// dialogTableVisible3.value = false;
// clearInterval(timer.value)
}else if( progressVal.value == '已挂断'){
thState.value = false
closeTh()
}else{
thState.value = false
}
},1000)
})
})
}
let thState = ref(false)
onMounted(() => {
getComDepts()
getComRecord()
comRegister();
comRegister()
return false
timer.value = setInterval(()=>{
progressVal.value = webrtcInstance.callPoneState()
console.log(progressVal.value,'progressVal.value')
if(progressVal.value.includes('来电')){
dialogTableVisible3.value = true;
thState.value = true
}else if( progressVal.value == '呼叫停止'){
thState.value = false
dialogTableVisible3.value = false;
// clearInterval(timer.value)
}else if( progressVal.value == '已挂断'){
thState.value = false
closeTh()
}else{
thState.value = false
}
},1000)
})
</script>
<style lang="scss" scoped>
.th-box{
margin:0 auto;
}
.callVideo{
opacity: 0 !important;
}
.flex-hj{
display: flex;
align-items: center;
position:relative;
// width:1050px;
// height:900px;
text-align: center;
}
.tell-flex{
margin:0 auto;
}
.hj-box{
text-align: center;
position:absolute;
left:0;
width:100%;
color:#fff;
font-size:vw(40);
.hj-ico{
width:vw(200);
margin-bottom:vh(20);
}
}
.closeCall{
position:absolute;
right:0;
top:10px;
z-index: 6000;
}
.videoPrefecture_video{
position:relative;
min-height:600px;
position: absolute;
background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
top:50%;
left:50%;
transform: translate(-50%,-50%);
z-index: 4999;
.oneVideo{
width:100%;
height:100%;
}
.twoVideo{
position:absolute;
bottom:20px;
right:20px;
}
.gd-ico{
position:absolute;
right:50px;
top:50px;
}
}
:deep(.el-dialog__headerbtn .el-dialog__close){
color:#fff;
font-size:40px;