<template>
|
<div ref="room" id="toollist">
|
<div>
|
<p class="statelist" id="theradio">
|
<span><i class="icons backblack"></i><i class="textwenzi">停机</i></span>
|
<span><i class="icons backgreenyellowtitle"></i><i class="textwenzi">运行</i></span>
|
<span><i class="icons backyellow"></i><i class="textwenzi">待机</i></span>
|
<span><i class="icons backgreenredtitle"></i><i class="textwenzi">报警</i></span>
|
</p>
|
<div id="workshop" style="margin-top: 50px;">
|
<div class="device-layout workshop">
|
<div class="device-item-card" v-for="(item, index) in list" :key="index">
|
<div class="content-card">
|
<div class="device-img-layout">
|
<el-row>
|
<el-col :span="11">
|
<img :src="item.pic" class="mdc-machine-image">
|
</el-col>
|
<el-col :span="13" 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 margint10"><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="mdc-machine-name text-center"><span class="xsName">{{ item.name }}</span></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="parent-h-layout">
|
<div class="chart chart-panel">
|
<div class="chart-content">
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="iframe">
|
<iframe id="iframeone" :src="iframeurlone" style="display: none;"></iframe>
|
</div>
|
<div class="iframe">
|
<iframe id="iframetwo" :src="iframeurltwo" style="display: none;"></iframe>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import ECharts from 'vue-echarts/components/ECharts.vue'
|
import 'echarts/lib/chart/gauge'
|
import 'echarts/lib/component/tooltip'
|
import { default as Bus, SCROLL_TOP, ON_VISIBILITY_CHANGE } from '@/bus/EventBus'
|
// import { getMachineStatusByWorkshopId, focuson } from '@/api/MdcApi'
|
import { getMachineStatusByWorkshopId } from '@/api/MdcApi'
|
import { mapGetters } from 'vuex'
|
// import { cfgUtil } from 'cfgUtil'
|
// import { Loading } from 'element-ui'
|
|
export default {
|
components: {
|
ECharts
|
},
|
inject: ['reload'],
|
data() {
|
return {
|
currentTabIndex: '0',
|
imgPreFix: (process.env.NODE_ENV === 'development' ? '' : '/mdc') + '/static/data/img/device/',
|
radiotype: 2,
|
machineDetail: {
|
machine: {},
|
data: []
|
},
|
list: [],
|
|
iframeurlone: '',
|
iframeurltwo: '',
|
appear: -1, // 用户判断最后的车床是否出现
|
margintop: 10, // 将滚动条向下滚动。。px
|
timer1: null, // 时间
|
settime1: null,
|
settime2: null,
|
settime3: null
|
|
}
|
},
|
methods: {
|
/**
|
* 获取车间内的设备状态
|
*/
|
getDeviceInfoByWorkshopID(filterItem) {
|
const ids = this.$route.params.pids
|
this.iframeurlone = ''
|
this.iframeurltwo = ''
|
this.appear = -1
|
this.margintop = 10
|
this.timer1 = null
|
this.settime1 = null
|
this.settime2 = null
|
this.settime3 = null
|
if (ids === '1') {
|
this.iframeurlone = 'http://192.168.234.2:8080/mdc/status/28?slideshow=28&slideshow-interval=5&slideshow-scroll=1'
|
this.iframeurltwo = 'http://192.168.234.2:8080/mdc/dashboard/3000002?slideshow=3000002&slideshow-interval=5&slideshow-scroll=1'
|
// this.iframeurlone = 'https://www.baidu.com';
|
// this.iframeurltwo = 'https://www.jd.com';
|
} else if (ids === '2') {
|
this.iframeurlone = 'http://192.168.234.2:8080/mdc/status/29?slideshow=29&slideshow-interval=5&slideshow-scroll=1'
|
this.iframeurltwo = 'http://192.168.234.2:8080/mdc/dashboard/3000003?slideshow=3000003&slideshow-interval=5&slideshow-scroll=1'
|
} else if (ids === '3') {
|
this.iframeurlone = 'http://192.168.234.2:8080/mdc/status/30?slideshow=30&slideshow-interval=5&slideshow-scroll=1'
|
this.iframeurltwo = 'http://192.168.234.2:8080/mdc/dashboard/3000004?slideshow=3000004&slideshow-interval=5&slideshow-scroll=1'
|
} else if (ids === '4') {
|
this.iframeurlone = 'http://192.168.234.2:8080/mdc/status/31?slideshow=31&slideshow-interval=5&slideshow-scroll=1'
|
this.iframeurltwo = 'http://192.168.234.2:8080/mdc/dashboard/3000005?slideshow=3000005&slideshow-interval=5&slideshow-scroll=1'
|
} else if (ids === '5') {
|
this.iframeurlone = 'http://192.168.234.2:8080/mdc/status/32?slideshow=32&slideshow-interval=5&slideshow-scroll=1'
|
this.iframeurltwo = 'http://192.168.234.2:8080/mdc/dashboard/3000006?slideshow=3000006&slideshow-interval=5&slideshow-scroll=1'
|
} else {
|
this.iframeurlone = 'http://192.168.234.2:8080/mdc/status/33?slideshow=33&slideshow-interval=5&slideshow-scroll=1'
|
this.iframeurltwo = 'http://192.168.234.2:8080/mdc/dashboard/3000007?slideshow=3000007&slideshow-interval=5&slideshow-scroll=1'
|
}
|
return new Promise(resolve => {
|
getMachineStatusByWorkshopId(ids, '', this.radiotype).then(res => {
|
document.getElementById('workshop').style.display = 'block'
|
document.getElementById('iframeone').style.display = 'none'
|
document.getElementById('iframetwo').style.display = 'none'
|
const tempList = []
|
const result = {}
|
for (const prop in res) {
|
// 创建设备列表
|
if (res.hasOwnProperty(prop) && Array.isArray(res[prop])) {
|
for (let i = 0; i < res[prop].length; i++) {
|
const item = res[prop][i] || {}
|
item.type = prop
|
tempList.push(item)
|
if (filterItem && filterItem.index === item.index && filterItem.type === item.type) {
|
result.select = item
|
}
|
}
|
}
|
}
|
result.list = tempList || []
|
resolve(result)
|
})
|
})
|
},
|
/**
|
* 获取数据
|
*/
|
getMachineStatusByWorkshopId() {
|
this.getDeviceInfoByWorkshopID().then(res => {
|
this.list = res.list || []
|
this.slidingup()
|
})
|
},
|
/**
|
* 更新UI
|
* @param data
|
*/
|
updateUI(data) {
|
if (this.$route.path.indexOf('/workshop') === -1 || this.$route.params.pid !== data.workshop) {
|
return
|
}
|
},
|
/* 数据自动滑动向下 */
|
slidingup() {
|
document.getElementById('workshop').scrollTop = 0
|
var bodyheight = document.documentElement.clientHeight
|
var workshopheight = bodyheight - 120
|
document.getElementById('workshop').style.height = workshopheight + 'px'
|
document.getElementById('iframeone').style.height = (bodyheight - 50) + 'px'
|
document.getElementById('iframetwo').style.height = (bodyheight - 50) + 'px'
|
var selfs = this
|
this.timer1 = setInterval(() => {
|
var parent = document.getElementById('workshop')
|
parent.scrollTop = this.margintop
|
var doc = parent.scrollTop
|
if (this.appear === doc) {
|
clearInterval(selfs.timer1)
|
this.settime1 = setTimeout(function() {
|
document.getElementById('workshop').style.display = 'none'
|
document.getElementById('iframeone').style.display = 'block'
|
document.getElementById('iframetwo').style.display = 'none'
|
}, 10000)
|
this.settime2 = setTimeout(function() {
|
document.getElementById('workshop').style.display = 'none'
|
document.getElementById('iframeone').style.display = 'none'
|
document.getElementById('iframetwo').style.display = 'block'
|
}, 20000)
|
this.settime3 = setTimeout(function() {
|
selfs.reload()
|
}, 30000)
|
} else {
|
this.appear = doc
|
}
|
this.margintop += 2
|
}, 30)
|
}
|
},
|
computed: {
|
...mapGetters({
|
mainWidth: 'mainWidth'
|
})
|
},
|
watch: {
|
'$route'(to, from) {
|
// 对路由变化作出响应...
|
clearInterval(this.timer1)
|
clearTimeout(this.settime1)
|
clearTimeout(this.settime2)
|
clearTimeout(this.settime3)
|
this.timer1 = null
|
this.margintop = 10
|
this.appear = -1
|
if (this.$route.path.indexOf('/workshop') > -1) {
|
Bus.$emit(SCROLL_TOP)
|
this.getMachineStatusByWorkshopId()
|
}
|
}
|
},
|
// 销毁组件前清除定时器
|
beforeDestroy() {
|
document.getElementById('workshop').style.display = 'block'
|
document.getElementById('iframeone').style.display = 'none'
|
document.getElementById('iframetwo').style.display = 'none'
|
clearInterval(this.timer1)
|
clearTimeout(this.settime1)
|
clearTimeout(this.settime2)
|
clearTimeout(this.settime3)
|
this.timer1 = null
|
this.settime1 = null
|
this.settime2 = null
|
this.settime3 = null
|
document.getElementById('workshop').scrollTop = 0
|
this.margintop = 10
|
this.appear = -1
|
},
|
created() {
|
// 初始化车间设备状态
|
this.getMachineStatusByWorkshopId()
|
// Bus.$on(ON_MESSAGE, res => {
|
// const a = JSON.parse(res)
|
// this.list.map(item => {
|
// if (item.id === a.machineId) {
|
// 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.updateUI(res)
|
// })
|
Bus.$on(ON_VISIBILITY_CHANGE, () => {
|
this.getMachineStatusByWorkshopId()
|
})
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-main {overflow: auto !important;}
|
.workshop .content-card{border: 1px outset #e1e0e0;}
|
.device-layout{padding: 0;background-color: #061537;padding-bottom: 20px;}
|
.workshop .content-card{ border: 1px outset #0e2f67;}
|
#workshop{margin-top: 0;overflow: hidden}
|
#iframeone,#iframetwo{width: 100%;}
|
</style>
|
