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

src/pages/member/memberWarning/common/hooks/useIntertal.ts

+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;

src/pages/member/memberWarning/dashboard/components/WarningArea/index.tsx

@@ -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}>

src/pages/member/memberWarning/dashboard/components/WarningArea/mapChart.tsx

-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>
   )

src/pages/member/memberWarning/tobeHandleWarning/index.tsx

@@ -95,6 +95,7 @@ const List: React.FC<Iprops> = (props: Iprops) => {
         <NiceForm
           schema={handleFormSchema}
           actions={actions}
+          value={recordData}
         />
       </Drawer>
     </>