<template>
  <div class="center_wrapper">
    <img src="../../../images/scene.png" width="1095" height="804" usemap="#image-map" @click.stop="closePop">
    <div class="status_icon" v-for="(e, i) in areaList" :key="i" :class="'status_colr_' + e.mode" :style="{left: e.coord.x + 'px', top: e.coord.y + 'px'}"></div>
    <map name="image-map" id="map">
      <area v-for="(e, i) in areaList" :key="i" :alt="e.device_code" :title="e.device_code" :coords="e.coords" :shape="e.shape" @click="showPop($event, e)">
    </map>
    <device-pop ref="pop" :type="pkObj.type" :data="pkObj"/>
  </div>
</template>

<script>
import DevicePop from './devicepop.vue'
import {deviceCondition} from '@js/getData2.js'
// import {deviceCondition} from '@js/mork2.js'
export default {
  name: 'workshop',
  components: {
    DevicePop: DevicePop
  },
  data () {
    return {
      areaList: [
        {type: 'yj', device_code: 'YJ01', coords: '918,106,980,169', coord: {x: 932, y: 90}, shape: 'rect'},
        {type: 'yj', device_code: 'YJ02', coords: '815,103,881,166', coord: {x: 832, y: 90}, shape: 'rect'},
        {type: 'yj', device_code: 'YJ05', coords: '528,112,580,164', coord: {x: 551, y: 100}, shape: 'rect'},
        {type: 'yj', device_code: 'YJ06', coords: '449,112,501,164', coord: {x: 474, y: 100}, shape: 'rect'},
        {type: 'yj', device_code: 'YJ07', coords: '388,117,429,152', coord: {x: 405, y: 100}, shape: 'rect'},
        {type: 'yj', device_code: 'YJ08', coords: '315,117,355,152', coord: {x: 333, y: 105}, shape: 'rect'},
        {type: 'yj', device_code: 'YJ09', coords: '258,117,298,152', coord: {x: 275, y: 105}, shape: 'rect'},
        {type: 'yj', device_code: 'YJ10', coords: '186,117,228,152', coord: {x: 202, y: 105}, shape: 'rect'},
        {type: 'yj', device_code: 'YJ11', coords: '132,117,171,152', coord: {x: 146, y: 105}, shape: 'rect'},
        {type: 'yj', device_code: 'YJ12', coords: '54,117,102,152', coord: {x: 72, y: 105}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ01XLW01', coords: '992,188,1006,203', coord: {x: 992, y: 188}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ01XLW02', coords: '955,188,969,204', coord: {x: 955, y: 188}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ02XLW01', coords: '892,189,906,205', coord: {x: 892, y: 189}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ02XLW02', coords: '856,189,869,205', coord: {x: 856, y: 189}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ05XLW01', coords: '552,188,563,205', coord: {x: 552, y: 188}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ05XLW02', coords: '527,191,538,205', coord: {x: 527, y: 191}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ06XLW01', coords: '472,189,485,206', coord: {x: 472, y: 189}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ06XLW02', coords: '497,191,509,206', coord: {x: 497, y: 191}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ07XLW01', coords: '387,180,395,186', coord: {x: 387, y: 180}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ07XLW02', coords: '386,192,393,206', coord: {x: 386, y: 192}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ08XLW01', coords: '350,179,359,185', coord: {x: 350, y: 179}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ08XLW02', coords: '348,193,356,207', coord: {x: 348, y: 193}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ09XLW01', coords: '258,179,266,187', coord: {x: 258, y: 179}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ09XLW02', coords: '256,192,264,206', coord: {x: 256, y: 192}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ10XLW01', coords: '222,180,230,187', coord: {x: 222, y: 180}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ10XLW02', coords: '218,194,227,205', coord: {x: 218, y: 194}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ11XLW01', coords: '130,179,136,187', coord: {x: 130, y: 179}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ11XLW02', coords: '126,194,133,205', coord: {x: 126, y: 194}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ12XLW01', coords: '93,177,105,189', coord: {x: 93, y: 177}, shape: 'rect'},
        {type: 'xlw', device_code: 'YJ12XLW02', coords: '89,194,98,206', coord: {x: 89, y: 194}, shape: 'rect'},
        {type: 'jxs', device_code: 'FJCDJXS01', coords: '841,482,848,499', coord: {x: 841, y: 470}, shape: 'rect'},
        {type: 'jxs', device_code: 'FJCDJXS02', coords: '735,481,743,499', coord: {x: 735, y: 470}, shape: 'rect'},
        {type: 'jxs', device_code: 'FJCDJXS03', coords: '623,481,631,498', coord: {x: 623, y: 470}, shape: 'rect'},
        {type: 'jxs', device_code: 'FJCDJXS04', coords: '520,481,527,500', coord: {x: 520, y: 470}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ01CDW01', coords: '858,485,876,502', coord: {x: 858, y: 485}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ01CDW02', coords: '811,488,828,505', coord: {x: 811, y: 488}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ01MDW01', coords: '879,572,893,582', coord: {x: 879, y: 572}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ01MDW02', coords: '826,571,842,580', coord: {x: 826, y: 571}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ02CDW01', coords: '754,487,770,502', coord: {x: 754, y: 487}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ02CDW02', coords: '708,485,723,503', coord: {x: 708, y: 485}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ02MDW01', coords: '767,571,781,581', coord: {x: 767, y: 571}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ02MDW02', coords: '717,572,733,582', coord: {x: 717, y: 572}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ03CDW01', coords: '644,486,662,504', coord: {x: 644, y: 486}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ03CDW02', coords: '595,485,661,505', coord: {x: 595, y: 485}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ03MDW01', coords: '650,570,663,579', coord: {x: 650, y: 570}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ03MDW02', coords: '600,571,614,579', coord: {x: 600, y: 571}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ04CDW01', coords: '539,483,556,506', coord: {x: 539, y: 483}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ04CDW02', coords: '491,487,506,506', coord: {x: 491, y: 487}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ04MDW01', coords: '540,571,553,580', coord: {x: 540, y: 571}, shape: 'rect'},
        {type: 'xlw', device_code: 'FJ04MDW02', coords: '489,570,504,580', coord: {x: 489, y: 570}, shape: 'rect'},
        {type: 'yao', device_code: '窑', coords: '456,270,881,335', coord: {}, shape: 'rect'},
        {type: 'rgv', device_code: 'RGV', coords: '726,590,758,614', coord: {}, shape: 'rect'}
      ],
      interTime: this.$store.getters.setTime,
      wsTimer: null,
      PressMachineList: [], // 压机
      StackingPositionList: [], // 压机下料位
      SortingPositionList: [], // 分拣拆垛机械手
      SortAndPalletizingList: [], // 分拣对接位
      allData: [],
      pkId: '',
      pkObj: {}
    }
  },
  created () {
    this.refresh()
  },
  beforeDestroy () {
    if (this.wsTimer !== null) {
      clearInterval(this.wsTimer)
      this.wsTimer = null
    }
  },
  methods: {
    showPop ($event, e) {
      this.pkId = this.pkId === e.device_code ? '' : e.device_code
      if (this.pkId) {
        this.$refs.pop.$el.style.display = 'block'
        this.$refs.pop.$el.style.left = $event.x + 'px'
        this.$refs.pop.$el.style.top = $event.y + 'px'
      } else {
        this.$refs.pop.$el.style.display = 'none'
      }
      this.allData.map(el => {
        if (el.device_code === e.device_code) {
          this.pkObj = el
          this.pkObj.type = e.type
        }
      })
    },
    closePop () {
      this.$refs.pop.$el.style.display = 'none'
      this.pkId = ''
    },
    refresh () {
      this._deviceCondition()
      this.wsTimer = setInterval(() => {
        this._deviceCondition()
      }, this.interTime)
    },
    async _deviceCondition () {
      let res = await deviceCondition()
      this.PressMachineList = [...res.PressMachineList]
      this.StackingPositionList = [...res.StackingPositionList]
      this.SortingPositionList = [...res.SortingPositionList]
      this.SortAndPalletizingList = [...res.SortAndPalletizingList]
      let arr = [{device_code: '窑'}, {device_code: 'RGV'}]
      this.allData = [...this.PressMachineList, ...this.StackingPositionList, ...this.SortingPositionList, ...this.SortAndPalletizingList, ...arr]
      this.pushArr(this.areaList, this.allData)
    },
    pushArr (arr1, arr2) {
      for (let i = 0; i < arr1.length; i++) {
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].device_code === arr2[j].device_code) {
            this.$set(arr1[i], 'mode', arr2[j].mode)
          }
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.center_wrapper
  position relative
  width 1095px
  height 804px
@keyframes glow {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  25% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  75% {
    transform: scale(2);
    opacity: 0.25;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
.status_icon
  position absolute
  z-index 1
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 10px;
  &::before, &::after
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    animation: glow 1.2s ease-out 0s infinite
.status_colr_0
  background-color #B4C9EF
  &::before, &::after
    border: 1px solid rgba(180, 201, 239, 1)
.status_colr_1
  background-color #1980EA
  &::before, &::after
    border: 1px solid rgba(25, 128, 234, 1)
.status_colr_2
  background-color #67D470
  &::before, &::after
    border: 1px solid rgba(103, 212, 112, 1)
.status_colr_3
  background-color #EF5252
  &::before, &::after
    border: 1px solid rgba(239, 82, 82, 1)
map
  position absolute
  top: 0;
  left: 0;
  z-index 100
area, .status_icon {
  pointer-events: none; /* 防止其他元素影响点击事件 */
}
area {
  pointer-events: auto;
}
</style>
