@vtx/modals2 2.6.20 → 2.6.21

package/src/vtx-df-modal/components/BaseInfo/AlarmDetail.tsx

@@ -1,112 +0,0 @@
-import React from 'react';
-import * as echarts from 'echarts';
-import ReactEcharts from 'echarts-for-react';
-import SubTitle from '../../../vm-sub-title';
-import useSettings from '../../../vm-hooks/useSettings';
-import { BaseService } from '../../api';
-
-const AlarmDetail = (props: any) => {
-    const { chartFontColor } = useSettings();
-    const { code, startDate, endDate } = props;
-    const { jcccsjfbRes } = BaseService.useJcccsjfb(code, startDate, endDate);
-    let option = {
-        tooltip: {
-            trigger: 'axis',
-        },
-        grid: {
-            top: 10,
-            left: '5%',
-            right: '5%',
-            bottom: 20,
-        },
-        legend: {
-            show: false,
-        },
-        xAxis: [
-            {
-                type: 'category',
-                data: jcccsjfbRes?.names || [],
-                axisPointer: {
-                    type: 'shadow',
-                },
-                axisTick: {
-                    show: false,
-                },
-                axisLabel: {
-                    color: chartFontColor,
-                },
-            },
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                name: '(次)',
-                min: 0,
-                interval: 100,
-                nameTextStyle: {
-                    color: chartFontColor,
-                },
-                splitNumber: 5,
-                axisTick: {
-                    show: false,
-                },
-                axisLabel: {
-                    color: chartFontColor,
-                },
-                splitLine: {
-                    lineStyle: {
-                        type: 'dashed',
-                        color: 'rgba(151,151,151,0.28)',
-                    },
-                },
-            },
-        ],
-        series: [
-            {
-                type: 'bar',
-                barWidth: 18,
-                data: jcccsjfbRes?.values ? jcccsjfbRes.values[0] : [],
-                itemStyle: {
-                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                        {
-                            offset: 0,
-                            color: '#0C3D44',
-                        },
-                        {
-                            offset: 1,
-                            color: '#37D3B0',
-                        },
-                    ]),
-                },
-            },
-        ],
-    };
-
-    const dates =
-        jcccsjfbRes?.extraData?.length > 0 ? jcccsjfbRes.extraData.map((ele: any) => ele.date) : [];
-    const count =
-        jcccsjfbRes?.extraData?.length > 0
-            ? jcccsjfbRes.extraData.map((ele: any) => ele.count)
-            : [];
-
-    return (
-        <div className="base-bottom--right">
-            <SubTitle title="进场车次时间分布" />
-            <div className="base-bottom--right-desc">
-                进场高峰集中在<span>{dates?.join('点、') || 0}点</span>
-                ，进场车次分别为
-                <span>{count?.join('车、') || '-'}车</span>注意合理调度，缓解厂区排队情况
-            </div>
-            <div className="base-bottom--right-content">
-                <ReactEcharts
-                    option={option}
-                    notMerge
-                    lazyUpdate
-                    style={{ height: '250px', width: '100%' }}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default AlarmDetail;

package/src/vtx-df-modal/components/BaseInfo/Jcqsfx.tsx

@@ -1,142 +0,0 @@
-import React, { useEffect } from 'react';
-import { useSetState } from 'ahooks';
-import { flatten, max } from 'lodash';
-import ReactEcharts from 'echarts-for-react';
-import moment from 'moment';
-import SubTitle from '../../../vm-sub-title';
-import { VMRangePicker } from '../../../vm-filter';
-import useSettings from '../../../vm-hooks/useSettings';
-import { BaseService } from '../../api';
-
-interface TypeProps {
-    code: string;
-    setDate: (startDate: string, endDate: string) => void;
-}
-
-export default function Jcqsfx(props: TypeProps) {
-    const { chartFontColor } = useSettings();
-    const { code, setDate } = props;
-    const [state, setState] = useSetState({
-        startDate: moment()
-            .startOf('M')
-            .format('YYYY-MM-DD'),
-        endDate: moment().format('YYYY-MM-DD'),
-    });
-
-    const { startDate, endDate } = state;
-
-    const { trendRes } = BaseService.useTrendInfo(code, startDate, endDate);
-
-    const handleDateChange = (start: string, end: string) => {
-        setState({
-            startDate: start,
-            endDate: end,
-        });
-    };
-
-    useEffect(() => {
-        setDate(startDate, endDate);
-    }, [startDate, endDate]);
-
-    let maxNum = null;
-    if (trendRes?.values?.length > 0) {
-        maxNum = max(flatten(trendRes.values));
-    }
-
-    const option = {
-        color: ['#1890FF'],
-        tooltip: {
-            trigger: 'axis',
-        },
-        legend: {
-            show: false,
-        },
-        grid: {
-            top: 28,
-        },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                color: chartFontColor,
-            },
-            data: trendRes?.names || [],
-        },
-        yAxis: {
-            type: 'value',
-            axisTick: {
-                show: false,
-            },
-            max: maxNum,
-            axisLabel: {
-                color: chartFontColor,
-            },
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed',
-                    color: 'rgba(151,151,151,0.28)',
-                },
-            },
-        },
-        series: [
-            {
-                name: '进场量',
-                type: 'line',
-                data: trendRes?.values ? trendRes.values[0] : [],
-                markLine: {
-                    data: [
-                        {
-                            yAxis:
-                                trendRes?.values && trendRes.values[1] ? trendRes.values[1][0] : 0,
-                            lineStyle: {
-                                normal: {
-                                    color: '#FFE25D',
-                                },
-                            },
-                            name: '设计能力',
-                        },
-                    ],
-                    lineStyle: {
-                        color: '#52C41A',
-                    },
-                    label: {
-                        show: true,
-                        position: 'insideEndTop',
-                        formatter: '{b}: {c}',
-                        color: chartFontColor,
-                        fontWeight: 'normal',
-                    },
-                },
-            },
-        ],
-    };
-    return (
-        <div className="base-top--jcqsfx">
-            <div className="base-top--jcqsfx-head">
-                <SubTitle title="进场趋势分析" />
-                <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'),
-                        )
-                    }
-                    // style={{ position: 'absolute', top: 24, right: 32 }}
-                />
-            </div>
-            <div className="base-top--chart">
-                <ReactEcharts
-                    option={option}
-                    notMerge
-                    lazyUpdate
-                    style={{ height: '100%', width: '100%' }}
-                />
-            </div>
-        </div>
-    );
-}

package/src/vtx-df-modal/components/BaseInfo/RealtimeMonitor.tsx

@@ -1,113 +0,0 @@
-/**
- * 指标实时监测
- */
-import React, { useState } from 'react';
-import VMTable from '../../../vm-table';
-import SubTitle from '../../../vm-sub-title';
-import { BaseService } from '../../api';
-
-import alarm from '../../imgs/alarm.png';
-import normal from '../../imgs/normal.png';
-import NoData from '../../../vm-nodata';
-
-export default function RealtimeMonitor({ code }: { code: string }) {
-    const { realtimeRes } = BaseService.useRealtime(code);
-    const [active, setActive] = useState(0);
-    const columns = [
-        {
-            title: '监测项',
-            dataIndex: 'monitorItemName',
-            key: 'monitorItemName',
-        },
-        {
-            title: '检测值',
-            dataIndex: 'value',
-            key: 'value',
-            render: (text: number, record: any) => {
-                return (
-                    <span style={{ color: record?.beenAlarm && '#fd3a15' }}>
-                        {text ? `${text}${record?.unit || ''}` : '-'}
-                    </span>
-                );
-            },
-        },
-        {
-            title: '欧标',
-            dataIndex: 'europeValue',
-            key: 'europeValue',
-            render: (text: number) => {
-                return text ? text : '-';
-            },
-        },
-        {
-            title: '国标',
-            dataIndex: 'standardValue',
-            key: 'standardValue',
-            render: (text: number) => {
-                return text ? text : '-';
-            },
-        },
-    ];
-    const tableProps = {
-        height: 200,
-        paganitation: false,
-        dataSource: realtimeRes?.length > 0 ? realtimeRes[active]?.values : [],
-    };
-    return (
-        <div className="base-bottom--right">
-            <SubTitle title="指标实时监测" />
-            <div className="base-bottom--right-content">
-                {realtimeRes?.length > 0 ? (
-                    <div className="df-monitor">
-                        <div className="df-monitor-head">
-                            {realtimeRes.map((item: any, index: number) => {
-                                let flag = false;
-                                if (item.values?.length > 0) {
-                                    item.values.forEach((ele: any) => {
-                                        if (ele.beenAlarm) {
-                                            flag = true;
-                                        }
-                                    });
-                                }
-                                return (
-                                    <div
-                                        className={`df-monitor-head-item ${active === index &&
-                                            'active'}`}
-                                        key={index}
-                                        onClick={() => {
-                                            setActive(index);
-                                        }}
-                                    >
-                                        <img src={flag ? alarm : normal} />
-                                        <div className="df-monitor-head-item-right">
-                                            <div className="df-monitor-head-item-right-name">
-                                                {item.deviceName}
-                                            </div>
-                                            <div
-                                                className={`df-monitor-head-item-right-${
-                                                    flag ? 'valueAlarm' : 'valueNormal'
-                                                }`}
-                                            >
-                                                <span>{item.furnaceTemperature}</span>℃
-                                            </div>
-                                        </div>
-                                    </div>
-                                );
-                            })}
-                        </div>
-                        <div className="df-monitor-table">
-                            <VMTable
-                                columns={columns}
-                                isIndex={false}
-                                rowKey="factorId"
-                                {...tableProps}
-                            />
-                        </div>
-                    </div>
-                ) : (
-                    <NoData />
-                )}
-            </div>
-        </div>
-    );
-}

package/src/vtx-df-modal/components/BaseInfo/Situation.tsx

@@ -1,48 +0,0 @@
-/**
- * 实时运行情况
- */
-import React from 'react';
-import moment from 'moment';
-import useSettings from '../../../vm-hooks/useSettings';
-import { BaseService } from '../../api';
-
-interface TypeProps {
-    code: string;
-    alarm: number | null;
-}
-
-export default function Situation({ code, alarm }: TypeProps) {
-    const { theme } = useSettings();
-    const nowDate = moment().format('YYYY-MM-DD');
-    const { situationRes } = BaseService.useSituation(code, nowDate, nowDate);
-    return (
-        <div className={`df-situation ${theme}`}>
-            <div className={`df-situation-item1 ${theme}`}>
-                <div className="df-situation-item-name">进场量</div>
-                <div className="df-situation-item-value">
-                    <span>{situationRes?.dailyInWeight || 0}</span>吨
-                </div>
-            </div>
-            <div className={`df-situation-item2 ${theme}`}>
-                <div className="df-situation-item-name">进场车次</div>
-                <div className="df-situation-item-value">
-                    <span>{situationRes?.dailyCarNum || 0}</span>次
-                </div>
-            </div>
-            <div className={`df-situation-item3 ${theme}`}>
-                <div className="df-situation-item-name">车辆进场报警</div>
-                <div className="df-situation-item-value">
-                    <span>{situationRes?.carInAlarmCount || 0}</span>次
-                </div>
-            </div>
-            {alarm !== null && (
-                <div className={`df-situation-item4 ${theme}`}>
-                    <div className="df-situation-item-name">运行指标报警</div>
-                    <div className="df-situation-item-value">
-                        <span>{alarm || 0}</span>次
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}

package/src/vtx-df-modal/components/BaseInfo/index.less

@@ -1,210 +0,0 @@
-.flex-start {
-    display: flex;
-    justify-content: start;
-    align-items: start;
-}
-
-.mr-10 {
-    margin-right: 10px;
-}
-
-.left-width {
-    width: 370px;
-}
-
-.df-baseContent {
-    padding: 10px;
-    height: 100%;
-
-    .base-top {
-        .flex-start();
-
-        &-desc {
-            color: var(--info-danger);
-            height: 44px;
-        }
-
-        &-img {
-            padding: 10px 12px;
-            .left-width();
-            height: 288px;
-            .mr-10();
-            background-color: var(--bg-color2);
-            img {
-                width: 370px;
-                max-height: 245px;
-            }
-        }
-
-        &--base {
-            .mr-10();
-            width: 340px;
-            height: 288px;
-            padding: 10px 12px;
-            background-color: var(--bg-color2);
-        }
-        &--jcqsfx {
-            width: calc(~'100% - 698px');
-            height: 288px;
-            padding: 10px 12px;
-            background-color: var(--bg-color2);
-            &-head {
-                display: flex;
-                justify-content: space-between;
-            }
-        }
-        &--chart {
-            height: 260px;
-            width: 100%;
-        }
-    }
-
-    .base-bottom {
-        margin-top: 10px;
-        .flex-start();
-        &--left {
-            .left-width();
-            .mr-10();
-            padding: 10px 12px;
-            background-color: var(--bg-color2);
-        }
-        &--right {
-            width: calc(~'100% - 370px - 10px');
-            height: 362px;
-            padding: 10px 12px;
-            background-color: var(--bg-color2);
-
-            &-desc {
-                color: var(--title-color);
-                height: 50px;
-                text-align: center;
-                span {
-                    color: var(--info-danger);
-                }
-            }
-
-            &-content {
-                width: 100%;
-                height: 300px;
-                text-align: center;
-                overflow-y: auto;
-            }
-        }
-    }
-
-    .df-situation {
-        height: 306px;
-        overflow-y: auto;
-        --img-text-color: #fff;
-        &.light {
-            --img-text-color: #1890ff;
-        }
-        .df-situation-item {
-            width: 316px;
-            height: 65px;
-            margin-bottom: 9px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            padding-right: 14px;
-            &-name {
-                line-height: 65px;
-                margin-left: 71px;
-                color: var(--img-text-color);
-            }
-            &-value {
-                font-size: 14px;
-                color: var(--img-text-color);
-
-                span {
-                    font-size: 20px;
-                    font-family: D-DINExp-Bold, D-DINExp;
-                    font-weight: bold;
-                }
-            }
-        }
-        &-item1 {
-            .df-situation-item();
-            background-image: url('../../imgs/jcl.png');
-            &.light {
-                background-image: url('../../imgs/jcl_light.png');
-            }
-        }
-        &-item2 {
-            .df-situation-item();
-            background-image: url('../../imgs/jccc.png');
-            &.light {
-                background-image: url('../../imgs/jccc_light.png');
-            }
-        }
-        &-item3 {
-            .df-situation-item();
-            background-image: url('../../imgs/jcbj.png');
-            &.light {
-                background-image: url('../../imgs/jcbj_light.png');
-            }
-        }
-        &-item4 {
-            .df-situation-item();
-            background-image: url('../../imgs/zbbj.png');
-            &.light {
-                background-image: url('../../imgs/zbbj_light.png');
-            }
-        }
-    }
-    .df-monitor {
-        &-head {
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-
-            &-item {
-                .flex-start();
-                cursor: pointer;
-                &.active {
-                    padding: 8px 12px;
-                    background-color: var(--block-bg-color);
-                }
-                img {
-                    width: 40px;
-                    height: 40px;
-                    margin-right: 15px;
-                    display: inline-block;
-                }
-                &-right {
-                    &-name {
-                        color: var(--title-color);
-                        font-size: 12px;
-                    }
-                    &-valueNormal {
-                        color: var(--info-active);
-                        line-height: 22px;
-                        span {
-                            font-size: 20px;
-                        }
-                    }
-
-                    &-valueAlarm {
-                        &_active {
-                            color: var(--button-checked-color);
-                            line-height: 22px;
-                            span {
-                                font-size: 20px;
-                            }
-                        }
-                        color: var(--info-danger);
-                        line-height: 22px;
-                        span {
-                            font-size: 20px;
-                        }
-                    }
-                }
-            }
-        }
-        &-table {
-            margin-top: 18px;
-        }
-    }
-}