Commit b8510386 authored by baoshuang's avatar baoshuang

合并编辑模式代码

parent ac77a6d3
...@@ -133,4 +133,14 @@ export const FasSerUrl = { ...@@ -133,4 +133,14 @@ export const FasSerUrl = {
importExcelFireEquipmentPointUrl: completePrefix(convertorURI, 'api/excel/import/fireEquipmentPoint'), importExcelFireEquipmentPointUrl: completePrefix(convertorURI, 'api/excel/import/fireEquipmentPoint'),
exportExcelFireEquipmentPointUrl: completePrefix(convertorURI, 'api/excel/export?exportType={exportType}&modelName={modelName}'), exportExcelFireEquipmentPointUrl: completePrefix(convertorURI, 'api/excel/export?exportType={exportType}&modelName={modelName}'),
pointModelistUrl: completePrefix(convertorURI, 'api/view3d/point/list?model={model}'), 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
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
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
@import './preControl.scss'; @import './preControl.scss';
@import './planDetail.scss'; @import './planDetail.scss';
@import './actionbar.scss'; @import './actionbar.scss';
@import './moduleEdit.scss';
@import './../assets/bizFont/iconfont.css'; @import './../assets/bizFont/iconfont.css';
@import './../assets/amosFont/iconfont.css'; @import './../assets/amosFont/iconfont.css';
...@@ -35,7 +36,14 @@ ...@@ -35,7 +36,14 @@
} }
} }
#app>div{
height: 100%;
>div{
height: 100%;
}
}
.sys-view-3d { .sys-view-3d {
height: 100%;
.three-renderer { .three-renderer {
.three-container { .three-container {
position: absolute; position: absolute;
...@@ -124,3 +132,5 @@ ...@@ -124,3 +132,5 @@
border-image-slice: 50 50 50 50; border-image-slice: 50 50 50 50;
border-image-repeat: stretch; border-image-repeat: stretch;
} }
.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
...@@ -12,15 +12,15 @@ const defaultPageable = { ...@@ -12,15 +12,15 @@ const defaultPageable = {
size: 10 size: 10
}; };
// const defaultHeaders = { const defaultHeaders = {
// appKey: 'CONVERTER_STATION', // appKey: 'CONVERTER_STATION',
// product: 'CONVERTER_STATION_WEB', // product: 'CONVERTER_STATION_WEB',
// channelType: '3dpage' channelType: '3dpage'
// }; };
const compleHeaders = () => { const compleHeaders = () => {
return { return {
// ...defaultHeaders, ...defaultHeaders,
// token: getToken(), // token: getToken(),
'X-Access-Token': getToken() 'X-Access-Token': getToken()
}; };
......
...@@ -99,7 +99,7 @@ class ConvertorView3DRoot extends Basic { ...@@ -99,7 +99,7 @@ class ConvertorView3DRoot extends Basic {
const wsURL = completeToken(SysWsURL.convertorView3dws); const wsURL = completeToken(SysWsURL.convertorView3dws);
return ( return (
<div> <div>
<PanoramicLeft /> {/* <PanoramicLeft /> */}
<div className="sys-view-3d"> <div className="sys-view-3d">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug /> <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
...@@ -107,7 +107,7 @@ class ConvertorView3DRoot extends Basic { ...@@ -107,7 +107,7 @@ class ConvertorView3DRoot extends Basic {
{this.getScreenSaver()} {this.getScreenSaver()}
</div> </div>
<PanoramicRight /> {/* <PanoramicRight /> */}
</div> </div>
); );
} }
......
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;
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;
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;
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