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

<!--
 * @Author: zwq
 * @Date: 2023-08-21 14:26:23
 * @LastEditors: zwq
 * @LastEditTime: 2023-08-31 14:36:15
 * @Description:
-->
<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
      <div class="mainbody">
		<div v-for="a in 3" :key="a">
			<el-row type="flex" justify="space-around">
				<el-col :span="5" v-for="i in 4" :key="i">
					<el-row type="flex" justify="space-between">
						<el-col :span="12" v-for="j in 2" :key="j">
							<div
								class="dashboard-layout-item"
								v-for="z in 2"
								:key="z"
								style="background: #ffd781; float: left">
								<div
									class="dashboard-layout-item-cricle"
									style="background: #16dc09" />
								{{ i + '+' + j + '+' + z }}
							</div>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-between">
						<el-col :span="12" v-for="j in 2" :key="j">
							<div
								class="dashboard-layout-item"
								v-for="z in 2"
								:key="z"
								style="background: #ffd781; float: left">
								<div
									class="dashboard-layout-item-cricle"
									style="background: #16dc09" />
								{{ i + '+' + j + '+' + z }}
							</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<el-divider class="divider"></el-divider>
			<el-row type="flex" justify="space-around">
				<el-col :span="5" v-for="i in 4" :key="i">
					<el-row type="flex" justify="space-between">
						<el-col :span="12" v-for="j in 2" :key="j">
							<div
								class="dashboard-layout-item"
								v-for="z in 2"
								:key="z"
								style="background: #ffd781; float: left">
								<div
									class="dashboard-layout-item-cricle"
									style="background: #16dc09" />
								{{ i + '+' + j + '+' + z }}
							</div>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-between">
						<el-col :span="12" v-for="j in 2" :key="j">
							<div
								class="dashboard-layout-item"
								v-for="z in 2"
								:key="z"
								style="background: #ffd781; float: left">
								<div
									class="dashboard-layout-item-cricle"
									style="background: #16dc09" />
								{{ i + '+' + j + '+' + z }}
							</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</div>
  </div>
	</div>
</template>

<script>
import basicPage from '../mixins/basic-page';
import { getWarehouseStorehousePage } from '@/api/asrs/warehouseStorehouse';

export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				getDataListURL: getWarehouseStorehousePage,
			},
			listQuery: {
				wareLayer: 1,
			},
			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: {
		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 {
	width: 80px;
	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;
	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;
	}
}
.el-divider--horizontal {
	margin: 10px 0;
}
.el-divider{
  background-color: black;
}
</style>