wms-njlm/src/views/fpw/warehouseLocationMonitoring/index.vue

<!--
 * @Author: zwq
 * @Date: 2023-08-21 14:26:23
 * @LastEditors: zwq
 * @LastEditTime: 2023-10-08 09:20:40
 * @Description:
-->
<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<div class="tips">
			<el-tag effect="dark">满</el-tag>
			<el-tag type="success" effect="dark">空</el-tag>
			<el-tag type="warning" effect="dark">锁</el-tag>
		</div>
		<div class="mainbody">
			<div v-for="i in listQuery.total" :key="i">
				<el-row>
					<el-col :span="24">
						<el-row>
							<div
								class="dashboard-layout-item"
								v-for="a in wareData.one"
								:key="a.id+a.warehouseStorehouseCode"
								:style="{background: bgColor[a.warehouseStorehouseState], float: 'left'}">
								<!-- <div
									class="dashboard-layout-item-cricle"
									style="background: #16dc09" /> -->
								{{ a.warehouseStorehouseCode }}
							</div>
						</el-row>
						<el-row>
							<div
								class="dashboard-layout-item"
								v-for="b in wareData.two"
								:key="b.id+b.warehouseStorehouseCode"
								:style="{background: bgColor[b.warehouseStorehouseState], float: 'left'}">
								<!-- <div
									class="dashboard-layout-item-cricle"
									style="background: #16dc09" /> -->
								{{ b.warehouseStorehouseCode }}
							</div>
						</el-row>
					</el-col>
				</el-row>
				<el-divider class="divider"></el-divider>
				<el-row>
					<el-col :span="24">
						<el-row>
							<div
								class="dashboard-layout-item"
								v-for="c in wareData.there"
								:key="c.id+c.warehouseStorehouseCode"
								:style="{background: bgColor[c.warehouseStorehouseState], float: 'left'}">
								<!-- <div
									class="dashboard-layout-item-cricle"
									style="background: #16dc09" /> -->
								{{ c.warehouseStorehouseCode }}
							</div>
						</el-row>
						<el-row>
							<div
								class="dashboard-layout-item"
								v-for="d in wareData.four"
								:key="d.id+d.warehouseStorehouseCode"
								:style="{background: bgColor[d.warehouseStorehouseState], float: 'left'}">
								<!-- <div
									class="dashboard-layout-item-cricle"
									style="background: #16dc09" /> -->
								{{ d.warehouseStorehouseCode }}
							</div>
						</el-row>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
import basicPage from '../mixins/basic-page';
import { getWarehouseStorehouseList
} from "@/api/fpw/finishProductWarehouse";

export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				getDataListURL: getWarehouseStorehouseList,
			},
			listQuery: {
				wareLayer: 1,
				total: 0,
			},
			wareData: {
				one: [],
				two: [],
				there: [],
				four: [],
			},
      bgColor:['#37d97f','#ffbd02','#0b58ff'],
			formConfig: [
				{
					type: 'select',
					label: '选择层',
					selectOptions: [
						{ id: 1, name: '1' },
						{ id: 2, name: '2' },
						{ id: 3, name: '3' },
						{ id: 4, name: '4' },
					],
					param: 'value',
					filterable: true,
					defaultSelect: 1,
					clearable: false,
				},
				{
					type: 'button',
					btnName: '搜索',
					name: 'search',
					color: 'primary',
				},
			],
		};
	},
	components: {},
	created() {
	},
	methods: {
		// 获取数据列表
		getDataList() {
			this.dataListLoading = true;
      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.listQuery.total = Math.ceil(response.data.length / 120);
				this.dataListLoading = false;
			});
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.wareLayer = val.value;
					this.getDataList();
					break;
				default:
					console.log(val);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.mainbody {
	display: flex;
	gap: 50px;
	flex-direction: column;
}
.dashboard-layout-item {
  color: white;
	width: 3.3%;
	text-align: center;
	height: 40px;
	box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
	border-radius: 2px 4px 4px 2px;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	.dashboard-layout-item-cricle {
		display: inline-block;
		width: 12px;
		height: 12px;
		border-radius: 6px;
		margin-right: 6px;
	}
	&:hover {
		background-color: rgba(85, 136, 253, 0.8) !important;
		color: #ffffff;
		cursor: pointer;
		transform: scaleY(1.3) translateZ(0);
	}
}
.el-divider--horizontal {
	margin: 10px 0;
}
.el-divider {
	background-color: black;
}
.tips {
	position: absolute;
	top: 22px;
	left: 370px;
}
</style>