更新-仓库-库位监控

src/views/warehouse/end-material/warehouseLocationMonitoring/index.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2023-08-21 14:26:23
  * @LastEditors: zwq
- * @LastEditTime: 2023-11-06 11:25:34
+ * @LastEditTime: 2023-11-14 09:40:33
  * @Description:
 -->
 <template>
@@ -11,11 +11,35 @@
 			:formConfigs="formConfig"
 			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>
-		</div>
+		<!-- <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>
@@ -26,11 +50,14 @@
 								v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
 								:key="a.id + a.code"
 								:title="a.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[a.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[a.type - 1],
+										background: dotColor[a.status],
 									}" />
 								<p class="p-name">{{ a.name }}</p>
 							</div>
@@ -41,11 +68,14 @@
 								v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
 								:key="b.id + b.code"
 								:title="b.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[b.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[b.type - 1],
+										background: dotColor[b.status],
 									}" />
 								<p class="p-name">{{ b.name }}</p>
 							</div>
@@ -61,11 +91,14 @@
 								v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
 								:key="c.id + c.code"
 								:title="c.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[c.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[c.type - 1],
+										background: dotColor[c.status],
 									}" />
 								<p class="p-name">{{ c.name }}</p>
 							</div>
@@ -76,11 +109,14 @@
 								v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
 								:key="d.id + d.code"
 								:title="d.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[d.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[d.type - 1],
+										background: dotColor[d.status],
 									}" />
 								<p class="p-name">{{ d.name }}</p>
 							</div>
@@ -106,7 +142,14 @@ export default {
 				four: [],
 			},
 			total: 0,
-			bgColor: ['#7362F3', '#16DC09', '#FFA08F'],
+			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',
@@ -130,26 +173,26 @@ export default {
 				there: [],
 				four: [],
 			}),
-		getWarehouseList().then((response) => {
-			response.data.forEach((item) => {
-				if (item.storageType === 2) {
-					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);
+				getWarehouseList().then((response) => {
+					response.data.forEach((item) => {
+						if (item.storageType === 2) {
+							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);
+							});
 						}
 					});
-					this.total = Math.ceil(response.data.length / 40);
-					});
-				}
-			});
-		});
+				});
 		},
 		buttonClick(val) {
 			switch (val.btnName) {
@@ -225,4 +268,25 @@ export default {
 	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>

src/views/warehouse/out-material/warehouseLocationMonitoring/index.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2023-08-21 14:26:23
  * @LastEditors: zwq
- * @LastEditTime: 2023-11-06 11:32:23
+ * @LastEditTime: 2023-11-14 09:40:21
  * @Description:
 -->
 <template>
@@ -11,11 +11,35 @@
 			:formConfigs="formConfig"
 			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>
-		</div>
+		<!-- <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>
@@ -26,11 +50,14 @@
 								v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
 								:key="a.id + a.code"
 								:title="a.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[a.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[a.type - 1],
+										background: dotColor[a.status],
 									}" />
 								<p class="p-name">{{ a.name }}</p>
 							</div>
@@ -41,11 +68,14 @@
 								v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
 								:key="b.id + b.code"
 								:title="b.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[b.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[b.type - 1],
+										background: dotColor[b.status],
 									}" />
 								<p class="p-name">{{ b.name }}</p>
 							</div>
@@ -61,11 +91,14 @@
 								v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
 								:key="c.id + c.code"
 								:title="c.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[c.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[c.type - 1],
+										background: dotColor[c.status],
 									}" />
 								<p class="p-name">{{ c.name }}</p>
 							</div>
@@ -76,11 +109,14 @@
 								v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
 								:key="d.id + d.code"
 								:title="d.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[d.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[d.type - 1],
+										background: dotColor[d.status],
 									}" />
 								<p class="p-name">{{ d.name }}</p>
 							</div>
@@ -106,7 +142,14 @@ export default {
 				four: [],
 			},
 			total: 0,
-			bgColor: ['#7362F3', '#16DC09', '#FFA08F'],
+			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',
@@ -130,26 +173,26 @@ export default {
 				there: [],
 				four: [],
 			}),
-		getWarehouseList().then((response) => {
-			response.data.forEach((item) => {
-				if (item.storageType === 5) {
-					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);
+				getWarehouseList().then((response) => {
+					response.data.forEach((item) => {
+						if (item.storageType === 5) {
+							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);
+							});
 						}
 					});
-					this.total = Math.ceil(response.data.length / 40);
-					});
-				}
-			});
-		});
+				});
 		},
 		buttonClick(val) {
 			switch (val.btnName) {
@@ -225,4 +268,25 @@ export default {
 	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>

src/views/warehouse/package-material/warehouseLocationMonitoring/index.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2023-08-21 14:26:23
  * @LastEditors: zwq
- * @LastEditTime: 2023-11-06 11:31:52
+ * @LastEditTime: 2023-11-14 09:40:08
  * @Description:
 -->
 <template>
@@ -11,11 +11,35 @@
 			:formConfigs="formConfig"
 			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>
-		</div>
+		<!-- <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>
@@ -26,11 +50,14 @@
 								v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
 								:key="a.id + a.code"
 								:title="a.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[a.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[a.type - 1],
+										background: dotColor[a.status],
 									}" />
 								<p class="p-name">{{ a.name }}</p>
 							</div>
@@ -41,11 +68,14 @@
 								v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
 								:key="b.id + b.code"
 								:title="b.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[b.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[b.type - 1],
+										background: dotColor[b.status],
 									}" />
 								<p class="p-name">{{ b.name }}</p>
 							</div>
@@ -61,11 +91,14 @@
 								v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
 								:key="c.id + c.code"
 								:title="c.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[c.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[c.type - 1],
+										background: dotColor[c.status],
 									}" />
 								<p class="p-name">{{ c.name }}</p>
 							</div>
@@ -76,11 +109,14 @@
 								v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
 								:key="d.id + d.code"
 								:title="d.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[d.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[d.type - 1],
+										background: dotColor[d.status],
 									}" />
 								<p class="p-name">{{ d.name }}</p>
 							</div>
@@ -106,7 +142,14 @@ export default {
 				four: [],
 			},
 			total: 0,
-			bgColor: ['#7362F3', '#16DC09', '#FFA08F'],
+			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',
@@ -130,26 +173,26 @@ export default {
 				there: [],
 				four: [],
 			}),
-		getWarehouseList().then((response) => {
-			response.data.forEach((item) => {
-				if (item.storageType === 3) {
-					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);
+				getWarehouseList().then((response) => {
+					response.data.forEach((item) => {
+						if (item.storageType === 3) {
+							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);
+							});
 						}
 					});
-					this.total = Math.ceil(response.data.length / 40);
-					});
-				}
-			});
-		});
+				});
 		},
 		buttonClick(val) {
 			switch (val.btnName) {
@@ -225,4 +268,25 @@ export default {
 	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>

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

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2023-08-21 14:26:23
  * @LastEditors: zwq
- * @LastEditTime: 2023-11-06 11:31:14
+ * @LastEditTime: 2023-11-14 09:39:54
  * @Description:
 -->
 <template>
@@ -11,11 +11,35 @@
 			:formConfigs="formConfig"
 			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>
-		</div>
+		<!-- <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>
@@ -26,11 +50,14 @@
 								v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
 								:key="a.id + a.code"
 								:title="a.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[a.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[a.type - 1],
+										background: dotColor[a.status],
 									}" />
 								<p class="p-name">{{ a.name }}</p>
 							</div>
@@ -41,11 +68,14 @@
 								v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
 								:key="b.id + b.code"
 								:title="b.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[b.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[b.type - 1],
+										background: dotColor[b.status],
 									}" />
 								<p class="p-name">{{ b.name }}</p>
 							</div>
@@ -61,11 +91,14 @@
 								v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
 								:key="c.id + c.code"
 								:title="c.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[c.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[c.type - 1],
+										background: dotColor[c.status],
 									}" />
 								<p class="p-name">{{ c.name }}</p>
 							</div>
@@ -76,11 +109,14 @@
 								v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
 								:key="d.id + d.code"
 								:title="d.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[d.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[d.type - 1],
+										background: dotColor[d.status],
 									}" />
 								<p class="p-name">{{ d.name }}</p>
 							</div>
@@ -106,7 +142,14 @@ export default {
 				four: [],
 			},
 			total: 0,
-			bgColor: ['#7362F3', '#16DC09', '#FFA08F'],
+			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',
@@ -130,26 +173,26 @@ export default {
 				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);
+				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);
+							});
 						}
 					});
-					this.total = Math.ceil(response.data.length / 40);
-					});
-				}
-			});
-		});
+				});
 		},
 		buttonClick(val) {
 			switch (val.btnName) {
@@ -225,4 +268,25 @@ export default {
 	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>

src/views/warehouse/raw-material/warehouseLocationMonitoring/index.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2023-08-21 14:26:23
  * @LastEditors: zwq
- * @LastEditTime: 2023-11-06 11:30:20
+ * @LastEditTime: 2023-11-14 09:39:02
  * @Description:
 -->
 <template>
@@ -11,11 +11,35 @@
 			:formConfigs="formConfig"
 			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>
-		</div>
+		<!-- <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>
@@ -26,11 +50,14 @@
 								v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
 								:key="a.id + a.code"
 								:title="a.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[a.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[a.type - 1],
+										background: dotColor[a.status],
 									}" />
 								<p class="p-name">{{ a.name }}</p>
 							</div>
@@ -41,11 +68,14 @@
 								v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
 								:key="b.id + b.code"
 								:title="b.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[b.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[b.type - 1],
+										background: dotColor[b.status],
 									}" />
 								<p class="p-name">{{ b.name }}</p>
 							</div>
@@ -61,11 +91,14 @@
 								v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
 								:key="c.id + c.code"
 								:title="c.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[c.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[c.type - 1],
+										background: dotColor[c.status],
 									}" />
 								<p class="p-name">{{ c.name }}</p>
 							</div>
@@ -76,11 +109,14 @@
 								v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
 								:key="d.id + d.code"
 								:title="d.name"
-								style="background: #fff8e8; float: left">
+								:style="{
+									background: bgColor[d.enabled],
+									float: 'left',
+								}">
 								<div
 									class="dashboard-layout-item-cricle"
 									:style="{
-										background: bgColor[d.type - 1],
+										background: dotColor[d.status],
 									}" />
 								<p class="p-name">{{ d.name }}</p>
 							</div>
@@ -106,7 +142,14 @@ export default {
 				four: [],
 			},
 			total: 0,
-			bgColor: ['#7362F3', '#16DC09', '#FFA08F'],
+			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',
@@ -130,26 +173,26 @@ export default {
 				there: [],
 				four: [],
 			}),
-		getWarehouseList().then((response) => {
-			response.data.forEach((item) => {
-				if (item.storageType === 1) {
-					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);
+				getWarehouseList().then((response) => {
+					response.data.forEach((item) => {
+						if (item.storageType === 1) {
+							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);
+							});
 						}
 					});
-					this.total = Math.ceil(response.data.length / 40);
-					});
-				}
-			});
-		});
+				});
 		},
 		buttonClick(val) {
 			switch (val.btnName) {
@@ -225,4 +268,25 @@ export default {
 	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>