设备弹窗

This commit is contained in:
2024-04-17 09:04:30 +08:00
parent 21ba8d723f
commit 46e75cf044
5 changed files with 1063 additions and 3 deletions

View File

@@ -755,6 +755,434 @@ export const deviceCondition = () => {
'encoder_qty': 100,
'barcode': 10010
}
],
'yzslwPositionList': [
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ01SLW01',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ01SLW02',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ02SLW01',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ02SLW02',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ03SLW01',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ03SLW02',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ04SLW01',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ04SLW02',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ05SLW01',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ05SLW02',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ06SLW01',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ06SLW02',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ07SLW01',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ07SLW02',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ08SLW01',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'device_status': 2,
'move': 2,
'device_code': 'YJ08SLW02',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
}
],
'TrappedMaterialShelfList': [
{
'pointStatus': '3',
'pointName': '困料货位01',
'pointCode': 'KLHW01'
},
{
'pointStatus': '1',
'pointName': '困料货位02',
'pointCode': 'KLHW02'
},
{
'pointStatus': '2',
'pointName': '困料货位03',
'pointCode': 'KLHW03'
},
{
'pointStatus': '1',
'pointName': '困料货位04',
'pointCode': 'KLHW04'
},
{
'pointStatus': '1',
'pointName': '困料货位05',
'pointCode': 'KLHW05'
},
{
'pointStatus': '1',
'pointName': '困料货位06',
'pointCode': 'KLHW06'
},
{
'pointStatus': '1',
'pointName': '困料货位07',
'pointCode': 'KLHW07'
},
{
'pointStatus': '1',
'pointName': '困料货位08',
'pointCode': 'KLHW08'
},
{
'pointStatus': '1',
'pointName': '困料货位09',
'pointCode': 'KLHW09'
},
{
'pointStatus': '1',
'pointName': '困料货位10',
'pointCode': 'KLHW10'
},
{
'pointStatus': '3',
'pointName': '困料货位11',
'pointCode': 'KLHW11'
},
{
'pointStatus': '1',
'pointName': '困料货位12',
'pointCode': 'KLHW12'
},
{
'pointStatus': '3',
'pointName': '困料货位13',
'pointCode': 'KLHW13'
},
{
'pointStatus': '1',
'pointName': '困料货位14',
'pointCode': 'KLHW14'
},
{
'pointStatus': '1',
'pointName': '困料货位15',
'pointCode': 'KLHW15'
},
{
'pointStatus': '1',
'pointName': '困料货位16',
'pointCode': 'KLHW16'
},
{
'pointStatus': '1',
'pointName': '困料货位17',
'pointCode': 'KLHW17'
},
{
'pointStatus': '1',
'pointName': '困料货位18',
'pointCode': 'KLHW18'
},
{
'pointStatus': '1',
'pointName': '困料货位19',
'pointCode': 'KLHW19'
},
{
'pointStatus': '1',
'pointName': '困料货位20',
'pointCode': 'KLHW20'
},
{
'pointStatus': '1',
'pointName': '困料货位21',
'pointCode': 'KLHW21'
},
{
'pointStatus': '1',
'pointName': '困料货位22',
'pointCode': 'KLHW22'
},
{
'pointStatus': '1',
'pointName': '困料货位23',
'pointCode': 'KLHW23'
},
{
'pointStatus': '1',
'pointName': '困料货位24',
'pointCode': 'KLHW24'
},
{
'pointStatus': '1',
'pointName': '困料货位25',
'pointCode': 'KLHW25'
},
{
'pointStatus': '1',
'pointName': '困料货位26',
'pointCode': 'KLHW26'
},
{
'pointStatus': '1',
'pointName': '困料货位27',
'pointCode': 'KLHW27'
},
{
'pointStatus': '1',
'pointName': '困料货位28',
'pointCode': 'KLHW28'
},
{
'pointStatus': '1',
'pointName': '困料货位29',
'pointCode': 'KLHW29'
},
{
'pointStatus': '1',
'pointName': '困料货位30',
'pointCode': 'KLHW30'
},
{
'pointStatus': '1',
'pointName': '困料货位31',
'pointCode': 'KLHW31'
},
{
'pointStatus': '1',
'pointName': '困料货位32',
'pointCode': 'KLHW32'
},
{
'pointStatus': '1',
'pointName': '困料货位33',
'pointCode': 'KLHW33'
},
{
'pointStatus': '1',
'pointName': '困料货位34',
'pointCode': 'KLHW34'
},
{
'pointStatus': '1',
'pointName': '困料货位35',
'pointCode': 'KLHW35'
},
{
'pointStatus': '1',
'pointName': '困料货位36',
'pointCode': 'KLHW36'
},
{
'pointStatus': '1',
'pointName': '困料货位37',
'pointCode': 'KLHW37'
},
{
'pointStatus': '1',
'pointName': '困料货位38',
'pointCode': 'KLHW38'
},
{
'pointStatus': '1',
'pointName': '困料货位39',
'pointCode': 'KLHW39'
},
{
'pointStatus': '1',
'pointName': '困料货位40',
'pointCode': 'KLHW40'
},
{
'pointStatus': '1',
'pointName': '困料货位41',
'pointCode': 'KLHW41'
},
{
'pointStatus': '1',
'pointName': '困料货位42',
'pointCode': 'KLHW42'
},
{
'pointStatus': '1',
'pointName': '困料货位43',
'pointCode': 'KLHW43'
},
{
'pointStatus': '1',
'pointName': '困料货位44',
'pointCode': 'KLHW44'
},
{
'pointStatus': '1',
'pointName': '困料货位45',
'pointCode': 'KLHW45'
},
{
'pointStatus': '1',
'pointName': '困料货位46',
'pointCode': 'KLHW46'
},
{
'pointStatus': '1',
'pointName': '困料货位47',
'pointCode': 'KLHW47'
},
{
'pointStatus': '1',
'pointName': '困料货位48',
'pointCode': 'KLHW48'
},
{
'pointStatus': '1',
'pointName': '困料货位49',
'pointCode': 'KLHW49'
},
{
'pointStatus': '1',
'pointName': '困料货位50',
'pointCode': 'KLHW50'
},
{
'pointStatus': '1',
'pointName': '困料货位51',
'pointCode': 'KLHW51'
},
{
'pointStatus': '1',
'pointName': '困料货位52',
'pointCode': 'KLHW52'
},
{
'pointStatus': '1',
'pointName': '困料货位53',
'pointCode': 'KLHW53'
},
{
'pointStatus': '1',
'pointName': '困料货位54',
'pointCode': 'KLHW54'
},
{
'pointStatus': '1',
'pointName': '困料货位55',
'pointCode': 'KLHW55'
},
{
'pointStatus': '1',
'pointName': '困料货位56',
'pointCode': 'KLHW56'
}
]
}
return res

BIN
src/images/scene.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@@ -0,0 +1,228 @@
<template>
<div ref="pop" class="popup_wraper">
<div class="popup_bg">
<div class="popup_block">
<div class="pop_header">
<div v-show="type === 'yaossx' || type === 'yao' || type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_name">{{data.pointName}}</div>
<div v-show="type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw' || type === 'hlj'" class="pop_name">{{data.device_code}}</div>
<div v-show="type === 'yaossx'" class="pop_status">
<div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.stat)]"></div>
<div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.stat)] }}</div>
</div>
<div v-show="type === 'yj' || type === 'jxs' || type === 'hlj' || type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw'" class="pop_status">
<div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.device_status)]"></div>
<div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.device_status)] }}</div>
</div>
<div v-show="type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_status">
<div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.pointStatus)]"></div>
<div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.pointStatus)] }}</div>
</div>
</div>
<div v-show="type === 'yaossx'" class="pop_content">
<div class="popup_item">
<div class="popup_label">当日已输送托盘数</div>
<div class="popup_val">{{ data.deliveredPalletNum }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当日已输送数量</div>
<div class="popup_val">{{ data.deliveredMaterialNum }}</div>
</div>
<div class="popup_item">
<div class="popup_label">已工作时间</div>
<div class="popup_val">{{ data.workTime }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当前托盘数</div>
<div class="popup_val">{{ data.palletNum }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当前物料数量</div>
<div class="popup_val">{{ data.materialNum }}</div>
</div>
</div>
<div v-show="type === 'yao'" class="pop_content">
<div class="popup_item">
<div class="popup_label">工作时间</div>
<div class="popup_val">{{ data.workTime }}</div>
</div>
<div class="popup_item">
<div class="popup_label">窑内托盘数</div>
<div class="popup_val">{{ data.palletNum }}</div>
</div>
<div class="popup_item">
<div class="popup_label">窑内物料数量</div>
<div class="popup_val">{{ data.materialNum }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当日已生产</div>
<div class="popup_val">{{ data.produceNum }}</div>
</div>
<div class="popup_item">
<div class="popup_label">物料说明</div>
<div class="popup_val">{{ data.materialInfos }}</div>
</div>
</div>
<div v-show="type === 'yj' || type === 'hlj'" class="pop_content">
<div class="popup_item">
<div class="popup_label">故障时间</div>
<div class="popup_val">{{ data.error_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">待机时间</div>
<div class="popup_val">{{ data.stand_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">开机时间</div>
<div class="popup_val">{{ data.open_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">生产时间</div>
<div class="popup_val">{{ data.work_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当前已生产数量</div>
<div class="popup_val">{{ data.real_qty }}</div>
</div>
<div v-show="type === 'yj'" class="popup_item">
<div class="popup_label">当前已生产重量</div>
<div class="popup_val">{{ data.current_weight }}</div>
</div>
<div class="popup_item">
<div class="popup_label">故障</div>
<div class="popup_val">{{ data.error }}</div>
</div>
</div>
<div v-show="type === 'jxs'" class="pop_content">
<div class="popup_item">
<div class="popup_label">故障时间</div>
<div class="popup_val">{{ data.error_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">待机时间</div>
<div class="popup_val">{{ data.stand_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">开机时间</div>
<div class="popup_val">{{ data.open_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">生产时间</div>
<div class="popup_val">{{ data.work_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">/码垛数量</div>
<div class="popup_val">{{ data.real_qty }}</div>
</div>
<div class="popup_item">
<div class="popup_label">故障</div>
<div class="popup_val">{{ data.error }}</div>
</div>
</div>
<div v-show="type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw'" class="pop_content">
<div class="popup_item">
<div class="popup_label">工作模式</div>
<div class="popup_val">{{ data.mode }}</div>
</div>
<div class="popup_item">
<div class="popup_label">光电开关信号</div>
<div class="popup_val">{{ data.move }}</div>
</div>
<div class="popup_item">
<div class="popup_label">报警信号</div>
<div class="popup_val">{{ data.error }}</div>
</div>
<div class="popup_item">
<div class="popup_label">码盘位当前码盘数量</div>
<div class="popup_val">{{ data.encoder_qty }}</div>
</div>
<div class="popup_item">
<div class="popup_label">条码</div>
<div class="popup_val">{{ data.barcode }}</div>
</div>
</div>
<div v-show="type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_content">
<div class="popup_item">
<div class="popup_label">点位编码</div>
<div class="popup_val">{{ data.pointCode }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'devicepop',
props: {
type: String,
data: Object
},
methods: {
}
}
</script>
<style lang="stylus" scoped>
@import '~@style/mixin'
.popup_wraper
display none
position fixed
z-index 100
_wh(530px, auto)
padding 20px 0 30px 0
background top center / 100% 100% url(../../../images/popup_bg.png) no-repeat
.popup_bg
_wh(100%, auto)
background none
overflow hidden
.popup_block
_wh(100%,100%)
padding 0
.pop_header
_wh(calc(100% - 28px), 43px)
padding 15px 5px 0 5px
margin 0 14px
_fj(flex-end)
background top center / 100% 18px url(../../../images/popup_line.png) no-repeat
.pop_name
width 50%
_font(14px,28px,#32C5FF,,left)
text-shadow 2px 2px 4px #A6E6FF
margin-bottom 8px
.pop_status
_wh(50%, 28px)
_fj(row,flex-end)
.pop_status_dot
_wh(15px, 15px)
border-radius 50%
margin-right 10px
.pop_status_text
_font(16px, 28px, #fff,,)
.pop_content
_wh(calc(100% - 14px), auto)
padding 0 5px
margin 0 7px
overflow-y auto
_fj(flex-start)
align-content flex-start
flex-wrap wrap
.popup_item
_wh(calc(50% - 14px), 36px)
_fj(row,flex-start)
background-color rgba(50,197,255,50%)
border-left 3px solid #fdfd0f
margin 0 7px 5px 7px
padding 0 5px 0 5px
.popup_label
width 120px
_font(12px, 36px, #fff,,left)
.popup_val
_wh(calc(100% - 120px), 100%)
_font(12px, 15px, #0ff,,left)
word-break break-all
_fj(center)
span
font-size 13px
color #fff
</style>

View File

@@ -52,6 +52,7 @@
</div>
</div>
<div class="n-center_wraper">
<!-- <div class="n-center_wraper_i"></div> -->
<t-workshop></t-workshop>
</div>
<div class="n_right_wraper">
@@ -137,7 +138,7 @@ import bg2 from '@img/bg2.png'
import bg3 from '@img/bg3.png'
import bg4 from '@img/bg4.png'
import vTime from '@components/time.vue'
import TWorkshop from './workshop'
import TWorkshop from './workshop1'
export default {
components: {
vTime,
@@ -1220,10 +1221,13 @@ export default {
height 100%
.n-center_wraper
position relative
width calc(56% - 40px)
width 1002px
height 100%
padding-top 5px
background center / 100% 100% url('../../../images/bg-center.png') no-repeat
.n-center_wraper_i
width 100%
height 100%
background center / 100% auto url('../../../images/scene.png') no-repeat
.w_wraper
width 100%
height 100%

View File

@@ -0,0 +1,400 @@
<template>
<div class="center_wrapper">
<img src="../../../images/scene.png" width="1002" height="905" usemap="#image-map" @click.stop="closePop">
<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 './devicepop1.vue'
import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
// import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/mork2.js'
export default {
name: 'workshop',
components: {
DevicePop: DevicePop
},
data () {
return {
areaList: [
{type: 'hlj', device_code: 'HNJ01', coords: '727,135,711,120', 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: 'hlj', device_code: 'HNJ05', coords: '570,137,554,121', shape: 'rect'},
{type: 'hlj', device_code: 'HNJ06', coords: '541,137,523,120', shape: 'rect'},
{type: 'hlj', device_code: 'HNJ07', coords: '490,137,473,120', shape: 'rect'},
{type: 'hlj', device_code: 'HNJ08', coords: '463,137,445,121', shape: 'rect'},
{type: 'hljdjw', device_code: 'HNJ01DJW', coords: '709,140,719,149', shape: 'rect'},
{type: 'hljdjw', device_code: 'HNJ02DJW', coords: '679,140,699,149', shape: 'rect'},
{type: 'hljdjw', device_code: 'HNJ03DJW', coords: '632,140,643,147', shape: 'rect'},
{type: 'hljdjw', device_code: 'HNJ04DJW', coords: '597,140,619,149', shape: 'rect'},
{type: 'hljdjw', device_code: 'HNJ05DJW', coords: '553,141,569,148', shape: 'rect'},
{type: 'hljdjw', device_code: 'HNJ06DJW', coords: '518,140,539,148', shape: 'rect'},
{type: 'hljdjw', device_code: 'HNJ07DJW', coords: '473,140,489,148', shape: 'rect'},
{type: 'hljdjw', device_code: 'HNJ08DJW', coords: '445,141,464,148', shape: 'rect'},
{type: 'jxs', device_code: 'FJCDJXS01', coords: '342,779,370,799', shape: 'rect'},
{type: 'jxs', device_code: 'FJMDJXS01', coords: '440,780,468,799', shape: 'rect'},
{type: 'jxs', device_code: 'FJMDJXS02', coords: '444,711,472,732', shape: 'rect'},
{type: 'jxs', device_code: 'YZJXS01', coords: '805,424,815,389', shape: 'rect'},
{type: 'jxs', device_code: 'YZJXS02', coords: '673,425,681,390', shape: 'rect'},
{type: 'jxs', device_code: 'YZJXS03', coords: '542,425,552,387', shape: 'rect'},
{type: 'jxs', device_code: 'YZJXS04', coords: '425,411,447,387', shape: 'rect'},
{type: 'jxs', device_code: 'YZJXS05', coords: '342,413,361,387', shape: 'rect'},
{type: 'fjmdw', device_code: 'FJ01CDW01', coords: '474,699,487,718', shape: 'rect'},
{type: 'fjmdw', device_code: 'FJ01CDW02', coords: '474,723,487,740', shape: 'rect'},
{type: 'fjmdw', device_code: 'FJ01MDW01', coords: '472,766,483,786', shape: 'rect'},
{type: 'fjmdw', device_code: 'FJ01MDW02', coords: '471,793,484,811', shape: 'rect'},
{type: 'rgfjc', device_code: 'RGFJC01', coords: '928,556,944,573', shape: 'rect'},
{type: 'rgfjc', device_code: 'RGFJC02', coords: '933,581,946,598', shape: 'rect'},
{type: 'rgfjc', device_code: 'RGFJC03', coords: '935,605,949,623', shape: 'rect'},
{type: 'rgfjc', device_code: 'RGFJC04', coords: '939,631,952,648', shape: 'rect'},
{type: 'rgfjc', device_code: 'RGFJC05', coords: '943,657,955,674', shape: 'rect'},
{type: 'rgfjc', device_code: 'RGFJC06', coords: '944,683,959,701', shape: 'rect'},
{type: 'yj', device_code: 'YJ01', coords: '829,347,873,378', shape: 'rect'},
{type: 'yj', device_code: 'YJ02', coords: '757,347,800,376', shape: 'rect'},
{type: 'yj', device_code: 'YJ03', coords: '694,347,737,376', shape: 'rect'},
{type: 'yj', device_code: 'YJ04', coords: '622,347,664,376', shape: 'rect'},
{type: 'yj', device_code: 'YJ05', coords: '561,348,603,376', shape: 'rect'},
{type: 'yj', device_code: 'YJ06', coords: '488,347,531,376', shape: 'rect'},
{type: 'yj', device_code: 'YJ07', coords: '414,345,471,379', shape: 'rect'},
{type: 'yj', device_code: 'YJ08', coords: '326,344,386,380', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ01', coords: '734,565,747,573', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ02', coords: '732,590,747,598', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ03', coords: '735,617,750,624', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ04', coords: '735,645,750,650', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ05', coords: '737,668,752,677', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ06', coords: '740,696,755,705', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ07', coords: '739,680,756,695', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ08', coords: '754,671,739,652', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ09', coords: '739,627,752,642', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ10', coords: '737,603,750,617', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ11', coords: '736,576,747,590', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ12', coords: '735,550,746,564', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ13', coords: '805,513,819,522', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ14', coords: '806,541,821,549', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ15', coords: '807,566,824,574', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ16', coords: '826,599,810,592', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ17', coords: '815,616,829,625', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ18', coords: '816,642,831,649', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ19', coords: '816,669,834,673', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ20', coords: '820,695,835,704', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ21', coords: '824,678,838,697', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ22', coords: '823,651,834,667', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ23', coords: '821,625,832,642', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ24', coords: '818,600,829,616', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ25', coords: '815,574,827,589', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ26', coords: '814,550,825,565', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ27', coords: '811,523,822,539', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ28', coords: '810,496,820,513', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ29', coords: '848,513,858,521', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ30', coords: '846,542,861,548', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ31', coords: '853,566,865,573', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ32', coords: '852,592,869,599', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ33', coords: '853,617,869,624', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ34', coords: '856,643,873,650', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ35', coords: '859,669,876,676', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ36', coords: '861,697,879,705', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ37', coords: '868,678,879,692', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ38', coords: '863,652,875,666', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ39', coords: '862,625,873,640', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ40', coords: '859,599,871,617', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ41', coords: '857,574,868,589', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ42', coords: '855,550,866,565', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ43', coords: '849,523,863,538', shape: 'rect'},
{type: 'hchj', device_code: 'HCHJ44', coords: '849,497,860,512', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ01XLW01', coords: '822,399,834,416', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ01XLW02', coords: '824,419,835,435', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ02XLW01', coords: '787,399,799,415', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ02XLW02', coords: '788,419,800,434', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ03XLW01', coords: '689,400,699,415', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ03XLW02', coords: '690,419,700,433', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ04XLW01', coords: '654,400,665,414', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ04XLW02', coords: '655,419,666,432', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ05XLW01', coords: '557,401,568,416', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ05XLW02', coords: '560,419,568,433', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ06XLW01', coords: '524,399,533,414', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ06XLW02', coords: '526,420,535,435', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ07XLW01', coords: '436,417,449,429', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ07XLW02', coords: '409,417,424,429', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ08XLW01', coords: '351,415,364,428', shape: 'rect'},
{type: 'yjxlw', device_code: 'YJ08XLW02', coords: '326,414,339,427', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ01SLW01', coords: '832,323,847,332', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ01SLW02', coords: '833,334,848,346', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ02SLW01', coords: '761,321,777,333', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ02SLW02', coords: '763,335,778,345', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ03SLW01', coords: '702,323,715,332', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ03SLW02', coords: '702,334,717,345', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ04SLW01', coords: '633,321,647,332', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ04SLW02', coords: '632,334,648,345', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ05SLW01', coords: '573,323,587,334', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ05SLW02', coords: '572,336,588,347', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ06SLW01', coords: '504,323,518,332', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ06SLW02', coords: '504,335,519,346', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ07SLW01', coords: '438,323,451,332', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ07SLW02', coords: '437,333,451,344', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ08SLW01', coords: '354,322,368,331', shape: 'rect'},
{type: 'yjslw', device_code: 'YJ08SLW02', coords: '352,333,368,343', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW01', coords: '827,220,839,236', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW02', coords: '824,237,836,249', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW03', coords: '825,236,814,221', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW04', coords: '810,238,820,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW05', coords: '798,219,808,236', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW06', coords: '796,239,803,249', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW07', coords: '784,219,793,235', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW08', coords: '779,237,790,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW09', coords: '769,221,777,234', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW10', coords: '766,237,774,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW11', coords: '752,220,763,237', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW12', coords: '749,237,761,247', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW13', coords: '718,220,730,236', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW14', coords: '717,238,729,249', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW15', coords: '703,221,715,238', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW16', coords: '703,239,714,246', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW17', coords: '688,220,698,237', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW18', coords: '687,238,697,247', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW19', coords: '672,220,684,236', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW20', coords: '670,236,683,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW21', coords: '393,220,405,235', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW22', coords: '393,237,409,250', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW23', coords: '379,221,389,235', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW24', coords: '378,237,392,247', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW25', coords: '363,220,373,234', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW26', coords: '364,238,375,247', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW27', coords: '349,219,360,236', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW28', coords: '349,237,362,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW29', coords: '332,220,344,235', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW30', coords: '333,239,345,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW31', coords: '316,221,331,236', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW32', coords: '317,238,331,249', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW33', coords: '285,221,295,235', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW34', coords: '285,238,299,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW35', coords: '270,220,281,234', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW36', coords: '270,238,282,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW37', coords: '253,220,266,234', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW38', coords: '256,237,267,246', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW39', coords: '237,220,251,237', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW40', coords: '240,238,253,247', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW41', coords: '222,219,235,236', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW42', coords: '223,240,237,247', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW43', coords: '209,222,221,234', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW44', coords: '209,237,220,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW45', coords: '175,220,188,236', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW46', coords: '177,238,191,249', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW47', coords: '160,221,172,235', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW48', coords: '161,237,176,246', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW49', coords: '144,219,157,234', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW50', coords: '146,238,158,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW51', coords: '130,219,142,235', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW52', coords: '133,238,144,247', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW53', coords: '113,220,126,237', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW54', coords: '117,238,130,248', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW55', coords: '99,221,111,234', shape: 'rect'},
{type: 'klhw', device_code: 'KLHW56', coords: '100,239,116,248', shape: 'rect'},
{type: 'yaossx', device_code: '入窑输送线', coords: '97,520,579,539', shape: 'rect'},
{type: 'yaossx', device_code: '出窑输送线', coords: '94,635,592,654', shape: 'rect'}
],
interTime: this.$store.getters.setTime,
timer3: null,
MixMachineList: [], // 混碾机
MixBlankingList: [], // 混碾机对接位
PressMachineList: [], // 压机
ManipulatorInfoList: [], // 压制、分拣机械手
StackingPositionList: [], // 压机下料位
yzslwPositionList: [], // 压机上料位
SortAndPalletizingList: [], // 分拣拆码垛对接位
manualSortingList: [], // 人工分拣拆码垛
TrappedMaterialShelfList: [], // 困料货位
hchjList: [], // 出窑口缓存货架
yaossxArr: [],
yaoObj: {},
pkId: '',
pkObj: {}
}
},
created () {
clearInterval(this.timer3)
this.refresh()
},
beforeDestroy () {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer3)
})
},
methods: {
showPop ($event, e) {
this.pkId = this.pkId === e.device_code ? '' : e.device_code
console.log(this.pkId)
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'
if (this.pkId === 'FJ01MDW02' || this.pkId === 'FJCDJXS01') {
this.$refs.pop.$el.style.top = ($event.y - 200) + 'px'
}
this.$refs.pointer.style.left = ($event.x - 5) + 'px'
this.$refs.pointer.style.top = ($event.y - 5) + 'px'
} 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
}
})
} else if (e.type === 'hljdjw') {
this.MixBlankingList.map(el => {
if (el.pointCode === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
} else if (e.type === 'jxs') {
this.ManipulatorInfoList.map(el => {
if (el.device_code === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
} else if (e.type === 'fjmdw') {
this.SortAndPalletizingList.map(el => {
if (el.device_code === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
} else if (e.type === 'rgfjc') {
this.manualSortingList.map(el => {
if (el.pointCode === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
} else if (e.type === 'hchj') {
this.hchjList.map(el => {
if (el.pointCode === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
} else if (e.type === 'yj') {
this.PressMachineList.map(el => {
if (el.device_code === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
} else if (e.type === 'yjxlw') {
this.StackingPositionList.map(el => {
if (el.device_code === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
} else if (e.type === 'yjslw') {
this.yzslwPositionList.map(el => {
if (el.device_code === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
} else if (e.type === 'klhw') {
this.TrappedMaterialShelfList.map(el => {
if (el.pointCode === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
} else if (e.type === 'yaossx') {
this.yaossxArr.map(el => {
if (el.pointName === 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._inOutKilnDetail()
// this._kilnDetail()
this.timer3 = setInterval(() => {
this._deviceCondition()
this._inOutKilnDetail()
// this._kilnDetail()
}, this.interTime)
},
async _deviceCondition () {
let res = await deviceCondition()
this.MixMachineList = [...res.MixMachineList]
this.MixBlankingList = [...res.MixBlankingList]
this.PressMachineList = [...res.PressMachineList]
this.ManipulatorInfoList = [...res.ManipulatorInfoList]
this.StackingPositionList = [...res.StackingPositionList]
this.yzslwPositionList = [...res.yzslwPositionList]
this.SortAndPalletizingList = [...res.SortAndPalletizingList]
this.manualSortingList = [...res.manualSortingList]
this.manualSortingList = this.manualSortingList.reverse()
this.hchjList = [...res.hchjList]
this.TrappedMaterialShelfList = [...res.TrappedMaterialShelfList]
},
async _inOutKilnDetail () {
let res = await inOutKilnDetail()
this.yaossxArr = [...res]
},
async _kilnDetail () {
let res = await kilnDetail()
this.yaoObj = res
}
}
}
</script>
<style lang="stylus" scoped>
.center_wrapper
width 100%
height 100%
position relative
.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% {
transform: scale(1.5);
opacity: 0;
}
}
</style>