fix: BUG修改
This commit is contained in:
kun
parent
639fa42153
commit
d4a369a987
15
index.html
15
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(
|
||||
|
||||
@ -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);
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user