人员管理

2026-01-04 18:23:27 +08:00
parent fee5e2a6c0
commit 24453baf3e
34 changed files with 1603 additions and 1259 deletions
--- a/src/views/professional/professionalteacheracademicrelation/form.vue
+++ b/src/views/professional/professionalteacheracademicrelation/form.vue
@@ -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="800px" append-to-body :close-on-click-modal="false" destroy-on-close>
    <div v-if="showForm">
      <el-form
        ref="formRef"
@@ -88,53 +88,58 @@
        <el-form-item label="证书编码" prop="certificateNumber">
          <el-input
            v-model="dataForm.certificateNumber"
-            placeholder="请输入证书编码"
+            placeholder="请输入证书编码（仅支持英文和数字）"
            clearable
+            show-word-limit
+            maxlength="100"
+            @input="handleCertificateNumberInput"
          />
        </el-form-item>

        <el-form-item label="学历证书" prop="materialA">
-          <el-upload
-            :headers="headers"
-            style="width:3.5cm;height:5.3cm;"
-            :limit="1"
-            :action="url"
-            :file-list="fileList"
-            :on-success="materiaUploadSuccess"
-            :accept="'.jpg,.jpeg,.png,.pdf'"
-          >
-            <el-button size="small" type="primary">点击上传</el-button>
+        <el-upload
+          :headers="headers"
+          :limit="1"
+          :action="url"
+          :file-list="fileList"
+          :on-success="materiaUploadSuccess"
+          :accept="'.jpg,.jpeg,.png,.pdf'"
+        >
+          <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-upload>
        </el-form-item>

        <el-form-item label="学位证书" prop="materialB">
-          <el-upload
-            :headers="headers"
-            style="width:3.5cm;height:5.3cm;"
-            :limit="1"
-            :action="url"
+        <el-upload
+          :headers="headers"
+          :limit="1"
+          :action="url"
            :file-list="fileListB"
-            :on-success="materiaUploadSuccessB"
-            :accept="'.jpg,.jpeg,.png,.pdf'"
-          >
-            <el-button size="small" type="primary">点击上传</el-button>
+          :on-success="materiaUploadSuccessB"
+          :accept="'.jpg,.jpeg,.png,.pdf'"
+        >
+          <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-upload>
        </el-form-item>
      </el-form>
    </div>
    
    <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>
+      </template>
  </el-dialog>
 </template>

@@ -142,20 +147,15 @@
 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/professionalteacheracademicrelation'
 import { getAllTypeList } from '/@/api/professional/rsbase/professionalacademiceducationtypeconfig'
 import { getQualificationList } from '/@/api/professional/rsbase/academicqualificationsconfig'
 import { getDegreeList } from '/@/api/professional/rsbase/professionalacademicdegreeconfig'
-
-// Props
-const props = defineProps<{
-  visible?: boolean
-}>()
+import { checkLocked } from '/@/api/professional/professionalstatuslock'

 // Emits
 const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void
  (e: 'refreshData'): void
 }>()

@@ -166,11 +166,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({
@@ -205,7 +202,8 @@ const formRules = {
    { required: true, message: '请输入所学专业', trigger: 'blur' }
  ],
  certificateNumber: [
-    { required: true, message: '请输入证书编码', trigger: 'blur' }
+    { required: true, message: '请输入证书编码', trigger: 'blur' },
+    { pattern: /^[A-Za-z0-9]+$/, message: '证书编码只能包含英文和数字', trigger: 'blur' }
  ]
 }

@@ -214,32 +212,7 @@ const educationTypeList = ref<any[]>([])
 const qualificationList = ref<any[]>([])
 const degreeList = ref<any[]>([])

-// 基础信息
-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: []
-})
+// 基础信息（简化，只保留需要的）

 // 上传相关
 const url = ref('')
@@ -248,7 +221,7 @@ const fileListB = ref<any[]>([])

 // 请求头
 const headers = computed(() => {
-  return {
+      return {
    "Authorization": 'Bearer ' + Session.getToken()
  }
 })
@@ -259,26 +232,13 @@ const showForm = ref(false)
 // 初始化字典数据
 const initDicData = async () => {
  try {
-    const [response, eduRes, quaRes, degRes] = await Promise.all([
-      getAllInfoAboutList(),
+    // 使用专门的 API 获取数据（与 index.vue 保持一致）
+    const [eduRes, quaRes, degRes] = await Promise.all([
      getAllTypeList(),
      getQualificationList(),
      getDegreeList()
    ])
    
-    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'] || []
-    
    // 获取教育类型列表
    if (eduRes && eduRes.data) {
      educationTypeList.value = Array.isArray(eduRes.data) 
@@ -299,13 +259,16 @@ const initDicData = async () => {
        ? degRes.data 
        : (degRes.data.records || degRes.data.list || [])
    }
-    
-    visible.value = true
  } 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") {
@@ -319,48 +282,127 @@ const materiaUploadSuccess = (response: any) => {
 const materiaUploadSuccessB = (response: any) => {
  if (response.data && response.data.code === "-1") {
    message.error("当前不允许上传文件")
-    return
-  }
+        return
+      }
  dataForm.degreeImg = response.data.url
 }

 // 打开对话框
-const openDialog = (row: any) => {
-  url.value = `/professional/file/teacherAboutInfoUpload?teacherNo=${row.teacherNo}&type=1`
-  fileList.value = []
-  fileListB.value = []
-  Object.assign(dataForm, {
-    graduateTime: row.graduateTime || '',
-    type: row.type || '',
-    qualificationConfigId: row.qualificationConfigId || '',
-    degreeConfigId: row.degreeConfigId || '',
-    graduateSchool: row.graduateSchool || '',
-    major: row.major || '',
-    certificateNumber: row.certificateNumber || '',
-    materialA: row.materialA || '',
-    materialB: row.materialB || '',
-    qualificationImg: row.qualificationImg || '',
-    degreeImg: row.degreeImg || '',
-    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=1`
+    fileList.value = []
+    fileListB.value = []
+    Object.assign(dataForm, {
+      graduateTime: row.graduateTime || '',
+      type: row.type || '',
+      qualificationConfigId: row.qualificationConfigId || '',
+      degreeConfigId: row.degreeConfigId || '',
+      graduateSchool: row.graduateSchool || '',
+      major: row.major || '',
+      certificateNumber: row.certificateNumber || '',
+      materialA: row.materialA || '',
+      materialB: row.materialB || '',
+      qualificationImg: row.qualificationImg || '',
+      degreeImg: row.degreeImg || '',
+      state: row.state || '',
+      teacherNo: row.teacherNo || '',
+      id: row.id || ''
+    })
+    showForm.value = true
+    await initDicData()
+    dialogVisible.value = true
+  } else {
+    // 新增模式：先检查是否锁定，再获取当前用户的 teacherNo
+    try {
+      const lockResponse = await checkLocked('acade')
+      if (lockResponse.data) {
+        // 已锁定
+        message.warning("新增功能已锁定，暂不允许操作")
+        return
+      }
+      
+      // 未锁定，继续获取 teacherNo
+      const response = await getMyTeacherNo()
+      const teacherNo = response.data
+      url.value = `/professional/file/teacherAboutInfoUpload?teacherNo=${teacherNo}&type=1`
+      Object.assign(dataForm, {
+        graduateTime: '',
+        type: '',
+        qualificationConfigId: '',
+        degreeConfigId: '',
+        graduateSchool: '',
+        major: '',
+        certificateNumber: '',
+        materialA: '',
+        materialB: '',
+        qualificationImg: '',
+        degreeImg: '',
+        state: '',
+        teacherNo: teacherNo,
+        id: ''
+      })
+      fileList.value = []
+      fileListB.value = []
+      // 先加载字典数据，再显示表单
+      await initDicData()
+      showForm.value = true
+      dialogVisible.value = true
+    } catch (error) {
+      message.error('获取教师编号失败')
+      return
+    }
+  }
 }

 // 提交表单
 const dialogSubmit = async () => {
  if (!formRef.value) return
  
+  // 验证证明材料是否上传（与 MultiDialog 保持一致：mateA 或 mateB 至少有一个）
+  if (!dataForm.qualificationImg && !dataForm.degreeImg && !dataForm.materialA && !dataForm.materialB) {
+    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 保持一致）
+          // 注意：MultiDialog 中 type 字段在提交时会被设置为 val（1），但表单中也有 type 字段用于教育类型
+          // 这里直接使用 dataForm 的所有字段，后端应该能够处理
+          const submitData: any = {
+            type: 1, // 学历更新类型（固定值，会覆盖表单中的 type）
+            teacherNo: dataForm.teacherNo,
+            graduateTime: dataForm.graduateTime,
+            qualificationConfigId: dataForm.qualificationConfigId,
+            degreeConfigId: dataForm.degreeConfigId,
+            graduateSchool: dataForm.graduateSchool,
+            major: dataForm.major,
+            certificateNumber: dataForm.certificateNumber,
+            mateA: dataForm.qualificationImg || dataForm.materialA, // 学历证书
+            mateB: dataForm.degreeImg || dataForm.materialB // 学位证书
+          }
+          
+          // 注意：MultiDialog 中教育类型字段也是 type，但在提交时会被覆盖为 val（1）
+          // 如果后端需要教育类型，可能需要单独传递，这里先不传，保持与 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 || '操作失败')
--- a/src/views/professional/professionalteacheracademicrelation/index.vue
+++ b/src/views/professional/professionalteacheracademicrelation/index.vue
@@ -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="xl" label="学历" width="180" align="center" />
-                    <el-table-column prop="total" 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_professionalteacheracademicrelation_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>
-        </template>
+            <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="graduateTime" label="毕业时间" width="180" align="center" />
        
@@ -144,10 +117,11 @@
              v-if="scope.row.qualificationImg && scope.row.qualificationImg !== ''" 
              type="primary"
              link
+              icon="Document"
              @click="handlePreview(scope.row.qiList, 1)">查看
-                        </el-button>
+            </el-button>
            <span v-else>-</span>
-            </template>
+          </template>
        </el-table-column>
        
        <el-table-column label="学位证书附件" width="130" align="center">
@@ -156,40 +130,44 @@
              v-if="scope.row.degreeImg && scope.row.degreeImg !== ''" 
              type="primary"
              link
+              icon="Document"
              @click="handlePreview(scope.row.deList, 2)">查看
            </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_professionalteacheracademicrelation_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_professionalteacheracademicrelation_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_professionalteacheracademicrelation_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_professionalteacheracademicrelation_del"
+              style="margin-left: 12px"
              @click="handleDel(scope.row)">删除
            </el-button>
        </template>
@@ -214,7 +192,6 @@
    </el-dialog>

      <!-- 子组件 -->
-      <MultiDialog ref="multiDialogRef" @getList="getDataList" :page="state.pagination" :nowRow="null" />
      <DataForm ref="dataFormRef" @refreshData="handleFilter" />
      <ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" />
    </div>
@@ -229,28 +206,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/professionalteacheracademicrelation'
 import { getDegreeList } from '/@/api/professional/rsbase/professionalacademicdegreeconfig'
 import { getQualificationList } from '/@/api/professional/rsbase/academicqualificationsconfig'
 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()
@@ -275,10 +252,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)

 // 搜索表单数据
@@ -288,10 +263,6 @@ const search = reactive({
  realName: ''
 })

-// 图表数据
-const chartOption = ref<any>({})
-const chartData = ref<any[]>([])
-
 // 材料预览
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
@@ -334,34 +305,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 || {}
-    
-    // 处理图表数据（如果有的话）
-    if (chartOption.value.series && chartOption.value.series[0] && chartOption.value.series[0].data) {
-      let total = 0
-      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({
-          xl: item.name,
-          total: item.value,
-          rate: `${rate}%`
-        })
-      })
-    }
-  } catch (error) {
-    // Failed to load chart data
-  }
-}
-
 // 预览材料
 const handlePreview = (list: string[], type: number) => {
  imgUrl.value = []
@@ -425,7 +368,7 @@ const resetQuery = () => {

 // 打开新增窗口
 const handleAdd = () => {
-  multiDialogRef.value?.init(1)
+  dataFormRef.value?.openDialog()
 }

 // 打开编辑窗口
--- a/src/views/professional/professionalteacheracademicrelation/statistics.vue
+++ b/src/views/professional/professionalteacheracademicrelation/statistics.vue
@@ -0,0 +1,83 @@
+<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="xl" label="学历" width="180" align="center" />
+              <el-table-column prop="total" 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/professionalteacheracademicrelation'
+
+// 注册 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 || {}
+    
+    // 处理图表数据
+    if (chartOption.value.series && chartOption.value.series[0] && chartOption.value.series[0].data) {
+      let total = 0
+      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({
+          xl: item.name,
+          total: item.value,
+          rate: `${rate}%`
+        })
+      })
+    }
+  } catch (error) {
+    // Failed to load chart data
+  }
+}
+
+// 页面加载时初始化图表
+onMounted(() => {
+  initChartOption()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
+