4-20ma和工程值转换工具

*{box-sizing:border-box;margin:0;padding:0;font-family:"Microsoft YaHei",sans-serif}

body{max-width:1100px;margin:20px auto;padding:0 15px;background:#f3f6fa}

.container{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}

@media(max-width:768px){.container{grid-template-columns:1fr}}

.card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 1px 8px #00000012}

h2{text-align:center;color:#2a3442;margin-bottom:18px;font-size:20px}

h3{margin:16px 0 10px;color:#333;font-size:16px}

.group{margin-bottom:14px}

label{display:block;margin-bottom:5px;color:#444;font-weight:500}

input,textarea{width:100%;padding:9px 12px;border:1px solid #d0d7e3;border-radius:6px;font-size:15px;outline:0}

input:focus,textarea:focus{border-color:#2b7cd3}

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

.result-box{padding:12px;background:#e8f3ff;border-radius:6px;margin-top:8px;font-weight:bold;color:#1c4b82}

.percent{color:#238547;margin-left:12px}

.warn{color:#dc3545 !important;}

.btn{background:#2b7cd3;color:#fff;border:none;padding:7px 12px;border-radius:5px;cursor:pointer;font-size:14px}

.btn:hover{background:#2068b9}

.btn-danger{background:#dc3545}

.btn-danger:hover{background:#bb2d3b}

.btn-success{background:#28a745}

.btn-success:hover{background:#218838}

.divider{height:1px;background:#e2e8f0;margin:22px 0}

table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}

th,td{border:1px solid #dee2e6;padding:8px;text-align:center}

th{background:#f1f5fb}

.record-wrap{max-height:320px;overflow:auto}

.oper-bar{display:flex;gap:8px;margin:10px 0}

.tip{font-size:12px;color:#666;margin-top:4px}

.set-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

基础互转（断线检测+单位+小数位）

量程下限 (4mA对应值)

量程上限 (20mA对应值)

工程值单位

小数保留位数(1~6)

输入电流 mA

工程值：-- 占比：0.00%

保存本条记录

复制结果

输入工程值

电流：-- mA 占比：0.00%

保存本条记录

复制结果

批量转换

批量输入（每行1个电流mA，自动转工程值+百分比）

批量计算

全部存入记录

全部转换记录

导出CSV文件

清空全部记录

电流(mA)

工程值

单位

百分比(%)

状态

// 全局记录数组

let recordList = [];

const tableTbody = document.querySelector("#recordTable tbody");

// 获取全局配置

function getConfig(){

const min = parseFloat(document.getElementById("minRange").value) || 0;

const max = parseFloat(document.getElementById("maxRange").value) || 100;

const span = max - min;

const unit = document.getElementById("unitText").value.trim();

const dec = parseInt(document.getElementById("decimalNum").value) || 2;

const decimal = Math.max(1, Math.min(6, dec));

return {min,max,span,unit,decimal};

}

// 判断电流是否断线异常

function isAbnormalCurrent(curr){

return curr < 4 || curr > 20;

}

// 电流转工程值、百分比

function currToProc(curr){

const {min,max,span,decimal} = getConfig();

const proc = min + span * (curr - 4) / 16;

const pct = ((curr - 4)/16 * 100);

return {

proc: proc.toFixed(decimal),

pct: pct.toFixed(decimal)

};

}

// 工程值转电流、百分比

function procToCurr(proc){

const {min,max,span,decimal} = getConfig();

const curr = 4 + 16 * (proc - min) / span;

const pct = ((proc - min)/span * 100);

return {

curr: curr.toFixed(decimal),

pct: pct.toFixed(decimal)

};

}

// 实时刷新电流转换

function refreshCurrView(){

const {unit} = getConfig();

const curr = parseFloat(document.getElementById("currIn").value);

const box = document.getElementById("currResult");

if(isNaN(curr)){

box.innerHTML = `工程值：-- ${unit} 占比：0.00%`;

box.className = "result-box";

return;

}

const res = currToProc(curr);

let html = `工程值：${res.proc} ${unit} 占比：${res.pct}%`;

box.className = "result-box";

if(isAbnormalCurrent(curr)){

box.classList.add("warn");

html += " 【断线异常】";

}

box.innerHTML = html;

}

// 实时刷新工程值转换

function refreshProcView(){

const {unit,decimal} = getConfig();

const proc = parseFloat(document.getElementById("procIn").value);

const box = document.getElementById("procResult");

if(isNaN(proc)){

box.innerHTML = `电流：-- mA 占比：0.00%`;

box.className = "result-box";

return;

}

const res = procToCurr(proc);

const currVal = parseFloat(res.curr);

let html = `电流：${res.curr} mA 占比：${res.pct}%`;

box.className = "result-box";

if(isAbnormalCurrent(currVal)){

box.classList.add("warn");

html += " 【断线异常】";

}

box.innerHTML = html;

}

// 绑定所有输入监听

["minRange","maxRange","unitText","decimalNum","currIn","procIn"].forEach(id=>{

document.getElementById(id).addEventListener("input",()=>{

refreshCurrView();

refreshProcView();

})

})

// 保存电流转换记录

function saveCurrRecord(){

const {unit} = getConfig();

const curr = parseFloat(document.getElementById("currIn").value);

if(isNaN(curr)) return alert("请输入有效电流");

const r = currToProc(curr);

const status = isAbnormalCurrent(curr) ? "异常" : "正常";

recordList.push({

curr:curr.toFixed(getConfig().decimal),

proc:r.proc,

unit:unit,

pct:r.pct,

status:status

});

renderRecord();

}

// 保存工程值转换记录

function saveProcRecord(){

const {unit,decimal} = getConfig();

const proc = parseFloat(document.getElementById("procIn").value);

if(isNaN(proc)) return alert("请输入有效工程值");

const r = procToCurr(proc);

const currVal = parseFloat(r.curr);

const status = isAbnormalCurrent(currVal) ? "异常" : "正常";

recordList.push({

curr:r.curr,

proc:proc.toFixed(decimal),

unit:unit,

pct:r.pct,

status:status

});

renderRecord();

}

// 渲染记录表格

function renderRecord(){

tableTbody.innerHTML = "";

recordList.forEach(item=>{

const tr = document.createElement("tr");

let warnTd = item.status === "异常" ? 'style="color:red"' : "";

tr.innerHTML = `

${item.curr}

${item.proc}

${item.unit}

${item.pct}

${item.status}

`;

tableTbody.appendChild(tr);

})

}

// 清空所有记录

function clearAllRecord(){

recordList = [];

renderRecord();

}

// 复制结果

function copyCurr(){

const txt = document.getElementById("currResult").innerText.trim();

navigator.clipboard.writeText(txt).then(()=>alert("已复制："+txt))

}

function copyProc(){

const txt = document.getElementById("procResult").innerText.trim();

navigator.clipboard.writeText(txt).then(()=>alert("已复制："+txt))

}

// 批量计算

function calcBatch(){

const {unit} = getConfig();

const text = document.getElementById("batchInput").value.trim();

const lines = text.split("\n").filter(v=>v.trim()!="");

let html = "电流(mA) 工程值 单位 百分比 状态

";

lines.forEach(line=>{

const c = parseFloat(line.trim());

if(isNaN(c)) return;

const r = currToProc(c);

const status = isAbnormalCurrent(c) ? "异常" : "正常";

const red = isAbnormalCurrent(c) ? 'style="color:red"' : "";

html += `

${c}

${r.proc}

${unit}

${r.pct}%

${status}

`;

})

html += "";

document.getElementById("batchOut").innerHTML = html;

}

// 批量存入记录

function saveAllBatch(){

const {unit,decimal} = getConfig();

const text = document.getElementById("batchInput").value.trim();

const lines = text.split("\n").filter(v=>v.trim()!="");

lines.forEach(line=>{

const c = parseFloat(line.trim());

if(isNaN(c)) return;

const r = currToProc(c);

const status = isAbnormalCurrent(c) ? "异常" : "正常";

recordList.push({

curr:c.toFixed(decimal),

proc:r.proc,

unit:unit,

pct:r.pct,

status:status

});

})

renderRecord();

alert("批量数据已存入记录表格");

}

// 导出CSV

function exportCSV(){

if(recordList.length === 0) return alert("暂无记录可导出");

let csv = "电流(mA),工程值,单位,百分比(%),运行状态\n";

recordList.forEach(item=>{

csv += `${item.curr},${item.proc},${item.unit},${item.pct},${item.status}\n`;

})

const blob = new Blob([csv],{type:"text/csv;charset=utf-8"});

const a = document.createElement("a");

a.href = URL.createObjectURL(blob);

a.download = "4-20mA转换记录.csv";

a.click();

URL.revokeObjectURL(a.href);

}

// 页面初始化刷新

refreshCurrView();

refreshProcView();