@vtx/modals2 2.6.19 → 2.6.21

package/src/vm-charts/Distribute1.tsx

@@ -1,114 +0,0 @@
-import React from 'react';
-import groupBy from 'lodash/groupBy';
-import ReactEcharts from 'echarts-for-react';
-
-const xAxis = [...new Array(24)].map((_, index) => add0(index));
-export interface Distribute1Props {
-    data?: { date: string; hour: string; value: number }[];
-}
-function add0(num: number): string {
-    return num >= 10 ? num.toString() : `0${num}`;
-}
-function transferData(data: Distribute1Props['data']) {
-    const chartData: [number, number, number][] = [];
-    const dataGroupByDate = groupBy(data, 'date');
-    let count = 0;
-    for (const key in dataGroupByDate) {
-        dataGroupByDate[key].forEach((item, index) => {
-            chartData.push([index, count, item.value]);
-        });
-        count++;
-    }
-    return {
-        yAxis: Object.keys(dataGroupByDate).map(item => item.substring(5)),
-        chartData,
-    };
-}
-
-const getGaugeOption = ({ data = [] }: Distribute1Props) => {
-    const { yAxis, chartData } = transferData(data);
-    const max = Math.max(...chartData.map(item => item[2]));
-    if (!chartData?.length) return {};
-    return {
-        tooltip: {
-            position: 'top',
-            formatter: (params: any) => {
-                const { value, marker } = params;
-                const date = yAxis[value[1]];
-                const hour = `${add0(value[0])}:00-${add0(value[0] + 1)}:00`;
-                return `<div>${date} ${hour}</div><div>${marker} 投放次数：${value[2]}次</div>`;
-            },
-        },
-        grid: {
-            top: 50,
-            bottom: 0,
-            right: 0,
-            left: 0,
-            containLabel: true,
-        },
-        xAxis: {
-            type: 'category',
-            data: xAxis,
-            splitArea: {
-                show: true,
-            },
-            axisLabel: {
-                interval: 0,
-                color: '#fff',
-            },
-            axisTick: {
-                show: false,
-            },
-        },
-        yAxis: {
-            type: 'category',
-            data: yAxis,
-            splitArea: {
-                show: true,
-            },
-            axisLabel: {
-                color: '#fff',
-                interval: 0,
-            },
-            axisTick: {
-                show: false,
-            },
-        },
-        visualMap: {
-            // type: 'piecewise',
-            min: 0,
-            max: max,
-            calculable: true,
-            orient: 'horizontal',
-            left: 'center',
-            top: 0,
-            inRange: {
-                color: ['#364357', '#00759C', '#29A8F0', '#F5B829', '#E7473F'],
-            },
-            textStyle: {
-                color: '#fff',
-            },
-        },
-        series: [
-            {
-                name: '24h分布',
-                type: 'heatmap',
-                data: chartData,
-                label: {
-                    show: true,
-                },
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)',
-                    },
-                },
-            },
-        ],
-    };
-};
-const Distribute1 = (props: Distribute1Props) => {
-    return <ReactEcharts option={getGaugeOption(props)} style={{ height: '100%' }} />;
-};
-
-export default Distribute1;

package/src/vm-charts/Gauge1.tsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import ReactEcharts from 'echarts-for-react';
-
-interface Gauge1Props {
-    num?: number | string;
-    average?: number | string | false;
-    min?: number | string;
-    max?: number | string;
-    name?: string;
-    unit?: string;
-}
-const getGaugeOption = ({
-    num = 0,
-    min = 0,
-    average = 0,
-    max = 100,
-    name = '',
-    unit = '',
-}: Gauge1Props) => {
-    const good = num > average;
-    return {
-        title: {
-            left: 'center',
-            top: '60%',
-            text: `{a|${name}}\n{b|${good ? '优于均值' : '差于均值'}}`,
-            textStyle: {
-                rich: {
-                    a: {
-                        color: '#fff',
-                        fontSize: 14,
-                        lineHeight: 40,
-                    },
-                    b: {
-                        color: good ? '#63FFC6' : '#FFCD36',
-                        fontSize: 14,
-                    },
-                },
-            },
-        },
-        series: [
-            {
-                type: 'gauge',
-                center: ['50%', '50%'],
-                radius: '75%',
-                startAngle: 200,
-                endAngle: -20,
-                min,
-                max,
-                splitNumber: 10,
-                progress: {
-                    show: true,
-                    width: 10,
-                    itemStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [
-                                {
-                                    offset: 0,
-                                    color: good ? '#50F0FF' : '#FFBE31',
-                                },
-                                {
-                                    offset: 1,
-                                    color: good ? '#3EA6FF' : '#FF4800',
-                                },
-                            ],
-                        },
-                    },
-                },
-                pointer: {
-                    show: false,
-                },
-                axisLine: {
-                    lineStyle: {
-                        width: 10,
-                    },
-                },
-                axisTick: {
-                    distance: -20,
-                    length: 5,
-                    splitNumber: 5,
-                    lineStyle: {
-                        width: 1,
-                        color: '#999',
-                    },
-                },
-                splitLine: {
-                    distance: -23,
-                    length: 8,
-                    lineStyle: {
-                        width: 2,
-                        color: '#999',
-                    },
-                },
-                axisLabel: {
-                    show: false,
-                    distance: -12,
-                    color: '#999',
-                    fontSize: 12,
-                },
-                anchor: {
-                    show: false,
-                },
-                title: {
-                    show: false,
-                },
-                detail: {
-                    valueAnimation: true,
-                    width: '60%',
-                    borderRadius: 8,
-                    offsetCenter: [0, 0],
-                    fontWeight: 'bolder',
-                    formatter:
-                        average === false
-                            ? `{a|${num}}{b|${unit}}`
-                            : `{a|${num}}{b|${unit}}\n{c|均值${average}${unit}}`,
-                    textStyle: {
-                        rich: {
-                            a: {
-                                color: '#fff',
-                                fontSize: 24,
-                            },
-                            b: {
-                                color: '#fff',
-                                fontSize: 12,
-                            },
-                            c: {
-                                color: '#9BA8B0',
-                                fontSize: 12,
-                            },
-                        },
-                    },
-                },
-                data: [
-                    {
-                        value: num,
-                    },
-                ],
-            },
-        ],
-    };
-};
-const Gauge1 = (props: Gauge1Props) => {
-    return <ReactEcharts option={getGaugeOption(props)} style={{ height: '100%' }} />;
-};
-
-export default Gauge1;

package/src/vm-charts/Line1.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import ReactEcharts from 'echarts-for-react';
-
-export interface Line1Props {
-    xAxis?: string[];
-    data?: { name: string; data: number[] }[];
-    style?: React.CSSProperties;
-}
-
-const getOption = ({ xAxis = [], data = [] }: Line1Props) => {
-    return {
-        color: ['#0E85FF', '#49FF81', '#26D4FF', '#F5D629', '#C97CFF'],
-        tooltip: {
-            trigger: 'axis',
-        },
-        legend: {
-            type: 'scroll',
-            top: 0,
-            left: 'center',
-            textStyle: {
-                color: '#fff',
-            },
-        },
-        grid: {
-            top: 50,
-            left: 20,
-            right: 0,
-            bottom: 0,
-            containLabel: true,
-        },
-        xAxis: {
-            data: xAxis,
-            axisLabel: {
-                color: '#DAF1FF',
-                interval: 0,
-            },
-            axisTick: {
-                show: false,
-            },
-            axisLine: {
-                show: false,
-            },
-            z: 10,
-        },
-        yAxis: {
-            name: '单位：次',
-            nameTextStyle: {
-                color: '#fff',
-            },
-            axisLine: {
-                show: false,
-            },
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                color: '#fff',
-            },
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed',
-                    color: 'rgba(255,255,255,0.2)',
-                },
-            },
-        },
-        series: data.map(item => {
-            return {
-                name: item.name,
-                type: 'line',
-                smooth: true,
-                data: item.data,
-            };
-        }),
-    };
-};
-
-const Line1 = ({ xAxis, data, style }: Line1Props) => {
-    return (
-        <ReactEcharts option={getOption({ xAxis, data })} style={{ height: '100%', ...style }} />
-    );
-};
-
-export default Line1;

package/src/vm-charts/index.ts

@@ -1,10 +0,0 @@
-/*------------【小区】开始------------*/
-// 仪表盘
-export { default as Gauge1 } from './Gauge1';
-// 趋势图
-export { default as Line1 } from './Line1';
-export type { Line1Props } from './Line1';
-// 分布图
-export { default as Distribute1 } from './Distribute1';
-export type { Distribute1Props } from './Distribute1'
-/*------------【小区】结束------------*/

package/src/vm-filter/index.tsx

@@ -1,51 +0,0 @@
-import type { SelectProps } from 'antd';
-import { DatePicker, Select } from 'antd';
-import locale from 'antd/es/date-picker/locale/zh_CN';
-import 'moment/locale/zh-cn';
-import React from 'react';
-import useSettings from '../vm-hooks/useSettings';
-import './style';
-const { RangePicker } = DatePicker;
-/**
- * 二次封装的日期选择器
- * @param props
- * @returns
- */
-export const VMRangePicker = (props: any) => {
-    const { theme } = useSettings();
-    return (
-        <RangePicker
-            className={`vm-range-picker ${theme}`}
-            dropdownClassName={`vm-range-picker-dropdown ${theme}`}
-            allowClear={false}
-            {...props}
-            locale={locale}
-        />
-    );
-};
-
-export const VMDatePicker = (props: any) => {
-    const { theme } = useSettings();
-    return (
-        <DatePicker
-            className={`vm-range-picker ${theme}`}
-            dropdownClassName={`vm-range-picker-dropdown ${theme}`}
-            allowClear={false}
-            {...props}
-            locale={locale}
-        />
-    );
-};
-
-export const VMSelect: React.FC<SelectProps> = (props) => {
-    const { theme } = useSettings();
-    return (
-        <Select
-            className={`vm-select ${theme}`}
-            dropdownClassName={`vm-select-dropdown ${theme}`}
-            {...props}
-        >
-            {props.children}
-        </Select>
-    );
-};

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

@@ -1,142 +0,0 @@
-.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

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

package/src/vm-hooks/useSettings.tsx

@@ -1,13 +0,0 @@
-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

@@ -1,40 +0,0 @@
-/**
- * 内部组件-左侧图标，右侧名称和数值
- */
-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

@@ -1,30 +0,0 @@
-.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

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

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

@@ -1,46 +0,0 @@
-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;