生产看板统计

zhangwencui

2026-04-01 e8cd7922bbd14d926c7e3e6df0b1695b499d78e4

 src/views/reportAnalysis/productionStatistics/index.vue

@@ -54,7 +54,7 @@
                @click="handleBlockTimeDimensionChange('month')">月</span>
        </div>
        <div class="bi-panel-body">
            <div class="chart-filter-tabs">
          <div class="chart-filter-tabs">
            <span v-for="area in salesAreas"
                  :key="area"
                  class="cf-tab"
@@ -63,7 +63,12 @@
          </div>
          <div class="material-info-card">
            <div class="material-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <svg width="24"
                   height="24"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
                   stroke-width="2">
                <path d="M20 7h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2z" />
                <polyline points="22,7 12,13 2,7" />
              </svg>
@@ -113,28 +118,29 @@
      </div>
      <!-- 中间中心环 -->
      <div class="center-ring">
        <!-- <div class="center-ring-box">
          <div class="center-metric m1">
            <div class="center-metric-label">项目产量</div>
            <div class="center-metric-value">{{ projectProduction }}</div>
            <div class="center-metric-unit">件</div>
        <div class="center-ring-box">
          <div class="ring-box-topright">
            <div class="topright-label">固废处理量</div>
          </div>
          <div class="center-metric m2">
            <div class="center-metric-label">固体处理量</div>
            <div class="center-metric-value">{{ solidWaste处理量 }}</div>
            <div class="center-metric-unit">吨</div>
          <div class="ring-box-left">
            <div class="left-label">粉煤灰</div>
            <div class="left-value">月处理 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨 年处理 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨</div>
            <div class="left-label"
                 style="margin-top: 2vh;">石膏</div>
            <div class="left-value">月处理 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨 年处理 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨</div>
          </div>
          <div class="center-metric m3">
            <div class="center-metric-label">砌块产量</div>
            <div class="center-metric-value">{{ blockProduction }}</div>
            <div class="center-metric-unit">件</div>
          <div class="ring-box-topleft">
            <div class="topleft-label">项目产量</div>
          </div>
          <div class="center-metric m4">
            <div class="center-metric-label">板材产量</div>
            <div class="center-metric-value">{{ boardProduction }}</div>
            <div class="center-metric-unit">件</div>
          <div class="ring-box-right">
            <div class="right-label">砌块产量</div>
            <div class="right-value">月产量 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨 年产量 <span style="font-weight: bold;font-size: 1.3vh;">7812
              </span> 吨</div>
            <div class="right-label"
                 style="margin-top: 2vh;">板材产量</div>
            <div class="right-value">月产量 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨 年产量 <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 吨</div>
          </div>
        </div> -->
        </div>
      </div>
      <!-- 左下：生产成本单耗统计（板材） -->
      <div class="bi-panel bi-panel-bottom-left">
@@ -149,7 +155,7 @@
                @click="handleBoardTimeDimensionChange('month')">月</span>
        </div>
        <div class="bi-panel-body">
            <div class="chart-filter-tabs">
          <div class="chart-filter-tabs">
            <span v-for="area in salesAreas"
                  :key="area"
                  class="cf-tab"
@@ -158,7 +164,12 @@
          </div>
          <div class="material-info-card">
            <div class="material-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <svg width="24"
                   height="24"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
                   stroke-width="2">
                <path d="M20 7h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2z" />
                <polyline points="22,7 12,13 2,7" />
              </svg>
@@ -198,6 +209,8 @@
                :class="{ active: customerTimeDimension === 'month' }"
                @click="handleCustomerTimeDimensionChange('month')">月</span>
        </div>
        <div ref="customerTrendChart"
             class="echart-fill"></div>
        <!-- <div class="bi-panel-body">
          <div class="chart-unit-row chart-unit-single">
            <span>单位：家</span>
@@ -209,7 +222,7 @@
      <!-- 右下：销量排名分析 -->
      <div class="bi-panel bi-panel-bottom-right">
        <PanelHeader :isFullscreen="true"
                     title="物料生产量统计" />
                     title="能耗统计" />
        <div class="panel-tabs">
          <span class="tab-item"
                :class="{ active: salesTimeDimension === 'year' }"
@@ -219,15 +232,8 @@
                @click="handleSalesTimeDimensionChange('month')">月</span>
        </div>
        <div class="bi-panel-body">
          <!-- <div class="chart-filter-tabs">
            <span v-for="area in salesAreas"
                  :key="area"
                  class="cf-tab"
                  :class="{ active: selectedArea === area }"
                  @click="handleAreaChange(area)">{{ area }}</span>
          </div>
          <div ref="salesRankingChart"
               class="echart-fill"></div> -->
               class="echart-fill"></div>
        </div>
      </div>
    </div>
@@ -426,7 +432,14 @@
  // 板材单耗图表配置
  const boardCostChartOption = computed(() => {
    const materials = ["消耗量"];
    const colors = ["#00A4ED", "#34D8F7", "#4A8BFF", "#8A6BFF", "#C8C447", "#FF6B6B"];
    const colors = [
      "#00A4ED",
      "#34D8F7",
      "#4A8BFF",
      "#8A6BFF",
      "#C8C447",
      "#FF6B6B",
    ];
    const year = 2024;
    const periodType = boardTimeDimension.value;

@@ -520,7 +533,14 @@
  // 产量分析图表配置
  const productionChartOption = computed(() => {
    const salesAreas = ["全部", "砌块", "板材"];
    const colors = ["#00A4ED", "#34D8F7", "#4A8BFF", "#8A6BFF", "#C8C447", "#FF6B6B"];
    const colors = [
      "#00A4ED",
      "#34D8F7",
      "#4A8BFF",
      "#8A6BFF",
      "#C8C447",
      "#FF6B6B",
    ];
    const year = 2024;
    const periodType = productionTimeDimension.value;

@@ -622,8 +642,8 @@

  // 新增客户趋势图表配置
  const customerTrendChartOption = computed(() => {
    const customerTypes = ["全部", "石灰", "水泥", "铝粉膏", "脱模剂"];
    const colors = ["#00A4ED", "#34D8F7", "#4A8BFF", "#8A6BFF", "#C8C447"];
    const customerTypes = ["全部", "粉煤灰", "石膏", "石灰"];
    const colors = ["#00A4ED", "#4A8BFF", "#8A6BFF", "#C8C447"];
    const year = 2024;
    const periodType = customerTimeDimension.value;

@@ -723,71 +743,179 @@
    };
  });

  // 销量排名分析图表配置
  // 能耗统计图表配置
  const salesRankingChartOption = computed(() => {
    const customers = ["客户BB", "客户AA", "客户CC", "客户DD", "客户DD", "客户DD"];
    const values = [130, 120, 102, 90, 90, 70];
    const barColors = [
      "#34D8F7",
      "#4A8BFF",
      "#8A6BFF",
      "#C8C447",
      "#C8C447",
      "#C8C447",
    const energyTypes = ["水", "电", "蒸汽"];
    const colors = ["#00A4ED", "#AC43C2", "#F5BC4A"];
    const year = 2024;
    const periodType = salesTimeDimension.value;

    // 生成时间段
    let periods = [];
    if (periodType === "year") {
      // 年度数据：6个月
      for (let month = 9; month <= 12; month++) {
        periods.push(`${month}/${year.toString().slice(2)}`);
      }
      for (let month = 1; month <= 3; month++) {
        periods.push(`${month}/${(year + 1).toString().slice(2)}`);
      }
    } else {
      // 月度数据：7天
      const month = 1;
      for (let day = 1; day <= 7; day++) {
        periods.push(`${month}/${day}`);
      }
    }

    // 为每种能源类型生成数据
    const waterData = periods.map(() => {
      return periodType === "year"
        ? Math.floor(Math.random() * 300) + 400
        : Math.floor(Math.random() * 30) + 40;
    });
    const steamData = periods.map(() => {
      return periodType === "year"
        ? Math.floor(Math.random() * 400) + 500
        : Math.floor(Math.random() * 40) + 50;
    });
    const electricityData = periods.map(() => {
      return periodType === "year"
        ? Math.floor(Math.random() * 200) + 300
        : Math.floor(Math.random() * 20) + 30;
    });

    const series = [
      {
        name: "水",
        type: "bar",
        data: waterData,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#00A4ED" },
            { offset: 1, color: "#0F285A" },
          ]),
          borderRadius: [getResponsiveValue(4), getResponsiveValue(4), 0, 0],
        },
        barWidth: getResponsiveValue(6),
      },
      {
        name: "电",
        type: "line",
        data: electricityData,
        itemStyle: {
          color: "#AC43C2",
        },
        lineStyle: {
          width: getResponsiveValue(1),
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#AC43C2" },
            { offset: 1, color: "#AC43C2" },
          ]),
        },
        symbol: "circle",
        symbolSize: getResponsiveValue(8),
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#AC43C250" },
            { offset: 1, color: "#AC43C203" },
          ]),
        },
      },
      {
        name: "蒸汽",
        type: "bar",
        data: steamData,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#F5BC4A" },
            { offset: 1, color: "#591C22" },
          ]),
          borderRadius: [getResponsiveValue(4), getResponsiveValue(4), 0, 0],
        },
        barWidth: getResponsiveValue(6),
      },
    ];

    return {
      backgroundColor: "transparent",
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" },
        backgroundColor: "rgba(0,0,0,0.55)",
        borderColor: "rgba(64,158,255,0.25)",
        axisPointer: { type: "cross" },
        backgroundColor: "rgba(0,0,0,0.7)",
        borderColor: "rgba(64,158,255,0.5)",
        borderWidth: getResponsiveValue(1),
        textStyle: { color: "#B8C8E0", fontSize: getResponsiveValue(11) },
        formatter: "{b}: {c} 立方米",
        textStyle: { color: "#B8C8E0", fontSize: getResponsiveValue(12) },
        formatter: function (params) {
          let result = params[0].name + "<br/>";
          params.forEach(param => {
            const unit = param.seriesName === "电" ? "度" : "吨";
            result += `${param.marker}${param.seriesName}: ${param.value} ${unit}<br/>`;
          });
          return result;
        },
      },
      legend: {
        data: energyTypes,
        top: "5%",
        right: "1%",
        textStyle: {
          color: "#B8C8E0",
          fontSize: getResponsiveValue(10),
        },
        itemWidth: getResponsiveValue(12),
        itemHeight: getResponsiveValue(12),
        itemGap: getResponsiveValue(15),
      },
      grid: {
        left: "14%",
        right: "6%",
        top: "16%",
        bottom: "8%",
        left: "1%",
        right: "1%",
        top: "25%",
        bottom: "0%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        axisLine: { show: false },
        axisLabel: { color: "#B8C8E0", fontSize: getResponsiveValue(11) },
        splitLine: { lineStyle: { color: "rgba(184,200,224,0.12)" } },
      },
      yAxis: {
        type: "category",
        data: customers,
        axisTick: { show: false },
        axisLine: { show: false },
        data: periods,
        axisLabel: {
          color: "#B8C8E0",
          fontSize: getResponsiveValue(11),
          margin: getResponsiveValue(8),
          color: "#93B9FF",
          interval: 0,
          rotate: periodType === "month" ? 45 : 0,
        },
      },
      series: [
        {
          name: "销量（立方米）",
          type: "bar",
          barWidth: getResponsiveValue(14),
          data: values,
          itemStyle: {
            color: params => barColors[params.dataIndex] || "#00A4ED",
            borderRadius: [
              getResponsiveValue(6),
              getResponsiveValue(6),
              getResponsiveValue(6),
              getResponsiveValue(6),
            ],
        axisLine: {
          show: true,
          lineStyle: {
            width: getResponsiveValue(1),
            color: "#305B9A",
          },
        },
      ],
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          fontSize: getResponsiveValue(11),
          color: "#93B9FF",
          formatter: function (value) {
            return value;
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#305B9A",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#0F2E60",
            type: "dashed",
          },
        },
      },
      series: series,
    };
  });

@@ -1232,12 +1360,12 @@
  }

  /* .scroll-table tbody tr:nth-child(odd) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  background-color: rgba(64, 158, 255, 0.05);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              background-color: rgba(64, 158, 255, 0.05);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                .scroll-table tbody tr:nth-child(even) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    background-color: rgba(64, 158, 255, 0.1);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      } */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            .scroll-table tbody tr:nth-child(even) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                background-color: rgba(64, 158, 255, 0.1);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  } */
  .oddTableTr {
    background-color: rgba(64, 158, 255, 0.05);
  }
@@ -1357,7 +1485,6 @@
    height: 24vh;
  }

  
  .bi-panel-bottom-right .echart-fill {
    height: calc(100% - 2.8vh);
  }
@@ -1410,11 +1537,11 @@
    grid-row: 1 / span 2;
    position: absolute;
    background: url("@/assets/BI/imageSS@2x.png") no-repeat bottom center;
    background-size: 100% 30%;
    background-size: 80% 30%;
    left: 25%;
    top: 25%;
    transform: translate(-50%, -50%);
    width: 60vh;
    transform: translate(-50%, -45%);
    width: 50%;
    height: 40.5vh;
    z-index: 3;
    pointer-events: none;
@@ -1422,11 +1549,103 @@
  .center-ring-box {
    position: absolute;
    /* inset: 0; */
    height: 100%;
    height: 88%;
    width: 100%;
    margin-top: 3%;
    /* background-color: #fff; */
    background: url("@/assets/BI/imageSStop.png") no-repeat center center;
    background-size: 80% 90%;
    background: url("@/assets/BI/SCbg.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .ring-box-topright {
    position: absolute;
    top: 6vh;
    right: 0;
    width: 25%;
    height: 15%;
    background: url("@/assets/BI/SCbgright.png") no-repeat center center;
    background-size: 100% 100%;
    text-align: right;
  }
  .ring-box-topleft {
    position: absolute;
    top: 6vh;
    left: 0;
    width: 25%;
    height: 15%;
    background: url("@/assets/BI/SCbgleft.png") no-repeat center center;
    background-size: 100% 100%;
    text-align: left;
  }
  .topright-label {
    font-size: 1.8vh;
    font-weight: 500;
    color: rgba(234, 246, 255, 0.9);
    margin-top: 0;
    position: relative;
    bottom: 3vh;
    right: 1vh;
  }

  .topleft-label {
    font-size: 1.8vh;
    font-weight: 500;
    color: rgba(234, 246, 255, 0.9);
    margin-top: 0;
    position: relative;
    bottom: 3vh;
    left: 1vh;
  }
  .ring-box-left {
    /* background-color: #ebebeb; */
    width: 30%;
    position: absolute;
    left: 1vh;
    top: 56%;
    transform: translateY(-50%);
  }
  .left-label {
    font-size: 1.4vh;
    font-weight: 500;
    color: #0effef;
    margin-top: 0;
    position: relative;
    bottom: 3vh;
  }
  .left-value {
    font-size: 1.2vh;
    font-weight: 500;
    color: rgba(234, 246, 255, 0.9);
    margin-top: 0;
    position: relative;
    bottom: 3vh;
    margin-top: 0.4vh;
  }
  .ring-box-right {
    /* background-color: #ebebeb; */
    width: 30%;
    float: right;
    position: absolute;
    right: -1vh;
    top: 56%;
    transform: translateY(-50%);
  }
  .right-label {
    font-size: 1.4vh;
    font-weight: 500;
    color: #ffa60e;
    margin-top: 0;
    position: relative;
    bottom: 3vh;
  }

  .right-value {
    font-size: 1.2vh;
    font-weight: 500;
    color: rgba(234, 246, 255, 0.9);
    margin-top: 0;
    position: relative;
    bottom: 3vh;
    margin-top: 0.4vh;
  }

  .center-ring-bg {
@@ -1632,7 +1851,7 @@
    text-align: left;
    color: #c3c3c3;
  }
    /* 材料信息卡片 */
  /* 材料信息卡片 */
  .material-info-card {
    display: flex;
    align-items: center;
@@ -1691,5 +1910,4 @@
    font-size: 1vh;
    opacity: 0.7;
  }

</style>