add widget id

src/locales/lang/en.ts

@@ -143,6 +143,7 @@ const msg = {
   pause: "Pause",
   begin: "Start",
   associateOptions: "Association Options",
+  widget: "Widget",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -143,6 +143,7 @@ const msg = {
   pause: "Pausa",
   begin: "Inicio",
   associateOptions: "Opciones de asociación",
+  widget: "Dispositivo pequeño",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",

src/locales/lang/zh.ts

@@ -141,6 +141,7 @@ const msg = {
   pause: "暂停",
   begin: "开始",
   associateOptions: "关联选项",
+  widget: "部件",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/views/dashboard/Edit.vue

@@ -66,7 +66,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 +79,24 @@ export default defineComponent({
         });
       }
     }
+    function setWidgetsID(widgets: any[]) {
+      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") {

src/views/dashboard/List.vue

@@ -232,12 +232,17 @@ function exportTemplates() {
   }, 2000);
 }
 function optimizeTemplate(
-  children: (LayoutConfig & { moved?: boolean; standard?: unknown })[]
+  children: (LayoutConfig & {
+    moved?: boolean;
+    standard?: unknown;
+    id?: string;
+  })[]
 ) {
   for (const child of children || []) {
     delete child.moved;
     delete child.activedTabIndex;
     delete child.standard;
+    delete child.id;
     if (isEmptyObject(child.graph)) {
       delete child.graph;
     }

src/views/dashboard/configuration/widget/AssociateOptions.vue

@@ -14,26 +14,52 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="item">
-    <span class="label">{{ t("title") }}</span>
-    <el-input
-      class="input"
-      v-model="title"
+    <span class="label">{{ t("widget") }}</span>
+    <Selector
+      :value="widgetId"
+      :options="widgets"
       size="small"
-      placeholder="Please input title"
-      @change="updateWidgetConfig({ title: encodeURIComponent(title) })"
+      placeholder="Select a metric"
+      @change="updateWidgetConfig({ associateWidget: $event[0].value })"
+      class="selectors"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const widget = dashboardStore.selectedGrid.widget || {};
-const title = ref<string>(widget.title || "");
-
+const associate = dashboardStore.selectedGrid.associate || {};
+const widgetId = ref<string>(associate.widgetId || "");
+const widgets = computed(() => {
+  const all = [];
+  for (const item of dashboardStore.layout) {
+    if (item.type === "Tab") {
+      if (item.children && item.children.length) {
+        for (const child of item.children) {
+          if (child.children && child.children.length) {
+            const items = child.children.map(
+              (d: { i: string; index: string } | any) => {
+                d.value = d.id;
+                d.label = (d.widget && d.widget.title) || d.type || "";
+                return d;
+              }
+            );
+            all.push(...items);
+          }
+        }
+      }
+    } else {
+      item.value = item.id;
+      item.label = (item.widget && item.widget.title) || item.type || "";
+      all.push(item);
+    }
+  }
+  return all;
+});
 function updateWidgetConfig(param: { [key: string]: string }) {
   const key = Object.keys(param)[0];
   if (!key) {

src/views/dashboard/configuration/widget/metric/Standard.vue

@@ -22,7 +22,9 @@ limitations under the License. -->
         size="small"
         placeholder="Please input unit"
         @change="
-          updateConfig(index, { unit: encodeURIComponent(currentMetric.unit) })
+          updateConfig(index, {
+            unit: encodeURIComponent(currentMetric.unit || ''),
+          })
         "
       />
     </div>
@@ -35,7 +37,7 @@ limitations under the License. -->
         placeholder="Please input a name"
         @change="
           updateConfig(index, {
-            label: encodeURIComponent(currentMetric.label),
+            label: encodeURIComponent(currentMetric.label || ''),
           })
         "
       />