504 lines
19 KiB
PHP
504 lines
19 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 class="d-flex ">
|
|
<table class="table table-default table-bordered all-tables ml-3">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="9">
|
|
<h5>مجموع تعداد فعالیت به ازای هر کاربر گروه</h5>
|
|
</th>
|
|
</tr>
|
|
<tr class="tr-color-subheader">
|
|
<th>نام و نام خانوادگی<small class="pr-2">(نام کاربری) </small></th>
|
|
<th>تعداد فعالیت</th>
|
|
<th>سهم از کل <small>(درصد)</small></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($data['user_activity_quantity'] as $item)
|
|
<tr>
|
|
<td>{{ $item['name'] }}</td>
|
|
<td>{{ $item['majmoe'] }}</td>
|
|
<td>{{ $data['total_activity_quantity'] ? round(($item['majmoe'] / $data['total_activity_quantity']) * 100) : 0 }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
<table class="table table-default table-bordered all-tables">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="9">
|
|
<h5>مجموع ساعت فعالیت به ازای هر کاربر گروه</h5>
|
|
</th>
|
|
</tr>
|
|
<tr class="tr-color-subheader">
|
|
<th>نام و نام خانوادگی<small class="pr-2">(نام کاربری) </small></th>
|
|
<th>ساعت فعالیت</th>
|
|
<th>سهم از کل <small>(درصد)</small></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($data['user_activity_time'] as $item)
|
|
<tr>
|
|
<td>{{ $item['name'] }}</td>
|
|
<td>{{ $item['majmoe'] }}</td>
|
|
<td>{{ $data['total_activity_time'] ? round(($item['majmoe'] / $data['total_activity_time']) * 100) : 0 }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="">
|
|
<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>
|
|
<th>فعالیت چهارم</th>
|
|
<th>فعالیت پنجم</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($data['user_activity_top_5_temp'] as $item)
|
|
<tr>
|
|
<td>{{ $item['name'] }}</td>
|
|
@forelse ($item['activity_list'] as $temp)
|
|
<td>{{ $temp->description }} ({{ $temp->quantity }})</td>
|
|
@empty
|
|
<td colspan="5">عملیاتی موجود نیست</td>
|
|
@endforelse
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</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('dist/js/chartjs-plugin-datalabels.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'));
|
|
</script>
|
|
<script>
|
|
var hour_data = []
|
|
var quentity_hour = []
|
|
var labels = []
|
|
Chart.defaults.global.defaultFontFamily = "IRANSansFaNum";
|
|
var serverToJs = {
|
|
hourly_activity_chart: @json($data['hourly_activity_chart']),
|
|
quantitative_activity_chart: @json($data['quantitative_activity_chart'])
|
|
}
|
|
|
|
var hourly_activity_chart = serverToJs.hourly_activity_chart;
|
|
var quantitative_activity_chart = serverToJs.quantitative_activity_chart;
|
|
|
|
console.log(serverToJs);
|
|
|
|
for (var i = 0; i < hourly_activity_chart.length; i++) {
|
|
hour_data.push(hourly_activity_chart[i].majmoe)
|
|
}
|
|
|
|
for (var i = 0; i < quantitative_activity_chart.length; i++) {
|
|
quentity_hour.push(quantitative_activity_chart[i].quantity)
|
|
labels.push(moment(quantitative_activity_chart[i].created_at).format("jYYYY/jMM/jDD"))
|
|
}
|
|
var data = {
|
|
"datasets": [{
|
|
"backgroundColor": "rgb(156, 39, 176)",
|
|
"borderColor": "rgb(156, 39, 176)",
|
|
"fill": false,
|
|
"data": hour_data,
|
|
"id": "amount",
|
|
"label": "ساعت فعالیت در سامانه",
|
|
"yAxisID": "left",
|
|
"datalabels": {
|
|
"align": 'start',
|
|
"anchor": 'start'
|
|
},
|
|
},
|
|
{
|
|
"backgroundColor": "rgb(39, 176, 200)",
|
|
"borderColor": "rgb(39, 176, 200)",
|
|
"fill": false,
|
|
"data": quentity_hour,
|
|
"id": "amount",
|
|
"label": "تعداد فعالیت در سامانه",
|
|
"yAxisID": "right",
|
|
"datalabels": {
|
|
"align": 'end',
|
|
"anchor": 'end'
|
|
},
|
|
}
|
|
],
|
|
"labels": labels
|
|
};
|
|
|
|
var options = {
|
|
"elements": {
|
|
"rectangle": {
|
|
"borderWidth": 2
|
|
}
|
|
},
|
|
"layout": {
|
|
"padding": 0
|
|
},
|
|
"legend": {
|
|
"display": true,
|
|
"labels": {
|
|
"boxWidth": 16
|
|
}
|
|
},
|
|
"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": {}
|
|
},
|
|
"plugins": {
|
|
"datalabels": {
|
|
"display": true,
|
|
backgroundColor: function(context) {
|
|
return context.dataset.backgroundColor;
|
|
},
|
|
display: true,
|
|
formatter: function(value, ctx) {
|
|
return value;
|
|
},
|
|
borderRadius: 4,
|
|
color: 'white',
|
|
font: {
|
|
weight: 'bold'
|
|
},
|
|
padding: 6
|
|
}
|
|
},
|
|
}
|
|
var type = "line";
|
|
|
|
var myChart = new Chart(document.getElementById("myChart").getContext('2d'), {
|
|
options,
|
|
data,
|
|
type
|
|
});
|
|
|
|
function showPrintPDF() {
|
|
window.print();
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|