diff --git a/src/apis/system/api.js b/src/apis/system/api.js
new file mode 100644
index 0000000..f2e5715
--- /dev/null
+++ b/src/apis/system/api.js
@@ -0,0 +1,2 @@
+export const GET_SYSTEM_FLOOR_LIST_API = `/api/Device/GetFloor`;
+export const GET_SYSTEM_DEVICE_LIST_API = `/api/Device/GetDeviceList`;
\ No newline at end of file
diff --git a/src/apis/system/index.js b/src/apis/system/index.js
new file mode 100644
index 0000000..4054f3f
--- /dev/null
+++ b/src/apis/system/index.js
@@ -0,0 +1,32 @@
+import { GET_SYSTEM_FLOOR_LIST_API, GET_SYSTEM_DEVICE_LIST_API } from "./api";
+import instance from "@/util/request";
+import apihandler from "@/util/apihandler";
+
+export const getSystemFloors = async (building_tag, sub_system_tag) => {
+  const res = await instance.post(GET_SYSTEM_FLOOR_LIST_API, {
+    building_tag,
+    sub_system_tag,
+  });
+
+  return apihandler(res.code, res.data, {
+    msg: res.msg,
+    code: res.code,
+  });
+};
+
+export const getSystemDevices = async ({
+  sub_system_tag,
+  building_tag,
+  floor_tag,
+}) => {
+  const res = await instance.post(GET_SYSTEM_DEVICE_LIST_API, {
+    sub_system_tag,
+    building_tag,
+    floor_tag,
+  });
+
+  return apihandler(res.code, res.data, {
+    msg: res.msg,
+    code: res.code,
+  });
+};
diff --git a/src/assets/img/equipment/replay01.svg b/src/assets/img/equipment/replay01.svg
new file mode 100644
index 0000000..639e6eb
--- /dev/null
+++ b/src/assets/img/equipment/replay01.svg
@@ -0,0 +1 @@
+<svg id="圖層_1" data-name="圖層 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.68 12.38"><defs><style>.cls-1{fill:#fff;}.cls-2{opacity:0.8;}.cls-3{fill:#ffecb6;}.cls-4{fill:#6ad3d2;}</style></defs><path class="cls-1" d="M7.12,6.59v.49H0V6.59H3.23V5.9H.6V5.42H3.23V4.87H.84V2.41H3.23V1.93H0V1.44H3.23V.86C2.4.92,1.55,1,.77,1A1.42,1.42,0,0,0,.64.5,42,42,0,0,0,6,.07L6.3.54C5.62.66,4.75.75,3.81.82v.62H7.07v.49H3.81v.48H6.32V4.87H3.81v.55h2.8V5.9H3.81v.69ZM1.42,3.44H3.23v-.6H1.42Zm1.81,1V3.84H1.42v.61Zm.58-1.61v.6H5.72v-.6Zm1.91,1H3.81v.61H5.72Z"/><path class="cls-1" d="M10.3,3.89l-.83.32V6.64c0,.32-.08.48-.28.58a2.2,2.2,0,0,1-1,.11A2.34,2.34,0,0,0,8,6.78h.76c.09,0,.13,0,.13-.14V4.42l-1,.37L7.8,4.21l1.11-.39V2.18h-1V1.63h1V0h.56v1.6h.85v.55H9.47V3.62l.73-.27ZM12.41,4V2.85A5.46,5.46,0,0,1,11,4.21h3.74V7.28h-.55V7h-2.9v.33h-.54v-3a2.14,2.14,0,0,1-.4.2A2.83,2.83,0,0,0,10,4.14a5.13,5.13,0,0,0,2-1.46H10.26V2.2h2.15V.86c-.63.05-1.29.09-1.88.11a2.49,2.49,0,0,0-.14-.44A29.39,29.39,0,0,0,14.57.08l.34.44A17,17,0,0,1,13,.81V2.2h.5A10.52,10.52,0,0,0,14,.89l.52.16c-.18.38-.38.81-.56,1.15h1.17v.48H13.49A15.42,15.42,0,0,1,15.28,4l-.35.39a13.56,13.56,0,0,0-2-1.52V4Zm-1-3a9,9,0,0,1,.47.93l-.48.18c-.11-.24-.3-.66-.47-.95Zm-.14,3.67v.68h1.16V4.69Zm1.16,1.86V5.81H11.27v.74Zm1.74-1.86H12.92v.68h1.25Zm0,1.86V5.81H12.92v.74Z"/><path class="cls-1" d="M18.45,5.31A8.33,8.33,0,0,1,16.67,7a4.23,4.23,0,0,0-.51-.38,6.22,6.22,0,0,0,1.7-1.52Zm1.48-.65V6.6c0,.34-.08.51-.34.6a4.29,4.29,0,0,1-1.24.1,1.87,1.87,0,0,0-.22-.58,8.45,8.45,0,0,0,1,0c.13,0,.16,0,.16-.12V4.71a12.29,12.29,0,0,0-2.72.3,4.09,4.09,0,0,0-.18-.57,3.75,3.75,0,0,0,1.1-.39,17.88,17.88,0,0,0,1.76-.92,13.76,13.76,0,0,0-2.24.2c0-.11-.12-.4-.19-.55a1.85,1.85,0,0,0,.65-.25,10.22,10.22,0,0,0,1.85-1.26c-.95.25-2,.46-2.91.63a2.13,2.13,0,0,0-.18-.5,23.39,23.39,0,0,0,5-1.36l.44.46a15.06,15.06,0,0,1-2.3.77l.51.32A12.59,12.59,0,0,1,18.2,2.7l2-.11c.32-.19.62-.41.91-.62l.46.39a19.54,19.54,0,0,1-3.32,1.89L21.61,4c-.25-.28-.52-.55-.76-.78L21.33,3A12.09,12.09,0,0,1,23,4.75l-.5.31c-.11-.16-.26-.35-.42-.56ZM21.11,5a17.13,17.13,0,0,1,1.83,1.56l-.5.35a16,16,0,0,0-1.8-1.61Z"/><path class="cls-1" d="M24.7,5.22a10.33,10.33,0,0,1-.41,1.93A2.64,2.64,0,0,0,23.84,7a9.17,9.17,0,0,0,.38-1.84Zm1.63-.46c0-.12-.06-.26-.1-.41a8.83,8.83,0,0,0-2.15.44,3.89,3.89,0,0,0-.18-.55c.16,0,.35-.24.59-.54a8.79,8.79,0,0,0,.65-.89A3.89,3.89,0,0,0,24,3c0-.12-.13-.4-.18-.55.13,0,.27-.2.43-.43a11,11,0,0,0,1.09-2l.54.23A13.78,13.78,0,0,1,24.63,2.4l.84-.08c.22-.36.45-.75.64-1.14l.5.3A14.34,14.34,0,0,1,24.79,4.1l1.3-.18a6.69,6.69,0,0,0-.3-.76L26.22,3a8.05,8.05,0,0,1,.57,1.58Zm-.81.33a16.37,16.37,0,0,1,.21,1.68l-.47.11a12.14,12.14,0,0,0-.19-1.69Zm.85,1.39A9.91,9.91,0,0,0,26,5l.42-.14a10.58,10.58,0,0,1,.45,1.44Zm4.1.18c.17,0,.2-.15.21-1a1.94,1.94,0,0,0,.53.23c-.05,1.07-.2,1.35-.69,1.35h-.68c-.56,0-.69-.18-.69-.77V3.62l-.75.09c-.07,1.89-.31,3-1.71,3.65a1.47,1.47,0,0,0-.36-.46c1.25-.53,1.44-1.47,1.49-3.12a2.89,2.89,0,0,0-.78.16,5.37,5.37,0,0,0-.21-.59c.16,0,.34-.26.55-.58s.39-.62.69-1.17H26.89V1h1.45c.16-.33.31-.67.44-1l.64.19C29.3.5,29.17.78,29,1h2.06V1.6H28.74a14.51,14.51,0,0,1-1,1.64L30.07,3c-.18-.3-.36-.61-.54-.88L30,1.92a13.84,13.84,0,0,1,1.12,1.92l-.53.25a6.33,6.33,0,0,0-.29-.6l-.6.06V6.41c0,.21,0,.25.2.25Z"/><path class="cls-1" d="M12.78,11.42V8.5H13v2.92Z"/><path class="cls-1" d="M13.85,11.42V9.28H14l0,.33h0a1.4,1.4,0,0,1,.33-.27.68.68,0,0,1,.39-.11.59.59,0,0,1,.49.2,1,1,0,0,1,.16.62v1.37h-.23V10.08a.91.91,0,0,0-.11-.49.41.41,0,0,0-.36-.15.58.58,0,0,0-.33.09,2,2,0,0,0-.34.29v1.6Z"/><path class="cls-1" d="M16.74,11.47a1.08,1.08,0,0,1-.44-.09,1.39,1.39,0,0,1-.34-.2l.12-.17a1.53,1.53,0,0,0,.3.19.82.82,0,0,0,.37.07.53.53,0,0,0,.37-.12.38.38,0,0,0,.12-.28.32.32,0,0,0-.08-.21.52.52,0,0,0-.19-.14,1.09,1.09,0,0,0-.25-.1l-.3-.13a.69.69,0,0,1-.25-.19.44.44,0,0,1-.1-.3.6.6,0,0,1,.08-.29.68.68,0,0,1,.24-.2.76.76,0,0,1,.38-.08,1,1,0,0,1,.34.06,1.1,1.1,0,0,1,.28.17l-.12.16A.79.79,0,0,0,17,9.48a.6.6,0,0,0-.27-.06.45.45,0,0,0-.35.12.33.33,0,0,0-.12.25.29.29,0,0,0,.07.19.59.59,0,0,0,.18.13l.23.1.25.1a.94.94,0,0,1,.22.12.48.48,0,0,1,.22.43.53.53,0,0,1-.09.3.54.54,0,0,1-.24.23A1,1,0,0,1,16.74,11.47Z"/><path class="cls-1" d="M18.53,11.47a.62.62,0,0,1-.33-.08.55.55,0,0,1-.17-.23,1.23,1.23,0,0,1-.05-.35V9.48h-.32V9.3l.33,0,0-.61h.19v.61h.62v.2h-.62v1.35a.61.61,0,0,0,.08.32c0,.08.14.12.28.12l.13,0,.13-.05.06.19-.19,0Z"/><path class="cls-1" d="M19.71,11.47a.64.64,0,0,1-.31-.07.6.6,0,0,1-.23-.19.67.67,0,0,1-.08-.33.58.58,0,0,1,.33-.54,2.62,2.62,0,0,1,1-.26,1.55,1.55,0,0,0,0-.31.49.49,0,0,0-.15-.24.41.41,0,0,0-.31-.1,1,1,0,0,0-.38.08,1.85,1.85,0,0,0-.29.17l-.1-.18.2-.12.28-.11a1.12,1.12,0,0,1,.32,0,.64.64,0,0,1,.41.11.62.62,0,0,1,.22.3,1.33,1.33,0,0,1,.06.42v1.36h-.19l0-.28h0a1.56,1.56,0,0,1-.34.23A.82.82,0,0,1,19.71,11.47Zm.05-.2a.81.81,0,0,0,.34-.08,2.11,2.11,0,0,0,.35-.25v-.69a3.05,3.05,0,0,0-.67.13.77.77,0,0,0-.35.2.41.41,0,0,0-.11.28.38.38,0,0,0,.13.32A.54.54,0,0,0,19.76,11.27Z"/><path class="cls-1" d="M21.43,11.42V9.28h.19l0,.33h0A1.4,1.4,0,0,1,22,9.34a.68.68,0,0,1,.39-.11.59.59,0,0,1,.49.2,1,1,0,0,1,.16.62v1.37H22.8V10.08a.91.91,0,0,0-.11-.49.41.41,0,0,0-.36-.15.6.6,0,0,0-.33.09,2,2,0,0,0-.34.29v1.6Z"/><path class="cls-1" d="M24.4,11.47a.57.57,0,0,1-.33-.08.48.48,0,0,1-.17-.23,1,1,0,0,1,0-.35V9.48h-.33V9.3l.34,0,0-.61h.2v.61h.61v.2h-.61v1.35a.61.61,0,0,0,.07.32.31.31,0,0,0,.29.12l.13,0,.13-.05.05.19-.18,0Z"/><path class="cls-1" d="M26.09,11.42V9.28h.19l0,.4h0a1.09,1.09,0,0,1,.26-.33.54.54,0,0,1,.34-.12H27l.1,0-.05.21-.09,0h-.11a.44.44,0,0,0-.29.13,1,1,0,0,0-.28.41v1.44Z"/><path class="cls-1" d="M28.29,11.47a1,1,0,0,1-.5-.14.94.94,0,0,1-.36-.38,1.21,1.21,0,0,1-.13-.6,1.26,1.26,0,0,1,.28-.82.93.93,0,0,1,.31-.22.72.72,0,0,1,.35-.08.75.75,0,0,1,.43.12.7.7,0,0,1,.29.34,1.19,1.19,0,0,1,.1.53v.09s0,0,0,.08H27.54a1.15,1.15,0,0,0,.1.46.91.91,0,0,0,.27.31.78.78,0,0,0,.41.11.73.73,0,0,0,.3,0,1.26,1.26,0,0,0,.26-.13l.09.17a1.57,1.57,0,0,1-.29.14A.88.88,0,0,1,28.29,11.47Zm-.75-1.27h1.3a.89.89,0,0,0-.16-.58.55.55,0,0,0-.44-.19.63.63,0,0,0-.33.09.78.78,0,0,0-.25.26A.94.94,0,0,0,27.54,10.2Z"/><path class="cls-1" d="M29.63,12.36V9.28h.19l0,.26h0a2.7,2.7,0,0,1,.33-.22.85.85,0,0,1,.38-.09.77.77,0,0,1,.47.13.86.86,0,0,1,.29.38,1.64,1.64,0,0,1,.09.58,1.32,1.32,0,0,1-.13.62,1,1,0,0,1-.34.39.86.86,0,0,1-.47.14.82.82,0,0,1-.3-.07,1.5,1.5,0,0,1-.32-.19v1.15Zm.84-1.1a.66.66,0,0,0,.36-.11.74.74,0,0,0,.25-.34,1.22,1.22,0,0,0,.1-.49,1.64,1.64,0,0,0-.07-.46.62.62,0,0,0-.2-.31.61.61,0,0,0-.39-.12.64.64,0,0,0-.31.09,1.43,1.43,0,0,0-.35.25V11a1,1,0,0,0,.33.21A1,1,0,0,0,30.47,11.26Z"/><path class="cls-1" d="M32.33,11.47a.38.38,0,0,1-.16,0,.25.25,0,0,1-.09-.13.56.56,0,0,1,0-.2V8.24h.23v2.88a.16.16,0,0,0,0,.11.09.09,0,0,0,.07,0h.07l0,.18-.07,0Z"/><path class="cls-1" d="M33.58,11.47a.64.64,0,0,1-.31-.07.51.51,0,0,1-.22-.19.62.62,0,0,1,.24-.87,2.67,2.67,0,0,1,1-.26,1.55,1.55,0,0,0,0-.31.43.43,0,0,0-.15-.24.41.41,0,0,0-.31-.1,1,1,0,0,0-.38.08,2.48,2.48,0,0,0-.29.17l-.1-.18.2-.12.28-.11a1.12,1.12,0,0,1,.32,0,.64.64,0,0,1,.41.11.57.57,0,0,1,.22.3,1.33,1.33,0,0,1,.06.42v1.36h-.19l0-.28h0a1.56,1.56,0,0,1-.34.23A.82.82,0,0,1,33.58,11.47Zm.05-.2a.81.81,0,0,0,.34-.08,1.77,1.77,0,0,0,.35-.25v-.69a2.83,2.83,0,0,0-.66.13.76.76,0,0,0-.36.2.4.4,0,0,0-.1.28.38.38,0,0,0,.12.32A.54.54,0,0,0,33.63,11.27Z"/><path class="cls-1" d="M35.24,12.38l-.12,0a.15.15,0,0,1-.1,0l0-.19.08,0h.1a.39.39,0,0,0,.32-.16,1.51,1.51,0,0,0,.21-.38l0-.19L35,9.28h.25l.5,1.31.11.3c0,.1.08.2.11.3h0c0-.1.07-.2.1-.3l.1-.3.43-1.31h.24L36,11.66a1.87,1.87,0,0,1-.16.35.87.87,0,0,1-.24.26A.55.55,0,0,1,35.24,12.38Z"/><g class="cls-2"><polygon class="cls-3" points="11.14 10.58 3.38 10.58 3.38 8.65 3.63 8.65 3.63 10.33 11.14 10.33 11.14 10.58"/></g><polygon class="cls-4" points="43.99 9.56 48.68 4.87 43.99 0.17 43.99 9.56"/></svg>
\ No newline at end of file
diff --git a/src/assets/img/equipment/replay02.svg b/src/assets/img/equipment/replay02.svg
new file mode 100644
index 0000000..62e067b
--- /dev/null
+++ b/src/assets/img/equipment/replay02.svg
@@ -0,0 +1 @@
+<svg id="圖層_1" data-name="圖層 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.66 12.66"><defs><style>.cls-1{opacity:0.8;}.cls-2{fill:#35eded;}.cls-3{fill:#ffe448;}</style></defs><g class="cls-1"><path class="cls-2" d="M4.89.76a5.87,5.87,0,0,0-1.48.62L2.87.84l-2,2,.54.54A5.87,5.87,0,0,0,.76,4.89H0V6.14H2.25A4.07,4.07,0,0,1,6.14,2.25V0H4.89Z"/><path class="cls-2" d="M10.41,6.51a4.09,4.09,0,0,1-3.9,3.9v2.25H7.76v-.77a5.57,5.57,0,0,0,1.49-.61l.54.54,2-2-.54-.54a5.57,5.57,0,0,0,.61-1.49h.77V6.51Z"/></g><g class="cls-1"><path class="cls-3" d="M2.25,6.51H0V7.76H.76a5.94,5.94,0,0,0,.62,1.49l-.54.54,2,2,.54-.54a5.5,5.5,0,0,0,1.48.61v.77H6.14V10.41A4.08,4.08,0,0,1,2.25,6.51Z"/><path class="cls-3" d="M11.89,4.89a5.5,5.5,0,0,0-.61-1.48l.54-.54-2-2-.54.54A5.94,5.94,0,0,0,7.76.76V0H6.51V2.25a4.08,4.08,0,0,1,3.9,3.89h2.25V4.89Z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/equipment/state-background.svg b/src/assets/img/equipment/state-background.svg
new file mode 100644
index 0000000..8334698
--- /dev/null
+++ b/src/assets/img/equipment/state-background.svg
@@ -0,0 +1 @@
+<svg id="圖層_1" data-name="圖層 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.73 25.44"><defs><style>.cls-1{opacity:0.8;}.cls-2{fill:#64ed81;}</style></defs><g class="cls-1"><path class="cls-2" d="M2.52,4.79A2.4,2.4,0,0,1,2.52,0,2.42,2.42,0,0,1,4.84,1.79h8.89V3H4.84A2.42,2.42,0,0,1,2.52,4.79Zm0-4.54A2.15,2.15,0,1,0,4.61,2.84l0-.09h8.84V2H4.64l0-.1A2.15,2.15,0,0,0,2.52.25Zm0,3.58A1.44,1.44,0,1,1,4,2.39,1.44,1.44,0,0,1,2.52,3.83Zm0-2.62A1.19,1.19,0,1,0,3.71,2.39,1.18,1.18,0,0,0,2.52,1.21Z"/><path class="cls-2" d="M2.48,11.67a2.4,2.4,0,1,1,2.32-3h8.9V9.88H4.8A2.41,2.41,0,0,1,2.48,11.67Zm0-4.54a2.15,2.15,0,1,0,2.1,2.6l0-.1h8.85V8.92H4.6l0-.09A2.16,2.16,0,0,0,2.48,7.13Zm0,3.59A1.44,1.44,0,1,1,3.92,9.28,1.44,1.44,0,0,1,2.48,10.72Zm0-2.63A1.19,1.19,0,1,0,3.67,9.28,1.18,1.18,0,0,0,2.48,8.09Z"/><path class="cls-2" d="M2.43,18.55a2.39,2.39,0,1,1,2.31-3h8.9v1.2H4.74A2.4,2.4,0,0,1,2.43,18.55Zm0-4.53a2.14,2.14,0,1,0,2.09,2.59l0-.1h8.85v-.7H4.54l0-.1A2.15,2.15,0,0,0,2.43,14Zm0,3.58a1.44,1.44,0,1,1,1.44-1.44A1.45,1.45,0,0,1,2.43,17.6Zm0-2.63a1.19,1.19,0,0,0,0,2.38,1.19,1.19,0,1,0,0-2.38Z"/><path class="cls-2" d="M2.39,25.44a2.4,2.4,0,1,1,2.32-3H13.6v1.21H4.71A2.41,2.41,0,0,1,2.39,25.44Zm0-4.54a2.15,2.15,0,1,0,2.1,2.59l0-.09h8.84v-.71H4.51l0-.1A2.15,2.15,0,0,0,2.39,20.9Zm0,3.58A1.44,1.44,0,1,1,3.83,23,1.43,1.43,0,0,1,2.39,24.48Zm0-2.63A1.19,1.19,0,1,0,3.58,23,1.19,1.19,0,0,0,2.39,21.85Z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/equipment/state-title.svg b/src/assets/img/equipment/state-title.svg
new file mode 100644
index 0000000..6202385
--- /dev/null
+++ b/src/assets/img/equipment/state-title.svg
@@ -0,0 +1 @@
+<svg id="圖層_1" data-name="圖層 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.63 9.62"><defs><style>.cls-1{opacity:0.8;}.cls-2{fill:#35eded;}.cls-3{fill:#64ed81;}</style></defs><g class="cls-1"><rect class="cls-2" y="7.2" width="44.63" height="0.5"/></g><rect class="cls-3" x="34.71" y="4.68" width="9.62" height="0.25"/><rect class="cls-3" x="39.4" width="0.25" height="9.62"/></svg>
\ No newline at end of file
diff --git a/src/assets/img/equipment/table-item-w.svg b/src/assets/img/equipment/table-item-w.svg
new file mode 100644
index 0000000..74bbc0c
--- /dev/null
+++ b/src/assets/img/equipment/table-item-w.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16.1 11.6" style="enable-background:new 0 0 16.1 11.6;" xml:space="preserve">
+
+<polygon class="st0" fill="currentColor" points="0,11.6 10.3,11.6 16.1,5.8 10.3,0 0,0 5.8,5.8 "/>
+</svg>
diff --git a/src/components/chart/EffectScatter.vue b/src/components/chart/EffectScatter.vue
index 0be1380..3ff8e1c 100644
--- a/src/components/chart/EffectScatter.vue
+++ b/src/components/chart/EffectScatter.vue
@@ -8,7 +8,10 @@ const props = defineProps({
   className: String,
   id: String,
   svg: Object,
-  getCoordinate: Function,
+  getCoordinate: {
+    type: Function,
+    default: null
+  },
 });
 
 let chart = ref(null);
@@ -22,33 +25,23 @@ async function updateSvg(svg, option) {
   axios.get(svg.path).then(({ data }) => {
     echarts.registerMap(svg.full_name, { svg: data });
     chart.value.setOption(option);
-    chart.value.getZr().on("click", function (params) {
-      var pixelPoint = [params.offsetX, params.offsetY];
-      var dataPoint = chart.value.convertFromPixel({ geoIndex: 0 }, pixelPoint);
-      currentClickPosition.value = dataPoint;
-      props.getCoordinate(dataPoint);
-      chart.value.setOption({
-        series: {
-          data: [dataPoint],
-        },
+    if (props.getCoordinate) {
+      chart.value.getZr().on("click", function (params) {
+        var pixelPoint = [params.offsetX, params.offsetY];
+        var dataPoint = chart.value.convertFromPixel({ geoIndex: 0 }, pixelPoint);
+        currentClickPosition.value = dataPoint;
+        props.getCoordinate(dataPoint);
+        chart.value.setOption({
+          series: {
+            data: [dataPoint],
+          },
+        });
+
       });
-      console.log(chart.value.getOption());
-    });
+    }
+
   });
   console.log("updateSvg", svg.path);
-  // fetch(svg.path)
-  //   .then((res) => console.log(res))
-  //   .then(function (svg) {
-  //     console.log(svg);
-  //     // echarts.registerMap(svg.full_name, { svg });
-  //     // chart.setOption(option);
-  //     // chart.getZr().on("click", function (params) {
-  //     //   var pixelPoint = [params.offsetX, params.offsetY];
-  //     //   var dataPoint = curChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
-  //     //   console.log(dataPoint);
-  //     //   currentClickPosition.value = dataPoint;
-  //     // });
-  //   });
 }
 
 function init() {
@@ -69,7 +62,7 @@ defineExpose({
 });
 </script>
 <template>
-  <div :id="id" class="min-h-[500px] max-h-fit w-full" ref="dom"></div>
+  <div :id="id" class="min-h-[70vh] max-h-fit w-full bg-white" ref="dom"></div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/customUI/ButtonGroup.vue b/src/components/customUI/ButtonGroup.vue
index 3c4621d..4a90fd6 100644
--- a/src/components/customUI/ButtonGroup.vue
+++ b/src/components/customUI/ButtonGroup.vue
@@ -7,28 +7,22 @@ const props = defineProps({
   withLine: Boolean,
   // this is for change active button
   onclick: Function,
+  className: String
 });
 </script>
 
 <template>
   <div class="flex flex-wrap text-white items-center">
-    <button
-      v-for="item in items"
-      :class="
-        twMerge(
-          'btn my-1',
-          item.active ? 'btn-success' : 'btn-outline-success',
-          withLine ? 'line' : 'mx-2 first:ml-0 '
-        )
-      "
-      :disabled="item.disabled"
-      :key="item.key"
-      @click.stop.prevent="
-        (e) => {
+    <button v-for="item in items" :class="twMerge(
+      'btn my-1',
+      item.active ? 'btn-success' : 'btn-outline-success',
+      withLine ? 'line' : 'mx-2 first:ml-0 ',
+      className
+    )
+      " :disabled="item.disabled" :key="item.key" @click.stop.prevent="(e) => {
           item.onClick ? item.onClick(e, item) : onclick(e, item);
         }
-      "
-    >
+        ">
       <slot name="buttonContent" v-bind="{ record: item }">
         {{ item.title }}
       </slot>
diff --git a/src/components/forge/ForgeForSystem.vue b/src/components/forge/ForgeForSystem.vue
new file mode 100644
index 0000000..4e8d7ce
--- /dev/null
+++ b/src/components/forge/ForgeForSystem.vue
@@ -0,0 +1,257 @@
+<script setup>
+import {
+  ref,
+  onMounted,
+  defineProps,
+  computed,
+  onUnmounted,
+  watch,
+  provide,
+} from "vue";
+import { getUrn, getAccessToken } from "@/apis/forge";
+import { twMerge } from "tailwind-merge";
+import hexToRgb from "@/util/hexToRgb";
+import getModalPosition from "@/util/getModalPosition";
+import useSystemStatusByBaja from "@/hooks/baja/useSystemStatusByBaja";
+import ForgeInfoModal from "./ForgeInfoModal.vue";
+import useAlarmStore from "@/stores/useAlarmStore";
+import useForgeSprite from "@/hooks/forge/useForgeSprite";
+
+const props = defineProps({
+  initialData: Object,
+  cubeStyle: {
+    type: Object,
+    default: {
+      right: 0,
+      top: 0,
+    },
+  },
+});
+
+const heat_bar_isShow = ref(false);
+const updateHeatBarIsShow = (isShow) => {
+  heat_bar_isShow.value = isShow;
+};
+
+const { updateDataVisualization, createSprites, hideAllObjects } = useForgeSprite()
+
+const forgeDom = ref(null);
+
+const initViewer = (container) => {
+  return new Promise(function (resolve, reject) {
+    // Autodesk.Viewing.Initializer({ getAccessToken }, function () {
+    //   const config = {
+    //     extensions: ["Autodesk.DataVisualization", "Autodesk.DocumentBrowser"],
+    //   };
+    //   let viewer = new Autodesk.Viewing.GuiViewer3D(container, config);
+    //   Autodesk.Viewing.Private.InitParametersSetting.alpha = true;
+    //   viewer.start();
+    //   resolve(viewer);
+    // });
+
+    Autodesk.Viewing.Initializer(
+      {
+        env: "Local",
+        language: "en",
+      },
+      function () {
+        const config = {
+          extensions: [
+            "Autodesk.DataVisualization",
+            "Autodesk.DocumentBrowser",
+          ],
+        };
+        let viewer = new Autodesk.Viewing.GuiViewer3D(container, config);
+        Autodesk.Viewing.Private.InitParametersSetting.alpha = true;
+        viewer.start();
+        resolve(viewer);
+      }
+    );
+  });
+};
+
+// 使用本地 .svf 文件加載模型
+const loadModel = (viewer, filePath) => {
+  return new Promise((resolve, reject) => {
+    viewer.loadModel(
+      filePath,
+      {},
+      (model) => {
+        viewer.impl.invalidate(true);
+        viewer.fitToView();
+        resolve(model);
+        console.log("模型加載完成");
+      },
+      reject
+    );
+  });
+};
+
+// const loadModel = (viewer, urn) => {
+//   return new Promise(function (resolve, reject) {
+//     async function onDocumentLoadSuccess(doc) {
+//       viewer.setGroundShadow(false);
+//       viewer.impl.renderer().setClearAlpha(0); //clear alpha channel
+//       viewer.impl.glrenderer().setClearColor(0xffffff, 0); //set transparent background, color code does not matter
+//       viewer.impl.invalidate(true); //trigger rendering
+
+//       const documentNode = await viewer.loadDocumentNode(
+//         doc,
+//         doc.getRoot().getDefaultGeometry()
+//       );
+//       updateDataVisualization(viewer)
+//       resolve(documentNode);
+//     }
+//     function onDocumentLoadFailure(code, message, errors) {
+//       reject({ code, message, errors });
+//     }
+//     Autodesk.Viewing.Document.load(
+//       "urn:" + urn,
+//       onDocumentLoadSuccess,
+//       onDocumentLoadFailure
+//     );
+//   });
+// };
+
+const initForge = async () => {
+  // getUrn().then((res) => {
+  //   if (!res.isSuccess) return;
+
+  //   initViewer(forgeDom.value).then((viewer) => {
+  //     loadModel(viewer, res.data[0].urn_3D).then(() => {
+  //       viewer.addEventListener(
+  //         Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
+  //         async function () {
+  //           console.log(
+  //             "Autodesk.Viewing.GEOMETRY_LOADED_EVENT",
+  //             viewer.isLoadDone()
+  //           );
+  //           // updateForgeViewer(viewer);
+  //           createSprites()
+  //           hideAllObjects();
+  //         }
+  //       );
+  //       viewer.addEventListener(
+  //         Autodesk.Viewing.CAMERA_CHANGE_EVENT,
+  //         function (e) {
+  //           // viewer.isLoadDone() &&
+  //           //   updateDbidPosition(this, subscribeData.value);
+  //           console.log(
+  //             "camera position changed: ",
+  //             NOP_VIEWER.navigation.getTarget(),
+  //             e.camera.position
+  //           );
+  //         }
+  //       );
+
+  //     });
+  //   });
+  // });
+  const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL; 
+  const viewer = await initViewer(forgeDom.value)
+  const filePath = `${FILE_BASEURL}/upload/forge/0.svf`;
+  await loadModel(viewer, filePath)
+};
+
+onMounted(() => {
+  console.log("Forge 加載");
+  initForge();
+});
+
+// 傳遞目前點擊資訊
+const currentInfoModalData = ref(null);
+const isMobile = (pointerType) => {
+  return pointerType !== "mouse"; // is desktop
+};
+const getCurrentInfoModalData = (e, position, value) => {
+  const mobile = isMobile(e.pointerType);
+  currentInfoModalData.value = {
+    initPos: mobile
+      ? { left: `50%`, top: `50%` }
+      : { left: `${position.left}px`, top: `${position.top}px` },
+    value,
+    isMobile: mobile,
+  };
+  forge_info_modal.showModal();
+};
+onUnmounted(() => {
+  console.log("Forge 銷毀");
+
+  NOP_VIEWER.tearDown();
+});
+</script>
+
+<template>
+  <ForgeInfoModal :data="currentInfoModalData" />
+  <div id="forge-preview" ref="forgeDom" class="relative w-full h-full min-h-full">
+    <div v-show="heat_bar_isShow" class="absolute z-10 heatbar">
+      <div class="w-40 flex justify-between text-[10px] mb-1">
+        <span class="text-gradient-1">10 °C</span>
+        <span class="text-gradient-2">20 °C</span>
+        <span class="text-gradient-3">30 °C</span>
+        <span class="text-gradient-4">40 °C</span>
+      </div>
+      <div class="w-40 h-3" style="
+            background: linear-gradient(
+              to right,
+              #0000ff 0%,
+              #00ff00 33%,
+              #ffff00 66%,
+              #ff0000 100%
+            );
+          "></div>
+    </div>
+    <!-- label -->
+    <!-- https://github.com/augustogoncalves/forge-plant-operation/blob/master/forgeSample/wwwroot/js/iconExtension.js -->
+    <!-- https://github.com/dukedhx/viewer-iot-react-feathersjs/blob/master/src/client/iconExtension.js -->
+
+    <label v-for="value in subscribeData" :key="key" :data-dbid="value.forge_dbid" :class="twMerge(
+      `after:border-t-[${value.currentColor}]`,
+      'flex items-center justify-center h-12 -translate-x-1/2 -translate-y-1/5 absolute z-50 px-5 py-4 text-center rounded-md text-lg border-2 border-white',
+      'after:absolute after:border-t-[10px] after:border-x-[12px] after:border-x-transparent after:-bottom-[8px] after:left-1/2 after:-translate-x-1/2 ',
+      'before:absolute before:border-t-[12px] before:border-x-[14px] before:border-x-transparent before:-bottom-[12px] before:left-1/2 before:-translate-x-1/2 before:border-white'
+    )
+      " :style="{
+        left: `${Math.floor(value.device_coordinate_3d.x)}px`,
+        top: `${Math.floor(value.device_coordinate_3d.y) - 100}px`,
+        display: value.is_show,
+        backgroundColor: value.currentColor,
+      }" @click.prevent="(e) =>
+        getCurrentInfoModalData(
+          e,
+          { left: e.clientX, top: e.clientY },
+          value
+        )
+        ">
+      <span class="mr-2">{{ value.full_name }}</span>
+      <span v-if="value.alarmMsg">{{ value.alarmMsg }}</span>
+      <span v-else>{{ value.show_value }}</span>
+    </label>
+  </div>
+
+</template>
+
+<style lang="css">
+.adsk-viewing-viewer {
+  background-color: transparent !important;
+}
+
+#guiviewer3d-toolbar {
+  display: none;
+  bottom: 200px;
+}
+
+.viewcubeWrapper {
+  right: v-bind("`${props.cubeStyle.right}%`") !important;
+  top: v-bind("`${props.cubeStyle.top}%`") !important;
+}
+
+.homeViewWrapper {
+  transform: scale(0.9) !important;
+}
+
+.heatbar {
+  right: v-bind("`${props.cubeStyle.right + 2}%`") !important;
+  top: 0% !important;
+}
+</style>
diff --git a/src/components/navbar/NavbarItem.vue b/src/components/navbar/NavbarItem.vue
index 6324db8..5dac885 100644
--- a/src/components/navbar/NavbarItem.vue
+++ b/src/components/navbar/NavbarItem.vue
@@ -17,9 +17,9 @@ const iniFroList = async () => {
     res.data.map((d) =>
       AUTHPAGES.find(({ authCode }) => authCode === d.authCode)
         ? {
-            ...d,
-            ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
-          }
+          ...d,
+          ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
+        }
         : d
     )
   );
@@ -43,6 +43,8 @@ const onClose = () => {
 };
 
 const navigateToSub = (sub) => {
+  // buildingStore.selectedSystem = sub;
+  onClose()
   // console.log("navigateToSub", sub);
   // let pageAct = JSON.parse(sessionStorage.getItem("pageAct"));
   // pageAct = {
@@ -119,24 +121,20 @@ onMounted(() => {
       </router-link>
     </li>
   </ul>
-  <a-drawer
-    :width="200"
-    placement="left"
-    :open="open"
-    :closable="false"
-    @close="onClose"
-    class="sub-drawer"
-    :maskStyle="{ opacity: 0.5 }"
-    :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }"
-  >
+  <a-drawer :width="200" placement="left" :open="open" :closable="false" @close="onClose" class="sub-drawer"
+    :maskStyle="{ opacity: 0.5 }" :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }">
     <ul>
-      <li
-        v-for="sub in buildingStore.subSys"
-        :key="sub.sub_system_tag"
-        @click.prevent="() => navigateToSub(sub)"
-        class="text-xl text-center py-3 hover:bg-black hover:text-info"
-      >
-        {{ sub.full_name }}
+      <li v-for="sub in buildingStore.subSys" :key="sub.sub_system_tag"
+        class="group text-xl text-center py-3 hover:bg-black" @click="() => navigateToSub(sub)">
+
+
+        <router-link
+          :to="{ name: 'sub_system', params: { main_system_id: sub.main_system_tag, sub_system_id: sub.sub_system_tag }, }"
+          type="link" class="group-hover:text-info">
+
+          {{ sub.full_name }}
+        </router-link>
+
       </li>
     </ul>
   </a-drawer>
diff --git a/src/constant/authPage.js b/src/constant/authPage.js
index 4b5ae86..cd22406 100644
--- a/src/constant/authPage.js
+++ b/src/constant/authPage.js
@@ -7,7 +7,7 @@ export const AUTHPAGES = [
   {
     authCode: "PF1",
     icon: "tv",
-    navigate: "/",
+    navigate: "/system",
   },
   {
     authCode: "PF2",
diff --git a/src/hooks/baja/useAlarmData.js b/src/hooks/baja/useAlarmData.js
index 4895518..8562df3 100644
--- a/src/hooks/baja/useAlarmData.js
+++ b/src/hooks/baja/useAlarmData.js
@@ -31,7 +31,7 @@ export default function useAlarmData() {
               timer = null;
             },
             each: (record) => {
-              const alarmDisplayName = record.get("alarmData").get("sourceName");
+              let alarmDisplayName = record.get("alarmData").get("sourceName");
               alarmDisplayName = alarmDisplayName.replace(/\$2d/g, "_");  // 檢查並替換 $2d 為 _
               const sourceTmp = alarmDisplayName.split("_");
               const bfName = sourceTmp[1] + "-" + sourceTmp[4];
diff --git a/src/hooks/baja/useSystemStatusByBaja.js b/src/hooks/baja/useSystemStatusByBaja.js
index 35ef0ea..e8ba4cf 100644
--- a/src/hooks/baja/useSystemStatusByBaja.js
+++ b/src/hooks/baja/useSystemStatusByBaja.js
@@ -291,6 +291,7 @@ export default function useSystemStatusByBaja(updateHeatBarIsShow) {
   };
 
   const fitToView = () => {
+    if(!searchParams.value.camera_position) return
     const { x, y, z } = JSON.parse(searchParams.value.camera_position);
     const newPosition = new THREE.Vector3(x, y, z); //!<<< 相机的新位置
     
diff --git a/src/hooks/forge/useForgeHeatmap.js b/src/hooks/forge/useForgeHeatmap.js
new file mode 100644
index 0000000..e31c3c2
--- /dev/null
+++ b/src/hooks/forge/useForgeHeatmap.js
@@ -0,0 +1,47 @@
+export default function useForgeHeatmap(){
+
+  const createHeatMap = async (heatMapName) => {
+    const {
+      SurfaceShadingData,
+      SurfaceShadingPoint,
+      SurfaceShadingNode,
+      SurfaceShadingGroup,
+    } = Autodesk.DataVisualization.Core;
+    const shadingGroup = new SurfaceShadingGroup(`iot_heatmap_${heatMapName}`);
+    const rooms = new Map();
+
+    for (const { id, roomDbId, position, sensorTypes } of deviceList.value) {
+      if (!id || roomDbId == -1 || !roomDbId) {
+        continue;
+      }
+
+      if (!rooms.has(roomDbId)) {
+        const room = new SurfaceShadingNode(id, roomDbId);
+        shadingGroup.addChild(room);
+        rooms.set(roomDbId, room);
+      }
+      const room = rooms.get(roomDbId);
+      room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes));
+    }
+
+    const shadingData = new SurfaceShadingData();
+    shadingData.addChild(shadingGroup);
+    shadingData.initialize(forgeViewer.value?.model);
+
+    await dataVizExtension.value.setupSurfaceShading(
+      forgeViewer.value.model,
+      shadingData
+    );
+    dataVizExtension.value.registerSurfaceShadingColors(
+      "temperature",
+      [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]
+    );
+    dataVizExtension.value.renderSurfaceShading(
+      `iot_heatmap_${heatMapName}`,
+      "temperature",
+      getSensorValue
+    );
+
+    console.log(dataVizExtension.value);
+  };
+}
\ No newline at end of file
diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js
new file mode 100644
index 0000000..e764aea
--- /dev/null
+++ b/src/hooks/forge/useForgeSprite.js
@@ -0,0 +1,101 @@
+import { watch, inject, markRaw, ref } from "vue";
+import useAlarmStore from "@/stores/useAlarmStore";
+import hexToRgb from "@/util/hexToRgb";
+
+export default function useForgeSprite() {
+  const store = useAlarmStore();
+  const { subscribeData } = inject("system_deviceList");
+  const forgeViewer = ref(null);
+  const dataVizExtn = ref(null);
+  const updateDataVisualization = async (viewer) => {
+    if (!forgeViewer.value) {
+      forgeViewer.value = markRaw(viewer);
+    }
+
+    const dataVisualization = await NOP_VIEWER.loadExtension(
+      "Autodesk.DataVisualization"
+    );
+    dataVizExtn.value = markRaw(dataVisualization);
+  };
+
+  const onSpriteClicked = (event) => {
+    event.hasStopped = true;
+    const data = deviceList.value.find((d) => d.spriteDbId === event.dbId);
+    modalContent.value = data;
+    store.getDbIdStore(data.forge_dbid);
+    toggleModal(event.originalEvent);
+  };
+  // 創建 sprites
+  const createSprites = async () => {
+    const DataVizCore = Autodesk.DataVisualization.Core;
+    const viewableType = DataVizCore.ViewableType.SPRITE;
+    let spriteColor = new THREE.Color(0xffffff);
+    const BASEURL = import.meta.env.VITE_FORGE_BASEURL;
+    const spriteIconUrl = `${BASEURL}/hotspot.svg`;
+    const style = new DataVizCore.ViewableStyle(
+      viewableType,
+      spriteColor,
+      spriteIconUrl
+    );
+    const viewableData = new DataVizCore.ViewableData();
+    viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
+    subscribeData.value?.forEach((d, index) => {
+      const position = d.device_coordinate_3d;
+      style.color = new THREE.Color(hexToRgb(d.device_normal_color));
+      const viewable = new DataVizCore.SpriteViewable(
+        position,
+        style,
+        d.spriteDbId
+      );
+      viewableData.addViewable(viewable);
+    });
+    await viewableData.finish();
+    dataVizExtn.value.addViewables(viewableData);
+
+    NOP_VIEWER.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
+    NOP_VIEWER.addEventListener(
+      Autodesk.Viewing.SELECTION_CHANGED_EVENT,
+      onSpriteClicked
+    );
+  };
+
+  const fitToView = () => {
+    const { x, y, z } = JSON.parse(searchParams.value.camera_position);
+    const newPosition = new THREE.Vector3(x, y, z); //!<<< 相机的新位置
+
+    const {
+      x: x1,
+      y: y1,
+      z: z1,
+    } = JSON.parse(searchParams.value.target_position); //!<<< 计算新焦点位置
+    const newTarget = new THREE.Vector3(x1, y1, z1); //!<<< 焦點的新位置
+
+    NOP_VIEWER.navigation.getCamera().setView({
+      position: newPosition.clone(),
+      target: newTarget.clone(),
+    });
+    setTimeout(() => {
+      updateDbidPosition(NOP_VIEWER, subscribeData.value);
+    }, 700);
+  };
+
+  const hideAllObjects = () => {
+    const tree = NOP_VIEWER.model?.getData().instanceTree;
+    const allDbIdsStr = Object.keys(tree.nodeAccess.dbIdToIndex);
+    for (var i = 0; i < allDbIdsStr.length; i++) {
+      NOP_VIEWER.hide(parseInt(allDbIdsStr[i]));
+    }
+
+    subscribeData.value.forEach((value, index) => {
+      NOP_VIEWER.show(value.forge_dbid);
+    });
+
+    NOP_VIEWER.impl.invalidate(true);
+  };
+
+  return {
+    createSprites,
+    updateDataVisualization,
+    hideAllObjects,
+  };
+}
diff --git a/src/router/index.js b/src/router/index.js
index 9f1f5ac..a272662 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,8 +11,11 @@ import EnergyManagement from "@/views/energyManagement/EnergyManagement.vue";
 import Login from "@/views/login/Login.vue";
 import useUserInfoStore from "@/stores/useUserInfoStore";
 import useGetCookie from "@/hooks/useGetCookie";
+import System from "@/views/system/System.vue";
+import SystemFloor from "@/views/system/SystemFloor.vue";
 
 import Test from "@/views/Test.vue";
+import SystemMain from "@/views/system/SystemMain.vue";
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -29,6 +32,23 @@ const router = createRouter({
       name: "dashboard",
       component: Dashboard,
     },
+    {
+      path: "/system/:main_system_id/:sub_system_id",
+      name: "system",
+      component: System,
+      children: [
+        {
+          path: "",
+          name: "sub_system",
+          component: SystemMain,
+        },
+        {
+          path: "floor/:floor_id",
+          name: "floor",
+          component: SystemFloor,
+        },
+      ],
+    },
     {
       path: "/historyData",
       name: "history",
diff --git a/src/stores/useBuildingStore.js b/src/stores/useBuildingStore.js
index c46c264..5a6987c 100644
--- a/src/stores/useBuildingStore.js
+++ b/src/stores/useBuildingStore.js
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { ref, computed } from "vue";
+import { useRoute } from "vue-router";
 
 const useBuildingStore = defineStore("buildingInfo", () => {
   // 所有棟別
@@ -35,12 +36,21 @@ const useBuildingStore = defineStore("buildingInfo", () => {
     return subPages;
   });
 
+  const route = useRoute();
+  const selectedSystem = computed(() => {
+    if (route.params.sub_system_id && subSys.value.length > 0) {
+      return subSys.value.find((s) => s.key === route.params.sub_system_id);
+    }
+    return null;
+  });
+
   return {
     buildings,
     selectedBuilding,
     mainSubSys,
     mainSys,
     subSys,
+    selectedSystem,
   };
 });
 
diff --git a/src/views/system/System.vue b/src/views/system/System.vue
new file mode 100644
index 0000000..56f617b
--- /dev/null
+++ b/src/views/system/System.vue
@@ -0,0 +1,151 @@
+<script setup>
+import { RouterView, useRoute } from 'vue-router';
+import { computed, watch, provide, ref } from "vue";
+import SystemFloorBar from './components/SystemFloorBar.vue';
+import useBuildingStore from "@/stores/useBuildingStore";
+import ForgeForSystem from "@/components/forge/ForgeForSystem.vue";
+import { getSystemDevices } from "@/apis/system";
+import SystemSubBar from './components/SystemSubBar.vue';
+
+const buildingStore = useBuildingStore()
+
+const statusList = computed(() => {
+  const sub = buildingStore.selectedSystem
+
+  if (sub) {
+    return {
+      device_normal_color: sub.device_normal_color,
+      device_normal_text: sub.device_normal_text,
+      device_close_color: sub.device_close_color,
+      device_close_text: sub.device_close_text,
+      device_error_color: sub.device_error_color,
+      device_error_text: sub.device_error_text
+    }
+  }
+  return null
+})
+
+const raw_data = ref([])
+const data = ref([])
+const route = useRoute()
+
+const getData = async () => {
+  const res = await getSystemDevices({
+    sub_system_tag: route.params.sub_system_id,
+    building_tag: buildingStore.selectedBuilding?.building_tag,
+  })
+  const data = res.data.map(d => ({ ...d, key: d.full_name }));
+  raw_data.value = data
+  data.value = data
+}
+
+const subscribeData = ref([]);
+
+const getSubPoint = (normal, close, error, sub_points) => {
+  let points = {
+    ...Object.fromEntries(sub_points.map((p) => [p, ""])),
+  };
+  if (normal) points[normal] = "";
+  if (close) points[close] = "";
+  if (error) points[error] = "";
+  return points;
+};
+
+const getSubData = (value) => {
+  let items = [];
+  value.forEach((device) => {
+    items = [
+      ...items,
+      ...device.device_list.map((d, index) => ({
+        ...d,
+        forge_dbid: parseInt(d.forge_dbid),
+        device_coordinate_3d: d.device_coordinate_3d
+          ? JSON.parse(d.device_coordinate_3d)
+          : { x: 0, y: 0 },
+        // points: getSubPoint(
+        //   d.device_normal_point_name,
+        //   d.device_close_point_name,
+        //   d.device_error_point_name,
+        //   d.points
+        // ),
+        alarmMsg: "",
+        is_show: true,
+        currentColor: d.device_normal_point_color,
+        spriteDbId: 10 + index,
+      })),
+    ];
+  });
+  data.value = raw_data.value;
+  subscribeData.value = items;
+}
+
+watch(raw_data, (newValue) => {
+  updateDataByGas("all")
+});
+
+const updateDataByGas = (gas) => {
+  console.log(gas)
+  if (gas === "all") {
+    getSubData(raw_data.value)
+  } else {
+    data.value = raw_data.value.map((d) => ({
+      ...d,
+      device_list: d.device_list.filter(({ points }) => points.some(({ points: p }) => p === gas))
+    }))
+  }
+}
+
+watch([() => route, () => buildingStore.selectedBuilding], ([newRoute, newBuilding]) => {
+  if (newBuilding && newRoute.params.sub_system_id) {
+    getData()
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+
+const currentFloor = ref(null);
+
+const updateCurrentFloor = (floor) => {
+  currentFloor.value = floor;
+}
+
+provide("system_deviceList", { data, subscribeData, currentFloor, updateCurrentFloor, updateDataByGas })
+
+</script>
+
+<template>
+  <SystemFloorBar />
+  <div class="grid grid-cols-2 gap-5 mt-8 mb-4">
+    <div class="col-span-1 h-[80vh] flex flex-col justify-between">
+      <div>
+        <div class="flex mb-4 items-center">
+          <span class="flex items-center mr-3" v-if="statusList?.device_normal_text">
+            <span class="w-7 h-7 rounded-full inline-block mr-1"
+              :style="{ backgroundColor: statusList.device_normal_color }"></span>
+            <span>{{ statusList.device_normal_text }}</span>
+          </span>
+          <span class="flex items-center mr-3" v-if="statusList?.device_close_text">
+            <span class="w-7 h-7 rounded-full inline-block mr-1"
+              :style="{ backgroundColor: statusList.device_close_color }"></span>
+            <span>{{ statusList.device_close_text }}</span>
+          </span>
+          <span class="flex items-center mr-3" v-if="statusList?.device_error_text">
+            <span class="w-7 h-7 rounded-full inline-block mr-1"
+              :style="{ backgroundColor: statusList.device_error_color }"></span>
+            <span>{{ statusList.device_error_text }}</span>
+          </span>
+        </div>
+        <SystemSubBar class="mt-2 mb-4" />
+      </div>
+      <div class="max-h-[75vh] pr-2 overflow-y-auto">
+        <RouterView />
+      </div>
+    </div>
+    <div class="col-span-1 h-full">
+      <ForgeForSystem :initialData="{}" />
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped></style>
\ No newline at end of file
diff --git a/src/views/system/SystemFloor.vue b/src/views/system/SystemFloor.vue
new file mode 100644
index 0000000..e84b1a0
--- /dev/null
+++ b/src/views/system/SystemFloor.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import EffectScatter from "@/components/chart/EffectScatter.vue";
+import { inject, ref, watch } from 'vue';
+import { twMerge } from 'tailwind-merge';
+const route = useRoute()
+
+const { currentFloor, subscribeData } = inject("system_deviceList")
+const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
+
+const asset_floor_chart = ref(null);
+const defaultOption = (map, data = []) => ({
+  tooltip: {},
+  geo: {
+    tooltip: {
+      show: false,
+    },
+    map,
+    roam: true, // 一定要关闭拖拽
+  },
+  series: {
+    type: "effectScatter",
+    coordinateSystem: "geo",
+    geoIndex: 0,
+    symbolSize: 10,
+    itemStyle: {
+      color: "#b02a02",
+    },
+    encode: {
+      tooltip: 2,
+    },
+    data,
+  },
+});
+
+watch([() => currentFloor, () => asset_floor_chart], ([newValue, newChart]) => {
+  if (newValue.value && newChart.value) {
+    asset_floor_chart.value.updateSvg(
+      {
+        full_name: newValue.value?.title,
+        path: `${FILE_BASEURL}/upload/floor_map/${newValue.value.map_url}`,
+      },
+
+      defaultOption(newValue.value?.title, subscribeData.value.filter(d => d.device_coordinate).map(d => JSON.parse(d.device_coordinate)))
+    );
+
+  }
+}, {
+  immediate: true,
+  deep: true,
+})
+</script>
+
+<template>
+  <EffectScatter id="system_floor_chart" ref="asset_floor_chart" :class="twMerge(
+    currentFloor?.key ? 'opacity-100' : 'opacity-0'
+  )
+    " />
+  <!-- <div class="text-lg" v-if="!currentFloor?.key">尚未上傳樓層平面圖</div> -->
+</template>
+
+<style lang='scss' scoped></style>
diff --git a/src/views/system/SystemMain.vue b/src/views/system/SystemMain.vue
new file mode 100644
index 0000000..4c5cb6f
--- /dev/null
+++ b/src/views/system/SystemMain.vue
@@ -0,0 +1,11 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import SystemCard from './components/SystemCard.vue';
+const route = useRoute()
+</script>
+
+<template>
+  <SystemCard />
+</template>
+
+<style lang='scss' scoped></style>
\ No newline at end of file
diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue
new file mode 100644
index 0000000..bd5c1aa
--- /dev/null
+++ b/src/views/system/components/SystemCard.vue
@@ -0,0 +1,122 @@
+<script setup>
+import { inject } from "vue"
+
+const { data } = inject("system_deviceList")
+
+
+
+</script>
+
+<template>
+  <!-- <InfoModal :data="currentInfoModalData" /> -->
+
+  <template v-if="data.length > 0">
+    <div class="equipment-show" v-for="d in data" :key="d.full_name">
+      <template v-if="d.device_list.length > 0">
+        <p class="title">{{ d.full_name }}</p>
+        <div class="grid grid-cols-3 gap-5">
+          <div class="col-auto relative" v-for="device in d.device_list" :key="device.device_guid">
+            <div class="item">
+              <div class="left w-4/5">
+                <div class="sec02">
+                  <img v-if="device.device_image_url" :src="device.device_image_url" alt="" class="w-8 h-8">
+                  <span class="w-8 h-8" v-else></span>
+                  <span>{{ device.full_name }}</span>
+                </div>
+                <div class="sec03">
+                  <span></span>
+                  <span>狀態：</span>
+                  <span></span>
+                </div>
+              </div>
+
+
+            </div>
+
+          </div>
+        </div>
+      </template>
+    </div>
+  </template>
+</template>
+
+<style lang='css' scoped>
+/*設備顯示*/
+.title {
+  @apply text-lg text-white relative inline-block mb-5 after:absolute after:-bottom-2 after:left-1/4 after:w-4/5 after:h-[1px] after:bg-info;
+}
+
+.item {
+  @apply flex items-center border border-success py-4 px-5 relative mb-5 after:absolute after:right-0 after:top-3 after:w-6 after:h-10 after:bg-[url(/src/assets/img/equipment/state-background.svg)] after:z-10;
+  ;
+
+}
+
+.equipment-show .item .sec01 span:nth-child(1) {
+  font-size: 1rem;
+  position: relative;
+  margin-right: 50px;
+}
+
+.equipment-show .item .sec01 span:nth-child(1)::after {
+  content: "";
+  position: absolute;
+  bottom: 5px;
+  right: -47px;
+  display: block;
+  transform: translateY(50%);
+  width: 45px;
+  height: 1px;
+  background-color: #35eded;
+  border-radius: 25px;
+  z-index: 10;
+}
+
+.equipment-show .item .sec01 span:nth-child(2) {
+  font-size: .6rem;
+}
+
+.equipment-show .item .sec02 {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-bottom: 15px;
+}
+
+.equipment-show .item .sec02::after {
+  content: "";
+  background: url(/src/assets/img/equipment/state-title.svg) center center;
+  position: absolute;
+  right: 0;
+  bottom: -10px;
+  height: 25px;
+  width: 105px;
+  background-repeat: no-repeat;
+  z-index: 1;
+}
+
+.equipment-show .item .sec02 span:nth-child(1) {
+  background-color: #31afdf;
+  border: 3px solid #fff;
+  display: block;
+  border-radius: 5px;
+  margin-right: 10px;
+}
+
+.equipment-show .item .sec02 span:nth-child(2) {
+  font-size: 1.5rem;
+}
+
+.equipment-show .item .sec03 {
+  display: flex;
+  align-items: center;
+}
+
+.equipment-show .item .sec03 span:nth-child(1) {
+  width: 15px;
+  height: 15px;
+  border-radius: 100%;
+  display: block;
+  margin-right: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/components/SystemFloorBar.vue b/src/views/system/components/SystemFloorBar.vue
new file mode 100644
index 0000000..c5f2f2b
--- /dev/null
+++ b/src/views/system/components/SystemFloorBar.vue
@@ -0,0 +1,86 @@
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import { getSystemFloors } from "@/apis/system"
+import { onMounted, ref, watch, inject } from 'vue';
+import useBuildingStore from "@/stores/useBuildingStore";
+import useActiveBtn from "@/hooks/useActiveBtn"
+
+const route = useRoute()
+const router = useRouter()
+const store = useBuildingStore();
+
+const { updateCurrentFloor } = inject("system_deviceList")
+
+
+const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
+const getFloors = async () => {
+  const res = await getSystemFloors(store.selectedBuilding?.building_tag, route.params.sub_system_id)
+  setItems([
+    {
+      title: "總覽",
+      key: "main",
+      active: route.params.floor_id ? false : true,
+    },
+    ...res.data.map((d, idx) => ({
+      title: d.floor_tag,
+      key: d.floor_guid,
+      active: route.params.floor_id === d.floor_guid,
+      map_url: d.floor_map_name
+    }))
+  ]);
+}
+
+const onClick = (item) => {
+  changeActiveBtn(item)
+  updateCurrentFloor(item)
+  if (item.key == "main") {
+    router.push({
+      name: 'sub_system', params: {
+        ...route.params
+      }
+    })
+  } else {
+    router.push({
+      name: 'floor', params: {
+        ...route.params, floor_id: item.key
+      }
+    })
+  }
+
+
+}
+
+watch(selectedBtn, (newValue) => {
+  console.log(newValue);
+})
+
+watch(() => route.params.sub_system_id, (newValue, oldValue) => {
+  console.log(newValue !== oldValue)
+  if (newValue !== oldValue) {
+    setItems(items.value.map((item, index) => ({ ...item, active: index === 0 })));
+  }
+
+}, {
+  deep: true
+})
+
+watch(() => store.selectedBuilding, (newValue) => {
+  console.log(newValue)
+  newValue && getFloors()
+}, {
+  deep: true,
+  immediate: true
+})
+
+
+
+</script>
+
+<template>
+  <div class="flex items-center border border-info px-4 py-2">
+    <h5 class="text-md font-extrabold me-4">{{ store.selectedSystem?.full_name }}</h5>
+    <ButtonGroup :items="items" :withLine="false" className="btn-xs rounded-md" :onclick="(e, item) => onClick(item)" />
+  </div>
+</template>
+
+<style lang='scss' scoped></style>
\ No newline at end of file
diff --git a/src/views/system/components/SystemSubBar.vue b/src/views/system/components/SystemSubBar.vue
new file mode 100644
index 0000000..4471ef5
--- /dev/null
+++ b/src/views/system/components/SystemSubBar.vue
@@ -0,0 +1,34 @@
+<script setup>
+import useActiveBtn from "@/hooks/useActiveBtn"
+import { inject, watch } from "vue";
+import useBuildingStore from "@/stores/useBuildingStore"
+
+const { updateDataByGas } = inject("system_deviceList")
+const buildingStore = useBuildingStore()
+const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
+
+watch(() => buildingStore, (newValue) => {
+  newValue.selectedSystem?.points?.length > 0 && setItems(newValue.selectedSystem.points.map(d => ({
+    title: d.full_name,
+    key: d.points,
+    active: false,
+  })))
+}, {
+  deep: true,
+})
+
+const onClick = (item) => {
+  changeActiveBtn(item)
+  updateDataByGas(item.key)
+}
+
+</script>
+
+<template>
+  <template v-if="items.length > 0">
+    <ButtonGroup :items="items" :withLine="false" className="btn-xs rounded-md" :onclick="(e, item) => onClick(item)" />
+
+  </template>
+</template>
+
+<style lang='scss' scoped></style>
\ No newline at end of file