qiangmj / ebc-Mes

import React, { useEffect, useState } from "react";
import styles from "./index.less";
import Pie from "@/components/Charts/Pie";

const EquipmentRepair = props => {
  return (
    <div className={styles.equipmentRepair}>
      <EquipmentInfo {...props} />
      <EquipmentFaultAnalysis {...props} />
    </div>
  );
};
// 在组件外部定义多语言映射
const tabTranslations = {
  sChinese: {
    "设备维修记录": "设备维修记录",
    "设备点检明细": "设备点检明细",
    "设备故障分析图表": "设备故障分析图表",
    "点检故障分析图表": "点检故障分析图表",
    "暂无数据": "暂无数据"
  },
  sEnglish: {
    "设备维修记录": "Equipment Repair Records",
    "设备点检明细": "Equipment Inspection Details",
    "设备故障分析图表": "Equipment Fault Analysis Chart",
    "点检故障分析图表": "Inspection Fault Analysis Chart",
    "暂无数据": "No Data"
  },
  sBig5: {
    "设备维修记录": "設備維修記錄",
    "设备点检明细": "設備點檢明細",
    "设备故障分析图表": "設備故障分析圖表",
    "点检故障分析图表": "點檢故障分析圖表",
    "暂无数据": "暫無數據"
  }
};
// 获取翻译后的文本
const getTranslation = (app, text) => {
  const language = app?.userinfo?.sLanguage || 'sChinese';
  return tabTranslations[language]?.[text] || text;
};
// 在组件外部定义多语言映射
const equipmentTranslations = {
  sChinese: {
    "维修申请记录": "维修申请记录",
    "设备点检记录": "设备点检记录",
    "设备资料": "设备资料",
    "设备信息": "设备信息",
    "设备编号": "设备编号",
    "设备名称": "设备名称"
  },
  sEnglish: {
    "维修申请记录": "Repair Request Records",
    "设备点检记录": "Equipment Inspection Records",
    "设备资料": "Equipment Information",
    "设备信息": "Equipment Info",
    "设备编号": "Number",
    "设备名称": "Name"
  },
  sBig5: {
    "维修申请记录": "維修申請記錄",
    "设备点检记录": "設備點檢記錄",
    "设备资料": "設備資料",
    "设备信息": "設備信息",
    "设备编号": "設備編號",
    "设备名称": "設備名稱"
  }
};

// 获取翻译后的文本
const getEquipmentTranslation = (app, text) => {
  const language = app?.userinfo?.sLanguage || 'sChinese';
  return equipmentTranslations[language]?.[text] || text;
};
// 设备信息
const EquipmentInfo = props => {
  const { sTabName = "", app } = props;

  // 仍然使用中文进行逻辑判断
  const chineseTabs = ["维修申请记录", "设备点检记录", "设备资料"];
  if (!chineseTabs.includes(sTabName)) return "";

  const tableName =
    sTabName === "维修申请记录"
      ? "table4"
      : sTabName === "设备点检记录"
        ? "elemachine"
        : "deviceinfo";

  const { [`${tableName}Data`]: tableData = [] } = props;
  const viewRow = tableData[0] || {};
  const { sMachineNo, sMachineName } = viewRow;
  return (
    <div className={styles.equipmentInfo}>
      <div className={styles.title}><span title={getEquipmentTranslation(app, "设备信息")}>{getEquipmentTranslation(app, "设备信息")}</span></div>
      <div className={styles.image} />
      <div className={styles.info}>
        <div className={styles.content}>
          <div>{getEquipmentTranslation(app, "设备编号")}：</div>
          <div>{sMachineNo}</div>
          <div>{getEquipmentTranslation(app, "设备名称")}：</div>
          <div><span title={sMachineName}>{sMachineName}</span></div>
        </div>
      </div>
    </div>
  );
};

// 设备故障分析图表
const EquipmentFaultAnalysis = props => {
  const { sTabName = "", app } = props;

  // 获取当前语言的tab名称
  const chineseTabs = ["设备维修记录", "设备点检明细"];
  const currentTabs = chineseTabs.map(tab => getTranslation(app, tab));

  // 仍然使用中文进行逻辑判断
  if (!chineseTabs.includes(sTabName)) return "";

  const tableName = sTabName === "设备维修记录" ? "table3" : "spotcheckanalyze";

  const xName = sTabName === "设备维修记录" ? "sFaultType" : "sIntervaltype";

  // 使用currentTabs中的翻译后文本进行界面显示
  const displayTabName = currentTabs[chineseTabs.indexOf(sTabName)];

  // 获取翻译后的标题
  const chineseTitle = sTabName === "设备维修记录"
    ? "设备故障分析图表"
    : "点检故障分析图表";
  const title = getTranslation(app, chineseTitle);

  const { [`${tableName}Data`]: tableData = [] } = props;

  const [pieProps, setPieProps] = useState({
    data: [],
    hasLegend: true,
    valueFormat: false,
    lineWidth: 0,
    pageLoading: false,
    hasLend: true,
    height: 280
  });

  useEffect(
    () => {
      if (!tableData.length) return;

      const data = [];
      tableData.forEach(rowData => {
        const { [xName]: x, iCount: y } = rowData;
        data.push({ x, y });
      });

      setPieProps(pre => ({ ...pre, data }));
    },
    [JSON.stringify(tableData)]
  );

  return (
    <div className={styles.equipmentFaultAnalysis}>
      <div className={styles.title}><span title={title}>{title}</span></div>
      <div className={styles.charts}>
        {pieProps.data.length ? (
          <Pie {...pieProps} />
        ) : (
          <div className={styles.noData}>{getTranslation(app, "暂无数据")}</div>
        )}
      </div>
    </div>
  );
};

export default EquipmentRepair;