gongchunyi
5 小时以前 a32f1459f41ea06b9e004f557445d7de5d8c75d7
src/views/reportAnalysis/reportManagement/index.vue
@@ -37,7 +37,7 @@
                  </div>
                </div>
              </div>
              <div class="typeNum">
              <div class="typeNum" v-if="showSemiFinished">
                <div class="typeNum-left">
                  <img src="~@/assets/images/chartCard2.svg" alt="图表"
                    style="width: 40px; height: 40px; object-fit: contain;">
@@ -123,7 +123,7 @@
                  </div>
                </div>
              </div>
              <div class="quality-card green-card">
              <div class="quality-card green-card" v-if="showSemiFinished">
                <div class="quality-card-title">
                  <img src="~@/assets/images/chartCard2.svg" alt="半成品"
                    style="width: 24px; height: 24px; margin-right: 8px;">
@@ -202,7 +202,7 @@
                    <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="showSemiFinished">
                    <div class="chart-box-title">半成品总数</div>
                    <div class="chart-box-num">{{ getYearlyStatValue(1, 'totalCount') }}</div>
                  </div>
@@ -266,7 +266,7 @@
            <!-- 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 v-if="showSemiFinished" class="tab-item" :class="{ active: activeTab === 'semi' }" @click="activeTab = 'semi'">半成品</div>
              <div class="tab-item" :class="{ active: activeTab === 'final' }" @click="activeTab = 'final'">成品</div>
            </div>
          </el-card>
@@ -295,6 +295,9 @@
const monthlyCompletionDetailsData = ref([]);
const topParametersData = ref({ totalCount: 0, list: [] });
const activeTab = ref("raw");
// 是否显示半成品相关内容。有的企业没有半成品,设为 false 即可隐藏所有半成品相关展示
const showSemiFinished = ref(false);
const getParameterColor = (index) => {
  const colors = ['#165DFF', '#14C9C9', '#F7BA1E', '#722ED1', '#3491FA', '#FF7D00', '#F53F3F'];
@@ -526,7 +529,7 @@
        containLabel: true,
      },
      legend: {
        data: ["原材料", "半成品", "成品"], // 图例数据
        data: showSemiFinished.value ? ["原材料", "半成品", "成品"] : ["原材料", "成品"], // 图例数据
        icon: ["circle", "circle", "circle"],
        itemWidth: 10, // 设置图标宽度
        itemHeight: 10,
@@ -564,7 +567,7 @@
            color: "#409EFF",
          },
        },
        {
        ...(showSemiFinished.value ? [{
          name: "半成品",
          type: "bar",
          barWidth: "15%",
@@ -573,7 +576,7 @@
          itemStyle: {
            color: "#67C23A",
          },
        },
        }] : []),
        {
          name: "成品",
          type: "bar",
@@ -607,7 +610,7 @@
          radius: "70%",
          data: [
            { value: getYearlyStatValue(0, 'totalCount'), name: "原材料", itemStyle: { color: "#1890FF" } },
            { value: getYearlyStatValue(1, 'totalCount'), name: "半成品", itemStyle: { color: "#F7BA1E" } },
            ...(showSemiFinished.value ? [{ value: getYearlyStatValue(1, 'totalCount'), name: "半成品", itemStyle: { color: "#F7BA1E" } }] : []),
            { value: getYearlyStatValue(2, 'totalCount'), name: "成品", itemStyle: { color: "#14C9C9" } },
          ],
          label: {
@@ -655,7 +658,7 @@
      },
      // 图例配置
      legend: {
        data: ["原材料", "半成品", "成品"], // 图例数据
        data: showSemiFinished.value ? ["原材料", "半成品", "成品"] : ["原材料", "成品"], // 图例数据
        icon: ["circle", "circle", "circle"],
        itemWidth: 10, // 设置图标宽度
        itemHeight: 10,
@@ -697,7 +700,7 @@
          },
          data: monthlyPassRateData.value.map(item => item.rawMaterial.passRate),
        },
        {
        ...(showSemiFinished.value ? [{
          name: "半成品", // 系列名称
          type: "line", // 图表类型为折线图
          // stack: "Total", // 堆叠名称
@@ -706,7 +709,7 @@
            color: "#F7BA1E", // 设置这条线的颜色
          },
          data: monthlyPassRateData.value.map(item => item.process.passRate),
        },
        }] : []),
        {
          name: "成品", // 系列名称
          type: "line", // 图表类型为折线图
@@ -769,16 +772,18 @@
    "#52c41a",
    getPassRateStatValue(0, 'passRate')
  );
  semiCompletionChartInstance = initQualityChart(
    semiCompletionChart,
    "#1890ff",
    getPassRateStatValue(1, 'completionRate')
  );
  semiQualityChartInstance = initQualityChart(
    semiQualityChart,
    "#52c41a",
    getPassRateStatValue(1, 'passRate')
  );
  if (showSemiFinished.value) {
    semiCompletionChartInstance = initQualityChart(
      semiCompletionChart,
      "#1890ff",
      getPassRateStatValue(1, 'completionRate')
    );
    semiQualityChartInstance = initQualityChart(
      semiQualityChart,
      "#52c41a",
      getPassRateStatValue(1, 'passRate')
    );
  }
  finalCompletionChartInstance = initQualityChart(
    finalCompletionChart,
    "#1890ff",
@@ -1161,7 +1166,7 @@
.typeNum {
  height: 100%;
  width: 33.33%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -1297,11 +1302,12 @@
.flex-center {
  justify-content: space-evenly;
  gap: 15px;
}
.quality-card {
  /* flex: 1; */
  width: 32%;
  flex: 1;
  min-width: 0;
  /* height: 100px; */
  border-radius: 8px;
  padding: 12px;