174 lines
6.4 KiB
HTML
174 lines
6.4 KiB
HTML
<!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>
|