质检合格率半成品隐藏掉

zhangwencui

2 天以前 676c53d9ab2ea82abbc745c55ea1653644b61d50

质检合格率半成品隐藏掉

 src/views/reportAnalysis/reportManagement/index.vue

@@ -5,17 +5,20 @@
      <el-row :gutter="20">
        <!-- 各类型完成数量 -->
        <el-col :span="9">
          <el-card class="chart-card" shadow="hover">
          <el-card class="chart-card"
                   shadow="hover">
            <template #header>
              <div class="card-header">
                <div class="chart-title-line"></div>
                <span>各类型完成数量</span>
              </div>
            </template>
            <div class="top-container">
            <div class="top-container"
                 :class="{ 'two-cols': !ENABLE_SEMI_FINISHED }">
              <div class="typeNum">
                <div class="typeNum-left">
                  <img src="~@/assets/images/chartCard.svg" alt="图表"
                  <img src="~@/assets/images/chartCard.svg"
                       alt="图表"
                    style="width: 40px; height: 40px; object-fit: contain;">
                  <div class="typeNum-left-text">原材料</div>
                </div>
@@ -26,22 +29,23 @@
                <div class="typeNum-right">
                  <div class="typeNum-right-top">
                    <div class="typeNum-right-top-name">总数量</div>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(0, 'totalCount') }} <span
                        class="unit">个</span></div>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(0, 'totalCount') }} <span class="unit">个</span></div>
                  </div>
                  <div class="typeNum-right-bottom">
                    <div class="typeNum-right-top-name">已完成数</div>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(0, 'completedCount') }} <span
                        class="unit">个</span>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(0, 'completedCount') }} <span class="unit">个</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="typeNum">
              <div class="typeNum"
                   v-if="ENABLE_SEMI_FINISHED">
                <div class="typeNum-left">
                  <img src="~@/assets/images/chartCard2.svg" alt="图表"
                  <img src="~@/assets/images/chartCard2.svg"
                       alt="图表"
                    style="width: 40px; height: 40px; object-fit: contain;">
                  <div class="typeNum-left-text" style="color: #5EB334;">半成品</div>
                  <div class="typeNum-left-text"
                       style="color: #5EB334;">半成品</div>
                </div>
                <div class="typeNum-center">
                  <div class="typeNum-leftLine2">-</div>
@@ -50,22 +54,22 @@
                <div class="typeNum-right">
                  <div class="typeNum-right-top">
                    <div class="typeNum-right-top-name">总数量</div>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(1, 'totalCount') }} <span
                        class="unit">个</span></div>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(1, 'totalCount') }} <span class="unit">个</span></div>
                  </div>
                  <div class="typeNum-right-bottom">
                    <div class="typeNum-right-top-name">已完成数</div>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(1, 'completedCount') }} <span
                        class="unit">个</span>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(1, 'completedCount') }} <span class="unit">个</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="typeNum">
                <div class="typeNum-left">
                  <img src="~@/assets/images/chartCard3.svg" alt="图表"
                  <img src="~@/assets/images/chartCard3.svg"
                       alt="图表"
                    style="width: 40px; height: 40px; object-fit: contain;">
                  <div class="typeNum-left-text" style="color: #8000FF;">成品</div>
                  <div class="typeNum-left-text"
                       style="color: #8000FF;">成品</div>
                </div>
                <div class="typeNum-center">
                  <div class="typeNum-leftLine3">-</div>
@@ -74,13 +78,11 @@
                <div class="typeNum-right">
                  <div class="typeNum-right-top">
                    <div class="typeNum-right-top-name">总数量</div>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(2, 'totalCount') }} <span
                        class="unit">个</span></div>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(2, 'totalCount') }} <span class="unit">个</span></div>
                  </div>
                  <div class="typeNum-right-bottom">
                    <div class="typeNum-right-top-name">已完成数</div>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(2, 'completedCount') }} <span
                        class="unit">个</span>
                    <div class="typeNum-right-top-text">{{ getInspectStatValue(2, 'completedCount') }} <span class="unit">个</span>
                    </div>
                  </div>
                </div>
@@ -90,17 +92,20 @@
        </el-col>
        <!-- 质检合格率 -->
        <el-col :span="15">
          <el-card class="chart-card" shadow="hover">
          <el-card class="chart-card"
                   shadow="hover">
            <template #header>
              <div class="card-header">
                <div class="chart-title-line"></div>
                <span>质检合格率</span>
              </div>
            </template>
            <div class="top-container flex-center">
            <div class="top-container flex-center"
                 :class="{ 'quality-two-cols': !ENABLE_SEMI_FINISHED }">
              <div class="quality-card blue-card">
                <div class="quality-card-title">
                  <img src="~@/assets/images/chartCard.svg" alt="原材料"
                  <img src="~@/assets/images/chartCard.svg"
                       alt="原材料"
                    style="width: 24px; height: 24px; margin-right: 8px;">
                  原材料合格率
                </div>
@@ -111,7 +116,8 @@
                      <div class="quality-item-tip">占比</div>
                      <div class="quality-item-value">{{ getPassRateStatValue(0, 'completionRate') }}</div>
                    </div>
                    <div class="quality-item-chart" ref="materialCompletionChart"></div>
                    <div class="quality-item-chart"
                         ref="materialCompletionChart"></div>
                  </div>
                  <div class="quality-item">
                    <div>
@@ -119,13 +125,16 @@
                      <div class="quality-item-tip">占比</div>
                      <div class="quality-item-value">{{ getPassRateStatValue(0, 'passRate') }}</div>
                    </div>
                    <div class="quality-item-chart" ref="materialQualityChart"></div>
                    <div class="quality-item-chart"
                         ref="materialQualityChart"></div>
                  </div>
                </div>
              </div>
              <div class="quality-card green-card">
              <div class="quality-card green-card"
                   v-if="ENABLE_SEMI_FINISHED">
                <div class="quality-card-title">
                  <img src="~@/assets/images/chartCard2.svg" alt="半成品"
                  <img src="~@/assets/images/chartCard2.svg"
                       alt="半成品"
                    style="width: 24px; height: 24px; margin-right: 8px;">
                  半成品合格率
                </div>
@@ -136,7 +145,8 @@
                      <div class="quality-item-tip">占比</div>
                      <div class="quality-item-value">{{ getPassRateStatValue(1, 'completionRate') }}</div>
                    </div>
                    <div class="quality-item-chart" ref="semiCompletionChart"></div>
                    <div class="quality-item-chart"
                         ref="semiCompletionChart"></div>
                  </div>
                  <div class="quality-item">
                    <div>
@@ -144,13 +154,15 @@
                      <div class="quality-item-tip">占比</div>
                      <div class="quality-item-value">{{ getPassRateStatValue(1, 'passRate') }}</div>
                    </div>
                    <div class="quality-item-chart" ref="semiQualityChart"></div>
                    <div class="quality-item-chart"
                         ref="semiQualityChart"></div>
                  </div>
                </div>
              </div>
              <div class="quality-card purple-card">
                <div class="quality-card-title">
                  <img src="~@/assets/images/chartCard3.svg" alt="成品"
                  <img src="~@/assets/images/chartCard3.svg"
                       alt="成品"
                    style="width: 24px; height: 24px; margin-right: 8px;">
                  成品合格率
                </div>
@@ -161,7 +173,8 @@
                      <div class="quality-item-tip">占比</div>
                      <div class="quality-item-value">{{ getPassRateStatValue(2, 'completionRate') }}</div>
                    </div>
                    <div class="quality-item-chart" ref="finalCompletionChart"></div>
                    <div class="quality-item-chart"
                         ref="finalCompletionChart"></div>
                  </div>
                  <div class="quality-item">
                    <div>
@@ -169,7 +182,8 @@
                      <div class="quality-item-tip">占比</div>
                      <div class="quality-item-value">{{ getPassRateStatValue(2, 'passRate') }}</div>
                    </div>
                    <div class="quality-item-chart" ref="finalQualityChart"></div>
                    <div class="quality-item-chart"
                         ref="finalQualityChart"></div>
                  </div>
                </div>
              </div>
@@ -182,7 +196,8 @@
      <el-row :gutter="20">
        <!-- 质检合格率 -->
        <el-col :span="24">
          <el-card class="chart-card" shadow="hover">
          <el-card class="chart-card"
                   shadow="hover">
            <template #header>
              <div class="card-header">
                <div class="chart-title-line"></div>
@@ -191,18 +206,22 @@
            </template>
            <div class="chart-container-line">
              <div class="container-line-left">
                <div style="height: 100%; width: 100%;" ref="usageChartRef">
                <div style="height: 100%; width: 100%;"
                     ref="usageChartRef">
                </div>
              </div>
              <div class="container-line-right">
                <div style="height: 80%; width: 100%;" ref="inspectionChartRef">
                <div style="height: 80%; width: 100%;"
                     ref="inspectionChartRef">
                </div>
                <div class="container-line-right-bottom">
                <div class="container-line-right-bottom"
                     :class="{ 'two-boxes': !ENABLE_SEMI_FINISHED }">
                  <div class="inspection-chart-box">
                    <div class="chart-box-title">原材料总数</div>
                    <div class="chart-box-num">{{ getYearlyStatValue(0, 'totalCount') }}</div>
                  </div>
                  <div class="inspection-chart-box">
                  <div class="inspection-chart-box"
                       v-if="ENABLE_SEMI_FINISHED">
                    <div class="chart-box-title">半成品总数</div>
                    <div class="chart-box-num">{{ getYearlyStatValue(1, 'totalCount') }}</div>
                  </div>
@@ -218,8 +237,13 @@
                 class="chart-container"></div> -->
            <div class="yearchange">
              <div style="margin-right: 8px;font-size: 14px;">年份:</div>
              <el-date-picker v-model="value3" size="mini" :clearable="false" style="width: 60px;" type="year"
                :disabled-date="disabledDate" placeholder="">
              <el-date-picker v-model="value3"
                              size="mini"
                              :clearable="false"
                              style="width: 60px;"
                              type="year"
                              :disabled-date="disabledDate"
                              placeholder="">
              </el-date-picker>
            </div>
          </el-card>
@@ -230,19 +254,22 @@
      <el-row :gutter="20">
        <!-- 样品进度图表 -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
          <el-card class="chart-card"
                   shadow="hover">
            <template #header>
              <div class="card-header">
                <div class="chart-title-line"></div>
                <span>质量完成明细</span>
              </div>
            </template>
            <div ref="equipmentChartRef" class="chart-container"></div>
            <div ref="equipmentChartRef"
                 class="chart-container"></div>
          </el-card>
        </el-col>
        <!-- 设备使用图表 -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
          <el-card class="chart-card"
                   shadow="hover">
            <template #header>
              <div class="card-header">
                <div class="chart-title-line"></div>
@@ -253,21 +280,33 @@
              <div class="container-line2-left">
                <div class="info-box">
                  <div class="info-box-header">项目分布</div>
                  <div class="info-line" v-for="(item, index) in topParametersData.list" :key="index">
                    <div class="info-icon" :style="{ backgroundColor: getParameterColor(index) }"></div>
                  <div class="info-line"
                       v-for="(item, index) in topParametersData.list"
                       :key="index">
                    <div class="info-icon"
                         :style="{ backgroundColor: getParameterColor(index) }"></div>
                    <div class="info-line-title">{{ item.name }}</div>
                    <div class="info-line-value1">{{ item.percentage }}%</div>
                    <div class="info-line-value2">{{ item.count }}</div>
                  </div>
                </div>
              </div>
              <div ref="sampleChartRef" style="height: 100%; width: 50%;" class="chart-container"></div>
              <div ref="sampleChartRef"
                   style="height: 100%; width: 50%;"
                   class="chart-container"></div>
            </div>
            <!-- Tab 选择器 -->
            <div class="tab-selector">
              <div class="tab-item" :class="{ active: activeTab === 'raw' }" @click="activeTab = 'raw'">原材料</div>
              <div class="tab-item" :class="{ active: activeTab === 'semi' }" @click="activeTab = 'semi'">半成品</div>
              <div class="tab-item" :class="{ active: activeTab === 'final' }" @click="activeTab = 'final'">成品</div>
              <div class="tab-item"
                   :class="{ active: activeTab === 'raw' }"
                   @click="activeTab = 'raw'">原材料</div>
              <div class="tab-item"
                   v-if="ENABLE_SEMI_FINISHED"
                   :class="{ active: activeTab === 'semi' }"
                   @click="activeTab = 'semi'">半成品</div>
              <div class="tab-item"
                   :class="{ active: activeTab === 'final' }"
                   @click="activeTab = 'final'">成品</div>
            </div>
          </el-card>
        </el-col>
@@ -277,10 +316,19 @@
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
  import { ref, reactive, onMounted, nextTick, watch } from "vue";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";
import { getInspectStatistics, getPassRateStatistics, getMonthlyPassRateStatistics, getYearlyPassRateStatistics, getMonthlyCompletionDetails, getTopParameters } from "@/api/reportAnalysis/qualityReport";
  import {
    getInspectStatistics,
    getPassRateStatistics,
    getMonthlyPassRateStatistics,
    getYearlyPassRateStatistics,
    getMonthlyCompletionDetails,
    getTopParameters,
  } from "@/api/reportAnalysis/qualityReport";

  const ENABLE_SEMI_FINISHED = false;

// 响应式数据
const filterForm = reactive({
@@ -296,8 +344,16 @@
const topParametersData = ref({ totalCount: 0, list: [] });
const activeTab = ref("raw");

const getParameterColor = (index) => {
  const colors = ['#165DFF', '#14C9C9', '#F7BA1E', '#722ED1', '#3491FA', '#FF7D00', '#F53F3F'];
  const getParameterColor = index => {
    const colors = [
      "#165DFF",
      "#14C9C9",
      "#F7BA1E",
      "#722ED1",
      "#3491FA",
      "#FF7D00",
      "#F53F3F",
    ];
  return colors[index % colors.length];
};

@@ -307,19 +363,23 @@
};

const getInspectStatValue = (type, field) => {
  const stat = inspectStatisticsData.value.find(item => item.modelType === type);
    const stat = inspectStatisticsData.value.find(
      item => item.modelType === type
    );
  return stat ? stat[field] : 0;
};

const getPassRateStatValue = (type, field) => {
  const stat = passRateStatisticsData.value.find(item => item.modelType === type);
    const stat = passRateStatisticsData.value.find(
      item => item.modelType === type
    );
  if (stat) {
    if (field === 'completionRate' || field === 'passRate') {
      return stat[field] ? Number(stat[field]).toFixed(0) + '%' : '0%';
      if (field === "completionRate" || field === "passRate") {
        return stat[field] ? Number(stat[field]).toFixed(0) + "%" : "0%";
    }
    return stat[field];
  }
  return field === 'completionRate' || field === 'passRate' ? '0%' : 0;
    return field === "completionRate" || field === "passRate" ? "0%" : 0;
};

const fetchInspectStatisticsData = async () => {
@@ -387,8 +447,17 @@

const fetchTopParametersData = async () => {
  try {
    const typeMap = { raw: 1, semi: 2, final: 3 };
    const res = await getTopParameters(typeMap[activeTab.value]);
      const typeMap = {
        raw: 1,
        final: 3,
        ...(ENABLE_SEMI_FINISHED ? { semi: 2 } : {}),
      };
      const tabKey = ENABLE_SEMI_FINISHED
        ? activeTab.value
        : activeTab.value === "semi"
        ? "raw"
        : activeTab.value;
      const res = await getTopParameters(typeMap[tabKey] ?? 1);
    if (res.code === 200) {
      topParametersData.value = res.data;
      initSampleChart();
@@ -417,17 +486,19 @@
};

// 监听年份变化
import { watch } from "vue";
watch(value3, () => {
  fetchMonthlyPassRateData();
  fetchYearlyPassRateData();
  fetchMonthlyCompletionDetailsData();
});

watch(activeTab, () => {
  watch(activeTab, val => {
    if (!ENABLE_SEMI_FINISHED && val === "semi") {
      activeTab.value = "raw";
      return;
    }
  fetchTopParametersData();
});


// 图表引用
const sampleChartRef = ref(null);
@@ -496,7 +567,7 @@
          data: topParametersData.value.list.map((item, index) => ({
            value: item.count,
            name: item.name,
            itemStyle: { color: getParameterColor(index) }
              itemStyle: { color: getParameterColor(index) },
          })),
        },
      ],
@@ -509,6 +580,49 @@
const initEquipmentChart = () => {
  if (equipmentChartRef.value) {
    equipmentChart = echarts.init(equipmentChartRef.value);
      const legendData = ENABLE_SEMI_FINISHED
        ? ["原材料", "半成品", "成品"]
        : ["原材料", "成品"];
      const barWidth = ENABLE_SEMI_FINISHED ? "15%" : "20%";
      const series = [
        {
          name: "原材料",
          type: "bar",
          barWidth,
          data: monthlyCompletionDetailsData.value.map(
            item => item.rawMaterialCount
          ),
          itemStyle: {
            color: "#409EFF",
          },
        },
        ...(ENABLE_SEMI_FINISHED
          ? [
              {
                name: "半成品",
                type: "bar",
                barWidth,
                data: monthlyCompletionDetailsData.value.map(
                  item => item.processCount
                ),
                itemStyle: {
                  color: "#67C23A",
                },
              },
            ]
          : []),
        {
          name: "成品",
          type: "bar",
          barWidth,
          data: monthlyCompletionDetailsData.value.map(
            item => item.outgoingCount
          ),
          itemStyle: {
            color: "#E6A23C",
          },
        },
      ];
    const option = {
      title: {
        show: false,
@@ -526,8 +640,8 @@
        containLabel: true,
      },
      legend: {
        data: ["原材料", "半成品", "成品"], // 图例数据
        icon: ["circle", "circle", "circle"],
          data: legendData, // 图例数据
          icon: legendData.map(() => "circle"),
        itemWidth: 10, // 设置图标宽度
        itemHeight: 10,
        itemGap: 30,
@@ -554,37 +668,7 @@
        type: "value",
        name: "数(个)",
      },
      series: [
        {
          name: "原材料",
          type: "bar",
          barWidth: "15%",
          data: monthlyCompletionDetailsData.value.map(item => item.rawMaterialCount),
          itemStyle: {
            color: "#409EFF",
          },
        },
        {
          name: "半成品",
          type: "bar",
          barWidth: "15%",

          data: monthlyCompletionDetailsData.value.map(item => item.processCount),
          itemStyle: {
            color: "#67C23A",
          },
        },
        {
          name: "成品",
          type: "bar",
          barWidth: "15%",

          data: monthlyCompletionDetailsData.value.map(item => item.outgoingCount),
          itemStyle: {
            color: "#E6A23C",
          },
        },
      ],
        series,
    };
    equipmentChart.setOption(option);
  }
@@ -594,6 +678,27 @@
const initInspectionChart = () => {
  if (inspectionChartRef.value) {
    inspectionChart = echarts.init(inspectionChartRef.value);
      const data = [
        {
          value: getYearlyStatValue(0, "totalCount"),
          name: "原材料",
          itemStyle: { color: "#1890FF" },
        },
        ...(ENABLE_SEMI_FINISHED
          ? [
              {
                value: getYearlyStatValue(1, "totalCount"),
                name: "半成品",
                itemStyle: { color: "#F7BA1E" },
              },
            ]
          : []),
        {
          value: getYearlyStatValue(2, "totalCount"),
          name: "成品",
          itemStyle: { color: "#14C9C9" },
        },
      ];
    const option = {
      title: {
        show: false,
@@ -605,14 +710,10 @@
        {
          type: "pie",
          radius: "70%",
          data: [
            { value: getYearlyStatValue(0, 'totalCount'), name: "原材料", itemStyle: { color: "#1890FF" } },
            { value: getYearlyStatValue(1, 'totalCount'), name: "半成品", itemStyle: { color: "#F7BA1E" } },
            { value: getYearlyStatValue(2, 'totalCount'), name: "成品", itemStyle: { color: "#14C9C9" } },
          ],
            data,
          label: {
            show: true,
            formatter: '{b}: {c}'
              formatter: "{b}: {c}",
          },
          emphasis: {
            itemStyle: {
@@ -634,6 +735,44 @@
  if (usageChartRef.value) {
    // 初始化 ECharts 实例
    usageChart = echarts.init(usageChartRef.value);
      const legendData = ENABLE_SEMI_FINISHED
        ? ["原材料", "半成品", "成品"]
        : ["原材料", "成品"];
      const series = [
        {
          name: "原材料",
          type: "line",
          symbol: "circle",
          itemStyle: {
            color: "#1890FF",
          },
          data: monthlyPassRateData.value.map(item => item.rawMaterial.passRate),
        },
        ...(ENABLE_SEMI_FINISHED
          ? [
              {
                name: "半成品",
                type: "line",
                symbol: "circle",
                itemStyle: {
                  color: "#F7BA1E",
                },
                data: monthlyPassRateData.value.map(
                  item => item.process.passRate
                ),
              },
            ]
          : []),
        {
          name: "成品",
          type: "line",
          symbol: "circle",
          itemStyle: {
            color: "#14C9C9",
          },
          data: monthlyPassRateData.value.map(item => item.outgoing.passRate),
        },
      ];
    // 配置图表选项
    const option = {
      // 标题配置（隐藏）
@@ -655,8 +794,8 @@
      },
      // 图例配置
      legend: {
        data: ["原材料", "半成品", "成品"], // 图例数据
        icon: ["circle", "circle", "circle"],
          data: legendData, // 图例数据
          icon: legendData.map(() => "circle"),
        itemWidth: 10, // 设置图标宽度
        itemHeight: 10,
        itemGap: 30,
@@ -686,38 +825,7 @@
        name: "单位：%",
      },
      // 系列数据
      series: [
        {
          name: "原材料", // 系列名称
          type: "line", // 图表类型为折线图
          // stack: "Total", // 堆叠名称
          symbol: "circle",
          itemStyle: {
            color: "#1890FF", // 设置这条线的颜色
          },
          data: monthlyPassRateData.value.map(item => item.rawMaterial.passRate),
        },
        {
          name: "半成品", // 系列名称
          type: "line", // 图表类型为折线图
          // stack: "Total", // 堆叠名称
          symbol: "circle",
          itemStyle: {
            color: "#F7BA1E", // 设置这条线的颜色
          },
          data: monthlyPassRateData.value.map(item => item.process.passRate),
        },
        {
          name: "成品", // 系列名称
          type: "line", // 图表类型为折线图
          // stack: "Total", // 堆叠名称
          symbol: "circle",
          itemStyle: {
            color: "#14C9C9", // 设置这条线的颜色
          },
          data: monthlyPassRateData.value.map(item => item.outgoing.passRate),
        },
      ],
        series,
    };
    // 将配置应用到图表
    usageChart.setOption(option);
@@ -731,7 +839,8 @@
    if (!chart) {
      chart = echarts.init(chartRef.value);
    }
    const numericValue = typeof value === 'string' ? parseFloat(value) / 100 : value / 100;
      const numericValue =
        typeof value === "string" ? parseFloat(value) / 100 : value / 100;
    const option = {
      series: [
        {
@@ -762,32 +871,37 @@
  materialCompletionChartInstance = initQualityChart(
    materialCompletionChart,
    "#1890ff",
    getPassRateStatValue(0, 'completionRate')
      getPassRateStatValue(0, "completionRate")
  );
  materialQualityChartInstance = initQualityChart(
    materialQualityChart,
    "#52c41a",
    getPassRateStatValue(0, 'passRate')
      getPassRateStatValue(0, "passRate")
  );
    if (ENABLE_SEMI_FINISHED) {
  semiCompletionChartInstance = initQualityChart(
    semiCompletionChart,
    "#1890ff",
    getPassRateStatValue(1, 'completionRate')
        getPassRateStatValue(1, "completionRate")
  );
  semiQualityChartInstance = initQualityChart(
    semiQualityChart,
    "#52c41a",
    getPassRateStatValue(1, 'passRate')
        getPassRateStatValue(1, "passRate")
  );
    } else {
      semiCompletionChartInstance = null;
      semiQualityChartInstance = null;
    }
  finalCompletionChartInstance = initQualityChart(
    finalCompletionChart,
    "#1890ff",
    getPassRateStatValue(2, 'completionRate')
      getPassRateStatValue(2, "completionRate")
  );
  finalQualityChartInstance = initQualityChart(
    finalQualityChart,
    "#722ed1",
    getPassRateStatValue(2, 'passRate')
      getPassRateStatValue(2, "passRate")
  );
};

@@ -878,6 +992,9 @@

// 生命周期
onMounted(() => {
    if (!ENABLE_SEMI_FINISHED && activeTab.value === "semi") {
      activeTab.value = "raw";
    }
  fetchInspectStatisticsData();
  fetchPassRateStatisticsData();
  fetchMonthlyPassRateData();
@@ -901,8 +1018,10 @@
    // 调整质检合格率图表大小
    materialCompletionChartInstance?.resize();
    materialQualityChartInstance?.resize();
      if (ENABLE_SEMI_FINISHED) {
    semiCompletionChartInstance?.resize();
    semiQualityChartInstance?.resize();
      }
    finalCompletionChartInstance?.resize();
    finalQualityChartInstance?.resize();
  });
@@ -1159,6 +1278,10 @@
  display: flex;
}

  .top-container.two-cols .typeNum {
    width: 50%;
  }

.typeNum {
  height: 100%;
  width: 33.33%;
@@ -1309,6 +1432,14 @@
  flex-direction: column;
}

  .top-container.quality-two-cols .quality-card {
    width: 48%;
  }

  .container-line-right-bottom.two-boxes .inspection-chart-box {
    width: 45%;
  }

.blue-card {
  background-color: #e6f7ff;
}