/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-09-16 16:35:20
|
* @LastEditTime: 2023-05-04 17:58:07
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 楼栋列表 - 列表组件
|
*/
|
import React, { useEffect, useState } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Space, WingBlank } from 'dingtalk-design-mobile';
|
import MyList from '../MyList';
|
import { UpArrowOutlined } from 'dd-icons';
|
import { ax, dateFormat, getUpdateStr, searchTitle } from '../../utils/utility';
|
import { building_1, building_2, building_5, building_6, addressBlack } from '../../assets/img';
|
import routerStatus from '../../status/router';
|
import ModalLContent from '../../components/ModalLContent';
|
import './index.less';
|
|
// 标准地名地址数据
|
function getStandardAddressApi(submitData) {
|
return ax.request({ url: 'buildingInfo/dmBuidinfoList', type: 'get', data: submitData, service: 'reside' });
|
}
|
|
// 小区信息
|
function getVillageDataApi(submitData) {
|
return ax.request({ url: 'lhDm/getLhDmInfo', type: 'get', data: submitData, service: 'opus' });
|
}
|
|
const StandardAddresList = ({ search, tabs, data, hasMore, getScrollTopKey, scrollTop, searchValue, standardAddressData }) => {
|
const history = useHistory();
|
|
const [showData, setShowData] = useState({});
|
|
// 小区下面折叠的劳动列表
|
const [buildingList, setBuildingList] = useState({});
|
|
// 小区信息
|
const [villageData, setVillageData] = useState({ data: {}, visible: false });
|
|
// 加载更多数据
|
function handleLoadMore(callback) {
|
standardAddressData({ ...search, page: search.page + 1 }, '', callback);
|
}
|
|
// 获取标准地名地址下的楼栋
|
async function getStandardAddressData(submitData, id) {
|
global.setSpinning(true);
|
const res = await getStandardAddressApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
let list = [].concat(res.data || []);
|
setBuildingList({ ...buildingList, [id]: list });
|
}
|
}
|
|
// 获取小区信息
|
async function modalData(id) {
|
global.setSpinning(true);
|
const res = await getVillageDataApi({ dmAUid: id });
|
global.setSpinning(false);
|
if (res.type) {
|
let data = res.data || {};
|
console.log('data', data);
|
setVillageData({ data, visible: true });
|
}
|
}
|
|
// 楼栋更新
|
useEffect(() => {
|
if (routerStatus.spinPage['building']) {
|
setShowData({});
|
standardAddressData({ ...search, page: 1, size: search.page * search.size }, 'spin');
|
routerStatus.setPageScrollTopNow('building');
|
routerStatus.clearSpinPage('building');
|
}
|
}, [routerStatus.spinPage['building']]);
|
|
// 小区列表包含楼栋列表
|
function dom1(item, index) {
|
return (
|
<div style={{ backgroundColor: '#ffffff', borderRadius: '5px' }}>
|
<div
|
className={"building-card-bottom" + (showData[item.id] ? ' StandardAddresList-active' : '')}
|
style={index === 0 ? { marginTop: 0 } : null}
|
onClick={() => {
|
setShowData({ ...showData, [item.id]: showData[item.id] ? false : true });
|
let s = { ...search };
|
delete s.page;
|
delete s.size;
|
getStandardAddressData({ ...s, dmAUidHk: item.dmAUidHk }, item.id);
|
}}
|
>
|
<div className="building-card">
|
<div className='StandardAddresList-flex'>
|
<div className="public_body_text_style_bold StandardAddresList-title">
|
<span className='StandardAddresList-rusticate'>小区</span>
|
<span>{searchValue ? searchTitle(item.dmAUidHkName, searchValue) : item.dmAUidHkName}</span>
|
</div>
|
<div className='StandardAddresList-flex-r'>
|
<img className='StandardAddresList-flex-r-img' src={!showData[item.id] ? building_1 : building_2} alt="" />
|
</div>
|
</div>
|
<div className="StandardAddresList-address">
|
<div className="StandardAddresList-address-img">
|
<img className="StandardAddresList-address-img_1" src={addressBlack} alt="" />
|
</div>
|
<span>{item.address}</span>
|
</div>
|
<div className="building-subtitle">
|
<div className="building-subtitle-text">{item.buildNum || 0}楼栋</div>
|
<div className="public-split" />
|
<div className="building-subtitle-text">{item.roomcount || 0}房间</div>
|
<div className="public-split" />
|
<div className="building-subtitle-text">{item.familyCount || 0}分户</div>
|
<div className="public-split" />
|
<div className="building-subtitle-text">{item.personcount || 0}人口</div>
|
<div className="public-split" />
|
<div className="building-subtitle-text">{item.updateTime ? `${dateFormat(item.updateTime)}更新` : '-'}</div>
|
</div>
|
<Space>
|
{getUpdateStr(item.updateTime) ? <div className="public-tag2">{getUpdateStr(item.updateTime)}</div> : null}
|
<div className="public-tag2">{item.communityName + item.gridNum}</div>
|
</Space>
|
</div>
|
</div>
|
{
|
showData[item.id] && buildingList[item.id] &&
|
<div className='StandardAddresList-top-flex' >
|
<Space style={{ '--gap': '24px' }}>
|
<div className='StandardAddresList-top-flex-1' onClick={() => modalData(item.dmAUidHk)}>
|
<div className='StandardAddresList-top-flex-img'>
|
<img src={building_5} alt="" />
|
</div>
|
<div className='building-tip-title'>小区信息</div>
|
</div>
|
<div className='StandardAddresList-top-flex-1'>
|
<div className='StandardAddresList-top-flex-img'>
|
<img src={building_6} alt="" />
|
</div>
|
<div className='building-tip-title' onClick={() => { history.push(`/hztGrid/building/form?gridCode=${search.gridCode}&dmAUid=${item.dmAUidHk}&dmAUidHkName=${item.dmAUidHkName}`); }}>添加楼栋</div>
|
</div>
|
</Space>
|
</div>
|
}
|
{
|
showData[item.id] && buildingList[item.id]?.map((item, index) => (
|
<div
|
// className="building-card-bottom"
|
key={index}
|
style={index === 0 ? { marginTop: '2px', padding: '8px' } : { borderTop: '0.5px solid rgba(126,134,142,0.16)', padding: '8px 0', margin: '0 8px' }}
|
onClick={() => history.push(`/hztGrid/room?id=${item.id}&address=${item.address}&gridCode=${item.gridCode}`)}
|
>
|
<div>
|
<div className="building-title">
|
<span>{searchValue ? searchTitle(item.address, searchValue) : item.address}</span>
|
</div>
|
<div className="building-subtitle">
|
<div className="building-subtitle-text">{item.roomcount || 0}房间</div>
|
<div className="public-split" />
|
<div className="building-subtitle-text">{item.familyCount || 0}分户</div>
|
<div className="public-split" />
|
<div className="building-subtitle-text">{item.personcount || 0}人口</div>
|
<div className="public-split" />
|
<div className="building-subtitle-text">{item.updateTime ? `${dateFormat(item.updateTime)}更新` : '-'}</div>
|
</div>
|
<Space >
|
{getUpdateStr(item.updateTime) ? <div className="public-tag2">{getUpdateStr(item.updateTime)}</div> : null}
|
<div className="public-tag2">{item.communityName + item.gridNum}</div>
|
</Space>
|
</div>
|
</div>
|
))
|
}
|
{
|
showData[item.id] && buildingList[item.id] &&
|
< div onClick={() => {
|
setShowData({ ...showData, [item.id]: showData[item.id] ? false : true });
|
let s = { ...search };
|
delete s.page;
|
delete s.size;
|
getStandardAddressData({ ...s, dmAUidHk: item.dmAUidHk }, item.id);
|
}} className='StandardAddresList-bottom-l' >折叠该小区的全部楼栋 <UpArrowOutlined /></div>
|
}
|
<ModalLContent
|
visible={villageData.visible}
|
height={'88%'}
|
centerMaxHeight={'540px'}
|
headStyle={{ textAlign: 'center' }}
|
title={"小区信息"}
|
zIndex={990}
|
onOk={false}
|
top={'80px'}
|
footBackground={false}
|
visibleOnClick={(type, visible) => setVillageData({ ...villageData, visible: false })}
|
buttonTitle='我知道了'
|
content={
|
<div className='StandardAddresList-form-head' style={{ backgroundColor: '#f2f2f2' }}>
|
<div className="StandardAddresList-form-head-row">
|
<div className="StandardAddresList-form-head-col">
|
<div className="StandardAddresList-form-head-col-top">类型</div>
|
<div className="StandardAddresList-form-head-col-bottom">{villageData.data.typeName || '-'}</div>
|
</div>
|
</div>
|
<div className="StandardAddresList-form-head-row">
|
<div className="StandardAddresList-form-head-col">
|
<div className="StandardAddresList-form-head-col-top">小区名称</div>
|
<div className="StandardAddresList-form-head-col-bottom">{villageData.data?.lhDmAName || '-'}</div>
|
</div>
|
</div>
|
<div className="StandardAddresList-form-head-row">
|
<div className="StandardAddresList-form-head-col">
|
<div className="StandardAddresList-form-head-col-top">小区地址</div>
|
<div className="StandardAddresList-form-head-col-bottom">{villageData.data.address || '-'}</div>
|
</div>
|
</div>
|
<div className="StandardAddresList-form-head-row">
|
<div className="StandardAddresList-form-head-col">
|
<div className="StandardAddresList-form-head-col-top">物业公司名称</div>
|
<div className="StandardAddresList-form-head-col-bottom">{villageData.data.wygsmc || '-'}</div>
|
</div>
|
</div>
|
<div className="StandardAddresList-form-head-row">
|
<div className="StandardAddresList-form-head-col">
|
<div className="StandardAddresList-form-head-col-top">物业联系人</div>
|
<div className="StandardAddresList-form-head-col-bottom">{villageData.data.contact || '-'}</div>
|
</div>
|
</div>
|
<div className="StandardAddresList-form-head-row">
|
<div className="StandardAddresList-form-head-col">
|
<div className="StandardAddresList-form-head-col-top">楼栋总数</div>
|
<div className="StandardAddresList-form-head-col-bottom">{item.buildNum || 0}楼栋</div>
|
</div>
|
</div>
|
<div className="StandardAddresList-form-head-row">
|
<div className="StandardAddresList-form-head-col">
|
<div className="StandardAddresList-form-head-col-top">房间总数</div>
|
<div className="StandardAddresList-form-head-col-bottom">{item.roomcount || 0}房间</div>
|
</div>
|
</div>
|
<div className="StandardAddresList-form-head-row">
|
<div className="StandardAddresList-form-head-col">
|
<div className="StandardAddresList-form-head-col-top">分户总数</div>
|
<div className="StandardAddresList-form-head-col-bottom">{item.familyCount || 0}分户</div>
|
</div>
|
</div>
|
<div className="StandardAddresList-form-head-row">
|
<div className="StandardAddresList-form-head-col">
|
<div className="StandardAddresList-form-head-col-top">人口总数</div>
|
<div className="StandardAddresList-form-head-col-bottom">{item.personcount || 0}人口</div>
|
</div>
|
</div>
|
</div>
|
} />
|
</div >
|
)
|
}
|
|
// 纯楼栋列表
|
function dom2(item, index) {
|
return (
|
<div
|
className="building-card-bottom"
|
style={index === 0 ? { marginTop: 0 } : null}
|
onClick={() => history.push(`/hztGrid/room?id=${item.id}&address=${item.address}&gridCode=${item.gridCode}`)}
|
>
|
<div className="building-card">
|
<div className="building-title">
|
{item.taskTagList?.map((x, t) => (
|
<span key={t} className={`public-tag public-tag-${x === '21_00016-1' ? 'blue' : x === '21_00016-2' ? 'red' : 'green'}`}>
|
{x === '21_00016-1' ? '待排查' : x === '21_00016-2' ? '待核实' : '地址未同步'}
|
</span>
|
))}
|
<span>{searchValue ? searchTitle(item.address, searchValue) : item.address}</span>
|
</div>
|
<div className="building-subtitle">
|
<div className="building-subtitle-text">{item.roomcount || 0}房间</div>
|
<div className="public-split" />
|
<div className="building-subtitle-text">{item.familyCount || 0}分户</div>
|
<div className="public-split" />
|
<div className="building-subtitle-text">{item.personcount || 0}人口</div>
|
<div className="public-split" />
|
<div className="building-subtitle-text">{item.updateTime ? `${dateFormat(item.updateTime)}更新` : '-'}</div>
|
</div>
|
<Space>
|
{getUpdateStr(item.updateTime) ? <div className="public-tag2">{getUpdateStr(item.updateTime)}</div> : null}
|
<div className="public-tag2">{item.communityName + item.gridNum}</div>
|
</Space>
|
</div>
|
</div>
|
)
|
}
|
|
return (
|
<MyList
|
data={data}
|
hasMore={hasMore}
|
loadMore={handleLoadMore}
|
getScrollTopKey={getScrollTopKey}
|
scrollTop={scrollTop}
|
itemDom={(item, index) => {
|
return (
|
item.isDm ? dom1(item, index) : dom2(item, index)
|
);
|
}}
|
/>
|
);
|
};
|
|
export default StandardAddresList;
|
