fastlion-amis
Version:
一种MIS页面生成工具
298 lines (297 loc) • 18.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.pieGroup = exports.lineGroup = exports.ICONTYPELIST = void 0;
var tslib_1 = require("tslib");
var antd_1 = require("antd");
var react_1 = tslib_1.__importStar(require("react"));
var helper_1 = require("../../../utils/helper");
var commonSelect_1 = require("../commonSelect");
var icons_1 = require("../../../components/icons");
var components_1 = require("../../../components");
var DragModal_1 = (0, tslib_1.__importDefault)(require("../../../components/DragModal"));
var chartTools_1 = require("./chartTools");
var lodash_1 = require("lodash");
var commonTableFunction_1 = require("../../../store/utils/commonTableFunction");
exports.ICONTYPELIST = [
{ icon: '#icon-toolcolumn', title: '柱状图', value: 'bar' },
{ icon: '#icon-toolArea', title: '面积图', value: 'area' },
{ icon: '#icon-toolline', title: '折线图', value: 'line' },
{ icon: '#icon-toolBar', title: '条状图', value: 'bar-vertical' },
{ icon: '#icon-toolFix', title: '柱线结合图', value: 'line-bar' },
{ icon: '#icon-toolpie', title: '饼图', value: 'pie' },
{ icon: '#icon-toolring', title: '环形图', value: 'ring' },
{ icon: '#icon-toolFunnel', title: '漏斗图', value: 'funnel' },
{ icon: '#icon-toolSatter', title: '散点图', value: 'scatter' },
{ icon: '#icon-toolBobble', title: '气泡图', value: 'scatter-size' },
// { icon: 'icon-zhexiantu', title: '雷达图', value: 'radar' },
// { icon: 'icon-zhexiantu', title: '词云图', value: 'wordCloud' },
];
//图形分组，交互一致的一组
exports.lineGroup = ['line', 'bar', 'area', 'bar-vertical', 'line-bar'];
exports.pieGroup = ['pie', 'ring', 'funnel'];
var DataCharts = function (props) {
var action = props.action, columns = props.columns, data = props.data, handleDealData = props.handleDealData, primaryField = props.primaryField, crudTitle = props.crudTitle, name = props.name, loadDataOnce = props.loadDataOnce, getAllData = props.getAllData, staticRecords = props.staticRecords;
var _a = (0, react_1.useState)(false), visible = _a[0], setVisible = _a[1];
var _b = (0, react_1.useState)(''), selectedXAxisData = _b[0], setSelectedXAxisData = _b[1];
var _c = (0, react_1.useState)([]), selectedYAxisData = _c[0], setSelectedYAxisData = _c[1];
var _d = (0, react_1.useState)([]), xAxisData = _d[0], setXAxisData = _d[1];
var _e = (0, react_1.useState)([]), yAxisData = _e[0], setYAxisData = _e[1];
var _f = (0, react_1.useState)('present'), dataArea = _f[0], setDataArea = _f[1];
var _g = (0, react_1.useState)('line'), chartType = _g[0], setChartType = _g[1];
var _h = (0, react_1.useState)([]), barValue = _h[0], setBarValue = _h[1];
var _j = (0, react_1.useState)([]), lineValue = _j[0], setLineValue = _j[1];
var _k = (0, react_1.useState)(false), loading = _k[0], setLoading = _k[1];
// 初始化获取横纵可选项
(0, react_1.useEffect)(function () {
initXAndYList();
}, [columns]);
// useEffect(() => {
// if(visible) {
// handleDefaultValue()
// } else {
// init()
// }
// }, [visible])
var onChartTypeChange = function (type) {
//不是同组内切换就清空XY轴
if (!(exports.lineGroup.includes(type) && exports.lineGroup.includes(chartType) || exports.pieGroup.includes(type) && exports.pieGroup.includes(chartType))) {
setSelectedYAxisData([]);
setSelectedXAxisData('');
setXAxisData(xAxisData.map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { disabled: false })); }));
setYAxisData(yAxisData.map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { disabled: false })); }));
}
setChartType(type);
//只有柱线结合图有这个
if (lineValue.length || barValue.length) {
setLineValue([]);
setBarValue([]);
}
//柱线图内切换到柱线结合时，初始化柱和线的图形
if (exports.lineGroup.includes(chartType) && type === 'line-bar' && (selectedYAxisData === null || selectedYAxisData === void 0 ? void 0 : selectedYAxisData.length)) {
setBarValue((0, tslib_1.__spreadArray)([], selectedYAxisData, true));
}
};
var initXAndYList = function () {
//10,11,14,15,字符串，数字，多行文本，富文本
// let dataTypeArr = ['plain', 'text', 'static-text', 'input-text', 'number', 'static-number', 'input-number', 'textarea', 'html', 'static-html', 'input-rich-text'];
var xAxisData = [];
var yAxisData = [];
columns.forEach(function (col) {
var obj = {
title: (0, commonTableFunction_1.getColumnShowLabel)(col),
value: col.name || ''
};
if (['number', 'statc-number', 'input-number'].includes(col.type)) {
yAxisData.push(obj);
}
xAxisData.push(obj);
});
setXAxisData(xAxisData);
setYAxisData(yAxisData);
};
var handleAction = function () {
setVisible(true);
};
var handleOk = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var param, isRepeat, calcData, res, chartName, shcema;
var _a;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
param = {
dataArea: dataArea,
chartType: chartType,
selectedXAxisData: selectedXAxisData,
selectedYAxisData: selectedYAxisData
};
if (!param.dataArea) {
return [2 /*return*/, antd_1.message.info({
content: '请选择范围'
})];
}
if (param.dataArea === 'some' && (!data.selectedItems || !data.selectedItems.length)) {
return [2 /*return*/, antd_1.message.info({
content: '选中数据为空'
})];
}
if (param.dataArea === 'present' && (!data.items || !data.items.length)) {
return [2 /*return*/, antd_1.message.info({
content: '当前页数据为空'
})];
}
if (!param.chartType) {
return [2 /*return*/, antd_1.message.info({
content: '图形类型不能为空'
})];
}
else if (!param.selectedXAxisData || (Array.isArray(param.selectedXAxisData) && param.selectedXAxisData.length === 0)) {
return [2 /*return*/, antd_1.message.info({
content: '横坐标不能为空'
})];
}
else if (!param.selectedYAxisData.length && chartType !== 'scatter') {
return [2 /*return*/, antd_1.message.info({
content: '纵坐标不能为空'
})];
}
if (Array.isArray(param.selectedXAxisData) && chartType !== 'scatter-size') {
isRepeat = param.selectedXAxisData.some(function (item) { return param.selectedYAxisData.includes(item); });
if (isRepeat)
return [2 /*return*/, antd_1.message.info({
content: '横坐标不能和纵坐标相同'
})];
}
if (typeof param.selectedXAxisData === 'string' && param.selectedYAxisData.includes(param.selectedXAxisData)) {
return [2 /*return*/, antd_1.message.info({
content: '横坐标不能和纵坐标相同'
})];
}
calcData = param.dataArea === 'all' ? (loadDataOnce ? data.itemRaws : [])
: (param.dataArea === 'some' ? data.selectedItems : data.items);
if (!(param.dataArea === 'all')) return [3 /*break*/, 2];
if (loadDataOnce && (!data.itemRaws || !data.itemRaws.length)) {
return [2 /*return*/, antd_1.message.warn({
content: '当前数据为空'
})];
}
if (!!loadDataOnce) return [3 /*break*/, 2];
setLoading(true);
return [4 /*yield*/, getAllData()];
case 1:
res = _b.sent();
setLoading(false);
if (!res || !res.items || !res.items.length) {
return [2 /*return*/, antd_1.message.warn({
content: '当前数据为空'
})];
}
calcData = res.items;
_b.label = 2;
case 2:
chartName = (_a = exports.ICONTYPELIST.find(function (item) { return item.value === chartType; })) === null || _a === void 0 ? void 0 : _a.title;
shcema = (0, chartTools_1.getChartSchema)({
type: param.chartType,
selectedXAxisData: param.selectedXAxisData,
selectedYAxisData: param.selectedYAxisData,
data: calcData,
columns: columns,
primaryField: primaryField !== null && primaryField !== void 0 ? primaryField : '',
barValue: barValue,
chartTitle: crudTitle + '-' + chartName,
tableName: name
});
handleDealData('data-chart', '图表', shcema, {
selectedXAxisData: selectedXAxisData,
selectedYAxisData: selectedYAxisData,
xAxisData: xAxisData,
yAxisData: yAxisData,
dataArea: dataArea,
chartType: chartType,
barValue: barValue,
lineValue: lineValue
}, chartName);
setVisible(false);
staticRecords(143);
return [2 /*return*/];
}
});
}); };
var handleDefaultValue = function () {
var defaultValueStr = localStorage.getItem('chart-' + name);
if (!(0, lodash_1.isNil)(defaultValueStr)) {
var defaultValues = JSON.parse(defaultValueStr);
setChartType(defaultValues.chartType);
setSelectedXAxisData(defaultValues.selectedXAxisData);
setSelectedYAxisData(defaultValues.selectedYAxisData);
setDataArea(defaultValues.dataArea);
setBarValue(barValue);
setLineValue(lineValue);
}
else {
init();
}
};
var setDefault = function () {
var param = { chartType: chartType, selectedXAxisData: selectedXAxisData, selectedYAxisData: selectedYAxisData, dataArea: dataArea, barValue: barValue, lineValue: lineValue };
localStorage.setItem('chart-' + name, JSON.stringify(param));
antd_1.message.success('设置成功！');
};
var onReset = function () {
if (localStorage.getItem('chart-' + name)) {
handleDefaultValue();
}
else {
init();
}
};
var init = function () {
setChartType('');
setSelectedXAxisData('');
setSelectedYAxisData([]);
setLineValue([]);
setBarValue([]);
setDataArea('present');
};
var renderButton = function () {
var _a;
return react_1.default.createElement(components_1.Button, { onClick: handleAction },
react_1.default.createElement(icons_1.Icon, { icon: (_a = action === null || action === void 0 ? void 0 : action.icon) !== null && _a !== void 0 ? _a : "#icon-tooltool_autowidth", className: "icon", symbol: true }), action === null || action === void 0 ? void 0 :
action.label);
};
var renderBody = function () {
return react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: { display: 'flex' } },
react_1.default.createElement("div", { className: 'chart-type-icon-group' }, exports.ICONTYPELIST.map(function (icon) { return (react_1.default.createElement("div", { className: chartType === icon.value ? 'chart-type-icon-box chart-type-active' : 'chart-type-icon-box', key: icon.value, onClick: function () { return onChartTypeChange(icon.value); } },
react_1.default.createElement(antd_1.Tooltip, { title: icon.title, placement: "top" },
react_1.default.createElement(icons_1.Icon, { icon: icon.icon, fontSize: 40, className: "icon" })))); }))),
react_1.default.createElement("div", { className: "select-wrapper-group-container " + (['scatter'].includes(chartType) ? 'single-mode' : '') },
react_1.default.createElement(commonSelect_1.SelectWrapperGroup, { label: "\u5750\u6807\u8F74\u5B57\u6BB5", type: chartType.includes('scatter') ? 'multiple' : 'single', data: ['scatter', 'scatter-size'].includes(chartType) ? yAxisData : xAxisData, onChange: function (value) {
if (chartType.includes('scatter')) {
if (Array.isArray(value) && value.length > 2) {
antd_1.message.warn('当前图形只能选择两项作为轴字段');
}
else {
setSelectedXAxisData(value);
}
}
else {
setSelectedXAxisData(value[0]);
setYAxisData(yAxisData.map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { disabled: item.value === value[0] })); }));
}
}, defaultValue: Array.isArray(selectedXAxisData) ? selectedXAxisData : [selectedXAxisData], hideToolbar: ['scatter', 'scatter-size'].includes(chartType) }),
chartType !== 'scatter' && react_1.default.createElement(commonSelect_1.SelectWrapperGroup, { label: "\u503C\u5B57\u6BB5", data: yAxisData, defaultValue: selectedYAxisData, isCombine: ['line-bar'].includes(chartType), barValue: barValue, lineValue: lineValue, setBarValue: function (value) { return setBarValue(value); }, setLineValue: function (value) { return setLineValue(value); }, onChange: function (value) {
if (['scatter-size', 'pie', 'ring', 'funnel'].includes(chartType)) {
var selValue_1 = value.pop();
setSelectedYAxisData(selValue_1 ? [selValue_1] : []);
if (['pie', 'ring', 'funnel'].includes(chartType)) {
setXAxisData(xAxisData.map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { disabled: item.value === selValue_1 })); }));
}
}
else {
setSelectedYAxisData(value);
setXAxisData(xAxisData.map(function (item) {
if (value.includes(item.value)) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { disabled: true });
}
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { disabled: false });
}));
}
}, hideToolbar: ['scatter', 'scatter-size', 'pie', 'ring', 'funnel'].includes(chartType) })),
react_1.default.createElement(commonSelect_1.DataArea, { value: dataArea, className: "static-data-area", onChange: function (e) { return setDataArea(e.target.value); } }));
};
var renderFooter = function () {
return react_1.default.createElement("div", { className: "statics-footer" },
react_1.default.createElement("div", null,
react_1.default.createElement(antd_1.Button, { disabled: loading, className: "tools-set-default", onClick: setDefault }, "\u8BBE\u7F6E\u9ED8\u8BA4\u503C"),
react_1.default.createElement(antd_1.Button, { disabled: loading, className: "tools-reset-default", onClick: onReset }, "\u91CD\u7F6E")),
react_1.default.createElement("div", null,
react_1.default.createElement(antd_1.Button, { disabled: loading, onClick: function () { return setVisible(false); } }, "\u53D6\u6D88"),
react_1.default.createElement(antd_1.Button, { disabled: loading, type: "primary", onClick: handleOk }, "\u786E\u8BA4")));
};
return react_1.default.createElement(react_1.default.Fragment, null,
renderButton(),
!(0, helper_1.isMobile)() && visible && react_1.default.createElement(DragModal_1.default, { getContainer: props.container || document.body, zIndex: 1000, dialogVisible: visible, title: '\u56FE\u8868', width: 540, destroyOnClose: true, centered: true, drag: true, footer: renderFooter(), className: 'statics-modal common-modal-component', onCancel: function () { return setVisible(false); } },
react_1.default.createElement(antd_1.Spin, { spinning: loading }, renderBody())));
};
exports.default = DataCharts;
//# sourceMappingURL=./renderers/Table/DataCharts/index.js.map