fastlion-amis
Version:
一种MIS页面生成工具
748 lines (747 loc) • 44.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartRenderer = exports.Chart = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var factory_1 = require("../factory");
var service_1 = require("../store/service");
var tpl_1 = require("../utils/tpl");
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var LazyComponent_1 = tslib_1.__importDefault(require("../components/LazyComponent"));
var resize_sensor_1 = require("../utils/resize-sensor");
var tpl_builtin_1 = require("../utils/tpl-builtin");
var api_1 = require("../utils/api");
var Scoped_1 = require("../Scoped");
var helper_1 = require("../utils/helper");
var mobx_state_tree_1 = require("mobx-state-tree");
// Jay
var empty_1 = tslib_1.__importDefault(require("antd/lib/empty"));
var utils_1 = require("../utils/utils");
var antd_1 = require("antd");
var EVAL_CACHE = {};
/**
* ECharts 中有些配置项可以写函数，但 JSON 中无法支持，为了实现这个功能，需要将看起来像函数的字符串转成函数类型
* 目前 ECharts 中可能有函数的配置项有如下：interval、formatter、color、min、max、labelFormatter、pageFormatter、optionToContent、contentToOption、animationDelay、animationDurationUpdate、animationDelayUpdate、animationDuration、position、sort
* 其中用得最多的是 formatter、sort，所以目前先只支持它们
* @param config ECharts 配置
*/
function recoverFunctionType(config) {
['formatter', 'sort', 'renderItem', 'symbolSize', 'valueFormatter'].forEach(function (key) {
var objects = (0, helper_1.findObjectsWithKey)(config, key);
for (var _i = 0, objects_1 = objects; _i < objects_1.length; _i++) {
var object = objects_1[_i];
var code = object[key];
if (typeof code === 'string' && code.trim().startsWith('function')) {
try {
if (!(code in EVAL_CACHE)) {
EVAL_CACHE[code] = eval('(' + code + ')');
}
object[key] = EVAL_CACHE[code];
}
catch (e) {
console.warn(code, e);
}
}
}
});
}
var Chart = /** @class */ (function (_super) {
tslib_1.__extends(Chart, _super);
function Chart(props) {
var _this = _super.call(this, props) || this;
_this.handleShowData = function (tableSchema, mode) {
_this.tableData = {
columns: tableSchema.columns,
data: tableSchema.data,
rowField: tableSchema.rowField,
columnField: tableSchema.columnField,
valueField: tableSchema.valueField
};
_this.setState({ showData: mode });
};
_this.handleJump = function (body) {
var _a;
var store = _this.props.store;
var types = (0, helper_1.isMobile)() ? 'drawer' : 'dialog';
var action = {
type: "action",
actionType: types,
close: true
};
action[types] = {
title: body.linkTitle,
type: types,
size: (_a = body.linkSize) !== null && _a !== void 0 ? _a : 'lg',
bodyClassName: "overflow-y-auto max-h-nestSide-".concat(types),
className: "h-full",
actions: [],
overlay: (0, helper_1.isMobile)() ? false : true,
body: {
schemaApi: {
"method": "get",
"url": body.linkUrl
},
type: "service"
}
};
store.setCurrentAction(action);
types === 'dialog' ? store.openDialog(body.bodydata) : store.openDrawer(body.bodydata);
};
_this.refFn = function (ref) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var chartRef, _a, chartTheme, onChartWillMount, onChartUnMount, env, mapName, mapURL, onChartMount, theme, darkTheme;
var _this = this;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
this.chartContent = ref; // 记录表格体
chartRef = this.props.chartRef;
_a = this.props, chartTheme = _a.chartTheme, onChartWillMount = _a.onChartWillMount, onChartUnMount = _a.onChartUnMount, env = _a.env, mapName = _a.mapName, mapURL = _a.mapURL;
onChartMount = this.props.onChartMount;
if (!ref) return [3 /*break*/, 7];
if (!(mapURL && mapName)) return [3 /*break*/, 2];
return [4 /*yield*/, this.loadChartMapData()];
case 1:
_b.sent();
_b.label = 2;
case 2:
theme = 'default';
if (chartTheme) {
echarts.registerTheme('custom', chartTheme);
theme = 'custom';
}
if (!onChartWillMount) return [3 /*break*/, 4];
return [4 /*yield*/, onChartWillMount(echarts)];
case 3:
_b.sent();
_b.label = 4;
case 4:
if (!env.loadChartExtends) return [3 /*break*/, 6];
return [4 /*yield*/, env.loadChartExtends()];
case 5:
_b.sent();
_b.label = 6;
case 6:
darkTheme = localStorage.getItem('g_user_skin');
if (darkTheme === 'dark') {
theme = 'dark';
}
this.echarts = echarts.init(ref, theme);
if (typeof onChartMount === 'string') {
onChartMount = new Function('chart', 'echarts');
}
onChartMount === null || onChartMount === void 0 ? void 0 : onChartMount(this.echarts, echarts);
this.unSensor = (0, resize_sensor_1.resizeSensor)(ref, function () {
var _a;
var width = ref.offsetWidth;
var height = ref.offsetHeight;
(_a = _this.echarts) === null || _a === void 0 ? void 0 : _a.resize({
width: width,
height: height
});
});
chartRef && chartRef(this.echarts);
this.renderChart();
return [3 /*break*/, 8];
case 7:
chartRef && chartRef(null);
this.unSensor && this.unSensor();
if (this.echarts) {
onChartUnMount === null || onChartUnMount === void 0 ? void 0 : onChartUnMount(this.echarts, window.echarts);
this.echarts.dispose();
delete this.echarts;
}
_b.label = 8;
case 8:
this.ref = ref;
return [2 /*return*/];
}
});
}); };
_this.dataset = [];
_this.refFn = _this.refFn.bind(_this);
_this.reload = _this.reload.bind(_this);
_this.handleClick = _this.handleClick.bind(_this);
_this.handleExport = _this.handleExport.bind(_this);
_this.handleDialogConfirm = _this.handleDialogConfirm.bind(_this);
_this.handleDrawerConfirm = _this.handleDrawerConfirm.bind(_this);
_this.baseModalConfirm = _this.baseModalConfirm.bind(_this);
_this.handleDialogClose = _this.handleDialogClose.bind(_this);
_this.handleDrawerClose = _this.handleDrawerClose.bind(_this);
_this.loadChartMapData = _this.loadChartMapData.bind(_this);
_this.mounted = true;
_this.containerRef = react_1.default.createRef();
// this.cacheHeight = 0;
_this.cacheStyle = {};
props.config && _this.renderChart(props.config);
// Jay
_this.state = {
hasRender: false,
canvasHigh: '100%',
visible: false,
errMsg: '',
showEmpty: false,
};
return _this;
}
Chart.prototype.componentDidMount = function () {
var _a, _b, _c, _d;
var _e = this.props, api = _e.api, data = _e.data, initFetch = _e.initFetch, source = _e.source;
// 初始化的时候,默认将外部Panel的loading 给关闭
(_b = (_a = this.props).setPanelLoading) === null || _b === void 0 ? void 0 : _b.call(_a, false);
if (source && (0, tpl_builtin_1.isPureVariable)(source)) {
var ret = (0, tpl_builtin_1.resolveVariableAndFilter)(source, data, '| raw');
ret && this.renderChart(ret);
}
else if (api && initFetch !== false) {
// Jay
(_d = (_c = this.props).setPanelLoading) === null || _d === void 0 ? void 0 : _d.call(_c, true);
this.reload();
}
};
Chart.prototype.componentDidUpdate = function (prevProps) {
var _this = this;
var props = this.props;
if ((0, api_1.isApiOutdated)(prevProps.api, props.api, prevProps.data, props.data)) {
this.reload();
}
else if (props.source && (0, tpl_builtin_1.isPureVariable)(props.source)) {
var prevRet = prevProps.source
? (0, tpl_builtin_1.resolveVariableAndFilter)(prevProps.source, prevProps.data, '| raw')
: null;
var ret = (0, tpl_builtin_1.resolveVariableAndFilter)(props.source, props.data, '| raw');
if (prevRet !== ret) {
this.renderChart(ret || {});
}
}
else if (props.config !== prevProps.config) {
this.renderChart(props.config || {});
}
else if (props.config &&
props.trackExpression &&
(0, tpl_1.filter)(props.trackExpression, props.data) !==
(0, tpl_1.filter)(prevProps.trackExpression, prevProps.data)) {
this.renderChart(props.config || {});
}
else if ((0, api_1.isApiOutdated)(prevProps.mapURL, props.mapURL, prevProps.data, props.data)) {
var source_1 = props.source, data_1 = props.data, api_2 = props.api, config_1 = props.config;
this.loadChartMapData(function () {
if (source_1 && (0, tpl_builtin_1.isPureVariable)(source_1)) {
var ret = (0, tpl_builtin_1.resolveVariableAndFilter)(source_1, data_1, '| raw');
ret && _this.renderChart(ret);
}
else if (api_2) {
_this.reload();
}
else if (config_1) {
_this.renderChart(config_1 || {});
}
});
}
};
Chart.prototype.componentWillUnmount = function () {
this.mounted = false;
clearTimeout(this.timer);
};
Chart.prototype.loadChartMapData = function (callBackFn) {
var _a, _b, _c, _d;
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _e, env, data, _f, mapName, mapURL, mapUrlType, isSvg, mapGeoResult;
var _this = this;
return tslib_1.__generator(this, function (_g) {
switch (_g.label) {
case 0:
_e = this.props, env = _e.env, data = _e.data;
_f = this.props, mapName = _f.mapName, mapURL = _f.mapURL, mapUrlType = _f.mapUrlType;
if (!(mapURL && mapName && window.echarts)) return [3 /*break*/, 3];
isSvg = Number(mapUrlType) === 1;
mapGeoResult = void 0;
this.setState({ hasRender: true });
if ((0, tpl_builtin_1.isPureVariable)(mapName)) {
mapName = (0, tpl_builtin_1.resolveVariableAndFilter)(mapName, data);
}
(_b = (_a = this.props).setPanelLoading) === null || _b === void 0 ? void 0 : _b.call(_a, true);
if (!isSvg) return [3 /*break*/, 1];
fetch(mapURL.url, { headers: {
token: (_c = env.token) === null || _c === void 0 ? void 0 : _c.call(env)
} })
.then(function (res) { return res.text(); }).then(function (res) {
window.echarts.registerMap(mapName, { svg: res });
}).finally(function () { var _a, _b; (_b = (_a = _this.props).setPanelLoading) === null || _b === void 0 ? void 0 : _b.call(_a, false); });
return [3 /*break*/, 3];
case 1: return [4 /*yield*/, (env.fetcher(mapURL, data).catch(function () { return ({ data: {}, ok: false }); }).finally(function () { var _a, _b; (_b = (_a = _this.props).setPanelLoading) === null || _b === void 0 ? void 0 : _b.call(_a, false); }))];
case 2:
mapGeoResult = _g.sent();
if (!mapGeoResult.ok) {
console.warn('fetch map geo error ' + mapURL);
}
window.echarts.registerMap(mapName, (_d = mapGeoResult === null || mapGeoResult === void 0 ? void 0 : mapGeoResult.data) !== null && _d !== void 0 ? _d : {});
_g.label = 3;
case 3:
if (callBackFn) {
callBackFn();
}
return [2 /*return*/];
}
});
});
};
Chart.prototype.handleExport = function (_a) {
var _b, _c, _d, _e, _f;
var api = _a.api;
return tslib_1.__awaiter(this, void 0, void 0, function () {
var res, baseUrl, link;
return tslib_1.__generator(this, function (_g) {
switch (_g.label) {
case 0: return [4 /*yield*/, this.props.env.fetcher(api)];
case 1:
res = _g.sent();
if (res.ok && res.data != null) {
baseUrl = (_f = ((_e = (_d = (_c = (_b = this.props.env) === null || _b === void 0 ? void 0 : _b.axiosInstance) === null || _c === void 0 ? void 0 : _c.defaults) === null || _d === void 0 ? void 0 : _d.baseURL) !== null && _e !== void 0 ? _e : res === null || res === void 0 ? void 0 : res.reqUrl)) !== null && _f !== void 0 ? _f : '';
link = document.createElement('a');
link.href = baseUrl + res.data.fileUrl;
link.download = res.data.fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
return [2 /*return*/];
}
});
});
};
Chart.prototype.handleClick = function (ctx) {
var _a, _b;
var _c = this.props, onAction = _c.onAction, data = _c.data;
if (this.series && this.series.length > 0) {
var clickAction = (_a = this.series[ctx.seriesIndex]) === null || _a === void 0 ? void 0 : _a.clickAction;
if (clickAction) {
onAction && onAction(null, clickAction, (0, helper_1.createObject)(data, ctx.data));
if (clickAction === null || clickAction === void 0 ? void 0 : clickAction.linkId) {
var dataObj = (0, helper_1.createObject)(data, this.dataset[ctx.dataIndex]);
(0, utils_1.linkJump)((_b = clickAction === null || clickAction === void 0 ? void 0 : clickAction.linkId) !== null && _b !== void 0 ? _b : '', dataObj) && (0, utils_1.ModleHandleClick)(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, this.props), clickAction), { value: ctx.value, data: dataObj, handleJump: this.handleJump }));
}
}
}
};
Chart.prototype.reload = function (subpath, query) {
var _this = this;
var _a, _b, _c, _d;
var _e = this.props, api = _e.api, env = _e.env, store = _e.store, interval = _e.interval, __ = _e.translate;
if (query) {
return this.receive(query);
}
else if (!env || !env.fetcher || !(0, api_1.isEffectiveApi)(api, store.data)) {
return;
}
clearTimeout(this.timer);
if (this.reloadCancel) {
this.reloadCancel();
delete this.reloadCancel;
(_a = this.echarts) === null || _a === void 0 ? void 0 : _a.hideLoading();
}
(_b = this.echarts) === null || _b === void 0 ? void 0 : _b.showLoading();
// 请求Chart数据的时候，关闭Panel的loading
(_d = (_c = this.props).setPanelLoading) === null || _d === void 0 ? void 0 : _d.call(_c, false); // Jay
store.markFetching(true);
env
.fetcher(api, store.data, {
cancelExecutor: function (executor) { return (_this.reloadCancel = executor); }
})
.then(function (result) {
var _a;
// this.props.setPanelLoading?.(false) // Jay
(0, mobx_state_tree_1.isAlive)(store) && store.markFetching(false);
if (!result.ok) {
_this.renderChart({});
// 将后端返回的错误渲染到空数据中
_this.setState({ errMsg: result.msg });
return env.notify('error', result.msg || __('fetchFailed'), result.msgTimeout !== undefined
? {
closeButton: true,
timeout: result.msgTimeout
}
: undefined);
}
delete _this.reloadCancel;
var data = (0, api_1.normalizeApiResponseData)(result.data);
if (data.series) {
_this.series = data.series;
}
_this.setState({ errMsg: '', showEmpty: result.data == null });
// 说明返回的是数据接口。
if (!data.series && _this.props.config) {
var ctx = (0, helper_1.createObject)(_this.props.data, data);
_this.renderChart(_this.props.config, ctx);
}
else {
_this.renderChart(result.data || {});
}
(_a = _this.echarts) === null || _a === void 0 ? void 0 : _a.hideLoading();
interval &&
_this.mounted &&
(_this.timer = setTimeout(_this.reload, Math.max(interval, 1000)));
})
.catch(function (reason) {
var _a;
// this.props.setPanelLoading?.(false) // Jay
if (env.isCancel(reason)) {
return;
}
(0, mobx_state_tree_1.isAlive)(store) && store.markFetching(false);
env.notify('error', reason);
(_a = _this.echarts) === null || _a === void 0 ? void 0 : _a.hideLoading();
});
};
Chart.prototype.receive = function (data) {
var store = this.props.store;
store.updateData(data);
this.reload();
};
Chart.prototype.renderChart = function (config, data) {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
config && (this.pending = config);
data && (this.pendingCtx = data);
if (!this.echarts) {
return;
}
var store = this.props.store;
var onDataFilter = this.props.onDataFilter;
var dataFilter = this.props.dataFilter;
if (!onDataFilter && typeof dataFilter === 'string') {
onDataFilter = new Function('config', 'echarts', 'data', dataFilter);
}
config = config || this.pending;
data = data || this.pendingCtx || this.props.data;
if (!(config === null || config === void 0 ? void 0 : config.dataset)) {
config = tslib_1.__assign(tslib_1.__assign({}, config), { dataset: { source: [] } });
}
if (typeof config === 'string') {
config = new Function('return ' + config)();
}
try {
onDataFilter &&
(config =
onDataFilter(config, window.echarts, data) || config);
}
catch (e) {
console.warn(e);
}
if (config) {
try {
if (!this.props.disableDataMapping) {
config = (0, tpl_builtin_1.dataMapping)(config, data, function (key, value) {
return typeof value === 'function' ||
(typeof value === 'string' && value.startsWith('function'));
});
}
if ((_b = (_a = config.toolbox) === null || _a === void 0 ? void 0 : _a.feature) === null || _b === void 0 ? void 0 : _b.myExport) {
config.toolbox.feature.myExport.icon = "path://M997.910386 1023.826532H25.812065C11.622368 1023.826532 0 1012.204164 0 997.99712V25.933493C0 11.726449 11.622368 0.104081 25.812065 0.104081c14.207044 0 25.829412 11.622368 25.829412 25.829412v946.234215h946.268909c14.207044 0 25.829412 11.622368 25.829412 25.829412 0 14.207044-11.622368 25.829412-25.829412 25.829412z m-117.52469-448.050956v292.710203c0 14.207044-11.622368 25.829412-25.829412 25.829411-14.189697 0-25.812065-11.622368-25.812065-25.829411V575.775576c0-14.207044 11.622368-25.829412 25.812065-25.829412 14.207044 0 25.829412 11.622368 25.829412 25.829412zM650.054649 463.853907c14.207044 0 25.812065 11.622368 25.812065 25.829412v378.80246c0 14.207044-11.605021 25.829412-25.812065 25.829411-14.189697 0-25.812065-11.622368-25.812065-25.829411V489.683319c0-14.207044 11.622368-25.829412 25.812065-25.829412z m-182.766072-77.470888v482.10276c0 14.207044-11.622368 25.829412-25.812065 25.829411-14.207044 0-25.829412-11.622368-25.829411-25.829411V386.383019c0-14.207044 11.622368-25.829412 25.829411-25.829412 14.189697 0 25.812065 11.622368 25.812065 25.829412z m-232.360624 163.563145c14.189697 0 25.812065 11.622368 25.812065 25.829412v292.710203c0 14.207044-11.622368 25.829412-25.812065 25.829411-14.207044 0-25.812065-11.622368-25.812065-25.829411V575.775576c0-14.207044 11.605021-25.829412 25.812065-25.829412z m418.405245-290.229608c-6.86934 5.585675-15.681523 6.557097-23.609019 4.19793-4.458132 0.884688-9.072386 1.040809-13.634599-0.607139l-207.589368-75.077027-162.192746 93.083024a25.864105 25.864105 0 0 1-34.554861-11.761143 25.881452 25.881452 0 0 1 11.761142-34.572207l171.941658-98.686047c7.545866-3.729566 15.907032-2.983653 22.915146 0.589792l214.424015 77.540276 226.54944-97.95748a25.898799 25.898799 0 0 1 36.324236 3.781606 25.916146 25.916146 0 0 1-3.764259 36.324236l-238.570785 103.144179z";
config.toolbox.feature.myExport.onclick = function () { _this.handleExport(config.toolbox.feature.myExport); };
}
if ((_d = (_c = config.toolbox) === null || _c === void 0 ? void 0 : _c.feature) === null || _d === void 0 ? void 0 : _d.myToolShowTable) {
config.toolbox.feature.myToolShowTable.title = config.toolbox.feature.myToolShowTable.title || '数据视图';
config.toolbox.feature.myToolShowTable.icon = "M896 402.4V237.76C896 177.12 846.88 128 786.24 128H237.76C177.12 128 128 177.12 128 237.76v548.48C128 846.88 177.12 896 237.76 896h548.48c60.64 0 109.76-49.12 109.76-109.76V402.4zM198.88 198.88c10.24-10.4 24.32-16.16 38.88-16.16h548.64a54.72 54.72 0 0 1 54.72 54.88v109.92H182.88v-109.76c0-14.56 5.76-28.64 16.16-38.88z m230.72 395.52v-192h164.8v192h-164.8z m164.8 54.88v192h-164.8v-192h164.8z m-219.52-54.88h-192v-192h192v192zM199.04 825.28a54.224 54.224 0 0 1-16.16-38.72v-137.28h192v192h-136.96c-14.56 0-28.64-5.76-38.88-16z m642.24-38.72a54.56 54.56 0 0 1-54.56 54.72h-137.44v-192h192v137.28z m0-192h-192v-192h192v192z";
config.toolbox.feature.myToolShowTable.onclick = function () { _this.handleShowData(config.toolbox.feature.myToolShowTable, 'table'); };
}
if ((_f = (_e = config.toolbox) === null || _e === void 0 ? void 0 : _e.feature) === null || _f === void 0 ? void 0 : _f.myToolShowTransposeTable) {
config.toolbox.feature.myToolShowTransposeTable.title = config.toolbox.feature.myToolShowTransposeTable.title || '数据视图转置';
config.toolbox.feature.myToolShowTransposeTable.icon = "M210.688 117.333333c90.666667-8.021333 162.645333 90.666667 128 178.688-4.864 16.938667-5.290667 25.088 6.656 36.48l4.010667 3.498667c29.312 24.021333 50.645333 61.354667 82.645333 74.666667 32 13.354667 72.021333 2.688 109.354667 2.688h122.624c9.514667 0 16.896-2.133333 22.144-11.946667l1.877333-4.053333c24.021333-58.709333 85.333333-93.354667 146.688-80.042667 58.666667 10.666667 103.978667 69.333333 101.333333 133.333333 0 61.354667-45.354667 117.333333-104.021333 128-61.354667 10.666667-122.666667-18.645333-146.688-79.957333-5.333333-13.354667-13.312-16.042667-26.666667-16.042667h-195.2c-11.392 0.170667-18.133333 1.578667-18.133333 18.688v130.688c0 13.312 5.376 18.645333 18.688 23.978667 58.666667 26.666667 90.666667 85.333333 77.354667 149.333333-13.354667 58.666667-66.688 104.021333-128 104.021334-61.354667 0-114.688-45.354667-128-106.666667-10.24-56.149333 18.602667-117.12 72.490666-143.36l7.466667-3.328c13.354667-5.333333 16.042667-13.354667 16.042667-26.666667v-146.688c0-15.957333-2.688-23.978667-13.354667-34.645333C341.333333 426.666667 320 402.645333 295.978667 378.666667c-7.082667-9.472-14.208-12.629333-25.045334-9.472l-4.266666 1.450666C213.333333 392.021333 165.333333 384 125.312 344.021333 85.333333 304 77.354667 256 96 205.354667c18.688-53.333333 58.666667-82.688 114.688-88.021334z m-42.666667 298.666667c26.624 32 53.333333 61.354667 79.957334 96-21.333333 0-48-5.333333-58.666667 2.688-10.666667 13.312-2.645333 37.290667-2.645333 58.624v149.333333c0 16 2.688 21.333333 18.688 18.688l11.605333 0.042667c9.984 0.170667 21.12 0.725333 36.394667 2.602667l-34.133334 40.533333C202.666667 804.266667 186.666667 823.466667 170.666667 842.666667l-65.365334-78.165334-17.28-20.48h47.957334c10.666667 0 16.042667-2.688 16.042666-16v-197.333333c0-10.666667-2.688-16.042667-16.042666-16.042667H85.333333l50.474667-60.074666 32.213333-38.570667z m247.978667 293.333333c-34.688 0-64 32-64 66.688 0 34.645333 26.666667 64 64 64 34.688 0 64-29.354667 64-64 0-37.333333-29.354667-66.688-64-66.688zM810.666667 381.312c-34.688 0-66.688 29.354667-66.688 64 0 34.688 29.354667 66.688 64 66.688 34.688 0 66.688-29.354667 69.333333-66.688 0-34.645333-32-64-66.645333-64zM215.978667 184.064c-34.645333 2.645333-64 32-64 66.645333 2.688 34.688 32 64 66.688 64s66.688-29.354667 64-66.688c0-37.333333-29.354667-64-66.688-64z m493.354666-64c26.666667 18.645333 48 37.290667 69.333334 55.978667l9.130666 7.68c19.797333 17.237333 16.768 21.802667-9.130666 43.008-21.333333 16-42.666667 34.645333-69.333334 55.978666v-53.333333c0-10.666667-2.688-13.354667-13.354666-13.354667h-199.978667c-13.354667 0-16 8.021333-16 18.688v48c-32-29.354667-64-53.333333-88.021333-72.021333-7.978667-7.978667 0-13.312 5.376-16 26.624-21.333333 53.333333-45.312 82.645333-69.333333l2.090667 4.394666a6.4 6.4 0 0 1 0.554666 2.304v1.322667c0 16-7.978667 40.021333 2.688 50.688s34.688 2.645333 53.333334 2.645333h152.021333c16 0 18.645333-2.688 18.645333-18.688V120.021333z";
config.toolbox.feature.myToolShowTransposeTable.onclick = function () { _this.handleShowData(config.toolbox.feature.myToolShowTransposeTable, 'cross'); };
}
var chartObj = (_g = config.series) === null || _g === void 0 ? void 0 : _g[0];
if (chartObj) {
this.dataset = chartObj.type === 'scatter' ? chartObj.data.map(function (item) {
var jumpData = item[item.length - 1];
if (typeof jumpData == 'object')
return jumpData;
return {};
}) : (((_h = chartObj.data) === null || _h === void 0 ? void 0 : _h.length) > 0 ? chartObj.data : config.dataset.source);
}
recoverFunctionType(config);
if ((0, mobx_state_tree_1.isAlive)(store) && store.loading) {
(_j = this.echarts) === null || _j === void 0 ? void 0 : _j.showLoading();
}
else {
(_k = this.echarts) === null || _k === void 0 ? void 0 : _k.hideLoading();
}
this.setState({ hasRender: true }); // Jay
// 强制重绘
this.echarts.clear();
if (this.props.maskImageUrl) {
var maskImage = new Image();
maskImage.src = this.props.maskImageUrl;
config = tslib_1.__assign(tslib_1.__assign({}, config), { maskImage: maskImage });
}
(_l = this.echarts) === null || _l === void 0 ? void 0 : _l.setOption(config, this.props.replaceChartOption);
this.echarts.on('click', this.handleClick);
}
catch (e) {
console.warn(e);
}
}
};
Chart.prototype.handleDialogConfirm = function (values, action, ctx, components) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.baseModalConfirm('dialog')(values, action, ctx, components)];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
};
Chart.prototype.handleDrawerConfirm = function (values, action, ctx, components) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.baseModalConfirm('drawer')(values, action, ctx, components)];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
};
Chart.prototype.baseModalConfirm = function (type) {
var _this = this;
return function (values, action, ctx, components) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var _a, store, pageField, stopAutoRefreshWhenModalIsOpen, interval, silentPolling, env;
return tslib_1.__generator(this, function (_b) {
_a = this.props, store = _a.store, pageField = _a.pageField, stopAutoRefreshWhenModalIsOpen = _a.stopAutoRefreshWhenModalIsOpen, interval = _a.interval, silentPolling = _a.silentPolling, env = _a.env;
switch (type) {
case 'drawer':
default:
store.closeDrawer(true);
break;
case 'dialog':
store.closeDialog(true);
break;
}
return [2 /*return*/];
});
}); };
};
Chart.prototype.handleDialogClose = function (confirmed, formInstance) {
return this.handleBaseModalClose('dialog')(confirmed, formInstance);
};
Chart.prototype.handleDrawerClose = function (confirmed, formInstance) {
return this.handleBaseModalClose('drawer')(confirmed, formInstance);
};
Chart.prototype.handleBaseModalClose = function (type) {
var _this = this;
return function (confirmed, formInstance) {
var _a = _this.props, __ = _a.translate, store = _a.store;
switch (type) {
case 'dialog':
store.closeDialog();
break;
case 'drawer':
store.closeDrawer();
break;
}
};
};
Chart.prototype.handleLoopGetParentHeight = function (currentDom) {
var _a;
var closetParent = (_a = currentDom.parentElement) !== null && _a !== void 0 ? _a : {};
var clientHeight = closetParent.clientHeight, clientWidth = closetParent.clientWidth;
if (clientHeight) {
// 防止滚动条影响
return { height: Number.parseInt(Number(clientHeight - 2).toString()), width: "".concat(clientWidth - 4, "px") };
}
else {
return this.handleLoopGetParentHeight(closetParent);
}
};
Chart.prototype.getDomStyle = function () {
var _a;
var style = this.props.style || {};
var _b = this.props, height = _b.height, width = _b.width, ns = _b.classPrefix;
// requestAnimationFrame(() => {
// if (!height && this.containerRef.current) {
// if (this.cacheHeight) {
// style.height = this.cacheHeight;
// } else {
// const parentDomHeight = this.handleLoopGetParentHeight(this.containerRef.current);
// this.cacheHeight = parentDomHeight;
// style.height = parentDomHeight;
// }
// }
// return style;
// })
style.width = '100%';
if (!height && this.containerRef.current) {
if ((_a = this.cacheStyle) === null || _a === void 0 ? void 0 : _a.height) {
style.height = this.cacheStyle.height;
}
else {
var _c = this.handleLoopGetParentHeight(this.containerRef.current), parentDomHeight = _c.height, parentDomWidth = _c.width;
// const gridHeight = domUtils.closest(this.containerRef, `${ns}Grid`)?.clientHeight;
// if (parentDomHeight) {
// }
// this.cacheHeight = parentDomHeight;
style.height = parentDomHeight;
style.width = parentDomWidth;
}
}
else {
style.height = height;
}
style.width = width || style.width;
// style.margin = '0 auto';
this.cacheStyle = {
height: style.height,
width: "calc(".concat(width || '100%', " - 6px)"),
margin: '0 auto'
};
return style;
};
Chart.prototype.render = function () {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g;
var _h = this.props, className = _h.className, width = _h.width, height = _h.height, ns = _h.classPrefix, unMountOnHidden = _h.unMountOnHidden, render = _h.render, store = _h.store;
var style = this.props.style || {};
width && (style.width = width);
height && (style.height = height);
// 新增未配置高度的情况下，自动获取父/祖先 容器高度
// requestAnimationFrame(() => {
// if (!height && this.containerRef.current) {
// if (this.cacheHeight) {
// style.height = this.cacheHeight;
// } else {
// const parentDomHeight = this.handleLoopGetParentHeight(this.containerRef.current);
// this.cacheHeight = parentDomHeight;
// style.height = parentDomHeight;
// }
// }
// })
return (react_1.default.createElement("div", { className: (0, classnames_1.default)("".concat(ns, "Chart"), className), ref: this.containerRef, style: tslib_1.__assign({}, this.cacheStyle) },
react_1.default.createElement(LazyComponent_1.default, { unMountOnHidden: unMountOnHidden, placeholder: "..." // 之前那个 spinner 会导致 sensor 失效
, component: function () {
var _a;
return (react_1.default.createElement(react_1.default.Fragment, null,
!_this.state.showEmpty && react_1.default.createElement("div", { className: "".concat(ns, "Chart-content"), ref: _this.refFn, style: tslib_1.__assign({}, (_this.getDomStyle())) }),
(!_this.state.hasRender || _this.state.showEmpty) &&
react_1.default.createElement("div", { style: {
display: 'flex', justifyContent: 'center',
alignItems: 'center', width: '100%', height: '100%', minHeight: 300, whiteSpace: 'normal'
} },
react_1.default.createElement(empty_1.default, { description: ((_a = _this.state.errMsg) === null || _a === void 0 ? void 0 : _a.length) ? _this.state.errMsg : (_this.props.translate(_this.props.placeholder || 'placeholder.noData')) }))));
} }),
this.state.showData && react_1.default.createElement("div", { className: (0, classnames_1.default)("".concat(ns, "Chart-table")) },
react_1.default.createElement("div", { className: 'chart-table-body' }, render('', {
type: "crud",
mode: this.state.showData === 'cross' ? 'cross' : undefined,
cross: this.state.showData === 'cross' ? {
"valueFields": (_b = (_a = this.tableData) === null || _a === void 0 ? void 0 : _a.valueField) === null || _b === void 0 ? void 0 : _b.join(','),
"positionType": 1,
"rowFields": [{ "name": (_c = this.tableData) === null || _c === void 0 ? void 0 : _c.rowField }],
"columnFields": [{ "name": (_d = this.tableData) === null || _d === void 0 ? void 0 : _d.columnField }]
} : undefined,
data: {
total: (_e = this.tableData) === null || _e === void 0 ? void 0 : _e.data.length,
items: (_f = this.tableData) === null || _f === void 0 ? void 0 : _f.data
},
aliasTitle: '数据试图',
loadDataOnce: true,
"name": "".concat((0, helper_1.uuid)()),
"affixHeader": true,
"columns": (_g = this.tableData) === null || _g === void 0 ? void 0 : _g.columns.map(function (item) {
var filteredEntries = Object.entries(item).filter(function (_a) {
var key = _a[0], value = _a[1];
return value !== null;
});
// 将过滤后的键值对数组转换回对象
return Object.fromEntries(filteredEntries);
}),
"filterTogglable": false,
source: "${items}",
"autoFillHeight": false,
"multiple": false,
"setBorder": true,
"keepItemSelectionOnPageChange": false,
"syncLocation": false,
"checkOnItemClick": false,
"showIndex": false,
"header": [],
"footer": [],
// headerToolbar: [{
// "type": "data-cross",
// "label": "交叉制表",
// "icon": "#icon-toolcross",
// "align": "right"
// }],
footerToolbar: this.state.showData === 'table' ? [
{
"type": "pagination",
"align": "right"
},
{
"type": "switch-per-page",
"align": "right"
},
{
"type": "statistics",
"align": "right"
}
] : [],
isStatic: this.state.showData === 'table',
perPage: this.state.showData === 'table' ? 100 : 2147483647,
perPageAvailable: [100, 200, 500, 1000]
})),
react_1.default.createElement("div", { className: 'chart-table-footer' },
react_1.default.createElement(antd_1.Button, { danger: true, type: 'primary', size: 'small', onClick: function () { return _this.setState({ showData: undefined }); } }, "\u5173\u95ED"))),
this.props.store.dialogOpen ?
render('dialog', tslib_1.__assign(tslib_1.__assign({}, (store.action &&
store.action.dialog)), { type: 'dialog' }), {
key: 'dialog',
data: store.dialogData,
onConfirm: this.handleDialogConfirm,
onClose: this.handleDialogClose,
show: store.dialogOpen,
replace: store.replace
}) : null,
this.props.store.drawerOpen ?
render('drawer', tslib_1.__assign(tslib_1.__assign({}, (store.action &&
store.action.drawer)), { type: 'drawer' }), {
key: 'drawer',
data: store.drawerData,
onConfirm: this.handleDrawerConfirm,
onClose: this.handleDrawerClose,
show: store.drawerOpen,
// onAction: this.handleAction,
}) : null));
};
Chart.defaultProps = {
replaceChartOption: false,
unMountOnHidden: false
};
Chart.propsList = [];
return Chart;
}(react_1.default.Component));
exports.Chart = Chart;
var ChartRenderer = /** @class */ (function (_super) {
tslib_1.__extends(ChartRenderer, _super);
function ChartRenderer(props, context) {
var _this = _super.call(this, props) || this;
var scoped = context;
scoped.registerComponent(_this);
return _this;
}
ChartRenderer.prototype.componentWillUnmount = function () {
_super.prototype.componentWillUnmount.call(this);
var scoped = this.context;
scoped.unRegisterComponent(this);
};
var _a;
ChartRenderer.contextType = Scoped_1.ScopedContext;
ChartRenderer = tslib_1.__decorate([
(0, factory_1.Renderer)({
type: 'chart',
storeType: service_1.ServiceStore.name
}),
tslib_1.__metadata("design:paramtypes", [Object, typeof (_a = typeof Scoped_1.IScopedContext !== "undefined" && Scoped_1.IScopedContext) === "function" ? _a : Object])
], ChartRenderer);
return ChartRenderer;
}(Chart));
exports.ChartRenderer = ChartRenderer;
//# sourceMappingURL=./renderers/Chart.js.map