385 lines
11 KiB
PHP
385 lines
11 KiB
PHP
{{-- {{dd($data)}} --}}
|
|
<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" />
|
|
<link rel="icon" href="../../dist/images/fav.ico" type="image/ico" sizes="16x16" />
|
|
<title>خروجی به PDF</title>
|
|
<link rel="stylesheet" href="{{asset('dist/css/adminlte.css')}}" />
|
|
<link rel="stylesheet" href="{{asset('dist/css/fontiran.css')}}" />
|
|
<link rel="stylesheet" href="{{asset('plugins/fontawesome-free/css/all.min.css')}}" />
|
|
<link rel="stylesheet" href="{{asset('plugins/chart.js/Chart.min.css')}}" />
|
|
|
|
<script>
|
|
|
|
</script>
|
|
<link rel="stylesheet" media="screen" href="">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
direction: rtl;
|
|
}
|
|
|
|
table tbody td {
|
|
text-align: center;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.header img {
|
|
width: 30px;
|
|
}
|
|
|
|
.table thead th {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
table tr th {
|
|
text-align: center;
|
|
background-color: #fbe4d5;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tr-color-subheader th {
|
|
background-color: #fbe4d5 !important;
|
|
}
|
|
|
|
.head-bckchanger {
|
|
text-align: center;
|
|
background-color: #fbe4d5;
|
|
font-size: 12px;
|
|
}
|
|
|
|
table tr:first-child th {
|
|
background-color: #9cc2e5;
|
|
}
|
|
|
|
.instead_bcolor {
|
|
background-color: #9cc2e5;
|
|
}
|
|
|
|
.background-changer {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
table td {
|
|
text-align: center;
|
|
background-color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pro-span {
|
|
color: #fdc07a;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
border-bottom: 2px solid #000;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.body {
|
|
margin-top: 10px;
|
|
border: 1px solid #000;
|
|
overflow-x: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
.body-header-text {
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.all-tables {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.none-border {
|
|
margin-bottom: 10px;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.print-width {
|
|
max-width: 900px;
|
|
}
|
|
|
|
.img-front-header {
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.h6-yellow {
|
|
color: #fdc07a;
|
|
}
|
|
|
|
.border-bottom-cleaner {
|
|
border-bottom: 0px !important;
|
|
}
|
|
|
|
.border-top-cleaner {
|
|
border-top: 0px !important;
|
|
}
|
|
|
|
.background-changer img {
|
|
max-width: 100% !important;
|
|
height: 600px !important;
|
|
}
|
|
|
|
.tr-color-subheader th {
|
|
background-color: #fbe4d5 !important;
|
|
}
|
|
|
|
@media print {
|
|
.print-none {
|
|
display: none;
|
|
}
|
|
|
|
body {
|
|
-webkit-print-color-adjust: exact;
|
|
}
|
|
|
|
table tr:first-child th {
|
|
background-color: #9cc2e5 !important;
|
|
}
|
|
|
|
.page-print-break {
|
|
page-break-before: always;
|
|
}
|
|
.pagebreak { page-break-before: always; }
|
|
|
|
}
|
|
.image_header {
|
|
width: 40px ;
|
|
}
|
|
.header-font{
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
}
|
|
.date_font {
|
|
font-size: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="print-none">
|
|
<div class="d-flex justify-content-center mt-3 mb-3">
|
|
<button class="btn btn-primary" onclick="showPrintPDF()">پرینت</button>
|
|
</div>
|
|
</div>
|
|
<div class="container print-width" id="printablePart">
|
|
<div class="row">
|
|
<div class="col" ><img src="{{asset("word-icons/logo.svg")}}" alt=""><img class="image_header" src="{{asset("word-icons/rahdari.png")}}" alt=""></div>
|
|
<div class="col text-center"><p class="header-font"> گزارش عملکرد <span>"{{$data['group_name']}}"</span></p>
|
|
<p class="font-weight-bold date_font">(از تاریخ : <span class="date-from font-weight-light ml-3"></span>تا تاریخ:
|
|
<span class="date-to font-weight-light"></span>)
|
|
</p></div>
|
|
<div class="col"></div>
|
|
|
|
</div>
|
|
<div class="body">
|
|
<div class="d-flex flex-column justify-content-center align-items-center">
|
|
<div class="d-flex w-100 pl-2 pr-2" style="background-color: #9cc2e5;justify-content: space-around;">
|
|
<h6 class="col-2 pt-2 pb-2 text-center">مجموع فعالیت<br><small>(ساعت)</small></h6>
|
|
<h6 class="col-2 pt-2 pb-2 text-center">تعداد فعالیت</h6>
|
|
<h6 class="col-2 pt-2 pb-2 text-center">تعداد کاربران گروه</h6>
|
|
<h6 class="col-2 pt-2 pb-2 text-center">تعداد کاربران فعال</h6>
|
|
<h6 class="col-2 pt-2 pb-2 text-center">شاخص فعالیت<br><small>(تعداد کاربران/ساعت)</small></h6>
|
|
</div>
|
|
<div class="d-flex w-100 pl-2 pr-2" style="background-color: #fbe4d5;justify-content: space-around;">
|
|
<p class="col-2 pt-2 m-0 pb-2 text-center">{{$data['total_activity_time'] ?? 0}}</p>
|
|
<p class="col-2 pt-2 m-0 pb-2 text-center">{{$data['total_activity_quantity']}}</p>
|
|
<p class="col-2 pt-2 m-0 pb-2 text-center">{{$data['total_user_count']}}</p>
|
|
<p class="col-2 pt-2 m-0 pb-2 text-center">{{$data['active_user_count']}}</p>
|
|
<p class="col-2 pt-2 m-0 pb-2 text-center">{{$data['average']}}</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<table class="table table-default table-bordered all-tables">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="9">
|
|
<h5>لیست ده فعالیت پرتکرار</h5>
|
|
</th>
|
|
</tr>
|
|
<tr class="tr-color-subheader">
|
|
<th>عنوان فعالیت</th>
|
|
<th>تعداد تکرار</th>
|
|
<th>عنوان فعالیت</th>
|
|
<th>تعداد تکرار</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@if(count($data['top_10_activity_list']))
|
|
@for ($i = 1; $i <= round(count($data['top_10_activity_list']) / 2); $i++)
|
|
<tr>
|
|
<td>{{$data['top_10_activity_list'][$i - 1]->description}}</td>
|
|
<td>{{$data['top_10_activity_list'][$i - 1]->quantity}}</td>
|
|
@if(isset($data['top_10_activity_list'][($i + round(count($data['top_10_activity_list']) / 2)) - 1]))
|
|
<td>{{$data['top_10_activity_list'][($i + round(count($data['top_10_activity_list']) / 2)) - 1]->description}}</td>
|
|
<td>{{$data['top_10_activity_list'][($i + round(count($data['top_10_activity_list']) / 2)) - 1]->quantity}}</td>
|
|
@endif
|
|
</tr>
|
|
@endfor
|
|
@else
|
|
<tr>
|
|
<td colspan="4">داده ای وجود ندارد ...</td>
|
|
</tr>
|
|
@endif
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<canvas id="myChart" style="display: block; width: 1510px; height: 400px;" class="chartjs-render-monitor" width="1510" height="400"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="{{asset('plugins/jquery/jquery.min.js')}}"></script>
|
|
<script src="{{asset('plugins/bootstrap/js/bootstrap.bundle.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/chart.js/Chart.min.js')}}"></script>
|
|
<script src="{{asset('plugins/chartjs-plugin-datalabels/chartjs-plugin-datalabels.min.js')}}"></script>
|
|
<script>
|
|
|
|
$(".date-from").text(moment(
|
|
'{{$data['fromDate']}}').format('jYYYY/jMM/jDD'));
|
|
$(".date-to").text(moment(
|
|
'{{$data['toDate']}}').format('jYYYY/jMM/jDD'));
|
|
|
|
Chart.defaults.global.defaultFontFamily = "IRANSansFaNum";
|
|
var data = {
|
|
"datasets": [
|
|
{
|
|
"backgroundColor": "rgb(156, 39, 176)",
|
|
"borderColor": "rgb(156, 39, 176)",
|
|
"fill": false,
|
|
"data":@json($data['hourly_activity_chart']),
|
|
"datalabels": {
|
|
"align": 'start',
|
|
"anchor": 'start'
|
|
},
|
|
"id": "amount",
|
|
"label": "ساعت فعالیت در سامانه",
|
|
"yAxisID":"left"
|
|
},
|
|
{
|
|
"backgroundColor": "rgb(39, 176, 200)",
|
|
"borderColor": "rgb(39, 176, 200)",
|
|
"fill": false,
|
|
"data": @json($data['quantitative_activity_chart']),
|
|
"datalabels": {
|
|
"align": 'end',
|
|
"anchor": 'end'
|
|
},
|
|
"id": "amount",
|
|
"label": "تعداد فعالیت در سامانه",
|
|
"yAxisID":"right"
|
|
|
|
}
|
|
],
|
|
"labels": @json($data['labels'])
|
|
};
|
|
|
|
var options = {
|
|
plugins: {
|
|
datalabels: {
|
|
backgroundColor: function(context) {
|
|
return context.dataset.backgroundColor;
|
|
},
|
|
display: true,
|
|
borderRadius: 4,
|
|
color: 'white',
|
|
font: {
|
|
weight: 'bold'
|
|
},
|
|
padding: 0
|
|
}
|
|
},
|
|
"elements": {
|
|
"rectangle": {
|
|
"borderWidth": 2
|
|
}
|
|
},
|
|
"layout": {
|
|
"padding": 0
|
|
},
|
|
"legend": {
|
|
"display": true,
|
|
"labels": {
|
|
"boxWidth": 50
|
|
}
|
|
},
|
|
"maintainAspectRatio": false,
|
|
"responsive": true,
|
|
"scales": {
|
|
"xAxes": [
|
|
{
|
|
"gridLines": {
|
|
"display": false
|
|
},
|
|
"scaleLabel": {
|
|
"display": true,
|
|
"labelString": "نام گروه"
|
|
},
|
|
"stacked": false,
|
|
"ticks": {
|
|
"autoSkip": true,
|
|
"beginAtZero": true
|
|
},
|
|
}
|
|
],
|
|
"yAxes": [
|
|
{
|
|
"scaleLabel": {
|
|
"display": true,
|
|
"labelString": "ساعت فعالیت در سامانه"
|
|
},
|
|
"id": "left",
|
|
"stacked": false,
|
|
"ticks": {
|
|
"beginAtZero": true
|
|
}
|
|
},
|
|
{
|
|
"scaleLabel": {
|
|
"display": true,
|
|
"labelString": "تعداد فعالیت در سامانه"
|
|
},
|
|
"id": "right",
|
|
"position": "right",
|
|
"stacked": false,
|
|
"ticks": {
|
|
"beginAtZero": true
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"title": {
|
|
"display": false
|
|
},
|
|
"tooltips": {
|
|
"intersect": false,
|
|
"mode": "index",
|
|
"position": "nearest",
|
|
"callbacks": {}
|
|
}
|
|
}
|
|
var type = "line";
|
|
|
|
var myChart = new Chart(document.getElementById("myChart").getContext('2d'), {options, data, type});
|
|
function showPrintPDF() {
|
|
window.print();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |