mt-ck-wms-ui/src/views/FactoryManage/visualLocation.vue

<!--
 * @Author: gtz
 * @Date: 2021-03-20 14:02:38
 * @LastEditors: gtz
 * @LastEditTime: 2021-04-16 15:25:27
 * @Description: file content
-->
<template>
  <div class="app-container app-container-visual">
    <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">{{ 'btn.back' | i18nFilter }}</el-button>
    <el-row v-if="showPic" class="img-box">
      <img :src="imageUrl" class="img-item">
      <div
        v-for="item in lineData.equipmentPoint"
        :key="item.id"
        class="img-point"
        :style="{top: `calc(${item.pointY} - 10px)`, left: `calc(${item.pointX} - 30px)`}"
        @click="showSubstrate"
      >
        <el-tooltip class="item" effect="dark" :content="lineEqData[item.id].text" placement="top">
          <div class="img-point-name">
            <div
              :style="{
                width: lineEqData[item.id].text.length * 12 + 'px',
                animation: '20s wordsLoop linear infinite normal',
                textAlign: 'center'
              }"
            >
              {{ lineEqData[item.id].text }}
            </div>
          </div>
        </el-tooltip>
      </div>
      <div
        v-for="item in carList"
        :key="item.id"
        class="visual-car"
        :style="{top: `calc(${item.pointY} - 10px)`, left: `calc(${item.pointX} + 30px)`}"
      >
        <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
          <svg-icon icon-class="car" />
        </el-tooltip>
      </div>
    </el-row>
    <Location-sub ref="locationsub" />
  </div>
</template>

<script>
import { VisualList, VisualLocationData } from '@/api/basicData/visual'
import { getUrl } from '@/api/file'
import { blobToBase64 } from '@/utils/blobToBase64'
import LocationSub from './components/LocationSub'

export default {
  name: 'Factory',
  components: { LocationSub },
  data() {
    return {
      line: null,
      lineData: {},
      imageUrl: null,
      lineEqData: {},
      showPic: false,
      statusList: {},
      carList: [
        { id: 1, name: '叉车1', stockPos: '', pointX: '0', pointY: '0' }
      ]
    }
  },
  created() {
    this.getLocation()
  },
  methods: {
    getLocation() {
      VisualList({
        current: 1,
        size: 1,
        parentId: this.$route.query.id
      }).then(res => {
        if (res.data.records.length) {
          this.lineData = res.data.records[0]
          if (this.lineData.equipmentPoint) {
            this.lineData.equipmentPoint = JSON.parse(this.lineData.equipmentPoint)
            this.carList[0].stockPos = this.lineData.equipmentPoint[0].id
            this.carList[0].pointX = this.lineData.equipmentPoint[0].pointX
            this.carList[0].pointY = this.lineData.equipmentPoint[0].pointY
          }
          this.getLocationInfo(res.data.records[0].id)
          getUrl({
            attachmentId: res.data.records[0].annexId,
            type: 0
          }).then(blob => {
            blobToBase64(blob.data).then(res => {
              this.imageUrl = res
            })
          })
        }
      })
    },
    getLocationInfo(id) {
      VisualLocationData({
        current: 1,
        size: 999,
        id
      }).then(response => {
        if (response.code === 0) {
          this.showPic = true
          response.data.map(item => {
            const footer = ',' + this.$t('module.factory.visual.box') + ':' + item.storageVoList.map(i => i.name)?.join(',')
            const head = this.$t('module.factory.visual.location') + ':' + item.name
            item.text = item.storageVoList ? head + footer : head
            this.lineEqData[item.stockId] = item
          })
        }
      })
    },
    showSubstrate() {
      this.$refs.locationsub.init()
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
  .app-container-visual{
    .img-box{
      width: 100%;
      min-width: 800px;
      margin-top: 20px;
      position: relative;
      .img-item{
        width: 100%;
      }
      .img-point{
        width: 60px;
        height: 20px;
        background: rgba(0, 0, 0, 1);
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        position: absolute;
        cursor: pointer;
        .img-point-name{
          width: 100%;
          height: 20px;
          overflow: hidden;
        }
        .img-point-status{
          width: 12px;
          height: 12px;
          border-radius: 100%;
          position: absolute;
          right: 0;
          top: -15px;
        }
      }
      .visual-car{
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 24px;
        position: absolute;
      }
    }
  }
  @keyframes wordsLoop {
    0% {
        transform: translateX(60px);
    }
    100% {
        transform: translateX(-100%);
    }
  }
</style>