spring
21 小时以前 d6a1a3997beda891d467754d0838a953ddb17606
src/views/reportAnalysis/reportManagement/index.vue
@@ -5,8 +5,7 @@
      <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>
@@ -16,8 +15,7 @@
            <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>
@@ -28,22 +26,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>
@@ -52,22 +50,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>
@@ -76,11 +74,13 @@
                <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,8 +90,7 @@
        </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>
@@ -101,8 +100,7 @@
            <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>
@@ -113,8 +111,7 @@
                      <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>
@@ -122,15 +119,13 @@
                      <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>
@@ -141,8 +136,7 @@
                      <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>
@@ -150,15 +144,13 @@
                      <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>
@@ -169,8 +161,7 @@
                      <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>
@@ -178,8 +169,7 @@
                      <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>
@@ -192,8 +182,7 @@
      <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>
@@ -202,13 +191,11 @@
            </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">
@@ -231,13 +218,8 @@
                 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>
@@ -248,22 +230,19 @@
      <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>
@@ -274,32 +253,21 @@
              <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>
@@ -312,14 +280,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 } from "@/api/reportAnalysis/qualityReport";
  // 响应式数据
  const filterForm = reactive({
@@ -335,16 +296,8 @@
  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];
  };
@@ -354,23 +307,19 @@
  };
  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 () => {
@@ -442,11 +391,6 @@
      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) {
@@ -471,7 +415,7 @@
    const currentYear = new Date().getFullYear();
    return time.getFullYear() > currentYear;
  };
  const sumnum = ref(0);
  // 监听年份变化
  import { watch } from "vue";
  watch(value3, () => {
@@ -483,6 +427,7 @@
  watch(activeTab, () => {
    fetchTopParametersData();
  });
  // 图表引用
  const sampleChartRef = ref(null);
@@ -522,35 +467,27 @@
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: ({d}%)",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
      // legend: {
      //   orient: "vertical",
      //   left: "left",
      // },
        series: [
          {
            name: "",
          name: "检测项目",
            type: "pie",
            radius: ["40%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
            show: false,
              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",
          emphasis: {
            label: {
              show: true,
              fontSize: "18",
                  fontWeight: "bold",
                  lineHeight: 24,
                  padding: [5, 0, 0, 0],
                },
              },
            },
            labelLine: {
@@ -559,7 +496,7 @@
            data: topParametersData.value.list.map((item, index) => ({
              value: item.count,
              name: item.name,
              itemStyle: { color: getParameterColor(index) },
            itemStyle: { color: getParameterColor(index) }
            })),
          },
        ],
@@ -622,9 +559,7 @@
            name: "原材料",
            type: "bar",
            barWidth: "15%",
            data: monthlyCompletionDetailsData.value.map(
              item => item.rawMaterialCount
            ),
          data: monthlyCompletionDetailsData.value.map(item => item.rawMaterialCount),
            itemStyle: {
              color: "#409EFF",
            },
@@ -634,9 +569,7 @@
            type: "bar",
            barWidth: "15%",
            data: monthlyCompletionDetailsData.value.map(
              item => item.processCount
            ),
          data: monthlyCompletionDetailsData.value.map(item => item.processCount),
            itemStyle: {
              color: "#67C23A",
            },
@@ -646,9 +579,7 @@
            type: "bar",
            barWidth: "15%",
            data: monthlyCompletionDetailsData.value.map(
              item => item.outgoingCount
            ),
          data: monthlyCompletionDetailsData.value.map(item => item.outgoingCount),
            itemStyle: {
              color: "#E6A23C",
            },
@@ -675,25 +606,13 @@
            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: {
@@ -776,9 +695,7 @@
            itemStyle: {
              color: "#1890FF", // 设置这条线的颜色
            },
            data: monthlyPassRateData.value.map(
              item => item.rawMaterial.passRate
            ),
          data: monthlyPassRateData.value.map(item => item.rawMaterial.passRate),
          },
          {
            name: "半成品", // 系列名称
@@ -814,8 +731,7 @@
      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: [
          {
@@ -846,32 +762,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')
    );
  };
@@ -1200,7 +1116,6 @@
    color: #1d2129;
    font-size: 16px;
    font-weight: 500;
    line-height: 37px;
  }
  .info-line {
@@ -1208,7 +1123,6 @@
    display: flex;
    padding-left: 20px;
    align-items: center;
    flex: 1;
  }
  .info-icon {