<template>
	<div class="CenterBox">
		<div class="title">
			<i>实时数据</i>
		</div>
		<div class="tab-select">
			<span :class="activeTab == 0?'active-span':''" @click="changeActive(0)">实时监控</span>
			<span :class="activeTab == 1?'active-span':''" @click="changeActive(1)">3D模型</span>
		</div>
		<div class="href-content">
			<iframe :src="iframeUrl" frameborder="0" style="width: 100%;height: 100%;"></iframe>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { ref, reactive, onMounted } from "vue";
const emits = defineEmits(["openDialog"])
const store = GlobalStore();
const activeTab = ref(0)
const iframeUrl = ref('http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html')
const changeActive = (activeIndex:any) => {
	activeTab.value = activeIndex;
	iframeUrl.value = activeIndex == 0?'http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html':'http://jxjzw.zhgdyun.com:8082/rt-3dmx'
}
onMounted(() => {
});
</script>

<style lang="scss" scoped>
.CenterBox {
	width: 100%;
	height: 100%;
	.title {
		height: 7%;
		// line-height: 33px;
		display: flex;
		align-items: center;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/titleBig.webp") no-repeat;
		background-size: 100% 100%;

		i {
			margin-left: 50px;
			font-family: OPPOSansH;
			margin-right: auto;
		}
	}
	.tab-select{
		width: 35%;
		margin: 0 auto;
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		span{
			cursor: pointer;
			color: #7C859C;
			font-size: 15px;
			transition: all 0.5s;
		}
		.active-span{
			color: #fff;
			font-size: 18px;
		}
	}
	.href-content{
		width: 95%;
		height: 490px;
		margin: 0 auto;
		margin-top: 10px;
	}
}
</style>
