<template>
|
<div>
|
<p class="statelists" id="theradio">
|
<span><i class="icons backblack"></i><i class="textwenzi">停机（{{ stopCount }}）</i></span>
|
<span><i class="icons backgreenyellowtitle"></i><i class="textwenzi">运行（{{ runCount }}）</i></span>
|
<span><i class="icons backyellow"></i><i class="textwenzi">待机（{{ idleCount }}）</i></span>
|
<span><i class="icons backgreenredtitle"></i><i class="textwenzi">报警（{{ alarmCount }}）</i></span>
|
<span><i class="icons backwhiletitle"></i><i class="textwenzi">全部（{{ allCount }}）</i></span>
|
</p>
|
<p class="statelist" id="theradio1" style="margin-top: 50px;border-bottom: 0px">
|
<span><i class="textwenzi1">开机率（{{ RUN }}%）</i></span>
|
<span style="margin-left: 100px;"><i class="textwenzi1">故障率（{{ ALRAM }}%）</i></span>
|
<span style="margin-left: 100px;"><i class="textwenzi1">切削率（{{ cutRate }}%）</i></span>
|
<span style="margin-left: 100px;"><i class="textwenzi1">二班开工率（{{ twoShiftRate }}%）</i></span>
|
<span style="margin-left: 100px;"><i class="textwenzi1">三班开工率（{{ threeShiftRate }}%）</i></span>
|
</p>
|
<div id='drags' class="content-card">
|
<ul id="lists" ref="lists">
|
<li class="machinelists" v-for="(item, index) in malists" :key="index" :class="item.lie?'margintop30':''">
|
<!-- 第一个 -->
|
<div class="content-card" :class="{'content-card-gary':item.collectFlag == 0}" v-if="item.highScale == '1'" >
|
<div class="device-img-layout" v-if="item.status != ''">
|
<el-row class="paddingt10">
|
<el-col :span="12" v-if="item.status == 'ALARM'">
|
<img :src="item.pic" class="mdc-machine-image margint10" @click="police(item)">
|
</el-col>
|
<el-col :span="12" v-else>
|
<img :src="item.pic" class="mdc-machine-image margint10" @click="showMachineDetail(item.id,item.pic)">
|
</el-col>
|
<el-col :span="12" class="screen">
|
<div class="mdc-machine-efficiency roomstatelist">
|
<span class="xsName xxstate">机床状态: </span>
|
<span v-if="item.status == 'STOP' || item.status == '' || item.status == null"><i class="icons backblack opacity1"></i></span>
|
<span v-if="item.status == 'RUN' || item.status == 'FEEDHOLDON'"><i class="icons backgreenyellow opacity1"></i></span>
|
<span v-if="item.status == 'IDLE'"><i class="icons backyellow opacity1"></i></span>
|
<span v-if="item.status == 'ALARM'"><i class="icons backgreenred opacity1"></i></span>
|
</div>
|
<div class="mdc-machine-efficiency margintop5"><span class="xsName">能力利用率: </span>{{ item.efficiency }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">日利用率: </span>{{ item.utilizationDaily }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">完工件数: </span>{{ item.cycleCount }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="device-img-layout" v-else></div>
|
<!-- 机床名称 -->
|
<div class="mdc-machine-name text-center"><span class="xsName">{{ item.name }}</span></div>
|
</div>
|
<!-- 第二个 -->
|
<div class="content-card twotwo" :class="{'content-card-gary':item.collectFlag == 0}" v-if="item.highScale == '2'">
|
<div class="device-img-layout" v-if="item.status != ''">
|
<el-row class="paddingt10">
|
<el-col :span="12">
|
<img :src="item.pic" class="mdc-machine-image">
|
</el-col>
|
<el-col :span="12" class="screen">
|
<div class="mdc-machine-efficiency roomstatelist">
|
<span class="xsName xxstate">机床状态: </span>
|
<span v-if="item.status == 'STOP' || item.status == '' || item.status == null"><i class="icons backblack opacity1"></i></span>
|
<span v-if="item.status == 'RUN' || item.status == 'FEEDHOLDON'"><i class="icons backgreenyellow opacity1"></i></span>
|
<span v-if="item.status == 'IDLE'"><i class="icons backyellow opacity1"></i></span>
|
<span v-if="item.status == 'ALARM'"><i class="icons backgreenred opacity1"></i></span>
|
</div>
|
<div class="mdc-machine-efficiency margintop5"><span class="xsName">能力利用率: </span>{{ item.efficiency }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">日利用率: </span>{{ item.utilizationDaily }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">完工件数: </span>{{ item.cycleCount }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="device-img-layout" v-else></div>
|
<!-- 机床名称 -->
|
<div class="mdc-machine-name text-center"><span class="xsName">{{ item.name }}</span></div>
|
</div>
|
<!-- 第三个 -->
|
<div class="content-card threethree" :class="{'content-card-gary':item.collectFlag == 0}" v-if="item.highScale == '3'">
|
<div class="device-img-layout" v-if="item.status != ''">
|
<el-row class="paddingt10">
|
<el-col :span="12">
|
<img :src="item.pic" class="mdc-machine-image">
|
</el-col>
|
<el-col :span="12" class="screen">
|
<div class="mdc-machine-efficiency roomstatelist">
|
<span class="xsName xxstate">机床状态: </span>
|
<span v-if="item.status == 'STOP' || item.status == '' || item.status == null"><i class="icons backblack opacity1"></i></span>
|
<span v-if="item.status == 'RUN' || item.status == 'FEEDHOLDON'"><i class="icons backgreenyellow opacity1"></i></span>
|
<span v-if="item.status == 'IDLE'"><i class="icons backyellow opacity1"></i></span>
|
<span v-if="item.status == 'ALARM'"><i class="icons backgreenred opacity1"></i></span>
|
</div>
|
<div class="mdc-machine-efficiency margintop5"><span class="xsName">能力利用率: </span>{{ item.efficiency }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">日利用率: </span>{{ item.utilizationDaily }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">完工件数: </span>{{ item.cycleCount }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="device-img-layout" v-else></div>
|
<!-- 机床名称 -->
|
<div class="mdc-machine-name text-center"><span class="xsName">{{ item.name }}</span></div>
|
</div>
|
<!-- 第四个 -->
|
<div class="content-card fourfour" :class="{'content-card-gary':item.collectFlag == 0}" v-if="item.highScale == '4'">
|
<div class="device-img-layout" v-if="item.status != ''">
|
<el-row class="paddingt10">
|
<el-col :span="12">
|
<img :src="item.pic" class="mdc-machine-image">
|
</el-col>
|
<el-col :span="12" class="screen">
|
<div class="mdc-machine-efficiency roomstatelist">
|
<span class="xsName xxstate">机床状态: </span>
|
<span v-if="item.status == 'STOP' || item.status == '' || item.status == null"><i class="icons backblack opacity1"></i></span>
|
<span v-if="item.status == 'RUN' || item.status == 'FEEDHOLDON'"><i class="icons backgreenyellow opacity1"></i></span>
|
<span v-if="item.status == 'IDLE'"><i class="icons backyellow opacity1"></i></span>
|
<span v-if="item.status == 'ALARM'"><i class="icons backgreenred opacity1"></i></span>
|
</div>
|
<div class="mdc-machine-efficiency margintop5"><span class="xsName">能力利用率: </span>{{ item.efficiency }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">日利用率: </span>{{ item.utilizationDaily }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">完工件数: </span>{{ item.cycleCount }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="device-img-layout" v-else></div>
|
<!-- 机床名称 -->
|
<div class="mdc-machine-name text-center"><span class="xsName">{{ item.name }}</span></div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import { default as Bus, SCROLL_TOP, ON_MESSAGE, ON_VISIBILITY_CHANGE } from '@/bus/EventBus'
|
// import { default as Bus, ON_MESSAGE } from '@/bus/EventBus'
|
// import { getMachineNum, getMachineList,focuson } from '@/api/MdcApi'
|
import { getMachineNum, getMachineList, getMachineStatusByWorkshopId } from '@/api/MdcApi'
|
export default {
|
data() {
|
return {
|
malists: [],
|
newlist: [],
|
transverse: 0,
|
vertical: 0,
|
totalNum: 0,
|
topnum: 0,
|
top: 0,
|
initialvalue: '',
|
initialvaluenum: 0,
|
appear: 0,
|
stopCount: 0,
|
runCount: 0,
|
idleCount: 0,
|
alarmCount: 0,
|
allCount: 0,
|
RUN: 0.00,
|
ALRAM: 0.00,
|
cutRate: 0.00,
|
twoShiftRate: 0.00,
|
threeShiftRate: 0.00,
|
timer1: null,
|
timer2: null
|
}
|
},
|
mounted() {
|
/* websocket*/
|
// Bus.$on(ON_MESSAGE, res => {
|
// const a = JSON.parse(res)
|
// this.malists.map(item => {
|
// if (item.id === a.machineId) {
|
// if (item.name === '130H_2801019_Ss') {
|
// console.log(item.efficiency)
|
// console.log(item.utilizationDaily)
|
// }
|
// if (a.state != null) { item.status = a.state }
|
// if (a.cycleCount != null) { item.cycleCount = a.cycleCount }
|
// if (a.efficiency != null) { item.efficiency = a.efficiency }
|
// if (a.utilizationDaily != null) { item.utilizationDaily = a.utilizationDaily }
|
// }
|
// })
|
// })
|
this.getNum()
|
this.timer2 = setInterval(() => {
|
this.getMachineStatusByWorkshopId()
|
getMachineList(this.currentPage, this.keyWord, 1, this.radiotype, this.workshopId).then(res => {
|
this.malists.map(item => {
|
res.list.map(resItem => {
|
if (item.id === resItem.id) {
|
item.status = resItem.status
|
item.cycleCount = resItem.cycleCount
|
item.efficiency = resItem.efficiency
|
item.utilizationDaily = resItem.utilizationDaily
|
}
|
})
|
})
|
})
|
}, 10000)
|
},
|
// 销毁组件前清除定时器
|
beforeDestroy() {
|
// Bus.$off(ON_MESSAGE)
|
clearInterval(this.timer1)
|
this.timer1 = null
|
clearInterval(this.timer2)
|
this.timer2 = null
|
},
|
created() {
|
this.getMachineStatusByWorkshopId()
|
},
|
methods: {
|
getNum() {
|
getMachineNum().then(res => {
|
this.transverse = res.length
|
this.vertical = res.width
|
this.totalNum = this.transverse * this.vertical
|
this.getwidth()
|
})
|
},
|
/* 获取机床*/
|
// 获取机床lists
|
getMachineList() {
|
this.loading = true
|
document.getElementById('drags').scrollTop = 0
|
document.getElementById('drags').scrollLeft = 0
|
getMachineList(this.currentPage, this.keyWord, 1, this.radiotype, this.workshopId).then(res => {
|
res.list.map(item => {
|
var name = item.name.split('_')[1]
|
item.pic = '/static/data/img/machine/' + item.workshop + '/' + item.section + '/' + name + '.png'
|
})
|
this.newlist = []
|
/* 占空位*/
|
var addnum = 0
|
res.list.map(item => {
|
addnum++
|
if (addnum === item.firstPosition) {
|
this.newlist.push(item)
|
} else {
|
addnum = this.getnewlists(addnum, item, this.newlist)
|
}
|
})
|
var newarr = this.newlist
|
for (var i = this.newlist.length + 1; i <= this.totalNum; i++) {
|
newarr.push({
|
id: '',
|
ip: '',
|
name: '',
|
port: null,
|
firstPosition: 0,
|
highScale: 1,
|
section: '',
|
type: '',
|
workshop: '',
|
status: '',
|
lie: false
|
})
|
}
|
newarr[newarr.length - 1].end = true
|
this.malists = newarr
|
this.malists.map(item => {
|
item.lie = false
|
})
|
var numlenth = this.transverse * 12
|
numlenth = numlenth + 1
|
this.malists.map((item, index) => {
|
var iione = index + 1
|
var iitwo = numlenth + this.transverse
|
if (iione >= numlenth && iione < iitwo) {
|
item.lie = 'true'
|
}
|
})
|
this.getvertical()
|
})
|
},
|
getnewlists(addnum, item, newlist) {
|
var totalNum = this.transverse * this.vertical
|
for (var i = 0; i < totalNum; i++) {
|
if (addnum === item.firstPosition) {
|
newlist.push(item)
|
break
|
} else {
|
newlist.push({
|
id: '',
|
ip: '',
|
name: '',
|
port: null,
|
firstPosition: 0,
|
highScale: 1,
|
section: '',
|
type: '',
|
workshop: '',
|
status: '',
|
lie: false
|
})
|
}
|
addnum++
|
}
|
return addnum
|
},
|
getwidth() {
|
const total = this.transverse * 300 - 90
|
document.getElementById('lists').style.width = total + 'px'
|
this.getMachineList()
|
},
|
/* 竖滚 */
|
gettransverse() {
|
var parent = document.getElementById('drags')
|
parent.scrollTop = this.top
|
this.getvertical()
|
},
|
/* 横滚 */
|
getvertical() {
|
var bodyheight = document.documentElement.clientHeight
|
this.initialvaluenum++
|
if (this.initialvaluenum === 1) {
|
this.initialvalue = bodyheight - 240
|
}
|
this.top = this.top + this.initialvalue
|
bodyheight = bodyheight - 130
|
document.getElementById('drags').style.height = bodyheight + 'px'
|
var parent1 = document.getElementById('drags')
|
var left = parent1.scrollLeft
|
this.timer1 = setInterval(() => {
|
if (left === 0) {
|
parent1.scrollLeft = parent1.scrollLeft + 2
|
} else {
|
parent1.scrollLeft = parent1.scrollLeft - 2
|
}
|
var scrollLeft = document.getElementById('drags').scrollLeft// 滚动高度
|
if (this.topnum1 !== scrollLeft) {
|
this.topnum1 = scrollLeft
|
} else {
|
clearInterval(this.timer1)
|
this.gettransverse()
|
this.getappear()
|
}
|
}, 30)
|
},
|
/* 判断最后一个车床是否出现在屏幕中 */
|
getappear() {
|
// var element = document.querySelector('.end')
|
var doc = document.getElementById('drags').scrollTop
|
if (this.appear === doc) {
|
document.getElementById('drags').scrollTop = 0
|
document.getElementById('drags').scrollLeft = 0
|
this.appear = 1
|
this.topnum = 0
|
this.top = 0
|
this.initialvalue = ''
|
this.initialvaluenum = 0
|
} else {
|
this.appear = doc
|
}
|
},
|
/**
|
* 获取车间内的设备状态
|
*/
|
getDeviceInfoByWorkshopID() {
|
return new Promise(resolve => {
|
getMachineStatusByWorkshopId(0, null, 2, '').then(res => {
|
this.RUN = res.RUN
|
this.ALRAM = res.ALRAM
|
this.cutRate = res.cutRate
|
this.twoShiftRate = res.twoShiftRate
|
this.threeShiftRate = res.threeShiftRate
|
// console.log(res)
|
for (const prop in res) {
|
// 创建设备列表
|
if (res.hasOwnProperty(prop) && Array.isArray(res[prop])) {
|
this.stopCount = this.runCount = this.idleCount = this.alarmCount = this.allCount = 0
|
for (let i = 0; i < res[prop].length; i++) {
|
const item = res[prop][i] || {}
|
switch (item.status) {
|
case 'STOP':
|
this.stopCount++
|
break
|
case 'RUN':
|
this.runCount++
|
break
|
case 'IDLE':
|
this.idleCount++
|
break
|
case 'ALARM':
|
this.alarmCount++
|
break
|
default:
|
this.stopCount++
|
break
|
}
|
}
|
this.allCount = this.stopCount + this.runCount + this.idleCount + this.alarmCount
|
}
|
}
|
})
|
})
|
},
|
/**
|
* 获取数据
|
*/
|
getMachineStatusByWorkshopId() {
|
this.getDeviceInfoByWorkshopID().then(res => {
|
this.list = res.list || []
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.el-checkbox,.serialnum{float: right;}
|
.serialnumnone{float: right;margin-top: 10px;}
|
#drags{margin-top: 0;overflow-x: auto;overflow: hidden;color: white;background-color:green;}
|
#drags>ul{list-style: none;padding: 30px;padding-right: 0;}
|
#drags>ul>li{height:200px;float:left;width: 280px;box-sizing:border-box;}
|
#drags>ul>li>div{padding: 5px;width: 100%;height: 100%;}
|
#drags{width: 100%;position: relative;}
|
#drags .divimg{width: 100%;text-align: center;}
|
#drags .divimg>img{width: 90%;}
|
#drags p{font-size: .5rem;}
|
|
#drags .content-card{background: rgba(30,83,130);border: 1px solid #0e2f67;margin-top:35px}
|
#drags .device-img-layout{padding-top: 18px;}
|
|
.machinelists{position: relative;}
|
.machinelists:nth-of-type(even){margin-right: 30px;}
|
.twotwo{position: absolute;height: 400px !important;padding-top: 120px !important;z-index: 997;}
|
.threethree{position: absolute;height: 600px !important;padding-top: 230px !important;z-index: 997;}
|
.fourfour{position: absolute;height: 800px !important;padding-top: 340px !important;z-index: 997;}
|
</style>
|
