2020-10-29

mapEcharts文件import React, { memo } from "react";import GisMap from "./gisMap/gisMap";import ActivitiesList from "./activitiesList/activitiesList";import AreaListInfomation from "./areaListInfomation/areaListInfomation";import SourcesStatistics from "./sourcesStatistics/sourcesStatistics";import TopListInfomation from "./topListInfomation/topListInfomation";import mStyle from "./mapEcharts.module.less";interface Iprops { params: any; showDetail: (pointData: any) => void}const MapEcharts: React.FC= ({ params, showDetail }) => { const onShowDetail = (pointData: any) => { showDetail(pointData); }; return (

);};export default memo(MapEcharts);gismap.tsx文件import React, { memo } from "react";import gStyle from "./gisMap.module.less";import MapLand from "../mapLand/mapLand";interface IProps {  params: any;  showDetail: (pointData: any) => void;}const GisMap: React.FC= ({ params, showDetail }) => {  const onShowDetail = (pointData: any) => {    showDetail(pointData);  };  return (

);};export default memo(GisMap);activitiesList.tsx文件// 请求的结果{code: 200, msg: "成功",…}code: 200data: {soilPollutionStatus: 10, removeSurveyList: 1052, inTheRiskAssessmentDirectory: 3,…}inTheRiskAssessmentDirectory: 3inTheRiskManagementAndRepairDirectory: 9removeSurveyList: 1052removedFromTheListOfRiskManagementAndRestoration: 0removedFromtheRiskAssessmentList: 2soilPollutionStatus: 10msg: "成功"import React, { memo, useEffect, useState } from "react";import Title from "components/BaseTitle/baseTitle";import aStyle from "./activitiesList.module.less";import ApiFetch from "utils/apiFetch";import { contaminatedLandManage } from "utils/apiGroup";import Nodata from "components/Nodata/Nodata";interface Iprops {  params: any}interface IList {  name: string,  key: string,  code: number}const ARR_LIST: IList[] = [  { name: "土壤污染状况调查名录", key: "soilPollutionStatus", code: 0 },  { name: "移出调查名录", key: "removeSurveyList", code: 1 },  { name: "在风险评估名录", key: "inTheRiskAssessmentDirectory", code: 2 },  { name: "移出风险评估名录", key: "removedFromtheRiskAssessmentList", code: 3 },  { name: "在风险管控与修复名录", key: "inTheRiskManagementAndRepairDirectory", code: 4 },  { name: "移出风险管控与修复名录", key: "removedFromTheListOfRiskManagementAndRestoration", code: 5 },];const ActivitiesList: React.FC= ({ params }) => {  const [list, setList] = useState([]);  useEffect (() => {    BlockList();  }, [JSON.stringify(params)]);  const BlockList = async () => {    const par = {      // endTime: params.endTime,      // startTime: params.startTime,      regionCodes: params.regionCodes    };    const res: any = await ApiFetch.post(contaminatedLandManage.riskManageMentList, par);    if (res._success) {      if (res.data) {        const tempList = ARR_LIST.map((item: IList) => {          return {            name: item.name,            value: res.data[item.key]          };        });        setList(tempList);      } else {        setList([]);      }    } else {      setList([]);    }  };  return (

{ list.length ? (list || []).map((item: {code: number, name: string, value: number}) => { return

{item.name}

{item.value}

; }) : }

); }; export default memo(ActivitiesList); activitiesList.module.less文件 .wrapper { background: #fff; box-shadow: 0.02rem 0.02rem 0.1rem 0 rgba(0, 0, 0, 0.1); flex: 1 1; min-height: 0; overflow: hidden; margin-bottom: 0.1rem; padding-top: 0.15rem; .moreBox { width: 100%; display: flex; flex-flow: row wrap; padding-left: 0.2rem; height: calc(100% - 0.2rem); padding-top: 0.1rem; border-radius: 0.01rem; .oneBox { margin: 0rem 0.1rem 0.1rem 0rem; background: #F5F6FA; display: flex; width: calc((100% - 0.4rem) /3); flex-flow: column nowrap; align-items: center; justify-content: center; &:hover { background-color: #427aff; color: #fff; cursor: pointer; >div:last-child { color: #fff; } } >div { display: flex; align-items: center; padding: 0 0.1rem; text-align: center; &:first-child { width: 1.4rem; text-align: center; } &:last-child { color: #427aff; } } } } } sourcesStatistics.tsx //调接口后的数据 [{…}, {…}, {…}, {…}, {…}, {…}] 0: {name: "土地整备项目", amount: 5, percent: 0.4167} 1: {name: "城市更新或土地用途变更项目", amount: 1, percent: 0.0833} 2: {name: "国有用地出让项目", amount: 0, percent: 0} 3: {name: "生态环境主管部门责令开展调查项目", amount: 0, percent: 0} 4: {name: "其他(企业自行申请的项目)", amount: 0, percent: 0} 5: {name: "合计", amount: 6, percent: 0.5} length: 6 __proto__: Array(0) import React, { memo, useEffect } from "react"; import sStyle from "./sourcesStatistics.module.less"; import Title from "components/BaseTitle/baseTitle"; import { useStore } from "store/appStore"; import echarts from "echarts/lib/echarts"; import { useState } from "utils/declare"; import { contaminatedLandManage } from "utils/apiGroup"; import ApiFetch from "utils/apiFetch"; interface IProps { params: any; } const SourcesStatistics: React.FC = ({ params }) => { const store = useStore(); const size = store.rootFontSize; const [list, setList] = useState([]); const [totalNumber, setTotalNumber] = useState(0); useEffect (() => { landInfo(); }, [JSON.stringify(params)]); useEffect(() => { if (list.length) { drawChart(list.slice(0, -1).map((item: any) => item.amount)); const total = list.slice(0, list.length - 1).reduce((currentItem: any, nextCurrentItem: any) => { return currentItem + nextCurrentItem.amount; }, 0); setTotalNumber(total); } }, [JSON.stringify(list)]); const landInfo = async () => { const par = { endTime: params.endTime, startTime: params.startTime, regionCodes: params.regionCodes, selects: params.selects, }; const res: any = await ApiFetch.post(contaminatedLandManage.LandSourceStatistics, par); if (res._success) { if (res.data) { setList(res.data); } else { setList([]); } } else { setList([]); } }; // const manyColors = ["#11D5F8", "#749DFD", "#5342FF", "#5342FF", "#5342FF"]; // const arrs = [ // { code: 1, name: "城市更新或土地用途变更项目", value: 100 }, // { code: 2, name: "土地正备项目", value: 100 }, // { code: 3, name: "国有用地出让项目", value: 80 }, // { code: 4, name: "国有用地出让项目", value: 80 }, // { code: 5, name: "其他(企业自行申请的项目)", value: 80 } // ]; const drawChart = (arrs: any) => { const domId = document.getElementById("lang_bg_area_analysisSourcesone") as HTMLCanvasElement; if (!domId) return; const myChart = echarts.init(domId); myChart.clear(); const option: any = { tooltip: { show: true, formatter: (item: any) => { return `

${item.name}

地块数: ${item.value}

`; }, backgroundColor: "transparent", borderColor: "transparent", padding: [0, 0, 15, 0], textStyle: { fontSize: 0.16 * size, color: "#333" }, confine: true, }, grid: [{ // top: 0.2 * size, right: 0.1 * size, bottom: 0, left: 0.3 * size, containLabel: true }], series: [ { name: "qq", type: "pie", radius: ["62%", "88%"], center: ["50%", "50%"], hoverAnimation: true, hoverOffset: 6, data: arrs, labelLine: { show: false, }, label: { show: false, }, }, ], color: ["#9999FF", "#00CCFF", "#5342FF", "#6BA4FF", "#AF68FF"], }; myChart.setOption(option); // 鼠标移除后事件 myChart.on("mouseout", function (params: any) { // setHoverActive(3); }); }; return (