443 lines
9.5 KiB
Vue
443 lines
9.5 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2025-10-13 15:07:24
|
||
* @LastEditors: zwq
|
||
* @LastEditTime: 2025-11-07 15:35:14
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<div>
|
||
<div class="circle-container">
|
||
<div v-for="(item, index) in dotArr" :key="index" class="circle-wrapper">
|
||
<div
|
||
class="circle"
|
||
:style="{
|
||
background: stepNum == index + 1 ? '#0B58FF' : '',
|
||
}">
|
||
{{ index + 1 }}
|
||
</div>
|
||
<div
|
||
class="circle-text"
|
||
:style="{
|
||
color: stepNum == index + 1 ? '#0B58FF' : '',
|
||
}">
|
||
{{ item.name }}
|
||
</div>
|
||
<!-- 圆点后面的虚线 -->
|
||
<div v-if="index < 2" class="connector" />
|
||
</div>
|
||
</div>
|
||
<div v-if="stepNum == 1">
|
||
<div class="topTip">
|
||
1.可选择库区、巷道，同批次创建任务搬运仅支持同一产品型号。
|
||
<br />
|
||
2.须在本页下方填写搬运数量，搬运数量仅支持双数，且数量≤当前可用库存总量。
|
||
</div>
|
||
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
|
||
步骤一：选择产品及起点
|
||
</small-title>
|
||
<el-form
|
||
:model="dataForm"
|
||
:rules="dataRule"
|
||
ref="dataForm"
|
||
@keyup.enter.native="dataFormSubmit()"
|
||
label-position="top"
|
||
label-width="80px">
|
||
<el-row :gutter="10">
|
||
<el-col :span="6">
|
||
<el-form-item label="搬运对象" prop="val1">
|
||
<el-select
|
||
style="width: 100%"
|
||
v-model="dataForm.val1"
|
||
placeholder="请选择搬运对象">
|
||
<el-option
|
||
v-for="item in options1"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6" v-if="dataForm.val1 == 1">
|
||
<el-form-item label="产品名称" prop="val1">
|
||
<el-select
|
||
style="width: 100%"
|
||
v-model="dataForm.val2"
|
||
placeholder="请选择产品名称">
|
||
<el-option
|
||
v-for="item in options1"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6" v-if="dataForm.val1 == 1">
|
||
<el-form-item label="规格型号" prop="val1">
|
||
<el-select
|
||
style="width: 100%"
|
||
v-model="dataForm.val2"
|
||
placeholder="请选择规格型号">
|
||
<el-option
|
||
v-for="item in options1"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="搬运数量" prop="val4">
|
||
<el-input
|
||
v-model="dataForm.val4"
|
||
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')">
|
||
<template slot="append">盘</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="12">
|
||
<el-form-item label="起点信息" prop="val5">
|
||
<el-radio-group v-model="dataForm.val5">
|
||
<el-radio :label="1">按策略自动选择</el-radio>
|
||
<el-radio :label="2">指定起点</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div v-if="dataForm.val5 == 2" class="potBG-div">
|
||
<div>
|
||
<el-row :gutter="10">
|
||
<el-col :span="10">
|
||
起点库区:
|
||
<el-select
|
||
style="width: 200px; margin-left: 10px"
|
||
v-model="startPot"
|
||
size="small"
|
||
placeholder="请选择起点库区">
|
||
<el-option
|
||
v-for="item in options1"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="13" style="text-align: right; line-height: 36px">
|
||
<span
|
||
class="num1-startPot-status"
|
||
style="background-color: #5ab45a" />
|
||
可选
|
||
<span class="num1-startPot-status" />
|
||
不可选
|
||
<span
|
||
class="num1-startPot-status"
|
||
style="background-color: #e9b100" />
|
||
已选
|
||
</el-col>
|
||
</el-row>
|
||
<div class="potTitleBG">
|
||
<div v-for="item in Object.keys(startPotList)" :key="item">
|
||
<div class="potTitle">
|
||
{{ item }}
|
||
</div>
|
||
<div class="potList">
|
||
<div
|
||
class="pot"
|
||
v-for="sitem in startPotList[item]"
|
||
:key="sitem.id"
|
||
:style="{
|
||
backgroundColor: potBGcolor[sitem.status],
|
||
cursor: sitem.status > 0 ? 'pointer' : '',
|
||
}"
|
||
@click="sitem.status > 0 && setStartPot(sitem)"
|
||
:title="sitem.name">
|
||
{{ sitem.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<div style="text-align: right">可用库存总量 <span style="color:#409EFF;font-size:16px">12</span> 盘</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="stepNum == 2">
|
||
<div class="topTip">
|
||
1.指定终点库位，下发后会锁定所属巷道仅本批次任务进入。
|
||
<br />
|
||
2.指定终点库位选位规则：仅可从巷道最里空对位选位。
|
||
<br />
|
||
3.只选择库区或巷道时，该方式下当前终点为候选位置，系统将根据策略与现场实际情况自动确定最终终点库位。
|
||
</div>
|
||
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
|
||
步骤二：选择终点
|
||
</small-title>
|
||
</div>
|
||
<div v-if="stepNum == 3">
|
||
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
|
||
步骤三：预览与下发
|
||
</small-title>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import SmallTitle from './SmallTitle';
|
||
export default {
|
||
components: {
|
||
SmallTitle,
|
||
},
|
||
data() {
|
||
return {
|
||
dotArr: [
|
||
{
|
||
name: '选择起点',
|
||
},
|
||
{
|
||
name: '选择终点',
|
||
},
|
||
{
|
||
name: '预览下发',
|
||
},
|
||
],
|
||
potBGcolor: ['', '#dafadc', '#f8f0c4'],
|
||
stepNum: 1, // 当前第几步
|
||
//第一步参数
|
||
dataForm: {
|
||
id: undefined,
|
||
val1: undefined,
|
||
val2: undefined,
|
||
val3: undefined,
|
||
val4: undefined,
|
||
val5: 1,
|
||
},
|
||
options1: [
|
||
{
|
||
label: '产品',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '空盘',
|
||
value: 2,
|
||
},
|
||
],
|
||
dataRule: {},
|
||
startPot: undefined, //起点库区选择的类型
|
||
startPotList: {
|
||
//起点库区List
|
||
G01: [
|
||
{
|
||
id: '001',
|
||
name: 'L001',
|
||
status: 1,
|
||
},
|
||
{
|
||
id: '002',
|
||
name: 'R002',
|
||
status: 1,
|
||
},
|
||
{
|
||
id: '003',
|
||
name: 'L003',
|
||
status: 0,
|
||
},
|
||
{
|
||
id: '004',
|
||
name: 'R004',
|
||
status: 0,
|
||
},
|
||
],
|
||
G02: [
|
||
{
|
||
id: '005',
|
||
name: 'L005',
|
||
},
|
||
{
|
||
id: '006',
|
||
name: 'R006',
|
||
},
|
||
{
|
||
id: '007',
|
||
name: 'L007',
|
||
},
|
||
{
|
||
id: '008',
|
||
name: 'R008',
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
init(id) {
|
||
this.dataForm.id = id || undefined;
|
||
this.$nextTick(() => {
|
||
if (this.dataForm.id) {
|
||
} else {
|
||
}
|
||
});
|
||
},
|
||
//上一步
|
||
upSubmit() {
|
||
if (this.stepNum == 2) {
|
||
this.stepNum -= 1;
|
||
this.$emit('setSN', this.stepNum);
|
||
} else if (this.stepNum == 3) {
|
||
this.stepNum -= 1;
|
||
this.$emit('setSN', this.stepNum);
|
||
}
|
||
},
|
||
//下一步
|
||
nextSubmit() {
|
||
if (this.stepNum == 1) {
|
||
this.stepNum += 1;
|
||
this.$emit('setSN', this.stepNum);
|
||
return;
|
||
}
|
||
if (this.stepNum == 2) {
|
||
this.stepNum += 1;
|
||
this.$emit('setSN', this.stepNum);
|
||
return;
|
||
}
|
||
if (this.stepNum == 3) {
|
||
this.stepNum = 1;
|
||
this.$emit('setSN', this.stepNum);
|
||
return;
|
||
}
|
||
},
|
||
cancelStep() {},
|
||
|
||
// 第一步方法
|
||
setStartPot(data) {
|
||
data.status = data.status == 1 ? 2 : 1;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.topTip {
|
||
background-color: #ebebeb;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
line-height: 25px;
|
||
}
|
||
</style>
|
||
<!-- //库位点的样式 -->
|
||
<style scoped>
|
||
.potBG-div {
|
||
width: 100%;
|
||
margin: 10px;
|
||
border: 1px solid gainsboro;
|
||
box-shadow: 2px 2px 2px gainsboro, -1px -1px 3px gainsboro;
|
||
padding: 15px;
|
||
}
|
||
.num1-startPot-status {
|
||
margin-left: 5px;
|
||
display: inline-block;
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 1px solid gainsboro;
|
||
}
|
||
.potTitleBG {
|
||
margin-top: 10px;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
}
|
||
.potTitle {
|
||
width: 82px;
|
||
background-color: rgb(169, 235, 249);
|
||
border-radius: 3px;
|
||
margin-right: 5px;
|
||
text-align: center;
|
||
color: #000000;
|
||
letter-spacing: 1px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.potList {
|
||
width: 82px;
|
||
display: grid;
|
||
grid-template-columns: 40px 40px;
|
||
gap: 2px;
|
||
}
|
||
.pot {
|
||
width: 40px;
|
||
text-align: center;
|
||
border: 1px solid gainsboro;
|
||
border-radius: 3px;
|
||
padding: 5px 0;
|
||
margin-bottom: 5px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
</style>
|
||
|
||
<!-- //序号圆点 -->
|
||
<style scoped>
|
||
.circle-container {
|
||
height: 110px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
width: 90%;
|
||
overflow-x: auto;
|
||
margin: auto;
|
||
}
|
||
|
||
.circle-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.circle {
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 50%;
|
||
background: #8db1ff;
|
||
font-weight: 500;
|
||
font-size: 31px;
|
||
color: #ffffff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 2;
|
||
cursor: pointer;
|
||
}
|
||
.circle-text {
|
||
position: absolute;
|
||
top: 60px;
|
||
left: -15px;
|
||
color: #8db1ff;
|
||
width: 82px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 下半圆虚线边框 */
|
||
.circle::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -6px; /* 2px边框 + 2px间隙 */
|
||
left: -4px;
|
||
right: -4px;
|
||
height: 30px; /* 半圆高度 */
|
||
border-radius: 0 0 60px 60px;
|
||
border: 1px dashed #0b58ff;
|
||
border-top: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.connector {
|
||
width: 160px; /* 计算连接线长度 */
|
||
height: 2px;
|
||
border-bottom: 1px dashed rgb(11, 88, 255, 1);
|
||
margin: 0 5px;
|
||
z-index: 1;
|
||
}
|
||
</style>
|