add mark area on graph

src/components/Graph.vue

@@ -46,8 +46,12 @@ const props = defineProps({
   },
   filters: {
     type: Object as PropType<{
-      value: number | string;
+      duration: {
-      dataIndex: number;
+        startTime: string;
+        endTime: string;
+      };
+      isRange: boolean;
+      dataIndex?: number;
       sourceId: string;
     }>,
   },
@@ -110,9 +114,39 @@ watch(
       return;
     }
     if (props.filters) {
+      if (props.filters.isRange) {
+        const markArea = {
+          silent: true,
+          itemStyle: {
+            opacity: 0.3,
+          },
+          data: [
+            [
+              {
+                xAxis: props.filters.duration.startTime,
+              },
+              {
+                xAxis: props.filters.duration.endTime,
+              },
+            ],
+          ],
+        };
+        const series = props.option.series;
+        for (const [key, temp] of series.entries()) {
+          if (key === 0) {
+            temp.markArea = markArea;
+          }
+        }
+        const options = {
+          ...props.option,
+          series,
+        };
+        setOptions(options);
+        return;
+      }
       instance.dispatchAction({
         type: "showTip",
-        dataIndex: props.filters.dataIndex,
+        dataIndex: props.filters.dataIndex || undefined,
         seriesIndex: 0,
       });
     }

src/utils/echarts.ts

@@ -26,6 +26,7 @@ import {
   DataZoomComponent,
   VisualMapComponent,
   TimelineComponent,
+  MarkAreaComponent,
 } from "echarts/components";
 
 import { SVGRenderer } from "echarts/renderers";
@@ -43,6 +44,7 @@ echarts.use([
   DataZoomComponent,
   VisualMapComponent,
   TimelineComponent,
+  MarkAreaComponent,
 ]);
 
 export default echarts;

src/views/dashboard/configuration/Event.vue

@@ -20,6 +20,14 @@ limitations under the License. -->
       @change="updateConfig"
     />
   </div>
+  <div class="footer">
+    <el-button size="small" @click="cancelConfig">
+      {{ t("cancel") }}
+    </el-button>
+    <el-button size="small" type="primary" @click="applyConfig">
+      {{ t("apply") }}
+    </el-button>
+  </div>
 </template>
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
@@ -28,6 +36,7 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
+const originConfig = dashboardStore.selectedGrid;
 const eventAssociate = ref(dashboardStore.selectedGrid.eventAssociate || false);
 
 function updateConfig() {
@@ -37,6 +46,16 @@ function updateConfig() {
   };
   dashboardStore.selectWidget(dashboardStore.selectedGrid);
 }
+
+function applyConfig() {
+  dashboardStore.setConfigPanel(false);
+  dashboardStore.setConfigs(dashboardStore.selectedGrid);
+}
+
+function cancelConfig() {
+  dashboardStore.selectWidget(originConfig);
+  dashboardStore.setConfigPanel(false);
+}
 </script>
 <style lang="scss" scoped>
 .label {
@@ -49,4 +68,15 @@ function updateConfig() {
 .item {
   margin: 10px 0;
 }
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  border-top: 1px solid #eee;
+  padding: 10px;
+  text-align: right;
+  width: 100%;
+  background-color: #fff;
+}
 </style>

src/views/dashboard/graphs/Line.vue

@@ -33,9 +33,13 @@ const props = defineProps({
     type: Object as PropType<
       LineConfig & {
         filters: {
-          value: number | string;
-          dataIndex: number;
           sourceId: string;
+          duration: {
+            startTime: string;
+            endTime: string;
+          };
+          isRange: boolean;
+          dataIndex?: number;
         };
       } & { id: string }
     >,

src/views/dashboard/related/event/Content.vue

@@ -112,16 +112,11 @@ function visTimeline() {
       }
     );
     const index = properties.items[0];
-    const i = items[index];
+    const i = events[index - 1 || 0];
+
     for (const widget of widgets) {
-      const startTime: string = dateFormatTime(
+      const startTime = dateFormatTime(i.start, appStore.duration.step);
-        new Date(i.startTime),
+      const endTime = dateFormatTime(i.end, appStore.duration.step);
-        appStore.duration.step
-      );
-      const endTime: string = dateFormatTime(
-        new Date(i.endTime),
-        appStore.duration.step
-      );
       widget.filters = {
         sourceId: dashboardStore.selectedGrid.id || "",
         isRange: true,