Skip to content

W
wisdom-components
Commit d84fc0f8 authored by 刘梦焕's avatar 刘梦焕
Browse files
Options

Merge branch 'dev' of https://g.civnet.cn:8443/ReactWeb5/wisdom-components into dev

parents bc1dfb66 0039d401
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1913 additions and 267 deletions
config/proxy.js
View file @ d84fc0f8
......@@ -40,4 +40,14 @@ export default {
'/PandaCore': '/PandaCore',
},
},
'/PandaWater': {
target: proxyURL,
changeOrigin: true,
headers: {
'Access-Control-Allow-Origin': '*',
},
pathRewrite: {
'/PandaWater': '/PandaWater',
},
},
};
package.json
View file @ d84fc0f8
......@@ -171,7 +171,7 @@
"js-sha256": "^0.10.1",
"jszip": "^3.5.0",
"less": "^3.13.1",
"mathjs": "^12.2.0",
"mathjs": "^11.2.0",
"mqtt-client": "^1.0.12",
"npm": "^9.6.4",
"optimize-css-assets-webpack-plugin": "^6.0.1",
......
packages/base-components/BasicReport/CHANGELOG.md
View file @ d84fc0f8
......@@ -2,6 +2,12 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.13.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/basicreport@1.12.0...@wisdom-components/basicreport@1.13.0) (2023-12-26)
### Features
- 升级报表组件 ([deac1b8](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/deac1b87d476c209e4ff20b17e546b35389eef93))
# [1.12.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/basicreport@1.11.1...@wisdom-components/basicreport@1.12.0) (2023-11-13)
### Features
......
packages/base-components/BasicReport/package.json
View file @ d84fc0f8
{
"name": "@wisdom-components/basicreport",
"version": "1.12.0",
"version": "1.13.0",
"description": "> TODO: description",
"author": "chenlong <857265978@163.com>",
"homepage": "",
......
packages/base-components/BasicReport/src/ReportsManage/Components/ChartConfig/forms.js 0 → 100644
View file @ d84fc0f8
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 @ d84fc0f8
.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 @ d84fc0f8
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 @ d84fc0f8
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 @ d84fc0f8
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 @ d84fc0f8
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 @ d84fc0f8
......@@ -34,6 +34,7 @@ import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
import './fileUpload.less';
import { downloadFunc, filenameVerification } from '../../utils/utils';
import { uploadFileUrl, downloadFileUrl } from '../../../api/service/workflow';
import {isArray} from "lodash";
const videoTypeArray = ['.mp4'];
const audioTypeArray = ['.mp4'];
const fileTypeArray = [];
......@@ -47,22 +48,21 @@ const FileUpload = ({ value, onChange, schema }) => {
const [previewTitle, setPreviewTitle] = useState('');
const [previewVisible, setPreviewVisible] = useState(false);
const [previewUrl, setPreviewUrl] = useState('');
const [showList, setShowList] = useState('');
const file = value || schema.default;
const [showList, setShowList] = useState([]);
const option = {
name: 'file',
action: `${window.location.origin}${uploadFileUrl}`,
listType: _isRecordingOrVideo ? 'picture-card' : 'picture',
withCredentials: true,
beforeUpload(file, fileList) {
/** @tips: 解决提交文件中存在特殊字符的问题 */
/** @Tips: 解决提交文件中存在特殊字符的问题 */
let _continueUpload = true;
let _msg = {
type: 'success',
content: '上传成功！',
};
fileList.forEach((item) => {
let _msgObject = filenameVerification(item);
fileList.forEach(item => {
let _msgObject = filenameVerification(item.name);
if (_msgObject.type === 'error') {
_continueUpload = false;
_msg = {
......@@ -74,9 +74,10 @@ const FileUpload = ({ value, onChange, schema }) => {
_msg.type === 'error' ? message[_msg.type](_msg.content) : '';
return _continueUpload;
},
onRemove:()=>{return true},
onChange: ({ file, fileList, event }) => {
// 检验名字，名字不通过不允许显示
if (filenameVerification(file).type === 'error') return false;
if (filenameVerification(file.name).type === 'error') return false;
// 返回的链接在file.response内；不设置url，预览图表不可点击
if (file.status === 'done' && file.response.code === 0) {
file.url = `${downloadFileUrl}?filePath=${file.response.data}`;
......@@ -86,8 +87,8 @@ const FileUpload = ({ value, onChange, schema }) => {
file.status = 'error';
message.error('上传失败！');
}
onChange((fileList && fileList.length && JSON.stringify(fileList)) || '');
setShowList(JSON.stringify(fileList));
onChange(fileList ?? []);
// setShowList(fileList ?? []);
},
onPreview(file) {
if (_isRecordingOrVideo) {
......@@ -95,7 +96,6 @@ const FileUpload = ({ value, onChange, schema }) => {
setPreviewUrl(file.url);
}
},
previewFile(file) {},
onDownload(file) {
downloadFunc(file.url, file.name, '_self');
},
......@@ -105,11 +105,11 @@ const FileUpload = ({ value, onChange, schema }) => {
setPreviewTitle('');
};
/**
* @description: 返回文件类型限定值
* @params: {Array} typeArray: Video | Recording | File
* @date: 2021/12/2
* @author: ChenLong
*/
* @Description: 返回文件类型限定值
* @Params: {Array} typeArray: Video | Recording | File
* @Date: 2021/12/2
* @Author: ChenLong
* */
const returnFileTypeString = (type) => {
let _obj = {
Video: videoTypeArray,
......@@ -120,82 +120,31 @@ const FileUpload = ({ value, onChange, schema }) => {
return _obj[type].join(',');
};
useEffect(() => {
let fileList = [];
(file || '').split(',').forEach((item, index) => {
if (item && filenameVerification({ name: item }, true).type !== 'error') {
// @Tips: 直接过滤掉名字中有异常字符的文件
let _obj = {
uid: index + '_' + Math.random(),
value: item,
name: item.split('\\').reverse()[0],
type: schema.renderTo === 'Image' ? 'image' : 'file',
status: 'done',
url: `${downloadFileUrl}?filePath=${item}`,
sourcePath: item,
};
if (schema.renderTo === 'Image') _obj.thumbUrl = `${downloadFileUrl}?filePath=${item}`;
fileList.push(_obj);
}
});
// onChange(fileList.length && JSON.stringify(fileList) || '');
setShowList(JSON.stringify(fileList));
}, []);
useEffect(() => {
if (value) {
let fileList = [];
(file || '').split(',').forEach((item, index) => {
if (item && filenameVerification({ name: item }, true).type !== 'error') {
// @Tips: 直接过滤掉名字中有异常字符的文件
let _obj = {
uid: index + '_' + Math.random(),
value: item,
name: item.split('\\').reverse()[0],
type: schema.renderTo === 'Image' ? 'image' : 'file',
status: 'done',
url: `${downloadFileUrl}?filePath=${item}`,
sourcePath: item,
};
if (schema.renderTo === 'Image') _obj.thumbUrl = `${downloadFileUrl}?filePath=${item}`;
fileList.push(_obj);
}
});
// onChange(fileList.length && JSON.stringify(fileList) || '');
setShowList(JSON.stringify(fileList));
if (isArray(value)) {
setShowList(value);
}
}, [value]);
return (
<>
{/** @tips: 裁剪功能无法正常工作，暂不提供 */}
{/* <ImgCrop beforeCrop={(file) => {
let _returnObj = filenameVerification(file);
if (_returnObj.type === 'error') {
message.error(_returnObj.content);
return false;
}
return schema.renderTo === 'Image';
}} rotate locale={'zh-cn'} modalTitle={'编辑图片'} modalOk={'确定'}
modalCancel={'取消'}>*/}
<Upload
disabled={schema.disabled}
{...option}
fileList={showList ? JSON.parse(showList) : []}
fileList={showList ?? []}
multiple
style={{ width: '100%' }}
className={_isRecordingOrVideo ? 'formUploadVideoOrRecording' : 'formUpload'}
showUploadList={{
showPreviewIcon: _isRecordingOrVideo,
showDownloadIcon: true,
downloadIcon: <DownloadOutlined />,
downloadIcon: <DownloadOutlined/>,
}}
accept={returnFileTypeString(schema.renderTo)}
>
{!_isRecordingOrVideo ? (
<Button disabled={schema.disabled} icon={<UploadOutlined />}>
Upload
</Button>
) : (
'+ Upload'
)}
{
!_isRecordingOrVideo ?
<Button disabled={schema.disabled} icon={<UploadOutlined/>}>Upload</Button> : '+ Upload'
}
</Upload>
{/* </ImgCrop>*/}
<Modal
......@@ -206,13 +155,16 @@ const FileUpload = ({ value, onChange, schema }) => {
footer={null}
onCancel={handleCancel}
>
{_isVideo ? (
<video width={'100%'} height={'100%'} controls autoPlay src={previewUrl} />
) : (
''
)}
{_isAudio ? <audio controls autoPlay src={previewUrl} /> : ''}
{_isImage ? <img width={'100%'} height={'100%'} src={previewUrl} alt="缩略图" /> : ''}
{
_isVideo ?
<video width={'100%'} height={'100%'} controls autoPlay src={previewUrl}/> : ''
}
{
_isAudio ? <audio controls autoPlay src={previewUrl}/> : ''
}
{
_isImage ? <img width={'100%'} height={'100%'} src={previewUrl} alt="缩略图"/> : ''
}
</Modal>
</>
);
......
packages/base-components/BasicReport/src/ReportsManage/ReportWithChart/ChartComponent/index.js 0 → 100644
View file @ d84fc0f8
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 @ d84fc0f8
.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 @ d84fc0f8
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 @ d84fc0f8
.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 @ d84fc0f8
/**
* 原版报表功能，支持报表展示；
* 当前功能，配置了图表，则暂时报表+图表；否则只展示报表
* @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 @ d84fc0f8
......@@ -102,7 +102,6 @@ const ReportsDataSourceSetting = () => {
setSubmitLoading(false);
})
.catch((err) => {
console.log(err);
setSubmitLoading(false);
});
},
......
packages/base-components/BasicReport/src/ReportsManage/utils/handleOption.js 0 → 100644
View file @ d84fc0f8
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 @ d84fc0f8
......@@ -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 0 → 100644
View file @ d84fc0f8
// 方案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 @ d84fc0f8
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
View file @ d84fc0f8
......@@ -9,7 +9,8 @@ import * as constants from '../constants';
const BASEURL = '/PandaWater/CityWater/ReportManager';
export const API = {
GET_REPORT_INFO: `${BASEURL}/GetReportInfo`, // 获取报表信息
// GET_REPORT_INFO: `${BASEURL}/GetReportInfo`, // 获取报表信息
GET_REPORT_INFO: `${BASEURL}/GetReportData`, // 获取报表信息
GET_REPORT_FILTER_VALUE: `${BASEURL}/GetReportFilterValue`, // 获取过滤字段的值的枚举
GET_REPORT_FILTER_VALUES: `${BASEURL}/GetReportFilterValues`, // 获取过滤字段的值的枚举
GET_REPORT_CONFIG_LIST: `${BASEURL}/GetReportConfigList`, // 获取配置列表
......@@ -21,16 +22,20 @@ export const API = {
ADD_REPORT_DETAIL_INFO: `${BASEURL}/AddReportDetailInfo`, // 附加子表字段到主表
DELETE_REPORT_INFO: `${BASEURL}/DeleteReportInfo`, // 删除报表
DELETE_REPORT_DETAIL_INFO: `${BASEURL}/DeleteReportDetailInfo`, // 删除字段
EXPORT_ACCOUNT_DATA: `${BASEURL}/ExportAccountData`, // 导出数据
REPORT_FILES_DOWNLOAD: `${BASEURL}/ReportFilesDownload`, // 导出选中数据
SAVE_REPORT_LIST_SORT_FIELDS: `${BASEURL}/SaveReportListSortFields`, // 保存排序
// EXPORT_ACCOUNT_DATA: `${BASEURL}/ExportAccountData`, // 导出数据
EXPORT_ACCOUNT_DATA: `${BASEURL}/ExportReportData`, // 导出数据
// REPORT_FILES_DOWNLOAD: `${BASEURL}/ReportFilesDownload`, // 导出选中数据
REPORT_FILES_DOWNLOAD: `${BASEURL}/DownloadReportFiles`, // 导出选中数据
SAVE_REPORT_LIST_SORT_FIELDS: `${BASEURL}/SaveReportSortFields`, // 保存排序
GET_REPORT_SORT_FIELDS:`${BASEURL}/GetReportSortFields`,
ADD_REPORT_DETAIL_INFO_INDEX: `${BASEURL}/AddReportDetailInfoIndex`, // 变更接口顺序
UPDATE_REPORT_DATA: `${BASEURL}/UpdateReportData`, // 更新报表数据
GET_REPORT_DETAILS: `${BASEURL}/GetReportDetails`, // 获取报表配置
DEL_REPORT_DATA: `${BASEURL}/DelReportData`, // 删除报表数据
SET_REPORT_ALLOW: `${BASEURL}/SetReportAllow`, // 设置关注
ADD_REPORT_DATA: `${BASEURL}/AddReportData`, // 添加报表数据
EXPORT_JPG: `${BASEURL}/ExportJPGAccountData`,
// EXPORT_JPG: `${BASEURL}/ExportJPGAccountData`,
EXPORT_JPG: `${BASEURL}/ExportReportDataWithJPG`,
EXPORT_REPORT_CONFIG: `${BASEURL}/ExportReportConfig`,
IMPORT_REPORT_CONFIG: `${BASEURL}/ImportReportConfig`,
// 多数据源
......@@ -40,6 +45,11 @@ export const API = {
GET_DB_SOURCES: `${BASEURL}/GetDBSources`, // 获取数据库
TEST_CONNECTION: `${BASEURL}/TestConnection`, // 测试链接
DEL_REPORT_CHILD: `${BASEURL}/DelReportChlid`, // 删除挂接关系
// 图表配置开发
SAVE_CHART_CONFIG: `${BASEURL}/SaveChartConfig`, // 保存图表配置
GET_CHART_CONFIG: `${BASEURL}/GetChartConfig`, // 获取图表配置
// 图表部分接口
GET_CHART_CONFIG_DATA_BY_COLUMN: `${BASEURL}/GetChartConfigDataByColumn`, //获取图表数据
};
const reportService = {
getReportInfo: {
......@@ -102,6 +112,11 @@ const reportService = {
method: constants.REQUEST_METHOD_GET,
type: constants.REQUEST_METHOD_GET,
},
getReportSortFields:{
url: API.GET_REPORT_SORT_FIELDS,
method: constants.REQUEST_METHOD_GET,
type: constants.REQUEST_METHOD_GET,
},
saveReportListSortFields: {
url: API.SAVE_REPORT_LIST_SORT_FIELDS,
method: constants.REQUEST_METHOD_POST,
......@@ -182,14 +197,28 @@ const reportService = {
method: constants.REQUEST_METHOD_GET,
type: constants.REQUEST_METHOD_GET,
},
saveChartConfig: {
url: API.SAVE_CHART_CONFIG,
method: constants.REQUEST_METHOD_POST,
type: constants.REQUEST_METHOD_POST,
},
getChartConfigDataByColumn: {
url: API.GET_CHART_CONFIG_DATA_BY_COLUMN,
method: constants.REQUEST_METHOD_POST,
type: constants.REQUEST_METHOD_POST,
},
getChartConfig: {
url: API.GET_CHART_CONFIG,
method: constants.REQUEST_METHOD_GET,
type: constants.REQUEST_METHOD_GET,
},
};
export const submitReportData = (params, data) =>
request({
export const submitReportData = (params, data) => request({
url: API.UPDATE_REPORT_DATA,
method: 'post',
params,
data,
});
});
export const exportAccountData = (options, params, data) =>
request({
url: API.EXPORT_ACCOUNT_DATA,
......@@ -214,12 +243,11 @@ export const exportJPG = (options, data) => {
data,
});
};
export const addReportDetailInfoIndex = (data) =>
request({
export const addReportDetailInfoIndex = (data) => request({
url: API.ADD_REPORT_DETAIL_INFO_INDEX,
method: 'post',
data,
});
});
export const importReportConfig = (options, params, data) =>
request({
url: API.IMPORT_REPORT_CONFIG,
......
packages/base-components/BasicReport/src/demos/Basic.tsx
View file @ d84fc0f8
......@@ -8,7 +8,7 @@ const Demo = () => {
<div style={{ height: '600px' }}>
<BasicReport
params={{
reportName: '订单合同',
reportName: '分公司签单',
}}
/>
</div>
......
packages/extend-components/EC_AlarmCurve/CHANGELOG.md
View file @ d84fc0f8
......@@ -2,6 +2,12 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.2.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_alarmcurve@1.1.0...@wisdom-components/ec_alarmcurve@1.2.0) (2023-12-28)
### Features
- 组态分组增加消息通信 ([cf66b90](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/cf66b908d34b46046f88e793177581af1be38339))
# 1.1.0 (2023-12-19)
### Bug Fixes
......
packages/extend-components/EC_AlarmCurve/package.json
View file @ d84fc0f8
{
"name": "@wisdom-components/ec_alarmcurve",
"version": "1.1.0",
"version": "1.2.0",
"description": "> TODO: description",
"author": "lijiwen <961370825@qq.com>",
"homepage": "",
......
packages/extend-components/EC_AlarmCurve/src/demos/Basic.tsx
View file @ d84fc0f8
......@@ -4,6 +4,15 @@ import { Button } from 'antd';
const Demos = () => {
const [open, setOpen] = useState(false);
const [sensors, setSensors] = useState('出水瞬时流量');
const onOk = () => {
setOpen(false);
};
const onCancel = () => {
setOpen(false);
};
return (
<>
......@@ -14,7 +23,21 @@ const Demos = () => {
>
打开限制曲线
</Button>
<LimitCurve open={open} />
<Button
onClick={() => {
setSensors('噪声');
}}
>
改变sensors
</Button>
<LimitCurve
open={open}
onOk={onOk}
onCancel={onCancel}
deviceCode={'EGBF00000120'}
deviceType={'二供泵房'}
sensors={sensors}
/>
</>
);
};
......
packages/extend-components/EC_AlarmCurve/src/limitCurve/index.js
View file @ d84fc0f8
import React, { useContext, useEffect, useRef, useState } from 'react';
import { ConfigProvider, Modal, Radio, Slider, InputNumber } from 'antd';
import { ConfigProvider, Modal, Radio, Slider, InputNumber, Input, Button } from 'antd';
import classNames from 'classnames';
import moment from 'moment';
import { BasicChart } from '@wisdom-components/basicchart';
import { getHistoryInfo } from '../apis';
import { std } from 'mathjs';
import skmeans from 'skmeans';
import LoadBox from '@wisdom-components/loadbox';
import { outlierArr, timeArr, chartArr, average } from './utils';
import './index.less';
const LimitCurve = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('limit-curve');
const { width, deviceCode, sensors, deviceType, getContainer, title } = props;
const [spinning,setSpinning] = useState(true);
const [open, setOpen] = useState(false);
const [cluster, setCluster] = useState('K-means'); // 聚集算法
const [timeType, setTimeType] = useState('近7天'); // 时间
const [outlier, setOutlier] = useState(3); // 过滤异常
const [curve, setCurve] = useState('特征曲线'); // 曲线类型
const [sensitive, setSensitive] = useState(10); // 敏感度
......@@ -32,22 +35,23 @@ const LimitCurve = (props) => {
// 取消
const onCancel = () => {
setOpen(false);
props.onCancel && props.onCancel();
};
// 获取历史数据
const getSensorsData = async () => {
setSpinning(true);
const params = {
isDilute: true,
zoom: '',
unit: '',
dateFrom: moment().subtract(8, 'day').format('YYYY-MM-DD 00:00:00'),
dateTo: moment().subtract(1, 'day').format('YYYY-MM-DD 23:59:59'),
acrossTables: [
{ deviceCode: 'EGBF00000120', sensors: '出水瞬时流量', deviceType: '二供泵房' },
],
acrossTables: [{ deviceCode: deviceCode, sensors: sensors, deviceType: deviceType }],
isBoxPlots: true,
};
const results = await getHistoryInfo(params);
setSpinning(false);
const historyData = results?.data?.[0] || {};
setSensorData(() => {
......@@ -80,6 +84,7 @@ const LimitCurve = (props) => {
const _centroids = centroids.sort((a, b) => {
return a[0] - b[0];
});
console.log(_centroids);
const option = {
xAxis: {
type: 'time',
......@@ -108,17 +113,23 @@ const LimitCurve = (props) => {
},
series: [
{
type: 'scatter',
name: sensors,
sampling: 'average',
large: true,
symbolSize: 5,
data: _chartData.map((item) => {
return [new Date(item.time).getTime(), item.pv];
}),
type: 'scatter',
},
{
data: centroids.map((item) => {
type: 'line',
name: sensors,
sampling: 'average',
large: true,
data: _centroids.map((item) => {
return [Math.floor(item[0]), item[1]];
}),
type: 'line',
},
],
};
......@@ -126,8 +137,9 @@ const LimitCurve = (props) => {
};
useEffect(() => {
getSensorsData();
}, []);
open && getSensorsData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
useEffect(() => {
const { dataModel = [] } = sensorData;
......@@ -155,7 +167,6 @@ const LimitCurve = (props) => {
const dataArr = [];
const pvArr = data.map((item) => {
return item.pv;
// clusteredArr.push([new Date(item.time).getTime(),item.pv])
});
const stdVal = pvArr.length ? std(pvArr) : 0;
const medianVal = pvArr.length ? average(pvArr) : 0;
......@@ -173,68 +184,12 @@ const LimitCurve = (props) => {
_clustered.push(...centroids);
}
renderChart(_chartData, _clustered);
}, [sensorData, cluster, outlier]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sensorData, timeType, outlier]);
useEffect(() => {
console.log(chartData);
const _chartData = chartDataHandle(chartData);
const clusteredData = _chartData.map((item) => {
return [new Date(item.time).getTime(), item.pv];
});
const clustered = clusteredData.length ? skmeans(clusteredData, 24) : {};
console.log(clustered);
const { centroids = [] } = clustered;
const _centroids = centroids.sort((a, b) => {
return a[0] - b[0];
});
const option = {
xAxis: {
type: 'time',
// axisTick: {
// alignWithLabel: true,
// },
// boundaryGap: false,
// splitLine: {
// show: true,
// lineStyle: {
// type: 'dashed',
// },
// },
},
yAxis: {
type: 'value',
name: 'm',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
},
axisLabel: {
formatter: '{value}',
},
},
series: [
{
symbolSize: 5,
data: _chartData.map((item) => {
return [new Date(item.time).getTime(), item.pv];
}),
type: 'scatter',
},
{
data: _centroids.map((item) => {
return [new Date(Math.floor(item[0])).getTime(), item[1]];
}),
type: 'line',
},
],
};
setOptions(option);
}, [chartData]);
useEffect(()=>{
setOpen(props.open);
},[props.open])
}, [props.open]);
return (
<>
......@@ -249,18 +204,30 @@ const LimitCurve = (props) => {
onCancel={onCancel}
wrapClassName={classNames(`${prefixCls}`)}
getContainer={getContainer || document.body}
destroyOnClose={true}
>
<div className={classNames(`${prefixCls}-box`)}>
<div className={classNames(`${prefixCls}-header`)}>
<div className={classNames(`${prefixCls}-header-list`)}>
<span className={classNames(`${prefixCls}-header-item`)}>
聚类算法：
曲线选择：
<Radio.Group
options={chartArr}
optionType={'button'}
value={curve}
onChange={(e) => {
setCurve(e.target.value);
}}
/>
</span>
<span className={classNames(`${prefixCls}-header-item`)}>
取值方式：
<Radio.Group
options={clusterArr}
options={timeArr}
optionType={'button'}
value={cluster}
value={timeType}
onChange={(e) => {
setCluster(e.target.value);
setTimeType(e.target.value);
}}
/>
</span>
......@@ -276,7 +243,7 @@ const LimitCurve = (props) => {
/>
</span>
<span className={classNames(`${prefixCls}-header-item`)}>
敏感度：
浮动范围：
<Slider
min={0}
max={100}
......@@ -303,15 +270,46 @@ const LimitCurve = (props) => {
</div>
<div className={classNames(`${prefixCls}-header-list`)}>
<span className={classNames(`${prefixCls}-header-item`)}>
曲线选择：
<Radio.Group
options={chartArr}
optionType={'button'}
value={curve}
onChange={(e) => {
setCurve(e.target.value);
取值限制：
<div className={classNames(`${prefixCls}-header-value`)}>
<Input
style={{
width: '150px',
}}
addonBefore="低低限"
disabled
/>
</div>
<div className={classNames(`${prefixCls}-header-value`)}>
<Input
style={{
width: '150px',
}}
addonBefore="低限"
disabled
/>
</div>
<div className={classNames(`${prefixCls}-header-value`)}>
<Input
style={{
width: '150px',
}}
addonBefore="高限"
disabled
/>
</div>
<div className={classNames(`${prefixCls}-header-value`)}>
<Input
style={{
width: '150px',
}}
addonBefore="高高限"
disabled
/>
</div>
</span>
<span className={classNames(`${prefixCls}-header-item`)}>
<Button type="primary">确定</Button>
</span>
</div>
</div>
......@@ -323,48 +321,11 @@ const LimitCurve = (props) => {
style={{ width: '100%', height: '100%' }}
/>
</div>
{spinning && <div className={classNames(`${prefixCls}-load`)}><LoadBox spinning={spinning}/></div>}
</div>
</Modal>
</>
);
};
const outlierArr = [
{
label: '低',
value: 3,
},
{
label: '中',
value: 2,
},
{
label: '高',
value: 1,
},
];
const clusterArr = [
{
label: 'K-means',
value: 'K-means',
},
];
const chartArr = [
{
label: '特征曲线',
value: '特征曲线',
},
{
label: '原始曲线',
value: '原始曲线',
},
];
// 平均值方法
const average = (arr) => {
return arr.reduce((acc, cur) => acc + cur, 0) / arr.length;
};
export default LimitCurve;
packages/extend-components/EC_AlarmCurve/src/limitCurve/index.less
View file @ d84fc0f8
......@@ -12,6 +12,7 @@
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
&-header {
......@@ -33,10 +34,31 @@
align-items: center;
justify-content: center;
}
&-value {
margin-right: 10px;
.@{ant-prefix}-input[disabled] {
background-color: #ffffff;
}
}
}
&-content {
flex: 1;
overflow: hidden;
}
&-load {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.9);
z-index: 100;
}
}
\ No newline at end of file
packages/extend-components/EC_AlarmCurve/src/limitCurve/utils.js
View file @ d84fc0f8
export const variance = (numbers) => {
let mean = 0;
let sum = 0;
for (const i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
mean = sum / numbers.length;
sum = 0;
for (const i = 0; i < numbers.length; i++) {
sum += Math.pow(numbers[i] - mean, 2);
}
return sum / numbers.length;
export const outlierArr = [
{
label: '低',
value: 3,
},
{
label: '中',
value: 2,
},
{
label: '高',
value: 1,
},
];
export const timeArr = [
{
label: '近7天',
value: '近7天',
},
{
label: '7工作日',
value: '7工作日',
},
{
label: '7节假日',
value: '7节假日',
},
];
export const chartArr = [
{
label: '特征曲线',
value: '特征曲线',
},
{
label: '原始曲线',
value: '原始曲线',
},
];
// 平均值方法
export const average = (arr) => {
return arr.reduce((acc, cur) => acc + cur, 0) / arr.length;
};
\ No newline at end of file
packages/extend-components/EC_ConfigurationView/CHANGELOG.md
View file @ d84fc0f8
......@@ -2,6 +2,12 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.6.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_configurationview@1.5.31...@wisdom-components/ec_configurationview@1.6.0) (2023-12-28)
### Features
- 组态分组增加消息通信 ([cf66b90](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/cf66b908d34b46046f88e793177581af1be38339))
## [1.5.31](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_configurationview@1.5.30...@wisdom-components/ec_configurationview@1.5.31) (2023-12-13)
### Bug Fixes
......
packages/extend-components/EC_ConfigurationView/package.json
View file @ d84fc0f8
{
"name": "@wisdom-components/ec_configurationview",
"version": "1.5.31",
"version": "1.6.0",
"description": "> TODO: description",
"author": "tuqian <webtuqian@163.com>",
"homepage": "",
......
packages/extend-components/EC_ConfigurationView/src/EC_ConfigurationView.md
View file @ d84fc0f8
......@@ -35,6 +35,7 @@ group:
| config | 全局 globalConfig,没有时需要传递 | object | {} |
| isZoom | 是否可缩放(手持上建议设置 true) | boolean | false |
| flowShow | 是否水流效果（无数据表现） | boolean | true |
| messaged | 传递信息给组态 | object | {} |
| customBack | 自定义交互的回调，返回点击的模型 | function(node){} | - |
### 工艺回放
......
packages/extend-components/EC_ConfigurationView/src/HistoryModel.js
View file @ d84fc0f8
......@@ -313,6 +313,12 @@ const ConfigurationView = (props) => {
myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
}
break;
case 'groupCase': // 分组模型
shRule = ruleOperation(node, realVal);
if (node.shType === '显隐展示') {
myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
}
break;
default:
break;
}
......@@ -1140,12 +1146,13 @@ const ConfigurationView = (props) => {
goJS(
go.Group,
'Auto',
{ ungroupable: true, zOrder: 1 },
{ ungroupable: true, zOrder: 1, visible: true },
{
// 设置其可选择
selectable: false,
layerName: 'Background',
},
new go.Binding('visible', 'visible').makeTwoWay(),
goJS(
go.Shape,
'RoundedRectangle', // surrounds everything
......
packages/extend-components/EC_ConfigurationView/src/RealModel.js
View file @ d84fc0f8
......@@ -80,6 +80,7 @@ const ConfigurationView = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('ec-configuration-view');
const componentPrefix = getPrefixCls('');
const [isDiagram, setIsDiagram] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const [isAuModalVisible, setIsAuModalVisible] = useState(false); // 登录模态框
const [isHIModalVisible, setIsHIModalVisible] = useState(false); // 历史曲线模态框
......@@ -382,6 +383,12 @@ const ConfigurationView = (props) => {
myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
}
break;
case 'groupCase': // 分组模型
shRule = ruleOperation(node, realVal);
if (node.shType === '显隐展示') {
myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
}
break;
default:
break;
}
......@@ -883,6 +890,7 @@ const ConfigurationView = (props) => {
if (myDiagram) {
myDiagram.div = null;
myDiagram = null;
setIsDiagram(null);
}
};
}, [props.name, numerals]);
......@@ -912,6 +920,65 @@ const ConfigurationView = (props) => {
};
}, []);
useEffect(() => {
try {
const { messaged = {} } = props;
if (isDiagram && Object.keys(messaged).length > 0) {
const json = JSON.parse(isDiagram.model.toJson());
const jsonCopy = JSON.parse(JSON.stringify(json));
jsonCopy.nodeDataArray.forEach((item) => {
if (item.category === 'groupCase' && !item.shName) {
const node = isDiagram.model.findNodeDataForKey(item.key);
messagedMethod(node, messaged);
}
});
}
} catch (err) {
// console.log(err);
}
}, [props.messaged, isDiagram]);
// 信息通信
const messagedMethod = (node, messaged) => {
let shRule = [];
try {
switch (node.category) {
case 'groupCase': // 分组模型
shRule = ruleMessaged(node, messaged);
if (node.shType === '显隐展示') {
isDiagram.model.setDataProperty(
node,
'visible',
shRule ? shRule.visible : node.dtVisible,
);
}
break;
default:
break;
}
} catch (e) {
// console.log(e);
}
};
// 信息通信语句解析
const ruleMessaged = (node, messaged) => {
const patt = /[><=]/gi;
const shRule = JSON.parse(node.shRule).find((rule) => {
if (rule.val.toString().match(patt)) {
const ruleStr = 'if(' + rule.val + '){ return true } else { return false }';
try {
return new Function('x', 'X', ruleStr)(messaged, messaged);
} catch (err) {
return false;
}
} else {
return false;
}
});
return shRule;
};
/** ************************************获取画板JSON******************************* */
const getDiagramJson = async (list, siteInfo) => {
const response = await getSketchPadContent({
......@@ -1648,12 +1715,13 @@ const ConfigurationView = (props) => {
goJS(
go.Group,
'Auto',
{ ungroupable: true, zOrder: 1 },
{ ungroupable: true, zOrder: 1, visible: true },
{
// 设置其可选择
selectable: false,
layerName: 'Background',
},
new go.Binding('visible', 'visible').makeTwoWay(),
goJS(
go.Shape,
'RoundedRectangle', // surrounds everything
......@@ -3096,6 +3164,9 @@ const ConfigurationView = (props) => {
if (item.category === 'bgCase') {
myDiagram.defaultScale = item.scaling || item.scaling === 0 ? item.scaling * 1 : 1;
}
if (item.category === 'groupCase') {
item.dtVisible = item?.visible || false;
}
// 兼容V1之前版本（部分展示可支持）
if (chartInfo.version === 'V1') return false;
......@@ -3106,6 +3177,7 @@ const ConfigurationView = (props) => {
});
myDiagram.model = go.Model.fromJson(json);
getDataModel();
setIsDiagram(myDiagram);
};
return (
......@@ -3271,6 +3343,7 @@ ConfigurationView.defaultProps = {
config: {},
isZoom: false,
flowShow: true,
messaged: {},
customBack: () => {},
};
......@@ -3281,6 +3354,7 @@ ConfigurationView.propTypes = {
config: PropTypes.object,
isZoom: PropTypes.bool,
flowShow: PropTypes.bool,
messaged: PropTypes.object,
customBack: PropTypes.func,
};
......
packages/extend-components/EC_ConfigurationView/src/demos/Basic.tsx
View file @ d84fc0f8
......@@ -3,10 +3,11 @@ import { Button } from 'antd';
import PandaConfiguration from '../index';
// import PandaConfigurationView from '../../es/index';
const Demo = () => {
const [name, setName] = useState('宿场加压站2');
const [devices, setDevices] = useState(
'JYJZ00000001,JYBZ00000001',
);
const [name, setName] = useState('cs0320');
const [devices, setDevices] = useState('EQZT00000008');
const [messaged, setMessaged] = useState({
age: '运行监控1',
});
return (
<>
<div style={{ width: '100%', height: '600px', background: '#242835' }}>
......@@ -21,16 +22,20 @@ const Demo = () => {
// devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')}
config={globalConfig}
deviceName={['工艺流程1', '工艺流程2', '工艺流程3']}
messaged={messaged}
// isZoom={true}
// flowShow={false}
/>
</div>
<Button
onClick={() => {
setName('崇左丽江水厂原水泵房');
setDevices(
'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003',
);
// setName('崇左丽江水厂原水泵房');
// setDevices(
// 'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003',
// );
setMessaged({
age: '运行监控',
});
}}
style={{ margin: '10px' }}
>
......@@ -44,18 +49,18 @@ export default Demo;
const globalConfig = {
token: 'a1372ef0ce7b4e4884d31cfd99fe92f6',
mqtt_iotIP: '36.140.140.170:8200',
mqtt_path: '/ws/',
mqtt_IsSSL: false,
mqtt_site_code: 'site_ds5418ua',
mqtt_iotIP: 'emqttd10.panda-water.cn:443',
mqtt_path: '/mqtt',
mqtt_IsSSL: true,
mqtt_site_code: 'site_dc8302ni',
mqtt_mess: {
MessageLevel: '1.0',
TcpIP: '36.140.140.170',
TcpPort: 8200,
site_code: 'site_ds5418ua',
TcpIP: 'emqttd10.panda-water.cn',
TcpPort: 443,
site_code: 'site_dc8302ni',
},
userInfo: {
LocalSite: 'site_ds5418ua',
LocalSite: 'site_dc8302ni',
site: '',
},
};
packages/extend-components/EC_HistoryView/CHANGELOG.md
View file @ d84fc0f8
......@@ -2,6 +2,18 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.53.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_historyview@1.52.0...@wisdom-components/ec_historyview@1.53.0) (2023-12-25)
### Features
- 表格去除左侧固定 ([60479c1](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/60479c1a2578958e7ac782e878bca0bb34116858))
# [1.52.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_historyview@1.51.3...@wisdom-components/ec_historyview@1.52.0) (2023-12-25)
### Features
- 优化历史曲线名称显示 ([f2d7770](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/f2d77709898c4200f6a03b4526a632f081ade892))
## [1.51.3](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_historyview@1.51.2...@wisdom-components/ec_historyview@1.51.3) (2023-12-13)
### Bug Fixes
......
packages/extend-components/EC_HistoryView/package.json
View file @ d84fc0f8
{
"name": "@wisdom-components/ec_historyview",
"version": "1.51.3",
"version": "1.53.0",
"description": "> TODO: description",
"author": "cuijiahao <15927252954@163.com>",
"homepage": "",
......
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ d84fc0f8
......@@ -22,7 +22,7 @@ path: /
## 单图表
[//]: # (<code src="./demos/index.js"></code>)
<code src="./demos/index.js"></code>
## 单图表-状态
......@@ -30,7 +30,7 @@ path: /
## 单图表-频率
<code src="./demos/indexForFrequency.js"></code>
[//]: # (<code src="./demos/indexForFrequency.js"></code>)
[//]: # '## 移动端'
[//]: # '<code src="./demos/mobile.js"></code>'
......
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ d84fc0f8
......@@ -166,10 +166,16 @@ const deviceParams = [
"sensors": "IC",
"deviceType": "水源井"
}*/
{
/* {
"deviceCode": "JYJZ00000002",
"sensors": "频率,泵1状态",
"deviceType": "加压机组"
}*/
/*铁山*/
{
"deviceCode": "SZ00000001",
"deviceType": "水质",
"sensors": "PH,浑浊度,氨氮,总氮,总磷,溶解氧,水温,电导率,叶绿素a,藻密度,高锰酸盐指数"
}
];
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ d84fc0f8
......@@ -268,7 +268,6 @@ const timeColumn = {
dataIndex: 'time',
key: 'time',
width: 170,
fixed: 'left',
ellipsis: true,
align: 'center',
sorter: true,
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ d84fc0f8
......@@ -65,11 +65,13 @@ const currentOption = isMobile() ? MOBILE_OPTION : PC_OPTION;
* @param {any} data
* @param {boolean} contrast 是否为同期对比
* @param {any} contrastOption 同期对比周期配置, day|month
* @param nameWithSensor
* @param {boolean} isSingle 是否是单设备，单设备的名称不带设备名
* @returns
*/
const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
const nameFormatter = (data, contrast, contrastOption, nameWithSensor, isSingle) => {
const {equipmentName, sensorName, unit, dataModel, dateFrom, dateTo} = data;
let name = nameWithSensor ? `${equipmentName}-${sensorName}` : equipmentName;
let name = nameWithSensor ? (isSingle?`${sensorName}`:`${equipmentName}-${sensorName}`) : equipmentName;
if (contrast) {
const time = dateFrom.slice(0, contrastOption === 'day' ? 10 : 7).replace(/-/g, '');
name = `${name}-${time}`;
......@@ -515,6 +517,11 @@ const returnXAxis = ({
_filterArr.push(special.special1.name);
}
// 生成series
// 单设备情况下，不显示设备名称
let deviceNumber = dataSource?.reduce((final, cur) => {
if (!final.includes(cur.stationCode)) final.push(cur.stationCode);
return final
}, [])?.length;
let series = dataSource
.filter((item) => {
if (item.sensorName === '是否在线') {
......@@ -524,7 +531,7 @@ const returnXAxis = ({
})
.map((item, index) => {
const {sensorName, unit} = item;
const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
const name = nameFormatter(item, contrast, contrastOption, nameWithSensor, deviceNumber === 1);
const data = dataAccessor(item, contrast, contrastOption);
const type = 'line';
const areaStyle = areaStyleFormatter(item);
......
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