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="crTime" label="受理时间段">
					<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>
					<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="6" :xl="6">
				<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="6" :xl="6">
				<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="6" :xl="6">
				<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="6" :xl="6">
				<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-row>
		<el-card shadow="never">
			<ProTable
				ref="proTableRef"
				:columns="columns"
				:data="state.tableData"
				@updateTable="queryList"
				:loading="state.loading"
				border
				:pagination="false"
				lazy
				:load="load"
				:tree-props="{ children: 'children', hasChildren: 'sublevel' }"
				show-summary
				row-key="id"
			>
				<template #tableHeader>
					<el-select v-model="state.AreaCode" placeholder="请选择区域" @change="handleQuery" clearable style="max-width: 220px;">
						<el-option :label="item.areaName" :value="item.id" v-for="item in areaOptions" :key="item.id" />
					</el-select>
				</template>
			</ProTable>
		</el-card>
	</div>
</template>
<script setup lang="tsx" name="judicialStatisticsEventClass">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { shortcuts } from '@/utils/constants';
import dayjs from 'dayjs';
import { eventStatistics, getArea } from '@/api/judicial';
import { useRouter } from 'vue-router';

const columns = ref<any>([
	{ prop: 'name', label: '事项类型' },
	{
		prop: 'num',
		label: '工单总量',
		width: 120,
		render: (scope) => {
			return (
				<el-button type="primary" link onClick={() => linkDetail(scope.row)}>
					{scope.row.num}
				</el-button>
			);
		},
	},
]); // 表头
// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive({
	queryParams: {
		// 查询条件
		AreaCode: null,
		crTime: [dayjs(new Date()).startOf('date').format('YYYY-MM-DD'), dayjs(new Date()).endOf('date').format('YYYY-MM-DD')], // 时间默认今天开始到今天结束
	},
	tableData: [], //表单
	loading: false, // 加载
	totalCount: {},
	orderCount: {
		theClueIsTrue: 0,
		theClueIsNotTrue: 0,
		enforcementOrder: 0,
		passTheBuckOrder: 0,
	},
	AreaCode: null,
});
/** 搜索按钮操作 */
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,
		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 load = (row: any, treeNode: unknown, resolve: (date: any[]) => void) => {
	let StartDate = null;
	let EndDate = null;
	if (state.queryParams?.crTime) {
		StartDate = state.queryParams?.crTime[0];
		EndDate = state.queryParams?.crTime[1];
	}
	const request = {
		StartDate,
		EndDate,
		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 areaOptions = ref<any>([]);
const getBaseData = async () => {
	try {
		const res = await getArea();
		areaOptions.value = res.result ?? [];
	} catch (e) {
		console.log(e);
	}
};
// 查看详情
const router = useRouter();
const linkDetail = (row: any) => {
	let StartDate = null;
	let EndDate = null;
	if (state.queryParams?.crTime) {
		StartDate = state.queryParams?.crTime[0];
		EndDate = state.queryParams?.crTime[1];
	}
	const AreaCode = state.AreaCode;
	router.push({
		name: 'judicialDetailEventClass',
		params: {
			id: row.id,
		},
		state: {
			StartDate,
			EndDate,
			AreaCode,
		},
	});
};
onMounted(() => {
	getBaseData();
	queryList();
});
</script>
<style lang="scss" scoped>
.statistics-item {
	margin-bottom: 10px;
}
:deep(.el-statistic__content) {
	font-size: 32px;
	font-weight: bold;
	margin-top: 15px;
}
</style>