feat：添加时间选择器的组件（10%）

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>

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: {

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

src/views/charts/Panel.vue

@@ -1,7 +1,9 @@
 <template>
+  <div>
+    <DateTimeRange />
     <div class="cn-panel">
       <chart v-for="(chart, index) in chartList" :key="index" :chart="chart"></chart>
-<!--    <grid-layout v-model:layout="chartList"
+      <!--    <grid-layout v-model:layout="chartList"
                        :col-num="12"
                        :row-height="30"
                        :is-draggable="draggable"
@@ -20,6 +22,7 @@
             </grid-item>
           </grid-layout>-->
     </div>
+  </div>
 </template>
 
 <script>
@@ -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 {