123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677 |
- <template>
- <div class="communication-container">
- <div class="tabs">
- <div v-for="(item, index) in menu" :key="index" :class="activeIndex === index ? 'tab tab_active' : 'tab'" @click="activeIndex = index">
- {{ item.name }}
- </div>
- <!-- 新增的图标按钮 -->
- <div class="more-icon" @click="showCommunicationDialogList">
- <img src="/yjdp/src/assets/images/video/enlarge.png" />
- </div>
- </div>
- <!--视频会商-->
- <div v-show="activeIndex === 0" class="content">
- <div class="left-content">
- <div class="search-box">
- <el-input v-model="queryParams.label" class="custom-input" placeholder="组织架构搜索" style="width: 487px" @keyup.enter="getTree">
- <template #prefix>
- <el-icon class="el-input__icon"><search /></el-icon>
- </template>
- </el-input>
- <el-select
- v-model="queryParams2.value2"
- class="custom-select select-box"
- placeholder="全部"
- popper-class="custom-select-popper"
- :teleported="false"
- >
- <el-option v-for="level in options" :key="level.value" :label="level.name" :value="level.value"></el-option>
- </el-select>
- <el-input v-model="queryParams2.name" class="custom-input" placeholder="设备搜索" @keyup.enter="handleNodeClick(false)">
- <template #prefix>
- <el-icon class="el-input__icon"><search /></el-icon>
- </template>
- </el-input>
- </div>
- <div class="tree-container">
- <div class="tree-box">
- <div style="overflow-y: auto; height: 100%">
- <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
- </div>
- </div>
- <div class="user-box">
- <div class="user-table">
- <div class="tr">
- <div class="td2">
- <div :class="getCheckedClass()" @click="handleChecked"></div>
- </div>
- <div class="td">设备</div>
- <!-- div class="td3">姓名职务</div -->
- </div>
- <div class="table-content">
- <div v-for="(item, index) in userList" :key="index" class="tr2">
- <div class="td2">
- <div :class="item.checked ? 'common-checked-active' : 'common-checked'" @click="handleChecked2(item)"></div>
- </div>
- <div class="td">{{ item.name }}</div>
- <!-- div class="td3">
- {{ item.duty }}
- <div class="phone-icon"></div>
- </div-->
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="select-box2">
- <div class="select-header">
- <div class="left-item">
- <div>已选择:</div>
- <div class="text">{{ selectList.length }}</div>
- <div>个</div>
- </div>
- <div class="clear-btn" @click="clearSelect">清空</div>
- </div>
- <div class="select-content">
- <div v-for="(item, index) in selectList" :key="index" class="box-item">
- <div class="line">
- <div class="text1">{{ item.name }}</div>
- <div class="text2">{{ item.duty }}</div>
- </div>
- <div class="line" style="margin-top: 20px">
- <div class="text2">{{ item.dept }}</div>
- </div>
- <div class="close-btn" @click="deleteItem(item)"></div>
- </div>
- </div>
- </div>
- <div class="btn-box">
- <div class="btn" @click="showJoinMeetingDialog">
- <div class="icon1"></div>
- <div class="text">会议号入会</div>
- </div>
- <div class="btn" @click="handleOpenCall">
- <div class="icon2"></div>
- <div class="text">电话呼叫</div>
- </div>
- <div class="btn" @click="handleOpenMeeting">
- <div class="icon3"></div>
- <div class="text">发起会议</div>
- </div>
- </div>
- </div>
- <Drone v-show="activeIndex === 1"></Drone>
- <IndividualEquipment v-show="activeIndex === 2"></IndividualEquipment>
- <Dialog v-if="showJoinMeeting" custom-show type="xs" height="760px" title="加入会议" @confirm="handleJoinMeeting" @close="closeDialog">
- <el-form ref="formRef" :model="meetingForm" :rules="rules">
- <el-form-item label="会议号" label-width="200px" prop="roomcode">
- <el-input v-model="meetingForm.roomcode" class="custom-input2" clearable placeholder="请输入会议号" />
- </el-form-item>
- <el-form-item label="账号" label-width="200px" prop="username">
- <el-input v-model="meetingForm.username" class="custom-input2" clearable placeholder="请输入设备账号" />
- </el-form-item>
- <el-form-item label="密码" label-width="200px" prop="userpass">
- <el-input v-model="meetingForm.userpass" type="password" class="custom-input2" clearable placeholder="请输入设备密码" />
- </el-form-item>
- </el-form>
- </Dialog>
- <Dialog
- v-if="showOpenMeeting"
- custom-show
- type="xs"
- height="660px"
- :title="type === '0' ? '发起会议' : '电话呼叫'"
- @confirm="handleStartCall"
- @close="closeOpenDialog"
- >
- <el-form ref="form2Ref" :model="openMeetingForm" :rules="rules2">
- <el-form-item label="账号" label-width="200px" prop="username">
- <el-input v-model="openMeetingForm.username" class="custom-input2" clearable placeholder="请输入设备账号" />
- </el-form-item>
- <el-form-item label="密码" label-width="200px" prop="userpass">
- <el-input v-model="openMeetingForm.userpass" type="password" class="custom-input2" clearable placeholder="请输入设备密码" />
- </el-form-item>
- </el-form>
- </Dialog>
- </div>
- <CommunicationDialog v-model="communicationDialogState.showListDialog" :flag="flag" />
- </template>
- <script lang="ts" setup>
- import { Search } from '@element-plus/icons-vue';
- import { getStartMiniParam, getStartMiniWithNoParam, getAvconDeviceTree, getAvconDeviceList } from '@/api/emergencyCommandMap/communication';
- import { deepClone } from '@/utils';
- import Drone from './Drone.vue';
- import IndividualEquipment from './IndividualEquipment.vue';
- import CommunicationDialog from './Communication-dialog';
- import EventManage from '@/views/routineCommandMap/RightSection/EventReport/EventManage.vue';
- const proxy = getCurrentInstance()?.proxy;
- const props = defineProps({
- flag: Boolean
- });
- let activeIndex = ref(0);
- const options = ref([{ name: '全部', value: '全部' }]);
- const menu = ref([{ name: '视频会商' }, { name: '无人机' }, { name: '单兵设备' }]);
- const treeData = ref([]);
- const userList = ref([]);
- const communicationDialogState = reactive({
- showListDialog: false
- });
- // 显示事件管理列表弹窗
- const showCommunicationDialogList = () => {
- communicationDialogState.showListDialog = true;
- };
- const queryParams = reactive({
- label: ''
- });
- const queryParams2 = reactive({
- name: '',
- value2: ''
- });
- const getTree = () => {
- getAvconDeviceTree(queryParams).then((res) => {
- treeData.value = res.data;
- });
- };
- const selectList = ref([]);
- const getCheckedClass = () => {
- let res = 'common-checked';
- const len = userList.value.length;
- let len2 = 0;
- userList.value.forEach((item) => {
- const index = selectList.value.findIndex((item2) => item2.id === item.id);
- if (index > -1) {
- len2++;
- }
- });
- if (len2 > 0 && len2 === len) {
- res = 'common-checked-active';
- } else if (len2 > 0) {
- res = 'common-checked-half';
- }
- return res;
- };
- let clickNodeId = ref('');
- const handleNodeClick = (item) => {
- if (!!item) {
- clickNodeId.value = item.id;
- }
- const id = item ? item.id : !!clickNodeId.value ? clickNodeId.value : treeData.value[0].id;
- console.log('handleNodeClick', id);
- getAvconDeviceList(id, queryParams2).then((res) => {
- res.data.forEach((item) => {
- const index = selectList.value.findIndex((item2) => item2.id === item.id);
- item.checked = index > -1;
- });
- userList.value = res.data;
- });
- };
- // 全选、全取消
- const handleChecked = () => {
- const checkedClass = getCheckedClass();
- let flag = true;
- if (checkedClass === 'common-checked-active') {
- flag = false;
- }
- userList.value.forEach((item) => {
- item.checked = flag;
- changeSelectList(item);
- });
- };
- // 单个选中、取消选中
- const handleChecked2 = (item) => {
- item.checked = !item.checked;
- changeSelectList(item);
- };
- // 清空
- const clearSelect = () => {
- userList.value.forEach((item) => {
- if (item.checked) {
- item.checked = false;
- }
- });
- selectList.value = [];
- };
- const changeSelectList = (item) => {
- const index = selectList.value.findIndex((item2) => item2.id === item.id);
- if (item.checked) {
- if (index === -1) {
- selectList.value.push(deepClone(item));
- }
- } else {
- if (index > -1) {
- selectList.value.splice(index, 1);
- }
- }
- };
- // 清空指定项
- const deleteItem = (item) => {
- for (let i = 0; i < userList.value.length; i++) {
- if (item.id === userList.value[i].id) {
- userList.value[i].checked = false;
- break;
- }
- }
- item.checked = false;
- changeSelectList(item);
- };
- let formRef = ref();
- let showJoinMeeting = ref(false);
- let meetingForm = reactive({
- roomcode: '',
- username: '',
- userpass: ''
- });
- const rules = reactive({
- roomcode: [{ required: true, message: '会议号不能为空', trigger: 'blur' }],
- username: [{ required: true, message: '会议账号不能为空', trigger: 'blur' }],
- userpass: [{ required: true, message: '会议密码不能为空', trigger: 'blur' }]
- });
- // 0 会议 1 电话
- let type = ref('0');
- // 点击会议号入会
- const showJoinMeetingDialog = () => {
- type.value = '0';
- showJoinMeeting.value = true;
- };
- const closeDialog = () => {
- showJoinMeeting.value = false;
- meetingForm.roomcode = '';
- };
- ///////////////////
- let form2Ref = ref();
- let showOpenMeeting = ref(false);
- let openMeetingForm = reactive({
- username: '',
- userpass: ''
- });
- const rules2 = reactive({
- username: [{ required: true, message: '会议账号不能为空', trigger: 'blur' }],
- userpass: [{ required: true, message: '会议密码不能为空', trigger: 'blur' }]
- });
- const handleOpenMeeting = () => {
- type.value = '1';
- showOpenMeeting.value = true;
- };
- const closeOpenDialog = () => {
- showOpenMeeting.value = false;
- };
- const handleOpenCall = () => {
- showOpenMeeting.value = true;
- };
- // 会议号入会
- const handleJoinMeeting = () => {
- formRef.value?.validate((valid) => {
- if (valid) {
- const screenWidth = window.screen.width * window.devicePixelRatio;
- const screenHeight = window.screen.height * window.devicePixelRatio;
- const data = {
- userid: meetingForm.username, // 空表示后台获取当前用户对应融合通信dev_id
- password: meetingForm.userpass || '123',
- roomcode: meetingForm.roomcode, // 会议号
- windowpos: { 'x': 0, 'y': 0, 'width': screenWidth, 'height': screenHeight, 'top': true }
- };
- getStartMiniWithNoParam(data).then((res) => {
- // 创建一个a标签元素
- const a = document.createElement('a');
- // 设置a标签的href属性
- a.href = res.data;
- // 触发点击事件
- a.click();
- // 保存账号和密码
- localStorage.setItem('meeting_username', meetingForm.username);
- localStorage.setItem('meeting_userpass', meetingForm.userpass);
- });
- closeDialog();
- }
- });
- };
- // 电话呼叫
- const handleStartCall = () => {
- form2Ref.value?.validate((valid) => {
- if (valid) {
- let dev_list = [];
- userList.value.forEach((item) => {
- if (item.checked && item.mobile != '') {
- dev_list.push({ id: item.mobile, avtype: type.value === '0' ? 'av' : 'a' }); // a 音频 v 视频 默认 av
- }
- });
- if (dev_list.length == 0) {
- proxy?.$modal.msgError('请勾选人员');
- return false;
- }
- const screenWidth = window.screen.width * window.devicePixelRatio;
- const screenHeight = window.screen.height * window.devicePixelRatio;
- const data = {
- userid: openMeetingForm.username, // 空表示后台获取当前用户对应融合通信dev_id
- password: openMeetingForm.userpass,
- windowpos: { 'x': 0, 'y': 0, 'width': screenWidth, 'height': screenHeight, 'top': true },
- members: {
- num: dev_list.length + 2, // 配置多少个座位,一般就是邀请人多少个就多少个
- 'dev-list': dev_list
- }
- };
- getStartMiniParam(data).then((res) => {
- // 创建一个a标签元素
- const a = document.createElement('a');
- // 设置a标签的href属性
- a.href = res.data;
- // 触发点击事件
- a.click();
- // 保存账号和密码
- localStorage.setItem('meeting_username', openMeetingForm.username);
- localStorage.setItem('meeting_userpass', openMeetingForm.userpass);
- });
- closeOpenDialog();
- }
- });
- };
- onMounted(() => {
- const meeting_username = localStorage.getItem('meeting_username') || '';
- const meeting_userpass = localStorage.getItem('meeting_userpass') || '';
- meetingForm.username = meeting_username;
- meetingForm.userpass = meeting_userpass;
- openMeetingForm.username = meeting_username;
- openMeetingForm.userpass = meeting_userpass;
- getTree();
- });
- </script>
- <style lang="scss" scoped>
- .communication-container {
- width: 1963px;
- height: 659px;
- background: url('@/assets/images/emergencyCommandMap/communication/communicationBg.png') no-repeat;
- position: relative;
- padding-top: 100px;
- padding-left: 60px;
- animation-name: slideLeft;
- animation-duration: 2s;
- .tabs {
- display: flex;
- align-items: center; // 确保标签居中对齐
- position: relative; // 使相对定位生效,以便绝对定位图标
- .tab {
- font-size: 44px;
- font-family: YouSheBiaoTiHei;
- text-align: center;
- color: #b6bbcc;
- width: 317px;
- height: 78px;
- line-height: 85px;
- background: url('@/assets/images/emergencyCommandMap/communication/tab.png') no-repeat;
- cursor: pointer;
- &:hover {
- color: #ffffff;
- background: url('@/assets/images/emergencyCommandMap/communication/tabActive.png') no-repeat;
- }
- }
- .tab_active {
- color: #ffffff;
- background: url('@/assets/images/emergencyCommandMap/communication/tabActive.png') no-repeat;
- }
- .more-icon {
- position: absolute;
- top: -40px; // 调整图标与顶部的距离
- right: 10px; // 调整图标与右侧的距离
- cursor: pointer;
- img {
- width: 40px; // 根据实际需要调整大小
- height: 40px;
- }
- }
- }
- .content {
- display: flex;
- margin-top: 12px;
- .left-content {
- .search-box {
- display: flex;
- .custom-input {
- width: 305px;
- }
- .select-box {
- width: 176px !important;
- height: 56px;
- line-height: 56px;
- margin: 0 10px;
- color: #83a3be;
- font-size: 32px;
- }
- .custom-select-popper {
- .el-scrollbar {
- .el-select-dropdown__item {
- color: #b1cae0;
- font-size: 32px;
- height: 56px;
- line-height: 56px;
- }
- }
- }
- .input {
- background: transparent;
- color: #83a3be;
- font-size: 32px;
- outline: none;
- appearance: none;
- height: 100%;
- border: none;
- &::placeholder {
- color: #83a3be;
- }
- }
- }
- }
- .tree-container {
- margin-top: 15px;
- display: flex;
- .tree-box {
- width: 488px;
- height: 354px;
- background: url('@/assets/images/emergencyCommandMap/communication/treeBg.png') no-repeat;
- padding: 15px 8px;
- overflow: hidden;
- :deep(.el-tree) {
- background-color: transparent;
- color: #fbffff;
- font-size: 38px;
- .el-tree-node__content {
- height: auto;
- padding-top: 10px;
- padding-bottom: 10px;
- white-space: normal;
- word-break: break-all;
- }
- .el-tree-node__expand-icon {
- color: #297cfc;
- font-size: 23px;
- }
- .el-tree-node:focus > .el-tree-node__content,
- .el-tree-node__content:hover {
- background-color: transparent !important;
- }
- }
- }
- .user-box {
- margin-left: 10px;
- width: 488px;
- height: 354px;
- background: url('@/assets/images/emergencyCommandMap/communication/treeBg.png') no-repeat;
- background-size: 100% 100%;
- .user-table {
- padding: 15px 8px;
- display: flex;
- flex-direction: column;
- font-size: 38px;
- color: #fbffff;
- .tr {
- background-color: #102e76;
- }
- .tr,
- .tr2 {
- display: flex;
- padding: 6px 0;
- .td {
- flex: 2;
- display: flex;
- align-items: center;
- }
- .td2 {
- width: 65px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .td3 {
- flex: 3;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- .table-content {
- height: 275px;
- overflow-y: auto;
- }
- .tr2 {
- margin-top: 10px;
- background-color: #122868;
- }
- .phone-icon {
- flex-shrink: 0;
- width: 62px;
- height: 63px;
- background: url('@/assets/images/emergencyCommandMap/communication/phone.png') no-repeat;
- cursor: pointer;
- }
- }
- }
- }
- .select-box2 {
- margin-left: 10px;
- width: 579px;
- height: 450px;
- background: url('@/assets/images/emergencyCommandMap/communication/peopleBg.png') no-repeat;
- background-size: 100% 100%;
- .select-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: #fbffff;
- font-size: 32px;
- border-bottom: 1px solid #247dff;
- padding: 20px;
- .left-item {
- display: flex;
- align-items: center;
- .text {
- margin: 0 10px;
- color: #00e8ff;
- font-family: 'BEBAS-1';
- }
- }
- .clear-btn {
- color: #00e8ff;
- cursor: pointer;
- }
- }
- .select-content {
- height: 360px;
- overflow-y: auto;
- .box-item {
- border-bottom: 1px solid #247dff;
- padding: 20px;
- position: relative;
- .line {
- color: #fff;
- font-size: 38px;
- display: flex;
- .text1 {
- margin-right: 35px;
- }
- .text2 {
- color: #a7ccdf;
- }
- }
- .close-btn {
- position: absolute;
- right: 10px;
- top: 50px;
- cursor: pointer;
- width: 29px;
- height: 29px;
- background: url('@/assets/images/emergencyCommandMap/communication/close.png') no-repeat;
- }
- }
- }
- }
- .btn-box {
- flex: 1;
- height: 421px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- .btn {
- width: 361px;
- height: 136px;
- background: url('@/assets/images/emergencyCommandMap/communication/btn.png') no-repeat;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- .icon1,
- .icon2,
- .icon3 {
- margin-right: 20px;
- margin-top: 10px;
- }
- .icon1 {
- width: 64px;
- height: 67px;
- background: url('@/assets/images/emergencyCommandMap/communication/icon1.png') no-repeat;
- }
- .icon2 {
- width: 64px;
- height: 65px;
- background: url('@/assets/images/emergencyCommandMap/communication/icon2.png') no-repeat;
- }
- .icon3 {
- width: 64px;
- height: 63px;
- background: url('@/assets/images/emergencyCommandMap/communication/icon3.png') no-repeat;
- }
- .text {
- color: #fff;
- font-size: 38px;
- }
- }
- }
- }
- }
- .title {
- position: absolute;
- top: 6px;
- left: 141px;
- font-size: 60px;
- }
- </style>
|