89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import { BarChartOutlined } from "@ant-design/icons";
|
|
import { Table } from "antd";
|
|
import {useSelector, useDispatch} from "react-redux";
|
|
import { title } from "process";
|
|
import { stringify } from "querystring";
|
|
import React, {useEffect, useState} from "react";
|
|
import { dxzhsjlist } from "../http/rightHtpp";
|
|
import PubTable from "./components/pubTable";
|
|
import "./rightContent.less"
|
|
|
|
|
|
type IProps = {
|
|
key?: number;
|
|
rightKeys?:string;
|
|
}
|
|
|
|
const TypicalDisasterEvents:React.FC<IProps>= (props:IProps) => {
|
|
const dispatch = useDispatch();
|
|
const [data,setData] = useState()
|
|
const getList = async()=>{
|
|
const res = await dxzhsjlist()
|
|
setData(res.data)
|
|
}
|
|
const columns = [
|
|
{
|
|
title: '序号',
|
|
render:(text:string,record:object,index:number)=>`${index+1}`,
|
|
align:'center' as const,
|
|
},
|
|
{
|
|
title: '灾害发生时间',
|
|
dataIndex: 'otime',
|
|
key: 'otime',
|
|
align:'center' as const,
|
|
|
|
},
|
|
{
|
|
title: '灾害发生地点',
|
|
dataIndex: 'address',
|
|
key: 'address',
|
|
align:'center' as const,
|
|
|
|
},
|
|
];
|
|
useEffect(()=>{
|
|
getList()
|
|
|
|
dispatch.map.setLayerVisible({'DXZHSJLayer': true});
|
|
dispatch.map.setLayerVisible({'ShuiKuLayer': false});
|
|
return ()=>{
|
|
dispatch.runtime.closeFeaturePopAll()
|
|
dispatch.map.setLayerVisible({'DXZHSJLayer': false});
|
|
dispatch.map.setLayerVisible({'ShuiKuLayer': true});
|
|
}
|
|
},[])
|
|
|
|
|
|
const flyToAdcd = (record:any) => {
|
|
dispatch.map.setLayerVisible({"DXZHSJLayer": true});
|
|
|
|
const { lgtd, lttd, elev, adcd } = record;
|
|
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setFeaturePop({ type: 'dianxingzaihaishijian', data: record, lgtd: record.lgtd, lttd: record.lttd, });
|
|
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd, elev],
|
|
zoom: 12.2,
|
|
pitch: 60,
|
|
});
|
|
}
|
|
};
|
|
return(
|
|
<>
|
|
<div className='rightContent'>
|
|
<div className='title flex flexac'>
|
|
<BarChartOutlined style={{fontSize:'14px',marginRight:'5px'}}/>
|
|
典型灾害事件
|
|
</div>
|
|
<Table dataSource={data} columns={columns} pagination={false} onRow={(record:any) => {
|
|
return {
|
|
onClick: (event:any) =>flyToAdcd(record),
|
|
};
|
|
}}/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
export default TypicalDisasterEvents |