218 lines
10 KiB
Vue
218 lines
10 KiB
Vue
<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>
|