From bdb09326c90c5a61cdb325336aaf5ac31160dac4 Mon Sep 17 00:00:00 2001
From: Wangjunqi123 <wangjunqi@kylinos.cn>
Date: Tue, 14 Nov 2023 20:22:14 +0800
Subject: [PATCH] add datepicker

---
 web/src/App.vue | 55 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index cbcb4e4..7a07698 100755
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -25,35 +25,33 @@
 
       <el-dropdown>
         <span class="dropdown">
-          <el-icon><Clock /></el-icon>时间<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          <el-icon><Setting /></el-icon>设置<el-icon class="el-icon--right"><arrow-down /></el-icon>
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item v-for="time in time_list">{{ time }}</el-dropdown-item>
+            <el-dropdown-item>编辑业务</el-dropdown-item>
+            <el-dropdown-item>1</el-dropdown-item>
+            <el-dropdown-item>1</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
 
-      <el-dropdown>
+      <div :style="{ display: 'flex', 'align-items': 'center' }">
         <span class="dropdown">
-          <el-icon><Aim /></el-icon>时间间隔<el-icon class="el-icon--right"><arrow-down /></el-icon>
+            <el-icon><Setting /></el-icon>时间<el-icon class="el-icon--right"></el-icon>
         </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item v-for="interval in interval_list">{{ interval }}</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
+        <el-date-picker v-model="dateRange" type="datetimerange" :shortcuts="pickerOptions" range-separator="to"
+          start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDate">
+        </el-date-picker>
+      </div>
 
       <el-dropdown>
         <span class="dropdown">
-          <el-icon><Setting /></el-icon>设置<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          <el-icon><Aim /></el-icon>时间间隔<el-icon class="el-icon--right"><arrow-down /></el-icon>
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item>编辑业务</el-dropdown-item>
-            <el-dropdown-item>1</el-dropdown-item>
-            <el-dropdown-item>1</el-dropdown-item>
+            <el-dropdown-item v-for="interval in interval_list">{{ interval }}</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -69,11 +67,18 @@ import { ref, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { topo } from '@/request/api';
 import { useLayoutStore } from '@/stores/charts';
+import { pickerOptions } from '@/utils/datePicker';
 
 const node_list = reactive<any>([])
 const time_list = reactive<any>(["1699595594", "1699595668", "1699595751"])
 const interval_list = reactive<any>(["5s", "15s", "1m", "5m"])
 
+let dateRange = ref([new Date() as any - 2 * 60 * 60 * 1000, new Date() as any - 0])
+const startTime = ref(0);
+const endTime = ref(0);
+startTime.value = (new Date() as any) / 1000 - 60 * 60 * 2;
+endTime.value = (new Date() as any) / 1000;
+
 const layoutStore = useLayoutStore();
 let layout = reactive(layoutStore.layout_option);
 
@@ -92,11 +97,11 @@ onMounted(async () => {
 async function updateNodeList() {
   //ttcode
   // const data = {
-			// 	"code":  0,
-			// 	"error": null,
-			// 	"data": 
-					// 		{"agentlist": {"070cb0b4-c415-4b6a-843b-efc51cff6b76": "10.44.55.66:9992"}}
-      //   }
+				// 	"code":  0,
+				// 	"error": null,
+				// 	"data": 
+							// 		{"agentlist": {"070cb0b4-c415-4b6a-843b-efc51cff6b76": "10.44.55.66:9992"}}
+        //   }
 	
   const data = await topo.host_list()
   // console.log(data);
@@ -121,6 +126,17 @@ function switch_single_topo(node: any) {
   })
 }
 
+// 选择展示时间范围
+const changeDate = (value: number[]) => {
+  if (value) {
+    startTime.value = (new Date(value[0]) as any) / 1000;
+    endTime.value = (new Date(value[1]) as any) / 1000;
+  } else {
+    startTime.value = (new Date() as any) / 1000 - 60 * 60 * 2;
+    endTime.value = (new Date() as any) / 1000;
+  }
+}
+
 </script>
 
 <style scoped>
@@ -143,6 +159,7 @@ header {
 .top_area_inner_div {
   display: flex;
   justify-content: space-between;
+
 }
 
 .top_area_inner_div > div {
-- 
Gitee