310 lines
7.5 KiB
Vue
310 lines
7.5 KiB
Vue
<template>
|
||
<GiPageLayout>
|
||
<div class="system-insurance-overview-container">
|
||
<!-- 页面标题 -->
|
||
<div class="page-header">
|
||
<h2 class="page-title">工作台概览</h2>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="stats-grid">
|
||
<a-card class="stat-card" :bordered="false">
|
||
<div class="stat-content">
|
||
<div class="stat-value">{{ stats.totalEmployees }}</div>
|
||
<div class="stat-label">员工总数</div>
|
||
<div class="stat-trend">↑ 5% 较上月</div>
|
||
</div>
|
||
</a-card>
|
||
|
||
<a-card class="stat-card" :bordered="false">
|
||
<div class="stat-content">
|
||
<div class="stat-value">{{ stats.validPolicies }}</div>
|
||
<div class="stat-label">有效保单</div>
|
||
<div class="stat-trend">↑ 3% 较上月</div>
|
||
</div>
|
||
</a-card>
|
||
|
||
<a-card class="stat-card" :bordered="false">
|
||
<div class="stat-content">
|
||
<div class="stat-value">{{ stats.expiringPolicies }}</div>
|
||
<div class="stat-label">即将到期</div>
|
||
<div class="stat-trend">↑ 5% 较上月</div>
|
||
</div>
|
||
</a-card>
|
||
|
||
<a-card class="stat-card" :bordered="false">
|
||
<div class="stat-content">
|
||
<div class="stat-value">{{ stats.annualPremium }}</div>
|
||
<div class="stat-label">年度总保费</div>
|
||
<div class="stat-trend">↑ 8% 较上年</div>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
|
||
<!-- 筛选和操作区域 -->
|
||
<div class="filter-section">
|
||
<div class="filter-left">
|
||
<a-select v-model="selectedDepartment" placeholder="全部部门" style="width: 150px">
|
||
<a-option value="">全部部门</a-option>
|
||
<a-option value="tech">技术部</a-option>
|
||
<a-option value="sales">销售部</a-option>
|
||
<a-option value="hr">人事部</a-option>
|
||
<a-option value="finance">财务部</a-option>
|
||
</a-select>
|
||
<a-button type="primary" @click="handleFilter">
|
||
筛选
|
||
</a-button>
|
||
</div>
|
||
<div class="filter-right">
|
||
<a-button type="outline" @click="handleExportExcel">
|
||
<template #icon><icon-download /></template>
|
||
导出Excel
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 即将到期提醒 -->
|
||
<a-alert
|
||
type="warning"
|
||
:message="expiringAlert"
|
||
:closable="false"
|
||
show-icon
|
||
class="expiring-alert"
|
||
/>
|
||
|
||
<!-- 保险类型分布图 -->
|
||
<a-card class="chart-card" :bordered="false">
|
||
<template #title>
|
||
<div class="chart-title">
|
||
<icon-bar-chart />
|
||
保险类型分布图表
|
||
</div>
|
||
</template>
|
||
|
||
<div class="chart-container">
|
||
<div class="chart-placeholder">
|
||
<div class="chart-legend">
|
||
<div class="legend-item">
|
||
<div class="legend-color medical"></div>
|
||
<span class="legend-text">医疗保险 (45%)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color accident"></div>
|
||
<span class="legend-text">意外险 (25%)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color pension"></div>
|
||
<span class="legend-text">养老保险 (20%)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color life"></div>
|
||
<span class="legend-text">人寿保险 (10%)</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-visual">
|
||
<!-- 简单的饼图可视化 -->
|
||
<svg width="300" height="300" viewBox="0 0 300 300">
|
||
<circle cx="150" cy="150" r="80" fill="#1890ff" stroke="#fff" stroke-width="2" />
|
||
<circle cx="150" cy="150" r="80" fill="#52c41a" stroke="#fff" stroke-width="2"
|
||
stroke-dasharray="125.6 502.4" stroke-dashoffset="0"
|
||
transform="rotate(90 150 150)" />
|
||
<circle cx="150" cy="150" r="80" fill="#faad14" stroke="#fff" stroke-width="2"
|
||
stroke-dasharray="100.5 527.5" stroke-dashoffset="-125.6"
|
||
transform="rotate(90 150 150)" />
|
||
<circle cx="150" cy="150" r="80" fill="#f5222d" stroke="#fff" stroke-width="2"
|
||
stroke-dasharray="62.8 565.2" stroke-dashoffset="-226.1"
|
||
transform="rotate(90 150 150)" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</GiPageLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue'
|
||
import { Message } from '@arco-design/web-vue'
|
||
import { IconDownload, IconBarChart } from '@arco-design/web-vue/es/icon'
|
||
|
||
// 统计数据
|
||
const stats = reactive({
|
||
totalEmployees: 156,
|
||
validPolicies: 142,
|
||
expiringPolicies: 23,
|
||
annualPremium: '¥ 1,256,800'
|
||
})
|
||
|
||
// 筛选条件
|
||
const selectedDepartment = ref('')
|
||
|
||
// 即将到期提醒
|
||
const expiringAlert = '您有 3份 保险即将在30天内到期，请及时处理。'
|
||
|
||
// 筛选操作
|
||
const handleFilter = () => {
|
||
Message.info('筛选功能已执行')
|
||
}
|
||
|
||
// 导出Excel
|
||
const handleExportExcel = () => {
|
||
Message.success('Excel文件导出成功')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.system-insurance-overview-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
margin: 0;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.stat-content {
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #4e5969;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-trend {
|
||
font-size: 12px;
|
||
color: #52c41a;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.filter-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding: 16px 20px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.filter-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.filter-right {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.expiring-alert {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.chart-card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.chart-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
}
|
||
|
||
.chart-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.chart-placeholder {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 40px;
|
||
}
|
||
|
||
.chart-legend {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.legend-color {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.legend-color.medical {
|
||
background: #1890ff;
|
||
}
|
||
|
||
.legend-color.accident {
|
||
background: #52c41a;
|
||
}
|
||
|
||
.legend-color.pension {
|
||
background: #faad14;
|
||
}
|
||
|
||
.legend-color.life {
|
||
background: #f5222d;
|
||
}
|
||
|
||
.legend-text {
|
||
font-size: 14px;
|
||
color: #4e5969;
|
||
}
|
||
|
||
.chart-visual {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style> |