新增统计板块
This commit is contained in:
fuenmao
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"ExpandedNodes": [
|
||||
""
|
||||
],
|
||||
"SelectedNode": "\\E:\\\u9879\u76EE\\weibingjuqianduan",
|
||||
"PreviewInSolutionExplorer": false
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,101 @@
|
||||
{
|
||||
"Version": 1,
|
||||
"WorkspaceRootPath": "E:\\\u9879\u76EE\\weibingjuqianduan\\",
|
||||
"Documents": [],
|
||||
"DocumentGroupContainers": [
|
||||
{
|
||||
"Orientation": 0,
|
||||
"VerticalTabListWidth": 256,
|
||||
"DocumentGroups": [
|
||||
{
|
||||
"DockedWidth": 200,
|
||||
"SelectedChildIndex": -1,
|
||||
"Children": [
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:135:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:134:0:{116d2292-e37d-41cd-a077-ebacac4c8cc4}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:133:0:{116d2292-e37d-41cd-a077-ebacac4c8cc4}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:128:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:132:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:132:0:{116d2292-e37d-41cd-a077-ebacac4c8cc4}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:129:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:136:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:137:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:130:0:{116d2292-e37d-41cd-a077-ebacac4c8cc4}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:138:0:{116d2292-e37d-41cd-a077-ebacac4c8cc4}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:140:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:141:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:139:0:{116d2292-e37d-41cd-a077-ebacac4c8cc4}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:142:0:{116d2292-e37d-41cd-a077-ebacac4c8cc4}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:139:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:138:0:{1fc202d4-d401-403c-9834-5b218574bb67}"
|
||||
},
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:137:0:{116d2292-e37d-41cd-a077-ebacac4c8cc4}"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"DockedWidth": 1882,
|
||||
"SelectedChildIndex": -1,
|
||||
"Children": [
|
||||
{
|
||||
"$type": "Bookmark",
|
||||
"Name": "ST:0:0:{34e76e81-ee4a-11d0-ae2e-00a0c90fffc3}"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Vendored
+3
@@ -111,4 +111,7 @@ declare module 'vue' {
|
||||
UploadImgs: typeof import('./src/components/Upload/UploadImgs.vue')['default']
|
||||
UserSelector: typeof import('./src/components/Selectors/UserSelector/index.vue')['default']
|
||||
}
|
||||
export interface ComponentCustomProperties {
|
||||
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+21123
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* @description 微病句统计分析接口
|
||||
*/
|
||||
|
||||
import { moduleRequest } from "@/api/request";
|
||||
|
||||
// 请求前缀
|
||||
const http = moduleRequest("/biz/weibingju/statistics/");
|
||||
|
||||
/**
|
||||
* 统计接口
|
||||
*/
|
||||
const statisticsApi = {
|
||||
/** 获取全量总览数据（不区分年份，含剩余药材库存价值） */
|
||||
getTotalOverview() {
|
||||
return http.get<TotalOverviewDto>("overview");
|
||||
},
|
||||
|
||||
/** 获取年度统计数据 */
|
||||
getYearlyStatistics(params: { year: string }) {
|
||||
return http.get<YearlyStatisticsDto>("yearly", params);
|
||||
},
|
||||
|
||||
/** 获取月度明细数据 */
|
||||
getMonthlyDetails(params: { year: string }) {
|
||||
return http.get<MonthlyDetailDto[]>("monthly", params);
|
||||
}
|
||||
};
|
||||
|
||||
/** 全量总览数据 DTO */
|
||||
export interface TotalOverviewDto {
|
||||
totalCost: number; // 历史处方总花费
|
||||
totalQty: number; // 历史处方总数量
|
||||
staffCost: number; // 员工花费
|
||||
familyCost: number; // 家属花费
|
||||
staffQty: number; // 员工处方数
|
||||
familyQty: number; // 家属处方数
|
||||
materialCost: number; // 药材采购总花费
|
||||
serviceCount: number; // 累计服务人数
|
||||
remainingMedicinalValue: number; // 当前剩余药材库存价值
|
||||
}
|
||||
|
||||
/** 年度统计数据 DTO */
|
||||
export interface YearlyStatisticsDto {
|
||||
year: string;
|
||||
totalCost: number; // 总花费
|
||||
totalQty: number; // 总数量
|
||||
staffCost: number; // 员工花费
|
||||
familyCost: number; // 家属花费
|
||||
staffQty: number; // 员工处方数
|
||||
familyQty: number; // 家属处方数
|
||||
materialCost: number; // 药材花费
|
||||
serviceCount: number; // 服务人数
|
||||
|
||||
// 同比趋势（百分比）
|
||||
totalCostTrend: number; // 处方总花费趋势
|
||||
totalQtyTrend: number; // 处方总数量趋势
|
||||
materialCostTrend: number; // 药材花费趋势
|
||||
serviceCountTrend: number; // 服务人数趋势
|
||||
}
|
||||
|
||||
/** 月度明细数据 DTO */
|
||||
export interface MonthlyDetailDto {
|
||||
month: string; // 月份
|
||||
staffCost: number; // 员工处方花费
|
||||
familyCost: number; // 家属处方花费
|
||||
staffQty: number; // 员工处方数量
|
||||
familyQty: number; // 家属处方数量
|
||||
materialCost: number; // 药材花费
|
||||
}
|
||||
|
||||
export { statisticsApi };
|
||||
@@ -15,5 +15,6 @@
|
||||
|
||||
export * from "./organization";
|
||||
export * from "./ops";
|
||||
export * from "./weibingju/medicinal";
|
||||
export * from "./weibingju/prescription";
|
||||
export * from "./WeiBingJu/medicinal";
|
||||
export * from "./WeiBingJu/prescription";
|
||||
export * from "./WeiBingJu/statistics";
|
||||
|
||||
@@ -0,0 +1,881 @@
|
||||
<template>
|
||||
<div class="statistics-container">
|
||||
<!-- 顶部筛选栏 -->
|
||||
<div class="header-filter">
|
||||
<div class="filter-left">
|
||||
<el-icon :size="24" class="leaf-icon">
|
||||
<Operation />
|
||||
</el-icon>
|
||||
<div class="title-block">
|
||||
<h1>数据统计与分析</h1>
|
||||
<p class="subtitle">未病局运营数据统计工作台</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-right">
|
||||
<el-radio-group v-model="selectedYear" class="year-selector">
|
||||
<el-radio-button v-for="year in availableYears" :key="year" :label="year">
|
||||
{{ year }}年
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 总数据概览（全量，不区分年份） -->
|
||||
<div class="overview-section total-overview-section" v-loading="overviewLoading">
|
||||
<div class="section-header">
|
||||
<h2>
|
||||
<el-icon class="header-icon">
|
||||
<DataAnalysis />
|
||||
</el-icon>
|
||||
总数据概览
|
||||
</h2>
|
||||
<span class="update-time">累计全部时间段数据</span>
|
||||
</div>
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card" v-for="(card, index) in overviewCards" :key="index" :class="card.colorClass">
|
||||
<div class="card-header">
|
||||
<div class="icon-wrapper">
|
||||
<component :is="card.icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="card-title">{{ card.title }}</p>
|
||||
<div class="card-value">
|
||||
<h3>{{ card.value.toLocaleString() }}</h3>
|
||||
<span class="unit">{{ card.unit }}</span>
|
||||
</div>
|
||||
<p class="card-sub" v-if="card.subValue">{{ card.subValue }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 年度数据概览 -->
|
||||
<div class="overview-section" v-loading="loading">
|
||||
<div class="section-header">
|
||||
<h2>
|
||||
<el-icon class="header-icon">
|
||||
<Calendar />
|
||||
</el-icon>
|
||||
{{ selectedYear }}年度数据概览
|
||||
</h2>
|
||||
<span class="update-time">统计截至: {{ currentDate }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card" v-for="(card, index) in statCards" :key="index" :class="card.colorClass">
|
||||
<div class="card-header">
|
||||
<div class="icon-wrapper">
|
||||
<component :is="card.icon" />
|
||||
</div>
|
||||
<span class="trend" :class="card.trend > 0 ? 'trend-up' : 'trend-down'" v-if="card.trend !== 0">
|
||||
<span class="trend-pct">
|
||||
<el-icon>
|
||||
<Top v-if="card.trend > 0" />
|
||||
<Bottom v-else />
|
||||
</el-icon>
|
||||
{{ Math.abs(card.trend) }}%
|
||||
</span>
|
||||
<span class="trend-label">相比去年</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="card-title">{{ card.title }}</p>
|
||||
<div class="card-value">
|
||||
<h3>{{ card.value.toLocaleString() }}</h3>
|
||||
<span class="unit">{{ card.unit }}</span>
|
||||
</div>
|
||||
<p class="card-sub" v-if="card.subValue">{{ card.subValue }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<div class="charts-section" v-loading="loading">
|
||||
<!-- 月度趋势图 -->
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<div>
|
||||
<h3>{{ selectedYear }}月度支出趋势统计</h3>
|
||||
<p class="chart-desc">处方总费用与药材成本月度变化</p>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span class="legend-item">
|
||||
<i class="legend-dot blue"></i> 处方花费
|
||||
</span>
|
||||
<span class="legend-item">
|
||||
<i class="legend-dot amber"></i> 药材花费
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-content">
|
||||
<div ref="trendChartRef" class="echart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 月度明细表格 -->
|
||||
<div class="table-section" v-loading="loading">
|
||||
<div class="table-header">
|
||||
<h3>
|
||||
<el-icon>
|
||||
<Filter />
|
||||
</el-icon>
|
||||
{{ selectedYear }}月度明细数据列表
|
||||
</h3>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<el-table :data="tableData" stripe class="statistics-table">
|
||||
<el-table-column prop="month" label="统计月份" min-width="100" />
|
||||
<el-table-column label="处方花费 (员工/家属)" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="cost-split">
|
||||
<span class="staff-cost">员: ¥{{ row.staffCost }}</span>
|
||||
<span class="family-cost">属: ¥{{ row.familyCost }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="处方数量 (员工/家属)" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.staffQty }} / {{ row.familyQty }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="处方总量" min-width="110">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.staffQty + row.familyQty }} 张</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="处方总额" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag class="prescription-tag">¥{{ (row.staffCost + row.familyCost).toLocaleString()
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="药材花费" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag class="material-tag">¥{{ row.materialCost.toLocaleString() }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="WeiBingJuStatistics">
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
|
||||
import { Calendar, Operation, Filter, Top, Bottom, DataAnalysis } from '@element-plus/icons-vue';
|
||||
import * as echarts from 'echarts';
|
||||
import type { ECharts } from 'echarts';
|
||||
import dayjs from 'dayjs';
|
||||
import { statisticsApi } from '@/api/modules/biz';
|
||||
import type { YearlyStatisticsDto, MonthlyDetailDto, TotalOverviewDto } from '@/api/modules/biz/WeiBingJu/statistics';
|
||||
|
||||
// ─── 响应式状态 ───────────────────────────────────────────────
|
||||
const currentYear = dayjs().year();
|
||||
const selectedYear = ref(currentYear.toString());
|
||||
const currentDate = ref(dayjs().format('YYYY-MM-DD'));
|
||||
|
||||
const trendChartRef = ref<HTMLElement>();
|
||||
const trendChartInstance = ref<ECharts>();
|
||||
|
||||
// 年度统计数据（来自后端）
|
||||
const yearlyData = ref<YearlyStatisticsDto | null>(null);
|
||||
// 全量总览数据（来自后端，不区分年份）
|
||||
const overviewData = ref<TotalOverviewDto | null>(null);
|
||||
// 月度明细数据（来自后端）
|
||||
const tableData = ref<MonthlyDetailDto[]>([]);
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
const overviewLoading = ref(false);
|
||||
|
||||
// ─── 可选年份（2025 ~ 今年） ──────────────────────────────────
|
||||
const availableYears = computed(() => {
|
||||
const startYear = 2025;
|
||||
const years: string[] = [];
|
||||
for (let year = startYear; year <= currentYear; year++) {
|
||||
years.push(year.toString());
|
||||
}
|
||||
return years;
|
||||
});
|
||||
|
||||
// ─── 全量总览卡片（不区分年份） ────────────────────────────────
|
||||
const overviewCards = computed(() => {
|
||||
const d = overviewData.value;
|
||||
if (!d) return [];
|
||||
const familyRatio = d.totalQty > 0
|
||||
? ((d.familyQty / d.totalQty) * 100).toFixed(1)
|
||||
: '0.0';
|
||||
return [
|
||||
{
|
||||
title: '处方总花费',
|
||||
value: d.totalCost,
|
||||
unit: '元',
|
||||
icon: 'Wallet',
|
||||
subValue: `其中员工: \u00a5${d.staffCost.toLocaleString()}`,
|
||||
colorClass: 'blue'
|
||||
},
|
||||
{
|
||||
title: '处方总数量',
|
||||
value: d.totalQty,
|
||||
unit: '张',
|
||||
icon: 'Document',
|
||||
subValue: `家属占比: ${familyRatio}%`,
|
||||
colorClass: 'indigo'
|
||||
},
|
||||
{
|
||||
title: '累计服务人数',
|
||||
value: d.serviceCount,
|
||||
unit: '人次',
|
||||
icon: 'User',
|
||||
subValue: `家属占比: ${familyRatio}%`,
|
||||
colorClass: 'green'
|
||||
},
|
||||
{
|
||||
title: '药材采购总花费',
|
||||
value: d.materialCost,
|
||||
unit: '元',
|
||||
icon: 'TrendCharts',
|
||||
subValue: `剩余库存价值: \u00a5${d.remainingMedicinalValue.toLocaleString()}`,
|
||||
colorClass: 'amber'
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
// ─── 统计卡片（基于后端数据） ─────────────────────────────────
|
||||
const statCards = computed(() => {
|
||||
const d = yearlyData.value;
|
||||
if (!d) return [];
|
||||
|
||||
const familyRatio = d.totalQty > 0
|
||||
? ((d.familyQty / d.totalQty) * 100).toFixed(1)
|
||||
: '0.0';
|
||||
|
||||
return [
|
||||
{
|
||||
title: '处方总花费',
|
||||
value: d.totalCost,
|
||||
unit: '元',
|
||||
icon: 'Wallet',
|
||||
trend: d.totalCostTrend,
|
||||
subValue: `其中员工: ¥${d.staffCost.toLocaleString()}`,
|
||||
colorClass: 'blue'
|
||||
},
|
||||
{
|
||||
title: '处方总数量',
|
||||
value: d.totalQty,
|
||||
unit: '张',
|
||||
icon: 'Document',
|
||||
trend: d.totalQtyTrend,
|
||||
subValue: `家属占比: ${familyRatio}%`,
|
||||
colorClass: 'indigo'
|
||||
},
|
||||
{
|
||||
title: '服务人数统计',
|
||||
value: d.serviceCount,
|
||||
unit: '人次',
|
||||
icon: 'User',
|
||||
trend: d.serviceCountTrend,
|
||||
subValue: `家属占比: ${familyRatio}%`,
|
||||
colorClass: 'green'
|
||||
},
|
||||
{
|
||||
title: '药材耗材花费',
|
||||
value: d.materialCost,
|
||||
unit: '元',
|
||||
icon: 'TrendCharts',
|
||||
trend: d.materialCostTrend,
|
||||
subValue: d.materialCostTrend >= 0 ? '相比上年度有所增长' : '相比上年度有所下降',
|
||||
colorClass: 'amber'
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
// ─── 图表 ─────────────────────────────────────────────────────
|
||||
const buildChartOption = (data: MonthlyDetailDto[]) => ({
|
||||
grid: {
|
||||
top: 30,
|
||||
right: 30,
|
||||
bottom: 40,
|
||||
left: 70,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
borderColor: '#e5e7eb',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#1e293b' },
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: { color: '#94a3b8' }
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.map(item => item.month),
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#94a3b8',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
rotate: 0
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
lineStyle: { color: '#f1f5f9', type: 'dashed' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#94a3b8',
|
||||
fontSize: 12,
|
||||
formatter: (val: number) => `¥${(val / 1000).toFixed(0)}k`
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '总处方花费',
|
||||
type: 'line',
|
||||
data: data.map(item => item.staffCost + item.familyCost),
|
||||
smooth: true,
|
||||
lineStyle: { width: 3, color: '#3b82f6' },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(59, 130, 246, 0.1)' },
|
||||
{ offset: 1, color: 'rgba(59, 130, 246, 0)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
itemStyle: { color: '#3b82f6' }
|
||||
},
|
||||
{
|
||||
name: '药材花费',
|
||||
type: 'line',
|
||||
data: data.map(item => item.materialCost),
|
||||
smooth: true,
|
||||
lineStyle: { width: 2, color: '#f59e0b', type: 'dashed' },
|
||||
itemStyle: { color: '#f59e0b' }
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const initTrendChart = () => {
|
||||
if (!trendChartRef.value) return;
|
||||
if (!trendChartInstance.value) {
|
||||
trendChartInstance.value = echarts.init(trendChartRef.value);
|
||||
}
|
||||
// 初始化时用空数据占位
|
||||
trendChartInstance.value.setOption(buildChartOption([]));
|
||||
};
|
||||
|
||||
const updateChart = (data: MonthlyDetailDto[]) => {
|
||||
trendChartInstance.value?.setOption(buildChartOption(data));
|
||||
};
|
||||
|
||||
// ─── 数据加载 ─────────────────────────────────────────────────
|
||||
const loadOverview = async () => {
|
||||
overviewLoading.value = true;
|
||||
try {
|
||||
const res = await statisticsApi.getTotalOverview();
|
||||
overviewData.value = res.data;
|
||||
} catch (e) {
|
||||
console.error('总览数据加载失败', e);
|
||||
} finally {
|
||||
overviewLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const year = selectedYear.value;
|
||||
const [yearlyRes, monthlyRes] = await Promise.all([
|
||||
statisticsApi.getYearlyStatistics({ year }),
|
||||
statisticsApi.getMonthlyDetails({ year })
|
||||
]);
|
||||
yearlyData.value = yearlyRes.data;
|
||||
tableData.value = monthlyRes.data;
|
||||
updateChart(monthlyRes.data);
|
||||
} catch (e) {
|
||||
console.error('统计数据加载失败', e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// ─── 年份切换 ─────────────────────────────────────────────────
|
||||
watch(selectedYear, () => {
|
||||
loadData();
|
||||
});
|
||||
|
||||
// ─── 窗口 Resize ──────────────────────────────────────────────
|
||||
const handleResize = () => {
|
||||
trendChartInstance.value?.resize();
|
||||
};
|
||||
|
||||
// ─── 生命周期 ─────────────────────────────────────────────────
|
||||
onMounted(async () => {
|
||||
initTrendChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
// 并发加载：总览（不依赖年份）+ 年度数据
|
||||
await Promise.all([loadOverview(), loadData()]);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
trendChartInstance.value?.dispose();
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.statistics-container {
|
||||
padding: 20px;
|
||||
background: #f8fafc;
|
||||
min-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
// 顶部筛选栏
|
||||
.header-filter {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px 24px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.filter-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.leaf-icon {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #1e293b;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin: 2px 0 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.year-selector {
|
||||
:deep(.el-radio-button__inner) {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
|
||||
background: white;
|
||||
color: #10b981;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 年度概览
|
||||
.overview-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.header-icon {
|
||||
color: #10b981;
|
||||
}
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 14px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #f1f5f9;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.icon-wrapper {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.trend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
||||
&.trend-up {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
&.trend-down {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.trend-pct {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.trend-label {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
opacity: 0.75;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.blue .icon-wrapper {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
&.indigo .icon-wrapper {
|
||||
background: #6366f1;
|
||||
}
|
||||
|
||||
&.amber .icon-wrapper {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
&.green .icon-wrapper {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.card-sub {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图表区域
|
||||
.charts-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.chart-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #f1f5f9;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 32px;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chart-desc {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
|
||||
.legend-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
|
||||
&.blue {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
&.amber {
|
||||
background: #f59e0b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.echart-container {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格区域
|
||||
.table-section {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #f1f5f9;
|
||||
|
||||
.table-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
|
||||
// 移动端优化滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statistics-table {
|
||||
min-width: 800px; // 确保表格有最小宽度，小屏幕下可以横向滚动
|
||||
|
||||
:deep(.el-table__header th) {
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap; // 防止表头换行
|
||||
}
|
||||
|
||||
:deep(.el-table__row) {
|
||||
&:hover {
|
||||
background: rgba(248, 250, 252, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.cost-split {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.staff-cost {
|
||||
font-size: 12px;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.family-cost {
|
||||
font-size: 12px;
|
||||
color: #10b981;
|
||||
}
|
||||
}
|
||||
|
||||
.total-cost {
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.prescription-tag {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
border: 1px solid #bfdbfe;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.material-tag {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
border: 1px solid #fde68a;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 总数据扆览板块——卡片数与年度一致（4张），不需要覆盖列数
|
||||
// .total-overview-section 展示逻辑已通过 section-header 标题区分</style>
|
||||
Reference in New Issue
Block a user