root/screen-huaxiang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据

Browse Source
This commit is contained in:
蔡玲
2024-09-27 14:53:06 +08:00
parent 709c2b97ba
commit 7da8cdc618
13 changed files with 1035 additions and 4839 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/pages/modules/home/workshop.vue
View File

@@ -1,19 +1,18 @@
<template>
<div class="center_wrapper">
<img src="../../../images/scene.png" width="1095" height="804" usemap="#image-map" @click.stop="closePop">
<div class="status_icon"></div>
<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 v-show="pkId !== ''" ref="pointer" class="pop_pointer"></div> -->
</div>
</template>
<script>
import DevicePop from './devicepop.vue'
// import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
import {deviceCondition} from '@js/mork2.js'
import {deviceCondition} from '@js/getData2.js'
// import {deviceCondition} from '@js/mork2.js'
export default {
name: 'workshop',
components: {
@@ -22,29 +21,76 @@ export default {
data () {
return {
areaList: [
{type: 'hlj', device_code: 'HNJ01', coords: '93,178,104,191', shape: 'rect'},
{type: 'hlj', device_code: 'HNJ02', coords: '701,136,683,121', shape: 'rect'},
{type: 'hlj', device_code: 'HNJ03', coords: '648,136,632,120', shape: 'rect'},
{type: 'hlj', device_code: 'HNJ04', coords: '621,137,602,120', shape: 'rect'}
{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'}
],
interTime: this.$store.getters.setTime,
wsTimer: null,
MixMachineList: [], // 混碾机
PressMachineList: [], // 压机
StackingPositionList: [], // 压机下料位
SortingPositionList: [], // 分拣拆垛机械手
SortAndPalletizingList: [], // 分拣对接位
allData: [],
pkId: '',
pkObj: {}
}
},
created () {
this._deviceCondition()
// this.refresh()
this.refresh()
},
beforeDestroy () {
clearInterval(this.wsTimer)
this.wsTimer = null
},
destroyed () {
clearInterval(this.wsTimer)
this.wsTimer = null
if (this.wsTimer !== null) {
clearInterval(this.wsTimer)
this.wsTimer = null
}
},
methods: {
showPop ($event, e) {
@@ -56,28 +102,40 @@ export default {
} else {
this.$refs.pop.$el.style.display = 'none'
}
if (e.type === 'hlj') {
this.MixMachineList.map(el => {
if (el.device_code === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
}
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.MixMachineList = [...res.MixMachineList]
console.log(this.MixMachineList)
this.PressMachineList = [...res.PressMachineList]
this.StackingPositionList = [...res.StackingPositionList]
this.SortingPositionList = [...res.SortingPositionList]
this.SortAndPalletizingList = [...res.SortAndPalletizingList]
this.allData = [...this.PressMachineList, ...this.StackingPositionList, ...this.SortingPositionList, ...this.SortAndPalletizingList]
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)
}
}
}
}
}
}
@@ -88,59 +146,60 @@ export default {
position relative
width 1095px
height 804px
.pop_pointer
position: fixed;
z-index 101;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00c4ff, 0 0 20px #00c4ff, 0 0 25px #00c4ff;
&::after
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00c4ff;
border-radius: 50%;
box-shadow: 0 0 5px #00c4ff;
animation: glow 2s infinite
@keyframes glow {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
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
left 93px
top 178px
width: 10px;
height: 10px;
background-color: #fff;
width: 9px;
height: 9px;
border-radius: 50%;
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00c4ff, 0 0 20px #00c4ff, 0 0 25px #00c4ff;
&::after
margin-right: 10px;
&::before, &::after
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00c4ff;
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
box-shadow: 0 0 5px #00c4ff;
animation: glow 2s infinite
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;