| | |
| | | <span v-else>{{ item.value }}{{ item.unit }}</span> |
| | | </div> |
| | | <div class="card-label">{{ item.label }}</div> |
| | | <div class="card-trend" :class="item.trend > 0 ? 'positive' : 'negative'"> |
| | | <div class="card-trend" :class="item.trend > 0 ? 'positive' : 'negative'" v-if="item.showTrend !== false"> |
| | | <el-icon> |
| | | <component :is="item.trend > 0 ? 'ArrowUp' : 'ArrowDown'" /> |
| | | </el-icon> |
| | |
| | | ArrowDown |
| | | } from '@element-plus/icons-vue' |
| | | import * as echarts from 'echarts' |
| | | import { staffOnJobListPage } from '@/api/personnelManagement/employeeRecord.js' |
| | | |
| | | // 响应式数据 |
| | | const loading = ref(false) |
| | |
| | | unit: '人', |
| | | icon: 'PieChart', |
| | | type: 'warning', |
| | | trend: 0 |
| | | trend: 0, |
| | | showTrend: false |
| | | } |
| | | ]) |
| | | |
| | | // 部门数据 |
| | | const departmentData = ref([]) |
| | | |
| | | // 获取在职员工数 |
| | | const getStaffCount = async () => { |
| | | try { |
| | | const res = await staffOnJobListPage({ staffState: 1, current: 1, size: 1 }) |
| | | if (res && res.data) { |
| | | keyMetrics.value[3].value = res.data.total || 0 |
| | | } |
| | | } catch (error) { |
| | | console.error('获取在职员工数失败:', error) |
| | | } |
| | | } |
| | | |
| | | // 启动自动刷新 |
| | | const startAutoRefresh = () => { |
| | |
| | | |
| | | keyMetrics.value[2].value = (Math.random() * 15 + 85).toFixed(1) |
| | | keyMetrics.value[2].trend = (Math.random() * 3 - 1.5).toFixed(1) |
| | | |
| | | keyMetrics.value[3].value = 20 |
| | | keyMetrics.value[3].trend = (Math.random() * 2 - 1).toFixed(1) |
| | | |
| | | // 生成部门数据 |
| | | const departments = ['技术部', '销售部', '人事部', '财务部', '生产部', '市场部'] |
| | |
| | | // 生命周期 |
| | | onMounted(() => { |
| | | generateMockData() |
| | | getStaffCount() |
| | | initCharts() |
| | | startAutoRefresh() |
| | | }) |