library-inquiry-machine/src/views/index.vue

<template>
  <div class="content-main">
    <Search refs="searchRefs" search-type="noList" />
    <div class="box-style" style="margin: 30px 44px;">
      <div class="dataScreening-header">
        <h4 class="filter-header">图书馆总览</h4>
      </div>
      <div class="home-wrap tab-content">
        <swiper
          ref="swiperTitle"
          class="swiper-title"
          :options="swiperOptionTitle"
          :auto-update="true"
          :auto-destroy="true"
        >
          <swiper-slide
            v-for="(item,index) in floorOptions"
            :key="index"
            ref="swiperSlideItem"
            class="swiper-slide-title"
          >
            <div
              class="tab-name"
              :class="{ active: index === tabIndex }"
              @click="changeActiveTab(index)"
            >
              {{ item.floorName }}
            </div>
          </swiper-slide>
        </swiper>
        <!-- <ul class="tab-nav">
          <li v-for="(item,index) in floorOptions" :key="index" :class="{ 'active-tab-nav': tabIndex == index }" @click="changeActiveTab(index)">{{ item.floorName }}<i /></li>
        </ul> -->

        <CanvasPreview ref="previewRefs" v-loading="prewLoading" page-preview="floor" :current-mark-data="currentMarkData" :image-url="imageUrl" />

      </div>
    </div>

    <div class="index-ranking">
      <div class="box-style">
        <Ranking form-ranking="home" />
      </div>
      <div class="box-style">
        <ShelfRanking />
      </div>
    </div>
  </div>
</template>

<script>
import { FetchLibraryFloorListByFondsNo, FetchRegionListByFloorId, FetchInitStockInfo } from '@/api/inquiryMachine'
import CanvasPreview from './module/canvasPreview'
import { positionCrud } from './mixins/index.js'
import Search from './module/search'
import Ranking from './module/ranking'
import ShelfRanking from './module/shelfRanking'
import defaultImg from '@/assets/images/default-img-bg.jpg'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

export default {
  name: 'Index',
  components: {
    Search, CanvasPreview, Ranking, ShelfRanking, swiper, swiperSlide
  },
  mixins: [positionCrud],
  data() {
    return {
      prewLoading: false,
      floorOptions: [],
      tabIndex: 0,
      defaultImg: defaultImg,
      imageUrl: defaultImg,
      imageRegionUrl: defaultImg,
      currentMarkData: null,
      allCoverData: [],
      baseStockDataAllShelf: [],
      swiperOptionTitle: {
        slidesPerView: 'auto',
        freeMode: true
      }
    }
  },
  computed: {
    swiperTitle() {
      return this.$refs.swiperTitle.$el.swiper
    }
  },
  created() {
    this.getFloorList()
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    getFloorList() {
      FetchLibraryFloorListByFondsNo({ 'fondsCode': this.libcode }).then(res => {
        this.floorOptions = res

        this.changeActiveTab(this.tabIndex)
      }).catch(() => {
        this.$message.error('接口错误')
      })
    },
    async changeActiveTab(index) {
      const baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
      this.prewLoading = true
      if (this.$refs.previewRefs.canvasPreview.lowerCanvasEl) {
        this.$refs.previewRefs.canvasPreview.clear()
        this.$refs.previewRefs.canvasPreview.dispose()
      }
      this.allCoverData = []
      this.tabIndex = index
      this.swiperTitle.slideTo(index, 500, false)
      const params = {
        'floorId': this.floorOptions[index].id
      }
      try {
        const res = await FetchRegionListByFloorId(params)
        console.log(res)
        this.allCoverData = res
        if (this.floorOptions[index].floorMap) {
          this.imageUrl = baseUrl + '/api/fileRelevant/getImg?imgId=' + this.floorOptions[index].floorMap
        } else {
          this.imageUrl = this.defaultImg
        }

        if (this.allCoverData.length !== 0) {
          this.currentMarkData = this.allCoverData[0]

          // const signPoint = this.allCoverData.find(item => item.signPoint !== null)?.signPoint
          const imgInfo = JSON.parse(this.allCoverData[0].signPoint).imgInfo

          const baseStockDataAllShelf = await this.getInitStockInfo(this.allCoverData)
          const parsedSignPoints = this.allCoverData.map(item => {
            const signPoint = item.signPoint ? JSON.parse(item.signPoint) : null
            return {
              id: item.id,
              name: item.regionName,
              floorName: this.floorOptions[index].floorName,
              floorId: item.floorId,
              pointInfo: signPoint ? signPoint.pointInfo[0].pointInfo : null
            }
          })
          parsedSignPoints.forEach(parsedItem => {
            const baseStockItem = baseStockDataAllShelf.find(baseItem => baseItem.id === parsedItem.id)
            if (baseStockDataAllShelf) {
              Object.assign(parsedItem, baseStockItem)
            }
          })

          const result = {
            pointInfo: parsedSignPoints,
            imgInfo: imgInfo
          }
          console.log('result', result)
          this.$nextTick(() => {
            this.$refs.previewRefs.initCanvasPreview(result, this.tabIndex)
          })
        } else {
          this.currentMarkData = {}
          setTimeout(() => {
            this.prewLoading = false
          }, 500)
        }
      } catch (error) {
        console.error(error)
      }
    },
    async getInitStockInfo(data) {
      const promises = data.map(item => {
        const params = {
          'fondsCode': this.libcode,
          'floorId': this.floorOptions[this.tabIndex].id,
          'regionId': item.id
        }
        return FetchInitStockInfo(params)
      })
      const results = await Promise.all(promises)
      if (!Array.isArray(this.baseStockDataAllShelf)) {
        this.baseStockDataAllShelf = []
      }
      // 为每个结果对象添加id字段
      results.forEach((result, index) => {
        result.id = data[index].id
      })
      this.baseStockDataAllShelf = this.baseStockDataAllShelf.concat(results)
      return this.baseStockDataAllShelf
    }

  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/index.scss";

</style>