产量和效率

src/views/copilot/components/CopilotHeader.vue

@@ -10,15 +10,19 @@
     <section class="menu">
       <CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
         @click="() => $emit('update:active', i)" />
+      <div class="type-name"></div>
+      <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
+        @click="() => $emit('update:than', i)" />
     </section>
     <div class="page-title">{{ active }}驾驶舱</div>
-    <section class="menu">
+    <section class="menu" style="width: 24vw;float: right;">
       <CopilotButton v-for="i in ['日', '周', '月', '年']" :key="i" :label="i" :active="i === period"
         @click="() => $emit('update:period', i)" />
       <div class="btn-group">
         <button type="button" class="export-btn" />
         <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
           @click="toggleFullScreen" />
+        <!-- <button class="times-btn"> {{ times }} </button> -->
       </div>
     </section>
   </div>
@@ -38,14 +42,61 @@ export default {
     period: {
       type: String,
     },
+    than: {
+      type: String,
+    },
   },
   data() {
     return {
+      times:'',
       isFullscreen: false,
     };
   },
+  mounted () {
+    this.getTimes()
+    this.getTimesInterval();
+  },
   computed: {},
   methods: {
+    getTimes() {
+      setInterval(this.getTimesInterval, 60000);
+    },
+    getTimesInterval() {
+      var now = new Date();
+      var weekDay = now.getDay();
+      var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
+      var week = weeks[weekDay]
+      let _this = this;
+      let year = new Date().getFullYear(); //获取当前时间的年份
+      let month = new Date().getMonth() + 1; //获取当前时间的月份
+      let day = new Date().getDate(); //获取当前时间的天数
+      let hours = new Date().getHours(); //获取当前时间的小时
+      let minutes = new Date().getMinutes(); //获取当前时间的分数
+      // let seconds = new Date().getSeconds(); //获取当前时间的秒数
+      //当小于 10 的是时候，在前面加 0
+      if (hours < 10) {
+        hours = '0' + hours;
+      }
+      if (minutes < 10) {
+        minutes = '0' + minutes;
+      }
+      // if (seconds < 10) {
+      //   seconds = '0' + seconds;
+      // }
+      //拼接格式化当前时间
+      this.times =
+
+        year +
+        '.' +
+        month +
+        '.' +
+      day +
+      "  " + hours +
+      '.' +
+      minutes +
+      '.' +
+      week
+    },
     toggleFullScreen() {
       this.isFullscreen = !this.isFullscreen;
       screenfull.toggle(document.querySelector(".copilot-layout"))
@@ -68,10 +119,11 @@ export default {
   display: flex;
   gap: 12px;
   align-items: center;
+  justify-content: space-between;
 }
 
 .copilot-header > section {
-  width: 24vw;
+  width: 26vw;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -85,6 +137,17 @@ export default {
   cursor: pointer;
 }
 
+.times-btn {
+  width: 240px;
+  height: 32px;
+  margin-left: 24px;
+  cursor: pointer;
+  color: white;
+  font-size: 20px;
+  line-height: 30px;
+  float: right;
+  /* margin-bottom: 20px; */
+}
 .export-btn {
   background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
     no-repeat;
@@ -98,9 +161,20 @@ export default {
   background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 / 100% 100%
     no-repeat;
 }
-
+    .type-name {
+      /* content: ""; */
+      display: inline-block;
+      width: 1px;
+    height: 59px;
+    border: 1px solid;
+    opacity: 0.9;
+    border-image: linear-gradient(180deg, rgba(0, 176, 243, 0), rgba(88, 194, 255, 1), rgba(0, 120, 228, 0)) 2 2;
+      /* position: absolute; */
+      /* left: 0; */
+      /* top: 10px; */
+    }
 .page-title {
-  flex: 1;
+  width: 25vw;
   font-size: 54px;
   line-height: 70px;
   letter-spacing: 5px;
@@ -108,5 +182,6 @@ export default {
   color: #6db6ff;
   text-align: center;
   user-select: none;
+  background: url(../../../assets/images/homeindex/page-title.png) 0 0 / 100% 100% no-repeat;
 }
 </style>