update copilot header

src/views/copilot/components/CopilotHeader.vue

@@ -0,0 +1,104 @@
+<!-- 
+    filename: CopilotHeader.vue
+    author: liubin
+    date: 2024-04-16 15:14:01
+    description: 
+-->
+
+<template>
+  <div class="copilot-header">
+    <section class="menu">
+      <CopilotButton
+        v-for="i in ['产量', '效率', '能源']"
+        :key="i"
+        :label="i"
+        :active="i === active"
+        @click="() => $emit('update:active', i)"
+      />
+    </section>
+    <section class="menu">
+      <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" />
+      </div>
+    </section>
+    <div class="page-title">{{ active }}驾驶舱</div>
+  </div>
+</template>
+
+<script>
+import CopilotButton from "./button.vue";
+export default {
+  name: "CopilotHeader",
+  components: { CopilotButton },
+  props: {
+    active: {
+      type: String,
+    },
+    period: {
+      type: String,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 优设标题黑;
+  src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
+}
+
+.copilot-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.copilot-header > section {
+  width: 24vw;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.export-btn,
+.fullscreen-btn {
+  width: 32px;
+  height: 32px;
+  margin-left: 24px;
+  cursor: pointer;
+}
+
+.export-btn {
+  background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
+    no-repeat;
+}
+
+.fullscreen-btn {
+  background: url(../../../assets/images/full-icon.png) 0 0 / 100% 100%
+    no-repeat;
+}
+
+.page-title {
+  flex: 1;
+  font-size: 54px;
+  line-height: 70px;
+  letter-spacing: 5px;
+  font-family: 优设标题黑;
+  color: #6db6ff;
+  text-align: right;
+  user-select: none;
+}
+</style>

src/views/copilot/components/button.vue

@@ -0,0 +1,90 @@
+<!-- 
+    filename: button.vue
+    author: liubin
+    date: 2024-04-16 15:02:34
+    description: 
+-->
+
+<template>
+  <button
+    class="copilot-btn"
+    :class="[active ? 'active' : '']"
+    @click="$emit('click', label)"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: "CopilotButton",
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style>
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+  background: none;
+}
+</style>
+
+<style scoped>
+.copilot-btn {
+  flex: 1;
+  position: relative;
+  background: #006acd40;
+  backdrop-filter: blur(3px);
+  text-align: center;
+  padding: 12px;
+  padding-left: 20px;
+  color: #fff;
+  font-size: 22px;
+  letter-spacing: 10px;
+  cursor: pointer;
+}
+
+.copilot-btn.active {
+  background: linear-gradient(
+    to top,
+    #159aff99,
+    #159aff44,
+    #006acd40
+  ) !important;
+}
+
+.copilot-btn::before,
+.copilot-btn::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 0;
+  background: transparent;
+  border-style: solid;
+  border-width: 2px;
+  border-color: transparent;
+  border-top-color: #007be4;
+}
+
+.copilot-btn::before {
+  left: 0;
+  border-left-color: #007be4;
+}
+
+.copilot-btn::after {
+  right: 0;
+  border-right-color: #007be4;
+}
+</style>

src/views/copilot/container.vue

@@ -0,0 +1,73 @@
+<!-- 
+    filename: container.vue
+    author: liubin
+    date: 2024-04-16 14:51:25
+    description: 
+-->
+
+<template>
+  <div class="copilot-container">
+    <CopilotHeaderVue
+      :active="page"
+      :period="period"
+      @update:active="page = $event"
+      @update:period="period = $event"
+    />
+
+    <YieldCopilot v-if="page == '产量'" :period="period" />
+    <EnergyCopilot v-if="page == '能源'" :period="period" />
+    <EfficiencyCopilot v-if="page == '效率'" :period="period" />
+
+    <div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
+  </div>
+</template>
+
+<script>
+import CopilotHeaderVue from "./components/CopilotHeader.vue";
+import YieldCopilot from "./yield/index.vue";
+import EnergyCopilot from "./energy/index.vue";
+import EfficiencyCopilot from "./efficiency/index.vue";
+
+export default {
+  name: "CopilotContainer",
+  components: {
+    CopilotHeaderVue,
+    YieldCopilot,
+    EnergyCopilot,
+    EfficiencyCopilot,
+  },
+  data() {
+    return {
+      page: "产量",
+      period: "日",
+    };
+  },
+};
+</script>
+
+<style>
+.copilot-container {
+  padding: 16px;
+  background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
+  position: absolute;
+  height: calc(100% + 38px);
+  left: -16px;
+  top: -8px;
+  width: calc(100% + 30px);
+  z-index: 1001;
+  color: #fff;
+}
+
+.copilot-footer {
+  position: absolute;
+  bottom: 20px;
+  height: 20px;
+  width: 100%;
+  color: rgb(80, 80, 80);
+  user-select: none;
+  font-size: 14px;
+  letter-spacing: 1px;
+  display: grid;
+  place-content: center;
+}
+</style>

src/views/copilot/efficiency/index.vue

@@ -6,15 +6,12 @@
 -->
 
 <template>
-  <div class="copilot-container efficiency-copilot">
+  <div class="efficiency-copilot">效率驾驶舱</div>
-    效率驾驶舱
-  </div>
 </template>
 
 <script>
 export default {
   name: "EfficiencyCopilot",
-  components: {},
   props: {},
   data() {
     return {};

src/views/copilot/energy/index.vue

@@ -6,9 +6,7 @@
 -->
 
 <template>
-  <div class="copilot-container energy-copilot">
+  <div class="energy-copilot">能源驾驶舱</div>
-    能源驾驶舱
-  </div>
 </template>
 
 <script>

src/views/copilot/yield/index.vue

@@ -6,7 +6,7 @@
 -->
 
 <template>
-  <div class="copilot-container yield-copilot">产量驾驶舱</div>
+  <div class="yield-copilot">产量驾驶舱</div>
 </template>
 
 <script>