bug fix

src/pages/statistical/building/component/StatsChart.jsx

@@ -13,50 +13,50 @@ class StatsChart extends React.Component {
   }
 
   render() {
-    const { data = {}} = this.props
+    const { data = {} } = this.props
     const options = {
       title: {
         text: this.props.title,
         subtext: this.props.subtext,
-    },
-    xAxis: {
+      },
+      xAxis: {
         type: 'category',
-        axisLabel: {rotate: 45},
+        axisLabel: { rotate: 45 },
         data: data.buildingNameList || []
-    },
-    grid: {
-      bottom:'30%'
-    },  
-    tooltip: {},
-    yAxis: {
+      },
+      grid: {
+        bottom: '30%'
+      },
+      tooltip: {},
+      yAxis: {
         type: 'value'
-    },
-    series: {
-      type: 'bar',
-      name: this.props.title,
-      barWidth: 50,
-      data: data.numList || [],
-      itemStyle: {
-        normal: {
-          barBorderRadius: [50, 50, 0, 0],
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: '#FD8A95'
-          }, {
-            offset: 1,
-            color: '#F13043'
-          }]),
-          shadowColor: 'rgba(0, 0, 0, 0.4)',
+      },
+      series: {
+        type: 'bar',
+        name: this.props.title,
+        barWidth: 50,
+        data: data.numList || [],
+        itemStyle: {
+          normal: {
+            barBorderRadius: [50, 50, 0, 0],
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: '#FD8A95'
+            }, {
+              offset: 1,
+              color: '#F13043'
+            }]),
+            shadowColor: 'rgba(0, 0, 0, 0.4)',
 
+          }
         }
       }
     }
-}
 
     return (
-    <>
-      <EChart options={options} style={{ width: '100%', height: '400px', }} />
-    </>
+      <>
+        <EChart options={options} style={{ width: '100%', height: '400px', padding: '0.09rem 0 0 0.09rem', boxShadow: '0px 0px 16px 2px rgba(0, 0, 0, 0.12)', marginBottom: '0.16rem', borderRadius: '12px' }} />
+      </>
     )
   }
 }

src/pages/statistical/building/index.jsx

@@ -32,24 +32,24 @@ class buildingStats extends React.Component {
   }
 
   componentDidMount() {
-    this.getBarData(moment().subtract(7, 'day').toDate(),new Date())
-    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() })
-    
+    this.getBarData(moment().subtract(7, 'day').toDate(), new Date())
+    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) => {
-        this.setState({...this.state, barData: data})
-      })
+      this.setState({ ...this.state, barData: data })
+    })
   }
 
   //获取表格数据
-  getTableData = (startDate, endDate, buildingId,pageNum,pageSize,sortField,sortOrder) => {
-    request({ ...apis.stats.tableList, params: { startDate, endDate, buildingId,pageNum,pageSize,sortField,sortOrder } }).then((data) => {
-        this.setState({...this.state, tableData: data.records, total: data.total})
-      })
+  getTableData = (startDate, endDate, buildingId, pageNum, pageSize, sortField, sortOrder) => {
+    request({ ...apis.stats.tableList, params: { startDate, endDate, buildingId, pageNum, pageSize, sortField, sortOrder } }).then((data) => {
+      this.setState({ ...this.state, tableData: data.records, total: data.total })
+    })
   }
 
   formatDate = (start, end) => {
@@ -66,33 +66,33 @@ class buildingStats extends React.Component {
 
   //切换三个标签页
   getDataOf = (days) => {
-    this.getBarData(moment().subtract(days, 'day').toDate(),new Date())
-    this.getTableData(moment().subtract(days, 'day').toDate(),new Date(),this.state.buildingId)
+    this.getBarData(moment().subtract(days, 'day').toDate(), new Date())
+    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] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0],daterange[1] === undefined ? new Date() : daterange[1])
-    this.getTableData(daterange[0] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0],daterange[1] === undefined ? new Date() : daterange[1],this.state.buildingId)
-    this.setState({ 
+    this.getBarData(daterange[0] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0], daterange[1] === undefined ? new Date() : daterange[1])
+    this.getTableData(daterange[0] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0], daterange[1] === undefined ? new Date() : daterange[1], this.state.buildingId)
+    this.setState({
       ...this.state,
       endDate: daterange[1] === undefined ? new Date() : daterange[1],
       startDate: daterange[0] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0],
     })
-    
+
   }
-  
+
   //切换楼盘信息
   handleBuildingChange = (e) => {
-    this.getTableData(this.state.startDate,this.state.endDate,e)
-    this.setState({...this.state, buildingId: e})
+    this.getTableData(this.state.startDate, this.state.endDate, e)
+    this.setState({ ...this.state, buildingId: e })
   }
 
   //排序
   handleTableChange = (pagination, filters, sorter) => {
     console.log(pagination, filters, sorter)
-    this.getTableData(this.state.startDate,this.state.endDate,this.state.buildingId,pagination.current,10,sorter.columnKey,sorter.order)
+    this.getTableData(this.state.startDate, this.state.endDate, this.state.buildingId, pagination.current, 10, sorter.columnKey, sorter.order)
   };
 
   //导出
@@ -127,52 +127,52 @@ class buildingStats extends React.Component {
 
   render() {
     const columns = [
-        {
-          title: '项目名称',
-          dataIndex: 'buildingName',
-          key: 'buildingName',
-        },
-        {
-          title: '新增客户',
-          dataIndex: 'khNum',
-          key: 'kh_num',
-          sorter: true,
-        },
-        {
-          title: '公客',
-          dataIndex: 'gkNum',
-          key: 'gk_num',
-          sorter: true,
-        },
-        {
-          title: '私客',
-          dataIndex: 'skNum',
-          key: 'sk_num',
-          sorter: true,
-        },
-        {
-            title: '访问人数',
-            dataIndex: 'uvNum',
-            key: 'uv_num',
-            sorter: true,
-        },
-        {
-            title: '访问次数',
-            dataIndex: 'pvNum',
-            key: 'pv_num',
-            sorter: true,
-        },
-        {
-            title: '详情',
-            render: (_, record) => (
-                    <Button type="link" style={{ color: 'red' }} onClick={() => this.toDetailPage(record)}>查看详情</Button>
-                ),
-        },
-      ];
+      {
+        title: '项目名称',
+        dataIndex: 'buildingName',
+        key: 'buildingName',
+      },
+      {
+        title: '新增客户',
+        dataIndex: 'khNum',
+        key: 'kh_num',
+        sorter: true,
+      },
+      {
+        title: '公客',
+        dataIndex: 'gkNum',
+        key: 'gk_num',
+        sorter: true,
+      },
+      {
+        title: '私客',
+        dataIndex: 'skNum',
+        key: 'sk_num',
+        sorter: true,
+      },
+      {
+        title: '访问人数',
+        dataIndex: 'uvNum',
+        key: 'uv_num',
+        sorter: true,
+      },
+      {
+        title: '访问次数',
+        dataIndex: 'pvNum',
+        key: 'pv_num',
+        sorter: true,
+      },
+      {
+        title: '详情',
+        render: (_, record) => (
+          <Button type="link" style={{ color: 'red' }} onClick={() => this.toDetailPage(record)}>查看详情</Button>
+        ),
+      },
+    ];
 
     return (
-    <div>
-      <Radio.Group buttonStyle="solid" defaultValue="a">
+      <div>
+        <Radio.Group buttonStyle="solid" defaultValue="a">
           <Radio.Button value="c" onClick={() => this.getDataOf(0)}>今日</Radio.Button>
           <Radio.Button value="a" onClick={() => this.getDataOf(7)}>最近7天</Radio.Button>
           <Radio.Button value="b" onClick={() => this.getDataOf(30)}>最近1月</Radio.Button>
@@ -189,38 +189,38 @@ class buildingStats extends React.Component {
           查询
         </Button>
         <Button type="danger" onClick={() => router.go(-1)} style={{ marginBottom: '18px', marginLeft: '30px' }}>重置</Button>
-
+        <div style={{fontSize:'0.09rem',color:'#999',marginBottom:'0.16rem'}}>最多显示6个项目，其他项目请在下方详细数据中搜索</div>
         <Row>
-            <Col span={12}>
-                <StatsChart title="项目公客排行" data={this.state.barData.gkBarMap} />
-            </Col>
-            <Col span={12}>
-                <StatsChart title="项目私客排行" data={this.state.barData.skBarMap} />
-            </Col>
+          <Col span={12} style={{paddingRight:'0.08rem'}}>
+            <StatsChart title="项目公客排行" data={this.state.barData.gkBarMap} />
+          </Col>
+          <Col span={12}style={{paddingLeft:'0.08rem'}}>
+            <StatsChart title="项目私客排行" data={this.state.barData.skBarMap} />
+          </Col>
         </Row>
         <Row>
-            <Col span={12}>
-                <StatsChart title="项目访问人数排行" subtext="项目详情访问情况" data={this.state.barData.wgBarMap} />
-            </Col>
-            <Col span={12}>
-                <StatsChart title="项目访问次数排行" subtext="项目详情访问情况,与上方时间筛选无关" data={this.state.barData.fwBarMap} />
-            </Col>
+          <Col span={12} style={{paddingRight:'0.08rem'}}>
+            <StatsChart title="项目访问人数排行" subtext="项目详情访问情况" data={this.state.barData.wgBarMap} />
+          </Col>
+          <Col span={12} style={{paddingLeft:'0.08rem'}}>
+            <StatsChart title="项目访问次数排行" subtext="项目详情访问情况,与上方时间筛选无关" data={this.state.barData.fwBarMap} />
+          </Col>
         </Row>
         <Row>
-            <Col span={22}>
-              <span style={{marginRight: '10px'}} >详细数据</span>
-              <BuildSelect slot='action' onChange={(e => this.handleBuildingChange(e))} value={this.state.buildingId}></BuildSelect>
-            </Col>
-            <Col span={2}>
+          <Col span={22}>
+            <span style={{ marginRight: '10px' }} >详细数据</span>
+            <BuildSelect slot='action' onChange={(e => this.handleBuildingChange(e))} value={this.state.buildingId}></BuildSelect>
+          </Col>
+          <Col span={2}>
             <AuthButton name="admin.statistical.building.export" noRight={null}>
               <Button type="primary" onClick={this.exportBuildingStats}>导出</Button>
             </AuthButton>
-            </Col>
+          </Col>
         </Row>
-        
-        
-        <Table style={{marginTop:'20px'}} dataSource={this.state.tableData} columns={columns} pagination={{ total: this.state.total}} onChange={this.handleTableChange} scroll={{ y: 500 }}></Table>
-    </div>
+
+
+        <Table style={{ marginTop: '20px' }} dataSource={this.state.tableData} columns={columns} pagination={{ total: this.state.total }} onChange={this.handleTableChange} scroll={{ y: 500 }}></Table>
+      </div>
     )
   }
 }