src/api/qualityManagement/rawMaterialInspection.js

@@ -55,3 +55,35 @@
    })
}

// æŸ¥è¯¢è¿‡ç¨‹æ£€åˆ—表
export function qualityInspectProcessPage(query) {
    return request({
        url: '/quality/qualityInspect/processPage',
        method: 'get',
        params: query,
    })
}
// æŸ¥è¯¢è¿‡ç¨‹æ£€è¯¦æƒ…
export function qualityInspectProcessDetails(query) {
    return request({
        url: '/quality/qualityInspect/processDetails',
        method: 'get',
        params: query,
    })
}
// æŸ¥è¯¢æˆå“æ£€æ£€åˆ—表
export function qualityInspectFinishedListPage(query) {
    return request({
        url: '/quality/qualityInspect/finishedPage',
        method: 'get',
        params: query,
    })
}
// æˆå“æ£€-查看标准投入产出比例
export function qualityInspectFinishedRatio(query) {
    return request({
        url: '/quality/qualityInspect/finishedRatio',
        method: 'get',
        params: query,
    })
}

 src/assets/images/ratiodown.png

 src/assets/images/ratioup.png

 src/views/energyManagement/energyConsumptionStatistical/index.vue

@@ -657,10 +657,29 @@

  // ç»Ÿè®¡ç»´åº¦åˆ‡æ¢
  const handleTypeChange = () => {
    // é‡ç½®æ—¶é—´èŒƒå›´
    searchForm.dateRange = [];
    searchForm.monthRange = [];
    searchForm.year = new Date().getFullYear();
    // é‡ç½®æ—¶é—´èŒƒå›´å¹¶è®¾ç½®é»˜è®¤å€¼
    const end = new Date();
    const start = new Date();

    if (statisticsType.value === "day") {
      // é»˜è®¤æœ€è¿‘7天
      start.setDate(start.getDate() - 6);
      searchForm.dateRange = [
        start.toISOString().split("T")[0],
        end.toISOString().split("T")[0],
      ];
    } else if (statisticsType.value === "month") {
      // é»˜è®¤æœ€è¿‘3个月
      start.setMonth(start.getMonth() - 2);
      searchForm.monthRange = [
        start.toISOString().slice(0, 7),
        end.toISOString().slice(0, 7),
      ];
    } else if (statisticsType.value === "year") {
      // é»˜è®¤å½“前年份
      searchForm.year = new Date().getFullYear();
    }

    page.current = 1;
    handleQuery();
  };

 src/views/index.vue

@@ -2,7 +2,9 @@
  <div class="home-page">
    <div class="top-bar">
      <div class="user-box">
        <img :src="userStore.avatar" class="avatar" alt="" />
        <!-- <img :src="userStore.avatar"
             class="avatar"
             alt="" /> -->
        <div>
          <div class="hello">{{ userStore.roleName || "系统管理员" }}，你好</div>
          <div class="sub">登录时间：{{ userStore.currentLoginTime }}</div>
@@ -10,172 +12,209 @@
      </div>
      <div class="top-actions">
        <span class="refresh-time">数据更新时间：{{ lastUpdatedAt || "-" }}</span>
        <el-button size="small" type="primary" plain @click="refreshDashboardData">刷新数据</el-button>
        <el-button size="small" plain @click="configDialogVisible = true">首页配置</el-button>
        <el-button size="small"
                   type="primary"
                   plain
                   @click="refreshDashboardData">刷新数据</el-button>
        <el-button size="small"
                   plain
                   @click="configDialogVisible = true">首页配置</el-button>
      </div>
    </div>

    <div class="content-grid">
      <div class="left-col">
        <section class="section-card">
          <div class="section-title-row">
            <div class="section-title">快捷操作</div>
            <el-button size="small" type="primary" link @click="openShortcutDialog">添加快捷入口</el-button>
            <el-button size="small"
                       type="primary"
                       link
                       @click="openShortcutDialog">添加快捷入口</el-button>
          </div>
          <div class="quick-grid">
            <el-button
              v-for="item in shortcuts"
              :key="`${item.label}-${item.path}`"
              :type="item.invalid ? 'danger' : 'default'"
              @click="goTo(item.path)"
            >
            <el-button v-for="item in shortcuts"
                       :key="`${item.label}-${item.path}`"
                       :type="item.invalid ? 'danger' : 'default'"
                       @click="goTo(item.path)">
              {{ item.label }}
            </el-button>
          </div>
        </section>

        <section class="section-card">
          <div class="section-title">重点待办</div>
          <div class="todo-row" v-for="todo in todos" :key="todo.title">
            <el-tag size="small" :type="todo.type">{{ todo.level }}</el-tag>
          <div class="todo-row"
               v-for="todo in todos"
               :key="todo.title">
            <el-tag size="small"
                    :type="todo.type">{{ todo.level }}</el-tag>
            <span>{{ todo.title }}</span>
          </div>
        </section>

        <section class="section-card">
          <div class="section-title">经营关注</div>
          <div class="focus-row" v-for="item in businessFocus" :key="item.name">
          <div class="focus-row"
               v-for="item in businessFocus"
               :key="item.name">
            <span class="focus-name">{{ item.name }}</span>
            <span class="focus-value">{{ item.value }}</span>
          </div>
        </section>

        <section class="section-card flex-fill-card">
          <div class="section-title-row">
            <div class="section-title">今日待处理</div>
            <el-radio-group v-model="pendingFilter" size="small">
            <el-radio-group v-model="pendingFilter"
                            size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="mine">我的</el-radio-button>
              <el-radio-button label="high">高优先</el-radio-button>
            </el-radio-group>
          </div>
          <div class="task-row" v-for="task in filteredPendingTasks" :key="task.id">
          <div class="task-row"
               v-for="task in filteredPendingTasks"
               :key="task.id">
            <div class="task-left">
              <el-tag size="small" :type="task.type">{{ task.level }}</el-tag>
              <el-tag size="small"
                      :type="task.type">{{ task.level }}</el-tag>
              <span class="task-title">{{ task.title }}</span>
            </div>
            <el-button link type="primary" @click="goTo(task.path)">去处理</el-button>
            <el-button link
                       type="primary"
                       @click="goTo(task.path)">去处理</el-button>
          </div>
          <el-empty v-if="filteredPendingTasks.length === 0" description="暂无待处理事项" :image-size="80" />
          <el-empty v-if="filteredPendingTasks.length === 0"
                    description="暂无待处理事项"
                    :image-size="80" />
        </section>
      </div>

      <div class="right-col">
        <section class="section-card" v-if="isSectionVisible('trendCards')">
        <section class="section-card"
                 v-if="isSectionVisible('trendCards')">
          <div class="section-title">最近7天关键指标趋势</div>
          <div class="trend-cards">
            <div class="trend-card clickable" v-for="card in recentTrendCards" :key="card.key" @click="handleTrendCardClick(card)">
            <div class="trend-card clickable"
                 v-for="card in recentTrendCards"
                 :key="card.key"
                 @click="handleTrendCardClick(card)">
              <div class="trend-head">
                <span class="trend-label">{{ card.label }}</span>
                <span class="trend-rate" :class="trendClass(card.change)">
                <span class="trend-rate"
                      :class="trendClass(card.change)">
                  {{ card.change > 0 ? "+" : "" }}{{ card.change.toFixed(1) }}%
                </span>
              </div>
              <div class="trend-value">{{ card.latest }} {{ card.unit }}</div>
              <div class="sparkline">
                <span
                  v-for="(v, idx) in card.values"
                  :key="`${card.key}-${idx}`"
                  class="sparkline-bar"
                  :style="{ height: `${calcBarHeight(v, card.values)}%` }"
                />
                <span v-for="(v, idx) in card.values"
                      :key="`${card.key}-${idx}`"
                      class="sparkline-bar"
                      :style="{ height: `${calcBarHeight(v, card.values)}%` }" />
              </div>
            </div>
          </div>
        </section>

        <section class="section-card" v-if="isSectionVisible('planTrend')">
        <section class="section-card"
                 v-if="isSectionVisible('planTrend')">
          <div class="section-title-row">
            <div class="section-title">计划与生产趋势</div>
            <el-radio-group v-model="chartRangePlan" size="small" @change="loadPlanTrend">
            <el-radio-group v-model="chartRangePlan"
                            size="small"
                            @change="loadPlanTrend">
              <el-radio-button :label="1">日</el-radio-button>
              <el-radio-button :label="2">周</el-radio-button>
              <el-radio-button :label="3">月</el-radio-button>
            </el-radio-group>
          </div>
          <Echarts
            :chartStyle="chartStyle"
            :legend="planLegend"
            :grid="grid"
            :tooltip="lineTooltip"
            :xAxis="planXAxis"
            :yAxis="valueYAxis"
            :series="planSeries"
            style="height: 300px"
          />
          <Echarts :chartStyle="chartStyle"
                   :legend="planLegend"
                   :grid="grid"
                   :tooltip="lineTooltip"
                   :xAxis="planXAxis"
                   :yAxis="valueYAxis"
                   :series="planSeries"
                   style="height: 300px" />
        </section>

        <div class="row-two" v-if="isSectionVisible('qualityChart') || isSectionVisible('costChart')">
          <section class="section-card" v-if="isSectionVisible('qualityChart')">
        <div class="row-two"
             v-if="isSectionVisible('qualityChart') || isSectionVisible('costChart')">
          <section class="section-card"
                   v-if="isSectionVisible('qualityChart')">
            <div class="section-title-row">
              <div class="section-title">质检异常分布</div>
              <el-radio-group v-model="chartRangeQuality" size="small" @change="loadQualityData">
              <el-radio-group v-model="chartRangeQuality"
                              size="small"
                              @change="loadQualityData">
                <el-radio-button :label="1">周</el-radio-button>
                <el-radio-button :label="2">月</el-radio-button>
                <el-radio-button :label="3">季度</el-radio-button>
              </el-radio-group>
            </div>
            <Echarts
              :chartStyle="chartStyle"
              :grid="grid"
              :tooltip="barTooltip"
              :xAxis="qualityXAxis"
              :yAxis="valueYAxis"
              :series="qualitySeries"
              style="height: 260px"
            />
            <Echarts :chartStyle="chartStyle"
                     :grid="grid"
                     :tooltip="barTooltip"
                     :xAxis="qualityXAxis"
                     :yAxis="valueYAxis"
                     :series="qualitySeries"
                     style="height: 260px" />
          </section>
          <section class="section-card" v-if="isSectionVisible('costChart')">
          <section class="section-card"
                   v-if="isSectionVisible('costChart')">
            <div class="section-title">能耗与成本结构</div>
            <Echarts
              :chartStyle="chartStyle"
              :legend="costLegend"
              :tooltip="pieTooltip"
              :series="costSeries"
              style="height: 260px"
            />
            <Echarts :chartStyle="chartStyle"
                     :legend="costLegend"
                     :tooltip="pieTooltip"
                     :series="costSeries"
                     style="height: 260px" />
          </section>
        </div>

        <section class="section-card" v-if="isSectionVisible('warningCenter')">
        <section class="section-card"
                 v-if="isSectionVisible('warningCenter')">
          <div class="section-title">异常预警中心</div>
          <div class="warning-row" v-for="item in warningList" :key="item.id">
          <div class="warning-row"
               v-for="item in warningList"
               :key="item.id">
            <div class="warning-left">
              <el-tag size="small" :type="item.levelType">{{ item.levelText }}</el-tag>
              <el-tag size="small"
                      :type="item.levelType">{{ item.levelText }}</el-tag>
              <span class="warning-title">{{ item.title }}</span>
            </div>
            <el-button link type="danger" @click="goTo(item.path)">处理</el-button>
            <el-button link
                       type="danger"
                       @click="goTo(item.path)">处理</el-button>
          </div>
          <el-empty v-if="warningList.length === 0" description="暂无异常预警" :image-size="80" />
          <el-empty v-if="warningList.length === 0"
                    description="暂无异常预警"
                    :image-size="80" />
        </section>

        <section class="section-card mini-table-wrap" v-if="isSectionVisible('planTable')">
        <section class="section-card mini-table-wrap"
                 v-if="isSectionVisible('planTable')">
          <div class="section-title">生产计划执行明细</div>
          <el-table :data="planTable" size="small" stripe>
            <el-table-column prop="planNo" label="计划单号" min-width="150" />
            <el-table-column prop="product" label="产品" min-width="120" />
            <el-table-column prop="qty" label="计划量" min-width="90" />
            <el-table-column prop="issued" label="已下发" min-width="90" />
            <el-table-column prop="status" label="状态" min-width="100" />
            <el-table-column label="操作" min-width="120">
          <el-table :data="planTable"
                    size="small"
                    stripe>
            <el-table-column prop="planNo"
                             label="计划单号"
                             min-width="150" />
            <el-table-column prop="product"
                             label="产品"
                             min-width="120" />
            <el-table-column prop="qty"
                             label="计划量"
                             min-width="90" />
            <el-table-column prop="issued"
                             label="已下发"
                             min-width="90" />
            <el-table-column prop="status"
                             label="状态"
                             min-width="100" />
            <el-table-column label="操作"
                             min-width="120">
              <template #default="{ row }">
                <el-button link type="primary" @click="goTo(routePathMap.plan)">查看</el-button>
                <el-button
                  v-if="row.status !== '已完成'"
                  link
                  type="success"
                  @click="goTo(routePathMap.dispatch)"
                >
                <el-button link
                           type="primary"
                           @click="goTo(routePathMap.plan)">查看</el-button>
                <el-button v-if="row.status !== '已完成'"
                           link
                           type="success"
                           @click="goTo(routePathMap.dispatch)">
                  ä¸‹å‘
                </el-button>
              </template>
@@ -184,941 +223,1076 @@
        </section>
      </div>
    </div>

    <el-dialog v-model="shortcutDialogVisible" title="添加快捷入口（最多6个）" width="680px">
    <el-dialog v-model="shortcutDialogVisible"
               title="添加快捷入口（最多6个）"
               width="680px">
      <div class="shortcut-form-row">
        <el-tree-select
          v-model="selectedPagePath"
          placeholder="请选择页面（目录不可选）"
          filterable
          clearable
          check-strictly
          node-key="value"
          :data="menuTreeOptions"
          :props="{ label: 'label', value: 'value', children: 'children', disabled: 'disabled' }"
          style="grid-column: span 2"
        />
        <el-button type="success" @click="addShortcutBySelect">选择添加</el-button>
        <el-tree-select v-model="selectedPagePath"
                        placeholder="请选择页面（目录不可选）"
                        filterable
                        clearable
                        check-strictly
                        node-key="value"
                        :data="menuTreeOptions"
                        :props="{ label: 'label', value: 'value', children: 'children', disabled: 'disabled' }"
                        style="grid-column: span 2" />
        <el-button type="success"
                   @click="addShortcutBySelect">选择添加</el-button>
      </div>
      <el-table :data="shortcuts" size="small" border>
        <el-table-column prop="label" label="名称" min-width="220" />
        <el-table-column label="状态" min-width="80">
      <el-table :data="shortcuts"
                size="small"
                border>
        <el-table-column prop="label"
                         label="名称"
                         min-width="220" />
        <el-table-column label="状态"
                         min-width="80">
          <template #default="{ row }">
            <el-tag size="small" :type="row.invalid ? 'danger' : 'success'">{{ row.invalid ? "无效" : "有效" }}</el-tag>
            <el-tag size="small"
                    :type="row.invalid ? 'danger' : 'success'">{{ row.invalid ? "无效" : "有效" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="90" align="center">
        <el-table-column label="操作"
                         min-width="90"
                         align="center">
          <template #default="{ $index }">
            <el-button link type="danger" @click="removeShortcut($index)">删除</el-button>
            <el-button link
                       type="danger"
                       @click="removeShortcut($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog v-model="configDialogVisible" title="首页模块配置" width="520px">
      <el-checkbox-group v-model="enabledSectionKeys" class="config-check-group">
        <el-checkbox v-for="item in sectionConfigOptions" :key="item.key" :label="item.key">
    <el-dialog v-model="configDialogVisible"
               title="首页模块配置"
               width="520px">
      <el-checkbox-group v-model="enabledSectionKeys"
                         class="config-check-group">
        <el-checkbox v-for="item in sectionConfigOptions"
                     :key="item.key"
                     :label="item.key">
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <el-button @click="configDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSectionConfig">保存</el-button>
        <el-button type="primary"
                   @click="saveSectionConfig">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import Echarts from "@/components/Echarts/echarts.vue";
import useUserStore from "@/store/modules/user.js";
import usePermissionStore from "@/store/modules/permission";
import {
  expenseCompositionAnalysis,
  getProgressStatistics,
  homeTodos,
  orderCount,
  processDataProductionStatistics,
  qualityInspectionStatistics,
  nonComplianceWarning,
} from "@/api/viewIndex.js";
  import { computed, onMounted, reactive, ref } from "vue";
  import { useRouter } from "vue-router";
  import { ElMessage } from "element-plus";
  import Echarts from "@/components/Echarts/echarts.vue";
  import useUserStore from "@/store/modules/user.js";
  import usePermissionStore from "@/store/modules/permission";
  import {
    expenseCompositionAnalysis,
    getProgressStatistics,
    homeTodos,
    orderCount,
    processDataProductionStatistics,
    qualityInspectionStatistics,
    nonComplianceWarning,
  } from "@/api/viewIndex.js";

const router = useRouter();
const userStore = useUserStore();
const permissionStore = usePermissionStore();
  const router = useRouter();
  const userStore = useUserStore();
  const permissionStore = usePermissionStore();

const SHORTCUT_STORAGE_KEY = "home-shortcuts-v1";
  const SHORTCUT_STORAGE_KEY = "home-shortcuts-v1";

const defaultShortcuts = [
  { label: "主生产计划", path: "/productionManagement/productionPlan" },
  { label: "生产订单", path: "/productionManagement/productionOrder" },
  { label: "生产报工", path: "/productionManagement/productionReporting" },
  { label: "过程检", path: "/qualityManagement/processInspection" },
  { label: "生产能耗", path: "/energyManagement/productionEnergyConsumption" },
  { label: "生产成本", path: "/costAccounting/productionCostAccounting" },
  { label: "标准vs实际", path: "/costAccounting/stdVsActCostAnalysis" },
  { label: "决策分析", path: "/reportAnalysis/dataDashboard" },
];
  const defaultShortcuts = [
    { label: "主生产计划", path: "/productionManagement/productionPlan" },
    { label: "生产订单", path: "/productionManagement/productionOrder" },
    { label: "生产报工", path: "/productionManagement/productionReporting" },
    { label: "过程检", path: "/qualityManagement/processInspection" },
    { label: "生产能耗", path: "/energyManagement/productionEnergyConsumption" },
    { label: "生产成本", path: "/costAccounting/productionCostAccounting" },
    { label: "标准vs实际", path: "/costAccounting/stdVsActCostAnalysis" },
    { label: "决策分析", path: "/reportAnalysis/dataDashboard" },
  ];

const isRouteValid = (path) => {
  if (!path || !path.startsWith("/")) return false;
  const resolved = router.resolve(path);
  return resolved.matched && resolved.matched.length > 0;
};
  const isRouteValid = path => {
    if (!path || !path.startsWith("/")) return false;
    const resolved = router.resolve(path);
    return resolved.matched && resolved.matched.length > 0;
  };

const withValidFlag = (list) =>
  list.map((item) => ({
    ...item,
    invalid: !isRouteValid(item.path),
  }));
  const withValidFlag = list =>
    list.map(item => ({
      ...item,
      invalid: !isRouteValid(item.path),
    }));

const pageOptions = router
  .getRoutes()
  .filter((route) => {
    const hasTitle = Boolean(route.meta?.title);
    const validPath = route.path && route.path.startsWith("/") && !route.path.includes(":");
    const isVisibleMenu = !route.meta?.hidden && route.path !== "/index";
    const notSpecial =
      !route.path.includes("redirect") &&
      route.path !== "/login" &&
      route.path !== "/register" &&
      route.path !== "/401" &&
      !route.path.includes(":pathMatch");
    return hasTitle && validPath && isVisibleMenu && notSpecial;
  })
  .map((route) => ({
    title: route.meta.title,
    path: route.path,
  }))
  .sort((a, b) => a.path.localeCompare(b.path));
  const pageOptions = router
    .getRoutes()
    .filter(route => {
      const hasTitle = Boolean(route.meta?.title);
      const validPath =
        route.path && route.path.startsWith("/") && !route.path.includes(":");
      const isVisibleMenu = !route.meta?.hidden && route.path !== "/index";
      const notSpecial =
        !route.path.includes("redirect") &&
        route.path !== "/login" &&
        route.path !== "/register" &&
        route.path !== "/401" &&
        !route.path.includes(":pathMatch");
      return hasTitle && validPath && isVisibleMenu && notSpecial;
    })
    .map(route => ({
      title: route.meta.title,
      path: route.path,
    }))
    .sort((a, b) => a.path.localeCompare(b.path));

const normalizePath = (path) => String(path || "").replace(/\/+/g, "/");
const joinPath = (parentPath, childPath) => {
  if (!childPath) return normalizePath(parentPath || "/");
  if (String(childPath).startsWith("/")) return normalizePath(childPath);
  return normalizePath(`${parentPath || ""}/${childPath}`);
};
  const normalizePath = path => String(path || "").replace(/\/+/g, "/");
  const joinPath = (parentPath, childPath) => {
    if (!childPath) return normalizePath(parentPath || "/");
    if (String(childPath).startsWith("/")) return normalizePath(childPath);
    return normalizePath(`${parentPath || ""}/${childPath}`);
  };

const buildMenuTreeOptions = (routes = [], parentPath = "") => {
  const result = [];
  routes.forEach((route) => {
    if (!route || route.hidden) return;
    const fullPath = joinPath(parentPath, route.path);
    const children = buildMenuTreeOptions(route.children || [], fullPath);
    const title = route.meta?.title;
    if (!title && children.length > 0) {
      result.push(...children);
  const buildMenuTreeOptions = (routes = [], parentPath = "") => {
    const result = [];
    routes.forEach(route => {
      if (!route || route.hidden) return;
      const fullPath = joinPath(parentPath, route.path);
      const children = buildMenuTreeOptions(route.children || [], fullPath);
      const title = route.meta?.title;
      if (!title && children.length > 0) {
        result.push(...children);
        return;
      }
      if (!title) return;
      result.push({
        label: title,
        value: fullPath,
        disabled: children.length > 0,
        children,
      });
    });
    return result;
  };

  const menuTreeOptions = computed(() =>
    buildMenuTreeOptions(permissionStore.sidebarRouters || [])
  );
  const selectableMenuMap = computed(() => {
    const map = new Map();
    const walk = (list = []) => {
      list.forEach(item => {
        if (!item.disabled) map.set(item.value, item.label);
        if (item.children?.length) walk(item.children);
      });
    };
    walk(menuTreeOptions.value);
    return map;
  });

  const keywordMap = {
    ä¸»ç”Ÿäº§è®¡åˆ’: ["生产计划", "productionPlan"],
    ç”Ÿäº§è®¢å•: ["生产订单", "productionOrder"],
    ç”Ÿäº§æŠ¥å·¥: ["报工", "productionReporting"],
    è¿‡ç¨‹æ£€: ["过程检", "processInspection"],
    ç”Ÿäº§èƒ½è€—: ["生产能耗", "productionEnergyConsumption"],
    ç”Ÿäº§æˆæœ¬: ["生产成本", "productionCostAccounting"],
    æ ‡å‡†vs实际: ["标准", "实际", "stdVsActCostAnalysis"],
    å†³ç­–分析: ["决策", "看板", "dataDashboard"],
  };

  const findRouteByKeywords = (keywords = []) => {
    const lowerKeywords = keywords.map(k => String(k).toLowerCase());
    return pageOptions.find(item => {
      const title = String(item.title || "").toLowerCase();
      const path = String(item.path || "").toLowerCase();
      return lowerKeywords.some(k => title.includes(k) || path.includes(k));
    });
  };

  const getPathByKeywords = (keywords = []) =>
    findRouteByKeywords(keywords)?.path || "";

  const getRecommendedShortcuts = () => {
    const list = defaultShortcuts
      .map(item => {
        const matched = findRouteByKeywords(
          keywordMap[item.label] || [item.label]
        );
        return matched ? { label: item.label, path: matched.path } : null;
      })
      .filter(Boolean);
    return list.length > 0 ? list : defaultShortcuts;
  };

  const tryRepairSavedShortcut = item => {
    const matched = findRouteByKeywords(keywordMap[item.label] || [item.label]);
    if (matched) return { label: item.label, path: matched.path };
    return item;
  };

  const getSavedShortcuts = () => {
    const recommended = getRecommendedShortcuts();
    try {
      const saved = localStorage.getItem(SHORTCUT_STORAGE_KEY);
      if (!saved) return recommended;
      const parsed = JSON.parse(saved);
      if (!Array.isArray(parsed) || parsed.length === 0) return recommended;
      return parsed.map(item => tryRepairSavedShortcut(item));
    } catch (error) {
      return recommended;
    }
  };

  const shortcuts = reactive(withValidFlag(getSavedShortcuts().slice(0, 6)));
  const shortcutDialogVisible = ref(false);
  const configDialogVisible = ref(false);
  const selectedPagePath = ref("");
  const lastUpdatedAt = ref("");
  const pendingFilter = ref("all");
  const chartRangePlan = ref(3);
  const chartRangeQuality = ref(2);

  const routePathMap = {
    plan: getPathByKeywords(["生产计划", "productionPlan"]),
    order: getPathByKeywords(["生产订单", "productionOrder"]),
    processInspection: getPathByKeywords(["过程检", "processInspection"]),
    meter: getPathByKeywords(["抄表", "meterCollection", "能耗"]),
    dispatch: getPathByKeywords(["生产调度", "productionDispatching"]),
  };

  const persistShortcuts = () => {
    localStorage.setItem(
      SHORTCUT_STORAGE_KEY,
      JSON.stringify(
        shortcuts.slice(0, 6).map(({ label, path }) => ({ label, path }))
      )
    );
  };

  const todos = reactive([]);

  const businessFocus = reactive([
    { name: "生产订单总数", value: "-" },
    { name: "已完成订单数", value: "-" },
    { name: "未完成订单数", value: "-" },
    { name: "部分完成订单数", value: "-" },
    { name: "质检总数", value: "-" },
    { name: "过程检总数", value: "-" },
  ]);

  const pendingTasks = reactive([]);
  const warningList = reactive([]);
  const SECTION_CONFIG_KEY = "home-sections-v1";
  const sectionConfigOptions = [
    { key: "trendCards", label: "最近7天趋势卡" },
    { key: "planTrend", label: "计划与生产趋势图" },
    { key: "qualityChart", label: "质检异常分布图" },
    { key: "costChart", label: "能耗与成本结构图" },
    { key: "warningCenter", label: "异常预警中心" },
    { key: "planTable", label: "生产计划执行明细表" },
  ];
  const enabledSectionKeys = ref(sectionConfigOptions.map(i => i.key));

  const chartStyle = { width: "100%", height: "100%" };
  const grid = { left: "3%", right: "4%", bottom: "3%", containLabel: true };
  const lineTooltip = { trigger: "axis" };
  const barTooltip = { trigger: "axis", axisPointer: { type: "shadow" } };
  const pieTooltip = { trigger: "item" };

  const valueYAxis = [{ type: "value" }];
  const planXAxis = [{ type: "category", data: [] }];
  const qualityXAxis = [{ type: "category", data: [] }];

  const planLegend = { show: true, data: ["计划量", "下发量", "完成量"] };
  const costLegend = {
    show: true,
    orient: "vertical",
    right: 10,
    top: "center",
    data: ["能耗成本", "生产成本", "质量损失成本", "其他成本"],
  };

  const planSeries = reactive([
    { name: "计划量", type: "line", smooth: true, data: [] },
    { name: "下发量", type: "line", smooth: true, data: [] },
    { name: "完成量", type: "line", smooth: true, data: [] },
  ]);

  const qualitySeries = reactive([
    {
      name: "异常数",
      type: "bar",
      barWidth: 26,
      itemStyle: { color: "#e67e22", borderRadius: [6, 6, 0, 0] },
      data: [],
    },
  ]);

  const costSeries = reactive([
    {
      type: "pie",
      radius: ["45%", "68%"],
      center: ["35%", "50%"],
      label: { formatter: "{b}: {d}%" },
      data: [],
    },
  ]);

  const planTable = reactive([]);
  const recentTrendCards = reactive([
    {
      key: "planIssued",
      label: "计划下发量",
      unit: "单",
      values: [0, 0, 0, 0, 0, 0, 0],
      latest: 0,
      change: 0,
    },
    {
      key: "qualityRaw",
      label: "来料检数量",
      unit: "条",
      values: [0, 0, 0, 0, 0, 0, 0],
      latest: 0,
      change: 0,
    },
    {
      key: "qualityProcess",
      label: "过程检数量",
      unit: "条",
      values: [0, 0, 0, 0, 0, 0, 0],
      latest: 0,
      change: 0,
    },
    {
      key: "qualityFactory",
      label: "成品检数量",
      unit: "条",
      values: [0, 0, 0, 0, 0, 0, 0],
      latest: 0,
      change: 0,
    },
  ]);

  const toNumber = value => {
    const num = Number(value);
    return Number.isFinite(num) ? num : 0;
  };

  const pickFirstNumber = (obj, keys = []) => {
    for (const key of keys) {
      if (obj && obj[key] !== undefined && obj[key] !== null)
        return toNumber(obj[key]);
    }
    return 0;
  };

  const updateArray = (target, list) => {
    target.splice(0, target.length, ...list);
  };

  const toFixedOne = num => Number(num || 0).toFixed(1);

  const normalizeSeven = (list = []) => {
    const nums = list.map(i => toNumber(i));
    if (nums.length >= 7) return nums.slice(-7);
    return [...Array(7 - nums.length).fill(0), ...nums];
  };

  const calcTrend = (list = []) => {
    if (!Array.isArray(list) || list.length === 0)
      return { latest: 0, change: 0 };
    const first = toNumber(list[0]);
    const latest = toNumber(list[list.length - 1]);
    if (first === 0) return { latest, change: latest > 0 ? 100 : 0 };
    return { latest, change: ((latest - first) / first) * 100 };
  };

  const setTrendCard = (key, values) => {
    const target = recentTrendCards.find(i => i.key === key);
    if (!target) return;
    const series = normalizeSeven(values);
    const { latest, change } = calcTrend(series);
    target.values = series;
    target.latest = latest;
    target.change = Number(toFixedOne(change));
  };

  const trendClass = change => (change > 0 ? "up" : change < 0 ? "down" : "flat");

  const calcBarHeight = (value, list) => {
    const max = Math.max(...list, 1);
    return Math.max(18, Math.round((toNumber(value) / max) * 100));
  };

  const filteredPendingTasks = computed(() => {
    if (pendingFilter.value === "high")
      return pendingTasks.filter(i => i.level === "高");
    if (pendingFilter.value === "mine") {
      const currentUserName = String(userStore?.name || "").toLowerCase();
      const currentUserId = String(userStore?.userId || "");
      return pendingTasks.filter(i => {
        const ownerName = String(i.ownerName || "").toLowerCase();
        const ownerId = String(i.ownerId || "");
        return (
          (currentUserName && ownerName && ownerName.includes(currentUserName)) ||
          (currentUserId && ownerId === currentUserId)
        );
      });
    }
    return pendingTasks;
  });

  const isSectionVisible = key => enabledSectionKeys.value.includes(key);

  const goTo = path => {
    if (!isRouteValid(path)) {
      ElMessage.warning("当前菜单未配置该页面或无访问权限");
      return;
    }
    if (!title) return;
    result.push({
      label: title,
      value: fullPath,
      disabled: children.length > 0,
      children,
    });
  });
  return result;
};

const menuTreeOptions = computed(() => buildMenuTreeOptions(permissionStore.sidebarRouters || []));
const selectableMenuMap = computed(() => {
  const map = new Map();
  const walk = (list = []) => {
    list.forEach((item) => {
      if (!item.disabled) map.set(item.value, item.label);
      if (item.children?.length) walk(item.children);
    });
    router.push(path);
  };
  walk(menuTreeOptions.value);
  return map;
});

const keywordMap = {
  "主生产计划": ["生产计划", "productionPlan"],
  "生产订单": ["生产订单", "productionOrder"],
  "生产报工": ["报工", "productionReporting"],
  "过程检": ["过程检", "processInspection"],
  "生产能耗": ["生产能耗", "productionEnergyConsumption"],
  "生产成本": ["生产成本", "productionCostAccounting"],
  "标准vs实际": ["标准", "实际", "stdVsActCostAnalysis"],
  "决策分析": ["决策", "看板", "dataDashboard"],
};

const findRouteByKeywords = (keywords = []) => {
  const lowerKeywords = keywords.map((k) => String(k).toLowerCase());
  return pageOptions.find((item) => {
    const title = String(item.title || "").toLowerCase();
    const path = String(item.path || "").toLowerCase();
    return lowerKeywords.some((k) => title.includes(k) || path.includes(k));
  });
};

const getPathByKeywords = (keywords = []) => findRouteByKeywords(keywords)?.path || "";

const getRecommendedShortcuts = () => {
  const list = defaultShortcuts
    .map((item) => {
      const matched = findRouteByKeywords(keywordMap[item.label] || [item.label]);
      return matched ? { label: item.label, path: matched.path } : null;
    })
    .filter(Boolean);
  return list.length > 0 ? list : defaultShortcuts;
};

const tryRepairSavedShortcut = (item) => {
  const matched = findRouteByKeywords(keywordMap[item.label] || [item.label]);
  if (matched) return { label: item.label, path: matched.path };
  return item;
};

const getSavedShortcuts = () => {
  const recommended = getRecommendedShortcuts();
  try {
    const saved = localStorage.getItem(SHORTCUT_STORAGE_KEY);
    if (!saved) return recommended;
    const parsed = JSON.parse(saved);
    if (!Array.isArray(parsed) || parsed.length === 0) return recommended;
    return parsed.map((item) => tryRepairSavedShortcut(item));
  } catch (error) {
    return recommended;
  }
};

const shortcuts = reactive(withValidFlag(getSavedShortcuts().slice(0, 6)));
const shortcutDialogVisible = ref(false);
const configDialogVisible = ref(false);
const selectedPagePath = ref("");
const lastUpdatedAt = ref("");
const pendingFilter = ref("all");
const chartRangePlan = ref(3);
const chartRangeQuality = ref(2);

const routePathMap = {
  plan: getPathByKeywords(["生产计划", "productionPlan"]),
  order: getPathByKeywords(["生产订单", "productionOrder"]),
  processInspection: getPathByKeywords(["过程检", "processInspection"]),
  meter: getPathByKeywords(["抄表", "meterCollection", "能耗"]),
  dispatch: getPathByKeywords(["生产调度", "productionDispatching"]),
};

const persistShortcuts = () => {
  localStorage.setItem(
    SHORTCUT_STORAGE_KEY,
    JSON.stringify(shortcuts.slice(0, 6).map(({ label, path }) => ({ label, path })))
  );
};

const todos = reactive([]);

const businessFocus = reactive([
  { name: "生产订单总数", value: "-" },
  { name: "已完成订单数", value: "-" },
  { name: "未完成订单数", value: "-" },
  { name: "部分完成订单数", value: "-" },
  { name: "质检总数", value: "-" },
  { name: "过程检总数", value: "-" },
]);

const pendingTasks = reactive([]);
const warningList = reactive([]);
const SECTION_CONFIG_KEY = "home-sections-v1";
const sectionConfigOptions = [
  { key: "trendCards", label: "最近7天趋势卡" },
  { key: "planTrend", label: "计划与生产趋势图" },
  { key: "qualityChart", label: "质检异常分布图" },
  { key: "costChart", label: "能耗与成本结构图" },
  { key: "warningCenter", label: "异常预警中心" },
  { key: "planTable", label: "生产计划执行明细表" },
];
const enabledSectionKeys = ref(sectionConfigOptions.map((i) => i.key));

const chartStyle = { width: "100%", height: "100%" };
const grid = { left: "3%", right: "4%", bottom: "3%", containLabel: true };
const lineTooltip = { trigger: "axis" };
const barTooltip = { trigger: "axis", axisPointer: { type: "shadow" } };
const pieTooltip = { trigger: "item" };

const valueYAxis = [{ type: "value" }];
const planXAxis = [{ type: "category", data: [] }];
const qualityXAxis = [{ type: "category", data: [] }];

const planLegend = { show: true, data: ["计划量", "下发量", "完成量"] };
const costLegend = {
  show: true,
  orient: "vertical",
  right: 10,
  top: "center",
  data: ["能耗成本", "生产成本", "质量损失成本", "其他成本"],
};

const planSeries = reactive([
  { name: "计划量", type: "line", smooth: true, data: [] },
  { name: "下发量", type: "line", smooth: true, data: [] },
  { name: "完成量", type: "line", smooth: true, data: [] },
]);

const qualitySeries = reactive([
  {
    name: "异常数",
    type: "bar",
    barWidth: 26,
    itemStyle: { color: "#e67e22", borderRadius: [6, 6, 0, 0] },
    data: [],
  },
]);

const costSeries = reactive([
  {
    type: "pie",
    radius: ["45%", "68%"],
    center: ["35%", "50%"],
    label: { formatter: "{b}: {d}%" },
    data: [],
  },
]);

const planTable = reactive([]);
const recentTrendCards = reactive([
  { key: "planIssued", label: "计划下发量", unit: "单", values: [0, 0, 0, 0, 0, 0, 0], latest: 0, change: 0 },
  { key: "qualityRaw", label: "来料检数量", unit: "条", values: [0, 0, 0, 0, 0, 0, 0], latest: 0, change: 0 },
  { key: "qualityProcess", label: "过程检数量", unit: "条", values: [0, 0, 0, 0, 0, 0, 0], latest: 0, change: 0 },
  { key: "qualityFactory", label: "成品检数量", unit: "条", values: [0, 0, 0, 0, 0, 0, 0], latest: 0, change: 0 },
]);

const toNumber = (value) => {
  const num = Number(value);
  return Number.isFinite(num) ? num : 0;
};

const pickFirstNumber = (obj, keys = []) => {
  for (const key of keys) {
    if (obj && obj[key] !== undefined && obj[key] !== null) return toNumber(obj[key]);
  }
  return 0;
};

const updateArray = (target, list) => {
  target.splice(0, target.length, ...list);
};

const toFixedOne = (num) => Number(num || 0).toFixed(1);

const normalizeSeven = (list = []) => {
  const nums = list.map((i) => toNumber(i));
  if (nums.length >= 7) return nums.slice(-7);
  return [...Array(7 - nums.length).fill(0), ...nums];
};

const calcTrend = (list = []) => {
  if (!Array.isArray(list) || list.length === 0) return { latest: 0, change: 0 };
  const first = toNumber(list[0]);
  const latest = toNumber(list[list.length - 1]);
  if (first === 0) return { latest, change: latest > 0 ? 100 : 0 };
  return { latest, change: ((latest - first) / first) * 100 };
};

const setTrendCard = (key, values) => {
  const target = recentTrendCards.find((i) => i.key === key);
  if (!target) return;
  const series = normalizeSeven(values);
  const { latest, change } = calcTrend(series);
  target.values = series;
  target.latest = latest;
  target.change = Number(toFixedOne(change));
};

const trendClass = (change) => (change > 0 ? "up" : change < 0 ? "down" : "flat");

const calcBarHeight = (value, list) => {
  const max = Math.max(...list, 1);
  return Math.max(18, Math.round((toNumber(value) / max) * 100));
};

const filteredPendingTasks = computed(() => {
  if (pendingFilter.value === "high") return pendingTasks.filter((i) => i.level === "高");
  if (pendingFilter.value === "mine") {
    const currentUserName = String(userStore?.name || "").toLowerCase();
    const currentUserId = String(userStore?.userId || "");
    return pendingTasks.filter((i) => {
      const ownerName = String(i.ownerName || "").toLowerCase();
      const ownerId = String(i.ownerId || "");
      return (currentUserName && ownerName && ownerName.includes(currentUserName)) || (currentUserId && ownerId === currentUserId);
    });
  }
  return pendingTasks;
});

const isSectionVisible = (key) => enabledSectionKeys.value.includes(key);

const goTo = (path) => {
  if (!isRouteValid(path)) {
    ElMessage.warning("当前菜单未配置该页面或无访问权限");
    return;
  }
  router.push(path);
};

const handleTrendCardClick = (card) => {
  const mapping = {
    planIssued: routePathMap.plan || routePathMap.order,
    qualityRaw: routePathMap.processInspection,
    qualityProcess: routePathMap.processInspection,
    qualityFactory: routePathMap.processInspection,
  };
  const target = mapping[card.key];
  if (!target) {
    ElMessage.warning("未配置可跳转页面");
    return;
  }
  const query =
    card.key === "planIssued"
      ? { dateType: String(chartRangePlan.value), source: "homeTrend" }
      : { dateType: String(chartRangeQuality.value), source: "homeTrend" };
  router.push({ path: target, query });
};

const openShortcutDialog = () => {
  shortcutDialogVisible.value = true;
};

const addShortcutBySelect = () => {
  if (shortcuts.length >= 6) {
    ElMessage.warning("快捷入口最多只能添加6个");
    return;
  }
  if (!selectedPagePath.value) {
    ElMessage.warning("请先选择页面");
    return;
  }
  if (shortcuts.some((item) => item.path === selectedPagePath.value)) {
    ElMessage.warning("该快捷入口已存在");
    return;
  }
  const label = selectableMenuMap.value.get(selectedPagePath.value);
  if (!label) {
    ElMessage.warning("请选择可添加的页面，目录节点不可选");
    return;
  }
  shortcuts.push({
    label,
    path: selectedPagePath.value,
    invalid: !isRouteValid(selectedPagePath.value),
  });
  persistShortcuts();
  selectedPagePath.value = "";
};

const removeShortcut = (index) => {
  shortcuts.splice(index, 1);
  persistShortcuts();
  ElMessage.success("已删除快捷入口");
};

const loadHomeTodos = async () => {
  try {
    const res = await homeTodos();
    const list = Array.isArray(res?.data) ? res.data : [];
    const mapped = list.slice(0, 4).map((item, idx) => {
      const text = item?.approveReason || item?.approveTypeName || `待处理事项 ${idx + 1}`;
      const levelType = idx === 0 ? "danger" : idx <= 2 ? "warning" : "success";
      const level = idx === 0 ? "高" : idx <= 2 ? "中" : "低";
      return { level, title: text, type: levelType };
    });
    updateArray(todos, mapped);
    const pendingMapped = list.slice(0, 4).map((item, idx) => {
      const title = item?.approveReason || item?.approveTypeName || `待处理事项 ${idx + 1}`;
      const path = inferTodoPath(item);
      return {
        id: item?.id || `${idx}-${title}`,
        title,
        level: idx === 0 ? "高" : idx <= 2 ? "中" : "低",
        type: idx === 0 ? "danger" : idx <= 2 ? "warning" : "success",
        path,
        ownerId: item?.approveUserId || item?.userId || "",
        ownerName: item?.approveUserName || item?.userName || "",
      };
    });
    updateArray(pendingTasks, pendingMapped);
  } catch (error) {
    console.error("homeTodos接口获取失败:", error);
  }
};

const loadOrderAndProgress = async () => {
  try {
    const [orderRes, progressRes] = await Promise.allSettled([orderCount(), getProgressStatistics()]);

    if (orderRes.status === "fulfilled") {
      const items = Array.isArray(orderRes.value?.data) ? orderRes.value.data : [];
      const byName = Object.fromEntries(
        items.map((i) => [String(i?.name || "").replace(/\s/g, ""), i?.value])
      );
      businessFocus[0].value = `${pickFirstNumber(byName, ["生产订单数", "生产订单总数", "总订单数"]) || 0} å•`;
      businessFocus[1].value = `${pickFirstNumber(byName, ["已完成订单数"]) || 0} å•`;
      businessFocus[2].value = `${pickFirstNumber(byName, ["待生产订单数", "未完成订单数"]) || 0} å•`;
      businessFocus[3].value = `${pickFirstNumber(byName, ["部分完成订单数"]) || 0} å•`;
  const handleTrendCardClick = card => {
    const mapping = {
      planIssued: routePathMap.plan || routePathMap.order,
      qualityRaw: routePathMap.processInspection,
      qualityProcess: routePathMap.processInspection,
      qualityFactory: routePathMap.processInspection,
    };
    const target = mapping[card.key];
    if (!target) {
      ElMessage.warning("未配置可跳转页面");
      return;
    }
    const query =
      card.key === "planIssued"
        ? { dateType: String(chartRangePlan.value), source: "homeTrend" }
        : { dateType: String(chartRangeQuality.value), source: "homeTrend" };
    router.push({ path: target, query });
  };

    if (progressRes.status === "fulfilled") {
      const p = progressRes.value?.data || {};
      const detail = Array.isArray(p.completedOrderDetails) ? p.completedOrderDetails : [];
      const rows = detail.slice(0, 6).map((item, index) => {
        const qty = pickFirstNumber(item, ["quantity", "planQuantity"]);
        const done = pickFirstNumber(item, ["completeQuantity", "completedQuantity"]);
  const openShortcutDialog = () => {
    shortcutDialogVisible.value = true;
  };

  const addShortcutBySelect = () => {
    if (shortcuts.length >= 6) {
      ElMessage.warning("快捷入口最多只能添加6个");
      return;
    }
    if (!selectedPagePath.value) {
      ElMessage.warning("请先选择页面");
      return;
    }
    if (shortcuts.some(item => item.path === selectedPagePath.value)) {
      ElMessage.warning("该快捷入口已存在");
      return;
    }
    const label = selectableMenuMap.value.get(selectedPagePath.value);
    if (!label) {
      ElMessage.warning("请选择可添加的页面，目录节点不可选");
      return;
    }
    shortcuts.push({
      label,
      path: selectedPagePath.value,
      invalid: !isRouteValid(selectedPagePath.value),
    });
    persistShortcuts();
    selectedPagePath.value = "";
  };

  const removeShortcut = index => {
    shortcuts.splice(index, 1);
    persistShortcuts();
    ElMessage.success("已删除快捷入口");
  };

  const loadHomeTodos = async () => {
    try {
      const res = await homeTodos();
      const list = Array.isArray(res?.data) ? res.data : [];
      const mapped = list.slice(0, 4).map((item, idx) => {
        const text =
          item?.approveReason || item?.approveTypeName || `待处理事项 ${idx + 1}`;
        const levelType = idx === 0 ? "danger" : idx <= 2 ? "warning" : "success";
        const level = idx === 0 ? "高" : idx <= 2 ? "中" : "低";
        return { level, title: text, type: levelType };
      });
      updateArray(todos, mapped);
      const pendingMapped = list.slice(0, 4).map((item, idx) => {
        const title =
          item?.approveReason || item?.approveTypeName || `待处理事项 ${idx + 1}`;
        const path = inferTodoPath(item);
        return {
          planNo: item.npsNo || item.productionPlanNo || `NO-${index + 1}`,
          product: item.productCategory || item.productName || "-",
          qty,
          issued: done,
          status: qty > 0 && done >= qty ? "已完成" : done > 0 ? "执行中" : "待下发",
          id: item?.id || `${idx}-${title}`,
          title,
          level: idx === 0 ? "高" : idx <= 2 ? "中" : "低",
          type: idx === 0 ? "danger" : idx <= 2 ? "warning" : "success",
          path,
          ownerId: item?.approveUserId || item?.userId || "",
          ownerName: item?.approveUserName || item?.userName || "",
        };
      });
      updateArray(planTable, rows);
      setTrendCard(
        "planIssued",
        detail.slice(-7).map((i) => pickFirstNumber(i, ["completeQuantity", "completedQuantity", "issueNum"]))
      );

      updateArray(pendingTasks, pendingMapped);
    } catch (error) {
      console.error("homeTodos接口获取失败:", error);
    }
  } catch (error) {
    console.error("orderCount/getProgressStatistics接口获取失败:", error);
  }
};
  };

const inferTodoPath = (todo) => {
  const text = `${todo?.approveTypeName || ""}${todo?.approveReason || ""}`.toLowerCase();
  if (text.includes("计划")) return routePathMap.plan || routePathMap.order;
  if (text.includes("订单")) return routePathMap.order || routePathMap.plan;
  if (text.includes("过程检") || text.includes("质检")) return routePathMap.processInspection || routePathMap.plan;
  if (text.includes("能耗") || text.includes("抄表")) return routePathMap.meter || routePathMap.plan;
  return routePathMap.plan || routePathMap.order || "";
};
  const loadOrderAndProgress = async () => {
    try {
      const [orderRes, progressRes] = await Promise.allSettled([
        orderCount(),
        getProgressStatistics(),
      ]);

const loadPlanTrend = async () => {
  try {
    const res = await processDataProductionStatistics({ type: chartRangePlan.value });
    const list = Array.isArray(res?.data) ? res.data : [];
    planXAxis[0].data = list.map((i, index) => i.processName || `工序${index + 1}`);
    planSeries[0].data = list.map((i) => pickFirstNumber(i, ["totalInput", "input", "planNum"]));
    planSeries[1].data = list.map((i) => pickFirstNumber(i, ["totalOutput", "output", "issueNum"]));
    planSeries[2].data = list.map((i) => pickFirstNumber(i, ["totalScrap", "scrap", "completeNum"]));
  } catch (error) {
    console.error("processDataProductionStatistics接口获取失败:", error);
  }
};
      if (orderRes.status === "fulfilled") {
        const items = Array.isArray(orderRes.value?.data)
          ? orderRes.value.data
          : [];
        const byName = Object.fromEntries(
          items.map(i => [String(i?.name || "").replace(/\s/g, ""), i?.value])
        );
        businessFocus[0].value = `${
          pickFirstNumber(byName, ["生产订单数", "生产订单总数", "总订单数"]) || 0
        } å•`;
        businessFocus[1].value = `${
          pickFirstNumber(byName, ["已完成订单数"]) || 0
        } å•`;
        businessFocus[2].value = `${
          pickFirstNumber(byName, ["待生产订单数", "未完成订单数"]) || 0
        } å•`;
        businessFocus[3].value = `${
          pickFirstNumber(byName, ["部分完成订单数"]) || 0
        } å•`;
      }

const loadQualityData = async () => {
  try {
    const res = await qualityInspectionStatistics({ type: chartRangeQuality.value });
    const data = res?.data || {};
    const items = Array.isArray(data.item) ? data.item : [];
    if (items.length > 0) {
      qualityXAxis[0].data = items.map((i) => i.date || i.name || "-");
      qualitySeries[0].data = items.map((i) =>
        pickFirstNumber(i, ["supplierNum", "processNum", "factoryNum", "totalNum"])
      );
      setTrendCard("qualityRaw", items.map((i) => pickFirstNumber(i, ["supplierNum"])));
      setTrendCard("qualityProcess", items.map((i) => pickFirstNumber(i, ["processNum"])));
      setTrendCard("qualityFactory", items.map((i) => pickFirstNumber(i, ["factoryNum"])));
    } else {
      qualityXAxis[0].data = ["来料检", "过程检", "成品检"];
      qualitySeries[0].data = [
        pickFirstNumber(data, ["supplierNum"]),
        pickFirstNumber(data, ["processNum"]),
        pickFirstNumber(data, ["factoryNum"]),
      ];
      setTrendCard("qualityRaw", [pickFirstNumber(data, ["supplierNum"])]);
      setTrendCard("qualityProcess", [pickFirstNumber(data, ["processNum"])]);
      setTrendCard("qualityFactory", [pickFirstNumber(data, ["factoryNum"])]);
      if (progressRes.status === "fulfilled") {
        const p = progressRes.value?.data || {};
        const detail = Array.isArray(p.completedOrderDetails)
          ? p.completedOrderDetails
          : [];
        const rows = detail.slice(0, 6).map((item, index) => {
          const qty = pickFirstNumber(item, ["quantity", "planQuantity"]);
          const done = pickFirstNumber(item, [
            "completeQuantity",
            "completedQuantity",
          ]);
          return {
            planNo: item.npsNo || item.productionPlanNo || `NO-${index + 1}`,
            product: item.productCategory || item.productName || "-",
            qty,
            issued: done,
            status:
              qty > 0 && done >= qty ? "已完成" : done > 0 ? "执行中" : "待下发",
          };
        });
        updateArray(planTable, rows);
        setTrendCard(
          "planIssued",
          detail
            .slice(-7)
            .map(i =>
              pickFirstNumber(i, [
                "completeQuantity",
                "completedQuantity",
                "issueNum",
              ])
            )
        );
      }
    } catch (error) {
      console.error("orderCount/getProgressStatistics接口获取失败:", error);
    }
    businessFocus[4].value = `${pickFirstNumber(data, ["supplierNum", "totalNum"])} æ¡`;
    businessFocus[5].value = `${pickFirstNumber(data, ["processNum"])} æ¡`;
  } catch (error) {
    console.error("qualityInspectionStatistics接口获取失败:", error);
  }
};
  };

const loadWarningCenter = async () => {
  try {
    const res = await nonComplianceWarning();
    const list = Array.isArray(res?.data) ? res.data : [];
    const mapped = list.slice(0, 6).map((item, idx) => {
      const levelNum = toNumber(item.level ?? item.warningLevel ?? 2);
      const levelType = levelNum >= 3 ? "danger" : levelNum === 2 ? "warning" : "info";
      const levelText = levelNum >= 3 ? "高" : levelNum === 2 ? "中" : "低";
      const title = item.name || item.title || item.paramName || `异常预警 ${idx + 1}`;
      const text = `${title}${item.processName || ""}${item.orderNo || ""}`.toLowerCase();
      const path = text.includes("质检")
        ? routePathMap.processInspection
        : text.includes("订单")
  const inferTodoPath = todo => {
    const text = `${todo?.approveTypeName || ""}${
      todo?.approveReason || ""
    }`.toLowerCase();
    if (text.includes("计划")) return routePathMap.plan || routePathMap.order;
    if (text.includes("订单")) return routePathMap.order || routePathMap.plan;
    if (text.includes("过程检") || text.includes("质检"))
      return routePathMap.processInspection || routePathMap.plan;
    if (text.includes("能耗") || text.includes("抄表"))
      return routePathMap.meter || routePathMap.plan;
    return routePathMap.plan || routePathMap.order || "";
  };

  const loadPlanTrend = async () => {
    try {
      const res = await processDataProductionStatistics({
        type: chartRangePlan.value,
      });
      const list = Array.isArray(res?.data) ? res.data : [];
      planXAxis[0].data = list.map(
        (i, index) => i.processName || `工序${index + 1}`
      );
      planSeries[0].data = list.map(i =>
        pickFirstNumber(i, ["totalInput", "input", "planNum"])
      );
      planSeries[1].data = list.map(i =>
        pickFirstNumber(i, ["totalOutput", "output", "issueNum"])
      );
      planSeries[2].data = list.map(i =>
        pickFirstNumber(i, ["totalScrap", "scrap", "completeNum"])
      );
    } catch (error) {
      console.error("processDataProductionStatistics接口获取失败:", error);
    }
  };

  const loadQualityData = async () => {
    try {
      const res = await qualityInspectionStatistics({
        type: chartRangeQuality.value,
      });
      const data = res?.data || {};
      const items = Array.isArray(data.item) ? data.item : [];
      if (items.length > 0) {
        qualityXAxis[0].data = items.map(i => i.date || i.name || "-");
        qualitySeries[0].data = items.map(i =>
          pickFirstNumber(i, [
            "supplierNum",
            "processNum",
            "factoryNum",
            "totalNum",
          ])
        );
        setTrendCard(
          "qualityRaw",
          items.map(i => pickFirstNumber(i, ["supplierNum"]))
        );
        setTrendCard(
          "qualityProcess",
          items.map(i => pickFirstNumber(i, ["processNum"]))
        );
        setTrendCard(
          "qualityFactory",
          items.map(i => pickFirstNumber(i, ["factoryNum"]))
        );
      } else {
        qualityXAxis[0].data = ["来料检", "过程检", "成品检"];
        qualitySeries[0].data = [
          pickFirstNumber(data, ["supplierNum"]),
          pickFirstNumber(data, ["processNum"]),
          pickFirstNumber(data, ["factoryNum"]),
        ];
        setTrendCard("qualityRaw", [pickFirstNumber(data, ["supplierNum"])]);
        setTrendCard("qualityProcess", [pickFirstNumber(data, ["processNum"])]);
        setTrendCard("qualityFactory", [pickFirstNumber(data, ["factoryNum"])]);
      }
      businessFocus[4].value = `${pickFirstNumber(data, [
        "supplierNum",
        "totalNum",
      ])} æ¡`;
      businessFocus[5].value = `${pickFirstNumber(data, ["processNum"])} æ¡`;
    } catch (error) {
      console.error("qualityInspectionStatistics接口获取失败:", error);
    }
  };

  const loadWarningCenter = async () => {
    try {
      const res = await nonComplianceWarning();
      const list = Array.isArray(res?.data) ? res.data : [];
      const mapped = list.slice(0, 6).map((item, idx) => {
        const levelNum = toNumber(item.level ?? item.warningLevel ?? 2);
        const levelType =
          levelNum >= 3 ? "danger" : levelNum === 2 ? "warning" : "info";
        const levelText = levelNum >= 3 ? "高" : levelNum === 2 ? "中" : "低";
        const title =
          item.name || item.title || item.paramName || `异常预警 ${idx + 1}`;
        const text = `${title}${item.processName || ""}${
          item.orderNo || ""
        }`.toLowerCase();
        const path = text.includes("质检")
          ? routePathMap.processInspection
          : text.includes("订单")
          ? routePathMap.order
          : routePathMap.processInspection || routePathMap.order || routePathMap.plan;
      return { id: item.id || `${idx}-${title}`, levelType, levelText, title, path };
    });
    updateArray(warningList, mapped);
  } catch (error) {
    console.error("nonComplianceWarning接口获取失败:", error);
    updateArray(warningList, []);
  }
};

const initSectionConfig = () => {
  try {
    const raw = localStorage.getItem(SECTION_CONFIG_KEY);
    if (!raw) return;
    const parsed = JSON.parse(raw);
    if (Array.isArray(parsed) && parsed.length > 0) {
      enabledSectionKeys.value = parsed.filter((k) => sectionConfigOptions.some((i) => i.key === k));
          : routePathMap.processInspection ||
            routePathMap.order ||
            routePathMap.plan;
        return {
          id: item.id || `${idx}-${title}`,
          levelType,
          levelText,
          title,
          path,
        };
      });
      updateArray(warningList, mapped);
    } catch (error) {
      console.error("nonComplianceWarning接口获取失败:", error);
      updateArray(warningList, []);
    }
  } catch (error) {
    console.error("读取首页配置失败:", error);
  }
};
  };

const saveSectionConfig = () => {
  if (enabledSectionKeys.value.length === 0) {
    ElMessage.warning("至少保留一个模块");
    return;
  }
  localStorage.setItem(SECTION_CONFIG_KEY, JSON.stringify(enabledSectionKeys.value));
  configDialogVisible.value = false;
  ElMessage.success("首页配置已保存");
};
  const initSectionConfig = () => {
    try {
      const raw = localStorage.getItem(SECTION_CONFIG_KEY);
      if (!raw) return;
      const parsed = JSON.parse(raw);
      if (Array.isArray(parsed) && parsed.length > 0) {
        enabledSectionKeys.value = parsed.filter(k =>
          sectionConfigOptions.some(i => i.key === k)
        );
      }
    } catch (error) {
      console.error("读取首页配置失败:", error);
    }
  };

const loadCostComposition = async () => {
  try {
    const res = await expenseCompositionAnalysis({ type: 1 });
    const list = Array.isArray(res?.data) ? res.data : [];
    const mapped = list.map((i) => ({
      name: i.name || "未命名",
      value: pickFirstNumber(i, ["value", "amount", "cost"]),
    }));
    costSeries[0].data = mapped;
  } catch (error) {
    console.error("expenseCompositionAnalysis接口获取失败:", error);
  }
};
  const saveSectionConfig = () => {
    if (enabledSectionKeys.value.length === 0) {
      ElMessage.warning("至少保留一个模块");
      return;
    }
    localStorage.setItem(
      SECTION_CONFIG_KEY,
      JSON.stringify(enabledSectionKeys.value)
    );
    configDialogVisible.value = false;
    ElMessage.success("首页配置已保存");
  };

const refreshDashboardData = () => {
  loadHomeTodos();
  loadOrderAndProgress();
  loadPlanTrend();
  loadQualityData();
  loadCostComposition();
  loadWarningCenter();
  lastUpdatedAt.value = new Date().toLocaleString();
};
  const loadCostComposition = async () => {
    try {
      const res = await expenseCompositionAnalysis({ type: 1 });
      const list = Array.isArray(res?.data) ? res.data : [];
      const mapped = list.map(i => ({
        name: i.name || "未命名",
        value: pickFirstNumber(i, ["value", "amount", "cost"]),
      }));
      costSeries[0].data = mapped;
    } catch (error) {
      console.error("expenseCompositionAnalysis接口获取失败:", error);
    }
  };

onMounted(() => {
  initSectionConfig();
  refreshDashboardData();
});
  const refreshDashboardData = () => {
    loadHomeTodos();
    loadOrderAndProgress();
    loadPlanTrend();
    loadQualityData();
    loadCostComposition();
    loadWarningCenter();
    lastUpdatedAt.value = new Date().toLocaleString();
  };

  onMounted(() => {
    // initSectionConfig();
    // refreshDashboardData();
  });
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background: #f5f7fb;
  padding: 20px;
}
  .home-page {
    min-height: 100vh;
    background: #f5f7fb;
    padding: 20px;
  }

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
  }

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
  .top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

.refresh-time {
  font-size: 12px;
  color: #7b8794;
}
  .refresh-time {
    font-size: 12px;
    color: #7b8794;
  }

.user-box {
  display: flex;
  align-items: center;
  gap: 12px;
}
  .user-box {
    display: flex;
    align-items: center;
    gap: 12px;
  }

.avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
  .avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
  }

.hello {
  font-size: 18px;
  font-weight: 700;
  color: #1f2d3d;
}
  .hello {
    font-size: 18px;
    font-weight: 700;
    color: #1f2d3d;
  }

.sub {
  margin-top: 4px;
  color: #6b7785;
  font-size: 13px;
}
  .sub {
    margin-top: 4px;
    color: #6b7785;
    font-size: 13px;
  }

.content-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: stretch;
}

.left-col,
.right-col {
  display: flex;
  flex-direction: column;
}

.section-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(20, 35, 90, 0.06);
}

.flex-fill-card {
  flex: 1;
}

.section-title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #243447;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: #409eff;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-grid :deep(.el-button) {
  margin-left: 0;
}

.shortcut-form-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 10px;
  margin-bottom: 12px;
}

.todo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #3b4a5b;
}

.focus-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #e8edf5;
}

.focus-row:last-child {
  border-bottom: none;
}

.focus-name {
  font-size: 13px;
  color: #516174;
}

.focus-value {
  font-weight: 700;
  color: #1f2d3d;
}

.task-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #e8edf5;
}

.task-row:last-child {
  border-bottom: none;
}

.task-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-title {
  font-size: 13px;
  color: #3d4d5f;
}

.row-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.trend-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.trend-card {
  border: 1px solid #e8edf5;
  border-radius: 10px;
  padding: 12px;
}

.trend-card.clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.trend-card.clickable:hover {
  border-color: #8eb8ff;
  background: #f6f9ff;
}

.trend-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trend-label {
  font-size: 13px;
  color: #5f6b7a;
}

.trend-rate {
  font-size: 12px;
  font-weight: 700;
}

.trend-rate.up {
  color: #67c23a;
}

.trend-rate.down {
  color: #f56c6c;
}

.trend-rate.flat {
  color: #909399;
}

.trend-value {
  margin-top: 6px;
  font-size: 20px;
  color: #1f2d3d;
  font-weight: 700;
}

.sparkline {
  margin-top: 10px;
  height: 48px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.sparkline-bar {
  flex: 1;
  min-height: 6px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #82b1ff 0%, #409eff 100%);
}

.warning-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #e8edf5;
}

.warning-row:last-child {
  border-bottom: none;
}

.warning-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.warning-title {
  font-size: 13px;
  color: #3d4d5f;
}

.config-check-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.mini-table-wrap :deep(.el-table th) {
  background: #f8fbff;
}

@media (max-width: 1100px) {
  .content-grid {
    grid-template-columns: 1fr;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    align-items: stretch;
  }

  .left-col,
  .right-col {
    display: flex;
    flex-direction: column;
  }

  .section-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(20, 35, 90, 0.06);
  }

  .flex-fill-card {
    flex: 1;
  }

  .section-title {
    position: relative;
    padding-left: 10px;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #243447;
  }

  .section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: #409eff;
  }

  .quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .quick-grid :deep(.el-button) {
    margin-left: 0;
  }

  .shortcut-form-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    gap: 10px;
    margin-bottom: 12px;
  }

  .todo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #3b4a5b;
  }

  .focus-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #e8edf5;
  }

  .focus-row:last-child {
    border-bottom: none;
  }

  .focus-name {
    font-size: 13px;
    color: #516174;
  }

  .focus-value {
    font-weight: 700;
    color: #1f2d3d;
  }

  .task-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #e8edf5;
  }

  .task-row:last-child {
    border-bottom: none;
  }

  .task-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .task-title {
    font-size: 13px;
    color: #3d4d5f;
  }

  .row-two {
    grid-template-columns: 1fr;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .trend-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

  .trend-card {
    border: 1px solid #e8edf5;
    border-radius: 10px;
    padding: 12px;
  }

  .trend-card.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .trend-card.clickable:hover {
    border-color: #8eb8ff;
    background: #f6f9ff;
  }

  .trend-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .trend-label {
    font-size: 13px;
    color: #5f6b7a;
  }

  .trend-rate {
    font-size: 12px;
    font-weight: 700;
  }

  .trend-rate.up {
    color: #67c23a;
  }

  .trend-rate.down {
    color: #f56c6c;
  }

  .trend-rate.flat {
    color: #909399;
  }

  .trend-value {
    margin-top: 6px;
    font-size: 20px;
    color: #1f2d3d;
    font-weight: 700;
  }

  .sparkline {
    margin-top: 10px;
    height: 48px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
  }

  .sparkline-bar {
    flex: 1;
    min-height: 6px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #82b1ff 0%, #409eff 100%);
  }

  .warning-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #e8edf5;
  }

  .warning-row:last-child {
    border-bottom: none;
  }

  .warning-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .warning-title {
    font-size: 13px;
    color: #3d4d5f;
  }

  .config-check-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }

  .mini-table-wrap :deep(.el-table th) {
    background: #f8fbff;
  }

  @media (max-width: 1100px) {
    .content-grid {
      grid-template-columns: 1fr;
    }

    .row-two {
      grid-template-columns: 1fr;
    }

    .trend-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
</style>

 src/views/productionPlan/productionPlan/index.vue

@@ -187,73 +187,6 @@
        </span>
      </template>
    </el-dialog>
    <!-- è¿½è¸ªè¿›åº¦å¼¹çª— -->
    <el-dialog v-model="showTrackProgressDialog"
               destroy-on-close
               :title="`追踪进度 - ${trackProgressForm.materialCode || ''}`"
               width="600px">
      <el-form :model="trackProgressForm"
               label-width="120px">
        <el-form-item label="物料编码">
          <el-input v-model="trackProgressForm.materialCode"
                    disabled />
        </el-form-item>
        <el-form-item label="当前状态">
          <el-select v-model="trackProgressForm.currentStatus"
                     placeholder="请选择状态">
            <el-option label="待处理"
                       value="pending" />
            <el-option label="进行中"
                       value="processing" />
            <el-option label="已完成"
                       value="completed" />
          </el-select>
        </el-form-item>
        <el-form-item label="完成进度">
          <el-progress :percentage="trackProgressForm.completionRate"
                       :status="trackProgressForm.completionRate === 100 ? 'success' : ''" />
        </el-form-item>
        <el-form-item label="进度详情">
          <el-table :data="trackProgressForm.progressDetails"
                    border
                    style="width: 100%">
            <el-table-column prop="step"
                             label="步骤"
                             align="center"
                             width="100" />
            <el-table-column prop="status"
                             label="状态"
                             align="center"
                             width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === 'completed' ? 'success' : scope.row.status === 'processing' ? 'warning' : 'info'">
                  {{ scope.row.status === 'completed' ? '已完成' : scope.row.status === 'processing' ? '进行中' : '待开始' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="startTime"
                             label="开始时间"
                             align="center"
                             width="180" />
            <el-table-column prop="endTime"
                             label="结束时间"
                             align="center"
                             width="180" />
          </el-table>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="trackProgressForm.remark"
                    type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showTrackProgressDialog = false">关闭</el-button>
          <el-button type="primary"
                     @click="handleUpdateProgress">更新进度</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- å¯¼å…¥å¼¹çª— -->
    <ImportDialog ref="importDialogRef"
                  v-model="importDialogVisible"
@@ -394,6 +327,7 @@
  import ImportDialog from "@/components/Dialog/ImportDialog.vue";
  import { getToken } from "@/utils/auth";
  import { useDict } from "@/utils/dict";
  import { useRouter } from "vue-router";
  import {
    productionPlanListPage,
    loadProdData,
@@ -411,6 +345,7 @@
  } from "@/api/basicData/newProduct.js";

  const { proxy } = getCurrentInstance();
  const router = useRouter();

  const tableColumn = ref([
    {
@@ -666,17 +601,6 @@
    strength: "",
  });

  // è¿½è¸ªè¿›åº¦å¼¹çª—控制
  const showTrackProgressDialog = ref(false);
  // è¿½è¸ªè¿›åº¦è¡¨å•æ•°æ®
  const trackProgressForm = reactive({
    materialCode: "",
    currentStatus: "",
    completionRate: 0,
    progressDetails: [],
    remark: "",
  });

  // å¯¼å…¥ç›¸å…³
  const importDialogRef = ref(null);
  const importDialogVisible = ref(false);
@@ -744,21 +668,13 @@

  // å¤„理追踪进度按钮点击
  const handleTrackProgress = row => {
    // è®¾ç½®è¡¨å•æ•°æ®
    trackProgressForm.materialCode = row.materialCode;
    trackProgressForm.currentStatus = row.status;

    // ç”Ÿæˆæ¨¡æ‹Ÿè¿›åº¦æ•°æ®
    trackProgressForm.progressDetails = generateProgressDetails(row.status);

    // è®¡ç®—完成率
    trackProgressForm.completionRate = calculateCompletionRate(
      trackProgressForm.progressDetails
    );
    trackProgressForm.remark = "";

    // æ‰“开弹窗
    showTrackProgressDialog.value = true;
    // è·³è½¬åˆ°è¿½è¸ªè¿›åº¦é¡µé¢
    router.push({
      path: "/productionPlan/trackProgress",
      query: {
        row: encodeURIComponent(JSON.stringify(row)),
      },
    });
  };
  const onBlur = value => {
    // é™åˆ¶å››ä½å°æ•°
@@ -842,77 +758,6 @@
        }
      }
    }
  };

  // ç”Ÿæˆæ¨¡æ‹Ÿè¿›åº¦è¯¦æƒ…数据
  const generateProgressDetails = status => {
    const details = [
      {
        step: "计划确认",
        status: "completed",
        startTime: "2026-03-01 09:00:00",
        endTime: "2026-03-01 10:00:00",
      },
      {
        step: "物料准备",
        status:
          status === "completed"
            ? "completed"
            : status === "processing"
            ? "completed"
            : "pending",
        startTime:
          status === "completed" || status === "processing"
            ? "2026-03-01 10:30:00"
            : "",
        endTime:
          status === "completed" || status === "processing"
            ? "2026-03-02 16:00:00"
            : "",
      },
      {
        step: "生产加工",
        status:
          status === "completed"
            ? "completed"
            : status === "processing"
            ? "processing"
            : "pending",
        startTime:
          status === "completed" || status === "processing"
            ? "2026-03-03 08:00:00"
            : "",
        endTime: status === "completed" ? "2026-03-08 17:00:00" : "",
      },
      {
        step: "质量检验",
        status: status === "completed" ? "completed" : "pending",
        startTime: status === "completed" ? "2026-03-09 09:00:00" : "",
        endTime: status === "completed" ? "2026-03-09 15:00:00" : "",
      },
      {
        step: "入库",
        status: status === "completed" ? "completed" : "pending",
        startTime: status === "completed" ? "2026-03-10 10:00:00" : "",
        endTime: status === "completed" ? "2026-03-10 11:00:00" : "",
      },
    ];
    return details;
  };

  // è®¡ç®—完成率
  const calculateCompletionRate = details => {
    const completedSteps = details.filter(
      step => step.status === "completed"
    ).length;
    return Math.round((completedSteps / details.length) * 100);
  };

  // å¤„理进度更新
  const handleUpdateProgress = () => {
    // è¿™é‡Œå¯ä»¥æ·»åŠ æ›´æ–°è¿›åº¦çš„逻辑
    ElMessage.success("进度更新成功");
    showTrackProgressDialog.value = false;
  };

  const data = reactive({

 src/views/productionPlan/trackProgress/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,441 @@
<template>
  <div class="app-container">
    <PageHeader content="生产计划追踪进度">
    </PageHeader>
    <el-card style="height:82vh;overflow:auto;">
      <template #header>
        <div class="card-header">
          <span>申请单编号 - {{ rowData.applyNo || '' }}</span>
        </div>
      </template>
      <!-- åŸºç¡€ä¿¡æ¯ -->
      <div class="detail-section">
        <h3 class="section-title">基础信息</h3>
        <el-descriptions :column="3"
                         border>
          <el-descriptions-item label="申请单编号">{{ rowData.applyNo || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品名称">{{ rowData.productName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品规格">{{ rowData.model || '-' }}</el-descriptions-item>
          <el-descriptions-item label="物料编码">{{ rowData.materialCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="下发数量">{{ rowData.assignedQuantity || 0 }} <span class="unit">方</span></el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType(rowData.status)">
              {{ getStatusText(rowData.status) }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="progress-container">
        <div class="progress-section">
          <h3 class="section-title">进度信息</h3>
          <div class="progress-item">
            <div class="progress-label">完成进度：</div>
            <div class="progress-content">
              <el-progress :percentage="trackProgressForm.completionRate"
                           :color="customColors"
                           :status="trackProgressForm.completionRate === 100 ? 'success' : ''" />
            </div>
          </div>
          <div class="progress-item">
            <div class="progress-label">进度详情：</div>
            <div class="progress-content">
              <el-table :data="trackProgressForm.progressDetails"
                        border
                        style="width: auto; height: 300px">
                <el-table-column prop="step"
                                 label="步骤（点击查看详情）"
                                 align="center">
                  <template #default="{ row, $index }">
                    <el-link v-if="$index!=0"
                             @click="handleClickStep(row)"
                             type="primary">{{ row.step }}</el-link>
                    <span v-else
                          @click="handleClickStep(row)">{{ row.step }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="status"
                                 label="状态"
                                 align="center">
                  <template #default="scope">
                    <el-tag :type="scope.row.status === 'completed' ? 'success' : scope.row.status === 'processing' ? 'warning' : 'info'">
                      {{ scope.row.status === 'completed' ? '已完成' : scope.row.status === 'processing' ? '进行中' : '待开始' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="quantity"
                                 label="数量"
                                 align="center" />
                <el-table-column prop="startTime"
                                 label="时间"
                                 align="center" />
              </el-table>
            </div>
          </div>
        </div>
        <div class="progress-section">
          <h3 class="section-title">订单信息</h3>
          <div v-for="item in rowData.orderList"
               :key="item.orderNo"
               class="order-item">
            <el-descriptions :column="3"
                             border>
              <el-descriptions-item label="订单编号">{{ item.orderNo || '-' }}</el-descriptions-item>
              <el-descriptions-item label="订单状态">
                <el-tag :type="getStatusType(item.status)">{{ getStatusText(item.status) }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="开始日期">{{ item.startTime || '-' }}</el-descriptions-item>
              <el-descriptions-item label="需求数量">{{ item.quantity || 0 }} <span class="unit">方</span></el-descriptions-item>
              <el-descriptions-item label="完成数量">{{ item.completeQuantity || 0 }} <span class="unit">方</span></el-descriptions-item>
              <el-descriptions-item label="完成进度">
                <el-progress :percentage="item.completionRate"
                             :color="customColors(item.completionRate)"
                             :status="item.completionRate === 100 ? 'success' : ''"
                             style="width: 120px;" />
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from "vue";
  import { ElMessage } from "element-plus";
  import { useRouter, useRoute } from "vue-router";

  const router = useRouter();
  const route = useRoute();

  // è·¯ç”±å‚数数据
  const rowData = reactive({});

  // è¿½è¸ªè¿›åº¦è¡¨å•æ•°æ®
  const trackProgressForm = reactive({
    materialCode: "",
    currentStatus: "",
    completionRate: 0,
    progressDetails: [],
    remark: "",
  });

  // èŽ·å–状态类型
  const getStatusType = status => {
    const typeMap = {
      0: "warning",
      1: "primary",
      2: "info",
    };
    return typeMap[status] || "info";
  };

  // èŽ·å–状态文本
  const getStatusText = status => {
    const statusMap = {
      0: "待下发",
      1: "部分下发",
      2: "已下发",
    };
    return statusMap[status] || "";
  };
  const customColors = percentage => {
    if (Number(percentage) < 10) {
      return "#909399";
    }
    if (Number(percentage) < 70) {
      return "#e6a23c";
    }
    return "#67c23a";
  };

  // ç”Ÿæˆæ¨¡æ‹Ÿè¿›åº¦è¯¦æƒ…数据
  const generateProgressDetails = status => {
    const details = [
      {
        step: "计划确认",
        status: "completed",
        quantity: 233,
        startTime: "2026-03-01 09:00:00",
        endTime: "2026-03-01 10:00:00",
      },
      {
        step: "第一次报工",
        status: "completed",
        quantity: 233,
        startTime: "2026-03-01 09:00:00",
        endTime: "2026-03-01 10:00:00",
      },
      {
        step: "第二次报工",
        status: "completed",
        quantity: 233,
        startTime: "2026-03-01 09:00:00",
        endTime: "2026-03-01 10:00:00",
      },
      {
        step: "第三次报工",
        status: "completed",
        quantity: 233,
        startTime: "2026-03-01 09:00:00",
        endTime: "2026-03-01 10:00:00",
      },
      {
        step: "第四次报工",
        status: "completed",
        quantity: 233,
        startTime: "2026-03-01 09:00:00",
        endTime: "2026-03-01 10:00:00",
      },
      {
        step: "第五次报工",
        status: "completed",
        quantity: 233,
        startTime: "2026-03-01 09:00:00",
        endTime: "2026-03-01 10:00:00",
      },
      {
        step: "第六次报工",
        status: "completed",
        quantity: 233,
        startTime: "2026-03-01 09:00:00",
        endTime: "2026-03-01 10:00:00",
      },
      {
        step: "第七次报工",
        status: "completed",
        quantity: 233,
        startTime: "2026-03-01 09:00:00",
        endTime: "2026-03-01 10:00:00",
      },
    ];
    return details;
  };

  // è®¡ç®—完成率
  const calculateCompletionRate = details => {
    const completedSteps = details.filter(
      step => step.status === "completed"
    ).length;
    return Math.round((completedSteps / details.length) * 100);
  };

  // å¤„理进度更新
  const handleUpdateProgress = () => {
    // è¿™é‡Œå¯ä»¥æ·»åŠ æ›´æ–°è¿›åº¦çš„逻辑
    ElMessage.success("进度更新成功");
  };

  // å¤„理返回
  const handleBack = () => {
    router.push("/productionPlan/productionPlan");
  };

  // ç”Ÿæˆæ¨¡æ‹Ÿè®¢å•æ•°æ®
  const generateOrderList = () => {
    return [
      {
        orderNo: "ORD-2026-001",
        status: 1,
        quantity: 233.28,
        completeQuantity: 14,
        completionRate: 6,
        startTime: "2026-03-25",
      },
      {
        orderNo: "ORD-2026-002",
        status: 2,
        quantity: 150.5,
        completeQuantity: 100,
        completionRate: 67,
        startTime: "2026-03-20",
      },
      {
        orderNo: "ORD-2026-003",
        status: 0,
        quantity: 80.0,
        completeQuantity: 0,
        completionRate: 0,
        startTime: "2026-03-30",
      },
    ];
  };

  // é¡µé¢åŠ è½½æ—¶èŽ·å–数据
  onMounted(() => {
    // ä»Žè·¯ç”±å‚数中获取数据
    const data = route.query.row
      ? JSON.parse(decodeURIComponent(route.query.row))
      : null;
    if (data) {
      // èµ‹å€¼ç»™rowData
      Object.assign(rowData, data);
      // èµ‹å€¼ç»™è¡¨å•æ•°æ®
      trackProgressForm.materialCode = data.materialCode;
      trackProgressForm.currentStatus = data.status;
      trackProgressForm.progressDetails = generateProgressDetails(data.status);
      trackProgressForm.completionRate = calculateCompletionRate(
        trackProgressForm.progressDetails
      );
      trackProgressForm.remark = "";
    }
    // ç”Ÿæˆæ¨¡æ‹Ÿè®¢å•æ•°æ®
    rowData.orderList = generateOrderList();
  });
</script>

<style scoped>
  .app-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }

  .action-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 10px;
  }

  .detail-section {
    margin-bottom: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }

  .detail-section:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1a1a1a;
    border-bottom: 2px solid #409eff;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #409eff;
    margin-right: 8px;
    border-radius: 2px;
  }

  .unit {
    font-size: 12px;
    color: #909399;
    margin-left: 4px;
  }

  :deep(.el-descriptions) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-descriptions__row:nth-child(odd)) {
    background-color: #f9f9f9;
  }

  :deep(.el-descriptions__label) {
    font-weight: 500;
    color: #606266;
    background-color: #f5f7fa;
  }

  :deep(.el-descriptions__content) {
    color: #303133;
    font-weight: 500;
  }

  .progress-container {
    display: flex;
    gap: 24px;
  }

  .progress-section {
    margin-bottom: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    flex: 1;
    transition: all 0.3s ease;
  }

  .progress-section:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }

  .progress-item {
    margin-bottom: 24px;
  }

  .progress-label {
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
  }

  .progress-content {
    margin-left: 0;
  }

  .progress-content .el-table {
    max-height: 400px;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-table th) {
    background-color: #f5f7fa !important;
    font-weight: 600;
    color: #606266;
  }

  :deep(.el-table tr:hover) {
    background-color: #f5f7fa !important;
  }

  .order-item {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .order-item:last-child {
    margin-bottom: 0;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 10px;
  }

  :deep(.el-tag) {
    border-radius: 12px;
    padding: 2px 10px;
  }
</style>

 src/views/qualityManagement/finalInspection/components/ratioDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,215 @@
<template>
  <div>
    <el-dialog v-model="dialogVisible"
               title="标准投入产出比例"
               width="1000px"
               @close="closeDialog">
      <div class="ratio-cards">
        <el-card v-for="(item, index) in ratioData"
                 :key="index"
                 class="ratio-card">
          <template #header>
            <div class="card-header">
              <span>{{ item.productName }}<span v-if="item.model">-</span>{{ item.model || '' }}</span>
              <span class="material-code">{{ item.materialCode }}</span>
            </div>
          </template>
          <div class="ratio-info">
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">实际投入量：</span>
                <span class="info-value">{{ item.actualInputQuantity }} {{ item.unit }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">实际产出量：</span>
                <span class="info-value">{{ item.actualOutputQuantity }} {{ item.unit }}</span>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">实际投入产出比例：</span>
                <span class="info-value actual-ratio">{{ item.actualInputOutputRatio }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">标准投入产出比例：</span>
                <span class="info-value standard-ratio">{{ item.standardInputOutputRatio }}</span>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">偏差率：</span>
                <span :class="['info-value', 'deviation-rate', item.deviationRate >= 0 ? 'positive' : 'negative']">
                  {{ item.deviationRate >= 0 ? '+' : '' }}{{ (item.deviationRate * 100).toFixed(2) }}%
                </span>
              </div>
            </div>
          </div>
          <img v-if="item.deviationRate < 0"
               src="@/assets/images/ratiodown.png"
               class="chart-image" />
          <img v-else
               src="@/assets/images/ratioup.png"
               class="chart-imageUp" />
        </el-card>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  import { qualityInspectFinishedRatio } from "@/api/qualityManagement/rawMaterialInspection.js";

  const emit = defineEmits(["close"]);
  const dialogVisible = ref(false);
  const ratioData = ref([]);
  const orderInfo = ref({});
  const loading = ref(false);

  const openDialog = row => {
    dialogVisible.value = true;
    orderInfo.value = row;
    getRatioDetails(row);
  };

  const getRatioDetails = row => {
    loading.value = true;
    // æž„建请求参数
    const params = {
      productOrderId: row.productOrderId,
    };

    qualityInspectFinishedRatio(params)
      .then(res => {
        ratioData.value = res.data || [];
        loading.value = false;
      })
      .catch(err => {
        loading.value = false;
        console.error("获取标准投入产出比例失败:", err);
      });
  };

  const closeDialog = () => {
    dialogVisible.value = false;
    emit("close");
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped>
  .detail-card {
    margin-bottom: 20px;
  }

  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .material-code {
    font-size: 14px;
    font-weight: normal;
    color: #909399;
  }

  .detail-info {
    padding: 10px 0;
  }

  .ratio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
  }

  .ratio-card {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }

  .ratio-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
  }

  .info-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }

  .info-item {
    width: 50%;
    margin-bottom: 8px;
  }

  .info-label {
    display: inline-block;
    width: 100%;
    font-weight: bold;
    color: #666;
  }

  .info-value {
    color: #333;
  }

  .actual-ratio {
    color: #409eff;
    font-weight: bold;
  }

  .standard-ratio {
    color: #f68f00;
    font-weight: bold;
  }

  .deviation-rate {
    font-weight: bold;
  }

  .deviation-rate.positive {
    color: #67c23a;
  }

  .deviation-rate.negative {
    color: #f56c6c;
  }

  .dialog-footer {
    text-align: center;
  }
  .chart-image {
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 60px;
    height: 80px;
    opacity: 0.8;
  }
  .chart-imageUp {
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 60px;
    height: 80px;
    opacity: 0.8;
    transform: rotate(180deg);
  }
</style>

 src/views/qualityManagement/finalInspection/index.vue

@@ -2,396 +2,220 @@
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">产品名称：</span>
        <el-input
            v-model="searchForm.productName"
            style="width: 240px"
            placeholder="请输入产品名称搜索"
            @change="handleQuery"
            clearable
            :prefix-icon="Search"
        />
        <span  style="margin-left: 10px" class="search_title">检测日期：</span>
        <el-date-picker  v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                         placeholder="请选择" clearable @change="changeDaterange" />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
        >搜索</el-button
        >
      </div>
      <div>
        <el-button type="primary" @click="openForm('add')">新增</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
        <span class="search_title">生产订单号：</span>
        <el-input v-model="searchForm.npsNo"
                  style="width: 200px"
                  placeholder="请输入生产订单号搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span style="margin-left: 20px"
              class="search_title">产品编码：</span>
        <el-input v-model="searchForm.materialCode"
                  style="width: 240px"
                  placeholder="请输入产品编码搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span style="margin-left: 20px"
              class="search_title">产品名称：</span>
        <el-input v-model="searchForm.productName"
                  style="width: 240px"
                  placeholder="请输入产品名称搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
        <el-button type="info"
                   @click="handleReset"
                   style="margin-left: 10px">重置</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :page="page"
          :isSelection="true"
          @selection-change="handleSelectionChange"
          :tableLoading="tableLoading"
          @pagination="pagination"
          :total="page.total"
      ></PIMTable>
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total">
        <template #needQuantity="{ row }">
          <span style="font-weight: bold;color: #f68f00;">{{ row.needQuantity }}</span><span style="margin-left: 5px;color: #909399;">方</span>
        </template>
        <template #quantity="{ row }">
          <span style="font-weight: bold;color: #409eff;">{{ row.quantity }}</span><span style="margin-left: 5px;color: #909399;">方</span>
        </template>
        <template #qualifiedQuantity="{ row }">
          <span style="font-weight: bold;color: #67c23a;">{{ row.qualifiedQuantity }}</span><span style="margin-left: 5px;color: #909399;">方</span>
        </template>
        <template #unqualifiedQuantity="{ row }">
          <span style="font-weight: bold;color: #f56c6c;">{{ row.unqualifiedQuantity }}</span><span style="margin-left: 5px;color: #909399;">方</span>
        </template>
      </PIMTable>
    </div>
    <InspectionFormDia ref="inspectionFormDia" @close="handleQuery"></InspectionFormDia>
    <FormDia ref="formDia" @close="handleQuery"></FormDia>
    <files-dia ref="filesDia" @close="handleQuery"></files-dia>
        <el-dialog v-model="dialogFormVisible" title="编辑检验员" width="30%"
                             @close="closeDia">
            <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
                <el-form-item label="检验员：" prop="checkName">
                    <el-select v-model="form.checkName" placeholder="请选择" clearable>
                        <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName"
                                             :value="item.nickName"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确认</el-button>
                    <el-button @click="closeDia">取消</el-button>
                </div>
            </template>
        </el-dialog>
    <RatioDialog ref="ratioDialog"
                 @close="handleQuery"></RatioDialog>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import {onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick} from "vue";
import InspectionFormDia from "@/views/qualityManagement/finalInspection/components/inspectionFormDia.vue";
import FormDia from "@/views/qualityManagement/finalInspection/components/formDia.vue";
import {ElMessageBox} from "element-plus";
import {
    downloadQualityInspect,
    qualityInspectDel,
    qualityInspectListPage, qualityInspectUpdate,
    submitQualityInspect
} from "@/api/qualityManagement/rawMaterialInspection.js";
import FilesDia from "@/views/qualityManagement/finalInspection/components/filesDia.vue";
import dayjs from "dayjs";
import {userListNoPage} from "@/api/system/user.js";
import useUserStore from "@/store/modules/user";
  import { Search } from "@element-plus/icons-vue";
  import { onMounted, ref, reactive, toRefs, nextTick } from "vue";
  import RatioDialog from "@/views/qualityManagement/finalInspection/components/ratioDialog.vue";
  import { qualityInspectFinishedListPage } from "@/api/qualityManagement/rawMaterialInspection.js";
  import dayjs from "dayjs";

const data = reactive({
  searchForm: {
    productName: "",
    entryDate: undefined, // å½•å…¥æ—¥æœŸ
    entryDateStart: undefined,
    entryDateEnd: undefined,
  },
    rules: {
        checkName: [{required: true, message: "请选择", trigger: "change"}],
    },
});
const { searchForm } = toRefs(data);
const tableColumn = ref([
  {
    label: "检测日期",
    prop: "checkTime",
    width: 120
  },
  {
    label: "生产工单号",
    prop: "workOrderNo",
    width: 120
  },
  {
    label: "检验员",
    prop: "checkName",
  },
  {
    label: "产品名称",
    prop: "productName",
  },
  {
    label: "规格型号",
    prop: "model",
  },
  {
    label: "单位",
    prop: "unit",
  },
  {
    label: "数量",
    prop: "quantity",
    width: 100
  },
  {
    label: "检测单位",
    prop: "checkCompany",
    width: 120
  },
  {
    label: "检测结果",
    prop: "checkResult",
    dataType: "tag",
    formatType: (params) => {
      if (params == '不合格') {
        return "danger";
      } else if (params == '合格') {
        return "success";
      } else {
        return null;
      }
  const data = reactive({
    searchForm: {
      npsNo: "",
      materialCode: "",
      productName: "",
    },
  },
    {
        label: "提交状态",
        prop: "inspectState",
        formatData: (params) => {
            if (params) {
                return "已提交";
            } else {
                return "未提交";
            }
        },
    },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 280,
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          openForm("edit", row);
        },
                disabled: (row) => {
                    // å·²æäº¤åˆ™ç¦ç”¨
                    if (row.inspectState == 1) return true;
                    // å¦‚果检验员有值，只有当前登录用户能编辑
                    if (row.checkName) {
                        return row.checkName !== userStore.nickName;
                    }
                    return false;
                }
  });
  const { searchForm } = toRefs(data);
  const tableColumn = ref([
    {
      label: "生产订单号",
      prop: "npsNo",
      width: 140,
    },
    {
      label: "产品编码",
      prop: "materialCode",
      width: 120,
    },
    {
      label: "产品名称",
      prop: "productName",
    },
    {
      label: "规格型号",
      prop: "model",
    },
    {
      label: "产品类型",
      prop: "strength",
    },
    {
      label: "所需数量",
      prop: "needQuantity",
      dataType: "slot",
      slot: "needQuantity",
    },
    {
      label: "产出数量",
      prop: "quantity",
      dataType: "slot",
      slot: "quantity",
    },
    {
      label: "合格数量",
      prop: "qualifiedQuantity",
      dataType: "slot",
      slot: "qualifiedQuantity",
    },
    {
      label: "不合格数量",
      prop: "unqualifiedQuantity",
      dataType: "slot",
      slot: "unqualifiedQuantity",
    },
    {
      label: "状态",
      prop: "status",
      dataType: "tag",
      formatType: params => {
        const typeMap = {
          1: "primary",
          2: "warning",
          3: "success",
          4: "danger",
        };
        return typeMap[params] || "default";
      },
      {
        name: "附件",
        type: "text",
        clickFun: (row) => {
          openFilesFormDia(row);
        },
      formatData: val => {
        const labelMap = {
          1: "待开始",
          2: "进行中",
          3: "已完成",
          4: "已取消",
        };
        return labelMap[val] || val;
      },
            {
                name: "提交",
                type: "text",
                clickFun: (row) => {
                    submit(row.id);
                },
                disabled: (row) => {
                    // å·²æäº¤åˆ™ç¦ç”¨
                    if (row.inspectState == 1) return true;
                    // å¦‚果检验员有值，只有当前登录用户能提交
                    if (row.checkName) {
                        return row.checkName !== userStore.nickName;
                    }
                    return false;
                }
            },
            {
                name: "分配检验员",
                type: "text",
                clickFun: (row) => {
                    if (!row.checkName) {
                        open(row)
                    } else {
                        proxy.$modal.msgError("检验员已存在");
                    }
                },
                disabled: (row) => {
                    return row.inspectState == 1 || row.checkName;
                }
            },
            {
                name: "下载",
                type: "text",
                clickFun: (row) => {
                    downLoadFile(row);
                },
            },
    ],
  },
]);
const tableData = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
const currentRow = ref(null)
const page = reactive({
  current: 1,
  size: 100,
  total: 0
});
const formDia = ref()
const filesDia = ref()
const inspectionFormDia = ref()
const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const userList = ref([]);
const form = ref({
    checkName: ""
});
const dialogFormVisible = ref(false);
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 180,
      operation: [
        {
          name: "投入产出比例",
          type: "text",
          clickFun: row => {
            openFilesFormDia(row);
          },
        },
      ],
    },
  ]);
  const tableData = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  const ratioDialog = ref();
  /** é‡ç½®æŒ‰é’®æ“ä½œ */
  const handleReset = () => {
    searchForm.value = {
      npsNo: "",
      materialCode: "",
      productName: "",
    };
    handleQuery();
  };

const changeDaterange = (value) => {
  searchForm.value.entryDateStart = undefined;
  searchForm.value.entryDateEnd = undefined;
  if (value) {
    searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
    searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
  }
  getList();
};
// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
  page.current = 1;
  getList();
};
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  tableLoading.value = true;
  const params = { ...searchForm.value, ...page };
  params.entryDate = undefined
  qualityInspectListPage({...params, inspectType: 2}).then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records
    page.total = res.data.total;
  }).catch(err => {
    tableLoading.value = false;
  })
};
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// æ‰“开弹框
const openForm = (type, row) => {
  nextTick(() => {
    formDia.value?.openDialog(type, row)
  })
};
// æ‰“开新增检验弹框
const openInspectionForm = (type, row) => {
  nextTick(() => {
    inspectionFormDia.value?.openDialog(type, row)
  })
};
// æ‰“开附件弹框
const openFilesFormDia = (type, row) => {
  nextTick(() => {
    filesDia.value?.openDialog(type, row)
  })
};

// åˆ é™¤
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    ids = selectedRows.value.map((item) => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        qualityInspectDel(ids).then((res) => {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        });
  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    tableLoading.value = true;
    const params = { ...searchForm.value, ...page };
    params.entryDate = undefined;
    qualityInspectFinishedListPage({ ...params })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      .catch(err => {
        tableLoading.value = false;
      });
};
// å¯¼å‡º
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        proxy.download("/quality/qualityInspect/export", {inspectType: 2}, "出厂检验.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};
  };

// æä»·
const submit = async (id) => {
    const res = await submitQualityInspect({id: id})
    if (res.code === 200) {
        proxy.$modal.msgSuccess("提交成功");
        getList();
    }
}
  // æ‰“开标准投入产出比例弹框
  const openFilesFormDia = row => {
    nextTick(() => {
      ratioDialog.value?.openDialog(row);
    });
  };

// å…³é—­å¼¹æ¡†
const closeDia = () => {
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
};

const submitForm = () => {
    if (currentRow.value) {
        const data = {
            ...form.value,
            id: currentRow.value.id
        }
        qualityInspectUpdate(data).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
        })
    }
};

const open = async (row) => {
    let userLists = await userListNoPage();
    userList.value = userLists.data;
    currentRow.value = row
    dialogFormVisible.value = true
}

const downLoadFile = (row) => {
    downloadQualityInspect({ id: row.id }).then((blobData) => {
        const blob = new Blob([blobData], {
            type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        })
        const downloadUrl = window.URL.createObjectURL(blob)
		
        const link = document.createElement('a')
        link.href = downloadUrl
        link.download = '原材料检验报告.docx'
        document.body.appendChild(link)
        link.click()
		
        document.body.removeChild(link)
        window.URL.revokeObjectURL(downloadUrl)
    })
};
onMounted(() => {
  getList();
});
  onMounted(() => {
    getList();
  });
</script>

<style scoped></style>

 src/views/qualityManagement/processInspection/components/detailDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,287 @@
<template>
  <div>
    <el-dialog v-model="dialogVisible"
               title="检验详情"
               width="1000px"
               @close="closeDialog">
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <div class="detail-info">
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">日期：</span>
              <span class="info-value">{{ dayjs(detailData.createTime) .format('YYYY-MM-DD') }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">生产订单号：</span>
              <span class="info-value">{{ detailData.npsNo }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">工序：</span>
              <!-- <span class="info-value">{{ detailData.process }}</span> -->
              <el-tag type="primary">{{ detailData.process }}</el-tag>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">产品编码：</span>
              <span class="info-value">{{ detailData.materialCode }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">产品类型：</span>
              <!-- <span class="info-value">{{ detailData.strength }}</span> -->
              <el-tag type="info">{{ detailData.strength }}</el-tag>
            </div>
            <div class="info-item">
              <span class="info-label">产品名称：</span>
              <span class="info-value">{{ detailData.productName }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">规格：</span>
              <span class="info-value">{{ detailData.model }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">班次：</span>
              <el-tag :type="detailData.schedule === '白班' ? 'primary' : 'warning'">{{ detailData.schedule }}</el-tag>
            </div>
            <div class="info-item">
              <span class="info-label">岗位人员：</span>
              <span class="info-value">{{ detailData.postName }}</span>
            </div>
          </div>
          <div class="info-row">
            <!-- <div class="info-item">
              <span class="info-label">报工单号：</span>
              <span class="info-value">{{ detailData.productionProductRouteItemId }}</span>
            </div> -->
            <div class="info-item">
              <span class="info-label">产出数量：</span>
              <span class="info-value"><span style="font-weight: bold;color: #409eff;">{{ detailData.quantity }}</span> æ–¹</span>
            </div>
            <div class="info-item">
              <span class="info-label">合格数量：</span>
              <span class="info-value"><span style="font-weight: bold;color: #28e431;">{{ detailData.qualifiedQuantity }}</span> æ–¹</span>
            </div>
            <div class="info-item">
              <span class="info-label">不合格数量：</span>
              <span class="info-value"><span style="font-weight: bold;color: #b43434;">{{ detailData.unqualifiedQuantity }}</span> æ–¹</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">报工单号：</span>
              <span class="info-value">{{ detailData.productNo }}</span>
            </div>
          </div>
        </div>
      </el-card>
      <el-card v-for="group in groupedInspectionData"
               :key="group.sourceSort"
               class="detail-card"
               style="margin-top: 20px;">
        <template #header>
          <div class="card-header">
            <span v-if="groupedInspectionData.length > 1">检验zhi组 - {{ group.sourceSort }}</span>
            <span v-else>检验指标</span>
          </div>
        </template>
        <el-table :data="group.items"
                  style="width: 100%"
                  :row-class-name="rowClassName">
          <el-table-column prop="paramName"
                           label="指标" />
          <el-table-column prop="unit"
                           label="单位"
                           width="100">
            <template #default="scope">
              {{ scope.row.unit || "/" }}
            </template>
          </el-table-column>
          <el-table-column prop="standardText"
                           label="标准值" />
          <el-table-column prop="paramValue"
                           label="实际值" />
          <el-table-column prop="result"
                           label="结果"
                           width="100">
            <template #default="scope">
              <el-tag :type="scope.row.result === '合格' ? 'success' : 'danger'">
                {{ scope.row.result }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { qualityInspectProcessDetails } from "@/api/qualityManagement/rawMaterialInspection.js";
  import dayjs from "dayjs";

  const emit = defineEmits(["close"]);
  const dialogVisible = ref(false);
  const detailData = ref({});
  const inspectionData = ref([]);
  const groupedInspectionData = ref([]);
  const loading = ref(false);

  const openDialog = row => {
    dialogVisible.value = true;
    detailData.value = {
      ...row,
      createTime: row.createTime
        ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
        : "",
    };
    getInspectionDetails(row.productionProductRouteItemId);
  };

  const getInspectionDetails = id => {
    loading.value = true;
    qualityInspectProcessDetails({ productionProductRouteItemId: id })
      .then(res => {
        const data = res.data || [];
        // è®¡ç®—结果
        const processedData = data.map(item => {
          let result = "合格";
          let standardText = "";
          if (item.valueMode === 1) {
            // å•å€¼æ¯”较
            if (item.standardValue !== null) {
              standardText = item.standardValue;
              if (item.paramValue !== item.standardValue) {
                result = "不合格";
              }
            } else {
              standardText = "-";
              result = "合格";
            }
          } else if (item.valueMode === 2) {
            // åŒºé—´æ¯”较
            if (item.minValue !== null || item.maxValue !== null) {
              standardText =
                (item.minValue ? item.minValue : "-∞") +
                "~" +
                (item.maxValue ? item.maxValue : "+∞");
              if (
                item.paramValue < item.minValue ||
                item.paramValue > item.maxValue
              ) {
                result = "不合格";
              }
            } else {
              standardText = "-";
              result = "合格";
            }
          }
          return {
            ...item,
            standardText,
            result,
          };
        });

        // æŒ‰sourceSort分组
        const grouped = {};
        processedData.forEach(item => {
          const key = item.sourceSort || "默认";
          if (!grouped[key]) {
            grouped[key] = [];
          }
          grouped[key].push(item);
        });

        // è½¬æ¢ä¸ºæ•°ç»„格式
        groupedInspectionData.value = Object.entries(grouped).map(
          ([key, items]) => ({
            sourceSort: key,
            items,
          })
        );

        loading.value = false;
      })
      .catch(err => {
        loading.value = false;
        console.error("获取检验详情失败:", err);
      });
  };

  const closeDialog = () => {
    dialogVisible.value = false;
    emit("close");
  };

  // ä¸ºä¸åˆæ ¼çš„行添加样式
  const rowClassName = ({ row }) => {
    return row.result == "不合格" ? "unqualified-row" : "";
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped>
  .detail-card {
    margin-bottom: 20px;
  }

  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .detail-info {
    padding: 10px 0;
  }

  .info-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .info-item {
    width: 33%;
    margin-bottom: 10px;
  }

  .info-label {
    display: inline-block;
    width: 100px;
    font-weight: bold;
    color: #666;
  }

  .info-value {
    color: #333;
  }

  .dialog-footer {
    text-align: center;
  }

  :deep(.unqualified-row) {
    background-color: rgba(245, 108, 108, 0.05) !important;
  }

  :deep(.unqualified-row .cell) {
    color: #f56c6c !important;
  }
</style>

 src/views/qualityManagement/processInspection/index.vue

@@ -3,352 +3,416 @@
    <div class="search_form">
      <div>
        <span class="search_title">工序：</span>
        <el-input
            v-model="searchForm.process"
            style="width: 240px"
            placeholder="请输入工序搜索"
            @change="handleQuery"
            clearable
            :prefix-icon="Search"
        />
        <span  style="margin-left: 10px" class="search_title">检测日期：</span>
        <el-date-picker  v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                         placeholder="请选择" clearable @change="changeDaterange" />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
        >搜索</el-button
        >
        <el-input v-model="searchForm.process"
                  style="width: 200px"
                  placeholder="请输入工序搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span style="margin-left: 10px"
              class="search_title">生产订单号：</span>
        <el-input v-model="searchForm.npsNo"
                  style="width: 200px"
                  placeholder="请输入生产订单号搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span style="margin-left: 10px"
              class="search_title">产品编码：</span>
        <el-input v-model="searchForm.materialCode"
                  style="width: 200px"
                  placeholder="请输入产品编码搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span style="margin-left: 10px"
              class="search_title">产品名称：</span>
        <el-input v-model="searchForm.productName"
                  style="width: 200px"
                  placeholder="请输入产品名称搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span style="margin-left: 10px"
              class="search_title">日期：</span>
        <el-date-picker v-model="searchForm.entryDate"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        type="daterange"
                        style="width: 240px"
                        placeholder="请选择"
                        clearable
                        @change="changeDaterange" />
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
        <el-button type="info"
                   @click="resetForm"
                   style="margin-left: 10px">重置</el-button>
      </div>
      <div>
        <el-button type="primary" @click="openForm('add')">新增</el-button>
        <!-- <el-button type="primary"
                   @click="openForm('add')">新增</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button> -->
      </div>
    </div>
    <div class="table_list">
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :page="page"
          :isSelection="true"
          @selection-change="handleSelectionChange"
          :tableLoading="tableLoading"
          @pagination="pagination"
          :total="page.total"
      ></PIMTable>
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total">
        <template #qualifiedQuantity="{ row }">
          <span style="font-weight: bold;color: #409eff;">{{ row.qualifiedQuantity }}</span><span style="margin-left: 5px;color: #909399;">方</span>
        </template>
        <template #unqualifiedQuantity="{ row }">
          <span style="font-weight: bold;color: #b43434;">{{ row.unqualifiedQuantity }}</span><span style="margin-left: 5px;color: #909399;">方</span>
        </template>
        <template #quantity="{ row }">
          <span style="font-weight: bold;color: #28e431;">{{ row.quantity }}</span><span style="margin-left: 5px;color: #909399;">方</span>
        </template>
      </PIMTable>
    </div>
    <InspectionFormDia ref="inspectionFormDia" @close="handleQuery"></InspectionFormDia>
    <FormDia ref="formDia" @close="handleQuery"></FormDia>
    <files-dia ref="filesDia" @close="handleQuery"></files-dia>
        <el-dialog v-model="dialogFormVisible" title="编辑检验员" width="30%"
                             @close="closeDia">
            <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
                <el-form-item label="检验员：" prop="checkName">
                    <el-select v-model="form.checkName" placeholder="请选择" clearable>
                        <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName"
                                             :value="item.nickName"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确认</el-button>
                    <el-button @click="closeDia">取消</el-button>
                </div>
            </template>
        </el-dialog>
    <InspectionFormDia ref="inspectionFormDia"
                       @close="handleQuery"></InspectionFormDia>
    <FormDia ref="formDia"
             @close="handleQuery"></FormDia>
    <files-dia ref="filesDia"
               @close="handleQuery"></files-dia>
    <DetailDialog ref="detailDialog"
                  @close="handleQuery"></DetailDialog>
    <el-dialog v-model="dialogFormVisible"
               title="编辑检验员"
               width="30%"
               @close="closeDia">
      <el-form :model="form"
               label-width="140px"
               label-position="top"
               :rules="rules"
               ref="formRef">
        <el-form-item label="检验员："
                      prop="checkName">
          <el-select v-model="form.checkName"
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in userList"
                       :key="item.nickName"
                       :label="item.nickName"
                       :value="item.nickName" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import {onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick} from "vue";
import InspectionFormDia from "@/views/qualityManagement/processInspection/components/inspectionFormDia.vue";
import FormDia from "@/views/qualityManagement/processInspection/components/formDia.vue";
import {ElMessageBox} from "element-plus";
import {
    downloadQualityInspect,
    qualityInspectDel,
    qualityInspectListPage, qualityInspectUpdate,
    submitQualityInspect
} from "@/api/qualityManagement/rawMaterialInspection.js";
import FilesDia from "@/views/qualityManagement/processInspection/components/filesDia.vue";
import dayjs from "dayjs";
import {userListNoPage} from "@/api/system/user.js";
import useUserStore from "@/store/modules/user";
  import { Search } from "@element-plus/icons-vue";
  import {
    onMounted,
    ref,
    reactive,
    toRefs,
    getCurrentInstance,
    nextTick,
  } from "vue";
  import InspectionFormDia from "@/views/qualityManagement/processInspection/components/inspectionFormDia.vue";
  import FormDia from "@/views/qualityManagement/processInspection/components/formDia.vue";
  import DetailDialog from "@/views/qualityManagement/processInspection/components/detailDialog.vue";
  import { ElMessageBox } from "element-plus";
  import {
    downloadQualityInspect,
    qualityInspectDel,
    qualityInspectListPage,
    qualityInspectUpdate,
    submitQualityInspect,
    qualityInspectProcessPage,
    qualityInspectProcessDetails,
  } from "@/api/qualityManagement/rawMaterialInspection.js";
  import FilesDia from "@/views/qualityManagement/processInspection/components/filesDia.vue";
  import dayjs from "dayjs";
  import { userListNoPage } from "@/api/system/user.js";
  import useUserStore from "@/store/modules/user";

const data = reactive({
  searchForm: {
    process: "",
    entryDate: undefined, // å½•å…¥æ—¥æœŸ
    entryDateStart: undefined,
    entryDateEnd: undefined,
  },
    rules: {
        checkName: [{required: true, message: "请选择", trigger: "change"}],
    },
});
const { searchForm } = toRefs(data);
const tableColumn = ref([
  {
    label: "检测日期",
    prop: "checkTime",
    width: 120
  },
  {
    label: "生产工单号",
    prop: "workOrderNo",
    width: 120
  },
  {
    label: "工序",
    prop: "process",
    width: 230
  },
  {
    label: "检验员",
    prop: "checkName",
  },
  {
    label: "产品名称",
    prop: "productName",
  },
  {
    label: "规格型号",
    prop: "model",
  },
  {
    label: "单位",
    prop: "unit",
  },
  {
    label: "数量",
    prop: "quantity",
    width: 100
  },
  {
    label: "检测单位",
    prop: "checkCompany",
    width: 120
  },
  {
    label: "检测结果",
    prop: "checkResult",
    dataType: "tag",
    formatType: (params) => {
      if (params == '不合格') {
        return "danger";
      } else if (params == '合格') {
        return "success";
      } else {
        return null;
      }
  const data = reactive({
    searchForm: {
      process: "",
      entryDate: undefined, // å½•å…¥æ—¥æœŸ
      startTime: undefined,
      endTime: undefined,
      materialCode: "",
      productName: "",
      npsNo: "",
    },
  },
    {
        label: "提交状态",
        prop: "inspectState",
        formatData: (params) => {
            if (params) {
                return "已提交";
            } else {
                return "未提交";
            }
        },
    },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 280,
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          openForm("edit", row);
        },
                disabled: (row) => {
                    // å·²æäº¤åˆ™ç¦ç”¨
                    if (row.inspectState == 1) return true;
                    // å¦‚果检验员有值，只有当前登录用户能编辑
                    if (row.checkName) {
                        return row.checkName !== userStore.nickName;
                    }
                    return false;
                }
    rules: {
      checkName: [{ required: true, message: "请选择", trigger: "change" }],
    },
  });
  const { searchForm } = toRefs(data);
  const tableColumn = ref([
    {
      label: "日期",
      prop: "createTime",
      width: "130",
      formatData: val => {
        return dayjs(val).format("YYYY-MM-DD");
      },
      {
        name: "附件",
        type: "text",
        clickFun: (row) => {
          openFilesFormDia(row);
        },
    },
    {
      label: "生产订单号",
      prop: "npsNo",
      width: "130",
    },
    {
      label: "工序",
      prop: "process",
      dataType: "tag",
    },
    {
      label: "产品编码",
      prop: "materialCode",
      width: "130",
    },
    {
      label: "产品类型",
      prop: "strength",
      dataType: "tag",
      formatType: params => {
        if (params == "A3.5") {
          return "success";
        } else if (params == "A4.5") {
          return "warning";
        } else {
          return null;
        }
      },
            {
                name: "提交",
                type: "text",
                clickFun: (row) => {
                    submit(row.id);
                },
                disabled: (row) => {
                    // å·²æäº¤åˆ™ç¦ç”¨
                    if (row.inspectState == 1) return true;
                    // å¦‚果检验员有值，只有当前登录用户能提交
                    if (row.checkName) {
                        return row.checkName !== userStore.nickName;
                    }
                    return false;
                }
            },
            {
                name: "分配检验员",
                type: "text",
                clickFun: (row) => {
                    if (!row.checkName) {
                        open(row)
                    } else {
                        proxy.$modal.msgError("检验员已存在");
                    }
                },
                disabled: (row) => {
                    return row.inspectState == 1 || row.checkName;
                }
            },
            {
                name: "下载",
                type: "text",
                clickFun: (row) => {
                    downLoadFile(row);
                },
            },
    ],
  },
]);
const userList = ref([]);
const currentRow = ref(null)
const tableData = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
const dialogFormVisible = ref(false);
const form = ref({
    checkName: ""
});
const page = reactive({
  current: 1,
  size: 100,
  total: 0
});
const formDia = ref()
const filesDia = ref()
const inspectionFormDia = ref()
const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const changeDaterange = (value) => {
  searchForm.value.entryDateStart = undefined;
  searchForm.value.entryDateEnd = undefined;
  if (value) {
    searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
    searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
  }
  getList();
};
// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
  page.current = 1;
  getList();
};
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  tableLoading.value = true;
  const params = { ...searchForm.value, ...page };
  params.entryDate = undefined
  qualityInspectListPage({...params, inspectType: 1}).then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records
    page.total = res.data.total;
  }).catch(err => {
    tableLoading.value = false;
  })
};
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
    },
    {
      label: "产品名称",
      prop: "productName",
    },
    {
      label: "规格",
      prop: "model",
      width: "130",
    },
    {
      label: "班次",
      prop: "schedule",
      dataType: "tag",
      formatType: params => {
        if (params == "白班") {
          return "primary";
        } else if (params == "夜班") {
          return "warning";
        } else {
          return null;
        }
      },
    },
    {
      label: "岗位人员",
      prop: "postName",
    },
    {
      label: "报工单号",
      prop: "productNo",
      width: "130",
    },
    {
      label: "产出数量",
      prop: "quantity",
      dataType: "slot",
      slot: "quantity",
    },
    {
      label: "合格数量",
      prop: "qualifiedQuantity",
      dataType: "slot",
      slot: "qualifiedQuantity",
    },
    {
      label: "不合格数量",
      prop: "unqualifiedQuantity",
      dataType: "slot",
      slot: "unqualifiedQuantity",
    },

// æ‰“开弹框
const openForm = (type, row) => {
  nextTick(() => {
    formDia.value?.openDialog(type, row)
  })
};
// æ‰“开新增检验弹框
const openInspectionForm = (type, row) => {
  nextTick(() => {
    inspectionFormDia.value?.openDialog(type, row)
  })
};
// æ‰“开附件弹框
const openFilesFormDia = (type, row) => {
  nextTick(() => {
    filesDia.value?.openDialog(type, row)
  })
};
// æä»·
const submit = async (id) => {
    const res = await submitQualityInspect({id: id})
    if (res.code === 200) {
        proxy.$modal.msgSuccess("提交成功");
        getList();
    }
}
const open = async (row) => {
    let userLists = await userListNoPage();
    userList.value = userLists.data;
    currentRow.value = row
    dialogFormVisible.value = true
}
// å…³é—­å¼¹æ¡†
const closeDia = () => {
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
};
const submitForm = () => {
    if (currentRow.value) {
        const data = {
            ...form.value,
            id: currentRow.value.id
        }
        qualityInspectUpdate(data).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
        })
    }
};
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 120,
      operation: [
        {
          name: "详情",
          clickFun: row => {
            openInspectionFormDia(row);
          },
        },
      ],
    },
  ]);
  const userList = ref([]);
  const currentRow = ref(null);
  const tableData = ref([]);
  const selectedRows = ref([]);
  const tableLoading = ref(false);
  const dialogFormVisible = ref(false);
  const form = ref({
    checkName: "",
  });
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  const formDia = ref();
  const filesDia = ref();
  const inspectionFormDia = ref();
  const detailDialog = ref();
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();
  const changeDaterange = value => {
    searchForm.value.startTime = undefined;
    searchForm.value.endTime = undefined;
    if (value) {
      searchForm.value.startTime = dayjs(value[0]).format("YYYY-MM-DD");
      searchForm.value.endTime = dayjs(value[1]).format("YYYY-MM-DD");
    }
    getList();
  };
  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };
  /** é‡ç½®æŒ‰é’®æ“ä½œ */
  const resetForm = () => {
    searchForm.value = {
      process: "",
      entryDate: undefined,
      startTime: undefined,
      endTime: undefined,
      materialCode: "",
      productName: "",
      npsNo: "",
    };
    getList();
  };
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    tableLoading.value = true;
    const params = { ...searchForm.value, ...page };
    params.entryDate = undefined;
    qualityInspectProcessPage({ ...params, inspectType: 1 })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

// åˆ é™¤
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    ids = selectedRows.value.map((item) => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
  // æ‰“开弹框
  const openForm = (type, row) => {
    nextTick(() => {
      formDia.value?.openDialog(type, row);
    });
  };
  // æ‰“开新增检验弹框
  const openInspectionForm = (type, row) => {
    nextTick(() => {
      inspectionFormDia.value?.openDialog(type, row);
    });
  };

  // æ‰“开详情弹框
  const openInspectionFormDia = row => {
    nextTick(() => {
      detailDialog.value?.openDialog(row);
    });
  };
  // æ‰“开附件弹框
  const openFilesFormDia = (type, row) => {
    nextTick(() => {
      filesDia.value?.openDialog(type, row);
    });
  };
  // æä»·
  const submit = async id => {
    const res = await submitQualityInspect({ id: id });
    if (res.code === 200) {
      proxy.$modal.msgSuccess("提交成功");
      getList();
    }
  };
  const open = async row => {
    let userLists = await userListNoPage();
    userList.value = userLists.data;
    currentRow.value = row;
    dialogFormVisible.value = true;
  };
  // å…³é—­å¼¹æ¡†
  const closeDia = () => {
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
  };
  const submitForm = () => {
    if (currentRow.value) {
      const data = {
        ...form.value,
        id: currentRow.value.id,
      };
      qualityInspectUpdate(data).then(res => {
        proxy.$modal.msgSuccess("提交成功");
        closeDia();
        getList();
      });
    }
  };

  // åˆ é™¤
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        qualityInspectDel(ids).then((res) => {
        qualityInspectDel(ids).then(res => {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        });
@@ -356,41 +420,45 @@
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};
const downLoadFile = (row) => {
    downloadQualityInspect({ id: row.id }).then((blobData) => {
        const blob = new Blob([blobData], {
            type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        })
        const downloadUrl = window.URL.createObjectURL(blob)
		
        const link = document.createElement('a')
        link.href = downloadUrl
        link.download = '过程检验报告.docx'
        document.body.appendChild(link)
        link.click()
		
        document.body.removeChild(link)
        window.URL.revokeObjectURL(downloadUrl)
    })
};
// å¯¼å‡º
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
  };
  const downLoadFile = row => {
    downloadQualityInspect({ id: row.id }).then(blobData => {
      const blob = new Blob([blobData], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      const downloadUrl = window.URL.createObjectURL(blob);

      const link = document.createElement("a");
      link.href = downloadUrl;
      link.download = "过程检验报告.docx";
      document.body.appendChild(link);
      link.click();

      document.body.removeChild(link);
      window.URL.revokeObjectURL(downloadUrl);
    });
  };
  // å¯¼å‡º
  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        proxy.download("/quality/qualityInspect/export", {inspectType: 1}, "过程检验.xlsx");
        proxy.download(
          "/quality/qualityInspect/export",
          { inspectType: 1 },
          "过程检验.xlsx"
        );
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};
onMounted(() => {
  getList();
});
  };
  onMounted(() => {
    getList();
  });
</script>

<style scoped></style>

 src/views/qualityManagement/rawMaterialInspection/components/formDia.vue

@@ -347,7 +347,7 @@
    testStandardOptions.value = [];
    tableData.value = [];
    // å…ˆç¡®ä¿äº§å“æ ‘已加载，否则编辑时产品/规格型号无法反显
    await getProductOptions();
    // await getProductOptions();
    if (operationType.value === "edit") {
      // å…ˆä¿å­˜ testStandardId，避免被清空
      const savedTestStandardId = row.testStandardId;

 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>
@@ -149,7 +154,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 +163,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>
@@ -209,7 +219,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 +229,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 +429,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 +530,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;

@@ -723,71 +740,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 +1357,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 +1482,6 @@
    height: 24vh;
  }

  
  .bi-panel-bottom-right .echart-fill {
    height: calc(100% - 2.8vh);
  }
@@ -1632,7 +1756,7 @@
    text-align: left;
    color: #c3c3c3;
  }
    /* ææ–™ä¿¡æ¯å¡ç‰‡ */
  /* ææ–™ä¿¡æ¯å¡ç‰‡ */
  .material-info-card {
    display: flex;
    align-items: center;
@@ -1691,5 +1815,4 @@
    font-size: 1vh;
    opacity: 0.7;
  }

</style>

 vite.config.js

@@ -8,7 +8,7 @@
  const { VITE_APP_ENV } = env;
  const baseUrl =
      env.VITE_APP_ENV === "development"
          ? "http://192.168.1.234:9019"
          ? "http://192.168.1.107:7003"
          : env.VITE_BASE_API;
  const javaUrl =
      env.VITE_APP_ENV === "development"