<template>
|
<div class="container">
|
<div style="display: flex;">
|
<div class="vk_div" v-on:click="isModalVisible3 = true" v-for="items in plcList_one.section_fifteen"
|
:style="{ 'background-color': getBackgroundColor4(items.vk_state) }">
|
<div style="text-align: center;line-height: 50px;">VK4</div>
|
<el-dialog v-model="isModalVisible3" title="VK4">
|
<div>Name:
|
<el-input v-model="items.name" :disabled="true" style="width: 100px;"> </el-input>
|
</div>
|
<!--最大div-->
|
<div>
|
<!--第层列div-->
|
<div style="display: flex;">
|
<div style="width: 30%;">
|
<p>Power on
|
<div class="div_cl" v-if="items.power_on == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>ready operate
|
<div class="div_cl" v-if="items.ready_for_operate == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>ready auto start
|
<div class="div_cl" v-if="items.ready_for_Auto_start == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>VK fault
|
<div class="div_cl" v-if="items.vK_Fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>safety ok
|
<div class="div_cl" v-if="items.safety_OK == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
</div>
|
<div style="width: 30%;margin-left: 40px;">
|
<p>state jog input A1
|
<div class="div_cl" v-if="items.state_JOG_bag1 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state auto input A1
|
<div class="div_cl" v-if="items.state_AUTO_bag1 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>input A1 fault
|
<div class="div_cl" v-if="items.bag_in_1_Fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state jog input A2
|
<div class="div_cl" v-if="items.state_JOG_bag2 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state auto input A2
|
<div class="div_cl" v-if="items.state_AUTO_bag2 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>input A2 fault
|
<div class="div_cl" v-if="items.bag_in_2_Fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
|
<p>state jog output A1
|
<div class="div_cl" v-if="items.state_JOG_bag3 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state auto output A1
|
<div class="div_cl" v-if="items.state_AUTO_bag3 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>output A1 fault
|
<div class="div_cl" v-if="items.bag_out_1_Fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state jog output A2
|
<div class="div_cl" v-if="items.state_JOG_bag4 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state auto output A2
|
<div class="div_cl" v-if="items.state_AUTO_bag4 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>output A2 fault
|
<div class="div_cl" v-if="items.bag_out_2_Fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
</div>
|
<div style="width: 30%;margin-left: 40px;">
|
<p>safety door 1 closed
|
<div class="div_cl" v-if="items.safetydoor_1_closed == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>safety door 2 closed
|
<div class="div_cl" v-if="items.safetydoor_2_closed == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>safety door 3 closed
|
<div class="div_cl" v-if="items.safetydoor_3_closed == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>safety door 4 closed
|
<div class="div_cl" v-if="items.safetydoor_4_closed == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>safety door 5 closed
|
<div class="div_cl" v-if="items.safetydoor_5_closed == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>safety door 6 closed
|
<div class="div_cl" v-if="items.safetydoor_6_closed == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>safety door 7 closed
|
<div class="div_cl" v-if="items.safetydoor_7_closed == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>safety door 8 closed
|
<div class="div_cl" v-if="items.safetydoor_8_closed == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>safety door 9 closed
|
<div class="div_cl" v-if="items.safetydoor_9_closed == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
</div>
|
</div>
|
|
</div>
|
<!--最大div-->
|
</el-dialog>
|
</div>
|
<!--车间之上的辊道线-->
|
<div class="box" style="margin-left: 33px;">
|
|
<div v-for="items in plcList_one.section_four" class="box_sto"
|
:style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_part_process != '0'">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box_sto_dt">
|
<div class="quan_div" v-if="items.r_part_process != '0'">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
<!--车间之上的辊道线-->
|
</div>
|
|
<!--上车间-->
|
<div style="margin-top: -6px;margin-left: 58px;">
|
<div style="display: flex;">
|
<div style="margin-top: 67px;">
|
<!--左上角车间-->
|
<div v-for="(items, index) in plcList_one.section_five">
|
<div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 2"
|
v-on:click="open('Machine1')">
|
<div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }">
|
|
</div>
|
<div style="width: 100px;">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</el-tooltip>
|
</div>
|
<div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
|
</div>
|
</div>
|
<!--左上角车间-->
|
|
<!--车间中间车轮-->
|
<div style="display: flex;margin-left: -19px;margin-top: 5px;">
|
<!--靠左车轮-->
|
<div style="display: flex;">
|
<div v-for="items in plcList_one.section_six">
|
<el-tooltip class="item" effect="dark" placement="top">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box_stoy">
|
<div class="quan_div" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
<!--靠左车轮-->
|
|
<!--靠右车轮-->
|
<div style="display: flex;margin-left: 5px;">
|
<div v-for="items in plcList_one.section_seven">
|
<el-tooltip class="item" effect="dark" placement="top">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box_stoy">
|
<div class="quan_div" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
<!--靠右车轮-->
|
</div>
|
<!--左车间中间车轮-->
|
|
<!--左下角车间-->
|
<div v-for="(items, index) in plcList_one.section_five">
|
<div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 3" v-on:click="open('Machine2')">
|
<div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
|
<div style="width: 100px;">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
<div>c_Name:{{ items.c_Name }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</el-tooltip>
|
</div>
|
<div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }">
|
</div>
|
|
|
|
</div>
|
</div>
|
<!--左下角车间-->
|
|
</div>
|
<!--左车间-->
|
|
<!--上中下间辊道线和车轮圈-->
|
<div>
|
<!--上车间中间辊道-->
|
<div class="box" style="height: 102px;">
|
|
<div v-for="items in plcList_one.section_three" class="box_sto"
|
:style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box_sto_dt">
|
<div class="quan_div" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
<!--上车间中间辊道-->
|
|
<!--下车间中间辊道-->
|
<div class="box" style="height: 102px;margin-top: 45px;">
|
<div v-for="items in plcList_one.section_two" class="box_sto"
|
:style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box_sto_dt">
|
<div class="quan_div" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
<!--下车间中间辊道-->
|
</div>
|
<!--上车间辊道线-->
|
|
|
<!--右车间-->
|
<div>
|
<!--机械手-->
|
<div style="margin-left: 30px;margin-top: -35px;" v-for="items in plcList_one.section_ten"
|
v-on:click="isModalVisible2 = true" >
|
<div>
|
<div>
|
<el-tooltip class="item" effect="dark" placement="top">
|
<template #content v-if="items.r_wheel_SN !== '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box2_sto_yj" :style="{ 'background-color': getBackgroundColor4(items.g_gantry_state)}">
|
<img src="../../../assets/imgs/jxscl.png" style="width: 100%;"
|
v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/jxsk.png" style="width: 100%;" v-else>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
<el-dialog v-model="isModalVisible2" title="机械手">
|
<div>Name:
|
<el-input v-model="items.g_name" :disabled="true" style="width: 100px;">
|
</el-input>
|
</div>
|
|
<!--最大div-->
|
<div>
|
<!--第层列div-->
|
<div style="display: flex;">
|
<div style="width: 40%;">
|
<p>power on
|
<div class="div_cl" v-if="items.g_power_on == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>ready operate
|
<div class="div_cl" v-if="items.g_ready_for_operate == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>ready auto start
|
<div class="div_cl" v-if="items.g_ready_for_auto_start == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state JOG
|
<div class="div_cl" v-if="items.g_state_JOG == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state MDA
|
<div class="div_cl" v-if="items.g_state_MDA == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state AUTO
|
<div class="div_cl" v-if="items.g_state_AUTO == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>communication IO
|
<div class="div_cl" v-if="items.g_communication_IO == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
</div>
|
<div style="width: 40%;margin-left: 40px;">
|
<p>emergency stop
|
<div class="div_cl" v-if="items.g_emergency_stop_portal == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>drive fault
|
<div class="div_cl" v-if="items.g_drive_fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>portal fault
|
<div class="div_cl" v-if="items.g_portal_fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>program running
|
<div class="div_cl" v-if="items.g_programm_running == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
<!--机械手-->
|
<div style="height: 30px;"></div>
|
<!--右上角车间-->
|
<div v-for="(items, index) in plcList_one.section_five">
|
|
<div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 0" v-on:click="open('Machine3')">
|
<div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
|
<div style="width: 100px;">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</el-tooltip>
|
</div>
|
<div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
|
</div>
|
</div>
|
<!--右上角车间-->
|
|
|
<!--右车间中间车轮-->
|
<div style="display: flex;margin-top: 5px;">
|
|
<!--靠左车轮-->
|
<div style="display: flex;">
|
<div v-for="items in plcList_one.section_eight">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box_stoy">
|
<div class="quan_div" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
<!--靠左车轮-->
|
|
<!--靠右车轮-->
|
<div style="display: flex;margin-left: 5px;">
|
<div v-for="items in plcList_one.section_nine">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box_stoy">
|
<div class="quan_div" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
<!--靠右车轮-->
|
</div>
|
<!--右车间中间车轮-->
|
|
<!--右下角车间-->
|
<div v-for="(items, index) in plcList_one.section_five">
|
<div class="box2_sto_baox" style="margin-top: 5px;" v-if="index === 1" v-on:click="open('Machine4')">
|
<div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
|
<div style="width: 100px;">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="quan_div" style="margin: 0px auto;" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</el-tooltip>
|
</div>
|
<div style="width: 40px;height: 43px;" :style="{ 'background-color': getBackgroundColor4(items.c_machine_state) }"></div>
|
</div>
|
</div>
|
<!--右下角车间-->
|
</div>
|
<!--右车间-->
|
</div>
|
</div>
|
<!--上车间-->
|
|
|
<div style="display: flex;margin-top: -6px;">
|
|
<div style="position: relative;width: 200px;">
|
<!--视觉检测1-->
|
<div style="position: absolute; bottom: 140px; right: 140px;"
|
v-for="items in plcList_one.section_thirteen"
|
:style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
|
<div>
|
<div>
|
<el-tooltip class="item" effect="dark" placement="top">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div style="border: 1px solid #ffffff; width: 45px; height: 42px; ">
|
<img src="../../../assets/imgs/huojialun.png" style="width: 100%;"
|
v-if="items.r_wheel_SN != ''">
|
<img src="../../../assets/imgs/huojia.png" style="width: 100%;" v-else>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
<!--视觉检测1-->
|
<!--视觉检测2-->
|
<div style="position: absolute; bottom: 140px; right: 80px;"
|
v-for="items in plcList_one.section_fourteen"
|
:style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
|
<div>
|
<div>
|
<el-tooltip class="item" effect="dark" placement="top">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div style="border: 1px solid #ffffff; width: 45px; height: 42px; ">
|
<img src="../../../assets/imgs/huojialun.png" style="width: 100%;"
|
v-if="items.r_wheel_SN != ''">
|
<img src="../../../assets/imgs/huojia.png" style="width: 100%;" v-else>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
<!--视觉检测2-->
|
<!--涂油机-->
|
<div style="position: absolute; bottom: 140px; right: 20px;" v-for="items in plcList_one.section_eleven"
|
:style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
|
<div>
|
<div>
|
<el-tooltip class="item" effect="dark" placement="top">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div style="border: 1px solid #ffffff; width: 45px; height: 67px; ">
|
<img src="../../../assets/imgs/tuyoujilun.png" style="width: 100%;"
|
v-if="items.r_wheel_SN != ''">
|
<img src="../../../assets/imgs/tuyouji.png" style="width: 100%;" v-else>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
<!--涂油机-->
|
|
<!--机械手-->
|
<div style="position: absolute; bottom: 50px; right: 20px;" v-for="items in plcList_one.section_twelve">
|
<div>
|
<div>
|
<el-tooltip class="item" effect="dark" placement="top">
|
<template #content v-if="items.r_wheel_SN !== '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box2_sto_yj">
|
<img src="../../../assets/imgs/jxscl.png" style="width: 100%;"
|
v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/jxsk.png" style="width: 100%;" v-else>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
<!--机械手-->
|
</div>
|
|
|
<!--车间之下的辊道线-->
|
<div>
|
|
<div class="box" style="height: 614px;">
|
<div v-for="items in plcList_one.section_one" class="box_sto"
|
:style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_wheel_SN != ''&& items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box_sto_dt">
|
<div class="quan_div" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null " >
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
|
</div>
|
<!--车间之下的辊道线-->
|
|
|
<!--下料口接驳台-->
|
<div style="margin-top: 510px;margin-left: 35px;">
|
<div style="display: flex;" v-for="(items, inst) in dataList" :key="inst">
|
<div class="x_div" v-for="(its, ins) in items" :key="ins"
|
:style="{ 'background-color': getBackgroundColor(its.enable, its.location_state), 'margin-left': ins === 0 ? '0px' : '15px' }">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content
|
v-if="its.stationType !== '' && its.bindSN !== '' && its.stationType !== null && its.bindSN !== null">
|
<div>库位编号：{{ its.stationCode }}</div>
|
<div>物料类型(图号)： {{ its.stationType }}</div>
|
<div>炉号： {{ its.heatNumber }}</div>
|
<div style="width: 76px;">车轮SN号：{{ its.bindSN }}</div>
|
<div>钢坯号：{{ its.billetID }}</div>
|
<div v-if="its.tray_type == 'SmallTray'">托盘类型：小托盘</div>
|
<div v-else>托盘类型：大托盘</div>
|
</template>
|
<template #content v-else>
|
<div>库位编号：{{ its.stationCode }}</div>
|
<div v-if="its.tray_type == 'SmallTray'">托盘类型：小托盘</div>
|
<div v-else>托盘类型：大托盘</div>
|
<div>目前暂无车轮信息</div>
|
</template>
|
<div style="width: 55px;height: 55px;">
|
<img src="../../../assets/imgs/huojialun.png" style="width: 100%;"
|
v-if="its.stationType !== '' && its.bindSN !== '' && its.stationType !== null && its.bindSN !== null" />
|
<img src="../../../assets/imgs/huojia.png" style="width: 100%;"
|
v-else-if="its.location_state == 'Stroge'">
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
<!--下料口接驳台-->
|
</div>
|
</div>
|
|
|
<div>
|
<el-dialog v-model="isModalVisible" title="机信息">
|
<div>Name:
|
<el-input v-model="dataFList[0].name" :disabled="true" style="width: 100px;"> </el-input>
|
</div>
|
|
<!--最大div-->
|
<div>
|
<!--第层列div-->
|
<div style="display: flex;">
|
<div style="width: 30%;">
|
<p>power on
|
<div class="div_cl" v-if="dataFList[0].power_on == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>ready operate
|
<div class="div_cl" v-if="dataFList[0].ready_for_operate == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>ready auto start
|
<div class="div_cl" v-if="dataFList[0].ready_for_Auto_start == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state JOG
|
<div class="div_cl" v-if="dataFList[0].state_JOG == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state MDA
|
<div class="div_cl" v-if="dataFList[0].state_MDA == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>state AUTO
|
<div class="div_cl" v-if="dataFList[0].state_AUTO == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>safety doors closed
|
<div class="div_cl" v-if="dataFList[0].safetydoors_closed == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>spindel running
|
<div class="div_cl" v-if="dataFList[0].spindel_running == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>coolant ready
|
<div class="div_cl" v-if="dataFList[0].coolant_ready_operate == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>chip removal ready
|
<div class="div_cl" v-if="dataFList[0].coolant_ready_operate == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>communication IO
|
<div class="div_cl" v-if="dataFList[0].kommunikation_IO == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
</div>
|
<div style="width: 30%;margin-left: 40px;">
|
<p>emergency stop
|
<div class="div_cl" v-if="dataFList[0].emergency_Stop_machine == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>hydraulic fault
|
<div class="div_cl" v-if="dataFList[0].hydraulik_fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>feed drive fault
|
<div class="div_cl" v-if="dataFList[0].feeddrive_fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>main drive fault
|
<div class="div_cl" v-if="dataFList[0].maindrive_fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>machine fault
|
<div class="div_cl" v-if="dataFList[0].machine_fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>coolant fault
|
<div class="div_cl" v-if="dataFList[0].coolant_fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>chip removalfault
|
<div class="div_cl" v-if="dataFList[0].chipremoval_fault == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>breakdown repair
|
<div class="div_cl" v-if="dataFList[0].breakdown_repair == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>breakdown mainten
|
<div class="div_cl" v-if="dataFList[0].breakdown_maintenance == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>breakdown tool change
|
<div class="div_cl" v-if="dataFList[0].breakdown_Toolchange == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>breakdown changeover
|
<div class="div_cl" v-if="dataFList[0].breakdown_changeover == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
</div>
|
<div style="width: 30%;margin-left: 40px;">
|
<p>program running
|
<div class="div_cl" v-if="dataFList[0].programm_running == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>prog sel side 1
|
<div class="div_cl" v-if="dataFList[0].prog_sel_side_1 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>prog sel side 2
|
<div class="div_cl" v-if="dataFList[0].prog_sel_side_2 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>program side 1 finished
|
<div class="div_cl" v-if="dataFList[0].programm_side_1_finished == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>load side 1 finished
|
<div class="div_cl" v-if="dataFList[0].load_side_1_finished == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>program side 2 finished
|
<div class="div_cl" v-if="dataFList[0].programm_side_2_finished == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>load side 2 finished
|
<div class="div_cl" v-if="dataFList[0].load_side_2_finished == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>tool change magazine 1
|
<div class="div_cl" v-if="dataFList[0].toolchange_magazine_1 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
<p>tool change magazine 2
|
<div class="div_cl" v-if="dataFList[0].toolchange_magazine_2 == true">1</div>
|
<div class="div_cl2" v-else>0</div>
|
</p>
|
</div>
|
</div>
|
<!--第一列div-->
|
<div style="border-bottom: 1px solid grey;height: 1px;margin-top: 3px;"></div>
|
<div style="display: flex;margin-top: 1px;">
|
<div style="width: 40%;">
|
<p style="display: flex;"><div style="width: 180px">changed tool mag 1</div>
|
<el-input v-model="dataFList[0].changed_tool_mag_1" :disabled="true" style="width: 100px;">
|
</el-input>
|
</p>
|
<p style="display: flex;"><div style="width: 140px">dupl tool mag 1</div>
|
<el-input v-model="dataFList[0].dupl_tool_mag_1" :disabled="true" style="width: 100px;margin-left: 40px;">
|
</el-input>
|
</p>
|
<p style="display: flex;"><div style="width: 180px">changed tool mag 2</div>
|
<el-input v-model="dataFList[0].changed_tool_mag_2" :disabled="true" style="width: 100px;">
|
</el-input>
|
</p>
|
<p style="display: flex;"><div style="width: 180px">dupl tool mag 2</div>
|
<el-input v-model="dataFList[0].dupl_tool_mag_2" :disabled="true" style="width: 100px;">
|
</el-input>
|
</p>
|
</div>
|
<div style="width: 40%;margin-left: 40px;">
|
<p style="display: flex;"><div style="width: 140px">mart type</div>
|
<el-input v-model="dataFList[0].parttype" :disabled="true" style="width: 100px;" class="div_inp">
|
</el-input>
|
</p>
|
<p style="display: flex;"><div style="width: 180px">part counter</div>
|
<el-input v-model="dataFList[0].partcounter" :disabled="true" style="width: 100px;">
|
</el-input>
|
</p>
|
<p style="display: flex;"><div style="width: 180px">operator id</div>
|
<el-input v-model="dataFList[0].operator_ID" :disabled="true" style="width: 100px;">
|
</el-input>
|
</p>
|
<p style="display: flex;"><div style="width: 180px">machine state</div>
|
<el-input v-model="dataFList[0].machine_state" :disabled="true" style="width: 100px;">
|
</el-input>
|
</p>
|
</div>
|
</div>
|
</div>
|
<!--最大div-->
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import axios from 'axios';
|
|
export default {
|
props: {
|
dataList: {
|
type: Array,
|
required: true
|
},
|
plcList_one: {
|
type: Array,
|
required: true
|
}
|
},
|
|
data() {
|
return {
|
isModalVisible: false,
|
isModalVisible2: false,
|
isModalVisible3: false,
|
dataFList: []
|
};
|
},
|
mounted() {
|
|
},
|
methods: {
|
open(staname) {
|
this.http.get('api/Readplc/Four_unit_plc?staname=' + staname).then(x => {
|
this.dataFList = x;
|
this.isModalVisible = true;
|
})
|
.catch(error => {
|
console.error('请求出错：', error);
|
});
|
},
|
getBackgroundColor4(vk_state){
|
if(vk_state==1){
|
return 'lightgreen';
|
}else if(vk_state==2){
|
return '#3c3ca5';
|
}else if(vk_state>=10 && vk_state<=20){
|
return '#cccc33';
|
}else if(vk_state>20){
|
return '#d53d3d';
|
}else{
|
return 'rgb(195 176 176)';
|
}
|
},
|
getBackgroundColor(enable, locationState) {
|
if (enable == '0') {
|
return '#C0C4CC';
|
}
|
else {
|
switch (locationState) {
|
case 'Stroge':
|
return '#409eff';
|
case 'Empty':
|
return 'lightgreen';
|
case 'InBusy':
|
return 'yellow';
|
case 'OutBusy':
|
return 'yellow';
|
case 'Busy':
|
return 'yellow';
|
case 'Abnormal':
|
return 'red';
|
case 'Abnormal':
|
return 'yellow';
|
default:
|
return 'transparent';
|
}
|
}
|
|
},
|
getBackgroundColor2(r_wheel_SN) {
|
if (r_wheel_SN != '') {
|
return 'lightgreen';
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
.contents {
|
display: flex;
|
align-items: flex-end;
|
}
|
|
.el-overlay-dialog {
|
top: -100px;
|
}
|
|
.div_cl {
|
width: 30px;
|
height: 25px;
|
float: right;
|
background-color: greenyellow;
|
text-align: center;
|
padding-top: 5px;
|
|
}
|
|
.div_inp{
|
margin-left: 40px;
|
}
|
.div_cl2 {
|
width: 30px;
|
height: 25px;
|
float: right;
|
background-color: darkgrey;
|
text-align: center;
|
}
|
|
.box {
|
background-color: rgb(129, 179, 182);
|
width: 80px;
|
height: 415px;
|
margin-left: 3px;
|
color: rgb(255, 255, 255);
|
font-size: 16px;
|
}
|
|
.box_sto {
|
width: 100%;
|
border: 1px solid #000000;
|
height: 45px;
|
background-image: url(../../../assets/lines.png);
|
background-size: 100%;
|
margin-top: 6px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.box_sto_dt {
|
height: 17px;
|
text-align: center;
|
line-height: 17px;
|
margin-bottom: 3px;
|
}
|
|
.vk_div {
|
height: 50px;
|
width: 50px;
|
margin-top: 300px;
|
margin-left: 120px;
|
border-radius: 10px;
|
|
}
|
|
.quan_div {
|
border: 1px solid #000000;
|
border-radius: 50px;
|
width: 30px;
|
height: 30px;
|
background-color: #818181;
|
margin-top: -3px;
|
}
|
|
.box2_sto_baox {
|
width: 137px;
|
height: 45px;
|
background-color: rgb(129, 179, 182);
|
margin-left: 5px;
|
border-radius: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 18px;
|
padding: 5px;
|
text-align: center
|
}
|
|
.box_stoy {
|
width: 35px;
|
height: 35px;
|
background-color: rgb(129, 179, 182);
|
margin-left: 4px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center
|
}
|
|
.box2_sto_yj {
|
width: 70px;
|
height: 70px;
|
margin-left: 5px;
|
border-radius: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 18px;
|
padding: 5px;
|
text-align: center;
|
background-color: rgb(129, 179, 182);
|
}
|
|
.x_div {
|
border: 1px solid #757373;
|
width: 57px;
|
height: 52px;
|
}
|
</style>
|
