import React from 'react';
|
import {Button, Card, Icon, Select} from "antd";
|
import MapComponent from './component/MapComponent'
|
import '../business/style/clientInfo.less'
|
import CrudViewBase from "../common/crud-view-base";
|
import {getClientOptions} from "../../api/business";
|
import {toOptionsData} from "../common/common_func";
|
import {getProjectOptions} from "../../api/projects";
|
import {planTypeMap} from "../common/constants";
|
import {getProjectStats} from "../../api/digital-map";
|
|
const {Option} = Select
|
|
class MapContainer extends CrudViewBase {
|
|
initListBody() {
|
return {
|
projectIds: null,
|
planType: null,
|
}
|
}
|
|
getEntityList(pageInfo, listBody) {
|
return getProjectStats(listBody)
|
}
|
|
getClientOptionsFunc() {
|
getClientOptions().then(res => {
|
if (res.data.status === 'OK') {
|
this.setState({
|
clientOptions: toOptionsData(res.data.data)
|
})
|
}
|
})
|
}
|
|
getProjectOptionsFunc(clientId) {
|
getProjectOptions(clientId).then(res => {
|
if (res.data.status === 'OK') {
|
this.setState({
|
projectOptions: toOptionsData(res.data.data)
|
})
|
|
let ids = res.data.data.map(item => item.code)
|
this.setState({
|
listBody: {
|
...this.state.listBody,
|
projectIds: ids
|
}
|
}, () => {
|
this.reloadEntities()
|
})
|
}
|
})
|
}
|
|
handleClientChange = (value) => {
|
this.setState({
|
clientId : value
|
})
|
this.getProjectOptionsFunc(value)
|
}
|
|
initView() {
|
this.getClientOptionsFunc()
|
}
|
|
buildTitle() {
|
return (
|
<div className="title flex">
|
<div>
|
<Select
|
style={{
|
width: 250,
|
}}
|
placeholder="委托方"
|
allowClear
|
onChange={this.handleClientChange}
|
>
|
{this.state.clientOptions && this.state.clientOptions.map((item, index) => (
|
<Option value={item.value} key={item.value}>{item.label}</Option>
|
))}
|
</Select>
|
|
|
<Select
|
style={{width: '350px', marginRight: '10px'}}
|
allowClear
|
mode="multiple"
|
placeholder="项目"
|
maxTagCount={1}
|
// labelInValue
|
value={this.state.listBody && this.state.listBody.projectIds || []}
|
onChange={
|
(value) => {
|
this.handleListBodyChange('projectIds', value)
|
}
|
}
|
>
|
{this.state.projectOptions && this.state.projectOptions.map((item, index) => (
|
<Option value={item.value} key={index}>{item.label}</Option>
|
))}
|
</Select>
|
|
|
<Select
|
style={{
|
width: 250,
|
}}
|
placeholder="计划类型"
|
allowClear
|
onChange={
|
(value) => {
|
this.handleListBodyChange('planType', value)
|
}
|
}
|
>
|
{planTypeMap.toOptionsWithTitleVal("计划类型", null).map((item, index) => (
|
<Option value={item.value} key={index}>{item.label}</Option>
|
))}
|
</Select>
|
</div>
|
|
<div className="right">
|
<Button type='primary' onClick={ console.log("press setting") }>
|
<div className="bolder">
|
<Icon type="setting" />
|
设置
|
</div>
|
</Button>
|
</div>
|
</div>
|
)
|
}
|
|
render() {
|
return (
|
<div>
|
<Card title={this.buildTitle()}>
|
<MapComponent
|
projectStats={this.state.entities}
|
></MapComponent>
|
</Card>
|
</div>
|
);
|
}
|
}
|
|
//导出地图组建类
|
export default MapContainer;
|