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

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

上级 a49cd4f1
.webglContainer1{
height: 85%;
position: absolute;
top: 0;
left: 0;
height: 100%;
width:100%;
}
.all{
height: 100%;
}
.title{
text-align: center;
font-size: 26px;
.floatDiv {
margin-top: 30px;
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';
import AddModel from 'AddModel';
import SetModelColor from 'SetModelColor';
import SetClickMode from 'SetClickMode';
import { Button, Menu, Affix, Icon, Tooltip } from 'antd';
import { Button, Menu, Icon, Tooltip } from 'antd';
import '../utils/OnClickPosition';
const filesurl= '../../public/model/house1/house1List.json';
......@@ -13,6 +13,10 @@ const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
class IndexPage extends React.Component{
constructor(props) {
super(props);
this.state = {liVisible: false};
}
SetModelColor = () => {
SetModelColor('testtag1',0,0,255);
};
......@@ -25,28 +29,55 @@ class IndexPage extends React.Component{
EngineInit("webglContainer");
SetClickMode(0);
AddModel(filesurl, 'testtag1');
}
ModelSettingMenuClick = (liVisible) => {
console.info(liVisible);
if (liVisible === true) {
this.setState({ liVisible: false });
} else {
this.setState({ liVisible: true });
}
};
render() {
return (
<div className={ styles.all }>
<div className={styles.title}><label>BiM 测试平台</label></div>
<div id="webglContainer" className={styles.webglContainer1} ref={(node) => { this.container = node; }}>
<div className={styles.floatDiv}>
<div className={styles.toolBar}>
<ul className={`${styles.menuUl} ${styles.clearfix}`}>
<li>
<Tooltip title="模型颜色设置">
<Button type="primary" onClick={this.SetModelColor}>
<Icon type="mail"></Icon>
</Button>
</Tooltip>
<Button type="primary" onClick={this.SetClickMode.bind(undefined,'0')}>查看模式</Button>
<Button type="primary" onClick={this.SetClickMode.bind(undefined,'1')}>坐标拾取模式</Button>
</li>
<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>
</li>
</ul>
}
</li>
</ul>
</div>
</div>
<div id="webglContainer" className={styles.webglContainer1}/>
</div>
);
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论