复现分析页第三天（Day：29）

任务：

1、复现分析页 2、辅助测试
1、复现热门搜索部门

import { useState } from 'react';
import React from 'react';
import { Card,Divider,Dropdown,Menu,Table} from 'antd';
import { Area } from '@ant-design/plots';
import { EllipsisOutlined, InfoCircleOutlined, CaretUpOutlined } from '@ant-design/icons';
import { render } from '@testing-library/react';

const items =[
    {
        key:'1',
        label: (
            <>
            操作一
            </>
        ),
    },
    {
        key: '2',
        label: (
            <>
                操作二
            </>
        ),
    }
]
const DemoArea1 = () => {
    const [data,] = useState([
        { timePeriod: '2023-12-19', y: 1 },
        { timePeriod: '2023-12-20', y: 6 },
        { timePeriod: '2023-12-21', y: 4 },
        { timePeriod: '2023-12-22', y: 8 },
        { timePeriod: '2023-12-23', y: 3 },
        { timePeriod: '2023-12-24', y: 7 },
        { timePeriod: '2023-12-25', y: 2 },
    ]);

    const config = {
        data,
        xField: 'timePeriod',
        yField: 'y',
        xAxis: {
            label: null,
            range: [0, 1],
        },
        yAxis: {
            label: null,
            //坐标网格线
            grid: null,
        },
        line: {
            style: {
                stroke: 'purple',
            },
        },
        smooth: true, // 设置为 true，表示使用平滑曲线
    };
    return (
        <div style={{ width: 200, height: 50 }}>
            <Area {...config} />
        </div>
    );
};
const DemoArea2 = () => {
    const [data,] = useState([
        { timePeriod: '2023-12-19', y: 1 },
        { timePeriod: '2023-12-20', y: 6 },
        { timePeriod: '2023-12-21', y: 4 },
        { timePeriod: '2023-12-22', y: 8 },
        { timePeriod: '2023-12-23', y: 3 },
        { timePeriod: '2023-12-24', y: 7 },
        { timePeriod: '2023-12-25', y: 2 },
    ]);

    const config = {
        data,
        xField: 'timePeriod',
        yField: 'y',
        xAxis: {
            label: null,
            range: [0, 1],
        },
        yAxis: {
            label: null,
            //坐标网格线
            grid: null,
        },
        line: {
            style: {
                stroke: 'purple',
            },
        },
        smooth: true, // 设置为 true，表示使用平滑曲线
    };
    return (
        <div style={{ width: 200, height: 50 }}>
            <Area {...config} />
        </div>
    );
};

const columns = [
    {
        title: '排名',
        dataIndex: 'ranking',
    },
    {
        title: '搜索关键词',
        dataIndex: 'search',
    },
    {
        title: '用户数',
        dataIndex: 'users',
        sorter: {
            compare: (a, b) => a.users - b.users,
            multiple: 2,
        },
    },
    {
        title: '周涨幅',
        dataIndex: 'price',
        sorter: {
            compare: (a, b) => a.price - b.price,
            multiple: 1,
        },
        render:(text) => {
            return(
                <div>
                    <div>{text}</div>
                    <CaretUpOutlined style={{ color: 'red' }} />
                </div>
            )
        }

    },
];

const data = [
    {
        key: '1',
        ranking: '1',
        search: '搜索关键词-0',
        users: 150,
        price: '82%',
    },
    {
        key: '2',
        ranking: '2',
        search: '搜索关键词-0',
        users: 150,
        price: '85%',
    },
    {
        key: '3',
        ranking: '3',
        search: '搜索关键词-0',
        users: 150,
        price: '33%',
    },
    {
        key: '4',
        ranking: '4',
        search: '搜索关键词-0',
        users: 150,
        price: '73%',
    },

];
const onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
};

const SearchCard=()=>{

    return (
    <div>
        <Card style={{

            height:400,
            width:550,
            marginTop: '20px',
            marginLeft: '30px',
            marginRight: '30px',

        }}>
            <div style={{fontWeight:'bold',fontSize:'16px'}}>
                线上热门搜索
                <Divider/>
                <Dropdown menu={{
                    items,
                }}>
                <EllipsisOutlined style={{ position: 'absolute', top: '30px', right: '50px' }} />
                </Dropdown>
            </div>

            <div style={{
                marginTop: '20px',
                marginLeft: '8px',
                }}>
                搜索用户数
                <Dropdown
                    style={{
                        backgroundColor: 'black',
                        color: "white"
                    }}
                    overlay={
                        <Menu  >
                            <Menu.Item key="instructions">指标说明</Menu.Item>
                        </Menu>
                    }
                    placement="top"
                    arrow
                >
                    <InfoCircleOutlined style={{ marginLeft: '5px' }} />
                </Dropdown>
            </div>

            <div style={{
                marginTop: '-20px',
                marginLeft: '280px',
            }}>
                人均搜索次数
                <Dropdown
                    style={{
                        backgroundColor: 'black',
                        color: "white"
                    }}
                    overlay={
                        <Menu  >
                            <Menu.Item key="instructions">指标说明</Menu.Item>
                        </Menu>
                    }
                    placement="top"
                    arrow
                >
                    <InfoCircleOutlined style={{ marginLeft: '5px' }} />
                </Dropdown>
            </div>
            <DemoArea1 />
                <div style={{
                    marginTop: '-50px',
                    marginLeft: '280px',
                }}>
                    <DemoArea2 />

            </div>
                <Table columns={columns} dataSource={data} onChange={onChange} />

        </Card>
    </div>

    )
}

export default SearchCard
目前这部分还是有几个问题
第一就是搜索关键词部分的内容没有变色，跳转网页倒是很简单第二就是升降序还没有实现原网页中的数据太多了，我是自己写了一些进去，，，明天希望可以把升降序搞好还有一个比较迷惑的部分是里面的数据是有上下箭头，我目前是写死，不知道有没有什么办法可以随机生成这种数据
明天继续复现
XJQ124 / Some-notes

复现分析页第三天（Day：29） #33

任务：

1、复现热门搜索部门
