hanhai88
/
tcs-front-tabler


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!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>
      <!-- 页面内容 -->
      <div class="page-wrapper">
        <div class="tcs-config-container">
          <div class="tcs-config-left">
            <div class="container-fluid py-4">
              <nav class="docs-menu space-y scrollbar">
                <ul role="list" class="docs-menu">
                  <li class="docs-menu-group">
                    <div class="docs-menu-header">
                      服务器
                      <span class="docs-menu-header-toggle open">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="icon"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          stroke-width="2"
                          stroke="currentColor"
                          fill="none"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        >
                          <polyline points="9 6 15 12 9 18"></polyline>
                        </svg>
                      </span>
                    </div>
                    <div class="docs-menu-submenu">
                      <a class="docs-menu-item active">服务器配置</a>
                    </div>
                  </li>
                  <li class="docs-menu-group">
                    <div class="docs-menu-header">
                      车辆
                      <span class="docs-menu-header-toggle open">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="icon"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          stroke-width="2"
                          stroke="currentColor"
                          fill="none"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        >
                          <polyline points="9 6 15 12 9 18"></polyline>
                        </svg>
                      </span>
                    </div>
                    <div class="docs-menu-submenu">
                      <a class="docs-menu-item">基本配置</a>
                      <a class="docs-menu-item">ACR配置</a>
                      <a class="docs-menu-item">ROS配置1</a>
                      <a class="docs-menu-item">ROS配置2</a>
                    </div>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="tcs-config-right">
            <!-- 面包屑 -->
            <div class="container-fluid py-4">
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb" id="config-breadcrumb">
                  <li class="breadcrumb-item"></li>
                </ol>
              </nav>
            </div>
            <!-- 配置内容 -->
            <div class="container-fluid py-4">
              <div class="row justify-content-center">
                <form class="tcs-config-form">
                  <div class="mb-3">
                    <label class="form-label">区域名称:</label>
                    <input type="text" class="form-control" value="xxx车间" />
                  </div>

                  <div class="mb-3">
                    <label class="form-label">服务器地址:</label>
                    <div>
                      <input
                        type="text"
                        class="form-control"
                        value="192.168.0.240"
                      />
                      <button class="btn btn-primary" type="button">
                        获取本机地址
                      </button>
                    </div>
                  </div>

                  <div class="mb-3">
                    <label class="form-label">配置为:</label>
                    <div class="form-selectgroup form-selectgroup-pills">
                      <label class="form-selectgroup-item">
                        <input
                          type="checkbox"
                          name="name"
                          value="TCS"
                          class="form-selectgroup-input"
                          checked=""
                        />
                        <span class="form-selectgroup-label">TCS</span>
                      </label>
                      <label class="form-selectgroup-item">
                        <input
                          type="checkbox"
                          name="name"
                          value="VCS"
                          class="form-selectgroup-input"
                        />
                        <span class="form-selectgroup-label">VCS</span>
                      </label>
                    </div>
                  </div>

                  <div class="mb-3">
                    <label class="form-label">license:</label>
                    <div>
                      <input
                        type="text"
                        class="form-control border-0 bg-transparent"
                        value="2027-12-30 过期"
                        readonly
                      />
                      <button class="btn btn-primary" type="button">
                        更新license
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </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>

    <!-- 配置页面的脚本 -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 添加菜单展开/折叠功能
        document.querySelectorAll(".docs-menu-header").forEach((header) => {
          header.addEventListener("click", function () {
            const toggle = this.querySelector(".docs-menu-header-toggle");
            const submenu = this.nextElementSibling;

            if (toggle.classList.contains("open")) {
              toggle.classList.remove("open");
              submenu.style.display = "none";
            } else {
              toggle.classList.add("open");
              submenu.style.display = "block";
            }
          });
        });

        // 添加菜单项点击事件
        document.querySelectorAll(".docs-menu-item").forEach((item) => {
          item.addEventListener("click", function (e) {
            // 移除所有菜单项的active类
            document.querySelectorAll(".docs-menu-item").forEach((menuItem) => {
              menuItem.classList.remove("active");
            });

            // 为当前点击的菜单项添加active类
            this.classList.add("active");

            // 更新面包屑
            updateBreadcrumb(this);
          });
        });

        // 默认展开带有active项的子菜单
        document.querySelectorAll(".docs-menu-item.active").forEach((item) => {
          const submenu = item.closest(".docs-menu-submenu");
          if (submenu) {
            const header = submenu.previousElementSibling;
            const toggle = header.querySelector(".docs-menu-header-toggle");
            toggle.classList.add("open");
            submenu.style.display = "block";
          }
          // 初始化面包屑
          updateBreadcrumb(item);
        });

        // 更新面包屑的函数
        function updateBreadcrumb(activeItem) {
          const breadcrumb = document.getElementById("config-breadcrumb");
          const parentHeader = activeItem
            .closest(".docs-menu-group")
            .querySelector(".docs-menu-header");
          const parentText = parentHeader.textContent.trim();
          const activeText = activeItem.textContent.trim();

          breadcrumb.innerHTML = `
            <li class="breadcrumb-item">${parentText}</li>
            <li class="breadcrumb-item active" aria-current="page">${activeText}</li>
          `;
        }
      });
    </script>
  </body>
</html>