一、笔记代码

import { Select, Form, Input, Button, message, Card, Divider, Spin } from 'antd';
import { Line } from '@ant-design/charts';
import { useEffect, useState } from 'react';
import { debounce } from 'lodash';
import { getList } from 'src/services/super-operation/book-grade';
import './index.scss';
/**
index.scss作用是让加载动画居中
.ant-spin-dot {
  position: absolute;
  display: inline-block;
  font-size: 20px;
  width: 1em;
  height: 1em;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
*/

const { Search } = Input;
const { Option } = Select;
const BookGrade = () => {
  const [form] = Form.useForm();
  const [bookDataList, setbookDataList] = useState([]);
  const [keepDataList, setKeepDataList] = useState([]);
  const [searchDataList, setSearchDataList] = useState([]);
  const [dayChange, setDayChange] = useState('retain_rate_1');
  const [loading, setLoading] = useState(true);
  const [spinning, setSpinning] = useState(false);
  const onFinish = () => {
    const ids = form.getFieldsValue();
    setSpinning(true);
    getList(ids).then((res: any) => {
      if (res?.code === 0) {
        setLoading(false);
        setSpinning(false);
        const payload = res.data;
        const bookArr = [], keepArr = [], searchArr = [];
        for (let i = 0; i < payload.length; i += 1) {
          for (let j = 0; j < payload[i].length; j++) {
            const item = payload[i][j];
            bookArr.push(item as never);
            keepArr.push(item as never);
            searchArr.push(item as never);
          }
        }
        setbookDataList(bookArr); //书籍信息数据源bookData
        setKeepDataList(keepArr); //留存信息数据源keepData
        setSearchDataList(searchArr);
      } else message.error(res?.result || 'Error');
    });
  };

  const handleChange = (value: any) => {
    setDayChange(value);
  };
  const sortData = (property: string, desc: boolean) => {
    return function (a: { [x: string]: any }, b: { [x: string]: any }) {
      var value1 = a[property];
      var value2 = b[property];
      if (desc === true) {
        // 升序排列
        return value1 - value2;
      } else {
        // 降序排列
        return value2 - value1;
      }
    };
  };
  const handleSearch = (value: any) => {
    let map = {},
      dest: any[] = [];
    for (let i = 0; i < searchDataList.length; i++) {
      let ai = searchDataList[i];
      if (!map[ai['title']]) {
        dest.push({
          title: ai['title'],
          data: [ai]
        });
        map[ai['title']] = ai;
      } else {
        for (let j = 0; j < dest.length; j++) {
          let dj = dest[j];
          if (dj.title === ai['title']) {
            dj.data.push(ai);
            break;
          }
        }
      }
    }
    const obj = dest.find(function (v) {
      return v.title === value;
    });
    if (obj === undefined) {
      message.info('请检查输入内容是否正确');
      return;
    }
    setbookDataList(obj.data);
    setKeepDataList(obj.data);
  };
  const onSearch = (value: any) => {
    if (bookDataList.length === 0) {
      message.info('暂无数据,不可操作');
      return;
    }
    handleSearch(value);
  };
  const bookData = bookDataList.sort(sortData('expose_uv', true));
  const keepData = keepDataList.sort(sortData('new_read_uv', true));
  const COLOR_PLATE_10 = [
    '#5B8FF9',
    '#5AD8A6',
    '#5D7092',
    '#F6BD16',
    '#E8684A',
    '#6DC8EC',
    '#9270CA',
    '#FF9D4D',
    '#269A99',
    '#FF99C3'
  ];
  const config1 = {
    data: bookData,
    height: 300,
    xField: 'expose_uv',
    yField: 'ctr_multi_cvr',
    seriesField: 'id',
    yAxis: {
      title: {
        text: 'CTR*CVR',
        style: { fontSize: 12 }
      }
    },
    xAxis: {
      title: {
        text: '累计曝光/UV',
        style: { fontSize: 12 }
      }
    },
    slider: {
      start: 0,
      end: 1
    },
    color: COLOR_PLATE_10
  };
  const config2 = {
    data: keepData,
    height: 300,
    xField: 'new_read_uv',
    yField: dayChange,
    seriesField: 'id',
    yAxis: {
      title: {
        text: '留存日期',
        style: { fontSize: 12 }
      }
    },
    xAxis: {
      title: {
        text: '累计新增阅读/UV',
        style: { fontSize: 12 }
      }
    },
    slider: {
      start: 0,
      end: 1
    },
    color: COLOR_PLATE_10
  };

  const searchList = debounce(onFinish, 500);
  useEffect(() => {
    searchList();
  }, []);
  return (
    <>
      <Form form={form} onFinish={onFinish} layout="inline" style={{ marginBottom: 20 }}>
        <Form.Item name="ids" label="书籍id:" style={{ width: 300 }}>
          <Input.TextArea
            placeholder="书籍id,批量输入时请用逗号隔开"
            rows={1}
            autoComplete="off"
            allowClear
          />
        </Form.Item>
        <Form.Item label="书籍名称:" style={{ width: 300 }}>
          <Search placeholder="请输入书籍名称" allowClear onSearch={onSearch} enterButton />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit" type="primary">
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button htmlType="reset" type="default" disabled>
            导出数据
          </Button>
        </Form.Item>
      </Form>
      <Divider plain>书籍信息</Divider>
      <Card style={{ height: 320 }}>
        <Line {...config1} loading={loading} />
      </Card>
      <Divider plain>留存看板</Divider>
      <Select
        defaultValue={'retain_rate_1'}
        style={{ width: 200, marginBottom: 5 }}
        onChange={handleChange}
      >
        <Option value={'retain_rate_1'}>次日留存</Option>
        <Option value={'retain_rate_3'}>三日留存</Option>
        <Option value={'retain_rate_7'}>七日留存</Option>
      </Select>
      <Card style={{ height: 320 }}>
        <Line {...config2} loading={loading} />
      </Card>
      <Spin size="large" spinning={spinning} />
    </>
  );
};

export default BookGrade;


二、效果

您已经阅读00:00:00欢迎留言评论,喜欢的话就为作者点个赞或者赏颗糖吧! 分享