From d4a369a9877a6ba18a9e8aa6e753cbba6ebee233 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Fri, 8 Mar 2024 11:39:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |  15 +
 src/api/modules/video.ts                      |   5 +
 src/routers/index.ts                          |   1 -
 .../newProjectOverView/centerTop.vue          | 259 +++++++++++++++---
 .../newProjectOverView/data-dialog.vue        |   6 +-
 .../newProjectOverView/index.vue              |   3 +-
 .../newProjectOverView/risk-tip-dialog.vue    |   3 +-
 7 files changed, 248 insertions(+), 44 deletions(-)

diff --git a/index.html b/index.html
index 3f74bdc..531b808 100644
--- a/index.html
+++ b/index.html
@@ -122,6 +122,21 @@
 		<!-- webrtc播放器视频文件 -->
 		<script type="text/javascript" src="/adapter.min.js"></script>
 		<script type="text/javascript" src="/webrtcstreamer.js"></script>
+		<!-- bimBase相关引入 -->
+		<script
+			src="https://api.cloud.pkpm.cn/bimviewer/viewer/v5/obv.js"
+			type="text/javascript"
+			></script>
+			<link
+			rel="stylesheet"
+			href="https://api.cloud.pkpm.cn/bimviewer/viewer/v5/obv.css"
+			type="text/css"
+			/>
+			<link
+			href="https://api.cloud.pkpm.cn/bimviewer/viewer/v4/locale/locale.properties"
+			rel="resource"
+			type="application/l10n"
+			/>
 		<script>
 			// 禁用鼠标滚动事件
 			document.addEventListener(
diff --git a/src/api/modules/video.ts b/src/api/modules/video.ts
index 80cb5c8..34d09e8 100644
--- a/src/api/modules/video.ts
+++ b/src/api/modules/video.ts
@@ -14,3 +14,8 @@ export const selectUserVideoListApi = (params: {}) => {
 export const getSafeHatSessionApi = (params: {}) => {
 	return http.post(BASEURL + `/xmgl/projectApi/getSafeyHatSession`, params);
 };
+
+// 查询模型工程列表
+export const getProgressListApi = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/taskProgressRt/getParentChildPage`, params);
+};
diff --git a/src/routers/index.ts b/src/routers/index.ts
index 69edd65..182d415 100644
--- a/src/routers/index.ts
+++ b/src/routers/index.ts
@@ -51,7 +51,6 @@ router.beforeEach(async (to, from, next) => {
 	const title = import.meta.env.VITE_GLOB_APP_TITLE;
 	// document.title = to.meta.title ? `${to.meta.title} - ${title}` : title;
 	document.title = to.meta.title ? `${to.meta.title} ` : title;
-
 	// 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
 	if (to.path === LOGIN_URL) {
 		console.log("判断是访问登陆页，有:", from.fullPath);
diff --git a/src/views/sevenLargeScreen/newProjectOverView/centerTop.vue b/src/views/sevenLargeScreen/newProjectOverView/centerTop.vue
index 0123e74..cb26f22 100644
--- a/src/views/sevenLargeScreen/newProjectOverView/centerTop.vue
+++ b/src/views/sevenLargeScreen/newProjectOverView/centerTop.vue
@@ -8,7 +8,7 @@
 			<span :class="activeTab == 1 ? 'active-span' : ''" @click="changeActive(1)">3D模型</span>
 		</div>
 		<div class="href-content" v-if="activeTab == 0">
-			<el-carousel indicator-position="none" height="450px">
+			<!-- <el-carousel indicator-position="none" height="450px">
 				<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
 					<div style="width: 100%; height: 100%">
 						<ckplayerComp
@@ -20,10 +20,13 @@
 						></ckplayerComp>
 					</div>
 				</el-carousel-item>
-			</el-carousel>
+			</el-carousel> -->
 		</div>
 		<div class="href-content" v-if="activeTab == 1">
-			<iframe :src="iframeUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
+			<el-select v-model="projectSelect" placeholder="请选择" size="small">
+				<el-option v-for="item in projectList" :key="item.id" :label="item.taskName" :value="item.id" />
+			</el-select>
+			<div id="viewer" style="width: 100%; height: 100%;margin-top: 10px;" class="my-obv-viewer"></div>
 		</div>
 	</div>
 </template>
@@ -31,14 +34,202 @@
 <script lang="ts" setup>
 import { GlobalStore } from "@/stores";
 import { ref, watch, onMounted, getCurrentInstance } from "vue";
-import { selectProjectVideoListApi } from "@/api/modules/video";
+import { selectProjectVideoListApi, getProgressListApi } from "@/api/modules/video";
 import ckplayerComp from "../videoManagement/ckplayerComp.vue";
 const emits = defineEmits(["openDialog"]);
 const store = GlobalStore();
 const rtcPlayer = ref();
 const videoList = ref([] as any);
 const activeTab = ref(0);
-const iframeUrl = ref("http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html");
+const iframeUrl = ref("");
+const iframeRef = ref();
+const projectSelect = ref();
+const projectList = ref([] as any);
+const configValue = ref({
+	viewToken: "",
+	urn: "",
+	hideArr: [],
+	colorArr: []
+});
+const firstEnter = ref(0);
+const searchParams = ref({} as any);
+const postDataVal = ref();
+const main = async () => {
+	// 创建实例需要传入的参数，部署环境serviceConfig 和 用户有效期getAccessToken
+	const applicationOptions = {
+		// 配置 OBV 服务端（BIMServer）API 服务的 origin，这个适合于私有部署的用户使用
+		getAccessToken: getAccessToken,
+		refreshAccessToken: getAccessToken,
+		serviceConfig: {
+			origin: "https://api.cloud.pkpm.cn",
+			apiContextPath: "/bimserver/viewing/v3"
+		}
+	};
+	// 定义urn，模型的唯一标识
+	let urn = configValue.value.urn;
+	// 实例化 Builder，用于模型加载
+	const builder = new OBV.Api.ObvBuilder();
+	// 创建 Application 对象
+	const application = await builder.buildApplication(applicationOptions);
+	// 创建 document 管理视图，加载完成后可以调用接口
+	const obvDocument = await builder.loadDocument(application, urn);
+	// 创建 viewer 容器, 创建API
+	const obvApi = await builder.buildViewer3d(application, document.getElementById("viewer"));
+	// 获取三维模型视图
+	const viewer3dItems = obvDocument.get3dGeometryItems();
+	// 加载模型
+	builder.load3dModels(obvApi, {
+		obvDocument: obvDocument,
+		viewer3dItem: viewer3dItems[0]
+	});
+	// 监听相机改变
+	obvApi.addEventListener(OBV.ViewerEventTypes.V3dCameraChangeEvent, (event: any) => {
+		console.log("V3dCameraChangeEvent", event);
+		if (firstEnter.value == 0) {
+			// 首次进入才操作模型
+			// 操作模型
+			renderConfigModel(obvApi);
+		}
+	});
+	// 通过监听鼠标点击，选择构件
+	obvApi.addEventListener(OBV.ViewerEventTypes.V3dSelectionChangedEvent, (event: any) => {
+		emits("openDialog",{...postDataVal.value,title: '风险提示数据'})
+	});
+};
+// 访问的令牌 getAccessToken 和 令牌有效期 expiresIn
+const getAccessToken = (callBack: any) => {
+	callBack(configValue.value.viewToken);
+};
+const renderConfigModel = (obvApi: any) => {
+	console.log(obvApi);
+	firstEnter.value = firstEnter.value + 1; // 避免多次调用
+	// 隐藏构件
+	if (configValue.value.hideArr.length > 0) {
+		obvApi.hide(configValue.value.hideArr);
+	}
+	// 构件着色
+	if (configValue.value.colorArr.length > 0) {
+		configValue.value.colorArr.map((item: any) => {
+			if (item.modelId) {
+				let firstIndex = item.color.indexOf(",");
+				let secondIndex = item.color.indexOf(",", firstIndex + 1);
+				let thirdIndex = item.color.indexOf(")", -1);
+				// 构件着色
+				obvApi.setObjectsColor(
+					[item],
+					item.color.substring(4, firstIndex),
+					item.color.substring(firstIndex + 2, secondIndex),
+					item.color.substring(secondIndex + 2, thirdIndex),
+					1
+				);
+			}
+		});
+	}
+};
+const requestTokenFunction = async () => {
+	//1. 创建对象
+	const xhr = new XMLHttpRequest();
+	// 2.初始化 设置请求方法和url
+	xhr.open(
+		"GET",
+		`http://101.43.164.214:11111/xmgl/gouliPkpmModel/getBimTokenByProjectSn?projectSn=${searchParams.value.projectSn}`
+	);
+
+	//3. 发送
+	xhr.send();
+	// onreadystatechange:当状态发生变化的时候
+	xhr.onreadystatechange = function () {
+		console.log(xhr);
+		// 判断（服务器返回所有的结果）
+		if (xhr.readyState === 4) {
+			// 判断响应状态码200 404 403 401 500
+			if (xhr.status == 200) {
+				// 处理结果
+				console.log(JSON.parse(xhr.response), "11111111111");
+				// console.log(xhr.status); //状态码
+				// console.log(xhr.statusText); //状态字符串
+				// console.log(xhr.getAllResponseHeaders()); // 所有响应头
+				// console.log(xhr.response); //响应体
+
+				configValue.value.viewToken = JSON.parse(xhr.response).result;
+				requestInfoFunction();
+			}
+		}
+	};
+};
+const requestInfoFunction = async () => {
+	//1. 创建对象
+	const xhr = new XMLHttpRequest();
+	// 2.初始化 设置请求方法和url
+	xhr.open("GET", `http://101.43.164.214:11111/xmgl/gouliPkpmModel/queryById?id=${searchParams.value.gouliPkpmModelId}`);
+
+	//3. 发送
+	xhr.send();
+	// onreadystatechange:当状态发生变化的时候
+	xhr.onreadystatechange = function () {
+		console.log(xhr);
+		// 判断（服务器返回所有的结果）
+		if (xhr.readyState === 4) {
+			// 判断响应状态码200 404 403 401 500
+			if (xhr.status == 200) {
+				// 处理结果
+				console.log(JSON.parse(xhr.response), "2222222222");
+				// console.log(xhr.status); //状态码
+				// console.log(xhr.statusText); //状态字符串
+				// console.log(xhr.getAllResponseHeaders()); // 所有响应头
+				// console.log(xhr.response); //响应体
+
+				configValue.value.urn = JSON.parse(xhr.response).result.urn;
+				requestComponentIdFunction();
+			}
+		}
+	};
+};
+const requestComponentIdFunction = async () => {
+	//1. 创建对象
+	const xhr = new XMLHttpRequest();
+	// 2.初始化 设置请求方法和url
+	xhr.open("GET", `http://101.43.164.214:11111/xmgl/taskProgressRt/queryById?id=${searchParams.value.id}`);
+
+	//3. 发送
+	xhr.send();
+	// onreadystatechange:当状态发生变化的时候
+	xhr.onreadystatechange = function () {
+		console.log(xhr);
+		// 判断（服务器返回所有的结果）
+		if (xhr.readyState === 4) {
+			// 判断响应状态码200 404 403 401 500
+			if (xhr.status == 200) {
+				// 处理结果
+				console.log(JSON.parse(xhr.response), "33333333333");
+				// console.log(xhr.status); //状态码
+				// console.log(xhr.statusText); //状态字符串
+				// console.log(xhr.getAllResponseHeaders()); // 所有响应头
+				// console.log(xhr.response); //响应体
+				postDataVal.value = JSON.parse(xhr.response).result
+				if (JSON.parse(xhr.response).result.hiddenComponentId) {
+					configValue.value.hideArr = JSON.parse(JSON.parse(xhr.response).result.hiddenComponentId);
+				} else {
+					configValue.value.hideArr = [];
+				}
+				if (JSON.parse(xhr.response).result.componentColorJson) {
+					configValue.value.colorArr = JSON.parse(JSON.parse(xhr.response).result.componentColorJson);
+				} else {
+					configValue.value.colorArr = [];
+				}
+				main();
+			}
+		}
+	};
+};
+// 获取模型对应的工程列表
+const getProjectList = async () => {
+	const res: any = await getProgressListApi({ projectSn: store.sn });
+	projectList.value = res.result.records;
+	if (projectList.value.length > 0) {
+		projectSelect.value = projectList.value[0].id;
+	}
+};
 const getVideoList = async () => {
 	let res: any = await selectProjectVideoListApi({
 		projectSn: store.sn,
@@ -60,40 +251,15 @@ const getVideoList = async () => {
 };
 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";
+	if (activeIndex == 1) {
+		let item = projectList.value.find((item: any) => item.id == projectSelect.value);
+		searchParams.value = item;
+		requestTokenFunction();
+	}
 };
-// watch(
-// 	() => activeTab.value,
-// 	newVal => {
-// 		if (newVal == 0) {
-// 			getVideoList();
-// 		}
-// 	},
-// 	{
-// 		immediate: true
-// 	}
-// );
-onMounted(() => {
-	
-	// 接收模型构件点击传递的数据
-	// window.addEventListener("message", (event:any) => {
-	// 		console.log(event)
-	// },false);
-	window.addEventListener(
-		"message",
-		async event => {
-			console.log(event)
-			const { type, data } = event.data;
-			// 更新数据
-			if (type === "modelClick") {
-				console.log(data);
-				emits("openDialog",{...data,title:'风险提示'})
-			}
-		},
-		false
-	);
-	getVideoList();
+onMounted(async () => {
+	await getVideoList();
+	await getProjectList();
 });
 </script>
 
@@ -143,4 +309,21 @@ onMounted(() => {
 		margin-top: 10px;
 	}
 }
+// element 样式
+:deep() {
+	.el-input__wrapper {
+		background-color: transparent;
+	}
+	.el-input__inner {
+		color: white;
+	}
+	.view3d-viewer {
+		width: 850px !important;
+		height: 450px !important;
+		.obv-viewer3d-main-canvas{
+		width: 850px !important;
+		height: 450px !important;
+		}
+	}
+}
 </style>
diff --git a/src/views/sevenLargeScreen/newProjectOverView/data-dialog.vue b/src/views/sevenLargeScreen/newProjectOverView/data-dialog.vue
index 81ad1c3..fd42efe 100644
--- a/src/views/sevenLargeScreen/newProjectOverView/data-dialog.vue
+++ b/src/views/sevenLargeScreen/newProjectOverView/data-dialog.vue
@@ -7,10 +7,10 @@
 					<i>{{ postData.title || '' }}</i>
 				</div>
 			</div>
-			<!-- <div class="political-outlook" v-if="!postData.projectSn">
+			<div class="political-outlook" v-if="!postData.projectSn">
 				<memberMoreList ref="historyList" :dataObj="postData"></memberMoreList>
-			</div> -->
-			<div class="political-outlook">
+			</div>
+			<div class="political-outlook" v-if="postData.projectSn">
 				<riskTipDialog ref="riskTipDialog" :dataObj="postData"></riskTipDialog>
 			</div>
 			<div class="close-icon" @click="showDialog = false">
diff --git a/src/views/sevenLargeScreen/newProjectOverView/index.vue b/src/views/sevenLargeScreen/newProjectOverView/index.vue
index 7283ebe..59b4363 100644
--- a/src/views/sevenLargeScreen/newProjectOverView/index.vue
+++ b/src/views/sevenLargeScreen/newProjectOverView/index.vue
@@ -7,7 +7,7 @@
 			<div class="leftBottom"><LeftBottom /></div>
 		</div>
 		<div class="center">
-			<div class="centerTop" @openDialog="openPeopleCountDialog"><CenterTop/></div>
+			<div class="centerTop"><CenterTop @openDialog="openPeopleCountDialog"/></div>
 			<div class="centerBottom"><CenterBottom /></div>
 		</div>
 		<div class="right">
@@ -34,6 +34,7 @@ import { ref } from "vue";
 // 弹窗
 const partyBuildRef = ref();
 const openPeopleCountDialog = (type:any) => {
+	console.log(type)
 	partyBuildRef.value.openDialog(type);
 	// console.log(partyBuildRef.value);
 };
diff --git a/src/views/sevenLargeScreen/newProjectOverView/risk-tip-dialog.vue b/src/views/sevenLargeScreen/newProjectOverView/risk-tip-dialog.vue
index 81e5ced..443efaf 100644
--- a/src/views/sevenLargeScreen/newProjectOverView/risk-tip-dialog.vue
+++ b/src/views/sevenLargeScreen/newProjectOverView/risk-tip-dialog.vue
@@ -7,7 +7,7 @@
 				<span :class="activeTab == 2 ? 'active-span' : ''" @click="changeActive(2)">施工要点</span>
 			</div>
 			<div class="text-content">
-				
+				{{ activeTab == 0?props.dataObj.dangerPointIdentification:activeTab == 1?props.dataObj.riskControlMeasure:activeTab == 2?props.dataObj.constructionKeyPoint:'' }}
 			</div>
 		</div>
 	</div>
@@ -35,6 +35,7 @@ const getCompanyList = async () => {
 	}
 };
 onMounted(async () => {
+	console.log(props.dataObj)
 	await getCompanyList();
 });
 </script>