<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ include file="/views/base/include.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<%@ include file="/inc/bootstarp_3.3.7_include.inc" %>
<style type="">
.w100 {
width: 100%;
height: 100%;
}
.w100 td {
padding: 3px;
}
</style>
</head>
<body>
<div class="form-table w100" style="height: 400px;">
<form id="fmInfo" name="fmInfo" method="post">
<input type="hidden" name="id" id="id" value="${id}"/>
<input type="hidden" name="addType" id="addType" value="${type}"/>
<table class="w100" style="border-collapse: collapse;border:1px solid #C0C0C0" border="1"
cellspacing="15" cellpadding="15" align="center">
<tbody>
<!--<tr>
<td colspan="4" align="center" style="border:0;">
<h3>养护任务详情</h3>
</td>
</tr>-->
<tr>
<%-- <td style="width: 15%" align="right">--%>
<%-- 任务类型--%>
<%-- </td>--%>
<%-- <td style="width: 35%" align="center">--%>
<%-- <select id="type" name="type" class="selectpicker show-tick form-control" disabled>--%>
<%-- <option value="1" <c:if test="${type == '1'}">selected</c:if>>临时任务</option>--%>
<%-- <option value="2" <c:if test="${type == '2'}">selected</c:if>>日常任务</option>--%>
<%-- </select>--%>
<%-- </td>--%>
<%-- <td style="width: 15%" align="right">--%>
<%-- 负责人 <img src="${headImg}" width="30px" height="30px" />--%>
<%-- </td>--%>
<%-- <td style="width: 35%" align="center">--%>
<%-- <input type="text" id="workerName" name="workerName" class="form-control" value="${workerName}" disabled />--%>
<%-- </td>--%>
</tr>
<tr>
<td style="width: 15%" align="right">
要求完成时间
</td>
<td style="width: 35%" align="center">
<input type="text" id="planTime" name="planTime" class="form-control" value="${planTime}" disabled/>
</td>
<td style="width: 15%" align="right">
实际完成时间
</td>
<td style="width: 35%" align="center">
<input type="text" id="finishTime" name="finishTime" class="form-control" value="${finishTime}"
disabled/>
</td>
</tr>
<tr>
<td style="width: 15%" align="right">
地址
</td>
<td style="width: 20%" align="center" colspan="3">
<input type="text" id="roadName" name="comment" class="form-control" value="${roadName}" disabled/>
</td>
</tr>
<tr>
<td style="width: 15%" align="right">
备注
</td>
<td style="width: 20%" align="center" colspan="3">
<input type="text" id="comment" name="comment" class="form-control" value="${comment}" disabled/>
</td>
</tr>
<tr>
<td style="width: 15%" align="right">
状态
</td>
<td style="width: 35%" align="center">
<select id="status" name="status" class="selectpicker show-tick form-control" disabled>
<option value="1" <c:if test="${status == '1'}">selected</c:if>>未养护</option>
<option value="2" <c:if test="${status == '2'}">selected</c:if>>待养护</option>
<option value="3" <c:if test="${status == '3'}">selected</c:if>>已养护</option>
<option value="4" <c:if test="${status == '4'}">selected</c:if>>过期任务</option>
</select>
</td>
<%-- <td style="width: 15%" align="right">--%>
<%-- 经纬度--%>
<%-- </td>--%>
<%-- <td style="width: 35%" align="center">--%>
<%-- <input type="text" id="lnglat" name="lnglat" class="form-control" value="${lng},${lat}" disabled />--%>
<%-- </td>--%>
</tr>
<tr>
<%-- <td style="width: 15%" align="right">--%>
<%-- 任务标签--%>
<%-- </td>--%>
<%-- <td style="width: 35%" align="center">--%>
<%-- <input type="text" id="jobLabel" name="jobLabel" class="form-control" value="${jobLabel}" disabled/>--%>
<%-- </td>--%>
<%-- <td style="width: 15%" align="right">--%>
<%-- 处理建议--%>
<%-- </td>--%>
<%-- <td style="width: 35%" align="center">--%>
<%-- <input type="text" id="ext5" name="ext5" class="form-control" value="${ext5}" disabled />--%>
<%-- </td>--%>
</tr>
<tr>
<td style="width: 15%" align="right">处理前图片列表
<button type="button" style="margin-top:2px;" class="btn btn-default btn-sm" id='imgsBtn'
onclick="packageImages('imgs')">
<i class="fa fa-cloud-download"></i> 下载
</button>
<span id="status1"></span>
</td>
<td style="width: 20%" colspan="3" onclick="viewImgs()" id="imgs">
<c:forEach items="${imgList}" var="img">
<img src="${img.fileUrl}" width="60px" height="60px"/>
</c:forEach>
</td>
</tr>
<tr>
<td style="width: 15%" align="right">
处理后图片列表
<button type="button" style="margin-top:2px;" class="btn btn-default btn-sm" id='backImgsBtn'
onclick="packageImages('backImgs')">
<i class="fa fa-cloud-download"></i> 下载
</button>
</td>
<td style="width: 20%" colspan="3" onclick="viewChangeImgs()" id="backImgs">
<c:forEach items="${backImgList}" var="img">
<img src="${img.fileUrl}" width="60px" height="60px"/>
</c:forEach>
</td>
</tr>
</tbody>
</table>
<%-- <table id="dTable"--%>
<%-- data-method="post"--%>
<%-- data-striped="true"--%>
<%-- data-show-refresh="false"--%>
<%-- data-show-toggle="false"--%>
<%-- data-toolbar="#toolbar"--%>
<%-- data-pagination="false"--%>
<%-- data-content-Type="application/x-www-form-urlencoded"--%>
<%-- data-side-pagination="server">--%>
<%-- <thead>--%>
<%-- <tr>--%>
<%-- <th data-field="TrueName">姓名</th>--%>
<%-- <th data-field="DepartmentName">部门</th>--%>
<%-- <th data-field="UserName">用户名</th>--%>
<%-- <th data-field="job">职务</th>--%>
<%-- <th data-field="Mobile">手机号码</th>--%>
<%-- <th data-field="Email">电子邮箱</th>--%>
<%-- </tr>--%>
<%-- </thead>--%>
<%-- </table>--%>
<p style="margin-top:10px;"/>
</form>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script language="javascript">
$(function () {
loadTown();
//initFileUpload();
if ('${gdtype != ""}') {
selectPieId();
}
// 初始化列表
initTb();
});
// 初始化列表
function initTb() {
$('#dTable').bootstrapTable({
url: '${ctx}/pieYhJob/getPieJobUserList',
height: tableHeight(),//高度调整
queryParams: function (params) {
return {
showCount: 10000,//每页显示的条数
currentPage: 1, //当前页码
id: $('#id').val(),
isContain: 1
};
}
});
//单击行变色
$('#dTable').on('click-row.bs.table', function (e, row, element) {
$('.success').removeClass('success');//去除之前选中的行的，选中样式
$(element).addClass('success');//添加当前选中的 success样式用于区别
});
}
//tableHeight函数
function tableHeight() {
//可以根据自己页面情况进行调整
return $(window).height() - 180;
}
// 区镇联动
function loadTown() {
var TownNo = $('#TownNo');
// 清空河段选项
var TownIdOpt = $("#TownNo option");
if (TownIdOpt) {
TownIdOpt.remove();
}
// 河道ID
var districtId = $('#DistrictNo').val();
var url = "/town/townSelList";
api.invoke(url, {districtId: districtId}, "POST", function (result) {
$.each(result, function (i, v) {
var option = "<option value='" + v.id + "' ";
if (v.id == "${pie.TownNo}") {
option += "selected";
}
option += ">" + v.townName + "</option>";
// 增加镇选项
TownNo.append(option);
});
TownNo.selectpicker('refresh');
});
}
//管道类型与管道详情联动
function selectPieId() {
var road = $('#roadInfo');
// 清空河段选项
var roadNoOpt = $("#roadInfo option");
if (roadNoOpt) {
roadNoOpt.remove();
}
// 管道类型
var pieType = $('#pieType').val();
var addType = $("#addType").val();
var url = "/pieYhJob/getPieinfo";
api.invoke(url, {pieType: pieType, addType: addType}, "POST", function (result) {
$.each(result, function (i, v) {
var option = "<option value='" + v.id + "' ";
if (v.id == "${pie.id}") {
option += "selected";
}
if (addType == "yj") {
option += ">" + v.roadName + "-" + v.code + "</option>";
} else {
option += ">" + v.roadName + "</option>";
}
// 增加镇选项
road.append(option);
});
road.selectpicker('refresh');
});
}
/*
{
"title": "", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "图片名",
"pid": 666, //图片id
"src": "", //原图地址
"thumb": "" //缩略图地址
}
]
}
*/
function packageImages(type) {
if (type == '') {
return;
}
var pkName = '图片';
if (type == 'imgs') {
pkName = '处理前图片';
} else {
pkName = '处理后图片';
}
var imgs = $("#" + type + "").children();
if (imgs.length == 0) {
layer.msg('无图片信息！');
return;
}
console.log(imgs)
var imgsSrc = [];
var imgBase64 = [];
var imageSuffix = [];//图片后缀
var zip = new JSZip();
//zip.file("readme.txt", "案件详情资料\n");
var img = zip.folder(pkName);
for (var i = 0; i < imgs.length; i++) {
var src = imgs[i].getAttribute("src");
var suffix = src.substring(src.lastIndexOf("."));
imageSuffix.push(suffix);
getBase64(imgs[i].getAttribute("src"))
.then(function (base64) {
imgBase64.push(base64.substring(22));
}, function (err) {
console.log(err);//打印异常信息
});
}
function tt() {
setTimeout(function () {
if (imgs.length == imgBase64.length) {
for (var i = 0; i < imgs.length; i++) {
img.file(i + imageSuffix[i], imgBase64[i], {base64: true});
}
zip.generateAsync({type: "blob"}).then(function (content) {
saveAs(content, pkName + ".zip");
});
// $('#status1').text('处理完成。。。。。');
} else {
// $('#status1').text('已完成：' + imgBase64.length + '/' + imgs.length);
tt();
}
}, 100);
}
tt();
}
//传入图片路径，返回base64
function getBase64(img) {
function getBase64Image(img, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
}
var image = new Image();
image.crossOrigin = 'Anonymous';
image.src = img;
var deferred = $.Deferred();
if (img) {
image.onload = function () {
deferred.resolve(getBase64Image(image));
}
return deferred.promise();
}
}
function viewImgs() {
layer.photos({
photos: ${imgListJson}
, anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
}
function viewChangeImgs() {
layer.photos({
photos: ${backImgListJson}
, anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
}
</script>
</html>
扫一扫
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
