Skip to content

W
wisdom-components
Commit deac1b87 authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 升级报表组件

parent 42bf1200
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1581 additions and 104 deletions
config/proxy.js
View file @ deac1b87
...@@ -40,4 +40,14 @@ export default { ...@@ -40,4 +40,14 @@ export default {
'/PandaCore': '/PandaCore', '/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 0 → 100644
View file @ deac1b87
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.less 0 → 100644
View file @ deac1b87
.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 0 → 100644
View file @ deac1b87
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 0 → 100644
View file @ deac1b87
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 0 → 100644
View file @ deac1b87
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 0 → 100644
View file @ deac1b87
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
View file @ deac1b87
...@@ -34,6 +34,7 @@ import { UploadOutlined, DownloadOutlined } from '@ant-design/icons'; ...@@ -34,6 +34,7 @@ import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
import './fileUpload.less'; import './fileUpload.less';
import { downloadFunc, filenameVerification } from '../../utils/utils'; import { downloadFunc, filenameVerification } from '../../utils/utils';
import { uploadFileUrl, downloadFileUrl } from '../../../api/service/workflow'; import { uploadFileUrl, downloadFileUrl } from '../../../api/service/workflow';
import {isArray} from "lodash";
const videoTypeArray = ['.mp4']; const videoTypeArray = ['.mp4'];
const audioTypeArray = ['.mp4']; const audioTypeArray = ['.mp4'];
const fileTypeArray = []; const fileTypeArray = [];
...@@ -47,22 +48,21 @@ const FileUpload = ({ value, onChange, schema }) => { ...@@ -47,22 +48,21 @@ const FileUpload = ({ value, onChange, schema }) => {
const [previewTitle, setPreviewTitle] = useState(''); const [previewTitle, setPreviewTitle] = useState('');
const [previewVisible, setPreviewVisible] = useState(false); const [previewVisible, setPreviewVisible] = useState(false);
const [previewUrl, setPreviewUrl] = useState(''); const [previewUrl, setPreviewUrl] = useState('');
const [showList, setShowList] = useState(''); const [showList, setShowList] = useState([]);
const file = value || schema.default;
const option = { const option = {
name: 'file', name: 'file',
action: `${window.location.origin}${uploadFileUrl}`, action: `${window.location.origin}${uploadFileUrl}`,
listType: _isRecordingOrVideo ? 'picture-card' : 'picture', listType: _isRecordingOrVideo ? 'picture-card' : 'picture',
withCredentials: true, withCredentials: true,
beforeUpload(file, fileList) { beforeUpload(file, fileList) {
/** @tips: 解决提交文件中存在特殊字符的问题 */ /** @Tips: 解决提交文件中存在特殊字符的问题 */
let _continueUpload = true; let _continueUpload = true;
let _msg = { let _msg = {
type: 'success', type: 'success',
content: '上传成功！', content: '上传成功！',
}; };
fileList.forEach((item) => { fileList.forEach(item => {
let _msgObject = filenameVerification(item); let _msgObject = filenameVerification(item.name);
if (_msgObject.type === 'error') { if (_msgObject.type === 'error') {
_continueUpload = false; _continueUpload = false;
_msg = { _msg = {
...@@ -74,9 +74,10 @@ const FileUpload = ({ value, onChange, schema }) => { ...@@ -74,9 +74,10 @@ const FileUpload = ({ value, onChange, schema }) => {
_msg.type === 'error' ? message[_msg.type](_msg.content) : ''; _msg.type === 'error' ? message[_msg.type](_msg.content) : '';
return _continueUpload; return _continueUpload;
}, },
onRemove:()=>{return true},
onChange: ({ file, fileList, event }) => { onChange: ({ file, fileList, event }) => {
// 检验名字，名字不通过不允许显示 // 检验名字，名字不通过不允许显示
if (filenameVerification(file).type === 'error') return false; if (filenameVerification(file.name).type === 'error') return false;
// 返回的链接在file.response内；不设置url，预览图表不可点击 // 返回的链接在file.response内；不设置url，预览图表不可点击
if (file.status === 'done' && file.response.code === 0) { if (file.status === 'done' && file.response.code === 0) {
file.url = `${downloadFileUrl}?filePath=${file.response.data}`; file.url = `${downloadFileUrl}?filePath=${file.response.data}`;
...@@ -86,8 +87,8 @@ const FileUpload = ({ value, onChange, schema }) => { ...@@ -86,8 +87,8 @@ const FileUpload = ({ value, onChange, schema }) => {
file.status = 'error'; file.status = 'error';
message.error('上传失败！'); message.error('上传失败！');
} }
onChange((fileList && fileList.length && JSON.stringify(fileList)) || ''); onChange(fileList ?? []);
setShowList(JSON.stringify(fileList)); // setShowList(fileList ?? []);
}, },
onPreview(file) { onPreview(file) {
if (_isRecordingOrVideo) { if (_isRecordingOrVideo) {
...@@ -95,7 +96,6 @@ const FileUpload = ({ value, onChange, schema }) => { ...@@ -95,7 +96,6 @@ const FileUpload = ({ value, onChange, schema }) => {
setPreviewUrl(file.url); setPreviewUrl(file.url);
} }
}, },
previewFile(file) {},
onDownload(file) { onDownload(file) {
downloadFunc(file.url, file.name, '_self'); downloadFunc(file.url, file.name, '_self');
}, },
...@@ -105,11 +105,11 @@ const FileUpload = ({ value, onChange, schema }) => { ...@@ -105,11 +105,11 @@ const FileUpload = ({ value, onChange, schema }) => {
setPreviewTitle(''); setPreviewTitle('');
}; };
/** /**
* @description: 返回文件类型限定值 * @Description: 返回文件类型限定值
* @params: {Array} typeArray: Video | Recording | File * @Params: {Array} typeArray: Video | Recording | File
* @date: 2021/12/2 * @Date: 2021/12/2
* @author: ChenLong * @Author: ChenLong
*/ * */
const returnFileTypeString = (type) => { const returnFileTypeString = (type) => {
let _obj = { let _obj = {
Video: videoTypeArray, Video: videoTypeArray,
...@@ -120,82 +120,31 @@ const FileUpload = ({ value, onChange, schema }) => { ...@@ -120,82 +120,31 @@ const FileUpload = ({ value, onChange, schema }) => {
return _obj[type].join(','); return _obj[type].join(',');
}; };
useEffect(() => { useEffect(() => {
let fileList = []; if (isArray(value)) {
(file || '').split(',').forEach((item, index) => { setShowList(value);
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));
} }
}, [value]); }, [value]);
return ( 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 <Upload
disabled={schema.disabled} disabled={schema.disabled}
{...option} {...option}
fileList={showList ? JSON.parse(showList) : []} fileList={showList ?? []}
multiple multiple
style={{ width: '100%' }} style={{ width: '100%' }}
className={_isRecordingOrVideo ? 'formUploadVideoOrRecording' : 'formUpload'} className={_isRecordingOrVideo ? 'formUploadVideoOrRecording' : 'formUpload'}
showUploadList={{ showUploadList={{
showPreviewIcon: _isRecordingOrVideo, showPreviewIcon: _isRecordingOrVideo,
showDownloadIcon: true, showDownloadIcon: true,
downloadIcon: <DownloadOutlined />, downloadIcon: <DownloadOutlined/>,
}} }}
accept={returnFileTypeString(schema.renderTo)} accept={returnFileTypeString(schema.renderTo)}
> >
{!_isRecordingOrVideo ? ( {
<Button disabled={schema.disabled} icon={<UploadOutlined />}> !_isRecordingOrVideo ?
Upload <Button disabled={schema.disabled} icon={<UploadOutlined/>}>Upload</Button> : '+ Upload'
</Button> }
) : (
'+ Upload'
)}
</Upload> </Upload>
{/* </ImgCrop>*/} {/* </ImgCrop>*/}
<Modal <Modal
...@@ -206,13 +155,16 @@ const FileUpload = ({ value, onChange, schema }) => { ...@@ -206,13 +155,16 @@ const FileUpload = ({ value, onChange, schema }) => {
footer={null} footer={null}
onCancel={handleCancel} onCancel={handleCancel}
> >
{_isVideo ? ( {
<video width={'100%'} height={'100%'} controls autoPlay src={previewUrl} /> _isVideo ?
) : ( <video width={'100%'} height={'100%'} controls autoPlay src={previewUrl}/> : ''
'' }
)} {
{_isAudio ? <audio controls autoPlay src={previewUrl} /> : ''} _isAudio ? <audio controls autoPlay src={previewUrl}/> : ''
{_isImage ? <img width={'100%'} height={'100%'} src={previewUrl} alt="缩略图" /> : ''} }
{
_isImage ? <img width={'100%'} height={'100%'} src={previewUrl} alt="缩略图"/> : ''
}
</Modal> </Modal>
</> </>
); );
......
packages/base-components/BasicReport/src/ReportsManage/ReportWithChart/ChartComponent/index.js 0 → 100644
View file @ deac1b87
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 0 → 100644
View file @ deac1b87
.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 0 → 100644
View file @ deac1b87
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 0 → 100644
View file @ deac1b87
.wrapper {
display: flex;
width: 100%;
height: 100%;
gap: 6px;
.chartWrapper {
flex:1;
overflow: hidden;
}
.tableWrapper {
}
}
packages/base-components/BasicReport/src/ReportsManage/ReportWithChart/index.js 0 → 100644
View file @ deac1b87
/**
* 原版报表功能，支持报表展示；
* 当前功能，配置了图表，则暂时报表+图表；否则只展示报表
* @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
View file @ deac1b87
...@@ -102,7 +102,6 @@ const ReportsDataSourceSetting = () => { ...@@ -102,7 +102,6 @@ const ReportsDataSourceSetting = () => {
setSubmitLoading(false); setSubmitLoading(false);
}) })
.catch((err) => { .catch((err) => {
console.log(err);
setSubmitLoading(false); setSubmitLoading(false);
}); });
}, },
......
packages/base-components/BasicReport/src/ReportsManage/utils/handleOption.js 0 → 100644
View file @ deac1b87
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
View file @ deac1b87
...@@ -96,7 +96,6 @@ export const handleNumber = (config, number) => { ...@@ -96,7 +96,6 @@ export const handleNumber = (config, number) => {
} }
}); });
} else if (config.type === '数值标签' && config.labelConfigs && config.labelConfigs.length) { } else if (config.type === '数值标签' && config.labelConfigs && config.labelConfigs.length) {
console.log('数值标签');
_color = 'red'; _color = 'red';
} else if (config.color) { } else if (config.color) {
_color = config.color; _color = config.color;
......
packages/base-components/BasicReport/src/ReportsManage/utils/optionsStructure.js 0 → 100644
View file @ deac1b87
// 方案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
View file @ deac1b87
import style from '../ReportsManage.less';
import { downloadFileUrl } from '../../api/service/workflow';
const isObject = (obj) => { const isObject = (obj) => {
return Object.prototype.toString.call(obj) === '[object Object]'; return Object.prototype.toString.call(obj) === '[object Object]';
}; };
...@@ -50,10 +53,10 @@ const returnCols = (configItems) => { ...@@ -50,10 +53,10 @@ const returnCols = (configItems) => {
* @Date: 2022/8/10 * @Date: 2022/8/10
* @Author: ChenLong * @Author: ChenLong
* */ * */
const returnHandledNumber = (configItems, num, isSummary) => { const returnHandledNumber = (configItems, num) => {
// 精度、前缀、后缀、倍率 // 精度、前缀、后缀、倍率
// $_d|_d%|_d*0.0001|金额|0.00|_d_sum*0.01*百万 // $_d|_d%|_d*0.0001|金额|0.00|$_d_sum*0.01*百万
if (isNaN(num)) return '-'; if (isNaN(Number(num))) return '-';
if (!configItems) return num; if (!configItems) return num;
num = Number(num); num = Number(num);
let _items = configItems.split('|'); let _items = configItems.split('|');
...@@ -63,7 +66,6 @@ const returnHandledNumber = (configItems, num, isSummary) => { ...@@ -63,7 +66,6 @@ const returnHandledNumber = (configItems, num, isSummary) => {
let precision = 0; let precision = 0;
let rate = 1; let rate = 1;
_items.forEach(item => { _items.forEach(item => {
let _arr = [];
if (item.match(/_d[^(\*|_sum)]/)) { if (item.match(/_d[^(\*|_sum)]/)) {
// 后缀 // 后缀
template = item; template = item;
...@@ -75,20 +77,49 @@ const returnHandledNumber = (configItems, num, isSummary) => { ...@@ -75,20 +77,49 @@ const returnHandledNumber = (configItems, num, isSummary) => {
} else if (item.match(/^0\./)) { } else if (item.match(/^0\./)) {
// 精度 // 精度
precision = item.replace('0.', '').length; 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 _rateStr = item.replace(/_d_sum\*/, '');
let _temp = _rateStr.split('*'); // ['0.01','百万'] let _temp = _rateStr.split('*'); // ['0.01','百万']
let _rate = _temp?.[0]; 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]) { if (isSummary && _temp?.[1]) {
template = `_d ${_temp[1]}`; template = `_d${combine}${_temp[1]}`;
} }
} }
}); });
// 可能存在NaN的问题 // 可能存在NaN的问题
let final = _items.includes('金额') ? Number((num * rate).toFixed(precision)).toLocaleString() : Number((num * rate).toFixed(precision)).toLocaleString(); let final = _items.includes('金额') ? Number((num * rate).toFixed(precision)).toLocaleString() : (num * rate).toFixed(precision);
return template.replace(/_d/, isString(final) ? final : '-'); // 最后用_d%这个带了后缀的模板，将_d用计算后的数字替换掉，就得出带了后缀、单位的数值字符串 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内配置的默认值、默认模式等等 * @Description: 返回configItems内配置的默认值、默认模式等等
...@@ -144,6 +175,26 @@ function filenameVerification(file, special) { ...@@ -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 { export {
isObject, isObject,
isString, isString,
...@@ -151,6 +202,7 @@ export { ...@@ -151,6 +202,7 @@ export {
hasMoney, hasMoney,
isArray, isArray,
returnHandledNumber, returnHandledNumber,
returnSummaryNumber,
returnDefaultValueOrConfigs, returnDefaultValueOrConfigs,
downloadFunc, downloadFunc,
filenameVerification, filenameVerification,
...@@ -158,4 +210,5 @@ export { ...@@ -158,4 +210,5 @@ export {
returnOptions, returnOptions,
returnRows, returnRows,
returnCols, returnCols,
handleFiles,
}; };
packages/base-components/BasicReport/src/api/service/report.js
View file @ deac1b87
...@@ -9,7 +9,8 @@ import * as constants from '../constants'; ...@@ -9,7 +9,8 @@ import * as constants from '../constants';
const BASEURL = '/PandaWater/CityWater/ReportManager'; const BASEURL = '/PandaWater/CityWater/ReportManager';
export const API = { 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_VALUE: `${BASEURL}/GetReportFilterValue`, // 获取过滤字段的值的枚举
GET_REPORT_FILTER_VALUES: `${BASEURL}/GetReportFilterValues`, // 获取过滤字段的值的枚举 GET_REPORT_FILTER_VALUES: `${BASEURL}/GetReportFilterValues`, // 获取过滤字段的值的枚举
GET_REPORT_CONFIG_LIST: `${BASEURL}/GetReportConfigList`, // 获取配置列表 GET_REPORT_CONFIG_LIST: `${BASEURL}/GetReportConfigList`, // 获取配置列表
...@@ -21,16 +22,20 @@ export const API = { ...@@ -21,16 +22,20 @@ export const API = {
ADD_REPORT_DETAIL_INFO: `${BASEURL}/AddReportDetailInfo`, // 附加子表字段到主表 ADD_REPORT_DETAIL_INFO: `${BASEURL}/AddReportDetailInfo`, // 附加子表字段到主表
DELETE_REPORT_INFO: `${BASEURL}/DeleteReportInfo`, // 删除报表 DELETE_REPORT_INFO: `${BASEURL}/DeleteReportInfo`, // 删除报表
DELETE_REPORT_DETAIL_INFO: `${BASEURL}/DeleteReportDetailInfo`, // 删除字段 DELETE_REPORT_DETAIL_INFO: `${BASEURL}/DeleteReportDetailInfo`, // 删除字段
EXPORT_ACCOUNT_DATA: `${BASEURL}/ExportAccountData`, // 导出数据 // EXPORT_ACCOUNT_DATA: `${BASEURL}/ExportAccountData`, // 导出数据
REPORT_FILES_DOWNLOAD: `${BASEURL}/ReportFilesDownload`, // 导出选中数据 EXPORT_ACCOUNT_DATA: `${BASEURL}/ExportReportData`, // 导出数据
SAVE_REPORT_LIST_SORT_FIELDS: `${BASEURL}/SaveReportListSortFields`, // 保存排序 // 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`, // 变更接口顺序 ADD_REPORT_DETAIL_INFO_INDEX: `${BASEURL}/AddReportDetailInfoIndex`, // 变更接口顺序
UPDATE_REPORT_DATA: `${BASEURL}/UpdateReportData`, // 更新报表数据 UPDATE_REPORT_DATA: `${BASEURL}/UpdateReportData`, // 更新报表数据
GET_REPORT_DETAILS: `${BASEURL}/GetReportDetails`, // 获取报表配置 GET_REPORT_DETAILS: `${BASEURL}/GetReportDetails`, // 获取报表配置
DEL_REPORT_DATA: `${BASEURL}/DelReportData`, // 删除报表数据 DEL_REPORT_DATA: `${BASEURL}/DelReportData`, // 删除报表数据
SET_REPORT_ALLOW: `${BASEURL}/SetReportAllow`, // 设置关注 SET_REPORT_ALLOW: `${BASEURL}/SetReportAllow`, // 设置关注
ADD_REPORT_DATA: `${BASEURL}/AddReportData`, // 添加报表数据 ADD_REPORT_DATA: `${BASEURL}/AddReportData`, // 添加报表数据
EXPORT_JPG: `${BASEURL}/ExportJPGAccountData`, // EXPORT_JPG: `${BASEURL}/ExportJPGAccountData`,
EXPORT_JPG: `${BASEURL}/ExportReportDataWithJPG`,
EXPORT_REPORT_CONFIG: `${BASEURL}/ExportReportConfig`, EXPORT_REPORT_CONFIG: `${BASEURL}/ExportReportConfig`,
IMPORT_REPORT_CONFIG: `${BASEURL}/ImportReportConfig`, IMPORT_REPORT_CONFIG: `${BASEURL}/ImportReportConfig`,
// 多数据源 // 多数据源
...@@ -40,6 +45,11 @@ export const API = { ...@@ -40,6 +45,11 @@ export const API = {
GET_DB_SOURCES: `${BASEURL}/GetDBSources`, // 获取数据库 GET_DB_SOURCES: `${BASEURL}/GetDBSources`, // 获取数据库
TEST_CONNECTION: `${BASEURL}/TestConnection`, // 测试链接 TEST_CONNECTION: `${BASEURL}/TestConnection`, // 测试链接
DEL_REPORT_CHILD: `${BASEURL}/DelReportChlid`, // 删除挂接关系 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 = { const reportService = {
getReportInfo: { getReportInfo: {
...@@ -102,6 +112,11 @@ const reportService = { ...@@ -102,6 +112,11 @@ const reportService = {
method: constants.REQUEST_METHOD_GET, method: constants.REQUEST_METHOD_GET,
type: 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: { saveReportListSortFields: {
url: API.SAVE_REPORT_LIST_SORT_FIELDS, url: API.SAVE_REPORT_LIST_SORT_FIELDS,
method: constants.REQUEST_METHOD_POST, method: constants.REQUEST_METHOD_POST,
...@@ -182,14 +197,28 @@ const reportService = { ...@@ -182,14 +197,28 @@ const reportService = {
method: constants.REQUEST_METHOD_GET, method: constants.REQUEST_METHOD_GET,
type: 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) => export const submitReportData = (params, data) => request({
request({
url: API.UPDATE_REPORT_DATA, url: API.UPDATE_REPORT_DATA,
method: 'post', method: 'post',
params, params,
data, data,
}); });
export const exportAccountData = (options, params, data) => export const exportAccountData = (options, params, data) =>
request({ request({
url: API.EXPORT_ACCOUNT_DATA, url: API.EXPORT_ACCOUNT_DATA,
...@@ -214,12 +243,11 @@ export const exportJPG = (options, data) => { ...@@ -214,12 +243,11 @@ export const exportJPG = (options, data) => {
data, data,
}); });
}; };
export const addReportDetailInfoIndex = (data) => export const addReportDetailInfoIndex = (data) => request({
request({
url: API.ADD_REPORT_DETAIL_INFO_INDEX, url: API.ADD_REPORT_DETAIL_INFO_INDEX,
method: 'post', method: 'post',
data, data,
}); });
export const importReportConfig = (options, params, data) => export const importReportConfig = (options, params, data) =>
request({ request({
url: API.IMPORT_REPORT_CONFIG, url: API.IMPORT_REPORT_CONFIG,
......
packages/base-components/BasicReport/src/demos/Basic.tsx
View file @ deac1b87
...@@ -8,7 +8,7 @@ const Demo = () => { ...@@ -8,7 +8,7 @@ const Demo = () => {
<div style={{ height: '600px' }}> <div style={{ height: '600px' }}>
<BasicReport <BasicReport
params={{ params={{
reportName: '订单合同', reportName: '分公司签单',
}} }}
/> />
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment