1.修改顶牌，增加路由

src/routes/asyncView.js

@@ -60,6 +60,7 @@ const AsyncDifferentiate = props => <AsyncLoader load={import('./../view/bizview
 const AsyncAlarmVideoMonitor = props => <AsyncLoader load={import('./../view/bizview/alarmVideoMonitor')} componentProps={props} />;
 const AsyncAlarmTestView = props => <AsyncLoader load={import('./../view/bizview/alarm')} componentProps={props} />;
 const AsyncCusVizLib = props => <AsyncLoader load={import('./../view/planMgmt/cusVizLib')} componentProps={props} />;
+const AsyncGraph3DModel = props => <AsyncLoader load={import('amos-iot-3dgraph/lib/view/modelMgmt')} componentProps={props} />;
 
 
 const Routes = {
@@ -116,7 +117,8 @@ const Routes = {
   differentiate: AsyncDifferentiate,
   alarmVideoMonitor: AsyncAlarmVideoMonitor,
   alarmTest: AsyncAlarmTestView,
-  vizlib: AsyncCusVizLib
+  vizlib: AsyncCusVizLib,
+  modelManage: AsyncGraph3DModel
 };
 
 const pageCompontent = key => {

src/routes/index.js

@@ -4,7 +4,6 @@ import notFound from 'amos-security/lib/routes/notfound';
 import redirect from 'amos-security/lib/routes/notfound/redirect';
 import signUp, { signupRouters } from 'amos-security/lib/routes/signUp';
 import routerFilter, { checkLogin } from 'amos-security/lib/routes/validateRouter';
-import PublishView from './../view/planMgmt/view';
 import AutoLogin from './../view/autoLogin/AutoLogin';
 import calcRoutes from './calcRoutes';
 import addCustomRoutes, { customRoutes, customRoutesPubView } from './customRoutes';
@@ -17,8 +16,9 @@ import pageCompontent, {
   RegionList
 } from './view';
 import Iot3DGraphBiz from './../view/planMgmt/iot3DGraph';
-
 import ShareTextPlan from './../view/planMgmt/view/ShareTextPlan';
+import PublishApp from 'amos-iot-3dgraph/lib/view/pubview';
+import ModelEdit from 'amos-iot-3dgraph/lib/view/modelMgmt/edit/ModelEdit';
 
 
 const groups = [
@@ -31,10 +31,9 @@ const injectRoutes = menus => {
   const bizChilds = addCustomRoutes(biz);
   const consoleChilds = addCustomRoutes(consoleRoutes);
   const routes = [
-    {
-      path: 'viz3d/:subjectId',
-      component: Iot3DGraphBiz
-    },
+    { path: 'viz3d/:subjectId', component: Iot3DGraphBiz },
+    { path: 'viz3dpub', component: PublishApp },
+    { path: 'models/:modelId', component: ModelEdit },
     { path: 'login', component: Login },
     { path: 'autologin', component: AutoLogin },
     { path: 'region', component: RegionList }, // 区域选择

src/routes/view.js

@@ -54,6 +54,7 @@ import alarmTestView from './../view/bizview/alarm';
 import CusVizLib from './../view/planMgmt/cusVizLib';
 import RealTimeMonitor from './../view/morphic';
 import PublishView from './../view/planMgmt/view';
+import Graph3DModel from 'amos-iot-3dgraph/lib/view/modelMgmt';
 
 const Routes = {
   // 添加 rules 路由
@@ -107,7 +108,8 @@ const Routes = {
   alarmVideoMonitor: AlarmVideoMonitor,
   alarmTest: alarmTestView,
   vizlib: CusVizLib,
-  planDrill: PublishView
+  planDrill: PublishView,
+  modelManage: Graph3DModel
 };
 
 const pageCompontent = key => {

src/services/commonServices.js

@@ -8,3 +8,7 @@ export const getOnlineWeather = (cityKey) => {
   const url = `http://wthrcdn.etouch.cn/weather_mini?city=${cityKey}`;
   return singleFetch(url);
 };
+
+export const conmmonGetService =(url) =>{
+  return singleFetch(url);
+}

src/view/planMgmt/view/pubview/StageActuator.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { deepCopy } from 'amos-tool';
-import A3DDesigner, { r3d, Connect, DESIGNER_CONSTS } from 'amos-3d/lib/designer';
+import A3DDesigner, { r3d, Connect, DESIGNER_CONSTS,EVENT_CONSTS  } from 'amos-3d/lib/designer';
 import { A3DUtil } from 'amos-3d/lib/threeTools';
 import WorkerObjContent from 'amos-3d/lib/worker/WorkerObjContent';
 import { ObjAnchorHelper } from 'base-r3d/lib/plugins';
 import { BaseObjHelper } from 'base-r3d/lib/factory';
 import { ELEMENT_TYPE } from 'amos-iot-3dgraph/lib/view/pubview/../design/conf';
+import { imageStyles }  from 'amos-iot-3dgraph/lib/view/settingpanel/scenery/conf';
+import imgStatic from 'amos-iot-3dgraph/lib/consts/imgStatic';
 import { Button, Modal, Row, Col  } from 'amos-framework';
 import { PubSub } from 'ray-eventpool';
 import { eventTopics } from './../../../3dview/consts';
+import { conmmonGetService } from './../../../../services/commonServices';
 import PlayTaskTabs from './taskTabs';
 import Play from './play';
 
 const { resizeConnect } = Connect;
 const { Tools } = A3DUtil;
 const { ANIMATION_CONSTS } = DESIGNER_CONSTS;
+const { EVENT_TYPE_CORE } = EVENT_CONSTS;
 
 /**
  * 3d 执行器
@@ -36,9 +40,9 @@ class StageActuator extends Component {
       modelModal: false,//详情弹框
       modalContent: '',
       playing: false, //播放状态
-      detailData: '',
-      objs: [],//特效objs
+      detailData: ''
     };
+    this.objs = [];//特效objs
   }
 
   componentDidMount() {
@@ -248,149 +252,102 @@ class StageActuator extends Component {
     this.cameraFactory = cameraFactory;
     this.rendererFactory = stagePilot.rendererFactory;
     this.r3d = r3d;
-
     // 设置 UI
     this.objAnchorHelper = new ObjAnchorHelper({
       r3d,
       cameraFactory,
       sceneFactory
     });
-
-    //单击
-    this.r3d.on('click', (evt) => {
-      console.log('click');
-      let obj = evt.object;
-      if (evt.object && evt.object.type === 'Mesh') {
-        const realObj = evt.object.parent;
-        const userData = realObj.userData;
-
-        if(userData &&  userData.dataConfig && userData.dataConfig.dataDetailUrl){
-          fetch(userData.dataConfig.dataDetailUrl)
-          .then(response => response.json())
-          .then(data => this.setState({ modelModal: true , detailData: data.dataList}));
-        }
-
-        if(userData.bubbleConfig && userData.bubbleConfig.displayMode == 'click'){
-          //该模型之前顶牌展示状态
-          userData.clickShow = userData.clickShow == undefined ? true : !userData.clickShow;
-          if(userData.clickShow){//判断之前是否显示
-            this.state.objs.find(e => e.uuid == realObj.uuid).baseObjHelper.title = userData.displayName || null;
-          }else{
-            this.state.objs.find(e => e.uuid == realObj.uuid).baseObjHelper.title = null;
-          }
-        }
-      }
+    // 鼠标移入
+    this.r3d.on(EVENT_TYPE_CORE.MouseEnter, evt => {
+      console.log(evt);
+      // if (evt.object && evt.object._boh){
+      //   evt.object._boh.style.color = 0xff00ff;
+      // }
     });
-
-    // 双击事件
-    this.r3d.on('dblclick', (evt) => {
-      // console.log('dblclick');
+    // 鼠标移出
+    this.r3d.on(EVENT_TYPE_CORE.MouseLeave, evt => {
+      console.log(evt);
+      // if (evt.object && evt.object._boh){
+      //   evt.object._boh.style.color = null;
+      // }
     });
-
-    // 鼠标移入事件
-    this.r3d.on('mouseover', (evt) => {
-      let obj = evt.object;
-      // console.log('mouseover');
-      if (evt.object && evt.object.type === 'Mesh') {
-        const realObj = evt.object.parent;
-        const userData = realObj.userData;
-
-        //清除其他
-        this.state.objs.forEach(o => {
-          if(o.userData.bubbleConfig && o.userData.bubbleConfig.displayMode == 'hover'){
-            o.baseObjHelper.title = null;
-          }
-        });
-        if(userData.bubbleConfig && userData.bubbleConfig.displayMode == 'hover'){
-          this.state.objs.find(e => e.uuid == realObj.uuid).baseObjHelper.title = userData.displayName || null;
-        }
-      }
-    });
-
-    // 鼠标移出事件
-    this.r3d.on('mouseout', (evt) => {
-      // console.log('mouseout');
-      if (evt.object && evt.object.type === 'Mesh') {
-        const realObj = evt.object.parent;
-        const userData = realObj.userData;
-        if(userData.bubbleConfig && userData.bubbleConfig.displayMode == 'hover'){
-          this.state.objs.find(e => e.uuid == realObj.uuid).baseObjHelper.title = null;
+    //单击
+    this.r3d.on(EVENT_TYPE_CORE.Click, (evt) => {
+      if (evt.button === 0 && evt.object && evt.object.type === 'Mesh') {
+        const userData = evt.object.parent.userData;
+        if(userData && userData.dataConfig && userData.dataConfig.dataDetailUrl){
+          conmmonGetService(userData.dataConfig.dataDetailUrl).then(
+            data => {
+              this.setState({ modelModal: true , detailData: data.dataList});
+            },
+            error =>{
+              console.error(userData.dataConfig.dataDetailUrl + '请求元素详情失败');
+            } 
+          );
         }
       }
     });
-    
   };
 
-  createInfowindow = (text) => {
-    const div = document.createElement('div');
-    div.style.position = 'absolute';
-    div.className = 'three-ui-infowindow';
-    div.innerText = text;
-    return div;
-  }
-
-  createPanel = (id, text, type) => {
-    const div = document.createElement('div');
-    div.id = id;
-    div.style.position = 'absolute';
-    div.className = 'three-ui-anchor ' + type;
-    div.innerText = text;
-    return div;
-  }
+  onComplete = obj => {
+    const boh = new BaseObjHelper({ obj });
+    obj._boh = boh;
+  
+  };
 
   afterRender = () => {
     this.objAnchorHelper && this.objAnchorHelper.update();
   }
 
   handleModelParserData = (parser, fmtData) => {
-    // 将 eid 绑定到 parser 的 node 上
-    // Object.assign(parser.obj.userData, { eid: fmtData.eid, displayName: fmtData.displayName })
-    // or
-    parser.bindUserData(deepCopy(fmtData));
-
-    let obj = parser.obj;
-    const boh = new BaseObjHelper({ obj });
-    obj.baseObjHelper = boh;
-    obj.baseObjHelper.titleConfig = {
-      // 顶牌平面参数
-      planeOptions: {
-        ...obj.userData.displayName,
-        width: 256 * 0.1,
-        height: 128 * 0.1,
-        position:{ x: 0, y: 30, z: 0 },
-      },
-      canvasOptions: {
-        fillStyle: 'rgb(51, 51, 51)',
-        font: '32px sans-serif',
-        textBaseline: 'middle',
-      },
-      imgWidth: 256,
-      imgHeight: 128,
-      // 设置顶牌 图片路径
-      image: `/src/assets/planMgmt/center.png`
-    };
-    if(obj.userData.displayName && obj.userData.bubbleConfig && obj.userData.bubbleConfig.displayMode == 'show'){
-      obj.baseObjHelper.title = obj.userData.displayName;
-    }else{
-      obj.baseObjHelper.title = null;
+    // 将 fmtData 绑定到 parser 的 node.userData 上
+    // Object.assign(parser.obj.userData, fmtData)
+    parser.bindUserData(fmtData);
+    const { sceneryConfig: { visible, position, imgUrlKey } = {},displayName } = fmtData;
+    const image = imageStyles.filter(image => image.key === imgUrlKey);
+    const imageUrl = image.length > 0 ? image[0].imgUrl : imgStatic.defaultScenery ;
+    if (visible) {
+      parser.objHelper.titleConfig = {
+        planeOptions: {
+          width: 256 * 0.1,
+          height: 128 * 0.1,
+          // 顶牌相对于 parser 模型的位置
+          position,
+          // 是否双面
+          doubleSide: true
+        },
+        canvasOptions: {
+          fillStyle: 'rgb(51, 51, 51)',
+          font: '32px sans-serif',
+          textBaseline: 'middle'
+        },
+        // 设置顶牌大小及图片路径
+        imgWidth: 256,
+        imgHeight: 128,
+        image: imageUrl
+      };
+      parser.objHelper.title = displayName;
     }
-    this.state.objs.push(obj);
-
+    this.objs.push(parser.obj);
   }
 
-    /** 处理所有的模型解析完毕之后 */
-    handleModelParserDone = (modelParser) => {
-      const { content } = this.props;
-      // const modelExistAttach = content.filter(userData => userData.attachments && userData.attachments.length > 0 );
-      // 改变模型关联关系
-      // modelExistAttach.forEach(userData =>{
-      //   const parentObj = modelParser.get(userData.eid);
-      //   userData.attachments.forEach(eid=>{
-      //     const attachModel = modelParser.get(eid);
-      //     attachModel && parentObj.attach(attachModel);
-      //   });
-      // });
-    }
+  /** 处理所有的模型解析完毕之后 */
+  handleModelParserDone = (modelParser) => {
+    const { content } = this.props;
+    const modelExistAttach = content.filter(userData => userData.attachments && userData.attachments.length > 0 );
+    // 改变模型关联关系
+    modelExistAttach.forEach(userData =>{
+      const parentObj = modelParser.get(userData.eid);
+      userData.attachments.forEach(eid=>{
+        const attachModel = modelParser.get(eid);
+        if (attachModel){
+          // attachModel.node.position.set(0,10,0);
+          parentObj.attach(attachModel);
+        }
+      });
+    });
+  }
 
   //model start 
   getContext = () => {
@@ -456,7 +413,8 @@ class StageActuator extends Component {
       onCreated: this.handlePenEditorCreated
     };
     const modelContentProps = {
-      onAllDone: this.onAllDone
+      onAllDone: this.onAllDone,
+      onComplete: this.onComplete
     };
 
     return (
@@ -468,6 +426,7 @@ class StageActuator extends Component {
             baseObjs={baseObjs}
             ref={node => this.a3dRef = node}
             disabledEdit
+            enableObjOutline
             enablePen
             penProps={penProps}
             enableParticles

src/view/planMgmt/view/pubview/taskTabs/index.js

@@ -30,8 +30,8 @@ class taskTabs extends Component {
   componentDidMount(){
     let { tabs } = this.state;
     let models = this.props.content || [];
-    tabs[0].models = models.filter(e => e.key.indexOf('person') != -1);
-    tabs[1].models = models.filter(e => e.key.indexOf('car') != -1);
+    tabs[0].models = models.filter(e => e.stuffType === 'human');
+    tabs[1].models = models.filter(e => e.stuffType === 'vehicle');
     this.setState({ tabs });
 
     this.tabsPubsub = PubSub.subscribe(eventTopics.plan_task_list,function(topic,message){
@@ -48,8 +48,8 @@ class taskTabs extends Component {
     if (!fastDeepEqual(prevProps.content, this.props.content)){
         let { tabs } = this.state;
         let models = this.props.content|| [];
-        tabs[0].models = models.filter(e => e.key.indexOf('person') != -1);
-        tabs[1].models = models.filter(e => e.key.indexOf('car') != -1);
+        tabs[0].models = models.filter(e => e.stuffType === 'human');
+        tabs[1].models = models.filter(e => e.stuffType === 'vehicle');
         this.setState({ tabs });
     }
   }