|
@ -12,7 +12,7 @@ const Search = Input.Search; |
|
|
const TreeNode = Tree.TreeNode; |
|
|
const TreeNode = Tree.TreeNode; |
|
|
import StationSpot from '../../components/pointDeploy/station-spot'; |
|
|
import StationSpot from '../../components/pointDeploy/station-spot'; |
|
|
import './deploy-style.less'; |
|
|
import './deploy-style.less'; |
|
|
import { getProjectGraph, deleteGraph, getDeployPoints, setDeployPoints } from '../../actions/graph'; |
|
|
import { getProjectGraph, deleteGraph, getProjectPoints, getDeployPoints, setDeployPoints } from '../../actions/graph'; |
|
|
import UploadImgModal from './upload-img-modal'; |
|
|
import UploadImgModal from './upload-img-modal'; |
|
|
import PerfectScrollbar from 'perfect-scrollbar'; |
|
|
import PerfectScrollbar from 'perfect-scrollbar'; |
|
|
|
|
|
|
|
@ -39,6 +39,7 @@ class ConfigPlanarGraph extends Component { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
componentDidMount() { |
|
|
componentDidMount() { |
|
|
|
|
|
this.props.dispatch(getProjectPoints(this.projectId));//获取所有点位列表
|
|
|
this.getData(); |
|
|
this.getData(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -48,27 +49,26 @@ class ConfigPlanarGraph extends Component { |
|
|
let graph = _.payload.data; |
|
|
let graph = _.payload.data; |
|
|
if (graph) {//有图片
|
|
|
if (graph) {//有图片
|
|
|
this.props.dispatch(getDeployPoints(graph.id));//获取平面图点位分布
|
|
|
this.props.dispatch(getDeployPoints(graph.id));//获取平面图点位分布
|
|
|
} else { |
|
|
|
|
|
this.setSpotsState([]); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps) { |
|
|
componentWillReceiveProps(nextProps) { |
|
|
const { projectDeployPoints } = nextProps; |
|
|
const { allPoints, projectDeployPoints } = nextProps; |
|
|
if (projectDeployPoints && projectDeployPoints != this.props.projectDeployPoints) { |
|
|
if (projectDeployPoints && projectDeployPoints != this.props.projectDeployPoints) { |
|
|
this.setSpotsState(projectDeployPoints); |
|
|
this.setSpotsState(allPoints, projectDeployPoints); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setSpotsState = (projectDeployPoints) => { |
|
|
setSpotsState = (allPoints, projectDeployPoints) => { |
|
|
|
|
|
const { searchValue } = this.state; |
|
|
let deployedSpotsMap = new Map(); |
|
|
let deployedSpotsMap = new Map(); |
|
|
projectDeployPoints.setedPoints?.forEach(s => { |
|
|
projectDeployPoints?.forEach(s => { |
|
|
deployedSpotsMap.set(s.pointId, s); |
|
|
deployedSpotsMap.set(s.pointId, s); |
|
|
}); |
|
|
}); |
|
|
let tempData = []; |
|
|
let tempData = []; |
|
|
projectDeployPoints.allPoints?.map(m => { |
|
|
allPoints?.map(m => { |
|
|
let x = null, y = null, screenH = null, screenW = null; |
|
|
let x = null, y = null, screenH = null, screenW = null; |
|
|
let deployed = false; |
|
|
let deployed = false; |
|
|
let station = deployedSpotsMap.get(m.id); |
|
|
let station = deployedSpotsMap.get(m.id); |
|
@ -92,9 +92,15 @@ class ConfigPlanarGraph extends Component { |
|
|
deployed: deployed, |
|
|
deployed: deployed, |
|
|
}) |
|
|
}) |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
let searchSpots = tempData; |
|
|
|
|
|
if (searchValue.trim().length > 0) { |
|
|
|
|
|
searchSpots = tempData.filter(s => s.location.indexOf(searchValue) >= 0); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
this.setState({ |
|
|
this.setState({ |
|
|
spots: tempData, |
|
|
spots: tempData, |
|
|
filteredSpots: tempData, |
|
|
filteredSpots: searchSpots, |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -296,7 +302,7 @@ class ConfigPlanarGraph extends Component { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
render() { |
|
|
render() { |
|
|
const { pictureInfo, clientHeight, clientWidth } = this.props; |
|
|
const { pictureInfo, clientHeight, clientWidth, allPoints } = this.props; |
|
|
const { deployState, spots, filteredSpots, dataHasChanged } = this.state; |
|
|
const { deployState, spots, filteredSpots, dataHasChanged } = this.state; |
|
|
const treeDataSource = this.formatTreeSource(filteredSpots); |
|
|
const treeDataSource = this.formatTreeSource(filteredSpots); |
|
|
let h = clientHeight / 1.3; |
|
|
let h = clientHeight / 1.3; |
|
@ -336,7 +342,7 @@ class ConfigPlanarGraph extends Component { |
|
|
onRemoveSpot={this.onRemoveSpot} |
|
|
onRemoveSpot={this.onRemoveSpot} |
|
|
onDeploySpot={this.onDeploySpot} |
|
|
onDeploySpot={this.onDeploySpot} |
|
|
/> |
|
|
/> |
|
|
: <div style={{ border: '1px dashed #999', width: w, height: h, paddingTop: clientHeight * 0.4, textAlign: 'center' }}> |
|
|
: <div style={{ border: '1px dashed #999', width: w, height: h, paddingTop: h * 0.45, textAlign: 'center' }}> |
|
|
暂无热点图 |
|
|
暂无热点图 |
|
|
</div> |
|
|
</div> |
|
|
} |
|
|
} |
|
@ -351,6 +357,7 @@ class ConfigPlanarGraph extends Component { |
|
|
onConfirm={() => { |
|
|
onConfirm={() => { |
|
|
this.props.dispatch(deleteGraph(pictureInfo.id)).then(_ => { |
|
|
this.props.dispatch(deleteGraph(pictureInfo.id)).then(_ => { |
|
|
this.getData(); |
|
|
this.getData(); |
|
|
|
|
|
this.setSpotsState(allPoints, []) |
|
|
}) |
|
|
}) |
|
|
}}> |
|
|
}}> |
|
|
<Button className='graph-cfg-btn'>删除图片</Button> |
|
|
<Button className='graph-cfg-btn'>删除图片</Button> |
|
@ -372,12 +379,13 @@ class ConfigPlanarGraph extends Component { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
function mapStateToProps(state) { |
|
|
function mapStateToProps(state) { |
|
|
const { global, projectGraph, projectDeployPoints } = state; |
|
|
const { global, projectGraph, projectDeployPoints, projectAllPoints } = state; |
|
|
return { |
|
|
return { |
|
|
pictureInfo: projectGraph.data, |
|
|
pictureInfo: projectGraph.data, |
|
|
projectDeployPoints: projectDeployPoints.data, |
|
|
projectDeployPoints: projectDeployPoints?.data || [], |
|
|
clientHeight: global.clientHeight, |
|
|
clientHeight: global.clientHeight, |
|
|
clientWidth: global.clientWidth |
|
|
clientWidth: global.clientWidth, |
|
|
|
|
|
allPoints: projectAllPoints?.data || [] |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|