2021.11.17需求
dydwang
4 years ago
parent
0e1e633929
commit
5d40a43e55
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 234 KiB |
@ -0,0 +1,255 @@
|
||||
<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>
|
||||
Loading…
Reference in New Issue