报表样式2.0

src/views/report/chipOEEBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月芯片OEE</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">芯片OEE对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -193,8 +193,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -208,8 +208,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "ChipOEEBM") {
         this.chartNum++;
       }
@@ -226,14 +226,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;

src/views/report/chipOutputBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月芯片产量</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">芯片产量对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -184,8 +184,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -199,8 +199,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "ChipOutputBM") {
         this.chartNum++;
       }
@@ -217,14 +217,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;

src/views/report/chipPerCapitaBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月芯片人均产量</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">芯片人均产量对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -184,8 +184,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -199,8 +199,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "ChipPerCapitaBM") {
         this.chartNum++;
       }
@@ -217,14 +217,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;

src/views/report/chipYieldBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月芯片良率</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">芯片良率对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -193,8 +193,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -208,8 +208,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "ChipYieldBM") {
         this.chartNum++;
       }
@@ -226,14 +226,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;

src/views/report/completionStatusIntrBM/index.vue

@@ -0,0 +1,265 @@
+<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: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1完成值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间1目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "CompletionStatusIntrBM",
+  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: "2024年4月完成值", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#8EF0AB", "#288AFF"],
+        xData: ["碲化镉芯片", "碲化镉标准组件", "铜铟镓硒芯片"],
+        yName: "单位/MW",
+        series: [
+          {
+            name: "2024年4月目标值",
+            // data: [2100, 800, 1500],
+            // data: [9500, 7200, 9901],
+            // data: [14666, 15000, 17888],
+            data: [55000, 45666, 59000],
+            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: [5566, 4566, 6500],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: [0, -16],
+              color: "#288AFF",
+            },
+          },
+        ],
+      },
+      chartId: "completionStatusIntrBMChart",
+      chartNum: 1,
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    // 监听左侧菜单栏是否展开
+    isOpen(val) {
+      if (this.$route.name === "CompletionStatusIntrBM") {
+        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 === "CompletionStatusIntrBM") {
+      this.chartNum++;
+    }
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      if (this.$route.name === "CompletionStatusIntrBM") {
+        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/components/bmLineBar.vue

@@ -2,10 +2,14 @@
   <div>
     <!-- 暂无数据 -->
     <div
-      class="no-data-bg"
+      :style="{ height: chartHeight + 'px' }"
-      style="position: relative; left: 50%; transform: translateX(-50%)"
       v-show="this.chartMsg.series.length === 0"
-    ></div>
+    >
+      <div
+        class="no-data-bg"
+        style="position: relative; left: 50%; transform: translateX(-50%)"
+      ></div>
+    </div>
     <!-- 图例 -->
     <div v-show="this.chartMsg.series.length > 0">
       <div class="legend">
@@ -47,7 +51,7 @@ export default {
         color: [],
         // color: ["#8EF0AB", "#63BDFF", "#288AFF"],
         grid: {
-          left: 100,
+          left: 70,
           right: 10,
           bottom: 30,
           top: 30,
@@ -65,17 +69,41 @@ export default {
             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>` +
+                `${
+                  params[i].seriesType === "line"
+                    ? '<img width="10" height="10" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
+                    : `<span style="display:inline-block;margin-right:4px;border-radius:2px;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
+                    : String(params[i].value).replace(
+                        /\B(?=(\d{3})+(?!\d))/g,
+                        ","
+                      )
                 }</span>`;
             }
             return res;
           },
+          // formatter: function (params) {
+          //   console.log(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:2px;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",
@@ -181,7 +209,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 .legend {
-  text-align: right;
+  position: absolute;
+  right: 10px;
+  top: 15px;
   .item {
     display: inline-block;
     margin-right: 10px;

src/views/report/conversionEfficiencyBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月CSS/PID6稼动率</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">稼动率对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -193,8 +193,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -208,8 +208,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "ConversionEfficiencyBM") {
         this.chartNum++;
       }
@@ -226,14 +226,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;

src/views/report/ftoOutputBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月FTO/基片投入</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">产量对标FTO</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -184,8 +184,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -199,8 +199,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "FtoOutputBM") {
         this.chartNum++;
       }
@@ -265,14 +265,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;

src/views/report/packageOEEBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月封装OEE</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">封装OEE对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -193,8 +193,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -208,8 +208,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "PackageOEEBM") {
         this.chartNum++;
       }
@@ -226,14 +226,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;

src/views/report/scOutputBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月标准组件产量</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">标准组件产量对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -184,8 +184,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -199,8 +199,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "SCOutputBM") {
         this.chartNum++;
       }
@@ -217,14 +217,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;

src/views/report/scPerCapitaBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月组件人均产量</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">组件人均产量对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -184,8 +184,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -199,8 +199,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "SCPerCapitaBM") {
         this.chartNum++;
       }
@@ -217,14 +217,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;

src/views/report/scYieldBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月标准组件良率</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">芯片良率对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -193,8 +193,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -208,8 +208,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "SCYieldBM") {
         this.chartNum++;
       }
@@ -226,14 +226,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;

src/views/report/turnoverRateBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月标准组件转化效率</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">封装OEE对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -109,8 +109,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
+      chartHeight: this.tableHeight(269) / 2,
-      tableH: this.tableHeight(137) / 2 - 70,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月", type: 1, color: "#8EF0AB" },
         { id: 2, name: "2023年4月", type: 1, color: "#63BDFF" },
@@ -223,8 +223,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.tableH = this.tableHeight(269) / 2;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -238,8 +238,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.tableH = this.tableHeight(269) / 2;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "TurnoverRateBM") {
         this.chartNum++;
       }
@@ -256,14 +256,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;