381 lines
17 KiB
PHP
381 lines
17 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '総合ダッシュボード')
|
|
|
|
@section('content')
|
|
<div class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0 text-dark">総合ダッシュボード</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="{{ route('information') }}">ホーム</a></li>
|
|
<li class="breadcrumb-item active">総合ダッシュボード</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<!-- 全体統計情報 -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card card-primary">
|
|
<div class="card-header">
|
|
<h3 class="card-title">全体統計</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-info">
|
|
<div class="inner">
|
|
<h3>{{ $totalStats['total_cities'] }}</h3>
|
|
<p>自治体数</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fa fa-map-marker"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3>{{ $totalStats['total_parks'] }}</h3>
|
|
<p>駐輪場数</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fa fa-building"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<h3>{{ number_format($totalStats['total_contracts']) }}</h3>
|
|
<p>総契約数</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fa fa-file-text"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-danger">
|
|
<div class="inner">
|
|
<h3>{{ number_format($totalStats['total_waiting']) }}</h3>
|
|
<p>総予約待ち</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fa fa-clock-o"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-purple">
|
|
<div class="inner">
|
|
<h3>{{ number_format($totalStats['total_capacity']) }}</h3>
|
|
<p>総収容台数</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fa fa-bicycle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-teal">
|
|
<div class="inner">
|
|
<h3>{{ $totalStats['total_utilization_rate'] }}%</h3>
|
|
<p>全体利用率</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fa fa-pie-chart"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 自治体別統計表 -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">自治体別統計</h3>
|
|
<div class="card-tools">
|
|
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
|
<i class="fa fa-minus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped table-hover" id="cityStatsTable">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>自治体名</th>
|
|
<th class="text-center">駐輪場数</th>
|
|
<th class="text-center">契約数</th>
|
|
<th class="text-center">利用者数</th>
|
|
<th class="text-center">予約待ち</th>
|
|
<th class="text-center">収容台数</th>
|
|
<th class="text-center">利用率</th>
|
|
<th class="text-center">空き台数</th>
|
|
<th class="text-center">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($cityStats as $stat)
|
|
<tr>
|
|
<td>
|
|
<strong>{{ $stat['city']->city_name }}</strong>
|
|
</td>
|
|
<td class="text-center">
|
|
{{ $stat['parks_count'] }}
|
|
</td>
|
|
<td class="text-center">
|
|
{{ number_format($stat['contracts_count']) }}
|
|
</td>
|
|
<td class="text-center">
|
|
{{ number_format($stat['users_count']) }}
|
|
</td>
|
|
<td class="text-center">
|
|
@if($stat['waiting_count'] > 0)
|
|
<span class="badge badge-warning">{{ number_format($stat['waiting_count']) }}</span>
|
|
@else
|
|
<span class="badge badge-success">0</span>
|
|
@endif
|
|
</td>
|
|
<td class="text-center">
|
|
{{ number_format($stat['capacity']) }}
|
|
</td>
|
|
<td class="text-center">
|
|
@php
|
|
$rate = $stat['utilization_rate'];
|
|
$badgeClass = $rate >= 90 ? 'danger' : ($rate >= 70 ? 'warning' : 'success');
|
|
@endphp
|
|
<span class="badge badge-{{ $badgeClass }}">{{ $rate }}%</span>
|
|
</td>
|
|
<td class="text-center">
|
|
@if($stat['available_spaces'] > 0)
|
|
<span class="text-success">{{ number_format($stat['available_spaces']) }}</span>
|
|
@else
|
|
<span class="text-danger">満車</span>
|
|
@endif
|
|
</td>
|
|
<td class="text-center">
|
|
<a href="{{ route('city_dashboard', ['city_id' => $stat['city']->city_id]) }}"
|
|
class="btn btn-sm btn-primary">
|
|
<i class="fa fa-eye"></i> 詳細
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 利用率チャート -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">自治体別利用率</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="utilizationChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">予約待ち状況</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="waitingChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- アラート表示 -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card card-warning">
|
|
<div class="card-header">
|
|
<h3 class="card-title">⚠️ 注意が必要な自治体</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
@php
|
|
$alertCities = collect($cityStats)->filter(function($stat) {
|
|
return $stat['utilization_rate'] >= 90 || $stat['waiting_count'] > 10;
|
|
});
|
|
@endphp
|
|
|
|
@if($alertCities->count() > 0)
|
|
<div class="row">
|
|
@foreach($alertCities as $stat)
|
|
<div class="col-md-4">
|
|
<div class="alert alert-warning">
|
|
<h5><i class="icon fa fa-exclamation-triangle"></i> {{ $stat['city']->city_name }}</h5>
|
|
@if($stat['utilization_rate'] >= 90)
|
|
<p>利用率が {{ $stat['utilization_rate'] }}% と高くなっています</p>
|
|
@endif
|
|
@if($stat['waiting_count'] > 10)
|
|
<p>予約待ちが {{ $stat['waiting_count'] }}人 います</p>
|
|
@endif
|
|
<a href="{{ route('city_dashboard', ['city_id' => $stat['city']->city_id]) }}"
|
|
class="btn btn-sm btn-warning">詳細確認</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="alert alert-success">
|
|
<i class="icon fa fa-check"></i> 現在、特に注意が必要な自治体はありません。
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// データテーブル初期化
|
|
$('#cityStatsTable').DataTable({
|
|
"language": {
|
|
"url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Japanese.json"
|
|
},
|
|
"pageLength": 10,
|
|
"order": [[ 6, "desc" ]], // 利用率で降順ソート
|
|
"columnDefs": [
|
|
{ "orderable": false, "targets": 8 } // 操作列はソート無効
|
|
]
|
|
});
|
|
|
|
// 利用率チャート（円グラフ）
|
|
var ctxUtil = document.getElementById('utilizationChart').getContext('2d');
|
|
var utilizationChart = new Chart(ctxUtil, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: [
|
|
@foreach($cityStats as $stat)
|
|
'{{ $stat['city']->city_name }} ({{ $stat['utilization_rate'] }}%)',
|
|
@endforeach
|
|
],
|
|
datasets: [{
|
|
label: '利用率',
|
|
data: [
|
|
@foreach($cityStats as $stat)
|
|
{{ $stat['utilization_rate'] }},
|
|
@endforeach
|
|
],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.8)',
|
|
'rgba(54, 162, 235, 0.8)',
|
|
'rgba(255, 206, 86, 0.8)',
|
|
'rgba(75, 192, 192, 0.8)',
|
|
'rgba(153, 102, 255, 0.8)',
|
|
'rgba(255, 159, 64, 0.8)',
|
|
'rgba(199, 199, 199, 0.8)',
|
|
'rgba(83, 102, 255, 0.8)',
|
|
'rgba(255, 193, 7, 0.8)',
|
|
'rgba(220, 53, 69, 0.8)',
|
|
'rgba(108, 117, 125, 0.8)',
|
|
'rgba(40, 167, 69, 0.8)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255, 99, 132, 1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)',
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(153, 102, 255, 1)',
|
|
'rgba(255, 159, 64, 1)',
|
|
'rgba(199, 199, 199, 1)',
|
|
'rgba(83, 102, 255, 1)',
|
|
'rgba(255, 193, 7, 1)',
|
|
'rgba(220, 53, 69, 1)',
|
|
'rgba(108, 117, 125, 1)',
|
|
'rgba(40, 167, 69, 1)'
|
|
],
|
|
borderWidth: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
boxWidth: 12,
|
|
padding: 10
|
|
}
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
var label = context.label.split(' (')[0]; // 自治体名のみ取得
|
|
var value = context.parsed;
|
|
var total = context.dataset.data.reduce((a, b) => a + b, 0);
|
|
var percentage = ((value / total) * 100).toFixed(1);
|
|
return label + ': ' + value + '% (全体の' + percentage + '%)';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 予約待ちチャート
|
|
var ctxWait = document.getElementById('waitingChart').getContext('2d');
|
|
var waitingChart = new Chart(ctxWait, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: [
|
|
@foreach($cityStats as $stat)
|
|
'{{ $stat['city']->city_name }}',
|
|
@endforeach
|
|
],
|
|
datasets: [{
|
|
label: '予約待ち人数',
|
|
data: [
|
|
@foreach($cityStats as $stat)
|
|
{{ $stat['waiting_count'] }},
|
|
@endforeach
|
|
],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.8)',
|
|
'rgba(54, 162, 235, 0.8)',
|
|
'rgba(255, 206, 86, 0.8)',
|
|
'rgba(75, 192, 192, 0.8)',
|
|
'rgba(153, 102, 255, 0.8)',
|
|
'rgba(255, 159, 64, 0.8)',
|
|
'rgba(199, 199, 199, 0.8)',
|
|
'rgba(83, 102, 255, 0.8)'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush |