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

<template>
	<div class="judicial-statistics-event-calss-container layout-pd">
		<el-card shadow="never">
			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
				<el-form-item prop="AreaCode" label="区域">
					<el-select v-model="state.AreaCode" placeholder="请选择区域" @change="handleQuery" clearable>
						<el-option :label="item.areaName" :value="item.id" v-for="item in areaOptions" :key="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item prop="crTime" label="生成时间">
					<el-date-picker
						v-model="state.queryParams.crTime"
						type="datetimerange"
						unlink-panels
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:shortcuts="shortcuts"
						@change="handleQuery"
						value-format="YYYY-MM-DD[T]HH:mm:ss"
						:default-time="defaultTimeStartEnd"
						:clearable="false"
					/>
				</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-row :gutter="20">
			<el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
				<el-card shadow="never" v-loading="state.loading" class="statistics-item">
					<el-statistic :value="state.orderCount.theClueIsTrue">
						<template #title>
							<span class="color-info font14">线索属实</span>
						</template>
					</el-statistic>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
				<el-card shadow="never" v-loading="state.loading" class="statistics-item">
					<el-statistic :value="state.orderCount.theClueIsNotTrue">
						<template #title>
							<span class="color-info font14">线索不属实</span>
						</template>
					</el-statistic>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
				<el-card shadow="never" v-loading="state.loading" class="statistics-item">
					<el-statistic :value="state.orderCount.enforcementOrder">
						<template #title>
							<span class="color-info font14">行政执法工单</span>
						</template>
					</el-statistic>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
				<el-card shadow="never" v-loading="state.loading" class="statistics-item">
					<el-statistic :value="state.orderCount.passTheBuckOrder">
						<template #title>
							<span class="color-info font14">推诿工单</span>
						</template>
					</el-statistic>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
				<el-card shadow="never" v-loading="state.loading" class="statistics-item">
					<el-statistic :value="state.orderCount.toBeVerified">
						<template #title>
							<span class="color-info font14">待核实</span>
						</template>
					</el-statistic>
				</el-card>
			</el-col>
		</el-row>
		<el-card shadow="never">
			<vxe-toolbar
				ref="toolbarRef"
				:loading="state.loading"
				custom
				:refresh="{
					queryMethod: handleQuery,
				}"
			>
			</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' }"
					ref="tableRef"
					show-overflow
					id="judicialStatisticsEventClass"
					:custom-config="{ storage: true }"
					:tree-config="treeConfig"
					show-footer
					:footer-method="footerMethod"
				>
					<vxe-column field="name" title="问题类型" min-width="200" tree-node></vxe-column>
					<vxe-column field="num" title="工单总量" width="100">
						<template #default="{ row }">
							<el-button type="primary" link @click="linkDetail(row)">
								{{ row.num }}
							</el-button>
						</template>
					</vxe-column>
				</vxe-table>
			</div>
		</el-card>
	</div>
</template>
<script setup lang="tsx" name="judicialStatisticsEventClass">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { defaultDateTime, defaultTimeStartEnd, shortcuts } from '@/utils/constants';
import { eventStatistics, getAreaChildren } from '@/api/judicial';
import { useRouter } from 'vue-router';
import XEUtils from 'xe-utils';
// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive<any>({
	queryParams: {
		// 查询条件
		AreaCode: null,
		crTime: defaultDateTime, // 时间默认今天开始到今天结束
	},
	tableData: [], //表单
	loading: false, // 加载
	totalCount: {},
	orderCount: {
		theClueIsTrue: 0,
		theClueIsNotTrue: 0,
		enforcementOrder: 0,
		passTheBuckOrder: 0,
		toBeVerified: 0,
	},
	AreaCode: null,
});
/** 搜索按钮操作 */
const handleQuery = () => {
	// state.queryParams.PageIndex = 1;
	state.tableData = [];
	queryList();
};
// 计算合计
const footerMethod = ({ columns, data }) => {
	return [
		columns.map((column: any, columnIndex: number) => {
			if (columnIndex === 0) {
				return '合计';
			}
			if (['num'].includes(column.property)) {
				return XEUtils.sum(data, column.property);
			}
			return null;
		}),
	];
};
/** 获取列表 */
const queryList = () => {
	state.loading = true;
	const StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
	const EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
	const request = {
		StartTime,
		EndTime,
		AreaCode: state.AreaCode,
	};
	eventStatistics(request)
		.then((res: any) => {
			state.tableData = res.result.list;
			state.orderCount = res.result.orderCount;
			state.totalCount = res.result.total;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	state.AreaCode = null;
	queryList();
};
const areaOptions = ref<any>([]);
const getBaseData = async () => {
	try {
		const res = await getAreaChildren();
		areaOptions.value = res.result ?? [];
	} catch (e) {
		console.log(e);
	}
};

const treeConfig = reactive({
	transform: true,
	rowField: 'id',
	parentField: 'parentId',
	lazy: true,
	hasChild: 'sublevel',
	loadMethod({ row }) {
		// 异步加载子节点
		return fetchChildListApi(row);
	},
});
const fetchChildListApi = (row: any) => {
	return new Promise((resolve) => {
		const StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
		const EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
		const request = {
			StartTime,
			EndTime,
			AreaCode: state.AreaCode,
			Id: row.id,
		};
		eventStatistics(request)
			.then((res: any) => {
				state.totalCount = res.result.total;
				state.orderCount = res.result.orderCount;
				resolve(res.result?.list ?? []);
			})
			.catch(() => {});
	});
};
// 查看详情
const router = useRouter();
const linkDetail = (row: any) => {
	const StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
	const EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
	router.push({
		name: 'judicialDetailEventClass',
		query: {
			StartTime,
			EndTime,
			AreaCode: state.AreaCode,
			EventTypeId: row.id,
		},
	});
};
const toolbarRef = ref<RefType>();
const tableRef = ref<RefType>();
onMounted(() => {
	queryList();
	if (tableRef.value && toolbarRef.value) {
		tableRef.value.connect(toolbarRef.value);
	}
	getBaseData();
});
</script>
<style lang="scss" scoped>
.statistics-item {
	margin-bottom: 10px;
}
:deep(.el-statistic__content) {
	font-size: 32px;
	font-weight: bold;
	margin-top: 15px;
}
</style>