library-inquiry-machine/src/views/module/shelfRanking.vue

<template>
  <div class="ranking">
    <h4 class="filter-header">热门书架</h4>
    <ul class="ranking-list-bottom shelf-list">
      <li v-for="(item,index) in shelfHot" :key="index" @click="handleShelfPosition(item)">
        <span>{{ 'TOP'+ (index+1) }}</span>
        <p class="title-item-only place-detail">{{ removeAreaPrefix(item.grid_name) }}</p>
      </li>
    </ul>

    <el-dialog class="positionDialog" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="positionVisible" :title="positionTitle">
      <div class="setting-dialog">
        <ul class="book-detail">
          <li><span>所属楼层</span>{{ positionContent.floorName }}</li>
          <li><span>所属区域</span>{{ positionContent.regionName }}</li>
          <li><span>所属书架</span>{{ positionContent.gridName }}</li>
        </ul>
        <div class="position-content">
          <div class="position-left">
            <h5>平面图</h5>
            <div class="venue-preview">
              <div v-show="currentMarkData && currentMarkData.signPoint ">
                <canvas :id="`canvasPreview${currentMarkData && currentMarkData.id}hot`" :width="width" :height="height" />
              </div>
              <img v-if="currentMarkData && !currentMarkData.signPoint" :src="imageUrl" :onerror="defaultImg" alt="">
              <img v-if="!currentMarkData" :src="imageUrl" :onerror="defaultImg" alt="">
            </div>
          </div>
          <div class="position-right">
            <h5>书架图</h5>
            <div class="shelf-top" :style="rowStyle">
              <p v-for="(item,index) in reversedRackNum" :key="index" :style="{width: `calc(${'100%/' + rackNum} - 4px )`}"><span>{{ item + '架' }}</span></p>
            </div>
            <ul class="data-shelf-row" :style="rowStyle">
              <li
                v-for="(cell,i) in booShelfGrid"
                :key="i"
                :class="{ active: i === cellIndex }"
                class="data-shelf-cell"
                :style="cellStyle"
              >
                <span class="cell-name">{{ removeLayerPrefix(cell.gridName) }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="book-bottom" @click="handleCloseDialog">
        <span>关闭</span>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { FetchInitHotShelfList } from '@/api/inquiryMachine'
import { positionCrud } from '../mixins/index.js'
export default {
  name: 'Ranking',
  components: {
  },
  mixins: [positionCrud],
  props: {
  },
  data() {
    return {
      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
      shelfHot: []
    }
  },
  computed: {
  },
  created() {
    this.getInitHotShelfList()
  },
  mounted() {
  },
  methods: {
    removeLayerPrefix(gridNames) {
      const index = gridNames.indexOf('面')
      if (index !== -1) {
        return gridNames.substring(index + 1)
      }
      return gridNames
    },
    handleShelfPosition(item) {
      this.positionContent = {
        'floorName': item.floorName,
        'regionName': item.regionName,
        'gridName': item.grid_name

      }
      this.handlePosition(item, 'hot')
    },
    removeAreaPrefix(gridNames) {
      const index = gridNames.indexOf('区')
      if (index !== -1) {
        return gridNames.substring(index + 1)
      }
      return gridNames
    },
    getInitHotShelfList() {
      const params = {
        'fondsCode': this.libcode,
        'size': 5
      }
      FetchInitHotShelfList(params).then(res => {
        this.shelfHot = res
      }).catch(() => {
        this.$message.error('接口错误')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/index.scss";
.shelf-list{
  height: 434px;
}
::v-deep .el-dialog{
  width: 930px;
  border-radius: 16px;
  background: #F8F8FD;
  box-shadow: 0px 3px 20px 1px rgba(0,0,0,0.05);
  .el-dialog__body{
    padding: 20px 0 23px 0;
  }
}
::v-deep .el-dialog__headerbtn{
  display: none;
}
::v-deep .el-dialog__title{
  font-weight: bold;
}
::v-deep .el-dialog__header{
  border-bottom: 1px solid #EDEFF3;
}
.place-detail{
  padding-right: 46px;
  background-size: 29px 30px;
}
</style>