shptjs/src/views/Ptjs/Czdbl/index.js

import React, { useEffect, useState, useMemo, useRef } from 'react';
import { Card, message, Table, Space, Button, Spin, Tree } from 'antd';
import ToolBar from './toolbar.js';
import ToolBottom from './toolBottom.js';
import apiurl from '../../../models/apiurl'
import { xyt_httpget2 } from "../../../utils/request"
import { resJson } from './res.js';
import moment from 'moment';
export default function Czrz() {
	const [newColumns, setNewColumns] = useState([])
	const [tableList, setTableList] = useState([])
	const [adcd, setAdcd] = useState('420000000000000')
	const [treeList, setTreeList] = useState([])
	const [selectedKeys, setSelectedKeys] = useState(['420000000000000'])
	const [loading, setLoading] = useState(false)
	const [SearchBottom, setSearchBottom] = useState(false)
	const [adcdList, setAdcdList] = useState([])
	const columns = [
		{
			title: '序号',
			dataIndex: 'inx',
			key: 'inx',
			width: 80,
			align: "center",
			render: (text, record, index) => {
				return index ? <span>{index}</span> : ''
			}
		},
		{
			title: '行政区划',
			dataIndex: 'adnm',
			key: 'adnm',
			width: 100,
			align: "center",
		},
		{
			title: '总在线率',
			dataIndex: 'onlineRate',
			key: 'onlineRate',
			width: 100,
			align: "center",
			render: (text, record) => (
				<span>
					{record.ratelen > 0 ? (record.ratesum * 100 / record.ratelen).toFixed(2) : '-'}%
				</span>
			)
		},
	]
	const detailsColumns = [
		{
			title: '行政区划',
			dataIndex: 'adnm',
			key: 'adnm',
			width: 100,
			align: "center",
		},
		{
			title: '雨量站',
			children: [
				{
					title: '在线',
					dataIndex: 'ontpcntpp',
					key: 'ontpcntpp',
					width: 100,
					align: "center",
					render: (text, record) => (
            <span>
              {record[SearchBottom?.operTime]?.ontpcnt?.pp}
            </span>
          )
				},
				{
					title: '离线',
					dataIndex: 'offtpcntpp',
					key: 'offtpcntpp',
					width: 100,
					align: "center",
					render: (text, record) => (
            <span>
              {record[SearchBottom?.operTime]?.offtpcnt?.pp}
            </span>
          )
				},
			]
		},
		{
			title: '水位站',
			children: [
				{
					title: '在线',
					dataIndex: 'ontpcntzz',
					key: 'ontpcntzz',
					width: 100,
					align: "center",
					render: (text, record) => (
            <span>
              {record[SearchBottom?.operTime]?.ontpcnt?.zz}
            </span>
          )
				},
				{
					title: '离线',
					dataIndex: 'offtpcntzz',
					key: 'offtpcntzz',
					width: 100,
					align: "center",
					render: (text, record) => (
            <span>
              {record[SearchBottom?.operTime]?.offtpcnt?.zz}
            </span>
          )
				},
			]
		},
		{
			title: '图像站',
			children: [
				{
					title: '在线',
					dataIndex: 'ontpcntwf',
					key: 'ontpcntwf',
					width: 100,
					align: "center",
					render: (text, record) => (
            <span>
              {record[SearchBottom?.operTime]?.ontpcnt?.wf}
            </span>
          )
				},
				{
					title: '离线',
					dataIndex: 'offtpcntwf',
					key: 'offtpcntwf',
					width: 100,
					align: "center",
					render: (text, record) => (
            <span>
              {record[SearchBottom?.operTime]?.offtpcnt?.wf}
            </span>
          )
				},
			]
		},
		{
			title: '在线率',
			dataIndex: 'onlineR',
			key: 'onlineR',
			width: 100,
			align: "center",
			render: (text, record) => (
        <span>
          {(record[SearchBottom?.operTime].rate * 100).toFixed(2)}%
        </span>
      )
		},
		{
			title: '总在线率',
			dataIndex: 'totalOnlineR',
			key: 'totalOnlineR',
			width: 150,
			align: "center",
			render: (text, record) => {
     return   <span>
					{ record.ratelen > 0 ? ( record.ratesum * 100 / record.ratelen ).toFixed(2) : '-'}%
        </span>

			}
      
		},
	]
	const newDetailsColumns = useMemo(() => {
		if (SearchBottom) {
			const tmObj = {
				title: SearchBottom?.operTime,
				dataIndex: SearchBottom?.operTime,
				key: SearchBottom?.operTime,
				width: 100,
				align: "center",
				render: (v, r, i) => <span>{i + 1}</span>
			}
			return [tmObj,...detailsColumns]
		}
	},[SearchBottom])
	const [searchVal, setSearchVal] = useState(false)
	const width = useMemo(() => newColumns.reduce((total, cur) => total + (cur.width), 0), [newColumns]);

	const getData = async (params) => {
		setLoading(true)
		try {
			const res = await xyt_httpget2(apiurl.ptjs.czdbl, params)
			if (res.code == 200) {
				proccess(res.data)
				
			}
		} catch (error) {
			console.log(error);
		}
	}
 const [hbobj, setHbobj] = useState()
	const proccess = (results) => {
		const dayarr = [];
		const adlist = [];
		let hbobj = {
			adcd: '420000000000',
			adnm: '湖北省',
			ratesum: 0,
			ratelen: 0
		};

		for (let adcd in results) {
			let adobj = results[adcd];

			adobj.adcd = adcd;
			adobj.ratesum = 0;
			adobj.ratelen = 0;

			adlist.push(adobj);

			if (/00000000$/.test(adcd) || adcd === '429021000000') {
				for (let k in adobj) {
					if (!/^[0-9]{4}/.test(k)) {
						continue;
					}

					if (!(k in hbobj)) {
						hbobj[k] = {
							offtpcnt: {
								pp: 0,
								zz: 0,
								wf: 0
							},
							ontpcnt: {
								pp: 0,
								zz: 0,
								wf: 0
							}
						}
					}

					for (let onoff in adobj[k]) {
						for (let sttp in adobj[k][onoff]) {
							hbobj[k][onoff][sttp] += adobj[k][onoff][sttp];
						}
					}
				}
			}

			if (dayarr.length == 0) {
				for (let day in adobj) {
					if (!/^[0-9]{4}/.test(day)) {
						continue;
					}

					adobj.ratesum += adobj[day].rate;
					adobj.ratelen += 1;
					dayarr.push(day);
				}
			}
		}

		for (let day in hbobj) {
			if (!/^[0-9]{4}/.test(day)) {
				continue;
			}

			let ciobj = hbobj[day];

			let alloff = ciobj.offtpcnt.pp + ciobj.offtpcnt.zz + ciobj.offtpcnt.wf;
			let allon = ciobj.ontpcnt.pp + ciobj.ontpcnt.zz + ciobj.ontpcnt.wf;
			let rate = allon / (allon + alloff);

			hbobj[day].rate = rate;
			hbobj.ratesum += rate;
			hbobj.ratelen += 1;
		}
		const newhbobj = hbobj;
		adlist.sort(function (o1, o2) {
			if (o1.adcd > o2.adcd) {
				return 1;
			} else {
				return -1;
			}
		});

		dayarr.sort(function (o1, o2) {
			if (moment(o1).isBefore(moment(o2))) {
				return 1;
			} else {
				return -1;
			}
		});
		console.log("dayarr", dayarr);
		const dayarrColumns = dayarr.map(it => ({
			title: it,
			dataIndex: it,
			key: it,
			width: 120,
			align: "center",
			render: (text, record) => (
				<span>
					{(record[it]?.rate * 100).toFixed(2)}%
				</span>
			)
		}))
		setNewColumns([...columns, ...dayarrColumns])
		console.log("hbobj", newhbobj);
		setHbobj(newhbobj);
		setAdcdList(adlist);
		filterdata(adlist, newhbobj)
	}

	const filterdata = (adlist, newhbobj) => {
		let reg = /00000000$/;
		const list = [];

		for (let i = 0; i < adlist.length; i++) {
			let obj = adlist[i];
			let adcd = obj.adcd;

			obj.ratesum = 0;
			obj.ratelen = 0;

			for (let day in obj) {
				if (!/^[0-9]{4}/.test(day)) {
					continue;
				}

				obj.ratesum += obj[day].rate;
				obj.ratelen += 1;
			}
			if (reg.test(adcd) || adcd === '429021000000') {
				list.push(obj);
			}
		}
		if (list.length > 0) { 
			setLoading(false)
		}
		console.log("list", list);
		setTableList([newhbobj, ...list]);
	}

	const treeData = async (adcd) => {
		const hbobj = {
			adcd: "420000000000000",
			adnm: "湖北省",
			children: [],
		}
		try {
			const res = await xyt_httpget2(apiurl.ptjs.treeList + adcd)
			if (res.code == 200) {
				hbobj.children = res.data;
				setTreeList([hbobj]);
			}
		} catch (error) {
			console.log(error);
		}
	}

	const updateTreeData = (list, key, children) => {
		return list.map((node) => {
			if (node.adcd === key) {
				return {
					...node,
					children,
				};

			}
			if (node.children) {
				return {
					...node,
					children: updateTreeData(node.children, key, children),
				};
			}
			return node;
		})
	}
	const onLoadData = async ({ key, children }) => {
		if (key.substr(4) != '00000000000') {
			return
		}
		try {
			const res = await xyt_httpget2(apiurl.ptjs.treeList + key)
			if (res.code == 200) {
				setTreeList(origin =>
					updateTreeData(origin, key, res.data.map(item => ({ ...item, isLeaf: true })))
				)
			}
		} catch (error) {
			console.log(error);
		}
	}
	const onSelect = (keys,arr) => {
		console.log(keys,arr);
		setSelectedKeys(keys)
		setAdcd(keys[0])
	}
	
	// 子表格数据
	const [subTableData, setSubTableData] = useState([])
	const filterSondata = (selectedObj, type, adlist, selday) => {

		const sellist = [];
		if (selectedObj && type != 'province') {
			let adreg = new RegExp('^' + selectedObj.adcd.substring(0, 4));
			
			for (let si = 0; si < adlist.length; si++) {
        let obj = adlist[si];
        if ((adreg.test(obj.adcd) && obj.adcd != selectedObj.adcd) ||
					(selectedObj.adcd === '429021000000' && obj.adcd === '429021000000')) {
          sellist.push(obj);
				}
      }
    }
    if (selectedObj && type == 'province') {
      let adreg = /00000000$/;

      for (let si = 0; si < adlist.length; si++) {
        let obj = adlist[si];

        if ((adreg.test(obj.adcd) || obj.adcd === '429021000000') && obj.adcd != selectedObj.adcd) {
          sellist.push(obj);
        }
      }
    }

    sellist.sort(function (o1, o2) {
      if (o1[selday].rate > o2[selday].rate) {
        return 1;
      } else {
        return -1;
      }
		});
		console.log("sellist",sellist);
		
		setSubTableData(sellist)
	 }
	useEffect(() => {
		if (searchVal) {
			const params = {
				...searchVal
			};
			getData(params)
		}
	}, [searchVal])

	useEffect(() => {
		treeData("420000000000000")
	}, [])

	useEffect(() => {
		if (adcd && SearchBottom && adcdList.length > 0 && hbobj) {
			const subStrAdcd = adcd.substr(0, 12);
			const selectObj = subStrAdcd == '420000000000' ? hbobj :
				adcdList.find(item => {
					if (item.adcd == subStrAdcd) {
						return item
					}
				})
			const type = selectObj?.adcd == '420000000000' ? 'province':'city'
			// const type = 'province';
			console.log("adcd",subStrAdcd);
			
			filterSondata(selectObj,type,adcdList,SearchBottom.operTime)
		}
	}, [adcd,SearchBottom,adcdList,hbobj])
	
	
	return (
		<div className='page'>
			<div className='left'>
				<Card>
					{
						treeList.length > 0 ?
						<Tree
							treeData={treeList}
							fieldNames={{ title: 'adnm', key: "adcd" }}
							loadData={onLoadData}
							defaultExpandedKeys={["420000000000000"]}
								selectedKeys={selectedKeys}
								onSelect={onSelect}
							/>:
							<Spin size='large' style={{ margin: '7rem' }}/>
					}

				</Card>
			</div>
			<div className='right'>
				<Card style={{ display: 'flex', flexDirection: 'column' }}>
					<ToolBar
						setToolVal={setSearchVal}
					/>
					<div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
						{
							!loading ?
								<Table
									columns={newColumns}
									dataSource={tableList}
									pagination={false}
									scroll={{ x: width, y: "calc( 100vh - 600px )" }}
									rowKey="inx"
								/> : <Spin size="large" style={{ marginTop: '10rem' }} />}
					</div>
					<div className='bottom' style={{marginTop:20,width:'100%'}}>
						<ToolBottom setToolVal={setSearchBottom} />
						<div style={{ display: 'flex', marginTop: 20,width:'100%' }}>
						{
							newDetailsColumns &&
								<Table
									columns={newDetailsColumns}
									dataSource={subTableData}
									pagination={false}
									scroll={{ x: 1200}}
									rowKey="inx"
								/>}
					</div>
					</div>
				</Card>
			</div>
		</div>
	)
}