library-management-system/src/views/visualCheck/checkManage/dataScreening/girdList.vue

<template>
  <div class="app-container">
    <div class="venue-header dataScreening-header">
      <h4><i class="iconfont icon-shuju" />架位总览</h4>
      <div class="bookshelf-area">
        <!--  <span class="bookshelf-area">{{ floorName }} - {{ regionName }} - {{ gridRow +'排' }}</span> -->
        <router-link :to="{ path: '/check/check/dataScreening', query: {floorTabIndex: floorTabIndex }}">
          {{ floorName }}
        </router-link>
        <span>/</span>
        <router-link :to="{ path: '/dataScreening/regions', query: {regionTabIndex: regionTabIndex }}">
          {{ regionName }}
        </router-link>
        <span>/</span>
        <router-link :to="{ path: '/dataScreening/shelf', query: {tabIndex: tabIndex }}">
          {{ gridRow +'排' }}
        </router-link>
        <div class="double-click-btn"><span>点击左侧位置返回</span></div>
      </div>
      <p><i class="iconfont icon-gongsi" />{{ user.fonds.fondsName }}</p>
    </div>
    <div class="venue-content">
      <div class="tab-content">
        <span class="right-top-line" />
        <span class="left-bottom-line" />
        <div class="gird-data-header">
          <ul class="tab-nav">
            <li v-for="(item,index) in tabListData" :key="index" class="active-tab-nav">{{ item.name }}<i /></li>
            <!-- 最右侧装饰img -->
            <span class="tab-right-img" />
          </ul>
          <!-- <div class="tag-info">
            <p class="tag-sort">错序：<i class="iconfont icon-zhuangtai2" />1</p>
            <p class="tag-place">错架：<i class="iconfont icon-zhuangtai2" />1</p>
            <p class="tag-all">在架：<i class="iconfont icon-zhuangtai2" />20</p>
          </div> -->
          <div v-if="checkDateLine.length !== 0" class="time-update-cont">
            <span class="time-left-txt">最后更新时间：</span>
            <!-- <el-button class="time-btn-txt">{{ checkDateLine[2].endTime }}</el-button> -->
            <el-button>{{ checkDateLine[timeIndex].stockType === 0 ? '现在' : checkDateLine[timeIndex].endTime }}</el-button>
            <div class="time-update-line">
              <ul class="el-timeline">
                <li v-for="(activity, index) in checkDateLine" :key="index" class="el-timeline-item" @click="handleHistory(activity,index)">
                  <div class="el-timeline-item__tail" />
                  <div class="el-timeline-item__node el-timeline-item__node--normal" :style="index === timeIndex ? 'background-color: rgb(11, 189, 135);' : ''">
                    <i v-if="index === timeIndex" class="el-timeline-item__icon el-icon-more" />
                  </div>
                  <div class="el-timeline-item__wrapper">
                    <div class="el-timeline-item__content">
                      {{ computedStockType(activity.stockType) }}
                    </div>
                    <div class="el-timeline-item__timestamp is-bottom">
                      {{ activity.endTime }}
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <crudOperation :permission="permission">
            <template v-slot:middle>
              <el-select v-model="layerVal" size="small" placeholder="架位" class="filter-item" style="width: 100px; margin-right: 10px;" @change="changeShelfGetGrid">
                <el-option v-for="item in rackOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-button v-permission="permission.add" class="check-btn" size="mini" @click="toAdd(5)">
                <i class="iconfont icon-shengchengpandiandan" />
                架位盘点
              </el-button>
            </template>
            <template v-slot:right>
              <!-- @click="doExport(crud.selections)" -->
              <el-button :loading="crud.downloadLoading" size="mini" @click="doExport(3)">
                <i class="iconfont icon-daochu" />
                导出
              </el-button>
            </template>
          </crudOperation>
        </div>

        <div v-loading="shelfAllGridDataLoading" class="gird-data-book">
          <div v-for="(item,index) in shelfAllGridData" :key="index" class="gird-layer">
            <span class="gird-left-line" />
            <span class="gird-right-line" />
            <div class="layer-left">
              <div class="layer-left-book">
                <div
                  v-for="(book,i) in item.books"
                  :key="i"
                  :class="['book-item', { 'red-active' : book.bookStatus === '错架'} ,{ 'blue-active' : book.bookStatus === '错序'}]"
                  @mouseenter="showPopover(index, i, $event)"
                  @mouseleave="hidePopover"
                >
                  <span class="book-name">{{ book.bookName }}</span>
                </div>
              </div>
            </div>
            <div class="layer-right-handle">
              <div class="layer-info-header">
                <h4>{{ item.gridName }}</h4>
                <!-- <span>2024-11-28 09:46</span> -->
              </div>
              <div class="layer-right-content">
                <div class="layer-tag-info">
                  <div class="tag-item tag-sort">错序：<i class="iconfont icon-zhuangtai2" /><p>{{ baseStockData.length !==0 && baseStockData[index].errorOrderNum }}</p><span>（{{ baseStockData.length !==0 && baseStockData[index].errorOrderProbo }}）</span></div>
                  <div class="tag-item tag-place">错架：<i class="iconfont icon-zhuangtai2" /><p>{{ baseStockData.length !==0 &&baseStockData[index].errorShelfNum }}</p><span>（{{ baseStockData.length !==0 && baseStockData[index].errorShelfProbo }}）</span></div>
                  <div class="tag-item tag-all">在架：<i class="iconfont icon-zhuangtai2" /><p>{{ baseStockData.length !==0 && baseStockData[index].onShelfNum }}</p></div>
                </div>
                <div class="layer-handle">
                  <el-button size="mini" @click="handleDetail(item)">
                    <i class="iconfont icon-xiaowenjian" />
                    详情
                  </el-button>
                  <el-button size="mini" class="check-btn" @click="toAdd(6,item)">
                    <i class="iconfont icon-shengchengpandiandan" />
                    盘点
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          <!-- popover -->
          <div
            v-if="popoverIndex !== null"
            class="popover-external-set"
            :style="popoverStyle"
          >
            <div class="popover-content-set">
              <div class="tooltip-top">
                <h4>{{ shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].bookName }}</h4>
                <span v-if="shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].bookStatus === '错序'" class="tag-item tag-place">错序</span>
                <span v-if="shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].bookStatus === '错架'" class="tag-item tag-sort">错架</span>
              </div>
              <ul>
                <li><p>索书号</p><em>{{ shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].sortmark }}</em></li>
                <li><p>ISBN</p><em>{{ shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].isbn }}</em></li>
                <li><p>著者</p><em>{{ shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].bookAuthor }}</em></li>
                <li><p>出版社</p><em>{{ shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].bookPublish }}</em></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详情 -->
    <el-dialog class="dialog-grid-detail" append-to-body :close-on-click-modal="false" :visible.sync="detailVisible" :title="detailCurrent.gridName +'- 详情'" @close="handleCloseDialog">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />

      <div class="setting-dialog">
        <div class="detail-tab tab-content">
          <!-- <el-button v-if="detailCurrent && detailCurrent.onShelfNum" class="check-view-img" size="mini" @click="handleViewImg">
            <i class="iconfont icon-sulan" />
            盘点照片
          </el-button> -->
          <div v-if="detailCurrent && detailCurrent.onShelfNum" style="height: 260px; background-color: #ccc; overflow: hidden; position: relative;" @dblclick="handleViewImg" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseleave="onMouseUp" @mouseup="onMouseUp">
            <img
              ref="image"
              style="display:block; width: 100%;cursor: grab;"
              :src="bigImg"
              alt=""
              @wheel="onWheel"
            >
            <span style="position: absolute; top: 0; right: 0; padding: 4px 6px; color: #fff; background-color: rgba(3,72,243,.8); border-radius: 4px;">双击可查看所有图片</span>
            <el-button v-if="shouldShowResetButton" style="position: absolute; bottom: 10px; right: 10px; background-color: #fff;  color: rgba(3,72,243,1); font-weight: bold; padding: 4px;" @click="resetImage"><i class="iconfont icon-shuaxin" style="font-size: 12px;" />重置</el-button>
          </div>
          <ul class="tab-nav">
            <li :class="{'active-tab-nav': tabdialogIndex === 0}" @click="changeDialogTab(0)">图书列表</li>
            <el-button class="compare-btn" @click="isCompare = !isCompare">
              <i :class="['iconfont', !isCompare ? 'icon-zhongxinjiance':'icon-huifu' ]" />{{ !isCompare ? '数据比对' : '返回列表' }}</el-button>
          </ul>
          <el-table
            v-if="!isCompare"
            ref="table"
            class="archives-table"
            :data="detailTable"
            style="width: 100%;"
            height="calc(100vh - 560px)"
          >
            <el-table-column type="index" label="序号" width="55" align="center" />
            <el-table-column prop="bookName" label="题名" min-width="110" show-overflow-tooltip />
            <el-table-column prop="isbn" label="ISBN" />
            <el-table-column prop="sortmark" label="索书号" />
            <el-table-column prop="barcode" label="条码" />
            <el-table-column prop="floorName" label="所在位置" min-width="160">
              <template slot-scope="scope">
                <span>
                  {{ getLocation(scope.row) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="bookStatus" label="盘点结果" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.bookStatus === '未知'" class="row-state row-warehousing">未知</span>
                <span v-if="scope.row.bookStatus === '在架'" class="row-state row-binding state-active">在架</span>
                <span v-if="scope.row.bookStatus === '错架'" class="row-state row-lending state-active">错架</span>
                <span v-if="scope.row.bookStatus === '错序'" class="row-state row-physical state-active">错序</span>
              </template>
            </el-table-column>
          </el-table>
          <swiper
            v-else
            ref="swiperList"
            class="swiper-title layerShelf-swiper"
            :options="swiperListOptions"
            :auto-update="true"
            :auto-destroy="true"
          >
            <swiper-slide
              v-for="(item,index) in detailTable"
              :key="index"
              ref="swiperSlideItem"
              class="swiper-slide-title"
            >
              <div class="book-name" :class="[{ 'red-active' : item.bookStatus === '错架'} ,{ 'blue-active' : item.bookStatus === '错序'}]">
                <span>{{ index+1 }}</span>
                {{ item.bookName }}
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </el-dialog>

    <el-dialog class="gird-img-detail" append-to-body :close-on-click-modal="false" :visible.sync="detailImgVisible">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="gird-img-button">
        <el-button size="mini" :loading="downImgLoading" :disabled="downImgLoading" @click="handleDownloadImg">
          <i class="iconfont icon-xiazai" />
          下载
        </el-button>
        <el-button size="mini" @click="handleCloseImgDialog">
          <i class="iconfont icon-guanbixiao" />
          关闭
        </el-button>
      </div>
      <div class="setting-dialog">
        <el-carousel ref="carousel" indicator-position="outside" :autoplay="false" @setActiveItem="setActiveItem">
          <el-carousel-item v-for="item in bookImgData" :key="item">
            <img :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-dialog>
    <eForm ref="eform" />
    <exportForm ref="exportform" export-type="grid" />
  </div>
</template>

<script>
import { FetchInitStockInfo, FetchInitBookDetailsByGrids, FetchBillByShelfIdAndGridShelf, FetchIsGoodcutByBillNoAndGridId, FetchShowByBillIdAndShelfIdAndGridShelf } from '@/api/stockTask/index'
import { dataScreeningCrud } from '@/views/visualCheck/mixins/index'
import { FetchBookShelfDetails, FetchShelfGridByShelfIdAndGridShelf } from '@/api/shelf/index'
import crudRegion from '@/api/area/index'
import CRUD, { presenter, header, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import { mapGetters } from 'vuex'
import eForm from './module/form'
import exportForm from './module/export'
import { parseTime, saveAs, getBlob } from '@/utils/index'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'DataScreening',
  components: { crudOperation, eForm, exportForm, swiper, swiperSlide },
  cruds() {
    return CRUD({ title: '架位盘点', url: 'api/libraryRegion/initLibraryRegionList', crudMethod: { ...crudRegion }, sort: [], optShow: {
      add: false,
      edit: false,
      del: false,
      download: false,
      group: false,
      reset: false
    },
    queryOnPresenterCreated: false
    })
  },
  mixins: [presenter(), header(), crud(), dataScreeningCrud],
  data() {
    return {
      activeIndex: 0,
      downImgLoading: false,
      detailVisible: false,
      detailImgVisible: false,
      detailTable: [],
      detailCurrent: {},
      tabdialogIndex: 0,
      listLoading: false,
      tabIndex: 0,
      floorTabIndex: 0,
      regionTabIndex: 0,
      floorName: null,
      floorId: null,
      regionName: null,
      regionId: null,
      gridRow: null,
      gridShelf: null,
      bookShelfDetails: null,
      booShelfGrid: null,
      shelfAllGridData: [],
      layerNum: 0,
      rackNum: 0,
      bookNum: 46,
      layerVal: null,
      rackOptions: [],
      tabListData: [],
      permission: {
        add: ['admin', 'floor:add'],
        edit: ['admin', 'floor:edit'],
        del: ['admin', 'floor:del']
      },
      popoverIndex: null,
      popoverVisible: [],
      popoverStyles: [],
      currentBookName: '', // 当前书籍的名称
      popoverPosition: { x: 0, y: 0 }, // Popover的位置
      checkDateLine: [],
      baseStockData: [],
      shelfAllGridDataLoading: false,
      billNoImg: null,
      bookImgData: [],
      bigImg: '',
      timeIndex: 0,
      gridName: '',
      getGridToward: 1,
      currentScale: 1, // 当前缩放比例
      isDragging: false, // 是否正在拖拽图片
      startX: 0, // 拖拽起始点x坐标
      startY: 0, // 拖拽起始点y坐标
      translateX: 0, // 图片平移x方向距离
      translateY: 0, // 图片平移y方向距离
      dragSpeed: 0.3, // 拖拽速度
      zoomSpeed: 0.1, // 控制缩放速度
      maxScale: 5, // 最大缩放值
      minScale: 0.1, // 最小缩放值
      swiperListOptions: {
        slidesPerView: 'auto',
        freeMode: true
      },
      isCompare: false,
      shouldShowResetButton: false
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ]),
    swiperList() {
      return this.$refs.swiperList.$el.swiper
    },
    cellStyle: function() {
      const h = '76px'
      const w = '100%/' + this.rackNum
      return { width: `calc(${w} )`, height: `calc(${h})` }
    },
    popoverStyle() {
      return {
        top: `${this.popoverPosition.y - 300}px`, // 鼠标的Y坐标偏移10px
        left: `${this.popoverPosition.x - 240}px`, // 鼠标的X坐标偏移10px
        position: 'absolute'
      }
    }
  },
  async created() {
    this.initData()
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
    },
    [CRUD.HOOK.afterRefresh](crud) {
    },
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU](crud) {
      return true
    },
    computedStockType(stockType) {
      switch (stockType) {
        case 1:
          return '全量盘点'
        case 2:
          return '区域盘点'
        case 3:
          return '计划盘点'
        case 4:
          return '书架盘点'
        case 5:
          return '架位盘点'
        case 6:
          return '层位盘点'
        default:
          return '现在'
      }
    },
    initData() {
      if (localStorage.getItem('dataScreenFloorTableIndex')) {
        this.floorTabIndex = localStorage.getItem('dataScreenFloorTableIndex')
      }
      if (localStorage.getItem('dataScreenRegionTableIndex')) {
        this.regionTabIndex = localStorage.getItem('dataScreenRegionTableIndex')
      }
      if (localStorage.getItem('dataScreenShelf')) {
        const dataScreenShelf = JSON.parse(localStorage.getItem('dataScreenShelf'))
        this.floorName = dataScreenShelf.floorName
        this.regionName = dataScreenShelf.regionName
        this.gridName = dataScreenShelf.gridName
        this.gridRow = dataScreenShelf.gridRow
        this.gridShelf = dataScreenShelf.gridShelf

        if (localStorage.getItem('dataScreenShelfAllGrid')) {
          this.shelfAllGridData = JSON.parse(localStorage.getItem('dataScreenShelfAllGrid'))
        }
        this.updateParts(dataScreenShelf.gridName)
        // 单面/双面
        this.tabListData = [{ name: dataScreenShelf.regionName + ' - ' + this.removeAreaPrefix(dataScreenShelf.gridName) }]

        // dataScreenShelf.rowType === 1
        //   ? dataScreenShelf.toward === 1
        //     ? [{ name: 'A面' }]
        //     : [{ name: 'B面' }]
        //   : [{ name: 'A面' }, { name: 'B面' }]

        this.tabIndex = dataScreenShelf.toward - 1
        FetchBookShelfDetails({ 'shelfId': dataScreenShelf.shelfId }).then(res => {
          this.layerNum = res.shelfFloor
          this.rackNum = res.shelfShelf
          this.floorId = res.floorId
          this.regionId = res.regionId
          this.bookShelfDetails = res

          this.rackOptions = []
          for (let i = 1; i <= this.rackNum; i++) {
            this.rackOptions.push({ id: i, name: `0${i}架` })
          }
          this.layerVal = parseInt(this.gridShelf) || ''

          this.getInitStockInfo(this.shelfAllGridData)

          this.getInitBookDetailsByGrids(this.shelfAllGridData)

          this.getBillByShelfIdAndGridShelf(this.shelfAllGridData)
        }).catch(() => {
        })
      }
    },
    removeQUPrefix(gridNames) {
      const index = gridNames.indexOf('区')
      if (index !== -1) {
        return gridNames.substring(index + 1)
      }
      return gridNames
    },
    removeAreaPrefix(gridNames) {
      const index = gridNames.indexOf('面')
      if (index !== -1) {
        return gridNames.substring(0, index + 1)
      }
      return gridNames
    },
    getLocation(row) {
      const parts = []
      if (row.floorName) {
        parts.push(row.floorName)
      }
      if (row.regionName) {
        parts.push(row.regionName)
      }
      if (row.gridName) {
        parts.push(row.gridName)
      }
      return parts.length > 0 ? parts.join('-') : '-'
    },
    getBillByShelfIdAndGridShelf(data) {
      const params = {
        'gridShelf': data[0].gridShelf,
        'ShelfId': data[0].shelfId,
        'size': 5
      }
      FetchBillByShelfIdAndGridShelf(params).then(res => {
        if (res !== null) {
          this.checkDateLine = res.sort((a, b) => {
            return new Date(b.endTime) - new Date(a.endTime)
          })
          this.checkDateLine.unshift({
            stockType: 0,
            icon: 'el-icon-more',
            color: '#0bbd87'
          })
          this.billNoImg = this.checkDateLine[this.timeIndex].stockType === 0 ? this.checkDateLine[1].stockBill : this.checkDateLine[this.timeIndex].stockBill
        } else {
          this.checkDateLine = []
        }
      }).catch(() => {
      })
    },
    async getInitStockInfo(data) {
      const promises = data.map(item => {
        const params = {
          'floorId': this.floorId,
          'regionId': this.regionId,
          'shelfId': item.shelfId,
          'gridId': item.id
        }
        return FetchInitStockInfo(params)
      })
      const results = await Promise.all(promises)
      if (!Array.isArray(this.baseStockData)) {
        this.baseStockData = []
      }
      this.baseStockData = this.baseStockData.concat(results)
    },
    getInitBookDetailsByGrids(data) {
      const ids = data.map(item => item.id)
      const params = {
        'grids': ids.join(',')
      }
      FetchInitBookDetailsByGrids(params).then(res => {
        this.shelfAllGridData.forEach((item) => {
          const gridId = item.id
          if (res.hasOwnProperty(gridId)) {
            this.$set(item, 'books', res[gridId])
          }
        })
      }).catch(() => {
      })
    },
    toAdd(type, item) {
      if (type === 5) {
        // this.$refs.eform.formVisible = true
        this.$refs.eform.form.shelfId = this.bookShelfDetails.id
        this.$refs.eform.form.toward = this.getGridToward
        this.$refs.eform.form.gridShelf = this.gridShelf
        this.$refs.eform.form.stockRegion = this.floorName + '-' + this.regionName + '-' + this.bookShelfDetails.shelfName + this.gridShelf + '架'
      } else {
        // if (item.isCheck) {
        // this.$refs.eform.formVisible = true
        this.$refs.eform.form.shelfId = null
        this.$refs.eform.form.gridShelf = null
        this.$refs.eform.form.gridId = item.id
        this.$refs.eform.form.toward = this.getGridToward
        this.$refs.eform.form.stockRegion = this.removeQUPrefix(item.gridName)
        this.$refs.eform.gridStockRegion = this.floorName + '-' + this.regionName + '-' + this.removeQUPrefix(item.gridName)
        // } else {
        //   this.$message({ message: '当前层位不可盘点', type: 'error', offset: 8 })
        // }
      }
      this.$refs.eform.setData(type, item)
    },
    doExport(type) {
      this.$refs.exportform.formExportVisible = true
      this.$refs.exportform.type = 3
      this.$refs.exportform.params = {
        // 'floorId': this.floorId,
        // 'regionId': this.regionId,
        'shelfId': this.bookShelfDetails.id
      }
    },
    handleCellCurrent(item, index) {
      this.cellIndex = index
      this.cellInfo = {
        id: item.id,
        gridName: item.gridName,
        startSortmark: item.startSortmark,
        endSortmark: item.endSortmark,
        cameraId: item.cameraId,
        check: item.isCheck,
        order: item.isOrder
      }
      this.handleToGrids(this.cellInfo)
    },
    handleDetail(item) {
      this.detailVisible = true
      this.detailTable = item.books
      this.detailCurrent = item
      if (this.detailCurrent.onShelfNum) {
        this.bigImg = `${this.baseApi}/api/fileRelevant/getImg?imgType=1&imgId=/${this.libcode}/${this.billNoImg}/${this.detailCurrent.gridCode}/img_result/result_LSD_compressed.jpg`
      } else {
        this.bigImg = ''
      }
    },
    setActiveItem(index) {
      this.$refs.carousel.setActiveItem(index)
    },
    // 鼠标按下事件处理函数
    onMouseDown(e) {
      e.preventDefault()
      this.isDragging = true
      this.startX = e.clientX
      this.startY = e.clientY
      this.$refs.image.style.cursor = 'grabbing'
    },
    // 鼠标移动事件处理函数
    onMouseMove(e) {
      if (!this.isDragging) return
      const deltaX = (e.clientX - this.startX) * this.dragSpeed
      const deltaY = (e.clientY - this.startY) * this.dragSpeed
      this.translateX += deltaX
      this.translateY += deltaY
      this.$refs.image.style.transform = `scale(${this.currentScale}) translate(${this.translateX}px, ${this.translateY}px)`
      this.startX = e.clientX
      this.startY = e.clientY
      this.shouldShowResetButton = true
    },
    // 鼠标松开事件处理函数
    onMouseUp() {
      this.isDragging = false
      this.$refs.image.style.cursor = 'grab'
    },
    // 鼠标滚轮事件处理函数
    onWheel(e) {
      e.preventDefault()
      const delta = e.deltaY > 0 ? -1 : 1
      this.currentScale = Math.min(this.maxScale, Math.max(this.minScale, this.currentScale + delta * this.zoomSpeed))
      this.$refs.image.style.transform = `scale(${this.currentScale}) translate(${this.translateX}px, ${this.translateY}px)`
      this.shouldShowResetButton = true
    },
    // 重置图片缩放和移动
    resetImage() {
      this.currentScale = 1
      this.translateX = 0
      this.translateY = 0
      this.$refs.image.style.transform = 'scale(1) translate(0, 0)'
      this.shouldShowResetButton = false
    },
    handleViewImg() {
      // /PD20250102001/040011011/img_result/result_cut_1.jpg
      // /PD20250102001/040011011/img_result/result_cut_2.jpg
      // /PD20250102001/040011011/img_result/result_cut_3.jpg
      // http://192.168.99.67:12010/api/fileRelevant/getImg?imgType=1&imgId=/ceshi111/1_1_book_spine-0.png

      // http://192.168.99.67:12010/api/fileRelevant/getImg?imgType=1&imgId=/1501/PD20250108013/010011015/img_result/result_LSD.jpg
      // http://192.168.99.67:12010/api/fileRelevant/getImg?imgType=1&imgId=/1501/PD20250108013/010011015/img_result/result_cut_1_compressed.jpg

      this.bookImgData = []
      this.detailImgVisible = true
      const params = {
        'billNo': this.billNoImg,
        'gridId': this.detailCurrent.id
      }
      FetchIsGoodcutByBillNoAndGridId(params)
        .then(res => {
          const baseUrl = `${this.baseApi}/api/fileRelevant/getImg?imgType=1&imgId=/${this.libcode}/${this.billNoImg}/${this.detailCurrent.gridCode}/img_result/`
          const commonImgs = [
            `${baseUrl}result_LSD_compressed.jpg`,
            `${baseUrl}result_cut_1_compressed.jpg`
          ]
          this.$refs.carousel.setActiveItem(0)
          if (res === null) {
            this.bookImgData = commonImgs
          } else if (res === true) {
            this.bookImgData = [...commonImgs, `${baseUrl}result_cut_2_compressed.jpg`]
          } else if (res === false) {
            this.bookImgData = [...commonImgs, `${baseUrl}result_cut_2_compressed.jpg`, `${baseUrl}result_cut_3_compressed.jpg`]
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    handleDownloadImg() {
      this.downImgLoading = true
      const idsArray = []
      for (const url of this.bookImgData) {
        const startIndex = url.indexOf('imgId=') + 'imgId='.length
        const endIndex = url.length
        idsArray.push(url.slice(startIndex, endIndex))
      }
      // 下载桶图片
      const params = {
        'imgIds': idsArray
      }
      const url = this.baseApi + '/api/fileRelevant/uploadImgs' + '?' + new URLSearchParams(params).toString()
      getBlob(url, (blob) => {
        const fileName = this.billNoImg + '-' + parseTime(new Date()) + '.zip'
        saveAs(blob, fileName)
        this.downImgLoading = false
      })
    },
    handleCloseDialog() {
      this.detailVisible = false
      this.isCompare = false
      if (this.shouldShowResetButton) {
        this.resetImage()
      }
    },
    handleCloseImgDialog() {
      this.detailImgVisible = false
      this.activeIndex = 0
    },
    handleToGrids(data) {
      this.$router.push({ path: '/dataScreening/gird' })
      localStorage.setItem('dataScreenShelf', JSON.stringify(data))
    },
    showPopover(layerIndex, bookIndex, event) {
      this.popoverIndex = { layer: layerIndex, book: bookIndex }
      const bookElement = event.target // 获取书籍项元素
      const rect = bookElement.getBoundingClientRect() // 获取边界
      if (layerIndex === 0) {
        this.popoverPosition = {
          x: window.scrollX + rect.left + rect.width / 2 - 40,
          y: window.scrollY + rect.top + rect.height
        }
      } else {
        this.popoverPosition = {
          x: window.scrollX + rect.left + rect.width / 2 - 40,
          y: window.scrollY + rect.top + rect.height - 170
        }
      }
    },
    hidePopover() {
      this.popoverIndex = null
      // 隐藏所有的popover
      // this.popoverVisible.forEach((isVisible, index) => {
      //   if (isVisible) {
      //     this.$set(this.popoverVisible, index, false)
      //   }
      // })
    },
    changeDialogTab(index) {
      this.tabdialogIndex = index
    },
    updateParts(gridName) {
      const parts = gridName.match(/(\d+)区(\d+)排([A-Za-z])面(\d+)架(\d+)层/)
      if (parts) {
        this.getGridShelf = parts[4]
        this.getGridFloor = parts[5]
        const toward = parts[3]
        if (toward === 'A') {
          this.getGridToward = 1
        } else if (toward === 'B') {
          this.getGridToward = 2
        }
      }
    },
    changeShelfGetGrid(val) {
      this.updateParts(this.gridName)
      this.shelfAllGridDataLoading = true
      const params = {
        'gridShelf': '0' + val,
        'shelfId': this.bookShelfDetails.id,
        'toward': this.getGridToward,
        'floorType': this.bookShelfDetails.floorType
      }
      FetchShelfGridByShelfIdAndGridShelf(params).then(res => {
        this.shelfAllGridData = []
        this.shelfAllGridData = res
        this.getInitStockInfo(this.shelfAllGridData)

        this.getInitBookDetailsByGrids(this.shelfAllGridData)

        this.shelfAllGridDataLoading = false
      }).catch(() => {
      })
    },
    handleHistory(item, index) {
      this.shelfAllGridDataLoading = true
      this.timeIndex = index

      this.billNoImg = this.checkDateLine[this.timeIndex].stockType === 0 ? this.checkDateLine[1].stockBill : this.checkDateLine[this.timeIndex].stockBill
      if (item.stockType === 0) {
        this.initData()
        setTimeout(() => {
          this.shelfAllGridDataLoading = false
        }, 500)
      } else {
        const params = {
          'gridShelf': '0' + this.layerVal,
          'ShelfId': this.bookShelfDetails.id,
          'toward': this.bookShelfDetails.toward,
          'billId': item.stockBill
        }
        FetchShowByBillIdAndShelfIdAndGridShelf(params).then(res => {
          this.shelfAllGridData.forEach((item) => {
            console.log(item.id)
            const gridId = item.id
            if (res.hasOwnProperty(gridId)) {
              this.$set(item, 'books', res.gridShelfList[gridId])
            }
          })

          const sortedKeys = Object.keys(res.gridShelfList).sort()
          const sortedShelfDetails = []
          sortedKeys.forEach(key => {
            res.shelfDetails.forEach(shelfDetail => {
              if (shelfDetail.gridId === key) {
                sortedShelfDetails.push(shelfDetail)
              }
            })
          })
          this.baseStockData = sortedShelfDetails

          setTimeout(() => {
            this.shelfAllGridDataLoading = false
          }, 500)
        }).catch(() => {
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.venue-content{
  position: relative;
  padding: 20px;
  background-color: #fff;
}
.tab-content{
  width: 100%;
  min-height: calc(100vh - 232px) !important;
  .tab-nav{
    position: relative;
    flex: 1;
    .iconfont{
      font-size: 12px;
    }
  }
  .compare-btn{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    padding: 3px;
  }
}
.gird-data-header{
  display: flex;
  justify-content: space-between;
}

.tag-info{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px;
  p{
    margin-left: 20px;
    font-size: 14px;
    font-weight: bold;
  }
}

.time-update-cont{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px;
  span.time-left-txt{
    font-size: 14px;
  }
  .el-button{
    width: 134px;
    padding:5px;
    border: none;
    text-align: left;
  }
  .time-update-line{
    display: none;
    position: absolute;
    top: 33px;
    right: 20px;
    z-index: 9999;
    width: 250px;
    max-height: 645px;
    padding: 20px 30px;
    background-color: #fff;
    border: 1px solid #e8f2ff;
    border-radius: 10px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
    overflow: hidden;
    overflow-y: scroll;
  }
}

.time-update-cont:hover .time-update-line {
    display: block;
}

.gird-data-book{
  position: relative;
  height: 650px;
  margin-top: 4px;
  overflow: hidden;
  overflow-y: scroll;
}

.gird-layer{
  position: relative;
  display: flex;
  justify-content: space-between;
  .gird-left-line{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 6px;
    height: 130px;
    background: url('~@/assets/images/shelf01.png') no-repeat left top;
    background-size: 100% 100%;
    z-index: 999;
  }
  .gird-right-line{
    position: absolute;
    right: calc(298px);
    top: 0;
    display: block;
    width: 6px;
    height: 130px;
    background: url('~@/assets/images/shelf01.png') no-repeat left top;
    background-size: 100% 100%;
    z-index: 999;
  }
  .layer-left{
    width: calc(100% - 240px);
    height: 130px;
    margin-right: 5px;
    padding: 0 16px 0 20px;
    background: url('~@/assets/images/shelf02.png') repeat left top;
    background-size: 10% 100%;
    overflow: hidden;
    overflow-x: scroll;
  }
  .layer-left-book{
    // width: calc(100vw - 655px);
    height: 130px;
    white-space: nowrap;
    .book-item{
      position: relative;
      display: inline-block;
      width: 42px;
      height: 120px;
      margin-top: 18px;
      background: url('~@/assets/images/shelf03.png') no-repeat left top;
      background-size: 100% 100%;
      margin-left: -15px;
      cursor: pointer;
      span.book-name{
        position: absolute;
        left: 15px;
        top: 16px;
        display: block;
        height: 90px;
        font-size: 12px;
        writing-mode:vertical-rl;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &.red-active{
        background: url('~@/assets/images/shelf05.png') no-repeat left top;
        background-size: 100% 100%;
      }
      &.blue-active{
        background: url('~@/assets/images/shelf06.png') no-repeat left top;
        background-size: 100% 100%;
      }
    }
  }

}

.layer-right-handle{
  width: 300px;
  padding: 0 10px;
  background-color: #E8F2FF;
  margin: 3px 5px;
  border-radius: 6px;
}
.layer-info-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 30px;
  h4{
    color: #0c0e1e;
  }
  span{
    font-size: 12px;
  }
}
.layer-right-content{
  display: flex;
  justify-content: space-between;
}
.layer-tag-info{
  div.tag-item {
    display: flex;
    justify-content: flex-start;
    line-height: 26px;
    font-size: 14px;
  }
}
.layer-handle{
  display: flex;
  flex-direction: column;
  .el-button{
    margin-left: 0 !important;
    margin-bottom: 10px
  }
}

.dialog-grid-detail{
  ::v-deep .el-dialog{
    width: 1200px !important;
    .el-dialog__body{
      padding: 0 !important;
    }

    .tab-nav{
      margin: 14px 0 10px 0 !important;
    }
  }
  .detail-tab{
    position: relative;
  }
  .check-view-img{
    position: absolute;
    right: 0;
    top: -10px;
  }
}

.gird-img-detail{
  ::v-deep .el-dialog{
    width: 1200px !important;
    padding: 0 !important;
    background: none;
    box-shadow: none;
    .el-dialog__header{
      display: none;
    }
    .el-dialog__body{
      padding: 0 !important;
    }
  }
  ::v-deep .el-carousel__container{
    height: 600px !important;
    .el-carousel__item{
      display: flex;
      align-items: center;
    }
    .el-carousel__item img{
      display: block;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
    }
    .el-carousel__arrow{
      background-color: rgba(3,72,243,1);
      i.el-icon-arrow-left,
      i.el-icon-arrow-right{
        color: #fff;
      }
      .el-icon-arrow-right:before{
        color: #fff;
      }
    }

  }
  ::v-deep .el-carousel__button{
    height: 6px !important;
  }
  ::v-deep .el-carousel__indicators--outside button{
    background-color: rgba(3,72,243,1);

  }
  .gird-img-button{
    position: fixed;
    right: -200px;
    top: -60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 9999999;
    .el-button{
      background-color: #e8f2ff;
    }
  }
}
.venue-content {
  .tab-content .tab-nav {
    li{
      cursor: default;
    }
  }
}
.popover-external-set{
  ul li p{
    width: 50px;
    font-weight: bold;
    text-align: right;
  }
  ul li span,
  ul li em{
    width: 140px;
    display: block;
    text-align: right;
    font-style: normal;
  }
}

.layerShelf-swiper{
  margin: 0 20px;
  ::v-deep .swiper-wrapper{
    font-size: 14px;
    border-bottom: none !important;
    .swiper-slide-title {
      font-weight: bold;
      height: 300px;
      margin-top: 10px;
      margin-right: 10px;
      color: #0c0e1e;
      writing-mode:vertical-rl;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      .book-name {
        &.red-active{
          color: #ed4a41;
        }
        &.blue-active{
          color: #0348f3;
        }
        span{
          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          transform: rotate(-90deg);
        }
      }
    }
  }
}
</style>