|
@@ -1,15 +1,22 @@
|
|
|
<template>
|
|
|
<div class="statistics-call-seats-date-container layout-padding">
|
|
|
<div class="layout-padding-auto layout-padding-view pd20">
|
|
|
- <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
|
|
|
- <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>
|
|
|
+ <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>
|
|
@@ -25,91 +32,8 @@
|
|
|
<el-descriptions-item label="呼出未接通">呼出未接通的总量 </el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</el-popover>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <vxe-toolbar
|
|
|
- ref="toolbarRef"
|
|
|
- :loading="state.loading"
|
|
|
- custom
|
|
|
- :refresh="{
|
|
|
- queryMethod: handleQuery
|
|
|
- }"
|
|
|
- :tools="[{ toolRender: { name: 'exportAll' } }]"
|
|
|
- >
|
|
|
- </vxe-toolbar>
|
|
|
- <div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
|
|
|
- <vxe-table
|
|
|
- border
|
|
|
- :loading="state.loading"
|
|
|
- :data="state.tableData"
|
|
|
- :column-config="{ resizable: true }"
|
|
|
- :row-config="{ isCurrent: true, isHover: true, height: 30, keyField: 'id',useKey: true }"
|
|
|
- ref="tableRef"
|
|
|
- height="auto"
|
|
|
- auto-resize
|
|
|
- show-overflow
|
|
|
- :scrollY="{ enabled: true, gt: 100 }"
|
|
|
- id="statisticsCallTalkTime"
|
|
|
- :custom-config="{ storage: true }"
|
|
|
- showHeaderOverflow
|
|
|
- :params="{ exportMethod: callDateSimpleExport, exportParams: requestParams }"
|
|
|
- show-footer
|
|
|
- :footer-method="footerMethod"
|
|
|
- >
|
|
|
- <vxe-column field="date" title="日期"></vxe-column>
|
|
|
- <vxe-column field="inTotal" title="呼入总量">
|
|
|
- <template #default="scope">
|
|
|
- <el-button type="primary" link @click="linkDetail(scope)">
|
|
|
- {{scope.row.inTotal}}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- <vxe-column field="inConnectionRate" title="接通率">
|
|
|
- </vxe-column>
|
|
|
- <vxe-column field="inConnectionQuantity" title="呼入接通">
|
|
|
- <template #default="scope">
|
|
|
- <el-button type="primary" link @click="linkDetail(scope)">
|
|
|
- {{scope.row.inConnectionQuantity}}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- <vxe-column field="inNotAnswered" title="挂机量">
|
|
|
- <template #default="scope">
|
|
|
- <el-button type="primary" link @click="linkDetail(scope)">
|
|
|
- {{scope.row.inNotAnswered}}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- <vxe-column field="notAcceptedHang" title="呼入队列挂断">
|
|
|
- <template #default="scope">
|
|
|
- <el-button type="primary" link @click="linkDetail(scope)">
|
|
|
- {{scope.row.notAcceptedHang}}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- <vxe-column field="ivrByeCount" title="呼入IVR挂断">
|
|
|
- <template #default="scope">
|
|
|
- <el-button type="primary" link @click="linkDetail(scope)">
|
|
|
- {{scope.row.ivrByeCount}}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- <vxe-column field="outConnectionQuantity" title="呼出接通">
|
|
|
- <template #default="scope">
|
|
|
- <el-button type="primary" link @click="linkDetail(scope)">
|
|
|
- {{scope.row.outConnectionQuantity}}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- <vxe-column field="outNotAnswered" title="呼出未接通">
|
|
|
- <template #default="scope">
|
|
|
- <el-button type="primary" link @click="linkDetail(scope)">
|
|
|
- {{scope.row.outNotAnswered}}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- </vxe-table>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ </vxe-grid>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -137,15 +61,169 @@ const state = reactive<any>({
|
|
|
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: 'statisticsCallSeatsDate',
|
|
|
+ rowConfig: { isHover: true, height: 30, isCurrent: true, useKey: true },
|
|
|
+ height: 'auto',
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ field: 'date',
|
|
|
+ title: '日期',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'inTotal',
|
|
|
+ title: '呼入总量',
|
|
|
+ slots:{
|
|
|
+ default (scope:any) {
|
|
|
+ return (
|
|
|
+ <el-button type="primary" onClick={() => linkDetail(scope)} link>
|
|
|
+ {scope.row.inTotal}
|
|
|
+ </el-button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'inConnectionRate',
|
|
|
+ title: '接通率',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'inConnectionQuantity',
|
|
|
+ title: '呼入接通',
|
|
|
+ slots:{
|
|
|
+ default (scope:any) {
|
|
|
+ return (
|
|
|
+ <el-button type="primary" onClick={() => linkDetail(scope)} link>
|
|
|
+ {scope.row.inConnectionQuantity}
|
|
|
+ </el-button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'inNotAnswered',
|
|
|
+ title: '挂机量',
|
|
|
+ slots:{
|
|
|
+ default (scope:any) {
|
|
|
+ return (
|
|
|
+ <el-button type="primary" onClick={() => linkDetail(scope)} link>
|
|
|
+ {scope.row.inNotAnswered}
|
|
|
+ </el-button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'notAcceptedHang',
|
|
|
+ title: '呼入队列挂断',
|
|
|
+ slots:{
|
|
|
+ default (scope:any) {
|
|
|
+ return (
|
|
|
+ <el-button type="primary" onClick={() => linkDetail(scope)} link>
|
|
|
+ {scope.row.notAcceptedHang}
|
|
|
+ </el-button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'ivrByeCount',
|
|
|
+ title: '呼入IVR挂断',
|
|
|
+ slots:{
|
|
|
+ default (scope:any) {
|
|
|
+ return (
|
|
|
+ <el-button type="primary" onClick={() => linkDetail(scope)} link>
|
|
|
+ {scope.row.ivrByeCount}
|
|
|
+ </el-button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'outConnectionQuantity',
|
|
|
+ title: '呼出接通',
|
|
|
+ slots:{
|
|
|
+ default (scope:any) {
|
|
|
+ return (
|
|
|
+ <el-button type="primary" onClick={() => linkDetail(scope)} link>
|
|
|
+ {scope.row.outConnectionQuantity}
|
|
|
+ </el-button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'outNotAnswered',
|
|
|
+ title: '呼出未接通',
|
|
|
+ slots:{
|
|
|
+ default (scope:any) {
|
|
|
+ return (
|
|
|
+ <el-button type="primary" onClick={() => linkDetail(scope)} link>
|
|
|
+ {scope.row.outNotAnswered}
|
|
|
+ </el-button>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [],
|
|
|
+ params: {
|
|
|
+ exportMethod: callDateSimpleExport,
|
|
|
+ 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 requestParams = ref<EmptyObjectType>({});
|
|
|
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];
|
|
@@ -154,9 +232,12 @@ const queryList = async () => {
|
|
|
const { result } = await callDateSimple(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);
|
|
|
}
|
|
|
};
|
|
@@ -180,24 +261,7 @@ const linkDetail = (scope: any) => {
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
-// 计算合计
|
|
|
-const footerMethod = ({ columns, data }) => {
|
|
|
- return [
|
|
|
- columns.map((column: any, columnIndex: number) => {
|
|
|
- if (columnIndex === 0) {
|
|
|
- return '合计';
|
|
|
- }
|
|
|
- // 后端返回了数据集合 state.totalCount 所以不需要计算 直接进行赋值
|
|
|
- return XEUtils.get(state.totalCount, column.property);
|
|
|
- }),
|
|
|
- ];
|
|
|
-};
|
|
|
-const toolbarRef = ref<RefType>();
|
|
|
-const tableRef = ref<RefType>();
|
|
|
onMounted(() => {
|
|
|
queryList();
|
|
|
- if (tableRef.value && toolbarRef.value) {
|
|
|
- tableRef.value.connect(toolbarRef.value);
|
|
|
- }
|
|
|
});
|
|
|
</script>
|