fastlion-amis
Version:
一种MIS页面生成工具
265 lines (264 loc) • 13.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.StatisticRenderer = exports.Statistic1 = void 0;
var tslib_1 = require("tslib");
// Jay
// 统计数值组件
var react_1 = (0, 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 = (0, tslib_1.__importDefault)(require("classnames"));
var tpl_builtin_1 = require("../../../utils/tpl-builtin");
var api_1 = require("../../../utils/api");
var Scoped_1 = require("../../../Scoped");
var mobx_state_tree_1 = require("mobx-state-tree");
var spark_md5_1 = (0, tslib_1.__importDefault)(require("spark-md5"));
var Statistic1 = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Statistic1, _super);
function Statistic1(props) {
var _a;
var _this = _super.call(this, props) || this;
_this.reload = _this.reload.bind(_this);
_this.receive = _this.receive.bind(_this);
_this.renderStatistic = _this.renderStatistic.bind(_this);
_this.state = {
statisticData: ((_a = props.columns) === null || _a === void 0 ? void 0 : _a.map(function (item) { return ({
label: item.label,
num: '-',
prefix: item.prefix,
suffix: item.suffix,
level: item.level,
}); })) || [],
header: null
};
return _this;
}
Statistic1.prototype.componentDidMount = function () {
var _a = this.props, api = _a.api, data = _a.data, initFetch = _a.initFetch, source = _a.source, name = _a.name, store = _a.store, setPanelLoading = _a.setPanelLoading;
this.mounted = true;
if (source && (0, tpl_builtin_1.isPureVariable)(source)) {
// const ret = resolveVariableAndFilter(source, data, '| raw');
// ret && this.renderChart(ret);
}
else if (api && initFetch !== false) {
setPanelLoading === null || setPanelLoading === void 0 ? void 0 : setPanelLoading(true);
this.reload();
}
else if (!api && name && store.data[name]) {
this.renderStatistic(store.data[name]);
}
};
Statistic1.prototype.componentDidUpdate = function (prevProps) {
var props = this.props;
if ((0, api_1.isApiOutdated)(prevProps.api, props.api, prevProps.data, props.data)) {
this.reload();
}
// else if (props.source && isPureVariable(props.source)) {
// const prevRet = prevProps.source
// ? resolveVariableAndFilter(prevProps.source, prevProps.data, '| raw')
// : null;
// const ret = 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 &&
// filter(props.trackExpression, props.data) !==
// filter(prevProps.trackExpression, prevProps.data)
// ) {
// this.renderChart(props.config || {});
// }
};
Statistic1.prototype.componentWillUnmount = function () {
this.mounted = false;
this.timer && clearTimeout(this.timer);
};
Statistic1.prototype.reload = function (subpath, query) {
var _this = this;
var _a = this.props, api = _a.api, env = _a.env, store = _a.store, interval = _a.interval, __ = _a.translate, setPanelLoading = _a.setPanelLoading;
if (query) {
return this.receive(query);
}
else if (!env || !env.fetcher || !(0, api_1.isEffectiveApi)(api, store.data)) {
return;
}
this.timer && clearTimeout(this.timer);
// 如果上一次的请求还没结束则结束请求
if (this.reloadCancel) {
this.reloadCancel();
delete this.reloadCancel;
}
store.markFetching(true);
env
.fetcher(api, store.data, {
cancelExecutor: function (executor) { return (_this.reloadCancel = executor); }
})
.then(function (result) {
var resData = result.data;
_this.renderStatistic(resData);
setPanelLoading === null || setPanelLoading === void 0 ? void 0 : setPanelLoading(false);
(0, mobx_state_tree_1.isAlive)(store) && store.markFetching(false);
if (!result.ok) {
return env.notify('error', result.msg || __('fetchFailed'), result.msgTimeout !== undefined
? {
closeButton: true,
timeout: result.msgTimeout
}
: undefined);
}
delete _this.reloadCancel;
interval &&
_this.mounted &&
(_this.timer = setTimeout(_this.reload, Math.max(interval, 1000)));
})
.catch(function (reason) {
setPanelLoading === null || setPanelLoading === void 0 ? void 0 : setPanelLoading(false);
if (env.isCancel(reason)) {
return;
}
(0, mobx_state_tree_1.isAlive)(store) && store.markFetching(false);
env.notify('error', reason);
});
};
Statistic1.prototype.receive = function (data) {
var store = this.props.store;
store.updateData(data);
this.reload();
};
Statistic1.prototype.renderStatistic = function (data) {
var _a = this.props, headField = _a.headField, columns = _a.columns, titleDesc = _a.titleDesc;
var tempArr = [];
columns === null || columns === void 0 ? void 0 : columns.forEach(function (item) {
tempArr.push({
label: item.label,
num: data[item.name] || '-',
prefix: item.prefix,
suffix: item.suffix,
level: item.level,
});
});
this.setState({
statisticData: tempArr
});
if (headField) {
if (data[headField.name]) {
this.setState({
header: {
label: headField.label,
num: data[headField.name],
prefix: headField.prefix,
suffix: headField.suffix,
level: headField.level,
}
});
}
}
if (titleDesc) {
this.setState({
titleDescription: (0, tpl_1.filter)(titleDesc, data)
});
}
};
Statistic1.prototype.render = function () {
var _a = this.props, className = _a.className, width = _a.width, height = _a.height, ns = _a.classPrefix, title = _a.title, contentClassName = _a.contentClassName, contentStyle = _a.contentStyle, columnsCount = _a.columnsCount, numOver = _a.numOver, link = _a.link;
var style = this.props.style || {};
width && (style.width = width);
height && (style.height = height);
var _b = this.state, header = _b.header, statisticData = _b.statisticData, titleDescription = _b.titleDescription;
// 列数
var columnNum = columnsCount && statisticData.length !== 0 ?
columnsCount < statisticData.length ? columnsCount : statisticData.length :
statisticData.length !== 0 ? statisticData.length : 1;
// 行数
var rows = Math.ceil(statisticData.length / columnNum);
// 每列的宽度占比
var widthPercent = Math.floor((1 / columnNum) * 100) + '%';
var splitArr = [];
for (var i = 0; i < rows; i++) {
splitArr.push(statisticData.slice(i * columnNum, (i + 1) * columnNum));
}
var flexCenter = (0, classnames_1.default)('flex', 'justify-center', 'items-center');
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Statistic", 'flex', 'flex-col', 'w-full', 'bg-white', className), style: style },
(title || titleDescription) && react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Statistic--title", 'flex', 'justify-between') },
react_1.default.createElement("span", { className: 'title' }, title),
react_1.default.createElement("div", { className: "flex items-center" },
titleDescription && react_1.default.createElement("span", { className: "title-desc" }, titleDescription),
link && react_1.default.createElement("a", { href: "", onClick: function (e) {
e.preventDefault();
var hash = spark_md5_1.default.hash(link.schemaApi);
if (window.location.hash) {
// @ts-ignore
// 用于saas-web项目路由判断
window.linkPage = link;
// saas-web采用的是hash模式
// #/work/template/是固定的
window.location.hash = "#/work/template/a" + hash;
}
else {
history.pushState(link, '', "/work/template/a" + hash);
}
} }, "\u66F4\u591A"))),
react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Statistic--content", contentClassName), style: contentStyle },
header && react_1.default.createElement("div", { className: (0, classnames_1.default)(ns + "Statistic--header", flexCenter) },
react_1.default.createElement("span", { className: "desc" }, header.label),
react_1.default.createElement("span", { className: (0, classnames_1.default)("num", header.level) },
react_1.default.createElement("span", { className: "prefix" }, header.prefix),
Number(header.num) === Number(header.num) ? Number(header.num).toLocaleString() : header.num,
react_1.default.createElement("span", { className: "suffix" }, header.suffix))),
splitArr.map(function (row, idx1) { return (react_1.default.createElement("div", { key: idx1, className: 'row' }, row.map(function (col, idx2) {
var colNum = Number(col.num);
var num = colNum === colNum ? colNum.toLocaleString() : col.num;
return (react_1.default.createElement("div", { key: idx2, className: "col", style: { width: widthPercent } }, numOver ?
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: (0, classnames_1.default)("num", col.level) },
react_1.default.createElement("span", { className: "prefix" }, col.prefix),
num,
react_1.default.createElement("span", { className: "suffix" }, col.suffix)),
react_1.default.createElement("div", { className: "desc" }, col.label))
: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "desc" }, col.label),
react_1.default.createElement("div", { className: (0, classnames_1.default)("num", col.level) },
react_1.default.createElement("span", { className: "prefix" }, col.prefix),
num,
react_1.default.createElement("span", { className: "suffix" }, col.suffix)))));
}))); }))));
};
Statistic1.propsList = [];
return Statistic1;
}(react_1.default.Component));
exports.Statistic1 = Statistic1;
var StatisticRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(StatisticRenderer, _super);
function StatisticRenderer(props, context) {
var _this = _super.call(this, props) || this;
var scoped = context;
scoped.registerComponent(_this);
return _this;
}
StatisticRenderer.prototype.componentWillUnmount = function () {
var scoped = this.context;
scoped.unRegisterComponent(this);
_super.prototype.componentWillUnmount.call(this);
};
var _a;
StatisticRenderer.contextType = Scoped_1.ScopedContext;
StatisticRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'statistic1',
storeType: service_1.ServiceStore.name
})
// 将ChartRenderer注册到scoped，可以被form通过target、reload（submitToTarget、reloadTarget）等通知到Scoped
// Scoped.tsx获取到target或reload中字符串（由组件的name用逗号隔开的字符串）对应的组件，并执行对应组件的receive方法
,
(0, tslib_1.__metadata)("design:paramtypes", [Object, typeof (_a = typeof Scoped_1.IScopedContext !== "undefined" && Scoped_1.IScopedContext) === "function" ? _a : Object])
], StatisticRenderer);
return StatisticRenderer;
}(Statistic1));
exports.StatisticRenderer = StatisticRenderer;
//# sourceMappingURL=./renderers/Lion/Statistic/Statistic1.js.map