diff --git a/src/components/common/pagination.vue b/src/components/common/Pagination.vue
similarity index 100%
rename from src/components/common/pagination.vue
rename to src/components/common/Pagination.vue
diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue
new file mode 100644
index 00000000..b01cec2f
--- /dev/null
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -0,0 +1,62 @@
+<template>
+    <div v-click-outside="{object: {a:1}, func: changeDropdown}">
+        <el-row @click="showDropdown">
+            <el-col :span="10" class="calendar-popover-text">{{dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss')}}</el-col>
+            <el-col :span="4"> = </el-col>
+            <el-col :span="10" class="calendar-popover-text">{{dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss')}}</el-col>
+        </el-row>
+        <div v-if="dropdownFlag" >
+            123123123123123123
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, watch } from 'vue'
+import MyDatePicker from '../MyDatePicker'
+export default {
+  name: 'DateTimeRange',
+  props: {
+    startTime: {
+      type: Number,
+      default: window.$dayJs.tz().valueOf() - 60 * 60 * 1000
+    },
+    endTime: {
+      type: Number,
+      default: window.$dayJs.tz().valueOf()
+    }
+  },
+  emits: ['change'],
+  components: {
+    MyDatePicker
+  },
+  setup (props, ctx) {
+    // data
+    const myStartTime = ref(props.startTime)
+    const dropdownFlag = ref(false)
+    // methods
+    const showDropdown = () => {
+      dropdownFlag.value = !dropdownFlag.value
+    }
+    const changeDropdown = () => {
+      console.log(123123123)
+      if (dropdownFlag.value){
+        dropdownFlag.value = false
+      }
+    }
+    watch(myStartTime, (newValue, oldValue) => {
+      console.log('The new counter value is: ' + myStartTime.value)
+    })
+    return {
+      myStartTime,
+      dropdownFlag,
+      showDropdown,
+      changeDropdown
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/table/CnDataList.vue b/src/components/table/CnDataList.vue
index ff0b34b3..2434fff6 100644
--- a/src/components/table/CnDataList.vue
+++ b/src/components/table/CnDataList.vue
@@ -5,9 +5,6 @@
       <!-- 顶部工具栏 -->
       <div class="main-container">
         <div class="top-tools">
-          <myDatePicker
-                  v-model="value1"
-                  type="datetime"/>
           <div class="top-tool-left" style="min-width: 300px">
             <slot name="top-tool-left"></slot>
           </div>
@@ -45,13 +42,11 @@
 
 <script>
 import columnCustomize from '@/components/table/ColumnCustomize'
-import myDatePicker from '../common/MyDatePicker'
 import { fromRoute } from '@/utils/constants'
 
 export default {
   name: 'cnDataList',
   components: {
-    myDatePicker,
     columnCustomize
   },
   props: {
diff --git a/src/mixins/dataList.js b/src/mixins/dataList.js
index 04debf20..35f9421d 100644
--- a/src/mixins/dataList.js
+++ b/src/mixins/dataList.js
@@ -2,7 +2,7 @@ import { tableSort } from '@/utils/tools'
 import { defaultPageSize, fromRoute, position } from '@/utils/constants'
 import { get, del } from '@/utils/http'
 import { ref } from 'vue'
-import pagination from '@/components/common/pagination'
+import pagination from '@/components/common/Pagination'
 export default {
   components: {
     pagination
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index 978de654..470ff1ca 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -1,24 +1,27 @@
 <template>
-  <div class="cn-panel">
-    <chart v-for="(chart, index) in chartList" :key="index" :chart="chart"></chart>
-<!--    <grid-layout v-model:layout="chartList"
-                 :col-num="12"
-                 :row-height="30"
-                 :is-draggable="draggable"
-                 :is-resizable="resizable"
-                 :vertical-compact="compact"
-                 :use-css-transforms="true"
-    >
-      <grid-item v-for="item in chartList" :key="item.i"
-                 :x="item.x"
-                 :y="item.y"
-                 :w="item.w"
-                 :h="item.h"
-                 :i="item.i"
-      >
-        <span class="text">{{ item.i }}</span>
-      </grid-item>
-    </grid-layout>-->
+  <div>
+    <DateTimeRange />
+    <div class="cn-panel">
+      <chart v-for="(chart, index) in chartList" :key="index" :chart="chart"></chart>
+      <!--    <grid-layout v-model:layout="chartList"
+                       :col-num="12"
+                       :row-height="30"
+                       :is-draggable="draggable"
+                       :is-resizable="resizable"
+                       :vertical-compact="compact"
+                       :use-css-transforms="true"
+          >
+            <grid-item v-for="item in chartList" :key="item.i"
+                       :x="item.x"
+                       :y="item.y"
+                       :w="item.w"
+                       :h="item.h"
+                       :i="item.i"
+            >
+              <span class="text">{{ item.i }}</span>
+            </grid-item>
+          </grid-layout>-->
+    </div>
   </div>
 </template>
 
@@ -28,11 +31,13 @@ import { ref } from 'vue'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { api, getPanelList, getChartList } from '@/utils/api'
 import Chart from './Chart'
+import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
 
 export default {
   name: 'Panel',
   components: {
-    Chart
+    Chart,
+    DateTimeRange
   },
   data () {
     return {