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

<template>
  <div class="app-container">
    <div class="venue-header">
      <h4 @click="handleToRegions"><i class="iconfont icon-shuju" />数据总览</h4>
      <p><i class="iconfont icon-gongsi" />{{ user.fonds.fondsName }}</p>
    </div>
    <div class="venue-content">
      <crudOperation :permission="permission">
        <template v-slot:middle>
          <el-button v-permission="permission.add" size="mini" @click="crud.toAdd">
            <i class="iconfont icon-shengchengpandiandan" />
            全量盘点
          </el-button>
        </template>
        <template v-slot:right>
          <el-button :loading="crud.downloadLoading" size="mini" @click="doExport(crud.selections)">
            <i class="iconfont icon-daochu" />
            导出
          </el-button>
        </template>
      </crudOperation>
      <div class="venue-left">
        <div class="container-right tab-content">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <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>
            <!-- 最右侧装饰img -->
            <span class="tab-right-img" />
          </ul>
          <div class="total-data">
            <span>楼层概况</span>
            <p>区域：1</p>
            <p>书架：4</p>
            <p>摄像头：12</p>
          </div>
          <CanvasPreview ref="previewRefs" page-preview="floor" :current-mark-data="currentMarkData" :image-url="imageUrl" />
        </div>
      </div>
      <div class="venue-right">
        <div class="lib-right-item lib-info">
          <h4>场馆概况</h4>
          <ul class="data-right-list">
            <li><p>楼层</p><span><i>5</i>层</span></li>
            <li><p>区域</p><span><i>25</i>层</span></li>
            <li><p>书架</p><span><i>100</i>层</span></li>
            <li><p>摄像头</p><span><i>300</i>层</span></li>
          </ul>
        </div>
        <div class="lib-right-item">
          <h4>盘点概况</h4>
          <div class="refresh-date">2024-11-28 09:46</div>
          <ul class="data-right-list">
            <li><p>在架</p><span><i>15000</i>册</span></li>
            <li><p>错架</p><span><i>300</i>层</span> <span class="percentage">（2.00%）</span></li>
            <li><p>错序</p><span><i>0</i>层</span><span class="percentage">（0.00%）</span></li>
          </ul>
        </div>
        <div class="lib-right-item">
          <h4>流通统计</h4>
          <div class="refresh-date">2024-11-28 09:46</div>
          <bookSwiper />
        </div>
      </div>
    </div>

    <!-- form -->
    <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="盘点单号" prop="taskName">
            <el-input v-model="form.taskName" />
          </el-form-item>
          <el-form-item label="盘点类型" prop="taskType">
            <el-input v-model="form.taskType" />
          </el-form-item>
          <el-form-item label="目标位置" prop="location">
            <el-input v-model="form.location" />
          </el-form-item>
          <el-form-item label="目标数量" prop="number">
            <el-input v-model="form.number" />
          </el-form-item>
          <el-row>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" style="width: 572px;" :rows="4" />
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { FetchInitLibraryRegionList } from '@/api/area/index'
import crudFloor from '@/api/floor/index'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import { mapGetters } from 'vuex'
import defaultImg from '@/assets/images/system/default-img.jpg'
import bookSwiper from '@/views/components/bookSwiper.vue'
import CanvasPreview from '@/views/components/canvasPreview.vue'

const defaultForm = { id: null, taskType: null, taskName: null, location: null, number: null, remark: null }
export default {
  name: 'DataScreening',
  components: { crudOperation, bookSwiper, CanvasPreview },
  cruds() {
    return CRUD({ title: '数据总览', url: 'api/libraryFloor/initLibraryFloorList', crudMethod: { ...crudFloor }, sort: [], optShow: {
      add: false,
      edit: false,
      del: false,
      download: false,
      group: false,
      reset: false
    }})
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    const _this = this
    return {
      floorOptions: [],
      tabIndex: 0,
      defaultImg: defaultImg,
      imageUrl: defaultImg,
      imageRegionUrl: defaultImg,
      currentMarkData: null,
      allCoverData: [],
      swiperActiveIndex: 0,
      rightDataIndex: null,
      swiperOptionContent: {
        slidesPerView: 'auto',
        on: {
          slideChangeTransitionStart: function() {
            _this.rightDataIndex = null
            _this.swiperActiveIndex = this.activeIndex
            _this.swiperTitle.slideTo(this.activeIndex, 500, false)
          }
        }
      },
      swiperOptionTitle: {
        slidesPerView: 'auto',
        freeMode: true
      },
      tabListData: [{ name: '热门图书' }, { name: '热门架位' }, { name: '冷面图书' }],
      permission: {
        add: ['admin', 'floor:add'],
        edit: ['admin', 'floor:edit'],
        del: ['admin', 'floor:del']
      },
      rules: {
        taskName: [
          { required: true, message: '请输入盘点单号', trigger: 'blur' }
        ],
        taskType: [
          { required: true, message: '请输入盘点类型', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入目标位置', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入目标数量', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ]),
    swiperContent() {
      return this.$refs.swiperContent.$el.swiper
    }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
    },
    [CRUD.HOOK.afterRefresh](crud) {
      this.floorOptions = crud.data
      this.changeActiveTab(this.tabIndex)
    },
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU](crud) {
      return true
    },
    changeActiveTab(index) {
      if (this.$refs.previewRefs.canvasPreview.lowerCanvasEl) {
        this.$refs.previewRefs.canvasPreview.clear()
        this.$refs.previewRefs.canvasPreview.dispose()
      }
      this.allCoverData = []
      this.tabIndex = index
      const params = {
        'floorId': this.floorOptions[index].id
      }
      FetchInitLibraryRegionList(params).then(res => {
        console.log(res)
        this.allCoverData = res.content
        if (this.floorOptions[index].floorMap) {
          this.imageUrl = this.baseApi + '/api/fileRelevant/getImg?imgId=' + this.floorOptions[index].floorMap
        } else {
          this.imageUrl = this.defaultImg
        }

        if (this.allCoverData.length !== 0) {
          this.currentMarkData = this.allCoverData[0]
          const parsedSignPoints = this.allCoverData.map(item => {
            const signPoint = JSON.parse(item.signPoint)
            return {
              id: item.id,
              name: item.regionName,
              floorName: item.floorName,
              floorId: item.floorId,
              pointInfo: signPoint.pointInfo[0].pointInfo
            }
          })
          const imgInfo = JSON.parse(this.allCoverData[0].signPoint).imgInfo

          const result = {
            pointInfo: parsedSignPoints,
            imgInfo: imgInfo
          }
          console.log('result', result)
          this.$nextTick(() => {
            console.log('this.$refs.previewRefs', this.$refs.previewRefs)
            this.$refs.previewRefs.initCanvasPreview(result)
          })
        } else {
          this.currentMarkData = {}
        }
      }).catch(() => {
      })
    },
    handleToRegions() {
      this.$router.push({ path: '/dataScreening/regions', query: { }})
    },
    handleSlidClickFun(index) {
      this.rightDataIndex = null
      this.handleSlideToFun(index)
    },
    handleSlideToFun(index) {
      this.swiperActiveIndex = index
      this.swiperContent.slideTo(index, 500, false)
      this.swiperTitle.slideTo(index, 500, false)
    }
  }
}
</script>

<style lang="scss" scoped>
.container-right{
  min-height: calc(100vh - 232px) !important;
}
.venue-content{
  position: relative;
}
.crud-opts{
  position: absolute;
  right: 20px;
  top: 10px;
}
.venue-left{
  flex: 1;
  margin-right: 0 !important;
  .venue-preview{
    height: 633px !important;
  }
}
.venue-right{
  display: flex;
  flex-direction: column;
  width: 400px;
  padding: 50px 10px 20px 10px !important;
  .lib-right-item{
    position: relative;
    // padding: 10px;
    // height: calc(100% / 3);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border: 1px solid #E8F2FF;
    border-radius: 4px;
    h4{
      padding: 6px 10px;
      background-color: #E8F2FF;
      color: #000;
      line-height: 30px;
      border-bottom: 1px solid #edeff3;
    }
    .refresh-date{
      position: absolute;
      right: 14px;
      top: 10px;
      font-size: 12px;
      line-height: 30px;
    }
  }
}

.data-right-list {
  padding-top: 10px;
  li{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 36px;

    p{
      width: 80px;
      font-weight: bold;
      text-align: right;
    }
    span{
      width: 140px;
      display: block;
      text-align: right;
      i{
        font-style: normal;
        font-weight: bold;
        padding: 0 10px;
        color: #0348f3;
      }
      &.percentage{
        width: auto;
      }
    }
  }
}
.total-data{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  right: 12px;
  top: 60px;
  font-size: 14px;
  padding: 4px 6px;
  color: #fff;
  background-color: rgba(0,0,0,.5);
  border-radius: 4px;
  p{
    margin-left: 10px;
  }
}
</style>