<template>
|
<div class="container">
|
<div class="header">
|
<div class="title">精排显示</div>
|
<div class="legend-section">
|
<div class="legend-item">
|
<div class="legend-label">虚拟精排</div>
|
<span class="color-box color-green"></span>
|
</div>
|
<div class="legend-item">
|
<div class="legend-label">虚拟精排无任务</div>
|
<span class="color-box color-lightgreen"></span>
|
</div>
|
</div>
|
</div>
|
<div class="content-wrapper">
|
<div class="content">
|
<div v-if="displayItems.length === 0" class="no-data">
|
<div class="no-data-text">暂无数据</div>
|
</div>
|
<div v-for="(item, index) in displayItems" :key="index" class="box">
|
<div class="box-content color-green" v-if="item.lockStatue == 1" @click="mouseClick(item.pvi)">
|
<div class="text-line">{{ item.pvi }}</div>
|
<div class="text-line">{{ item.vehicleCharacteristic }}</div>
|
<div class="text-line">{{ item.carBodyCharacteristic }}</div>
|
</div>
|
<div class="box-content color-lightgreen" v-else-if="item.lockStatue == 0"
|
@click="mouseClick(item.pvi)">
|
<div class="text-line">{{ item.pvi }}</div>
|
<div class="text-line">{{ item.vehicleCharacteristic }}</div>
|
<div class="text-line">{{ item.carBodyCharacteristic }}</div>
|
</div>
|
<div class="box-content color-font" v-else-if="item.lockStatue != 1 || item.lockStatue != 0"
|
@click="mouseClick(item.pvi)">
|
<div class="text-line">{{ item.pvi }}</div>
|
<div class="text-line">{{ item.vehicleCharacteristic }}</div>
|
<div class="text-line">{{ item.carBodyCharacteristic }}</div>
|
</div>
|
<div class="box-index">{{ index + 1 }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog v-model="dialogVisible" title="车身信息查看" :before-close="handleClose">
|
<div v-if="stockInfos.message" class="no-data-message">{{ stockInfos.message }}</div>
|
<el-form v-else ref="$form" :model="stockInfos" label-position="left" label-width="120px" size="medium">
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="库位编号：">
|
<j-el-description :value="stockInfos.locationCode" type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="PVI:">
|
<j-el-description :value="stockInfos.pvi" type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="车型:">
|
<j-el-description :value="stockInfos.vehicleCharacteristic" type="primary"
|
ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="车身类型">
|
<j-el-description :value="getcarType(stockInfos.carType)" type="primary"
|
ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div" style="margin-bottom: 10px;">
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="工单类型:">
|
<j-el-description :value="getOrderType(stockInfos.workOrderType)" type="primary"
|
ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="天窗特征:">
|
<j-el-description :value="stockInfos.skylightCharacteristic" type="primary"
|
ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div" style="margin-bottom: 10px;">
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="车身颜色:">
|
<j-el-description :value="stockInfos.carBodyCharacteristic" type="primary"
|
ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="白车身物料号:">
|
<j-el-description :value="stockInfos.biwMaterialCode" type="primary"
|
ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" type="flex" justify="start" align="top" tag="div" style="margin-bottom: 10px;">
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="彩车身物料号:">
|
<j-el-description :value="stockInfos.pbMaterial" type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
|
<el-form-item label="焊装上线时间:">
|
<j-el-description :value="stockInfos.biwInPassTime" type="primary" ellipsis></j-el-description>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-divider />
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="dialogVisible = false">
|
确认
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import JElDescription from "./JElDescription";
|
export default {
|
data() {
|
return {
|
mesLockInfos: [],
|
timer: null,
|
dialogVisible: false,
|
stockInfos: {
|
|
},
|
}
|
},
|
computed: {
|
displayItems() {
|
return this.mesLockInfos.slice(0, 50)
|
}
|
},
|
methods: {
|
GetViewData() {
|
this.http.post('/api/VV_MesLockInfo/GetMesLockInfo', '', '查询中').then((x) => {
|
this.mesLockInfos = x.data
|
})
|
},
|
mouseClick(pvi) {
|
this.http.post('/api/VV_MesLockInfo/GetStockInfo?PVI=' + pvi, '', '查询中').then((x) => {
|
if (x.data === null) {
|
this.stockInfos = { message: '无库存数据' };
|
} else {
|
this.stockInfos = x.data;
|
}
|
this.dialogVisible = true;
|
})
|
},
|
getcarType(carType) {
|
if (carType == 1) return '白车身'
|
if (carType == 2) return '彩车身'
|
if (carType == 3) return '空滑橇'
|
},
|
getOrderType(OrderType) {
|
if (OrderType == 1) return '国内销售车'
|
if (OrderType == 2) return '国际销售车'
|
if (OrderType == 3) return '展车'
|
if (OrderType == 4) return '企业用车'
|
if (OrderType == 6) return '试制车'
|
if (OrderType == 7) return 'SKD/CKD车'
|
if (OrderType == 8) return '特殊配置车'
|
if (OrderType == 11) return '验证订单'
|
},
|
startTimer() {
|
// 清除可能存在的旧定时器
|
if (this.timer) {
|
clearInterval(this.timer)
|
}
|
// 设置新的定时器，每30秒刷新一次
|
this.timer = setInterval(() => {
|
this.GetViewData()
|
}, 30000)
|
},
|
stopTimer() {
|
if (this.timer) {
|
clearInterval(this.timer)
|
this.timer = null
|
}
|
}
|
},
|
mounted() {
|
this.GetViewData()
|
this.startTimer()
|
},
|
beforeUnmount() {
|
this.stopTimer()
|
},
|
components: { JElDescription }
|
}
|
</script>
|
|
<style scoped>
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px 24px;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
border-bottom: none;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
.title {
|
font-size: 24px;
|
font-weight: 700;
|
color: #ffffff;
|
margin-left: 0;
|
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
letter-spacing: 0.5px;
|
}
|
|
.legend-section {
|
display: flex;
|
gap: 24px;
|
align-items: center;
|
}
|
|
.legend-item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
padding: 6px 12px;
|
background-color: rgba(255, 255, 255, 0.2);
|
border-radius: 20px;
|
backdrop-filter: blur(10px);
|
}
|
|
.legend-label {
|
font-size: 15px;
|
color: #ffffff;
|
font-weight: 500;
|
letter-spacing: 0.3px;
|
}
|
|
.color-box {
|
display: inline-block;
|
width: 18px;
|
height: 18px;
|
border-radius: 4px;
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
.color-green {
|
background-color: #167C07;
|
}
|
|
.color-lightgreen {
|
background-color: #9dc88d;
|
}
|
|
.color-font {
|
background-color: #6ec0f0;
|
}
|
|
.box-content.color-green {
|
background-color: #167C07;
|
border-radius: 8px;
|
padding: 12px;
|
margin: -12px;
|
margin-bottom: -12px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.box-content.color-lightgreen {
|
background-color: #9dc88d;
|
border-radius: 8px;
|
padding: 12px;
|
margin: -12px;
|
margin-bottom: -12px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.box-content.color-font {
|
background-color: #6ec0f0;
|
border-radius: 8px;
|
padding: 12px;
|
margin: -12px;
|
margin-bottom: -12px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.content-wrapper {
|
padding: 24px;
|
height: calc(100vh - 32px);
|
overflow-y: auto;
|
background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.content {
|
display: grid;
|
grid-template-columns: repeat(10, 1fr);
|
gap: 12px;
|
width: 100%;
|
}
|
|
.box {
|
width: 100%;
|
height: 100%;
|
border: none;
|
border-radius: 8px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 12px;
|
font-size: 13px;
|
font-weight: 500;
|
color: #333;
|
cursor: pointer;
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
position: relative;
|
overflow: hidden;
|
}
|
|
.box-content {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
overflow: hidden;
|
}
|
|
.text-line {
|
line-height: 1.6;
|
text-align: center;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
color: #ffffff;
|
font-weight: 600;
|
font-size: 13px;
|
letter-spacing: 0.3px;
|
}
|
|
.box-index {
|
text-align: center;
|
margin-top: 8px;
|
font-size: 16px;
|
color: #756767;
|
font-weight: 800;
|
padding-top: 8px;
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
letter-spacing: 0.5px;
|
}
|
|
.color-box {
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
margin-right: 15px;
|
border-radius: 3px;
|
}
|
|
/* 无数据提示样式 */
|
.no-data-message {
|
text-align: center;
|
padding: 40px 20px;
|
font-size: 16px;
|
color: #909399;
|
background-color: #f4f4f5;
|
border-radius: 4px;
|
}
|
|
/* 页面无数据提示样式 */
|
.no-data {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
height: 100%;
|
min-height: 300px;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
|
.no-data-icon {
|
font-size: 80px;
|
margin-bottom: 20px;
|
opacity: 0.6;
|
}
|
|
.no-data-text {
|
font-size: 18px;
|
color: #909399;
|
font-weight: 500;
|
}
|
</style>
|
