@vtx/modals2 2.6.20 → 2.6.21

package/src/vtx-df-modal/components/Metering/index.tsx

@@ -1,181 +0,0 @@
-/**
- * 终端-计量信息
- */
-
-import React from 'react';
-import { useSetState } from 'ahooks';
-import moment from 'moment';
-import { VMRangePicker } from '../../../vm-filter';
-import SubTabs, { SubTabPane } from '../../../vm-sub-tabs';
-import ChartJccc from './ChartJccc';
-import ChartJcqs from './ChartJcqs';
-import List from './List';
-import useSettings from '../../../vm-hooks/useSettings';
-import { BaseService } from '../../api';
-import './index.less';
-
-import chart from '../../../vm-appraisal-info/imgs/chart.png';
-import chartActive from '../../../vm-appraisal-info/imgs/chart_active.png';
-import chartActiveLight from '../../../vm-appraisal-info/imgs/chart_active_light.png';
-import list from '../../../vm-appraisal-info/imgs/list.png';
-import listActive from '../../../vm-appraisal-info/imgs/list_active.png';
-import listActiveLight from '../../../vm-appraisal-info/imgs/list_active_light.png';
-
-import zjcl from '../../imgs/zjcl.png';
-import zjccc from '../../imgs/zjccc.png';
-import rjjcl from '../../imgs/rjjcl.png';
-import sjnl from '../../imgs/sjnl.png';
-
-import zjclLight from '../../imgs/zjcl_light.png';
-import zjcccLight from '../../imgs/zjccc_light.png';
-import rjjclLight from '../../imgs/rjjcl_light.png';
-import sjnlLight from '../../imgs/sjnl_light.png';
-
-interface TypeProps {
-    id: string;
-}
-
-const Metering: React.FC<TypeProps> = props => {
-    const { id } = props;
-    const { isDark } = useSettings();
-    const [state, setState] = useSetState({
-        startDate: moment()
-            .startOf('M')
-            .format('YYYY-MM-DD'),
-        endDate: moment().format('YYYY-MM-DD'),
-        tabKey: '1',
-    });
-    const { startDate, endDate, tabKey } = state;
-    const { code } = BaseService.useBaseInfo(id);
-    const { trendRes } = BaseService.useTrendInfo(code, startDate, endDate);
-    const { situationRes } = BaseService.useSituation(code, startDate, endDate);
-    const handleDateChange = (start: string, end: string) => {
-        setState({
-            startDate: start,
-            endDate: end,
-        });
-    };
-
-    return (
-        <div className="metering">
-            <div className="metering-head">
-                <SubTabs
-                    onChange={(key: string) => {
-                        setState({
-                            tabKey: key,
-                        });
-                    }}
-                    activeKey={tabKey}
-                >
-                    {[
-                        {
-                            name: (
-                                <div>
-                                    <img
-                                        src={
-                                            tabKey === '1'
-                                                ? isDark
-                                                    ? listActive
-                                                    : listActiveLight
-                                                : list
-                                        }
-                                    />
-                                    图表
-                                </div>
-                            ),
-                            key: '1',
-                        },
-                        {
-                            name: (
-                                <div>
-                                    <img
-                                        src={
-                                            tabKey === '2'
-                                                ? isDark
-                                                    ? chartActive
-                                                    : chartActiveLight
-                                                : chart
-                                        }
-                                    />
-                                    列表
-                                </div>
-                            ),
-                            key: '2',
-                        },
-                    ].map((ele: any) => (
-                        <SubTabPane subKey={ele.key} key={ele.key} tab={ele.name} />
-                    ))}
-                </SubTabs>
-                <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>
-            {tabKey === '1' && (
-                <div className="metering-content">
-                    <div className="metering-content-main">
-                        <MainItem
-                            src={isDark ? zjcl : zjclLight}
-                            name="总进厂量"
-                            value={situationRes?.inWeight || 0}
-                            unit="吨"
-                        />
-                        <MainItem
-                            src={isDark ? zjccc : zjcccLight}
-                            name="总进场车次"
-                            value={situationRes?.carNum || 0}
-                            unit="次"
-                        />
-                        <MainItem
-                            src={isDark ? rjjcl : rjjclLight}
-                            name="日均进厂量"
-                            value={situationRes?.dailyInWeight || 0}
-                            unit="吨"
-                        />
-                        <MainItem
-                            src={isDark ? sjnl : sjnlLight}
-                            name="设计能力"
-                            value={situationRes?.handleAbility || 0}
-                            unit="吨/日"
-                        />
-                    </div>
-                    <div className="metering-content-charts">
-                        <div className="metering-content-charts-jcqs">
-                            <ChartJcqs {...trendRes} />
-                        </div>
-                        <div className="metering-content-charts-jccc">
-                            <ChartJccc code={code} startDate={startDate} endDate={endDate} />
-                        </div>
-                    </div>
-                </div>
-            )}
-            {tabKey === '2' && <List code={code} startDate={startDate} endDate={endDate} />}
-        </div>
-    );
-};
-
-export const MainItem = (props: { src: string; name: string; value: number; unit: string }) => {
-    const { src, name, value, unit } = props;
-    return (
-        <div className="metering-content-main-item">
-            <img src={src} />
-            <div>
-                <div className="metering-content-main-item--name">{name}</div>
-                <div className="metering-content-main-item--value">
-                    <span>{value}</span>
-                    {unit}
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default Metering;

package/src/vtx-df-modal/components/WorkCondition/Monitor.tsx

@@ -1,122 +0,0 @@
-/**
- * 环保监测
- */
-import React, { useState } from 'react';
-
-import VMTable from '../../../vm-table';
-import ImageText from '../../../vm-image-text';
-import { BaseService } from '../../api';
-import NoData from '../../../vm-nodata';
-import useSettings from '../../../vm-hooks/useSettings';
-
-import alarm from '../../imgs/alarm.png';
-import normal from '../../imgs/normal.png';
-
-import alarmLight from '../../imgs/alarm_light.png';
-import normalLight from '../../imgs/normal_light.png';
-
-export default function Monitor({ code }: { code: string }) {
-    const { isDark } = useSettings();
-    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: 440,
-        paganitation: false,
-        dataSource: realtimeRes?.length > 0 ? realtimeRes[active]?.values : [],
-    };
-    return (
-        <div className="environment-monitor">
-            {realtimeRes?.length > 0 ? (
-                <>
-                    <div className="environment-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
-                                    key={index}
-                                    onClick={() => {
-                                        setActive(index);
-                                    }}
-                                    className={
-                                        index === active
-                                            ? 'environment-monitor-head-item-active'
-                                            : ''
-                                    }
-                                >
-                                    <ImageText
-                                        src={
-                                            flag
-                                                ? isDark
-                                                    ? alarm
-                                                    : alarmLight
-                                                : isDark
-                                                ? normal
-                                                : normalLight
-                                        }
-                                        name={item.deviceName}
-                                        value={item.furnaceTemperature}
-                                        unit="℃"
-                                        color={flag ? 'danger' : ''}
-                                        style={{ cursor: 'pointer' }}
-                                    />
-                                </div>
-                            );
-                        })}
-                    </div>
-                    <div className="environment-monitor-table">
-                        <VMTable
-                            columns={columns}
-                            isIndex={false}
-                            rowKey="deviceId"
-                            {...tableProps}
-                        />
-                    </div>
-                </>
-            ) : (
-                <NoData />
-            )}
-        </div>
-    );
-}

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

@@ -1,103 +0,0 @@
-/**
- * 运行信息
- */
-import React, { useEffect, useState } from 'react';
-import { Progress } from 'antd';
-import { WorkConditionService } from '../../api';
-import { sumBy } from 'lodash';
-import NoData from '../../../vm-nodata';
-
-import Rll from '../../imgs/situation_parent.png';
-
-interface TypeProps {
-    code: string;
-    startTime: string;
-    endTime: string;
-}
-
-interface TypeData {
-    monitorItemCode: string;
-    monitorItemName: string;
-    value: number;
-}
-
-const colors = ['#10B9FF', '#57FF96', '#FFCA3C', '#FF5959'];
-
-export default function Situation(props: TypeProps) {
-    const { code, startTime, endTime } = props;
-    const [inData, setInData] = useState(0);
-    const [data, setData] = useState<Array<TypeData>>([]);
-    const [outSum, setOutSum] = useState(0);
-    const { situationData } = WorkConditionService.useFetchData(code, startTime, endTime);
-    useEffect(() => {
-        if (situationData?.length) {
-            const inValue = situationData.find(
-                (ele: TypeData) => ele.monitorItemCode === 'MI_TRW_LJ_RL',
-            );
-            const outData = situationData.filter(
-                (ele: TypeData) => ele.monitorItemCode !== 'MI_TRW_LJ_RL',
-            );
-            const sumNum = sumBy(outData, function(o: TypeData) {
-                return o.value;
-            });
-            setOutSum(sumNum);
-            setInData(inValue?.value || 0);
-            setData(outData);
-        }
-    }, [situationData]);
-
-    return (
-        <div className="environment-monitor-situation">
-            {data?.length > 0 ? (
-                <div className="em-situation-wrap">
-                    <div className="em-situation-parent">
-                        <img src={Rll} />
-                        入炉量：<span>{inData || 0}</span> 吨
-                    </div>
-                    <div className="em-situation-verticaline" />
-                    <div className="em-situation-horizontaline" />
-                    <div className="em-situation-verticaline4">
-                        <div className="em-situation-verticaline4-item" />
-                        <div className="em-situation-verticaline4-item" />
-                        <div className="em-situation-verticaline4-item" />
-                        <div className="em-situation-verticaline4-item" />
-                    </div>
-                    <div className="em-situation-content">
-                        {data.map((item: TypeData, index: number) => {
-                            return (
-                                <div className="em-situation-content-item" key={index}>
-                                    <div className="em-situation-content-item--progress">
-                                        <Progress
-                                            width={80}
-                                            type="circle"
-                                            status="normal"
-                                            strokeLinecap="butt"
-                                            percent={
-                                                outSum
-                                                    ? Math.round((item?.value / outSum) * 100)
-                                                    : 0
-                                            }
-                                            strokeColor={colors[index]}
-                                            trailColor="#444B59"
-                                            strokeWidth={6}
-                                        />
-                                    </div>
-                                    <div className="em-situation-content-item--name">
-                                        {item?.monitorItemName}
-                                    </div>
-                                    <div className="em-situation-content-item--value">
-                                        <span>{item?.value || 0}</span>吨
-                                    </div>
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-            ) : (
-                <div className="environment-monitor-situation-noData">
-                    <NoData />
-                </div>
-            )}
-        </div>
-    );
-}

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

@@ -1,113 +0,0 @@
-.df-condition {
-    padding: 10px;
-    &-head {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 10px 16px;
-        background-color: var(--bg-color2);
-    }
-    .environment-monitor {
-        padding: 10px 16px;
-        background-color: var(--bg-color2);
-        text-align: center;
-        &-head {
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            
-            &-item-active {
-                padding: 8px 12px;
-                background-color: var(--block-bg-color);
-            }
-        }
-        &-table {
-            margin-top: 20px;
-            min-height: 440px;
-        }
-        &-situation {
-            height: 100%;
-            min-height: 500px;
-            padding: 10px 16px;
-            background-color: var(--bg-color2);
-            &-noData {
-                text-align: center;
-            }
-        }
-    }
-    .em-situation {
-        clear: both;
-        &-wrap {
-            width: 620px;
-            margin: 150px auto;
-        }
-        &-parent {
-            width: 324px;
-            height: 57px;
-            line-height: 50px;
-            margin: 0 auto;
-            background: url('../../imgs/situation_parent_bg.png') no-repeat 100% 100%;
-            color: var(--info-color);
-            img {
-                width: 46px;
-                height: 50px;
-                margin-left: 44px;
-                margin-right: 18px;
-            }
-            span {
-                font-size: 22px;
-            }
-        }
-        &-verticaline {
-            width: 2px;
-            height: 28px;
-            margin: 0 auto;
-            background: #096e88;
-        }
-        &-horizontaline {
-            width: 540px;
-            height: 2px;
-            margin: 0 auto;
-            background: #096e88;
-        }
-        &-verticaline4 {
-            width: 540px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: start;
-            &-item {
-                width: 2px;
-                height: 16px;
-                background: #096e88;
-            }
-        }
-        &-content {
-            width: 100%;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: start;
-            &-item {
-                width: 80px;
-                text-align: center;
-                &--progress {
-                    margin-top: 6px;
-                }
-                &--name {
-                    margin-top: 12px;
-                    color: var(--label-color);
-                }
-                &--value {
-                    color: var(--info-color);
-                    span {
-                        font-size: 22px;
-                    }
-                }
-            }
-        }
-    }
-    .ant-progress-text {
-        color: var(--info-color) !important;
-    }
-}

package/src/vtx-df-modal/components/WorkCondition/index.tsx

@@ -1,87 +0,0 @@
-/**
- * 计量-工况信息
- */
-import React from 'react';
-import { useSetState } from 'ahooks';
-import moment from 'moment';
-import { VMRangePicker } from '../../../vm-filter';
-import SubTabs, { SubTabPane } from '../../../vm-sub-tabs';
-import Monitor from './Monitor';
-import Situation from './Situation';
-import { BaseService } from '../../api';
-
-import './index.less';
-
-interface WorkConditionProps {
-    id: string;
-}
-const WorkCondition: React.FC<WorkConditionProps> = props => {
-    const { id } = props;
-    const [state, setState] = useSetState({
-        startDate: moment().format('YYYY-MM-DD'),
-        endDate: moment().format('YYYY-MM-DD'),
-        tabKey: '1',
-    });
-    const { startDate, endDate, tabKey } = state;
-
-    const { code } = BaseService.useBaseInfo(id);
-
-    const handleDateChange = (start: string, end: string) => {
-        setState({
-            startDate: start,
-            endDate: end,
-        });
-    };
-
-    return (
-        <div className="df-condition">
-            <div className="df-condition-head">
-                <SubTabs
-                    onChange={(key: string) => {
-                        setState({
-                            tabKey: key,
-                        });
-                    }}
-                    activeKey={tabKey}
-                >
-                    {[
-                        {
-                            name: <div>运行信息</div>,
-                            key: '1',
-                        },
-                        {
-                            name: <div>环保监测</div>,
-                            key: '2',
-                        },
-                    ].map((ele: any) => (
-                        <SubTabPane subKey={ele.key} key={ele.key} tab={ele.name} />
-                    ))}
-                </SubTabs>
-                <div>
-                    {tabKey === '1' && (
-                        <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>
-            {tabKey === '1' && (
-                <Situation
-                    code={code}
-                    startTime={`${startDate} 00:00:00`}
-                    endTime={`${endDate} 23:59:59`}
-                />
-            )}
-            {tabKey === '2' && <Monitor code={code} />}
-        </div>
-    );
-};
-
-export default WorkCondition;

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

@@ -1,5 +0,0 @@
-import BaseInfo from './BaseInfo';
-import Metering from './Metering';
-import WorkCondition from './WorkCondition';
-
-export { BaseInfo, Metering, WorkCondition };

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

@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from 'antd';
-import { VtxDfModal } from '@vtx/modals2';
-
-export default function Demo() {
-    const [visible, setVisible] = useState(false);
-    return (
-        <div style={{ height: '200px' }}>
-            <Button
-                type="primary"
-                onClick={() => {
-                    setVisible(true);
-                }}
-            >
-                暗色
-            </Button>
-            {visible && (
-                <VtxDfModal
-                    visible={visible}
-                    theme="dark"
-                    title="光大环保能源苏州有限公司"
-                    id="1586898856210485249"
-                    onCancel={() => {
-                        setVisible(false);
-                    }}
-                />
-            )}
-        </div>
-    );
-}

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

@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from 'antd';
-import { VtxDfModal } from '@vtx/modals2';
-
-export default function Demo() {
-    const [visible, setVisible] = useState(false);
-    return (
-        <div style={{ height: '150px' }}>
-            <Button
-                type="primary"
-                onClick={() => {
-                    setVisible(true);
-                }}
-            >
-                浅色
-            </Button>
-            {visible && (
-                <VtxDfModal
-                    visible={visible}
-                    theme="light"
-                    title="无计量无工况"
-                    id="1620979716437983233"
-                    onCancel={() => {
-                        setVisible(false);
-                    }}
-                />
-            )}
-        </div>
-    );
-}