voiceMate-web/src/views/voice/analyse/index.vue

<script setup>
import { analyseApi } from '@/api/voice/analyse';
import BaseLayoutViewport from '@/components/BaseLayout';
const total = ref(0);
const value1 = ref('');

const callRecordCountInfo = ref({});
const userTableData = ref([]);
const robotTableData = ref([]);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },{
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },{
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },{
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const formatNum = num => {
  return Number(num === null ? 0 : num.toFixed(2)) + '%';
}

onMounted(() => {
  analyseApi.getCallRecordCountInfo().then(({ data }) => {
    const {humanPercent, whiteListPercent, traditionPercent, aiPercent} = data;
    callRecordCountInfo.value = {
      ...data,
      humanPercent: formatNum(humanPercent),
      aiPercent: formatNum(aiPercent),
      traditionPercent: formatNum(traditionPercent),
      whiteListPercent: formatNum(whiteListPercent)
    };
  })

  analyseApi.getUserCallCount().then(({ data }) => {
    const statusEnum = {
      1: '置忙',
      2: '置闲',
      3: '通话中',
      4: '后处理',
      5: '拨号中'
    }
    userTableData.value = data.map(item => ({
      ...item,
      statusText: statusEnum[item.status]
    }));
  })

  analyseApi.getRobotCallCount().then(({ data }) => {
    robotTableData.value = data;
  })

})
</script>

<template>
  <div style="height: 100%;">
    <el-scrollbar >
      <div class="analyse-container space-y-[16px]">
        <div class="layout-card">
          <h4 class="title">统计分析</h4>
          <div class="analyse-main space-x-[16px]">
            <div class="analyse-item-box">
              <p class="card-title">累计电话量</p>
              <div class="pt-[38px]">
                <span class="num">{{ callRecordCountInfo.total }}</span>
              </div>
            </div>
            <div class="analyse-item-box">
              <p class="card-title">传统客服</p>
              <ul class="flex items-center justify-center pt-[28px]">
                <li>
                  <span class="text">电话量</span>
                  <span class="num">{{ callRecordCountInfo.humanTotal }}</span>
                </li>
                <li class="line"></li>
                <li>
                  <span class="text">总量占比</span>
                  <span class="num">{{ callRecordCountInfo.humanPercent }}</span>
                </li>
              </ul>
            </div>
            <div class="analyse-item-box right-box">
              <p class="card-title">AI客服</p>
              <div class="flex justify-around">
                <div>
                  <p class="card-sub-title">白名单直呼</p>
                  <ul class="flex items-center justify-center pt-[5px]">
                    <li>
                      <span class="text">电话量</span>
                      <span class="num">{{ callRecordCountInfo.whiteListTotal }}</span>
                    </li>
                    <li class="line"></li>
                    <li>
                      <span class="text">总量占比</span>
                      <span class="num">{{ callRecordCountInfo.whiteListPercent }}</span>
                    </li>
                  </ul>
                  <p class="count-num pt-[8px]">12345转入次数 <span class="text-[#65C734] font-bold">{{ callRecordCountInfo.specialCount }}</span></p>
                </div>
                <div>
                  <p class="card-sub-title">AI机器人</p>
                  <ul class="flex items-center justify-center pt-[5px]">
                    <li>
                      <span class="text">电话量</span>
                      <span class="num">{{ callRecordCountInfo.aiTotal }}</span>
                    </li>
                    <li class="line"></li>
                    <li>
                      <span class="text">总量占比</span>
                      <span class="num">{{ callRecordCountInfo.aiPercent }}</span>
                    </li>
                  </ul>
                  <p class="count-num pt-[8px]">转人工次数 <span class="text-[#65C734] font-bold">{{ callRecordCountInfo.transferCount }}</span></p>
                </div>
                <div>
                  <p class="card-sub-title">传统服务</p>
                  <ul class="flex items-center justify-center pt-[5px]">
                    <li>
                      <span class="text">电话量</span>
                      <span class="num">{{ callRecordCountInfo.traditionTotal }}</span>
                    </li>
                    <li class="line"></li>
                    <li>
                      <span class="text">总量占比</span>
                      <span class="num">{{ callRecordCountInfo.traditionPercent }}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div class="layout-card">
          <h4 class="title">人工客服状态</h4>
          <ul class="status-list">
            <li class="status-item">
              <span class="text">登录总数</span>
              <span class="num">{{ callRecordCountInfo.transferCount }}</span>
            </li>
            <li class="status-item">
              <span class="text">置闲</span>
              <span class="num">{{ callRecordCountInfo.idlePerson }}</span>
            </li>
            <li class="status-item">
              <span class="text">置忙</span>
              <span class="num">{{ callRecordCountInfo.busyPerson }}</span>
            </li>
            <li class="status-item">
              <span class="text">通话中</span>
              <span class="num">{{ callRecordCountInfo.onlinePerson }}</span>
            </li>
            <li class="status-item">
              <span class="text">拨号中</span>
              <span class="num">{{ callRecordCountInfo.dialPerson }}</span>
            </li>
            <li class="status-item">
              <span class="text">累计通话</span>
              <span class="num">{{ callRecordCountInfo.personCount }}</span>
            </li>
            <li class="status-item">
              <span class="text">累计通话时长</span>
              <span class="num">{{ callRecordCountInfo.personTotal }}</span>
            </li>
          </ul>
        </div>
  
        <div class="layout-card">
          <h4 class="title">机器人客服状态</h4>
          <ul class="status-list robot-list">
            <li class="status-item">
              <div class="status-item-inner">
                <span class="text">在线</span>
                <span class="num">{{ callRecordCountInfo.robotOnLineCount }}</span>
              </div>
            </li>
            <li class="status-item">
              <div class="status-item-inner">
                <span class="text">异常</span>
                <span class="num">{{ callRecordCountInfo.robotExceptionCount }}</span>
              </div>
            </li>
            <li class="status-item">
              <div class="status-item-inner">
                <span class="text">转人工</span>
                <span class="num">{{ callRecordCountInfo.robotTransfer }}</span>
                <span class="text-[14px]"> 次</span>
              </div>
            </li>
            <li class="status-item">
              <div class="status-item-inner">
                <span class="text">累计通话</span>
                <span class="num">{{ callRecordCountInfo.robotCount }}</span>
              </div>
            </li>
            <li class="status-item">
              <div class="status-item-inner">
                <span class="text">累计通话时长</span>
                <span class="num">{{ callRecordCountInfo.robotTotal }}</span>
                <span class="text-[14px]"> h</span>
              </div>
            </li>
          </ul>
        </div>
  
        <div class="layout-card">
          <h4 class="title">人工客服统计</h4>
          
          <el-table :data="userTableData" style="width: 100%" >
            <el-table-column prop="userId" label="客服编号" align="center" width="150" fixed/>
            <el-table-column prop="userName" label="姓名" align="center" />
            <el-table-column prop="status" label="当前状态" align="center" />
            <el-table-column prop="inTodayCount" label="今日呼入" align="center" />
            <el-table-column prop="inAllCount" label="累计呼入" align="center" />
            <el-table-column prop="outTodayCount" label="今日呼出" align="center" />
            <el-table-column prop="outAllCount" label="累计呼出" align="center" />
            <el-table-column prop="totalTimes" label="累计通话时长" align="center" />
          </el-table>
        </div>

        <div class="layout-card">
          <h4 class="title">机器人客服统计</h4>
          
          <el-table :data="robotTableData" style="width: 100%" >
            <el-table-column prop="userId" label="客服编号" align="center" width="150" fixed/>
            <el-table-column prop="userName" label="客服名称" align="center" />
            <el-table-column prop="inTodayCount" label="今日呼入" align="center" />
            <el-table-column prop="inAllCount" label="累计呼入" align="center" />
            <el-table-column prop="todayTransferCount" label="今日转人工" align="center" />
            <el-table-column prop="totalTransferCount" label="累计转人工" align="center" />
          </el-table>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.analyse-container {
  background: #f1f5fd;
  .layout-card {
    width: 100%;
    padding: 20px;
    border-radius: 8px;
    background: #fff;

  }

  .title {
    margin-bottom: 16px;
    color: #1D2129;
    font-size: 18px;
    font-weight: bold;
    line-height: 26px;
  }

  .analyse-main {
    display: flex;
    align-items: center;

    .analyse-item-box {
      &:nth-child(1) {
        flex: 1;
      }

      &:nth-child(2) {
        position: relative;
        flex: 2;

        &::before {
          content: ' ';
          position: absolute;
          width: 70px;
          height: 70px;
          top: 50%;
          left: -46px;
          transform: translate(0%, -20px);
          background: url('@/assets/images/notice/icon-before.svg');
        }

        &::after {
          content: ' ';
          position: absolute;
          width: 70px;
          height: 70px;
          top: 50%;
          right: -46px;
          transform: translate(0%, -20px);
          background: url('@/assets/images/notice/icon-after.svg');
        }
      }

      &:nth-child(3) {
        flex: 5;
      }

      height: 148px;
      padding-top: 11px;
      border-radius: 12px;
      border: 1px solid #E5E6EB;
      text-align: center;

      .card-title {
        font-size: 12px;
        font-weight: bold;
        line-height: 20px;
      }

      .card-sub-title {
        padding-top: 5px;
        font-size: 10px;
        line-height: 20px;
        color: #165DFF;
      }
    }

    .right-box {
      display: flex;
      justify-content: space-around;
      flex-flow: column;
      border: 0;
      background: linear-gradient(180deg, #EFF2FF 0%, #FFFFFF 100%);
    }
  }

  .status-list {
    display: grid;
    grid-template-columns: repeat(7, minmax(auto, 1fr));
    grid-gap: 18px;
    .status-item {
      display: flex;
      flex-flow: column;
      height: 78px;
      padding: 10px 18px;
      border-radius: 12px;
      background: #F7F8FA;
      .text {
        font-size: 12px;
        font-weight: bold;
      }
    }
  }

  .robot-list {
    .status-item {
      padding: 1px;
      background: linear-gradient(90deg,#165DFF 0%,#FFFFFF 59.35%,#FFFFFF 76.7%,#BED2FF 100%); 

      .status-item-inner {
        width: 100%;
        height: 100%;
        padding: 10px 18px;
        border-radius: 12px;
        background: linear-gradient(100deg, #F4F6FE 5.68%, #FFF 76.05%);
      }
    }
  }

  .text {
    display: block;
    font-size: 10px;
    line-height: 20px;
    text-align: left;
    color: #4E5969;
  }

  .num {
    font-family: D-DIN-PRO;
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
  }

  .count-num {
    color: #86909C;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
  }

  .line {
    width: 1px;
    height: 50px;
    margin: 0 20px;
    background: #E5E6EB;
  }
}
</style>