hanhai88
/
tcs-front-tabler


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783
							<!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"
    />
  </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="#addMapModal">
              <i class="ti ti-plus me-1"></i>添加
            </button>
            <button class="btn btn-danger ms-2 tcs-form-item" data-bs-toggle="modal" data-bs-target="#updateCloudMapModal">
              <!-- <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>描述</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="addMapModal" 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="addMapForm" class="needs-validation" novalidate>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">区域</label>
                <div class="col">
                  <select class="form-select" name="area" required>
                    <option value="" selected disabled>请选择区域</option>
                    <option value="车间xxx">车间xxx</option>
                    <option value="车间yyy">车间yyy</option>
                    <option value="仓库A">仓库A</option>
                    <option value="仓库B">仓库B</option>
                  </select>
                  <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">
                  <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">
                  <input type="text" class="form-control" name="description" 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="云">云</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">地图文件</label>
                <div class="col">
                  <input type="file" class="form-control" name="mapFile" required>
                  <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">
                  <label class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" name="setCurrent">
                    <span class="form-check-label">是</span>
                  </label>
                </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="saveMapBtn">保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 更新云地图确认模态框 -->
    <div class="modal modal-blur fade" id="updateCloudMapModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">确认更新云地图</div>
            <div>您确定要更新云地图吗？此操作可能需要一些时间。</div>
          </div>
          <div class="modal-footer tcs-modal-footer">
            <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-danger" id="confirmUpdateCloudMapBtn">确认</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 设为当前地图确认模态框 -->
    <div class="modal modal-blur fade" id="setCurrentMapModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">确认设为当前地图</div>
            <div>您确定要将此地图设为当前地图吗？这将替换当前正在使用的地图。</div>
          </div>
          <div class="modal-footer tcs-modal-footer">
            <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="confirmSetCurrentBtn">确认</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑地图模态框 -->
    <div class="modal modal-blur fade" id="editMapModal" 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="editMapForm" class="needs-validation" novalidate>
              <input type="hidden" name="id" id="edit-map-id">
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">区域</label>
                <div class="col">
                  <select class="form-select" name="area" id="edit-map-area" required>
                    <option value="" disabled>请选择区域</option>
                    <option value="车间xxx">车间xxx</option>
                    <option value="车间yyy">车间yyy</option>
                    <option value="仓库A">仓库A</option>
                    <option value="仓库B">仓库B</option>
                  </select>
                  <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">
                  <input type="text" class="form-control" name="name" id="edit-map-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">
                  <input type="text" class="form-control" name="description" id="edit-map-description" 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="edit-map-type" required>
                    <option value="" disabled>请选择类型</option>
                    <option value="云">云</option>
                    <option value="本地">本地</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">
                  <input type="file" class="form-control" name="mapFile">
                  <small class="form-text text-muted">如不更换地图文件，请留空</small>
                </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="setCurrent" id="edit-map-set-current">
                    <span class="form-check-label">是</span>
                  </label>
                </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="updateMapBtn">保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除地图确认模态框 -->
    <div class="modal modal-blur fade" id="deleteMapModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">确认删除</div>
            <div>您确定要删除此地图吗？此操作无法撤销。</div>
          </div>
          <div class="modal-footer tcs-modal-footer">
            <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-danger" id="confirmDeleteBtn">删除</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: "area", title: "区域", className: "tcs-table-area-column" },
            { field: "name", title: "名称", className: "tcs-table-name-column" },
            { field: "description", title: "描述", className: "tcs-table-desc-column" },
            { field: "type", title: "类型", className: "tcs-table-type-column" },
            { field: "version", title: "版本", className: "tcs-table-version-column" },
            { 
              field: "createTime", 
              title: "创建时间", 
              className: "tcs-table-time-column",
              formatter: function(value) {
                return formatDateTime(value);
              }
            },
            { 
              field: "currentMap", 
              title: "当前地图",
              formatter: function(value) {
                return value; // 直接返回HTML字符串，让表格组件使用innerHTML渲染
              }
            },
            { 
              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 set-current-btn" data-bs-toggle="modal" data-bs-target="#setCurrentMapModal" data-id="${row.id}" data-name="${row.name}">设为当前</button>
                          <button class="btn btn-sm btn-outline-secondary tcs-table-oper-btn edit-map-btn" data-bs-toggle="modal" data-bs-target="#editMapModal" data-id="${row.id}">编辑</button>
                          <button class="btn btn-sm btn-outline-danger tcs-table-oper-btn delete-map-btn" data-bs-toggle="modal" data-bs-target="#deleteMapModal" data-id="${row.id}" data-name="${row.name}">删除</button>
                        </div>`;
              }
            }
          ]
        };
        
        // 生成地图数据
        const alarmData = generateAlarmData(109);
        
        // 初始化表格
        const alarmTable = new TcsTable(tableOptions, alarmData);
        
        // 添加日期时间筛选功能
        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 generateAlarmData(count) {
          const data = [];
          const areas = ["车间xxx", "车间yyy", "仓库A", "仓库B"];
          const names = ["地图1", "地图2", "地图3", "地图4", "地图5"];
          const descriptions = ["一层", "二层", "三层", "四层"];
          const types = ["云", "本地"];
          
          for (let i = 1; i <= count; i++) {
            const date = new Date();
            date.setFullYear(Math.floor(Math.random() * 5) + 2020);
            date.setMonth(Math.floor(Math.random() * 12));
            date.setDate(Math.floor(Math.random() * 28) + 1);
            
            const id = i < 10 ? `S21312${i}` : `L21312${i-10}`;
            
            data.push({
              id: id,
              area: areas[Math.floor(Math.random() * areas.length)],
              name: names[Math.floor(Math.random() * names.length)],
              description: descriptions[Math.floor(Math.random() * descriptions.length)],
              type: types[Math.floor(Math.random() * types.length)],
              version: `${Math.floor(Math.random() * 9) + 1}25131${Math.floor(Math.random() * 9) + 1}`,
              createTime: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`,
              currentMap: Math.random() > 0.5 ? '<i class="ti ti-map-pin"></i>' : '',
              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 addMapModal = new TcsModal({
          modalId: 'addMapModal',
          confirmBtnId: 'saveMapBtn',
          formId: 'addMapForm',
          onConfirm: function(data) {
            // 这里添加保存地图的逻辑
            console.log('保存新地图', data);
            
            // 模拟添加新地图到表格
            const newId = `M${Math.floor(Math.random() * 10000)}`;
            const now = new Date();
            const newMap = {
              id: newId,
              area: data.area,
              name: data.name,
              description: data.description,
              type: data.type,
              version: `1.0.0`,
              createTime: `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`,
              currentMap: data.setCurrent ? '<i class="ti ti-map-pin"></i>' : '',
              actions: ""
            };
            
            // 如果设为当前地图，需要更新其他地图的状态
            if (data.setCurrent) {
              // 这里可以添加更新其他地图状态的逻辑
            }
            
            // 显示成功提示
            TcsNotify.show('地图已添加成功！', 'success');
          }
        });
        
        // 更新云地图确认模态框
        const updateCloudMapModal = new TcsModal({
          modalId: 'updateCloudMapModal',
          confirmBtnId: 'confirmUpdateCloudMapBtn',
          onConfirm: function() {
            // 这里添加更新云地图的逻辑
            console.log('更新云地图');
            
            // 模拟更新进度
            const progressNotification = document.createElement('div');
            progressNotification.className = 'alert alert-info alert-dismissible';
            progressNotification.style.paddingTop = '0.5rem';
            progressNotification.style.paddingBottom = '0.5rem';
            
            // 设置通知内容
            progressNotification.innerHTML = `
              <div class="d-flex">
                <div>
                  <i class="ti ti-cloud-download alert-icon"></i>
                </div>
                <div class="flex-fill">
                  <div>正在更新云地图...</div>
                  <div class="progress progress-sm mt-2">
                    <div class="progress-bar progress-bar-indeterminate"></div>
                  </div>
                </div>
              </div>
            `;
            
            // 创建通知容器
            let notifyContainer = document.getElementById('notify-container');
            if (!notifyContainer) {
              notifyContainer = document.createElement('div');
              notifyContainer.id = 'notify-container';
              notifyContainer.className = 'position-fixed top-0 start-50 translate-middle-x p-2';
              notifyContainer.style.zIndex = '9999';
              notifyContainer.style.paddingTop = '0.5rem';
              notifyContainer.style.paddingBottom = '0.5rem';
              document.body.appendChild(notifyContainer);
            }
            
            // 添加到容器
            notifyContainer.appendChild(progressNotification);
            
            // 模拟更新完成
            setTimeout(() => {
              // 移除进度通知
              if (progressNotification.parentNode) {
                progressNotification.parentNode.removeChild(progressNotification);
              }
              
              // 显示成功提示
              TcsNotify.show('云地图已成功更新！', 'success');
            }, 3000);
          }
        });
        
        // 设为当前地图模态框
        let currentMapId = null;
        let currentMapName = null;
        
        const setCurrentMapModal = new TcsModal({
          modalId: 'setCurrentMapModal',
          confirmBtnId: 'confirmSetCurrentBtn',
          onShow: function(relatedTarget) {
            // 获取地图ID和名称
            currentMapId = relatedTarget ? relatedTarget.getAttribute('data-id') : null;
            currentMapName = relatedTarget ? relatedTarget.getAttribute('data-name') : null;
            
            // 更新模态框内容
            const modalBody = document.querySelector('#setCurrentMapModal .modal-body div:nth-child(2)');
            if (modalBody && currentMapName) {
              modalBody.textContent = `您确定要将地图"${currentMapName}"设为当前地图吗？这将替换当前正在使用的地图。`;
            }
          },
          onConfirm: function() {
            // 这里添加设为当前地图的逻辑
            console.log('设为当前地图:', currentMapId);
            
            // 模拟设置当前地图
            const rows = document.querySelectorAll('#data-table tbody tr');
            rows.forEach(row => {
              const id = row.querySelector('.row-checkbox').getAttribute('data-id');
              const currentCell = row.querySelector('td:nth-child(9)'); // 当前地图列
              
              if (currentCell) {
                // 清除所有当前地图标记
                currentCell.innerHTML = '';
                
                // 设置新的当前地图
                if (id === currentMapId) {
                  currentCell.innerHTML = '<i class="ti ti-map-pin"></i>';
                }
              }
            });
            
            // 显示成功提示
            TcsNotify.show(`地图"${currentMapName}"已设为当前地图`, 'success');
            
            // 重置变量
            currentMapId = null;
            currentMapName = null;
          }
        });
        
        // 编辑地图模态框
        let editMapData = null;
        
        const editMapModal = new TcsModal({
          modalId: 'editMapModal',
          confirmBtnId: 'updateMapBtn',
          formId: 'editMapForm',
          onShow: function(relatedTarget) {
            // 获取地图ID
            const mapId = relatedTarget ? relatedTarget.getAttribute('data-id') : null;
            
            if (mapId) {
              // 模拟获取地图数据
              // 在实际应用中，这里应该是从服务器获取数据
              const rows = document.querySelectorAll('#data-table tbody tr');
              rows.forEach(row => {
                const id = row.querySelector('.row-checkbox').getAttribute('data-id');
                
                if (id === mapId) {
                  // 获取行数据
                  const area = row.querySelector('td:nth-child(3)').textContent;
                  const name = row.querySelector('td:nth-child(4)').textContent;
                  const description = row.querySelector('td:nth-child(5)').textContent;
                  const type = row.querySelector('td:nth-child(6)').textContent;
                  const isCurrent = row.querySelector('td:nth-child(9)').innerHTML.includes('ti-map-pin');
                  
                  // 保存数据以便后续使用
                  editMapData = { id, area, name, description, type, isCurrent };
                  
                  // 填充表单
                  document.getElementById('edit-map-id').value = id;
                  
                  const areaSelect = document.getElementById('edit-map-area');
                  for (let i = 0; i < areaSelect.options.length; i++) {
                    if (areaSelect.options[i].value === area) {
                      areaSelect.selectedIndex = i;
                      break;
                    }
                  }
                  
                  document.getElementById('edit-map-name').value = name;
                  document.getElementById('edit-map-description').value = description;
                  
                  const typeSelect = document.getElementById('edit-map-type');
                  for (let i = 0; i < typeSelect.options.length; i++) {
                    if (typeSelect.options[i].value === type) {
                      typeSelect.selectedIndex = i;
                      break;
                    }
                  }
                  
                  document.getElementById('edit-map-set-current').checked = isCurrent;
                }
              });
            }
          },
          onConfirm: function(data) {
            // 这里添加更新地图的逻辑
            console.log('更新地图:', data);
            
            // 模拟更新地图
            const rows = document.querySelectorAll('#data-table tbody tr');
            rows.forEach(row => {
              const id = row.querySelector('.row-checkbox').getAttribute('data-id');
              
              if (id === data.id) {
                // 更新行数据
                row.querySelector('td:nth-child(3)').textContent = data.area;
                row.querySelector('td:nth-child(4)').textContent = data.name;
                row.querySelector('td:nth-child(5)').textContent = data.description;
                row.querySelector('td:nth-child(6)').textContent = data.type;
                
                // 更新当前地图状态
                if (data.setCurrent) {
                  // 清除所有当前地图标记
                  rows.forEach(r => {
                    r.querySelector('td:nth-child(9)').innerHTML = '';
                  });
                  
                  // 设置新的当前地图
                  row.querySelector('td:nth-child(9)').innerHTML = '<i class="ti ti-map-pin"></i>';
                } else if (editMapData && editMapData.isCurrent && !data.setCurrent) {
                  // 如果原来是当前地图，但现在取消了，则清除标记
                  row.querySelector('td:nth-child(9)').innerHTML = '';
                }
                
                // 更新按钮的data-name属性
                const buttons = row.querySelectorAll('button[data-name]');
                buttons.forEach(button => {
                  button.setAttribute('data-name', data.name);
                });
              }
            });
            
            // 显示成功提示
            TcsNotify.show(`地图"${data.name}"已更新成功`, 'success');
            
            // 重置变量
            editMapData = null;
          }
        });
        
        // 删除地图模态框
        let deleteMapId = null;
        let deleteMapName = null;
        
        const deleteMapModal = new TcsModal({
          modalId: 'deleteMapModal',
          confirmBtnId: 'confirmDeleteBtn',
          onShow: function(relatedTarget) {
            // 获取地图ID和名称
            deleteMapId = relatedTarget ? relatedTarget.getAttribute('data-id') : null;
            deleteMapName = relatedTarget ? relatedTarget.getAttribute('data-name') : null;
            
            // 更新模态框内容
            const modalBody = document.querySelector('#deleteMapModal .modal-body div:nth-child(2)');
            if (modalBody && deleteMapName) {
              modalBody.textContent = `您确定要删除地图"${deleteMapName}"吗？此操作无法撤销。`;
            }
          },
          onConfirm: function() {
            // 这里添加删除地图的逻辑
            console.log('删除地图:', deleteMapId);
            
            // 模拟删除地图
            const rows = document.querySelectorAll('#data-table tbody tr');
            rows.forEach(row => {
              const id = row.querySelector('.row-checkbox').getAttribute('data-id');
              
              if (id === deleteMapId) {
                // 检查是否是当前地图
                const isCurrent = row.querySelector('td:nth-child(9)').innerHTML.includes('ti-map-pin');
                
                // 从表格中移除行
                row.parentNode.removeChild(row);
                
                // 如果是当前地图，显示警告
                if (isCurrent) {
                  TcsNotify.show(`警告：您删除了当前正在使用的地图，请设置新的当前地图`, 'warning');
                }
              }
            });
            
            // 显示成功提示
            TcsNotify.show(`地图"${deleteMapName}"已删除`, 'success');
            
            // 重置变量
            deleteMapId = null;
            deleteMapName = null;
          }
        });
      });
    </script>
  </body>
</html>