368 lines
10 KiB
HTML
368 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
|
|
/>
|
|
<title>情况上报</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.form {
|
|
padding: 34px 22px 0 19px;
|
|
}
|
|
.form-item {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
}
|
|
.label {
|
|
width: 74px;
|
|
margin-right: 10px;
|
|
}
|
|
.preUploadDiv {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
}
|
|
.preUploadImg {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.preUploadDiv:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
.uploadBox {
|
|
background: url("./img/upload.png");
|
|
background-size: cover;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.upload {
|
|
opacity: 0;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.fileList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.icon_delete {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline-block;
|
|
background: url("./img/icon_delete.png");
|
|
background-size: cover;
|
|
position: absolute;
|
|
right: -8px;
|
|
top: -8px;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: #f5f5f6;
|
|
flex: 1;
|
|
/* padding: 8px 16px; */
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
/* color: #999999; */
|
|
line-height: 25px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
background: #f5f5f6;
|
|
padding-left: 16px;
|
|
border-radius: 8px 8px 8px 8px;
|
|
border: 0;
|
|
outline: none;
|
|
}
|
|
select {
|
|
/* width: 256px; */
|
|
width: 100%;
|
|
height: 40px;
|
|
background: #f5f5f6;
|
|
flex: 1;
|
|
padding: 8px 16px;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
/* color: #999999; */
|
|
line-height: 25px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
background: #f5f5f6;
|
|
border-radius: 8px 8px 8px 8px;
|
|
border: 0;
|
|
outline: none;
|
|
}
|
|
textarea {
|
|
width: 100%;
|
|
height: 80px;
|
|
background: #f5f5f6;
|
|
flex: 1;
|
|
padding: 8px 16px;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
/* color: #999999; */
|
|
line-height: 25px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
border-radius: 8px 8px 8px 8px;
|
|
border: 0;
|
|
outline: none;
|
|
}
|
|
.fileListBox {
|
|
flex: 1;
|
|
}
|
|
.btn_center {
|
|
display: flex;
|
|
justify-content: center;
|
|
position: fixed;
|
|
left: 10px;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
}
|
|
.btn_submit {
|
|
width: 330px;
|
|
height: 40px;
|
|
background: #4876ff;
|
|
border-radius: 8px 8px 8px 8px;
|
|
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
line-height: 25px;
|
|
letter-spacing: 3px;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
border: 0;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
<script src="./js/jquery.min.js"></script>
|
|
<script>
|
|
var BASE = "https://ykdz.yundazhou.com:8000/api";
|
|
|
|
var fileList = [];
|
|
|
|
function uploadChange(event) {
|
|
var file = event.target.files[0];
|
|
|
|
if (file) {
|
|
var reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
var img = document.createElement("img");
|
|
img.src = e.target.result;
|
|
// document.body.appendChild(img);
|
|
// 这里可以添加上传图片到服务器的代码
|
|
// alert(e.target.result)
|
|
|
|
let tempFile = DataURIToBlob(e.target.result);
|
|
|
|
let fd = new FormData();
|
|
fd.append("file", tempFile);
|
|
upload(fd);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
// alert(JSON.stringify(reader.readAsDataURL(file)))
|
|
}
|
|
|
|
// var input = document.getElementById('upload');
|
|
// if (input.files && input.files) {
|
|
// var reader = new FileReader();
|
|
|
|
// reader.onload = function (e) {
|
|
// var previewImage = document.getElementById("previewImage");
|
|
// previewImage.src = e.target.result;
|
|
// previewImage.style.display = "block";
|
|
// };
|
|
// // alert(JSON.stringify(input.files))
|
|
// reader.readAsDataURL(input.files);
|
|
// }
|
|
// var formData = new FormData();
|
|
|
|
// let files = $("#upload")[0].files;
|
|
|
|
// alert(JSON.stringify(val));
|
|
// var formData = new FormData();
|
|
// for (let i = 0; i < files.length; i++) {
|
|
// formData.append("file", files[i]);
|
|
// upload(formData);
|
|
// }
|
|
}
|
|
|
|
function DataURIToBlob(dataURI) {
|
|
const splitDataURI = dataURI.split(",");
|
|
const byteString =
|
|
splitDataURI[0].indexOf("base64") >= 0
|
|
? atob(splitDataURI[1])
|
|
: decodeURI(splitDataURI[1]);
|
|
const mimeString = splitDataURI[0].split(":")[1].split(";")[0];
|
|
|
|
const ia = new Uint8Array(byteString.length);
|
|
for (let i = 0; i < byteString.length; i++)
|
|
ia[i] = byteString.charCodeAt(i);
|
|
|
|
return new Blob([ia], { type: mimeString });
|
|
}
|
|
|
|
function upload(formData) {
|
|
// alert(formData);
|
|
$.ajax({
|
|
url: BASE + "/commonLogin/upload",
|
|
type: "POST",
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
|
|
headers: { Authorization: sessionStorage.token },
|
|
success: function (data) {
|
|
// alert(JSON.stringify(data));
|
|
if (data.c === 200) {
|
|
// console.log(data);
|
|
// alert('200',JSON.stringify(data));
|
|
fileList.push(data.d);
|
|
renderFileList();
|
|
}
|
|
},
|
|
});
|
|
}
|
|
function renderFileList() {
|
|
$(".preUploadDiv").remove();
|
|
fileList.map((item, index) => {
|
|
$(".fileList").prepend(
|
|
`<div class="preUploadDiv"><img class="preUploadImg" src="${item}"><i class="icon_delete" onclick="removeUpload(${index})"></i></div>`
|
|
);
|
|
});
|
|
}
|
|
function removeUpload(index) {
|
|
fileList.splice(index, 1);
|
|
renderFileList();
|
|
// $('.fileList')[index].remove()
|
|
// $(".preUploadDiv")[index].remove();
|
|
}
|
|
function submit() {
|
|
let params = {
|
|
// address: "",
|
|
content: $("#content").val(),
|
|
imageUrls: [...fileList].toString(),
|
|
// lat: "",
|
|
// lng: "",
|
|
// type: $("#type").val(),
|
|
// dept: $("#dept").val(),
|
|
staffName: $("#staffName").val(),
|
|
staffPhone: $("#staffPhone").val(),
|
|
type: $("#content").val(),
|
|
type2: '1',
|
|
};
|
|
$.ajax({
|
|
url: BASE + "/eventRecord/upload",
|
|
type: "POST",
|
|
// data: JSON.stringify(param),
|
|
data: JSON.stringify(params),
|
|
// async: true,
|
|
dataType: "json",
|
|
contentType: "application/json; charset=UTF-8",
|
|
headers: { Authorization: sessionStorage.token },
|
|
success: function (data) {
|
|
if (data.c === 200) {
|
|
console.log(data);
|
|
window.history.back();
|
|
}
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<input
|
|
id="upload"
|
|
type="file"
|
|
hidden
|
|
onchange="uploadChange(event)"
|
|
capture="camera"
|
|
accept="image/*"
|
|
/>
|
|
<input type="text" id="type2" hidden value="1" />
|
|
|
|
<div class="form">
|
|
<!-- <div class="form-item" id="item_type">
|
|
<div class="label">巡查类型</div>
|
|
<select id="type">
|
|
<option value="" style="display: none; font-size: 14px">
|
|
请选择
|
|
</option>
|
|
<option label="发现国动设施附近施工" value="1"></option>
|
|
<option label="发现国动设施处倾倒建渣或垃圾" value="2"></option>
|
|
<option label="发现在国动设施正被破坏" value="3"></option>
|
|
<option label="发现在国动设施已被破坏" value="4"></option>
|
|
</select>
|
|
</div> -->
|
|
<div class="form-item">
|
|
<div class="label">姓名</div>
|
|
<input type="text" id="staffName" />
|
|
</div>
|
|
<div class="form-item">
|
|
<div class="label">电话</div>
|
|
<input type="text" id="staffPhone" />
|
|
</div>
|
|
<!-- <div class="form-item">
|
|
<div class="label">部门</div>
|
|
<select id="dept">
|
|
<option value="" style="display: none; font-size: 14px">
|
|
请选择
|
|
</option>
|
|
<option label="社区" value="社区"></option>
|
|
<option label="国动部门" value="国动部门"></option>
|
|
<option label="国动设施管理单位" value="国动设施管理单位"></option>
|
|
</select>
|
|
</div> -->
|
|
<div class="form-item">
|
|
<div class="label">内容</div>
|
|
<textarea
|
|
name=""
|
|
id="content"
|
|
cols="30"
|
|
rows="10"
|
|
placeholder="请输入"
|
|
></textarea>
|
|
</div>
|
|
<!-- <div class="form-item">
|
|
<label for="">现场照片</label>
|
|
<input id="upload" type="file" multiple onchange="uploadChange()" />
|
|
<div class="fileList"></div>
|
|
</div> -->
|
|
<div class="form-item">
|
|
<div class="label">现场照片</div>
|
|
<div class="fileListBox">
|
|
<div class="fileList">
|
|
<img
|
|
id="previewImage"
|
|
src="#"
|
|
alt="Image preview"
|
|
style="display: none; width: 100%; max-width: 300px"
|
|
/>
|
|
<div class="uploadBox" onclick="$('input').click()"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn_center">
|
|
<button class="btn_submit" type="button" onclick="submit()">上报</button>
|
|
</div>
|
|
</body>
|
|
</html>
|