257 lines
8.8 KiB
HTML
257 lines
8.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="https://cdn.jsdelivr.net/npm/weui@2.5.4/dist/style/weui.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<!-- 顶栏 page-hd -->
|
|
<header class="page-hd">
|
|
<a href="javascript:history.back()" class="page-hd__back">
|
|
<i class="ri-arrow-left-s-line"></i>
|
|
</a>
|
|
<div class="page-hd__title">隐患随手拍</div>
|
|
<a href="profile.html" class="page-hd__user">
|
|
<i class="ri-user-line"></i>
|
|
</a>
|
|
</header>
|
|
|
|
<div class="page-bd">
|
|
<!-- GPS状态栏 -->
|
|
<div class="gps-bar" id="gpsBar">
|
|
<i class="ri-map-pin-line gps-icon"></i>
|
|
<span class="gps-text" id="gpsText">正在获取位置...</span>
|
|
</div>
|
|
|
|
<!-- 照片卡片 weui-panel -->
|
|
<div class="weui-panel">
|
|
<div class="weui-panel__hd">现场照片 *</div>
|
|
<div class="weui-panel__bd">
|
|
<div class="photo-grid" id="photoGrid"></div>
|
|
<div class="photo-add-btn" id="addPhotoBtn">
|
|
<i class="ri-add-line"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="file" id="photoInput" accept="image/*" capture="environment" multiple style="display:none">
|
|
|
|
<!-- 表单卡片 weui-panel -->
|
|
<div class="weui-panel">
|
|
<div class="weui-panel__hd">隐患信息</div>
|
|
<div class="weui-panel__bd">
|
|
<div class="weui-cells">
|
|
<!-- 隐患描述 -->
|
|
<div class="weui-cell">
|
|
<div class="weui-cell__bd">
|
|
<textarea id="descInput" class="weui-textarea" placeholder="请详细描述隐患情况..." rows="3" maxlength="200"></textarea>
|
|
<div class="weui-textarea-counter"><span id="descCount">0</span>/200</div>
|
|
</div>
|
|
</div>
|
|
<!-- 隐患类别 -->
|
|
<div class="weui-cell weui-cell_select weui-cell_select-before">
|
|
<div class="weui-cell__hd">
|
|
<select id="categoryInput" class="weui-select" name="category">
|
|
<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="weui-cell__bd">
|
|
<div class="weui-label">隐患类别</div>
|
|
</div>
|
|
</div>
|
|
<!-- 严重程度 -->
|
|
<div class="weui-cell">
|
|
<div class="weui-cell__bd">
|
|
<div class="severity-group">
|
|
<label class="weui-check-label">
|
|
<input type="radio" name="severity" value="一般" class="weui-check">
|
|
<span class="weui-radio-label">一般</span>
|
|
</label>
|
|
<label class="weui-check-label">
|
|
<input type="radio" name="severity" value="较大" class="weui-check">
|
|
<span class="weui-radio-label">较大</span>
|
|
</label>
|
|
<label class="weui-check-label">
|
|
<input type="radio" name="severity" value="重大" class="weui-check">
|
|
<span class="weui-radio-label">重大</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 提交按钮 -->
|
|
<div class="btn-area">
|
|
<a href="javascript:;" class="weui-btn weui-btn_primary btn-block" id="submitBtn">
|
|
<i class="ri-send-plane-line"></i>
|
|
<span>提交隐患</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部Tabbar weui-tabbar -->
|
|
<div class="weui-tabbar">
|
|
<a href="index.html" class="weui-tabbar__item">
|
|
<div class="weui-tabbar__icon">
|
|
<i class="ri-home-line"></i>
|
|
</div>
|
|
<p class="weui-tabbar__label">首页</p>
|
|
</a>
|
|
<a href="devices.html" class="weui-tabbar__item">
|
|
<div class="weui-tabbar__icon">
|
|
<i class="ri-archive-line"></i>
|
|
</div>
|
|
<p class="weui-tabbar__label">设备</p>
|
|
</a>
|
|
<a href="report.html" class="weui-tabbar__item weui-bar__item_on">
|
|
<div class="weui-tabbar__icon">
|
|
<i class="ri-camera-fill"></i>
|
|
</div>
|
|
<p class="weui-tabbar__label">随手拍</p>
|
|
</a>
|
|
<a href="logs.html" class="weui-tabbar__item">
|
|
<div class="weui-tabbar__icon">
|
|
<i class="ri-file-list-3-line"></i>
|
|
</div>
|
|
<p class="weui-tabbar__label">日志</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/mock.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script>
|
|
let photos = [];
|
|
let gpsData = null;
|
|
|
|
// GPS初始化
|
|
function initGPS() {
|
|
if (!navigator.geolocation) {
|
|
document.getElementById('gpsText').textContent = '定位不可用';
|
|
return;
|
|
}
|
|
navigator.geolocation.getCurrentPosition(
|
|
function(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);
|
|
},
|
|
function() {
|
|
document.getElementById('gpsText').textContent = '定位失败，请检查权限';
|
|
}
|
|
);
|
|
}
|
|
|
|
// 渲染照片网格
|
|
function renderPhotos() {
|
|
var grid = document.getElementById('photoGrid');
|
|
var html = '';
|
|
for (var i = 0; i < photos.length; i++) {
|
|
html += '<div class="photo-item" style="position:relative">';
|
|
html += '<img src="' + photos[i].dataUrl + '" alt="照片' + (i + 1) + '">';
|
|
html += '<div class="photo-remove" onclick="removePhoto(' + i + ')"><i class="ri-close-line"></i></div>';
|
|
html += '</div>';
|
|
}
|
|
grid.innerHTML = html;
|
|
}
|
|
|
|
// 添加照片按钮事件
|
|
document.getElementById('addPhotoBtn').addEventListener('click', function() {
|
|
document.getElementById('photoInput').click();
|
|
});
|
|
|
|
// 照片选择事件
|
|
document.getElementById('photoInput').addEventListener('change', function(e) {
|
|
var files = Array.from(e.target.files);
|
|
files.forEach(function(file) {
|
|
var reader = new FileReader();
|
|
reader.onload = function(ev) {
|
|
photos.push({ file: 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;
|
|
});
|
|
|
|
// 提交隐患
|
|
function submitReport() {
|
|
var desc = document.getElementById('descInput').value.trim();
|
|
var category = document.getElementById('categoryInput').value;
|
|
var severityEl = document.querySelector('input[name="severity"]:checked');
|
|
var severity = severityEl ? severityEl.value : '';
|
|
|
|
if (photos.length === 0) {
|
|
showToast('请拍摄现场照片');
|
|
return;
|
|
}
|
|
if (!desc) {
|
|
showToast('请填写隐患描述');
|
|
return;
|
|
}
|
|
if (!category) {
|
|
showToast('请选择隐患类别');
|
|
return;
|
|
}
|
|
if (!severity) {
|
|
showToast('请选择严重程度');
|
|
return;
|
|
}
|
|
|
|
var btn = document.getElementById('submitBtn');
|
|
btn.classList.add('disabled');
|
|
btn.style.pointerEvents = 'none';
|
|
|
|
apiSubmitReport({
|
|
photos: photos.map(function(p) { return p.dataUrl; }),
|
|
description: desc,
|
|
category: category,
|
|
severity: severity,
|
|
location: gpsData
|
|
}).then(function(result) {
|
|
showToast('提交成功');
|
|
setTimeout(function() {
|
|
location.reload();
|
|
}, 1500);
|
|
}).catch(function() {
|
|
showToast('提交失败，请重试');
|
|
btn.classList.remove('disabled');
|
|
btn.style.pointerEvents = 'auto';
|
|
});
|
|
}
|
|
|
|
// 绑定提交按钮
|
|
document.getElementById('submitBtn').addEventListener('click', submitReport);
|
|
|
|
// 初始化
|
|
requireAuth();
|
|
initGPS();
|
|
</script>
|
|
</body>
|
|
</html>
|