gt_client_pad/src/pages/SmartOps/components/BarModal.js

import DateRadio from '@/components/DateRadio';
import BarChartModule from '@/components/ManagementPage/BarChartModule';
import ChartModule from '@/components/ManagementPage/chartModule';
import { Modal } from 'antd';
import { useState } from 'react';

const BarModal = ({ type = 1, title, data, visible, onCancel, onChange }) => {
  const [tab, setTab] = useState('1');

  const option = {
    yName: '水量（t）',
    xData: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30'],
    dataList: [
      {
        type: 0,
        name: '进水水量',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
      {
        type: 0,
        name: '进水水量111',
        data: [420, 932, 601, 934, 1990, 1330, 1520],
      },
      {
        type: 0,
        name: '预测出水量',
        data: [720, 832, 601, 834, 1190, 1230, 1220],
      },
      {
        type: 0,
        name: '实际出水量',
        data: [820, 632, 501, 534, 1190, 1130, 1120],
      },
    ],
  };

  return (
    <Modal
      title={title}
      visible={visible}
      onCancel={onCancel}
      footer={null}
      width={600}
    >
      <DateRadio onChange={(tab) => onChange(tab)} />

      <div style={{ height: '600px' }}>
        {type == 1 && (
          <BarChartModule
            xData={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
            dataList={[
              { name: 'xzhou ', data: [120, 200, 150, 80, 70, 110, 130] },
            ]}
          />
        )}
        {type == 2 && <ChartModule {...option} />}
      </div>
    </Modal>
  );
};
export default BarModal;