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-06 18:52:05 +08:00
parent b6933988fe
commit 43c8dd0971
5 changed files with 389 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/config/getData2.js
View File

@@ -3879,4 +3879,11 @@ export const sortingAndPackaging = () => post('api/cockpit/sortingAndPackaging',
*/ */
export const homepageDataLeft = () => post('api/dashboard/homepageDataLeft', {}) export const homepageDataLeft = () => post('api/dashboard/homepageDataLeft', {})
export const homepageDataRight = () => post('api/dashboard/homepageDataRight', {}) export const homepageDataRight = () => post('api/dashboard/homepageDataRight', {})
// 大屏-中间设备运行情况
export const deviceCondition = () => post('api/cockpit/deviceCondition', {}) export const deviceCondition = () => post('api/cockpit/deviceCondition', {})
// 出、入窑输送线弹窗
export const inOutKilnDetail = () => post('api/cockpit/inOutKilnDetail', {})
// 窑弹出框
export const kilnDetail = () => post('api/cockpit/kilnDetail', {})
// 大屏-两侧图表
export const screenTableData = () => post('api/cockpit/screenTableData', {})

159
src/config/mork2.js
View File

@@ -615,6 +615,24 @@ export const deviceCondition = () => {
'error': 0, 'error': 0,
'encoder_qty': 100, 'encoder_qty': 100,
'barcode': 10010 'barcode': 10010
},
{
'mode': 3,
'move': 2,
'color_status': 2,
'device_code': 'FJ01MDW01',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
},
{
'mode': 3,
'move': 2,
'color_status': 2,
'device_code': 'FJ01MDW02',
'error': 0,
'encoder_qty': 100,
'barcode': 10010
} }
], ],
'PressMachineList': [ 'PressMachineList': [
@@ -906,3 +924,144 @@ export const deviceCondition = () => {
} }
return res return res
} }
/**
* 出、入窑输送线弹窗
*/
export const inOutKilnDetail = () => {
let res = [
{
'stat': '1',
'pointName': '入窑输送线',
'workTime': '3.5',
'palletNum': '0',
'materialNum': '25000',
'deliveredPalletNum': '0',
'deliveredMaterialNum': null
},
{
'stat': '1',
'pointName': '出窑输送线',
'workTime': '3.5',
'palletNum': '0',
'materialNum': '25000',
'deliveredPalletNum': '0',
'deliveredMaterialNum': '25000'
}
]
return res
}
/**
* 窑弹出框
*/
export const kilnDetail = () => {
let res = {
'pointName': '窑1',
'workTime': 'string',
'palletNum': 'string',
'materialNum': 'string',
'produceNum': 'string',
'materialInfos': [
'string'
]
}
return res
}
/**
* 大屏-两侧图表
*/
export const screenTableData = () => {
let res = {
'deviceErrorRecordList': [
{
'deviceCode': 'YJ06',
'deviceName': '压机06',
'errorInfo': '故障',
'errorTime': '2024-02-28 13:02:44'
},
{
'deviceCode': 'YJ01',
'deviceName': '压机01',
'errorInfo': '故障',
'errorTime': '2024-02-28 13:02:44'
},
{
'deviceCode': 'YJ02',
'deviceName': '压机02',
'errorInfo': '故障',
'errorTime': '2024-02-28 13:02:44'
},
{
'deviceCode': 'YJ03',
'deviceName': '压机03',
'errorInfo': '故障',
'errorTime': '2024-02-28 13:02:44'
},
{
'deviceCode': 'YJ03',
'deviceName': '压机03',
'errorInfo': '故障',
'errorTime': '2024-02-28 13:02:44'
}
],
'mixingList': [
{
'materialName': '004',
'planQty': '0',
'realQty': '0'
}
],
'historyList': [
{
'produceDate': '03-06',
'suppressedNum': '800',
'finishedNum': '0'
}
],
'deviceErrorList': [
{
'deviceName': '压机03',
'errorNum': '2'
},
{
'deviceName': '压机06',
'errorNum': '1'
},
{
'deviceName': '压机01',
'errorNum': '1'
},
{
'deviceName': '压机02',
'errorNum': '1'
}
],
'deviceRunStat': {
'total': 240,
'runNum': 0,
'unProducedNum': 240,
'freeNum': 0,
'errorNum': 0
},
'productList': [
{
'materialName': '001',
'requiredNum': '1000',
'suppressedNum': '378',
'finishedNum': '0'
},
{
'materialName': '003',
'requiredNum': '1000',
'suppressedNum': '756',
'finishedNum': '0'
},
{
'materialName': '004',
'requiredNum': '6000',
'suppressedNum': '7846',
'finishedNum': '0'
}
]
}
return res
}

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

@@ -1,42 +1,63 @@
<template> <template>
<div v-if="pkId === data.equipment" class="popup_wraper" :class="{'popup_wraper_down': direction === 'down'}"> <div v-if="pkId === data.pointName" 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 v-show="data.hasOwnProperty('equipmentName') === true || data.hasOwnProperty('statusChinese') === true" class="pop_header"> <div class="pop_header">
<div v-show="data.hasOwnProperty('equipmentName') === true" class="pop_name">{{data.equipmentName}}</div> <div class="pop_name">{{data.pointName}}</div>
<div v-show="data.hasOwnProperty('statusChinese') === true" class="pop_status"> <div v-if="type === 'yaossx'" class="pop_status">
<div class="pop_status_dot" :class="['green', 'yellow', 'gray', 'red'][Number(data.status) - 1]"></div> <div class="pop_status_dot" :class="['green', 'yellow', 'gray', 'red'][Number(data.stat) - 1]"></div>
<div class="pop_status_text fgray">{{ data.statusChinese }}</div> <div class="pop_status_text fgray">{{ ['运行', '暂停', '停机', '故障'][Number(data.stat) - 1] }}</div>
</div> </div>
</div> </div>
<div class="pop_content"> <div v-if="type === 'yaossx'" class="pop_content">
<div class="popup_item" v-for="e in data.data" :key="e.key"> <div class="popup_item">
<div class="popup_label">{{ e.key }}</div> <div class="popup_label">当日已输送托盘数</div>
<div class="popup_val">{{ e.value }}</div> <div class="popup_val">{{ data.deliveredPalletNum }}</div>
</div> </div>
<div v-if="data.hasOwnProperty('table') === true" class="popup_table_wrap"> <div class="popup_item">
<table v-if="data.table.length > 0" class="popup_table"> <div class="popup_label">当日已输送数量</div>
<tr> <div class="popup_val">{{ data.deliveredMaterialNum }}</div>
<th width="40%">本日生产</th> </div>
<th width="30%">客户</th> <div class="popup_item">
<th width="30%" v-if="type === 'hlj'">已生产（千克）</th> <div class="popup_label">已工作时间</div>
<th width="30%" v-else>已生产（块）</th> <div class="popup_val">{{ data.workTime }}</div>
</tr> </div>
<tr v-for="(e, i) in data.table" :key="i"> <div class="popup_item">
<td width="40%">{{ e.material_name }}</td> <div class="popup_label">当前托盘数</div>
<td width="30%">{{ e.kh }}</td> <div class="popup_val">{{ data.palletNum }}</div>
<td width="30%" v-if="type === 'hlj'">{{ e.weight }}</td> </div>
<td width="30%" v-else>{{ e.qty }}</td> <div class="popup_item">
</tr> <div class="popup_label">当前物料数量</div>
</table> <div class="popup_val">{{ data.materialNum }}</div>
</div>
</div>
<div v-if="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> </div>
</div> </div>
</div> </div>
<!-- <div class="iconfont icon-guanbi close_btn" @click="closePop"></div> -->
</div> </div>
</template> </template>
@@ -44,15 +65,12 @@
export default { export default {
name: 'devicepop', name: 'devicepop',
props: { props: {
type: String,
pkId: String, pkId: String,
type: String,
data: Object, data: Object,
direction: String direction: String
}, },
methods: { methods: {
closePop () {
this.$emit('closePop')
}
} }
} }
</script> </script>
@@ -129,10 +147,10 @@ export default {
margin 0 7px 5px 7px margin 0 7px 5px 7px
padding 0 5px 0 5px padding 0 5px 0 5px
.popup_label .popup_label
width 80px width 120px
_font(12px, 36px, #fff,,left) _font(12px, 36px, #fff,,left)
.popup_val .popup_val
_wh(calc(100% - 80px), 100%) _wh(calc(100% - 120px), 100%)
_font(12px, 15px, #0ff,,left) _font(12px, 15px, #0ff,,left)
word-break break-all word-break break-all
_fj(center) _fj(center)

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

@@ -100,16 +100,17 @@
<li>报警时间</li> <li>报警时间</li>
</ul> </ul>
<div class="scroll_container_1"> <div class="scroll_container_1">
<vue-seamless-scroll :data="deviceWorkOrder" :class-option="defaultOption1"> <vue-seamless-scroll :data="deviceErrorRecordList" :class-option="defaultOption1">
<ul class="scroll-ul_1"> <ul class="scroll-ul_1">
<li v-for="(e, i) in deviceWorkOrder" :key="i"> <li v-for="(e, i) in deviceErrorRecordList" :key="i">
<div class="scroll-ul_1_div">{{e.deviceCode}}</div> <div class="scroll-ul_1_div">{{e.deviceCode}}</div>
<div class="scroll-ul_1_div">{{e.deviceName}}</div> <div class="scroll-ul_1_div">{{e.deviceName}}</div>
<div class="scroll-ul_1_div"> <!-- <div class="scroll-ul_1_div">
<span class="state" :class="'state_' + e.status"></span> <span class="state" :class="'state_' + e.status"></span>
<p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p> <p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
</div> </div> -->
<div class="scroll-ul_1_div">{{e.startTime}}</div> <div class="scroll-ul_1_div">{{e.errorInfo}}</div>
<div class="scroll-ul_1_div">{{e.errorTime}}</div>
</li> </li>
</ul> </ul>
</vue-seamless-scroll> </vue-seamless-scroll>
@@ -124,7 +125,7 @@
</template> </template>
<script> <script>
import { homepageDataLeft, homepageDataRight } from '@js/mork2.js' import { homepageDataLeft, homepageDataRight, screenTableData } from '@js/mork2.js'
// import { homepageDataLeft } from '@js/getData2.js' // import { homepageDataLeft } 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'
@@ -147,6 +148,9 @@ export default {
interTime: this.$store.getters.setTime, interTime: this.$store.getters.setTime,
timer: null, timer: null,
expand: false, expand: false,
deviceErrorRecordList: [], // 设备报警信息
mixingList: [], // 当日混料
historyList: [], // 历史分析
todayMixProduction: {}, // 今日生产混料 todayMixProduction: {}, // 今日生产混料
todayPressProduction: {}, // 今日生产成型 todayPressProduction: {}, // 今日生产成型
todaySortProduction: {}, // 今日生产包装 todaySortProduction: {}, // 今日生产包装
@@ -169,7 +173,6 @@ export default {
chart9Timer: null, chart9Timer: null,
capacityRate: [], // 设备产能利用 capacityRate: [], // 设备产能利用
stateStatistics: {}, // 设备运行统计 stateStatistics: {}, // 设备运行统计
deviceWorkOrder: [], // 设备工单生产
areaDeviceStatus: [{process: '混料'}, {process: '压制'}, {process: '干燥'}, {process: '包装'}], // 工序设备状态 areaDeviceStatus: [{process: '混料'}, {process: '压制'}, {process: '干燥'}, {process: '包装'}], // 工序设备状态
top10Of30Days: [] // 30天故障top10 top10Of30Days: [] // 30天故障top10
} }
@@ -189,8 +192,9 @@ export default {
} }
}, },
created () { created () {
// this._homepageDataLeft() this._homepageDataLeft()
// this._homepageDataRight() this._homepageDataRight()
this._screenTableData()
// this.refresh() // this.refresh()
}, },
beforeDestroy () { beforeDestroy () {
@@ -207,6 +211,7 @@ export default {
refresh () { refresh () {
this.timer = setInterval(() => { this.timer = setInterval(() => {
this._homepageDataLeft() this._homepageDataLeft()
this._screenTableData()
}, this.interTime) }, this.interTime)
}, },
async _homepageDataLeft () { async _homepageDataLeft () {
@@ -290,6 +295,18 @@ export default {
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,
@@ -298,10 +315,10 @@ export default {
let barName = [] let barName = []
let barData1 = [] let barData1 = []
let barData2 = [] let barData2 = []
this.todayMix.map(el => { this.mixingList.map(el => {
barName.push(el.materialCode) barName.push(el.materialName)
barData1.push(el.plan) barData1.push(el.planQty)
barData2.push(el.real) barData2.push(el.realQty)
}) })
let option = { let option = {
grid: { grid: {
@@ -708,7 +725,7 @@ export default {
itemGap: 30, itemGap: 30,
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
data: [{name: '压制', itemStyle: {color: '#67D470'}}, {name: '成品', itemStyle: {color: '#1980EA'}}] data: [{name: '已压制', itemStyle: {color: '#67D470'}}, {name: '需生产', itemStyle: {color: '#1980EA'}}]
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@@ -760,7 +777,7 @@ export default {
}, },
series: [ series: [
{ {
name: '压制', name: '已压制',
type: 'line', type: 'line',
symbol: 'image://' + img.imgSrc1, symbol: 'image://' + img.imgSrc1,
symbolSize: [10, 10], symbolSize: [10, 10],
@@ -788,7 +805,7 @@ export default {
data: barData1 data: barData1
}, },
{ {
name: '成品', name: '需生产',
type: 'line', type: 'line',
symbol: 'image://' + img.imgSrc2, symbol: 'image://' + img.imgSrc2,
symbolSize: [10, 10], symbolSize: [10, 10],

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

@@ -30,21 +30,24 @@
<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 class="p_device ktp_cmd_wrap"> <div v-if="i === 1" class="p_device ktp_cmd_wrap">
<div class="ktp_cmd" v-for="(e, i) in [1,2]" :key="i"> <div class="ktp_cmd" v-for="e in SortAndPalletizingList.slice(0,2)" :key="e.device_code">
<img class="device_img" src="../../../images/device/ktpv_yellow.png" alt=""> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div> </div>
</div> </div>
<div class="p_device ktp_cmd_wrap cmdssj_wrap"> <div v-if="i === 1" class="p_device ktp_cmd_wrap cmdssj_wrap">
<div class="ktp_cmd" v-for="(e, i) in [1,2]" :key="i"> <div class="ktp_cmd" v-for="(e,i) in SortAndPalletizingList.slice(2,4)" :key="e.device_code">
<img class="device_img" :class="{'rotatex180': i === 1}" src="../../../images/device/cmdssj_gray.png" alt=""> <img class="device_img" :class="{'rotatex180': i === 1}" :src="require('../../../images/device/cmdssj_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div> </div>
</div> </div>
<div class="p_device robot_cmd_wrap robot_cmd_wrap_1 rotate_3"> <div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_1" :class="{'rotate_3': Number(ManipulatorInfoList[0].device_status) === 1}">
<img class="device_img" src="../../../images/device/robot_cmd_green.png" alt=""> <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[0].device_status) - 1] + '.png')">
</div> </div>
<div class="p_device robot_cmd_wrap robot_cmd_wrap_2 rotate_4"> <div v-show="i === 0" class="p_device robot_cmd_wrap robot_cmd_wrap_2" :class="{'rotate_4': Number(ManipulatorInfoList[2].device_status) === 1}">
<img class="device_img" src="../../../images/device/robot_cmd_green.png" alt=""> <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[2].device_status) - 1] + '.png')">
</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}">
<img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[1].device_status) - 1] + '.png')">
</div> </div>
</div> </div>
<div class="rgv_line_wrap"> <div class="rgv_line_wrap">
@@ -89,18 +92,26 @@
</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)"> <div class="yao_wrap" v-for="(e, i) in [1,1]" :key="i" :class="'yao_' + (i + 1)" @click="getInfo(yaoObj)">
<div class="yao_layer3"></div> <div class="yao_layer3"></div>
<div class="yao_layer1 yao_layer1_1 yao_layer1_2"></div> <div class="yao_layer1 yao_layer1_1"></div>
<div class="yao_layer2 yao_layer2_1 yao_layer2_2"><p>{{i+1}}号窑</p></div> <div class="yao_layer2 yao_layer2_1">
<p>{{i === 0 ? '进窑' : '出窑'}}</p>
</div>
<device-pop
v-if="i === 0"
:pkId="pkId"
type="yao"
:data="yaoObj"
></device-pop>
</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]" :key="i" :class="'jyw' + (i+1)"> <div class="p_device" v-for="(e, i) in [1,1,1,1]" :key="i" :class="'jyw' + (i+1)">
<img class="device_img" src="../../../images/device/ktpv_green.png" alt=""> <img class="device_img" src="../../../images/device/ktpv_gray.png" alt="">
</div> </div>
</div> </div>
<div class="p_device dpw_wrap"> <div class="p_device dpw_wrap">
<img class="device_img" src="../../../images/device/ktp_green.png" alt=""> <img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
</div> </div>
<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="">
@@ -108,14 +119,24 @@
<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="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"> <div class="p_device ktp_yao_enter_wrap" @click="getInfo(yaossxArr[0])">
<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="i">
<img class="device_img" src="../../../images/device/ktpv_green.png" alt=""> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(yaossxArr[0].stat) - 1] + '.png')">
</div> </div>
<device-pop
:pkId="pkId"
type="yaossx"
:data="yaossxArr[0]"
></device-pop>
</div> </div>
<div class="p_device ktp_yao_out_wrap"> <div class="p_device ktp_yao_out_wrap" @click="getInfo(yaossxArr[1])">
<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="i">
<img class="device_img" src="../../../images/device/ktpv_green.png" alt=""> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(yaossxArr[1].stat) - 1] + '.png')">
<device-pop
:pkId="pkId"
type="yaossx"
:data="yaossxArr[1]"
></device-pop>
</div> </div>
</div> </div>
</div> </div>
@@ -165,24 +186,35 @@
</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="i">
<img class="device_img" src="../../../images/device/lz_green.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, i) in [1,1,1,1]" :key="i"> <template v-if="i === 0">
<img class="device_img" src="../../../images/device/ktpv_green.png" alt=""> <div class="ktp_630" v-for="e in StackingPositionList.slice(0,4)" :key="e.device_code">
</div> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div>
</template>
<template v-if="i === 1">
<div class="ktp_630" v-for="e in StackingPositionList.slice(4,8)" :key="e.device_code">
<img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div>
</template>
</div> </div>
<div class="p_device yj_630_wrap"> <div class="p_device yj_630_wrap">
<div v-show="i === 0" class="yj_630" v-for="e in PressMachineList.slice(0,2)" :key="e.device_code"> <template v-if="i === 0">
<img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')"> <div class="yj_630" v-for="e in PressMachineList.slice(0,2)" :key="e.device_code">
</div> <img class="device_img" :src="require('../../../images/device/yj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')">
<div v-show="i === 1" 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> </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 rotate_1"> <div class="p_device robot_630_wrap" :class="{'rotate_1': Number(ManipulatorInfoList[3+i].device_status) === 1}">
<img src="../../../images/device/robot_green.png" alt=""> <img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[3+i].device_status) - 1] + '.png')">
</div> </div>
</div> </div>
</div> </div>
@@ -195,12 +227,12 @@
</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="i">
<img class="device_img" src="../../../images/device/lz_green.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, i) in [1,1,1,1]" :key="i"> <div class="ktp_630" v-for="e in StackingPositionList.slice(8,12)" :key="e.device_code">
<img class="device_img" src="../../../images/device/ktpv_green.png" alt=""> <img class="device_img" :src="require('../../../images/device/ktpv_' + ['green', 'yellow', 'gray', 'red'][Number(e.color_status) - 1] + '.png')">
</div> </div>
</div> </div>
<div class="p_device yj_630_wrap"> <div class="p_device yj_630_wrap">
@@ -208,8 +240,9 @@
<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')">
</div> </div>
</div> </div>
<div class="p_device robot_630_wrap rotate_1"> <div class="p_device robot_630_wrap" :class="{'rotate_1': Number(ManipulatorInfoList[5].device_status) === 1}">
<img src="../../../images/device/robot_green.png" alt=""> <img src="../../../images/device/robot_green.png" alt="">
<img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[5].device_status) - 1] + '.png')">
</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, i) in [1, 1]" :key="i">
@@ -218,21 +251,28 @@
</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="i">
<img class="device_img" src="../../../images/device/lz_green.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 ktp_yyj"> <div class="p_device flexwrap ktp_630_wrap">
<div class="ktp_630" v-for="(e, i) in [1,1]" :key="i"> <template v-if="i === 0">
<img class="device_img" src="../../../images/device/ktp_green.png" alt=""> <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')">
</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">
<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(PressMachineList[6+i].device_status) - 1] + '.png')">
</div> </div>
</div> </div>
<div class="p_device robot_630_wrap rotate_5"> <div class="p_device robot_630_wrap" :class="{'rotate_5': Number(ManipulatorInfoList[6+i].device_status) === 1}">
<img src="../../../images/device/robot_green.png" alt=""> <img class="device_img" :src="require('../../../images/device/robot_' + ['green', 'yellow', 'gray', 'red'][Number(ManipulatorInfoList[6+i].device_status) - 1] + '.png')">
</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="i">
@@ -241,17 +281,17 @@
</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="i">
<img class="device_img" src="../../../images/device/lz_green.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="i">
<img class="device_img" src="../../../images/device/lz_green.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 ktp_yyj"> <div class="p_device flexwrap ktp_630_wrap" style="opacity:0.1">
<div class="ktp_630" v-for="(e, i) in [1,1]" :key="i"> <div class="ktp_630 ktp_yyj" v-for="(e, i) in [1,1]" :key="i">
<img class="device_img" src="../../../images/device/ktp_green.png" alt=""> <img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
</div> </div>
</div> </div>
<div class="p_device yj_630_wrap yyj_wrap"> <div class="p_device yj_630_wrap yyj_wrap">
@@ -260,8 +300,8 @@
<!-- <img class="device_img" :src="require('../../../images/device/yyj_' + ['green', 'yellow', 'gray', 'red'][Number(PressMachineList[8+i].device_status) - 1] + '.png')"> --> <!-- <img class="device_img" :src="require('../../../images/device/yyj_' + ['green', 'yellow', 'gray', 'red'][Number(PressMachineList[8+i].device_status) - 1] + '.png')"> -->
</div> </div>
</div> </div>
<div class="p_device robot_630_wrap rotate_5"> <div class="p_device robot_630_wrap" style="opacity:0.1">
<img src="../../../images/device/robot_green.png" alt=""> <img src="../../../images/device/robot_gray.png" alt="">
</div> </div>
</div> </div>
</div> </div>
@@ -276,13 +316,7 @@
<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.slice(0, 6)" :key="e.pointCode">
<img class="device_img" :src="require('../../../images/device/lz_hj_' + ['green', 'yellow', 'gray', 'red'][Number(e.pointStatus) - 1] + '.png')" alt="" @click="getInfo(e)"> <img class="device_img" :src="require('../../../images/device/lz_hj_' + ['green', 'yellow', 'gray', 'red'][Number(e.pointStatus) - 1] + '.png')" alt="">
<device-pop
type="hlz"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div> </div>
<div class="lz" v-for="(e,i) in [1,1]" :key="i" style="opacity: 0.1"> <div class="lz" v-for="(e,i) in [1,1]" :key="i" style="opacity: 0.1">
<img class="device_img" src="../../../images/device/lz_hj_gray.png" alt=""> <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
@@ -290,13 +324,7 @@
</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">
<img class="device_img" :src="require('../../../images/device/hlj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')" alt="" @click="getInfo(e)"> <img class="device_img" :src="require('../../../images/device/hlj_' + ['green', 'yellow', 'gray', 'red'][Number(e.device_status) - 1] + '.png')" alt="">
<device-pop
type="hlj"
:pkId="pkId"
:data="e"
@closePop="closePop"
></device-pop>
</div> </div>
</div> </div>
</div> </div>
@@ -343,8 +371,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} from '@js/getData2.js' // import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
import {deviceCondition} from '@js/mork2.js' import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/mork2.js'
export default { export default {
name: 'workshop', name: 'workshop',
components: { components: {
@@ -359,6 +387,10 @@ export default {
MixBlankingList: [], // 混碾机对接位 MixBlankingList: [], // 混碾机对接位
PressMachineList: [], // 压机 PressMachineList: [], // 压机
ManipulatorInfoList: [], // 压制、分拣机械手 ManipulatorInfoList: [], // 压制、分拣机械手
StackingPositionList: [], // 压制码垛位情况显示
SortAndPalletizingList: [], // 分拣拆码垛对接位
yaossxArr: [],
yaoObj: {},
pkId: '' pkId: ''
} }
}, },
@@ -374,23 +406,33 @@ export default {
methods: { methods: {
refresh () { refresh () {
this._deviceCondition() this._deviceCondition()
this._inOutKilnDetail()
this._kilnDetail()
this.timer3 = setInterval(() => { this.timer3 = setInterval(() => {
this._deviceCondition() this._deviceCondition()
this._inOutKilnDetail()
this._kilnDetail()
}, this.interTime) }, this.interTime)
}, },
async _deviceCondition () { async _deviceCondition () {
let res = await deviceCondition() let res = await deviceCondition()
console.log(res)
this.MixMachineList = [...res.MixMachineList] this.MixMachineList = [...res.MixMachineList]
this.MixBlankingList = [...res.MixBlankingList] this.MixBlankingList = [...res.MixBlankingList]
this.PressMachineList = [...res.PressMachineList] this.PressMachineList = [...res.PressMachineList]
this.ManipulatorInfoList = [...res.ManipulatorInfoList] this.ManipulatorInfoList = [...res.ManipulatorInfoList]
this.StackingPositionList = [...res.StackingPositionList]
this.SortAndPalletizingList = [...res.SortAndPalletizingList]
},
async _inOutKilnDetail () {
let res = await inOutKilnDetail()
this.yaossxArr = [...res]
},
async _kilnDetail () {
let res = await kilnDetail()
this.yaoObj = res
}, },
getInfo (e) { getInfo (e) {
this.pkId = this.pkId !== e.equipment ? e.equipment : '' this.pkId = this.pkId === e.pointName ? '' : e.pointName
},
closePop () {
this.pkId = ''
} }
} }
} }
@@ -478,6 +520,7 @@ export default {
top 5% top 5%
left 3% left 3%
.ktp_cmd .ktp_cmd
position relative
width 100% width 100%
display inline-flex display inline-flex
.cmdssj_wrap .cmdssj_wrap
@@ -654,19 +697,35 @@ export default {
.slw_630 .slw_630
width 100% width 100%
.ktp_630_wrap .ktp_630_wrap
width 94% width: 60%;
left 3% height: 32%;
left: 20%;
top 4% top 4%
.ktp_630 .ktp_630
display inline-flex position absolute
width 50% width 19px
margin-bottom 10px &:nth-child(1)
img left 0
width 19px bottom 0
margin 0 auto &:nth-child(2)
left 0
top 0
&:nth-child(3)
right 0
bottom 0
&:nth-child(4)
right 0
top 0
.ktp_yyj .ktp_yyj
img width 26.78px
width 26.78px &:nth-child(1)
left 0
top 0
bottom auto
&:nth-child(2)
left auto
right 0
top 0
.yj_630_wrap .yj_630_wrap
width 100% width 100%
height 20% height 20%
@@ -763,10 +822,10 @@ export default {
height 50px height 50px
.yao_1 .yao_1
left 15% left 15%
top 22% bottom 22%
.yao_2 .yao_2
left 15% left 15%
bottom 22% top 22%
.yao_layer3 .yao_layer3
position absolute position absolute
width: 10%; width: 10%;