230 lines
14 KiB
PHP
230 lines
14 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" href="{{ asset('dist/images/fav.ico') }}" type="image/ico" sizes="16x16">
|
|
<link rel="stylesheet" href="{{ asset('plugins/fontawesome-free/css/all.min.css') }}" />
|
|
<link rel="stylesheet" href="{{ asset('dist/css/adminlte.css') }}" />
|
|
<link rel="stylesheet" href="{{ asset('dist/css/fontiran.css') }}" />
|
|
<link rel="stylesheet" href="{{ asset('dist/css/leaflet.css') }}" />
|
|
<link rel="stylesheet" href="{{ asset('dist/css/DailyAccidentPoster.css?_=' . mt_rand(1, 99999999999)) }}" />
|
|
<title></title>
|
|
<script>
|
|
var jsonServer = {
|
|
...@json($data)
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="page d-flex flex-column">
|
|
<div class="col p-0 d-flex">
|
|
<div class="col-12 py-1 d-flex">
|
|
<fieldset class="col">
|
|
<legend>گزارش تصادفات</legend>
|
|
<div class="col-12 d-flex" style="min-height: 300px">
|
|
<div class="col-4 d-flex justify-content-between acc-report-pie-chart-box">
|
|
<div class="col-6 d-flex">
|
|
<canvas id="acc_report_pie_chart" class="fast-react-chart-box"></canvas>
|
|
</div>
|
|
<div class="col-6 d-flex chart-box">
|
|
<canvas id="acc_report_pipe_chart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-4 d-flex map-data-box-daily-accident" style="border-right: 2px dashed #e1e1e1; border-left: 2px dashed #e1e1e1">
|
|
<div class="map-data" id="daily_accident_map"></div>
|
|
<div class="map-guid"></div>
|
|
</div>
|
|
<div class="col-4 d-flex acc-count-pipe-chart-box">
|
|
<div class="col-12 d-flex pb-1 chart-box">
|
|
<canvas id="acc_accident_count_pipe_chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="col p-0 d-flex per-pro-box">
|
|
<div class="col-12 py-1 d-flex">
|
|
<fieldset class="col">
|
|
<legend>اطلاعات استانی</legend>
|
|
<div class="col-12 d-flex" style="min-height: 300px">
|
|
<div class="col-12 d-flex justify-content-between chart-box">
|
|
<canvas id="acc_accident_per_province_pipe_chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="col p-0 d-flex" style="flex: 0 0 23%;max-width: 100% !important;">
|
|
<div class="col-3 py-1 d-flex">
|
|
<div class="col-12 d-flex flex-column" style="margin-top: 9px">
|
|
<div class="py-1 d-flex">
|
|
<div class="col topic d-flex flex-column align-items-center justify-content-center">
|
|
<p class="topic-p mb-3 mt-2">گزارش سامانه جامع راهداری</p>
|
|
<p class="topic-p-rms mb-0 text-center">RMS</p>
|
|
<p class="topic-p mb-0 mt-3 date-box">
|
|
<small>از تاریخ</small>
|
|
<small id="from_date"></small>
|
|
<small>تا</small>
|
|
<small id="to_date"></small>
|
|
</p>
|
|
<p class="topic-p mb-1 mt-3 data-geo-text">در سطح کشور</p>
|
|
</div>
|
|
</div>
|
|
<div class="py-1 d-flex" style="height: 185px">
|
|
<fieldset class="col d-flex">
|
|
<legend>پیامد تصادف</legend>
|
|
<div class="col d-flex pb-1 align-items-center justify-content-center">
|
|
<div class="col-4 counter text-center">
|
|
<div class="counter-icon"><i class="fas fa-skull-crossbones"></i></div>
|
|
<span class="font-weight-bold" id="death_counter"></span>
|
|
<p class="mb-0 font-weight-bold">تعداد تلفات</p>
|
|
</div>
|
|
<div class="col-4 counter text-center" style="border-right: 2px dashed #e1e1e1" >
|
|
<div class="counter-icon"><i class="fas fa-user-injured"></i></div>
|
|
<span class="font-weight-bold" id="injuries_counter"></span>
|
|
<p class="mb-0 font-weight-bold">تعداد مجروحین</p>
|
|
</div>
|
|
<div class="col-4 counter text-center" style="border-right: 2px dashed #e1e1e1" >
|
|
<div class="counter-icon"><i class="fas fa-car-crash"></i></div>
|
|
<span class="font-weight-bold" id="accidents_counter"></span>
|
|
<p class="mb-0 font-weight-bold">تعداد تصادف</p>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4 py-1 d-flex">
|
|
<fieldset class="col d-flex">
|
|
<legend>سهم تصادفات برحسب نوع راه</legend>
|
|
<div class="col-12 d-flex pb-1 chart-box">
|
|
<canvas id="acc_road_type_contribution_pipe_chart"></canvas>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-5 py-1 d-flex" style="height: 400px">
|
|
<fieldset class="col d-flex">
|
|
<legend>سهم تصادفات بر حسب هندسه راه</legend>
|
|
<div class="col-12 d-flex pb-1 chart-box">
|
|
<canvas id="acc_road_geometry_contribution_pipe_chart"></canvas>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="col p-0 d-flex" style="flex: 0 0 23%;max-width: 100% !important;">
|
|
<div class="col-7 py-1 d-flex">
|
|
<fieldset class="col d-flex">
|
|
<legend>سهم تصادفات بر اساس نوع برخورد</legend>
|
|
<div class="d-flex flex-column ml-auto mr-auto justify-content-center align-items-center">
|
|
<div class="d-flex pb-1">
|
|
<div class="col px-0 py-2 d-flex flex-column">
|
|
<div class="col canvas-box"><div id="body_bar1" style="width: 140px; height: 140px;"></div></div>
|
|
<div class="col d-flex align-items-center justify-content-center pt-2" style="flex: 0 0 20%;max-width: 100% !important;">
|
|
<strong id="bar_title1" style="color: #666;font-size: 11px;"></strong>
|
|
</div>
|
|
</div>
|
|
<div class="col px-0 py-2 d-flex flex-column">
|
|
<div class="col canvas-box"><div id="body_bar2" style="width: 140px; height: 140px;"></div></div>
|
|
<div class="col d-flex align-items-center justify-content-center pt-2" style="flex: 0 0 20%;max-width: 100% !important;">
|
|
<strong id="bar_title2" style="color: #666;font-size: 11px;"></strong>
|
|
</div>
|
|
</div>
|
|
<div class="col px-0 py-2 d-flex flex-column">
|
|
<div class="col canvas-box"><div id="body_bar3" style="width: 140px; height: 140px;"></div></div>
|
|
<div class="col d-flex align-items-center justify-content-center pt-2" style="flex: 0 0 20%;max-width: 100% !important;">
|
|
<strong id="bar_title3" style="color: #666;font-size: 11px;"></strong>
|
|
</div>
|
|
</div>
|
|
<div class="col px-0 py-2 d-flex flex-column">
|
|
<div class="col canvas-box"><div id="body_bar4" style="width: 140px; height: 140px;"></div></div>
|
|
<div class="col d-flex align-items-center justify-content-center pt-2" style="flex: 0 0 20%;max-width: 100% !important;">
|
|
<strong id="bar_title4" style="color: #666;font-size: 11px;"></strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex pb-1">
|
|
<div class="col px-0 py-2 d-flex flex-column">
|
|
<div class="col canvas-box"><div id="body_bar5" style="width: 140px; height: 140px;"></div></div>
|
|
<div class="col d-flex align-items-center justify-content-center pt-2" style="flex: 0 0 20%;max-width: 100% !important;">
|
|
<strong id="bar_title5" style="color: #666;font-size: 11px;"></strong>
|
|
</div>
|
|
</div>
|
|
<div class="col px-0 py-2 d-flex flex-column">
|
|
<div class="col canvas-box"><div id="body_bar6" style="width: 140px; height: 140px;"></div></div>
|
|
<div class="col d-flex align-items-center justify-content-center pt-2" style="flex: 0 0 20%;max-width: 100% !important;">
|
|
<strong id="bar_title6" style="color: #666;font-size: 11px;"></strong>
|
|
</div>
|
|
</div>
|
|
<div class="col px-0 py-2 d-flex flex-column">
|
|
<div class="col canvas-box"><div id="body_bar7" style="width: 140px; height: 140px;"></div></div>
|
|
<div class="col d-flex align-items-center justify-content-center pt-2" style="flex: 0 0 20%;max-width: 100% !important;">
|
|
<strong id="bar_title7" style="color: #666;font-size: 11px;"></strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-5 py-1 d-flex">
|
|
<fieldset class="col-12 d-flex">
|
|
<legend>سهم تصادفات بر اساس ساعت و وقوع</legend>
|
|
<table class="table table-bordered text-center" style="direction: ltr">
|
|
<thead>
|
|
<tr>
|
|
<th class="align-middle" rowspan="2">نوع تصادف</th>
|
|
<th colspan="2"><i class="fa fa-sun"></i><br>(6-18) <div id="dayMainPercent"></div></th>
|
|
<th colspan="2"><i class="fa fa-moon"></i><br>(18-6) <div id="nightMainPercent"></div></th>
|
|
</tr>
|
|
<tr>
|
|
<th>فقره</th>
|
|
<th>درصد</th>
|
|
<th>فقره</th>
|
|
<th>درصد</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td id="death_row"></td>
|
|
<td id="death_day_count"></td>
|
|
<td id="death_day_percent"></td>
|
|
<td id="death_night_count"></td>
|
|
<td id="death_night_percent"></td>
|
|
</tr>
|
|
<tr>
|
|
<td id="injuries_row"></td>
|
|
<td id="injuries_day_count"></td>
|
|
<td id="injuries_day_percent"></td>
|
|
<td id="injuries_night_count"></td>
|
|
<td id="injuries_night_percent"></td>
|
|
</tr>
|
|
<tr>
|
|
<td id="damage_row"></td>
|
|
<td id="damage_day_count"></td>
|
|
<td id="damage_day_percent"></td>
|
|
<td id="damage_night_count"></td>
|
|
<td id="damage_night_percent"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
|
|
<script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
|
|
<script src="{{ asset('dist/js/jalali-moment.browser.js') }}"></script>
|
|
<script src="{{ asset('plugins/chart3.5.js/chart.min.js') }}"></script>
|
|
<script src="{{ asset('plugins/chartjs-plugin-datalabels/chartjs-plugin-datalabels.min.js') }}"></script>
|
|
<script src="{{ asset('dist/js/leaflet.js') }}"></script>
|
|
<!-- yasi start add -->
|
|
<script src="{{ asset('dist/js/leaflet.markercluster.js') }}"></script>
|
|
<!-- yasi end add-->
|
|
<script src="{{ asset('dist/js/provinces-cities-geojson.js') }}"></script>
|
|
<script src="{{ asset('plugins/progressBar/progressbar.min.js') }}"></script>
|
|
<script src="{{ asset('dist/js/DailyAccidentPoster.js?_=' . mt_rand(1, 99999999999)) }}"></script>
|
|
</body>
|
|
|
|
</html> |