产量和效率

src/views/copilot/components/FactoryDataHeader.vue

@@ -1,39 +1,30 @@
 <template>
   <div class="factory-header">
     <section class="menu1">
-      <FactorySelect
-        :companyName="companyName"
-        :companyId="companyId"
-        @updateCompany="updateCompany"
-      />
-    </section>
-    <section class="menu2">
-      <CopilotButton
-        v-for="i in ['日', '周', '月', '年']"
-        :key="i"
-        :label="i"
-        :active="i === period"
-        @click="() => $emit('update:period', i)"
-      />
+      <!-- <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)" />
       <div class="btn-group">
         <button type="button" class="export-btn" />
-        <button
-          type="button"
-          class="fullscreen-btn"
-          :class="[isFullscreen ? 'exit-fullscreen' : '']"
-          @click="toggleFullScreen"
-        />
+        <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
+          @click="toggleFullScreen" />
       </div>
     </section>
     <div class="page-title">{{ companyName }}</div>
+    <section class="menu2">
+      <CopilotButton v-for="i in dataList" :key="i.id" :label="i.name" :active="i.id === period"
+        @click="() => $emit('update:period', i.id)" />
+    </section>
   </div>
 </template>
 
 <script>
-import CopilotButton from "./button.vue";
+// import CopilotButton from "./button.vue";
 import FactorySelect from "./FactorySelect.vue";
 import screenfull from "screenfull";
-
+import CopilotButton from "./button.vue";
 export default {
   name: "FactoryDataHeader",
   components: { CopilotButton, FactorySelect },
@@ -42,15 +33,24 @@ export default {
       type: String,
     },
     companyId: {
-      type: String,
+      type: Number,
     },
     period: {
+      type: Number,
+    },
+    than: {
       type: String,
     },
   },
   data() {
     return {
       isFullscreen: false,
+      dataList: [
+        { id: 1, name: "日" },
+        { id: 2, name: "周" },
+        { id: 3, name: "月" },
+        { id: 4, name: "年" },
+      ],
     };
   },
   computed: {},
@@ -84,13 +84,13 @@ export default {
 }
 
 .factory-header > .menu1 {
-  width: 24vw;
-  /* display: flex;
+  width: 20vw;
+  display: flex;
   align-items: center;
-  gap: 8px; */
+  gap: 8px;
 }
 .factory-header > .menu2 {
-  width: 30vw;
+  width: 26vw;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -119,13 +119,14 @@ export default {
 }
 
 .page-title {
-  flex: 1;
+  flex: 1 1 auto;
   font-size: 40px;
   line-height: 70px;
   letter-spacing: 5px;
   font-family: 优设标题黑;
   color: #6db6ff;
-  text-align: right;
+  text-align: center;
   user-select: none;
+  background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat;
 }
 </style>