yjdp-web/src/views/globalMap/RightMenu/MobilePlatform.vue

<template>
  <div class="menu-content">
    <div class="container">
      <div class="gradient-text title">手机工作台</div>
      <!--    <div class="box2">-->
      <div class="box-left">
        <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
        <div class="btn" @click="handleCancel">取消</div>
      </div>
    </div>
    <!--    </div>-->
    <div class="custom-table">
      <div class="th">
        <div class="td">设备</div>
        <!--
        <div class="td">姓名</div>
        <div class="td">工作单位</div>
        <div class="td">职务</div>
      -->
        <div class="td" style="width: 330px; flex: unset">操作</div>
      </div>
      <div class="table-content">
        <div v-for="item in dataList" :key="item.dev_id" class="tr">
          <div class="td">{{ item.dev_name }}</div>
        <!--
          <div class="td">{{ item.name }}</div>
          <div class="td">{{ item.work_unit }}</div>
          <div class="td">{{ item.position }}</div>
        -->
          <div class="td" style="width: 330px; flex: unset">
            <div class="text" @click="handleConnect(item)">连线</div>
            <!--
            <div class="text" @click="handleCollaborate">协同</div>
            <div class="text" @click="handleTrack(item)">轨迹</div>
          -->
          </div>
        </div>
      </div>
      <div class="footer">
        <el-pagination
          background
          :hide-on-single-page="true"
          layout="total, prev, pager, next"
          :total="total"
          :page-size="queryParams.size"
          :current-current="queryParams.current"
          @current-change="handleChangePage"
        />
      </div>
    </div>
    <Contact v-if="shareState.showShare" v-model="shareState.showShare" @close="handleCloseShare" @confirm="handleShareConfirm" />

    <Dialog
      v-if="showOpenMeeting"
      custom-show
      type="xs"
      height="660px"
      title="发起会议"
      @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>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { getMobileWorkstationList, getMobileWorkstationTrajectory } from '@/api/globalMap/MobilePlatform';
import { getStartMiniParam } from '@/api/emergencyCommandMap/communication';
import { showSuccessMsg } from '@/utils/notification';
import { parseTime } from '@/utils/ruoyi';
const initDataToPlay = inject('initDataToPlay');
// 数据列表,直接定义为数组
const dataList = ref([]);
//入参
const queryParams = reactive({
  current: 1,
  size: 10,
  keywords: ''
});
const currentItem = ref(null);
const total = ref(0);
//调接口
const initData = () => {
  getMobileWorkstationList({
    current: queryParams.current,
    size: queryParams.size,
    query: {
      keywords: queryParams.keywords
    }
  }).then((res) => {
    dataList.value = res.data;
    total.value = res.total;
  });
};

const handleChangePage = (newNum) => {
  queryParams.current = newNum;
  initData();
};

// 取消按钮的逻辑，搜索框清空并重新加载数据
const handleCancel = () => {
  queryParams.keywords = '';
  queryParams.current = 1;
  initData();
};
const handleConnect = (item) => {
  currentItem.value = item;
  showOpenMeeting.value = true;
};
// 分享
let shareState = reactive({
  type: '',
  showShare: false,
  id: ''
});
const handleCollaborate = (type, id?: string) => {
  shareState.type = type;
  shareState.id = id;
  shareState.showShare = true;
};
const handleCloseShare = () => {
  shareState.type = '';
  shareState.id = '';
};
const handleShareConfirm = (data) => {
  showSuccessMsg('开启协同成功');
};
// 轨迹
const handleTrack = (item) => {
  getMobileWorkstationTrajectory(item.id).then((res) => {
    const trajectory = [];
    res.rows.forEach((item) => {
      trajectory.push({
        time: !!item.create_time ? parseTime(item.create_time, '{h}:{i}') : '',
        lnglat: [item.longitude, item.latitude]
      });
    });
    initDataToPlay({ type: 'track', data: trajectory, name: '手机工作台' });
  });
};
//调用函数
onMounted(() => {
  const meeting_username = localStorage.getItem('meeting_username') || '';
  const meeting_userpass = localStorage.getItem('meeting_userpass') || '';
  openMeetingForm.username = meeting_username;
  openMeetingForm.userpass = meeting_userpass;
  initData();
});

//启动会议相关
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 closeOpenDialog = () => {
  showOpenMeeting.value = false;
};
const handleStartCall = () => {
  form2Ref.value?.validate((valid) => {
    if (valid) {
      let dev_list = [];
      dev_list.push({ id: currentItem.value.dev_id, avtype: 'av'}); // a 音频 v 视频 默认 av

      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();
    }
  });
};
</script>

<style lang="scss" scoped>
.menu-content {
  width: 1579px;
  height: 1394px;
  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
  padding: 130px 20px 20px 20px;
  font-size: 36px;
  position: relative;
  color: #ffffff;
}
.title {
  font-size: 60px;
  position: absolute;
  top: 30px;
  left: 160px;
}

.box-left {
  display: flex;
  margin-top: 30px;
  margin-bottom: 20px;
  .btn {
    width: 140px;
    min-width: 140px;
    height: 60px;
    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 20px;
    color: #ffffff;
    font-size: 32px;
  }
}

.custom-input {
  height: 60px;
  line-height: 40px;
}

.custom-table {
  width: 100%;
  height: 1120px;
  display: flex;
  flex-direction: column;
  .table-content {
    flex: 1;
    overflow-y: auto;
  }
  .th {
    width: 100%;
    height: 151px;
    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
  }
  .tr {
    width: 100%;
    height: 139px;
    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding-right: 20px;
    &:hover {
      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .td {
    flex: 1;
    color: #edfaff;
    font-size: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .td-text {
    /* 设置字体透明 */
    color: transparent;
    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
    -webkit-background-clip: text;
    /* 非Webkit内核浏览器需要使用标准前缀 */
    background-clip: text;
    font-family: 'YouSheBiaoTiHei';
    /* 设置线性渐变，从红色渐变到蓝色 */
    background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
    font-size: 48px;
  }
  .text-green {
    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
  }
  .text-danger {
    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
  }
}
.text {
  font-size: 38px;
  color: #00e8ff;
  margin-right: 20px;
  &:last-child {
    margin-right: 0;
  }
}
.footer {
  height: 64px;
  display: flex;
  justify-content: flex-end;
  margin-top: 25px;
  .pagination-container {
    height: 64px;
    margin: 0;
  }
  :deep(.el-pagination__total) {
    color: #a7ccdf;
    font-size: 32px;
  }
  :deep(.el-pagination) {
    .btn-next,
    .btn-prev {
      background-color: transparent;
      border: none;
      .el-icon {
        font-size: 22px;
        color: #a7ccdf;
      }
    }
    .btn-prev:disabled,
    .btn-next:disabled {
      background-color: transparent;
      border: none;
    }
    .el-pager li {
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      font-size: 38px;
      color: #a7ccdf;
      background-color: #0e3064;
      border: 1px solid #0c57a7;
      margin: 0 6px;
      &:hover {
        background-color: #038dff;
        border: 1px solid #038dff;
      }
    }
    .el-pager li.is-active {
      background-color: #038dff;
      border: 1px solid #038dff;
    }
    .el-pagination__goto {
      font-size: 38px;
      color: #a7ccdf;
    }
  }
}
</style>