|
|
<template>
|
|
|
<div class="check-page">
|
|
|
<div class="title-info">
|
|
|
<span class="explain">颜色说明：</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag color="#d81e06" style="width:30px;height:20px"></a-tag>
|
|
|
盘点错误
|
|
|
</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag color="#1afa29" style="width:30px;height:20px"></a-tag>
|
|
|
盘点正确
|
|
|
</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag color="#bfbfbf" style="width:30px;height:20px"></a-tag>
|
|
|
未盘点
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="check-content" v-for="list in data" :key="list">
|
|
|
<div class="roadway-top">
|
|
|
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
|
|
|
<div class="roadway-box">
|
|
|
<div class="line" v-for="item in Number(list.leftColumn)" :key="item">
|
|
|
<div
|
|
|
class="ele"
|
|
|
:style="{background:i+'-'+item == '4-14'|| i+'-'+item=='8-18'?'#bfbfbf':'#bfbfbf'}"
|
|
|
v-for="i in Number(list.leftRow)"
|
|
|
:key="i">{{i}}-{{item}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</happy-scroll>
|
|
|
<!-- <a-radio-group v-model="size" style="margin:10px 0">-->
|
|
|
<!-- <a-radio-button value="small">-->
|
|
|
<!-- 外-->
|
|
|
<!-- </a-radio-button>-->
|
|
|
<!-- <a-radio-button value="default">-->
|
|
|
<!-- 内-->
|
|
|
<!-- </a-radio-button>-->
|
|
|
<!-- </a-radio-group>-->
|
|
|
</div>
|
|
|
<a-select :default-value="list.name" style="width: 180px">
|
|
|
<a-select-option :value="list.name">
|
|
|
{{list.name}}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
<div class="roadway-buttom">
|
|
|
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
|
|
|
<div class="roadway-box">
|
|
|
<div class="line" v-for="item in Number(list.rightColumn)" :key="item">
|
|
|
<div class="ele"
|
|
|
:style="{background:i+'-'+item == '5-16'|| i+'-'+item=='9-17'||i+'-'+item=='11-15'?'#bfbfbf':'#bfbfbf'}"
|
|
|
v-for="i in Number(list.rightRow)"
|
|
|
:key="i">{{i}}-{{item}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</happy-scroll>
|
|
|
<!-- <a-radio-group v-model="size2" style="margin:10px 0">-->
|
|
|
<!-- <a-radio-button value="small">-->
|
|
|
<!-- 外-->
|
|
|
<!-- </a-radio-button>-->
|
|
|
<!-- <a-radio-button value="default">-->
|
|
|
<!-- 内-->
|
|
|
<!-- </a-radio-button>-->
|
|
|
<!-- </a-radio-group>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
size: 'small',
|
|
|
size2: 'small',
|
|
|
data: '',
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.request()
|
|
|
},
|
|
|
methods: {
|
|
|
request() {
|
|
|
this.$api.httpApi.getStreetList({
|
|
|
data: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
}
|
|
|
}).then(res => {
|
|
|
this.data = res.data.list;
|
|
|
}).catch(err => {
|
|
|
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
components: {}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.check-page {
|
|
|
.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 {
|
|
|
padding: 20px 0;
|
|
|
width: 1000px;
|
|
|
}
|
|
|
|
|
|
.roadway-buttom {
|
|
|
padding: 20px 0;
|
|
|
width: 1000px;
|
|
|
}
|
|
|
|
|
|
.scroll-box {
|
|
|
height: 270px;
|
|
|
|
|
|
.roadway-box {
|
|
|
transform: rotateX(180deg);
|
|
|
padding: 10px 10px 0 0;
|
|
|
|
|
|
.line {
|
|
|
display: flex;
|
|
|
transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
|
|
|
.ele {
|
|
|
width: 46px;
|
|
|
height: 25px;
|
|
|
margin: 1px 2px;
|
|
|
text-align: center;
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|