hotline-web/src/views/dataShare/newTimeliness.vue

<template>
	<div class="dataShare-new-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="daterange"
						unlink-panels
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:shortcuts="shortcuts"
						@change="handleQuery"
						value-format="YYYY-MM-DD"
						:clearable="false"
					/>
				</el-form-item>
				<el-form-item label-width="0">
					<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>
		</el-card>
		<el-row :gutter="20">
			<el-divider><el-text tag="b" class="font16">工单</el-text></el-divider>
			<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.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-divider><el-text tag="b" class="font16">工单及时率</el-text> </el-divider>
			<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-divider><el-text tag="b" class="font16">电话数量</el-text></el-divider>
			<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.telConnectRate">
						<template #title>
							<span class="color-info font14">电话接通率</span>
						</template>
						<template #suffix>%</template>
					</el-statistic>
				</el-card>
			</el-col>
			<el-divider><el-text tag="b" class="font16">电话及时率</el-text></el-divider>
			<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-divider><el-text tag="b" class="font16">匹配率</el-text></el-divider>
			<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-divider><el-text tag="b" class="font16">回访</el-text></el-divider>
			<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-divider><el-text tag="b" class="font16">知识库</el-text></el-divider>
			<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="dataShareNewTimeliness">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { defaultDate, shortcuts } from '@/utils/constants';
import { formatDate } from '@/utils/formatTime';
import { getTimeRateNew } from '@/api/dataShare';
import Other from '@/utils/other';
const proTableRef = ref<RefType>(); // 表格ref
// 表格配置项
const columns = ref<any[]>([
	{ prop: 'provinceNo', label: '省工单编号', align: 'center' },
	{
		prop: 'firstTime',
		label: '初次推送时间',
		align: 'center',
		width: 170,
		render: (scope) => {
			return <span>{formatDate(scope.row.firstTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		prop: 'lastTime',
		label: '最近一次推送时间',
		align: 'center',
		width: 170,
		render: (scope) => {
			return <span>{formatDate(scope.row.lastTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		prop: 'sendTimes',
		label: '推送次数',
		align: 'center',
	},
	{
		prop: 'isSuccess',
		label: '推送状态',
		align: 'center',
		render: (scope) => {
			return <span>{scope.row.isSuccess ? '成功' : '失败'}</span>;
		},
	},
	{
		prop: 'platformSource',
		label: '平台名称',
		align: 'center',
	},
	{ prop: 'taskType', label: '任务类型', align: 'center' },
	{ prop: 'request', label: '请求参数', align: 'center' },
	{
		prop: 'generationTime',
		label: '生成时间',
		align: 'center',
		width: 170,
		render: (scope) => {
			return <span>{formatDate(scope.row.generationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		prop: 'creationTime',
		label: '创建时间',
		align: 'center',
		width: 170,
		render: (scope) => {
			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
]);
// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive<any>({
	queryParams: {
		crTime: defaultDate,
		StartDate: null,
		EndDate: null,
	},
	loading: false, // 加载
	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 = () => {
	// state.queryParams.PageIndex = 1;
	queryList();
};
/** 获取列表 */
const queryList = () => {
	state.loading = true;
	let request = Other.deepClone(state.queryParams);
	request.StartDate = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
	request.EndDate = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
	Reflect.deleteProperty(request, 'crTime');
	getTimeRateNew(request)
		.then((res: any) => {
			state.data = res.result ?? {};
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
};
onMounted(() => {
	queryList();
});
</script>
<style scoped lang="scss">
.dataShare-new-timeliness-container {
	.el-divider--horizontal {
		margin: 24px 0;
	}
	.statistics-item {
		margin-bottom: 10px;
	}
}
</style>