<!DOCTYPE html>
<html>

<head>
    <title>工单查询</title>
    <style>
        html,
        body {
            height: 100%;
            margin:0px;
        }
        a{
            cursor: pointer;
        }
       .headtool {
            height: 38px;
            margin-bottom:0px;
        }
        .headtool a span{
            margin-top: 2px!important;
            position: relative;
            color: white; 
        }
      
        #editck   div{
            margin-top: 10px;
            margin-left: 10px;
        }
         #editck   div input{
           width: 250px;
           height: 25px;
        }
        button{
            width: 70px;
            height: 31px;
            background: #61abdd;
            border-radius: 1.3em;
            cursor: pointer;
        }
       .titlexx .xzcy-button{
            float: right;
            width: 60px;
            height: 20px;
            margin-right: 2px;
            color: #428AE7;
            border-color: #428AE7;
            line-height: 20px;
            padding: unset;
        }
        .layui-layer-title{
            background: linear-gradient(#3E8AE5, #61ABDD) !important;
            padding: unset !important;
            color:#e6e0e0 !important;
            text-align: center !important;
            font-size: 16px !important;
        }
        .layui-layer-btn-c{
            border-top: 1px solid #d2d2d2 !important;
        }
        .xzrytc-div{
            float: left;
            width: 600px;
            margin-top: 5px;
            margin-left: 20px;
        }
        .layui-laydate .layui-this{
            background: linear-gradient(#3E8AE5, #61ABDD) !important;
        }
        .layui-form-radio i{
            color: #3E8AE5 !important;
        }

        .layui-table-body {
            height: 155px !important;
        }

        /* //以下为批量导入样式 ===================================================================================*/
        .czshow {
            position: absolute;
            top: -32px;
            width: 100%;
            height: 30px;
            font: normal normal normal 18px/30px 'cursive';
        }

        .czdyshow {
            position: absolute;
            top: -32px;
            width: 100%;
            height: 30px;
            font: normal normal normal 18px/30px 'cursive';
        }

        .zkshow {
            position: absolute;
            top: -32px;
            width: 100%;
            height: 30px;
            font: normal normal normal 18px/30px 'cursive';
        }

        .zzdyshow {
            position: absolute;
            top: -32px;
            width: 100%;
            height: 30px;
            font: normal normal normal 18px/30px 'cursive';
        }

        .zdryshow {
            position: absolute;
            top: -40px;
            width: 100%;
            height: 30px;
            font: normal normal normal 18px/30px 'cursive';
        }

        .dyshow {
            position: absolute;
            top: -40px;
            width: 100%;
            height: 30px;
            font: normal normal normal 18px/30px 'cursive';
        }

        .blueButton {
            position: absolute;
            display: block;
            width: 100px;
            height: 40px;
            background-color: #00b3ee;
            color: #fff;
            text-decoration: none;
            text-align: center;
            font: normal normal normal 16px/40px 'Microsoft YaHei';
            cursor: pointer;
            border-radius: 4px;
        }

        .myzkFileUpload {
            position: absolute;
            display: block;
            width: 100px;
            height: 40px;
            opacity: 0;
        }

        .myczFileUpload {
            position: absolute;
            display: block;
            width: 100px;
            height: 40px;
            opacity: 0;
        }

        .zkzt-div {
            float: left;
            margin-top: 2px;
            font-size: 22px;
            margin-left: 5px;
            cursor: pointer;
        }
    </style>
     <link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css"/>
     <link rel="stylesheet" type="text/css" href="../css/editbuilding.css"/>
     <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
     <link rel="stylesheet" type="text/css" href="../css/formSelects-v4.css"/>
     <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-select.css">
    <script src="../js/vue.js"></script>
    <script src="../js/httpVueLoader.js"></script>

</head>
<body>

   <div class="left_div">
                <div id="fwgl">
                    <div class="leftitem_content">
                        <div class="pagetable">
                            <div class="zt-div">
                                <!-- <div class="xzcx-div">
                                     <div class="jkxzan-div">
                                        <button type="button" class="btn btn-default"  @click="insert()">新增</button>
                                     </div>  
                                </div> -->
                                <div class="downtop-div">
                                    <form class="layui-form" action="">
                                        <div class="layui-form-item jk-div">
                                            <label class="layui-form-label">开始时间</label>
                                            <div class="layui-input-block">
                                               <input id="beginTime"  class="form-control" type="text">
                                            </div>
                                        </div>
                                        <div class="layui-form-item jk-div">
                                            <label class="layui-form-label">结束时间</label>
                                            <div class="layui-input-block">
                                               <input id="endTime"  class="form-control" type="text">
                                            </div>
                                        </div>
                                        <div class="layui-form-item jk-div">
                                            <button @click="query()" type="button" style="margin-top: 2px;" class="btn btn-default">查询</button>
                                            <span style="color:red;margin-left:15px;margin-top:3px;display:inline-block"
                                                v-text="'查询结果:'+totals+'条'"></span>
                                        </div>
                                    </form>
                                </div>
                                <div class="downbottom-div">
                                    <table class="table table-hover table-expandable table-bordered">
                                        <thead>
                                            <tr>
                                                <th style="width:50px;">序号</th>
                                                <th>诉求人姓名</th>
                                                <th>诉求人手机号</th>
                                                <th>诉求人住址</th>
                                                <th>诉求内容</th>
												<th>诉求时间</th>
											    <th>诉求类型</th>
											    <th>诉求所在小区</th>
												<th>诉求所在网格</th>													
												 <!--<th>诉求图片URL</th>-->
												<th>诉求状态</th>
												<th>诉求处理人姓名</th>
												<th>诉求处理人手机号</th>
												<th>诉求处理回复内容</th>
												 <!--<th>诉求处理图片</th>-->
                                                <th>处理时间</th>
                                                <th colspan="2">图片详情</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(item,index) in datax ">
                                                <td style="text-align:center;width: 40px" class="short" v-text="index+1"></td>
                                                <td  class="short"><span v-text="item.subName">
												<td  class="short"><span v-text="item.subPhone">
												<td  class="short"><span v-text="item.subAddress">
												<td  class="short"><span v-text="item.content">
												<td  class="short"><span v-text="item.subTime">
												<td  class="short"><span v-text="item.orderType=='3'?'纠纷处理':item.orderType=='1'?'居家维修':item.orderType=='2'?'爱心帮助':item.orderType=='4'?'绿化养护':item.orderType=='5'?'蚊虫消杀':item.orderType=='6'?'其他':'未知'">
												<td  class="short"><span v-text="item.orderArea">
												<td  class="short"><span v-text="item.gird">
												<!--<td  class="short"><span v-text="orderImages">-->
												<td  class="short"><span v-text="item.orderStatus=='2'?'已处理':item.orderStatus=='1'?'未处理':'处理中'">
												<td  class="short"><span v-text="item.disposeName">
												<td  class="short"><span v-text="item.disposePhone">
												<td  class="short"><span v-text="item.disposeContent">
												 <!--<td  class="short"><span v-text="disposeImages">-->
												<td  class="short"><span v-text="item.disposeTime">
												<td class="short" style="text-align:center;text-decoration:underline">
                                                    <a v-show="item.orderImages" @click="detail(item.orderImages)">诉求</a>
													 
                                                </td>
                                                <td class="short" style="text-align:center;text-decoration:underline">
                                                <a  v-show="item.disposeImages" @click="detail(item.disposeImages)">处理</a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="pages-div">
                                        <div class="fy" id="demo3"></div>
                                        <span class="fy-span" id=""></span>
                                    </div>
                                </div>
                            </div>
                    </div>
                    </div>
                </div>
				</div>
    </div>
<!--楼栋建筑弹出 -->
      
        <div class="layer-icon" style="background-color: #59a4de">
           
        </div>         

</body>
<script src="../js/http_request.js"></script>
<script src="../js/jquery-2.2.3.js"></script>
<script src="../js/layui/layui.js"></script>
<script src="../js/formSelects-v4.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/bootstrap-select.js"></script>
<script src="../js/xlsx.core.min.js"></script>


<script>
    var zdry_conf=JSON.parse(' <%-JSON.stringify(zdry_conf)%>');
	//分页参数
 var page_parameter = {
    index: 1,
    pagerows: 15,
    first: true
};
var myUser=getCookie('user');
if(!myUser){
    layer.msg('无权限进入');
}else{
    myUser=JSON.parse(myUser);
}
//layui初始化
layui.use(['form','laypage','laydate','table','element'], function(){
    laydate = layui.laydate
    ,laypage=layui.laypage
    ,table=layui.table;
    //日期
    laydate.render({
    elem: '#beginTime',
    format: 'yyyy-MM-dd HH:mm:ss',
    value:getStartDate()
    });
    laydate.render({
    elem: '#endTime',
    format: 'yyyy-MM-dd HH:mm:ss',
    value:getDate()
    
    });
    form = layui.form;
    form.render(); //更新全部    
    initorder();

    setInterval(function() {
        initorder();

   },60000);

    // clearInterval(t)  

});     

function   getDate(){

  return new Date();

}

function   getStartDate(){
    var day1 = new Date();    
    day1.setDate(day1.getDate() - 1);
    return day1;

}
//楼栋
var vue_rydata = new Vue({
    el: '#fwgl',
    data: {
        datax: [],
        beginTime:'',
        endTime:'' ,
        totals:0
    },
    methods: {
        query:function(){
             initorder();
        },
        detail:function(orderImages){  
				data=orderImages.split(',');
				var json = [];
				for(var i=0;i<data.length;i++){
                json.push({"src":data[i]});
                }
				detail(json);
		 
         }
    }
});


	//人员数据查询
function initorder(){
     //日期
     laydate.render({
    elem: '#beginTime',
    format: 'yyyy-MM-dd HH:mm:ss',
    value:getStartDate()
    });
    laydate.render({
    elem: '#endTime',
    format: 'yyyy-MM-dd HH:mm:ss',
    value:getDate()
    
    });
    page_parameter=Object.assign({},{"beginTime":$("#beginTime").val(),"endTime":$("#endTime").val(),"page":'1',"pageSize":'15'});

    
    getByAjaxWithCode("/alarm/list?beginTime="+$("#beginTime").val()+"&endTime="+$("#endTime").val()+"&page=1&pageSize=15", resultx => {
        vue_rydata.totals=resultx.total;
        laypage.render({
            elem: 'demo3',
            limit: 15,
            count: resultx.total,
            theme: '#337ab7',
            jump: function (data, first) {
                if (!first) {
                    getByAjaxWithCode("/alarm/list?beginTime="+$("#beginTime").val()+"&endTime="+$("#endTime").val()+"&page="+data.curr+"&pageSize=15", result => {
						
						if(result.content.length==0){
								layer.msg("未查找到数据");	
                                vue_rydata.datax = result.content;
						}
                    });
                } else {
                    vue_rydata.datax = resultx.content;
                    if(resultx.content.length==0){
                        layer.msg("未查找到数据");
                    }
                }
            }
        });
    });
}
//展示图片信息

function  detail(pdata) {
//图片加载到什么

			layer.photos({
				photos: {data:pdata},
				anim: 5,
			  });		

}
</script>

</html>