You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
655 lines
21 KiB
Vue
655 lines
21 KiB
Vue
<template>
|
|
<div class="checkOperation">
|
|
|
|
<div>
|
|
<div class="carousel-page">
|
|
<div class="carousel-page-content">
|
|
<div
|
|
class="img-box"
|
|
style="width: 35%;"
|
|
>
|
|
<ul>
|
|
<li class="img-box-item">
|
|
<span class="img-box-title">
|
|
位置:
|
|
</span>
|
|
<span class="img-box-value">
|
|
{{streetName}}-{{direction==1?"左":"右"}}-{{side==1?"浅":"深"}}-{{checkObj.column}}列-{{checkObj.row}}层
|
|
</span>
|
|
</li>
|
|
<li class="img-box-item">
|
|
<span class="img-box-title">
|
|
核对状态:
|
|
</span>
|
|
<span class="img-box-value">
|
|
{{ statusMap[checkObj.status] }}
|
|
</span>
|
|
</li>
|
|
<!-- <li class="img-box-item">
|
|
<span class="img-box-title">
|
|
品规:
|
|
</span>
|
|
<span class="img-box-value">
|
|
|
|
<a-select
|
|
ref="select"
|
|
style="width: 100%"
|
|
show-search
|
|
|
|
:value="checkObj.category"
|
|
@change="handleChangeVlue"
|
|
>
|
|
<a-select-option
|
|
v-for="(value, key) in categorys"
|
|
:key="value"
|
|
:value="key"
|
|
>
|
|
{{ key}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</span>
|
|
</li> -->
|
|
<!-- <li class="img-box-item">
|
|
<span class="img-box-title">
|
|
上位品规:
|
|
</span>
|
|
<span class="img-box-value">
|
|
{{checkObj.wmsCategory}}{{checkObj.wmsCategoryName!="" && checkObj.wmsCategoryName!=null ?"-"+checkObj.wmsCategoryName:""}}
|
|
</span>
|
|
</li> -->
|
|
|
|
<!-- <li class="img-box-item">
|
|
<span class="img-box-title">
|
|
个数:
|
|
</span>
|
|
<span class="img-box-value">
|
|
<a-input-number
|
|
id="inputNumber"
|
|
style="width: 100%"
|
|
v-model="checkObj.count"
|
|
:min="0"
|
|
:max="50"
|
|
/>
|
|
|
|
</span>
|
|
</li> -->
|
|
<li
|
|
class="img-box-item"
|
|
v-for="item in params"
|
|
:key="item.label"
|
|
>
|
|
|
|
<span class="img-box-title">
|
|
{{ item.label }}:
|
|
</span>
|
|
<span class="img-box-value">
|
|
{{ checkObj[item.key] }}
|
|
</span>
|
|
</li>
|
|
<!-- <li class="img-box-item">
|
|
<span class="img-box-title">
|
|
盘点时间:
|
|
</span>
|
|
<span class="img-box-value">
|
|
{{checkObj.exportTime}}{{checkObj.endTime!="" && checkObj.endTime!=null ?"-"+checkObj.endTime:""}}
|
|
</span>
|
|
</li> -->
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- <div
|
|
class="img-box"
|
|
style="width: 40%;"
|
|
>
|
|
<div class="carousel-wrapper">
|
|
|
|
<div
|
|
|
|
:key="ite"
|
|
style="float:left;height:100%; width:100% ;display: flex; "
|
|
>
|
|
|
|
<viewer :images="actionUrl">
|
|
<img
|
|
style="height:100%; width:100% ;"
|
|
:src="actionUrl"
|
|
>
|
|
</viewer>
|
|
</div>
|
|
|
|
</div>
|
|
<span>随行图像</span>
|
|
|
|
</div>
|
|
|
|
<div
|
|
class="img-box"
|
|
style="width: 40%;"
|
|
>
|
|
<div class="carousel-wrapper">
|
|
|
|
<div
|
|
v-for="ite in checkPics"
|
|
:key="ite"
|
|
style="float:left;height:100%; width:100% ;display: flex; "
|
|
>
|
|
|
|
<viewer :images="checkPics">
|
|
<img
|
|
style="height:100%; width:100% ;"
|
|
:src="ite"
|
|
>
|
|
</viewer>
|
|
</div>
|
|
|
|
</div>
|
|
<span>盘点图像</span>
|
|
|
|
|
|
</div> -->
|
|
|
|
</div>
|
|
</div>
|
|
<div class="bottom-btn">
|
|
<a-button
|
|
class="btn"
|
|
type="primary"
|
|
style="background:#29c12b;border-color:#29c12b;"
|
|
@click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)"
|
|
>核对正确
|
|
</a-button>
|
|
<!-- <a-button
|
|
v-if="pcd!='' && pcd!=null"
|
|
class="btn"
|
|
type="primary"
|
|
style="background:#29c12b;border-color:#29c12b;"
|
|
@click="get3D()"
|
|
>
|
|
<a-modal
|
|
width="1005px"
|
|
v-model="visible"
|
|
title="3D点云信息"
|
|
@ok="handleOk"
|
|
>
|
|
<pointCloud :src.sync="pcd"></pointCloud>
|
|
</a-modal>
|
|
|
|
3D点云信息
|
|
</a-button> -->
|
|
|
|
<!-- <a-button
|
|
class="btn"
|
|
type="primary"
|
|
style="background:#29c12b;border-color:#29c12b;"
|
|
@click="getOveroperationPic()"
|
|
>
|
|
<a-modal
|
|
v-drag
|
|
width="600px"
|
|
v-model="visible_pic"
|
|
title="随行图像"
|
|
style="top: 20px;"
|
|
@ok="overoperationPicStop"
|
|
>
|
|
<template #footer>
|
|
<a-button key="footer" type="primary" :loading="loading" @click="overoperationPicStop">确定</a-button>
|
|
</template>
|
|
<div
|
|
style="height: 700px;"
|
|
class="parent"
|
|
>
|
|
|
|
<img
|
|
style="width:700px ;"
|
|
:src="checkPics[0].substring(0, str.length - 4)"
|
|
>
|
|
</div>
|
|
</a-modal>
|
|
|
|
随行图像
|
|
</a-button> -->
|
|
<!-- <a-button
|
|
class="btn"
|
|
type="primary"
|
|
style="background:#29c12b;border-color:#29c12b;"
|
|
@click="nextOne(checkObj.id)"
|
|
>
|
|
下一个盘点
|
|
</a-button> -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Model from "./model.vue";
|
|
import { imgUrl } from "@/api/importExcel";
|
|
import { message } from "ant-design-vue";
|
|
import pointCloud from "../3DPointCloud/pointCloud.vue";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
checkPics: [],
|
|
upUrl: "",
|
|
checkObj: {},
|
|
row: 1,
|
|
pcd: "15555",
|
|
column: 1,
|
|
streetName: "",
|
|
visible: false,
|
|
visible_pic3d: false,
|
|
visible_pic: false,
|
|
category: "",
|
|
count: 0,
|
|
modelData: {},
|
|
index: 0,
|
|
imgUrl: "",
|
|
actionUrl: "",
|
|
categorys: {},
|
|
params: [
|
|
// {
|
|
// label: "个数",
|
|
// key: "count",
|
|
// },
|
|
// {
|
|
// label: "上位品规",
|
|
// key: "wmsCategory",
|
|
// },
|
|
//{
|
|
// label: "上位品规名",
|
|
// key: "wmsCategoryName",
|
|
//},
|
|
{
|
|
label: "盘点任务号",
|
|
key: "checkNum",
|
|
},
|
|
{
|
|
label: "盘点开始时间",
|
|
key: "exportTime",
|
|
},
|
|
// {
|
|
// label: "盘点结束时间",
|
|
// key: "endTime",
|
|
// },
|
|
],
|
|
statusMap: {
|
|
0: "未盘点",
|
|
1: "无货",
|
|
2: "有货",
|
|
3: "人工核对正确",
|
|
4: "空托盘",
|
|
5: "品规失败",
|
|
6: "个数失败",
|
|
},
|
|
};
|
|
},
|
|
beforeRouteLeave(to, form, next) {
|
|
// 修复第二次进入界面不执行created
|
|
this.$destroy();
|
|
if (to.name == "checkManage") {
|
|
to.meta.isUseCache = true;
|
|
} else {
|
|
to.meta.isUseCache = false;
|
|
}
|
|
next();
|
|
},
|
|
created() {
|
|
this.imgUrl = imgUrl;
|
|
|
|
//this.getStreetList();
|
|
if (
|
|
this.$route.query.row &&
|
|
this.$route.query.column &&
|
|
this.$route.query.direction &&
|
|
this.$route.query.side &&
|
|
this.$route.query.streetId
|
|
) {
|
|
this.id = this.$route.query.id;
|
|
this.row = this.$route.query.row;
|
|
this.column = this.$route.query.column;
|
|
this.direction = this.$route.query.direction;
|
|
this.side = this.$route.query.side;
|
|
this.streetId = this.$route.query.streetId;
|
|
this.streetName = this.$route.query.name;
|
|
|
|
this.getStockInfo(this.row, this.column);
|
|
this.getCategoryList();
|
|
}
|
|
},
|
|
mounted() {},
|
|
destroyed() {},
|
|
components: {
|
|
Model,
|
|
pointCloud,
|
|
},
|
|
methods: {
|
|
handleChangeVlue(value) {
|
|
this.checkObj.category = value;
|
|
},
|
|
get3D() {
|
|
this.visible = true;
|
|
},
|
|
getOveroperationPic() {
|
|
this.visible_pic = true;
|
|
},
|
|
overoperationPicStop() {
|
|
this.visible_pic = false;
|
|
},
|
|
|
|
|
|
getOveroperationPic3d() {
|
|
this.visible_pic3d = true;
|
|
},
|
|
overoperationPicStop3d() {
|
|
this.visible_pic3d = false;
|
|
},
|
|
handleOk() {
|
|
this.visible = false;
|
|
},
|
|
//获取复核页面的核对信息
|
|
getStockInfo(row, column) {
|
|
this.$api.httpApi
|
|
.getStockInfo({
|
|
data: {
|
|
row: Number(row),
|
|
column: Number(column),
|
|
direction: this.direction,
|
|
side: this.side,
|
|
streetId: this.streetId,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.data) {
|
|
this.checkObj = res.data;
|
|
var pic = this.checkObj.checkPic;
|
|
this.checkPics = pic.toString().split(";");
|
|
this.actionUrl = pic.slice(0, -8);
|
|
this.pcd = res.data.pcd;
|
|
this.$forceUpdate();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
//获取复核页面的核对信息
|
|
getCategoryList() {
|
|
this.$api.httpApi
|
|
.getCategoryList({
|
|
data: {},
|
|
})
|
|
.then((res) => {
|
|
if (res.data) {
|
|
this.categorys = res.data;
|
|
console.log(this.categorys);
|
|
//this.shelveId = res.data.shelveId;
|
|
//this.getScanAndCheck();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
handleChange(value) {
|
|
this.select = value;
|
|
this.id = value;
|
|
this.row = 1;
|
|
this.column = 1;
|
|
this.getStockInfo(1, 1);
|
|
},
|
|
|
|
checkSure(row, column, shelveId, index) {
|
|
this.$api.httpApi
|
|
.stockCheckCorrect({
|
|
data: {
|
|
row: Number(row),
|
|
column: Number(column),
|
|
side: Number(this.side),
|
|
streetId: Number(this.streetId),
|
|
direction: Number(this.direction),
|
|
count: this.checkObj.count,
|
|
category: this.checkObj.category,
|
|
ok: 1,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message.success("操作成功");
|
|
this.getStockInfo(this.row, this.column);
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
checkfalse(row, column, shelveId, index) {
|
|
this.$api.httpApi
|
|
.stockCheckCorrectErr({
|
|
data: {
|
|
row: Number(row),
|
|
column: Number(column),
|
|
side: Number(this.side),
|
|
streetId: Number(this.streetId),
|
|
direction: Number(this.direction),
|
|
ok: 0,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message.success("操作成功");
|
|
this.getStockInfo(this.row, this.column);
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
showModel(checkObj, index) {
|
|
this.visible = true;
|
|
this.modelData = checkObj;
|
|
this.index = index;
|
|
},
|
|
submit(visible, index) {
|
|
this.visible = visible;
|
|
console.log(index);
|
|
// this.next(index);
|
|
this.checkObj.status = 1;
|
|
},
|
|
closeModel(visible, data) {
|
|
this.visible = visible;
|
|
this.modelData = data;
|
|
},
|
|
nextOne(id) {
|
|
this.$api.httpApi
|
|
.nextOne({
|
|
data: {
|
|
id: Number(id),
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.data && res.data != null) {
|
|
console.log(res.data);
|
|
this.checkObj = res.data;
|
|
this.id = res.data.id;
|
|
this.row = res.data.row;
|
|
this.column = res.data.column;
|
|
this.direction = res.data.direction;
|
|
this.side = res.data.side;
|
|
this.streetId = res.data.streetId;
|
|
this.streetName = res.data.streetName;
|
|
var pic = this.checkObj.checkPic;
|
|
|
|
this.checkPics = pic.toString().split(";");
|
|
|
|
this.actionUrl = pic.slice(0, -4);
|
|
console.log(this.checkPics);
|
|
this.$forceUpdate();
|
|
} else {
|
|
message.info("全部盘点已完成");
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
/* For demo */
|
|
|
|
.carousel-wrapper {
|
|
overflow: hidden;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 70%;
|
|
display: flex;
|
|
}
|
|
|
|
.ant-carousel .slick-list {
|
|
margin: 0 -8px;
|
|
}
|
|
|
|
.ant-carousel .slick-slide {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.checkOperation {
|
|
.carousel-page {
|
|
width: 100%;
|
|
/*border: solid 1px blue;*/
|
|
&-title {
|
|
color: #009fe3;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
padding: 15px 0 10px 25px;
|
|
}
|
|
|
|
&-content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 20px;
|
|
|
|
.img-box {
|
|
display: flex;
|
|
padding: 50px;
|
|
margin-right: 56px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
font-size: 17px;
|
|
height: 700px;
|
|
margin-right: 10px;
|
|
img {
|
|
height: 100%;
|
|
}
|
|
|
|
p {
|
|
height: 25px;
|
|
}
|
|
ul {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-bottom: 0;
|
|
padding-inline-start: 0;
|
|
.img-box-item {
|
|
background-color: #ffaf11;
|
|
margin: 10px 0;
|
|
padding: 5px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #494e52;
|
|
.img-box-title {
|
|
width: 30%;
|
|
display: inline-block;
|
|
}
|
|
.img-box-value {
|
|
display: inline-block;
|
|
width: calc(100% - 130px);
|
|
overflow: hidden;
|
|
width: 70%;
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-footer {
|
|
width: calc(100% - 380px);
|
|
.info-box {
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
p {
|
|
padding: 0 20px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
text-align: center;
|
|
font-size: 21px;
|
|
}
|
|
|
|
.status-btn {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
.btn {
|
|
padding: 50px;
|
|
font-size: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 0;
|
|
margin: 15px 45px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-btn {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: right;
|
|
justify-content: center;
|
|
|
|
p {
|
|
font-size: 18px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.btn {
|
|
margin: 25px;
|
|
}
|
|
}
|
|
}
|
|
.historyImg {
|
|
width: 180px;
|
|
height: auto;
|
|
}
|
|
|
|
img {
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
.parent {
|
|
display: flex;
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
}
|
|
.carousel-box {
|
|
text-align: center;
|
|
background: #364d79;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
li {
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|