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

设备数据

Browse Source
This commit is contained in:
caill
2024-03-07 01:01:51 +08:00
parent 43c8dd0971
commit d7975885a6
5 changed files with 415 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/config/mork2.js
View File

@@ -1018,21 +1018,45 @@ export const screenTableData = () => {
} }
], ],
'deviceErrorList': [ 'deviceErrorList': [
{
'deviceName': '压机03',
'errorNum': '2'
},
{
'deviceName': '压机06',
'errorNum': '1'
},
{ {
'deviceName': '压机01', 'deviceName': '压机01',
'errorNum': '1' 'errorNum': '1'
}, },
{ {
'deviceName': '压机02', 'deviceName': '压机02',
'errorNum': '1' 'errorNum': '2'
},
{
'deviceName': '压机03',
'errorNum': '3'
},
{
'deviceName': '压机04',
'errorNum': '4'
},
{
'deviceName': '压机05',
'errorNum': '5'
},
{
'deviceName': '压机06',
'errorNum': '6'
},
{
'deviceName': '压机07',
'errorNum': '7'
},
{
'deviceName': '压机08',
'errorNum': '8'
},
{
'deviceName': '压机09',
'errorNum': '9'
},
{
'deviceName': '压机10',
'errorNum': '10'
} }
], ],
'deviceRunStat': { 'deviceRunStat': {
@@ -1047,7 +1071,7 @@ export const screenTableData = () => {
'materialName': '001', 'materialName': '001',
'requiredNum': '1000', 'requiredNum': '1000',
'suppressedNum': '378', 'suppressedNum': '378',
'finishedNum': '0' 'finishedNum': '100'
}, },
{ {
'materialName': '003', 'materialName': '003',

107
src/pages/modules/home/devicepop.vue
View File

@@ -1,18 +1,31 @@
<template> <template>
<div v-if="pkId === data.pointName" class="popup_wraper" :class="{'popup_wraper_down': direction === 'down'}"> <div v-if="((type === 'yaossx' || type === 'yao' || type === 'hljdjw') && pkId === data.pointName) || ((type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'hlj') && pkId === data.device_code)" class="popup_wraper" :class="{'popup_wraper_down': direction === 'down'}">
<div class="popup_arrow" :class="{'popup_arrow_down': direction === 'down'}"> <div class="popup_arrow" :class="{'popup_arrow_down': direction === 'down'}">
<img src="../../../images/device/arrow.png"> <img src="../../../images/device/arrow.png">
</div> </div>
<div class="popup_bg"> <div class="popup_bg">
<div class="popup_block"> <div class="popup_block">
<div class="pop_header"> <div class="pop_header">
<div class="pop_name">{{data.pointName}}</div> <div v-show="type === 'yaossx' || type === 'yao' || type === 'hljdjw'" class="pop_name">{{data.pointName}}</div>
<div v-if="type === 'yaossx'" class="pop_status"> <div v-show="type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'hlj'" class="pop_name">{{data.device_code}}</div>
<div v-show="type === 'yaossx'" class="pop_status">
<div class="pop_status_dot" :class="['green', 'yellow', 'gray', 'red'][Number(data.stat) - 1]"></div> <div class="pop_status_dot" :class="['green', 'yellow', 'gray', 'red'][Number(data.stat) - 1]"></div>
<div class="pop_status_text fgray">{{ ['运行', '暂停', '停机', '故障'][Number(data.stat) - 1] }}</div> <div class="pop_status_text fgray">{{ ['运行', '暂停', '停机', '故障'][Number(data.stat) - 1] }}</div>
</div> </div>
<div v-show="type === 'yj' || type === 'jxs' || type === 'hlj'" class="pop_status">
<div class="pop_status_dot" :class="['green', 'yellow', 'gray', 'red'][Number(data.device_status) - 1]"></div>
<div class="pop_status_text fgray">{{ ['运行', '暂停', '停机', '故障'][Number(data.device_status) - 1] }}</div>
</div>
<div v-show="type === 'yjmdw'" class="pop_status">
<div class="pop_status_dot" :class="['green', 'yellow', 'gray', 'red'][Number(data.color_status) - 1]"></div>
<div class="pop_status_text fgray">{{ ['运行', '暂停', '停机', '故障'][Number(data.color_status) - 1] }}</div>
</div>
<div v-show="type === 'hljdjw'" class="pop_status">
<div class="pop_status_dot" :class="['green', 'yellow', 'gray', 'red'][Number(data.pointStatus) - 1]"></div>
<div class="pop_status_text fgray">{{ ['运行', '暂停', '停机', '故障'][Number(data.pointStatus) - 1] }}</div>
</div>
</div> </div>
<div v-if="type === 'yaossx'" class="pop_content"> <div v-show="type === 'yaossx'" class="pop_content">
<div class="popup_item"> <div class="popup_item">
<div class="popup_label">当日已输送托盘数</div> <div class="popup_label">当日已输送托盘数</div>
<div class="popup_val">{{ data.deliveredPalletNum }}</div> <div class="popup_val">{{ data.deliveredPalletNum }}</div>
@@ -34,7 +47,7 @@
<div class="popup_val">{{ data.materialNum }}</div> <div class="popup_val">{{ data.materialNum }}</div>
</div> </div>
</div> </div>
<div v-if="type === 'yao'" class="pop_content"> <div v-show="type === 'yao'" class="pop_content">
<div class="popup_item"> <div class="popup_item">
<div class="popup_label">工作时间</div> <div class="popup_label">工作时间</div>
<div class="popup_val">{{ data.workTime }}</div> <div class="popup_val">{{ data.workTime }}</div>
@@ -56,6 +69,90 @@
<div class="popup_val">{{ data.materialInfos }}</div> <div class="popup_val">{{ data.materialInfos }}</div>
</div> </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'" 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'" class="pop_content">
<div class="popup_item">
<div class="popup_label">设备编码</div>
<div class="popup_val">{{ data.pointCode }}</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

194
src/pages/modules/home/index.vue
View File

@@ -67,10 +67,10 @@
</div> </div>
</div> </div>
<div class="pie_legend"> <div class="pie_legend">
<div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)"> <div class="pie_legend_item" v-for="(e, i) in deviceRunStat.seriesData" :key="'sbyxtj' + i" :class="'pie_legend_item_bg_' + (i + 1)">
<p class="pie_legend_txt_1">{{ e.stateName }}</p> <p class="pie_legend_txt_1">{{ e.name }}</p>
<div class="pie_legend_txt_wraper"> <div class="pie_legend_txt_wraper">
<p class="pie_legend_txt_2">{{ e.status }}</p> <p class="pie_legend_txt_2">{{ e.value }}</p>
<p class="pie_legend_txt_3">{{ e.rate }}</p> <p class="pie_legend_txt_3">{{ e.rate }}</p>
</div> </div>
</div> </div>
@@ -125,8 +125,8 @@
</template> </template>
<script> <script>
import { homepageDataLeft, homepageDataRight, screenTableData } from '@js/mork2.js' // import { screenTableData } from '@js/mork2.js'
// import { homepageDataLeft } from '@js/getData2.js' import { screenTableData } from '@js/getData2.js'
import symbol1 from '@img/symbol_1.png' import symbol1 from '@img/symbol_1.png'
import symbol2 from '@img/symbol_2.png' import symbol2 from '@img/symbol_2.png'
import symbol3 from '@img/symbol_3.png' import symbol3 from '@img/symbol_3.png'
@@ -147,34 +147,17 @@ export default {
return { return {
interTime: this.$store.getters.setTime, interTime: this.$store.getters.setTime,
timer: null, timer: null,
chart1Timer: null,
chart2Timer: null,
chart3Timer: null,
chart4Timer: null,
expand: false, expand: false,
deviceErrorRecordList: [], // 设备报警信息 deviceErrorRecordList: [], // 设备报警信息
mixingList: [], // 当日混料 mixingList: [], // 当日混料
historyList: [], // 历史分析 historyList: [], // 历史分析
todayMixProduction: {}, // 今日生产混料 deviceErrorList: [], // 30天故障Top10
todayPressProduction: {}, // 今日生产成型 productList: [], // 当日成品
todaySortProduction: {}, // 今日生产包装 deviceRunStat: {} // 设备运行统计
orderFulfillmentRate: {}, // 订单完成
todayTotalPlan: '',
materialCountSize: '',
sortCompleted: '',
sortCompletedQty: '',
sortMaterialCountSize: '',
fulfillmentRate: '',
todayMix: [], // 当日混料
todaySort: [], // 当日成品
inventory: [], // 库存量监控
history: [], // 历史分析
chart2Timer: null,
chart3Timer: null,
chart4Timer: null,
chart5Timer: null,
chart7Timer: null,
chart9Timer: null,
capacityRate: [], // 设备产能利用
stateStatistics: {}, // 设备运行统计
areaDeviceStatus: [{process: '混料'}, {process: '压制'}, {process: '干燥'}, {process: '包装'}], // 工序设备状态
top10Of30Days: [] // 30天故障top10
} }
}, },
computed: { computed: {
@@ -192,17 +175,15 @@ export default {
} }
}, },
created () { created () {
this._homepageDataLeft()
this._homepageDataRight()
this._screenTableData() this._screenTableData()
// this.refresh() // this.refresh()
}, },
beforeDestroy () { beforeDestroy () {
clearInterval(this.timer) clearInterval(this.timer)
clearInterval(this.chart1Timer)
clearInterval(this.chart2Timer) clearInterval(this.chart2Timer)
clearInterval(this.chart3Timer) clearInterval(this.chart3Timer)
clearInterval(this.chart4Timer) clearInterval(this.chart4Timer)
clearInterval(this.chart5Timer)
}, },
methods: { methods: {
expandTooltip () { expandTooltip () {
@@ -210,103 +191,38 @@ export default {
}, },
refresh () { refresh () {
this.timer = setInterval(() => { this.timer = setInterval(() => {
this._homepageDataLeft()
this._screenTableData() this._screenTableData()
}, this.interTime) }, this.interTime)
}, },
async _homepageDataLeft () { async _screenTableData () {
let res = await homepageDataLeft() let res = await screenTableData()
clearInterval(this.chart1Timer)
clearInterval(this.chart2Timer) clearInterval(this.chart2Timer)
clearInterval(this.chart3Timer) clearInterval(this.chart3Timer)
clearInterval(this.chart4Timer) clearInterval(this.chart4Timer)
clearInterval(this.chart5Timer) this.deviceErrorRecordList = [...res.deviceErrorRecordList]
this.todayMixProduction = res.todayProduction.todayMixProduction this.mixingList = [...res.mixingList]
this.todayPressProduction = res.todayProduction.todayPressProduction this.productList = [...res.productList]
this.todaySortProduction = res.todayProduction.todaySortProduction this.historyList = [...res.historyList]
this.todayTotalPlan = res.todayProduction.todayTotalPlan this.deviceErrorList = [...res.deviceErrorList]
this.materialCountSize = res.todayProduction.materialCountSize this.deviceErrorList.map((e, i) => {
this.sortCompleted = res.todayProduction.sortCompleted this.$set(e, 'sort', i + 1)
this.sortCompletedQty = res.todayProduction.sortCompletedQty })
this.sortMaterialCountSize = res.todayProduction.sortMaterialCountSize this.deviceErrorList = this.deviceErrorList.reverse()
this.fulfillmentRate = res.todayProduction.fulfillmentRate let seriesData = [{value: res.deviceRunStat.runNum, name: '正常运行'}, {value: res.deviceRunStat.unProducedNum, name: '暂未生产'}, {value: res.deviceRunStat.freeNum, name: '空闲设备'}, {value: res.deviceRunStat.errorNum, name: '故障设备'}]
this.orderFulfillmentRate = Number(res.todayProduction.orderFulfillmentRate.real) / Number(res.todayProduction.orderFulfillmentRate.plan) * 100 seriesData.map(el => {
this.orderFulfillmentRate = this.orderFulfillmentRate.toFixed(0) let rate = Number(el.value) * 100 / Number(res.deviceRunStat.total)
this.todayMix = [...res.todayMix]
this.todaySort = [...res.todaySort]
let total = res.inventory.reduce((a, b) => {
return a + Number(b.qty)
}, 0)
res.inventory.map(el => {
let rate = Number(el.qty) * 100 / Number(total)
rate = rate.toFixed(2) + '%' rate = rate.toFixed(2) + '%'
this.$set(el, 'rate', rate) this.$set(el, 'rate', rate)
}) })
this.inventory = [...res.inventory] this.deviceRunStat = res.deviceRunStat
this.history = [...res.history] this.deviceRunStat.seriesData = seriesData
this.setEchart1() this.setEchart1()
this.setEchart2() this.setEchart2()
this.setEchart3() this.setEchart3()
// this.setEchart4()
// this.setEchart5()
},
async _homepageDataRight () {
let res = await homepageDataRight()
clearInterval(this.chart7Timer)
clearInterval(this.chart9Timer)
this.capacityRate = [...res.capacityRate]
res.stateStatistics.fourState.map(el => {
let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
rate = rate.toFixed(2) + '%'
this.$set(el, 'rate', rate)
})
this.stateStatistics = res.stateStatistics
this.deviceWorkOrder = [...res.deviceWorkOrder]
this.areaDeviceStatus.map((e, i) => {
if (i === 0) {
this.$set(e, 'running', res.areaDeviceStatus.mix.running)
this.$set(e, 'pausing', res.areaDeviceStatus.mix.pausing)
this.$set(e, 'shutdown', res.areaDeviceStatus.mix.shutdown)
this.$set(e, 'inTrouble', res.areaDeviceStatus.mix.inTrouble)
}
if (i === 1) {
this.$set(e, 'running', res.areaDeviceStatus.press.running)
this.$set(e, 'pausing', res.areaDeviceStatus.press.pausing)
this.$set(e, 'shutdown', res.areaDeviceStatus.press.shutdown)
this.$set(e, 'inTrouble', res.areaDeviceStatus.press.inTrouble)
}
if (i === 2) {
this.$set(e, 'running', res.areaDeviceStatus.dry.running)
this.$set(e, 'pausing', res.areaDeviceStatus.dry.pausing)
this.$set(e, 'shutdown', res.areaDeviceStatus.dry.shutdown)
this.$set(e, 'inTrouble', res.areaDeviceStatus.dry.inTrouble)
}
if (i === 3) {
this.$set(e, 'running', res.areaDeviceStatus.sort.running)
this.$set(e, 'pausing', res.areaDeviceStatus.sort.pausing)
this.$set(e, 'shutdown', res.areaDeviceStatus.sort.shutdown)
this.$set(e, 'inTrouble', res.areaDeviceStatus.sort.inTrouble)
}
})
this.top10Of30Days = [...res.top10Of30Days]
this.top10Of30Days.map((e, i) => {
this.$set(e, 'sort', i + 1)
})
this.top10Of30Days = this.top10Of30Days.reverse()
this.setEchart4() this.setEchart4()
this.setEchart5() this.setEchart5()
}, },
async _screenTableData () {
let res = await screenTableData()
clearInterval(this.chart2Timer)
clearInterval(this.chart3Timer)
clearInterval(this.chart4Timer)
clearInterval(this.chart5Timer)
clearInterval(this.chart7Timer)
clearInterval(this.chart9Timer)
this.deviceErrorRecordList = [...res.deviceErrorRecordList]
this.mixingList = [...res.mixingList]
this.historyList = [...res.historyList]
},
setEchart1 () { setEchart1 () {
let img = { let img = {
imgSrc1: symbol1, imgSrc1: symbol1,
@@ -448,7 +364,7 @@ export default {
this.$echarts.dispose(document.getElementById('new_home_echart_1')) this.$echarts.dispose(document.getElementById('new_home_echart_1'))
let echart = this.$echarts.init(document.getElementById('new_home_echart_1')) let echart = this.$echarts.init(document.getElementById('new_home_echart_1'))
echart.setOption(option) echart.setOption(option)
this.chart2Timer = setInterval(() => { this.chart1Timer = setInterval(() => {
if (option.dataZoom[0].endValue >= barData1.length - 1) { if (option.dataZoom[0].endValue >= barData1.length - 1) {
option.dataZoom[0].endValue = 4 option.dataZoom[0].endValue = 4
option.dataZoom[0].startValue = 0 option.dataZoom[0].startValue = 0
@@ -467,11 +383,11 @@ export default {
let barData1 = [] let barData1 = []
let barData2 = [] let barData2 = []
let barData3 = [] let barData3 = []
this.todaySort.map(el => { this.productList.map(el => {
barName.push(el.materialCode) barName.push(el.materialName)
barData1.push(el.plan) barData1.push(el.requiredNum)
barData2.push(el.press) barData2.push(el.suppressedNum)
barData3.push(el.real) barData3.push(el.finishedNum)
}) })
let option = { let option = {
grid: { grid: {
@@ -646,7 +562,7 @@ export default {
this.$echarts.dispose(document.getElementById('new_home_echart_2')) this.$echarts.dispose(document.getElementById('new_home_echart_2'))
let echart = this.$echarts.init(document.getElementById('new_home_echart_2')) let echart = this.$echarts.init(document.getElementById('new_home_echart_2'))
echart.setOption(option) echart.setOption(option)
this.chart3Timer = setInterval(() => { this.chart2Timer = setInterval(() => {
if (option.dataZoom[0].endValue >= barData1.length - 1) { if (option.dataZoom[0].endValue >= barData1.length - 1) {
option.dataZoom[0].endValue = 4 option.dataZoom[0].endValue = 4
option.dataZoom[0].startValue = 0 option.dataZoom[0].startValue = 0
@@ -667,17 +583,17 @@ export default {
imgSrc3: lineSelected imgSrc3: lineSelected
} }
let total = 0 let total = 0
this.history.map(el => { this.historyList.map(el => {
total = Math.max(total, Number(el.press), Number(el.sort)) total = Math.max(total, Number(el.suppressedNum), Number(el.finishedNum))
}) })
let barName = [] let barName = []
let barData1 = [] let barData1 = []
let barData2 = [] let barData2 = []
let totalDate = [] let totalDate = []
this.history.map(el => { this.historyList.map(el => {
barName.push(el.date) barName.push(el.produceDate)
barData1.push(el.press) barData1.push(el.suppressedNum)
barData2.push(el.sort) barData2.push(el.finishedNum)
}) })
let option = { let option = {
grid: { grid: {
@@ -849,7 +765,7 @@ export default {
let echart = this.$echarts.init(document.getElementById('new_home_echart_3')) let echart = this.$echarts.init(document.getElementById('new_home_echart_3'))
echart.setOption(option) echart.setOption(option)
let len = 0 let len = 0
this.chart5Timer = setInterval(() => { this.chart3Timer = setInterval(() => {
if (len === barName.length) { if (len === barName.length) {
len = 0 len = 0
} }
@@ -878,12 +794,8 @@ export default {
}, },
setEchart4 () { setEchart4 () {
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb'] let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
let seriesData = this.stateStatistics.fourState let seriesData = this.deviceRunStat.seriesData
seriesData.map((el, i) => { let total = this.deviceRunStat.total
el.value = el.status
el.name = el.stateName
})
let total = this.stateStatistics.count
let option = { let option = {
color: colors, color: colors,
grid: { grid: {
@@ -951,14 +863,14 @@ export default {
let ydata = [] let ydata = []
let xdata = [] let xdata = []
let total = 0 let total = 0
this.top10Of30Days.map(el => { this.deviceErrorList.map(el => {
total = Math.max(total, Number(el.count)) total = Math.max(total, Number(el.errorNum))
}) })
let data = [] let data = []
this.top10Of30Days.map(el => { this.deviceErrorList.map(el => {
ydata.push(el.device_name) ydata.push(el.deviceName)
xdata.push({name: el.device_name, value: el.count, sort: el.sort}) xdata.push({name: el.deviceName, value: el.errorNum, sort: el.sort})
data.push({value: total, num: el.count}) data.push({value: total, num: el.errorNum})
}) })
let img = { let img = {
bg1: bg1, bg1: bg1,
@@ -1209,7 +1121,7 @@ export default {
this.$echarts.dispose(document.getElementById('new_home_echart_5')) this.$echarts.dispose(document.getElementById('new_home_echart_5'))
let echart = this.$echarts.init(document.getElementById('new_home_echart_5')) let echart = this.$echarts.init(document.getElementById('new_home_echart_5'))
echart.setOption(option) echart.setOption(option)
this.chart9Timer = setInterval(() => { this.chart4Timer = setInterval(() => {
if (option.dataZoom[0].endValue === 0) { if (option.dataZoom[0].endValue === 0) {
option.dataZoom[0].endValue = 6 option.dataZoom[0].endValue = 6
option.dataZoom[0].startValue = 9 option.dataZoom[0].startValue = 9

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

@@ -21,33 +21,58 @@
</div> </div>
<div class="m_block m_block_2"> <div class="m_block m_block_2">
<div class="m_wraper"> <div class="m_wraper">
<div class="p_device ddxt_wrap" v-for="(e, i) in [1, 1]" :key="i" :class="'ddxt_wrap_' + (i +1)"> <div class="p_device ddxt_wrap" v-for="(e, i) in [1, 1]" :key="'ddxt' + i" :class="'ddxt_wrap_' + (i +1)">
<div class="p_device weilan_ddxt_wrap"> <div class="p_device weilan_ddxt_wrap">
<div class="weilan_ddxt" v-for="(e, i) in [1, 1]" :key="i"> <div class="weilan_ddxt" v-for="(e, i) in [1, 1]" :key="'cmdwl' + i">
<img class="device_img" :class="{'rotatey180': i === 1}" src="../../../images/device/wl_cmd_1.png" alt=""> <img class="device_img" :class="{'rotatey180': i === 1}" src="../../../images/device/wl_cmd_1.png" alt="">
</div> </div>
</div> </div>
<div class="p_device ssj_wrap"> <div class="p_device ssj_wrap">
<img class="device_img" src="../../../images/device/ssj_gray.png" alt=""> <img class="device_img" src="../../../images/device/ssj_gray.png" alt="">
</div> </div>
<div v-if="i === 1" class="p_device ktp_cmd_wrap"> <div v-show="i === 1" class="p_device ktp_cmd_wrap">
<div class="ktp_cmd" v-for="e in SortAndPalletizingList.slice(0,2)" :key="e.device_code"> <div class="ktp_cmd" v-for="e in SortAndPalletizingList.slice(0,2)" :key="e.device_code" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="yjmdw"
:data="e"
></device-pop>
</div> </div>
</div> </div>
<div v-if="i === 1" class="p_device ktp_cmd_wrap cmdssj_wrap"> <div v-show="i === 1" class="p_device ktp_cmd_wrap cmdssj_wrap">
<div class="ktp_cmd" v-for="(e,i) in SortAndPalletizingList.slice(2,4)" :key="e.device_code"> <div class="ktp_cmd" v-for="(e,i) in SortAndPalletizingList.slice(2,4)" :key="e.device_code" @click="getInfo2(e)">
<img class="device_img" :class="{'rotatex180': i === 1}" :src="require('../../../images/device/cmdssj_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')"> <img class="device_img" :class="{'rotatex180': i === 1}" :src="require('../../../images/device/cmdssj_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="yjmdw"
:data="e"
></device-pop>
</div> </div>
</div> </div>
<div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_1" :class="{'rotate_3': Number(ManipulatorInfoList[0].device_status) === 1}"> <div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_1" v-for="e in ManipulatorInfoList.slice(0,1)" :key="e.device_code" :class="{'rotate_3': Number(e.device_status) === 1}" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[0].device_status) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="jxs"
:data="e"
></device-pop>
</div> </div>
<div v-show="i === 0" class="p_device robot_cmd_wrap robot_cmd_wrap_2" :class="{'rotate_4': Number(ManipulatorInfoList[2].device_status) === 1}"> <div v-show="i === 0" class="p_device robot_cmd_wrap robot_cmd_wrap_2" v-for="e in ManipulatorInfoList.slice(2,3)" :key="e.device_code" :class="{'rotate_4': Number(e.device_status) === 1}" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[2].device_status) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="jxs"
:data="e"
></device-pop>
</div> </div>
<div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_2" :class="{'rotate_4': Number(ManipulatorInfoList[1].device_status) === 1}"> <div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_2" v-for="e in ManipulatorInfoList.slice(1,2)" :key="e.device_code" :class="{'rotate_4': Number(e.device_status) === 1}" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[1].device_status) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="jxs"
:data="e"
></device-pop>
</div> </div>
</div> </div>
<div class="rgv_line_wrap"> <div class="rgv_line_wrap">
@@ -55,14 +80,14 @@
<div class="rgv_line_begine"></div> <div class="rgv_line_begine"></div>
<div class="rgv_line_begine rgv_line_end"></div> <div class="rgv_line_begine rgv_line_end"></div>
<div class="rgv_line_node_wrap"> <div class="rgv_line_node_wrap">
<div class="rgv_line_node" v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="i"></div> <div class="rgv_line_node" v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="'rgvlinea' + i"></div>
</div> </div>
</div> </div>
<div class="rgv_line_1 rgv_line_2"> <div class="rgv_line_1 rgv_line_2">
<div class="rgv_line_begine"></div> <div class="rgv_line_begine"></div>
<div class="rgv_line_begine rgv_line_end"></div> <div class="rgv_line_begine rgv_line_end"></div>
<div class="rgv_line_node_wrap"> <div class="rgv_line_node_wrap">
<div class="rgv_line_node" v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="i"></div> <div class="rgv_line_node" v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="'rgvlineb' + i"></div>
</div> </div>
</div> </div>
<div class="rgv_line_3"></div> <div class="rgv_line_3"></div>
@@ -71,42 +96,48 @@
<img class="device_img" src="../../../images/device/rgv_ct.png" alt=""> <img class="device_img" src="../../../images/device/rgv_ct.png" alt="">
</div> </div>
<div class="p_device ggtj_wrap ggtj_wrap_1"> <div class="p_device ggtj_wrap ggtj_wrap_1">
<img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2]" :key="i"> <img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2]" :key="'gtssja' + i">
</div> </div>
<div class="p_device ggtj_wrap ggtj_wrap_2"> <div class="p_device ggtj_wrap ggtj_wrap_2">
<img class="fmj" src="../../../images/device/fmj_yellow.png" alt=""> <img class="fmj" src="../../../images/device/fmj_yellow.png" alt="">
<img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3,4]" :key="i"> <img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3,4]" :key="'gtssjb' + i">
</div> </div>
<div class="p_device rgpt"></div> <div class="p_device rgpt"></div>
<div class="p_device fmj2"> <div class="p_device fmj2">
<img class="device_img" src="../../../images/device/fmj2_yellow.png" alt=""> <img class="device_img" src="../../../images/device/fmj2_yellow.png" alt="">
</div> </div>
<div class="p_device ggtj_wrap ggtj_wrap_3"> <div class="p_device ggtj_wrap ggtj_wrap_3">
<img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3]" :key="i"> <img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3]" :key="'gtssjc' + i">
<img class="ltssj" src="../../../images/device/ltssj_yellow.png" alt=""> <img class="ltssj" src="../../../images/device/ltssj_yellow.png" alt="">
<img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2]" :key="i"> <img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2]" :key="'gtssjd' + i">
<img class="crj" src="../../../images/device/crj_yellow.png" alt=""> <img class="crj" src="../../../images/device/crj_yellow.png" alt="">
<img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3,4]" :key="i"> <img class="gtssj" src="../../../images/device/gtssj_yellow.png" alt="" v-for="(e,i) in [1,2,3,4]" :key="'gtssje' + i">
</div> </div>
</div> </div>
</div> </div>
<div class="m_block m_block_1"> <div class="m_block m_block_1">
<div class="m_wraper"> <div class="m_wraper">
<div class="yao_wrap" v-for="(e, i) in [1,1]" :key="i" :class="'yao_' + (i + 1)" @click="getInfo(yaoObj)"> <div class="yao_wrap yao_1" @click="getInfo1(yaoObj)">
<div class="yao_layer3"></div> <div class="yao_layer3"></div>
<div class="yao_layer1 yao_layer1_1"></div> <div class="yao_layer1 yao_layer1_1"></div>
<div class="yao_layer2 yao_layer2_1"> <div class="yao_layer2 yao_layer2_1">
<p>{{i === 0 ? '进窑' : '出窑'}}</p> <p>进窑</p>
</div> </div>
<device-pop <device-pop
v-if="i === 0"
:pkId="pkId" :pkId="pkId"
type="yao" type="yao"
:data="yaoObj" :data="yaoObj"
></device-pop> ></device-pop>
</div> </div>
<div class="yao_wrap yao_2">
<div class="yao_layer3"></div>
<div class="yao_layer1 yao_layer1_1"></div>
<div class="yao_layer2 yao_layer2_1">
<p>出窑</p>
</div>
</div>
<div class="p_device jyw_wrap"> <div class="p_device jyw_wrap">
<div class="p_device" v-for="(e, i) in [1,1,1,1]" :key="i" :class="'jyw' + (i+1)"> <div class="p_device" v-for="(e, i) in [1,1,1,1]" :key="'jyw' + i" :class="'jyw' + (i+1)">
<img class="device_img" src="../../../images/device/ktpv_gray.png" alt=""> <img class="device_img" src="../../../images/device/ktpv_gray.png" alt="">
</div> </div>
</div> </div>
@@ -116,26 +147,26 @@
<div class="p_device cpj_wrap"> <div class="p_device cpj_wrap">
<img class="device_img" src="../../../images/device/cpj_green.png" alt=""> <img class="device_img" src="../../../images/device/cpj_green.png" alt="">
</div> </div>
<div class="p_device" v-for="(e, i) in [1,1]" :key="i" :class="'yjbyx_' + (i + 1)"> <div class="p_device" v-for="(e, i) in [1,1]" :key="'yjbyx' + i" :class="'yjbyx_' + (i + 1)">
<img class="device_img" src="../../../images/device/yjbyx_green.png" alt=""> <img class="device_img" src="../../../images/device/yjbyx_green.png" alt="">
</div> </div>
<div class="p_device ktp_yao_enter_wrap" @click="getInfo(yaossxArr[0])"> <div class="p_device ktp_yao_enter_wrap" v-for="el in yaossxArr.slice(0,1)" :key="el.pointName" @click="getInfo1(el)">
<div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="i"> <div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="'aktpyao' + i">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(yaossxArr[0].stat) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(el.stat) - 1] + '.png')">
</div> </div>
<device-pop <device-pop
:pkId="pkId" :pkId="pkId"
type="yaossx" type="yaossx"
:data="yaossxArr[0]" :data="el"
></device-pop> ></device-pop>
</div> </div>
<div class="p_device ktp_yao_out_wrap" @click="getInfo(yaossxArr[1])"> <div class="p_device ktp_yao_out_wrap" v-for="el in yaossxArr.slice(1,2)" :key="el.pointName" @click="getInfo1(el)">
<div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="i"> <div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="'bktpyao' + i">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(yaossxArr[1].stat) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(el.stat) - 1] + '.png')">
<device-pop <device-pop
:pkId="pkId" :pkId="pkId"
type="yaossx" type="yaossx"
:data="yaossxArr[1]" :data="el"
></device-pop> ></device-pop>
</div> </div>
</div> </div>
@@ -143,78 +174,97 @@
</div> </div>
<div class="m_block_8"> <div class="m_block_8">
<div class="p_device rgcdw_wrap"> <div class="p_device rgcdw_wrap">
<div class="rgcdw" v-for="(e, i) in [1,1,1,1,1]" :key="i"> <div class="rgcdw" v-for="(e, i) in [1,1,1,1,1]" :key="'rgcdw' + i">
<img class="device_img" src="../../../images/device/hjktp.png" alt=""> <img class="device_img" src="../../../images/device/hjktp.png" alt="">
</div> </div>
</div> </div>
<div class="p_device cdw_wrap cdw_wrap_1"> <div class="p_device cdw_wrap cdw_wrap_1">
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i"> <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'cdwa' + i">
<img class="device_img" src="../../../images/device/hjktp.png" alt=""> <img class="device_img" src="../../../images/device/hjktp.png" alt="">
</div> </div>
</div> </div>
<div class="p_device cdw_wrap cdw_wrap_2"> <div class="p_device cdw_wrap cdw_wrap_2">
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i"> <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'cdwb' + i">
<img class="device_img" src="../../../images/device/hjktp.png" alt=""> <img class="device_img" src="../../../images/device/hjktp.png" alt="">
</div> </div>
</div> </div>
<div class="p_device cdw_wrap cdw_wrap_3"> <div class="p_device cdw_wrap cdw_wrap_3">
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i"> <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="'cdwc' + i">
<img class="device_img" src="../../../images/device/hjktp.png" alt=""> <img class="device_img" src="../../../images/device/hjktp.png" alt="">
</div> </div>
</div> </div>
<div class="p_device cdw_wrap cdw_wrap_4"> <div class="p_device cdw_wrap cdw_wrap_4">
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i"> <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="'cdwd' + i">
<img class="device_img" src="../../../images/device/hjktp.png" alt=""> <img class="device_img" src="../../../images/device/hjktp.png" alt="">
</div> </div>
</div> </div>
<div class="p_device cdw_wrap cdw_wrap_5"> <div class="p_device cdw_wrap cdw_wrap_5">
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i"> <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="'cdwe' + i">
<img class="device_img" src="../../../images/device/hjktp.png" alt=""> <img class="device_img" src="../../../images/device/hjktp.png" alt="">
</div> </div>
</div> </div>
<div class="p_device cdw_wrap cdw_wrap_6"> <div class="p_device cdw_wrap cdw_wrap_6">
<div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="i"> <div class="cdw" v-for="(e, i) in [1,1,1,1,1,1,1,1]" :key="'cdwf' + i">
<img class="device_img" src="../../../images/device/hjktp.png" alt=""> <img class="device_img" src="../../../images/device/hjktp.png" alt="">
</div> </div>
</div> </div>
</div> </div>
<div class="m_block m_block_3"> <div class="m_block m_block_3">
<div class="m_wraper"> <div class="m_wraper">
<div class="yj_block" v-for="(e, i) in [1,1]" :key="i" > <div class="yj_block" v-for="(el, index) in [1,1]" :key="'yj630' + index" >
<div class="p_device weilan_630_wrap"> <div class="p_device weilan_630_wrap">
<img class="device_img" src="../../../images/device/wl.png" alt=""> <img class="device_img" src="../../../images/device/wl.png" alt="">
</div> </div>
<div class="p_device flexwrap slw_630_wrap"> <div class="p_device flexwrap slw_630_wrap">
<div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="i"> <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="'slw630a' + i">
<img class="device_img" src="../../../images/device/lz_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
</div> </div>
</div> </div>
<div class="p_device flexwrap ktp_630_wrap"> <div class="p_device flexwrap ktp_630_wrap">
<template v-if="i === 0"> <div v-show="index === 0" class="ktp_630" v-for="(e,i) in StackingPositionList.slice(0,4)" :key="e.device_code" :class="'ktp_630_' + (i + 1)" @click="getInfo2(e)">
<div class="ktp_630" v-for="e in StackingPositionList.slice(0,4)" :key="e.device_code"> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')"> <device-pop
</div> :pkId="pkId"
</template> type="yjmdw"
<template v-if="i === 1"> :data="e"
<div class="ktp_630" v-for="e in StackingPositionList.slice(4,8)" :key="e.device_code"> ></device-pop>
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')"> </div>
</div> <div v-show="index === 1" class="ktp_630" v-for="(e,i) in StackingPositionList.slice(4,8)" :key="e.device_code" :class="'ktp_630_' + (i + 1)" @click="getInfo2(e)">
</template> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="yjmdw"
:data="e"
></device-pop>
</div>
</div> </div>
<div class="p_device yj_630_wrap"> <div class="p_device yj_630_wrap">
<template v-if="i === 0"> <div v-show="index === 0" class="yj_630" v-for="e in PressMachineList.slice(0,2)" :key="e.device_code" @click="getInfo2(e)">
<div class="yj_630" v-for="e in PressMachineList.slice(0,2)" :key="e.device_code"> <img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')"> <p>{{ e.device_code }}</p>
<device-pop
:pkId="pkId"
type="yj"
:data="e"
></device-pop>
</div>
<div v-show="index === 1" class="yj_630" v-for="e in PressMachineList.slice(2,4)" :key="e.device_code" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<p>{{ e.device_code }}</p>
<device-pop
:pkId="pkId"
type="yj"
:data="e"
></device-pop>
</div> </div>
</template>
<template v-if="i === 1">
<div class="yj_630" v-for="e in PressMachineList.slice(2,4)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
</div>
</template>
</div> </div>
<div class="p_device robot_630_wrap" :class="{'rotate_1': Number(ManipulatorInfoList[3+i].device_status) === 1}"> <div class="p_device robot_630_wrap" v-for="e in ManipulatorInfoList.slice(3+index,4+index)" :key="e.device_code" :class="{'rotate_1': Number(e.device_status) === 1}" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[3+i].device_status) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="jxs"
:data="e"
></device-pop>
</div> </div>
</div> </div>
</div> </div>
@@ -226,71 +276,103 @@
<img class="device_img" src="../../../images/device/wl.png" alt=""> <img class="device_img" src="../../../images/device/wl.png" alt="">
</div> </div>
<div class="p_device flexwrap slw_630_wrap"> <div class="p_device flexwrap slw_630_wrap">
<div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="i"> <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="'slw630b' + i">
<img class="device_img" src="../../../images/device/lz_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
</div> </div>
</div> </div>
<div class="p_device flexwrap ktp_630_wrap"> <div class="p_device flexwrap ktp_630_wrap">
<div class="ktp_630" v-for="e in StackingPositionList.slice(8,12)" :key="e.device_code"> <div class="ktp_630" v-for="(e, i) in StackingPositionList.slice(8,12)" :key="e.device_code" :class="'ktp_630_' + (i + 1)" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="yjmdw"
:data="e"
></device-pop>
</div> </div>
</div> </div>
<div class="p_device yj_630_wrap"> <div class="p_device yj_630_wrap">
<div class="yj_630" v-for="e in PressMachineList.slice(4,6)" :key="e.device_code"> <div class="yj_630" v-for="e in PressMachineList.slice(4,6)" :key="e.device_code" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<p>{{ e.device_code }}</p>
<device-pop
:pkId="pkId"
type="yj"
:data="e"
></device-pop>
</div> </div>
</div> </div>
<div class="p_device robot_630_wrap" :class="{'rotate_1': Number(ManipulatorInfoList[5].device_status) === 1}"> <div class="p_device robot_630_wrap" v-for="e in ManipulatorInfoList.slice(5,6)" :key="e.device_code" :class="{'rotate_1': Number(e.device_status) === 1}" @click="getInfo2(e)">
<img src="../../../images/device/robot_green.png" alt=""> <img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[5].device_status) - 1] + '.png')"> <device-pop
:pkId="pkId"
type="jxs"
:data="e"
></device-pop>
</div> </div>
</div> </div>
<div class="yj_block yj_1250_block" v-for="(e, i) in [1, 1]" :key="i"> <div class="yj_block yj_1250_block" v-for="(e, index) in [1, 1]" :key="'yj1250' + index">
<div class="p_device weilan_630_wrap"> <div class="p_device weilan_630_wrap">
<img class="device_img" src="../../../images/device/wl.png" alt=""> <img class="device_img" src="../../../images/device/wl.png" alt="">
</div> </div>
<div class="p_device flexwrap slw_630_wrap slw_1250_wrap"> <div class="p_device flexwrap slw_630_wrap slw_1250_wrap">
<div class="slw_630" v-for="(e, i) in [1,1]" :key="i"> <div class="slw_630" v-for="(e, i) in [1,1]" :key="'slw630c' + i">
<img class="device_img" src="../../../images/device/lz_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
</div> </div>
</div> </div>
<div class="p_device flexwrap ktp_630_wrap"> <div class="p_device flexwrap ktp_630_wrap">
<template v-if="i === 0"> <div v-show="index === 0" class="ktp_630 ktp_yyj" v-for="(e, i) in StackingPositionList.slice(12,14)" :key="e.device_code" :class="'ktp_yyj_'+(i+1)" @click="getInfo2(e)">
<div class="ktp_630 ktp_yyj" v-for="e in StackingPositionList.slice(12,14)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/ktp_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div>
</template>
<template v-if="i === 1">
<div class="ktp_630 ktp_yyj" v-for="e in StackingPositionList.slice(14,16)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/ktp_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/ktp_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="yjmdw"
:data="e"
></device-pop>
</div>
<div v-show="index === 1" class="ktp_630 ktp_yyj" v-for="(e, i) in StackingPositionList.slice(14,16)" :key="e.device_code" :class="'ktp_yyj_'+(i+1)" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/ktp_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="yjmdw"
:data="e"
></device-pop>
</div> </div>
</template>
</div> </div>
<div class="p_device yj_630_wrap"> <div class="p_device yj_630_wrap">
<div class="yj_630 yj_1250"> <div class="yj_630 yj_1250" v-for="e in PressMachineList.slice(6+index,7+index)" :key="e.device_code" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(PressMachineList[6+i].device_status) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<p>{{ e.device_code }}</p>
<device-pop
:pkId="pkId"
type="yj"
:data="e"
></device-pop>
</div> </div>
</div> </div>
<div class="p_device robot_630_wrap" :class="{'rotate_5': Number(ManipulatorInfoList[6+i].device_status) === 1}"> <div class="p_device robot_630_wrap" v-for="e in ManipulatorInfoList.slice(6+index,7+index)" :key="e.device_code" :class="{'rotate_5': Number(e.device_status) === 1}" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[6+i].device_status) - 1] + '.png')"> <img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="jxs"
:data="e"
></device-pop>
</div> </div>
</div> </div>
<div class="yj_block yyj_block" v-for="(e, i) in [1, 1]" :key="i"> <div class="yj_block yyj_block" v-for="(e, i) in [1, 1]" :key="'yyjblock' + i">
<div class="p_device weilan_630_wrap"> <div class="p_device weilan_630_wrap">
<img class="device_img" src="../../../images/device/wl.png" alt=""> <img class="device_img" src="../../../images/device/wl.png" alt="">
</div> </div>
<div v-show="i === 0" class="p_device flexwrap slw_630_wrap slw_1250_wrap"> <div v-show="i === 0" class="p_device flexwrap slw_630_wrap slw_1250_wrap">
<div class="slw_630" v-for="(e, i) in [1,1]" :key="i"> <div class="slw_630" v-for="(e, i) in [1,1]" :key="'slw630d' + i">
<img class="device_img" src="../../../images/device/lz_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
</div> </div>
</div> </div>
<div v-show="i === 1" class="p_device flexwrap slw_630_wrap slw_yyj_wrap"> <div v-show="i === 1" class="p_device flexwrap slw_630_wrap slw_yyj_wrap">
<div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="i"> <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="'slw630e' + i">
<img class="device_img" src="../../../images/device/lz_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
</div> </div>
</div> </div>
<div class="p_device flexwrap ktp_630_wrap" style="opacity:0.1"> <div class="p_device flexwrap ktp_630_wrap" style="opacity:0.1">
<div class="ktp_630 ktp_yyj" v-for="(e, i) in [1,1]" :key="i"> <div class="ktp_630 ktp_yyj" v-for="(e, i) in [1,1]" :key="'ktpyyj' + i">
<img class="device_img" src="../../../images/device/ktp_gray.png" alt=""> <img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
</div> </div>
</div> </div>
@@ -307,7 +389,7 @@
</div> </div>
</div> </div>
<div class="m_block m_block_5"> <div class="m_block m_block_5">
<div class="p_device agv_1" v-for="(e, i) in [1,1]" :key="i" :class="'agv_' + (i+1)"> <div class="p_device agv_1" v-for="(e, i) in [1,1]" :key="'agv' + i" :class="'agv_' + (i+1)">
<img src="../../../images/device/agv_green.png" alt=""> <img src="../../../images/device/agv_green.png" alt="">
</div> </div>
</div> </div>
@@ -315,16 +397,23 @@
<div class="m_wraper"> <div class="m_wraper">
<div class="lzhlj_wrap"> <div class="lzhlj_wrap">
<div class="lz_wrap"> <div class="lz_wrap">
<div class="lz" v-for="e in MixBlankingList.slice(0, 6)" :key="e.pointCode"> <div class="lz" v-for="e in MixBlankingList" :key="e.pointCode" @click="getInfo1(e)">
<img class="device_img" :src="require('../../../images/device/lz_hj_' + ['green', 'yellow', 'gray', 'red'][Number(e.pointStatus) - 1] + '.png')" alt=""> <img class="device_img" :src="require('../../../images/device/lz_hj_' + ['green', 'yellow', 'gray', 'red'][Number(e.pointStatus) - 1] + '.png')" alt="">
</div> <device-pop
<div class="lz" v-for="(e,i) in [1,1]" :key="i" style="opacity: 0.1"> :pkId="pkId"
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt=""> type="hljdjw"
:data="e"
></device-pop>
</div> </div>
</div> </div>
<div class="hlj_wrap"> <div class="hlj_wrap">
<div class="hlj" v-for="e in MixMachineList" :key="e.device_code"> <div class="hlj" v-for="e in MixMachineList" :key="e.device_code" @click="getInfo2(e)">
<img class="device_img" :src="require('../../../images/device/hlj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')" alt=""> <img class="device_img" :src="require('../../../images/device/hlj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')" alt="">
<device-pop
:pkId="pkId"
type="hlj"
:data="e"
></device-pop>
</div> </div>
</div> </div>
</div> </div>
@@ -340,27 +429,27 @@
</div> </div>
<div class="m_block_7"> <div class="m_block_7">
<div class="p_device klw_wraper_1"> <div class="p_device klw_wraper_1">
<div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i"> <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwa' + i">
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
</div> </div>
</div> </div>
<div class="p_device klw_wraper_2"> <div class="p_device klw_wraper_2">
<div class="klw" v-for="(e, i) in [1,1,1,1]" :key="i"> <div class="klw" v-for="(e, i) in [1,1,1,1]" :key="'klwb' + i">
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
</div> </div>
</div> </div>
<div class="p_device klw_wraper_3"> <div class="p_device klw_wraper_3">
<div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i"> <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwc' + i">
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
</div> </div>
</div> </div>
<div class="p_device klw_wraper_4"> <div class="p_device klw_wraper_4">
<div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i"> <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwd' + i">
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
</div> </div>
</div> </div>
<div class="p_device klw_wraper_5"> <div class="p_device klw_wraper_5">
<div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="i"> <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwe' + i">
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
</div> </div>
</div> </div>
@@ -371,8 +460,8 @@
<script> <script>
// import TCanvas from './canvas.vue' // import TCanvas from './canvas.vue'
import DevicePop from './devicepop.vue' import DevicePop from './devicepop.vue'
// import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js' import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/mork2.js' // import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/mork2.js'
export default { export default {
name: 'workshop', name: 'workshop',
components: { components: {
@@ -431,8 +520,11 @@ export default {
let res = await kilnDetail() let res = await kilnDetail()
this.yaoObj = res this.yaoObj = res
}, },
getInfo (e) { getInfo1 (e) {
this.pkId = this.pkId === e.pointName ? '' : e.pointName this.pkId = this.pkId === e.pointName ? '' : e.pointName
},
getInfo2 (e) {
this.pkId = this.pkId === e.device_code ? '' : e.device_code
} }
} }
} }
@@ -609,7 +701,7 @@ export default {
width 5.5% width 5.5%
top 10% top 10%
left: 31%; left: 31%;
z-index: 100; z-index: 99
.ggtj_wrap .ggtj_wrap
display flex display flex
justify-content flex-start justify-content flex-start
@@ -704,28 +796,28 @@ export default {
.ktp_630 .ktp_630
position absolute position absolute
width 19px width 19px
&:nth-child(1) .ktp_630_1
left 0 left 0
bottom 0 bottom 0
&:nth-child(2) .ktp_630_2
left 0 left 0
top 0 top 0
&:nth-child(3) .ktp_630_3
right 0 right 0
bottom 0 bottom 0
&:nth-child(4) .ktp_630_4
right 0 right 0
top 0 top 0
.ktp_yyj .ktp_yyj
width 26.78px width 26.78px
&:nth-child(1) .ktp_yyj_1
left 0 left 0
top 0 top 0
bottom auto bottom auto
&:nth-child(2) .ktp_yyj_2
left auto left auto
right 0 right 0
top 0 top 0
.yj_630_wrap .yj_630_wrap
width 100% width 100%
height 20% height 20%
@@ -736,6 +828,16 @@ export default {
height 100% height 100%
img img
height 100% height 100%
p
position absolute
width: 100%;
height: 100%;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #333;
.yj_1250 .yj_1250
width 63% width 63%
.yyj_wrap .yyj_wrap
@@ -800,6 +902,7 @@ export default {
justify-content space-between justify-content space-between
align-items center align-items center
.lz .lz
position relative
width 40px width 40px
height 26.31px height 26.31px
img img
@@ -807,6 +910,7 @@ export default {
left 5px left 5px
width 30px width 30px
.hlj .hlj
position relative
width 40px width 40px
height 30.3px height 30.3px
// 混料机end // 混料机end

2
src/style/reset.css
View File

@@ -72,7 +72,7 @@ html, body {
width: 1920px; width: 1920px;
height: 100%; height: 100%;
min-height: 1080px; min-height: 1080px;
height: 1200px; /* height: 1200px; */
/* height: 1080px; 看板 */ /* height: 1080px; 看板 */
/* height: 1200px; 大屏 */ /* height: 1200px; 大屏 */
} }