huminmin
2026-07-15 a52ebf49d0a304697ec7af4f4c3e6b6e13f269e7
src/views/reportAnalysis/reportManagement/index.vue
@@ -273,6 +273,54 @@
        </el-col>
      </el-row>
    </div>
    <div class=charts-container>
      <el-row :gutter=20>
        <el-col :span=24>
          <el-card class=chart-card shadow=hover>
            <template #header>
              <div class=card-header>
                <div class=chart-title-line></div>
                <span>按人员/班组统计质量数据</span>
              </div>
            </template>
            <el-row :gutter=20>
              <el-col :span=12>
                <div class=quality-rate-block>
                  <div class=quality-rate-block-title>按人员统计</div>
                  <el-table :data=personGroupRateData.personList size=small border class=quality-rate-table>
                    <el-table-column prop=dimensionName label=人员 min-width=120 />
                    <el-table-column prop=totalCount label=总数 min-width=80 />
                    <el-table-column prop=qualifiedCount label=合格数 min-width=90 />
                    <el-table-column prop=unqualifiedCount label=不合格数 min-width=100 />
                    <el-table-column prop=reworkCount label=返工数 min-width=90 />
                    <el-table-column prop=scrapCount label=报废数 min-width=90 />
                    <el-table-column label=合格率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.passRate) }}</template></el-table-column>
                    <el-table-column label=返工率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.reworkRate) }}</template></el-table-column>
                    <el-table-column label=报废率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.scrapRate) }}</template></el-table-column>
                  </el-table>
                </div>
              </el-col>
              <el-col :span=12>
                <div class=quality-rate-block>
                  <div class=quality-rate-block-title>按班组统计</div>
                  <el-table :data=personGroupRateData.groupList size=small border class=quality-rate-table>
                    <el-table-column prop=dimensionName label=班组 min-width=120 />
                    <el-table-column prop=totalCount label=总数 min-width=80 />
                    <el-table-column prop=qualifiedCount label=合格数 min-width=90 />
                    <el-table-column prop=unqualifiedCount label=不合格数 min-width=100 />
                    <el-table-column prop=reworkCount label=返工数 min-width=90 />
                    <el-table-column prop=scrapCount label=报废数 min-width=90 />
                    <el-table-column label=合格率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.passRate) }}</template></el-table-column>
                    <el-table-column label=返工率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.reworkRate) }}</template></el-table-column>
                    <el-table-column label=报废率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.scrapRate) }}</template></el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
@@ -280,7 +328,7 @@
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, getPersonGroupRateStatistics } from "@/api/reportAnalysis/qualityReport";
// 响应式数据
const filterForm = reactive({
@@ -294,6 +342,7 @@
const yearlyPassRateData = ref([]);
const monthlyCompletionDetailsData = ref([]);
const topParametersData = ref({ totalCount: 0, list: [] });
const personGroupRateData = ref({ personList: [], groupList: [] });
const activeTab = ref("raw");
const getParameterColor = (index) => {
@@ -321,6 +370,24 @@
  }
  return field === 'completionRate' || field === 'passRate' ? '0%' : 0;
};
const formatRateValue = value => {
  return value || value === 0 ? Number(value).toFixed(2) + '%' : '0.00%';
};
const fetchPersonGroupRateStatisticsData = async () => {
  try {
    const res = await getPersonGroupRateStatistics();
    if (res.code === 200 && res.data) {
      personGroupRateData.value = {
        personList: res.data.personList || [],
        groupList: res.data.groupList || []
      };
    }
  } catch (error) {
    console.error("Failed to fetch person/group rate statistics:", error);
  }
};
const fetchInspectStatisticsData = async () => {
  try {
@@ -426,6 +493,7 @@
watch(activeTab, () => {
  fetchTopParametersData();
  fetchPersonGroupRateStatisticsData();
});
@@ -884,6 +952,7 @@
  fetchYearlyPassRateData();
  fetchMonthlyCompletionDetailsData();
  fetchTopParametersData();
  fetchPersonGroupRateStatisticsData();
  nextTick(() => {
    initSampleChart();
    initEquipmentChart();
@@ -1037,6 +1106,21 @@
  border-radius: 3px;
}
.quality-rate-block {
  min-height: 320px;
}
.quality-rate-block-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
}
.quality-rate-table {
  width: 100%;
}
.chart-container {
  height: 250px;
  width: 100%;