wangyizhe/his
1
3
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(reportmanage): 可视化仪表盘前端页面

Browse Source
This commit is contained in:
chenqi
2026-06-18 15:16:54 +08:00
parent 7d196f83fc
commit ed0d05327d
1 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
healthlink-his-ui/src/views/reportmanage/DashboardData.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<div class="app-container">
<el-card shadow="never">
<template #header>
<div class="card-header">
<span>可视化仪表盘</span>
<div>
<el-select v-model="dashboardType" placeholder="仪表盘类型" clearable style="margin-right:10px;width:160px" @change="loadData">
<el-option label="运营总览" value="overview" />
<el-option label="财务分析" value="finance" />
<el-option label="患者统计" value="patient" />
</el-select>
<el-button type="primary" :loading="loading" @click="loadData">刷新</el-button>
</div>
</div>
</template>
<el-row :gutter="16" class="mb16">
<el-col :span="6">
<el-card shadow="hover" :body-style="{padding:'16px'}">
<div style="text-align:center">
<div style="font-size:24px;font-weight:bold;color:#409eff">{{ formatMoney(dashData.totalRevenue) }}</div>
<div style="font-size:13px;color:#999;margin-top:4px">总收入(万)</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{padding:'16px'}">
<div style="text-align:center">
<div style="font-size:24px;font-weight:bold;color:#67c23a">{{ formatMoney(dashData.totalProfit) }}</div>
<div style="font-size:13px;color:#999;margin-top:4px">总利润(万)</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{padding:'16px'}">
<div style="text-align:center">
<div style="font-size:24px;font-weight:bold;color:#e6a23c">{{ dashData.totalPatients || 0 }}</div>
<div style="font-size:13px;color:#999;margin-top:4px">总患者数</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{padding:'16px'}">
<div style="text-align:center">
<div style="font-size:24px;font-weight:bold;color:#f56c6c">{{ dashData.totalDrgCases || 0 }}</div>
<div style="font-size:13px;color:#999;margin-top:4px">DRG病例数</div>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="16" class="mb16">
<el-col :span="6">
<el-card shadow="hover" :body-style="{padding:'16px'}">
<div style="text-align:center">
<div style="font-size:20px;font-weight:bold;color:#409eff">{{ formatMoney(dashData.totalCost) }}</div>
<div style="font-size:13px;color:#999;margin-top:4px">总成本(万)</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{padding:'16px'}">
<div style="text-align:center">
<div style="font-size:20px;font-weight:bold;color:#67c23a">{{ dashData.latestCmiValue || '-' }}</div>
<div style="font-size:13px;color:#999;margin-top:4px">最新CMI值</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{padding:'16px'}">
<div style="text-align:center">
<div style="font-size:20px;font-weight:bold;color:#e6a23c">{{ dashData.latestCostControlRate || '-' }}%</div>
<div style="font-size:13px;color:#999;margin-top:4px">成本控制率</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{padding:'16px'}">
<div style="text-align:center">
<div style="font-size:20px;font-weight:bold;color:#909399">{{ dashData.totalRecords || 0 }}</div>
<div style="font-size:13px;color:#999;margin-top:4px">数据记录数</div>
</div>
</el-card>
</el-col>
</el-row>
</el-card>
<el-card v-if="charts" shadow="never" class="mt16">
<template #header>
<span>图表数据</span>
</template>
<el-row :gutter="16">
<el-col :span="12">
<el-card shadow="never">
<template #header><span>月度收支趋势</span></template>
<el-table :data="charts.revenueChart || []" border size="small">
<el-table-column prop="month" label="月份" width="100" align="center" />
<el-table-column label="收入(万)" align="right">
<template #default="{ row }">{{ formatMoney(row.revenue) }}</template>
</el-table-column>
<el-table-column label="成本(万)" align="right">
<template #default="{ row }">{{ formatMoney(row.cost) }}</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="never">
<template #header><span>科室收入分布</span></template>
<el-table :data="charts.departmentChart || []" border size="small">
<el-table-column prop="department" label="科室" width="160" show-overflow-tooltip />
<el-table-column label="收入(万)" align="right">
<template #default="{ row }">{{ formatMoney(row.revenue) }}</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
<el-row :gutter="16" class="mt16">
<el-col :span="24">
<el-card shadow="never">
<template #header><span>DRG绩效趋势</span></template>
<el-table :data="charts.cmiChart || []" border size="small">
<el-table-column prop="month" label="月份" width="120" align="center" />
<el-table-column prop="cmiValue" label="CMI值" width="100" align="center" />
<el-table-column prop="costControlRate" label="成本控制率(%)" width="120" align="center" />
<el-table-column prop="totalCases" label="病例数" width="100" align="center" />
</el-table>
</el-card>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script setup name="DashboardData" lang="ts">
import { ref, onMounted } from 'vue'
import { getDashboardData, getDashboardCharts } from '@/api/reportmanage'
const loading = ref(false)
const dashboardType = ref('overview')
const dashData = ref({})
const charts = ref(null)
function formatMoney(val) {
if (!val) return '0.00'
return (val / 10000).toFixed(2)
}
function loadData() {
loading.value = true
Promise.all([
getDashboardData({ dashboardType: dashboardType.value }),
getDashboardCharts({ dashboardType: dashboardType.value })
]).then(([dataRes, chartRes]) => {
dashData.value = dataRes.data || {}
charts.value = chartRes.data || {}
}).finally(() => {
loading.value = false
})
}
onMounted(() => loadData())
</script>
<style lang="scss" scoped>
.app-container {
padding: 20px;
}
.mt16 {
margin-top: 16px;
}
.mb16 {
margin-bottom: 16px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>