|
@@ -1,19 +1,19 @@
|
|
|
<template>
|
|
|
<div class="dataShare-timeliness-container layout-pd">
|
|
|
- <!-- 搜索 -->
|
|
|
<el-card shadow="never">
|
|
|
<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
|
|
|
<el-form-item label="时间段" prop="crTime">
|
|
|
<el-date-picker
|
|
|
v-model="state.queryParams.crTime"
|
|
|
- type="datetimerange"
|
|
|
+ type="daterange"
|
|
|
unlink-panels
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始时间"
|
|
|
end-placeholder="结束时间"
|
|
|
:shortcuts="shortcuts"
|
|
|
@change="handleQuery"
|
|
|
- value-format="YYYY-MM-DD[T]HH:mm:ss"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ :clearable="false"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label-width="0">
|
|
@@ -24,27 +24,252 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
- <el-card shadow="never">
|
|
|
- <ProTable
|
|
|
- ref="proTableRef"
|
|
|
- :columns="columns"
|
|
|
- :data="state.tableData"
|
|
|
- @updateTable="queryList"
|
|
|
- :loading="state.loading"
|
|
|
- :total="state.total"
|
|
|
- v-model:page-index="state.queryParams.PageIndex"
|
|
|
- v-model:page-size="state.queryParams.PageSize"
|
|
|
- border
|
|
|
- >
|
|
|
- </ProTable>
|
|
|
- </el-card>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.orderCountNum">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">工单总量</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.handleEndOrderNum">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">办结件数</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.handleEndOrderOnTime">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">按时办结数量</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.orderTimely">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">工单及时上传</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.orderNotTimely">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">工单未及时上传</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.orderTimelinessRate">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">工单及时率</span>
|
|
|
+ </template>
|
|
|
+ <template #suffix>%</template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.handleEndOrderRate">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">办结率</span>
|
|
|
+ </template>
|
|
|
+ <template #suffix>%</template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.handleEndOrderOnTimeRate">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">按时办结率</span>
|
|
|
+ </template>
|
|
|
+ <template #suffix>%</template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.telCountNum">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">电话总量</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col><el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.telConnectCountNum">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">电话接通数</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col><el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.telNotConnectCountNum">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">电话未接通数</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col><el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.telTimely">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">电话及时上传</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.telNotTimely">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">电话未及时上传</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.telTimelinessRate">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">电话及时率</span>
|
|
|
+ </template>
|
|
|
+ <template #suffix>%</template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.telConnectRate">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">电话率</span>
|
|
|
+ </template>
|
|
|
+ <template #suffix>%</template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.rgdhOrderCount">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">电话来源工单数量</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.containTel">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">匹配通话记录数</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.notContainTel">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">未匹配通话记录数</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.matchingRate">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">匹配率</span>
|
|
|
+ </template>
|
|
|
+ <template #suffix>%</template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.visitCountNum">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">回访总量</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.satisfactionCountNum">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">满意总量</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.notSatisfiedCountNum">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">不满意总量</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.satisfactionRate">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">满意率</span>
|
|
|
+ </template>
|
|
|
+ <template #suffix>%</template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col><el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.notSatisfiedRate">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">不满意率</span>
|
|
|
+ </template>
|
|
|
+ <template #suffix>%</template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.knowledgeCount">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">知识库总量</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
|
|
+ <el-card shadow="never" v-loading="state.loading" class="statistics-item">
|
|
|
+ <el-statistic :value="state.data.updateKnowledgeCount">
|
|
|
+ <template #title>
|
|
|
+ <span class="color-info font14">更新知识库量</span>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="tsx" name="dataShareTimeliness">
|
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
|
import { FormInstance } from 'element-plus';
|
|
|
-import { callHotline } from '@/api/statistics/call';
|
|
|
-import { defaultDate, defaultDateTime, shortcuts } from "@/utils/constants";
|
|
|
+import { defaultDate, shortcuts } from "@/utils/constants";
|
|
|
import { formatDate } from "@/utils/formatTime";
|
|
|
import { getTimeRate } from "@/api/dataShare";
|
|
|
const proTableRef = ref<RefType>(); // 表格ref
|
|
@@ -112,13 +337,37 @@ const columns = ref<any[]>([
|
|
|
const ruleFormRef = ref<RefType>(); // 表单ref
|
|
|
const state = reactive({
|
|
|
queryParams: {
|
|
|
- PageIndex: 1,
|
|
|
- PageSize: 10,
|
|
|
- crTime: defaultDateTime,
|
|
|
+ crTime: defaultDate,
|
|
|
},
|
|
|
- tableData: [], //表单
|
|
|
loading: false, // 加载
|
|
|
- total: 0, // 总数
|
|
|
+ data:{
|
|
|
+ orderCountNum:0, // 工单总量
|
|
|
+ handleEndOrderNum:0 , // 办结件数
|
|
|
+ handleEndOrderOnTime:0, // 按时办结数量
|
|
|
+ orderTimely:0, // 按时办结率
|
|
|
+ orderNotTimely:0, // 不按时办结数量
|
|
|
+ orderTimelinessRate:0, // 按时办结率
|
|
|
+ handleEndOrderRate:0, // 办结率
|
|
|
+ handleEndOrderOnTimeRate:0, // 按时办结率
|
|
|
+ telCountNum:0, // 电话总量
|
|
|
+ telConnectCountNum:0, // 电话接通数
|
|
|
+ telNotConnectCountNum:0, // 电话未接通数
|
|
|
+ telTimely:0, // 按时接通率
|
|
|
+ telNotTimely:0, // 不按时接通数量
|
|
|
+ telTimelinessRate:0, // 按时接通率
|
|
|
+ telConnectRate:0, // 接通率
|
|
|
+ rgdhOrderCount:0, // 电话来源工单数量
|
|
|
+ containTel:0, // 包含电话数量
|
|
|
+ notContainTel:0, // 不包含电话数量
|
|
|
+ matchingRate:0, // 匹配率
|
|
|
+ visitCountNum:0, // 回访总量
|
|
|
+ satisfactionCountNum:0, // 满意总量
|
|
|
+ notSatisfiedCountNum:0, // 不满意总量
|
|
|
+ satisfactionRate:0, // 满意率
|
|
|
+ notSatisfactionRate:0, // 不满意率
|
|
|
+ knowledgeCount:0, // 知识库总量
|
|
|
+ updateKnowledgeCount:0, // 更新知识库量
|
|
|
+ }
|
|
|
});
|
|
|
/** 搜索按钮操作 */
|
|
|
const handleQuery = () => {
|
|
@@ -136,14 +385,11 @@ const queryList = () => {
|
|
|
}
|
|
|
const request = {
|
|
|
StartDate,
|
|
|
- EndDate,
|
|
|
- PageIndex: state.queryParams.PageIndex,
|
|
|
- PageSize: state.queryParams.PageSize,
|
|
|
+ EndDate
|
|
|
};
|
|
|
getTimeRate(request)
|
|
|
.then((res: any) => {
|
|
|
- state.tableData = res.result?.items ?? [];
|
|
|
- state.total = res.result?.total ?? 0;
|
|
|
+ state.data = res.result ?? {};
|
|
|
state.loading = false;
|
|
|
})
|
|
|
.catch(() => {
|
|
@@ -160,3 +406,9 @@ onMounted(() => {
|
|
|
queryList();
|
|
|
});
|
|
|
</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.statistics-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|