jesxion/smart-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add construction log page (log.html)

Browse Source
This commit is contained in:
Jesxion
2026-04-14 12:36:07 +08:00
parent b2365a9d10
commit c9d19adc93
1 changed files with 173 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
h5/log.html Normal file
View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>写日志 - 郑州智慧工地</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page">
<!-- 顶栏 -->
<header class="header">
<a href="logs.html" class="header-back">‹</a>
<div class="header-title">
<span>写日志</span>
</div>
<div class="header-right"></div>
</header>
<div class="page-content">
<!-- 照片附件卡片 -->
<div class="card">
<div class="card-title">现场照片（选填）</div>
<div class="photo-grid" id="photoGrid"></div>
<input type="file" id="photoInput" accept="image/*" multiple style="display: none;">
<div class="photo-add" id="addPhotoBtn" onclick="document.getElementById('photoInput').click()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<span>添加照片</span>
</div>
</div>
<!-- 日志表单卡片 -->
<div class="card">
<div class="form-group">
<label class="form-label">日期</label>
<input type="date" id="dateInput" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label">施工部位</label>
<input type="text" id="partInput" class="form-input" placeholder="请填写施工部位" required>
</div>
<div class="form-group">
<label class="form-label">作业内容</label>
<textarea id="contentInput" class="form-input" rows="3" placeholder="请填写作业内容" required></textarea>
</div>
<div class="form-group">
<label class="form-label">人员出勤</label>
<input type="number" id="workersInput" class="form-input" placeholder="请填写人员出勤人数" required>
</div>
<div class="form-group">
<label class="form-label">设备运行</label>
<div class="checkbox-group">
<label class="checkbox-item">
<input type="checkbox" name="equipment" value="tower_crane">
<span class="checkbox-label">🏗️ 塔吊</span>
</label>
<label class="checkbox-item">
<input type="checkbox" name="equipment" value="elevator">
<span class="checkbox-label">🛗 升降机</span>
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">安全问题</label>
<textarea id="safetyInput" class="form-input" rows="2" placeholder="请填写安全问题（选填）"></textarea>
</div>
<div class="form-group">
<label class="form-label">备注</label>
<textarea id="noteInput" class="form-input" rows="2" placeholder="请填写备注（选填）"></textarea>
</div>
</div>
<!-- 提交按钮 -->
<button class="btn-primary" onclick="submitLog()">提交日志</button>
</div>
<!-- 底部Tab栏 -->
<nav class="tab-bar">
<a href="index.html" class="tab-item">
<span>🏠</span>
<span>首页</span>
</a>
<a href="devices.html" class="tab-item">
<span>🏗️</span>
<span>设备</span>
</a>
<a href="report.html" class="tab-item">
<span>📷</span>
<span>随手拍</span>
</a>
<a href="logs.html" class="tab-item active">
<span>📋</span>
<span>日志</span>
</a>
</nav>
</div>
<script src="js/mock.js"></script>
<script src="js/app.js"></script>
<script src="js/api.js"></script>
<script>
if (!requireAuth()) {}
// 初始化日期为当天
document.getElementById('dateInput').value = formatDate(new Date().toISOString());
let photos = [];
// 渲染照片
function renderPhotos() {
const grid = document.getElementById('photoGrid');
grid.innerHTML = photos.map((photo, index) => `
<div class="photo-item">
<img src="${photo}" alt="照片${index + 1}">
<div class="photo-item-delete" onclick="removePhoto(${index})">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</div>
</div>
`).join('');
}
// 删除照片
function removePhoto(index) {
photos.splice(index, 1);
renderPhotos();
}
// 照片选择处理
document.getElementById('photoInput').addEventListener('change', function(e) {
const files = Array.from(e.target.files);
files.forEach(file => {
const reader = new FileReader();
reader.onload = function(evt) {
photos.push(evt.target.result);
renderPhotos();
};
reader.readAsDataURL(file);
});
e.target.value = '';
});
// 提交日志
async function submitLog() {
const date = document.getElementById('dateInput').value;
const part = document.getElementById('partInput').value.trim();
const content = document.getElementById('contentInput').value.trim();
const workers = parseInt(document.getElementById('workersInput').value);
const equipment = Array.from(document.querySelectorAll('input[name="equipment"]:checked')).map(el => el.value);
const safety = document.getElementById('safetyInput').value.trim();
const note = document.getElementById('noteInput').value.trim();
if (!date) { showToast('请选择日期'); return; }
if (!part) { showToast('请填写施工部位'); return; }
if (!content) { showToast('请填写作业内容'); return; }
if (!workers && workers !== 0) { showToast('请填写人员出勤'); return; }
const res = await apiSubmitLog({ date, part, content, workers, equipment, safety, note, attachments: photos });
if (res.code === 0) {
showToast('提交成功');
setTimeout(() => location.href = 'logs.html', 800);
} else {
showToast(res.message || '提交失败');
}
}
</script>
</body>
</html>