Commit e1951d98 authored by 卢均锐's avatar 卢均锐

Merge branch 'dev-srm' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into dev-srm

* 'dev-srm' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform: feat: 增加工作台逻辑
parents 1439491c e14aecbc
import { useEffect, useState, useCallback, useRef } from 'react';
const defaultOptions = {
cancelOnUnmount: true,
};
const useInterval = (fn: () => void, milliseconds: number, options = defaultOptions) => {
const opts = { ...defaultOptions, ...(options || {}) };
const timeout = useRef<ReturnType<typeof setInterval>>();
const callback = useRef(fn);
const [isCleared, setIsCleared] = useState(false);
const clear = useCallback(() => {
if (timeout.current) {
setIsCleared(true);
clearInterval(timeout.current);
}
}, []);
useEffect(() => {
if (typeof fn === 'function') {
callback.current = fn;
}
}, [fn]);
useEffect(() => {
if (typeof milliseconds === 'number') {
timeout.current = setInterval(() => {
callback.current();
}, milliseconds);
}
return clear;
}, [milliseconds]);
useEffect(() => () => {
if (opts.cancelOnUnmount) {
clear();
}
}, []);
return [isCleared, clear];
};
export default useInterval;
......@@ -4,6 +4,7 @@ import { Card } from 'antd';
import MapChart from './mapChart';
import CustomizeRadio, { Options } from '../CustomizeRadio'
import { RecordList } from '../Record';
import useInterval from '../../../common/hooks/useIntertal';
const WarningArea = () => {
const [mapData, setMapData] = useState(undefined)
......@@ -33,6 +34,7 @@ const WarningArea = () => {
count: 6
}
]);
const [activeProvince, setActiveProvince] = useState<string>("广东省")
useEffect(() => {
const dataUrl =
......@@ -41,7 +43,6 @@ const WarningArea = () => {
fetch(dataUrl)
.then(res => res.json())
.then(d => {
console.log(d);
const feas = d.features.filter(feat => feat.properties.name).map(v => {
return {
...v,
......@@ -56,6 +57,17 @@ const WarningArea = () => {
});
}, []);
const handleChangeProvince = (name: string) => {
setActiveProvince(name)
}
useInterval(() => {
const randomList = ["广东省", "上海市", "北京市", "四川省", "浙江省"];
const key = Math.floor(Math.random() * randomList.length);
setActiveProvince(randomList[key])
}, 10000);
return (
<Card bodyStyle={{padding: 0}}>
<div className={styles.card}>
......@@ -65,10 +77,10 @@ const WarningArea = () => {
</header>
<div className={styles.chart}>
<div className={styles.selectData}>
<span className={styles.province}>广东省</span>
<span className={styles.province}>{activeProvince}</span>
<span className={styles.count}>12</span>
</div>
<MapChart mapData={mapData} />
<MapChart mapData={mapData} activeProvince={activeProvince} onChangeProvince={handleChangeProvince} />
</div>
</div>
<div className={styles.section}>
......
import React, { useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import {
Chart,
Tooltip,
......@@ -7,7 +7,6 @@ import {
import Coord from 'bizcharts/lib/components/Coordinate';
import Geom from 'bizcharts/lib/geometry'
import * as turf from '@turf/turf';
import DataSet from '@antv/data-set';
......@@ -39,6 +38,8 @@ interface Iprops {
type: "Feature"
}
},
activeProvince: string,
onChangeProvince: (area: string) => void
}
type SelectEleType = {
......@@ -48,11 +49,11 @@ type SelectEleType = {
}
const MapChart: React.FC<Iprops> = (props: Iprops) => {
// const [mapData, setMapData] = useState(undefined)
const { mapData } = props;
const mapRef = useRef<any>(null)
const { mapData, activeProvince, onChangeProvince } = props;
let bgView;
let interval;
let min = 0;
if (mapData) {
// data set
const ds = new DataSet();
......@@ -81,25 +82,42 @@ const MapChart: React.FC<Iprops> = (props: Iprops) => {
const onSelectProvince = (e: any) => {
const { data } = e;
const elementData = data.data as SelectEleType;
console.log(elementData)
onChangeProvince(elementData.name)
}
useEffect(() => {
if (!mapRef.current) {
return;
}
setActiveArea(mapRef.current, activeProvince)
}, [activeProvince])
const setActiveArea = (instance: any, areaName: string) => {
instance.geometries[0].elements.forEach((e) => {
if(areaName === e.data.name) {
e.setState('selected', true);
} else {
e.setState('selected', false);
}
})
}
return (
<div style={{ background: '#FAFBFC'}}>
<Chart
// 清空默认的坐标轴legend组件
pure
height={336}
scale={scale}
// 不支持dataSet数据格式了
data={bgView ? bgView.rows : bgView}
autoFit
placeholder={<div>Loading</div>}
padding={[20, 0, 0, 0]}
// onAfterRender={(e, c) => {
// keepMapRatio(mapData, c, "rerender")
// }}
onPlotClick={onSelectProvince}
onPlotClick={onSelectProvince}
onGetG2Instance={c => {
mapRef.current = c;
setActiveArea(c, activeProvince)
}}
>
<Coord reflect="y" />
......@@ -143,7 +161,7 @@ const MapChart: React.FC<Iprops> = (props: Iprops) => {
},
}}
/>
<Interaction type='element-single-selected' />
{/* <Interaction type='element-single-selected' /> */}
</Chart>
</div>
)
......
......@@ -95,6 +95,7 @@ const List: React.FC<Iprops> = (props: Iprops) => {
<NiceForm
schema={handleFormSchema}
actions={actions}
value={recordData}
/>
</Drawer>
</>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment