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,101 +120,53 @@ 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) : []}
-        multiple
-        style={{ width: '100%' }}
-        className={_isRecordingOrVideo ? 'formUploadVideoOrRecording' : 'formUpload'}
-        showUploadList={{
-          showPreviewIcon: _isRecordingOrVideo,
-          showDownloadIcon: true,
-          downloadIcon: <DownloadOutlined />,
-        }}
-        accept={returnFileTypeString(schema.renderTo)}
-      >
-        {!_isRecordingOrVideo ? (
-          <Button disabled={schema.disabled} icon={<UploadOutlined />}>
-            Upload
-          </Button>
-        ) : (
-          '+ Upload'
-        )}
-      </Upload>
-      {/*      </ImgCrop>*/}
-      <Modal
-        style={{ width: '30%' }}
-        bodyStyle={{ textAlign: 'center' }}
-        visible={previewVisible}
-        title={previewTitle}
-        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="缩略图" /> : ''}
-      </Modal>
-    </>
+      <>
+        <Upload
+            disabled={schema.disabled}
+            {...option}
+            fileList={showList ?? []}
+            multiple
+            style={{ width: '100%' }}
+            className={_isRecordingOrVideo ? 'formUploadVideoOrRecording' : 'formUpload'}
+            showUploadList={{
+              showPreviewIcon: _isRecordingOrVideo,
+              showDownloadIcon: true,
+              downloadIcon: <DownloadOutlined/>,
+            }}
+            accept={returnFileTypeString(schema.renderTo)}
+        >
+          {
+            !_isRecordingOrVideo ?
+                <Button disabled={schema.disabled} icon={<UploadOutlined/>}>Upload</Button> : '+ Upload'
+          }
+
+        </Upload>
+        {/*      </ImgCrop>*/}
+        <Modal
+            style={{ width: '30%' }}
+            bodyStyle={{ textAlign: 'center' }}
+            visible={previewVisible}
+            title={previewTitle}
+            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="缩略图"/> : ''
+          }
+        </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,19 +222,18 @@ const ReportsManage = (props) => {
       return customState.split(',');
     }
   };
-
   const permission = customState
-    ? handleCustomerState(customState)
-    : PERMISSION[state || 'delete'];
+      ? handleCustomerState(customState)
+      : PERMISSION[state || 'delete'];
   const waterMarkCustom = props.params.waterMark === undefined ? false : true;
 
   const tableWrapperRef = useRef();
   const controlRef = useRef();
   if (!reportName)
     return (
-      <div className={style.lackParams}>
-        未配置reportName，请完善配置并重新登陆后查看页面！
-      </div>
+        <div className={style.lackParams}>
+          未配置reportName，请完善配置并重新登陆后查看页面！
+        </div>
     );
   const [isInit, setIsInit] = useState(true);
   const [firstToGetData, setFirstToGetData] = useState(false);
@@ -243,8 +248,8 @@ const ReportsManage = (props) => {
     pageSizeOptions: [
       ...new Set([20, 50, 100].concat(handlePageSize(pageSize))),
     ]
-      .filter((item) => Number(item))
-      .sort((a, b) => Number(a) - Number(b)),
+        .filter((item) => Number(item))
+        .sort((a, b) => Number(a) - Number(b)),
     showQuickJumper: true,
     showSizeChanger: true,
   });
@@ -275,13 +280,13 @@ const ReportsManage = (props) => {
   const [selectedRows, setSelectedRows] = useState([]); // 选中的表格行
   // const
   const [timeFrom, setTimeFrom] = useState(
-    moment().startOf(initDateModel).format(dateFormat),
+      moment().startOf(initDateModel).format(dateFormat),
   );
   const [timeTo, setTimeTo] = useState(
-    moment().endOf(initDateModel).format(dateFormat),
+      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,73 +310,79 @@ 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 = [
       {
         label: (
-          <Button
-            size="middle"
-            loading={exportLoading}
-            type="text"
-            onClick={() => exportModule('pdf', 'pdf')}
-            icon={<ExportOutlined/>}
-          >
-            导出pdf
-          </Button>
+            <Button
+                size="middle"
+                loading={exportLoading}
+                type="text"
+                onClick={() => exportModule('pdf', 'pdf')}
+                icon={<ExportOutlined/>}
+            >
+              导出pdf
+            </Button>
         ),
         key: 'exportPdf',
       },
       {
         label: (
-          <Button
-            size="middle"
-            loading={exportLoading}
-            type="text"
-            onClick={() => exportModule('excel', 'xls')}
-            icon={<ExportOutlined/>}
-          >
-            导出Excel
-          </Button>
+            <Button
+                size="middle"
+                loading={exportLoading}
+                type="text"
+                onClick={() => exportModule('excel', 'xls')}
+                icon={<ExportOutlined/>}
+            >
+              导出Excel
+            </Button>
         ),
         key: 'exportExcel',
       },
       {
         label: (
-          <Button
-            size="middle"
-            loading={exportLoading}
-            type="text"
-            onClick={() => exportImage()}
-            icon={<ExportOutlined/>}
-          >
-            导出JPG
-          </Button>
+            <Button
+                size="middle"
+                loading={exportLoading}
+                type="text"
+                onClick={() => exportImage()}
+                icon={<ExportOutlined/>}
+            >
+              导出JPG
+            </Button>
         ),
         key: 'excelPdf',
       },
     ];
     let exportFilesItem = {
       label: (
-        <Button
-          size="middle"
-          loading={exportLoading}
-          type="text"
-          onClick={() =>
-            selectedRows.length === 0
-              ? message.warning('请选择导出数据！')
-              : // 配置有waterMark字段，但是没有设置默认值时，弹出弹窗，输入水印内容；如果有默认值，则使用默认水印
-              !!waterMarkCustom && !waterMark
-                ? setShowWaterMarkModal(true)
-                : exportFiles()
-          }
-          icon={<ExportOutlined/>}
-        >
-          批量导出
-        </Button>
+          <Button
+              size="middle"
+              loading={exportLoading}
+              type="text"
+              onClick={() =>
+                  selectedRows.length === 0
+                      ? message.warning('请选择导出数据！')
+                      : // 配置有waterMark字段，但是没有设置默认值时，弹出弹窗，输入水印内容；如果有默认值，则使用默认水印
+                      !!waterMarkCustom && !waterMark
+                          ? setShowWaterMarkModal(true)
+                          : exportFiles()
+              }
+              icon={<ExportOutlined/>}
+          >
+            批量导出
+          </Button>
       ),
       key: 'exportGroup',
     };
-    if (permission.includes('rowSelect')) _item.push(exportFilesItem);
+    if (rowSelect === 'true') _item.push(exportFilesItem);
     return <Menu items={_item}/>;
   };
   const exportModule = (type, extension) => {
@@ -383,41 +394,41 @@ const ReportsManage = (props) => {
       userId: USER_ID,
     });
     exportAccountData({ responseType: 'blob' }, { exportType: type }, _data)
-      .then((res) => {
-        const file = new FileReader();
-        file.readAsText(res, 'utf-8');
-        file.onload = function() {
-          // 接口返回的是blob类型，需转换为json判断code值
-          const messageInfo = isSuccess(file.result);
-          if (messageInfo.code !== 0) {
-            message.warning(
-              messageInfo.code === -1 && messageInfo.msg
-                ? messageInfo.msg
-                : '下载失败！',
-            );
-            setExportLoading(false);
-          } else {
-            const url = window.URL.createObjectURL(
-              new Blob([res], {
-                type: 'application/octet-stream;charset=UTF-8',
-              }),
-            );
-            const a = document.createElement('a');
-            a.href = url;
-            a.target = '_blank';
-            a.download =
-              `${reportName}${moment()
-                .format('YYYY-MM-DD-HH-mm-ss')
-                .replaceAll('-', '')}.` + extension;
-            a.click();
-            a.remove();
-            setExportLoading(false);
-          }
-        };
-      })
-      .catch((err) => {
-        setExportLoading(false);
-      });
+        .then((res) => {
+          const file = new FileReader();
+          file.readAsText(res, 'utf-8');
+          file.onload = function() {
+            // 接口返回的是blob类型，需转换为json判断code值
+            const messageInfo = isSuccess(file.result);
+            if (messageInfo.code !== 0) {
+              message.warning(
+                  messageInfo.code === -1 && messageInfo.msg
+                      ? messageInfo.msg
+                      : '下载失败！',
+              );
+              setExportLoading(false);
+            } else {
+              const url = window.URL.createObjectURL(
+                  new Blob([res], {
+                    type: 'application/octet-stream;charset=UTF-8',
+                  }),
+              );
+              const a = document.createElement('a');
+              a.href = url;
+              a.target = '_blank';
+              a.download =
+                  `${reportName}${moment()
+                      .format('YYYY-MM-DD-HH-mm-ss')
+                      .replaceAll('-', '')}.` + extension;
+              a.click();
+              a.remove();
+              setExportLoading(false);
+            }
+          };
+        })
+        .catch((err) => {
+          setExportLoading(false);
+        });
   };
   const exportImage = () => {
     let _data = addFilterAndSearchParams({
@@ -434,21 +445,21 @@ const ReportsManage = (props) => {
         const messageInfo = isSuccess(file.result);
         if (messageInfo.code !== 0) {
           message.warning(
-            messageInfo.code === -1 && messageInfo.msg
-              ? messageInfo.msg
-              : '下载失败！',
+              messageInfo.code === -1 && messageInfo.msg
+                  ? messageInfo.msg
+                  : '下载失败！',
           );
           setExportLoading(false);
         } else {
           const url = window.URL.createObjectURL(
-            new Blob([res], { type: 'application/zip;charset=UTF-8' }),
+              new Blob([res], { type: 'application/zip;charset=UTF-8' }),
           );
           const a = document.createElement('a');
           a.href = url;
           a.target = '_blank';
           a.download = `${reportName}${moment()
-            .format('YYYY-MM-DD-HH-mm-ss')
-            .replaceAll('-', '')}.zip`;
+              .format('YYYY-MM-DD-HH-mm-ss')
+              .replaceAll('-', '')}.zip`;
           a.click();
           a.remove();
           setExportLoading(false);
@@ -471,9 +482,9 @@ const ReportsManage = (props) => {
       watermark: waterMarkContent, // 文件水印内容
     });
     reportFilesDownload(
-      { responseType: 'blob' },
-      { exportType: 'application/zip;charset=UTF-8' },
-      _data,
+        { responseType: 'blob' },
+        { exportType: 'application/zip;charset=UTF-8' },
+        _data,
     ).then((res) => {
       const file = new FileReader();
       file.readAsText(res, 'utf-8');
@@ -481,21 +492,21 @@ const ReportsManage = (props) => {
         const messageInfo = isSuccess(file.result);
         if (messageInfo.code !== 0) {
           message.warning(
-            messageInfo.code === -1 && messageInfo.msg
-              ? messageInfo.msg
-              : '下载失败！',
+              messageInfo.code === -1 && messageInfo.msg
+                  ? messageInfo.msg
+                  : '下载失败！',
           );
           setExportLoading(false);
         } else {
           const url = window.URL.createObjectURL(
-            new Blob([res], { type: 'application/octet-stream;charset=UTF-8' }),
+              new Blob([res], { type: 'application/octet-stream;charset=UTF-8' }),
           );
           const a = document.createElement('a');
           a.href = url;
           a.target = '_blank';
           a.download = `${reportName}${moment()
-            .format('YYYY-MM-DD-HH-mm-ss')
-            .replaceAll('-', '')}.zip`;
+              .format('YYYY-MM-DD-HH-mm-ss')
+              .replaceAll('-', '')}.zip`;
           a.click();
           a.remove();
           setExportLoading(false);
@@ -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,
@@ -524,14 +535,14 @@ const ReportsManage = (props) => {
         const messageInfo = isSuccess(file.result);
         if (messageInfo.code !== 0) {
           message.warning(
-            messageInfo.code === -1 && messageInfo.msg
-              ? messageInfo.msg
-              : '下载失败！',
+              messageInfo.code === -1 && messageInfo.msg
+                  ? messageInfo.msg
+                  : '下载失败！',
           );
           setExportLoading(false);
         } else {
           const url = window.URL.createObjectURL(
-            new Blob([res], { type: 'application/zip;charset=UTF-8' }),
+              new Blob([res], { type: 'application/zip;charset=UTF-8' }),
           );
           const a = document.createElement('a');
           a.href = url;
@@ -580,26 +591,26 @@ const ReportsManage = (props) => {
     if (searchContent) _data.content = searchContent;
     // filterObject是存起来的控制栏的过滤条件
     let _filters = Object.keys(filterObject)
-      .filter((key) => {
-        let _value = filterObject[key];
-        return (
-          (isString(_value) && _value) || (isArray(_value) && _value.length)
-        );
-      })
-      .map((key) => {
-        let _value = filterObject[key];
-        if (isString(_value) && _value)
-          return {
-            fieldAlias: key,
-            fieldValue: _value,
-          };
-        if (isArray(_value) && _value.length)
-          return {
-            fieldAlias: key,
-            fieldValue: _value.join(','),
-          };
-        return false;
-      });
+        .filter((key) => {
+          let _value = filterObject[key];
+          return (
+              (isString(_value) && _value) || (isArray(_value) && _value.length)
+          );
+        })
+        .map((key) => {
+          let _value = filterObject[key];
+          if (isString(_value) && _value)
+            return {
+              fieldAlias: key,
+              fieldValue: _value,
+            };
+          if (isArray(_value) && _value.length)
+            return {
+              fieldAlias: key,
+              fieldValue: _value.join(','),
+            };
+          return false;
+        });
     // 加上时间过滤参数
     if (dateModel !== 'all' && hasDatePicker && timeFrom && timeTo) {
       _filters.push({
@@ -609,8 +620,8 @@ const ReportsManage = (props) => {
     }
     // 合并手动传入的filters；当配置为筛选框时，筛选框选择值后，会优先取筛选框值
     if (
-      filterFields &&
-      !_filters.find((item) => item.fieldAlias === filterFields)
+        filterFields &&
+        !_filters.find((item) => item.fieldAlias === filterFields)
     ) {
       let _customerFilterArray = filterFields?.split('|') || [];
       let _customerValueArray = filterValues?.split('|') || [];
@@ -624,7 +635,7 @@ const ReportsManage = (props) => {
     // 表格上的自定义排序的按钮
     if (sorterObject && sorterObject.order) {
       _data.sortFields = `${sorterObject.columnKey} ${
-        sorterObject.order === 'ascend' ? 'asc' : 'desc'
+          sorterObject.order === 'ascend' ? 'asc' : 'desc'
       }`;
     }
     // 增加权限过滤的参数
@@ -638,21 +649,12 @@ const ReportsManage = (props) => {
   };
   // 排序字符串处理成数组
   const handleSortString = (sortString) => {
-    let _sortStringArray = sortString.split(',').map((item, index) => {
-      let _item = item.split(' ');
-      if (index === 0) {
-        return {
-          label: '主要排序',
-          value: _item[0].replace(/\[|\]/g, ''),
-          sort: _item[1],
-        };
-      } else {
-        return {
-          label: '次要排序',
-          value: _item[0].replace(/\[|\]/g, ''),
-          sort: _item[1],
-        };
-      }
+    let _sortStringArray = sortString.map((item, index) => {
+      return {
+        label: index === 0 ? '主要排序' : '次要排序',
+        value: item.fieldAlias,
+        sort: item.sortType,
+      };
     });
     setSelectedSortFields(_sortStringArray);
   };
@@ -699,74 +701,61 @@ const ReportsManage = (props) => {
       userId: USER_ID,
     });
     reportService
-      .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);
+        .getReportInfo(_data)
+        .then((res) => {
+          if (res.code === 0) {
+            let _statisticalValues = res.data?.statisticalValues;
+            // webAPIData 存在值时使用webAPIData，否则使用原始数据
+            let _tableData = res?.data?.data?.list || [];
+            if (isInit) {
+              setIsInit(false);
+            }
+            getTableSummaryConfig(reportConfigs, _statisticalValues);
+            getTableHeaderConfig(reportConfigs, _tableData);
+            let _pagination = { ...pagination };
+            _pagination.total = res.data.data?.totalCount || 0;
+            setPagination(_pagination);
+            setTableData(_tableData);
+            // 处理排序字段
+            if (_tableData) {
+              setShowSortBtn(true);
+            } else {
+              setShowSortBtn(false);
             }
-            return item;
-          }) || [];
-          let _sortString = res.data.sortString;
-          if (isInit) {
-            setIsInit(false);
-          }
-          setIsLocalDataSource(res.data.sourcesId);
-          getTableSummaryConfig(_reportDetails, _statisticalValues);
-          getTableHeaderConfig(_reportDetails, _tableData);
-          let _pagination = { ...pagination };
-          _pagination.total = res.data.webAPIData?.webAPIData
-            ? res.data.webAPIData.totalCount
-            : res.data.data?.totalCount;
-          setPagination(_pagination);
-          setTableData(_tableData);
-          // 处理排序字段
-          handleSortString(_sortString);
-          if (_tableData) {
-            setSortModalVisible(true);
-            setCurrentReportId(_reportDetails[0]?.reportId);
           } else {
-            setSortModalVisible(false);
-            setCurrentReportId(null);
+            setShowSortBtn(false);
+            message.error('未能查询到报表数据！');
+            let _pagination = { ...pagination };
+            _pagination.total = 0;
+            _pagination.current = 1;
+            setPagination(_pagination);
+            setTableData([]);
           }
-        } else {
-          setSortModalVisible(false);
-          setCurrentReportId(null);
-          message.error('未能查询到报表数据！');
-          let _pagination = { ...pagination };
-          _pagination.total = 0;
-          _pagination.current = 1;
-          setPagination(_pagination);
-          setTableData([]);
-        }
-        if (isInit) setIsInit(false);
-        setTableLoading(false);
-      })
-      .catch((err) => {
-        console.log(err);
-        setTableLoading(false);
-      });
+          if (isInit) setIsInit(false);
+          setTableLoading(false);
+        })
+        .catch((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);
-        setFirstToGetData(true);
-      } else {
-        message.error(res.msg);
+  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('获取配置失败！');
+    }
   };
   /**
    * @Description: 在配置项中，isFilter: true 用来渲染控制框；filterRule: 下拉/文本/多选
@@ -775,19 +764,20 @@ const ReportsManage = (props) => {
     let _data = config.filter((item) => item.isFilter);
     let _searchPlaceholder = [];
     _data
-      .filter((item) => item.filterRule === '文本')
-      .forEach((item) => _searchPlaceholder.push(item.fieldAlias));
+        .filter((item) => item.filterRule === '文本')
+        .forEach((item) => _searchPlaceholder.push(item.fieldAlias));
     setSearchPlaceholder(_searchPlaceholder);
     let _controls = _data.filter((item) =>
-      ControlsType.includes(item.filterRule),
+        ControlsType.includes(item.filterRule),
     );
     setControls(_controls);
     handleControls(_controls); // 处理控制条，设定默认值
     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) => {
@@ -801,32 +791,32 @@ const ReportsManage = (props) => {
     let _colSpan = -1;
     let _index = 0;
     config
-      .filter((item) => item.isShow)
-      .forEach((item, index) => {
-        if (item.isStatistics) {
-          _index += 1;
-          _colSpan = -1;
-          _summaryConfig[item.fieldAlias] = {
-            fieldName: item.fieldAlias,
-            index,
-            alignType: item.alignType,
-            type: item.statisticsRule,
-            isMoney: item.type === '数值' && !!hasMoney(item.configItems),
-            configItems: item.configItems,
-          };
-        } else {
-          let _name = `空值行${_index}`;
-          if (_colSpan === -1) {
-            _colSpan = 1;
+        .filter((item) => item.isShow)
+        .forEach((item, index) => {
+          if (item.isStatistics) {
+            _index += 1;
+            _colSpan = -1;
+            _summaryConfig[item.fieldAlias] = {
+              fieldName: item.fieldAlias,
+              index,
+              alignType: item.alignType,
+              type: item.statisticsRule,
+              isMoney: item.type === '数值' && !!hasMoney(item.configItems),
+              configItems: item.configItems,
+            };
           } else {
-            _colSpan += 1;
+            let _name = `空值行${_index}`;
+            if (_colSpan === -1) {
+              _colSpan = 1;
+            } else {
+              _colSpan += 1;
+            }
+            _summaryConfig[_name] = {
+              fieldName: _name,
+              colSpan: _colSpan,
+            };
           }
-          _summaryConfig[_name] = {
-            fieldName: _name,
-            colSpan: _colSpan,
-          };
-        }
-      });
+        });
     summary.forEach((item) => {
       switch (item.totalType) {
         case '全部':
@@ -898,8 +888,8 @@ const ReportsManage = (props) => {
 
     let _tempObj = {};
     let _fieldAliasArray = data
-      ? handleDataToGetRowSpanArray(_config, data)
-      : false; // 需要向下合并的字段
+        ? handleDataToGetRowSpanArray(_config, data)
+        : false; // 需要向下合并的字段
     _config.forEach((item) => {
       let _item = {
         title: item.fieldAlias,
@@ -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,36 +924,41 @@ 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
-                  className={style.link}
-                  onClick={() => {
-                    downloadAccountFiles(value);
-                  }}
-                >
-                  {_value}
-                </div>
-              )
+                _value && (
+                    <div
+                        className={style.link}
+                        onClick={() => {
+                          downloadAccountFiles(value);
+                        }}
+                    >
+                      {_value}
+                    </div>
+                )
             );
           }
           return mapHandleType(item.type)(
-            item,
-            [undefined, null].includes(value) ? '' : value,
-            record,
-            ...rest,
+              item,
+              [undefined, null].includes(value) ? '' : value,
+              record,
+              ...rest,
           );
         },
       };
       _item.width =
-        (!isNaN(Number(item.columnWidth)) && item.columnWidth) || 200; // 列宽，不设置时默认给200；
+          (!isNaN(Number(item.columnWidth)) && item.columnWidth) || 200; // 列宽，不设置时默认给200；
       if (item.fixedColumn) _item.fixed = item.fixedColumn; // 固定位置
       _item.align = item.alignType || 'left'; // 单元格内对齐方式
       let _keyArray = (
-        item.fieldGroup ||
-        item.fieldAlias ||
-        item.fieldName
+          item.fieldGroup ||
+          item.fieldAlias ||
+          item.fieldName
       ).split(fieldSplitStr);
       // 自定义排序
       let _sortFields = handleSortFields(sortFields);
@@ -1010,71 +1004,70 @@ const ReportsManage = (props) => {
         fixed: 'right',
         render: (text, record) => {
           return (
-            <Space className={style.handleColumnWrapper}>
-              {record.IsAllow ? (
-                <Popconfirm
-                  placement="topRight"
-                  title={'确认取消关注吗'}
-                  icon={<QuestionCircleOutlined/>}
-                  onConfirm={() => focusProject(record)}
-                >
-                  <Tooltip title={'点击取消关注'}>
-                    <HeartTwoTone twoToneColor="#eb2f96"/>
-                  </Tooltip>
-                </Popconfirm>
-              ) : (
-                <Popconfirm
-                  placement="topRight"
-                  title={'确认关注项目吗'}
-                  icon={<QuestionCircleOutlined/>}
-                  onConfirm={() => focusProject(record)}
-                >
-                  <Tooltip title={'点击添加关注'}>
-                    <HeartOutlined/>
-                  </Tooltip>
-                </Popconfirm>
-              )}
-              {permission.includes('editBtn') && !isLocalDataSource ? (
-                <FormOutlined
-                  className={style.editButton}
-                  onClick={() => {
-                    // setEditComponentVisible(true);
-                    setModalType('编辑');
-                    setCurrentData(record);
-                  }}
-                />
-              ) : (
-                ''
-              )}
-              {permission.includes('deleteBtn') && !isLocalDataSource ? (
-                <DeleteOutlined
-                  disabled
-                  className={style.deleteButton}
-                  onClick={() => {
-                    Modal.confirm({
-                      content: '你确定要删除该数据吗?',
-                      onOk: () => {
-                        reportService
-                          .delReportData({
-                            reportName: reportName,
-                            userId: USER_ID,
-                            key: record.key,
-                          })
-                          .then((res) => {
-                            if (res.code === 0) {
-                              message.success('删除成功！');
-                              setGetNewData(!getNewData);
-                              // getData(pagination); // 在onOk的回调函数内，打包后的代码会形成闭包
-                            }
+              <Space className={style.handleColumnWrapper}>
+                {record.IsAllow ? (
+                    <Popconfirm
+                        placement="topRight"
+                        title={'确认取消关注吗'}
+                        icon={<QuestionCircleOutlined/>}
+                        onConfirm={() => focusProject(record)}
+                    >
+                      <Tooltip title={'点击取消关注'}>
+                        <HeartTwoTone twoToneColor="#eb2f96"/>
+                      </Tooltip>
+                    </Popconfirm>
+                ) : (
+                    <Popconfirm
+                        placement="topRight"
+                        title={'确认关注项目吗'}
+                        icon={<QuestionCircleOutlined/>}
+                        onConfirm={() => focusProject(record)}
+                    >
+                      <Tooltip title={'点击添加关注'}>
+                        <HeartOutlined/>
+                      </Tooltip>
+                    </Popconfirm>
+                )}
+                {permission.includes('editBtn') && !isLocalDataSource ? (
+                    <FormOutlined
+                        className={style.editButton}
+                        onClick={() => {
+                          // setEditComponentVisible(true);
+                          setModalType('编辑');
+                          setCurrentData(record);
+                        }}
+                    />
+                ) : (
+                    ''
+                )}
+                {permission.includes('deleteBtn') && !isLocalDataSource ? (
+                    <DeleteOutlined
+                        disabled
+                        className={style.deleteButton}
+                        onClick={() => {
+                          Modal.confirm({
+                            content: '你确定要删除该数据吗?',
+                            onOk: () => {
+                              reportService
+                                  .delReportData({
+                                    reportName: reportName,
+                                    userId: USER_ID,
+                                    key: record.key,
+                                  })
+                                  .then((res) => {
+                                    if (res.code === 0) {
+                                      message.success('删除成功！');
+                                      setGetNewData(!getNewData);
+                                    }
+                                  });
+                            },
                           });
-                      },
-                    });
-                  }}
-                />
-              ) : (
-                ''
-              )}
-            </Space>
+                        }}
+                    />
+                ) : (
+                    ''
+                )}
+              </Space>
           );
         },
       });
@@ -1086,163 +1079,161 @@ const ReportsManage = (props) => {
     setTableX(_x);
     return _tempArray;
   };
-
   // 返回表格数据
   const returnTable = useMemo(() => {
     return (
-      <BasicTable
-        rowKey={'Key'}
-        bordered
-        loading={tableLoading}
-        dataSource={tableData}
-        columns={columns}
-        onChange={(p, filters, sorter, extra) => {
-          // 2023年4月7日，报表当前未实现filter功能，该参数暂未使用
-          const { action } = extra;
-          if (action === 'paginate') {
-            let _pagination = { ...pagination };
-            _pagination.current = p.current;
-            _pagination.pageSize = p.pageSize;
-            setPagination(_pagination);
-          }
-          if (action === 'sort') {
-            setSorterObject(sorter);
-          }
-        }}
-        // 添加表格行勾选功能  --edit by zhangzhiwei on 2023/06/26
-        rowSelection={
-          permission.includes('rowSelect')
-            ? {
-              type: 'checkbox',
-              selectedRowKeys: selectedRows.map((item) => item.key),
-              onChange: (selectedRowKeys, selectedRows) => {
-                setSelectedRows(selectedRows);
-              },
+        <BasicTable
+            rowKey={'key'}
+            bordered
+            loading={tableLoading}
+            dataSource={tableData}
+            columns={columns}
+            onChange={(p, filters, sorter, extra) => {
+              // 2023年4月7日，报表当前未实现filter功能，该参数暂未使用
+              const { action } = extra;
+              if (action === 'paginate') {
+                let _pagination = { ...pagination };
+                _pagination.current = p.current;
+                _pagination.pageSize = p.pageSize;
+                setPagination(_pagination);
+              }
+              if (action === 'sort') {
+                setSorterObject(sorter);
+              }
+            }}
+            // 添加表格行勾选功能  --edit by zhangzhiwei on 2023/06/26
+            rowSelection={
+              rowSelect === 'true'
+                  ? {
+                    type: 'checkbox',
+                    selectedRowKeys: selectedRows.map((item) => item.key),
+                    onChange: (selectedRowKeys, selectedRows) => {
+                      setSelectedRows(selectedRows);
+                    },
+                  }
+                  : false
             }
-            : false
-        }
-        pagination={permission.includes('pagination') ? pagination : false}
-        // 237是内置图片高度
-        scroll={{
-          y: tableData && tableData.length ? `calc(100% - 44px)` : 237,
-          x: tableX,
-        }}
-        summary={(pageData) => {
-          if (summaryArray.length && tableData && tableData.length)
-            return (
-              <Table.Summary fixed>
-                <Table.Summary.Row>
-                  {hasSinglePage
-                    ? summaryArray.map((item, index) => {
-                      if (item.fieldName === '空值行0') {
-                        return (
-                          <Table.Summary.Cell
-                            key={`summary_${index}`}
-                            index={0}
-                            colSpan={item.colSpan + 1}
-                          >
+            pagination={permission.includes('pagination') ? pagination : false}
+            // 237是内置图片高度
+            scroll={{
+              y: tableData && tableData.length ? `calc(100% - 44px)` : 237,
+              x: tableX,
+            }}
+            summary={(pageData) => {
+              if (summaryArray.length && tableData && tableData.length)
+                return (
+                    <Table.Summary fixed>
+                      <Table.Summary.Row>
+                        {hasSinglePage
+                            ? summaryArray.map((item, index) => {
+                              if (item.fieldName === '空值行0') {
+                                return (
+                                    <Table.Summary.Cell
+                                        key={`summary_${index}`}
+                                        index={0}
+                                        colSpan={item.colSpan + (rowSelect === 'true' ? 2 : 1)}
+                                    >
                               <span
-                                style={{
-                                  display: 'inline-block',
-                                  width: '100%',
-                                  textAlign: 'center',
-                                }}
+                                  style={{
+                                    display: 'inline-block',
+                                    width: '100%',
+                                    textAlign: 'center',
+                                  }}
                               >
                                 小计
                               </span>
-                          </Table.Summary.Cell>
-                        );
-                      } else if (item.fieldName.includes('空值行')) {
-                        return (
-                          <Table.Summary.Cell
-                            key={`summary_${index}`}
-                            index={0}
-                            colSpan={item.colSpan}
-                          />
-                        );
-                      } else {
-                        return (
-                          <Table.Summary.Cell
-                            key={`summary_${index}`}
-                            index={0}
-                          >
+                                    </Table.Summary.Cell>
+                                );
+                              } else if (item.fieldName.includes('空值行')) {
+                                return (
+                                    <Table.Summary.Cell
+                                        key={`summary_${index}`}
+                                        index={0}
+                                        colSpan={item.colSpan}
+                                    />
+                                );
+                              } else {
+                                return (
+                                    <Table.Summary.Cell
+                                        key={`summary_${index}`}
+                                        index={0}
+                                    >
                               <span
-                                style={{
-                                  display: 'inline-block',
-                                  width: '100%',
-                                  textAlign: item.alignType,
-                                }}
+                                  style={{
+                                    display: 'inline-block',
+                                    width: '100%',
+                                    textAlign: item.alignType,
+                                  }}
                               >
                                 {item.type.replace('求', '')}:{' '}
-                                {returnHandledNumber(
-                                  item.configItems,
-                                  item['单页'],
-                                  true,
+                                {returnSummaryNumber(
+                                    item.configItems,
+                                    item['单页'],
+                                    true,
                                 )}
                               </span>
-                          </Table.Summary.Cell>
-                        );
-                      }
-                    })
-                    : ''}
-                </Table.Summary.Row>
-                <Table.Summary.Row>
-                  {hasTotal
-                    ? summaryArray.map((item) => {
-                      if (item.fieldName === '空值行0') {
-                        return (
-                          <Table.Summary.Cell
-                            index={0}
-                            colSpan={item.colSpan + 1}
-                          >
+                                    </Table.Summary.Cell>
+                                );
+                              }
+                            })
+                            : ''}
+                      </Table.Summary.Row>
+                      <Table.Summary.Row>
+                        {hasTotal
+                            ? summaryArray.map((item) => {
+                              if (item.fieldName === '空值行0') {
+                                return (
+                                    <Table.Summary.Cell
+                                        index={0}
+                                        colSpan={item.colSpan + (rowSelect === 'true' ? 2 : 1)}
+                                    >
                               <span
-                                style={{
-                                  display: 'inline-block',
-                                  width: '100%',
-                                  textAlign: 'center',
-                                }}
+                                  style={{
+                                    display: 'inline-block',
+                                    width: '100%',
+                                    textAlign: 'center',
+                                  }}
                               >
                                 总计
                               </span>
-                          </Table.Summary.Cell>
-                        );
-                      } else if (item.fieldName.includes('空值行')) {
-                        return (
-                          <Table.Summary.Cell
-                            index={0}
-                            colSpan={item.colSpan}
-                          />
-                        );
-                      } else {
-                        return (
-                          <Table.Summary.Cell index={0}>
+                                    </Table.Summary.Cell>
+                                );
+                              } else if (item.fieldName.includes('空值行')) {
+                                return (
+                                    <Table.Summary.Cell
+                                        index={0}
+                                        colSpan={item.colSpan}
+                                    />
+                                );
+                              } else {
+                                return (
+                                    <Table.Summary.Cell index={0}>
                               <span
-                                style={{
-                                  display: 'inline-block',
-                                  width: '100%',
-                                  textAlign: item.alignType,
-                                }}
+                                  style={{
+                                    display: 'inline-block',
+                                    width: '100%',
+                                    textAlign: item.alignType,
+                                  }}
                               >
                                 {item.type.replace('求', '')}:{' '}
-                                {returnHandledNumber(
-                                  item.configItems,
-                                  item['全部'],
-                                  true,
+                                {returnSummaryNumber(
+                                    item.configItems,
+                                    item['全部'],
+                                    true,
                                 )}
                               </span>
-                          </Table.Summary.Cell>
-                        );
-                      }
-                    })
-                    : ''}
-                </Table.Summary.Row>
-              </Table.Summary>
-            );
-        }}
-      />
+                                    </Table.Summary.Cell>
+                                );
+                              }
+                            })
+                            : ''}
+                      </Table.Summary.Row>
+                    </Table.Summary>
+                );
+            }}
+        />
     );
   }, [columns, tableLoading, tableData, selectedRows]);
-
   const changeSortField = (value, index, key) => {
     let _selectedSortFields = [...selectedSortFields];
     _selectedSortFields[index][key] = value;
@@ -1270,46 +1261,46 @@ const ReportsManage = (props) => {
     const paginationHeight = 75; // 分页部分的高度
     const tableHeaderHeight = tableHeaderLevel * 40; // 表头高度
     const summaryHeight = summaryArray.length
-      ? 40 * (Number(hasTotal) + Number(hasSinglePage))
-      : 0; // 总结栏的高度
+        ? 40 * (Number(hasTotal) + Number(hasSinglePage))
+        : 0; // 总结栏的高度
     const _minus =
-      clientHeight -
-      _height -
-      16 -
-      4 -
-      tableHeaderHeight -
-      paginationHeight -
-      summaryHeight -
-      10;
+        clientHeight -
+        _height -
+        16 -
+        4 -
+        tableHeaderHeight -
+        paginationHeight -
+        summaryHeight -
+        10;
     setListHeight(clientHeight - _height - paginationHeight - 4 - 6 - 16 - 2);
     setTableY(_minus);
   };
   const getTableLevel = (config) => {
     let _level =
-      config.reduce((final, curr) => {
-        return (final = curr.level > final ? curr.level : final);
-      }, 1) || 1;
+        config.reduce((final, curr) => {
+          return (final = curr.level > final ? curr.level : final);
+        }, 1) || 1;
     setTableHeaderLevel(_level);
   };
   const saveReportListSortFields = (callback) => {
     reportService
-      .saveReportListSortFields({
-        reportId: currentReportId,
-        sortFields: selectedSortFields
-          .filter((item) => item.value)
-          .map((item) => ({
-            fieldAlias: item.value,
-            sortType: item.sort,
-          })),
-      })
-      .then((res) => {
-        if (res.code === 0) {
-          message.success('排序保存成功！');
-          callback();
-        } else {
-          message.error(res.msg);
-        }
-      });
+        .saveReportListSortFields({
+          reportId: currentReportId,
+          sortFields: selectedSortFields
+              .filter((item) => item.value)
+              .map((item) => ({
+                fieldAlias: item.value,
+                sortType: item.sort,
+              })),
+        })
+        .then((res) => {
+          if (res.code === 0) {
+            message.success('排序保存成功！');
+            callback();
+          } else {
+            message.error(res.msg);
+          }
+        });
   };
   /**
    *  @Description: 判断是否存在【时间】类型的选择，并返回组件；并记录默认值
@@ -1322,8 +1313,8 @@ const ReportsManage = (props) => {
       _configItems.forEach((str) => {
         if (str.includes('defaultValue=')) {
           controlSelectChange(
-            item.fieldAlias,
-            str.replace('defaultValue=', ''),
+              item.fieldAlias,
+              str.replace('defaultValue=', ''),
           );
         }
       });
@@ -1334,17 +1325,17 @@ const ReportsManage = (props) => {
     setHasDatePicker(_typeObj ? _typeObj.fieldAlias : '');
     const _configItems = _typeObj?.configItems.split('|') || [''];
     let _showModels = _configItems
-      .find((item) => item.includes('showModels='))
-      ?.replace('showModels=', '')
-      ?.split(',');
+        .find((item) => item.includes('showModels='))
+        ?.replace('showModels=', '')
+        ?.split(',');
     let _defaultDate = _configItems
-      .find((item) => item.includes('defaultDate='))
-      ?.replace('defaultDate=', '')
-      ?.split(',');
+        .find((item) => item.includes('defaultDate='))
+        ?.replace('defaultDate=', '')
+        ?.split(',');
     let _defaultModel =
-      _configItems
-        .find((item) => item.includes('defaultModel='))
-        ?.replace('defaultModel=', '') || 'year';
+        _configItems
+            .find((item) => item.includes('defaultModel='))
+            ?.replace('defaultModel=', '') || 'year';
     _defaultDate = MODEL.includes(_defaultModel) ? _defaultDate : 'year'; // 确保值符合要求
     if (_defaultDate && _defaultDate.length > 1) {
       _defaultDate = {
@@ -1361,17 +1352,17 @@ const ReportsManage = (props) => {
     }
     // 给定默认值，初始化时可以加载
     changeDate(
-      {
-        dateFrom: _defaultDate?.dateFrom
-          .clone()
-          .startOf(_defaultModel)
-          .format(dateFormat),
-        dateTo: _defaultDate?.dateTo
-          .clone()
-          .endOf(_defaultModel)
-          .format(dateFormat),
-      },
-      _defaultModel,
+        {
+          dateFrom: _defaultDate?.dateFrom
+              .clone()
+              .startOf(_defaultModel)
+              .format(dateFormat),
+          dateTo: _defaultDate?.dateTo
+              .clone()
+              .endOf(_defaultModel)
+              .format(dateFormat),
+        },
+        _defaultModel,
     );
     setDefaultDateConfig({
       defaultDate: _defaultDate?.dateFrom,
@@ -1381,19 +1372,23 @@ const ReportsManage = (props) => {
   };
   const focusProject = (record) => {
     reportService
-      .setReportAllow({
-        userId: USER_ID,
-        reportName: reportName,
-        reportKey: record.key,
-      })
-      .then((res) => {
-        if (res.code === 0) {
-          message.success(`${record.IsAllow ? '取消' : '关注'}成功！`);
-          getData(pagination);
-        } else {
-          message.error(`${record.IsAllow ? '取消' : '关注'}失败！`);
-        }
-      });
+        .setReportAllow({
+          userId: USER_ID,
+          reportName: reportName,
+          reportKey: record.key,
+        })
+        .then((res) => {
+          if (res.code === 0) {
+            message.success(`${record.IsAllow ? '取消' : '关注'}成功！`);
+            getData(pagination);
+          } else {
+            message.error(`${record.IsAllow ? '取消' : '关注'}失败！`);
+          }
+        });
+  };
+  const printTable = () => {
+    let _columns = columns.filter(item => item.title !== '操作');
+    Print({ tableData, columns: _columns, name: reportName }, 'simple_table');
   };
 
   function getRefHeight() {
@@ -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,312 +1425,327 @@ 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}>
-      {/* 预留容器，提供给点击后的功能显示 */}
-      {detailsComponentVisible ? (
+      <div className={style.reportManage} style={{ ...(props.style ?? {}) }} ref={tableWrapperRef}>
+        {/* 预留容器，提供给点击后的功能显示 */}
+        {detailsComponentVisible ? (
+            <div
+                className={style.contentWrapper}
+                style={{
+                  position: 'absolute',
+                  zIndex: 100,
+                  width: 'calc(100% - 16px)',
+                  height: 'calc(100% - 16px)',
+                }}
+            >
+              <DetailsComponent
+                  url={detailConfig.url}
+                  params={detailConfig.params}
+                  onCancel={() => setDetailsComponentVisible(false)}
+              />
+            </div>
+        ) : (
+            ''
+        )}
+        {/* 为方便阅读，分开两部分代码 */}
         <div
-          className={style.contentWrapper}
-          style={{
-            position: 'absolute',
-            zIndex: 100,
-            width: 'calc(100% - 16px)',
-            height: 'calc(100% - 16px)',
-          }}
+            className={style.contentWrapper}
+            style={{ zIndex: detailsComponentVisible ? -1 : 'auto' }}
         >
-          <DetailsComponent
-            url={detailConfig.url}
-            params={detailConfig.params}
-            onCancel={() => setDetailsComponentVisible(false)}
-          />
-        </div>
-      ) : (
-        ''
-      )}
-      {/* 为方便阅读，分开两部分代码 */}
-      <div
-        className={style.contentWrapper}
-        style={{ zIndex: detailsComponentVisible ? -1 : 'auto' }}
-      >
-        <Row className={style.controlRow} ref={controlRef}>
-          <Space style={{ flex: 1 }} size={8} wrap={true}>
-            {/*时间搜索控件，确保时间搜索控件在第一个，单独匹配*/}
-            {hasDatePicker &&
-            defaultDateConfig.defaultDate !== null &&
-            permission.includes('filters') ? (
-              <DatePickerGroup
-                showModels={defaultDateConfig.showModels}
-                onChange={changeDate}
-                format={dateFormat}
-                defaultModel={defaultDateConfig.defaultModel}
-                defaultDate={defaultDateConfig.defaultDate}
-              />
+          <Row className={style.controlRow} ref={controlRef}>
+            <Space style={{ flex: 1 }} size={8} wrap={true}>
+              {/*时间搜索控件，确保时间搜索控件在第一个，单独匹配*/}
+              {hasDatePicker &&
+              defaultDateConfig.defaultDate !== null &&
+              permission.includes('filters') ? (
+                  <DatePickerGroup
+                      showModels={defaultDateConfig.showModels}
+                      onChange={changeDate}
+                      format={dateFormat}
+                      defaultModel={defaultDateConfig.defaultModel}
+                      defaultDate={defaultDateConfig.defaultDate}
+                  />
+              ) : (
+                  ''
+              )}
+              {controls && controls.length && permission.includes('filters')
+                  ? controls
+                      .filter((control) =>
+                          ['下拉', '多选', '复选框'].includes(control.filterRule),
+                      )
+                      .map((control) => {
+                        return (
+                            <Form.Item
+                                label={control.fieldAlias}
+                                key={control.fieldAlias}
+                            >
+                              <ReturnControlComponent
+                                  style={{ width: 240 }}
+                                  type={control.filterRule}
+                                  reportName={reportName}
+                                  fieldAlias={control.fieldAlias}
+                                  configItems={control.configItems}
+                                  onChange={(e) =>
+                                      controlSelectChange(control.fieldAlias, e)
+                                  }
+                                  filterFields={filterFields}
+                                  filterValues={filterValues}
+                                  filterObject={addFilterAndSearchParams({
+                                    reportName: reportName,
+                                    userId: USER_ID,
+                                  })}
+                              />
+                            </Form.Item>
+                        );
+                      })
+                  : ''}
+              {permission.includes('filters') ? (
+                  <Form.Item
+                      label={
+                        searchPlaceholder && searchPlaceholder.length
+                            ? '快速索引'
+                            : ''
+                      }
+                      key={'快速搜索控件'}
+                  >
+                    {searchPlaceholder && searchPlaceholder.length ? (
+                        <ReturnControlComponent
+                            placeholder={`请输入${
+                                searchPlaceholder.length
+                                    ? searchPlaceholder.join('，')
+                                    : '关键字'
+                            }搜索`}
+                            style={{ width: 240 }}
+                            type={'文本'}
+                            onChange={(e) => {
+                              searchInputChange(e);
+                            }}
+                            onSearch={searchData}
+                        />
+                    ) : (
+                        <Button type={'primary'} onClick={searchData}>
+                          搜索
+                        </Button>
+                    )}
+                  </Form.Item>
+              ) : (
+                  ''
+              )}
+            </Space>
+            {permission.includes('sortBtn') ||
+            permission.includes('exportBtn') ||
+            permission.includes('addBtn') ? (
+                <div style={{ width: 'auto', textAlign: 'end' }}>
+                  <Space size={8} nowrap>
+                    {permission.includes('addBtn') && !isLocalDataSource ? (
+                        <Form.Item>
+                          <Button
+                              type={'primary'}
+                              title={'自定义排序'}
+                              icon={<PlusOutlined/>}
+                              onClick={() => {
+                                setModalType('新增');
+                                setCurrentData({});
+                              }}
+                          >
+                            添加
+                          </Button>
+                        </Form.Item>
+                    ) : (
+                        ''
+                    )}
+                    {showSortBtn && permission.includes('sortBtn') ? (
+                        <Form.Item>
+                          <Button
+                              type={'primary'}
+                              title={'自定义排序'}
+                              icon={<SortAscendingOutlined/>}
+                              onClick={() => setModalVisible(true)}
+                          >
+                            排序
+                          </Button>
+                        </Form.Item>
+                    ) : (
+                        ''
+                    )}
+                    {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}>
+                            <Button>
+                              <Space>
+                                导出
+                                <DownOutlined/>
+                              </Space>
+                            </Button>
+                          </Dropdown>
+                        </Form.Item>
+                    ) : (
+                        ''
+                    )}
+                  </Space>
+                </div>
             ) : (
-              ''
+                ''
             )}
-            {controls && controls.length && permission.includes('filters')
-              ? controls
-                .filter((control) =>
-                  ['下拉', '多选', '复选框'].includes(control.filterRule),
-                )
-                .map((control) => {
-                  return (
-                    <Form.Item
-                      label={control.fieldAlias}
-                      key={control.fieldAlias}
-                    >
-                      <ReturnControlComponent
-                        style={{ width: 240 }}
-                        type={control.filterRule}
-                        reportName={reportName}
-                        fieldAlias={control.fieldAlias}
-                        configItems={control.configItems}
-                        onChange={(e) =>
-                          controlSelectChange(control.fieldAlias, e)
-                        }
-                        filterFields={filterFields}
-                        filterValues={filterValues}
-                        filterObject={addFilterAndSearchParams({
-                          reportName: reportName,
-                          userId: USER_ID,
-                        })}
-                      />
-                    </Form.Item>
-                  );
-                })
-              : ''}
-            {permission.includes('filters') ? (
-              <Form.Item
-                label={
-                  searchPlaceholder && searchPlaceholder.length
-                    ? '快速索引'
-                    : ''
-                }
-                key={'快速搜索控件'}
-              >
-                {searchPlaceholder && searchPlaceholder.length ? (
-                  <ReturnControlComponent
-                    placeholder={`请输入${
-                      searchPlaceholder.length
-                        ? searchPlaceholder.join('，')
-                        : '关键字'
-                    }搜索`}
-                    style={{ width: 240 }}
-                    type={'文本'}
-                    onChange={(e) => {
-                      searchInputChange(e);
-                    }}
-                    onSearch={searchData}
-                  />
-                ) : (
-                  <Button type={'primary'} onClick={searchData}>
-                    搜索
-                  </Button>
-                )}
-              </Form.Item>
+          </Row>
+          <div
+              className={style.tableContent}
+              style={{ height: `calc(100% - ${controlsHeight || 0}px)` }}
+          >
+            {columns && columns.length ? (
+                returnTable
             ) : (
-              ''
+                <div className={style.spinWrapper}>
+                  <Spin/>
+                </div>
             )}
-          </Space>
-          {permission.includes('sortBtn') ||
-          permission.includes('exportBtn') ||
-          permission.includes('addBtn') ? (
-            <div style={{ width: 270, textAlign: 'end' }}>
-              <Space size={8} nowrap>
-                {permission.includes('addBtn') && !isLocalDataSource ? (
-                  <Form.Item>
-                    <Button
+          </div>
+        </div>
+        <Modal
+            title={'自定义排序字段'}
+            visible={modalVisible}
+            onCancel={() => setModalVisible(false)}
+            footer={
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div>
+                  <Button type={'link'} onClick={() => addOtherSortFields()}>
+                    增加次要排序
+                  </Button>
+                </div>
+                <div>
+                  <Button onClick={() => setModalVisible(false)}>取消</Button>
+                  <Button
                       type={'primary'}
-                      title={'自定义排序'}
-                      icon={<PlusOutlined/>}
                       onClick={() => {
-                        setModalType('新增');
-                        setCurrentData({});
+                        saveReportListSortFields(() => getData(pagination));
+                        setModalVisible(false);
                       }}
+                  >
+                    确认
+                  </Button>
+                </div>
+              </div>
+            }
+        >
+          {selectedSortFields.map((item, index) => (
+              <Row key={'label'} className={style.controlRow}>
+                <Space size={8} wrap={true}>
+                  <Form.Item label={item.label}>
+                    <Select
+                        style={{ width: 240 }}
+                        defaultValue={item.value}
+                        value={item.value}
+                        onChange={(e) => changeSortField(e, index, 'value')}
                     >
-                      添加
-                    </Button>
+                      <Option value="">未选择</Option>
+                      {allSortFields.map((item) => (
+                          <Option value={item} key={item}>{item}</Option>
+                      ))}
+                    </Select>
                   </Form.Item>
-                ) : (
-                  ''
-                )}
-                {sortModalVisible && permission.includes('sortBtn') ? (
                   <Form.Item>
-                    <Button
-                      type={'primary'}
-                      title={'自定义排序'}
-                      icon={<SortAscendingOutlined/>}
-                      onClick={() => setModalVisible(true)}
+                    <Select
+                        style={{ width: 120 }}
+                        defaultValue={item.sort}
+                        value={item.sort}
+                        onChange={(e) => changeSortField(e, index, 'sort')}
                     >
-                      排序
-                    </Button>
+                      <Option value={'asc'}>升序</Option>
+                      <Option value={'desc'}>降序</Option>
+                    </Select>
                   </Form.Item>
-                ) : (
-                  ''
-                )}
-                {permission.includes('exportBtn') ? (
-                  <Form.Item>
-                    <Dropdown style={{ float: 'right' }} overlay={menu}>
-                      <Button>
-                        <Space>
-                          导出
-                          <DownOutlined/>
-                        </Space>
-                      </Button>
-                    </Dropdown>
-                  </Form.Item>
-                ) : (
-                  ''
-                )}
-              </Space>
-            </div>
-          ) : (
-            ''
-          )}
-        </Row>
-        <div
-          className={style.tableContent}
-          style={{ height: `calc(100% - ${controlsHeight || 0}px)` }}
+                  {index !== 0 ? (
+                      <Form.Item>
+                        <MinusCircleOutlined
+                            style={{ color: 'rgba(0,0,0,.65)' }}
+                            onClick={() => deleteSortField(index)}
+                        />
+                      </Form.Item>
+                  ) : (
+                      ''
+                  )}
+                </Space>
+              </Row>
+          ))}
+        </Modal>
+        <Modal
+            visible={extraModal}
+            onCancel={() => setExtraModal(false)}
+            destroyOnClose
+            width={800}
         >
-          {columns && columns.length ? (
-            returnTable
-          ) : (
-            <div className={style.spinWrapper}>
-              <Spin/>
-            </div>
-          )}
-        </div>
-      </div>
-      <Modal
-        title={'自定义排序字段'}
-        visible={modalVisible}
-        onCancel={() => setModalVisible(false)}
-        footer={
-          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <div>
-              <Button type={'link'} onClick={() => addOtherSortFields()}>
-                增加次要排序
-              </Button>
-            </div>
-            <div>
-              <Button onClick={() => setModalVisible(false)}>取消</Button>
-              <Button
-                type={'primary'}
-                onClick={() => {
-                  saveReportListSortFields(() => getData(pagination));
-                  setModalVisible(false);
-                }}
-              >
-                确认
-              </Button>
-            </div>
-          </div>
-        }
-      >
-        {selectedSortFields.map((item, index) => (
-          <Row key={'label'} className={style.controlRow}>
-            <Space size={8} wrap={true}>
-              <Form.Item label={item.label}>
-                <Select
-                  style={{ width: 240 }}
-                  defaultValue={item.value}
-                  value={item.value}
-                  onChange={(e) => changeSortField(e, index, 'value')}
-                >
-                  <Option value="">未选择</Option>
-                  {allSortFields.map((item) => (
-                    <Option value={item} key={item}>{item}</Option>
-                  ))}
-                </Select>
-              </Form.Item>
-              <Form.Item>
-                <Select
-                  style={{ width: 120 }}
-                  defaultValue={item.sort}
-                  value={item.sort}
-                  onChange={(e) => changeSortField(e, index, 'sort')}
-                >
-                  <Option value={'asc'}>升序</Option>
-                  <Option value={'desc'}>降序</Option>
-                </Select>
-              </Form.Item>
-              {index !== 0 ? (
-                <Form.Item>
-                  <MinusCircleOutlined
-                    style={{ color: 'rgba(0,0,0,.65)' }}
-                    onClick={() => deleteSortField(index)}
-                  />
-                </Form.Item>
-              ) : (
-                ''
-              )}
-            </Space>
-          </Row>
-        ))}
-      </Modal>
-      <Modal
-        visible={extraModal}
-        onCancel={() => setExtraModal(false)}
-        destroyOnClose
-        width={800}
-      >
-        {extra}
-      </Modal>
-      {/* 编辑表单 */}
-      <Modal
-        title={`${modalType}报表信息`}
-        visible={!!modalType}
-        width={'80%'}
-        footer={null}
-        // visible={true}
-        destroyOnClose
-        onCancel={() => setModalType('')}
-      >
-        <ReportEditForm
-          modalType={modalType}
-          reportDetails={tableStruct}
-          reportData={currentData}
-          onCancel={() => {
-            setModalType('');
-            getData(pagination);
-          }}
-          reportName={reportName}
-        />
-      </Modal>
-      {/* 编辑水印 */}
-      <Modal
-        title={`添加水印`}
-        visible={showWaterMarkModal}
-        destroyOnClose
-        onCancel={() => setShowWaterMarkModal(false)}
-        onOk={exportFiles}
-      >
-        <Form.Item
-          label="水印内容"
-          name="水印内容"
-          rules={[
-            {
-              required: true,
-              message: '请输入水印内容...!',
-            },
-          ]}
+          {extra}
+        </Modal>
+        {/* 编辑表单 */}
+        <Modal
+            title={`${modalType}报表信息`}
+            visible={!!modalType}
+            width={'80%'}
+            footer={null}
+            // visible={true}
+            destroyOnClose
+            onCancel={() => setModalType('')}
         >
-          <Input
-            placeholder="请输入水印内容..."
-            onChange={(e) => {
-              setWaterMarkContent(e.target.value);
-            }}
+          <ReportEditForm
+              modalType={modalType}
+              reportDetails={tableStruct}
+              reportData={currentData}
+              onCancel={() => {
+                setModalType('');
+                getData(pagination);
+              }}
+              reportName={reportName}
           />
-        </Form.Item>
-      </Modal>
-    </div>
+        </Modal>
+        {/* 编辑水印 */}
+        <Modal
+            title={`添加水印`}
+            visible={showWaterMarkModal}
+            destroyOnClose
+            onCancel={() => setShowWaterMarkModal(false)}
+            onOk={exportFiles}
+        >
+          <Form.Item
+              label="水印内容"
+              name="水印内容"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入水印内容...!',
+                },
+              ]}
+          >
+            <Input
+                placeholder="请输入水印内容..."
+                onChange={(e) => {
+                  setWaterMarkContent(e.target.value);
+                }}
+            />
+          </Form.Item>
+        </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/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,30 +197,44 @@ 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({
-    url: API.UPDATE_REPORT_DATA,
-    method: 'post',
-    params,
-    data,
-  });
+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,
-    method: 'post',
-    ...options,
-    params,
-    data,
-  });
+    request({
+      url: API.EXPORT_ACCOUNT_DATA,
+      method: 'post',
+      ...options,
+      params,
+      data,
+    });
 export const reportFilesDownload = (options, params, data) =>
-  request({
-    url: API.REPORT_FILES_DOWNLOAD,
-    method: 'post',
-    ...options,
-    params,
-    data,
-  });
+    request({
+      url: API.REPORT_FILES_DOWNLOAD,
+      method: 'post',
+      ...options,
+      params,
+      data,
+    });
 export const exportJPG = (options, data) => {
   return request({
     url: API.EXPORT_JPG,
@@ -214,25 +243,24 @@ export const exportJPG = (options, data) => {
     data,
   });
 };
-export const addReportDetailInfoIndex = (data) =>
-  request({
-    url: API.ADD_REPORT_DETAIL_INFO_INDEX,
-    method: 'post',
-    data,
-  });
+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,
-    method: 'post',
-    ...options,
-    params,
-    data,
-  });
+    request({
+      url: API.IMPORT_REPORT_CONFIG,
+      method: 'post',
+      ...options,
+      params,
+      data,
+    });
 export const exportReportConfig = (options, params) =>
-  request({
-    url: API.EXPORT_REPORT_CONFIG,
-    method: 'get',
-    ...options,
-    params,
-  });
+    request({
+      url: API.EXPORT_REPORT_CONFIG,
+      method: 'get',
+      ...options,
+      params,
+    });
 export default reportService;

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

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