13d • AI in HSE
Task 3
بناءً على البيانات المتوفرة في الملف المرفق لمشروع الإشراف في المدينة المنورة (سعود كونسلت)، قمت بتحليل أداء الصحة والسلامة والبيئة (HSE) من خلال مؤشرات التنفيذ ونسب الإنجاز لكل مقاول، حيث يعكس "اكتمال العمل" جانباً حيوياً من الامتثال التشغيلي.
لقد قمت بتصميم **لوحة بيانات تفاعلية (Interactive Dashboard)** احترافية باستخدام لغة HTML و CSS و JavaScript (Chart.js) لتظهر إحصائيات المقاولين وحالات أوامر العمل.
### كود لوحة البيانات (HSE Dashboard)
يمكنك نسخ الكود التالي وحفظه بصيغة .html وتشغيله في أي متصفح:
```html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>لوحة مؤشرات الأداء HSE - مشروع المدينة المنورة</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; margin: 0; padding: 20px; }
.container { max-width: 1200px; margin: auto; }
.header { background: #2c3e50; color: white; padding: 20px; border-radius: 10px; text-align: center; margin-bottom: 20px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
.stat-card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; }
.stat-card h3 { margin: 0; color: #7f8c8d; font-size: 0.9em; }
.stat-card p { margin: 10px 0 0; font-size: 1.8em; font-weight: bold; color: #2c3e50; }
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chart-container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.footer { text-align: center; margin-top: 30px; color: #95a5a6; font-size: 0.8em; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>لوحة مؤشرات أداء المقاولين (HSE & Operations)</h1>
<p>مشروع الإشراف على مقاولى أعمال العقد الموحد - سعود كونسلت</p>
</div>
<div class="stats-grid">
<div class="stat-card">
<h3>إجمالي أوامر العمل</h3>
<p>13,548</p>
</div>
<div class="stat-card">
<h3>تم التنفيذ بنجاح</h3>
<p>12,353</p>
</div>
<div class="stat-card">
<h3>أوامر قيد العمل</h3>
<p>117</p>
</div>
<div class="stat-card" style="border-right: 5px solid #e74c3c;">
<h3>أوامر تم إيقافها</h3>
<p>295</p>
</div>
</div>
<div class="charts-grid">
<div class="chart-container">
<canvas id="statusChart"></canvas>
</div>
<div class="chart-container">
<canvas id="contractorChart"></canvas>
</div>
</div>
<div class="footer">
[span_0](start_span)تم استخراج البيانات بناءً على تقرير مايو 2026[span_0](end_span)
</div>
</div>
<script>
// Chart 1: Status Distribution
const ctx1 = document.getElementById('statusChart').getContext('2d');
new Chart(ctx1, {
type: 'doughnut',
data: {
labels: ['تم التنفيذ', 'جاري العمل', 'لم يبدأ'],
datasets: [{
data: [93.21, 0.88, 3.10],
backgroundColor: ['#27ae60', '#f1c40f', '#e74c3c']
}]
},
options: {
plugins: { title: { display: true, text: 'نسبة الإنجاز الإجمالية (%)' } }
}
});
// Chart 2: Contractor Performance (Top 5 by Volume)
const ctx2 = document.getElementById('contractorChart').getContext('2d');
new Chart(ctx2, {
type: 'bar',
data: {
labels: ['الميال', 'الغسيل', 'العجيمي', 'منصور المساعد', 'منهل الخير'],
datasets: [{
label: 'إجمالي المهام',
data: [2815, 2652, 1944, 1040, 987],
backgroundColor: '#3498db'
}]
},
options: {
indexAxis: 'y',
plugins: { title: { display: true, text: 'أكبر 5 مقاولين من حيث حجم العمل' } }
}
});
</script>
</body>
</html>
```
### تحليل البيانات المستند إلى التقرير:
* **إجمالي العمليات:** بلغ عدد أوامر العمل الإجمالي **13,548** أمراً.
* **كفاءة التنفيذ:** حقق المشروع نسبة إنجاز عالية جداً بلغت **93.21%** (تم تنفيذ 12,353 أمراً).
* **توزيع المقاولين:** يظهر التحليل أن "الميال" هو الأكثر استحواذاً على المهام بإجمالي **2,815** أمراً، يليه "الغسيل" بـ **2,652** أمراً.
* **إدارة المخاطر (العمل المتوقف):** تم رصد **295** أمراً تم إيقافها، وهو مؤشر يتطلب مراجعة من فريق HSE للتأكد من أسباب الإيقاف (سواء كانت فنية أو تتعلق بسلامة الموقع).
**تعليمات التسليم:**
1. انسخ الكود أعلاه.
2. احفظه في ملف باسم HSE_Dashboard.html.
3. يمكنك رفع هذا الملف على أي استضافة مجانية (مثل GitHub Pages أو Netlify) أو إرساله كملف HTML مباشرة كما هو مطلوب في التكليف.
0
3 comments
Task 3
powered by
skool.com/academy-usa-4020
Prime Tech Academy provides global training in AI, coding, and digital tech for ages 6+, with courses and services for individuals and businesses.
Suggested communities
Powered by