@vtx/modals2 2.6.19 → 2.6.21

package/src/vtx-road-modal/components/BaseInfo/index.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import useSettings from '../../../vm-hooks/useSettings';
-import SubTitle from '../../../vm-sub-title';
-import Base from '../../../vm-info-collection';
-import { BaseInfo as DefaultBaseInfo } from '../../../vtx-default-modal/components';
-import Rules from './Rules';
-import TodayWork from './TodayWork';
-
-import './index.less';
-
-interface BaseInfoProps {
-    id: string;
-    data: any;
-}
-
-const BaseInfo = (props: BaseInfoProps) => {
-    const { id, data } = props;
-    const { theme } = useSettings();
-    const { baseInfo, rules, todayWorkRes } = data;
-    return rules?.length > 0 ? (
-        <div className={`road-baseContent ${theme}`}>
-            <div className="base-left">
-                <div className="base-left-top">
-                    <SubTitle title="基本信息" />
-                    <Base data={baseInfo} horizontal={true} width="46%" gap={24} />
-                </div>
-                <div className="base-left-bottom">
-                    <Rules rules={rules} />
-                </div>
-            </div>
-            <TodayWork data={todayWorkRes} id={id} />
-        </div>
-    ) : (
-        <DefaultBaseInfo id={id} baseInfo={baseInfo} />
-    );
-};
-
-export default BaseInfo;

package/src/vtx-road-modal/components/Statistical/Zylc.tsx

@@ -1,150 +0,0 @@
-/**
- * 路段-统计信息-作业里程
- */
-import React from 'react';
-import * as echarts from 'echarts';
-import ReactEcharts from 'echarts-for-react';
-import SubTitle from '../../../vm-sub-title';
-import NoData from '../../../vm-nodata';
-import useSettings from '../../../vm-hooks/useSettings';
-
-interface TypeProps {
-    data: Array<any>;
-}
-
-function Zylc(props: TypeProps) {
-    const { data } = props;
-    const { theme, chartFontColor } = useSettings();
-    let planData = [],
-        workMileage = [],
-        xData = [];
-    if (data?.length > 0) {
-        xData = data.map(ele => ele.workDate);
-        planData = data.map(ele => ele.planMileage);
-        workMileage = data.map(ele => ele.workMileage);
-    }
-
-    let option = {
-        tooltip: {
-            trigger: 'axis',
-        },
-        grid: {
-            left: '8%',
-            right: '6%',
-            bottom: 20,
-        },
-        legend: {
-            align: 'left',
-            itemGap: 8,
-            itemWidth: 10,
-            itemHeight: 10,
-            textStyle: {
-                color: chartFontColor,
-            },
-            data: ['计划里程', '作业里程'],
-        },
-        xAxis: [
-            {
-                type: 'category',
-                data: xData,
-                boundaryGap: true,
-                axisPointer: {
-                    type: 'shadow',
-                },
-                axisTick: {
-                    show: false,
-                },
-                axisLabel: {
-                    color: chartFontColor,
-                },
-            },
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                name: '(km)',
-                min: 0,
-                nameTextStyle: {
-                    color: chartFontColor,
-                },
-                splitNumber: 5,
-                axisTick: {
-                    show: false,
-                },
-                axisLabel: {
-                    color: chartFontColor,
-                },
-                splitLine: {
-                    lineStyle: {
-                        type: 'dashed',
-                        color: 'rgba(151,151,151,0.28)',
-                    },
-                },
-            },
-        ],
-        series: [
-            {
-                name: '计划里程',
-                type: 'bar',
-                barWidth: 10,
-                data: planData,
-                itemStyle: {
-                    color:
-                        theme === 'dark'
-                            ? new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                                  {
-                                      offset: 0,
-                                      color: '#1B89FF',
-                                  },
-                                  {
-                                      offset: 1,
-                                      color: '#51D0FF',
-                                  },
-                              ])
-                            : '#1890FF',
-                },
-            },
-            {
-                name: '作业里程',
-                type: 'bar',
-                barWidth: 10,
-                data: workMileage,
-                itemStyle: {
-                    color:
-                        theme === 'dark'
-                            ? new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                                  {
-                                      offset: 0,
-                                      color: '#00A983 ',
-                                  },
-                                  {
-                                      offset: 1,
-                                      color: '#44FFD1',
-                                  },
-                              ])
-                            : '#73DEB3',
-                },
-            },
-        ],
-    };
-
-    return (
-        <div className="road-statistic-charts-lcfx">
-            <SubTitle title="作业里程分析" />
-            <div className="road-statistic-charts-lcfx-contain">
-                {data?.length > 0 ? (
-                    <ReactEcharts
-                        option={option}
-                        notMerge
-                        lazyUpdate
-                        style={{ height: '100%', width: '100%' }}
-                    />
-                ) : (
-                    <NoData />
-                )}
-            </div>
-        </div>
-    );
-}
-
-export default Zylc;

package/src/vtx-road-modal/components/Statistical/Zywcl.tsx

@@ -1,109 +0,0 @@
-/**
- * 路段-统计信息-作业完成率
- */
-import React from 'react';
-import * as echarts from 'echarts';
-import ReactEcharts from 'echarts-for-react';
-import SubTitle from '../../../vm-sub-title';
-import NoData from '../../../vm-nodata';
-import useSettings from '../../../vm-hooks/useSettings';
-
-interface TypeProps {
-    data: Array<any>;
-}
-
-function Zywcl(props: TypeProps) {
-    const { data } = props;
-    const { theme, chartFontColor } = useSettings();
-    let xData = [],
-        values = [];
-    if (data?.length > 0) {
-        xData = data.map(ele => ele.workDate);
-        values = data.map(ele => ele.rate);
-    }
-    const option = {
-        color: ['#00FFE7'],
-        tooltip: {
-            trigger: 'axis',
-        },
-        legend: {
-            show: false,
-        },
-        grid: {
-            left: '8%',
-            right: '6%',
-            bottom: 20,
-        },
-        xAxis: {
-            type: 'category',
-            boundaryGap: true,
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                color: chartFontColor,
-            },
-            data: xData,
-        },
-        yAxis: {
-            type: 'value',
-            name: '(%)',
-            min: 0,
-            nameTextStyle: {
-                color: chartFontColor,
-            },
-            splitNumber: 5,
-            axisLabel: {
-                color: chartFontColor,
-            },
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed',
-                    color: 'rgba(151,151,151,0.28)',
-                },
-            },
-        },
-        series: [
-            {
-                name: '作业完成率',
-                type: 'line',
-                data: values,
-                areaStyle: {
-                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                        {
-                            offset: 0,
-                            color:
-                                theme === 'dark'
-                                    ? 'rgba(0, 0, 0, 0.5)'
-                                    : 'rgba(255, 255, 255, 0.35)',
-                        },
-                        {
-                            offset: 1,
-                            color: '#00FFE7',
-                        },
-                    ]),
-                },
-            },
-        ],
-    };
-
-    return (
-        <div className="road-statistic-charts-zywcl">
-            <SubTitle title="作业完成率分析" />
-            <div className="road-statistic-charts-lcfx-contain">
-                {data?.length > 0 ? (
-                    <ReactEcharts
-                        option={option}
-                        notMerge
-                        lazyUpdate
-                        style={{ height: '100%', width: '100%' }}
-                    />
-                ) : (
-                    <NoData />
-                )}
-            </div>
-        </div>
-    );
-}
-
-export default Zywcl;

package/src/vtx-road-modal/components/Statistical/index.less

@@ -1,119 +0,0 @@
-.road-statistic {
-    padding: 10px;
-
-    &-summary {
-        padding: 20px;
-        height: 180px;
-        margin-bottom: 10px;
-        background-color: var(--bg-color2);
-
-        &-title {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        &-main {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: 32px;
-            color: var(--info-color);
-            &-item {
-                margin-right: 41px;
-                display: flex;
-                justify-content: start;
-                align-items: center;
-                img {
-                    width: 46px;
-                    height: 46px;
-                    margin-right: 17px;
-                }
-
-                &--name {
-                    color: var(--label-color);
-                }
-                &--value {
-                    font-size: 12px;
-                    span {
-                        font-size: 22px;
-                    }
-                }
-            }
-
-            &-progress {
-                width: 160px;
-                margin-right: 41px;
-                display: flex;
-                justify-content: start;
-                align-items: center;
-                .ant-progress-inner {
-                    width: 70px !important;
-                    height: 70px !important;
-                    margin-right: 17px;
-                }
-                &--name {
-                    color: var(--label-color);
-                }
-                &--value {
-                    color: var(--label-active);
-                    font-size: 12px;
-                    span {
-                        font-size: 22px;
-                    }
-                }
-            }
-            &-rate {
-                display: flex;
-                justify-items: start;
-                align-items: center;
-                &--item {
-                    margin-right: 30px;
-                }
-                &--block {
-                    width: 5px;
-                    height: 5px;
-                    display: inline-block;
-                    margin-right: 6px;
-                    background: #ffd736;
-                }
-
-                &--value {
-                    color: var(--info-color);
-                    font-size: 12px;
-                    margin-left: 11px;
-                    span {
-                        font-size: 22px;
-                    }
-                }
-            }
-        }
-    }
-
-    &-charts {
-        display: flex;
-        justify-content: start;
-        .chart {
-            width: 570px;
-            height: 507px;
-            padding: 20px;
-            background-color: var(--bg-color2);
-        }
-        &-lcfx {
-            .chart();
-            margin-right: 10px;
-
-            &-contain {
-                height: 400px;
-                width: 100%;
-            }
-        }
-
-        &-zywcl {
-            .chart();
-            &-contain {
-                height: 400px;
-                width: 100%;
-            }
-        }
-    }
-}

package/src/vtx-road-modal/components/Statistical/index.tsx

@@ -1,167 +0,0 @@
-/**
- * 路段-统计信息
- */
-import React from 'react';
-import { useSetState } from 'ahooks';
-import { Progress } from 'antd';
-import moment from 'moment';
-import { VMRangePicker } from '../../../vm-filter';
-import SubTitle from '../../../vm-sub-title';
-import Zylc from './Zylc';
-import Zywcl from './Zywcl';
-import useSettings from '../../../vm-hooks/useSettings';
-import { StaticService } from '../../api';
-
-import './index.less';
-
-import plan from '../../imgs/plan.png';
-import actual from '../../imgs/actual.png';
-import planLight from '../../imgs/plan_light.png';
-import actualLight from '../../imgs/actual_light.png';
-
-interface StatisticalProps {
-    id: string;
-}
-
-function Statistical(props: StatisticalProps) {
-    const { id } = props;
-    const { theme } = useSettings();
-    const [state, setState] = useSetState({
-        startDate: moment()
-            .startOf('M')
-            .format('YYYY-MM-DD'),
-        endDate: moment().format('YYYY-MM-DD'),
-    });
-    const { startDate, endDate } = state;
-
-    const { summaryInfo, completionRate, mileAnalysis } = StaticService.useSummaryInfo(
-        id,
-        startDate,
-        endDate,
-    );
-
-    const handleDateChange = (start: string, end: string) => {
-        setState({
-            startDate: start,
-            endDate: end,
-        });
-    };
-
-    const overRate = summaryInfo?.planMileage
-        ? ((summaryInfo.validMileage / summaryInfo?.planMileage) * 100).toFixed(2)
-        : 0;
-
-    return (
-        <div className="road-statistic">
-            <div className="road-statistic-summary">
-                <div className="road-statistic-summary-title">
-                    <SubTitle title="作业汇总统计" />
-                    <div>
-                        <VMRangePicker
-                            value={[moment(startDate), moment(endDate)]}
-                            onChange={(dates: any) =>
-                                dates &&
-                                handleDateChange(
-                                    moment(dates[0]).format('YYYY-MM-DD'),
-                                    moment(dates[1]).format('YYYY-MM-DD'),
-                                )
-                            }
-                        />
-                    </div>
-                </div>
-                <div className="road-statistic-summary-main">
-                    <div className="road-statistic-summary-main-item">
-                        <img src={theme === 'dark' ? plan : planLight} />
-                        <div>
-                            <div className="road-statistic-summary-main-item--name">
-                                计划作业里程
-                            </div>
-                            <div className="road-statistic-summary-main-item--value">
-                                <span>{summaryInfo?.planMileage || 0}</span>公里
-                            </div>
-                        </div>
-                    </div>
-                    <div className="road-statistic-summary-main-item">
-                        <img src={theme === 'dark' ? actual : actualLight} />
-                        <div>
-                            <div className="road-statistic-summary-main-item--name">
-                                实际作业里程
-                            </div>
-                            <div className="road-statistic-summary-main-item--value">
-                                <span>{summaryInfo?.validMileage || 0}</span>公里
-                            </div>
-                        </div>
-                    </div>
-                    <div className="road-statistic-summary-main-progress">
-                        <Progress
-                            type="circle"
-                            percent={Number(overRate) || 0}
-                            strokeWidth={10}
-                            strokeColor={theme === 'dark' ? '#4AFFE6' : '#5B8FF9'}
-                            trailColor={theme === 'dark' ? 'rgba(255,255,255,0.2)' : '#E4E4E4'}
-                            strokeLinecap="butt"
-                            showInfo={false}
-                        />
-                        <div>
-                            <div className="road-statistic-summary-main-progress--name">
-                                整体完成率
-                            </div>
-                            <div className="road-statistic-summary-main-progress--value">
-                                <span>{overRate}</span>%
-                            </div>
-                        </div>
-                    </div>
-                    <div className="road-statistic-summary-main-rate">
-                        <div className="road-statistic-summary-main-rate--item">
-                            <div
-                                className="road-statistic-summary-main-rate--block"
-                                style={{ background: '#FFD736' }}
-                            ></div>
-                            {'<50%'}
-                            <div className="road-statistic-summary-main-rate--value">
-                                <span>{completionRate?.dayNum1 || 0}</span>天
-                            </div>
-                        </div>
-                        <div className="road-statistic-summary-main-rate--item">
-                            <div
-                                className="road-statistic-summary-main-rate--block"
-                                style={{ background: '#3CA5FE' }}
-                            ></div>
-                            {'50%≤完成率<80%'}
-                            <div className="road-statistic-summary-main-rate--value">
-                                <span>{completionRate?.dayNum2 || 0}</span>天
-                            </div>
-                        </div>
-                        <div className="road-statistic-summary-main-rate--item">
-                            <div
-                                className="road-statistic-summary-main-rate--block"
-                                style={{ background: '#4AEDEB' }}
-                            ></div>
-                            {'80%≤完成率<100%'}
-                            <div className="road-statistic-summary-main-rate--value">
-                                <span>{completionRate?.dayNum3 || 0}</span>天
-                            </div>
-                        </div>
-                        <div className="road-statistic-summary-main-rate--item">
-                            <div
-                                className="road-statistic-summary-main-rate--block"
-                                style={{ background: '#4AED88' }}
-                            ></div>
-                            {'=100%'}
-
-                            <div className="road-statistic-summary-main-rate--value">
-                                <span>{completionRate?.dayNum4 || 0}</span>天
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="road-statistic-charts">
-                <Zylc data={mileAnalysis} />
-                <Zywcl data={mileAnalysis} />
-            </div>
-        </div>
-    );
-}
-
-export default Statistical;

package/src/vtx-road-modal/components/index.ts

@@ -1,4 +0,0 @@
-import BaseInfo from './BaseInfo';
-import Statistical from './Statistical';
-
-export { BaseInfo, Statistical };

package/src/vtx-road-modal/demo/demo1.tsx

@@ -1,32 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from 'antd';
-import { VtxRoadModal } from '@vtx/modals';
-
-export default function Demo() {
-    const [visible, setVisible] = useState(false);
-    return (
-        <>
-            <div style={{ height: '150px' }}>
-                <Button
-                    type="primary"
-                    onClick={() => {
-                        setVisible(true);
-                    }}
-                >
-                    暗色
-                </Button>
-            </div>
-            {visible && (
-                <VtxRoadModal
-                    visible={visible}
-                    theme="dark"
-                    title="无规则"
-                    id="1620967745047117826"
-                    onCancel={() => {
-                        setVisible(false);
-                    }}
-                />
-            )}
-        </>
-    );
-}

package/src/vtx-road-modal/demo/demo2.tsx

@@ -1,31 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from 'antd';
-import { VtxRoadModal } from '@vtx/modals';
-
-export default function Demo() {
-    const [visible, setVisible] = useState(false);
-    return (
-        <div style={{ height: '150px' }}>
-            <Button
-                type="primary"
-                onClick={() => {
-                    setVisible(true);
-                }}
-            >
-                浅色
-            </Button>
-
-            {visible && (
-                <VtxRoadModal
-                    visible={visible}
-                    theme="light"
-                    title="娄江快速路东向西道路"
-                    id="f867e694d716453c8c8c58b6b5cc1e71"
-                    onCancel={() => {
-                        setVisible(false);
-                    }}
-                />
-            )}
-        </div>
-    );
-}