itsm-pc-handle/assets/views/inspect/inspectReport.html

<style type="text/css">
  .inspectReportCtrl .incidentsearch {
    width: 30% !important;
    margin-right: 16px;
  }

  .inspectReportCtrl .iptSize {
    width: 60% !important;
    height: 28px !important;
  }

  .inspectReportCtrl .tree-control .tree-input {
    min-height: 28px !important;
  }

  .inspectReportCtrl .searchBtnBox > .btn {
    margin: 0 8px 10px 0;
  }
  .inspectReportCtrl .inspectMask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999;
  }
  .inspectReportCtrl .inspectMask .inspectMain {
    width: 400px;
    height: 200px;
    background-color: #fff;
    margin: 100px auto 0;
    border-radius: 5px;
    padding: 16px;
  }
  .inspectReportCtrl .inspectMask .inspectMain .inspectMain_header {
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
  }
  .inspectReportCtrl .inspectMask .inspectMain .inspectMain_footer {
    margin-top: 8px;
    text-align: center;
  }
  .inspectReportCtrl .xj_img {
    width: 50px;
    height: 100px;
    object-fit: cover;
    margin: 0 2px;
    cursor: pointer;
  }
  .inspectReportCtrl .gridInspectReport {
    height: 100vh;
  }
</style>
<div ng-controller="inspectReportCtrl" class="inspectReportCtrl">
  <div class="inspectMask" ng-if="isMask">
    <div class="inspectMain">
      <div class="inspectMain_header">请选择计划主题和批次号</div>
      <div>
        计划主题<span style="color: red" class="ng-scope">*</span>：
        <ui-select ng-model="queryList.title" ng-change="changeTitle(e)">
          <ui-select-match placeholder="请选择计划主题">
            <span ng-bind="$select.selected.title"> </span>
          </ui-select-match>
          <ui-select-choices
            repeat="item in (titles | filter:$select.search) track by item.id"
          >
            <span ng-bind="item.title"> </span>
          </ui-select-choices>
        </ui-select>
      </div>
      <div>
        批次号<span style="color: red" class="ng-scope">*</span>：
        <ui-select ng-model="queryList.batchNo">
          <ui-select-match placeholder="请选择批次号">
            <span ng-bind="$select.selected.name"> </span>
          </ui-select-match>
          <ui-select-choices
            repeat="item in (batchNos | filter:$select.search) track by item.id"
          >
            <span ng-bind="item.name"> </span>
          </ui-select-choices>
        </ui-select>
      </div>
      <div class="inspectMain_footer">
        <div class="btn btn_search" ng-click="onClick()"><span>确定</span></div>
      </div>
    </div>
  </div>
  <section id="page-title">
    <div class="row">
      <div class="col-sm-8">
        <h1 class="mainTitle">
          巡检报告<i
            tooltip="巡检报告列表"
            tooltip-placement="right"
            class="fa ti-help-alt margin-left-10 fontcolor-five pointfont"
          ></i>
        </h1>
      </div>
    </div>
  </section>
  <div class="schuback" id="searchid">
    <div class="row" style="padding-right: 0px !important">
      <div class="col-xs-12">
        <div class="col-xs-11" style="padding-right: 0px !important"></div>
        <div class="col-xs-1">
          <div>
            <div class="pull-left margin-top-10 searchBtnBox">
              <div class="btn btn_clean" ng-click="print()">打印</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tableList" ui-i18n="{{lang}}">
    <div class=" ">
      <div
        id="grid1 "
        ui-grid="gridOptions "
        external-scopes="$scope "
        ui-grid-resize-columns
        ui-grid-selection
        ui-grid-auto-resize
        class="grid gridInspectReport"
      ></div>
    </div>
  </div>
  <!-- 打印区域 -->
  <div style="display: none;">
    <div id="print">
      <style>
        #print{
          width: 250mm;
          background-color: #fff;
          margin: 0 auto;
        }
        #print .fm{
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
        }
        #print .fm h1{
          font-size: 80px;
          margin-top: 40mm;
        }
        #print .fm h2{
          width: 20px;
          word-wrap: break-word;
          font-size: 60px;
        }
        #print .fm h3{
          font-size: 18px;
          margin-left: auto;
          margin-right: 5mm;
          margin-bottom: 5mm;
        }
        #print table{
          width: 100%;
          border: 1px solid #000;
          border-collapse: collapse;
        }
        #print td,th{
          text-align: center;
          border: 1px solid #000;
          padding: 21px 2px;
          word-break: break-all;
        }
        #print .td{
          display: flex;
          align-items: center;
          justify-content: center;
          white-space:normal;
        }
        #print .td .inspectPar{
          overflow: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          white-space:normal;
          flex-wrap: wrap;
          height: 100%;
          word-break: break-all;
        }
        #print .td .inspectPar p{
          text-align: justify;
          width: 100%;
          margin: 0;
        }
        #print .xj_img {
          width: 50px;
          height: 100px;
          object-fit: cover;
          margin: 0 2px;
          cursor: pointer;
        }
      </style>
      <div class="fm">
        <h1>巡&nbsp;&nbsp;检&nbsp;&nbsp;报&nbsp;&nbsp;告</h1>
        <h2>{{queryList.title?queryList.title.title.split('').join('&nbsp;'):''}}</h2>
        <h3>批次号：{{queryList.batchNo?queryList.batchNo.name:''}}</h3>
      </div>
      <table>
        <tr>
          <th width="5%">序号</th>
          <th width="11%">日期</th>
          <th width="8%">巡检类型</th>
          <th width="28%">巡检项</th>
          <th width="22%">巡检图片</th>
          <th width="10%">整改意见</th>
          <th width="8%">巡检人</th>
          <th width="8%">地址</th>
        </tr>
        <tr ng-repeat="(index,data) in myData">
          <td>{{index + 1}}</td>
          <td>{{data.startTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
          <td>{{data.type}}</td>
          <td>
            <div class="td">
              <div class="inspectPar">
                <p ng-repeat="item in data.xj_items">
                  <span ng-if="item.key == 'sdCheckEnable7'||item.key == 'sdCheckEnable11'||item.key == 'sdCheckEnable12'">{{item.name}}：{{item.value=="true"?"是":"否"}}</span>
                  <span ng-if="item.key != 'sdCheckEnable7'&&item.key != 'sdCheckEnable11'&&item.key != 'sdCheckEnable12'">{{item.name}}：{{item.value=="true"?"正常":"异常"}}</span>
                </p>
              </div>
            </div>
          </td>
          <td>
            <img class="xj_img" ng-click="seePic(data,imageurl)" ng-repeat="(index,imageurl) in data.filePath" ng-src="{{imageurl}}"/>
          </td>
          <td>
            <div class="td">
              <div class="inspectPar"><p>{{data.model.descriptionTextarea}}</p></div>
            </div>
          </td>
          <td>{{data.userName}}</td>
          <td>{{data.address}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>