update

src/components/Graph.vue

@@ -115,6 +115,12 @@ watch(
     }
     if (props.filters) {
       if (props.filters.isRange) {
+        const list = props.option.series[0].data.map(
+          (d: (number | string)[]) => d[0]
+        );
+        if (!list.includes(props.filters.duration.endTime)) {
+          return;
+        }
         const markArea = {
           silent: true,
           itemStyle: {

src/views/dashboard/List.vue

@@ -20,7 +20,7 @@ limitations under the License. -->
         placeholder="Please input name"
         class="input-with-search ml-10"
         size="small"
-        @change="searchDashboards"
+        @change="searchDashboards(1)"
       >
         <template #append>
           <el-button size="small">
@@ -129,7 +129,8 @@ limitations under the License. -->
           small
           layout="prev, pager, next"
           :page-size="pageSize"
-          :total="dashboardStore.dashboards.length"
+          :total="total"
+          v-model="currentPage"
           @current-change="changePage"
           @prev-click="changePage"
           @next-click="changePage"
@@ -159,6 +160,8 @@ const pageSize = 18;
 const dashboards = ref<DashboardItem[]>([]);
 const searchText = ref<string>("");
 const loading = ref<boolean>(false);
+const currentPage = ref<number>(1);
+const total = ref<number>(0);
 const multipleTableRef = ref<InstanceType<typeof ElTable>>();
 const multipleSelection = ref<DashboardItem[]>([]);
 const dashboardFile = ref<Nullable<HTMLDivElement>>(null);
@@ -170,7 +173,7 @@ const handleSelectionChange = (val: DashboardItem[]) => {
 setList();
 async function setList() {
   await dashboardStore.setDashboards();
-  searchDashboards();
+  searchDashboards(1);
 }
 async function importTemplates(event: any) {
   const arr: any = await readFile(event);
@@ -374,7 +377,7 @@ async function setRoot(row: DashboardItem) {
     items.push(d);
   }
   dashboardStore.resetDashboards(items);
-  searchDashboards();
+  searchDashboards(1);
   loading.value = false;
 }
 function handleRename(row: DashboardItem) {
@@ -458,10 +461,13 @@ function searchDashboards(pageIndex?: any) {
   const arr = list.filter((d: { name: string }) =>
     d.name.includes(searchText.value)
   );
-  dashboards.value = arr.splice(
+
-    (pageIndex - 1 || 0) * pageSize,
+  total.value = arr.length;
-    pageSize * (pageIndex || 1)
+  dashboards.value = arr.filter(
+    (d: { name: string }, index: number) =>
+      index < pageIndex * pageSize && index >= (pageIndex - 1) * pageSize
   );
+  currentPage.value = pageIndex;
 }
 
 async function reloadTemplates() {
@@ -470,6 +476,7 @@ async function reloadTemplates() {
   loading.value = false;
 }
 function changePage(pageIndex: number) {
+  currentPage.value = pageIndex;
   searchDashboards(pageIndex);
 }
 </script>

src/views/dashboard/controls/Event.vue

@@ -36,7 +36,7 @@ limitations under the License. -->
       <Header :needQuery="needQuery" />
     </div>
     <div class="event">
-      <Content />
+      <Content :data="data" />
     </div>
   </div>
 </template>

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

@@ -30,14 +30,18 @@ import { dateFormatTime } from "@/utils/dateFormat";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
 const eventStore = useEventStore();
-/*global Nullable */
+/*global defineProps, Nullable */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
 const timeline = ref<Nullable<HTMLDivElement>>(null);
 const visGraph = ref<Nullable<any>>(null);
 const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
 const dashboardStore = useDashboardStore();
 const appStore = useAppStoreWithOut();
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  new Date(dayjs(date).format(pattern));
 const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 
@@ -61,8 +65,8 @@ function visTimeline() {
     return {
       id: index + 1,
       content: d.name,
-      start: dateFormat(Number(d.startTime)),
+      start: new Date(Number(d.startTime)),
-      end: dateFormat(Number(d.endTime)),
+      end: new Date(Number(d.endTime)),
       data: d,
       className: d.type,
     };
@@ -97,9 +101,10 @@ function visTimeline() {
   };
   visGraph.value = new Timeline(timeline.value, items, options);
   visGraph.value.on("select", (properties: { items: number[] }) => {
-    if (!dashboardStore.selectedGrid.eventAssociate) {
+    if (!props.data.eventAssociate) {
       return;
     }
+    dashboardStore.selectWidget(props.data);
     const all = getDashboard(dashboardStore.currentDashboard).widgets;
     const widgets = all.filter(
       (d: { value: string; label: string } & LayoutConfig) => {
@@ -117,8 +122,20 @@ function visTimeline() {
     for (const widget of widgets) {
       let end = i.end;
       if (!isNaN(index)) {
-        if (!i.end || i.end.getTime() - i.start.getTime() < 60000) {
+        let diff = 60000;
-          end = i.start.getTime() + 60000;
+        switch (appStore.duration.step) {
+          case "MINUTE":
+            diff = 60000;
+            break;
+          case "HOUR":
+            diff = 3600000;
+            break;
+          case "DAY":
+            diff = 3600000 * 24;
+            break;
+        }
+        if (!i.end || i.end.getTime() - i.start.getTime() < diff) {
+          end = i.start.getTime() + diff;
         }
       }
       const startTime = dateFormatTime(i.start, appStore.duration.step);

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

@@ -125,6 +125,9 @@ function fetchSelectors() {
 
 async function getEndpoints(id?: string) {
   const resp = await eventStore.getEndpoints(id);
+  if (!resp) {
+    return;
+  }
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return;
@@ -148,6 +151,9 @@ async function queryEvents() {
   if (dashboardStore.entity === EntityType[3].value) {
     instance = selectorStore.currentPod.id;
   }
+  if (!selectorStore.currentService) {
+    return;
+  }
   eventStore.setEventCondition({
     // layer: dashboardStore.layerId,
     paging: {