|
|
<template>
|
|
|
<div class="check-page">
|
|
|
<div class="button-box">
|
|
|
|
|
|
<a-popconfirm
|
|
|
title="是否清空全部盘点"
|
|
|
ok-text="是"
|
|
|
cancel-text="否"
|
|
|
@confirm="allStockClear"
|
|
|
>
|
|
|
<a-button
|
|
|
type="primary"
|
|
|
class="export-all"
|
|
|
>
|
|
|
盘点清空
|
|
|
</a-button>
|
|
|
</a-popconfirm>
|
|
|
|
|
|
<a-popconfirm
|
|
|
title="是否确定要全部盘点"
|
|
|
ok-text="是"
|
|
|
cancel-text="否"
|
|
|
@confirm="allStockCheck"
|
|
|
>
|
|
|
<a-button
|
|
|
type="primary"
|
|
|
class="export-all"
|
|
|
>
|
|
|
全部盘点
|
|
|
</a-button>
|
|
|
</a-popconfirm>
|
|
|
|
|
|
<a-button
|
|
|
type="primary"
|
|
|
@click="exportStock"
|
|
|
class="export-all"
|
|
|
>
|
|
|
导出巷道盘点数据
|
|
|
</a-button>
|
|
|
<a-button
|
|
|
type="primary"
|
|
|
@click="exportAllStock"
|
|
|
class="export-all"
|
|
|
>
|
|
|
导出全部巷道盘点数据
|
|
|
</a-button>
|
|
|
</div>
|
|
|
<div class="title-info">
|
|
|
<span class="explain">颜色说明：</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag
|
|
|
color="#d81e06"
|
|
|
style="width: 30px; height: 20px; margin-right: 6px"
|
|
|
></a-tag>
|
|
|
盘点错误
|
|
|
</span>
|
|
|
|
|
|
<span class="info-text">
|
|
|
<a-tag
|
|
|
color="#1afa29"
|
|
|
style="width: 30px; height: 20px; margin-right: 6px"
|
|
|
></a-tag>
|
|
|
盘点正确
|
|
|
</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag
|
|
|
color="#bfbfbf"
|
|
|
style="width: 30px; height: 20px; margin-right: 6px"
|
|
|
></a-tag>
|
|
|
未盘点
|
|
|
</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag
|
|
|
color="#4c71d8"
|
|
|
style="width: 30px; height: 20px; margin-right: 6px"
|
|
|
></a-tag>
|
|
|
人工核对
|
|
|
</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag
|
|
|
color="#bc55cf"
|
|
|
style="width: 30px; height: 20px; margin-right: 6px"
|
|
|
></a-tag>
|
|
|
空托盘
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
<div style="margin: 10px">
|
|
|
<a-select
|
|
|
@change="handleChange"
|
|
|
style="width: 200px"
|
|
|
v-model="select"
|
|
|
>
|
|
|
<a-select-option
|
|
|
v-for="i in data"
|
|
|
:key="i.name"
|
|
|
:value="i.id"
|
|
|
>
|
|
|
{{ i.name }}
|
|
|
<a-icon
|
|
|
type="exclamation-circle"
|
|
|
theme="filled"
|
|
|
v-if="i.statusCount> 0"
|
|
|
style="color: #f3e73f; text-align: right;"
|
|
|
/>
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</div>
|
|
|
|
|
|
<a-col :span="20">
|
|
|
<!--左货架DOM-->
|
|
|
<div class="center-box">
|
|
|
<span class="shelf-number"> 左侧货架 </span>
|
|
|
|
|
|
<a-radio-group
|
|
|
v-model="leftSide"
|
|
|
style="margin: 10px 0"
|
|
|
v-if="streetDetail.leftType == 1"
|
|
|
>
|
|
|
<a-radio-button :value="1"> 浅侧货架 </a-radio-button>
|
|
|
<a-radio-button :value="2"> 深侧货架 </a-radio-button>
|
|
|
</a-radio-group>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="check-content"
|
|
|
v-for="item in data"
|
|
|
:key="item.id"
|
|
|
>
|
|
|
<subsection
|
|
|
v-if="item.id == select"
|
|
|
:total="{ row: item.leftRow, column: item.leftColumn }"
|
|
|
:side="leftSide"
|
|
|
:direction="1"
|
|
|
:streetId="item.id"
|
|
|
:streetName="item.name"
|
|
|
>
|
|
|
</subsection>
|
|
|
</div>
|
|
|
|
|
|
<!--单伸类型右货架DOM-->
|
|
|
<div class="center-box">
|
|
|
<span class="shelf-number"> 右侧货架 </span>
|
|
|
|
|
|
<a-radio-group
|
|
|
v-model="rightSide"
|
|
|
style="margin: 10px 0"
|
|
|
v-if="streetDetail.rightType == 1"
|
|
|
>
|
|
|
<a-radio-button :value="1"> 浅侧货架 </a-radio-button>
|
|
|
<a-radio-button :value="2"> 深测货架 </a-radio-button>
|
|
|
</a-radio-group>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="check-content"
|
|
|
v-for="item in data"
|
|
|
:key="item.name"
|
|
|
>
|
|
|
<subsection
|
|
|
v-if="item.id == select"
|
|
|
:total="{ row: item.rightRow, column: item.rightColumn }"
|
|
|
:side="rightSide"
|
|
|
:direction="2"
|
|
|
:streetId="item.id"
|
|
|
:streetName="item.name"
|
|
|
>
|
|
|
</subsection>
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<a-col :span="4">
|
|
|
<div
|
|
|
class="img-box"
|
|
|
style=""
|
|
|
>
|
|
|
<ul>
|
|
|
<li class="img-box-item">
|
|
|
<span class="img-box-title">
|
|
|
盘点批次:
|
|
|
</span>
|
|
|
<span class="img-box-value">
|
|
|
{{params.lotnum }}
|
|
|
</span>
|
|
|
|
|
|
</li>
|
|
|
<li class="img-box-item">
|
|
|
<span class="img-box-title">
|
|
|
盘点个数:
|
|
|
</span>
|
|
|
<span class="img-box-value">
|
|
|
{{params.size}}
|
|
|
</span>
|
|
|
</li>
|
|
|
<li class="img-box-item">
|
|
|
<span class="img-box-title">
|
|
|
品规个数:
|
|
|
</span>
|
|
|
<span class="img-box-value">
|
|
|
|
|
|
{{params.sizeCategory }}
|
|
|
</span>
|
|
|
</li><li class="img-box-item">
|
|
|
<span class="img-box-title">
|
|
|
空托盘数:
|
|
|
</span>
|
|
|
<span class="img-box-value">
|
|
|
|
|
|
{{params.type4 }}
|
|
|
</span>
|
|
|
|
|
|
|
|
|
</li><li class="img-box-item">
|
|
|
<span class="img-box-title">
|
|
|
盘点正常:
|
|
|
</span>
|
|
|
<span class="img-box-value">
|
|
|
|
|
|
{{params.type2 }}
|
|
|
</span>
|
|
|
</li>
|
|
|
<li class="img-box-item">
|
|
|
<span class="img-box-title">
|
|
|
盘点异常:
|
|
|
</span>
|
|
|
<span class="img-box-value">
|
|
|
|
|
|
{{params.type1 }}
|
|
|
</span>
|
|
|
</li><li class="img-box-item">
|
|
|
<span class="img-box-title">
|
|
|
人工盘点:
|
|
|
</span>
|
|
|
<span class="img-box-value">
|
|
|
|
|
|
{{params.type3 }}
|
|
|
</span>
|
|
|
</li>
|
|
|
<li class="img-box-item">
|
|
|
<span class="img-box-title">
|
|
|
盘点时间:
|
|
|
</span>
|
|
|
<span class="img-box-value">
|
|
|
{{params.time }}
|
|
|
</span>
|
|
|
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<!-- websocket推送信息 -->
|
|
|
<!-- <a-col :span="6" style="height: 80vh; overflow-y: scroll">
|
|
|
<a-timeline style="margin: 20px">
|
|
|
<a-timeline-item v-for="i in wsData" :key="i.id">{{
|
|
|
getWsData(i)}}</a-timeline-item>
|
|
|
</a-timeline></a-col
|
|
|
> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import Subsection from "./Subsection";
|
|
|
import message from "ant-design-vue";
|
|
|
import { notification } from 'ant-design-vue';
|
|
|
|
|
|
export default {
|
|
|
name: "checkManage",
|
|
|
data() {
|
|
|
return {
|
|
|
timer: "",
|
|
|
leftSide: 1,
|
|
|
rightSide: 1,
|
|
|
data: [],
|
|
|
params:[],
|
|
|
wsData: [],
|
|
|
select: "",
|
|
|
streetId: 0,
|
|
|
streetDetail: {},
|
|
|
streetStockStatusMap: {},
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
|
|
|
mounted() {
|
|
|
this.request();
|
|
|
},
|
|
|
created() {},
|
|
|
activated() {
|
|
|
if (!this.$route.meta.isUseCache) {
|
|
|
console.log("$route.meta.isUseCache false");
|
|
|
// 清空原有数据
|
|
|
this.request(); // 这是我们获取数据的函数
|
|
|
} else {
|
|
|
console.log("$route.meta.isUseCache true");
|
|
|
//this.request();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
//this.initWebSocket();
|
|
|
|
|
|
|
|
|
this.openNotification();
|
|
|
this.timerRequestData = window.setInterval(this.requestData, 10000);
|
|
|
//设置定时器,注意：只有在 created 生命周期中设置的定时器 才能在beforeDestroy 中销毁
|
|
|
// this.timer = window.setInterval(() => {
|
|
|
// setTimeout(this.pollingFunc(), 0);
|
|
|
// }, 2000);
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(this.timerRequestData);
|
|
|
},
|
|
|
destroyed() {
|
|
|
this.websock.close(); //离开路由之后断开websocket连接
|
|
|
},
|
|
|
methods: {
|
|
|
//获取巷道列表
|
|
|
requestData() {
|
|
|
|
|
|
this.openNotification();
|
|
|
this.$api.httpApi
|
|
|
.getAllStreet({})
|
|
|
.then((res) => {
|
|
|
console.log("update data");
|
|
|
console.log(res);
|
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
|
this.$set(this.data, i, res.data[i]);
|
|
|
}
|
|
|
console.log(document.cookie);
|
|
|
if (document.cookie.length > 0) {
|
|
|
console.log(document.cookie);
|
|
|
var c_start = document.cookie.indexOf(c_name + "=");
|
|
|
//如果document.cookie对象里面有cookie则查找是否有指定的cookie，如果有则返回指定的cookie值，如果没有则返回空字符串
|
|
|
if (c_start != -1) {
|
|
|
c_start = c_start + c_name.length + 1;
|
|
|
var c_end = document.cookie.indexOf(";", c_start);
|
|
|
if (c_end == -1) c_end = document.cookie.length;
|
|
|
console.log(
|
|
|
document.cookie.substring(c_start, c_end)
|
|
|
);
|
|
|
this.select = Number(
|
|
|
document.cookie.substring(c_start, c_end)
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
//this.select = res.data[0].id;
|
|
|
//this.selectName = res.data[0].name;
|
|
|
//this.$set(this.select,res.data.list[0].id,0)
|
|
|
//this.getStreetDetail(this.select);
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
openNotification(){
|
|
|
//概况
|
|
|
this.$api.httpApi
|
|
|
.getoverview({})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
console.log(res.data.lotnum);
|
|
|
|
|
|
this.params = res.data;
|
|
|
// notification.open({
|
|
|
// message: '盘点批次号：'+res.data.lotnum,
|
|
|
// description:
|
|
|
// '共盘点'+res.data.size+'个货位，'+res.data.sizeCategory+'个品规，'+res.data.type4+'个其他货物，其中'
|
|
|
// +res.data.type2+'个盘点成功，'+res.data.type1+'个盘点异常，'+res.data.type3+'个人工盘点',
|
|
|
// duration: 0,
|
|
|
// });
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
},
|
|
|
//获取巷道列表
|
|
|
request() {
|
|
|
this.$api.httpApi
|
|
|
.getAllStreet({})
|
|
|
.then((res) => {
|
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
|
console.log(res);
|
|
|
this.$set(this.data, i, res.data[i]);
|
|
|
}
|
|
|
|
|
|
this.select = res.data[0].id;
|
|
|
this.selectName = res.data[0].name;
|
|
|
|
|
|
if (document.cookie.length > 0) {
|
|
|
var c_name = "streetId";
|
|
|
console.log(document.cookie);
|
|
|
var c_start = document.cookie.indexOf(c_name + "=");
|
|
|
//如果document.cookie对象里面有cookie则查找是否有指定的cookie，如果有则返回指定的cookie值，如果没有则返回空字符串
|
|
|
if (c_start != -1) {
|
|
|
c_start = c_start + c_name.length + 1;
|
|
|
var c_end = document.cookie.indexOf(";", c_start);
|
|
|
if (c_end == -1) c_end = document.cookie.length;
|
|
|
console.log(
|
|
|
document.cookie.substring(c_start, c_end)
|
|
|
);
|
|
|
this.select = Number(
|
|
|
document.cookie.substring(c_start, c_end)
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
|
if (res.data[i].id == this.select) {
|
|
|
this.selectName = res.data[i].name;
|
|
|
}
|
|
|
}
|
|
|
//this.$set(this.select,res.data.list[0].id,0)
|
|
|
this.getStreetDetail(this.select);
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
//获取巷道列表
|
|
|
getWsData(e) {
|
|
|
console.log(e);
|
|
|
console.log(this.wsData);
|
|
|
console.log(
|
|
|
e.message.streetName +
|
|
|
(e.message.fromDirection == 1 ? "左侧" : "右侧") +
|
|
|
e.message.fromRow +
|
|
|
"行" +
|
|
|
e.message.fromColumn +
|
|
|
"列" +
|
|
|
(e.message.separation1 == 2 ? "外侧货架" : "内侧货架") +
|
|
|
"发生盘点"
|
|
|
);
|
|
|
return (
|
|
|
e.message.streetName +
|
|
|
(e.message.fromDirection == 1 ? "左侧" : "右侧") +
|
|
|
e.message.fromRow +
|
|
|
"行" +
|
|
|
e.message.fromColumn +
|
|
|
"列" +
|
|
|
(e.message.separation1 == 2 ? "外侧货架" : "内侧货架") +
|
|
|
"发生盘点"
|
|
|
);
|
|
|
},
|
|
|
//获取巷道详情
|
|
|
getStreetDetail(id) {
|
|
|
this.$axios
|
|
|
.get("/street/" + id, {
|
|
|
data: {},
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.streetDetail = res.data;
|
|
|
//this.getStockRowColumn()
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
|
|
|
handleChange(value) {
|
|
|
this.select = value;
|
|
|
|
|
|
document.cookie = "streetId=" + value + ";";
|
|
|
|
|
|
for (let i = 0; i < this.data.length; i++) {
|
|
|
if (this.data[i].id == this.select) {
|
|
|
this.selectName = this.data[i].name;
|
|
|
}
|
|
|
}
|
|
|
console.log(document.cookie);
|
|
|
this.getStreetDetail(value);
|
|
|
},
|
|
|
|
|
|
exportStock() {
|
|
|
this.$api.httpApi
|
|
|
.exportStock({
|
|
|
params: {
|
|
|
streetId: this.select,
|
|
|
},
|
|
|
})
|
|
|
.then((res) => {
|
|
|
let blob = new Blob([res], {
|
|
|
type: "application/vnd.ms-excel",
|
|
|
});
|
|
|
this.$utils.downloadFile(
|
|
|
this.streetDetail.name + "-盘点列表.xls",
|
|
|
blob
|
|
|
);
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
exportAllStock() {
|
|
|
this.$utils.downloadFileUrl("盘点列表.xls", "/api/stock/exportAll");
|
|
|
},
|
|
|
allStockCheck() {
|
|
|
console.log("全部盘点");
|
|
|
this.$api.httpApi
|
|
|
.allStockCheck({})
|
|
|
.then((res) => {
|
|
|
message.success("全部盘点完成", 10);
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
allStockClear() {
|
|
|
console.log("清空盘点");
|
|
|
this.$api.httpApi
|
|
|
.allStockClear({})
|
|
|
.then((res) => {
|
|
|
message.success("盘点清空", 10);
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
},
|
|
|
components: {
|
|
|
Subsection,
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.check-page {
|
|
|
position: relative;
|
|
|
|
|
|
.title-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: start;
|
|
|
|
|
|
.explain {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.info-text {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ant-tag {
|
|
|
margin-right: 0;
|
|
|
display: block;
|
|
|
line-height: 25px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.roadway-top,
|
|
|
roadway-buttom {
|
|
|
padding: 5px 0;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.roadway-box {
|
|
|
transform: rotateX(180deg);
|
|
|
padding: 10px 10px 0 0;
|
|
|
.line {
|
|
|
display: flex;
|
|
|
transform: rotateX(
|
|
|
180deg
|
|
|
); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
|
|
|
|
|
|
.el {
|
|
|
width: 46px;
|
|
|
height: 25px;
|
|
|
line-height: 25px;
|
|
|
margin: 2px;
|
|
|
font-size: 12px;
|
|
|
text-align: center;
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
.default {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.center-box {
|
|
|
width: 500px;
|
|
|
height: 52px;
|
|
|
line-height: 52px;
|
|
|
.shelf-number {
|
|
|
display: inline-block;
|
|
|
width: 200px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.img-box {
|
|
|
display: flex;
|
|
|
padding: 50px;
|
|
|
margin-right: 56px;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex-direction: column;
|
|
|
font-size: 17px;
|
|
|
height: 900px;
|
|
|
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: #fed54d;
|
|
|
margin: 10px 0;
|
|
|
padding: 5px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
color: #494e52;
|
|
|
.img-box-title {
|
|
|
width: 40%;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
.img-box-value {
|
|
|
display: inline-block;
|
|
|
width: calc(100% - 130px);
|
|
|
overflow: hidden;
|
|
|
width: 60%;
|
|
|
position: relative;
|
|
|
top: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.button-box {
|
|
|
position: absolute;
|
|
|
top: 20px;
|
|
|
right: 40px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
.export-all {
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|