120 lines
4.0 KiB
Vue
120 lines
4.0 KiB
Vue
<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="titleChartRef" style="width: 100%; height: 400px;" :option="titleChartOption" />
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-table :data="titleChartTableData" 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>
|
|
|
|
<el-row :gutter="24" style="margin-top: 20px;">
|
|
<el-col :span="12">
|
|
<v-chart ref="techChartRef" style="width: 100%; height: 400px;" :option="techChartOption" />
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-table :data="techChartTableData" 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/professionaltitlerelation'
|
|
|
|
// 注册 ECharts 组件
|
|
use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
|
|
|
|
// 图表引用
|
|
const titleChartRef = ref()
|
|
const techChartRef = ref()
|
|
|
|
// 图表数据
|
|
const titleChartOption = ref<any>({})
|
|
const titleChartTableData = ref<any[]>([])
|
|
const techChartOption = ref<any>({})
|
|
const techChartTableData = ref<any[]>([])
|
|
|
|
// 初始化图表
|
|
const initChartOption = async () => {
|
|
try {
|
|
const response = await getChartOption()
|
|
const data = response.data.data || {}
|
|
|
|
// 职称图表
|
|
titleChartOption.value = data.titleOption || {}
|
|
let titleTotal = 0
|
|
if (titleChartOption.value.series && titleChartOption.value.series[0] && titleChartOption.value.series[0].data) {
|
|
titleChartOption.value.series[0].data.forEach((item: any) => {
|
|
titleTotal += item.value || 0
|
|
})
|
|
|
|
titleChartTableData.value = []
|
|
titleChartOption.value.series[0].data.forEach((item: any) => {
|
|
const rate = titleTotal > 0 ? Number((item.value / titleTotal * 100).toFixed(1)) : 0
|
|
titleChartTableData.value.push({
|
|
name: item.name,
|
|
value: item.value,
|
|
rate: `${rate}%`
|
|
})
|
|
})
|
|
}
|
|
|
|
// 技术职务图表
|
|
techChartOption.value = data.techOption || {}
|
|
let techTotal = 0
|
|
if (techChartOption.value.series && techChartOption.value.series[0] && techChartOption.value.series[0].data) {
|
|
techChartOption.value.series[0].data.forEach((item: any) => {
|
|
techTotal += item.value || 0
|
|
})
|
|
|
|
techChartTableData.value = []
|
|
techChartOption.value.series[0].data.forEach((item: any) => {
|
|
const rate = techTotal > 0 ? Number((item.value / techTotal * 100).toFixed(1)) : 0
|
|
techChartTableData.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>
|
|
|