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>
|