merge

Reviewed-on: #42

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-06-07 10:32:24
+ # @LastEditTime: 2024-06-17 09:01:32
  # @LastEditors: DY
  # @Description:
 ###
@@ -13,9 +13,11 @@ VUE_APP_TITLE = 发电玻璃智能管控平台
 
 # 芋道管理系统/开发环境
 # VUE_APP_BASE_API = 'http://192.168.1.70:30307'
-# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
+VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
+# 郭
+# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
 # sara
-VUE_APP_BASE_API = 'http://192.168.1.63:48080'
+# VUE_APP_BASE_API = 'http://192.168.1.63:48080'
 # 张一丁
 # VUE_APP_BASE_API = 'http://192.168.4.139:48080'
 

src/assets/icons/svg/factoryWorkOrder.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 15</title>
+    <g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工单管理" transform="translate(-714.000000, -131.000000)">
+            <g id="编组-15" transform="translate(714.000000, 131.000000)">
+                <g id="编组-13备份" fill="#0B58FF" opacity="0.227236793">
+                    <rect id="矩形备份-2" x="0" y="0" width="26" height="26" rx="6"></rect>
+                </g>
+                <g id="公司" transform="translate(4.749735, 4.749735)" fill-rule="nonzero">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16.50053" height="16.50053"></rect>
+                    <path d="M11.933204,3.46511501 L11.933204,1 C11.933204,0.44771525 11.4854888,-1.01453063e-16 10.933204,0 L7.7088886,0 L7.7088886,0 C3.83109495,0 0.687522083,3.16186639 0.687522083,7.06222625 L0.687522083,15.50053 C0.687522083,16.0528147 1.13523733,16.50053 1.68752208,16.50053 L14.8130079,16.50053 C15.3652927,16.50053 15.8130079,16.0528147 15.8130079,15.50053 L15.8130079,6.45996015 L15.8130079,6.45996015 L11.933204,3.46511501 Z M10.8812851,15.4709239 L1.80917527,15.4709239 L1.80917527,6.9505448 C1.81175925,3.6815283 4.55432163,1.03209261 7.93823277,1.02960612 L10.8812851,1.02960612 L10.8812851,15.4709239 Z M14.8298514,15.4709239 L11.9257773,15.4709239 L11.9257773,5.179727 L14.850314,7.12879718 L14.8298514,15.4709239 Z M3.75976827,9.04329837 L8.75976827,9.04329837 L8.75976827,10.3766317 L3.75976827,10.3766317 L3.75976827,9.04329837 Z M3.75976827,6.3766317 L8.75976827,6.3766317 L8.75976827,7.70996504 L3.75976827,7.70996504 L3.75976827,6.3766317 Z" id="形状" fill="#0B58FF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/workProcess.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 13</title>
+    <g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工单管理" transform="translate(-474.000000, -131.000000)">
+            <g id="编组-13" transform="translate(474.000000, 131.000000)">
+                <rect id="矩形备份-2" fill="#66DD89" opacity="0.227236793" x="0" y="0" width="26" height="26" rx="6"></rect>
+                <g id="机床、加工中心" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                    <path d="M18.1818304,15.1909171 L18.1818304,2.5 C18.1818304,2.22385763 17.9579728,2 17.6818304,2 L2.7272736,2 C2.45113122,2 2.2272736,2.22385763 2.2272736,2.5 L2.2272736,10.195451 C2.2272736,10.3084167 2.31885035,10.3999934 2.431816,10.3999934 C2.54478165,10.3999934 2.63635841,10.4915702 2.63635841,10.6045358 L2.63635841,10.999993 C2.63635841,11.3313636 2.90498735,11.5999925 3.23635794,11.5999925 L3.24999521,11.5999925 C3.58889745,11.5999925 3.86363201,11.8747271 3.86363201,12.2136293 L3.86363201,12.7909094 C3.86363201,13.016846 4.04678981,13.2000037 4.2727264,13.2000037 C4.498663,13.2000037 4.6818208,13.016846 4.6818208,12.7909094 L4.6818208,12.2136293 C4.6818208,11.8747271 4.95655535,11.5999925 5.2954576,11.5999925 L5.30909486,11.5999925 C5.64046546,11.5999925 5.9090944,11.3313636 5.9090944,10.999993 L5.9090944,10.6045358 C5.9090944,10.4915702 6.00067115,10.3999934 6.1136368,10.3999934 C6.22660245,10.3999934 6.3181792,10.3084167 6.3181792,10.195451 L6.3181792,6.5 C6.3181792,6.22385763 6.54203683,6 6.8181792,6 L12.772736,6 C13.0488784,6 13.272736,6.22385763 13.272736,6.5 L13.272736,15.1000019 C13.272736,15.3761442 13.0488784,15.6000019 12.772736,15.6000019 L11.7272736,15.6000019 C11.4511312,15.6000019 11.2272736,15.3761442 11.2272736,15.1000019 L11.2272736,14.8000009 C11.2272736,14.3581726 10.869101,14 10.4272727,14 L8.75453855,14 C8.31271023,14 7.95453761,14.3581726 7.95453761,14.8000009 L7.95453761,15.1000019 C7.95453761,15.3761442 7.73067998,15.6000019 7.45453761,15.6000019 L6.4090944,15.6000019 C6.13295202,15.6000019 5.9090944,15.3761442 5.9090944,15.1000019 L5.9090944,14.8000009 C5.9090944,14.3581726 5.55092178,14 5.10909346,14 L3.43635934,14 C2.99453103,14 2.63635841,14.3581726 2.63635841,14.8000009 L2.63635841,15.1000019 C2.63635841,15.3761442 2.41250078,15.6000019 2.13635841,15.6000019 L1.8181792,15.6000019 C1.36631131,15.6000019 1,15.9663132 1,16.4181811 L1,17.5 C1,17.7761424 1.22385763,18 1.5,18 L18.5,18 C18.7761424,18 19,17.7761424 19,17.5 L19,16.0090867 C19,15.7831554 18.8168465,15.6000019 18.5909152,15.6000019 C18.3649839,15.6000019 18.1818304,15.4168484 18.1818304,15.1909171 Z M5.0909056,10.8000056 L3.4545472,10.8000056 L3.4545472,10.3999934 L5.0909056,10.3999934 L5.0909056,10.8000056 Z M5.49999041,6.20000375 L5.49999041,9.60000656 L5.49999041,9.60000656 L3.04544321,9.60000656 L3.04544321,2.80000562 L17.3636416,2.80000562 L17.3636416,15.6000019 L14.0909056,15.6000019 L14.0909056,6.20000375 C14.0909056,5.647719 13.6431904,5.20000375 13.0909056,5.20000375 L6.49999041,5.20000375 C5.94770566,5.20000375 5.49999041,5.647719 5.49999041,6.20000375 Z M8.7727264,14.7999963 L10.4090848,14.7999963 L10.4090848,15.6000019 L8.7727264,15.6000019 L8.7727264,14.7999963 Z M3.4545472,14.7999963 L5.0909056,14.7999963 L5.0909056,15.6000019 L3.4545472,15.6000019 L3.4545472,14.7999963 Z M18.1818304,17.1999944 L1.81816962,17.1999944 L1.81816962,16.3999888 L18.1818304,16.3999888 L18.1818304,17.1999944 Z M12.0454528,4.00000469 C12.0440427,4.28673847 12.1996755,4.55228735 12.4534043,4.69605646 C12.707133,4.83982557 13.0201502,4.83982557 13.2738789,4.69605646 C13.5276077,4.55228735 13.6832405,4.28673847 13.6818304,4.00000469 C13.6832405,3.71327091 13.5276077,3.44772202 13.2738789,3.30395291 C13.0201502,3.1601838 12.707133,3.1601838 12.4534043,3.30395291 C12.1996755,3.44772202 12.0440427,3.71327091 12.0454528,4.00000469 L12.0454528,4.00000469 Z M5.49999041,3.60001125 L11.2272736,3.60001125 L11.2272736,4.39999813 L5.49999041,4.39999813 L5.49999041,3.60001125 Z M15.3181792,11.5999925 L16.136368,11.5999925 L16.136368,14.7999963 L15.3181792,14.7999963 L15.3181792,11.5999925 Z M15.3181792,9.19999438 L16.136368,9.19999438 L16.136368,10.8000056 L15.3181792,10.8000056 L15.3181792,9.19999438 Z M15.3181792,6.79999625 L16.136368,6.79999625 L16.136368,8.4000075 L15.3181792,8.4000075 L15.3181792,6.79999625 Z" id="形状" fill="#43B866"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/store/modules/home.js

@@ -378,10 +378,14 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
         transformRate.target[fId] = componentConversionEfficiency
       }
       // 芯片OEE
-      chipOeeRate.current[fId] = factory.oee;
+      if (factory.glassType === 0) {
+         chipOeeRate.current[fId] = factory.oee;
+      }
       // chipOeeRate.previous[fId] = factory.previousYearOee;
       // 转化效率
-      transformRate.current[fId] = factory.componentConversionEfficiency;
+      if (factory.glassType === 1) {
+        transformRate.current[fId] = factory.componentConversionEfficiency;
+      }
       // transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ;
       // 芯片良率 与 标准组件良率
       if (![0, 1].includes(factory.glassType)) continue;
@@ -448,8 +452,11 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
   if (factoryListResponse && factoryListResponse[0] != null) {
     for (const factory of factoryListResponse) {
       const fId = getFactoryId(factory);
+      console.log('factory.inputNumber', factory, fId);
+      if (factory.glassType === 0) {
+      chipInvest.current[fId] = factory.inputNumber
+      }
       // const preFId = getPreFactoryId(factory);
-
       // 获取目标值
       if (targetListResponse) {
         const { chipYield, componentYield, bipvProductOutput } =
@@ -459,7 +466,6 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
         bipvOutput.target[fId] = bipvProductOutput;
       }
       // 芯片投入
-          chipInvest.current[fId] = factory.inputNumber;
 
       // 产出数据, 0 - （玻璃）芯片产出， 1 - 标准组件产出， 2 - BIPV产出
       // 因为后端写的垃圾数据，所以这里要做一下判断
@@ -467,6 +473,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
       const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
         _t.current[fId] = factory.outputNumber;
     }
+    console.log('chipInvest',chipInvest);
     return {
       chipInvest,
       // ftoInvest,
@@ -475,15 +482,6 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
       stdOutput,
       bipvOutput,
     };
-  }else{
-      return {
-      chipInvest,
-      // ftoInvest,
-      ftoInvest,
-      chipOutput,
-      stdOutput,
-      bipvOutput,
-    }
   }
 }
 

src/views/copilot/efficiency/components/ChipOee.vue

@@ -47,8 +47,11 @@ export default {
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -60,13 +63,13 @@ export default {
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
+          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${dayBeYes}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
@@ -96,7 +99,7 @@ export default {
         items = [
           { label: `${year - 1}年`, color: "#12f7f1" },
           { label: `${year}年`, color: "#58adfa" },
-          { label:  `${year}年`, color: "#58adfa" },
+          { label:  `${year}年目标`, color: "#58adfa" },
 
           // { label: `${year}年目标`, value: valueTuple[2] },
         ];
@@ -163,8 +166,11 @@ function getTemplate(period, dataList, than) {
   // console.log('dataList',dataList);
   let items = [];
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -177,11 +183,11 @@ function getTemplate(period, dataList, than) {
   if (period === '日' && than === '同比') {
     items = [
       {
-        name: `${year-1}年${month}月${today}日`,
+        name: `${year - 1}年${yesterday}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
@@ -189,11 +195,11 @@ function getTemplate(period, dataList, than) {
   } else if (period === '日' && than === '环比') {
     items = [
       {
-        name: `${yesterday}日`,
+        name: `${dayBeYes}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },

src/views/copilot/efficiency/components/TransformRate.vue

@@ -47,8 +47,11 @@ export default {
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -60,13 +63,13 @@ export default {
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
+          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${dayBeYes}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
@@ -96,7 +99,7 @@ export default {
         items = [
           { label: `${year - 1}年`, color: "#12f7f1" },
           { label: `${year}年`, color: "#58adfa" },
-          { label: `${year}年`, color: "#58adfa" },
+          { label: `${year}年目标`, color: "#58adfa" },
 
           // { label: `${year}年目标`, value: valueTuple[2] },
         ];
@@ -154,8 +157,11 @@ function getTemplate(period, dataList,than) {
   // console.log('dataList',dataList);
   let items = [];
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -168,11 +174,11 @@ function getTemplate(period, dataList,than) {
   if (period === '日' && than === '同比') {
     items = [
       {
-        name: `${year-1}年${month}月${today}日`,
+        name: `${year - 1}年${yesterday}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
@@ -180,11 +186,11 @@ function getTemplate(period, dataList,than) {
   } else if (period === '日' && than === '环比') {
     items = [
       {
-        name: `${yesterday}日`,
+        name: `${dayBeYes}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },

src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-06-06 15:12:58
+ * @LastEditTime: 2024-06-14 10:05:37
  * @LastEditors: zhp
  * @Description:
 -->

src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue

@@ -87,8 +87,11 @@ export default {
       const vt = this.valueTuple;
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -100,13 +103,13 @@ export default {
       // const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `${month}月${today}日良率`, },
+          { label: `${yesterday}日良率`, },
-          { label: `${year-1}年${month}月${today}日良率` },
+          { label: `${year - 1}年${yesterday}日良率` },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${month}月${today}日良率` },
           { label: `${yesterday}日良率` },
+          { label: `${dayBeYes}日良率` },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
@@ -139,7 +142,7 @@ export default {
       }
       let titleValue = vt[1] === null ? 0 + '%' : this.formatNumber(vt[1]) + '%',
         subtitle = {
-          日: "本日良率",
+          日: "昨日良率",
           周: "本周良率",
           月: `${month}月良率`,
           年: `${year}良率`,
@@ -161,8 +164,11 @@ export default {
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -174,13 +180,13 @@ export default {
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `${year-1}年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
+          { label: `${year - 1}年${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
-          { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
+          { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
+          { label: `${dayBeYes}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
-          { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
+          { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [

src/views/copilot/efficiency/components/sub/std/StdRateItem.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-06-06 15:14:29
+ * @LastEditTime: 2024-06-14 09:58:01
  * @LastEditors: zhp
  * @Description:
 -->
@@ -69,16 +69,19 @@ export default {
     titlePre() {
       console.log(this.city);
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       const today = new Date().getDate();
       const month = new Date().getMonth() + 1;
       const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
-        return `${year-1}年${month}月${today}日`
+        return `${year - 1}年${yesterday}日`
       } else if (this.period === '日' && this.than === '环比') {
-        return `${yesterday}日`
+        return `${dayBeYes}日`
       } else if (this.period === '周' && this.than === '同比') {
         return `${year-1}年本周`
       } else if (this.period === '周' && this.than === '环比') {
@@ -93,14 +96,18 @@ export default {
     },
     title() {
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       const today = new Date().getDate();
       const month = new Date().getMonth() + 1;
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
-        return `${month}月${today}日`
+        return `${yesterday}日`
       } else if (this.period === '日' && this.than === '环比') {
-        return `${month}月${today}日`
+        return `${yesterday}日`
       } else if (this.period === '周' && this.than === '同比') {
         return `本周`
       } else if (this.period === '周' && this.than === '环比') {

src/views/copilot/factoryData/components/BarChartBase.vue

@@ -36,6 +36,8 @@ export default {
       isFullscreen: false,
       actualOptions: null,
       chart: "",
+      data: [],
+      orderXAxis:[],
       // obj:{
       //   seriesArr: [],
       //   targetProduceArr: [],
@@ -50,7 +52,7 @@ export default {
         grid: {
           left: "7%",
           right: "7%",
-          bottom: "8%",
+          bottom: "15%",
           top: "15%",
         },
         tooltip: {
@@ -66,6 +68,7 @@ export default {
             },
           },
           axisLabel: {
+            rotate:45,
             color: "rgba(255, 255, 255, 0.7)",
             fontSize: 12,
           },
@@ -191,7 +194,7 @@ export default {
   },
   watch: {
     type(val) {
-
+      this.initChart()
     },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     // isFullscreen(val) {
@@ -249,79 +252,62 @@ export default {
       }, 500)();
     },
     initChart() {
-      if (this.chart) {
-        this.chart.dispose();
-      }
-      this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
       if (this.type === '目标产量') {
-        let orderXAxis = []
+        this.orderXAxis = []
-        let targetProduceArr = []
+        this.data = []
         if (this.energyCockpits) {
           this.energyCockpits.forEach(ele => {
-            targetProduceArr.push(ele.targetProduction)
+            this.data.push(ele.targetProduction)
-            orderXAxis.push(ele.workOrderNumber)
+            this.orderXAxis.push(ele.workOrderNumber)
           });
         }
-        actualOptions.xAxis.data = orderXAxis;
-        actualOptions.series[0].data = targetProduceArr;
         // this.initChart(targetProduceArr, orderXAxis)
       } else if (this.type === '计划投入') {
-        let orderXAxis = []
+        this.orderXAxis = []
-        let planIn = []
+        this.data = []
         if (this.energyCockpits) {
           this.energyCockpits.forEach(ele => {
-            planIn.push(ele.plannedInvestment)
+            this.data.push(ele.plannedInvestment)
-            orderXAxis.push(ele.workOrderNumber)
+            this.orderXAxis.push(ele.workOrderNumber)
           });
         }
-        actualOptions.xAxis.data = orderXAxis;
-        actualOptions.series[0].data = planIn;
       } else if (this.type === '实际投入') {
-        let orderXAxis = []
+        this.orderXAxis = []
-        let acIn = []
+        this.data = []
         if (this.energyCockpits) {
           this.energyCockpits.forEach(ele => {
-            acIn.push(ele.actualInvestment)
+            this.data.push(ele.actualInvestment)
-            orderXAxis.push(ele.workOrderNumber)
+            this.orderXAxis.push(ele.workOrderNumber)
           });
         }
-        actualOptions.xAxis.data = orderXAxis;
-        actualOptions.series[0].data = acIn;
       } else if (this.type === '实际产出') {
-        let orderXAxis = []
+        this.orderXAxis = []
-        let acProduceArr = []
+        this.data = []
         if (this.energyCockpits) {
           this.energyCockpits.forEach(ele => {
-            acProduceArr.push(ele.actualProduction)
+            this.data.push(ele.actualProduction)
-            orderXAxis.push(ele.workOrderNumber)
+            this.orderXAxis.push(ele.workOrderNumber)
           });
         }
-        actualOptions.xAxis.data = orderXAxis;
-        actualOptions.series[0].data = acProduceArr;
       } else if (this.type === '废品数量') {
-        let orderXAxis = []
+        this.orderXAxis = []
-        let scrapNum = []
+        this.data  = []
         if (this.energyCockpits) {
           this.energyCockpits.forEach(ele => {
-            scrapNum.push(ele.wasteNum)
+            this.data.push(ele.wasteNum)
-            orderXAxis.push(ele.workOrderNumber)
+            this.orderXAxis.push(ele.workOrderNumber)
           });
         }
-        actualOptions.xAxis.data = orderXAxis;
-        actualOptions.series[0].data = scrapNum;
       } else if (this.type === '待再加工') {
-        let orderXAxis = []
+        this.orderXAxis = []
-        let processNum = []
+        this.data = []
         if (this.energyCockpits) {
           this.energyCockpits.forEach(ele => {
             console.log(ele.reworkNum);
-            processNum.push(ele.reworkNum)
+            this.data.push(ele.reworkNum)
-            orderXAxis.push(ele.workOrderNumber)
+            this.orderXAxis.push(ele.workOrderNumber)
           });
         }
-        actualOptions.xAxis.data = orderXAxis;
-        actualOptions.series[0].data = processNum;
       }
 
       // let seriesArr = [
@@ -370,6 +356,13 @@ export default {
       // actualOptions.series[1].name = seriesArr[1].name;
       // actualOptions.series[2].data = seriesArr[2].data;
       // actualOptions.series[2].name = seriesArr[2].name;
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.xAxis.data = this.orderXAxis;
+      actualOptions.series[0].data = this.data;
       this.actualOptions = actualOptions;
       this.chart.setOption(actualOptions);
     },

src/views/copilot/factoryData/components/ChipOee.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-29 14:48:06
- * @LastEditTime: 2024-06-07 09:30:17
+ * @LastEditTime: 2024-06-07 14:11:01
  * @LastEditors: zhp
  * @Description:
 -->
@@ -49,7 +49,7 @@ export default {
   computed: {
     xAxis() {
       console.log(' this.companyId', this.companyId);
-      return this.companyId === 0 ? ["fto投入", "芯片产量", "标准组件产量"] : ["fto投入", "芯片产量", "标准组件产量", 'BIPV产量'];
+      return this.companyId === 0 ? ["FTO投入", "芯片产量", "标准组件产量"] : ["FTO投入", "芯片产量", "标准组件产量", 'BIPV产量'];
     },
     legend() {
       let items = [];

src/views/copilot/factoryData/hdIndex.vue

@@ -9,7 +9,7 @@
             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
         </db-container>
         <left-container title="工单监控" icon="order">
-          <order :prodOrder="prodOrder" />
+          <order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
         </left-container>
         <!-- <db-container title="" icon="store"> -->
         <!-- <store :stock="stock" /> -->
@@ -47,6 +47,7 @@ export default {
   },
   data() {
     return {
+      type: '目标产量',
       companyId: 1,
       companyName: "邯郸中建材光电材料有限公司",
       period: 1,
@@ -75,6 +76,10 @@ export default {
     this.getMes();
   },
   methods: {
+    updateType(val) {
+      console.log(val)
+      this.type = val
+    },
     updateCompany(obj) {
       this.companyId = obj.companyId;
       this.companyName = obj.companyName;

src/views/copilot/yield/components/ChipInvest.vue

@@ -45,8 +45,11 @@ export default {
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -58,13 +61,13 @@ export default {
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
+          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${dayBeYes}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
@@ -149,8 +152,11 @@ export default {
 function getTemplate(period, dataList,than) {
   let items = [];
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -163,11 +169,11 @@ function getTemplate(period, dataList,than) {
   if (period === '日' && than === '同比') {
     items = [
       {
-        name: `${year-1}年${month}月${today}日`,
+        name: `${year - 1}年${yesterday}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
@@ -175,11 +181,11 @@ function getTemplate(period, dataList,than) {
   } else if (period === '日' && than === '环比') {
     items = [
       {
-        name: `${yesterday}日`,
+        name: `${dayBeYes}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },

src/views/copilot/yield/components/FtoInvest.vue

@@ -45,8 +45,11 @@ export default {
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -58,13 +61,13 @@ export default {
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
+          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${dayBeYes}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
@@ -150,9 +153,15 @@ export default {
 
 function getTemplate(period, dataList,than) {
   let items = [];
+  // var day1 = new Date();
+  // day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  // var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -165,11 +174,11 @@ function getTemplate(period, dataList,than) {
   if (period === '日' && than === '同比') {
     items = [
       {
-        name: `${year-1}年${month}月${today}日`,
+        name: `${year - 1}年${yesterday}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
@@ -177,11 +186,11 @@ function getTemplate(period, dataList,than) {
   } else if (period === '日' && than === '环比') {
     items = [
       {
-        name: `${yesterday}日`,
+        name: `${dayBeYes}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },

src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-20 13:32:59
- * @LastEditTime: 2024-06-06 08:42:04
+ * @LastEditTime: 2024-06-14 09:44:42
  * @LastEditors: zhp
  * @Description:
 -->
@@ -78,13 +78,13 @@ export default {
     valueTuple() {
       // [previousValue, currentValue, sumValue?]
       const getter = this.$store.getters.copilot.yield[this.dataSourceField];
-      if (this.period === "日" || this.period === "周") {
+      // if (this.period === "日" || this.period === "周") {
-        console.log(this.period)
+      //   console.log(this.period)
-        return [
+      //   return [
-          getter.previous[this.factoryId],
+      //     getter.previous[this.factoryId],
-          getter.current[this.factoryId],
+      //     getter.current[this.factoryId],
-        ];
+      //   ];
-      }
+      // }
       // [100, 200, 200]
       return [
         getter.previous[this.factoryId],
@@ -100,8 +100,11 @@ export default {
       const vt = this.valueTuple;
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -113,14 +116,14 @@ export default {
       // const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `${month}月${today}日累计`,},
+          { label: `${yesterday}日累计`,},
-          { label: `${year-1}年${month}月${today}日累计` },
+          { label: `${year - 1}年${yesterday}累计` },
           { label: `${month}月${today}日目标`, },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${month}月${today}日累计`},
+          { label: `${yesterday}日累计`},
-          { label: `${yesterday}日累计` },
+          { label: `${dayBeYes}日累计` },
           { label: `${month}月${today}日目标`, },
         ];
       } else if (this.period === '周' && this.than === '同比') {
@@ -160,9 +163,9 @@ export default {
           : (vt[1] != 0 && vt[1] != null) && vt[2] == 0
             ? "100%" : '0%',
         subtitle =
-          this.period == "日" ? `${month}月${today}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
+          this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
-      console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],)
+      console.log('titleValue', items)
-      console.log(this.valueTuple[2]- this.valueTuple[1])
+      // console.log(this.valueTuple[2]- this.valueTuple[1])
       return getOptions({
         titleValue,
         subtitle,
@@ -221,8 +224,12 @@ function calculateItems(period, valueTuple, than) {
   console.log('valueTuple', valueTuple);
   let items = [];
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
+
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -234,14 +241,14 @@ function calculateItems(period, valueTuple, than) {
   const year = new Date().getFullYear();
   if (period === '日' && than === '同比') {
     items = [
-      { label: `${year-1}年${month}月${today}日累计`, value: valueTuple[0] },
+      { label: `${year - 1}年${yesterday}累计`, value: valueTuple[0] },
-      { label: `${month}月${today}日累计`, value: valueTuple[1] },
+      { label: `${yesterday}累计`, value: valueTuple[1] },
       { label: `${month}月${today}日目标`, value: valueTuple[2] },
     ];
   } else if (period === '日' && than === '环比') {
     items = [
-      { label: `${yesterday}日累计`, value: valueTuple[0] },
+      { label: `${dayBeYes}日累计`, value: valueTuple[0] },
-      { label: `${month}月${today}日累计`, value: valueTuple[1] },
+      { label: `${yesterday}日累计`, value: valueTuple[1] },
       { label: `${month}月${today}日目标`, value: valueTuple[2] },
     ];
   } else if (period === '周' && than === '同比') {

src/views/dashboard/charts/ChipYieldChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-06-05 14:12:31
+ * @LastEditTime: 2024-06-14 09:03:26
  * @LastEditors: zhp
  * @Description:
 -->
@@ -221,6 +221,7 @@ export default {
       };
     },
     actualOptions() {
+      console.log('this.output.current / this.output.target', this.output.current/this.output.target);
       const year = new Date().getFullYear()
       const options = JSON.parse(JSON.stringify(this.options));
       // console.log('options', options);
@@ -228,7 +229,7 @@ export default {
       if (!this.output.target) options.title.text = "0%";
       else
         options.title.text =
-          (this.output.current / this.output.target) * 100 + "%";
+          ((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
       // 外环
       if (
         this.output.current == this.output.target &&

src/views/dashboard/charts/LeftChartBase.vue

@@ -59,7 +59,7 @@ export default {
       actualOptions: null,
       options: {
         grid: {
-          left: "3%",
+          left: "5%",
           right: "4%",
           bottom: "0",
           top: "15%",

src/views/dashboard/charts/RightChartBase.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-06-04 15:35:54
+ * @LastEditTime: 2024-06-14 09:16:09
  * @LastEditors: zhp
  * @Description:
 -->
@@ -65,7 +65,7 @@ export default {
       isFullscreen: false,
       options: {
         grid: {
-          left: "3%",
+          left: "5%",
           right: "4%",
           bottom: "0",
           top: "18%",

src/views/login.vue

@@ -10,7 +10,7 @@
           style="
             position: absolute;
             top: 12%;
-            left: 20%;
+            left: 15%;
             user-select: none;
             display: flex;
             flex-direction: column;
@@ -31,7 +31,7 @@
           <p
             style="
               margin: 0;
-              font-size: 26px;
+              font-size: 24px;
               letter-spacing: 1px;
               color: #26b9de;
               opacity: 75%;
@@ -52,8 +52,8 @@
           </p>
         </div>
         <img
-          src="../assets/images/login.png"
+          src="../assets/images/map.png"
-          style="position: absolute; top: 30%; left: 15%; width: 40vw"
+          style="position: absolute; top: 00%; left: 11%; width: 50vw"
           alt=""
         />
       </div>

src/views/produce/target/add-or-updata.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-17 16:31:51
- * @LastEditTime: 2024-06-04 16:45:52
+ * @LastEditTime: 2024-06-07 14:44:22
  * @LastEditors: DY
  * @Description:
 -->
@@ -170,6 +170,11 @@
               <el-input-number v-model="dataForm.componentAveragePower" :precision="2" controls-position="right" placeholder="请输入标准组件平均功率" style="width: 100%" />
             </el-form-item>
           </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准组件转化效率" prop="componentConversionEfficiency">
+              <el-input-number v-model="dataForm.componentConversionEfficiency" :precision="2" controls-position="right" placeholder="请输入标准组件转化效率" style="width: 100%" />
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-divider></el-divider>
 
@@ -293,7 +298,8 @@ export default {
         bipvInsideMaterialCost: undefined,
         bipvOeeMaterialCost: undefined,
         bipvComprehensiveMaterialCost: undefined,
-        molybdenumElectrodeInput: undefined
+        molybdenumElectrodeInput: undefined,
+        componentConversionEfficiency: undefined
       },
       // materialList: [],
       dataRule: {

src/views/produce/target/detail-or-updata.vue

@@ -1,14 +1,15 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-06-04 16:54:46
+ * @LastEditTime: 2024-06-14 10:41:23
  * @LastEditors: DY
  * @Description:
 -->
 <template>
-  <el-drawer class="drawer" :visible.sync="visible" size="58%" @closed="$emit('destroy')">
+  <el-drawer class="drawer" :visible.sync="visible" size="70%" @closed="$emit('destroy')">
     <small-title slot="title" :no-padding="true">
-      {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }}
+      <!-- {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }} -->
+      生产目标详情
     </small-title>
     <div class="detailBox">
       <el-row :gutter="24">
@@ -113,6 +114,10 @@
           <p class="title">标准组件平均功率(W)</p>
           <p class="text">{{ dataForm.componentAveragePower }}</p>
         </el-col>
+        <el-col :span="6">
+          <p class="title">标准组件转化效率</p>
+          <p class="text">{{ dataForm.componentConversionEfficiency }}</p>
+        </el-col>
       </el-row>
       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
         {{ 'BIPV产品' }}
@@ -197,35 +202,9 @@ export default {
       ],
       sectionList: [],
       visible: false,
-      dataForm: {
+      dataForm: {}
-        id: undefined,
-        logTime: undefined,
-        source: 1,
-        detId: undefined,
-        workOrderId: null,
-        teamId: undefined,
-        num: undefined,
-        lineId: undefined,
-        description: undefined,
-        // description: undefined,
-        remark: undefined,
-      },
-      // materialList: [],
-      dataRule: {
-        // materialId: [{ required: true, message: "", trigger: "blur" }],
-        workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
-        num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
-        detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],
-
-        logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
-      }
     };
   },
-  mounted() {
-    this.getDict()
-    console.log('我看看', this.dataForm)
-    // this.getCurrentTime()
-  },
   methods: {
     init(id) {
       this.visible = true
@@ -235,102 +214,7 @@ export default {
           this.dataForm = res.data
         })
       }
-    },
+    }
-    // getCurrentTime() {
-    //   // new Date().Format("yyyy-MM-dd HH:mm:ss")
-    //   this.dataForm.logTime = new Date()
-    //   // this.dataForm.logTime = year + "-" + month + "-" + day;
-    //   console.log(this.dataForm.logTime);
-    // },
-    async getDict() {
-    //   // 物料列表
-    //   const res = await getList()
-    //   this.typeList = res.data
-    //   getWorkOrderList().then((res) => {
-    //     console.log(res);
-    //     // console.log(response);
-    //     this.workOrderList = res.data.map((item) => {
-    //       return {
-    //         name: item.name,
-    //         id: item.id
-    //       }
-    //     })
-    //     // console.log(this.formConfig[0].selectOptions);
-    //     // this.listQuery.total = response.data.total;
-    //   })
-    //   getLineList().then((res) => {
-    //     console.log(res);
-    //     // console.log(response);
-    //     this.lineList = res.data.map((item) => {
-    //       return {
-    //         name: item.name,
-    //         id: item.id
-    //       }
-    //     })
-    //     // console.log(this.formConfig[0].selectOptions);
-    //     // this.listQuery.total = response.data.total;
-    //   })
-    //   getDetList().then((res) => {
-    //     console.log(res);
-    //     // console.log(response);
-    //     this.detList = res.data.map((item) => {
-    //       return {
-    //         name: item.content,
-    //         id: item.id
-    //       }
-    //     })
-    //     // console.log(this.formConfig[0].selectOptions);
-    //     // this.listQuery.total = response.data.total;
-    //   })
-    //   getTeamList().then((res) => {
-    //     console.log(res);
-    //     // console.log(response);
-    //     this.teamList = res.data.map((item) => {
-    //       return {
-    //         name: item.name,
-    //         id: item.id
-    //       }
-    //     })
-    //     // console.log(this.formConfig[0].selectOptions);
-    //     // this.listQuery.total = response.data.total;
-    //   })
-    // },
-    // async getWorksectionById(lineId) {
-    //   if (lineId) {
-    //     const { code, data } = await this.$axios({
-    //       url: '/base/core-workshop-section/listByParentId',
-    //       method: 'get',
-    //       params: {
-    //         id: lineId,
-    //       },
-    //     });
-    //     if (code == 0) {
-    //       console.log(data)
-    //       this.sectionList = data.map((item) => {
-    //         return {
-    //           name: item.name,
-    //           id: item.id,
-    //         };
-    //       });
-    //     }
-    //   } else {
-    //     this.$axios({
-    //       url: '/base/core-workshop-section/listAll',
-    //       method: 'get',
-    //       // params: {
-    //       //   id: lineId,
-    //       // },
-    //     }).then((res) => {
-    //       // console.log(data)
-    //       this.sectionList = res.data.map((item) => {
-    //         return {
-    //           name: item.name,
-    //           id: item.id,
-    //         };
-    //       });
-    //     })
-    //   }
-    },
   },
 };
 </script>

src/views/produce/workOrder/add-or-updata.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-06-07 14:15:00
+ * @LastEditTime: 2024-06-14 10:55:21
  * @LastEditors: DY
  * @Description:
 -->
@@ -308,7 +308,7 @@ export default {
       this.equipmentLineChart = echarts.init(this.$refs['equipmentLine'])
       this.equipmentLineChart.setOption({
         title: {
-          text: '在制品分布',
+          text: '待制品分布',
           left: 'center'
           // subtext: 'Fake Data'
         },
@@ -339,7 +339,7 @@ export default {
           {
             data: yAxisList,
             type: 'bar',
-            barWidth: '40px'
+            barWidth: '50%'
           }
         ]
       }, true)
@@ -351,6 +351,9 @@ export default {
           text: '历史趋势',
           left: 'center' // 设置标题居中
         },
+        tooltip: {
+          trigger: 'item'
+        },
         xAxis: {
           type: 'category',
           data: xAxisList,

src/views/produce/workOrder/index.vue

@@ -1,28 +1,56 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-06-07 10:35:48
+ * @LastEditTime: 2024-06-14 11:04:04
  * @LastEditors: DY
  * @Description:
 -->
 <template>
   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
-    <div class="app-container" style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
+    <el-row :gutter="10">
-      <p style="margin-bottom: 0">数据概览</p>
+      <el-col :span="4">
-      <div class="view">
+        <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
-        <div v-for="(item, index) in data" :key="index">
+        <!-- <p style="margin-bottom: 0">数据概览</p> -->
-          <p style="color: rgb(194,128,255)">{{ item }}</p>
+          <div class="view">
-          <p>{{ index }}</p>
+            <div style="padding: 10px 0; width: 100%">
+              <div class="topDiv">
+                <div style="width: 4px; height: 52px; background: #71CC8C; border-radius: 2px;"></div>
+                <div class="centerDiv">
+                  <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ inputNum }}</span>
+                  <span style="font-size: 14px; color: rgba(0,0,0,0.85);">在制工单数量</span>
+                </div>
+                <svg-icon icon-class="workProcess" style="width: 26px; height: 26px" />
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
+      </el-col>
-    </div>
+      <el-col :span="20">
-    <div class="app-container" style="margin-top: 8px; height: auto;">
+        <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
+        <!-- <p style="margin-bottom: 0">数据概览</p> -->
+          <div class="view">
+            <div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index">
+              <div class="topDiv">
+                <div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div>
+                <div class="centerDiv">
+                  <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span>
+                  <span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span>
+                </div>
+                <svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- <div class="app-container" style="margin-top: 8px; height: auto;">
+      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
+    </div> -->
+    <div class="app-container" style="margin-top: 8px;flex-grow: 1;">
+      <!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> -->
       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
-    </div>
-    <div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;">
-      <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" />
       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
-        :table-data="tableData">
+        :table-data="tableData" :max-height="tableH">
         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
           :method-list="tableBtn" @clickBtn="handleClick" />
       </base-table>
@@ -43,6 +71,7 @@ import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/or
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
 import moment from 'moment'
+import tableHeightMixin from "@/mixins/tableHeightMixin";
 // import ButtonNav from '@/components/ButtonNav'
 import basicPage from '@/mixins/basic-page'
 import AddOrUpdate from './add-or-updata';
@@ -53,9 +82,13 @@ import { publicFormatter } from "@/utils/dict";
 // import * as XLSX from 'xlsx'
 export default {
   components: { lineChart, AddOrUpdate },
-  mixins: [basicPage],
+  mixins: [basicPage, tableHeightMixin],
 	data() {
     return {
+      factorys: ['瑞昌中建材', '邯郸中建材', '株洲中建材', '佳木斯中建材', '成都中建材', '凯盛光伏', '蚌埠兴科'],
+      factoryNum: [0, 0, 0, 0, 0, 0, 0],
+      inputNum: 0,
+      heightNum: 210,
       factoryList,
       factoryArray,
       listQuery: {
@@ -179,6 +212,8 @@ export default {
         {
           prop: 'workOrderNumber',
           label: '工单号',
+          minWidth: 120,
+          showOverflowtooltip: true
           // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
         },
         {
@@ -211,8 +246,8 @@ export default {
         {
           prop: 'orderStatus',
           label: '工单状态',
-          filter: publicFormatter('workorder_status')
+          // filter: publicFormatter('workorder_status')
-          // filter: (val) => ['未开始', '生产中', '已完成'][val],
+          filter: (val) => ['未开始', '生产中', '已完成'][val],
         },
         {
           prop: 'startTime',
@@ -229,15 +264,15 @@ export default {
       ],
       tableData: [],
       xAxis: [],
-      lineData: {},
+      lineData: {}
-      data: {}
+      // data: {}
 			// proLineList: [],
 			// all: {}
 		};
   },
 	created() {
     const today = new Date()
-    const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
+    const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
     this.listQuery.time = [moment(sevenDaysAgo).format('yyyy-MM-DD'), moment(today).format('yyyy-MM-DD')]
     this.formConfig[2].defaultSelect = this.listQuery.time
 	},
@@ -247,8 +282,19 @@ export default {
   methods: {
     getOverView() {
       getOverView().then(res => {
-        this.data = res.data
+        // this.data = res.data
-        console.log('aa', res.data)
+        if (res.code === 0) {
+          for(const i in res.data) {
+            if (i === '在制工单数量') {
+              this.inputNum = res.data[i]
+            } else {
+              const index = this.factorys.indexOf(i)
+              if (index > -1) {
+                this.factoryNum[index] = res.data[i]
+              }
+            }
+          }
+        }
       })
     },
     otherMethods(val) {
@@ -317,10 +363,18 @@ export default {
 </script>
 
 <style scoped>
-/* .blueTip { */
+.centerDiv {
-	/* padding-bottom: 10px; */
+  display: flex;
-/* } */
+  flex-direction: column;
-/* .blueTi */
+  justify-content: flex-start;
+}
+.topDiv {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-start;
+  flex: 1;
+}
 .view {
   display: flex;
   justify-content: space-around;
@@ -342,7 +396,7 @@ export default {
   background-color: #fff;
   border-radius: 4px;
   padding: 16px 16px 0;
-  height: calc(100vh - 134px);
+  height: calc(100vh - 80px);
   overflow: auto;
 }
 </style>

src/views/report/chipOEEBM/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">芯片OEE对标</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "ChipOEEBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/%",
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+            ],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2023年4月",
+            data: [
+              { name: "%", value: 57.5 },
+              { name: "%", value: 21.66 },
+              { name: "%", value: 18.4 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [-18, -16],
+              color: "#68C483",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2024年4月",
+            data: [
+              { name: "%", value: 23.33 },
+              { name: "%", value: 7.02 },
+              { name: "%", value: 80.2 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+        ],
+      },
+      chartId: "chipOEEBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "ChipOEEBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "ChipOEEBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "ChipOEEBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>

src/views/report/chipOutputBM/index.vue

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">芯片产量对标</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "ChipOutputBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/片",
+        series: [
+          {
+            name: "2024年4月目标值",
+            // data: [3000, 2000, 3000],
+            // data: [6800, 5000, 8900],
+            // data: [12000, 17000, 19000],
+            data: [560000, 540000, 600000],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+            },
+          },
+          {
+            name: "2023年4月",
+            // data: [2100, 800, 1500],
+            // data: [9500, 7200, 9901],
+            // data: [14666, 15000, 17888],
+            data: [550000, 456666, 590000],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              // position: [-5, -16],
+              // position: [-5, -16],
+              // position: [-10, -16],
+              position: [-17, -16],
+              color: "#68C483",
+            },
+          },
+          {
+            name: "2024年4月",
+            // data: [2100, 900, 1300],
+            // data: [9100, 7300, 9700],
+            // data: [14666, 15300, 18000],
+            data: [556666, 456666, 650000],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+            },
+          },
+        ],
+      },
+      chartId: "chipOutputBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "ChipOutputBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "ChipOutputBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "ChipOutputBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>

src/views/report/chipPerCapitaBM/index.vue

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">芯片人均产量对标</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "ChipPerCapitaBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/片",
+        series: [
+          {
+            name: "2024年4月目标值",
+            // data: [3000, 2000, 3000],
+            // data: [6800, 5000, 8900],
+            // data: [12000, 17000, 19000],
+            data: [560000, 540000, 600000],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+            },
+          },
+          {
+            name: "2023年4月",
+            // data: [2100, 800, 1500],
+            // data: [9500, 7200, 9901],
+            // data: [14666, 15000, 17888],
+            data: [550000, 456666, 590000],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              // position: [-5, -16],
+              // position: [-5, -16],
+              // position: [-10, -16],
+              position: [-17, -16],
+              color: "#68C483",
+            },
+          },
+          {
+            name: "2024年4月",
+            // data: [2100, 900, 1300],
+            // data: [9100, 7300, 9700],
+            // data: [14666, 15300, 18000],
+            data: [556666, 456666, 650000],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+            },
+          },
+        ],
+      },
+      chartId: "chipPerCapitaBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "ChipPerCapitaBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "ChipPerCapitaBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "ChipPerCapitaBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>

src/views/report/chipYieldBM/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">芯片良率对标</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "ChipYieldBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/%",
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+            ],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2023年4月",
+            data: [
+              { name: "%", value: 57.5 },
+              { name: "%", value: 21.66 },
+              { name: "%", value: 18.4 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [-18, -16],
+              color: "#68C483",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2024年4月",
+            data: [
+              { name: "%", value: 23.33 },
+              { name: "%", value: 7.02 },
+              { name: "%", value: 80.2 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+        ],
+      },
+      chartId: "chipYieldBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "ChipYieldBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "ChipYieldBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "ChipYieldBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>

src/views/report/components/bmLineBar.vue

@@ -0,0 +1,213 @@
+<template>
+  <div>
+    <!-- 暂无数据 -->
+    <div
+      class="no-data-bg"
+      style="position: relative; left: 50%; transform: translateX(-50%)"
+      v-show="this.chartMsg.series.length === 0"
+    ></div>
+    <!-- 图例 -->
+    <div v-show="this.chartMsg.series.length > 0">
+      <div class="legend">
+        <span class="item" v-for="item in legendList" :key="item.id">
+          <span
+            v-if="item.type === 1"
+            class="block"
+            :style="{ backgroundColor: item.color }"
+          ></span>
+          <span
+            v-if="item.type === 2"
+            class="line"
+            :style="{ backgroundColor: item.color }"
+          >
+            <span
+              class="line-block"
+              :style="{ backgroundColor: item.color }"
+            ></span>
+          </span>
+          {{ item.name }}</span
+        >
+      </div>
+      <div
+        :id="chartId"
+        :style="{ width: '100%', height: chartHeight + 'px' }"
+      ></div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { debounce } from "@/utils/debounce";
+export default {
+  name: "bmLineBar",
+  data() {
+    return {
+      myChart: "",
+      option: {
+        color: [],
+        // color: ["#8EF0AB", "#63BDFF", "#288AFF"],
+        grid: {
+          left: 100,
+          right: 10,
+          bottom: 30,
+          top: 30,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          formatter: function (params) {
+            var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
+                `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${
+                  params[i].name === "%"
+                    ? (params[i].value ? params[i].value.toFixed(2) : 0.0) +
+                      params[i].name
+                    : params[i].value
+                }</span>`;
+            }
+            return res;
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisTick: {
+            show: false,
+          },
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "",
+          nameTextStyle: {
+            fontSize: 12,
+            align: "right",
+          },
+          axisLabel: {},
+        },
+        series: [],
+      },
+    };
+  },
+  props: {
+    chartHeight: {
+      type: Number,
+      default: 300,
+    },
+    legendList: {
+      type: Array,
+      default: () => [],
+    },
+    chartMsg: {
+      type: Object,
+      default: () => {},
+    },
+    chartId: {
+      type: String,
+      default: "bmChart",
+    },
+    chartNum: {
+      type: Number,
+      default: 1,
+    },
+  },
+  watch: {
+    chartHeight: {
+      handler(newVal) {
+        this.chartHeight = newVal;
+      },
+    },
+    chartNum(val) {
+      this.canvasReset();
+    },
+    chartMsg: {
+      handler(newVal) {
+        this.canvasReset();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.canvasReset();
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.getMes();
+      }, 500)();
+    },
+    getMes() {
+      if (this.myChart) {
+        this.myChart.dispose();
+      }
+      var chartDom = document.getElementById(this.chartId);
+      this.myChart = echarts.init(chartDom);
+      this.option.color = this.chartMsg.color;
+      this.option.xAxis.data = this.chartMsg.xData;
+      this.option.yAxis.name = this.chartMsg.yName;
+      if (
+        this.chartMsg.series.length > 0 &&
+        this.chartMsg.series[0].data[0].name === "%"
+      ) {
+        this.option.yAxis.axisLabel = {
+          formatter: function (value) {
+            return value + ".00%";
+          },
+        };
+      } else {
+        this.option.yAxis.axisLabel = {
+          formatter: function (value) {
+            return value;
+          },
+        };
+      }
+      // this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
+      this.option.series = this.chartMsg.series;
+      this.myChart.setOption(this.option);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.legend {
+  text-align: right;
+  .item {
+    display: inline-block;
+    margin-right: 10px;
+    font-size: 14px;
+    color: #8c8c8c;
+    .block {
+      width: 10px;
+      height: 10px;
+      display: inline-block;
+      margin-right: 4px;
+    }
+    .line {
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+      display: inline-block;
+      margin-right: 4px;
+      position: relative;
+      .line-block {
+        position: absolute;
+        width: 20px;
+        height: 2px;
+        left: -5px;
+        top: 4px;
+      }
+    }
+  }
+}
+</style>

src/views/report/components/bmSearchBar.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-form :model="form" :inline="true" ref="bmSearchBarForm" class="blueTip">
+    <el-form-item label="时间维度" prop="type">
+      <el-select
+        size="small"
+        v-model="form.type"
+        placeholder="请选择"
+        style="width: 100px"
+      >
+        <el-option
+          v-for="item in typeList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item v-show="form.type === 1" label="时间" prop="dayTime">
+      <el-date-picker
+        size="small"
+        clearable
+        v-model="form.dayTime"
+        type="date"
+        placeholder="选择日期"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item v-show="form.type === 2" label="时间" prop="weekTime">
+      <el-date-picker
+        v-model="form.weekTime"
+        type="week"
+        format="yyyy 第 WW 周"
+        placeholder="选择周"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item v-show="form.type === 3" label="时间" prop="monthTime">
+      <el-date-picker
+        v-model="form.monthTime"
+        type="month"
+        placeholder="选择月份"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item v-show="form.type === 4" label="时间" prop="yearTime">
+      <el-date-picker
+        v-model="form.yearTime"
+        type="year"
+        placeholder="选择年份"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item label="工厂" prop="factory">
+      <el-select
+        size="small"
+        multiple
+        v-model="form.factory"
+        placeholder="请选择"
+        style="width: 250px"
+      >
+        <el-option
+          v-for="item in factoryList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="small" @click="getDataList"
+        >查询</el-button
+      >
+      <el-divider direction="vertical"></el-divider>
+      <el-button type="primary" size="small" plain @click="handleExport"
+        >导出</el-button
+      >
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+export default {
+  name: "bmSearchBar",
+  data() {
+    return {
+      form: {
+        type: 1,
+        dayTime: "",
+        weekTime: "",
+        monthTime: "",
+        yearTime: "",
+        factory: "",
+      },
+      typeList: [
+        { id: 1, name: "日" },
+        { id: 2, name: "周" },
+        { id: 3, name: "月" },
+        { id: 4, name: "年" },
+      ],
+      factoryList: [
+        { id: 1, name: "瑞昌" },
+        { id: 2, name: "邯郸" },
+      ],
+    };
+  },
+  methods: {
+    getDataList() {
+      console.log(this.form);
+      this.$emit("getSearch", this.form);
+    },
+    handleExport() {
+      this.$emit("handleExport");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.el-divider--vertical {
+  height: 24px;
+}
+.blueTip::before {
+  display: inline-block;
+  content: "";
+  width: 4px;
+  height: 18px;
+  background: #0b58ff;
+  border-radius: 1px;
+  margin-right: 8px;
+  margin-top: 8px;
+}
+</style>

src/views/report/components/chartButton.vue

@@ -0,0 +1,148 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-07 08:37:17
+ * @LastEditTime: 2024-06-07 11:04:41
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <button
+    class="chart-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,
+    },
+  },
+  mounted() {
+  },
+};
+</script>
+
+<style>
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+  background: none;
+}
+</style>
+
+<style scoped>
+.skate {
+  /* flex: 1; */
+  position: relative;
+  width: 88px;
+  height: 32px;
+  background: #01306C;
+  /* border-radius: 4px 0px 0px 4px; */
+  backdrop-filter: blur(3px);
+  /* text-align: center;
+  padding: 12px;
+  padding-left: 20px;
+  color: #fff;
+  font-size: 18px; */
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 12px;
+  color: #FFFFFF;
+  line-height: 22px;
+  letter-spacing: 5px;
+  text-align: center;
+  font-style: normal;
+  /* margin-right: 1px; */
+  /* letter-spacing: 10px; */
+  cursor: pointer;
+}
+
+.chart-btn:nth-child(6)::after {
+  content: '';
+  width: 0;
+  height: 0;
+  display: none;
+}
+.chart-btn {
+  /* flex: 1; */
+  position: relative;
+  width: 88px;
+  height: 32px;
+  background: #01306C;
+  /* border-radius: 4px 0px 0px 4px; */
+  backdrop-filter: blur(3px);
+  /* text-align: center;
+  padding: 12px;
+  padding-left: 20px;
+  color: #fff;
+  font-size: 18px; */
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 12px;
+  color: #FFFFFF;
+  line-height: 22px;
+  letter-spacing: 5px;
+  text-align: center;
+  font-style: normal;
+  /* margin-right: 1px; */
+  /* letter-spacing: 10px; */
+  cursor: pointer;
+}
+.chart-btn::after {
+  /* flex: 1; */
+  /* position: relative; */
+  content: "";
+  position: absolute;
+    /* width: 16px; */
+    /* height: 16px; */
+  top: px;
+  right: -1px;
+  width: 1px;
+  height: 23px;
+  border: 1px solid #010D18;
+}
+.chart-btn.active {
+  background: #1D74D8;
+  /* border-radius: 4px;; */
+}
+.chart-btn.active::after {
+  display: none;
+  /* border-radius: 4px;; */
+}
+/* .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/report/components/lineChart.vue

@@ -0,0 +1,218 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-11 09:48:40
+ * @LastEditTime: 2024-06-11 10:22:05
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <!-- <div> -->
+    <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
+    <div :id="id" :class="className" style="height: 100%,width: 100%;;" />
+  <!-- </div> -->
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { debounce } from "@/utils/debounce";
+export default {
+  name: 'OverviewBar',
+  // mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'reportChart'
+    },
+    className: {
+      type: String,
+      default: 'reportChart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    legendPosition: {
+      type: String,
+      default: 'center'
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  mounted() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      console.log(1111)
+      this.chart = echarts.init(document.getElementById(this.id))
+      console.log(this.$parent);
+      this.chart.setOption({
+        title: {
+          text: '',
+          // subtext: 'Fake Data'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
+        legend: {
+          data: ['芯片总功率', '标准组件总功率', '转化效率'],
+          right: '90px',
+          top: '0%',
+          icon: 'rect',
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 40,
+        },
+        // toolbox: {
+        //   show: true,
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            // prettier-ignore
+            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          },
+          {
+            type: 'value',
+            // name: 'Temperature',
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+              formatter: '{value}%'
+            }
+          }
+        ],
+        grid: {
+          top: '20%',
+          left: "1%",
+          right: "3%",
+          bottom: "1%",
+          containLabel: true
+        },
+        series: [
+          {
+            name: '芯片总功率',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(142, 240, 171, 1)' //改变折线颜色
+                }
+              }
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ],
+          },
+          {
+            name: '标准组件总功率',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: '#288AFF', //改变折线点的颜色
+                lineStyle: {
+                  color: '#288AFF' //改变折线颜色
+                }
+              }
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ],
+          },
+          {
+            name: '转化效率',
+            type: 'bar',
+            type: 'line',
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: '#FFCE6A', //改变折线点的颜色
+                lineStyle: {
+                  color: '#FFCE6A' //改变折线颜色
+                }
+              }
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
+            ],
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* .reportChart {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 10px;
+} */
+</style>

src/views/report/comprehensiveData.vue

@@ -0,0 +1,460 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-04-15 10:49:13
+ * @LastEditTime: 2024-06-07 16:22:57
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
+    <!-- <div class="app-container"
+      style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
+      <p style="margin-bottom: 0">数据概览</p>
+      <div class="view">
+        <div v-for="(item, index) in data" :key="index">
+          <p style="color: rgb(194,128,255)">{{ item }}</p>
+          <p>{{ index }}</p>
+        </div>
+      </div>
+    </div> -->
+    <div class="" style="height: auto;">
+      <ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event">
+        <!-- <template v-slot:tab1>
+          <div style="margin: 20px; background: #f001;">
+            Page1: 状态时序图
+          </div>
+        </template>
+        <template v-slot:tab2>
+          <div style="margin: 20px">
+            Page2: 产量时序图
+          </div>
+        </template> -->
+      </ButtonNav>
+    </div>
+    <div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;">
+      <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
+        <el-form-item label="时间维度" prop="date">
+          <el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
+            <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
+          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
+            start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
+          <el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+            style="width: 180px" @change="onValueChange">
+          </el-date-picker>
+          至
+          <el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+            style="width: 180px" @change="onValueChange">
+          </el-date-picker>
+          <!-- <span v-if="start && end" style="margin-left: 10px">
+            {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
+          </span> -->
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
+          <el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM"
+            range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime">
+          <el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" placeholder="开始时间">
+          </el-date-picker>
+          ~
+          <el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
+            @change="getYear">
+          </el-date-picker>
+        </el-form-item>
+        <!-- <el-form-item label="玻璃类型" prop="type">
+          <el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
+            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item> -->
+        <!-- <el-form-item label="玻璃类型" prop="type">
+          <el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
+            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" size="small" @click="getDataList">查询</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
+          <el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
+          <!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
+        </el-form-item>
+      </el-form>
+      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
+        :table-data="tableData">
+        <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
+          :method-list="tableBtn" @clickBtn="handleClick" />
+      </base-table>
+      <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
+        @pagination="getDataList" />
+    </div>
+    <!-- <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date"
+      @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> -->
+  </div>
+</template>
+
+<script>
+// import { parseTime } from '../../core/mixins/code-filter';
+// import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
+// import { getWorkOrderPage, exportExcel, getOverView } from '@/components/buttonNav'
+// import inputTable from './inputTable.vue';
+// import lineChart from './lineChart';
+import moment from 'moment'
+import ButtonNav from '@/components/ButtonNav'
+import basicPage from '@/mixins/basic-page'
+// import AddOrUpdate from './add-or-updata';
+import { factoryList, factoryArray } from "@/utils/constants";
+import { publicFormatter } from "@/utils/dict";
+
+// import FileSaver from 'file-saver'
+// import * as XLSX from 'xlsx'
+export default {
+  components: { ButtonNav },
+  mixins: [basicPage],
+  data() {
+    return {
+      factoryList,
+      factoryArray,
+      start: undefined,
+      end: undefined,
+      listQuery: {
+        size: 10,
+        current: 1,
+        factorys: null,
+        total: 0,
+        date: 3,
+        beginTime: undefined,
+        endTime: undefined,
+        reportTime: []
+      },
+      timeList: [
+        {
+          value: 1,
+          label: '日'
+        },
+        {
+          value: 2,
+          label: '周'
+        },
+        {
+          value: 3,
+          label: '月'
+        },
+        {
+          value: 4,
+          label: '年'
+        }
+      ],
+      detailOrUpdateVisible: false,
+      tableBtn: [
+        {
+          type: 'detail',
+          btnName: '详情',
+        },
+        // {
+        //     type: 'delete',
+        //     btnName: '删除',
+        //   },
+      ].filter((v) => v),
+      typeList: [
+        {
+          name: '芯片',
+          id: 0,
+        },
+        {
+          name: '标准组件',
+          id: 1,
+        },
+        {
+          name: 'BIPV产品',
+          id: 2,
+        },
+      ],
+      tableProps: [
+        {
+          prop: 'factory',
+          label: '玻璃类型',
+          fixed:true,
+          // filter: (val) => factoryList[val],
+          // minWidth: 200,
+          // showOverflowtooltip: true
+        },
+        {
+          prop: 'workOrderNumber',
+          label: '科目/日期',
+          fixed: true,
+          // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
+        },
+        {
+          prop: 'workOrderType',
+          label: '单位',
+          fixed: true,
+          // filter: publicFormatter('workorder_status')
+          // filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val],
+        },
+        {
+          prop: 'plannedInvestment',
+          label: '计划投入',
+        },
+        {
+          prop: 'actualInvestment',
+          label: '实际投入',
+        },
+        {
+          prop: 'targetProduction',
+          label: '目标产量',
+        },
+        {
+          prop: 'actualProduction',
+          label: '实际产量',
+        },
+        {
+          prop: 'productionProgress',
+          label: '生产进度',
+          filter: (val) => (val * 100) + '%'
+        },
+        {
+          prop: 'orderStatus',
+          label: '工单状态',
+          filter: publicFormatter('workorder_status')
+          // filter: (val) => ['未开始', '生产中', '已完成'][val],
+        },
+        {
+          prop: 'startTime',
+          label: '开始时间',
+          minWidth: 100,
+          showOverflowtooltip: true
+        },
+        {
+          prop: 'endTime',
+          label: '完成时间',
+          minWidth: 100,
+          showOverflowtooltip: true
+        }
+      ],
+      tableData: [],
+      xAxis: [],
+      lineData: {},
+      data: {}
+      // proLineList: [],
+      // all: {}
+    };
+  },
+  computed: {
+    weekNum() {
+      return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
+    },
+  },
+  created() {
+    const currentMonth = new Date()
+    this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
+    this.changeTime()
+  },
+  mounted() {
+    this.getOverView()
+    const currentMonth = new Date()
+    this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
+    this.changeTime()
+  },
+  methods: {
+    getYear(e) {
+      if (this.end && Number(this.end) - Number(this.start) > 10) {
+        this.$message({
+          message: '年份起止时间不能超过十年',
+          type: 'warning'
+        });
+        this.start = undefined
+        this.end = undefined
+        // console.log();
+      } else {
+        if (Number(this.end) < Number(this.start)) {
+          this.$message({
+            message: '结束年份不能小于开始年份',
+            type: 'warning'
+          });
+          this.start = undefined
+          this.end = undefined
+        } else {
+          this.listQuery.beginTime = Number(this.start)
+          this.listQuery.endTime = Number(this.end)
+        }
+      }
+      if (!this.start && !this.end) {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+      // console.log(e);
+    },
+    changeTime() {
+      if (this.listQuery.reportTime) {
+        const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
+        const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
+        if (years * 12 + months > 24) {
+          this.$message({
+            message: '时间范围不能超过24个月',
+            type: 'warning'
+          });
+          this.listQuery.reportTime = [];
+        } else {
+          this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
+          this.listQuery.endTime = Number(this.listQuery.reportTime[1])
+        }
+      } else {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    onValueChange(picker, k) { // 选中近k周后触发的操作
+      if (this.start && this.end) {
+        this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
+        this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
+        const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
+        if (numDays > 168) {
+          console.log(numDays)
+          this.$message({
+            message: '周范围不能超过24周',
+            type: 'warning'
+          });
+        } else {
+          this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW'))
+          this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW'))
+        }
+      }
+      if (!this.start && !this.end) {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    changeDayTime() {
+      if (this.listQuery.reportTime) {
+        const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
+        if (numDays > 30) {
+          this.$message({
+            message: '时间范围不能超过30天',
+            type: 'warning'
+          });
+          this.listQuery.reportTime = [];
+        } else {
+          this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
+          this.listQuery.endTime = Number(this.listQuery.reportTime[1])
+        }
+      } else {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    getOverView() {
+      // getOverView().then(res => {
+      //   this.data = res.data
+      //   console.log('aa', res.data)
+      // })
+    },
+    otherMethods(val) {
+      this.detailOrUpdateVisible = true;
+      // this.addOrEditTitle = "详情";
+      this.$nextTick(() => {
+        // this.$refs.detailOrUpdate.init(val.data.id);
+      });
+    },
+    async getDataList() {
+      // const res = await getWorkOrderPage(this.listQuery)
+      // this.tableData = res.data.list
+      // this.listQuery.total = res.data.total
+      // if (this.listQuery.total > 0) {
+      //   this.tableData.forEach(item => {
+      //     item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
+      //     item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
+      //   })
+      // }
+    },
+    buttonClick(val) {
+      this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined
+      this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined
+      this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined
+      switch (val.btnName) {
+        case 'search':
+          this.listQuery.pageNo = 1;
+          this.listQuery.pageSize = 20;
+          if (this.listQuery.time) {
+            this.getDataList();
+          } else {
+            this.$message.warning('请选择时间范围！')
+          }
+          break;
+        case 'export':
+          if (this.listQuery.time) {
+            this.handleExport();
+          } else {
+            this.$message.warning('请选择时间范围！')
+          }
+          break;
+        default:
+          console.log(val);
+      }
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // this.$modal.confirm('是否确认导出工单数据?').then(() => {
+      //   // 处理查询参数
+      //   // let params = {...this.listQuery};
+      //   // params.current = 1;
+      //   // params.size = 999;
+      //   this.exportLoading = true;
+      //   return exportExcel({
+      //     factorys: this.listQuery.factorys,
+      //     orderStatus: this.listQuery.orderStatus,
+      //     time: this.listQuery.time
+      //   });
+      // }).then(response => {
+      //   this.$download.excel(response, '工单数据.xls');
+      //   this.exportLoading = false;
+      // }).catch(() => { })
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* .blueTip { */
+/* padding-bottom: 10px; */
+/* } */
+/* .blueTi */
+.view {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex: 1;
+}
+
+.blueTip::before {
+  display: inline-block;
+  content: '';
+  width: 4px;
+  height: 18px;
+  background: #0B58FF;
+  border-radius: 1px;
+  margin-right: 8PX;
+  margin-top: 8px;
+}
+
+.app-container {
+  margin: 0 0px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 16px 16px 0;
+  height: calc(100vh - 134px);
+  overflow: auto;
+}
+.noBack{
+  background-color:black;
+}
+</style>

src/views/report/conversionEfficiencyBM/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">稼动率对标</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "ConversionEfficiencyBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/%",
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+            ],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2023年4月",
+            data: [
+              { name: "%", value: 57.5 },
+              { name: "%", value: 21.66 },
+              { name: "%", value: 18.4 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [-18, -16],
+              color: "#68C483",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2024年4月",
+            data: [
+              { name: "%", value: 23.33 },
+              { name: "%", value: 7.02 },
+              { name: "%", value: 80.2 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+        ],
+      },
+      chartId: "conversionEfficiencyBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "ConversionEfficiencyBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "ConversionEfficiencyBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "ConversionEfficiencyBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>

src/views/report/ftoOutputBM/index.vue

@@ -0,0 +1,292 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">产量对标FTO</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "FtoOutputBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/片",
+        series: [
+          {
+            name: "2024年4月目标值",
+            // data: [3000, 2000, 3000],
+            // data: [6800, 5000, 8900],
+            // data: [12000, 17000, 19000],
+            data: [560000, 540000, 600000],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+            },
+          },
+          {
+            name: "2023年4月",
+            // data: [2100, 800, 1500],
+            // data: [9500, 7200, 9901],
+            // data: [14666, 15000, 17888],
+            data: [550000, 456666, 590000],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              // position: [-5, -16],
+              // position: [-5, -16],
+              // position: [-10, -16],
+              position: [-17, -16],
+              color: "#68C483",
+            },
+          },
+          {
+            name: "2024年4月",
+            // data: [2100, 900, 1300],
+            // data: [9100, 7300, 9700],
+            // data: [14666, 15300, 18000],
+            data: [556666, 456666, 650000],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+            },
+          },
+        ],
+      },
+      chartId: "ftoOutputBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "FtoOutputBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "FtoOutputBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "FtoOutputBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("==========下面是测试代码，需删除");
+      this.chartMsg.series = [];
+    },
+    handleExport() {
+      console.log("导出=====下面是测试代码，需删除");
+      this.chartMsg.series = [
+        {
+          name: "2024年4月目标值1",
+          // data: [3000, 2000, 3000],
+          // data: [6800, 5000, 8900],
+          // data: [12000, 17000, 19000],
+          data: [560000, 540000, 600000],
+          type: "line",
+          symbol: "circle",
+          symbolSize: 6,
+          label: {
+            show: true,
+            color: "#FFAE17",
+          },
+        },
+        {
+          name: "2023年4月",
+          // data: [2100, 800, 1500],
+          // data: [9500, 7200, 9901],
+          // data: [14666, 15000, 17888],
+          data: [550000, 456666, 590000],
+          type: "bar",
+          barWidth: 20,
+          label: {
+            show: true,
+            // position: [-5, -16],
+            // position: [-5, -16],
+            // position: [-10, -16],
+            position: [-17, -16],
+            color: "#68C483",
+          },
+        },
+        {
+          name: "2024年4月",
+          // data: [2100, 900, 1300],
+          // data: [9100, 7300, 9700],
+          // data: [14666, 15300, 18000],
+          data: [556666, 456666, 650000],
+          type: "bar",
+          barWidth: 20,
+          label: {
+            show: true,
+            position: [0, -16],
+            color: "#288AFF",
+          },
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>

src/views/report/packageOEEBM/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">封装OEE对标</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "PackageOEEBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/%",
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+            ],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2023年4月",
+            data: [
+              { name: "%", value: 57.5 },
+              { name: "%", value: 21.66 },
+              { name: "%", value: 18.4 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [-18, -16],
+              color: "#68C483",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2024年4月",
+            data: [
+              { name: "%", value: 23.33 },
+              { name: "%", value: 7.02 },
+              { name: "%", value: 80.2 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+        ],
+      },
+      chartId: "packageOEEBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "PackageOEEBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "PackageOEEBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "PackageOEEBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>

src/views/report/produceConversion.vue

@@ -0,0 +1,450 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-11 08:45:34
+ * @LastEditTime: 2024-06-11 11:08:27
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
+    <!-- <div class="app-container"
+      style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
+      <p style="margin-bottom: 0">数据概览</p>
+      <div class="view">
+        <div v-for="(item, index) in data" :key="index">
+          <p style="color: rgb(194,128,255)">{{ item }}</p>
+          <p>{{ index }}</p>
+        </div>
+      </div>
+    </div> -->
+    <div class="app-container" style="flex: 1;min-height: 40vh;">
+      <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
+        <el-form-item label="时间维度" prop="date">
+          <el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
+            <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
+          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
+            start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
+          <el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+            style="width: 180px" @change="onValueChange">
+          </el-date-picker>
+          至
+          <el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+            style="width: 180px" @change="onValueChange">
+          </el-date-picker>
+          <!-- <span v-if="start && end" style="margin-left: 10px">
+            {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
+          </span> -->
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
+          <el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM"
+            range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime">
+          <el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" placeholder="开始时间">
+          </el-date-picker>
+          ~
+          <el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
+            @change="getYear">
+          </el-date-picker>
+        </el-form-item>
+        <!-- <el-form-item label="玻璃类型" prop="type">
+          <el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
+            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item> -->
+        <!-- <el-form-item label="玻璃类型" prop="type">
+          <el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
+            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" size="small" @click="getDataList">查询</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
+          <el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
+          <!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
+        </el-form-item>
+      </el-form>
+      <line-chart  ref="lineChart" style="height: 90%; width: 100%"></line-chart>
+    </div>
+    <div class="app-container" style="margin-top: 8px;flex: 1">
+      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
+        :table-data="tableData">
+        <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
+          :method-list="tableBtn" @clickBtn="handleClick" />
+      </base-table>
+      <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
+        @pagination="getDataList" />
+    </div>
+    <!-- <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date"
+      @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> -->
+  </div>
+</template>
+
+<script>
+// import { parseTime } from '../../core/mixins/code-filter';
+// import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
+// import { getWorkOrderPage, exportExcel, getOverView } from '@/components/buttonNav'
+// import inputTable from './inputTable.vue';
+// import lineChart from './lineChart';
+import moment from 'moment'
+import ButtonNav from '@/components/ButtonNav'
+import basicPage from '@/mixins/basic-page'
+// import AddOrUpdate from './add-or-updata';
+import { factoryList, factoryArray } from "@/utils/constants";
+import { publicFormatter } from "@/utils/dict";
+import lineChart from "./components/lineChart";
+
+// import FileSaver from 'file-saver'
+// import * as XLSX from 'xlsx'
+export default {
+  components: { ButtonNav, lineChart },
+  mixins: [basicPage],
+  data() {
+    return {
+      factoryList,
+      factoryArray,
+      start: undefined,
+      end: undefined,
+      listQuery: {
+        size: 10,
+        current: 1,
+        factorys: null,
+        total: 0,
+        date: 3,
+        beginTime: undefined,
+        endTime: undefined,
+        reportTime: []
+      },
+      timeList: [
+        {
+          value: 1,
+          label: '日'
+        },
+        {
+          value: 2,
+          label: '周'
+        },
+        {
+          value: 3,
+          label: '月'
+        },
+        {
+          value: 4,
+          label: '年'
+        }
+      ],
+      detailOrUpdateVisible: false,
+      tableBtn: [
+        {
+          type: 'detail',
+          btnName: '详情',
+        },
+        // {
+        //     type: 'delete',
+        //     btnName: '删除',
+        //   },
+      ].filter((v) => v),
+      typeList: [
+        {
+          name: '芯片',
+          id: 0,
+        },
+        {
+          name: '标准组件',
+          id: 1,
+        },
+        {
+          name: 'BIPV产品',
+          id: 2,
+        },
+      ],
+      tableProps: [
+        {
+          prop: 'factory',
+          label: '玻璃类型',
+          fixed:true,
+          // filter: (val) => factoryList[val],
+          // minWidth: 200,
+          // showOverflowtooltip: true
+        },
+        {
+          prop: 'workOrderNumber',
+          label: '科目/日期',
+          fixed: true,
+          // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
+        },
+        {
+          prop: 'workOrderType',
+          label: '单位',
+          fixed: true,
+          // filter: publicFormatter('workorder_status')
+          // filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val],
+        },
+        {
+          prop: 'plannedInvestment',
+          label: '计划投入',
+        },
+        {
+          prop: 'actualInvestment',
+          label: '实际投入',
+        },
+        {
+          prop: 'targetProduction',
+          label: '目标产量',
+        },
+        {
+          prop: 'actualProduction',
+          label: '实际产量',
+        },
+        {
+          prop: 'productionProgress',
+          label: '生产进度',
+          filter: (val) => (val * 100) + '%'
+        },
+        {
+          prop: 'orderStatus',
+          label: '工单状态',
+          filter: publicFormatter('workorder_status')
+          // filter: (val) => ['未开始', '生产中', '已完成'][val],
+        },
+        {
+          prop: 'startTime',
+          label: '开始时间',
+          minWidth: 100,
+          showOverflowtooltip: true
+        },
+        {
+          prop: 'endTime',
+          label: '完成时间',
+          minWidth: 100,
+          showOverflowtooltip: true
+        }
+      ],
+      tableData: [],
+      xAxis: [],
+      lineData: {},
+      data: {}
+      // proLineList: [],
+      // all: {}
+    };
+  },
+  computed: {
+    weekNum() {
+      return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
+    },
+  },
+  created() {
+    const currentMonth = new Date()
+    this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
+    this.changeTime()
+  },
+  mounted() {
+    this.getOverView()
+    const currentMonth = new Date()
+    this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
+    this.changeTime()
+  },
+  methods: {
+    getYear(e) {
+      if (this.end && Number(this.end) - Number(this.start) > 10) {
+        this.$message({
+          message: '年份起止时间不能超过十年',
+          type: 'warning'
+        });
+        this.start = undefined
+        this.end = undefined
+        // console.log();
+      } else {
+        if (Number(this.end) < Number(this.start)) {
+          this.$message({
+            message: '结束年份不能小于开始年份',
+            type: 'warning'
+          });
+          this.start = undefined
+          this.end = undefined
+        } else {
+          this.listQuery.beginTime = Number(this.start)
+          this.listQuery.endTime = Number(this.end)
+        }
+      }
+      if (!this.start && !this.end) {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+      // console.log(e);
+    },
+    changeTime() {
+      if (this.listQuery.reportTime) {
+        const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
+        const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
+        if (years * 12 + months > 24) {
+          this.$message({
+            message: '时间范围不能超过24个月',
+            type: 'warning'
+          });
+          this.listQuery.reportTime = [];
+        } else {
+          this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
+          this.listQuery.endTime = Number(this.listQuery.reportTime[1])
+        }
+      } else {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    onValueChange(picker, k) { // 选中近k周后触发的操作
+      if (this.start && this.end) {
+        this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
+        this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
+        const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
+        if (numDays > 168) {
+          console.log(numDays)
+          this.$message({
+            message: '周范围不能超过24周',
+            type: 'warning'
+          });
+        } else {
+          this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW'))
+          this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW'))
+        }
+      }
+      if (!this.start && !this.end) {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    changeDayTime() {
+      if (this.listQuery.reportTime) {
+        const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
+        if (numDays > 30) {
+          this.$message({
+            message: '时间范围不能超过30天',
+            type: 'warning'
+          });
+          this.listQuery.reportTime = [];
+        } else {
+          this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
+          this.listQuery.endTime = Number(this.listQuery.reportTime[1])
+        }
+      } else {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    getOverView() {
+      // getOverView().then(res => {
+      //   this.data = res.data
+      //   console.log('aa', res.data)
+      // })
+    },
+    otherMethods(val) {
+      this.detailOrUpdateVisible = true;
+      // this.addOrEditTitle = "详情";
+      this.$nextTick(() => {
+        // this.$refs.detailOrUpdate.init(val.data.id);
+      });
+    },
+    async getDataList() {
+      // const res = await getWorkOrderPage(this.listQuery)
+      // this.tableData = res.data.list
+      // this.listQuery.total = res.data.total
+      // if (this.listQuery.total > 0) {
+      //   this.tableData.forEach(item => {
+      //     item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
+      //     item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
+      //   })
+      // }
+    },
+    buttonClick(val) {
+      this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined
+      this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined
+      this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined
+      switch (val.btnName) {
+        case 'search':
+          this.listQuery.pageNo = 1;
+          this.listQuery.pageSize = 20;
+          if (this.listQuery.time) {
+            this.getDataList();
+          } else {
+            this.$message.warning('请选择时间范围！')
+          }
+          break;
+        case 'export':
+          if (this.listQuery.time) {
+            this.handleExport();
+          } else {
+            this.$message.warning('请选择时间范围！')
+          }
+          break;
+        default:
+          console.log(val);
+      }
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // this.$modal.confirm('是否确认导出工单数据?').then(() => {
+      //   // 处理查询参数
+      //   // let params = {...this.listQuery};
+      //   // params.current = 1;
+      //   // params.size = 999;
+      //   this.exportLoading = true;
+      //   return exportExcel({
+      //     factorys: this.listQuery.factorys,
+      //     orderStatus: this.listQuery.orderStatus,
+      //     time: this.listQuery.time
+      //   });
+      // }).then(response => {
+      //   this.$download.excel(response, '工单数据.xls');
+      //   this.exportLoading = false;
+      // }).catch(() => { })
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* .blueTip { */
+/* padding-bottom: 10px; */
+/* } */
+/* .blueTi */
+.view {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex: 1;
+}
+
+.blueTip::before {
+  display: inline-block;
+  content: '';
+  width: 4px;
+  height: 18px;
+  background: #0B58FF;
+  border-radius: 1px;
+  margin-right: 8PX;
+  margin-top: 8px;
+}
+
+.app-container {
+  margin: 0 0px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 16px 16px 0;
+  height: calc(100vh - 134px);
+  overflow: auto;
+}
+.noBack{
+  background-color:black;
+}
+</style>

src/views/report/scOutputBM/index.vue

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">标准组件产量对标</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "SCOutputBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/片",
+        series: [
+          {
+            name: "2024年4月目标值",
+            // data: [3000, 2000, 3000],
+            // data: [6800, 5000, 8900],
+            // data: [12000, 17000, 19000],
+            data: [560000, 540000, 600000],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+            },
+          },
+          {
+            name: "2023年4月",
+            // data: [2100, 800, 1500],
+            // data: [9500, 7200, 9901],
+            // data: [14666, 15000, 17888],
+            data: [550000, 456666, 590000],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              // position: [-5, -16],
+              // position: [-5, -16],
+              // position: [-10, -16],
+              position: [-17, -16],
+              color: "#68C483",
+            },
+          },
+          {
+            name: "2024年4月",
+            // data: [2100, 900, 1300],
+            // data: [9100, 7300, 9700],
+            // data: [14666, 15300, 18000],
+            data: [556666, 456666, 650000],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+            },
+          },
+        ],
+      },
+      chartId: "scOutputBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "SCOutputBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "SCOutputBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "SCOutputBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>

src/views/report/scPerCapitaBM/index.vue

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">组件人均产量对标</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "SCPerCapitaBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/片",
+        series: [
+          {
+            name: "2024年4月目标值",
+            // data: [3000, 2000, 3000],
+            // data: [6800, 5000, 8900],
+            // data: [12000, 17000, 19000],
+            data: [560000, 540000, 600000],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+            },
+          },
+          {
+            name: "2023年4月",
+            // data: [2100, 800, 1500],
+            // data: [9500, 7200, 9901],
+            // data: [14666, 15000, 17888],
+            data: [550000, 456666, 590000],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              // position: [-5, -16],
+              // position: [-5, -16],
+              // position: [-10, -16],
+              position: [-17, -16],
+              color: "#68C483",
+            },
+          },
+          {
+            name: "2024年4月",
+            // data: [2100, 900, 1300],
+            // data: [9100, 7300, 9700],
+            // data: [14666, 15300, 18000],
+            data: [556666, 456666, 650000],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+            },
+          },
+        ],
+      },
+      chartId: "scPerCapitaBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "SCPerCapitaBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "SCPerCapitaBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "SCPerCapitaBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>

src/views/report/scYieldBM/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">芯片良率对标</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "SCYieldBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/%",
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+            ],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2023年4月",
+            data: [
+              { name: "%", value: 57.5 },
+              { name: "%", value: 21.66 },
+              { name: "%", value: 18.4 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [-18, -16],
+              color: "#68C483",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2024年4月",
+            data: [
+              { name: "%", value: 23.33 },
+              { name: "%", value: 7.02 },
+              { name: "%", value: 80.2 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+        ],
+      },
+      chartId: "scYieldBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "SCYieldBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "SCYieldBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "SCYieldBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>

src/views/report/turnoverRateBM/index.vue

@@ -0,0 +1,283 @@
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">封装OEE对标</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "月目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao2",
+    label: "年目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "TurnoverRateBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月", type: 1, color: "#8EF0AB" },
+        { id: 2, name: "2023年4月", type: 1, color: "#63BDFF" },
+        { id: 3, name: "2024年4月目标值", type: 1, color: "#288AFF" },
+        { id: 4, name: "2024年目标值", type: 1, color: "#7164FF" },
+      ],
+      chartMsg: {
+        color: ["#8EF0AB", "#63BDFF", "#288AFF", "#7164FF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/%",
+        series: [
+          {
+            name: "2023年4月",
+            data: [
+              { name: "%", value: 12.64444444 },
+              { name: "%", value: 12.29 },
+              { name: "%", value: 12.33 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            barGap: 0.5,
+            label: {
+              show: true,
+              position: "top",
+              color: "#68C483",
+              fontSize: 9,
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2024年4月",
+            data: [
+              { name: "%", value: 14.92 },
+              { name: "%", value: 15.31 },
+              { name: "%", value: 15.36 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: "top",
+              color: "#63BDFF",
+              fontSize: 9,
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2024年4月目标值",
+            data: [
+              { name: "%", value: 15.36 },
+              { name: "%", value: 15.52 },
+              { name: "%", value: 15.63 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: "top",
+              color: "#288AFF",
+              fontSize: 9,
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2024年目标值",
+            data: [
+              { name: "%", value: 15.63 },
+              { name: "%", value: 15.69 },
+              { name: "%", value: 15.78 },
+            ],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: "top",
+              color: "#7164FF",
+              fontSize: 9,
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+        ],
+      },
+      chartId: "turnoverRateBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "TurnoverRateBM") {
+        this.chartNum++;
+      }
+    },
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  activated() {
+    // 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
+    if (this.$route.name === "TurnoverRateBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "TurnoverRateBM") {
+        this.chartNum++;
+      }
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>