.

mods/components/3dviewConvertor/styles/actionbar.scss

+.action-pane-data{
+
+    position: absolute;
+    left: 45% !important;
+    top: 90% !important;
+
+    .action-list{
+        height: 40px;
+        padding: 0 1rem;
+        border-radius: 6px;
+        background:rgba(216,216,216,0.24);
+        border:1px solid rgba(146,149,151,1);
+
+        .action-item{
+            float: left;
+            width: 40px;
+            height: 38px;
+            text-align: center;
+            border:1px solid rgba(146,149,151,1);
+
+            .action-item-title{
+                color: rgb(224, 224, 224);
+                position: relative;
+                top: -23px;
+                font-size:1vw;
+                -webkit-transform-origin-x: 0;
+                -webkit-transform: scale(0.60);
+                white-space: nowrap;
+                text-align: end;
+            }
+
+            .action-item-icon{
+                top: -17px;
+                position: relative;
+            }
+        }
+
+        .action-active{
+            background: linear-gradient(180deg,rgba(0,96,154,0.8) 0%,rgba(0,54,105,0.5) 100%);
+        }
+    }
+}
\ No newline at end of file

mods/components/3dviewConvertor/styles/index.scss

@@ -10,6 +10,7 @@
 @import './screensaver.scss';
 @import './preControl.scss';
 @import './planDetail.scss';
+@import './actionbar.scss';
 
 @import './../assets/bizFont/iconfont.css';
 @import './../assets/amosFont/iconfont.css';

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

@@ -11,6 +11,7 @@ import globalMsg from './pagefactory/msgFactory';
 import { eventTopics, rulesDataFactory } from './consts';
 import LayerPool from './LayerPool';
 import TopMsg from './sideControl/TopMsg';
+import ActionBar from './actionbar';
 
 const eventConnect = Connect.eventConnect;
 
@@ -43,7 +44,7 @@ class MaskContent extends Component {
   render() {
     const { planStarted } = this.state;
     const { multiple, onItemClick, layerConfig, showExplain, onExplainClose, alarmStarted, alarmStart, planStart, planQuit } = this.props;
-
+    const { onActionItemClick } = this.props;
     const wsURL = completeToken(SysWsURL.convertorRulews);
     const controlAnimation = {
       animateName: 'zoom-comb-left',
@@ -77,9 +78,10 @@ class MaskContent extends Component {
         <SideControl multiple={multiple} onItemClick={onItemClick} layerConfig={layerConfig} animationProps={controlAnimation} />
         <DataPane animationProps={datapaneAnim} />
         <TopMsg alarmStart={alarmStart} />
+        <ActionBar onActionItemClick={onActionItemClick} animationProps={controlAnimation}/>
         {/* <RulesLayer />
-        {alarmStarted && <LayerPool animationProps={layerPoolAnimation} planStart={planStart} planQuit={planQuit} planStarted={planStarted} />}
-        <Explain visible={showExplain} onExplainClose={onExplainClose} /> */}
+        {alarmStarted && <LayerPool animationProps={layerPoolAnimation} planStart={planStart} planQuit={planQuit} planStarted={planStarted} />} 
+        <Explain visible={showExplain} onExplainClose={onExplainClose} />*/}
       </div>
     );
   }

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

@@ -643,6 +643,10 @@ class View3D extends Component {
     }
   };
 
+  onActionItemClick = (actionType) => {
+    console.log('onActionItemClick');
+  }
+
   render() {
     const {
       objs,
@@ -702,6 +706,7 @@ class View3D extends Component {
             alarmStart={this.alarmStart}
             planStart={this.planStart}
             planQuit={this.planQuit}
+            onActionItemClick={this.onActionItemClick}
           />
         }
         modelContentProps={modelContentProps}

mods/components/3dviewConvertor/view/actionbar/index.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { SidePane } from 'amos-framework';
+import { actionBars } from './../conf';
+import BizIcon from './../common/icon/BizIcon'
+
+/**
+ * 底部操作栏
+ */
+class ActionBar extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeAction: "panoramicMode"
+    };
+  }
+
+  itemClick = (activeAction) => {
+    this.setState({ activeAction });
+    this.props.onActionItemClick && this.props.onActionItemClick();
+  }
+
+  render() {
+    const { activeAction } = this.state;
+    const { onActionItemClick,animationProps } = this.props;
+    return (
+      <SidePane className="action-pane-data" {...animationProps}>
+        <div className="action-list">
+          {
+            actionBars.map( a => {
+              const cls = classNames({
+                'action-item': true,
+                'action-active': activeAction === a.type
+              });
+              return (
+                <div className={cls} onClick={()=> this.itemClick(a.type)}>
+                  <p className="action-item-title">{a.label}</p>
+                  <BizIcon className="action-item-icon" icon={a.icon} />
+                </div>
+              );
+            })
+          }
+        </div>
+      </SidePane>
+    );
+  }
+}
+
+ActionBar.propTypes = {
+  animationProps: PropTypes.object
+};
+
+export default ActionBar;

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

@@ -76,6 +76,17 @@ export const viewController = [
 ];
 
 /**
+ * 视图控制
+ */
+export const actionBars = [
+  { key: 'impEquipment-action', icon: 'impEquipment', type: 'impEquipmentMode', singleClick: true, label: '重点设备' },
+  { key: 'panoramic-action', icon: 'panoramic', type: 'panoramicMode', singleClick: true, label: '全景' },
+  { key: 'burst-action', icon: 'zhalie', type: 'burst', singleClick: true, label: '分解' },
+  { key: 'fitview-action', icon: 'zuijiashijiao', type: 'fitview', singleClick: true, label: '初始视图' },
+  { key: 'edit-action', icon: 'jianpan', type: 'editMode', singleClick: true, label: '编辑' }
+];
+
+/**
  * 业务控制
  */
 export const bizControls = [

package.json

@@ -10,7 +10,8 @@
     "lint": "eslint src tests",
     "lint:fix": "npm run lint -- --fix",
     "stylelint": "stylelint src",
-    "build": "ray-build react && ray-build stylescss"
+    "build": "ray-build react && ray-build stylescss",
+    "pub": "npm run build && amos-run dllreleased"
   },
   "devDependencies": {
     "amos-build": "^3.x",