人员管理

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/professionaltitlerelation/statistics.vue
+++ b/src/views/professional/professionaltitlerelation/statistics.vue
@@ -0,0 +1,119 @@
+<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>
+