@vtx/modals2 2.6.19

package/src/vm-filter/style/index.less

@@ -0,0 +1,142 @@
+.vm-range-picker {
+    --color: #222;
+    --border: 1px solid #dadadaff;
+    --hover-color: #40a9ff;
+
+    &.dark {
+        --color: #a9d5d3ff;
+        --border: 1px solid #3c7073ff;
+        --bg-color: #0d1a1b;
+        --hover-color: white;
+        .ant-picker-active-bar {
+            background: #59ffe2;
+        }
+    }
+    background-color: var(--bg-color) !important;
+    border: var(--border) !important;
+
+    .ant-picker-suffix {
+        color: var(--color);
+    }
+
+    &:hover {
+        border-color: var(--hover-color);
+    }
+
+    .ant-picker-input {
+        input {
+            color: var(--color);
+        }
+    }
+
+    .ant-picker-separator {
+        color: var(--color);
+    }
+
+    .ant-picker-clear {
+        color: var(--color);
+        background: transparent;
+    }
+}
+.vm-select {
+    &.dark {
+        .ant-select-selector {
+            background-color: #0d1a1b !important;
+            border: 1px solid #3c7073 !important;
+            .ant-select-selection-item {
+                color: #a9d5d3;
+            }
+        }
+        &:hover {
+            .ant-select-selector {
+                border: 1px solid #6cc9ce !important;
+            }
+        }
+    }
+}
+
+.vm-select-dropdown {
+    &.dark {
+        background: #0d1a1b;
+        .ant-select-item {
+            color: white;
+        }
+        .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+            background-color: #2d575a;
+        }
+        .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+            background-color: #1c3436;
+        }
+    }
+}
+.vm-range-picker-dropdown {
+    &.dark {
+        .ant-picker-range-arrow {
+            background: none;
+            &::before {
+                background: #0d1a1be6;
+            }
+        }
+        .ant-picker-panel-container {
+            background: #0d1a1be6;
+            box-shadow: 0 3px 6px -4px #ffffff1f, 0 6px 16px #ffffff14, 0 9px 28px 8px #5454540d;
+            .ant-picker-header {
+                button {
+                    color: white;
+                    &:hover {
+                        color: #95fff9;
+                    }
+                }
+            }
+            .ant-picker-content {
+                th {
+                    color: white;
+                }
+                .ant-picker-cell-inner {
+                    color: white;
+                }
+                .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
+                    background: #6cff2340;
+                }
+                .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
+                .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
+                    background: #6cff2340;
+                }
+                .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
+                .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
+                .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
+                    background: #52c41a;
+                }
+                .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
+                .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
+                    .ant-picker-cell-inner {
+                    background: #f5f5f55e;
+                }
+                .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
+                    border: 1px solid #52c41a;
+                }
+
+                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
+                .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
+                .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
+                .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before,
+                .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before,
+                .ant-picker-panel
+                    > :not(.ant-picker-date-panel)
+                    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,
+                .ant-picker-panel
+                    > :not(.ant-picker-date-panel)
+                    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
+                    background: #52c41abb;
+                }
+
+                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start
+                    .ant-picker-cell-inner::after,
+                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end
+                    .ant-picker-cell-inner::after {
+                    background: #52c41abb !important;
+                }
+            }
+        }
+    }
+}

package/src/vm-filter/style/index.ts

@@ -0,0 +1 @@
+import './index.less';

package/src/vm-hooks/useSettings.tsx

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { VtxThemeContext } from '../vtx-theme-provider';
+
+/**
+ * 获取配置信息
+ * @returns
+ */
+const useSettings = () => {
+    const { theme, chartFontColor, chartColor } = useContext(VtxThemeContext);
+    return { theme, isDark: theme === 'dark', chartFontColor, chartColor };
+};
+
+export default useSettings;

package/src/vm-image-text/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * 内部组件-左侧图标，右侧名称和数值
+ */
+import React from 'react';
+import './style';
+
+export interface ImageTextProps {
+    src: string;
+    name: string;
+    value?: number;
+    unit?: string;
+    /** 默认白色，active为--info-active */
+    color?: string;
+    style?: Object;
+    specialCase?: string;
+}
+
+const ImageText: React.FC<ImageTextProps> = props => {
+    const { src, name, value, unit, specialCase, color = '', style } = props;
+    return (
+        <div className="vm-image-text-item" style={style}>
+            <img src={src} />
+            <div>
+                <div className="vm-image-text-item--name">{name}</div>
+                <div className={`vm-image-text-item--value ${color}`}>
+                    {specialCase ? (
+                        <span>{specialCase}</span>
+                    ) : (
+                        <>
+                            <span>{value || 0}</span>
+                            {unit}
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ImageText;

package/src/vm-image-text/style/index.less

@@ -0,0 +1,30 @@
+.vm-image-text {
+    &-item {
+        display: flex;
+        justify-content: start;
+        align-content: center;
+        margin-right: 80px;
+        img {
+            width: 46px;
+            height: 46px;
+            margin-right: 18px;
+        }
+        &--name {
+            color: var(--label-color);
+        }
+        &--value {
+            line-height: 24px;
+            &.active {
+                color: var(--info-active);
+            }
+            &.danger {
+                color: var(--info-danger);
+            }
+            color: var(--info-color);
+            font-size: 12px;
+            span {
+                font-size: 22px;
+            }
+        }
+    }
+}

package/src/vm-image-text/style/index.ts

@@ -0,0 +1 @@
+import './index.less';

package/src/vm-info-collection/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import './style';
+
+interface CollectionItem {
+    key: string;
+    label: string;
+    value?: string | number;
+    color?: string;
+}
+
+interface InfoCollectionProps {
+    data: CollectionItem[];
+    gap?: number;
+    horizontal?: boolean;
+    width?: string;
+    ellipsis?: boolean;
+}
+interface ValueStyle {
+    color?: string;
+}
+
+function InfoCollection(props: InfoCollectionProps) {
+    const { data = [], width = '100%', gap = 8, horizontal = false, ellipsis = false } = props;
+    return (
+        <div className={horizontal ? 'info-collection-horizontal' : 'info-collection'}>
+            {data.map(item => {
+                const style: ValueStyle = {};
+                if (item.color) style.color = item.color;
+                return (
+                    <div className="info-line" key={item.key} style={{ marginBottom: gap, width }}>
+                        <div className="label">{item.label}：</div>
+                        <div
+                            className={`value ${ellipsis ? 'ellipsis' : ''}`}
+                            style={style}
+                            title={`${item.value || ''}`}
+                        >
+                            {item.value || '--'}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+export default InfoCollection;

package/src/vm-info-collection/style/index.less

@@ -0,0 +1,38 @@
+.info-collection {
+    width: fit-content;
+    .info-line {
+        display: flex;
+    }
+}
+.info-collection-horizontal {
+    display: flex;
+    flex-flow: wrap;
+    .info-line {
+        display: flex;
+        justify-content: start;
+        margin-right: 12px;
+    }
+}
+.info-collection,
+.info-collection-horizontal {
+    font-size: 14px;
+
+    .label {
+        color: var(--label-color);
+        white-space: nowrap;
+    }
+
+    .value {
+        color: var(--info-color);
+        font-weight: 400;
+        min-width: 98px;
+        text-align: left;
+    }
+    .ellipsis {
+        min-width: 98px;
+        max-width: 350px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

package/src/vm-info-collection/style/index.ts

@@ -0,0 +1 @@
+import './index.less';

package/src/vm-map/index.tsx

@@ -0,0 +1,192 @@
+/* eslint-disable no-undef */
+import $ from 'jquery';
+import React, { useEffect, useRef } from 'react';
+import { customStyle } from './mapStyle';
+
+interface MapPoint {
+    id: string;
+    name: string;
+    lng: string | number;
+    lat: string | number;
+    url: string;
+    width?: number;
+    height?: number;
+    offset?: { width?: number; height?: number };
+}
+
+interface mapPolygon {
+    id: string;
+    rings: string;
+    config: object;
+}
+interface VmMapProps {
+    mapCenter?: Array<number | string>;
+    mapPoints?: MapPoint[];
+    mapPolygons?: mapPolygon[];
+    currentLayer?: any;
+}
+
+type addPointFunc = (points?: MapPoint[]) => void;
+type addPolygonFunc = (polygons?: mapPolygon[], type?: string) => void;
+
+export default function VmMap({ mapCenter, mapPoints, mapPolygons, currentLayer }: VmMapProps) {
+    const mapRef = useRef<any>();
+    const markers = useRef<any>([]);
+    const mappolygons = useRef<any>([]);
+    const highlightLayer = useRef<any>([]);
+
+    useEffect(() => {
+        initMap();
+    }, []);
+
+    useEffect(() => {
+        mapRef.current && addPoints(mapPoints);
+        mapRef.current && addPolygons(mapPolygons);
+    }, [mapPoints, mapPolygons]);
+
+    useEffect(() => {
+        removeHighLightPolygons();
+        // 清空高亮图层并绘制新图层
+        if (currentLayer?.id)
+            addPolygons(
+                [
+                    {
+                        id: currentLayer.id,
+                        rings: currentLayer?.geometryInfo?.lngLats,
+                        config: {
+                            lineColor: 'red',
+                        },
+                    },
+                ],
+                'highlight',
+            );
+    }, [JSON.stringify(currentLayer)]);
+
+    const init = () => {
+        const center = mapCenter || [119.603701, 30.636529];
+        mapRef.current = new window.BMapGL.Map('modalMap', {
+            style: { styleJson: customStyle },
+        });
+        let point = new window.BMapGL.Point(center[0], center[1]);
+        // 设置中心点和层级
+        mapRef.current.centerAndZoom(point, 15);
+        mapRef.current.addOverlay(new window.BMapGL.Marker(point));
+        addPoints(mapPoints);
+        addPolygons(mapPolygons);
+    };
+
+    const initMap = () => {
+        if (window.BMapGL) {
+            init();
+        } else {
+            $.getScript(
+                `//api.map.baidu.com/getscript?type=webgl&v=1.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ`,
+                () => {
+                    init();
+                },
+            );
+        }
+    };
+
+    // 地图添加点位
+    const addPoints: addPointFunc = (points = []) => {
+        removePoints();
+        if (!points?.length) return;
+        // 添加点位
+        const positions: { lng: number; lat: number }[] = [];
+        points.forEach((item: any) => {
+            const position = new window.BMapGL.Point(item.lng, item.lat);
+            positions.push(position);
+            const icon = new window.BMapGL.Icon(
+                item.url,
+                new window.BMapGL.Size(item.width || 32, item.height || 45),
+            );
+            const marker = new window.BMapGL.Marker(position, {
+                icon,
+                offset: new window.BMapGL.Size(
+                    item.offset?.width || -10,
+                    item.offset?.height || -16,
+                ),
+                title: item.name || '',
+            });
+            markers.current.push(marker);
+            mapRef.current.addOverlay(marker);
+        });
+        mapRef.current.setViewport(positions);
+    };
+
+    // 清除地图点位
+    const removePoints = () => {
+        markers.current.forEach((marker: any) => {
+            mapRef.current.addOverlay(marker);
+        });
+        markers.current = [];
+    };
+
+    // 地图添加线
+    const addPolygons: addPolygonFunc = (polygons = [], type) => {
+        removePolygons();
+        if (!polygons?.length) return;
+        const points: any = [];
+        //遍历添加图层(图元)
+        polygons.map(item => {
+            //初始化参数
+            let cg = {
+                lineType: 'solid',
+                lineWidth: 5,
+                lineColor: '#277ffa',
+                lineOpacity: 1,
+                color: '#fff',
+                pellucidity: 0.5,
+                // isHidden: false  //后期需要再加
+            };
+            if (item.config) {
+                cg = { ...cg, ...item.config };
+            }
+            //面的参数
+            let polygonOption = {
+                    strokeColor: cg.lineColor,
+                    strokeOpacity: cg.lineOpacity,
+                    strokeWeight: cg.lineWidth,
+                    strokeStyle: cg.lineType,
+                    fillColor: cg.color,
+                    fillOpacity: cg.pellucidity,
+                },
+                polygonPath = item.rings?.split(';').map(item => {
+                    let [lng, lat] = item?.split(',');
+                    let _point = new window.BMapGL.Point(lng, lat);
+                    points.push(_point);
+                    return _point;
+                });
+            //创建面对象
+            let polygon = new window.BMapGL.Polygon(polygonPath, polygonOption);
+            if (type) {
+                // 若为高亮图层，单独保存，用于单独清除
+                highlightLayer.current.push(polygon);
+                mapRef.current.addOverlay(polygon);
+            } else {
+                mappolygons.current.push(polygon);
+                mapRef.current.addOverlay(polygon);
+            }
+        });
+        mapRef.current.setViewport(points);
+    };
+
+    // 清除地图图元
+    const removePolygons = () => {
+        mappolygons.current.forEach((polygon: any) => {
+            mapRef.current.addOverlay(polygon);
+        });
+        mappolygons.current = [];
+    };
+
+    // 清除高亮图元
+    const removeHighLightPolygons = () => {
+        highlightLayer.current.forEach((polygon: any) => {
+            mapRef.current.removeOverlay(polygon);
+        });
+        highlightLayer.current = [];
+    };
+
+    return <div id="modalMap" style={{ width: '100%', height: '100%' }} />;
+}