hitch-sb-antd/src/views/idle-assets-map/IdleAssetsStoreMap.vue

<template>
  <a-card>
    <a-tabs :default-active-key="defaultActive" @change="handleClick">
      <a-tab-pane v-for="(item, index) in positionsList" :tab="item.name" :key="index">
        <div style="position: relative;">
          <div class="point" v-for="store in storeList" :key="store.id" :style="computPosition(store.positionX, store.positionY)" />
          <img v-if="item.opcImg" :src="item.opcImg" width="100%" alt="">
          <a-empty v-else description="暂无底图，请上传" />
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import { querySbPosition } from '@/api/sb/position'
import { fetchStorePosition, fetchStoreStore } from '@/api/store/store'
export default {
  data () {
    return {
      positionsList: [],
      defaultActive: 0,
      storeList: []
    }
  },

  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      querySbPosition({ type: 1 }).then(res => {
        this.positionsList = res.data
        this.handleClick(this.defaultActive)
      })
    },
    computPosition (x, y) {
      const left = x + '%'
      const top = y + '%'
      return {
        left, top
      }
    },
    handleClick (i) {
      this.defaultActive = i
      fetchStorePosition({ id: this.positionsList[i].id }).then(res => {
        this.storeList = res.data
      })
    },
    handleClickImg (e) {
      console.log(e.offsetX, e.offsetY)
      console.log(e.target.width, e.target.height)
      // console.log(e.offsetX, e.offsetY)
    }
  }
}
</script>

<style lang="less" scoped>
.point {
  position: absolute;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}
</style>