359 lines
10 KiB
Vue
359 lines
10 KiB
Vue
|
|
|||
|
|
<template>
|
|||
|
|
<div class="meeting-box">
|
|||
|
|
<ul class="meun">
|
|||
|
|
<li class="item">
|
|||
|
|
<span>会商</span>
|
|||
|
|
<span class="edg"></span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="list-box">
|
|||
|
|
<div class="tr">
|
|||
|
|
<el-popover placement="bottom" :width="80" trigger="click">
|
|||
|
|
<template #reference>
|
|||
|
|
<el-button>新增</el-button>
|
|||
|
|
</template>
|
|||
|
|
<div class="lh30 f12 pointer" v-for="item in LIST_DATA" :key="item.value" @click="chooseItem(item)">
|
|||
|
|
{{item.label}}
|
|||
|
|
</div>
|
|||
|
|
</el-popover>
|
|||
|
|
</div>
|
|||
|
|
<div class="list">
|
|||
|
|
<!-- 调度台、临时组 -->
|
|||
|
|
<el-collapse v-model="activeName">
|
|||
|
|
<el-collapse-item v-for="item in LIST_DATA_TREE" :key="item.value" :title="item.label" :name="item.label">
|
|||
|
|
<ul>
|
|||
|
|
<li class="lh30" v-for="(it,idx) in meetList" :key="idx" @click="joinMeeting(it)">{{ it.subject }}</li>
|
|||
|
|
</ul>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="cnt"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 音视频会议 -->
|
|||
|
|
<AudioAndVoice v-model="showDailog" v-if="showDailog" @save="saveData"></AudioAndVoice>
|
|||
|
|
<!-- 音视频会议窗口 -->
|
|||
|
|
<MeetingView v-model="openMeeting" v-if="openMeeting" ></MeetingView>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import useConfernceEvent from './components/js/useConfernceEvent';
|
|||
|
|
import { ElMessage,ElMessageBox,ElNotification } from "element-plus";
|
|||
|
|
import AudioAndVoice from './components/audioAndVoice.vue'
|
|||
|
|
import MeetingView from './components/meetingView.vue'
|
|||
|
|
import { computed , nextTick, onMounted, ref} from 'vue';
|
|||
|
|
import { useStore } from "vuex";
|
|||
|
|
const store = useStore();
|
|||
|
|
const showDailog = ref(false)
|
|||
|
|
const openMeeting = ref(false) //打开会议
|
|||
|
|
const activeName = ref('音视频会议')
|
|||
|
|
const tempModalType = ref('') //点击类型
|
|||
|
|
const jsonData = 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
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 临时组类别列表
|
|||
|
|
const LIST_DATA = computed(() => {
|
|||
|
|
return [
|
|||
|
|
// 音视频会议
|
|||
|
|
{
|
|||
|
|
label: '音视频会议',
|
|||
|
|
value: 8,
|
|||
|
|
// component: AdvancedConference,
|
|||
|
|
isOpenRoot: ref(false),
|
|||
|
|
isLoading: ref(false),
|
|||
|
|
},
|
|||
|
|
// 拨号入会
|
|||
|
|
{
|
|||
|
|
label: '进入会议',
|
|||
|
|
value: 9,
|
|||
|
|
component: null,
|
|||
|
|
isOpenRoot: ref(false),
|
|||
|
|
isLoading: ref(false),
|
|||
|
|
},
|
|||
|
|
// 快速会议
|
|||
|
|
{
|
|||
|
|
label: '快速会议',
|
|||
|
|
value: 10,
|
|||
|
|
component: null,
|
|||
|
|
isOpenRoot: ref(false),
|
|||
|
|
isLoading: ref(false),
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const LIST_DATA_TREE = computed(() => {
|
|||
|
|
return LIST_DATA.value.filter((v) => ![9, 10].includes(v.value));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
function chooseItem (val) {
|
|||
|
|
tempModalType.value = val.value;
|
|||
|
|
switch(val.label){
|
|||
|
|
case '音视频会议':
|
|||
|
|
showDailog.value = true
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveData (data){
|
|||
|
|
switch(tempModalType.value){
|
|||
|
|
case 8:
|
|||
|
|
console.info('-----------音视频会议-----------');
|
|||
|
|
conferenceActionSDK(data);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* create or update conference
|
|||
|
|
*/
|
|||
|
|
const conferenceActionSDK = async (record ) => {
|
|||
|
|
// 创建会议
|
|||
|
|
const createRes = await lemon.conference.createConference({
|
|||
|
|
subject: record.subject, //主题
|
|||
|
|
type: 1, //会议类型 0=即时会议，1=预约会议
|
|||
|
|
emergency_flag: 0, //会议紧急标识 0 = 非紧急会议，1 = 紧急会议
|
|||
|
|
duration: Number(record.duration), //预计时长 (分钟)
|
|||
|
|
pre_alarm_time: record.alarm, //提前通知时间（分钟）
|
|||
|
|
remark: record.remark,
|
|||
|
|
appointment: '2025-12-10T14:57:24Z', // start_date 和 start_time 对应的 UTC 时间
|
|||
|
|
members:record.members,
|
|||
|
|
});
|
|||
|
|
if (createRes.result === 0) {
|
|||
|
|
ElMessage.success(jsonData.value['data']['conference.book.result.ok']);
|
|||
|
|
fetchConferences()
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error(jsonData.value['errorCode'][createRes?.result]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 加入会议
|
|||
|
|
const joinMeeting = (it) =>{
|
|||
|
|
ElMessageBox.confirm('确定开始会议?','提示',{
|
|||
|
|
confirmButtonText:'确定',
|
|||
|
|
cancelButtonText:'取消',
|
|||
|
|
type:'warning',
|
|||
|
|
}).then(res=>{
|
|||
|
|
openMeeting.value = true;
|
|||
|
|
nextTick(()=>{
|
|||
|
|
let params = {
|
|||
|
|
"number": it.number,
|
|||
|
|
"nick": it.subject,
|
|||
|
|
"mute_status": it.status,
|
|||
|
|
"microphone_status": 1,
|
|||
|
|
"camera_status": 1
|
|||
|
|
}
|
|||
|
|
lemon.conference.enterConferenceByNumber(params).then(res=> {
|
|||
|
|
console.log(res,'加入会议......');
|
|||
|
|
}).catch(err=> {
|
|||
|
|
console.log(err,' 加入会议失败......');
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}).catch(()=>{
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取会议
|
|||
|
|
const fetchConferences = () =>{
|
|||
|
|
lemon.conference.fetchConferences().then(res=> {
|
|||
|
|
console.log(res.conferenceList,'获取会议');
|
|||
|
|
meetList.value = res.conferenceList;
|
|||
|
|
activeName.value = '音视频会议'
|
|||
|
|
}).catch(err=> {})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
const Init = () => {
|
|||
|
|
let token = window.localStorage.getItem("rhToken");
|
|||
|
|
if (!token) {
|
|||
|
|
let userInfo = {
|
|||
|
|
username: "linzhigongan2",
|
|||
|
|
password: "linzhigongan2",
|
|||
|
|
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);
|
|||
|
|
getLoginAccountInfo();
|
|||
|
|
fetchConferences()
|
|||
|
|
// 注册会议管理相关事件
|
|||
|
|
useConfernceEvent()
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
ConnectWebsocket(token);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const ConnectWebsocket = (token) => {
|
|||
|
|
lemon.login.reConnectWebsocket({
|
|||
|
|
username: "linzhigongan2",
|
|||
|
|
realm: "puc.com",
|
|||
|
|
webpucUrl: "https://89.40.9.95:16888",
|
|||
|
|
token: token
|
|||
|
|
}).then((resp) => {
|
|||
|
|
if(resp.result != 0){
|
|||
|
|
ElMessage.error(jsonData.value['errorCode'][resp.result]);
|
|||
|
|
exsit()
|
|||
|
|
}else{
|
|||
|
|
getLoginAccountInfo()
|
|||
|
|
fetchConferences()
|
|||
|
|
// 注册会议管理相关事件
|
|||
|
|
useConfernceEvent()
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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 exsit = () =>{
|
|||
|
|
lemon.login.logout().then(res=> {
|
|||
|
|
|
|||
|
|
}).catch(err=> {
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function changeCooll () {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(()=>{
|
|||
|
|
jsonData.value = require('./components/zh_CN.json');
|
|||
|
|
nextTick(()=>{
|
|||
|
|
Init();
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
</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>
|