大屏展示

snowy-admin-web/src/views/motoring/bigscreen/index.vue

@@ -1,12 +1,395 @@
 <template>
-	<div>大屏展示</div>
+	<div class="bigscreen">
+		<div class="head">
+			<div class="title">广州海关技术中心</div>
+			<div class="btn">
+				<div class="btn-tbas" :class="activeKey == '1' ? 'active' : ''" @click="activeclick('1')">全屏</div>
+				<div class="btn-tbas" :class="activeKey == '2' ? 'active' : ''" @click="activeclick('2')">设置</div>
+			</div>
+		</div>
+
+		<div class="body">
+			<a-row :gutter="[18, 18]">
+				<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" v-for="(item, index) in listData" :key="index">
+					<div class="gutter-row" :class="item.state == '1' ? 'success' : 'danger'">
+						<!-- 条纹背景 -->
+						<div class="col-left"></div>
+
+						<!-- 信息 -->
+						<div class="col-right">
+							<div class="right-info">
+								<div class="info-left">
+									<div class="info-tilte">
+										<div class="name">{{ item.name }}</div>
+										<a-tag :bordered="false" color="success">{{ item.stateValue }}</a-tag>
+									</div>
+									<div class="info-row">
+										<div class="label">部门：</div>
+										<div class="text">{{ item.bm }}</div>
+									</div>
+									<div class="info-row">
+										<div class="label">位置：</div>
+										<div class="text">{{ item.wz }}</div>
+									</div>
+									<div class="info-row">
+										<div class="label">监控点：</div>
+										<div class="text">{{ item.jkd }}</div>
+									</div>
+									<div class="info-row">
+										<div class="label">温度：</div>
+										<div class="text">{{ item.wd }}</div>
+									</div>
+								</div>
+								<div class="info-right">
+									<img src="/src/assets/images/bigscreen/img.png" alt="" srcset="" />
+								</div>
+							</div>
+							<div class="right-foot">
+								<div>记录时间：{{ item.jlsj }}</div>
+								<div class="history">历史记录</div>
+							</div>
+						</div>
+					</div>
+				</a-col>
+			</a-row>
+		</div>
+	</div>
 </template>
 <script setup>
+	const activeKey = ref('1')
+	const listData = [
+		{
+			name: '医用低温保温箱',
+			state: '1',
+			stateValue: '正常',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '1',
+			stateValue: '正常',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '1',
+			stateValue: '正常',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '2',
+			stateValue: '采集器闲置',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '1',
+			stateValue: '正常',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '1',
+			stateValue: '正常',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '2',
+			stateValue: '采集器闲置',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '1',
+			stateValue: '正常',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '1',
+			stateValue: '正常',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '1',
+			stateValue: '正常',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '1',
+			stateValue: '正常',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		},
+		{
+			name: '医用低温保温箱',
+			state: '1',
+			stateValue: '正常',
+			bm: '广州海关技术中心',
+			wz: ' 广东省广州市天河区花城大道66号',
+			jkd: '监控点1',
+			wd: '-20℃',
+			jlsj: '2024-11-05 09:56:01'
+		}
+	]
 	onMounted(() => {})
 
 	onBeforeMount(() => {})
 
+	// 点击标签
+	const activeclick = (v) => {
+		activeKey.value = v
+	}
+
 	// 监听
 	watch()
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+	.bigscreen {
+		width: 100%;
+		height: 100vh;
+		overflow-y: auto;
+		border: 1px solid red;
+
+		.head {
+			width: 100%;
+			height: 50px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.title {
+				font-size: 16px;
+			}
+
+			.btn {
+				width: 120px;
+				display: flex;
+				align-items: center;
+				border-radius: 5px;
+				border: 1px solid #f4f5f7;
+				background-color: #dcdfe5;
+
+				.btn-tbas {
+					width: 50%;
+					text-align: center;
+					padding: 8px 0;
+					color: #8c95a4;
+					cursor: pointer;
+				}
+
+				.active {
+					color: #1677ff;
+					background-color: #ffffff;
+				}
+			}
+		}
+
+		.body {
+			overflow-y: auto;
+			padding: 20px;
+			border-radius: 5px;
+			background-color: #ffffff;
+
+			.ant-col {
+				height: 200px;
+				.gutter-row {
+					width: 100%;
+					height: 100%;
+					display: flex;
+
+					.col-left {
+						width: 10%;
+						height: 100%;
+						background-size: 45px 45px;
+						background-image: -webkit-gradient(
+							linear,
+							0 0,
+							100% 100%,
+							color-stop(0.25, rgba(255, 255, 255, 0.2)),
+							color-stop(0.25, transparent),
+							color-stop(0.5, transparent),
+							color-stop(0.5, rgba(255, 255, 255, 0.2)),
+							color-stop(0.75, rgba(255, 255, 255, 0.2)),
+							color-stop(0.75, transparent),
+							to(transparent)
+						);
+						background-image: -moz-linear-gradient(
+							-45deg,
+							rgba(255, 255, 255, 0.2) 25%,
+							transparent 25%,
+							transparent 50%,
+							rgba(255, 255, 255, 0.2) 50%,
+							rgba(255, 255, 255, 0.2) 75%,
+							transparent 75%,
+							transparent
+						);
+						background-image: -o-linear-gradient(
+							-45deg,
+							rgba(255, 255, 255, 0.2) 25%,
+							transparent 25%,
+							transparent 50%,
+							rgba(255, 255, 255, 0.2) 50%,
+							rgba(255, 255, 255, 0.2) 75%,
+							transparent 75%,
+							transparent
+						);
+						background-image: linear-gradient(
+							-45deg,
+							rgba(255, 255, 255, 0.2) 25%,
+							transparent 25%,
+							transparent 50%,
+							rgba(255, 255, 255, 0.2) 50%,
+							rgba(255, 255, 255, 0.2) 75%,
+							transparent 75%,
+							transparent
+						);
+					}
+
+					.col-right {
+						width: 90%;
+						height: 100%;
+
+						.right-info {
+							width: 100%;
+							height: 80%;
+							padding: 10px 20px 10px 10px;
+							display: flex;
+							align-items: center;
+
+							.info-left {
+								width: 80%;
+								height: 100%;
+
+								.info-tilte {
+									padding: 5px 5px 0 5px;
+									display: flex;
+									align-items: center;
+									.name {
+										font-weight: bold;
+										font-size: 16px;
+										white-space: nowrap;
+										overflow: hidden;
+										text-overflow: ellipsis;
+										margin-right: 10px;
+									}
+								}
+
+								.info-row {
+									padding: 5px;
+									display: flex;
+									width: 100%;
+
+									.label {
+										width: 60px;
+										text-align-last: justify;
+									}
+
+									.text {
+										flex: 1;
+										overflow: hidden;
+										word-break: break-all;
+										text-overflow: ellipsis;
+										display: -webkit-box;
+										-webkit-box-orient: vertical;
+										-webkit-line-clamp: 2;
+									}
+								}
+							}
+						}
+
+						.right-foot {
+							height: 20%;
+							color: #afafaf;
+							display: flex;
+							align-items: center;
+							justify-content: space-around;
+							border-top: 1px solid #e7e7e7;
+							.history {
+								cursor: pointer;
+								color: #008dff;
+							}
+						}
+					}
+				}
+
+				// 状态为1 正常的
+				.success {
+					.col-left {
+						background-color: #20af61;
+						border: 1px solid #90deb9;
+						border-top-left-radius: 15px;
+						border-bottom-left-radius: 15px;
+					}
+					.col-right {
+						border: 1px solid #90deb9;
+						border-top-right-radius: 15px;
+						border-bottom-right-radius: 15px;
+					}
+				}
+
+				// 状态为2 异常的
+				.danger {
+					.col-left {
+						background-color: #f97d1e;
+						border: 1px solid #fbd7af;
+						border-top-left-radius: 15px;
+						border-bottom-left-radius: 15px;
+					}
+					.col-right {
+						border: 1px solid #fbd7af;
+						border-top-right-radius: 15px;
+						border-bottom-right-radius: 15px;
+					}
+				}
+			}
+		}
+	}
+</style>