feature:市平台粤政易H5

xusd

7 days ago d27794814b69d18aeb8ee96a46cae91d5613570c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/*
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2023-03-31 10:59:35
 * @LastEditTime: 2023-04-01 14:35:01
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description: 
 */
import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { Space } from 'dingtalk-design-mobile';
import { DownArrow2Outlined } from "dd-icons";
import MyList from '../MyList';
import './index.less';
import { dateFormat, getUpdateStr, searchTitle } from '../../utils/utility';
import { CaretUpOutlined, CaretDownOutlined } from '../../assets/icon';
import routerStatus from '../../status/router';
 
const AnalysisList = ({ search, data, hasMore, getScrollTopKey, scrollTop, searchValue, getAnalysis }) => {
  const history = useHistory();
 
  // 加载更多数据
  function handleLoadMore(callback) {
    console.log('加载更多数据');
    getAnalysis({ ...search, page: search.page + 1 }, '', callback);
  }
 
  // 楼栋更新
  useEffect(() => {
    if (routerStatus.spinPage['analysis']) {
      getAnalysis({ ...search, page: 1, size: search.page * search.size }, 'spin');
      routerStatus.setPageScrollTopNow('analysis');
      routerStatus.clearSpinPage('analysis');
    }
  }, [routerStatus.spinPage['analysis']]);
 
  return (
    <>
      <div className='analysis-List-head'>
        <div className='analysis-List-head-col1'>序</div>
        <div style={{ width: '50px', padding: '4px' }}>辖区</div>
        <div className='analysis-List-head-col2' style={{ display: 'flex', alignItems: 'center' }}>
          <span className='analysis-List-head-orange'>人口</span>
          <div className='analysis-List-flex'>
            <img className='analysis-List-head-img1' src={CaretUpOutlined} alt="" />
            <img className='analysis-List-head-img2' src={CaretDownOutlined} alt="" />
          </div>
        </div>
        <div className='analysis-List-head-col2' style={{ display: 'flex', alignItems: 'center' }}>
          <span>户数</span>
          <div className='analysis-List-flex'>
            <img className='analysis-List-head-img1' src={CaretUpOutlined} alt="" />
            <img className='analysis-List-head-img2' src={CaretDownOutlined} alt="" />
          </div></div>
        <div className='analysis-List-head-col2' style={{ display: 'flex', alignItems: 'center' }}>
          <span className='analysis-List-head-blue'>楼栋</span>
          <div className='analysis-List-flex'>
            <img className='analysis-List-head-img1' src={CaretUpOutlined} alt="" />
            <img className='analysis-List-head-img2' src={CaretDownOutlined} alt="" />
          </div>
        </div>
        <div className='analysis-List-head-col2' style={{ display: 'flex', alignItems: 'center' }}>
          <span>房间</span>
          <div className='analysis-List-flex'>
            <img className='analysis-List-head-img1' src={CaretUpOutlined} alt="" />
            <img className='analysis-List-head-img2' src={CaretDownOutlined} alt="" />
          </div>
        </div>
      </div>
      {data.map((item, index) => {
        return (
          <div key={`analy${index}`} className='analysis-List-item' style={{ backgroundColor: index % 2 ? 'rgba(230, 228, 234, 0.64)' : '#fff' }}>
            <div className='analysis-List-item-col1'>{index + 1}</div>
            <div style={{ width: '50px', padding: '4px' }}>{'美兰区'}</div>
            <div className='analysis-List-item-col2'>
              <div className='analysis-List-head-orange analysis-List-head-small-size' style={{ paddingBottom: '2px' }}>694247</div>
              <div className='analysis-List-head-small-size'>当日<span className='analysis-List-head-orange'>+883</span></div>
            </div>
            <div className='analysis-List-item-col2'>
              <div className='analysis-List-head-small-size' style={{ paddingBottom: '2px' }}>694247</div>
              <div className='analysis-List-head-small-size'>当日+883</div>
            </div>
            <div className='analysis-List-item-col2'>
              <div className='analysis-List-head-blue analysis-List-head-small-size' style={{ paddingBottom: '2px' }}>694247</div>
              <div className='analysis-List-head-small-size'>当日<span className='analysis-List-head-blue'>+883</span></div>
            </div>
            <div className='analysis-List-item-col2'>
              <div className='analysis-List-head-small-size' style={{ paddingBottom: '2px' }}>694247</div>
              <div className='analysis-List-head-small-size'>当日+883</div>
            </div>
          </div>
        );
      })}
      {
        hasMore &&
        <div className='analysis-List-item-more' onClick={handleLoadMore}>
          <span>展开更多数据 <DownArrow2Outlined /></span>
        </div>
      }
    </>
  )
}
 
export default AnalysisList