fastlion-amis
Version:
一种MIS页面生成工具
223 lines (222 loc) • 13.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var DataCharts_1 = require("../DataCharts");
var commonSelect_1 = require("../commonSelect");
var antd_1 = require("antd");
var chartTools_1 = require("../DataCharts/chartTools");
var lodash_1 = require("lodash");
var icons_1 = require("../../../components/icons");
exports.default = (function (props) {
var data = props.data, loadDataOnce = props.loadDataOnce, getAllData = props.getAllData, columns = props.columns, staticRecords = props.staticRecords, primaryField = props.primaryField, initValues = props.initValues, handleChange = props.handleChange, crudTitle = props.crudTitle, calcNum = props.calcNum, defaultNum = props.defaultNum, resetNum = props.resetNum, name = props.name, setLoading = props.setLoading;
var _a = (0, react_1.useState)(initValues.selectedXAxisData), selectedXAxisData = _a[0], setSelectedXAxisData = _a[1];
var _b = (0, react_1.useState)(initValues.selectedYAxisData), selectedYAxisData = _b[0], setSelectedYAxisData = _b[1];
var _c = (0, react_1.useState)(initValues.xAxisData), xAxisData = _c[0], setXAxisData = _c[1];
var _d = (0, react_1.useState)(initValues.yAxisData), yAxisData = _d[0], setYAxisData = _d[1];
var _e = (0, react_1.useState)(initValues.dataArea), dataArea = _e[0], setDataArea = _e[1];
var _f = (0, react_1.useState)(initValues.chartType), chartType = _f[0], setChartType = _f[1];
var _g = (0, react_1.useState)(initValues.barValue), barValue = _g[0], setBarValue = _g[1];
var _h = (0, react_1.useState)(initValues.lineValue), lineValue = _h[0], setLineValue = _h[1];
(0, react_1.useEffect)(function () {
calcNum > 0 && handleOk();
}, [calcNum]);
(0, react_1.useEffect)(function () {
defaultNum > 0 && setDefault();
}, [defaultNum]);
(0, react_1.useEffect)(function () {
resetNum > 0 && onReset();
}, [resetNum]);
var onChartTypeChange = function (type) {
//不是同组内切换就清空XY轴
if (!(DataCharts_1.lineGroup.includes(type) && DataCharts_1.lineGroup.includes(chartType) || DataCharts_1.pieGroup.includes(type) && DataCharts_1.pieGroup.includes(chartType))) {
setSelectedYAxisData([]);
setSelectedXAxisData('');
setXAxisData(xAxisData.map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, item), { disabled: false })); }));
setYAxisData(yAxisData.map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, item), { disabled: false })); }));
}
setChartType(type);
//只有柱线结合图有这个
if (lineValue.length || barValue.length) {
setLineValue([]);
setBarValue([]);
}
//柱线图内切换到柱线结合时，初始化柱和线的图形
if (DataCharts_1.lineGroup.includes(chartType) && type === 'line-bar' && (selectedYAxisData === null || selectedYAxisData === void 0 ? void 0 : selectedYAxisData.length)) {
setBarValue(tslib_1.__spreadArray([], selectedYAxisData, true));
}
};
var handleOk = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var param, isRepeat, calcData, res, chartName, shcema;
var _a;
return 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(selectedYAxisData.concat(selectedXAxisData))];
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 = DataCharts_1.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
});
handleChange(shcema);
staticRecords(143);
return [2 /*return*/];
}
});
}); };
var init = function () {
setChartType('');
setSelectedXAxisData('');
setSelectedYAxisData([]);
setLineValue([]);
setBarValue([]);
setDataArea('present');
};
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 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' }, DataCharts_1.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 ".concat(['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 (tslib_1.__assign(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 (tslib_1.__assign(tslib_1.__assign({}, item), { disabled: item.value === selValue_1 })); }));
}
}
else {
setSelectedYAxisData(value);
setXAxisData(xAxisData.map(function (item) {
if (value.includes(item.value)) {
return tslib_1.__assign(tslib_1.__assign({}, item), { disabled: true });
}
return tslib_1.__assign(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); } }));
};
return renderBody();
});
//# sourceMappingURL=./renderers/Table/ProcessToolsModal/Chartstic.js.map