ccic-web/packages/component.charts/lib/map.js

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import { useInterval, useSize } from 'ahooks';
import { ceil, isBoolean, isEmpty, maxBy, merge, uniqBy, size, gte, last, omit, map, } from 'lodash';
import { Empty } from 'antd';
// @ts-ignore
import classes from './style.module.css';
import { LOADING_COLOR, MAP_COLORS } from './type';
import getFeatures from './getFeatures';
export function ChartsMap({ service, color = MAP_COLORS, conditions, options = {}, goDown = true, lastLevel = 'district', onDownCallBack, breadcrumbClassName, roam = false, isCarousel = false, style = {}, searchKey = '', loadingType = { color: LOADING_COLOR }, isKeepGrid = false, toolbarloop = 'top5' }) {
    const ele = useRef(null);
    const echartsRef = useRef(null);
    const echartsInstance = useRef(null);
    const [empty, setEmpty] = useState(undefined);
    const [breadcrumb, setBreadcrumb] = useState([]);
    const [interval, setInterval] = useState(undefined);
    const [time, setTime] = useState(undefined);
    const count = useRef(0);
    useInterval(() => {
        function getDataLength() {
            var _a;
            const l = size((_a = echartsInstance.current.getOption().series[0]) === null || _a === void 0 ? void 0 : _a.data);
            if (toolbarloop === 'top5') {
                return gte(l, 5) ? 5 : l;
            }
            else {
                return l;
            }
        }
        echartsInstance.current.dispatchAction({
            type: 'hideTip',
        });
        echartsInstance.current.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
        });
        echartsInstance.current.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: count.current % getDataLength(),
        });
        echartsInstance.current.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: count.current % getDataLength(),
            position: () => {
            },
        });
        if (gte(count.current, toolbarloop === 'top5' ? 4 : getDataLength() - 1)) {
            count.current = 0;
        }
        else {
            count.current++;
        }
    }, interval);
    function clear(c) {
        if (c) {
            count.current = 0;
        }
        setInterval(undefined);
        echartsInstance.current.dispatchAction({
            type: 'hideTip',
        });
        echartsInstance.current.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
        });
    }
    function handleBreadcrumb(grid, key) {
        var _a;
        setBreadcrumb(breadcrumb.slice(0, key + 1));
        (_a = echartsInstance.current) === null || _a === void 0 ? void 0 : _a.resetOption(grid);
        onDownCallBack && onDownCallBack(grid);
    }
    const responsive = useSize(ele.current);
    useInterval(() => {
        var _a;
        (_a = echartsInstance.current) === null || _a === void 0 ? void 0 : _a.resetOption(last(breadcrumb));
    }, time);
    useEffect(() => {
        var _a;
        (_a = echartsInstance.current) === null || _a === void 0 ? void 0 : _a.resize();
    }, [JSON.stringify(responsive)]);
    useEffect(() => {
        const params = Object.assign(conditions, isKeepGrid ? omit(last(breadcrumb), 'name') : null);
        if (!echartsRef.current) {
            echartsRef.current = echarts.init(ele.current);
        }
        echartsRef.current.showLoading(Object.assign({ text: '' }, loadingType));
        (function init() {
            var _a, _b, _c;
            return __awaiter(this, void 0, void 0, function* () {
                const geoJson = yield getFeatures(params.adcode);
                if (isEmpty(geoJson)) {
                    (_a = echartsInstance.current) === null || _a === void 0 ? void 0 : _a.clear();
                    echartsRef.current.hideLoading();
                    setEmpty(true);
                    return;
                }
                const properties = (_b = geoJson === null || geoJson === void 0 ? void 0 : geoJson.currentFeature) === null || _b === void 0 ? void 0 : _b.properties;
                const { adcode, name } = properties;
                echarts.registerMap(name, geoJson);
                if (!echartsInstance.current) {
                    echartsInstance.current = initMap(echartsRef.current, {
                        color,
                        service,
                        goDown: goDown,
                        lastLevel: lastLevel,
                        mapName: name,
                        mapCode: adcode,
                        callback: onDownCallBack,
                        setBreadcrumb,
                        roam,
                        searchKey,
                        loadingType,
                    }, options);
                }
                if (!isEmpty(params) && echartsInstance.current) {
                    try {
                        const _params = {
                            name,
                            adcode: adcode,
                            [searchKey]: params[searchKey], // 地图code
                        };
                        if (isKeepGrid) {
                            setBreadcrumb(uniqBy([...breadcrumb, _params], (item) => String(item.adcode)));
                        }
                        else {
                            setBreadcrumb([_params]);
                        }
                        function callback() {
                            setInterval(5000);
                            setTime(300000);
                        }
                        (_c = echartsInstance.current) === null || _c === void 0 ? void 0 : _c.resetOption(_params, conditions, isCarousel && callback);
                        if (isCarousel) {
                            clear(true);
                            echartsInstance.current.on('mouseover', () => {
                                clear();
                            });
                            echartsInstance.current.on('mouseout', () => {
                                setInterval(5000);
                            });
                        }
                    }
                    catch (e) {
                    }
                }
            });
        })();
    }, map(Object.values(conditions), String));
    return (_jsxs("div", Object.assign({ style: Object.assign({ width: '100%', height: '100%', position: 'relative' }, style) }, { children: [isBoolean(empty) && empty ? (_jsx(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE, description: "\u8BE5\u5730\u533A\u6682\u65E0\u5730\u56FE\u8F6E\u5ED3" })) : (_jsx("div", { ref: ele, style: { width: '100%', height: '100%' } })), _jsx("div", Object.assign({ style: { position: 'absolute', top: 10, left: 30, zIndex: 10 } }, { children: _jsx("ul", Object.assign({ className: [classes.map_breadcrumb, breadcrumbClassName].join(' ') }, { children: breadcrumb.map((item, key) => (_jsxs("li", Object.assign({ onClick: () => handleBreadcrumb(item, key) }, { children: [key > 0 && key < (breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.length) && '-', item === null || item === void 0 ? void 0 : item.name] }), item.adcode))) })) }))] })));
}
export function initMap(chart, customOptions, options) {
    let cacheConditions = {};
    const option = merge({
        backgroundColor: '#F5F5F5',
        geo: {
            show: true,
            map: customOptions.mapName,
            layoutSize: '100%',
            zoom: 1.2,
            roam: customOptions.roam,
            scaleLimit: {
                min: 1.2,
                max: 10,
            },
            label: {
                show: false,
            },
            itemStyle: {
                borderColor: '#c5dff9',
                borderWidth: 1,
            },
            emphasis: {
                label: {
                    show: false,
                },
                itemStyle: {
                    //区域
                    areaColor: '#FFDF34',
                },
            },
            select: {
                label: {
                    show: false,
                },
                itemStyle: {
                    areaColor: '#BDBDBD',
                },
            },
        },
        visualMap: {
            min: 0,
            bottom: 70,
            type: 'continuous',
            max: 100,
            text: ['高', '低'],
            top: 'bottom',
            itemWidth: 8,
            itemHeight: 320,
            calculable: true,
            realtime: false,
            show: true,
            inRange: {
                color: customOptions.color,
            },
        },
        series: [
            {
                type: 'map',
                map: customOptions.mapName,
                geoIndex: 0,
                seriesIndex: 0,
            },
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                seriesIndex: 1,
                roam: customOptions.roam,
            },
        ],
    }, options);
    chart.setOption(option);
    // 添加事件
    chart.on('click', function (params) {
        var _a, _b;
        return __awaiter(this, void 0, void 0, function* () {
            const grid = params.data;
            if (!(grid === null || grid === void 0 ? void 0 : grid.adcode)) {
                return;
            }
            const { adcode, name } = grid;
            const geoJson = yield getFeatures(adcode);
            if (isEmpty(geoJson)) {
                return;
            }
            const level = (_b = (_a = geoJson === null || geoJson === void 0 ? void 0 : geoJson.currentFeature) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.level;
            if (level === customOptions.lastLevel) {
                return;
            }
            echarts.registerMap(name, geoJson);
            customOptions.setBreadcrumb((d) => {
                return uniqBy([
                    ...d,
                    {
                        adcode: adcode,
                        name,
                        [customOptions.searchKey]: grid[customOptions.searchKey],
                    },
                ], 'adcode');
            });
            customOptions.callback && customOptions.callback(grid, option, chart);
            chart.resetOption({
                adcode: adcode,
                name,
                [customOptions.searchKey]: grid[customOptions.searchKey],
            });
        });
    });
    chart.resetOption = function (grid, conditions = cacheConditions, carousel) {
        return __awaiter(this, void 0, void 0, function* () {
            try {
                const { name, adcode } = grid;
                cacheConditions = Object.assign({}, conditions);
                option.geo.map = name;
                chart.clear();
                chart.showLoading(Object.assign({ text: '' }, customOptions.loadingType));
                const data = yield customOptions.service(Object.assign(Object.assign({}, cacheConditions), { adcode, [customOptions.searchKey]: grid[customOptions.searchKey] }));
                chart.hideLoading();
                const maxValue = maxBy(data, 'value');
                option.visualMap.max = ceil(maxValue === null || maxValue === void 0 ? void 0 : maxValue.value) || 100;
                option.series[0].data = data;
                chart.setOption(option);
                carousel && carousel();
            }
            catch (e) {
                console.log(e, 'error');
            }
        });
    };
    window.onresize = function () {
        chart === null || chart === void 0 ? void 0 : chart.resize();
    };
    return chart;
}