490 lines
13 KiB
Vue
490 lines
13 KiB
Vue
<template>
|
|
<div class="correspondence">
|
|
<div class="top-box">
|
|
<div class="title">融合通信</div>
|
|
<div class="icon-box flex" style="height: initial;">
|
|
<div
|
|
class="item"
|
|
v-for="item in deptsList"
|
|
:key="item.id"
|
|
@click="handleDepsUser(item.id, item)"
|
|
>
|
|
<img src="/src/assets/images/r-icon-1.png" />
|
|
<view class="item-name">{{ item.name }}</view>
|
|
</div>
|
|
<div
|
|
class="item"
|
|
@click="goItc()"
|
|
>
|
|
<img src="/src/assets/images/r-icon-1.png" />
|
|
<view class="item-name">三峡之巅广播</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bom-box">
|
|
<Title2 title="最近联系" />
|
|
<div class="table">
|
|
<div class="header">
|
|
<div>人员姓名</div>
|
|
<div>部门</div>
|
|
<div>时间</div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="item" v-for="(item, index) in recordList" :key="index">
|
|
<div>{{ item.nickname }}</div>
|
|
<div>{{ item.department }}</div>
|
|
<div>{{ item.time }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-dialog :title="gridTitle" center v-model="dialogTableVisible">
|
|
<div class="bom-box">
|
|
<div class="table">
|
|
|
|
<div class="header">
|
|
<div>姓名</div>
|
|
<div>部门</div>
|
|
<div>职位</div>
|
|
<div>电话号码</div>
|
|
<div>操作</div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="item" v-for="(item, index) in gridData" :key="index">
|
|
<div>{{ item.nickName }}</div>
|
|
<div>{{ item.depthName }}</div>
|
|
<div>{{ item.postName }}</div>
|
|
<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="doCallVideo(item)" class="sp-ico" src="@/assets/images/sp-icom.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog :title="'三峡之巅广播'" center v-model="dialogTableVisible2">
|
|
<div class="bom-box bom-box2">
|
|
<div class="table2">
|
|
<!-- <div class="header-title">三峡之巅广播</div> -->
|
|
<iframe style="width:100%;height:100%;" src="http://192.168.0.2:81/"></iframe>
|
|
</div>
|
|
</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>
|
|
|
|
<script setup>
|
|
import { getComDeptsApi, getComDeptUsersApi, getComRecordApi } from '@/api/common'
|
|
import {useWebSocket} from "@/hooks/socket.js";
|
|
import {mode, proSocketBaseUrl, socketBaseUrl} from "@/utils/config.js";
|
|
import MyWebrtc from '@/assets/com/webrtc.js';
|
|
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 getComDepts = async () => {
|
|
let res = await getComDeptsApi()
|
|
deptsList.value = res.data
|
|
}
|
|
let recordList = ref([])
|
|
const getComRecord = async () => {
|
|
let res = await getComRecordApi()
|
|
recordList.value = res.data
|
|
}
|
|
let gridData = ref([])
|
|
let gridTitle = ref('')
|
|
const goItc = () => {
|
|
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) => {
|
|
callType.value = 1
|
|
dialogTableVisible3.value=true;
|
|
nextTick(()=>{
|
|
webrtcInstance.JsSip_VoiceCall('15123854798',true);
|
|
})
|
|
}
|
|
const doCallVoice = (item) => {
|
|
callType.value = 2
|
|
dialogTableVisible3.value=true;
|
|
|
|
nextTick(()=>{
|
|
webrtcInstance.JsSip_VoiceCall('854798',false);
|
|
})
|
|
|
|
}
|
|
const doCallVideo = (item) => {
|
|
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
|
|
let res = await getComDeptUsersApi({ id })
|
|
gridData.value = res.data
|
|
}
|
|
const comRegister = () => {
|
|
//初始化
|
|
nextTick(()=>{
|
|
webrtcInstance.jssipAgent('111','192.168.77.8','7066','Admin1246246',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()
|
|
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;
|
|
position:relative;
|
|
top:15px;
|
|
right:15px;
|
|
}
|
|
:deep(.el-dialog) {
|
|
background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
|
|
background-size: 100% 100%;
|
|
}
|
|
:deep(.el-dialog__title) {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
.tel-ico {
|
|
width: vw(30);
|
|
cursor: pointer;
|
|
margin-right: vw(20);
|
|
}
|
|
.voice-ico{
|
|
width: vw(35);
|
|
cursor: pointer;
|
|
margin-right: vw(20);
|
|
}
|
|
.sp-ico {
|
|
width: vw(40);
|
|
cursor: pointer;
|
|
}
|
|
.item-name {
|
|
width: 90%;
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
font-size:vw(18);
|
|
}
|
|
.sp-img {
|
|
width: vw(100);
|
|
}
|
|
.correspondence {
|
|
margin: vw(8);
|
|
width: vw(300);
|
|
// height: vh(1070);
|
|
height: 100%;
|
|
background-image: url('@/assets/images/bg-1.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.bom-box2{
|
|
// margin-top:vh(10);
|
|
min-width:vw(900);
|
|
height:vh(800);
|
|
.header-title{
|
|
font-size:vw(24);
|
|
color:#fff;
|
|
text-align:center;
|
|
font-weight:bold;
|
|
margin-bottom:vh(20);
|
|
}
|
|
}
|
|
.bom-box {
|
|
.table2{
|
|
width:100%;
|
|
height:vh(740);
|
|
}
|
|
.table {
|
|
width: 100%;
|
|
margin-top: vh(20);
|
|
.header {
|
|
height: vh(28);
|
|
font-weight: 400;
|
|
font-size: font-vw(20);
|
|
color: #fff;
|
|
display: flex;
|
|
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
|
& > div {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.list {
|
|
overflow-y: auto;
|
|
height: vh(490);
|
|
/* 滚动条整体样式 */
|
|
&::-webkit-scrollbar {
|
|
width: vw(4); /* 滚动条的宽度 */
|
|
}
|
|
/* 滚动条轨道 */
|
|
&::-webkit-scrollbar-track {
|
|
background: 'transparent'; /* 轨道的背景色 */
|
|
}
|
|
/* 滚动条滑块 */
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
|
border-radius: 5px; /* 滑块的圆角 */
|
|
}
|
|
.item {
|
|
height: vh(50);
|
|
font-weight: 400;
|
|
font-size: font-vw(14);
|
|
color: #f1f7ff;
|
|
display: flex;
|
|
&:nth-child(2n + 1) {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 150, 255, 0) 0%,
|
|
rgba(0, 150, 255, 0.22) 100%
|
|
);
|
|
}
|
|
& > div {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: nowrap; /* 保证文本在一行内显示 */
|
|
overflow: hidden; /* 隐藏溢出的内容 */
|
|
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.title {
|
|
span {
|
|
margin-left: vw(30);
|
|
font-weight: 800;
|
|
font-size: font-vw(15);
|
|
line-height: vh(26);
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
color: transparent;
|
|
}
|
|
}
|
|
}
|
|
.top-box {
|
|
width: 100%;
|
|
height: vh(500);
|
|
height:50%;
|
|
.icon-box {
|
|
font-weight: 400;
|
|
font-size: font-vw(14);
|
|
color: #ffffff;
|
|
line-height: vh(16);
|
|
flex-wrap: wrap;
|
|
.item {
|
|
cursor: pointer;
|
|
width: 50%;
|
|
margin-top: vh(40);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
& > img {
|
|
width: vw(54);
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
.title {
|
|
width: vw(260);
|
|
height: vh(26);
|
|
text-align: center;
|
|
line-height: vh(26);
|
|
margin-left: vw(32.5);
|
|
font-size: font-vw(22);
|
|
font-weight: 800;
|
|
color: #fff;
|
|
background-image: url('@/assets/images/title-1.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
</style>
|