<think>根据提供的HTML代码,我们注意到页面中包含了多个中文字符,并且有一个需求是“切换中英文页面”。因此,我们需要实现一个中英文切换的功能。这通常可以通过以下步骤实现:
1. 准备中英文两套文本资源(资源文件或对象)。
2. 在页面中为需要切换的文本元素设置特定的类名或ID,以便于定位。
3. 编写切换函数,根据当前语言状态,将页面中的文本替换为对应语言的文本。
4. 将当前语言状态保存到cookie或localStorage中,以便在页面刷新后保持语言状态。
由于原页面没有英文版本,我们需要先为每个需要翻译的文本准备英文翻译。我们可以创建一个对象来存储中英文对照的文本。
### 实现步骤
#### 1. 定义语言资源对象
在JavaScript中定义一个对象,包含页面中所有需要翻译的文本。例如:
```javascript
var langResources = {
"zh-CN": {
"productionOrder": "生產單號",
"shipmentOrder": "出貨單號",
"date": "日期",
"materialNo": "料號",
"batchNo": "批號",
// ... 其他文本
},
"en-US": {
"productionOrder": "Production Order",
"shipmentOrder": "Shipment Order",
"date": "Date",
"materialNo": "Material No",
"batchNo": "Batch No",
// ... 其他文本
}
};
```
#### 2. 为需要翻译的元素添加标识
在HTML中,为需要翻译的元素添加一个`data-i18n`属性,属性值为资源对象的key。例如:
```html
<span class="input-group-text search-span" data-i18n="productionOrder">生產單號</span>
```
#### 3. 编写语言切换函数
编写一个函数,根据选择的语言,遍历所有带有`data-i18n`属性的元素,并替换其文本内容。
#### 4. 保存和读取语言状态
使用localStorage保存用户选择的语言,并在页面加载时应用。
#### 5. 添加语言切换按钮
在页面上添加一个按钮,用于触发语言切换。
### 代码实现
#### 修改HTML,添加语言切换按钮
在页面的合适位置(例如顶部)添加一个按钮:
```html
<button id="langSwitch" class="btn btn-outline-secondary">English</button>
```
#### 定义语言资源
在`<script>`标签中定义语言资源对象:
```javascript
// 语言资源
var langResources = {
"zh-CN": {
"productionOrder": "生產單號",
"shipmentOrder": "出貨單號",
"date": "日期",
"materialNo": "料號",
"batchNo": "批號",
"dc": "DC",
"version": "版本",
"customerMaterialNo": "客戶料號",
"customerBatchNo": "客戶批號",
"machineNo": "機臺編號",
"station": "站別",
"wpnlNo": "WPNL 號",
"spnlNo": "SPNL 號",
"pcsNo": "PCS 號",
"barcode": "Bacode",
"defectRate": "不良率",
"scrapRate": "報廢率",
"ipqc": "IPQC",
"oqcRejectRate": "OQC 批退率",
"mrbScrapRate": "MRB 報廢率",
"materialException": "原物料異常",
"eimAlarm": "設備 A 級告警數",
"mesRepair": "MES 設備維修記錄",
"potionOOS": "藥水 OOS 異常點數",
"potionOOC": "藥水 OOC 異常點數",
"productOOS": "產品 OOS 異常點數",
"productOOC": "產品 OOC 異常點數",
"majorException": "重大異常",
"rework": "重工",
"exceptionHandle": "異常處置",
"complaint": "客訴",
"onlyException": "只看異常",
"all": "ALL",
"query": "查詢",
"stationSelection": "站別選擇",
"stationName": "站別名稱",
"close": "關閉",
"clear": "清除",
"confirm": "確認",
"equipmentAlarmDetails": "設備 A 級告警明細",
"mesRepairRecords": "MES 設備維修記錄"
},
"en-US": {
"productionOrder": "Production Order",
"shipmentOrder": "Shipment Order",
"date": "Date",
"materialNo": "Material No",
"batchNo": "Batch No",
"dc": "DC",
"version": "Version",
"customerMaterialNo": "Customer Material No",
"customerBatchNo": "Customer Batch No",
"machineNo": "Machine No",
"station": "Station",
"wpnlNo": "WPNL No",
"spnlNo": "SPNL No",
"pcsNo": "PCS No",
"barcode": "Barcode",
"defectRate": "Defect Rate",
"scrapRate": "Scrap Rate",
"ipqc": "IPQC",
"oqcRejectRate": "OQC Reject Rate",
"mrbScrapRate": "MRB Scrap Rate",
"materialException": "Material Exception",
"eimAlarm": "Equipment A Alarm Count",
"mesRepair": "MES Repair Records",
"potionOOS": "Potion OOS Exception Points",
"potionOOC": "Potion OOC Exception Points",
"productOOS": "Product OOS Exception Points",
"productOOC": "Product OOC Exception Points",
"majorException": "Major Exception",
"rework": "Rework",
"exceptionHandle": "Exception Handle",
"complaint": "Complaint",
"onlyException": "Only Exception",
"all": "ALL",
"query": "Query",
"stationSelection": "Station Selection",
"stationName": "Station Name",
"close": "Close",
"clear": "Clear",
"confirm": "Confirm",
"equipmentAlarmDetails": "Equipment A Alarm Details",
"mesRepairRecords": "MES Repair Records"
}
};
```
#### 编写切换语言函数
```javascript
// 当前语言状态,默认为中文
var currentLang = localStorage.getItem('language') || 'zh-CN';
// 切换语言函数
function switchLanguage(lang) {
currentLang = lang;
localStorage.setItem('language', lang);
// 遍历所有带有data-i18n属性的元素
$('[data-i18n]').each(function() {
var key = $(this).data('i18n');
$(this).text(langResources[lang][key]);
});
// 更新按钮文本
if (lang === 'zh-CN') {
$('#langSwitch').text('English');
} else {
$('#langSwitch').text('中文');
}
}
// 页面加载时应用语言
$(document).ready(function() {
switchLanguage(currentLang);
// 绑定切换按钮事件
$('#langSwitch').click(function() {
if (currentLang === 'zh-CN') {
switchLanguage('en-US');
} else {
switchLanguage('zh-CN');
}
});
});
```
#### 修改HTML元素,添加data-i18n属性
例如:
```html
<span class="input-group-text search-span" data-i18n="productionOrder">生產單號</span>
<input id="base-id" name="base-id" type="text" class="form-control" placeholder="" data-i18n-placeholder="productionOrder" />
```
注意:对于placeholder,我们使用`data-i18n-placeholder`,同样需要在切换语言时更新。
修改切换语言函数以处理placeholder:
```javascript
function switchLanguage(lang) {
currentLang = lang;
localStorage.setItem('language', lang);
// 更新文本内容
$('[data-i18n]').each(function() {
var key = $(this).data('i18n');
$(this).text(langResources[lang][key]);
});
// 更新placeholder
$('[data-i18n-placeholder]').each(function() {
var key = $(this).data('i18n-placeholder');
$(this).attr('placeholder', langResources[lang][key]);
});
// 更新按钮文本
if (lang === 'zh-CN') {
$('#langSwitch').text('English');
} else {
$('#langSwitch').text('中文');
}
}
```
### 完整代码整合
由于原页面代码较长,这里只展示修改的部分。在`<body>`开始处添加语言切换按钮,并在`<script>`标签中添加上述语言切换代码。
注意:需要为页面中所有需要翻译的文本添加`data-i18n`属性,并为输入框的placeholder添加`data-i18n-placeholder`属性。
### 示例修改
以生产单号为例:
```html
<div class="input-group">
<span class="input-group-text search-span" data-i18n="productionOrder">生產單號</span>
<input id="base-id" name="base-id" type="text" class="form-control" data-i18n-placeholder="productionOrder" />
</div>
```
### 注意事项
1. 语言资源对象需要包含页面中所有需要翻译的文本。
2. 切换语言后,动态生成的内容(如表格头部)可能也需要翻译,需要在生成时调用翻译函数或重新生成。
3. 对于固定文本(如按钮、标签等)通过上述方法处理,对于从服务器返回的数据(如表格内容),通常不需要翻译,因为服务器返回的数据已经是用户需要的语言(或者根据用户语言设置返回相应的数据)。
由于时间限制,这里只实现了静态文本的切换。对于动态生成的文本(例如通过AJAX加载的表格表头),需要在生成时根据当前语言设置文本。
### 修改动态生成的文本
例如,在`loadDataTable`函数中,表头是动态生成的,我们需要根据当前语言来设置表头文本。我们可以将表头的key也定义在语言资源中,然后根据当前语言获取对应的文本。
在语言资源对象中添加表头文本:
```javascript
"zh-CN": {
// ... 其他
"header1": "生產單號",
"header2": "料號",
// ...
},
"en-US": {
"header1": "Production Order",
"header2": "Material No",
// ...
}
```
然后在生成表头时:
```javascript
$.each(result.data.head, function (i, n) {
// 假设n是资源key,如'header1'
var translated = langResources[currentLang][n] || n;
$('#table_head_id').append('<th class="text-center">' + translated + '</th>');
});
```
注意:这需要服务器返回的表头数据是资源key,而不是具体的文本。或者服务器根据当前语言返回对应的文本(通过请求参数传递当前语言)。
### 总结
我们通过以下步骤实现了中英文切换:
1. 定义语言资源对象。
2. 为静态元素添加翻译标识。
3. 编写切换语言的函数,并保存语言状态。
4. 添加切换按钮。
5. 处理动态内容的翻译。
由于原页面代码较长,需要修改的地方较多,请根据实际情况调整。
§§相关问题§§:
1. 如何实现多语言切换的Vue版本?
2. 如何将语言资源存储在单独的文件中?
3. 如何通过后端实现动态内容的翻译?
4. 如何实现浏览器的语言自动检测?</think>## 解决中英文页面切换问题
根据提供的代码,我发现页面需要实现中英文切换功能。以下是完整的解决方案,包括代码实现和解释:
### 解决方案步骤
1. **创建语言资源文件**
2. **实现语言切换机制**
3. **修改页面元素以支持多语言**
4. **添加语言切换按钮**
### 完整代码实现
#### 1. 在 `<head>` 中添加语言资源文件引用
```html
<!-- 添加语言资源文件 -->
<script type="text/javascript" src="../js/lang-resource.js"></script>
```
#### 2. 创建语言资源文件 `lang-resource.js`
```javascript
// 语言资源对象
const langResources = {
"zh-CN": {
"productionOrder": "生產單號",
"shipmentOrder": "出貨單號",
"date": "日期",
"materialNo": "料號",
"batchNo": "批號",
"dc": "DC",
"version": "版本",
"customerMaterialNo": "客戶料號",
"customerBatchNo": "客戶批號",
"machineNo": "機臺編號",
"station": "站別",
"wpnlNo": "WPNL 號",
"spnlNo": "SPNL 號",
"pcsNo": "PCS 號",
"barcode": "Bacode",
"defectRate": "不良率",
"scrapRate": "報廢率",
"ipqc": "IPQC",
"oqcRejectRate": "OQC 批退率",
"mrbScrapRate": "MRB 報廢率",
"materialException": "原物料異常",
"eimAlarm": "設備 A 級告警數",
"mesRepair": "MES 設備維修記錄",
"potionOOS": "藥水 OOS 異常點數",
"potionOOC": "藥水 OOC 異常點數",
"productOOS": "產品 OOS 異常點數",
"productOOC": "產品 OOC 異常點數",
"majorException": "重大異常",
"rework": "重工",
"exceptionHandle": "異常處置",
"complaint": "客訴",
"onlyException": "只看異常",
"all": "ALL",
"query": "查詢",
"stationSelection": "站別選擇",
"stationName": "站別名稱",
"close": "關閉",
"clear": "清除",
"confirm": "確認",
"equipmentAlarmDetails": "設備 A 級告警明細",
"mesRepairRecords": "MES 設備維修記錄"
},
"en-US": {
"productionOrder": "Production Order",
"shipmentOrder": "Shipment Order",
"date": "Date",
"materialNo": "Material No",
"batchNo": "Batch No",
"dc": "DC",
"version": "Version",
"customerMaterialNo": "Customer Material No",
"customerBatchNo": "Customer Batch No",
"machineNo": "Machine No",
"station": "Station",
"wpnlNo": "WPNL No",
"spnlNo": "SPNL No",
"pcsNo": "PCS No",
"barcode": "Barcode",
"defectRate": "Defect Rate",
"scrapRate": "Scrap Rate",
"ipqc": "IPQC",
"oqcRejectRate": "OQC Reject Rate",
"mrbScrapRate": "MRB Scrap Rate",
"materialException": "Material Exception",
"eimAlarm": "Equipment A Alarm Count",
"mesRepair": "MES Repair Records",
"potionOOS": "Potion OOS Exception Points",
"potionOOC": "Potion OOC Exception Points",
"productOOS": "Product OOS Exception Points",
"productOOC": "Product OOC Exception Points",
"majorException": "Major Exception",
"rework": "Rework",
"exceptionHandle": "Exception Handle",
"complaint": "Complaint",
"onlyException": "Only Exception",
"all": "ALL",
"query": "Query",
"stationSelection": "Station Selection",
"stationName": "Station Name",
"close": "Close",
"clear": "Clear",
"confirm": "Confirm",
"equipmentAlarmDetails": "Equipment A Alarm Details",
"mesRepairRecords": "MES Repair Records"
}
};
// 当前语言状态
let currentLang = localStorage.getItem('language') || 'zh-CN';
// 获取翻译
function getTranslation(key) {
return langResources[currentLang][key] || key;
}
```
#### 3. 修改页面元素以支持多语言
在 HTML 中为需要翻译的元素添加 `data-i18n` 属性:
```html
<!-- 示例: -->
<span class="input-group-text search-span" data-i18n="productionOrder">生產單號</span>
<input id="base-id" name="base-id" type="text" class="form-control" data-i18n-placeholder="productionOrder" />
```
#### 4. 添加语言切换按钮
在 `<form>` 上方添加语言切换按钮:
```html
<div class="row row-div-10 justify-content-end">
<div class="col-auto">
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-primary active" id="zhBtn">中文</button>
<button type="button" class="btn btn-outline-primary" id="enBtn">English</button>
</div>
</div>
</div>
```
#### 5. 实现语言切换功能
在 `<script>` 标签中添加以下代码:
```javascript
// 语言切换函数
function switchLanguage(lang) {
currentLang = lang;
localStorage.setItem('language', lang);
// 更新文本内容
$('[data-i18n]').each(function() {
var key = $(this).data('i18n');
$(this).text(getTranslation(key));
});
// 更新placeholder
$('[data-i18n-placeholder]').each(function() {
var key = $(this).data('i18n-placeholder');
$(this).attr('placeholder', getTranslation(key));
});
// 更新按钮文本
$('#submit-btn').text(getTranslation('query'));
$('#search-btn').text(getTranslation('query'));
// 更新模态框标题
$('#station-modal .modal-title').text(getTranslation('stationSelection'));
$('#station-div input').next('label').each(function() {
$(this).text($(this).attr('for'));
});
}
// 页面加载时应用语言
$(function () {
// 应用当前语言
switchLanguage(currentLang);
// 绑定语言切换按钮
$('#zhBtn').click(function() {
switchLanguage('zh-CN');
$(this).addClass('active');
$('#enBtn').removeClass('active');
});
$('#enBtn').click(function() {
switchLanguage('en-US');
$(this).addClass('active');
$('#zhBtn').removeClass('active');
});
// 设置初始按钮状态
if (currentLang === 'zh-CN') {
$('#zhBtn').addClass('active');
} else {
$('#enBtn').addClass('active');
}
// ...其他初始化代码...
});
```
#### 6. 处理动态内容的多语言支持
对于动态生成的内容(如表格表头),需要在生成时应用语言设置:
```javascript
function loadDataTable() {
// ...其他代码...
$('#search_form').ajaxSubmit({
success: function (result) {
// ...其他代码...
// 重建表头 - 应用多语言
$('#table_head_id').empty();
$.each(result.data.head, function (i, n) {
// 假设表头键值在资源文件中定义
var translated = getTranslation(n) || n;
$('#table_head_id').append('<th class="text-center">' + translated + '</th>');
});
// ...其他代码...
}
});
}
```
### 关键实现说明
1. **语言资源管理**:
- 使用 `langResources` 对象存储所有语言文本
- 支持中英文两种语言(可扩展更多语言)
2. **语言切换机制**:
- 使用 `switchLanguage()` 函数更新界面文本
- 通过 `localStorage` 保存用户选择的语言
- 页面加载时自动应用上次选择的语言
3. **元素标记**:
- 使用 `data-i18n` 属性标记需要翻译的文本元素
- 使用 `data-i18n-placeholder` 标记输入框的占位符
4. **动态内容处理**:
- 表格表头等动态内容在生成时调用 `getTranslation()`
- 模态框内容在显示时应用当前语言
5. **按钮状态管理**:
- 使用 Bootstrap 的按钮组实现切换效果
- 当前语言按钮保持激活状态
### 额外优化建议
1. **服务器端多语言支持**:
```javascript
// 在AJAX请求中添加语言参数
$('#search_form').ajaxSubmit({
data: { lang: currentLang },
// ...
});
```
2. **日期格式化适配**:
```javascript
// 在日期选择器中适配语言
$('#start-time').datetimepicker({
format: 'Y-m-d H:i',
step: 1,
lang: currentLang === 'zh-CN' ? 'zh' : 'en'
});
```
3. **DataTables 本地化**:
```javascript
table = $('#table_id').DataTable({
// ...
language: {
url: `../js/datatables-${currentLang}.json`
}
});
```
4. **工具提示本地化**:
```javascript
// 更新工具提示文本
$('[data-bs-toggle="tooltip"]').each(function() {
var key = $(this).data('bs-title');
if (key) {
$(this).attr('data-bs-title', getTranslation(key));
}
});
```