<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
<link rel="stylesheet" href="../static/css/jquery.upload.css" media="all"/>
|
<style>
|
#formAdvForm {
|
background-color: #f3f3f3;
|
}
|
#formAdvForm .layui-form-item {
|
margin-top: 20px;
|
margin-bottom: 0;
|
}
|
|
#formAdvForm .layui-form-item .layui-inline {
|
margin-bottom: 25px;
|
margin-right: 0;
|
}
|
|
.form-group-bottom {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 10px 20px;
|
background-color: #fff;
|
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
|
}
|
.cool-divider {
|
float: left;
|
margin: 4px 18px;
|
display: inline-block;
|
height: 32px;
|
width: 1px;
|
vertical-align: middle;
|
position: relative;
|
top: -.06em;
|
box-sizing: border-box;
|
-webkit-tap-highlight-color: transparent;
|
margin-top: 5px !important;
|
margin-bottom: 5px !important;
|
background: #c8d1dabd;
|
}
|
.issue-label {
|
display: inline-block;
|
float: left;
|
font-size: 16px;
|
font-weight: bolder;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
white-space: nowrap;
|
vertical-align: baseline;
|
border-radius: .25em;
|
}
|
.online-info {
|
display: inline-block;
|
float: left;
|
font-weight: bold;
|
text-shadow: 0 1px 0 rgb(0 0 0 / 20%);
|
padding: .3em 1em;
|
font-size: 85%;
|
height: 30px;
|
line-height: 30px;
|
color: #fff;
|
text-align: center;
|
white-space: nowrap;
|
vertical-align: baseline;
|
border-radius: .25em;
|
}
|
.online-success {
|
background-color: #5cb85c;
|
}
|
.online-fail {
|
background-color: #d9534f;
|
}
|
|
</style>
|
<!-- 正文开始 -->
|
<form class="layui-form" id="formAdvForm" lay-filter="formAdvForm">
|
<div class="layui-fluid" style="padding-bottom: 75px;">
|
<!-- 图片 -->
|
<div class="layui-card">
|
<div class="layui-card-header">图片</div>
|
<div class="layui-card-body">
|
<div class="upload-box clear">
|
<div class="image-box"></div>
|
</div>
|
</div>
|
</div>
|
<!-- 视频 -->
|
<div class="layui-card">
|
<div class="layui-card-header">视频</div>
|
<div class="layui-card-body">
|
<div class="upload-box clear">
|
<div id="issueVideo"></div>
|
</div>
|
</div>
|
</div>
|
<!-- 基本信息 -->
|
<div class="layui-card">
|
<div class="layui-card-header">基本信息</div>
|
<div class="layui-card-body">
|
|
<div class="layui-form-item layui-row">
|
<input name="id" type="hidden" />
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">故障编号:</label>
|
<div class="layui-input-block">
|
<input name="uuid" placeholder="未知" class="layui-input" disabled />
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">所属项目:</label>
|
<div class="layui-input-block">
|
<input name="hostId$" placeholder="请输入所属项目" class="layui-input" disabled/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">故障类型:</label>
|
<div class="layui-input-block">
|
<input name="issueType$" placeholder="未知" class="layui-input" disabled />
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">巡检人员:</label>
|
<div class="layui-input-block">
|
<input name="discoverer" placeholder="未知" class="layui-input" disabled />
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">联系方式:</label>
|
<div class="layui-input-block">
|
<input name="tel" placeholder="未知" class="layui-input" disabled />
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">发生日期:</label>
|
<div class="layui-input-block">
|
<input name="startTime$" placeholder="请选择时间" class="layui-input icon-date" autocomplete="off" disabled/>
|
</div>
|
</div>
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
<legend style="font-size: 13px">请补充</legend>
|
</fieldset>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">解决人员:</label>
|
<div class="layui-input-block">
|
<input name="dealer" placeholder="请输入..." class="layui-input" />
|
</div>
|
</div>
|
<!-- <div class="layui-inline layui-col-md4">-->
|
<!-- <label class="layui-form-label">更新日期:</label>-->
|
<!-- <div class="layui-input-block">-->
|
<!-- <input id="lastTime" name="lastTime$" placeholder="请选择时间" class="layui-input icon-date" autocomplete="off"/>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">流程:</label>
|
<div class="layui-input-block">
|
<select name="settle">
|
<option value="2">提交</option>
|
<option value="3">已读</option>
|
<option value="4">作业</option>
|
<option value="5">完成</option>
|
<option value="6">取消</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">处理日期:</label>
|
<div class="layui-input-block">
|
<input id="endTime" name="endTime$" placeholder="请选择时间" class="layui-input icon-date" autocomplete="off"/>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<!-- 巡检明细 -->
|
<div class="layui-card">
|
<div class="layui-card-header">巡检明细</div>
|
<div class="layui-card-body">
|
<div class="layui-form-item layui-row">
|
<div class="layui-inline layui-col-md12">
|
<label class="layui-form-label">问题概述:</label>
|
<div class="layui-input-block">
|
<textarea name="title" placeholder="未知" class="layui-textarea" disabled></textarea>
|
</div>
|
</div>
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
<legend style="font-size: 13px">请补充</legend>
|
</fieldset>
|
<div class="layui-inline layui-col-md12">
|
<label class="layui-form-label">故障原因:</label>
|
<div class="layui-input-block">
|
<textarea name="reason" placeholder="请输入..." class="layui-textarea"></textarea>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md12">
|
<label class="layui-form-label">解决办法:</label>
|
<div class="layui-input-block">
|
<textarea name="deal" placeholder="请输入..." class="layui-textarea"></textarea>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="form-group-bottom text-right">
|
<div>
|
<span class="online-info">在线，可以进行远程操作</span>
|
<div class="cool-divider"></div>
|
<span class="issue-label"></span>
|
</div>
|
<button class="layui-btn" lay-filter="refresh" lay-submit><i class="layui-icon"></i> 刷新 </button>
|
<button class="layui-btn layui-btn-normal" lay-filter="save" lay-submit><i class="layui-icon"></i> 保存 </button>
|
</div>
|
|
</form>
|
<!--<script type="text/javascript" src="../static/js/tools/jquery.upload.min.js" charset="utf-8"></script>-->
|
<script type="text/javascript" src="../static/js/upload/jquery.upload.js" charset="utf-8"></script>
|
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=24c671d7d8365d7eaff888498538452f"></script>
|
<script>
|
var map;
|
var issueId = top.issueByDetl;
|
layui.config({
|
base: baseUrl + "/static/layui/lay/modules/"
|
}).extend({
|
notice: 'notice/notice',
|
}).use(['form', 'table', 'laydate', 'notice', 'Player'], function () {
|
var $ = layui.jquery;
|
var form = layui.form;
|
var table = layui.table;
|
var laydate = layui.laydate;
|
var notice = layui.notice;
|
var Player = layui.Player;
|
|
form.render('select');
|
|
init();
|
function init(){
|
notice.msg('正在载入数据......', {icon: 4, position: "topRight"});
|
$.ajax({
|
url: baseUrl + "/issue/" + issueId + "/auth",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'GET',
|
success: function (res) {
|
notice.destroy();
|
if (res.code === 200) {
|
let issue = res.data;
|
top.issueByDetl = null;
|
// 编码
|
$('.issue-label').text(issue.uuid);
|
// 设备明细
|
form.val('formAdvForm', issue);
|
// 图片
|
initImgs(issue.id, issue.imgArr);
|
// 视频
|
if (!isEmpty(issue.videoArr) && issue.videoArr.length > 0) {
|
initVideo(issue.videoArr);
|
}
|
$('.online-info').attr("class", issue.online?"online-info online-success":"online-info online-fail");
|
$('.online-info').text(issue.settle$);
|
layDateRender();
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
} else {
|
layer.msg(res.msg, {icon: 2})
|
}
|
}
|
})
|
}
|
|
|
/* 渲染图片 */
|
function initImgs(sensorId, imgArr) {
|
if (imgArr == null) {
|
imgArr = [];
|
}
|
// https://gitee.com/gouguoyin/ajax-image-upload?_from=gitee_search#http://www.gouguoyin.cn/ajax-image-upload
|
$(".image-box").ajaxImageUpload({
|
fileInput : 'file',
|
postUrl : baseUrl + '/issue/upload.action', //上传的服务器地址
|
width : 180,
|
height : 180,
|
imageUrl: imgArr,
|
postData : { issueId: issueId },
|
maxNum: 5, //允许上传图片数量
|
allowZoom : true, //允许放大
|
maxSize : 3, //允许上传图片的最大尺寸，单位M
|
appendMethod : 'after',
|
before : function () {
|
// layer.msg('上传前回调函数2');
|
},
|
success : function(json){
|
},
|
complete : function () {
|
layer.msg('上传成功', {icon: 1});
|
},
|
delete : function (src) {
|
$.ajax({
|
url: baseUrl + "/issue/remove.action",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
data: {
|
issueId: issueId,
|
src: src
|
},
|
// async: false,
|
success: function (res) {
|
if (res.code === 200) {
|
layer.msg(res.msg, {icon: 1})
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
} else {
|
layer.msg(res.msg, {icon: 2})
|
}
|
}
|
})
|
},
|
error : function (e) {
|
layer.msg(e.msg + '(' + e.code + ')', {icon: 2});
|
}
|
});
|
}
|
|
/* 渲染视频 */
|
function initVideo(videoSrc) {
|
new Player({
|
id: 'issueVideo',
|
url: videoSrc[0], // 视频地址
|
// poster: 'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png', // 封面
|
fluid: true, // 宽度100%
|
playbackRate: [0.5, 1, 1.5, 2], // 开启倍速播放
|
pip: false, // 开启画中画
|
lang: 'zh-cn',
|
success: function () {
|
}
|
});
|
$('#issueVideo').css("width", "30%").css("padding-top", "20%");
|
}
|
|
/* 渲染laydate */
|
function layDateRender() {
|
laydate.render({
|
elem: '#endTime',
|
type: 'datetime'
|
});
|
|
laydate.render({
|
elem: '#lastTime',
|
type: 'datetime'
|
});
|
}
|
layDateRender();
|
|
|
/* 监听表单提交 */
|
form.on('submit(refresh)', function (data) {
|
init();
|
return false;
|
});
|
form.on('submit(save)', function (elem) {
|
let data = elem.field;
|
let param = {
|
id: Number(data.id),
|
uuid: data.uuid,
|
dealer: data.dealer,
|
endTime: data.endTime,
|
lastTime: data.lastTime,
|
reason: data.reason,
|
deal: data.deal,
|
settle: Number(data.settle)
|
}
|
$.ajax({
|
url: baseUrl + "/issue/process/auth",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
data: param,
|
contentType:'application/json;charset=UTF-8',
|
success: function (res) {
|
if (res.code === 200) {
|
layer.msg(res.msg, {icon: 1})
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
} else {
|
layer.msg(res.msg, {icon: 2})
|
}
|
}
|
})
|
return false;
|
});
|
|
});
|
</script>
|
