<template>
|
<div ref="room" style="overflow: hidden;" id="toollist">
|
<mdc-message v-if="msgOpt.show" :message="msgOpt.msg"></mdc-message>
|
<div>
|
<p class="statelist" id="theradio">
|
<el-radio-group v-model="radiotype">
|
<el-radio :label="2" @change="radiotypes()">全部</el-radio>
|
<el-radio :label="1" @change="radiotypes()">关注</el-radio>
|
<el-radio :label="3" @change="">我的关注</el-radio>
|
</el-radio-group>
|
<span><i class="icons backblack" @click="getMachinesByStatus('STOP')"></i><i class="textwenzi">停机（{{ stopCount }}）</i></span>
|
<span><i class="icons backgreenyellowtitle" @click="getMachinesByStatus('RUN')"></i><i class="textwenzi">运行（{{ runCount }}）</i></span>
|
<span><i class="icons backyellow" @click="getMachinesByStatus('IDLE')"></i><i class="textwenzi">待机（{{ idleCount }}）</i></span>
|
<span><i class="icons backgreenredtitle" @click="getMachinesByStatus('ALARM')"></i><i class="textwenzi">报警（{{ alarmCount }}）</i></span>
|
<span><i class="icons backwhiletitle" @click="getMachinesByStatus(null)"></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>
|
<!-- <span><i class="icons backblack" @click="getMachinesByStatus('STOP')"></i><i class="textwenzi">停机（{{ stopCount }}）</i></span>-->
|
<!-- <span><i class="icons backgreenyellowtitle" @click="getMachinesByStatus('RUN')"></i><i class="textwenzi">运行（{{ runCount }}）</i></span>-->
|
<!-- <span><i class="icons backyellow" @click="getMachinesByStatus('IDLE')"></i><i class="textwenzi">待机（{{ idleCount }}）</i></span>-->
|
<!-- <span><i class="icons backgreenredtitle" @click="getMachinesByStatus('ALARM')"></i><i class="textwenzi">报警（{{ alarmCount }}）</i></span>-->
|
<!-- <span><i class="icons backwhiletitle" @click="getMachinesByStatus(null)"></i><i class="textwenzi">全部（{{ allCount }}）</i></span>-->
|
</p>
|
<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" v-if="item.status == 'ALARM'">-->
|
<!-- <img :src="item.pic" class="mdc-machine-image" @click="police(item)">-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="11" v-else>-->
|
<!-- <img :src="item.pic" class="mdc-machine-image" @click="showMachineDetail(item.id, item.pic)">-->
|
<!-- </el-col>-->
|
<el-col :span="11">
|
<img :src="item.pic" class="mdc-machine-image" @click="showMachineDetail(item.id, item.pic)">
|
</el-col>
|
<el-col :span="13" class="screen">
|
<el-checkbox v-model="item.concern" @change="focuson(item)"></el-checkbox>
|
<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" @click="police(item)"></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 class="parent-h-layout">
|
<div class="chart chart-panel">
|
<div class="chart-content">
|
</div>
|
</div>
|
</div>
|
</div>
|
<machine-detail-dialog :is-visible="dialog.showDetail" ref="machineDetailDialog"></machine-detail-dialog>
|
|
<!-- 报警-->
|
<call-police v-if="visible" ref="CallPolice" @refreshDataList="getMachineStatusByWorkshopId"></call-police>
|
</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_MESSAGE, ON_VISIBILITY_CHANGE } from '@/bus/EventBus'
|
// import { getMachineDetailById, getMachineStatusByWorkshopId, focuson, getMachineList } from '@/api/MdcApi'
|
import { getMachineStatusByWorkshopId, focuson } from '@/api/MdcApi'
|
import { mapGetters } from 'vuex'
|
import { cfgUtil } from 'cfgUtil'
|
import { Loading } from 'element-ui'
|
import machineDetailDialog from './dialog/MachinDetail'
|
import CallPolice from './dialog/callPolice'
|
|
export default {
|
components: {
|
ECharts,
|
machineDetailDialog,
|
CallPolice
|
},
|
data() {
|
return {
|
currentTabIndex: '0',
|
imgPreFix: (process.env.NODE_ENV === 'development' ? '' : '/mdc') + '/static/data/img/device/',
|
dialog: {
|
showDetail: false // 详细信息
|
},
|
radiotype: 2,
|
machineDetail: {
|
machine: {},
|
data: []
|
}, // 机床详细信息
|
webSocket: null,
|
mdcLoading: null,
|
timerInterval: 0,
|
list: [],
|
msgOpt: {
|
show: false,
|
duration: 4000,
|
msg: ''
|
},
|
timer: null,
|
visible: false,
|
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,
|
legendStatus: ''
|
}
|
},
|
methods: {
|
/* 报警*/
|
police(row) {
|
this.visible = true
|
this.$nextTick(() => {
|
this.$refs.CallPolice.init(row)
|
})
|
},
|
showLoading(timeOutCallBack) {
|
let delay = 25
|
this.mdcLoading = Loading.service({
|
lock: true,
|
text: `需要较长时间，请耐心等待 ${delay}秒`,
|
// spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)',
|
customClass: 'mdc-loading'
|
})
|
clearInterval(this.timerInterval)
|
this.$nextTick(() => {
|
this.timerInterval = setInterval(() => {
|
delay--
|
this.mdcLoading.text = `需要较长时间，请耐心等待 ${delay}秒`
|
if (delay === 0) {
|
this.mdcLoading.close()
|
clearInterval(this.timerInterval)
|
// todo 超时状态回退
|
if (timeOutCallBack) {
|
timeOutCallBack()
|
}
|
}
|
}, 1000)
|
})
|
},
|
/**
|
*
|
**/
|
closeLoading() {
|
clearInterval(this.timerInterval)
|
this.mdcLoading.close()
|
},
|
/**
|
* 错误提示信息
|
**/
|
showErrorTip(msg) {
|
this.$message({
|
message: msg,
|
type: 'error',
|
duration: 4000
|
})
|
},
|
/**
|
* 提示信息
|
**/
|
showInfoTip(msg) {
|
if (!this.msgOpt) {
|
return
|
}
|
if (!this.msgOpt.show) {
|
this.msgOpt.msg = `系统提示：<p>${msg}</p>`
|
this.msgOpt.show = true
|
if (this.msgOpt.duration > 0) {
|
const timer = setTimeout(() => {
|
this.msgOpt.show = false
|
clearTimeout(timer)
|
this.msgOpt.msg = ''
|
}, this.msgOpt.duration)
|
}
|
} else {
|
this.msgOpt.msg += `<p>${msg}</p>`
|
}
|
},
|
/**
|
* 获取设备图标
|
*/
|
getImgUrl(type) {
|
const relUrl = cfgUtil.deviceImgMap[type] || cfgUtil.deviceImgMap.unknown
|
return relUrl ? this.imgPreFix + relUrl : ''
|
},
|
/* 改变全部和关注*/
|
radiotypes() {
|
this.getMachineStatusByWorkshopId()
|
},
|
/**
|
* 获取车间内的设备状态
|
*/
|
getDeviceInfoByWorkshopID(filterItem) {
|
const ids = this.$route.params.pid.split('=')
|
return new Promise(resolve => {
|
getMachineStatusByWorkshopId(ids[0], ids[1], this.radiotype, this.legendStatus).then(res => {
|
const tempList = []
|
const result = {}
|
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
|
}
|
item.type = prop
|
tempList.push(item)
|
if (filterItem && filterItem.index === item.index && filterItem.type === item.type) {
|
result.select = item
|
}
|
}
|
this.allCount = this.stopCount + this.runCount + this.idleCount + this.alarmCount
|
}
|
}
|
result.list = tempList || []
|
resolve(result)
|
})
|
})
|
},
|
/**
|
* 获取数据
|
*/
|
getMachineStatusByWorkshopId() {
|
this.getDeviceInfoByWorkshopID().then(res => {
|
this.list = res.list || []
|
})
|
},
|
getMachinesByStatus(status) {
|
this.legendStatus = status
|
this.getDeviceInfoByWorkshopID().then(res => {
|
this.list = res.list || []
|
})
|
},
|
/**
|
* 数值转换
|
* @param num 数值
|
* @param dec 精度 默认是0
|
* @return {string}
|
*/
|
convertNumber(num, dec = 0) {
|
let ret = '-'
|
let rate = 1
|
let counter = dec
|
num = parseFloat(num)
|
if (num.toString() !== 'NaN') {
|
while (counter && counter !== 0) {
|
rate *= 10
|
counter--
|
}
|
num = Math.round(num * rate)
|
if (num === 0) {
|
ret = num.toFixed(dec)
|
} else {
|
ret = num / rate
|
}
|
}
|
return ret
|
},
|
/**
|
* 通知vuex store 更新状态数据
|
* @param type
|
* @param params
|
*/
|
commitMutations(type, params) {
|
this.$store.commit(type, params)
|
},
|
/**
|
* 更新UI
|
* @param data
|
*/
|
updateUI(data) {
|
if (this.$route.path.indexOf('/workshop') === -1 || this.$route.params.pid !== data.workshop) {
|
return
|
}
|
// console.log('机床页面')
|
},
|
showMachineDetail(machineId, imgurl) {
|
if (machineId !== '') {
|
this.dialog.showDetail = true
|
this.$nextTick(() => {
|
const obj = { imgurl: imgurl, machineId: machineId, concernFlag: this.radiotype }
|
this.$refs.machineDetailDialog.init(obj)
|
})
|
}
|
},
|
/* 关注 */
|
focuson(row) {
|
var num = row.concern
|
if (num === false) { num = 0 } else { num = 1 }
|
focuson(row.id, num).then(res => {
|
if (num === 0) {
|
this.$message({
|
message: '取关成功',
|
type: 'success'
|
})
|
} else {
|
this.$message({
|
message: '关注成功',
|
type: 'success'
|
})
|
}
|
})
|
}
|
},
|
computed: {
|
...mapGetters({
|
mainWidth: 'mainWidth'
|
})
|
},
|
watch: {
|
'$route'(to, from) {
|
// 对路由变化作出响应...
|
if (this.$route.path.indexOf('/workshop') > -1) {
|
Bus.$emit(SCROLL_TOP)
|
this.getMachineStatusByWorkshopId()
|
}
|
}
|
},
|
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()
|
})
|
},
|
mounted() {
|
console.log('111')
|
this.legendStatus = null
|
this.stopCount = this.runCount = this.idleCount = this.alarmCount = this.allCount = 0
|
this.timer = setInterval(() => {
|
this.getMachineStatusByWorkshopId()
|
}, 10000)
|
},
|
beforeDestroy() {
|
clearInterval(this.timer)
|
this.timer = null
|
Bus.$off(ON_MESSAGE)
|
}
|
}
|
</script>
|
|
<style scoped>
|
.workshop .content-card{border: 1px outset #0e2f67;}
|
.device-layout{background-color: #061537;padding-bottom: 20px;margin-top:40px}
|
</style>
|
