#

luxiaotao1123

2022-03-01 c27ad3dcb8b67a6c10a99c98b9bd6dd1f08b7967

 src/main/webapp/views/issue/issue_detl.html

@@ -1,5 +1,5 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../static/css/jquery.upload.css" media="all"/>
<link rel="stylesheet" href="../../static/css/jquery.upload.css" media="all"/>
<style>
    #formAdvForm {
        background-color: #f3f3f3;
@@ -38,7 +38,7 @@
        margin-bottom: 5px !important;
        background: #c8d1dabd;
    }
    .sensor-label {
    .issue-label {
        display: inline-block;
        float: left;
        font-size: 16px;
@@ -55,7 +55,7 @@
        float: left;
        font-weight: bold;
        text-shadow: 0 1px 0 rgb(0 0 0 / 20%);
        padding: .3em .6em;
        padding: .3em 1em;
        font-size: 85%;
        height: 30px;
        line-height: 30px;
@@ -71,19 +71,11 @@
    .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 id="map" style="width: 100%; height: 200px"></div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- 图片 -->
        <div class="layui-card">
            <div class="layui-card-header">图片</div>
@@ -93,181 +85,122 @@
                </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>
                        <label class="layui-form-label">故障编号:</label>
                        <div class="layui-input-block">
                            <input name="uuid" placeholder="请输入设备编号" class="layui-input"/>
                            <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"/>
                            <input name="hostId$" placeholder="请输入所属项目" class="layui-input" disabled/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">ccid:</label>
                        <label class="layui-form-label">故障类型:</label>
                        <div class="layui-input-block">
                            <input name="sim" placeholder="请输入sim卡号" class="layui-input"/>
                            <input name="issueType$" placeholder="未知" class="layui-input" disabled />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">系统状态:</label>
                        <label class="layui-form-label">巡检人员:</label>
                        <div class="layui-input-block">
                            <select name="status">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            <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>
                        <label class="layui-form-label">处理日期:</label>
                        <div class="layui-input-block">
                            <input id="formAdvDateSel1" name="createTime$" 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">
                            <input name="createBy$" placeholder="请输入添加人员" class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md12">
                        <label class="layui-form-label ">地理位置:</label>
                        <div class="layui-input-block">
                            <input name="locationMore" placeholder="未知" class="layui-input" disabled/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md12">
                        <label class="layui-form-label ">具体描述:</label>
                        <div class="layui-input-block">
                            <input name="desc" placeholder="暂无" class="layui-input"/>
                            <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-header">巡检明细</div>
            <div class="layui-card-body">

                <div class="layui-form-item layui-row">
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">主题-topic:</label>
                    <div class="layui-inline layui-col-md12">
                        <label class="layui-form-label">问题概述:</label>
                        <div class="layui-input-block">
                            <input name="topic" placeholder="请输入主题" class="layui-input"/>
                            <textarea name="title" placeholder="未知" class="layui-textarea" disabled></textarea>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">地址-ip:</label>
                    <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">
                            <input name="ip" placeholder="请输入ip地址" class="layui-input"/>
                            <textarea name="reason" placeholder="请输入..." class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">端口-port:</label>
                    <div class="layui-inline layui-col-md12">
                        <label class="layui-form-label">解决办法:</label>
                        <div class="layui-input-block">
                            <input type="number" name="port" placeholder="请输入端口" class="layui-input"
                                   lay-verType="tips" lay-verify="number" required/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">信号值:</label>
                        <div class="layui-input-block">
                            <input type="number" name="signal" placeholder="请输入信号值" class="layui-input"
                                   lay-verType="tips" lay-verify="number" required/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">电池电量:</label>
                        <div class="layui-input-block">
                            <input type="number" name="battery" placeholder="请输入电量" class="layui-input"
                                   lay-verType="tips" lay-verify="number" required/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">环境温度-℃:</label>
                        <div class="layui-input-block">
                            <input type="number" name="tempe" placeholder="请输入温度" class="layui-input"
                                   lay-verType="tips" lay-verify="number" required/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">充电状态:</label>
                        <div class="layui-input-block">
                            <select name="charge">
                                <option value="1">充电中</option>
                                <option value="0">不在充电</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">倾斜角度-°:</label>
                        <div class="layui-input-block">
                            <input type="number" name="tiltZ" placeholder="倾斜角度" class="layui-input"
                                   lay-verType="tips" lay-verify="number" required/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">破损状态:</label>
                        <div class="layui-input-block">
                            <select name="worn">
                                <option value="1">已破损</option>
                                <option value="0">未破损</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">水位情况:</label>
                        <div class="layui-input-block">
                            <select name="overflow">
                                <option value="0">水位正常</option>
                                <option value="1">水位超标</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">光伏功能:</label>
                        <div class="layui-input-block">
                            <select name="agc">
                                <option value="1">有</option>
                                <option value="0">没有</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">形状:</label>
                        <div class="layui-input-block">
                            <select name="shape">
                                <option value="1">圆形</option>
                                <option value="2">长方形</option>
                                <option value="3">正方形</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">尺寸:</label>
                        <div class="layui-input-block">
                            <input type="number" name="size" placeholder="请输入尺寸" class="layui-input"/>
                            <textarea name="deal" placeholder="请输入..." class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 报文日志 -->
        <div class="layui-card">
            <div class="layui-card-header">报文日志</div>
            <div class="layui-card-body">
                <table id="sensorLogTable" lay-filter="sensorLogTable"></table>
            </div>
        </div>
    </div>
@@ -276,28 +209,31 @@
        <div>
            <span class="online-info">在线，可以进行远程操作</span>
            <div class="cool-divider"></div>
            <span class="sensor-label"></span>
            <span class="issue-label"></span>
        </div>
        <button class="layui-btn" lay-filter="refresh" lay-submit><i class="layui-icon">&#xe666;</i>&emsp;刷新&emsp;</button>
        <button class="layui-btn layui-btn-normal" lay-filter="save" lay-submit><i class="layui-icon">&#xe654;</i>&emsp;保存&emsp;</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="../../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-layer-close').hide();
    layui.config({
        base: baseUrl + "/static/layui/lay/modules/"
    }).extend({
        notice: 'notice/notice',
    }).use(['form', 'table', 'laydate', 'notice'], function () {
    }).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');

@@ -311,30 +247,21 @@
                success: function (res) {
                    notice.destroy();
                    if (res.code === 200) {
                        var issue = res.data;
                        top.sensorByDetl = null;
                        // 地图
                        // map = new AMap.Map('map', {
                        //     resizeEnable: true,
                        //     zoom: 13,
                        //     center: [sensor.lon, sensor.lat]
                        // });
                        // marker = new AMap.Marker({
                        //     icon: "https://dz-admin.oss-cn-hangzhou.aliyuncs.com/other/marker.png",
                        //     position:[sensor.lon, sensor.lat]
                        // });
                        // marker.setMap(map);
                        // 设备唯一码
                        $('.sensor-label').text(issue.uuid);
                        let issue = res.data;
                        top.issueByDetl = null;
                        // 编码
                        $('.issue-label').text(issue.uuid);
                        // 设备明细
                        form.val('formAdvForm', issue);
                        // 日志表格
                        initLogTable(issue.id);
                        // 图片
                        initImgs(sensor.id, issue.imgArr);
                        // 在线情况
                        $('.online-info').attr("class", sensor.online?"online-info online-success":"online-info online-fail");
                        $('.online-info').text(sensor.online?"在线，可以进行远程操作":"离线，不能进行远程操作");
                        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 {
@@ -344,64 +271,6 @@
            })
        }

        /* 渲染表格 */
        var LogTb;
        function initLogTable(sensorId){
            if (sensorId == null) {
                return false;
            }
            if (typeof LogTb === "undefined") {
                LogTb = table.render({
                    elem: '#sensorLogTable',
                    headers: {token: localStorage.getItem('token')},
                    url: baseUrl+'/sensorLog/list/auth',
                    where: {sensor_id: sensorId},
                    page: true,
                    limit: 10,
                    limits: [10, 30, 50, 100, 200, 500],
                    cols: [[
                        {type: 'numbers', title: '#'}
                        // ,{field: 'id', align: 'center',title: 'ID'}
                        // ,{field: 'hostId$', align: 'center',title: '授权商户', templet: '#hostTpl', width: 140}
                        // ,{field: 'sensorId$', align: 'center',title: '设备编号'}
                        // ,{field: 'senserType$', align: 'center',title: '设备类型'}
                        ,{field: 'data', align: 'center',title: '报文'}
                        ,{field: 'createTime$', align: 'center',title: '时间', minWidth: 200, width: 200}
                        // ,{field: 'memo', align: 'center',title: '备注'}
                    ]],
                    request: {
                        pageName: 'curr',
                        pageSize: 'limit'
                    },
                    parseData: function (res) {
                        return {
                            'code': res.code,
                            'msg': res.msg,
                            'count': res.data.total,
                            'data': res.data.records
                        }
                    },
                    response: {
                        statusCode: 200
                    },
                    done: function(res, curr, count) {
                        $('#sensorLogTable').next().find('.layui-table-body').find("table" ).find("tbody").children("tr").on('dblclick', function(){
                            var id = JSON.stringify($('#sensorLogTable').next().find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
                            layer.open({
                                type: 1,
                                shade: false,
                                area: '500px',
                                title: false,
                                content: "<div style='color: #ffffff;font-size: 18px;overflow: hidden;" +
                                    "background-color: #5FB878;padding: 15px 10px;word-break:break-all;'>" + res.data[id].data + "</div>"
                            });
                        })
                    }
                });
            } else {
                LogTb.reload();
            }
        }

        /* 渲染图片 */
        function initImgs(sensorId, imgArr) {
@@ -411,11 +280,11 @@
            // https://gitee.com/gouguoyin/ajax-image-upload?_from=gitee_search#http://www.gouguoyin.cn/ajax-image-upload
            $(".image-box").ajaxImageUpload({
                fileInput : 'file',
                postUrl : baseUrl + '/sensor/upload.action', //上传的服务器地址
                postUrl : baseUrl + '/issue/upload.action', //上传的服务器地址
                width : 180,
                height : 180,
                imageUrl: imgArr,
                postData : { sensorId: sensorId },
                postData : { issueId: issueId },
                maxNum: 5, //允许上传图片数量
                allowZoom : true, //允许放大
                maxSize : 3, //允许上传图片的最大尺寸，单位M
@@ -430,11 +299,11 @@
                },
                delete : function (src) {
                    $.ajax({
                        url: baseUrl + "/sensor/remove.action",
                        url: baseUrl + "/issue/remove.action",
                        headers: {'token': localStorage.getItem('token')},
                        method: 'POST',
                        data: {
                            sensorId: sensorId,
                            issueId: issueId,
                            src: src
                        },
                        // async: false,
@@ -455,17 +324,74 @@
            });
        }

        /* 渲染视频 */
        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 */
        laydate.render({
            elem: '#createTime\\$',
            type: 'datetime'
        });
        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;
            notice.msg('正在拼命修改数据......', {icon: 4, position: "topRight"});
            $.ajax({
                url: baseUrl + "/issue/process/auth",
                headers: {'token': localStorage.getItem('token')},
                contentType: 'application/json;charset=UTF-8',
                method: 'POST',
                data: JSON.stringify({
                    id: Number(data.id),
                    uuid: data.uuid,
                    dealer: data.dealer,
                    settle: Number(data.settle),
                    endTime: top.strToDate(data.endTime$),
                    // lastTime: data.lastTime,
                    reason: data.reason,
                    deal: data.deal,
                }),
                success: function (res) {
                    notice.destroy();
                    if (res.code === 200) {
                        notice.success({title: '消息通知', message: res.msg});
                        $('.layui-layer-close').click();
                    } else if (res.code === 403) {
                        top.location.href = baseUrl + "/";
                    } else {
                        notice.error({title: '消息通知', message: res.msg});
                    }
                }
            })
            return false;
        });

    });
</script>