feat: Implement an association between widgets(line, bar, area graphs) with time (#115)

src/views/dashboard/Edit.vue

@@ -41,6 +41,7 @@ import Tool from "./panel/Tool.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import Configuration from "./configuration";
+import { LayoutConfig } from "@/types/dashboard";
 
 export default defineComponent({
   name: "Dashboard",
@@ -66,7 +67,8 @@ export default defineComponent({
         sessionStorage.getItem(layoutKey.value) || "{}"
       );
       const layout: any = c.configuration || {};
-      dashboardStore.setLayout(layout.children || []);
+
+      dashboardStore.setLayout(setWidgetsID(layout.children || []));
       appStore.setPageTitle(layout.name);
       if (p.entity) {
         dashboardStore.setCurrentDashboard({
@@ -78,6 +80,24 @@ export default defineComponent({
         });
       }
     }
+    function setWidgetsID(widgets: LayoutConfig[]) {
+      for (const item of widgets) {
+        item.id = item.i;
+        if (item.type === "Tab") {
+          if (item.children && item.children.length) {
+            for (const [index, child] of item.children.entries()) {
+              if (child.children && child.children.length) {
+                child.children.map((d: { i: string; index: string } | any) => {
+                  d.id = `${item.i}-${index}-${d.i}`;
+                  return d;
+                });
+              }
+            }
+          }
+        }
+      }
+      return widgets;
+    }
     function handleClick(e: any) {
       e.stopPropagation();
       if (e.target.className === "ds-main") {