实现单屏、四屏、九屏、十六屏，分屏趋势图功能

最新推荐文章于 2024-03-22 11:06:55 发布

PairsNightRain

最新推荐文章于 2024-03-22 11:06:55 发布

阅读量205

点赞数

分类专栏：笔记文章标签：前端 react

本文链接：https://blog.csdn.net/qq_37161741/article/details/131125775

版权

笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、四种屏幕切换


const SplitScreen = () => {
        return (
            <div className={styles['iweb-four-split']}>
                <div className={styles.split} style={{ backgroundColor: screenNum == 1 ? '#0099ff' : '' }} onClick={() => setScreenNum(1)}>单屏</div>
                <div className={styles.split} style={{ backgroundColor: screenNum == 4 ? '#0099ff' : '' }} onClick={() => setScreenNum(4)}>四屏</div>
                <div className={styles.split} style={{ backgroundColor: screenNum == 9 ? '#0099ff' : '' }} onClick={() => setScreenNum(9)}>九屏</div>
                <div className={styles.split} style={{ backgroundColor: screenNum == 16 ? '#0099ff' : '' }} onClick={() => setScreenNum(16)}>十六屏</div>
                {/* <div className={styles.split}><Icon type="setting" /></div> */}
            </div>
        )

    }

2、根据屏幕分屏数，动态显示四种屏幕

const RenderMultiChart = () => {
        let data = []
        if (screenNum === 1) {
            data = [[0]];
        }
        else if (screenNum === 4) {
            data = [
                [0, 1],
                [2, 3],
            ];
        }
        else if (screenNum === 9) {
            data = [
                [0, 1, 2],
                [3, 4, 5],
                [6, 7, 8],
            ];
        }
        else if (screenNum === 16) {
            data = [
                [0, 1, 2, 3],
                [4, 5, 6, 7],
                [8, 9, 10, 11],
                [12, 13, 14, 15]
            ];
        }
        return (
            <Row style={{
                display: 'flex', flexDirection: 'column',
                height: '100%', width: '100%'
            }}>
                {data.map((row, rowIndex) => (
                    <Row key={rowIndex} style={{ height: ((100 / data.length).toFixed() + '%') }}>
                        {row.map((col, colIndex) => (
                            <Col span={24 / data.length} style={{ border: '1px solid', height: "100%" }} key={`${rowIndex}-${colIndex}`}>

                                <SplitChart
                                    chartKey={'myChart' + col}
                                    screenNum={screenNum}
                                    currentInfo={currentInfo}
                                    // setCurrentInfo={setCurrentInfo}
                                    updateLoading={updateLoading}
                                    tagVisible={tagVisible}
                                    updateTagVisible={updateTagVisible} />
                            </Col>
                        ))}
                    </Row>
                ))}
            </Row>
        )
    }