134 lines
12 KiB
PHP
134 lines
12 KiB
PHP
<!-- TAB: สถิติรับบริการรวม -->
|
|
<div id="tab-service" class="tab-content hidden space-y-4 md:space-y-6">
|
|
<?= $stats_filter_html ?>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-5 mb-4 md:mb-6">
|
|
<div class="card-premium p-4 md:p-5 flex items-center bg-blue-50/50 border-l-4 border-l-blue-500 shadow-sm">
|
|
<div class="w-12 h-12 md:w-14 md:h-14 rounded-xl bg-gradient-to-br from-blue-500 to-blue-400 text-white flex items-center justify-center text-xl md:text-2xl shadow-lg mr-3"><i class="fa-solid fa-users"></i></div>
|
|
<div>
|
|
<p class="text-[10px] md:text-xs text-slate-500 font-bold mb-0.5">ยอดรวมผู้ป่วยนอก (OPD)</p>
|
|
<h3 class="text-xl md:text-3xl font-extrabold text-blue-600"><span id="stats-opd-total">-</span> <span class="text-[10px] md:text-sm font-medium text-slate-400">ราย</span></h3>
|
|
</div>
|
|
</div>
|
|
<div class="card-premium p-4 md:p-5 flex items-center bg-teal-50/50 border-l-4 border-l-teal-500 shadow-sm">
|
|
<div class="w-12 h-12 md:w-14 md:h-14 rounded-xl bg-gradient-to-br from-teal-500 to-emerald-400 text-white flex items-center justify-center text-xl md:text-2xl shadow-lg mr-3"><i class="fa-solid fa-bed-pulse"></i></div>
|
|
<div>
|
|
<p class="text-[10px] md:text-xs text-slate-500 font-bold mb-0.5">ยอดรวมผู้ป่วยใน (IPD)</p>
|
|
<h3 class="text-xl md:text-3xl font-extrabold text-teal-600"><span id="stats-ipd-total">-</span> <span class="text-[10px] md:text-sm font-medium text-slate-400">ราย</span></h3>
|
|
</div>
|
|
</div>
|
|
<div class="card-premium p-4 md:p-5 flex items-center bg-rose-50/50 border-l-4 border-l-rose-500 shadow-sm">
|
|
<div class="w-12 h-12 md:w-14 md:h-14 rounded-xl bg-gradient-to-br from-red-500 to-rose-400 text-white flex items-center justify-center text-xl md:text-2xl shadow-lg mr-3"><i class="fa-solid fa-truck-medical"></i></div>
|
|
<div>
|
|
<p class="text-[10px] md:text-xs text-slate-500 font-bold mb-0.5">ยอดรวมอุบัติเหตุ (ER)</p>
|
|
<h3 class="text-xl md:text-3xl font-extrabold text-rose-600"><span id="stats-er-total">-</span> <span class="text-[10px] md:text-sm font-medium text-slate-400">ราย</span></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-5 mb-4 md:mb-6 w-full">
|
|
<div class="card-premium p-4 md:p-5 flex items-center bg-purple-50/50 border-l-4 border-l-purple-500 shadow-sm">
|
|
<div class="w-12 h-12 md:w-14 md:h-14 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-400 text-white flex items-center justify-center text-xl md:text-2xl shadow-lg mr-3"><i class="fa-solid fa-bed-procedures"></i></div>
|
|
<div>
|
|
<p class="text-[10px] md:text-xs text-slate-500 font-bold mb-0.5">จำนวนการเสียชีวิตผู้ป่วยใน</p>
|
|
<h3 class="text-xl md:text-3xl font-extrabold text-purple-600"><span id="stats-ipd-death">-</span> <span class="text-[10px] md:text-sm font-medium text-slate-400">ราย</span></h3>
|
|
<p class="text-[9px] md:text-xs text-slate-400 mt-0.5">อัตราตาย <span id="stats-ipd-death-pct">-</span>%</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-premium p-4 md:p-5 flex items-center bg-slate-50/50 border-l-4 border-l-slate-700 shadow-sm">
|
|
<div class="w-12 h-12 md:w-14 md:h-14 rounded-xl bg-gradient-to-br from-slate-700 to-slate-500 text-white flex items-center justify-center text-xl md:text-2xl shadow-lg mr-3"><i class="fa-solid fa-heart-crack"></i></div>
|
|
<div>
|
|
<p class="text-[10px] md:text-xs text-slate-500 font-bold mb-0.5">จำนวนการเสียชีวิตที่ ER</p>
|
|
<h3 class="text-xl md:text-3xl font-extrabold text-slate-700"><span id="stats-er-death">-</span> <span class="text-[10px] md:text-sm font-medium text-slate-400">ราย</span></h3>
|
|
</div>
|
|
</div>
|
|
<div class="card-premium p-4 md:p-5 flex items-center bg-slate-100 border-l-4 border-l-slate-800 shadow-sm">
|
|
<div class="w-12 h-12 md:w-14 md:h-14 rounded-xl bg-gradient-to-br from-slate-800 to-slate-600 text-white flex items-center justify-center text-xl md:text-2xl shadow-lg mr-3"><i class="fa-solid fa-truck-fast"></i></div>
|
|
<div>
|
|
<p class="text-[10px] md:text-xs text-slate-500 font-bold mb-0.5">เสียชีวิตก่อนถึง รพ. (DOA/DBA)</p>
|
|
<h3 class="text-xl md:text-3xl font-extrabold text-slate-800"><span id="stats-doa">-</span> <span class="text-[10px] md:text-sm font-medium text-slate-400">ราย</span></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
|
|
<div class="card-premium p-4 md:p-6 flex flex-col">
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base mb-2 text-center">สัดส่วนผู้รับบริการแบ่งตามประเภท</h3>
|
|
<div class="relative flex-1 w-full flex justify-center mt-2">
|
|
<div class="h-48 md:h-64 w-full"><canvas id="serviceTypeChart"></canvas></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-premium p-4 md:p-6 flex flex-col">
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base mb-2 text-center">สัดส่วนสิทธิการรักษา</h3>
|
|
<div class="relative flex-1 w-full flex justify-center mt-2">
|
|
<div class="h-48 md:h-64 w-full"><canvas id="serviceRightChart"></canvas></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- สัญชาติ -->
|
|
<h3 class="font-extrabold text-slate-800 text-base md:text-lg mt-6 md:mt-8 mb-3 md:mb-4 border-l-4 border-indigo-500 pl-3">จำนวนผู้รับบริการจำแนกตามสัญชาติ</h3>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-6">
|
|
<div class="card-premium p-4 md:p-5 border-t-4 border-t-blue-500 bg-gradient-to-b from-blue-50/50 to-white rounded-lg shadow-sm relative overflow-hidden">
|
|
<i class="fa-solid fa-earth-asia absolute -right-2 -bottom-2 md:-right-4 md:-bottom-4 text-5xl md:text-7xl text-blue-100/50 rotate-12 z-0"></i>
|
|
<div class="flex justify-between items-center mb-1 relative z-10">
|
|
<span class="font-bold text-slate-700 text-xs md:text-sm">สัญชาติไทย</span>
|
|
<span class="text-[10px] md:text-xs text-slate-500 font-bold">รวม <span id="stats-nat-thai-total">-</span> ราย</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2 md:gap-4 mt-3 md:mt-4 border-t border-blue-100 pt-2 md:pt-3 relative z-10">
|
|
<div><span class="text-[10px] md:text-xs font-bold text-slate-500">OPD</span>
|
|
<h4 class="font-black text-lg md:text-xl text-blue-600" id="stats-nat-thai-opd">-</h4>
|
|
</div>
|
|
<div><span class="text-[10px] md:text-xs font-bold text-slate-500">IPD</span>
|
|
<h4 class="font-black text-lg md:text-xl text-teal-600" id="stats-nat-thai-ipd">-</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-premium p-4 md:p-5 border-t-4 border-t-emerald-500 bg-gradient-to-b from-emerald-50/50 to-white rounded-lg shadow-sm relative overflow-hidden">
|
|
<i class="fa-solid fa-plane-arrival absolute -right-2 -bottom-2 md:-right-4 md:-bottom-4 text-5xl md:text-7xl text-emerald-100/50 rotate-12 z-0"></i>
|
|
<div class="flex justify-between items-center mb-1 relative z-10">
|
|
<span class="font-bold text-slate-700 text-xs md:text-sm truncate w-2/3">ต่างชาติ</span>
|
|
<span class="text-[10px] md:text-xs text-slate-500 font-bold">รวม <span id="stats-nat-foreign-total">-</span> ราย</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2 md:gap-4 mt-3 md:mt-4 border-t border-emerald-100 pt-2 md:pt-3 relative z-10">
|
|
<div><span class="text-[10px] md:text-xs font-bold text-slate-500">OPD</span>
|
|
<h4 class="font-black text-lg md:text-xl text-emerald-600" id="stats-nat-foreign-opd">-</h4>
|
|
</div>
|
|
<div><span class="text-[10px] md:text-xs font-bold text-slate-500">IPD</span>
|
|
<h4 class="font-black text-lg md:text-xl text-teal-600" id="stats-nat-foreign-ipd">-</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-premium p-4 md:p-5 border-t-4 border-t-amber-500 bg-gradient-to-b from-amber-50/50 to-white rounded-lg shadow-sm relative overflow-hidden">
|
|
<i class="fa-solid fa-person-walking-luggage absolute -right-2 -bottom-2 md:-right-4 md:-bottom-4 text-5xl md:text-7xl text-amber-100/50 rotate-12 z-0"></i>
|
|
<div class="flex justify-between items-center mb-1 relative z-10">
|
|
<span class="font-bold text-slate-700 text-xs md:text-sm truncate w-2/3">ต่างด้าว</span>
|
|
<span class="text-[10px] md:text-xs text-slate-500 font-bold">รวม <span id="stats-nat-alien-total">-</span> ราย</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2 md:gap-4 mt-3 md:mt-4 border-t border-amber-100 pt-2 md:pt-3 relative z-10">
|
|
<div><span class="text-[10px] md:text-xs font-bold text-slate-500">OPD</span>
|
|
<h4 class="font-black text-lg md:text-xl text-amber-600" id="stats-nat-alien-opd">-</h4>
|
|
</div>
|
|
<div><span class="text-[10px] md:text-xs font-bold text-slate-500">IPD</span>
|
|
<h4 class="font-black text-lg md:text-xl text-teal-600" id="stats-nat-alien-ipd">-</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="font-extrabold text-slate-800 text-base md:text-lg mt-6 md:mt-8 mb-3 md:mb-4 border-l-4 border-indigo-500 pl-3">ประสิทธิภาพการบริการ</h3>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
|
|
<div class="card-premium p-4 md:p-6">
|
|
<div class="flex justify-between mb-4 relative">
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base"><i class="fa-solid fa-chart-line text-blue-500 mr-2"></i> ค่า CMI รายเดือน</h3><span class="cmi-avg-display absolute left-1/2 -translate-x-1/2 bg-gradient-to-br from-blue-400 to-indigo-600 text-white px-5 py-1.5 rounded-full text-xs font-extrabold shadow-md z-10">เฉลี่ย <span id="stats-cmi-avg">-</span></span>
|
|
</div>
|
|
<div class="h-64 w-full"><canvas id="cmiChartTab"></canvas></div>
|
|
</div>
|
|
<div class="card-premium p-4 md:p-6">
|
|
<div class="flex justify-between mb-4 relative">
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base"><i class="fa-solid fa-chart-area text-blue-500 mr-2"></i> Sum AdjRW รายเดือน</h3><span class="adjrw-avg-display absolute left-1/2 -translate-x-1/2 bg-gradient-to-br from-blue-400 to-indigo-600 text-white px-5 py-1.5 rounded-full text-xs font-extrabold shadow-md z-10">รวม <span id="stats-adjrw-sum">-</span></span>
|
|
</div>
|
|
<div class="h-64 w-full"><canvas id="adjrwChartTab"></canvas></div>
|
|
</div>
|
|
</div>
|
|
</div>
|