|
|
|
|
@ -1,187 +1,294 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="check-page">
|
|
|
|
|
<div class="button-box">
|
|
|
|
|
<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="button-box">
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<a-tag
|
|
|
|
|
color="#1afa29"
|
|
|
|
|
style="width: 30px; height: 20px; margin-right: 6px"
|
|
|
|
|
></a-tag>
|
|
|
|
|
盘点正确
|
|
|
|
|
</span>
|
|
|
|
|
<span class="info-text">
|
|
|
|
|
<a-tag
|
|
|
|
|
color="#f2ed48"
|
|
|
|
|
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>
|
|
|
|
|
<a-tag
|
|
|
|
|
color="#bfbfbf"
|
|
|
|
|
style="width: 30px; height: 20px; margin-right: 6px"
|
|
|
|
|
></a-tag>
|
|
|
|
|
未盘点
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
<a-select @change="handleChange" style="width:200px" v-model="select">
|
|
|
|
|
<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}}
|
|
|
|
|
{{ i.name }}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<a-col :span="24">
|
|
|
|
|
<!--左货架DOM-->
|
|
|
|
|
<div class="center-box">
|
|
|
|
|
<span class="shelf-number"> 左侧货架 </span>
|
|
|
|
|
|
|
|
|
|
<!--左货架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="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>
|
|
|
|
|
|
|
|
|
|
<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 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>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<!-- 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";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name:'checkManage',
|
|
|
|
|
name: "checkManage",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
timer: "",
|
|
|
|
|
leftSide: 1,
|
|
|
|
|
rightSide: 1,
|
|
|
|
|
data: [],
|
|
|
|
|
select: '',
|
|
|
|
|
wsData: [],
|
|
|
|
|
select: "",
|
|
|
|
|
streetId: 0,
|
|
|
|
|
streetDetail: {},
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
computed: {},
|
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
this.request();
|
|
|
|
|
},
|
|
|
|
|
created(){
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
created() {},
|
|
|
|
|
activated() {
|
|
|
|
|
if(!this.$route.meta.isUseCache){
|
|
|
|
|
console.log("$route.meta.isUseCache false")
|
|
|
|
|
if (!this.$route.meta.isUseCache) {
|
|
|
|
|
console.log("$route.meta.isUseCache false");
|
|
|
|
|
// 清空原有数据
|
|
|
|
|
this.request();// 这是我们获取数据的函数
|
|
|
|
|
}else{
|
|
|
|
|
console.log("$route.meta.isUseCache true")
|
|
|
|
|
//this.request();
|
|
|
|
|
this.request(); // 这是我们获取数据的函数
|
|
|
|
|
} else {
|
|
|
|
|
console.log("$route.meta.isUseCache true");
|
|
|
|
|
//this.request();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
created() {
|
|
|
|
|
this.initWebSocket();
|
|
|
|
|
//设置定时器,注意：只有在 created 生命周期中设置的定时器 才能在beforeDestroy 中销毁
|
|
|
|
|
this.timer = window.setInterval(() => {
|
|
|
|
|
setTimeout(this.pollingFunc(), 0);
|
|
|
|
|
}, 1000);
|
|
|
|
|
},
|
|
|
|
|
destroyed() {
|
|
|
|
|
this.websock.close(); //离开路由之后断开websocket连接
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//获取巷道列表
|
|
|
|
|
request() {
|
|
|
|
|
this.$api.httpApi.getAllStreet({
|
|
|
|
|
}).then(res => {
|
|
|
|
|
console.log("update data")
|
|
|
|
|
for(let i = 0;i<res.data.length;i++){
|
|
|
|
|
|
|
|
|
|
this.$set(this.data,i,res.data[i])
|
|
|
|
|
}
|
|
|
|
|
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 => {
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
this.$api.httpApi
|
|
|
|
|
.getAllStreet({})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log("update data");
|
|
|
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
|
|
|
this.$set(this.data, i, res.data[i]);
|
|
|
|
|
}
|
|
|
|
|
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) => {});
|
|
|
|
|
},
|
|
|
|
|
//获取巷道列表
|
|
|
|
|
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 => {
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
this.$axios
|
|
|
|
|
.get("/street/" + id, {
|
|
|
|
|
data: {},
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
this.streetDetail = res.data;
|
|
|
|
|
//this.getStockRowColumn()
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleChange(value) {
|
|
|
|
|
|
|
|
|
|
this.select = value
|
|
|
|
|
|
|
|
|
|
this.getStreetDetail(value)
|
|
|
|
|
this.select = value;
|
|
|
|
|
|
|
|
|
|
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 => {
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
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');
|
|
|
|
|
|
|
|
|
|
this.$utils.downloadFileUrl("盘点列表.xls", "/api/stock/exportAll");
|
|
|
|
|
},
|
|
|
|
|
allStockCheck() {
|
|
|
|
|
console.log("全部盘点");
|
|
|
|
|
this.$api.httpApi
|
|
|
|
|
.allStockCheck({})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
message.success("全部盘点完成", 10);
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {});
|
|
|
|
|
},
|
|
|
|
|
initWebSocket() {
|
|
|
|
|
//初始化weosocket
|
|
|
|
|
const wsuri = "ws://127.0.0.1:8099/ws/111";
|
|
|
|
|
this.websock = new WebSocket(wsuri);
|
|
|
|
|
this.websock.onmessage = this.websocketonmessage;
|
|
|
|
|
this.websock.onopen = this.websocketonopen;
|
|
|
|
|
this.websock.onerror = this.websocketonerror;
|
|
|
|
|
this.websock.onclose = this.websocketclose;
|
|
|
|
|
},
|
|
|
|
|
websocketonopen() {
|
|
|
|
|
//连接建立之后执行send方法发送数据
|
|
|
|
|
this.websocketsend(JSON.stringify(actions));
|
|
|
|
|
},
|
|
|
|
|
websocketonerror() {
|
|
|
|
|
//连接建立失败重连
|
|
|
|
|
this.initWebSocket();
|
|
|
|
|
},
|
|
|
|
|
websocketonmessage(e) {
|
|
|
|
|
console.log("aaaa");
|
|
|
|
|
var el = JSON.parse(e.data)
|
|
|
|
|
console.log(el.type);
|
|
|
|
|
|
|
|
|
|
if (el.type == "InventoryPush") {
|
|
|
|
|
this.wsData.push(el);
|
|
|
|
|
}
|
|
|
|
|
//数据接收
|
|
|
|
|
const redata = JSON.parse(e.data);
|
|
|
|
|
},
|
|
|
|
|
websocketsend(Data) {
|
|
|
|
|
//数据发送
|
|
|
|
|
this.websock.send(Data);
|
|
|
|
|
},
|
|
|
|
|
websocketclose(e) {
|
|
|
|
|
//关闭
|
|
|
|
|
console.log("断开连接", e);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
Subsection,
|
|
|
|
|
},
|
|
|
|
|
components: {Subsection}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.check-page {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.title-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@ -207,7 +314,8 @@ export default {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.roadway-top, roadway-buttom {
|
|
|
|
|
.roadway-top,
|
|
|
|
|
roadway-buttom {
|
|
|
|
|
padding: 5px 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
@ -217,7 +325,9 @@ export default {
|
|
|
|
|
padding: 10px 10px 0 0;
|
|
|
|
|
.line {
|
|
|
|
|
display: flex;
|
|
|
|
|
transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
|
|
|
|
|
transform: rotateX(
|
|
|
|
|
180deg
|
|
|
|
|
); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
|
|
|
|
|
|
|
|
|
|
.el {
|
|
|
|
|
width: 46px;
|
|
|
|
|
@ -249,21 +359,18 @@ export default {
|
|
|
|
|
width: 200px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top:20px;
|
|
|
|
|
right: 40px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.export-all {
|
|
|
|
|
.button-box {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20px;
|
|
|
|
|
right: 40px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.export-all {
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
LAPTOP-S9HJSOEB\昊天
3 years ago