hanhai88
/
tcs-front-tabler


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880
							<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>车辆-SIMANC TCS</title>
    <!-- 在页面加载前应用保存的主题设置，避免闪烁 -->
    <script src="../js/themePreSet.js"></script>
    <!-- 预渲染导航栏，减少延迟 -->
    <script src="../js/headerPreRender.js"></script>
    <!-- Tabler Core CSS -->
    <link
      href="../assets/css/app.css"
      rel="stylesheet"
    />
    <style>
      .tcs-table-battery-column {
        min-width: 150px;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <!-- 顶部导航栏容器 -->
      <div id="tcs-header-container" class="tcs-header-container"></div>
      <header
        class="navbar navbar-expand-md tcs-container-space-x tcs-navbar-compact justify-content-between flex-column flex-md-row"
      >
        <div class="d-flex flex-column flex-md-row w-100 align-items-start align-items-md-center mb-2 mb-md-0">
          <div class="d-flex flex-wrap align-items-center me-md-auto">
            <div class="d-flex flex-wrap align-items-center">
              <!-- <div class="tcs-filter-group mb-2 mb-md-0 me-md-2">
                <label class="form-label mb-0 me-2 d-inline">开始:</label>
                <input
                  type="date"
                  class="form-control tcs-form-item"
                  value="2025-03-16"
                  id="date-start"
                />
              </div>
              <div class="tcs-filter-group mb-2 mb-md-0 me-md-2">
                <label class="form-label mb-0 me-2 d-inline">结束:</label>
                <input
                  type="date"
                  class="form-control tcs-form-item"
                  value="2025-03-16"
                  id="date-end"
                />
              </div> -->
              <!-- <div class="tcs-filter-group mb-2 mb-md-0">
                <label class="form-label mb-0 me-2 d-inline">区域:</label>
                <div>
                  <select class="form-select tcs-form-item" id="status-filter">
                    <option selected>全部</option>
                    <option>A6</option>
                    <option>A7</option>
                    <option>A8</option>
                    <option>A9</option>
                    <option>A10</option>
                  </select>
                </div>
              </div> -->
            </div>
          </div>
          <div class="d-flex align-items-center ms-md-auto mt-2 mt-md-0">
            <button class="btn btn-primary tcs-form-item" data-bs-toggle="modal" data-bs-target="#addVehicleModal">
              <i class="ti ti-plus me-1"></i>添加
            </button>
            <!-- <button class="btn btn-danger ms-2 tcs-form-item">
              <i class="ti ti-refresh me-1"></i>更新云地图
            </button> -->
          </div>
        </div>
      </header>
      <!-- 页面内容 -->
      <div
        class="page-wrapper"
      >
      <div class="card tcs-card-full border-0">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table
              class="table table-vcenter card-table table-hover tcs-table-compact"
              id="data-table"
            >
              <thead>
                <tr>
               <!--    <th class="w-1" id="checkbox-header">
                  </th> -->
                  <th>编号</th>
                  <th>名称</th>
                  <th>类型</th>
                  <th>IP</th>
                  <th>电量</th>
                  <th>状态</th>
                  <th>告警</th>
                  <th>地图</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <!-- 表格内容将由JavaScript动态生成 -->
              </tbody>
            </table>
          </div>
        </div>
        <div class="card-footer d-flex align-items-center tcs-card-footer-compact flex-column flex-md-row">
          <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center mb-2 mb-md-0 w-100 w-md-auto">
            <span id="pagination-info" class="text-secondary mb-2 mb-md-0">
              <!-- 分页信息将由JavaScript动态生成 -->
            </span>
            <div class="ms-0 ms-md-3 d-flex align-items-center">
              <span class="me-2 text-secondary">每页显示</span>
              <div class="dropdown d-inline-block">
                <button
                  class="btn dropdown-toggle px-2 tcs-form-item-pagiton"
                  type="button"
                  data-bs-toggle="dropdown"
                >
                  <span id="current-page-size">10</span>
                  <span class="ms-1 d-none d-sm-inline">条记录</span>
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="10"
                    >10</a
                  >
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="20"
                    >20</a
                  >
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="50"
                    >50</a
                  >
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="100"
                    >100</a
                  >
                </div>
              </div>
            </div>
          </div>
          <ul class="pagination m-0 ms-md-auto mt-2 mt-md-0" id="pagination-controls">
            <!-- 分页控件将由JavaScript动态生成 -->
          </ul>
        </div>
      </div>
    </div>

    <!-- 添加车辆模态框 -->
    <div class="modal modal-blur fade" id="addVehicleModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加新车辆</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="addVehicleForm" class="needs-validation" novalidate>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">名称</label>
                <div class="col">
                  <input type="text" class="form-control" name="name" placeholder="车辆名称" required>
                  <div class="invalid-feedback">请输入车辆名称</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">类型</label>
                <div class="col">
                  <select class="form-select" name="type" required>
                    <option value="" selected disabled>请选择类型</option>
                    <option value="slam">slam</option>
                    <option value="磁导航">磁导航</option>
                  </select>
                  <div class="invalid-feedback">请选择类型</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">IP地址</label>
                <div class="col">
                  <input type="text" class="form-control" name="ip" placeholder="192.168.0.1" required pattern="^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$">
                  <div class="invalid-feedback">请输入有效的IP地址</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">地图</label>
                <div class="col">
                  <select class="form-select" name="map" required>
                    <option value="" selected disabled>请选择地图</option>
                    <option value="1">地图1</option>
                    <option value="2">地图2</option>
                    <option value="3">地图3</option>
                    <option value="4">地图4</option>
                    <option value="5">地图5</option>
                  </select>
                  <div class="invalid-feedback">请选择地图</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label text-end">备注</label>
                <div class="col">
                  <textarea class="form-control" name="notes" rows="3" placeholder="车辆备注信息"></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer tcs-modal-footer">
            <button type="button" class="btn me-auto" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="saveVehicleBtn">保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 车辆状态模态框 -->
    <div class="modal modal-blur fade" id="vehicleStatusModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">车辆状态</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <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">
                    <div class="mb-3">
                      <label class="form-label">车辆ID</label>
                      <div class="form-control-plaintext" id="status-vehicle-id"></div>
                    </div>
                    <div class="mb-3">
                      <label class="form-label">名称</label>
                      <div class="form-control-plaintext" id="status-vehicle-name"></div>
                    </div>
                    <div class="mb-3">
                      <label class="form-label">类型</label>
                      <div class="form-control-plaintext" id="status-vehicle-type"></div>
                    </div>
                    <div class="mb-3">
                      <label class="form-label">IP地址</label>
                      <div class="form-control-plaintext" id="status-vehicle-ip"></div>
                    </div>
                  </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">
                    <div class="mb-3">
                      <label class="form-label">电量</label>
                      <div class="d-flex align-items-center">
                        <div class="flex-grow-1 me-2">
                          <div class="progress progress-sm">
                            <div class="progress-bar" id="status-vehicle-battery-bar" style="width: 0%" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                          </div>
                        </div>
                        <div class="text-nowrap" id="status-vehicle-battery-text">0%</div>
                      </div>
                    </div>
                    <div class="mb-3">
                      <label class="form-label">状态</label>
                      <div class="form-control-plaintext" id="status-vehicle-status"></div>
                    </div>
                    <div class="mb-3">
                      <label class="form-label">告警</label>
                      <div class="form-control-plaintext" id="status-vehicle-alarm"></div>
                    </div>
                    <div class="mb-3">
                      <label class="form-label">当前地图</label>
                      <div class="form-control-plaintext" id="status-vehicle-map"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer tcs-modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 车辆配置模态框 -->
    <div class="modal modal-blur fade" id="vehicleConfigModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">车辆配置</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="configVehicleForm" class="needs-validation" novalidate>
              <input type="hidden" name="id" id="config-vehicle-id">
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">名称</label>
                <div class="col">
                  <input type="text" class="form-control" name="name" id="config-vehicle-name" placeholder="车辆名称" required>
                  <div class="invalid-feedback">请输入车辆名称</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">类型</label>
                <div class="col">
                  <select class="form-select" name="type" id="config-vehicle-type" required>
                    <option value="" disabled>请选择类型</option>
                    <option value="slam">slam</option>
                    <option value="磁导航">磁导航</option>
                  </select>
                  <div class="invalid-feedback">请选择类型</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">IP地址</label>
                <div class="col">
                  <input type="text" class="form-control" name="ip" id="config-vehicle-ip" placeholder="192.168.0.1" required pattern="^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$">
                  <div class="invalid-feedback">请输入有效的IP地址</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">地图</label>
                <div class="col">
                  <select class="form-select" name="map" id="config-vehicle-map" required>
                    <option value="" disabled>请选择地图</option>
                    <option value="1">地图1</option>
                    <option value="2">地图2</option>
                    <option value="3">地图3</option>
                    <option value="4">地图4</option>
                    <option value="5">地图5</option>
                  </select>
                  <div class="invalid-feedback">请选择地图</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label text-end">最大速度</label>
                <div class="col">
                  <div>
                    <input type="number" class="form-control" name="maxSpeed" id="config-vehicle-max-speed" placeholder="1.0" min="0.1" max="2.0" step="0.1" value="1.0">
                    <span class="input-group-text">m/s</span>
                  </div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label text-end">自动充电</label>
                <div class="col">
                  <label class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" name="autoCharge" id="config-vehicle-auto-charge">
                    <span class="form-check-label">启用</span>
                  </label>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label text-end">低电量阈值</label>
                <div class="col">
                  <div>
                    <input type="number" class="form-control" name="lowBatteryThreshold" id="config-vehicle-low-battery" placeholder="20" min="10" max="50" value="20">
                    <span class="input-group-text">%</span>
                  </div>
                  <small class="form-text text-muted">当电量低于此值时将触发低电量告警</small>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer tcs-modal-footer">
            <button type="button" class="btn me-auto" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="saveConfigBtn">保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 车辆远程控制模态框 -->
    <div class="modal modal-blur fade" id="vehicleRemoteModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">远程控制</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="text-center mb-3">
              <h3 id="remote-vehicle-name">车辆名称</h3>
              <div class="badge bg-success-lt mb-3" id="remote-vehicle-status">可用</div>
            </div>
            <div class="d-flex justify-content-center mb-4">
              <button class="btn btn-outline-primary mx-2" id="remote-start-btn">
                <i class="ti ti-player-play me-1"></i>启动
              </button>
              <button class="btn btn-outline-danger mx-2" id="remote-stop-btn">
                <i class="ti ti-player-stop me-1"></i>停止
              </button>
              <button class="btn btn-outline-warning mx-2" id="remote-pause-btn">
                <i class="ti ti-player-pause me-1"></i>暂停
              </button>
            </div>
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">手动控制</h3>
              </div>
              <div class="card-body">
                <div class="d-flex flex-column align-items-center">
                  <div class="mb-2">
                    <button class="btn btn-outline-secondary" id="remote-forward-btn">
                      <i class="ti ti-arrow-up"></i>
                    </button>
                  </div>
                  <div class="mb-2">
                    <button class="btn btn-outline-secondary mx-2" id="remote-left-btn">
                      <i class="ti ti-arrow-left"></i>
                    </button>
                    <button class="btn btn-outline-secondary mx-2" id="remote-stop-move-btn">
                      <i class="ti ti-square"></i>
                    </button>
                    <button class="btn btn-outline-secondary mx-2" id="remote-right-btn">
                      <i class="ti ti-arrow-right"></i>
                    </button>
                  </div>
                  <div>
                    <button class="btn btn-outline-secondary" id="remote-backward-btn">
                      <i class="ti ti-arrow-down"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer tcs-modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Tabler Core JS -->
    <script src="../assets/js/tabler.min.js"></script>
    <script src="../assets/js/jquery-3.7.1.min.js"></script>
    <script src="../js/themePoc.js"></script>
    <!-- 表格组件JS -->
    <script src="../js/tcsTable.js"></script>
    <!-- 模态框组件JS -->
    <script src="../js/tcsModal.js"></script>
    <!-- 页面特定的JavaScript -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 配置表格选项
        const tableOptions = {
          tableId: "data-table",
          paginationInfoId: "pagination-info",
          paginationControlsId: "pagination-controls",
          pageSizeId: "current-page-size",
          pageSizeItemClass: "page-size-item",
          defaultPageSize: 10,
          columns: [
            /* {
              field: "checkbox",
              title: "",
              className: "w-1",
              headerRenderer: "checkbox", // 使用内置的复选框表头渲染器
              formatter: function(value, row) {
                return `<input class="form-check-input m-0 align-middle row-checkbox" type="checkbox" data-id="${row.id}" aria-label="选择行">`;
              }
            }, */
            { field: "id", title: "编号" },
            { field: "name", title: "名称", className: "tcs-table-name-column" },
            { field: "type", title: "类型", className: "tcs-table-type-column" },
            { field: "ip", title: "IP", className: "tcs-table-ip-column" },
            { 
              field: "battery", 
              title: "电量",
              className: "tcs-table-battery-column",
              formatter: function(value) {
                // 根据电量值确定颜色
                let colorClass = "bg-success";
                if (value < 20) {
                  colorClass = "bg-danger";
                } else if (value < 50) {
                  colorClass = "bg-warning";
                }
                
                // 创建进度条显示电量
                return `
                  <div class="d-flex align-items-center">
                    <div class="flex-grow-1 me-2">
                      <div class="progress progress-sm">
                        <div class="progress-bar ${colorClass}" style="width: ${value}%" role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100" aria-label="${value}% 电量"></div>
                      </div>
                    </div>
                    <div class="text-nowrap">${value}%</div>
                  </div>
                `;
              }
            },
            { 
              field: "status", 
              title: "状态",
              className: "tcs-table-status-column",
              formatter: function(value) {
                return value === "可用" ? 
                  '<span class="badge bg-success-lt" style="width:100%;text-align:center">可用</span>' : 
                  '<span class="badge bg-warning-lt" style="width:100%;text-align:center">不可用</span>';
              }
            },
            { field: "alarm", title: "告警" },
            { field: "map", title: "地图" },
            { 
              field: "createTime", 
              title: "创建时间", 
              className: "tcs-table-time-column",
              formatter: function(value) {
                return formatDateTime(value);
              }
            },
            { 
              field: "actions", 
              title: "操作", 
              className: "tcs-table-action-column",
              formatter: function(value, row) {
                return `<div class="btn-list">
                          <button class="btn btn-sm btn-outline-primary tcs-table-oper-btn" data-id="${row.id}" data-bs-toggle="modal" data-bs-target="#vehicleStatusModal">状态</button>
                          <button class="btn btn-sm btn-outline-secondary tcs-table-oper-btn" data-id="${row.id}" data-bs-toggle="modal" data-bs-target="#vehicleConfigModal">配置</button>
                          <button class="btn btn-sm btn-outline-danger tcs-table-oper-btn" data-id="${row.id}" data-bs-toggle="modal" data-bs-target="#vehicleRemoteModal">远程</button>
                        </div>`;
              }
            }
          ]
        };
        
        // 生成车辆数据
        const alarmData = generateVehicleData(109);
        
        // 初始化表格
        const alarmTable = new TcsTable(tableOptions, alarmData);
        
        // 添加标记已读按钮功能
        const markReadBtn = document.getElementById('mark-read-btn');
        if (markReadBtn) {
          markReadBtn.addEventListener('click', function() {
            const selectedIds = alarmTable.getSelectedRowIds();
            if (selectedIds.length === 0) {
              alert('请先选择要标记的告警');
              return;
            }
            
            // 这里可以添加实际的标记已读逻辑
            console.log('标记已读:', selectedIds);
            
            // 模拟标记已读效果
            const checkboxes = document.querySelectorAll('.row-checkbox:checked');
            checkboxes.forEach(checkbox => {
              const row = checkbox.closest('tr');
              const statusCell = row.querySelector('td:nth-last-child(1)');
              if (statusCell) {
                statusCell.innerHTML = '<span class="badge bg-success-lt" style="width:100%;text-align:center">已读</span>';
              }
              // 取消选中
              checkbox.checked = false;
            });
            
            // 更新全选框状态
            alarmTable.updateSelectAllCheckboxState();
          });
        }
        
        // 添加日期时间筛选功能
        const dateStart = document.getElementById("date-start");
        const dateEnd = document.getElementById("date-end");
        
        // 日期变化时触发查询
        if (dateStart && dateEnd) {
          dateStart.addEventListener("change", applyFilters);
          dateEnd.addEventListener("change", applyFilters);
        }
        
        // 应用筛选函数
        function applyFilters() {
          const startDate = dateStart && dateStart.value ? new Date(dateStart.value) : null;
          const endDate = dateEnd && dateEnd.value ? new Date(dateEnd.value) : null;
          
          alarmTable.filter(function(alarm) {
            // 检查日期范围
            const alarmDate = new Date(alarm.time.replace(" ", "T"));
            const dateInRange =
              (!startDate || alarmDate >= startDate) &&
              (!endDate || alarmDate <= endDate);
            
            return dateInRange;
          });
        }
        
        // 生成车辆数据
        function generateVehicleData(count) {
          const data = [];
          const types = ["slam", "磁导航"];
          const statuses = ["可用", "不可用"];
          
          for (let i = 1; i <= count; i++) {
            const date = new Date();
            date.setFullYear(2012); // 根据图片中的年份
            
            data.push({
              id: i,
              name: `agv${i}`,
              type: types[Math.floor(Math.random() * types.length)],
              ip: `192.168.0.${Math.floor(Math.random() * 255) + 1}`,
              battery: Math.floor(Math.random() * 100) + 1,
              status: statuses[Math.floor(Math.random() * statuses.length)],
              alarm: Math.floor(Math.random() * 5),
              map: Math.floor(Math.random() * 10) + 1,
              createTime: `2012-${String(Math.floor(Math.random() * 12) + 1).padStart(2, "0")}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, "0")}`,
              actions: ""
            });
          }
          
          return data;
        }
        
        // 时间格式化函数
        function formatDateTime(dateTimeStr) {
          if (!dateTimeStr || dateTimeStr === "-") return "-";
          
          const date = new Date(dateTimeStr.replace(" ", "T"));
          return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
        }

        // ---------------------初始化模态框组件---------------------
        
        // 添加车辆模态框
        const addVehicleModal = new TcsModal({
          modalId: 'addVehicleModal',
          confirmBtnId: 'saveVehicleBtn',
          formId: 'addVehicleForm',
          onConfirm: function(data) {
            // 这里添加保存车辆的逻辑
            console.log('保存新车辆', data);
            
            // 模拟添加新车辆到表格
            const newId = alarmData.length + 1;
            const now = new Date();
            const newVehicle = {
              id: newId,
              name: data.name,
              type: data.type,
              ip: data.ip,
              battery: 100, // 新车辆电量满格
              status: "可用",
              alarm: 0,
              map: data.map,
              createTime: `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`,
              actions: ""
            };
            
            // 添加到数据源
            alarmData.push(newVehicle);
            
            // 刷新表格
            alarmTable.refresh(alarmData);
            
            // 显示成功提示
            TcsNotify.show('车辆已添加成功！', 'success');
          }
        });
        
        // 车辆状态模态框
        document.querySelectorAll('#data-table').forEach(table => {
          table.addEventListener('click', function(e) {
            // 检查是否点击了状态按钮
            const statusBtn = e.target.closest('button[data-bs-target="#vehicleStatusModal"]');
            if (statusBtn) {
              const vehicleId = statusBtn.getAttribute('data-id');
              
              // 查找车辆数据
              const vehicle = alarmData.find(v => v.id == vehicleId);
              if (vehicle) {
                // 填充模态框数据
                document.getElementById('status-vehicle-id').textContent = vehicle.id;
                document.getElementById('status-vehicle-name').textContent = vehicle.name;
                document.getElementById('status-vehicle-type').textContent = vehicle.type;
                document.getElementById('status-vehicle-ip').textContent = vehicle.ip;
                
                // 设置电量进度条
                const batteryBar = document.getElementById('status-vehicle-battery-bar');
                const batteryText = document.getElementById('status-vehicle-battery-text');
                
                // 根据电量值确定颜色
                let colorClass = "bg-success";
                if (vehicle.battery < 20) {
                  colorClass = "bg-danger";
                } else if (vehicle.battery < 50) {
                  colorClass = "bg-warning";
                }
                
                // 移除所有颜色类并添加当前颜色
                batteryBar.className = 'progress-bar ' + colorClass;
                batteryBar.style.width = vehicle.battery + '%';
                batteryBar.setAttribute('aria-valuenow', vehicle.battery);
                batteryText.textContent = vehicle.battery + '%';
                
                // 设置状态
                const statusElement = document.getElementById('status-vehicle-status');
                statusElement.textContent = vehicle.status;
                statusElement.className = 'form-control-plaintext';
                if (vehicle.status === '可用') {
                  statusElement.innerHTML = '<span class="badge bg-success-lt" style="width:100%;text-align:center">可用</span>';
                } else {
                  statusElement.innerHTML = '<span class="badge bg-warning-lt" style="width:100%;text-align:center">不可用</span>';
                }
                
                // 设置告警和地图
                document.getElementById('status-vehicle-alarm').textContent = vehicle.alarm + ' 个告警';
                document.getElementById('status-vehicle-map').textContent = '地图 ' + vehicle.map;
              }
            }
          });
        });
        
        // 车辆配置模态框
        document.querySelectorAll('#data-table').forEach(table => {
          table.addEventListener('click', function(e) {
            // 检查是否点击了配置按钮
            const configBtn = e.target.closest('button[data-bs-target="#vehicleConfigModal"]');
            if (configBtn) {
              const vehicleId = configBtn.getAttribute('data-id');
              
              // 查找车辆数据
              const vehicle = alarmData.find(v => v.id == vehicleId);
              if (vehicle) {
                // 填充表单数据
                document.getElementById('config-vehicle-id').value = vehicle.id;
                document.getElementById('config-vehicle-name').value = vehicle.name;
                
                // 设置类型下拉框
                const typeSelect = document.getElementById('config-vehicle-type');
                for (let i = 0; i < typeSelect.options.length; i++) {
                  if (typeSelect.options[i].value === vehicle.type) {
                    typeSelect.selectedIndex = i;
                    break;
                  }
                }
                
                document.getElementById('config-vehicle-ip').value = vehicle.ip;
                
                // 设置地图下拉框
                const mapSelect = document.getElementById('config-vehicle-map');
                for (let i = 0; i < mapSelect.options.length; i++) {
                  if (mapSelect.options[i].value == vehicle.map) {
                    mapSelect.selectedIndex = i;
                    break;
                  }
                }
                
                // 模拟设置其他配置项
                document.getElementById('config-vehicle-max-speed').value = (Math.random() * 0.5 + 0.5).toFixed(1);
                document.getElementById('config-vehicle-auto-charge').checked = Math.random() > 0.5;
                document.getElementById('config-vehicle-low-battery').value = Math.floor(Math.random() * 20) + 10;
              }
            }
          });
        });
        
        // 保存配置按钮
        const configVehicleModal = new TcsModal({
          modalId: 'vehicleConfigModal',
          confirmBtnId: 'saveConfigBtn',
          formId: 'configVehicleForm',
          onConfirm: function(data) {
            // 这里添加保存配置的逻辑
            console.log('保存车辆配置', data);
            
            // 查找并更新车辆数据
            const vehicleIndex = alarmData.findIndex(v => v.id == data.id);
            if (vehicleIndex !== -1) {
              // 更新数据
              alarmData[vehicleIndex].name = data.name;
              alarmData[vehicleIndex].type = data.type;
              alarmData[vehicleIndex].ip = data.ip;
              alarmData[vehicleIndex].map = data.map;
              
              // 刷新表格
              alarmTable.refresh(alarmData);
              
              // 显示成功提示
              TcsNotify.show('车辆配置已更新！', 'success');
            }
          }
        });
        
        // 车辆远程控制模态框
        document.querySelectorAll('#data-table').forEach(table => {
          table.addEventListener('click', function(e) {
            // 检查是否点击了远程按钮
            const remoteBtn = e.target.closest('button[data-bs-target="#vehicleRemoteModal"]');
            if (remoteBtn) {
              const vehicleId = remoteBtn.getAttribute('data-id');
              
              // 查找车辆数据
              const vehicle = alarmData.find(v => v.id == vehicleId);
              if (vehicle) {
                // 设置车辆名称和状态
                document.getElementById('remote-vehicle-name').textContent = vehicle.name;
                
                const statusElement = document.getElementById('remote-vehicle-status');
                if (vehicle.status === '可用') {
                  statusElement.textContent = '可用';
                  statusElement.className = 'badge bg-success-lt mb-3';
                } else {
                  statusElement.textContent = '不可用';
                  statusElement.className = 'badge bg-warning-lt mb-3';
                }
                
                // 根据状态启用/禁用控制按钮
                const controlButtons = document.querySelectorAll('#vehicleRemoteModal button:not([data-bs-dismiss="modal"])');
                controlButtons.forEach(btn => {
                  btn.disabled = vehicle.status !== '可用';
                });
              }
            }
          });
        });
        
        // 添加远程控制按钮事件
        document.getElementById('remote-start-btn').addEventListener('click', function() {
          TcsNotify.show('车辆已启动', 'success');
        });
        
        document.getElementById('remote-stop-btn').addEventListener('click', function() {
          TcsNotify.show('车辆已停止', 'danger');
        });
        
        document.getElementById('remote-pause-btn').addEventListener('click', function() {
          TcsNotify.show('车辆已暂停', 'warning');
        });
        
        // 方向控制按钮
        const directionButtons = [
          'remote-forward-btn', 
          'remote-backward-btn', 
          'remote-left-btn', 
          'remote-right-btn', 
          'remote-stop-move-btn'
        ];
        
        directionButtons.forEach(btnId => {
          document.getElementById(btnId).addEventListener('click', function() {
            const direction = btnId.replace('remote-', '').replace('-btn', '');
            TcsNotify.show(`车辆正在${getDirectionText(direction)}`, 'info');
          });
        });
        
        // 获取方向文本
        function getDirectionText(direction) {
          switch(direction) {
            case 'forward': return '前进';
            case 'backward': return '后退';
            case 'left': return '左转';
            case 'right': return '右转';
            case 'stop-move': return '停止移动';
            default: return '';
          }
        }
      });
    </script>
  </body>
</html>