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

feat: 创建隐患随手拍页面 report.html

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

206
h5/report.html Normal file
View File

@@ -0,0 +1,206 @@
<!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="app">
<!-- 顶栏 -->
<header class="topbar">
<a href="javascript:history.back()" class="topbar-back">‹</a>
<h1 class="topbar-title">隐患随手拍</h1>
<a href="profile.html" class="topbar-user">👤</a>
</header>
<!-- GPS状态栏 -->
<div class="gps-bar" id="gpsBar">
<span class="gps-icon">📍</span>
<span class="gps-text" id="gpsText">正在获取位置...</span>
</div>
<div class="content">
<!-- 照片卡片 -->
<div class="card">
<div class="card-title">现场照片 *</div>
<div class="photo-grid" id="photoGrid">
<div class="photo-item photo-add" id="addPhotoBtn">+</div>
</div>
<input type="file" id="photoInput" accept="image/*" capture="environment" multiple style="display:none">
</div>
<!-- 表单卡片 -->
<div class="card">
<div class="form-item">
<label class="form-label">隐患描述 *</label>
<textarea id="descInput" class="form-textarea" placeholder="请详细描述隐患情况..." maxlength="200"></textarea>
<span class="form-hint"><span id="descCount">0</span>/200</span>
</div>
<div class="form-item">
<label class="form-label">隐患类别 *</label>
<select id="categoryInput" class="form-select">
<option value="">请选择隐患类别</option>
<option value="高空坠落">高空坠落</option>
<option value="物体打击">物体打击</option>
<option value="机械伤害">机械伤害</option>
<option value="触电">触电</option>
<option value="坍塌">坍塌</option>
<option value="火灾">火灾</option>
<option value="其他">其他</option>
</select>
</div>
<div class="form-item">
<label class="form-label">严重程度 *</label>
<div class="radio-group">
<label class="radio-label">
<input type="radio" name="severity" value="一般">
<span>一般</span>
</label>
<label class="radio-label">
<input type="radio" name="severity" value="较大">
<span>较大</span>
</label>
<label class="radio-label">
<input type="radio" name="severity" value="重大">
<span>重大</span>
</label>
</div>
</div>
</div>
<!-- 提交按钮 -->
<button class="btn-primary" onclick="submitReport()">提交隐患</button>
</div>
<!-- 底部Tab栏 -->
<nav class="tab-bar">
<a href="index.html" class="tab-item">
<span class="tab-icon">🏠</span>
<span class="tab-text">首页</span>
</a>
<a href="devices.html" class="tab-item">
<span class="tab-icon">📱</span>
<span class="tab-text">设备</span>
</a>
<a href="report.html" class="tab-item active">
<span class="tab-icon">📷</span>
<span class="tab-text">随手拍</span>
</a>
<a href="log.html" class="tab-item">
<span class="tab-icon">📋</span>
<span class="tab-text">日志</span>
</a>
</nav>
</div>
<script src="js/mock.js"></script>
<script src="js/app.js"></script>
<script src="js/api.js"></script>
<script>
let photos = [];
let gpsData = null;
// GPS初始化
function initGPS() {
if (!navigator.geolocation) {
document.getElementById('gpsText').textContent = '定位不可用';
return;
}
navigator.geolocation.getCurrentPosition(
pos => {
gpsData = { lat: pos.coords.latitude, lng: pos.coords.longitude };
document.getElementById('gpsBar').classList.add('active');
document.getElementById('gpsText').textContent = `${gpsData.lat.toFixed(4)}, ${gpsData.lng.toFixed(4)}`;
},
() => {
document.getElementById('gpsText').textContent = '定位失败，请检查权限';
}
);
}
// 渲染照片
function renderPhotos() {
const grid = document.getElementById('photoGrid');
const addBtn = '<div class="photo-item photo-add" id="addPhotoBtn">+</div>';
grid.innerHTML = photos.map((p, i) => `
<div class="photo-item" style="position:relative">
<img src="${p.dataUrl}" alt="照片${i+1}">
<div class="photo-remove" onclick="removePhoto(${i})">×</div>
</div>
`).join('') + (photos.length < 9 ? addBtn : '');
document.getElementById('addPhotoBtn')?.addEventListener('click', () => document.getElementById('photoInput').click());
}
// 添加照片按钮事件
document.getElementById('addPhotoBtn').addEventListener('click', () => document.getElementById('photoInput').click());
// 照片选择事件
document.getElementById('photoInput').addEventListener('change', e => {
Array.from(e.target.files).forEach(file => {
const reader = new FileReader();
reader.onload = ev => {
photos.push({ file, dataUrl: ev.target.result });
renderPhotos();
};
reader.readAsDataURL(file);
});
e.target.value = '';
});
// 删除照片
function removePhoto(index) {
photos.splice(index, 1);
renderPhotos();
}
// 描述字数统计
document.getElementById('descInput').addEventListener('input', function() {
document.getElementById('descCount').textContent = this.value.length;
});
// 提交隐患
async function submitReport() {
const desc = document.getElementById('descInput').value.trim();
const category = document.getElementById('categoryInput').value;
const severity = document.querySelector('input[name="severity"]:checked')?.value;
if (photos.length === 0) {
showToast('请拍摄现场照片');
return;
}
if (!desc) {
showToast('请填写隐患描述');
return;
}
if (!category) {
showToast('请选择隐患类别');
return;
}
if (!severity) {
showToast('请选择严重程度');
return;
}
try {
const result = await apiSubmitReport({
photos: photos.map(p => p.dataUrl),
description: desc,
category: category,
severity: severity,
location: gpsData
});
showToast('提交成功');
location.reload();
} catch (e) {
showToast('提交失败，请重试');
}
}
// 初始化
requireAuth();
initGPS();
</script>
</body>
</html>