132 lines
4.4 KiB
JavaScript
132 lines
4.4 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Редактор панелей
|
|
Компоненты: Индикатор (представление)
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { Paper, Stack, Typography, Icon } from "@mui/material"; //Интерфейсные элементы
|
|
import { useComponentDataSource } from "../components_hooks"; //Хуки для данных
|
|
import { DATA_SOURCE_SHAPE } from "../editors_common"; //Общие объекты компонентов
|
|
import { COMPONENT_MESSAGE_TYPE, COMPONENT_MESSAGES, ComponentInlineMessage } from "../views_common"; //Общие компоненты представлений
|
|
import "../../panels_editor.css"; //Стили редактора
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Иконка компонента
|
|
const COMPONENT_ICON = "speed";
|
|
|
|
//Наименование компонента
|
|
const COMPONENT_NAME = "Индикатор";
|
|
|
|
//Типовые цвета
|
|
const COLOR = {
|
|
OK: "#00ffaaa0",
|
|
OK_CONTR: "white",
|
|
ERR: "#ff0000a0",
|
|
ERR_CONTR: "white",
|
|
WARN: "orange",
|
|
WARN_CONTR: "white",
|
|
UNDEFINED: "#dcdcdca0",
|
|
UNDEFINED_CONTR: "black",
|
|
INACTIVE: "#A9A9A9",
|
|
INACTIVE_CONTR: "black"
|
|
};
|
|
|
|
//Состояния
|
|
const INDICATOR_STATE = {
|
|
UNDEFINED: "UNDEFINED",
|
|
OK: "OK",
|
|
ERR: "ERR",
|
|
WARN: "WARN"
|
|
};
|
|
|
|
//Цвета заливки
|
|
const BG_COLOR = {
|
|
[INDICATOR_STATE.OK]: COLOR.OK,
|
|
[INDICATOR_STATE.ERR]: COLOR.ERR,
|
|
[INDICATOR_STATE.WARN]: COLOR.WARN
|
|
};
|
|
|
|
//Цвета иконок
|
|
const ICON_COLOR = {
|
|
[INDICATOR_STATE.OK]: COLOR.OK_CONTR,
|
|
[INDICATOR_STATE.ERR]: COLOR.ERR_CONTR,
|
|
[INDICATOR_STATE.WARN]: COLOR.WARN_CONTR
|
|
};
|
|
|
|
//Стили
|
|
const STYLES = {
|
|
CONTAINER: state => ({
|
|
...(BG_COLOR[state] ? { backgroundColor: BG_COLOR[state] } : {}),
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
overflow: "hidden",
|
|
padding: "10px"
|
|
}),
|
|
STACK: { padding: "10px", width: "100%" },
|
|
ICON: state => ({ fontSize: "100px", ...(ICON_COLOR[state] ? { color: ICON_COLOR[state] } : {}) })
|
|
};
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Индикатор (представление)
|
|
const Indicator = ({ dataSource = null, values = {} } = {}) => {
|
|
//Собственное состояние - данные
|
|
const [data, error] = useComponentDataSource({ dataSource, values });
|
|
|
|
//Флаг настроенности индикатора
|
|
const haveConfing = dataSource?.stored ? true : false;
|
|
|
|
//Флаг наличия данных
|
|
const haveData = data?.init === true && !error ? true : false;
|
|
|
|
//Данные индикатора
|
|
const indicator = data?.XINDICATOR || {};
|
|
|
|
//Формирование представления
|
|
return (
|
|
<Paper sx={STYLES.CONTAINER(indicator?.state)} elevation={6}>
|
|
{haveConfing && haveData ? (
|
|
<Stack direction={"row"} alignItems={"center"} justifyContent={"space-between"} style={STYLES.STACK}>
|
|
<Stack direction={"column"}>
|
|
<Typography variant={"h4"}>{[undefined, null, ""].includes(indicator.value) ? "н.д." : indicator.value}</Typography>
|
|
<Typography>{indicator.caption}</Typography>
|
|
</Stack>
|
|
{indicator.icon ? <Icon sx={STYLES.ICON(indicator.state)}>{indicator.icon}</Icon> : null}
|
|
</Stack>
|
|
) : (
|
|
<ComponentInlineMessage
|
|
icon={COMPONENT_ICON}
|
|
name={COMPONENT_NAME}
|
|
message={!haveConfing ? COMPONENT_MESSAGES.NO_SETTINGS : error ? error : COMPONENT_MESSAGES.NO_DATA_FOUND}
|
|
type={error ? COMPONENT_MESSAGE_TYPE.ERROR : COMPONENT_MESSAGE_TYPE.COMMON}
|
|
/>
|
|
)}
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств компонента - Индикатор (представление)
|
|
Indicator.propTypes = {
|
|
dataSource: DATA_SOURCE_SHAPE,
|
|
values: PropTypes.object
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export default Indicator;
|