/* ============ Product Detail Overlay with Scroll Spy + Pricing ============ */ const PRODUCT_DATA = { ipcs: { code: "IPCS", codeFull: "INTELLIGENT PROJECT CONSTRUCTION SITE", zh: "智慧工地管理系統", sub: "即時數據 × 人員管理 × 標準化流程", hero: "img/prod-ipcs.webp", desc: "IPCS 智慧工地管理系統整合專案、簽核、工程查驗、職安檢查、工程日報、檔案、進度、會議、設備與工地人員等管理作業，將分散於紙本、通訊軟體與個別檔案中的工程資訊，集中於同一平台進行填報、查詢、追蹤與統計。透過電腦、平板及手機皆可操作，協助管理者即時掌握工地執行情形，建立更透明、標準化且可追溯的數位管理流程。", sections: [ { id:"overview", n:"01", t:"模組簡介", lead:"從工地進場、查驗巡檢到會議追蹤與日報彙整", body:"IPCS 以工地日常作業為核心，將人員、表單、文件、進度與現場管理資訊轉化為可持續累積的數位紀錄。從資料建立、工作執行到後續查詢與追蹤，各項作業皆可在同一系統中完成，讓不同角色即時掌握專案狀況，降低資訊落差，提升工程協作效率與管理一致性。", cards:[ {n:"1", t:"工地人員管理", d:"進出場、人力、廠商與工種掌握"}, {n:"2", t:"門禁管理", d:"刷臉進場與離場紀錄整合"}, {n:"3", t:"職安管理", d:"職安宣導、巡檢、缺失改善追蹤"}, {n:"4", t:"工程查驗", d:"分級查驗、照片留存與簽核管理"}, {n:"5", t:"設備管理", d:"設備定檢、證照狀態與履歷查詢"}, {n:"6", t:"會議管理", d:"會議紀錄、裁示事項與責任指派"}, {n:"7", t:"PDF 標繪", d:"在圖說上標示問題並指派任務"}, {n:"8", t:"工項追蹤", d:"待辦事項、逾期項目與處理進度"}, {n:"9", t:"日報表", d:"多人共同填報，彙整人力與機具"}, {n:"10", t:"甘特圖", d:"比對預定與實際進度，掌握落後工項"}, ], flowLabel:"一天的工地作業動線", flow:["進場管理", "施工作業", "查驗巡檢", "協調追蹤", "收工彙整"], benefits:["現場資訊即時掌握", "流程標準化", "品質與職安可追蹤", "跨部門協作更順暢", "管理決策更有效率"], }, { id:"project", n:"02", t:"專案與權限", lead:"建立清楚的專案歸屬與使用權限", body:"透過專案基本資料與權限管理，建立不同工程專案的資料歸屬，並依使用者職責配置可查看的專案、功能與操作範圍，讓企業在多人、多專案的使用環境中，維持一致且清楚的管理規則。", features:[ {t:"專案基本資料管理", d:"建立新專案並設定專案名稱、起訖時間、地點、經緯度及所屬公司，作為系統內各項工程資料的歸屬基礎。"}, {t:"使用者群組管理", d:"依公司組織、部門或工作職責建立使用者群組，集中管理不同類型使用者的系統權限。"}, {t:"功能權限管理", d:"設定各群組可查看及使用的 IPCS 功能模組，避免未經授權的人員操作不相關的系統功能。"}, {t:"專案權限管理", d:"控制使用者可進入的工程專案。同一位使用者可在不同專案中具有不同角色與操作權限，符合跨專案管理需求。"}, ], }, { id:"forms", n:"03", t:"表單與現場作業", lead:"將工地表單與查驗流程帶到現場", body:"IPCS 將申請簽核、工程查驗、職安檢查及工程日報轉為線上作業。現場人員可透過手機或平板填寫資料，管理者則可集中查詢表單內容、處理狀態及歷史紀錄，建立標準化且可追溯的作業流程。", features:[ {t:"簽核專區", d:"整合申請清單、審核清單、流程管理及表單管理，提供申請案件建立、線上審核與流程設定功能，將行政及工程申請作業集中管理。"}, {t:"工程查驗單", d:"提供查驗單作業、查驗單報表及查驗單管理，使用者可建立工程查驗資料、記錄查驗結果，並集中查詢歷史紀錄及相關報表。"}, {t:"職安檢查單", d:"提供檢查單作業、掃描作業及檢查單管理。現場人員可依施工項目、項目分類及檢查內容執行巡檢，填寫檢查結果及相關說明。"}, {t:"QR Code 掃描作業", d:"設備可產生專屬 QR Code，現場人員透過手機或平板掃描後，即可進入對應設備及職安檢查作業，縮短資料查找與操作時間。"}, {t:"工程日報表", d:"記錄每日施工內容及相關工程資訊，集中保存每日填報資料，讓管理人員可持續查詢工程執行紀錄。"}, ], }, { id:"progress", n:"04", t:"進度與協作", lead:"串聯排程、會議與工作任務", body:"IPCS 將工程排程、會議決議及工作項目相互連結，協助團隊從專案里程碑展開工作安排，並持續追蹤任務指派、進度回覆及相關紀錄，使管理資訊不再散落於不同文件與通訊內容中。", features:[ {t:"行事曆", d:"以行事曆方式建立及查看工作行程，可設定日期、行程內容及分類，協助使用者掌握個人或專案活動安排。"}, {t:"甘特圖", d:"建立專案流程、里程碑及管理節點，支援主甘特圖與次甘特圖，並可查看分包商進度及建立不同任務之間的關聯。"}, {t:"任務影響提醒", d:"當甘特圖中的相關任務發生調整時，系統可提示可能受到影響的關聯工作，協助管理者進一步判斷及調整排程。"}, {t:"會議管理", d:"集中建立會議資料、記錄會議裁示，並將決議事項轉為待辦工作，指派相關人員處理及追蹤執行進度。"}, {t:"工項追蹤", d:"建立及指派工作項目，管理負責人、工作內容、進度回覆與相關檔案，並可將工項與甘特圖作業階段建立關聯。"}, {t:"個人任務集中管理", d:"使用者可集中查看與自己相關的工作項目，透過條件篩選快速找到待處理任務，並回覆進度及上傳相關資料。"}, ], }, { id:"labor", n:"05", t:"人員設備與點工", lead:"掌握工地人力、設備與每日投入", body:"整合工地人員、資格證照、施工設備、機具資產及每日點工資料，建立現場人力與設備的基本管理紀錄，協助管理者查詢人員資訊、設備履歷及每日工作投入情形。", features:[ {t:"工地人員管理", d:"建立工地人員基本資料，管理所屬公司、部門、工種、工作項目、聯絡方式及人員照片，集中保存人員相關資訊。"}, {t:"資格證照管理", d:"記錄工地人員的資格與證照資料，供專案管理及現場人員資料查詢使用。"}, {t:"線上告知單", d:"依人員管理需求設計相關表單，提供現場人員線上填報告知單，保留填報內容及相關紀錄。"}, {t:"二道門禁管理", d:"配合工地人員管理及現場進場流程，執行二道門禁相關作業。實際進出資料則依現場門禁系統及介接條件辦理。"}, {t:"設備管理", d:"集中建立施工設備、機具及資產資料，管理設備基本資訊、設備履歷及維護資訊。"}, {t:"設備 QR Code", d:"為設備產生專屬 QR Code，現場人員掃描後可快速辨識設備，並進入相關資料或檢查作業。"}, {t:"點工管理", d:"記錄每日工作項目、承攬廠商、人員工作內容、工作地點、正常工時及加班時數，建立每日人力投入紀錄。"}, {t:"人工成本管理", d:"透過點工資料彙整人員工時與承攬廠商資訊，作為人工成本管理及後續資料查詢的基礎。"}, ], }, { id:"docs", n:"06", t:"文件與資料應用", lead:"讓工程資料更容易整理、查找與運用", body:"透過檔案管理、綱要編碼、儀表板及 3D GIS 等功能，將工程文件與管理資料依一致方式整理，協助使用者快速找到需要的資訊，並以視覺化及空間化方式查看專案內容。", features:[ {t:"檔案管理", d:"以視覺化資料夾管理工程文件，支援多筆檔案批次上傳、檔案版本管理及檔名搜尋，集中保存專案相關資料。"}, {t:"圖文全文檢索", d:"除檔案名稱外，也可針對文件內容進行圖文全文檢索，減少逐一開啟檔案查找資料的時間。"}, {t:"PDF 線上查閱與註記", d:"使用者可透過電腦、平板或手機在線上查看 PDF，並直接於文件中建立註記。"}, {t:"註記指派與追蹤", d:"PDF 註記可指派給相關人員處理，並持續追蹤註記後續回覆及處理情形。"}, {t:"綱要編碼", d:"建立空間與設備的一致性編碼，並提供 BIM 模型綱要編碼建檔樣板，作為不同工程資料之間的共同查詢依據。"}, {t:"關聯資料檢索", d:"使用者可依空間或設備編碼，快速檢索相關檔案、會議紀錄及工作項目，提升跨模組資料查詢效率。"}, {t:"儀表板", d:"依管理需求建立個人化儀表板，將系統資料轉為視覺化資訊，並可依年度、月份或跨專案條件進行查詢。"}, {t:"儀表板權限分享", d:"可設定儀表板查看權限，並將儀表板連結分享給指定使用者，使不同管理角色查看相對應的資訊。"}, {t:"3D GIS", d:"提供專案空間資訊的三維展示入口，將專案位置及相關地理資訊以 3D GIS 方式呈現，協助使用者從空間角度查看專案內容。"}, ], }, ], }, bim: { code: "BIM", codeFull: "SMART BIM · BUILDING × CONSTRUCTION", zh: "建築BIM+施工BIM", sub: "免安裝瀏覽 × 模型查詢 × 施工階段", hero: "img/prod-bim.webp", desc: "智慧 BIM 整合建築管理 BIM 與施工進度 BIM，透過網頁式圖台集中呈現建築模型、樓層、構件屬性與工程進度資訊。使用者無須安裝專用 BIM 軟體，即可於電腦、平板或手機上進行模型瀏覽、構件查詢、樓層切換、測量及施工階段檢視，讓 BIM 從單純的三維模型展示，進一步成為建築資訊查詢與施工進度管理的視覺化工具。", sections: [ { id:"overview", n:"01", t:"核心功能", lead:"一站式網頁 BIM 圖台，讓模型管理與協作更簡單", body:"智慧 BIM 將建築模型轉化為可於網頁操作的視覺化資訊介面，整合建築管理 BIM、施工進度 BIM與 3D GIS 空間應用。使用者可依樓層、元件類型及構件屬性查詢模型內容，並將施工進度資料與三維模型結合，從建築空間、構件資訊到工程階段，建立更直觀的 BIM 資訊查詢方式。", cards:[ {n:"1", t:"3D 模型瀏覽", d:"支援 IFC、3D Tiles、GLB 等格式，線上流暢瀏覽大型 BIM 模型。"}, {n:"2", t:"模型構件查詢", d:"點選構件即可查看屬性資訊，快速掌握模型與設備資料。"}, {n:"3", t:"圖層與視圖管理", d:"支援圖層開關、透明度調整，視圖儲存與切換，管理更高效。"}, {n:"4", t:"文件與圖檔管理", d:"整合圖面、PDF、照片等文件，集中管理，快速查找。"}, {n:"5", t:"標註與量測工具", d:"支援標註、量測距離、面積、角度等，現場檢查更方便。"}, {n:"6", t:"進度管理與比對", d:"整合施工進度 BIM，支援進度回饋與模型比對，顏色顯示進度狀態。"}, {n:"7", t:"設備管理", d:"設備清冊、保養週期、維修紀錄，讓設施管理更智慧。"}, {n:"8", t:"多專案管理", d:"支援多專案切換與管理，適合企業與大型單位使用。"}, ], extraLabel:"延伸應用", extra:[ {t:"建築管理 BIM", d:"建築全生命週期管理，整合模型、圖資與數據，提升資產管理效率。"}, {t:"施工進度 BIM", d:"施工進度可視化管理，提升協作效率與專案透明度。"}, {t:"3D GIS 應用", d:"整合 GIS 與 BIM，管理城市與園區更智慧。"}, {t:"外部 Viewer 分享", d:"分享模型連結、圖檔，住戶與外部單位查看更簡單。"}, ], benefits:["資訊整合可視化", "精準查詢定位", "提升協作效率", "多端支援瀏覽", "資料安全控管"], }, { id:"viewer", n:"02", t:"模型瀏覽與操作", lead:"從不同角度掌握建築模型", body:"智慧 BIM 提供直觀的三維模型操作工具，使用者可依查看需求調整模型視角、切換檢視模式或剖切模型，不僅能查看建築整體外觀，也能深入了解樓層配置及內部構件關係。", features:[ {t:"網頁模型瀏覽", d:"透過網頁瀏覽器載入 BIM 模型，使用者端無須另外安裝專用 BIM 軟體，即可進入模型查看及操作。"}, {t:"旋轉、平移與縮放", d:"透過滑鼠或觸控操作調整模型方向、畫面位置及顯示比例，快速查看建築整體或局部細節。"}, {t:"平面檢視模式", d:"以接近樓層平面圖的視角查看模型，協助使用者掌握指定樓層的空間配置與構件分布。"}, {t:"剖面檢視", d:"透過剖切方式移除部分模型遮擋，查看建築內部空間、樓層及構件配置。"}, {t:"爆炸檢視", d:"將模型的不同樓層或內容分離展開，使建築組成及上下層關係更容易辨識。"}, {t:"格線顯示", d:"於模型畫面中顯示輔助格線資訊，協助使用者判讀模型位置及建築配置。"}, {t:"模型距離測量", d:"在模型中選取測量位置，顯示兩點之間的距離，供模型查看及尺寸確認使用。"}, ], }, { id:"query", n:"03", t:"樓層與構件查詢", lead:"從樓層深入到單一構件資訊", body:"智慧 BIM 可依模型中的樓層、元件類型及族群資料逐步篩選模型內容。使用者除了能切換指定樓層，也可點選單一構件或透過清單查詢，快速定位模型位置並查看原始 BIM 模型所帶入的屬性資訊。", features:[ {t:"樓層快速切換", d:"依 BIM 模型中的樓層資訊建立樓層清單，使用者可選擇指定樓層進行載入及查看。"}, {t:"樓層顯示控制", d:"依操作需求顯示或隱藏指定樓層，減少其他樓層遮擋，讓使用者聚焦於目前需要查看的模型範圍。"}, {t:"模型構件選取", d:"直接點選模型中的牆、門、窗、設備或其他構件，顯示選取狀態並查看相關資訊。"}, {t:"構件聚焦定位", d:"選取構件後，可將視角聚焦至該構件所在位置，協助使用者快速確認其空間關係。"}, {t:"構件屬性查詢", d:"查看構件名稱、構件類型、識別資料及 IFC 模型轉換後所保留的相關屬性與參數。"}, {t:"元件類型篩選", d:"依門、窗或其他 BIM 元件類型篩選模型內容，集中查看同一類型的構件清單與分布位置。"}, {t:"族群類型查詢", d:"在指定元件類型下進一步查看不同族群類型及其構件明細，協助使用者辨識模型中不同規格或形式的構件。"}, {t:"清單與模型連動", d:"從查詢結果選擇指定構件後，可定位至模型中的對應位置；也可由模型點選構件後查看其屬性資料。"}, {t:"模型顯示與隱藏", d:"依樓層、圖層或模型內容控制構件顯示，暫時隱藏不需要查看的部分，降低模型遮擋。"}, ], }, { id:"drawing", n:"04", t:"模型資訊與圖面應用", lead:"整合模型幾何、屬性與平面圖資訊", body:"智慧 BIM 將三維模型與構件屬性呈現在同一操作介面，讓使用者在查看構件空間位置時，也能同步掌握模型所包含的資料。系統並提供平面圖套疊功能，將樓層圖面與模型或圖台資訊整合呈現。", features:[ {t:"模型與屬性同步呈現", d:"使用者點選模型構件後，可在同一介面查看構件位置及其相關屬性，減少在不同文件或系統之間切換。"}, {t:"模型資訊展示", d:"整合模型基本資訊、樓層資訊、構件類型、識別資料及相關參數，建立由三維模型進入資訊查詢的操作方式。"}, {t:"模型內容控制", d:"依目前的查詢目的，控制樓層、圖層或指定模型內容的顯示與隱藏，使畫面保留需要查看的模型資訊。"}, {t:"平面圖載入", d:"依樓層載入相對應的平面圖影像，讓使用者可在圖台中查看模型與平面圖資訊。"}, {t:"平面圖套疊", d:"將樓層平面圖依既有位置與座標資料疊加於圖台中，協助使用者比對二維圖面與三維模型內容。"}, {t:"套疊資料保存", d:"保存圖面名稱、所屬樓層、影像位置及座標等資料，使套疊設定可持續使用。"}, {t:"套疊結果重現", d:"再次開啟圖面時，可讀取既有套疊資料並重現原有位置，避免每次重新設定。"}, ], }, { id:"schedule", n:"05", t:"施工進度管理", lead:"以三維模型呈現工程施工階段", body:"施工進度 BIM 將工程進度資料與 BIM 模型建立對應，使用者可依施工階段查看相對應的模型內容。相較於單純閱讀排程或表格，三維模型能更直觀地呈現工程執行範圍及不同階段的建築狀態。", features:[ {t:"模型與進度資料結合", d:"將施工進度資料與 BIM 模型內容建立對應，使工程進度可透過三維模型進行查看。"}, {t:"施工階段展示", d:"依不同施工階段顯示相對應的模型內容，協助使用者了解工程在各階段的建築狀態。"}, {t:"指定階段查詢", d:"選擇特定施工階段後，查看該階段所對應的模型範圍及相關進度資訊。"}, {t:"工程進度查看", d:"透過施工進度資料掌握工程執行情形，並由進度資訊進一步查看其對應的 BIM 模型內容。"}, {t:"模型進度查看", d:"從 BIM 模型查看構件或模型內容所對應的施工階段，使模型成為工程進度資訊的視覺化介面。"}, {t:"施工順序理解", d:"透過不同施工階段的模型展示，協助使用者理解建築施工內容隨工程時程逐步完成的順序。"}, ], }, { id:"gis", n:"06", t:"3D GIS 空間應用", lead:"從地理位置進入建築模型", body:"建築 3D GIS 將專案位置、地理資訊與 BIM 模型整合於同一應用流程。使用者可先從地圖掌握建築或專案所在位置，再選擇指定建築並進入相對應的 BIM 模型，形成由地理空間到建築構件的分層查詢方式。", features:[ {t:"專案位置定位", d:"利用專案所設定的地點及經緯度資訊，在 GIS 地圖中呈現建築或專案所在位置。"}, {t:"地圖查看建築", d:"透過地圖介面查看不同建築或專案的空間分布，建立以地理位置為基礎的模型查詢入口。"}, {t:"地圖選取模型", d:"從 GIS 地圖選擇指定建築或專案，開啟其相對應的 BIM 模型。"}, {t:"BIM 模型查詢", d:"進入模型後，可延續使用樓層切換、構件選取、屬性查詢及模型檢視等功能。"}, {t:"GIS 與 BIM 整合", d:"將專案經緯度、地圖位置與建築 BIM 模型串聯，使使用者可從整體地理空間逐步深入至建築樓層及構件資訊。"}, {t:"三維空間展示", d:"以三維地理資訊方式呈現建築位置及相關空間內容，提升建築模型與周邊地理環境之間的資訊連結。"}, ], }, ], }, }; window.PRODUCT_DATA = PRODUCT_DATA; function ProductDetail({ productKey, onClose }) { const data = PRODUCT_DATA[productKey]; const [active, setActive] = useState(data?.sections[0]?.id || ""); const scrollRef = useRef(null); // Lock body when open useEffect(() => { if (!productKey) return; document.body.style.overflow = "hidden"; document.body.classList.add("is-pd-open"); return () => { document.body.style.overflow = ""; document.body.classList.remove("is-pd-open"); }; }, [productKey]); // Scroll spy useEffect(() => { if (!productKey) return; const root = document.querySelector(".lx-pd-overlay"); if (!root) return; const observer = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); }); }, { root, rootMargin: "-40% 0px -55% 0px", threshold: 0 } ); const els = root.querySelectorAll(".lx-pd-sec"); els.forEach(el => observer.observe(el)); return () => observer.disconnect(); }, [productKey]); // Esc to close useEffect(() => { if (!productKey) return; const h = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, [productKey, onClose]); // Reset scroll on open useEffect(() => { if (productKey && scrollRef.current) scrollRef.current.scrollTop = 0; }, [productKey]); if (!data) return null; // 有購買方案的產品，方案本身也算一個章節（IPCS 已移除方案，所以不計） const totalSecs = String(data.sections.length + (data.pricing ? 1 : 0)).padStart(2, '0'); const clickNav = (id) => (ev) => { ev.preventDefault(); const root = scrollRef.current; const target = root.querySelector(`#${id}`); if (target) { // 直接計算絕對位置，從 overlay 的 scrollTop 到 target setTimeout(() => { root.scrollTo({ top: target.offsetTop - 40, behavior: "smooth" }); }, 0); } }; return (
PRODUCT  /  {data.code} — {data.zh}
{data.codeFull}

{data.zh}

{data.sub}

{data.desc}

{data.zh}
{data.sections.map(s => (
{s.n} / {totalSecs}

{s.t}

{s.lead &&

{s.lead}

} {s.body &&

{s.body}

} {s.features && (
{s.features.map((f, i) => (

{f.t}

{f.d}

))}
)} {/* 功能／模組總覽格 */} {s.cards && (
{s.cards.map((c) => (
{c.n}

{c.t}

{c.d}

))}
)} {/* 延伸應用 */} {s.extra && (
{s.extraLabel}
{s.extra.map((e) => (
{e.t}{e.d}
))}
)} {/* 作業動線 */} {s.flow && (
{s.flowLabel}
    {s.flow.map((f) =>
  1. {f}
    2. )}
)} {/* 導入效益 */} {s.benefits && (
    {s.benefits.map((b) =>
  • {b}
    • )}
)} {s.modules && (
{s.modules.map((m, i) => (
{m.n} 圖片區塊
{m.n} / 05

{m.t}

{m.d}

{m.tags && (
{m.tags.map((tag, j) => ( {tag} ))}
)}
))}
)} {s.stats && (
{s.stats.map((st, i) => (
{st.n}{st.sup && {st.sup}}
{st.l}
))}
)} {s.spec && ( {s.spec.map((row, i) => ( ))}
{row[0]}{row[1]}
)}
))} {data.pricing && (
{totalSecs} / {totalSecs}

購買方案

{data.pricing.head.sub}

)}
{data.pricing && (
{data.pricing.plans.map((p, i) => (
{p.tag && {p.tag}}
{p.name}

{p.title}

{p.tagline}

{p.custom ? ( {p.custom} ) : ( <> NT$ {p.price.toLocaleString()} {p.per} )}
    {p.features.map((f, idx) => { const off = p.off && p.off.includes(idx); return
  • {f}
    • ; })}
))}

所有金額皆為新台幣、未含稅。年繳享 15% 折扣。 如需試用或規模化報價，請 { e.preventDefault(); if (window.lxGoto) window.lxGoto("contact"); else onClose(); }}>聯繫顧問團隊。

)}
); } window.ProductDetail = ProductDetail;