新需求

src/components/SelectButton/BuildSelect.jsx

@@ -55,6 +55,7 @@ const BuildingSelect = props => {
       filterOption={(input, option) =>
         option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
       }>
+          <Option key="" value="">全部项目</Option>
           {data.map(building => (
             <Option key={building.buildingId} value={building.buildingId}>{building.buildingName}</Option>
           ))}

src/pages/statistical/building/index.jsx

@@ -5,6 +5,7 @@ import EChart from '../../../components/EchartsTest/EChart';
 import request from '../../../utils/request';
 import apis from '../../../services/apis';
 import StatsChart from './component/StatsChart';
+import BuildSelect from '../../../components/SelectButton/BuildSelect'
 import router from 'umi/router';
 
 
@@ -23,28 +24,28 @@ class buildingStats extends React.Component {
       tableData: [],
       userType: 'all',
       endDate: {},
-      startDate: {}
+      startDate: {},
+      buildingId: ''
     }
   }
 
   componentDidMount() {
     this.getBarData(moment().subtract(7, 'day').toDate(),new Date())
-    this.getTableData(moment().subtract(7, 'day').toDate(),new Date())
-    // this.setState({ endDate: new Date(), startDate: moment().subtract(7, 'day').toDate() })
+    this.getTableData(moment().subtract(7, 'day').toDate(),new Date(),this.state.buildingId)
+    this.setState({...this.state, endDate: new Date(), startDate: moment().subtract(7, 'day').toDate() })
     
   }
 
   // 获取图表数据
   getBarData = (startDate, endDate) => {
     request({ ...apis.stats.barList, params: { startDate, endDate } }).then((data) => {
-        console.log(data)
-        this.setState({barData: data})
+        this.setState({...this.state, barData: data})
       })
   }
 
   //获取表格数据
-  getTableData = (startDate, endDate) => {
-    console.log(startDate,endDate,"时间2")
+  getTableData = (startDate, endDate, buildingId) => {
+    console.log(startDate,endDate,buildingId,"时间2")
   }
 
   formatDate = (start, end) => {
@@ -53,72 +54,35 @@ class buildingStats extends React.Component {
     return { startDate: tempStartDate, endDate: tempEndDate }
   }
 
+  //时间选择器改变的时候
   onChangetime = (_dates, dateStrings) => {
     daterange[0] = `${moment(dateStrings[0]).format('YYYY-MM-DDT00:00:00.000')}Z`
     daterange[1] = `${moment(dateStrings[1]).format('YYYY-MM-DDT23:59:59.999')}Z`
   }
 
-  handleSubmit = (e, props) => {
-
-    e.preventDefault();
-
-  }
-
+  //切换三个标签页
   getDataOf = (days) => {
     this.getBarData(moment().subtract(days, 'day').toDate(),new Date())
-    // this.setState({ endDate: new Date(), startDate: moment().subtract(days, 'day').toDate() })
+    this.getTableData(moment().subtract(days, 'day').toDate(),new Date(),this.state.buildingId)
+    this.setState({ ...this.state, endDate: new Date(), startDate: moment().subtract(days, 'day').toDate() })
   }
 
+  //点击查询
   datalist = () => {
     this.getBarData(daterange[0] === '' ? moment().subtract(7, 'day').toDate() : daterange[0],daterange[1] === '' ? new Date() : daterange[1])
-    // this.setState({ 
-    //   endDate: daterange[1] === '' ? new Date() : daterange[1],
-    //   startDate: daterange[0] === '' ? moment().subtract(7, 'day').toDate() : daterange[0],
-    // })
-    
-  }
-
-  onSuccess = e => {
-    this.setState({ dataSoures: e }, () => {
-      this.onTabledatas(e)
-    })
-  }
-
-  onTabledatas = (e) => {
-    console.log('this.state.userType: ', this.state.userType)
-    e.tdWxDicts.map(x => {
-        columns = columns.filter(y => y.key != x.sceneType).concat({
-          title: x.sceneAlias,
-          dataIndex: x.sceneType,
-          key: x.sceneType,
-        })
+    this.getTableData(daterange[0] === '' ? moment().subtract(7, 'day').toDate() : daterange[0],daterange[1] === '' ? new Date() : daterange[1],this.state.buildingId)
+    this.setState({ 
+      ...this.state,
+      endDate: daterange[1] === '' ? new Date() : daterange[1],
+      startDate: daterange[0] === '' ? moment().subtract(7, 'day').toDate() : daterange[0],
     })
-    const data = (e.list || []).reduce((acc, item) => {
-      const { sceneType, fromNum, registeredNum, createTime } = item
-      const num = this.state.userType === 'registered' ? registeredNum : fromNum
-      acc[createTime] = { ...acc[createTime], ...item, [`${sceneType}`]: !num ? 0 : num }
-      return acc
-    }, {})
-
-    const dictData =  e.tdWxDicts.reduce((acc,item,index) => {
-      const { sceneType } = item
-      acc[sceneType] = 0
-      return acc
-    },{})
-
-    const tableData = Object.keys(data).map(k => data[k]).reduce((acc,item,index) => {
-      acc[index] = { ...dictData, ...item }
-      return acc
-    },[])
-
-    this.setState({ tableData })
-
+    
   }
-
-  handleSelectChange = (e) => {
-    this.setState({ userType: e }, () => {
-      this.onTabledatas(this.state.dataSoures)
-    })
+  
+  //切换楼盘信息
+  handleBuildingChange = (e) => {
+    this.getTableData(this.state.startDate,this.state.endDate,e)
+    this.setState({...this.state, buildingId: e})
   }
 
   render() {
@@ -159,10 +123,7 @@ class buildingStats extends React.Component {
             </Col>
         </Row>
          
-        <Select style={{ width: '180px' }} placeholder="所有用户" onChange={(e) => this.handleSelectChange(e)}>
-        <Option value='all'>所有用户</Option>
-        <Option value='registered'>注册用户</Option>
-        </Select>
+        <BuildSelect slot='action' onChange={(e => this.handleBuildingChange(e))} value={this.state.buildingId}></BuildSelect>
   
           {/* <Table style={{marginTop:'20px'}} dataSource={this.state.tableData} columns={columns} pagination={false} scroll={{ y: 500 }}></Table> */}
     </div>