<template>
|
<div class="bimcpt-panel">
|
<el-tree v-loading="loading" element-loading-background="rgba(120, 120, 120, 0.8)" class="components-tree"
|
:data="ifcdata" :props="defaultProps" highlight-current :default-checked-keys="arr" :default-expanded-keys="[1]"
|
node-key="id" :current-node-key="currentKey" @check="handleCheckChange" ref="tree" :load="componentClick" lazy>
|
<div style="display: flex; justify-content: flex-start" class="font_color" slot-scope="{ node, data }">
|
<div style="display: inline-block; padding-top: 1px" @dblclick="flyTo(node, data)">
|
<i class="font_color" :class="[data.haschildren ? 'el-icon-folder-opened' : 'el-icon-document',]"></i>
|
<span class="font_color" style="padding-left: 4px">{{node.label}}</span>
|
<span v-show="data.type === 'project'" style="padding-left: 25px">
|
<el-button type="text" size="mini" @click="() => allShow(node, data)">全显</el-button>
|
</span>
|
<span v-show="data.type === 'componentId'" style="padding-left: 25px">
|
<el-button type="text" size="mini" @click="() => openInstallations(node, data)">详情</el-button>
|
</span>
|
<span v-show="data.type === 'componentId'" style="padding-left: 25px">
|
<el-button type="text" size="mini" @click="() => flyToComponent(node, data)">定位</el-button>
|
</span>
|
<span v-show="data.type === 'componentId'" style="padding-left: 25px">
|
<el-button type="text" size="mini" @click="() => quarantine(node, data,`true`)">隔离</el-button>
|
</span>
|
<span v-show="data.type === 'componentId'" style="padding-left: 25px">
|
<el-button type="text" size="mini" @click="() => quarantine(node, data,`false`)">隐藏</el-button>
|
</span>
|
</div>
|
</div>
|
</el-tree>
|
<!-- <el-dialog :title="storeyTitle" :visible.sync="isInstallationOn" :modal-append-to-body="false" :modal="false"
|
:close-on-click-modal="false" v-if="isInstallationOn" v-dialogDrag>
|
<el-table :data="installationsData" height="500">
|
<el-table-column label="定位" align="center" width="80" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" icon="el-icon-s-flag" @click="flyTo(scope.row)">
|
</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column property="id" width="120" label="构件xu号"></el-table-column>
|
<el-table-column property="guid" label="构件编号" align="center"></el-table-column>
|
<el-table-column property="name" label="构件信息" align="center"></el-table-column>
|
<el-table-column label="状态" align="center">
|
<template slot-scope="scope">
|
|
<el-switch :value="isOntest" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
|
style="visibility:hidden;width:0px" :inactive-value="0">
|
</el-switch>
|
<el-switch :value="scope.row.isOn" active-color="#13ce66" inactive-color="#ff4949"
|
:active-value="1" :inactive-value="0" active-text="显示" inactive-text="隐藏"
|
@change="hideOrShowInstallation(scope.row)">
|
</el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" @click="hideOrShowInstallation(scope.row, 1)">
|
显示
|
</el-button>
|
<el-button size="mini" type="text" @click="hideOrShowInstallation(scope.row, 0)">
|
隐藏
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-dialog> -->
|
<div class="drag_black" v-draw v-if="isInstallationOn">
|
<div class="pop-header">
|
<i class="el-icon-menu"></i>{{ storeyTitle }}
|
<div style="float: right; cursor: pointer" @click="closePopouDlg">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
<div class="scrollbar" style="overflow-y: auto;width:100%;height: 500px;">
|
<el-form ref="attributeForm" :model="attributeForm" label-width="120px" style="margin:20px;">
|
<el-row>
|
<el-form-item v-for="(val, key, i) in attributeForm" :key="i" :label="key">
|
<el-input v-model="attributeForm[key]" :disabled="true" class="inputStyle"
|
style="width: 610px;color:#fff"></el-input>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
<!-- <el-table :data="installationsData" height="480" style="background: transparent">
|
<el-table-column label="定位" align="center" width="80" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" icon="el-icon-s-flag" @click="flyTo(scope.row)">
|
</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column property="guid" label="构件编号" align="center"></el-table-column>
|
<el-table-column property="name" label="构件信息" align="center"></el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" @click="hideOrShowInstallation(scope.row, 1)">
|
显示
|
</el-button>
|
<el-button size="mini" type="text" @click="hideOrShowInstallation(scope.row, 0)">
|
隐藏
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import axios from "axios";
|
import * as SmartEarth from "../../../../public/CimSDK/index.js"
|
let Cesium = SmartEarth.Cesium;
|
export default {
|
props: ["data"],
|
data() {
|
return {
|
loading: false,
|
isInstallationOn: false,
|
defaultProps: {
|
children: "children",
|
label: "name",
|
isLeaf: 'leaf'
|
},
|
keyString: "id",
|
ifcdata: [],
|
currentKey: "",
|
storeyTitle: "",
|
installationsData: [],
|
arr: [],
|
currentDataNum: "0",
|
isOntest: 0,
|
modelId: "",
|
selectId: [],
|
popuDlgIsOn: false,
|
_data:null,
|
typeArr:[],
|
floorArr:[],
|
storeys:[],
|
attributeForm:[]
|
};
|
},
|
methods: {
|
initalComponentsTree(_data) {
|
if (this.currentDataNum != _data.num) {
|
if (!_data.dataId) {
|
this.$message.error("请先完成相应模型初始化加载!");
|
return;
|
}
|
this.modelId = _data.dataId;
|
this.currentDataNum = _data.num + "";
|
this.modelId = _data.dataId;
|
this.loading = true;
|
let _this = this;
|
_this.arr = [];
|
//存入树ifcdata
|
const treeNodes = [
|
{
|
name: _data.name,
|
id: "1",
|
type: "project",
|
isParent: true,
|
children: [],
|
haschildren: true,
|
open: true,
|
}
|
];
|
_this.ifcdata = treeNodes;
|
let load = {
|
type:false,
|
storey:false
|
}
|
let id = 101
|
//获取构件类型
|
let ifcurl = BIM_SERVER_GET+"getComponentTypes?modelId=" + this.modelId;
|
axios.get(ifcurl).then((types) => {
|
if(types.status == 200){
|
types.data.data.forEach((item) => {
|
const type = {
|
id: id,
|
name: item.value,
|
nodetype: item.type,
|
type: "component",
|
isParent: true,
|
children:[]
|
};
|
this.typeArr.push(type)
|
id++
|
});
|
load.type = true
|
if(load.type && load.storey){
|
this.loading = false;
|
}
|
}
|
})
|
|
//获取楼层
|
ifcurl = BIM_SERVER_GET+"getStorey?modelId=" + this.modelId;
|
axios.get(ifcurl).then((floor) => {
|
if(floor.status == 200){
|
let id = 11
|
let storeys = floor.data.data.map((d) => { return d.storey }).filter((value, index, self) => {
|
return self.indexOf(value) === index
|
})
|
storeys.sort();
|
this.storeys = storeys
|
storeys.forEach((item) => {
|
const obj = {
|
id: id,
|
name: item,
|
children: [],
|
type: "floor",
|
isParent: true,
|
};
|
this.floorArr.push(obj);
|
id++
|
});
|
load.storey = true
|
if(load.type && load.storey){
|
this.loading = false;
|
}
|
}
|
})
|
}
|
},
|
allShow(){
|
window.BIM.CancelOperatingStatus();
|
},
|
componentClick(node,resolve){
|
// console.log(node)
|
if(node.level == 1){
|
resolve(this.floorArr)
|
}else if(node.level == 2){
|
resolve(this.typeArr)
|
}else if(node.level == 3){
|
let ifcurl = BIM_SERVER_GET+"getComponentIds?modelId=" + this.modelId+"&type="+ node.data.nodetype +"&storey="+node.parent.label;
|
axios.get(ifcurl).then((res) => {
|
if(res.status == 200){
|
let componentIds = []
|
let id = 1001
|
res.data.data.forEach((item)=>{
|
const componentId = {
|
id: id,
|
name: item.id,
|
type: "componentId",
|
isParent: false,
|
leaf: true
|
};
|
id++
|
componentIds.push(componentId)
|
})
|
resolve(componentIds)
|
}
|
})
|
}
|
|
},
|
handleCheckChange(treeNode, checked) {
|
console.log(treeNode);
|
console.log(checked);
|
this.$message("开发中...." + treeNode.guid + "cheecked:" + checked);
|
let ischecked = checked.checkedKeys.indexOf(treeNode["id"]) > -1;
|
if (treeNode.haschildren) {
|
} else {
|
}
|
},
|
//获取构件ID属性信息
|
openInstallations(node, data) {
|
this.storeyTitle = data.name + " 构件表";
|
let ifcurl = BIM_SERVER_GET + "getProperty?modelId=" + this.modelId + "&id=" + data.name;
|
axios.get(ifcurl).then((res)=>{
|
if(res.status == 200){
|
this.attributeForm = res.data.data.attributes
|
this.isInstallationOn = true;
|
}else this.$message.error(res.data.msg)
|
})
|
},
|
flyToComponent(node, data) {
|
window.BIM.GetBIMComponentBoundingSphere(this.modelId,data.name,
|
function(result){
|
console.log(result)
|
}
|
)
|
},
|
quarantine(node,data,stage){
|
if(stage == "true")
|
{
|
window.BIM.CancelOperatingStatus();
|
window.BIM.SetComponentStatus(0, new Int32Array([this.modelId,data.name]),true)
|
}
|
else
|
{
|
window.BIM.SetComponentStatus(0,new Int32Array([this.modelId,data.name]))
|
}
|
},
|
flyTo(row) {
|
//this.$message("开发中....");
|
let id = row.id;
|
let guid = row.guid;
|
let _this = this;
|
debugger;
|
if (guid !== "") {
|
let ifcid = guid.split("_").slice(1).join("_");
|
let modelId = this.modelId;
|
let icHighlight = [];
|
let sqldb = window.BIM.GetModelSqlDb(modelId);
|
sqldb.each(
|
`select m.id as id from component c left join meshInstances m on m.componentId=c.id where c.ifcid='${ifcid}'`,
|
[],
|
(result) => {
|
icHighlight.push(modelId, result.id);
|
}
|
);
|
//点击高亮
|
if (window.BIM) {
|
if (_this.selectId) {
|
window.BIM.SetInstancesStatus(1, new Int32Array(_this.selectId));
|
}
|
let item = _this.$store.state.currentSelectNode;
|
if (item) {
|
let modelTransform = item.modelTransform;
|
let boundingSphere = _this.getBIMBoundingSphere(
|
window.BIM,
|
modelTransform,
|
icHighlight
|
);
|
sgworld._Viewer.camera.flyToBoundingSphere(boundingSphere);
|
}
|
_this.selectId = [...icHighlight];
|
window.BIM.SetInstancesStatus(2, new Int32Array(_this.selectId));
|
}
|
}
|
},
|
|
getBIMBoundingSphere(bim, modelTransform, modelIdAndInstancesId) {
|
let instancesTransformBox = bim.GetInstancesTransformBox(
|
modelIdAndInstancesId[0],
|
modelIdAndInstancesId[1]
|
);
|
let instancesMatrix = Cesium.Matrix4.fromArray(instancesTransformBox[0]);
|
let boxMin = Cesium.Matrix4.multiplyByPoint(
|
instancesMatrix,
|
Cesium.Cartesian3.fromArray(instancesTransformBox[1], 0),
|
{}
|
);
|
let boxMax = Cesium.Matrix4.multiplyByPoint(
|
instancesMatrix,
|
Cesium.Cartesian3.fromArray(instancesTransformBox[1], 3),
|
{}
|
);
|
boxMin = Cesium.Matrix4.multiplyByPoint(modelTransform, boxMin, {});
|
boxMax = Cesium.Matrix4.multiplyByPoint(modelTransform, boxMax, {});
|
let boundingSphere = Cesium.BoundingSphere.fromPoints(
|
[boxMin, boxMax],
|
new Cesium.BoundingSphere()
|
);
|
return boundingSphere;
|
},
|
|
hideOrShowInstallation(row, isOn) {
|
let guid = row.guid;
|
let id = row.id;
|
if (guid !== "") {
|
let ifcid = guid.split("_").slice(1).join("_");
|
let modelId = this.modelId;
|
let icHighlight = [];
|
let sqldb = window.BIM.GetModelSqlDb(modelId);
|
sqldb.each(
|
`select m.id as id from component c left join meshInstances m on m.componentId=c.id where c.ifcid='${ifcid}'`,
|
[],
|
(result) => {
|
icHighlight.push(modelId, result.id);
|
}
|
);
|
if (window.BIM) {
|
let selectId = [...icHighlight];
|
window.BIM.SetInstancesStatus(isOn, new Int32Array(selectId));
|
}
|
}
|
},
|
|
closePopouDlg() {
|
this.isInstallationOn = false;
|
}
|
},
|
mounted() {
|
// this.$nextTick(() => {
|
// this.initalComponentsTree();
|
// });
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.bimcpt-panel {
|
height: 100%;
|
|
.font_color {
|
color: #e7e7e7;
|
}
|
|
.components-tree {
|
background-color: transparent;
|
width: 100%;
|
height: 100%;
|
overflow-x: auto;
|
}
|
|
.components-tree::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 8px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 5px;
|
}
|
|
.components-tree::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 5px;
|
background-color: skyblue;
|
background-image: -webkit-linear-gradient(45deg,
|
rgba(255, 255, 255, 0.2) 25%,
|
transparent 25%,
|
transparent 50%,
|
rgba(255, 255, 255, 0.2) 50%,
|
rgba(255, 255, 255, 0.2) 75%,
|
transparent 75%,
|
transparent);
|
}
|
|
.model-layer-tree::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background: #ededed;
|
border-radius: 5px;
|
}
|
|
.el-tree-node .is-current>.el-tree-node__content {
|
background-color: rgba(147, 147, 147, 0.6) !important;
|
}
|
|
.el-tree-node:focus>.el-tree-node__content {
|
background-color: rgba(147, 147, 147, 0.6) !important;
|
}
|
|
.el-tree-node :nth-child(2) {
|
padding: 1px;
|
overflow: visible;
|
}
|
|
.el-tree-node__content {
|
&:hover {
|
// background: #89c2f7;
|
background: rgba(102, 102, 102, 0.6);
|
}
|
}
|
|
.d-header {
|
height: 18px;
|
padding: 5px;
|
background: #21212170;
|
color: rgb(232, 232, 232);
|
}
|
|
|
.drag_black {
|
width: 800px;
|
height: 520px;
|
background: #27272760;
|
position: absolute;
|
top: 80px;
|
left: 500px;
|
border: #00000090 2px solid;
|
overflow-y: "auto";
|
|
.el-form-item {
|
margin-bottom: 5px;
|
}
|
|
.el-input__inner {
|
background-color: transparent;
|
background-image: none;
|
border: 1px solid #c0c0c1;
|
box-sizing: border-box;
|
// color: #f0f0f0;
|
display: inline-block;
|
font-size: inherit;
|
line-height: 40px;
|
outline: 0;
|
padding: 0 15px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
}
|
|
.font_color {
|
color: #000;
|
}
|
|
.el-table /deep/ tr {
|
background-color: transparent;
|
color: rgba(240, 250, 254, 0.65);
|
}
|
|
.el-table /deep/ tr th {
|
background-color: rgba(99, 99, 99, 1);
|
color: rgba(240, 250, 254, 0.85);
|
}
|
|
.el-table /deep/ tr:hover>td {
|
background-color: rgba(0, 166, 226, 0.4) !important;
|
}
|
|
.pop-header {
|
font-weight: 600;
|
font-size: 16px;
|
padding: 10px;
|
background: rgba(0, 0, 0, 0.7);
|
color: rgb(232, 232, 232);
|
}
|
|
.el-tree-node .is-current>.el-tree-node__content {
|
background-color: rgba(52, 55, 63, 0.6) !important;
|
}
|
|
.el-tree-node:focus>.el-tree-node__content {
|
background-color: rgba(52, 55, 63, 0.6) !important;
|
}
|
|
.el-tree-node__content {
|
&:hover {
|
// background: #89c2f7;
|
background: rgba(28, 32, 42, 0.6);
|
}
|
}
|
|
.scroll-bar::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 10px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
|
.scroll-bar::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 1px;
|
background-color: rgb(79, 96, 103);
|
background-image: -webkit-linear-gradient(45deg,
|
rgba(255, 255, 255, 0.2) 25%,
|
transparent 25%,
|
transparent 50%,
|
rgba(255, 255, 255, 0.2) 50%,
|
rgba(255, 255, 255, 0.2) 75%,
|
transparent 75%,
|
transparent);
|
}
|
|
.scroll-bar::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background: #2c2c2c60;
|
border-radius: 1px;
|
}
|
}
|
}
|
.inputStyle :deep(.el-input__inner) {
|
background-color: #7a7b7c !important;
|
color: #ffffff !important;
|
}
|
</style>
|
