zhgdyun/src/views/commandScreen/commandCenter/centerBottom.vue

<template>
	<div class="centerBottom">
		<div class="cbHeader">
			<div class="cbHeaderInfo">
				<div class="cubeIcon"></div>
				<div class="cLeft">公告提示</div>
			</div>
			<div class="cbHeaderLine"></div>
		</div>
		<div class="cbContent">
			<div v-if="listData.length < 10 && listData.length !== 0">
				<div class="item" v-for="(item, index) in listData" :key="index">
					<div class="itemHead">
						<div v-if="JSON.parse(item.payload).level">
							<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
							<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
							<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
							<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
						</div>
						<div v-else>
							<!-- <div class="itemHeadInner" v-if="JSON.parse(item.payload).isSuperDanger !== undefined && JSON.parse(item.payload).isSuperDanger === true">超危工程</div> -->
							<div class="itemHeadInner5" v-if="JSON.parse(item.payload).isSuperDanger === true">超危工程</div>
							<div class="itemHeadInner6" v-if="JSON.parse(item.payload).isSuperDanger === false">危大工程</div>
						</div>
						<div class="itemContent">
							<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
								<text style="margin-left:10px">{{ item.msg }}</text>
							</el-tooltip>
						</div>
					</div>
					<!-- <div class="itemContent">
						<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
							{{item.content}}
						</el-tooltip>
					</div> -->
					<div class="itemTime">
						<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
					</div>
				</div>
			</div>
			<div v-else>

			<vue3-seamless-scroll v-if="listData.length>0" :speed="1" :list="listData" :limitScrollNum="10" :step="0.3" :hover="true" class="scroll">
				<div class="item" v-for="(item, index) in listData" :key="index">
					<div class="itemHead">
						<div v-if="JSON.parse(item.payload).level">
							<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
							<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
							<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
							<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
						</div>
						<div v-else>
							<!-- <div class="itemHeadInner" v-if="JSON.parse(item.payload).isSuperDanger !== undefined && JSON.parse(item.payload).isSuperDanger === true">超危工程</div> -->
							<div class="itemHeadInner5" v-if="JSON.parse(item.payload).isSuperDanger === true">超危工程</div>
							<div class="itemHeadInner6" v-if="JSON.parse(item.payload).isSuperDanger === false">危大工程</div>
						</div>
						<div class="itemContent">
							<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
								<text style="margin-left:10px">{{ item.msg }}</text>
							</el-tooltip>
						</div>
					</div>
					<!-- <div class="itemContent">
						<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
							{{item.content}}
						</el-tooltip>
					</div> -->
					<div class="itemTime">
						<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
					</div>
				</div>
			</vue3-seamless-scroll>
			</div>
			<div class="notoDta" v-if="listData.length == 0">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div> 
		</div>
	</div>
</template>

<script setup lang="ts">
import { 
	getNoticeListApi 
} from "@/api/modules/projectOverview";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import Card from "@/components/card.vue";
import { ref, watch, onMounted } from "vue";
import { getStageOption } from "@/api/modules/projectOverview";
import { GlobalStore } from "@/stores";
const store = GlobalStore();

let listData = ref([
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
	// { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
])

const getNoticeList = async () => {
	// const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
	const res: any = await getNoticeListApi({ isBigScreen: 1 ,type:32});
	console.log('隐患智能分析', res);
	listData.value = res.result.records;
	
		// listData.value.push({
		// 	accountId:"1779721457571291137",
		// 	id:"1789601398432559107",
		// 	imageUrl:null,
		// 	isRead:0,
		// 	msg:"区域1检查到一条四川成润智慧科技的雨落管安全隐患问题，请注意监督整改！",
		// 	payload:"{\"level\":4,\"time\":\"2024-05-12 18:19:40\"}",
		// 	sendTime: "2024-05-12 18:19:57",
		// 	title: "大屏通知",
		// 	type: "31",
		// })

	console.log("================center================",listData.value)
}

onMounted(async () => {
	await getNoticeList();
});
</script>

<style lang="scss" scoped>
.notoDta {
    top: 30%;
    width: 50%;
    // left: 40%;
    position: absolute;
    text-align: center;
    left:50%;
    transform: translateX(-50%);

    img {
        width: 30%;
        margin: 5% 22%;
    }

    p {
        color: #fff;
        font-size: calc(100vw * 14 / 1920);
        margin: -6% 30%;
    }
}
.scroll {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.centerBottom {
	background: url("@/assets/images/commandScreen/card-center-bottom.png") no-repeat;
	// background: #fff;
	background-size: 100% 100%;
	// width: 100%;
	// height: 60%;
	// background-color: #fff;
	padding: 10px 20px;
	position: relative;

	// padding-top: 15px;
	.cbHeader {
		width: 100%;
		height: 40px;

		// background-color: darkred;
		.cbHeaderInfo {
			color: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.cLeft {
				width: 50%;
				font-size: 20px;
				font-weight: bold;
				background-image: linear-gradient(to bottom left, #c8E3FF, #007AFF);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}

			.cubeIcon {
				width: 36px;
				height: 36px;
				// background-color: #fff;
				background: url("@/assets/images/commandScreen/head-cube.png") no-repeat;
				background-size: 100% 100%;
				// margin-left: -5px;
				margin: 0 3px 0 -5px;
			}
		}

		.cbHeaderLine {
			height: 4px;
			width: 100%;
			// background-color: darkblue;
			background: url("@/assets/images/commandScreen/head-line.png") no-repeat;
			background-size: 100% 100%;
		}
	}

	.cbContent {
		width: 100%;
		height: calc(100% - 40px);
		overflow: hidden;

		// background: #fff;
		.item {
			width: 100%;
			line-height: 110%;
			display: flex;
			align-items: center;
			// justify-content: flex-start;
			justify-content: space-between;
			// background-color: green;
			color: #fff;

			.itemHead {
				white-space: nowrap;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				width: 75%;

				.itemHeadInner1 {
					border: 1px solid #e02020;
					box-shadow: 0 0 0 1px #e02020;
					background: rgba(224,32,32, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}
				.itemHeadInner2 {
					font-size: 16px;
					border: 1px solid #f46649;
					box-shadow: 0 0 0 1px #f46649;
					background: rgba(244,102,73, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}
				.itemHeadInner3 {
					font-size: 16px;
					border: 1px solid #ecbe45;
					box-shadow: 0 0 0 1px #ecbe45;
					background: rgba(236,190,69, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}
				.itemHeadInner4 {
					font-size: 16px;
					border: 1px solid #5394f7;
					box-shadow: 0 0 0 1px #5394f7;
					background: rgba(83,148,247, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}
				.itemHeadInner5 {
					font-size: 16px;
					border: 1px solid #9400D3;
					box-shadow: 0 0 0 1px #9400D3;
					background: rgba(148,0,211, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}
				.itemHeadInner6 {
					font-size: 16px;
					border: 1px solid #00CED1;
					box-shadow: 0 0 0 1px #00CED1;
					background: rgba(	0,206,209, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}

				.itemContent {
					margin-left: 10px;
					font-size: 15px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
					line-height: 30px;
				}
			}

			.itemTime {
				// background-color: #fff;
				width: 25%;
				font-size: 16px;

				.timeInfo {
					display: flex;
					justify-content: flex-start;
					margin-right: 10px;
				}
			}
		}
	}
}
</style>