HuaYuJingMi/acs/nladmin-ui/src/components/ShowTrack/index.vue

<template>
  <div class="container">
    <div class="canvas-wrap" :style="getBgStyle(configInfo)">
      <div v-for="e in carData" :key="e.device_code" class="car-wrap" :style="getCarWrapStyle(e)">
        <div class="car_img" :style="getCarImgStyle(e)" />
        <div class="car_name">{{ e.configuration_code }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import apiTrack from '@/components/ShowTrack/track'
// const fullDomain = window.location.protocol + '//' + window.location.host
export default {
  data() {
    return {
      configInfo: { refresh_time: 1000 },
      carData: [],
      deviceData: [],
      carCoor: []
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  // async created() {
  //   const res1 = await apiTrack.trackEdit()
  //   this.configInfo = [...res1.content][0]
  //   const res2 = await apiTrack.carEdit()
  //   this.carData = [...res2.content]
  //   this.deviceData = this.carData.map(e => { return { device_code: e.device_code } })
  //   this._queryDevice(this.deviceData)
  //   this.timerFun(this._queryDevice, this.configInfo.refresh_time * 1000)()
  // },
  methods: {
    timerFun(f, time) {
      const _this = this
      return function backFun() {
        clearTimeout(_this.intervalId)
        _this.intervalId = setTimeout(function() {
          f(_this.deviceData)
          backFun()
        }, time)
      }
    },
    _queryDevice(arr) {
      apiTrack.queryDevice(arr).then(res => {
        this.carCoor = [...res.data]
      })
    },
    getBgStyle(obj) {
      if (obj.image_code) {
        const width = parseFloat(obj.max_x) * parseFloat(obj.zoom_ratio)
        const height = parseFloat(obj.max_y) * parseFloat(obj.zoom_ratio)
        // const fullImageUrl = require('@/assets/images/background.jpg')
        const fullImageUrl = `${this.baseApi}/file/图片/${obj.image_code}`
        return {
          width: `${width}px`,
          height: `${height}px`,
          backgroundImage: `url(${fullImageUrl})`
        }
      }
    },
    getPositionById(code) {
      const position = this.carCoor.find((p) => p.device_code === code)
      return position || { x: 0, y: 0 }
    },
    getCarWrapStyle(el) {
      const width = el.image_width
      const height = el.image_height
      const position = this.getPositionById(el.device_code)
      const x = position.x * parseFloat(this.configInfo.zoom_ratio)
      const y = position.y * parseFloat(this.configInfo.zoom_ratio)
      let sty = {}
      switch (this.configInfo.coordinate_origin) {
        case '1':
          sty = {
            width: `${width}px`,
            height: `${height}px`,
            left: `${x}px`,
            top: `${y}px`
          }
          break
        case '2':
          sty = {
            width: `${width}px`,
            height: `${height}px`,
            left: `${x}px`,
            bottom: `${y}px`
          }
          break
        case '3':
          sty = {
            width: `${width}px`,
            height: `${height}px`,
            right: `${x}px`,
            top: `${y}px`
          }
          break
        case '4':
          sty = {
            width: `${width}px`,
            height: `${height}px`,
            right: `${x}px`,
            bottom: `${y}px`
          }
          break
        default:
          sty = {}
      }
      return sty
    },
    getCarImgStyle(el) {
      // const fullImageUrl = require('@/assets/images/avatar.png')
      const fullImageUrl = `${this.baseApi}/file/图片/${el.image_code}`
      const position = this.getPositionById(el.device_code)
      const angle = parseFloat(position.angle)
      return {
        backgroundImage: `url(${fullImageUrl})`,
        transform: `rotate(-${angle}deg)`
      }
    }
  }
}
</script>

<style scoped>
.container {
  overflow: auto;
  scrollbar-width: none;
}
.container::-webkit-scrollbar {
  display: none;
}
.canvas-wrap {
  position: relative;
  background: #f3f3f3 top center / 100% auto no-repeat;
}
.car-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.car_img {
  width: 100%;
  height: 100%;
  background: top center / 100% auto no-repeat;
}
.car_name {
  position: absolute;
  width: 100%;
  bottom: -20px;
  font-size: 12px;
  color: #fff;
  line-height: 16px;
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
</style>