baoshi-was/resources/views/station/monitor/index.blade.php

@extends('layouts.app')
@section('title')监视器 - 站管理@endsection

@section('content')
    <span id="nav2">
        @component('station.menu')@endcomponent
        @component('station.monitor.menu')@endcomponent
    </span>
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <table class="table table-striped table-sm" id="list">
                    <tr>
                        <th>设备ID</th>
                        <th>显示器名称</th>
                        <th>父级设备</th>
                        <th>硬件ID</th>
                        <th>备注</th>
                        <th>录入时间</th>
                    </tr>
                    <tr v-for="station in stations">
                        <td class="text-muted">@{{station.id}}</td>
                        <td>
                            <a :href="'{{url('station/monitor/')}}'+'/'+station.id" target="_blank">
                                <button class="btn btn-outline-info" >@{{station.name}}</button>
                            </a>
                        </td>
                        <td>@{{station.parent?station.parent.name:''}}</td>
                        <td>@{{station.code}}</td>
                        <td>@{{station.remark}}</td>
                        <td class="text-muted">@{{station.created_at}}</td>
                    </tr>
                </table>
                {{$stations->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                stations:{!! json_encode($stations->toArray()['data'])??'""' !!},
            },
        });
    </script>
@endsection