|
|
@@ -0,0 +1,186 @@
|
|
|
+<template>
|
|
|
+ <div class="statistics-call-efficient-detail-container layout-padding">
|
|
|
+ <div class="layout-padding-auto layout-padding-view pd20">
|
|
|
+ <vxe-grid v-bind="gridOptions">
|
|
|
+ <template #form>
|
|
|
+ <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline :disabled="gridOptions.loading">
|
|
|
+ <el-form-item prop="crTime">
|
|
|
+ <statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
|
|
|
+ <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
|
|
|
+ <SvgIcon name="ele-Refresh" class="mr5" />重置
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ <template #toolbar_buttons>
|
|
|
+ <el-popover :width="500" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <el-button type="primary" title="字段说明"><SvgIcon name="ele-QuestionFilled" class="mr5" />字段说明</el-button>
|
|
|
+ </template>
|
|
|
+ <el-descriptions title="" :column="1" border style="max-height: 400px; overflow: auto">
|
|
|
+ <el-descriptions-item label="高效办成一件事总量">进入IVR以后，已按了3键的所有电话量</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="高效办成一件事接通量">进入高效办成一件事道后，话务人员接通的所有电话量</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="高效办成一件事挂断总量">已按了3键，但是在话务人员接通前挂断的电话量</el-descriptions-item>
|
|
|
+
|
|
|
+ <el-descriptions-item label="高效办成一件事队列挂断">已进入高效办成一件事通道，在队列中挂断的电话量</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="高效办成一件事等待挂断">已进入高效办成一件事务话机，等待话务人员接听过程中挂断的电话量</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="个人服务接通率"> 高效办成一件事接通量/高效办成一件事呼入总量 </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </vxe-grid>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="tsx" name="statisticsCallEfficientDetail">
|
|
|
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
|
|
|
+import { FormInstance } from 'element-plus';
|
|
|
+import { defaultDate } from '@/utils/constants';
|
|
|
+import Other from '@/utils/other';
|
|
|
+import { callCompany, callCompanyExport } from '@/api/statistics/call';
|
|
|
+import XEUtils from 'xe-utils';
|
|
|
+
|
|
|
+const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
|
|
|
+// 定义变量内容
|
|
|
+const ruleFormRef = ref<RefType>(); // 表单ref
|
|
|
+const state = reactive<any>({
|
|
|
+ queryParams: {
|
|
|
+ // 查询条件
|
|
|
+ crTime: defaultDate,
|
|
|
+ },
|
|
|
+ tableData: [], //表单
|
|
|
+ loading: false, // 加载
|
|
|
+ total: 0, // 总数
|
|
|
+ callForwardingSource: [],
|
|
|
+ totalCount: {},
|
|
|
+});
|
|
|
+
|
|
|
+const requestParams = ref<EmptyObjectType>({});
|
|
|
+const gridOptions = reactive<any>({
|
|
|
+ loading: false,
|
|
|
+ border: true,
|
|
|
+ showOverflow: true,
|
|
|
+ columnConfig: {
|
|
|
+ resizable: true,
|
|
|
+ },
|
|
|
+ scrollY: {
|
|
|
+ enabled: true,
|
|
|
+ gt: 100,
|
|
|
+ },
|
|
|
+ toolbarConfig: {
|
|
|
+ zoom: true,
|
|
|
+ custom: true,
|
|
|
+ refresh: {
|
|
|
+ queryMethod: () => {
|
|
|
+ handleQuery();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tools: [{ toolRender: { name: 'exportAll' } }],
|
|
|
+ slots: {
|
|
|
+ buttons: 'toolbar_buttons',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ customConfig: {
|
|
|
+ storage: true,
|
|
|
+ },
|
|
|
+ id: 'statisticsCallEfficientDetail',
|
|
|
+ rowConfig: { isHover: true, height: 30, isCurrent: true, useKey: true },
|
|
|
+ height: 'auto',
|
|
|
+ align: 'center',
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ field: 'date',
|
|
|
+ title: '日期',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'enterpriseCallInCount',
|
|
|
+ title: '企业服务呼入总量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'enterpriseCallInPutthroughCount',
|
|
|
+ title: '企业服务接通量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'enterpriseRingOffCount',
|
|
|
+ title: '企业服务挂断总量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '挂断类型',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ field: 'enterpriseQueueOffCount',
|
|
|
+ title: '企业服务队列挂断',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'enterpriseWaitOffCount',
|
|
|
+ title: '企业服务等待挂断',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'enterpriseCallPutthorughRateText',
|
|
|
+ title: '企业服务接通率',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [],
|
|
|
+ params: {
|
|
|
+ exportMethod: callCompanyExport,
|
|
|
+ exportParams: requestParams,
|
|
|
+ },
|
|
|
+ sortConfig: {
|
|
|
+ remote: true,
|
|
|
+ },
|
|
|
+ showFooter: true,
|
|
|
+ footerMethod: ({ columns, data }) => {
|
|
|
+ return [
|
|
|
+ columns.map((column: any, columnIndex: number) => {
|
|
|
+ if (columnIndex === 0) {
|
|
|
+ return '合计';
|
|
|
+ }
|
|
|
+ // 后端返回了数据集合 state.totalCount 所以不需要计算 直接进行赋值
|
|
|
+ return XEUtils.get(state.totalCount, column.property);
|
|
|
+ }),
|
|
|
+ ];
|
|
|
+ },
|
|
|
+});
|
|
|
+/** 搜索按钮操作 */
|
|
|
+const handleQuery = () => {
|
|
|
+ // state.queryParams.PageIndex = 1;
|
|
|
+ queryList();
|
|
|
+};
|
|
|
+/** 获取列表 */
|
|
|
+const queryList = async () => {
|
|
|
+ state.loading = true;
|
|
|
+ gridOptions.loading = true;
|
|
|
+ try {
|
|
|
+ requestParams.value = Other.deepClone(state.queryParams);
|
|
|
+ requestParams.value.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
|
|
|
+ requestParams.value.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
|
|
|
+ Reflect.deleteProperty(requestParams.value, 'crTime');
|
|
|
+ const { result } = await callCompany(requestParams.value);
|
|
|
+ state.tableData = result.list ?? [];
|
|
|
+ state.totalCount = result.total;
|
|
|
+ gridOptions.data = state.tableData;
|
|
|
+ state.loading = false;
|
|
|
+ gridOptions.loading = false;
|
|
|
+ } catch (e) {
|
|
|
+ state.loading = false;
|
|
|
+ gridOptions.loading = false;
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+};
|
|
|
+/** 重置按钮操作 */
|
|
|
+const statisticalTimeRef = ref<RefType>();
|
|
|
+const resetQuery = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
+ statisticalTimeRef.value.reset();
|
|
|
+ queryList();
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ queryList();
|
|
|
+});
|
|
|
+</script>
|
zhangchong