feat(FencePanel): 将围栏面板的静态统计数据替换为动态 props 数据

董国庆

2026-05-13 1b427605ba14372c76dcd96f01fee314fc5abe0a

feat(FencePanel): 将围栏面板的静态统计数据替换为动态 props 数据

新增两个辅助函数用于安全处理统计数据：getStatNumber 确保数值合法，非法时返回0；buildFenceStatItems 根据点位/场站类型构建对应的统计条目。使用组件接收的 fenceDetailData 获取真实统计数据，替代原硬编码的模拟数据。

 src/views/businessOperations/operationWorkbench/components/FencePanel.vue

@@ -101,34 +101,56 @@
  场站统计: false,
});

// 临时写死，等待围栏统计接口结构调整后替换为真实数据。
const fenceEntityStatSections = computed(() => [
  {
    title: "点位统计",
    defaultVisibleCount: 2,
    total: 128,
    items: [
      { label: "启用中", value: 95, color: "success" },
      { label: "待生效", value: 33, color: "warning" },
      { label: "已停用", value: 12, color: "muted" },
      { label: "已失效", value: 8, color: "muted" },
      { label: "待测试", value: 5, color: "info" },
      { label: "测试中", value: 3, color: "info" },
      { label: "测试不通过", value: 2, color: "muted" },
    ],
  },
  {
    title: "场站统计",
    defaultVisibleCount: 3,
    total: 24,
    items: [
      { label: "启用中", value: 18, color: "success" },
      { label: "待生效", value: 4, color: "warning" },
      { label: "已停用", value: 2, color: "muted" },
      { label: "已失效", value: 3, color: "muted" },
    ],
  },
]);
function getStatNumber(value: unknown) {
  const nextValue = Number(value);
  return Number.isFinite(nextValue) ? nextValue : 0;
}

function buildFenceStatItems(
  source: Record<string, any> | null | undefined,
  type: "point" | "station"
) {
  const baseItems = [
    { label: "启用中", value: getStatNumber(source?.startingUp), color: "success" },
    { label: "待生效", value: getStatNumber(source?.pendingLaunch), color: "warning" },
    // { label: "草稿", value: getStatNumber(source?.draft), color: "muted" },
    { label: "已停用", value: getStatNumber(source?.disabled), color: "muted" },
    { label: "已失效", value: getStatNumber(source?.expired), color: "muted" },
  ];

  if (type === "station") return baseItems;

  return [
    ...baseItems,
    { label: "待测试", value: getStatNumber(source?.toBeTested), color: "info" },
    { label: "测试中", value: getStatNumber(source?.testing), color: "info" },
    {
      label: "测试不通过",
      value: getStatNumber(source?.testNotPass),
      color: "muted",
    },
  ];
}

const fenceEntityStatSections = computed(() => {
  const pointStats = props.fenceDetailData?.pointsNumbers || {};
  const stationStats = props.fenceDetailData?.stationNumbers || {};

  return [
    {
      title: "点位统计",
      defaultVisibleCount: 2,
      total: getStatNumber(pointStats.totalNum),
      items: buildFenceStatItems(pointStats, "point"),
    },
    {
      title: "场站统计",
      defaultVisibleCount: 3,
      total: getStatNumber(stationStats.totalNum),
      items: buildFenceStatItems(stationStats, "station"),
    },
  ];
});

function getVisibleFenceEntityStatItems(section: {
  title: string;