yxk-storeroom-system/src/views/storeManage/warehouse3D/deseCabinet/index.vue

<template>
  <div class="app-container">
    <div class="cabinet-top">
      <p v-if="deviceData" class="cabinet-info">{{ deviceData.deviceName }} - {{ deviceData.areaNo }}区 - {{ cabinetNum }} 列</p>
      <div class="cabinet-des">
        <p>档案总数：{{ archivesNum }}</p>
        <span class="cabinet-on">在库</span>
        <span class="cabinet-out">已借</span>
        <el-button type="primary" class="return-btn" @click="backWarehouse">3D</el-button>
      </div>
    </div>
    <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.2)">
      <div class="cabinet-main">
        <!-- 无库房当前列数据时 - 左边 -->
        <div v-if="deviceData" class="cabinet-num row-left-num">
          <span v-for="(item,index) in rowNum" :key="index" :style="heightStyle"><i>{{ item }}</i></span>
        </div>
        <div v-if="deviceData" class="cabinet-num part-left-num">
          <span v-for="(item,index) in partLeftNum" :key="index" :style="widhtStyle">{{ item }}</span>
        </div>
        <div v-if="deviceData" style="position:absolute; left:0; bottom:0; display: flex; font-size: 12px; color: #fff;">
          <span style="display:block; margin-top: -12px">层</span>
          <span style="display:block; margin-top: -5px">/</span>
          <span style="display:block; ">节</span>
        </div>
        <ul v-if="sortLeft.length === 0" class="cabinet-row">
          <li v-for="(item,i) in totalPartRowNum" :key="i" class="cabinet-cell" :style="cellStyle" />
        </ul>
        <ul v-else class="cabinet-row">
          <li v-for="(item,index) in sortLeft" :key="index" class="cabinet-cell" :style="cellStyle">
            <!-- <div v-if="item.borrow === 0 && item.total === 0" style="font-size:12px">
            {{ item.part_No + '节' + item.row_No + '层' }}
          </div> -->
            <!-- 部分借出 -->
            <div v-if="item.borrow !== 0 && item.total - item.borrow !== 0" class="out-part">
              <span>{{ item.borrow }}</span>
            </div>
            <!-- 部分在库 -->
            <div v-if="item.borrow !== 0 && item.total - item.borrow !== 0" class="in-part">
              <span>{{ item.total - item.borrow }}</span>
            </div>
            <!-- 全部借出 -->
            <div v-if="item.borrow !== 0 && item.total - item.borrow === 0" class="out-all">
              <span>{{ item.borrow }}</span>
            </div>
            <!-- 全部在库 -->
            <div v-if="item.borrow === 0 && item.total - item.borrow !== 0" class="in-all">
              <span>{{ item.total - item.borrow }}</span>
            </div>
          </li>
        </ul>

        <div :class="['cabinet-panel', isFixed ? 'fixed-panel' : '']" />

        <!-- 无库房当前列数据时 - 右边 -->
        <ul v-if="sortLeft.length === 0" class="cabinet-row right-cabinet">
          <ul v-for="(item,i) in totalPartRowNum" :key="i" class="cabinet-cell" :style="cellStyle" />
        </ul>
        <ul v-else class="cabinet-row right-cabinet">
          <li v-for="(item,index) in sortRight" :key="index" class="cabinet-cell" :style="cellStyle">
            <!-- <div v-if="item.borrow === 0 && item.total === 0" style="font-size:12px">
            {{ item.part_No + '节' + item.row_No + '层' }}
          </div> -->
            <!-- 部分借出 -->
            <div v-if="item.borrow !== 0 && item.total - item.borrow !== 0" class="out-part">
              <span>{{ item.borrow }}</span>
            </div>
            <!-- 部分在库 -->
            <div v-if="item.borrow !== 0 && item.total - item.borrow !== 0" class="in-part">
              <span>{{ item.total - item.borrow }}</span>
            </div>
            <!-- 全部借出 -->
            <div v-if="item.borrow !== 0 && item.total - item.borrow !== 0" class="out-all">
              <span>{{ item.borrow }}</span>
            </div>
            <!-- 全部在库 -->
            <div v-if="item.borrow === 0 && item.total - item.borrow !== 0" class="in-all">
              <span>{{ item.total - item.borrow }}</span>
            </div>
          </li>
        </ul>
        <div v-if="deviceData" class="cabinet-num row-right-num">
          <span v-for="(item,index) in rowNum" :key="index" :style="heightStyle"><i>{{ item }}</i></span>
        </div>
        <div v-if="deviceData" class="cabinet-num part-right-num">
          <span v-for="(item,index) in partRightNum" :key="index" :style="widhtStyle">{{ item }}</span>
        </div>
        <div v-if="deviceData" style="position:absolute; right:0; bottom:0; display: flex; font-size: 12px; color: #fff;">
          <span style="display:block; ">节</span>
          <span style="display:block; margin-top: -5px">\</span>
          <span style="display:block; margin-top: -12px">层</span>
        </div>
      </div>
      <div class="cabinet-bottom">
        <el-button type="primary" :disabled="isFixed" @click="openCol">开架</el-button>
        <el-button type="primary" @click="resetCol">合架</el-button>
        <el-button type="primary" @click="ventHandle">通风</el-button>
        <el-button type="primary" @click="stopMove">停止</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { FetchGetArchivesNum } from '@/api/archivesManage/statistics'
import CallExternal from '@/api/storeManage/deviceManage/device'
export default {
  name: 'DeseCabinet',
  data() {
    return {
      loading: false,
      // D6490DA3D4261E8C26D0E3 档案库
      // 8F68A6B645B34B00B7ADFE 走廊
      storeroomId: 'D6490DA3D4261E8C26D0E3', // 档案库id
      deviceData: null, // 获取密集架data
      cabinetNum: null, // 当前列num
      isFixed: false, // 是否是固定列
      totalPartRowNum: null,
      archivesNum: null, // 档案总数
      left: [], // 左侧
      sortLeft: [], // 排序后得left-data
      right: [], // 右侧
      sortRight: [], // 排序后得right-data
      isColumDirection: false, // true 从上往下 false 从下往上 节数从机头开始排
      rowNum: [], // 左右两侧层数
      partLeftNum: [], // 左底部节点数
      partRightNum: [] // 右底部节点数
    }
  },
  computed: {
    cellStyle: function() {
      let h
      if (this.cabinetNum > 8) {
        h = '100%/' + (this.deviceData.rowNo - 1)
      } else {
        h = '100%/' + this.deviceData.rowNo
      }
      // const h = '100%/' + this.deviceData.rowNo
      const w = '100%/' + this.deviceData.partNo
      return { width: `calc(${w} - 10px )`, height: `calc(${h} - 10px)` }
    },
    heightStyle: function() {
      let h
      if (this.cabinetNum > 8) {
        h = '100%/' + (this.deviceData.rowNo - 1)
      } else {
        h = '100%/' + this.deviceData.rowNo
      }
      // const h = '100%/' + this.deviceData.rowNo
      return { height: `calc(${h})` }
    },
    widhtStyle: function() {
      const w = '100%/' + this.deviceData.partNo
      return { width: `calc(${w} - 10px)` }
    }
  },
  created() {
    this.handleArchivesNum()
    this.getDeviceListAll()
  },
  mounted() {
    if (parseInt(localStorage.getItem('cabinetNum'))) {
      this.cabinetNum = parseInt(localStorage.getItem('cabinetNum'))
      this.isFixed = this.cabinetNum === 1
    } else {
      this.cabinetNum = 0
    }
  },
  methods: {
    // 档案总数
    handleArchivesNum() {
      FetchGetArchivesNum().then(data => {
        this.archivesNum = data
      })
    },
    // 获取密集架相关信息
    getDeviceListAll() {
      this.loading = true
      const params = {
        sort: 'sequence,asc',
        storeroomId: this.storeroomId
      }
      CallExternal.getDeviceList(params).then(data => {
        data.content.map(item => {
          this.loading = false
          if (item.deviceTypeId.name === '密集架') { // 写死状态
            this.deviceData = item
            this.totalPartRowNum = item.partNo * item.rowNo
            let rowNo
            if (this.cabinetNum > 8) { // 战备密集架得情况
              rowNo = item.rowNo - 1
            } else {
              rowNo = item.rowNo
            }
            for (let i = 0; i < rowNo; i++) {
              this.rowNum.push(i + 1)
            }
            for (let i = 0; i < item.partNo; i++) {
              this.partLeftNum.push(i + 1)
              this.partRightNum.push(i + 1)
            }
            this.partLeftNum.reverse()
            if (!this.isColumDirection) {
              this.rowNum.reverse()
            }
            this.getInBorrowByQuCol()
          }
        })
      })
    },
    // 获取密集架左右节/层档案情况
    async getInBorrowByQuCol() {
      const params = {
        deviceId: this.deviceData.id,
        quNo: this.deviceData.areaNo,
        colNo: this.cabinetNum
      }
      CallExternal.FetchInBorrowByQuCol(params).then(data => {
        data.forEach(item => {
          if (item.direction === '左') {
            this.left.push(item)
          }
          if (item.direction === '右') {
            this.right.push(item)
          }
        })
        this.setReorderData(this.left, this.sortLeft, false)
        this.setReorderData(this.right, this.sortRight, true)
      })
    },
    // 分出左右后重新排序，根据节和层从下往上，left-从右往左， right-从左往右
    setReorderData(data, sortData, order) {
      let key
      if (this.isColumDirection) {
        key = 0
      } else {
        key = this.deviceData.rowNo + 1
      }
      const arr = []
      for (let i = 0; i < this.deviceData.rowNo; i++) {
        arr[i] = []
        if (this.isColumDirection) {
          key++
        } else {
          key--
        }
        data.forEach(item => {
          if (item.row_No === key) {
            arr[i].push(item)
          }
          if (this.isColumDirection) {
            if (key === this.deviceData.rowNo + 1) {
              key = 0
            }
          } else {
            if (key === 0) {
              key = this.deviceData.rowNo
            }
          }
        })
        this.arrSortByKey(arr[i], 'part_No', order)
      }
      // 筛选完之后，重新全部集合在指定得data内
      arr.forEach(item => {
        item.forEach(i => {
          sortData.push(i)
        })
      })
    },
    // 升降序
    arrSortByKey(array, property, order) {
      return array.sort(function(a, b) {
        const value1 = a[property]
        const value2 = b[property]
        if (order) { // 升序
          return value1 - value2
        } else { // 降序
          return value2 - value1
        }
      })
    },
    // 开架
    openCol() {
      const params = {
        deviceId: this.deviceData.id,
        quNo: this.deviceData.areaNo,
        colNo: this.cabinetNum,
        leNo: '',
        divNo: '',
        zyNo: ''
      }
      CallExternal.FetchCallExternalOpenCol(params).then(res => {
        if (res.success && res.success === '0') {
          this.$message.success('开架执行成功')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((error) => {
        console.log(error)
        this.$message.error('连接失败')
      })
    },
    // 合架
    resetCol() {
      const params = {
        deviceId: this.deviceData.id,
        quNo: this.deviceData.areaNo
      }
      CallExternal.FetchCallExternalResetCol(params).then(res => {
        if (res.success && res.success === '0') {
          this.$message.success('合架执行成功')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((error) => {
        console.log(error)
        this.$message.error('连接失败')
      })
    },
    // 密集架通风
    ventHandle() {
      const params = {
        deviceId: this.deviceData.id,
        quNo: this.deviceData.areaNo
      }
      CallExternal.FetchCallExternalVent(params).then(res => {
        if (res.success && res.success === '0') {
          this.$message.success('密集架通风执行成功')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((error) => {
        console.log(error)
        this.$message.error('连接失败')
      })
    },
    // 密集架停止移动
    stopMove() {
      const params = {
        deviceId: this.deviceData.id,
        quNo: this.deviceData.areaNo
      }
      CallExternal.FetchCallExternalStopMove(params).then(res => {
        if (res.success && res.success === '0') {
          this.$message.success('密集架停止移动执行成功')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((error) => {
        console.log(error)
        this.$message.error('连接失败')
      })
    },
    // 返回3D库房
    backWarehouse() {
      this.$router.push('/storeManage/warehouse3D')
      localStorage.setItem('isDeseCabinetPage', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.cabinet-top{
  display: flex;
  justify-content: space-between;
  width: calc(100vw - 354px);
  margin: 0 auto 20px auto;
  font-size: 14px;
  line-height: 36px;
  color: #fff;
  .cabinet-info{
    font-weight: bold;
  }
  .cabinet-des{
    display: flex;
    p{
      margin-right: 40px;
    }
    span{
      position: relative;
      padding-left: 20px;
      margin-right: 40px;
      &::before{
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin-top: -7px;
      }
    }
    .cabinet-on::before{
      background-color: #1AAE93;
    }
    .cabinet-out::before{
      background-color: #F65163;
    }
  }
}
.return-btn,
.cabinet-bottom .el-button{
  font-size: 16px;
  height: 36px;
  padding: 0 33px;
  background-color: #339CFF;
}
.cabinet-main{
  position: relative;
  display: flex;
  justify-content: space-between;
  width: calc(100vw - 344px);
  height: calc(100vh - 322px);
  padding-bottom: 30px;
  margin: 0 auto;
  overflow: hidden;
}

.cabinet-num{
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background-color: #113D72;
  span{
    position: relative;
    display: block;
    font-size: 14px;
    color: #fff;
    text-align: center;
    i{
      display: block;
      font-style: normal;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.row-left-num{
  width: 20px;
  height: calc(100vh - 352px);
  left: 0;
  top: 0;
  span{
    width: 20px;
  }
}
.row-right-num{
  width: 20px;
  height: calc(100vh - 352px);
  right: 0;
  top: 0;
  span{
    width: 20px;
  }
}
.part-left-num{
  width: calc(100vw/2 - 280px);
  height: 20px;
  left: 30px;
  bottom: 0;
  span{
    height: 20px;
    line-height: 20px;
  }
}
.part-right-num{
  width: calc(100vw/2 - 280px);
  height: 20px;
  right: 30px;
  bottom: 0;
  span{
    height: 20px;
    line-height: 20px;
  }
}

.cabinet-row{
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  color: #fff;
  text-align: center;
  margin-left: 20px;
  margin-bottom: -10px;
  .cabinet-cell{
    margin: 0 0 10px 10px;
    font-size: 20px;
    background-color: #02255F;
    border-radius: 10px;
    overflow: hidden;
    // &:nth-last-of-type(-n+4) {
    //   margin-bottom: 0;
    // }
    // &:nth-child(4n){
    //   margin-right: 0;
    // }
  }
  .in-all,  .out-all,  .out-part,  .in-part{
    position: relative;
    width: 100%;
    span{
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      z-index: 9;
    }
  }
  .in-all, .out-all{
    height: 100%;
  }
  .out-part, .in-part{
    height: 50%;
  }
  .out-all, .out-part{
    background-color: #F65163;
  }
  .in-all, .in-part{
    background-color: #1AAE93;
  }
}
.right-cabinet{
  margin-left: 0;
  margin-right: 30px;
}
.cabinet-panel{
  width: 140px;
  margin-left: 10px;
  background: url('~@/assets/images/panel-n.png') no-repeat;
  background-size: 100% 100%;
}
.fixed-panel{
  background: url('~@/assets/images/panel-y.png') no-repeat;
  background-size: 100% 100%;
}
.cabinet-bottom{
  text-align: center;
  margin: 30px 0;
  ::v-deep .is-disabled{
    color: #13439E;
    background-color: #02255F;
    border-color: #02255F;
  }
}
@media screen and (min-width:1200px) and (max-width:1536px){
  .cabinet-panel{
    width: 92px;
  }
}
</style>