zhgdlarge/src/views/sevenLargeScreen/laborManagement/data-dialog.vue

<template>
	<div class="list-detail" v-if="showDialog">
		<div :class="postData.type == 1?'dialog-content':postData.type == 2?'dialog-content-show':'dialog-content-more'">
			<div class="dialog-title" v-if="postData.type == 1 || postData.type == 3">
				<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
				<div class="title-text">
					<i>{{ dialogTitle }}</i>
				</div>
			</div>
			<div class="political-outlook" v-if="postData.type == 1">
				<memberCountList ref="historyAlarmList" :tip="postData.tip"></memberCountList>
			</div>
			<div class="political-outlook" v-if="postData.type == 2">
				<MemberAllShow ref="memberAllShow" :tip="postData.tip"></MemberAllShow>
			</div>
			<div class="political-outlook" v-if="postData.type == 3">
				<MemberMoreList ref="memberMoreList"></MemberMoreList>
			</div>
			<div class="close-icon" @click="closeDialog">
				<el-icon><Close /></el-icon>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import memberCountList from "./member-count-list.vue";
import MemberAllShow from "./member-all-show.vue";
import MemberMoreList from "./member-more-list.vue";
import { GlobalStore } from "@/stores";
let showDialog = ref(false as any);
const postData = ref({} as any);
let dialogTitle = ref("" as any);
const closeDialog = () => {
	showDialog.value = false;
	postData.value = {};
}
function openDialog(obj: any) {
	console.log("type", obj);
	if(obj.type == 1 || obj.type == 3){
		dialogTitle.value = obj.tip + '人数统计数据';
	} else if(obj.type == 2) {
		dialogTitle.value = "历史报警数据";
	}
	postData.value = obj
	showDialog.value = true;
}

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
	openDialog
});

onMounted(async () => {
	console.log("Mount_type", postData.value.type);
});
</script>

<style lang="scss" scoped>
.list-detail {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	background: rgba(7, 28, 49, 0.5);
	z-index: 100;
	.dialog-content{
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 17%;
		top: 21%;
		width: 70%;
		height: 60%;
		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}
	.dialog-content-show{
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 11%;
		top: 1%;
		width: 81%;
		height: 98%;
		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}
	.dialog-content-more{
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 2%;
		top: 21%;
		width: 96%;
		height: 60%;
		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}
	.dialog-content,.dialog-content-show {
		.political-outlook {
			height: 100%;
		}
		.dialog-article {
			height: 95%;
		}
		.close-icon {
			position: absolute;
			right: 3%;
			top: 3%;
			cursor: pointer;
			color: #ffffff;
			font-size: 18px;
		}
		.dialog-title {
			color: #ffffff;
			font-weight: bold;
			font-size: 18px;
			font-family: "OPPOSans-Bold";
			display: flex;
			align-items: center;
			.title-img {
				width: 3%;
				height: 3%;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.title-text {
				margin-left: 1%;
			}
		}
	}
}
.notoDta {
	top: 73%;
	width: 12%;
	left: 44%;
	position: absolute;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
</style>