<template>
|
<div class="unit-statistics">
|
<el-card>
|
<template #header>
|
<div class="card-header">
|
<span>各单位数据统计</span>
|
</div>
|
</template>
|
|
<el-form :inline="true" :model="searchForm" class="search-form">
|
<el-form-item label="单位">
|
<el-select
|
v-model="searchForm.unitCode"
|
placeholder="请选择单位"
|
clearable
|
filterable
|
style="width: 250px"
|
>
|
<el-option
|
v-for="dept in flatDepartmentList"
|
:key="dept.deptCode"
|
:label="`${dept.deptCode} - ${dept.deptName}`"
|
:value="dept.deptCode"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
<el-button :icon="Refresh" @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-table :data="tableData" v-loading="loading" border stripe>
|
<el-table-column prop="unitCode" label="单位编码" width="150" />
|
<el-table-column prop="unitName" label="单位名称" width="300" />
|
<el-table-column prop="taskCount" label="任务条数" width="120" />
|
<el-table-column prop="successCount" label="完成条数" width="120" />
|
<el-table-column prop="status" label="完成状态" width="100">
|
<template #default="{ row }">
|
<el-tag :type="row.status === 1 ? 'success' : 'warning'">
|
{{ row.status === 1 ? '已完成' : '未完成' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="lastTime" label="最后上传时间" />
|
</el-table>
|
|
<el-pagination
|
v-model:current-page="pagination.currentPage"
|
v-model:page-size="pagination.pageSize"
|
:page-sizes="[10, 20, 50, 100]"
|
:total="pagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
style="margin-top: 20px; justify-content: flex-end"
|
/>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed, onMounted } from 'vue'
|
import { Search, Refresh } from '@element-plus/icons-vue'
|
import { getDepartmentTree } from '@/api/department'
|
import { getUnitStatisticsPage } from '@/api/statistics'
|
|
const loading = ref(false)
|
const tableData = ref([])
|
const departmentList = ref([])
|
|
const searchForm = reactive({
|
unitCode: ''
|
})
|
|
const pagination = reactive({
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
})
|
|
const flatDepartmentList = computed(() => {
|
const flatten = (list) => {
|
let result = []
|
list.forEach(item => {
|
result.push(item)
|
if (item.children && item.children.length > 0) {
|
result = result.concat(flatten(item.children))
|
}
|
})
|
return result
|
}
|
return flatten(departmentList.value)
|
})
|
|
const buildTree = (list) => {
|
const map = {}
|
const roots = []
|
|
list.forEach(item => {
|
map[item.deptCode] = { ...item, children: [] }
|
})
|
|
list.forEach(item => {
|
const parent = map[item.parentCode]
|
if (parent) {
|
parent.children.push(map[item.deptCode])
|
} else {
|
roots.push(map[item.deptCode])
|
}
|
})
|
|
const cleanEmptyChildren = (nodes) => {
|
nodes.forEach(node => {
|
if (node.children && node.children.length === 0) {
|
delete node.children
|
} else {
|
cleanEmptyChildren(node.children)
|
}
|
})
|
}
|
|
cleanEmptyChildren(roots)
|
return roots
|
}
|
|
const fetchDepartmentList = async () => {
|
try {
|
const res = await getDepartmentTree()
|
departmentList.value = buildTree(res.data)
|
} catch (error) {
|
console.error('获取部门列表失败:', error)
|
}
|
}
|
|
const fetchData = async () => {
|
loading.value = true
|
try {
|
const res = await getUnitStatisticsPage({
|
page: pagination.currentPage,
|
size: pagination.pageSize,
|
unitCode: searchForm.unitCode
|
})
|
tableData.value = res.data.records || res.data
|
pagination.total = res.data.total || res.data.length
|
} catch (error) {
|
console.error('获取统计数据失败:', error)
|
} finally {
|
loading.value = false
|
}
|
}
|
|
const handleSearch = () => {
|
pagination.currentPage = 1
|
fetchData()
|
}
|
|
const handleReset = () => {
|
searchForm.unitCode = ''
|
pagination.currentPage = 1
|
fetchData()
|
}
|
|
const handleSizeChange = (val) => {
|
pagination.pageSize = val
|
fetchData()
|
}
|
|
const handleCurrentChange = (val) => {
|
pagination.currentPage = val
|
fetchData()
|
}
|
|
onMounted(() => {
|
fetchDepartmentList()
|
fetchData()
|
})
|
</script>
|
|
<style scoped>
|
.unit-statistics {
|
padding: 20px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.search-form {
|
margin-bottom: 20px;
|
}
|
</style>
|
