提交 4c44e507 authored 作者: 吴强's avatar 吴强

#添加了toolBar,就是操作bim 模型的工具栏。费了我好大的功夫。慢慢摸索吧

上级 a49cd4f1
.webglContainer1{ .webglContainer1{
height: 85%; position: absolute;
top: 0;
left: 0;
height: 100%;
width:100%; width:100%;
} }
.all{ .all{
height: 100%;
} }
.title{ .floatDiv {
text-align: center; margin-top: 30px;
font-size: 26px; float: left;
position: relative;
text-align: left;
left: 50%;
z-index: 9999;
}
.toolBar {
position: relative;
left: -50%;
z-index: 9999;
}
.menuUl {
margin: 0 auto;
}
.menuUl li {
list-style: none;/* 设置li 样式,不带小点点*/
float:left;
width: 50px;
}
.menuUl ul {
display:-moz-inline-block;
}
.menuUl ul li {
list-style:none;
}
.clearfix:before,.clearfix:after{
display:table;
content:'';
} }
.clearfix:after{
clear:both;/*在所有元素的父元素上加伪类*/
}
.clearfix{
*zoom:1;
}
ul,li,button{
margin:0;
padding:0;
}
...@@ -5,7 +5,7 @@ import EngineInit from 'EngineInit'; ...@@ -5,7 +5,7 @@ import EngineInit from 'EngineInit';
import AddModel from 'AddModel'; import AddModel from 'AddModel';
import SetModelColor from 'SetModelColor'; import SetModelColor from 'SetModelColor';
import SetClickMode from 'SetClickMode'; import SetClickMode from 'SetClickMode';
import { Button, Menu, Affix, Icon, Tooltip } from 'antd'; import { Button, Menu, Icon, Tooltip } from 'antd';
import '../utils/OnClickPosition'; import '../utils/OnClickPosition';
const filesurl= '../../public/model/house1/house1List.json'; const filesurl= '../../public/model/house1/house1List.json';
...@@ -13,6 +13,10 @@ const SubMenu = Menu.SubMenu; ...@@ -13,6 +13,10 @@ const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup; const MenuItemGroup = Menu.ItemGroup;
class IndexPage extends React.Component{ class IndexPage extends React.Component{
constructor(props) {
super(props);
this.state = {liVisible: false};
}
SetModelColor = () => { SetModelColor = () => {
SetModelColor('testtag1',0,0,255); SetModelColor('testtag1',0,0,255);
}; };
...@@ -25,28 +29,55 @@ class IndexPage extends React.Component{ ...@@ -25,28 +29,55 @@ class IndexPage extends React.Component{
EngineInit("webglContainer"); EngineInit("webglContainer");
SetClickMode(0); SetClickMode(0);
AddModel(filesurl, 'testtag1'); AddModel(filesurl, 'testtag1');
}
ModelSettingMenuClick = (liVisible) => {
console.info(liVisible);
if (liVisible === true) {
this.setState({ liVisible: false });
} else {
this.setState({ liVisible: true });
} }
};
render() { render() {
return ( return (
<div className={ styles.all }> <div className={ styles.all }>
<div className={styles.title}><label>BiM 测试平台</label></div> <div className={styles.floatDiv}>
<div className={styles.toolBar}>
<div id="webglContainer" className={styles.webglContainer1} ref={(node) => { this.container = node; }}> <ul className={`${styles.menuUl} ${styles.clearfix}`}>
<li>
<Tooltip title="模型颜色设置"> <Tooltip title="模型颜色设置">
<Button type="primary" onClick={this.SetModelColor}> <Button type="primary" onClick={this.SetModelColor}>
<Icon type="mail"></Icon> <Icon type="mail"></Icon>
</Button> </Button>
</Tooltip> </Tooltip>
<Button type="primary" onClick={this.SetClickMode.bind(undefined,'0')}>查看模式</Button> </li>
<Button type="primary" onClick={this.SetClickMode.bind(undefined,'1')}>坐标拾取模式</Button> <li>
<Tooltip title="模型设置">
<Button type="primary" onClick={this.ModelSettingMenuClick.bind(undefined,this.state.liVisible)}>模型设置</Button>
</Tooltip>
{
this.state.liVisible&&<ul className={styles.clearfix}>
<li>
<Button type="primary">查看模式</Button>
</li>
<li>
<Button type="primary">坐标拾取模式</Button>
</li>
<li>
<Button type="primary" onClick={this.SetClickMode.bind(undefined,'2')}>ID拾取模式</Button> <Button type="primary" onClick={this.SetClickMode.bind(undefined,'2')}>ID拾取模式</Button>
</li>
</ul>
}
</li>
</ul>
</div> </div>
</div> </div>
<div id="webglContainer" className={styles.webglContainer1}/>
</div>
); );
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论