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.
256 lines
8.8 KiB
Vue
256 lines
8.8 KiB
Vue
4 years ago
|
<template>
|
||
|
|
<div class="subsection">
|
||
|
|
<a-layout style="width: 900px">
|
||
|
|
<a-layout style="width: 100%;height: 310px">
|
||
|
|
<a-layout-sider width="110px">
|
||
|
|
<a-tabs default-active-key="1" tab-position="left" @change="value => select.column = value" v-if="total.column > nums.column">
|
||
|
|
<a-tab-pane
|
||
|
|
v-for="index in latticeColumn"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<span slot="tab">
|
||
|
|
{{ getRandom(index, latticeColumn, nums.column, total.column) }}
|
||
|
|
<a-icon type="close-circle" v-if="status.column[index] === 1" style="color: #d81e06" />
|
||
|
|
<a-icon type="check-circle" v-else-if="status.column[index] === 2" style="color: #1afa29" />
|
||
|
|
<a-icon type="exclamation-circle" v-else style="color: #909399" />
|
||
|
|
</span>
|
||
|
|
</a-tab-pane>
|
||
|
|
</a-tabs>
|
||
|
|
</a-layout-sider>
|
||
|
|
<a-layout-content>
|
||
|
|
<slot :data="{select, nums, random}"></slot>
|
||
|
|
</a-layout-content>
|
||
|
|
</a-layout>
|
||
|
|
<a-layout-footer>
|
||
|
|
<a-tabs default-active-key="1" tab-position="bottom" @change="value => select.row = value" v-if="total.row > nums.row">
|
||
|
|
<a-tab-pane
|
||
|
|
v-for="index in latticeRow"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<span slot="tab">
|
||
|
|
{{ getRandom(index, latticeRow, nums.row, total.row) }}
|
||
|
|
<a-icon type="close-circle" v-if="status.row[index] === 1" style="color: #d81e06" />
|
||
|
|
<a-icon type="check-circle" v-else-if="status.row[index] === 2" style="color: #1afa29" />
|
||
|
|
<a-icon type="exclamation-circle" v-else style="color: #909399" />
|
||
|
|
</span>
|
||
|
|
</a-tab-pane>
|
||
|
|
</a-tabs>
|
||
|
|
</a-layout-footer>
|
||
|
|
</a-layout>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "Subsection",
|
||
|
|
components: {},
|
||
|
|
props: {
|
||
|
|
// 默认行第一个 列第一个
|
||
|
|
select: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {
|
||
|
|
row: 1,
|
||
|
|
column: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 总共数据
|
||
|
|
total: {
|
||
|
|
row: 1,
|
||
|
|
column: 1
|
||
|
|
},
|
||
|
|
nums: {
|
||
|
|
// 行20个 列10个
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {
|
||
|
|
row: 15,
|
||
|
|
column: 10
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
stockInfo: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
// 应有的格子数
|
||
|
|
latticeRow() {
|
||
|
|
return parseInt(this.total.row / this.nums.row) + (this.total.row % this.nums.row > 0 ? 1 : 0);
|
||
|
|
},
|
||
|
|
latticeColumn() {
|
||
|
|
return parseInt(this.total.column / this.nums.column) + (this.total.column % this.nums.column > 0 ? 1 : 0);
|
||
|
|
},
|
||
|
|
random() {
|
||
|
|
return {
|
||
|
|
row: this.getRandomRow(this.select.row),
|
||
|
|
column: this.getRandomColumn(this.select.column),
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watchStockInfo() {
|
||
|
|
return JSON.stringify(this.stockInfo);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
watchStockInfo() {
|
||
|
|
this.getStatus();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
status: {
|
||
|
|
row: {},
|
||
|
|
column: {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getStatus();
|
||
|
|
},
|
||
|
|
destroyed() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取行或列的范围字符串
|
||
|
|
getRandom(index, lattice, num, total) {
|
||
|
|
if(index !== lattice) {
|
||
|
|
return `${(index - 1) * num + 1} - ${index * num}`;
|
||
|
|
}else {
|
||
|
|
return `${(index - 1) * num + 1} - ${total}`;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取行和列的范围数组
|
||
|
|
getRandomRow(val) {
|
||
|
|
return this.getRandom(val, this.latticeRow, this.nums.row, this.total.row).split(' - ').map(item => Number(item));
|
||
|
|
},
|
||
|
|
getRandomColumn(val) {
|
||
|
|
return this.getRandom(val, this.latticeColumn, this.nums.column, this.total.column).split(' - ').map(item => Number(item));
|
||
|
|
},
|
||
|
|
// 获取某段的状态
|
||
|
|
fragmentStatus(type, val) {
|
||
|
|
let status0 = false;// 未盘点
|
||
|
|
let status1 = false;// 盘点错误
|
||
|
|
let rowStart = 1, rowEnd = this.total.row;
|
||
|
|
let columnStart = 1, columnEnd = this.total.column;
|
||
|
|
if(type === 'row') {
|
||
|
|
[rowStart, rowEnd] = this.getRandomRow(val);
|
||
|
|
}else {
|
||
|
|
[columnStart, columnEnd] = this.getRandomColumn(val);
|
||
|
|
}
|
||
|
|
console.log(rowStart, rowEnd, columnStart, columnEnd);
|
||
|
|
// 判断盘点错误与未盘点
|
||
|
|
// for(let row = rowStart; row++; row <= rowEnd) {
|
||
|
|
// for(let column = columnStart; column++; column <= columnEnd) {
|
||
|
|
// let rowColStatus = (this.stockInfo[`${row}-${column}`] || {}).status;
|
||
|
|
// if(!rowColStatus) {
|
||
|
|
// // 未盘点
|
||
|
|
// status0 = true;
|
||
|
|
// }else if(rowColStatus === 1) {
|
||
|
|
// // 盘点错误
|
||
|
|
// status1 = true;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// if(status1) {
|
||
|
|
// return 1; // 盘点错误
|
||
|
|
// }else if(status0) {
|
||
|
|
// return 0; // 未盘点
|
||
|
|
// }else {
|
||
|
|
// return 2; // 盘点成功
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
async getStatus() {
|
||
|
|
// for(let i = 1 ; i++; i < this.latticeRow) {
|
||
|
|
// let rowColumn = this.getRandomRow(i);
|
||
|
|
// this.status.row[i] = this.fragmentStatus('row', i);
|
||
|
|
// }
|
||
|
|
//
|
||
|
|
// for(let i = 1 ; i++; i < this.latticeColumn) {
|
||
|
|
// let rowColumn = this.getRandomColumn(i);
|
||
|
|
// this.status.column[i] = this.fragmentStatus('column', i);
|
||
|
|
// }
|
||
|
|
|
||
|
|
for(let row = 1; row <= this.total.row; row++) {
|
||
|
|
for(let column = 1; column <= this.total.column; column++) {
|
||
|
|
let status = (this.stockInfo[`${row}-${column}`] || {}).status || 0;
|
||
|
|
if(status < 2) {
|
||
|
|
// 当前是在第几段
|
||
|
|
let latticeRow = parseInt(row / this.nums.row) + (row % this.nums.row > 0 ? 1 : 0);
|
||
|
|
let latticeColumn = parseInt(column / this.nums.column) + (column % this.nums.column > 0 ? 1 : 0);
|
||
|
|
if(status === 1) {
|
||
|
|
console.log('第几段', latticeRow, latticeColumn);
|
||
|
|
console.log(row, column,status);
|
||
|
|
this.$set(this.status.row, latticeRow, status);
|
||
|
|
this.$set(this.status.column, latticeColumn, status);
|
||
|
|
}else {
|
||
|
|
if(!this.status.row[latticeRow]) this.$set(this.status.row, latticeRow, status);
|
||
|
|
if(!this.status.column[latticeColumn]) this.$set(this.status.column, latticeColumn, status);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
console.log(this.status);
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.subsection /deep/{
|
||
|
|
width: 100%;
|
||
|
|
height: 360px;
|
||
|
|
overflow: hidden;
|
||
|
|
.ant-tabs-nav .ant-tabs-tab {
|
||
|
|
// padding: 0;
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
||
|
|
&:hover{
|
||
|
|
background: #40a9ff;
|
||
|
|
border-color: #40a9ff;
|
||
|
|
}
|
||
|
|
background: #40a9ff;
|
||
|
|
border-color: #40a9ff;
|
||
|
|
box-shadow: -1px 0 0 0 #40a9ff;
|
||
|
|
}
|
||
|
|
.ant-radio-button-wrapper-checked {
|
||
|
|
box-shadow: -1px 0 0 0 #40a9ff;
|
||
|
|
}
|
||
|
|
.radio-button-cell {
|
||
|
|
width: 100px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.ant-layout-sider {
|
||
|
|
height: 100%;
|
||
|
|
.ant-tabs {
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ant-tabs-tab {
|
||
|
|
padding: 8px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
width: 104px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ant-layout-footer {
|
||
|
|
// width: 500px;
|
||
|
|
padding: 0 0 0 110px;
|
||
|
|
.ant-tabs {
|
||
|
|
// width: 735px;
|
||
|
|
}
|
||
|
|
.ant-tabs-bottom-bar {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ant-layout, .ant-layout-sider, .ant-layout-footer {
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|