@vtx/modals2 2.6.19

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

@@ -0,0 +1,127 @@
+.appraisal {
+    margin: 6px;
+    &-head {
+        padding: 14px 20px;
+        background-color: var(--bg-color2);
+        display: flex;
+        &-date {
+            margin-left: 10px;
+        }
+    }
+    &-content-list {
+        padding: 14px 20px;
+        background-color: var(--bg-color2);
+
+        &-table {
+            margin-top: 14px;
+            min-height: 440px;
+        }
+    }
+    &-content-chart {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 6px;
+    }
+
+    &-content-kh {
+        width: 50%;
+        height: 525px;
+        background-color: var(--bg-color2);
+        margin-right: 6px;
+        padding: 15px 20px;
+
+        &-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        &-item {
+            display: flex;
+            justify-content: start;
+            align-items: center;
+            img {
+                width: 46px;
+                height: 46px;
+                margin-right: 12px;
+            }
+            &--name {
+                color: var(--label-color);
+            }
+            &--value {
+                color: var(--info-color);
+                font-size: 12px;
+                span {
+                    font-size: 22px;
+                }
+            }
+        }
+        &-top {
+            margin-top: 24px;
+        }
+        &-topItem {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: var(--info-color);
+            padding-right: 24px;
+            margin-bottom: 16px;
+            img {
+                width: 23px;
+                height: 25px;
+                margin-right: 18px;
+            }
+            &-content {
+                width: 300px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            &-score {
+                width: 60px;
+                text-align: right;
+                color: var(--info-warnning);
+            }
+            span {
+                font-size: 20px;
+            }
+        }
+    }
+    &-content-zg {
+        width: 50%;
+        height: 525px;
+        background-color: var(--bg-color2);
+        padding: 15px 20px;
+
+        &-base {
+            display: flex;
+            justify-content: start;
+            align-items: center;
+
+            &-item {
+                display: flex;
+                justify-content: start;
+                align-items: center;
+                margin-right: 48px;
+                img {
+                    width: 46px;
+                    height: 46px;
+                    margin-right: 19px;
+                }
+                &--name {
+                    color: var(--label-color);
+                }
+                &--value {
+                    color: var(--info-color);
+                    font-size: 12px;
+                    span {
+                        font-size: 22px;
+                    }
+                }
+            }
+        }
+
+        &-wt {
+            margin-top: 24px;
+        }
+    }
+}

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

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

package/src/vm-button/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import './style/index.less';
+
+interface VmButtonProps {
+    active?: boolean;
+    name?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+}
+
+const VmButton = ({ name, active = false, style = {}, onClick }: VmButtonProps) => {
+    return (
+        <div
+            onClick={() => onClick && onClick()}
+            className={active ? 'vm-button--active' : 'vm-button'}
+            style={style}
+        >
+            {name}
+        </div>
+    );
+};
+
+export default VmButton;

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

@@ -0,0 +1,20 @@
+.button-common {
+    display: inline-block;
+    padding: 5px 10px;
+    border-radius: 2px;
+    cursor: pointer;
+    font-weight: 500;
+}
+
+.vm-button {
+    .button-common();
+    background: var(--button-background-color--default);
+    color: var(--button-text-color--defalut);
+}
+
+.vm-button--active {
+    .button-common();
+    background: var(--button-background-color--active);
+    border: 1px solid #6ff3ff;
+    color: var(--button-text-color--active);
+}

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

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

package/src/vm-charts/Distribute1.tsx

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

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

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

@@ -0,0 +1,10 @@
+/*------------【小区】开始------------*/
+// 仪表盘
+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

@@ -0,0 +1,51 @@
+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>
+    );
+};