ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

新增功能

Browse Source
This commit is contained in:
Your Name
2026-03-14 15:39:34 +08:00
parent 4ddee40675
commit 4a853ba237
27 changed files with 2906 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/src/views/workbench/index.vue
+367 -4
View File
@@ -1,6 +1,8 @@
<template>
<div class="workbench">
<div class="lg:flex">
<!-- <div class="lg:flex">
<el-card class="!border-none mb-4 lg:mr-4 lg:w-[350px]" shadow="never">
<template #header>
<span class="card-title">版本信息</span>
@@ -72,8 +74,8 @@
</div>
</div>
</el-card>
</div>
<div class="function mb-4">
</div> -->
<!-- <div class="function mb-4">
<el-card class="flex-1 !border-none" shadow="never">
<template #header>
<span>常用功能</span>
@@ -91,7 +93,232 @@
</div>
</div>
</el-card>
</div>
</div> -->
<!-- 医助理诊单统计 -->
<el-card class="!border-none mt-4 w-full" shadow="never">
<template #header>
<div class="flex justify-between items-center">
<span>医助理诊单统计</span>
<div class="flex items-center gap-2">
<span class="text-tx-secondary text-sm">
{{ assistantStats.date_range?.[0] }} 至 {{ assistantStats.date_range?.[1] }}
</span>
<el-select v-model="assistantStats.days" class="w-28" @change="loadAssistantStats">
<el-option label="今天" :value="0" />
<el-option label="最近7天" :value="7" />
<el-option label="最近14天" :value="14" />
<el-option label="最近30天" :value="30" />
</el-select>
<el-button type="primary" link @click="loadAssistantStats">刷新</el-button>
</div>
</div>
</template>
<!-- 今日统计 -->
<div class="mb-4 p-4 rounded-lg bg-blue-50 border border-blue-100">
<div class="flex items-center justify-between flex-wrap gap-4">
<div class="flex items-center gap-6">
<div>
<span class="text-tx-secondary text-sm">今日创建诊单</span>
<div class="text-2xl font-bold text-primary mt-1">{{ assistantStats.today_total ?? 0 }}</div>
</div>
<div v-if="assistantStats.today_ranking?.length" class="flex items-center gap-4 pl-6 border-l border-blue-200">
<span class="text-tx-secondary text-sm">今日排行：</span>
<div class="flex flex-wrap gap-2">
<span
v-for="(a, idx) in assistantStats.today_ranking.slice(0, 5)"
:key="a.id"
class="inline-flex items-center gap-1 px-2 py-1 rounded text-sm bg-white"
>
<span class="text-amber-500 font-medium">{{ idx + 1 }}.</span>
<span>{{ a.name }}</span>
<span class="text-primary font-medium">{{ a.count }}</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<!-- 医助排行 -->
<div class="lg:col-span-1">
<div class="font-medium text-gray-800 mb-3">医助排行</div>
<div v-if="assistantStats.ranking?.length" class="space-y-2">
<div
v-for="(a, idx) in assistantStats.ranking"
:key="a.id"
class="flex items-center justify-between py-2 px-3 rounded-lg"
:class="idx < 3 ? 'bg-amber-50' : 'bg-gray-50'"
>
<span class="flex items-center gap-2">
<span
class="w-6 h-6 rounded-full text-center text-xs font-medium leading-6"
:class="idx === 0 ? 'bg-amber-400 text-white' : idx === 1 ? 'bg-gray-300 text-gray-700' : idx === 2 ? 'bg-amber-200 text-amber-800' : 'bg-gray-200 text-gray-600'"
>
{{ idx + 1 }}
</span>
<span class="text-gray-800">{{ a.name }}</span>
</span>
<span class="font-semibold text-primary">{{ a.count }}</span>
</div>
</div>
<div v-else class="py-8 text-center text-tx-secondary">暂无排行数据</div>
</div>
<!-- 图表 -->
<div class="lg:col-span-2">
<div class="font-medium text-gray-800 mb-2">诊单数分布</div>
<v-charts
v-if="assistantStats.chart.xAxis?.length"
ref="assistantChart"
style="height: 320px"
:option="assistantChartOption"
:autoresize="true"
/>
<div v-else class="h-[320px] flex items-center justify-center text-tx-secondary">
暂无数据
</div>
</div>
</div>
<div v-if="assistantStats.departments?.length" class="mt-4 pt-4 border-t border-gray-100">
<div class="font-medium text-gray-800 mb-3">按部门统计</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div
v-for="dept in assistantStats.departments"
:key="dept.dept_id"
class="p-4 rounded-lg bg-gray-50"
>
<div class="font-medium text-gray-800 mb-2">{{ dept.dept_name }}（共{{ dept.total }}）</div>
<div class="space-y-1 text-sm">
<div
v-for="a in dept.assistants"
:key="`${dept.dept_id}-${a.id}`"
class="flex justify-between"
>
<span class="text-gray-600">{{ a.name }}</span>
<span class="font-medium">{{ a.count }}</span>
</div>
<div v-if="!dept.assistants?.length" class="text-tx-secondary">暂无医助</div>
</div>
</div>
</div>
</div>
</el-card>
<!-- 订单统计 -->
<el-card class="!border-none mt-4 w-full" shadow="never">
<template #header>
<span>订单统计</span>
</template>
<div class="order-stats-panel">
<div class="flex justify-between items-center mb-4 flex-wrap gap-2">
<span class="text-tx-secondary text-sm">{{ orderStatsDateRangeText }}</span>
<div class="flex items-center gap-3">
<span class="text-gray-600 text-sm">统计类型</span>
<el-select v-model="orderStatsType" style="width: 120px" @change="loadOrderStats">
<el-option label="挂号费" :value="1" />
<el-option label="问诊费" :value="2" />
<el-option label="药品费用" :value="3" />
<el-option label="首付费用" :value="4" />
<el-option label="尾款费用" :value="5" />
<el-option label="其他费用" :value="6" />
<el-option label="退款统计" :value="0" />
</el-select>
<span class="text-gray-600 text-sm">时间范围</span>
<el-select v-model="orderStatsDays" style="width: 110px" @change="loadOrderStats">
<el-option label="今天" :value="0" />
<el-option label="最近7天" :value="7" />
<el-option label="最近30天" :value="30" />
</el-select>
<el-button type="primary" link @click="loadOrderStats">刷新</el-button>
</div>
</div>
<div class="mb-4 p-4 rounded-lg bg-green-50 border border-green-100">
<div class="flex items-center gap-6 flex-wrap">
<div>
<span class="text-tx-secondary text-sm">今日单数</span>
<div class="text-2xl font-bold text-primary mt-1">{{ orderStatsData.today_total ?? 0 }}</div>
</div>
<div>
<span class="text-tx-secondary text-sm">今日金额</span>
<div class="text-2xl font-bold text-primary mt-1">¥{{ orderStatsData.today_amount ?? '0.00' }}</div>
</div>
<div v-if="orderStatsData.today_ranking?.length" class="flex items-center gap-4 pl-6 border-l border-green-200">
<span class="text-tx-secondary text-sm">今日排行：</span>
<div class="flex flex-wrap gap-2">
<span
v-for="(a, idx) in orderStatsData.today_ranking.slice(0, 5)"
:key="a.id"
class="inline-flex items-center gap-1 px-2 py-1 rounded text-sm bg-white"
>
<span class="text-amber-500 font-medium">{{ Number(idx) + 1 }}.</span>
<span>{{ a.name }}</span>
<span class="text-primary font-medium">{{ a.count }}</span>
<span class="text-gray-500">¥{{ a.amount }}</span>
</span>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="lg:col-span-1">
<div class="font-medium text-gray-800 mb-3">排行</div>
<div v-if="orderStatsData.ranking?.length" class="space-y-2">
<div
v-for="(a, idx) in orderStatsData.ranking"
:key="a.id"
class="flex items-center justify-between py-2 px-3 rounded-lg bg-gray-50"
>
<span class="flex items-center gap-2">
<span class="w-6 h-6 rounded-full text-center text-xs font-medium leading-6 bg-gray-200 text-gray-600">{{ Number(idx) + 1 }}</span>
<span class="text-gray-800">{{ a.name }}</span>
</span>
<span class="text-right">
<span class="font-semibold text-primary">{{ a.count }}</span>
<span class="text-gray-500 text-sm ml-1">¥{{ a.amount }}</span>
</span>
</div>
</div>
<div v-else class="py-8 text-center text-tx-secondary">暂无数据</div>
</div>
<div class="lg:col-span-2">
<div class="font-medium text-gray-800 mb-2">单数分布</div>
<v-charts
v-if="orderStatsData.chart?.xAxis?.length"
:key="'order-chart-' + orderStatsType"
style="height: 280px"
:option="orderChartOption"
:autoresize="true"
/>
<div v-else class="h-[280px] flex items-center justify-center text-tx-secondary">暂无数据</div>
</div>
</div>
<div v-if="orderStatsData.departments?.length" class="mt-4 pt-4 border-t border-gray-100">
<div class="font-medium text-gray-800 mb-3">按部门统计</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div
v-for="dept in orderStatsData.departments"
:key="dept.dept_id"
class="p-4 rounded-lg bg-gray-50"
>
<div class="font-medium text-gray-800 mb-2">{{ dept.dept_name }}（{{ dept.total }}单 ¥{{ dept.amount }}）</div>
<div class="space-y-1 text-sm">
<div
v-for="m in dept.members"
:key="`${dept.dept_id}-${m.id}`"
class="flex justify-between"
>
<span class="text-gray-600">{{ m.name }}</span>
<span><span class="font-medium">{{ m.count }}</span> <span class="text-gray-500">¥{{ m.amount }}</span></span>
</div>
<div v-if="!dept.members?.length" class="text-tx-secondary">暂无</div>
</div>
</div>
</div>
</div>
</div>
</el-card>
<div class="lg:flex gap-4">
<el-card class="!border-none mb-4 lg:mb-0 w-full lg:w-2/3" shadow="never">
<template #header>
@@ -127,6 +354,8 @@
import vCharts from 'vue-echarts'
import { getWorkbench } from '@/api/app'
import { assistantDiagnosisStats } from '@/api/tcm'
import { orderStats } from '@/api/order'
import useSettingStore from '@/stores/modules/setting'
import { useComponentRef } from '@/utils/getExposeType'
import { calcColor } from '@/utils/util'
@@ -134,6 +363,138 @@ import { calcColor } from '@/utils/util'
const settingStore = useSettingStore()
const saleChart = useComponentRef(vCharts)
const visitorChart = useComponentRef(vCharts)
const assistantChart = useComponentRef(vCharts)
const assistantStats = reactive<{
days: number
date_range?: [string, string]
today_total?: number
today_ranking?: { id: number; name: string; count: number }[]
departments: any[]
ranking: { id: number; name: string; count: number }[]
chart: { xAxis: string[]; series: any[] }
}>({
days: 7,
departments: [],
today_ranking: [],
ranking: [],
chart: { xAxis: [], series: [] }
})
const assistantChartOption = computed(() => ({
xAxis: {
type: 'category',
data: assistantStats.chart.xAxis || [],
axisLabel: { rotate: 30 }
},
yAxis: { type: 'value', name: '诊单数' },
tooltip: { trigger: 'axis' },
grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
series: (assistantStats.chart.series || []).map((s: any) => ({
...s,
type: 'bar',
barWidth: '50%',
itemStyle: {
borderRadius: [6, 6, 0, 0],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: calcColor(settingStore.theme, 0.8) },
{ offset: 1, color: settingStore.theme }
]
}
}
}))
}))
const loadAssistantStats = () => {
assistantDiagnosisStats({ days: assistantStats.days })
.then((res: any) => {
assistantStats.date_range = res.date_range
assistantStats.today_total = res.today_total ?? 0
assistantStats.today_ranking = res.today_ranking || []
assistantStats.departments = res.departments || []
assistantStats.ranking = res.ranking || []
assistantStats.chart = res.chart || { xAxis: [], series: [] }
})
.catch(() => {})
}
const orderStatsType = ref(1)
const orderStatsDays = ref(7)
const orderStatsData = reactive<any>({
date_range: [] as string[],
today_total: 0,
today_amount: '0.00',
today_ranking: [],
departments: [],
ranking: [],
chart: { xAxis: [], series: [] }
})
const orderStatsDateRangeText = computed(() => {
const arr = orderStatsData.date_range
if (arr?.length >= 2) return `${arr[0]} 至 ${arr[1]}`
const days = orderStatsDays.value
const end = new Date()
const start = new Date()
if (days === 0) {
start.setHours(0, 0, 0, 0)
return `${formatDate(start)} 至 ${formatDate(end)}`
}
start.setDate(start.getDate() - (days || 7))
return `${formatDate(start)} 至 ${formatDate(end)}`
})
function formatDate(d: Date) {
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
}
const orderChartOption = computed(() => ({
xAxis: {
type: 'category',
data: orderStatsData.chart?.xAxis || [],
axisLabel: { rotate: 30 }
},
yAxis: { type: 'value', name: '单数' },
tooltip: { trigger: 'axis' },
grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
series: (orderStatsData.chart?.series || []).map((s: any) => ({
...s,
type: 'bar',
barWidth: '50%',
itemStyle: {
borderRadius: [6, 6, 0, 0],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: calcColor(settingStore.theme, 0.8) },
{ offset: 1, color: settingStore.theme }
]
}
}
}))
}))
const loadOrderStats = () => {
orderStats({ order_type: orderStatsType.value, days: orderStatsDays.value })
.then((res: any) => {
Object.assign(orderStatsData, {
date_range: res.date_range || [],
today_total: res.today_total ?? 0,
today_amount: res.today_amount ?? '0.00',
today_ranking: res.today_ranking || [],
departments: res.departments || [],
ranking: res.ranking || [],
chart: res.chart || { xAxis: [], series: [] }
})
})
.catch(() => {})
}
watch(
() => settingStore.theme,
@@ -347,6 +708,8 @@ const updateColor = () => {
onMounted(() => {
getData()
loadAssistantStats()
loadOrderStats()
})
</script>