点绑定

mods/components/3dviewConvertor/view/View3D.js

@@ -546,17 +546,29 @@ class View3D extends Component {
       }
     }
   };
-  getPointList = (pointType) => {
-    let { markers } = this.state
-    this.clearMarkers();
-    getPointListAction().then(data => {
-      for (let i = 0; i < data.length;i++){
-        if(pointType && data[i].type == pointType){
-          markers[pointType].push(data[i]);
-        }
+
+  getPointLoop = ({ markers }, pointType, treeData) => {
+    treeData.forEach( t => {
+      if(t.isRegion && t.children && t.children.length > 0){
+        this.getPointLoop( { markers }, pointType, t.children)
+      }else if(t.position3d){
+        t.position = t.position3d;
+        t.key = `${t.type}-${t.id}`; 
+        t.label = t.name;
+        markers[pointType].push(t);
       }
+    });
+  }
+
+  //编辑模式获取点
+  getPointList = (pointType,treeData) => {
+    this.clearMarkers();
+    if(treeData){
+      let markers = {};
+      markers[pointType] = [];
+      this.getPointLoop( { markers }, pointType, treeData);
       this.setState({markers})
-    })
+    }
   }
   startDrow = (areaItem) => {
     // this.a3dRef.addPen(m);
@@ -774,7 +786,6 @@ class View3D extends Component {
       this.setState({
         selectArea:'',
         selectPoints,
-        positionxyz:selectPoints.position3d && selectPoints.position3d.split(","),
         showRightPanel: true,
       });
     }
@@ -888,14 +899,17 @@ class View3D extends Component {
     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[0]},${item[i].position[1]},${item[i].position[2]}`
-        });
+        if(item[i].isChange){
+          paramsArr.push({
+            pointId: item[i].id,
+            pointType: item[i].type,
+            position3d: `${item[i].position[0]},${item[i].position[1]},${item[i].position[2]}`
+          });
+        }
       }
     }
     savePointListAction(paramsArr).then(data => {
+      message.success("保存成功");
       getPointTreeAction(pointType).then(data => {
         this.setState({
           treeData: data || [],
@@ -961,7 +975,6 @@ class View3D extends Component {
   //删除区域
   deleteAreaBind = () => {
     let { selectArea,treeData } = this.state;
-    debugger;
     if (selectArea) {
     getPointsByRegionIdAction(selectArea.id).then(d => {
       if(d && d.length == 0){
@@ -1024,6 +1037,7 @@ class View3D extends Component {
       });
     } else {
       getPointTreeAction(pointTypeArr[0].code || '').then(data => {
+        this.getPointList( pointTypeArr[0].code, data );
         this.setState({
           pointType: pointTypeArr[0].code || '',
           treeData: data || [],
@@ -1042,8 +1056,8 @@ class View3D extends Component {
       pointType,
       treeData:[]
     });
-    this.getPointList(pointType);
     getPointTreeAction(pointType).then(data => {
+      this.getPointList(pointType,data);
       this.setState({
         pointType,
         treeData: data || []
@@ -1079,6 +1093,7 @@ class View3D extends Component {
   }
 
   drop = (event) => {
+    console.log('drop');
     event.preventDefault();
     this.setState({isPointSave:false})
     let { dragItem,markers } = this.state;
@@ -1113,10 +1128,18 @@ class View3D extends Component {
         label: dragItem.name,
         level: dragItem.level,
         levelStr: dragItem.levelStr,
+        isChange: true
       };
+
+      let selectPoints = { 
+        id: dragItem.id,
+        type: dragItem.type
+      }
       markers[`${type}`].push(addPointParam);
       this.setState({
-        markers: deepCopy(markers)
+        markers: deepCopy(markers),
+        selectPoints
+        // positionxyz: position.toArray()
       });
     }
   }
@@ -1135,18 +1158,18 @@ class View3D extends Component {
     isEditMode = true;
     this.setState({ isEditMode });
     if (isEditMode === true) {
-      getAreaTreeAction().then(data => {
+      getAreaTreeAction().then(treeData => {
         this.setState({
-          treeData: data || []
+          treeData: treeData || []
         });
-      });
-      getPointTypeAction().then(data => {
-        console.log(data);
-        this.setState({
-          pointTypeArr: data || [],
-          pointType: data[0] ? data[0].code : ''
+        getPointTypeAction().then(data => {
+          console.log(data);
+          this.setState({
+            pointTypeArr: data || [],
+            pointType: data[0] ? data[0].code : ''
+          });
+          this.getPointList(data[0].code,treeData);
         });
-        this.getPointList(data[0].code);
       });
     }
   }
@@ -1477,16 +1500,33 @@ class View3D extends Component {
     return object;
   }
   addMarker=({extData,position})=>{
-    const {markers} =this.state
-    let paramsArr = [{
-      pointId: extData.id,
-      pointType: extData.type,
-      position3d: `${position[0]},${position[1]},${position[2]}`
-    }];
-    console.log(paramsArr)
-    savePointListAction(paramsArr).then(data => {
-    })
-    this.setState({positionxyz: position})
+    console.log('addMarker');
+    let {markers} =this.state;
+
+    for (let i = 0; i < markers[extData.type].length; i++) {
+      const marker = markers[extData.type][i];
+      if(marker.id === extData.id){
+        marker.position = position;
+        marker.isChange = true;
+        break;
+      }
+    }; 
+    // let paramsArr = [{
+    //   pointId: extData.id,
+    //   pointType: extData.type,
+    //   position3d: `${position[0]},${position[1]},${position[2]}`
+    // }];
+    // console.log(paramsArr)
+    let selectPoints = {
+      id: extData.id,
+      type: extData.type,
+      position3d: position
+    }
+    this.setState({selectPoints,markers});
+
+    // savePointListAction(paramsArr).then(data => {
+    // })
+    // this.setState({positionxyz: position})
   }
   render() {
     const {
@@ -1639,7 +1679,7 @@ class View3D extends Component {
                 showRightPanel && pageType === 'region' ? <RightEditRegionPanel detailData={selectArea} rightHeight={rightHeight}  closeRightPanel={()=>this.setState({showRightPanel:false})} changeRoutePath={this.changeRoutePath}  routePathData={this.state.routePathData}/> : ''
               }
               {
-                showRightPanel && pageType === 'point' ? <RightEditPointPanel detailData={selectPoints} positionxyz={positionxyz} closeRightPanel={()=>this.setState({showRightPanel:false})}/> : ''
+                showRightPanel && pageType === 'point' ? <RightEditPointPanel detailData={selectPoints} showRightPanel={showRightPanel} closeRightPanel={()=>this.setState({showRightPanel:false})} markers={markers} changeMarkersData={this.changeMarkersData}/> : ''
               }
             </div>
           </div>

mods/components/3dviewConvertor/view/moduleEditComponent/RightEditPointPanel.js

@@ -17,42 +17,64 @@ class RightEditPointPanel extends Component {
     super(props);
 
     this.state = {
-      form: {
-
-      },
-      rules:{},
-      detailData:[]
+      form: {},
+      rules: {},
+      detailData: [],
+      positionxyz: [],
+      positionX: '',
+      positionY: '',
+      positionZ: '',
     };
 
   }
 
   componentDidMount() {
-    let {detailData}=this.props
+    let { detailData, markers }=this.props
 
     getPointTreeDetailAction(detailData.id,detailData.type).then(data => {
       console.log(data);
+      // this.mreageDetailData( data,markers );
       this.setState({
         detailData: data || [],
-      },err => {
-        console.log(err)
       });
     });
   }
-
+  
   componentWillUnmount() {
 
   }
+
   componentWillReceiveProps(nextProps) {
-    let {detailData}=nextProps
+    let { detailData, markers, showRightPanel } = nextProps;
+    console.log('componentWillReceivePropscomponentWillReceiveProps');
+    // positionxyz && this.setState({ positionxyz, positionX: positionxyz[0], positionY: positionxyz[1], positionZ: positionxyz[2] });
     getPointTreeDetailAction(detailData.id,detailData.type).then(data => {
-      console.log(data);
-      this.setState({
-        detailData: data || [],
-      },err => {
-        console.log(err)
-      });
+      if(detailData.position3d){
+        data.position = detailData.position3d;
+      }else if(!data.position){
+        const curTypeMaker = markers[data.type];
+        for (let i = 0; i < curTypeMaker.length; i++) {
+          if(data.id == curTypeMaker[i].id){
+            data.position = curTypeMaker[i].position;
+          }
+        }
+      }
+      this.setState({detailData: data,positionX: data.position[0], positionY: data.position[1], positionZ: data.position[2]});
     });
   }
+
+  mreageDetailData = (detailData,markers) => {
+    const curTypeMaker = markers[detailData.type];
+    for (let i = 0; i < curTypeMaker.length; i++) {
+      if(detailData.id == curTypeMaker[i].id){
+        const position = curTypeMaker[i].position;
+        // detailData.position3d = 
+        position && this.setState({ positionX: position[0], positionY: position[1], positionZ: position[2] });
+      }
+    }
+    this.setState({detailData});
+  }
+
   onChange = (key, e) => {
     const value = e.target.value;
     const newForm = Object.assign({}, this.state.form, { [key]: value });
@@ -66,6 +88,7 @@ class RightEditPointPanel extends Component {
       form: newForm
     });
   }
+
   onHobbyChange = (value, item) => {
     const newForm = Object.assign({}, this.state.form, { 'level': value });
     this.setState({
@@ -73,12 +96,6 @@ class RightEditPointPanel extends Component {
     });
   }
 
-
-
-
-
-
-
   handleSubmit = (e) => {
     // e.preventDefault();
     this.form.validate((valid, dataValues, errors) => {
@@ -92,9 +109,38 @@ class RightEditPointPanel extends Component {
     });
   }
 
+  onChangePosition = ( inputType , value ) => {
+    let { positionX, positionY, positionZ } = this.state;
+    if(inputType === 'positionX'){
+      this.state.positionX = Number(value);
+    }else if(inputType === 'positionY'){
+      this.state.positionY = Number(value);
+    }else{
+      this.state.positionZ = Number(value);
+    }
+    let position = [positionX,positionY,positionZ];
+    this.mreageMarkerPosition(position);
+  }
+  
+  mreageMarkerPosition = ( position ) => {
+    let { markers } = this.props;
+    const { detailData } = this.state;
+
+    
+    const curTypeMaker = markers[detailData.type] || [];
+    for (let index = 0; index < curTypeMaker.length; index++) {
+      const marker = curTypeMaker[index];
+      if(marker.id === detailData.id){
+        marker.position = position;
+        marker.isChange = true;
+        this.props.changeMarkersData(markers);
+      }
+    }
+  }
+
   render() {
-    let { rules, form,pointTypeArr,pointType ,detailData,} = this.state;
-    let { pageType,positionxyz } = this.props;
+    let { rules,form,pointTypeArr,pointType ,detailData,positionxyz,positionX,positionY,positionZ } = this.state;
+    let { pageType } = this.props;
     let radio = detailData.isIndoor ? "prop1":"prop2"
     let position = (detailData.position3d) && detailData.position3d.split(",")
     const formItemLayout = {
@@ -164,17 +210,26 @@ class RightEditPointPanel extends Component {
                     <div className='position'>
                       <div className='positionItem'>
                       <FormItem label="X"  field="positionX" {...formItemLayout}>
-                      <Input value={positionxyz && positionxyz[0]}  />
+                        <Input 
+                          value={ this.state.positionX }
+                          onChange={ (e) => this.onChangePosition('positionX',e.target.value) }
+                          />
                       </FormItem>
                       </div>
                       <div className='positionItem'>
                         <FormItem label="Y"  field="positionY" {...formItemLayout}>
-                        <Input value={positionxyz && positionxyz[1]}  />
+                          <Input 
+                            value={ this.state.positionY }
+                            onChange={ (e) => this.onChangePosition('positionY',e.target.value)  }
+                            />
                         </FormItem>
                       </div>
                       <div className='positionItem'>
                         <FormItem label="Z"  field="positionZ" {...formItemLayout}>
-                        <Input value={positionxyz && positionxyz[2]}  />
+                          <Input 
+                            value={ this.state.positionZ }
+                            onChange={ (e) => this.onChangePosition('positionZ',e.target.value)  } 
+                            />
                         </FormItem>
                       </div>
                     </div>

mods/components/3dviewConvertor/view/points/marker3DFactory.js

@@ -188,12 +188,11 @@ export default function marker3DFactory(WrappedComponent = 'div', options){
         imgHeight: 128,
         image: markerTitleBgMapper['base']
       };
-      if(type === 'riskSource'){
+      if(type === 'riskSource' && !this.props.isEditMode){
         cardTitle = '风险值' + title
       }else{
-        cardTitle = title ? title : name;
+        cardTitle = name ? name : title;
       }
-
       obj.baseObjHelper.title = cardTitle;
     }
 
@@ -232,7 +231,7 @@ export default function marker3DFactory(WrappedComponent = 'div', options){
     };
 
     render() {
-      const { markers, ...rest } = this.props;
+      const { markers,isEditMode, ...rest } = this.props;
       const { planStarted } = this.state;
       let dialogStyle = { zIndex: 1000 };
 
@@ -241,7 +240,7 @@ export default function marker3DFactory(WrappedComponent = 'div', options){
         <WrappedComponent>
           <Markers
             {...rest}
-            draggable
+            draggable={isEditMode}
             markers={result}
             events={this.markerEvents}
             onCreated={this.markerCreated}