enoad-component-web
Version:
针对web端的控件
308 lines • 16.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var styled_1 = require("./styled");
var Option = styled_1.SelectView.Option;
var icons_1 = require("@ant-design/icons");
var antd_1 = require("antd");
var components_1 = require("../../../components");
var LineCharts_1 = (0, tslib_1.__importDefault)(require("../../../components/Echarts/LineCharts"));
var PieCharts_1 = (0, tslib_1.__importDefault)(require("../../../components/Echarts/PieCharts"));
var GraphCharts_1 = (0, tslib_1.__importDefault)(require("../../../components/Echarts/GraphCharts"));
var util_1 = require("../../../core/util");
var action_1 = require("./action");
var NoticeUtil_1 = require("../../../core/NoticeUtil");
var TitleFilter = function (props) {
var title = props.title, fetchAllData = props.fetchAllData, openGraphModel = props.openGraphModel, onBack = props.onBack, checkNoticeEmitter = props.checkNoticeEmitter;
var _a = (0, react_1.useState)("thisWeek"), selectedValue = _a[0], setSelectedValue = _a[1];
var _b = (0, react_1.useState)(), rangeTime = _b[0], setRangeTime = _b[1];
var timeRef = (0, react_1.useRef)(null);
var options = [
{
label: "今日",
value: "today",
},
{
label: "昨日",
value: "yesterday",
},
{
label: "本周",
value: "thisWeek",
},
{
label: "上周",
value: "lastWeek",
},
{
label: "本月",
value: "thisMonth",
},
{
label: "自定义",
value: "system",
},
];
(0, react_1.useEffect)(function () {
if (selectedValue !== "system") {
var timeRange = (0, util_1.getTimeRange)(selectedValue, "");
fetchAllData && fetchAllData(timeRange);
}
else if (rangeTime && timeRef.current) {
var timeRange = (0, util_1.getTimeRange)(selectedValue, timeRef.current);
fetchAllData && fetchAllData(timeRange);
}
}, [selectedValue]);
return (react_1.default.createElement(styled_1.TitleFilterView, null,
onBack && (react_1.default.createElement(antd_1.Button, { style: { border: 0 }, icon: react_1.default.createElement(icons_1.ArrowLeftOutlined, null), onClick: function () {
onBack && onBack();
} })),
checkNoticeEmitter && (react_1.default.createElement(antd_1.Button, { type: "primary", style: { margin: "10px" }, shape: "round", onClick: function () {
checkNoticeEmitter && checkNoticeEmitter();
} }, "checkNoticeEmitter")),
react_1.default.createElement(styled_1.Title, null, title),
fetchAllData && (react_1.default.createElement(styled_1.SelectView, { showArrow: true, value: selectedValue, onChange: function (value) {
setSelectedValue(value);
} }, options.map(function (item) { return (react_1.default.createElement(Option, { key: item.value, value: item.value }, item.label)); }))),
fetchAllData && selectedValue === "system" && (react_1.default.createElement(styled_1.DateRangeSelect, { format: "YYYY-MM-DD", value: rangeTime, onChange: function (data, datastr) {
setRangeTime(data || []);
if (timeRef) {
timeRef.current = datastr;
}
}, onOpenChange: function (open) {
if (!open && timeRef.current) {
var timeRange = (0, util_1.getTimeRange)(selectedValue, timeRef.current);
fetchAllData && fetchAllData(timeRange);
}
} })),
fetchAllData && openGraphModel && (react_1.default.createElement(styled_1.ReloadButtonDiv, null,
react_1.default.createElement(antd_1.Button, { style: { border: 0 }, icon: react_1.default.createElement(icons_1.GitlabOutlined, null), onClick: function () {
openGraphModel && openGraphModel();
} }),
react_1.default.createElement(antd_1.Button, { icon: react_1.default.createElement(icons_1.RedoOutlined, null), style: { border: 0 }, onClick: function () {
var timeRange = (0, util_1.getTimeRange)(selectedValue, timeRef.current);
fetchAllData && fetchAllData(timeRange);
} })))));
};
var View = function (props) {
var onBack = props.onBack, isCheck = props.isCheck;
var _a = (0, react_1.useState)([]), cardOptionData = _a[0], setCardOptionData = _a[1]; //顶部展示的数据信息。
var _b = (0, react_1.useState)({
x: [],
}), lineData = _b[0], setLineData = _b[1];
var _c = (0, react_1.useState)([]), pieData = _c[0], setPieData = _c[1];
var _d = (0, react_1.useState)([]), color = _d[0], setColor = _d[1];
var _e = (0, react_1.useState)([]), cardAllData = _e[0], setCardAllData = _e[1];
var _f = (0, react_1.useState)({
x: [],
}), lineAllData = _f[0], setLineAllData = _f[1];
var _g = (0, react_1.useState)([]), pieAllData = _g[0], setPieAllData = _g[1];
var _h = (0, react_1.useState)([]), colorAll = _h[0], setColorAll = _h[1];
var _j = (0, react_1.useState)(false), showModal = _j[0], setShowModal = _j[1]; //打开关系图的model
var fetchAllData = function (timeRange) {
getResponse(timeRange);
getAllResponese();
};
var getResponse = function (timeRange) {
getCount(timeRange);
};
/**
* 头部数量获取。
* @param rangeTime
*/
var getCount = function (rangeTime) {
(0, action_1.fetchAllCount)(rangeTime)
.then(function (res) {
if (res.status == 200) {
if (res.data.code == 200 && res.data.data) {
var data_1 = res.data.data;
var newObj_1 = {
origin: data_1,
x: [],
};
//整合顶部展示数据结构
var cards_1 = new Array();
var originColor_1 = new Array();
var totol_1 = 0;
Object.keys(data_1).forEach(function (key) {
if (key.lastIndexOf("_label") == -1 &&
key.lastIndexOf("_color") == -1 &&
key.lastIndexOf("_icon") == -1 &&
key != "list") {
totol_1 += data_1[key];
originColor_1.push(data_1[key + "_color"]);
cards_1.push({
label: data_1[key + "_label"],
key: key,
value: data_1[key],
icon: data_1[key + "_icon"],
});
newObj_1[key] = new Array();
}
});
setColor(originColor_1);
setCardOptionData(cards_1);
//整合线图数据结构
var _a = data_1.list, list = _a === void 0 ? [] : _a;
list.forEach(function (item) {
var date = item.date;
var time = new Date(date);
newObj_1.x.push(time.getMonth() + 1 + "-" + time.getDate());
Object.keys(item).forEach(function (key) {
newObj_1[key] && newObj_1[key].push(item[key] || 0);
});
});
setLineData(newObj_1);
//设置饼图数据；
var newArr_1 = [];
Object.keys(data_1).forEach(function (key) {
if (key.lastIndexOf("_label") == -1 &&
key.lastIndexOf("_color") == -1 &&
key.lastIndexOf("_icon") == -1 &&
key != "list") {
if (totol_1 == 0) {
newArr_1.push({
name: "" + data_1[key + "_label"] + ":\r\n0%",
value: 0,
});
}
else {
var pre = Number.parseFloat((data_1[key] / totol_1).toFixed(2)) * 100;
newArr_1.push({
name: "" + data_1[key + "_label"] + ":\r\n" + (pre + "%"),
value: pre,
});
}
}
});
setPieData(newArr_1);
}
}
})
.catch(function (e) {
console.log("[getAllCount]", e);
});
};
var getAllResponese = function () {
(0, action_1.fetchAllResponese)()
.then(function (res) {
if (res.status == 200) {
if (res.data.code == 200 && res.data.data) {
var data_2 = res.data.data;
var newObj_2 = {
origin: data_2,
x: [],
};
//整合顶部展示数据结构
var cards_2 = new Array();
var originColor_2 = new Array();
var totol_2 = 0;
Object.keys(data_2).forEach(function (key) {
if (key.lastIndexOf("_label") == -1 &&
key.lastIndexOf("_color") == -1 &&
key.lastIndexOf("_icon") == -1 &&
key != "list") {
totol_2 += data_2[key];
originColor_2.push(data_2[key + "_color"]);
cards_2.push({
label: data_2[key + "_label"],
key: key,
value: data_2[key],
icon: data_2[key + "_icon"],
});
newObj_2[key] = [];
}
});
setColorAll(originColor_2);
setCardAllData(cards_2);
//整合线图数据结构
var _a = data_2.list, list = _a === void 0 ? [] : _a;
list.forEach(function (item) {
var date = item.date;
newObj_2.x.push(date);
Object.keys(item).forEach(function (key) {
newObj_2[key] && newObj_2[key].push(item[key] || 0);
});
});
setLineAllData(newObj_2);
//设置饼图数据；
var newArr_2 = [];
Object.keys(data_2).forEach(function (key) {
if (key.lastIndexOf("_label") == -1 &&
key.lastIndexOf("_color") == -1 &&
key.lastIndexOf("_icon") == -1 &&
key != "list") {
if (totol_2 == 0) {
newArr_2.push({
name: "" + data_2[key + "_label"] + ":\r\n0%",
value: 0,
});
}
else {
var pre = Number.parseFloat((data_2[key] / totol_2).toFixed(2)) * 100;
newArr_2.push({
name: "" + data_2[key + "_label"] + ":\r\n" + (pre + "%"),
value: pre,
});
}
}
});
setPieAllData(newArr_2);
}
}
})
.catch(function (e) {
console.log("[getAllCount]", e);
});
};
var openGraphModel = function () {
setShowModal(true);
};
var CheckNoticeEmitter = function () {
NoticeUtil_1.NoticeEmitter.emit(NoticeUtil_1.ENOAD_ERROR, "测试发送通知CheckNoticeEmitter");
};
return (react_1.default.createElement(styled_1.Container, null,
react_1.default.createElement(TitleFilter, { title: "区间看板", fetchAllData: fetchAllData, openGraphModel: openGraphModel, onBack: onBack, checkNoticeEmitter: isCheck && CheckNoticeEmitter }),
react_1.default.createElement(styled_1.CardListWrap, null, cardOptionData && cardOptionData.length > 0 ? (cardOptionData.map(function (item, index) { return (react_1.default.createElement(components_1.EnoadTitleCount, { key: item.key, size: cardOptionData.length, index: index, value: {
title: item.label,
count: Number(item.value) >= 10000
? "" + (Number(item.value) / 10000).toFixed(2)
: item.value,
icon: item.icon,
}, precision: Number(item.value) >= 10000 ? 2 : 0, valueStyle: { color: "#182437", fontSize: 34 }, suffix: Number(item.value) >= 10000 ? (react_1.default.createElement("span", { style: { fontSize: 16 } }, "\u4E07")) : undefined })); })) : (react_1.default.createElement(styled_1.EmptyView, { image: styled_1.EmptyView.PRESENTED_IMAGE_SIMPLE, style: {
width: "100%",
height: "140px",
margin: 0,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
} }))),
react_1.default.createElement(styled_1.ChartsBox, null,
react_1.default.createElement(LineCharts_1.default, { id: "line", title: "趋势图", data: lineData, color: color }),
react_1.default.createElement(PieCharts_1.default, { id: "pie", title: "占比图", data: pieData, color: color })),
react_1.default.createElement(TitleFilter, { title: "今年看板", fetchAllData: null, openGraphModel: null, onBack: null, checkNoticeEmitter: null }),
react_1.default.createElement(styled_1.CardListWrap, null, cardAllData && cardAllData.length > 0 ? (cardAllData.map(function (item, index) { return (react_1.default.createElement(components_1.EnoadTitleCount, { key: item.key, size: cardAllData.length, index: index, value: {
title: item.label,
count: Number(item.value) >= 10000
? "" + (Number(item.value) / 10000).toFixed(2)
: item.value,
icon: item.icon,
}, precision: Number(item.value) >= 10000 ? 2 : 0, valueStyle: { color: "#182437", fontSize: 34 }, suffix: Number(item.value) >= 10000 ? (react_1.default.createElement("span", { style: { fontSize: 16 } }, "\u4E07")) : undefined })); })) : (react_1.default.createElement(styled_1.EmptyView, { image: styled_1.EmptyView.PRESENTED_IMAGE_SIMPLE, style: {
width: "100%",
height: "140px",
margin: 0,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
} }))),
react_1.default.createElement(styled_1.ChartsBox, null,
react_1.default.createElement(LineCharts_1.default, { id: "allLine", title: "今年线图", data: lineAllData, color: colorAll }),
react_1.default.createElement(PieCharts_1.default, { id: "allPie", title: "今年占比", data: pieAllData, color: colorAll })),
react_1.default.createElement(styled_1.TableBox, null),
showModal && (react_1.default.createElement(GraphCharts_1.default, { title: "实体关系图", setShowModal: setShowModal }))));
};
exports.default = View;
//# sourceMappingURL=view.js.map