opt:西门子项目上线版本20251217
This commit is contained in:
@@ -3,6 +3,17 @@
|
||||
<button class="btn-close" :disabled="disabled" @click="toExit" />
|
||||
<div class="m-content">
|
||||
<p>{{ screenData.device_name }}</p>
|
||||
<!-- 状态灯区域 -->
|
||||
<div class="status-lights">
|
||||
<div
|
||||
class="status-light"
|
||||
:class="{'status-light-green': !hasError, 'status-light-red': hasError}"
|
||||
@click="showErrorDetails"
|
||||
title="点击查看异常详情"
|
||||
>
|
||||
<span class="status-text">{{ hasError ? '异常' : '正常' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-wraper" :style="screenData.region_points.length <= 2 ? 'justify-content: center' : 'justify-content: space-between'">
|
||||
<div v-for="(e, i) in screenData.region_points" :key="i" class="button-item" :class="{'button-item_3': screenData.region_points.length <= 3}">
|
||||
@@ -17,19 +28,40 @@
|
||||
<div v-if="e.type === '0'" class="button" @click="showPop('DELETE', e)">组盘删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="type === 'IN'" class="pop-wraper pop-wraper-2" :class="{'popshow': show, 'pophide': !show}">
|
||||
<div v-show="type === 'IN'" class="pop-wraper pop-wraper-2 text-large" :class="{'popshow': show, 'pophide': !show}">
|
||||
<div class="close-button" @click="show = false">
|
||||
<span class="close-icon">×</span>
|
||||
</div>
|
||||
<div class="zd-row pop-grid">
|
||||
<div class="pop-grid_l">
|
||||
<div class="search-wraper">
|
||||
<el-row class="filter-wraper" type="flex" justify="space-between" align="middle">
|
||||
<el-col :span="6" class="p-label">搜索关键字</el-col>
|
||||
<el-col :span="12" class="select-wraper">
|
||||
<el-input v-model="searchKey" placeholder="请输入800、物料号或零件号" style="width: 100%" @keyup.enter.native="searchOrder" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<button class="search_button" @click="searchOrder">搜索</button>
|
||||
<button class="search_button search_button_dis" @click="resetSearch">重置</button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="pop-grid_t">
|
||||
<el-table
|
||||
:data="popList"
|
||||
height="100%"
|
||||
style="font-size: 18px"
|
||||
@current-change="handleCurrentChange"
|
||||
:row-class-name="tableRowClassName"
|
||||
>
|
||||
<el-table-column
|
||||
prop="vehicle_code"
|
||||
label="载具号"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="point_code"
|
||||
label="载具当前点位"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="order_code"
|
||||
label="订单号"
|
||||
@@ -50,12 +82,30 @@
|
||||
prop="priority"
|
||||
label="优先级"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="is_lock"
|
||||
label="状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span :class="{'status-available': scope.row.is_lock === '0', 'status-occupied': scope.row.is_lock === '1'}">
|
||||
{{ scope.row.is_lock === '0' ? '可用' : '占用' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<button v-if="scope.row.is_lock === '0'" class="call-button" :disabled="disabled" @click="callMaterial(scope.row)">叫料</button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pop-grid_t">
|
||||
<div class="pop-grid_t pop-grid_t-2">
|
||||
<el-table
|
||||
:data="popSecList"
|
||||
height="100%"
|
||||
height="calc(100% - 20px)"
|
||||
style="font-size: 18px; padding-bottom: 10px"
|
||||
>
|
||||
<el-table-column
|
||||
prop="order_code"
|
||||
@@ -88,14 +138,6 @@
|
||||
<img v-if="imgSrc !== ''" class="img_pallet" :src="imgSrc" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<el-row type="flex" justify="space-around">
|
||||
<el-col :span="4">
|
||||
<button class="login_button login_button_dis" @click="show = false">取消</button>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<button class="login_button" :disabled="disabled" @click="toSure">叫料</button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="type === 'CONTAINER'" class="pop-wraper pop-wraper-1" :class="{'popshow': show, 'pophide': !show}">
|
||||
<div class="pop-h1">{{ popData.title }}</div>
|
||||
@@ -315,6 +357,29 @@
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="alertShow" class="modal" style="z-index: 21;" />
|
||||
|
||||
<!-- 异常详情弹窗 -->
|
||||
<div v-show="errorShow" class="pop-wraper pop-wraper-1" :class="{'popshow': errorShow, 'pophide': !errorShow}" style="z-index: 23;">
|
||||
<div class="pop-h1">异常详情</div>
|
||||
<div class="filter-items">
|
||||
<div v-if="errorDetails.length > 0" class="error-list">
|
||||
<div v-for="(error, index) in errorDetails" :key="index" class="error-item">
|
||||
<div class="error-type">{{ error.type }}</div>
|
||||
<div class="error-message">{{ error.message }}</div>
|
||||
<div class="error-time">{{ error.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-error">
|
||||
<p>当前无异常信息</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-row type="flex" justify="space-around">
|
||||
<el-col :span="6">
|
||||
<button class="login_button" @click="errorShow = false">关闭</button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="errorShow" class="modal" style="z-index: 22;" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -339,7 +404,12 @@ export default {
|
||||
vcode: '',
|
||||
disabled: false,
|
||||
imgSrc: '',
|
||||
alertShow: false
|
||||
alertShow: false,
|
||||
searchKey: '',
|
||||
// 异常信息相关属性
|
||||
hasError: false,
|
||||
errorDetails: [],
|
||||
errorShow: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -374,10 +444,7 @@ export default {
|
||||
this.type = type
|
||||
this.popData = e
|
||||
if (type === 'IN') {
|
||||
crudProduceScreen.regionOrder(this.screenData.device_code, this.popData.device_code).then(res => {
|
||||
this.popList = [...res.content]
|
||||
this.show = true
|
||||
})
|
||||
this.searchOrder()
|
||||
} else if (type === 'CONTAINER') {
|
||||
this.popData.title = '选择托盘类型'
|
||||
this.emptyObj = {}
|
||||
@@ -444,17 +511,35 @@ export default {
|
||||
}
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.imgSrc = ''
|
||||
if (val) {
|
||||
this.currentRow = val
|
||||
crudProduceScreen.fabMaterial({ vehicle_code: this.currentRow.vehicle_code }).then(res => {
|
||||
this.popSecList = [...res]
|
||||
if (res.length > 0) {
|
||||
this.imgSrc = res[0].vehicle_path
|
||||
}
|
||||
})
|
||||
if (val.is_lock === '1') { // 如果点击的是占用状态的行，重置相关数据
|
||||
this.imgSrc = ''
|
||||
this.popSecList = []
|
||||
this.currentRow = null
|
||||
} else if (val.is_lock === '0') { // 如果点击的是可用状态的行，正常加载数据
|
||||
this.currentRow = val
|
||||
crudProduceScreen.fabMaterial({ vehicle_code: this.currentRow.vehicle_code }).then(res => {
|
||||
this.popSecList = [...res]
|
||||
if (res.length > 0) {
|
||||
this.imgSrc = res[0].vehicle_path
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 叫料按钮点击事件
|
||||
callMaterial(row) {
|
||||
this.currentRow = row
|
||||
// 加载物料详情
|
||||
crudProduceScreen.fabMaterial({ vehicle_code: row.vehicle_code }).then(res => {
|
||||
this.popSecList = [...res]
|
||||
if (res.length > 0) {
|
||||
this.imgSrc = res[0].vehicle_path
|
||||
// 调用叫料方法
|
||||
this.toSure()
|
||||
}
|
||||
})
|
||||
},
|
||||
toSure() {
|
||||
this.disabled = true
|
||||
if (this.type === 'IN') {
|
||||
@@ -527,7 +612,73 @@ export default {
|
||||
if (val) {
|
||||
this.imgSrc = '//images.weserv.nl/?url=' + val.material_path
|
||||
}
|
||||
},
|
||||
// 搜索订单
|
||||
searchOrder() {
|
||||
crudProduceScreen.regionOrder(this.popData.device_code, this.searchKey).then(res => {
|
||||
this.popList = [...res.content]
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
// 重置搜索条件
|
||||
resetSearch() {
|
||||
this.searchKey = ''
|
||||
this.searchOrder()
|
||||
},
|
||||
// 设置表格行类名
|
||||
tableRowClassName({ row }) {
|
||||
return row.is_lock === '1' ? 'row-occupied' : 'row-available';
|
||||
},
|
||||
// 显示异常详情
|
||||
showErrorDetails() {
|
||||
this.errorShow = true
|
||||
},
|
||||
// 检查异常信息
|
||||
checkErrors() {
|
||||
// 从后端获取异常信息
|
||||
if (this.screenData && this.screenData.device_code) {
|
||||
crudProduceScreen.getExceptionMessage(this.screenData.device_code).then(res => {
|
||||
// 处理接口返回的异常信息
|
||||
if (res && res.content) {
|
||||
this.errorDetails = res.content
|
||||
this.hasError = res.content.length > 0
|
||||
} else {
|
||||
this.errorDetails = []
|
||||
this.hasError = false
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取异常信息失败:', error)
|
||||
this.errorDetails = []
|
||||
this.hasError = false
|
||||
})
|
||||
} else {
|
||||
this.errorDetails = []
|
||||
this.hasError = false
|
||||
}
|
||||
},
|
||||
// 定时检查异常
|
||||
startErrorCheck() {
|
||||
// 每5秒检查一次异常
|
||||
this.errorCheckTimer = setInterval(() => {
|
||||
this.checkErrors()
|
||||
}, 5000)
|
||||
},
|
||||
// 清除定时检查
|
||||
clearErrorCheck() {
|
||||
if (this.errorCheckTimer) {
|
||||
clearInterval(this.errorCheckTimer)
|
||||
this.errorCheckTimer = null
|
||||
}
|
||||
}
|
||||
},
|
||||
// 页面挂载时开始检查异常
|
||||
mounted() {
|
||||
this.checkErrors()
|
||||
this.startErrorCheck()
|
||||
},
|
||||
// 页面销毁时清除定时检查
|
||||
beforeDestroy() {
|
||||
this.clearErrorCheck()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -541,4 +692,236 @@ export default {
|
||||
.custom-message-box {
|
||||
background-color: #f56c6c;
|
||||
}
|
||||
.search-wraper {
|
||||
padding: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.search_button {
|
||||
background-color: #409EFF;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 15px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.search_button_dis {
|
||||
background-color: #C0C4CC;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 状态灯样式 */
|
||||
.status-lights {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.status-light {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.status-light-green {
|
||||
background-color: #67C23A;
|
||||
border: 2px solid #4CAF50;
|
||||
}
|
||||
|
||||
.status-light-red {
|
||||
background-color: #F56C6C;
|
||||
border: 2px solid #F44336;
|
||||
animation: pulse 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
box-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 20px rgba(244, 67, 54, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 异常详情弹窗样式 */
|
||||
.error-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.error-item {
|
||||
background-color: rgba(245, 108, 108, 0.1);
|
||||
border-left: 4px solid #F56C6C;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.error-type {
|
||||
font-weight: bold;
|
||||
color: #F56C6C;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.error-time {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 托盘状态样式 */
|
||||
.row-available {
|
||||
background-color: #ffffff;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.row-occupied {
|
||||
background-color: rgba(220, 223, 230, 0.8);
|
||||
color: #909399;
|
||||
transition: all 0.3s;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none; /* 禁止鼠标事件 */
|
||||
}
|
||||
|
||||
.row-available:hover {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 状态文字样式 */
|
||||
.status-available {
|
||||
color: #67C23A;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-occupied {
|
||||
color: #909399;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 占用状态行的文字颜色 */
|
||||
.row-occupied .cell {
|
||||
color: #909399;
|
||||
pointer-events: none; /* 禁止单元格内的鼠标事件 */
|
||||
}
|
||||
|
||||
/* 仅隐藏右边长滚动条 */
|
||||
.pop-grid_l {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 保留表格的滚动条 */
|
||||
.pop-grid_t {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 恢复表格滚动条默认样式 */
|
||||
.pop-grid_t ::-webkit-scrollbar {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pop-grid_t ::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.pop-grid_t ::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pop-grid_t ::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* 恢复IE滚动条默认样式 */
|
||||
.pop-grid_t {
|
||||
-ms-overflow-style: auto;
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
/* 关闭按钮样式 */
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 48px;
|
||||
color: #606266;
|
||||
font-weight: bold;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.close-icon:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
/* 叫料按钮样式 */
|
||||
.call-button {
|
||||
background-color: #409EFF;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.call-button:disabled {
|
||||
background-color: #C0C4CC;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 增大弹出框文字字体 */
|
||||
.text-large {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 确保表格内容也使用较大字体 */
|
||||
.text-large .cell {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 确保标签和输入框也使用较大字体 */
|
||||
.text-large .p-label,
|
||||
.text-large .el-input__inner,
|
||||
.text-large .search_button {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -28,9 +28,13 @@ export function deviceInLogin(data) {
|
||||
}
|
||||
|
||||
// 4.根据工序查询订单
|
||||
export function regionOrder(code, code1) {
|
||||
export function regionOrder(deviceCode, searchKey) {
|
||||
let url = 'api/fab/regionOrder?deviceCode=' + deviceCode;
|
||||
if (searchKey) {
|
||||
url += '&searchKey=' + encodeURIComponent(searchKey);
|
||||
}
|
||||
return request({
|
||||
url: 'api/fab/regionOrder?regionCode=' + code + '&deviceCode=' + code1,
|
||||
url: url,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -132,6 +136,14 @@ export function deletevehiclemessage(code) {
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
authLogin, getUserOrDevice, deviceInLogin, regionOrder, fabMaterial, callMater, callEmp, fabOrders, sendMater, sendVehicle, getPointVehicle, loginOut, selectMaterialAndJpg, selectCacheTask, deletevehiclemessage
|
||||
//16.获取异常信息
|
||||
export function getExceptionMessage(deviceCode) {
|
||||
return request({
|
||||
url: 'api/fab/getExceptionMessage?deviceCode=' + deviceCode,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
authLogin, getUserOrDevice, deviceInLogin, regionOrder, fabMaterial, callMater, callEmp, fabOrders, sendMater, sendVehicle, getPointVehicle, loginOut, selectMaterialAndJpg, selectCacheTask, deletevehiclemessage, getExceptionMessage
|
||||
}
|
||||
|
||||
@@ -277,7 +277,7 @@
|
||||
left: 5%;
|
||||
z-index: 20;
|
||||
width: 90%;
|
||||
height: 80%;
|
||||
height: 90%;
|
||||
border-radius: 15px;
|
||||
padding: 2% 3% 3% 3%;
|
||||
background: center / 100% 100% url('~@/assets/images/screen_2.png') no-repeat;
|
||||
@@ -321,14 +321,14 @@
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.pop-grid {
|
||||
height: calc(100% - 82px);
|
||||
margin-bottom: 30px;
|
||||
height: calc(100% - 60px);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.pop-grid_1 {
|
||||
height: calc(100% - 142px);
|
||||
}
|
||||
.pop-grid_l {
|
||||
width: 60%;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -339,6 +339,32 @@
|
||||
}
|
||||
.pop-grid_t {
|
||||
height: 50%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.pop-grid_t-2 {
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 确保第二个表格使用与第一个表格相同的滚动条样式 */
|
||||
.pop-grid_t-2 ::-webkit-scrollbar {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pop-grid_t-2 ::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.pop-grid_t-2 ::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pop-grid_t-2 ::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
.img_pallet {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user