Skip to content

A
amos-station-module-view
Commit 6cafbc87 authored by 张博's avatar 张博
Browse files
Options

chongtu

parent a8c2579e
Hide whitespace changes
Inline Side-by-side
Showing with 315 additions and 378 deletions
mods/components/3dviewConvertor/styles/moduleEdit.scss
View file @ 6cafbc87
.ModuleEditPage { .ModuleEditPage {
position: relative; position: relative;
height: 100%; height: 100%;
::-webkit-scrollbar { /* 血槽宽度 */ ::-webkit-scrollbar {
width:5px; /* 血槽宽度 */
height: 5px; width: 5px;
background-color: rgba(10, 53, 62, 1); height: 5px;
border-radius: 5px; background-color: rgba(10, 53, 62, 1);
} border-radius: 5px;
::-webkit-scrollbar-thumb { /* 拖动条 */ }
border-radius: 5px; ::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.4); /* 拖动条 */
} border-radius: 5px;
::-webkit-scrollbar-track { /* 背景槽 */ background-color: rgba(255, 255, 255, 0.4);
background-color:rgba(17, 44, 88, 0.2); }
} ::-webkit-scrollbar-track {
/* 背景槽 */
background-color: rgba(17, 44, 88, 0.2);
}
.topBox { .topBox {
position: absolute; position: absolute;
top: 45px; top: 45px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
span { span {
display: inline-block; display: inline-block;
} }
.editTitle { .editTitle {
width:257px; width: 257px;
height:55px; height: 55px;
background: url('../assets/convertor/moduleEdit/title.png') no-repeat 100% 100%; background: url('../assets/convertor/moduleEdit/title.png') no-repeat 100% 100%;
// opacity:0.4; // opacity:0.4;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
color: #fff; color: #fff;
vertical-align: top; vertical-align: top;
.titleText { .titleText {
width: 100%; width: 100%;
height: 100%; height: 100%;
line-height: 55px; line-height: 55px;
// border-bottom:2px transparent solid; // 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%); // 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 { .quipBtn {
width: 169px; width: 169px;
...@@ -50,253 +53,247 @@ ...@@ -50,253 +53,247 @@
cursor: pointer; cursor: pointer;
background: url('../assets/convertor/moduleEdit/quip.png') no-repeat 100% 100%; background: url('../assets/convertor/moduleEdit/quip.png') no-repeat 100% 100%;
} }
}
.bottomBox {
position: absolute;
bottom: 34px;
left: 50%;
transform: translateX(-50%);
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;
} }
.bottomBox { .editAreaBtn {
position: absolute; background: url('../assets/convertor/moduleEdit/areaBtn.png') no-repeat 100% 100%;
bottom: 34px; }
left: 50%; .editPointBtn {
transform: translateX(-50%); background: url('../assets/convertor/moduleEdit/pointBtn.png') no-repeat 100% 100%;
span { }
display: inline-block; .editAreaBtn.selected {
width: 177px; background: url('../assets/convertor/moduleEdit/areaBtn_select.png') no-repeat 100% 100%;
height: 42px; }
line-height: 42px; .editPointBtn.selected {
background: rgba(46,217,239,0.2); background: url('../assets/convertor/moduleEdit/poingBtn_select.png') no-repeat 100% 100%;
// border: 2px solid #2ED9EF; }
margin: 0 10px; }
text-align: center;
font-size: 16px; // 左侧树
// color: #2ED9EF; .leftTree {
cursor: pointer; position: absolute;
} top: 0;
.editAreaBtn { left: 15px;
background: url('../assets/convertor/moduleEdit/areaBtn.png') no-repeat 100% 100%; width: 264px;
height: 100%;
padding-top: 55px;
padding-bottom: 15px;
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('../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('../assets/convertor/moduleEdit/searchBg.png') no-repeat 100% 100%;
input {
background-color: transparent;
box-shadow: none;
padding-left: 15px;
color: #fff;
} }
.editPointBtn { .amosicon-search {
background: url('../assets/convertor/moduleEdit/pointBtn.png') no-repeat 100% 100%; color: #2ed9ef;
} }
.editAreaBtn.selected { }
background: url('../assets/convertor/moduleEdit/areaBtn_select.png') no-repeat 100% 100%; }
.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;
} }
.editPointBtn.selected { }
background: url('../assets/convertor/moduleEdit/poingBtn_select.png') no-repeat 100% 100%; .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('../assets/convertor/moduleEdit/sureBtn.png') no-repeat 100% 100%;
border: none;
}
.deleteBtn {
width: 100px;
height: 33px;
background: url('../assets/convertor/moduleEdit/deleteBtn.png') no-repeat 100% 100%;
border: none;
}
} }
}
// 左侧树 // 右侧面板
.leftTree { .rightEditPanel {
position: absolute; position: absolute;
top: 0; top: 0;
left: 15px; right: 15px;
width: 264px; width: 264px;
height: 100%; height: 100%;
padding-top: 55px; padding-top: 55px;
padding-bottom: 15px; padding-bottom: 15px;
user-select: none; .rightContainer {
.leftContainer { position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(10, 53, 62, 0.68); background-color: rgba(10, 53, 62, 0.68);
border: 1px solid rgba(46, 217, 239, 0.59); border: 1px solid rgba(46, 217, 239, 0.59);
padding: 12px; padding: 12px;
color: #fff;
.basic-demo {
height: calc(100% - 53px);
overflow-y: auto;
}
.amos-form-item-label {
color: #fff;
}
.topForm {
.rightTitle {
margin-left: -15px;
.titleText {
margin-left: 5px;
}
} }
.topForm { .amos-input {
.leftSelect { background-color: rgba(4, 30, 36, 0.4);
height: 39px; border-radius: 1px;
width: 100%; border: solid 1px rgba(46, 217, 239, 0.59);
margin-bottom: 10px; font-size: 14px;
background: url('../assets/convertor/moduleEdit/selectBox.png') no-repeat 100% 100%; color: #fff;
border: none;
line-height: 31px;
padding: 5px;
color: #F0DF2D;
}
.leftSearch {
height: 33px;
line-height: 33px;
background: url('../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 { .moduleTitle {
height: calc(100% - 132px); height: 50px;
overflow-y: auto; display: flex;
.amos-tree { align-items: center;
color: rgba(15, 235, 255, 1); .titleText {
.amos-tree-node-content-wrapper { margin-left: 5px;
color: #fff; }
font-size: 15px;
}
}
.icon {
margin-left: 5px;
vertical-align: middle;
img {
vertical-align: initial;
margin-left: 10px;
}
}
} }
.bottomBtns { height: calc(100% - 48px);
padding-top: 15px; padding-left: 20px;
text-align: center; .amos-input {
.sureBtn { width: 100%;
width: 100px;
height: 33px;
background: url('../assets/convertor/moduleEdit/sureBtn.png') no-repeat 100% 100%;
border: none;
}
.deleteBtn {
width: 100px;
height: 33px;
background: url('../assets/convertor/moduleEdit/deleteBtn.png') no-repeat 100% 100%;
border: none;
}
} }
} .amos-select {
width: 100%;
// 右侧面板
.rightEditPanel {
position: absolute;
top: 0;
right: 15px;
width: 264px;
height: 100%;
padding-top: 55px;
padding-bottom: 15px;
.rightContainer {
position: relative;
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;
.basic-demo{
height: calc(100% - 53px);
overflow-y: auto;
}
.amos-form-item-label {
color: #fff;
}
.topForm {
.rightTitle{
margin-left: -15px;
.titleText{
margin-left: 5px;
}
}
.amos-input{
background-color: rgba(4, 30, 36,0.4);
border-radius: 1px;
border: solid 1px rgba(46, 217, 239, 0.59);
font-size: 14px;
color:#fff;
}
.moduleTitle{
height: 50px;
display: flex;
align-items: center;
.titleText{
margin-left: 5px;
}
}
height: calc(100% - 48px);
padding-left: 20px;
.amos-input {
width: 100%;
}
.amos-select {
width: 100%;
}
.radio-text{
color:#fff
}
}
} }
.bottomBtns { .radio-text {
position: absolute; color: #fff;
bottom:15px;
padding-top: 15px;
left:50%;
margin-left: -100px;
.sureBtn {
width: 100px;
height: 33px;
background: url('../assets/convertor/moduleEdit/sureBtn.png') no-repeat 100% 100%;
border: none;
}
.deleteBtn {
width: 100px;
height: 33px;
background: url('../assets/convertor/moduleEdit/deleteBtn.png') no-repeat 100% 100%;
border: none;
}
.cancelBtn {
width: 100px;
height: 33px;
background: url('../assets/convertor/moduleEdit/cancelBtn.png') no-repeat 100% 100%;
border: none;
}
} }
}
} }
.bottomBtns {
.editButton { position: absolute;
position: absolute; bottom: 15px;
bottom: 100px; padding-top: 15px;
left: 50%; left: 50%;
margin-left: -100px;
.sureBtn {
width: 100px;
height: 33px;
background: url('../assets/convertor/moduleEdit/sureBtn.png') no-repeat 100% 100%;
border: none;
}
.deleteBtn {
width: 100px;
height: 33px;
background: url('../assets/convertor/moduleEdit/deleteBtn.png') no-repeat 100% 100%;
border: none;
}
.cancelBtn {
width: 100px;
height: 33px;
background: url('../assets/convertor/moduleEdit/cancelBtn.png') no-repeat 100% 100%;
border: none;
}
} }
}
.editButton {
position: absolute;
bottom: 100px;
left: 50%;
}
} }
.amos-select-options{ .amos-select-options {
.selectOption{ .selectOption {
color:#fff; color: #fff;
background-color: rgba(10, 53, 62, 0.8); background-color: rgba(10, 53, 62, 0.8);
} }
.selectOption:hover{ .selectOption:hover {
color:#F0DF2D; color: #f0df2d;
background-color: rgba(10, 53, 62, 0.8) background-color: rgba(10, 53, 62, 0.8);
} }
} }
.pormpt-modal{ .pormpt-modal {
height:100%; height: 100%;
.amos-modal-container{ .amos-modal-container {
background-image: url('../assets/convertor/3dview/promptModal.png'); background-image: url('../assets/convertor/3dview/promptModal.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
height:253px; height: 253px;
width: 392px !important; width: 392px !important;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
.amos-modal-content{ .amos-modal-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
.prompt-content{ .prompt-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top:40px ; padding-top: 40px;
display:flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
.prompt-buttons{ .prompt-buttons {
span { span {
display: inline-block; display: inline-block;
width: 71px; width: 71px;
...@@ -305,24 +302,22 @@ ...@@ -305,24 +302,22 @@
margin: 0 10px; margin: 0 10px;
text-align: center; text-align: center;
} }
.promptOk{ .promptOk {
background: url('../assets/convertor/3dview/promptOk.png') no-repeat 100% 100%; background: url('../assets/convertor/3dview/promptOk.png') no-repeat 100% 100%;
} }
.promptNo { .promptNo {
background: url('../assets/convertor/3dview/promptNo.png') no-repeat 100% 100%; background: url('../assets/convertor/3dview/promptNo.png') no-repeat 100% 100%;
} }
.promptSave{ .promptSave {
background: url('../assets/convertor/3dview/promptSave.png') no-repeat 100% 100%; background: url('../assets/convertor/3dview/promptSave.png') no-repeat 100% 100%;
} }
.promptCancel{ .promptCancel {
background: url('../assets/convertor/3dview/promptCancel.png') no-repeat 100% 100%; background: url('../assets/convertor/3dview/promptCancel.png') no-repeat 100% 100%;
} }
} }
} }
} }
} }
} }
// .rayd-modal{ // .rayd-modal{
// background-color: rgba(25, 86, 147, 0.6) !important; // background-color: rgba(25, 86, 147, 0.6) !important;
......
mods/components/3dviewConvertor/view/moduleEditComponent/PointLeftTree.js
View file @ 6cafbc87
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
<<<<<<< HEAD
import { Connect,Tree,Select,Search,Button } from 'amos-framework';
=======
import { Connect, Tree, Select, Search, Button } from 'amos-framework'; import { Connect, Tree, Select, Search, Button } from 'amos-framework';
import imgStatic from '../../consts/imgStatic'; import imgStatic from '../../consts/imgStatic';
const moduleEditIcon = imgStatic.moduleEditIcon; const moduleEditIcon = imgStatic.moduleEditIcon;
>>>>>>> 65a1bc65d6a063bb28ef1709a82cec0df2fe3505
const eventConnect = Connect.eventConnect; const eventConnect = Connect.eventConnect;
const TreeNode = Tree.TreeNode; const TreeNode = Tree.TreeNode;
const Option = Select.Option; const Option = Select.Option;
...@@ -48,23 +44,14 @@ class PointLeftTree extends Component { ...@@ -48,23 +44,14 @@ class PointLeftTree extends Component {
} }
componentDidMount() { componentDidMount() {
<<<<<<< HEAD
let { treeData,pointTypeArr,treeDataList } = this.props;
=======
let { treeData, pointTypeArr, treeDataList } = this.props; let { treeData, pointTypeArr, treeDataList } = this.props;
>>>>>>> 65a1bc65d6a063bb28ef1709a82cec0df2fe3505
this.setState({ this.setState({
treeData, treeData,
treeDataList, treeDataList,
pointTypeArr, pointTypeArr,
<<<<<<< HEAD
pointType: pointTypeArr[0] ? pointTypeArr[0].code : ''
});
=======
pointType: pointTypeArr[0]?pointTypeArr[0].code:'' pointType: pointTypeArr[0]?pointTypeArr[0].code:''
}); });
// console.log(this.props) // console.log(this.props)
>>>>>>> 65a1bc65d6a063bb28ef1709a82cec0df2fe3505
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
...@@ -134,47 +121,6 @@ class PointLeftTree extends Component { ...@@ -134,47 +121,6 @@ class PointLeftTree extends Component {
); );
if (item.children) { if (item.children) {
return ( return (
<<<<<<< HEAD
<TreeNode
title={
<div>
{item.isRegion ?
<span>
{title}
<span className='icon'>
{
// eslint-disable-next-line jsx-a11y/alt-text
item.isRegion ? item.isBind ? <img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' /> :
// eslint-disable-next-line jsx-a11y/alt-text
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' /> :
// eslint-disable-next-line jsx-a11y/alt-text
item.isBind ? <img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/bindedTip.png' /> :
// eslint-disable-next-line jsx-a11y/alt-text
item.position3d ? <img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/noSaveTip.png' /> :
// eslint-disable-next-line jsx-a11y/alt-text
<img src='/mods/components/3dviewConvertor/assets/convertor/moduleEdit/nobindTip.png' />
}
</span>
</span> :
<span
draggable
onDragStart={() => {
this.props.dragItemChange(item);
}}
>
{title}
<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>
=======
<TreeNode <TreeNode
title={ title={
<div> <div>
...@@ -209,7 +155,6 @@ class PointLeftTree extends Component { ...@@ -209,7 +155,6 @@ class PointLeftTree extends Component {
</span> </span>
</span>} </span>}
</div> </div>
>>>>>>> 65a1bc65d6a063bb28ef1709a82cec0df2fe3505
} }
key={item.id} key={item.id}
dataRef={item} dataRef={item}
......
mods/components/3dviewConvertor/view/points/marker3DFactory.js
View file @ 6cafbc87
...@@ -15,10 +15,10 @@ const getIcon = (markerType, level) => { ...@@ -15,10 +15,10 @@ const getIcon = (markerType, level) => {
if (markerType === 'riskSource' || markerType === 'patrol' || markerType === 'impEquipmentMode') { if (markerType === 'riskSource' || markerType === 'patrol' || markerType === 'impEquipmentMode') {
return marker3DIoncMapper[`${markerType}_${level}`]; return marker3DIoncMapper[`${markerType}_${level}`];
} }
return marker3DIoncMapper[`${markerType}`] return marker3DIoncMapper[`${markerType}`];
}; };
const createMarkerLabel = (text) => { const createMarkerLabel = text => {
const div = document.createElement('div'); const div = document.createElement('div');
div.style.position = 'absolute'; div.style.position = 'absolute';
div.style.marginTop = '-3rem'; div.style.marginTop = '-3rem';
...@@ -27,18 +27,17 @@ const createMarkerLabel = (text) => { ...@@ -27,18 +27,17 @@ const createMarkerLabel = (text) => {
return div; return div;
}; };
const urlMapper = { const urlMapper = {
fireCar: { file: 'fire-car',label: '消防车'}, fireCar: { file: 'fire-car', label: '消防车' },
fireEquipment:{file: 'fireEquip',label: '消防车'}, fireEquipment: { file: 'fireEquip', label: '消防车' },
fireFoamRoom:{file: 'fireFoam',label: '泡沫间'}, fireFoamRoom: { file: 'fireFoam', label: '泡沫间' },
fireChamber:{file: 'fireChamber',label: '消防室'}, fireChamber: { file: 'fireChamber', label: '消防室' },
hydrant:{file: 'hydrant',label: '消防栓'}, hydrant: { file: 'hydrant', label: '消防栓' },
pool:{file: 'pool',label: '灭火水池'}, pool: { file: 'pool', label: '灭火水池' }
}; };
export default function marker3DFactory(WrappedComponent = 'div', options){ export default function marker3DFactory(WrappedComponent = 'div', options) {
const { markerType, markerParams } = options; const { markerType, markerParams } = options;
class MarkerPoints extends Component { class MarkerPoints extends Component {
static propTypes = { static propTypes = {
// marker 显隐 // marker 显隐
visible: PropTypes.bool, visible: PropTypes.bool,
...@@ -52,25 +51,25 @@ export default function marker3DFactory(WrappedComponent = 'div', options){ ...@@ -52,25 +51,25 @@ export default function marker3DFactory(WrappedComponent = 'div', options){
click: this.onMarkerClick, click: this.onMarkerClick,
// dblclick: this.onMarkerDblClick, // dblclick: this.onMarkerDblClick,
dragend: this.markerDragend, dragend: this.markerDragend,
mouseover: (marker) => { mouseover: marker => {
console.log('111') console.log('111');
if(marker.object2DPipe){ if (marker.object2DPipe) {
marker.object2DPipe.pipeNode.visible = true; marker.object2DPipe.pipeNode.visible = true;
marker.object2DPipe.pipeNode.elementVisible = true; marker.object2DPipe.pipeNode.elementVisible = true;
marker.object2DPipe.toggleDisplay(true); marker.object2DPipe.toggleDisplay(true);
} }
if(marker.extData.type === 'riskSource'){ if (marker.extData.type === 'riskSource') {
marker.baseObjHelper.title = marker.extData.name; marker.baseObjHelper.title = marker.extData.name;
marker.object2DPipe && marker.object2DPipe.toggleDisplay(true); marker.object2DPipe && marker.object2DPipe.toggleDisplay(true);
} }
}, },
mouseout: (marker) => { mouseout: marker => {
if(marker.object2DPipe){ if (marker.object2DPipe) {
marker.object2DPipe.pipeNode.visible = false; marker.object2DPipe.pipeNode.visible = false;
marker.object2DPipe.pipeNode.elementVisible = false; marker.object2DPipe.pipeNode.elementVisible = false;
marker.object2DPipe.toggleDisplay(false); marker.object2DPipe.toggleDisplay(false);
} }
if(marker.extData.type === 'riskSource'){ if (marker.extData.type === 'riskSource') {
marker.baseObjHelper.title = marker.extData.title; marker.baseObjHelper.title = marker.extData.title;
marker.object2DPipe.toggleDisplay(false); marker.object2DPipe.toggleDisplay(false);
} }
...@@ -83,41 +82,44 @@ export default function marker3DFactory(WrappedComponent = 'div', options){ ...@@ -83,41 +82,44 @@ export default function marker3DFactory(WrappedComponent = 'div', options){
componentWillMount = () => { componentWillMount = () => {
this.setState({ planStarted: this.props.planStarted }); this.setState({ planStarted: this.props.planStarted });
} };
componentWillReceiveProps = nextProps => { componentWillReceiveProps = nextProps => {
if(nextProps.isEditMode){ if (nextProps.isEditMode) {
this.markersCache.eachValue(obj=>{ this.markersCache.eachValue(obj => {
// this.setTopCardConf(obj, obj.extData); // this.setTopCardConf(obj, obj.extData);
if(nextProps.selectPoints.type == obj.extData.type && nextProps.selectPoints.id ==obj.extData.id ){ if (nextProps.selectPoints.type == obj.extData.type && nextProps.selectPoints.id == obj.extData.id) {
this.setTwinkleConf(obj); this.setTwinkleConf(obj);
} }
}); });
} }
this.setState({ planStarted: nextProps.planStarted }); this.setState({ planStarted: nextProps.planStarted });
} };
componentWillUnmount() { componentWillUnmount() {
this.objAnchorHelper && this.objAnchorHelper.destroy(); this.objAnchorHelper && this.objAnchorHelper.destroy();
} }
onMarkerDblClick = (marker, e) => { onMarkerDblClick = (marker, e) => {
console.log('marker3DFactory','onMarkerDblClick') console.log('marker3DFactory', 'onMarkerDblClick');
if (this.props.isEditMode) { if (this.props.isEditMode) {
return false return false;
} }
clearTimeout(this.time); clearTimeout(this.time);
// tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData }); // tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData });
if (marker.extData.markerType === 'fire' && void 0 !== marker.extData.show) { if (marker.extData.markerType === 'fire' && void 0 !== marker.extData.show) {
tirggerTransTopic(CONSTS.forward, { details: { type: 'impEquipment', dialogId: marker.extData.equipmentId, show: marker.extData.show }, dateTime: Date.now() }); tirggerTransTopic(CONSTS.forward, {
details: { type: 'impEquipment', dialogId: marker.extData.equipmentId, show: marker.extData.show },
dateTime: Date.now()
});
return; return;
} }
this.pdRef.tirggerBussines(marker); this.pdRef.tirggerBussines(marker);
} };
onMarkerClick = (marker, e) => { onMarkerClick = (marker, e) => {
const { isClick } = this.state; const { isClick } = this.state;
if (this.props.isEditMode) { if (this.props.isEditMode) {
return false return false;
} }
tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData }); tirggerPlanTopic(CONSTS.plan_detail, { type: marker.extData.type, data: marker.extData });
...@@ -125,7 +127,7 @@ export default function marker3DFactory(WrappedComponent = 'div', options){ ...@@ -125,7 +127,7 @@ export default function marker3DFactory(WrappedComponent = 'div', options){
this.setState({ isClick: false }); //将isClick 变成false，将不会执行处理事件 this.setState({ isClick: false }); //将isClick 变成false，将不会执行处理事件
// this.pdRef && this.pdRef.onOpenClick(marker); // this.pdRef && this.pdRef.onOpenClick(marker);
this.time = setTimeout(() => this.pdRef && this.pdRef.onOpenClick(marker), 1000); this.time = setTimeout(() => this.pdRef && this.pdRef.onOpenClick(marker), 1000);
}else{ } else {
this.onMarkerDblClick(marker, e); this.onMarkerDblClick(marker, e);
} }
const that = this; // 为定时器中的setState绑定this const that = this; // 为定时器中的setState绑定this
...@@ -133,50 +135,51 @@ export default function marker3DFactory(WrappedComponent = 'div', options){ ...@@ -133,50 +135,51 @@ export default function marker3DFactory(WrappedComponent = 'div', options){
// 设置延迟事件，3秒后将执行 // 设置延迟事件，3秒后将执行
that.setState({ isClick: true }); // 将isClick设置为true that.setState({ isClick: true }); // 将isClick设置为true
}, 1000); }, 1000);
} };
markerDragend = (marker, evt) => { markerDragend = (marker, evt) => {
if (marker){ if (marker) {
console.log(marker.position); console.log(marker.position);
console.log(marker.extData); console.log(marker.extData);
this.props.addMarker(marker); this.props.addMarker(marker);
} }
} };
markerCreated = ({ markersCache }) => { markerCreated = ({ markersCache }) => {
let { isEditMode,selectKey } =this.props; let { isEditMode, selectKey } = this.props;
this.markersCache = markersCache; this.markersCache = markersCache;
this.stagePilot = this.props.stagePilot; this.stagePilot = this.props.stagePilot;
this.outlineHelper = this.stagePilot ? this.stagePilot.outlineHelper : undefined; this.outlineHelper = this.stagePilot ? this.stagePilot.outlineHelper : undefined;
markersCache.eachValue(obj=>{ markersCache.eachValue(obj => {
this.setTopCardConf(obj, obj.extData); this.setTopCardConf(obj, obj.extData);
if(obj.extData.type === "riskSource" && markerType != 'impEquipmentMode' && !isEditMode){ if (obj.extData.type === 'riskSource' && markerType != 'impEquipmentMode' && !isEditMode) {
this.setTwinkleConf(obj); this.setTwinkleConf(obj);
} }
}); });
} };
setTwinkleConf = ( obj ) => { setTwinkleConf = obj => {
const { twinkle,frequency } = obj.extData; const { twinkle, frequency } = obj.extData;
let pulsePeriod = (twinkle && frequency != 0 ? 1 / frequency : null) let pulsePeriod = twinkle && frequency != 0 ? 1 / frequency : null;
let color = twinkle && frequency != 0 ? '#FF0000': null; let color = twinkle && frequency != 0 ? '#FF0000' : null;
if (!obj.baseObjHelper.outlineHelper){ if (!obj.baseObjHelper.outlineHelper) {
obj.baseObjHelper.setOutlineHelper(this.outlineHelper); obj.baseObjHelper.setOutlineHelper(this.outlineHelper);
} }
obj.baseObjHelper.style.outlineColor = color; obj.baseObjHelper.style.outlineColor = color;
pulsePeriod && obj.baseObjHelper.outlineHelper.setConfig({ pulsePeriod &&
pulsePeriod: pulsePeriod.toFixed(2) obj.baseObjHelper.outlineHelper.setConfig({
}); pulsePeriod: pulsePeriod.toFixed(2)
} });
};
setTopCardConf = (obj, extData )=>{ setTopCardConf = (obj, extData) => {
const { title, label , type, showInfo , name } = extData; const { title, label, type, showInfo, name } = extData;
let cardTitle = null; let cardTitle = null;
console.log(extData) console.log(extData);
obj.baseObjHelper.titleConfig = { obj.baseObjHelper.titleConfig = {
// 顶牌平面参数 // 顶牌平面参数
planeOptions: { planeOptions: {
width: 40, width: 40,
height: 20, height: 20,
position: [0,20,0], position: [0, 20, 0],
doubleSide: true doubleSide: true
}, },
canvasOptions: { canvasOptions: {
...@@ -190,34 +193,34 @@ export default function marker3DFactory(WrappedComponent = 'div', options){ ...@@ -190,34 +193,34 @@ export default function marker3DFactory(WrappedComponent = 'div', options){
imgHeight: 128, imgHeight: 128,
image: markerTitleBgMapper['base'] image: markerTitleBgMapper['base']
}; };
if(type === 'riskSource' && !this.props.isEditMode){ if (type === 'riskSource' && !this.props.isEditMode) {
cardTitle = '风险值' + title cardTitle = '风险值' + title;
}else{ } else {
cardTitle = name ? name : title; cardTitle = name ? name : title;
} }
obj.baseObjHelper.title = cardTitle; obj.baseObjHelper.title = cardTitle;
} };
buildMarkerOptions = (markers, markerType, defaultParams = {}) => { buildMarkerOptions = (markers, markerType, defaultParams = {}) => {
console.log(markers); console.log(markers);
const { isEditMode } = this.props; const { isEditMode } = this.props;
if (!utils.isEmpty(markers)){ if (!utils.isEmpty(markers)) {
markers.forEach(m => { markers.forEach(m => {
const url = getIcon(markerType, m.level); const url = getIcon(markerType, m.level);
let position; let position;
if (!utils.isArray(m.position)){ if (!utils.isArray(m.position)) {
position = Object.values(m.position); position = Object.values(m.position);
} }
for (let k of Object.keys(defaultParams)) { for (let k of Object.keys(defaultParams)) {
if ((markerType === 'riskSource' || markerType === 'patrol' ) && k !== 'useModel' && !isEditMode){ if ((markerType === 'riskSource' || markerType === 'patrol') && k !== 'useModel' && !isEditMode) {
m[k] = formatUrl(defaultParams[k], { url: `${markerType}-${m.level}` }); m[k] = formatUrl(defaultParams[k], { url: `${markerType}-${m.level}` });
} else if ((markerType === 'riskSource' || markerType === 'patrol' ) && k !== 'useModel' && isEditMode){ } else if ((markerType === 'riskSource' || markerType === 'patrol') && k !== 'useModel' && isEditMode) {
if (markerType === 'riskSource'){ if (markerType === 'riskSource') {
m[k] = formatUrl(defaultParams[k], { url: `${markerType}-4` }); m[k] = formatUrl(defaultParams[k], { url: `${markerType}-4` });
} else { } else {
m[k] = formatUrl(defaultParams[k], { url: `${markerType}-1` }); m[k] = formatUrl(defaultParams[k], { url: `${markerType}-1` });
} }
} else if (markerType === 'fireResource' && k !== 'useModel' && isEditMode && urlMapper[m.type]){ } else if (markerType === 'fireResource' && k !== 'useModel' && isEditMode && urlMapper[m.type]) {
m[k] = formatUrl(defaultParams[k], { url: `${urlMapper[m.type].file}` }); m[k] = formatUrl(defaultParams[k], { url: `${urlMapper[m.type].file}` });
} else { } else {
m[k] = defaultParams[k]; m[k] = defaultParams[k];
...@@ -236,21 +239,15 @@ export default function marker3DFactory(WrappedComponent = 'div', options){ ...@@ -236,21 +239,15 @@ export default function marker3DFactory(WrappedComponent = 'div', options){
}; };
render() { render() {
const { markers, isEditMode , ...rest } = this.props; const { markers, isEditMode, ...rest } = this.props;
const { planStarted } = this.state; const { planStarted } = this.state;
let dialogStyle = { zIndex: 1000 }; let dialogStyle = { zIndex: 1000 };
const result = this.buildMarkerOptions(markers, markerType, markerParams); const result = this.buildMarkerOptions(markers, markerType, markerParams);
return ( return (
<WrappedComponent> <WrappedComponent>
<Markers <Markers {...rest} draggable={isEditMode} markers={result} events={this.markerEvents} onCreated={this.markerCreated} />
{...rest} {!planStarted && <PointDialog style={dialogStyle} ref={node => (this.pdRef = node)} />}
draggable={isEditMode}
markers={result}
events={this.markerEvents}
onCreated={this.markerCreated}
/>
{ !planStarted && <PointDialog style={dialogStyle} ref={node => this.pdRef = node} />}
</WrappedComponent> </WrappedComponent>
); );
} }
......
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