mm

src/views/dashboard-screen/index.vue

@@ -1,11 +1,20 @@
 <template>
-  <div class="dashboard-container" v-if="render">
+  <div class="dashboard-container" v-if="render" >
     <div class="header">
       <div class="title clickScoop" @click="openDrawer('数据管理')">
         变电配电大数据可视化系统
       </div>
       <div class="r-title">
-        {{ dateTitle }}
+        <span @click="$refs.datePicker.open = true" style="cursor: pointer"> {{ dateTitle }}</span>
+        <a-date-picker
+          @click="$refs.datePicker.open = false"
+          style="position: absolute;right:20px;top:10px;z-index: -1"
+          ref="datePicker"
+          value-format="YYYY-MM-DD"
+          :value="date"
+          @change="timeChange"
+          placeholder="时间"
+        />
       </div>
     </div>
     <div class="content-wrap">
@@ -133,7 +142,8 @@ export default {
   data() {
     return {
       render: true,
-      dateTitle: dayjs().locale('zh-cn').format('YYYY年MM月DD日  d'),
+      date: dayjs().locale('zh-cn'),
+      dateTitle: dayjs().locale('zh-cn').format('YYYY年MM月DD日  星期dd'),
       drawer: {
         title: '数据管理',
         visible: false,
@@ -159,12 +169,19 @@ export default {
       }, 100)
     }, 500)
     window.addEventListener('resize', doResize)
-    setInterval(() => {
-      this.dateTitle = dayjs().locale('zh-cn').format('YYYY年MM月DD日  星期dd')
-    }, 1000)
+    window['is'] = this
+    // setInterval(() => {
+    //   this.dateTitle = dayjs().locale('zh-cn').format('YYYY年MM月DD日  星期dd')
+    //   this.date = dayjs().locale('zh-cn')
+    // }, 1000)
   },
   methods: {
-
+    timeChange(evt) {
+      console.log('evt', evt)
+      this.date = dayjs(evt).locale('zh-cn')
+      this.dateTitle = dayjs(evt).locale('zh-cn').format('YYYY年MM月DD日  星期dd')
+      this.$refs.datePicker.open = false
+    },
     openDrawer(title) {
       const map = {
         '检修兑现情况': ScreenJxdxqk,
@@ -452,9 +469,7 @@ export default {
       //z-index: 1 !important;
     }
 
-
   }
 }
 
-
 </style>