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

<template>
	<div class="centerBottom">
		<div class="cbHeader">
			<div class="cbHeaderInfo">
				<div class="cubeIcon"></div>
				<div>公告提示</div>
			</div>
			<div class="cbHeaderLine"></div>
		</div>
		<div class="cbContent">
			<el-scrollbar height="370">
				<div class="item" v-for="(item,index) in listData" :key="index">																																																																																																																																																																																																		
					<div class="itemHead">
						<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
						<div class="itemHeadInner2" v-if="item.type === 3">{{item.header}}</div>
						<div class="itemContent">
							<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
								<text style="margin-left:10px">{{item.content}}</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">{{item.startTime + '-' + item.endTime}}</text>
					</div>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<script setup lang="ts">
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"},
])

onMounted( async () => {

});
</script>

<style lang="scss" scoped>
.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;
			.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);
		// background: #fff;
		.item{
			width: 100%;
			line-height: 130%;
			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%;
				.itemHeadInner{
					border: 1px solid #f77c7d;	
					box-shadow: 0 0 0 1px #f77c7d;
					background: rgba(247,124,125, 0.4);
					border-radius: 3px;
					padding: 0 15px;
					margin: 9px 0;
					margin-left: 2px;
				}
				.itemHeadInner2{
					font-size: 16px;
					border: 1px solid #0db027;	
					box-shadow: 0 0 0 1px #0db027;
					background: rgba(13,176,39, 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%;
				}
			}
			.itemTime{	
				// background-color: #fff;
				width: 25%;
				font-size: 16px;
				.timeInfo{
					display: flex;
					justify-content: flex-end;
					margin-right: 10px;
				}
			}
		}
	}
}
</style>