hotline-web/src/views/examTrain/train/statistics/resultAnalysis.vue

<template>
	<div class="snapshot-statistics-hotspot-container layout-pd">
		<el-card shadow="never">
			<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 label="培训标题" prop="keyword">
					<el-input
						v-model="state.queryParams.keyword"
						placeholder="培训标题"
						clearable
						@change="handleQuery"
						:disabled="state.loading"
						class="keyword-input"
					/>
				</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-row :gutter="20">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<div style="height: 70vh">
						<vxe-grid v-bind="gridOptions" ref="gridRef" v-on="gridEvents">
							<template #pager>
								<pagination
									@pagination="queryList"
									:total="state.total"
									v-model:current-page="state.queryParams.PageIndex"
									v-model:page-size="state.queryParams.PageSize"
									:disabled="state.loading"
								/>
							</template>
						</vxe-grid>
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<v-chart class="chart" :option="option" :loading="state.loading" autoresize />
				</el-col>
			</el-row>
		</el-card>
	</div>
</template>
<script setup lang="tsx" name="examTrainTrainStatisticsResultAnalysis">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { defaultDate } from '@/utils/constants';
import Other from '@/utils/other';
import { getTrainResultAnalysisData, getTrainResultAnalysisExport, getTrainCalcuteAnalysisData } from '@/api/examTrain/statistics';

const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页

// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive<any>({
	queryParams: {
		// 查询条件
		PageIndex: 1,
		PageSize: 20,
		crTime: defaultDate,
		startTime: null,
		endTime: null,
		anlysisType: 3,
		keyword: '',
		sortField: null,
		sortRule: null,
	},
	tableData: [], //表单
	loading: false, // 加载
	total: 0, // 总数
});
/** 搜索按钮操作 */
const handleQuery = () => {
	queryList();
};

const requestParams = ref<EmptyObjectType>({});
const gridOptions = reactive<any>({
	loading: false,
	border: true,
	showOverflow: true,
	columnConfig: {
		resizable: true,
	},
	scrollY: {
		enabled: true,
		gt: 100,
	},
	toolbarConfig: {
		custom: true,
		refresh: {
			queryMethod: () => {
				handleQuery();
			},
		},
		tools: [{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }],
	},
	params: {
		exportMethod: getTrainResultAnalysisExport,
		exportParams: requestParams,
	},
	customConfig: {
		storage: true,
	},
	id: 'examTrainTrainStatisticsResultAnalysis',
	rowConfig: { isHover: true, height: 30, isCurrent: true, useKey: true },
	height: 'auto',
	align: 'center',
	columns: [
		{ field: 'userName', title: '培训人员', width: 120 },
		{ field: 'trainName', title: '培训标题', minWidth: 200 },
		{ field: 'isCompleteDes', title: '学习是否完成', width: 120 },
	],
	data: [],
});
/** 获取列表 */
const dataTable = ref([] as any[]);
const queryList = () => {
	state.loading = true;
	gridOptions.loading = true;
	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');
	getTrainResultAnalysisData(requestParams.value).then((res) => {
		gridOptions.data = res.result.items ?? [];
		state.total = res?.result.pagination.totalCount ?? 0;
		gridOptions.loading = false;
	}).catch(() => {
		gridOptions.loading = false;
	});
	getTrainCalcuteAnalysisData(requestParams.value).then((res) => {
		state.tableData = res.result ?? null;
		const legendData = ['进行中', '是', '否'];
		dataTable.value = [
			{ name: '进行中', value: state.tableData.trainning },
			{ name: '是', value: state.tableData.complete },
			{ name: '否', value: state.tableData.unComplete },
		];
		setOption(legendData, dataTable.value);
		state.loading = false;
	}).catch(() => {
		state.loading = false;
	});
};
const gridEvents = {
	sortChange(val: any) {
		state.queryParams.sortField = val.order ? val.field : null;
		// 0 升序 1 降序
		state.queryParams.sortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
		handleQuery();
	},
};
/** 重置按钮操作 */
const statisticalTimeRef = ref<RefType>();
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	statisticalTimeRef.value.reset();
	queryList();
};
const option = ref<EmptyObjectType>({});
// 热点类型统计表
const setOption = (legendData: string[], data: any) => {
	option.value = {
		title: {
			text: '学习完成度占比',
			left: 'center',
		},
		tooltip: {
			formatter: '{b0}: {c0} ({d}%)',
		},
		legend: [
			{
				left: 'left',
				top: '40',
				orient: 'vertical',
				data: legendData,
			},
		],
		series: [
			{
				type: 'pie',
				radius: ['0%', '60%'],
				top: '10%',
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2,
				},
				label: {
					show: true,
					overflow: 'none',
					formatter: (params: any) => {
						if (params.name !== '') {
							return `${params.name}:${params.data.value}`;
							// （${params.percent}%）
						}
					},
				},
				data: data,
			},
		],
	};
};
onMounted(() => {
	queryList();
});
</script>
<style lang="scss" scoped>
.chart {
	height: 70vh;
	margin-top: 10px;
}
</style>