|
|
<!DOCTYPE html> |
|
|
<html lang="fa" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>سیستم مدیریت سلامت شغلی</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Noto Sans Arabic', sans-serif; |
|
|
background-color: #f0f9ff; |
|
|
} |
|
|
|
|
|
.health-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
|
background-color: #ffffff; |
|
|
border-radius: 12px; |
|
|
} |
|
|
|
|
|
.health-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.normal-range { |
|
|
background-color: #bbf7d0; |
|
|
color: #166534; |
|
|
} |
|
|
|
|
|
.warning-range { |
|
|
background-color: #fef08a; |
|
|
color: #854d0e; |
|
|
} |
|
|
|
|
|
.danger-range { |
|
|
background-color: #fecaca; |
|
|
color: #991b1b; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
background-color: #e0f2fe; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
background-color: #f0f9ff; |
|
|
} |
|
|
|
|
|
.nav-item.active { |
|
|
background-color: #bae6fd; |
|
|
border-right: 4px solid #38bdf8; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
transform: translateX(-100%); |
|
|
position: absolute; |
|
|
z-index: 50; |
|
|
height: 100vh; |
|
|
} |
|
|
|
|
|
.sidebar.open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-blue-50"> |
|
|
|
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar w-64 flex-shrink-0"> |
|
|
<div class="p-4 flex items-center justify-between border-b border-blue-200"> |
|
|
<div class="flex items-center space-x-2 space-x-reverse"> |
|
|
<i class="fas fa-heartbeat text-2xl text-blue-600"></i> |
|
|
<span class="text-xl font-bold text-blue-800">سلامت شغلی</span> |
|
|
</div> |
|
|
<button id="sidebarToggle" class="md:hidden text-blue-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<nav class="p-4"> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-blue-600 uppercase text-xs font-semibold mb-3">منوی اصلی</h3> |
|
|
<ul> |
|
|
<li class="mb-2"> |
|
|
<a href="#" id="dashboardLink" class="nav-item active flex items-center space-x-2 space-x-reverse p-2 rounded text-blue-800"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span>داشبورد</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" id="healthRecordLink" class="nav-item flex items-center space-x-2 space-x-reverse p-2 rounded hover:bg-blue-100 text-blue-700"> |
|
|
<i class="fas fa-clipboard-medical"></i> |
|
|
<span>پرونده سلامت</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" id="labTestsLink" class="nav-item flex items-center space-x-2 space-x-reverse p-2 rounded hover:bg-blue-100 text-blue-700"> |
|
|
<i class="fas fa-flask"></i> |
|
|
<span>آزمایشات</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" id="referralsLink" class="nav-item flex items-center space-x-2 space-x-reverse p-2 rounded hover:bg-blue-100 text-blue-700"> |
|
|
<i class="fas fa-exchange-alt"></i> |
|
|
<span>ارجاعات</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden main-content"> |
|
|
|
|
|
<header class="bg-white border-b border-blue-100 flex items-center justify-between p-4"> |
|
|
<div class="flex items-center"> |
|
|
<button id="mobileSidebarToggle" class="md:hidden text-blue-600 mr-3"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-bold text-blue-800">سیستم مدیریت سلامت شغلی</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="relative"> |
|
|
<button class="text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2 space-x-reverse"> |
|
|
<div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">ی</div> |
|
|
<span class="text-blue-700">کاربر</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-4"> |
|
|
|
|
|
<section id="dashboardSection"> |
|
|
<div class="health-card p-6 mb-6"> |
|
|
<h2 class="text-xl font-bold text-blue-800 mb-6">اطلاعات دموگرافیک</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="border border-blue-100 rounded-lg p-4 bg-white"> |
|
|
<div class="flex items-center space-x-3 space-x-reverse mb-3"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-id-card"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-blue-600 text-sm">شماره پرسنلی</h3> |
|
|
<p class="font-semibold text-blue-800">12345</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-blue-100 rounded-lg p-4 bg-white"> |
|
|
<div class="flex items-center space-x-3 space-x-reverse mb-3"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-birthday-cake"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-blue-600 text-sm">سن</h3> |
|
|
<p class="font-semibold text-blue-800">38 سال</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-blue-100 rounded-lg p-4 bg-white"> |
|
|
<div class="flex items-center space-x-3 space-x-reverse mb-3"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-briefcase"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-blue-600 text-sm">شغل</h3> |
|
|
<p class="font-semibold text-blue-800">اپراتور ماشینآلات</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-blue-100 rounded-lg p-4 bg-white"> |
|
|
<div class="flex items-center space-x-3 space-x-reverse mb-3"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-user-tie"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-blue-600 text-sm">پوزیشن شغلی</h3> |
|
|
<p class="font-semibold text-blue-800">اپراتور ارشد</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-blue-100 rounded-lg p-4 bg-white"> |
|
|
<div class="flex items-center space-x-3 space-x-reverse mb-3"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-industry"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-blue-600 text-sm">محل کار (پلنت)</h3> |
|
|
<p class="font-semibold text-blue-800">پلنت شماره 2</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="health-card p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-xl font-bold text-blue-800">پرونده سلامت</h2> |
|
|
<div class="p-2 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-clipboard-medical"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-blue-600 mb-4">دسترسی به اطلاعات جامع سلامت شغلی و پزشکی</p> |
|
|
<button id="openHealthRecord" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg transition duration-200"> |
|
|
مشاهده پرونده سلامت |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="health-card p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-xl font-bold text-blue-800">ارجاعات</h2> |
|
|
<div class="p-2 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-exchange-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-blue-600 mb-4">مدیریت ارجاعات پزشکی و پیگیری وضعیت</p> |
|
|
<button id="openReferrals" class="w-full bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg transition duration-200"> |
|
|
مشاهده ارجاعات |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="healthRecordSection" class="hidden"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-2xl font-bold text-blue-800">پرونده سلامت</h2> |
|
|
<button id="backToDashboard" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
<span>بازگشت به داشبورد</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
<div class="health-card cursor-pointer" id="occupationalHealthBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-user-md text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">پرونده طب کار</h3> |
|
|
<p class="text-blue-600">اطلاعات معاینات و سلامت شغلی</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card cursor-pointer" id="labTestsBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-flask text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">آزمایشات</h3> |
|
|
<p class="text-blue-600">نتایج آزمایشات و پارامترهای سلامت</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card cursor-pointer" id="diseaseRiskBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-virus text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">ریسک بیماریها</h3> |
|
|
<p class="text-blue-600">ارزیابی خطر بیماریهای شغلی</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="occupationalHealthSection" class="hidden"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-2xl font-bold text-blue-800">پرونده طب کار</h2> |
|
|
<button id="backToHealthRecord" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
<span>بازگشت به پرونده سلامت</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="health-card cursor-pointer" id="medicalHistoryBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-history text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">سوابق پزشکی</h3> |
|
|
<p class="text-blue-600">اطلاعات شخصی و شغلی</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="health-card cursor-pointer" id="clinicalExamsBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-stethoscope text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">معاینات بالینی</h3> |
|
|
<p class="text-blue-600">قد، وزن، BMI و فشارخون</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="health-card cursor-pointer" id="visionStatusBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-eye text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">وضعیت بینایی</h3> |
|
|
<p class="text-blue-600">مشکلات و نتایج بیناییسنجی</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="health-card cursor-pointer" id="hearingStatusBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-deaf text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">وضعیت شنوایی</h3> |
|
|
<p class="text-blue-600">نتایج تستهای شنوایی</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="health-card cursor-pointer" id="respiratoryStatusBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-lungs text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">وضعیت تنفسی</h3> |
|
|
<p class="text-blue-600">ارزیابی سیستم تنفسی</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="health-card cursor-pointer" id="cardiovascularStatusBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-heartbeat text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">وضعیت قلبی و عروقی</h3> |
|
|
<p class="text-blue-600">ارزیابی سلامت قلب</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="health-card cursor-pointer" id="activityConditionsBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-running text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">شروط ادامه فعالیت</h3> |
|
|
<p class="text-blue-600">محدودیتهای شغلی</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="health-card cursor-pointer" id="doctorRecommendationsBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-comment-medical text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">توصیه پزشک طب کار</h3> |
|
|
<p class="text-blue-600">پیشنهادات و توصیهها</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="health-card cursor-pointer" id="occupationalDiseasesBtn"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center space-x-4 space-x-reverse"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-viruses text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-blue-800">بیماریهای شغلی</h3> |
|
|
<p class="text-blue-600">تشخیص و پیگیری</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="medicalHistorySection" class="hidden"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-2xl font-bold text-blue-800">سوابق پزشکی شخصی و شغلی</h2> |
|
|
<button id="backToOccupationalHealth" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
<span>بازگشت به پرونده طب کار</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="health-card mb-6"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">سوابق پزشکی شخصی</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start space-x-4 space-x-reverse"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
|
|
<i class="fas fa-procedures"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-blue-800">سابقه بیماریها</h4> |
|
|
<p class="text-blue-600">دیابت نوع 2 (از سال 1398)، فشار خون بالا (از سال 1399)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start space-x-4 space-x-reverse"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> |
|
|
<i class="fas fa-syringe"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-blue-800">سابقه جراحیها</h4> |
|
|
<p class="text-blue-600">آپاندکتومی (سال 1385)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start space-x-4 space-x-reverse"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
|
|
<i class="fas fa-allergies"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-blue-800">حساسیتها</h4> |
|
|
<p class="text-blue-600">حساسیت به پنی سیلین</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">سوابق پزشکی شغلی</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start space-x-4 space-x-reverse"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> |
|
|
<i class="fas fa-hard-hat"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-blue-800">تماس با مواد خطرناک</h4> |
|
|
<p class="text-blue-600">تماس با حلالهای آلی (از سال 1395 تا کنون)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start space-x-4 space-x-reverse"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
|
|
<i class="fas fa-head-side-mask"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-blue-800">تماس با گرد و غبار</h4> |
|
|
<p class="text-blue-600">تماس متوسط با گرد و غبار سیلیس (از سال 1397)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start space-x-4 space-x-reverse"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> |
|
|
<i class="fas fa-ear-deaf"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-blue-800">تماس با صدا</h4> |
|
|
<p class="text-blue-600">تماس با صدای بالای 85 دسیبل (8 ساعت در روز)</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="clinicalExamsSection" class="hidden"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-2xl font-bold text-blue-800">معاینات بالینی</h2> |
|
|
<button id="backToOccupationalHealth2" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
<span>بازگشت به پرونده طب کار</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="health-card"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">مشخصات فیزیکی</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">قد</span> |
|
|
<span class="font-semibold text-blue-800">172 سانتیمتر</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">وزن</span> |
|
|
<span class="font-semibold text-blue-800">85 کیلوگرم</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">شاخص توده بدنی (BMI)</span> |
|
|
<span class="font-semibold text-blue-800">28.7 (اضافه وزن)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">فشار خون</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">آخرین اندازهگیری</span> |
|
|
<span class="font-semibold text-blue-800">140/90 mmHg</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">میانگین 3 ماه اخیر</span> |
|
|
<span class="font-semibold text-blue-800">138/88 mmHg</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">وضعیت</span> |
|
|
<span class="px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">فشار خون مرحله 1</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">تاریخچه معاینات</h3> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-blue-200"> |
|
|
<thead class="bg-blue-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">تاریخ</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">وزن (kg)</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">BMI</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">فشار خون</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">وضعیت</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-blue-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1400/05/15</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">82</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">27.7</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">135/85</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">طبیعی</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1400/11/20</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">84</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">28.4</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">142/92</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">فشار خون مرحله 1</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1401/06/10</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">85</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">28.7</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">140/90</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">فشار خون مرحله 1</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="visionStatusSection" class="hidden"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-2xl font-bold text-blue-800">وضعیت بینایی</h2> |
|
|
<button id="backToOccupationalHealth3" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
<span>بازگشت به پرونده طب کار</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="health-card"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">دید چشم راست</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">دید بدون اصلاح</span> |
|
|
<span class="font-semibold text-blue-800">20/40</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">دید با اصلاح</span> |
|
|
<span class="font-semibold text-blue-800">20/20</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">عیب انکساری</span> |
|
|
<span class="font-semibold text-blue-800">-1.50 دیوپتر</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">دید چشم چپ</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">دید بدون اصلاح</span> |
|
|
<span class="font-semibold text-blue-800">20/50</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">دید با اصلاح</span> |
|
|
<span class="font-semibold text-blue-800">20/20</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">عیب انکساری</span> |
|
|
<span class="font-semibold text-blue-800">-1.75 دیوپتر</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">تاریخچه بیناییسنجی</h3> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-blue-200"> |
|
|
<thead class="bg-blue-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">تاریخ</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">دید راست</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">دید چپ</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">عیب انکساری</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">وضعیت</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-blue-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1398/03/10</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/30</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/40</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">-1.00 / -1.25</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">مشکل جزئی</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1399/04/15</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/35</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/45</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">-1.25 / -1.50</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">نیاز به عینک</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1400/05/20</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/40</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/50</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">-1.50 / -1.75</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">نیاز به عینک</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="hearingStatusSection" class="hidden"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-2xl font-bold text-blue-800">وضعیت شنوایی</h2> |
|
|
<button id="backToOccupationalHealth4" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
<span>بازگشت به پرونده طب کار</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="health-card"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">شنوایی گوش راست</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">آستانه شنوایی 500Hz</span> |
|
|
<span class="font-semibold text-blue-800">25 dB</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">آستانه شنوایی 1000Hz</span> |
|
|
<span class="font-semibold text-blue-800">30 dB</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">آستانه شنوایی 2000Hz</span> |
|
|
<span class="font-semibold text-blue-800">35 dB</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">آستانه شنوایی 4000Hz</span> |
|
|
<span class="font-semibold text-blue-800">40 dB</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">شنوایی گوش چپ</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">آستانه شنوایی 500Hz</span> |
|
|
<span class="font-semibold text-blue-800">20 dB</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">آستانه شنوایی 1000Hz</span> |
|
|
<span class="font-semibold text-blue-800">25 dB</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">آستانه شنوایی 2000Hz</span> |
|
|
<span class="font-semibold text-blue-800">30 dB</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600">آستانه شنوایی 4000Hz</span> |
|
|
<span class="font-semibold text-blue-800">35 dB</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card mb-6"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">نمودار شنوایی</h3> |
|
|
<div class="h-64"> |
|
|
<canvas id="hearingChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="health-card"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-lg text-blue-800 mb-4">تاریخچه شنواییسنجی</h3> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-blue-200"> |
|
|
<thead class="bg-blue-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">تاریخ</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">میانگین شنوایی راست</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">میانگین شنوایی چپ</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">وضعیت</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-blue-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1398/03/10</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20 dB</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">15 dB</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">طبیعی</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1399/04/15</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">25 dB</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20 dB</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">کاهش جزئی</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1400/05/20</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">30 dB</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">25 dB</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">کاهش متوسط</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</极速赛车 |
|
|
</html> |
