hotline-web/src/views/judicial/statistics/satisfaction.vue

<template>
	<div class="judicial-statistics-satisfaction-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="类型" prop="TypeId">
					<el-select v-model="state.queryParams.TypeId" placeholder="类型" @change="handleQuery">
						<el-option label="办件结果" value="1" />
						<el-option label="办件态度" value="2" />
					</el-select>
				</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>
		</el-card>
		<el-card shadow="never">
			<ProTable
				ref="proTableRef"
				:columns="columns"
				:data="state.tableData"
				@updateTable="queryList"
				:loading="state.loading"
				show-summary
				border
				row-key="orgCode"
				:pagination="false"
				:summary-method="getSummaries"
			>
				<template #orgName="{ row }">
					<el-button link type="primary" @click="onDetailOrg(row)" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
						row.orgName
					}}</el-button>
					<span v-else>{{ row.orgName }}</span>
				</template>
				<template #verySatisfiedCount="{ row }">
					<el-button
						link
						type="primary"
						@click="onDetail(row.verySatisfiedKey, row, '非常满意')"
						v-if="!['市直合计', '区县合计'].includes(row.orgName)"
						>{{ row.verySatisfiedCount }}</el-button
					>
					<span v-else>{{ row.verySatisfiedCount }}</span>
				</template>
				<template #satisfiedCount="{ row }">
					<el-button link type="primary" @click="onDetail(row.satisfiedKey, row, '满意')" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
						row.satisfiedCount
					}}</el-button>
					<span v-else>{{ row.satisfiedCount }}</span>
				</template>
				<template #regardedAsSatisfiedCount="{ row }">
					<el-button
						link
						type="primary"
						@click="onDetail(row.regardedAsSatisfiedKey, row, '视为满意')"
						v-if="!['市直合计', '区县合计'].includes(row.orgName)"
						>{{ row.regardedAsSatisfiedCount }}</el-button
					>
					<span v-else>{{ row.regardedAsSatisfiedCount }}</span>
				</template>
				<template #defaultSatisfiedCount="{ row }">
					<el-button
						link
						type="primary"
						@click="onDetail(row.defaultSatisfiedKey, row, '默认满意')"
						v-if="!['市直合计', '区县合计'].includes(row.orgName)"
						>{{ row.defaultSatisfiedCount }}</el-button
					>
					<span v-else>{{ row.defaultSatisfiedCount }}</span>
				</template>
				<template #noSatisfiedCount="{ row }">
					<el-button
						link
						type="primary"
						@click="onDetail(row.noSatisfiedKey, row, '不满意')"
						v-if="!['市直合计', '区县合计'].includes(row.orgName)"
						>{{ row.noSatisfiedCount }}</el-button
					>
					<span v-else>{{ row.noSatisfiedCount }}</span>
				</template>
				<template #noEvaluateCount="{ row }">
					<el-button
						link
						type="primary"
						@click="onDetail(row.noEvaluateKey, row, '未作评价')"
						v-if="!['市直合计', '区县合计'].includes(row.orgName)"
						>{{ row.noEvaluateCount }}</el-button
					>
					<span v-else>{{ row.noEvaluateCount }}</span>
				</template>
				<template #noPutThroughCount="{ row }">
					<el-button
						link
						type="primary"
						@click="onDetail(row.noPutThroughKey, row, '未接通')"
						v-if="!['市直合计', '区县合计'].includes(row.orgName)"
						>{{ row.noPutThroughCount }}</el-button
					>
					<span v-else>{{ row.noPutThroughCount }}</span>
				</template>
			</ProTable>
		</el-card>
	</div>
</template>
<script setup lang="tsx" name="judicialStatisticsSatisfaction">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { shortcuts } from '@/utils/constants';
import dayjs from 'dayjs';
import { departmentSatisfaction } from '@/api/judicial';
import { useRouter } from 'vue-router';
// 定义变量内容

const columns = ref<any>([
	{ type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
	{ prop: 'orgName', label: '部门名称', minWidth: 200 },
	{ prop: 'orgTypeText', label: '部门类别', minWidth: 120 },
	{ prop: 'totalSumCount', label: '小计' },
	{
		prop: 'totalSumRate',
		label: '总满意率',
		minWidth: 120,
		render: ({ row }) => {
			return `${row.totalSumRate}%`;
		},
	},
	{ prop: 'verySatisfiedCount', label: '非常满意', minWidth: 120 },
	{
		prop: 'verySatisfiedRate',
		label: '非常满意率',
		minWidth: 120,
		render: ({ row }) => {
			return `${row.verySatisfiedRate}%`;
		},
	},
	{ prop: 'satisfiedCount', label: '满意', minWidth: 120 },
	{
		prop: 'satisfiedRate',
		label: '满意率',
		minWidth: 120,
		render: ({ row }) => {
			return `${row.satisfiedRate}%`;
		},
	},
	{ prop: 'regardedAsSatisfiedCount', label: '视为满意', minWidth: 120 },
	{
		prop: 'regardedAsSatisfiedRate',
		label: '视为满意率',
		minWidth: 120,
		render: ({ row }) => {
			return `${row.regardedAsSatisfiedRate}%`;
		},
	},
	{ prop: 'defaultSatisfiedCount', label: '默认满意', minWidth: 120 },
	{
		prop: 'defaultSatisfiedRate',
		label: '默认满意率',
		minWidth: 120,
		render: ({ row }) => {
			return `${row.defaultSatisfiedRate}%`;
		},
	},
	{ prop: 'noSatisfiedCount', label: '不满意', minWidth: 120 },
	{
		prop: 'noSatisfiedRate',
		label: '不满意率',
		minWidth: 120,
		render: ({ row }) => {
			return `${row.noSatisfiedRate}%`;
		},
	},
	{ prop: 'noEvaluateCount', label: '未作评价', minWidth: 120 },
	{
		prop: 'noEvaluateRate',
		label: '未作评价率',
		minWidth: 120,
		render: ({ row }) => {
			return `${row.noEvaluateRate}%`;
		},
	},
	{ prop: 'noPutThroughCount', label: '未接通', minWidth: 120 },
	{
		prop: 'noPutThroughRate',
		label: '未接通率',
		minWidth: 120,
		render: ({ row }) => {
			return `${row.noPutThroughRate}%`;
		},
	},
]);
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive({
	queryParams: {
		// 查询条件
		crTime: [dayjs().startOf('day').format('YYYY-MM-DD'), dayjs().endOf('day').format('YYYY-MM-DD')], // 时间默认今天开始到今天结束
		TypeId: '1',
	},
	tableData: [],
	loading: false, // 加载
	total: 0, // 总数
	totalCount: {},
});
/** 搜索按钮操作 */
const handleQuery = () => {
	// state.queryParams.PageIndex = 1;
	queryList();
};
/** 获取列表 */
const queryList = () => {
	state.loading = true;
	let StartDate = null;
	let EndDate = null;
	if (state.queryParams?.crTime) {
		StartDate = state.queryParams?.crTime[0];
		EndDate = state.queryParams?.crTime[1];
	}
	const request = {
		StartDate,
		EndDate,
		TypeId: '1',
	};
	departmentSatisfaction(request)
		.then((res: any) => {
			state.tableData = res.result?.dataList ?? [];
			/*		if (res.result.dataList.length) {
				state.tableData.push(res.result.citySumModel);
				state.tableData.push(res.result.countySumModel);
			}*/
			state.totalCount = res.result.sumModel;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
};
// 合计
const getSummaries = (param: any) => {
	const { columns } = param;
	const sums: string[] = [];
	columns.forEach((column: { property: string }, index: number) => {
		if (index === 0) {
			sums[index] = '合计';
			return;
		}
		switch (column.property) {
			case 'totalSumCount':
				sums[index] = state.totalCount?.totalSumCount;
				break;
			case 'totalSumRate':
				sums[index] = `${state.totalCount?.totalSumRate}%`;
				break;
			case 'verySatisfiedCount':
				sums[index] = state.totalCount?.verySatisfiedCount;
				break;
			case 'verySatisfiedRate':
				sums[index] = `${state.totalCount?.verySatisfiedRate}%`;
				break;
			case 'satisfiedCount':
				sums[index] = state.totalCount?.satisfiedCount;
				break;
			case 'satisfiedRate':
				sums[index] = `${state.totalCount?.satisfiedRate}%`;
				break;
			case 'regardedAsSatisfiedCount':
				sums[index] = state.totalCount?.regardedAsSatisfiedCount;
				break;
			case 'regardedAsSatisfiedRate':
				sums[index] = `${state.totalCount?.regardedAsSatisfiedRate}%`;
				break;
			case 'defaultSatisfiedCount':
				sums[index] = state.totalCount?.defaultSatisfiedCount;
				break;
			case 'defaultSatisfiedRate':
				sums[index] = `${state.totalCount?.defaultSatisfiedRate}%`;
				break;
			case 'noSatisfiedCount':
				sums[index] = state.totalCount?.noSatisfiedCount;
				break;
			case 'noSatisfiedRate':
				sums[index] = `${state.totalCount?.noSatisfiedRate}%`;
				break;
			case 'noEvaluateCount':
				sums[index] = state.totalCount?.noEvaluateCount;
				break;
			case 'noEvaluateRate':
				sums[index] = `${state.totalCount?.noEvaluateRate}%`;
				break;
			case 'noPutThroughCount':
				sums[index] = state.totalCount?.noPutThroughCount;
				break;
			case 'noPutThroughRate':
				sums[index] = `${state.totalCount?.noPutThroughRate}%`;
				break;
			default:
				sums[index] = '';
				break;
		}
	});
	return sums;
};
// 点击部门名称
const onDetailOrg = (row: any) => {
	let StartDate = null;
	let EndDate = null;
	if (state.queryParams?.crTime) {
		StartDate = state.queryParams?.crTime[0];
		EndDate = state.queryParams?.crTime[1];
	}
	router.push({
		name: 'judicialStatisticsDetailSatisfiedOrg',
		state: {
			StartDate,
			EndDate,
			TypeId: state.queryParams.TypeId,
		},
		params: {
      id: row.orgCode,
		},
	});
};
// 点击数字
const router = useRouter();
const onDetail = (key: string, row, type: string) => {
	let StartDate = null;
	let EndDate = null;
	if (state.queryParams?.crTime) {
		StartDate = state.queryParams?.crTime[0];
		EndDate = state.queryParams?.crTime[1];
	}
	router.push({
		name: 'judicialStatisticsDetailSatisfied',
		params: {
      id: row.orgCode
		},
		state: {
			StartDate,
			EndDate,
			DateValue: key,
			TypeId: state.queryParams.TypeId,
		},
	});
};
onMounted(() => {
	queryList();
});
</script>