This commit is contained in:
2023-10-13 16:09:30 +08:00
parent 78796203f6
commit d51328c836
49 changed files with 985 additions and 600 deletions

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2023-08-21 14:26:23
* @LastEditors: zwq
* @LastEditTime: 2023-10-10 16:05:52
* @LastEditTime: 2023-10-12 15:12:25
* @Description:
-->
<template>
@@ -12,35 +12,39 @@
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div class="tips">
<el-tag effect="dark" color="#7362F3" style="border:none"></el-tag>
<el-tag effect="dark" color="#16DC09" style="border:none"></el-tag>
<el-tag effect="dark" color="#FFA08F" style="border:none"></el-tag>
<el-tag effect="dark" color="#7362F3" style="border: none"></el-tag>
<el-tag effect="dark" color="#16DC09" style="border: none"></el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none"></el-tag>
</div>
<div class="mainbody">
<div v-for="a in listQuery.total" :key="a">
<div v-for="i in listQuery.total" :key="i">
<el-row>
<el-col :span="24">
<el-row>
<el-row type="flex" class="flex-warp">
<div
class="dashboard-layout-item"
v-for="a in wareData.one"
:key="a.id+a.warehouseStorehouseCode"
style="background: #FFF8E8; float: left">
v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
:key="a.id + a.warehouseStorehouseCode"
style="background: #fff8e8; float: left">
<div
class="dashboard-layout-item-cricle"
:style="{background: bgColor[a.warehouseStorehouseState]}" />
:style="{
background: bgColor[a.warehouseStorehouseState],
}" />
{{ a.warehouseStorehouseName }}
</div>
</el-row>
<el-row>
<el-row type="flex" class="flex-warp">
<div
class="dashboard-layout-item"
v-for="b in wareData.two"
:key="b.id+b.warehouseStorehouseCode"
style="background: #FFF8E8; float: left">
v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
:key="b.id + b.warehouseStorehouseCode"
style="background: #fff8e8; float: left">
<div
class="dashboard-layout-item-cricle"
:style="{background: bgColor[b.warehouseStorehouseState]}" />
:style="{
background: bgColor[b.warehouseStorehouseState],
}" />
{{ b.warehouseStorehouseName }}
</div>
</el-row>
@@ -49,27 +53,31 @@
<el-divider class="divider"></el-divider>
<el-row>
<el-col :span="24">
<el-row>
<el-row type="flex" class="flex-warp">
<div
class="dashboard-layout-item"
v-for="c in wareData.there"
:key="c.id+c.warehouseStorehouseCode"
style="background: #FFF8E8; float: left">
v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
:key="c.id + c.warehouseStorehouseCode"
style="background: #fff8e8; float: left">
<div
class="dashboard-layout-item-cricle"
:style="{background: bgColor[c.warehouseStorehouseState]}" />
:style="{
background: bgColor[c.warehouseStorehouseState],
}" />
{{ c.warehouseStorehouseName }}
</div>
</el-row>
<el-row>
<el-row type="flex" class="flex-warp">
<div
class="dashboard-layout-item"
v-for="d in wareData.four"
:key="d.id+d.warehouseStorehouseCode"
style="background: #FFF8E8; float: left">
v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
:key="d.id + d.warehouseStorehouseCode"
style="background: #fff8e8; float: left">
<div
class="dashboard-layout-item-cricle"
:style="{background: bgColor[d.warehouseStorehouseState]}" />
:style="{
background: bgColor[d.warehouseStorehouseState],
}" />
{{ d.warehouseStorehouseName }}
</div>
</el-row>
@@ -82,7 +90,10 @@
<script>
import basicPage from '../mixins/basic-page';
import { getWarehouseStorehouseList,exportWarehouseStorehouseExcel } from '@/api/asrs/warehouseStorehouse';
import {
getWarehouseStorehouseList,
exportWarehouseStorehouseExcel,
} from '@/api/asrs/warehouseStorehouse';
export default {
mixins: [basicPage],
@@ -90,9 +101,10 @@ export default {
return {
urlOptions: {
getDataListURL: getWarehouseStorehouseList,
exportURL: exportWarehouseStorehouseExcel,
exportURL: exportWarehouseStorehouseExcel,
},
listQuery: {
stacker: 1,
wareLayer: 1,
total: 0,
},
@@ -102,8 +114,22 @@ export default {
there: [],
four: [],
},
bgColor:['#16DC09','#FFA08F','#7362F3'],
bgColor: ['#16DC09', '#FFA08F', '#7362F3'],
formConfig: [
{
type: 'select',
label: '选择堆垛机',
selectOptions: [
{ id: 1, name: '一号堆垛机' },
{ id: 2, name: '二号堆垛机' },
{ id: 3, name: '三号堆垛机' },
{ id: 4, name: '四号堆垛机' },
],
param: 'stacker',
filterable: true,
defaultSelect: 1,
clearable: false,
},
{
type: 'select',
label: '选择层',
@@ -128,45 +154,45 @@ export default {
type: 'button',
btnName: '下载',
name: 'export',
plain: true,
plain: true,
color: 'primary',
},
],
};
},
components: {},
created() {
},
created() {},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.wareData= {
(this.wareData = {
one: [],
two: [],
there: [],
four: [],
},
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
}
}),
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
}
});
this.listQuery.total = Math.ceil(response.data.length / 40);
this.dataListLoading = false;
});
this.listQuery.total = Math.ceil(response.data.length / 120);
this.dataListLoading = false;
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.wareLayer = val.value;
this.listQuery.stacker = val.stacker;
this.getDataList();
break;
case 'export':
@@ -183,33 +209,46 @@ export default {
<style lang="scss" scoped>
.mainbody {
display: flex;
gap: 50px;
gap: 70px;
flex-direction: column;
}
.flex-warp {
flex-wrap: nowrap;
}
.dashboard-layout-item {
width: 80px;
width: 100px;
text-align: center;
height: 32px;
box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
border-radius: 2px 4px 4px 2px;
margin-bottom: 8px;
margin: 0 3px 8px 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.dashboard-layout-item-cricle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 6px;
margin-right: 6px;
position: absolute;
top: 10px;
left: 5px;
}
&:hover {
cursor: pointer;
z-index: 10;
transform: scale(1.3) translateZ(0);
}
&:nth-child(2n) {
margin-right: 24px;
}
&:nth-child(2n) {
margin-right: 30px;
}
&:first-child {
margin-left: 50px;
}
&:last-child {
margin-right: 30px;
}
}
.el-divider--horizontal {
margin: 10px 0;

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2023-08-21 14:26:23
* @LastEditors: zwq
* @LastEditTime: 2023-10-10 15:41:01
* @LastEditTime: 2023-10-12 15:11:54
* @Description:
-->
<template>
@@ -12,35 +12,39 @@
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div class="tips">
<el-tag type="info" color="#D8E5FF"></el-tag>
<el-tag type="info" color="#FFF8E8"></el-tag>
<el-tag type="info" color="#F6F6F6"></el-tag>
<el-tag effect="dark" color="#7362F3" style="border: none"></el-tag>
<el-tag effect="dark" color="#16DC09" style="border: none"></el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none"></el-tag>
</div>
<div class="mainbody">
<div v-for="a in listQuery.total" :key="a">
<div v-for="i in listQuery.total" :key="i">
<el-row>
<el-col :span="24">
<el-row>
<el-row type="flex" class="flex-warp">
<div
class="dashboard-layout-item"
v-for="a in wareData.one"
:key="a.id+a.warehouseStorehouseCode"
:style="{background: bgColor[a.warehouseStorehouseState], float: 'left'}">
<!-- <div
v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
:key="a.id + a.warehouseStorehouseCode"
style="background: #fff8e8; float: left">
<div
class="dashboard-layout-item-cricle"
style="background: #16dc09" /> -->
:style="{
background: bgColor[a.warehouseStorehouseState],
}" />
{{ a.warehouseStorehouseName }}
</div>
</el-row>
<el-row>
<el-row type="flex" class="flex-warp">
<div
class="dashboard-layout-item"
v-for="b in wareData.two"
:key="b.id+b.warehouseStorehouseCode"
:style="{background: bgColor[b.warehouseStorehouseState], float: 'left'}">
<!-- <div
v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
:key="b.id + b.warehouseStorehouseCode"
style="background: #fff8e8; float: left">
<div
class="dashboard-layout-item-cricle"
style="background: #16dc09" /> -->
:style="{
background: bgColor[b.warehouseStorehouseState],
}" />
{{ b.warehouseStorehouseName }}
</div>
</el-row>
@@ -49,27 +53,31 @@
<el-divider class="divider"></el-divider>
<el-row>
<el-col :span="24">
<el-row>
<el-row type="flex" class="flex-warp">
<div
class="dashboard-layout-item"
v-for="c in wareData.there"
:key="c.id+c.warehouseStorehouseCode"
:style="{background: bgColor[c.warehouseStorehouseState], float: 'left'}">
<!-- <div
v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
:key="c.id + c.warehouseStorehouseCode"
style="background: #fff8e8; float: left">
<div
class="dashboard-layout-item-cricle"
style="background: #16dc09" /> -->
:style="{
background: bgColor[c.warehouseStorehouseState],
}" />
{{ c.warehouseStorehouseName }}
</div>
</el-row>
<el-row>
<el-row type="flex" class="flex-warp">
<div
class="dashboard-layout-item"
v-for="d in wareData.four"
:key="d.id+d.warehouseStorehouseCode"
:style="{background: bgColor[d.warehouseStorehouseState], float: 'left'}">
<!-- <div
v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
:key="d.id + d.warehouseStorehouseCode"
style="background: #fff8e8; float: left">
<div
class="dashboard-layout-item-cricle"
style="background: #16dc09" /> -->
:style="{
background: bgColor[d.warehouseStorehouseState],
}" />
{{ d.warehouseStorehouseName }}
</div>
</el-row>
@@ -82,7 +90,10 @@
<script>
import basicPage from '../mixins/basic-page';
import { getWarehouseStorehouseList,exportWarehouseStorehouseExcel } from '@/api/asrs/warehouseStorehouse';
import {
getWarehouseStorehouseList,
exportWarehouseStorehouseExcel,
} from '@/api/asrs/warehouseStorehouse';
export default {
mixins: [basicPage],
@@ -90,9 +101,10 @@ export default {
return {
urlOptions: {
getDataListURL: getWarehouseStorehouseList,
exportURL: exportWarehouseStorehouseExcel,
exportURL: exportWarehouseStorehouseExcel,
},
listQuery: {
//stacker: 1,
wareLayer: 1,
total: 0,
},
@@ -102,8 +114,22 @@ export default {
there: [],
four: [],
},
bgColor:['#FFF8E8','#F6F6F6','#D8E5FF'],
bgColor: ['#16DC09', '#FFA08F', '#7362F3'],
formConfig: [
{
type: 'select',
label: '选择堆垛机',
selectOptions: [
{ id: 1, name: '一号堆垛机' },
{ id: 2, name: '二号堆垛机' },
{ id: 3, name: '三号堆垛机' },
{ id: 4, name: '四号堆垛机' },
],
param: 'stacker',
filterable: true,
defaultSelect: 1,
clearable: false,
},
{
type: 'select',
label: '选择层',
@@ -128,7 +154,7 @@ export default {
type: 'button',
btnName: '下载',
name: 'export',
plain: true,
plain: true,
color: 'primary',
},
],
@@ -142,32 +168,33 @@ export default {
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.wareData= {
(this.wareData = {
one: [],
two: [],
there: [],
four: [],
},
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
}
}),
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
}
});
this.listQuery.total = Math.ceil(response.data.length / 40);
this.dataListLoading = false;
});
this.listQuery.total = Math.ceil(response.data.length / 120);
this.dataListLoading = false;
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.wareLayer = val.value;
this.listQuery.stacker = val.stacker;
this.getDataList();
break;
case 'export':
@@ -184,30 +211,46 @@ export default {
<style lang="scss" scoped>
.mainbody {
display: flex;
gap: 50px;
gap: 70px;
flex-direction: column;
}
.flex-warp {
flex-wrap: nowrap;
}
.dashboard-layout-item {
width: 3.3%;
width: 100px;
text-align: center;
height: 40px;
height: 32px;
box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
border-radius: 2px 4px 4px 2px;
margin-bottom: 4px;
margin: 0 3px 8px 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.dashboard-layout-item-cricle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 6px;
margin-right: 6px;
position: absolute;
top: 10px;
left: 5px;
}
&:hover {
cursor: pointer;
z-index: 10;
transform: scale(1.3) translateZ(0);
}
&:nth-child(2n) {
margin-right: 30px;
}
&:first-child {
margin-left: 50px;
}
&:last-child {
margin-right: 30px;
}
}
.el-divider--horizontal {
margin: 10px 0;