zhgdlarge/src/views/commandScreen/dialogCompnnents/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">
				<!-- <div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div> -->
				<div class="title-text">
					<i>{{ postData.title }}</i>
				</div>
				<div class="close-icon" @click="closeDialog">
					<el-icon><Close /></el-icon>
				</div>
			</div>
			<div class="political-outlook" v-if="showIndex == 1">
				<memberCountList ref="historyAlarmList" :tip="postData.tip"></memberCountList>
			</div>
			<div class="political-outlook" v-if="showIndex == 2">
				<safeInfo ref="historyAlarmList" tip="安全教育"></safeInfo>
			</div>
			<div class="political-outlook" v-if="showIndex == 3">
				<weatherInfo ref="historyAlarmList" tip="安全教育"></weatherInfo>
			</div>
			<div class="political-outlook" v-if="showIndex == 4">
				<riskCount ref="historyAlarmList" tip="安全教育"></riskCount>
			</div>
			<div class="political-outlook" v-if="showIndex == 5">
				<safeHidden ref="historyAlarmList" tip="安全教育"></safeHidden>
			</div>
			<div class="political-outlook" v-if="showIndex == 6">
				<aiAlarm ref="historyAlarmList" tip="安全教育"></aiAlarm>
			</div>
			<div class="political-outlook" v-if="showIndex == 7">
				<majorHidder ref="historyAlarmList" tip="重大隐患未销项目"></majorHidder>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import memberCountList from "./member-count-list.vue";
import safeInfo from "./safe-info.vue";
import weatherInfo from "./weather-info.vue";
import riskCount from "./risk-count.vue";
import safeHidden from "./safe-hidden.vue";
import aiAlarm from "./ai-alarm.vue";
import majorHidder from "./major-hidder.vue";

import { GlobalStore } from "@/stores";
let showDialog = ref(false as any);
const showIndex = ref(0);
const postData = ref({} as any);
let dialogTitle = ref("危大工程" as any);
const closeDialog = () => {
	showDialog.value = false;
	postData.value = {};
}
function openDialog(obj: any) {
	console.log("obj", obj);
	postData.value = obj
	showIndex.value = obj.index
	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: 15%;
		top: 21%;
		width: 70%;
		height: 60%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}
	.dialog-content-show{
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 1%;
		width: 70%;
		height: 98%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}
	.dialog-content-more{
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 21%;
		width: 70%;
		height: 60%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}
	.dialog-content,.dialog-content-show,.dialog-content-more {
		padding-top: 50px;
		.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;
			margin: 0 40px;
			.title-img {
				width: 3%;
				height: 3%;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.title-text {
				margin-left: 1%;
				margin-right: auto;
			}
		}
	}
}
.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>