yjdp-web/src/views/emergencyCommandMap/LeftSection/Communication.vue

<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="@/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" />

    <IndividualEquipment v-show="activeIndex === 2" :height="345" />

    <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-if="communicationDialogState.showListDialog" 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.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 = '0';
  showOpenMeeting.value = true;
};
const closeOpenDialog = () => {
  showOpenMeeting.value = false;
};
const handleOpenCall = () => {
  type.value = '1';
  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>