fengjie-datascreen/src/layout/components/Correspondence/index.vue

<template>
  <div class="correspondence">
    <div class="top-box">
      <div class="title">融合通信</div>
      <div class="icon-box flex">
        <div
          class="item"
          v-for="item in deptsList"
          :key="item.id"
          @click="handleDepsUser(item.id, item)"
        >
          <img src="/src/assets/images/r-icon-1.png" />
          <view class="item-name">{{ item.name }}</view>
        </div>
        <div
            class="item"
            @click="goItc()"
        >
          <img src="/src/assets/images/r-icon-1.png" />
          <view class="item-name">三峡之巅广播</view>
        </div>
      </div>
    </div>
    <div class="bom-box">
      <Title2 title="最近联系" />
      <div class="table">
        <div class="header">
          <div>人员姓名</div>
          <div>部门</div>
          <div>时间</div>
        </div>
        <div class="list">
          <div class="item" v-for="(item, index) in recordList" :key="index">
            <div>{{ item.nickname }}</div>
            <div>{{ item.department }}</div>
            <div>{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <el-dialog :title="gridTitle" center v-model="dialogTableVisible">
      <div class="bom-box">
        <div class="table">
          <div class="header">
            <div>姓名</div>
            <div>部门</div>
            <div>职位</div>
            <div>电话号码</div>
            <div>操作</div>
          </div>
          <div class="list">
            <div class="item" v-for="(item, index) in gridData" :key="index">
              <div>{{ item.nickName }}</div>
              <div>{{ item.depthName }}</div>
              <div>{{ item.postName }}</div>
              <div>{{ item.phoneNumber }}</div>
              <div>
                <img class="sp-ico" src="@/assets/images/sp-icom.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import { getComDeptsApi, getComDeptUsersApi, getComRecordApi } from '@/api/common'
  let deptsList = ref([])
  let dialogTableVisible = ref(false)
  const getComDepts = async () => {
    let res = await getComDeptsApi()
    deptsList.value = res.data
  }
  let recordList = ref([])
  const getComRecord = async () => {
    let res = await getComRecordApi()
    recordList.value = res.data
  }
  let gridData = ref([])
  let gridTitle = ref('')
  const goItc = () => {
    location.href="http://192.168.0.2:81/";
  }
  const handleDepsUser = async (id, item) => {
    gridTitle.value = item.name
    dialogTableVisible.value = true
    let res = await getComDeptUsersApi({ id })
    gridData.value = res.data
  }

  onMounted(() => {
    getComDepts()
    getComRecord()
  })
</script>

<style lang="scss" scoped>
  :deep(.el-dialog) {
    background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
    background-size: 100% 100%;
  }
  :deep(.el-dialog__title) {
    color: #fff;
    font-weight: bold;
  }
  .sp-ico {
    width: vw(40);
  }
  .item-name {
    width: 90%;
    text-align: center;
  }
  .sp-img {
    width: vw(100);
  }
  .correspondence {
    margin: vw(8);
    width: vw(300);
    height: vh(1070);
    background-image: url('@/assets/images/bg-1.png');
    background-size: 100% 100%;
  }
  .bom-box {
    .table {
      width: 100%;
      margin-top: vh(5);
      .header {
        height: vh(28);
        font-weight: 400;
        font-size: vw(12);
        color: #fff;
        display: flex;
        background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
        & > div {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .list {
        overflow-y: auto;
        height: vh(490);
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: vw(4); /* 滚动条的宽度 */
        }
        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: 'transparent'; /* 轨道的背景色 */
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
          border-radius: 5px; /* 滑块的圆角 */
        }
        .item {
          height: vh(50);
          font-weight: 400;
          font-size: vw(14);
          color: #f1f7ff;
          display: flex;
          &:nth-child(2n + 1) {
            background: linear-gradient(
              90deg,
              rgba(0, 150, 255, 0) 0%,
              rgba(0, 150, 255, 0.22) 100%
            );
          }
          & > div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap; /* 保证文本在一行内显示 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
          }
        }
      }
    }
    .title {
      span {
        margin-left: vw(30);
        font-weight: 800;
        font-size: vw(15);
        line-height: vh(26);
        text-align: center;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }
    }
  }
  .top-box {
    width: 100%;
    height: vh(500);
    .icon-box {
      font-weight: 400;
      font-size: vw(14);
      color: #ffffff;
      line-height: vh(16);
      flex-wrap: wrap;
      .item {
        cursor: pointer;
        width: 50%;
        margin-top: vh(40);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &:nth-child(3n) {
          margin-right: 0;
        }
        & > img {
          width: vw(54);
          height: auto;
        }
      }
    }
    .title {
      width: vw(260);
      height: vh(26);
      text-align: center;
      line-height: vh(26);
      margin-left: vw(32.5);
      font-size: vw(16);
      font-weight: 800;
      color: #fff;
      background-image: url('@/assets/images/title-1.png');
      background-size: 100% 100%;
    }
  }
</style>