feat: 通话概况增加弹窗

src/views/voice/general/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { callApi } from '@/api/voice/call';
+import { analyseApi } from '@/api/voice/analyse';
 import SearchItemWrapper from '@/components/SearchItemWrapper';
 import useTableHeight from '@/composables/useTableHeight';
 
@@ -10,6 +11,8 @@ const dataPickerValue = ref([]);
 const loading = ref(false);
 const tableData = ref([]);
 const total = ref(0);
+const popoverTableData = ref([]);
+const exceptionNum = ref(0);
 
 const queryParams = ref({
   pageNum: 1,
@@ -39,6 +42,14 @@ const handleSearch = () => {
   getList();
 }
 
+const handleTablePopover = async ({ date, humanAndTransferTotal }) => {
+  const { data } = await analyseApi.getUserCallCount({date});
+  exceptionNum.value = data.reduce((accumulator, current) => {
+    return accumulator - current.inTodayCount;
+  }, humanAndTransferTotal);
+  popoverTableData.value = data;
+}
+
 const getList = () => {
 
   const [timeBegin, timeEnd] = dataPickerValue.value || [];
@@ -56,8 +67,6 @@ const getList = () => {
   })
 };
 
-onMounted(() => {})
-
 </script>
 
 <template>
@@ -81,15 +90,27 @@ onMounted(() => {})
           <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">
+          <!-- <el-table-column prop="aiToHuman" label="AI转人工处理" align="center" min-width="120" /> -->
+          <el-table-column prop="humanAndTransferTotal" label="AI人工处理量(含转人工)" align="center" min-width="150">
             <template #header>
-              <span>AI人工处理量<br>(含转人工)</span>
+              <span>人工处理量<br>(含转人工、白名单)</span>
             </template>
             <template #default="scope">
-              <span>{{ scope.row.humanAndTransferTotal }}</span>
+              <el-popover placement="right" :width="500" trigger="click">
+                <template #reference>
+                  <el-button text bg @click="handleTablePopover(scope.row)">{{ scope.row.humanAndTransferTotal }}</el-button>
+                </template>
+                <p class="pb-[15px] pt-[5px]">今日有 <span class="text-[red] font-bold">{{ exceptionNum }}</span> 个电话因人工坐席忙或用户主动挂断出现未接听情况。</p>
+                <el-table :data="popoverTableData" border>
+                  <el-table-column property="userName" label="姓名" />
+                  <el-table-column property="inTodayCount" label="今日呼入" />
+                  <el-table-column property="inTodaySuccessCount" label="已接听" />
+                  <el-table-column property="inTodayFailCount" label="未接听" />
+                </el-table>
+              </el-popover>
             </template>
           </el-table-column>
+          <el-table-column prop="outTotal" label="呼出量" align="center" min-width="120" />
           <el-table-column prop="aiRate" label="AI处理率" align="center" min-width="120">
             <template #default="scope">
               {{ scope.row.aiRate }}%