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


@{
    ViewBag.Title = "VersionProblemDeatil";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
}
@model PMS.BusinessModels.MobileProblem.ProblemDetailModel

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="~/Content/Scripts/plugins/mui/css/mui.imageviewer.css" rel="stylesheet" />
<link href="~/Content/Style/MobileProductRegist/ProblemDeatail.css" rel="stylesheet" />
<link href="~/Content/Style/MobileProductRegist/ProblemIcon.css" rel="stylesheet" />
<link href="~/Content/Scripts/plugins/mui/css/TimeLine.css?v=1.0" rel="stylesheet" />

<script src="~/Content/Scripts/plugins/mui/js/iconfont.deal.js"></script>
<script src="~/Content/Scripts/plugins/mui/js/mui.zoom.js"></script>
<script src="~/Content/Scripts/plugins/mui/js/mui.previewimage.js"></script>


<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="~/Content/Scripts/babel.min.js"></script>
<script src="~/Content/Scripts/polyfill.min.js"></script>
<style>
    html {
        font-size: 15px;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","HelveticaNeue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
    }

    .mui-bar-nav {
        background-color: #00aaff;
        box-shadow: 0 1px 6px #00aaff;
    }

    .top {
        background-color: #00aaff;
        width: 100%;
        position: relative;
    }

    .card1 {
        width: 80%;
        height: 5rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 1rem;
    }

    .flexcolom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        font-size: 14px;
        color: white;
        margin-left: 5%;
    }

    .status {
        position: absolute;
        right: 2%;
        top: 10%;
        max-width: 100px;
    }

        .status h4 {
            line-height: 1.5;
        }

    .statusIcon {
        color: white;
        font-size: 18px;
        font-weight: 500;
    }

    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        color: #00aaff !important;
        border-bottom: 2px solid #00aaff;
    }
    /*.mui-content {
            background-color: #ffffff;
        }*/
    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
        color: #666666;
    }

    .mylist {
        width: 100%;
        height: auto;
        background-color: white;
        padding: 1rem;
        margin-top: 0.3rem;
    }

    .mytable {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 0.5rem;
    }

    .mytableRow {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

        .mytableRow > p {
            margin-bottom: 0px;
        }

    .mytableRowRight {
        margin-left: 3rem;
        color: black;
        font-weight: 400;
        flex: 1;
    }

    .marleft {
        margin-left: 1rem;
    }

    p {
        font-size: 12px;
    }

    .fixDiv {
        position: fixed;
        top: -5px;
        z-index: 99;
    }

    .cd-timeline-content p {
        margin: 0;
    }

    .cd-timeline-content .cd-date {
        padding: 0;
        opacity: .7;
        float: right;
    }

    .mui-card-header:after {
        position: relative;
    }

    h2 {
        font-size: 22px;
    }

    h4 {
        font-size: 14px;
    }

    h5 {
        font-size: 12px;
    }

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

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

        .mui-grid-view.mui-grid-9 .mui-table-view-cell {
            border: transparent;
        }

    .Fileflex {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
    }

    .activeIcon {
        background-color: #fc8560;
    }

    .DeatlTitle {
        color: white;
        padding: 5px 10px;
        font-size: 15px;
    }

    .mui-popover.mui-active {
        display: flex !important;
    }

    .mui-popover {
        flex-direction: column;
        width: auto;
        padding: 5px;
        background-color: white;
    }

    .mytableRowLeft {
        width: 53px;
    }

    #panel {
        background: #fff;
    }

        #panel text {
            line-height: 2rem;
            border-right: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }

    .flex-row {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 12px;
    }

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

    .flex-cell {
        flex: 1;
    }

    .flex-column p {
        margin: 0;
    }

    .flexSingle {
        flex: 0.33;
    }

    .ProblemIcon {
        font-size: 20px;
    }

    .modify {
        display: flex;
        flex-direction: row;
        font-size: 14px;
        padding: 5px 15px;
        justify-content: center;
        align-items: center;
    }

        .modify .mui-icon {
            color: #677b84;
            padding-right: 10px;
        }

    .Process {
        margin-top: 5px;
        min-height: 28rem;
        background-color: white;
    }

    .tabflex {
        display: flex !important;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: white;
        box-shadow: 0 0 1px rgb(217, 217, 217);
    }

    .mui-bar .mui-btn {
        top: 0px;
        border-radius: 8px;
        font-size: 0.7rem;
        padding: 6px 18px;
        margin: 0 10px;
    }
</style>


<div id="vue" v-cloak>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:white"></a>
        <h4 class="mui-title" style="color:white">问题详细</h4>
        <a v-if="@Model.撤销权限==1 || @Model.修改权限==1 " href="#Popover_1" class="mui-icon mui-icon-more mui-pull-right" style="color:white"></a>
    </header>
    <div class="mui-content ">
        <div class="top">
         
            <div class="card1">
                <div>
                    <img src="~/Content/Images/Account/wtx.jpg" style="height:3rem;border-radius:50px" />
                </div>
                <div class="flexcolom">
                    <div style="font-weight: 700;">@Model.人员性质-@Model.姓名</div>
                    <div><p style="font-size:14px;color:white">@Model.登记日期</p></div>
                </div>
            </div>
            <div class="status iconflex"><span v-bind:class="ProblemStatus.icon" class="ProblemIcon " style="color:white"></span><h4 style='color:white;margin-left:5px'>{{ProblemStatus.text}}</h4></div>
        </div>
        <div id="fex">
            <div style="padding:3px;background-color: white;">
                <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary ">
                    <a class="mui-control-item mui-active" href="#item1"><span class="ProblemIcon icon-xiangqing"></span>问题详情</a>
                    <a class="mui-control-item" href="#item2"><span class="ProblemIcon icon-liuchengpeizhi"></span>流程概况</a>
                    @*<a class="mui-control-item" href="#item3"><span class="mui-icon mui-icon-chat"></span>过程沟通</a>*@
                </div>
            </div>
            <div id="item1" class="mui-control-content mui-active" style="overflow:hidden;">
                <div v-if="VersionProblemMark" class="mylist">
                    <h4 style="font-size:15px">版本问题说明</h4>
                    <p style="font-size:13px"  v-html="VersionProblemMark">{{VersionProblemMark}}</p>
                </div>
                <div v-if="CurrentDealDeatil" class="mylist">
                    <h4 style="font-size:15px">处理说明</h4>
                    <p style="font-size:13px" id="CurrentDealDeatil" v-html="CurrentDealDeatil.描述">{{CurrentDealDeatil.描述}}</p>
                    <div v-if="CurrentDealDeatil.图片 || CurrentDealDeatil.文件" class="Fileflex">
                        <img v-for="img in  CurrentDealDeatil.图片" data-preview-src='' data-preview-group='3' v-bind:src="img" style='width:50px;height:50px;padding:5px 5px 5px 0'>
                        <a v-for="(flie,index) in CurrentDealDeatil.文件" v-on:click="GetFlie(flie)" style="padding:5px 5px 5px 0;color:#80b4fb;font-size:14px"><span class="mui-icon mui-icon-paperclip" style="font-size:33px"></span></a>
                    </div>
                    <template v-if="Vison">
                        <h4 style="font-size:15px">解决版本</h4>
                        <p style="font-size:13px">{{Vison}}</p>
                    </template>

                </div>
                <div class="mylist" id="HtmlDeatil">
                    <h4 style="font-size:15px;float:right">编号:@Model.问题编号</h4>
                    <h4 style="font-size:15px">标题</h4>
                    <p style="font-size:13px">@Model.问题标题</p>
                    <h4 style="font-size:15px">详细描述</h4>
                    <p style="font-size:13px">@Html.Raw(Model.问题描述)</p>
                </div>
                <div v-if="StopDeatil" class="mylist">
                    <h4 style="font-size:15px">终止说明</h4>
                    <p style="font-size:13px">{{StopDeatil}}</p>
                </div>
                <div v-if="ErginDeatil" class="mylist">
                    <h4 style="font-size:15px">紧急描述</h4>
                    <p style="font-size:13px">{{ErginDeatil}}</p>
                </div>
                <div v-if="Image.图片 && (Image.图片.length>0 || Image.附件.length>0)" class="mylist">
                    <h4 style="font-size:15px">图片及附件</h4>
                    <ul id="fileList" class="mui-table-view mui-grid-view mui-grid-9">
                        <li v-for="im in Image.图片" class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3' style='padding-left: 3px;'>
                            <img data-preview-src='' data-preview-group='1' v-bind:src="im" style='width:100px;height:100px'>
                        </li>
                    </ul>
                    <a v-for="(flie,index) in Image.附件" v-on:click="GetFlie(flie)" style="padding:5px 5px 5px 0;color:#80b4fb;font-size:14px">附件{{index+1}}<span class="mui-icon mui-icon-paperclip" style="font-size:33px"></span></a>
                </div>
               
                <div class="mylist" style="padding-right:0">
                    <h4 style="font-size:15px">其他信息</h4>
                    <div id="panel" class="flex-column">
                        <div class="flex-cell flex-row">
                            <p class="flex-cell flex-row">产品</p>
                            <div class="flex-cell flex-row">@Model.产品名称</div>
                            <p class="flex-cell flex-row">版本</p>
                            <div class="flex-cell flex-row" style="overflow:hidden">@Model.版本号</div>
                        </div>
                        <div class="flex-cell flex-row">
                            <p class="flex-cell flex-row">来源</p>
                            <div class="flex-cell flex-row">@Model.来源</div>
                            <p class="flex-cell flex-row">问题性质</p>
                            <div class="flex-cell flex-row">@Model.问题性质</div>
                        </div>
                        <div class="flex-cell flex-row">
                            <p class="flex-cell flex-row">关键字</p>
                            <div class="flex-cell flex-row">@Model.关键字</div>
                            <p class="flex-cell flex-row">紧急程度</p>
                            <div class="flex-cell flex-row">@Model.紧急程度</div>
                        </div>
                        <div class="flex-cell flex-row">
                            <p class="flex-cell flex-row">当前处理人</p>
                            <div class="flex-cell flex-row">@Model.当前处理人</div>
                            <p class="flex-cell flex-row">当前环节</p>
                            <div class="flex-cell flex-row">@Model.当前环节</div>
                        </div>
                        <div class="flex-cell flex-row">
                            <p class="flex-cell flex-row">技术支持</p>
                            <div class="flex-cell flex-row">@Model.技术支持</div>
                            <p class="flex-cell flex-row">研发支持</p>
                            <div class="flex-cell flex-row">@Model.研发支持</div>
                        </div>
                        <div class="flex-cell flex-row">
                            <p class="flex-cell flex-row">是否解决</p>
                            <div class="flex-cell flex-row">@Model.是否解决</div>
                            <p class="flex-cell flex-row">是否终止</p>
                            <div class="flex-cell flex-row">@Model.终止说明</div>
                        </div>
                        <div class="flex-cell flex-row">
                            <p class="flex-cell flex-row flexSingle">渠道</p>
                            <div class="flex-cell flex-row">@Model.渠道名称</div>
                        </div>
                        <div class="flex-cell flex-row">
                            <p class="flex-cell flex-row flexSingle">项目</p>
                            <div class="flex-cell flex-row">@Model.项目名称</div>
                        </div>
                        <div class="flex-cell flex-row">
                            <p class="flex-cell flex-row flexSingle">机构</p>
                            <div class="flex-cell flex-row">@Model.机构名称</div>
                        </div>
                    </div>
                </div>

            </div>
            <div id="item2" class="mui-control-content">
                <div id="Process" class="Process">
                    <div class="container" style="background-color:white;padding:5px">
                        <ul class="time-vertical">
                            <li v-for="ps in Process">
                                <span class="ProblemIcon  time-vertical-span" v-bind:class="ps.图标"></span>
                                <div class="Timeline-v-body">
                                    <h3>{{ps.处理状态}}</h3>
                                    <p style="margin:0">
                                        您的问题已进入【{{ps.问题环节}}】环节，操作人：{{ps.职务}}-{{ps.处理人员}}
                                        @*<a v-if="ps.联系电话" v-bind:href="'tel:'+ps.联系电话">【{{ps.联系电话}}】</a>*@
                                    </p>
                                    <p class="ProcessDetail" v-html="ps.描述" v-if="ps.描述" style="line-height:1.3">{{"描述："+ps.描述}}</p>
                                    <div v-if="ps.图片|| ps.文件" class="Fileflex">
                                        <img v-for="img in  ps.图片" data-preview-src='' data-preview-group='2' v-bind:src="img" style='width:50px;height:50px;padding:5px 5px 5px 0'>
                                        <a v-for="(flie,index) in ps.文件" v-on:click="GetFlie(flie)" style="padding:5px 5px 5px 0;color:#80b4fb;font-size:14px"><span class="mui-icon mui-icon-paperclip" style="font-size:33px"></span></a>
                                    </div>
                                    <p>{{ps.记录时间}}</p>
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
            <div id="item3" class="mui-control-content">
                <div id="MyCommunicate">
                    <h5 v-if="show" style='display:flex;flex-direction:column;justify-content:center;align-items:center;height:100px;font-size:15px  '>暂无沟通内容</h5>
                    <div v-for="cc in Communicate" class='mui-card'>
                        <div class='mui-card-header mui-card-media' style='height:100px ;'>
                            <img v-bind:src="cc.头像地址" style='border-radius: 80px; height: 50px; width: 50px;'>
                            <p style='float: right;'>{{cc.记录时间}}</p>
                            <div class='mui-media-body' style='margin-left: 60px'>
                                <h4>{{cc.记录人}}</h4>
                                <h5 style='margin-top:10px'>{{cc.沟通内容}}</h5>
                                <h5 style='float:right;'>{{cc.职务}}</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mui-input-row" style="margin: 10px 5px;">
                    <textarea v-model="Content" style="font-size:14px" id="textarea" rows="5" placeholder="输入您的沟通内容"></textarea>
                    @*<button v-on:click="SubmitContent" type="button" class="mui-btn mui-btn-primary" style="width: 82px">提交</button>*@
                </div>
            </div>
        </div>
    </div>
    <div id="Popover_1" class="mui-popover mui-bar-popover">
        <div v-if="@Model.撤销权限==1" v-on:click="DeleteProblem()" class="modify">
            <span class="mui-icon mui-icon-trash"></span>
            <div>撤销问题</div>
        </div>
        <div v-on:click="Modify()" v-if="@Model.修改权限==1" class="modify">
            <span class="mui-icon mui-icon-compose"></span>
            <div>修改问题</div>
        </div>
    </div>
</div>
<script>
        type = "text/babel"
        //var banOffTop = $("#fex").offset().top;//获取到距离顶部的垂直距离
        //var scTop=0;//初始化垂直滚动的距离
        //$(document).scroll(function () {
        //  debugger
        //    scTop=$(this).scrollTop()+10;//获取到滚动条拉动的距离
        //    //console.log(scTop);查看滚动时，垂直方向上，滚动条滚动的距离
        //    if(scTop>=banOffTop){
        //        //核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
        //        $("#fex").addClass("fixDiv");
        //    }else{
        //        $("#fex").removeClass("fixDiv");
        //    }

        //})
        var ID = '@ViewBag.ID';
        var vpid = '@ViewBag.vpid';
        var Plan = `@Model.解决方案`;
        var Vison = `@Model.解决版本`;
        var AssginName = '@Model.指派人';
        var StopDeatil = `@Model.终止说明`;
        var ErginDeatil = `@Model.紧急描述`;
        var vm = new Vue({
            el: '#vue',
            data: {
                ///产品问题过程
                Process: [],
                //过程沟通
                Communicate: [],
                ///沟通内容
                Content: '',
                ///图片
                Image: [],
                Iscomp: '',
                ProblemStatus: {},
                show: false,
                Plan: Plan,
                Vison: Vison,
                AssginName: AssginName,
                StopDeatil: StopDeatil,
                ErginDeatil: ErginDeatil,
                CurrentDealDeatil: null,
                IsCommit: false,
                VersionProblemMark: '',
                VersionFile:[]
            },
            methods: {
                //获取产品问题过程
                GetProcess: function () {
                    var that = this;
                    $.post("/Problem/GetClc?ID=" + ID, {}, function (data) {
                        for (var fj of data) {
                            if (fj.附件) {
                                var img = [];
                                var file = [];
                                //全部附件
                                var All = fj.附件.split(',');
                                //判断单个附件类型
                                for(var s of All) {
                                ///如果为图片
                                    if (s.split('|')[1] == '1') {
                                        var ss = "/MobileProblem/ViewProblemImage/" + s.split('|')[0] + "?type=o"
                                        img.push(ss);
                                    }
                                        //如果为文件
                                    else {
                                        file.push(s.split('|')[0]);
                                    }
                                }
                                fj.图片 = img;
                                fj.文件 = file;

                            }
                        //转换图标
                            switch (fj.处理状态) {
                                case '登记': fj.图标 = "icon-xiangqing activeIcon"; break;
                                case '回退中': fj.图标 = "icon-icon28"; break;
                                case '已终止': fj.图标 = "icon-zhongzhi activeIcon"; break;
                                case '指派人员': fj.图标 = "icon-fenpei"; break;
                                case '向上提交': fj.图标 = "icon-submit"; break;
                                case '处理中': fj.图标 = "icon-shoulizhong"; break;
                                case '已完成': fj.图标 = "icon-queren activeIcon"; break;
                                case '已受理': fj.图标 = "icon-shoulizhong"; break;
                                case '取消受理': fj.图标 = "icon-icon28"; break;
                                case '撤销完成/终止': fj.图标 = "icon-icon28"; break;
                                case '验证确认': fj.图标 = "icon-queren activeIcon"; break;
                                default: fj.图标 = "icon-shoulizhong"
                            }
                        }
                        that.GetCurrentDealDeatil(data[0]);
                        that.Process = data;

                    })
                },
                GetCurrentDealDeatil:function (item) {
                    var d = item.处理状态;
                    if (item.描述 && (d == "回退中" || d == "指派人员" || d == "已终止" || d == "处理中" || d == "已完成")) {
                        this.CurrentDealDeatil = { 描述: item.描述, 图片: item.图片, 文件: item.文件 };
                    }
                },
                ///获取图片
                GetFileFormFTP: function () {
                    var that = this;
                    $.post("/MobileProblem/GetFileFormFTP/" + ID, {}, function (data) {
                        var File = {
                            图片: [],
                            附件:[]
                        };
                        for (var dd of data) {
                            if (dd.类型 == '1') {
                                File.图片.push("/MobileProblem/ViewProblemImage/" + dd.附件ID + "?type=o");
                            } else {
                                File.附件.push(dd.附件ID);
                            }
                        }
                        that.Image = File;
                    })
                },
                ///获取过程沟通
                GetCommunicate: function () {
                    var that = this;
                    this.show = false;
                    $.post("/MobileProblem/GetCommunicates/" + ID, {}, function (data) {
                        if (data.length > 0) {
                            that.Communicate = data;
                        }
                        else {
                            that.show = true;
                        }

                    })
                },
                ///提交过程沟通
                SubmitContent: function () {
                    var that = this;
                    if (!this.Content) {
                        mui.toast('请输入内容', { duration: 'long', type: 'div' });
                        return;
                    }
                    var param = {
                        WTID: ID,
                        GTNR: this.Content
                    }
                    $.post("/MobileProblem/SubmitContent", param, function (data) {
                        if (data.code == 200) {
                            mui.toast('提交成功', { duration: 'long', type: 'div' });
                            that.Content = '';
                            that.GetCommunicate();
                        } else {
                            mui.toast('提交失败', { duration: 'long', type: 'div' });
                        }
                    })
                },
                ToIcon: function () {

                    if ('@Model.是否解决' == "已解决") {
                        this.Iscomp = "icon-yijiejue3";
                    }
                    else {
                        this.Iscomp = "icon-weijiejue";
                    }
                    var Status = "@Model.最新状态";
                    if (Status == "1") {
                        this.ProblemStatus.icon = "icon-dengji";
                        this.ProblemStatus.text = "已登记";

                    } else if (Status == "2") {
                        this.ProblemStatus.icon = "icon-icon28";
                        this.ProblemStatus.text = "回退";
                    }
                    else if (Status == "3") {
                        this.ProblemStatus.icon = "icon-zhongzhi";
                        this.ProblemStatus.text = "已终止";
                    }
                    else if (Status == "4") {
                        this.ProblemStatus.icon = "icon-fenpei";
                        this.ProblemStatus.text = "  分配中 → " + this.AssginName;
                    }
                    else if (Status == "5") {
                        this.ProblemStatus.icon = "icon-submit";
                        this.ProblemStatus.text = "已提交";
                    }
                    else if (Status == "6") {
                        this.ProblemStatus.icon = "icon-shoulizhong";
                        this.ProblemStatus.text = "受理中";
                    }
                    else if (Status == "7") {
                        this.ProblemStatus.icon = "icon-queren";
                        this.ProblemStatus.text = "已完成";
                    }
                    else if (Status == "8") {
                        this.ProblemStatus.icon = "icon-chulizhong";
                        this.ProblemStatus.text = "已受理";
                    } else if (Status == "9") {
                        this.ProblemStatus.icon = "icon-icon28";
                        this.ProblemStatus.text = "取消受理";
                    } else if (Status == "10") {
                        this.ProblemStatus.icon = "icon-icon28";
                        this.ProblemStatus.text = "撤销完成/终止";
                    } else if (Status == "11") {
                        this.ProblemStatus.icon = "icon-queren";
                        this.ProblemStatus.text = "验证确认";
                    }

                },
                //获取过程附件
                GetFlie: function (ID) {
                    window.open('/MobileProblem/ViewProblemImage/' + ID);

                },
                Modify:function () {
                    window.location.href = '/MobileProblem/ModifyProblem/' + ID
                },
                Back:function (){
                    window.location.href = '/MobileProblem/QueryProblem'
                },
                DeleteProblem: function () {
                    var that = this;
                    mui.confirm('确定要撤销该问题吗?', '提示', ['否', '是'], function (e) {
                        if (e.index == 1) {
                            $.post("/Problem/Delete_Problem/" + ID, {}, function (data) {
                                if (data != 0) {
                                    mui.toast("撤销成功!", { duration: 'long', type: 'div' });
                                    mui.later(function () {
                                        window.location.href = '/MobileProblem/QueryProblem'
                                    }, 1000)
                                }
                                else {
                                    mui.toast("撤销失败!", { duration: 'long', type: 'div' });
                                }

                            })
                        }

                    })
                },
                FilterHtml:function (item) {
                    var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
                    item = item.replace(/<[^>]+>/g, "").replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });
                    return item;
                },
                ProblemRemark: function () {
                    window.location.href = '/MobileProblem/ProblemReamrk/' + ID;
                },
                getIsCommit: function () {
                    var that = this;
                    $.post("/MobileProblem/IsCommit/" + ID, function (data) {
                        if (data == '1') {
                            that.IsCommit = true;
                        }
                    })
                },
                getVersionPoblemExplain: function () {
                    var that = this;
                    $.post("/MobileProblem/getVersionPoblemExplain/" + vpid, function (data) {
                        if (data) {
                            that.VersionProblemMark = data.mark;
                            that.VersionFile = data.File
                        }
                    })
                }
            },
            watch: {
                Process:function (val) {
                    this.$nextTick(() => {
                        //缩小html中的图片
                        var s = $(".ProcessDetail").find("img");
                        if (s) {
                            s.attr('data-preview-src', '');
                            s.attr('data-preview-group', '10');
                            s.css('height', 'auto');
                            s.css('width', '100px');
                        }
                    })

                },
                CurrentDealDeatil:function(val) {
                    this.$nextTick(() => {
                        //缩小html中的图片
                        var s = $("#CurrentDealDeatil").find("img");
                        if (s) {
                            s.attr('data-preview-src', '');
                            s.attr('data-preview-group', '9');
                            s.css('height', 'auto');
                            s.css('width', '100px');
                        }
                    })
                }
            },
            mounted: function () {
                mui.init();
                mui("#Popover_1").on('tap', '.modify', function (event) {
                    this.click();
                });
                mui.previewImage();
                this.getIsCommit();
                this.ToIcon();
                this.GetFileFormFTP();
                this.GetProcess();
                this.getVersionPoblemExplain();
                var t = $("#HtmlDeatil").find("img");
                if (t) {
                    t.attr('data-preview-src', '');
                    t.attr('data-preview-group', '9');
                }
            }
        })
</script>