ZLPMS/PMS.WebUI/Views/MobileProblem/Home.cshtml


@{
    ViewBag.Title = "Home";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
    var url = HttpContext.Current.Request.Url;
    var webSite = String.Concat(url.Scheme, "://", url.Authority);
}
<link href="~/Content/Style/MobileProductRegist/iconfont.css?v=1.0" rel="stylesheet" />
<link href="~/Content/Style/MobileProductRegist/HomeIcon.css" rel="stylesheet" />
<script src="~/Content/Scripts/babel.min.js"></script>
<script src="~/Content/Scripts/polyfill.min.js"></script>
<link href="~/Content/Scripts/plugins/mui/css/icons-extra.css" rel="stylesheet" />


<style>
    .mui-active {
        color: #2ab8ff !important;
    }

    #center {
        position: fixed;
        bottom: 10px;
        z-index: 12;
        left: 50%;
        margin-left: -27px;
    }

    #center2 {
        position: fixed;
        bottom: 3px;
        left: 50%;
        z-index: 11;
        width: 80px;
        height: 80px;
        margin-left: -40px;
        background-color: #f7f7f7;
        border-radius: 3em;
        border-bottom-color: transparent !important;
        border-right-color: transparent !important;
        box-shadow: 0 -5px 7px rgb(183,210,422);
    }

    /*.mui-icon.iconfont.icon-wentifankui {
           font-size: 35px;
       }*/

    .icon-soushuo {
        color: white;
    }
    .mui-icon-extra{
        font-size:15px
    }
    #Notice{
        top:5px
    }
    h4{
        font-size:16px
    }
</style>

<style>
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        border-right: transparent;
    }

    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        padding: 0;
    }

    .mui-grid-view.mui-grid-9 .mui-media .mui-icon {
        color: white;
    }

    .table-icon {
        background-color: #00aaff;
        border-radius: 30px;
        width: 40px;
        height: 40px;
    }

    .table-text {
        font-size: 13px;
        margin-top: 8px;
        text-overflow: ellipsis;
        color: #333;
    }

    .mui-table-view-cell .mui-media {
        display: flex;
    }

    .iconflex {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mui-col-xs-2 {
        width: 20%;
    }

    [v-cloak] {
        display: none;
    }


    .mui-grid-view.mui-grid-9 .mui-media .mui-icon {
        font-size: 1.9rem;
    }

    .mui-slider .mui-slider-group .mui-slider-item img {
        height: 11rem;
        width: auto;
        overflow: hidden;
    }



    .ZlProblem {
        background-color: white;
        border-radius: 13px 13px 0px 0px;
    }

    .mui-slider-item p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        font-size: 13px;
    }

    .Gongg {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        border-radius: 0px 0px 13px 13px;
        background-color: white;
        padding: 5px;
        border-top: solid 1px #efeff4;
        align-items:center
    }

    .HomeTitle {
        margin: 10px;
        border-left: solid 2px #2ab8ff;
        padding: 0 17px;
        font-weight: 600;
    }

    .mui-grid-view.mui-grid-9 {
        background-color: white;
    }

    .AboutMyProblem {
        background-color: white;
        border-radius: 5px;
    }

    .MyList {
        padding: 5px 10px;
        border-bottom: solid 1px #efeff4;
    }

    .MyListFlex div {
        font-size: 12px !important;
        color: #61a3ff;
    }

    .MyList div {
        font-size: 13px;
    }

    .MyListFlex {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }


        .MyListFlex p {
            font-size: 12px !important;
            padding: 0 10px;
        }

        .MyListFlex img {
            max-height: 17px;
            border-radius: 10px;
            margin-right: 5px;
        }

    .OverHiden {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
     border-bottom:none;
    }
    .version-problem{
       width: 100%;
    height: 50px;
    background-color: white;
    border-radius: 7px 7px 7px 7px;
    margin: 10px 0;
    display:flex;
    align-items:center;
    justify-content:flex-start
    }
    .version-problem img{
        height:30px;
        margin:0 10px;
    }
    .vp-search{
     font-size: 13px;
    font-weight: 600;
    flex: 1;
    color: #6e6e6e;
    padding: 0 10px;
    }
    .vp-icon{
        color: #acacaa;
    }

</style>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title" style="color:white">中联区卫问题登记</h1>
    <a href="/MobileProblem/ProblemQuickSearch" class="mui-icon iconfont icon-soushuo mui-pull-right" id="title-right"></a>
</header>
<nav class="mui-bar mui-bar-tab">

    <a class="mui-tab-item " id="Home">
        <span class="mui-icon iconfont icon-shouye"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" id="NewProblem">
        <span class="mui-icon iconfont icon-wentifankui"></span>
        <span class="mui-tab-label">问题查询</span>
    </a>
    <a class="mui-tab-item" id="my">
        <span class="mui-icon iconfont icon-wode"></span>
        <span class="mui-tab-label">我的</span>
    </a>

</nav>
<div class="mui-content mui-scroll-wrapper" id="scr1">
    <div class="mui-scroll">
        <div id="vue" v-cloak>
            <div class="mui-slider" style="height:11rem">
                <div v-if="PicNotice.length>0" class="mui-slider-group mui-slider-loop">
                    <!--支持循环，需要重复图片节点-->
                    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img v-bind:src="PicNotice[PicNotice.length-1].图片ID" /></a></div>
                    <div v-for="item in PicNotice" class="mui-slider-item"><a href="#"><img v-bind:src="item.图片ID" /></a></div>
                    <!--支持循环，需要重复图片节点-->
                    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img v-bind:src="PicNotice[0].图片ID" /></a></div>
                </div>
                <div class="mui-slider-indicator ">
                    <div v-for="(x,y) in PicNotice" class="mui-indicator" v-bind:class="y==0?'mui-active':''"></div>
                </div>
            </div>
            <h4 class="HomeTitle">问题登记</h4>
            <div class="ZlProblem">

                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li v-on:tap="CodeHref(pc.编码)" v-for="pc in ProductCode" class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
                        <a class="iconflex">
                            <div class="table-icon">
                                <span v-bind:class="pc.图标" class="mui-icon HomeIcon " style="height: 40px;line-height: 40px;"></span>
                            </div>
                            <div class="table-text">{{pc.名称}}</div>
                        </a>
                    </li>

                </ul>
            </div>

            <div class="Gongg">
                <span class="mui-icon-extra mui-icon-extra-notice" style="color:#aad061"></span>
                <h4 style="font-size: 12px;margin:2px;color:#aad061">公告</h4>
                <div class="mui-slider" style="flex:1;margin-left:5px">
                    <div class="mui-slider-group mui-slider-loop" id="Notice">
                        <!--支持循环，需要重复图片节点-->
                        <div class="mui-slider-item mui-slider-item-duplicate"></div>
                        <div v-for="item in Noty" v-on:click="NoticeDeatil(item.ID)" class="mui-slider-item"> <p>{{item.标题}}-{{item.发布时间}}</p></div>
                        <!--支持循环，需要重复图片节点-->
                        <div class="mui-slider-item mui-slider-item-duplicate"><p v-if="Noty.length>0">{{Noty[0].标题}}-{{Noty[0].发布时间}}</p></div>
                    </div>
                </div>
                <h6 class="mores" style="margin-left:5px">| 更多</h6>
            </div>

            <div class="version-problem">
                <img src="~/Content/Images/zllogo.png" />
                <div class="vp-search">版本问题查询入口</div>
                <a class="vp-icon"><span class="mui-icon mui-icon-arrowright"></span></a>
            </div>

            <h4 class="HomeTitle">更多服务</h4>
            <div class="ZlProblem">

                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li v-on:tap="FormMakingHref(pc.编码)" v-for="pc in MoreServices" class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
                        <a class="iconflex">
                            <div class="table-icon">
                                <span v-bind:class="pc.图标" class="mui-icon HomeIcon " style="height: 40px;line-height: 40px;"></span>
                            </div>
                            <div class="table-text">{{pc.名称}}</div>
                        </a>
                    </li>

                </ul>
            </div>

            <h4 class="HomeTitle">与我相关问题</h4>
            <div class="AboutMyProblem">
                <div class="MyList" v-for="ml in MyProblemList" v-on:click="Deatil(ml.ID)">
                    <div class="OverHiden" style="-webkit-line-clamp: 2">
                        {{ml.问题标题}}
                    </div>
                    <p style="font-size:12px" class="OverHiden">
                        {{ml.问题描述}}
                    </p>
                    <div class="MyListFlex">
                        <img src="~/Content/Images/Account/wtx.jpg" />
                        <div>{{ml.登记人}} </div>
                        <p>{{ml.登记日期}} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script >type = "text/babel"
        mui.init({
            swipeBack: true,//启用右滑关闭功能
            keyEventBind: {
                backbutton: true //开启back按键监听
            }
        });
        mui('.mui-scroll-wrapper').scroll();

        document.getElementById('Home').addEventListener('tap', function () {
            //mui.openWindow({
            //    url: '/MobileProblem/Home'
            //});
          //  window.location.href = '/MobileProblem/Home';
        });
        document.getElementById('my').addEventListener('tap', function () {
            //mui.openWindow({
            //    url: '/MobileProblem/My'
            //});
         window.location.href = '/MobileProblem/My'
           
        });
        document.getElementById('NewProblem').addEventListener('tap', function () {
            //mui.openWindow({
            //    url: '/MobileProblem/QueryProblem'
            //});
           window.location.href = '/MobileProblem/QueryProblem'
            
        });
        var clickNum = 0;
        mui.back = function (event) {
            clickNum++; if (clickNum > 1) { plus.runtime.quit(); }
            else {
                mui.toast("再按一次退出应用");
            } setTimeout(function () { clickNum = 0 }, 2000); return false;
        }    
    </script>
<script >
    "use strict";
    var vm = new Vue({
        el: '#vue',
        data: {
            /// 产品编码
            ProductCode: [],
            MyProblemList: [],
            Noty: [],
            PicNotice: [],
            //更多服务
            MoreServices: [{ 编码: "01", 名称: "项目管理", 图标: "icon-yunweiguanli" }, { 编码: "02", 名称: "我的填写", 图标: "icon-yiliaodui" }]
        },
        computed: {},
        methods: {
            ///获取产品编码
            GetCode: function GetCode() {
                var that = this; //查询用户设置的默认项目

                var DeafualtProjectId = '';
                var UserSetProject = getCookie("UserSetProject");

                if (UserSetProject && UserSetProject.split('|')[0]) {
                    DeafualtProjectId = UserSetProject.split('|')[0];
                }

                $.post("/MobileProblem/GetProductCode", {
                    "DeafualtProjectId": DeafualtProjectId
                }, function (data) {
                    for (var _iterator = data, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]() ; ;) {
                        var _ref;

                        if (_isArray) {
                            if (_i >= _iterator.length) break;
                            _ref = _iterator[_i++];
                        } else {
                            _i = _iterator.next();
                            if (_i.done) break;
                            _ref = _i.value;
                        }

                        var dd = _ref;

                        if (dd.编码 == '01') {
                            dd.图标 = 'icon-yiliao2';
                        } else if (dd.编码 == '02') {
                            dd.图标 = 'icon-yiliaojigou';
                        } else if (dd.编码 == '03') {
                            dd.图标 = 'icon-yiliaodian';
                        } else if (dd.编码 == '04' || dd.编码 == '05') {
                            dd.图标 = 'icon-yiliaodui';
                        } else if (dd.编码 == '06') {
                            dd.图标 = 'icon-fuyoubaojian';
                        } else if (dd.编码 == '07') {
                            dd.图标 = 'icon-fuyoubaojianfc';
                        } else if (dd.编码 == '08') {
                            dd.图标 = 'icon-yunweiguanli';
                        } else {
                            dd.图标 = 'icon-fuyoubaojian';
                        }
                    }

                    that.ProductCode = data;
                });
            },
            CodeHref: function CodeHref(code) {
             window.location.href=  '/MobileProblem/NewProblems/' + code;
               
            },
            //查询我的问题
            QueryMyProblemList: function QueryMyProblemList() {
                var that = this;
                $.post("/Home/QueryMyProblemList", {}, function (data) {
                    var t = data.length > 5 ? 5 : data.length;

                    for (var i = 0; i < t; i++) {
                        var arrEntities = {
                            'lt': '<',
                            'gt': '>',
                            'nbsp': ' ',
                            'amp': '&',
                            'quot': '"'
                        };
                        data[i].问题描述 = data[i].问题描述.replace(/<[^>]+>/g, "").replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
                            return arrEntities[t];
                        });
                        that.MyProblemList.push(data[i]);
                    }
                });
            },
            ///我的问题详细
            Deatil: function Deatil(id) {
                window.location.href = '/MobileProblem/ProblemDetail/' + id;
            },
            //公告
            GetNoty: function () {
                var that = this;
                //加载公告
                $.post("/Notice/GetHome", function (data) {
                    for (var i in data) {
                        var val = data[i].发布时间;
                        if (val < 1) {
                            data[i].发布时间 = parseInt(val * 60) + "分钟前";
                        } else if (val < 24) {
                            data[i].发布时间 = val + "小时前";
                        } else if (48 > val > 24) {
                            data[i].发布时间 = "昨天";
                        } else {
                            data[i].发布时间 = parseInt(val / 24) + '天' + '前';
                        }
                    }
                    that.Noty = data || [];
                })
            },
            NoticeDeatil: function (id) {

                window.location.href = '/MobileProblem/NoticesDetail/' + id
            },
            // 获取图片公告
            getPicNotice: function () {
                var that = this;
                $.post("/Notice/GetWorkNotice", function (data) {
                    for (var i in data) {
                        var item = data[i];
                        item.图片ID = '/MobileProblem/ViewProblemImage/' + item.图片ID + '?type=o';
                    }
                    that.PicNotice = data;
                })
            },
            //更多服务
            FormMakingHref: function FormMakingHref(code) {
                if (code == "01") {//智能表单
                    /* window.location.href = '/SmartForm/MobileSmart';*/
                    window.location.href = '/MobileProblem/SelectProblemItem';
                } else if (code == "02") {//我的智能表单
                    /* window.location.href = '/SmartForm/MobileSmart';*/
                    window.location.href = '/SmartForm/MobileMySmart';
                }
               

            },
        },
        watch: {
            PicNotice: function (newValue, oldValue) {
                this.$nextTick(function () {
                    var gallery = mui('.mui-slider');
                    gallery.slider({
                        interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；

                    });
                })
            }
        },
        mounted: function mounted() {
            this.GetCode();
            this.GetNoty();
            this.getPicNotice();
            this.QueryMyProblemList();
            $("#Home").addClass('mui-active');
          
            mui(".AboutMyProblem").on('tap', '.MyList', function (event) {
                this.click();
            });
            mui(".Gongg").on('tap', '.mores', function (event) {
                window.location.href = '/MobileProblem/NoticeList';
            });
            mui("#vue").on('tap', '.version-problem', function (event) {
                window.location.href = '/MobileProblem/VersionProblem';
            });
            
        }
    });
</script>