322 lines
10 KiB
Vue
322 lines
10 KiB
Vue
|
||
<template>
|
||
<!-- 无人机拖动视频 -->
|
||
<DraggerAble v-if="showVideo" v-model="showVideo" ref="RefEqripment"></DraggerAble>
|
||
<!-- 新增音视频会议 -->
|
||
<AudioAndVoice v-model="showDailog" v-if="showDailog"></AudioAndVoice>
|
||
<!-- 音视频会议窗口 -->
|
||
<MeetingView v-model="openMeeting" v-if="openMeeting" ></MeetingView>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { getItem } from "@/utils/storage";
|
||
import { timeValidate } from '@/utils/tools'
|
||
import DraggerAble from './components/draggerAble.vue'
|
||
import useConfernceEvent from './components/js/useConfernceEvent';
|
||
import { ElMessage,ElMessageBox,ElNotification } from "element-plus";
|
||
import useBaseDataModule from '@/components/Consultation/sdk/baseData';
|
||
import AudioAndVoice from './components/audioAndVoice.vue'
|
||
import MeetingView from './components/meetingView.vue'
|
||
import { defineExpose , nextTick, onMounted, onUnmounted, defineEmits, ref} from 'vue';
|
||
import { useStore } from "vuex";
|
||
const emit = defineEmits(['update']);
|
||
const modleType = ref('')
|
||
const store = useStore();
|
||
const inDustRialId = getItem('inDustRialId'); // 当前用户的警号
|
||
const sdkBDModule = useBaseDataModule();
|
||
const baseInfo = localStorage.getItem('rhInfo') ? JSON.parse(localStorage.getItem('rhInfo')) : {};
|
||
const showVideo = ref(false)//拖动视频
|
||
const showDailog = ref(false)//showDailog
|
||
const openMeeting = ref(false) //打开会议
|
||
const jsonData = ref('');
|
||
const loginStatusCallbackId = ref() //token监听状态
|
||
const RefEqripment = ref()
|
||
const meetList = ref([
|
||
{
|
||
"basedata_id": "8180e3882a0c27f4d3ba998b3dc95c0d280d8e2e7a9d53e4ac36c7ade2c76653",
|
||
"guid": "2a7931e2-5fe6-493b-b918-cd4f220ee62e",
|
||
"number": "908479232",
|
||
"puc_id": "00001",
|
||
"realm": "puc.com",
|
||
"subject": "sgxtcs 预约的会议",
|
||
"type": 1,
|
||
"duration": 30,
|
||
"pre_alarm_time": 1,
|
||
"remark": "",
|
||
"start_date_time": "2025-12-11T02:01:19Z",
|
||
"end_date_time": "2025-12-11T02:01:19Z",
|
||
"create_date_time": "2025-12-11T02:01:19Z",
|
||
"status": 0,
|
||
"lock": 0,
|
||
"emergency_flag": 0,
|
||
"appointment": "2025-12-10T14:57:24Z",
|
||
"creator": {
|
||
"basedata_id": "8180e3882a0c27f4cc200f7987d695ff3ce5274244ba3974e0064423dfe70f71",
|
||
"guid": "Dispatcher::sgxtcs@puc.com",
|
||
"alias": "sgxtcs",
|
||
"nick": "sgxtcs",
|
||
"role": 2
|
||
},
|
||
"members": [
|
||
{
|
||
"basedata_id": "8180e3882a0c27f4cc200f7987d695ff3ce5274244ba3974e0064423dfe70f71",
|
||
"guid": "Dispatcher::sgxtcs@puc.com",
|
||
"alias": "sgxtcs",
|
||
"nick": "sgxtcs",
|
||
"role": 2,
|
||
"joined": 0,
|
||
"speaking_state": 0,
|
||
"member_state": 0,
|
||
"microphone_status": 1,
|
||
"camera_status": 1,
|
||
"prohibition_status": 0,
|
||
"mute_status": 0,
|
||
"device_type": 0,
|
||
"terminal_model": "",
|
||
"full_duplex": 1,
|
||
"raise_hand": 0,
|
||
"removed_flag": 0,
|
||
"join_date_time": "",
|
||
"left_date_time": "",
|
||
"member_remark": "",
|
||
"e2ee_flag": 0,
|
||
"emergency_flag": 0,
|
||
"voice_value": 0
|
||
}
|
||
]
|
||
}
|
||
])
|
||
|
||
// n 推迟几分钟 - 不传默认10
|
||
const handleTime = (n=10) =>{
|
||
var currentDate = new Date();
|
||
var preDate = new Date(currentDate.getTime() + n * 60 * 1000)
|
||
let time = timeValidate(preDate);
|
||
return new Date(time).toISOString()
|
||
}
|
||
|
||
// 创建会议
|
||
const conferenceActionSDK = async (record ) => {
|
||
const createRes = await lemon.conference.createConference({
|
||
subject: record.glxsmc, //主题
|
||
type: 1, //会议类型 0=即时会议，1=预约会议
|
||
emergency_flag: 0, //会议紧急标识 0 = 非紧急会议，1 = 紧急会议
|
||
duration: 60, //预计时长 (分钟)
|
||
pre_alarm_time: 10, //提前通知时间（分钟）
|
||
remark: '',
|
||
appointment: handleTime(), // start_date 和 start_time 对应的 UTC 时间
|
||
members:[
|
||
{
|
||
alias:baseInfo.dispatcher_name,
|
||
basedata_id:baseInfo.basedata_id,
|
||
guid:baseInfo.user_guid,
|
||
number:baseInfo.user_id,
|
||
}
|
||
],//当前创建人
|
||
});
|
||
console.log(createRes,'===========创建的会议');
|
||
if (createRes.result === 0) {
|
||
ElMessage.success(jsonData.value['data']['conference.book.result.ok']);
|
||
record.number = createRes.meeting.number;
|
||
emit('update',record);
|
||
enterConferenceByNumber(record) //进入会议
|
||
} else {
|
||
ElMessage.error(jsonData.value['errorCode'][createRes?.result]);
|
||
}
|
||
};
|
||
|
||
// 通过会议编号进入会议
|
||
const enterConferenceByNumber = (it) =>{
|
||
openMeeting.value = true;
|
||
nextTick(()=>{
|
||
let params = {
|
||
"number": it.number,
|
||
"nick": it.glxsmc,
|
||
"mute_status": 0,
|
||
"microphone_status": 1,
|
||
"camera_status": 1
|
||
}
|
||
lemon.conference.enterConferenceByNumber(params).then(res=> {
|
||
console.log(res,'加入会议......');
|
||
}).catch(err=> {
|
||
console.log(err,' 加入会议失败......');
|
||
})
|
||
})
|
||
}
|
||
|
||
// 获取会议
|
||
const fetchConferences = (it) =>{
|
||
lemon.conference.fetchConferences().then(res=> {
|
||
console.log(res.conferenceList,'获取会议');
|
||
meetList.value = res.conferenceList;
|
||
let obj = meetList.value.find(v=>v.number == it.number);
|
||
// 会议存在 ? 进入会议 : 创建会议 ;
|
||
obj ? enterConferenceByNumber(it) : conferenceActionSDK(it) ;
|
||
}).catch(err=> {})
|
||
}
|
||
|
||
|
||
const Init = () => {
|
||
let token = window.localStorage.getItem("rhToken");
|
||
if (!token) {
|
||
let userInfo = {
|
||
username: inDustRialId, //用户名
|
||
password: "123456",
|
||
realm: "puc.com",
|
||
webpucUrl: "https://89.40.9.95:16888"
|
||
};
|
||
lemon.login.login(userInfo).then((esacpe) => {
|
||
token = esacpe.token;
|
||
window.localStorage.setItem("rhToken", esacpe.token);
|
||
listenerEvents()
|
||
});
|
||
} else {
|
||
ConnectWebsocket(token);
|
||
}
|
||
};
|
||
|
||
const ConnectWebsocket = (token) => {
|
||
lemon.login.reConnectWebsocket({
|
||
username: inDustRialId, //用户名
|
||
realm: "puc.com",
|
||
webpucUrl: "https://89.40.9.95:16888",
|
||
token: token
|
||
}).then((resp) => {
|
||
if(resp.result != 0){
|
||
localStorage.removeItem('rhToken')
|
||
localStorage.removeItem('user_basedata_id')
|
||
let messge = jsonData.value['errorCode'][resp.result] +',请重新刷新页面'
|
||
ElMessage.error(messge);
|
||
lemon.login.logout().then(res=> {}).catch(err=> {})
|
||
}else{
|
||
listenerEvents();
|
||
}
|
||
});
|
||
};
|
||
|
||
// 初始化后需要监听的方法
|
||
const listenerEvents = () =>{
|
||
getLoginAccountInfo() //前账号的登录信息
|
||
useConfernceEvent()// 注册会议管理相关事件
|
||
// 无人机对讲机的监听时事件
|
||
window.lemon.call.addMediaStream((call_id, stream, type) => {
|
||
console.log(call_id, stream, type,'=======无人机对讲机的监听时事件==');
|
||
});
|
||
}
|
||
|
||
const getLoginAccountInfo =() =>{
|
||
lemon.login.getLoginAccountInfo().then(res => {
|
||
let info = JSON.stringify(res.account_info)
|
||
window.localStorage.setItem("rhInfo",info);
|
||
window.localStorage.setItem("user_basedata_id",res.account_info.basedata_id);
|
||
}).catch(err => {
|
||
|
||
})
|
||
}
|
||
|
||
// 加入会议
|
||
const openInit = (it,type) =>{
|
||
modleType.value = type;
|
||
if(type == '会议'){
|
||
//判断是否有会议号
|
||
let into = it.number ? '确定开始会议?' : '没有找到会议，是否创建会议?'
|
||
ElMessageBox.confirm(into,'提示',{
|
||
confirmButtonText:'确定',
|
||
cancelButtonText:'取消',
|
||
type:'warning',
|
||
}).then(res=>{
|
||
// 会议号存在 ? 获取会议列表里面是否包含该条会议 : 创建会议 ;
|
||
it.number ? fetchConferences(it) : conferenceActionSDK(it);
|
||
}).catch(()=>{ })
|
||
|
||
}
|
||
|
||
if(['对讲机','无人机'].includes(type)){
|
||
showVideo.value = true;
|
||
nextTick(()=>{
|
||
RefEqripment.value.handleBtn(type)
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
onMounted(()=>{
|
||
jsonData.value = require('./components/zh_CN.json');
|
||
nextTick(()=>{
|
||
Init();
|
||
})
|
||
});
|
||
|
||
onUnmounted(()=>{
|
||
// 页面关闭时卸载
|
||
lemon.login.removeLoginStatusChangeListener(loginStatusCallbackId.value);
|
||
})
|
||
|
||
defineExpose({openInit});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.meeting-box{
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(15,30,52,1);
|
||
.meun{
|
||
width: 80px;
|
||
height: 100%;
|
||
background: rgba(0, 40, 108,1);
|
||
border-right: 1px solid #0072ff;
|
||
.item{
|
||
width: 80px;
|
||
height: 74px;
|
||
line-height: 74px;
|
||
background: linear-gradient(90deg,rgba(12,162,255,1) 0% , rgba(162, 247, 255,0) 100%);
|
||
filter: drop-shadow(0 16px 16px rgba(0,0,0,.25));
|
||
text-align: center;
|
||
position: relative;
|
||
cursor: pointer;
|
||
.edg{
|
||
display: block;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 4px;
|
||
height: 100%;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background-color:rgba(172,249,255,1);
|
||
}
|
||
}
|
||
|
||
}
|
||
.list-box{
|
||
width: 200px;
|
||
background: rgba(0, 53, 123,1);
|
||
padding: 4px 10px;
|
||
box-sizing: border-box;
|
||
.list{
|
||
margin-top: 10px;
|
||
height: calc(100% - 30px);
|
||
}
|
||
}
|
||
.cnt{
|
||
flex: 1 0 0;
|
||
}
|
||
}
|
||
::v-deep .el-collapse-item__header{
|
||
background: transparent;
|
||
color: #fff;
|
||
border-bottom: 1px solid #2e4b6e;
|
||
}
|
||
::v-deep .el-collapse-item__wrap{
|
||
background-color: transparent;
|
||
border-bottom: none;
|
||
}
|
||
::v-deep .el-collapse-item__content{
|
||
color: #fff;
|
||
}
|
||
::v-deep .el-collapse{
|
||
border-top: none;
|
||
border-bottom: none;
|
||
}
|
||
</style> |