feat: active controls

src/store/modules/dashboard.ts

@@ -24,9 +24,10 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 interface DashboardState {
   showConfig: boolean;
   layout: LayoutConfig[];
-  selectedWidget: Nullable<LayoutConfig>;
+  selectedGrid: Nullable<LayoutConfig>;
   entity: string;
   layerId: string;
+  activedGridItem: string;
 }
 
 export const dashboardStore = defineStore({
@@ -34,9 +35,10 @@ export const dashboardStore = defineStore({
   state: (): DashboardState => ({
     layout: [ConfigData],
     showConfig: false,
-    selectedWidget: ConfigData,
+    selectedGrid: ConfigData,
     entity: "",
     layerId: "",
+    activedGridItem: "",
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
@@ -100,6 +102,9 @@ export const dashboardStore = defineStore({
       };
       this.layout[idx].children?.push(i);
     },
+    activeGridItem(index: string) {
+      this.activedGridItem = index;
+    },
     removeControls(item: LayoutConfig) {
       this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
     },
@@ -113,7 +118,7 @@ export const dashboardStore = defineStore({
       this.showConfig = show;
     },
     selectWidget(widget: Nullable<LayoutConfig>) {
-      this.selectedWidget = ConfigData || widget; //todo
+      this.selectedGrid = ConfigData || widget; //todo
     },
     setLayer(id: string) {
       this.layerId = id;

src/views/dashboard/configuration/ConfigEdit.vue

@@ -67,7 +67,7 @@ limitations under the License. -->
         <el-collapse-item :title="t('graphStyles')" name="3">
           <component
             :is="`${chartType}Config`"
-            :config="dashboardStore.selectedWidget.graph"
+            :config="dashboardStore.selectedGrid.graph"
           />
         </el-collapse-item>
         <el-collapse-item :title="t('widgetOptions')" name="4">
@@ -118,7 +118,7 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
     const { loading } = Loading();
-    const { selectedWidget } = dashboardStore;
+    const { selectedGrid } = dashboardStore;
     const states = reactive<{
       metrics: string[];
       valueTypes: Option[];
@@ -129,14 +129,14 @@ export default defineComponent({
       source: any;
       index: string;
     }>({
-      metrics: selectedWidget.metrics || [],
+      metrics: selectedGrid.metrics || [],
       valueTypes: [],
       valueType: "",
       metricQueryType: "",
-      chartType: selectedWidget.graph.type,
+      chartType: selectedGrid.graph.type,
       activeNames: "1",
       source: {},
-      index: selectedWidget.i,
+      index: selectedGrid.i,
     });
     const widgetOpt = reactive<
       | {
@@ -145,8 +145,8 @@ export default defineComponent({
         }
       | any
     >({
-      tips: selectedWidget.widget.tips,
+      tips: selectedGrid.widget.tips,
-      title: selectedWidget.widget.title,
+      title: selectedGrid.widget.title,
     });
     queryMetricType(states.metrics[0]);
 
@@ -205,7 +205,7 @@ export default defineComponent({
 
     async function queryMetrics() {
       const json = await dashboardStore.fetchMetricValue(
-        dashboardStore.selectedWidget
+        dashboardStore.selectedGrid
       );
 
       if (json.error) {
@@ -215,8 +215,8 @@ export default defineComponent({
         (d: { value: number }, index: number) => d.value + index // todo
       );
       const m =
-        dashboardStore.selectedWidget.metrics &&
+        dashboardStore.selectedGrid.metrics &&
-        dashboardStore.selectedWidget.metrics[0];
+        dashboardStore.selectedGrid.metrics[0];
       if (!m) {
         return;
       }
@@ -229,20 +229,20 @@ export default defineComponent({
 
     function applyConfig() {
       const opts = {
-        ...dashboardStore.selectedWidget,
+        ...dashboardStore.selectedGrid,
         metrics: states.metrics,
         queryMetricType: states.valueType,
         chart: states.chartType,
         widget: {
-          ...dashboardStore.selectedWidget.widget,
+          ...dashboardStore.selectedGrid.widget,
           title: widgetOpt.title,
           tips: widgetOpt.tips,
         },
         graph: {
-          ...dashboardStore.selectedWidget.graph,
+          ...dashboardStore.selectedGrid.graph,
         },
         standard: {
-          ...dashboardStore.selectedWidget.standard,
+          ...dashboardStore.selectedGrid.standard,
         },
       };
       dashboardStore.setConfigs(opts);

src/views/dashboard/controls/Tab.vue

@@ -31,7 +31,7 @@ limitations under the License. -->
       </span>
 
       <span class="add-Item" @click="addTabItem">
-        <Icon size="sm" iconName="add" />
+        <Icon size="middle" iconName="add" />
       </span>
     </div>
     <div class="operations">
@@ -71,6 +71,7 @@ const props = defineProps({
     type: Object as PropType<{ type: string; children: any[] }>,
     default: () => ({ children: [] }),
   },
+  active: { type: Boolean, default: false },
 });
 const dashboardStore = useDashboardStore();
 const state = reactive<{ layout: any[]; activeTab: number }>({

src/views/dashboard/controls/Widget.vue

@@ -51,6 +51,7 @@ const props = {
     type: Object as PropType<LayoutConfig>,
     default: () => ({ widget: {} }),
   },
+  active: { type: Boolean, default: false },
 };
 export default defineComponent({
   name: "Widget",
@@ -73,6 +74,9 @@ export default defineComponent({
       const json = await dashboardStore.fetchMetricValue(props.data);
 
       loadingInstance.close();
+      if (!json) {
+        return;
+      }
       if (json.error) {
         ElMessage.error(json.error);
         return;
@@ -90,11 +94,11 @@ export default defineComponent({
     }
 
     function removeWidget() {
-      dashboardStore.removeControls(data);
+      dashboardStore.removeControls(props.data);
     }
     function setConfig() {
       dashboardStore.setConfigPanel(true);
-      dashboardStore.selectWidget(data);
+      dashboardStore.selectWidget(props.data);
     }
     return {
       state,

src/views/dashboard/panel/Layout.vue

@@ -29,8 +29,14 @@ limitations under the License. -->
       :h="item.h"
       :i="item.i"
       :key="item.i"
+      @click="clickGrid(item)"
+      :class="{ active: dashboardStore.activedGridItem === item.i }"
     >
-      <component :is="item.type" :data="item" />
+      <component
+        :is="item.type"
+        :data="item"
+        :active="dashboardStore.activedGridItem === item.i"
+      />
     </grid-item>
   </grid-layout>
 </template>
@@ -45,12 +51,16 @@ export default defineComponent({
   components: { Widget, Tab },
   setup() {
     const dashboardStore = useDashboardStore();
-    function layoutUpdatedEvent(newLayout: LayoutConfig) {
+    function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
       dashboardStore.setLayout(newLayout);
     }
+    function clickGrid(item: LayoutConfig) {
+      dashboardStore.activeGridItem(item.i);
+    }
     return {
       dashboardStore,
       layoutUpdatedEvent,
+      clickGrid,
     };
   },
 });
@@ -66,4 +76,8 @@ export default defineComponent({
   box-shadow: 0px 1px 4px 0px #00000029;
   border-radius: 5px;
 }
+
+.vue-grid-item.active {
+  border: 1px solid #409eff;
+}
 </style>