Skip to content

A
amos-convertor-view
Commit 45716ba5 authored by 单奇雲's avatar 单奇雲
Browse files
Options

预案

parent 8f361d08
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 121 deletions
src/styles/view/planMgmt/pubview.scss
View file @ 45716ba5
......@@ -44,12 +44,13 @@
}
.board-actuator-tasktab{
position: absolute;
height: calc(100% - 72px);
position: absolute !important;
width: 230px;
right: 0;
top: 40px;
color: white;
right: 0 !important;
left: auto !important;
top: 82px !important;
bottom: 32px !important;
.amos-tabs{
height: 100%;
......@@ -75,6 +76,8 @@
padding: 0px;
height: 100%;
border: none;
width: calc(100% - 36px) !important;
float: left !important;
.board-tasktab-all{
color: white;
......
src/view/3dview/consts.js
View file @ 45716ba5
......@@ -86,7 +86,9 @@ export const eventTopics = {
top_afe_msg: 'base3d.fromws.top_alarm_fire_equip_msg', //顶部传感器报警消息
top_ae_msg: 'base3d.fromws.top_alarm_equip_msg', //顶部重点装备报警提醒消息
plan_task_ist:'task_tabs_show'//预案演练任务列表展开事件
plan_task_list:'biz.planDrill.task_tabs_show',//预案演练任务列表展开事件
plan_tree_view:'biz.planDrill.plan_tree_view',//预案树展开事件
plan_drill_appId:'biz.planDrill.plan_drill_app_id',//预案选择节点
};
export const isPointEvent = (topic) => topic.indexOf('.point_') > -1;
......
src/view/planMgmt/cusVizLib/index.js
View file @ 45716ba5
......@@ -9,6 +9,8 @@ import 'amos-iot-webstudio/lib/styles';// 独立使用，需要引入样式
import { pageUrl } from './../common/conf';
import Upload from './../common/upload';
import { FasSerUrl } from '../../../consts/urlConsts';
import { PubSub } from 'ray-eventpool';
import { eventTopics } from './../../3dview/consts';
const ls = _amosTool.Store.lsTool;
const apiKey = SysConsts.api_key;
......@@ -43,6 +45,7 @@ class CusVizLib extends Component {
pathname: pageUrl.planDrill,
state: { appId: data.id,isPublish: !!data.publishState }
};
ls.write(eventTopics.plan_drill_appId,data.id)
browserHistory.push(path);
}
if (itemKey === 'textImport') {
......
src/view/planMgmt/treeView/PlanTreeView.js
View file @ 45716ba5
import React, { Component } from 'react';
import { Tree, Button} from 'amos-framework';
import { Tree, message } from 'amos-framework';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { getPlanTreeAction } from './../../../services/preControlService';
......@@ -14,7 +14,8 @@ class PlanTreeView extends Component {
treeData: [],
expandedKeys: [],
selectedKeys: [],
autoExpandParent: true
autoExpandParent: true,
selectData: undefined
};
}
......@@ -68,8 +69,18 @@ class PlanTreeView extends Component {
defaultOpen =()=>{
let { treeData } = this.state;
let { onTreeSelect } = this.props;
let defaultOpenPlan = this.loopTreeNodes(treeData[0]);
let { onTreeSelect, selectAppId } = this.props;
let defaultOpenPlan = {};
if(selectAppId != ''){
this.findTreeNodesById(treeData,selectAppId);
if(this.state.selectData != undefined){
defaultOpenPlan = this.state.selectData;
}else{
message.danger('预案未发布！！！');
}
}else{
defaultOpenPlan = this.loopTreeNodes(treeData[0]);
}
if (defaultOpenPlan) {
onTreeSelect && onTreeSelect(defaultOpenPlan);
this.setState({
......@@ -88,6 +99,19 @@ class PlanTreeView extends Component {
return data;
}
findTreeNodesById = ( arrData,selectAppId ) => {
outerloop :
for (let i = 0; i < arrData.length; i++) {
const e = arrData[i];
if(e.id == selectAppId){
this.state.selectData = e;
break outerloop;
}else if(e.children && e.children.length > 0){
this.findTreeNodesById(e.children,selectAppId)
}
}
}
getTreeIcon = (props) => {
let { type } = props;
if (type === 'treeNode') {
......@@ -110,7 +134,6 @@ class PlanTreeView extends Component {
}
return data;
}
renderTreeNodes = (data) => {
let { activeKey } = this.props;
......
src/view/planMgmt/view/index.js
View file @ 45716ba5
......@@ -13,6 +13,8 @@ import _amosTool from 'amos-tool';
import { PubSub } from 'ray-eventpool';
import { eventTopics } from './../../3dview/consts';
const ls = _amosTool.Store.lsTool;
const sidePaneStyle = {
planDrill: {
left: 0,
......@@ -56,6 +58,7 @@ class PublishView extends Component {
node: {},
shareVisible: false,
taskTabsShow: false,//任务列表
selectAppId: '',
};
}
......@@ -67,11 +70,19 @@ class PublishView extends Component {
let viewRootDiv = document.getElementsByClassName('publish-view-content')[0];
viewRootDiv && viewRootDiv.addEventListener('click', this._handleClick);//页面增加鼠标单击监听
window.addEventListener('resize', this._resize);
//预案树展示
this.planTreePubsub = PubSub.subscribe(eventTopics.plan_tree_view,function(topic,message){
this.setState({ visible: message })
}.bind(this));
//获取选择预案树节点
this.setState({ selectAppId: ls.read(eventTopics.plan_drill_appId) });
}
componentWillUnmount(){
let viewRootDiv = document.getElementsByClassName('publish-view-content')[0];
viewRootDiv && viewRootDiv.addEventListener('click', this._handleClick);//页面增加鼠标单击监听
window.addEventListener('resize', this._resize);
PubSub.unsubscribe(this.planTreePubsub);
}
_handleClick = (event) => {
......@@ -90,11 +101,12 @@ class PublishView extends Component {
let { params = {}, activeKey } = this.state;
params.appId = param.id;
params.isPublish = !!param.publishState;
this.setState({ params }, () => this.handleChange(activeKey));
this.setState({ params, selectAppId: param.id }, () => this.handleChange(activeKey));
}
getSidePaneContent = (activeKey) => {
return <PlanTreeView activeKey={activeKey} onTreeSelect={this.onTreeSelect} onRightClick={this.onRightClick} onRightCancel={this._handleClick}/>;
const { selectAppId } = this.state;
return <PlanTreeView activeKey={activeKey} selectAppId={selectAppId} onTreeSelect={this.onTreeSelect} onRightClick={this.onRightClick} onRightCancel={this._handleClick}/>;
}
handleChange = (activeKey) => {
......@@ -124,7 +136,7 @@ class PublishView extends Component {
this.setState({ visible: !this.state.visible });
break;
case 'taskList': //任务列表
PubSub.publish(eventTopics.plan_task_ist,!this.state.taskTabsShow);
PubSub.publish(eventTopics.plan_task_list,!this.state.taskTabsShow);
this.setState({ taskTabsShow: !this.state.taskTabsShow });
break;
default:
......
src/view/planMgmt/view/pubview/StageActuator.js
View file @ 45716ba5
......@@ -4,8 +4,11 @@ import { deepCopy } from 'amos-tool';
import A3DDesigner, { r3d, Connect, DESIGNER_CONSTS } from 'amos-3d/lib/designer';
import { A3DUtil } from 'amos-3d/lib/threeTools';
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 { Button, Modal, Row, Col } from 'amos-framework';
import { PubSub } from 'ray-eventpool';
import { eventTopics } from './../../../3dview/consts';
import PlayTaskTabs from './taskTabs';
import Play from './play';
......@@ -32,6 +35,7 @@ class StageActuator extends Component {
modalContent: '',
playing: false, //播放状态
detailData: '',
objs: [],//特效objs
};
}
......@@ -69,14 +73,15 @@ class StageActuator extends Component {
if(animate.showPopup){
this.a3dRef && this.a3dRef.changePlayState('pause');
setTimeout( e => {
// setTimeout( e => {
this.setState({
modal: true,
modalContent: animate.popupContent,
currentIndex: animate.animateIndex,
ativeAnimate: animate.animateKey,
playing: false
});
}, animate.animateParams.duration );
// }, animate.animateParams.duration );
}else{
if(animate.showVoiceBroadcast){
this.text2Speech(animate.description);
......@@ -137,13 +142,17 @@ class StageActuator extends Component {
const { animations = [] } = this.props;
const { currentIndex } = this.state;
if(animations.length > 1) this.setState({ playing: true });
if(type === 'reset'){
if(currentIndex < animations.length - 1 && type === 'continue'){
this.a3dRef && this.a3dRef.changePlayState('start');
}else{
this.a3dRef && this.a3dRef.playAll();
this.setState({ currentIndex: 0, ativeAnimate: animations[0].animateKey});
this.taskTabs.resetTaskTabs();
}else{
this.a3dRef && this.a3dRef.changePlayState('start');
}
//展开任务列表
PubSub.publish(eventTopics.plan_task_list,true);
//收起预案树
PubSub.publish(eventTopics.plan_tree_view,false);
}
playTargetAnimate = (anim, e) => {
......@@ -157,13 +166,13 @@ class StageActuator extends Component {
const { animations } = this.props;
let anim = animations[animateIndex];
if(anim.showPopup){
setTimeout(e => {
// setTimeout(e => {
this.setState({
modal: true,
modalContent: animations[animateIndex].popupContent,
currentIndex: animateIndex
})
}, anim.animateParams.duration );
// }, anim.animateParams.duration );
}
this.a3dRef && this.a3dRef.playAnimation(animateIndex);
}
......@@ -227,40 +236,26 @@ class StageActuator extends Component {
//单击
this.r3d.on('click', (evt) => {
// console.log('click');
console.log('click');
let obj = evt.object;
if (evt.object && evt.object.type === 'Mesh') {
const realObj = evt.object.parent;
const userData = realObj.userData;
//该模型之前顶牌展示状态
userData.clickShow = userData.clickShow == undefined ? true : !userData.clickShow;
if(userData && userData.bubbleConfig && userData.bubbleConfig.visible && userData.bubbleConfig.displayMode == "click"){
if(userData.clickShow){//判断之前是否显示
let div = document.getElementById(userData.id);
let showText = userData.displayName;
if(div){
div.innerText = showText;
div.className = 'three-ui-anchor';
}else{
this.objAnchorHelper.create({
parent: obj,
element: this.createPanel(userData.id,showText,`click ${userData.bubbleConfig.displayStyle}`),
position: [0, 5, 0]
});
}
}else{//状态为true 则移除
let parent = document.getElementsByClassName('three-objanchor')[0];
let node = document.getElementById(userData.id);
parent.removeChild(node);
}
}
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;
}
}
}
});
......@@ -277,39 +272,29 @@ class StageActuator extends Component {
if (evt.object && evt.object.type === 'Mesh') {
const realObj = evt.object.parent;
const userData = realObj.userData;
let parent = document.getElementsByClassName('three-objanchor')[0];
let nodes = document.getElementsByClassName('mouseover');
if(nodes && nodes.length > 0) {//移除其他mouseover 模型顶牌
for(var i = 0; i < nodes.length; i++){
parent.removeChild(nodes[i]);
//清除其他
this.state.objs.forEach(o => {
if(o.userData.bubbleConfig && o.userData.bubbleConfig.displayMode == 'hover'){
o.baseObjHelper.title = null;
}
};
if(userData && userData.bubbleConfig && userData.bubbleConfig.visible && userData.bubbleConfig.displayMode == "hover"){ //判断是否有 移入事件
let node = document.getElementById(userData.id); //移除该模型点击顶牌
if(node) parent.removeChild(node);
let showText = userData.displayName;
let div = document.getElementById(userData.id);
if(div){
div.innerText = showText;
div.className = 'mouseover'
}else{
this.objAnchorHelper.create({
parent: obj,
element: this.createPanel(userData.id,showText,`mouseover ${userData.bubbleConfig.displayStyle}`),
position: [0, 5, 0]
});
}
userData.clickShow = false;
});
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;
}
}
});
};
......@@ -340,6 +325,35 @@ class StageActuator extends Component {
// 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;
}
this.state.objs.push(obj);
}
//model start
......@@ -351,7 +365,7 @@ class StageActuator extends Component {
getFooter = () => {
return (
<div>
<Button onClick={() => this.cancel()}>取消</Button>
<Button onClick={() => this.playCancel()}>取消</Button>
<Button onClick={() => this.playAnimation()}>确定</Button>
</div> )
;
......@@ -382,12 +396,16 @@ class StageActuator extends Component {
}
}
cancel = () => {
playCancel = () => {
const { graphConf } = this.props;
//恢复最佳视角
this.cameraFactory.fitView(graphConf.options.cameraEffects);
this.setState({ modal: false , modelModal: false});
this.setState({ modal: false });
};
modelCancel = () => {
this.setState({ modelModal: false});
}
//model end
render() {
......@@ -401,6 +419,7 @@ class StageActuator extends Component {
scrollUV: true,
onCreated: this.handlePenEditorCreated
};
return (
<div className="board-actuator">
{graphConf &&
......@@ -439,7 +458,7 @@ class StageActuator extends Component {
content={this.getContext()}
outterClosable={false}
footer={this.getFooter()}
onCancel={() => this.cancel()}
onCancel={() => this.playCancel()}
/>
<Modal
header='详情'
......@@ -449,7 +468,7 @@ class StageActuator extends Component {
destroyContent
content={this.getDetailContext()}
noDefaultFooter
onCancel={() => this.cancel()}
onCancel={() => this.modelCancel()}
/>
</div>
);
......
src/view/planMgmt/view/pubview/index.js
View file @ 45716ba5
......@@ -6,10 +6,10 @@ import ActuatorContainer from './ActuatorContainer';
/**
* 三维可视化 发布模式
*
* @class PublishView
* @class Pubview
* @extends {Component}
*/
class PublishView extends Component {
class Pubview extends Component {
constructor(props){
super(props);
......@@ -66,7 +66,7 @@ class PublishView extends Component {
}
}
PublishView.propTypes = {
Pubview.propTypes = {
params: PropTypes.shape({
appId: PropTypes.oneOfType([
PropTypes.string,
......@@ -84,4 +84,4 @@ PublishView.propTypes = {
})
};
export default PublishView;
export default Pubview;
src/view/planMgmt/view/pubview/play/PlayMenuBar.js
View file @ 45716ba5
......@@ -33,10 +33,14 @@ class PlayMenuBar extends Component {
}
componentDidMount(){
this.tabsPubsub = PubSub.subscribe(eventTopics.plan_task_ist,function(topic,message){
this.tabsPubsub = PubSub.subscribe(eventTopics.plan_task_list,function(topic,message){
this.setState({ taskTabsShow: message })
}.bind(this));
}
componentWillUnmount(){
PubSub.unsubscribe(this.tabsPubsub);
}
onSelectChange = () => {
......
src/view/planMgmt/view/pubview/taskTabs/index.js
View file @ 45716ba5
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { fastDeepEqual } from 'amos-tool';
import { Button, Modal, message, AmosAlert, Tabs, Collapse,Timeline } from 'amos-framework';
import { SidePane, Tabs, Collapse,Timeline } from 'amos-framework';
import moment from 'moment';
import { PubSub } from 'ray-eventpool';
import { eventTopics } from './../../../../../view/3dview/consts';
......@@ -34,7 +34,7 @@ class taskTabs extends Component {
tabs[1].models = models.filter(e => e.key.indexOf('car') != -1);
this.setState({ tabs });
this.tabsPubsub = PubSub.subscribe(eventTopics.plan_task_ist,function(topic,message){
this.tabsPubsub = PubSub.subscribe(eventTopics.plan_task_list,function(topic,message){
this.setState({ taskTabsShow: message })
}.bind(this));
......@@ -83,48 +83,61 @@ class taskTabs extends Component {
this.setState({ tabs });
}
render() {
const { tabs,taskTabsShow } = this.state;
if(taskTabsShow){
return (
<div className='board-actuator-tasktab'>
<Tabs defaultActiveKey="1" tabPosition="left">
<TabList>
{tabs.map(e => (
<Tab tab={`Tab-${e.key}`} key={e.key}>
{/* <BizIcon icon={e.icon}/> */}
<img className='board-tabs-img' src={`/src/assets/planMgmt/${e.icon}.png`}/>
</Tab>
))}
</TabList>
{tabs.map(tab => (
<TabPanel tab={`Tab-${tab.key}`} key={tab.key}>
<Collapse className='board-tasktab-all' activeKey={['1']}>
<Panel header='全部' key={'1'}>
<Collapse className='board-tasktab-part' accordion>
{tab.models && tab.models.map(model => {
return <Panel header={model.displayName} key={model.key}>
<Timeline className='board-tasktab-timeLine'>
{model.tasks && model.tasks.map(task => {
return <Timeline.Item>
<p>{task.startTime}</p>
<p>{task.taskDes}</p>
</Timeline.Item>
})}
</Timeline>
</Panel>
})}
</Collapse>
getTaskContent = () => {
const { tabs } = this.state;
return <Tabs defaultActiveKey="1" tabPosition="left">
<TabList>
{tabs.map(e => (
<Tab tab={`Tab-${e.key}`} key={e.key}>
{/* <BizIcon icon={e.icon}/> */}
<img className='board-tabs-img' src={`/src/assets/planMgmt/${e.icon}.png`}/>
</Tab>
))}
</TabList>
{tabs.map(tab => (
<TabPanel tab={`Tab-${tab.key}`} key={tab.key}>
<Collapse className='board-tasktab-all' activeKey={['1']}>
<Panel header='全部' key={'1'}>
<Collapse className='board-tasktab-part' accordion>
{tab.models && tab.models.map(model => {
return <Panel header={model.displayName} key={model.key}>
<Timeline className='board-tasktab-timeLine'>
{model.tasks && model.tasks.map(task => {
return <Timeline.Item>
<p>{task.startTime}</p>
<p>{task.taskDes}</p>
</Timeline.Item>
})}
</Timeline>
</Panel>
})}
</Collapse>
</TabPanel>
))}
</Tabs>
</div>
</Panel>
</Collapse>
</TabPanel>
))}
</Tabs>;
}
render() {
const { taskTabsShow } = this.state;
const animateProps = {
transitionAppear: true
};
const animateDelay = 0;
// if(taskTabsShow){
return (
<SidePane
className='board-actuator-tasktab'
animateName="fade"
animateProps={animateProps}
animateDelay={animateDelay}
visible={taskTabsShow}
>
{this.getTaskContent()}
</SidePane>
);
}else{
return null;
}
}
}
......
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