Files
backend/resources/views/rmto-preview/pages/road-maintenance-report.blade.php
2024-02-01 09:53:53 +00:00

1660 lines
57 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>عملکرد نگهداری راه</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css" />
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css" />
<!-- Persian Datepicker -->
<link rel="stylesheet" href="../dist/css/persian-datepicker.min.css" />
<link rel="stylesheet" href="../dist/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="../dist/css/buttons.dataTables.min.css" />
<link rel="stylesheet" href="../plugins/chart.js/Chart.min.css" />
<!-- bootstrap slider -->
<link rel="stylesheet" href="../plugins/bootstrap-slider/css/bootstrap-slider.min.css" />
<!-- Leaflet -->
<link rel="stylesheet" href="../dist/css/leaflet.css" />
<!-- IRANSans Font -->
<link rel="stylesheet" href="../dist/css/fontiran.css" />
<link rel="stylesheet" href="../dist/css/adminlte.css" />
<style>
.zoom {
height: 30px;
width: 30px;
transition: transform 0.2s;
}
.zoom:hover {
-ms-transform: scale(2);
/* IE 9 */
-webkit-transform: scale(2);
/* Safari 3-8 */
transform: scale(2);
}
.card-header {
padding: 0.75rem 1.25rem 0.2rem;
}
th {
font-size: 13px;
}
td {
font-size: 14px;
}
button.btn {
font-size: 12px;
}
i {
font-size: 10px;
}
label {
font-size: 0.8rem;
font-weight: 500 !important;
color: rgba(0, 0, 0, 0.5);
}
.icheck-primary label {
font-weight: 400 !important;
}
.form-control {
font-size: 13px;
}
.required-label::after {
content: "*";
position: relative;
right: 2px;
color: #dc3545;
}
.card-body .radio-header {
font-size: 0.8rem;
font-weight: 500;
color: rgba(0, 0, 0, 0.5);
display: inline-block;
margin-bottom: 0.5rem;
}
.abrar-project-slider .tooltip {
font-family: "IRANSansFaNum" !important;
}
.abrar-project-slider .slider-selection,
.abrar-project-slider .slider-handle,
.abrar-project-slider .slider-tick.in-selection {
background: #007bff;
}
[class*="icheck-"] {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.abrar-map-layout {
position: relative;
height: 200px;
margin-bottom: 15px;
}
.abrar-map-layout>#abrar-map {
height: 100%;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
}
.abrar-map-layout>.pin-container {
position: absolute;
top: 34%;
right: 44%;
z-index: 1009;
}
.input-cord {
font-family: "IRANSans" !important;
text-align: center !important;
direction: ltr !important;
}
.listproject-main {
margin-top: 95px;
padding: 0 10px;
}
.update-main {
margin-top: 106px;
padding: 0 10px;
}
.tool-main {
margin-top: 70px;
padding: 0 10px;
}
.dt-button.buttons-excel.buttons-html5 {
background: #28a745 !important;
font-size: 12px;
color: white;
}
.card-footer {
text-align: left;
}
.map-btn {
border-radius: 0.25rem !important;
}
.is-invalid-input {
color: #dc3545 !important;
border-color: #dc3545;
}
.is-invalid-text {
color: #dc3545 !important;
}
.is-invalid-box {
border-color: #dc3545;
}
.menu_top {
z-index: 1040 !important;
}
div.dataTables_wrapper div.dataTables_filter {
text-align: left;
}
.leaflet-div-icon {
background: transparent !important;
border: none !important;
}
.pin-marker {
position: relative;
width: 45px;
height: 71px;
font-family: "IRANSans";
}
.pin-marker.pin-move>.map-pin-marker {
transform: scale(0.75);
}
.pin-marker.pin-set>.map-pin-marker>.pin-title-circle {
background-color: #009900;
}
.pin-marker.pin-move>.pin-main-shadow {
transform: scale(1.35);
}
.map-pin-marker {
position: relative;
width: 45px;
height: 65px;
z-index: 10;
transform-origin: 22.5px 0;
transition: transform 0.2s;
}
.map-pin-marker>.pin-main-circle {
position: absolute;
width: 45px;
height: 45px;
left: 0;
background-color: rgba(22, 67, 88, 1);
border-radius: 50%;
z-index: 12;
}
.map-pin-marker>.pin-white-circle {
position: absolute;
width: 39px;
height: 39px;
left: 3px;
top: 3px;
background-color: #ffffff;
border-radius: 50%;
z-index: 13;
}
.map-pin-marker>.pin-title-circle {
position: absolute;
width: 35px;
height: 35px;
left: 5px;
top: 5px;
background-color: rgba(22, 67, 88, 1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 14;
transition: background-color 0.3s;
}
.map-pin-marker>.pin-title-circle>.title-circle-text {
line-height: 1;
font-size: 10px;
color: #ffffff;
font-weight: 600;
z-index: 15;
}
.map-pin-marker>.pin-main-line {
position: absolute;
width: 5px;
height: 25px;
z-index: 11;
background-color: #000000;
top: 40px;
left: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.pin-marker>.pin-main-shadow {
position: absolute;
width: 11px;
height: 11px;
left: 17px;
top: 58px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
transition: transform 0.2s;
}
.pin-marker>.pin-main-shadow>.shadow-dot {
position: relative;
width: 1px;
height: 1px;
left: 0;
top: 0;
background-color: #000000;
border-radius: 50%;
z-index: 10;
}
.map-latlng-input-row {
position: absolute;
bottom: -11px;
z-index: 1000;
width: 240px;
left: 5px;
}
.map-latlng-form {
margin-bottom: 0;
}
.map-latlng-input {
background-color: rgba(255, 255, 255, 0.8);
}
.map-latlng-label {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 0.25rem;
padding: 3px 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border: 1px solid #ced4da;
color: #000000;
border-bottom: 0;
margin: 0;
}
.map-latlng-first-input {
border-radius: 0;
font-size: 12px;
color: #009900;
}
.map-latlng-first-input::placeholder {
font-size: 10px;
}
.map-latlng-sec-input {
border-top-right-radius: 0;
border-top-left-radius: 0;
font-size: 12px;
color: #009900;
}
.map-latlng-sec-input::placeholder {
font-size: 10px;
}
.abrar-map-title {
position: absolute;
top: 5px;
right: 5px;
z-index: 1000;
padding: 4px 7px;
color: #000;
font-size: 13px;
font-weight: 500;
border-radius: 0.25rem;
background-color: rgba(255, 193, 7, 0.8);
}
.starter-loader-container {
z-index: 3000 !important;
}
.distance-input {
margin-top: 10px;
margin-bottom: 10px;
}
label {
color: #000;
}
#top-card-title {
font-size: 12px;
font-weight: bold;
}
.error-message {
display: none;
font-size: 12px;
}
.second-round-title {
font-size: 15px;
font-weight: 500;
}
.edit-description {
border: 1px solid #ced4da;
border-radius: 0.25rem;
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}
.tablefontheader {
font-size: 12px;
}
table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td {
border-bottom-width: 0;
font-size: 11px;
}
.headercolortable {
background-color: #a6dcef;
}
table.dataTable tbody tr.selected {
background-color: #99cc99;
}
.div.dataTables_wrapper div.dataTables_length label {
float: left;
}
.dataTables_length {
float: left;
}
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting {
padding-right: 10px;
}
.table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
display: none;
}
.table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
display: none;
}
div.dataTables_wrapper div.dataTables_info {
padding-top: 0.85em;
white-space: nowrap;
font-size: 12px;
}
.preview-template {
border-left: 2px solid black;
border-right: 2px solid black;
}
.template-section {
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.section-title {
font-size: 11px;
text-align: center;
background-color: lightgrey;
font-weight: 600;
padding: 10px 15px;
border-bottom: 2px solid black;
}
.section-table>table {
width: 100%;
}
.section-table>table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.section-table th {
text-align: center;
font-size: 8px;
font-weight: 600;
padding: 4px 5px;
}
.section-table th.sub-title {
text-align: center;
font-size: 8px;
font-weight: 500;
padding: 4px 5px;
}
.section-table td {
text-align: center;
padding: 4px 2px;
}
.section-table th.w-2 {
width: 3%;
}
.section-table th.w-3 {
width: 3%;
}
.section-table th.w-4 {
width: 4%;
}
.section-table th.w-5 {
width: 5%;
}
div.dataTables_wrapper div.dataTables_processing {
position: absolute;
top: 70%;
left: 50%;
width: 200px;
margin-left: -100px;
margin-top: -26px;
text-align: center;
padding: 1em 0;
z-index: 10000;
}
.file-input-modal-container {
width: 100%;
}
.file-input-modal {
justify-content: center;
font-size: 11px;
display: flex;
align-items: center;
width: 100%;
height: 80px;
cursor: pointer;
text-align: center;
border: 1px solid #ced4da;
border-radius: 0.25rem;
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
background-color: #ffffff;
}
.file-input {
display: none;
}
.modal-error-message {
display: none;
}
.zoomimage {
width: 100%;
height: 80px;
}
.slideroverlay {
display: none;
text-align: right;
direction: rtl;
position: fixed;
z-index: 1051;
padding-top: 77px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.slideroverlay>.upload-confirm {
z-index: 50;
display: block;
position: absolute;
background: transparent;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.slideroverlay>.modal-content {
background-color: #ffffff;
border-radius: 7px;
margin: auto;
padding: 20px 1.5% 1px 1.5%;
border: 1px solid #888;
width: max-content;
position: relative;
z-index: 51;
}
.slideroverlay>.modal-content>.close {
position: absolute;
text-align: center;
top: 3px;
right: 5px;
color: #979797;
}
.slideroverlay>.modal-content>.close::before {
content: "\00d7";
font-size: 22px;
position: absolute;
}
.slideroverlay>.modal-content>.close:hover,
.slideroverlay>.modal-content>.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.slideroverlay>.modal-content>.slideshow .mySlides {
display: none;
}
.slideroverlay>.modal-content>.slideshow img {
/* vertical-align: middle;
width: 100%;
height: auto;
opacity: 1;
max-height: 500px;
max-width: 100%; */
vertical-align: middle;
width: auto;
height: auto;
opacity: 1;
max-height: 500px;
max-width: 100%;
margin: 0 auto;
display: flex;
}
.slideroverlay>.modal-content>.slideshow .slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.slideroverlay>.modal-content>.slideshow .prev,
.slideroverlay>.modal-content>.slideshow .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(0, 0, 0, 0.4);
}
.slideroverlay>.modal-content>.slideshow .next {
right: 0;
border-radius: 0px 3px 3px 0;
}
.slideroverlay>.modal-content>.slideshow .prev {
left: 0;
border-radius: 3px 0 0 3px;
}
.slideroverlay>.modal-content>.slideshow .prev:hover,
.slideroverlay>.modal-content>.slideshow .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.slideroverlay>.modal-content>.slideshow .text {
color: #f2f2f2;
background-color: rgba(0, 0, 0, 0.8);
padding: 10px 15px;
position: absolute;
bottom: -3px;
width: 100%;
text-align: center;
font-family: "IRANSans";
font-size: 12px;
}
.slideroverlay>.modal-content>.slideshow .numbertext {
color: #f2f2f2;
font-size: 14px;
padding: 8px 12px;
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
border-radius: 3px;
}
.slideroverlay>.modal-content>.slideshow #slideshow-dot {
margin-top: -9px;
margin-bottom: 10px;
direction: ltr;
}
.slideroverlay>.modal-content>.slideshow .dot {
cursor: pointer;
height: 12px;
width: 12px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.slideroverlay>.modal-content>.slideshow .active,
.slideroverlay>.modal-content>.slideshow .dot:hover {
background-color: #717171;
}
.slideroverlay>.modal-content>.slideshow .fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
.colorset {
background-color: #a6dcef;
}
.table th,
.table td {
padding: 8px;
}
.remove-image-container501 {
display: flex;
flex-direction: row;
color: #c32323;
position: absolute;
top: -12px;
left: 5px;
font-weight: bold;
cursor: pointer;
font-size: 11px;
}
div.dt-buttons {
position: relative;
float: right;
}
.footerfont {
font-size: 11px;
font-weight: 400;
}
.filterproject {
display: flex;
flex-direction: row;
direction: ltr;
width: 100%;
}
.optionfilter {
margin-top: 4px;
/* margin-right: 104px; */
margin-left: 829px;
width: 14% !important;
}
.dt-button:nth-child(2) {
background: #ffc107 !important;
border-color: #ffc107 !important;
}
.card-header>.card-tools {
float: right;
margin-right: -0.625rem;
}
</style>
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed starter-project-page">
<div class="wrapper">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- TOP MENU -->
<header>
<div class="menu_top" id="navbarmenu_top">
<div class="rahdariLogo">
<a href="https://rms.rmto.ir/"><img src="../dist/images/icons/alertInstallAppLogo.png" alt=""
title="سازمان راهداری و حمل و نقل جاده ای" /></a>
</div>
<button class="responsiveTopMenuBtn routinghover" onclick="window.open('/rmto', '_self');">
<img src="../dist/images/icons/home.svg" />صفحه اصلی
</button>
<div class="clearfix"></div>
<form id="logout-form" action="https://rms.rmto.ir/logout" method="POST" style="display: none;">
<input type="hidden" name="_token" value="UXFqJ6ugQ2CgaTbUp70tHF8k61tkt8i6eAaNUai9"> </form>
</div>
</header>
<!-- END TOP MENU -->
<!-- Main content -->
<div class="content">
<div class="starter-loader-container">
<div class="starter-loader"></div>
</div>
<div class="container-fluid">
<div class="row m-0" id="page-row">
<div class="col-sm-12">
<div class="update-main upnext" id="update-table">
<div class="card" id="update-card">
<div class="card-header">
<h3 class="card-title" id="top-card-title">
عملکرد استان
</h3>
<hr>
<!--filter -->
<div class="card-tools " style="width: 100%;">
<span style="font-size: 13px ; font-weight: bold;"> انتخاب پروژه</span>
<select style="margin-top: 13px; margin-bottom: 10px;width: 13%;" class="form-control "
name="optionfilter" id="optionfilter">
<option value="0">روکش آسفالت (نگهداری راه )</option>
<option value="1">رفع نقاط حادثه خیز /پرتصادف</option>
<option value="2">ارتقای ایمنی راه</option>
<option value="3">ابنیه فنی (نگهداری ابنیه فنی )</option>
<option value="4">راهدارخانه ها (بهسازی و نوسازی )</option>
<!-- <option value="5">احداث راه روستایی</option> -->
</select>
<span style="font-size: 13px ; font-weight: bold;">فیلتر </span>
<div class="row" style="margin-right: 0%">
<!-- <label style="margin-bottom: 14px;display:block">نوع راه<small></small></label> -->
<div class="icheck-primary d-inline ml-2" style="width: 5%;">
<input type="checkbox" id="axis0" name="axis" value="0" />
<label for="axis0" class="font-check">
کل راه ها
</label>
</div>
<div class="icheck-primary d-inline ml-2" style="width: 5%;">
<input type="checkbox" id="axis1" name="axis" value="1" />
<label for="axis1" class="font-check">
شریانی
</label>
</div>
<div class="icheck-primary d-inline ml-2" style="width: 5%;">
<input type="checkbox" id="axis2" name="axis" value="2" />
<label for="axis2" class="font-check">
اصلی
</label>
</div>
<div class="icheck-primary d-inline ml-2" style="width: 5%;">
<input type="checkbox" id="axis3" name="axis" value="3" />
<label for="axis3" class="font-check">
فرعی
</label>
</div>
<div class="icheck-primary d-inline ml-2" style="width: 5%;">
<input type="checkbox" id="axis4" name="axis" value="4" />
<label for="axis4" class="font-check">
روستایی
</label>
</div>
<div class="form-group" style="width: 10%; ">
<input type="text" class="form-control" name="endclock" placeholder="انتخاب تاریخ"
id="endclock" style="margin-top: 4px;" />
</div>
<div class="form-group " style="width: 10%; margin-right: 1%">
<select style="margin-top: 4px;" class="form-control" name="" id="province-id">
</select>
</div>
<div class="form-group" style="width: 10%; margin-right: 1%">
<select style="margin-top: 4px;" class="form-control" name="" id="town-id">
<option value="0">انتخاب شهرستان</option>
</select>
</div>
<div class="form-group" style="width: 6%; margin-right: 1% ;margin-top: 9px">
<button type="button" class="btn btn-primary btn-applyChange" id="filteraddtabel"
style="width: 100%;">
جستجو
</button>
</div>
</div>
</div>
</div>
<div class="card-body table-responsive p-2" style="margin-top: 16px;" id="project0">
<table class="table table-striped table-bordered projects" id="example-update" style="width: 100%">
<thead>
<tr class="colorset">
<th rowspan="3" style="width: 7%;"> استان </th>
<th rowspan="3" style="width: 3%;">شهرستان</th>
<th rowspan="3" style="width: 7%;">
تعداد پروژه ها
</th>
<th colspan="2" style="width: 5%;">
درزگیری
</th>
<th colspan="4" style="width: 5%;">لکه گیری</th>
<th colspan="9" style="width: 5%; text-align: center;">
روکش های تقویتی
</th>
<th colspan="24" style="width: 5%; text-align: center;">
روکش های حفاظتی
</th>
</tr>
<tr style="background-color: #b1e8ed;">
<th rowspan="2">کیلومتر</th>
<th rowspan="2">درصد</th>
<th rowspan="2">کیلومتر</th>
<th rowspan="2">مترمربع</th>
<th rowspan="2">تناژ</th>
<th rowspan="2">درصد</th>
<th colspan="3" style="width: 5%;">روکش آسفالت</th>
<th colspan="3" style="width: 5%;">ماسه آسفالت</th>
<th colspan="3" style="width: 5%;">
بازیافت سرد/گرم
</th>
<th colspan="3" style="width: 5%;">
میکروسرفیسینگ
</th>
<th colspan="3" style="width: 4%;">چیپ سیل</th>
<th colspan="3" style="width: 5%;">
اسلاری سیل
</th>
<th colspan="3" style="width: 5%;">اسکراب سیل</th>
<th colspan="3" style="width: 5%;">فوگ سیل</th>
<th colspan="3" style="width: 5%; font-size: 12px;">
سیل کت
</th>
<th colspan="3" style="width: 5%;">
کیپ سیل
</th>
<th colspan="3" style="width: 5%;">
آسفالت سرد ردمیکس
</th>
</tr>
<tr style="background-color: #9abbd3;">
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
<th>کیلومتر</th>
<th>تناژ</th>
<th>درصد</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="1" class="footerfont" style="text-align: right; ">
</th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
</tr>
</tfoot>
</table>
<div class="row col-sm-10" style="margin-right: 10%;">
<div class="col-xl-6 col-lg-6 col-md-6 col-12 text-center px-4" id="graph-container1">
<canvas id="myChart" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-12 text-center px-4" id="graph-container2">
<canvas id="myyChart" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4" id="graph-container3" style="display:none">
<canvas id="myChartt" style="width: 300px !important; height: 300px !important; "></canvas>
</div>
</div>
</div>
<div class="card-body table-responsive p-2" style="margin-top: 16px;display: none; " id="project1">
<table class="table table-striped table-bordered projects" id="example-update2"
style="width: 100%;">
<thead>
<tr class="colorset">
<th rowspan="2" style="width: 6%;"> استان </th>
<th rowspan="2" style="width: 3%;">شهرستان</th>
<th rowspan="2" style="width: 3%;">
تعداد پروژه ها
</th>
<th colspan="1" style="width: 8%;">
تعریض و روکش
</th>
<th colspan="1" style="width: 8%;">
اصلاح قوس
</th>
<th colspan="1" style="width: 8%;">
تراشه برداری
</th>
<th colspan="1" style="width: 8%;">
روشنایی نقطه ای
</th>
<th colspan="1" style="width: 11%;">
احداث تقاطع غیر هم سطح (پل / زیر گذر )
</th>
<th colspan="1" style="width: 9%;">
ایمن سازی علائم و حفاظ
</th>
<th colspan="1" style="width: 9%;">
اصلاح ورودی و خروجی
</th>
<th colspan="1" style="width: 8%;">
تعریض ابنیه فنی
</th>
</tr>
<tr style="background-color: #9abbd3;">
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="1" class="footerfont" style="text-align: right; ">
</th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
</tr>
</tfoot>
</table>
<!-- <div class="row col-sm-10" style="margin-right: 10%;">
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myChart2" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myyChart2" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myChartt2" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
</div> -->
</div>
<div class="card-body table-responsive p-2" style="margin-top: 16px; display: none;" id="project2">
<table class="table table-striped table-bordered projects" id="example-update3"
style="width: 100%;">
<thead>
<tr class="colorset">
<th rowspan="2" style="width: 3%;"> استان </th>
<th rowspan="2" style="width: 3%;">شهرستان</th>
<th rowspan="2" style="width: 3%;">
تعداد پروژه ها
</th>
<th colspan="2" style="width: 10%;">
نصب حفاظ بتنی
</th>
<th colspan="2" style="width: 10%;">
نصب حفاظ فلزی /گارد ریل
</th>
<th colspan="2" style="width: 10%;">
اجرا روشنایی طولی
</th>
<th colspan="2" style="width: 10%;">
اجرا روشنایی نقطه ای
</th>
<th colspan="2" style="width: 11%;">
نصب علائم ایمنی (اخباری )
</th>
<th colspan="2" style="width: 10%;">
نصب علائم ایمنی سایر
</th>
<th colspan="2" style="width: 10%;">
خط کشی
</th>
<th colspan="2" style="width: 10%;">
اصلاح شیب شیروانی
</th>
<th colspan="1" style="width: 10%;">
سایر اقدامات
</th>
</tr>
<tr style="background-color: #9abbd3;">
<th> کیلومتر</th>
<th> درصد پیشرفت فیزیکی</th>
<th> کیلومتر</th>
<th> درصد پیشرفت فیزیکی</th>
<th> کیلومتر</th>
<th> درصد پیشرفت فیزیکی</th>
<th> تعداد</th>
<th> درصد پیشرفت فیزیکی</th>
<th> تعداد</th>
<th> درصد پیشرفت فیزیکی</th>
<th> تعداد</th>
<th> درصد پیشرفت فیزیکی</th>
<th> کیلومتر</th>
<th> درصد پیشرفت فیزیکی</th>
<th> کیلومتر</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="1" class="footerfont" style="text-align: right; ">
</th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
</tr>
</tfoot>
</table>
<!-- <div class="row col-sm-10" style="margin-right: 10%;">
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myChart3" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myyChart3" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myChartt3" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
</div> -->
</div>
<div class="card-body table-responsive p-2" style="margin-top: 16px; display: none;" id="project3">
<table class="table table-striped table-bordered projects" id="example-update4"
style="width: 100%;">
<thead>
<tr class="colorset">
<th rowspan="2" style="width: 6%;"> استان </th>
<th rowspan="2" style="width: 3%;">شهرستان</th>
<th rowspan="2" style="width: 3%;">
تعداد پروژه ها
</th>
<th colspan="1" style="width: 8%;">
تعریض پل / آبرو
</th>
<th colspan="1" style="width: 8%;">
تعمیرات اساسی پل
</th>
<th colspan="1" style="width: 8%;">
تعمیرات تونل
</th>
<th colspan="1" style="width: 8%;">
تعمیر یا احداث دیوار حائل
</th>
<th colspan="1" style="width: 11%;">
احداث پل جدید
</th>
<th colspan="1" style="width: 9%;">
احداث کنارگذر پل / تونل
</th>
<th colspan="1" style="width: 9%;">
سایر
</th>
</tr>
<tr style="background-color: #9abbd3;">
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="1" class="footerfont" style="text-align: right; ">
</th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
</tr>
</tfoot>
</table>
<!-- <div class="row col-sm-10" style="margin-right: 10%;">
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myChart4" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myyChart4" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myChartt4" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
</div> -->
</div>
<div class="card-body table-responsive p-2" style="margin-top: 16px; display: none; " id="project4">
<table class="table table-striped table-bordered projects" id="example-update5"
style="width: 100%;">
<thead>
<tr class="colorset">
<th rowspan="2" style="width: 6%;"> استان </th>
<th rowspan="2" style="width: 3%;">شهرستان</th>
<th rowspan="2" style="width: 3%;">
تعداد پروژه ها
</th>
<th colspan="1" style="width: 8%;">
احداث راهدارخانه
</th>
<th colspan="1" style="width: 8%;">
احداث انبار شن و نمک
</th>
<th colspan="1" style="width: 8%;">
نوسازی و بهسازی راهدارخانه
</th>
<th colspan="1" style="width: 8%;">
احداث آشیانه ماشین آلات
</th>
<th colspan="1" style="width: 11%;">
تغییرات جزئی راهدارخانه
</th>
<th colspan="1" style="width: 9%;">
محوطه سازی راهدارخانه
</th>
<th colspan="1" style="width: 9%;">
سایر
</th>
</tr>
<tr style="background-color: #9abbd3;">
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="1" class="footerfont" style="text-align: right; ">
</th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
</tr>
</tfoot>
</table>
</div>
<div class="card-body table-responsive p-2" style="margin-top: 16px; display: none; " id="project5">
<table class="table table-striped table-bordered projects" id="example-update6"
style="width: 100%;">
<thead>
<tr class="colorset">
<th rowspan="2" style="width: 6%;"> استان </th>
<th rowspan="2" style="width: 3%;">شهرستان</th>
<th rowspan="2" style="width: 3%;">
تعداد پروژه ها
</th>
<th colspan="1" style="width: 8%;">
احداث ابنیه فنی
</th>
<th colspan="1" style="width: 8%;">
عملیات خاکی
</th>
<th colspan="1" style="width: 8%;">
روسازی
</th>
<th colspan="1" style="width: 8%;">
آسفالت
</th>
</tr>
<tr style="background-color: #9abbd3;">
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
<th> درصد پیشرفت فیزیکی</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="1" class="footerfont" style="text-align: right; ">
</th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
<th class="footerfont"></th>
</tr>
</tfoot>
</table>
<!-- <div class="row col-sm-10" style="margin-right: 10%;">
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myChart6" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myyChart6" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-12 text-center px-4">
<canvas id="myChartt6" style="width: 300px !important; height: 300px !important;"></canvas>
</div>
</div> -->
</div>
</div>
</div>
</div>
<div id="project-filter-modal" class="modal animated zoomIn fade">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">
فیلتر جدول عملکرد
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="col-md-12">
<div class="row">
<label style="margin-bottom: 14px;">نوع راه<small></small></label>
<div class="col-md-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" id="axis0" name="axis" value="0" />
<label for="axis0" class="font-check">
کل راه ها
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" id="axis1" name="axis" value="1" />
<label for="axis1" class="font-check">
شریانی
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" id="axis2" name="axis" value="2" />
<label for="axis2" class="font-check">
اصلی
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" id="axis3" name="axis" value="3" />
<label for="axis3" class="font-check">
فرعی
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12" style="margin-top: 10px;">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" id="axis4" name="axis" value="4" />
<label for="axis4" class="font-check">
روستایی
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12" style="margin-top: 15px;">
<div class="row">
<div class="form-group col-md-6">
<label style="margin-right: -6px;">
تاریخ پایانی
</label>
<input type="text" class="form-control" name="endclock" placeholder="انتخاب تاریخ"
id="endclock" style="margin-top: 4px;" />
</div>
<div class="form-group col-md-6">
<label style="margin-right: -6px;">
اداره کل استان
</label>
<select style="margin-top: 4px;" class="form-control" name="province-id" id="province-id">
</select>
</div>
</div>
</div>
<div class="col-md-12" style="margin-top: 5px;">
<div class="row">
<div class="form-group col-md-6">
<label style="margin-right: -6px;">
انتخاب شهرستان
</label>
<select style="margin-top: 4px;" class="form-control" name="" id="town-id">
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-prev cancel" id="cancelbutton" class="cancel">
انصراف
</button>
<!-- <button type="button" class="btn btn-primary btn-next">ثبت</button> -->
<!-- <button type="button" class="btn btn-danger btn-applyChangeCancel"
style="display: none">انصراف</button> -->
<button type="button" class="btn btn-primary btn-applyChange" id="filteraddtabel">
جستجو
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- InputMask -->
<script src="../plugins/inputmask/min/jquery.inputmask.bundle.min.js"></script>
<!-- Leaflet -->
<script src="../dist/js/leaflet.js"></script>
<!-- Leaflet Routing Machine js -->
<script src="../dist/js/leaflet-routing-machine.js"></script>
<script src="../plugins/sweetalert2/sweetalert2.all.min.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../dist/js/dataTables.bootstrap4.min.js"></script>
<script src="../dist/js/datatables/persian.js"></script>
<script src="../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="../dist/js/jszip.min.js"></script>
<!-- Persian Datepicker -->
<script src="../plugins/moment/moment.min.js"></script>
<script src="../dist/js/jalali-moment.browser.js"></script>
<script src="../dist/js/persian-date.min.js"></script>
<script src="../dist/js/persian-datepicker.min.js"></script>
<!-- Bootstrap slider -->
<script src="../plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
<!-- Page Script -->
<!-- <script src="../dist/js/road-maintenance-report.js?v=0.13"></script> -->
<script src="../plugins/chart.js/Chart.min.js"></script>
<script src="../dist/js/road-maintenance-report.js?v=0.38"></script>
</body>
</html>