| | |
| | | <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; |
| | |
| | | margin-bottom: 5px !important; |
| | | background: #c8d1dabd; |
| | | } |
| | | .issue-label { |
| | | |
| | | .card-body-item { |
| | | 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; |
| | | border-right: 1px solid #e0e0e0; |
| | | width: 250px; |
| | | padding: 0 30px 0 10px; |
| | | } |
| | | |
| | | </style> |
| | | <!-- 正文开始 --> |
| | | <form class="layui-form" id="formAdvForm" lay-filter="formAdvForm"> |
| | | <form class="layui-form" id="formAdvForm" lay-filter="formAdvForm" style="height: 100%"> |
| | | <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 class="layui-card-header"> |
| | | <div> |
| | | <i class="layui-icon" style="font-size: 20px;color: #1890ff;font-weight: bold"></i> |
| | | <span id="form-name" style="margin: 0 6px;font-size: 18px;font-weight: bold;letter-spacing: 1px"></span> |
| | | </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 class="card-body-item"> |
| | | <div class="header-sub"> |
| | | 电话 |
| | | </div> |
| | | <div class="header-desc" id="form-tel"> |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="card-body-item"> |
| | | <div class="header-sub"> |
| | | 详细地址 |
| | | </div> |
| | | <div class="header-desc" id="form-addr"> |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="card-body-item"> |
| | | <div class="header-sub"> |
| | | 负责人 |
| | | </div> |
| | | <div class="header-desc" id="form-director" style="color: #006fdb;"> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 基本信息 --> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">基本信息</div> |
| | | <div class="layui-card-body"> |
| | | <div class="layui-row"> |
| | | <div class="layui-col-md9"> |
| | | <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 class="layui-form-item layui-row"> |
| | | <input name="id" type="hidden" /> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">客户代号:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="uuid" class="layui-input" disabled /> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">所属部门:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="deptId$" class="layui-input" disabled /> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">客户类别:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="cstmrType$" class="layui-input" disabled /> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">客户关系:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="rela" class="layui-input" disabled/> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">省市区:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="pcd$" class="layui-input" disabled /> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">客户联系人:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="contacts" class="layui-input" disabled /> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">区分:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="type$" class="layui-input" disabled /> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">备注:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="remarks" class="layui-input" 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-md6"> |
| | | <label class="layui-form-label">添加人员:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="createBy$" class="layui-input" disabled/> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">修改人员:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="updateBy$" class="layui-input" disabled/> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">添加时间:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="createTime$" class="layui-input icon-date" autocomplete="off" disabled/> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline layui-col-md6"> |
| | | <label class="layui-form-label">修改时间:</label> |
| | | <div class="layui-input-block"> |
| | | <input name="updateTime$" class="layui-input icon-date" autocomplete="off" disabled/> |
| | | </div> |
| | | </div> |
| | | </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 class="layui-col-md3" style="width: 24%;margin-left: 1%"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header"> |
| | | <span>跟进人</span> |
| | | <span style="float: right;cursor: pointer;"> |
| | | <i class="layui-icon" style="font-size: 20px;color: #1890ff;"></i> |
| | | </span> |
| | | </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 class="layui-card-body"> |
| | | <table id="originTable" lay-filter="originTable"></table> |
| | | </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; |
| | | var cstmrId = top.cstmrByMore; |
| | | $('.layui-layer-close').hide(); |
| | | layui.config({ |
| | | base: baseUrl + "/static/layui/lay/modules/" |
| | | }).extend({ |
| | | notice: 'notice/notice', |
| | | }).use(['form', 'table', 'laydate', 'notice', 'Player'], function () { |
| | | }).use(['form', 'table', 'laydate', 'notice'], 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'); |
| | | |
| | |
| | | function init(){ |
| | | notice.msg('正在载入数据......', {icon: 4, position: "topRight"}); |
| | | $.ajax({ |
| | | url: baseUrl + "/issue/" + issueId + "/auth", |
| | | url: baseUrl + "/cstmr/" + cstmrId + "/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); |
| | | let cstmr = res.data; |
| | | top.cstmrByMore = null; |
| | | $("#form-name").html(cstmr.name); |
| | | if (cstmr.tel) {$("#form-tel").html(cstmr.tel);} |
| | | if (cstmr.addr) {$("#form-addr").html(cstmr.addr);} |
| | | if (cstmr.director$) {$("#form-director").html(cstmr.director$);} |
| | | // 设备明细 |
| | | 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$); |
| | | form.val('formAdvForm', cstmr); |
| | | layDateRender(); |
| | | } else if (res.code === 403) { |
| | | top.location.href = baseUrl + "/"; |
| | |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | |
| | | /* 渲染图片 */ |
| | | 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 */ |