<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="['project']" node-key="type" :current-node-key="currentKey" @check="handleCheckChange"
|
show-checkbox ref="tree">
|
<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 === 'storey'" style="padding-left: 30px">-->
|
<!-- <el-button type="text" size="mini" @click="() => openInstallations(node, data)">构件表</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-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: "value",
|
},
|
keyString: "id",
|
ifcdata: [],
|
currentKey: "",
|
storeyTitle: "",
|
installationsData: [],
|
arr: [],
|
currentDataNum: "0",
|
isOntest: 0,
|
modelId: "",
|
selectId: [],
|
popuDlgIsOn: false,
|
clickList: [],
|
componentIdLists: [],
|
lastShowComponentIds:null
|
};
|
},
|
methods: {
|
initalComponentsTree(_data) {
|
// console.log("_data:",_data)
|
|
if (this.currentDataNum != _data.num) {
|
if (!_data.dataId) {
|
this.$message.error("请先完成相应模型初始化加载!");
|
return;
|
}
|
window.sgworld.bim.choice()
|
this.currentDataNum = _data.num + "";
|
this.modelId = _data.dataId;
|
this.loading = true;
|
let _this = this;
|
_this.arr = [];
|
// let ifcurl = BIM_PROPERTY_URL + "ps" + _data.num + "/ifc/v1/tree";
|
// let serviceName = 'szps2'
|
let serviceName = _data.num
|
//ifc构件类型地址
|
let ifcurl = BIM_SERVER_GET + "getComponentTypes?modelId=" + this.modelId;
|
//获取模型对应的ifc构件类型
|
axios.get(ifcurl).then((res) => {
|
// console.log(res);
|
if (res.data.code === 200) {
|
let data = res.data.data;
|
const buildArr = [];
|
for (var i = 0; i < data.length; i++) {
|
// buildArr.push({
|
// value:data[i].value,
|
// type:data[i].type,
|
// children:[]
|
// })
|
_this.arr.push(data[i].type);
|
}
|
// console.log(_this.arr)
|
const treeNodes = [
|
{
|
type: "project",
|
value: _data.name,
|
isParent: true,
|
children: data,
|
haschildren: true,
|
open: true,
|
},
|
];
|
// console.log(treeNodes)
|
|
_this.ifcdata = treeNodes;
|
this.loading = false;
|
// this.$nextTick(() => {
|
// this.$refs.tree.setCheckedKeys(_this.arr);//获取已经设置的资源后渲染
|
// this.loading = false;
|
// });
|
} else {
|
_this.$message.error("查询服务异常！");
|
}
|
});
|
}
|
},
|
handleCheckChange(treeNode, checked) {
|
let _that = this
|
// console.log('111111', treeNode);
|
// console.log('2222222', checked);
|
if (treeNode.type == "project") {
|
treeNode.children.map(i => {
|
// console.log("??????", i)
|
_that.filterTree(i)
|
})
|
} else {
|
let checkIfc = []
|
checked.checkedKeys.forEach(ifc => {
|
let ifcNode = {}
|
ifcNode.type = ifc
|
checkIfc.push(ifcNode)
|
});
|
// console.log("checkIfc:",checkIfc)
|
this.clickList = checkIfc
|
// _that.filterTree(ifc)
|
}
|
// console.log('33333333', this.clickList);
|
// treeNode
|
},
|
filterTree(val) {
|
let e = this.clickList.filter(e => e.type === val.type)
|
if (e.length > 0) {
|
let typeList = [val.type]
|
this.clickList = this.clickList.filter(e => !typeList.includes(e.type))
|
// console.log('qqqqq', this.clickList)
|
} else {
|
this.clickList.push({ type: val.type })
|
}
|
},
|
showBim() {//设置构件显示隐藏
|
// if(this.lastShowComponentIds != null){
|
// window.BIM.SetComponentStatus(1, new Int32Array(this.lastShowComponentIds), true);
|
// }
|
this.offBim()
|
let _that = this;
|
let selectList = _that.clickList
|
let selectId = [];//
|
window.typeQuery = 0;
|
//移除构件所有操作（此处移除之前的BIM构件显隐）
|
window.BIM.CancelOperatingStatus();
|
//根据类型获取构件
|
for (var i of selectList) {
|
let ifcurl = BIM_SERVER_GET + "getComponentIds?modelId=" + this.modelId + "&type=" + i.type;
|
// let ifcurl = "http://localhost:8080/gisserver2/bimtest/getComponentIds?modelId=877&type=IfcColumn";
|
axios.get(ifcurl).then((res) => {
|
// console.log(res)
|
if (res.data.data) {
|
window.typeQuery++;
|
let componentIds = [...new Set(res.data.data.map((t) => t.id))];
|
for (let k = 0; k < componentIds.length; k++) {
|
selectId.push(this.modelId, componentIds[k]);
|
}
|
}
|
})
|
}
|
// selectId = ["1",32744,"1",32504,"1",32333,"1",32298,"1",30856,"1",34066,"1",10565,"1",30247,"1",7995,"1",26020,"1",7637,"1",10506,"1",19150]
|
window.TYPEQUERYINTERVAL = window.setInterval(() => {
|
if (window.typeQuery === selectList.length) {
|
window.clearInterval(window.TYPEQUERYINTERVAL);
|
// console.log("selectId",selectId)
|
if (selectId.length > 0) {
|
window.BIM.SetComponentStatus(0, new Int32Array(selectId), true);//反选，除selectId外的构件设置状态为cpStatus
|
// if(this.lastShowComponentIds != null){
|
// window.BIM.SetComponentStatus(0, new Int32Array(this.lastShowComponentIds), false);}
|
this.lastShowComponentIds = selectId;
|
}
|
// this.onquery = false;
|
}
|
}, 1000)
|
},
|
offBim() {
|
let _that = this
|
console.log(_that.r)
|
if (_that.componentIdLists.length > 0) {
|
let componentIdList = []
|
for (let i = 0; i < _that.componentIdLists.length; i += 2) {
|
componentIdList.push(_that.componentIdLists[i], _that.componentIdLists[i + 1])
|
}
|
console.log(componentIdList)
|
window.BIM.SetInstancesStatus(1, new Int32Array(componentIdList));
|
_that.componentIdLists = []
|
}
|
},
|
hiddenSubContent() {
|
this.$emit('hiddenSubContent', false)
|
},
|
// openInstallations(node, data) {
|
// this.storeyTitle = data.name + " 构件表";
|
//
|
// let tabledata = data.installations ? data.installations : [];
|
// tabledata.forEach((item) => {
|
// item.isOn = 1;
|
// });
|
//
|
// this.installationsData = tabledata;
|
// this.isInstallationOn = true;
|
// },
|
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);
|
console.log("sqldb:",sqldb)
|
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);
|
console.log("sqldb:",sqldb)
|
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.dbTest()
|
// this.$nextTick(() => {
|
// this.initalComponentsTree();
|
// });
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.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;
|
}
|
}
|
}
|
</style>
|
