t1
/
ZLPMS


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
							
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>中联区卫投诉登记</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="~/Content/Scripts/plugins/mui/css/mui.css" rel="stylesheet" />
    <script src="~/Content/Scripts/jquery.min.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/mui.js"></script>
    <link href="~/Content/Scripts/plugins/mui/css/mui.picker.all.css" rel="stylesheet" />
    <script src="~/Content/Scripts/plugins/mui/js/mui.picker.all.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/iconfont.deal.js"></script>
</head>
<body>
    <style>
        .mui-card-footer {
            max-height: 15px;
        }

        .mui-card-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }


        .we {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .ncs {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .boxx {
            flex: 1;
            height: 60px;
            align-self: flex-start;
        }

        .overf {
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .icon {
            width: 2.5em;
            height: 2.5em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        
    </style>
    <!-- 主界面菜单同时移动 -->
    <!-- 侧滑导航根容器 -->
    <div class="mui-off-canvas-wrap mui-draggable mui-scalable">
        <!-- 主页面容器 -->


        <aside class="mui-off-canvas-right mui-transitioning" id='sss'>
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!-- 菜单具体展示内容 -->
                    <h5 class="mui-content-padded">投诉种类</h5>
                    <ul class="mui-table-view mui-table-view-chevron" id="tab">
                        <li class='mui-table-view-cell' style='height:47px;padding-right: 0px'><div class='mui-input-row mui-radio' style="bottom:25%"><label>全部</label><input name='radio' id='' type='radio'></div></li>
                    </ul>


                    <h5 class="mui-content-padded">时间</h5>
                    <button id="dateBegin" style="padding-bottom:1px;padding-top:1px" data-options="{}" class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
                    <p style="margin-left: 10px;">至</p>
                    <button id="dateEnd" style="padding-bottom:1px;padding-top:1px;margin-bottom:50px" data-options="{}" class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
                    <a id="Type" style="display:none"></a>
                </div>

            </div>
            <nav class="mui-bar mui-bar-tab">
                <a class="mui-tab-item mui-active">
                    <button id="result" type="button" style="width: 200px;" data-loading-text="提交中" class="mui-btn mui-btn-primary">确认</button>
                </a>
            </nav>
        </aside>
        <div class="mui-inner-wrap  mui-transitioning">
            <header class="mui-bar mui-bar-nav">
                <a class="mui-pull-left"><img style="width: 45px;margin-top: 10px;" src="/Content/Images/zlpng.png" /></a>
                <h1 class="mui-title">投诉记录</h1>
                <button onclick="QueryC()" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">重置</button>
            </header>

            <nav class="mui-bar mui-bar-tab" style="touch-action:none; ">
                <a class="mui-tab-item " id="NewComp">
                    <span class="mui-icon mui-icon-compose"></span>
                    <span class="mui-tab-label">新投诉</span>
                </a>
                <a class="mui-tab-item mui-active">
                    <span class="mui-icon mui-icon-chatboxes"></span>
                    <span class="mui-tab-label">投诉记录</span>
                </a>
                <a class="mui-tab-item" id="ComplaintUser">
                    <span class="mui-icon  mui-icon-contact"></span>
                    <span class="mui-tab-label">我的</span>
                </a>

            </nav>

            <!-- 主页面内容容器 -->
            <div class="mui-content mui-scroll-wrapper" id="scr1">

                <div class="mui-scroll">


                    <!-- 主界面具体展示内容 -->
                    <ul class="mui-table-view mui-grid-view mui-grid-9" style="margin-top: 2px;margin-bottom: 2px;height: 40px;">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="bottom: 10px;padding-bottom: 0px;">
                            <a href="#middlePopover">状态</a>
                        </li>

                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="bottom: 10px;float: right;padding-bottom: 0px;">
                            <a href="#sss">更多筛选</a>
                        </li>

                    </ul>

                    <div class="mui-input-row mui-search" style="margin-top: 15px;">
                        <input style="font-size:15px" id="search" type="search" class="mui-input-clear" placeholder="输入投诉标题">
                    </div>

                    <div id="MyComplaint">


                    </div>

                </div>
                <div class="mui-off-canvas-backdrop"></div>
            </div>


        </div>

    </div>
    <div id="middlePopover" class="mui-popover" style="width: 160px;">
        <ul class="mui-table-view mui-table-view-radio">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" onclick="AddStatus('')">全部</a>
            </li>
            <li class="mui-table-view-cell ">
                <a class="mui-navigate-right" onclick="AddStatus(0)">未处理</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" onclick="AddStatus(1)">处理中</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" onclick="AddStatus(2)">已处理</a>
            </li>
        </ul>
        <a id="status" style="display:none"></a>
    </div>
    <script type="text/javascript">
        var t;
        $(document).ready(function () {

            Load();
            QueryComplaint();

        });

        (function ($) {

            mui.init({
                pullRefresh: {
                    container: "#scr1",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                    down: {
                        style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                        auto: false,//可选,默认false.首次加载自动上拉刷新一次
                        callback: pullfresh//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    }
                }
            });
            mui('#scr1').scroll();
            mui('#offCanvasSideScroll').scroll();
            ///实例化日期组件
            var btns = $('.btn');
            btns.each(function (i, btn) {
                btn.addEventListener('tap', function () {
                    var _self = this;
                    if (_self.picker) {
                        _self.picker.show(function (rs) {
                            btn.innerHTML = rs.text;
                            _self.picker.dispose();
                            _self.picker = null;
                        });
                    } else {
                        var optionsJson = this.getAttribute('data-options') || '{}';
                        var options = JSON.parse(optionsJson);
                        var id = this.getAttribute('id');

                        _self.picker = new $.DtPicker(options);
                        _self.picker.show(function (rs) {
                            /*
                             * rs.value 拼合后的 value
                             * rs.text 拼合后的 text
                             * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                             * rs.m 月，用法同年
                             * rs.d 日，用法同年
                             * rs.h 时，用法同年
                             * rs.i 分（minutes 的第二个字母），用法同年
                             */
                            btn.innerHTML = rs.text;

                            _self.picker.dispose();
                            _self.picker = null;
                        });
                    }

                }, false);
            })


        })(mui);
        function pullfresh() {
            setTimeout(function () {
                $("#MyComplaint").empty();
                QueryComplaint();
                mui('#scr1').pullRefresh().endPulldownToRefresh();
            }, 1500);
               
        
        }
        function Load() {
            //获取投诉种类

            mui.ajax('/Complaint/GetCodeCombobox/?ClassificationID=B0BF0EDD-37D7-47D4-9ED9-9D0F2DDCA6A0', {
                data: {
                },
                dataType: 'json',//服务器返回json格式数据
                type: 'post',//HTTP请求类型
                timeout: 10000,//超时时间设置为10秒；
                headers: { 'Content-Type': 'application/json' },
                success: function (data) {
                    $.each(data, function (idx, json) {

                        $("#tab").append("<li  class='mui-table-view-cell' style='height:47px;padding-right: 0px;' ><div class='mui-input-row mui-radio' style='bottom:15%'><label>" + json.显示名 + "</label><input name='radio' id=" + json.ID + " type='radio'></div></li>");
                    });
                },
                error: function (xhr, type, errorThrown) {

                    console.log(type);
                }
            });
            

            ///进入详细页面
            mui("#MyComplaint").on('tap', 'div', function () {
                var id = this.id;
                window.location.href = "/Complaint/ComplaintDetail/" + id;
            });
            ///进入个人信息
            document.getElementById('ComplaintUser').addEventListener('tap', function () {
                //mui.openWindow({
                //    url: '/Complaint/ComplaintUser'
                //});
                window.location.href = '/Complaint/ComplaintUser'
            });
            ///进入新投诉
            document.getElementById('NewComp').addEventListener('tap', function () {
                //mui.openWindow({
                //    url: '/Complaint/NewComplaint'
                //});
                window.location.href = '/Complaint/NewComplaint'
            });
            ///筛选条件
            document.getElementById('result').addEventListener('tap', function () {
                var typeCode = $('input:radio:checked').attr("id");
                $("#Type").html(typeCode);
                $("#MyComplaint").empty();
                QueryComplaint();
                mui('.mui-off-canvas-wrap').offCanvas('show');

            });
            $("#search").bind('change', function () {
                $("#MyComplaint").empty();
                QueryComplaint();
            })

        }


        function QueryC() {
            //mui.openWindow({
            //    url: '/Complaint/QueryComplaint',
            //    show: {
            //        autoShow: false
            //    }, waiting: {
            //        autoShow: true,//自动显示等待框，默认为true
            //        title: '正在加载...',//等待对话框上显示的提示内容

            //    }
            //});
            window.location.href = '/Complaint/QueryComplaint'
        }
        //重置
        function defaul() {
           
        }

        ///处理状态
        function AddStatus(status) {

            $("#status").html(status);
            $("#MyComplaint").empty();
            QueryComplaint();
            mui('#middlePopover').popover('hide');

        }
        ///按照条件查询投诉
        function QueryComplaint() {
            t = mui.showLoading("加载中....", 'div');
            var status = $("#status").html();//取得状态
            var Type = $("#Type").html();//取得投诉类型
            var dateBegin = $("#dateBegin").html();///开始时间
            var dateEnd = $("#dateEnd").html();///结束时间
            var search = $("#search").val();///搜索内容
            var url = "/Complaint/QueryPersonelComplaint";

            $.post(url, { "status": status, "Type": Type, "dateBegin": dateBegin, "dateEnd": dateEnd, "search": search }, function (data) {
                $.each(data, function (idx, json) {
                    var type2;
                    if (json.状态 == "0") {
                        type2 = "daichuli";

                    }
                    if (json.状态 == "1") {
                        type2 = "chulizhong";

                    }
                    if (json.状态 == "2") {
                        type2 = "yiwancheng";

                    }
                    var src = "/Content/Images/zlpng.png";
                    if (json.附件路径 != null && json.附件路径 != "") {
                        src = json.附件路径;
                    }

                    $("#MyComplaint").append("<div id='" + json.ID + "' class='mui-card' style='margin: 0px;margin-top: 5px;'><div class='mui-card-content'><div style='width:30%;margin:2px 10px 2px 2px'><img src='" + src + "' style='width:100%;' ></div><div style='flex:1'><div class='ncs'><div class='we'><div class='overf' style='-webkit-line-clamp: 1;width:150px;margin-top:10px'>" + json.投诉事件 + "</div><div style='margin-right:5px'><svg class='icon' aria-hidden='true'><use xlink:href='#icon-" + type2 + "'></use></svg></div></div><div class='boxx'><p class='overf' style='-webkit-line-clamp: 2;'>" + json.投诉描述 + "</p></div><div class='we'><div><p>" + json.显示名 + "</p></div><div><p style='margin-right:5px'>" + json.投诉时间 + "</p></div></div></div></div></div></div>");


                });
                mui.hideLoading(t);

            }).error(function (xhr, errorText, errorType) {

            });;
        }


    </script>

</body>
</html>