WEBAPP: Редактор панелей - применён P8PIndicator

app/panels/panels_editor/components/components.js

@@ -11,14 +11,14 @@ const COMPONETNS = [
     {
         name: "Форма",
         path: "form",
-        settings2: {
+        settings: {
             title: "Параметры формирования",
             autoApply: true,
             items: [
                 {
                     name: "AGENT",
                     caption: "Контрагент",
-                    unitCode: "AGNLIST",
+                    unitCode2: "AGNLIST",
                     unitName: "Контрагенты",
                     showMethod: "main",
                     showMethodName: "main",
@@ -29,7 +29,7 @@ const COMPONETNS = [
                 {
                     name: "DOC_TYPE",
                     caption: "Тип документа",
-                    unitCode: "DOCTYPES",
+                    unitCode2: "DOCTYPES",
                     unitName: "Типы документов",
                     showMethod: "main",
                     showMethodName: "main",
@@ -75,10 +75,10 @@ const COMPONETNS = [
     {
         name: "Индикатор",
         path: "indicator",
-        settings2: {
+        settings: {
             dataSource: {
                 type: "USER_PROC",
-                userProc: "ИндКолДогКонтрТип sdfg sdfg sfdg sdfg sdfg sdfg ",
+                userProc: "ИндКолДогКонтрТип",
                 stored: "UDO_P_P8P_AGNCONTR_IND",
                 respArg: "COUT",
                 arguments: [
@@ -95,7 +95,7 @@ const COMPONETNS = [
                 ]
             }
         }
-    } /*,
+    },
     {
         name: "Индикатор2",
         path: "indicator",
@@ -119,7 +119,7 @@ const COMPONETNS = [
                 ]
             }
         }
-    }*/
+    }
 ];
 
 //----------------

app/panels/panels_editor/components/indicator/view.js

@@ -9,7 +9,8 @@
 
 import React from "react"; //Классы React
 import PropTypes from "prop-types"; //Контроль свойств компонента
-import { Paper, Stack, Typography, Icon } from "@mui/material"; //Интерфейсные элементы
+import { Paper } from "@mui/material"; //Интерфейсные элементы
+import { P8PIndicator } from "../../../../components/p8p_indicator"; //Компонент индикатора
 import { useComponentDataSource } from "../components_hooks"; //Хуки для данных
 import { DATA_SOURCE_SHAPE } from "../editors_common"; //Общие объекты компонентов
 import { COMPONENT_MESSAGE_TYPE, COMPONENT_MESSAGES, ComponentInlineMessage } from "../views_common"; //Общие компоненты представлений
@@ -25,56 +26,9 @@ 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] } : {}) })
+    CONTAINER: { height: "100%" }
 };
 
 //-----------
@@ -97,15 +51,14 @@ const Indicator = ({ dataSource = null, values = {} } = {}) => {
 
     //Формирование представления
     return (
-        <Paper sx={STYLES.CONTAINER(indicator?.state)} elevation={6}>
+        <Paper
+            {...(haveConfing && haveData
+                ? { sx: { ...STYLES.CONTAINER } }
+                : { className: "component-view__container component-view__container__empty" })}
+            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>
+                <P8PIndicator {...indicator} elevation={0} />
             ) : (
                 <ComponentInlineMessage
                     icon={COMPONENT_ICON}

app/panels/panels_editor/panels_editor.js

@@ -3,8 +3,6 @@
     Корневой компонент
 */
 
-//TODO: Подчистка values после обновления имени элемента формы (и т.п.), удаления элемента формы
-
 //---------------------
 //Подключение библиотек
 //---------------------
@@ -142,9 +140,9 @@ const PanelsEditor = () => {
 
     //При подключении к странице
     useEffect(() => {
-        //addComponent(COMPONETNS[0]);
-        //addComponent(COMPONETNS[3]);
-        //addComponent(COMPONETNS[4]);
+        addComponent(COMPONETNS[0]);
+        addComponent(COMPONETNS[3]);
+        addComponent(COMPONETNS[4]);
         //addComponent(COMPONETNS[1]);
         //addComponent(COMPONETNS[2]);
         // eslint-disable-next-line react-hooks/exhaustive-deps