template div !-- 顶部标题栏 -- header !-- 左侧筛选 -- div div el-date-picker ref="yearPicker" v-model="selectedYear" type="year" placeholder="选择年度" value-format="yyyy" @change="handleYearChange" placement="bottom-start" popper-class="drive-year-popper" align="center" clearable / /div div DictSelect dictCode="zjdict_XKLBDM" v-model="selectedDept" placeholder="选择学院" @change="handleDeptChange" popper-class="drive-college-popper" / /div div el-select v-model="selectedType" placeholder="选择人员" @change="handleTypeChange" filterable clearable popper-class="drive-personnel-popper" el-option v-for="item in personnelOptions" :key="item.value" :label="item.label" :value="item.value" / /el-select /div /div !-- 中间标题 -- div div人力资源管理系统/div /div !-- 右侧Tab -- div div :class="{ active: currentTab === 'personnel' }" @click="currentTab = 'personnel'" span人员分析/span /div div :class="{ active: currentTab === 'theme' }" @click="currentTab = 'theme'" span主题分析/span /div /div /header !-- 主内容区 -- main !-- 人员分析面板 -- div :class="{ active: currentTab === 'personnel' }" !-- 数据统计卡片 -- div !-- 卡片点击事件已注释，不再打开弹窗 -- div v-for="(stat, index) in statsList" :key="index" div img :src="cardDown" / img :src="getCardIcon(index)" / /div div div{ { stat.value }}/div div{ { stat.label }}/div /div /div /div !-- 第一组图表（4个） -- div div :style="{ backgroundImage: 'url(' + oneImg + ')' }" div span专任教师学位结构/span /div div ref="eduChart"/div /div div :style="{ backgroundImage: 'url(' + oneImg + ')' }" div span专任教师类型结构/span /div div ref="titleChart"/div /div div :style="{ backgroundImage: 'url(' + oneImg + ')' }" div span专任教师年龄结构/span /div div ref="ageChart"/div /div div :style="{ backgroundImage: 'url(' + oneImg + ')' }" div span近五年人员变动趋势/span /div div ref="trendChart"/div /div /div !-- 第二组图表（3个） -- div div :style="{ backgroundImage: 'url(' + twoImg + ')' }" div span校区人才分布/span /div div ref="talentChart"/div /div div :style="{ backgroundImage: 'url(' + twoImg + ')' }" div span教师类别结构分析/span /div div ref="adminChart"/div /div div :style="{ backgroundImage: 'url(' + twoImg + ')' }" div span学科类别结构分析/span /div div ref="supportChart"/div /div /div !-- 第三组图表（表格） -- div div :style="{ backgroundImage: 'url(' + threeImg + ')' }" div span各单位人员结构明细/span /div div table thead tr th单位名称/th th教职工总数/th th在职数量/th th专任教师/th th博士数量/th th博士占比/th th硕士数量/th th硕士占比/th th学士数量/th th学士占比/th th操作/th /tr /thead tbody tr v-for="(row, index) in pagedTableData" :key="index" @click="openDeptDetail(row)" td{ { row.unitName }}/td td{ { row.totalCount }}/td td{ { row.activeCount }}/td td{ { row.fullTimeCount }}/td td{ { row.doctorCount }}/td td{ { row.doctorRate }}/td td{ { row.masterCount }}/td td{ { row.masterRate }}/td td{ { row.bachelorCount }}/td td{ { row.bachelorRate }}/td tdspan @click.stop="openDeptDetail(row)"详情/span/td /tr /tbody /table div el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="tableTotalCount" :current-page.sync="tablePage" :page-size.sync="tablePageSize" :page-sizes="[5, 10, 20]" @current-change="handleTablePageChange" @size-change="handleTablePageSizeChange" / /div /div /div /div /div !-- 主题分析面板 -- div :class="{ active: currentTab === 'theme' }" !-- 数据统计卡片 -- div !-- 卡片点击事件已注释，不再打开弹窗 -- div v-for="(stat, index) in themeStats" :key="index" div img :src="cardDown" / img :src="getCardIcon(index)" / /div div div{ { stat.value }}/div div{ { stat.label }}/div /div /div /div !-- 第一组图表（4个） -- div div :style="{ backgroundImage: 'url(' + oneImg + ')' }" div span近五年人才引进学历分布/span /div div ref="recruitEduChart"/div /div div :style="{ backgroundImage: 'url(' + oneImg + ')' }" div span应聘人员学院背景/span /div div ref="backgroundChart"/div /div div :style="{ backgroundImage: 'url(' + oneImg + ')' }" div span近五年人力异动趋势/span /div div ref="changeTrendChart"/div /div div :style="{ backgroundImage: 'url(' + oneImg + ')' }" div span近五年本年度异动分类/span /div div ref="changeTypeChart"/div /div /div !-- 第二组图表（3个） -- div div :style="{ backgroundImage: 'url(' + twoImg + ')' }" div span近五年不同类别人员薪酬水平/span /div div ref="salaryLevelChart"/div /div div :style="{ backgroundImage: 'url(' + twoImg + ')' }" div span近五年薪酬福利趋势/span /div div ref="salaryTrendChart"/div /div div :style="{ backgroundImage: 'url(' + twoImg + ')' }" div span各单位人员排名TOP10/span /div div ref="deptCompareChart"/div /div /div !-- 第三组图表（表格） -- div div :style="{ backgroundImage: 'url(' + threeImg + ')' }" div span各单位人员结构明细/span /div div table thead tr th单位名称/th th教职工总数/th th在职数量/th th专任教师/th th博士数量/th th博士占比/th th硕士数量/th th硕士占比/th th学士数量/th th学士占比/th th操作/th /tr /thead tbody tr v-for="(row, index) in pagedTableData" :key="index" @click="openDeptDetail(row)" td{ { row.unitName }}/td td{ { row.totalCount }}/td td{ { row.activeCount }}/td td{ { row.fullTimeCount }}/td td{ { row.doctorCount }}/td td{ { row.doctorRate }}/td td{ { row.masterCount }}/td td{ { row.masterRate }}/td td{ { row.bachelorCount }}/td td{ { row.bachelorRate }}/td tdspan @click.stop="openDeptDetail(row)"详情/span/td /tr /tbody /table div el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="tableTotalCount" :current-page.sync="tablePage" :page-size.sync="tablePageSize" :page-sizes="[5, 10, 20]" @current-change="handleTablePageChange" @size-change="handleTablePageSizeChange" / /div /div /div /div /div /main !-- 详情弹窗 -- div :class="{ active: showDetailModal }" @click.self="closeDetailModal" div !-- 弹窗顶部装饰线 -- div/div !-- 弹窗标题栏 -- div span{ { modalTitle }}/span button @click="closeDetailModal"✕/button /div !-- 弹窗主体 -- div !-- 汇总卡片 -- div div div{ { modalSummaryCards[0].name }}/div div{ { modalSummaryCards[0].count }}/div /div div div{ { modalSummaryCards[1].name }}/div div{ { modalSummaryCards[1].count }}/div /div div div{ { modalSummaryCards[2].name }}/div div{ { modalSummaryCards[2].count }}/div /div /div !-- 雷达图区域 -- div div人员结构分析/div div ref="modalRadarChart"/div /div !-- 人员明细表格 -- div table thead tr th姓名/th th职称/th th学历/th th岗位/th th入职时间/th th状态/th /tr /thead tbody tr v-for="(person, idx) in pagedModalPersonList" :key="idx" td{ { person.name }}/td td{ { person.zc_dictText || '-' }}/td td{ { person.xueli_dictText || '-' }}/td td{ { person.xpgw_dictText || '-' }}/td td{ { formatTime(person.cjTime) }}/td tdspan :class="getStatusClass(person.zzlx_dictText)"{ { person.zzlx_dictText || '-' }}/span/td /tr /tbody /table div el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="modalTotalCount" :current-page.sync="modalPage" :page-size.sync="modalPageSize" :page-sizes="[5, 10, 20]" @current-change="handleModalPageChange" @size-change="handleModalPageSizeChange" / /div /div /div /div /div /div /template script import * as echarts from 'echarts' import 'echarts-gl' import DictSelect from '@/views/components/DictSelect' import { getAction, postAction } from '@/api/api' export default { name: 'DriveDashboard', components: { DictSelect }, data() { return { currentTab: 'personnel', cardDown: require('../../assets/images/drive/card_down.png').default, selectIcon: require('../../assets/images/drive/select.png'), oneImg: require('../../assets/images/drive/one.png').default, twoImg: require('../../assets/images/drive/two.png').default, threeImg: require('../../assets/images/drive/three.png').default, selectedYear: '', selectedDept: '', selectedType: '', personnelOptions: [], charts: {}, statsList: [ { label: '教职工总数', value: 2685 }, { label: '在职人员总数', value: 2156 }, { label: '离退休人员总数', value: 412 }, { label: '离校人员总数', value: 117 }, { label: '在编人员总数', value: 1862 }, { label: '外聘人员总数', value: 186 }, { label: '外籍人员总数', value: 42 }, { label: '非事业编人员', value: 66 } ], themeStats: [ { label: '本年度招聘人数', value: 168 }, { label: '本年度异动人数', value: 286 }, { label: '年度薪酬总额(万元)', value: 15420 }, { label: '各类荣誉数量', value: 128 }, { label: '培训覆盖人次', value: 3560 }, { label: '考核优秀人数', value: 892 }, { label: '岗位变动人数', value: 156 }, { label: '合同到期人数', value: 234 } ], tableData: [ { unitId: '2c948082995fc6e401996001aded0025', unitName: '音乐学院', totalCount: 186, fullTimeCount: 142, managementCount: 24, teachingAssistCount: 20, highLevelTalentCount: 18, doctorRate: '28.0%', seniorTitleRate: '42.0%' }, { unitId: '2c948082995fc6e401996001aded0026', unitName: '舞蹈学院', totalCount: 168, fullTimeCount: 134, managementCount: 18, teachingAssistCount: 18, highLevelTalentCount: 12, doctorRate: '18.0%', seniorTitleRate: '38.0%' }, { unitId: '2c948082995fc6e401996001aded0027', unitName: '戏剧学院', totalCount: 156, fullTimeCount: 118, managementCount: 22, teachingAssistCount: 16, highLevelTalentCount: 14, doctorRate: '22.0%', seniorTitleRate: '36.0%' }, { unitId: '2c948082995fc6e401996001aded0028', unitName: '美术学院', totalCount: 142, fullTimeCount: 108, managementCount: 20, teachingAssistCount: 14, highLevelTalentCount: 16, doctorRate: '24.0%', seniorTitleRate: '40.0%' }, { unitId: '2c948082995fc6e401996001aded0029', unitName: '设计学院', totalCount: 138, fullTimeCount: 106, managementCount: 18, teachingAssistCount: 14, highLevelTalentCount: 10, doctorRate: '20.0%', seniorTitleRate: '34.0%' }, { unitId: '2c948082995fc6e401996001aded0030', unitName: '传媒学院', totalCount: 128, fullTimeCount: 96, managementCount: 18, teachingAssistCount: 14, highLevelTalentCount: 8, doctorRate: '16.0%', seniorTitleRate: '32.0%' }, { unitId: '2c948082995fc6e401996001aded0031', unitName: '管理学院', totalCount: 116, fullTimeCount: 82, managementCount: 24, teachingAssistCount: 10, highLevelTalentCount: 6, doctorRate: '14.0%', seniorTitleRate: '30.0%' }, { unitId: '2c948082995fc6e401996001aded0032', unitName: '人文学院', totalCount: 108, fullTimeCount: 86, managementCount: 12, teachingAssistCount: 10, highLevelTalentCount: 10, doctorRate: '26.0%', seniorTitleRate: '38.0%' }, { unitId: '2c948082995fc6e401996001aded0033', unitName: '马克思主义学院', totalCount: 86, fullTimeCount: 72, managementCount: 8, teachingAssistCount: 6, highLevelTalentCount: 4, doctorRate: '32.0%', seniorTitleRate: '44.0%' }, { unitId: '2c948082995fc6e401996001aded0034', unitName: '公共课部', totalCount: 72, fullTimeCount: 58, managementCount: 8, teachingAssistCount: 6, highLevelTalentCount: 2, doctorRate: '12.0%', seniorTitleRate: '28.0%' } ], showDetailModal: false, modalTitle: '', modalSummaryCards: [ { label: '教职工总数', value: 0 }, { label: '专任教师', value: 0 }, { label: '高层次人才', value: 0 } ], modalPersonList: [], modalRadarChartInstance: null, // 主表分页 tablePage: 1, tablePageSize: 10, tableTotalCount: 0, // 弹窗表分页 modalPage: 1, modalPageSize: 10, modalTotalCount: 0, // 当前详情弹窗的部门ID currentDetailUnitId: '', // 设备性能降级开关（默认关闭，启用后低配设备自动使用 2D 饼图） enablePerformanceFallback: false, // ========== 接口数据存储 ========== // 人员分析卡片 apiStatsList: [], // 主题分析卡片 apiThemeStats: [], // 单位综合统计（表格） apiTableData: [], // 专任教师年龄结构（雷达图） apiAgeData: { seriesTitle: [], maxValue: 0, indicatorValue: [] }, // 专任教师学位结构（3D饼图） apiEduData: [], // 专任教师类型结构（柱状图） apiTitleData: { seriesData: [], xaxisData: [] }, // 教师类别结构分析（柱状图） apiAdminData: { seriesData: [], xaxisData: [] }, // 近五年人员变动趋势（折线图） apiTrendData: { seriesList: [], xaxisData: [] }, // 校区人才分布（3D饼图） apiTalentData: [], // 学科类别结构分析（柱状图） apiSupportData: { seriesData: [], xaxisData: [] }, // 部门所属职称/学位人员结构分析（雷达图） apiUnitTitleDegreeData: { indicatorValue: [], seriesTitle: [], maxValue: 0