/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2023-10-30 09:41:38
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @LastEditTime: 2023-11-02 18:26:04
|
* @FilePath: \hztSsim\mobile\src\components\cityData\index.jsx
|
* @Description: 地区分块
|
*/
|
import React, { useState } from 'react';
|
import { useHistory } from 'react-router-dom';
|
|
|
|
|
const CityData = ({ cityData, jump = false, onClick }) => {
|
const history = useHistory();
|
const maxStreets = 6; return (
|
|
<div>
|
{cityData.cityId ? (
|
<>
|
<div className='search-searchBar-grid'>
|
<div>{cityData.cityName}</div>
|
<div>{cityData.population}</div>
|
</div>
|
{cityData.districts.map((district, districtIndex) => {
|
if (district.districtId && district.streets.some(street => street.streetId)) {
|
return (
|
<div className='search-searchBar-grid-box' key={districtIndex}>
|
<div className='search-searchBar-grid-box-title' onClick={() => onClick('1', district.streetId)}>
|
<div>{district.districtName}</div>
|
<div>{district.districtPopulation}</div>
|
</div>
|
<div style={{ flex: 1 }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: '8px' }}>
|
{district.streets.slice(0, maxStreets).map((street, streetIndex) => {
|
if (street.streetId) {
|
return (
|
<div className='search-searchBar-grid-box-value' key={streetIndex}>
|
<div onClick={() => onClick('2', district.streetId)}>
|
<div>{street.streetName}</div>
|
<div>{street.streetPopulation}</div>
|
</div>
|
</div>
|
);
|
}
|
return null;
|
})}
|
</div>
|
</div>
|
</div>
|
);
|
}
|
return null;
|
})}
|
</>
|
) : (
|
<div>
|
{cityData.districts.map((district, districtIndex) => {
|
if (district.districtId && district.streets.some(street => street.streetId)) {
|
return (
|
<div className='search-searchBar-grid-box' key={districtIndex}>
|
<div className={'search-searchBar-grid-box-title'} onClick={() => history.push("/ssim/registeredPop/search")}>
|
<div>{district.districtName}</div>
|
<div>{district.districtPopulation}</div>
|
</div>
|
<div style={{ flex: 1 }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: '8px' }}>
|
{district.streets.map((street, streetIndex) => {
|
if (street.streetId) {
|
return (
|
<div className='search-searchBar-grid-box-value' key={streetIndex}>
|
<div>
|
<div>{street.streetName}</div>
|
<div>{street.streetPopulation}</div>
|
</div>
|
</div>
|
);
|
}
|
return null;
|
})}
|
</div>
|
</div>
|
</div>
|
);
|
}
|
return null;
|
})}
|
</div>
|
)}
|
</div>
|
)
|
|
};
|
|
export default CityData;
|
