新增统计板块
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']
|
UploadImgs: typeof import('./src/components/Upload/UploadImgs.vue')['default']
|
||||||
UserSelector: typeof import('./src/components/Selectors/UserSelector/index.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 "./organization";
|
||||||
export * from "./ops";
|
export * from "./ops";
|
||||||
export * from "./weibingju/medicinal";
|
export * from "./WeiBingJu/medicinal";
|
||||||
export * from "./weibingju/prescription";
|
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