Dashboard รายงานภาพรวมของระบบแจ้งซ่อม

จำนวนคนเข้าดู: 36

Workshop นี้เป็นส่วนหนึ่งของคอร์ส สอนทำระบบแจ้งซ่อมออนไลน์ Laravel

คอร์สเรียนออนไลน์ สอนทำระบบแจ้งซ่อม ราคา 999 บาท จะได้ Template ตั้งต้น สอนทำเต็มระบบ

dashboard.blade.php

@extends('layouts.master')
@section('title', 'Manager')

@section('content')
    @component('common-components.breadcrumb')
        @slot('pagetitle') ระบบแจ้งซ่อมออนไลน์ @endslot
        @slot('title') รายงานภาพรวม Dashboard @endslot
    @endcomponent

    <style>
        .card {
            min-height: 400px; /* ทำให้ทุกการ์ดสูงเท่ากัน */
        }
        .apex-charts {
            height: 320px !important; /* ทำให้กราฟสูงเท่ากัน */
        }
        .table td, .table th {
            vertical-align: middle;
        }
    </style>

    <div class="row">
        <!-- ประเภทอุปกรณ์ -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4 text-center">ประเภทอุปกรณ์</h4>
                    <div id="equipment_chart" data-colors='["--bs-success", "--bs-primary", "--bs-warning", "--bs-info", "--bs-danger"]' class="apex-charts" dir="ltr"></div>
                    <!-- ตารางข้อมูลประเภทอุปกรณ์ -->
                    <table class="table table-bordered mt-3">
                        <thead>
                            <tr>
                                <th>ประเภทอุปกรณ์</th>
                                <th style="text-align: center;">จำนวน</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($equipmentData as $item)
                                <tr>
                                    <td>{{ $item->eq_name }}</td>
                                    <td style="text-align: center;">{{ $item->total }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- สถานะ -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4 text-center">สถานะ</h4>
                    <div id="status_chart" data-colors='["--bs-success", "--bs-primary", "--bs-warning", "--bs-info", "--bs-danger"]' class="apex-charts" dir="ltr"></div>
                    <!-- ตารางข้อมูลสถานะ -->
                    <table class="table table-bordered mt-3">
                        <thead>
                            <tr>
                                <th>สถานะ</th>
                                <th style="text-align: center;">จำนวน</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($statusData as $item)
                                <tr>
                                    <td>{{ $item->s_status }}</td>
                                    <td style="text-align: center;">{{ $item->total }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- แผนก -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4 text-center">แผนก</h4>
                    <div id="department_chart" data-colors='["--bs-success", "--bs-primary", "--bs-warning", "--bs-info", "--bs-danger"]' class="apex-charts" dir="ltr"></div>
                    <!-- ตารางข้อมูลแผนก -->
                    <table class="table table-bordered mt-3">
                        <thead>
                            <tr>
                                <th>แผนก</th>
                                <th style="text-align: center;">จำนวน</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($departmentData as $item)
                                <tr>
                                    <td>{{ $item->dep_name }}</td>
                                    <td style="text-align: center;">{{ $item->total }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script') 
<script src="{{ URL::asset('/assets/libs/apexcharts/apexcharts.min.js') }}"></script>

<script>
    function getChartColorsArray(chartId) {
        var colors = document.getElementById(chartId).getAttribute("data-colors");
        return JSON.parse(colors).map(color => getComputedStyle(document.documentElement).getPropertyValue(color).trim());
    }

    // ประเภทอุปกรณ์
    var equipmentOptions = {
        series: @json($equipmentData->pluck('total')),
        chart: { type: 'pie', height: 320 },
        labels: @json($equipmentData->pluck('eq_name')),
        colors: getChartColorsArray("equipment_chart"),
        legend: { position: 'bottom', fontSize: '12px' } // ตัวหนังสือไว้ด้านล่าง
    };
    new ApexCharts(document.querySelector("#equipment_chart"), equipmentOptions).render();

    // สถานะ
    var statusOptions = {
        series: @json($statusData->pluck('total')),
        chart: { type: 'pie', height: 320 },
        labels: @json($statusData->pluck('s_status')),
        colors: getChartColorsArray("status_chart"),
        legend: { position: 'bottom', fontSize: '12px' } // ตัวหนังสือไว้ด้านล่าง
    };
    new ApexCharts(document.querySelector("#status_chart"), statusOptions).render();

    // แผนก
    var departmentOptions = {
        series: @json($departmentData->pluck('total')),
        chart: { type: 'pie', height: 320 },
        labels: @json($departmentData->pluck('dep_name')),
        colors: getChartColorsArray("department_chart"),
        legend: { position: 'bottom', fontSize: '12px' } // ตัวหนังสือไว้ด้านล่าง
    };
    new ApexCharts(document.querySelector("#department_chart"), departmentOptions).render();
</script>
@endsection

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

@extends('layouts.master')

@section('title', 'Manager')

@section('content')

@component('common-components.breadcrumb')

@slot('pagetitle') ระบบแจ้งซ่อมออนไลน์ @endslot

@slot('title') รายงานภาพรวม Dashboard @endslot

@endcomponent

<style>

.card {

min-height: 400px; /* ทำให้ทุกการ์ดสูงเท่ากัน */

}

.apex-charts {

height: 320px !important; /* ทำให้กราฟสูงเท่ากัน */

}

.table td, .table th {

vertical-align: middle;

}

</style>

<h4 class="card-title mb-4 text-center">ประเภทอุปกรณ์</h4>

<thead>

<tr>

<th>ประเภทอุปกรณ์</th>

<th style="text-align: center;">จำนวน</th>

</tr>

</thead>

<tbody>

@foreach($equipmentData as $item)

<tr>

<td style="text-align: center;">{{ $item->total }}</td>

</tr>

@endforeach

</tbody>

</table>

</div>

<h4 class="card-title mb-4 text-center">สถานะ</h4>

<thead>

<tr>

<th>สถานะ</th>

<th style="text-align: center;">จำนวน</th>

</tr>

</thead>

<tbody>

@foreach($statusData as $item)

<tr>

<td>{{ $item->s_status }}</td>

<td style="text-align: center;">{{ $item->total }}</td>

</tr>

@endforeach

</tbody>

</table>

</div>

<thead>

<tr>

<th style="text-align: center;">จำนวน</th>

</tr>

</thead>

<tbody>

@foreach($departmentData as $item)

<tr>

<td style="text-align: center;">{{ $item->total }}</td>

</tr>

@endforeach

</tbody>

</table>

</div>

@endsection

@section('script')

function getChartColorsArray(chartId) {

var colors = document.getElementById(chartId).getAttribute("data-colors");

return JSON.parse(colors).map(color => getComputedStyle(document.documentElement).getPropertyValue(color).trim());

}

// ประเภทอุปกรณ์

var equipmentOptions = {

series: @json($equipmentData->pluck('total')),

chart: { type: 'pie', height: 320 },

labels: @json($equipmentData->pluck('eq_name')),

colors: getChartColorsArray("equipment_chart"),

legend: { position: 'bottom', fontSize: '12px' } // ตัวหนังสือไว้ด้านล่าง

};

new ApexCharts(document.querySelector("#equipment_chart"), equipmentOptions).render();

// สถานะ

var statusOptions = {

series: @json($statusData->pluck('total')),

chart: { type: 'pie', height: 320 },

labels: @json($statusData->pluck('s_status')),

colors: getChartColorsArray("status_chart"),

legend: { position: 'bottom', fontSize: '12px' } // ตัวหนังสือไว้ด้านล่าง

};

new ApexCharts(document.querySelector("#status_chart"), statusOptions).render();

// แผนก

var departmentOptions = {

series: @json($departmentData->pluck('total')),

chart: { type: 'pie', height: 320 },

labels: @json($departmentData->pluck('dep_name')),

colors: getChartColorsArray("department_chart"),

legend: { position: 'bottom', fontSize: '12px' } // ตัวหนังสือไว้ด้านล่าง

};

new ApexCharts(document.querySelector("#department_chart"), departmentOptions).render();

</script>

@endsection

ManagerController.php

 public function dashboard()
    {
        // ดึงข้อมูลประเภทอุปกรณ์
        $equipmentData = Equipment::selectRaw('eq_name, COUNT(r.id) as total')
            ->leftJoin('repair as r', 'equipment.id', '=', 'r.eq_id')  // ใช้ LEFT JOIN กับตาราง repair โดยเชื่อมกับ eq_id
            ->groupBy('eq_name')
            ->get();
        
       // ดึงข้อมูลสถานะการซ่อม รวมสถานะที่ไม่มีการแจ้งซ่อมด้วย
        $statusData = Status::leftJoin('repair', 'repair.s_id', '=', 'status.id')
            ->selectRaw('status.s_status, COUNT(repair.id) as total')
            ->groupBy('status.s_status')
            ->get();


        // ดึงข้อมูลแผนก
        $departmentData = User::join('department', 'users.dep_id', '=', 'department.id')
            ->selectRaw('department.dep_name, COUNT(*) as total')
            ->groupBy('department.dep_name')
            ->get();
    
        return view('managers.dashboard', compact('equipmentData', 'statusData', 'departmentData'));
    }

public function dashboard()

{

// ดึงข้อมูลประเภทอุปกรณ์

$equipmentData = Equipment::selectRaw('eq_name, COUNT(r.id) as total')

->leftJoin('repair as r', 'equipment.id', '=', 'r.eq_id') // ใช้ LEFT JOIN กับตาราง repair โดยเชื่อมกับ eq_id

->groupBy('eq_name')

->get();

// ดึงข้อมูลสถานะการซ่อม รวมสถานะที่ไม่มีการแจ้งซ่อมด้วย

$statusData = Status::leftJoin('repair', 'repair.s_id', '=', 'status.id')

->selectRaw('status.s_status, COUNT(repair.id) as total')

->groupBy('status.s_status')

->get();

// ดึงข้อมูลแผนก

$departmentData = User::join('department', 'users.dep_id', '=', 'department.id')

->selectRaw('department.dep_name, COUNT(*) as total')

->groupBy('department.dep_name')

->get();

return view('managers.dashboard', compact('equipmentData', 'statusData', 'departmentData'));

}

TechnicianController.php

    public function index(Request $request)
    {
        $userId = auth()->user()->id;
        $data = User::select('users.*', 'position.position_name', 'department.dep_name', 'user_level.level_name')
                    ->leftJoin('position', 'users.p_id', '=', 'position.id') 
                    ->leftJoin('department', 'users.dep_id', '=', 'department.id')
                    ->leftJoin('user_level', 'users.level_id', '=', 'user_level.id') 
                    ->where('users.id', $userId)
                    ->first();

        // ดึงจำนวนงานแจ้งซ่อมของช่างที่ล็อกอิน พร้อมชื่อสถานะ
        $repairStatusCounts = Repair::select('status.s_status', Repair::raw('count(*) as total'))
        ->join('status', 'repair.s_id', '=', 'status.id') 
        ->where('technician_id', $userId)
        ->groupBy('status.s_status')
        ->get();

         return view('technicians.index', compact('data', 'repairStatusCounts'));
    }

public function index(Request $request)

{

$userId = auth()->user()->id;

$data = User::select('users.*', 'position.position_name', 'department.dep_name', 'user_level.level_name')

->leftJoin('position', 'users.p_id', '=', 'position.id')

->leftJoin('department', 'users.dep_id', '=', 'department.id')

->leftJoin('user_level', 'users.level_id', '=', 'user_level.id')

->where('users.id', $userId)

->first();

// ดึงจำนวนงานแจ้งซ่อมของช่างที่ล็อกอิน พร้อมชื่อสถานะ

$repairStatusCounts = Repair::select('status.s_status', Repair::raw('count(*) as total'))

->join('status', 'repair.s_id', '=', 'status.id')

->where('technician_id', $userId)

->groupBy('status.s_status')

->get();

return view('technicians.index', compact('data', 'repairStatusCounts'));

}

index.blade.php

@extends('layouts.master')
@section('title')
    Technicians
@endsection

@section('content')
    @component('common-components.breadcrumb')
        @slot('pagetitle')
            ระบบแจ้งซ่อมออนไลน์
        @endslot
        @slot('title')
            ข้อมูลประจำตัวผู้ใช้งาน
        @endslot
    @endcomponent
    <style>
    .user-info {
        display: flex;
        flex-direction: column; 
        align-items: center;
        text-align: left; 
    }
    </style>
    <div class="row">
        <div class="col-4">
            <div class="card">
                <div class="card-body">
                    <div class="user-info">
                        <p>
                            <img src="{{ url('storage/images/' . Auth::user()->image) }}" alt="User Image" 
                                 class="img-fluid rounded-circle" style="width: 150px; height: 150px;">
                        </p>
                        <p><strong>ชื่อ - นามสกุล :</strong> {{ $data->firstname }} {{ $data->lastname }}</p>
                        <p><strong>ตำแหน่ง :</strong> {{ $data->position_name }}</p>
                        <p><strong>แผนก :</strong> {{ $data->dep_name }}</p>
                        <p><strong>ระดับสิทธิการใช้งาน :</strong> {{ $data->level_name }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">งานซ่อมที่ได้รับมอบหมาย</h4>
                    <div id="pie_chart" data-colors='["--bs-success", "--bs-primary", "--bs-warning" ,"--bs-info", "--bs-danger"]' class="apex-charts" dir="ltr"></div>
                </div>
            </div>
        </div>
   
    </div>
@endsection
@section('script') 
<script src="{{ URL::asset('/assets/libs/apexcharts/apexcharts.min.js') }}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var repairStatusData = @json($repairStatusCounts);

        var statusLabels = repairStatusData.map(item => item.s_status);
        var statusValues = repairStatusData.map(item => item.total);

        var pieOptions = {
            series: statusValues,
            chart: {
                type: 'pie',
                height: 300
            },
            labels: statusLabels,
            colors: ['#28a745', '#007bff', '#ffc107', '#17a2b8', '#dc3545'],
            legend: {
                position: 'bottom'
            }
        };

        var pieChart = new ApexCharts(document.querySelector("#pie_chart"), pieOptions);
        pieChart.render();
    });
</script>
@endsection

@extends('layouts.master')

@section('title')

Technicians

@endsection

@section('content')

@component('common-components.breadcrumb')

@slot('pagetitle')

ระบบแจ้งซ่อมออนไลน์

@endslot

@slot('title')

ข้อมูลประจำตัวผู้ใช้งาน

@endslot

@endcomponent

<style>

.user-info {

display: flex;

flex-direction: column;

align-items: center;

text-align: left;

}

</style>

<p>

<img src="{{ url('storage/images/' . Auth::user()->image) }}" alt="User Image"

class="img-fluid rounded-circle" style="width: 150px; height: 150px;">

</p>

<p><strong>ชื่อ - นามสกุล :</strong> {{ $data->firstname }} {{ $data->lastname }}</p>

<p><strong>ตำแหน่ง :</strong> {{ $data->position_name }}</p>

<p><strong>ระดับสิทธิการใช้งาน :</strong> {{ $data->level_name }}</p>

</div>

<h4 class="card-title mb-4">งานซ่อมที่ได้รับมอบหมาย</h4>

</div>

@endsection

@section('script')

document.addEventListener("DOMContentLoaded", function() {

var repairStatusData = @json($repairStatusCounts);

var statusLabels = repairStatusData.map(item => item.s_status);

var statusValues = repairStatusData.map(item => item.total);

var pieOptions = {

series: statusValues,

chart: {

type: 'pie',

height: 300

labels: statusLabels,

colors: ['#28a745', '#007bff', '#ffc107', '#17a2b8', '#dc3545'],

legend: {

position: 'bottom'

}

};

var pieChart = new ApexCharts(document.querySelector("#pie_chart"), pieOptions);

pieChart.render();

});

</script>

@endsection

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

Laravel10

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

คอร์สเรียนออนไลน์ สอนทำระบบแจ้งซ่อม ราคา 999 บาท จะได้ Template ตั้งต้น สอนทำเต็มระบบ

Share this:

Related

วัยวุฒิ ชุมเมืองปัก