請你幫我寫HTML模板
时间: 2024-03-20 18:39:04 浏览: 15
好的,以下是一个简单的HTML模板,包含了菜单、表单和查询结果的展示,以及样式和交互逻辑等:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>异常登记</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#menu {
float: left;
width: 200px;
padding: 10px;
background-color: #f0f0f0;
box-shadow: 1px 1px 3px #666;
}
#content {
margin-left: 220px;
padding: 10px;
}
form {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #666;
}
table {
border-collapse: collapse;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #666;
margin-bottom: 20px;
}
th, td {
padding: 5px;
border: 1px solid #ccc;
}
th {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>异常登记</h1>
<div id="menu">
<h2>菜单</h2>
<ul>
<li><a href="#add_form">登记数据</a></li>
<li><a href="#query_form">查询数据</a></li>
</ul>
</div>
<div id="content">
<form id="add_form" method="post" action="{{ url_for('add_data') }}">
<h2>登记数据</h2>
<label for="time">时间:</label>
<input type="text" id="time" name="time"><br>
<label for="location">地点:</label>
<input type="text" id="location" name="location"><br>
<label for="symptom">现象:</label>
<input type="text" id="symptom" name="symptom"><br>
<label for="line">生产线别:</label>
<input type="text" id="line" name="line"><br>
<label for="shift">生产班别:</label>
<input type="text" id="shift" name="shift"><br>
<label for="type">生产机种:</label>
<input type="text" id="type" name="type"><br>
<label for="note">备注:</label>
<textarea id="note" name="note"></textarea><br>
<input type="submit" value="提交">
</form>
<form id="query_form" method="post" action="{{ url_for('query_data') }}">
<h2>查询数据</h2>
<label for="time">时间:</label>
<input type="text" id="time" name="time"><br>
<label for="location">地点:</label>
<input type="text" id="location" name="location"><br>
<label for="symptom">现象:</label>
<input type="text" id="symptom" name="symptom"><br>
<label for="line">生产线别:</label>
<input type="text" id="line" name="line"><br>
<label for="shift">生产班别:</label>
<input type="text" id="shift" name="shift"><br>
<label for="type">生产机种:</label>
<input type="text" id="type" name="type"><br>
<input type="submit" value="查询">
</form>
<div id="query_result">
{% if query_result is defined %}
<h2>查询结果</h2>
<table>
<thead>
<tr>
<th>时间</th>
<th>地点</th>
<th>现象</th>
<th>生产线别</th>
<th>生产班别</th>
<th>生产机种</th>
<th>备注</th>
</tr>
</thead>
<tbody>
{% for row in query_result.iterrows() %}
<tr>
<td>{{ row[1]['时间'] }}</td>
<td>{{ row[1]['地点'] }}</td>
<td>{{ row[1]['现象'] }}</td>
<td>{{ row[1]['生产线别'] }}</td>
<td>{{ row[1]['生产班别'] }}</td>
<td>{{ row[1]['生产机种'] }}</td>
<td>{{ row[1]['备注'] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
</div>
</body>
</html>
```
上面的代码使用了Flask的模板语言,包含了菜单、表单和查询结果的展示,以及样式和交互逻辑等。其中,表单使用了POST方法提交数据,查询结果使用了Pandas的DataFrame对象生成HTML表格。您可以根据自己的需要修改HTML模板的样式和布局。