From 5f98f4a361fb9019d93994527a82f39d271d62e4 Mon Sep 17 00:00:00 2001
From: juzi <819872918@qq.com>
Date: Wed, 12 Jun 2024 13:27:09 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BA=A7=E9=87=8F=E5=AF=B9=E6=A0=87FTo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/report/components/bmLineBar.vue   | 180 ++++++++++++++++++
 src/views/report/components/bmSearchBar.vue | 136 ++++++++++++++
 src/views/report/ftoOutputBM/index.vue      | 192 ++++++++++++++++++++
 3 files changed, 508 insertions(+)
 create mode 100644 src/views/report/components/bmLineBar.vue
 create mode 100644 src/views/report/components/bmSearchBar.vue
 create mode 100644 src/views/report/ftoOutputBM/index.vue

diff --git a/src/views/report/components/bmLineBar.vue b/src/views/report/components/bmLineBar.vue
new file mode 100644
index 0000000..873569b
--- /dev/null
+++ b/src/views/report/components/bmLineBar.vue
@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <!-- 图例 -->
+    <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="main" :style="{ width: '100%', height: chartHeight + 'px' }"></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].name}</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].value}</span>`;
+            }
+            return res;
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisTick: {
+            show: false,
+          },
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [],
+      },
+    };
+  },
+  props: {
+    chartHeight: {
+      type: Number,
+      default: 300,
+    },
+    legendList: {
+      type: Array,
+      default: () => [],
+    },
+    chartMsg: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  watch: {
+    chartHeight: {
+      handler(newVal) {
+        this.chartHeight = newVal;
+      },
+    },
+    isOpen(val) {
+      this.canvasReset();
+    },
+    chartMsg: {
+      handler(newVal) {
+        this.getMes();
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  mounted() {
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.myChart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.getMes();
+      }, 500)();
+    },
+    getMes() {
+      if (this.myChart) {
+        this.myChart.dispose();
+        this.myChart = "";
+      }
+      var chartDom = document.getElementById("main");
+      this.myChart = echarts.init(chartDom);
+      this.option.color = this.chartMsg.color;
+      this.option.xAxis.data = this.chartMsg.xData;
+      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>
diff --git a/src/views/report/components/bmSearchBar.vue b/src/views/report/components/bmSearchBar.vue
new file mode 100644
index 0000000..734c363
--- /dev/null
+++ b/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>
diff --git a/src/views/report/ftoOutputBM/index.vue b/src/views/report/ftoOutputBM/index.vue
new file mode 100644
index 0000000..7af57ff
--- /dev/null
+++ b/src/views/report/ftoOutputBM/index.vue
@@ -0,0 +1,192 @@
+<!-- 产量对标FTO -->
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+      />
+    </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: ["成都", "邯郸", "瑞昌"],
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [70000, 80000, 90000],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+          },
+          {
+            name: "2023年4月",
+            data: [12000, 20000, 150000],
+            type: "bar",
+            barWidth: 20,
+          },
+          {
+            name: "2024年4月",
+            data: [60000, 70000, 80000],
+            type: "bar",
+            barWidth: 20,
+          },
+        ],
+      },
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  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);
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+    },
+    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>

From 05b58149075d715dfcf3a6ea1b8a9a63db1d3114 Mon Sep 17 00:00:00 2001
From: juzi <819872918@qq.com>
Date: Thu, 13 Jun 2024 15:36:02 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=8A=A5=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/report/chipOEEBM/index.vue          | 246 ++++++++++++++++
 src/views/report/chipOutputBM/index.vue       | 249 ++++++++++++++++
 src/views/report/chipPerCapitaBM/index.vue    | 249 ++++++++++++++++
 src/views/report/chipYieldBM/index.vue        | 246 ++++++++++++++++
 src/views/report/components/bmLineBar.vue     |  43 +--
 .../report/conversionEfficiencyBM/index.vue   | 246 ++++++++++++++++
 src/views/report/ftoOutputBM/index.vue        |  65 ++++-
 src/views/report/packageOEEBM/index.vue       | 246 ++++++++++++++++
 src/views/report/scOutputBM/index.vue         | 249 ++++++++++++++++
 src/views/report/scPerCapitaBM/index.vue      | 249 ++++++++++++++++
 src/views/report/scYieldBM/index.vue          | 246 ++++++++++++++++
 src/views/report/turnoverRateBM/index.vue     | 266 ++++++++++++++++++
 12 files changed, 2577 insertions(+), 23 deletions(-)
 create mode 100644 src/views/report/chipOEEBM/index.vue
 create mode 100644 src/views/report/chipOutputBM/index.vue
 create mode 100644 src/views/report/chipPerCapitaBM/index.vue
 create mode 100644 src/views/report/chipYieldBM/index.vue
 create mode 100644 src/views/report/conversionEfficiencyBM/index.vue
 create mode 100644 src/views/report/packageOEEBM/index.vue
 create mode 100644 src/views/report/scOutputBM/index.vue
 create mode 100644 src/views/report/scPerCapitaBM/index.vue
 create mode 100644 src/views/report/scYieldBM/index.vue
 create mode 100644 src/views/report/turnoverRateBM/index.vue

diff --git a/src/views/report/chipOEEBM/index.vue b/src/views/report/chipOEEBM/index.vue
new file mode 100644
index 0000000..dd0528b
--- /dev/null
+++ b/src/views/report/chipOEEBM/index.vue
@@ -0,0 +1,246 @@
+<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: "单位/%",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value + ".00%";
+          },
+        },
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [85, 85, 85],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2023年4月",
+            data: [57.5, 21.66, 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: [23.33, 7.02, 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>
diff --git a/src/views/report/chipOutputBM/index.vue b/src/views/report/chipOutputBM/index.vue
new file mode 100644
index 0000000..b2465af
--- /dev/null
+++ b/src/views/report/chipOutputBM/index.vue
@@ -0,0 +1,249 @@
+<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: "单位/片",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value;
+          },
+        },
+        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>
diff --git a/src/views/report/chipPerCapitaBM/index.vue b/src/views/report/chipPerCapitaBM/index.vue
new file mode 100644
index 0000000..635f9b2
--- /dev/null
+++ b/src/views/report/chipPerCapitaBM/index.vue
@@ -0,0 +1,249 @@
+<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: "单位/片",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value;
+          },
+        },
+        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>
diff --git a/src/views/report/chipYieldBM/index.vue b/src/views/report/chipYieldBM/index.vue
new file mode 100644
index 0000000..b00e918
--- /dev/null
+++ b/src/views/report/chipYieldBM/index.vue
@@ -0,0 +1,246 @@
+<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: "单位/%",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value + ".00%";
+          },
+        },
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [85, 85, 85],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2023年4月",
+            data: [57.5, 21.66, 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: [23.33, 7.02, 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>
diff --git a/src/views/report/components/bmLineBar.vue b/src/views/report/components/bmLineBar.vue
index 873569b..31fe7ee 100644
--- a/src/views/report/components/bmLineBar.vue
+++ b/src/views/report/components/bmLineBar.vue
@@ -21,7 +21,10 @@
         {{ item.name }}</span
       >
     </div>
-    <div id="main" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
+    <div
+      :id="chartId"
+      :style="{ width: '100%', height: chartHeight + 'px' }"
+    ></div>
   </div>
 </template>
 <script>
@@ -44,12 +47,13 @@ export default {
         tooltip: {
           trigger: "axis",
           axisPointer: {
-            type: "cross",
+            // type: "cross",
             crossStyle: {
               color: "rgba(237,237,237,0.5)",
             },
           },
           formatter: function (params) {
+            console.log(params);
             var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].name}</span>`;
             for (var i = 0, l = params.length; i < l; i++) {
               res +=
@@ -73,6 +77,12 @@ export default {
         },
         yAxis: {
           type: "value",
+          name: "",
+          nameTextStyle: {
+            fontSize: 12,
+            align: "right",
+          },
+          axisLabel: {},
         },
         series: [],
       },
@@ -91,6 +101,14 @@ export default {
       type: Object,
       default: () => {},
     },
+    chartId: {
+      type: String,
+      default: "bmChart",
+    },
+    chartNum: {
+      type: Number,
+      default: 1,
+    },
   },
   watch: {
     chartHeight: {
@@ -98,7 +116,7 @@ export default {
         this.chartHeight = newVal;
       },
     },
-    isOpen(val) {
+    chartNum(val) {
       this.canvasReset();
     },
     chartMsg: {
@@ -108,22 +126,8 @@ export default {
       deep: true,
     },
   },
-  computed: {
-    isOpen() {
-      return this.$store.getters.sidebar.opened;
-    },
-  },
   mounted() {
     this.canvasReset();
-    window.addEventListener("resize", this.canvasReset);
-  },
-  beforeDestroy() {
-    if (this.chart) {
-      this.myChart.dispose();
-    }
-  },
-  destroyed() {
-    window.removeEventListener("resize", this.canvasReset);
   },
   methods: {
     canvasReset() {
@@ -134,12 +138,13 @@ export default {
     getMes() {
       if (this.myChart) {
         this.myChart.dispose();
-        this.myChart = "";
       }
-      var chartDom = document.getElementById("main");
+      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;
+      this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
       this.option.series = this.chartMsg.series;
       this.myChart.setOption(this.option);
     },
diff --git a/src/views/report/conversionEfficiencyBM/index.vue b/src/views/report/conversionEfficiencyBM/index.vue
new file mode 100644
index 0000000..3ff6ad2
--- /dev/null
+++ b/src/views/report/conversionEfficiencyBM/index.vue
@@ -0,0 +1,246 @@
+<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: "单位/%",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value + ".00%";
+          },
+        },
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [85, 85, 85],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2023年4月",
+            data: [57.5, 21.66, 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: [23.33, 7.02, 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>
diff --git a/src/views/report/ftoOutputBM/index.vue b/src/views/report/ftoOutputBM/index.vue
index 7af57ff..5a7c28f 100644
--- a/src/views/report/ftoOutputBM/index.vue
+++ b/src/views/report/ftoOutputBM/index.vue
@@ -1,4 +1,3 @@
-<!-- 产量对标FTO -->
 <template>
   <div>
     <div class="containerTop">
@@ -7,6 +6,8 @@
         :chartHeight="chartHeight"
         :legendList="legendList"
         :chartMsg="chartMsg"
+        :chartId="chartId"
+        :chartNum="chartNum"
       />
     </div>
     <div class="containerBottom">
@@ -112,34 +113,81 @@ export default {
       chartMsg: {
         color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
         xData: ["成都", "邯郸", "瑞昌"],
+        yName: "单位/片",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value;
+          },
+        },
         series: [
           {
             name: "2024年4月目标值",
-            data: [70000, 80000, 90000],
+            // 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: [12000, 20000, 150000],
+            // 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: [60000, 70000, 80000],
+            // 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;
@@ -148,10 +196,19 @@ export default {
   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);
diff --git a/src/views/report/packageOEEBM/index.vue b/src/views/report/packageOEEBM/index.vue
new file mode 100644
index 0000000..25e5c1e
--- /dev/null
+++ b/src/views/report/packageOEEBM/index.vue
@@ -0,0 +1,246 @@
+<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: "单位/%",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value + ".00%";
+          },
+        },
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [85, 85, 85],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2023年4月",
+            data: [57.5, 21.66, 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: [23.33, 7.02, 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>
diff --git a/src/views/report/scOutputBM/index.vue b/src/views/report/scOutputBM/index.vue
new file mode 100644
index 0000000..115ec06
--- /dev/null
+++ b/src/views/report/scOutputBM/index.vue
@@ -0,0 +1,249 @@
+<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: "单位/片",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value;
+          },
+        },
+        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>
diff --git a/src/views/report/scPerCapitaBM/index.vue b/src/views/report/scPerCapitaBM/index.vue
new file mode 100644
index 0000000..f458458
--- /dev/null
+++ b/src/views/report/scPerCapitaBM/index.vue
@@ -0,0 +1,249 @@
+<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: "单位/片",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value;
+          },
+        },
+        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>
diff --git a/src/views/report/scYieldBM/index.vue b/src/views/report/scYieldBM/index.vue
new file mode 100644
index 0000000..4870f11
--- /dev/null
+++ b/src/views/report/scYieldBM/index.vue
@@ -0,0 +1,246 @@
+<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: "单位/%",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value + ".00%";
+          },
+        },
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [85, 85, 85],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+            label: {
+              show: true,
+              color: "#FFAE17",
+              formatter: function (params) {
+                return params.value.toFixed(2) + "%";
+              },
+            },
+          },
+          {
+            name: "2023年4月",
+            data: [57.5, 21.66, 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: [23.33, 7.02, 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>
diff --git a/src/views/report/turnoverRateBM/index.vue b/src/views/report/turnoverRateBM/index.vue
new file mode 100644
index 0000000..102e9aa
--- /dev/null
+++ b/src/views/report/turnoverRateBM/index.vue
@@ -0,0 +1,266 @@
+<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: "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: "单位/%",
+        yAxisLabel: {
+          formatter: function (value) {
+            return value + ".00%";
+          },
+        },
+        series: [
+          {
+            name: "2023年4月",
+            data: [12.64, 12.29, 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: [14.92, 15.31, 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: [15.36, 15.52, 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: [15.63, 15.69, 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>