FIC_Solar/SolarPower/Views/ExceptionRecord/_NoticeSetting.cshtml

<div class="row mb-3 d-flex align-items-center">
    <div class="pr-3">
        <button type="button" class="btn btn-secondary waves-effect waves-themed">全部縣市</button>
    </div>
    <div class="pr-3">
        <div class="frame-wrap">
            <button type="button" class="btn btn-outline-success waves-effect waves-themed">
                新北市
                <span class="badge bg-success-700 ml-2">4</span>
            </button>
            <button type="button" class="btn btn-outline-success waves-effect waves-themed">
                台北市
                <span class="badge bg-success-700 ml-2">4</span>
            </button>
            <button type="button" class="btn btn-success waves-effect waves-themed">
                新竹市
                <span class="badge bg-success-700 ml-2">4</span>
            </button>
            <button type="button" class="btn btn-outline-success waves-effect waves-themed">
                苗栗縣
                <span class="badge bg-success-700 ml-2">4</span>
            </button>
            <button type="button" class="btn btn-outline-success waves-effect waves-themed">
                台中市
                <span class="badge bg-success-700 ml-2">4</span>
            </button>
        </div>
    </div>
</div>

<div class="row mb-5 d-flex align-items-center">
    <div class="pr-3">
        <button type="button" class="btn btn-secondary waves-effect waves-themed">全選</button>
    </div>
    <div class="pr-3">
        <div class="frame-wrap">
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="defaultInline6">
                <label class="custom-control-label" for="defaultInline6">新竹交大站</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="defaultInline7" checked="">
                <label class="custom-control-label" for="defaultInline7">新竹巨城站</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="defaultInline8" checked="">
                <label class="custom-control-label" for="defaultInline8">新竹動物園站</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="defaultInline9" checked="">
                <label class="custom-control-label" for="defaultInline9">新竹城隍廟站</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="defaultInline10" checked="">
                <label class="custom-control-label" for="defaultInline10">新竹清大站</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="defaultInline11" checked="">
                <label class="custom-control-label" for="defaultInline11">新竹高鐵站</label>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <!-- datatable start -->
        <div class="w-100">
            <table class="table table-bordered table-hover m-0 text-center">
                <thead class="thead-themed">
                    <tr>
                        <th>電站名稱</th>
                        <th>通知對象</th>
                        <th>逆變器異常</th>
                        <th>網路異常</th>
                        <th>設備斷線</th>
                        <th>PR值異常</th>
                        <th>異常等級</th>
                        <th>派工/維運單</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">新竹巨城站</th>
                        <th scope="row">鋼鐵人</th>
                        <td>
                            <a href="javascript:void(0);" class="btn btn-warning btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                <i class="fal fa-exclamation"></i>
                            </a>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><span class="color-danger-700">高</span></td>
                        <td>
                            <a href="javascript:;" type="button" class="btn btn-primary btn-pills waves-effect waves-themed" data-toggle="modal" data-target="#addpeople">修改</a>
                            <button type="button" class="btn btn-danger btn-pills waves-effect waves-themed">刪除</button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">新竹巨城站</th>
                        <th scope="row">蜘蛛人</th>
                        <td></td>
                        <td>
                            <a href="javascript:void(0);" class="btn btn-warning btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                <i class="fal fa-exclamation"></i>
                            </a>
                        </td>
                        <td></td>
                        <td></td>
                        <td>中</td>
                        <td>
                            <a href="javascript:;" type="button" class="btn btn-primary btn-pills waves-effect waves-themed" data-toggle="modal" data-target="#addpeople">修改</a>
                            <button type="button" class="btn btn-danger btn-pills waves-effect waves-themed">刪除</button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">新竹交大站</th>
                        <th scope="row">雷神索爾</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>
                            <a href="javascript:void(0);" class="btn btn-warning btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                <i class="fal fa-exclamation"></i>
                            </a>
                        </td>
                        <td>低</td>
                        <td>
                            <a href="javascript:;" type="button" class="btn btn-primary btn-pills waves-effect waves-themed" data-toggle="modal" data-target="#addpeople">修改</a>
                            <button type="button" class="btn btn-danger btn-pills waves-effect waves-themed">刪除</button>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>