Skip to content

A
amos-convertor-view
Commit ce38a085 authored by baoshuang's avatar baoshuang
Browse files
Options

编辑模式代码

parent 93c80a4f
Show whitespace changes
Inline Side-by-side
Showing with 809 additions and 160 deletions
src/styles/view/3dview/moduleEdit.scss
View file @ ce38a085
...@@ -120,6 +120,14 @@ ...@@ -120,6 +120,14 @@
font-size: 15px; font-size: 15px;
} }
} }
.icon {
margin-left: 5px;
vertical-align: middle;
img {
vertical-align: initial;
margin-left: 10px;
}
}
} }
.bottomBtns { .bottomBtns {
padding-top: 15px; padding-top: 15px;
...@@ -153,8 +161,18 @@ ...@@ -153,8 +161,18 @@
background-color: rgba(10, 53, 62, 0.68); background-color: rgba(10, 53, 62, 0.68);
border: 1px solid rgba(46, 217, 239, 0.59); border: 1px solid rgba(46, 217, 239, 0.59);
padding: 12px; padding: 12px;
color: #fff;
.amos-form-item-label {
color: #fff;
}
.topForm { .topForm {
height: calc(100% - 48px); height: calc(100% - 48px);
.amos-input {
width: 100%;
}
.amos-select {
width: 100%;
}
} }
} }
.bottomBtns { .bottomBtns {
...@@ -172,6 +190,12 @@ ...@@ -172,6 +190,12 @@
background: url('/src/assets/moduleEdit/deleteBtn.png') no-repeat 100% 100%; background: url('/src/assets/moduleEdit/deleteBtn.png') no-repeat 100% 100%;
border: none; border: none;
} }
.cancelBtn {
width: 100px;
height: 33px;
background: url('/src/assets/moduleEdit/cancelBtn.png') no-repeat 100% 100%;
border: none;
}
} }
} }
......
src/view/3dview/ModuleEdit.js
View file @ ce38a085
...@@ -16,20 +16,15 @@ import { desigerConf, desigerHelperConfig } from './moduleEditConf'; ...@@ -16,20 +16,15 @@ import { desigerConf, desigerHelperConfig } from './moduleEditConf';
import withDesigner from './../connect/withDesigner'; import withDesigner from './../connect/withDesigner';
import { getAreaTreeAction, getPointTypeAction, getPointTreeAction } from './../../services/moduleEditServices'; import { getAreaTreeAction, getPointTypeAction, getPointTreeAction } from './../../services/moduleEditServices';
import { getPointListAction,saveAreaDataAction } from './../../services/moduleEditServices'; import { getPointListAction,saveAreaDataAction,savePointListAction } from './../../services/moduleEditServices';
import PointsPoolEditPage from './PointsPoolEditPage'; import PointsPoolEditPage from './PointsPoolEditPage';
import { eventTopics, isControllerEvent, isManualOperate } from './consts'; import { eventTopics, isControllerEvent, isManualOperate } from './consts';
import { executeView3dCMD, parseManual, parseBubbleMarkers, tirggerPlanTopic, tirggerTransTopic } from './dataProcessor'; import { executeView3dCMD, parseManual, parseBubbleMarkers, tirggerPlanTopic, tirggerTransTopic } from './dataProcessor';
import {
dealTroubleMarkers,
removeFireAlarm,
initView3d,
} from './ruleActionView';
// import ScreenSaverView from './screenSaver/ScreenSaverView';
import { lineData } from './datas';
// import PersonCurves from './PersonCurves'; // import PersonCurves from './PersonCurves';
import AreaLeftTree from './moduleEditComponent/AreaLeftTree'; import AreaLeftTree from './moduleEditComponent/AreaLeftTree';
import RightEditPanel from './moduleEditComponent/RightEditPanel'; import PointLeftTree from './moduleEditComponent/PointLeftTree';
import RightEditPointPanel from './moduleEditComponent/RightEditPointPanel';
import RightEditRegionPanel from './moduleEditComponent/RightEditRegionPanel';
import { EVENTS_CONSTS, dispatchMouseDown } from './../../consts/EventConsts'; import { EVENTS_CONSTS, dispatchMouseDown } from './../../consts/EventConsts';
const AmosConfig = endConf.AmosConfig; const AmosConfig = endConf.AmosConfig;
...@@ -38,9 +33,6 @@ let mousewheelCount = AmosConfig.mapLevelconfig.mousewheelCount * 100; ...@@ -38,9 +33,6 @@ let mousewheelCount = AmosConfig.mapLevelconfig.mousewheelCount * 100;
// const showInterval = AmosConfig.screenSaverConf.delayTime * 1000; // const showInterval = AmosConfig.screenSaverConf.delayTime * 1000;
const { resizeConnect } = Connect; const { resizeConnect } = Connect;
const eventConnect = UIConnect.eventConnect; const eventConnect = UIConnect.eventConnect;
const { BaseObjHelper } = transitionHelper;
const { FlameFire, FlameFire2, FlameFire3 } = FireObject;
const LENS_LEVEL = { const LENS_LEVEL = {
...@@ -69,29 +61,20 @@ class ModuleEdit extends Component { ...@@ -69,29 +61,20 @@ class ModuleEdit extends Component {
totalDelta: 0, // zoom值 totalDelta: 0, // zoom值
asyncModels: null, asyncModels: null,
startAsyncLoad: false, startAsyncLoad: false,
showScreenSaver: false,
showMap: true, showMap: true,
fireTruckRoute: '',
pathRoute: [], pathRoute: [],
markerList: [], markerList: [],
fireEquipmentPosition: [], fireEquipmentPosition: [],
markerType: null, markerType: null,
alarmStarted: false, alarmStarted: false,
drawing: false, drawing: false,//画线状态
selectArea: "", selectArea: "",//选中区域
treeData: [], selectPoints:"",//选中点
treeData: [],//左树
routePathData:[], //区域线位置 routePathData:[], //区域线位置
pageType: 'region', pageType: 'region', //编辑类型
pointType: '', pointType: '', //筛选框点类型
pointTypeArr: [], pointTypeArr: [],
// markers: {
// patrol: [],
// risk: [],
// video: [],
// person: [],
// data: [],
// room: []
// },
markers: { markers: {
riskSource: [], riskSource: [],
patrol: [], patrol: [],
...@@ -101,11 +84,14 @@ class ModuleEdit extends Component { ...@@ -101,11 +84,14 @@ class ModuleEdit extends Component {
fireEquipment: [] fireEquipment: []
}, },
editFlag: false,//编辑模式 editFlag: false,//编辑模式
showRightPanel: false //是否显示右侧详情
}; };
this.nativeProps = { this.nativeProps = {
onMouseDown: this.onMouseDown, onMouseDown: this.onMouseDown,
onMouseMove: this.onMouseMove onMouseMove: this.onMouseMove
}; };
this.drowItem = '';
this.areas = []
getObjFromNet(view3dFile, (objs, asyncModels) => { getObjFromNet(view3dFile, (objs, asyncModels) => {
this.setState({ this.setState({
...@@ -271,7 +257,7 @@ class ModuleEdit extends Component { ...@@ -271,7 +257,7 @@ class ModuleEdit extends Component {
getPointList = () => { getPointList = () => {
let { markers } = this.state let { markers } = this.state
getPointListAction().then(data => { getPointListAction().then(data => {
console.log(data); // console.log(data);
for (let i = 0; i < data.length;i++) for (let i = 0; i < data.length;i++)
markers[data[i].type].push(data[i]) markers[data[i].type].push(data[i])
this.setState({ this.setState({
...@@ -310,13 +296,14 @@ class ModuleEdit extends Component { ...@@ -310,13 +296,14 @@ class ModuleEdit extends Component {
afterRender = () => { afterRender = () => {
// this.infoHelper && this.infoHelper.update(); // this.infoHelper && this.infoHelper.update();
}; };
startDrow = (areaKey) => { startDrow = (areaItem) => {
// this.a3dRef.addPen(); // this.a3dRef.addPen();
this.addPen(areaKey) this.drowItem = areaItem;
this.addPen(areaItem.id)
} }
addPen(areaKey) { addPen(areaKey) {
let params = { "displayName": "进攻线路", "thumb": "/a3dres/images/pathline/line-attack.png", "descr": "", "objParam": null, "type": "pen" } let params = { "displayName": "进攻线路", "thumb": "/a3dres/images/pathline/line-attack.png", "descr": "", "objParam": null, "type": "pen" }
console.log(this.state.selectArea) // console.log(this.state.selectArea)
const penProps = { const penProps = {
key: this.genPenId(), key: this.genPenId(),
color: 0x00ff00, color: 0x00ff00,
...@@ -354,8 +341,8 @@ class ModuleEdit extends Component { ...@@ -354,8 +341,8 @@ class ModuleEdit extends Component {
}); });
me.a3dRef.changeDrawState(PEN_STATE.FINISHED); me.a3dRef.changeDrawState(PEN_STATE.FINISHED);
this.state.routePathData.push({ this.state.routePathData.push({
riskSourceId: this.state.selectArea, riskSourceId: this.drowItem.id,
position3d: JSON.stringify(penPoints) routePath: JSON.stringify(penPoints)
}) })
this.setState({ this.setState({
drawing: false, drawing: false,
...@@ -492,32 +479,50 @@ class ModuleEdit extends Component { ...@@ -492,32 +479,50 @@ class ModuleEdit extends Component {
}); });
} }
} }
selectItemChange = (areaKey) => { //选中区域变化
console.log(areaKey); selectItemChange = (selectArea) => {
this.state.selectArea = areaKey console.log(selectArea);
this.state.selectArea = selectArea
this.setState({ this.setState({
selectArea: areaKey selectArea: selectArea,
showRightPanel: true
})
}
//选中点变化
selectPointChange = (selectPoints) => {
this.setState({
selectPoints: selectPoints,
showRightPanel: true
}) })
} }
renderAreas = () => { getAreas = (treeData) => {
let { treeData } = this.state; // let { treeData } = this.state;
console.log(treeData) // console.log(treeData)
let areas = []; // let areas = [];
if (treeData.length>0) { if (treeData&&treeData.length>0) {
treeData.map((item) => { treeData.map((item) => {
if (item.isRegion && item.isBind) { if (item.isRegion && item.isBind) {
if (treeData.children&&treeData.children.length > 0) { if (item.children&&item.children.length > 0) {
areas.push(<PolygonRegion points={JSON.parse(item.position3d)} />) this.areas.push(<PolygonRegion points={JSON.parse(item.routePath)} />)
{this.renderAreas(item.children)} {this.getAreas(item.children)}
}
this.areas.push(<PolygonRegion points={JSON.parse(item.routePath)} />)
} else {
if (item.children&&item.children.length > 0) {
{this.getAreas(item.children)}
} }
areas.push(<PolygonRegion points={JSON.parse(item.position3d)} />)
} }
}); });
} }
return areas
} }
renderAreas = () => {
this.areas = [];
this.getAreas(this.state.treeData);
// console.log(this.areas)
return this.areas;
}
//保存区域绑定
saveAreaData = () => { saveAreaData = () => {
let { treeData, routePathData, pageType } = this.state; let { treeData, routePathData, pageType } = this.state;
let routePathParams = []; let routePathParams = [];
...@@ -534,6 +539,45 @@ class ModuleEdit extends Component { ...@@ -534,6 +539,45 @@ class ModuleEdit extends Component {
message.error('保存失败！'); message.error('保存失败！');
}); });
} }
//保存点绑定
savePointData = () => {
let { markers } = this.state;
let paramsArr = [];
for ( let key in markers ){
let item = markers[key];
for (let i = 0; i < item.length; i++) {
paramsArr.push({
pointId: item[i].id,
pointType: item[i].type,
position3d: `${item[i].position.x},${item[i].position.y},${item[i].position.z}`
})
}
}
savePointListAction(paramsArr).then(data => {
console.log(data);
})
}
// 删除点绑定
deletePointBind = () => {
let { selectPoints } = this.state;
if (selectPoints) {
let pointParams = [];
pointParams.push({
pointId: selectPoints.id,
pointType: selectPoints.type,
position3d: `${selectPoints.position.x},${selectPoints.position.y},${selectPoints.position.z}`
})
savePointListAction(pointParams).then(data => {
console.log(data);
})
}
}
/** /**
* 切换区域和点页面 * 切换区域和点页面
*/ */
...@@ -543,7 +587,8 @@ class ModuleEdit extends Component { ...@@ -543,7 +587,8 @@ class ModuleEdit extends Component {
getAreaTreeAction().then(data => { getAreaTreeAction().then(data => {
this.setState({ this.setState({
treeData:data || [], treeData:data || [],
pageType: 'region' pageType: 'region',
showRightPanel: false
}) })
}) })
} else { } else {
...@@ -552,7 +597,8 @@ class ModuleEdit extends Component { ...@@ -552,7 +597,8 @@ class ModuleEdit extends Component {
this.setState({ this.setState({
pointType: pointTypeArr[0].code||'', pointType: pointTypeArr[0].code||'',
treeData: data||[], treeData: data||[],
pageType: 'point' pageType: 'point',
showRightPanel: false
}) })
}) })
} }
...@@ -585,7 +631,9 @@ class ModuleEdit extends Component { ...@@ -585,7 +631,9 @@ class ModuleEdit extends Component {
// get point // get point
position = objs[0].point; position = objs[0].point;
} }
// [0,0,0]
// const isInside = me.polygonRegion.pointInPolygon(p)
console.log(this.polygonRegion)
console.log(objs) console.log(objs)
console.log(position) console.log(position)
console.log(position.x) console.log(position.x)
...@@ -595,13 +643,12 @@ class ModuleEdit extends Component { ...@@ -595,13 +643,12 @@ class ModuleEdit extends Component {
type: dragItem.type, type: dragItem.type,
position: position, position: position,
uid: uid, uid: uid,
id: uid, id: dragItem.id,
key: `${dragItem.type}-${uid}`, key: `${dragItem.type}-${dragItem.id}`,
title: dragItem.name, title: dragItem.name,
label: dragItem.name, label: dragItem.name,
level:'1', level:'1',
levelStr: 'level_2', levelStr: 'level_2',
treeNodeId: dragItem.id
} }
markers.riskSource.push(addPointParam) markers.riskSource.push(addPointParam)
...@@ -635,19 +682,10 @@ class ModuleEdit extends Component { ...@@ -635,19 +682,10 @@ class ModuleEdit extends Component {
} }
render() { render() {
const { const { fireEquipmentPosition, drawing, objs, markers, pageType, pointType, pointTypeArr, editFlag, showRightPanel, selectPoints, selectArea } = this.state;
fireEquipmentPosition,
drawing,
objs,
markers,
pageType,
pointType,
pointTypeArr,
editFlag
} = this.state;
console.log(this.state) console.log(this.state)
console.log(this.props) console.log(this.props)
const { dimension, hiddenScreenSaver } = this.props; const { dimension } = this.props;
const graphicProps = { const graphicProps = {
...dimension, ...dimension,
...desigerConf, ...desigerConf,
...@@ -708,18 +746,35 @@ class ModuleEdit extends Component { ...@@ -708,18 +746,35 @@ class ModuleEdit extends Component {
<div className="editButton" onClick={() => this.editButtonChange()}>编辑模式</div> <div className="editButton" onClick={() => this.editButtonChange()}>编辑模式</div>
{ editFlag && { editFlag &&
<div> <div>
{
pageType == 'region'?
<AreaLeftTree <AreaLeftTree
startDrow={this.startDrow} startDrow={this.startDrow}
treeData={this.state.treeData} treeData={this.state.treeData}
saveAreaData={this.saveAreaData} saveAreaData={this.saveAreaData}
selectItemChange={this.selectItemChange} selectItemChange={this.selectItemChange}
stopDrowing={this.stopDrowing} // stopDrowing={this.stopDrowing}
pageType={pageType} pageType={pageType}
// pointType={pointType} // pointType={pointType}
pointTypeArr={pointTypeArr} pointTypeArr={pointTypeArr}
pointTypeChange={this.pointTypeChange} pointTypeChange={this.pointTypeChange}
dragItemChange={this.dragItemChange} dragItemChange={this.dragItemChange}
/>:
<PointLeftTree
treeData={this.state.treeData}
savePointData={this.savePointData}
selectPointChange={this.selectPointChange}
// stopDrowing={this.stopDrowing}
pageType={pageType}
// pointType={pointType}
pointTypeArr={pointTypeArr}
pointTypeChange={this.pointTypeChange}
dragItemChange={this.dragItemChange}
deletePointBind={this.deletePointBind}
/> />
}
<div className='topBox'> <div className='topBox'>
<span className='editTitle'> <span className='editTitle'>
<span className='titleText'>编辑模式</span> <span className='titleText'>编辑模式</span>
...@@ -731,7 +786,12 @@ class ModuleEdit extends Component { ...@@ -731,7 +786,12 @@ class ModuleEdit extends Component {
<span className={`editPointBtn ${pageType == 'point'?'selected':'noSelect'}`} onClick={this.changeAreaPoint.bind(this,'point')}></span> <span className={`editPointBtn ${pageType == 'point'?'selected':'noSelect'}`} onClick={this.changeAreaPoint.bind(this,'point')}></span>
</div> </div>
<div className='rightBox'> <div className='rightBox'>
<RightEditPanel /> {
showRightPanel && pageType == 'region'? <RightEditRegionPanel detailData={selectArea} />:''
}
{
showRightPanel && pageType == 'point'? <RightEditPointPanel detailData={selectPoints} />:''
}
</div> </div>
</div> </div>
} }
......
src/view/3dview/moduleEditComponent/AreaLeftTree.js
View file @ ce38a085
...@@ -28,13 +28,12 @@ class AreaLeftTree extends Component { ...@@ -28,13 +28,12 @@ class AreaLeftTree extends Component {
} }
componentDidMount() { componentDidMount() {
// getAreaTreeAction().then(data => { let {treeData,pointTypeArr} = this.props;
// console.log(data); this.setState({
// this.setState({ treeData,
// treeData:data || [] pointTypeArr,
// }) pointType: pointTypeArr[0]?pointTypeArr[0].code:''
// this.props.getAreaData(data || []) })
// })
} }
componentWillUnmount() { componentWillUnmount() {
...@@ -50,11 +49,11 @@ class AreaLeftTree extends Component { ...@@ -50,11 +49,11 @@ class AreaLeftTree extends Component {
}) })
} }
onSelectChange = (value, item) =>{ // onSelectChange = (value, item) =>{
console.log(value, item); // console.log(value, item);
this.state.pointType = value; // this.state.pointType = value;
this.props.pointTypeChange(value); // this.props.pointTypeChange(value);
} // }
onSearchChange = (e, value) => { onSearchChange = (e, value) => {
console.log(e, value); console.log(e, value);
this.setState({ this.setState({
...@@ -71,35 +70,42 @@ class AreaLeftTree extends Component { ...@@ -71,35 +70,42 @@ class AreaLeftTree extends Component {
autoExpandParent: false autoExpandParent: false
}); });
} }
onCheck = (checkedKeys,e) => { // onCheck = (checkedKeys,e) => {
console.log('onCheck', checkedKeys); // console.log('onCheck', checkedKeys);
// console.log('onCheck', e); // // console.log('onCheck', e);
let currentKey = checkedKeys.checked[0]?checkedKeys.checked[checkedKeys.checked.length-1]:''; // let currentKey = checkedKeys.checked[0]?checkedKeys.checked[checkedKeys.checked.length-1]:'';
if (checkedKeys.checked.length<2) { // if (checkedKeys.checked.length<2) {
currentKey = checkedKeys.checked[0] // currentKey = checkedKeys.checked[0]
} else { // } else {
if (checkedKeys.checked[0] == this.state.checkedKeys[0]) { // if (checkedKeys.checked[0] == this.state.checkedKeys[0]) {
currentKey = checkedKeys.checked[1] // currentKey = checkedKeys.checked[1]
} else { // } else {
currentKey = checkedKeys.checked[0] // currentKey = checkedKeys.checked[0]
} // }
} // }
// checkedKeys[0] = checkedKeys[checkedKeys.length - 1] // // checkedKeys[0] = checkedKeys[checkedKeys.length - 1]
this.setState({ checkedKeys: currentKey?[currentKey]:[] }); // this.setState({ checkedKeys: currentKey?[currentKey]:[] });
this.props.selectItemChange(currentKey); // this.props.selectItemChange(currentKey);
if (currentKey) { // if (currentKey) {
this.props.startDrow(currentKey); // this.props.startDrow(currentKey);
}else { // }else {
this.props.stopDrowing() // this.props.stopDrowing()
} // }
} // }
// onTreeSelect = (selectedKeys, info) => { drowArea = (editItem) => {
// console.log('onSelect', info);
// this.setState({ selectedKeys });
// } }
onTreeSelect = (selectedKeys, info) => {
console.log('onSelect', info);
let selectItem = info.node.props.dataRef;
this.setState({ selectedKeys });
this.props.selectItemChange(selectItem);
}
// onClick={(e)=>{e.nativeEvent.stopImmediatePropagation();e.stopPropagation();console.log(123123);}}
renderTreeNodes = (data) => { renderTreeNodes = (data) => {
console.log(data); // console.log(data);
if (data.length>0) { if (data.length>0) {
return data.map((item) => { return data.map((item) => {
if (item.children) { if (item.children) {
...@@ -107,21 +113,34 @@ class AreaLeftTree extends Component { ...@@ -107,21 +113,34 @@ class AreaLeftTree extends Component {
<TreeNode <TreeNode
title={ title={
<div> <div>
{item.isRegion?<span>{item.name}</span>: {
<span <span >
draggable={true} {item.name}
onDragStart={() => { <span className='icon'>
this.props.dragItemChange(item) {
item.isBind?'':
<img
src='/src/assets/moduleEdit/editBtn.png'
onClick={(e) => {
e.nativeEvent.stopImmediatePropagation();
e.stopPropagation();
this.props.startDrow(item);
}} }}
>{item.name}</span>} />
}
{
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.routePath?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>
}
</div> </div>
} }
key={item.id} key={item.id}
dataRef={item} dataRef={item}
onDragStart={() => { >
console.log(11)
this.props.dragItemChange(item)
}}>
{this.renderTreeNodes(item.children)} {this.renderTreeNodes(item.children)}
</TreeNode> </TreeNode>
); );
...@@ -130,18 +149,33 @@ class AreaLeftTree extends Component { ...@@ -130,18 +149,33 @@ class AreaLeftTree extends Component {
key={item.id} key={item.id}
title={ title={
<div> <div>
{item.isRegion?<span>{item.name}</span>: {
<span <span >
draggable={true} {item.name}
onDragStart={() => { <span className='icon'>
this.props.dragItemChange(item) {
item.isBind?'':
<img
src='/src/assets/moduleEdit/editBtn.png'
onClick={(e) => {
e.nativeEvent.stopImmediatePropagation();
e.stopPropagation();
this.props.startDrow(item);
}} }}
>{item.name} />
</span>} }
{
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.routePath?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>
}
</div> </div>
} }
dataRef={item}
{...item} {...item}
onClick={() => {console.log('aaa')}}
/>; />;
}); });
} }
...@@ -149,10 +183,6 @@ class AreaLeftTree extends Component { ...@@ -149,10 +183,6 @@ class AreaLeftTree extends Component {
} }
render() { render() {
let { treeData, checkedKeys,pointTypeArr,pointType } = this.state; let { treeData, checkedKeys,pointTypeArr,pointType } = this.state;
let { pageType } = this.props; let { pageType } = this.props;
...@@ -160,28 +190,18 @@ class AreaLeftTree extends Component { ...@@ -160,28 +190,18 @@ class AreaLeftTree extends Component {
<div className="leftTree"> <div className="leftTree">
<div className='leftContainer'> <div className='leftContainer'>
<div className='topForm'> <div className='topForm'>
{
pageType=='region'?'':<Select onChange={this.onSelectChange} defaultValue={pointType} className='leftSelect'>
{
pointTypeArr.map(item => {
return (<Option value={item.code}>{item.name}</Option>)
})
}
</Select>
}
<Search className='leftSearch' icon="search" value={''} onChange={this.onSearchChange} onIconClick={this.onSearchChange} /> <Search className='leftSearch' icon="search" value={''} onChange={this.onSearchChange} onIconClick={this.onSearchChange} />
</div> </div>
<div className='treeBox'> <div className='treeBox'>
<Tree <Tree
checkable // checkable
checkStrictly // checkStrictly
selectable={false} selectable={true}
onExpand={this.onExpand} onExpand={this.onExpand}
expandedKeys={this.state.expandedKeys} expandedKeys={this.state.expandedKeys}
autoExpandParent={this.state.autoExpandParent} autoExpandParent={this.state.autoExpandParent}
onCheck={this.onCheck} // onCheck={this.onCheck}
checkedKeys={checkedKeys} // checkedKeys={checkedKeys}
onSelect={this.onTreeSelect} onSelect={this.onTreeSelect}
selectedKeys={this.state.selectedKeys} selectedKeys={this.state.selectedKeys}
blockNode blockNode
......
src/view/3dview/moduleEditComponent/PointLeftTree.js 0 → 100644
View file @ ce38a085
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Connect, Modal, Tree,Select,Search,Button } from 'amos-framework';
import * as endConf from 'amos-processor/lib/config/endconf';
import { getAreaTreeAction,saveAreaDataAction } from '../../../services/moduleEditServices'
const eventConnect = Connect.eventConnect;
const TreeNode = Tree.TreeNode;
const Option = Select.Option;
@eventConnect
class PointLeftTree extends Component {
constructor(props) {
super(props);
this.state = {
// showScreenSaver: false //是否打开屏保
expandedKeys: [],
autoExpandParent: true,
checkedKeys: [],
selectedKeys: [],
treeData:[],
pointTypeArr:[],
pointType:''
};
}
componentDidMount() {
let {treeData,pointTypeArr} = this.props;
this.setState({
treeData,
pointTypeArr,
pointType: pointTypeArr[0]?pointTypeArr[0].code:''
})
// console.log(this.props)
}
componentWillUnmount() {
}
componentWillReceiveProps(nextProps) {
console.log(nextProps)
let {treeData,pointTypeArr} = nextProps;
this.setState({
treeData,
pointTypeArr,
pointType: pointTypeArr[0]?pointTypeArr[0].code:''
})
}
onSelectChange = (value, item) =>{
console.log(value, item);
this.state.pointType = value;
this.props.pointTypeChange(value);
}
onSearchChange = (e, value) => {
console.log(e, value);
this.setState({
value
});
}
onExpand = (expandedKeys) => {
console.log('onExpand', arguments);
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
this.setState({
expandedKeys,
autoExpandParent: false
});
}
onCheck = (checkedKeys,e) => {
console.log('onCheck', checkedKeys,e);
this.setState({ checkedPointsKeys: checkedKeys });
this.props.selectPointChange(checkedKeys);
}
renderTreeNodes = (data) => {
// console.log(data);
if (data.length>0) {
return data.map((item) => {
if (item.children) {
return (
<TreeNode
title={
<div>
{item.isRegion?
<span>
{item.name}
<span className='icon'>
{
item.isRegion?item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>:
<span
draggable={true}
onDragStart={() => {
this.props.dragItemChange(item)
}}
>
{item.name}
<span className='icon'>
{
item.isRegion?item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>}
</div>
}
key={item.id}
dataRef={item}
onDragStart={() => {
console.log(11)
this.props.dragItemChange(item)
}}>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode
key={item.id}
title={
<div>
{item.isRegion?
<span>
{item.name}
<span className='icon'>
{
item.isRegion?item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>:
<span
draggable={true}
onDragStart={() => {
this.props.dragItemChange(item)
}}
>
{item.name}
<span className='icon'>
{
item.isRegion?item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/src/assets/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/src/assets/moduleEdit/noSaveTip.png' />:
<img src='/src/assets/moduleEdit/nobindTip.png' />
}
</span>
</span>}
</div>
}
dataRef={item}
{...item}
// onClick={() => {console.log('aaa')}}
/>;
});
}
}
onTreeSelect = (selectedKeys, info) => {
// e.nativeEvent.stopImmediatePropagation();
console.log('onSelect', info);
let selectItem = info.node.props.dataRef;
this.setState({ selectedKeys });
this.props.selectPointChange(selectItem)
}
render() {
let { treeData, checkedPointsKeys,pointTypeArr,pointType } = this.state;
let { pageType } = this.props;
console.log(treeData)
console.log(this.props)
return (
<div className="leftTree">
<div className='leftContainer'>
<div className='topForm'>
<Select onChange={this.onSelectChange} defaultValue={pointType} className='leftSelect'>
{
pointTypeArr.map(item => {
return (<Option value={item.code}>{item.name}</Option>)
})
}
</Select>
<Search className='leftSearch' icon="search" value={''} onChange={this.onSearchChange} onIconClick={this.onSearchChange} />
</div>
<div className='treeBox'>
<Tree
// checkable
// checkStrictly
selectable={true}
onExpand={this.onExpand}
expandedKeys={this.state.expandedKeys}
autoExpandParent={this.state.autoExpandParent}
// onCheck={this.onCheck}
// checkedKeys={checkedPointsKeys}
onSelect={this.onTreeSelect}
selectedKeys={this.state.selectedKeys}
blockNode
>
{this.renderTreeNodes(treeData)}
</Tree>
</div>
<div className='bottomBtns'>
<Button
className='sureBtn'
onClick={() => {
this.props.savePointData()
}} ></Button>
<Button
className='deleteBtn'
onClick={() => {
this.props.deletePointBind()
}} ></Button>
</div>
</div>
</div>
);
}
}
PointLeftTree.propTypes = {
subscribe: PropTypes.func,
trigger: PropTypes.func
};
export default PointLeftTree;
src/view/3dview/moduleEditComponent/RightEditPanel.js → src/view/3dview/moduleEditComponent/RightEditPointPanel.js
View file @ ce38a085
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Connect, Modal, Tree, Select, Search, Button, Input } from 'amos-framework'; import { Connect, Modal, Tree, Select, Search, Button, Input,InputNumber, Form, Radio } from 'amos-framework';
import * as endConf from 'amos-processor/lib/config/endconf'; import * as endConf from 'amos-processor/lib/config/endconf';
import { getAreaTreeAction,saveAreaDataAction } from './../../../services/moduleEditServices' import { getAreaTreeAction,saveAreaDataAction } from '../../../services/moduleEditServices'
const eventConnect = Connect.eventConnect; const eventConnect = Connect.eventConnect;
const TreeNode = Tree.TreeNode; const TreeNode = Tree.TreeNode;
const Option = Select.Option; const Option = Select.Option;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
@eventConnect @eventConnect
class RightEditPanel extends Component { class RightEditPointPanel extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
form: {
},
rules:{}
}; };
} }
...@@ -40,6 +45,25 @@ class RightEditPanel extends Component { ...@@ -40,6 +45,25 @@ class RightEditPanel extends Component {
// }) // })
} }
onChange = (key, e) => {
const value = e.target.value;
const newForm = Object.assign({}, this.state.form, { [key]: value });
this.setState({
form: newForm
});
}
onRadioChange = (value) => {
const newForm = Object.assign({}, this.state.form, { 'isIndoor': value });
this.setState({
form: newForm
});
}
onHobbyChange = (value, item) => {
const newForm = Object.assign({}, this.state.form, { 'level': value });
this.setState({
form: newForm
});
}
...@@ -47,13 +71,34 @@ class RightEditPanel extends Component { ...@@ -47,13 +71,34 @@ class RightEditPanel extends Component {
handleSubmit = (e) => {
// e.preventDefault();
this.form.validate((valid, dataValues, errors) => {
console.log('返回内容:', dataValues, valid, errors);
if (valid) {
// AmosAlert.success('结果', JSON.stringify(dataValues));
} else {
console.log('error submit!!');
return false;
}
});
}
render() { render() {
let { treeData, checkedKeys,pointTypeArr,pointType } = this.state; let { rules, form,pointTypeArr,pointType } = this.state;
let { pageType } = this.props; let { pageType } = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 28 },
sm: { span: 3 },
className: 'colspanlab'
}
}
return ( return (
<div className="rightEditPanel"> <div className="rightEditPanel">
<Form className="basic-demo" ref={component => this.form = component} model={form} rules={rules}>
<div className='rightContainer'> <div className='rightContainer'>
<div className='topForm'> <div className='topForm'>
<div className='rightTitle'> <div className='rightTitle'>
...@@ -61,53 +106,109 @@ class RightEditPanel extends Component { ...@@ -61,53 +106,109 @@ class RightEditPanel extends Component {
<span className='titleText'>风险点信息</span> <span className='titleText'>风险点信息</span>
</div> </div>
<div className='baseMsg'> <div className='baseMsg'>
<div className='baseTitle'> <div className='moduleTitle'>
<span className='titleIcon'></span> <span className='titleIcon'></span>
<span className='titleText'>基本信息</span> <span className='titleText'>基本信息</span>
</div> </div>
<div className='baseContent'> <div className='moduleContent'>
<div className='msgItem'> <div className='msgItem'>
<div className='itemLabel'>风险名称</div> <div className='itemLabel'>风险名称</div>
<FormItem field="name" >
<Input /> <Input />
</FormItem>
</div> </div>
<div className='msgItem'> <div className='msgItem'>
<div className='itemLabel'>参考编号</div> <div className='itemLabel'>参考编号</div>
<Input /> <FormItem field="code" >
<Input
onChange={(e) => this.onChange('name', e)}
/>
</FormItem>
</div> </div>
<div className='msgItem'> <div className='msgItem'>
<div className='itemLabel'>风险等级</div> <div className='itemLabel'>风险等级</div>
<Input /> <FormItem field="level" >
<Select value={form.level} onChange={this.onHobbyChange}>
<Option value="1">一级</Option>
<Option value="2">二级</Option>
<Option value="3">三级</Option>
<Option value="4">四级</Option>
<Option value="5">五级</Option>
</Select>
</FormItem>
</div> </div>
</div> </div>
</div> </div>
<div className='3dMsg'> <div className='3dMsg'>
<div className='baseTitle'> <div className='moduleTitle'>
<span className='titleIcon'></span> <span className='titleIcon'></span>
<span className='titleText'>三维信息</span> <span className='titleText'>三维信息</span>
</div> </div>
<div className='moduleContent'>
<div className='msgItem'>
<div className='itemLabel'>三维坐标</div>
<div className='position'>
<div className='positionItem'>
<FormItem label="X" field="positionX" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
<div className='positionItem'>
<FormItem label="Y" field="positionY" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
<div className='positionItem'>
<FormItem label="Z" field="positionZ" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
</div>
</div>
<div className='msgItem'>
<div className='itemLabel'>楼层位置</div>
<FormItem field="floorNum" >
<Input />
</FormItem>
</div>
<div className='msgItem'>
<div className='itemLabel'>是否位于室内</div>
<FormItem field="isIndoor" >
<RadioGroup defaultValue="prop2" onChange={value => {this.onRadioChange(value)}}>
<Radio value="prop1">是</Radio>
<Radio value="prop2">否</Radio>
</RadioGroup>
</FormItem>
</div>
</div>
</div> </div>
</div> </div>
<div className='bottomBtns'> <div className='bottomBtns'>
<Button <Button
className='sureBtn' className='sureBtn'
onClick={() => { onClick={() => {
// this.props.saveAreaData() this.handleSubmit()
}} ></Button> }} ></Button>
<Button <Button
className='deleteBtn' className='cancelBtn'
onClick={() => { onClick={() => {
// this.props.save() // this.props.save()
}} ></Button> }} ></Button>
</div> </div>
</div> </div>
</Form>
</div> </div>
); );
} }
} }
RightEditPanel.propTypes = { RightEditPointPanel.propTypes = {
subscribe: PropTypes.func, subscribe: PropTypes.func,
trigger: PropTypes.func trigger: PropTypes.func
}; };
export default RightEditPanel; export default RightEditPointPanel;
src/view/3dview/moduleEditComponent/RightEditRegionPanel.js 0 → 100644
View file @ ce38a085
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Connect, Modal, Tree, Select, Search, Button, Input,InputNumber, Form, Radio } from 'amos-framework';
import * as endConf from 'amos-processor/lib/config/endconf';
import { getAreaTreeAction,saveAreaDataAction } from '../../../services/moduleEditServices'
const eventConnect = Connect.eventConnect;
const TreeNode = Tree.TreeNode;
const Option = Select.Option;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
@eventConnect
class RightEditRegionPanel extends Component {
constructor(props) {
super(props);
this.state = {
form: {
},
rules:{}
};
}
componentDidMount() {
// getAreaTreeAction().then(data => {
// console.log(data);
// this.setState({
// treeData:data || []
// })
// this.props.getAreaData(data || [])
// })
}
componentWillUnmount() {
}
componentWillReceiveProps(nextProps) {
console.log(nextProps)
let {treeData,pointTypeArr} = nextProps;
// this.setState({
// })
}
onChange = (key, e) => {
const value = e.target.value;
const newForm = Object.assign({}, this.state.form, { [key]: value });
this.setState({
form: newForm
});
}
onRadioChange = (value) => {
const newForm = Object.assign({}, this.state.form, { 'isIndoor': value });
this.setState({
form: newForm
});
}
onHobbyChange = (value, item) => {
const newForm = Object.assign({}, this.state.form, { 'level': value });
this.setState({
form: newForm
});
}
handleSubmit = (e) => {
// e.preventDefault();
this.form.validate((valid, dataValues, errors) => {
console.log('返回内容:', dataValues, valid, errors);
if (valid) {
// AmosAlert.success('结果', JSON.stringify(dataValues));
} else {
console.log('error submit!!');
return false;
}
});
}
render() {
let { rules, form,pointTypeArr,pointType } = this.state;
let { pageType } = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 28 },
sm: { span: 3 },
className: 'colspanlab'
}
}
return (
<div className="rightEditPanel">
<Form className="basic-demo" ref={component => this.form = component} model={form} rules={rules}>
<div className='rightContainer'>
<div className='topForm'>
<div className='rightTitle'>
<span className='titleIcon'></span>
<span className='titleText'>风险区域信息</span>
</div>
<div className='baseMsg'>
<div className='moduleTitle'>
<span className='titleIcon'></span>
<span className='titleText'>基本信息</span>
</div>
<div className='moduleContent'>
<div className='msgItem'>
<div className='itemLabel'>风险名称</div>
<FormItem field="name" >
<Input />
</FormItem>
</div>
<div className='msgItem'>
<div className='itemLabel'>参考编号</div>
<FormItem field="code" >
<Input
onChange={(e) => this.onChange('name', e)}
/>
</FormItem>
</div>
<div className='msgItem'>
<div className='itemLabel'>风险等级</div>
<FormItem field="level" >
<Select value={form.level} onChange={this.onHobbyChange}>
<Option value="1">一级</Option>
<Option value="2">二级</Option>
<Option value="3">三级</Option>
<Option value="4">四级</Option>
<Option value="5">五级</Option>
</Select>
</FormItem>
</div>
</div>
</div>
<div className='3dMsg'>
<div className='moduleTitle'>
<span className='titleIcon'></span>
<span className='titleText'>三维信息</span>
</div>
<div className='moduleContent'>
<div className='msgItem'>
<div className='itemLabel'>三维坐标</div>
<div className='position'>
<div className='positionItem'>
<FormItem label="长" field="positionX" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
<div className='positionItem'>
<FormItem label="宽" field="positionY" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
<div className='positionItem'>
<FormItem label="高" field="positionZ" {...formItemLayout}>
<InputNumber />
</FormItem>
</div>
</div>
</div>
</div>
</div>
</div>
<div className='bottomBtns'>
<Button
className='sureBtn'
onClick={() => {
this.handleSubmit()
}} ></Button>
<Button
className='cancelBtn'
onClick={() => {
// this.props.save()
}} ></Button>
</div>
</div>
</Form>
</div>
);
}
}
RightEditRegionPanel.propTypes = {
subscribe: PropTypes.func,
trigger: PropTypes.func
};
export default RightEditRegionPanel;
src/view/3dview/moduleEditPoints/MarkerIcon.js
View file @ ce38a085
...@@ -179,8 +179,6 @@ class MarkerIcon extends Component { ...@@ -179,8 +179,6 @@ class MarkerIcon extends Component {
const showLabel = disableLabel(markerType); const showLabel = disableLabel(markerType);
let animDur = (twinkle ? 1 / frequency : 0) + 's'; let animDur = (twinkle ? 1 / frequency : 0) + 's';
console.log('-------------')
console.log(this.props)
if (showInfo) { if (showInfo) {
return ( return (
<div className={cls} style={style} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver}> <div className={cls} style={style} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment