添加图片的显示

hdw

2018-11-03 85487dac45305634936f943149c9ad6ae1620190

添加图片的显示

 gx_tieta/WebRoot/batt-fault-manage.jsp

@@ -10,7 +10,7 @@
      <!-- 默认使用最高内核 -->

    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

    <base href="<%=basePath%>">

    <title>问题反馈</title>            <!-- 问题反馈  -->

    <title>机房问题记录</title>            <!-- 机房问题记录  -->

    <link rel="stylesheet" href="css/basic.css">

    <link rel="stylesheet" type="text/css" href="css/nocontent.css">

    <link rel="stylesheet" type="text/css" href="css/loading.css">

@@ -37,14 +37,14 @@
    <!--导航开始-->

    <jsp:include page="nav.jsp" flush="true"/>

    <div class="filter-container">

        <div class="filter-title"><a href="javascript:;">问题反馈</a></div>

        <div class="filter-title"><a href="javascript:;">机房问题记录</a></div>

        <div class="filter-content">

            <table>

                <tbody>

                    <tr>

                        <th>省</th>                                                        <!-- 省 -->

                        <th>市</th>                                                        <!-- 市 -->

                        <th>区/县</th>                                                    <!-- 市 -->

                        <th>区/县</th>                                                    <!-- 区/县 -->

                        <th><s:text name="Computer_site"/></th>                                                            <!-- 机房站点 -->

                    </tr>

                    <tr>

@@ -60,14 +60,11 @@
                        <td>

                            <select name="" id="station_name3"></select>

                        </td>

						
						
                    </tr>

                </tbody>

            </table>

        </div>

    </div>

	
    <!-- 导出表格数据的表单 -->

    <form id="export_excel" action="ExportTable.servlet" method="post">

        <input type="hidden" name="PageName" value="eleHistoryWarn.jsp"/>

@@ -81,14 +78,30 @@
    <div >

        <!-- 分页内容 -->

        <div id="paging">

            <a href="javascript:" id="search" class="layui-btn layui-btn-normal search">查找</a>

            <a class="layui-btn layui-btn-normal addbtn">添加</a>

            <a href="javascript:" id="export_table"  class="layui-btn layui-btn-normal outbtn"><s:text name="Export"/></a>        <!-- 导出 -->

            <a href="javascript:" id="search" class="search"><s:text name="Search"/><!-- 查询 --></a>

            <a href="javascript:" class="export"><s:text name="Export"/><!-- 导出 --></a>

            <s:text name="At_present"/><!-- 当前 --><span id="current">1/0</span>

            <span><s:text name="Each_page"/><!-- 每页 --><input type="text" id="number" value="10"/><s:text name="Item"/><!-- 条 --></span>

            &nbsp;&nbsp;<s:text name="Total_data"/><!-- 数据总量 --><span id="total">0</span>

            <a href="javascript:" id="home"><s:text name="HomePage"/><!-- 首页 --></a>

            <a href="javascript:" id="pre"><s:text name="Page_Up"/><!-- 上一页 --></a>

            <a href="javascript:" id="next_p"><s:text name="Page_Down"/><!-- 下一页 --></a>

            <a href="javascript:" id="last"><s:text name="End_Page"/><!-- 尾页 --></a>

            <span id="cont">

                <s:text name="Goto"/><!-- 转到 -->

                    <input type="text" id="page_num" value="1" onfocus="this.type='text'" autoComplete="off">

                    <input type="text" style="display:none;" id="456" value="1" onfocus="this.type='text'" autoComplete="off">

                <a href="javascript:" id="go"><s:text name="Jump"/><!-- 跳转 --></a>

            </span>

            <a href="javascript:" class="addbtn">添加</a>

        </div>

    </div>

    <!-- 关闭更新弹出框的按钮 -->

    <div id="closeUploadBtn"></div>

    <div id="details"></div>

    <div id="detailsOpts"></div>

    <!-- 存储显示图片详情的信息 -->

    <div id="detailImgs"></div>

    <script type="text/javascript" src="jqueryui/jquery-ui.min.js"></script>

    <script type="text/javascript" src="js/equip-stats-change.jquery.ui.js"></script>

    <script type="text/javascript" src="js/eleHistWarn1-jquery.ui.js"></script>

@@ -101,6 +114,7 @@
    <script type="text/javascript" src="src/layui.js"></script>

    <script type="text/html" id="toolBar">

        <a class="layui-btn layui-btn-xs" lay-event="details">故障详情</a>

        <a class="layui-btn layui-btn-xs" lay-event="delError">排除故障方案</a>

    </script>

    <script type="text/javascript">

        var permits;

@@ -121,30 +135,88 @@
            var tOptions = {

                elem: '#eleInfoTbl'

                ,toolbar: false

                ,defaultToolbar: ['exports', 'filter']

                ,cellMinWidth: 80

                ,cols: [[

                 {field:'station_name1', title:'省', align:'center'}

                ,{field:'city', title:'市', align:'center'}

                ,{field:'stationName3', title:'机房名称', align:'center'}

                ,{field:'note', title:'时间', align:'center'}

                ,{field:'error_en', title: '故障排除状态', align: 'center'}

                   ,{field:'error_dispose', title: '处理方案', align: 'center'}

                ,{field:'question', title:'故障描述', align:'center'},

                ,{fixed: 'right', title:'故障详情',toolbar: '#toolBar', width: 100}

                ,{fixed: 'right', title:'操作',toolbar: '#toolBar', width: 200, align:'center'}

                ]]

                ,data:[]

                ,page: true

                ,page: false

                ,height: 'full-280'

            };

            

            // 生成表格数据

            table.render(tOptions);

            

            table.on('tool(eleInfoTbl)', function(obj){

                //console.log(obj);

                var ev = obj.event;

                switch(ev) {

                    case 'details':

                        faultDetails(obj.data);

                        break;

                    default:

                        layer.msg('功能开发中...');

                        break;

                }

            	
            });

            
            // 查询故障详情

            function faultDetails(data) {

                var imgOpts = setDetailsOpts(data);

                $('#detailImgs').data('data', imgOpts);

                layer.open({

                    type: 2,

                    title: '<span style="font-weight:bold">>>故障详情</span>',

                    area: ['700px', '660px'],

                    fixed: false, //不固定

                    resize: false,

                    maxmin: false,

                    content: 'iframe/batt-fault-manage-details.html'

                });

            }

            
            // 构造结果

            function setDetailsOpts(data) {

                var rs={

                    num: data.num,

                    des: data.question?data.question:'暂无描述！！！'

                };

                var picture_num = data.picture_num;

                var imgs = [];

                switch(picture_num) {

                    case 1:

                        imgs = ['picture_one'];

                    break;

                    case 2:

                        imgs = ['picture_one','picture_two'];

                    break;

                    case 3:

                        imgs = ['picture_one', 'picture_two', 'picture_three'];

                    break;

                    case 4:

                        imgs = ['picture_one', 'picture_two', 'picture_three', 'picture_four'];

                    break;

                }

            	
                rs.imgs = imgs;

            	
                return rs;

            }

            
            function getData(a,b){

                var arr=[];

                for(i=0;i<a;i++){

                    arr.push({'station_name1':b,'city':b+i,'stationName3':b+i+1,'note':b+i+2,'question':'hahaha哈哈卡卡卡卡卡卡卡卡'+i});

                }

                   return arr

                   return arr;

            }

        

            $(document).on('click','.addbtn',function(){

@@ -168,6 +240,8 @@
            // 关闭上传图片的面板

            $('#closeUploadBtn').click(function() {

                layer.close(uploadIframe);

                // 查询内容

                searchfault();

            });        



            // 省-市-机房-电池组

@@ -299,7 +373,6 @@
                $.post("BattInfAction!serchStationName3", "json=" + JSON.stringify(tmp),

                function(data) {

                    var rs = JSON.parse(data.result);

                    console.info(rs);

                    if (rs.code == 1) {

                        var _data = rs.data;

                        var $select = $("#station_name3");

@@ -356,14 +429,20 @@
                        var data = JSON.parse(result.result);

                        if(data.code==1&&data.data.length>0){

                            data = data.data;

                            console.log(data);

                            for(var i=0;i<data.length;i++){

                                var tmp = {};

                                var _data = data[i];

                                var error_en = _data.error_en?'<a class="layui-btn layui-btn-xs layui-bg-blue">已排除</a>':'<a class="layui-btn layui-btn-xs layui-bg-red">排除中...</a>'

                                tmp.station_name1 = _data.stationName1;

                                tmp.city = _data.stationName2;

                                tmp.stationName3 = _data.stationName; 

                                tmp.note = _data.record_time;

                                tmp.question = _data.error_descript;

                                tmp.error_en = error_en;

                                tmp.num = _data.num;

                                tmp.county = _data.stationName5;

                                tmp.picture_num = _data.picture_num;

                                tOptions.data.push(tmp);

                            }

                        }else {


 gx_tieta/WebRoot/iframe/batt-fault-manage-add1.html

@@ -137,6 +137,7 @@
                    'record_time': date.format('yyyy-MM-dd hh:mm:ss'),    // 提交日期

                    'error_descript': '',

                    'stationId': '',

                    'error_dispose': '',

                    'picture_num':4

                },

                files: {}


 gx_tieta/WebRoot/iframe/batt-fault-manage-details.html

New file
@@ -0,0 +1,89 @@
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>故障详情</title>

    <link rel="stylesheet" type="text/css" href="../pages/css/base.css">

    <link rel="stylesheet" type="text/css" href="../jqueryui/jquery-ui.css">

    <link rel="stylesheet" type="text/css" href="../src/css/layui.css">

    <link rel="stylesheet" type="text/css" href="../pages/css/mylayui.css">

    <style type="text/css">

        html, body {

            width: 700px;

            min-width: 700px;

        }

        #imgCarousel .carousel-item div {

            text-align: center;

        }

        #imgCarousel img {

            width: auto;

            height: 100%;

        } 
    </style>

</head>

<body>

    <div class="layui-page-container mrl8 mrr8">

        <fieldset class="layui-elem-field">

              <legend>问题描述</legend>

              <div class="layui-field-box" id="detailsText">

		    	
              </div>

        </fieldset>

		
        <div class="layui-carousel" id="imgCarousel" lay-filter="imgCarousel">

          <div carousel-item="" class="carousel-item">

            <div>条目1</div>

            <div>条目2</div>

            <div>条目3</div>

            <div>条目4</div>

            <div>条目5</div>

          </div>

        </div>

    </div>

    
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

    <script type="text/javascript" src="../js/base.js"></script>

    <script type="text/javascript" src="../jqueryui/jquery-ui.min.js"></script>

    <script type="text/javascript" src="../src/layui.js"></script>

    <script type="text/javascript" src="../pages/js/mylayui.js"></script>

    <script type="text/html" id="detailImgs">

        <div carousel-item="" class="carousel-item">

            {{# layui.each(d.imgs, function(index, item){ }}

                <div><img src="Deverror_recordAction!serchByInfo?json={num:{{ d.num }},note:{{ item }} }"></div>

            {{# }); }}

        </div>

    </script>

    <script type="text/javascript">

        layui.use(['laytpl', 'carousel'], function() {

            var carousel = layui.carousel;

            var laytpl = layui.laytpl;

    		
            // 图片轮转配置项

            var options = {

                elem: '#imgCarousel',

                arrow: 'always',

                width: '100%',

                height: '500px'

            };

			
            //常规轮播

            var detailsImgs = carousel.render(options);

            var detailImgsTpl = $('#detailImgs').html();

            var imgs = parent.$('#detailImgs').data('data');

            $('#detailsText').text(imgs.des);

            // 添加模板

            laytpl(detailImgsTpl).render(imgs, function(html) {

                $('#imgCarousel').html(html);

                detailsImgs.reload(options);

            });

			
            // 切换事件

            carousel.on('change(imgCarousel)', function(obj) {

                //console.info(obj);

            });

        });

    </script>

</body>

</html>

 gx_tieta/WebRoot/pages/css/mylayui.css

@@ -127,4 +127,11 @@
/* width */

.w272 {

    width: 272px;

}

/* mrl */

.mrl8 {

    margin-left: 8px;

}

.mrr8 {

    margin-right: 8px;

}