BIM

src/styles/page/using/bim.scss

@@ -0,0 +1,54 @@
+.el-card.hc-bim-card-box .el-card__body .hc-card-main-box {
+    .el-scrollbar__bar {
+        right: -15px;
+    }
+    .bim-echarts-box {
+        height: 500px;
+        padding: 0;
+        .bim-echarts {
+            position: relative;
+            height: 100%;
+            width: 100%;
+        }
+    }
+    .bim-table-box {
+        height: 340px;
+        margin-top: 24px;
+        .table-btn-icon {
+            background: white;
+            border-radius: 50px;
+            height: 40px;
+            width: 40px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 22px;
+            cursor: pointer;
+            color: var(--el-color-primary);
+            transition: color 0.3s;
+            &:hover {
+                color: var(--el-color-primary-dark-2);
+            }
+        }
+    }
+}
+
+html.dark {
+    .el-card.hc-bim-card-box {
+        border: 0;
+        box-shadow: none;
+        --el-card-padding: 24px 0;
+        --el-card-border-radius: 0;
+        .el-card__body {
+            padding-bottom: 0;
+        }
+        .bim-echarts-box {
+            border: 1px solid var(--el-color-primary);
+        }
+        .bim-table-box {
+            height: 360px;
+            padding: 0;
+        }
+    }
+}
+

src/views/using/bim.vue

@@ -1,15 +1,23 @@
 <template>
-    <div>
-        <div id="domId" style="height: 500px; width: 100%; position: relative;">
-
-        </div>
-    </div>
+    <HcCard scrollbar ui="hc-bim-card-box">
+        <HcCardItem ui="bim-echarts-box">
+            <div id="bimId" class="bim-echarts"/>
+        </HcCardItem>
+        <HcCardItem ui="bim-table-box">
+            <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
+                <template #action="{row,index}">
+                    <div class="table-btn-icon">
+                        <HcIcon name="file-search"/>
+                    </div>
+                </template>
+            </HcTable>
+        </HcCardItem>
+    </HcCard>
 </template>
 
 <script setup>
-import {onMounted} from "vue";
+import {onMounted, ref} from "vue";
 import bimApi from "~api/using/bim.js";
-import {getArrValue, getObjValue} from "js-fast-way";
 
 onMounted(() => {
     getModelviewApi()
@@ -26,17 +34,23 @@ const getModelviewApi = async () => {
     }
 }
 
+const bim3D = ref(null)
 const initBimface = (viewToken) => {
     let loaderConfig = new BimfaceSDKLoaderConfig();
     loaderConfig.viewToken = viewToken
     BimfaceSDKLoader.load(loaderConfig, (viewMetaData) => {
-        var domShow = document.getElementById('domId');
-        var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
+        let domShow = document.getElementById('bimId');
+        let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
         webAppConfig.domElement = domShow;
-        var app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
-        app.addView(loaderConfig.viewToken);
-        var viewer3D = app.getViewer();
-        //this.setBackgroundColor();
+        let app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
+        app.addView(viewToken);
+        let viewer3D = app.getViewer();
+
+        //设置背景色
+        let monochrome = new Glodon.Web.Graphics.Color(9, 11, 98, 0);
+        viewer3D.setBackgroundColor(monochrome);
+
+        bim3D.value = viewer3D
 
         //加载完成监听
         viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, initModel);
@@ -52,15 +66,126 @@ const initBimface = (viewToken) => {
     });
 }
 
+//加载完成监听
 const initModel = () => {
-
+    const modalFileId = '2019513822914752'
+    bim3D.value?.getModel(modalFileId).overrideAllComponentsColor(new Glodon.Web.Graphics.Color('#6D6D6D'))
+    setTimeout(() => {
+        bim3D.value?.setModelScale(modalFileId, { x: 0, y: 0, z: 0 }, 7);
+        bim3D.value?.render();
+    }, 1);
 }
 
-const setTableData = () => {
+//表格
+const tableColumn = ref([
+    {key:'construction', name: '施工部位'},
+    {key:'date', name: '施工日期', width: 180, align: 'center'},
+    {key:'leading', name: '现场负责人', width: 160, align: 'center'},
+    {key:'supervisor', name: '监理', width: 120, align: 'center'},
+    {key:'dataType', name: '资料状态', width: 120, align: 'center'},
+    {key:'measureType', name: '计量状态', width: 120, align: 'center'},
+    {key:'action', name: '查看', width: 90, align: 'center'},
+])
+const tableData = ref([])
 
+//点击监听
+const setTableData = (data) => {
+    if (data?.objectId !== '63-98-67-14-88-28-D9-3C-BE-AD-19-02-C4-21-DA-0A') {
+        tableData.value = [];
+        return
+    }
+    tableData.value = [
+        {
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥17#桥墩17-2人工挖孔桩成孔检查]',
+            date: '2021.10.31~2021.11.19',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        },
+        {
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥17#桥墩17-2人工挖孔桩钢筋加工及安装]',
+            date: '2021.11.20~2021.11.21',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        },{
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥17#桥墩17-2人工挖孔桩成桩检查]',
+            date: '2021.11.22~2021.12.20',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        },
+        {
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥17#桥墩17-2人工挖孔桩分项工程开工报告]',
+            date: '',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        },
+        {
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥17#桥墩17-2人工挖孔桩中间交工证书]',
+            date: '',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        },
+        {
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥17#桥墩17-2人工挖孔桩分项工程质量检验评定表]',
+            date: '',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        },
+        {
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥18#桥墩18-0人工挖孔桩成孔检查]',
+            date: '2021.11.1~2021.11.22',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        },
+        {
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥18#桥墩18-0人工挖孔桩钢筋加工及安装]',
+            date: '2020.11.22~2020.11.23',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        },
+        {
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥18#桥墩18-0人工挖孔桩成桩检查]',
+            date: '2021.11.24~2021.12.22',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        },
+        {
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥18#桥墩18-0人工挖孔桩成孔检查中间交工证书]',
+            date: '',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        },
+        {
+            construction: '[EK0+423.807瞿塘峡互通E匝道桥18#桥墩18-0人工挖孔桩分项工程质量检验评定表]',
+            date: '',
+            leading: '陈远红、朱永波',
+            supervisor: '杨昌玮',
+            dataType: '已审批',
+            measureType:'已计量',
+        }
+    ]
 }
 </script>
 
 <style lang="scss">
-
+@import '~style/using/bim.scss';
 </style>