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

<script setup>
import { callApi } from '@/api/voice/call';
import SearchItemWrapper from '@/components/SearchItemWrapper';
import useTableHeight from '@/composables/useTableHeight';

const { proxy } = getCurrentInstance();
const { tableContainer, tableMaxHeight } = useTableHeight();

const dataPickerValue = ref([]);
const loading = ref(false);
const tableData = ref([]);
const total = ref(0);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})

const tableListData = computed(() => {
  const { pageNum, pageSize } = queryParams.value;
  return tableData.value.slice((pageNum-1)*pageSize,pageNum * pageSize) || []
})

// 清除检索条件
const handleCleanOptions = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  };
  total.value = 0;
  dataPickerValue.value = [];
  tableData.value = [];
}

const handleSearch = () => {
  if (dataPickerValue.value.length === 0) {
    return proxy.$modal.msgWarning("请先选择统计日期");
  }
  getList();
}

const getList = () => {

  const [timeBegin, timeEnd] = dataPickerValue.value || [];

  loading.value = true;

  callApi.getCallRecordCountPageList({...queryParams.value, timeBeginReq:timeBegin, timeEndReq: timeEnd}).then(({ rows, total:t }) => {

    tableData.value = rows.map(item => ({
      ...item,
    }));

    loading.value = false;
    total.value = t;
  })
};

onMounted(() => {})

</script>

<template>
  <div class="call-viewprot">
    <div class="search-card">
      <div class="grid grid-cols-4 gap-[24px]">
        <SearchItemWrapper label="统计日期">
          <el-date-picker v-model="dataPickerValue" type="daterange" range-separator="-" start-placeholder="起始日期"
            end-placeholder="结束日期" style="width: 100%;" :editable="false" value-format="YYYY-MM-DD"/>
        </SearchItemWrapper>
        <div class="flex items-center justify-start space-x-[20px]">
          <div class="custom-btn custom-btn_primary" @click="handleSearch">搜索</div>
          <div class="custom-btn custom-btn_default" @click="handleCleanOptions">重置</div>
        </div>
      </div>
    </div>
    <div class="table-card">
      <div style="height: 100%;" ref="tableContainer">
        <el-table :data="tableListData" style="width: 100%" :max-height="tableMaxHeight" v-loading="loading">
          <el-table-column prop="date" label="统计日期" align="center" width="130" fixed />
          <el-table-column prop="inTotal" label="呼入总量" align="center" min-width="120" />
          <el-table-column prop="successTotal" label="接通量" align="center" min-width="120" />
          <el-table-column prop="aiTotal" label="AI处理量" align="center" min-width="120" />
          <el-table-column prop="aiToHuman" label="AI转人工处理" align="center" min-width="120" />
          <el-table-column prop="humanAndTransferTotal" label="AI人工处理量(含转人工)" align="center" min-width="120">
            <template #header>
              <span>AI人工处理量<br>(含转人工)</span>
            </template>
            <template #default="scope">
              <span>{{ scope.row.humanAndTransferTotal }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="aiRate" label="AI处理率" align="center" min-width="120">
            <template #default="scope">
              {{ scope.row.aiRate }}%
            </template>
          </el-table-column>
          <el-table-column prop="successRate" label="接通率" align="center" min-width="120">
            <template #default="scope">
              {{ scope.row.successRate }}%
            </template>
          </el-table-column>

          <!-- <el-table-column prop="failTotal" label="未接通总量" align="center" min-width="120" />
          <el-table-column prop="robotHearTotal" label="机器人接听" align="center" min-width="120" />
          <el-table-column prop="transferTotal" label="机器人转人工" align="center" min-width="120" />
          <el-table-column prop="humanTotal" label="人工接听" align="center" min-width="120" />
          <el-table-column prop="robotHandleTotal" label="机器人处理量" align="center" min-width="120" />
          <el-table-column prop="humanHandleTotal" label="人工处理量" align="center" min-width="120"/> 
          <el-table-column prop="robotRate" label="机器人处理率" align="center" min-width="120">
            <template #default="scope">
              {{ scope.row.robotRate }}%
            </template>
          </el-table-column>
          <el-table-column prop="humanRate" label="人工处理率" align="center" min-width="">
            <template #default="scope">
              {{ scope.row.humanRate }}%
            </template>
          </el-table-column>
          <el-table-column prop="failRate" label="未接通率" align="center" width="140">
            <template #default="scope">
              {{ scope.row.failRate }}%
            </template>
          </el-table-column>
          <el-table-column prop="handle" label="操作" align="center" fixed="right" width="150">
            <template #default="scope">
              <div class="flex justify-center space-x-[20px]">
                <span class="text-[#165DFF] cursor-pointer" @click="jumpDetails(scope.row)">详情</span>
                <span class="text-[#165DFF] cursor-pointer" @click="handleDownload(scope.row)">语音下载</span>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
        <pagination v-show="total >= 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.call-viewprot {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: 28px 24px 18px 24px;
  border-radius: 8px;
  background: #fff;

  .custom-btn {
    word-break: keep-all;
  }

  .search-card {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #E5E6EB;
    overflow: hidden;
    flex-shrink: 0;
  }

  .table-card {
    height: 100%;
  }
}
</style>

<style lang="scss">
.voice-drawer {
  .el-drawer__header {
    margin-bottom: 0;
    color: #333;
    font-weight: bold;
  }
}
</style>