207 lines
6.8 KiB
HTML
207 lines
6.8 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="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>
|