报表管理遗漏修改

zhangwencui

昨天 0838873683296b6cd008c1e974b7635bd14cfe7b

报表管理遗漏修改

 src/views/reportAnalysis/reportManagement/index.vue

@@ -5,7 +5,8 @@
      <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>
@@ -15,7 +16,8 @@
            <div class="top-container">
              <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 +28,22 @@
                <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-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 +52,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 +76,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,7 +90,8 @@
        </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>
@@ -100,7 +101,8 @@
            <div class="top-container flex-center">
              <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 +113,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 +122,15 @@
                      <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-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 +141,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 +150,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 +169,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 +178,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 +192,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,11 +202,13 @@
            </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="inspection-chart-box">
@@ -218,8 +231,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 +248,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 +274,32 @@
              <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"
                   :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>
@@ -280,7 +312,14 @@
import { ref, reactive, onMounted, nextTick } 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 filterForm = reactive({
@@ -296,8 +335,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 +354,23 @@
};

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

const getPassRateStatValue = (type, field) => {
  const stat = passRateStatisticsData.value.find(item => item.inspectType === type);
    const stat = passRateStatisticsData.value.find(
      item => item.inspectType === 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 () => {
@@ -391,6 +442,11 @@
    const res = await getTopParameters(typeMap[activeTab.value]);
    if (res.code === 200) {
      topParametersData.value = res.data;
        sumnum.value = topParametersData.value.list.reduce(
          (acc, cur) => acc + cur.count,
          0
        );
        console.log(sumnum.value);
      initSampleChart();
    }
  } catch (error) {
@@ -415,7 +471,7 @@
  const currentYear = new Date().getFullYear();
  return time.getFullYear() > currentYear;
};

  const sumnum = ref(0);
// 监听年份变化
import { watch } from "vue";
watch(value3, () => {
@@ -427,7 +483,6 @@
watch(activeTab, () => {
  fetchTopParametersData();
});


// 图表引用
const sampleChartRef = ref(null);
@@ -465,29 +520,37 @@
      title: {
        show: false,
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      // legend: {
      //   orient: "vertical",
      //   left: "left",
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{a} <br/>{b}: {c} ({d}%)",
      // },
      series: [
        {
          name: "检测项目",
            name: "",
          type: "pie",
          radius: ["40%", "80%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "18",
              position: "center",
              formatter: function () {
                return `{a|检测数量}\n{b|${sumnum.value}}`;
              },
              disabled: true,
              rich: {
                a: {
                  fontSize: 14,
                  color: "#606266",
                  fontWeight: "normal",
                  lineHeight: 20,
                },
                b: {
                  fontSize: 20,
                  color: "#303133",
              fontWeight: "bold",
                  lineHeight: 24,
                  padding: [5, 0, 0, 0],
                },
            },
          },
          labelLine: {
@@ -496,7 +559,7 @@
          data: topParametersData.value.list.map((item, index) => ({
            value: item.count,
            name: item.name,
            itemStyle: { color: getParameterColor(index) }
              itemStyle: { color: getParameterColor(index) },
          })),
        },
      ],
@@ -559,7 +622,9 @@
          name: "原材料",
          type: "bar",
          barWidth: "15%",
          data: monthlyCompletionDetailsData.value.map(item => item.rawMaterialCount),
            data: monthlyCompletionDetailsData.value.map(
              item => item.rawMaterialCount
            ),
          itemStyle: {
            color: "#409EFF",
          },
@@ -569,7 +634,9 @@
          type: "bar",
          barWidth: "15%",

          data: monthlyCompletionDetailsData.value.map(item => item.processCount),
            data: monthlyCompletionDetailsData.value.map(
              item => item.processCount
            ),
          itemStyle: {
            color: "#67C23A",
          },
@@ -579,7 +646,9 @@
          type: "bar",
          barWidth: "15%",

          data: monthlyCompletionDetailsData.value.map(item => item.outgoingCount),
            data: monthlyCompletionDetailsData.value.map(
              item => item.outgoingCount
            ),
          itemStyle: {
            color: "#E6A23C",
          },
@@ -606,13 +675,25 @@
          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" } },
              {
                value: getYearlyStatValue(0, "totalCount"),
                name: "原材料",
                itemStyle: { color: "#1890FF" },
              },
              {
                value: getYearlyStatValue(1, "totalCount"),
                name: "半成品",
                itemStyle: { color: "#F7BA1E" },
              },
              {
                value: getYearlyStatValue(2, "totalCount"),
                name: "成品",
                itemStyle: { color: "#14C9C9" },
              },
          ],
          label: {
            show: true,
            formatter: '{b}: {c}'
              formatter: "{b}: {c}",
          },
          emphasis: {
            itemStyle: {
@@ -695,7 +776,9 @@
          itemStyle: {
            color: "#1890FF", // 设置这条线的颜色
          },
          data: monthlyPassRateData.value.map(item => item.rawMaterial.passRate),
            data: monthlyPassRateData.value.map(
              item => item.rawMaterial.passRate
            ),
        },
        {
          name: "半成品", // 系列名称
@@ -731,7 +814,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 +846,32 @@
  materialCompletionChartInstance = initQualityChart(
    materialCompletionChart,
    "#1890ff",
    getPassRateStatValue(0, 'completionRate')
      getPassRateStatValue(0, "completionRate")
  );
  materialQualityChartInstance = initQualityChart(
    materialQualityChart,
    "#52c41a",
    getPassRateStatValue(0, 'passRate')
      getPassRateStatValue(0, "passRate")
  );
  semiCompletionChartInstance = initQualityChart(
    semiCompletionChart,
    "#1890ff",
    getPassRateStatValue(1, 'completionRate')
      getPassRateStatValue(1, "completionRate")
  );
  semiQualityChartInstance = initQualityChart(
    semiQualityChart,
    "#52c41a",
    getPassRateStatValue(1, 'passRate')
      getPassRateStatValue(1, "passRate")
  );
  finalCompletionChartInstance = initQualityChart(
    finalCompletionChart,
    "#1890ff",
    getPassRateStatValue(2, 'completionRate')
      getPassRateStatValue(2, "completionRate")
  );
  finalQualityChartInstance = initQualityChart(
    finalQualityChart,
    "#722ed1",
    getPassRateStatValue(2, 'passRate')
      getPassRateStatValue(2, "passRate")
  );
};

@@ -1116,6 +1200,7 @@
  color: #1d2129;
  font-size: 16px;
  font-weight: 500;
    line-height: 37px;
}

.info-line {
@@ -1123,6 +1208,7 @@
  display: flex;
  padding-left: 20px;
  align-items: center;
    flex: 1;
}

.info-icon {