yudao-dev/src/views/warehouse/part-material/warehouseLocationMonitoring/index.vue

<!--
 * @Author: zwq
 * @Date: 2023-08-21 14:26:23
 * @LastEditors: zwq
 * @LastEditTime: 2023-11-14 09:39:54
 * @Description:
-->
<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<!-- <div class="tips">
			<el-tag color="#D7DBE5" style="border: none; color: black">停用</el-tag>
			<el-tag color="#D8E5FF" style="border: none; color: black">启用</el-tag>
			<el-divider direction="vertical" />
			<el-tag effect="dark" color="#16DC09" style="border: none">可用</el-tag>
			<el-tag effect="dark" color="#FFD781" style="border: none">
				占用-待入库
			</el-tag>
			<el-tag effect="dark" color="#7362F3" style="border: none">
				占用-有货
			</el-tag>
			<el-tag effect="dark" color="#FFA08F" style="border: none">
				占用-待出库
			</el-tag>
		</div> -->
		<el-row class="dashboard-legend">
			<div
				v-for="item in cassetteStatusList"
				:key="'cassette' + item.id"
				class="dashboard-legend-cassette">
				<div
					class="dashboard-legend-cassette-cricle"
					:style="{ background: item.color }" />
				{{ item.name }}
			</div>
			|
			<div class="dashboard-legend-port" style="background: #d7dbe5">停用</div>
			<div class="dashboard-legend-port" style="background: #d8e5ff">启用</div>
		</el-row>
		<div class="mainbody">
			<div v-for="i in total" :key="i">
				<el-row>
					<el-col :span="24">
						<el-row type="flex" class="flex-warp">
							<div
								class="dashboard-layout-item"
								v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
								:key="a.id + a.code"
								:title="a.name"
								:style="{
									background: bgColor[a.enabled],
									float: 'left',
								}">
								<div
									class="dashboard-layout-item-cricle"
									:style="{
										background: dotColor[a.status],
									}" />
								<p class="p-name">{{ a.name }}</p>
							</div>
						</el-row>
						<el-row type="flex" class="flex-warp">
							<div
								class="dashboard-layout-item"
								v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
								:key="b.id + b.code"
								:title="b.name"
								:style="{
									background: bgColor[b.enabled],
									float: 'left',
								}">
								<div
									class="dashboard-layout-item-cricle"
									:style="{
										background: dotColor[b.status],
									}" />
								<p class="p-name">{{ b.name }}</p>
							</div>
						</el-row>
					</el-col>
				</el-row>
				<el-divider class="divider"></el-divider>
				<el-row>
					<el-col :span="24">
						<el-row type="flex" class="flex-warp">
							<div
								class="dashboard-layout-item"
								v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
								:key="c.id + c.code"
								:title="c.name"
								:style="{
									background: bgColor[c.enabled],
									float: 'left',
								}">
								<div
									class="dashboard-layout-item-cricle"
									:style="{
										background: dotColor[c.status],
									}" />
								<p class="p-name">{{ c.name }}</p>
							</div>
						</el-row>
						<el-row type="flex" class="flex-warp">
							<div
								class="dashboard-layout-item"
								v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
								:key="d.id + d.code"
								:title="d.name"
								:style="{
									background: bgColor[d.enabled],
									float: 'left',
								}">
								<div
									class="dashboard-layout-item-cricle"
									:style="{
										background: dotColor[d.status],
									}" />
								<p class="p-name">{{ d.name }}</p>
							</div>
						</el-row>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
import { getWarehouseList } from '@/api/warehouse/warehouse-info';

export default {
	data() {
		return {
			wareData: {
				one: [],
				two: [],
				there: [],
				four: [],
			},
			total: 0,
			bgColor: ['#D7DBE5', '#D8E5FF'],
			dotColor: ['#16DC09', '#FFD781', '#7362F3', '#FFA08F'],
			cassetteStatusList: [
				{ id: '1', name: '可用', color: '#16DC09' },
				{ id: '2', name: '占用-待入库', color: '#FFD781' },
				{ id: '3', name: '占用-有货', color: '#7362F3' },
				{ id: '4', name: '占用-待出库', color: '#FFA08F' },
			],
			formConfig: [
				{
					type: 'button',
					btnName: '刷新',
					name: 'search',
					color: 'primary',
				},
			],
		};
	},
	components: {},
	mounted() {
		this.getDataList();
	},
	methods: {
		// 获取数据列表
		getDataList() {
			(this.wareData = {
				one: [],
				two: [],
				there: [],
				four: [],
			}),
				getWarehouseList().then((response) => {
					response.data.forEach((item) => {
						if (item.storageType === 4) {
							listByWarehouse(item.id).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.total = Math.ceil(response.data.length / 40);
							});
						}
					});
				});
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.getDataList();
					break;
				default:
					console.log(val);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.mainbody {
	display: flex;
	gap: 70px;
	flex-direction: column;
}
.flex-warp {
	flex-wrap: nowrap;
}
.dashboard-layout-item {
	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: 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;
		position: absolute;
		top: 10px;
		left: 3px;
	}
	.p-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 15px;
	}
	&: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;
}
.el-divider {
	background-color: black;
}
.tips {
	position: absolute;
	top: 22px;
	right: 120px;
}
.dashboard-legend {
	margin: 5px 5px 10px 5px;
	.dashboard-legend-cassette {
		display: inline-block;
		margin-right: 24px;
		.dashboard-legend-cassette-cricle {
			display: inline-block;
			width: 12px;
			height: 12px;
			border-radius: 6px;
		}
	}
	.dashboard-legend-port {
		display: inline-block;
		height: 24px;
		line-height: 24px;
		border-radius: 4px;
		padding: 0 16px;
		margin-left: 24px;
	}
}
</style>