Communication.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677
  1. <template>
  2. <div class="communication-container">
  3. <div class="tabs">
  4. <div v-for="(item, index) in menu" :key="index" :class="activeIndex === index ? 'tab tab_active' : 'tab'" @click="activeIndex = index">
  5. {{ item.name }}
  6. </div>
  7. <!-- 新增的图标按钮 -->
  8. <div class="more-icon" @click="showCommunicationDialogList">
  9. <img src="/yjdp/src/assets/images/video/enlarge.png" />
  10. </div>
  11. </div>
  12. <!--视频会商-->
  13. <div v-show="activeIndex === 0" class="content">
  14. <div class="left-content">
  15. <div class="search-box">
  16. <el-input v-model="queryParams.label" class="custom-input" placeholder="组织架构搜索" style="width: 487px" @keyup.enter="getTree">
  17. <template #prefix>
  18. <el-icon class="el-input__icon"><search /></el-icon>
  19. </template>
  20. </el-input>
  21. <el-select
  22. v-model="queryParams2.value2"
  23. class="custom-select select-box"
  24. placeholder="全部"
  25. popper-class="custom-select-popper"
  26. :teleported="false"
  27. >
  28. <el-option v-for="level in options" :key="level.value" :label="level.name" :value="level.value"></el-option>
  29. </el-select>
  30. <el-input v-model="queryParams2.name" class="custom-input" placeholder="设备搜索" @keyup.enter="handleNodeClick(false)">
  31. <template #prefix>
  32. <el-icon class="el-input__icon"><search /></el-icon>
  33. </template>
  34. </el-input>
  35. </div>
  36. <div class="tree-container">
  37. <div class="tree-box">
  38. <div style="overflow-y: auto; height: 100%">
  39. <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
  40. </div>
  41. </div>
  42. <div class="user-box">
  43. <div class="user-table">
  44. <div class="tr">
  45. <div class="td2">
  46. <div :class="getCheckedClass()" @click="handleChecked"></div>
  47. </div>
  48. <div class="td">设备</div>
  49. <!-- div class="td3">姓名职务</div -->
  50. </div>
  51. <div class="table-content">
  52. <div v-for="(item, index) in userList" :key="index" class="tr2">
  53. <div class="td2">
  54. <div :class="item.checked ? 'common-checked-active' : 'common-checked'" @click="handleChecked2(item)"></div>
  55. </div>
  56. <div class="td">{{ item.name }}</div>
  57. <!-- div class="td3">
  58. {{ item.duty }}
  59. <div class="phone-icon"></div>
  60. </div-->
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="select-box2">
  68. <div class="select-header">
  69. <div class="left-item">
  70. <div>已选择:</div>
  71. <div class="text">{{ selectList.length }}</div>
  72. <div>个</div>
  73. </div>
  74. <div class="clear-btn" @click="clearSelect">清空</div>
  75. </div>
  76. <div class="select-content">
  77. <div v-for="(item, index) in selectList" :key="index" class="box-item">
  78. <div class="line">
  79. <div class="text1">{{ item.name }}</div>
  80. <div class="text2">{{ item.duty }}</div>
  81. </div>
  82. <div class="line" style="margin-top: 20px">
  83. <div class="text2">{{ item.dept }}</div>
  84. </div>
  85. <div class="close-btn" @click="deleteItem(item)"></div>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="btn-box">
  90. <div class="btn" @click="showJoinMeetingDialog">
  91. <div class="icon1"></div>
  92. <div class="text">会议号入会</div>
  93. </div>
  94. <div class="btn" @click="handleOpenCall">
  95. <div class="icon2"></div>
  96. <div class="text">电话呼叫</div>
  97. </div>
  98. <div class="btn" @click="handleOpenMeeting">
  99. <div class="icon3"></div>
  100. <div class="text">发起会议</div>
  101. </div>
  102. </div>
  103. </div>
  104. <Drone v-show="activeIndex === 1"></Drone>
  105. <IndividualEquipment v-show="activeIndex === 2"></IndividualEquipment>
  106. <Dialog v-if="showJoinMeeting" custom-show type="xs" height="760px" title="加入会议" @confirm="handleJoinMeeting" @close="closeDialog">
  107. <el-form ref="formRef" :model="meetingForm" :rules="rules">
  108. <el-form-item label="会议号" label-width="200px" prop="roomcode">
  109. <el-input v-model="meetingForm.roomcode" class="custom-input2" clearable placeholder="请输入会议号" />
  110. </el-form-item>
  111. <el-form-item label="账号" label-width="200px" prop="username">
  112. <el-input v-model="meetingForm.username" class="custom-input2" clearable placeholder="请输入设备账号" />
  113. </el-form-item>
  114. <el-form-item label="密码" label-width="200px" prop="userpass">
  115. <el-input v-model="meetingForm.userpass" type="password" class="custom-input2" clearable placeholder="请输入设备密码" />
  116. </el-form-item>
  117. </el-form>
  118. </Dialog>
  119. <Dialog
  120. v-if="showOpenMeeting"
  121. custom-show
  122. type="xs"
  123. height="660px"
  124. :title="type === '0' ? '发起会议' : '电话呼叫'"
  125. @confirm="handleStartCall"
  126. @close="closeOpenDialog"
  127. >
  128. <el-form ref="form2Ref" :model="openMeetingForm" :rules="rules2">
  129. <el-form-item label="账号" label-width="200px" prop="username">
  130. <el-input v-model="openMeetingForm.username" class="custom-input2" clearable placeholder="请输入设备账号" />
  131. </el-form-item>
  132. <el-form-item label="密码" label-width="200px" prop="userpass">
  133. <el-input v-model="openMeetingForm.userpass" type="password" class="custom-input2" clearable placeholder="请输入设备密码" />
  134. </el-form-item>
  135. </el-form>
  136. </Dialog>
  137. </div>
  138. <CommunicationDialog v-model="communicationDialogState.showListDialog" :flag="flag" />
  139. </template>
  140. <script lang="ts" setup>
  141. import { Search } from '@element-plus/icons-vue';
  142. import { getStartMiniParam, getStartMiniWithNoParam, getAvconDeviceTree, getAvconDeviceList } from '@/api/emergencyCommandMap/communication';
  143. import { deepClone } from '@/utils';
  144. import Drone from './Drone.vue';
  145. import IndividualEquipment from './IndividualEquipment.vue';
  146. import CommunicationDialog from './Communication-dialog';
  147. import EventManage from '@/views/routineCommandMap/RightSection/EventReport/EventManage.vue';
  148. const proxy = getCurrentInstance()?.proxy;
  149. const props = defineProps({
  150. flag: Boolean
  151. });
  152. let activeIndex = ref(0);
  153. const options = ref([{ name: '全部', value: '全部' }]);
  154. const menu = ref([{ name: '视频会商' }, { name: '无人机' }, { name: '单兵设备' }]);
  155. const treeData = ref([]);
  156. const userList = ref([]);
  157. const communicationDialogState = reactive({
  158. showListDialog: false
  159. });
  160. // 显示事件管理列表弹窗
  161. const showCommunicationDialogList = () => {
  162. communicationDialogState.showListDialog = true;
  163. };
  164. const queryParams = reactive({
  165. label: ''
  166. });
  167. const queryParams2 = reactive({
  168. name: '',
  169. value2: ''
  170. });
  171. const getTree = () => {
  172. getAvconDeviceTree(queryParams).then((res) => {
  173. treeData.value = res.data;
  174. });
  175. };
  176. const selectList = ref([]);
  177. const getCheckedClass = () => {
  178. let res = 'common-checked';
  179. const len = userList.value.length;
  180. let len2 = 0;
  181. userList.value.forEach((item) => {
  182. const index = selectList.value.findIndex((item2) => item2.id === item.id);
  183. if (index > -1) {
  184. len2++;
  185. }
  186. });
  187. if (len2 > 0 && len2 === len) {
  188. res = 'common-checked-active';
  189. } else if (len2 > 0) {
  190. res = 'common-checked-half';
  191. }
  192. return res;
  193. };
  194. let clickNodeId = ref('');
  195. const handleNodeClick = (item) => {
  196. if (!!item) {
  197. clickNodeId.value = item.id;
  198. }
  199. const id = item ? item.id : !!clickNodeId.value ? clickNodeId.value : treeData.value[0].id;
  200. console.log('handleNodeClick', id);
  201. getAvconDeviceList(id, queryParams2).then((res) => {
  202. res.data.forEach((item) => {
  203. const index = selectList.value.findIndex((item2) => item2.id === item.id);
  204. item.checked = index > -1;
  205. });
  206. userList.value = res.data;
  207. });
  208. };
  209. // 全选、全取消
  210. const handleChecked = () => {
  211. const checkedClass = getCheckedClass();
  212. let flag = true;
  213. if (checkedClass === 'common-checked-active') {
  214. flag = false;
  215. }
  216. userList.value.forEach((item) => {
  217. item.checked = flag;
  218. changeSelectList(item);
  219. });
  220. };
  221. // 单个选中、取消选中
  222. const handleChecked2 = (item) => {
  223. item.checked = !item.checked;
  224. changeSelectList(item);
  225. };
  226. // 清空
  227. const clearSelect = () => {
  228. userList.value.forEach((item) => {
  229. if (item.checked) {
  230. item.checked = false;
  231. }
  232. });
  233. selectList.value = [];
  234. };
  235. const changeSelectList = (item) => {
  236. const index = selectList.value.findIndex((item2) => item2.id === item.id);
  237. if (item.checked) {
  238. if (index === -1) {
  239. selectList.value.push(deepClone(item));
  240. }
  241. } else {
  242. if (index > -1) {
  243. selectList.value.splice(index, 1);
  244. }
  245. }
  246. };
  247. // 清空指定项
  248. const deleteItem = (item) => {
  249. for (let i = 0; i < userList.value.length; i++) {
  250. if (item.id === userList.value[i].id) {
  251. userList.value[i].checked = false;
  252. break;
  253. }
  254. }
  255. item.checked = false;
  256. changeSelectList(item);
  257. };
  258. let formRef = ref();
  259. let showJoinMeeting = ref(false);
  260. let meetingForm = reactive({
  261. roomcode: '',
  262. username: '',
  263. userpass: ''
  264. });
  265. const rules = reactive({
  266. roomcode: [{ required: true, message: '会议号不能为空', trigger: 'blur' }],
  267. username: [{ required: true, message: '会议账号不能为空', trigger: 'blur' }],
  268. userpass: [{ required: true, message: '会议密码不能为空', trigger: 'blur' }]
  269. });
  270. // 0 会议 1 电话
  271. let type = ref('0');
  272. // 点击会议号入会
  273. const showJoinMeetingDialog = () => {
  274. type.value = '0';
  275. showJoinMeeting.value = true;
  276. };
  277. const closeDialog = () => {
  278. showJoinMeeting.value = false;
  279. meetingForm.roomcode = '';
  280. };
  281. ///////////////////
  282. let form2Ref = ref();
  283. let showOpenMeeting = ref(false);
  284. let openMeetingForm = reactive({
  285. username: '',
  286. userpass: ''
  287. });
  288. const rules2 = reactive({
  289. username: [{ required: true, message: '会议账号不能为空', trigger: 'blur' }],
  290. userpass: [{ required: true, message: '会议密码不能为空', trigger: 'blur' }]
  291. });
  292. const handleOpenMeeting = () => {
  293. type.value = '1';
  294. showOpenMeeting.value = true;
  295. };
  296. const closeOpenDialog = () => {
  297. showOpenMeeting.value = false;
  298. };
  299. const handleOpenCall = () => {
  300. showOpenMeeting.value = true;
  301. };
  302. // 会议号入会
  303. const handleJoinMeeting = () => {
  304. formRef.value?.validate((valid) => {
  305. if (valid) {
  306. const screenWidth = window.screen.width * window.devicePixelRatio;
  307. const screenHeight = window.screen.height * window.devicePixelRatio;
  308. const data = {
  309. userid: meetingForm.username, // 空表示后台获取当前用户对应融合通信dev_id
  310. password: meetingForm.userpass || '123',
  311. roomcode: meetingForm.roomcode, // 会议号
  312. windowpos: { 'x': 0, 'y': 0, 'width': screenWidth, 'height': screenHeight, 'top': true }
  313. };
  314. getStartMiniWithNoParam(data).then((res) => {
  315. // 创建一个a标签元素
  316. const a = document.createElement('a');
  317. // 设置a标签的href属性
  318. a.href = res.data;
  319. // 触发点击事件
  320. a.click();
  321. // 保存账号和密码
  322. localStorage.setItem('meeting_username', meetingForm.username);
  323. localStorage.setItem('meeting_userpass', meetingForm.userpass);
  324. });
  325. closeDialog();
  326. }
  327. });
  328. };
  329. // 电话呼叫
  330. const handleStartCall = () => {
  331. form2Ref.value?.validate((valid) => {
  332. if (valid) {
  333. let dev_list = [];
  334. userList.value.forEach((item) => {
  335. if (item.checked && item.mobile != '') {
  336. dev_list.push({ id: item.mobile, avtype: type.value === '0' ? 'av' : 'a' }); // a 音频 v 视频 默认 av
  337. }
  338. });
  339. if (dev_list.length == 0) {
  340. proxy?.$modal.msgError('请勾选人员');
  341. return false;
  342. }
  343. const screenWidth = window.screen.width * window.devicePixelRatio;
  344. const screenHeight = window.screen.height * window.devicePixelRatio;
  345. const data = {
  346. userid: openMeetingForm.username, // 空表示后台获取当前用户对应融合通信dev_id
  347. password: openMeetingForm.userpass,
  348. windowpos: { 'x': 0, 'y': 0, 'width': screenWidth, 'height': screenHeight, 'top': true },
  349. members: {
  350. num: dev_list.length + 2, // 配置多少个座位,一般就是邀请人多少个就多少个
  351. 'dev-list': dev_list
  352. }
  353. };
  354. getStartMiniParam(data).then((res) => {
  355. // 创建一个a标签元素
  356. const a = document.createElement('a');
  357. // 设置a标签的href属性
  358. a.href = res.data;
  359. // 触发点击事件
  360. a.click();
  361. // 保存账号和密码
  362. localStorage.setItem('meeting_username', openMeetingForm.username);
  363. localStorage.setItem('meeting_userpass', openMeetingForm.userpass);
  364. });
  365. closeOpenDialog();
  366. }
  367. });
  368. };
  369. onMounted(() => {
  370. const meeting_username = localStorage.getItem('meeting_username') || '';
  371. const meeting_userpass = localStorage.getItem('meeting_userpass') || '';
  372. meetingForm.username = meeting_username;
  373. meetingForm.userpass = meeting_userpass;
  374. openMeetingForm.username = meeting_username;
  375. openMeetingForm.userpass = meeting_userpass;
  376. getTree();
  377. });
  378. </script>
  379. <style lang="scss" scoped>
  380. .communication-container {
  381. width: 1963px;
  382. height: 659px;
  383. background: url('@/assets/images/emergencyCommandMap/communication/communicationBg.png') no-repeat;
  384. position: relative;
  385. padding-top: 100px;
  386. padding-left: 60px;
  387. animation-name: slideLeft;
  388. animation-duration: 2s;
  389. .tabs {
  390. display: flex;
  391. align-items: center; // 确保标签居中对齐
  392. position: relative; // 使相对定位生效,以便绝对定位图标
  393. .tab {
  394. font-size: 44px;
  395. font-family: YouSheBiaoTiHei;
  396. text-align: center;
  397. color: #b6bbcc;
  398. width: 317px;
  399. height: 78px;
  400. line-height: 85px;
  401. background: url('@/assets/images/emergencyCommandMap/communication/tab.png') no-repeat;
  402. cursor: pointer;
  403. &:hover {
  404. color: #ffffff;
  405. background: url('@/assets/images/emergencyCommandMap/communication/tabActive.png') no-repeat;
  406. }
  407. }
  408. .tab_active {
  409. color: #ffffff;
  410. background: url('@/assets/images/emergencyCommandMap/communication/tabActive.png') no-repeat;
  411. }
  412. .more-icon {
  413. position: absolute;
  414. top: -40px; // 调整图标与顶部的距离
  415. right: 10px; // 调整图标与右侧的距离
  416. cursor: pointer;
  417. img {
  418. width: 40px; // 根据实际需要调整大小
  419. height: 40px;
  420. }
  421. }
  422. }
  423. .content {
  424. display: flex;
  425. margin-top: 12px;
  426. .left-content {
  427. .search-box {
  428. display: flex;
  429. .custom-input {
  430. width: 305px;
  431. }
  432. .select-box {
  433. width: 176px !important;
  434. height: 56px;
  435. line-height: 56px;
  436. margin: 0 10px;
  437. color: #83a3be;
  438. font-size: 32px;
  439. }
  440. .custom-select-popper {
  441. .el-scrollbar {
  442. .el-select-dropdown__item {
  443. color: #b1cae0;
  444. font-size: 32px;
  445. height: 56px;
  446. line-height: 56px;
  447. }
  448. }
  449. }
  450. .input {
  451. background: transparent;
  452. color: #83a3be;
  453. font-size: 32px;
  454. outline: none;
  455. appearance: none;
  456. height: 100%;
  457. border: none;
  458. &::placeholder {
  459. color: #83a3be;
  460. }
  461. }
  462. }
  463. }
  464. .tree-container {
  465. margin-top: 15px;
  466. display: flex;
  467. .tree-box {
  468. width: 488px;
  469. height: 354px;
  470. background: url('@/assets/images/emergencyCommandMap/communication/treeBg.png') no-repeat;
  471. padding: 15px 8px;
  472. overflow: hidden;
  473. :deep(.el-tree) {
  474. background-color: transparent;
  475. color: #fbffff;
  476. font-size: 38px;
  477. .el-tree-node__content {
  478. height: auto;
  479. padding-top: 10px;
  480. padding-bottom: 10px;
  481. white-space: normal;
  482. word-break: break-all;
  483. }
  484. .el-tree-node__expand-icon {
  485. color: #297cfc;
  486. font-size: 23px;
  487. }
  488. .el-tree-node:focus > .el-tree-node__content,
  489. .el-tree-node__content:hover {
  490. background-color: transparent !important;
  491. }
  492. }
  493. }
  494. .user-box {
  495. margin-left: 10px;
  496. width: 488px;
  497. height: 354px;
  498. background: url('@/assets/images/emergencyCommandMap/communication/treeBg.png') no-repeat;
  499. background-size: 100% 100%;
  500. .user-table {
  501. padding: 15px 8px;
  502. display: flex;
  503. flex-direction: column;
  504. font-size: 38px;
  505. color: #fbffff;
  506. .tr {
  507. background-color: #102e76;
  508. }
  509. .tr,
  510. .tr2 {
  511. display: flex;
  512. padding: 6px 0;
  513. .td {
  514. flex: 2;
  515. display: flex;
  516. align-items: center;
  517. }
  518. .td2 {
  519. width: 65px;
  520. display: flex;
  521. align-items: center;
  522. justify-content: center;
  523. }
  524. .td3 {
  525. flex: 3;
  526. display: flex;
  527. align-items: center;
  528. justify-content: center;
  529. }
  530. }
  531. .table-content {
  532. height: 275px;
  533. overflow-y: auto;
  534. }
  535. .tr2 {
  536. margin-top: 10px;
  537. background-color: #122868;
  538. }
  539. .phone-icon {
  540. flex-shrink: 0;
  541. width: 62px;
  542. height: 63px;
  543. background: url('@/assets/images/emergencyCommandMap/communication/phone.png') no-repeat;
  544. cursor: pointer;
  545. }
  546. }
  547. }
  548. }
  549. .select-box2 {
  550. margin-left: 10px;
  551. width: 579px;
  552. height: 450px;
  553. background: url('@/assets/images/emergencyCommandMap/communication/peopleBg.png') no-repeat;
  554. background-size: 100% 100%;
  555. .select-header {
  556. display: flex;
  557. justify-content: space-between;
  558. align-items: center;
  559. color: #fbffff;
  560. font-size: 32px;
  561. border-bottom: 1px solid #247dff;
  562. padding: 20px;
  563. .left-item {
  564. display: flex;
  565. align-items: center;
  566. .text {
  567. margin: 0 10px;
  568. color: #00e8ff;
  569. font-family: 'BEBAS-1';
  570. }
  571. }
  572. .clear-btn {
  573. color: #00e8ff;
  574. cursor: pointer;
  575. }
  576. }
  577. .select-content {
  578. height: 360px;
  579. overflow-y: auto;
  580. .box-item {
  581. border-bottom: 1px solid #247dff;
  582. padding: 20px;
  583. position: relative;
  584. .line {
  585. color: #fff;
  586. font-size: 38px;
  587. display: flex;
  588. .text1 {
  589. margin-right: 35px;
  590. }
  591. .text2 {
  592. color: #a7ccdf;
  593. }
  594. }
  595. .close-btn {
  596. position: absolute;
  597. right: 10px;
  598. top: 50px;
  599. cursor: pointer;
  600. width: 29px;
  601. height: 29px;
  602. background: url('@/assets/images/emergencyCommandMap/communication/close.png') no-repeat;
  603. }
  604. }
  605. }
  606. }
  607. .btn-box {
  608. flex: 1;
  609. height: 421px;
  610. display: flex;
  611. flex-direction: column;
  612. justify-content: center;
  613. align-items: center;
  614. .btn {
  615. width: 361px;
  616. height: 136px;
  617. background: url('@/assets/images/emergencyCommandMap/communication/btn.png') no-repeat;
  618. display: flex;
  619. align-items: center;
  620. justify-content: center;
  621. cursor: pointer;
  622. .icon1,
  623. .icon2,
  624. .icon3 {
  625. margin-right: 20px;
  626. margin-top: 10px;
  627. }
  628. .icon1 {
  629. width: 64px;
  630. height: 67px;
  631. background: url('@/assets/images/emergencyCommandMap/communication/icon1.png') no-repeat;
  632. }
  633. .icon2 {
  634. width: 64px;
  635. height: 65px;
  636. background: url('@/assets/images/emergencyCommandMap/communication/icon2.png') no-repeat;
  637. }
  638. .icon3 {
  639. width: 64px;
  640. height: 63px;
  641. background: url('@/assets/images/emergencyCommandMap/communication/icon3.png') no-repeat;
  642. }
  643. .text {
  644. color: #fff;
  645. font-size: 38px;
  646. }
  647. }
  648. }
  649. }
  650. }
  651. .title {
  652. position: absolute;
  653. top: 6px;
  654. left: 141px;
  655. font-size: 60px;
  656. }
  657. </style>