<template> <div ref="viewerNd" class="view-container viewer-nd"> <dee-tools class="viewer-nd-header-tools" :tools="headerTools" mode="normal" :collapse="false" /> <div id="iframeDiv">新迪-3D可视化组件</div> </div> </template> <script> import nd_viewCtrl from './viewer' import fullScreen from './fullScreen' export default { name: 'ViewerNd', displayName: '新迪-3D可视化组件', mixins: [fullScreen], props: { basicData: { type: Object, default: () => ({}) } }, data() { return {} }, computed: { partNumber() { return this.$utils._get(this.basicData, 'number', null) } }, watch: { 'basicData.number': { immediate: false, handler(number) { number && this.init() } } }, mounted() { this.init() }, methods: { init() { if (!this.partNumber) return if (!window.nd_viewCtrl) { window.nd_viewCtrl = nd_viewCtrl } // 新迪配置 // eslint-disable-next-line no-undef const ndViewer = DeeGlobaluploadSetting.ndViewer // 1、设置初始化属性 nd_viewCtrl.bgColor = '#F2F2F2' // eslint-disable-next-line no-undef nd_viewCtrl.fingerHttp = ndViewer.fingerHttp // 设置云api域名 // eslint-disable-next-line no-undef const baseUrl = `${VUE_APP_BASE_API || process.env.VUE_APP_BASE_API}` const token = localStorage.getItem('token') nd_viewCtrl.viewerReqHeader = { // authorization: token, // token: token, 'Dex-Token': token, 'Dex-Auth-Type': 'Token', 'equipment_id': localStorage.getItem('uid') } // 2、加载模型 nd_viewCtrl.init({ src: `${baseUrl}${ndViewer.modelsDirPath}${this.partNumber}`, // 轻量化文件所在文件夹路径 renderPagePath: ndViewer.renderPagePath }) } } } </script> <style lang="scss"> .viewer-nd { width: 100%; height: calc(100% - 40px); box-sizing: border-box; position: relative; .viewer-nd-header-tools { height: 40px; justify-content: flex-end; position: absolute; right: 0; top: -32px; } #iframeDiv { width: 100%; height: 100%; box-sizing: border-box; & > iframe { width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #d8d8d8; } } } </style>