client-eam-v5/src/components/customer/AssetInstanceSearchDetail.vue

<template>
  <div class="container-fluid">
    <div>
      <div class="row">
        <div class="col-md-12">
          <h1 class="page-header" style="margin-top: 10px; margin-bottom: 0px">
            <AuthImage
              :auth-src="
                Common.getThumbnailImageSrc(
                  assetClassName,
                  showAssetInstance.imageName
                )
              "
              class="image img-thumbnail"
              style="width: 78px; height: 78px"
              @click="
                $refs.imagePreview.preview(
                  assetClassName,
                  showAssetInstance.imageName
                )
              "
            />

            {{ $t("lang.AssetInstanceSearchDetail.assetCardDetails") }}
          </h1>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 asset-detail">
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.ownerClient") }}：{{
                showAssetInstance.clientName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.ownerDepartment") }}：{{
                showAssetInstance.organizationName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.useClient") }}：{{
                showAssetInstance.responseClientName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.useDepartment") }}：{{
                showAssetInstance.responseOrganizationName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.assetName") }}：{{
                showAssetInstance.name
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.assetNumber") }}：{{
                showAssetInstance.assetNo
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.originalAssetNumber")
              }}：{{ showAssetInstance.oldAssetNo }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.cardName") }}：{{
                showAssetInstance.cardName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.cardNumber") }}：{{
                showAssetInstance.no
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.barcode") }}：{{
                showAssetInstance.barCode
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.epc") }}：{{
                showAssetInstance.epc
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.noteName") }}：{{
                showAssetInstance.nickName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.type") }}：{{
                showAssetInstance.type
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.categoryName") }}：{{
                showAssetInstance.categoryName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.projectName") }}：{{
                showAssetInstance.projectItemName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.placeOfPlacement") }}：{{
                showAssetInstance.savePosition
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.placementLocation") }}：{{
                showAssetInstance.locationName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.originalValue") }}：{{
                showAssetInstance.orginalValue
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.unitOfMeasurement")
              }}：{{ showAssetInstance.computationUnitName }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.subscriber") }}：{{
                showAssetInstance.applyPurchaseUserName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.purchaser") }}：{{
                showAssetInstance.applyOrderUserName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.receiver") }}:{{
                showAssetInstance.recipientUserName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.use") }}:{{
                showAssetInstance.useUserName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.custodian") }}：{{
                showAssetInstance.depositoryUserName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.personLiable") }}：{{
                showAssetInstance.custodianName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.usageStatus") }}：{{
                showAssetInstance.useStatusName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.quantity") }}：{{
                showAssetInstance.quantity
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.validUntil") }}:{{
                showAssetInstance.recentlyValidDate
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.technicalIndex") }}:{{
                showAssetInstance.technicalIndex
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.waysToIncrease") }}:{{
                showAssetInstance.increaseMethodName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.depreciationMethod")
              }}:{{ showAssetInstance.depreciationMethodName }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.serviceMonths") }}:{{
                showAssetInstance.estimateUsedMonth
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.startUseDate") }}:{{
                showAssetInstance.depreciationStartDate
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.totalAmountOfWork") }}:{{
                showAssetInstance.totalAmountOfWork
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.accruedMonth") }}:{{
                showAssetInstance.depreciationMonths
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.netResidualValueRate")
              }}:{{ showAssetInstance.reservedRate }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.netResidualValue") }}:{{
                showAssetInstance.netSalvage
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.accumulatedDepreciation")
              }}:{{ showAssetInstance.totalDepreciationValue }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.monthlyDepreciationRate")
              }}:{{ showAssetInstance.monthDepreciationRate }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t(
                  "lang.AssetInstanceSearchDetail.theAmountOfDepreciationIsWithdrawnThisMonth"
                )
              }}:{{
                showAssetInstance.depreciationValueForCurrentMonth
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.netWorth") }}:{{
                showAssetInstance.netValue
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.pictureURL") }}:{{
                showAssetInstance.imageName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.invoicePictureAddress")
              }}:{{ showAssetInstance.invoiceUrl }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.otherPictureWebsites")
              }}:{{ showAssetInstance.otherImages }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.remarks") }}:{{
                showAssetInstance.description
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t(
                  "lang.AssetInstanceSearchDetail.necessaryToMakeAnAppointment"
                )
              }}:{{
                showAssetInstance.isNeedAppointment == true
                  ? $t("lang.AssetInstanceSearchDetail.true")
                  : $t("lang.AssetInstanceSearchDetail.false")
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.needToMaintain") }}:{{
                showAssetInstance.isNeedMaintain == true
                  ? $t("lang.AssetInstanceSearchDetail.true")
                  : $t("lang.AssetInstanceSearchDetail.false")
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.supplier") }}:{{
                showAssetInstance.supplierStr
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.manufacturer") }}:{{
                showAssetInstance.manufacturer
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.maintenanceUnit") }}:{{
                showAssetInstance.maintenanceCompany
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.factoryNumber") }}:{{
                showAssetInstance.leaveFactoryNo
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.detailedParameters")
              }}:{{ showAssetInstance.detailParameter }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.operatingProcedures")
              }}:{{ showAssetInstance.operationRules }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.purchaseDate") }}:{{
                showAssetInstance.buyDate
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.financialEntryDate")
              }}:{{ showAssetInstance.accountCreateDate }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.contractNo") }}:{{
                showAssetInstance.contractNo
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.invoiceNumber") }}:{{
                showAssetInstance.billNo
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.warrantyDeadline") }}:{{
                showAssetInstance.warrantyDeadline
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.importTime") }}:{{
                showAssetInstance.importDate
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{
                $t("lang.AssetInstanceSearchDetail.accountingSubjects")
              }}:{{ showAssetInstance.accountingSubjects }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.userInput") }}:{{
                showAssetInstance.useUserNameInput
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.licensePlate") }}:{{
                showAssetInstance.vehicleNo
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.selfNumbering") }}:{{
                showAssetInstance.selfNo
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.computerName") }}:{{
                showAssetInstance.computerName
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.ipAddress") }}:{{
                showAssetInstance.ipAddress
              }}</strong>
            </div>
          </div>
          <div class="col-md-3">
            <div>
              <strong>{{ $t("lang.AssetInstanceSearchDetail.macAddress") }}:{{
                showAssetInstance.macAddress
              }}</strong>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 div-asset-info">
          <ul id="myTab" class="nav nav-tabs">
            <li class="active">
              <a href="#asset-content-1" data-toggle="tab">{{
                $t("lang.AssetInstanceSearchDetail.lifeCycle")
              }}</a>
            </li>
            <!-- <li>
              <a href="#asset-content-2" data-toggle="tab">{{
                $t("lang.AssetInstanceSearchDetail.currentLocation")
              }}</a>
            </li> -->
            <li>
              <a href="#asset-content-3" data-toggle="tab">{{
                $t("lang.AssetInstanceSearchDetail.historicalPosition")
              }}</a>
            </li>
            <!-- <li>
              <a href="#asset-content-5" data-toggle="tab">{{
                $t("lang.AssetInstanceSearchDetail.historicalPosition1")
              }}</a>
            </li> -->
            <li>
              <a href="#asset-content-4" data-toggle="tab">{{
                $t("lang.AssetInstanceSearchDetail.inAndOutRecords")
              }}</a>
            </li>
          </ul>
          <div class="tab-content div-asset-info">
            <div id="asset-content-1" class="tab-pane fade in active">
              <div v-if="historyEvents != null" class="row div-history-event">
                <div v-for="item in historyEvents" :key="item.id" class="media col-md-12">
                  <div class="media-left">
                    <a href="javascript:void(0);">
                      <img
                        class="media-object media-img img-thumbnail"
                        :src="getHistoryIconSrc(item.title)"
                      />
                    </a>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading">{{ item.title }}</h4>
                    <p class="event-time">
                      {{ $t("lang.AssetInstanceSearchDetail.time") }}:
                      {{ item.eventDate }}
                    </p>
                    <p>{{ item.content }}</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div id="asset-content-2" class="tab-pane fade in">
              <p>{{ $t("lang.AssetInstanceSearchDetail.currentLocation") }}</p>
            </div> -->
            <div id="asset-content-3" class="tab-pane fade in">
              <div class="form form-inline time-box">
                <div class="form-group">
                  <label>{{
                    $t("lang.AssetInstanceSearchDetail.startTime")
                  }}</label>
                  <DateTime
                    v-model="startDate"
                    name="datetime"
                  />
                </div>
                <div class="form-group">
                  <label>{{
                    $t("lang.AssetInstanceSearchDetail.endTime")
                  }}</label>
                  <DateTime
                    v-model="endDate"
                    name="datetime"
                  />
                </div>
                <button
                  type="button"
                  class="btn btn-default"
                  @click="getAssetImageInfosByEpc"
                >
                  {{ $t("lang.AssetInstanceSearchDetail.determine") }}
                </button>
              </div>
              <div class="table-responsive">
                <table class="table table-striped table-bordered">
                  <thead>
                    <tr height="40px">
                      <th>
                        {{ $t("lang.AssetInstanceSearchDetail.serialNumber") }}
                      </th>
                      <th>{{ $t("lang.AssetInstanceSearchDetail.time") }}</th>
                      <th>{{ $t("lang.AssetInstanceSearchDetail.place") }}</th>
                      <th>
                        {{ $t("lang.AssetInstanceSearchDetail.picture") }}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in imageInfos" :key="item.id">
                      <td>{{ index + 1 }}</td>
                      <td>{{ item.date }}</td>
                      <td>{{ item.location }}</td>
                      <td>
                        <button
                          class="btn btn-primary"
                          @click="showImageUrl(item)"
                        >
                          {{ $t("lang.AssetInstanceSearchDetail.picture") }}
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div>
                <div class="form-group">
                  <div class="pull-right">
                    <Pagination
                      v-if="pagination2.last_page > 0"
                      :pagination="pagination2"
                      :callback="getAssetImageInfosByEpc"
                    />
                  </div>
                </div>
              </div>
            </div>
            <!-- <div id="asset-content-5" class="tab-pane fade in">
              <div class="form form-inline time-box">
                <div class="form-group">
                  <label>{{
                    $t("lang.AssetInstanceSearchDetail.startTime")
                  }}</label>
                  <DateTime
                    v-model="eventOriginalStartDate"
                    name="datetime"
                  />
                </div>
                <div class="form-group">
                  <label>{{
                    $t("lang.AssetInstanceSearchDetail.endTime")
                  }}</label>
                  <DateTime
                    v-model="eventOriginalEndDate"
                    name="datetime"
                  />
                </div>
                <div class="form-group">
                  <button
                    type="button"
                    class="btn btn-default"
                    @click="queryPageSingleEpcOriginalByTime()"
                  >
                    {{ $t("lang.AssetInstanceSearchDetail.determine") }}
                  </button>
                </div>
              </div>
              <div class="table-responsive">
                <table class="table table-striped table-bordered">
                  <thead>
                    <tr height="40px">
                      <th>
                        {{ $t("lang.AssetInstanceSearchDetail.serialNumber") }}
                      </th>
                      <th>位置</th>
                      <th>{{ $t("lang.AssetInstanceSearchDetail.time") }}</th>
                      <th>
                        {{ $t("lang.AssetInstanceSearchDetail.enterTime") }}
                      </th>
                      <th>
                        {{ $t("lang.AssetInstanceSearchDetail.leaveTime") }}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-if="queryPageSingleEpcFilterByTimeErrorMessage != null && queryPageSingleEpcFilterByTimeErrorMessage.length > 0">
                      <td colspan="5">{{ queryPageSingleEpcFilterByTimeErrorMessage }}</td>
                    </tr>
                    <tr v-for="(item, index) in eventFilters" :key="item.id">
                      <td>
                        {{
                          index +
                            1 +
                            (_self.pagination3.current_page - 1) *
                            _self.pagination3.per_page
                        }}
                      </td>
                      <td>{{ item.locationNo }}</td>
                      <td>{{ item.enterTime }}</td>
                      <td>{{ item.enterTime }}</td>
                      <td>{{ item.leaveTime }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div>
                <div class="form-group">
                  <div class="pull-right">
                    <VueBootstrapPagination
                      v-if="pagination3.last_page > 0"
                      :pagination="pagination3"
                      :callback="queryPageSingleEpcOriginalByTime"
                    />
                  </div>
                </div>
              </div>
            </div> -->
            <div id="asset-content-4" class="tab-pane fade in">
              <div class="form form-inline time-box">
                <div class="form-group">
                  <label>{{
                    $t("lang.AssetInstanceSearchDetail.startTime")
                  }}</label>
                  <DateTime
                    v-model="searchStartDate"
                    name="datetime"
                  />
                </div>
                <div class="form-group">
                  <label>{{
                    $t("lang.AssetInstanceSearchDetail.endTime")
                  }}</label>
                  <DateTime
                    v-model="searchEndDate"
                    name="datetime"
                  />
                </div>
                <button
                  type="button"
                  class="btn btn-default"
                  @click="getAssetInstanceRfidRecordByDate"
                >
                  {{ $t("lang.AssetInstanceSearchDetail.determine") }}
                </button>
              </div>
              <div class="table-responsive">
                <table class="table table-striped table-bordered">
                  <thead>
                    <tr height="40px">
                      <th>
                        {{ $t("lang.AssetInstanceSearchDetail.serialNumber") }}
                      </th>
                      <th>
                        {{ $t("lang.AssetInstanceSearchDetail.scanTime") }}
                      </th>
                      <th>
                        {{ $t("lang.AssetInstanceSearchDetail.scanner") }}
                      </th>
                      <th>
                        {{ $t("lang.AssetInstanceSearchDetail.position") }}
                      </th>
                      <th>{{ $t("lang.AssetInstanceSearchDetail.type") }}</th>
                      <th width="80px">
                        {{ $t("lang.AssetInstanceSearchDetail.picture") }}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in assetInstanceRfidRecords" :key="item.id">
                      <td>
                        {{
                          index +
                            1 +
                            (pagination.current_page - 1) *
                            pagination.per_page
                        }}
                      </td>
                      <td>{{ item.scanDate }}</td>
                      <td>{{ item.scanUserName }}</td>
                      <td>{{ item.position }}</td>
                      <td>{{ item.type }}</td>
                      <td>
                        <a-image
                          :width="200"
                          :src="getImageSrc(item.className,item.image)"
                        />
                        <!-- <img
                          :authSrc="
                            showRfidRecordThumbnailImage(
                              item.className,
                              item.image
                            )
                          "
                          style="width: 80px; height: 50px"
                          @click="
                            $refs.imagePreview.preview(
                              item.className,
                              item.image
                            )
                          "
                        /> -->
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div>
                <div class="form-group">
                  <div class="pull-left">
                    {{ $t("lang.AssetInstanceSearchDetail.totalQueries")
                    }}<b>{{ pagination.total }}</b>{{ $t("lang.AssetInstanceSearchDetail.strip")
                    }}{{ $t("lang.AssetInstanceSearchDetail.data") }}
                  </div>
                  <div class="pull-right">
                    <VueBootstrapPagination
                      v-if="pagination.last_page > 0"
                      :pagination="pagination"
                      :callback="getAssetInstanceRfidRecord"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Modal v-model:show="modal" large="true" @cancel="modal = false">
      <template #header> 历史图片 </template>
      <div class="rowTest">
        <div
          v-for="item in imageUrlTest"
          :key="item.id"
          style="width: 200px; height: 200px"
        >
          <img
            :authSrc="showThumbnailImage(item)"
            class="m-image"
            style="width: 200px; height: 200px"
            @click="$refs.imagePreview.previewImage(showImage(item))"
          />
        </div>
      </div>
    </Modal>

    <ImagePreview ref="imagePreview" />
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../../common/Common.js';
import { Notify } from 'pc-component-v3';
import AuthImage from '../../widget/AuthImage.vue';






import AssetInstanceRfidRecordResource from '../../api/asset/AssetInstanceRfidRecordResource.js';

export default {

  components: {
    AuthImage,
  },
  data: function () {
    this.Common = Common;
    return {
      //历史图片分页参数
      pagination2: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 1, // required
        from: 1,
        to: 1, // required
      },
      showPager: false, // 是否显示分页
      assetInstances: [],
      assetClassName: 'com.leanwo.prodog.asset.model.AssetInstance',
      showAssetInstance: '',
      activeContent: 1,
      imageInfos: [],
      historyEvents: [],
      imageServerBaseUrl: '',
      startDate: '',
      endDate: '',
      searchStartDate: '',
      searchEndDate: '',
      eventOriginalStartDate: '',
      eventOriginalEndDate: '',
      imageUrlTest: [],
      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 0, // required
      },
      // pagination3: {
      //   total: 0,
      //   per_page: Common.pageSize, // required
      //   current_page: 1, // required
      //   last_page: 0, // required
      // },
      assetInstanceRfidRecords: [],
      eventFilters: [],
      loading: false,
      modal: false,
      queryPageSingleEpcFilterByTimeErrorMessage: 0,
      
    };
  },

  computed: {},

  watch: {},

  mounted: function () {
    var _self = this;
    var assetInstanceId = _self.$route.query.assetInstanceId;
    _self.findAssetInstance(assetInstanceId);
    _self.getEventOriginalEndDate();
    this.getCameraNo();
    $('#right-container').css('background-color', '#ffffff');
  },

  beforeUnmount: function () {
    $('#right-container').css('background-color', '#f7f7f7');
  },

  methods: {

    // 获取图片路径
    getImageSrc : function(className, imageName) {
      var protocol = window.location.protocol;
      var host = window.location.host;
      var localhostPath = protocol + '//' + host ;

      var accountId = localStorage.getItem('#accountId');
      if (imageName == null) {
        return null;
      }
      if (imageName != null && imageName[0] == '/') {
        return localhostPath + '/Files/' + accountId + '/Images/' + className + imageName;
      } else {
        return localhostPath + '/Files/' + accountId + '/Images/' + className + '/' + imageName;
      }
    },
    getEventOriginalEndDate: function () {
      const _self = this;
      // 前一个月的时间
      var wdate = new Date();
      wdate.setMonth(wdate.getMonth() - 1);
      var y = wdate.getFullYear();
      var m =
        wdate.getMonth() + 1 < 10
          ? '0' + (wdate.getMonth() + 1)
          : wdate.getMonth() + 1;
      var d = wdate.getDate() < 10 ? '0' + wdate.getDate() : wdate.getDate();
      var h =
        (wdate.getHours() < 10 ? '0' + wdate.getHours() : wdate.getHours()) +
        ':';
      var mm =
        (wdate.getMinutes() < 10
          ? '0' + wdate.getMinutes()
          : wdate.getMinutes()) + ':';
      var dd =
        wdate.getSeconds() < 10 ? '0' + wdate.getSeconds() : wdate.getSeconds();
      var formatwdate = y + '-' + m + '-' + d + ' ' + h + mm + dd;
      console.log('前一个月的时间' + formatwdate);
      _self.eventOriginalEndDate = moment().format('YYYY-MM-DD HH:mm:ss');
      _self.eventOriginalStartDate = formatwdate;
    },

    //放大图片
    enlargeImg: function (event, item) {
      var _self = this;
      var imageSrc = Common.getFileServerUrl() + 'Files\\UsbCamera\\' + item;
      // eslint-disable-next-line
      var bgstr =
      // eslint-disable-next-line
        '<div id="ImgZoomInBG" style=" background:#000000; filter:Alpha(Opacity=70); opacity:0.7; position:fixed; left:0; top:0; z-index:10000; width:100%; height:100%; display:none;"><iframe src="about:blank" frameborder="5px" scrolling="yes" style="width:100%; height:100%;"></iframe></div>';
      //				alert($(event.target).attr('src'));

      var imgstr =
        '<img id="ImgZoomInImage" src="' +
        imageSrc +
        '" onclick=$(\'#ImgZoomInImage\').hide();$(\'#ImgZoomInBG\').hide(); style="cursor:pointer; display:none; position:absolute; z-index:10001;" />';
      if ($('#ImgZoomInBG').length < 1) {
        $('body').append(bgstr);
      }
      if ($('#ImgZoomInImage').length < 1) {
        $('body').append(imgstr);
      } else {
        $('#ImgZoomInImage').attr('authSrc', imageSrc);
      }
      //alert($(window).scrollLeft());
      //alert( $(window).scrollTop());
      $('#ImgZoomInImage').css(
        'left',
        $(window).scrollLeft() +
          ($(window).width() - $('#ImgZoomInImage').width()) / 2,
      );
      $('#ImgZoomInImage').css(
        'top',
        $(window).scrollTop() +
          ($(window).height() - $('#ImgZoomInImage').height()) / 2,
      );
      $('#ImgZoomInBG').show();
      $('#ImgZoomInImage').show();
    },

    findAssetInstance: function (assetInstanceId) {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('AssetInstanceResource/findAssetInstanceById1'),
        type: 'post',
        data: JSON.stringify({
          'assetInstanceId': assetInstanceId,
        }),
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if(data.errorCode === 0){
            _self.showItem(data.data);
          }else{
            Notify.error('查询错误', data.errorMessage, true);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 显示资产卡片详细信息
     */
    showItem: function (assetInstance) {
      this.showAssetInstance = assetInstance;
      // 查询生命周期数据
      this.getHistoryEvent();

      // 查询历史位置
      this.getAssetImageInfosByEpc();

      // 查询进出记录
      this.getAssetInstanceRfidRecord();

      // 查询历史位置1
      // this.queryPageSingleEpcOriginalByTime();
    },

    // 查询历史位置
    getAssetImageInfosByEpc: function () {
      var _self = this;
      var sendData = {
        epc: _self.showAssetInstance.epc,
        start: (_self.pagination2.current_page - 1) * _self.pagination2.per_page,
        length: _self.pagination2.per_page,
      };
      if (_self.startDate != null && _self.startDate.length > 0) {
        sendData.startDate = _self.startDate;
      }
      if (_self.endDate != null && _self.endDate.length > 0) {
        sendData.endDate = _self.endDate;
      }
      $.ajax({
        url: Common.getApiURL('AssetInstanceResource/getAssetImageInfosByEpc'),
        type: 'post',
        dataType: 'json',
        data: sendData,
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if(data.errorCode === 0){
            _self.imageInfos = data.datas;
            _self.pagination2.total = data.total;
            _self.pagination2.last_page = Math.ceil(
              _self.pagination2.total / _self.pagination2.per_page,
            );
          }else{
            Notify.error('查询错误', data.errorMessage, true);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 查询资产进出数据
     * @author LeiGuoXian
     * @date 2020-07-26
     */
    getAssetInstanceRfidRecord: function () {
      var _self = this;
      var assetInstanceRfidRecordSearchDto = {
        epc: _self.showAssetInstance.epc,
        startDate: _self.searchStartDate,
        endDate: _self.searchEndDate,
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
      };
      AssetInstanceRfidRecordResource.getAssetInstanceRfidRecord(
        assetInstanceRfidRecordSearchDto,
      ).then(
        successData => {
          if (successData) {
            _self.assetInstanceRfidRecords = successData.dataList;
            _self.pagination.total = successData.totalSize;
            _self.pagination.last_page = Math.ceil(
              _self.pagination.total / _self.pagination.per_page,
            );
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },

    /**
     * 根据开始时间结束时间进行查询
     * @author LeiGuoXian
     * @date 2020-07-26
     */
    getAssetInstanceRfidRecordByDate: function () {
      var _self = this;
      _self.pagination.current_page = 1;
      _self.getAssetInstanceRfidRecord();
    },

    //去掉地点相同的位置，保留最后出现的
    getUniqueImageInfos: function (data) {
      var arr = [];
      for (var i = 0; i < data.length; i++) {
        var newItem = data[i];
        var newLocation = newItem.location;

        var hasSameLocation = false;
        for (var j = 0; j < arr.length; j++) {
          var oldItem = arr[j];
          var oldLocation = oldItem.location;
          if (oldLocation == newLocation) {
            hasSameLocation = true;
            break;
          }
        }

        var arrLen = arr.length;
        var lastLocation = undefined;
        if (arrLen >= 1) {
          lastLocation = arr[arrLen - 1].location;
        }

        if (!hasSameLocation) {
          arr.push(newItem);
        } else if (hasSameLocation && newLocation != lastLocation) {
          arr.push(newItem);
        } else {
          var oldDate = new Date(arr[arrLen - 1].date);
          var newDate = new Date(newItem.date);
          if (newDate > oldDate) {
            arr[arrLen - 1].date = newItem.date;
            arr[arrLen - 1].imageName = newItem.imageName;
            arr[arrLen - 1].id = newItem.id;
          }
        }
      }
      return arr;
    },


    callbackFun: function () {
      if (this.showAssetInstance == undefined || this.showAssetInstance == '') {
        return;
      }
      this.showItem(this.showAssetInstance);
    },

    /**
     * 返回缩略图的路径
     */
    showThumbnailImage: function (imageName) {
      //return this.imageServerBaseUrl + "\\" + imageName;
      //usb摄像头
      var newImages = imageName.split('\\');
      var newImage = newImages[1];
      var newFile = newImages[0];
      console.log(newFile + newImage);
      //return Common.getFileServerUrl() + "Files\\UsbCamera\\" + imageName;
      return (
        Common.getFileServerUrl() +
        'Files\\UsbCamera\\' +
        newFile +
        '\\thumbnail\\' +
        newImage
      );
    },

    /**
     * 返回缩略图的路径
     */
    showRfidRecordThumbnailImage: function (className, imageName) {
      if (imageName == null) {
        return;
      }
      var accountId = localStorage.getItem('#accountId');
      var url1 = imageName.substring(0, imageName.indexOf('/'));
      var url2 = imageName.substring(imageName.indexOf('/'), imageName.length);
      return (
        Common.getFileServerUrl() +
        'Files/' +
        accountId +
        '/Images/' +
        className +
        '/' +
        url1 +
        '/thumbnail' +
        url2
      );
    },

    /**
     * 返回大图的路径
     */
    showImage: function (imageName) {
      //return this.imageServerBaseUrl + "\\" + imageName;
      //usb摄像头
      var newImages = imageName.split('\\');
      var newImage = newImages[1];
      var newFile = newImages[0];
      console.log(newFile + newImage);
      return Common.getFileServerUrl() + 'Files\\UsbCamera\\' + imageName;
      // return Common.getFileServerUrl() + "Files\\UsbCamera\\" + newFile + "\\thumbnail\\" + newImage;
    },

    //显示九张抓拍图片
    showImageUrl: function (item) {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('AssetInstanceResource/getImageUrlByAsset'),
        type: 'GET',
        dataType: 'json',
        data: {
          assetEpc: _self.showAssetInstance.epc,
          readerResultId: item.id,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          
          if(data.errorCode === 0){
            _self.imageUrlTest = data.datas;
          }else{
            Notify.error('查询错误', data.errorMessage, true);
          }

          _self.modal = true;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 查询生命周期
     */
    getHistoryEvent: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('AssetInstanceResource/getHistoryEvent'),
        type: 'GET',
        dataType: 'json',
        data: {
          assetInstanceId: _self.showAssetInstance.id,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if(data.errorCode === 0){
            _self.historyEvents = data.datas;
          }else{
            Notify.error('查询错误', data.errorMessage, true);
          }
          
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    // 获取图标
    getHistoryIconSrc: function (title) {
      var iconSrc = '/static/assets/client-eam/image-asset-instance-change/';
      switch (title) {
      case '资产盘点':
        iconSrc += 'inventory.png';
        break;
      case '资产归还':
        iconSrc += 'stockin.png';
        break;
      case '资产领用':
        iconSrc += 'stockout.png';
        break;
      case '资产报失':
        iconSrc += 'lost.png';
        break;
      case '资产报失找回':
        iconSrc += 'lostReteieve.png';
        break;
      case '资产保养':
        iconSrc += 'maintain.png';
        break;
      case '资产维修':
        iconSrc += 'repair.png';
        break;
      case '资产卡片报废':
        iconSrc += 'scrap.png';
        break;
      case '资产计量':
        iconSrc += 'count.png';
        break;
      case '类别调整':
        iconSrc += 'category.png';
        break;
      case '资产基础信息调整':
        iconSrc += 'assetInstance.png';
        break;
      case '位置调整':
        iconSrc += 'assetLocation.png';
        break;
      case '部门转移':
        iconSrc += 'organization.jpg';
        break;
      case '项目调整':
        iconSrc += 'projectAdjust.png';
        break;
      case '资产编号调整':
        iconSrc += 'numberAdjustment.png';
        break;
      case '残值率调整':
        iconSrc += 'resizingRateAdjustment.png';
        break;
      case '折旧方法调整':
        iconSrc += 'depreciationMethodAdjustment.png';
        break;
      case '人员调整':
        iconSrc += 'personnelAdjustment.png';
        break;
      case '原值减少':
        iconSrc += 'originalCostReduction.png';
        break;
      case '原值增加':
        iconSrc += 'originalCostIncreases.png';
        break;
      }
      return iconSrc;
    },

    getCameraNo: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('OAConfigResource/queryConfig'),
        type: 'get',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.imageServerBaseUrl = data.imageServerBaseUrl;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 查询历史位置1
     */
    // queryPageSingleEpcOriginalByTime: function () {
    //   var _self = this;
    //   if (
    //     _self.eventOriginalStartDate == null &&
    //     _self.eventOriginalEndDate == null
    //   ) {
    //     Common.showDialog('错误', '请选择开始时间和结束时间', 'error');
    //     return;
    //   }
    //   const dto = {
    //     epc: _self.showAssetInstance.epc,
    //     startTime: _self.eventOriginalStartDate,
    //     endTime: _self.eventOriginalEndDate,
    //     pageNumber: _self.pagination3.current_page,
    //     pageSize: _self.pagination3.per_page,
    //   };
    //   console.log(dto);
    //   _self.queryPageSingleEpcFilterByTimeErrorMessage = null;
    //   $.ajax({
    //     url:
    //       Common.getHostPageBaseURL() +
    //       'datacenter/api/eventFilterResource/queryPageSingleEpcFilterByTime',
    //     type: 'post',
    //     contentType: 'application/json',
    //     dataType: 'json',
    //     data: JSON.stringify(dto),
    //     beforeSend: function (request) {
    //       Common.addTokenToRequest(request);
    //     },
    //     success: function (data) {
    //       if (data.errorCode != 0) {
    //         Common.showDialog('错误', data.errorMessage, 'error');
    //       } else {
    //         if (data.eventFilters != null && data.eventFilters.length > 0) {
    //           console.log(JSON.stringify(data.eventFilters));
    //           _self.eventFilters = data.eventFilters;
    //           _self.pagination3.total = data.total;
    //           _self.pagination3.last_page = Math.ceil(
    //             _self.pagination3.total / _self.pagination3.per_page,
    //           );
    //         }
    //       }
    //     },
    //     error: function (XMLHttpRequest, textStatus, errorThrown) {
    //       _self.queryPageSingleEpcFilterByTimeErrorMessage = '数据查询异常，您可能没有采购/启动相关的功能。';
    //       console.log(XMLHttpRequest);
    //       //Common.processException(XMLHttpRequest, textStatus, errorThrown);
    //     },
    //   });
    // },
  },
};
</script>
<style scoped>
.table-footer-left {
  float: left;
  margin: 0px;
}

.image {
  width: 100%;
}

.m-img {
  max-width: 100%;
}

.box {
  margin-bottom: 14px;
}

.box-title {
  margin-bottom: 6px;
}

.a-title {
  text-decoration: underline;
  font-size: 1.2em;
  color: #5b3bcd;
}

.p-tooltip {
  color: #999;
  font-size: 12px;
  line-height: 42px;
  margin: 0px;
}

.asset-detail div {
  word-wrap: break-word;
  padding: 0px;
}

.div-asset-info {
  margin-top: 15px;
  margin-bottom: 15px;
}

.m-image {
  height: 648px;
  width: 432px;
}

.modal-img-box {
  text-align: center;
}

.div-history-event ul {
  list-style-type: circle;
}

.div-history-event li {
  margin-bottom: 10px;
  font-size: 18px;
  border-bottom: 1px solid #dcd6d6;
}

.div-history-event p {
  margin: 3px 0px;
  font-size: 14px;
}

.event-title {
  font-weight: bold;
}

.event-time {
  color: #aaa;
  font-size: 0.9em;
}

.no-padding-left {
  padding-left: 0px;
}

.media-img {
  width: 45px;
  height: 45px;
}

.img-thumbnail {
  cursor: pointer;
}

.time-box {
  margin-bottom: 15px;
}

.rowTest {
  display: flex;
  flex-wrap: wrap;
}
</style>