feat: 升级报表组件

config/proxy.js

@@ -40,4 +40,14 @@ export default {
       '/PandaCore': '/PandaCore',
     },
   },
+  '/PandaWater': {
+    target: proxyURL,
+    changeOrigin: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    pathRewrite: {
+      '/PandaWater': '/PandaWater',
+    },
+  },
 };

packages/base-components/BasicReport/src/ReportsManage/Components/ChartConfig/forms.js

+import React from 'react';
+import { Row, Form, Select, InputNumber, Switch, Input, Slider } from 'antd';
+import styles from './index.less';
+
+const { Option } = Select;
+const TableLayoutFormItems = (props) => {
+  const { defaultTableWidth, defaultTableHeight } = props;
+  return <>
+    <Form.Item
+      label="宽度"
+      name="width"
+      initialValue={defaultTableWidth}
+    >
+      <Slider/>
+    </Form.Item>
+    <Form.Item
+      label="高度"
+      name="height"
+      initialValue={defaultTableHeight}
+    >
+      <Slider/>
+    </Form.Item>
+    <Form.Item
+      label="标题"
+      name="title"
+      rules={[
+        {
+          required: true,
+          message: '标题必填',
+        },
+      ]}
+    >
+      <Input/>
+    </Form.Item>
+  </>;
+};
+const OthersFormItems = () => {
+  return <>
+    <Form.Item label="标题" name="text">
+      <Input/>
+    </Form.Item>
+    <Form.Item label="字体大小" name="fontSize" initialValue={14}>
+      <InputNumber/>
+    </Form.Item>
+    <Form.Item
+      label="字体颜色"
+      name="fontColor"
+      initialValue={'#000000'}
+    >
+      <Input type="color" style={{ width: 70 }}/>
+    </Form.Item>
+    <Row className={styles.commonTitle}>y轴配置</Row>
+    <Form.Item label="轴1名称" name="yAxisName">
+      <Input/>
+    </Form.Item>
+    <Form.Item label="轴2名称" name="yAxisName2">
+      <Input/>
+    </Form.Item>
+    <Row className={styles.commonTitle}>其他配置</Row>
+    <Form.Item
+      label="图例位置"
+      name="legendPosition"
+      initialValue={'right'}
+    >
+      <Select>
+        <Option value="left">左</Option>
+        <Option value="center">中</Option>
+        <Option value="right">右</Option>
+      </Select>
+    </Form.Item>
+
+    <Form.Item label="图表布局">
+      <Form.Item label="左" name="left" initialValue={20}>
+        <InputNumber/>
+      </Form.Item>
+      <Form.Item label="右" name="right" initialValue={20}>
+        <InputNumber/>
+      </Form.Item>
+      <Form.Item label="上" name="top" initialValue={20}>
+        <InputNumber/>
+      </Form.Item>
+      <Form.Item label="下" name="bottom" initialValue={20}>
+        <InputNumber/>
+      </Form.Item>
+    </Form.Item>
+    <Form.Item
+      label="数据缩放"
+      name="showDataZoom"
+      valuePropName="checked"
+    >
+      <Switch/>
+    </Form.Item>
+  </>;
+};
+export {
+  OthersFormItems, TableLayoutFormItems,
+};

packages/base-components/BasicReport/src/ReportsManage/Components/ChartConfig/index.js

+import { reportService } from '../../../api';
+import { LeftOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  notification,
+  Radio,
+  Row,
+  Select,
+  Slider,
+  Switch,
+  Space,
+  Tooltip,
+} from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { BasicChart } from '@wisdom-components/basicchart';
+import styles from './index.less';
+import {
+  OthersFormItems,
+  TableLayoutFormItems,
+} from './forms';
+import {
+  defaultLayoutOptions,
+  defaultChartOptions,
+  handleCustomConfig,
+  handleOthers,
+  handleSeries, handleTitle, defaultConfig,
+} from './utils';
+import { returnFields, returnOptionsArr } from '../../utils/handleOption';
+import ReportsManage from '../../ReportsManage';
+import { cloneDeep } from 'lodash';
+
+const layoutOptions = [
+  { label: '上图下表', value: '上图下表', imgSrc: '' },
+  { label: '上表下图', value: '上表下图', imgSrc: '' },
+  { label: '左表右图', value: '左表右图', imgSrc: '' },
+  { label: '左图右表', value: '左图右表', imgSrc: '' },
+];
+const verticalLayout = ['上表下图', '上图下表'];
+const horizontalLayout = ['左表右图', '左图右表'];
+
+const markPointOption = [
+  { label: '最大值', value: 'max' },
+  { label: '最小值', value: 'min' },
+  { label: '平均值', value: 'average' },
+];
+const { Option } = Select;
+const defaultTableWidth = 100;
+const defaultTableHeight = 50;
+const defaultChartListConfig = [
+  {
+    key: '图形1',
+  },
+];
+const ChartConfig = (props) => {
+  const { setCurrentPage, currentReport } = props;
+  const currentReportId = currentReport?.id ?? 0;
+  const [layoutType, setLayoutType] = useState('上表下图');
+  const [chartNum, setChartNum] = useState(1);
+  const [chartList, setChartList] = useState([]);
+  const [tableWidth, setTableWidth] = useState(defaultTableWidth);
+  const [tableHeight, setTableHeight] = useState(defaultTableHeight);
+  const [configData, setConfigData] = useState([]);
+  const [curChartIndex, setCurChartIndex] = useState(0);
+  const [curChart, setCurChart] = useState(defaultChartListConfig); // 默认第一个图形
+  // const [xDataType, setXDataType] = useState('selectedData'); // x轴坐标
+  const [xDataType, setXDataType] = useState(''); // x轴坐标
+
+  const [columnsData, setColumnsData] = useState([]);
+  const [reportData, setReportData] = useState([]);
+  const [optionsList, setOptionsList] = useState([]);
+  // const [chartType, setChartType] = useState('');
+  const [curId, setCurId] = useState('');
+  const [isEditing, setIsEditing] = useState(false);
+  const [tableForm] = Form.useForm(null);
+  const [chartForm] = Form.useForm(null);
+
+  // const seriesData = Form.useWatch('seriesData', chartForm);
+  const [seriesData, setSeriesData] = useState([]);
+
+  const xAxisData = Form.useWatch('xAxisData', chartForm);
+  const width = Form.useWatch('width', chartForm);
+  const height = Form.useWatch('height', chartForm);
+  const chartType = Form.useWatch('chartType', chartForm);
+  const seriesArray = Form.useWatch('seriesArray', chartForm);
+
+  const reportRef = useRef();
+  const jsonDataRef = useRef({
+    optionConsturctor: {
+      layoutOptions: {
+        layout: layoutType,
+        chartCount: chartNum,
+        tableConfigs: [],
+        chartConfigs: [],
+      },
+      chartOptions: [],
+    },
+  });
+
+  const trigger = (str) => {
+    let _data = reportRef?.current?.getData();
+    setReportData(_data);
+  };
+  const calculateMaxValue = (key, arr, current) => {
+    let _maxValue = 100;
+    let _value = arr.filter(item => item.key !== current.key).map(item => {
+      return Number(item.options.custom_style[key].replace('%', ''));
+    }).reduce((final, cur) => (final + cur), 0);
+    return _maxValue - _value;
+  };
+  const returnChartOptions = async (chartList) => {
+    let columns = returnFields(JSON.stringify(chartList));
+    let _data = [];
+    // 如果没有columns表明是初始化时，无需请求数据，此时图表渲染出来的话，会是空白
+    if (columns.length) {
+      let _request = await reportService.getChartConfigDataByColumn({ reportName: currentReport.reportName, columns });
+      if (_request.code === 0) {
+        _data = _request.data.data;
+      }
+    }
+    let _keys = chartList.map(item => item.key);
+    let _options = chartList.map(item => item.options);
+    let _opts = returnOptionsArr(_options, _data, reportData.selectedRows);
+    setOptionsList(_opts.map((item, index) => ({ key: _keys[index], options: item })));
+  };
+  useEffect(() => {
+    let _list = chartList.filter(item => item.options && item.options.series);
+    if (_list.length) {
+      returnChartOptions(_list);
+    }
+  }, [chartList]);
+  // 图容器
+  const renderChartWrap = useMemo(() => {
+    return (
+      <div className={styles.chartWrapper}>
+        {optionsList.map((item, index) => (
+          <div
+            className={classNames(
+              styles.chartItem,
+              curChartIndex === index ? styles.activeChart : '',
+            )}
+            key={item.key}
+            onClick={() => clickChart(chartList[index], index)}
+            style={{
+              width: item?.options?.custom_style?.width ?? 'auto',
+              height: item?.options?.custom_style?.height ?? 'auto',
+            }}
+          >
+            {
+              item.options ? <div style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>
+                <BasicChart option={item.options}/>
+              </div> : item.key
+            }
+          </div>
+        ))}
+      </div>
+    );
+  }, [curChartIndex, chartList, optionsList, layoutType, chartNum]);
+
+  // 表格容器
+  const renderTableWrap = useMemo(() => {
+    return (
+      <div
+        className={styles.tableWrapper}
+        style={{
+          width: tableWidth,
+          height: tableHeight,
+        }}
+      >
+        {/*图表1*/}
+        <ReportsManage params={{ reportName: currentReport.reportName, customState: [] }}
+                       style={{ width: '100%', height: '100%' }} ref={reportRef} trigger={trigger}/>
+      </div>
+    );
+  }, [tableWidth, tableHeight, currentReport]);
+
+  // 渲染左侧布局
+  const renderLayout = () => {
+    switch (layoutType) {
+      case '上图下表':
+        return (
+          <div
+            className={classNames(styles.layoutWrapper, styles.columnLayout)}
+          >
+            {renderChartWrap}
+            {renderTableWrap}
+          </div>
+        );
+
+      case '上表下图':
+        return (
+          <div
+            className={classNames(styles.layoutWrapper, styles.columnLayout)}
+          >
+            {renderTableWrap}
+            {renderChartWrap}
+          </div>
+        );
+
+      case '左表右图':
+        return (
+          <div className={classNames(styles.layoutWrapper, styles.rowLayout)}>
+            {renderTableWrap}
+            {renderChartWrap}
+          </div>
+        );
+
+      case '左图右表':
+        return (
+          <div className={classNames(styles.layoutWrapper, styles.rowLayout)}>
+            {renderChartWrap}
+            {renderTableWrap}
+          </div>
+        );
+    }
+  };
+
+  // 点击单个chart
+  const clickChart = (item, index) => {
+    setCurChartIndex(index);
+    setCurChart(item);
+    //更新右侧面板form表单数据
+    updateFormData(item.options);
+  };
+
+  // 更新表单数据
+  const updateFormData = (data) => {
+    // 如果data不存在,可能是未配置的图形,此时需要重置表单
+    if (!data) {
+      chartForm.resetFields();
+      // setChartType('');
+      setXDataType('selectedData');
+    }
+    const _xDataType = data.custom_config.renderBy;
+    const _xAxisData =
+      _xDataType === 'selectedData'
+        ? data.xAxis.data
+        : extraText(data.xAxis.data);
+    const _seriesData = data.series.map(item => {
+      let _str = extraText(item.data);
+      return _str;
+    });
+    const _seriesArray = data.series.map(item => {
+      return {
+        chartType: item.type,
+        // chartName: item.name,
+        unit: item.custom_config.unit,
+        markPoint: item.markPoint.data,
+        markLine: item.markLine.data,
+      };
+    });
+    setXDataType(_xDataType);
+    setSeriesData(_seriesData);
+    chartForm.setFieldsValue({
+      width: data.custom_style.width.match(/\d+/)?.[0],
+      height: data.custom_style.height.match(/\d+/)?.[0],
+      xAxisType: data.xAxis.type,
+      xDataType: _xDataType,
+      xAxisData: _xAxisData?.split(',') || [],
+      xAxisName: data.xAxis.name,
+      // barWidth:
+      // seriesData: _seriesData,
+      seriesArray: _seriesArray,
+      // chartColor: data.color,
+      showTitle: data.title.show,
+      text: data.title.text,
+      fontSize: data.title.textStyle.fontSize,
+      fontColor: data.title.textStyle.color,
+      yAxisName: data.yAxis[0].name,
+      left: data.grid.left,
+      right: data.grid.right,
+      top: data.grid.top,
+      bottom: data.grid.bottom,
+      showDataZoom: data.dataZoom.show,
+      legendPosition: data.legend.left,
+    });
+  };
+
+  // 处理字符串 提取纯文字
+  const extraText = (str) => {
+    if (!str) return void 0;
+    const text = str.slice(2, str.length - 1);
+    return text;
+  };
+
+  // 图形数量
+  const onChangeNum = (e) => {
+    const num = e.target.value;
+    // 判断num是否大于chartList的长度，大于则赋值add，小于则赋值delete
+    const type = num > chartList.length ? 'add' : 'delete';
+    let newArr = [];
+    if (type === 'add') {
+      newArr = chartList.concat();
+      for (let i = 0; i < num - chartList.length; i++) {
+        let _defaultOptions = cloneDeep(defaultChartOptions);
+        newArr.push({
+          key: `图形${chartList.length + i + 1}`,
+          options: _defaultOptions,
+        });
+      }
+    }
+    if (type === 'delete') {
+      newArr = chartList.slice(0, num);
+    }
+    newArr = newArr.map((item, index) => {
+      if (num === 1) {
+        item.options.custom_style = {
+          width: '100%',
+          height: '100%',
+        };
+      }
+      if (num === 2) {
+        item.options.custom_style = {
+          width: verticalLayout.includes(layoutType) ? '50%' : '100%',
+          height: horizontalLayout.includes(layoutType) ? '50%' : '100%',
+        };
+      }
+      if (num === 3) {
+        if (index === 0) {
+          item.options.custom_style = {
+            width: verticalLayout.includes(layoutType) ? '34%' : '100%',
+            height: horizontalLayout.includes(layoutType) ? '34%' : '100%',
+          };
+        } else {
+          item.options.custom_style = {
+            width: verticalLayout.includes(layoutType) ? '33%' : '100%',
+            height: horizontalLayout.includes(layoutType) ? '33%' : '100%',
+          };
+        }
+      }
+      return item;
+    });
+    setChartList(newArr);
+    setChartNum(num);
+  };
+
+  // 表格表单字段变化
+  const onTableFormChange = (changedValues, allValues) => {
+    const field = Object.keys(changedValues)[0];
+    const fieldValue = changedValues[field];
+    switch (field) {
+      case 'width':
+        setTableWidth(fieldValue + '%');
+        break;
+      case 'height':
+        setTableHeight(fieldValue + '%');
+        break;
+      default:
+        break;
+    }
+  };
+
+  // 图形表单字段变化
+  const onChartFormChange = (changedValues, allValues, index) => {
+    const field = Object.keys(changedValues)[0];
+    const fieldValue = changedValues[field];
+    if (field === 'xDataType') {
+      setXDataType(fieldValue);
+    }
+    if (field === 'chartType') {
+      // setChartType(fieldValue);
+    }
+    if (field === 'showDataZoom' && fieldValue) {
+      chartForm.setFieldsValue({ bottom: 40 });
+    }
+  };
+
+  // 提交
+  const handleOptions = (tableFormData) => {
+    const _chartOptions = chartList
+      .filter((item) => !!item.options)
+      .map((v) => v.options);
+    // 表格配置数据
+    const tableConfigs = [
+      {
+        title: tableFormData.title,
+        width: tableFormData.width + '%',
+        height: tableFormData.height + '%',
+      },
+    ];
+    jsonDataRef.current.optionConsturctor.layoutOptions = {
+      layout: layoutType,
+      chartCount: chartNum,
+      tableConfigs: tableConfigs,
+    };
+    jsonDataRef.current.optionConsturctor.chartOptions = _chartOptions;
+    return JSON.stringify(jsonDataRef.current.optionConsturctor);
+  };
+  const onSubmit = async () => {
+    // 表格相关配置
+    const tableFormData = await tableForm.validateFields();
+    let _data = handleOptions(tableFormData);
+    saveConfig(_data);
+  };
+
+  // 调用保存接口
+  const saveConfig = async (jsonData) => {
+    const data = {
+      id: curId || undefined,
+      reportID: currentReportId,
+      configInfo: jsonData,
+    };
+    const res = await reportService.saveChartConfig(data);
+    if (res.code === 0) {
+      message.success('配置成功!');
+      getChartConfig();
+    } else {
+      notification.error({
+        message: `请求错误`,
+        description: res?.msg ?? '',
+      });
+    }
+  };
+  useEffect(() => {
+    if (chartList.length) {
+      saveFormData('modify');
+    }
+  }, [width, height]);
+  // 保存当前图形form表单数据
+  const saveFormData = async (type) => {
+    let form = {};
+
+    if (type === 'save') form = await chartForm.validateFields();
+    if (type === 'modify') form = await chartForm.getFieldsValue();
+
+    // x轴数据 格式如下:
+    // selectedData: [data1,data2...]
+    // allData: ${data1}
+
+    const _title = handleTitle(form);
+    const _series = handleSeries(form, seriesData, markPointOption);
+    const _others = handleOthers(form);
+    const _custom = handleCustomConfig(form);
+    const xData =
+      form.xDataType === 'selectedData'
+        ? form.xAxisData
+        : (form.xAxisData ? '${' + form.xAxisData + '}' : '');
+    const _options = {
+      ..._custom,
+      ..._title,
+      ..._series,
+      ..._others,
+      xAxis: {
+        name: form?.xAxisName ?? '',
+        type: form.xAxisType,
+        data: xData,
+      },
+      yAxis:
+        form?.yAxisName2 ?? ''
+          ? [
+            {
+              name: form?.yAxisName ?? '',
+              gridIndex: 0,
+            },
+            {
+              name: form?.yAxisName2 ?? '',
+              gridIndex: 1,
+            },
+          ]
+          : [
+            {
+              name: form?.yAxisName ?? '',
+              gridIndex: 0,
+            },
+          ],
+    };
+    const newData = [...chartList];
+    newData[curChartIndex].options = _options;
+    setChartList(newData);
+  };
+
+  const getChartConfig = async () => {
+    const res = await reportService.getChartConfig({
+      reportName: currentReport.reportName,
+    });
+    if (res.code === 0) {
+      const data = res?.data?.configInfo
+        ? JSON.parse(res.data.configInfo)
+        : cloneDeep(defaultConfig);
+      let { chartOptions, layoutOptions } = data;
+      // 无设置，即初始化时，给定默认配置
+      layoutOptions.tableConfigs[0].title = `${currentReport.reportName}`;
+      // 有设置
+      const _chartList = chartOptions.map((item, index) => ({
+        options: item,
+        key: '图形' + (index + 1),
+      }));
+      updateFormData(_chartList?.[0]?.options);
+      setCurChartIndex(0);
+      setCurId(res?.data?.id ?? '');
+      setCurChart(_chartList[0]);
+      setChartList(_chartList);
+      dealTableConfig(layoutOptions);
+      setChartNum(layoutOptions.chartCount);
+    }
+  };
+
+  // 回填表格配置
+  const dealTableConfig = (data) => {
+    const { layout, tableConfigs } = data;
+    const tableWidth = tableConfigs[0].width;
+    const tableHeight = tableConfigs[0].height;
+    setTableWidth(tableWidth);
+    setTableHeight(tableHeight);
+    setLayoutType(layout);
+    tableForm.setFieldsValue({
+      width: tableWidth.match(/\d+/)?.[0],
+      height: tableHeight.match(/\d+/)?.[0],
+      title: tableConfigs[0].title,
+    });
+  };
+
+  // 获取配置数据
+  const getConfig = async () => {
+    const params = {
+      reportName: currentReport.reportName,
+    };
+    const res = await reportService.getReportDetails(params);
+    if (res.code === 0) {
+      const data = (res?.data?.data || []).map((v) => ({
+        label: v.fieldAlias,
+        value: v.fieldAlias,
+      }));
+      setConfigData(data);
+    }
+  };
+  const setTableSize = (e) => {
+    const _map = {
+      horizontal: {
+        width: '100%',
+        height: '70%',
+      },
+      vertical: {
+        width: '70%',
+        height: '100%',
+      },
+    };
+    let _obj = {};
+    if (horizontalLayout.includes(e)) {
+      _obj = _map.horizontal;
+    } else {
+      _obj = _map.vertical;
+    }
+    // 设置报表宽度
+    let { width, height } = _obj;
+    setTableHeight(height);
+    setTableWidth(width);
+    tableForm.setFieldsValue({
+      width: width.match(/\d+/)?.[0],
+      height: height.match(/\d+/)?.[0],
+    });
+    // 设置图表宽度
+  };
+  const widthMax = useMemo(() => {
+    return verticalLayout.includes(layoutType) ? calculateMaxValue('width', chartList, curChart) : 100;
+  }, [layoutType, chartList, curChart]);
+  const heightMax = useMemo(() => {
+    return verticalLayout.includes(layoutType) ? 100 : calculateMaxValue('height', chartList, curChart);
+  }, []);
+  const clickPanel = (e) => {
+    if (!isEditing) {
+      message.info('请点击编辑按钮后，进行编辑');
+    }
+  };
+  // form其他props
+  const formFrops = {
+    labelAlign: 'right',
+    labelCol: { span: 4, offset: 2 },
+    wrapperCol: { span: 14 },
+  };
+  const allDataForm = () => (
+    <>
+      <Form.Item
+        label="图形数据"
+        rules={[
+          {
+            required: true,
+            message: '数据来源必填',
+          },
+        ]}
+        extra={returnSeriesExtra}
+      >
+        <Select value={seriesData} mode="multiple"
+                onChange={(e) => {
+                  setSeriesData(e);
+                }}
+                allowClear options={configData}
+                placeholder={'请选择图形数据来源字段'}/>
+      </Form.Item>
+      <Form.Item
+        label="类型"
+        name={'chartType'}
+        rules={[
+          {
+            required: true,
+            message: '类型必选',
+          },
+        ]}
+      >
+        <Select>
+          <Option value="line">折线图</Option>
+          <Option value="bar">柱状图</Option>
+          <Option value="pie">饼图</Option>
+        </Select>
+      </Form.Item>
+      {chartType === 'bar' && (
+        <>
+          <Form.Item label="柱条宽度" name={'barWidth'}>
+            <Slider/>
+          </Form.Item>
+        </>
+      )}
+      {/*      <Form.Item label="图形名称"
+                 name={'chartName'}
+                 rules={[
+                   {
+                     // required: true,
+                     message: '图形名称必填',
+                   },
+                 ]}
+      >
+        <Input/>
+      </Form.Item>*/}
+
+      <Form.Item label="单位" name={'unit'}>
+        <Input/>
+      </Form.Item>
+      <Form.Item label="标注点" name={'markPoint'}>
+        <Select mode="multiple" allowClear options={markPointOption}/>
+      </Form.Item>
+      <Form.Item label="标注线" name={'markLine'}>
+        <Select mode="multiple" allowClear options={markPointOption}/>
+      </Form.Item>
+    </>
+  );
+  const returnSeriesExtra = useMemo(() => {
+    if (seriesData?.length) {
+      if (xDataType === 'selectedData') return seriesData?.length > 1 ? `图形的系列名称的格式为${seriesData.join('-')}` : `图形系列的名称为${seriesData.join('')}列的数据`;
+      if (xDataType === 'allData') return seriesData?.length > 1 ? `图形将展示${seriesData.join(',')}列的数据，请分别配置属性` : `图形将展示${seriesData.join('')}列的数据`;
+    }
+    return '';
+  }, [seriesData, xDataType]);
+  const returnXAxisExtra = useMemo(() => {
+    if (xAxisData?.length) {
+      if (xDataType === 'selectedData') return `x轴坐标分别为${xAxisData.join('，')}`;
+      if (xDataType === 'allData') return xAxisData.length === 1 ? `x轴坐标为${xAxisData}列的值` : `x轴坐标为拼接选中${xAxisData.length}列的数据，形式为${xAxisData.join('-')}`;
+    }
+    return '';
+  }, [xAxisData]);
+  useEffect(() => {
+    if (currentReportId) {
+      getChartConfig();
+      getConfig();
+    }
+  }, []);
+  return (
+    <div className={styles.chartConfig}>
+      <Row className={styles.controlRow}>
+        <LeftOutlined
+          className={styles.leftBtn}
+          onClick={() => {
+            setCurrentPage('报表列表');
+          }}
+        />
+        <Form layout={'inline'}>
+          <Form.Item label={'图表布局'}>
+            <Select
+              options={layoutOptions}
+              onChange={(e) => {
+                setTableSize(e);
+                setLayoutType(e);
+              }}
+              value={layoutType}
+            />
+          </Form.Item>
+
+          <Form.Item label={'图形数量'}>
+            <Radio.Group onChange={onChangeNum} value={chartNum}>
+              <Radio value={1}>1</Radio>
+              <Radio value={2}>2</Radio>
+              <Radio value={3}>3</Radio>
+            </Radio.Group>
+          </Form.Item>
+        </Form>
+      </Row>
+      <div className={styles.contentWrapper}>
+        <div className={styles.leftLayout}>{renderLayout()}</div>
+        <div className={styles.rightPanel}>
+          <div className={styles.configForm}>
+            <Row className={styles.titleWrap}>表格配置</Row>
+            <Form
+              form={tableForm}
+              {...formFrops}
+              onValuesChange={onTableFormChange}
+              className={styles.tableFormWrap}
+            >
+              <TableLayoutFormItems defaultTableWidth={defaultTableWidth} defaultTableHeight={defaultTableHeight}/>
+            </Form>
+            <Row className={styles.titleWrap}>{curChart.key}配置</Row>
+            <Row className={styles.saveBtnWrap}>
+              <Tooltip title={'点击按钮进入、退出编辑状态。请注意及时保存配置！'}><QuestionCircleOutlined/></Tooltip>
+              <Button onClick={() => setIsEditing(!isEditing)}>{isEditing ? '退出编辑' : '编辑'}</Button>
+            </Row>
+            <Form
+              form={chartForm}
+              onValuesChange={(changedValues, allValues) =>
+                onChartFormChange(changedValues, allValues)
+              }
+              {...formFrops}
+              className={classNames(styles.chartFormWrap, 'wkt-scroll-light')}
+            >
+              <div className={classNames(isEditing ? '' : styles.pointerEvents)}>
+                <Row className={styles.commonTitle}>宽高配置</Row>
+                <Form.Item label="宽度" name="width">
+                  <InputNumber min={0} max={widthMax} disabled={horizontalLayout.includes(layoutType)}/>
+                </Form.Item>
+                <Form.Item label="高度" name="height">
+                  <InputNumber min={0} max={heightMax} disabled={verticalLayout.includes(layoutType)}/>
+                </Form.Item>
+                <Row className={styles.commonTitle}>x轴配置</Row>
+                <Form.Item
+                  label="x轴类型"
+                  name="xAxisType"
+                  initialValue={'category'}
+                >
+                  <Radio.Group>
+                    <Radio value="category">分类、周期、个体等</Radio>
+                    <Radio value="time">时间</Radio>
+                  </Radio.Group>
+                </Form.Item>
+                <Form.Item
+                  label="x轴坐标"
+                  name="xDataType"
+                  initialValue={'selectedData'}
+                  rules={[
+                    {
+                      required: true,
+                      message: '必选',
+                    },
+                  ]}
+                >
+                  <Radio.Group>
+                    <Radio value="allData">表内数据</Radio>
+                    <Radio value="selectedData">表头数据</Radio>
+                  </Radio.Group>
+                </Form.Item>
+                <Form.Item
+                  label="x轴数据源"
+                  name="xAxisData"
+                  rules={[
+                    {
+                      required: true,
+                      message: 'x轴数据源必填',
+                    },
+                  ]}
+                  extra={returnXAxisExtra}
+                >
+                  <Select placeholder={'请勾选x轴需要的字段'} mode="multiple" allowClear options={configData}/>
+                </Form.Item>
+
+                <Form.Item label="轴名称" name="xAxisName">
+                  <Input placeholder={'指定轴的名称，非必填'}/>
+                </Form.Item>
+
+                <Row className={styles.commonTitle}>图形配置</Row>
+                {
+                  xDataType === 'allData' ? <Form.List name={'seriesArray'}>
+                    {
+                      (fields, { add, remove }) => (
+                        <>
+                          <Form.Item
+                            label={<span><span style={{ color: 'red', marginRight: 4 }}>*</span>图形数据</span>}
+                            rules={[
+                              {
+                                required: true,
+                                message: '数据来源必填',
+                              },
+                            ]}
+                            extra={returnSeriesExtra}
+                          >
+                            <Select mode="multiple"
+                                    value={seriesData}
+                                    onSelect={() => add()}
+                                    onDeselect={(e) => {
+                                      let _index = seriesData.findIndex(list => list === e);
+                                      remove(_index);
+                                    }}
+                                    onChange={(e) => {
+                                      setSeriesData(e);
+                                    }}
+                                    allowClear options={configData}
+                                    placeholder={'请选择图形数据来源字段'}/>
+                          </Form.Item>
+                          {
+                            fields.map((item, index) => (
+                              <div key={`${item.key}_${index}`}>
+                                <Form.Item colon={false}
+                                           label={<span style={{ fontWeight: 'bold' }}>{seriesData?.[index]}</span>}/>
+                                <Form.Item
+                                  label="类型"
+                                  name={[item.name, 'chartType']}
+                                  rules={[
+                                    {
+                                      required: true,
+                                      message: '类型必选',
+                                    },
+                                  ]}
+                                >
+                                  <Select>
+                                    <Option value="line">折线图</Option>
+                                    <Option value="bar">柱状图</Option>
+                                    <Option value="pie">饼图</Option>
+                                  </Select>
+                                </Form.Item>
+                                <Form.Item hidden={seriesArray?.[index]?.chartType !== 'bar'} label="柱条宽度"
+                                           name={[item.name, 'barWidth']}>
+                                  <Slider/>
+                                </Form.Item>
+                                {/*                                <Form.Item
+                                  style={{ pointerEvents: 'none' }}
+                                  label="图形名称"
+                                  name={[item.name, 'chartName']}
+                                  rules={[
+                                    {
+                                      // required: true,
+                                      message: '图形名称必填',
+                                    },
+                                  ]}
+                                >
+                                  <Input/>
+                                </Form.Item>*/}
+
+                                <Form.Item label="单位" name={[item.name, 'unit']}>
+                                  <Input/>
+                                </Form.Item>
+                                <Form.Item label="标注点" name={[item.name, 'markPoint']}>
+                                  <Select mode="multiple" allowClear options={markPointOption}/>
+                                </Form.Item>
+                                <Form.Item label="标注线" name={[item.name, 'markLine']}>
+                                  <Select mode="multiple" allowClear options={markPointOption}/>
+                                </Form.Item>
+                              </div>
+                            ))
+                          }
+                        </>
+                      )
+                    }
+                  </Form.List> : ''
+                }
+                {
+                  xDataType === 'selectedData' ? <>
+                    {allDataForm()}
+                  </> : ''
+                }
+                <Row className={styles.commonTitle}>标题配置</Row>
+                <Form.Item
+                  label="图表标题"
+                  name="showTitle"
+                  valuePropName="checked"
+                >
+                  <Switch/>
+                </Form.Item>
+                {/*包含标题、y轴等非必要的设置*/}
+                <OthersFormItems/>
+              </div>
+
+            </Form>
+          </div>
+          <div className={styles.submitWrap}>
+            <Button
+              style={{ marginLeft: 10 }}
+              className={styles.submitBtn}
+              type="primary"
+              onClick={onSubmit}
+            >
+              提交
+            </Button>
+            <Button type="primary" onClick={() => saveFormData('save')}>
+              预览
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ChartConfig;

packages/base-components/BasicReport/src/ReportsManage/Components/ChartConfig/index.less

+.chartConfig {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+
+  .controlRow {
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+    height: 44px;
+    padding: 6px;
+    background: #ffffff;
+
+    .leftBtn {
+      font-size: 18px;
+      font-weight: bold;
+      cursor: pointer;
+      margin-right: 10px;
+
+      &:hover {
+        color: #1685FF;
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .contentWrapper {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    column-gap: 8px;
+    overflow: hidden;
+
+    :global {
+      .@{ant-prefix}-form-item {
+        margin-bottom: 8px;
+      }
+
+      .@{ant-prefix}-input-number {
+        width: 100%;
+      }
+    }
+
+    .leftLayout {
+      flex: 1;
+      height: 100%;
+      padding: 8px;
+      background: #fff;
+      overflow: auto;
+
+      .layoutWrapper {
+        width: 100%;
+        height: 100%;
+        display: flex;
+
+
+        .chartWrapper {
+          display: flex;
+          column-gap: 8px;
+          flex: 1;
+          overflow: hidden;
+
+          .chartItem {
+            border: 1px dashed #3d3d3d;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+
+            &.activeChart {
+              //background: #1685FF;
+              border-color: #1685FF;
+              color: #fff;
+            }
+          }
+        }
+
+        .tableWrapper {
+          border: 1px dashed #3d3d3d;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+
+        // 上下布局
+        &.columnLayout {
+          flex-direction: column;
+          row-gap: 8px;
+
+          .tableWrapper {
+            width: 100%;
+            height: 50%;
+          }
+
+          .chartWrapper {
+            width: 100%;
+            flex: 1;
+            .chartItem {
+              //flex: 1;
+              width: 100%;
+              border: 1px dashed #333;
+              &.activeChart {
+                border-color: #1685FF;
+                color: #fff;
+              }
+            }
+          }
+        }
+
+        // 左右布局
+        &.rowLayout {
+          column-gap: 8px;
+
+          .chartWrapper {
+            display: flex;
+            flex-direction: column;
+            row-gap: 8px;
+
+            .chartItem {
+              //flex: 1;
+              width: 100%;
+              border: 1px dashed #333;
+              &.activeChart {
+                border-color: #1685FF;
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+
+
+    }
+
+    .rightPanel {
+      flex: none;
+      width: 500px;
+      height: 100%;
+      background: #fff;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+
+      .configForm {
+        width: 100%;
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+
+        .titleWrap {
+          display: flex;
+          height: 40px;
+          flex: none;
+          justify-content: center;
+          align-items: center;
+          background: #1685FF;
+          color: #ffffff;
+        }
+
+        .tableFormWrap {
+          flex: none;
+        }
+
+        .commonTitle {
+          position: relative;
+          padding-left: 20px;
+
+          &::before {
+            position: absolute;
+            top: 50%;
+            left: 8px;
+            transform: translateY(-50%);
+            content: '';
+            width: 3px;
+            height: 14px;
+            background: #1685FF;
+          }
+        }
+
+        .saveBtnWrap {
+          flex-direction: row-reverse;
+          column-gap: 4px;
+          padding: 0 12px;
+          margin-top: 8px;
+          align-items: center;
+        }
+
+        .chartFormWrap {
+          flex: 1;
+          overflow: auto;
+
+          .pointerEvents {
+            pointer-events: none;
+          }
+        }
+      }
+
+
+      .submitWrap {
+        width: 100%;
+        height: 40px;
+        flex: none;
+        display: flex;
+        align-items: center;
+        flex-direction: row-reverse;
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+      }
+
+    }
+  }
+}

packages/base-components/BasicReport/src/ReportsManage/Components/ChartConfig/utils.js

+const handleMarkLineOrMarkPoint = (options, arr) => {
+  return options
+    .filter((item) => arr?.includes(item.value))
+    ?.map((v) => ({
+      type: v.value,
+      name: v.label,
+    }));
+};
+const handleSeries = (form, seriesData, option) => {
+  let series = form?.seriesArray?.map((item, index) => {
+    let _temp = {
+      type: item.chartType,
+      // name: item?.chartName ?? '',
+      colorBy: 'series',
+      data:
+        form.xDataType === 'selectedData'
+          ? `$[${form.seriesData}]`
+          : '${' + seriesData[index] + '}',
+      custom_config: {
+        unit: item?.unit ?? '',
+      },
+    };
+    _temp.markPoint = {
+      data: handleMarkLineOrMarkPoint(option, item.markPoint),
+    };
+    _temp.markLine = {
+      data: handleMarkLineOrMarkPoint(option, item.markLine),
+    };
+    return _temp;
+  });
+  return {
+    series,
+  };
+};
+const handleOthers = (form) => {
+  let legend = {
+    left: form.legendPosition ?? '',
+  };
+  let grid = {
+    left: form.left,
+    right: form.right,
+    top: form.top,
+    bottom: form.bottom,
+  };
+  let dataZoom = {
+    show: form?.showDataZoom ?? false,
+  };
+  return { legend, grid, dataZoom };
+};
+const handleCustomConfig = (form) => {
+  return {
+    custom_style: {
+      width: form.width + '%',
+      height: form.height + '%',
+    },
+    custom_config: {
+      renderBy: form.xDataType,
+    },
+  };
+};
+const handleTitle = (form) => {
+  return {
+    title: {
+      show: form?.showTitle ?? false,
+      text: form?.text ?? '',
+      textStyle: {
+        color: form?.fontColor ?? '',
+        fontSize: form.fontSize,
+      },
+    },
+  };
+};
+const defaultChartOptions = {
+  'custom_style': {
+    'width': '',
+    'height': '',
+  },
+  'custom_config': {
+    'renderBy': 'allData',
+  },
+  'title': {
+    'show': false,
+    'text': '',
+    'textStyle': {
+      'color': '#000000',
+      'fontSize': 14,
+    },
+  },
+  'series': [],
+  'legend': {
+    'left': 'right',
+  },
+  'grid': {
+    'left': 20,
+    'right': 20,
+    'top': 20,
+    'bottom': 20,
+  },
+  'dataZoom': {
+    'show': false,
+  },
+  'xAxis': {
+    'name': '',
+    'type': 'category',
+    'data': '',
+  },
+  'yAxis': [
+    {
+      'name': '',
+      'gridIndex': 0,
+    },
+  ],
+};
+const defaultLayoutOptions = {
+  'layout': '上表下图',
+  'chartCount': 1,
+  'tableConfigs': [
+    {
+      'title': '',
+      'width': '100%',
+      'height': '70%',
+    },
+  ],
+};
+const defaultConfig = {
+  'layoutOptions': {
+    'layout': '上表下图',
+    'chartCount': 1,
+    'tableConfigs': [
+      {
+        'title': '',
+        'width': '100%',
+        'height': '60%',
+      },
+    ],
+  },
+  'chartOptions': [
+    {
+      'custom_style': {
+        'width': '100%',
+        'height': '100%',
+      },
+      'custom_config': {
+        'renderBy': 'allData',
+      },
+      'title': {
+        'text': '',
+        'textStyle': {
+          'color': '#000000',
+          'fontSize': 14,
+        },
+      },
+      'xAxis': {
+        'name': '',
+        'type': 'category',
+        'data': '',
+      },
+      'yAxis': [
+        {
+          'name': '',
+          'gridIndex': 0,
+        },
+      ],
+      'series': [],
+      'legend': {
+        'left': 'right',
+      },
+      'grid': {
+        'left': 20,
+        'right': 20,
+        'top': 20,
+        'bottom': 20,
+      },
+      'dataZoom': {
+        show: false,
+      },
+    },
+  ],
+};
+const calculateWidth = () => {
+
+};
+export {
+  handleSeries, handleOthers, handleCustomConfig, handleTitle, defaultChartOptions, defaultLayoutOptions,defaultConfig
+};

packages/base-components/BasicReport/src/ReportsManage/Components/NumberConfig/index.js

+import React, { useEffect, useState } from 'react';
+import { AutoComplete, InputNumber } from 'antd';
+import { useRef } from 'react/index';
+/**
+* @params {string} type 单元格 统计栏
+* */
+const NumberConfig = ({ value, onChange, defaultValues, type }) => {
+  const [values, setValues] = useState({
+    prefix: '',
+    suffix: '',
+    precision: '',
+    ratio: 1,
+  });
+  const wrapper = {
+    display: 'flex',
+    gap: 6,
+  };
+  const width = { width: 80 };
+  const optRef = useRef({
+    prefix: [
+      { value: '$' }, { value: '￥' },
+    ],
+    suffix: [
+      { value: '千' }, { value: '万' }, { value: '元' }, { value: '万元' },
+    ],
+    precision: [
+      { value: '0.0' }, { value: '0.00' }, { value: '0.000' }, { value: '0.0000' },
+    ],
+  });
+  const valueChange = (key, value) => {
+    let _values = { ...values };
+    _values[key] = value;
+    setValues(_values);
+    onChange(_values);
+  };
+  useEffect(() => {
+    let _values = { ...values };
+    _values.prefix = value;
+  }, [value]);
+  return <div style={wrapper}>
+    {/* 精度 倍率 前缀 后缀 类型*/}
+    <AutoComplete onChange={(e) => valueChange('prefix', e)}
+                  value={values.prefix} placeholder={'前缀'}
+                  options={optRef.current.prefix} style={{ ...width }}/>
+    <AutoComplete onChange={(e) => valueChange('suffix', e)}
+                  value={values.suffix} placeholder={'单位/后缀'}
+                  options={optRef.current.suffix}
+                  style={{ ...width, width: 100 }}/>
+    <AutoComplete onChange={(e) => valueChange('precision', e)}
+                  value={values.precision} placeholder={'精度'}
+                  options={optRef.current.precision} style={{ ...width }}/>
+    <span>倍率：<InputNumber onChange={(e) => valueChange('ratio', e)}
+                          value={values.ratio} step={1} style={{ ...width }}
+                          min={1}/></span>
+  </div>;
+};
+export default NumberConfig;

packages/base-components/BasicReport/src/ReportsManage/Components/Print/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import Simple_table from './modal/simple_table';
+
+const Print = (data, printTemp) => {
+  //创建iframe标签
+  const iframe = document.createElement('iframe');
+
+  iframe.setAttribute(
+    'style',
+    'position:absolute;width:0px;height:0px;left:500px;top:500px;size:auto;margin:0mm;',
+  );
+
+  //将iframe添加到body
+  document.body.appendChild(iframe);
+
+  //创建打印内容document对象
+  let doc = iframe.contentWindow.document;
+  let tem = '';
+
+  switch (printTemp) {
+    case 'simple_table':
+      tem = <Simple_table data={data}/>;
+      break;
+    default:
+      tem = <Simple_table data={data}/>;
+  }
+  ReactDOM.render(tem, doc);
+
+  setTimeout(() => {
+    doc.close();
+
+    //打印
+    iframe.contentWindow.focus();
+    iframe.contentWindow.print();
+
+    //清理iframe
+    if (navigator.userAgent.indexOf('MSIE') > 0) {
+      document.body.removeChild(iframe);
+    }
+  }, 1000);
+};
+
+export default Print;

packages/base-components/BasicReport/src/ReportsManage/Components/Print/modal/simple_table.js

+import moment from 'moment';
+import React, { useMemo } from 'react';
+
+const Template_record = (props) => {
+  const { data } = props;
+  const { tableData, reportName, columns } = data;
+  const handleHead = (columns) => {
+    let _rows = [];
+    let countLevel = (arr) => {
+      let _childrenArr = [];
+      let _currentRowArr = [];
+      arr.forEach((item, index) => {
+        let _item = { ...item };
+        if (_item?.children?.length) {
+          _item.hasChild = true;
+          _childrenArr = _childrenArr.concat(_item.children);
+        }
+        _currentRowArr.push(_item);
+      });
+      _rows.push(_currentRowArr);
+      if (_childrenArr.length) countLevel(_childrenArr);
+    };
+    countLevel(columns);
+    return _rows;
+  };
+  const handleCols = (columns) => {
+    let _cols = [];
+    let handleColumns = (arr) => {
+      let _childrenArr = [];
+      arr.forEach((item, index) => {
+        let _item = { ...item };
+        if (_item?.children?.length) {
+          _childrenArr = _childrenArr.concat(_item.children);
+        } else {
+          _cols.push(_item)
+        }
+      });
+      if (_childrenArr.length) handleColumns(_childrenArr);
+    };
+    handleColumns(columns);
+    return _cols;
+  }
+  const headArr = useMemo(() => {
+    return handleHead(columns);
+  }, [columns]);
+  const columnsArr = useMemo(()=>{
+    return handleCols(columns)
+  },[columns])
+  return (
+    <div style={{ padding: '0px 0px' }}>
+      <style>
+        {`@page{margin: 20px 80px 20px 80px;}table{border-collapse:collapse;font-size:10px;}
+            table,th,td{border:1px solid #333333;text-align:center;padding:3px 1px;}`}
+      </style>
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {reportName}
+      </div>
+      <div style={{ marginTop: '10px' }}>
+        <table width="100%" border="0">
+          <thead>
+          {
+            headArr.map((row, index) => {
+              return <tr>
+                {
+                  row.map(col => {
+                    return <th rowSpan={col?.children?.length ? 1 : headArr.length - index} width={`${col.width??200}px`}
+                               colSpan={col?.children?.length ?? 1}>{col.title}</th>;
+                  })
+                }
+              </tr>;
+            })
+          }
+          </thead>
+          {tableData.map((item, index) => {
+            return (
+              <tr key={`${item.r}_ ${index}`}>
+                {
+                  /**
+                   * 1. 序号没有onCell，单独输出
+                   * 2. 其他的有onCell的，按照rowSpan输出来分配位置
+                   * 3. 没有onCell的，或者rowSpan等于0的，打印的时候需要被移除
+                   * */
+                  columnsArr.map(col => {
+                    if (col.title === '序号') return <td>{item[col.dataIndex]}</td>;
+                    if (col.onCell && col.onCell(item, index).rowSpan !== 0) return <td
+                      rowSpan={col.onCell(item, index).rowSpan}>{item[col.dataIndex]}</td>;
+                    return null;
+                  }).filter(item => item)
+                }
+              </tr>
+            );
+          })}
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Template_record;

packages/base-components/BasicReport/src/ReportsManage/Components/fileUpload/fileUpload.js

@@ -34,6 +34,7 @@ import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
 import './fileUpload.less';
 import { downloadFunc, filenameVerification } from '../../utils/utils';
 import { uploadFileUrl, downloadFileUrl } from '../../../api/service/workflow';
+import {isArray} from "lodash";
 const videoTypeArray = ['.mp4'];
 const audioTypeArray = ['.mp4'];
 const fileTypeArray = [];
@@ -47,22 +48,21 @@ const FileUpload = ({ value, onChange, schema }) => {
   const [previewTitle, setPreviewTitle] = useState('');
   const [previewVisible, setPreviewVisible] = useState(false);
   const [previewUrl, setPreviewUrl] = useState('');
-  const [showList, setShowList] = useState('');
-  const file = value || schema.default;
+  const [showList, setShowList] = useState([]);
   const option = {
     name: 'file',
     action: `${window.location.origin}${uploadFileUrl}`,
     listType: _isRecordingOrVideo ? 'picture-card' : 'picture',
     withCredentials: true,
     beforeUpload(file, fileList) {
-      /** @tips: 解决提交文件中存在特殊字符的问题 */
+      /** @Tips: 解决提交文件中存在特殊字符的问题 */
       let _continueUpload = true;
       let _msg = {
         type: 'success',
         content: '上传成功！',
       };
-      fileList.forEach((item) => {
-        let _msgObject = filenameVerification(item);
+      fileList.forEach(item => {
+        let _msgObject = filenameVerification(item.name);
         if (_msgObject.type === 'error') {
           _continueUpload = false;
           _msg = {
@@ -74,9 +74,10 @@ const FileUpload = ({ value, onChange, schema }) => {
       _msg.type === 'error' ? message[_msg.type](_msg.content) : '';
       return _continueUpload;
     },
+    onRemove:()=>{return true},
     onChange: ({ file, fileList, event }) => {
       // 检验名字，名字不通过不允许显示
-      if (filenameVerification(file).type === 'error') return false;
+      if (filenameVerification(file.name).type === 'error') return false;
       // 返回的链接在file.response内；不设置url，预览图表不可点击
       if (file.status === 'done' && file.response.code === 0) {
         file.url = `${downloadFileUrl}?filePath=${file.response.data}`;
@@ -86,8 +87,8 @@ const FileUpload = ({ value, onChange, schema }) => {
         file.status = 'error';
         message.error('上传失败！');
       }
-      onChange((fileList && fileList.length && JSON.stringify(fileList)) || '');
-      setShowList(JSON.stringify(fileList));
+      onChange(fileList ?? []);
+      // setShowList(fileList ?? []);
     },
     onPreview(file) {
       if (_isRecordingOrVideo) {
@@ -95,7 +96,6 @@ const FileUpload = ({ value, onChange, schema }) => {
         setPreviewUrl(file.url);
       }
     },
-    previewFile(file) {},
     onDownload(file) {
       downloadFunc(file.url, file.name, '_self');
     },
@@ -105,11 +105,11 @@ const FileUpload = ({ value, onChange, schema }) => {
     setPreviewTitle('');
   };
   /**
-   * @description: 返回文件类型限定值
-   * @params: {Array} typeArray: Video | Recording | File
-   * @date: 2021/12/2
-   * @author: ChenLong
-   */
+   *  @Description: 返回文件类型限定值
+   *  @Params: {Array} typeArray: Video | Recording | File
+   *  @Date: 2021/12/2
+   *  @Author: ChenLong
+   * */
   const returnFileTypeString = (type) => {
     let _obj = {
       Video: videoTypeArray,
@@ -120,82 +120,31 @@ const FileUpload = ({ value, onChange, schema }) => {
     return _obj[type].join(',');
   };
   useEffect(() => {
-    let fileList = [];
-    (file || '').split(',').forEach((item, index) => {
-      if (item && filenameVerification({ name: item }, true).type !== 'error') {
-        // @Tips: 直接过滤掉名字中有异常字符的文件
-        let _obj = {
-          uid: index + '_' + Math.random(),
-          value: item,
-          name: item.split('\\').reverse()[0],
-          type: schema.renderTo === 'Image' ? 'image' : 'file',
-          status: 'done',
-          url: `${downloadFileUrl}?filePath=${item}`,
-          sourcePath: item,
-        };
-        if (schema.renderTo === 'Image') _obj.thumbUrl = `${downloadFileUrl}?filePath=${item}`;
-        fileList.push(_obj);
-      }
-    });
-    // onChange(fileList.length && JSON.stringify(fileList) || '');
-    setShowList(JSON.stringify(fileList));
-  }, []);
-  useEffect(() => {
-    if (value) {
-      let fileList = [];
-      (file || '').split(',').forEach((item, index) => {
-        if (item && filenameVerification({ name: item }, true).type !== 'error') {
-          // @Tips: 直接过滤掉名字中有异常字符的文件
-          let _obj = {
-            uid: index + '_' + Math.random(),
-            value: item,
-            name: item.split('\\').reverse()[0],
-            type: schema.renderTo === 'Image' ? 'image' : 'file',
-            status: 'done',
-            url: `${downloadFileUrl}?filePath=${item}`,
-            sourcePath: item,
-          };
-          if (schema.renderTo === 'Image') _obj.thumbUrl = `${downloadFileUrl}?filePath=${item}`;
-          fileList.push(_obj);
-        }
-      });
-      // onChange(fileList.length && JSON.stringify(fileList) || '');
-      setShowList(JSON.stringify(fileList));
+    if (isArray(value)) {
+      setShowList(value);
     }
   }, [value]);
   return (
       <>
-      {/** @tips: 裁剪功能无法正常工作，暂不提供 */}
-      {/*      <ImgCrop beforeCrop={(file) => {
-        let _returnObj = filenameVerification(file);
-        if (_returnObj.type === 'error') {
-          message.error(_returnObj.content);
-          return false;
-        }
-        return schema.renderTo === 'Image';
-      }} rotate locale={'zh-cn'} modalTitle={'编辑图片'} modalOk={'确定'}
-               modalCancel={'取消'}>*/}
         <Upload
             disabled={schema.disabled}
             {...option}
-        fileList={showList ? JSON.parse(showList) : []}
+            fileList={showList ?? []}
             multiple
             style={{ width: '100%' }}
             className={_isRecordingOrVideo ? 'formUploadVideoOrRecording' : 'formUpload'}
             showUploadList={{
               showPreviewIcon: _isRecordingOrVideo,
               showDownloadIcon: true,
-          downloadIcon: <DownloadOutlined />,
+              downloadIcon: <DownloadOutlined/>,
             }}
             accept={returnFileTypeString(schema.renderTo)}
         >
-        {!_isRecordingOrVideo ? (
-          <Button disabled={schema.disabled} icon={<UploadOutlined />}>
-            Upload
-          </Button>
-        ) : (
-          '+ Upload'
-        )}
+          {
+            !_isRecordingOrVideo ?
+                <Button disabled={schema.disabled} icon={<UploadOutlined/>}>Upload</Button> : '+ Upload'
+          }
+
         </Upload>
         {/*      </ImgCrop>*/}
         <Modal
@@ -206,13 +155,16 @@ const FileUpload = ({ value, onChange, schema }) => {
             footer={null}
             onCancel={handleCancel}
         >
-        {_isVideo ? (
-          <video width={'100%'} height={'100%'} controls autoPlay src={previewUrl} />
-        ) : (
-          ''
-        )}
-        {_isAudio ? <audio controls autoPlay src={previewUrl} /> : ''}
-        {_isImage ? <img width={'100%'} height={'100%'} src={previewUrl} alt="缩略图" /> : ''}
+          {
+            _isVideo ?
+                <video width={'100%'} height={'100%'} controls autoPlay src={previewUrl}/> : ''
+          }
+          {
+            _isAudio ? <audio controls autoPlay src={previewUrl}/> : ''
+          }
+          {
+            _isImage ? <img width={'100%'} height={'100%'} src={previewUrl} alt="缩略图"/> : ''
+          }
         </Modal>
       </>
   );

packages/base-components/BasicReport/src/ReportsManage/ReportWithChart/ChartComponent/index.js

+import React, { useEffect, useMemo, useState,useRef } from 'react';
+import { BasicChart } from '@wisdom-components/basicchart';
+import { reportService } from '../../../api';
+import styles from './index.less';
+import { returnFields, returnOptionsArr } from '../../utils/handleOption';
+
+const ChartComponent = (props) => {
+  const [columnsData, setColumnsData] = useState([]);
+  const [options, setOptions] = useState([]);
+  const { reportName, chartOptions, reportData } = props;
+  const chartRef = useRef();
+
+  const getData = () => {
+    let columns = returnFields(JSON.stringify(chartOptions));
+    if (!columns.length) return ''; //
+    reportService.getChartConfigDataByColumn({
+      reportName,
+      columns,
+    }).then(res => {
+      let _data = [];
+      if (res.code === 0) _data = res.data.data;
+      setColumnsData(_data);
+    });
+  };
+  useEffect(() => {
+    getData();
+  }, []);
+  useEffect(() => {
+    let _options = returnOptionsArr(chartOptions, columnsData, reportData.selectedRows);
+    setOptions(_options);
+  }, [columnsData, reportData.selectedRows.length]);
+  const resizeChart = () => {
+    chartRef.current.resize();
+  };
+  useEffect(() => {
+    window.addEventListener('resize', resizeChart);
+    return () => window.removeEventListener('resize', resizeChart);
+  }, []);
+  return <div className={styles.chartWrapper}>
+    {
+      options.map((option, index) => <div className={styles.chart} style={{ ...option.custom_style }}>
+        <BasicChart ref={chartRef} style={{ width: '100%', height: '100%' }} key={`${index}_${option.series.length}`}
+                    option={option}/>
+      </div>)
+    }
+  </div>;
+};
+
+export default ChartComponent;

packages/base-components/BasicReport/src/ReportsManage/ReportWithChart/ChartComponent/index.less

+.chartWrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 0 8px 8px;
+  gap: 8px;
+  overflow: hidden;
+
+  .chart {
+    background: #ffffff;
+  }
+}

packages/base-components/BasicReport/src/ReportsManage/ReportWithChart/LayoutComponent/index.js

+import React, { useRef } from 'react';
+import styles from './index.less';
+
+const LayOutComponent = ({ layoutOptions, children }) => {
+  const {
+    layout,
+    chartCount,
+    tableConfigs,
+    chartConfigs,
+  } = layoutOptions;
+  const { width, height } = tableConfigs[0];
+  const layoutRef = useRef({
+    layoutMap: {
+      '上表下图': {
+        flexDirection: 'column',
+      },
+      '上图下表': {
+        flexDirection: 'column-reverse',
+      },
+      '左表右图': {
+        flexDirection: 'row',
+      },
+      '左图右表': {
+        flexDirection: 'row-reverse',
+      },
+    },
+    chartLayoutMap: {
+      '上表下图': {
+        flexDirection: 'row',
+      },
+      '上图下表': {
+        flexDirection: 'row',
+      },
+      '左表右图': {
+        flexDirection: 'column',
+      },
+      '左图右表': {
+        flexDirection: 'column',
+      },
+    },
+  });
+  return <div className={styles.wrapper} style={{ ...layoutRef.current.layoutMap[layout] }}>
+    <div className={styles.tableWrapper} style={{ width, height }}>
+      {children.find(item => item.key === 'table')}
+    </div>
+    <div className={styles.chartWrapper}
+         style={{ ...layoutRef.current.chartLayoutMap[layout] }}>
+      {children.find(item => item.key === 'chart')}
+    </div>
+  </div>;
+};
+export default LayOutComponent;

packages/base-components/BasicReport/src/ReportsManage/ReportWithChart/LayoutComponent/index.less

+.wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 6px;
+
+  .chartWrapper {
+    flex:1;
+    overflow: hidden;
+  }
+
+  .tableWrapper {
+
+  }
+
+}

packages/base-components/BasicReport/src/ReportsManage/ReportWithChart/index.js

+/**
+ * 原版报表功能，支持报表展示；
+ * 当前功能，配置了图表，则暂时报表+图表；否则只展示报表
+ * @Steps
+ * 1. 获取图表配置
+ * */
+import React, { useEffect, useRef, useState } from 'react';
+import ChartComponent from '../ReportWithChart/ChartComponent';
+import LayOutComponent from '../ReportWithChart/ChartComponent';
+import ReportsManage from '../../ReportsManage/ReportsManage';
+import { reportService } from '../../api';
+import { isString } from 'lodash';
+
+const ReportWithChart = (props) => {
+  const { reportName, config } = props.params;
+  const [layoutOptions, setLayoutOptions] = useState(null);
+  const [chartOptions, setChartOptions] = useState(null);
+  const [reportData, setReportData] = useState(null);
+  const reportRef = useRef(null);
+  const getChartConfig = () => {
+    return reportService.getChartConfig({
+      reportName,
+    });
+  };
+  const trigger = (str) => {
+    let _data = reportRef?.current?.getData();
+    setReportData(_data);
+  };
+  useEffect(() => {
+    async function _getData() {
+      let _layoutOptions = null;
+      let _chartOptions = null;
+      if (config && isString(config)) {
+        let _str = JSON.parse(config);
+        _layoutOptions = _str.layoutOptions;
+        _chartOptions = _str.chartOptions;
+      } else {
+        let _config = await getChartConfig();
+        let _str = JSON.parse(_config.data.configInfo);
+        _layoutOptions = _str.layoutOptions;
+        _chartOptions = _str.chartOptions;
+      }
+      setLayoutOptions(_layoutOptions);
+      setChartOptions(_chartOptions);
+    }
+    _getData();
+  }, [config]);
+  return <>{layoutOptions && chartOptions ? <LayOutComponent layoutOptions={layoutOptions}>
+    <ReportsManage key={'table'} {...props} ref={reportRef} trigger={trigger}/>
+    <ChartComponent key={'chart'} reportName={reportName} chartOptions={chartOptions} reportData={reportData}/>
+  </LayOutComponent> : <ReportsManage {...props} ref={reportRef} trigger={trigger}/>
+  }</>;
+};
+export default ReportWithChart;

packages/base-components/BasicReport/src/ReportsManage/ReportsDataSourceSetting.js

@@ -102,7 +102,6 @@ const ReportsDataSourceSetting = () => {
             setSubmitLoading(false);
           })
           .catch((err) => {
-            console.log(err);
             setSubmitLoading(false);
           });
       },

packages/base-components/BasicReport/src/ReportsManage/ReportsManage.js

@@ -102,7 +102,7 @@
  *  edit   除删除外的权限
  *  scan   查看权限
  * */
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {
   DeleteOutlined,
   DownOutlined,
@@ -159,11 +159,14 @@ import {
   isArray,
   isString,
   returnHandledNumber,
+  returnSummaryNumber,
 } from './utils/utils';
 import { reportService } from '../api/index';
 import { exportAccountData, reportFilesDownload } from '../api/service/report';
 import { DownloadAccountFiles } from '../api/service/workflow';
 import DatePickerGroup from '../components/DatePickerGroup';
+import Print from './Components/Print';
+
 const ControlsType = ['下拉', '多选', '日期', '复选框'];
 const fieldSplitStr = '-'; // fieldGroup用来分割
 const { Option } = Select;
@@ -178,6 +181,7 @@ const PERMISSION = {
     // 操作条按钮
     'sortBtn',
     'exportBtn',
+    'printBtn',
     // 操作列
     'editBtn',
     'deleteBtn',
@@ -188,6 +192,7 @@ const PERMISSION = {
     'pagination',
     'sortBtn',
     'exportBtn',
+    'printBtn',
     // 操作列
     'editBtn',
   ],
@@ -195,7 +200,8 @@ const PERMISSION = {
 };
 const USER_ID = window?.globalConfig?.userInfo?.OID || 0;
 const MODEL = ['all', 'year', 'quarter', 'month', 'week', 'day'];
-const ReportsManage = (props) => {
+const ReportsManage = forwardRef((props, ref) => {
+  const { trigger } = props;
   const {
     reportName,
     pageSize,
@@ -207,8 +213,8 @@ const ReportsManage = (props) => {
     permissionType,
     permissionField,
     waterMark,
+    rowSelect,
   } = props.params;
-
   const handleCustomerState = (customState) => {
     if (isArray(customState)) {
       return customState;
@@ -216,7 +222,6 @@ const ReportsManage = (props) => {
       return customState.split(',');
     }
   };
-
   const permission = customState
       ? handleCustomerState(customState)
       : PERMISSION[state || 'delete'];
@@ -281,7 +286,7 @@ const ReportsManage = (props) => {
       moment().endOf(initDateModel).format(dateFormat),
   );
   const [extra, setExtra] = useState(<></>);
-  const [sortModalVisible, setSortModalVisible] = useState(false);
+  const [showSortBtn, setShowSortBtn] = useState(false);
   const [currentReportId, setCurrentReportId] = useState(null);
   const [hasDatePicker, setHasDatePicker] = useState('');
   const [defaultDateConfig, setDefaultDateConfig] = useState({
@@ -305,6 +310,12 @@ const ReportsManage = (props) => {
   const [isLocalDataSource, setIsLocalDataSource] = useState(0); // 如果是本地数据源，那么值为0；反之，则是外部数据源
   const [showWaterMarkModal, setShowWaterMarkModal] = useState(false);
   const [waterMarkContent, setWaterMarkContent] = useState(waterMark); // 水印内容
+  useImperativeHandle(ref, () => {
+    let _a = selectedRows;
+    return {
+      getData: () => ({ selectedRows }),
+    };
+  }, [selectedRows.length]);
   const menu = () => {
     const _item = [
       {
@@ -371,7 +382,7 @@ const ReportsManage = (props) => {
       ),
       key: 'exportGroup',
     };
-    if (permission.includes('rowSelect')) _item.push(exportFilesItem);
+    if (rowSelect === 'true') _item.push(exportFilesItem);
     return <Menu items={_item}/>;
   };
   const exportModule = (type, extension) => {
@@ -509,7 +520,7 @@ const ReportsManage = (props) => {
   // 添加附件下载功能  --edit by zhangzhiwei  2023/06/27
   const downloadAccountFiles = (path) => {
     let isZip = path.includes(',');
-    let fileName = path.split('\\')[1];
+    let fileName = path.includes('\\') ? path.split('\\')[1] : path.split('/')[1];
     let fileType = path.split('.')[1];
     let _data = {
       files: path,
@@ -638,21 +649,12 @@ const ReportsManage = (props) => {
   };
   // 排序字符串处理成数组
   const handleSortString = (sortString) => {
-    let _sortStringArray = sortString.split(',').map((item, index) => {
-      let _item = item.split(' ');
-      if (index === 0) {
+    let _sortStringArray = sortString.map((item, index) => {
       return {
-          label: '主要排序',
-          value: _item[0].replace(/\[|\]/g, ''),
-          sort: _item[1],
-        };
-      } else {
-        return {
-          label: '次要排序',
-          value: _item[0].replace(/\[|\]/g, ''),
-          sort: _item[1],
+        label: index === 0 ? '主要排序' : '次要排序',
+        value: item.fieldAlias,
+        sort: item.sortType,
       };
-      }
     });
     setSelectedSortFields(_sortStringArray);
   };
@@ -702,44 +704,26 @@ const ReportsManage = (props) => {
         .getReportInfo(_data)
         .then((res) => {
           if (res.code === 0) {
-          let _reportDetails = res.data?.reportDetails;
             let _statisticalValues = res.data?.statisticalValues;
             // webAPIData 存在值时使用webAPIData，否则使用原始数据
-          let _tableData = res.data.webAPIData?.webAPIData
-            ? JSON.parse(res.data.webAPIData.webAPIData)
-            : res.data?.data?.list.map((item) => {
-            if (
-              Object.prototype.toString.call(item) === '[object String]'
-            ) {
-              return JSON.parse(item);
-            }
-            return item;
-          }) || [];
-          let _sortString = res.data.sortString;
+            let _tableData = res?.data?.data?.list || [];
             if (isInit) {
               setIsInit(false);
             }
-          setIsLocalDataSource(res.data.sourcesId);
-          getTableSummaryConfig(_reportDetails, _statisticalValues);
-          getTableHeaderConfig(_reportDetails, _tableData);
+            getTableSummaryConfig(reportConfigs, _statisticalValues);
+            getTableHeaderConfig(reportConfigs, _tableData);
             let _pagination = { ...pagination };
-          _pagination.total = res.data.webAPIData?.webAPIData
-            ? res.data.webAPIData.totalCount
-            : res.data.data?.totalCount;
+            _pagination.total = res.data.data?.totalCount || 0;
             setPagination(_pagination);
             setTableData(_tableData);
             // 处理排序字段
-          handleSortString(_sortString);
             if (_tableData) {
-            setSortModalVisible(true);
-            setCurrentReportId(_reportDetails[0]?.reportId);
+              setShowSortBtn(true);
             } else {
-            setSortModalVisible(false);
-            setCurrentReportId(null);
+              setShowSortBtn(false);
             }
           } else {
-          setSortModalVisible(false);
-          setCurrentReportId(null);
+            setShowSortBtn(false);
             message.error('未能查询到报表数据！');
             let _pagination = { ...pagination };
             _pagination.total = 0;
@@ -751,22 +735,27 @@ const ReportsManage = (props) => {
           setTableLoading(false);
         })
         .catch((err) => {
-        console.log(err);
           setTableLoading(false);
         });
   };
-  const getConfigs = () => {
-    reportService.getReportDetails({ reportName }).then((res) => {
-      if (res.code === 0) {
-        setReportConfigs(res.data);
-        setConfig(res.data);
-        setColumns(returnColumn(res.data));
-        setTableStruct(res.data);
+  const getConfigs = async () => {
+    let _configs = await reportService.getReportDetails({ reportName });
+    if (_configs.code === 0) {
+      let _data = _configs.data.data;
+      setReportConfigs(_data);
+      setIsLocalDataSource(_configs.data.sourceID);
+      setConfig(_data);
+      setColumns(returnColumn(_data));
+      setTableStruct(_data);
+      setCurrentReportId(_configs.data.reportId);
       setFirstToGetData(true);
+      let _sortFields = await reportService.getReportSortFields({ reportId: _configs.data.reportId });
+      if (_sortFields.code === 0) {
+        handleSortString(_sortFields.data);
+      }
     } else {
-        message.error(res.msg);
+      message.error('获取配置失败！');
     }
-    });
   };
   /**
    * @Description: 在配置项中，isFilter: true 用来渲染控制框；filterRule: 下拉/文本/多选
@@ -786,8 +775,9 @@ const ReportsManage = (props) => {
     handleDate(_controls); // 处理日期， 设定默认值
   };
   const getTableHeaderConfig = (config, data) => {
-    // setTableStruct(config);
-    // setColumns(returnColumn(config, data));
+    // 上一版本，下两句代码是被注释了，注释后影响了向下合并功能；如果发现其他问题，请排查此处代码
+    setTableStruct(config);
+    setColumns(returnColumn(config, data));
     setAllSortFields(returnSortFields(config));
   };
   const getTableSummaryConfig = (config, summary) => {
@@ -907,7 +897,6 @@ const ReportsManage = (props) => {
         key: item.fieldAlias,
         ellipsis: true,
         onCell: (record, rowIndex) => {
-          // console.log('Record: ', record); // record是这条记录，index是rowIndex
           // 1. 如果该字段是需要向下合并的，则进入判断
           let _obj = {};
           if (_fieldAliasArray && _fieldAliasArray[item.fieldAlias]) {
@@ -935,7 +924,12 @@ const ReportsManage = (props) => {
             rest = [setModalVisible, setExtra];
           } else if (item.type === '附件') {
             // 附件支持点击下载  --- edit by zhangzhiwei  on 2023/06/27
-            let _value = value ? value.split('\\')[1] : '';
+            let _value = '';
+            if (value && value.includes('\\')) {
+              _value = value.split('\\')[1];
+            } else if (value && value.includes('/')) {
+              _value = value.split('/')[1];
+            }
             return (
                 _value && (
                     <div
@@ -1064,7 +1058,6 @@ const ReportsManage = (props) => {
                                     if (res.code === 0) {
                                       message.success('删除成功！');
                                       setGetNewData(!getNewData);
-                              // getData(pagination); // 在onOk的回调函数内，打包后的代码会形成闭包
                                     }
                                   });
                             },
@@ -1086,12 +1079,11 @@ const ReportsManage = (props) => {
     setTableX(_x);
     return _tempArray;
   };
-
   // 返回表格数据
   const returnTable = useMemo(() => {
     return (
         <BasicTable
-        rowKey={'Key'}
+            rowKey={'key'}
             bordered
             loading={tableLoading}
             dataSource={tableData}
@@ -1111,7 +1103,7 @@ const ReportsManage = (props) => {
             }}
             // 添加表格行勾选功能  --edit by zhangzhiwei on 2023/06/26
             rowSelection={
-          permission.includes('rowSelect')
+              rowSelect === 'true'
                   ? {
                     type: 'checkbox',
                     selectedRowKeys: selectedRows.map((item) => item.key),
@@ -1139,7 +1131,7 @@ const ReportsManage = (props) => {
                                     <Table.Summary.Cell
                                         key={`summary_${index}`}
                                         index={0}
-                            colSpan={item.colSpan + 1}
+                                        colSpan={item.colSpan + (rowSelect === 'true' ? 2 : 1)}
                                     >
                               <span
                                   style={{
@@ -1174,7 +1166,7 @@ const ReportsManage = (props) => {
                                   }}
                               >
                                 {item.type.replace('求', '')}:{' '}
-                                {returnHandledNumber(
+                                {returnSummaryNumber(
                                     item.configItems,
                                     item['单页'],
                                     true,
@@ -1193,7 +1185,7 @@ const ReportsManage = (props) => {
                                 return (
                                     <Table.Summary.Cell
                                         index={0}
-                            colSpan={item.colSpan + 1}
+                                        colSpan={item.colSpan + (rowSelect === 'true' ? 2 : 1)}
                                     >
                               <span
                                   style={{
@@ -1224,7 +1216,7 @@ const ReportsManage = (props) => {
                                   }}
                               >
                                 {item.type.replace('求', '')}:{' '}
-                                {returnHandledNumber(
+                                {returnSummaryNumber(
                                     item.configItems,
                                     item['全部'],
                                     true,
@@ -1242,7 +1234,6 @@ const ReportsManage = (props) => {
         />
     );
   }, [columns, tableLoading, tableData, selectedRows]);
-
   const changeSortField = (value, index, key) => {
     let _selectedSortFields = [...selectedSortFields];
     _selectedSortFields[index][key] = value;
@@ -1395,6 +1386,10 @@ const ReportsManage = (props) => {
           }
         });
   };
+  const printTable = () => {
+    let _columns = columns.filter(item => item.title !== '操作');
+    Print({ tableData, columns: _columns, name: reportName }, 'simple_table');
+  };
 
   function getRefHeight() {
     if (timer) clearTimeout(timer);
@@ -1404,9 +1399,6 @@ const ReportsManage = (props) => {
     }, 100);
   }
 
-  useEffect(() => {
-    getConfigs();
-  }, []);
   useEffect(() => {
     if (firstToGetData) {
       getData(pagination);
@@ -1417,7 +1409,6 @@ const ReportsManage = (props) => {
     if (tableHeaderLevel) setTableHeight();
   }, [tableHeaderLevel]);
   useEffect(() => {
-    // if (!isInit) getData(pagination);
     if (!isInit) {
       let _pagination = { ...pagination };
       if (_pagination.current === 1) {
@@ -1434,13 +1425,15 @@ const ReportsManage = (props) => {
     }
   }, [pagination.current, pagination.pageSize]);
   useEffect(() => {
+    getConfigs();
     window.addEventListener('resize', getRefHeight);
     return () => window.removeEventListener('resize', getRefHeight);
   }, []);
-
-
+  useEffect(() => {
+    trigger?.('selectedRows');
+  }, [selectedRows]);
   return (
-    <div className={style.reportManage} ref={tableWrapperRef}>
+      <div className={style.reportManage} style={{ ...(props.style ?? {}) }} ref={tableWrapperRef}>
         {/* 预留容器，提供给点击后的功能显示 */}
         {detailsComponentVisible ? (
             <div
@@ -1549,7 +1542,7 @@ const ReportsManage = (props) => {
             {permission.includes('sortBtn') ||
             permission.includes('exportBtn') ||
             permission.includes('addBtn') ? (
-            <div style={{ width: 270, textAlign: 'end' }}>
+                <div style={{ width: 'auto', textAlign: 'end' }}>
                   <Space size={8} nowrap>
                     {permission.includes('addBtn') && !isLocalDataSource ? (
                         <Form.Item>
@@ -1568,7 +1561,7 @@ const ReportsManage = (props) => {
                     ) : (
                         ''
                     )}
-                {sortModalVisible && permission.includes('sortBtn') ? (
+                    {showSortBtn && permission.includes('sortBtn') ? (
                         <Form.Item>
                           <Button
                               type={'primary'}
@@ -1582,6 +1575,19 @@ const ReportsManage = (props) => {
                     ) : (
                         ''
                     )}
+                    {permission.includes('printBtn') ? (
+                        <Form.Item>
+                          <Button
+                              type={'primary'}
+                              title={'打印当前页'}
+                              onClick={printTable}
+                          >
+                            打印
+                          </Button>
+                        </Form.Item>
+                    ) : (
+                        ''
+                    )}
                     {permission.includes('exportBtn') ? (
                         <Form.Item>
                           <Dropdown style={{ float: 'right' }} overlay={menu}>
@@ -1739,7 +1745,7 @@ const ReportsManage = (props) => {
         </Modal>
       </div>
   );
-};
+});
 const mapStateToProps = (state) => {
   const allWidgets = state.getIn(['global', 'globalConfig', 'allWidgets']);
   let _flatWidgets = [];
@@ -1757,4 +1763,4 @@ const mapStateToProps = (state) => {
     allWidgets: _flatWidgets,
   };
 };
-export default connect(mapStateToProps, null)(ReportsManage);
+export default ReportsManage;

packages/base-components/BasicReport/src/ReportsManage/ReportsSetting.js

@@ -39,8 +39,7 @@ import { SketchPicker } from 'react-color';
 import { arrayMoveImmutable } from 'array-move';
 import BasicTable from '@wisdom-components/basictable';
 import { reportService } from '../api';
-import style from './ReportsSetting.less';
-import classname from 'classnames';
+import styles from './ReportsSetting.less';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import {
   addReportDetailInfoIndex,
@@ -52,6 +51,10 @@ import { isNumber, isString } from './utils/utils';
 import moment from 'moment';
 import CustomerColorPicker from './Components/customerColorPicker/CustomerColorPicker';
 
+import ChartConfig from '../ReportsManage/Components/ChartConfig';
+import classnames from 'classnames';
+import NumberConfig from '../ReportsManage/Components/NumberConfig';
+
 const { Option, OptGroup } = Select;
 const { TextArea } = Input;
 const { Search } = Input;
@@ -83,6 +86,7 @@ const ReportsSetting = () => {
       const [tableData, setTableData] = useState([]); // 常规使用的数据
       const [tableLoading, setTableLoading] = useState(false);
       const [detailTableVisible, setDetailTableVisible] = useState(false);
+      const [currentPage, setCurrentPage] = useState('报表列表'); // 报表列表 报表设置 图表设置
       const columns = [
         {
           title: '报表名称',
@@ -107,7 +111,7 @@ const ReportsSetting = () => {
           // ellipsis:true,
           render: (text) => <Tooltip title={text}>
             {/* 自动折叠内容时，如果使用Tooltip，Tooltip会无法正确定位；建议手动设置内容折叠 */}
-          <span className={style.reportFiled}>{text}</span>
+            <span className={styles.reportFiled}>{text}</span>
           </Tooltip>,
         }, {
           title: '创建时间',
@@ -138,6 +142,14 @@ const ReportsSetting = () => {
                 );
                 clickReport(record.id);
               }}/>
+              <LineChartOutlined title={'图表配置'} onClick={() => {
+                setCurrentReport(record);
+                setCurrentPage('图表配置');
+                setCurrentDataSourceType(
+                    dataSourcesList.find(item => item.id === record.sourcesId)?.db_type || '',
+                );
+              }
+              }/>
               <ExportOutlined title={'导出配置'} onClick={() => exportConfigs(record)}/>
               <DeleteOutlined title={'删除报表'} style={{ color: 'red' }} onClick={() => deleteReport(record)}/>
             </div>;
@@ -219,7 +231,6 @@ const ReportsSetting = () => {
           const newData = arrayMoveImmutable(detailData.slice(), oldIndex, newIndex).filter(
               (el) => !!el,
           );
-        console.log('Sorted items: ', newData);
           setDetailData(newData);
           setTempDetailData(newData);
           editDetailForm.setFieldsValue(newData);
@@ -240,7 +251,6 @@ const ReportsSetting = () => {
         return <SortableItem index={index} {...restProps} />;
       };
       const returnEqual = (index, key) => {
-      // return detailData !== tempDetailData || detailData[index] !== tempDetailData[index] || (detailData[index] && tempDetailData[index] && detailData[index][key] !== tempDetailData[index][key]);
         return (detailData[index] && !tempDetailData[index]) || (detailData[index] && tempDetailData[index] && detailData[index][key] !== tempDetailData[index][key]);
       };
       const detailColumns = [
@@ -282,7 +292,7 @@ const ReportsSetting = () => {
               required: true,
               message: '列宽不能为空',
             }]}><InputNumber value={record?.columnWidth}
-                           className={returnEqual(index, 'columnWidth') ? style.boxShadow : ''}
+                             className={returnEqual(index, 'columnWidth') ? styles.boxShadow : ''}
                              onChange={(e) => modifyDetailData('columnWidth', e, record, index)}/></Form.Item> : `${text}px`;
           },
         }, {
@@ -298,7 +308,7 @@ const ReportsSetting = () => {
             };
             return isEditing ? <Form.Item name={[index, 'alignType']}>
               <Select onChange={(e) => modifyDetailData('alignType', e, record, index)}
-                    className={returnEqual(index, 'alignType') ? style.boxShadowOfSelect : ''}>
+                      className={returnEqual(index, 'alignType') ? styles.boxShadowOfSelect : ''}>
                 <Option value={text ? 'left' : ''}>左</Option>
                 <Option value={'center'}>中</Option>
                 <Option value={'right'}>右</Option>
@@ -317,7 +327,7 @@ const ReportsSetting = () => {
             };
             return isEditing ? <Form.Item name={[index, 'fixedColumn']}>
               <Select onChange={(e) => modifyDetailData('fixedColumn', e, record, index)}
-                    className={returnEqual(index, 'fixedColumn') ? style.boxShadowOfSelect : ''}>
+                      className={returnEqual(index, 'fixedColumn') ? styles.boxShadowOfSelect : ''}>
                 <Option value={''}>不固定</Option>
                 <Option value={'left'}>左</Option>
                 <Option value={'right'}>右</Option>
@@ -333,7 +343,7 @@ const ReportsSetting = () => {
             return isEditing ? <Form.Item name={[index, 'isShow']} valuePropName="checked">
               <Switch onChange={(e) => modifyDetailData('isShow', e, record, index)} checkedChildren="显示"
                       unCheckedChildren="不显示" defaultChecked={false}
-                    className={returnEqual(index, 'isShow') ? style.boxShadowOfSwitch : ''}/>
+                      className={returnEqual(index, 'isShow') ? styles.boxShadowOfSwitch : ''}/>
             </Form.Item> : (text ? '是' : '否');
           },
         }, {
@@ -345,7 +355,7 @@ const ReportsSetting = () => {
             return isEditing ? <Form.Item name={[index, 'isFilter']} valuePropName="checked">
               <Switch onChange={(e) => modifyDetailData('isFilter', e, record, index)} checkedChildren="开启"
                       unCheckedChildren="关闭" defaultChecked={false}
-                    className={returnEqual(index, 'isFilter') ? style.boxShadowOfSwitch : ''}/>
+                      className={returnEqual(index, 'isFilter') ? styles.boxShadowOfSwitch : ''}/>
             </Form.Item> : (text ? '是' : '否');
           },
         }, {
@@ -357,7 +367,7 @@ const ReportsSetting = () => {
             return isEditing ? <Form.Item name={[index, 'filterRule']}>
               <Select disabled={!record.isFilter}
                       onChange={(e) => modifyDetailData('filterRule', e, record, index)}
-                    className={returnEqual(index, 'filterRule') ? style.boxShadowOfSelect : ''}>
+                      className={returnEqual(index, 'filterRule') ? styles.boxShadowOfSelect : ''}>
                 <Option value={''}>不过滤</Option>
                 {
                   filterRule.map(item => <Option value={item}>{item}</Option>)
@@ -374,7 +384,7 @@ const ReportsSetting = () => {
             return isEditing ? <Form.Item name={[index, 'isMerge']} valuePropName="checked">
               <Switch onChange={(e) => modifyDetailData('isMerge', e, record, index)} checkedChildren="开启"
                       unCheckedChildren="关闭" defaultChecked={false}
-                    className={returnEqual(index, 'isMerge') ? style.boxShadowOfSwitch : ''}/>
+                      className={returnEqual(index, 'isMerge') ? styles.boxShadowOfSwitch : ''}/>
             </Form.Item> : (text ? '合并' : '不合并');
           },
         }, {
@@ -386,7 +396,7 @@ const ReportsSetting = () => {
             return isEditing ? <Form.Item name={[index, 'isRequired']} valuePropName="checked">
               <Switch onChange={(e) => modifyDetailData('isRequired', e, record, index)} checkedChildren="是"
                       unCheckedChildren="否" defaultChecked={false}
-                    className={returnEqual(index, 'isRequired') ? style.boxShadowOfSwitch : ''}/>
+                      className={returnEqual(index, 'isRequired') ? styles.boxShadowOfSwitch : ''}/>
             </Form.Item> : (text ? '是' : '否');
           },
         }, {
@@ -398,7 +408,7 @@ const ReportsSetting = () => {
             return isEditing ? <Form.Item name={[index, 'isReadOnly']} valuePropName="checked">
               <Switch onChange={(e) => modifyDetailData('isReadOnly', e, record, index)} checkedChildren="是"
                       unCheckedChildren="否" defaultChecked={false}
-                    className={returnEqual(index, 'isReadOnly') ? style.boxShadowOfSwitch : ''}/>
+                      className={returnEqual(index, 'isReadOnly') ? styles.boxShadowOfSwitch : ''}/>
             </Form.Item> : (text ? '是' : '否');
           },
         }, {
@@ -453,7 +463,7 @@ const ReportsSetting = () => {
         reportService.getReportDetailsInfo({ reportId }).then(res => {
           if (res.code === 0) {
             setTableLoading(false);
-          setDetailTableVisible(true);
+            setCurrentPage('报表配置');
             // 增加visible属性，方便后续检索的属性变更
             let _final = res.data.details.map(item => {
               let _item = { ...item };
@@ -484,6 +494,7 @@ const ReportsSetting = () => {
                 tableName: values.tableName,
                 reportFields: values.reportFields.join(','),
                 creator: String(globalConfig.userInfo.OID),
+                interfaceConfig: values.interfaceConfig,
               };
               if (currentReport && currentReport.id) {
                 _data.id = currentReport.id;
@@ -547,6 +558,7 @@ const ReportsSetting = () => {
           tableName: record.tableName,
           reportName: record.reportName,
           reportFields: record.reportFields.split(','),
+          interfaceConfig: record.interfaceConfig,
         });
         getFieldsFromTable(record.tableName, 'mainTable', record);
       };
@@ -602,6 +614,11 @@ const ReportsSetting = () => {
         };
         // 对齐方式设置默认值
         if (!_record.alignType) _record.alignType = 'left';
+        /**
+         *  @Date 2023年12月22日
+         * 拆分现有的configItems
+         * defaultDate/defaultValue/defaultMo
+         * */
         return _record;
       };
       // @params: {type:String} 不传入type，默认提交表单、关闭表单；传入type时
@@ -815,8 +832,6 @@ const ReportsSetting = () => {
               isMasterDetail: value[key + `${publicSplit}isMasterDetail`],
             };
           });
-        // debugger
-        // return false
           await reportService.addReportInfo({
             rM_ReportInfo,
             sourcesId: currentReport.sourcesId,
@@ -1022,9 +1037,9 @@ const ReportsSetting = () => {
         setNumberColorPickerArray(numericalConfigs);
         setLabelColorPickerArray(labelConfigs);
       }, [watchType]);
-    return <div className={style.reportSettings}>
+      return <div className={styles.reportSettings}>
         {
-        detailTableVisible ? <div ref={reportDetails} className={style.reportDetails}>
+          currentPage === '报表配置' ? <div ref={reportDetails} className={styles.reportDetails}>
             {/* 色板容器 */}
             <div onClick={(e) => {
               if (e.target.className.includes('colorSketch')) {
@@ -1033,7 +1048,7 @@ const ReportsSetting = () => {
             }} style={{
               visibility: showSketchPicker ? 'visible' : 'hidden',
             }}
-               className={style.colorSketch}>
+                 className={styles.colorSketch}>
               <div ref={colorPicker} style={{
                 position: 'absolute',
                 left: colorCardPosition.left,
@@ -1162,14 +1177,14 @@ const ReportsSetting = () => {
                 footer={null}
                 onClick={() => setShowSketchPicker(false)}
             >
-            <div style={{ display: 'flex' }}>
-              <div style={{ width: 200 }}>
+              <div className={classnames(styles.configForm)}>
+                <div className={classnames(styles.list, 'wkt-scroll-light')}>
                   {
                     detailData ? <ul>
                       {
                         detailData.map((item, index) => <li
                             onClick={() => changeField(item)}
-                        className={classname(style.fieldList, activeID === item.id ? style.active : '')}
+                            className={classnames(styles.fieldItem, activeID === item.id ? styles.active : '')}
                             key={item.id}>{item.fieldAlias}</li>)
                       }
                     </ul> : ''
@@ -1237,6 +1252,12 @@ const ReportsSetting = () => {
                           }
                         </Select>
                       </Form.Item>
+                      {
+                        ['数值', '数值标签'].includes(watchType) ?
+                            <Form.Item label={'数值配置'} name={'numberConfig'}>
+                              <NumberConfig/>
+                            </Form.Item> : ''
+                      }
                       <Form.Item label={'字体颜色'} name={'color'}>
                         <div style={{
                           padding: 4,
@@ -1452,7 +1473,7 @@ const ReportsSetting = () => {
                       }
                       {
                         ['数值', '数值标签'].includes(watchType) ?
-                        <Form.Item label={'统计规则'} style={{ display: 'flex' }}>
+                            <Form.Item label={'统计规则'}>
                               <Space style={{
                                 display: 'flex',
                                 marginBottom: 8,
@@ -1466,7 +1487,7 @@ const ReportsSetting = () => {
                                         <Form.Item label={'统计规则'} rules={[{
                                           required: true, message: '请选择统计规则',
                                         }]} style={{ marginBottom: 0 }} name={'statisticsRule'}>
-                                    <Select style={{ width: 120 }}>
+                                          <Select style={{ width: 100 }}>
                                             <Option value={'求和'}>求和</Option>
                                             <Option value={'求平均'}>求平均</Option>
                                             <Option value={'求方差'}>求方差</Option>
@@ -1485,6 +1506,12 @@ const ReportsSetting = () => {
                               </Space>
                             </Form.Item> : ''
                       }
+                      {
+                        ['数值', '数值标签'].includes(watchType) && isStatistics ?
+                            <Form.Item label={'统计配置'}>
+                              <NumberConfig/>
+                            </Form.Item> : ''
+                      }
                       <Form.Item label={'配置'} name={'configItems'}>
                         <TextArea rows={6}/>
                       </Form.Item>
@@ -1498,10 +1525,10 @@ const ReportsSetting = () => {
                 </div>
               </div>
             </Modal>
-          <div className={style.tableWrapper}>
-            <Row className={style.controlRow}>
-              <LeftOutlined className={style.leftBtn} onClick={() => {
-                setDetailTableVisible(false);
+            <div className={styles.tableWrapper}>
+              <Row className={styles.controlRow}>
+                <LeftOutlined className={styles.leftBtn} onClick={() => {
+                  setCurrentPage('报表列表');
                 }}/>
                 <Form layout={'inline'} style={{ display: 'flex', flex: 1, justifyContent: 'space-between' }}>
                   <div style={{ display: 'flex' }}>
@@ -1545,8 +1572,8 @@ const ReportsSetting = () => {
                   </Form.Item>
                 </Form>
               </Row>
-            <div className={style.tableContent}>
-              <Form className={style.tableForm} form={editDetailForm}>
+              <div className={styles.tableContent}>
+                <Form className={styles.tableForm} form={editDetailForm}>
                   <BasicTable
                       loading={detailTableLoading}
                       pagination={false}
@@ -1563,7 +1590,7 @@ const ReportsSetting = () => {
                         if (detailData && detailData.length > 1 && isEditing && selectedRows.length) {
                           return <Table.Summary fixed>
                             <Table.Summary.Row>
-                          <Table.Summary.Cell colSpan={7}>批量操作</Table.Summary.Cell>
+                              <Table.Summary.Cell colSpan={6}>批量操作</Table.Summary.Cell>
                               <Table.Summary.Cell>
                                 <Form.Item>
                                   <InputNumber onChange={(e) => batchModify('columnWidth', e)}/>
@@ -1623,6 +1650,22 @@ const ReportsSetting = () => {
                                           onChange={(e) => batchModify('isMerge', e)}/>
                                 </Form.Item>
                               </Table.Summary.Cell>
+                              <Table.Summary.Cell>
+                                <Form.Item>
+                                  <Switch checkedChildren="是"
+                                          unCheckedChildren="否"
+                                          defaultChecked={false}
+                                          onChange={(e) => batchModify('isRequired', e)}/>
+                                </Form.Item>
+                              </Table.Summary.Cell>
+                              <Table.Summary.Cell>
+                                <Form.Item>
+                                  <Switch checkedChildren="是"
+                                          unCheckedChildren="否"
+                                          defaultChecked={false}
+                                          onChange={(e) => batchModify('isReadOnly', e)}/>
+                                </Form.Item>
+                              </Table.Summary.Cell>
                               <Table.Summary.Cell>
                                 <Form.Item>
                                   <DeleteOutlined onClick={() => batchModify('delete')} title={'批量删除'}
@@ -1656,7 +1699,10 @@ const ReportsSetting = () => {
                 </Form>
               </div>
             </div>
-        </div> : <div className={style.reportDetails}>
+          </div> : ''
+        }
+        {
+          currentPage === '报表列表' ? <div className={styles.reportDetails}>
             <Modal
                 onCancel={() => {
                   setCreateModalVisible(false);
@@ -1721,6 +1767,9 @@ const ReportsSetting = () => {
                         </Checkbox.Group>
                       </Form.Item> : ''
                 }
+                <Form.Item label={'联动接口'} name={'interfaceConfig'}>
+                  <Input placeholder={'可填入联动接口名称，非必填'}/>
+                </Form.Item>
                 <Form.Item label={' '} colon={false}>
                   <Button onClick={() => {
                     setCreateModalVisible(false);
@@ -1732,8 +1781,8 @@ const ReportsSetting = () => {
                 </Form.Item>
               </Form>
             </Modal>
-          <div className={style.tableWrapper}>
-            <Row className={style.controlRow}>
+            <div className={styles.tableWrapper}>
+              <Row className={styles.controlRow}>
                 <Form layout={'inline'}>
                   <Form.Item label={'快速索引'}>
                     <Search onSearch={(e) => searchReportList(e)}/>
@@ -1757,7 +1806,7 @@ const ReportsSetting = () => {
                   </Form.Item>
                 </Form>
               </Row>
-            <div className={style.tableContent}>
+              <div className={styles.tableContent}>
                 <BasicTable
                     pagination={false}
                     bordered
@@ -1768,7 +1817,10 @@ const ReportsSetting = () => {
                 />
               </div>
             </div>
-        </div>
+          </div> : ''
+        }
+        {
+          currentPage === '图表配置' ? <ChartConfig setCurrentPage={setCurrentPage} currentReport={currentReport}/> : ''
         }
       </div>;
     }

packages/base-components/BasicReport/src/ReportsManage/utils/handleOption.js

+import { cloneDeep } from 'lodash';
+
+const returnFields = (str) => {
+  let _arr = [];
+  let list = str.matchAll(/\$\{[^}\s]+}/g); // ${水箱个数}
+  // _arr = [...list].map(item => item[0].replace(/[${}]/g, ''));
+  [...list].forEach(item => {
+    let _item = item[0].replace(/[${}]/g, '').split(',');
+    _arr = _arr.concat(_item);
+  });
+  return _arr;
+};
+const handleMaxValue = (value) => {
+  if (value <= 1) return value.toFixed(2);
+  if (value >= 100000) return `${(value / 1000).toFixed(2)}k`;
+  return value.toFixed(2);
+};
+const reduceYAxis = (arr, opt) => {
+  let _offsetValue = [];
+  // 1. 合并相同单位的坐标轴
+  let _arr = arr.reduce((final, cur) => {
+    let _key = cur.name === null ? 'null' : cur.name;
+    if (!final[_key]) {
+      final[_key] = cur;
+    }
+    return final;
+  }, {});
+  // 2. 合并相同单位的数据，找出最大值
+  let _maxValueArr = Object.values(
+    opt.series.reduce((final, cur, index) => {
+      let _key = `${opt.title.text || 'NoKey'}_${index}`;
+      let _maxValue = cur?.data?.reduce((final, num) => {
+        // eslint-disable-next-line no-param-reassign
+        if (Number(num) > final) final = Number(num);
+        return final;
+      }, 0);
+      if (final[_key] === undefined) {
+        final[_key] = _maxValue;
+      } else {
+        final[_key] = Math.max([final[_key], _maxValue]);
+      }
+      return final;
+    }, {}),
+  );
+  // 3. 合并，生成Y轴配置
+  return Object.values(_arr).map((item, index) => {
+    let _key = item.name === null ? 'null' : item.name;
+    let _lastAxisNumber = _maxValueArr[index - 2];
+    let _baseOffset = _offsetValue[index - 2] ?? 0;
+    let _finalOffset =
+      (_lastAxisNumber !== undefined // 没有相邻的轴
+        ? (_lastAxisNumber === 0 ? 20 : _lastAxisNumber.toFixed(2).replaceAll('.', '').length) * 12
+        : 0) + _baseOffset;
+    _offsetValue.push(_finalOffset);
+    return {
+      ...item,
+      offset: _finalOffset,
+      position: index % 2 === 0 ? 'left' : 'right',
+      nameTextStyle: {
+        align: index % 2 === 0 ? 'right' : 'left',
+      },
+    };
+  });
+};
+const handleYAxis = (opt) => {
+  const yAxisMap = new Map();
+  // 1. 找出最大值; 2. 计算出y轴最大宽度动态计算偏移距离；
+  opt?.series?.forEach((item, index) => {
+    const { custom_config } = item;
+    const key = custom_config.unit;
+    if (!yAxisMap.has(key)) {
+      const axis = {
+        type: 'value',
+        name: custom_config.unit,
+        axisLabel: {
+          formatter: (value) => {
+            return handleMaxValue(value);
+          },
+        },
+        axisLine: {
+          show: true,
+        },
+        minorTick: {
+          lineStyle: {
+            color: '#e2e2e2',
+          },
+        },
+        minorSplitLine: {
+          lineStyle: {
+            color: '#e2e2e2',
+            type: 'dashed',
+          },
+        },
+      };
+      yAxisMap.set(key, axis);
+    }
+  });
+  return yAxisMap.size > 0 ? reduceYAxis([...yAxisMap.values()], opt) : { type: 'value' };
+};
+/**
+ * 1. 解析图表的配置，并且处理数据
+ * @param {Array} chartOptions 配置的json字符串
+ * @param {Array:[{[string]:[any]}]} columnsData 配置的数据数组 [{分公司:'',业绩:100}]
+ * @param rowData
+ * */
+const returnOptionsArr = (chartOptions, columnsData, rowData) => {
+  let _keysArr = [];
+  //1. 将数据转换成 {
+  //    分公司：[江西,湖北,湖南]
+  //    业绩: [1,2,3]
+  // }
+  let _dataMap = columnsData.reduce((final, cur, index) => {
+    if (index === 0) _keysArr = Object.keys(cur);
+    _keysArr.forEach(key => {
+      if (!final[key]) final[key] = [];
+      final[key].push(cur[key]);
+    });
+    return final;
+  }, {});
+  //2. 解析${分公司}这种字符串，替换掉数据
+  let _optionsArr = cloneDeep(chartOptions).map(item => {
+    let _item = cloneDeep(item);
+    if (!_item) return null;
+    if (_item?.custom_config?.renderBy === 'allData') {
+      // ${分公司} -> 分公司
+      let _key = _item.xAxis.data.replace(/[${}]/g, '');
+      // 给x轴赋值
+      _item.xAxis.data = _dataMap[_key];
+      // 处理系列内的配置
+      _item.series = _item.series.map(obj => {
+        let _obj = { ...obj };
+        let _objKey = _obj.data.replace(/[${}]/g, '');
+        // 赋值数据
+        _obj.data = _dataMap[_objKey];
+        return _obj;
+      });
+    }
+    if (_item?.custom_config?.renderBy === 'selectedData') {
+      // 勾选的交互方式，只允许配置一种类型的曲线
+      let _config = _item?.series?.[0] ?? {};
+      let _keys = _config?.data?.replaceAll(/[$\[\]]/g, '')?.split(',') ?? [];
+      let _xAxisArr = _item.xAxis.data;
+      _item.series = rowData.map(row => {
+        return {
+          ..._config,
+          data: _xAxisArr.map(field => row[field]),
+          name: _keys.map(key => row[key]).join('-'),
+        };
+      });
+    }
+    return _item;
+  });
+  // 3. 配置通用属性，未在配置功能里展示
+  _optionsArr = cloneDeep(_optionsArr).map(item => {
+    if (!item) return null;
+    item.grid = {
+      ...item.grid,
+      containLabel: true,
+    };
+    item.legend = { ...item.legend, padding: [2, 8] };
+    if (item?.dataZoom?.show) {
+      item.dataZoom = [
+        { show: true, start: 0, end: 100, type: 'slider', height: 20 },
+        { type: 'inside', start: 0, end: 100 },
+      ];
+    }
+    // 多轴问题
+    let yAxis = handleYAxis(item);
+    item.yAxis = yAxis;
+    item.series.forEach(_series => {
+      _series.yAxisIndex = yAxis.find(axis => axis.unit === _series.custom_config.unit);
+    });
+    return item;
+  });
+  return _optionsArr;
+};
+export {
+  returnFields, returnOptionsArr,
+};

packages/base-components/BasicReport/src/ReportsManage/utils/handlers.js

@@ -96,7 +96,6 @@ export const handleNumber = (config, number) => {
       }
     });
   } else if (config.type === '数值标签' && config.labelConfigs && config.labelConfigs.length) {
-    console.log('数值标签');
     _color = 'red';
   } else if (config.color) {
     _color = config.color;

packages/base-components/BasicReport/src/ReportsManage/utils/optionsStructure.js

+// 方案1 页面配置
+//  以下以2023年分公司年度业绩为例子，配置的结果
+/*const optionStructure = {
+  layoutOptions: {
+    layout: '上图下表',
+    chartCount: 3,
+    tableConfigs: [
+      {
+        title: '业绩报表',
+        width: '100%',
+        height: '500px',
+      },
+    ],
+    chartConfigs: [
+      {
+        title: '业绩图',
+        width: '100%',
+        height: '100%',
+      },
+      {
+        title: '业绩图',
+        width: '100%',
+        height: '100%',
+      },
+      {
+        title: '业绩图',
+        width: '100%',
+        height: '100%',
+      },
+    ],
+  },
+  chartOptions: [
+    {
+      title: {
+        show: true,
+        text: '2023年业绩报表',
+        textStyle: {
+          color: '#123445',
+          fontSize: 18,
+        },
+      },
+      xAxis: {
+        name: '分公司',
+        type: 'category', // 我们的场景，使用两种，category/time
+        // minInterval:'', // category为time时，才显示
+
+        // 1. category 表头名称时，data的结构为 ['01月','02月','03月','04月','05月','06月','07月','08月']
+        // 2. category 表内数据时 data为带 $ + 字段名的组合
+        // 3. time 表内数据时 data 为 $ + 字段名的组合
+        data: '${分公司}',
+        // time时，直接使用以下配置
+        // axisLabel:{
+        //     formatter: {
+        //         year: '{yyyy}',
+        //         month: '{MMM}',
+        //         day: '{d}',
+        //         hour: '{HH}:{mm}',
+        //         minute: '{HH}:{mm}',
+        //         second: '{HH}:{mm}:{ss}',
+        //         millisecond: '{hh}:{mm}:{ss} {SSS}',
+        //         none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
+        //     }
+        // }
+      },
+      yAxis: [
+        {
+          name: '万元',
+          gridIndex: 0,
+          // 特定情况下才需要，比如PH值
+          // minInterval:1
+          // precision
+        },
+      ],
+      series: [
+        {
+          type: 'line',
+          name: '销售业绩',
+          colorBy: 'series',
+          markPoint: {
+            data: [
+              { type: 'max', name: '最大值' },
+              { type: 'min', name: '最小值' },
+              { type: 'average', name: '平均值' },
+            ],
+          },
+          markLine: {
+            data: [
+              { type: 'max', name: '最大值' },
+              { type: 'min', name: '最小值' },
+              { type: 'average', name: '平均值' },
+            ],
+          },
+          stack: '',
+          customerConfig: {
+            unit: 'Mpa',
+          },
+          data:'${销售业绩}'
+        },
+      ],
+      legend: {
+        left: 'right', // left right center
+      },
+      // left/right/top/bottom 这几个允许配置
+      grid: {
+        left: 10,
+        right: 20,
+        top: 40,
+        bottom: 40,
+        labelContainer: true,
+      },
+      // 是否显示
+      dataZoom: {
+        show: true,
+      },
+    },
+    {
+      title: {
+        show: true,
+        text: '2023年业绩报表',
+        textStyle: {
+          color: '#123445',
+          fontSize: 18,
+        },
+      },
+      xAxis: {
+        name: '分公司',
+        type: 'category', // 我们的场景，使用两种，category/time
+        // minInterval:'', // category为time时，才显示
+
+        // 1. category 表头名称时，data的结构为 ['01月','02月','03月','04月','05月','06月','07月','08月']
+        // 2. category 表内数据时 data为带 $ + 字段名的组合
+        // 3. time 表内数据时 data 为 $ + 字段名的组合
+        data: '$分公司',
+        // time时，直接使用以下配置
+        // axisLabel:{
+        //     formatter: {
+        //         year: '{yyyy}',
+        //         month: '{MMM}',
+        //         day: '{d}',
+        //         hour: '{HH}:{mm}',
+        //         minute: '{HH}:{mm}',
+        //         second: '{HH}:{mm}:{ss}',
+        //         millisecond: '{hh}:{mm}:{ss} {SSS}',
+        //         none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
+        //     }
+        // }
+      },
+      yAxis: [
+        {
+          name: '万元',
+          gridIndex: 0,
+          // 特定情况下才需要，比如PH值
+          // minInterval:1
+          // precision
+        },
+      ],
+      series: [
+        {
+          type: 'line',
+          name: '分公司',
+          colorBy: 'series',
+          markPoint: {
+            data: [
+              { type: 'max', name: '最大值' },
+              { type: 'min', name: '最小值' },
+              { type: 'average', name: '平均值' },
+            ],
+          },
+          markLine: {
+            data: [
+              { type: 'max', name: '最大值' },
+              { type: 'min', name: '最小值' },
+              { type: 'average', name: '平均值' },
+            ],
+          },
+          stack: '',
+          customerConfig: {
+            unit: 'Mpa',
+          },
+        },
+      ],
+      legend: {
+        left: 'right', // left right center
+      },
+      // left/right/top/bottom 这几个允许配置
+      grid: {
+        left: 10,
+        right: 20,
+        top: 40,
+        bottom: 40,
+        labelContainer: true,
+      },
+      // 是否显示
+      dataZoom: {
+        show: true,
+      },
+    },
+    {
+      title: {
+        show: true,
+        text: '2023年业绩报表',
+        textStyle: {
+          color: '#123445',
+          fontSize: 18,
+        },
+      },
+      xAxis: {
+        name: '分公司',
+        type: 'category', // 我们的场景，使用两种，category/time
+        // minInterval:'', // category为time时，才显示
+
+        // 1. category 表头名称时，data的结构为 ['01月','02月','03月','04月','05月','06月','07月','08月']
+        // 2. category 表内数据时 data为带 $ + 字段名的组合
+        // 3. time 表内数据时 data 为 $ + 字段名的组合
+        data: '$分公司',
+        // time时，直接使用以下配置
+        // axisLabel:{
+        //     formatter: {
+        //         year: '{yyyy}',
+        //         month: '{MMM}',
+        //         day: '{d}',
+        //         hour: '{HH}:{mm}',
+        //         minute: '{HH}:{mm}',
+        //         second: '{HH}:{mm}:{ss}',
+        //         millisecond: '{hh}:{mm}:{ss} {SSS}',
+        //         none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
+        //     }
+        // }
+      },
+      yAxis: [
+        {
+          name: '万元',
+          gridIndex: 0,
+          // 特定情况下才需要，比如PH值
+          // minInterval:1
+          // precision
+        },
+      ],
+      series: [
+        {
+          type: 'line',
+          name: '分公司',
+          colorBy: 'series',
+          markPoint: {
+            data: [
+              { type: 'max', name: '最大值' },
+              { type: 'min', name: '最小值' },
+              { type: 'average', name: '平均值' },
+            ],
+          },
+          markLine: {
+            data: [
+              { type: 'max', name: '最大值' },
+              { type: 'min', name: '最小值' },
+              { type: 'average', name: '平均值' },
+            ],
+          },
+          stack: '',
+          customerConfig: {
+            unit: 'Mpa',
+          },
+        },
+      ],
+      legend: {
+        left: 'right', // left right center
+      },
+      // left/right/top/bottom 这几个允许配置
+      grid: {
+        left: 10,
+        right: 20,
+        top: 40,
+        bottom: 40,
+        labelContainer: true,
+      },
+      // 是否显示
+      dataZoom: {
+        show: true,
+      },
+    },
+  ],
+};*/
+const optionStructure = {
+  layoutOptions: {
+    layout: '上图下表',
+    chartCount: 1,
+    tableConfigs: [
+      {
+        title: '水箱个数',
+        width: '100%',
+        height: '500px',
+      },
+    ],
+    chartConfigs: [
+      {
+        title: '水箱个数',
+        width: '100%',
+        height: '100%',
+      },
+    ],
+  },
+  chartOptions: [
+    {
+      title: {
+        show: true,
+        text: '泵房水箱个数',
+        textStyle: {
+          color: '#123445',
+          fontSize: 18,
+        },
+      },
+      xAxis: {
+        name: '泵房名称',
+        type: 'category',
+        data: '${设备名称}',
+        customConfig:{
+          dataType:'columnData',// columnData
+          combineSame:true
+        },
+      },
+      yAxis: [
+        {
+          name: '个',
+          gridIndex: 0,
+        },
+      ],
+      series: [
+        {
+          type: 'bar',
+          name: '水箱个数',
+          colorBy: 'series',
+          markPoint: {
+            data: [
+              { type: 'max', name: '最大值' },
+              { type: 'min', name: '最小值' },
+              { type: 'average', name: '平均值' },
+            ],
+          },
+          markLine: {
+            data: [
+              { type: 'max', name: '最大值' },
+              { type: 'min', name: '最小值' },
+              { type: 'average', name: '平均值' },
+            ],
+          },
+          stack: '',
+          customerConfig: {
+            unit: '个',
+          },
+          data:'${水箱个数}'
+        },
+      ],
+      legend: {
+        left: 'right',
+      },
+      grid: {
+        left: 10,
+        right: 20,
+        top: 40,
+        bottom: 40,
+        labelContainer: true,
+      },
+      dataZoom: {
+        show: true,
+      },
+    },
+  ],
+};
+export default optionStructure;
+// 方案2 配置完，某些样式、设置没有提供，此时可以生成配置，然后手动修改、添加配置。

packages/base-components/BasicReport/src/ReportsManage/utils/utils.js

+import style from '../ReportsManage.less';
+import { downloadFileUrl } from '../../api/service/workflow';
+
 const isObject = (obj) => {
   return Object.prototype.toString.call(obj) === '[object Object]';
 };
@@ -50,10 +53,10 @@ const returnCols = (configItems) => {
  *  @Date: 2022/8/10
  *  @Author: ChenLong
  * */
-const returnHandledNumber = (configItems, num, isSummary) => {
+const returnHandledNumber = (configItems, num) => {
   // 精度、前缀、后缀、倍率
-  // $_d|_d%|_d*0.0001|金额|0.00|_d_sum*0.01*百万
-  if (isNaN(num)) return '-';
+  // $_d|_d%|_d*0.0001|金额|0.00|$_d_sum*0.01*百万
+  if (isNaN(Number(num))) return '-';
   if (!configItems) return num;
   num = Number(num);
   let _items = configItems.split('|');
@@ -63,7 +66,6 @@ const returnHandledNumber = (configItems, num, isSummary) => {
   let precision = 0;
   let rate = 1;
   _items.forEach(item => {
-    let _arr = [];
     if (item.match(/_d[^(\*|_sum)]/)) {
       // 后缀
       template = item;
@@ -75,20 +77,49 @@ const returnHandledNumber = (configItems, num, isSummary) => {
     } else if (item.match(/^0\./)) {
       // 精度
       precision = item.replace('0.', '').length;
-    } else if (item.match(/_d_sum\*/)) {
+    }
+  });
+  // 可能存在NaN的问题
+  return _items.includes('金额') ? Number((num * rate).toFixed(precision)).toLocaleString() : (num * rate).toFixed(precision); // 最后用_d%这个带了后缀的模板，将_d用计算后的数字替换掉，就得出带了后缀、单位的数值字符串
+};
+
+
+const returnSummaryNumber = (configItems, num, isSummary) => {
+  // 总结栏配置规则
+  // $_d_sum*0.01*百万
+  if (isNaN(Number(num))) return '-';
+  if (!configItems) return num;
+  num = Number(num);
+  let _items = configItems.split('|');
+  /*  let prefix = '';
+    let suffix = '';*/
+  let template = '_d';
+  let precision = 0;
+  let rate = 1;
+  let combine = '_combine_'; // 连接符
+  let _prefix = '';
+  _items.forEach(item => {
+    if (item.match(/_d_sum\*/)) {
       // 总结栏的倍率
+      let hasPrefix = item.match(/(\s+)?_d_sum/);
+      _prefix = hasPrefix ? item.split('_d_sum')?.[0] : '';
       let _rateStr = item.replace(/_d_sum\*/, '');
       let _temp = _rateStr.split('*'); // ['0.01','百万']
       let _rate = _temp?.[0];
-      rate = (_rate && !isNaN(Number(_rate)) && isSummary) ? (Number(_rate)) : 1;
+      rate = (_rate && !isNaN(Number(_rate)) && isSummary) ? Number(_rate) : 1;
       if (isSummary && _temp?.[1]) {
-        template = `_d ${_temp[1]}`;
+        template = `_d${combine}${_temp[1]}`;
       }
     }
   });
   // 可能存在NaN的问题
-  let final = _items.includes('金额') ? Number((num * rate).toFixed(precision)).toLocaleString() : Number((num * rate).toFixed(precision)).toLocaleString();
-  return template.replace(/_d/, isString(final) ? final : '-'); // 最后用_d%这个带了后缀的模板，将_d用计算后的数字替换掉，就得出带了后缀、单位的数值字符串
+  let final = _items.includes('金额') ? Number((num * rate).toFixed(precision)).toLocaleString() : (num * rate).toFixed(precision);
+  let _template = template.split(combine);
+  return <>
+    <span className={style.prefixOrSuffix}>{_prefix || ''}</span>
+    {template.replace(/_d(.+)?/, isString(final) ? final : '-')}
+    <span className={style.prefixOrSuffix}>{_template[1] || ''}</span>
+  </>;
 };
 /**
  *  @Description: 返回configItems内配置的默认值、默认模式等等
@@ -144,6 +175,26 @@ function filenameVerification(file, special) {
   };
 }
 
+function handleFiles(file) {
+  let _filesArr = !file ? [] : file.split(',').filter(item => item);
+  let fileList = [];
+  _filesArr.forEach((item, index) => {
+    if (item && filenameVerification({ name: item }, true).type !== 'error') { // @Tips: 直接过滤掉名字中有异常字符的文件
+      let _obj = {
+        uid: index + '_' + Math.random(),
+        value: item,
+        name: item.includes('\\') ? item.split('\\').reverse()[0] : item.split('/').reverse()[0],
+        type: 'file',
+        status: 'done',
+        url: `${downloadFileUrl}?filePath=${item}`,
+        sourcePath: item,
+      };
+      fileList.push(_obj);
+    }
+  });
+  return fileList
+}
+
 export {
   isObject,
   isString,
@@ -151,6 +202,7 @@ export {
   hasMoney,
   isArray,
   returnHandledNumber,
+  returnSummaryNumber,
   returnDefaultValueOrConfigs,
   downloadFunc,
   filenameVerification,
@@ -158,4 +210,5 @@ export {
   returnOptions,
   returnRows,
   returnCols,
+  handleFiles,
 };

packages/base-components/BasicReport/src/api/service/report.js

@@ -9,7 +9,8 @@ import * as constants from '../constants';
 
 const BASEURL = '/PandaWater/CityWater/ReportManager';
 export const API = {
-  GET_REPORT_INFO: `${BASEURL}/GetReportInfo`, // 获取报表信息
+  // GET_REPORT_INFO: `${BASEURL}/GetReportInfo`, // 获取报表信息
+  GET_REPORT_INFO: `${BASEURL}/GetReportData`, // 获取报表信息
   GET_REPORT_FILTER_VALUE: `${BASEURL}/GetReportFilterValue`, // 获取过滤字段的值的枚举
   GET_REPORT_FILTER_VALUES: `${BASEURL}/GetReportFilterValues`, // 获取过滤字段的值的枚举
   GET_REPORT_CONFIG_LIST: `${BASEURL}/GetReportConfigList`, // 获取配置列表
@@ -21,16 +22,20 @@ export const API = {
   ADD_REPORT_DETAIL_INFO: `${BASEURL}/AddReportDetailInfo`, // 附加子表字段到主表
   DELETE_REPORT_INFO: `${BASEURL}/DeleteReportInfo`, // 删除报表
   DELETE_REPORT_DETAIL_INFO: `${BASEURL}/DeleteReportDetailInfo`, // 删除字段
-  EXPORT_ACCOUNT_DATA: `${BASEURL}/ExportAccountData`, // 导出数据
-  REPORT_FILES_DOWNLOAD: `${BASEURL}/ReportFilesDownload`, // 导出选中数据
-  SAVE_REPORT_LIST_SORT_FIELDS: `${BASEURL}/SaveReportListSortFields`, // 保存排序
+  // EXPORT_ACCOUNT_DATA: `${BASEURL}/ExportAccountData`, // 导出数据
+  EXPORT_ACCOUNT_DATA: `${BASEURL}/ExportReportData`, // 导出数据
+  // REPORT_FILES_DOWNLOAD: `${BASEURL}/ReportFilesDownload`, // 导出选中数据
+  REPORT_FILES_DOWNLOAD: `${BASEURL}/DownloadReportFiles`, // 导出选中数据
+  SAVE_REPORT_LIST_SORT_FIELDS: `${BASEURL}/SaveReportSortFields`, // 保存排序
+  GET_REPORT_SORT_FIELDS:`${BASEURL}/GetReportSortFields`,
   ADD_REPORT_DETAIL_INFO_INDEX: `${BASEURL}/AddReportDetailInfoIndex`, // 变更接口顺序
   UPDATE_REPORT_DATA: `${BASEURL}/UpdateReportData`, // 更新报表数据
   GET_REPORT_DETAILS: `${BASEURL}/GetReportDetails`, // 获取报表配置
   DEL_REPORT_DATA: `${BASEURL}/DelReportData`, // 删除报表数据
   SET_REPORT_ALLOW: `${BASEURL}/SetReportAllow`, // 设置关注
   ADD_REPORT_DATA: `${BASEURL}/AddReportData`, // 添加报表数据
-  EXPORT_JPG: `${BASEURL}/ExportJPGAccountData`,
+  // EXPORT_JPG: `${BASEURL}/ExportJPGAccountData`,
+  EXPORT_JPG: `${BASEURL}/ExportReportDataWithJPG`,
   EXPORT_REPORT_CONFIG: `${BASEURL}/ExportReportConfig`,
   IMPORT_REPORT_CONFIG: `${BASEURL}/ImportReportConfig`,
   // 多数据源
@@ -40,6 +45,11 @@ export const API = {
   GET_DB_SOURCES: `${BASEURL}/GetDBSources`, // 获取数据库
   TEST_CONNECTION: `${BASEURL}/TestConnection`, // 测试链接
   DEL_REPORT_CHILD: `${BASEURL}/DelReportChlid`, // 删除挂接关系
+  // 图表配置开发
+  SAVE_CHART_CONFIG: `${BASEURL}/SaveChartConfig`, // 保存图表配置
+  GET_CHART_CONFIG: `${BASEURL}/GetChartConfig`, // 获取图表配置
+  // 图表部分接口
+  GET_CHART_CONFIG_DATA_BY_COLUMN: `${BASEURL}/GetChartConfigDataByColumn`, //获取图表数据
 };
 const reportService = {
   getReportInfo: {
@@ -102,6 +112,11 @@ const reportService = {
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_METHOD_GET,
   },
+  getReportSortFields:{
+    url: API.GET_REPORT_SORT_FIELDS,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_METHOD_GET,
+  },
   saveReportListSortFields: {
     url: API.SAVE_REPORT_LIST_SORT_FIELDS,
     method: constants.REQUEST_METHOD_POST,
@@ -182,14 +197,28 @@ const reportService = {
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_METHOD_GET,
   },
+  saveChartConfig: {
+    url: API.SAVE_CHART_CONFIG,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
+  getChartConfigDataByColumn: {
+    url: API.GET_CHART_CONFIG_DATA_BY_COLUMN,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
+  getChartConfig: {
+    url: API.GET_CHART_CONFIG,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_METHOD_GET,
+  },
 };
-export const submitReportData = (params, data) =>
-  request({
+export const submitReportData = (params, data) => request({
   url: API.UPDATE_REPORT_DATA,
   method: 'post',
   params,
   data,
-  });
+});
 export const exportAccountData = (options, params, data) =>
     request({
       url: API.EXPORT_ACCOUNT_DATA,
@@ -214,12 +243,11 @@ export const exportJPG = (options, data) => {
     data,
   });
 };
-export const addReportDetailInfoIndex = (data) =>
-  request({
+export const addReportDetailInfoIndex = (data) => request({
   url: API.ADD_REPORT_DETAIL_INFO_INDEX,
   method: 'post',
   data,
-  });
+});
 export const importReportConfig = (options, params, data) =>
     request({
       url: API.IMPORT_REPORT_CONFIG,

packages/base-components/BasicReport/src/demos/Basic.tsx

@@ -8,7 +8,7 @@ const Demo = () => {
       <div style={{ height: '600px' }}>
         <BasicReport
           params={{
-            reportName: '订单合同',
+            reportName: '分公司签单',
           }}
         />
       </div>