Skip to content

A
amos-station-module-view
Commit b8510386 authored by baoshuang's avatar baoshuang
Browse files
Options

合并编辑模式代码

parent ac77a6d3
Hide whitespace changes
Inline Side-by-side
Showing with 1868 additions and 44 deletions
mods/components/3dviewConvertor/consts/urlConsts.js
View file @ b8510386
......@@ -133,4 +133,14 @@ export const FasSerUrl = {
importExcelFireEquipmentPointUrl: completePrefix(convertorURI, 'api/excel/import/fireEquipmentPoint'),
exportExcelFireEquipmentPointUrl: completePrefix(convertorURI, 'api/excel/export?exportType={exportType}&modelName={modelName}'),
pointModelistUrl: completePrefix(convertorURI, 'api/view3d/point/list?model={model}'),
};
\ No newline at end of file
};
export const ModuleEditUrl = {
getAreaTreeUrl:completePrefix(convertorURI, 'api/view3d/region/tree'),//
getPointTreeUrl:completePrefix(convertorURI, 'api/view3d/point/tree'),
saveAreaDataUrl:completePrefix(convertorURI, 'api/view3d/region/bind'),//
getPointTypeUrl:completePrefix(convertorURI, 'api/view3d/point/type'),
getPointListUrl:completePrefix(convertorURI, 'api/view3d/init3dViewNode'),//获取初始三维点 type=impEquipment&riskSourceId=1
savePointListUrl:completePrefix(convertorURI, 'api/view3d/point/bind'),//批量保存点绑定关系
}
\ No newline at end of file
mods/components/3dviewConvertor/services/moduleEditServices.js 0 → 100644
View file @ b8510386
import formatUrl from 'amos-processor/lib/utils/urlFormat';
import * as helper from 'base-r3d/lib/utils/helper';
// import { helper } from 'amos-3d/lib/threeTools';
import { ModuleEditUrl } from './../consts/urlConsts';
import { commonGet, commonPost, singleFetch } from './../utils/request';
export const downloadBasicScene = (modelURI) => {
if (!modelURI.endsWith('.json')){
modelURI += '/index.json';
}
return singleFetch(modelURI);
};
/**
* 通过 subjectId 获取场景配置信息
* @param {String} subjectId
*/
export const getDesignerParamAction = (subjectId) => {
// return singleFetch('/_mock/empty.json');
// return singleFetch('/_mock/plant.json');
// return commonGet('/_mock/plant.json');
// const url = formatUrl(GraphURL.getDesignUrl, { subjectId });
// return commonGet(url);
};
/**
* 保存设计视图
* @param {object} object
*/
export const saveDesignAction = object => {
// return commonPost(GraphURL.saveDesignUrl, object);
};
export const getAreaTreeAction = () => {
return commonGet(ModuleEditUrl.getAreaTreeUrl);
}
export const getPointTreeAction = (type) => {
return commonGet(`${ModuleEditUrl.getPointTreeUrl}/${type}`);
}
/**
* 保存区域
* @param {*} routePathParams
*/
export const saveAreaDataAction = (routePathParams) => {
return commonPost(ModuleEditUrl.saveAreaDataUrl, routePathParams);
}
export const getPointTypeAction = () => {
return commonGet(ModuleEditUrl.getPointTypeUrl);
}
/**
* 获取风险点
* @param {点类型} type
* @param {区域id} riskSourceId
*/
export const getPointListAction = (type,riskSourceId) => {
if (type) {
return commonGet(`${ModuleEditUrl.getPointListUrl}?type=${type}&riskSourceId=${riskSourceId}`);
} else {
return commonGet(`${ModuleEditUrl.getPointListUrl}`);
}
}
/**
* 保存风险点
* @param {*} bindParams
*/
export const savePointListAction = (bindParams) => {
return commonPost(ModuleEditUrl.savePointListUrl, bindParams);
}
\ No newline at end of file
mods/components/3dviewConvertor/styles/index.scss
View file @ b8510386
......@@ -11,6 +11,7 @@
@import './preControl.scss';
@import './planDetail.scss';
@import './actionbar.scss';
@import './moduleEdit.scss';
@import './../assets/bizFont/iconfont.css';
@import './../assets/amosFont/iconfont.css';
......@@ -35,7 +36,14 @@
}
}
#app>div{
height: 100%;
>div{
height: 100%;
}
}
.sys-view-3d {
height: 100%;
.three-renderer {
.three-container {
position: absolute;
......@@ -124,3 +132,5 @@
border-image-slice: 50 50 50 50;
border-image-repeat: stretch;
}
mods/components/3dviewConvertor/styles/moduleEdit.scss 0 → 100644
View file @ b8510386
.ModuleEditPage {
position: relative;
height: 100%;
.topBox {
position: absolute;
top: 34px;
left: 40%;
span {
display: inline-block;
}
.editTitle {
width:257px;
height:55px;
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/title.png') no-repeat 100% 100%;
// opacity:0.4;
font-size: 24px;
text-align: center;
color: #fff;
vertical-align: top;
.titleText {
width: 100%;
height: 100%;
line-height: 55px;
// border-bottom:2px transparent solid;
// border-image:linear-gradient(90deg,rgba(50,217,239,0) 2%,rgba(50,217,239,0.49) 29%,rgba(50,217,239,0.73) 73%,rgba(50,217,239,0) 100%);
}
}
.quipBtn {
width: 169px;
height: 44px;
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/quip.png') no-repeat 100% 100%;
margin-top: 10px;
margin-left: 70px;
}
}
.bottomBox {
position: absolute;
bottom: 34px;
left: 40%;
span {
display: inline-block;
width: 177px;
height: 42px;
line-height: 42px;
background: rgba(46,217,239,0.2);
// border: 2px solid #2ED9EF;
margin: 0 10px;
text-align: center;
font-size: 16px;
// color: #2ED9EF;
cursor: pointer;
}
.editAreaBtn {
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/areaBtn.png') no-repeat 100% 100%;
}
.editPointBtn {
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/pointBtn.png') no-repeat 100% 100%;
}
.editAreaBtn.selected {
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/areaBtn_select.png') no-repeat 100% 100%;
}
.editPointBtn.selected {
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/poingBtn_select.png') no-repeat 100% 100%;
}
}
// 左侧树
.leftTree {
position: absolute;
top: 0;
left: 32px;
width: 264px;
height: 100%;
padding: 32px 0;
user-select: none;
.leftContainer {
width: 100%;
height: 100%;
background-color: rgba(10, 53, 62, 0.68);
border: 1px solid rgba(46, 217, 239, 0.59);
padding: 12px;
}
.topForm {
.leftSelect {
height: 39px;
width: 100%;
margin-bottom: 10px;
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/selectBox.png') no-repeat 100% 100%;
border: none;
line-height: 31px;
padding: 5px;
color: #F0DF2D;
}
.leftSearch {
height: 33px;
line-height: 33px;
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/searchBg.png') no-repeat 100% 100%;
input {
background-color: transparent;
box-shadow: none;
padding-left: 15px;
color: #fff;
}
.amosicon-search {
color: #2ED9EF;
}
}
}
.treeBox {
height: calc(100% - 132px);
overflow-y: auto;
.amos-tree {
color: rgba(15, 235, 255, 1);
.amos-tree-node-content-wrapper {
color: #fff;
font-size: 15px;
}
}
.icon {
margin-left: 5px;
vertical-align: middle;
img {
vertical-align: initial;
margin-left: 10px;
}
}
}
.bottomBtns {
padding-top: 15px;
text-align: center;
.sureBtn {
width: 100px;
height: 33px;
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/sureBtn.png') no-repeat 100% 100%;
border: none;
}
.deleteBtn {
width: 100px;
height: 33px;
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/deleteBtn.png') no-repeat 100% 100%;
border: none;
}
}
}
// 右侧面板
.rightEditPanel {
position: absolute;
top: 0;
right: 32px;
width: 264px;
height: 100%;
padding: 32px 0;
.rightContainer {
width: 100%;
height: 100%;
background-color: rgba(10, 53, 62, 0.68);
border: 1px solid rgba(46, 217, 239, 0.59);
padding: 12px;
color: #fff;
.amos-form-item-label {
color: #fff;
}
.topForm {
height: calc(100% - 48px);
.amos-input {
width: 100%;
}
.amos-select {
width: 100%;
}
}
}
.bottomBtns {
padding-top: 15px;
text-align: center;
.sureBtn {
width: 100px;
height: 33px;
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/sureBtn.png') no-repeat 100% 100%;
border: none;
}
.deleteBtn {
width: 100px;
height: 33px;
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/deleteBtn.png') no-repeat 100% 100%;
border: none;
}
.cancelBtn {
width: 100px;
height: 33px;
background: url('/mods/components/3dviewConvertor/assets/convertor/moduleEdit/cancelBtn.png') no-repeat 100% 100%;
border: none;
}
}
}
.editButton {
position: absolute;
bottom: 100px;
left: 50%;
}
}
\ No newline at end of file
mods/components/3dviewConvertor/utils/request.js
View file @ b8510386
......@@ -12,15 +12,15 @@ const defaultPageable = {
size: 10
};
// const defaultHeaders = {
// appKey: 'CONVERTER_STATION',
// product: 'CONVERTER_STATION_WEB',
// channelType: '3dpage'
// };
const defaultHeaders = {
// appKey: 'CONVERTER_STATION',
// product: 'CONVERTER_STATION_WEB',
channelType: '3dpage'
};
const compleHeaders = () => {
return {
// ...defaultHeaders,
...defaultHeaders,
// token: getToken(),
'X-Access-Token': getToken()
};
......
mods/components/3dviewConvertor/view/ConvertorView3DRoot.js
View file @ b8510386
......@@ -99,7 +99,7 @@ class ConvertorView3DRoot extends Basic {
const wsURL = completeToken(SysWsURL.convertorView3dws);
return (
<div>
<PanoramicLeft />
{/* <PanoramicLeft /> */}
<div className="sys-view-3d">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
......@@ -107,7 +107,7 @@ class ConvertorView3DRoot extends Basic {
{this.getScreenSaver()}
</div>
<PanoramicRight />
{/* <PanoramicRight /> */}
</div>
);
}
......
mods/components/3dviewConvertor/view/View3D.js
View file @ b8510386
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { utils } from 'amos-tool';
import { Connect as UIConnect, Modal } from 'amos-framework';
import { utils,UUID } from 'amos-tool';
import { Connect as UIConnect, Modal,message } from 'amos-framework';
import { FatLine } from 'amos-3d/lib/advanced';
import A3DDesigner, { Connect, FireObject } from 'amos-3d/lib/designer';
import A3DDesigner, { Connect, FireObject,PolygonRegion } from 'amos-3d/lib/designer';
import WorkerObjContent from 'amos-3d/lib/worker/WorkerObjContent';
import { transitionHelper } from 'amos-3d/lib/helpers';
import * as endConf from 'amos-processor/lib/config/endconf';
......@@ -32,6 +32,11 @@ import {
flickerTroubleMarkers
} from './ruleActionView';
import { lineData } from './datas';
import { getAreaTreeAction, getPointTypeAction, getPointTreeAction, getPointListAction,saveAreaDataAction,savePointListAction } from './../services/moduleEditServices';
import AreaLeftTree from './moduleEditComponent/AreaLeftTree';
import PointLeftTree from './moduleEditComponent/PointLeftTree';
import RightEditPointPanel from './moduleEditComponent/RightEditPointPanel';
import RightEditRegionPanel from './moduleEditComponent/RightEditRegionPanel';
const AmosConfig = endConf.AmosConfig;
const view3dFile = AmosConfig.sysConf.convertor.view3dFile;
......@@ -91,7 +96,20 @@ class View3D extends Component {
},
markerType: null,
planStarted: false,
alarmStarted: false
alarmStarted: false,
//编辑模式
drawing: false,//画线状态
selectArea: "",//选中区域
selectPoints:"",//选中点
treeData: [],//左树
pointTypeArr:[],
routePathData:[], //区域线位置
pageType: 'region', //编辑类型
pointType: '', //筛选框点类型
editFlag: false,//编辑模式
showRightPanel: false, //是否显示右侧详情
simpleTipVisible: false, //简单提示
dragItem: '' //拖动的节点
};
getObjFromNet(view3dFile, (objs, asyncModels) => {
......@@ -102,6 +120,20 @@ class View3D extends Component {
});
this.lensLevel = LENS_LEVEL.ROOT;
// this.markerList = {};
this.drowItem = '';
this.areas = [];
this.areaStyles = {
normal:{
regionColor: '#02B00F', // 区域颜色
lineColor: '#00FF70', // 边框颜色
regionOpacity: 0.3
},
noDrop:{
regionColor: '#969696', // 区域颜色
lineColor: '#878787', // 边框颜色
regionOpacity: 0.4
}
}
}
componentDidMount() {
......@@ -111,6 +143,30 @@ class View3D extends Component {
this._bindPubSubEvents();
this._bindRulesPubSubEvents();
}
genPenId = () => {
return UUID.timeUUID('pen');
};
onMouseDown = event => {
if (!this.a3dRef){
return;
}
this.handlePenDown(event);
this.handleAnimatePathDown(event);
};
onMouseMove = event => {
if (!this.a3dRef){
return;
}
this.handlePenMove(event);
this.handleAnimatePathMove(event);
};
onKeyDownForPen = event => {
const keyCode = event.keyCode;
this.processPen(keyCode);
}
planStart = data => {
this.setState(
......@@ -394,11 +450,14 @@ class View3D extends Component {
});
};
onGraphCreated = ({ cameraFactory, sceneFactory, outlineFactory, r3d }) => {
onGraphCreated = ({ cameraFactory, sceneFactory, outlineFactory, r3d, stagePilot }) => {
this.cameraFactory = cameraFactory;
this.sceneFactory = sceneFactory;
this.outlineFactory = outlineFactory;
this.r3d = r3d;
this.polygonRegion = {};
this.stagePilot = stagePilot;
this.positionCtl = stagePilot.positionCtl;
// 重新设置 outline 风格
this.outlineFactory.outlineConfig = {
......@@ -476,6 +535,487 @@ class View3D extends Component {
}
}
};
getPointList = () => {
let { markers } = this.state
getPointListAction().then(data => {
// console.log(data);
for (let i = 0; i < data.length;i++)
markers[data[i].type].push(data[i])
this.setState({
markers
})
})
}
startDrow = (areaItem) => {
// this.a3dRef.addPen();
this.drowItem = areaItem;
this.addPen(areaItem.id)
}
addPen(areaKey) {
let params = { "displayName": "进攻线路", "thumb": "/a3dres/images/pathline/line-attack.png", "descr": "", "objParam": null, "type": "pen" }
// console.log(this.state.selectArea)
const penProps = {
key: this.genPenId(),
color: 0x00ff00,
areaKey: areaKey,
...params
};
this.a3dRef.newPen(penProps);
this.hasCreatePen = true;
}
/** 画笔 down 事件响应 */
handlePenDown = (event) => {
if (!this.isCanBeDraw()){
return;
}
const me = this;
// 鼠标左键(右键)，添加一个点
if (event.button === 0 || event.button === 2) {
me.a3dRef.stopPenDrag(event.clientX, event.clientY, me.penTargets, true);
// 鼠标右键 绘制完毕，需要同步处理 reference 数据
if (event.button === 2){
// 保存 reference 数据
const pen = me.a3dRef.currentPen;
let penPoints = pen.getFmtPoints();
if (pen._drawing){
PubSub.publish(EVENTS_CONSTS.SKETCH_REFERENCE_CHANGE, {
type: 'routePath',
key: pen._uuidKey,
eid: pen.userData.eid,
value: {
...pen.userParams,
points: pen.getFmtPoints()
},
position: pen.position
});
me.a3dRef.changeDrawState(PEN_STATE.FINISHED);
this.state.routePathData.push({
riskSourceId: this.drowItem.id,
routePath: JSON.stringify({
routePath:penPoints,
regionHeigth:1
}),
})
this.setState({
drawing: false,
routePathData: this.state.routePathData
});
}
}
}
// 鼠标中键，清除当前绘制路线
else if (event.button === 1) {
me.a3dRef.changeDrawState(PEN_STATE.CLEARED);
// 结束绘制
this.setState({
drawing: false
});
}
}
stopDrowing = () => {
if (!this.isCanBeDraw()){
return;
}
const me = this;
me.a3dRef.changeDrawState(PEN_STATE.CLEARED);
// 结束绘制
this.setState({
drawing: false
});
}
/** 画笔 move 事件响应 */
handlePenMove = (event) => {
const me = this;
if (!me.isCanBeDraw()){
return;
}
me.a3dRef.startPenDrag(event.clientX, event.clientY, me.penTargets, true);
}
processPen = (code) => {
const me = this;
if (!me.a3dRef || !me.isCanBeDraw()){
return;
}
switch (code) {
case KeyCode.ESC: // 清除画笔
me.a3dRef.changeDrawState(PEN_STATE.CLEARED);
me.setState({
drawing: false
});
break;
case KeyCode.P: // 启动路线编辑 pen （当前画笔）
me.setState({
drawing: true
}, () => {
me.a3dRef.changeDrawState(PEN_STATE.START);
});
break;
case KeyCode.N: // 创建新画笔
this.addPen();
break;
case KeyCode.M: // 绘制路线动起来
me.a3dRef.changeDrawState(PEN_STATE.RUNNING);
break;
default:
break;
}
}
/**
* 当 pen 的 points 改变时的回调，仅处理拖拽 dot 时更改的路线
* @param {Object} pen
*/
handlePenPointsChange = (pen) => {
// 处理动画配置中，改变路径
// this.handleAnimatePathChange(pen);
}
/**
* @param {Object} penEditorInstance
* @param {Object} penEditorInstance.editorsObject
* @param {Object} penEditorInstance.editorCache
* @param {Function} penEditorInstance.addEditor
* @param {Function} penEditorInstance.delEditor
*/
handlePenEditorCreated = (penEditorInstance) => {
this.penEditorInstance = penEditorInstance;
}
isCanBeDraw = () => {
// return this.hasCreatePen && this.props.mouseMode === MOUSE_MODE.pen;
return this.hasCreatePen;
}
/** 处理动画编辑中的画笔 move 事件响应 */
handleAnimatePathMove = (event) => {
if (!this.isCanBeDraw() && !this.enableDrawPath){
return;
}
this.a3dRef.startPenDrag(event.clientX, event.clientY, this.penTargets, true);
}
/** 处理动画编辑中的画笔 down 事件 */
handleAnimatePathDown = (event) => {
if (!this.isCanBeDraw() && !this.enableDrawPath){
return;
}
// 左键添加点， 右键结束绘制，右键所在点不包含在 path 中
if (event.button === 0 || event.button === 2){
this.a3dRef.stopPenDrag(event.clientX, event.clientY, this.penTargets, true);
// 鼠标右键 绘制完毕，需要同步处理 reference 数据
if (event.button === 2) {
const pen = this.a3dRef.currentPen;
if (pen._drawing){
this.a3dRef.changeDrawState(PEN_STATE.FINISHED);
this.setState({
drawing: false
});
// 触发保存动画终点坐标
PubSub.publish(EVENTS_CONSTS.DRAW_PATHPOINTS_SAVE, {
pathKey: pen._uuidKey,
points: pen.getFmtPoints()
});
console.log(pen);
console.log(pen.getFmtPoints())
this.enableDrawPath = false;
}
}
}
// 鼠标中键，清除当前绘制路线
else if (event.button === 1) {
this.a3dRef.changeDrawState(PEN_STATE.CLEARED);
// 结束绘制
this.setState({
drawing: false
});
}
}
//选中区域变化
selectItemChange = (selectArea) => {
console.log(selectArea);
this.state.selectArea = selectArea
this.setState({
selectArea: selectArea,
showRightPanel: true
})
}
//选中点变化
selectPointChange = (selectPoints) => {
this.setState({
selectPoints: selectPoints,
showRightPanel: true
})
}
getAreas = (treeData) => {
let { dragItem } = this.state;
// console.log(treeData)
// let areas = [];
if (treeData&&treeData.length>0) {
treeData.map((item) => {
if (item.isRegion && item.isBind) {
if (item.children&&item.children.length > 0) {
if (dragItem) {
if ( dragItem.parentId && dragItem.parentId == item.id) {
this.areas.push(<PolygonRegion {...this.areaStyles.normal} points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}}/>)
} else {
this.areas.push(<PolygonRegion {...this.areaStyles.noDrop} points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}} />)
}
{this.getAreas(item.children)}
} else {
this.areas.push(<PolygonRegion {...this.areaStyles.normal} points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}} />)
{this.getAreas(item.children)}
}
}else {
if (dragItem) {
if ( dragItem&&dragItem.parentId && dragItem.parentId == item.id) {
this.areas.push(<PolygonRegion {...this.areaStyles.normal} points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}}/>)
} else {
this.areas.push(<PolygonRegion {...this.areaStyles.noDrop} points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}} />)
}
} else {
this.areas.push(<PolygonRegion {...this.areaStyles.normal} points={item.routePath?JSON.parse(item.routePath).routePath:''} onCreated={(e) => {this.onRegionCreated(e,item)}}/>)
}
}
} else {
if (item.children&&item.children.length > 0) {
{this.getAreas(item.children)}
}
}
});
}
}
renderAreas = () => {
this.areas = [];
this.getAreas(this.state.treeData);
console.log(this.areas)
return this.areas;
}
onRegionCreated = (polygonRegion,item) => {
console.log(polygonRegion)
// console.log(polygonRegion.pointInPolygon)
this.polygonRegion[item.id] = polygonRegion;
console.log(this.polygonRegion)
}
//保存区域绑定
saveAreaData = () => {
let { treeData, routePathData, pageType } = this.state;
let routePathParams = [];
console.log(routePathData)
saveAreaDataAction(routePathData).then(d => {
message.success('保存成功！');
getAreaTreeAction().then(data => {
console.log(data);
this.setState({
treeData:data || []
})
});
}, eer => {
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);
})
}
}
//删除区域
deleteAreaBind = () => {
let { selectArea,routePathData } = this.state;
if (selectArea) {
let areaParams = [];
areaParams.push({
riskSourceId: selectArea.id,
routePath: ''
})
saveAreaDataAction(areaParams).then(d => {
message.success('删除成功！');
getAreaTreeAction().then(data => {
console.log(data);
this.setState({
treeData:data || []
})
});
}, eer => {
message.error('删除失败！');
});
}
}
/**
* 切换区域和点页面
*/
changeAreaPoint = (type) => {
let { pointTypeArr } = this.state;
if (type == 'region') {
getAreaTreeAction().then(data => {
this.setState({
treeData:data || [],
pageType: 'region',
showRightPanel: false
})
})
} else {
getPointTreeAction(pointTypeArr[0].code||'').then(data => {
console.log(data);
this.setState({
pointType: pointTypeArr[0].code||'',
treeData: data||[],
pageType: 'point',
showRightPanel: false
})
})
}
}
pointTypeChange = (pointType) => {
this.state.pointType = pointType;
getPointTreeAction(pointType).then(data => {
console.log(data);
this.setState({
pointType: pointType,
treeData: data||[]
})
})
}
dragItemChange = (dragItem) => {
this.state.dragItem = dragItem;
let { treeData } = this.state;
if (dragItem.isRegion) {
//是区域
} else {
if(dragItem.isBind) {
//已绑定
} else {
let hasRegion = false;
}
}
this.setState({
dragItem
})
}
drop = (event) => {
event.preventDefault();
let { dragItem,markers }=this.state;
console.log(dragItem)
if(dragItem) {
if (dragItem.isBind) {
this.tipMsg = '只能放置未绑定的标记点'
this.setState({
simpleTipVisible: true
})
return false;
}
}
const objs = this.a3dRef.pickerCoordinate(event.clientX, event.clientY, null, true);
let position;
if (objs.length > 0){
// get point
position = objs[0].point;
}
// [0,0,0]
const isInside = this.polygonRegion[dragItem.parentId].pointInPolygon([position.x,position.y,position.z])
// console.log(this.polygonRegion)
// console.log(position)
console.log(isInside)
if (dragItem) {
if (isInside == false) {
this.tipMsg = '只能放置在当前区域'
this.setState({
simpleTipVisible: true
})
return false;
}
let uid = UUID.uuidFast()
let addPointParam = {
type: dragItem.type,
position: position,
uid: uid,
id: dragItem.id,
key: `${dragItem.type}-${dragItem.id}`,
title: dragItem.name,
label: dragItem.name,
level:'1',
levelStr: 'level_2',
}
markers.riskSource.push(addPointParam)
console.log(markers)
this.setState({
markers
})
}
}
editButtonClick = () => {
let { editFlag } = this.state;
editFlag = !editFlag;
this.setState({ editFlag })
if(editFlag == true) {
getAreaTreeAction().then(data => {
console.log(data);
this.setState({
treeData:data || []
})
})
getPointTypeAction().then(data => {
console.log(data);
this.setState({
pointTypeArr: data||[],
pointType:data[0]?data[0].code:''
})
})
this.getPointList();
}
}
simpleTipOk = () => {
this.setState({
simpleTipVisible: false
})
}
changeMarkerType = (item, isCancel) => {
const { markers, totalDelta } = this.state;
......@@ -649,7 +1189,7 @@ class View3D extends Component {
if(actionType === "impEquipment"){
this.asyncLoadImpEquipment(actionType);
}else if(actionType === "editMode"){
this.editButtonClick()
}
}
......@@ -690,6 +1230,7 @@ class View3D extends Component {
planStarted,
alarmStarted,
fireEquipmentPosition,
drawing, pageType, pointType, pointTypeArr, editFlag, showRightPanel, selectPoints, selectArea
} = this.state;
const { dimension, hiddenScreenSaver } = this.props;
const graphicProps = {
......@@ -705,6 +1246,15 @@ class View3D extends Component {
onAllDone: this.onAllDone,
onComplete: this.onComplete
};
const penProps = {
// 启动 UV 滚动动画
scrollUV: true,
onCreated: this.handlePenEditorCreated,
onPointsChange: this.handlePenPointsChange
};
const positionCtlProps = {
prevProcessTarget: this.prevProcessTarget
}
let firePosition = null;
if (fireEquipmentPosition && fireEquipmentPosition.length > 0) {
......@@ -718,35 +1268,112 @@ class View3D extends Component {
}
return (
<A3DDesigner
{...graphicProps}
enableModelParser
disabledEdit
defaultLoading={false}
ref={node => (this.a3dRef = node)}
baseObjs={objs}
maskContent={
<MaskContent
planStarted={planStarted}
alarmStarted={alarmStarted}
onItemClick={this.changeMarkerType}
layerConfig={layerConfig}
showExplain={showExplain}
onExplainClose={this.handleExplainClose}
hiddenScreenSaver={hiddenScreenSaver}
alarmStart={this.alarmStart}
planStart={this.planStart}
planQuit={this.planQuit}
onActionItemClick={this.onActionItemClick}
/>
<div className='ModuleEditPage'>
<div
className='designerBox'
onDragOver={(e) => {e.preventDefault();}}
onDrop={(e)=>this.drop(e)}
>
<A3DDesigner
{...graphicProps}
enableModelParser
disabledEdit
defaultLoading={false}
ref={node => (this.a3dRef = node)}
baseObjs={objs}
maskContent={
<MaskContent
planStarted={planStarted}
alarmStarted={alarmStarted}
onItemClick={this.changeMarkerType}
layerConfig={layerConfig}
showExplain={showExplain}
onExplainClose={this.handleExplainClose}
hiddenScreenSaver={hiddenScreenSaver}
alarmStart={this.alarmStart}
planStart={this.planStart}
planQuit={this.planQuit}
onActionItemClick={this.onActionItemClick}
/>
}
modelContentProps={modelContentProps}
drawing={drawing}
enablePen
nativeProps={this.nativeProps}
penProps={penProps}
enablePositionCtl
positionCtlProps={positionCtlProps}
>
{startAsyncLoad && <WorkerObjContent objs={asyncModels} onWorkerMessage={this.onWorkerLoading} enableLoading afterInit={this.onAfterWorkerInit} />}
<PointsPool markers={markers} updateMarker={this.updateMarker} planStarted={alarmStarted} stagePilot={this.stagePilot} />
{fireTruckRoute && <FatLine {...lineData.fatLineConf} linePath={JSON.parse(fireTruckRoute)} visible={showFireTruckRoute} />}
<FlameFire position={firePosition} width={10} height={20} depth={8} sliceSpacing={1} visible={planStarted} />
{this.renderAreas()}
</A3DDesigner>
</div>
{/* <div className="editButton" onClick={() => this.editButtonChange()}>编辑模式</div> */}
{ editFlag &&
<div>
{
pageType == 'region'?
<AreaLeftTree
startDrow={this.startDrow}
treeData={this.state.treeData}
saveAreaData={this.saveAreaData}
selectItemChange={this.selectItemChange}
// stopDrowing={this.stopDrowing}
pageType={pageType}
// pointType={pointType}
pointTypeArr={pointTypeArr}
pointTypeChange={this.pointTypeChange}
dragItemChange={this.dragItemChange}
deleteAreaBind={this.deleteAreaBind}
/>:
<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'>
<span className='editTitle'>
<span className='titleText'>编辑模式</span>
</span>
<span className='quipBtn'></span>
</div>
<div className='bottomBox'>
<span className={`editAreaBtn ${pageType == 'region'?'selected':'noSelect'}`} onClick={this.changeAreaPoint.bind(this,'region')}></span>
<span className={`editPointBtn ${pageType == 'point'?'selected':'noSelect'}`} onClick={this.changeAreaPoint.bind(this,'point')}></span>
</div>
<div className='rightBox'>
{
showRightPanel && pageType == 'region'? <RightEditRegionPanel detailData={selectArea} />:''
}
{
showRightPanel && pageType == 'point'? <RightEditPointPanel detailData={selectPoints} />:''
}
</div>
</div>
}
modelContentProps={modelContentProps}
>
{startAsyncLoad && <WorkerObjContent objs={asyncModels} onWorkerMessage={this.onWorkerLoading} enableLoading afterInit={this.onAfterWorkerInit} />}
<PointsPool markers={markers} updateMarker={this.updateMarker} planStarted={alarmStarted} />
{fireTruckRoute && <FatLine {...lineData.fatLineConf} linePath={JSON.parse(fireTruckRoute)} visible={showFireTruckRoute} />}
<FlameFire position={firePosition} width={10} height={20} depth={8} sliceSpacing={1} visible={planStarted} />
</A3DDesigner>
<Modal
className='moduleEditMadel simpleTip'
header="基本模态框"
visible={this.state.simpleTipVisible}
noDefaultHeader
// onCancel={this.simpleTipCancel}
onOk = {this.simpleTipOk}
content={<div>{this.tipMsg}</div>}
/>
</div>
);
}
}
......
mods/components/3dviewConvertor/view/moduleEditComponent/AreaLeftTree.js 0 → 100644
View file @ b8510386
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 AreaLeftTree 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:''
})
}
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);
// // console.log('onCheck', e);
// let currentKey = checkedKeys.checked[0]?checkedKeys.checked[checkedKeys.checked.length-1]:'';
// if (checkedKeys.checked.length<2) {
// currentKey = checkedKeys.checked[0]
// } else {
// if (checkedKeys.checked[0] == this.state.checkedKeys[0]) {
// currentKey = checkedKeys.checked[1]
// } else {
// currentKey = checkedKeys.checked[0]
// }
// }
// // checkedKeys[0] = checkedKeys[checkedKeys.length - 1]
// this.setState({ checkedKeys: currentKey?[currentKey]:[] });
// this.props.selectItemChange(currentKey);
// if (currentKey) {
// this.props.startDrow(currentKey);
// }else {
// this.props.stopDrowing()
// }
// }
drowArea = (editItem) => {
}
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) => {
// console.log(data);
if (data.length>0) {
return data.map((item) => {
if (item.children) {
return (
<TreeNode
title={
<div>
{
<span >
{item.name}
<span className='icon'>
{
item.isBind?'':
<img
src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/editBtn.png'
onClick={(e) => {
e.nativeEvent.stopImmediatePropagation();
e.stopPropagation();
this.props.startDrow(item);
}}
/>
}
{
item.isBind?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' />:
item.routePath?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/noSaveTip.png' />:
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' />
}
</span>
</span>
}
</div>
}
key={item.id}
dataRef={item}
>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode
key={item.id}
title={
<div>
{
<span >
{item.name}
<span className='icon'>
{
item.isBind?'':
<img
src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/editBtn.png'
onClick={(e) => {
e.nativeEvent.stopImmediatePropagation();
e.stopPropagation();
this.props.startDrow(item);
}}
/>
}
{
item.isBind?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' />:
item.routePath?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/noSaveTip.png' />:
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' />
}
</span>
</span>
}
</div>
}
dataRef={item}
{...item}
/>;
});
}
}
render() {
let { treeData, checkedKeys,pointTypeArr,pointType } = this.state;
let { pageType } = this.props;
return (
<div className="leftTree">
<div className='leftContainer'>
<div className='topForm'>
<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={checkedKeys}
onSelect={this.onTreeSelect}
selectedKeys={this.state.selectedKeys}
blockNode
>
{this.renderTreeNodes(treeData)}
</Tree>
</div>
<div className='bottomBtns'>
<Button
className='sureBtn'
onClick={() => {
this.props.saveAreaData()
}} ></Button>
<Button
className='deleteBtn'
onClick={() => {
this.props.deleteAreaBind()
}} ></Button>
</div>
</div>
</div>
);
}
}
AreaLeftTree.propTypes = {
subscribe: PropTypes.func,
trigger: PropTypes.func
};
export default AreaLeftTree;
mods/components/3dviewConvertor/view/moduleEditComponent/PointLeftTree.js 0 → 100644
View file @ b8510386
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='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' />:
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/noSaveTip.png' />:
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' />
}
</span>
</span>:
<span
draggable={true}
onDragStart={() => {
this.props.dragItemChange(item)
}}
>
{item.name}
<span className='icon'>
{
item.isRegion?item.isBind?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' />:
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/noSaveTip.png' />:
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' />
}
</span>
</span>}
</div>
}
key={item.id}
dataRef={item}
onDragStart={() => {
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='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' />:
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/noSaveTip.png' />:
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' />
}
</span>
</span>:
<span
draggable={true}
onDragStart={() => {
this.props.dragItemChange(item)
}}
>
{item.name}
<span className='icon'>
{
item.isRegion?item.isBind?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' />:
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' />:
item.isBind?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' />:
item.position3d?<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/noSaveTip.png' />:
<img src='/mods/components/3dviewConvertor/assets/convertor/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;
mods/components/3dviewConvertor/view/moduleEditComponent/RightEditPointPanel.js 0 → 100644
View file @ b8510386
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 RightEditPointPanel 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="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 className='bottomBtns'>
<Button
className='sureBtn'
onClick={() => {
this.handleSubmit()
}} ></Button>
<Button
className='cancelBtn'
onClick={() => {
// this.props.save()
}} ></Button>
</div>
</div>
</Form>
</div>
);
}
}
RightEditPointPanel.propTypes = {
subscribe: PropTypes.func,
trigger: PropTypes.func
};
export default RightEditPointPanel;
mods/components/3dviewConvertor/view/moduleEditComponent/RightEditRegionPanel.js 0 → 100644
View file @ b8510386
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;
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