itsm-whlg/wechat/assets/views/weChat/myIncident/myIncidentDetail.html

<style>
    .iconfontPadding {
        padding-top: 10px;
    }
    
    a:focus,
    a:hover {
        /* color: red; */
        /* font-weight: bolder; */
        text-decoration: none;
    }
    
    .iconfontColor {
        color: #006bc0 !important;
        /* font-weight: bolder; */
    }
    
    .titleStyle {
        background: #d9edf7 !important;
        margin-top: 1.3rem !important;
        margin-bottom: 0.7rem !important;
        border-left: 0.4rem solid #006bc0;
        height: 3rem;
        line-height: 3rem;
        font-size: 1.4rem;
        color: #606367;
        padding: 0;
        padding-left: 1rem;
    }
    
    .titledetail {
        background: #f5f5f5;
        height: 3rem;
        /* line-height: 3rem; */
        font-size: 1.4rem;
        color: #606367;
        padding: 0;
        padding-left: 1rem;
    }
    
    .timepost {
        margin-left: 1rem;
        padding-top: 2.5rem;
        position: absolute;
    }
    
    .timepostlast {
        margin-left: 1rem;
        padding-top: 0rem;
        position: absolute;
    }
    
    timeline-panel {
        background-color: #fff;
        float: left;
        padding-top: 2.3rem;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        border: 0px solid #d4d4d4;
        border-radius: 0px;
        position: static;
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.175);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.175);
    }
    
    .timelinepanellast {
        background-color: #fff;
        float: left;
        padding-top: 0rem;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        border: 0px solid #d4d4d4;
        border-radius: 0px;
        position: static;
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.175);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.175);
    }
    
    .timeline-event.timeline-inverted {
        min-height: 4rem;
        margin-bottom: 0px;
    }
    
    timeline-badge {
        box-shadow: 0 0 0 4px white, 0 3px 0 4px white;
        color: #4A90E2;
        width: 1.4rem;
        height: 1.4rem;
        left: 4.3rem;
        top: 2.5rem;
        line-height: 1.4rem;
        font-size: 1.4em;
        text-align: center;
        position: absolute;
        background-color: #fff;
        z-index: 100;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
    }
    
    .timelinebadge {
        box-shadow: 0 0 0 4px white, 0 3px 0 4px white;
        color: #4A90E2;
        width: 1.4rem;
        height: 1.4rem;
        left: 4.3rem;
        top: 0rem;
        line-height: 1.4rem;
        font-size: 1.4em;
        text-align: center;
        position: absolute;
        background-color: #fff;
        z-index: 100;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
    }
    
    timeline-badge.info.timeline-hidden {
        background-color: #fff !important;
    }
    
    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 1px;
        background-color: #cccccc;
        left: 5rem;
        /* margin-left: -1.5px; */
    }
    
    .shoujibord {
        position: absolute;
        top: 0;
        right: 0;
        height: 1px;
        -webkit-transition: -webkit-transform 0.4s;
        -moz-transition: -moz-transform 0.4s;
        transition: transform 0.4s;
        bottom: 0;
        height: 3.2rem;
        border-color: #f5f5f5;
        border-left-style: solid;
        border-width: 1px;
        vertical-align: middle;
    }
    
    td {
        padding: 0.7rem;
        background-color: rgba(0, 0, 0, 0);
        vertical-align: middle;
    }
    
    p {
        margin: 0 !important;
    }
    
    .text-muted {
        color: #888;
    }
    
    table {
        border-spacing: 0;
        border-collapse: inherit !important;
    }
    
    .pitt {
        width: 6rem;
        height: 6rem;
        padding: 5px;
    }
    
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
        width: 100%;
        background-color: #f5f5f5;
        height: 6rem;
        line-height: 6rem;
        text-align: center
    }
    
    .bot input {
        width: 90%;
        border-radius: 4px;
        border: 0;
        background-color: #006bc0;
        color: white;
        height: 3.5rem;
        font-size: 16px;
    }
    
    .fot {
        height: 3rem;
        width: 100%;
        float: left;
    }
</style>


<!-- <div class="item item-divider">
    评论列表
</div> -->
<!-- <ion-content>
    <div class="item" ng-repeat="comment in myData ">
        <div class="row">
            <div class="col col-20 ">
                评论人:
            </div>
            <div class="col">
                &nbsp;&nbsp;{{comment.userName}}
            </div>
        </div>
        <div class="row">
            <div class="col col-20 ">
                评论:
            </div>
            <div class="col">
                <span ng-bind-html="comment.review"></span>
            </div>
        </div>
        <div class="row">
            <div class="col col-20 ">
                评分:
            </div>
            <div class="col">
                &nbsp;&nbsp;{{comment.reviewScore}}
            </div>
        </div>
        <div class="row">
            <div class="col col-20 ">
                时间:
            </div>
            <div class="col">
                &nbsp;&nbsp;{{comment.reviewTime | date:"yyyy-MM-dd HH:mm:ss"}}
            </div>
        </div>
    </div>
    <ion-infinite-scroll ng-if="!domore " on-infinite="loadMore() " immediate-check="false " distance="1% "></ion-infinite-scroll>
</ion-content> -->
<div class="scroll-content has-footer">
    <!-- <ion-content overflow-scroll="true"> -->
    <ion-content>
        <div class="formly">
            <div class="titledetail row ng-binding border-style">
                <!-- <h3>{{options.templateOptions.label}}</h3> -->
                报修信息<span class="font-color-gray fz-12 ng-binding"></span>
            </div>

            <!-- <div class="col-xs-12"> -->
            <!-- <div class="ui-handler-style">
            <div class="normal-label-text">
                <span class="">当前状态</span>
            </div>
            <div class="ui-label-style bg-0">
                <span class="spanRight ng-binding">{{item.state}}</span>
            </div>
        </div> -->
            <div class="normal-label-wrap">
                <div class="normal-text  col col-70 col-xs-12">
                    <span ng-class="{'labelColor':to.required}" class="ng-binding font-color-black">报修编号：<span class="font-color-gray">{{item.incident.incidentsign}}</span>
                    </span>
                    <span class="{{item.statecolor}} pull-right">{{item.state}}</span>
                </div>
            </div>
            <div class="normal-label-wrap">
                <div class="normal-text  col col-70 col-xs-12">
                    <span ng-class="{'labelColor':to.required}" class="ng-binding font-color-black">报修地址：<span class="font-color-gray">{{item.incident.area.area}} {{item.incident.place.place}} {{item.incident.address}}</span>
                    </span>
                </div>
            </div>
            <div class="normal-label-wrap">
                <div class="normal-text  col col-70 col-xs-12">
                    <div class="ng-binding font-color-black  col_0 ">报修内容：<span class="ng-binding  col_0 font-color-gray">{{item.description}}</span>
                    </div>
                    <!-- <div class="ng-binding font-color-black  col_0 font-color-gray">
                    </div> -->
                </div>
            </div>
            <div class="normal-label-wrap">
                <div class="normal-text  col col-70 col-xs-12">
                    <span ng-class="{'labelColor':to.required}" class="ng-binding font-color-black">报修分类：<span class="font-color-gray">{{item.incident.category.category}}</span>
                    </span>
                </div>
            </div>
            <div class="normal-label-wrap">
                <div class="normal-text  col col-70 col-xs-12">
                    <span ng-class="{'labelColor':to.required}" class="ng-binding font-color-black pull-left">维修人员：<span class="font-color-gray">{{item.incident.handlingPersonnelUser.name}}</span>
                    </span>
                    <div class="pull-right">
                        <table class="shoujibord">
                            <tr class="normal-text ">
                                <td valign="top">
                                    <a class="font-color-lightblue" href="tel:{{item.incident.handlingPersonnelUser.phone}}"> <i class="icon iconfont dsit-shouji font-color-lightblue"></i></a>
                                    </span>
                                </td>
                            </tr>
                        </table>
                        <!-- <div>
                            <a class="font-color-lightblue" href="tel:{{item.mphone}}"> <i class="icon iconfont dsit-shouji font-color-lightblue"></i></a>
                            </span>
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- <div class="normal-label-wrap">
                <div class="normal-text rowlr col col-70 col-xs-12">
                    <span class="ng-binding font-color-black pull-left">报障分类：<span class="font-color-gray">{{item.incident.category.category}}</span></span>
                    <div class="pull-right">
                        <table class="shoujibord">
                            <tr class="normal-text ">
                                <td valign="top">
                                    <a class="font-color-lightblue" href="tel:{{item.mphone}}"> <i class="icon iconfont dsit-shouji font-color-lightblue"></i></a>
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <span class="ng-binding font-color-black pull-right" style="margin-right:2.5rem">维修人员：<span class="font-color-gray">{{item.incident.handlingPersonnelUser.name}}</span></span>
                </div>
            </div> -->
            <div class="normal-label-wrap">
                <div class="normal-text  col col-70 col-xs-12">
                    <span class="ng-binding font-color-black pull-left">报修图片：<span class="font-color-gray"></span></span>
                    <span ng-repeat="it in imagelist"><span><img ng-src="{{serverIp}}/service/common/common/previewAttachmentImage/{{it.token}}" class="pitt"></span></span>
                    <!-- <span><img src="http://mxd.766.com/db/images/mob/9420543.png" class="pitt"></span> -->
                    <!-- <span> -->
                    <!-- <span class="pitt">
                        <iframe style="width:100%;height:100%;"  width="100%" height="100%" ng-src="{{imagelist[0].previewUrl}}" class="t-iframe" scrolling="no" security="restricted" sandbox="" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                    </span> -->
                    <!-- <div ng-repeat="it in imagelist" ng-include="{{it.previewUrl}}"></div> -->
                    <!-- <ul class="nav nav-tabs" ng-repeat="item in [1,2,3]">
                        <iframe ng-src="{{it.previewUrl}}" height="100%" width="100%"></iframe>
                    </ul> -->
                    <!-- </span> -->
                    <!-- <table width="90" border="0" align="center" cellpadding="1" cellspacing="1">
                        <tr>
                            <td>
                                <p align="center" style="margin-top: 0px;margin-left: 0">
                                    <iframe width="86" height="65" src="http://115.156.150.117:8081/wda/text/wdaBC/wda67/wda73/wda2E/wdaF8/wdaDA7E849381966625EDE576/html/index.html" class="t-iframe" scrolling="no" security="restricted" sandbox="" frameborder="no" border="0" marginwidth="0"
                                        marginheight="0" scrolling="no"></iframe>
                            </td>
                        </tr>
                    </table> -->
                    <!-- <div ng-repeat="it in imagelist">
                        <iframe align="center" width="100%" height="170" src="{{it.previewUrl}}" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                    </div> -->
                    <!-- <object style="border:0px" type="text/x-scriptlet" data="http://115.156.150.117:8081/wda/text/wdaBC/wda67/wda73/wda2E/wdaF8/wdaDA7E849381966625EDE576/html/index.html" width=100% height=150>
                    </object> -->
                    <div id="page1"></div>
                </div>
            </div>
            <div class="titledetail row ng-binding border-style">
                <!-- <h3>{{options.templateOptions.label}}</h3> -->
                报修进度<span class="font-color-gray fz-12 ng-binding"></span>
            </div>
            <timeline class="paddingall">
                <timeline-event ng-repeat="event in events" side="{{side}}">
                    <timeline-badge class="{{event.badgeClass}}  timeline-hidden" ng-class="{timelinebadge:events.length==5&&events[5].when!=' '}" when-visible="animateElementIn" when-not-visible="animateElementOut">
                        <i class="glyphicon {{event.badgeIconClass}}"></i>
                    </timeline-badge>
                    <timeline-title class="{{event.titleClass}} timeline-hidden timepost fz-14" ng-class="{timepostlast:events.length==5&&events[5].when!=' '}" when-visible="animateElementIn" when-not-visible="animateElementOut">
                        {{event.title}}
                    </timeline-title>
                    <timeline-panel class="{{event.badgeClass}} timeline-hidden fz-12" ng-class="{timelinepanellast:events.length==5&&events[5].when!=' '}" when-visible="animateElementIn" when-not-visible="animateElementOut">
                        <timeline-heading class="font-color-six">
                            <p ng-if="event.when">
                                <small class="fz-12 font-color-gray"><i class="glyphicon glyphicon-time"></i>{{event.when}}</small>
                            </p>
                            <p ng-class="{telephone:event.title=='处理'}">{{event.content}}</p>
                            <!-- <p ng-if="event.when">
                                <small class="text-muted fz-12"><i class="glyphicon glyphicon-time"></i>{{event.when}}</small>
                            </p>
                            <p ng-if="event.titleContentHtml" ng-bind-html="event.titleContentHtml">
                            </p> -->
                        </timeline-heading>
                        <!-- <p ng-bind-html="event.contentHtml"></p>
                        <timeline-footer ng-if="event.footerContentHtml">
                            <span ng-bind-html="event.footerContentHtml"></span>
                        </timeline-footer> -->
                    </timeline-panel>
                </timeline-event>
            </timeline>

            <!-- <div class="col-xs-12" ng-if="item.rejectRemark">
                <div class="ui-handler-style">
                    <div>
                        <div class="normal-label-text">
                            <span class="">服务台回复</span>
                        </div>
                        <div class="ui-label-style ng-binding">
                            {{item.rejectRemark}}
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </ion-content>
    <div class="bot" ng-if="item.state=='待评价'">
        <input type="button" value="评价" ng-click="degreeFunction(item)">
    </div>
</div>
<!-- </div> -->