@vtx/modals2 2.6.19

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

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

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

@@ -0,0 +1,113 @@
+/**
+ * 指标实时监测
+ */
+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

@@ -0,0 +1,48 @@
+/**
+ * 实时运行情况
+ */
+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

@@ -0,0 +1,210 @@
+.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;
+        }
+    }
+}