<!--输入时间预测料温-->
<div id="target_time" style="position: absolute; left: 900px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标时间</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测料温</label>
</div>
</div>
<div id="target_time_input" style="position: absolute; left: 1000px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 60px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标时间</label>
<input type="datetime-local" id="id_target_time" value="" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px;">
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例3 (当前时间)</label>
<label style="margin-top: 20px; font-size: 20px;">当前时间</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例4 (出炉时间+50小时)</label>
<label style="margin-top: 20px; font-size: 20px;">出炉时间+50小时</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
</body>
</html>
改进代码，需求：
1，根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置y=id_target_temp, y=50, y=40, 分别求x， 分别保存为变量x1, x2, x3; 然后再分别求id_init_tmp+x, 分别保存为变量time1, time2, time3（格式为“年-月-日 时-分”）
2， 将id_target_time 的默认值设置为当前时间+10小时，如果输入了id_target_time 则更新该值；
3，生成变量time2=当前时间，time3=出炉时间+50小时，（格式为“年-月-日 时-分”）
4，生成变量x1=id_target_time - init_time, x2 = time2-init_time, x3 = time3-init_time, 单位为小时， 效果类似python的(pd.Timestamp(time) - pd.Timestamp(initial_time)).total_seconds() / 3600， 其中pd为pandas模块
5，这些变量都随输入框的值的变化而变化
6，根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置x=x1, x=x2, x=x3, 分别求y，分别保存为变量y1, y2, y3根据你的需求，我为你编写了以下的JavaScript代码。这段代码将在输入框的值发生变化时，更新你所需要的变量，并且会在页面加载完成后进行初始化。
// 在这里定义你需要的变量
var x1, x2, x3, time1, time2, time3, y1, y2, y3;
// 更新函数
function updateFormula() {
// ... 你原来的代码 ...
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置y=id_target_temp, y=50, y=40, 分别求x
x1 = Math.log((document.getElementById('id_target_temp').value - ambi_temp) / (init_temp - ambi_temp)) / window.k;
x2 = Math.log((50 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
x3 = Math.log((40 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
// 然后再分别求id_init_tmp+x, 分别保存为变量time1, time2, time3（格式为“年-月-日 时-分”）
var initDate = new Date(init_time);
time1 = new Date(initDate.getTime() + x1 * 60 * 60 * 1000).toISOString().slice(0, 16);
time2 = new Date(initDate.getTime() + x2 * 60 * 60 * 1000).toISOString().slice(0, 16);
time3 = new Date(initDate.getTime() + x3 * 60 * 60 * 1000).toISOString().slice(0, 16);
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置x=x1, x=x2, x=x3, 分别求y
y1 = (init_temp - ambi_temp) * Math.exp(window.k * x1) + ambi_temp;
y2 = (init_temp - ambi_temp) * Math.exp(window.k * x2) + ambi_temp;
y3 = (init_temp - ambi_temp) * Math.exp(window.k * x3) + ambi_temp;
}
function updateValue(elementId, elementValue) {
// ... 你原来的代码 ...
// 将id_target_time 的默认值设置为当前时间+10小时，如果输入了id_target_time 则更新该值；
if (elementId === 'id_target_time' && elementValue === '') {
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
}
// 更新函数
updateFormula();
}
window.onload = function() {
// ... 你原来的代码 ...
// 更新函数
updateFormula();
}这段代码应该可以满足你的需求。如果有任何问题，或者需要进一步的帮助，请随时告诉我！
<!DOCTYPE html>
<html>
<head>
<style>
#floatWindow {
position: absolute;
top: 50px;
left: 100px;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
<option value="自然冷却" selected>自然冷却</option>
<option value="单个大风机">单个大风机</option>
<option value="单4风机">单4风机</option>
<option value="大风机+单4风机">大风机+单4风机</option>
<option value="双4风机">双4风机</option>
</select>
<div id="floatWindow"></div>
<!--添加cavas标题-->
<div id="formula" style="position: absolute; left: 600px; top: 70px; font-size: 20px;"></div>
<canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
<!-- 添加横坐标标签 -->
<span style="position: absolute; left: 750px; top: 500px; font-size: 16px;">出炉时长（小时）</span>
<!-- 添加纵坐标标签 -->
<span style="position: absolute; left: 330px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">料温（摄氏度）</span>
<script>
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
var init_time = currentDate.toISOString().slice(0, 16);
var init_temp = 310;
var ambi_temp = 36;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
var z6 = 19.5;
var x1, x2, x3, time1, time2, time3, y1, y2, y3;
//更新函数
function updateFormula() {
var formulaDiv = document.getElementById('formula');
formulaDiv.innerHTML = "料温 = (" + init_temp + " - " + ambi_temp + ") * e^(" + window.k.toFixed(8) + " * 出炉时长) + " + ambi_temp;
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置y=id_target_temp, y=50, y=40, 分别求x
x1 = Math.log((document.getElementById('id_target_temp').value - ambi_temp) / (init_temp - ambi_temp)) / window.k;
x2 = Math.log((50 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
x3 = Math.log((40 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
// 然后再分别求id_init_tmp+x, 分别保存为变量time1, time2, time3（格式为“年-月-日 时-分”）
var initDate = new Date(init_time);
time1 = new Date(initDate.getTime() + x1 * 60 * 60 * 1000).toISOString().slice(0, 16);
time2 = new Date(initDate.getTime() + x2 * 60 * 60 * 1000).toISOString().slice(0, 16);
time3 = new Date(initDate.getTime() + x3 * 60 * 60 * 1000).toISOString().slice(0, 16);
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置x=x1, x=x2, x=x3, 分别求y
y1 = (init_temp - ambi_temp) * Math.exp(window.k * x1) + ambi_temp;
y2 = (init_temp - ambi_temp) * Math.exp(window.k * x2) + ambi_temp;
y3 = (init_temp - ambi_temp) * Math.exp(window.k * x3) + ambi_temp;
}
function changeFunType(selectObject) {
fun_type = selectObject.value;
switch(fun_type) {
case '自然冷却':
z2 = z3 = z4 = z5 = 0;
break;
case '单个大风机':
z2 = 1;
z3 = z4 = z5 = 0;
break;
case '单4风机':
z3 = 1;
z2 = z4 = z5 = 0;
break;
case '大风机+单4风机':
z4 = 1;
z2 = z3 = z5 = 0;
break;
case '双4风机':
z5 = 1;
z2 = z3 = z4 = 0;
break;
}
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
function calculateK() {
var k1 = 0.03691591;
var k2 = -0.01086697;
var k3 = -0.02207111;
var k4 = -0.04971315;
var k5 = -0.06927802;
var k6 = -0.00682166;
window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
}
function drawGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
for (var i = 0; i <= canvas.width; i += 40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
}
for (var j = 0; j <= canvas.height; j += 40) {
ctx.beginPath();
ctx.moveTo(0, j);
ctx.lineTo(canvas.width, j);
ctx.stroke();
ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
}
ctx.strokeStyle = 'blue';
ctx.beginPath();
for (var x = 0; x <= 70; x += 1) {
var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
if (x === 0) {
ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
} else {
ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
}
}
ctx.stroke();
}
function updateValue(elementId, elementValue) {
switch(elementId) {
case 'id_width':
width = parseFloat(elementValue);
break;
case 'id_weight':
weight = parseFloat(elementValue);
break;
case 'id_init_time':
init_time = elementValue;
break;
case 'id_init_temp':
init_temp = parseFloat(elementValue);
break;
case 'id_ambi_temp':
ambi_temp = parseFloat(elementValue);
break;
}
var density = 2.7 * Math.pow(10, -6);
var inner_radius = 665;
var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
z6 = surface_area / weight * Math.pow(10, 4);
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
// 将id_target_time 的默认值设置为当前时间+10小时，如果输入了id_target_time 则更新该值；
if (elementId === 'id_target_time' && elementValue === '') {
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
}
updateFormula(); // 更新函数
drawGraph();
}
window.onload = function() {
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
</script>
<div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
<div style="margin-bottom: 20px;">
<label for="id_width" style="font-size: 20px;">宽度mm</label><br>
<input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_weight" style="font-size: 20px;">重量kg</label><br>
<input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
<input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
<input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
<input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
</div>
<!--输入料温预测时间-->
<div id="target_temp" style="position: absolute; left: 100px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标料温</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时间</label>
</div>
</div>
<div id="target_temp_input" style="position: absolute; left: 300px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标料温</label>
<input type="text" id="id_target_temp" value="45" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px; width: 50px;">
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例1 (50摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">50</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例2 (40摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">40</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
<!--输入时间预测料温-->
<div id="target_time" style="position: absolute; left: 900px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标时间</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测料温</label>
</div>
</div>
<div id="target_time_input" style="position: absolute; left: 1000px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 60px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标时间</label>
<input type="datetime-local" id="id_target_time" value="" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px;">
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例3 (当前时间)</label>
<label style="margin-top: 20px; font-size: 20px;">当前时间</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例4 (出炉时间+50小时)</label>
<label style="margin-top: 20px; font-size: 20px;">出炉时间+50小时</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
</body>
</html>上一段代码有一些地方写错了，我重写：
<!--输入时间预测料温-->
<div id="target_time" style="position: absolute; left: 900px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标时间</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测料温</label>
</div>
</div>
<div id="target_time_input" style="position: absolute; left: 1000px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 60px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标时间</label>
<input type="datetime-local" id="id_target_time" value="" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px;">
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例3 (当前时间)</label>
<label style="margin-top: 20px; font-size: 20px;">当前时间</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例4 (出炉时间+50小时)</label>
<label style="margin-top: 20px; font-size: 20px;">出炉时间+50小时</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
</body>
</html>
改进代码，需求：
1，根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置y=id_target_temp, y=50, y=40, 分别求x， 分别保存为变量pred_x1, pred_x2, pred_x3; 然后再分别求id_init_tmp+pred_x1, id_init_tmp+pred_x2, id_init_tmp+pred_x3, 分别保存为变量pred_time1, pred_time2, pred_time3（格式为“年-月-日 时-分”）
2， 将id_target_time 的默认值设置为当前时间+10小时，如果输入了id_target_time 则更新该值；
3，生成变量target_time2=当前时间，target_time3=init_time+50小时，（格式为“年-月-日 时-分”）
4，生成变量target_x1=id_target_time - init_time, target_x2 = target_time2-init_time, target_x3 = target_time3-init_time, 单位为小时， 效果类似python的(pd.Timestamp(time) - pd.Timestamp(initial_time)).total_seconds() / 3600， 其中pd为pandas模块
5，这些变量都随输入框的值的变化而变化
6，根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置x=target_x1, target_x=x2, target_x=x3, 分别求y，分别保存为变量pred_y1, pred_y2, pred_y3根据你的需求，我为你编写了以下的JavaScript代码。这段代码将在输入框的值发生变化时，更新你所需要的变量，并且会在页面加载完成后进行初始化。
```javascript
// 在这里定义你需要的变量
var pred_x1, pred_x2, pred_x3, pred_time1, pred_time2, pred_time3;
var target_x1, target_x2, target_x3, target_time2, target_time3;
var pred_y1, pred_y2, pred_y3;
// 更新函数
function updateFormula() {
// ... 你原来的代码 ...
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置y=id_target_temp, y=50, y=40, 分别求x
pred_x1 = Math.log((document.getElementById('id_target_temp').value - ambi_temp) / (init_temp - ambi_temp)) / window.k;
pred_x2 = Math.log((50 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
pred_x3 = Math.log((40 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
// 然后再分别求id_init_tmp+pred_x1, id_init_tmp+pred_x2, id_init_tmp+pred_x3, 分别保存为变量pred_time1, pred_time2, pred_time3（格式为“年-月-日 时-分”）
var initDate = new Date(init_time);
pred_time1 = new Date(initDate.getTime() + pred_x1 * 60 * 60 * 1000).toISOString().slice(0, 16);
pred_time2 = new Date(initDate.getTime() + pred_x2 * 60 * 60 * 1000).toISOString().slice(0, 16);
pred_time3 = new Date(initDate.getTime() + pred_x3 * 60 * 60 * 1000).toISOString().slice(0, 16);
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置x=target_x1, target_x=x2, target_x=x3, 分别求y
pred_y1 = (init_temp - ambi_temp) * Math.exp(window.k * target_x1) + ambi_temp;
pred_y2 = (init_temp - ambi_temp) * Math.exp(window.k * target_x2) + ambi_temp;
pred_y3 = (init_temp - ambi_temp) * Math.exp(window.k * target_x3) + ambi_temp;
}
function updateValue(elementId, elementValue) {
// ... 你原来的代码 ...
// 将id_target_time 的默认值设置为当前时间+10小时，如果输入了id_target_time 则更新该值；
if (elementId === 'id_target_time' && elementValue === '') {
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
}
// 更新函数
updateFormula();
}
window.onload = function() {
// ... 你原来的代码 ...
// 将id_target_time 的默认值设置为当前时间+10小时
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
// 更新函数
updateFormula();
}
```
这段代码应该可以满足你的需求。如果有任何问题，或者需要进一步的帮助，请随时告诉我！根据你的需求，我为你编写了以下的JavaScript代码。这段代码将在输入框的值发生变化时，更新你所需要的变量，并且会在页面加载完成后进行初始化。
// 在这里定义你需要的变量
var pred_x1, pred_x2, pred_x3, pred_time1, pred_time2, pred_time3;
var target_x1, target_x2, target_x3, target_time2, target_time3;
var pred_y1, pred_y2, pred_y3;
// 更新函数
function updateFormula() {
// ... 你原来的代码 ...
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置y=id_target_temp, y=50, y=40, 分别求x
pred_x1 = Math.log((document.getElementById('id_target_temp').value - ambi_temp) / (init_temp - ambi_temp)) / window.k;
pred_x2 = Math.log((50 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
pred_x3 = Math.log((40 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
// 然后再分别求id_init_tmp+pred_x1, id_init_tmp+pred_x2, id_init_tmp+pred_x3, 分别保存为变量pred_time1, pred_time2, pred_time3（格式为“年-月-日 时-分”）
var initDate = new Date(init_time);
pred_time1 = new Date(initDate.getTime() + pred_x1 * 60 * 60 * 1000).toISOString().slice(0, 16);
pred_time2 = new Date(initDate.getTime() + pred_x2 * 60 * 60 * 1000).toISOString().slice(0, 16);
pred_time3 = new Date(initDate.getTime() + pred_x3 * 60 * 60 * 1000).toISOString().slice(0, 16);
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置x=target_x1, target_x=x2, target_x=x3, 分别求y
pred_y1 = (init_temp - ambi_temp) * Math.exp(window.k * target_x1) + ambi_temp;
pred_y2 = (init_temp - ambi_temp) * Math.exp(window.k * target_x2) + ambi_temp;
pred_y3 = (init_temp - ambi_temp) * Math.exp(window.k * target_x3) + ambi_temp;
}
function updateValue(elementId, elementValue) {
// ... 你原来的代码 ...
// 将id_target_time 的默认值设置为当前时间+10小时，如果输入了id_target_time 则更新该值；
if (elementId === 'id_target_time' && elementValue === '') {
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
}
// 更新函数
updateFormula();
}
window.onload = function() {
// ... 你原来的代码 ...
// 将id_target_time 的默认值设置为当前时间+10小时
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
// 更新函数
updateFormula();
}这段代码应该可以满足你的需求。如果有任何问题，或者需要进一步的帮助，请随时告诉我！
<!DOCTYPE html>
<html>
<head>
<style>
#floatWindow {
position: absolute;
top: 50px;
left: 100px;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
<option value="自然冷却" selected>自然冷却</option>
<option value="单个大风机">单个大风机</option>
<option value="单4风机">单4风机</option>
<option value="大风机+单4风机">大风机+单4风机</option>
<option value="双4风机">双4风机</option>
</select>
<div id="floatWindow"></div>
<!--添加cavas标题-->
<div id="formula" style="position: absolute; left: 600px; top: 70px; font-size: 20px;"></div>
<canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
<!-- 添加横坐标标签 -->
<span style="position: absolute; left: 750px; top: 500px; font-size: 16px;">出炉时长（小时）</span>
<!-- 添加纵坐标标签 -->
<span style="position: absolute; left: 330px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">料温（摄氏度）</span>
<script>
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
var init_time = currentDate.toISOString().slice(0, 16);
var init_temp = 310;
var ambi_temp = 36;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
var z6 = 19.5;
// 在这里定义目标和预测变量
var pred_x1, pred_x2, pred_x3, pred_time1, pred_time2, pred_time3;
var target_x1, target_x2, target_x3, target_time2, target_time3;
var pred_y1, pred_y2, pred_y3;
//更新函数
function updateFormula() {
var formulaDiv = document.getElementById('formula');
formulaDiv.innerHTML = "料温 = (" + init_temp + " - " + ambi_temp + ") * e^(" + window.k.toFixed(8) + " * 出炉时长) + " + ambi_temp;
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置y=id_target_temp, y=50, y=40, 分别求x
pred_x1 = Math.log((document.getElementById('id_target_temp').value - ambi_temp) / (init_temp - ambi_temp)) / window.k;
pred_x2 = Math.log((50 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
pred_x3 = Math.log((40 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
// 然后再分别求id_init_tmp+pred_x1, id_init_tmp+pred_x2, id_init_tmp+pred_x3, 分别保存为变量pred_time1, pred_time2, pred_time3（格式为“年-月-日 时-分”）
var initDate = new Date(init_time);
pred_time1 = new Date(initDate.getTime() + pred_x1 * 60 * 60 * 1000).toISOString().slice(0, 16);
pred_time2 = new Date(initDate.getTime() + pred_x2 * 60 * 60 * 1000).toISOString().slice(0, 16);
pred_time3 = new Date(initDate.getTime() + pred_x3 * 60 * 60 * 1000).toISOString().slice(0, 16);
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置x=target_x1, target_x=x2, target_x=x3, 分别求y
pred_y1 = (init_temp - ambi_temp) * Math.exp(window.k * target_x1) + ambi_temp;
pred_y2 = (init_temp - ambi_temp) * Math.exp(window.k * target_x2) + ambi_temp;
}
function changeFunType(selectObject) {
fun_type = selectObject.value;
switch(fun_type) {
case '自然冷却':
z2 = z3 = z4 = z5 = 0;
break;
case '单个大风机':
z2 = 1;
z3 = z4 = z5 = 0;
break;
case '单4风机':
z3 = 1;
z2 = z4 = z5 = 0;
break;
case '大风机+单4风机':
z4 = 1;
z2 = z3 = z5 = 0;
break;
case '双4风机':
z5 = 1;
z2 = z3 = z4 = 0;
break;
}
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
function calculateK() {
var k1 = 0.03691591;
var k2 = -0.01086697;
var k3 = -0.02207111;
var k4 = -0.04971315;
var k5 = -0.06927802;
var k6 = -0.00682166;
window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
}
function drawGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
for (var i = 0; i <= canvas.width; i += 40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
}
for (var j = 0; j <= canvas.height; j += 40) {
ctx.beginPath();
ctx.moveTo(0, j);
ctx.lineTo(canvas.width, j);
ctx.stroke();
ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
}
ctx.strokeStyle = 'blue';
ctx.beginPath();
for (var x = 0; x <= 70; x += 1) {
var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
if (x === 0) {
ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
} else {
ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
}
}
ctx.stroke();
}
function updateValue(elementId, elementValue) {
switch(elementId) {
case 'id_width':
width = parseFloat(elementValue);
break;
case 'id_weight':
weight = parseFloat(elementValue);
break;
case 'id_init_time':
init_time = elementValue;
break;
case 'id_init_temp':
init_temp = parseFloat(elementValue);
break;
case 'id_ambi_temp':
ambi_temp = parseFloat(elementValue);
break;
}
var density = 2.7 * Math.pow(10, -6);
var inner_radius = 665;
var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
z6 = surface_area / weight * Math.pow(10, 4);
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
// 将id_target_time 的默认值设置为当前时间+10小时，如果输入了id_target_time 则更新该值；
if (elementId === 'id_target_time' && elementValue === '') {
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
}
updateFormula(); // 更新函数
drawGraph();
}
window.onload = function() {
calculateK();
// 将id_target_time 的默认值设置为当前时间+10小时
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
updateFormula(); // 更新函数
drawGraph();
}
</script>
<div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
<div style="margin-bottom: 20px;">
<label for="id_width" style="font-size: 20px;">宽度mm</label><br>
<input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_weight" style="font-size: 20px;">重量kg</label><br>
<input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
<input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
<input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
<input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
</div>
<!--输入料温预测时间-->
<div id="target_temp" style="position: absolute; left: 100px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标料温</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时间</label>
</div>
</div>
<div id="target_temp_input" style="position: absolute; left: 300px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标料温</label>
<input type="text" id="id_target_temp" value="45" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px; width: 50px;">
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例1 (50摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">50</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例2 (40摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">40</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
<!--输入时间预测料温-->
<div id="target_time" style="position: absolute; left: 900px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标时间</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测料温</label>
</div>
</div>
<div id="target_time_input" style="position: absolute; left: 1000px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 60px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标时间</label>
<input type="datetime-local" id="id_target_time" value="" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px;">
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例3 (当前时间)</label>
<label style="margin-top: 20px; font-size: 20px;">当前时间</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例4 (出炉时间+50小时)</label>
<label style="margin-top: 20px; font-size: 20px;">出炉时间+50小时</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
#floatWindow {
position: absolute;
top: 50px;
left: 100px;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
<option value="自然冷却" selected>自然冷却</option>
<option value="单个大风机">单个大风机</option>
<option value="单4风机">单4风机</option>
<option value="大风机+单4风机">大风机+单4风机</option>
<option value="双4风机">双4风机</option>
</select>
<div id="floatWindow"></div>
<!--添加cavas标题-->
<div id="formula" style="position: absolute; left: 600px; top: 70px; font-size: 20px;"></div>
<canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
<!-- 添加横坐标标签 -->
<span style="position: absolute; left: 750px; top: 500px; font-size: 16px;">出炉时长（小时）</span>
<!-- 添加纵坐标标签 -->
<span style="position: absolute; left: 330px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">料温（摄氏度）</span>
<script>
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
var init_time = currentDate.toISOString().slice(0, 16);
var init_temp = 310;
var ambi_temp = 36;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
var z6 = 19.5;
// 在这里定义目标和预测变量
var pred_x1, pred_x2, pred_x3, pred_time1, pred_time2, pred_time3;
var target_x1, target_x2, target_x3, target_time2, target_time3;
var pred_y1, pred_y2, pred_y3;
//更新函数
function updateFormula() {
var formulaDiv = document.getElementById('formula');
formulaDiv.innerHTML = "料温 = (" + init_temp + " - " + ambi_temp + ") * e^(" + window.k.toFixed(8) + " * 出炉时长) + " + ambi_temp;
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置y=id_target_temp, y=50, y=40, 分别求x
pred_x1 = Math.log((document.getElementById('id_target_temp').value - ambi_temp) / (init_temp - ambi_temp)) / window.k;
pred_x2 = Math.log((50 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
pred_x3 = Math.log((40 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
// 然后再分别求id_init_tmp+pred_x1, id_init_tmp+pred_x2, id_init_tmp+pred_x3, 分别保存为变量pred_time1, pred_time2, pred_time3（格式为“年-月-日 时-分”）
var initDate = new Date(init_time);
pred_time1 = new Date(initDate.getTime() + pred_x1 * 60 * 60 * 1000).toISOString().slice(0, 16);
pred_time2 = new Date(initDate.getTime() + pred_x2 * 60 * 60 * 1000).toISOString().slice(0, 16);
pred_time3 = new Date(initDate.getTime() + pred_x3 * 60 * 60 * 1000).toISOString().slice(0, 16);
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置x=target_x1, target_x=x2, target_x=x3, 分别求y
pred_y1 = (init_temp - ambi_temp) * Math.exp(window.k * target_x1) + ambi_temp;
pred_y2 = (init_temp - ambi_temp) * Math.exp(window.k * target_x2) + ambi_temp;
// 更新 pred_x1 的显示值
document.getElementById('pred_x1_value').textContent = pred_x1.toFixed(2);
// 更新 pred_time1 的显示值
document.getElementById('pred_time1_value').textContent = pred_time1;
// 更新 pred_x2 的显示值
document.getElementById('pred_x2_value').textContent = pred_x2.toFixed(2);
// 更新 pred_time2 的显示值
document.getElementById('pred_time2_value').textContent = pred_time2;
// 更新 pred_x3 的显示值
document.getElementById('pred_x3_value').textContent = pred_x3.toFixed(2);
// 更新 pred_time3 的显示值
document.getElementById('pred_time3_value').textContent = pred_time3;
/*
// 更新 target_x1 的显示值
document.getElementById('target_x1_value').textContent = target_x1.toFixed(2);
// 更新 pred_y1 的显示值
document.getElementById('pred_y1_value').textContent = pred_y1.toFixed(2);
*/
}
function changeFunType(selectObject) {
fun_type = selectObject.value;
switch(fun_type) {
case '自然冷却':
z2 = z3 = z4 = z5 = 0;
break;
case '单个大风机':
z2 = 1;
z3 = z4 = z5 = 0;
break;
case '单4风机':
z3 = 1;
z2 = z4 = z5 = 0;
break;
case '大风机+单4风机':
z4 = 1;
z2 = z3 = z5 = 0;
break;
case '双4风机':
z5 = 1;
z2 = z3 = z4 = 0;
break;
}
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
function calculateK() {
var k1 = 0.03691591;
var k2 = -0.01086697;
var k3 = -0.02207111;
var k4 = -0.04971315;
var k5 = -0.06927802;
var k6 = -0.00682166;
window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
}
function drawGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
for (var i = 0; i <= canvas.width; i += 40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
}
for (var j = 0; j <= canvas.height; j += 40) {
ctx.beginPath();
ctx.moveTo(0, j);
ctx.lineTo(canvas.width, j);
ctx.stroke();
ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
}
ctx.strokeStyle = 'blue';
ctx.beginPath();
for (var x = 0; x <= 70; x += 1) {
var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
if (x === 0) {
ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
} else {
ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
}
}
ctx.stroke();
}
function updateValue(elementId, elementValue) {
switch(elementId) {
case 'id_width':
width = parseFloat(elementValue);
break;
case 'id_weight':
weight = parseFloat(elementValue);
break;
case 'id_init_time':
init_time = elementValue;
break;
case 'id_init_temp':
init_temp = parseFloat(elementValue);
break;
case 'id_ambi_temp':
ambi_temp = parseFloat(elementValue);
break;
}
var density = 2.7 * Math.pow(10, -6);
var inner_radius = 665;
var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
z6 = surface_area / weight * Math.pow(10, 4);
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
// 将id_target_time 的默认值设置为当前时间+10小时，如果输入了id_target_time 则更新该值；
if (elementId === 'id_target_time' && elementValue === '') {
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
}
updateFormula(); // 更新函数
drawGraph();
}
window.onload = function() {
calculateK();
// 将id_target_time 的默认值设置为当前时间+10小时
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
updateFormula(); // 更新函数
drawGraph();
}
</script>
<div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
<div style="margin-bottom: 20px;">
<label for="id_width" style="font-size: 20px;">宽度mm</label><br>
<input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_weight" style="font-size: 20px;">重量kg</label><br>
<input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
<input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
<input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
<input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
</div>
<!--输入料温预测时间-->
<div id="target_temp" style="position: absolute; left: 100px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标料温</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测冷却时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测冷却时间</label>
</div>
</div>
<div id="target_temp_input" style="position: absolute; left: 300px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标料温</label>
<input type="text" id="id_target_temp" value="45" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px; width: 50px;">
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_x1_value"></span></label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_time1_value"></span></label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例1 (50摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">50</label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_x2_value"></span></label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_time2_value"></span></label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例2 (40摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">40</label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_x3_value"></span></label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_time3_value"></span></label>
</div>
</div>
</div>
<!--输入时间预测料温-->
<div id="target_time" style="position: absolute; left: 900px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标时间</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测料温</label>
</div>
</div>
<div id="target_time_input" style="position: absolute; left: 1000px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 60px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标时间</label>
<input type="datetime-local" id="id_target_time" value="" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px;">
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
<label style="margin-top: 20px; font-size: 20px;"><span id="target_x1_value"></span></label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_y1_value"></span></label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例3 (当前时间)</label>
<label style="margin-top: 20px; font-size: 20px;">当前时间</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例4 (出炉时间+50小时)</label>
<label style="margin-top: 20px; font-size: 20px;">出炉时间+50小时</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
#floatWindow {
position: absolute;
top: 50px;
left: 100px;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
<option value="自然冷却" selected>自然冷却</option>
<option value="单个大风机">单个大风机</option>
<option value="单4风机">单4风机</option>
<option value="大风机+单4风机">大风机+单4风机</option>
<option value="双4风机">双4风机</option>
</select>
<div id="floatWindow"></div>
<!--添加cavas标题-->
<div id="formula" style="position: absolute; left: 600px; top: 70px; font-size: 20px;"></div>
<canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
<!-- 添加横坐标标签 -->
<span style="position: absolute; left: 750px; top: 500px; font-size: 16px;">出炉时长（小时）</span>
<!-- 添加纵坐标标签 -->
<span style="position: absolute; left: 330px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">料温（摄氏度）</span>
<script>
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
// 获取当前日期
var currentDate = new Date();
// 获取本地时间和UTC之间的时差（以分钟为单位）
var timezoneOffset = currentDate.getTimezoneOffset() * 60 * 1000;
// 将时差加上8小时的毫秒数，得到中国当前时间
var chinaTime = new Date(currentDate.getTime() + timezoneOffset + 8 * 60 * 60 * 1000);
chinaTime_1 = chinaTime
chinaTime_1.setHours(0, 0, 0, 0);
var init_time = chinaTime_1.toISOString().slice(0, 16);
var init_temp = 310;
var ambi_temp = 36;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
var z6 = 19.5;
// 在这里定义目标和预测变量
var pred_x1, pred_x2, pred_x3, pred_time1, pred_time2, pred_time3;
var target_time2, target_time3;
var target_x1, target_x2, target_x3;
var pred_y1, pred_y2, pred_y3;
//更新函数
function updateFormula() {
var formulaDiv = document.getElementById('formula');
formulaDiv.innerHTML = "料温 = (" + init_temp + " - " + ambi_temp + ") * e^(" + window.k.toFixed(8) + " * 出炉时长) + " + ambi_temp;
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置y=id_target_temp, y=50, y=40, 分别求x
pred_x1 = Math.log((document.getElementById('id_target_temp').value - ambi_temp) / (init_temp - ambi_temp)) / window.k;
pred_x2 = Math.log((50 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
pred_x3 = Math.log((40 - ambi_temp) / (init_temp - ambi_temp)) / window.k;
// 然后再分别求id_init_tmp+pred_x1, id_init_tmp+pred_x2, id_init_tmp+pred_x3, 分别保存为变量pred_time1, pred_time2, pred_time3（格式为“年-月-日 时-分”）
var initDate = new Date(init_time);
pred_time1 = new Date(initDate.getTime() + pred_x1 * 60 * 60 * 1000).toISOString().slice(0, 16);
pred_time2 = new Date(initDate.getTime() + pred_x2 * 60 * 60 * 1000).toISOString().slice(0, 16);
pred_time3 = new Date(initDate.getTime() + pred_x3 * 60 * 60 * 1000).toISOString().slice(0, 16);
// 生成变量target_time2=当前时间，target_time3=init_time+50小时，（格式为“年-月-日 时-分”）
var target_currentDate = chinaTime
target_time2 = currentDate.toISOString().slice(0, 16);
var initDate = new Date(init_time);
target_time3 = new Date(initDate.getTime() + 50 * 60 * 60 * 1000).toISOString().slice(0, 16);
// 生成变量target_x1=id_target_time - init_time, target_x2 = target_time2-init_time, target_x3 = target_time3-init_time, 单位为小时
var id_target_time = new Date(document.getElementById('id_target_time').value);
target_x1 = (id_target_time.getTime() - initDate.getTime()) / (60 * 60 * 1000);
target_x2 = (currentDate.getTime() - initDate.getTime()) / (60 * 60 * 1000);
target_x3 = 50; // 因为target_time3=init_time+50小时
// 根据y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp; 分别设置x=target_x1, target_x=x2, target_x=x3, 分别求y
pred_y1 = (init_temp - ambi_temp) * Math.exp(window.k * target_x1) + ambi_temp;
pred_y2 = (init_temp - ambi_temp) * Math.exp(window.k * target_x2) + ambi_temp;
pred_y3 = (init_temp - ambi_temp) * Math.exp(window.k * target_x3) + ambi_temp;
// 更新 pred_x1 的显示值
document.getElementById('pred_x1_value').textContent = pred_x1.toFixed(2);
// 更新 pred_time1 的显示值
document.getElementById('pred_time1_value').textContent = pred_time1;
// 更新 pred_x2 的显示值
document.getElementById('pred_x2_value').textContent = pred_x2.toFixed(2);
// 更新 pred_time2 的显示值
document.getElementById('pred_time2_value').textContent = pred_time2;
// 更新 pred_x3 的显示值
document.getElementById('pred_x3_value').textContent = pred_x3.toFixed(2);
// 更新 pred_time3 的显示值
document.getElementById('pred_time3_value').textContent = pred_time3;
/*
// 更新 target_time2, target_time3 的显示值
document.getElementById('target_time2_value').textContent = target_time2;
document.getElementById('target_time3_value').textContent = target_time3;
// 更新 target_x1, target_x2, target_x3 的显示值
document.getElementById('target_x1_value').textContent = target_x1.toFixed(2);
document.getElementById('target_x2_value').textContent = target_x2.toFixed(2);
document.getElementById('target_x3_value').textContent = target_x3.toFixed(2);
// 更新 pred_y1, pred_y2, pred_y3 的显示值
document.getElementById('pred_y1_value').textContent = pred_y1.toFixed(2);
document.getElementById('pred_y2_value').textContent = pred_y2.toFixed(2);
document.getElementById('pred_y3_value').textContent = pred_y3.toFixed(2);
*/
}
function changeFunType(selectObject) {
fun_type = selectObject.value;
switch(fun_type) {
case '自然冷却':
z2 = z3 = z4 = z5 = 0;
break;
case '单个大风机':
z2 = 1;
z3 = z4 = z5 = 0;
break;
case '单4风机':
z3 = 1;
z2 = z4 = z5 = 0;
break;
case '大风机+单4风机':
z4 = 1;
z2 = z3 = z5 = 0;
break;
case '双4风机':
z5 = 1;
z2 = z3 = z4 = 0;
break;
}
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
function calculateK() {
var k1 = 0.03691591;
var k2 = -0.01086697;
var k3 = -0.02207111;
var k4 = -0.04971315;
var k5 = -0.06927802;
var k6 = -0.00682166;
window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
}
function drawGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
for (var i = 0; i <= canvas.width; i += 40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
}
for (var j = 0; j <= canvas.height; j += 40) {
ctx.beginPath();
ctx.moveTo(0, j);
ctx.lineTo(canvas.width, j);
ctx.stroke();
ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
}
ctx.strokeStyle = 'blue';
ctx.beginPath();
for (var x = 0; x <= 70; x += 1) {
var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
if (x === 0) {
ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
} else {
ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
}
}
ctx.stroke();
}
function updateValue(elementId, elementValue) {
switch(elementId) {
case 'id_width':
width = parseFloat(elementValue);
break;
case 'id_weight':
weight = parseFloat(elementValue);
break;
case 'id_init_time':
init_time = elementValue;
break;
case 'id_init_temp':
init_temp = parseFloat(elementValue);
break;
case 'id_ambi_temp':
ambi_temp = parseFloat(elementValue);
break;
}
var density = 2.7 * Math.pow(10, -6);
var inner_radius = 665;
var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
z6 = surface_area / weight * Math.pow(10, 4);
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
// 将id_target_time 的默认值设置为当前时间+10小时，如果输入了id_target_time 则更新该值；
if (elementId === 'id_target_time' && elementValue === '') {
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
}
updateFormula(); // 更新函数
drawGraph();
}
window.onload = function() {
calculateK();
// 将id_target_time 的默认值设置为当前时间+10小时
var currentDate = new Date();
currentDate.setHours(currentDate.getHours() + 10);
document.getElementById('id_target_time').value = currentDate.toISOString().slice(0, 16);
/*
init_target_time = chinaTime.setHours(currentDate.getHours() + 10)
document.getElementById('id_target_time').value = init_target_time.toISOString().slice(0, 16);
*/
updateFormula(); // 更新函数
drawGraph();
}
</script>
<div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
<div style="margin-bottom: 20px;">
<label for="id_width" style="font-size: 20px;">宽度mm</label><br>
<input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_weight" style="font-size: 20px;">重量kg</label><br>
<input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
<input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
<input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
<input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
</div>
<!--输入料温预测时间-->
<div id="target_temp" style="position: absolute; left: 100px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标料温</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测冷却时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测冷却时间</label>
</div>
</div>
<div id="target_temp_input" style="position: absolute; left: 300px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标料温</label>
<input type="text" id="id_target_temp" value="45" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px; width: 50px;">
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_x1_value"></span></label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_time1_value"></span></label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例1 (50摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">50</label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_x2_value"></span></label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_time2_value"></span></label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例2 (40摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">40</label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_x3_value"></span></label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_time3_value"></span></label>
</div>
</div>
</div>
<!--输入时间预测料温-->
<div id="target_time" style="position: absolute; left: 900px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标时间</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测料温</label>
</div>
</div>
<div id="target_time_input" style="position: absolute; left: 1000px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 60px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标时间</label>
<input type="datetime-local" id="id_target_time" value="" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px;">
<label style="margin-top: 20px; font-size: 20px;"><span id="target_x1_value"></span></label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_y1_value"></span></label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例3 (当前时间)</label>
<label style="margin-top: 20px; font-size: 20px;"><span id="target_time2_value"></span></label>
<label style="margin-top: 20px; font-size: 20px;"><span id="target_x2_value"></span></label>
<label style="margin-top: 20px; font-size: 20px;"><span id="pred_y2_value"></span></label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例4 (出炉时间+50小时)</label>
<label style="margin-top: 20px; font-size: 20px;">出炉时间+50小时</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
</body>
</html>