suojin
/
qilu_hospital_front
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加群组对讲逻辑

Browse Source
main
jinna 3 years ago
parent 1a0977f0c7
commit 0eda5773d5
1 changed files with 414 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 479
      src/views/dispatch/index.vue

479
src/views/dispatch/index.vue
Unescape View File

@ -58,7 +58,7 @@
</div>
<div class="device_name" :class="activeDevice == item.id ? 'act_dev_name' : ''">{{item.name}}</div>
<div class="dev_btn_box">
<div class="dev_btn" @click="inviteUser(item)" v-show="activeDevice == item.id">邀请</div>
<div class="dev_btn" @click="inviteUser(item)" v-show="activeDevice == item.id && !isIntercom">邀请</div>
<div class="dev_btn del_btn" v-show="activeDevice == item.id" @click="deleteUser(item)">删除</div>
</div>
@ -68,17 +68,19 @@
<img src="~@/assets/image/add_btn.png" alt="">添加用户
</div>
<div class="tree_box" v-show="activeTit == 2">
<el-tree :data="treeData" node-key="id" :props="defaultProps" @node-click="handleNodeClick" :default-checked-keys="selectTreeNode">
<el-tree ref="tree" :data="treeData" node-key="id" :props="defaultProps" @node-click="handleNodeClick"
:default-checked-keys="selectTreeNode" :default-expanded-keys="defaultExpandIds" >
<!-- @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" -->
<!-- selectTreeNode.map(item => item == data.id) ? 'select_node_item' : -->
<span class="custom-tree-node" @mouseenter="enterNode(node,data)" @mouseleave="leaveNode"
:class="activeNode == data.id ? 'active_node_item' : ''"
:class="[activeNode == data.id ? 'active_node_item' : '',node.level == 1 ? 'first_node' : '']"
slot-scope="{ node, data }" >
<i v-if="node.level == 1" class="spread_node"></i>
<i v-if="node.level == 1" class="level_first" />
<i v-else-if="node.level == 2" class="level_second" :class="activeNode == data.id ? 'active_level_second' : ''" />
<span :class="node.level == 1 ? 'first_span' : node.level == 2 ? 'second_span' : ''">{{ data.label }}</span>
<span v-if="node.level == 1" class="btn_level">邀请</span>
<span v-if="activeNode == data.id" class="btn_level">邀请</span>
<span v-if="node.level == 1 && !isGroup" @click.stop="inviteGroup(data)" class="btn_level">邀请</span>
<!-- <span v-if="activeNode == data.id" class="btn_level">邀请</span> -->
</span>
</el-tree>
@ -88,11 +90,11 @@
<div class="cen_tit">
<img src="~@/assets/image/voice_tit.png" alt="">
</div>
<div class="bottom_cen" v-show="inviteList.length > 1">
<div class="bottom_cen" v-show="inviteList.length > 1 && !isGroup">
<el-row :gutter="20">
<el-col :span="8" v-for="item in inviteList" :key="item.id">
<video class="bottom_item" id="item.id">
<video class="bottom_item" :id="'video' + item.id">
<!-- <div class="item_tit">终端设备名称——调度组1</div>
<div class="voice_con">
<img src="~@/assets/image/voice_bag.png" alt="">
@ -110,7 +112,7 @@
<el-col :span="8"><div class="bottom_item"></div></el-col> -->
</el-row>
</div>
<div class="group_cen" v-show="inviteList.length == 1">
<div class="group_cen" v-show="inviteList.length == 1 || isGroup">
<video class="group_video" src="" id="video">
<!-- <div class="group_tit">{{inviteList.length == 1 ? inviteList[0].name : ''}}</div>
<div class="group_voice">
@ -122,11 +124,15 @@
</div> -->
</video>
</div>
<div class="bot_cen">
<img v-show="inviteList.length > 1" src="~@/assets/image/over.png" alt="">
<img v-show="inviteList.length > 1" class="exit" src="~@/assets/image/exit_voice.png" alt="">
<img v-show="inviteList.length == 1" src="~@/assets/image/finish.png" alt="">
<img v-show="inviteList.length == 1" class="exit" src="~@/assets/image/exit_speak.png" alt="">
<div class="bot_cen" v-show="activeTit == 1">
<img v-show="(inviteList.length > 1 && !isIntercom) || (inviteList.length == 1 && isMetting)" @click="overMeeting" src="~@/assets/image/over.png" alt="">
<img v-show="(inviteList.length > 1 && !isIntercom) || (inviteList.length == 1 && isMetting)" @click="exitMeeting" class="exit" src="~@/assets/image/exit_voice.png" alt="">
<img v-show="(inviteList.length == 1 && isIntercom) || (inviteList.length == 1 && !isMetting)" @click="overTalk" src="~@/assets/image/finish.png" alt="">
<img v-show="(inviteList.length == 1 && isIntercom) || (inviteList.length == 1 && !isMetting)" @click="exitTalk" class="exit" src="~@/assets/image/exit_speak.png" alt="">
</div>
<div class="bot_cen" v-show="activeTit == 2">
<img v-show="inviteList.length !== 0" @click="overTalk" src="~@/assets/image/finish.png" alt="">
<img v-show="inviteList.length !== 0" @click="exitTalk" class="exit" src="~@/assets/image/exit_speak.png" alt="">
</div>
</div>
<div class="right_con">
@ -136,7 +142,7 @@
<div class="phone_box">
<div class="phone_tit"><span class="point"></span> 当前通话</div>
<div class="phone_list">
<div class="phone_item" v-for="item in phoneList" :key="item.id" :class="activePhone == item.id ? 'active_phone' : ''"
<div class="phone_item" v-for="item in inviteList" :key="item.id" :class="activePhone == item.id ? 'active_phone' : ''"
@mouseenter="itemHover(item)" @mouseleave="leavePhone">
<div v-show="activePhone == item.id" class="left_item"></div>
<div class="time_box">{{item.time}}</div>
@ -145,10 +151,10 @@
<img v-show="activePhone == item.id" class="img" src="~@/assets/image/phone_act.png" alt="">
<div>{{item.name}}</div>
</div>
<div v-show="activePhone == item.id" class="item_btn">请出</div>
<div @click="deletePhone(item)" v-show="activePhone == item.id && inviteList.length !== 1 && activeTit == 1" class="item_btn">请出</div>
</div>
</div>
<div class="miss_tit">
<!-- <div class="miss_tit">
<span class="point"></span> 未接通话
</div>
<div class="miss_list">
@ -156,7 +162,7 @@
<div class="miss_time">00:12:56</div>
<div class="miss_name">终端设备名称——调度组1</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
@ -165,7 +171,8 @@
:visible.sync="dialogVisible"
width="80%"
custom-class="user_dialog"
:before-close="handleClose">
:close-on-click-modal="false"
:close-on-press-escape="false">
<el-table
:data="userData"
:key="index"
@ -209,7 +216,7 @@
/>
</template>
</el-table-column>
<el-table-column width="286" align="center" prop="" label="密码">
<el-table-column width="260" align="center" prop="" label="密码">
<template slot-scope="scope">
<el-input
v-model="scope.row.password"
@ -246,6 +253,7 @@
v-model="scope.row.groupNum"
clearable
filterable
multiple
placeholder="请选择调度组"
size="medium"
>
@ -269,7 +277,7 @@
/>
</template>
</el-table-column>
<el-table-column width="286" align="center" prop="" label="类型">
<el-table-column width="200" align="center" prop="" label="类型">
<template slot-scope="scope">
<el-input
v-model="scope.row.type"
@ -281,9 +289,9 @@
/>
</template>
</el-table-column>
<el-table-column width="286" align="center" prop="" label="是否录音">
<el-table-column width="150" align="center" prop="" label="是否录音">
<template slot-scope="scope">
<el-select
<!-- <el-select
style="width: 90%"
v-model="scope.row.isRecord"
clearable
@ -293,12 +301,19 @@
>
<el-option label="是" :value="1" />
<el-option label="否" :value="0" />
</el-select>
</el-select> -->
<el-switch
v-model="scope.row.isRecord"
active-text="是"
inactive-text="否"
:active-value="1"
:inactive-value="0">
</el-switch>
</template>
</el-table-column>
<el-table-column width="286" align="center" prop="" label="是否录像">
<el-table-column width="150" align="center" prop="" label="是否录像">
<template slot-scope="scope">
<el-select
<!-- <el-select
style="width: 90%"
v-model="scope.row.isVideo"
clearable
@ -308,7 +323,14 @@
>
<el-option label="是" :value="1" />
<el-option label="否" :value="0" />
</el-select>
</el-select> -->
<el-switch
v-model="scope.row.isVideo"
active-text="是"
inactive-text="否"
:active-value="1"
:inactive-value="0">
</el-switch>
</template>
</el-table-column>
<el-table-column width="286" align="center" prop="" label="经度">
@ -353,24 +375,41 @@
<el-button type="primary" @click="userSubmit">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="请确认以哪种方式邀请该人员："
:visible.sync="dialogCall"
custom-class="call_dialog"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="30%">
<div class="call_btn_box">
<el-button @click="clickIntercom">对 讲</el-button>
<el-button style="margin-left:0.5rem;" @click="audioCall">音频呼叫</el-button>
<el-button style="margin-left:0.5rem;" type="primary" @click="videoCall">视频呼叫</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {getGroupList,deleteUser,addUser} from "@/api/dispatch/dispatch"
import { client, isRegisted, mylog } from "../../util/dispatch"
export default {
name: "alarmCenter",
data() {
return{
activeTit:1,
name:'',
dialogCall:false,
activeDevice:'',
activeNode:'',
selectTreeNode:['002','009'],
selectTreeNode:[],
activePhone:'',
dialogVisible:false,
deviceData:[],
isSroll:false,
isMetting:false,
treeData: [{
id:'001',
label: '调度组名称1',
@ -466,33 +505,40 @@ export default {
groupList:[],
listData:[
{id:'001',name:'终端设备名称1（1001）',isSelect:0},
{id:'002',name:'终端设备名称2（1002）',isSelect:0},
{id:'003',name:'终端设备名称3（1003）',isSelect:0},
{id:'004',name:'终端设备名称4（1004）',isSelect:0},
{id:'005',name:'终端设备名称5（1005）',isSelect:0},
{id:'006',name:'终端设备名称6（1006）',isSelect:0},
{id:'007',name:'终端设备名称7（1007）',isSelect:0},
{id:'008',name:'终端设备名称8（1008）',isSelect:0},
{id:'009',name:'终端设备名称9（1009）',isSelect:0},
{id:'010',name:'终端设备名称10（1010）',isSelect:0},
{id:'011',name:'终端设备名称11（1011）',isSelect:0},
{id:'012',name:'终端设备名称12（1012）',isSelect:0},
{id:'013',name:'终端设备名称13（1013）',isSelect:0},
{id:'014',name:'终端设备名称14（1014）',isSelect:0},
{id:'015',name:'终端设备名称15（1015）',isSelect:0},
{id:'016',name:'终端设备名称16（1016）',isSelect:0},
{id:'017',name:'终端设备名称17（1017）',isSelect:0},
{id:'018',name:'终端设备名称18（1018）',isSelect:0},
{id:'019',name:'终端设备名称19（1019）',isSelect:0},
{id:'020',name:'终端设备名称20（1020）',isSelect:0},
{id:'021',name:'终端设备名称21（1021）',isSelect:0},
{id:'022',name:'终端设备名称22（1022）',isSelect:0},
{id:'023',name:'终端设备名称23（1023）',isSelect:0},
{id:'024',name:'终端设备名称24（1024）',isSelect:0},
{id:'1001',name:'终端设备名称1（1001）',isSelect:0},
{id:'1002',name:'终端设备名称2（1002）',isSelect:0},
{id:'1003',name:'终端设备名称3（1003）',isSelect:0},
{id:'1004',name:'终端设备名称4（1004）',isSelect:0},
{id:'1005',name:'终端设备名称5（1005）',isSelect:0},
{id:'1006',name:'终端设备名称6（1006）',isSelect:0},
{id:'1007',name:'终端设备名称7（1007）',isSelect:0},
{id:'1008',name:'终端设备名称8（1008）',isSelect:0},
{id:'1009',name:'终端设备名称9（1009）',isSelect:0},
{id:'1010',name:'终端设备名称10（1010）',isSelect:0},
{id:'1011',name:'终端设备名称11（1011）',isSelect:0},
{id:'1012',name:'终端设备名称12（1012）',isSelect:0},
{id:'1013',name:'终端设备名称13（1013）',isSelect:0},
{id:'1014',name:'终端设备名称14（1014）',isSelect:0},
{id:'1015',name:'终端设备名称15（1015）',isSelect:0},
{id:'1016',name:'终端设备名称16（1016）',isSelect:0},
{id:'1017',name:'终端设备名称17（1017）',isSelect:0},
{id:'1018',name:'终端设备名称18（1018）',isSelect:0},
{id:'1019',name:'终端设备名称19（1019）',isSelect:0},
{id:'1020',name:'终端设备名称20（1020）',isSelect:0},
{id:'1021',name:'终端设备名称21（1021）',isSelect:0},
{id:'1022',name:'终端设备名称22（1022）',isSelect:0},
{id:'1023',name:'终端设备名称23（1023）',isSelect:0},
{id:'1024',name:'终端设备名称24（1024）',isSelect:0},
],
startIndex:0,
current:1,
callItem:null,
_intercom:null,
_conf:null,
_call:null,
isIntercom:false,//通讯录是否发起对讲
isGroup:false, //是否已经邀请了群组
defaultExpandIds: [] // 这里存放要默认展开的节点 id
}
},
computed: {
@ -500,6 +546,9 @@ export default {
mounted() {
},
created(){
this.treeData.map(item =>{
this.defaultExpandIds.push(item.id)
})
this.getTime();
// this.load()
this.getGroupData()
@ -533,21 +582,231 @@ export default {
},
// 邀请人员
inviteUser(row){
this.$confirm('确定要邀请该用户吗?', '提示', {
if(this.inviteList.length == 0){
this.dialogCall = true; //打开邀请方式弹窗
this.callItem = row; //当前邀请人员
}else{
this.$confirm('确定要邀请该用户吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
row.isSelect = 1
row.isSelect = 1;
this.isMetting = true; //更改为会议状态
this.deviceData.find(item => item.id == row.id).isSelect = 1;
this.inviteList.push(row)
}).catch(() => {
// this.$message({
// type: 'info',
// message: '已取消删除'
// });
});
this.inviteList.push(row);
this.callItem = row;
this.makeCall()
})
}
},
// 邀请群组
inviteGroup(row){
console.log(row)
this.$confirm('确定要邀请该群组吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.isGroup = true;
row.children.map(item => {
this.selectTreeNode.push(item.id)
this.inviteList.push({
id:item.id,
name:item.label
})
})
this.$nextTick(() => {
let audio = document.getElementById('video') //获取媒体控件
this.$refs.tree.setCheckedKeys(this.selectTreeNode); //把当前选择的key设置到el-tree中
client.startIntercom(row.id, audio).then((conf) => { //发起群组对讲
this._intercom = conf;
setListener();
mylog("startintercom success");
}).catch((error) => {
mylog("startIntercom fail: " + JSON.stringify(error));
})
})
})
},
/** 呼叫 */
makeCall(obj, isVideo) {
let mediaControl = null;
this.$nextTick(() =>{
if(this.inviteList.length == 1){ //如果只邀请一人时，进行呼叫
this.isMetting = false;
mediaControl = document.getElementById('video'); //获取媒体控件
client.makeCall(this.callItem.id, mediaControl, isVideo).then((call) => { //发起呼叫
this._call = call
}).catch((reason) => {
mylog("call fail");
mylog(JSON.stringify(reason));
});
}else if(this.inviteList.length == 2){ //邀请一人后，在邀请别人时，更改状态为会议
this.isMetting = true;
// mediaControl = document.getElementById('video' + this.callItem.id);
this._call.addMember(this.callItem.id); //呼叫邀请人员加入
this.setCallEventListener(call); //呼叫监听
var state = this.convertCallstate(call.state);
mylog("call success callState: " + state);
}else{ //邀请成员超过两人时，状态已更改为会议，使用会议邀请成员
this._conf.add(this.callItem.id); //会议邀请人员
}
})
},
//呼叫监听
setCallEventListener(call) {
call.callStateChange.on(this.onCallStateChange);
call.onBecomeConference.on((para) => { //更改呼叫状态为会议
mylog("当前单呼变成会议");
this._conf = para.changeToConference;
this._conf.stateChange.on((para) => {
console.log("_conf.stateChange" + JSON.stringify(para));
})
});
},
//状态change监听
onCallStateChange(param) {
var state = convertCallstate(param.state);
mylog("call callStateChange, number: " + param.sender.number + ", state: " + state + ", isVideo: " + param.sender.isVideo);
},
//监听状态转义
convertCallstate(state) {
var stateStr;
switch (state) {
case 1:
stateStr = "init";
break;
case 2:
stateStr = "normal";
break;
case 3:
stateStr = "callout";
break;
case 4:
stateStr = "incoming";
break;
case 5:
stateStr = "ringing";
break;
case 6:
stateStr = "connected";
break;
case 7:
stateStr = "terminal";
break;
case 8:
stateStr = "hold";
break;
case 9:
stateStr = "unhold";
break;
default:
break;
}
return stateStr;
},
// 对讲
clickIntercom(){
this.$nextTick(() =>{
this.isIntercom = true;
this.isMetting = false
this.dialogCall = false;
this.callItem.isSelect = 1;
this.deviceData.find(item => item.id == this.callItem.id).isSelect = 1;
this.inviteList.push(this.callItem);
let audio = document.getElementById('video') //获取媒体控件
client.startTempIntercom([this.callItem.id],audio,"").then((conf) => { //发起临时对讲
this._intercom = conf;
setListener();
mylog("startintercom success:" + conf.groupNumber);
}).catch((error)=>{
mylog("startIntercomfail:" + JSON.stringify(error));
})
})
},
// 音频呼叫
audioCall(){
this.isIntercom = false;
this.callItem.isSelect = 1;
this.deviceData.find(item => item.id == this.callItem.id).isSelect = 1;
this.inviteList.push(this.callItem);
this.dialogCall = false;
this.makeCall(this.callItem,true)
},
// 视频呼叫
videoCall(){
this.callItem.isSelect = 1;
this.isIntercom = false;
this.deviceData.find(item => item.id == this.callItem.id).isSelect = 1;
this.inviteList.push(this.callItem);
this.dialogCall = false;
this.makeCall(this.callItem,false)
},
// 结束会议
overMeeting(){
this.deviceData.map(item => item.isSelect = 0);
this.inviteList = [];
this._conf.end() //结束会议
},
// 退出会议
exitMeeting(){
this.deviceData.map(item => item.isSelect = 0);
this.inviteList = [];
this._conf.exit() //退出会议
},
// 结束对讲
overTalk(){
console.log(this.isIntercom,this.isGroup)
if(this.isIntercom){ //通讯录对讲
this.deviceData.map(item => item.isSelect = 0);
this.inviteList = [];
this.isIntercom = false;
this._intercom.end()
}else if(this.isGroup){ //群组对讲
this.inviteList = [];
this.isGroup = false;
this.selectTreeNode = [];
this.$refs.tree.setCheckedKeys(this.selectTreeNode);
this._intercom.end()
}else{ //通讯录呼叫
this.deviceData.map(item => item.isSelect = 0);
this.inviteList = [];
this._call.hangup();
}
},
// 退出对讲
exitTalk(){
if(this.isIntercom){ //通讯录对讲
this.deviceData.map(item => item.isSelect = 0);
this.inviteList = [];
this.isIntercom = false;
this._intercom.exit();
}else if(this.isGroup){ //群组对讲
this.inviteList = [];
this.selectTreeNode = [];
this.isGroup = false;
this.$refs.tree.setCheckedKeys(this.selectTreeNode);
this._intercom.exit()
}else{ //通讯录呼叫
this.deviceData.map(item => item.isSelect = 0);
this.inviteList = [];
this._call.hangup(); //挂断呼叫
}
},
// 无限滚动列表
load(){
@ -594,6 +853,27 @@ export default {
// });
});
},
// 通话记录请出
deletePhone(row){
this.$confirm('确定要请出该用户吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(this.isMetting)
if(this.inviteList.length >= 2){
this.inviteList = this.inviteList.filter(item => item.id !== row.id);
this.deviceData.find(item => item.id == row.id).isSelect = 0;
this._conf.remove(row.id)
}else{
this.inviteList = this.inviteList.filter(item => item.id !== row.id);
this.deviceData.find(item => item.id == row.id).isSelect = 0;
this._call.hangup() //挂断呼叫
}
})
},
// 批量添加用户
addUser(){
@ -936,7 +1216,7 @@ export default {
right: 0.05rem;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: end;
.dev_btn{
font-size: 14px;
@ -955,6 +1235,7 @@ export default {
&.del_btn{
background: #D83030;
margin-left: 0.05rem;
}
}
}
@ -1076,11 +1357,19 @@ export default {
.custom-tree-node{
opacity: 0.4;
}
.first_node{
opacity: 1;
}
}
/deep/.el-tree-node.is-current>.el-tree-node__content{
background: transparent;
}
/deep/ .el-tree-node:focus>.el-tree-node__content {
background-color: transparent;
}
/deep/ .custom-tree-node{
width: 100%;
height: 0.35rem;
@ -1145,9 +1434,15 @@ export default {
}
.bottom_cen{
width: 11.2rem;
width: 11.35rem;
height: 7.35rem;
margin: 0 auto;
overflow-y: auto;
overflow-x: hidden;
.el-col{
margin-bottom: 0;
}
.bottom_item{
width: 3.6rem;
@ -1184,6 +1479,20 @@ export default {
}
}
}
.bottom_cen::-webkit-scrollbar{
width: 0.05rem;
height: 7.35rem;
background: rgba(23, 108, 232,0.4);
border-radius:0.03rem;
}
.bottom_cen::-webkit-scrollbar-thumb{
display:block;
margin:0 auto;
width: 0.05rem;
background: rgba(108, 205, 255,0.6);
border-radius: 0.03rem;
}
.group_cen{
width: 11.2rem;
height: 7.35rem;
@ -1228,12 +1537,16 @@ export default {
}
.bot_cen{
width: 100%;
height: 0.44rem;
margin-top: 0.3rem;
display: flex;
justify-content: end;
img{
cursor: pointer;
}
.exit{
margin: 0 0.3rem;
@ -1253,10 +1566,12 @@ export default {
.phone_box{
width: 2.8rem;
height: 3rem;
height: 7.6rem;
margin: 0 auto;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
.phone_tit{
font-size: 0.18rem;
@ -1285,7 +1600,7 @@ export default {
.phone_item{
width: 100%;
width: 99%;
height: 0.35rem;
margin-bottom: 0.15rem;
cursor: pointer;
@ -1412,6 +1727,20 @@ export default {
}
.phone_box::-webkit-scrollbar{
width: 0.05rem;
height: 7.35rem;
background: rgba(23, 108, 232,0.4);
border-radius:0.03rem;
}
.phone_box::-webkit-scrollbar-thumb{
display:block;
margin:0 auto;
width: 0.05rem;
background: rgba(108, 205, 255,0.6);
border-radius: 0.03rem;
}
}
}
}
@ -1432,6 +1761,26 @@ export default {
}
}
.call_dialog{
.el-dialog__header{
display: flex;
}
.dialog-footer{
height: 0.45rem;
display: flex;
justify-content: end;
}
.call_btn_box{
width: 100%;
height: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
}
.el-message .el-icon-warning{
font-size: 0.16rem;
}

Write Preview
Loading…
Cancel
Save