人员管理
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" title="编辑职业资格" width="800px" append-to-body :close-on-click-modal="false" destroy-on-close>
|
||||
<el-dialog v-model="dialogVisible" title="编辑职业资格" width="600px" append-to-body :close-on-click-modal="false" destroy-on-close>
|
||||
<div v-if="showForm">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
@@ -55,15 +55,17 @@
|
||||
<el-form-item label="证书编号" prop="certificateNumber">
|
||||
<el-input
|
||||
v-model="dataForm.certificateNumber"
|
||||
placeholder="请输入证书编号"
|
||||
placeholder="请输入证书编号(仅支持英文和数字)"
|
||||
clearable
|
||||
show-word-limit
|
||||
maxlength="32"
|
||||
@input="handleCertificateNumberInput"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="材料1" prop="materialA">
|
||||
<el-upload
|
||||
:headers="headers"
|
||||
style="width:3.5cm;height:5.3cm;"
|
||||
:limit="1"
|
||||
:action="url"
|
||||
:file-list="fileList"
|
||||
@@ -72,7 +74,9 @@
|
||||
>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<template #tip>
|
||||
<el-tag>仅支持jpg,jpeg,png,pdf后缀的文件上传</el-tag>
|
||||
<div style="margin-top: 8px;">
|
||||
<el-tag>仅支持jpg,jpeg,png,pdf后缀的文件上传</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
@@ -81,7 +85,7 @@
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogSubmit" :loading="submitLoading">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -92,17 +96,14 @@
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { Session } from '/@/utils/storage'
|
||||
import { useMessage } from '/@/hooks/message'
|
||||
import { getAllInfoAboutList } from '/@/api/professional/teacherbase'
|
||||
import { getMyTeacherNo, updateOtherInfo } from '/@/api/professional/professionaluser/teacherbase'
|
||||
import { putObj } from '/@/api/professional/professionaluser/professionalqualificationrelation'
|
||||
|
||||
// Props
|
||||
const props = defineProps<{
|
||||
visible?: boolean
|
||||
}>()
|
||||
import { checkLocked } from '/@/api/professional/professionalstatuslock'
|
||||
import { getLevelList } from '/@/api/professional/rsbase/professionalqualificationconfig'
|
||||
import { getWorkTypeList } from '/@/api/professional/rsbase/professionalworktype'
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void
|
||||
(e: 'refreshData'): void
|
||||
}>()
|
||||
|
||||
@@ -113,11 +114,8 @@ const message = useMessage()
|
||||
const formRef = ref()
|
||||
const submitLoading = ref(false)
|
||||
|
||||
// 对话框显示状态
|
||||
const visible = computed({
|
||||
get: () => props.visible || false,
|
||||
set: (val) => emit('update:visible', val)
|
||||
})
|
||||
// 对话框显示状态(内部管理)
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const dataForm = reactive({
|
||||
@@ -144,35 +142,18 @@ const formRules = {
|
||||
{ required: true, message: '请选择取证时间', trigger: 'change' }
|
||||
],
|
||||
certificateNumber: [
|
||||
{ required: true, message: '请输入证书编号', trigger: 'blur' }
|
||||
{ required: true, message: '请输入证书编号', trigger: 'blur' },
|
||||
{ pattern: /^[A-Za-z0-9]+$/, message: '证书编号只能包含英文和数字', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 基础信息
|
||||
const baseInfoAbout = reactive<{
|
||||
stationTypeList: any[]
|
||||
atStationList: any[]
|
||||
teacherTypeList: any[]
|
||||
employmentNatureList: any[]
|
||||
stationLevelList: any[]
|
||||
stationDutyLevelList: any[]
|
||||
workTypeList: any[]
|
||||
proTitleList: any[]
|
||||
majorStationList: any[]
|
||||
qualificationList: any[]
|
||||
partBranchList: any[]
|
||||
}>({
|
||||
stationTypeList: [],
|
||||
atStationList: [],
|
||||
teacherTypeList: [],
|
||||
employmentNatureList: [],
|
||||
stationLevelList: [],
|
||||
stationDutyLevelList: [],
|
||||
workTypeList: [],
|
||||
proTitleList: [],
|
||||
majorStationList: [],
|
||||
qualificationList: [],
|
||||
partBranchList: []
|
||||
qualificationList: []
|
||||
})
|
||||
|
||||
// 上传相关
|
||||
@@ -198,25 +179,31 @@ const qualificationList = computed(() => baseInfoAbout.qualificationList as any[
|
||||
// 初始化字典数据
|
||||
const initDicData = async () => {
|
||||
try {
|
||||
const response = await getAllInfoAboutList()
|
||||
const map = response.data.data
|
||||
baseInfoAbout.stationTypeList = map['stationTypeList'] || []
|
||||
baseInfoAbout.atStationList = map['atStationList'] || []
|
||||
baseInfoAbout.teacherTypeList = map['teacherTypeList'] || []
|
||||
baseInfoAbout.employmentNatureList = map['employmentNatureList'] || []
|
||||
baseInfoAbout.stationLevelList = map['stationLevelList'] || []
|
||||
baseInfoAbout.stationDutyLevelList = map['stationDutyLevelList'] || []
|
||||
baseInfoAbout.workTypeList = map['workTypeList'] || []
|
||||
baseInfoAbout.proTitleList = map['proTitleList'] || []
|
||||
baseInfoAbout.majorStationList = map['majorStationList'] || []
|
||||
baseInfoAbout.qualificationList = map['qualificationList'] || []
|
||||
baseInfoAbout.partBranchList = map['partBranchList'] || []
|
||||
visible.value = true
|
||||
// 使用专门的 API 获取数据(与 index.vue 保持一致)
|
||||
const [levelRes, workRes] = await Promise.all([
|
||||
getLevelList(),
|
||||
getWorkTypeList()
|
||||
])
|
||||
|
||||
// 处理资格等级列表(与 index.vue 保持一致)
|
||||
if (levelRes && levelRes.data) {
|
||||
baseInfoAbout.qualificationList = levelRes.data
|
||||
}
|
||||
|
||||
// 处理工种列表(与 index.vue 保持一致)
|
||||
if (workRes && workRes.data) {
|
||||
baseInfoAbout.workTypeList = workRes.data
|
||||
}
|
||||
} catch (error) {
|
||||
// 获取字典数据失败
|
||||
}
|
||||
}
|
||||
|
||||
// 证书编号输入处理(只允许英文和数字)
|
||||
const handleCertificateNumberInput = (value: string) => {
|
||||
dataForm.certificateNumber = value.replace(/[^A-Za-z0-9]/g, '')
|
||||
}
|
||||
|
||||
// 文件上传成功
|
||||
const materiaUploadSuccess = (response: any) => {
|
||||
if (response.data && response.data.code === "-1") {
|
||||
@@ -227,36 +214,101 @@ const materiaUploadSuccess = (response: any) => {
|
||||
}
|
||||
|
||||
// 打开对话框
|
||||
const openDialog = (row: any) => {
|
||||
url.value = `/professional/file/teacherAboutInfoUpload?teacherNo=${row.teacherNo}&type=3`
|
||||
fileList.value = []
|
||||
Object.assign(dataForm, {
|
||||
worker: row.worker || '',
|
||||
qualificationConfigId: row.qualificationConfigId || '',
|
||||
certificateTime: row.certificateTime || '',
|
||||
certificateNumber: row.certificateNumber || '',
|
||||
materialA: row.materialA || '',
|
||||
evidenceA: row.evidenceA || '',
|
||||
state: row.state || '',
|
||||
teacherNo: row.teacherNo || '',
|
||||
id: row.id || ''
|
||||
})
|
||||
showForm.value = true
|
||||
initDicData()
|
||||
const openDialog = async (row?: any) => {
|
||||
if (row && row.id) {
|
||||
// 编辑模式
|
||||
url.value = `/professional/file/teacherAboutInfoUpload?teacherNo=${row.teacherNo}&type=3`
|
||||
fileList.value = []
|
||||
Object.assign(dataForm, {
|
||||
worker: row.worker || '',
|
||||
qualificationConfigId: row.qualificationConfigId || '',
|
||||
certificateTime: row.certificateTime || '',
|
||||
certificateNumber: row.certificateNumber || '',
|
||||
materialA: row.materialA || '',
|
||||
evidenceA: row.evidenceA || '',
|
||||
state: row.state || '',
|
||||
teacherNo: row.teacherNo || '',
|
||||
id: row.id || ''
|
||||
})
|
||||
showForm.value = true
|
||||
await initDicData()
|
||||
dialogVisible.value = true
|
||||
} else {
|
||||
// 新增模式:先检查是否锁定,再获取当前用户的 teacherNo
|
||||
try {
|
||||
const lockResponse = await checkLocked('job')
|
||||
if (lockResponse.data) {
|
||||
// 已锁定
|
||||
message.warning("新增功能已锁定,暂不允许操作")
|
||||
return
|
||||
}
|
||||
|
||||
// 未锁定,继续获取 teacherNo
|
||||
const response = await getMyTeacherNo()
|
||||
const teacherNo = response.data
|
||||
url.value = `/professional/file/teacherAboutInfoUpload?teacherNo=${teacherNo}&type=3`
|
||||
Object.assign(dataForm, {
|
||||
worker: '',
|
||||
qualificationConfigId: '',
|
||||
certificateTime: '',
|
||||
certificateNumber: '',
|
||||
materialA: '',
|
||||
evidenceA: '',
|
||||
state: '',
|
||||
teacherNo: teacherNo,
|
||||
id: ''
|
||||
})
|
||||
fileList.value = []
|
||||
// 先加载字典数据,再显示表单
|
||||
await initDicData()
|
||||
showForm.value = true
|
||||
dialogVisible.value = true
|
||||
} catch (error) {
|
||||
message.error('获取教师编号失败')
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const dialogSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
// 验证证明材料是否上传(与 MultiDialog 保持一致)
|
||||
if (!dataForm.evidenceA && !dataForm.materialA) {
|
||||
message.warning("请上传证明材料")
|
||||
return
|
||||
}
|
||||
|
||||
await formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
submitLoading.value = true
|
||||
try {
|
||||
dataForm.state = '0'
|
||||
await putObj(dataForm)
|
||||
message.success("操作成功")
|
||||
visible.value = false
|
||||
if (dataForm.id) {
|
||||
// 编辑:使用 putObj 接口(管理员编辑)
|
||||
dataForm.state = '0'
|
||||
await putObj(dataForm)
|
||||
message.success("修改成功")
|
||||
} else {
|
||||
// 新增:使用 updateOtherInfo 接口(与 MultiDialog 保持一致)
|
||||
const submitData: any = {
|
||||
type: 3, // 职业资格类型
|
||||
teacherNo: dataForm.teacherNo,
|
||||
worker: dataForm.worker,
|
||||
qualificationConfigId: dataForm.qualificationConfigId,
|
||||
certificateTime: dataForm.certificateTime,
|
||||
certificateNumber: dataForm.certificateNumber,
|
||||
mateA: dataForm.evidenceA || dataForm.materialA // 使用 mateA 字段(与 MultiDialog 一致)
|
||||
}
|
||||
|
||||
const res = await updateOtherInfo(submitData)
|
||||
if (res.data == '-1') {
|
||||
message.warning("当前不允许提交")
|
||||
} else {
|
||||
message.success("提交成功")
|
||||
}
|
||||
}
|
||||
dialogVisible.value = false
|
||||
emit('refreshData')
|
||||
} catch (error: any) {
|
||||
message.error(error?.msg || '操作失败')
|
||||
|
||||
@@ -1,28 +1,6 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 图表统计 -->
|
||||
<div style="text-align: right; margin-bottom: 20px;">
|
||||
<el-collapse accordion @change="initChartOption">
|
||||
<el-collapse-item title="资格等级统计">
|
||||
<div style="width: 100%">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<v-chart ref="chartRef" style="width: 100%; height: 400px;" :option="chartOption" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-table :data="chartData" border show-summary style="width: 100%">
|
||||
<el-table-column prop="name" label="等级" width="180" align="center" />
|
||||
<el-table-column prop="value" label="人数" width="180" align="center" />
|
||||
<el-table-column prop="rate" label="占比" width="180" align="center" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
|
||||
<!-- 搜索表单 -->
|
||||
<search-form
|
||||
v-show="showSearch"
|
||||
@@ -36,7 +14,6 @@
|
||||
<el-select
|
||||
v-model="search.state"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
placeholder="请选择审核状态"
|
||||
>
|
||||
<el-option
|
||||
@@ -52,7 +29,6 @@
|
||||
<el-input
|
||||
v-model="search.teacherNo"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
placeholder="请输入工号"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -61,7 +37,6 @@
|
||||
<el-input
|
||||
v-model="search.realName"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -87,7 +62,8 @@
|
||||
v-if="permissions.professional_professionalqualificationrelation_add">新 增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
v-if="permissions.professional_teacherbase_export"
|
||||
@click="handleDownLoadWord"
|
||||
@@ -109,18 +85,15 @@
|
||||
|
||||
<el-table-column prop="state" label="审核状态" width="120" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.state === '1'" type="success">通过</el-tag>
|
||||
<el-tag v-else-if="scope.row.state === '-2'" type="danger">驳回</el-tag>
|
||||
<el-tag v-else-if="scope.row.state === '0'" type="warning">待审核</el-tag>
|
||||
<span v-else>-</span>
|
||||
<AuditState :state="scope.row.state" :options="auditStateOptions" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="backReason" label="驳回理由" min-width="150" align="center" show-overflow-tooltip />
|
||||
|
||||
<el-table-column prop="teacherNo" label="工号" min-width="120" align="center" show-overflow-tooltip />
|
||||
|
||||
<el-table-column prop="realName" label="姓名" min-width="120" align="center" show-overflow-tooltip />
|
||||
<el-table-column label="姓名/工号" min-width="150" align="center">
|
||||
<template #default="scope">
|
||||
<TeacherNameNo :name="scope.row.realName" :no="scope.row.teacherNo" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="qualificationConfigId" label="资格等级" min-width="150" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
@@ -142,40 +115,44 @@
|
||||
v-if="scope.row.evidenceA && scope.row.evidenceA !== ''"
|
||||
type="primary"
|
||||
link
|
||||
icon="Document"
|
||||
@click="handlePreview(scope.row.srcList)">查看
|
||||
</el-button>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="250" align="center" fixed="right">
|
||||
<el-table-column prop="backReason" label="驳回理由" min-width="150" align="center" show-overflow-tooltip />
|
||||
|
||||
<el-table-column label="操作" width="280" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="Edit"
|
||||
icon="edit-pen"
|
||||
v-if="permissions.professional_professionalqualificationrelation_edit && (scope.row.state === '0' || scope.row.state === '-2')"
|
||||
@click="handleEdit(scope.row)">编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
link
|
||||
icon="Check"
|
||||
icon="CircleCheck"
|
||||
v-if="permissions.professional_professionalqualificationrelation_exam && scope.row.state === '0'"
|
||||
@click="changeState(scope.row, 1)">通过
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
link
|
||||
icon="Close"
|
||||
icon="CircleClose"
|
||||
v-if="permissions.professional_professionalqualificationrelation_exam && (scope.row.state === '0' || scope.row.state === '1')"
|
||||
@click="changeState(scope.row, -2)">驳回
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
type="primary"
|
||||
link
|
||||
icon="Delete"
|
||||
icon="delete"
|
||||
v-if="permissions.professional_professionalqualificationrelation_del"
|
||||
style="margin-left: 12px"
|
||||
@click="handleDel(scope.row)">删除
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -200,7 +177,6 @@
|
||||
</el-dialog>
|
||||
|
||||
<!-- 子组件 -->
|
||||
<MultiDialog ref="multiDialogRef" @getList="getDataList" :page="state.pagination" :nowRow="null" />
|
||||
<DataForm ref="dataFormRef" @refreshData="handleFilter" />
|
||||
<ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" />
|
||||
</div>
|
||||
@@ -215,28 +191,28 @@ import { BasicTableProps, useTable } from '/@/hooks/table'
|
||||
import { useMessage } from '/@/hooks/message'
|
||||
import { useMessageBox } from '/@/hooks/message'
|
||||
import { useDict } from '/@/hooks/dict'
|
||||
import VChart from 'vue-echarts'
|
||||
import { use } from 'echarts/core'
|
||||
import { PieChart } from 'echarts/charts'
|
||||
import { TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import {
|
||||
fetchList,
|
||||
putObj,
|
||||
delObj,
|
||||
getChartOption,
|
||||
exportExcel
|
||||
} from '/@/api/professional/professionaluser/professionalqualificationrelation'
|
||||
import { getLevelList } from '/@/api/professional/rsbase/professionalqualificationconfig'
|
||||
import { getWorkTypeList } from '/@/api/professional/rsbase/professionalworktype'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const MultiDialog = defineAsyncComponent(() => import('/@/views/professional/teacherbase/multiDialog.vue'))
|
||||
import DataForm from './form.vue'
|
||||
import ProfessionalBackResaon from '/@/views/professional/common/professional-back-resaon.vue'
|
||||
const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
|
||||
const AuditState = defineAsyncComponent(() => import('/@/components/AuditState/index.vue'))
|
||||
const DataForm = defineAsyncComponent(() => import('./form.vue'))
|
||||
const ProfessionalBackResaon = defineAsyncComponent(() => import('/@/views/professional/common/professional-back-resaon.vue'))
|
||||
const authImg = defineAsyncComponent(() => import('/@/components/tools/auth-img.vue'))
|
||||
|
||||
// 注册 ECharts 组件
|
||||
use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
|
||||
// 审核状态选项(独立定义,防止其他页面修改时被波及)
|
||||
import type { StateOption } from '/@/components/AuditState/index.vue'
|
||||
const auditStateOptions: StateOption[] = [
|
||||
{ value: '1', label: '已通过', type: 'success', icon: 'fa-solid fa-circle-check', effect: 'dark' },
|
||||
{ value: '-2', label: '已驳回', type: 'danger', icon: 'fa-solid fa-circle-xmark', effect: 'dark' },
|
||||
{ value: '0', label: '待审核', type: 'warning', icon: 'fa-regular fa-clock', effect: 'light' }
|
||||
]
|
||||
|
||||
// 使用 Pinia store
|
||||
const userInfoStore = useUserInfo()
|
||||
@@ -261,10 +237,8 @@ const { professional_state: professionalState } = useDict('professional_state')
|
||||
// 表格引用
|
||||
const tableRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const multiDialogRef = ref()
|
||||
const dataFormRef = ref()
|
||||
const backReasonRef = ref()
|
||||
const chartRef = ref()
|
||||
const showSearch = ref(true)
|
||||
|
||||
// 搜索表单数据
|
||||
@@ -274,10 +248,6 @@ const search = reactive({
|
||||
realName: ''
|
||||
})
|
||||
|
||||
// 图表数据
|
||||
const chartOption = ref<any>({})
|
||||
const chartData = ref<any[]>([])
|
||||
|
||||
// 材料预览
|
||||
const dialogVisible = ref(false)
|
||||
const imgUrl = ref<Array<{ title: string; url: string }>>([])
|
||||
@@ -313,33 +283,6 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
|
||||
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)
|
||||
|
||||
// 初始化图表
|
||||
const initChartOption = async () => {
|
||||
try {
|
||||
const response = await getChartOption()
|
||||
chartOption.value = response.data.data.option || {}
|
||||
|
||||
let total = 0
|
||||
if (chartOption.value.series && chartOption.value.series[0] && chartOption.value.series[0].data) {
|
||||
chartOption.value.series[0].data.forEach((item: any) => {
|
||||
total += item.value || 0
|
||||
})
|
||||
|
||||
chartData.value = []
|
||||
chartOption.value.series[0].data.forEach((item: any) => {
|
||||
const rate = total > 0 ? Number((item.value / total * 100).toFixed(1)) : 0
|
||||
chartData.value.push({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
rate: `${rate}%`
|
||||
})
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
// Failed to load chart data
|
||||
}
|
||||
}
|
||||
|
||||
// 预览材料
|
||||
const handlePreview = (list: string[]) => {
|
||||
imgUrl.value = []
|
||||
@@ -397,7 +340,7 @@ const resetQuery = () => {
|
||||
|
||||
// 打开新增窗口
|
||||
const handleAdd = () => {
|
||||
multiDialogRef.value?.init(3)
|
||||
dataFormRef.value?.openDialog()
|
||||
}
|
||||
|
||||
// 打开编辑窗口
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 页面标题 -->
|
||||
<div style="margin-bottom: 20px;">
|
||||
<h2 style="margin: 0; font-size: 20px; font-weight: 600; color: #303133;">资格等级统计</h2>
|
||||
</div>
|
||||
|
||||
<!-- 图表统计 -->
|
||||
<div style="width: 100%">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<v-chart ref="chartRef" style="width: 100%; height: 400px;" :option="chartOption" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-table :data="chartData" border show-summary style="width: 100%">
|
||||
<el-table-column prop="name" label="等级" width="180" align="center" />
|
||||
<el-table-column prop="value" label="人数" width="180" align="center" />
|
||||
<el-table-column prop="rate" label="占比" width="180" align="center" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { use } from 'echarts/core'
|
||||
import { PieChart } from 'echarts/charts'
|
||||
import { TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { getChartOption } from '/@/api/professional/professionaluser/professionalqualificationrelation'
|
||||
|
||||
// 注册 ECharts 组件
|
||||
use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
|
||||
|
||||
// 图表引用
|
||||
const chartRef = ref()
|
||||
|
||||
// 图表数据
|
||||
const chartOption = ref<any>({})
|
||||
const chartData = ref<any[]>([])
|
||||
|
||||
// 初始化图表
|
||||
const initChartOption = async () => {
|
||||
try {
|
||||
const response = await getChartOption()
|
||||
chartOption.value = response.data.data.option || {}
|
||||
|
||||
let total = 0
|
||||
if (chartOption.value.series && chartOption.value.series[0] && chartOption.value.series[0].data) {
|
||||
chartOption.value.series[0].data.forEach((item: any) => {
|
||||
total += item.value || 0
|
||||
})
|
||||
|
||||
chartData.value = []
|
||||
chartOption.value.series[0].data.forEach((item: any) => {
|
||||
const rate = total > 0 ? Number((item.value / total * 100).toFixed(1)) : 0
|
||||
chartData.value.push({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
rate: `${rate}%`
|
||||
})
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
// Failed to load chart data
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时初始化图表
|
||||
onMounted(() => {
|
||||
initChartOption()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user